@aprovan/bobbin 0.1.0

package/src/core/useBobbin.ts

@@ -0,0 +1,399 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import type {
+  BobbinState,
+  BobbinActions,
+  BobbinProps,
+  DesignTokens,
+  Annotation,
+} from '../types';
+import { useElementSelection } from './useElementSelection';
+import { useChangeTracker } from './useChangeTracker';
+import { useClipboard } from './useClipboard';
+import { serializeChangesToYAML } from './changeSerializer';
+import { defaultTokens } from '../tokens';
+import { getElementPath, getElementXPath } from '../utils/selectors';
+import { applyStyleToElement, enableContentEditable } from '../utils/dom';
+
+export function useBobbin(props: BobbinProps = {}) {
+  const {
+    tokens: customTokens,
+    container,
+    defaultActive = false,
+    onChanges,
+    onSelect,
+    exclude = [],
+  } = props;
+
+  const [isActive, setIsActive] = useState(defaultActive);
+  const [isPillExpanded, setIsPillExpanded] = useState(false);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [showMarginPadding, setShowMarginPadding] = useState(false);
+  const [activePanel, setActivePanel] = useState<'style' | 'inspector' | null>(
+    'style',
+  );
+  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system');
+
+  // Merge tokens
+  const tokens = useMemo<DesignTokens>(
+    () => ({
+      ...defaultTokens,
+      ...customTokens,
+    }),
+    [customTokens],
+  );
+
+  // Element selection
+  const { hoveredElement, selectedElement, selectElement, clearSelection } =
+    useElementSelection({
+      container,
+      exclude: [...exclude, '[data-bobbin]'],
+      enabled: isActive,
+    });
+
+  // Change tracking
+  const changeTracker = useChangeTracker();
+
+  // Clipboard
+  const clipboard = useClipboard();
+
+  // Enable contenteditable on selection
+  useEffect(() => {
+    if (selectedElement) {
+      enableContentEditable(selectedElement.element, true);
+      return () => enableContentEditable(selectedElement.element, false);
+    }
+  }, [selectedElement]);
+
+  // Notify on changes
+  useEffect(() => {
+    onChanges?.(changeTracker.changes);
+  }, [changeTracker.changes, onChanges]);
+
+  // Notify on selection
+  useEffect(() => {
+    onSelect?.(selectedElement);
+  }, [selectedElement, onSelect]);
+
+  // Theme management
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+      root.style.colorScheme = 'dark';
+    } else if (theme === 'light') {
+      root.classList.remove('dark');
+      root.style.colorScheme = 'light';
+    } else {
+      // System preference
+      const prefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+      root.classList.toggle('dark', prefersDark);
+      root.style.colorScheme = prefersDark ? 'dark' : 'light';
+    }
+  }, [theme]);
+
+  // Actions
+  const activate = useCallback(() => setIsActive(true), []);
+  const deactivate = useCallback(() => {
+    setIsActive(false);
+    clearSelection();
+  }, [clearSelection]);
+
+  const applyStyle = useCallback(
+    (property: string, value: string) => {
+      if (!selectedElement) return;
+
+      const el = selectedElement.element;
+      const originalValue = getComputedStyle(el).getPropertyValue(property);
+
+      applyStyleToElement(el, property, value);
+      changeTracker.recordStyleChange(
+        selectedElement.path,
+        selectedElement.xpath,
+        selectedElement.tagName,
+        property,
+        value,
+        originalValue,
+      );
+    },
+    [selectedElement, changeTracker],
+  );
+
+  const deleteElement = useCallback(() => {
+    if (!selectedElement) return;
+
+    const el = selectedElement.element;
+    const parent = el.parentElement;
+    if (!parent) return;
+
+    changeTracker.recordChange(
+      'delete',
+      selectedElement.path,
+      selectedElement.xpath,
+      selectedElement.tagName,
+      el.outerHTML,
+      null,
+    );
+
+    el.remove();
+    clearSelection();
+  }, [selectedElement, changeTracker, clearSelection]);
+
+  const moveElement = useCallback(
+    (targetParent: HTMLElement, index: number) => {
+      if (!selectedElement) return;
+
+      const el = selectedElement.element;
+      const fromParent = el.parentElement;
+      if (!fromParent) return;
+
+      const fromIndex = Array.from(fromParent.children).indexOf(el);
+      const fromPath = getElementPath(fromParent);
+      const toPath = getElementPath(targetParent);
+
+      if (index >= targetParent.children.length) {
+        targetParent.appendChild(el);
+      } else {
+        const referenceNode = targetParent.children[index] ?? null;
+        targetParent.insertBefore(el, referenceNode);
+      }
+
+      changeTracker.recordMoveChange(
+        selectedElement.path,
+        selectedElement.xpath,
+        selectedElement.tagName,
+        fromPath,
+        fromIndex,
+        toPath,
+        index,
+      );
+    },
+    [selectedElement, changeTracker],
+  );
+
+  const duplicateElement = useCallback(() => {
+    if (!selectedElement) return;
+
+    const el = selectedElement.element;
+    const clone = el.cloneNode(true) as HTMLElement;
+    const parent = el.parentElement;
+
+    if (parent) {
+      parent.insertBefore(clone, el.nextSibling);
+    }
+
+    changeTracker.recordChange(
+      'duplicate',
+      selectedElement.path,
+      selectedElement.xpath,
+      selectedElement.tagName,
+      null,
+      clone.outerHTML,
+    );
+
+    // Select the newly duplicated element
+    selectElement(clone);
+  }, [selectedElement, changeTracker, selectElement]);
+
+  const insertElement = useCallback(
+    (direction: 'before' | 'after' | 'child', content = '') => {
+      if (!selectedElement) return;
+
+      const el = selectedElement.element;
+      const newEl = document.createElement('span');
+      newEl.textContent = content || '\u200B'; // Zero-width space if empty
+      newEl.contentEditable = 'true';
+
+      if (direction === 'child') {
+        el.appendChild(newEl);
+      } else if (direction === 'before') {
+        el.parentElement?.insertBefore(newEl, el);
+      } else {
+        el.parentElement?.insertBefore(newEl, el.nextSibling);
+      }
+
+      changeTracker.recordChange(
+        'insert',
+        getElementPath(newEl),
+        getElementXPath(newEl),
+        'span',
+        null,
+        newEl.outerHTML,
+        { direction },
+      );
+
+      // Select the newly inserted element
+      selectElement(newEl);
+    },
+    [selectedElement, changeTracker, selectElement],
+  );
+
+  const copyElement = useCallback(() => {
+    if (!selectedElement) return;
+    clipboard.copy(selectedElement);
+  }, [selectedElement, clipboard]);
+
+  const pasteElement = useCallback(
+    (direction: 'before' | 'after' | 'child') => {
+      if (!selectedElement || !clipboard.copied) return;
+
+      const el = selectedElement.element;
+      const clone = clipboard.copied.element.cloneNode(true) as HTMLElement;
+
+      if (direction === 'child') {
+        el.appendChild(clone);
+      } else if (direction === 'before') {
+        el.parentElement?.insertBefore(clone, el);
+      } else {
+        el.parentElement?.insertBefore(clone, el.nextSibling);
+      }
+
+      changeTracker.recordChange(
+        'insert',
+        getElementPath(clone),
+        getElementXPath(clone),
+        clone.tagName.toLowerCase(),
+        null,
+        clone.outerHTML,
+        { source: 'paste', direction },
+      );
+
+      // Select the newly pasted element
+      selectElement(clone);
+    },
+    [selectedElement, clipboard, changeTracker, selectElement],
+  );
+
+  const annotate = useCallback(
+    (content: string) => {
+      if (!selectedElement) return;
+
+      setAnnotations((prev) => {
+        // Check if annotation already exists for this element
+        const existingIndex = prev.findIndex(
+          (a) => a.elementPath === selectedElement.path,
+        );
+
+        if (existingIndex >= 0) {
+          const existing = prev[existingIndex];
+          if (!existing) return prev;
+
+          // Update existing annotation
+          if (!content.trim()) {
+            // Remove annotation if content is empty
+            return prev.filter((_, i) => i !== existingIndex);
+          }
+          const updated = [...prev];
+          updated[existingIndex] = {
+            id: existing.id,
+            elementPath: existing.elementPath,
+            elementXpath: existing.elementXpath,
+            content,
+            createdAt: Date.now(),
+          };
+          return updated;
+        } else if (content.trim()) {
+          // Add new annotation only if content is not empty
+          const annotation: Annotation = {
+            id: crypto.randomUUID(),
+            elementPath: selectedElement.path,
+            elementXpath: selectedElement.xpath,
+            content,
+            createdAt: Date.now(),
+          };
+          return [...prev, annotation];
+        }
+        return prev;
+      });
+    },
+    [selectedElement],
+  );
+
+  const toggleMarginPadding = useCallback(() => {
+    setShowMarginPadding((prev) => !prev);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => {
+      if (prev === 'light') return 'dark';
+      if (prev === 'dark') return 'system';
+      return 'light';
+    });
+  }, []);
+
+  const undo = useCallback(() => {
+    const lastChange = changeTracker.undo();
+    if (!lastChange) return;
+
+    // TODO: Implement actual undo logic based on change type
+    console.log('Undoing:', lastChange);
+  }, [changeTracker]);
+
+  // Reset all style changes by reverting to original values
+  const resetChanges = useCallback(() => {
+    const originalStates = changeTracker.originalStates;
+
+    // Revert all changes by applying original values
+    for (const [path, properties] of originalStates.entries()) {
+      // Find the element by path
+      const el = document.querySelector(path) as HTMLElement;
+      if (!el) continue;
+
+      for (const [property, originalValue] of properties.entries()) {
+        applyStyleToElement(el, property, originalValue);
+      }
+    }
+
+    changeTracker.clearChanges();
+  }, [changeTracker]);
+
+  const exportChanges = useCallback(() => {
+    return serializeChangesToYAML(
+      changeTracker.deduplicatedChanges,
+      annotations,
+    );
+  }, [changeTracker.deduplicatedChanges, annotations]);
+
+  const state: BobbinState = {
+    isActive,
+    isPillExpanded,
+    hoveredElement,
+    selectedElement,
+    changes: changeTracker.deduplicatedChanges,
+    annotations,
+    clipboard: clipboard.copied,
+    showMarginPadding,
+    activePanel,
+    theme,
+  };
+
+  const actions: BobbinActions = {
+    activate,
+    deactivate,
+    selectElement,
+    clearSelection,
+    applyStyle,
+    deleteElement,
+    moveElement,
+    duplicateElement,
+    insertElement,
+    copyElement,
+    pasteElement,
+    annotate,
+    toggleMarginPadding,
+    toggleTheme,
+    undo,
+    exportChanges,
+    getChanges: changeTracker.getChanges,
+    resetChanges,
+  };
+
+  return {
+    ...state,
+    ...actions,
+    tokens,
+    setActivePanel,
+    setIsPillExpanded,
+  };
+}

