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

package/dist/rules.js

@@ -0,0 +1,209 @@
+//#region src/rules/registry.ts
+const RULE_IDS = [
+	{
+		id: "no-nondeterminism",
+		venue: "eslint",
+		summary: "No clock or randomness reads in server-rendered code."
+	},
+	{
+		id: "no-client-runtime-in-server",
+		venue: "eslint",
+		summary: "No effects, state, event handlers, network, or browser globals in server-rendered code."
+	},
+	{
+		id: "serializable-island-props",
+		venue: "eslint",
+		summary: "Props handed to an island must be JSON-serializable."
+	},
+	{
+		id: "require-island-editor",
+		venue: "eslint",
+		summary: "Every island must declare whether it is live in the editor canvas."
+	},
+	{
+		id: "no-client-directive-in-contract",
+		venue: "eslint",
+		summary: "No \"use client\" in a section's four contract files."
+	},
+	{
+		id: "props-from-schema",
+		venue: "eslint",
+		summary: "A Renderer's Props type must be derived from schema.ts, not hand-written."
+	},
+	{
+		id: "no-inline-style",
+		venue: "eslint",
+		summary: "No inline style= in server-rendered JSX. Islands are exempt."
+	},
+	{
+		id: "no-raw-element",
+		venue: "eslint",
+		summary: "No raw `<section>`, `<img>` or `<video>` — use `<Section>`, `<Image>` and `<Video>`."
+	},
+	{
+		id: "image-bare-needs-reason",
+		venue: "eslint",
+		summary: "`<Image bare>` needs a `// bare:` comment saying why it skips the frame."
+	},
+	{
+		id: "slot-marker-literal",
+		venue: "eslint",
+		summary: "A slot-marker key must be a string literal, not an expression."
+	},
+	{
+		id: "no-hex",
+		venue: "eslint",
+		summary: "No hard-coded colours — the one legal colour function is a `color-mix()` over theme-derived arguments. Islands are NOT exempt."
+	},
+	{
+		id: "no-css-import-from-render-path",
+		venue: "eslint",
+		summary: "No relative/absolute .css import from a section's render path — a package's is the sanctioned channel."
+	},
+	{
+		id: "bundle-incomplete",
+		venue: "check",
+		summary: "A section folder is missing one of its four required files."
+	},
+	{
+		id: "bundle-binary-asset",
+		venue: "check",
+		summary: "An unreferenced binary asset sits in a section folder."
+	},
+	{
+		id: "schema-invalid",
+		venue: "check",
+		summary: "A section's schema.ts or fill-spec.ts fails a contract assertion, or cannot be loaded."
+	},
+	{
+		id: "fixtures-invalid",
+		venue: "check",
+		summary: "A section's fixtures.ts does not satisfy the fixture-module shape."
+	},
+	{
+		id: "manifest-invalid",
+		venue: "check",
+		summary: "A template's manifest.json is missing, unparseable, or violates the manifest contract."
+	},
+	{
+		id: "missing-slot-marker",
+		venue: "check",
+		summary: "An editable slot in schema.ts has no marker in the section's JSX."
+	},
+	{
+		id: "slot-group-marker",
+		venue: "check",
+		summary: "A group with two or more members has no `<SlotGroup>` wrapper."
+	},
+	{
+		id: "css-reason",
+		venue: "check",
+		summary: "A hand-written CSS file must open with a `css-reason:` comment."
+	},
+	{
+		id: "no-bare-css-import",
+		venue: "check",
+		summary: "No @import in hand-written CSS — the browser drops it silently."
+	},
+	{
+		id: "unlayered-fence",
+		venue: "check",
+		summary: "An `/* unlayered: */` escape hatch must be balanced and give a reason."
+	},
+	{
+		id: "sidebar-order",
+		venue: "check",
+		summary: "Schema slot order must match the order the page renders them in."
+	},
+	{
+		id: "typecheck",
+		venue: "check",
+		summary: "The template must compile under TypeScript."
+	},
+	{
+		id: "parse-error",
+		venue: "check",
+		summary: "A file could not be parsed at all — a syntax error, not a rule violation."
+	},
+	{
+		id: "determinism-drift",
+		venue: "check",
+		summary: "Rendering the same fixture twice must produce byte-identical HTML."
+	},
+	{
+		id: "render-invariant",
+		venue: "check",
+		summary: "Rendered output must carry no [object Object], bare null/undefined/NaN leaf, or src-less `<img>`."
+	},
+	{
+		id: "lockfile-missing",
+		venue: "check",
+		summary: "The workspace has no package-lock.json."
+	},
+	{
+		id: "lockfile-stale",
+		venue: "check",
+		summary: "The lockfile does not satisfy package.json — an `npm ci` would fail."
+	},
+	{
+		id: "single-react",
+		venue: "check",
+		summary: "The installed tree carries more than one copy of react or react-dom."
+	},
+	{
+		id: "audit-severity",
+		venue: "check",
+		summary: "A dependency carries a high or critical security advisory."
+	},
+	{
+		id: "license-denied",
+		venue: "check",
+		summary: "A production dependency's license is not on the allowlist."
+	},
+	{
+		id: "size-renderer-bundle",
+		venue: "check",
+		summary: "A section's renderer bundle exceeds its byte budget."
+	},
+	{
+		id: "size-section-css",
+		venue: "check",
+		summary: "A section's compiled CSS exceeds its byte budget."
+	},
+	{
+		id: "size-island-bundle",
+		venue: "check",
+		summary: "A section's island (browser) bundle exceeds its byte budget."
+	},
+	{
+		id: "size-assets",
+		venue: "check",
+		summary: "A section's static assets exceed their byte budget."
+	},
+	{
+		id: "no-templates",
+		venue: "check",
+		summary: "The workspace has no template to check at all."
+	}
+];
+/** The namespace every id is printed under, in both venues. */
+const RULE_NAMESPACE = "template-kit";
+/** `no-hex` → `template-kit/no-hex`. */
+function qualify(id) {
+	return `${RULE_NAMESPACE}/${id}`;
+}
+/**
+* `no-hex` → `guide/rules/no-hex.md`.
+*
+* Package-relative on purpose: the caller decides what to resolve it against. A
+* printer prefixes the resolved package root so an author sees a path they can open
+* with no network (`node_modules/@homepages/template-kit/guide/rules/no-hex.md`);
+* ESLint's `meta.docs.url` uses it as-is. This module never touches the filesystem —
+* the ESLint preset imports it.
+*/
+function docsPathForRule(id) {
+	return `guide/rules/${id}.md`;
+}
+
+//#endregion
+export { RULE_IDS, RULE_NAMESPACE, docsPathForRule, qualify };

