@newtonedev/editor 0.1.12 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"CategoryView.d.ts","sourceRoot":"","sources":["../../src/preview/CategoryView.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,qBAAqB,GACtB,EAAE,iBAAiB,kDAuHnB"}
+{"version":3,"file":"CategoryView.d.ts","sourceRoot":"","sources":["../../src/preview/CategoryView.tsx"],"names":[],"mappings":"AAKA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,qBAAqB,GACtB,EAAE,iBAAiB,kDAqHnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAuC,MAAM,mBAAmB,CAAC;AAIvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD,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;IACjE,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChD;AA+PD,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,YAAY,GACb,EAAE,wBAAwB,kDA4U1B"}
+{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAuC,MAAM,mBAAmB,CAAC;AAIvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD,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;IACjE,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChD;AA+PD,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,YAAY,GACb,EAAE,wBAAwB,kDA+S1B"}

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

@@ -1 +1 @@
-{"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;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,sBAAsB,kDA+D5F"}
+{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAgBA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,sBAAsB,kDA8D5F"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"OverviewView.d.ts","sourceRoot":"","sources":["../../src/preview/OverviewView.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,iBAAiB,2CAwFnB"}
+{"version":3,"file":"OverviewView.d.ts","sourceRoot":"","sources":["../../src/preview/OverviewView.tsx"],"names":[],"mappings":"AAKA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,iBAAiB,2CAwFnB"}

package/dist/preview/PaletteScaleView.d.ts

@@ -0,0 +1,11 @@
+import type { ColorResult } from "newtone";
+import type { ConfiguratorState } from "../configurator/types";
+interface PaletteScaleViewProps {
+    readonly state: ConfiguratorState;
+    readonly previewColors: readonly (readonly ColorResult[])[];
+    readonly useP3: boolean;
+    readonly onUseP3Change: (useP3: boolean) => void;
+}
+export declare function PaletteScaleView({ state, previewColors, useP3, onUseP3Change }: PaletteScaleViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PaletteScaleView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteScaleView.d.ts","sourceRoot":"","sources":["../../src/preview/PaletteScaleView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;IAC5D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAWD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAkGrG"}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorState } from "./configurator/types";
 import type { NewtoneThemeConfig } from "@newtonedev/components";
 import type { FontRuntimeMetrics, GoogleFontEntry } from "@newtonedev/fonts";
 import type { ReactNode } from "react";
@@ -44,11 +44,12 @@ export interface EditorPersistence {
     }) => Promise<{
         error?: unknown;
     }>;
-    /** Publish the active preset. */
+    /** Publish all presets as variants. */
     readonly onPublish: (params: {
         readonly state: ConfiguratorState;
         readonly presets: readonly Preset[];
         readonly activePresetId: string;
+        readonly defaultVariantId: string;
         readonly calibrations?: Record<string, number>;
         readonly fontMetrics?: Record<string, FontRuntimeMetrics>;
     }) => Promise<{
@@ -58,7 +59,7 @@ export interface EditorPersistence {
     readonly persistPresets: (params: {
         readonly presets: readonly Preset[];
         readonly activePresetId: string;
-        readonly publishedPresetId: string | null;
+        readonly defaultVariantId: string | null;
     }) => Promise<void>;
 }
 export interface EditorHeaderSlots {

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,7 +1,7 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.12",
-  "description": "Shared color system editor for Newtone applications",
+  "version": "0.2.0",
+  "description": "Color system editor for Newtone applications",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,12 +37,15 @@
   },
   "dependencies": {
     "newtone": "^0.1.0",
-    "@newtonedev/components": "^0.1.3",
-    "@newtonedev/configurator": "^0.1.2",
+    "newtone-api": "^0.0.3",
+    "@newtonedev/colors": "^1.1.4",
+    "@newtonedev/components": "^0.1.18",
+    "@newtonedev/fonts": "^0.1.0",
     "react-native-web": "^0.19.10"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.0",

package/src/Editor.tsx

@@ -1,5 +1,5 @@
-import { useMemo, useCallback } from "react";
-import { NewtoneProvider } from "@newtonedev/components";
+import { useMemo, useCallback, useState } from "react";
+import { NewtoneProvider, useNewtoneTheme } from "@newtonedev/components";
 import type { NewtoneThemeConfig } from "@newtonedev/components";
 import type { TextRole } from "@newtonedev/fonts";
 import { useEditorState } from "./hooks/useEditorState";
@@ -10,6 +10,7 @@ import { PrimaryNav } from "./components/PrimaryNav";
 import { ConfiguratorPanel } from "./components/ConfiguratorPanel";
 import { TableOfContents } from "./components/TableOfContents";
 import { PreviewWindow } from "./components/PreviewWindow";
+import { PaletteScaleView } from "./preview/PaletteScaleView";
 import { RightSidebar } from "./components/RightSidebar";
 import type { EditorProps } from "./types";
 
@@ -29,6 +30,10 @@ export function Editor({
   manifestUrl,
   fontCatalog,
 }: EditorProps) {
+  const [activePaletteIndex, setActivePaletteIndex] = useState(0);
+  const { gamut } = useNewtoneTheme();
+  const [useP3, setUseP3] = useState(gamut === 'p3');
+
   const editor = useEditorState({
     initialState,
     initialIsPublished,
@@ -40,6 +45,7 @@ export function Editor({
     onNavigate,
     initialPreviewView,
     manifestUrl,
+    useP3,
   });
 
   // Per-role weight state and handler
@@ -68,10 +74,10 @@ export function Editor({
   // state, but should apply to the preview so components render accurately.
   const previewConfig: NewtoneThemeConfig = useMemo(
     () =>
-      chromeThemeConfig.tokenOverrides
-        ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides }
+      (chromeThemeConfig as any).tokenOverrides
+        ? { ...editor.themeConfig, tokenOverrides: (chromeThemeConfig as any).tokenOverrides } as NewtoneThemeConfig
         : editor.themeConfig,
-    [editor.themeConfig, chromeThemeConfig.tokenOverrides],
+    [editor.themeConfig, (chromeThemeConfig as any).tokenOverrides],
   );
 
   return (
@@ -81,6 +87,11 @@ export function Editor({
           <Sidebar
             isDirty={editor.isDirty}
             onRevert={editor.handleRevert}
+            state={editor.configuratorState}
+            previewColors={editor.previewColors}
+            activePaletteIndex={activePaletteIndex}
+            activeSectionId={editor.activeSectionId}
+            useP3={useP3}
           />
         }
         navbar={
@@ -93,12 +104,13 @@ export function Editor({
             headerSlots={headerSlots}
             presets={editor.presets}
             activePresetId={editor.activePresetId}
-            publishedPresetId={editor.publishedPresetId}
+            defaultVariantId={editor.defaultVariantId}
             onSwitchPreset={editor.switchPreset}
             onCreatePreset={editor.createPreset}
             onRenamePreset={editor.renamePreset}
             onDeletePreset={editor.deletePreset}
             onDuplicatePreset={editor.duplicatePreset}
+            onSetDefaultVariant={editor.setDefaultVariant}
           />
         }
         content={
@@ -131,6 +143,9 @@ export function Editor({
                 colorMode={editor.colorMode}
                 onColorModeChange={editor.handleColorModeChange}
                 fontCatalog={fontCatalog}
+                activePaletteIndex={activePaletteIndex}
+                onActivePaletteChange={setActivePaletteIndex}
+                useP3={useP3}
               />
             )}
             <div
@@ -147,19 +162,28 @@ export function Editor({
                 initialMode={editor.colorMode}
                 key={editor.colorMode}
               >
-                <div style={{ flex: 1, overflowY: "auto", minWidth: 0 }}>
-                  <PreviewWindow
-                    view={editor.previewView}
-                    selectedVariantId={editor.selectedVariantId}
-                    onNavigate={editor.handlePreviewNavigate}
-                    onSelectVariant={editor.handleSelectVariant}
-                    propOverrides={editor.propOverrides}
-                    onPropOverride={editor.handlePropOverride}
-                    roleWeights={roleWeights}
-                    onRoleWeightChange={handleRoleWeightChange}
-                    fontCatalog={fontCatalog}
-                    scopeFontMap={scopeFontMap}
-                  />
+                <div style={{ flex: 1, overflow: "hidden", minWidth: 0, display: "flex", flexDirection: "column" }}>
+                  {editor.activeSectionId === "colors" ? (
+                    <PaletteScaleView
+                      state={editor.configuratorState}
+                      previewColors={editor.previewColors}
+                      useP3={useP3}
+                      onUseP3Change={setUseP3}
+                    />
+                  ) : (
+                    <PreviewWindow
+                      view={editor.previewView}
+                      selectedVariantId={editor.selectedVariantId}
+                      onNavigate={editor.handlePreviewNavigate}
+                      onSelectVariant={editor.handleSelectVariant}
+                      propOverrides={editor.propOverrides}
+                      onPropOverride={editor.handlePropOverride}
+                      roleWeights={roleWeights}
+                      onRoleWeightChange={handleRoleWeightChange}
+                      fontCatalog={fontCatalog}
+                      scopeFontMap={scopeFontMap}
+                    />
+                  )}
                 </div>
               </NewtoneProvider>
             </div>

package/src/components/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import { useTokens, Icon } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+
 
 export function CopyButton({ text }: { readonly text: string }) {
   const tokens = useTokens();
@@ -24,18 +24,14 @@ export function CopyButton({ text }: { readonly text: string }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        color: srgbToHex(
-          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb,
-        ),
+        color: copied ? tokens.colors.secondary.emphasis.fontPrimary : tokens.colors.primary.main.fontDisabled,
         transition: "color 150ms ease",
       }}
     >
       <Icon
         name={copied ? "check" : "content_copy"}
         size={16}
-        color={srgbToHex(
-          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb,
-        )}
+        color={copied ? tokens.colors.secondary.emphasis.fontPrimary : tokens.colors.primary.main.fontDisabled}
       />
     </button>
   );
@@ -51,8 +47,8 @@ export function CodeBlock({
   return (
     <div
       style={{
-        backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        backgroundColor: tokens.colors.primary.main.divider,
+        border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
         borderRadius: 8,
         overflow: "hidden",
       }}
@@ -62,7 +58,7 @@ export function CodeBlock({
           display: "flex",
           justifyContent: "flex-end",
           padding: "4px 8px",
-          borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+          borderBottom: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
         }}
       >
         <CopyButton text={code} />
@@ -75,7 +71,7 @@ export function CodeBlock({
           fontSize: 13,
           lineHeight: 1.5,
           fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
-          color: srgbToHex(tokens.textPrimary.srgb),
+          color: tokens.colors.primary.main.fontPrimary,
           margin: 0,
         }}
       >

package/src/components/ConfiguratorPanel.tsx

@@ -1,9 +1,8 @@
-import { useTokens } from "@newtonedev/components";
+import { Frame, Wrapper } 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 type { ConfiguratorState } from "../configurator/types";
+import type { ConfiguratorAction } from "../configurator/state/actions";
 import type { GoogleFontEntry } from "@newtonedev/fonts";
 import {
   ColorsSection,
@@ -21,6 +20,9 @@ interface ConfiguratorPanelProps {
   readonly colorMode: ColorMode;
   readonly onColorModeChange: (mode: ColorMode) => void;
   readonly fontCatalog?: readonly GoogleFontEntry[];
+  readonly activePaletteIndex: number;
+  readonly onActivePaletteChange: (index: number) => void;
+  readonly useP3: boolean;
 }
 
 const PANEL_WIDTH = 360;
@@ -33,23 +35,25 @@ export function ConfiguratorPanel({
   colorMode,
   onColorModeChange,
   fontCatalog,
+  activePaletteIndex,
+  onActivePaletteChange,
+  useP3,
 }: ConfiguratorPanelProps) {
-  const tokens = useTokens();
-  const borderColor = srgbToHex(tokens.border.srgb);
-
   return (
-    <div
+    <Frame
+      bordered
+      padding="20"
+      direction="vertical"
+      gap="24"
+      width={PANEL_WIDTH}
+      overflow="hidden"
       style={{
-        width: PANEL_WIDTH,
         flexShrink: 0,
-        overflowY: "auto",
-        borderRight: `1px solid ${borderColor}`,
-        padding: 20,
-        backgroundColor: srgbToHex(tokens.background.srgb),
-        display: "flex",
-        flexDirection: "column",
-        gap: 24,
-      }}
+        overflow: "auto",
+        borderTopWidth: 0,
+        borderBottomWidth: 0,
+        borderLeftWidth: 0,
+      } as any}
     >
       {activeSectionId === "colors" && (
         <>
@@ -60,6 +64,9 @@ export function ConfiguratorPanel({
             previewColors={previewColors}
             colorMode={colorMode}
             onColorModeChange={onColorModeChange}
+            activePaletteIndex={activePaletteIndex}
+            onActivePaletteChange={onActivePaletteChange}
+            useP3={useP3}
           />
         </>
       )}
@@ -72,6 +79,6 @@ export function ConfiguratorPanel({
       {activeSectionId === "layout" && (
         <OthersSection state={state} dispatch={dispatch} />
       )}
-    </div>
+    </Frame>
   );
 }

package/src/components/EditorHeader.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
-import { useTokens, Button } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import { Frame, Text, Wrapper, Button } from "@newtonedev/components";
 import type { SaveStatus, Preset } from "../types";
 import { PresetSelector } from "./PresetSelector";
 
@@ -16,12 +15,13 @@ interface EditorHeaderProps {
   };
   readonly presets: readonly Preset[];
   readonly activePresetId: string;
-  readonly publishedPresetId: string | null;
+  readonly defaultVariantId: string | null;
   readonly onSwitchPreset: (presetId: string) => void;
   readonly onCreatePreset: (name: string) => Promise<string>;
   readonly onRenamePreset: (presetId: string, name: string) => void;
   readonly onDeletePreset: (presetId: string) => Promise<void>;
   readonly onDuplicatePreset: (presetId: string, name: string) => Promise<string>;
+  readonly onSetDefaultVariant: (presetId: string) => void;
 }
 
 const STATUS_LABEL: Record<SaveStatus, string> = {
@@ -31,6 +31,13 @@ const STATUS_LABEL: Record<SaveStatus, string> = {
   error: "Save failed",
 };
 
+const STATUS_COLOR_MAP: Record<SaveStatus, "accent" | "tertiary" | "secondary" | "primary"> = {
+  saved: "accent",
+  saving: "tertiary",
+  unsaved: "secondary",
+  error: "primary",
+};
+
 export function EditorHeader({
   saveStatus,
   isPublished,
@@ -40,60 +47,43 @@ export function EditorHeader({
   headerSlots,
   presets,
   activePresetId,
-  publishedPresetId,
+  defaultVariantId,
   onSwitchPreset,
   onCreatePreset,
   onRenamePreset,
   onDeletePreset,
   onDuplicatePreset,
+  onSetDefaultVariant,
 }: EditorHeaderProps) {
-  const tokens = useTokens();
-  const borderColor = srgbToHex(tokens.border.srgb);
-
-  const statusColor: Record<SaveStatus, string> = {
-    saved: srgbToHex(tokens.success.fill.srgb),
-    saving: srgbToHex(tokens.warning.fill.srgb),
-    unsaved: srgbToHex(tokens.textSecondary.srgb),
-    error: srgbToHex(tokens.error.fill.srgb),
-  };
-
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "12px 24px",
-        borderBottom: `1px solid ${borderColor}`,
-        backgroundColor: srgbToHex(tokens.background.srgb),
-        flexShrink: 0,
-      }}
+    <Frame
+      bordered
+      padding={{ x: "24", y: "12" }}
+      direction="horizontal"
+      align="center"
+      justify="between"
+      style={{ flexShrink: 0, borderLeftWidth: 0, borderRightWidth: 0, borderTopWidth: 0 }}
     >
-      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+      <Wrapper direction="horizontal" align="center" gap="16">
         {headerSlots?.left}
         <PresetSelector
           presets={presets}
           activePresetId={activePresetId}
-          publishedPresetId={publishedPresetId}
+          defaultVariantId={defaultVariantId}
           onSwitchPreset={onSwitchPreset}
           onCreatePreset={onCreatePreset}
           onRenamePreset={onRenamePreset}
           onDeletePreset={onDeletePreset}
           onDuplicatePreset={onDuplicatePreset}
+          onSetDefaultVariant={onSetDefaultVariant}
         />
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <span
-          style={{
-            fontSize: 12,
-            color: statusColor[saveStatus],
-            fontWeight: 500,
-          }}
-        >
+      </Wrapper>
+      <Wrapper direction="horizontal" align="center" gap="12">
+        <Text role="caption" color={STATUS_COLOR_MAP[saveStatus]}>
           {STATUS_LABEL[saveStatus]}
-        </span>
+        </Text>
         {saveStatus === "error" && (
-          <Button variant="tertiary" semantic="neutral" size="sm" icon="refresh" onPress={onRetry}>
+          <Button variant="ghost" size="sm" icon="refresh" onPress={onRetry}>
             Retry
           </Button>
         )}
@@ -107,7 +97,7 @@ export function EditorHeader({
           {publishing ? "Publishing..." : isPublished ? "Published" : "Publish"}
         </Button>
         {headerSlots?.right}
-      </div>
-    </div>
+      </Wrapper>
+    </Frame>
   );
 }

package/src/components/EditorShell.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
-import { useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import { Frame, Wrapper } from "@newtonedev/components";
 
 const SIDEBAR_WIDTH = 360;
 
@@ -17,39 +16,28 @@ export function EditorShell({
   content,
   rightPanel,
 }: EditorShellProps) {
-  const tokens = useTokens();
-
   return (
-    <div
-      style={{
-        display: "flex",
-        height: "100%",
-        overflow: "hidden",
-        backgroundColor: srgbToHex(tokens.background.srgb),
-      }}
+    <Frame
+      direction="horizontal"
+      width="fill"
+      height="fill"
+      style={{ overflow: "hidden" }}
     >
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          overflow: "hidden",
-          minWidth: 0,
-        }}
+      <Wrapper
+        direction="vertical"
+        height="fill"
+        style={{ flex: 1, minWidth: 0, overflow: "hidden" }}
       >
         {navbar}
 
-        <div
-          style={{
-            display: "flex",
-            flex: 1,
-            overflow: "hidden",
-          }}
+        <Wrapper
+          direction="horizontal"
+          width="fill"
+          style={{ flex: 1, overflow: "hidden" }}
         >
           {content}
-        </div>
-      </div>
+        </Wrapper>
+      </Wrapper>
 
       <div
         style={{
@@ -62,6 +50,6 @@ export function EditorShell({
         {sidebar}
         {rightPanel}
       </div>
-    </div>
+    </Frame>
   );
 }

package/src/components/FontPicker.tsx

@@ -3,7 +3,7 @@ import { useTokens } from "@newtonedev/components";
 import type { FontConfig } from "@newtonedev/components";
 import { SYSTEM_FONTS } from "@newtonedev/fonts";
 import type { GoogleFontEntry, SystemFontEntry } from "@newtonedev/fonts";
-import { srgbToHex } from "newtone";
+
 
 type FontSlot = "default" | "display" | "mono" | "currency";
 
@@ -76,12 +76,12 @@ export function FontPicker({
   const containerRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const labelColor = srgbToHex(tokens.textSecondary.srgb);
-  const textColor = srgbToHex(tokens.textPrimary.srgb);
-  const bgColor = srgbToHex(tokens.backgroundElevated.srgb);
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const hoverColor = srgbToHex(tokens.backgroundSunken.srgb);
-  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
+  const labelColor = tokens.colors.primary.main.fontTertiary;
+  const textColor = tokens.colors.primary.main.fontPrimary;
+  const bgColor = tokens.colors.primary.main.divider;
+  const borderColor = tokens.colors.primary.main.fontDisabled;
+  const hoverColor = tokens.colors.primary.main.divider;
+  const interactiveColor = tokens.colors.secondary.emphasis.fontPrimary;
 
   useEffect(() => {
     if (!isOpen) return;