Skip to content

feat: add stack auto-layout container with Tailwind-like class shorthand - #4

Merged
eigger merged 1 commit into
mainfrom
feat/auto-layout-stack
Jun 30, 2026
Merged

feat: add stack auto-layout container with Tailwind-like class shorthand#4
eigger merged 1 commit into
mainfrom
feat/auto-layout-stack

Conversation

@eigger

@eigger eigger commented Jun 30, 2026

Copy link
Copy Markdown
Owner

Add a flexbox-style stack container (aliases row/column) that packs child elements along an axis with gap, padding, justify, and cross-axis alignment — children need no coordinates, the stack measures and positions them. Drawing is still delegated to the normal element handlers, so every registered element works as a child and existing absolute-coordinate payloads are unaffected (purely additive, no breaking change).

  • New imagespec.classutil.parse_class: optional Tailwind-like class string shorthand that desugars to the structured keys (explicit keys win). Only the layout subset is recognized; styling/color classes are ignored so colors and fonts stay on each element's own keys. Faithful Tailwind spacing scale (N x 4px), arbitrary values (gap-[10]/p-[3px]), fractions (mt-0.5), and negative margins (-mt-2) for fine nudges.
  • Per-child layout via the child's class or a layout: sub-dict (grow, self-align, margin) — kept separate from drawing keys so e.g. a diagram's own margin is never mistaken for a layout margin.
  • _blit helper composites tiles with clipping so negative margins / overflow are safe.

Docs:

  • New self-contained docs/authoring.md LLM authoring guide (output contract, layout decision model, class shorthand, common pitfalls, device sizes, and worked examples — each verified by rendering), linked from the README.
  • Fix invalid one-line multi-key YAML examples in the README.

Tests: stack packing/alignment/justify/grow/margin/padding/offset + class parser (scale, arbitrary, fractions, negative, unknown-token) + matrix samples for stack/row/column. 117 passing, ruff clean.

Add a flexbox-style `stack` container (aliases `row`/`column`) that packs
child elements along an axis with gap, padding, justify, and cross-axis
alignment — children need no coordinates, the stack measures and positions
them. Drawing is still delegated to the normal element handlers, so every
registered element works as a child and existing absolute-coordinate payloads
are unaffected (purely additive, no breaking change).

- New `imagespec.classutil.parse_class`: optional Tailwind-like `class` string
  shorthand that desugars to the structured keys (explicit keys win). Only the
  layout subset is recognized; styling/color classes are ignored so colors and
  fonts stay on each element's own keys. Faithful Tailwind spacing scale
  (N x 4px), arbitrary values (`gap-[10]`/`p-[3px]`), fractions (`mt-0.5`), and
  negative margins (`-mt-2`) for fine nudges.
- Per-child layout via the child's `class` or a `layout:` sub-dict (grow,
  self-align, margin) — kept separate from drawing keys so e.g. a diagram's own
  `margin` is never mistaken for a layout margin.
- `_blit` helper composites tiles with clipping so negative margins / overflow
  are safe.

Docs:
- New self-contained `docs/authoring.md` LLM authoring guide (output contract,
  layout decision model, class shorthand, common pitfalls, device sizes, and
  worked examples — each verified by rendering), linked from the README.
- Fix invalid one-line multi-key YAML examples in the README.

Tests: stack packing/alignment/justify/grow/margin/padding/offset + class
parser (scale, arbitrary, fractions, negative, unknown-token) + matrix samples
for stack/row/column. 117 passing, ruff clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@eigger
eigger merged commit feb6611 into main Jun 30, 2026
5 checks passed
@eigger
eigger deleted the feat/auto-layout-stack branch June 30, 2026 14:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant