@newtonedev/editor 0.1.1

package/src/components/sections/DynamicRangeSection.tsx

@@ -0,0 +1,399 @@
+import { useState, useRef, useCallback } from "react";
+import { HueSlider, Select, useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { HueGradingStrength } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+
+const STRENGTH_OPTIONS = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" },
+];
+
+// --- Dual Range Slider ---
+
+const TRACK_HEIGHT = 8;
+const THUMB_SIZE = 18;
+const ZONE_FRAC = 1 / 3;
+
+function clamp(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+// --- Display ↔ Internal conversions ---
+// Both lightest and darkest are 0–1 slider positions.
+// The engine maps these to OKLCH L via resolveLightest/resolveDarkest.
+// Display: 0–10 integer scale, linearly mapped to 0.0–1.0.
+
+function internalToDisplay(internal: number): number {
+  return clamp(Math.round(internal * 10), 0, 10);
+}
+
+function displayToInternal(display: number): number {
+  return clamp(display, 0, 10) / 10;
+}
+
+// --- Position ↔ Display conversions ---
+// Left zone: pos 0 = display 10, pos ZONE_FRAC = display 0
+// Right zone: pos (1-ZONE_FRAC) = display 0, pos 1 = display 10
+
+function posToWhitesDisplay(pos: number): number {
+  const ratio = clamp(pos / ZONE_FRAC, 0, 1);
+  return Math.round(10 * (1 - ratio));
+}
+
+function posToBlacksDisplay(pos: number): number {
+  const ratio = clamp((pos - (1 - ZONE_FRAC)) / ZONE_FRAC, 0, 1);
+  return Math.round(ratio * 10);
+}
+
+function whitesDisplayToPos(display: number): number {
+  return ((10 - display) / 10) * ZONE_FRAC;
+}
+
+function blacksDisplayToPos(display: number): number {
+  return 1 - ZONE_FRAC + (display / 10) * ZONE_FRAC;
+}
+
+interface DualRangeSliderProps {
+  readonly whitesValue: number; // internal 0–1
+  readonly blacksValue: number; // internal 0–1
+  readonly onWhitesChange: (v: number) => void;
+  readonly onBlacksChange: (v: number) => void;
+}
+
+function DualRangeSlider({
+  whitesValue,
+  blacksValue,
+  onWhitesChange,
+  onBlacksChange,
+}: DualRangeSliderProps) {
+  const tokens = useTokens();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [activeThumb, setActiveThumb] = useState<
+    "whites" | "blacks" | null
+  >(null);
+
+  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  const wDisplay = internalToDisplay(whitesValue);
+  const bDisplay = internalToDisplay(blacksValue);
+  const wPos = whitesDisplayToPos(wDisplay);
+  const bPos = blacksDisplayToPos(bDisplay);
+
+  const getPosRatio = useCallback((clientX: number): number => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    return clamp((clientX - rect.left) / rect.width, 0, 1);
+  }, []);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const pos = getPosRatio(e.clientX);
+
+      if (pos <= ZONE_FRAC) {
+        setActiveThumb("whites");
+        onWhitesChange(displayToInternal(posToWhitesDisplay(pos)));
+      } else if (pos >= 1 - ZONE_FRAC) {
+        setActiveThumb("blacks");
+        onBlacksChange(displayToInternal(posToBlacksDisplay(pos)));
+      } else {
+        return; // dead zone
+      }
+
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [getPosRatio, onWhitesChange, onBlacksChange],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!activeThumb) return;
+      const pos = getPosRatio(e.clientX);
+
+      if (activeThumb === "whites") {
+        onWhitesChange(displayToInternal(posToWhitesDisplay(pos)));
+      } else {
+        onBlacksChange(displayToInternal(posToBlacksDisplay(pos)));
+      }
+    },
+    [activeThumb, getPosRatio, onWhitesChange, onBlacksChange],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setActiveThumb(null);
+  }, []);
+
+  const trackTop = (THUMB_SIZE - TRACK_HEIGHT) / 2;
+
+  return (
+    <div style={{ padding: `0 ${THUMB_SIZE / 2}px` }}>
+      <div
+        ref={trackRef}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        style={{
+          position: "relative",
+          height: THUMB_SIZE,
+          cursor: activeThumb ? "grabbing" : "pointer",
+          touchAction: "none",
+          userSelect: "none",
+        }}
+      >
+        {/* Gradient track */}
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: trackTop,
+            height: TRACK_HEIGHT,
+            borderRadius: TRACK_HEIGHT / 2,
+            background: "linear-gradient(to right, white, black)",
+            border: `1px solid ${borderColor}`,
+            boxSizing: "border-box",
+          }}
+        />
+
+        {/* Accent fill between thumbs */}
+        <div
+          style={{
+            position: "absolute",
+            left: `${wPos * 100}%`,
+            width: `${(bPos - wPos) * 100}%`,
+            top: trackTop,
+            height: TRACK_HEIGHT,
+            backgroundColor: interactiveColor,
+          }}
+        />
+
+        {/* Whites thumb (left) */}
+        <div
+          style={{
+            position: "absolute",
+            left: `calc(${wPos * 100}% - ${THUMB_SIZE / 2}px)`,
+            top: 0,
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            borderRadius: THUMB_SIZE / 2,
+            backgroundColor: interactiveColor,
+            pointerEvents: "none",
+            zIndex: activeThumb === "whites" ? 2 : 1,
+          }}
+        />
+
+        {/* Blacks thumb (right) */}
+        <div
+          style={{
+            position: "absolute",
+            left: `calc(${bPos * 100}% - ${THUMB_SIZE / 2}px)`,
+            top: 0,
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            borderRadius: THUMB_SIZE / 2,
+            backgroundColor: interactiveColor,
+            pointerEvents: "none",
+            zIndex: activeThumb === "blacks" ? 2 : 1,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// --- Numeric Input ---
+
+interface RangeInputProps {
+  readonly display: number; // 0–10 integer
+  readonly onCommit: (internal: number) => void;
+  readonly toInternal: (display: number) => number;
+}
+
+function RangeInput({ display, onCommit, toInternal }: RangeInputProps) {
+  const tokens = useTokens();
+  const [text, setText] = useState(String(display));
+  const [isEditing, setIsEditing] = useState(false);
+
+  const displayText = isEditing ? text : String(display);
+
+  const commit = () => {
+    setIsEditing(false);
+    const parsed = parseInt(text, 10);
+    if (isNaN(parsed)) {
+      setText(String(display));
+      return;
+    }
+    const clamped = clamp(Math.round(parsed), 0, 10);
+    onCommit(toInternal(clamped));
+    setText(String(clamped));
+  };
+
+  return (
+    <input
+      type="text"
+      inputMode="numeric"
+      value={displayText}
+      onChange={(e) => {
+        setIsEditing(true);
+        setText(e.target.value);
+      }}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") commit();
+      }}
+      style={{
+        width: 40,
+        padding: "2px 6px",
+        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 4,
+        backgroundColor: "transparent",
+        color: srgbToHex(tokens.textPrimary.srgb),
+        fontFamily: "inherit",
+        fontSize: 12,
+        fontWeight: 500,
+        textAlign: "center",
+        outline: "none",
+      }}
+    />
+  );
+}
+
+// --- Section ---
+
+interface DynamicRangeSectionProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+}
+
+export function DynamicRangeSection({
+  state,
+  dispatch,
+}: DynamicRangeSectionProps) {
+  const tokens = useTokens();
+  const labelColor = srgbToHex(tokens.textSecondary.srgb);
+
+  const labelStyle = {
+    fontSize: 11,
+    fontWeight: 600 as const,
+    color: labelColor,
+    textTransform: "uppercase" as const,
+    letterSpacing: 0.5,
+  };
+
+  const wDisplay = internalToDisplay(state.dynamicRange.lightest);
+  const bDisplay = internalToDisplay(state.dynamicRange.darkest);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      {/* Labels above slider */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={labelStyle}>Whites</span>
+        <span style={labelStyle}>Blacks</span>
+      </div>
+
+      {/* Dual range slider */}
+      <DualRangeSlider
+        whitesValue={state.dynamicRange.lightest}
+        blacksValue={state.dynamicRange.darkest}
+        onWhitesChange={(v) => dispatch({ type: "SET_LIGHTEST", value: v })}
+        onBlacksChange={(v) => dispatch({ type: "SET_DARKEST", value: v })}
+      />
+
+      {/* Numeric inputs below slider */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <RangeInput
+          display={wDisplay}
+          onCommit={(v) => dispatch({ type: "SET_LIGHTEST", value: v })}
+          toInternal={displayToInternal}
+        />
+        <RangeInput
+          display={bDisplay}
+          onCommit={(v) => dispatch({ type: "SET_DARKEST", value: v })}
+          toInternal={displayToInternal}
+        />
+      </div>
+
+      {/* Global Hue Grading — Light End */}
+      <div style={{ ...labelStyle, marginTop: 4 }}>
+        Global Hue Grading — Light
+      </div>
+      <div style={{ display: "flex", gap: 12 }}>
+        <div style={{ flex: 1 }}>
+          <Select
+            options={STRENGTH_OPTIONS}
+            value={state.globalHueGrading.light.strength}
+            onValueChange={(s) =>
+              dispatch({
+                type: "SET_GLOBAL_GRADE_LIGHT_STRENGTH",
+                strength: s as HueGradingStrength,
+              })
+            }
+            label="Strength"
+          />
+        </div>
+        {state.globalHueGrading.light.strength !== "none" && (
+          <div style={{ flex: 1 }}>
+            <HueSlider
+              value={state.globalHueGrading.light.hue}
+              onValueChange={(hue) =>
+                dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_HUE", hue })
+              }
+              label="Target Hue"
+              showValue
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Global Hue Grading — Dark End */}
+      <div style={{ ...labelStyle, marginTop: 4 }}>
+        Global Hue Grading — Dark
+      </div>
+      <div style={{ display: "flex", gap: 12 }}>
+        <div style={{ flex: 1 }}>
+          <Select
+            options={STRENGTH_OPTIONS}
+            value={state.globalHueGrading.dark.strength}
+            onValueChange={(s) =>
+              dispatch({
+                type: "SET_GLOBAL_GRADE_DARK_STRENGTH",
+                strength: s as HueGradingStrength,
+              })
+            }
+            label="Strength"
+          />
+        </div>
+        {state.globalHueGrading.dark.strength !== "none" && (
+          <div style={{ flex: 1 }}>
+            <HueSlider
+              value={state.globalHueGrading.dark.hue}
+              onValueChange={(hue) =>
+                dispatch({ type: "SET_GLOBAL_GRADE_DARK_HUE", hue })
+              }
+              label="Target Hue"
+              showValue
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/sections/FontsSection.tsx

@@ -0,0 +1,132 @@
+import { Slider, useTokens } from "@newtonedev/components";
+import type { FontConfig } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+import { FontPicker } from "../FontPicker";
+
+const DEFAULT_FONT_DEFAULT: FontConfig = {
+  type: "system",
+  family: "system-ui",
+  fallback:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+};
+
+const DEFAULT_FONT_DISPLAY: FontConfig = {
+  type: "system",
+  family: "system-ui",
+  fallback:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+};
+
+const DEFAULT_FONT_MONO: FontConfig = {
+  type: "system",
+  family: "ui-monospace",
+  fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+};
+
+interface FontsSectionProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+}
+
+export function FontsSection({ state, dispatch }: FontsSectionProps) {
+  const tokens = useTokens();
+
+  const baseSize = state.typography?.scale.baseSize ?? 16;
+  const ratio = state.typography?.scale.ratio ?? 1.25;
+
+  const labelColor = srgbToHex(tokens.textSecondary.srgb);
+
+  const handleFontChange = (
+    slot: "default" | "display" | "mono",
+    font: FontConfig,
+  ) => {
+    const actionType = {
+      default: "SET_FONT_DEFAULT",
+      display: "SET_FONT_DISPLAY",
+      mono: "SET_FONT_MONO",
+    }[slot] as "SET_FONT_DEFAULT" | "SET_FONT_DISPLAY" | "SET_FONT_MONO";
+    dispatch({ type: actionType, font });
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div>
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            color: labelColor,
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8,
+          }}
+        >
+          Scale
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <Slider
+            value={baseSize}
+            onValueChange={(v) =>
+              dispatch({ type: "SET_TYPOGRAPHY_BASE_SIZE", baseSize: v })
+            }
+            min={12}
+            max={24}
+            step={1}
+            label="Base Size"
+            showValue
+          />
+          <Slider
+            value={Math.round(ratio * 100)}
+            onValueChange={(v) =>
+              dispatch({ type: "SET_TYPOGRAPHY_RATIO", ratio: v / 100 })
+            }
+            min={110}
+            max={150}
+            step={5}
+            label="Scale Ratio"
+            showValue
+          />
+        </div>
+      </div>
+
+      <div>
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            color: labelColor,
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8,
+          }}
+        >
+          Fonts
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <FontPicker
+            label="Default"
+            slot="default"
+            currentFont={state.typography?.fonts.default ?? DEFAULT_FONT_DEFAULT}
+            onSelect={(font) => handleFontChange("default", font)}
+          />
+          <FontPicker
+            label="Display"
+            slot="display"
+            currentFont={
+              state.typography?.fonts.display ?? DEFAULT_FONT_DISPLAY
+            }
+            onSelect={(font) => handleFontChange("display", font)}
+          />
+          <FontPicker
+            label="Mono"
+            slot="mono"
+            currentFont={state.typography?.fonts.mono ?? DEFAULT_FONT_MONO}
+            onSelect={(font) => handleFontChange("mono", font)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/sections/IconsSection.tsx

@@ -0,0 +1,66 @@
+import { Select } from "@newtonedev/components";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+
+const ICON_VARIANT_OPTIONS = [
+  { label: "Outlined", value: "outlined" },
+  { label: "Rounded", value: "rounded" },
+  { label: "Sharp", value: "sharp" },
+];
+
+const ICON_WEIGHT_OPTIONS = [
+  { label: "100", value: "100" },
+  { label: "200", value: "200" },
+  { label: "300", value: "300" },
+  { label: "400", value: "400" },
+  { label: "500", value: "500" },
+  { label: "600", value: "600" },
+  { label: "700", value: "700" },
+];
+
+interface IconsSectionProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+}
+
+export function IconsSection({ state, dispatch }: IconsSectionProps) {
+  const variant = state.icons?.variant ?? "rounded";
+  const weight = state.icons?.weight ?? 400;
+  return (
+    <div style={{ display: "flex", gap: 12 }}>
+      <div style={{ flex: 1 }}>
+        <Select
+          options={ICON_VARIANT_OPTIONS}
+          value={variant}
+          onValueChange={(v) =>
+            dispatch({
+              type: "SET_ICON_VARIANT",
+              variant: v as "outlined" | "rounded" | "sharp",
+            })
+          }
+          label="Variant"
+        />
+      </div>
+      <div style={{ flex: 1 }}>
+        <Select
+          options={ICON_WEIGHT_OPTIONS}
+          value={weight.toString()}
+          onValueChange={(v) =>
+            dispatch({
+              type: "SET_ICON_WEIGHT",
+              weight: parseInt(v) as
+                | 100
+                | 200
+                | 300
+                | 400
+                | 500
+                | 600
+                | 700,
+            })
+          }
+          label="Weight"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/sections/OthersSection.tsx

@@ -0,0 +1,70 @@
+import { Slider, useTokens } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+
+interface OthersSectionProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+}
+
+export function OthersSection({ state, dispatch }: OthersSectionProps) {
+  const tokens = useTokens();
+
+  const density = state.spacing?.density ?? 0.5;
+  const intensity = state.roundness?.intensity ?? 0.5;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div>
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            color: srgbToHex(tokens.textSecondary.srgb),
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8,
+          }}
+        >
+          Spacing
+        </div>
+        <Slider
+          value={Math.round(density * 100)}
+          onValueChange={(v) =>
+            dispatch({ type: "SET_SPACING_DENSITY", density: v / 100 })
+          }
+          min={0}
+          max={100}
+          label="Density"
+          showValue
+        />
+      </div>
+
+      <div>
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            color: srgbToHex(tokens.textSecondary.srgb),
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8,
+          }}
+        >
+          Roundness
+        </div>
+        <Slider
+          value={Math.round(intensity * 100)}
+          onValueChange={(v) =>
+            dispatch({ type: "SET_ROUNDNESS_INTENSITY", intensity: v / 100 })
+          }
+          min={0}
+          max={100}
+          label="Intensity"
+          showValue
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/sections/index.ts

@@ -0,0 +1,5 @@
+export { ColorsSection } from "./ColorsSection";
+export { DynamicRangeSection } from "./DynamicRangeSection";
+export { IconsSection } from "./IconsSection";
+export { FontsSection } from "./FontsSection";
+export { OthersSection } from "./OthersSection";