paperclip-theme 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,815 @@
+// src/ui/index.tsx
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import {
+  usePluginData,
+  usePluginAction
+} from "@paperclipai/plugin-sdk/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_VISIBLE_PRESETS = 8;
+var CARD_WIDTH = 192;
+var CARD_GAP = 10;
+var SWATCH_TOKENS = ["--background", "--primary", "--accent", "--chart-1", "--destructive"];
+var STYLE_ELEMENT_ID = "blazo-theme-overrides";
+function injectThemeCSS(theme) {
+  let el = document.getElementById(STYLE_ELEMENT_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ELEMENT_ID;
+    document.head.appendChild(el);
+  }
+  const entries = Object.entries(theme.tokens);
+  const radiusEntry = theme.radius ? `  --radius: ${theme.radius};` : "";
+  const lines = entries.map(([key, value]) => `  ${key}: ${value};`);
+  if (radiusEntry) lines.push(radiusEntry);
+  const darkToggle = theme.isDark ? "dark" : "light";
+  el.textContent = `:root { ${lines.join(" ")} }
+`;
+  const htmlEl = document.documentElement;
+  htmlEl.classList.toggle("dark", theme.isDark);
+  htmlEl.classList.toggle("light", !theme.isDark);
+  htmlEl.style.colorScheme = darkToggle;
+}
+var TOKEN_GROUPS = [
+  {
+    label: "Surfaces",
+    description: "Background and card colors",
+    tokens: ["--background", "--card", "--muted", "--accent"]
+  },
+  {
+    label: "Text",
+    description: "Foreground and label colors",
+    tokens: ["--foreground", "--card-foreground", "--muted-foreground", "--accent-foreground"]
+  },
+  {
+    label: "Interactive",
+    description: "Buttons, links, and primary actions",
+    tokens: ["--primary", "--primary-foreground"]
+  },
+  {
+    label: "Feedback",
+    description: "Errors and destructive actions",
+    tokens: ["--destructive", "--destructive-foreground"]
+  },
+  {
+    label: "Structure",
+    description: "Borders and focus rings",
+    tokens: ["--border", "--input", "--ring"]
+  },
+  {
+    label: "Charts",
+    description: "Dashboard visualization colors",
+    tokens: ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"]
+  }
+];
+function tokenDisplayName(token) {
+  return token.replace(/^--/, "").split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function oklchToHex(oklchStr) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx2d = canvas.getContext("2d");
+  if (!ctx2d) return "#000000";
+  ctx2d.fillStyle = oklchStr;
+  ctx2d.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx2d.getImageData(0, 0, 1, 1).data;
+  return `#${(r ?? 0).toString(16).padStart(2, "0")}${(g ?? 0).toString(16).padStart(2, "0")}${(b ?? 0).toString(16).padStart(2, "0")}`;
+}
+function hexToOklch(hex) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx2d = canvas.getContext("2d");
+  if (!ctx2d) return "oklch(0% 0 0)";
+  ctx2d.fillStyle = hex;
+  ctx2d.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx2d.getImageData(0, 0, 1, 1).data;
+  const rLin = srgbToLinear((r ?? 0) / 255);
+  const gLin = srgbToLinear((g ?? 0) / 255);
+  const bLin = srgbToLinear((b ?? 0) / 255);
+  const l = 0.4122214708 * rLin + 0.5363325363 * gLin + 0.0514459929 * bLin;
+  const m = 0.2119034982 * rLin + 0.6806995451 * gLin + 0.1073969566 * bLin;
+  const s = 0.0883024619 * rLin + 0.2817188376 * gLin + 0.6299787005 * bLin;
+  const lRoot = Math.cbrt(l);
+  const mRoot = Math.cbrt(m);
+  const sRoot = Math.cbrt(s);
+  const L = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+  const bOklab = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+  const C = Math.sqrt(a * a + bOklab * bOklab);
+  let H = Math.atan2(bOklab, a) * 180 / Math.PI;
+  if (H < 0) H += 360;
+  return `oklch(${(L * 100).toFixed(1)}% ${C.toFixed(3)} ${H.toFixed(1)})`;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+var styles = {
+  root: {
+    fontFamily: "var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)",
+    color: "var(--foreground)",
+    maxWidth: 720,
+    display: "flex",
+    flexDirection: "column",
+    gap: 32
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 600,
+    letterSpacing: "-0.01em",
+    margin: 0,
+    color: "var(--foreground)"
+  },
+  subtitle: {
+    fontSize: 13,
+    color: "var(--muted-foreground)",
+    margin: 0,
+    lineHeight: 1.5
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16
+  },
+  sectionHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    margin: 0
+  },
+  sectionLabel: {
+    fontSize: 13,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    color: "var(--muted-foreground)",
+    margin: 0
+  },
+  seeAllBtn: {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "var(--primary)",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: "2px 0",
+    outline: "none",
+    transition: "opacity 150ms ease"
+  },
+  presetsScroller: {
+    overflowX: "auto",
+    overflowY: "hidden",
+    WebkitOverflowScrolling: "touch",
+    scrollbarWidth: "thin",
+    paddingBottom: 4
+  },
+  presetsTrack: {
+    display: "grid",
+    gridTemplateRows: "1fr 1fr",
+    gridAutoFlow: "column",
+    gridAutoColumns: `${CARD_WIDTH}px`,
+    gap: CARD_GAP
+  },
+  presetCard: (isActive) => ({
+    position: "relative",
+    width: CARD_WIDTH,
+    padding: "12px 14px",
+    borderRadius: 8,
+    border: `1.5px solid ${isActive ? "var(--primary)" : "var(--border)"}`,
+    background: isActive ? "var(--accent)" : "transparent",
+    cursor: "pointer",
+    transition: "all 150ms ease",
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    outline: "none",
+    boxSizing: "border-box",
+    textAlign: "left"
+  }),
+  presetName: {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "var(--foreground)",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  presetDesc: {
+    fontSize: 11,
+    color: "var(--muted-foreground)",
+    margin: 0,
+    lineHeight: 1.35,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  },
+  presetMeta: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 2
+  },
+  presetColors: {
+    display: "flex",
+    gap: 3
+  },
+  presetSwatch: (color) => ({
+    width: 14,
+    height: 14,
+    borderRadius: 3,
+    background: color,
+    border: "1px solid rgba(128,128,128,0.25)",
+    flexShrink: 0
+  }),
+  presetModeBadge: (isDark) => ({
+    fontSize: 9,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    color: "var(--muted-foreground)",
+    background: "var(--muted)",
+    padding: "1px 5px",
+    borderRadius: 3,
+    lineHeight: "16px"
+  }),
+  activeBadge: {
+    position: "absolute",
+    top: 7,
+    right: 8,
+    fontSize: 9,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    color: "var(--primary-foreground)",
+    background: "var(--primary)",
+    padding: "1px 6px",
+    borderRadius: 999,
+    lineHeight: "16px"
+  },
+  tokenGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: "16px 0",
+    borderBottom: "1px solid var(--border)"
+  },
+  tokenGroupHeader: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  },
+  tokenGroupLabel: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: "var(--foreground)",
+    margin: 0
+  },
+  tokenGroupDesc: {
+    fontSize: 12,
+    color: "var(--muted-foreground)",
+    margin: 0
+  },
+  tokenRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    padding: "4px 0"
+  },
+  colorInput: {
+    width: 32,
+    height: 32,
+    border: "1.5px solid var(--border)",
+    borderRadius: 6,
+    padding: 0,
+    cursor: "pointer",
+    background: "none",
+    flexShrink: 0,
+    outline: "none"
+  },
+  tokenLabel: {
+    fontSize: 13,
+    fontWeight: 400,
+    color: "var(--foreground)",
+    flex: 1,
+    minWidth: 0
+  },
+  tokenValue: {
+    fontSize: 11,
+    fontFamily: "var(--font-mono, 'SF Mono', Consolas, monospace)",
+    color: "var(--muted-foreground)",
+    textAlign: "right",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: 180
+  },
+  radiusSection: {
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    padding: "8px 0"
+  },
+  rangeInput: {
+    flex: 1,
+    accentColor: "var(--primary)",
+    cursor: "pointer"
+  },
+  radiusValue: {
+    fontSize: 13,
+    fontFamily: "var(--font-mono, 'SF Mono', Consolas, monospace)",
+    color: "var(--muted-foreground)",
+    minWidth: 48,
+    textAlign: "right"
+  },
+  radiusPreview: (r) => ({
+    width: 32,
+    height: 32,
+    borderRadius: r,
+    border: "2px solid var(--primary)",
+    background: "var(--accent)",
+    flexShrink: 0
+  }),
+  actions: {
+    display: "flex",
+    gap: 10,
+    paddingTop: 8
+  },
+  btnPrimary: {
+    padding: "9px 20px",
+    borderRadius: 6,
+    border: "none",
+    background: "var(--primary)",
+    color: "var(--primary-foreground)",
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "opacity 150ms ease",
+    outline: "none"
+  },
+  btnSecondary: {
+    padding: "9px 20px",
+    borderRadius: 6,
+    border: "1.5px solid var(--border)",
+    background: "transparent",
+    color: "var(--foreground)",
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 150ms ease",
+    outline: "none"
+  },
+  saved: {
+    fontSize: 12,
+    color: "var(--muted-foreground)",
+    alignSelf: "center",
+    transition: "opacity 300ms ease"
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.55)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    backdropFilter: "blur(4px)"
+  },
+  modal: {
+    background: "var(--card)",
+    border: "1px solid var(--border)",
+    borderRadius: 12,
+    width: "min(640px, calc(100vw - 48px))",
+    maxHeight: "min(560px, calc(100vh - 80px))",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 16px 48px rgba(0,0,0,0.25)",
+    overflow: "hidden"
+  },
+  modalHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 20px 0 20px"
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: 600,
+    margin: 0,
+    color: "var(--foreground)"
+  },
+  modalCloseBtn: {
+    width: 28,
+    height: 28,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "none",
+    border: "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    color: "var(--muted-foreground)",
+    fontSize: 18,
+    lineHeight: 1,
+    outline: "none",
+    transition: "background 150ms ease"
+  },
+  modalSearch: {
+    margin: "12px 20px",
+    padding: "8px 12px",
+    borderRadius: 6,
+    border: "1.5px solid var(--border)",
+    background: "var(--muted)",
+    color: "var(--foreground)",
+    fontSize: 13,
+    outline: "none",
+    width: "calc(100% - 40px)",
+    boxSizing: "border-box",
+    transition: "border-color 150ms ease"
+  },
+  modalCount: {
+    fontSize: 11,
+    color: "var(--muted-foreground)",
+    padding: "0 20px 8px 20px",
+    margin: 0
+  },
+  modalGrid: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "0 20px 20px 20px",
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+    gap: 10,
+    alignContent: "start"
+  }
+};
+function PresetCard({
+  preset,
+  isActive,
+  onSelect,
+  compact
+}) {
+  const cardStyle = compact ? {
+    ...styles.presetCard(isActive),
+    width: "auto"
+  } : styles.presetCard(isActive);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      style: cardStyle,
+      onClick: onSelect,
+      onMouseEnter: (e) => {
+        if (!isActive) e.currentTarget.style.borderColor = "var(--muted-foreground)";
+      },
+      onMouseLeave: (e) => {
+        if (!isActive) e.currentTarget.style.borderColor = "var(--border)";
+      },
+      children: [
+        isActive && /* @__PURE__ */ jsx("span", { style: styles.activeBadge, children: "Active" }),
+        /* @__PURE__ */ jsx("p", { style: styles.presetName, children: preset.name }),
+        /* @__PURE__ */ jsx("p", { style: styles.presetDesc, children: preset.description }),
+        /* @__PURE__ */ jsxs("div", { style: styles.presetMeta, children: [
+          /* @__PURE__ */ jsx("div", { style: styles.presetColors, children: SWATCH_TOKENS.map((t) => /* @__PURE__ */ jsx("div", { style: styles.presetSwatch(preset.tokens[t] ?? "#333") }, t)) }),
+          /* @__PURE__ */ jsx("span", { style: styles.presetModeBadge(preset.isDark), children: preset.isDark ? "Dark" : "Light" })
+        ] })
+      ]
+    }
+  );
+}
+function PresetModal({
+  presets,
+  activeId,
+  onSelect,
+  onClose
+}) {
+  const [search, setSearch] = useState("");
+  const searchRef = useRef(null);
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  const filtered = useMemo(() => {
+    if (!search.trim()) return presets;
+    const q = search.toLowerCase().trim();
+    return presets.filter(
+      (p) => p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q) || p.author.toLowerCase().includes(q) || (p.isDark ? "dark" : "light").includes(q)
+    );
+  }, [presets, search]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: styles.overlay,
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: styles.modal, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.modalHeader, children: [
+          /* @__PURE__ */ jsx("h3", { style: styles.modalTitle, children: "All Themes" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.modalCloseBtn,
+              onClick: onClose,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "var(--muted)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "none";
+              },
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: searchRef,
+            type: "text",
+            placeholder: "Search themes...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            style: styles.modalSearch,
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = "var(--primary)";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "var(--border)";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { style: styles.modalCount, children: [
+          filtered.length,
+          " of ",
+          presets.length,
+          " themes"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.modalGrid, children: [
+          filtered.map((preset) => /* @__PURE__ */ jsx(
+            PresetCard,
+            {
+              preset,
+              isActive: activeId === preset.id,
+              onSelect: () => {
+                onSelect(preset);
+                onClose();
+              },
+              compact: true
+            },
+            preset.id
+          )),
+          filtered.length === 0 && /* @__PURE__ */ jsx("p", { style: { ...styles.subtitle, gridColumn: "1 / -1", textAlign: "center", padding: "32px 0" }, children: "No themes match your search." })
+        ] })
+      ] })
+    }
+  );
+}
+function TokenRow({
+  token,
+  value,
+  onChange
+}) {
+  const hex = oklchToHex(value);
+  return /* @__PURE__ */ jsxs("div", { style: styles.tokenRow, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        style: styles.colorInput,
+        value: hex,
+        onChange: (e) => {
+          const newOklch = hexToOklch(e.target.value);
+          onChange(token, newOklch);
+        },
+        title: tokenDisplayName(token)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: styles.tokenLabel, children: tokenDisplayName(token) }),
+    /* @__PURE__ */ jsx("span", { style: styles.tokenValue, children: value })
+  ] });
+}
+function ThemeSettingsPage() {
+  const activeThemeResult = usePluginData("active-theme");
+  const presetsResult = usePluginData("presets");
+  const applyTheme = usePluginAction("apply-theme");
+  const resetTheme = usePluginAction("reset-theme");
+  const [localTheme, setLocalTheme] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState(null);
+  const [hasUnsaved, setHasUnsaved] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const initialLoadDone = useRef(false);
+  const presets = presetsResult.data ?? [];
+  const serverTheme = activeThemeResult.data ?? null;
+  const visiblePresets = presets.slice(0, MAX_VISIBLE_PRESETS);
+  const hasMore = presets.length > MAX_VISIBLE_PRESETS;
+  useEffect(() => {
+    if (initialLoadDone.current) return;
+    if (serverTheme) {
+      setLocalTheme(serverTheme);
+      injectThemeCSS(serverTheme);
+      initialLoadDone.current = true;
+    } else if (presets.length > 0 && activeThemeResult.data === null) {
+      initialLoadDone.current = true;
+    }
+  }, [serverTheme, presets, activeThemeResult.data]);
+  const selectPreset = useCallback(
+    (preset) => {
+      const next = { ...preset, updatedAt: (/* @__PURE__ */ new Date()).toISOString() };
+      setLocalTheme(next);
+      injectThemeCSS(next);
+      setHasUnsaved(true);
+      setSavedAt(null);
+    },
+    []
+  );
+  const updateToken = useCallback(
+    (token, value) => {
+      setLocalTheme((prev) => {
+        if (!prev) return prev;
+        const next = {
+          ...prev,
+          tokens: { ...prev.tokens, [token]: value },
+          updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        injectThemeCSS(next);
+        return next;
+      });
+      setHasUnsaved(true);
+      setSavedAt(null);
+    },
+    []
+  );
+  const updateRadius = useCallback((value) => {
+    setLocalTheme((prev) => {
+      if (!prev) return prev;
+      const next = { ...prev, radius: value, updatedAt: (/* @__PURE__ */ new Date()).toISOString() };
+      injectThemeCSS(next);
+      return next;
+    });
+    setHasUnsaved(true);
+    setSavedAt(null);
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!localTheme) return;
+    setSaving(true);
+    try {
+      await applyTheme(localTheme);
+      setHasUnsaved(false);
+      setSavedAt((/* @__PURE__ */ new Date()).toLocaleTimeString());
+    } catch (err) {
+      console.error("Failed to save theme:", err);
+    } finally {
+      setSaving(false);
+    }
+  }, [localTheme, applyTheme]);
+  const handleReset = useCallback(async () => {
+    setSaving(true);
+    try {
+      const result = await resetTheme({});
+      const restored = result;
+      setLocalTheme(restored);
+      injectThemeCSS(restored);
+      setHasUnsaved(false);
+      setSavedAt(null);
+    } catch (err) {
+      console.error("Failed to reset theme:", err);
+    } finally {
+      setSaving(false);
+    }
+  }, [resetTheme]);
+  const radiusNum = parseFloat(localTheme?.radius ?? "0") || 0;
+  return /* @__PURE__ */ jsxs("div", { style: styles.root, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx("h2", { style: styles.title, children: "Theme" }),
+      /* @__PURE__ */ jsx("p", { style: styles.subtitle, children: "Choose a preset or fine-tune individual design tokens. Changes preview instantly." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.sectionHeader, children: [
+        /* @__PURE__ */ jsx("p", { style: styles.sectionLabel, children: "Presets" }),
+        hasMore && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            style: styles.seeAllBtn,
+            onClick: () => setShowModal(true),
+            onMouseEnter: (e) => {
+              e.currentTarget.style.opacity = "0.7";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.opacity = "1";
+            },
+            children: [
+              "See all ",
+              presets.length,
+              " themes"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: styles.presetsScroller, children: /* @__PURE__ */ jsx("div", { style: styles.presetsTrack, children: visiblePresets.map((preset) => /* @__PURE__ */ jsx(
+        PresetCard,
+        {
+          preset,
+          isActive: localTheme?.id === preset.id,
+          onSelect: () => selectPreset(preset)
+        },
+        preset.id
+      )) }) })
+    ] }),
+    showModal && /* @__PURE__ */ jsx(
+      PresetModal,
+      {
+        presets,
+        activeId: localTheme?.id,
+        onSelect: selectPreset,
+        onClose: () => setShowModal(false)
+      }
+    ),
+    localTheme && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsx("p", { style: styles.sectionLabel, children: "Design Tokens" }),
+      TOKEN_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { style: styles.tokenGroup, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.tokenGroupHeader, children: [
+          /* @__PURE__ */ jsx("p", { style: styles.tokenGroupLabel, children: group.label }),
+          /* @__PURE__ */ jsx("p", { style: styles.tokenGroupDesc, children: group.description })
+        ] }),
+        group.tokens.map((token) => /* @__PURE__ */ jsx(
+          TokenRow,
+          {
+            token,
+            value: localTheme.tokens[token] ?? "",
+            onChange: updateToken
+          },
+          token
+        ))
+      ] }, group.label))
+    ] }),
+    localTheme && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsx("p", { style: styles.sectionLabel, children: "Border Radius" }),
+      /* @__PURE__ */ jsxs("div", { style: styles.radiusSection, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.radiusPreview(localTheme.radius || "0") }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "1.5",
+            step: "0.125",
+            value: radiusNum,
+            onChange: (e) => updateRadius(`${e.target.value}rem`),
+            style: styles.rangeInput
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: styles.radiusValue, children: localTheme.radius || "0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: {
+            ...styles.btnPrimary,
+            opacity: saving || !hasUnsaved ? 0.5 : 1,
+            pointerEvents: saving || !hasUnsaved ? "none" : "auto"
+          },
+          onClick: handleSave,
+          disabled: saving || !hasUnsaved,
+          children: saving ? "Saving\u2026" : "Save Theme"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: styles.btnSecondary,
+          onClick: handleReset,
+          disabled: saving,
+          children: "Reset to Default"
+        }
+      ),
+      savedAt && /* @__PURE__ */ jsxs("span", { style: styles.saved, children: [
+        "Saved at ",
+        savedAt
+      ] }),
+      hasUnsaved && !savedAt && /* @__PURE__ */ jsx("span", { style: { ...styles.saved, color: "var(--chart-1)" }, children: "Unsaved changes" })
+    ] })
+  ] });
+}
+export {
+  ThemeSettingsPage
+};
+//# sourceMappingURL=index.js.map