@newtonedev/editor 0.1.11 → 0.2.0

package/src/preview/OverviewView.tsx

@@ -1,5 +1,4 @@
 import { useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
 import { CATEGORIES, getComponentsByCategory } from "@newtonedev/components";
 import { ComponentRenderer } from "./ComponentRenderer";
 import { useHover } from "../hooks/useHover";
@@ -21,7 +20,7 @@ export function OverviewView({
         style={{
           fontSize: 22,
           fontWeight: 700,
-          color: srgbToHex(tokens.textPrimary.srgb),
+          color: tokens.colors.primary.main.fontPrimary,
           margin: 0,
           marginBottom: 4,
         }}
@@ -31,7 +30,7 @@ export function OverviewView({
       <p
         style={{
           fontSize: 14,
-          color: srgbToHex(tokens.textSecondary.srgb),
+          color: tokens.colors.primary.main.fontTertiary,
           margin: 0,
           marginBottom: 32,
         }}
@@ -61,7 +60,7 @@ export function OverviewView({
                 style={{
                   fontSize: 16,
                   fontWeight: 600,
-                  color: srgbToHex(tokens.textPrimary.srgb),
+                  color: tokens.colors.primary.main.fontPrimary,
                 }}
               >
                 {category.name}
@@ -69,7 +68,7 @@ export function OverviewView({
               <span
                 style={{
                   fontSize: 13,
-                  color: srgbToHex(tokens.textSecondary.srgb),
+                  color: tokens.colors.primary.main.fontTertiary,
                   marginLeft: 8,
                 }}
               >
@@ -127,10 +126,8 @@ function ComponentCard({
         flexDirection: "column",
         padding: 20,
         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",
@@ -147,7 +144,7 @@ function ComponentCard({
           padding: 16,
           marginBottom: 16,
           borderRadius: 8,
-          backgroundColor: srgbToHex(tokens.background.srgb),
+          backgroundColor: tokens.colors.primary.main.background,
           minHeight: 60,
         }}
       >
@@ -157,7 +154,7 @@ function ComponentCard({
         style={{
           fontSize: 14,
           fontWeight: 600,
-          color: srgbToHex(tokens.textPrimary.srgb),
+          color: tokens.colors.primary.main.fontPrimary,
           marginBottom: 4,
         }}
       >
@@ -166,7 +163,7 @@ function ComponentCard({
       <span
         style={{
           fontSize: 12,
-          color: srgbToHex(tokens.textSecondary.srgb),
+          color: tokens.colors.primary.main.fontTertiary,
           lineHeight: 1.4,
         }}
       >

package/src/preview/PaletteScaleView.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { srgbToHex } from "newtone";
+import type { ColorResult } from "newtone";
+import { oklchToP3 } from "@newtonedev/colors";
+import { useNewtoneTheme } from "@newtonedev/components";
+import type { ConfiguratorState } from "../configurator/types";
+
+interface PaletteScaleViewProps {
+  readonly state: ConfiguratorState;
+  readonly previewColors: readonly (readonly ColorResult[])[];
+  readonly useP3: boolean;
+  readonly onUseP3Change: (useP3: boolean) => void;
+}
+
+function colorToCss(color: ColorResult, useP3: boolean): string {
+  if (!useP3) return srgbToHex(color.srgb);
+  const p3 = oklchToP3(color.oklch);
+  const r = Math.max(0, Math.min(1, p3.r));
+  const g = Math.max(0, Math.min(1, p3.g));
+  const b = Math.max(0, Math.min(1, p3.b));
+  return `color(display-p3 ${r.toFixed(5)} ${g.toFixed(5)} ${b.toFixed(5)})`;
+}
+
+export function PaletteScaleView({ state, previewColors, useP3, onUseP3Change }: PaletteScaleViewProps) {
+  const { gamut } = useNewtoneTheme();
+  const deviceSupportsP3 = gamut === "p3";
+  const primary = previewColors[0];
+  const lightBg = primary ? colorToCss(primary[0], useP3) : "#ffffff";
+  const darkBg = primary ? colorToCss(primary[primary.length - 1], useP3) : "#000000";
+
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        background: `linear-gradient(to right, ${lightBg} 50%, ${darkBg} 50%)`,
+        padding: 48,
+      }}
+    >
+      {/* sRGB/P3 Gamut Toggle */}
+      <div
+        style={{
+          position: "absolute",
+          top: 12,
+          right: 12,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          zIndex: 1,
+        }}
+      >
+        {!deviceSupportsP3 && (
+          <span
+            style={{
+              fontSize: 11,
+              color: "rgba(255,255,255,0.6)",
+              whiteSpace: "nowrap",
+            }}
+          >
+            P3 not available on this display
+          </span>
+        )}
+        <button
+          onClick={deviceSupportsP3 ? () => onUseP3Change(!useP3) : undefined}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          aria-label={
+            !deviceSupportsP3
+              ? "Display P3 not supported on this display"
+              : useP3
+                ? "Switch to sRGB"
+                : "Switch to Display P3"
+          }
+          aria-disabled={!deviceSupportsP3}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: "4px 10px",
+            borderRadius: 6,
+            border: "1px solid rgba(255,255,255,0.3)",
+            background: hovered && deviceSupportsP3 ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.3)",
+            cursor: deviceSupportsP3 ? "pointer" : "default",
+            fontSize: 12,
+            fontWeight: 500,
+            color: deviceSupportsP3 ? "#fff" : "rgba(255,255,255,0.4)",
+            transition: "background-color 150ms ease",
+            opacity: deviceSupportsP3 ? 1 : 0.7,
+          }}
+        >
+          {deviceSupportsP3 ? (useP3 ? "P3" : "sRGB") : "sRGB"}
+        </button>
+      </div>
+
+      {state.palettes.map((_palette, index) => {
+        const scale = previewColors[index];
+        if (!scale || scale.length === 0) return null;
+
+        const trimmed = scale.slice(1, -1);
+        if (trimmed.length === 0) return null;
+
+        return (
+          <div key={index} style={{ display: "flex", flex: 1 }}>
+            {trimmed.map((color, i) => (
+              <div
+                key={i}
+                title={srgbToHex(color.srgb)}
+                style={{
+                  flex: 1,
+                  backgroundColor: colorToCss(color, useP3),
+                }}
+              />
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/types.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";
@@ -47,11 +47,12 @@ export interface EditorPersistence {
     readonly presets: readonly Preset[];
   }) => 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<{ error?: unknown }>;
@@ -60,7 +61,7 @@ export interface EditorPersistence {
   readonly persistPresets: (params: {
     readonly presets: readonly Preset[];
     readonly activePresetId: string;
-    readonly publishedPresetId: string | null;
+    readonly defaultVariantId: string | null;
   }) => Promise<void>;
 }