@aprovan/patchwork 0.1.0

package/packages/bobbin/src/components/EditPanel/controls/SliderInput.tsx

@@ -0,0 +1,94 @@
+import { useState, useCallback } from 'react';
+
+interface SliderInputProps {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  onChange: (value: number) => void;
+  label?: string;
+}
+
+export function SliderInput({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  unit = 'px',
+  onChange,
+  label,
+}: SliderInputProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [localValue, setLocalValue] = useState(value);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    const startX = e.clientX;
+    const startValue = localValue;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const delta = e.clientX - startX;
+      const sensitivity = e.shiftKey ? 0.1 : 1; // Shift for fine control
+      const newValue = Math.min(max, Math.max(min, startValue + delta * sensitivity));
+      const steppedValue = Math.round(newValue / step) * step;
+      setLocalValue(steppedValue);
+      onChange(steppedValue);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [localValue, min, max, step, onChange]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value) || 0;
+    setLocalValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      {label && (
+        <span style={{ fontSize: '10px', color: '#71717a', width: '18px' }}>{label}</span>
+      )}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: '#ffffff',
+          border: '1px solid #e4e4e7',
+          borderRadius: '4px',
+          padding: '3px 6px',
+          cursor: 'ew-resize',
+        }}
+        onMouseDown={handleMouseDown}
+      >
+        <input
+          type="number"
+          value={localValue}
+          onChange={handleInputChange}
+          style={{
+            width: '100%',
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: '#18181b',
+            fontSize: '11px',
+            fontFamily: 'ui-monospace, monospace',
+            outline: 'none',
+            cursor: isDragging ? 'ew-resize' : 'text',
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+        <span style={{ fontSize: '10px', color: '#a1a1aa', marginLeft: '4px' }}>{unit}</span>
+      </div>
+    </div>
+  );
+}

package/packages/bobbin/src/components/EditPanel/controls/SpacingControl.tsx

