@hoardodile/ui 0.1.3 → 0.1.5

package/dist/components/special-tag-surface.js

@@ -0,0 +1,533 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function GoldSurface({
+  id,
+  active
+}) {
+  const gradientId = `${id}-gold-gradient`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "size-full",
+        !active && "[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]"
+      ),
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            gradientTransform: "rotate(30, 0.5, 0.5)",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "#daa520" }),
+              /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "#ffd700" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#f0e68c" }),
+              /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "#ffd700" }),
+              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "#daa520" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: active ? "#8a6d1f" : `url(#${gradientId})`
+          }
+        ),
+        !active && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0",
+            y: "0",
+            width: "100",
+            height: "8",
+            fill: "#ffffff",
+            opacity: "0.12"
+          }
+        )
+      ]
+    }
+  );
+}
+var goldConfig = {
+  render: GoldSurface,
+  default: {
+    style: {
+      color: "#725603",
+      boxShadow: "inset 0 0 0 1px rgba(114, 86, 3, 0.2)"
+    }
+  },
+  active: {
+    style: {
+      color: "#ffffff"
+    }
+  }
+};
+function KintsugiSurface({
+  id,
+  active
+}) {
+  if (active) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: cn(
+          "size-full",
+          !active && "[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]"
+        ),
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        children: /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#9a9a8a" })
+      }
+    );
+  }
+  const goldGradientId = `${id}-kintsugi-gold`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "size-full",
+        !active && "[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]"
+      ),
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+				@keyframes ${id}-gold-shimmer {
+					0% { stroke-dashoffset: 60; }
+					100% { stroke-dashoffset: 0; }
+				}
+				.${id}-gold-vein {
+					stroke-dasharray: 30 30;
+					animation: ${id}-gold-shimmer 5s linear infinite;
+				}
+				@media (prefers-reduced-motion: reduce) {
+					.${id}-gold-vein {
+						animation: none;
+					}
+				}
+			` }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: goldGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#b8860b" }),
+          /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: "#ffd700" }),
+          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#fffacd" }),
+          /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: "#ffd700" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#b8860b" })
+        ] }) }),
+        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#d8d4c5" }),
+        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#b8c4b8", opacity: "0.35" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: "30", cy: "25", rx: "40", ry: "25", fill: "#ffffff", opacity: "0.08" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: "75", cy: "70", rx: "35", ry: "28", fill: "#000000", opacity: "0.04" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 5 20 Q 25 22 35 45 T 60 80",
+            fill: "none",
+            stroke: "#5a5650",
+            strokeWidth: "0.7",
+            opacity: "0.45"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 80 10 Q 70 35 85 55 T 55 95",
+            fill: "none",
+            stroke: "#5a5650",
+            strokeWidth: "0.6",
+            opacity: "0.40"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 10 70 Q 30 68 45 55 T 75 45",
+            fill: "none",
+            stroke: "#5a5650",
+            strokeWidth: "0.5",
+            opacity: "0.38"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: `${id}-gold-vein`,
+            d: "M 4 18 Q 24 20 34 43 T 58 78",
+            fill: "none",
+            stroke: `url(#${goldGradientId})`,
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: `${id}-gold-vein`,
+            d: "M 82 8 Q 72 33 87 53 T 53 93",
+            fill: "none",
+            stroke: `url(#${goldGradientId})`,
+            strokeWidth: "1.2",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: `${id}-gold-vein`,
+            d: "M 8 68 Q 28 66 43 53 T 73 43",
+            fill: "none",
+            stroke: `url(#${goldGradientId})`,
+            strokeWidth: "1.0",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var kintsugiConfig = {
+  render: KintsugiSurface,
+  default: {
+    style: {
+      color: "#4a4030",
+      boxShadow: "inset 0 0 0 1px rgba(74, 64, 48, 0.12)"
+    }
+  },
+  active: {
+    style: {
+      color: "#ffffff"
+    }
+  }
+};
+function OilslickSurface({
+  id,
+  active
+}) {
+  if (active) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: cn(
+          "size-full",
+          !active && "[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]"
+        ),
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        children: /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#1a1a2e" })
+      }
+    );
+  }
+  const gradientA = `${id}-oilslick-a`;
+  const gradientB = `${id}-oilslick-b`;
+  const gradientC = `${id}-oilslick-c`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "size-full",
+        !active && "[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]"
+      ),
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("radialGradient", { id: gradientA, cx: "30%", cy: "30%", r: "70%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#8b5cf6", children: /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "stop-color",
+                values: "#8b5cf6;#06b6d4;#8b5cf6",
+                dur: "8s",
+                repeatCount: "indefinite"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#1e1b4b", stopOpacity: "0.9" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: gradientB, cx: "70%", cy: "60%", r: "60%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#10b981", children: /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "stop-color",
+                values: "#10b981;#f59e0b;#ec4899;#10b981",
+                dur: "10s",
+                repeatCount: "indefinite"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("stop", { offset: "55%", stopColor: "#1e1b4b", stopOpacity: "0.8" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: gradientC, cx: "50%", cy: "80%", r: "55%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ec4899", children: /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "stop-color",
+                values: "#ec4899;#8b5cf6;#06b6d4;#ec4899",
+                dur: "7s",
+                repeatCount: "indefinite"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#1e1b4b", stopOpacity: "0.7" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#0a0a12" }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: `url(#${gradientA})`,
+            opacity: "0.85"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: `url(#${gradientB})`,
+            opacity: "0.75"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: `url(#${gradientC})`,
+            opacity: "0.70"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M -10 60 Q 25 45 50 60 T 110 55",
+            fill: "none",
+            stroke: "#ffffff",
+            strokeWidth: "0.8",
+            opacity: "0.12",
+            children: /* @__PURE__ */ jsx(
+              "animate",
+              {
+                attributeName: "d",
+                values: "M -10 60 Q 25 45 50 60 T 110 55;M -10 55 Q 30 70 55 50 T 110 65;M -10 60 Q 25 45 50 60 T 110 55",
+                dur: "12s",
+                repeatCount: "indefinite"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var oilslickConfig = {
+  render: OilslickSurface,
+  default: {
+    style: {
+      color: "#ffffff",
+      boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(139, 92, 246, 0.20)"
+    }
+  },
+  active: {
+    style: {
+      color: "#ffffff"
+    }
+  }
+};
+function RainbowSurface({
+  id,
+  active
+}) {
+  const gradientId = `${id}-rainbow-gradient`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "size-full",
+        !active && "group-hover:[filter:brightness(1.08)]"
+      ),
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            gradientTransform: "rotate(30, 0.5, 0.5)",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#fbffca" }),
+              /* @__PURE__ */ jsx("stop", { offset: "33%", stopColor: "#baffbf" }),
+              /* @__PURE__ */ jsx("stop", { offset: "66%", stopColor: "#a7efff" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ffabff" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: active ? "#005458" : `url(#${gradientId})`
+          }
+        )
+      ]
+    }
+  );
+}
+var rainbowConfig = {
+  render: RainbowSurface,
+  default: {
+    className: "font-bold dark:[text-shadow:0_0_5px_rgba(0,0,0,0.5)]",
+    style: {
+      color: "#ffffff",
+      textShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
+      boxShadow: "inset 0 0 0 1px rgba(0, 247, 255, 0.1)"
+    }
+  },
+  active: {
+    style: {
+      color: "#ffffff"
+    }
+  }
+};
+function SilverSurface({
+  id,
+  active
+}) {
+  const gradientId = `${id}-silver-gradient`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "size-full",
+        !active && "[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]"
+      ),
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            gradientTransform: "rotate(30, 0.5, 0.5)",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "#afaeae" }),
+              /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "#d6d6d6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#eeeeee" }),
+              /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "#d6d6d6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "#afaeae" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100",
+            height: "100",
+            fill: active ? "#5a5a5a" : `url(#${gradientId})`
+          }
+        ),
+        !active && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0",
+            y: "0",
+            width: "100",
+            height: "8",
+            fill: "#ffffff",
+            opacity: "0.16"
+          }
+        )
+      ]
+    }
+  );
+}
+var silverConfig = {
+  render: SilverSurface,
+  default: {
+    style: {
+      color: "#2a2a2a",
+      boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.08)"
+    }
+  },
+  active: {
+    style: {
+      color: "#ffffff"
+    }
+  }
+};
+var SPECIAL_TAG_CONFIG = {
+  silver: silverConfig,
+  gold: goldConfig,
+  rainbow: rainbowConfig,
+  oilslick: oilslickConfig,
+  kintsugi: kintsugiConfig
+};
+function getSpecialTagStyleConfig(style) {
+  return SPECIAL_TAG_CONFIG[style];
+}
+function SpecialTagSurface(props) {
+  const { style, active, className } = props;
+  const config = SPECIAL_TAG_CONFIG[style];
+  const Renderer = config.render;
+  const reactId = useId();
+  const safeId = reactId.replace(/:/g, "-");
+  return /* @__PURE__ */ jsx("span", { className: cn(className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(Renderer, { id: safeId, active }) });
+}
+
+export { SpecialTagSurface, getSpecialTagStyleConfig };
+//# sourceMappingURL=special-tag-surface.js.map
+//# sourceMappingURL=special-tag-surface.js.map

package/dist/components/special-tag-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/special/gold.tsx","../../src/components/special/kintsugi.tsx","../../src/components/special/oilslick.tsx","../../src/components/special/rainbow.tsx","../../src/components/special/silver.tsx","../../src/components/special-tag-surface.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"special-tag-surface.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\n\nimport type { SpecialTagStyleConfig } from \"./types\"\n\nfunction GoldSurface({\n\tid,\n\tactive,\n}: {\n\treadonly id: string\n\treadonly active?: boolean\n}) {\n\tconst gradientId = `${id}-gold-gradient`\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t\"size-full\",\n\t\t\t\t!active &&\n\t\t\t\t\t\"[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]\",\n\t\t\t)}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"100%\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"none\"\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<linearGradient\n\t\t\t\t\tid={gradientId}\n\t\t\t\t\tx1=\"0%\"\n\t\t\t\t\ty1=\"0%\"\n\t\t\t\t\tx2=\"100%\"\n\t\t\t\t\ty2=\"0%\"\n\t\t\t\t\tgradientTransform=\"rotate(30, 0.5, 0.5)\"\n\t\t\t\t>\n\t\t\t\t\t<stop offset=\"10%\" stopColor=\"#daa520\" />\n\t\t\t\t\t<stop offset=\"30%\" stopColor=\"#ffd700\" />\n\t\t\t\t\t<stop offset=\"50%\" stopColor=\"#f0e68c\" />\n\t\t\t\t\t<stop offset=\"70%\" stopColor=\"#ffd700\" />\n\t\t\t\t\t<stop offset=\"90%\" stopColor=\"#daa520\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={active ? \"#8a6d1f\" : `url(#${gradientId})`}\n\t\t\t/>\n\t\t\t{!active && (\n\t\t\t\t<rect\n\t\t\t\t\tx=\"0\"\n\t\t\t\t\ty=\"0\"\n\t\t\t\t\twidth=\"100\"\n\t\t\t\t\theight=\"8\"\n\t\t\t\t\tfill=\"#ffffff\"\n\t\t\t\t\topacity=\"0.12\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nexport const goldConfig: SpecialTagStyleConfig = {\n\trender: GoldSurface,\n\tdefault: {\n\t\tstyle: {\n\t\t\tcolor: \"#725603\",\n\t\t\tboxShadow: \"inset 0 0 0 1px rgba(114, 86, 3, 0.2)\",\n\t\t},\n\t},\n\tactive: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t},\n\t},\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\n\nimport type { SpecialTagStyleConfig } from \"./types\"\n\nfunction KintsugiSurface({\n\tid,\n\tactive,\n}: {\n\treadonly id: string\n\treadonly active?: boolean\n}) {\n\tif (active) {\n\t\treturn (\n\t\t\t<svg\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"size-full\",\n\t\t\t\t\t!active &&\n\t\t\t\t\t\t\"[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]\",\n\t\t\t\t)}\n\t\t\t\twidth=\"100%\"\n\t\t\t\theight=\"100%\"\n\t\t\t\tviewBox=\"0 0 100 100\"\n\t\t\t\tpreserveAspectRatio=\"none\"\n\t\t\t>\n\t\t\t\t<rect width=\"100\" height=\"100\" fill=\"#9a9a8a\" />\n\t\t\t</svg>\n\t\t)\n\t}\n\n\tconst goldGradientId = `${id}-kintsugi-gold`\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t\"size-full\",\n\t\t\t\t!active &&\n\t\t\t\t\t\"[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]\",\n\t\t\t)}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"100%\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"none\"\n\t\t>\n\t\t\t<style>{`\n\t\t\t\t@keyframes ${id}-gold-shimmer {\n\t\t\t\t\t0% { stroke-dashoffset: 60; }\n\t\t\t\t\t100% { stroke-dashoffset: 0; }\n\t\t\t\t}\n\t\t\t\t.${id}-gold-vein {\n\t\t\t\t\tstroke-dasharray: 30 30;\n\t\t\t\t\tanimation: ${id}-gold-shimmer 5s linear infinite;\n\t\t\t\t}\n\t\t\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\t\t\t.${id}-gold-vein {\n\t\t\t\t\t\tanimation: none;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t`}</style>\n\n\t\t\t<defs>\n\t\t\t\t<linearGradient id={goldGradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#b8860b\" />\n\t\t\t\t\t<stop offset=\"35%\" stopColor=\"#ffd700\" />\n\t\t\t\t\t<stop offset=\"50%\" stopColor=\"#fffacd\" />\n\t\t\t\t\t<stop offset=\"65%\" stopColor=\"#ffd700\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#b8860b\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\n\t\t\t{/* Celadon/cream ceramic base */}\n\t\t\t<rect width=\"100\" height=\"100\" fill=\"#d8d4c5\" />\n\t\t\t<rect width=\"100\" height=\"100\" fill=\"#b8c4b8\" opacity=\"0.35\" />\n\n\t\t\t{/* Subtle surface texture */}\n\t\t\t<ellipse cx=\"30\" cy=\"25\" rx=\"40\" ry=\"25\" fill=\"#ffffff\" opacity=\"0.08\" />\n\t\t\t<ellipse cx=\"75\" cy=\"70\" rx=\"35\" ry=\"28\" fill=\"#000000\" opacity=\"0.04\" />\n\n\t\t\t{/* Crack lines (dark) */}\n\t\t\t<path\n\t\t\t\td=\"M 5 20 Q 25 22 35 45 T 60 80\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"#5a5650\"\n\t\t\t\tstrokeWidth=\"0.7\"\n\t\t\t\topacity=\"0.45\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M 80 10 Q 70 35 85 55 T 55 95\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"#5a5650\"\n\t\t\t\tstrokeWidth=\"0.6\"\n\t\t\t\topacity=\"0.40\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M 10 70 Q 30 68 45 55 T 75 45\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"#5a5650\"\n\t\t\t\tstrokeWidth=\"0.5\"\n\t\t\t\topacity=\"0.38\"\n\t\t\t/>\n\n\t\t\t{/* Gold repair veins */}\n\t\t\t<path\n\t\t\t\tclassName={`${id}-gold-vein`}\n\t\t\t\td=\"M 4 18 Q 24 20 34 43 T 58 78\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke={`url(#${goldGradientId})`}\n\t\t\t\tstrokeWidth=\"1.4\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tclassName={`${id}-gold-vein`}\n\t\t\t\td=\"M 82 8 Q 72 33 87 53 T 53 93\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke={`url(#${goldGradientId})`}\n\t\t\t\tstrokeWidth=\"1.2\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tclassName={`${id}-gold-vein`}\n\t\t\t\td=\"M 8 68 Q 28 66 43 53 T 73 43\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke={`url(#${goldGradientId})`}\n\t\t\t\tstrokeWidth=\"1.0\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n\nexport const kintsugiConfig: SpecialTagStyleConfig = {\n\trender: KintsugiSurface,\n\tdefault: {\n\t\tstyle: {\n\t\t\tcolor: \"#4a4030\",\n\t\t\tboxShadow: \"inset 0 0 0 1px rgba(74, 64, 48, 0.12)\",\n\t\t},\n\t},\n\tactive: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t},\n\t},\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\n\nimport type { SpecialTagStyleConfig } from \"./types\"\n\nfunction OilslickSurface({\n\tid,\n\tactive,\n}: {\n\treadonly id: string\n\treadonly active?: boolean\n}) {\n\tif (active) {\n\t\treturn (\n\t\t\t<svg\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"size-full\",\n\t\t\t\t\t!active &&\n\t\t\t\t\t\t\"[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]\",\n\t\t\t\t)}\n\t\t\t\twidth=\"100%\"\n\t\t\t\theight=\"100%\"\n\t\t\t\tviewBox=\"0 0 100 100\"\n\t\t\t\tpreserveAspectRatio=\"none\"\n\t\t\t>\n\t\t\t\t<rect width=\"100\" height=\"100\" fill=\"#1a1a2e\" />\n\t\t\t</svg>\n\t\t)\n\t}\n\n\tconst gradientA = `${id}-oilslick-a`\n\tconst gradientB = `${id}-oilslick-b`\n\tconst gradientC = `${id}-oilslick-c`\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t\"size-full\",\n\t\t\t\t!active &&\n\t\t\t\t\t\"[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]\",\n\t\t\t)}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"100%\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"none\"\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<radialGradient id={gradientA} cx=\"30%\" cy=\"30%\" r=\"70%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#8b5cf6\">\n\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\tattributeName=\"stop-color\"\n\t\t\t\t\t\t\tvalues=\"#8b5cf6;#06b6d4;#8b5cf6\"\n\t\t\t\t\t\t\tdur=\"8s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</stop>\n\t\t\t\t\t<stop offset=\"60%\" stopColor=\"#1e1b4b\" stopOpacity=\"0.9\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#0f0f1a\" stopOpacity=\"0\" />\n\t\t\t\t</radialGradient>\n\t\t\t\t<radialGradient id={gradientB} cx=\"70%\" cy=\"60%\" r=\"60%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#10b981\">\n\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\tattributeName=\"stop-color\"\n\t\t\t\t\t\t\tvalues=\"#10b981;#f59e0b;#ec4899;#10b981\"\n\t\t\t\t\t\t\tdur=\"10s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</stop>\n\t\t\t\t\t<stop offset=\"55%\" stopColor=\"#1e1b4b\" stopOpacity=\"0.8\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#0f0f1a\" stopOpacity=\"0\" />\n\t\t\t\t</radialGradient>\n\t\t\t\t<radialGradient id={gradientC} cx=\"50%\" cy=\"80%\" r=\"55%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#ec4899\">\n\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\tattributeName=\"stop-color\"\n\t\t\t\t\t\t\tvalues=\"#ec4899;#8b5cf6;#06b6d4;#ec4899\"\n\t\t\t\t\t\t\tdur=\"7s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</stop>\n\t\t\t\t\t<stop offset=\"50%\" stopColor=\"#1e1b4b\" stopOpacity=\"0.7\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#0f0f1a\" stopOpacity=\"0\" />\n\t\t\t\t</radialGradient>\n\t\t\t</defs>\n\n\t\t\t<rect width=\"100\" height=\"100\" fill=\"#0a0a12\" />\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={`url(#${gradientA})`}\n\t\t\t\topacity=\"0.85\"\n\t\t\t/>\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={`url(#${gradientB})`}\n\t\t\t\topacity=\"0.75\"\n\t\t\t/>\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={`url(#${gradientC})`}\n\t\t\t\topacity=\"0.70\"\n\t\t\t/>\n\n\t\t\t{/* Thin oily film highlights */}\n\t\t\t<path\n\t\t\t\td=\"M -10 60 Q 25 45 50 60 T 110 55\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"#ffffff\"\n\t\t\t\tstrokeWidth=\"0.8\"\n\t\t\t\topacity=\"0.12\"\n\t\t\t>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"d\"\n\t\t\t\t\tvalues=\"M -10 60 Q 25 45 50 60 T 110 55;M -10 55 Q 30 70 55 50 T 110 65;M -10 60 Q 25 45 50 60 T 110 55\"\n\t\t\t\t\tdur=\"12s\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t/>\n\t\t\t</path>\n\t\t</svg>\n\t)\n}\n\nexport const oilslickConfig: SpecialTagStyleConfig = {\n\trender: OilslickSurface,\n\tdefault: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t\tboxShadow:\n\t\t\t\t\"inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(139, 92, 246, 0.20)\",\n\t\t},\n\t},\n\tactive: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t},\n\t},\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\n\nimport type { SpecialTagStyleConfig } from \"./types\"\n\nfunction RainbowSurface({\n\tid,\n\tactive,\n}: {\n\treadonly id: string\n\treadonly active?: boolean\n}) {\n\tconst gradientId = `${id}-rainbow-gradient`\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t\"size-full\",\n\t\t\t\t!active && \"group-hover:[filter:brightness(1.08)]\",\n\t\t\t)}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"100%\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"none\"\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<linearGradient\n\t\t\t\t\tid={gradientId}\n\t\t\t\t\tx1=\"0%\"\n\t\t\t\t\ty1=\"0%\"\n\t\t\t\t\tx2=\"100%\"\n\t\t\t\t\ty2=\"0%\"\n\t\t\t\t\tgradientTransform=\"rotate(30, 0.5, 0.5)\"\n\t\t\t\t>\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#fbffca\" />\n\t\t\t\t\t<stop offset=\"33%\" stopColor=\"#baffbf\" />\n\t\t\t\t\t<stop offset=\"66%\" stopColor=\"#a7efff\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#ffabff\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={active ? \"#005458\" : `url(#${gradientId})`}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n\nexport const rainbowConfig: SpecialTagStyleConfig = {\n\trender: RainbowSurface,\n\tdefault: {\n\t\tclassName: \"font-bold dark:[text-shadow:0_0_5px_rgba(0,0,0,0.5)]\",\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t\ttextShadow: \"0 0 5px rgba(0, 0, 0, 0.2)\",\n\t\t\tboxShadow: \"inset 0 0 0 1px rgba(0, 247, 255, 0.1)\",\n\t\t},\n\t},\n\tactive: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t},\n\t},\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\n\nimport type { SpecialTagStyleConfig } from \"./types\"\n\nfunction SilverSurface({\n\tid,\n\tactive,\n}: {\n\treadonly id: string\n\treadonly active?: boolean\n}) {\n\tconst gradientId = `${id}-silver-gradient`\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t\"size-full\",\n\t\t\t\t!active &&\n\t\t\t\t\t\"[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]\",\n\t\t\t)}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"100%\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"none\"\n\t\t>\n\t\t\t<defs>\n\t\t\t\t<linearGradient\n\t\t\t\t\tid={gradientId}\n\t\t\t\t\tx1=\"0%\"\n\t\t\t\t\ty1=\"0%\"\n\t\t\t\t\tx2=\"100%\"\n\t\t\t\t\ty2=\"0%\"\n\t\t\t\t\tgradientTransform=\"rotate(30, 0.5, 0.5)\"\n\t\t\t\t>\n\t\t\t\t\t<stop offset=\"10%\" stopColor=\"#afaeae\" />\n\t\t\t\t\t<stop offset=\"30%\" stopColor=\"#d6d6d6\" />\n\t\t\t\t\t<stop offset=\"50%\" stopColor=\"#eeeeee\" />\n\t\t\t\t\t<stop offset=\"70%\" stopColor=\"#d6d6d6\" />\n\t\t\t\t\t<stop offset=\"90%\" stopColor=\"#afaeae\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<rect\n\t\t\t\twidth=\"100\"\n\t\t\t\theight=\"100\"\n\t\t\t\tfill={active ? \"#5a5a5a\" : `url(#${gradientId})`}\n\t\t\t/>\n\t\t\t{!active && (\n\t\t\t\t<rect\n\t\t\t\t\tx=\"0\"\n\t\t\t\t\ty=\"0\"\n\t\t\t\t\twidth=\"100\"\n\t\t\t\t\theight=\"8\"\n\t\t\t\t\tfill=\"#ffffff\"\n\t\t\t\t\topacity=\"0.16\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nexport const silverConfig: SpecialTagStyleConfig = {\n\trender: SilverSurface,\n\tdefault: {\n\t\tstyle: {\n\t\t\tcolor: \"#2a2a2a\",\n\t\t\tboxShadow: \"inset 0 0 0 1px rgba(0, 0, 0, 0.08)\",\n\t\t},\n\t},\n\tactive: {\n\t\tstyle: {\n\t\t\tcolor: \"#ffffff\",\n\t\t},\n\t},\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport { useId } from \"react\"\nimport type { TagSpecialStyle } from \"@hoardodile/ui/lib/colors\"\nimport { goldConfig } from \"./special/gold\"\nimport { kintsugiConfig } from \"./special/kintsugi\"\nimport { oilslickConfig } from \"./special/oilslick\"\nimport { rainbowConfig } from \"./special/rainbow\"\nimport { silverConfig } from \"./special/silver\"\nimport type { SpecialTagStyleConfig } from \"./special/types\"\n\nexport type SpecialTagSurfaceProps = {\n\treadonly style: TagSpecialStyle\n\treadonly active?: boolean\n\treadonly className?: string\n}\n\nconst SPECIAL_TAG_CONFIG: Record<TagSpecialStyle, SpecialTagStyleConfig> = {\n\tsilver: silverConfig,\n\tgold: goldConfig,\n\trainbow: rainbowConfig,\n\toilslick: oilslickConfig,\n\tkintsugi: kintsugiConfig,\n}\n\nexport function getSpecialTagStyleConfig(\n\tstyle: TagSpecialStyle,\n): SpecialTagStyleConfig {\n\treturn SPECIAL_TAG_CONFIG[style]\n}\n\n/**\n * SVG background surface for special tag styles.\n *\n * Each style owns a self-contained SVG renderer in `src/components/special/`.\n * This component only picks the right renderer from the registry and applies\n * positioning; all styling (filters, colors, shadows) lives in the renderer or\n * the chip container config.\n */\nexport function SpecialTagSurface(props: SpecialTagSurfaceProps) {\n\tconst { style, active, className } = props\n\tconst config = SPECIAL_TAG_CONFIG[style]\n\tconst Renderer = config.render\n\tconst reactId = useId()\n\t// React useId() can produce ids containing colons, which break SVG\n\t// url(#id) references in some browsers. Replace them with a safe delimiter.\n\tconst safeId = reactId.replace(/:/g, \"-\")\n\n\treturn (\n\t\t<span className={cn(className)} aria-hidden=\"true\">\n\t\t\t<Renderer id={safeId} active={active} />\n\t\t</span>\n\t)\n}\n"]}