@getvitops/astro 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # @getvitops/astro
 
+## 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":";;;;;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;EAFzB;;;;;AAcM;AACP;;;;;EADC,MAAA;AAAA;AAAA,iBA2BsB,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}

package/dist/index.mjs

@@ -37,6 +37,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 +60,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 +82,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,7 +91,8 @@ 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());
 				updateConfig({ vite: { plugins } });

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 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   * 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          // 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "0.7.0",
+  "version": "0.8.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": [
@@ -41,13 +41,14 @@
   "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.8.0",
+    "@getvitops/vite": "0.8.0",
+    "@getvitops/generator": "0.8.0",
+    "@getvitops/utils": "0.8.0"
   },
   "devDependencies": {
-    "astro": "^7.1.2"
+    "astro": "^7.1.2",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "astro": ">=7",

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>}