@@ -0,0 +1,285 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+interface SpacingControlProps {
+  values: { top: string; right: string; bottom: string; left: string };
+  onChange: (side: Side, value: string) => void;
+  label: string;
+  hasChanges?: { top?: boolean; right?: boolean; bottom?: boolean; left?: boolean };
+}
+
+// Chain link icon (for linked sides)
+const ChainIcon = ({ linked }: { linked: boolean }) => (
+  <svg 
+    width="12" 
+    height="12" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ opacity: linked ? 1 : 0.4 }}
+  >
+    {linked ? (
+      // Linked chain
+      <>
+        <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+        <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+        <line x1="8" y1="12" x2="16" y2="12" />
+      </>
+    ) : (
+      // Broken chain
+      <>
+        <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+        <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+        <line x1="8" y1="12" x2="10" y2="12" />
+        <line x1="14" y1="12" x2="16" y2="12" />
+      </>
+    )}
+  </svg>
+);
+
+// Check if a CSS value is valid
+function isValidCSSValue(value: string): boolean {
+  if (!value || value.trim() === '') return true; // Empty is valid (will revert to default)
+  
+  // Common valid patterns
+  const validPatterns = [
+    /^-?\d+(\.\d+)?(px|em|rem|%|vh|vw|pt|cm|mm|in|pc)?$/i,
+    /^auto$/i,
+    /^inherit$/i,
+    /^initial$/i,
+    /^unset$/i,
+    /^0$/,
+  ];
+  
+  return validPatterns.some(pattern => pattern.test(value.trim()));
+}
+
+export function SpacingControl({ values, onChange, label, hasChanges = {} }: SpacingControlProps) {
+  const [editingSide, setEditingSide] = useState<Side | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const [linkVertical, setLinkVertical] = useState(false);
+  const [linkHorizontal, setLinkHorizontal] = useState(false);
+  const [highlightLinked, setHighlightLinked] = useState<'vertical' | 'horizontal' | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when editing starts
+  useEffect(() => {
+    if (editingSide && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingSide]);
+
+  const handleChange = useCallback((side: Side, value: string) => {
+    onChange(side, value);
+    
+    // Apply linked changes
+    if (linkVertical && (side === 'top' || side === 'bottom')) {
+      onChange(side === 'top' ? 'bottom' : 'top', value);
+    }
+    if (linkHorizontal && (side === 'left' || side === 'right')) {
+      onChange(side === 'left' ? 'right' : 'left', value);
+    }
+  }, [onChange, linkVertical, linkHorizontal]);
+
+  const handleBoxClick = (side: Side, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingSide(side);
+    setEditValue(values[side]);
+    
+    // Highlight linked sides
+    if (linkVertical && (side === 'top' || side === 'bottom')) {
+      setHighlightLinked('vertical');
+    } else if (linkHorizontal && (side === 'left' || side === 'right')) {
+      setHighlightLinked('horizontal');
+    }
+  };
+
+  const handleInputChange = (value: string) => {
+    setEditValue(value);
+    // Apply changes even if temporarily invalid (user is typing)
+    if (editingSide) {
+      handleChange(editingSide, value);
+    }
+  };
+
+  const handleInputBlur = () => {
+    setEditingSide(null);
+    setHighlightLinked(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === 'Escape') {
+      setEditingSide(null);
+      setHighlightLinked(null);
+    }
+  };
+
+  const formatValue = (value: string) => {
+    // Extract just the numeric value for compact display
+    const match = value.match(/^([\d.]+)/);
+    return match ? match[1] : value || '0';
+  };
+
+  const isLinkedHighlighted = (side: Side): boolean => {
+    if (!highlightLinked) return false;
+    if (highlightLinked === 'vertical' && (side === 'top' || side === 'bottom')) return true;
+    if (highlightLinked === 'horizontal' && (side === 'left' || side === 'right')) return true;
+    return false;
+  };
+
+  const getBoxStyle = (side: Side): React.CSSProperties => {
+    const isEditing = editingSide === side;
+    const isLinked = isLinkedHighlighted(side);
+    const isValid = isEditing ? isValidCSSValue(editValue) : true;
+    const hasChange = hasChanges[side];
+    
+    return {
+      padding: isEditing ? '0' : '2px 4px',
+      borderRadius: '3px',
+      border: `1px solid ${
+        !isValid ? '#ef4444' : 
+        hasChange ? '#3b82f6' : 
+        isLinked ? '#8b5cf6' :
+        isEditing ? '#18181b' : 
+        '#e4e4e7'
+      }`,
+      backgroundColor: 
+        !isValid ? '#fef2f2' :
+        hasChange ? '#eff6ff' : 
+        isLinked ? '#f5f3ff' :
+        '#ffffff',
+      color: '#18181b',
+      fontSize: '9px',
+      textAlign: 'center',
+      cursor: 'text',
+      minWidth: '28px',
+      transition: 'all 0.1s ease',
+      outline: 'none',
+    };
+  };
+
+  const linkButtonStyle = (active: boolean): React.CSSProperties => ({
+    padding: '2px 4px',
+    borderRadius: '3px',
+    border: `1px solid ${active ? '#8b5cf6' : '#e4e4e7'}`,
+    backgroundColor: active ? '#f5f3ff' : '#ffffff',
+    color: active ? '#8b5cf6' : '#71717a',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'all 0.1s ease',
+  });
+
+  const renderValueBox = (side: Side, position: React.CSSProperties) => {
+    const isEditing = editingSide === side;
+    
+    return (
+      <div style={{ position: 'absolute', ...position }}>
+        {isEditing ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editValue}
+            onChange={(e) => handleInputChange(e.target.value)}
+            onBlur={handleInputBlur}
+            onKeyDown={handleKeyDown}
+            style={{
+              ...getBoxStyle(side),
+              width: '36px',
+              fontFamily: 'inherit',
+            }}
+          />
+        ) : (
+          <div
+            onClick={(e) => handleBoxClick(side, e)}
+            style={getBoxStyle(side)}
+            title={`${side}: ${values[side]}`}
+          >
+            {formatValue(values[side])}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a' }}>
+          {label}
+        </label>
+        <div style={{ display: 'flex', gap: '2px' }}>
+          <button
+            style={linkButtonStyle(linkVertical)}
+            onClick={() => setLinkVertical(!linkVertical)}
+            title={linkVertical ? 'Unlink top/bottom' : 'Link top/bottom'}
+          >
+            <span style={{ transform: 'rotate(90deg)', display: 'flex' }}>
+              <ChainIcon linked={linkVertical} />
+            </span>
+          </button>
+          <button
+            style={linkButtonStyle(linkHorizontal)}
+            onClick={() => setLinkHorizontal(!linkHorizontal)}
+            title={linkHorizontal ? 'Unlink left/right' : 'Link left/right'}
+          >
+            <ChainIcon linked={linkHorizontal} />
+          </button>
+        </div>
+      </div>
+      
+      {/* Visual spacing box with outline square in center */}
+      <div 
+        style={{ 
+          position: 'relative',
+          width: '100px',
+          height: '40px',
+          margin: '0 auto',
+        }}
+      >
+        {/* Outline square connecting all sides */}
+        <svg
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+          }}
+          viewBox="0 0 100 70"
+        >
+          {/* Outer rectangle outline */}
+          <rect
+            x="10"
+            y="10"
+            width="80"
+            height="50"
+            fill="none"
+            stroke="lightgray"
+            strokeWidth="1"
+            strokeDasharray="3,2"
+            rx="2"
+          />
+          {/* Lines connecting to value boxes */}
+          <line x1="50" y1="10" x2="50" y2="2" stroke="lightgray" strokeWidth="1" />
+          <line x1="50" y1="60" x2="50" y2="68" stroke="lightgray" strokeWidth="1" />
+          <line x1="10" y1="35" x2="2" y2="35" stroke="lightgray" strokeWidth="1" />
+          <line x1="90" y1="35" x2="98" y2="35" stroke="lightgray" strokeWidth="1" />
+        </svg>
+
+        {/* Value boxes at each side */}
+        {renderValueBox('top', { top: '-8px', left: '50%', transform: 'translateX(-50%)' })}
+        {renderValueBox('bottom', { bottom: '-8px', left: '50%', transform: 'translateX(-50%)' })}
+        {renderValueBox('left', { left: '-12px', top: '50%', transform: 'translateY(-50%)' })}
+        {renderValueBox('right', { right: '-12px', top: '50%', transform: 'translateY(-50%)' })}
+      </div>
+    </div>
+  );
+}

