Four questions about sizing, missing parts, scrollable pages and text layout in prompts

[JackAndrew-oss]

Thanks for open-sourcing this — it's very approachable for someone without a design background. I'm mainly using the web target, and there are four things I'm not sure about:
Some parts can only be resized horizontally, not vertically
For example, the top app bar and buttons only seem to change in width; the height appears to be fixed. Am I missing something?
A few elements I couldn't find
Dropdown: I'd like to place a dropdown/select inside the top app bar, but couldn't find one in the parts panel.
Vertical divider: I only found the horizontal divider, not a vertical one.
How to express a page taller than one screen
I want to design a long page that scrolls down, but the canvas seems to be a fixed single screen.
The prompt doesn't capture text layout accurately
I arrange the text a certain way on the canvas, but the generated prompt either doesn't mention that arrangement at all, or describes a different position than the one I actually used. The downstream AI tool then builds from it, and the final page drifts further and further from what I originally had in mind.
If any of the above is down to my own misunderstanding, please do correct me — I'd really appreciate it. And thanks again for maintaining this project.

[jsabutis]

I went through the source for each of these. Taking them in order.

The heights are fixed deliberately. In lib/tokens.ts a part only resizes on an axis its spec declares, and button and topAppBar declare width only, no size2. Their heights are chosen values: H = 56, which is the M3 Expressive medium button rather than the 40dp classic filled one, and 64 + STATUS_BAR_H for the bar, which the web target emits as a plain 64dp anyway. Parts that do declare size2, like box, card, map and navRail, resize both ways.

On the missing parts, one is there under a different name and one really is missing. The dropdown is the part labelled Dropdown (kind: "select") in the Inputs group: text-field appearance, 56dp, options in tabs. There's no vertical divider; divider declares width only. A narrow box at the height you want is the closest stand-in.

There isn't a scrolling canvas. A screen is one of two presets, phone 412 x 892 or desktop 1280 x 800 (framePresetPatch), with no free height field. The project's own guidance in public/agent.md says it directly: "One idea per screen. If a screen needs a second scroll of parts, it is two screens." So a long page becomes a couple of frames.

The prompt drift is the most interesting one. describeNodes in lib/prompt.ts groups parts into rows and, at the top level of a screen, only writes "First" and "Below that". The positional wording like "Near the top, aligned left" comes from zone, and that's only emitted for parts nested inside a container. Loose text therefore loses its horizontal position entirely. What helps: put the group inside a box, hit Tidy first so the canvas matches the rows the generator will infer, and use each part's note, which lands in the prompt verbatim. Discussion #408 is about reworking this area, and your case would be a useful one to add there.

[lnkiai]

Thank you, @jsabutis, for going through each of these against the source. That is all accurate, and I am marking it as the answer.

@JackAndrew-oss, in short: the fixed heights follow the Material 3 sizes on purpose, the dropdown is the Dropdown part under Inputs, a long page is best split into a few screens, and for text placement, putting the text inside a box, pressing Tidy, and adding a note to the part all help the prompt. Improving how the prompt describes layout is discussed in #408, and your example would be welcome there.