@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/primitives/ColorInput.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useInteractiveEditScope } from '../../interactive-edit-scope';
+import { ColorSwatchInput, TextInput } from './FormControls';
 
 interface ColorInputProps {
   value: string | null;
@@ -25,43 +26,24 @@ export function ColorInput({ value, onChange }: ColorInputProps) {
 
   if (value === null) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-        <div
-          style={{
-            width: 28,
-            height: 22,
-            border: '1px solid #333',
-            borderRadius: 2,
-            background:
-              'linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%)',
-            backgroundSize: '8px 8px',
-            backgroundPosition: '0 0, 4px 4px',
-          }}
-        />
-        <input
-          placeholder="mixed"
+      <div className="vgai-color-input">
+        <div className="vgai-color-input-mixed" />
+        <TextInput
+          // Mixed-value language unified on the em-dash (I-15), matching
+          // NumberInput's mixed display.
+          placeholder="—"
           onChange={(e) => {
             if (e.target.value) onChange(e.target.value);
           }}
-          style={{
-            flex: 1,
-            background: '#1e1e1e',
-            color: '#666',
-            fontStyle: 'italic',
-            border: '1px solid #333',
-            borderRadius: 2,
-            padding: '2px 4px',
-            fontSize: 12,
-          }}
+          data-mixed="true"
         />
       </div>
     );
   }
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-      <input
-        type="color"
+    <div className="vgai-color-input">
+      <ColorSwatchInput
         value={value}
         // The native picker fires onChange continuously while dragging. Coalesce
         // the whole drag into one undo step (beginInteractiveEdit is idempotent);
@@ -71,17 +53,8 @@ export function ColorInput({ value, onChange }: ColorInputProps) {
           onChange(e.target.value);
         }}
         onBlur={() => editScope?.end()}
-        style={{
-          width: 28,
-          height: 22,
-          border: '1px solid #333',
-          borderRadius: 2,
-          padding: 0,
-          cursor: 'pointer',
-          background: 'transparent',
-        }}
       />
-      <input
+      <TextInput
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={commit}
@@ -94,15 +67,6 @@ export function ColorInput({ value, onChange }: ColorInputProps) {
             (e.target as HTMLInputElement).blur();
           }
         }}
-        style={{
-          flex: 1,
-          background: '#1e1e1e',
-          color: '#c5c8ce',
-          border: '1px solid #333',
-          borderRadius: 2,
-          padding: '2px 4px',
-          fontSize: 12,
-        }}
       />
     </div>
   );

package/src/components/primitives/EditorIcon.tsx

@@ -0,0 +1,99 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCaretDown,
+  faCaretRight,
+  faChevronDown,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type React from 'react';
+import { themeVars } from '../../theme';
+
+export type EditorIconSize = 'xs' | 'sm' | 'md' | 'lg';
+export type EditorIconTone = 'current' | 'primary' | 'muted' | 'dim' | 'accent' | 'danger';
+
+const SIZE: Record<EditorIconSize, string> = {
+  xs: 'var(--vgai-font-xs)',
+  sm: 'var(--vgai-font-sm)',
+  md: 'var(--vgai-font-md)',
+  lg: 'var(--vgai-font-lg)',
+};
+
+const TONE: Record<EditorIconTone, string | undefined> = {
+  current: undefined,
+  primary: themeVars.content.primary,
+  muted: themeVars.content.muted,
+  dim: themeVars.content.dim,
+  accent: themeVars.accent.default,
+  danger: themeVars.semantic.danger,
+};
+
+export interface EditorIconProps extends Omit<React.HTMLAttributes<SVGSVGElement>, 'color'> {
+  icon: IconDefinition;
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+  /** Icons inside already-labelled controls stay decorative by default. */
+  label?: string;
+  spin?: boolean;
+}
+
+/** Canonical editor-chrome icon metrics and accessibility behavior. */
+export function EditorIcon({
+  icon,
+  size = 'sm',
+  tone = 'current',
+  label,
+  className,
+  style,
+  spin = false,
+  ...svgProps
+}: EditorIconProps) {
+  return (
+    <FontAwesomeIcon
+      {...svgProps}
+      icon={icon}
+      fixedWidth
+      spin={spin}
+      className={className}
+      aria-hidden={label ? undefined : (svgProps['aria-hidden'] ?? 'true')}
+      aria-label={label}
+      role={label ? 'img' : undefined}
+      style={{ fontSize: SIZE[size], color: TONE[tone], ...style }}
+    />
+  );
+}
+
+export function DisclosureIcon({
+  direction,
+  size = 'xs',
+  tone = 'current',
+  style,
+}: {
+  direction: 'right' | 'down';
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <EditorIcon
+      icon={direction === 'right' ? faChevronRight : faChevronDown}
+      size={size}
+      tone={tone}
+      {...(style ? { style } : {})}
+    />
+  );
+}
+
+export function TreeDisclosureIcon({
+  direction,
+  size = 'xs',
+  tone = 'current',
+}: {
+  direction: 'right' | 'down';
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+}) {
+  return (
+    <EditorIcon icon={direction === 'right' ? faCaretRight : faCaretDown} size={size} tone={tone} />
+  );
+}