package/packages/bobbin/src/components/EditPanel/controls/ToggleGroup.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+interface ToggleGroupProps {
+  value: string;
+  options: Array<{ value: string; label: ReactNode }>;
+  onChange: (value: string) => void;
+}
+
+export function ToggleGroup({ value, options, onChange }: ToggleGroupProps) {
+  return (
+    <div style={{ display: 'flex', gap: '2px' }}>
+      {options.map(option => (
+        <button
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          style={{
+            flex: 1,
+            padding: '4px 6px',
+            borderRadius: '4px',
+            border: '1px solid #e4e4e7',
+            backgroundColor: value === option.value ? '#18181b' : '#ffffff',
+            color: value === option.value ? '#fafafa' : '#71717a',
+            cursor: 'pointer',
+            fontSize: '10px',
+            fontWeight: 500,
+            transition: 'all 0.1s ease',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/packages/bobbin/src/components/EditPanel/controls/TokenDropdown.tsx

@@ -0,0 +1,33 @@
+interface TokenDropdownProps {
+  value: string;
+  tokens: Record<string, string>;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function TokenDropdown({ value, tokens, onChange, placeholder = 'Select...' }: TokenDropdownProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      style={{
+        width: '100%',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        border: '1px solid #e4e4e7',
+        backgroundColor: '#ffffff',
+        color: '#18181b',
+        fontSize: '11px',
+        cursor: 'pointer',
+        outline: 'none',
+      }}
+    >
+      <option value="">{placeholder}</option>
+      {Object.entries(tokens).map(([key, tokenValue]) => (
+        <option key={key} value={tokenValue}>
+          {key}: {tokenValue}
+        </option>
+      ))}
+    </select>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/AnnotationSection.tsx

@@ -0,0 +1,136 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { SectionWrapper } from './SectionWrapper';
+
+interface AnnotationSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  onAnnotate: (content: string) => void;
+  existingAnnotation?: string;
+  hasChanges?: boolean;
+}
+
+export function AnnotationSection({
+  expanded,
+  onToggle,
+  onAnnotate,
+  existingAnnotation = '',
+  hasChanges = false,
+}: AnnotationSectionProps) {
+  const [note, setNote] = useState(existingAnnotation);
+  const [isSaved, setIsSaved] = useState(!!existingAnnotation);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Initialize with existing annotation
+  useEffect(() => {
+    setNote(existingAnnotation);
+    setIsSaved(!!existingAnnotation);
+  }, [existingAnnotation]);
+
+  // Auto-save with debounce
+  const handleChange = useCallback((value: string) => {
+    setNote(value);
+    setIsSaved(false);
+
+    // Clear previous timeout
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    // Auto-save after 500ms of no typing
+    if (value.trim()) {
+      debounceRef.current = setTimeout(() => {
+        onAnnotate(value.trim());
+        setIsSaved(true);
+      }, 500);
+    }
+  }, [onAnnotate]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
+  // Save immediately on blur if there's unsaved content
+  const handleBlur = () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    if (note.trim() && !isSaved) {
+      onAnnotate(note.trim());
+      setIsSaved(true);
+    }
+  };
+
+  const showActiveState = !!(note.trim() && isSaved);
+
+  return (
+    <SectionWrapper 
+      title="Annotation" 
+      expanded={expanded} 
+      onToggle={onToggle}
+      hasChanges={hasChanges || showActiveState}
+    >
+      <div
+        style={{
+          position: 'relative',
+          borderRadius: '4px',
+          border: `1px solid ${showActiveState ? '#3b82f6' : '#e4e4e7'}`,
+          backgroundColor: showActiveState ? '#eff6ff' : '#ffffff',
+          transition: 'all 0.15s ease',
+        }}
+      >
+        <textarea
+          ref={textareaRef}
+          value={note}
+          onChange={(e) => handleChange(e.target.value)}
+          onBlur={handleBlur}
+          placeholder="Add a note about this element..."
+          style={{
+            width: '100%',
+            minHeight: '60px',
+            padding: '8px',
+            borderRadius: '4px',
+            border: 'none',
+            backgroundColor: 'transparent',
+            color: '#18181b',
+            fontSize: '11px',
+            resize: 'vertical',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            outline: 'none',
+          }}
+        />
+        {/* Save indicator */}
+        {note.trim() && (
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '4px',
+              right: '4px',
+              fontSize: '9px',
+              color: isSaved ? '#3b82f6' : '#a1a1aa',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2px',
+            }}
+          >
+            {isSaved ? (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+                Saved
+              </>
+            ) : (
+              'Saving...'
+            )}
+          </div>
+        )}
+      </div>
+    </SectionWrapper>
+  );
+}

package/packages/bobbin/src/components/EditPanel/sections/BackgroundSection.tsx

@@ -0,0 +1,79 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { ColorPicker } from '../controls/ColorPicker';
+import { TokenDropdown } from '../controls/TokenDropdown';
+
+interface BackgroundSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function BackgroundSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: BackgroundSectionProps) {
+  const backgroundColor = computedStyle.backgroundColor;
+  const borderColor = computedStyle.borderColor;
+  const borderWidth = computedStyle.borderWidth;
+  const borderRadius = computedStyle.borderRadius;
+
+  return (
+    <SectionWrapper title="Background & Border" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Background Color */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Background
+        </label>
+        <ColorPicker
+          value={backgroundColor}
+          colors={tokens.colors}
+          onChange={(value) => onApplyStyle('background-color', value)}
+        />
+      </div>
+
+      {/* Border Color */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Color
+        </label>
+        <ColorPicker
+          value={borderColor}
+          colors={tokens.colors}
+          onChange={(value) => onApplyStyle('border-color', value)}
+        />
+      </div>
+
+      {/* Border Width */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Width
+        </label>
+        <TokenDropdown
+          value={borderWidth}
+          tokens={tokens.borderWidth}
+          onChange={(value) => onApplyStyle('border-width', value)}
+        />
+      </div>
+
+      {/* Border Radius */}
+      <div>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Radius
+        </label>
+        <TokenDropdown
+          value={borderRadius}
+          tokens={tokens.borderRadius}
+          onChange={(value) => onApplyStyle('border-radius', value)}
+        />
+      </div>
+    </SectionWrapper>
+  );
+}