@homepages/template-kit 0.1.0 → 0.3.0

package/dist/design-system/theme.js

@@ -1,95 +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 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 followed by a single `:root { --tr-*: … }` declaration.
-* 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 root = `:root {\n${decls.join("\n")}\n}`;
-	return theme.fonts.fontFaces ? `${theme.fonts.fontFaces}\n\n${root}\n` : `${root}\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/eslint/rules/image-bare-needs-reason.js

@@ -1,8 +1,13 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/image-bare-needs-reason.ts
 const imageBareNeedsReason = {
 	meta: {
 		type: "problem",
-		docs: { description: "<Image bare> requires a `// bare:` reason comment" },
+		docs: {
+			description: "<Image bare> requires a `// bare:` reason comment",
+			url: docsPathForRule("image-bare-needs-reason")
+		},
 		schema: [],
 		messages: { bareNeedsReason: "`<Image bare>` skips the framed wrapper's aspect-ratio box and fallback rect. Fix: document why this case warrants it with a `// bare: <reason>` comment immediately above the element." }
 	},

package/dist/eslint/rules/no-client-directive-in-contract.js

@@ -1,8 +1,13 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/no-client-directive-in-contract.ts
 const noClientDirectiveInContract = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban the \"use client\" directive in a section's four contract files" },
+		docs: {
+			description: "Ban the \"use client\" directive in a section's four contract files",
+			url: docsPathForRule("no-client-directive-in-contract")
+		},
 		schema: [],
 		messages: { clientContractFile: "A section's contract files (Renderer.tsx, schema.ts, fill-spec.ts, fixtures.ts) are server-only and must not carry \"use client\" — the platform reads them outside a browser. Fix: put the interactive part in its own \"use client\" component in the section folder and render it from the Renderer." }
 	},

package/dist/eslint/rules/no-client-runtime-in-server.js

@@ -1,3 +1,4 @@
+import { docsPathForRule } from "../../rules/registry.js";
 import { hasClientDirective, isClientFile, resolveImportedFile } from "../is-client-file.js";
 
 //#region src/eslint/rules/no-client-runtime-in-server.ts