package/src/components/primitives/FormControls.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, type InputHTMLAttributes, type SelectHTMLAttributes } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { className, type = 'text', ...props },
+  ref,
+) {
+  return <input {...props} ref={ref} type={type} className={classes('vgai-input', className)} />;
+});
+
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { className, ...props },
+  ref,
+) {
+  return <select {...props} ref={ref} className={classes('vgai-select', className)} />;
+});
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <input {...props} ref={ref} type="checkbox" className={classes('vgai-checkbox', className)} />
+  );
+});
+
+export type ColorSwatchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+/** Native color picker with editor-owned dimensions, border, and focus treatment. */
+export const ColorSwatchInput = forwardRef<HTMLInputElement, ColorSwatchInputProps>(
+  function ColorSwatchInput({ className, ...props }, ref) {
+    return (
+      <input
+        {...props}
+        ref={ref}
+        type="color"
+        className={classes('vgai-color-swatch', className)}
+      />
+    );
+  },
+);
+
+export type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+/** File input kept native for platform behavior while sharing editor focus/disabled states. */
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <input {...props} ref={ref} type="file" className={classes('vgai-file-input', className)} />
+  );
+});
+
+export type RangeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(function RangeInput(
+  { className, ...props },
+  ref,
+) {
+  return <input {...props} ref={ref} type="range" className={classes('vgai-range', className)} />;
+});

