@aprovan/bobbin 0.1.0-dev.6bd527d

package/src/core/useElementSelection.ts

@@ -0,0 +1,146 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { SelectedElement } from '../types';
+import { getElementPath, getElementXPath } from '../utils/selectors';
+
+export interface UseElementSelectionOptions {
+  container?: HTMLElement | null;
+  exclude?: string[];
+  enabled?: boolean;
+}
+
+export function useElementSelection(options: UseElementSelectionOptions) {
+  const { container, exclude = [], enabled = true } = options;
+
+  const [hoveredElement, setHoveredElement] = useState<SelectedElement | null>(
+    null,
+  );
+  const [selectedElement, setSelectedElement] =
+    useState<SelectedElement | null>(null);
+  const lastRectRef = useRef<DOMRect | null>(null);
+
+  const isExcluded = useCallback(
+    (el: HTMLElement): boolean => {
+      // Exclude bobbin elements themselves
+      if (el.closest('[data-bobbin]')) return true;
+      // Exclude user-specified selectors
+      return exclude.some(
+        (selector) => el.matches(selector) || el.closest(selector),
+      );
+    },
+    [exclude],
+  );
+
+  const createSelectedElement = useCallback(
+    (el: HTMLElement): SelectedElement => {
+      return {
+        element: el,
+        rect: el.getBoundingClientRect(),
+        path: getElementPath(el),
+        xpath: getElementXPath(el),
+        tagName: el.tagName.toLowerCase(),
+        id: el.id || undefined,
+        classList: Array.from(el.classList),
+      };
+    },
+    [],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!enabled) return;
+
+      const target = document.elementFromPoint(
+        e.clientX,
+        e.clientY,
+      ) as HTMLElement | null;
+      if (!target || isExcluded(target)) {
+        setHoveredElement(null);
+        return;
+      }
+
+      // Check if within container bounds
+      if (container && !container.contains(target)) {
+        setHoveredElement(null);
+        return;
+      }
+
+      setHoveredElement(createSelectedElement(target));
+    },
+    [enabled, container, isExcluded, createSelectedElement],
+  );
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      if (!enabled) return;
+
+      // Don't intercept clicks on bobbin UI elements
+      const target = e.target as HTMLElement;
+      if (target.closest('[data-bobbin]')) {
+        return;
+      }
+
+      if (!hoveredElement) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      setSelectedElement(hoveredElement);
+      lastRectRef.current = hoveredElement.rect;
+    },
+    [enabled, hoveredElement],
+  );
+
+  const clearSelection = useCallback(() => {
+    setSelectedElement(null);
+    setHoveredElement(null);
+  }, []);
+
+  const selectElement = useCallback(
+    (el: HTMLElement | null) => {
+      if (!el) {
+        clearSelection();
+        return;
+      }
+      setSelectedElement(createSelectedElement(el));
+    },
+    [createSelectedElement, clearSelection],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    document.addEventListener('mousemove', handleMouseMove, { passive: true });
+    document.addEventListener('click', handleClick, { capture: true });
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('click', handleClick, { capture: true });
+    };
+  }, [enabled, handleMouseMove, handleClick]);
+
+  // Update rect on scroll/resize
+  useEffect(() => {
+    if (!selectedElement) return;
+
+    const updateRect = () => {
+      const newRect = selectedElement.element.getBoundingClientRect();
+      setSelectedElement((prev) => (prev ? { ...prev, rect: newRect } : null));
+    };
+
+    window.addEventListener('scroll', updateRect, { passive: true });
+    window.addEventListener('resize', updateRect, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', updateRect);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [selectedElement?.element]);
+
+  return {
+    hoveredElement,
+    selectedElement,
+    selectElement,
+    clearSelection,
+    lastRect: lastRectRef.current,
+  };
+}

package/src/index.ts

@@ -0,0 +1,46 @@
+// Main component
+export { Bobbin } from './Bobbin';
+export type { BobbinComponentProps } from './Bobbin';
+
+// Hooks
+export { useBobbin } from './core/useBobbin';
+export { useElementSelection } from './core/useElementSelection';
+export { useChangeTracker } from './core/useChangeTracker';
+export { useClipboard } from './core/useClipboard';
+
+// Utilities
+export {
+  serializeChangesToYAML,
+  parseYAMLChangeset,
+} from './core/changeSerializer';
+export { getElementPath, getElementXPath, generateId } from './utils/selectors';
+
+// Types
+export type {
+  BobbinProps,
+  BobbinState,
+  BobbinActions,
+  SelectedElement,
+  Change,
+  ChangeType,
+  StyleChange,
+  TextChange,
+  MoveChange,
+  Annotation,
+  DesignTokens,
+  BobbinChangeset,
+} from './types';
+
+// Tokens
+export { defaultTokens } from './tokens';
+export { colors } from './tokens/colors';
+export { spacing } from './tokens/spacing';
+export {
+  fontSize,
+  fontWeight,
+  fontFamily,
+  lineHeight,
+  letterSpacing,
+} from './tokens/typography';
+export { borderRadius, borderWidth } from './tokens/borders';
+export { boxShadow } from './tokens/shadows';

package/src/tokens/borders.ts

@@ -0,0 +1,19 @@
+export const borderRadius: Record<string, string> = {
+  none: '0px',
+  sm: '0.125rem',
+  DEFAULT: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  full: '9999px',
+};
+
+export const borderWidth: Record<string, string> = {
+  '0': '0px',
+  DEFAULT: '1px',
+  '2': '2px',
+  '4': '4px',
+  '8': '8px',
+};

package/src/tokens/colors.ts

@@ -0,0 +1,150 @@
+export const colors = {
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+  gray: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+    950: '#030712',
+  },
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
+  red: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+  },
+  orange: {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+    950: '#431407',
+  },
+  yellow: {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+    950: '#422006',
+  },
+  green: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+  },
+  blue: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+  },
+  indigo: {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+    950: '#1e1b4b',
+  },
+  purple: {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+    950: '#3b0764',
+  },
+  pink: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+    950: '#500724',
+  },
+  // Semantic
+  white: { DEFAULT: '#ffffff' },
+  black: { DEFAULT: '#000000' },
+  transparent: { DEFAULT: 'transparent' },
+  current: { DEFAULT: 'currentColor' },
+};

