@homepages/template-kit 0.2.0 → 0.4.0

package/dist/contracts/fill-treatments.js

@@ -0,0 +1,47 @@
+//#region src/contracts/fill-treatments.ts
+const GENERATED_KINDS = ["text", "list<text>"];
+const COMPUTED_FNS = ["haversine_miles", "mint_id"];
+const CATALOG_FIELDS = [
+	"key",
+	"label",
+	"icon",
+	"slot"
+];
+function parseTreatment(raw) {
+	if (raw === "source") return {
+		kind: "source",
+		path: null
+	};
+	if (raw.startsWith("source:")) {
+		const path = raw.slice(7);
+		return path ? {
+			kind: "source",
+			path
+		} : null;
+	}
+	if (raw.startsWith("computed:")) {
+		const fn = raw.slice(9);
+		return COMPUTED_FNS.includes(fn) ? {
+			kind: "computed",
+			fn
+		} : null;
+	}
+	if (raw.startsWith("catalog:")) {
+		const field = raw.slice(8);
+		return CATALOG_FIELDS.includes(field) ? {
+			kind: "catalog",
+			field
+		} : null;
+	}
+	if (raw.startsWith("generated:")) {
+		const outKind = raw.slice(10);
+		return GENERATED_KINDS.includes(outKind) ? {
+			kind: "generated",
+			outKind
+		} : null;
+	}
+	return null;
+}
+
+//#endregion
+export { CATALOG_FIELDS, COMPUTED_FNS, GENERATED_KINDS, parseTreatment };

package/dist/design-system/theme.d.ts

@@ -1,308 +1,38 @@
 import { z } from "zod";
 //#region src/design-system/theme.d.ts
