feat(site-kit): the flag artwork leaves the browser bundle

[jlc488]

What

@devslab/site-kit/solid no longer ships the fourteen vendored flag SVGs (~115 KB; Spain alone 85 KB) in the browser bundle. Each flag menu renders one <symbol> sprite and every flag is a <use> of it; the server build writes the sprite, hydration adopts it, and the browser build only reaches the bodies through a dynamic import() (its own chunk, dist/flag-bodies.js) taken when a flag menu renders with no server HTML.

Why the premise was wrong

The report was "tree-shaking is not happening: a header-only consumer gets nearly the whole 138 KB file". Reproduced with a minimal Vite + vite-plugin-solid consumer (fixtures/bundle-probe):

entry	before	after
baseline (router only)	9.1 kB (gzip 3.5)	—
SiteHeader only	147.5 kB (gzip 38.8)	42.8 kB (gzip 15.1)
every export	160.1 kB (gzip 42.3)	55.1 kB (gzip 18.2)

Importing everything costs 13 KB more than the header alone, so Rollup drops the unused components fine. The 138 KB is LocaleMenu reaching flags.mjs statically — the select/flag choice is a runtime prop, so every header reaches both branches — and Flag re-setting innerHTML in an effect, hydration included, so the client genuinely needed the bodies. preserveModules or per-component subpaths would not have removed a byte; the fix is where the data lives, not how the file is cut.

Measured

• dist/solid.js: 138.2 KB (gzip 32.5) → 28.7 KB (gzip 8.2)
• TraceLinq landing (packages/landing, TanStack Start, main client chunk, built against the packed tarball in a throwaway worktree): 290,997 B (gzip 86,474) → 186,280 B (gzip 62,096); the 105 KB flag chunk is emitted beside it and a hydrated page never requests it.

Guards

• pnpm check builds the probe and fails if a flag body returns to the header-only main chunk, if that chunk exceeds 48 KB, if importing everything does not grow the bundle, or if the lazy chunk disappears.
• tests/site-kit-contracts.test.mjs pins the packaging rules (menu imports only flag-countries.mjs; loader is a dynamic import; server configs alias the server loader; sprite is zero-sized, not display:none).
• jsdom: client-only render fills the sprite after the chunk loads, one symbol per country, every <use> resolves, artwork ids scoped per menu, a product locale borrowing a vendored country shares its symbol. SSR: one sprite, fourteen symbols, the current locale's body written once and <use>d twice.
• TraceLinq's own landing Playwright suite against the swapped-in kit, plus a hydration probe in Chromium: server sprite shape, zero flag-bodies requests on load and after a client-side locale change, flags render from the sprite, console clean.

API

@devslab/site-kit/flags keeps FLAG_COUNTRY, FLAGS_BY_COUNTRY, LOCALE_FLAGS, flagFor and gains flagCountryFor, FLAG_VIEWBOX. No consumer code changes; consumers take it through their caret bump. Decision D-020; backlog item 13.

Not done here

Server-rendered HTML still carries the bodies (once per country per menu, previously the current locale twice). Moving them to fetched <img src> files would need static serving in every consumer — a separate decision, noted in D-020's revisit clause.