sonance-brand-mcp 1.3.15 → 1.3.17

package/dist/assets/dev-tools/constants.ts

@@ -0,0 +1,616 @@
+
+import { Box, Image as ImageIcon, Type, Scan } from "lucide-react";
+import { TabDefinition, ConfigSection } from "./types";
+import { componentSnippets } from "../../lib/brand-system";
+
+export const tabs: TabDefinition[] = [
+  { id: "components", label: "Components", icon: Box },
+  { id: "logos", label: "Logos", icon: ImageIcon },
+  { id: "text", label: "Text", icon: Type },
+];
+
+// Quick action presets for common styling changes
+export const QUICK_ACTIONS = [
+  { label: "Darker", prompt: "Make the background color darker and adjust text for contrast" },
+  { label: "Rounder", prompt: "Increase the border radius to make corners more rounded" },
+  { label: "Shadow", prompt: "Add a subtle shadow effect, and increase shadow on hover" },
+  { label: "Larger", prompt: "Increase padding and font size to make the component larger" },
+  { label: "Bolder", prompt: "Make the text bolder and more prominent" },
+];
+
+// Style injection ID for cleanup
+export const SONANCE_PREVIEW_STYLE_ID = "sonance-devtools-preview-styles";
+
+// Component categories for scope behavior
+export const UNIVERSAL_STYLE_CATEGORIES = ["buttons", "forms", "feedback", "typography"];
+export const TARGETABLE_CATEGORIES = ["layout", "navigation", "data display", "overlays"];
+
+/**
+ * Tailwind spacing scale helper
+ */
+const spacingValue = (v: string): string => {
+  const scale: Record<string, string> = {
+    "0": "0", "px": "1px", "0.5": "0.125rem", "1": "0.25rem", "1.5": "0.375rem",
+    "2": "0.5rem", "2.5": "0.625rem", "3": "0.75rem", "3.5": "0.875rem",
+    "4": "1rem", "5": "1.25rem", "6": "1.5rem", "7": "1.75rem",
+    "8": "2rem", "9": "2.25rem", "10": "2.5rem", "11": "2.75rem",
+    "12": "3rem", "14": "3.5rem", "16": "4rem", "20": "5rem",
+    "24": "6rem", "28": "7rem", "32": "8rem", "36": "9rem",
+    "40": "10rem", "44": "11rem", "48": "12rem", "52": "13rem",
+    "56": "14rem", "60": "15rem", "64": "16rem", "72": "18rem",
+    "80": "20rem", "96": "24rem",
+  };
+  return scale[v] || (v.includes("[") ? v.replace(/\[|\]/g, "") : `${parseFloat(v) * 0.25}rem`);
+};
+
+/**
+ * Tailwind size value helper (for width/height)
+ */
+const sizeValue = (v: string): string => {
+  const sizes: Record<string, string> = {
+    "auto": "auto", "full": "100%", "screen": "100vw", "min": "min-content",
+    "max": "max-content", "fit": "fit-content", "1/2": "50%", "1/3": "33.333333%",
+    "2/3": "66.666667%", "1/4": "25%", "2/4": "50%", "3/4": "75%",
+    "1/5": "20%", "2/5": "40%", "3/5": "60%", "4/5": "80%",
+    "1/6": "16.666667%", "5/6": "83.333333%",
+  };
+  if (sizes[v]) return sizes[v];
+  return spacingValue(v);
+};
+
+/**
+ * Comprehensive color map including all brand colors
+ */
+const colorMap: Record<string, string> = {
+  // Semantic colors
+  "primary": "var(--primary)",
+  "primary-foreground": "var(--primary-foreground)",
+  "secondary": "var(--secondary)",
+  "secondary-foreground": "var(--secondary-foreground)",
+  "foreground": "var(--foreground)",
+  "foreground-secondary": "var(--foreground-secondary)",
+  "foreground-muted": "var(--foreground-muted)",
+  "muted": "var(--muted)",
+  "muted-foreground": "var(--muted-foreground)",
+  "accent": "var(--accent)",
+  "accent-foreground": "var(--accent-foreground)",
+  "destructive": "var(--destructive)",
+  "destructive-foreground": "var(--destructive-foreground)",
+  "card": "var(--card)",
+  "card-foreground": "var(--card-foreground)",
+  "popover": "var(--popover)",
+  "popover-foreground": "var(--popover-foreground)",
+  "background": "var(--background)",
+  "border": "var(--border)",
+  "input": "var(--input)",
+  "ring": "var(--ring)",
+  // Standard colors
+  "transparent": "transparent",
+  "current": "currentColor",
+  "white": "#ffffff",
+  "black": "#000000",
+  // Sonance brand
+  "sonance-charcoal": "#333F48",
+  "sonance-blue": "#00A3E1",
+  "sonance-light-gray": "#D9D9D6",
+  // IPORT brand
+  "iport-orange": "#FC4C02",
+  "iport-black": "#0E1114",
+  "iport-dark": "#0F161D",
+  "iport-dark-gray": "#1C1E20",
+  "iport-gray": "#3A3D3F",
+  "iport-light-gray": "#CED6DB",
+  // Blaze brand
+  "blaze-blue": "#00A3E1",
+  "blaze-red": "#C02B0A",
+  "blaze-dark-gray": "#28282B",
+  "blaze-gray": "#313131",
+  // Gray scale
+  "gray-50": "#f9fafb", "gray-100": "#f3f4f6", "gray-200": "#e5e7eb",
+  "gray-300": "#d1d5db", "gray-400": "#9ca3af", "gray-500": "#6b7280",
+  "gray-600": "#4b5563", "gray-700": "#374151", "gray-800": "#1f2937", "gray-900": "#111827",
+  // Slate
+  "slate-50": "#f8fafc", "slate-100": "#f1f5f9", "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1", "slate-400": "#94a3b8", "slate-500": "#64748b",
+  "slate-600": "#475569", "slate-700": "#334155", "slate-800": "#1e293b", "slate-900": "#0f172a",
+  // Zinc
+  "zinc-50": "#fafafa", "zinc-100": "#f4f4f5", "zinc-200": "#e4e4e7",
+  "zinc-300": "#d4d4d8", "zinc-400": "#a1a1aa", "zinc-500": "#71717a",
+  "zinc-600": "#52525b", "zinc-700": "#3f3f46", "zinc-800": "#27272a", "zinc-900": "#18181b",
+  // Red
+  "red-50": "#fef2f2", "red-100": "#fee2e2", "red-200": "#fecaca",
+  "red-300": "#fca5a5", "red-400": "#f87171", "red-500": "#ef4444",
+  "red-600": "#dc2626", "red-700": "#b91c1c", "red-800": "#991b1b", "red-900": "#7f1d1d",
+  // Orange
+  "orange-50": "#fff7ed", "orange-100": "#ffedd5", "orange-200": "#fed7aa",
+  "orange-300": "#fdba74", "orange-400": "#fb923c", "orange-500": "#f97316",
+  "orange-600": "#ea580c", "orange-700": "#c2410c", "orange-800": "#9a3412", "orange-900": "#7c2d12",
+  // Green
+  "green-50": "#f0fdf4", "green-100": "#dcfce7", "green-200": "#bbf7d0",
+  "green-300": "#86efac", "green-400": "#4ade80", "green-500": "#22c55e",
+  "green-600": "#16a34a", "green-700": "#15803d", "green-800": "#166534", "green-900": "#14532d",
+  // Blue
+  "blue-50": "#eff6ff", "blue-100": "#dbeafe", "blue-200": "#bfdbfe",
+  "blue-300": "#93c5fd", "blue-400": "#60a5fa", "blue-500": "#3b82f6",
+  "blue-600": "#2563eb", "blue-700": "#1d4ed8", "blue-800": "#1e40af", "blue-900": "#1e3a8a",
+  // Cyan
+  "cyan-50": "#ecfeff", "cyan-100": "#cffafe", "cyan-200": "#a5f3fc",
+  "cyan-300": "#67e8f9", "cyan-400": "#22d3ee", "cyan-500": "#06b6d4",
+  "cyan-600": "#0891b2", "cyan-700": "#0e7490", "cyan-800": "#155e75", "cyan-900": "#164e63",
+};
+
+/**
+ * Tailwind class to CSS mapping for live preview
+ * Maps comprehensive Tailwind patterns to actual CSS properties
+ */
+export const TAILWIND_TO_CSS: Record<string, (value: string) => string> = {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COLORS (Background, Text, Border)
+  // ═══════════════════════════════════════════════════════════════════════════
+  "bg-": (v) => colorMap[v] ? `background-color: ${colorMap[v]}` : "",
+  "text-": (v) => {
+    // Handle text size
+    const sizeMap: Record<string, string> = {
+      "xs": "0.75rem", "sm": "0.875rem", "base": "1rem",
+      "lg": "1.125rem", "xl": "1.25rem", "2xl": "1.5rem",
+      "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem",
+      "6xl": "3.75rem", "7xl": "4.5rem", "8xl": "6rem", "9xl": "8rem",
+    };
+    if (colorMap[v]) return `color: ${colorMap[v]}`;
+    if (sizeMap[v]) return `font-size: ${sizeMap[v]}`;
+    return "";
+  },
+  "border-": (v) => {
+    // Handle border width first (border-0, border-2, border-4, border-8)
+    if (/^\d+$/.test(v)) return `border-width: ${v}px`;
+    // Handle colors
+    if (colorMap[v]) return `border-color: ${colorMap[v]}`;
+    return "";
+  },
+  "outline-": (v) => colorMap[v] ? `outline-color: ${colorMap[v]}` : "",
+  "ring-": (v) => colorMap[v] ? `--tw-ring-color: ${colorMap[v]}` : "",
+  "fill-": (v) => colorMap[v] ? `fill: ${colorMap[v]}` : "",
+  "stroke-": (v) => colorMap[v] ? `stroke: ${colorMap[v]}` : "",
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // BORDER RADIUS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "rounded": (v) => {
+    const radiusMap: Record<string, string> = {
+      "": "0.25rem", "-none": "0", "-sm": "0.125rem",
+      "-md": "0.375rem", "-lg": "0.5rem", "-xl": "0.75rem",
+      "-2xl": "1rem", "-3xl": "1.5rem", "-full": "9999px",
+    };
+    return radiusMap[v] !== undefined ? `border-radius: ${radiusMap[v]}` : "";
+  },
+  "rounded-t": (v) => {
+    const radiusMap: Record<string, string> = {
+      "": "0.25rem", "-none": "0", "-sm": "0.125rem", "-md": "0.375rem",
+      "-lg": "0.5rem", "-xl": "0.75rem", "-2xl": "1rem", "-3xl": "1.5rem", "-full": "9999px",
+    };
+    const val = radiusMap[v] || "0.25rem";
+    return `border-top-left-radius: ${val}; border-top-right-radius: ${val}`;
+  },
+  "rounded-b": (v) => {
+    const radiusMap: Record<string, string> = {
+      "": "0.25rem", "-none": "0", "-sm": "0.125rem", "-md": "0.375rem",
+      "-lg": "0.5rem", "-xl": "0.75rem", "-2xl": "1rem", "-3xl": "1.5rem", "-full": "9999px",
+    };
+    const val = radiusMap[v] || "0.25rem";
+    return `border-bottom-left-radius: ${val}; border-bottom-right-radius: ${val}`;
+  },
+  "rounded-l": (v) => {
+    const radiusMap: Record<string, string> = {
+      "": "0.25rem", "-none": "0", "-sm": "0.125rem", "-md": "0.375rem",
+      "-lg": "0.5rem", "-xl": "0.75rem", "-2xl": "1rem", "-3xl": "1.5rem", "-full": "9999px",
+    };
+    const val = radiusMap[v] || "0.25rem";
+    return `border-top-left-radius: ${val}; border-bottom-left-radius: ${val}`;
+  },
+  "rounded-r": (v) => {
+    const radiusMap: Record<string, string> = {
+      "": "0.25rem", "-none": "0", "-sm": "0.125rem", "-md": "0.375rem",
+      "-lg": "0.5rem", "-xl": "0.75rem", "-2xl": "1rem", "-3xl": "1.5rem", "-full": "9999px",
+    };
+    const val = radiusMap[v] || "0.25rem";
+    return `border-top-right-radius: ${val}; border-bottom-right-radius: ${val}`;
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SHADOWS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "shadow": (v) => {
+    const shadowMap: Record<string, string> = {
+      "": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      "-sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      "-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+      "-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+      "-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+      "-inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+      "-none": "none",
+    };
+    return shadowMap[v] !== undefined ? `box-shadow: ${shadowMap[v]}` : "";
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SPACING (Padding & Margin)
+  // ═══════════════════════════════════════════════════════════════════════════
+  "p-": (v) => `padding: ${spacingValue(v)}`,
+  "px-": (v) => `padding-left: ${spacingValue(v)}; padding-right: ${spacingValue(v)}`,
+  "py-": (v) => `padding-top: ${spacingValue(v)}; padding-bottom: ${spacingValue(v)}`,
+  "pt-": (v) => `padding-top: ${spacingValue(v)}`,
+  "pb-": (v) => `padding-bottom: ${spacingValue(v)}`,
+  "pl-": (v) => `padding-left: ${spacingValue(v)}`,
+  "pr-": (v) => `padding-right: ${spacingValue(v)}`,
+  "ps-": (v) => `padding-inline-start: ${spacingValue(v)}`,
+  "pe-": (v) => `padding-inline-end: ${spacingValue(v)}`,
+  "m-": (v) => `margin: ${spacingValue(v)}`,
+  "mx-": (v) => `margin-left: ${spacingValue(v)}; margin-right: ${spacingValue(v)}`,
+  "my-": (v) => `margin-top: ${spacingValue(v)}; margin-bottom: ${spacingValue(v)}`,
+  "mt-": (v) => `margin-top: ${spacingValue(v)}`,
+  "mb-": (v) => `margin-bottom: ${spacingValue(v)}`,
+  "ml-": (v) => `margin-left: ${spacingValue(v)}`,
+  "mr-": (v) => `margin-right: ${spacingValue(v)}`,
+  "ms-": (v) => `margin-inline-start: ${spacingValue(v)}`,
+  "me-": (v) => `margin-inline-end: ${spacingValue(v)}`,
+  "space-x-": (v) => `--tw-space-x-reverse: 0; margin-right: calc(${spacingValue(v)} * var(--tw-space-x-reverse)); margin-left: calc(${spacingValue(v)} * calc(1 - var(--tw-space-x-reverse)))`,
+  "space-y-": (v) => `--tw-space-y-reverse: 0; margin-bottom: calc(${spacingValue(v)} * var(--tw-space-y-reverse)); margin-top: calc(${spacingValue(v)} * calc(1 - var(--tw-space-y-reverse)))`,
+  "gap-": (v) => `gap: ${spacingValue(v)}`,
+  "gap-x-": (v) => `column-gap: ${spacingValue(v)}`,
+  "gap-y-": (v) => `row-gap: ${spacingValue(v)}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SIZING (Width & Height)
+  // ═══════════════════════════════════════════════════════════════════════════
+  "w-": (v) => `width: ${sizeValue(v)}`,
+  "h-": (v) => `height: ${sizeValue(v)}`,
+  "min-w-": (v) => `min-width: ${sizeValue(v)}`,
+  "max-w-": (v) => {
+    const maxWidths: Record<string, string> = {
+      "none": "none", "xs": "20rem", "sm": "24rem", "md": "28rem",
+      "lg": "32rem", "xl": "36rem", "2xl": "42rem", "3xl": "48rem",
+      "4xl": "56rem", "5xl": "64rem", "6xl": "72rem", "7xl": "80rem",
+      "full": "100%", "prose": "65ch", "screen-sm": "640px",
+      "screen-md": "768px", "screen-lg": "1024px", "screen-xl": "1280px",
+    };
+    return `max-width: ${maxWidths[v] || sizeValue(v)}`;
+  },
+  "min-h-": (v) => `min-height: ${sizeValue(v)}`,
+  "max-h-": (v) => `max-height: ${sizeValue(v)}`,
+  "size-": (v) => `width: ${sizeValue(v)}; height: ${sizeValue(v)}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // BORDERS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "border": (v) => {
+    if (v === "") return "border-width: 1px";
+    if (v === "-0" || v === "-none") return "border-width: 0";
+    if (v === "-2") return "border-width: 2px";
+    if (v === "-4") return "border-width: 4px";
+    if (v === "-8") return "border-width: 8px";
+    return "";
+  },
+  "border-t": (v) => v === "" ? "border-top-width: 1px" : `border-top-width: ${v.replace("-", "")}px`,
+  "border-b": (v) => v === "" ? "border-bottom-width: 1px" : `border-bottom-width: ${v.replace("-", "")}px`,
+  "border-l": (v) => v === "" ? "border-left-width: 1px" : `border-left-width: ${v.replace("-", "")}px`,
+  "border-r": (v) => v === "" ? "border-right-width: 1px" : `border-right-width: ${v.replace("-", "")}px`,
+  "border-x": (v) => v === "" ? "border-left-width: 1px; border-right-width: 1px" : `border-left-width: ${v.replace("-", "")}px; border-right-width: ${v.replace("-", "")}px`,
+  "border-y": (v) => v === "" ? "border-top-width: 1px; border-bottom-width: 1px" : `border-top-width: ${v.replace("-", "")}px; border-bottom-width: ${v.replace("-", "")}px`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════════════════════
+  "font-": (v) => {
+    const weightMap: Record<string, string> = {
+      "thin": "100", "extralight": "200", "light": "300", "normal": "400",
+      "medium": "500", "semibold": "600", "bold": "700", "extrabold": "800", "black": "900",
+    };
+    const familyMap: Record<string, string> = {
+      "sans": "ui-sans-serif, system-ui, sans-serif",
+      "serif": "ui-serif, Georgia, serif",
+      "mono": "ui-monospace, monospace",
+    };
+    if (weightMap[v]) return `font-weight: ${weightMap[v]}`;
+    if (familyMap[v]) return `font-family: ${familyMap[v]}`;
+    return "";
+  },
+  "tracking-": (v) => {
+    const trackingMap: Record<string, string> = {
+      "tighter": "-0.05em", "tight": "-0.025em", "normal": "0",
+      "wide": "0.025em", "wider": "0.05em", "widest": "0.1em",
+    };
+    return trackingMap[v] ? `letter-spacing: ${trackingMap[v]}` : "";
+  },
+  "leading-": (v) => {
+    const lineHeightMap: Record<string, string> = {
+      "none": "1", "tight": "1.25", "snug": "1.375", "normal": "1.5",
+      "relaxed": "1.625", "loose": "2",
+      "3": "0.75rem", "4": "1rem", "5": "1.25rem", "6": "1.5rem",
+      "7": "1.75rem", "8": "2rem", "9": "2.25rem", "10": "2.5rem",
+    };
+    return lineHeightMap[v] ? `line-height: ${lineHeightMap[v]}` : "";
+  },
+  "text-left": () => "text-align: left",
+  "text-center": () => "text-align: center",
+  "text-right": () => "text-align: right",
+  "text-justify": () => "text-align: justify",
+  "uppercase": () => "text-transform: uppercase",
+  "lowercase": () => "text-transform: lowercase",
+  "capitalize": () => "text-transform: capitalize",
+  "normal-case": () => "text-transform: none",
+  "italic": () => "font-style: italic",
+  "not-italic": () => "font-style: normal",
+  "underline": () => "text-decoration-line: underline",
+  "overline": () => "text-decoration-line: overline",
+  "line-through": () => "text-decoration-line: line-through",
+  "no-underline": () => "text-decoration-line: none",
+  "truncate": () => "overflow: hidden; text-overflow: ellipsis; white-space: nowrap",
+  "antialiased": () => "-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale",
+  "whitespace-": (v) => `white-space: ${v}`,
+  "break-": (v) => {
+    const breakMap: Record<string, string> = {
+      "normal": "overflow-wrap: normal; word-break: normal",
+      "words": "overflow-wrap: break-word",
+      "all": "word-break: break-all",
+      "keep": "word-break: keep-all",
+    };
+    return breakMap[v] || "";
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FLEXBOX
+  // ═══════════════════════════════════════════════════════════════════════════
+  "flex": (v) => {
+    if (v === "") return "display: flex";
+    if (v === "-1") return "flex: 1 1 0%";
+    if (v === "-auto") return "flex: 1 1 auto";
+    if (v === "-initial") return "flex: 0 1 auto";
+    if (v === "-none") return "flex: none";
+    if (v === "-row") return "flex-direction: row";
+    if (v === "-row-reverse") return "flex-direction: row-reverse";
+    if (v === "-col") return "flex-direction: column";
+    if (v === "-col-reverse") return "flex-direction: column-reverse";
+    if (v === "-wrap") return "flex-wrap: wrap";
+    if (v === "-wrap-reverse") return "flex-wrap: wrap-reverse";
+    if (v === "-nowrap") return "flex-wrap: nowrap";
+    return "";
+  },
+  "items-": (v) => {
+    const map: Record<string, string> = {
+      "start": "flex-start", "end": "flex-end", "center": "center",
+      "baseline": "baseline", "stretch": "stretch",
+    };
+    return map[v] ? `align-items: ${map[v]}` : "";
+  },
+  "justify-": (v) => {
+    const map: Record<string, string> = {
+      "start": "flex-start", "end": "flex-end", "center": "center",
+      "between": "space-between", "around": "space-around", "evenly": "space-evenly",
+    };
+    return map[v] ? `justify-content: ${map[v]}` : "";
+  },
+  "self-": (v) => {
+    const map: Record<string, string> = {
+      "auto": "auto", "start": "flex-start", "end": "flex-end",
+      "center": "center", "stretch": "stretch", "baseline": "baseline",
+    };
+    return map[v] ? `align-self: ${map[v]}` : "";
+  },
+  "grow": (v) => v === "" ? "flex-grow: 1" : (v === "-0" ? "flex-grow: 0" : ""),
+  "shrink": (v) => v === "" ? "flex-shrink: 1" : (v === "-0" ? "flex-shrink: 0" : ""),
+  "order-": (v) => {
+    const orderMap: Record<string, string> = { "first": "-9999", "last": "9999", "none": "0" };
+    return `order: ${orderMap[v] || v}`;
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // GRID
+  // ═══════════════════════════════════════════════════════════════════════════
+  "grid": (v) => v === "" ? "display: grid" : "",
+  "grid-cols-": (v) => v === "none" ? "grid-template-columns: none" : `grid-template-columns: repeat(${v}, minmax(0, 1fr))`,
+  "grid-rows-": (v) => v === "none" ? "grid-template-rows: none" : `grid-template-rows: repeat(${v}, minmax(0, 1fr))`,
+  "col-span-": (v) => v === "full" ? "grid-column: 1 / -1" : `grid-column: span ${v} / span ${v}`,
+  "row-span-": (v) => v === "full" ? "grid-row: 1 / -1" : `grid-row: span ${v} / span ${v}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // LAYOUT & DISPLAY
+  // ═══════════════════════════════════════════════════════════════════════════
+  "block": () => "display: block",
+  "inline-block": () => "display: inline-block",
+  "inline": () => "display: inline",
+  "hidden": () => "display: none",
+  "inline-flex": () => "display: inline-flex",
+  "inline-grid": () => "display: inline-grid",
+  "contents": () => "display: contents",
+  "flow-root": () => "display: flow-root",
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // POSITIONING
+  // ═══════════════════════════════════════════════════════════════════════════
+  "static": () => "position: static",
+  "fixed": () => "position: fixed",
+  "absolute": () => "position: absolute",
+  "relative": () => "position: relative",
+  "sticky": () => "position: sticky",
+  "inset-": (v) => `inset: ${spacingValue(v)}`,
+  "top-": (v) => `top: ${spacingValue(v)}`,
+  "right-": (v) => `right: ${spacingValue(v)}`,
+  "bottom-": (v) => `bottom: ${spacingValue(v)}`,
+  "left-": (v) => `left: ${spacingValue(v)}`,
+  "z-": (v) => {
+    const zMap: Record<string, string> = { "auto": "auto", "0": "0", "10": "10", "20": "20", "30": "30", "40": "40", "50": "50" };
+    return `z-index: ${zMap[v] || v}`;
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OVERFLOW & VISIBILITY
+  // ═══════════════════════════════════════════════════════════════════════════
+  "overflow-": (v) => `overflow: ${v}`,
+  "overflow-x-": (v) => `overflow-x: ${v}`,
+  "overflow-y-": (v) => `overflow-y: ${v}`,
+  "visible": () => "visibility: visible",
+  "invisible": () => "visibility: hidden",
+  "collapse": () => "visibility: collapse",
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OPACITY
+  // ═══════════════════════════════════════════════════════════════════════════
+  "opacity-": (v) => `opacity: ${parseFloat(v) / 100}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TRANSITIONS & ANIMATIONS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "transition": (v) => {
+    const transitionMap: Record<string, string> = {
+      "": "transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-all": "transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-colors": "transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-opacity": "transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-shadow": "transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-transform": "transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms",
+      "-none": "transition-property: none",
+    };
+    return transitionMap[v] || "";
+  },
+  "duration-": (v) => `transition-duration: ${v}ms`,
+  "delay-": (v) => `transition-delay: ${v}ms`,
+  "ease-": (v) => {
+    const easeMap: Record<string, string> = {
+      "linear": "linear", "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)", "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+    };
+    return easeMap[v] ? `transition-timing-function: ${easeMap[v]}` : "";
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TRANSFORMS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "scale-": (v) => `transform: scale(${parseFloat(v) / 100})`,
+  "rotate-": (v) => `transform: rotate(${v}deg)`,
+  "translate-x-": (v) => `transform: translateX(${spacingValue(v)})`,
+  "translate-y-": (v) => `transform: translateY(${spacingValue(v)})`,
+  "skew-x-": (v) => `transform: skewX(${v}deg)`,
+  "skew-y-": (v) => `transform: skewY(${v}deg)`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CURSOR
+  // ═══════════════════════════════════════════════════════════════════════════
+  "cursor-": (v) => `cursor: ${v}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // POINTER EVENTS
+  // ═══════════════════════════════════════════════════════════════════════════
+  "pointer-events-": (v) => `pointer-events: ${v}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // USER SELECT
+  // ═══════════════════════════════════════════════════════════════════════════
+  "select-": (v) => `user-select: ${v}`,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OBJECT FIT
+  // ═══════════════════════════════════════════════════════════════════════════
+  "object-": (v) => {
+    const fitMap: Record<string, string> = {
+      "contain": "object-fit: contain", "cover": "object-fit: cover",
+      "fill": "object-fit: fill", "none": "object-fit: none", "scale-down": "object-fit: scale-down",
+      "bottom": "object-position: bottom", "center": "object-position: center",
+      "left": "object-position: left", "right": "object-position: right", "top": "object-position: top",
+    };
+    return fitMap[v] || "";
+  },
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ASPECT RATIO
+  // ═══════════════════════════════════════════════════════════════════════════
+  "aspect-": (v) => {
+    const aspectMap: Record<string, string> = {
+      "auto": "auto", "square": "1 / 1", "video": "16 / 9",
+    };
+    return `aspect-ratio: ${aspectMap[v] || v}`;
+  },
+};
+
+export const COMPONENT_CONFIG_MAP: Record<string, ConfigSection[]> = {
+  // Default for "all" - show everything
+  "all": ["colors", "radius", "typography"],
+  
+  // Categories
+  "buttons": ["colors", "radius", "typography"],
+  "forms": ["colors", "radius", "typography"],
+  "layout": ["colors", "radius"],
+  "typography": ["typography"],
+  "feedback": ["colors", "radius", "typography"],
+  "overlays": ["colors", "radius"],
+  "navigation": ["colors", "typography"],
+  "data display": ["colors", "radius"],
+  
+  // Specific component overrides (these take precedence over category)
+  // Components with fixed radius (rounded-full)
+  "avatar": ["colors"],
+  "switch": ["colors"],
+  "spinner": ["colors"],
+  
+  // Components that primarily use radius
+  "card": ["colors", "radius"],
+  "input": ["colors", "radius"],
+  "textarea": ["colors", "radius"],
+  "select": ["colors", "radius"],
+  "badge": ["colors", "radius"],
+  "alert": ["colors", "radius"],
+  "dialog": ["colors", "radius"],
+  "popover": ["colors", "radius"],
+  "toast": ["colors", "radius"],
+  
+  // Button variants
+  "button-primary": ["colors", "radius", "typography"],
+  "button-secondary": ["colors", "radius", "typography"],
+  "button-ghost": ["colors", "radius", "typography"],
+  "button-destructive": ["colors", "radius", "typography"],
+  
+  // Typography-focused components
+  "section-header": ["typography"],
+  "heading-display": ["typography"],
+  "body-text": ["typography"],
+  "link": ["colors", "typography"],
+  
+  // Special cases
+  "separator": ["colors"],
+  "skeleton": ["colors"],
+  "progress": ["colors", "radius"],
+  "image": ["radius"],
+  "table": ["colors", "typography"],
+};
+
+/**
+ * Helper to check if a category should show scope options
+ */
+export function shouldShowScopeOptions(category: string): boolean {
+  if (category === "all") return true; // Show for "all" selection
+  const lowerCategory = category.toLowerCase();
+  return TARGETABLE_CATEGORIES.includes(lowerCategory);
+}
+
+/**
+ * Get the visible config sections for a given component type
+ * First checks for specific component ID, then falls back to category
+ */
+export function getVisibleSections(componentType: string): ConfigSection[] {
+  // Check for exact match first (specific component ID)
+  if (COMPONENT_CONFIG_MAP[componentType.toLowerCase()]) {
+    return COMPONENT_CONFIG_MAP[componentType.toLowerCase()];
+  }
+  
+  // Try to find the component's category from snippets
+  const snippet = componentSnippets.find(s => s.id === componentType);
+  if (snippet) {
+    const categoryKey = snippet.category.toLowerCase();
+    if (COMPONENT_CONFIG_MAP[categoryKey]) {
+      return COMPONENT_CONFIG_MAP[categoryKey];
+    }
+  }
+  
+  // Default: show all sections if unknown
+  return ["colors", "radius", "typography"];
+}