@getvitops/astro 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,200 @@
 # @getvitops/astro
 
+## 0.9.0
+
+### Minor Changes
+
+- **Fixed: `Subgrid` and `Cards` rendered as unstyled lists, in every format.**
+
+  `Subgrid.astro` drew its geometry with Tailwind utilities — `grid-rows-subgrid` and
+  `row-span-(--row-span)`, the latter Tailwind v4's arbitrary-CSS-variable syntax. No framework CSS
+  layer defines those, so under `css.format: 'css'` or `'bricks'` the component had no layout at all.
+
+  It failed under `'tailwind'` too, which is the part worth internalising: **Tailwind v4 is JIT and
+  does not scan `node_modules`**, so a class that only a shipped component references is never
+  generated. A consumer had to add the package to Tailwind's `@source` by hand to get a subgrid;
+  without that, cards silently laid out at `grid-row: auto` — visually plausible, quietly wrong. The
+  same trap applied to `grid` in `Subgrid` and `sr-only` / `not-sr-only` in `Popover` / `Drawer`:
+  those are in the generator's `TW_CLASH` list, so the framework strips its own rules for them from
+  the tailwind bundle and defers to Tailwind — meaning they resolved only when the consumer's own
+  templates happened to use the same class.
+
+  The components now emit framework classes only, and the `subgrid` pattern owns the layout:
+  - `Subgrid` renders `<ul class="subgrid"><li>…` and ships no `<style>` block of its own.
+  - `Popover` / `Drawer` use a component-scoped `visually-hidden` instead of `sr-only`. The
+    `not-sr-only` on their icons was a no-op and is gone.
+  - The `subgrid` pattern absorbed the wrapped-row margin the component used to carry, so
+    hand-written `.subgrid` markup gets it too, and resets list markers on `ul`/`ol`.
+
+  **Also fixed: `Cards` discarded the `card` class and every class you put on a child.** It wrote
+  `card` onto the slotted element and then serialised that element's _inner_ HTML, dropping the
+  attribute it had just set. Child `class` and `style` now reach the rendered `<li>`.
+
+  **Breaking — the subgrid custom properties are renamed.** One `--subgrid-*` vocabulary now covers
+  both the pattern and the component; the old names are removed, not aliased:
+
+  | removed                         | use                  |
+  | ------------------------------- | -------------------- |
+  | `--items-per-row`, `--cols`     | `--subgrid-cols`     |
+  | `--rows-per-item`, `--row-span` | `--subgrid-row-span` |
+  | `--row-margin`                  | `--subgrid-row-gap`  |
+
+  `--subgrid-gap` (the grid gap) is unchanged, as are the `.subgrid-cols-*` / `.subgrid-rows-*` /
+  `.subgrid-responsive` modifiers. Anything still setting an old name falls back to the pattern
+  defaults — 3 columns, span 2 — so grep for them when you upgrade.
+
+- **`tailwindcss` and `@tailwindcss/vite` are now optional peer dependencies, not dependencies.**
+
+  Only `css.format: 'tailwind'` ever used them, but every consumer installed them — including
+  `'css'` and `'bricks'` projects that never touch Tailwind. The integration now loads
+  `@tailwindcss/vite` lazily inside that branch and throws a directive error if it is missing.
+
+  **Migration:** if you use `css.format: 'tailwind'` (the default), add both to your
+  `devDependencies` — `pnpm add -D tailwindcss @tailwindcss/vite`. Most Tailwind projects already
+  have them. Everyone else can drop them.
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [c949cae]
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @getvitops/generator@0.9.0
+  - @getvitops/core@0.9.0
+  - @getvitops/vite@0.9.0
+  - @getvitops/utils@0.9.0
+
+## 0.8.0
+
+### Minor Changes
+
+- a334049: Make the semantic icon mapping reachable, and fail the build on unresolvable names.
+
+  `generateIconInclude()` — declare the semantic icon names a site needs plus which sets to draw
+  them from, get back the `include` map that keeps the bundle to just those glyphs — already existed
+  but was unreachable: it lived in `@getvitops/core/src/utils/`, which the package doesn't export.
+  It has moved to `@getvitops/utils` (a build-time concern, in the build-time utilities package),
+  which `@getvitops/astro` re-exports wholesale. So from `astro.config.mjs`:
+
+  ```js
+  import { generateIconInclude } from '@getvitops/astro';
+  import icon from 'astro-icon';
+
+  integrations: [
+    icon({
+      include: generateIconInclude({
+        ui: 'fa7-solid',
+        brand: 'simple-icons',
+        semantic: ['menu', 'close', 'search', 'github'],
+      }),
+    }),
+  ];
+  // → { "fa7-solid": ["bars","xmark","magnifying-glass"], "simple-icons": ["github"] }
+  ```
+
+  Swapping `ui` to `'lucide'` yields `{ lucide: ["menu","x","search"] }` from the same declaration —
+  which is the point: the semantic names are what your markup commits to, and the set is a config
+  choice. The output shape is the `include` both `astro-icon` and `astro-iconset` accept, so the
+  mapping doesn't tie you to either.
+
+  **Unresolvable names are now a build error.** Previously they were skipped silently, so swapping
+  sets appeared to succeed and the gaps surfaced as missing glyphs in production. The error names
+  every offender; an unknown set name throws too, listing the known sets.
+
+  Also fixes `@getvitops/create`'s emdash template, which pinned `@getvitops/astro: ^0.4.0` — a range
+  that stopped resolving when astro joined the fixed group at 0.7.0, so scaffolded projects were
+  stuck on the old line.
+
+- **New: `<wc-theme-editor>`, a live theme editor you can ship with your site.**
+
+  Tune the whole design system in the browser — palette, semantic roles, type roles, spacing, layout,
+  pattern geometry, radii, shadows — with no rebuild. Edits are layered as `:root` custom-property
+  overrides, persist to localStorage, and export as CSS or as a `design-system.json` patch. It follows
+  your site's colour scheme and drives the same `data-theme` + storage key as `<color-scheme-toggle>`,
+  so the two no longer fight.
+
+  It ships as a **separate, opt-in bundle** (`@getvitops/core/editor`, ~13 kB, no Lit) and is never
+  registered in `elements.js`: a page that doesn't ask for it pays nothing.
+
+  ```js
+  // astro.config.mjs
+  getvitops({
+    css: { input: 'design-system.json', format: 'css', out: 'src/styles' },
+    editor: true,
+  });
+  ```
+
+  ```html
+  <!-- anywhere in your layout -->
+  <wc-theme-editor></wc-theme-editor>
+  ```
+
+  `editor: true` copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors
+  `design-manifest.json` to `/vitops/design-manifest.json` (override with the `manifest` attribute).
+  Outside Astro, load the bundle yourself and point `manifest` at the file.
+
+  **Save straight back to your config, in dev.** `@getvitops/vite` now serves a dev-only
+  `/__vitops/design-system` endpoint: the editor POSTs its patch, the plugin deep-merges it into your
+  `design-system.json`, validates the _merged_ result, writes it back preserving the file's formatting,
+  then regenerates and reloads. The endpoint exists only under `vite dev` — on a static deploy the
+  editor detects its absence and hides the button, while everything else still works.
+
+  **Added:** `colors.roleTokens` in `design-manifest.json` — the functional token set (bg / border /
+  solid / on-solid / text / emphasis stops) precomputed per hue, in `default` and `surface` variants for
+  both appearances. Re-pointing a role at another hue needs these: `solid` is chosen by scanning the hue
+  and `on-solid` is a computed contrast value, so neither is derivable by a browser client.
+
+  **Removed:** the dead `interaction` block from `design-manifest.json` — a hardcoded
+  `{duration, easing}` literal with no schema key, no reverse-index entry, and no corresponding CSS
+  variable. Nothing could have consumed it meaningfully. The real animation knobs are
+  `--animation-duration-*` / `--custom-ease-*`.
+
+  **Fixed:** a `[popover]` reset in `popover.css` was stripping the background, padding and border from
+  any pattern used as a popover. It is imported after `drawer.css`, so at equal specificity it beat
+  `.drawer` — and `dialog` (0-0-1) too — leaving a `.drawer[popover]` transparent and unpadded despite
+  drawer.css documenting popover as supported. The reset now sits in `:where()` at zero specificity, so
+  it still overrides the UA stylesheet but any pattern class takes its surface back. Open/closed
+  behaviour is unchanged.
+
+  **Added:** `input[type="range"]` and `input[type="color"]` now have baseline styling in `forms.css`
+  (accent colour from `--ui-primary-solid`; the colour swatch picks up the control border and radius).
+
+### Patch Changes
+
+- aa2863d: Persist the colour scheme across navigations, and drop the UA body margin.
+
+  **The colour scheme now sticks.** `<color-scheme-toggle>` records the explicit choice in
+  `localStorage` (`vitops-color-scheme`) and restores it on load. Previously every navigation reset
+  to System — the component defaulted to `system` on each page and its `disconnectedCallback` even
+  deleted the attribute on unmount, so the scheme was per-page state rather than a user preference.
+  Choosing System clears the key, so a visitor can go back to following their OS.
+
+  `<Head />` from `@getvitops/astro` now also emits a tiny synchronous script that applies the stored
+  value **before first paint**. Without it the persisted choice would still work, but every page
+  would render light and flip once the deferred element bundle upgraded. A test asserts the storage
+  key stays in step between the two (they can't share an import: core exports only prebuilt bundles,
+  and the Head script must be a literal in the emitted HTML).
+
+  **`body { margin: 0 }`** is now part of the framework. The UA's 8px margin offset every full-bleed
+  surface — sticky headers and `bg-*` bands rendered inset with a sliver of canvas around them, since
+  the framework owns page gutters through `.centered`'s `--gutter`. This is the only UA reset the
+  framework makes; it deliberately still ships no general reset (no global `box-sizing` change),
+  which would silently reflow existing layouts.
+
+  **Migration:** if you were compensating for the body margin with a negative offset or your own
+  `body { margin: 0 }`, you can drop it. Sites relying on the 8px inset will need to add their own
+  padding.
+
+- Updated dependencies
+  - @getvitops/core@0.8.0
+  - @getvitops/generator@0.8.0
+  - @getvitops/vite@0.8.0
+  - @getvitops/utils@0.8.0
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -35,6 +35,18 @@ interface GetvitopsOptions {
   webComponents?: boolean;
   /** Generate + auto-inject the design-system CSS. Off unless provided. */
   css?: GetvitopsCssOptions;
+  /**
+   * Ship the live theme editor (default false).
+   *
+   * Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors
+   * the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves
+   * its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a
+   * `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.
+   *
+   * Editing is live on any deploy; **saving back** to `design-system.json` needs the
+   * dev server, so on a static build that button simply isn't rendered.
+   */
+  editor?: boolean;
 }
 declare function getvitops(opts?: GetvitopsOptions): AstroIntegration;
 //#endregion

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;AAAA;AAAA,iBA0BH,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAsBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;EAFzB;;;;;AAcM;AACP;;;;;EADC,MAAA;AAAA;AAAA,iBA2BsB,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}