package/src/core/useChangeTracker.ts

@@ -0,0 +1,186 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import type {
+  Change,
+  StyleChange,
+  TextChange,
+  MoveChange,
+  ChangeType,
+} from '../types';
+import { generateId } from '../utils/selectors';
+
+export function useChangeTracker() {
+  const [changes, setChanges] = useState<Change[]>([]);
+  const historyRef = useRef<Change[]>([]);
+  const originalStatesRef = useRef<Map<string, Map<string, string>>>(new Map());
+
+  const recordOriginalState = useCallback(
+    (path: string, property: string, value: string) => {
+      if (!originalStatesRef.current.has(path)) {
+        originalStatesRef.current.set(path, new Map());
+      }
+      const elementState = originalStatesRef.current.get(path)!;
+      if (!elementState.has(property)) {
+        elementState.set(property, value);
+      }
+    },
+    [],
+  );
+
+  const addChange = useCallback(
+    <T extends Change>(change: Omit<T, 'id' | 'timestamp'>) => {
+      const fullChange = {
+        ...change,
+        id: generateId(),
+        timestamp: Date.now(),
+      } as T;
+
+      setChanges((prev) => [...prev, fullChange]);
+      historyRef.current.push(fullChange);
+      return fullChange;
+    },
+    [],
+  );
+
+  const recordStyleChange = useCallback(
+    (
+      path: string,
+      xpath: string,
+      tagName: string,
+      property: string,
+      value: string,
+      originalValue: string,
+    ): StyleChange => {
+      recordOriginalState(path, property, originalValue);
+
+      return addChange<StyleChange>({
+        type: 'style',
+        target: { path, xpath, tagName },
+        before: { property, value: originalValue },
+        after: { property, value },
+      });
+    },
+    [addChange, recordOriginalState],
+  );
+
+  const recordTextChange = useCallback(
+    (
+      path: string,
+      xpath: string,
+      tagName: string,
+      originalText: string,
+      newText: string,
+    ): TextChange => {
+      return addChange<TextChange>({
+        type: 'text',
+        target: { path, xpath, tagName },
+        before: originalText,
+        after: newText,
+      });
+    },
+    [addChange],
+  );
+
+  const recordMoveChange = useCallback(
+    (
+      path: string,
+      xpath: string,
+      tagName: string,
+      fromParent: string,
+      fromIndex: number,
+      toParent: string,
+      toIndex: number,
+    ): MoveChange => {
+      return addChange<MoveChange>({
+        type: 'move',
+        target: { path, xpath, tagName },
+        before: { parent: fromParent, index: fromIndex },
+        after: { parent: toParent, index: toIndex },
+      });
+    },
+    [addChange],
+  );
+
+  const recordChange = useCallback(
+    (
+      type: ChangeType,
+      path: string,
+      xpath: string,
+      tagName: string,
+      before: unknown,
+      after: unknown,
+      metadata?: Record<string, unknown>,
+    ) => {
+      return addChange({
+        type,
+        target: { path, xpath, tagName },
+        before,
+        after,
+        metadata,
+      });
+    },
+    [addChange],
+  );
+
+  const undo = useCallback(() => {
+    if (changes.length === 0) return null;
+
+    const lastChange = changes[changes.length - 1];
+    setChanges((prev) => prev.slice(0, -1));
+    return lastChange;
+  }, [changes]);
+
+  const clearChanges = useCallback(() => {
+    setChanges([]);
+    originalStatesRef.current.clear();
+  }, []);
+
+  const getChanges = useCallback(() => [...changes], [changes]);
+
+  // Deduplicated changes - only count unique (element + property) combinations
+  // This prevents counting every keystroke as a separate change
+  const deduplicatedChanges = useMemo(() => {
+    const uniqueChanges = new Map<string, Change>();
+
+    for (const change of changes) {
+      let key: string;
+
+      if (change.type === 'style') {
+        const styleChange = change as StyleChange;
+        key = `${change.target.path}:style:${styleChange.after.property}`;
+      } else {
+        key = `${change.target.path}:${change.type}:${change.id}`;
+      }
+
+      // Check if the value has changed back to original
+      if (change.type === 'style') {
+        const styleChange = change as StyleChange;
+        const originalValue = originalStatesRef.current
+          .get(change.target.path)
+          ?.get(styleChange.after.property);
+        if (originalValue === styleChange.after.value) {
+          // Value is back to original, remove from unique changes
+          uniqueChanges.delete(key);
+          continue;
+        }
+      }
+
+      uniqueChanges.set(key, change);
+    }
+
+    return Array.from(uniqueChanges.values());
+  }, [changes]);
+
+  return {
+    changes,
+    deduplicatedChanges,
+    changeCount: deduplicatedChanges.length,
+    recordStyleChange,
+    recordTextChange,
+    recordMoveChange,
+    recordChange,
+    undo,
+    clearChanges,
+    getChanges,
+    originalStates: originalStatesRef.current,
+  };
+}

package/src/core/useClipboard.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+import type { SelectedElement } from '../types';
+
+export function useClipboard() {
+  const [copied, setCopied] = useState<SelectedElement | null>(null);
+
+  const copy = useCallback((element: SelectedElement) => {
+    setCopied(element);
+  }, []);
+
+  const clear = useCallback(() => {
+    setCopied(null);
+  }, []);
+
+  return {
+    copied,
+    copy,
+    clear,
+    hasCopied: copied !== null,
+  };
+}