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

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
@@ -166,6 +166,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 +185,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 +194,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-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}