@homepages/template-kit 0.8.1-dev-20260718224903 → 0.9.0-dev-20260719224319

package/dist/cli/check/stages/render.js

@@ -1,5 +1,6 @@
 import { FixtureModuleShape, buildInvariantFixtures } from "../../../schema/fixture-schema.js";
 import { loadSection } from "../loader.js";
+import { resolveFixtureSetMedia } from "../../../media/resolve-fixture-media.js";
 import { flattenLayout } from "../../../schema/rows.js";
 import { renderSectionHtml } from "../../../ssr.js";
 import { checkRenderInvariants } from "../render-invariants.js";
@@ -50,11 +51,11 @@ async function renderStage(workspaceRoot, template) {
 		let fixtures;
 		try {
 			loaded = await loadSection(workspaceRoot, section);
-			fixtures = buildInvariantFixtures({
+			fixtures = resolveFixtureSetMedia(buildInvariantFixtures({
 				schema: loaded.schema,
 				module: FixtureModuleShape.parse(loaded.fixtures),
 				selfAnchor: section.name
-			});
+			}));
 		} catch {
 			continue;
 		}

package/dist/cli/check/stages/size.js

@@ -2,9 +2,9 @@ import { loadEsbuild } from "../resolve-tool.js";
 import { ASSET_LOADERS, ASSET_NAMES, ASSET_PUBLIC_PATH, compileSectionPackageCss, sectionCssFiles } from "../css.js";
 import { CHECK_CONFIG } from "../config.js";
 import { findSectionIslands } from "../../../islands/discover.js";
-import { existsSync } from "node:fs";
-import { basename, join, relative } from "node:path";
 import { readFile } from "node:fs/promises";
+import { basename, join, relative } from "node:path";
+import { existsSync } from "node:fs";
 import { gzipSync } from "node:zlib";
 
 //#region src/cli/check/stages/size.ts

package/dist/cli/check/stages/tree.js

@@ -2,8 +2,8 @@ import { ASSET_LOADERS, findImportLine, sectionCssFiles } from "../css.js";
 import { CONTRACT_FILES, loadSection } from "../loader.js";
 import { flattenLayout } from "../../../schema/rows.js";
 import { referencedSectionAssets } from "../section-assets.js";
-import { extname, join, relative } from "node:path";
 import { readFile, readdir } from "node:fs/promises";
+import { extname, join, relative } from "node:path";
 
 //#region src/cli/check/stages/tree.ts
 const ASSET_EXTENSIONS = new Set(Object.keys(ASSET_LOADERS));

package/dist/cli/check/stages/validate/index.js

@@ -1,8 +1,8 @@
 import { MissingContractFile, MissingSectionExport, loadSection } from "../../loader.js";
 import { relativizePaths } from "../../relativize.js";
 import { validateFixtureModule, validateOneSection, validateTemplateManifest } from "./orchestrator.js";
-import { existsSync } from "node:fs";
 import { join } from "node:path";
+import { existsSync } from "node:fs";
 
 //#region src/cli/check/stages/validate/index.ts
 async function validateStage(workspaceRoot, template) {

package/dist/cli/check/stages/validate/nav-contract.js

@@ -1,12 +1,13 @@
 import { FixtureModuleShape, buildFixtureSet } from "../../../../schema/fixture-schema.js";
 import { TemplateManifest } from "../../../../schema/manifest.js";
 import { loadSection } from "../../loader.js";
+import { resolveFixtureSetMedia } from "../../../../media/resolve-fixture-media.js";
 import { renderSectionHtml } from "../../../../ssr.js";
 import { resolveSectionRef } from "../../../../schema/resolve-section-ref.js";
 import { materializeSection } from "./orchestrator.js";
 import { resolveAnchorMap } from "../../../../schema/section-nav.js";
-import { join } from "node:path";
 import { readFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/check/stages/validate/nav-contract.ts
 const ALLOWED_EXTERNAL_ANCHORS = ["#privacy-policy"];
@@ -68,11 +69,11 @@ async function assertNavContract(workspaceRoot, template) {
 	let html = "";
 	for (const section of composed) {
 		const { anchor, schema } = materializedByName.get(section.name);
-		const base = buildFixtureSet({
+		const base = resolveFixtureSetMedia(buildFixtureSet({
 			schema,
 			module: FixtureModuleShape.parse(fixturesByName.get(section.name)),
 			selfAnchor: anchor
-		}).find((f) => f.id === "typical");
+		})).find((f) => f.id === "typical");
 		if (!base) throw new Error(`Template "${template.key}": section "${section.name}" has no "typical" base fixture.`);
 		html += renderSectionHtml(rendererByName.get(section.name), {
 			slots: base.props.slots,

package/dist/cli/check/stages/validate/orchestrator.js

@@ -18,9 +18,9 @@ import { assertRowContract } from "./row-contract.js";
 import { assertSelectContract } from "./select-contract.js";
 import { assertSourceContract } from "./source-contract.js";
 import { assertVariantContract } from "./variant-contract.js";
-import { join } from "node:path";
 import { isDeepStrictEqual } from "node:util";
 import { readFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/check/stages/validate/orchestrator.ts
 function serializeVariants(variants) {

package/dist/cli/check/workspace.js

@@ -1,5 +1,5 @@
-import { dirname, join, resolve } from "node:path";
 import { readFile, readdir, stat } from "node:fs/promises";
+import { dirname, join, resolve } from "node:path";
 
 //#region src/cli/check/workspace.ts
 const isDir = async (p) => {
@@ -22,7 +22,7 @@ async function findWorkspaceRoot(from) {
 	for (;;) {
 		if (await isFile(join(dir, "package.json")) && await isDir(join(dir, "templates"))) return dir;
 		const parent = dirname(dir);
-		if (parent === dir) throw new Error("not inside a workspace — no parent directory has both a package.json and a templates/ folder.\nRun this from your workspace root, or create one with `npm create homepages-workspace`.");
+		if (parent === dir) throw new Error("not inside a workspace — no parent directory has both a package.json and a templates/ folder.\nRun this from your workspace root, or create one with `npm create @homepages/workspace`.");
 		dir = parent;
 	}
 }

package/dist/cli/dev/build-css.js

@@ -2,8 +2,8 @@ import { compileThemeToCss } from "../../design-system/theme.js";
 import { loadEsbuild } from "../check/resolve-tool.js";
 import { ASSET_LOADERS, ASSET_NAMES, ASSET_PUBLIC_PATH, sectionCssFiles } from "../check/css.js";
 import { runTailwind } from "./tailwind.js";
-import { basename, join, relative } from "node:path";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { basename, join, relative } from "node:path";
 
 //#region src/cli/dev/build-css.ts
 /**

package/dist/cli/dev/discover.js

@@ -1,6 +1,6 @@
-import { existsSync } from "node:fs";
-import { join } from "node:path";
 import { readdir } from "node:fs/promises";
+import { join } from "node:path";
+import { existsSync } from "node:fs";
 
 //#region src/cli/dev/discover.ts
 const REQUIRED_SECTION_FILES = [

package/dist/cli/dev/inspect.js

@@ -1,8 +1,8 @@
 import { renderSection } from "./render-section.js";
 import { collectRenderedSlotIds, computeSlotFills, schemaSlotLines } from "./fill-state.js";
 import { summarizeHtml } from "./structure-summary.js";
-import { join } from "node:path";
 import { readFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/dev/inspect.ts
 async function inspectSection(vite, args) {

package/dist/cli/dev/island-bootstrap.js

@@ -1,5 +1,5 @@
-import { join } from "node:path";
 import { mkdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/dev/island-bootstrap.ts
 const CACHE_DIR = ".tk-dev-cache";

package/dist/cli/dev/island-canvas-bootstrap.js

@@ -1,12 +1,35 @@
-import { join } from "node:path";
 import { mkdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/dev/island-canvas-bootstrap.ts
 const CACHE_DIR = ".tk-dev-cache";
 const BOOTSTRAP_FILE = "island-canvas-bootstrap.js";
-const BOOTSTRAP_SOURCE = `import { hydrateIslands, unmountIslands } from "@homepages/template-kit/island-runtime";
+const BOOTSTRAP_SOURCE = `import RefreshRuntime from "/@react-refresh";
+import { hydrateIslands, unmountIslands } from "@homepages/template-kit/island-runtime";
 import { createElement, useLayoutEffect } from "react";
 
+// React Refresh preamble. @vitejs/plugin-react compiles every client component
+// to assert this ran and throws "can't detect preamble" otherwise, so any page
+// that was not built by Vite's own index-html transform must supply it.
+//
+// It lives HERE, in the bootstrap, rather than in the page that loads the
+// bootstrap, because the two canvas surfaces reach islands by different routes:
+// the server-rendered ?canvas=1 page emits the preamble itself (section-page.ts)
+// before this script, but the shared-kernel srcdoc canvas is assembled by
+// canvas-core, whose CanvasAssets port carries stylesheets, an island map and
+// ONE host script — it has no channel for a dev-only inline prelude, and adding
+// one would push a Vite-specific concern into a kernel the app also ships.
+// Emitting it from the one module both surfaces already load covers both.
+//
+// Guarded so the server-rendered page, which already installed it, does not
+// re-enter injectIntoGlobalHook.
+if (!window.__vite_plugin_react_preamble_installed__) {
+  RefreshRuntime.injectIntoGlobalHook(window);
+  window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;
+  window.__vite_plugin_react_preamble_installed__ = true;
+}
+
 const SHIELD_CLASS = "tr-canvas-shield";
 const LIVE_ATTR = "data-tr-live";
 
@@ -53,17 +76,26 @@ function makeShield(doc) {
 }
 
 // "fill-self": surface made position:relative, shield appended as its last
-// child (unit cards). "fill-parent": shield is a sibling after the surface
-// (map canvas, slider viewport). Idempotent in both modes.
+// child (unit cards). "fill-parent" (map canvas, slider viewport): the
+// shield is an inset:0 sibling after the surface, so the surface's PARENT is
+// made position:relative instead — otherwise the shield escapes to the
+// initial containing block and covers the whole canvas. Idempotent in both
+// modes.
 function installShield(surface, mode) {
   const doc = surface.ownerDocument;
+  const win = doc.defaultView;
   if (mode === "fill-self") {
-    const pos = doc.defaultView ? doc.defaultView.getComputedStyle(surface).position : "";
+    const pos = win ? win.getComputedStyle(surface).position : "";
     if (!pos || pos === "static") surface.style.position = "relative";
     if (Array.from(surface.children).some((c) => c.classList.contains(SHIELD_CLASS))) return;
     surface.appendChild(makeShield(doc));
     return;
   }
+  const parent = surface.parentElement;
+  if (parent) {
+    const pos = win ? win.getComputedStyle(parent).position : "";
+    if (!pos || pos === "static") parent.style.position = "relative";
+  }
   const next = surface.nextElementSibling;
   if (next && next.classList.contains(SHIELD_CLASS)) return;
   surface.insertAdjacentElement("afterend", makeShield(doc));

package/dist/cli/dev/section-page.js

@@ -26,7 +26,7 @@ function diagnosticsBanner(section, template, encodedSection) {
 }
 function islandBootstrap(islands, bootstrapUrl) {
 	if (Object.keys(islands).length === 0) return "";
-	const mapJson = JSON.stringify(islands).replace(/</g, "\\u003c");
+	const mapJson = JSON.stringify(islands).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 	return `
     ${REACT_REFRESH_PREAMBLE}
     <script>window.__TR_ISLAND_MAP = ${mapJson};<\/script>

package/dist/cli/dev/server.js

@@ -20,10 +20,10 @@ import { writeIslandCanvasBootstrap } from "./island-canvas-bootstrap.js";
 import { resolveScreenshotPath } from "./screenshot-target.js";
 import { createDevViteServer } from "./vite-server.js";
 import { resolveWorkspace } from "./workspace.js";
-import { existsSync } from "node:fs";
-import { dirname, extname, join, resolve, sep } from "node:path";
 import { readFile } from "node:fs/promises";
+import { dirname, extname, join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
 import { createServer } from "node:http";
 
 //#region src/cli/dev/server.ts
@@ -69,11 +69,12 @@ async function startDevServer(opts) {
 	const sectionAssets = /* @__PURE__ */ new Map();
 	const islandBootstrapUrl = await writeIslandBootstrap(workspace.root);
 	const canvasIslandBootstrapUrl = await writeIslandCanvasBootstrap(workspace.root);
-	vite.watcher.on("change", () => {
+	vite.watcher.on("change", (path) => {
 		vite.moduleGraph.invalidateAll();
 		cssCache.clear();
 		sectionAssets.clear();
-		hmr.broadcast("section:changed", "{}");
+		if (path.endsWith(".css")) hmr.broadcast("tailwind:changed", "{}");
+		else hmr.broadcast("section:changed", "{}");
 	});
 	const ctx = {
 		workspace,
@@ -166,6 +167,7 @@ async function sendTemplatePage(ctx, templateKey, canvas, res) {
 		canvas
 	}));
 }
+const INITIAL_CSS_REV = "0";
 async function sendTemplateSchema(ctx, url, res) {
 	const templateKey = url.searchParams.get("template");
 	if (!templateKey) {
@@ -184,6 +186,7 @@ async function sendTemplateSchema(ctx, url, res) {
 	const load = (dir, file) => ctx.vite.ssrLoadModule(join(dir, file));
 	const instances = await resolveManifestInstances(template);
 	const out = [];
+	const islands = {};
 	for (const inst of instances) {
 		const { schemaSlots } = await loadSectionBundle(inst.sectionDir, load);
 		out.push({
@@ -192,10 +195,14 @@ async function sendTemplateSchema(ctx, url, res) {
 			fixture: inst.fixture,
 			slotSchema: projectSlotSchema(schemaSlots)
 		});
+		Object.assign(islands, await buildSectionIslandMap(ctx.workspace.root, ctx.workspace.templatesDir, inst.sectionDir));
 	}
 	sendJson(res, {
 		template: templateKey,
-		instances: out
+		instances: out,
+		islands,
+		bootstrapUrl: ctx.canvasIslandBootstrapUrl,
+		cssRev: INITIAL_CSS_REV
 	});
 }
 async function findSection(ctx, match) {

package/dist/cli/dev/tailwind.js

@@ -1,5 +1,5 @@
-import { dirname, join } from "node:path";
 import { promisify } from "node:util";
+import { dirname, join } from "node:path";
 import { pathToFileURL } from "node:url";
 import { createRequire } from "node:module";
 import { execFile } from "node:child_process";

package/dist/cli/dev/tsconfig-paths-plugin.js

@@ -1,6 +1,6 @@
 import { resolveFromWorkspace } from "../check/resolve-tool.js";
-import { existsSync, statSync } from "node:fs";
 import { isAbsolute, join, resolve } from "node:path";
+import { existsSync, statSync } from "node:fs";
 
 //#region src/cli/dev/tsconfig-paths-plugin.ts
 const RESOLVE_EXTENSIONS = [

package/dist/cli/dev/workspace.js

@@ -1,6 +1,6 @@
-import { existsSync } from "node:fs";
-import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { readFile, readdir } from "node:fs/promises";
+import { basename, dirname, join, relative, resolve, sep } from "node:path";
+import { existsSync } from "node:fs";
 
 //#region src/cli/dev/workspace.ts
 /** Walk up from `cwd` to the nearest ancestor that contains a `templates/` dir. */

package/dist/cli/link/index.js

@@ -1,8 +1,8 @@
 import { KIT_PKG_SUBPATH, findKitRoot, overlayKit, readLinkMarker } from "./overlay.js";
 import { findWorkspaceRoot } from "../check/workspace.js";
-import { join } from "node:path";
 import { parseArgs, promisify } from "node:util";
 import { readFile } from "node:fs/promises";
+import { join } from "node:path";
 import { execFile } from "node:child_process";
 
 //#region src/cli/link/index.ts

package/dist/cli/link/overlay.js

@@ -1,6 +1,6 @@
 import { KIT_VERSION } from "../../index.js";
-import { dirname, join, resolve } from "node:path";
 import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join, resolve } from "node:path";
 
 //#region src/cli/link/overlay.ts
 const KIT_PKG_SUBPATH = join("node_modules", "@homepages", "template-kit");

package/dist/cli/new/emit.js

@@ -1,5 +1,5 @@
-import { join, relative } from "node:path";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { join, relative } from "node:path";
 
 //#region src/cli/new/emit.ts
 const RENAME = {

package/dist/cli/new/index.js

@@ -1,8 +1,8 @@
 import { findWorkspaceRoot } from "../check/workspace.js";
 import { emitTree } from "./emit.js";
 import { sectionAssetsDir, templateAssetsDir } from "./scaffold-assets.js";
-import { existsSync } from "node:fs";
 import { join } from "node:path";
+import { existsSync } from "node:fs";
 
 //#region src/cli/new/index.ts
 const KEY_RE = /^[a-z][a-z0-9-]*$/;

package/dist/cli/new/scaffold/template/sections/hero/fixtures.ts

@@ -1,5 +1,5 @@
 import type { FixtureModule } from "@homepages/template-kit";
-import { luxuryMultiUnit, mkResponsive } from "@homepages/template-kit/fixtures";
+import { luxuryMultiUnit } from "@homepages/template-kit/fixtures";
 
 // Base content the section is designed for. Nullability coverage (each optional
 // slot rendered empty) is derived automatically from schema.ts — no fixture
@@ -12,12 +12,12 @@ const fixtures: FixtureModule = {
   base: {
     slots: {
       headline: luxuryMultiUnit.facts.address.display,
+      // State the asset id, exactly as a saved page does — the preview server
+      // resolves it to a URL and a responsive ladder, the same way the API does
+      // when the page is published. A fixture never states a URL.
       hero_image: {
         photo_id: heroImage.id,
-        url: heroImage.url,
         alt: heroImage.alt,
-        // Height set to a 16:9 ratio to match the slot's locked crop.
-        responsive: mkResponsive(heroImage.url, 2048, 1152),
       },
       blurb: "A 12-unit mansard Victorian in Jamaica Plain, moments from the Emerald Necklace.",
     },

package/dist/cli/new/scaffold-assets.js

@@ -1,13 +1,13 @@
-import { existsSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
 
 //#region src/cli/new/scaffold-assets.ts
 const here = dirname(fileURLToPath(import.meta.url));
 function assetsRoot() {
 	const dist = join(here, "scaffold");
 	if (existsSync(dist)) return dist;
-	return join(here, "..", "..", "..", "..", "create-homepages-workspace", "scaffold");
+	return join(here, "..", "..", "..", "..", "create-workspace", "scaffold");
 }
 function templateAssetsDir() {
 	return join(assetsRoot(), "template");

package/dist/cli/pack/collect.js

@@ -1,5 +1,5 @@
-import { join, relative, sep } from "node:path";
 import { readFile, readdir } from "node:fs/promises";
+import { join, relative, sep } from "node:path";
 import { createHash } from "node:crypto";
 
 //#region src/cli/pack/collect.ts

package/dist/cli/pack/guards.js

@@ -1,7 +1,7 @@
 import { readLinkMarker } from "../link/overlay.js";
 import { z } from "zod";
-import { join } from "node:path";
 import { readFile, stat } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/pack/guards.ts
 const depsSchema = z.object({

package/dist/cli/pack/index.js

@@ -4,9 +4,9 @@ import { collectTemplateFiles, contentHash } from "./collect.js";
 import { preflightGuards } from "./guards.js";
 import { buildPackManifest } from "./manifest.js";
 import { buildZip } from "./zip.js";
-import { join } from "node:path";
 import { parseArgs } from "node:util";
 import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/pack/index.ts
 function refusal(lines) {

package/dist/cli/theme/generate.js

@@ -1,7 +1,7 @@
 import { TokenThemeSchema, compileThemeToCss } from "../../design-system/theme.js";
 import { loadTheme } from "./load-theme.js";
-import { join } from "node:path";
 import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
 
 //#region src/cli/theme/generate.ts
 const OUT_FILE = "theme.css";

package/dist/cli/theme/load-theme.js

@@ -1,6 +1,6 @@
 import { loadEsbuild } from "../check/resolve-tool.js";
-import { join } from "node:path";
 import { mkdir, readFile, rm, stat } from "node:fs/promises";
+import { join } from "node:path";
 import { createHash } from "node:crypto";
 import { pathToFileURL } from "node:url";
 

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

@@ -0,0 +1 @@
+@theme inline{ --color-canvas: #ffffff; --color-line: #ebebe6; }:root{--frame: clamp(1px, calc(1px + (100vw - 1536px) * .0006076), 1.41667px);--content-follow: .25;--content: calc(1px + (var(--frame) - 1px) * var(--content-follow))}*{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-iframe{width:100%;height:100%;border:0;background:#fff}.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}.canvas-mirror__stage{position:relative;min-height:0;flex:1;overflow:hidden}.canvas-mirror__stage .canvas-iframe{position:absolute;top:0;right:0;bottom:0;left:0}.canvas-mirror__sidebar{position:absolute;top:20px;right:20px;bottom:20px;z-index:20;width:calc(400 * var(--frame));display:flex;flex-direction:column;min-height:0}@media(max-width:1100px){.canvas-mirror__sidebar{width:388px}}.instance-panel{flex:1 1 auto;min-height:0;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;align-items:flex-end;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}.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__slot-editor{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid #f0f1f3}.instance-panel__slot-editor:first-of-type{border-top:0;padding-top:0}.instance-panel__slot-editor--selected{border-left:3px solid #b8860b;padding-left:9px;margin-left:-12px}