package/src/tokens/index.ts

@@ -0,0 +1,37 @@
+import type { DesignTokens } from '../types';
+import { colors } from './colors';
+import { spacing } from './spacing';
+import {
+  fontSize,
+  fontWeight,
+  fontFamily,
+  lineHeight,
+  letterSpacing,
+} from './typography';
+import { borderRadius, borderWidth } from './borders';
+import { boxShadow } from './shadows';
+
+export const defaultTokens: DesignTokens = {
+  colors,
+  spacing,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  borderRadius,
+  borderWidth,
+  boxShadow,
+  lineHeight,
+  letterSpacing,
+};
+
+export { colors } from './colors';
+export { spacing } from './spacing';
+export {
+  fontSize,
+  fontWeight,
+  fontFamily,
+  lineHeight,
+  letterSpacing,
+} from './typography';
+export { borderRadius, borderWidth } from './borders';
+export { boxShadow } from './shadows';

package/src/tokens/shadows.ts

@@ -0,0 +1,10 @@
+export const boxShadow: Record<string, string> = {
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  none: 'none',
+};

package/src/tokens/spacing.ts

@@ -0,0 +1,37 @@
+export const spacing: Record<string, string> = {
+  px: '1px',
+  '0': '0px',
+  '0.5': '0.125rem',
+  '1': '0.25rem',
+  '1.5': '0.375rem',
+  '2': '0.5rem',
+  '2.5': '0.625rem',
+  '3': '0.75rem',
+  '3.5': '0.875rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '9': '2.25rem',
+  '10': '2.5rem',
+  '11': '2.75rem',
+  '12': '3rem',
+  '14': '3.5rem',
+  '16': '4rem',
+  '20': '5rem',
+  '24': '6rem',
+  '28': '7rem',
+  '32': '8rem',
+  '36': '9rem',
+  '40': '10rem',
+  '44': '11rem',
+  '48': '12rem',
+  '52': '13rem',
+  '56': '14rem',
+  '60': '15rem',
+  '64': '16rem',
+  '72': '18rem',
+  '80': '20rem',
+  '96': '24rem',
+};

package/src/tokens/typography.ts

@@ -0,0 +1,51 @@
+export const fontSize: Record<string, string> = {
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+  '6xl': '3.75rem',
+  '7xl': '4.5rem',
+  '8xl': '6rem',
+  '9xl': '8rem',
+};
+
+export const fontWeight: Record<string, string> = {
+  thin: '100',
+  extralight: '200',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+};
+
+export const fontFamily: Record<string, string> = {
+  sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+};
+
+export const lineHeight: Record<string, string> = {
+  none: '1',
+  tight: '1.25',
+  snug: '1.375',
+  normal: '1.5',
+  relaxed: '1.625',
+  loose: '2',
+};
+
+export const letterSpacing: Record<string, string> = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0em',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+};

package/src/types.ts