package/dist/schema/property-facts.d.ts

@@ -7,8 +7,8 @@ type Coordinates = {
 type FloorplanAssignment = {
   id: string;
   upload_id?: string;
-  url: string;
-  alt: string;
+  url?: string;
+  alt?: string;
   floor_label: string | null;
   position: number;
   responsive?: ResponsiveImage | null;

package/dist/ssr.d.ts

@@ -1,10 +1,11 @@
 import { ResolvedFixture } from "./schema/fixture-schema.js";
 import "./schema/index.js";
-import { hasClientDirective } from "./eslint/is-client-file.js";
+import { hasClientDirective, isClientFile, resetClientFileCache, resolveImportedFile } from "./islands/client-directive.js";
 import { isClientComponentFile, islandKey } from "./islands/detect.js";
 import { wrapClientModuleSource } from "./islands/wrap.js";
 import { findSectionIslands } from "./islands/discover.js";
 import { islandTransformEsbuildPlugin } from "./islands/esbuild-plugin.js";
+import { DEV_MEDIA_URL_PREFIX, MediaAsset, MediaKind, getMediaAsset, listMediaAssets, mediaPackHasFile, packRelativeFromUrl } from "./media/pack.js";
 import { ComponentType } from "react";
 //#region src/ssr/index.d.ts
 type LoadedSection = {
@@ -16,6 +17,11 @@ type LoadedSection = {
     editable_by_user?: boolean;
     required?: boolean;
   }>;
+  unresolvedMedia: {
+    fixture: string;
+    field: string;
+    id: string;
+  }[];
 };
 type SectionModuleLoader = (dir: string, file: string) => Promise<unknown>;
 declare const nativeSectionLoader: SectionModuleLoader;
@@ -23,6 +29,12 @@ declare const nativeSectionLoader: SectionModuleLoader;
  * Load a bundle's Renderer plus its resolved snapshot and invariant fixture
  * sets from the bundle directory `dir`. `load` resolves each of the four
  * contract files; it defaults to native dynamic import.
+ *
+ * Media references resolve here, against the dev media pack: fixtures state the
+ * asset id `content_doc` holds, and a Renderer must receive the post-resolution
+ * `url`. This is the single fixture loader, so every Node-side caller — the
+ * registry's render + invariant gates, the dev server — gets resolved media
+ * without asking for it.
  */
 declare function loadSectionBundle(dir: string, load?: SectionModuleLoader): Promise<LoadedSection>;
 /**
@@ -31,4 +43,4 @@ declare function loadSectionBundle(dir: string, load?: SectionModuleLoader): Pro
  */
 declare function renderSectionHtml(renderer: ComponentType<Record<string, unknown>>, props: Record<string, unknown>): string;
 //#endregion
-export { LoadedSection, SectionModuleLoader, findSectionIslands, hasClientDirective, isClientComponentFile, islandKey, islandTransformEsbuildPlugin, loadSectionBundle, nativeSectionLoader, renderSectionHtml, wrapClientModuleSource };
+export { DEV_MEDIA_URL_PREFIX, LoadedSection, type MediaAsset, type MediaKind, SectionModuleLoader, findSectionIslands, getMediaAsset, hasClientDirective, isClientComponentFile, isClientFile, islandKey, islandTransformEsbuildPlugin, listMediaAssets, loadSectionBundle, mediaPackHasFile, nativeSectionLoader, packRelativeFromUrl, renderSectionHtml, resetClientFileCache, resolveImportedFile, wrapClientModuleSource };

package/dist/ssr.js

@@ -1,5 +1,7 @@
 import { FixtureModuleShape, buildFixtureSet, buildInvariantFixtures } from "./schema/fixture-schema.js";
-import { hasClientDirective } from "./eslint/is-client-file.js";
+import { DEV_MEDIA_URL_PREFIX, getMediaAsset, listMediaAssets, mediaPackHasFile, packRelativeFromUrl } from "./media/pack.js";
+import { findUnresolvedMedia, resolveFixtureSetMedia } from "./media/resolve-fixture-media.js";
+import { hasClientDirective, isClientFile, resetClientFileCache, resolveImportedFile } from "./islands/client-directive.js";
 import { isClientComponentFile, islandKey } from "./islands/detect.js";
 import { wrapClientModuleSource } from "./islands/wrap.js";
 import { findSectionIslands } from "./islands/discover.js";
@@ -15,6 +17,12 @@ const nativeSectionLoader = (dir, file) => import(pathToFileURL(join(dir, file))
 * Load a bundle's Renderer plus its resolved snapshot and invariant fixture
 * sets from the bundle directory `dir`. `load` resolves each of the four
 * contract files; it defaults to native dynamic import.
+*
+* Media references resolve here, against the dev media pack: fixtures state the
+* asset id `content_doc` holds, and a Renderer must receive the post-resolution
+* `url`. This is the single fixture loader, so every Node-side caller — the
+* registry's render + invariant gates, the dev server — gets resolved media
+* without asking for it.
 */
 async function loadSectionBundle(dir, load = nativeSectionLoader) {
 	const rendererMod = await load(dir, "Renderer.tsx");
@@ -22,19 +30,26 @@ async function loadSectionBundle(dir, load = nativeSectionLoader) {
 	const schemaMod = await load(dir, "schema.ts");
 	const parsed = FixtureModuleShape.parse(fixturesMod.default);
 	const selfAnchor = schemaMod.schema.meta?.anchor ?? basename(dir);
+	const snapshot = buildFixtureSet({
+		schema: schemaMod.schema,
+		module: parsed,
+		selfAnchor
+	});
+	const invariant = buildInvariantFixtures({
+		schema: schemaMod.schema,
+		module: parsed,
+		selfAnchor
+	});
+	const unresolvedMedia = invariant.flatMap((fixture) => findUnresolvedMedia(fixture.props).map((miss) => ({
+		fixture: fixture.id,
+		...miss
+	})));
 	return {
 		Renderer: rendererMod.default,
-		snapshotFixtures: buildFixtureSet({
-			schema: schemaMod.schema,
-			module: parsed,
-			selfAnchor
-		}),
-		invariantFixtures: buildInvariantFixtures({
-			schema: schemaMod.schema,
-			module: parsed,
-			selfAnchor
-		}),
-		schemaSlots: schemaMod.schema.slots
+		snapshotFixtures: resolveFixtureSetMedia(snapshot),
+		invariantFixtures: resolveFixtureSetMedia(invariant),
+		schemaSlots: schemaMod.schema.slots,
+		unresolvedMedia
 	};
 }
 /**
@@ -46,4 +61,4 @@ function renderSectionHtml(renderer, props) {
 }
 
 //#endregion
-export { findSectionIslands, hasClientDirective, isClientComponentFile, islandKey, islandTransformEsbuildPlugin, loadSectionBundle, nativeSectionLoader, renderSectionHtml, wrapClientModuleSource };
+export { DEV_MEDIA_URL_PREFIX, findSectionIslands, getMediaAsset, hasClientDirective, isClientComponentFile, isClientFile, islandKey, islandTransformEsbuildPlugin, listMediaAssets, loadSectionBundle, mediaPackHasFile, nativeSectionLoader, packRelativeFromUrl, renderSectionHtml, resetClientFileCache, resolveImportedFile, wrapClientModuleSource };

package/dist/tokens.css

@@ -0,0 +1,21 @@
+/* Design tokens the editor surface around the canvas frame reads.
+   The kernel itself reads none of these — the iframe is a srcdoc document
+   that cannot inherit the host's Tailwind, so its own chrome CSS is built
+   from literals on purpose. These are shipped beside the kernel so a
+   vendored copy's host stylesheet resolves them identically instead of
+   degrading silently to an inherited value.
+
+   The application's global stylesheet is the source of truth; this partial
+   is the shipped mirror and a colocated test fails on any drift between
+   them. Change a value there, not here. */
+
+@theme inline {
+  --color-canvas: #ffffff;
+  --color-line: #ebebe6;
+}
+
+:root {
+  --frame: clamp(1px, calc(1px + (100vw - 1536px) * 0.0006076), 1.41667px);
+  --content-follow: 0.25;
+  --content: calc(1px + (var(--frame) - 1px) * var(--content-follow));
+}

package/guide/INDEX.md

@@ -2,7 +2,7 @@
 purpose: Router for the guide corpus that ships inside the @homepages/template-kit npm package.
 status: living
 related: []
-updated: 2026-07-16
+updated: 2026-07-19
 ---
 # template-kit guide — router
 
@@ -22,7 +22,7 @@ detail.
 | `assets.md` | Static assets (svg/images/fonts): where they live (template level or a section folder, if referenced), referencing them from a section's CSS with `url()`/`@font-face` or importing them into a component, and the asset-vs-content-image distinction | shipping a logo, texture, icon, or brand font with a template |
 | `theme-and-css.md` | The two CSS entries, the one-Tailwind-import rule, `TokenTheme` (your own token names → your own Tailwind utilities), the `template-kit theme` command that generates `theme.css` from `theme.ts`, the breakpoint ladder, and the opt-in `content-visibility` recipe for long, image-heavy pages | a template's theme, its CSS entry, or a long page with a live map or full-screen overlay |
 | `islands.md` | Interactivity: `"use client"` components, the serializable-props rule, editor options, the loader | anything interactive in a section |
-| `eslint.md` | The `@homepages/template-kit/eslint` preset: the two-line config, the ESLint + parser install it expects, and its glob scope | wiring up lint in a template workspace |
+| `eslint.md` | The `@homepages/eslint-plugin-template` preset: the two-line config, the ESLint + parser install it expects, and its glob scope | wiring up lint in a template workspace |
 | `check.md` | The `template-kit check` CLI command: the toolchain it resolves from your workspace, its stages, `--all`/`--json`, output shape, and exit code | running `check` locally or wiring it into CI |
 | `dev.md` | The `template-kit dev` CLI command: the local preview server, its home launcher and two tool cards (full template viewer, canvas mirror), the canvas mirror's selection overlay and per-slot edit panel, live reload, the content-override protocol, and the render/inspect/screenshot endpoints | previewing sections as you author them |
 | `new.md` | The `template-kit new` / `new-section` CLI commands: scaffolding a new template with a working starter section, or adding a bare section to an existing template | adding a template or a section to a workspace |

package/guide/check.md

@@ -2,7 +2,7 @@
 purpose: The `template-kit check` command — what it runs, its flags, its output shape, and its exit code.
 status: living
 related: [INDEX.md, rules/INDEX.md, eslint.md, theme-and-css.md, dev.md, upgrading.md]
-updated: 2026-07-16
+updated: 2026-07-19
 ---
 # template-kit check
 
@@ -28,7 +28,7 @@ one or pass `--all`.
 ### What it needs installed
 
 ```bash
-npm i -D typescript eslint @typescript-eslint/parser esbuild
+npm i -D typescript eslint @typescript-eslint/parser esbuild @homepages/eslint-plugin-template
 ```
 
 `check` runs **your** toolchain, not a copy of its own: it resolves TypeScript, ESLint
@@ -48,9 +48,9 @@ one class of fix at a time:
 
 1. **typecheck** — the workspace's own TypeScript compiles the template's files, judged
    against the workspace's own `tsconfig.json`.
-2. **lint** — the workspace's own ESLint, running the kit's shipped preset over the
-   template's files. See [the ESLint preset](eslint.md) for the rules this stage shares
-   with your editor.
+2. **lint** — the workspace's own ESLint, running your own `eslint.config.mjs` — and
+   so the [authoring preset](eslint.md) it imports — over the template's files. See
+   that page for the rules this stage shares with your editor.
 3. **validate** — the schema, fill-spec, fixtures, and manifest contracts: every
    cross-reference between a section's contract files, and a template's `manifest.json`
    against the sections it composes.

package/guide/dev.md

@@ -2,7 +2,7 @@
 purpose: The `template-kit dev` command — the local preview server, what it serves, its URLs, and the agent-facing render endpoints.
 status: living
 related: [INDEX.md, theme-and-css.md, schema-system.md, check.md, islands.md]
-updated: 2026-07-18
+updated: 2026-07-19
 ---
 # template-kit dev
 
@@ -134,9 +134,14 @@ own right.
 ## Canvas mirror
 
 `/canvas/<template>` — open it from the home launcher's **Canvas mirror** card,
-or directly — mirrors the whole template in an iframe: every section instance
-from `manifest.json`, stacked in one scroll container, exactly as the deliverable
-renders. A paint-only overlay sits on top of it, scoped per section instance —
+or directly — renders the template inside the platform's own editor canvas
+frame: a rounded page card that auto-scales to fit the available width, on the
+same dotted canvas surface and with the same selection chrome the platform's
+content editor uses. Each manifest section instance loads independently and is
+injected into the page in manifest order as it arrives, so instances can appear
+progressively rather than all at once; one instance failing to render shows an
+error placeholder in its own spot without blocking the rest. A paint-only
+overlay sits on top of the page, scoped per section instance —
 the same slot name in two different sections selects independently. Click a slot
 to select it (a gold ring); hover to preview one (a blue ring). Only slots that
 instance's schema marks `editable_by_user: true` select individually — clicking
@@ -152,38 +157,42 @@ The current template and selection are encoded in the URL as
 a repeating slot (`<instanceId>~<slotId>~<itemIndex>`) — so a canvas link
 reloads and shares exactly the view you're looking at.
 
-Selecting a slot or a section instance docks an **edit panel** beside the
-iframe. A slot selection's panel additionally shows a slot editor: one JSON
-editor handles every slot type — you edit the slot's value in its own JSON
-shape rather than switching between per-type widgets — alongside a
-**fill-state badge** (filled / empty / missing) for the selected slot and a
-per-instance **fixture picker**. The picker lists that section's whole
-fixture corpus, including its synthetic empty-content fixtures, so you can
-drive a slot into an empty or missing state without touching `fixtures.ts`.
-Applying a JSON edit, switching the fixture, or resetting the instance
-re-renders that section instance alone, the same way it renders in the
-stack, and swaps its HTML into the iframe in place — no page reload, no
-other instance disturbed — then re-anchors the selection ring to the
-refreshed markup, and re-hydrates that instance's islands. The kit dev
-server is the harness's only backend, so this loop never touches fixture
-files, a database, or another service. Edit state lives only in the tab:
-nothing is written to disk, and reloading the page loses it. A section
-instance selection has no slot editor to dock, since there's no single slot
-to edit.
+A **floating edit panel**, a fixed-width card anchored over the canvas's right
+edge, is always open and shows one section instance at a time: whichever
+instance is currently selected, or — before any selection, or after Escape
+clears the ring — the last instance shown, defaulting to the template's first
+manifest instance on initial load. The panel lists every one of that
+instance's `editable_by_user: true` slots at once, each as its own row: one
+JSON editor handles every slot type — you edit the slot's value in its own
+JSON shape rather than switching between per-type widgets — alongside a
+**fill-state badge** (filled / empty / missing). Selecting a slot scrolls its
+row into view and highlights it. Above the slot rows sits a per-instance
+**fixture picker**: it lists that section's whole fixture corpus, including
+its synthetic empty-content fixtures, so you can drive a slot into an empty
+or missing state without touching `fixtures.ts`. Applying a JSON edit,
+switching the fixture, or resetting the instance re-renders that section
+instance alone, the same way it renders in the stack, and swaps its HTML into
+the iframe in place — no page reload, no other instance disturbed — then
+re-anchors the selection ring to the refreshed markup, and re-hydrates that
+instance's islands. The kit dev server is the harness's only backend, so this
+loop never touches fixture files, a database, or another service. Edit state
+lives only in the tab: nothing is written to disk, and reloading the page
+loses it.
 
 An island whose component declares `editor.live: true` (see [Islands](islands.md))
 hydrates in the canvas the same way it does on a published page, but behind a
 click-through shield until it's selected: the first click on a live island
 selects its owning slot or section instance instead of reaching the
 component, dropping the shield; a second click reaches the component itself.
-Pressing Escape clears the selection and re-arms every shield. An island with
-no `editor` export, or `editor.live: false`, stays static markup in the
-canvas — same as a published page's non-live islands. Some islands own no
-slot of their own (e.g. a slider or map sitting beside a `<Slot>` rather than
-wrapped by one); their shield only ever drops under a section instance
-selection. Selecting a slot or a section instance docks a read-only
-**Islands** list in the edit panel showing every top-level island in that
-section instance, whether it's live or static, its shield placement, and
+Pressing Escape clears the select ring and re-arms every shield; it does not
+close the edit panel, which keeps showing the instance it was last showing.
+An island with no `editor` export, or `editor.live: false`, stays static
+markup in the canvas — same as a published page's non-live islands. Some
+islands own no slot of their own (e.g. a slider or map sitting beside a
+`<Slot>` rather than wrapped by one); their shield only ever drops under a
+section instance selection. The edit panel always includes a read-only
+**Islands** list for its current instance, showing every top-level island in
+that section instance, whether it's live or static, its shield placement, and
 whether it's currently interactive or shielded.
 
 ## Agent-facing endpoints

package/guide/eslint.md

@@ -1,24 +1,24 @@
 ---
-purpose: The authoring-lint preset shipped at `@homepages/template-kit/eslint` — setup and scope. Per-rule reference lives in `rules/`.
+purpose: The authoring-lint preset shipped as `@homepages/eslint-plugin-template` — setup and scope. Per-rule reference lives in `rules/`.
 status: living
-related: [INDEX.md, rules/INDEX.md, check.md, islands.md, theme-and-css.md, primitives.md]
-updated: 2026-07-14
+related: [INDEX.md, rules/INDEX.md, check.md, islands.md, theme-and-css.md, primitives.md, upgrading.md]
+updated: 2026-07-19
 ---
 # ESLint preset
 
-`@homepages/template-kit/eslint` is a flat-config ESLint preset carrying every
+`@homepages/eslint-plugin-template` is a flat-config ESLint preset carrying every
 authoring rule the kit enforces one file at a time, under the `template-kit/*`
 rule namespace.
 
 ## Setup
 
 ```bash
-npm i -D eslint @typescript-eslint/parser
+npm i -D @homepages/eslint-plugin-template eslint @typescript-eslint/parser
 ```
 
 ```js
 // eslint.config.mjs
-import kit from "@homepages/template-kit/eslint";
+import kit from "@homepages/eslint-plugin-template";
 export default kit;
 ```
 
@@ -26,10 +26,13 @@ That is the whole setup — no plugin registration, no parser wiring, no tsconfi
 The preset registers its rules and sets `languageOptions` (parser included) itself,
 so those two lines are a complete config.
 
-You install ESLint and the parser yourself because the kit deliberately does **not**
-depend on them: a package whose main entry is a set of React primitives must not drag
-a linter into the production install of every app that renders a template. The preset
-resolves the parser from your workspace when you import it. If you see
+The preset ships as its own package rather than a kit subpath because it needs a
+different dependency tree: ESLint and the parser, not React. That keeps a linter out
+of the production install of every app that renders a template — the kit's main entry
+is a set of React primitives, and it must not drag one in.
+
+ESLint and the parser are peer dependencies, so you install them yourself; the preset
+resolves them from your workspace. If you see
 `Cannot find package '@typescript-eslint/parser'`, that is the install line above
 missing.
 

package/guide/llms.txt

@@ -80,10 +80,11 @@ and [Pick a scenario](recipes/pick-a-scenario.md).
   template — where an asset file lives (template level, or a section folder if the
   section references it), referencing it from a section's CSS with `url()`/`@font-face`
   or importing it into a component, and the asset-vs-content-image distinction.
-- [ESLint preset](eslint.md): `@homepages/template-kit/eslint`, the flat-config preset —
+- [ESLint preset](eslint.md): `@homepages/eslint-plugin-template`, the flat-config preset —
   a two-line config with no parser wiring, over an ESLint + `@typescript-eslint/parser`
-  install of your own (the kit depends on neither — both resolve from your workspace).
-  Its three-entry glob scope. Per-rule reference lives in `rules/`.
+  install of your own (both are peer dependencies of the preset and resolve from your
+  workspace; the kit itself depends on neither). Its own version line, separate from the
+  kit's. Its three-entry glob scope. Per-rule reference lives in `rules/`.
 - [Check](check.md): the `template-kit check` CLI command — the toolchain it runs (your
   TypeScript, ESLint and esbuild, resolved from your workspace), its six per-template
   stages, the once-per-invocation dependency gates, `--all`/`--json`, the report shape,

package/guide/quickstart.md

@@ -15,7 +15,7 @@ depth.
 ## Create your workspace
 
 ```bash
-npm create homepages-workspace@latest my-workspace
+npm create @homepages/workspace@latest my-workspace
 ```
 
 This stamps a workspace with one template, `starter`, and one section in it,

package/guide/recipes/image-slot-crop.md

@@ -2,7 +2,7 @@
 purpose: Add an image slot the editor crops to a fixed ratio.
 status: living
 related: [../schema-system.md, ../primitives.md, ../rules/image-bare-needs-reason.md, pick-a-scenario.md]
-updated: 2026-07-16
+updated: 2026-07-19
 ---
 # Image slot with a locked crop
 
@@ -51,20 +51,20 @@ interior_image: {
 ```
 
 ```ts
-// fixtures.ts — a photo + a matching mkResponsive() height
-import { mkResponsive, scenarios } from "@homepages/template-kit/fixtures";
+// fixtures.ts — the photo's asset id, exactly as a saved page states it
+import { scenarios } from "@homepages/template-kit/fixtures";
 
 const interiorImage = scenarios.luxuryMultiUnit.photos[3]!;
 // ...
 interior_image: {
   photo_id: interiorImage.id,
-  url: interiorImage.url,
   alt: interiorImage.alt,
-  // Height set to a 4:3 ratio to match the slot's locked crop.
-  responsive: mkResponsive(interiorImage.url, 1600, 1200),
 },
 ```
 
+The `url` and the responsive ladder the Renderer reads are attached when the fixture
+loads — see [Media is stated by id](../schema-system.md#media-is-stated-by-id-never-by-url).
+
 An image slot supports two independent geometry configs — use one, not both, per
 slot: