[dani-polani]

Problem

A user's column-mode diagram (5 lines, suffixes joined with |) had two issues:

1. A joined suffix took its own row under the word (ĥuʒaba / x), so it read as a separate word.
2. When the columns did not fit the width, the last one wrapped below the others, with links running across the whole diagram. The export copied that.

Fixes

Staircase for upright words. In column mode, an upright word and the pieces joined to it are laid out as a staircase: each piece keeps its own row and starts where the previous one ends. Every token keeps both sides free, so connectors from either neighbor column stay clean. A same-row layout (ĥuʒabax) was mocked up and rejected: links to the suffix from the stem side would cross the stem's text. RTL lines step right to left. Vertical (vertical) and sideways lines already continued the word along the column; they are unchanged.

No column wrapping. Columns always stay in one row. With auto-fit on, text and the gaps between columns shrink until the diagram fits the frame width (the gap slider keeps showing the set value as the maximum). Width fitting stops at half size: on a phone the per-line buttons alone can be wider than the frame, and shrinking further would make text unreadable without making it fit. With auto-fit off, or past that floor, the frame scrolls sideways. The home page's editor column gets min-w-0 so a wide diagram scrolls instead of stretching the page.

Readonly column feedback loop. Auto-fit now re-measures until its scales settle, which width fitting needs. That made an existing loop worse: a readonly column embed hugs its content, so fitting to its height shrank the text on every pass (on prod, the Japanese gallery example drops from 36px to about 9px within two seconds). Readonly columns no longer fit to height and render at their set sizes.

Dependencies. npm audit fix (patch and minor bumps: @sveltejs/kit, vitest, devalue, dompurify, fflate, source-map-js, and a few transitive ones) so the npm audit --audit-level=high CI step passes again. Three low advisories in cookie remain; they need a major bump.

Verification

Local production build vs prod, headless Chromium:

• All 22 gallery renders (/examples/render/…): the 20 rows examples are identical to prod (one differs only in anti-aliasing). The 2 column examples are stable at their set sizes; on prod they keep shrinking after the render-ready signal.
• Editor at 1440px for 8 examples (rows and columns): frame screenshots identical to prod.
• Editor at 375px: rows examples differ from prod by under 1% in font size, since auto-fit now runs its passes to the end. Column examples render at half size in one row and scroll; on prod their last column wrapped below.
• Pixel-identical to main: rows mode with joins, the Japanese and Mongolian examples in the editor.
• User-like 5-column diagram: one row at 1440px and 900px; scrolls when auto-fit is off or at 375px.
• Joins in vertical, sideways, upright, and RTL upright lines.
• "Hide controls": the credit sits centered under the columns.
• SVG export: one row of columns with staircases.
• /examples/render/… for both column examples: stable at the examples' own sizes.

svelte-check, prettier, eslint, and vitest (212) are clean. New unit tests cover word grouping and the width-fit step.

Follow-ups

• Pre-rendered gallery previews of column examples were captured with the shrunken text. Re-render them (make examples-previews) after deploy.

🤖 Generated with Claude Code