@newtonedev/editor 0.1.11 → 0.2.0

package/src/hooks/usePresets.ts

@@ -1,11 +1,11 @@
 import { useState, useCallback, useRef } from "react";
-import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorState } from "../configurator/types";
 import type { Preset } from "../types";
 
 interface UsePresetsOptions {
   readonly initialPresets: readonly Preset[];
   readonly initialActivePresetId: string;
-  readonly initialPublishedPresetId: string | null;
+  readonly initialDefaultVariantId: string | null;
   readonly defaultState: ConfiguratorState;
   readonly onPresetSwitch: (newState: ConfiguratorState) => void;
   readonly getCurrentState: () => ConfiguratorState;
@@ -13,14 +13,14 @@ interface UsePresetsOptions {
   readonly persistPresets: (params: {
     readonly presets: readonly Preset[];
     readonly activePresetId: string;
-    readonly publishedPresetId: string | null;
+    readonly defaultVariantId: string | null;
   }) => Promise<void>;
 }
 
 interface UsePresetsReturn {
   readonly presets: readonly Preset[];
   readonly activePresetId: string;
-  readonly publishedPresetId: string | null;
+  readonly defaultVariantId: string | null;
   readonly activePreset: Preset;
   readonly switchPreset: (presetId: string) => Promise<void>;
   readonly createPreset: (name: string) => Promise<string>;
@@ -33,16 +33,17 @@ interface UsePresetsReturn {
   readonly updateActivePresetDraftState: (
     state: ConfiguratorState,
   ) => readonly Preset[];
-  readonly publishActivePreset: (
+  readonly publishAllVariants: (
     state: ConfiguratorState,
   ) => readonly Preset[];
   readonly revertActivePreset: () => ConfiguratorState | null;
+  readonly setDefaultVariant: (presetId: string) => void;
 }
 
 export function usePresets({
   initialPresets,
   initialActivePresetId,
-  initialPublishedPresetId,
+  initialDefaultVariantId,
   defaultState,
   onPresetSwitch,
   getCurrentState,
@@ -51,13 +52,15 @@ export function usePresets({
 }: UsePresetsOptions): UsePresetsReturn {
   const [presets, setPresets] = useState<readonly Preset[]>(initialPresets);
   const [activePresetId, setActivePresetId] = useState(initialActivePresetId);
-  const [publishedPresetId, setPublishedPresetId] = useState<string | null>(
-    initialPublishedPresetId,
+  const [defaultVariantId, setDefaultVariantId] = useState<string | null>(
+    initialDefaultVariantId,
   );
   const presetsRef = useRef(presets);
+  const activePresetIdRef = useRef(activePresetId);
 
-  // Keep ref in sync
+  // Keep refs in sync
   presetsRef.current = presets;
+  activePresetIdRef.current = activePresetId;
 
   const activePreset =
     presets.find((p) => p.id === activePresetId) ?? presets[0];
@@ -92,12 +95,12 @@ export function usePresets({
       await persistPresets({
         presets: updatedPresets,
         activePresetId: presetId,
-        publishedPresetId,
+        defaultVariantId,
       });
     },
     [
       activePresetId,
-      publishedPresetId,
+      defaultVariantId,
       flushPendingSave,
       getCurrentState,
       onPresetSwitch,
@@ -120,11 +123,11 @@ export function usePresets({
       await persistPresets({
         presets: newPresets,
         activePresetId,
-        publishedPresetId,
+        defaultVariantId,
       });
       return newPreset.id;
     },
-    [defaultState, activePresetId, publishedPresetId, persistPresets],
+    [defaultState, activePresetId, defaultVariantId, persistPresets],
   );
 
   // --- Duplicate preset ---
@@ -136,7 +139,7 @@ export function usePresets({
       const newPreset: Preset = {
         id: crypto.randomUUID(),
         name: newName,
-        draft_state: source.draft_state,
+        draft_state: structuredClone(source.draft_state),
         published_state: null,
       };
       const newPresets = [...presetsRef.current, newPreset];
@@ -145,11 +148,11 @@ export function usePresets({
       await persistPresets({
         presets: newPresets,
         activePresetId,
-        publishedPresetId,
+        defaultVariantId,
       });
       return newPreset.id;
     },
-    [activePresetId, publishedPresetId, persistPresets],
+    [activePresetId, defaultVariantId, persistPresets],
   );
 
   // --- Rename preset ---
@@ -164,10 +167,10 @@ export function usePresets({
       persistPresets({
         presets: newPresets,
         activePresetId,
-        publishedPresetId,
+        defaultVariantId,
       });
     },
-    [activePresetId, publishedPresetId, persistPresets],
+    [activePresetId, defaultVariantId, persistPresets],
   );
 
   // --- Delete preset ---
@@ -177,7 +180,7 @@ export function usePresets({
 
       const newPresets = presetsRef.current.filter((p) => p.id !== presetId);
       let newActiveId = activePresetId;
-      let newPublishedId = publishedPresetId;
+      let newPublishedId = defaultVariantId;
 
       // If deleting active preset, switch to first remaining
       if (presetId === activePresetId) {
@@ -186,50 +189,54 @@ export function usePresets({
       }
 
       // If deleting published preset, clear it
-      if (presetId === publishedPresetId) {
+      if (presetId === defaultVariantId) {
         newPublishedId = null;
       }
 
       setPresets(newPresets);
       presetsRef.current = newPresets;
       setActivePresetId(newActiveId);
-      setPublishedPresetId(newPublishedId);
+      setDefaultVariantId(newPublishedId);
       await persistPresets({
         presets: newPresets,
         activePresetId: newActiveId,
-        publishedPresetId: newPublishedId,
+        defaultVariantId: newPublishedId,
       });
     },
-    [activePresetId, publishedPresetId, onPresetSwitch, persistPresets],
+    [activePresetId, defaultVariantId, onPresetSwitch, persistPresets],
   );
 
   // --- Update active preset's draft_state (called during auto-save) ---
+  // Uses ref instead of state to avoid stale closures in debounced saves
   const updateActivePresetDraftState = useCallback(
     (state: ConfiguratorState): readonly Preset[] => {
+      const currentId = activePresetIdRef.current;
       const newPresets = presetsRef.current.map((p) =>
-        p.id === activePresetId ? { ...p, draft_state: state } : p,
+        p.id === currentId ? { ...p, draft_state: state } : p,
       );
       setPresets(newPresets);
       presetsRef.current = newPresets;
       return newPresets;
     },
-    [activePresetId],
+    [],
   );
 
-  // --- Publish active preset ---
-  const publishActivePreset = useCallback(
+  // --- Publish all presets as variants ---
+  const publishAllVariants = useCallback(
     (state: ConfiguratorState): readonly Preset[] => {
+      const currentId = activePresetIdRef.current;
       const newPresets = presetsRef.current.map((p) =>
-        p.id === activePresetId
+        p.id === currentId
           ? { ...p, draft_state: state, published_state: state }
-          : p,
+          : { ...p, published_state: p.draft_state },
       );
       setPresets(newPresets);
       presetsRef.current = newPresets;
-      setPublishedPresetId(activePresetId);
+      // Set default variant to current active if not already set
+      if (!defaultVariantId) setDefaultVariantId(currentId);
       return newPresets;
     },
-    [activePresetId],
+    [defaultVariantId],
   );
 
   // --- Revert active preset to its published_state ---
@@ -237,10 +244,23 @@ export function usePresets({
     return activePreset.published_state;
   }, [activePreset]);
 
+  // --- Set default variant ---
+  const setDefaultVariant = useCallback(
+    (presetId: string) => {
+      setDefaultVariantId(presetId);
+      persistPresets({
+        presets: presetsRef.current,
+        activePresetId: activePresetIdRef.current,
+        defaultVariantId: presetId,
+      });
+    },
+    [persistPresets],
+  );
+
   return {
     presets,
     activePresetId,
-    publishedPresetId,
+    defaultVariantId,
     activePreset,
     switchPreset,
     createPreset,
@@ -248,7 +268,8 @@ export function usePresets({
     deletePreset,
     duplicatePreset,
     updateActivePresetDraftState,
-    publishActivePreset,
+    publishAllVariants,
     revertActivePreset,
+    setDefaultVariant,
   };
 }

package/src/index.ts

@@ -1,3 +1,36 @@
+// ===== Configurator exports (formerly @newtonedev/configurator) =====
+
+// State types
+export type { ConfiguratorState, PaletteState, SpacingPreset, FontConfig, FontScope, FontSlotConfig } from './configurator/types';
+export type { ConfiguratorAction } from './configurator/state/actions';
+
+// Bridge functions (for headless usage)
+export { toThemeConfig } from './configurator/bridge/toThemeConfig';
+export { toCSS } from './configurator/bridge/toCSS';
+export { toJSON } from './configurator/bridge/toJSON';
+export type { ConfiguratorExport } from './configurator/bridge/toJSON';
+
+// Hue conversion utilities
+export { traditionalHueToOklch } from './configurator/hue-conversion';
+export { hexToPaletteParams } from './configurator/hex-conversion';
+export type { HexPaletteParams } from './configurator/hex-conversion';
+
+// Defaults & migration
+export { DEFAULT_CONFIGURATOR_STATE } from './configurator/state/defaults';
+export { migratePaletteState, migrateConfiguratorState } from './configurator/state/reducer';
+
+// Constants
+export { SEMANTIC_HUE_RANGES } from './configurator/constants';
+
+// Hooks (for custom configurator UIs)
+export { useConfigurator } from './configurator/hooks/useConfigurator';
+export type { UseConfiguratorResult } from './configurator/hooks/useConfigurator';
+export { usePreviewColors } from './configurator/hooks/usePreviewColors';
+export { useWcagValidation } from './configurator/hooks/useWcagValidation';
+export type { WcagValidation } from './configurator/hooks/useWcagValidation';
+
+// ===== Editor exports =====
+
 // Types
 export type {
   Preset,

package/src/preview/CategoryView.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 import { getCategory, getComponentsByCategory } from "@newtonedev/components";
 import { ComponentRenderer } from "./ComponentRenderer";
 
@@ -26,7 +25,7 @@ export function CategoryView({
         style={{
           fontSize: 22,
           fontWeight: 700,
-          color: srgbToHex(tokens.textPrimary.srgb),
+          color: tokens.colors.primary.main.fontPrimary,
           margin: 0,
           marginBottom: 4,
         }}
@@ -36,7 +35,7 @@ export function CategoryView({
       <p
         style={{
           fontSize: 14,
-          color: srgbToHex(tokens.textSecondary.srgb),
+          color: tokens.colors.primary.main.fontTertiary,
           margin: 0,
           marginBottom: 32,
         }}
@@ -65,10 +64,8 @@ export function CategoryView({
                 flexDirection: "column",
                 padding: 24,
                 borderRadius: 12,
-                border: `1px solid ${srgbToHex(
-                  isHovered ? tokens.accent.fill.srgb : tokens.border.srgb,
-                )}`,
-                backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                border: `1px solid ${isHovered ? tokens.colors.secondary.emphasis.fontPrimary : tokens.colors.primary.main.fontDisabled}`,
+                backgroundColor: tokens.colors.primary.main.divider,
                 cursor: "pointer",
                 textAlign: "left",
                 transform: isHovered ? "translateY(-1px)" : "none",
@@ -87,7 +84,7 @@ export function CategoryView({
                   padding: 20,
                   marginBottom: 16,
                   borderRadius: 8,
-                  backgroundColor: srgbToHex(tokens.background.srgb),
+                  backgroundColor: tokens.colors.primary.main.background,
                   minHeight: 60,
                 }}
               >
@@ -100,7 +97,7 @@ export function CategoryView({
                 style={{
                   fontSize: 15,
                   fontWeight: 600,
-                  color: srgbToHex(tokens.textPrimary.srgb),
+                  color: tokens.colors.primary.main.fontPrimary,
                   marginBottom: 4,
                 }}
               >
@@ -109,7 +106,7 @@ export function CategoryView({
               <span
                 style={{
                   fontSize: 13,
-                  color: srgbToHex(tokens.textSecondary.srgb),
+                  color: tokens.colors.primary.main.fontTertiary,
                   lineHeight: 1.4,
                 }}
               >
@@ -118,7 +115,7 @@ export function CategoryView({
               <span
                 style={{
                   fontSize: 12,
-                  color: srgbToHex(tokens.textSecondary.srgb),
+                  color: tokens.colors.primary.main.fontTertiary,
                   marginTop: 8,
                 }}
               >

package/src/preview/ComponentDetailView.tsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
-import { useTokens, useNewtoneTheme, NewtoneProvider } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import { useTokens, useNewtoneTheme, NewtoneProvider, Text } from "@newtonedev/components";
 import { getComponent } from "@newtonedev/components";
 import type { TextRole, BreakpointKey, TextSize, RoleScales } from "@newtonedev/fonts";
 import { ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize } from "@newtonedev/fonts";
@@ -331,26 +330,12 @@ export function ComponentDetailView({
         }}
       >
         <div style={{ padding: "0 32px", marginBottom: 24 }}>
-          <h2
-            style={{
-              fontSize: 22,
-              fontWeight: 700,
-              color: srgbToHex(tokens.textPrimary.srgb),
-              margin: 0,
-              marginBottom: 4,
-            }}
-          >
+          <Text size="lg" weight="bold" style={{ marginBottom: 4 }}>
             {component.name}
-          </h2>
-          <p
-            style={{
-              fontSize: 14,
-              color: srgbToHex(tokens.textSecondary.srgb),
-              margin: 0,
-            }}
-          >
+          </Text>
+          <Text size="sm" color="tertiary">
             {component.description}
-          </p>
+          </Text>
         </div>
         <IconBrowserView
           selectedIconName={(propOverrides.name as string) ?? "add"}
@@ -360,32 +345,17 @@ export function ComponentDetailView({
     );
   }
 
-  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
+  const interactiveColor = tokens.colors.secondary.emphasis.fontPrimary;
   const isTextComponent = componentId === "text";
 
   return (
     <div style={{ padding: 32 }}>
-      <h2
-        style={{
-          fontSize: 22,
-          fontWeight: 700,
-          color: srgbToHex(tokens.textPrimary.srgb),
-          margin: 0,
-          marginBottom: 4,
-        }}
-      >
+      <Text size="lg" weight="bold" style={{ marginBottom: 4 }}>
         {component.name}
-      </h2>
-      <p
-        style={{
-          fontSize: 14,
-          color: srgbToHex(tokens.textSecondary.srgb),
-          margin: 0,
-          marginBottom: isTextComponent ? 16 : 32,
-        }}
-      >
+      </Text>
+      <Text size="sm" color="tertiary" style={{ marginBottom: isTextComponent ? 16 : 32 }}>
         {component.description}
-      </p>
+      </Text>
 
       {isTextComponent && (
         <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 16 }}>
@@ -399,9 +369,9 @@ export function ComponentDetailView({
               padding: "8px 12px",
               fontSize: 14,
               fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
-              color: srgbToHex(tokens.textPrimary.srgb),
-              backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-              border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              color: tokens.colors.primary.main.fontPrimary,
+              backgroundColor: tokens.colors.primary.main.actionEnabled,
+              border: `1px solid ${tokens.colors.primary.main.divider}`,
               borderRadius: 8,
               boxSizing: "border-box",
               outline: "none",
@@ -418,9 +388,9 @@ export function ComponentDetailView({
                     padding: "4px 10px",
                     fontSize: 11,
                     fontWeight: isActive ? 600 : 400,
-                    color: isActive ? interactiveColor : srgbToHex(tokens.textSecondary.srgb),
+                    color: isActive ? interactiveColor : tokens.colors.primary.main.fontTertiary,
                     backgroundColor: isActive ? `${interactiveColor}18` : "transparent",
-                    border: `1px solid ${isActive ? interactiveColor : srgbToHex(tokens.border.srgb)}`,
+                    border: `1px solid ${isActive ? interactiveColor : tokens.colors.primary.main.divider}`,
                     borderRadius: 4,
                     cursor: "pointer",
                     textTransform: "uppercase",
@@ -446,7 +416,7 @@ export function ComponentDetailView({
                 ? interactiveColor
                 : isHovered
                   ? `${interactiveColor}66`
-                  : srgbToHex(tokens.border.srgb);
+                  : tokens.colors.primary.main.divider;
 
               // Weight control for text roles
               const showWeightControl =
@@ -483,7 +453,7 @@ export function ComponentDetailView({
                       onChange={(w) =>
                         onRoleWeightChange(role as TextRole, w)
                       }
-                      textColor={srgbToHex(tokens.textSecondary.srgb)}
+                      textColor={tokens.colors.primary.main.fontTertiary}
                       accentColor={interactiveColor}
                     />
                   );
@@ -504,7 +474,7 @@ export function ComponentDetailView({
                     padding: "12px 16px",
                     borderRadius: 12,
                     border: `2px solid ${borderColor}`,
-                    backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                    backgroundColor: tokens.colors.primary.main.actionEnabled,
                     cursor: "pointer",
                     textAlign: "left",
                     transition: "border-color 150ms ease",
@@ -516,7 +486,7 @@ export function ComponentDetailView({
                       fontWeight: 500,
                       color: isSelected
                         ? interactiveColor
-                        : srgbToHex(tokens.textSecondary.srgb),
+                        : tokens.colors.primary.main.fontTertiary,
                       width: 88,
                       flexShrink: 0,
                       textTransform: "uppercase",
@@ -542,7 +512,7 @@ export function ComponentDetailView({
                           ROLE_DEFAULT_WEIGHTS[role as TextRole] ??
                           400
                         }
-                        textColor={srgbToHex(tokens.textTertiary.srgb)}
+                        textColor={tokens.colors.primary.main.fontTertiary}
                         accentColor={interactiveColor}
                         previewText={previewText}
                       />
@@ -570,7 +540,7 @@ export function ComponentDetailView({
               ? interactiveColor
               : isHovered
                 ? `${interactiveColor}66`
-                : srgbToHex(tokens.border.srgb);
+                : tokens.colors.primary.main.divider;
 
             return (
               <button
@@ -585,7 +555,7 @@ export function ComponentDetailView({
                   padding: 16,
                   borderRadius: 12,
                   border: `2px solid ${borderColor}`,
-                  backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                  backgroundColor: tokens.colors.primary.main.actionEnabled,
                   cursor: "pointer",
                   textAlign: "left",
                   transition: "border-color 150ms ease",
@@ -599,7 +569,7 @@ export function ComponentDetailView({
                     padding: 20,
                     marginBottom: 12,
                     borderRadius: 8,
-                    backgroundColor: srgbToHex(tokens.background.srgb),
+                    backgroundColor: tokens.colors.primary.main.background,
                     minHeight: 56,
                   }}
                 >
@@ -614,7 +584,7 @@ export function ComponentDetailView({
                     fontWeight: isSelected ? 600 : 500,
                     color: isSelected
                       ? interactiveColor
-                      : srgbToHex(tokens.textPrimary.srgb),
+                      : tokens.colors.primary.main.fontPrimary,
                   }}
                 >
                   {variant.label}

package/src/preview/ComponentRenderer.tsx

@@ -13,7 +13,6 @@ import {
   Wrapper,
   useTokens,
 } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 
 interface ComponentRendererProps {
   readonly componentId: string;
@@ -57,7 +56,7 @@ function CardPreview(props: AnyProps) {
         style={{
           fontSize: 14,
           fontWeight: 600,
-          color: srgbToHex(tokens.textPrimary.srgb),
+          color: tokens.colors.primary.main.fontPrimary,
           marginBottom: 8,
         }}
       >
@@ -66,7 +65,7 @@ function CardPreview(props: AnyProps) {
       <div
         style={{
           fontSize: 13,
-          color: srgbToHex(tokens.textSecondary.srgb),
+          color: tokens.colors.primary.main.fontTertiary,
           lineHeight: 1.4,
         }}
       >
@@ -103,7 +102,6 @@ export function ComponentRenderer({ componentId, props, previewText }: Component
       return (
         <Button
           variant={props.variant as AnyProps}
-          semantic={props.semantic as AnyProps}
           size={props.size as AnyProps}
           icon={icon}
           iconPosition={props.iconPosition as AnyProps}

package/src/preview/IconBrowserView.tsx

@@ -1,6 +1,5 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { Icon, useTokens, ICON_CATALOG } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 
 interface IconBrowserViewProps {
   readonly selectedIconName: string;
@@ -38,7 +37,7 @@ export function IconBrowserView({
     }
   }, [selectedIconName]);
 
-  const accentColor = srgbToHex(tokens.accent.fill.srgb);
+  const accentColor = tokens.colors.secondary.emphasis.fontPrimary;
 
   return (
     <div
@@ -55,7 +54,7 @@ export function IconBrowserView({
           <Icon
             name="search"
             size={18}
-            color={srgbToHex(tokens.textTertiary.srgb)}
+            color={tokens.colors.primary.main.fontDisabled}
             style={{
               position: "absolute",
               left: 10,
@@ -72,9 +71,9 @@ export function IconBrowserView({
               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),
+              border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
+              backgroundColor: tokens.colors.primary.main.divider,
+              color: tokens.colors.primary.main.fontPrimary,
               fontSize: 13,
               boxSizing: "border-box",
               outline: "none",
@@ -96,7 +95,7 @@ export function IconBrowserView({
           <p
             style={{
               fontSize: 13,
-              color: srgbToHex(tokens.textTertiary.srgb),
+              color: tokens.colors.primary.main.fontDisabled,
               textAlign: "center",
               marginTop: 32,
             }}
@@ -111,7 +110,7 @@ export function IconBrowserView({
               style={{
                 fontSize: 12,
                 fontWeight: 600,
-                color: srgbToHex(tokens.textSecondary.srgb),
+                color: tokens.colors.primary.main.fontTertiary,
                 textTransform: "uppercase",
                 letterSpacing: 0.5,
                 margin: "0 0 8px",
@@ -153,7 +152,7 @@ export function IconBrowserView({
                       borderRadius: 8,
                       border: `2px solid ${borderColor}`,
                       backgroundColor: isSelected
-                        ? srgbToHex(tokens.backgroundElevated.srgb)
+                        ? tokens.colors.primary.main.divider
                         : "transparent",
                       cursor: "pointer",
                       transition: "border-color 150ms ease",
@@ -165,7 +164,7 @@ export function IconBrowserView({
                         fontSize: 10,
                         color: isSelected
                           ? accentColor
-                          : srgbToHex(tokens.textTertiary.srgb),
+                          : tokens.colors.primary.main.fontDisabled,
                         fontWeight: isSelected ? 600 : 400,
                         maxWidth: "100%",
                         overflow: "hidden",