@toolr/ui-design 0.1.3 → 0.1.4

package/dist/index.js

@@ -166,7 +166,7 @@ function AiToolIcon({ tool, size, showName, className, style }) {
   if (!showName) return img;
   return /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 4 }, children: [
     img,
-    /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-neutral-400", children: AI_TOOL_NAMES[tool] ?? tool })
+    /* @__PURE__ */ jsx2("span", { className: "text-xss text-neutral-400", children: AI_TOOL_NAMES[tool] ?? tool })
   ] });
 }
 
@@ -798,10 +798,10 @@ var progressFillColors = {
   sky: "bg-sky-500/20"
 };
 var sizeConfig = {
-  xss: { height: 14, padding: "px-1", text: "text-[9px]", iconSize: "w-2 h-2", gap: "gap-0.5" },
-  xs: { height: 16, padding: "px-1.5", text: "text-[10px]", iconSize: "w-2.5 h-2.5", gap: "gap-1" },
-  sm: { height: 18, padding: "px-1.5", text: "text-[10px]", iconSize: "w-2.5 h-2.5", gap: "gap-1.5" },
-  md: { height: 20, padding: "px-1.5", text: "text-[11px]", iconSize: "w-3 h-3", gap: "gap-1" },
+  xss: { height: 14, padding: "px-1", text: "text-xss", iconSize: "w-2 h-2", gap: "gap-0.5" },
+  xs: { height: 16, padding: "px-1.5", text: "text-xss", iconSize: "w-2.5 h-2.5", gap: "gap-1" },
+  sm: { height: 18, padding: "px-1.5", text: "text-xss", iconSize: "w-2.5 h-2.5", gap: "gap-1.5" },
+  md: { height: 20, padding: "px-1.5", text: "text-xss", iconSize: "w-3 h-3", gap: "gap-1" },
   lg: { height: 22, padding: "px-2", text: "text-xs", iconSize: "w-3 h-3", gap: "gap-1" }
 };
 function smartCapitalize(value) {
@@ -906,10 +906,10 @@ var colorClasses3 = {
   teal: "border-teal-500/30 text-teal-400"
 };
 var sizeClasses2 = {
-  xss: "min-w-[14px] h-[14px] px-0.5 text-[9px]",
-  xs: "min-w-[16px] h-[16px] px-1 text-[10px]",
-  sm: "min-w-[18px] h-[18px] px-1 text-[10px]",
-  md: "min-w-[20px] h-[20px] px-1.5 text-[11px]",
+  xss: "min-w-[14px] h-[14px] px-0.5 text-xss",
+  xs: "min-w-[16px] h-[16px] px-1 text-xss",
+  sm: "min-w-[18px] h-[18px] px-1 text-xss",
+  md: "min-w-[20px] h-[20px] px-1.5 text-xss",
   lg: "min-w-[22px] h-[22px] px-1.5 text-xs"
 };
 function Badge({
@@ -1160,7 +1160,7 @@ import { forwardRef, useEffect as useEffect2, useRef as useRef2, useState as use
 import { Search as Search2, X as X2, Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var sizeClasses4 = {
-  xss: "px-1 py-0.5 text-[10px]",
+  xss: "px-1 py-0.5 text-xss",
   xs: "px-1.5 py-0.5 text-xs",
   sm: "px-2 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
@@ -1332,7 +1332,7 @@ import { useState as useState3, useRef as useRef3, useCallback } from "react";
 import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown2 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var SIZE_CONFIG = {
-  xss: { wrapper: "h-[18px]", input: "px-1 text-[10px]", chevron: "w-2.5 h-2.5", stepperW: "w-4" },
+  xss: { wrapper: "h-[18px]", input: "px-1 text-xss", chevron: "w-2.5 h-2.5", stepperW: "w-4" },
   xs: { wrapper: "h-6", input: "px-1.5 text-xs", chevron: "w-2.5 h-2.5", stepperW: "w-5" },
   sm: { wrapper: "h-7", input: "px-2 text-xs", chevron: "w-3 h-3", stepperW: "w-5" },
   md: { wrapper: "h-8", input: "px-3 text-sm", chevron: "w-3 h-3", stepperW: "w-6" },
@@ -1546,8 +1546,8 @@ var ICON_SIZE_CLASSES = {
   lg: "w-9 h-9"
 };
 var TEXT_SIZE_CLASSES = {
-  xss: "h-[18px] px-1.5 text-[9px]",
-  xs: "h-6 px-2 text-[10px]",
+  xss: "h-[18px] px-1.5 text-xss",
+  xs: "h-6 px-2 text-xss",
   sm: "h-7 px-2.5 text-xs",
   md: "h-8 px-3 text-xs",
   lg: "h-9 px-3.5 text-sm"
@@ -1904,7 +1904,7 @@ var VARIANT_CLASSES2 = {
   outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-700", menuBg: "bg-[var(--popover)]" }
 };
 var SIZE_CLASSES = {
-  xss: "h-[18px] px-1.5 text-[10px]",
+  xss: "h-[18px] px-1.5 text-xss",
   xs: "h-6 px-2 text-xs",
   sm: "h-7 px-2 text-xs",
   md: "h-8 px-3 text-sm",
@@ -2020,7 +2020,7 @@ function Select({
                   close();
                 },
                 onPointerEnter: () => setHighlightIdx(idx),
-                className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${isHighlighted ? "bg-neutral-600 text-neutral-200" : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
+                className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${isHighlighted ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
                 children: [
                   /* @__PURE__ */ jsx15(Check4, { className: `w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : "invisible"}` }),
                   opt.icon,
@@ -2169,7 +2169,7 @@ function FilterDropdown({
         {
           "data-idx": 0,
           onClick: () => handleSelect("all"),
-          className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${highlightIdx === 0 ? "bg-neutral-600 text-neutral-200" : !isActive ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
+          className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${highlightIdx === 0 ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : !isActive ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
           children: [
             /* @__PURE__ */ jsx16(Check5, { className: `w-3 h-3 shrink-0 ${!isActive ? FORM_COLORS[color].accent : "invisible"}` }),
             /* @__PURE__ */ jsx16("span", { children: "All" })
@@ -2185,7 +2185,7 @@ function FilterDropdown({
           {
             "data-idx": idx,
             onClick: () => handleSelect(opt.value),
-            className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${isHighlighted ? "bg-neutral-600 text-neutral-200" : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
+            className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${isHighlighted ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`}`,
             children: [
               /* @__PURE__ */ jsx16(Check5, { className: `w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : "invisible"}` }),
               /* @__PURE__ */ jsx16("span", { children: opt.label })
@@ -2416,7 +2416,7 @@ function Modal({ isOpen, onClose, title, children, kind = "info", size = "md", h
   if (!isOpen) return null;
   return createPortal3(
     /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx19("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm", onClick: onClose }),
+      /* @__PURE__ */ jsx19("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm", onClick: onClose }),
       /* @__PURE__ */ jsxs14(
         "div",
         {
@@ -2798,11 +2798,10 @@ function GridCard({ item, selected, onClick }) {
       disabled: item.disabled,
       className: cn(
         "relative p-3 rounded-lg text-center transition-all border-2 flex flex-col items-center",
-        item.disabled ? "opacity-30 cursor-not-allowed border-neutral-800 bg-black" : selected ? "cursor-pointer" : "bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer"
+        item.disabled ? "opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]" : selected ? "cursor-pointer" : "bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer"
       ),
-      style: selected && !item.disabled ? { borderColor: color, backgroundColor: `${color}15` } : void 0,
+      style: selected && !item.disabled ? { borderColor: color } : void 0,
       children: [
-        selected && !item.disabled && /* @__PURE__ */ jsx20("span", { className: "absolute top-1 right-1", children: /* @__PURE__ */ jsx20(ConfirmBadge, { color: item.badgeColor || "blue", size: "xs" }) }),
         Icon && /* @__PURE__ */ jsx20(
           Icon,
           {
@@ -2827,11 +2826,10 @@ function ListCard({ item, selected, onClick }) {
       disabled: item.disabled,
       className: cn(
         "relative p-3 rounded-lg transition-all border-2 flex items-center gap-3 text-left",
-        item.disabled ? "opacity-30 cursor-not-allowed border-neutral-800 bg-black" : selected ? "cursor-pointer" : "bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer"
+        item.disabled ? "opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]" : selected ? "cursor-pointer" : "bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer"
       ),
-      style: selected && !item.disabled ? { borderColor: color, backgroundColor: `${color}15` } : void 0,
+      style: selected && !item.disabled ? { borderColor: color } : void 0,
       children: [
-        selected && !item.disabled && /* @__PURE__ */ jsx20("span", { className: "absolute top-1 right-1", children: /* @__PURE__ */ jsx20(ConfirmBadge, { color: item.badgeColor || "blue", size: "xs" }) }),
         Icon && /* @__PURE__ */ jsx20(
           Icon,
           {
@@ -3036,7 +3034,7 @@ function ActionDialog({
   }
   return createPortal4(
     /* @__PURE__ */ jsxs17("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm", onClick: onCancel }),
+      /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm", onClick: onCancel }),
       /* @__PURE__ */ jsxs17(
         "div",
         {
@@ -3494,8 +3492,8 @@ function FrontmatterFormHeader({
             }
           ),
           /* @__PURE__ */ jsx26("span", { className: "text-xs font-medium text-neutral-400 uppercase tracking-wide", children: "Configuration" }),
-          collapsed && hasFm && /* @__PURE__ */ jsx26("span", { className: "text-[11px] text-neutral-500 font-mono ml-2 truncate", children: renderSummary() }),
-          collapsed && !hasFm && /* @__PURE__ */ jsx26("span", { className: "text-[11px] text-neutral-600 ml-2", children: "No frontmatter" })
+          collapsed && hasFm && /* @__PURE__ */ jsx26("span", { className: "text-xss text-neutral-500 font-mono ml-2 truncate", children: renderSummary() }),
+          collapsed && !hasFm && /* @__PURE__ */ jsx26("span", { className: "text-xss text-neutral-600 ml-2", children: "No frontmatter" })
         ]
       }
     ),
@@ -3961,7 +3959,7 @@ function RegistryCard(props) {
         if (!count || count <= 0) return [];
         return [/* @__PURE__ */ jsx29(Tooltip, { content: { description: `${count} ${count === 1 ? label : labelPlural}` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ jsx29(Icon, { className: `w-3 h-3 ${color}` }),
-          /* @__PURE__ */ jsx29("span", { className: "text-[10px] text-neutral-500", children: count })
+          /* @__PURE__ */ jsx29("span", { className: "text-xss text-neutral-500", children: count })
         ] }) }, `pkg-${key}`)];
       });
     }
@@ -4013,11 +4011,11 @@ function RegistryCard(props) {
     const compatibleTools = props.compatibleTools ?? [];
     bottomLogos = compatibleTools.map((tool) => /* @__PURE__ */ jsx29(Tooltip, { content: { description: `Compatible with ${AI_TOOL_NAMES[tool] ?? tool}` }, position: "top", children: /* @__PURE__ */ jsx29(AiToolIcon, { tool, size: 16 }) }, tool));
     bottomStats = [
-      ...props.stars != null && props.stars > 0 ? [/* @__PURE__ */ jsx29(CardClickable, { onClick: () => props.onSortBy?.("stars"), children: /* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.stars.toLocaleString()} stars \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-amber-400/80", children: [
+      ...props.stars != null && props.stars > 0 ? [/* @__PURE__ */ jsx29(CardClickable, { onClick: () => props.onSortBy?.("stars"), children: /* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.stars.toLocaleString()} stars \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-xss text-amber-400/80", children: [
         /* @__PURE__ */ jsx29(Star4, { className: "w-3 h-3" }),
         formatCount(props.stars)
       ] }) }) }, "stars")] : [],
-      ...props.downloads != null && props.downloads > 0 ? [/* @__PURE__ */ jsx29(CardClickable, { onClick: () => props.onSortBy?.("downloads"), children: /* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.downloads.toLocaleString()} downloads \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-emerald-400/80", children: [
+      ...props.downloads != null && props.downloads > 0 ? [/* @__PURE__ */ jsx29(CardClickable, { onClick: () => props.onSortBy?.("downloads"), children: /* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.downloads.toLocaleString()} downloads \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-xss text-emerald-400/80", children: [
         /* @__PURE__ */ jsx29(Download3, { className: "w-3 h-3" }),
         formatCount(props.downloads)
       ] }) }) }, "downloads")] : []
@@ -4110,7 +4108,7 @@ function RegistryCard(props) {
     const allTools = props.allToolKeys ?? [];
     bottomLogos = allTools.map((tool) => /* @__PURE__ */ jsx29(Tooltip, { content: { description: `Compatible with ${AI_TOOL_NAMES[tool] ?? tool}` }, position: "top", children: /* @__PURE__ */ jsx29(AiToolIcon, { tool, size: 14 }) }, tool));
     if (props.installs != null && props.installs > 0) {
-      bottomStats = [/* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.installs.toLocaleString()} installs` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-neutral-500", children: [
+      bottomStats = [/* @__PURE__ */ jsx29(Tooltip, { content: { description: `${props.installs.toLocaleString()} installs` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-xss text-neutral-500", children: [
         /* @__PURE__ */ jsx29(Download3, { className: "w-3 h-3" }),
         props.installs.toLocaleString()
       ] }) }, "installs")];
@@ -4141,12 +4139,12 @@ function RegistryCard(props) {
         /* @__PURE__ */ jsx29("h3", { className: "text-sm font-medium text-white", children: name }),
         subtitle && /* @__PURE__ */ jsx29("div", { className: "text-xs text-neutral-400 mb-1.5", children: subtitle }),
         description && /* @__PURE__ */ jsx29("p", { className: "text-xs text-neutral-500 mb-3 flex-grow line-clamp-2", children: description }),
-        errorMessage && /* @__PURE__ */ jsx29("p", { className: `text-[11px] mb-2 break-all ${flash === "warning" ? "text-amber-400" : "text-red-400"}`, children: errorMessage }),
+        errorMessage && /* @__PURE__ */ jsx29("p", { className: `text-xss mb-2 break-all ${flash === "warning" ? "text-amber-400" : "text-red-400"}`, children: errorMessage }),
         (bottomLogos.length > 0 || bottomStats.length > 0 || updatedAt) && (() => {
           const dateNode = updatedAt ? /* @__PURE__ */ jsx29(Tooltip, { content: { description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \xB7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }, position: "top", children: /* @__PURE__ */ jsxs24(
             "span",
             {
-              className: `flex items-center gap-1 text-[10px] text-neutral-500 whitespace-nowrap${onDateClick ? " cursor-pointer hover:brightness-125 transition-all" : ""}`,
+              className: `flex items-center gap-1 text-xss text-neutral-500 whitespace-nowrap${onDateClick ? " cursor-pointer hover:brightness-125 transition-all" : ""}`,
               onClick: onDateClick ? (e) => {
                 e.stopPropagation();
                 onDateClick();
@@ -4168,7 +4166,7 @@ function RegistryCard(props) {
           if ("renderScopeConfirm" in props && props.renderScopeConfirm) {
             return /* @__PURE__ */ jsx29("div", { onClick: (e) => e.stopPropagation(), children: props.renderScopeConfirm({ isOpen: true, onClose: () => setShowScopeConfirm(false), onConfirm: props.onInstall, name }) });
           }
-          return /* @__PURE__ */ jsx29("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx29("div", { className: "fixed inset-0 bg-black/50 z-50 flex items-center justify-center", onClick: () => setShowScopeConfirm(false), children: /* @__PURE__ */ jsxs24("div", { className: "bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm", onClick: (e) => e.stopPropagation(), children: [
+          return /* @__PURE__ */ jsx29("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx29("div", { className: "fixed inset-0 bg-[var(--background)]/50 z-50 flex items-center justify-center", onClick: () => setShowScopeConfirm(false), children: /* @__PURE__ */ jsxs24("div", { className: "bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm", onClick: (e) => e.stopPropagation(), children: [
             /* @__PURE__ */ jsx29("h3", { className: "text-sm font-medium text-neutral-200 mb-2", children: ALREADY_AT_USER }),
             /* @__PURE__ */ jsxs24("p", { className: "text-xs text-neutral-400 mb-4", children: [
               /* @__PURE__ */ jsx29("strong", { className: "text-neutral-300", children: name }),
@@ -4303,7 +4301,7 @@ function renderMarkdownContent(content) {
     }
     i++;
     nodes.push(
-      /* @__PURE__ */ jsxs25("div", { className: "mb-3 font-mono text-[11px] text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "mb-3 font-mono text-xss text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5", children: [
         /* @__PURE__ */ jsx30("div", { className: "text-neutral-600", children: "---" }),
         fmLines.map((l, j) => /* @__PURE__ */ jsx30("div", { children: l }, j)),
         /* @__PURE__ */ jsx30("div", { className: "text-neutral-600", children: "---" })
@@ -4320,10 +4318,10 @@ function renderMarkdownContent(content) {
         i++;
       }
       nodes.push(
-        /* @__PURE__ */ jsx30("pre", { className: "mb-2 p-2 bg-black/30 rounded text-[11px] font-mono text-neutral-300 overflow-x-auto", children: codeLines.join("\n") }, i)
+        /* @__PURE__ */ jsx30("pre", { className: "mb-2 p-2 bg-[var(--background)]/30 rounded text-xss font-mono text-neutral-300 overflow-x-auto", children: codeLines.join("\n") }, i)
       );
     } else if (line.startsWith("### ")) {
-      nodes.push(/* @__PURE__ */ jsx30("h3", { className: "text-[11px] font-semibold text-neutral-300 mt-2 mb-0.5", children: line.slice(4) }, i));
+      nodes.push(/* @__PURE__ */ jsx30("h3", { className: "text-xss font-semibold text-neutral-300 mt-2 mb-0.5", children: line.slice(4) }, i));
     } else if (line.startsWith("## ")) {
       nodes.push(/* @__PURE__ */ jsx30("h2", { className: "text-xs font-semibold text-neutral-200 mt-2.5 mb-1", children: line.slice(3) }, i));
     } else if (line.startsWith("# ")) {
@@ -4331,7 +4329,7 @@ function renderMarkdownContent(content) {
     } else if (line === "" || line === "\r") {
       nodes.push(/* @__PURE__ */ jsx30("div", { className: "h-1.5" }, i));
     } else {
-      nodes.push(/* @__PURE__ */ jsx30("p", { className: "text-[11px] text-neutral-400 leading-relaxed", children: line }, i));
+      nodes.push(/* @__PURE__ */ jsx30("p", { className: "text-xss text-neutral-400 leading-relaxed", children: line }, i));
     }
     i++;
   }
@@ -4647,7 +4645,7 @@ function CompatibleWithSection({ tools }) {
     /* @__PURE__ */ jsx31("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-3", children: "Compatible with" }),
     /* @__PURE__ */ jsx31("div", { className: "flex items-start gap-3", children: tools.map((tool) => /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-1", children: [
       /* @__PURE__ */ jsx31(AiToolIcon, { tool, size: 18 }),
-      /* @__PURE__ */ jsx31("span", { className: "text-[10px] text-neutral-400", children: AI_TOOL_NAMES[tool] ?? tool })
+      /* @__PURE__ */ jsx31("span", { className: "text-xss text-neutral-400", children: AI_TOOL_NAMES[tool] ?? tool })
     ] }, tool)) })
   ] });
 }
@@ -4677,7 +4675,7 @@ function RegistryDetail({
       /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3 flex-wrap", children: [
           /* @__PURE__ */ jsx31(Icon, { className: `w-6 h-6 shrink-0 ${iconColor}` }),
-          /* @__PURE__ */ jsx31("h2", { className: "text-xl font-semibold text-neutral-200", children: title }),
+          /* @__PURE__ */ jsx31("h2", { className: "text-lg font-semibold text-neutral-200", children: title }),
           labels && labels.length > 0 && labels.map((labelProps, i) => /* @__PURE__ */ jsx31(Label, { size: "lg", ...labelProps }, i)),
           titleExtra
         ] }),
@@ -5209,7 +5207,7 @@ function ScreenshotUploader({
               className: "w-full h-full object-cover"
             }
           ),
-          /* @__PURE__ */ jsxs29("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2", children: [
+          /* @__PURE__ */ jsxs29("div", { className: "absolute inset-0 bg-[var(--background)]/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2", children: [
             /* @__PURE__ */ jsx35(
               "button",
               {
@@ -5225,7 +5223,7 @@ function ScreenshotUploader({
             ),
             /* @__PURE__ */ jsx35("span", { className: "text-xs text-white truncate", children: s.filename })
           ] }),
-          /* @__PURE__ */ jsx35("div", { className: "absolute bottom-1 right-1 px-1.5 py-0.5 bg-black/70 rounded text-xs text-neutral-400", children: formatFileSize(s.size) })
+          /* @__PURE__ */ jsx35("div", { className: "absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-xs text-neutral-400", children: formatFileSize(s.size) })
         ]
       },
       s.id
@@ -6280,7 +6278,7 @@ function StatusOverview({
     /* @__PURE__ */ jsxs31("div", { className: "bg-neutral-900 rounded-lg p-4 border border-amber-500/30", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx37(Archive, { className: "w-5 h-5 text-amber-400" }),
-        /* @__PURE__ */ jsx37("h3", { className: "text-neutral-300 font-medium", children: "Bundled Seed (App Distribution)" }),
+        /* @__PURE__ */ jsx37("h3", { className: "text-sm text-neutral-300 font-medium", children: "Bundled Seed (App Distribution)" }),
         status?.seed.meta && renderVersionBadge(status.seed.meta, "bg-amber-500/20 text-amber-400")
       ] }),
       /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
@@ -6304,7 +6302,7 @@ function StatusOverview({
       /* @__PURE__ */ jsxs31("div", { className: "bg-neutral-900 rounded-lg p-4 border border-blue-500/30", children: [
         /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
           /* @__PURE__ */ jsx37("div", { className: "w-3 h-3 rounded-full bg-blue-400" }),
-          /* @__PURE__ */ jsx37("h4", { className: "text-neutral-300 font-medium", children: "Golden (Reference)" }),
+          /* @__PURE__ */ jsx37("h4", { className: "text-sm text-neutral-300 font-medium", children: "Golden (Reference)" }),
           renderVersionBadge(status?.goldenMeta, "bg-blue-500/20 text-blue-400")
         ] }),
         /* @__PURE__ */ jsx37("div", { className: "space-y-2 text-sm", children: components.map((comp) => {
@@ -6329,7 +6327,7 @@ function StatusOverview({
       /* @__PURE__ */ jsxs31("div", { className: "bg-neutral-900 rounded-lg p-4 border border-green-500/30", children: [
         /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
           /* @__PURE__ */ jsx37("div", { className: "w-3 h-3 rounded-full bg-green-400" }),
-          /* @__PURE__ */ jsx37("h4", { className: "text-neutral-300 font-medium", children: "Live (Working Copy)" }),
+          /* @__PURE__ */ jsx37("h4", { className: "text-sm text-neutral-300 font-medium", children: "Live (Working Copy)" }),
           renderVersionBadge(status?.liveMeta, "bg-green-500/20 text-green-400"),
           /* @__PURE__ */ jsxs31("div", { className: "ml-auto relative", ref: resetMenuRef, children: [
             /* @__PURE__ */ jsx37(
@@ -6453,7 +6451,7 @@ function StatusOverview({
     devtools && manifest && /* @__PURE__ */ jsxs31("div", { className: "bg-neutral-900 rounded-lg p-4 border border-neutral-700", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
         /* @__PURE__ */ jsx37(Archive, { className: "w-4 h-4 text-neutral-500" }),
-        /* @__PURE__ */ jsx37("h4", { className: "text-neutral-300 font-medium", children: "Local Snapshots" })
+        /* @__PURE__ */ jsx37("h4", { className: "text-sm text-neutral-300 font-medium", children: "Local Snapshots" })
       ] }),
       /* @__PURE__ */ jsx37("div", { className: "flex gap-6 text-sm", children: /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx37("span", { className: "text-neutral-500", children: "Count: " }),
@@ -6519,7 +6517,7 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
             children: [
               icon,
               /* @__PURE__ */ jsx38("span", { className: "truncate", children: filename }),
-              statusLabel && /* @__PURE__ */ jsx38("span", { className: `text-[10px] font-medium ml-auto flex-shrink-0 ${statusColor}`, children: statusLabel })
+              statusLabel && /* @__PURE__ */ jsx38("span", { className: `text-xss font-medium ml-auto flex-shrink-0 ${statusColor}`, children: statusLabel })
             ]
           }
         ),
@@ -6567,7 +6565,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }) {
     const displayLabel = isRoot ? componentLabels?.[label] ?? label.charAt(0).toUpperCase() + label.slice(1) : label;
     const headerClasses = isRoot ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium` : "text-neutral-500 hover:bg-neutral-850 px-3 py-1.5";
     const chevronSize = isRoot ? "w-4 h-4" : "w-3 h-3";
-    const countElement = isRoot ? /* @__PURE__ */ jsx38("span", { className: `ml-auto px-1.5 py-0.5 rounded-full text-[10px] font-medium ${color.pillBg} ${color.text}`, children: fileCount }) : /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 ml-auto", children: fileCount });
+    const countElement = isRoot ? /* @__PURE__ */ jsx38("span", { className: `ml-auto px-1.5 py-0.5 rounded-full text-xss font-medium ${color.pillBg} ${color.text}`, children: fileCount }) : /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 ml-auto", children: fileCount });
     const containerLineClass = isRoot ? color.line : lineClass;
     return /* @__PURE__ */ jsxs32("div", { children: [
       /* @__PURE__ */ jsxs32(
@@ -6784,7 +6782,7 @@ function SnapshotManager({ sync }) {
     /* @__PURE__ */ jsxs33("div", { className: "bg-neutral-900 rounded-lg p-4 border border-neutral-700", children: [
       /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx39(Plus4, { className: "w-5 h-5 text-green-400" }),
-        /* @__PURE__ */ jsx39("h4", { className: "text-neutral-300 font-medium", children: "Create Snapshot" })
+        /* @__PURE__ */ jsx39("h4", { className: "text-sm text-neutral-300 font-medium", children: "Create Snapshot" })
       ] }),
       /* @__PURE__ */ jsx39("p", { className: "text-xs text-neutral-600 mb-3", children: "Archives the current live state. If components differ from golden, their patch version is auto-bumped." }),
       /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
@@ -6815,7 +6813,7 @@ function SnapshotManager({ sync }) {
       /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-700", children: [
         /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx39(Archive2, { className: "w-4 h-4 text-neutral-500" }),
-          /* @__PURE__ */ jsx39("h4", { className: "text-neutral-300 font-medium", children: "Snapshots" }),
+          /* @__PURE__ */ jsx39("h4", { className: "text-sm text-neutral-300 font-medium", children: "Snapshots" }),
           /* @__PURE__ */ jsxs33("span", { className: "text-xs text-neutral-500", children: [
             "(",
             manifest?.snapshots.length ?? 0,
@@ -6845,7 +6843,7 @@ function SnapshotManager({ sync }) {
                   "v",
                   snap.version
                 ] }),
-                snap.version === manifest.activeVersion && /* @__PURE__ */ jsx39("span", { className: "px-1.5 py-0.5 bg-green-500/20 text-green-400 text-[10px] rounded font-medium", children: "active" }),
+                snap.version === manifest.activeVersion && /* @__PURE__ */ jsx39("span", { className: "px-1.5 py-0.5 bg-green-500/20 text-green-400 text-xss rounded font-medium", children: "active" }),
                 snap.pinned && /* @__PURE__ */ jsx39(Pin4, { className: "w-3 h-3 text-amber-400" }),
                 snap.metaVersion && /* @__PURE__ */ jsx39("span", { className: "text-xs text-neutral-600 font-mono", children: snap.metaVersion })
               ] }),
@@ -6973,7 +6971,7 @@ function VersionManager({ sync, components, componentLabels }) {
     /* @__PURE__ */ jsxs34("div", { className: "bg-neutral-900 rounded-lg p-4 border border-teal-500/30", children: [
       /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx40(Tag4, { className: "w-5 h-5 text-teal-400" }),
-        /* @__PURE__ */ jsx40("h4", { className: "text-neutral-300 font-medium", children: "Golden Version" }),
+        /* @__PURE__ */ jsx40("h4", { className: "text-sm text-neutral-300 font-medium", children: "Golden Version" }),
         status?.goldenMeta && /* @__PURE__ */ jsx40("span", { className: "px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono", children: status.goldenMeta.version })
       ] }),
       /* @__PURE__ */ jsx40("p", { className: "text-xs text-neutral-600 mb-3", children: "Bump the overall golden version number. This updates the top-level version in meta.json." }),
@@ -7014,7 +7012,7 @@ function VersionManager({ sync, components, componentLabels }) {
     ] }),
     /* @__PURE__ */ jsxs34("div", { className: "bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden", children: [
       /* @__PURE__ */ jsxs34("div", { className: "px-4 py-3 border-b border-neutral-700", children: [
-        /* @__PURE__ */ jsx40("h4", { className: "text-neutral-300 font-medium", children: "Component Versions" }),
+        /* @__PURE__ */ jsx40("h4", { className: "text-sm text-neutral-300 font-medium", children: "Component Versions" }),
         /* @__PURE__ */ jsx40("p", { className: "text-xs text-neutral-600 mt-1", children: "Update individual component versions. Click a component to edit." })
       ] }),
       /* @__PURE__ */ jsx40("div", { className: "divide-y divide-neutral-700", children: components.map((comp) => {
@@ -7030,7 +7028,7 @@ function VersionManager({ sync, components, componentLabels }) {
                 "v",
                 currentVersion
               ] }),
-              mismatch && /* @__PURE__ */ jsxs34("span", { className: "text-[10px] text-yellow-400", children: [
+              mismatch && /* @__PURE__ */ jsxs34("span", { className: "text-xss text-yellow-400", children: [
                 "(live: v",
                 liveVersion,
                 ")"
@@ -7673,7 +7671,7 @@ function CapturedIssuesPanel({
     ] }) : /* @__PURE__ */ jsx43("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx43("div", { className: "w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx43(Check13, { className: "w-5 h-5 text-green-400" }) }),
       /* @__PURE__ */ jsxs37("div", { children: [
-        /* @__PURE__ */ jsx43("h3", { className: "text-neutral-300 font-medium", children: "No Issues Captured" }),
+        /* @__PURE__ */ jsx43("h3", { className: "text-sm text-neutral-300 font-medium", children: "No Issues Captured" }),
         /* @__PURE__ */ jsx43("p", { className: "text-sm text-neutral-500", children: "Everything is running smoothly." })
       ] })
     ] }) }),
@@ -7859,7 +7857,7 @@ function SnapshotEntryRow({
       children: [
         /* @__PURE__ */ jsx44(Clock2, { className: "w-3 h-3 shrink-0 text-neutral-500" }),
         /* @__PURE__ */ jsx44("span", { className: "text-xs flex-1 truncate", children: searchQuery ? highlightMatch(displayName, searchQuery) : displayName }),
-        /* @__PURE__ */ jsx44("span", { className: "text-[10px] text-neutral-500 shrink-0", title: formatFullDate2(entry.savedAt), children: formatRelativeTime2(entry.savedAt) }),
+        /* @__PURE__ */ jsx44("span", { className: "text-xss text-neutral-500 shrink-0", title: formatFullDate2(entry.savedAt), children: formatRelativeTime2(entry.savedAt) }),
         /* @__PURE__ */ jsx44(
           IconButton,
           {
@@ -8467,7 +8465,7 @@ function SnippetsEditor({
           filteredSnippets.length === 0 && !isAdding && /* @__PURE__ */ jsxs40("div", { className: "text-center py-10 px-4", children: [
             /* @__PURE__ */ jsx46(Braces, { className: "w-8 h-8 mx-auto text-purple-400/40 mb-3" }),
             /* @__PURE__ */ jsx46("p", { className: "text-xs text-neutral-500 mb-1", children: searchQuery ? "No matching snippets" : "No snippets defined" }),
-            /* @__PURE__ */ jsx46("p", { className: "text-[10px] text-neutral-600", children: searchQuery ? "Try a different search term" : "Click + to add your first snippet" })
+            /* @__PURE__ */ jsx46("p", { className: "text-xss text-neutral-600", children: searchQuery ? "Try a different search term" : "Click + to add your first snippet" })
           ] }),
           filteredSnippets.map((snippet) => /* @__PURE__ */ jsx46(
             SnippetListItem,
@@ -8530,8 +8528,8 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete }) {
       children: [
         /* @__PURE__ */ jsxs40("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx46("p", { className: "text-xs font-mono font-medium text-neutral-300 truncate", children: snippet.name }),
-          /* @__PURE__ */ jsx46("p", { className: "text-[10px] text-neutral-500 truncate mt-0.5", children: snippet.description }),
-          snippet.value && /* @__PURE__ */ jsxs40("p", { className: "text-[10px] text-neutral-600 truncate mt-0.5 font-mono", children: [
+          /* @__PURE__ */ jsx46("p", { className: "text-xss text-neutral-500 truncate mt-0.5", children: snippet.description }),
+          snippet.value && /* @__PURE__ */ jsxs40("p", { className: "text-xss text-neutral-600 truncate mt-0.5 font-mono", children: [
             snippet.value.slice(0, 80),
             snippet.value.length > 80 ? "..." : ""
           ] })
@@ -8581,7 +8579,7 @@ function SnippetForm({
             autoFocus: !isEditing
           }
         ),
-        /* @__PURE__ */ jsxs40("p", { className: "mt-1 text-[10px] text-neutral-600", children: [
+        /* @__PURE__ */ jsxs40("p", { className: "mt-1 text-xss text-neutral-600", children: [
           "Use in prompts as ",
           /* @__PURE__ */ jsx46("span", { className: "font-mono text-purple-400", children: "{{" + (formData.name || "NAME") + "}}" })
         ] })
@@ -8612,7 +8610,7 @@ function SnippetForm({
             minHeight: 160
           }
         ),
-        /* @__PURE__ */ jsx46("p", { className: "mt-1 text-[10px] text-neutral-600", children: "Can be a single value, multi-line text, or an entire document" })
+        /* @__PURE__ */ jsx46("p", { className: "mt-1 text-xss text-neutral-600", children: "Can be a single value, multi-line text, or an entire document" })
       ] }),
       formError && /* @__PURE__ */ jsx46("div", { className: "px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg", children: /* @__PURE__ */ jsx46("p", { className: "text-xs text-red-400", children: formError }) })
     ] }),
@@ -9618,7 +9616,7 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
             }
           ),
           /* @__PURE__ */ jsx51("span", { className: "truncate", children: entry.name }),
-          entry.badge && /* @__PURE__ */ jsx51("span", { className: "ml-auto shrink-0 px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500", children: entry.badge }),
+          entry.badge && /* @__PURE__ */ jsx51("span", { className: "ml-auto shrink-0 px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500", children: entry.badge }),
           onAction && /* @__PURE__ */ jsx51(
             "span",
             {
@@ -9681,13 +9679,13 @@ function FilesPanel({
   }
   return /* @__PURE__ */ jsxs45("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
-      /* @__PURE__ */ jsx51("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-neutral-500", children: "Files" }),
-      /* @__PURE__ */ jsxs45("span", { className: "text-[10px] text-neutral-500", children: [
+      /* @__PURE__ */ jsx51("span", { className: "text-xss font-semibold uppercase tracking-wider text-neutral-500", children: "Files" }),
+      /* @__PURE__ */ jsxs45("span", { className: "text-xss text-neutral-500", children: [
         fileCount,
         " files"
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx51("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
+    showSearch && /* @__PURE__ */ jsx51("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs", children: [
       /* @__PURE__ */ jsx51(Search10, { className: "w-3 h-3 text-neutral-500 shrink-0" }),
       /* @__PURE__ */ jsx51(
         "input",
@@ -9714,7 +9712,7 @@ function FilesPanel({
         },
         entry.path
       )) }),
-      displayedFiles.length === 0 && /* @__PURE__ */ jsx51("p", { className: "text-[11px] text-neutral-500 text-center py-4", children: "No files found" })
+      displayedFiles.length === 0 && /* @__PURE__ */ jsx51("p", { className: "text-xss text-neutral-500 text-center py-4", children: "No files found" })
     ] })
   ] });
 }
@@ -9759,13 +9757,13 @@ function SnippetsPanel({
   );
   return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
-      /* @__PURE__ */ jsx52("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-neutral-500", children: "Snippets" }),
-      /* @__PURE__ */ jsxs46("span", { className: "text-[10px] text-neutral-500", children: [
+      /* @__PURE__ */ jsx52("span", { className: "text-xss font-semibold uppercase tracking-wider text-neutral-500", children: "Snippets" }),
+      /* @__PURE__ */ jsxs46("span", { className: "text-xss text-neutral-500", children: [
         snippets.length,
         " snippets"
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx52("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
+    showSearch && /* @__PURE__ */ jsx52("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs", children: [
       /* @__PURE__ */ jsx52(Search11, { className: "w-3 h-3 text-neutral-500 shrink-0" }),
       /* @__PURE__ */ jsx52(
         "input",
@@ -9788,7 +9786,7 @@ function SnippetsPanel({
         },
         snippet.id
       )),
-      filteredSnippets.length === 0 && /* @__PURE__ */ jsx52("p", { className: "text-[11px] text-neutral-500 text-center py-4", children: "No snippets found" })
+      filteredSnippets.length === 0 && /* @__PURE__ */ jsx52("p", { className: "text-xss text-neutral-500 text-center py-4", children: "No snippets found" })
     ] })
   ] });
 }
@@ -9801,7 +9799,7 @@ function SnippetCard({ snippet, onInsert, onCopy }) {
         snippet.language && /* @__PURE__ */ jsx52(
           "span",
           {
-            className: "px-1.5 py-0.5 text-[9px] font-medium rounded shrink-0",
+            className: "px-1.5 py-0.5 text-xss font-medium rounded shrink-0",
             style: { color: langColor, backgroundColor: `${langColor}20` },
             children: snippet.language
           }
@@ -9828,9 +9826,9 @@ function SnippetCard({ snippet, onInsert, onCopy }) {
         )
       ] })
     ] }),
-    snippet.description && /* @__PURE__ */ jsx52("p", { className: "px-2.5 pb-1.5 text-[11px] text-neutral-400 leading-relaxed", children: snippet.description }),
-    /* @__PURE__ */ jsx52("div", { className: "mx-2.5 mb-2 rounded bg-black border border-neutral-700 overflow-hidden", children: /* @__PURE__ */ jsx52("pre", { className: "p-2 text-[11px] text-neutral-400 leading-relaxed overflow-x-auto max-h-24", children: /* @__PURE__ */ jsx52("code", { children: snippet.code }) }) }),
-    snippet.tags && snippet.tags.length > 0 && /* @__PURE__ */ jsx52("div", { className: "flex flex-wrap gap-1 px-2.5 pb-2", children: snippet.tags.map((tag) => /* @__PURE__ */ jsx52("span", { className: "px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500", children: tag }, tag)) })
+    snippet.description && /* @__PURE__ */ jsx52("p", { className: "px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed", children: snippet.description }),
+    /* @__PURE__ */ jsx52("div", { className: "mx-2.5 mb-2 rounded bg-[var(--background)] border border-neutral-700 overflow-hidden", children: /* @__PURE__ */ jsx52("pre", { className: "p-2 text-xss text-neutral-400 leading-relaxed overflow-x-auto max-h-24", children: /* @__PURE__ */ jsx52("code", { children: snippet.code }) }) }),
+    snippet.tags && snippet.tags.length > 0 && /* @__PURE__ */ jsx52("div", { className: "flex flex-wrap gap-1 px-2.5 pb-2", children: snippet.tags.map((tag) => /* @__PURE__ */ jsx52("span", { className: "px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500", children: tag }, tag)) })
   ] });
 }
 
@@ -9908,7 +9906,7 @@ var iconSubset3 = {
   "package": Package3
 };
 var sizeConfig2 = {
-  xss: { text: "text-[10px]", icon: "w-2.5 h-2.5", px: "px-1", py: "py-0.5", gap: "gap-0.5", sep: "w-2 h-2" },
+  xss: { text: "text-xss", icon: "w-2.5 h-2.5", px: "px-1", py: "py-0.5", gap: "gap-0.5", sep: "w-2 h-2" },
   xs: { text: "text-xs", icon: "w-3 h-3", px: "px-1.5", py: "py-0.5", gap: "gap-1", sep: "w-2.5 h-2.5" },
   sm: { text: "text-sm", icon: "w-3.5 h-3.5", px: "px-2", py: "py-1", gap: "gap-1.5", sep: "w-3 h-3" },
   md: { text: "text-base", icon: "w-4 h-4", px: "px-2.5", py: "py-1", gap: "gap-1.5", sep: "w-3.5 h-3.5" },
@@ -10082,7 +10080,7 @@ var iconSubset4 = {
   webhook: Webhook6
 };
 var sizeConfig3 = {
-  xss: { text: "text-[10px]", segIcon: "w-2.5 h-2.5", navIcon: "w-2.5 h-2.5", navBtn: "w-[18px] h-[18px] rounded-[3px]", px: "px-1", py: "py-0.5", sep: "w-2 h-2", divH: "h-3" },
+  xss: { text: "text-xss", segIcon: "w-2.5 h-2.5", navIcon: "w-2.5 h-2.5", navBtn: "w-[18px] h-[18px] rounded-[3px]", px: "px-1", py: "py-0.5", sep: "w-2 h-2", divH: "h-3" },
   xs: { text: "text-xs", segIcon: "w-3 h-3", navIcon: "w-3 h-3", navBtn: "w-6 h-6 rounded-[5px]", px: "px-1.5", py: "py-0.5", sep: "w-2.5 h-2.5", divH: "h-3.5" },
   sm: { text: "text-sm", segIcon: "w-3.5 h-3.5", navIcon: "w-3.5 h-3.5", navBtn: "w-7 h-7 rounded-md", px: "px-2", py: "py-1", sep: "w-3 h-3", divH: "h-4" },
   md: { text: "text-base", segIcon: "w-4 h-4", navIcon: "w-4 h-4", navBtn: "w-8 h-8 rounded-md", px: "px-2.5", py: "py-1", sep: "w-3.5 h-3.5", divH: "h-5" },
@@ -10296,7 +10294,7 @@ var iconSubset5 = {
   heart: Heart7
 };
 var sizeConfig4 = {
-  xss: { text: "text-[10px]", icon: "w-2.5 h-2.5", px: "px-1.5", py: "py-1", close: "w-2.5 h-2.5", badgeSize: "xss", gap: "gap-1" },
+  xss: { text: "text-xss", icon: "w-2.5 h-2.5", px: "px-1.5", py: "py-1", close: "w-2.5 h-2.5", badgeSize: "xss", gap: "gap-1" },
   xs: { text: "text-xs", icon: "w-3 h-3", px: "px-2", py: "py-1", close: "w-3 h-3", badgeSize: "xs", gap: "gap-1" },
   sm: { text: "text-sm", icon: "w-3.5 h-3.5", px: "px-3", py: "py-1.5", close: "w-3 h-3", badgeSize: "sm", gap: "gap-1.5" },
   md: { text: "text-base", icon: "w-4 h-4", px: "px-4", py: "py-2", close: "w-3.5 h-3.5", badgeSize: "md", gap: "gap-2" },
@@ -10868,7 +10866,7 @@ function NavCard({
       disabled,
       className: cn(
         "relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-800 p-4 transition-all duration-200 cursor-pointer",
-        !disabled && "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20 hover:border-neutral-600 hover:bg-neutral-700",
+        !disabled && "hover:-translate-y-0.5 hover:border-neutral-600 hover:bg-neutral-700",
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
@@ -11069,10 +11067,10 @@ function SnapshotCard({
           }
         )
       ] }),
-      timestamp && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-[10px] text-neutral-500", children: timestamp }),
+      timestamp && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-xss text-neutral-500", children: timestamp }),
       description && /* @__PURE__ */ jsx60("p", { className: "mt-2 text-xs text-neutral-500 leading-relaxed line-clamp-2", children: description }),
       stats && stats.length > 0 && /* @__PURE__ */ jsx60("div", { className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2", children: stats.map((stat) => /* @__PURE__ */ jsxs54("div", { children: [
-        /* @__PURE__ */ jsx60("p", { className: "text-[10px] text-neutral-500", children: stat.label }),
+        /* @__PURE__ */ jsx60("p", { className: "text-xss text-neutral-500", children: stat.label }),
         /* @__PURE__ */ jsx60("p", { className: "text-xs font-medium text-neutral-200", children: stat.value })
       ] }, stat.label)) }),
       (onSync || onView) && /* @__PURE__ */ jsxs54("div", { className: "mt-3 pt-3 border-t border-neutral-700 flex items-center gap-2", children: [

package/dist/tokens/primitives.css

@@ -21,6 +21,16 @@
   --color-neutral-100: #f0f0f0;
   --color-neutral-50:  #fafafa;
 
+  /* Typography — minimum font size */
+  --font-size-xss: 11px;
+
+  /* Breakpoints */
+  --breakpoint-3xl: 100rem;
+  --breakpoint-4xl: 156.25rem;
+
+  /* Font family */
+  --font-sans: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
   /* Disable Tailwind default gray to prevent accidental usage */
   --color-gray-*: initial;
 }

package/dist/tokens/semantic.css

@@ -20,6 +20,9 @@
   --surface-overlay: var(--color-neutral-700);
   --surface-hover: var(--color-neutral-750);
 
+  /* Dialog backdrop: modal/dialog overlays */
+  --dialog-backdrop: rgba(0, 0, 0, 0.85);
+
   /* Popover: floating panels, dropdown menus */
   --popover: rgba(0, 0, 0, 0.8);
   --popover-foreground: var(--color-neutral-300);