@dixy-ui/themes 0.0.0-stage → 0.1.0-beta.1

package/dist/chrome.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Window chrome: the structural half of a frame. A frame recipe draws ornament
+ * art; chrome rebuilds the window itself out of existing Card parts:
+ *
+ *   Card.Header                      → title bar   (titlebar)
+ *   Card.Root / Dialog popup         → window edge (edge, corners)
+ *   Card.Content directly after it   → display well (well)
+ *
+ * Everything is CSS on existing elements and decorative pseudo-elements
+ * (`content:""`, so nothing is announced). No markup, refs, events, focus order
+ * or semantics change, and every chrome colour is either a palette token or a
+ * fixed dark/light ground with a matching ink, so text keeps its contrast.
+ */
+export declare const titlebarStyles: readonly ["none", "grip", "caption", "gradient", "tab", "glass", "chrome"];
+export declare const edgeStyles: readonly ["line", "bevel", "double", "pill", "stepped"];
+export declare const wellStyles: readonly ["none", "lcd", "recessed", "tinted", "paper", "glass", "sunken"];
+export declare const cornerStyles: readonly ["inherit", "pixel", "notched", "round"];
+/** The LCD well's fixed ground, shared by its CSS and its contrast traits. */
+export declare const LCD_GROUND = "#060906";
+/**
+ * What each well paints behind its content, so tools can reason about it without parsing CSS.
+ * - `surface`: no ground of its own; content sits on the card surface.
+ * - `canvas`: repaints to the palette canvas, so it follows the appearance.
+ * - `fixed`: a ground that stays put in both appearances, with its own ink (accent mixed with white
+ *   at `inkAccent`%). `tone` says which appearance it belongs to; `substitute` is the closest
+ *   appearance-following well, for tools that need the look to hold in both appearances.
+ */
+export type WellGround = {
+    readonly kind: "surface";
+} | {
+    readonly kind: "canvas";
+} | {
+    readonly kind: "fixed";
+    readonly color: string;
+    readonly tone: "light" | "dark";
+    readonly inkAccent: number;
+    readonly substitute: WellStyle;
+};
+export declare const wellGrounds: {
+    readonly none: {
+        readonly kind: "surface";
+    };
+    readonly lcd: {
+        readonly kind: "fixed";
+        readonly color: "#060906";
+        readonly tone: "dark";
+        readonly inkAccent: 70;
+        readonly substitute: "recessed";
+    };
+    readonly recessed: {
+        readonly kind: "canvas";
+    };
+    readonly tinted: {
+        readonly kind: "canvas";
+    };
+    readonly paper: {
+        readonly kind: "canvas";
+    };
+    readonly glass: {
+        readonly kind: "canvas";
+    };
+    readonly sunken: {
+        readonly kind: "canvas";
+    };
+};
+export type TitlebarStyle = (typeof titlebarStyles)[number];
+export type EdgeStyle = (typeof edgeStyles)[number];
+export type WellStyle = (typeof wellStyles)[number];
+export type CornerStyle = (typeof cornerStyles)[number];
+export interface ThemeChrome {
+    readonly titlebar: TitlebarStyle;
+    readonly edge: EdgeStyle;
+    readonly well: WellStyle;
+    readonly corners: CornerStyle;
+}
+/** No chrome: compiles to nothing, so migrated documents keep their look. */
+export declare const defaultChrome: ThemeChrome;
+export declare const chromeLabels: {
+    readonly titlebar: {
+        readonly none: "None";
+        readonly grip: "Grip strip (media player)";
+        readonly caption: "Caption bar (classic desktop)";
+        readonly gradient: "Gradient header (social profile)";
+        readonly tab: "Paper tab";
+        readonly glass: "Glass strip (round lights)";
+        readonly chrome: "Brushed chrome (millennium)";
+    };
+    readonly edge: {
+        readonly line: "Single line";
+        readonly bevel: "Pixel bevel stack";
+        readonly double: "Double rule";
+        readonly pill: "Thick two-tone";
+        readonly stepped: "Stepped inlay";
+    };
+    readonly well: {
+        readonly none: "None";
+        readonly lcd: "LCD display";
+        readonly recessed: "Recessed with screws";
+        readonly tinted: "Tinted panel";
+        readonly paper: "Ruled paper";
+        readonly glass: "Frosted glass";
+        readonly sunken: "Soft sunken";
+    };
+    readonly corners: {
+        readonly inherit: "From radius";
+        readonly pixel: "Pixel square";
+        readonly notched: "Notched";
+        readonly round: "Big round";
+    };
+};
+type Scope = (parts: string, state?: string) => string;
+/** Rules for the components layer. `C` scopes parts to this skin inside this theme. */
+export declare function chromeCSS(c: ThemeChrome, theme: string, C: Scope): string;
+export {};

package/dist/chrome.js

