@aprovan/bobbin 0.1.0

package/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/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>
+  );
+}

package/src/components/EditPanel/sections/EffectsSection.tsx

@@ -0,0 +1,85 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
+import { SliderInput } from '../controls/SliderInput';
+
+interface EffectsSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function EffectsSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: EffectsSectionProps) {
+  const boxShadow = computedStyle.boxShadow;
+  const borderRadius = computedStyle.borderRadius;
+  const borderWidth = computedStyle.borderWidth;
+  const opacity = parseFloat(computedStyle.opacity) * 100;
+
+  return (
+    <SectionWrapper title="Effects" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Border Radius */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Radius
+        </label>
+        <QuickSelectDropdown
+          value={borderRadius}
+          tokens={tokens.borderRadius}
+          quickKeys={['none', 'sm', 'md', 'lg', 'full']}
+          onChange={(value) => onApplyStyle('border-radius', value)}
+        />
+      </div>
+
+      {/* Border Width */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Border Width
+        </label>
+        <QuickSelectDropdown
+          value={borderWidth}
+          tokens={tokens.borderWidth}
+          quickKeys={['0', 'DEFAULT', '2', '4']}
+          onChange={(value) => onApplyStyle('border-width', value)}
+        />
+      </div>
+
+      {/* Box Shadow */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Shadow
+        </label>
+        <QuickSelectDropdown
+          value={boxShadow}
+          tokens={tokens.boxShadow}
+          quickKeys={['none', 'sm', 'md', 'lg']}
+          onChange={(value) => onApplyStyle('box-shadow', value)}
+        />
+      </div>
+
+      {/* Opacity */}
+      <div>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Opacity
+        </label>
+        <SliderInput
+          value={opacity}
+          min={0}
+          max={100}
+          step={1}
+          unit="%"
+          onChange={(value) => onApplyStyle('opacity', String(value / 100))}
+        />
+      </div>
+    </SectionWrapper>
+  );
+}

package/src/components/EditPanel/sections/LayoutSection.tsx

@@ -0,0 +1,224 @@
+import type { DesignTokens } from '../../../types';
+import { SectionWrapper } from './SectionWrapper';
+import { ToggleGroup } from '../controls/ToggleGroup';
+import { TokenDropdown } from '../controls/TokenDropdown';
+
+// Direction icons
+const ArrowRightIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="5" y1="12" x2="19" y2="12" />
+    <polyline points="12 5 19 12 12 19" />
+  </svg>
+);
+
+const ArrowLeftIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="19" y1="12" x2="5" y2="12" />
+    <polyline points="12 19 5 12 12 5" />
+  </svg>
+);
+
+const ArrowDownIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <polyline points="19 12 12 19 5 12" />
+  </svg>
+);
+
+const ArrowUpIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="12" y1="19" x2="12" y2="5" />
+    <polyline points="5 12 12 5 19 12" />
+  </svg>
+);
+
+// Justify icons
+const JustifyStartIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="4" x2="3" y2="20" />
+    <rect x="7" y="8" width="4" height="8" rx="1" />
+    <rect x="13" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyCenterIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="6" y="8" width="4" height="8" rx="1" />
+    <rect x="14" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyEndIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="21" y1="4" x2="21" y2="20" />
+    <rect x="7" y="8" width="4" height="8" rx="1" />
+    <rect x="13" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyBetweenIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="3" y1="4" x2="3" y2="20" />
+    <line x1="21" y1="4" x2="21" y2="20" />
+    <rect x="6" y="8" width="4" height="8" rx="1" />
+    <rect x="14" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+const JustifyAroundIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="4" y="8" width="4" height="8" rx="1" />
+    <rect x="10" y="8" width="4" height="8" rx="1" />
+    <rect x="16" y="8" width="4" height="8" rx="1" />
+  </svg>
+);
+
+// Align icons
+const AlignStartIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="3" x2="20" y2="3" />
+    <rect x="6" y="6" width="4" height="10" rx="1" />
+    <rect x="14" y="6" width="4" height="6" rx="1" />
+  </svg>
+);
+
+const AlignCenterVIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="6" y="5" width="4" height="14" rx="1" />
+    <rect x="14" y="7" width="4" height="10" rx="1" />
+  </svg>
+);
+
+const AlignEndIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="21" x2="20" y2="21" />
+    <rect x="6" y="8" width="4" height="10" rx="1" />
+    <rect x="14" y="12" width="4" height="6" rx="1" />
+  </svg>
+);
+
+const AlignStretchIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="4" y1="3" x2="20" y2="3" />
+    <line x1="4" y1="21" x2="20" y2="21" />
+    <rect x="6" y="6" width="4" height="12" rx="1" />
+    <rect x="14" y="6" width="4" height="12" rx="1" />
+  </svg>
+);
+
+interface LayoutSectionProps {
+  expanded: boolean;
+  onToggle: () => void;
+  computedStyle: CSSStyleDeclaration;
+  onApplyStyle: (property: string, value: string) => void;
+  tokens: DesignTokens;
+  hasChanges?: boolean;
+}
+
+export function LayoutSection({
+  expanded,
+  onToggle,
+  computedStyle,
+  onApplyStyle,
+  tokens,
+  hasChanges = false,
+}: LayoutSectionProps) {
+  const display = computedStyle.display;
+  const flexDirection = computedStyle.flexDirection;
+  const justifyContent = computedStyle.justifyContent;
+  const alignItems = computedStyle.alignItems;
+  const gap = computedStyle.gap;
+
+  const isFlex = display === 'flex' || display === 'inline-flex';
+  const isGrid = display === 'grid' || display === 'inline-grid';
+
+  return (
+    <SectionWrapper title="Layout" expanded={expanded} onToggle={onToggle} hasChanges={hasChanges}>
+      {/* Display */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+          Display
+        </label>
+        <ToggleGroup
+          value={display}
+          options={[
+            { value: 'block', label: 'Block' },
+            { value: 'flex', label: 'Flex' },
+            { value: 'grid', label: 'Grid' },
+            { value: 'inline', label: 'Inline' },
+            { value: 'none', label: 'None' },
+          ]}
+          onChange={(value) => onApplyStyle('display', value)}
+        />
+      </div>
+
+      {/* Flex-specific controls */}
+      {isFlex && (
+        <>
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Direction
+            </label>
+            <ToggleGroup
+              value={flexDirection}
+              options={[
+                { value: 'row', label: <ArrowRightIcon /> },
+                { value: 'row-reverse', label: <ArrowLeftIcon /> },
+                { value: 'column', label: <ArrowDownIcon /> },
+                { value: 'column-reverse', label: <ArrowUpIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('flex-direction', value)}
+            />
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Justify
+            </label>
+            <ToggleGroup
+              value={justifyContent}
+              options={[
+                { value: 'flex-start', label: <JustifyStartIcon /> },
+                { value: 'center', label: <JustifyCenterIcon /> },
+                { value: 'flex-end', label: <JustifyEndIcon /> },
+                { value: 'space-between', label: <JustifyBetweenIcon /> },
+                { value: 'space-around', label: <JustifyAroundIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('justify-content', value)}
+            />
+          </div>
+
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+              Align
+            </label>
+            <ToggleGroup
+              value={alignItems}
+              options={[
+                { value: 'flex-start', label: <AlignStartIcon /> },
+                { value: 'center', label: <AlignCenterVIcon /> },
+                { value: 'flex-end', label: <AlignEndIcon /> },
+                { value: 'stretch', label: <AlignStretchIcon /> },
+              ]}
+              onChange={(value) => onApplyStyle('align-items', value)}
+            />
+          </div>
+        </>
+      )}
+
+      {/* Gap (for flex and grid) */}
+      {(isFlex || isGrid) && (
+        <div style={{ marginBottom: '12px' }}>
+          <label style={{ fontSize: '10px', color: '#71717a', marginBottom: '4px', display: 'block' }}>
+            Gap
+          </label>
+          <TokenDropdown
+            value={gap}
+            tokens={tokens.spacing}
+            onChange={(value) => onApplyStyle('gap', value)}
+          />
+        </div>
+      )}
+    </SectionWrapper>
+  );
+}

package/src/components/EditPanel/sections/SectionWrapper.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+
+interface SectionWrapperProps {
+  title: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+  hasChanges?: boolean;
+}
+
+export function SectionWrapper({ title, expanded, onToggle, children, hasChanges = false }: SectionWrapperProps) {
+  return (
+    <div style={{ borderBottom: '1px solid #f4f4f5' }}>
+      <button
+        onClick={onToggle}
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: hasChanges ? '#eff6ff' : 'transparent',
+          border: 'none',
+          cursor: 'pointer',
+          color: '#18181b',
+          fontSize: '11px',
+          fontWeight: 500,
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}
+      >
+        <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          {title}
+          {hasChanges && (
+            <span
+              style={{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                backgroundColor: '#3b82f6',
+              }}
+              title="Has unsaved changes"
+            />
+          )}
+        </span>
+        <span style={{ fontSize: '10px', color: '#a1a1aa' }}>
+          {expanded ? '▲' : '▼'}
+        </span>
+      </button>
+      {expanded && (
+        <div style={{ padding: '0 12px 12px' }}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}