@@ -22,7 +23,10 @@ const BANNED_GLOBALS = /* @__PURE__ */ new Set([
 const noClientRuntimeInServer = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban effects, state, handlers, network, and browser globals in server-rendered section code" },
+		docs: {
+			description: "Ban effects, state, handlers, network, and browser globals in server-rendered section code",
+			url: docsPathForRule("no-client-runtime-in-server")
+		},
 		schema: [],
 		messages: {
 			clientRuntime: "`{{what}}` is browser-only and is banned in server-rendered code — a Renderer must be a pure function of its props. Fix: move this into a `\"use client\"` component in the section folder and render it from the Renderer; it will be hydrated as an island.",

package/dist/eslint/rules/no-css-import-from-render-path.js

@@ -1,15 +1,21 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/no-css-import-from-render-path.ts
 const noCssImportFromRenderPath = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban CSS imports from a section's render path" },
+		docs: {
+			description: "Ban local CSS imports from a section's render path",
+			url: docsPathForRule("no-css-import-from-render-path")
+		},
 		schema: [],
-		messages: { cssFromRenderPath: "`{{source}}` is a CSS import in the render path — the renderer is compiled for SSR, where this is dropped, so the styles would silently not ship. Fix: `@import` it from the section's root `styles.css`, which is the entry the CSS build actually reads." }
+		messages: { cssFromRenderPath: "`{{source}}` is a local stylesheet imported from the render path — the build already collects every `.css` file in the section folder by filename, so this ships the rules twice. Fix: delete the import; the file is picked up on its own. (A package's stylesheet belongs here, imported by its bare specifier — that is how it reaches the section's layer.)" }
 	},
 	create(context) {
 		return { ImportDeclaration(node) {
 			const source = node.source.value;
 			if (typeof source !== "string" || !source.endsWith(".css")) return;
+			if (!source.startsWith(".") && !source.startsWith("/")) return;
 			context.report({
 				node,
 				messageId: "cssFromRenderPath",

package/dist/eslint/rules/no-hex.js

@@ -1,6 +1,77 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/no-hex.ts
-const COLOR_FN = /(?:oklch|oklab|rgba?|hsla?|color-mix)\s*\([^)]*\)/;
 const HEX = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g;
+const SEPARATOR = /[\s_]/;
+const TRIM_SEPARATORS = /^[\s_]+|[\s_]+$/g;
+const PERCENTAGE = /^[+-]?(?:\d+\.?\d*|\.\d+)%$/;
+const VAR_REF = /^var\((.*)\)$/s;
+const NESTED_COLOR_MIX = /^color-mix[\s_]*\((.*)\)$/s;
+const CUSTOM_PROPERTY_NAME = /^--[A-Za-z0-9_-]+$/;
+const PALETTE_FREE_KEYWORDS = /* @__PURE__ */ new Set(["transparent", "currentcolor"]);
+function splitTopLevel(text, isSeparator) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of text) {
+		if (char === "(") depth += 1;
+		else if (char === ")") depth -= 1;
+		if (depth === 0 && isSeparator(char)) {
+			if (current !== "") parts.push(current);
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	if (current !== "") parts.push(current);
+	return parts;
+}
+function findColorFunctionCalls(text) {
+	const head = /(?:oklch|oklab|rgba?|hsla?|color-mix)[\s_]*\(/g;
+	const calls = [];
+	let match;
+	while (match = head.exec(text)) {
+		const open = match.index + match[0].length - 1;
+		let depth = 0;
+		let close = -1;
+		for (let i = open; i < text.length; i += 1) if (text[i] === "(") depth += 1;
+		else if (text[i] === ")") {
+			depth -= 1;
+			if (depth === 0) {
+				close = i;
+				break;
+			}
+		}
+		if (close === -1) continue;
+		calls.push({
+			raw: text.slice(match.index, close + 1),
+			name: match[0].replace(/[\s_]*\($/, "").toLowerCase(),
+			args: text.slice(open + 1, close)
+		});
+	}
+	return calls;
+}
+function isThemeDerivedColor(token) {
+	const value = token.replace(TRIM_SEPARATORS, "");
+	if (PALETTE_FREE_KEYWORDS.has(value.toLowerCase())) return true;
+	const varRef = VAR_REF.exec(value);
+	if (varRef) {
+		const [name, ...fallback] = splitTopLevel(varRef[1] ?? "", (char) => char === ",");
+		if (name === void 0 || !CUSTOM_PROPERTY_NAME.test(name.replace(TRIM_SEPARATORS, ""))) return false;
+		return fallback.length === 0 || isThemeDerivedColor(fallback.join(","));
+	}
+	const nested = NESTED_COLOR_MIX.exec(value);
+	return nested !== null && isThemeDerivedColorMix(nested[1] ?? "");
+}
+function isThemeDerivedColorMix(args) {
+	const [interpolation, ...colors] = splitTopLevel(args, (char) => char === ",");
+	if (interpolation === void 0 || !/^in[\s_]/.test(interpolation.replace(TRIM_SEPARATORS, ""))) return false;
+	if (colors.length === 0) return false;
+	return colors.every((color) => {
+		const [colorToken, ...rest] = splitTopLevel(color, (char) => SEPARATOR.test(char)).filter((token) => !PERCENTAGE.test(token));
+		return colorToken !== void 0 && rest.length === 0 && isThemeDerivedColor(colorToken);
+	});
+}
 const COLOR_UTILITY_PREFIXES = [
 	"bg",
 	"text",
@@ -67,18 +138,24 @@ function isWithinStyleAttribute(node) {
 const noHex = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban hard-coded colour literals in section code" },
+		docs: {
+			description: "Ban hard-coded colour literals in section code",
+			url: docsPathForRule("no-hex")
+		},
 		schema: [],
-		messages: { hardCodedColor: "`{{value}}` is a hard-coded colour — a section carries no palette of its own, or it breaks the first time another template reuses it. Fix: use a semantic token utility (e.g. `bg-surface-alt`, `text-ink`); if the value is genuinely brand decoration with no token, add it to the template's `theme.ts` palette and use the `--tr-color-<name>` utility it compiles to." }
+		messages: {
+			hardCodedColor: "`{{value}}` is a hard-coded colour — a section carries no palette of its own, or it breaks the first time another template reuses it. Fix: use one of your theme's colour utilities; if the value is genuinely brand decoration with no token yet, add it to `colors` in the template's `theme.ts` and use the `bg-<name>` / `text-<name>` utility it compiles to.",
+			hardCodedColorFunction: "`{{value}}` bakes a colour into a section — a section carries no palette of its own, or it breaks the first time another template reuses it. Fix: derive the colour from the theme instead. A `color-mix()` over theme vars is allowed (e.g. `color-mix(in srgb, var(--tr-color-primary) 80%, var(--tr-color-surface))`, or mix toward `transparent` for a translucent tint) — only a hard-coded argument makes it a violation."
+		}
 	},
 	create(context) {
 		function check(node, text) {
-			const fn = COLOR_FN.exec(text);
-			if (fn) {
+			for (const call of findColorFunctionCalls(text)) {
+				if (call.name === "color-mix" && isThemeDerivedColorMix(call.args)) continue;
 				context.report({
 					node,
-					messageId: "hardCodedColor",
-					data: { value: fn[0] }
+					messageId: "hardCodedColorFunction",
+					data: { value: call.raw }
 				});
 				return;
 			}

package/dist/eslint/rules/no-inline-style.js

@@ -1,10 +1,14 @@
+import { docsPathForRule } from "../../rules/registry.js";
 import { hasClientDirective } from "../is-client-file.js";
 
 //#region src/eslint/rules/no-inline-style.ts
 const noInlineStyle = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban the inline style prop in server-rendered section JSX" },
+		docs: {
+			description: "Ban the inline style prop in server-rendered section JSX",
+			url: docsPathForRule("no-inline-style")
+		},
 		schema: [],
 		messages: { inlineStyle: "The inline `style=` prop is banned in server-rendered section JSX — it bypasses the cascade and Tailwind's responsive prefixes. Fix: use Tailwind utility classes; for a value that only exists at runtime, move the markup into a `\"use client\"` island, where `style` is allowed." }
 	},

package/dist/eslint/rules/no-nondeterminism.js

@@ -1,3 +1,4 @@
+import { docsPathForRule } from "../../rules/registry.js";
 import { hasClientDirective } from "../is-client-file.js";
 
 //#region src/eslint/rules/no-nondeterminism.ts
@@ -10,7 +11,10 @@ const BANNED_MEMBERS = {
 const noNondeterminism = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban clock and randomness reads in server-rendered section code" },
+		docs: {
+			description: "Ban clock and randomness reads in server-rendered section code",
+			url: docsPathForRule("no-nondeterminism")
+		},
 		schema: [],
 		messages: { nondeterministic: "`{{what}}` is nondeterministic and is banned in server-rendered code — the publisher and the editor must render byte-identical HTML. Fix: compute this at fill time and pass it in as a slot value, or move the code into a `\"use client\"` island, where it runs in the browser." }
 	},

package/dist/eslint/rules/no-raw-element.js

@@ -1,3 +1,5 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/no-raw-element.ts
 const FORBIDDEN = {
 	section: "<Section>",
@@ -6,7 +8,10 @@ const FORBIDDEN = {
 const noRawElement = {
 	meta: {
 		type: "problem",
-		docs: { description: "Ban raw <section> and <img> in section JSX" },
+		docs: {
+			description: "Ban raw <section> and <img> in section JSX",
+			url: docsPathForRule("no-raw-element")
+		},
 		schema: [],
 		messages: { rawElement: "Raw `<{{tag}}>` is banned in section JSX — {{use}} carries the contract it skips. Fix: `import { {{name}} } from \"@homepages/template-kit\";` and use {{use}}." }
 	},

package/dist/eslint/rules/props-from-schema.js

@@ -1,8 +1,13 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/props-from-schema.ts
 const propsFromSchema = {
 	meta: {
 		type: "problem",
-		docs: { description: "A Renderer must import its Props type from ./schema" },
+		docs: {
+			description: "A Renderer must import its Props type from ./schema",
+			url: docsPathForRule("props-from-schema")
+		},
 		schema: [],
 		messages: { handWritten: "`{{name}}` is a hand-written props type in a Renderer — it bypasses the schema→Props inference and will drift. Fix: add `export type Props = SectionProps<typeof schema>;` to schema.ts and `import type { Props } from \"./schema.js\";` here." }
 	},

package/dist/eslint/rules/serializable-island-props.js

@@ -1,3 +1,4 @@
+import { docsPathForRule } from "../../rules/registry.js";
 import { isClientFile, resolveImportedFile } from "../is-client-file.js";
 
 //#region src/eslint/rules/serializable-island-props.ts
@@ -56,7 +57,10 @@ function inspect(node, path, out) {
 const serializableIslandProps = {
 	meta: {
 		type: "problem",
-		docs: { description: "Island props must be JSON-serializable" },
+		docs: {
+			description: "Island props must be JSON-serializable",
+			url: docsPathForRule("serializable-island-props")
+		},
 		schema: [],
 		messages: {
 			notSerializableBadType: "{{path}} is {{what}} — island props must be JSON-serializable (string, number, boolean, null, plain object, array). Fix: pass data, not behavior — an island owns its own handlers.",

package/dist/eslint/rules/slot-marker-literal.js

@@ -1,3 +1,5 @@
+import { docsPathForRule } from "../../rules/registry.js";
+
 //#region src/eslint/rules/slot-marker-literal.ts
 const KEY_ATTRS = /* @__PURE__ */ new Set([
 	"data-slot-id",
@@ -8,7 +10,10 @@ const KEY_COMPONENTS = /* @__PURE__ */ new Set(["Slot", "SlotGroup"]);
 const slotMarkerLiteral = {
 	meta: {
 		type: "problem",
-		docs: { description: "Slot markers must carry a string-literal key" },
+		docs: {
+			description: "Slot markers must carry a string-literal key",
+			url: docsPathForRule("slot-marker-literal")
+		},
 		schema: [],
 		messages: { markerNotLiteral: "`{{attr}}` must be a string literal, not an expression — the slot-marker completeness check reads this key statically, and cannot resolve a computed one (the slot would silently lose editor selection). Fix: write the key inline, e.g. `{{attr}}=\"headline\"`." }
 	},

package/dist/eslint.js

@@ -55,7 +55,7 @@ const templateKitConfig = [
 			"template-kit/no-raw-element": "error",
 			"template-kit/image-bare-needs-reason": "error",
 			"template-kit/slot-marker-literal": "error",
-			"template-kit/no-hex": "error",
+			"template-kit/no-hex": "warn",
 			"template-kit/no-css-import-from-render-path": "error"
 		}
 	},

package/dist/index.d.ts

@@ -24,7 +24,7 @@ import { SlotGroup } from "./primitives/SlotGroup.js";
 import { SlotItem } from "./primitives/SlotItem.js";
 import "./primitives/index.js";
 import { ATTR_SECTION_INSTANCE_ID, ATTR_SLOT_GROUP, ATTR_SLOT_ID, ATTR_SLOT_ITEM, ATTR_SLOT_TEXT_LEAF, ATTR_TR_ENHANCE } from "./contracts/markers.js";
-import { COLOR_ROLE_VARS, ColorRole, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, SHADOW_VARS, TYPE_STEP_VARS, TokenTheme, TokenThemeSchema, compileThemeToCss } from "./design-system/theme.js";
+import { TokenNameSchema, TokenTheme, TokenThemeSchema, compileThemeToCss } from "./design-system/theme.js";
 //#region src/index.d.ts
 /**
  * The published version of this kit.
@@ -37,4 +37,4 @@ import { COLOR_ROLE_VARS, ColorRole, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, S
  */
 declare const KIT_VERSION: string;
 //#endregion
-export { ATTR_ISLAND_ID, ATTR_ISLAND_KEY, ATTR_ISLAND_PROPS, ATTR_SECTION_INSTANCE_ID, ATTR_SLOT_GROUP, ATTR_SLOT_ID, ATTR_SLOT_ITEM, ATTR_SLOT_TEXT_LEAF, ATTR_TR_ENHANCE, type AddressParts, COLLECTIONS, COLOR_ROLE_VARS, CONTENT_SLOT_TYPES, type CollectionField, type CollectionIdKey, type CollectionOwnership, type ColorRole, ContentSlot, type ContentSlotType, type Coordinates, DECISION_TYPES, DERIVED_INPUT_FIELDS, Decision, type DecisionType, type DerivedInputName, FONT_ROLE_VARS, FORMATTER_NAMES, FillSpec, type FillSpecShape, type FixtureModule, FixtureModuleShape, type FixtureOverride, type FloorplanAssignment, type FormatterName, type FrameConfig, ISLAND_ELEMENT, Image, type ImageCollectionValue, type ImageValue, IslandComponent, IslandEditorOptions, IslandMarker, type IslandMarkerProps, IslandModule, IslandProps, IslandPropsError, KIT_VERSION, LAYOUT_VARS, OptionDef, type OptionValue, type PicturePlan, type PictureSourceSpec, type PoiRow, type PropertyFacts, RADIUS_VARS, REFERRAL_FIELDS, REFERRAL_IMAGE_FIELDS, REF_SLOT_TYPES, type RefSlotType, type ReferralField, type ReferralImageField, type ResolvedFixture, type ResponsiveImage, type ResponsiveSource, SHADOW_VARS, SLOT_TYPES, SLOT_TYPE_DESCRIPTORS, SOURCE_FIELDS, Section, SectionMeta, type SectionMetaShape, type SectionNav, type SectionProps, SectionSchema, type SectionSchemaResolved, type SectionSchemaShape, ShieldMode, Slot, SlotDef, type Slot$1 as SlotDefinition, SlotGroup, SlotGroupDef, type SlotGroupDefShape, SlotItem, type SlotType, type SlotValue, type SourceFieldContainer, type SourceFieldDescriptor, type SourceFieldName, type SourceFieldValueType, TRANSFORMS, TRANSFORM_NAMES, TYPE_STEP_VARS, TemplateManifest, type TemplateManifestShape, type TokenTheme, TokenThemeSchema, type TransformDescriptor, type TransformFn, type TransformInput, type TransformName, type TransformUnit, type UnitRow, VERIFICATION_WIDTHS, type VariantSelectorFn, type VariantsMeta, type VerificationWidth, type WritebackTarget, buildFixtureSet, buildInvariantFixtures, collectionForSlot, compileThemeToCss, defaultForSlotType, derived, deserializeIslandProps, direct, islandId, makeResolveVariants, serializeIslandProps, slotDefTypes };
+export { ATTR_ISLAND_ID, ATTR_ISLAND_KEY, ATTR_ISLAND_PROPS, ATTR_SECTION_INSTANCE_ID, ATTR_SLOT_GROUP, ATTR_SLOT_ID, ATTR_SLOT_ITEM, ATTR_SLOT_TEXT_LEAF, ATTR_TR_ENHANCE, type AddressParts, COLLECTIONS, CONTENT_SLOT_TYPES, type CollectionField, type CollectionIdKey, type CollectionOwnership, ContentSlot, type ContentSlotType, type Coordinates, DECISION_TYPES, DERIVED_INPUT_FIELDS, Decision, type DecisionType, type DerivedInputName, FORMATTER_NAMES, FillSpec, type FillSpecShape, type FixtureModule, FixtureModuleShape, type FixtureOverride, type FloorplanAssignment, type FormatterName, type FrameConfig, ISLAND_ELEMENT, Image, type ImageCollectionValue, type ImageValue, IslandComponent, IslandEditorOptions, IslandMarker, type IslandMarkerProps, IslandModule, IslandProps, IslandPropsError, KIT_VERSION, OptionDef, type OptionValue, type PicturePlan, type PictureSourceSpec, type PoiRow, type PropertyFacts, REFERRAL_FIELDS, REFERRAL_IMAGE_FIELDS, REF_SLOT_TYPES, type RefSlotType, type ReferralField, type ReferralImageField, type ResolvedFixture, type ResponsiveImage, type ResponsiveSource, SLOT_TYPES, SLOT_TYPE_DESCRIPTORS, SOURCE_FIELDS, Section, SectionMeta, type SectionMetaShape, type SectionNav, type SectionProps, SectionSchema, type SectionSchemaResolved, type SectionSchemaShape, ShieldMode, Slot, SlotDef, type Slot$1 as SlotDefinition, SlotGroup, SlotGroupDef, type SlotGroupDefShape, SlotItem, type SlotType, type SlotValue, type SourceFieldContainer, type SourceFieldDescriptor, type SourceFieldName, type SourceFieldValueType, TRANSFORMS, TRANSFORM_NAMES, TemplateManifest, type TemplateManifestShape, TokenNameSchema, type TokenTheme, TokenThemeSchema, type TransformDescriptor, type TransformFn, type TransformInput, type TransformName, type TransformUnit, type UnitRow, VERIFICATION_WIDTHS, type VariantSelectorFn, type VariantsMeta, type VerificationWidth, type WritebackTarget, buildFixtureSet, buildInvariantFixtures, collectionForSlot, compileThemeToCss, defaultForSlotType, derived, deserializeIslandProps, direct, islandId, makeResolveVariants, serializeIslandProps, slotDefTypes };

package/dist/index.js

@@ -17,7 +17,7 @@ import { Section } from "./primitives/Section.js";
 import { Slot } from "./primitives/Slot.js";
 import { SlotGroup } from "./primitives/SlotGroup.js";
 import { SlotItem } from "./primitives/SlotItem.js";
-import { COLOR_ROLE_VARS, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, SHADOW_VARS, TYPE_STEP_VARS, TokenThemeSchema, compileThemeToCss } from "./design-system/theme.js";
+import { TokenNameSchema, TokenThemeSchema, compileThemeToCss } from "./design-system/theme.js";
 
 //#region src/index.ts
 /**
@@ -32,4 +32,4 @@ import { COLOR_ROLE_VARS, FONT_ROLE_VARS, LAYOUT_VARS, RADIUS_VARS, SHADOW_VARS,
 const KIT_VERSION = version;
 
 //#endregion
-export { ATTR_ISLAND_ID, ATTR_ISLAND_KEY, ATTR_ISLAND_PROPS, ATTR_SECTION_INSTANCE_ID, ATTR_SLOT_GROUP, ATTR_SLOT_ID, ATTR_SLOT_ITEM, ATTR_SLOT_TEXT_LEAF, ATTR_TR_ENHANCE, COLLECTIONS, COLOR_ROLE_VARS, CONTENT_SLOT_TYPES, ContentSlot, DECISION_TYPES, DERIVED_INPUT_FIELDS, Decision, FONT_ROLE_VARS, FORMATTER_NAMES, FillSpec, FixtureModuleShape, ISLAND_ELEMENT, Image, IslandMarker, IslandPropsError, KIT_VERSION, LAYOUT_VARS, OptionDef, RADIUS_VARS, REFERRAL_FIELDS, REFERRAL_IMAGE_FIELDS, REF_SLOT_TYPES, SHADOW_VARS, SLOT_TYPES, SLOT_TYPE_DESCRIPTORS, SOURCE_FIELDS, Section, SectionMeta, SectionSchema, Slot, SlotDef, SlotGroup, SlotGroupDef, SlotItem, TRANSFORMS, TRANSFORM_NAMES, TYPE_STEP_VARS, TemplateManifest, TokenThemeSchema, VERIFICATION_WIDTHS, buildFixtureSet, buildInvariantFixtures, collectionForSlot, compileThemeToCss, defaultForSlotType, derived, deserializeIslandProps, direct, islandId, makeResolveVariants, serializeIslandProps, slotDefTypes };
+export { ATTR_ISLAND_ID, ATTR_ISLAND_KEY, ATTR_ISLAND_PROPS, ATTR_SECTION_INSTANCE_ID, ATTR_SLOT_GROUP, ATTR_SLOT_ID, ATTR_SLOT_ITEM, ATTR_SLOT_TEXT_LEAF, ATTR_TR_ENHANCE, COLLECTIONS, CONTENT_SLOT_TYPES, ContentSlot, DECISION_TYPES, DERIVED_INPUT_FIELDS, Decision, FORMATTER_NAMES, FillSpec, FixtureModuleShape, ISLAND_ELEMENT, Image, IslandMarker, IslandPropsError, KIT_VERSION, OptionDef, REFERRAL_FIELDS, REFERRAL_IMAGE_FIELDS, REF_SLOT_TYPES, SLOT_TYPES, SLOT_TYPE_DESCRIPTORS, SOURCE_FIELDS, Section, SectionMeta, SectionSchema, Slot, SlotDef, SlotGroup, SlotGroupDef, SlotItem, TRANSFORMS, TRANSFORM_NAMES, TemplateManifest, TokenNameSchema, TokenThemeSchema, VERIFICATION_WIDTHS, buildFixtureSet, buildInvariantFixtures, collectionForSlot, compileThemeToCss, defaultForSlotType, derived, deserializeIslandProps, direct, islandId, makeResolveVariants, serializeIslandProps, slotDefTypes };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.1.0";
+var version = "0.3.0";
 
 //#endregion
 export { version };

package/dist/primitives/Image.js

@@ -64,7 +64,7 @@ function Image({ src, alt, aspectRatio, slotId, bare, srcMobile, mobileBreakpoin
 			...responsiveImgAttrs
 		}));
 	}
-	const containerCls = ["tr-image-frame relative block w-full overflow-hidden bg-surface-alt", className].filter(Boolean).join(" ");
+	const containerCls = ["tr-image-frame relative block w-full overflow-hidden", className].filter(Boolean).join(" ");
 	const containerStyle = aspectRatio ? { aspectRatio } : void 0;
 	const slotAttrs = slotId ? { [ATTR_SLOT_ID]: slotId } : {};
 	if (!src) return /* @__PURE__ */ jsx("div", {

package/dist/rules/registry.js

@@ -0,0 +1,16 @@
+//#region src/rules/registry.ts
+/**
+* `no-hex` → `docs/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/docs/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 `docs/rules/${id}.md`;
+}
+
+//#endregion
+export { docsPathForRule };