@@ -0,0 +1,247 @@
+/**
+ * Window chrome: the structural half of a frame. A frame recipe draws ornament
+ * art; chrome rebuilds the window itself out of existing Card parts:
+ *
+ *   Card.Header                      → title bar   (titlebar)
+ *   Card.Root / Dialog popup         → window edge (edge, corners)
+ *   Card.Content directly after it   → display well (well)
+ *
+ * Everything is CSS on existing elements and decorative pseudo-elements
+ * (`content:""`, so nothing is announced). No markup, refs, events, focus order
+ * or semantics change, and every chrome colour is either a palette token or a
+ * fixed dark/light ground with a matching ink, so text keeps its contrast.
+ */
+export const titlebarStyles = [
+    "none",
+    "grip",
+    "caption",
+    "gradient",
+    "tab",
+    "glass",
+    "chrome",
+];
+export const edgeStyles = [
+    "line",
+    "bevel",
+    "double",
+    "pill",
+    "stepped",
+];
+export const wellStyles = [
+    "none",
+    "lcd",
+    "recessed",
+    "tinted",
+    "paper",
+    "glass",
+    "sunken",
+];
+export const cornerStyles = ["inherit", "pixel", "notched", "round"];
+/** The LCD well's fixed ground, shared by its CSS and its contrast traits. */
+export const LCD_GROUND = "#060906";
+export const wellGrounds = {
+    none: { kind: "surface" },
+    lcd: {
+        kind: "fixed",
+        color: LCD_GROUND,
+        tone: "dark",
+        inkAccent: 70,
+        substitute: "recessed",
+    },
+    recessed: { kind: "canvas" },
+    tinted: { kind: "canvas" },
+    paper: { kind: "canvas" },
+    glass: { kind: "canvas" },
+    sunken: { kind: "canvas" },
+};
+/** No chrome: compiles to nothing, so migrated documents keep their look. */
+export const defaultChrome = {
+    titlebar: "none",
+    edge: "line",
+    well: "none",
+    corners: "inherit",
+};
+export const chromeLabels = {
+    titlebar: {
+        none: "None",
+        grip: "Grip strip (media player)",
+        caption: "Caption bar (classic desktop)",
+        gradient: "Gradient header (social profile)",
+        tab: "Paper tab",
+        glass: "Glass strip (round lights)",
+        chrome: "Brushed chrome (millennium)",
+    },
+    edge: {
+        line: "Single line",
+        bevel: "Pixel bevel stack",
+        double: "Double rule",
+        pill: "Thick two-tone",
+        stepped: "Stepped inlay",
+    },
+    well: {
+        none: "None",
+        lcd: "LCD display",
+        recessed: "Recessed with screws",
+        tinted: "Tinted panel",
+        paper: "Ruled paper",
+        glass: "Frosted glass",
+        sunken: "Soft sunken",
+    },
+    corners: {
+        inherit: "From radius",
+        pixel: "Pixel square",
+        notched: "Notched",
+        round: "Big round",
+    },
+};
+const ACCENT = "var(--dixy-color-background-action-primary)";
+const EDGE = "var(--dixy-skin-edge)";
+const SURFACE = "var(--dixy-skin-surface)";
+const CANVAS = "var(--dixy-color-background-canvas)";
+/** Wells that repaint to the canvas also reset text to its ink: a solid card's on-accent colour would vanish there. */
+const GROUNDED = "color:var(--dixy-color-text-primary);";
+const mix = (color, amount, other = "transparent") => `color-mix(in srgb,${color} ${amount}%,${other})`;
+/** Sets every text role inside a chrome part, so nested parts and app copy follow its ground. */
+const ink = (color, muted = color) => `color:${color}; --dixy-color-text-primary:${color}; --dixy-color-text-secondary:${color}; --dixy-color-text-muted:${muted};`;
+/** Three small window buttons, painted as six gradient layers (shadow + face per button). */
+function windowButtons(face, shade, size) {
+    const step = size + 2;
+    const layers = [0, 1, 2].flatMap((i) => [
+        `linear-gradient(${face},${face}) ${i * step}px 0/${size - 1}px ${size - 1}px no-repeat`,
+        `linear-gradient(${shade},${shade}) ${i * step + 1}px 1px/${size - 1}px ${size - 1}px no-repeat`,
+    ]);
+    return layers.join(",");
+}
+function titlebarCSS(style, bar, theme) {
+    if (style === "none")
+        return "";
+    const common = `
+  ${bar} { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:2px; margin:calc(var(--dixy-chrome-gap,0px) - var(--dixy-skin-pad-top,24px)) calc(var(--dixy-chrome-gap,0px) - var(--dixy-skin-pad-inline,24px)) 14px; padding:4px 8px; min-block-size:24px; border-radius:var(--dixy-chrome-bar-radius,0px) var(--dixy-chrome-bar-radius,0px) 0 0; }
+  ${bar} > * { margin:0; }
+  ${bar} :is(h1,h2,h3,h4,.dixy-card-title) { font-size:.875rem; line-height:1.3; }
+  ${theme} .dixy-signal-rail { display:none; }
+  @media (forced-colors:active) { ${bar} { background:Canvas; border-block-end:1px solid CanvasText; } ${bar}::before,${bar}::after { display:none; } }`;
+    const buttons = (face, shade, size = 10) => `${bar}::after { content:""; flex:none; margin-inline-start:auto; inline-size:${size * 3 + 4}px; block-size:${size}px; background:${windowButtons(face, shade, size)}; }`;
+    switch (style) {
+        case "grip": {
+            // Media-player strip: grip lines either side of the label, buttons on the right.
+            const ground = mix(EDGE, 35, "#090c0a");
+            const lit = mix(ACCENT, 62, "#ffffff");
+            const face = mix(EDGE, 30, "#c9cfcb");
+            const grip = `repeating-linear-gradient(180deg,${mix(ACCENT, 55)} 0 1px,transparent 1px 3px)`;
+            return `${common}
+  ${bar} { flex-wrap:nowrap; background-color:${ground}; background-image:linear-gradient(180deg,#ffffff1c,transparent 60%); box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #000; ${ink(lit)} font-family:var(--dixy-font-title-md-family,var(--dixy-font-mono)); letter-spacing:.14em; text-transform:uppercase; }
+  ${bar} > * { flex:0 1 auto; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  ${bar}::before { content:""; flex:1 1 12px; min-inline-size:12px; block-size:8px; background:${grip}; }
+  ${bar}::after { content:""; flex:1 1 52px; min-inline-size:52px; block-size:9px; background:${[0, 1, 2].map((i) => `linear-gradient(${face},${face}) right ${i * 11 + 1}px top 0/8px 8px no-repeat,linear-gradient(#000,#000) right ${i * 11}px top 1px/8px 8px no-repeat`).join(",")},${grip} 0 0/calc(100% - 40px) 100% no-repeat; }`;
+        }
+        case "caption":
+            // Classic desktop caption: dark-to-light accent gradient, bold white title, three bevelled buttons.
+            return `${common}
+  ${bar} { background-image:linear-gradient(90deg,${mix(ACCENT, 35, "#06124a")},${mix(ACCENT, 42, "#0a1540")}); ${ink("#ffffff", "#e8ecff")} font-weight:700; padding-inline:6px 4px; }
+  ${bar} :is(h1,h2,h3,h4,.dixy-card-title) { font-weight:700; }
+  ${buttons("#d4d0c8", "#404040", 12)}`;
+        case "gradient":
+            // Social-profile header: glossy blue-to-violet band with a soft top light.
+            return `${common}
+  ${bar} { background-image:linear-gradient(180deg,#ffffff30,transparent 55%),linear-gradient(100deg,${mix("#3456c4", 85, ACCENT)},${mix("#7446c9", 85, ACCENT)}); ${ink("#ffffff", "#eef0ff")} font-weight:700; padding:6px 12px; min-block-size:30px; }`;
+        case "glass": {
+            // A light-catching strip with three round lights; text stays on palette tokens.
+            const dot = (x, color) => `radial-gradient(circle,${color} 0 3.5px,${mix(EDGE, 60)} 4px,transparent 4.5px) right ${x}px center/10px 10px no-repeat`;
+            return `${common}
+  ${bar} { background-image:linear-gradient(180deg,${mix("#ffffff", 34)},${mix("#ffffff", 6)}); border-block-end:1px solid ${mix(EDGE, 45)}; box-shadow:inset 0 1px 0 ${mix("#ffffff", 60)}; padding-inline:12px 8px; }
+  ${bar}::after { content:""; flex:none; margin-inline-start:auto; inline-size:34px; block-size:10px; background:${dot(0, ACCENT)},${dot(12, mix(ACCENT, 50, SURFACE))},${dot(24, mix(EDGE, 70, SURFACE))}; }`;
+        }
+        case "chrome":
+            // Brushed light metal with a fixed dark ink (about 9:1) and pill buttons tinted by the accent.
+            return `${common}
+  ${bar} { background-image:repeating-linear-gradient(90deg,#ffffff1a 0 1px,transparent 1px 3px),linear-gradient(180deg,#eef2f4,#c3ccd2 55%,#aab5bc); border-block-end:1px solid #6f7d86; box-shadow:inset 0 1px 0 #fff; ${ink("#0d1418", "#26333b")} font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
+  ${bar}::after { content:""; flex:none; margin-inline-start:auto; inline-size:46px; block-size:10px; background:${[0, 16, 32].map((x) => `radial-gradient(5px 4px at 50% 50%,${mix(ACCENT, 80, "#ffffff")} 0 3px,#4f5d66 3.5px,transparent 4.5px) right ${x}px center/14px 10px no-repeat`).join(",")}; }`;
+        case "tab":
+            // A paper label hanging from the top edge, with a stitched rule.
+            return `${common}
+  ${bar} { inline-size:fit-content; max-inline-size:100%; margin-inline:calc(var(--dixy-skin-pad-inline,24px) * -1 + 18px) auto; padding:7px 16px 10px; background-color:${CANVAS}; background-image:repeating-linear-gradient(90deg,${mix(EDGE, 55)} 0 4px,transparent 4px 7px); background-size:calc(100% - 18px) 1px; background-position:9px calc(100% - 4px); background-repeat:no-repeat; border:1px solid ${mix(EDGE, 70)}; border-block-start:0; border-radius:0 0 10px 10px; box-shadow:0 2px 0 ${mix(EDGE, 22)}; }`;
+    }
+}
+function edgeCSS(style, frame) {
+    const relief = "var(--dixy-skin-panel-relief)";
+    const hi = (n) => mix("#ffffff", n, SURFACE);
+    const lo = (n) => mix("#000000", n, SURFACE);
+    switch (style) {
+        case "line":
+            return "";
+        case "bevel":
+            // Four layers: dark outline, then light/dark pairs that read as a raised pixel window.
+            return `${frame} { border:1px solid ${mix(EDGE, 60, "#000")}; --dixy-chrome-gap:3px; box-shadow:inset 1px 1px 0 ${hi(60)},inset -1px -1px 0 ${lo(70)},inset 2px 2px 0 ${hi(25)},inset -2px -2px 0 ${lo(35)},${relief}; }`;
+        case "double":
+            return `${frame} { border:1px solid ${EDGE}; box-shadow:0 0 0 3px ${SURFACE},0 0 0 4px ${EDGE},${relief}; }`;
+        case "pill":
+            return `${frame} { border:3px solid ${mix(ACCENT, 45, SURFACE)}; box-shadow:inset 0 0 0 2px ${hi(70)},0 0 0 1px ${mix(EDGE, 70)},${relief}; }`;
+        case "stepped":
+            return `${frame} { border:1px solid ${EDGE}; box-shadow:inset 0 0 0 4px ${SURFACE},inset 0 0 0 5px ${EDGE},inset 0 0 0 9px ${SURFACE},inset 0 0 0 10px ${mix(EDGE, 55)},${relief}; }`;
+    }
+}
+function cornerCSS(style, frame) {
+    switch (style) {
+        case "inherit":
+            return "";
+        case "pixel":
+            return `${frame} { border-radius:0; --dixy-chrome-bar-radius:0px; }`;
+        case "notched":
+            // Clip-path also clips outer shadows, so notched windows lean on inset relief.
+            return `${frame} { border-radius:0; --dixy-chrome-bar-radius:0px; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); }`;
+        case "round":
+            return `${frame} { border-radius:16px; --dixy-chrome-bar-radius:13px; }`;
+    }
+}
+function screw(x, y) {
+    return `radial-gradient(circle at 50% 50%,#ffffffcc 0 1px,#9a9f9c 1.5px 2.5px,#4d524f 3px,transparent 3.5px) ${x} ${y}/8px 8px no-repeat`;
+}
+function wellCSS(style, well) {
+    const common = `${well} { position:relative; padding:12px 14px; }`;
+    switch (style) {
+        case "none":
+            return "";
+        case "lcd": {
+            // A display stays dark in both appearances. It re-points text, neutral-button and border tokens at its own ink,
+            // so ghost/outline buttons inside it stay readable in a light theme too.
+            const { color: ground, inkAccent } = wellGrounds.lcd;
+            const lit = mix(ACCENT, inkAccent, "#ffffff");
+            return `${common}
+  ${well} { background-color:${ground}; background-image:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px); border:1px solid #000; border-radius:2px; box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #ffffff24,0 1px 0 #ffffff12; ${ink(lit, mix(lit, 72, ground))} --dixy-color-background-canvas:${ground}; --dixy-color-background-surface:#0d120d; --dixy-color-border-default:${mix(lit, 35)}; --dixy-button-secondary-text:${lit}; --dixy-button-secondary-soft:${mix(lit, 14)}; --dixy-button-secondary-soft-hover:${mix(lit, 22)}; --dixy-button-secondary-soft-pressed:${mix(lit, 28)}; }
+  ${well} :is(h1,h2,h3,h4,.dixy-card-title) { text-shadow:0 0 8px ${mix(ACCENT, 45)}; }
+  @media (prefers-contrast:more) { ${well} :is(h1,h2,h3,h4,.dixy-card-title) { text-shadow:none; } }`;
+        }
+        case "recessed":
+            return `${common}
+  ${well} { ${GROUNDED} padding:16px 20px; background:${screw("5px", "5px")},${screw("right 5px", "5px")},${screw("5px", "bottom 5px")},${screw("right 5px", "bottom 5px")},${CANVAS}; border:1px solid ${mix(EDGE, 70)}; border-radius:6px; box-shadow:inset 0 2px 4px #0003,inset 0 -1px 0 #ffffff55; }`;
+        case "tinted":
+            return `${common}
+  ${well} { ${GROUNDED} background-color:${mix(ACCENT, 9, CANVAS)}; border:1px solid ${mix(ACCENT, 28)}; border-radius:10px; }
+  ${well} :is(ul,ol,[role="list"],tbody) > :nth-child(even),${well} > .dixy-button[data-variant="ghost"]:nth-of-type(even):not(:hover) { background-color:${mix(ACCENT, 8)}; }`;
+        case "glass":
+            // Translucent panel: the palette's own text stays readable on the surface beneath.
+            return `${common}
+  ${well} { ${GROUNDED} background-color:${mix(CANVAS, 62)}; background-image:linear-gradient(160deg,${mix("#ffffff", 22)},transparent 45%); border:1px solid ${mix("#ffffff", 40, "transparent")}; border-radius:14px; box-shadow:inset 0 1px 0 ${mix("#ffffff", 55)},0 1px 2px ${mix(EDGE, 25)}; }
+  @media (prefers-reduced-transparency:reduce),(prefers-contrast:more) { ${well} { background-color:${CANVAS}; background-image:none; } }`;
+        case "sunken":
+            return `${common}
+  ${well} { ${GROUNDED} background-color:${CANVAS}; border-radius:16px; box-shadow:inset 0 3px 8px ${mix(EDGE, 40)},inset 0 -2px 0 ${mix("#ffffff", 50)}; }`;
+        case "paper":
+            return `${common}
+  ${well} { ${GROUNDED} background-color:${CANVAS}; background-image:repeating-linear-gradient(180deg,transparent 0 23px,${mix(EDGE, 22)} 23px 24px); background-position:0 10px; border-inline-start:2px solid ${mix("var(--dixy-color-border-danger)", 45)}; border-radius:2px; }`;
+    }
+}
+/** Rules for the components layer. `C` scopes parts to this skin inside this theme. */
+export function chromeCSS(c, theme, C) {
+    const frame = C(".dixy-card,.dixy-dialog-popup");
+    const card = C(".dixy-card");
+    return [
+        edgeCSS(c.edge, frame),
+        cornerCSS(c.corners, frame),
+        titlebarCSS(c.titlebar, `${card} > .dixy-card-header`, theme),
+        wellCSS(c.well, `${card} > .dixy-card-header + .dixy-card-content`),
+    ]
+        .filter((part) => part.trim())
+        .join("\n  ");
+}

package/dist/clay/ornament.d.ts

@@ -0,0 +1,3 @@
+import type { OrnamentProps } from "../ornament-parts.js";
+export declare function ClayOrnament(props: OrnamentProps): import("react").JSX.Element;
+export default ClayOrnament;

package/dist/clay/ornament.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { paintClay } from "../organic-paint.js";
+import { OrganicOrnament } from "../organic-ornament.js";
+export function ClayOrnament(props) {
+    return (_jsx(OrganicOrnament, { ...props, kind: "cushion", skin: "clay", painter: paintClay }));
+}
+export default ClayOrnament;

package/dist/compile-css.d.ts

@@ -0,0 +1,3 @@
+import type { ResolvedThemeRecipe } from "./resolve.ts";
+/** Material paint and frame geometry are emitted from independent inputs. */
+export declare function compileThemeCSS(m: ResolvedThemeRecipe): string;

package/dist/compile-css.js

@@ -0,0 +1,133 @@
+import { organicOrnamentVariables } from "./organic-css.js";
+import { organicFrameRecipes, isOrganicFrame } from "./organic-settings.js";
+import { createColorPalette, colorThemeVariables } from "@dixy-ui/tokens";
+import { frameStyles } from "./frame-styles.js";
+import { themeFoundationStyle } from "./foundations.js";
+import { characterComponentCSS, characterTokenCSS } from "./character.js";
+const surfaces = ".dixy-card,.dixy-box,.dixy-dialog-popup,.dixy-alert-dialog-popup,.dixy-drawer-popup,.dixy-popover-popup,.dixy-preview-card-popup,.dixy-tooltip-popup,.dixy-select-popup,.dixy-combobox-popup,.dixy-autocomplete-popup,.dixy-menu-popup,.dixy-context-menu-popup,.dixy-navigation-menu-popup,.dixy-toast-root,.dixy-alert,.dixy-list-box,.dixy-calendar,.dixy-range-calendar";
+const overlays = ".dixy-dialog-popup,.dixy-alert-dialog-popup,.dixy-drawer-popup,.dixy-popover-popup,.dixy-preview-card-popup,.dixy-tooltip-popup,.dixy-select-popup,.dixy-combobox-popup,.dixy-autocomplete-popup,.dixy-menu-popup,.dixy-context-menu-popup,.dixy-navigation-menu-popup";
+const fields = ".dixy-input,.dixy-textarea,.dixy-native-select,.dixy-select-trigger,.dixy-input-group,.dixy-combobox-input-group,.dixy-autocomplete-input-group,.dixy-number-field-group,.dixy-otp-field-input";
+const tracks = ".dixy-slider-track,.dixy-progress-track,.dixy-meter-track";
+const fills = ".dixy-slider-indicator,.dixy-progress-indicator,.dixy-meter-indicator";
+/** Material paint and frame geometry are emitted from independent inputs. */
+export function compileThemeCSS(m) {
+    const theme = `.dixy-theme[data-dixy-skin="${m.id}"]`;
+    const S = (parts, state = "") => `:is(${parts})[data-dixy-skin="${m.id}"]${state}`;
+    const guard = ":not([data-dixy-material-override]):not(:where([data-dixy-material-override]) *)";
+    const own = (parts, state = "") => S(parts, guard + state);
+    const actions = ':is([data-variant="solid"],[data-variant="soft"],[data-variant="outline"]):not([data-disabled])';
+    const p = m.parameters;
+    const style = Object.entries(themeFoundationStyle(m.foundations))
+        .map(([key, value]) => `${key === "fontFamily" ? "font-family" : key}:${value};`)
+        .join("\n");
+    const organic = isOrganicFrame(m.frame) ? organicFrameRecipes[m.frame] : null;
+    const ornamentVariables = Object.entries(organicOrnamentVariables(m.frame, m.ornament))
+        .map(([key, value]) => `${key}:${value};`)
+        .join(" ");
+    const colors = (appearance) => organic
+        ? organic[appearance]
+            .map((color, i) => `--dixy-organic-${["a", "b", "c", "d"][i]}:${color};`)
+            .join(" ")
+        : "";
+    const frameWidth = m.frame === "none" ? 0 : p.width;
+    const radius = (role) => p.cornerVariation === 0
+        ? `calc(var(--dixy-radius-${role}) * ${p.cornerScale})`
+        : [1, 3, 0.5, 2.5]
+            .map((factor) => `calc(var(--dixy-radius-${role}) * ${p.cornerScale * (1 + p.cornerVariation * factor)})`)
+            .join(" ");
+    const palette = m.foundations.customAccent
+        ? createColorPalette([
+            m.foundations.lightness,
+            m.foundations.chroma,
+            m.foundations.hue,
+        ])
+        : null;
+    const paletteCSS = palette
+        ? ["light", "dark"]
+            .map((appearance) => `${theme}[data-appearance="${appearance}"] { ${Object.entries(colorThemeVariables(palette, appearance))
+            .map(([key, value]) => `${key}:${value};`)
+            .join(" ")} }`)
+            .join("\n")
+        : "";
+    // Card glass blurs and saturates whatever sits behind a translucent surface tint.
+    const glass = m.backdropBlur > 0 || m.backdropSaturate > 100
+        ? `blur(${m.backdropBlur}px) saturate(${m.backdropSaturate}%)`
+        : "";
+    const borderStyle = m.frame === "rails" ? "ridge" : "solid";
+    // Character rules sit after material rules and carry the theme ancestor, so they win over paint defaults.
+    const C = (parts, state = "") => `${theme} :is(${parts})[data-dixy-skin="${m.id}"]${state}`;
+    return `
+@layer dixy.tokens, dixy.components;
+@layer dixy.tokens {
+  ${theme} {
+    ${style}
+    --dixy-skin-edge:${m.edge};
+    ${ornamentVariables}
+    ${colors("light")}
+    ${m.inkTint ? `--dixy-color-text-primary:color-mix(in srgb,var(--dixy-color-base-12) ${100 - m.inkTint * 100}%,${m.tint[1]});` : ""}
+    --dixy-skin-surface:color-mix(in srgb,var(--dixy-color-background-surface-raised) ${m.surfaceMix}%,${m.tint[0]});
+    --dixy-skin-ground:color-mix(in srgb,var(--dixy-color-background-canvas) 65%,${m.tint[2]});
+    --dixy-skin-card-inset:${p.paddingTop}px ${p.paddingInline}px ${p.paddingBottom}px;
+    --dixy-skin-pad-top:${p.paddingTop}px;
+    --dixy-skin-pad-inline:${p.paddingInline}px;
+    --dixy-skin-frame-inset:${m.frame === "rails" ? `${p.inset}px 0 0` : `${p.inset}px`};
+    --dixy-skin-frame-width:${frameWidth}px;
+    --dixy-skin-finish:linear-gradient(${m.lightAngle}deg,rgb(255 255 255 / ${m.sheen * 0.3}),transparent 42%),${m.finish};
+    --dixy-skin-grain:${m.grain};
+    --dixy-skin-grain-size:${4 * m.textureScale}px;
+    --dixy-skin-paint:var(--dixy-skin-grain),var(--dixy-skin-finish);
+    --dixy-skin-canvas:${m.canvas};
+    --dixy-skin-authored-shadow:${m.shadow};
+    --dixy-skin-shadow:var(--dixy-skin-depth-shadow,var(--dixy-skin-authored-shadow));
+    --dixy-skin-inset:${m.inset};
+    --dixy-skin-control-edge:inset 0 1px 0 rgb(255 255 255 / ${0.1 + m.sheen * 0.5}),inset 0 -1px 0 #0002;
+    --dixy-skin-cushion:inset 0 ${m.cushion * 3}px ${m.cushion * 5}px #ffffff66,inset 0 -${m.cushion * 5}px ${m.cushion * 8}px color-mix(in srgb,var(--dixy-skin-edge) ${m.cushion * 40}%,transparent),var(--dixy-skin-cushion-elevation);
+    --dixy-skin-cushion-cast:0 ${m.cushion * 10}px ${m.cushion * 14}px color-mix(in srgb,var(--dixy-skin-edge) ${m.cushion * 28}%,transparent);
+    --dixy-skin-panel-relief:${m.cushion ? "var(--dixy-skin-cushion)," : ""}var(--dixy-skin-shadow);
+    --dixy-skin-control-relief:${m.cushion ? "var(--dixy-skin-cushion)," : ""}var(--dixy-skin-control-edge),var(--dixy-skin-shadow);
+    --dixy-skin-thumb:${m.thumb};
+    --dixy-skin-mark-opacity:1;
+    ${characterTokenCSS(m.character)}
+  }
+  ${theme}[data-appearance="dark"] { ${colors("dark")} --dixy-skin-selected:var(--dixy-skin-finish); ${m.inkTint ? `--dixy-color-text-primary:color-mix(in srgb,var(--dixy-color-base-12) ${100 - m.inkTint * 100}%,${m.tint[0]});` : ""} --dixy-skin-edge:${m.darkEdge}; ${m.darkCanvas ? `--dixy-skin-canvas:${m.darkCanvas};` : ""} --dixy-skin-surface:color-mix(in srgb,var(--dixy-color-background-surface-raised) ${m.darkSurfaceMix}%,${m.tint[1]}); --dixy-skin-ground:color-mix(in srgb,var(--dixy-color-background-canvas) 65%,${m.tint[1]}); }
+  ${theme}[data-relief="2"] { --dixy-skin-shadow:var(--dixy-skin-depth-shadow,var(--dixy-skin-authored-shadow)),0 10px 18px #0002; }
+  ${theme}[data-relief="0"],${theme}[data-effects="reduced"] { --dixy-skin-shadow:none; --dixy-skin-inset:none; --dixy-skin-control-edge:none; --dixy-skin-panel-relief:none; --dixy-skin-control-relief:none; }
+  ${theme}[data-effects="reduced"] { --dixy-skin-paint:none; --dixy-skin-finish:none; --dixy-skin-canvas:none; --dixy-skin-thumb:none; --dixy-skin-mark-opacity:0; }
+  ${theme}[data-ornament="quiet"] { --dixy-skin-mark-opacity:0; }
+  ${paletteCSS}
+}
+@layer dixy.components {
+  ${theme} { position:relative; isolation:isolate; }
+  ${theme}:not(.dixy-portal-scope) { background-color:var(--dixy-skin-ground); background-image:var(--dixy-skin-canvas); }
+  ${S(surfaces)} { position:relative; border-radius:${radius("card")}; }
+  ${S(overlays)} { border-radius:${radius("overlay")}; }
+  ${S(".dixy-card,.dixy-dialog-popup")} { padding:var(--dixy-skin-card-inset); border:${frameWidth}px ${borderStyle} var(--dixy-skin-edge); }
+  ${own(surfaces)} { background-image:var(--dixy-skin-paint); background-size:var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),100% 100%,100% 100%,100% 100%; box-shadow:var(--dixy-skin-panel-relief); }
+  ${own(surfaces, ':not([data-variant="solid"]):not([data-variant="soft"])')} { background-color:var(--dixy-skin-surface); }
+  ${S(fields)} { border-radius:calc(var(--dixy-radius-control) * ${p.cornerScale}); }
+  ${own(fields)} { border-width:var(--dixy-input-border-width); border-color:var(--dixy-skin-edge); background-image:var(--dixy-skin-paint); background-color:var(--dixy-color-background-canvas); background-size:var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),100% 100%,100% 100%,100% 100%; box-shadow:var(--dixy-skin-inset); }
+  ${own(".dixy-button", actions)} { border-width:var(--dixy-button-border-width); border-color:var(--dixy-skin-edge); border-radius:calc(var(--dixy-shape-control) * ${p.cornerScale}); background-image:var(--dixy-skin-finish); box-shadow:var(--dixy-skin-control-relief); }
+  ${m.tintActions ? `${own(".dixy-button", '[data-variant="solid"][data-color="accent"]:not([data-disabled])')} { background-color:var(--dixy-skin-surface); color:var(--dixy-color-text-action-primary); }` : ""}
+  ${own(".dixy-button", actions + ":active")} { box-shadow:var(--dixy-skin-inset); }
+  ${own(".dixy-tabs-list")} { background-color:var(--dixy-color-background-canvas); border:1px solid var(--dixy-skin-edge); box-shadow:var(--dixy-skin-inset); }
+  ${own(".dixy-tabs-indicator")} { background-image:var(--dixy-skin-finish); box-shadow:var(--dixy-skin-control-relief); border:1px solid var(--dixy-skin-edge); }
+  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
+  ${theme} .dixy-toggle-group:is([data-attached],[data-segmented])${guard} { background-color:var(--dixy-color-background-canvas); border:1px solid var(--dixy-skin-edge); box-shadow:var(--dixy-skin-inset); }
+  ${own(".dixy-toggle", ':not([data-variant="solid"])[data-pressed]:not([data-disabled])')} { background-color:var(--dixy-color-background-surface-raised); background-image:var(--dixy-skin-selected,var(--dixy-skin-thumb)); box-shadow:var(--dixy-skin-control-relief); border-color:var(--dixy-skin-edge); color:var(--dixy-color-text-primary); }
+  ${own(tracks)} { border:1px solid var(--dixy-skin-edge); background-color:var(--dixy-color-background-surface); box-shadow:var(--dixy-skin-inset); }
+  ${own(fills)} { background-image:var(--dixy-skin-finish); }
+  ${own(".dixy-switch-root,.dixy-checkbox-root,.dixy-radio-root")}::before { box-shadow:var(--dixy-skin-inset); }
+  ${own(".dixy-checkbox-root,.dixy-radio-root", "[data-checked]")}::before { background-image:var(--dixy-skin-finish); }
+  ${own(".dixy-switch-thumb")} { background-image:var(--dixy-skin-thumb); box-shadow:var(--dixy-skin-control-relief); border:1px solid var(--dixy-skin-edge); }
+  ${own(".dixy-slider-thumb")}::before { background-image:var(--dixy-skin-thumb); box-shadow:var(--dixy-skin-control-relief); border:1px solid var(--dixy-skin-edge); }
+  ${frameStyles(m, theme)}
+  ${characterComponentCSS(m.character, theme, C)}
+  ${glass ? `@supports(backdrop-filter:blur(1px)) { ${own(surfaces)} { backdrop-filter:${glass}; -webkit-backdrop-filter:${glass}; } }` : ""}
+  @supports(backdrop-filter:blur(8px)) { ${theme}[data-effects="backdrop"] > .dixy-skin-backdrop { backdrop-filter:blur(8px); } }
+  @media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
+    ${theme} { --dixy-skin-paint:none; --dixy-skin-finish:none; --dixy-skin-canvas:none; --dixy-skin-thumb:none; --dixy-skin-shadow:none; --dixy-skin-inset:none; --dixy-skin-panel-relief:none; --dixy-skin-control-relief:none; }
+    ${theme} > .dixy-skin-backdrop, ${S(surfaces)} { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
+  }
+}
+`;
+}

package/dist/deco/ornament.d.ts

@@ -0,0 +1,3 @@
+import type { OrnamentProps } from "../ornament-parts.js";
+export declare function DecoOrnament(props: OrnamentProps): import("react").JSX.Element;
+export default DecoOrnament;

package/dist/deco/ornament.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { paintBrass } from "../organic-paint.js";
+import { OrganicOrnament } from "../organic-ornament.js";
+export function DecoOrnament(props) {
+    return (_jsx(OrganicOrnament, { ...props, kind: "deco", skin: "deco", painter: paintBrass }));
+}
+export default DecoOrnament;

package/dist/diwali/ornament.d.ts

@@ -0,0 +1,3 @@
+import type { OrnamentProps } from "../ornament-parts.js";
+export declare function DiwaliOrnament(props: OrnamentProps): import("react").JSX.Element;
+export default DiwaliOrnament;

package/dist/diwali/ornament.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { paintRangoli } from "../organic-paint-launch.js";
+import { OrganicOrnament } from "../organic-ornament.js";
+export function DiwaliOrnament(props) {
+    return (_jsx(OrganicOrnament, { ...props, kind: "rangoli", skin: "diwali", painter: paintRangoli }));
+}
+export default DiwaliOrnament;