@newtonedev/editor 0.1.4 → 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/ComponentRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAyDD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDAiC/E"}
+{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDA8D/E"}

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/dist/types.d.ts

@@ -8,7 +8,6 @@ export interface Preset {
     readonly published_state: ConfiguratorState | null;
 }
 export type SaveStatus = "saved" | "saving" | "unsaved" | "error";
-export type ThemeName = "neutral" | "primary" | "secondary" | "strong";
 export type PreviewView = {
     readonly kind: "overview";
 } | {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/Editor.tsx

@@ -1,9 +1,10 @@
+import { useMemo } from "react";
 import { NewtoneProvider } from "@newtonedev/components";
+import type { NewtoneThemeConfig } from "@newtonedev/components";
 import { useEditorState } from "./hooks/useEditorState";
 import { EditorShell } from "./components/EditorShell";
 import { Sidebar } from "./components/Sidebar";
 import { EditorHeader } from "./components/EditorHeader";
-import { ThemeBar } from "./components/ThemeBar";
 import { TableOfContents } from "./components/TableOfContents";
 import { PreviewWindow } from "./components/PreviewWindow";
 import { RightSidebar } from "./components/RightSidebar";
@@ -34,6 +35,17 @@ export function Editor({
     initialPreviewView,
   });
 
+  // Merge token overrides from chrome config into the preview config.
+  // Token overrides (from Token Tuner) are stored separately from configurator
+  // state, but should apply to the preview so components render accurately.
+  const previewConfig: NewtoneThemeConfig = useMemo(
+    () =>
+      chromeThemeConfig.tokenOverrides
+        ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides }
+        : editor.themeConfig,
+    [editor.themeConfig, chromeThemeConfig.tokenOverrides],
+  );
+
   return (
     <NewtoneProvider config={chromeThemeConfig}>
       <EditorShell
@@ -90,22 +102,18 @@ export function Editor({
               }}
             >
               <NewtoneProvider
-                config={editor.themeConfig}
+                config={previewConfig}
                 initialMode={editor.colorMode}
-                initialTheme={editor.activeTheme}
-                key={`${editor.colorMode}-${editor.activeTheme}`}
+                key={editor.colorMode}
               >
-                <ThemeBar
-                  activeTheme={editor.activeTheme}
-                  onThemeChange={editor.handleThemeChange}
-                />
                 <div style={{ flex: 1, overflowY: "auto", minWidth: 0 }}>
                   <PreviewWindow
                     view={editor.previewView}
                     selectedVariantId={editor.selectedVariantId}
-                    propOverrides={editor.propOverrides}
                     onNavigate={editor.handlePreviewNavigate}
                     onSelectVariant={editor.handleSelectVariant}
+                    propOverrides={editor.propOverrides}
+                    onPropOverride={editor.handlePropOverride}
                   />
                 </div>
               </NewtoneProvider>
@@ -120,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/EditorHeader.tsx

@@ -34,10 +34,10 @@ export function EditorHeader({
   const borderColor = srgbToHex(tokens.border.srgb);
 
   const statusColor: Record<SaveStatus, string> = {
-    saved: srgbToHex(tokens.success.srgb),
-    saving: srgbToHex(tokens.warning.srgb),
+    saved: srgbToHex(tokens.success.fill.srgb),
+    saving: srgbToHex(tokens.warning.fill.srgb),
     unsaved: srgbToHex(tokens.textSecondary.srgb),
-    error: srgbToHex(tokens.error.srgb),
+    error: srgbToHex(tokens.error.fill.srgb),
   };
 
   return (

package/src/components/EditorShell.tsx

@@ -23,7 +23,7 @@ export function EditorShell({
     <div
       style={{
         display: "flex",
-        height: "100vh",
+        height: "100%",
         overflow: "hidden",
         backgroundColor: srgbToHex(tokens.background.srgb),
       }}
@@ -33,7 +33,7 @@ export function EditorShell({
           flex: 1,
           display: "flex",
           flexDirection: "column",
-          height: "100vh",
+          height: "100%",
           overflow: "hidden",
           minWidth: 0,
         }}

package/src/components/FontPicker.tsx

@@ -84,7 +84,7 @@ export function FontPicker({
   const bgColor = srgbToHex(tokens.backgroundElevated.srgb);
   const borderColor = srgbToHex(tokens.border.srgb);
   const hoverColor = srgbToHex(tokens.backgroundSunken.srgb);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
 
   useEffect(() => {
     if (!isOpen) return;

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";
@@ -44,9 +44,9 @@ export function PresetSelector({
   const bgColor = srgbToHex(tokens.background.srgb);
   const textPrimary = srgbToHex(tokens.textPrimary.srgb);
   const textSecondary = srgbToHex(tokens.textSecondary.srgb);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
-  const warningColor = srgbToHex(tokens.warning.srgb);
-  const errorColor = srgbToHex(tokens.error.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
+  const warningColor = srgbToHex(tokens.warning.fill.srgb);
+  const errorColor = srgbToHex(tokens.error.fill.srgb);
   const hoverBg = `${borderColor}18`;
   const activeBg = `${interactiveColor}14`;
 
@@ -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 ? (
                 <>
@@ -105,7 +98,7 @@ export function RightSidebar({
                       padding: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: srgbToHex(tokens.interactive.srgb),
+                      color: srgbToHex(tokens.accent.fill.srgb),
                       whiteSpace: "nowrap",
                     }}
                   >
@@ -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"
@@ -339,7 +410,7 @@ function PropControl({
               height: 20,
               borderRadius: 10,
               backgroundColor: value
-                ? srgbToHex(tokens.interactive.srgb)
+                ? srgbToHex(tokens.accent.fill.srgb)
                 : srgbToHex(tokens.border.srgb),
               position: "relative",
               transition: "background-color 150ms ease",
@@ -359,14 +430,6 @@ function PropControl({
               }}
             />
           </div>
-          <span
-            style={{
-              fontSize: 12,
-              color: srgbToHex(tokens.textSecondary.srgb),
-            }}
-          >
-            {value ? "true" : "false"}
-          </span>
         </div>
       )}
     </div>