@homepages/template-kit 0.2.0 → 0.3.0

package/dist/design-system/theme.js

@@ -1,102 +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 BODY_DEFAULTS = `body {
-  font-family: var(--tr-font-sans);
-  color: var(--tr-color-ink);
-  background: var(--tr-color-background);
-  font-size: var(--tr-text-base);
-}`;
+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, a `:root { --tr-*: … }` declaration that defines the
-* design tokens, and a `body` block that applies those tokens to the document.
-* 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 blocks = `${`:root {\n${decls.join("\n")}\n}`}\n\n${BODY_DEFAULTS}`;
-	return theme.fonts.fontFaces ? `${theme.fonts.fontFaces}\n\n${blocks}\n` : `${blocks}\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/no-hex.js

@@ -1,8 +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",
@@ -74,16 +143,19 @@ const noHex = {
 			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.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.2.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", {