@vgai/editor 0.2.0

package/src/components/inspector-widgets/FontPicker.tsx

@@ -0,0 +1,196 @@
+/**
+ * FontPicker — a searchable, windowed (virtualized-by-hand, no new dep) font
+ * list (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s
+ * `FontPicker` (:1958-2093); the reference fetched fonts async through its
+ * `ParentBridge.getAvailableFonts()` (an iframe-bridge RPC this editor has no
+ * equivalent of) — here `fonts` is passed in directly by the caller, wired
+ * at C2 to the editor's OWN font source, `ui-source/inspect.ts:
+ * getAvailableFonts()` (browser `document.fonts` + the web-safe fallback
+ * list, already merged/sorted there — no re-implementation needed).
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { type ChangeHandlers, FONT, FONT_MONO, inputStyle, THEME } from './shared';
+
+const ITEM_HEIGHT = 28;
+const MAX_VISIBLE = 10;
+
+export interface FontPickerProps extends ChangeHandlers<string> {
+  /** The available font families — wire to `getAvailableFonts()` at C2. */
+  fonts: readonly string[];
+  /** Root-element test id. Defaults to the stable `font-picker`; a node with a
+   *  fontFamily on BOTH the style row and a component prop renders two, so the
+   *  inspector passes a per-row id to keep the roots distinct (spec 27 §5 C2, S1). */
+  testId?: string | undefined;
+}
+
+export function FontPicker({
+  value,
+  onChange,
+  disabled,
+  fonts,
+  testId = 'font-picker',
+}: FontPickerProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) searchRef.current?.focus();
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent): void => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!search) return fonts;
+    const q = search.toLowerCase();
+    return fonts.filter((f) => f.toLowerCase().includes(q));
+  }, [fonts, search]);
+
+  const totalHeight = filtered.length * ITEM_HEIGHT;
+  const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
+  const endIndex = Math.min(filtered.length, startIndex + MAX_VISIBLE + 2);
+  const visible = filtered.slice(startIndex, endIndex);
+
+  const select = (font: string): void => {
+    onChange(font);
+    setOpen(false);
+    setSearch('');
+  };
+
+  const displayValue = value.replace(/^["']|["']$/g, '');
+
+  return (
+    <div ref={containerRef} data-testid={testId} style={{ position: 'relative', flex: 1 }}>
+      <button
+        type="button"
+        data-testid="font-picker-input"
+        onClick={() => {
+          if (!disabled) setOpen((v) => !v);
+        }}
+        style={{
+          ...inputStyle(disabled),
+          width: '100%',
+          textAlign: 'left',
+          fontSize: 10,
+          fontFamily: FONT_MONO,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {displayValue || '—'}
+        </span>
+        <span style={{ fontSize: 8, color: THEME.textMuted, marginLeft: 4 }}>▼</span>
+      </button>
+      {open && (
+        <div
+          data-testid="font-picker-dropdown"
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            zIndex: 100,
+            background: THEME.bg,
+            border: `1px solid ${THEME.border}`,
+            borderRadius: 4,
+            marginTop: 2,
+          }}
+        >
+          <div style={{ padding: 4 }}>
+            <input
+              ref={searchRef}
+              type="text"
+              data-testid="font-picker-search"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setScrollTop(0);
+              }}
+              placeholder="Search fonts…"
+              style={{
+                ...inputStyle(),
+                width: '100%',
+                fontSize: 10,
+                fontFamily: FONT,
+                boxSizing: 'border-box',
+              }}
+            />
+          </div>
+          <div
+            data-testid="font-picker-list"
+            onScroll={(e) => setScrollTop((e.target as HTMLDivElement).scrollTop)}
+            style={{ maxHeight: MAX_VISIBLE * ITEM_HEIGHT, overflowY: 'auto' }}
+          >
+            <div style={{ height: totalHeight, position: 'relative' }}>
+              {visible.map((font, i) => {
+                const actualIndex = startIndex + i;
+                const isActive = font.toLowerCase() === displayValue.toLowerCase();
+                return (
+                  <div
+                    key={font}
+                    data-testid={`font-picker-option-${font}`}
+                    onClick={() => select(font)}
+                    style={{
+                      position: 'absolute',
+                      top: actualIndex * ITEM_HEIGHT,
+                      left: 0,
+                      right: 0,
+                      height: ITEM_HEIGHT,
+                      display: 'flex',
+                      alignItems: 'center',
+                      padding: '0 8px',
+                      cursor: 'pointer',
+                      fontSize: 12,
+                      background: isActive ? THEME.accent : 'transparent',
+                      color: isActive ? '#fff' : THEME.text,
+                    }}
+                  >
+                    <span
+                      style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
+                      {font}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {filtered.length === 0 && (
+            <div
+              style={{
+                padding: '8px 12px',
+                color: THEME.textMuted,
+                fontSize: 10,
+                textAlign: 'center',
+              }}
+            >
+              No matching fonts
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/inspector-widgets/GradientEditor.tsx

@@ -0,0 +1,277 @@
+/**
+ * GradientEditor — solid/gradient toggle, stop list (add/remove/drag),
+ * linear/radial toggle, angle (spec 27 §5 C1). Ported from
+ * `visual-edit/inspector.tsx`'s `GradientEditor` (:823-989) — kept as a
+ * gradient-only value editor here (the reference's solid-vs-gradient mode
+ * switch that also drove `backgroundColor` is a Fill-SECTION concern,
+ * `packages/editor/src/components/inspector-widgets` is CSS-value-only kit
+ * per this task's scope; C2 wires the section's solid/gradient toggle around
+ * this + `ColorSwatch`).
+ */
+
+import { useState } from 'react';
+import { ColorSwatch } from './ColorPicker';
+import { rgbStringToHex } from './color-utils';
+import { ScrubbableInput } from './ScrubbableInput';
+import { type ChangeHandlers, fireChange, fireEnd, THEME, ToggleButton } from './shared';
+
+export interface GradientStop {
+  color: string;
+  position: number; // 0..1
+}
+
+export interface GradientValue {
+  type: 'linear' | 'radial';
+  angle: number; // degrees, linear only
+  stops: GradientStop[];
+}
+
+export function composeGradient(g: GradientValue): string {
+  const stopStr = g.stops.map((s) => `${s.color} ${Math.round(s.position * 100)}%`).join(', ');
+  return g.type === 'radial'
+    ? `radial-gradient(circle, ${stopStr})`
+    : `linear-gradient(${g.angle}deg, ${stopStr})`;
+}
+
+/** The `linear-gradient(...)`/`radial-gradient(...)` outer match -> `{type, inner}`,
+ *  or `null` if `value` isn't either. Split out of `parseGradient` to keep
+ *  each step under biome's cognitive-complexity ceiling. */
+function matchGradientShell(value: string): { type: GradientValue['type']; inner: string } | null {
+  const linearMatch = value.match(/^linear-gradient\((.+)\)$/);
+  if (linearMatch?.[1] !== undefined) return { type: 'linear', inner: linearMatch[1] };
+  const radialMatch = value.match(/^radial-gradient\((.+)\)$/);
+  if (radialMatch?.[1] !== undefined) return { type: 'radial', inner: radialMatch[1] };
+  return null;
+}
+
+/** Strips a leading `<N>deg,`/`to <dir>,` prefix off a linear gradient's
+ *  inner string -> `{angle, colorPart}` (angle stays 180 — CSS's own default
+ *  — when neither prefix is present). */
+function stripLinearAngle(inner: string): { angle: number; colorPart: string } {
+  const angleMatch = inner.match(/^(\d+)deg\s*,\s*/);
+  if (angleMatch) {
+    return {
+      angle: Number.parseInt(angleMatch[1] ?? '180', 10),
+      colorPart: inner.slice(angleMatch[0].length),
+    };
+  }
+  if (inner.startsWith('to ')) {
+    const dirMatch = inner.match(/^to\s+\w+\s*,\s*/);
+    if (dirMatch) return { angle: 180, colorPart: inner.slice(dirMatch[0].length) };
+  }
+  return { angle: 180, colorPart: inner };
+}
+
+/** `"#fff 0%, #000 100%"` -> stops, auto-spreading any stop that omitted its
+ *  `%` evenly across the run (matches the CSS spec's own auto-position rule). */
+function parseGradientStops(colorPart: string): GradientStop[] {
+  const stops: GradientStop[] = colorPart.split(/,\s*(?![^(]*\))/).map((part) => {
+    const trimmed = part.trim();
+    const pctMatch = trimmed.match(/\s+(\d+)%$/);
+    const position = pctMatch ? Number.parseInt(pctMatch[1] ?? '0', 10) / 100 : -1;
+    const color = pctMatch ? trimmed.slice(0, -pctMatch[0].length).trim() : trimmed;
+    return { color, position };
+  });
+  for (let i = 0; i < stops.length; i++) {
+    const stop = stops[i];
+    if (stop && stop.position < 0) stop.position = stops.length > 1 ? i / (stops.length - 1) : 0;
+  }
+  return stops;
+}
+
+export function parseGradient(value: string): GradientValue | null {
+  if (!value || value === 'none') return null;
+  const shell = matchGradientShell(value);
+  if (!shell) return null;
+  const { angle, colorPart } =
+    shell.type === 'linear'
+      ? stripLinearAngle(shell.inner)
+      : { angle: 180, colorPart: shell.inner };
+  const stops = parseGradientStops(colorPart);
+  if (stops.length < 2) return null;
+  return { type: shell.type, angle, stops };
+}
+
+export interface GradientEditorProps extends ChangeHandlers<GradientValue> {
+  recentColors?: string[] | undefined;
+  onAddRecentColor?: ((color: string) => void) | undefined;
+  /** Root-element test id. Defaults to the stable `gradient-editor` (the gallery
+   *  / C1 contract); a caller that renders MORE THAN ONE gradient editor on a
+   *  node (the inspector's `prop.background` + `style.backgroundImage` rows)
+   *  passes a per-row id so the two roots don't collide (spec 27 §5 C2, S1). */
+  testId?: string | undefined;
+}
+
+export function GradientEditor({
+  value,
+  onChange,
+  onChangeEnd,
+  disabled,
+  recentColors,
+  onAddRecentColor,
+  testId = 'gradient-editor',
+}: GradientEditorProps): React.ReactElement {
+  const [selectedStop, setSelectedStop] = useState(0);
+
+  const apply = (next: GradientValue, commit: boolean): void => {
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  const setStop = (index: number, partial: Partial<GradientStop>, commit: boolean): void => {
+    const stops = value.stops.map((s, i) => (i === index ? { ...s, ...partial } : s));
+    apply({ ...value, stops }, commit);
+  };
+
+  const addStop = (): void => {
+    const last = value.stops[value.stops.length - 1]?.position ?? 1;
+    const first = value.stops[0]?.position ?? 0;
+    const pos = (last + first) / 2;
+    const stops = [...value.stops, { color: '#888888', position: pos }].sort(
+      (a, b) => a.position - b.position,
+    );
+    setSelectedStop(stops.length - 1);
+    apply({ ...value, stops }, true);
+  };
+
+  const removeStop = (index: number): void => {
+    if (value.stops.length <= 2) return;
+    const stops = value.stops.filter((_, i) => i !== index);
+    setSelectedStop(Math.min(selectedStop, stops.length - 1));
+    apply({ ...value, stops }, true);
+  };
+
+  const stopColor = value.stops[selectedStop]?.color ?? '#000000';
+  const stopHex = stopColor.startsWith('#') ? stopColor : rgbStringToHex(stopColor);
+
+  return (
+    <div data-testid={testId}>
+      <div style={{ position: 'relative', marginBottom: 8 }}>
+        <div
+          data-testid="gradient-preview"
+          style={{
+            height: 20,
+            borderRadius: 4,
+            border: `1px solid ${THEME.border}`,
+            background: composeGradient(value),
+          }}
+        />
+        <div style={{ position: 'relative', height: 12, marginTop: 2 }}>
+          {value.stops.map((stop, i) => (
+            <div
+              key={i}
+              data-testid={`gradient-stop-${i}`}
+              onClick={() => setSelectedStop(i)}
+              onMouseDown={(e) => {
+                if (disabled) return;
+                e.preventDefault();
+                const parent = (e.target as HTMLElement).parentElement;
+                const rect = parent?.getBoundingClientRect();
+                const onMove = (me: MouseEvent): void => {
+                  const pos = rect?.width
+                    ? Math.max(0, Math.min(1, (me.clientX - rect.left) / rect.width))
+                    : stop.position;
+                  setStop(i, { position: pos }, false);
+                };
+                const onUp = (me: MouseEvent): void => {
+                  const pos = rect?.width
+                    ? Math.max(0, Math.min(1, (me.clientX - rect.left) / rect.width))
+                    : stop.position;
+                  setStop(i, { position: pos }, true);
+                  window.removeEventListener('mousemove', onMove);
+                  window.removeEventListener('mouseup', onUp);
+                };
+                window.addEventListener('mousemove', onMove);
+                window.addEventListener('mouseup', onUp);
+              }}
+              style={{
+                position: 'absolute',
+                left: `${stop.position * 100}%`,
+                top: 0,
+                width: 10,
+                height: 10,
+                borderRadius: '50%',
+                background: stop.color,
+                border: `2px solid ${i === selectedStop ? THEME.accent : '#fff'}`,
+                transform: 'translateX(-50%)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+              }}
+            />
+          ))}
+        </div>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+        <ColorSwatch
+          testId="gradient-selected-color"
+          value={stopHex}
+          disabled={disabled}
+          onChange={(c) => setStop(selectedStop, { color: c }, false)}
+          onChangeEnd={(c) => setStop(selectedStop, { color: c }, true)}
+          recentColors={recentColors}
+          onAddRecentColor={onAddRecentColor}
+        />
+        <span style={{ fontSize: 9, color: THEME.textMuted }}>Stop {selectedStop + 1}</span>
+        {value.stops.length > 2 && (
+          <button
+            type="button"
+            data-testid="gradient-remove-stop"
+            onClick={() => removeStop(selectedStop)}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: THEME.textMuted,
+              cursor: 'pointer',
+              fontSize: 10,
+            }}
+          >
+            ×
+          </button>
+        )}
+        <button
+          type="button"
+          data-testid="gradient-add-stop"
+          onClick={addStop}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: THEME.accent,
+            cursor: 'pointer',
+            fontSize: 10,
+          }}
+        >
+          + stop
+        </button>
+      </div>
+      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: 1, flex: 1 }}>
+          <ToggleButton
+            testId="gradient-type-linear"
+            label="Linear"
+            active={value.type === 'linear'}
+            disabled={disabled}
+            onClick={() => apply({ ...value, type: 'linear' }, true)}
+          />
+          <ToggleButton
+            testId="gradient-type-radial"
+            label="Radial"
+            active={value.type === 'radial'}
+            disabled={disabled}
+            onClick={() => apply({ ...value, type: 'radial' }, true)}
+          />
+        </div>
+        {value.type === 'linear' && (
+          <ScrubbableInput
+            testId="gradient-angle"
+            label="°"
+            value={value.angle}
+            unit="deg"
+            disabled={disabled}
+            onChange={(v) => apply({ ...value, angle: v }, false)}
+            onChangeEnd={(v) => apply({ ...value, angle: v }, true)}
+            style={{ width: 70 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/inspector-widgets/ScrubbableInput.tsx

@@ -0,0 +1,152 @@
+/**
+ * ScrubbableInput — a numeric input whose LABEL is a drag-to-scrub handle
+ * (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s `ScrubbableInput`
+ * (:107-219): drag the label left/right to change the number, Shift = ×10,
+ * Alt = ×0.1, Escape cancels back to the drag-start value. Unlike the
+ * reference (which threaded a `prop` string + string value through a
+ * shared style-bag callback), this widget's contract is the kit-wide pure
+ * `value: number` / `onChange` / `onChangeEnd` (see `shared.tsx`'s doc
+ * comment) — `unit` is display-only (appended to the rendered text, stripped
+ * on parse), keeping the value itself a plain number for callers to compose
+ * into whatever CSS string they write.
+ */
+
+import { useMemo, useRef } from 'react';
+import { type ChangeHandlers, fireChange, fireEnd, inputStyle, rowStyle, THEME } from './shared';
+
+export interface ScrubbableInputProps extends ChangeHandlers<number> {
+  label: string;
+  unit?: string | undefined;
+  step?: number | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  precision?: number | undefined;
+  testId?: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+
+export function ScrubbableInput({
+  label,
+  value,
+  unit = '',
+  step = 1,
+  min,
+  max,
+  precision,
+  disabled,
+  onChange,
+  onChangeEnd,
+  testId,
+  style: extraStyle,
+}: ScrubbableInputProps): React.ReactElement {
+  const dragRef = useRef<{ startX: number; startValue: number; last: number } | null>(null);
+
+  const effectivePrecision = precision ?? (step < 1 ? 2 : step >= 100 ? -2 : 0);
+
+  const round = useMemo(
+    () =>
+      (n: number): number => {
+        if (effectivePrecision < 0) {
+          const factor = 10 ** -effectivePrecision;
+          return Math.round(n / factor) * factor;
+        }
+        const factor = 10 ** effectivePrecision;
+        return Math.round(n * factor) / factor;
+      },
+    [effectivePrecision],
+  );
+
+  const clamp = (n: number): number => {
+    let v = n;
+    if (min !== undefined) v = Math.max(min, v);
+    if (max !== undefined) v = Math.min(max, v);
+    return round(v);
+  };
+
+  const handleScrubStart = (e: React.MouseEvent): void => {
+    if (disabled) return;
+    e.preventDefault();
+    dragRef.current = { startX: e.clientX, startValue: value, last: value };
+    document.body.style.cursor = 'ew-resize';
+
+    const handleMove = (me: MouseEvent): void => {
+      if (!dragRef.current) return;
+      me.preventDefault();
+      const delta = me.clientX - dragRef.current.startX;
+      const multiplier = me.shiftKey ? 10 : me.altKey ? 0.1 : 1;
+      const next = clamp(dragRef.current.startValue + delta * step * multiplier);
+      dragRef.current.last = next;
+      fireChange({ onChange }, next);
+    };
+
+    const cleanup = (): void => {
+      document.body.style.cursor = '';
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('keydown', handleKeyDuringScrub);
+    };
+
+    const handleUp = (): void => {
+      if (dragRef.current) {
+        const final = dragRef.current.last;
+        dragRef.current = null;
+        fireEnd({ onChange, onChangeEnd }, final);
+      }
+      cleanup();
+    };
+
+    const handleKeyDuringScrub = (ke: KeyboardEvent): void => {
+      if (ke.key === 'Escape' && dragRef.current) {
+        const original = clamp(dragRef.current.startValue);
+        dragRef.current = null;
+        fireChange({ onChange }, original);
+        fireEnd({ onChange, onChangeEnd }, original);
+        cleanup();
+      }
+    };
+
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('keydown', handleKeyDuringScrub);
+  };
+
+  const commitText = (raw: string): void => {
+    const n = Number.parseFloat(raw);
+    if (Number.isNaN(n)) return;
+    fireEnd({ onChange, onChangeEnd }, clamp(n));
+  };
+
+  return (
+    <div style={{ ...rowStyle, ...extraStyle }}>
+      <span
+        data-testid={testId ? `${testId}-label` : undefined}
+        onMouseDown={handleScrubStart}
+        style={{
+          fontSize: 11,
+          color: disabled ? THEME.dynamic : THEME.textMuted,
+          flexShrink: 0,
+          cursor: disabled ? 'not-allowed' : 'ew-resize',
+          userSelect: 'none',
+          fontWeight: 500,
+        }}
+      >
+        {label}
+      </span>
+      <input
+        data-testid={testId}
+        type="text"
+        value={`${value}${unit}`}
+        readOnly={disabled}
+        onChange={(e) => {
+          const n = Number.parseFloat(e.target.value);
+          if (!Number.isNaN(n)) fireChange({ onChange }, n);
+        }}
+        onBlur={(e) => commitText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commitText((e.target as HTMLInputElement).value);
+        }}
+        style={{ ...inputStyle(disabled), flex: 1, width: 0 }}
+      />
+    </div>
+  );
+}