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

package/dist/recipes.js

@@ -0,0 +1,939 @@
+import { freezeData } from "./freeze.js";
+/** Independent trusted paint and geometry registries. No recipe data executes code. */
+export const materialRecipes = freezeData({
+    "botanical-paper": {
+        finish: "linear-gradient(160deg, rgb(255 255 255 / .35), transparent 40%)",
+        edge: "#d3d9c6",
+        darkEdge: "#2e3a2b",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .6), 0 20px 40px -24px rgb(47 93 52 / .45), 0 2px 6px rgb(47 93 52 / .08)",
+        inset: "inset 0 1px 2px rgb(31 43 29 / .1)",
+        canvas: "radial-gradient(ellipse at 0% 0%, rgb(106 143 59 / .16), transparent 55%), radial-gradient(ellipse at 100% 100%, rgb(47 93 52 / .12), transparent 55%)",
+        tint: ["#fbfaf4", "#1b2219", "#dde3cf"],
+        label: "Botanical paper",
+        baseMaterial: "paper",
+        grain: "radial-gradient(circle at 1px 1px,#4a5a3a0a .5px,transparent .8px)",
+        thumb: "radial-gradient(circle at 35% 30%,#ffffff,#e8ecdf 70%)",
+        tintActions: false,
+    },
+    "pixel-enamel": {
+        finish: "linear-gradient(180deg, rgb(255 255 255 / .12), transparent 4px)",
+        edge: "var(--dixy-color-text-primary)",
+        darkEdge: "var(--dixy-color-text-primary)",
+        shadow: "5px 5px 0 color-mix(in srgb,var(--dixy-color-text-primary) 85%,#000)",
+        inset: "inset 3px 3px 0 rgb(0 0 0 / .12)",
+        canvas: "repeating-linear-gradient(0deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 8px), linear-gradient(#7fc2bc, #7fc2bc)",
+        darkCanvas: "repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 8px), linear-gradient(#1b1b3a, #1b1b3a)",
+        tint: ["#fffdf3", "#22223b", "#7fc2bc"],
+        label: "Pixel enamel",
+        baseMaterial: "matte",
+        grain: "radial-gradient(circle at 1px 1px,#705b350b .5px,transparent .8px)",
+        thumb: "linear-gradient(#ffffff,#ffffff)",
+        tintActions: false,
+    },
+    gunmetal: {
+        finish: "repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgb(255 255 255 / .14), transparent 6px)",
+        edge: "#9aa199",
+        darkEdge: "#11141a",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .35), 0 14px 30px -12px rgb(0 0 0 / .55)",
+        inset: "inset 0 2px 4px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .08)",
+        canvas: "radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / .07), transparent 60%)",
+        tint: ["#d3d8d2", "#2c3136", "#c3c8c1"],
+        label: "Gunmetal",
+        baseMaterial: "metal",
+        grain: "repeating-linear-gradient(90deg,#ffffff05 0 1px,#00000005 1px 3px)",
+        thumb: "linear-gradient(180deg,#d9dee3,#8b939b)",
+        tintActions: true,
+    },
+    ceramic: {
+        finish: "linear-gradient(180deg, rgb(255 255 255 / .55), transparent 14px)",
+        edge: "#d3cec4",
+        darkEdge: "#111113",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .7), 0 2px 0 rgb(0 0 0 / .1), 0 18px 34px -18px rgb(90 74 53 / .4)",
+        inset: "inset 0 2px 3px rgb(0 0 0 / .12), 0 1px 0 rgb(255 255 255 / .5)",
+        canvas: "radial-gradient(ellipse at top, rgb(255 255 255 / .25), transparent 70%)",
+        tint: ["#f4f2ed", "#26262a", "#e4e1da"],
+        label: "Ceramic",
+        baseMaterial: "metal",
+        grain: "repeating-linear-gradient(0deg,#ffffff06 0 1px,#00000004 1px 3px)",
+        thumb: "radial-gradient(circle at 35% 30%,#ffffff,#d8d4cc 70%)",
+        tintActions: false,
+    },
+    "prismatic-glass": {
+        finish: "linear-gradient(115deg, rgb(255 255 255 / .45), transparent 32%, transparent 70%, rgb(255 255 255 / .2))",
+        edge: "rgb(255 255 255 / .75)",
+        darkEdge: "rgb(255 255 255 / .16)",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .8), 0 24px 50px -24px rgb(75 63 192 / .45)",
+        inset: "inset 0 1px 2px rgb(75 63 192 / .1)",
+        canvas: "radial-gradient(30% 30% at 20% 25%, rgb(255 179 217 / .7), transparent 70%), radial-gradient(35% 35% at 80% 20%, rgb(159 212 255 / .7), transparent 70%), radial-gradient(40% 40% at 60% 85%, rgb(196 181 255 / .7), transparent 70%), radial-gradient(25% 25% at 15% 80%, rgb(181 255 225 / .6), transparent 70%)",
+        darkCanvas: "radial-gradient(30% 30% at 20% 25%, rgb(255 120 190 / .28), transparent 70%), radial-gradient(35% 35% at 80% 20%, rgb(100 170 255 / .28), transparent 70%), radial-gradient(40% 40% at 60% 85%, rgb(150 120 255 / .3), transparent 70%)",
+        tint: ["#ffffff8c", "#1c1b33a6", "#e9e8f7"],
+        label: "Prismatic glass",
+        baseMaterial: "glossy",
+        grain: "radial-gradient(circle at 1px 1px,#ffffff08 .5px,transparent .8px)",
+        thumb: "linear-gradient(#ffffff,#ffffff)",
+        tintActions: false,
+    },
+    "atelier-paper": {
+        finish: "linear-gradient(90deg, rgb(0 0 0 / .03), transparent 30px)",
+        edge: "#d9cab3",
+        darkEdge: "#4a3a2c",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .6), 0 18px 30px -18px rgb(90 58 26 / .45)",
+        inset: "inset 0 1px 2px rgb(90 58 26 / .1)",
+        canvas: "repeating-linear-gradient(45deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .02) 0 2px, transparent 2px 5px)",
+        tint: ["#f8f2e6", "#2a211a", "#e8ddcb"],
+        label: "Atelier paper",
+        baseMaterial: "paper",
+        grain: "radial-gradient(circle at 1px 1px,#5a3a1a0b .5px,transparent .8px)",
+        thumb: "radial-gradient(circle at 35% 30%,#f4dca0,#b98b3e 70%)",
+        tintActions: false,
+    },
+    "sea-glass": {
+        finish: "linear-gradient(170deg, rgb(255 255 255 / .35), transparent 40%)",
+        edge: "rgb(255 255 255 / .8)",
+        darkEdge: "#2a5a68",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .6), 0 24px 50px -24px rgb(13 74 90 / .45)",
+        inset: "inset 0 1px 2px rgb(13 51 64 / .12)",
+        canvas: "radial-gradient(60% 18% at 30% 0%, rgb(255 255 255 / .55), transparent 70%), linear-gradient(180deg, #dff3f1, #bfe3e4 60%, #9fd0d6)",
+        darkCanvas: "radial-gradient(60% 18% at 30% 0%, rgb(95 211 207 / .12), transparent 70%), linear-gradient(180deg, #0b2a35, #061a24 60%, #030f16)",
+        tint: ["#f4fbfacc", "#0e2c38b3", "#bfe3e4"],
+        label: "Sea glass",
+        baseMaterial: "glossy",
+        grain: "radial-gradient(circle at 1px 1px,#ffffff08 .5px,transparent .8px)",
+        thumb: "radial-gradient(circle at 35% 30%,#ffffff,#e6eef0 55%,#c6d6dc)",
+        tintActions: false,
+    },
+    "candy-clay": {
+        finish: "linear-gradient(150deg, rgb(255 255 255 / .5), transparent 40%)",
+        edge: "#f5d7df",
+        darkEdge: "#4a3150",
+        shadow: "8px 10px 22px rgb(214 120 150 / .3), -6px -6px 16px color-mix(in srgb, var(--dixy-color-background-canvas) 60%, #fff), inset 2px 2px 3px rgb(255 255 255 / .5)",
+        inset: "inset 3px 3px 6px rgb(214 120 150 / .28), inset -3px -3px 6px color-mix(in srgb, var(--dixy-color-background-canvas) 50%, #fff)",
+        canvas: "radial-gradient(ellipse at 20% 0%, rgb(255 181 71 / .14), transparent 55%), radial-gradient(ellipse at 90% 90%, rgb(180 139 255 / .14), transparent 55%)",
+        tint: ["#fff6f2", "#36233c", "#ffe9ef"],
+        label: "Candy clay",
+        baseMaterial: "soft",
+        grain: "radial-gradient(circle at 1px 1px,#ffffff08 .5px,transparent .8px)",
+        thumb: "radial-gradient(circle at 35% 30%,#ffffff,#ffe3ec 70%)",
+        tintActions: false,
+    },
+    "lacquer-brass": {
+        finish: "linear-gradient(135deg, rgb(255 255 255 / .25), transparent 40%)",
+        edge: "#c9a95c",
+        darkEdge: "#8a7240",
+        shadow: "0 0 0 1px rgb(201 169 92 / .45), 0 20px 40px -20px rgb(61 47 20 / .45)",
+        inset: "inset 0 1px 2px rgb(61 47 20 / .12)",
+        canvas: "repeating-conic-gradient(from -90deg at 50% 110%, rgb(201 169 92 / .08) 0 2deg, transparent 2deg 10deg)",
+        tint: ["#fffaf0", "#15130f", "#f3ead7"],
+        label: "Lacquer & brass",
+        baseMaterial: "glossy",
+        grain: "radial-gradient(circle at 1px 1px,#5a4a200a .5px,transparent .8px)",
+        thumb: "linear-gradient(135deg,#f6e3a1,#c79b48 45%,#f3d98e 60%,#9a7330)",
+        tintActions: false,
+    },
+    titanium: {
+        finish: "repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 1px, transparent 1px 2px), linear-gradient(170deg, rgb(255 255 255 / .5), transparent 45%, rgb(255 255 255 / .25))",
+        edge: "#aab6c3",
+        darkEdge: "#33414f",
+        shadow: "inset 0 1px 0 rgb(255 255 255 / .7), 0 22px 40px -22px rgb(32 53 77 / .55)",
+        inset: "inset 0 2px 4px rgb(14 26 38 / .14), 0 1px 0 rgb(255 255 255 / .5)",
+        canvas: "linear-gradient(160deg, rgb(255 255 255 / .25), transparent 60%)",
+        tint: ["#e9eef3", "#1a222b", "#c9d3dd"],
+        label: "Titanium",
+        baseMaterial: "metal",
+        grain: "repeating-linear-gradient(90deg,#ffffff0a 0 1px,#00000005 1px 2px)",
+        thumb: "linear-gradient(180deg,#ffffff,#c9d2dc)",
+        tintActions: false,
+    },
+    "frosted-porcelain": {
+        finish: "linear-gradient(180deg, rgb(255 255 255 / .4), transparent 30%)",
+        edge: "#e0e4ee",
+        darkEdge: "#262a35",
+        shadow: "0 1px 2px rgb(26 28 34 / .08), 0 8px 24px -10px rgb(47 111 237 / .22)",
+        inset: "inset 0 -2px 0 rgb(47 111 237 / .18)",
+        canvas: "radial-gradient(ellipse at top, rgb(47 111 237 / .06), transparent 70%)",
+        tint: ["#fdfdff", "#1b1e26", "#eef1f7"],
+        label: "Frosted porcelain",
+        baseMaterial: "glossy",
+        grain: "radial-gradient(circle at 1px 1px,#ffffff06 .5px,transparent .8px)",
+        thumb: "linear-gradient(#ffffff,#ffffff)",
+        tintActions: false,
+    },
+    "scrapbook-paper": {
+        finish: "linear-gradient(transparent, transparent)",
+        edge: "var(--dixy-color-text-primary)",
+        darkEdge: "var(--dixy-color-text-primary)",
+        shadow: "4px 5px 0 color-mix(in srgb, var(--dixy-color-background-action-primary) 55%, #4b3fb3)",
+        inset: "inset 0 0 0 transparent",
+        canvas: "repeating-linear-gradient(180deg, transparent 0 25px, rgb(75 63 179 / .09) 25px 26px)",
+        tint: ["#fffefa", "#262140", "#f1ece2"],
+        label: "Scrapbook paper",
+        baseMaterial: "paper",
+        grain: "radial-gradient(circle at 1px 1px,#2a23400a .5px,transparent .8px)",
+        thumb: "linear-gradient(#ffffff,#ffffff)",
+        tintActions: false,
+    },
+    cyanotype: {
+        label: "Cyanotype",
+        baseMaterial: "paper",
+        finish: "linear-gradient(180deg,#ffffff10,transparent 40%)",
+        edge: "#5f86bd",
+        darkEdge: "#8fb3e6",
+        shadow: "0 1px 0 #0b1f3d22,0 6px 14px #0b1f3d14",
+        inset: "inset 0 1px 3px #0b1f3d22",
+        canvas: "linear-gradient(#7aa6e014 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#7aa6e014 1px,transparent 1px) 0 0/24px 24px",
+        tint: ["#e9f1fb", "#123766", "#dfe9f6"],
+        grain: "radial-gradient(circle at 1px 1px,#ffffff0a .5px,transparent .9px)",
+        thumb: "linear-gradient(135deg,#1d4f91,#123766)",
+        tintActions: false,
+    },
+    "riso-paper": {
+        label: "Riso paper",
+        baseMaterial: "paper",
+        finish: "radial-gradient(circle at 2px 2px,#0000000a .6px,transparent 1px)",
+        edge: "#2a2a2a",
+        darkEdge: "#f2efe6",
+        shadow: "3px 3px 0 #0078bf44",
+        inset: "inset 1px 1px 0 #00000022",
+        canvas: "radial-gradient(circle at 1px 1px,#ff48b014 .8px,transparent 1.2px) 0 0/6px 6px",
+        tint: ["#f7f1e1", "#262329", "#efe5cc"],
+        grain: "radial-gradient(circle at 1px 1px,#3a2f2010 .6px,transparent 1px)",
+        thumb: "linear-gradient(135deg,#ff48b0 0 50%,#0078bf 50%)",
+        tintActions: false,
+    },
+    "wet-asphalt": {
+        label: "Wet asphalt",
+        baseMaterial: "glossy",
+        finish: "linear-gradient(180deg,#ffffff12,transparent 30%,#ff4fd80c)",
+        edge: "#4a3f57",
+        darkEdge: "#5b4c6b",
+        shadow: "0 8px 22px #0a061299",
+        inset: "inset 0 2px 5px #00000066",
+        canvas: "radial-gradient(ellipse at 20% 100%,#ff4fd826,transparent 55%),radial-gradient(ellipse at 85% 95%,#3ff2ff1f,transparent 50%)",
+        tint: ["#ece6f1", "#17121e", "#ddd5e6"],
+        grain: "repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 3px)",
+        thumb: "radial-gradient(circle at 30% 30%,#ff4fd8,#3a1f4d 60%,#100a16)",
+        tintActions: false,
+    },
+    washi: {
+        label: "Washi",
+        baseMaterial: "paper",
+        finish: "linear-gradient(170deg,#ffffff22,transparent 40%)",
+        edge: "#b8ac95",
+        darkEdge: "#6f675a",
+        shadow: "0 1px 0 #3b33261a,0 10px 24px #3b33260d",
+        inset: "inset 0 1px 3px #3b33261c",
+        canvas: "repeating-linear-gradient(73deg,transparent 0 11px,#8a7a5c0a 11px 12px),repeating-linear-gradient(-28deg,transparent 0 17px,#8a7a5c08 17px 18px)",
+        tint: ["#f5f0e4", "#211f1b", "#ece5d4"],
+        grain: "repeating-linear-gradient(63deg,#7a6a4c0c 0 .5px,transparent .5px 7px)",
+        thumb: "linear-gradient(135deg,#f7f2e6,#d9cfb8)",
+        tintActions: false,
+    },
+    "station-enamel": {
+        label: "Station enamel",
+        baseMaterial: "matte",
+        finish: "linear-gradient(180deg,#ffffff40,transparent 18%)",
+        edge: "#c9ced3",
+        darkEdge: "#48505a",
+        shadow: "inset 0 1px 0 #ffffffaa,0 2px 0 #1d212414,0 8px 16px #1d21240f",
+        inset: "inset 0 2px 4px #1d212420",
+        canvas: "linear-gradient(180deg,#2e9e4f0d,transparent 30%)",
+        tint: ["#f6f7f4", "#1c2024", "#e8eae5"],
+        grain: "radial-gradient(circle at 1px 1px,#00000006 .5px,transparent 1px)",
+        thumb: "linear-gradient(180deg,#2e9e4f 0 22%,#f6f7f4 22%)",
+        tintActions: false,
+    },
+    // 2026-12 launch materials.
+    "phosphor-glass": {
+        label: "Phosphor glass",
+        baseMaterial: "matte",
+        finish: "repeating-linear-gradient(180deg,transparent 0 2px,#00000014 2px 3px)",
+        edge: "#7fae88",
+        darkEdge: "#1f9e44",
+        shadow: "0 0 0 1px #2f7a3d22,0 6px 14px #10301814",
+        inset: "inset 0 0 0 1px #2f7a3d33",
+        canvas: "repeating-linear-gradient(180deg,#2f7a3d12 0 26px,transparent 26px 52px)",
+        tint: ["#f4faf1", "#040b06", "#e7f2e3"],
+        grain: "radial-gradient(circle at 1px 1px,#2f7a3d0a .5px,transparent 1px)",
+        thumb: "linear-gradient(180deg,#3dff6e,#1f9e44)",
+        tintActions: false,
+    },
+    "ansi-term": {
+        label: "ANSI terminal",
+        baseMaterial: "matte",
+        finish: "linear-gradient(transparent,transparent)",
+        edge: "#93a1a1",
+        darkEdge: "#5f5f5f",
+        shadow: "none",
+        inset: "inset 0 0 0 1px #586e7533",
+        canvas: "linear-gradient(90deg,#586e750a 1px,transparent 1px) 0 0/9px 18px,linear-gradient(#586e750a 1px,transparent 1px) 0 0/9px 18px",
+        tint: ["#fdf6e3", "#1b1d1e", "#f4ecd4"],
+        grain: "linear-gradient(transparent,transparent)",
+        thumb: "linear-gradient(90deg,#268bd2 0 50%,#fdf6e3 50%)",
+        tintActions: false,
+    },
+    "poster-stock": {
+        label: "Poster stock",
+        baseMaterial: "paper",
+        finish: "linear-gradient(transparent,transparent)",
+        edge: "#0d0d0d",
+        darkEdge: "#f4f4f4",
+        shadow: "none",
+        inset: "inset 0 -2px 0 currentColor",
+        canvas: "linear-gradient(90deg,transparent calc(33.33% - .5px),#0000000d 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),#0000000d 0 calc(66.66% + .5px),transparent 0)",
+        tint: ["#ffffff", "#111111", "#f2f2f0"],
+        grain: "radial-gradient(circle at 1px 1px,#00000006 .5px,transparent 1px)",
+        thumb: "linear-gradient(135deg,#e30613 0 40%,#ffffff 40%)",
+        tintActions: false,
+    },
+    "glazed-tile": {
+        label: "Glazed tile",
+        baseMaterial: "glossy",
+        finish: "linear-gradient(125deg,#ffffff70 0,transparent 32%),repeating-linear-gradient(37deg,transparent 0 23px,#1f4fa008 23px 24px)",
+        edge: "#1f4fa0",
+        darkEdge: "#8fb3ff",
+        shadow: "inset 0 1px 0 #ffffffcc,0 2px 0 #1f4fa022,0 10px 20px #0f1d3a14",
+        inset: "inset 0 2px 3px #1f4fa026",
+        canvas: "conic-gradient(from 45deg at 50% 50%,#1f4fa00a 0 25%,transparent 0 50%,#1f4fa00a 0 75%,transparent 0) 0 0/48px 48px",
+        tint: ["#fbfaf6", "#0f1d3a", "#eef2fa"],
+        grain: "radial-gradient(circle at 1px 1px,#1f4fa008 .5px,transparent 1px)",
+        thumb: "radial-gradient(circle at 30% 25%,#ffffff,#dfe8fa 55%,#1f4fa0)",
+        tintActions: false,
+    },
+    concrete: {
+        label: "Board-formed concrete",
+        baseMaterial: "matte",
+        finish: "repeating-linear-gradient(180deg,transparent 0 17px,#0000000c 17px 18px)",
+        edge: "#8e8b84",
+        darkEdge: "#5a5853",
+        shadow: "inset 0 -4px 0 #0000001a,0 1px 0 #ffffff55",
+        inset: "inset 3px 3px 0 #0000002e,inset -1px -1px 0 #ffffff40",
+        canvas: "radial-gradient(circle,#0000000f .6px,transparent 1px) 0 0/5px 5px,radial-gradient(circle,#ffffff14 .8px,transparent 1.2px) 2px 3px/7px 7px",
+        tint: ["#c9c6bf", "#33322f", "#b4b1aa"],
+        grain: "radial-gradient(circle at 1px 1px,#0000001c .6px,transparent 1px),radial-gradient(circle at 3px 2px,#ffffff22 .5px,transparent .9px)",
+        thumb: "linear-gradient(180deg,#bdbab3,#8e8b84)",
+        tintActions: false,
+    },
+    "atomic-laminate": {
+        label: "Atomic laminate",
+        baseMaterial: "soft",
+        finish: "linear-gradient(160deg,#ffffff40,transparent 40%)",
+        edge: "#e7d3a8",
+        darkEdge: "#34464b",
+        shadow: "0 3px 0 #2c3a3f14,0 10px 22px #2c3a3f12",
+        inset: "inset 0 2px 3px #2c3a3f1a",
+        canvas: "repeating-conic-gradient(from 0deg at 100% 0,#f4a26112 0 6deg,transparent 6deg 12deg)",
+        tint: ["#f6ecd6", "#1f2a2e", "#f1e3c4"],
+        grain: "radial-gradient(circle at 1px 1px,#2a9d8f10 .6px,transparent 1px),radial-gradient(circle at 3px 3px,#f4a26110 .6px,transparent 1px)",
+        thumb: "linear-gradient(135deg,#2a9d8f 0 50%,#f4a261 50%)",
+        tintActions: false,
+    },
+    hologram: {
+        label: "Hologram",
+        baseMaterial: "glossy",
+        finish: "linear-gradient(180deg,#5ff3ff14,transparent 30%),repeating-linear-gradient(180deg,transparent 0 3px,#0a8aa308 3px 4px)",
+        edge: "#0a8aa366",
+        darkEdge: "#5ff3ff66",
+        shadow: "0 0 0 1px #0a8aa31a,0 8px 22px #0a8aa31a",
+        inset: "inset 0 0 0 1px #0a8aa333",
+        canvas: "linear-gradient(#0a8aa314 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#0a8aa314 1px,transparent 1px) 0 0/22px 22px",
+        tint: ["#eef7f9", "#06161e", "#e3f1f4"],
+        grain: "linear-gradient(transparent,transparent)",
+        thumb: "radial-gradient(circle,#5ff3ff,#0a8aa3 70%)",
+        tintActions: false,
+    },
+    "painted-steel": {
+        label: "Painted steel",
+        baseMaterial: "metal",
+        finish: "linear-gradient(180deg,#ffffff30,transparent 40%),repeating-linear-gradient(90deg,transparent 0 3px,#00000006 3px 4px)",
+        edge: "#9b9a94",
+        darkEdge: "#4a4e51",
+        shadow: "inset 0 1px 0 #ffffff55,0 2px 0 #00000030,0 8px 16px #0000001a",
+        inset: "inset 0 2px 0 #00000022",
+        canvas: "repeating-linear-gradient(-45deg,#e09a000a 0 14px,transparent 14px 28px)",
+        tint: ["#dedcd5", "#2b2e30", "#cfcdc6"],
+        grain: "radial-gradient(circle at 1px 1px,#00000012 .6px,transparent 1px),radial-gradient(circle at 3px 2px,#ffffff20 .5px,transparent .9px)",
+        thumb: "repeating-linear-gradient(-45deg,#e09a00 0 6px,#1d1f21 6px 12px)",
+        tintActions: false,
+    },
+    "gold-foil": {
+        label: "Gold foil",
+        baseMaterial: "glossy",
+        finish: "linear-gradient(120deg,transparent 30%,#f7e3a11c 45%,transparent 60%)",
+        edge: "#e8e2cf",
+        darkEdge: "#2d3150",
+        shadow: "0 1px 0 #ffffff,0 12px 28px #1d20331a",
+        inset: "inset 0 1px 2px #1d203314",
+        canvas: "radial-gradient(circle at 92% 6%,#e7c56a33,transparent 30%),radial-gradient(1px 1px at 20% 30%,#8a8ea6 50%,transparent),radial-gradient(1px 1px at 70% 80%,#8a8ea6 50%,transparent),radial-gradient(1px 1px at 45% 65%,#8a8ea6 50%,transparent)",
+        tint: ["#fdfdfb", "#0d1020", "#f6f5ef"],
+        grain: "linear-gradient(transparent,transparent)",
+        thumb: "conic-gradient(from 200deg,#f7e3a1,#c9962f,#fff3c9,#a87521,#f7e3a1)",
+        tintActions: false,
+    },
+    "marigold-silk": {
+        label: "Marigold silk",
+        baseMaterial: "soft",
+        finish: "linear-gradient(135deg,#ffffff38,transparent 35%),linear-gradient(315deg,#f08c0010,transparent 40%)",
+        edge: "#efc27a",
+        darkEdge: "#6a2b70",
+        shadow: "0 2px 0 #c2185b14,0 10px 24px #f08c001a",
+        inset: "inset 0 2px 3px #4a103722",
+        canvas: "radial-gradient(circle at 10% 0%,#f08c0024,transparent 40%),radial-gradient(circle at 90% 100%,#c2185b1c,transparent 45%)",
+        tint: ["#fff7ea", "#2a0b2e", "#fff0d9"],
+        grain: "radial-gradient(circle at 1px 1px,#c2185b0a .6px,transparent 1px)",
+        thumb: "radial-gradient(circle,#ffd54f,#f08c00 55%,#c2185b)",
+        tintActions: false,
+    },
+    "red-paper": {
+        label: "Red paper",
+        baseMaterial: "paper",
+        finish: "linear-gradient(180deg,#ffffff24,transparent 30%)",
+        edge: "#c8102e",
+        darkEdge: "#f5c542",
+        shadow: "0 2px 0 #8a102022,0 10px 22px #5a0d1214",
+        inset: "inset 0 2px 3px #5a0d1220",
+        canvas: "radial-gradient(circle at 50% 0,#c8102e10 7px,transparent 7.5px) 0 0/24px 16px",
+        tint: ["#fff4e6", "#7d0a1b", "#fbe9d4"],
+        grain: "radial-gradient(circle at 1px 1px,#8a102010 .6px,transparent 1px),radial-gradient(circle at 3px 2px,#e3ac1f12 .5px,transparent 1px)",
+        thumb: "radial-gradient(circle,#f5c542 0 30%,#c8102e 32%)",
+        tintActions: false,
+    },
+    "fiesta-paper": {
+        label: "Fiesta paper",
+        baseMaterial: "paper",
+        finish: "linear-gradient(170deg,#ffffff30,transparent 35%)",
+        edge: "#f3cfb0",
+        darkEdge: "#4a3870",
+        shadow: "0 2px 0 #3b1f4a12,0 10px 22px #e8590c14",
+        inset: "inset 0 2px 3px #3b1f4a1a",
+        canvas: "radial-gradient(circle at 15% 0%,#d6336c18,transparent 35%),radial-gradient(circle at 85% 0%,#e8590c18,transparent 35%)",
+        tint: ["#fff8f0", "#1e1533", "#fdf0e2"],
+        grain: "radial-gradient(circle at 1px 1px,#7048e80a .6px,transparent 1px)",
+        thumb: "linear-gradient(90deg,#e8590c,#d6336c,#7048e8,#12b886)",
+        tintActions: false,
+    },
+    "powder-wash": {
+        label: "Powder wash",
+        baseMaterial: "soft",
+        finish: "linear-gradient(150deg,#ffffff50,transparent 45%)",
+        edge: "#efe7f2",
+        darkEdge: "#3a3652",
+        shadow: "0 4px 0 #2b244010,0 14px 30px #ff4d9a14",
+        inset: "inset 0 2px 4px #2b244014",
+        canvas: "radial-gradient(circle at 5% 10%,#ff4d9a26,transparent 30%),radial-gradient(circle at 95% 15%,#f5b80026,transparent 30%),radial-gradient(circle at 90% 95%,#20c99722,transparent 32%),radial-gradient(circle at 8% 92%,#4dabf722,transparent 30%)",
+        tint: ["#ffffff", "#1a1824", "#fbf7fb"],
+        grain: "radial-gradient(circle at 1px 1px,#ff4d9a0c .7px,transparent 1.1px),radial-gradient(circle at 3px 3px,#20c9970c .7px,transparent 1.1px)",
+        thumb: "conic-gradient(#ff4d9a,#f5b800,#20c997,#4dabf7,#ff4d9a)",
+        tintActions: false,
+    },
+    wool: {
+        label: "Wool",
+        baseMaterial: "soft",
+        finish: "linear-gradient(180deg,#ffffff26,transparent 40%)",
+        edge: "#e2d4bd",
+        darkEdge: "#2e4334",
+        shadow: "0 3px 0 #2d3b2f12,0 10px 22px #2d3b2f12",
+        inset: "inset 0 2px 3px #2d3b2f1a",
+        canvas: "linear-gradient(135deg,#1f5e3a08 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,#1f5e3a08 25%,transparent 25%) -6px 0/12px 12px",
+        tint: ["#fbf6ee", "#16261c", "#f4ecdf"],
+        grain: "linear-gradient(60deg,#2d3b2f0a 25%,transparent 25% 75%,#2d3b2f0a 75%),linear-gradient(-60deg,#2d3b2f0a 25%,transparent 25% 75%,#2d3b2f0a 75%)",
+        thumb: "linear-gradient(180deg,#1f5e3a 0 40%,#b3261e 40% 60%,#f4ecdd 60%)",
+        tintActions: false,
+    },
+    "liquid-glass": {
+        label: "Liquid glass",
+        baseMaterial: "glossy",
+        finish: "linear-gradient(180deg,#ffffff8c 0,#ffffff1f 18%,transparent 45%,#ffffff14 100%),radial-gradient(120% 60% at 50% -10%,#ffffff40,transparent 60%)",
+        edge: "#ffffffb3",
+        darkEdge: "#ffffff38",
+        shadow: "inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #ffffff40,inset 1px 0 0 #ffffff33,inset -1px 0 0 #ffffff33,0 1px 2px #0a1a3314,0 12px 32px #0a1a3326",
+        inset: "inset 0 1px 3px #0a1a331f,inset 0 -1px 0 #ffffff59",
+        canvas: "radial-gradient(ellipse at 12% 8%,#7ab8ff8c,transparent 50%),radial-gradient(ellipse at 88% 20%,#ff9ad08c,transparent 48%),radial-gradient(ellipse at 70% 95%,#8cf0d073,transparent 50%),radial-gradient(ellipse at 20% 90%,#ffd27a66,transparent 45%)",
+        tint: ["#ffffff73", "#1c2233a6", "#eef2fb"],
+        grain: "linear-gradient(transparent,transparent)",
+        thumb: "radial-gradient(circle at 35% 25%,#ffffff,#ffffffb3 40%,#cfe2ff80 70%,#ffffff4d)",
+        tintActions: false,
+    },
+});
+export const frameRecipes = freezeData({
+    none: {
+        label: "No frame",
+        version: 1,
+        renderer: null,
+        rendererEntry: null,
+        defaults: {
+            width: 0,
+            paddingTop: 24,
+            paddingInline: 24,
+            paddingBottom: 24,
+            inset: 0,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    forest: {
+        version: 1,
+        renderer: "ForestOrnament",
+        rendererEntry: "living-forest/react",
+        label: "Living grove",
+        defaults: {
+            width: 2,
+            paddingTop: 40,
+            paddingInline: 40,
+            paddingBottom: 40,
+            inset: 12,
+            cornerScale: 1,
+            cornerVariation: 0.125,
+        },
+    },
+    pixel: {
+        version: 1,
+        renderer: "RetroOrnament",
+        rendererEntry: "retro-os/react",
+        label: "Pixel bevel",
+        defaults: {
+            width: 2,
+            paddingTop: 24,
+            paddingInline: 24,
+            paddingBottom: 24,
+            inset: 0,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    rails: {
+        version: 1,
+        renderer: "SignalOrnament",
+        rendererEntry: "winamp-signal/react",
+        label: "Signal rails",
+        defaults: {
+            width: 3,
+            paddingTop: 34,
+            paddingInline: 24,
+            paddingBottom: 26,
+            inset: 20,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    ceramic: {
+        version: 1,
+        renderer: "HardwareOrnament",
+        rendererEntry: "studio-hardware/react",
+        label: "Machined shell",
+        defaults: {
+            width: 1,
+            paddingTop: 30,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 14,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    glass: {
+        version: 1,
+        renderer: "PrismOrnament",
+        rendererEntry: "prism-glass/react",
+        label: "Optical rim",
+        defaults: {
+            width: 1,
+            paddingTop: 28,
+            paddingInline: 28,
+            paddingBottom: 28,
+            inset: 6,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    stitch: {
+        version: 1,
+        renderer: "AtelierOrnament",
+        rendererEntry: "tactile-atelier/react",
+        label: "Wood & stitches",
+        defaults: {
+            width: 9,
+            paddingTop: 26,
+            paddingInline: 26,
+            paddingBottom: 26,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    coral: {
+        label: "Tidal ribbons",
+        version: 1,
+        renderer: "OceanOrnament",
+        rendererEntry: "ocean-depths/react",
+        defaults: {
+            width: 1,
+            paddingTop: 48,
+            paddingInline: 40,
+            paddingBottom: 40,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    cushion: {
+        label: "Soft sculpture",
+        version: 1,
+        renderer: "ClayOrnament",
+        rendererEntry: "candy-clay/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 32,
+            paddingBottom: 32,
+            inset: 10,
+            cornerScale: 1.5,
+            cornerVariation: 0.15,
+        },
+    },
+    deco: {
+        label: "Brass inlay",
+        version: 1,
+        renderer: "DecoOrnament",
+        rendererEntry: "art-deco/react",
+        defaults: {
+            width: 2,
+            paddingTop: 36,
+            paddingInline: 36,
+            paddingBottom: 36,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    chamfer: {
+        label: "Titanium chamfer",
+        version: 1,
+        renderer: "TitaniumOrnament",
+        rendererEntry: "y2k-titanium/react",
+        defaults: {
+            width: 3,
+            paddingTop: 30,
+            paddingInline: 28,
+            paddingBottom: 28,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    halo: {
+        label: "Porcelain halo",
+        version: 1,
+        renderer: "LightOrnament",
+        rendererEntry: "material-light/react",
+        defaults: {
+            width: 1,
+            paddingTop: 30,
+            paddingInline: 28,
+            paddingBottom: 28,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    drafting: {
+        label: "Drafting marks",
+        version: 1,
+        renderer: "BlueprintOrnament",
+        rendererEntry: "blueprint/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 34,
+            paddingBottom: 34,
+            inset: 10,
+            cornerScale: 0.5,
+            cornerVariation: 0,
+        },
+    },
+    riso: {
+        label: "Riso print",
+        version: 1,
+        renderer: "RisoOrnament",
+        rendererEntry: "riso-zine/react",
+        defaults: {
+            width: 2,
+            paddingTop: 34,
+            paddingInline: 32,
+            paddingBottom: 32,
+            inset: 10,
+            cornerScale: 0.6,
+            cornerVariation: 0.1,
+        },
+    },
+    neon: {
+        label: "Neon tubes",
+        version: 1,
+        renderer: "NeonOrnament",
+        rendererEntry: "neon-night-market/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 34,
+            paddingBottom: 36,
+            inset: 12,
+            cornerScale: 1.2,
+            cornerVariation: 0,
+        },
+    },
+    sumi: {
+        label: "Ink brush",
+        version: 1,
+        renderer: "SumiOrnament",
+        rendererEntry: "sumi-ink/react",
+        defaults: {
+            width: 0,
+            paddingTop: 38,
+            paddingInline: 36,
+            paddingBottom: 38,
+            inset: 12,
+            cornerScale: 0.5,
+            cornerVariation: 0.2,
+        },
+    },
+    transit: {
+        label: "Transit lines",
+        version: 1,
+        renderer: "TransitOrnament",
+        rendererEntry: "tokyo-transit/react",
+        defaults: {
+            width: 1,
+            paddingTop: 38,
+            paddingInline: 34,
+            paddingBottom: 34,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    // 2026-12 launch frames.
+    crt: {
+        label: "Phosphor CRT",
+        version: 1,
+        renderer: "PhosphorOrnament",
+        rendererEntry: "phosphor-terminal/react",
+        defaults: {
+            width: 1,
+            paddingTop: 30,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 6,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    panes: {
+        label: "TUI panes",
+        version: 1,
+        renderer: "AnsiOrnament",
+        rendererEntry: "ansi-panes/react",
+        defaults: {
+            width: 1,
+            paddingTop: 28,
+            paddingInline: 24,
+            paddingBottom: 30,
+            inset: 6,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    swiss: {
+        label: "Swiss grid",
+        version: 1,
+        renderer: "SwissOrnament",
+        rendererEntry: "swiss-poster/react",
+        defaults: {
+            width: 2,
+            paddingTop: 34,
+            paddingInline: 28,
+            paddingBottom: 28,
+            inset: 8,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    azulejo: {
+        label: "Azulejo tiles",
+        version: 1,
+        renderer: "AzulejoOrnament",
+        rendererEntry: "azulejo-tile/react",
+        defaults: {
+            width: 2,
+            paddingTop: 38,
+            paddingInline: 34,
+            paddingBottom: 34,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    formwork: {
+        label: "Formwork",
+        version: 1,
+        renderer: "BrutalistOrnament",
+        rendererEntry: "brutalist-concrete/react",
+        defaults: {
+            width: 1,
+            paddingTop: 34,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 8,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    atomic: {
+        label: "Atomic age",
+        version: 1,
+        renderer: "AtomicOrnament",
+        rendererEntry: "atomic-lounge/react",
+        defaults: {
+            width: 1,
+            paddingTop: 34,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    hud: {
+        label: "HUD brackets",
+        version: 1,
+        renderer: "HudOrnament",
+        rendererEntry: "orbital-hud/react",
+        defaults: {
+            width: 1,
+            paddingTop: 32,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 8,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    hazard: {
+        label: "Cargo hazard",
+        version: 1,
+        renderer: "FreighterOrnament",
+        rendererEntry: "freighter/react",
+        defaults: {
+            width: 2,
+            paddingTop: 36,
+            paddingInline: 28,
+            paddingBottom: 30,
+            inset: 8,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    orbit: {
+        label: "Solar orbits",
+        version: 1,
+        renderer: "SailOrnament",
+        rendererEntry: "solar-sail/react",
+        defaults: {
+            width: 1,
+            paddingTop: 34,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    rangoli: {
+        label: "Rangoli & diyas",
+        version: 1,
+        renderer: "DiwaliOrnament",
+        rendererEntry: "diwali-lights/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 32,
+            paddingBottom: 36,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    papercut: {
+        label: "Paper-cut",
+        version: 1,
+        renderer: "LunarOrnament",
+        rendererEntry: "lunar-new-year/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 30,
+            paddingBottom: 32,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    picado: {
+        label: "Papel picado",
+        version: 1,
+        renderer: "PicadoOrnament",
+        rendererEntry: "papel-picado/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    gulal: {
+        label: "Colour powder",
+        version: 1,
+        renderer: "HoliOrnament",
+        rendererEntry: "holi-colours/react",
+        defaults: {
+            width: 1,
+            paddingTop: 34,
+            paddingInline: 32,
+            paddingBottom: 32,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    knit: {
+        label: "Knit wool",
+        version: 1,
+        renderer: "YuleOrnament",
+        rendererEntry: "yule-knit/react",
+        defaults: {
+            width: 1,
+            paddingTop: 36,
+            paddingInline: 30,
+            paddingBottom: 30,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+    liquid: {
+        label: "Liquid glass",
+        version: 1,
+        renderer: "GlassOrnament",
+        rendererEntry: "glass-ui/react",
+        defaults: {
+            width: 1,
+            paddingTop: 30,
+            paddingInline: 28,
+            paddingBottom: 28,
+            inset: 10,
+            cornerScale: 1,
+            cornerVariation: 0,
+        },
+    },
+});