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

package/dist/forest/ornament.d.ts

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

package/dist/forest/ornament.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { paintForest } from "../organic-paint.js";
+import { OrganicOrnament } from "../organic-ornament.js";
+export function ForestOrnament(props) {
+    if (props.part === "switch-thumb" &&
+        props.ornament !== "quiet" &&
+        props.effects !== "reduced")
+        return (_jsx("span", { "aria-hidden": "true", className: "dixy-skin-ornament dixy-forest-ornament dixy-forest-ornament-switch-thumb", children: _jsxs("svg", { className: "dixy-forest-control-leaf", viewBox: "0 0 20 24", children: [_jsx("path", { d: "M3 22C-3 5 12 0 18 1C21 13 12 24 3 22Z", fill: "currentColor" }), _jsx("path", { d: "M3 22L15 5", fill: "none", stroke: "#cfdfa0", strokeWidth: ".8" })] }) }));
+    return (_jsx(OrganicOrnament, { ...props, kind: "forest", skin: "forest", painter: paintForest }));
+}
+export default ForestOrnament;

package/dist/foundations.d.ts

@@ -0,0 +1,105 @@
+import type { ThemeFoundations } from "./theme-schema.ts";
+export declare const themeFonts: {
+    readonly inter: {
+        readonly label: "Inter";
+        readonly value: "\"Inter Variable\", Inter, ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly grotesk: {
+        readonly label: "Space Grotesk";
+        readonly value: "\"Space Grotesk Variable\", \"Inter Variable\", ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly system: {
+        readonly label: "System sans";
+        readonly value: "ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly serif: {
+        readonly label: "System serif";
+        readonly value: "ui-serif, Georgia, Cambria, serif";
+    };
+    readonly mono: {
+        readonly label: "System mono";
+        readonly value: "ui-monospace, SFMono-Regular, Consolas, monospace";
+    };
+    readonly fraunces: {
+        readonly label: "Fraunces";
+        readonly value: "\"Fraunces Variable\", \"Fraunces\", ui-serif, Georgia, serif";
+    };
+    readonly deco: {
+        readonly label: "Poiret One";
+        readonly value: "\"Poiret One\", \"Josefin Sans\", \"Futura\", ui-sans-serif, sans-serif";
+    };
+    readonly pixel: {
+        readonly label: "Silkscreen";
+        readonly value: "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
+    };
+    readonly techno: {
+        readonly label: "Orbitron";
+        readonly value: "\"Orbitron Variable\", \"Orbitron\", \"Eurostile\", \"Bank Gothic\", ui-sans-serif, sans-serif";
+    };
+    readonly rounded: {
+        readonly label: "Fredoka";
+        readonly value: "\"Fredoka Variable\", \"Fredoka\", ui-rounded, \"SF Pro Rounded\", \"Nunito\", sans-serif";
+    };
+    readonly lcd: {
+        readonly label: "Share Tech Mono";
+        readonly value: "\"Share Tech Mono\", \"VT323\", ui-monospace, monospace";
+    };
+    readonly plex: {
+        readonly label: "IBM Plex Mono";
+        readonly value: "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace";
+    };
+    readonly archivo: {
+        readonly label: "Archivo Black";
+        readonly value: "\"Archivo Black\", \"Arial Black\", ui-sans-serif, sans-serif";
+    };
+    readonly neon: {
+        readonly label: "Tilt Neon";
+        readonly value: "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
+    };
+    readonly mincho: {
+        readonly label: "Shippori Mincho";
+        readonly value: "\"Shippori Mincho\", \"Hiragino Mincho ProN\", \"Yu Mincho\", ui-serif, serif";
+    };
+    readonly gothic: {
+        readonly label: "Zen Kaku Gothic New";
+        readonly value: "\"Zen Kaku Gothic New\", \"Hiragino Sans\", \"Yu Gothic\", ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly playfair: {
+        readonly label: "Playfair Display";
+        readonly value: "\"Playfair Display Variable\", \"Playfair Display\", ui-serif, Georgia, serif";
+    };
+    readonly caveat: {
+        readonly label: "Caveat";
+        readonly value: "\"Caveat Variable\", \"Caveat\", \"Comic Sans MS\", cursive";
+    };
+    readonly bricolage: {
+        readonly label: "Bricolage Grotesque";
+        readonly value: "\"Bricolage Grotesque Variable\", \"Bricolage Grotesque\", ui-sans-serif, sans-serif";
+    };
+    readonly terminal: {
+        readonly label: "VT323";
+        readonly value: "\"VT323\", \"Share Tech Mono\", ui-monospace, monospace";
+    };
+    readonly jetbrains: {
+        readonly label: "JetBrains Mono";
+        readonly value: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace";
+    };
+    readonly manrope: {
+        readonly label: "Manrope";
+        readonly value: "\"Manrope Variable\", \"Manrope\", ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly figtree: {
+        readonly label: "Figtree";
+        readonly value: "\"Figtree Variable\", \"Figtree\", ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly cormorant: {
+        readonly label: "Cormorant Garamond";
+        readonly value: "\"Cormorant Garamond Variable\", \"Cormorant Garamond\", \"Garamond\", ui-serif, Georgia, serif";
+    };
+};
+/** Optional @fontsource packages that load each named web font. System stacks need none. */
+export declare const themeFontPackages: Partial<Record<keyof typeof themeFonts, string>>;
+/** Shared by the compiled consumer settings and playground exports; no React or router import. */
+export declare function themeFoundationStyle(settings: Pick<ThemeFoundations, "bodyFont" | "headingFont" | "border" | "depth">): Readonly<Record<string, string> & {
+    fontFamily: string;
+}>;

