@hoardodile/ui 0.1.3 → 0.1.4

package/dist/lib/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","../../src/lib/colors.ts","../../src/lib/tag-surface.ts"],"names":["jsx","jsxs"],"mappings":"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","file":"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","/**\n * Pure color utilities used by tag/category chip rendering.\n *\n * Centralized here so chip components, color pickers, and tests share\n * one definition for \"looks white\"/\"looks black\" and the color-mix\n * blending used to keep chips subtle on cards and sidebars.\n */\n\nexport const TAG_SPECIAL_STYLES = [\n\t\"silver\",\n\t\"gold\",\n\t\"rainbow\",\n\t\"oilslick\",\n\t\"kintsugi\",\n] as const\n\n/** Default color presets shared by every color picker in the app. */\nexport const DEFAULT_COLOR_PRESETS = [\n\t\"#9D9D9D\",\n\t\"#000000\",\n\t\"#FFFFFF\",\n\t\"#27AE60\",\n\t\"#0070DD\",\n\t\"#00BCD4\",\n\t\"#8E44AD\",\n\t\"#FF8000\",\n\t\"#F1C40F\",\n\t\"#E74C3C\",\n] as const\n\nexport type TagSpecialStyle = (typeof TAG_SPECIAL_STYLES)[number]\n\nexport function isSpecialTagStyle(color: string): color is TagSpecialStyle {\n\treturn TAG_SPECIAL_STYLES.includes(color as TagSpecialStyle)\n}\n\nexport type TagChipColors = {\n\treadonly baseBg: string\n\treadonly hoverBg: string\n\treadonly fg: string\n}\n\nconst WHITE_COLOR_PATTERN =\n\t/^(?:#fff(?:fff)?|white|rgba?\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\b)/i\nconst BLACK_COLOR_PATTERN =\n\t/^(?:#000(?:000)?|black|rgba?\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\b)/i\n\n/**\n * Tests whether a CSS color string visually resolves to white in any\n * common short form (`#fff`, `#ffffff`, `white`, `rgb(255,255,255,…)`).\n */\nexport function isWhiteHex(color: string): boolean {\n\tif (color === \"\") return false\n\treturn WHITE_COLOR_PATTERN.test(color.trim())\n}\n\n/** Mirror of {@link isWhiteHex} for black. */\nexport function isBlackHex(color: string): boolean {\n\tif (color === \"\") return false\n\treturn BLACK_COLOR_PATTERN.test(color.trim())\n}\n\n/**\n * Resolve a chip's background/hover/foreground triple for the given\n * `color`. White and black are special-cased so they remain visibly\n * black/white in both light and dark themes instead of vanishing into\n * the chip background.\n */\nexport function computeTagChipColors(color: string): TagChipColors {\n\tif (color === \"\") {\n\t\treturn {\n\t\t\tbaseBg: \"var(--color-muted)\",\n\t\t\thoverBg: \"var(--color-accent)\",\n\t\t\tfg: \"var(--color-foreground)\",\n\t\t}\n\t}\n\tif (isWhiteHex(color)) {\n\t\treturn {\n\t\t\tbaseBg: \"#ffffff\",\n\t\t\thoverBg: \"#f1f5f9\",\n\t\t\tfg: \"#0a0a0a\",\n\t\t}\n\t}\n\tif (isBlackHex(color)) {\n\t\treturn {\n\t\t\tbaseBg: \"#0a0a0a\",\n\t\t\thoverBg: \"#262626\",\n\t\t\tfg: \"#ffffff\",\n\t\t}\n\t}\n\treturn {\n\t\tbaseBg: `color-mix(in srgb, ${color} 6%, var(--color-card))`,\n\t\thoverBg: `color-mix(in srgb, ${color} 20%, var(--color-card))`,\n\t\tfg: color,\n\t}\n}\n","import { getSpecialTagStyleConfig } from \"@hoardodile/ui/components/special-tag-surface\"\nimport {\n\tcomputeTagChipColors,\n\tisSpecialTagStyle,\n\ttype TagSpecialStyle,\n} from \"@hoardodile/ui/lib/colors\"\nimport { cn } from \"@hoardodile/ui/lib/utils\"\nimport type { CSSProperties } from \"react\"\n\nexport type ResolvedTagChipSurface = {\n\treadonly className: string\n\treadonly style: CSSProperties | undefined\n\t/** The special SVG texture to layer under the chip's content, or null. */\n\treadonly texture: TagSpecialStyle | null\n}\n\n/**\n * Resolves a chip's visual surface for a user-assigned color — the single\n * source of chip coloring shared by every tag/category pill in the app.\n *\n * A plain color tints the whole chip (a 6% wash as fill, the color as ink,\n * deepening to the hover tint when `active`); the five special styles\n * (silver, gold, rainbow, oilslick, kintsugi) render their SVG texture;\n * an empty color falls back to the default muted chip, taking the primary\n * fill when `active`.\n */\nexport function resolveTagChipSurface(\n\tcolor: string,\n\tactive: boolean,\n): ResolvedTagChipSurface {\n\tif (isSpecialTagStyle(color)) {\n\t\tconst config = getSpecialTagStyleConfig(color)\n\t\treturn {\n\t\t\tclassName: cn(\n\t\t\t\t\"relative isolate group\",\n\t\t\t\tconfig.default.className,\n\t\t\t\tactive ? config.active?.className : undefined,\n\t\t\t),\n\t\t\tstyle: {\n\t\t\t\t...config.default.style,\n\t\t\t\t...(active ? config.active?.style : {}),\n\t\t\t},\n\t\t\ttexture: color,\n\t\t}\n\t}\n\n\tif (color === \"\") {\n\t\treturn active\n\t\t\t? {\n\t\t\t\t\tclassName: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n\t\t\t\t\tstyle: undefined,\n\t\t\t\t\ttexture: null,\n\t\t\t\t}\n\t\t\t: {\n\t\t\t\t\tclassName: \"bg-muted text-foreground hover:bg-accent\",\n\t\t\t\t\tstyle: undefined,\n\t\t\t\t\ttexture: null,\n\t\t\t\t}\n\t}\n\n\tconst chipColors = computeTagChipColors(color)\n\treturn {\n\t\tclassName: \"bg-(--chip-bg) hover:bg-(--chip-hover-bg)\",\n\t\tstyle: {\n\t\t\t[\"--chip-bg\" as string]: active ? chipColors.hoverBg : chipColors.baseBg,\n\t\t\t[\"--chip-hover-bg\" as string]: chipColors.hoverBg,\n\t\t\tcolor: chipColors.fg,\n\t\t},\n\t\ttexture: null,\n\t}\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoardodile/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "description": "shadcn/ui component library for hoardodile plugin iframes.",
   "keywords": [
@@ -77,7 +77,7 @@
     "react-image-crop": "^11.1.2",
     "react-use": "^17.6.1",
     "tailwind-merge": "^3.6.0",
-    "@hoardodile/i18n": "0.1.3"
+    "@hoardodile/i18n": "0.1.4"
   },
   "peerDependencies": {
     "i18next": "^26.4.0",

package/src/components/popover.tsx

@@ -8,6 +8,7 @@ function Popover({
   open,
   defaultOpen,
   onOpenChange,
+  closeOnBlur = false,
   ...props
 }: Omit<PopoverPrimitive.Root.Props, "onOpenChange"> & {
   /**
@@ -18,12 +19,23 @@ function Popover({
     open: boolean,
     eventDetails?: PopoverPrimitive.Root.ChangeEventDetails,
   ) => void
+} & {
+  /**
+   * Close the popover when the window loses focus. Needed for surfaces
+   * that overlay a cross-origin iframe: Base UI closes on a parent-document
+   * `pointerdown`, which a click inside a sandboxed plugin iframe never
+   * reaches, so without this the plugin click leaves the popover open.
+   * Opt-in so app-wide popovers keep their current behavior.
+   */
+  closeOnBlur?: boolean
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
     defaultOpen ?? false,
   )
   const isControlled = open !== undefined
   const currentOpen = isControlled ? open : uncontrolledOpen
+  const handleOpenChangeRef = React.useRef(handleOpenChange)
+  handleOpenChangeRef.current = handleOpenChange
   function handleOpenChange(
     next: boolean,
     eventDetails?: PopoverPrimitive.Root.ChangeEventDetails,
@@ -32,6 +44,15 @@ function Popover({
     onOpenChange?.(next, eventDetails)
   }
   useMobileBackToClose(currentOpen, handleOpenChange)
+  // A sandboxed plugin iframe click moves focus into the iframe and blurs
+  // the host window; that blur is the only parent-side signal for a
+  // cross-origin iframe interaction, so close on it when opted in.
+  React.useEffect(() => {
+    if (!currentOpen || !closeOnBlur) return
+    const onWindowBlur = () => handleOpenChangeRef.current(false)
+    window.addEventListener("blur", onWindowBlur)
+    return () => window.removeEventListener("blur", onWindowBlur)
+  }, [currentOpen, closeOnBlur])
   return (
     <PopoverPrimitive.Root
       data-slot="popover"

package/src/components/special/gold.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+import type { SpecialTagStyleConfig } from "./types"
+
+function GoldSurface({
+	id,
+	active,
+}: {
+	readonly id: string
+	readonly active?: boolean
+}) {
+	const gradientId = `${id}-gold-gradient`
+	return (
+		<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"
+		>
+			<defs>
+				<linearGradient
+					id={gradientId}
+					x1="0%"
+					y1="0%"
+					x2="100%"
+					y2="0%"
+					gradientTransform="rotate(30, 0.5, 0.5)"
+				>
+					<stop offset="10%" stopColor="#daa520" />
+					<stop offset="30%" stopColor="#ffd700" />
+					<stop offset="50%" stopColor="#f0e68c" />
+					<stop offset="70%" stopColor="#ffd700" />
+					<stop offset="90%" stopColor="#daa520" />
+				</linearGradient>
+			</defs>
+			<rect
+				width="100"
+				height="100"
+				fill={active ? "#8a6d1f" : `url(#${gradientId})`}
+			/>
+			{!active && (
+				<rect
+					x="0"
+					y="0"
+					width="100"
+					height="8"
+					fill="#ffffff"
+					opacity="0.12"
+				/>
+			)}
+		</svg>
+	)
+}
+
+export const goldConfig: SpecialTagStyleConfig = {
+	render: GoldSurface,
+	default: {
+		style: {
+			color: "#725603",
+			boxShadow: "inset 0 0 0 1px rgba(114, 86, 3, 0.2)",
+		},
+	},
+	active: {
+		style: {
+			color: "#ffffff",
+		},
+	},
+}

package/src/components/special/kintsugi.tsx

@@ -0,0 +1,143 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+import type { SpecialTagStyleConfig } from "./types"
+
+function KintsugiSurface({
+	id,
+	active,
+}: {
+	readonly id: string
+	readonly active?: boolean
+}) {
+	if (active) {
+		return (
+			<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"
+			>
+				<rect width="100" height="100" fill="#9a9a8a" />
+			</svg>
+		)
+	}
+
+	const goldGradientId = `${id}-kintsugi-gold`
+
+	return (
+		<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"
+		>
+			<style>{`
+				@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;
+					}
+				}
+			`}</style>
+
+			<defs>
+				<linearGradient id={goldGradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+					<stop offset="0%" stopColor="#b8860b" />
+					<stop offset="35%" stopColor="#ffd700" />
+					<stop offset="50%" stopColor="#fffacd" />
+					<stop offset="65%" stopColor="#ffd700" />
+					<stop offset="100%" stopColor="#b8860b" />
+				</linearGradient>
+			</defs>
+
+			{/* Celadon/cream ceramic base */}
+			<rect width="100" height="100" fill="#d8d4c5" />
+			<rect width="100" height="100" fill="#b8c4b8" opacity="0.35" />
+
+			{/* Subtle surface texture */}
+			<ellipse cx="30" cy="25" rx="40" ry="25" fill="#ffffff" opacity="0.08" />
+			<ellipse cx="75" cy="70" rx="35" ry="28" fill="#000000" opacity="0.04" />
+
+			{/* Crack lines (dark) */}
+			<path
+				d="M 5 20 Q 25 22 35 45 T 60 80"
+				fill="none"
+				stroke="#5a5650"
+				strokeWidth="0.7"
+				opacity="0.45"
+			/>
+			<path
+				d="M 80 10 Q 70 35 85 55 T 55 95"
+				fill="none"
+				stroke="#5a5650"
+				strokeWidth="0.6"
+				opacity="0.40"
+			/>
+			<path
+				d="M 10 70 Q 30 68 45 55 T 75 45"
+				fill="none"
+				stroke="#5a5650"
+				strokeWidth="0.5"
+				opacity="0.38"
+			/>
+
+			{/* Gold repair veins */}
+			<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"
+			/>
+			<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"
+			/>
+			<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"
+			/>
+		</svg>
+	)
+}
+
+export const kintsugiConfig: SpecialTagStyleConfig = {
+	render: KintsugiSurface,
+	default: {
+		style: {
+			color: "#4a4030",
+			boxShadow: "inset 0 0 0 1px rgba(74, 64, 48, 0.12)",
+		},
+	},
+	active: {
+		style: {
+			color: "#ffffff",
+		},
+	},
+}

package/src/components/special/oilslick.tsx

@@ -0,0 +1,138 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+import type { SpecialTagStyleConfig } from "./types"
+
+function OilslickSurface({
+	id,
+	active,
+}: {
+	readonly id: string
+	readonly active?: boolean
+}) {
+	if (active) {
+		return (
+			<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"
+			>
+				<rect width="100" height="100" fill="#1a1a2e" />
+			</svg>
+		)
+	}
+
+	const gradientA = `${id}-oilslick-a`
+	const gradientB = `${id}-oilslick-b`
+	const gradientC = `${id}-oilslick-c`
+
+	return (
+		<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"
+		>
+			<defs>
+				<radialGradient id={gradientA} cx="30%" cy="30%" r="70%">
+					<stop offset="0%" stopColor="#8b5cf6">
+						<animate
+							attributeName="stop-color"
+							values="#8b5cf6;#06b6d4;#8b5cf6"
+							dur="8s"
+							repeatCount="indefinite"
+						/>
+					</stop>
+					<stop offset="60%" stopColor="#1e1b4b" stopOpacity="0.9" />
+					<stop offset="100%" stopColor="#0f0f1a" stopOpacity="0" />
+				</radialGradient>
+				<radialGradient id={gradientB} cx="70%" cy="60%" r="60%">
+					<stop offset="0%" stopColor="#10b981">
+						<animate
+							attributeName="stop-color"
+							values="#10b981;#f59e0b;#ec4899;#10b981"
+							dur="10s"
+							repeatCount="indefinite"
+						/>
+					</stop>
+					<stop offset="55%" stopColor="#1e1b4b" stopOpacity="0.8" />
+					<stop offset="100%" stopColor="#0f0f1a" stopOpacity="0" />
+				</radialGradient>
+				<radialGradient id={gradientC} cx="50%" cy="80%" r="55%">
+					<stop offset="0%" stopColor="#ec4899">
+						<animate
+							attributeName="stop-color"
+							values="#ec4899;#8b5cf6;#06b6d4;#ec4899"
+							dur="7s"
+							repeatCount="indefinite"
+						/>
+					</stop>
+					<stop offset="50%" stopColor="#1e1b4b" stopOpacity="0.7" />
+					<stop offset="100%" stopColor="#0f0f1a" stopOpacity="0" />
+				</radialGradient>
+			</defs>
+
+			<rect width="100" height="100" fill="#0a0a12" />
+			<rect
+				width="100"
+				height="100"
+				fill={`url(#${gradientA})`}
+				opacity="0.85"
+			/>
+			<rect
+				width="100"
+				height="100"
+				fill={`url(#${gradientB})`}
+				opacity="0.75"
+			/>
+			<rect
+				width="100"
+				height="100"
+				fill={`url(#${gradientC})`}
+				opacity="0.70"
+			/>
+
+			{/* Thin oily film highlights */}
+			<path
+				d="M -10 60 Q 25 45 50 60 T 110 55"
+				fill="none"
+				stroke="#ffffff"
+				strokeWidth="0.8"
+				opacity="0.12"
+			>
+				<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"
+				/>
+			</path>
+		</svg>
+	)
+}
+
+export const oilslickConfig: SpecialTagStyleConfig = {
+	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",
+		},
+	},
+}

package/src/components/special/rainbow.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+import type { SpecialTagStyleConfig } from "./types"
+
+function RainbowSurface({
+	id,
+	active,
+}: {
+	readonly id: string
+	readonly active?: boolean
+}) {
+	const gradientId = `${id}-rainbow-gradient`
+	return (
+		<svg
+			className={cn(
+				"size-full",
+				!active && "group-hover:[filter:brightness(1.08)]",
+			)}
+			width="100%"
+			height="100%"
+			viewBox="0 0 100 100"
+			preserveAspectRatio="none"
+		>
+			<defs>
+				<linearGradient
+					id={gradientId}
+					x1="0%"
+					y1="0%"
+					x2="100%"
+					y2="0%"
+					gradientTransform="rotate(30, 0.5, 0.5)"
+				>
+					<stop offset="0%" stopColor="#fbffca" />
+					<stop offset="33%" stopColor="#baffbf" />
+					<stop offset="66%" stopColor="#a7efff" />
+					<stop offset="100%" stopColor="#ffabff" />
+				</linearGradient>
+			</defs>
+			<rect
+				width="100"
+				height="100"
+				fill={active ? "#005458" : `url(#${gradientId})`}
+			/>
+		</svg>
+	)
+}
+
+export const rainbowConfig: SpecialTagStyleConfig = {
+	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",
+		},
+	},
+}

package/src/components/special/silver.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+import type { SpecialTagStyleConfig } from "./types"
+
+function SilverSurface({
+	id,
+	active,
+}: {
+	readonly id: string
+	readonly active?: boolean
+}) {
+	const gradientId = `${id}-silver-gradient`
+	return (
+		<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"
+		>
+			<defs>
+				<linearGradient
+					id={gradientId}
+					x1="0%"
+					y1="0%"
+					x2="100%"
+					y2="0%"
+					gradientTransform="rotate(30, 0.5, 0.5)"
+				>
+					<stop offset="10%" stopColor="#afaeae" />
+					<stop offset="30%" stopColor="#d6d6d6" />
+					<stop offset="50%" stopColor="#eeeeee" />
+					<stop offset="70%" stopColor="#d6d6d6" />
+					<stop offset="90%" stopColor="#afaeae" />
+				</linearGradient>
+			</defs>
+			<rect
+				width="100"
+				height="100"
+				fill={active ? "#5a5a5a" : `url(#${gradientId})`}
+			/>
+			{!active && (
+				<rect
+					x="0"
+					y="0"
+					width="100"
+					height="8"
+					fill="#ffffff"
+					opacity="0.16"
+				/>
+			)}
+		</svg>
+	)
+}
+
+export const silverConfig: SpecialTagStyleConfig = {
+	render: SilverSurface,
+	default: {
+		style: {
+			color: "#2a2a2a",
+			boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.08)",
+		},
+	},
+	active: {
+		style: {
+			color: "#ffffff",
+		},
+	},
+}

package/src/components/special/types.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactElement } from "react"
+
+export type SpecialTagSurfaceRendererProps = {
+	readonly id: string
+	readonly active?: boolean
+}
+
+export type SpecialTagSurfaceRenderer = (
+	props: SpecialTagSurfaceRendererProps,
+) => ReactElement
+
+export type SpecialTagStyleAppearance = {
+	readonly className?: string
+	readonly style?: CSSProperties
+}
+
+export type SpecialTagStyleConfig = {
+	readonly render: SpecialTagSurfaceRenderer
+	readonly default: SpecialTagStyleAppearance
+	readonly active?: SpecialTagStyleAppearance
+}