package/dist/index.mjs

@@ -3,7 +3,6 @@ import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { faviconLinks, generateFavicons, writeFaviconManifest } from "@getvitops/utils";
 import vitops from "@getvitops/vite";
-import tailwindcss from "@tailwindcss/vite";
 
 export * from "@getvitops/utils"
 
@@ -37,6 +36,8 @@ function getvitops(opts = {}) {
 			const root = fileURLToPath(config.root);
 			const publicDir = fileURLToPath(config.publicDir);
 			const webComponents = opts.webComponents !== false;
+			const editor = opts.editor === true;
+			if (editor && !opts.css) logger.warn("editor: true needs a `css` config — it reads design-manifest.json.");
 			const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);
 			let hasSvg = false;
 			if (opts.favicon) {
@@ -58,12 +59,14 @@ function getvitops(opts = {}) {
 				const coreDist = join(dirname(fileURLToPath(import.meta.resolve("@getvitops/core/package.json"))), "dist");
 				const dest = join(publicDir, "vitops");
 				if (existsSync(coreDist)) {
-					for (const f of [
+					const bundles = [
 						"polyfills.js",
 						"deferred.js",
 						"elements.js",
 						"polyfills"
-					]) {
+					];
+					if (editor) bundles.push("editor.js");
+					for (const f of bundles) {
 						const src = join(coreDist, f);
 						if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });
 					}
@@ -78,7 +81,8 @@ function getvitops(opts = {}) {
 				}) : [],
 				themeColor: opts.favicon?.themeColor ?? null,
 				webComponents,
-				wcBase: "/vitops"
+				wcBase: "/vitops",
+				editor
 			})] } });
 			if (opts.css) {
 				const format = opts.css.format ?? "tailwind";
@@ -86,9 +90,18 @@ function getvitops(opts = {}) {
 				const plugins = [vitops({
 					input: opts.css.input ?? "design-system.json",
 					format,
-					out
+					out,
+					...editor ? { editorManifestDir: publicDir } : {}
 				})];
-				if (format === "tailwind") plugins.push(...tailwindcss());
+				if (format === "tailwind") {
+					let tailwindcss;
+					try {
+						({default: tailwindcss} = await import("@tailwindcss/vite"));
+					} catch {
+						throw new Error("[getvitops] css.format: 'tailwind' requires `tailwindcss` and `@tailwindcss/vite` in your devDependencies — install them, or switch to css.format: 'css' for the standalone bundle.");
+					}
+					plugins.push(...tailwindcss());
+				}
 				updateConfig({ vite: { plugins } });
 				const cssFile = format === "tailwind" ? "tailwind.css" : "styles.css";
 				if (opts.css.inject !== false) {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n  /**\n   * Auto-inject the generated stylesheet into every SSR page (default true).\n   * Set false when other integrations add routes that must not inherit the\n   * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n   * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n   * only your own pages (and previews rendered through them) are styled.\n   */\n  inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            for (const f of ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills']) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [vitops({ input: opts.css.input ?? 'design-system.json', format, out })];\n          // tailwindcss() is typed against a newer vite than @getvitops/vite's\n          // peer; the Plugin shapes are structurally compatible at runtime\n          // (Astro forwards them verbatim), so bridge the two type identities.\n          if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          if (opts.css.inject !== false) {\n            const cssPath = resolve(root, out, cssFile);\n            injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n            logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n          } else {\n            logger.info(\n              `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n            );\n          }\n        }\n      },\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n *   - favicons + PWA manifest (generated into public/),\n *   - the web-component runtime bundles (copied into public/vitops/),\n *   - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n  type FaviconLink,\n  faviconLinks,\n  generateFavicons,\n  writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n  /** Source SVG or PNG. */\n  source: string;\n  lowResSource?: string;\n  /** App name → enables `site.webmanifest`. */\n  name?: string;\n  /** PWA theme color (also `<meta name=\"theme-color\">`). */\n  themeColor?: string;\n  backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n  /** Path to design-system.json (default 'design-system.json'). */\n  input?: string;\n  /** Output format (default 'tailwind'). */\n  format?: Format;\n  /** Directory the generated CSS is written to (default 'src/styles'). */\n  out?: string;\n  /**\n   * Auto-inject the generated stylesheet into every SSR page (default true).\n   * Set false when other integrations add routes that must not inherit the\n   * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n   * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n   * only your own pages (and previews rendered through them) are styled.\n   */\n  inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n  favicon?: GetvitopsFaviconOptions;\n  /** Copy + link the web-component bundles (default true). */\n  webComponents?: boolean;\n  /** Generate + auto-inject the design-system CSS. Off unless provided. */\n  css?: GetvitopsCssOptions;\n  /**\n   * Ship the live theme editor (default false).\n   *\n   * Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors\n   * the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves\n   * its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a\n   * `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.\n   *\n   * Editing is live on any deploy; **saving back** to `design-system.json` needs the\n   * dev server, so on a static build that button simply isn't rendered.\n   */\n  editor?: boolean;\n}\n\ninterface HeadData {\n  favicons: boolean;\n  faviconLinks: FaviconLink[];\n  themeColor: string | null;\n  webComponents: boolean;\n  wcBase: string;\n  editor: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n  return {\n    name: '@getvitops/astro:virtual-head',\n    resolveId(id: string) {\n      return id === VIRTUAL_ID ? RESOLVED_ID : null;\n    },\n    load(id: string) {\n      return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n    },\n  };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n  return {\n    name: '@getvitops/astro',\n    hooks: {\n      'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n        const root = fileURLToPath(config.root);\n        const publicDir = fileURLToPath(config.publicDir);\n        const webComponents = opts.webComponents !== false;\n        const editor = opts.editor === true;\n        if (editor && !opts.css)\n          logger.warn('editor: true needs a `css` config — it reads design-manifest.json.');\n        const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n        let hasSvg = false;\n\n        // 1. Favicons + manifest → public/\n        if (opts.favicon) {\n          const source = resolve(root, opts.favicon.source);\n          hasSvg = source.endsWith('.svg');\n          await generateFavicons({\n            source,\n            outputDir: publicDir,\n            ...(opts.favicon.lowResSource\n              ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n              : {}),\n          });\n          if (opts.favicon.name && opts.favicon.themeColor) {\n            await writeFaviconManifest(publicDir, {\n              name: opts.favicon.name,\n              themeColor: opts.favicon.themeColor,\n              ...(opts.favicon.backgroundColor\n                ? { backgroundColor: opts.favicon.backgroundColor }\n                : {}),\n            });\n          }\n          logger.info('generated favicons + manifest → public/');\n        }\n\n        // 2. Web-component bundles → public/vitops/\n        if (webComponents) {\n          const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n          const coreDist = join(dirname(corePkg), 'dist');\n          const dest = join(publicDir, 'vitops');\n          if (existsSync(coreDist)) {\n            const bundles = ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills'];\n            if (editor) bundles.push('editor.js');\n            for (const f of bundles) {\n              const src = join(coreDist, f);\n              if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n            }\n            logger.info('copied web-component bundles → public/vitops/');\n          } else {\n            logger.warn(\n              `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n            );\n          }\n        }\n\n        // 3. Virtual head module for <Head/>\n        updateConfig({\n          vite: {\n            plugins: [\n              virtualHeadPlugin({\n                favicons: !!opts.favicon,\n                faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n                themeColor: opts.favicon?.themeColor ?? null,\n                webComponents,\n                wcBase: '/vitops',\n                editor,\n              }),\n            ],\n          },\n        });\n\n        // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n        if (opts.css) {\n          const format: Format = opts.css.format ?? 'tailwind';\n          const out = opts.css.out ?? 'src/styles';\n          const plugins = [\n            vitops({\n              input: opts.css.input ?? 'design-system.json',\n              format,\n              out,\n              // Mirrored inside the generate pass so the served copy can never be\n              // missing on a cold start or stale after a config edit.\n              ...(editor ? { editorManifestDir: publicDir } : {}),\n            }),\n          ];\n          // Tailwind is an optional peer — only the `tailwind` format needs it,\n          // so it's loaded here rather than imported at module scope. (The\n          // plugin is typed against a newer vite than @getvitops/vite's peer;\n          // the Plugin shapes are structurally compatible at runtime — Astro\n          // forwards them verbatim — so bridge the two type identities.)\n          if (format === 'tailwind') {\n            let tailwindcss: () => unknown[];\n            try {\n              ({ default: tailwindcss } = await import('@tailwindcss/vite'));\n            } catch {\n              throw new Error(\n                \"[getvitops] css.format: 'tailwind' requires `tailwindcss` and `@tailwindcss/vite` \" +\n                  'in your devDependencies — install them, or switch to css.format: ' +\n                  \"'css' for the standalone bundle.\",\n              );\n            }\n            plugins.push(...(tailwindcss() as unknown as typeof plugins));\n          }\n          updateConfig({ vite: { plugins } });\n          const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n          if (opts.css.inject !== false) {\n            const cssPath = resolve(root, out, cssFile);\n            injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n            logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n          } else {\n            logger.info(\n              `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n            );\n          }\n        }\n      },\n    },\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
   "license": "MIT",
   "files": [
@@ -39,23 +39,32 @@
     "access": "public"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "tailwindcss": "^4.3.3",
-    "@getvitops/core": "0.7.0",
-    "@getvitops/generator": "0.7.0",
-    "@getvitops/utils": "0.7.0",
-    "@getvitops/vite": "0.7.0"
+    "@getvitops/core": "0.9.0",
+    "@getvitops/vite": "0.9.0",
+    "@getvitops/generator": "0.9.0",
+    "@getvitops/utils": "0.9.0"
   },
   "devDependencies": {
-    "astro": "^7.1.2"
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^7.1.2",
+    "tailwindcss": "^4.3.3",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
+    "@tailwindcss/vite": ">=4",
     "astro": ">=7",
-    "astro-icon": ">=1"
+    "astro-icon": ">=1",
+    "tailwindcss": ">=4"
   },
   "peerDependenciesMeta": {
+    "@tailwindcss/vite": {
+      "optional": true
+    },
     "astro-icon": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   }
 }

package/src/components/Cards.astro

@@ -1,32 +1,34 @@
 ---
+/**
+ * Cards — a `Subgrid` whose items are `card`s. The child's own class and style
+ * ride along, so `<article class="bg-surface">` becomes `<li class="card bg-surface">`.
+ *
+ * The class has to be put on the `<li>` we hand to Subgrid rather than written
+ * into the slotted element: `serialize()` returns a node's *inner* HTML, so the
+ * element carrying the attribute is discarded on the way through.
+ */
 import type { HTMLAttributes } from 'astro/types';
 import Subgrid from './Subgrid.astro';
-import { parseRenderedSlots, serialize } from '@getvitops/utils';
+import { parseRenderedSlots, getAttribute, serialize } from '@getvitops/utils';
 
 export interface Props extends HTMLAttributes<'ul'> {}
 
 const { class: className, ...rest } = Astro.props;
 
 const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node => {
-  const cls = node.attrs?.find(attr => attr.name === 'class');
-  const value = `card${cls ? ' ' + cls.value : ''}`;
-  if (cls) {
-    cls.value = value;
-  } else {
-    node.attrs.push({ name: 'class', value });
-  }
-  
-  return { html: serialize(node), attrs: node.attrs };
-});
+const slots = nodes.filter(node => 'tagName' in node).map(node => ({
+  html: serialize(node),
+  class: getAttribute(node, 'class'),
+  style: getAttribute(node, 'style'),
+}));
 ---
 
 <Subgrid
   role="list"
-  class:list={["no-list-markers", className]}
+  class={className}
   {...rest}
 >
   {slots.map((slot) => (
-    <li class="card-wrapper" style={slot.attrs?.find(attr => attr.name === 'style')?.value} set:html={slot.html}></li>
+    <li class:list={["card", slot.class]} style={slot.style} set:html={slot.html}></li>
   ))}
 </Subgrid>

package/src/components/Drawer.astro

@@ -49,8 +49,8 @@ const { class: dialogAttrClass, style: dialogAttrStyle, ...dialogRestAttrs } = a
     aria-label={trigger?.label || 'Open drawer'}
     {...triggerRestAttrs}
   >
-    <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
-    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+    <span class:list={[trigger?.icon && 'visually-hidden']}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} />}
   </button>
 </slot>
 
