@newtonedev/editor 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { getComponent, useTokens, ColorScaleSlider, TextInput, HueSlider, Slider, Select, Toggle, GOOGLE_FONTS, SYSTEM_FONTS, Button, CATEGORIES, getComponentsByCategory, Icon, Text, getCategory, generateComponentCode, NewtoneProvider, Wrapper, Frame, Card } from '@newtonedev/components';
+import { getComponent, useTokens, ColorScaleSlider, TextInput, HueSlider, Slider, Select, Toggle, GOOGLE_FONTS, SYSTEM_FONTS, Icon, Button, CATEGORIES, getComponentsByCategory, Text, getCategory, generateComponentCode, NewtoneProvider, Wrapper, Frame, Card, ICON_CATALOG } from '@newtonedev/components';
 import { useConfigurator, usePreviewColors, SEMANTIC_HUE_RANGES, useWcagValidation, traditionalHueToOklch, hexToPaletteParams } from '@newtonedev/configurator';
 import { srgbToHex, resolveLightness, findMaxChromaInGamut, clampSrgb, oklchToSrgb, HUE_GRADING_STRENGTH_HARD, HUE_GRADING_STRENGTH_MEDIUM, HUE_GRADING_STRENGTH_LOW, HUE_GRADING_EASING_POWER } from 'newtone';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -336,9 +336,19 @@ function useEditorState({
       initOverridesFromVariant(sidebarSelection.componentId);
     }
   }, [sidebarSelection, initOverridesFromVariant]);
-  const handlePropOverride = useCallback((propName, value) => {
-    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
-  }, []);
+  const handlePropOverride = useCallback(
+    (propName, value) => {
+      setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+      setSidebarSelection((prev) => {
+        if (prev !== null) return prev;
+        if (previewView.kind === "component") {
+          return { scope: "component", componentId: previewView.componentId };
+        }
+        return prev;
+      });
+    },
+    [previewView]
+  );
   const handleResetOverrides = useCallback(() => {
     if (sidebarSelection?.scope === "variant") {
       initOverridesFromVariant(
@@ -2022,20 +2032,15 @@ function PresetSelector({
             }
           ),
           /* @__PURE__ */ jsx(
-            "svg",
+            Icon,
             {
-              width: 10,
-              height: 10,
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: 2,
+              name: "expand_more",
+              size: 14,
               style: {
                 transform: isOpen ? "rotate(180deg)" : "none",
                 transition: "transform 150ms ease",
                 flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+              }
             }
           )
         ]
@@ -2183,20 +2188,7 @@ function PresetSelector({
                           borderRadius: 4,
                           flexShrink: 0
                         },
-                        children: /* @__PURE__ */ jsxs(
-                          "svg",
-                          {
-                            width: 14,
-                            height: 14,
-                            viewBox: "0 0 24 24",
-                            fill: "currentColor",
-                            children: [
-                              /* @__PURE__ */ jsx("circle", { cx: 12, cy: 5, r: 2 }),
-                              /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 2 }),
-                              /* @__PURE__ */ jsx("circle", { cx: 12, cy: 19, r: 2 })
-                            ]
-                          }
-                        )
+                        children: /* @__PURE__ */ jsx(Icon, { name: "more_vert", size: 14, color: textSecondary })
                       }
                     )
                   ] }),
@@ -2315,21 +2307,7 @@ function PresetSelector({
                 cursor: "pointer"
               },
               children: [
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: 14,
-                    height: 14,
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: 2,
-                    children: [
-                      /* @__PURE__ */ jsx("line", { x1: 12, y1: 5, x2: 12, y2: 19 }),
-                      /* @__PURE__ */ jsx("line", { x1: 5, y1: 12, x2: 19, y2: 12 })
-                    ]
-                  }
-                ),
+                /* @__PURE__ */ jsx(Icon, { name: "add", size: 14, color: textSecondary }),
                 "New preset"
               ]
             }