@@ -0,0 +1,157 @@
+// === Element Selection ===
+export interface SelectedElement {
+  element: HTMLElement;
+  rect: DOMRect;
+  path: string; // CSS selector path
+  xpath: string; // XPath selector
+  tagName: string;
+  id?: string;
+  classList: string[];
+}
+
+// === Change Tracking ===
+export type ChangeType =
+  | 'style' // CSS property change
+  | 'text' // Text content change
+  | 'delete' // Element removed
+  | 'move' // Element repositioned
+  | 'duplicate' // Element duplicated
+  | 'insert' // New element inserted
+  | 'attribute'; // Attribute modified
+
+export interface Change {
+  id: string;
+  type: ChangeType;
+  timestamp: number;
+  target: {
+    path: string; // CSS selector path to element
+    xpath: string; // XPath selector to element
+    tagName: string;
+  };
+  before: unknown;
+  after: unknown;
+  metadata?: Record<string, unknown>;
+}
+
+export interface StyleChange extends Change {
+  type: 'style';
+  before: { property: string; value: string };
+  after: { property: string; value: string };
+}
+
+export interface TextChange extends Change {
+  type: 'text';
+  before: string;
+  after: string;
+}
+
+export interface MoveChange extends Change {
+  type: 'move';
+  before: { parent: string; index: number };
+  after: { parent: string; index: number };
+}
+
+// === Annotations ===
+export interface Annotation {
+  id: string;
+  elementPath: string; // CSS selector
+  elementXpath: string; // XPath selector
+  content: string;
+  createdAt: number;
+}
+
+// === Design Tokens ===
+export interface DesignTokens {
+  colors: Record<string, Record<string, string>>;
+  spacing: Record<string, string>;
+  fontSize: Record<string, string>;
+  fontWeight: Record<string, string>;
+  fontFamily: Record<string, string>;
+  borderRadius: Record<string, string>;
+  borderWidth: Record<string, string>;
+  boxShadow: Record<string, string>;
+  lineHeight: Record<string, string>;
+  letterSpacing: Record<string, string>;
+}
+
+// === Bobbin State ===
+export interface BobbinState {
+  isActive: boolean;
+  isPillExpanded: boolean;
+  hoveredElement: SelectedElement | null;
+  selectedElement: SelectedElement | null;
+  changes: Change[];
+  annotations: Annotation[];
+  clipboard: SelectedElement | null;
+  showMarginPadding: boolean;
+  activePanel: 'style' | 'inspector' | null;
+  theme: 'light' | 'dark' | 'system';
+}
+
+export interface BobbinActions {
+  activate: () => void;
+  deactivate: () => void;
+  selectElement: (el: HTMLElement | null) => void;
+  clearSelection: () => void;
+  applyStyle: (property: string, value: string) => void;
+  deleteElement: () => void;
+  moveElement: (targetParent: HTMLElement, index: number) => void;
+  duplicateElement: () => void;
+  insertElement: (
+    direction: 'before' | 'after' | 'child',
+    content?: string,
+  ) => void;
+  copyElement: () => void;
+  pasteElement: (direction: 'before' | 'after' | 'child') => void;
+  annotate: (content: string) => void;
+  toggleMarginPadding: () => void;
+  toggleTheme: () => void;
+  undo: () => void;
+  exportChanges: () => string; // Returns YAML
+  getChanges: () => Change[];
+  resetChanges: () => void; // Reset all style changes
+}
+
+// === YAML Export Format ===
+export interface BobbinChangeset {
+  version: '1.0';
+  timestamp: string;
+  changeCount: number;
+  changes: Array<{
+    type: ChangeType;
+    target: string; // CSS selector
+    xpath: string; // XPath selector
+    property?: string;
+    before?: string;
+    after?: string;
+    note?: string;
+  }>;
+  annotations: Array<{
+    type: 'annotation';
+    target: string;
+    xpath: string;
+    note: string;
+  }>;
+}
+
+// === Component Props ===
+export interface BobbinProps {
+  /** Custom design tokens to merge with defaults */
+  tokens?: Partial<DesignTokens>;
+  /** Container to scope element selection (default: document.body) */
+  container?: HTMLElement | null;
+  /** Container for pill positioning (if different from container) */
+  pillContainer?: HTMLElement | null;
+  /** Initial active state */
+  defaultActive?: boolean;
+  /** Callback when changes occur */
+  onChanges?: (changes: Change[]) => void;
+  /** Callback when selection changes */
+  onSelect?: (element: SelectedElement | null) => void;
+  /** Custom pill position offset from bottom-right of container */
+  position?: { bottom: number; right: number };
+  /** Z-index for overlay elements */
+  zIndex?: number;
+  /** Elements to exclude from selection (CSS selectors) */
+  exclude?: string[];
+}

package/src/utils/animation.ts

@@ -0,0 +1,40 @@
+export interface FLIPState {
+  rect: DOMRect;
+  opacity: number;
+}
+
+export function measureElement(el: HTMLElement): FLIPState {
+  return {
+    rect: el.getBoundingClientRect(),
+    opacity: parseFloat(getComputedStyle(el).opacity),
+  };
+}
+
+export function animateFLIP(
+  el: HTMLElement,
+  from: FLIPState,
+  to: FLIPState,
+  duration = 150,
+): void {
+  const deltaX = from.rect.left - to.rect.left;
+  const deltaY = from.rect.top - to.rect.top;
+  const deltaW = from.rect.width / to.rect.width;
+  const deltaH = from.rect.height / to.rect.height;
+
+  el.animate(
+    [
+      {
+        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,
+        opacity: from.opacity,
+      },
+      {
+        transform: 'translate(0, 0) scale(1, 1)',
+        opacity: to.opacity,
+      },
+    ],
+    {
+      duration,
+      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+  );
+}