@@ -63,3 +63,20 @@ const { class: dialogAttrClass, style: dialogAttrStyle, ...dialogRestAttrs } = a
 >
   <slot />
 </dialog>
+
+<style>
+  /* Icon-only triggers keep their label for screen readers. Component-scoped
+     rather than the framework's `sr-only`: that one is in the generator's
+     TW_CLASH list, so the tailwind format ships no rule for it. */
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/Head.astro

@@ -14,9 +14,26 @@ import head from 'virtual:getvitops/head';
 interface Props {
   favicons?: boolean;
   webComponents?: boolean;
+  editor?: boolean;
 }
-const { favicons = head.favicons, webComponents = head.webComponents } = Astro.props;
+const {
+  favicons = head.favicons,
+  webComponents = head.webComponents,
+  editor = head.editor,
+} = Astro.props;
 const wc = head.wcBase;
+
+/**
+ * Applies the remembered colour scheme before first paint.
+ *
+ * The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
+ * `head.test.ts` asserts they stay in step. try/catch because localStorage
+ * throws in private/partitioned contexts.
+ */
+const THEME_SCRIPT =
+  `try{var s=localStorage.getItem('vitops-color-scheme');` +
+  `if(s==='light'||s==='dark'){document.documentElement.dataset.theme=s;` +
+  `document.documentElement.style.colorScheme=s+' only'}}catch(e){}`;
 ---
 
 {favicons && head.faviconLinks.map((l: { rel: string; href: string; type?: string; sizes?: string }) => (
@@ -26,9 +43,30 @@ const wc = head.wcBase;
 
 {webComponents && (
   <>
+    {/*
+      Apply the remembered colour scheme before first paint.
+
+      `<color-scheme-toggle>` persists the choice to localStorage, but it loads
+      as a deferred module — so without this every navigation would paint the
+      light token set and flip to dark once the element upgraded. Synchronous and
+      inline on purpose: it has to run before the body renders.
+
+      The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
+      `head.test.ts` asserts they stay in step. Wrapped in try/catch because
+      localStorage throws in private/partitioned contexts.
+    */}
+    <script is:inline set:html={THEME_SCRIPT} />
     <link rel="modulepreload" href={`${wc}/polyfills.js`} />
     <script is:inline type="module" src={`${wc}/polyfills.js`}></script>
     <script is:inline defer src={`${wc}/deferred.js`}></script>
     <script is:inline type="module" src={`${wc}/elements.js`}></script>
   </>
 )}
+
+{/*
+  The live theme editor — a separate, opt-in bundle (getvitops({ editor: true })).
+  It is tooling, not part of the runtime, so it stays out of elements.js and off
+  every page that doesn't ask for it. Loads independently of `webComponents`:
+  <wc-theme-editor> registers itself and pulls in no framework element.
+*/}
+{editor && <script is:inline type="module" src={`${wc}/editor.js`}></script>}

package/src/components/Popover.astro

@@ -48,8 +48,8 @@ const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
     aria-label={trigger?.label || 'Open'}
     {...triggerRestAttrs}
   >
-  <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
-    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+  <span class:list={[trigger?.icon && 'visually-hidden']}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} />}
   </button>
 </slot>
 
@@ -87,4 +87,19 @@ const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
     font-family: inherit;
     color: inherit;
   }
