@master/internal-site 0.1.2 → 0.1.3

package/README.md

@@ -27,6 +27,12 @@ Optional `header.communityNavs` selects the links shown beside search without re
 
 The app module exports its logo component, navigation, version links and source/feedback URLs using the `SiteApp` contract. Consumers retain their own content and homepage composition. Ordinary documents use `content/<section>/<slug>/content.mdx` and `metadata.ts`; a local `page.astro` can override the generated entry. Dynamic routes enumerate params from lightweight `params.ts` files. The integration owns generated routes, page asset collection and the Astro/Svelte renderer setup.
 
+Blog articles with a cover declare `cover: { src, alt, width, height }` in their
+metadata. The shared article layout renders it below the byline and uses it for
+Open Graph and Twitter images. An optional `socialImage` points to a PNG/JPEG
+version of the same artwork; a cover takes precedence over separate social-card
+images. Articles without a cover retain their existing layout and social cards.
+
 ```css
 /* styles/globals.css */
 @import '@master/css';

package/dist/astro.mjs

@@ -9,6 +9,7 @@ import { cp, mkdir, readFile, readdir, unlink, writeFile } from "node:fs/promise
 import { createReadStream, existsSync } from "node:fs";
 import { isCSSRequest, searchForWorkspaceRoot, transformWithOxc } from "vite";
 import { optimize } from "svgo";
+import { createHash } from "node:crypto";
 import Slugger from "github-slugger";
 import { SKIP, visit } from "unist-util-visit";
 import { parse, parseExpressionAt } from "acorn";
@@ -156,6 +157,108 @@ function svgMarkup() {
 		}
 	};
 }
+// src/astro/style-assets.ts
+/** Collapse only the compiler's unconditional, same-directory asset links.
+* This is concatenation of already compiled CSS, not a second CSS compiler.
+* Keep conditions, layers, URLs, repeated occurrences and unrelated imports intact.
+*/
+async function inlineGeneratedStyles(file, ancestors = []) {
+	if (ancestors.includes(file)) throw new Error(`Cyclic generated stylesheet: ${file}`);
+	const source = await readFile(file, "utf8");
+	let code = "", cursor = 0;
+	while (cursor < source.length) {
+		const rest = source.slice(cursor);
+		const trivia = /^(?:\s+|\/\*[\s\S]*?\*\/|@layer\s+[\w,\s-]+;)/.exec(rest);
+		if (trivia) {
+			code += trivia[0];
+			cursor += trivia[0].length;
+			continue;
+		}
+		const match = /^@import\s+["'](\.\/master-css-[\w-]+\.css)["']\s*;/.exec(rest);
+		if (!match) break;
+		code += await inlineGeneratedStyles(resolve(dirname(file), match[1]), [...ancestors, file]) + "\n";
+		cursor += match[0].length;
+	}
+	const expanded = code + source.slice(cursor);
+	return /@(?:import|charset|namespace)\b/.test(expanded) ? source : expanded;
+}
+/** Preserve HTML link order and each reusable entry's cache identity. Originals
+* remain available to any JS/CSS references; no client loading logic is added. */
+async function compactStyleAssets(output) {
+	const root = resolve(output), replacements = /* @__PURE__ */ new Map();
+	const documents = /* @__PURE__ */ new Map(), users = /* @__PURE__ */ new Map();
+	const boundaries = /* @__PURE__ */ new Set();
+	async function emit(code) {
+		const href = `/_astro/site-style-${createHash("sha256").update(code).digest("hex").slice(0, 20)}.css`;
+		await writeFile(resolve(root, "." + href), code);
+		return href;
+	}
+	async function walk(directory) {
+		for (const entry of await readdir(directory, { withFileTypes: true })) {
+			const file = resolve(directory, entry.name);
+			if (entry.isDirectory()) {
+				await walk(file);
+				continue;
+			}
+			if (!entry.name.endsWith(".html")) continue;
+			let html = await readFile(file, "utf8");
+			const links = [...html.matchAll(/<link\b(?=[^>]*\brel="stylesheet")(?=[^>]*\bhref="(\/_astro\/[^"/]+\.css)")[^>]*>/g)];
+			for (const match of links) {
+				const href = match[1];
+				if (!replacements.has(href)) {
+					const input = resolve(root, "." + href);
+					const source = await readFile(input, "utf8");
+					const code = await inlineGeneratedStyles(input);
+					const next = source === code ? href : await emit(code);
+					replacements.set(href, next);
+				}
+				const next = replacements.get(href);
+				if (/\/(site|interface|documents)\./.test(href)) boundaries.add(next);
+				const pages = users.get(next) ?? [];
+				if (!pages.includes(file)) pages.push(file);
+				users.set(next, pages);
+				html = html.replace(match[0], match[0].replace(`href="${href}"`, `href="${next}"`));
+			}
+			documents.set(file, html);
+		}
+	}
+	await walk(root);
+	const signatures = new Map([...users].map(([href, pages]) => [href, pages.sort().join("\n")]));
+	const adjacent = /* @__PURE__ */ new Map();
+	for (const [file, html] of documents) for (const match of html.matchAll(/(?=<link rel="stylesheet" href="([^"\s]+)">\s*<link rel="stylesheet" href="([^"\s]+)">)/g)) {
+		const key = `${match[1]}\n${match[2]}`;
+		const pages = adjacent.get(key) ?? /* @__PURE__ */ new Set();
+		pages.add(file);
+		adjacent.set(key, pages);
+	}
+	for (const [file, source] of documents) {
+		let html = source;
+		const runs = [...source.matchAll(/(?:<link rel="stylesheet" href="\/_astro\/[^"/]+\.css">\s*){2,}/g)];
+		for (const run of runs) {
+			const links = [...run[0].matchAll(/<link rel="stylesheet" href="([^"\s]+)">\s*/g)];
+			let replacement = "", group = [];
+			async function flush() {
+				if (group.length > 1) {
+					const code = (await Promise.all(group.map((link) => readFile(resolve(root, "." + link[1]), "utf8")))).join("\n");
+					replacement += code.includes("@import") ? group.map((link) => link[0]).join("") : `<link rel="stylesheet" href="${await emit(code)}">`;
+				} else replacement += group.map((link) => link[0]).join("");
+				group = [];
+			}
+			for (const link of links) {
+				if (boundaries.has(link[1])) {
+					await flush();
+					replacement += link[0];
+					continue;
+				}
+				if (group.length && (signatures.get(group[0][1]) !== signatures.get(link[1]) || adjacent.get(`${group.at(-1)[1]}\n${link[1]}`)?.size !== users.get(link[1])?.length)) await flush();
+				group.push(link);
+			}
+			await flush();
+			html = html.replace(run[0], replacement);
+		}
+		await writeFile(file, html);
+	}
+}
 // src/docs-shell/utils/resolve-heading.js
 function resolveHeading(title, id) {
 	const explicit = typeof title === "string" && title.match(/\s+\{#([\w-]+)\}$/);
@@ -301,8 +404,38 @@ function fenceProps(node) {
 	if (!props.lang) props.lang = node.lang ?? "";
 	return props;
 }
-const componentsExport = `import { markdownComponents as __markdownComponents } from '@master/internal-site/components/markdown-components'
-export const components = __markdownComponents`;
+const componentPaths = {
+	a: "markdown/Anchor.astro",
+	h2: "markdown/Heading2.astro",
+	h3: "markdown/Heading3.astro",
+	img: "Image.svelte",
+	Image: "Image.svelte",
+	table: "markdown/Table.astro",
+	Code: "Code.astro",
+	InlineCode: "InlineCode.astro",
+	PMAction: "PMAction.astro",
+	Do: "Do.astro",
+	DoNot: "DoNot.astro",
+	Info: "Info.astro",
+	Warn: "Warn.astro",
+	InteractingIndicator: "InteractingIndicator.astro"
+};
+function documentComponents(tree) {
+	const used = /* @__PURE__ */ new Set();
+	visit(tree, (node) => {
+		if (node.type === "link" || node.type === "linkReference") used.add("a");
+		if (node.type === "image" || node.type === "imageReference") used.add("img");
+		if (node.type === "table") used.add("table");
+		if (node.type === "heading" && [2, 3].includes(node.depth)) used.add(`h${node.depth}`);
+		if (["mdxJsxFlowElement", "mdxJsxTextElement"].includes(node.type) && node.name in componentPaths) used.add(node.name);
+	});
+	const entries = [...used].sort().map((name, index) => ({
+		name,
+		local: `__masterComponent${index}`,
+		path: componentPaths[name]
+	}));
+	return entries.map(({ local, path }) => `import ${local} from '@master/internal-site/components/${path}'`).join("\n") + `\nexport const components = {${entries.map(({ name, local }) => `${name}: ${local}`).join(", ")}}`;
+}
 /**
 * Markdown constructs that render through site components: fences become `Code` (or a
 * package-manager `PMAction`), inline code becomes `InlineCode`, and marked paragraphs become
@@ -310,14 +443,6 @@ export const components = __markdownComponents`;
 */
 function remarkMarkdownComponents() {
 	return (tree) => {
-		tree.children.unshift({
-			type: "mdxjsEsm",
-			value: componentsExport,
-			data: { estree: parse(componentsExport, {
-				ecmaVersion: "latest",
-				sourceType: "module"
-			}) }
-		});
 		visit(tree, (node, index, parent) => {
 			if (!parent || index === void 0) return;
 			if (node.type === "code") {
@@ -352,6 +477,15 @@ function remarkMarkdownComponents() {
 				return index;
 			}
 		});
+		const source = documentComponents(tree);
+		tree.children.unshift({
+			type: "mdxjsEsm",
+			value: source,
+			data: { estree: parse(source, {
+				ecmaVersion: "latest",
+				sourceType: "module"
+			}) }
+		});
 	};
 }
 // src/astro/index.ts
@@ -503,6 +637,7 @@ function masterSite(site) {
 					recursive: true,
 					force: false
 				});