package/dist/foundations.js

@@ -0,0 +1,140 @@
+import { fontFamilies, typography } from "@dixy-ui/tokens";
+export const themeFonts = {
+    inter: { label: "Inter", value: fontFamilies.sans },
+    grotesk: { label: "Space Grotesk", value: fontFamilies.display },
+    system: {
+        label: "System sans",
+        value: "ui-sans-serif, system-ui, sans-serif",
+    },
+    serif: { label: "System serif", value: "ui-serif, Georgia, Cambria, serif" },
+    mono: {
+        label: "System mono",
+        value: "ui-monospace, SFMono-Regular, Consolas, monospace",
+    },
+    fraunces: {
+        label: "Fraunces",
+        value: '"Fraunces Variable", "Fraunces", ui-serif, Georgia, serif',
+    },
+    deco: {
+        label: "Poiret One",
+        value: '"Poiret One", "Josefin Sans", "Futura", ui-sans-serif, sans-serif',
+    },
+    pixel: {
+        label: "Silkscreen",
+        value: '"Silkscreen", "VT323", ui-monospace, monospace',
+    },
+    techno: {
+        label: "Orbitron",
+        value: '"Orbitron Variable", "Orbitron", "Eurostile", "Bank Gothic", ui-sans-serif, sans-serif',
+    },
+    rounded: {
+        label: "Fredoka",
+        value: '"Fredoka Variable", "Fredoka", ui-rounded, "SF Pro Rounded", "Nunito", sans-serif',
+    },
+    lcd: {
+        label: "Share Tech Mono",
+        value: '"Share Tech Mono", "VT323", ui-monospace, monospace',
+    },
+    // Google Fonts via Fontsource; each stack falls back to a close system face.
+    plex: {
+        label: "IBM Plex Mono",
+        value: '"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace',
+    },
+    archivo: {
+        label: "Archivo Black",
+        value: '"Archivo Black", "Arial Black", ui-sans-serif, sans-serif',
+    },
+    neon: {
+        label: "Tilt Neon",
+        value: '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
+    },
+    mincho: {
+        label: "Shippori Mincho",
+        value: '"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", ui-serif, serif',
+    },
+    gothic: {
+        label: "Zen Kaku Gothic New",
+        value: '"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", ui-sans-serif, system-ui, sans-serif',
+    },
+    playfair: {
+        label: "Playfair Display",
+        value: '"Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif',
+    },
+    caveat: {
+        label: "Caveat",
+        value: '"Caveat Variable", "Caveat", "Comic Sans MS", cursive',
+    },
+    bricolage: {
+        label: "Bricolage Grotesque",
+        value: '"Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, sans-serif',
+    },
+    terminal: {
+        label: "VT323",
+        value: '"VT323", "Share Tech Mono", ui-monospace, monospace',
+    },
+    jetbrains: {
+        label: "JetBrains Mono",
+        value: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+    },
+    manrope: {
+        label: "Manrope",
+        value: '"Manrope Variable", "Manrope", ui-sans-serif, system-ui, sans-serif',
+    },
+    figtree: {
+        label: "Figtree",
+        value: '"Figtree Variable", "Figtree", ui-sans-serif, system-ui, sans-serif',
+    },
+    cormorant: {
+        label: "Cormorant Garamond",
+        value: '"Cormorant Garamond Variable", "Cormorant Garamond", "Garamond", ui-serif, Georgia, serif',
+    },
+};
+/** Optional @fontsource packages that load each named web font. System stacks need none. */
+export const themeFontPackages = {
+    inter: "@fontsource-variable/inter",
+    grotesk: "@fontsource-variable/space-grotesk",
+    fraunces: "@fontsource-variable/fraunces",
+    deco: "@fontsource/poiret-one",
+    pixel: "@fontsource/silkscreen",
+    techno: "@fontsource-variable/orbitron",
+    rounded: "@fontsource-variable/fredoka",
+    lcd: "@fontsource/share-tech-mono",
+    plex: "@fontsource/ibm-plex-mono",
+    archivo: "@fontsource/archivo-black",
+    neon: "@fontsource/tilt-neon",
+    mincho: "@fontsource/shippori-mincho",
+    gothic: "@fontsource/zen-kaku-gothic-new",
+    playfair: "@fontsource-variable/playfair-display",
+    caveat: "@fontsource-variable/caveat",
+    bricolage: "@fontsource-variable/bricolage-grotesque",
+    terminal: "@fontsource/vt323",
+    jetbrains: "@fontsource/jetbrains-mono",
+    manrope: "@fontsource-variable/manrope",
+    figtree: "@fontsource-variable/figtree",
+    cormorant: "@fontsource-variable/cormorant-garamond",
+};
+/** Shared by the compiled consumer settings and playground exports; no React or router import. */
+export function themeFoundationStyle(settings) {
+    const style = {
+        fontFamily: themeFonts[settings.bodyFont].value,
+        "--dixy-font-sans": themeFonts[settings.bodyFont].value,
+        "--dixy-font-display": themeFonts[settings.headingFont].value,
+        "--dixy-skin-cushion-elevation": settings.depth === "none"
+            ? "0 0 0 transparent"
+            : "var(--dixy-skin-cushion-cast)",
+        "--dixy-card-shadow": `var(--dixy-shadow-${settings.depth})`,
+        "--dixy-skin-depth-shadow": settings.depth === "none"
+            ? "0 0 0 transparent"
+            : settings.depth === "floating"
+                ? "var(--dixy-skin-authored-shadow, 0 0 0 transparent), var(--dixy-shadow-floating)"
+                : "var(--dixy-skin-authored-shadow, var(--dixy-shadow-raised))",
+        "--dixy-stroke-width": `${settings.border}px`,
+    };
+    for (const part of ["card", "button", "input", "dialog"])
+        style[`--dixy-${part}-border-width`] = `${settings.border}px`;
+    for (const role of Object.keys(typography))
+        if (role.startsWith("heading.") || role.startsWith("title."))
+            style[`--dixy-font-${role.replaceAll(".", "-")}-family`] =
+                themeFonts[settings.headingFont].value;
+    return Object.freeze(style);
+}

