@newtonedev/editor 0.1.5 → 0.1.6

package/dist/preview/ComponentDetailView.d.ts

@@ -1,9 +1,10 @@
 interface ComponentDetailViewProps {
     readonly componentId: string;
     readonly selectedVariantId: string | null;
-    readonly propOverrides?: Record<string, unknown>;
     readonly onSelectVariant: (variantId: string) => void;
+    readonly propOverrides?: Record<string, unknown>;
+    readonly onPropOverride?: (name: string, value: unknown) => void;
 }
-export declare function ComponentDetailView({ componentId, selectedVariantId, propOverrides, onSelectVariant, }: ComponentDetailViewProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ComponentDetailView({ componentId, selectedVariantId, onSelectVariant, propOverrides, onPropOverride, }: ComponentDetailViewProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ComponentDetailView.d.ts.map

package/dist/preview/ComponentDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,EAAE,wBAAwB,kDA2G1B"}
+{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAOA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,GACf,EAAE,wBAAwB,kDA+I1B"}

package/dist/preview/IconBrowserView.d.ts

@@ -0,0 +1,7 @@
+interface IconBrowserViewProps {
+    readonly selectedIconName: string;
+    readonly onIconSelect: (name: string) => void;
+}
+export declare function IconBrowserView({ selectedIconName, onIconSelect, }: IconBrowserViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconBrowserView.d.ts.map

package/dist/preview/IconBrowserView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBrowserView.d.ts","sourceRoot":"","sources":["../../src/preview/IconBrowserView.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,YAAY,GACb,EAAE,oBAAoB,2CA8KtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Shared color system editor for Newtone applications",
   "license": "MIT",
   "repository": {

package/src/Editor.tsx

@@ -110,9 +110,10 @@ export function Editor({
                   <PreviewWindow
                     view={editor.previewView}
                     selectedVariantId={editor.selectedVariantId}
-                    propOverrides={editor.propOverrides}
                     onNavigate={editor.handlePreviewNavigate}
                     onSelectVariant={editor.handleSelectVariant}
+                    propOverrides={editor.propOverrides}
+                    onPropOverride={editor.handlePropOverride}
                   />
                 </div>
               </NewtoneProvider>
@@ -127,6 +128,8 @@ export function Editor({
             onResetOverrides={editor.handleResetOverrides}
             onClose={editor.handleCloseSidebar}
             onScopeToComponent={editor.handleScopeToComponent}
+            previewConfig={previewConfig}
+            colorMode={editor.colorMode}
           />
         }
       />

package/src/components/CodeBlock.tsx

@@ -1,8 +1,9 @@
 import { useState, useCallback } from "react";
-import { useTokens, Button } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 
 export function CopyButton({ text }: { readonly text: string }) {
+  const tokens = useTokens();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -12,9 +13,31 @@ export function CopyButton({ text }: { readonly text: string }) {
   }, [text]);
 
   return (
-    <Button variant="tertiary" semantic="neutral" size="sm" icon={copied ? "check" : "content_copy"} onPress={handleCopy}>
-      {copied ? "Copied!" : "Copy"}
-    </Button>
+    <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",
+      }}
+    >
+      <Icon
+        name={copied ? "check" : "content_copy"}
+        size={16}
+        color={srgbToHex(
+          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb,
+        )}
+      />
+    </button>
   );
 }
 
@@ -26,24 +49,29 @@ export function CodeBlock({
   const tokens = useTokens();
 
   return (
-    <div style={{ position: "relative" }}>
+    <div
+      style={{
+        backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 8,
+        overflow: "hidden",
+      }}
+    >
       <div
         style={{
-          position: "absolute",
-          top: 8,
-          right: 8,
+          display: "flex",
+          justifyContent: "flex-end",
+          padding: "4px 8px",
+          borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`,
         }}
       >
         <CopyButton text={code} />
       </div>
       <pre
         style={{
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-          border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
-          borderRadius: 8,
-          padding: 16,
-          paddingRight: 80,
-          overflow: "auto",
+          padding: "12px 16px",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
           fontSize: 13,
           lineHeight: 1.5,
           fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",

package/src/components/PresetSelector.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { useTokens } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { Preset } from "../types";
 import { presetHasUnpublishedChanges } from "../utils/presets";
@@ -145,21 +145,15 @@ export function PresetSelector({
         >
           {activePreset?.name ?? "Default"}
         </span>
-        <svg
-          width={10}
-          height={10}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
+        <Icon
+          name="expand_more"
+          size={14}
           style={{
             transform: isOpen ? "rotate(180deg)" : "none",
             transition: "transform 150ms ease",
             flexShrink: 0,
-          }}
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
+          } as any}
+        />
       </button>
 
       {isOpen && (
@@ -303,16 +297,7 @@ export function PresetSelector({
                             flexShrink: 0,
                           }}
                         >
-                          <svg
-                            width={14}
-                            height={14}
-                            viewBox="0 0 24 24"
-                            fill="currentColor"
-                          >
-                            <circle cx={12} cy={5} r={2} />
-                            <circle cx={12} cy={12} r={2} />
-                            <circle cx={12} cy={19} r={2} />
-                          </svg>
+                          <Icon name="more_vert" size={14} color={textSecondary} />
                         </button>
                       )}
                     </>
@@ -435,17 +420,7 @@ export function PresetSelector({
               cursor: "pointer",
             }}
           >
-            <svg
-              width={14}
-              height={14}
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <line x1={12} y1={5} x2={12} y2={19} />
-              <line x1={5} y1={12} x2={19} y2={12} />
-            </svg>
+            <Icon name="add" size={14} color={textSecondary} />
             New preset
           </button>
         </div>

package/src/components/PreviewWindow.tsx

@@ -9,17 +9,19 @@ import type { PreviewView } from "../types";
 interface PreviewWindowProps {
   readonly view: PreviewView;
   readonly selectedVariantId: string | null;
-  readonly propOverrides?: Record<string, unknown>;
   readonly onNavigate: (view: PreviewView) => void;
   readonly onSelectVariant: (variantId: string) => void;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onPropOverride?: (name: string, value: unknown) => void;
 }
 
 export function PreviewWindow({
   view,
   selectedVariantId,
-  propOverrides,
   onNavigate,
   onSelectVariant,
+  propOverrides,
+  onPropOverride,
 }: PreviewWindowProps) {
   const tokens = useTokens();
 
@@ -59,8 +61,9 @@ export function PreviewWindow({
           <ComponentDetailView
             componentId={view.componentId}
             selectedVariantId={selectedVariantId}
-            propOverrides={propOverrides}
             onSelectVariant={onSelectVariant}
+            propOverrides={propOverrides}
+            onPropOverride={onPropOverride}
           />
         )}
       </div>

package/src/components/RightSidebar.tsx

@@ -1,8 +1,9 @@
 import { useCallback, type KeyboardEvent } from "react";
-import { useTokens, getComponent, generateComponentCode, Select } from "@newtonedev/components";
-import type { EditableProp } from "@newtonedev/components";
+import { useTokens, getComponent, generateComponentCode, Select, NewtoneProvider, Icon } from "@newtonedev/components";
+import type { EditableProp, NewtoneThemeConfig, ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import { CodeBlock } from "./CodeBlock";
+import { ComponentRenderer } from "../preview/ComponentRenderer";
 import type { SidebarSelection } from "../types";
 
 interface RightSidebarProps {
@@ -12,6 +13,8 @@ interface RightSidebarProps {
   readonly onResetOverrides: () => void;
   readonly onClose: () => void;
   readonly onScopeToComponent: () => void;
+  readonly previewConfig: NewtoneThemeConfig;
+  readonly colorMode: ColorMode;
 }
 
 export function RightSidebar({
@@ -21,6 +24,8 @@ export function RightSidebar({
   onResetOverrides,
   onClose,
   onScopeToComponent,
+  previewConfig,
+  colorMode,
 }: RightSidebarProps) {
   const tokens = useTokens();
   const visible = selection !== null;
@@ -79,19 +84,7 @@ export function RightSidebar({
                   alignItems: "center",
                 }}
               >
-                <svg
-                  width={16}
-                  height={16}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <line x1="19" y1="12" x2="5" y2="12" />
-                  <polyline points="12 19 5 12 12 5" />
-                </svg>
+                <Icon name="arrow_back" size={16} color={srgbToHex(tokens.textSecondary.srgb)} />
               </button>
               {selection.scope === "variant" && variant ? (
                 <>
@@ -154,6 +147,27 @@ export function RightSidebar({
               padding: 16,
             }}
           >
+            {/* Live Preview */}
+            <div
+              style={{
+                marginBottom: 20,
+                borderRadius: 8,
+                border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+                overflow: "hidden",
+              }}
+            >
+              <NewtoneProvider
+                config={previewConfig}
+                initialMode={colorMode}
+                key={colorMode}
+              >
+                <PreviewSurface
+                  componentId={selection.componentId}
+                  propOverrides={propOverrides}
+                />
+              </NewtoneProvider>
+            </div>
+
             <h3
               style={{
                 fontSize: 13,
@@ -222,6 +236,31 @@ export function RightSidebar({
   );
 }
 
+function PreviewSurface({
+  componentId,
+  propOverrides,
+}: {
+  readonly componentId: string;
+  readonly propOverrides: Record<string, unknown>;
+}) {
+  const previewTokens = useTokens();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        height: 120,
+        backgroundColor: srgbToHex(previewTokens.backgroundElevated.srgb),
+      }}
+    >
+      <ComponentRenderer componentId={componentId} props={propOverrides} />
+    </div>
+  );
+}
+
 function PropControl({
   prop,
   value,
@@ -257,14 +296,7 @@ function PropControl({
 
   return (
     <div>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: 4,
-        }}
-      >
+      <div style={{ marginBottom: 4 }}>
         <span
           style={{
             fontSize: 12,
@@ -274,15 +306,6 @@ function PropControl({
         >
           {prop.label}
         </span>
-        <span
-          style={{
-            fontSize: 11,
-            color: srgbToHex(tokens.textSecondary.srgb),
-            fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
-          }}
-        >
-          {prop.control}
-        </span>
       </div>
 
       {prop.control === "select" && prop.options && (
@@ -318,6 +341,54 @@ function PropControl({
         />
       )}
 
+      {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 (
+          <div>
+            <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",
+              }}
+            />
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: 2,
+              }}
+            >
+              {options.map((o) => (
+                <span
+                  key={String(o.value)}
+                  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,
+                  }}
+                >
+                  {o.label}
+                </span>
+              ))}
+            </div>
+          </div>
+        );
+      })()}
+
       {prop.control === "toggle" && (
         <div
           role="switch"
@@ -359,14 +430,6 @@ function PropControl({
               }}
             />
           </div>
-          <span
-            style={{
-              fontSize: 12,
-              color: srgbToHex(tokens.textSecondary.srgb),
-            }}
-          >
-            {value ? "true" : "false"}
-          </span>
         </div>
       )}
     </div>

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useTokens } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import type { ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { ColorResult } from "newtone";
@@ -18,87 +18,13 @@ import type { Preset } from "../types";
 const SIDEBAR_WIDTH = 360;
 
 const 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" },
 ] as const;
 
-function SectionIcon({ id }: { readonly id: string }) {
-  const props = {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round" as const,
-    strokeLinejoin: "round" as const,
-  };
-
-  switch (id) {
-    case "dynamic-range":
-      // Sun/contrast icon
-      return (
-        <svg {...props}>
-          <circle cx="12" cy="12" r="5" />
-          <line x1="12" y1="1" x2="12" y2="3" />
-          <line x1="12" y1="21" x2="12" y2="23" />
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-          <line x1="1" y1="12" x2="3" y2="12" />
-          <line x1="21" y1="12" x2="23" y2="12" />
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-        </svg>
-      );
-    case "colors":
-      // Palette/droplet icon
-      return (
-        <svg {...props}>
-          <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-        </svg>
-      );
-    case "fonts":
-      // Type/text icon
-      return (
-        <svg {...props}>
-          <polyline points="4 7 4 4 20 4 20 7" />
-          <line x1="9" y1="20" x2="15" y2="20" />
-          <line x1="12" y1="4" x2="12" y2="20" />
-        </svg>
-      );
-    case "icons":
-      // Grid icon
-      return (
-        <svg {...props}>
-          <rect x="3" y="3" width="7" height="7" />
-          <rect x="14" y="3" width="7" height="7" />
-          <rect x="3" y="14" width="7" height="7" />
-          <rect x="14" y="14" width="7" height="7" />
-        </svg>
-      );
-    case "others":
-      // Sliders icon
-      return (
-        <svg {...props}>
-          <line x1="4" y1="21" x2="4" y2="14" />
-          <line x1="4" y1="10" x2="4" y2="3" />
-          <line x1="12" y1="21" x2="12" y2="12" />
-          <line x1="12" y1="8" x2="12" y2="3" />
-          <line x1="20" y1="21" x2="20" y2="16" />
-          <line x1="20" y1="12" x2="20" y2="3" />
-          <line x1="1" y1="14" x2="7" y2="14" />
-          <line x1="9" y1="8" x2="15" y2="8" />
-          <line x1="17" y1="16" x2="23" y2="16" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-}
-
 interface SidebarProps {
   readonly state: ConfiguratorState;
   readonly dispatch: (action: ConfiguratorAction) => void;
@@ -262,23 +188,17 @@ export function Sidebar({
                 }}
               >
                 <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <SectionIcon id={section.id} />
+                  <Icon name={section.icon} size={16} />
                   {section.label}
                 </span>
-                <svg
-                  width={12}
-                  height={12}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
+                <Icon
+                  name="expand_more"
+                  size={16}
                   style={{
                     transform: isOpen ? "rotate(180deg)" : "none",
                     transition: "transform 150ms ease",
-                  }}
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                  } as any}
+                />
               </button>
               {isOpen && (
                 <div

package/src/hooks/useEditorState.ts

@@ -201,9 +201,20 @@ export function useEditorState({
     }
   }, [sidebarSelection, initOverridesFromVariant]);
 
-  const handlePropOverride = useCallback((propName: string, value: unknown) => {
-    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
-  }, []);
+  const handlePropOverride = useCallback(
+    (propName: string, value: unknown) => {
+      setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+      // Re-open sidebar if closed while viewing a component (e.g. icon browser click)
+      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") {