@@ -2341,67 +2319,12 @@ function PresetSelector({
 }
 var SIDEBAR_WIDTH2 = 360;
 var ACCORDION_SECTIONS = [
-  { id: "dynamic-range", label: "Dynamic Range" },
-  { id: "colors", label: "Colors" },
-  { id: "fonts", label: "Fonts" },
-  { id: "icons", label: "Icons" },
-  { id: "others", label: "Others" }
+  { id: "dynamic-range", label: "Dynamic Range", icon: "contrast" },
+  { id: "colors", label: "Colors", icon: "palette" },
+  { id: "fonts", label: "Fonts", icon: "text_fields" },
+  { id: "icons", label: "Icons", icon: "grid_view" },
+  { id: "others", label: "Others", icon: "tune" }
 ];
-function SectionIcon({ id }) {
-  const props = {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  };
-  switch (id) {
-    case "dynamic-range":
-      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
-        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
-        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
-        /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
-        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
-      ] });
-    case "colors":
-      return /* @__PURE__ */ jsx("svg", { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" }) });
-    case "fonts":
-      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
-        /* @__PURE__ */ jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
-      ] });
-    case "icons":
-      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "7", height: "7" })
-      ] });
-    case "others":
-      return /* @__PURE__ */ jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsx("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-        /* @__PURE__ */ jsx("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-        /* @__PURE__ */ jsx("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-        /* @__PURE__ */ jsx("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-        /* @__PURE__ */ jsx("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-        /* @__PURE__ */ jsx("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-        /* @__PURE__ */ jsx("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
-      ] });
-    default:
-      return null;
-  }
-}
 function Sidebar({
   state,
   dispatch,
@@ -2549,23 +2472,18 @@ function Sidebar({
                     },
                     children: [
                       /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                        /* @__PURE__ */ jsx(SectionIcon, { id: section.id }),
+                        /* @__PURE__ */ jsx(Icon, { name: section.icon, size: 16 }),
                         section.label
                       ] }),
                       /* @__PURE__ */ jsx(
-                        "svg",
+                        Icon,
                         {
-                          width: 12,
-                          height: 12,
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: 2,
+                          name: "expand_more",
+                          size: 16,
                           style: {
                             transform: isOpen ? "rotate(180deg)" : "none",
                             transition: "transform 150ms ease"
-                          },
-                          children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                          }
                         }
                       )
                     ]
@@ -3230,16 +3148,238 @@ function CategoryView({
     )
   ] });
 }