+				await compactStyleAssets(fileURLToPath(destination));
 			}
 		}
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {

package/src/astro/index.ts

@@ -14,6 +14,7 @@ import sourceURL from './source-url'
 import { prepareContentPages } from './content-pages'
 import serverStyles from './server-styles'
 import svgMarkup from './svg-markup'
+import { compactStyleAssets } from './style-assets'
 import remarkSlugAndTOC from '../docs-shell/remark/slug-and-toc.js'
 import remarkMarkdownComponents from '../docs-shell/remark/markdown-components.js'
 import svgoConfig from '../docs-shell/common/svgo.config.js'
@@ -118,6 +119,7 @@ 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 compactStyleAssets(fileURLToPath(destination))
       }
     }
   }

package/src/astro/routes.template.ts

@@ -18,6 +18,7 @@ interface PageModule {
   metadata?: Partial<Metadata>
   generateMetadata?: (props: Pick<Props, 'params'>) => Promise<Partial<Metadata>> | Partial<Metadata>
   /** `false` for pages that render no document surfaces, code or prose, such as indexes. */
+  /** Article typography only; feature components own their CSS dependencies. */
   documentStyles?: boolean
 }
 

package/src/astro/style-assets.ts

@@ -0,0 +1,107 @@
+import { createHash } from 'node:crypto'
+import { readdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+
+/** Collapse only the compiler's unconditional, same-directory asset links.
+ * This is concatenation of already compiled CSS, not a second CSS compiler.
+ * Keep conditions, layers, URLs, repeated occurrences and unrelated imports intact.
+ */
+export async function inlineGeneratedStyles(file: string, ancestors: string[] = []): Promise<string> {
+  if (ancestors.includes(file)) throw new Error(`Cyclic generated stylesheet: ${file}`)
+  const source = await readFile(file, 'utf8')
+  let code = '', cursor = 0
+  // Generated imports form a leading prologue. Never search declarations or
+  // comments for import-looking text (for example a teaching sample's content).
+  while (cursor < source.length) {
+    const rest = source.slice(cursor)
+    const trivia = /^(?:\s+|\/\*[\s\S]*?\*\/|@layer\s+[\w,\s-]+;)/.exec(rest)
+    if (trivia) { code += trivia[0]; cursor += trivia[0].length; continue }
+    const match = /^@import\s+["'](\.\/master-css-[\w-]+\.css)["']\s*;/.exec(rest)
+    if (!match) break
+    code += await inlineGeneratedStyles(resolve(dirname(file), match[1]), [...ancestors, file]) + '\n'
+    cursor += match[0].length
+  }
+  const expanded = code + source.slice(cursor)
+  // A remaining import would become invalid after an inlined declaration.
+  // Retain this entry intact, including its original import prologue. A match
+  // inside a comment/string merely skips this optional optimization.
+  return /@(?:import|charset|namespace)\b/.test(expanded) ? source : expanded
+}
+
+/** Preserve HTML link order and each reusable entry's cache identity. Originals
+ * remain available to any JS/CSS references; no client loading logic is added. */
+export async function compactStyleAssets(output: string) {
+  const root = resolve(output), replacements = new Map<string, string>()
+  const documents = new Map<string, string>(), users = new Map<string, string[]>()
+  const boundaries = new Set<string>()
+  async function emit(code: string) {
+    const hash = createHash('sha256').update(code).digest('hex').slice(0, 20)
+    const href = `/_astro/site-style-${hash}.css`
+    await writeFile(resolve(root, '.' + href), code)
+    return href
+  }
+  async function walk(directory: string): Promise<void> {
+    for (const entry of await readdir(directory, { withFileTypes: true })) {
+      const file = resolve(directory, entry.name)
+      if (entry.isDirectory()) { await walk(file); continue }
+      if (!entry.name.endsWith('.html')) continue
+      let html = await readFile(file, 'utf8')
+      const links = [...html.matchAll(/<link\b(?=[^>]*\brel="stylesheet")(?=[^>]*\bhref="(\/_astro\/[^"/]+\.css)")[^>]*>/g)]
+      for (const match of links) {
+        const href = match[1]
+        if (!replacements.has(href)) {
+          const input = resolve(root, '.' + href)
+          const source = await readFile(input, 'utf8')
+          const code = await inlineGeneratedStyles(input)
+          const next = source === code ? href : await emit(code)
+          replacements.set(href, next)
+        }
+        const next = replacements.get(href)!
+        if (/\/(site|interface|documents)\./.test(href)) boundaries.add(next)
+        const pages = users.get(next) ?? []
+        if (!pages.includes(file)) pages.push(file)
+        users.set(next, pages)
+        html = html.replace(match[0], match[0].replace(`href="${href}"`, `href="${next}"`))
+      }
+      documents.set(file, html)
+    }
+  }
+  await walk(root)
+  // Co-delivered feature assets share a cache boundary. Merge only adjacent,
+  // plain links with identical route usage; never reorder a rule or pull a
+  // feature onto a route that did not already load it.
+  const signatures = new Map([...users].map(([href, pages]) => [href, pages.sort().join('\n')]))
+  const adjacent = new Map<string, Set<string>>()
+  for (const [file, html] of documents) {
+    for (const match of html.matchAll(/(?=<link rel="stylesheet" href="([^"\s]+)">\s*<link rel="stylesheet" href="([^"\s]+)">)/g)) {
+      const key = `${match[1]}\n${match[2]}`
+      const pages = adjacent.get(key) ?? new Set<string>()
+      pages.add(file); adjacent.set(key, pages)
+    }
+  }
+  for (const [file, source] of documents) {
+    let html = source
+    const runs = [...source.matchAll(/(?:<link rel="stylesheet" href="\/_astro\/[^"/]+\.css">\s*){2,}/g)]
+    for (const run of runs) {
+      const links = [...run[0].matchAll(/<link rel="stylesheet" href="([^"\s]+)">\s*/g)]
+      let replacement = '', group: typeof links = []
+      async function flush() {
+        if (group.length > 1) {
+          const code = (await Promise.all(group.map(link => readFile(resolve(root, '.' + link[1]), 'utf8')))).join('\n')
+          // An unresolved import must stay at the start of its own stylesheet.
+          replacement += code.includes('@import') ? group.map(link => link[0]).join('') : `<link rel="stylesheet" href="${await emit(code)}">`
+        } else replacement += group.map(link => link[0]).join('')
+        group = []
+      }
+      for (const link of links) {
+        if (boundaries.has(link[1])) { await flush(); replacement += link[0]; continue }
+        if (group.length && (signatures.get(group[0][1]) !== signatures.get(link[1])
+          || adjacent.get(`${group.at(-1)![1]}\n${link[1]}`)?.size !== users.get(link[1])?.length)) await flush()
+        group.push(link)
+      }
+      await flush()
+      html = html.replace(run[0], replacement)
+    }
+    await writeFile(file, html)
+  }
+}

package/src/benchmarks/BenchmarkBarRows.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
+import '@master/internal-site/styles/system/metrics.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
@@ -27,7 +28,7 @@ const resolvedMax = max ?? Math.max(0, ...items.map((item) => item.max ?? item.v
       {item.detail && <small>{t(item.detail)}</small>}
     </span>
     <div class="ui-bar" role="meter" aria-labelledby={`${labelId} ${valueId}`} aria-valuemin={0} aria-valuemax={itemMax} aria-valuenow={item.value}>
-      <i data-tone={item.color === 'neutral' ? 'muted' : undefined} style={{ width: `${clampPercent(item.value, itemMax)}%` }} />
+      <i data-tone={item.color === 'neutral' ? 'muted' : undefined} style={{ width: `${clampPercent(item.value, itemMax)}%`, background: item.fill }} />
     </div>
     <output id={valueId}>{valueLabel}</output>
   </div>

package/src/benchmarks/BenchmarkBars.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
 import '@master/internal-site/styles/benchmarks.css'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
 import type { BenchmarkBarsProps } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkChart.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/table.css'
 import ExpandContent from '@master/internal-site/components/ExpandContent.svelte'
 import BenchmarkBars from '@master/internal-site/benchmarks/BenchmarkBars.astro'
 import BenchmarkMetricTable from '@master/internal-site/benchmarks/BenchmarkMetricTable.astro'

package/src/benchmarks/BenchmarkChartGroup.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
 import type { BenchmarkBarItem } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkDataTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/disclosure.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkScrollRegion from '@master/internal-site/benchmarks/BenchmarkScrollRegion.svelte'

package/src/benchmarks/BenchmarkFigure.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/tray.css'
+import '@master/internal-site/styles/system/tray-code.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 

package/src/benchmarks/BenchmarkMetricTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
 import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkMetrics.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
 import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkSampleSummary.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import type { BenchmarkSampleSummaryStats } from '@master/internal-site/benchmarks/types.ts'
 import { formatMetricValue } from '@master/internal-site/benchmarks/utils.ts'

package/src/benchmarks/BenchmarkScrollRegion.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/data.css'
+  import '@master/internal-site/styles/system/table.css'
+
   import type { Snippet } from 'svelte'
 
   let { title, children }: { title: string; children?: Snippet } = $props()

package/src/benchmarks/BenchmarkSource.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/source.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 
 interface Props {

package/src/benchmarks/BenchmarkStackedBars.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
+import '@master/internal-site/styles/system/metrics.css'
 import '@master/internal-site/styles/system/specimens.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'

package/src/benchmarks/types.ts

@@ -20,6 +20,8 @@ export interface BenchmarkBarItem {
   detail?: string
   icon?: BenchmarkIcon
   color?: BenchmarkColor
+  /** Explicit series identity, such as a brand's CSS color. Overrides the neutral fill. */
+  fill?: string
 }
 
 export interface BenchmarkSegment {

package/src/blog/article/BlogArticleContents.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/docs-shell/page-content.css'
+  import '@master/internal-site/styles/system/toc.css'
   import PageContentList from '@master/internal-site/components/PageContentList.svelte'
   import PageContentProvider from '@master/internal-site/components/PageContentProvider.svelte'
   import type { PageContentItem } from '@master/internal-site/components/page-content.svelte'

package/src/blog/article/BlogArticleMasthead.astro

@@ -6,9 +6,10 @@ import Link from '@master/internal-site/components/Link.svelte'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import TitleLines from './title-lines.astro'
 import { sourceLanguageOf } from './language'
+import type { DefinedMetadata } from '@master/internal-site/types/Metadata'
 
 interface Props {
-  metadata: any
+  metadata: DefinedMetadata
 }
 
 /**
@@ -58,4 +59,14 @@ const people = (metadata.authors ?? [])
       </ul>
     </div>
   )}
+  {metadata.cover && (
+    <img
+      class="blog-article-cover"
+      src={metadata.cover.src}
+      alt={metadata.cover.alt}
+      width={metadata.cover.width}
+      height={metadata.cover.height}
+      fetchpriority="high"
+    />
+  )}
 </header>

package/src/css/NamespaceUtilityTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'

package/src/css/ThemeNumberVariableTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'

package/src/css/markdown.ts

@@ -148,7 +148,8 @@ export async function extractReferenceMdx(file: string, rows: SyntaxRow[] = [],
         const result = await attribute(attrs.result)
         const diagnostic = await attribute(attrs.diagnostic)
         if (typeof source !== 'string' || typeof attrs.language !== 'string') throw new Error('DocumentCodeExample requires literal source and language')
-        const parts = [`**${attrs.title}**`, `\`\`\`${attrs.language}\n${source}\n\`\`\``]
+        const sourceLabel = attrs.sourceLabel ?? (result !== undefined && attrs.resultKind !== 'generated-css' ? 'Source' : undefined)
+        const parts = [`**${attrs.title}**`, ...(sourceLabel ? [`**${sourceLabel}**`] : []), `\`\`\`${attrs.language}\n${source}\n\`\`\``]
         if (result !== undefined) {
           if (typeof result !== 'string') throw new Error('DocumentCodeExample requires a literal result')
           parts.push(`**${attrs.resultLabel ?? (attrs.resultKind === 'generated-css' ? 'Generated CSS' : 'Result')}**`, `\`\`\`${attrs.resultLanguage ?? attrs.language}\n${result}\n\`\`\``)
@@ -169,17 +170,25 @@ export async function extractReferenceMdx(file: string, rows: SyntaxRow[] = [],
       if (name === 'DocumentDeclaration') return `**${attrs.label}**\n\n\`\`\`typescript\n${await expression(inner)}\n\`\`\``
       if (name === 'DocumentValueList') {
         const values = await expression(attrs.rows.value) as { id: string, title: string, identifier?: string, values: { label: string, value: string }[] }[]
-        return values.map(value => `### ${value.title} {#${value.id}}\n\n${value.identifier ? `\`${value.identifier}\`\n\n` : ''}${value.values.map(pair => `${pair.label}: \`${pair.value}\``).join('\n\n')}`).join('\n\n')
+        const headingLevel = await attribute(attrs.headingLevel) ?? 3
+        if (headingLevel !== 3 && headingLevel !== 4) throw new Error('DocumentValueList requires headingLevel 3 or 4')
+        return values.map(value => `${'#'.repeat(headingLevel)} ${value.title} {#${value.id}}\n\n${value.identifier ? `\`${value.identifier}\`\n\n` : ''}${value.values.map(pair => `${pair.label}: \`${pair.value}\``).join('\n\n')}`).join('\n\n')
+      }
+      if (name === 'DocumentCodeTable') {
+        const rows = await expression(attrs.rows.value) as { syntax: string, css: string }[]
+        if (!Array.isArray(rows) || rows.some(row => typeof row.syntax !== 'string' || typeof row.css !== 'string')) throw new Error('DocumentCodeTable requires literal syntax and CSS rows')
+        const code = (value: string) => `\`${value.replaceAll('|', '\\|')}\``
+        return `| ${attrs.label ?? 'Syntax'} | CSS |\n| --- | --- |\n${rows.map(row => `| ${code(row.syntax)} | ${code(row.css)} |`).join('\n')}`
       }
       if (name === 'DocumentFlow') {
         const steps = await expression(attrs.steps.value) as { title: string, description: string }[]
         return `**${attrs.title}**\n\n${steps.map((step, index) => `${index + 1}. **${step.title}** — ${step.description}`).join('\n')}${attrs.caption ? `\n\n${attrs.caption}` : ''}`
       }
-      if (name === 'DocumentFileTree') {
+      if (name === 'DocumentFileTree' || name === 'ExplorerView') {
         type Entry = { name: string, description?: string, children?: Entry[] }
-        const entries = await expression(attrs.entries.value) as Entry[]
+        const entries = await expression(attrs[name === 'ExplorerView' ? 'items' : 'entries'].value) as Entry[]
         const lines = (items: Entry[], level = 0): string => items.map(item => `${'  '.repeat(level)}- \`${item.name}${item.children ? '/' : ''}\`${item.description ? ` — ${item.description}` : ''}${item.children?.length ? `\n${lines(item.children, level + 1)}` : ''}`).join('\n')
-        return `**${attrs.title}**\n\n${lines(entries)}${attrs.caption ? `\n\n${attrs.caption}` : ''}`
+        return `${attrs.title ? `**${attrs.title}**\n\n` : ''}${lines(entries)}${attrs.caption ? `\n\n${attrs.caption}` : ''}`
       }
       if (name === 'Overview' && options.overview !== 'include') return syntaxMarkdown(rows)
       if (name === 'StylesheetExample') {

package/src/demo/Demo.svelte

@@ -30,6 +30,10 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/stage.css'
+  import '@master/internal-site/styles/system/tray.css'
+  import '@master/internal-site/styles/system/tray-code.css'
+
   import '@master/internal-site/styles/demo.css'
   import { styleText } from './style'
 

package/src/demo/DemoAsset.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/interface.css'
 import '@master/internal-site/styles/system/specimens.css'
 import IconDownload from '@tabler/icons-svelte-runes/icons/download'
 import Demo from './Demo.svelte'

package/src/demo/DemoCatalog.astro

@@ -1,4 +1,5 @@
 ---
+import '@master/internal-site/styles/system/disclosure.css'
 import '@master/internal-site/styles/demo.css'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 import DemoIndex from '@master/internal-site/demo/DemoIndex.astro'

package/src/demo/DemoComparison.svelte

@@ -10,6 +10,9 @@
 </script>
 
 <script lang="ts">
+  import '@master/internal-site/styles/system/compare.css'
+  import '@master/internal-site/styles/system/stage.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import type { HTMLAttributes } from 'svelte/elements'
   import { styleText, type DemoStyle } from '@master/internal-site/demo/style.ts'

package/src/demo/DemoContainer.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/range.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'

package/src/demo/DemoControls.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/segmented.css'
+
   import '@master/internal-site/styles/system/specimens.css'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'

package/src/demo/DemoCopyButton.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import '@master/internal-site/styles/interface.css'
+  import '@master/internal-site/styles/system/copy.css'
+
   import type { Snippet } from 'svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import IconCopy from '@tabler/icons-svelte-runes/icons/copy'

package/src/demo/DemoCopyGroup.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@master/internal-site/styles/system/copy.css'
+
   import type { Snippet } from 'svelte'
   import { setCopyFeedback, type CopyResult } from '@master/internal-site/demo/copy-feedback.ts'