package/dist/frame-corners.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+/** Decorative paint only: corners never own content, focus or hit targets. */
+export declare function FrameCorners({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/frame-corners.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/** Decorative paint only: corners never own content, focus or hit targets. */
+export function FrameCorners({ children }) {
+    return (_jsx(_Fragment, { children: ["tl", "tr", "bl", "br"].map((corner) => (_jsx("svg", { className: `dixy-frame-corner dixy-frame-corner-${corner}`, viewBox: "0 0 80 80", fill: "none", children: children }, corner))) }));
+}

package/dist/frame-styles.d.ts

@@ -0,0 +1,36 @@
+import type { ResolvedThemeRecipe } from "./resolve.ts";
+export declare const framePrefixes: {
+    readonly forest: "forest";
+    readonly pixel: "retro";
+    readonly rails: "signal";
+    readonly ceramic: "hardware";
+    readonly glass: "prism";
+    readonly stitch: "atelier";
+    readonly coral: "ocean";
+    readonly cushion: "clay";
+    readonly deco: "deco";
+    readonly chamfer: "titanium";
+    readonly halo: "light";
+    readonly drafting: "blueprint";
+    readonly riso: "riso";
+    readonly neon: "neon";
+    readonly sumi: "sumi";
+    readonly transit: "transit";
+    readonly crt: "phosphor";
+    readonly panes: "ansi";
+    readonly swiss: "swiss";
+    readonly azulejo: "azulejo";
+    readonly formwork: "brutalist";
+    readonly atomic: "atomic";
+    readonly hud: "hud";
+    readonly hazard: "freighter";
+    readonly orbit: "sail";
+    readonly rangoli: "diwali";
+    readonly papercut: "lunar";
+    readonly picado: "picado";
+    readonly gulal: "holi";
+    readonly knit: "yule";
+    readonly liquid: "glass";
+};
+/** Frame code owns trim/geometry only. It never paints an input or action surface. */
+export declare function frameStyles(m: ResolvedThemeRecipe, theme: string): string;

package/dist/frame-styles.js

@@ -0,0 +1,146 @@
+import { isOrganicFrame } from "./organic-settings.js";
+export const framePrefixes = {
+    forest: "forest",
+    pixel: "retro",
+    rails: "signal",
+    ceramic: "hardware",
+    glass: "prism",
+    stitch: "atelier",
+    coral: "ocean",
+    cushion: "clay",
+    deco: "deco",
+    chamfer: "titanium",
+    halo: "light",
+    drafting: "blueprint",
+    riso: "riso",
+    neon: "neon",
+    sumi: "sumi",
+    transit: "transit",
+    crt: "phosphor",
+    panes: "ansi",
+    swiss: "swiss",
+    azulejo: "azulejo",
+    formwork: "brutalist",
+    atomic: "atomic",
+    hud: "hud",
+    hazard: "freighter",
+    orbit: "sail",
+    rangoli: "diwali",
+    papercut: "lunar",
+    picado: "picado",
+    gulal: "holi",
+    knit: "yule",
+    liquid: "glass",
+};
+/** Frame code owns trim/geometry only. It never paints an input or action surface. */
+export function frameStyles(m, theme) {
+    if (m.frame === "none")
+        return "";
+    const prefix = framePrefixes[m.frame];
+    const art = `${theme} .dixy-${prefix}-ornament`;
+    const safe = {
+        x: Math.max(8, m.parameters.paddingInline - 8),
+        top: Math.max(8, m.parameters.paddingTop - 8),
+        bottom: Math.max(8, m.parameters.paddingBottom - 8),
+    };
+    const common = `
+    ${art} { position:absolute; inset:0; display:block; pointer-events:none; user-select:none; border-radius:inherit; z-index:1; color:var(--dixy-skin-edge); }
+    ${art}:is(.dixy-skin-ornament-card,.dixy-skin-ornament-dialog) {
+      clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--dixy-skin-frame-safe-inline,${safe.x}px) var(--dixy-skin-frame-safe-top,${safe.top}px),var(--dixy-skin-frame-safe-inline,${safe.x}px) calc(100% - var(--dixy-skin-frame-safe-bottom,${safe.bottom}px)),calc(100% - var(--dixy-skin-frame-safe-inline,${safe.x}px)) calc(100% - var(--dixy-skin-frame-safe-bottom,${safe.bottom}px)),calc(100% - var(--dixy-skin-frame-safe-inline,${safe.x}px)) var(--dixy-skin-frame-safe-top,${safe.top}px),var(--dixy-skin-frame-safe-inline,${safe.x}px) var(--dixy-skin-frame-safe-top,${safe.top}px));
+    }
+    ${art}.dixy-skin-ornament-theme { z-index:-1; overflow:hidden; }
+    ${art} .dixy-skin-definitions { position:absolute; overflow:hidden; }
+    ${art} .dixy-skin-control-art { width:100%; height:100%; }
+    ${art}.dixy-skin-ornament-switch-thumb { display:grid; place-items:center; inset:2px; }
+    ${theme} .dixy-switch-thumb:not([data-checked]) > .dixy-${prefix}-ornament { display:none; }
+    ${art} .dixy-skin-fastener { position:absolute; width:11px; height:11px; }
+    ${art} .dixy-skin-fastener-tl { top:5px; left:5px; }
+    ${art} .dixy-skin-fastener-tr { top:5px; right:5px; }
+    ${art} .dixy-skin-fastener-bl { bottom:5px; left:5px; }
+    ${art} .dixy-skin-fastener-br { bottom:5px; right:5px; }
+    ${art}[data-animated] .dixy-skin-motion { animation:dixy-${prefix}-detail 4s ease-in-out infinite alternate; }
+    ${art}[data-motion="reduced"] .dixy-skin-motion { animation:none; }
+    ${art} .dixy-frame-corner { position:absolute; width:min(64px,50%); height:min(64px,50%); overflow:visible; }
+    ${art} .dixy-frame-corner-tl { left:0; top:0; }
+    ${art} .dixy-frame-corner-tr { right:0; top:0; transform:scaleX(-1); }
+    ${art} .dixy-frame-corner-bl { left:0; bottom:0; transform:scaleY(-1); }
+    ${art} .dixy-frame-corner-br { right:0; bottom:0; transform:scale(-1); }
+    @media(prefers-reduced-motion:reduce) { ${art}[data-animated] .dixy-skin-motion { animation:none; } }
+    @media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) { ${art} { display:none; } }
+  `;
+    const details = {};
+    details.pixel = `      .dixy-retro-inlay { position:absolute; inset:0; border:1px solid #ffffff55; border-bottom-color:#10151e44; border-right-color:#10151e44; }
+      @keyframes dixy-retro-detail { from { opacity:.25; } to { opacity:1; } }`;
+    details.rails = `      .dixy-signal-rail { position:absolute; top:2px; left:2px; right:2px; height:19px; background:repeating-linear-gradient(0deg,#ffffff16 0 1px,#050a08aa 1px 3px); border:1px solid #030705; box-shadow:inset 0 1px 0 #ffffff22,0 1px 0 #ffffff22; }
+      .dixy-signal-meter { position:absolute; bottom:7px; right:21px; width:70px; height:10px; color:var(--dixy-color-background-action-primary); opacity:.8; }
+      .dixy-signal-bar { transform-origin:center 13px; animation-delay:var(--dixy-detail-delay)!important; }
+      @keyframes dixy-signal-detail { from { transform:scaleY(.4); opacity:.55; } to { transform:scaleY(1); opacity:1; } }`;
+    details.ceramic = `      .dixy-hardware-seam { position:absolute; inset:2px; border:1px solid #ffffff55; border-radius:inherit; box-shadow:inset 0 -1px 0 #00000018; }
+      .dixy-hardware-registration { position:absolute; bottom:9px; right:21px; width:70px; height:9px; color:var(--dixy-color-text-muted); opacity:.5; }
+      @keyframes dixy-hardware-detail { from { opacity:.2; } to { opacity:1; } }`;
+    details.glass = `      .dixy-prism-atmosphere { width:100%; height:100%; opacity:.9; }
+      .dixy-prism-caustic { position:absolute; top:-1px; left:12%; width:42%; height:1px; background:linear-gradient(90deg,transparent,#edf6ff,transparent); box-shadow:0 0 6px 1px #92c9ff77; }
+      .dixy-prism-facet { position:absolute; bottom:0; right:0; width:32px; height:32px; border-bottom-right-radius:inherit; opacity:.25; }
+      @keyframes dixy-prism-detail { from { transform:translateX(-2%); opacity:.65; } to { transform:translateX(2%); opacity:1; } }`;
+    details.stitch = `      .dixy-atelier-linen { display:block; }
+      .dixy-atelier-paper { position:absolute; inset:0; border-radius:inherit; overflow:hidden; mix-blend-mode:multiply; }
+      .dixy-atelier-wood { position:absolute; }
+      .dixy-atelier-wood-top,.dixy-atelier-wood-bottom { left:calc(1px - var(--dixy-skin-frame-width)); width:calc(100% + 2 * var(--dixy-skin-frame-width) - 2px); height:var(--dixy-skin-frame-width); }
+      .dixy-atelier-wood-top { top:calc(1px - var(--dixy-skin-frame-width)); border-radius:10px 10px 0 0; }
+      .dixy-atelier-wood-bottom { bottom:calc(1px - var(--dixy-skin-frame-width)); border-radius:0 0 10px 10px; }
+      .dixy-atelier-wood-left,.dixy-atelier-wood-right { top:-1px; width:var(--dixy-skin-frame-width); height:calc(100% + 2px); }
+      .dixy-atelier-wood-left { left:calc(1px - var(--dixy-skin-frame-width)); }
+      .dixy-atelier-wood-right { right:calc(1px - var(--dixy-skin-frame-width)); }
+      .dixy-atelier-stitch { position:absolute; inset:5px; border:1px dashed #9b785166; border-radius:8px; box-shadow:0 1px 0 #fff8e044; }
+      .dixy-atelier-gilt { position:absolute; top:-7px; left:12%; width:32%; height:1px; background:linear-gradient(90deg,transparent,#f8d9a766,transparent); }
+      @keyframes dixy-atelier-detail { from { opacity:.3; } to { opacity:1; } }`;
+    details.forest = `
+    .dixy-forest-ornament-switch-thumb { display:grid; place-items:center; inset:0; }
+    .dixy-forest-control-leaf { width:14px; height:17px; }
+    .dixy-switch-thumb:not([data-checked]) .dixy-forest-ornament-switch-thumb,[data-dixy-material-override] .dixy-forest-ornament-switch-thumb { display:none; }
+  `;
+    details.coral = `@keyframes dixy-ocean-detail { from { opacity:.45; } to { opacity:1; } }`;
+    details.cushion = `@keyframes dixy-clay-detail { from { transform:translateY(0); } to { transform:translateY(-2px); } }`;
+    details.deco = `@keyframes dixy-deco-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.chamfer = `@keyframes dixy-titanium-detail { from { opacity:.4; } to { opacity:1; } }`;
+    details.halo = `@keyframes dixy-light-detail { from { opacity:.35; } to { opacity:.8; } }`;
+    details.drafting = `@keyframes dixy-blueprint-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.riso = `@keyframes dixy-riso-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.neon = `@keyframes dixy-neon-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.sumi = `@keyframes dixy-sumi-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.transit = `@keyframes dixy-transit-detail { from { opacity:.5; } to { opacity:1; } }`;
+    // 2026-12 launch frames paint on canvas; their detail keyframe is a soft pulse.
+    details.crt = `@keyframes dixy-phosphor-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.panes = `@keyframes dixy-ansi-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.swiss = `@keyframes dixy-swiss-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.azulejo = `@keyframes dixy-azulejo-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.formwork = `@keyframes dixy-brutalist-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.atomic = `@keyframes dixy-atomic-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.hud = `@keyframes dixy-hud-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.hazard = `@keyframes dixy-freighter-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.orbit = `@keyframes dixy-sail-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.rangoli = `@keyframes dixy-diwali-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.papercut = `@keyframes dixy-lunar-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.picado = `@keyframes dixy-picado-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.gulal = `@keyframes dixy-holi-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.knit = `@keyframes dixy-yule-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.liquid = `@keyframes dixy-glass-detail { from { opacity:.5; } to { opacity:1; } }`;
+    // Scope every legacy ornament selector as well, so two custom frames can coexist.
+    const scoped = details[m.frame].replace(/(^|[}\n])([ \t]*)(\.dixy-[^{]+)\{/g, (_match, before, space, selector) => before +
+        space +
+        selector
+            .split(",")
+            .map((part) => `${theme} ${part.trim()}`)
+            .join(",") +
+        " {");
+    const texture = m.material === "botanical-paper" || m.material === "atelier-paper"
+        ? ""
+        : `${theme} :is(.dixy-forest-paper,.dixy-atelier-paper,.dixy-atelier-linen) { display:none; }`;
+    const organic = isOrganicFrame(m.frame)
+        ? `
+    ${art}.dixy-organic-ornament { clip-path:none; overflow:visible; border-radius:inherit; }
+    ${art} .dixy-organic-canvas { display:block; position:absolute; left:-32px; top:-32px; width:calc(100% + 64px); height:calc(100% + 64px); pointer-events:none; }
+  `
+        : "";
+    return common + scoped + texture + organic;
+}

package/dist/freeze.d.ts

@@ -0,0 +1,2 @@
+/** Used only for trusted schema/registry constants and compiler data, never executable input. */
+export declare function freezeData<const T>(value: T): T;

package/dist/freeze.js

@@ -0,0 +1,9 @@
+/** Used only for trusted schema/registry constants and compiler data, never executable input. */
+export function freezeData(value) {
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+        for (const child of Object.values(value))
+            freezeData(child);
+        Object.freeze(value);
+    }
+    return value;
+}

package/dist/freighter/ornament.d.ts

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

package/dist/freighter/ornament.js

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