@newtonedev/editor 0.1.5 → 0.1.7

package/src/components/PreviewWindow.tsx

@@ -1,25 +1,36 @@
 import { useCallback } from "react";
 import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
+import type { TextRole } from "@newtonedev/fonts";
 import { OverviewView } from "../preview/OverviewView";
 import { CategoryView } from "../preview/CategoryView";
 import { ComponentDetailView } from "../preview/ComponentDetailView";
-import type { PreviewView } from "../types";
+import type { PreviewView, EditorFontEntry } 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;
+  readonly roleWeights?: Partial<Record<TextRole, number>>;
+  readonly onRoleWeightChange?: (role: TextRole, weight: number) => void;
+  readonly fontCatalog?: readonly EditorFontEntry[];
+  readonly scopeFontMap?: Record<string, string>;
 }
 
 export function PreviewWindow({
   view,
   selectedVariantId,
-  propOverrides,
   onNavigate,
   onSelectVariant,
+  propOverrides,
+  onPropOverride,
+  roleWeights,
+  onRoleWeightChange,
+  fontCatalog,
+  scopeFontMap,
 }: PreviewWindowProps) {
   const tokens = useTokens();
 
@@ -59,8 +70,13 @@ export function PreviewWindow({
           <ComponentDetailView
             componentId={view.componentId}
             selectedVariantId={selectedVariantId}
-            propOverrides={propOverrides}
             onSelectVariant={onSelectVariant}
+            propOverrides={propOverrides}
+            onPropOverride={onPropOverride}
+            roleWeights={roleWeights}
+            onRoleWeightChange={onRoleWeightChange}
+            fontCatalog={fontCatalog}
+            scopeFontMap={scopeFontMap}
           />
         )}
       </div>

package/src/components/PrimaryNav.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useTokens, Icon, CATEGORIES } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface PrimaryNavProps {
+  readonly activeSectionId: string | null;
+  readonly onSelectSection: (sectionId: string) => void;
+}
+
+const NAV_WIDTH = 60;
+
+export function PrimaryNav({ activeSectionId, onSelectSection }: PrimaryNavProps) {
+  const tokens = useTokens();
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const bg = srgbToHex(tokens.background.srgb);
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const activeBg = srgbToHex(tokens.backgroundInteractive.srgb);
+  const iconColor = srgbToHex(tokens.textSecondary.srgb);
+  const activeIconColor = srgbToHex(tokens.textPrimary.srgb);
+
+  return (
+    <nav
+      aria-label="Section navigation"
+      style={{
+        width: NAV_WIDTH,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingTop: 12,
+        gap: 4,
+        backgroundColor: bg,
+        borderRight: `1px solid ${borderColor}`,
+      }}
+    >
+      {CATEGORIES.map((category) => {
+        const isActive = activeSectionId === category.id;
+        const isHovered = hoveredId === category.id;
+
+        return (
+          <button
+            key={category.id}
+            onClick={() => onSelectSection(category.id)}
+            onMouseEnter={() => setHoveredId(category.id)}
+            onMouseLeave={() => setHoveredId(null)}
+            title={category.name}
+            aria-current={isActive ? "page" : undefined}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              border: "none",
+              backgroundColor: isActive
+                ? activeBg
+                : isHovered
+                  ? `${borderColor}20`
+                  : "transparent",
+              cursor: "pointer",
+              transition: "background-color 150ms",
+            }}
+          >
+            <Icon
+              name={category.icon ?? "circle"}
+              size={24}
+              color={isActive ? activeIconColor : iconColor}
+            />
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

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,108 +1,11 @@
-import { useState } from "react";
 import { useTokens } from "@newtonedev/components";
-import type { ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ColorResult } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
-import type { ConfiguratorAction } from "@newtonedev/configurator";
-import {
-  ColorsSection,
-  DynamicRangeSection,
-  IconsSection,
-  FontsSection,
-  OthersSection,
-} from "./sections";
 import { PresetSelector } from "./PresetSelector";
 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" },
-] 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;
-  readonly previewColors: readonly (readonly ColorResult[])[];
   readonly isDirty: boolean;
   readonly onRevert: () => void;
   readonly presets: readonly Preset[];
@@ -116,14 +19,9 @@ interface SidebarProps {
     presetId: string,
     name: string,
   ) => Promise<string>;
-  readonly colorMode: ColorMode;
-  readonly onColorModeChange: (mode: ColorMode) => void;
 }
 
 export function Sidebar({
-  state,
-  dispatch,
-  previewColors,
   isDirty,
   onRevert,
   presets,
@@ -134,52 +32,11 @@ export function Sidebar({
   onRenamePreset,
   onDeletePreset,
   onDuplicatePreset,
-  colorMode,
-  onColorModeChange,
 }: SidebarProps) {
   const tokens = useTokens();
-  const [openSections, setOpenSections] = useState<Set<string>>(
-    new Set(["dynamic-range", "colors"]),
-  );
-  const [hoveredSectionId, setHoveredSectionId] = useState<string | null>(null);
 
   const borderColor = srgbToHex(tokens.border.srgb);
   const bgColor = srgbToHex(tokens.background.srgb);
-  const hoverBg = `${borderColor}10`;
-
-  const toggleSection = (id: string) => {
-    setOpenSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const renderSectionContent = (sectionId: string) => {
-    switch (sectionId) {
-      case "dynamic-range":
-        return <DynamicRangeSection state={state} dispatch={dispatch} />;
-      case "colors":
-        return (
-          <ColorsSection
-            state={state}
-            dispatch={dispatch}
-            previewColors={previewColors}
-            colorMode={colorMode}
-            onColorModeChange={onColorModeChange}
-          />
-        );
-      case "icons":
-        return <IconsSection state={state} dispatch={dispatch} />;
-      case "fonts":
-        return <FontsSection state={state} dispatch={dispatch} />;
-      case "others":
-        return <OthersSection state={state} dispatch={dispatch} />;
-      default:
-        return null;
-    }
-  };
 
   return (
     <div
@@ -193,7 +50,7 @@ export function Sidebar({
         backgroundColor: bgColor,
       }}
     >
-      {/* Sticky Header */}
+      {/* Header */}
       <div
         style={{
           flexShrink: 0,
@@ -225,80 +82,16 @@ export function Sidebar({
         />
       </div>
 
-      {/* Scrollable Accordion Area */}
+      {/* Content area (empty for now) */}
       <div
         style={{
           flex: 1,
           overflowY: "auto",
           overflowX: "hidden",
         }}
-      >
-        {ACCORDION_SECTIONS.map((section) => {
-          const isOpen = openSections.has(section.id);
-          const isHovered = hoveredSectionId === section.id;
-
-          return (
-            <div key={section.id}>
-              <button
-                onClick={() => toggleSection(section.id)}
-                onMouseEnter={() => setHoveredSectionId(section.id)}
-                onMouseLeave={() => setHoveredSectionId(null)}
-                aria-expanded={isOpen}
-                aria-controls={`section-${section.id}`}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "12px 20px",
-                  border: "none",
-                  borderBottom: `1px solid ${borderColor}`,
-                  background: isHovered ? hoverBg : "none",
-                  cursor: "pointer",
-                  fontSize: 14,
-                  fontWeight: 500,
-                  color: srgbToHex(tokens.textPrimary.srgb),
-                  transition: "background-color 100ms ease",
-                }}
-              >
-                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <SectionIcon id={section.id} />
-                  {section.label}
-                </span>
-                <svg
-                  width={12}
-                  height={12}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                  style={{
-                    transform: isOpen ? "rotate(180deg)" : "none",
-                    transition: "transform 150ms ease",
-                  }}
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </button>
-              {isOpen && (
-                <div
-                  id={`section-${section.id}`}
-                  role="region"
-                  aria-label={section.label}
-                  style={{
-                    padding: "16px 20px",
-                    borderBottom: `1px solid ${borderColor}`,
-                  }}
-                >
-                  {renderSectionContent(section.id)}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
+      />
 
-      {/* Sticky Footer */}
+      {/* Footer */}
       <div
         style={{
           flexShrink: 0,