@aprovan/bobbin 0.1.0

package/src/components/Overlay/MarginPaddingOverlay.tsx

@@ -0,0 +1,229 @@
+import type { SelectedElement } from '../../types';
+
+interface MarginPaddingOverlayProps {
+  selectedElement: SelectedElement;
+  zIndex?: number;
+}
+
+export function MarginPaddingOverlay({
+  selectedElement,
+  zIndex = 9997,
+}: MarginPaddingOverlayProps) {
+  const { element, rect } = selectedElement;
+  const computed = window.getComputedStyle(element);
+
+  const margin = {
+    top: parseFloat(computed.marginTop) || 0,
+    right: parseFloat(computed.marginRight) || 0,
+    bottom: parseFloat(computed.marginBottom) || 0,
+    left: parseFloat(computed.marginLeft) || 0,
+  };
+
+  const padding = {
+    top: parseFloat(computed.paddingTop) || 0,
+    right: parseFloat(computed.paddingRight) || 0,
+    bottom: parseFloat(computed.paddingBottom) || 0,
+    left: parseFloat(computed.paddingLeft) || 0,
+  };
+
+  // Get gap information
+  const gap = parseFloat(computed.gap) || 0;
+  const rowGap = parseFloat(computed.rowGap) || gap;
+  const columnGap = parseFloat(computed.columnGap) || gap;
+  const display = computed.display;
+  const flexDirection = computed.flexDirection;
+  const isFlexOrGrid = display.includes('flex') || display.includes('grid');
+  const isColumn = flexDirection === 'column' || flexDirection === 'column-reverse';
+
+  // Margin color: orange tint
+  const marginColor = 'rgba(251, 146, 60, 0.3)';
+  // Padding color: green tint
+  const paddingColor = 'rgba(74, 222, 128, 0.3)';
+  // Gap color: purple tint
+  const gapColor = 'rgba(168, 85, 247, 0.35)';
+
+  // Get visible children and their rects
+  const getGapOverlays = () => {
+    if (!isFlexOrGrid || (rowGap === 0 && columnGap === 0)) return [];
+    
+    const children = Array.from(element.children).filter(
+      child => child instanceof HTMLElement && 
+               getComputedStyle(child).display !== 'none' &&
+               getComputedStyle(child).visibility !== 'hidden'
+    ) as HTMLElement[];
+    
+    if (children.length < 2) return [];
+    
+    const overlays: Array<{ top: number; left: number; width: number; height: number }> = [];
+    
+    for (let i = 0; i < children.length - 1; i++) {
+      const currentChild = children[i];
+      const nextChild = children[i + 1];
+      if (!currentChild || !nextChild) continue;
+      
+      const currentRect = currentChild.getBoundingClientRect();
+      const nextRect = nextChild.getBoundingClientRect();
+      
+      if (isColumn || display.includes('grid')) {
+        // For column flex or grid, show row gaps (vertical gaps between rows)
+        if (rowGap > 0 && nextRect.top > currentRect.bottom) {
+          const gapTop = currentRect.bottom;
+          const gapHeight = Math.min(rowGap, nextRect.top - currentRect.bottom);
+          if (gapHeight > 0) {
+            overlays.push({
+              top: gapTop,
+              left: rect.left + padding.left,
+              width: rect.width - padding.left - padding.right,
+              height: gapHeight,
+            });
+          }
+        }
+      }
+      
+      if (!isColumn || display.includes('grid')) {
+        // For row flex or grid, show column gaps (horizontal gaps between columns)
+        if (columnGap > 0 && nextRect.left > currentRect.right) {
+          const gapLeft = currentRect.right;
+          const gapWidth = Math.min(columnGap, nextRect.left - currentRect.right);
+          if (gapWidth > 0) {
+            overlays.push({
+              top: rect.top + padding.top,
+              left: gapLeft,
+              width: gapWidth,
+              height: rect.height - padding.top - padding.bottom,
+            });
+          }
+        }
+      }
+    }
+    
+    return overlays;
+  };
+
+  const gapOverlays = getGapOverlays();
+
+  return (
+    <div data-bobbin="margin-padding-overlay" style={{ position: 'fixed', top: 0, left: 0, zIndex, pointerEvents: 'none' }}>
+      {/* Top margin */}
+      {margin.top > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top - margin.top,
+            left: rect.left,
+            width: rect.width,
+            height: margin.top,
+            backgroundColor: marginColor,
+          }}
+        />
+      )}
+      {/* Bottom margin */}
+      {margin.bottom > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.bottom,
+            left: rect.left,
+            width: rect.width,
+            height: margin.bottom,
+            backgroundColor: marginColor,
+          }}
+        />
+      )}
+      {/* Left margin */}
+      {margin.left > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top,
+            left: rect.left - margin.left,
+            width: margin.left,
+            height: rect.height,
+            backgroundColor: marginColor,
+          }}
+        />
+      )}
+      {/* Right margin */}
+      {margin.right > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top,
+            left: rect.right,
+            width: margin.right,
+            height: rect.height,
+            backgroundColor: marginColor,
+          }}
+        />
+      )}
+
+      {/* Top padding */}
+      {padding.top > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: padding.top,
+            backgroundColor: paddingColor,
+          }}
+        />
+      )}
+      {/* Bottom padding */}
+      {padding.bottom > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.bottom - padding.bottom,
+            left: rect.left,
+            width: rect.width,
+            height: padding.bottom,
+            backgroundColor: paddingColor,
+          }}
+        />
+      )}
+      {/* Left padding */}
+      {padding.left > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top + padding.top,
+            left: rect.left,
+            width: padding.left,
+            height: rect.height - padding.top - padding.bottom,
+            backgroundColor: paddingColor,
+          }}
+        />
+      )}
+      {/* Right padding */}
+      {padding.right > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: rect.top + padding.top,
+            left: rect.right - padding.right,
+            width: padding.right,
+            height: rect.height - padding.top - padding.bottom,
+            backgroundColor: paddingColor,
+          }}
+        />
+      )}
+
+      {/* Gap overlays */}
+      {gapOverlays.map((overlay, index) => (
+        <div
+          key={`gap-${index}`}
+          style={{
+            position: 'fixed',
+            top: overlay.top,
+            left: overlay.left,
+            width: overlay.width,
+            height: overlay.height,
+            backgroundColor: gapColor,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/Overlay/SelectionOverlay.tsx

@@ -0,0 +1,73 @@
+import { useLayoutEffect, useState } from 'react';
+import type { SelectedElement } from '../../types';
+
+interface SelectionOverlayProps {
+  hoveredElement: SelectedElement | null;
+  selectedElement: SelectedElement | null;
+  offset?: number;
+  zIndex?: number;
+}
+
+export function SelectionOverlay({
+  hoveredElement,
+  selectedElement,
+  offset = 4,
+  zIndex = 9998,
+}: SelectionOverlayProps) {
+  const [hoverRect, setHoverRect] = useState<DOMRect | null>(null);
+  const [selectRect, setSelectRect] = useState<DOMRect | null>(null);
+
+  // Animate hover box
+  useLayoutEffect(() => {
+    if (!hoveredElement || hoveredElement === selectedElement) {
+      setHoverRect(null);
+      return;
+    }
+    setHoverRect(hoveredElement.rect);
+  }, [hoveredElement, selectedElement]);
+
+  // Animate selection box
+  useLayoutEffect(() => {
+    if (!selectedElement) {
+      setSelectRect(null);
+      return;
+    }
+    setSelectRect(selectedElement.rect);
+  }, [selectedElement]);
+
+  // ShadCN-style: subtle dark gray for hover, black for selection
+  const createBoxStyle = (rect: DOMRect | null, isSelected: boolean): React.CSSProperties => {
+    if (!rect) return { opacity: 0, pointerEvents: 'none' };
+    
+    return {
+      position: 'fixed',
+      top: rect.top - offset,
+      left: rect.left - offset,
+      width: rect.width + offset * 2,
+      height: rect.height + offset * 2,
+      border: isSelected ? '1.5px solid #18181b' : '1.5px dashed #71717a',
+      borderRadius: '3px',
+      pointerEvents: 'none',
+      zIndex,
+      transition: 'all 0.12s cubic-bezier(0.4, 0, 0.2, 1)',
+      opacity: 1,
+      boxShadow: isSelected ? '0 0 0 1px rgba(24, 24, 27, 0.1)' : 'none',
+    };
+  };
+
+  return (
+    <>
+      {/* Hover overlay */}
+      <div
+        data-bobbin="hover-overlay"
+        style={createBoxStyle(hoverRect, false)}
+      />
+
+      {/* Selection overlay */}
+      <div
+        data-bobbin="select-overlay"
+        style={createBoxStyle(selectRect, true)}
+      />
+    </>
+  );
+}

package/src/components/Pill/Pill.tsx

@@ -0,0 +1,155 @@
+import { useState, useLayoutEffect } from 'react';
+import type { BobbinState, BobbinActions } from '../../types';
+
+interface PillProps {
+  state: BobbinState;
+  actions: BobbinActions;
+  position?: { bottom: number; right: number };
+  container?: HTMLElement | null;
+  zIndex?: number;
+}
+
+// Copy icon
+const CopyIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+  </svg>
+);
+
+// Edit icon (pencil)
+const EditIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+  </svg>
+);
+
+export function Pill({ state, actions, position, container, zIndex = 9999 }: PillProps) {
+  const [copyHovered, setCopyHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [computedPosition, setComputedPosition] = useState<{ bottom: number; right: number } | null>(null);
+  
+  const offset = position ?? { bottom: 16, right: 16 };
+
+  // Calculate position relative to container if provided
+  useLayoutEffect(() => {
+    if (!container) {
+      setComputedPosition(null);
+      return;
+    }
+
+    const updatePosition = () => {
+      const rect = container.getBoundingClientRect();
+      // Position from viewport edges based on container position
+      setComputedPosition({
+        bottom: window.innerHeight - rect.bottom + offset.bottom,
+        right: window.innerWidth - rect.right + offset.right,
+      });
+    };
+
+    updatePosition();
+    
+    // Update on resize/scroll
+    const observer = new ResizeObserver(updatePosition);
+    observer.observe(container);
+    window.addEventListener('scroll', updatePosition, true);
+    
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [container, offset.bottom, offset.right]);
+
+  const pos = computedPosition ?? offset;
+
+  const handleClick = () => {
+    if (state.isActive) {
+      actions.deactivate();
+    } else {
+      actions.activate();
+    }
+  };
+
+  const handleCopyChanges = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const yaml = actions.exportChanges();
+    navigator.clipboard.writeText(yaml);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  // ShadCN-style: minimal black/white with subtle borders
+  return (
+    <div
+      data-bobbin="pill"
+      className="bobbin-pill"
+      style={{
+        position: 'fixed',
+        bottom: pos.bottom,
+        right: pos.right,
+        zIndex,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '6px 10px',
+        borderRadius: '9999px',
+        backgroundColor: state.isActive ? '#18181b' : '#fafafa',
+        color: state.isActive ? '#fafafa' : '#18181b',
+        border: '1px solid #e4e4e7',
+        cursor: 'pointer',
+        boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        transition: 'all 0.15s ease',
+        userSelect: 'none',
+        fontSize: '13px',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+      }}
+      onClick={handleClick}
+    >
+      {/* Edit Icon */}
+      <EditIcon />
+
+      {/* Change count badge with copy button - shows for changes OR annotations */}
+      {(state.changes.length > 0 || state.annotations.length > 0) && (
+        <button
+          onClick={handleCopyChanges}
+          onMouseEnter={() => setCopyHovered(true)}
+          onMouseLeave={() => setCopyHovered(false)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '2px 6px',
+            borderRadius: '9999px',
+            backgroundColor: state.isActive ? '#fafafa' : '#18181b',
+            color: state.isActive ? '#18181b' : '#fafafa',
+            fontSize: '11px',
+            fontWeight: 500,
+            border: 'none',
+            cursor: 'pointer',
+            transition: 'all 0.1s ease',
+          }}
+          title="Copy changes as YAML"
+        >
+          <span>{state.changes.length + state.annotations.length}</span>
+          {copyHovered && <CopyIcon />}
+          {copied && <span style={{ fontSize: '10px' }}>✓</span>}
+        </button>
+      )}
+
+      {/* Clipboard indicator */}
+      {state.clipboard && (
+        <div
+          style={{
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            backgroundColor: state.isActive ? '#fafafa' : '#18181b',
+            border: '1px solid #a1a1aa',
+          }}
+          title="Element copied"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,72 @@
+interface ThemeToggleProps {
+  theme: 'light' | 'dark' | 'system';
+  onToggle: () => void;
+  zIndex?: number;
+}
+
+// Sun icon for light theme
+const SunIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+);
+
+// Moon icon for dark theme
+const MoonIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
+// Monitor icon for system theme
+const MonitorIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+    <line x1="8" y1="21" x2="16" y2="21" />
+    <line x1="12" y1="17" x2="12" y2="21" />
+  </svg>
+);
+
+export function ThemeToggle({ theme, onToggle, zIndex = 9999 }: ThemeToggleProps) {
+  const icons = {
+    light: <SunIcon />,
+    dark: <MoonIcon />,
+    system: <MonitorIcon />,
+  };
+
+  return (
+    <button
+      data-bobbin="theme-toggle"
+      onClick={onToggle}
+      style={{
+        position: 'fixed',
+        bottom: '24px',
+        left: '24px',
+        width: '32px',
+        height: '32px',
+        borderRadius: '8px',
+        border: '1px solid #e4e4e7',
+        backgroundColor: '#fafafa',
+        color: '#18181b',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '14px',
+        boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        zIndex,
+      }}
+      title={`Theme: ${theme}`}
+    >
+      {icons[theme]}
+    </button>
+  );
+}

package/src/core/changeSerializer.ts

@@ -0,0 +1,139 @@
+import type { Change, Annotation, BobbinChangeset } from '../types';
+
+export function serializeChangesToYAML(
+  changes: Change[],
+  annotations: Annotation[] = [],
+): string {
+  const changeset: BobbinChangeset = {
+    version: '1.0',
+    timestamp: new Date().toISOString(),
+    changeCount: changes.length + annotations.length,
+    changes: changes.map((change) => {
+      const base = {
+        type: change.type,
+        target: change.target.path,
+        xpath: change.target.xpath,
+      };
+
+      switch (change.type) {
+        case 'style':
+          return {
+            ...base,
+            property: (change.before as { property: string }).property,
+            before: (change.before as { value: string }).value,
+            after: (change.after as { value: string }).value,
+          };
+        case 'text':
+          return {
+            ...base,
+            before: change.before as string,
+            after: change.after as string,
+          };
+        case 'move':
+          return {
+            ...base,
+            before: `${(change.before as { parent: string }).parent}[${
+              (change.before as { index: number }).index
+            }]`,
+            after: `${(change.after as { parent: string }).parent}[${
+              (change.after as { index: number }).index
+            }]`,
+          };
+        default:
+          return {
+            ...base,
+            before: JSON.stringify(change.before),
+            after: JSON.stringify(change.after),
+          };
+      }
+    }),
+    annotations: annotations.map((a) => ({
+      type: 'annotation',
+      target: a.elementPath,
+      xpath: a.elementXpath,
+      note: a.content,
+    })),
+  };
+
+  return toYAML(changeset);
+}
+
+function toYAML(obj: unknown, indent = 0): string {
+  const spaces = '  '.repeat(indent);
+
+  if (obj === null || obj === undefined) return 'null';
+  if (typeof obj === 'boolean') return obj ? 'true' : 'false';
+  if (typeof obj === 'number') return String(obj);
+  if (typeof obj === 'string') {
+    // Escape strings that need quoting
+    if (/[\n:{}[\],&*#?|\-<>=!%@`]/.test(obj) || obj.trim() !== obj) {
+      return `"${obj.replace(/"/g, '\\"').replace(/\n/g, '\\n')}"`;
+    }
+    return obj || '""';
+  }
+
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return '[]';
+    return obj
+      .map((item) => {
+        const itemYaml = toYAML(item, indent + 1);
+        if (typeof item === 'object' && item !== null) {
+          return `${spaces}- ${itemYaml.trimStart()}`;
+        }
+        return `${spaces}- ${itemYaml}`;
+      })
+      .join('\n');
+  }
+
+  if (typeof obj === 'object') {
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return '{}';
+    return entries
+      .map(([key, value]) => {
+        const valueYaml = toYAML(value, indent + 1);
+        if (
+          typeof value === 'object' &&
+          value !== null &&
+          !Array.isArray(value)
+        ) {
+          return `${spaces}${key}:\n${valueYaml}`;
+        }
+        if (Array.isArray(value) && value.length > 0) {
+          return `${spaces}${key}:\n${valueYaml}`;
+        }
+        return `${spaces}${key}: ${valueYaml}`;
+      })
+      .join('\n');
+  }
+
+  return String(obj);
+}
+
+export function parseYAMLChangeset(yaml: string): BobbinChangeset {
+  // Basic YAML parser for the changeset format
+  // For production, consider using js-yaml
+  const lines = yaml.split('\n');
+  const result: BobbinChangeset = {
+    version: '1.0',
+    timestamp: '',
+    changeCount: 0,
+    changes: [],
+    annotations: [],
+  };
+
+  // Simplified parser - in production use js-yaml
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('version:')) {
+      const parts = trimmed.split(':');
+      result.version = (parts[1]?.trim() ?? '1.0') as '1.0';
+    } else if (trimmed.startsWith('timestamp:')) {
+      result.timestamp = trimmed.split(':').slice(1).join(':').trim();
+    } else if (trimmed.startsWith('changeCount:')) {
+      const parts = trimmed.split(':');
+      result.changeCount = parseInt(parts[1]?.trim() ?? '0', 10);
+    }
+  }
+
+  return result;
+}