+function IconBrowserView({
+  selectedIconName,
+  onIconSelect
+}) {
+  const tokens = useTokens();
+  const [search, setSearch] = useState("");
+  const [hoveredIcon, setHoveredIcon] = useState(null);
+  const scrollRef = useRef(null);
+  const filteredCategories = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG.map((cat) => ({
+      ...cat,
+      icons: cat.icons.filter((name) => name.includes(q))
+    })).filter((cat) => cat.icons.length > 0);
+  }, [search]);
+  useEffect(() => {
+    if (!selectedIconName || !scrollRef.current) return;
+    const el = scrollRef.current.querySelector(
+      `[data-icon="${selectedIconName}"]`
+    );
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedIconName]);
+  const accentColor = srgbToHex(tokens.accent.fill.srgb);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { padding: "0 32px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "search",
+              size: 18,
+              color: srgbToHex(tokens.textTertiary.srgb),
+              style: {
+                position: "absolute",
+                left: 10,
+                top: 9,
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search icons...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              style: {
+                width: "100%",
+                padding: "8px 12px 8px 34px",
+                borderRadius: 8,
+                border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+                color: srgbToHex(tokens.textPrimary.srgb),
+                fontSize: 13,
+                boxSizing: "border-box",
+                outline: "none"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: scrollRef,
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px 32px 32px"
+            },
+            children: [
+              filteredCategories.length === 0 && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: srgbToHex(tokens.textTertiary.srgb),
+                    textAlign: "center",
+                    marginTop: 32
+                  },
+                  children: "No icons found"
+                }
+              ),
+              filteredCategories.map((category) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 24 }, children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    style: {
+                      fontSize: 12,
+                      fontWeight: 600,
+                      color: srgbToHex(tokens.textSecondary.srgb),
+                      textTransform: "uppercase",
+                      letterSpacing: 0.5,
+                      margin: "0 0 8px"
+                    },
+                    children: category.label
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                      gap: 6
+                    },
+                    children: category.icons.map((name) => {
+                      const isSelected = selectedIconName === name;
+                      const isHovered = hoveredIcon === name;
+                      const borderColor = isSelected ? accentColor : isHovered ? `${accentColor}66` : "transparent";
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          "data-icon": name,
+                          onClick: () => onIconSelect(name),
+                          onMouseEnter: () => setHoveredIcon(name),
+                          onMouseLeave: () => setHoveredIcon(null),
+                          style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 4,
+                            padding: "8px 4px 6px",
+                            borderRadius: 8,
+                            border: `2px solid ${borderColor}`,
+                            backgroundColor: isSelected ? srgbToHex(tokens.backgroundElevated.srgb) : "transparent",
+                            cursor: "pointer",
+                            transition: "border-color 150ms ease"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Icon, { name, size: 40 }),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: 10,
+                                  color: isSelected ? accentColor : srgbToHex(tokens.textTertiary.srgb),
+                                  fontWeight: isSelected ? 600 : 400,
+                                  maxWidth: "100%",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap"
+                                },
+                                children: name
+                              }
+                            )
+                          ]
+                        },
+                        name
+                      );
+                    })
+                  }
+                )
+              ] }, category.id))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function ComponentDetailView({
   componentId,
   selectedVariantId,
+  onSelectVariant,
   propOverrides,
-  onSelectVariant
+  onPropOverride
 }) {
   const tokens = useTokens();
   const component = getComponent(componentId);
   const [hoveredId, setHoveredId] = useState(null);
   if (!component) return null;
+  if (componentId === "icon" && propOverrides && onPropOverride) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "32px 0 0",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { padding: "0 32px", marginBottom: 24 }, children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                style: {
+                  fontSize: 22,
+                  fontWeight: 700,
+                  color: srgbToHex(tokens.textPrimary.srgb),
+                  margin: 0,
+                  marginBottom: 4
+                },
+                children: component.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: 14,
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  margin: 0
+                },
+                children: component.description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconBrowserView,
+            {
+              selectedIconName: propOverrides.name ?? "add",
+              onIconSelect: (name) => onPropOverride("name", name)
+            }
+          )
+        ]
+      }
+    );
+  }
   const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
   return /* @__PURE__ */ jsxs("div", { style: { padding: 32 }, children: [
     /* @__PURE__ */ jsx(
@@ -3315,7 +3455,7 @@ function ComponentDetailView({
                       ComponentRenderer,
                       {
                         componentId,
-                        props: isSelected && propOverrides ? { ...variant.props, ...propOverrides } : variant.props
+                        props: variant.props
                       }
                     )
                   }
@@ -3343,9 +3483,10 @@ function ComponentDetailView({
 function PreviewWindow({
   view,
   selectedVariantId,
-  propOverrides,
   onNavigate,
-  onSelectVariant
+  onSelectVariant,
+  propOverrides,
+  onPropOverride
 }) {
   const tokens = useTokens();
   const handleNavigateToCategory = useCallback(
@@ -3385,8 +3526,9 @@ function PreviewWindow({
           {
             componentId: view.componentId,
             selectedVariantId,
+            onSelectVariant,
             propOverrides,
-            onSelectVariant
+            onPropOverride
           }
         )
       ] })
@@ -3394,50 +3536,89 @@ function PreviewWindow({
   );
 }
 function CopyButton({ text }) {
+  const tokens = useTokens();
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [text]);
-  return /* @__PURE__ */ jsx(Button, { variant: "tertiary", semantic: "neutral", size: "sm", icon: copied ? "check" : "content_copy", onPress: handleCopy, children: copied ? "Copied!" : "Copy" });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: srgbToHex(
+          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb
+        ),
+        transition: "color 150ms ease"
+      },
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: copied ? "check" : "content_copy",
+          size: 16,
+          color: srgbToHex(
+            copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb
+          )
+        }
+      )
+    }
+  );
 }
 function CodeBlock({
   code
 }) {
   const tokens = useTokens();
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 8,
-          right: 8
-        },
-        children: /* @__PURE__ */ jsx(CopyButton, { text: code })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "pre",
-      {
-        style: {
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-          border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
-          borderRadius: 8,
-          padding: 16,
-          paddingRight: 80,
-          overflow: "auto",
-          fontSize: 13,
-          lineHeight: 1.5,
-          fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
-          color: srgbToHex(tokens.textPrimary.srgb),
-          margin: 0
-        },
-        children: /* @__PURE__ */ jsx("code", { children: code })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 8,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              padding: "4px 8px",
+              borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`
+            },
+            children: /* @__PURE__ */ jsx(CopyButton, { text: code })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              padding: "12px 16px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              fontSize: 13,
+              lineHeight: 1.5,
+              fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
+              color: srgbToHex(tokens.textPrimary.srgb),
+              margin: 0
+            },
+            children: /* @__PURE__ */ jsx("code", { children: code })
+          }
+        )
+      ]
+    }
+  );
 }
 function RightSidebar({
   selection,
@@ -3445,7 +3626,9 @@ function RightSidebar({
   onPropOverride,
   onResetOverrides,
   onClose,
-  onScopeToComponent
+  onScopeToComponent,
+  previewConfig,
+  colorMode
 }) {
   const tokens = useTokens();
   const visible = selection !== null;
@@ -3498,23 +3681,7 @@ function RightSidebar({
                     display: "flex",
                     alignItems: "center"
                   },
-                  children: /* @__PURE__ */ jsxs(
-                    "svg",
-                    {
-                      width: 16,
-                      height: 16,
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: 2,
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      children: [
-                        /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-                        /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
-                      ]
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx(Icon, { name: "arrow_back", size: 16, color: srgbToHex(tokens.textSecondary.srgb) })
                 }
               ),
               selection.scope === "variant" && variant ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3583,6 +3750,32 @@ function RightSidebar({
               padding: 16
             },
             children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginBottom: 20,
+                    borderRadius: 8,
+                    border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    NewtoneProvider,
+                    {
+                      config: previewConfig,
+                      initialMode: colorMode,
+                      children: /* @__PURE__ */ jsx(
+                        PreviewSurface,
+                        {
+                          componentId: selection.componentId,
+                          propOverrides
+                        }
+                      )
+                    },
+                    colorMode
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx(
                 "h3",
                 {
@@ -3650,6 +3843,26 @@ function RightSidebar({
     }
   );
 }
+function PreviewSurface({
+  componentId,
+  propOverrides
+}) {
+  const previewTokens = useTokens();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        height: 120,
+        backgroundColor: srgbToHex(previewTokens.backgroundElevated.srgb)
+      },
+      children: /* @__PURE__ */ jsx(ComponentRenderer, { componentId, props: propOverrides })
+    }
+  );
+}
 function PropControl({
   prop,
   value,
@@ -3677,41 +3890,17 @@ function PropControl({
     boxSizing: "border-box"
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: /* @__PURE__ */ jsx(
+      "span",
       {
         style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: 4
+          fontSize: 12,
+          fontWeight: 500,
+          color: srgbToHex(tokens.textPrimary.srgb)
         },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 12,
-                fontWeight: 500,
-                color: srgbToHex(tokens.textPrimary.srgb)
-              },
-              children: prop.label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 11,
-                color: srgbToHex(tokens.textSecondary.srgb),
-                fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace"
-              },
-              children: prop.control
-            }
-          )
-        ]
+        children: prop.label
       }
-    ),
+    ) }),
     prop.control === "select" && prop.options && /* @__PURE__ */ jsx(
       Select,
       {
@@ -3745,7 +3934,54 @@ function PropControl({
         style: inputStyle
       }
     ),
-    prop.control === "toggle" && /* @__PURE__ */ jsxs(
+    prop.control === "discrete-slider" && prop.options && (() => {
+      const options = prop.options;
+      const currentIndex = options.findIndex((o) => o.value === value);
+      const idx = currentIndex >= 0 ? currentIndex : 0;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: options.length - 1,
+            step: 1,
+            value: idx,
+            onChange: (e) => onChange(options[Number(e.target.value)].value),
+            "aria-label": prop.label,
+            style: {
+              width: "100%",
+              accentColor: srgbToHex(tokens.accent.fill.srgb),
+              cursor: "pointer"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              marginTop: 2
+            },
+            children: options.map((o) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 11,
+                  fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+                  color: o.value === value ? srgbToHex(tokens.textPrimary.srgb) : srgbToHex(tokens.textTertiary.srgb),
+                  fontWeight: o.value === value ? 600 : 400
+                },
+                children: o.label
+              },
+              String(o.value)
+            ))
+          }
+        )
+      ] });
+    })(),
+    prop.control === "toggle" && /* @__PURE__ */ jsx(
       "div",
       {
         role: "switch",
@@ -3760,47 +3996,35 @@ function PropControl({
           gap: 8,
           cursor: "pointer"
         },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: 36,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
-                position: "relative",
-                transition: "background-color 150ms ease",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: "#fff",
-                    position: "absolute",
-                    top: 2,
-                    left: value ? 18 : 2,
-                    transition: "left 150ms ease"
-                  }
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 36,
+              height: 20,
+              borderRadius: 10,
+              backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
+              position: "relative",
+              transition: "background-color 150ms ease",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: 8,
+                  backgroundColor: "#fff",
+                  position: "absolute",
+                  top: 2,
+                  left: value ? 18 : 2,
+                  transition: "left 150ms ease"
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 12,
-                color: srgbToHex(tokens.textSecondary.srgb)
-              },
-              children: value ? "true" : "false"
-            }
-          )
-        ]
+              }
+            )
+          }
+        )
       }
     )
   ] });
@@ -3905,9 +4129,10 @@ function Editor({
                       {
                         view: editor.previewView,
                         selectedVariantId: editor.selectedVariantId,
-                        propOverrides: editor.propOverrides,
                         onNavigate: editor.handlePreviewNavigate,
-                        onSelectVariant: editor.handleSelectVariant
+                        onSelectVariant: editor.handleSelectVariant,
+                        propOverrides: editor.propOverrides,
+                        onPropOverride: editor.handlePropOverride
                       }
                     ) })
                   },
@@ -3926,7 +4151,9 @@ function Editor({
           onPropOverride: editor.handlePropOverride,
           onResetOverrides: editor.handleResetOverrides,
           onClose: editor.handleCloseSidebar,
-          onScopeToComponent: editor.handleScopeToComponent
+          onScopeToComponent: editor.handleScopeToComponent,
+          previewConfig,
+          colorMode: editor.colorMode
         }
       )
     }