-declare const COLOR_ROLE_VARS: {
-  readonly ink: "--tr-color-ink";
-  readonly inkSoft: "--tr-color-ink-soft";
-  readonly inkMute: "--tr-color-ink-mute";
-  readonly background: "--tr-color-background";
-  readonly surface: "--tr-color-surface";
-  readonly surfaceAlt: "--tr-color-surface-alt";
-  readonly border: "--tr-color-border";
-  readonly borderStrong: "--tr-color-border-strong";
-  readonly primary: "--tr-color-primary";
-  readonly primaryFg: "--tr-color-primary-fg";
-  readonly primaryStrong: "--tr-color-primary-darker";
-  readonly accent: "--tr-color-accent";
-  readonly accentFg: "--tr-color-accent-contrast";
-  readonly accentStrong: "--tr-color-accent-strong";
-  readonly overlay: "--tr-color-overlay";
-  readonly overlayStrong: "--tr-color-overlay-strong";
-  readonly overlayLight: "--tr-color-overlay-light";
-  readonly darkBg: "--tr-color-footer-bg";
-  readonly darkFg: "--tr-color-footer-fg";
-  readonly darkFgMute: "--tr-color-footer-fg-mute";
-  readonly darkBorder: "--tr-color-footer-divider";
-};
-type ColorRole = keyof typeof COLOR_ROLE_VARS;
-declare const FONT_ROLE_VARS: {
-  readonly body: "--tr-font-sans";
-  readonly heading: "--tr-font-serif";
-  readonly numeric: "--tr-font-num";
-  readonly label: "--tr-font-label";
-};
-declare const TYPE_STEP_VARS: {
-  readonly xs: "--tr-text-xs";
-  readonly sm: "--tr-text-sm";
-  readonly base: "--tr-text-base";
-  readonly lg: "--tr-text-lg";
-  readonly xl: "--tr-text-xl";
-  readonly "2xl": "--tr-text-2xl";
-  readonly "3xl": "--tr-text-3xl";
-  readonly "4xl": "--tr-text-4xl";
-  readonly "5xl": "--tr-text-5xl";
-  readonly display: "--tr-text-display";
-};
-declare const RADIUS_VARS: {
-  readonly sm: "--tr-radius-sm";
-  readonly md: "--tr-radius-md";
-  readonly lg: "--tr-radius-lg";
-  readonly full: "--tr-radius-full";
-};
-declare const SHADOW_VARS: {
-  readonly sm: "--tr-shadow-sm";
-  readonly md: "--tr-shadow-md";
-  readonly lg: "--tr-shadow-lg";
-};
-declare const LAYOUT_VARS: {
-  readonly containerMax: "--tr-container-max";
-  readonly containerPad: "--tr-container-pad";
-  readonly headerHeight: "--tr-header-height";
-};
+declare const TokenNameSchema: z.ZodString;
 declare const TokenThemeSchema: z.ZodObject<{
-  colors: z.ZodObject<Record<"ink" | "inkSoft" | "inkMute" | "background" | "surface" | "surfaceAlt" | "border" | "borderStrong" | "primary" | "primaryFg" | "primaryStrong" | "accent" | "accentFg" | "accentStrong" | "overlay" | "overlayStrong" | "overlayLight" | "darkBg" | "darkFg" | "darkFgMute" | "darkBorder", z.ZodString>, "strip", z.ZodTypeAny, {
-    ink: string;
-    inkSoft: string;
-    inkMute: string;
-    background: string;
-    surface: string;
-    surfaceAlt: string;
-    border: string;
-    borderStrong: string;
-    primary: string;
-    primaryFg: string;
-    primaryStrong: string;
-    accent: string;
-    accentFg: string;
-    accentStrong: string;
-    overlay: string;
-    overlayStrong: string;
-    overlayLight: string;
-    darkBg: string;
-    darkFg: string;
-    darkFgMute: string;
-    darkBorder: string;
-  }, {
-    ink: string;
-    inkSoft: string;
-    inkMute: string;
-    background: string;
-    surface: string;
-    surfaceAlt: string;
-    border: string;
-    borderStrong: string;
-    primary: string;
-    primaryFg: string;
-    primaryStrong: string;
-    accent: string;
-    accentFg: string;
-    accentStrong: string;
-    overlay: string;
-    overlayStrong: string;
-    overlayLight: string;
-    darkBg: string;
-    darkFg: string;
-    darkFgMute: string;
-    darkBorder: string;
-  }>;
-  /** Optional open brand palette → `--tr-color-<name>` (the escape hatch). */
-  palette: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
-  fonts: z.ZodObject<Record<"body" | "heading" | "numeric" | "label", z.ZodString> & {
-    /** Font-loading block (@import / @font-face) emitted before :root. */
-    fontFaces: z.ZodOptional<z.ZodString>;
-  }, "strip", z.ZodTypeAny, {
-    body: string;
-    heading: string;
-    numeric: string;
-    label: string;
-    fontFaces?: string | undefined;
-  }, {
-    body: string;
-    heading: string;
-    numeric: string;
-    label: string;
-    fontFaces?: string | undefined;
-  }>;
-  type: z.ZodObject<Record<"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "display", z.ZodString>, "strip", z.ZodTypeAny, {
-    xs: string;
-    sm: string;
-    base: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-    "5xl": string;
-    display: string;
-  }, {
-    xs: string;
-    sm: string;
-    base: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-    "5xl": string;
-    display: string;
-  }>;
-  radii: z.ZodObject<Record<"sm" | "lg" | "md" | "full", z.ZodString>, "strip", z.ZodTypeAny, {
-    sm: string;
-    lg: string;
-    md: string;
-    full: string;
-  }, {
-    sm: string;
-    lg: string;
-    md: string;
-    full: string;
-  }>;
-  shadows: z.ZodObject<Record<"sm" | "lg" | "md", z.ZodString>, "strip", z.ZodTypeAny, {
-    sm: string;
-    lg: string;
-    md: string;
-  }, {
-    sm: string;
-    lg: string;
-    md: string;
-  }>;
-  layout: z.ZodObject<Record<"containerMax" | "containerPad" | "headerHeight", z.ZodString>, "strip", z.ZodTypeAny, {
-    containerMax: string;
-    containerPad: string;
-    headerHeight: string;
-  }, {
-    containerMax: string;
-    containerPad: string;
-    headerHeight: string;
-  }>;
-}, "strict", z.ZodTypeAny, {
-  type: {
-    xs: string;
-    sm: string;
-    base: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-    "5xl": string;
-    display: string;
-  };
-  colors: {
-    ink: string;
-    inkSoft: string;
-    inkMute: string;
-    background: string;
-    surface: string;
-    surfaceAlt: string;
-    border: string;
-    borderStrong: string;
-    primary: string;
-    primaryFg: string;
-    primaryStrong: string;
-    accent: string;
-    accentFg: string;
-    accentStrong: string;
-    overlay: string;
-    overlayStrong: string;
-    overlayLight: string;
-    darkBg: string;
-    darkFg: string;
-    darkFgMute: string;
-    darkBorder: string;
-  };
-  fonts: {
-    body: string;
-    heading: string;
-    numeric: string;
-    label: string;
-    fontFaces?: string | undefined;
-  };
-  radii: {
-    sm: string;
-    lg: string;
-    md: string;
-    full: string;
-  };
-  shadows: {
-    sm: string;
-    lg: string;
-    md: string;
-  };
-  layout: {
-    containerMax: string;
-    containerPad: string;
-    headerHeight: string;
-  };
-  palette?: Record<string, string> | undefined;
-}, {
-  type: {
-    xs: string;
-    sm: string;
-    base: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-    "5xl": string;
-    display: string;
-  };
-  colors: {
-    ink: string;
-    inkSoft: string;
-    inkMute: string;
-    background: string;
-    surface: string;
-    surfaceAlt: string;
-    border: string;
-    borderStrong: string;
-    primary: string;
-    primaryFg: string;
-    primaryStrong: string;
-    accent: string;
-    accentFg: string;
-    accentStrong: string;
-    overlay: string;
-    overlayStrong: string;
-    overlayLight: string;
-    darkBg: string;
-    darkFg: string;
-    darkFgMute: string;
-    darkBorder: string;
-  };
-  fonts: {
-    body: string;
-    heading: string;
-    numeric: string;
-    label: string;
-    fontFaces?: string | undefined;
-  };
-  radii: {
-    sm: string;
-    lg: string;
-    md: string;
-    full: string;
-  };
-  shadows: {
-    sm: string;
-    lg: string;
-    md: string;
-  };
-  layout: {
-    containerMax: string;
-    containerPad: string;
-    headerHeight: string;
-  };
-  palette?: Record<string, string> | undefined;
-}>;
+  colors: z.ZodRecord<z.ZodString, z.ZodString>;
+  fonts: z.ZodRecord<z.ZodString, z.ZodString>;
+  type: z.ZodRecord<z.ZodString, z.ZodString>;
+  radii: z.ZodRecord<z.ZodString, z.ZodString>;
+  shadows: z.ZodRecord<z.ZodString, z.ZodString>;
+  layout: z.ZodRecord<z.ZodString, z.ZodString>;
+  fontFaces: z.ZodOptional<z.ZodString>;
+  document: z.ZodObject<{
+    font: z.ZodString;
+    color: z.ZodString;
+    background: z.ZodString;
+    fontSize: z.ZodString;
+  }, z.core.$strict>;
+}, z.core.$strict>;
 type TokenTheme = z.infer<typeof TokenThemeSchema>;
 /**
- * Compile a `TokenTheme` into the CSS a template's bundle ships: an optional
- * font-loading block, a `:root { --tr-*: … }` declaration that defines the
- * design tokens, and a `body` block that applies those tokens to the document.
- * Deterministic (stable key order; palette keys sorted) so the same theme
- * always content-hashes identically.
+ * Compile a `TokenTheme` into the CSS a template's bundle ships:
+ *
+ *   1. the optional font-loading block;
+ *   2. `@theme inline { --color-<name>: var(--tr-color-<name>); … }` — the Tailwind
+ *      alias layer, which is what brings the token utilities into existence;
+ *   3. `:root { --tr-color-<name>: <value>; … }` — the values behind those aliases;
+ *   4. `body { … }` — the document defaults, as `var()` indirections so that a runtime
+ *      `:root` override still cascades to the page.
+ *
+ * The output MUST be compiled INSIDE the Tailwind build graph: `@theme` is a Tailwind
+ * directive, and anywhere else it is inert — silently, yielding a stylesheet with no
+ * token utilities and no error to explain why.
+ *
+ * Deterministic: keys are sorted, so the same theme always content-hashes identically.
  */
 declare function compileThemeToCss(theme: TokenTheme): string;
 //#endregion
