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

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

@@ -1,204 +0,0 @@
-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 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";
-
-const modules = import.meta.glob("/templates/**/*.{tsx,jsx}");
-const map = window.__TR_ISLAND_MAP || {};
-
-// Per-island hydration-commit signal, keyed by the \`editor\` object THIS load()
-// call clones for that island — never by island key. A section rendering N of
-// one island calls load() N times; keying by key would let the last call's
-// commit gate every handle, un-shielding N-1 of them before their own root has
-// actually committed.
-const commitOf = new WeakMap();
-
-// Wrap the loaded default export so it reports its own hydration commit.
-// Renders no DOM of its own (the tree still matches the SSR markup exactly),
-// and useLayoutEffect fires after the commit but before paint, so the canvas
-// never shows an unshielded frame.
-function withCommitSignal(component, signalCommit) {
-  return function IslandCommitSignal(props) {
-    useLayoutEffect(signalCommit, []);
-    return createElement(component, props);
-  };
-}
-
-async function load(key) {
-  const url = map[key];
-  const importer = url ? modules[url] : undefined;
-  if (!importer) return Promise.reject(new Error("template-kit dev: no island module for " + key));
-  const mod = await importer();
-
-  let signalCommit;
-  const committed = new Promise((resolve) => { signalCommit = resolve; });
-  const editor = mod.editor ? { ...mod.editor } : undefined;
-  if (editor) commitOf.set(editor, { committed, signalCommit });
-
-  return { ...mod, editor, default: withCommitSignal(mod.default, signalCommit) };
-}
-
-function makeShield(doc) {
-  const shield = doc.createElement("div");
-  shield.className = SHIELD_CLASS;
-  shield.setAttribute("aria-hidden", "true");
-  return shield;
-}
-
-// "fill-self": surface made position:relative, shield appended as its last
-// 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 = 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));
-}
-
-function shieldHandle(handle) {
-  const editor = handle.editor;
-  if (!editor || !editor.live) return;
-  const surfaces = editor.liveSurface ? editor.liveSurface(handle.element) : [handle.element];
-  const mode = editor.shieldMode || "fill-parent";
-  for (const surface of surfaces) installShield(surface, mode);
-  // Stamped for island-inspect.ts's read-only panel — not read by any hydration logic.
-  handle.element.setAttribute("data-tr-island-live", "true");
-  handle.element.setAttribute("data-tr-shield-mode", mode);
-}
-
-// Every TOP-LEVEL island marker under root, excluding nested ones (a marker
-// inside another marker is hydrated by its parent island's own React root —
-// see hydrateIslands' own filter in island-runtime; this mirrors it so the
-// inspector never double-reports or mis-marks a nested child).
-function topLevelMarkers(root) {
-  return Array.from(root.querySelectorAll("[data-tr-island]")).filter(
-    (el) => !el.parentElement || !el.parentElement.closest("[data-tr-island]"),
-  );
-}
-
-let styleInstalled = false;
-function ensureShieldStyle() {
-  if (styleInstalled || document.getElementById("tr-canvas-shield-style")) return;
-  styleInstalled = true;
-  const style = document.createElement("style");
-  style.id = "tr-canvas-shield-style";
-  style.textContent =
-    "." + SHIELD_CLASS + "{position:absolute;inset:0;z-index:1;cursor:pointer;background:transparent;}" +
-    "[" + LIVE_ATTR + "] ." + SHIELD_CLASS + "{display:none;}";
-  document.head.appendChild(style);
-}
-
-// Hydrate every live island under \`root\`, install its shield(s), and mark every
-// top-level island (live or not) with data-tr-island-live for the inspector.
-async function hydrateRoot(root) {
-  ensureShieldStyle();
-  const before = new Set(topLevelMarkers(root));
-
-  const handles = await hydrateIslands({
-    root,
-    load,
-    shouldHydrate: (ctx) => (ctx.editor ? ctx.editor.live === true : false),
-    applyEditorProps: true,
-    onError: (error, ctx) => {
-      console.error("template-kit dev: canvas island failed to hydrate:", ctx.key, error);
-      // Settle its commit: a failed island never signals one, and the wait
-      // below must not stall the rest of this root's shields on it.
-      if (ctx.editor) { const c = commitOf.get(ctx.editor); if (c) c.signalCommit(); }
-    },
-  });
-
-  // hydrateRoot (React's) flushes on a scheduler task, so hydrateIslands
-  // returns before React has committed. Shielding here would mutate a
-  // not-yet-hydrated tree: in fill-self mode the shield lands INSIDE a
-  // React-owned surface, and React then discards the whole SSR tree and
-  // client-renders, wiping shield and inline position both. Waiting on the
-  // real commit — not a task-turn guess — is what makes the mutation stick.
-  await Promise.all(
-    handles
-      .map((h) => (h.editor ? commitOf.get(h.editor) : undefined))
-      .filter((c) => c !== undefined)
-      .map((c) => c.committed),
-  );
-
-  for (const handle of handles) {
-    shieldHandle(handle);
-    before.delete(handle.element);
-  }
-  // Whatever's left in \`before\` is a top-level island that did not pass
-  // shouldHydrate (editor.live !== true, or no editor at all) — static by its
-  // own contract; mark it so for the inspector.
-  for (const el of before) el.setAttribute("data-tr-island-live", "false");
-
-  return handles;
-}
-
-function unmountRoot(root) {
-  unmountIslands(root);
-  root.querySelectorAll("." + SHIELD_CLASS).forEach((s) => s.remove());
-}
-
-window.__trCanvasIslands = { hydrateRoot, unmountRoot };
-void hydrateRoot(document.body);
-`;
-/**
-* Write the shared canvas bootstrap into the workspace cache dir and return
-* the URL the canvas page loads it from. Same mechanics as
-* writeIslandBootstrap: lives under the root so Vite serves + transforms it,
-* reached via Vite's `/@fs/` prefix.
-*/
-async function writeIslandCanvasBootstrap(root) {
-	const dir = join(root, CACHE_DIR);
-	await mkdir(dir, { recursive: true });
-	const abs = join(dir, BOOTSTRAP_FILE);
-	await writeFile(abs, BOOTSTRAP_SOURCE, "utf8");
-	return `/@fs/${abs}`;
-}
-
-//#endregion
-export { writeIslandCanvasBootstrap };

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

@@ -1,35 +0,0 @@
-import { islandKey } from "../../islands/detect.js";
-import { findSectionIslands } from "../../islands/discover.js";
-import { basename, extname, relative, sep } from "node:path";
-
-//#region src/cli/dev/island-map.ts
-/**
-* Derive an island key from a client component's absolute path, relative to the
-* workspace's `templates/` dir: `<templateFolder>/<section>:<ComponentName>`.
-* A component name is the file basename. Returns null for a path that is not a
-* `templates/<folder>/sections/<section>/…` component.
-*/
-function islandKeyForFile(templatesDir, absFile) {
-	const rel = relative(templatesDir, absFile);
-	if (rel.startsWith("..")) return null;
-	const parts = rel.split(sep);
-	if (parts.length < 4 || parts[1] !== "sections") return null;
-	return islandKey(`${parts[0]}/${parts[2]}`, basename(absFile, extname(absFile)));
-}
-/**
-* The map the browser bootstrap reads: island key → the module's root-relative
-* URL (what Vite serves it at, and what `import.meta.glob("/templates/**")` keys
-* it by). Empty when the section has no islands.
-*/
-async function buildSectionIslandMap(root, templatesDir, sectionDir) {
-	const map = {};
-	for (const file of await findSectionIslands(sectionDir)) {
-		const key = islandKeyForFile(templatesDir, file);
-		if (!key) continue;
-		map[key] = "/" + relative(root, file).split(sep).join("/");
-	}
-	return map;
-}
-
-//#endregion
-export { buildSectionIslandMap, islandKeyForFile };

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

@@ -1,31 +0,0 @@
-import { wrapClientModuleMagic } from "../../islands/wrap.js";
-import { islandKeyForFile } from "./island-map.js";
-import { extname, join, sep } from "node:path";
-
-//#region src/cli/dev/island-transform.ts
-const COMPONENT_EXTS = /* @__PURE__ */ new Set([".tsx", ".jsx"]);
-function islandTransformPlugin(opts) {
-	const templatesDir = join(opts.root, "templates");
-	const templatesPrefix = templatesDir + sep;
-	return {
-		name: "template-kit:island-transform",
-		enforce: "pre",
-		transform(code, id, options) {
-			if (!options?.ssr) return null;
-			const file = id.split("?", 1)[0] ?? id;
-			if (!file.startsWith(templatesPrefix)) return null;
-			if (!COMPONENT_EXTS.has(extname(file))) return null;
-			const key = islandKeyForFile(templatesDir, file);
-			if (!key) return null;
-			const s = wrapClientModuleMagic(code, key);
-			if (s === null) return null;
-			return {
-				code: s.toString(),
-				map: s.generateMap({ hires: true })
-			};
-		}
-	};
-}
-
-//#endregion
-export { islandTransformPlugin };

package/dist/cli/dev/manifest-instances.js

@@ -1,31 +0,0 @@
-import { TemplateManifest } from "../../schema/manifest.js";
-import { discoverSections } from "./discover.js";
-import { readFile } from "node:fs/promises";
-
-//#region src/cli/dev/manifest-instances.ts
-function selectManifestInstances(sections, manifestSections) {
-	const out = [];
-	for (const inst of manifestSections) {
-		const info = sections.find((s) => s.name === inst.section);
-		if (!info) continue;
-		out.push({
-			instanceId: inst.instance_id,
-			section: inst.section,
-			sectionDir: info.dir,
-			fixture: "typical",
-			options: inst.options
-		});
-	}
-	return out;
-}
-async function resolveManifestInstances(template) {
-	const manifest = TemplateManifest.parse(JSON.parse(await readFile(template.manifestPath, "utf8")));
-	return selectManifestInstances(await discoverSections(template.dir), manifest.sections);
-}
-/** The single manifest instance with this id, or null (author WIP / unknown id). */
-async function findManifestInstance(template, instanceId) {
-	return (await resolveManifestInstances(template)).find((i) => i.instanceId === instanceId) ?? null;
-}
-
-//#endregion
-export { findManifestInstance, resolveManifestInstances, selectManifestInstances };

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

@@ -1,24 +0,0 @@
-import { loadSectionBundle, renderSectionHtml } from "../../ssr.js";
-import { applyContentOverride } from "./content-override.js";
-import { projectSlotSchema } from "./slot-schema.js";
-import { join } from "node:path";
-
-//#region src/cli/dev/render-section.ts
-async function renderSection(vite, req) {
-	const load = (dir, file) => vite.ssrLoadModule(join(dir, file));
-	const { Renderer, invariantFixtures, schemaSlots } = await loadSectionBundle(req.sectionDir, load);
-	const fx = invariantFixtures.find((f) => f.id === req.fixture);
-	if (!fx) throw new Error(`fixture "${req.fixture}" not found (have: ${invariantFixtures.map((r) => r.id).join(", ")})`);
-	const props = applyContentOverride(fx.props, req.override);
-	return {
-		html: renderSectionHtml(Renderer, props),
-		resolvedProps: props,
-		fixtureLabel: fx.label,
-		slotSchema: projectSlotSchema(schemaSlots),
-		schemaSlots,
-		nullCorpus: invariantFixtures.filter((f) => f.id.startsWith("null_")).map((f) => f.id)
-	};
-}
-
-//#endregion
-export { renderSection };

package/dist/cli/dev/screenshot-target.js

@@ -1,24 +0,0 @@
-//#region src/cli/dev/screenshot-target.ts
-function resolveScreenshotPath(t) {
-	if (!t.template) return {
-		ok: false,
-		error: "screenshot requires a template"
-	};
-	const hasSection = Boolean(t.section);
-	if (hasSection !== Boolean(t.fixture)) return {
-		ok: false,
-		error: "provide section and fixture together for a section screenshot, or neither for a full-template screenshot"
-	};
-	const enc = encodeURIComponent;
-	if (hasSection) return {
-		ok: true,
-		path: `/sections/${enc(t.template)}/${enc(t.section)}/${enc(t.fixture)}`
-	};
-	return {
-		ok: true,
-		path: `/template/${enc(t.template)}`
-	};
-}
-
-//#endregion
-export { resolveScreenshotPath };

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

@@ -1,91 +0,0 @@
-//#region src/cli/dev/section-page.ts
-function wrapSectionHtml(opts) {
-	const t = encodeURIComponent(opts.template);
-	const s = encodeURIComponent(opts.section);
-	const v = encodeURIComponent(opts.cssRev);
-	return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Section Preview</title>
-    <link rel="stylesheet" href="/runtime/base.css?v=${v}" />
-    <link rel="stylesheet" href="/runtime/template.css?template=${t}&v=${v}" />
-    <style>html, body { margin: 0; padding: 0; background: #fff; }</style>
-  </head>
-  <body>
-    <div id="section-host">${opts.sectionHtml}</div>${islandBootstrap(opts.islands, opts.bootstrapUrl)}
-    <script>${HMR_CLIENT_JS}<\/script>${diagnosticsBanner(opts.section, t, s)}
-  </body>
-</html>`;
-}
-function diagnosticsBanner(section, template, encodedSection) {
-	if (section === "") return "";
-	return `
-    <script>${diagnosticsClientJs(template, encodedSection)}<\/script>`;
-}
-function islandBootstrap(islands, bootstrapUrl) {
-	if (Object.keys(islands).length === 0) return "";
-	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>
-    <script type="module" src="${bootstrapUrl}"><\/script>`;
-}
-const REACT_REFRESH_PREAMBLE = `<script type="module">
-      import RefreshRuntime from "/@react-refresh";
-      RefreshRuntime.injectIntoGlobalHook(window);
-      window.$RefreshReg$ = () => {};
-      window.$RefreshSig$ = () => (type) => type;
-      window.__vite_plugin_react_preamble_installed__ = true;
-    <\/script>`;
-const HMR_CLIENT_JS = `
-(function () {
-  try {
-    var src = new EventSource("/__hmr");
-    src.addEventListener("section:changed", function () { window.location.reload(); });
-    src.addEventListener("tailwind:changed", function () {
-      var link = document.querySelector('link[href*="/runtime/template.css"]');
-      if (link) {
-        var href = link.getAttribute("href");
-        var base = href.split("&v=")[0];
-        link.setAttribute("href", base + "&v=" + Date.now());
-      }
-    });
-  } catch (e) { /* dev-only; ignore */ }
-})();
-`.trim();
-function diagnosticsClientJs(template, section) {
-	return `
-(function () {
-  function render(violations) {
-    var banner = document.createElement("div");
-    banner.setAttribute("data-diagnostics-banner", "");
-    banner.style.cssText = "position:sticky;top:0;z-index:9999;background:#fee2e2;color:#7f1d1d;" +
-      "font:13px/1.4 monospace;padding:8px 12px;border-bottom:1px solid #fca5a5;";
-    var dismiss = document.createElement("button");
-    dismiss.textContent = "dismiss";
-    dismiss.style.cssText = "float:right;cursor:pointer;";
-    dismiss.onclick = function () { banner.remove(); };
-    var text = document.createElement("pre");
-    text.style.cssText = "margin:0;white-space:pre-wrap;";
-    text.textContent = violations.map(function (v) {
-      var loc = v.file ? " (" + v.file + (v.line ? ":" + v.line : "") + ")" : "";
-      return "[" + v.rule + "] " + v.message + loc;
-    }).join("\\n");
-    banner.appendChild(dismiss);
-    banner.appendChild(text);
-    document.body.insertBefore(banner, document.body.firstChild);
-  }
-  fetch("/api/diagnostics?template=${template}&section=${section}")
-    .then(function (r) { return r.json(); })
-    .then(function (body) {
-      if (body.available && body.violations && body.violations.length > 0) render(body.violations);
-    })
-    .catch(function () { /* dev-only; ignore */ });
-})();
-`.trim();
-}
-
-//#endregion
-export { wrapSectionHtml };