package/src/components/primitives/JsonInput.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { fontSize, themeVars } from '../../theme';
 
 /**
  * Type-preserving JSON input for the component inspector's raw path.
@@ -62,6 +63,10 @@ export function JsonInput({
     <div>
       <input
         data-testid="json-input"
+        // Self-styled baseline (I-28): the shared field class means this
+        // primitive is never silently unstyled when a caller passes no
+        // `style` — callers now only supply layout (width/flex).
+        className="vgai-input"
         value={draft}
         onChange={(e) => {
           setDraft(e.target.value);
@@ -78,7 +83,15 @@ export function JsonInput({
             (e.target as HTMLInputElement).blur();
           }
         }}
-        style={invalid ? { ...style, borderColor: '#FF6B6B', color: '#FF6B6B' } : style}
+        style={
+          invalid
+            ? {
+                ...style,
+                borderColor: themeVars.semantic.danger,
+                color: themeVars.semantic.danger,
+              }
+            : style
+        }
         title={
           invalid
             ? 'Not valid JSON — nothing written. Fix the JSON or press Escape to revert.'
@@ -88,7 +101,7 @@ export function JsonInput({
       {invalid && (
         <div
           data-testid="json-input-error"
-          style={{ fontSize: 10, color: '#FF6B6B', marginTop: 2 }}
+          style={{ fontSize: fontSize.sm, color: themeVars.semantic.danger, marginTop: 2 }}
         >
           Not valid JSON — nothing written. Fix the JSON or press Escape to revert.
         </div>

package/src/components/primitives/Layout.tsx

@@ -0,0 +1,100 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+export type LayoutGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type LayoutAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type LayoutJustification = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: LayoutGap;
+  align?: LayoutAlignment;
+  justify?: LayoutJustification;
+  padding?: LayoutGap;
+  paddingX?: LayoutGap;
+  paddingY?: LayoutGap;
+}
+
+const alignValue: Record<LayoutAlignment, CSSProperties['alignItems']> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  baseline: 'baseline',
+};
+
+const justifyValue: Record<LayoutJustification, CSSProperties['justifyContent']> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly',
+};
+
+function token(value: LayoutGap | undefined): string | undefined {
+  return value === 0 ? '0px' : value === undefined ? undefined : `var(--vgai-space-${value})`;
+}
+
+function layoutStyle({
+  gap,
+  align,
+  justify,
+  padding,
+  paddingX,
+  paddingY,
+  style,
+}: LayoutProps): CSSProperties {
+  return {
+    gap: token(gap),
+    alignItems: align ? alignValue[align] : undefined,
+    justifyContent: justify ? justifyValue[justify] : undefined,
+    padding: token(padding),
+    paddingInline: token(paddingX),
+    paddingBlock: token(paddingY),
+    ...style,
+  };
+}
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export function Stack({ className, ...props }: LayoutProps) {
+  return <div {...props} className={classes('vgai-stack', className)} style={layoutStyle(props)} />;
+}
+
+export function Inline({ className, ...props }: LayoutProps) {
+  return (
+    <div {...props} className={classes('vgai-inline', className)} style={layoutStyle(props)} />
+  );
+}
+
+export function Spacer({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span {...props} aria-hidden="true" className={classes('vgai-spacer', className)} />;
+}
+
+export function Divider({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { orientation?: 'horizontal' | 'vertical' }) {
+  return (
+    <div
+      {...props}
+      aria-hidden="true"
+      data-orientation={orientation}
+      className={classes('vgai-divider', className)}
+    />
+  );
+}
+
+export function Actions({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return (
+    <Inline {...props} className={classes('vgai-actions', className)} gap={2} align="center">
+      {children}
+    </Inline>
+  );
+}

package/src/components/primitives/Menu.tsx

@@ -0,0 +1,105 @@
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type HTMLAttributes,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+  autoFocusFirst?: boolean;
+  onDismiss?: () => void;
+}
+
+function enabledItems(menu: HTMLDivElement): HTMLElement[] {
+  return Array.from(
+    menu.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not(:disabled), [role="menuitemradio"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)',
+    ),
+  );
+}
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
+  { className, role = 'menu', autoFocusFirst = false, onDismiss, onKeyDown, ...props },
+  ref,
+) {
+  const localRef = useRef<HTMLDivElement>(null);
+  useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+  useEffect(() => {
+    if (autoFocusFirst) enabledItems(localRef.current as HTMLDivElement)[0]?.focus();
+  }, [autoFocusFirst]);
+
+  return (
+    <div
+      {...props}
+      ref={localRef}
+      role={role}
+      className={classes('vgai-menu', className)}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          onDismiss?.();
+          return;
+        }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+        event.preventDefault();
+        const items = enabledItems(event.currentTarget);
+        if (items.length === 0) return;
+        const current = items.indexOf(document.activeElement as HTMLElement);
+        if (event.key === 'Home') items[0]?.focus();
+        else if (event.key === 'End') items.at(-1)?.focus();
+        else if (event.key === 'ArrowDown')
+          items[(current + 1 + items.length) % items.length]?.focus();
+        else items[(current - 1 + items.length) % items.length]?.focus();
+      }}
+    />
+  );
+});
+
+export type MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  onSelect?: (() => void) | undefined;
+};
+
+export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(
+  { className, type = 'button', role = 'menuitem', onClick, onSelect, ...props },
+  ref,
+) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      role={role}
+      className={classes('vgai-menu-item', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onSelect?.();
+      }}
+    />
+  );
+});
+
+export function MenuSeparator(props: HTMLAttributes<HTMLHRElement>) {
+  return <hr {...props} className={classes('vgai-menu-separator', props.className)} />;
+}
+
+export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function MenuTrigger({ className, type = 'button', ...props }, ref) {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type={type}
+        aria-haspopup={props['aria-haspopup'] ?? 'menu'}
+        className={classes('vgai-menu-trigger', className)}
+      />
+    );
+  },
+);

package/src/components/primitives/NumberInput.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useInteractiveEditScope } from '../../interactive-edit-scope';
+import { TextInput } from './FormControls';
 
 interface NumberInputProps {
   value: number | null; // null = mixed (multi-edit)
@@ -100,23 +101,17 @@ export function NumberInput({
   };
 
   return (
-    <div data-testid={testId} style={{ display: 'flex', alignItems: 'center', gap: 2, ...style }}>
+    <div className="vgai-number-input" data-testid={testId} style={style}>
       {label && (
         <span
-          style={{
-            fontSize: 10,
-            fontWeight: 700,
-            color: labelColor ?? '#8c8c8c',
-            width: 12,
-            textAlign: 'center',
-            userSelect: 'none',
-          }}
+          className="vgai-number-input-label"
+          style={labelColor ? { color: labelColor } : undefined}
         >
           {label}
         </span>
       )}
       {editing ? (
-        <input
+        <TextInput
           ref={inputRef}
           value={text}
           onChange={(e) => setText(e.target.value)}
@@ -126,35 +121,13 @@ export function NumberInput({
             if (e.key === 'Escape') setEditing(false);
           }}
           placeholder={isMixed ? '—' : undefined}
-          style={{
-            width: '100%',
-            background: '#1e1e1e',
-            color: '#c5c8ce',
-            border: '1px solid #579EFF',
-            borderRadius: 2,
-            padding: '2px 4px',
-            fontSize: 12,
-            outline: 'none',
-          }}
+          className="vgai-number-input-editor"
         />
       ) : (
         <div
           onPointerDown={handlePointerDown}
-          style={{
-            width: '100%',
-            background: '#1e1e1e',
-            border: '1px solid #333',
-            borderRadius: 2,
-            padding: '2px 4px',
-            fontSize: 12,
-            cursor: 'ew-resize',
-            userSelect: 'none',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            color: isMixed ? '#666' : undefined,
-            fontStyle: isMixed ? 'italic' : undefined,
-          }}
+          className="vgai-number-input-scrub"
+          data-mixed={isMixed || undefined}
         >
           {display}
         </div>