-export { COLOR_ROLE_VARS, ColorRole, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, SHADOW_VARS, TYPE_STEP_VARS, TokenTheme, TokenThemeSchema, compileThemeToCss };
+export { TokenNameSchema, TokenTheme, TokenThemeSchema, compileThemeToCss };

package/dist/design-system/theme.js

@@ -1,102 +1,124 @@
 import { z } from "zod";
 
 //#region src/design-system/theme.ts
-const COLOR_ROLE_VARS = {
-	ink: "--tr-color-ink",
-	inkSoft: "--tr-color-ink-soft",
-	inkMute: "--tr-color-ink-mute",
-	background: "--tr-color-background",
-	surface: "--tr-color-surface",
-	surfaceAlt: "--tr-color-surface-alt",
-	border: "--tr-color-border",
-	borderStrong: "--tr-color-border-strong",
-	primary: "--tr-color-primary",
-	primaryFg: "--tr-color-primary-fg",
-	primaryStrong: "--tr-color-primary-darker",
-	accent: "--tr-color-accent",
-	accentFg: "--tr-color-accent-contrast",
-	accentStrong: "--tr-color-accent-strong",
-	overlay: "--tr-color-overlay",
-	overlayStrong: "--tr-color-overlay-strong",
-	overlayLight: "--tr-color-overlay-light",
-	darkBg: "--tr-color-footer-bg",
-	darkFg: "--tr-color-footer-fg",
-	darkFgMute: "--tr-color-footer-fg-mute",
-	darkBorder: "--tr-color-footer-divider"
+const TokenNameSchema = z.string().regex(/^[a-z0-9]+(-[a-z0-9]+)*$/, "token names are kebab-case: [a-z0-9] groups separated by single hyphens");
+const tokens = z.record(TokenNameSchema, z.string().min(1));
+const NAMESPACES = {
+	colors: {
+		tw: "--color-",
+		tr: "--tr-color-"
+	},
+	fonts: {
+		tw: "--font-",
+		tr: "--tr-font-"
+	},
+	type: {
+		tw: "--text-",
+		tr: "--tr-text-"
+	},
+	radii: {
+		tw: "--radius-",
+		tr: "--tr-radius-"
+	},
+	shadows: {
+		tw: "--shadow-",
+		tr: "--tr-shadow-"
+	}
 };
-const FONT_ROLE_VARS = {
-	body: "--tr-font-sans",
-	heading: "--tr-font-serif",
-	numeric: "--tr-font-num",
-	label: "--tr-font-label"
-};
-const TYPE_STEP_VARS = {
-	xs: "--tr-text-xs",
-	sm: "--tr-text-sm",
-	base: "--tr-text-base",
-	lg: "--tr-text-lg",
-	xl: "--tr-text-xl",
-	"2xl": "--tr-text-2xl",
-	"3xl": "--tr-text-3xl",
-	"4xl": "--tr-text-4xl",
-	"5xl": "--tr-text-5xl",
-	display: "--tr-text-display"
-};
-const RADIUS_VARS = {
-	sm: "--tr-radius-sm",
-	md: "--tr-radius-md",
-	lg: "--tr-radius-lg",
-	full: "--tr-radius-full"
-};
-const SHADOW_VARS = {
-	sm: "--tr-shadow-sm",
-	md: "--tr-shadow-md",
-	lg: "--tr-shadow-lg"
-};
-const LAYOUT_VARS = {
-	containerMax: "--tr-container-max",
-	containerPad: "--tr-container-pad",
-	headerHeight: "--tr-header-height"
-};
-const colorRoles = Object.fromEntries(Object.keys(COLOR_ROLE_VARS).map((k) => [k, z.string().min(1)]));
-const scale = (keys) => z.object(Object.fromEntries(keys.map((k) => [k, z.string().min(1)])));
-const TokenThemeSchema = z.object({
-	colors: z.object(colorRoles),
-	/** Optional open brand palette → `--tr-color-<name>` (the escape hatch). */
-	palette: z.record(z.string().min(1)).optional(),
-	fonts: scale(Object.keys(FONT_ROLE_VARS)).extend({ 
-	/** Font-loading block (@import / @font-face) emitted before :root. */
-fontFaces: z.string().optional() }),
-	type: scale(Object.keys(TYPE_STEP_VARS)),
-	radii: scale(Object.keys(RADIUS_VARS)),
-	shadows: scale(Object.keys(SHADOW_VARS)),
-	layout: scale(Object.keys(LAYOUT_VARS))
+const NAMESPACED_GROUPS = Object.keys(NAMESPACES);
+const DocumentDefaultsSchema = z.object({
+	font: TokenNameSchema,
+	color: TokenNameSchema,
+	background: TokenNameSchema,
+	fontSize: TokenNameSchema
 }).strict();
-const BODY_DEFAULTS = `body {
-  font-family: var(--tr-font-sans);
-  color: var(--tr-color-ink);
-  background: var(--tr-color-background);
-  font-size: var(--tr-text-base);
-}`;
+const TokenThemeSchema = z.object({
+	colors: tokens,
+	fonts: tokens,
+	type: tokens,
+	radii: tokens,
+	shadows: tokens,
+	/** Layout values → `--tr-<name>`. No Tailwind alias: not a utility namespace. */
+	layout: tokens,
+	/** Font-loading block (@import / @font-face), emitted before every other block. */
+	fontFaces: z.string().optional(),
+	document: DocumentDefaultsSchema
+}).strict().superRefine((theme, ctx) => {
+	for (const name of Object.keys(theme.colors)) if (Object.hasOwn(theme.type, name)) ctx.addIssue({
+		code: z.ZodIssueCode.custom,
+		path: ["type", name],
+		message: `"${name}" is declared in both \`colors\` and \`type\`, and both compile to \`text-${name}\` — rename one.`
+	});
+}).superRefine((theme, ctx) => {
+	const refs = [
+		[
+			"font",
+			"fonts",
+			theme.document.font
+		],
+		[
+			"color",
+			"colors",
+			theme.document.color
+		],
+		[
+			"background",
+			"colors",
+			theme.document.background
+		],
+		[
+			"fontSize",
+			"type",
+			theme.document.fontSize
+		]
+	];
+	for (const [field, group, name] of refs) if (!Object.hasOwn(theme[group], name)) ctx.addIssue({
+		code: z.ZodIssueCode.custom,
+		path: ["document", field],
+		message: `document.${field}: "${name}" is not a declared \`${group}\` token`
+	});
+});
 /**
-* Compile a `TokenTheme` into the CSS a template's bundle ships: an optional
-* font-loading block, a `:root { --tr-*: … }` declaration that defines the
-* design tokens, and a `body` block that applies those tokens to the document.
-* Deterministic (stable key order; palette keys sorted) so the same theme
-* always content-hashes identically.
+* Compile a `TokenTheme` into the CSS a template's bundle ships:
+*
+*   1. the optional font-loading block;
+*   2. `@theme inline { --color-<name>: var(--tr-color-<name>); … }` — the Tailwind
+*      alias layer, which is what brings the token utilities into existence;
+*   3. `:root { --tr-color-<name>: <value>; … }` — the values behind those aliases;
+*   4. `body { … }` — the document defaults, as `var()` indirections so that a runtime
+*      `:root` override still cascades to the page.
+*
+* The output MUST be compiled INSIDE the Tailwind build graph: `@theme` is a Tailwind
+* directive, and anywhere else it is inert — silently, yielding a stylesheet with no
+* token utilities and no error to explain why.
+*
+* Deterministic: keys are sorted, so the same theme always content-hashes identically.
 */
 function compileThemeToCss(theme) {
+	const aliases = [];
 	const decls = [];
-	for (const role of Object.keys(COLOR_ROLE_VARS)) decls.push(`  ${COLOR_ROLE_VARS[role]}: ${theme.colors[role]};`);
-	if (theme.palette) for (const name of Object.keys(theme.palette).sort()) decls.push(`  --tr-color-${name}: ${theme.palette[name]};`);
-	for (const k of Object.keys(FONT_ROLE_VARS)) decls.push(`  ${FONT_ROLE_VARS[k]}: ${theme.fonts[k]};`);
-	for (const k of Object.keys(TYPE_STEP_VARS)) decls.push(`  ${TYPE_STEP_VARS[k]}: ${theme.type[k]};`);
-	for (const k of Object.keys(RADIUS_VARS)) decls.push(`  ${RADIUS_VARS[k]}: ${theme.radii[k]};`);
-	for (const k of Object.keys(SHADOW_VARS)) decls.push(`  ${SHADOW_VARS[k]}: ${theme.shadows[k]};`);
-	for (const k of Object.keys(LAYOUT_VARS)) decls.push(`  ${LAYOUT_VARS[k]}: ${theme.layout[k]};`);
-	const blocks = `${`:root {\n${decls.join("\n")}\n}`}\n\n${BODY_DEFAULTS}`;
-	return theme.fonts.fontFaces ? `${theme.fonts.fontFaces}\n\n${blocks}\n` : `${blocks}\n`;
+	for (const group of NAMESPACED_GROUPS) {
+		const { tw, tr } = NAMESPACES[group];
+		for (const name of Object.keys(theme[group]).sort()) {
+			aliases.push(`  ${tw}${name}: var(${tr}${name});`);
+			decls.push(`  ${tr}${name}: ${theme[group][name]};`);
+		}
+	}
+	for (const name of Object.keys(theme.layout).sort()) decls.push(`  --tr-${name}: ${theme.layout[name]};`);
+	const { font, color, background, fontSize } = theme.document;
+	const body = `body {
+  font-family: var(--tr-font-${font});
+  color: var(--tr-color-${color});
+  background: var(--tr-color-${background});
+  font-size: var(--tr-text-${fontSize});
+}`;
+	const blocks = [
+		`@theme inline {\n${aliases.join("\n")}\n}`,
+		`:root {\n${decls.join("\n")}\n}`,
+		body
+	].join("\n\n");
+	return theme.fontFaces ? `${theme.fontFaces}\n\n${blocks}\n` : `${blocks}\n`;
 }
 
 //#endregion
-export { COLOR_ROLE_VARS, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, SHADOW_VARS, TYPE_STEP_VARS, TokenThemeSchema, compileThemeToCss };
+export { TokenNameSchema, TokenThemeSchema, compileThemeToCss };

package/dist/dev-client/assets/index-DfEfrp6P.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:#0f1115;color:#e6e7eb;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button,select,input,textarea{font:inherit;color:inherit;background:#1a1d24;border:1px solid #2c313a;border-radius:4px;padding:6px 10px}button{cursor:pointer}button:hover{background:#232831}button:disabled{opacity:.4;cursor:default}.empty{padding:40px;color:#9ca0a8;text-align:center}.boot-error{padding:24px;color:#ff8b8b;font:13px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap}.canvas-mirror{display:flex;flex-direction:column;height:100%;min-height:0}.canvas-toolbar{display:flex;gap:8px;padding:6px 10px;border-bottom:1px solid #e2e5ea;background:#fafbfc}.canvas-toolbar button{font:12px system-ui,sans-serif;padding:3px 8px;border:1px solid #cbd2dc;border-radius:5px;background:#fff;cursor:pointer}.canvas-iframe{flex:1 1 auto;width:100%;border:0;background:#fff;min-height:0}.home{max-width:880px;margin:0 auto;padding:40px 24px}.home-header{margin-bottom:28px}.home-title{font-size:15px;font-weight:600}.home-tagline{font-size:13px;color:#9ca0a8;margin-top:4px}.home-template{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#9ca0a8;margin-bottom:24px}.home-template select{min-width:160px}.home-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tool-card{display:flex;flex-direction:column;gap:12px;background:#14171c;border:1px solid #21252d;border-radius:8px;padding:20px}.tool-card h2{font-size:14px;font-weight:600;margin:0}.tool-card p{font-size:13px;color:#9ca0a8;margin:0;line-height:1.5}.tool-card .controls{display:flex;flex-direction:column;gap:8px}.tool-card label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#9ca0a8}.tool-card label select{min-width:140px}.open-btn{margin-top:auto;text-align:center;padding:8px 12px;border:1px solid #2c313a;border-radius:6px;background:#1a1d24;color:inherit;cursor:pointer}.open-btn:hover{background:#232831}.open-btn:disabled{opacity:.4;cursor:default}.home-hint{font-size:12px;color:#6b7280}.home-link{font-weight:600;color:#1a1d24}.canvas-toolbar .spacer{flex:1}.canvas-mirror__stage{display:flex;min-height:0;flex:1}.canvas-mirror__stage .canvas-iframe{flex:1}.instance-panel{width:340px;flex:none;overflow-y:auto;border-left:1px solid #e5e7eb;padding:12px;background:#fff;font:13px system-ui,sans-serif;display:flex;flex-direction:column;gap:10px}.instance-panel__head{display:flex;flex-direction:column;gap:8px}.instance-panel__slot{display:flex;align-items:center;gap:8px}.instance-panel__type{color:#6b7280}.instance-panel__fill{margin-left:auto;padding:1px 7px;border-radius:999px;font-size:11px}.instance-panel__fill--filled{background:#dcfce7;color:#166534}.instance-panel__fill--empty{background:#f3f4f6;color:#6b7280}.instance-panel__fill--missing{background:#fee2e2;color:#991b1b}.instance-panel__fixture{display:flex;flex-direction:column;gap:3px;color:#6b7280}.instance-panel__json{width:100%;min-height:180px;font:12px ui-monospace,monospace;resize:vertical}.instance-panel__error{color:#b91c1c;white-space:pre-wrap}.instance-panel__actions{display:flex;gap:8px}.instance-panel__note{color:#9ca3af;font-size:11px}