+
+  /* Icon-only triggers keep their label for screen readers. Component-scoped
+     rather than the framework's `sr-only`: that one is in the generator's
+     TW_CLASH list, so the tailwind format ships no rule for it. */
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>

package/src/components/Subgrid.astro

@@ -1,4 +1,19 @@
 ---
+/**
+ * Subgrid — re-emits slotted children as `<li>` items of a `.subgrid` grid, so
+ * the tranches inside each one align on shared row lines. Every declaration
+ * lives in the framework's `subgrid` pattern (patterns/subgrid.css), which is
+ * emitted in all three output formats; this file is markup only.
+ *
+ * Nothing here may reach for a Tailwind utility: Tailwind doesn't scan
+ * node_modules, so a class only it can emit is silently never generated — and
+ * classes in the generator's TW_CLASH list are stripped from the framework's
+ * own tailwind bundle by design.
+ *
+ * Size it from the consumer's own CSS, which keeps media-query overrides
+ * working: `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`,
+ * `--subgrid-row-gap`. `--num-items` is set here for nth-child-style maths.
+ */
 import type { HTMLAttributes } from 'astro/types';
 import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
 
@@ -10,23 +25,8 @@ const nodes = parseRenderedSlots(await Astro.slots.render('default'));
 const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
 ---
 
-<style>
-  ul {
-    grid-template-columns: repeat(var(--cols, var(--_cols, 1)), minmax(0, 1fr));
-  }
-
-  li {
-    --current-row: round(down, calc((sibling-index() - 1) / var(--cols)), 1);
-      
-      /* Apply the extra gap ONLY if the row index is > 0.
-         We use clamp to ensure the multiplier is either 0 or 1.
-      */
-      --row-gap-multiplier: clamp(0, var(--current-row), 1);
-      margin-block-start: calc(var(--row-gap-multiplier) * var(--row-margin));
-  }
-</style>
-<ul class:list={["grid", className]} style={styleList({'--num-items': slots.length}, style)}>
+<ul class:list={["subgrid", className]} style={styleList({'--num-items': slots.length}, style)}>
   {slots.map((slot) => (
-    <li class:list={["grid grid-rows-subgrid row-span-(--row-span)", getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
+    <li class:list={[getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
   ))}
-</ul>
+</ul>