tui-dropdown

Purpose

• Produce an ASCII Text UI (TUI) representation of Dropdown.
• Always output layout attributes (top/left/width/height, spacing, colors, typography, zIndex).
• Always output Pencil MCP–ready specs and a batch_design plan (≤25 operations per call).

Workflow

1. Parse input — Read the input model JSON (widthCols, grid, props, state, style, typography, layout, hotkeys).
2. Calculate layout — Convert column/row positions to pixel coordinates using the grid (cellWidthPx=8, cellHeightPx=16).
3. Render TUI_RENDER — Build the monospace ASCII art with box-drawing characters, respecting widthCols.
4. Build COMPONENT_SPEC — Emit the JSON spec with bbox, style, typography, state, and hotkeys.
5. Build PENCIL_SPEC — Emit the canvas and component list for Pencil MCP.
6. Plan PENCIL_BATCH_DESIGN — Emit batch_design calls (max 25 ops per call) to create the design in Pencil.
7. Validate — Verify bbox dimensions in COMPONENT_SPEC match the TUI_RENDER grid; confirm batch ops stay within the 25-op limit.

Input Model (Recommended)