@newtonedev/editor 0.1.1

package/src/preview/CategoryView.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import { getCategory, getComponentsByCategory } from "@newtonedev/components";
+import { ComponentRenderer } from "./ComponentRenderer";
+
+interface CategoryViewProps {
+  readonly categoryId: string;
+  readonly onNavigateToComponent: (componentId: string) => void;
+}
+
+export function CategoryView({
+  categoryId,
+  onNavigateToComponent,
+}: CategoryViewProps) {
+  const tokens = useTokens();
+  const category = getCategory(categoryId);
+  const components = getComponentsByCategory(categoryId);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  if (!category) return null;
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h2
+        style={{
+          fontSize: 22,
+          fontWeight: 700,
+          color: srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4,
+        }}
+      >
+        {category.name}
+      </h2>
+      <p
+        style={{
+          fontSize: 14,
+          color: srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32,
+        }}
+      >
+        {category.description}
+      </p>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+          gap: 20,
+        }}
+      >
+        {components.map((component) => {
+          const isHovered = hoveredId === component.id;
+
+          return (
+            <button
+              key={component.id}
+              onClick={() => onNavigateToComponent(component.id)}
+              onMouseEnter={() => setHoveredId(component.id)}
+              onMouseLeave={() => setHoveredId(null)}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                padding: 24,
+                borderRadius: 12,
+                border: `1px solid ${srgbToHex(
+                  isHovered ? tokens.interactive.srgb : tokens.border.srgb,
+                )}`,
+                backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                cursor: "pointer",
+                textAlign: "left",
+                transform: isHovered ? "translateY(-1px)" : "none",
+                boxShadow: isHovered
+                  ? "0 2px 8px rgba(0,0,0,0.08)"
+                  : "none",
+                transition:
+                  "border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 20,
+                  marginBottom: 16,
+                  borderRadius: 8,
+                  backgroundColor: srgbToHex(tokens.background.srgb),
+                  minHeight: 60,
+                }}
+              >
+                <ComponentRenderer
+                  componentId={component.id}
+                  props={component.variants[0]?.props ?? {}}
+                />
+              </div>
+              <span
+                style={{
+                  fontSize: 15,
+                  fontWeight: 600,
+                  color: srgbToHex(tokens.textPrimary.srgb),
+                  marginBottom: 4,
+                }}
+              >
+                {component.name}
+              </span>
+              <span
+                style={{
+                  fontSize: 13,
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  lineHeight: 1.4,
+                }}
+              >
+                {component.description}
+              </span>
+              <span
+                style={{
+                  fontSize: 12,
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  marginTop: 8,
+                }}
+              >
+                {component.variants.length} variant
+                {component.variants.length !== 1 ? "s" : ""}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/preview/ComponentDetailView.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import { getComponent } from "@newtonedev/components";
+import { ComponentRenderer } from "./ComponentRenderer";
+
+interface ComponentDetailViewProps {
+  readonly componentId: string;
+  readonly selectedVariantId: string | null;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onSelectVariant: (variantId: string) => void;
+}
+
+export function ComponentDetailView({
+  componentId,
+  selectedVariantId,
+  propOverrides,
+  onSelectVariant,
+}: ComponentDetailViewProps) {
+  const tokens = useTokens();
+  const component = getComponent(componentId);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  if (!component) return null;
+
+  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h2
+        style={{
+          fontSize: 22,
+          fontWeight: 700,
+          color: srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4,
+        }}
+      >
+        {component.name}
+      </h2>
+      <p
+        style={{
+          fontSize: 14,
+          color: srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32,
+        }}
+      >
+        {component.description}
+      </p>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: 16,
+        }}
+      >
+        {component.variants.map((variant) => {
+          const isSelected = selectedVariantId === variant.id;
+          const isHovered = hoveredId === variant.id;
+
+          const borderColor = isSelected
+            ? interactiveColor
+            : isHovered
+              ? `${interactiveColor}66`
+              : srgbToHex(tokens.border.srgb);
+
+          return (
+            <button
+              key={variant.id}
+              onClick={() => onSelectVariant(variant.id)}
+              onMouseEnter={() => setHoveredId(variant.id)}
+              onMouseLeave={() => setHoveredId(null)}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "stretch",
+                padding: 16,
+                borderRadius: 12,
+                border: `2px solid ${borderColor}`,
+                backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+                cursor: "pointer",
+                textAlign: "left",
+                transition: "border-color 150ms ease",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 20,
+                  marginBottom: 12,
+                  borderRadius: 8,
+                  backgroundColor: srgbToHex(tokens.background.srgb),
+                  minHeight: 56,
+                }}
+              >
+                <ComponentRenderer
+                  componentId={componentId}
+                  props={
+                    isSelected && propOverrides
+                      ? { ...variant.props, ...propOverrides }
+                      : variant.props
+                  }
+                />
+              </div>
+              <span
+                style={{
+                  fontSize: 13,
+                  fontWeight: isSelected ? 600 : 500,
+                  color: isSelected
+                    ? interactiveColor
+                    : srgbToHex(tokens.textPrimary.srgb),
+                }}
+              >
+                {variant.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/preview/ComponentRenderer.tsx

@@ -0,0 +1,107 @@
+import { useState, useCallback } from "react";
+import {
+  Button,
+  Card,
+  TextInput,
+  Select,
+  Toggle,
+  Slider,
+  HueSlider,
+  useTokens,
+} from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface ComponentRendererProps {
+  readonly componentId: string;
+  readonly props: Record<string, unknown>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyProps = any;
+
+function StatefulToggle(props: AnyProps) {
+  const [value, setValue] = useState(props.value as boolean);
+  return <Toggle {...props} value={value} onValueChange={setValue} />;
+}
+
+function StatefulSlider(props: AnyProps) {
+  const [value, setValue] = useState(props.value as number);
+  return <Slider {...props} value={value} onValueChange={setValue} />;
+}
+
+function StatefulHueSlider(props: AnyProps) {
+  const [value, setValue] = useState(props.value as number);
+  return <HueSlider {...props} value={value} onValueChange={setValue} />;
+}
+
+function StatefulTextInput(props: AnyProps) {
+  const [value, setValue] = useState((props.value as string) ?? "");
+  return <TextInput {...props} value={value} onChangeText={setValue} />;
+}
+
+function StatefulSelect(props: AnyProps) {
+  const [value, setValue] = useState(props.value as string);
+  return <Select {...props} value={value} onValueChange={setValue} />;
+}
+
+function CardPreview(props: AnyProps) {
+  const tokens = useTokens();
+  return (
+    <Card {...props} style={{ padding: 20, minWidth: 200 }}>
+      <div
+        style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: srgbToHex(tokens.textPrimary.srgb),
+          marginBottom: 8,
+        }}
+      >
+        Card Title
+      </div>
+      <div
+        style={{
+          fontSize: 13,
+          color: srgbToHex(tokens.textSecondary.srgb),
+          lineHeight: 1.4,
+        }}
+      >
+        Sample card content at elevation {String(props.elevation ?? 0)}.
+      </div>
+    </Card>
+  );
+}
+
+export function ComponentRenderer({ componentId, props }: ComponentRendererProps) {
+  const noop = useCallback(() => {}, []);
+
+  switch (componentId) {
+    case "button": {
+      const icon = (props.icon as string) || undefined;
+      return (
+        <Button
+          variant={props.variant as AnyProps}
+          size={props.size as AnyProps}
+          icon={icon}
+          iconPosition={props.iconPosition as AnyProps}
+          onPress={noop}
+        >
+          Button
+        </Button>
+      );
+    }
+    case "text-input":
+      return <StatefulTextInput {...props} />;
+    case "select":
+      return <StatefulSelect {...props} />;
+    case "toggle":
+      return <StatefulToggle {...props} />;
+    case "slider":
+      return <StatefulSlider {...props} />;
+    case "hue-slider":
+      return <StatefulHueSlider {...props} />;
+    case "card":
+      return <CardPreview {...props} />;
+    default:
+      return null;
+  }
+}

package/src/preview/OverviewView.tsx

@@ -0,0 +1,177 @@
+import { useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import { CATEGORIES, getComponentsByCategory } from "@newtonedev/components";
+import { ComponentRenderer } from "./ComponentRenderer";
+import { useHover } from "../hooks/useHover";
+
+interface OverviewViewProps {
+  readonly onNavigateToCategory: (categoryId: string) => void;
+  readonly onNavigateToComponent: (componentId: string) => void;
+}
+
+export function OverviewView({
+  onNavigateToCategory,
+  onNavigateToComponent,
+}: OverviewViewProps) {
+  const tokens = useTokens();
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h2
+        style={{
+          fontSize: 22,
+          fontWeight: 700,
+          color: srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4,
+        }}
+      >
+        Component Library
+      </h2>
+      <p
+        style={{
+          fontSize: 14,
+          color: srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32,
+        }}
+      >
+        Browse components to see how your color system affects them.
+      </p>
+
+      {CATEGORIES.map((category) => {
+        const components = getComponentsByCategory(category.id);
+        if (components.length === 0) return null;
+
+        return (
+          <div key={category.id} style={{ marginBottom: 32 }}>
+            <button
+              onClick={() => onNavigateToCategory(category.id)}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 0,
+                margin: 0,
+                marginBottom: 16,
+                display: "block",
+              }}
+            >
+              <span
+                style={{
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: srgbToHex(tokens.textPrimary.srgb),
+                }}
+              >
+                {category.name}
+              </span>
+              <span
+                style={{
+                  fontSize: 13,
+                  color: srgbToHex(tokens.textSecondary.srgb),
+                  marginLeft: 8,
+                }}
+              >
+                {category.description}
+              </span>
+            </button>
+
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+                gap: 16,
+              }}
+            >
+              {components.map((component) => (
+                <ComponentCard
+                  key={component.id}
+                  componentId={component.id}
+                  name={component.name}
+                  description={component.description}
+                  defaultVariantProps={component.variants[0]?.props ?? {}}
+                  onClick={() => onNavigateToComponent(component.id)}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ComponentCard({
+  componentId,
+  name,
+  description,
+  defaultVariantProps,
+  onClick,
+}: {
+  readonly componentId: string;
+  readonly name: string;
+  readonly description: string;
+  readonly defaultVariantProps: Record<string, unknown>;
+  readonly onClick: () => void;
+}) {
+  const tokens = useTokens();
+  const { isHovered, hoverProps } = useHover();
+
+  return (
+    <button
+      onClick={onClick}
+      {...hoverProps}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 20,
+        borderRadius: 12,
+        border: `1px solid ${srgbToHex(
+          isHovered ? tokens.interactive.srgb : tokens.border.srgb,
+        )}`,
+        backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+        cursor: "pointer",
+        textAlign: "left",
+        transform: isHovered ? "translateY(-1px)" : "none",
+        boxShadow: isHovered ? "0 2px 8px rgba(0,0,0,0.08)" : "none",
+        transition:
+          "border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+          marginBottom: 16,
+          borderRadius: 8,
+          backgroundColor: srgbToHex(tokens.background.srgb),
+          minHeight: 60,
+        }}
+      >
+        <ComponentRenderer componentId={componentId} props={defaultVariantProps} />
+      </div>
+      <span
+        style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: srgbToHex(tokens.textPrimary.srgb),
+          marginBottom: 4,
+        }}
+      >
+        {name}
+      </span>
+      <span
+        style={{
+          fontSize: 12,
+          color: srgbToHex(tokens.textSecondary.srgb),
+          lineHeight: 1.4,
+        }}
+      >
+        {description}
+      </span>
+    </button>
+  );
+}

package/src/types.ts

@@ -0,0 +1,77 @@
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { NewtoneThemeConfig } from "@newtonedev/components";
+import type { ReactNode } from "react";
+
+// --- Data types ---
+
+export interface Preset {
+  readonly id: string;
+  readonly name: string;
+  readonly draft_state: ConfiguratorState;
+  readonly published_state: ConfiguratorState | null;
+}
+
+// --- UI state types ---
+
+export type SaveStatus = "saved" | "saving" | "unsaved" | "error";
+
+export type ThemeName = "neutral" | "primary" | "secondary" | "strong";
+
+export type PreviewView =
+  | { readonly kind: "overview" }
+  | { readonly kind: "category"; readonly categoryId: string }
+  | { readonly kind: "component"; readonly componentId: string };
+
+export type SidebarSelection =
+  | null
+  | { readonly scope: "component"; readonly componentId: string }
+  | {
+      readonly scope: "variant";
+      readonly componentId: string;
+      readonly variantId: string;
+    };
+
+// --- Persistence interface ---
+
+export interface EditorPersistence {
+  /** Save draft state. Called on 2s debounce. */
+  readonly onSaveDraft: (params: {
+    readonly state: ConfiguratorState;
+    readonly presets: readonly Preset[];
+  }) => Promise<{ error?: unknown }>;
+
+  /** Publish the active preset. */
+  readonly onPublish: (params: {
+    readonly state: ConfiguratorState;
+    readonly presets: readonly Preset[];
+    readonly activePresetId: string;
+  }) => Promise<{ error?: unknown }>;
+
+  /** Persist preset metadata (used by preset CRUD operations). */
+  readonly persistPresets: (params: {
+    readonly presets: readonly Preset[];
+    readonly activePresetId: string;
+    readonly publishedPresetId: string | null;
+  }) => Promise<void>;
+}
+
+// --- Editor component props ---
+
+export interface EditorHeaderSlots {
+  readonly left?: ReactNode;
+  readonly right?: ReactNode;
+}
+
+export interface EditorProps {
+  readonly initialState: ConfiguratorState;
+  readonly initialIsPublished: boolean;
+  readonly initialPresets: readonly Preset[];
+  readonly initialActivePresetId: string;
+  readonly initialPublishedPresetId: string | null;
+  readonly defaultState: ConfiguratorState;
+  readonly chromeThemeConfig: NewtoneThemeConfig;
+  readonly persistence: EditorPersistence;
+  readonly headerSlots?: EditorHeaderSlots;
+  readonly onNavigate?: (view: PreviewView) => void;
+  readonly initialPreviewView?: PreviewView;
+}

package/src/utils/presets.ts

@@ -0,0 +1,24 @@
+import type { Preset } from "../types";
+
+export function findPreset(
+  presets: readonly Preset[],
+  presetId: string,
+): Preset | undefined {
+  return presets.find((p) => p.id === presetId);
+}
+
+export function updatePresetInArray(
+  presets: readonly Preset[],
+  presetId: string,
+  updater: (preset: Preset) => Preset,
+): readonly Preset[] {
+  return presets.map((p) => (p.id === presetId ? updater(p) : p));
+}
+
+export function presetHasUnpublishedChanges(preset: Preset): boolean {
+  if (preset.published_state === null) return true;
+  return (
+    JSON.stringify(preset.draft_state) !==
+    JSON.stringify(preset.published_state)
+  );
+}