@master/internal-site 0.2.4 → 0.2.6

package/dist/{localization-LfIbIysE.mjs → localization-IeZXkrNw.mjs}

@@ -255,6 +255,15 @@ async function sharedInterfaceKeys(sourceRoot = join(dirname(fileURLToPath(impor
 	await visit(sourceRoot);
 	return [...keys].sort();
 }
+/**
+* Shared copy and data modules can hold reader-facing prose that a translation mirrors.
+* Shared components and compiled tooling cannot: their interface strings are reviewed
+* through the localized dictionaries, so a rendering change must not mark every
+* document that uses them as changed English source.
+*/
+function isSharedSourceModule(path) {
+	return !/^dist\//.test(path) && !/\.(?:astro|svelte)$/.test(path) && !/\/common\/(?:translations|locales)\.[jt]s$/.test(path);
+}
 /** Follow local prose/data modules without executing them or importing product compiler code. */
 async function collectSourceDependencies(files, { siteRoot }) {
 	const root = resolve(siteRoot);
@@ -264,13 +273,13 @@ async function collectSourceDependencies(files, { siteRoot }) {
 	const visit = async (file) => {
 		file = resolve(file).replace(/\.(tw|ja|ko|cn)\.mdx$/, ".mdx");
 		if (!file.startsWith(root + sep) && !file.startsWith(sharedRoot + sep) || seen.has(file)) return;
-		if (file.startsWith(sharedRoot + sep) && /\/common\/(?:translations|locales)\.[jt]s$/.test(file.replaceAll("\\", "/"))) return;
+		if (file.startsWith(sharedRoot + sep) && !isSharedSourceModule(relative(sharedRoot, file).replaceAll("\\", "/"))) return;
 		seen.add(file);
 		const source = await readFile(file, "utf8").catch(() => void 0);
 		if (source === void 0) return;
 		const key = file.startsWith(sharedRoot + sep) ? `@master/internal-site/${relative(sharedRoot, file)}` : relative(root, file);
 		collected[key.replaceAll("\\", "/")] = source;
-		const imports = source.matchAll(/(?:\bfrom\s*|\bimport\s*(?:\(\s*)?)(['"])([^'"\n]+)\1/g);
+		const imports = source.replace(/\b(?:import|export)\s+type\b[^'";]*?\bfrom\s*(['"])[^'"\n]+\1/g, "").matchAll(/(?:\bfrom\s*|\bimport\s*(?:\(\s*)?)(['"])([^'"\n]+)\1/g);
 		for (const [, , specifier] of imports) {
 			if (!specifier.startsWith(".") && !specifier.startsWith("~/site/") && !specifier.startsWith("@master/internal-site/")) continue;
 			let target;

package/dist/localization.mjs

@@ -1 +1 @@
-export { t as assertTranslations, n as auditTranslations, r as collectSourceDependencies, i as discoverDocumentResources, a as emptyReviews, o as headingAnchors, p as localizedMetadata, s as readLocalizedDocument, c as reviewTranslation, l as sharedInterfaceKeys, u as stabilizeHeadingAnchors, d as validateSiteTranslations } from "./localization-LfIbIysE.mjs";
+export { t as assertTranslations, n as auditTranslations, r as collectSourceDependencies, i as discoverDocumentResources, a as emptyReviews, o as headingAnchors, p as localizedMetadata, s as readLocalizedDocument, c as reviewTranslation, l as sharedInterfaceKeys, u as stabilizeHeadingAnchors, d as validateSiteTranslations } from "./localization-IeZXkrNw.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {
@@ -308,14 +308,14 @@
   "peerDependencies": {
     "astro": "7.4.2",
     "svelte": "5.57.2",
-    "@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-astro": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
+    "@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-astro": "^2.1.0",
     "vite": "8.3.5",
-    "@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0",
-    "@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.0.0"
+    "@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
+    "@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0"
   },
   "dependencies": {
     "@astrojs/svelte": "^9.1.2",
@@ -349,6 +349,7 @@
     "@astrojs/markdown-remark": "^7.3.4",
     "@resvg/resvg-js": "2.6.2",
     "satori": "0.63.2",
+    "sharp": "0.35.5",
     "mdast-util-mdx-jsx": "^3.2.0",
     "micromark-extension-mdx-jsx": "^3.0.2"
   },

package/src/astro/image-variants.ts

@@ -0,0 +1,96 @@
+import { createHash } from 'node:crypto'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { basename, extname, join } from 'node:path'
+import sharp from 'sharp'
+import type { Plugin } from 'vite'
+import { cleanId } from './module-id'
+
+/** Widths a bitmap is also delivered at, when they are clearly smaller than its own. */
+export const variantWidths = [256, 640, 960, 1280, 1920, 2560]
+export const avifOptions = { quality: 60, effort: 3 } as const
+// libaom splits its work by the configured thread count, so the encoded bytes depend on it.
+// A fixed count keeps every builder's output identical regardless of its CPU count.
+const encoderThreads = 4
+const bitmap = /\.(?:png|jpe?g|webp)$/i
+const marker = '?master-image'
+
+export interface ImageVariants {
+  /** Files to write into the build output, keyed by their output-relative path. */
+  readonly files: Map<string, Uint8Array>
+  plugin(): Plugin
+  write(outDir: string): Promise<void>
+}
+
+/** Delivered widths for a bitmap of the given intrinsic width, smallest first. */
+export function deliveredWidths(width: number) {
+  return [...variantWidths.filter(candidate => candidate <= width * 0.8), width]
+}
+
+/**
+ * Build-time responsive images for bitmap imports.
+ *
+ * An imported PNG, JPEG or WebP resolves to `{ src, width, height, srcset }`, where every
+ * candidate is an AVIF encoded during the build. The module is plain data, so the server
+ * render and a hydrating island read the same `srcset`. Encoding is deterministic for a
+ * given sharp version; outputs are content-hashed under the assets directory.
+ * Development keeps Astro's own image modules so the dev server starts without encoding.
+ */
+export function imageVariants({ base, assetsDir }: { base: string; assetsDir: string }): ImageVariants {
+  const files = new Map<string, Uint8Array>()
+  const modules = new Map<string, Promise<string | undefined>>()
+  const directory = assetsDir.replace(/^\/|\/$/g, '')
+  const root = base.replace(/\/?$/, '/')
+
+  async function encode(source: Buffer, stem: string, width: number, intrinsic: number) {
+    const pipeline = sharp(source)
+    if (width !== intrinsic) pipeline.resize({ width })
+    const bytes = await pipeline.avif(avifOptions).toBuffer()
+    const hash = createHash('sha256').update(bytes).digest('base64url').slice(0, 8)
+    const name = `${directory}/${stem}-${width}.${hash}.avif`
+    files.set(name, bytes)
+    return { url: root + name, width }
+  }
+
+  async function load(file: string) {
+    const source = await readFile(file)
+    const { width, height, pages } = await sharp(source).metadata()
+    // Animated sources keep their original file.
+    if (!width || !height || (pages ?? 1) > 1) return
+    const stem = basename(file, extname(file)).replace(/[^\w-]+/g, '-')
+    const variants = await Promise.all(deliveredWidths(width).map(size => encode(source, stem, size, width)))
+    const image = { src: variants.at(-1)!.url, width, height, format: 'avif', srcset: variants.map(variant => `${variant.url} ${variant.width}w`).join(', ') }
+    return `export default ${JSON.stringify(image)}`
+  }
+
+  return {
+    files,
+    plugin: () => ({
+      name: '@master/internal-site:image-variants',
+      // Before Vite's asset handling and alongside Astro's image modules, which
+      // leave queried image ids to other plugins.
+      enforce: 'pre',
+      apply: 'build',
+      buildStart() { sharp.concurrency(encoderThreads) },
+      async resolveId(source, importer, options) {
+        if (!importer || importer.endsWith(marker) || source.includes('?') || !bitmap.test(source)) return
+        const resolved = await this.resolve(source, importer, { ...options, skipSelf: true })
+        if (!resolved || resolved.external || resolved.id.includes('?') || !bitmap.test(resolved.id)) return
+        return resolved.id + marker
+      },
+      async load(id) {
+        if (!id.endsWith(marker)) return
+        const file = cleanId(id)
+        this.addWatchFile(file)
+        if (!modules.has(file)) modules.set(file, load(file))
+        return await modules.get(file) ?? `export { default } from ${JSON.stringify(file)}`
+      }
+    }),
+    async write(outDir) {
+      for (const [name, bytes] of [...files].sort(([a], [b]) => a < b ? -1 : 1)) {
+        const target = join(outDir, name)
+        await mkdir(join(target, '..'), { recursive: true })
+        await writeFile(target, bytes)
+      }
+    }
+  }
+}

package/src/astro/index.ts

@@ -15,8 +15,10 @@ import { prepareContentPages } from './content-pages'
 import { validateSiteTranslations } from '../scripts/localization'
 import serverStyles from './server-styles'
 import svgMarkup from './svg-markup'
+import { imageVariants, type ImageVariants } from './image-variants'
 import localizedMdx from './localized-mdx'
 import { compactStyleAssets } from './style-assets'
+import { writeTranslationAssets } from './site-translations'
 import { hoistIslandScripts } from './island-scripts'
 import remarkSlugAndTOC from '../docs-shell/remark/slug-and-toc.js'
 import remarkMarkdownComponents from '../docs-shell/remark/markdown-components.js'
@@ -29,6 +31,7 @@ const propagated = (url: URL) => `() => import(${JSON.stringify(fsImport(url) +
 
 export default function masterSite(site: SiteConfig): AstroIntegration {
   let output: URL
+  let images: ImageVariants | undefined
   return {
     name: '@master/internal-site',
     hooks: {
@@ -103,10 +106,12 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
             })
           }
         }
+        images = command === 'build' ? imageVariants({ base: config.base, assetsDir: config.build.assets }) : undefined
         addRenderer({
           name: '@master/internal-site:svelte',
           serverEntrypoint: fileURLToPath(new URL('./svelte-renderer.ts', import.meta.url)),
-          clientEntrypoint: '@astrojs/svelte/client.js'
+          // Built pages deliver the island dictionary as a cached file; hydration waits for it.
+          clientEntrypoint: fileURLToPath(new URL('./svelte-client.ts', import.meta.url))
         })
         injectRoute({ pattern: '/[...path]', entrypoint: new URL('./Page.astro', import.meta.url), prerender: true })
         updateConfig({
@@ -115,8 +120,10 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
           build: { format: 'file' },
           markdown: { processor: unified({ remarkPlugins: [remarkSlugAndTOC, remarkMarkdownComponents], gfm: true, smartypants: false }), syntaxHighlight: false },
           experimental: { svgOptimizer: svgoOptimizer(svgoConfig as Parameters<typeof svgoOptimizer>[0]) },
-          vite: { plugins: [plugin, localizedMdx(site.i18n), sourceURL(), serverStyles([root, packageSource]), svgMarkup()], resolve: { dedupe: ['svelte'] }, server: { fs: { allow: [searchForWorkspaceRoot(root), packageSource] } } },
-          integrations: [svelte(), mdx(), masterCSS({ mode: 'progressive' })]
+          vite: { plugins: [plugin, localizedMdx(site.i18n), sourceURL(), serverStyles([root, packageSource]), svgMarkup(), ...images ? [images.plugin()] : []], resolve: { dedupe: ['svelte'] }, server: { fs: { allow: [searchForWorkspaceRoot(root), packageSource] } } },
+          // Every route is prerendered and its island classes are present in the rendered HTML,
+          // so pages ship their Master CSS without a browser runtime or hydration manifest.
+          integrations: [svelte(), mdx(), masterCSS({ mode: 'prerender' })]
         })
       },
       'astro:config:done': ({ config }) => { output = config.outDir },
@@ -124,7 +131,9 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
         const destination = output
         await mkdir(destination, { recursive: true })
         await cp(new URL('../public/', import.meta.url), destination, { recursive: true, force: false })
+        await images?.write(fileURLToPath(destination))
         await compactStyleAssets(fileURLToPath(destination), hoistIslandScripts)
+        await writeTranslationAssets(fileURLToPath(destination), site.i18n)
       }
     }
   }

package/src/astro/site-translations.ts

@@ -0,0 +1,31 @@
+import { createHash } from 'node:crypto'
+import { mkdir, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import sharedTranslations from '../docs-shell/common/translations'
+
+type Dictionaries = Record<string, Record<string, string>>
+
+/** The island dictionary of one locale: shared interface copy, then the site's own, as `siteContextOf()` merges it. */
+export function translationsOfLocale(siteTranslations: Dictionaries, locale: string): Record<string, string> {
+  return { ...sharedTranslations[locale], ...siteTranslations[locale] }
+}
+
+/**
+ * Built pages deliver the island dictionary as one content-addressed file per locale
+ * instead of serializing it into every page: browsers fetch it once and reuse it on
+ * every page of that locale. A locale without entries needs no file.
+ */
+export function translationAsset(translations: Record<string, string>) {
+  if (!Object.keys(translations).length) return
+  const json = JSON.stringify(translations)
+  const hash = createHash('sha256').update(json).digest('hex').slice(0, 16)
+  return { href: `/_astro/site-translations-${hash}.json`, json }
+}
+
+/** Write the files that `translationAsset()` names for every locale into the build output. */
+export async function writeTranslationAssets(output: string, i18n: { locales: readonly string[], translations: Dictionaries }) {
+  const assets = i18n.locales.map(locale => translationAsset(translationsOfLocale(i18n.translations, locale))).filter(asset => asset !== undefined)
+  if (!assets.length) return
+  await mkdir(resolve(output, '_astro'), { recursive: true })
+  await Promise.all(assets.map(({ href, json }) => writeFile(resolve(output, '.' + href), json)))
+}

package/src/astro/svelte-client.ts

@@ -0,0 +1,13 @@
+import hydrateSvelte from '@astrojs/svelte/client.js'
+import { applySiteTranslations } from '../docs-shell/site-dictionary'
+
+type Hydrate = ReturnType<typeof hydrateSvelte>
+
+/** `@astrojs/svelte` hydration once the page's dictionary has reached the context `getSite()` reads. */
+export default (element: HTMLElement) => {
+  const hydrate = hydrateSvelte(element)
+  return async (...args: Parameters<Hydrate>) => {
+    await applySiteTranslations()
+    return hydrate(...args)
+  }
+}

package/src/demo/specimens/background-attachment.json

@@ -4,7 +4,7 @@
     "id": "attach-to-scrollable-content",
     "title": "Attach to scrollable content",
     "html": [
-      "<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n  <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n  class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n         (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n         (background-size:320px|200px) (background-image:url(/demo/landscape.svg))\"\n>\n    <div class=\"flex flex-col items-start justify-between h(480)\">\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">Start of content</p>\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">End of content</p>\n    </div>\n  </section>\n  <p class=\"mt-md font-sm fg-text-muted\">Scroll this page as well as the inner panel.</p>\n</body>"
+      "<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n  <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n  class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n         (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n         (background-size:320px_200px) (background-image:url(/demo/landscape.svg))\"\n>\n    <div class=\"flex flex-col items-start justify-between h(480)\">\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">Start of content</p>\n      <p class=\"m(0) p-xs bg-surface-base fg-text-body\">End of content</p>\n    </div>\n  </section>\n  <p class=\"mt-md font-sm fg-text-muted\">Scroll this page as well as the inner panel.</p>\n</body>"
     ],
     "css": "",
     "classes": [
@@ -21,7 +21,7 @@
       "(background-repeat:repeat-y)",
       "(background-position-x:50%)",
       "(background-position-y:0px)",
-      "(background-size:320px|200px)",
+      "(background-size:320px_200px)",
       "(background-image:url(/demo/landscape.svg))",
       "flex",
       "flex-col",
@@ -38,7 +38,7 @@
     ],
     "classLists": [
       "min-h(720)",
-      "overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:320px|200px) (background-image:url(/demo/landscape.svg))",
+      "overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:320px_200px) (background-image:url(/demo/landscape.svg))",
       "flex flex-col items-start justify-between h(480)",
       "m(0) p-xs bg-surface-base fg-text-body",
       "m(0) p-xs bg-surface-base fg-text-body",

package/src/demo/specimens/background-origin.json

@@ -4,9 +4,9 @@
     "id": "choose-the-background-positioning-area",
     "title": "Choose the background positioning area",
     "html": [
-      "<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
-      "<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
-      "<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box)\n         (background-position:0|0) (background-size:80px|50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>"
+      "<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box)\n         (background-position:0_0) (background-size:80px_50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
+      "<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box)\n         (background-position:0_0) (background-size:80px_50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>",
+      "<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n  class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n         (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box)\n         (background-position:0_0) (background-size:80px_50px)\n         (background-image:url(/demo/landscape.svg))\"\n></div>"
     ],
     "css": "",
     "classes": [
@@ -16,20 +16,20 @@
       "p-lg",
       "b(8)",
       "b-dashed",
-      "(border-color:color-mix(var(--color-violet-50),|transparent))",
+      "(border-color:color-mix(var(--color-violet-50),_transparent))",
       "(background-clip:border-box)",
       "(background-repeat:no-repeat)",
       "(background-origin:border-box)",
-      "(background-position:0|0)",
-      "(background-size:80px|50px)",
+      "(background-position:0_0)",
+      "(background-size:80px_50px)",
       "(background-image:url(/demo/landscape.svg))",
       "(background-origin:padding-box)",
       "(background-origin:content-box)"
     ],
     "classLists": [
-      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))",
-      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))",
-      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),|transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box) (background-position:0|0) (background-size:80px|50px) (background-image:url(/demo/landscape.svg))"
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
+      "h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))"
     ],
     "highlighted": []
   }

package/src/demo/specimens/clip-path.json

@@ -5,7 +5,7 @@
     "title": "Clip with an inset",
     "html": [
       "<!-- Unclipped · original border -->\n<div\n  class=\"h(120) w(240) max-w-full\n         outline(1) outline-solid outline-line-subtle bg-surface-base\">\n  <div id=\"target\"\n    class=\"grid (place-items:center) h(120) w(240)\n           max-w-full b(2) b-solid b-blue-60 font-md\n           bg-blue-10 fg-blue-80 (clip-path:none)\">\n    Clipped panel\n  </div>\n</div>",
-      "<!-- Inset · rounded paint boundary -->\n<div\n  class=\"h(120) w(240) max-w-full\n         outline(1) outline-solid outline-line-subtle bg-surface-base\">\n  <div id=\"target\"\n    class=\"grid (place-items:center) h(120) w(240)\n           max-w-full b(2) b-solid b-blue-60 font-md\n           bg-blue-10 fg-blue-80\n           (clip-path:inset(8px|24px|round|12px))\">\n    Clipped panel\n  </div>\n</div>"
+      "<!-- Inset · rounded paint boundary -->\n<div\n  class=\"h(120) w(240) max-w-full\n         outline(1) outline-solid outline-line-subtle bg-surface-base\">\n  <div id=\"target\"\n    class=\"grid (place-items:center) h(120) w(240)\n           max-w-full b(2) b-solid b-blue-60 font-md\n           bg-blue-10 fg-blue-80\n           (clip-path:inset(8px_24px_round_12px))\">\n    Clipped panel\n  </div>\n</div>"
     ],
     "css": "",
     "classes": [
@@ -25,13 +25,13 @@
       "bg-blue-10",
       "fg-blue-80",
       "(clip-path:none)",
-      "(clip-path:inset(8px|24px|round|12px))"
+      "(clip-path:inset(8px_24px_round_12px))"
     ],
     "classLists": [
       "h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
       "grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:none)",
       "h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
-      "grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(8px|24px|round|12px))"
+      "grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(8px_24px_round_12px))"
     ],
     "highlighted": []
   }

package/src/demo/specimens/counter-set.json

@@ -4,7 +4,7 @@
     "id": "set-a-counter-on-one-item",
     "title": "Set a counter on one item",
     "html": [
-      "<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step|0)\">\n  <li class=\"mb-2xs (counter-increment:step|1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Install dependencies</li>\n  <li id=\"target\" value=\"9\" class=\"mb-2xs (counter-increment:step|1) (counter-set:step|9)\n    fg-text-blue::before (content:counter(step)'.\\00a0')::before\">Deployment checklist</li>\n  <li class=\"mb-2xs (counter-increment:step|1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Verify production</li>\n</ol>"
+      "<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)\">\n  <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Install dependencies</li>\n  <li id=\"target\" value=\"9\" class=\"mb-2xs (counter-increment:step_1) (counter-set:step_9)\n    fg-text-blue::before (content:counter(step)'.\\00a0')::before\">Deployment checklist</li>\n  <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n    (content:counter(step)'.\\00a0')::before\">Verify production</li>\n</ol>"
     ],
     "css": "",
     "classes": [
@@ -13,18 +13,18 @@
       "font-md",
       "leading-lg",
       "(list-style:none)",
-      "(counter-reset:step|0)",
+      "(counter-reset:step_0)",
       "mb-2xs",
-      "(counter-increment:step|1)",
+      "(counter-increment:step_1)",
       "fg-text-blue::before",
       "(content:counter(step)'.\\00a0')::before",
-      "(counter-set:step|9)"
+      "(counter-set:step_9)"
     ],
     "classLists": [
-      "m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step|0)",
-      "mb-2xs (counter-increment:step|1) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
-      "mb-2xs (counter-increment:step|1) (counter-set:step|9) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
-      "mb-2xs (counter-increment:step|1) fg-text-blue::before (content:counter(step)'.\\00a0')::before"
+      "m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)",
+      "mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
+      "mb-2xs (counter-increment:step_1) (counter-set:step_9) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
+      "mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before"
     ],
     "highlighted": []
   }

package/src/demo/specimens/filter.json

@@ -4,19 +4,19 @@
     "id": "use-drop-shadow-for-transparent-images",
     "title": "Use drop shadow for transparent images",
     "html": [
-      "<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md\n         (filter:drop-shadow(0|4px|2px|#7c3aed))\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>",
-      "<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md (box-shadow:0|4px|2px|#7c3aed)\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>"
+      "<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md\n         (filter:drop-shadow(0_4px_2px_#7c3aed))\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>",
+      "<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n  aria-label=\"Circle and diamond\"\n  width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n  class=\"block m-md (box-shadow:0_4px_2px_#7c3aed)\">\n  <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n  <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>"
     ],
     "css": "",
     "classes": [
       "block",
       "m-md",
-      "(filter:drop-shadow(0|4px|2px|#7c3aed))",
-      "(box-shadow:0|4px|2px|#7c3aed)"
+      "(filter:drop-shadow(0_4px_2px_#7c3aed))",
+      "(box-shadow:0_4px_2px_#7c3aed)"
     ],
     "classLists": [
-      "block m-md (filter:drop-shadow(0|4px|2px|#7c3aed))",
-      "block m-md (box-shadow:0|4px|2px|#7c3aed)"
+      "block m-md (filter:drop-shadow(0_4px_2px_#7c3aed))",
+      "block m-md (box-shadow:0_4px_2px_#7c3aed)"
     ],
     "highlighted": []
   }

package/src/demo/specimens/grid-auto-flow.json

@@ -5,7 +5,7 @@
     "title": "Fill gaps densely",
     "html": [
       "<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n  <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n  <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n  <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n  <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>",
-      "<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row|dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n  <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n  <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n  <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n  <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>"
+      "<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n  <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n  <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n  <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n  <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>"
     ],
     "css": "",
     "classes": [
@@ -18,7 +18,7 @@
       "max-w-full",
       "grid-col-span(2)",
       "p-sm",
-      "(grid-auto-flow:row|dense)"
+      "(grid-auto-flow:row_dense)"
     ],
     "classLists": [
       "grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
@@ -26,7 +26,7 @@
       "grid-col-span(2) p-sm",
       "p-sm",
       "p-sm",
-      "grid grid-cols(3) (grid-auto-flow:row|dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
+      "grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
       "grid-col-span(2) p-sm",
       "grid-col-span(2) p-sm",
       "p-sm",

package/src/demo/specimens/grid-template-areas.json

@@ -4,27 +4,27 @@
     "id": "apply-conditionally",
     "title": "Apply conditionally",
     "html": [
-      "<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px|48px|96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px|1fr)@sm (grid-template-rows:48px|96px)@sm\">\n  <header id=\"target\" class=\"(grid-area:head) p-sm\">Header</header>\n  <aside id=\"peer\" class=\"(grid-area:nav) p-sm\">Nav</aside>\n  <section id=\"item-3\" class=\"(grid-area:main) p-sm\">Content</section>\n</div>"
+      "<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm\">\n  <header id=\"target\" class=\"(grid-area:head) p-sm\">Header</header>\n  <aside id=\"peer\" class=\"(grid-area:nav) p-sm\">Nav</aside>\n  <section id=\"item-3\" class=\"(grid-area:main) p-sm\">Content</section>\n</div>"
     ],
     "css": "",
     "classes": [
       "grid",
       "(grid-template-areas:'head'|'nav'|'main')",
       "(grid-template-columns:1fr)",
-      "(grid-template-rows:48px|48px|96px)",
+      "(grid-template-rows:48px_48px_96px)",
       "gap-md",
       "(width:17.5rem)",
       "max-w-full",
       "(grid-template-areas:'head\\20head'|'nav\\20main')@sm",
-      "(grid-template-columns:80px|1fr)@sm",
-      "(grid-template-rows:48px|96px)@sm",
+      "(grid-template-columns:80px_1fr)@sm",
+      "(grid-template-rows:48px_96px)@sm",
       "(grid-area:head)",
       "p-sm",
       "(grid-area:nav)",
       "(grid-area:main)"
     ],
     "classLists": [
-      "grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px|48px|96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px|1fr)@sm (grid-template-rows:48px|96px)@sm",
+      "grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm",
       "(grid-area:head) p-sm",
       "(grid-area:nav) p-sm",
       "(grid-area:main) p-sm"

package/src/demo/specimens/grid-template-columns.json

@@ -4,14 +4,14 @@
     "id": "use-minmax",
     "title": "Control a track’s minimum",
     "html": [
-      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:1fr|2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>",
-      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)|2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>"
+      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>",
+      "<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full\">\n  <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n  <div id=\"peer\" class=\"p-sm\">2</div>\n</div>"
     ],
     "css": "",
     "classes": [
       "grid",
       "(grid-auto-rows:64px)",
-      "(grid-template-columns:1fr|2fr)",
+      "(grid-template-columns:1fr_2fr)",
       "gap-md",
       "(width:17.5rem)",
       "max-w-full",
@@ -19,14 +19,14 @@
       "p-sm",
       "block",
       "(width:12rem)",
-      "(grid-template-columns:minmax(0,1fr)|2fr)"
+      "(grid-template-columns:minmax(0,1fr)_2fr)"
     ],
     "classLists": [
-      "grid (grid-auto-rows:64px) (grid-template-columns:1fr|2fr) gap-md (width:17.5rem) max-w-full",
+      "grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full",
       "overflow-clip p-sm",
       "block (width:12rem)",
       "p-sm",
-      "grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)|2fr) gap-md (width:17.5rem) max-w-full",
+      "grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full",
       "overflow-clip p-sm",
       "block (width:12rem)",
       "p-sm"

package/src/demo/specimens/justify-content.json

@@ -4,15 +4,15 @@
     "id": "use-explicit-css-values",
     "title": "Keep overflowing content reachable",
     "html": [
-      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
-      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:unsafe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Unsafe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
-      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered fitting content\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>"
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Unsafe centered overflow\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
+      "<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered fitting content\">\n  <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>"
     ],
     "css": "",
     "classes": [
       "flex",
       "overflow-auto",
-      "(justify-content:safe|center)",
+      "(justify-content:safe_center)",
       "(width:15rem)",
       "max-w-full",
       "(flex:none)",
@@ -20,15 +20,15 @@
       "(height:4rem)",
       "(width:17.5rem)",
       "p-xs",
-      "(justify-content:unsafe|center)",
+      "(justify-content:unsafe_center)",
       "(width:12rem)"
     ],
     "classLists": [
-      "flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full",
+      "flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
       "flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
-      "flex overflow-auto (justify-content:unsafe|center) (width:15rem) max-w-full",
+      "flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full",
       "flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
-      "flex overflow-auto (justify-content:safe|center) (width:15rem) max-w-full",
+      "flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
       "flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs"
     ],
     "highlighted": []