Prepare @syncedco/flow 0.5.0: fix invisible borders, dead space/divide, screen heights; add common utilities

[Synced-Co]

Summary

Release 0.5.0. Fixes three bugs that affect every Flow project, adds common utilities that AI tools and developers expect, and makes lint hints safer.

Fixes

• Borders drew nothing. border, border-t, border-2, border-x and the other width utilities only set a width, and there is no border-style anywhere in Flow, so browsers drew no line. They now also set border-style: solid.
• space-* and divide-* did nothing in the default (non include-core) setup used by the Next, Vite and Astro presets. They only set a variable that no rule used. They now generate their own > * + * child rules, for any value (space-y-7 works too). The old fixed-list static rules are removed.
• h-screen / min-h-screen / max-h-screen used the viewport width (100svw). Height-axis utilities (h, min-h, max-h, top, bottom, translate-y) now use 100svh; size-screen sets 100svw × 100svh.

Added

• dvh, dvw, lvh, lvw sizing keywords (min-h-dvh).
• border-dashed|dotted|double|hidden|none, divide-<colour>, divide-<style>, divide-x-2.
• order-*, col-start-*, col-end-*, row-start-*, row-end-*, justify-items-*, justify-self-*, flex-initial, max-w-none, max-h-none.
• bg-cover|contain|auto, bg-<position>, bg-no-repeat and other repeat values, bg-fixed|local|scroll, bg-linear-to-*, bg-none, object-<position>, origin-*.
• font-serif, text-ellipsis, text-clip, blur, transition-opacity|shadow|none, animate-ping|bounce|none.

A 327-class sample of common utility classes went from 29 unsupported to 4; the remaining 4 (container, prose, text-balance, text-pretty) are intentional and now hint to their sf- equivalents.

Lint hints

• Prefer Flow's own class (prose → sf-prose).
• Try the same utility with valid values (h-scren → h-screen, previously hidden).
• Only accept near typos, so hints no longer name a class that does something else (e.g. max-w-none → max-w-min, border-dashed → border-card).

Upgrade note

Sites that used border* or space-*/divide-* classes will start showing those lines and gaps after upgrading. That is the intended behaviour, but it is visible, hence the minor version bump.

Test plan

• pnpm build:types && pnpm check:generated && pnpm check && pnpm test (57/57 unit tests, 4 new)
• pnpm test:browser (15/15 Chromium)
• npm pack --dry-run (0.5.0, 93 files)
• Manual browser check: border border-dashed renders a 1px dashed border; space-y-4 divide-y children get a 16px gap and a 1px solid divider
• Release gate on tag: Chromium, Firefox and WebKit (not installed locally)

🤖 Generated with Claude Code