@aprovan/bobbin 0.1.0-dev.98f1b7b → 0.1.0-dev.99f9769

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
 import { SliderInput } from '../controls/SliderInput';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 // Common size presets
 const sizePresets: Record<string, string> = {

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

@@ -1,6 +1,6 @@
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
 import { SpacingControl } from '../controls/SpacingControl';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 interface SpacingSectionProps {
   expanded: boolean;

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

@@ -1,9 +1,9 @@
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
-import { TokenDropdown } from '../controls/TokenDropdown';
-import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
 import { ColorPicker } from '../controls/ColorPicker';
+import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
 import { ToggleGroup } from '../controls/ToggleGroup';
+import { TokenDropdown } from '../controls/TokenDropdown';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 // Text alignment icons
 const AlignLeftIcon = () => (

package/src/components/Overlay/ControlHandles.tsx

@@ -50,7 +50,8 @@ export function ControlHandles({
   const [isDragging, setIsDragging] = useState(false);
   const [dropTarget, setDropTarget] = useState<HTMLElement | null>(null);
   const [cornerToolbarExpanded, setCornerToolbarExpanded] = useState(false);
-  const toolbarRef = useRef<HTMLDivElement>(null);
+  // @ts-expect-error TS6133
+  const _toolbarRef = useRef<HTMLDivElement>(null);
   const { rect } = selectedElement;
 
   const layoutDirection = useMemo(
@@ -59,7 +60,8 @@ export function ControlHandles({
   );
 
   // Check if corner toolbar should collapse
-  const isNarrowElement = rect.width < MIN_WIDTH_FOR_CORNER_TOOLBAR;
+  // @ts-expect-error TS6133
+  const _isNarrowElement = rect.width < MIN_WIDTH_FOR_CORNER_TOOLBAR;
   
   // Check if edge zones need collapsing (based on element dimension perpendicular to edge)
   const isShortForVerticalEdge = rect.height < MIN_SIZE_FOR_EDGE_ICONS; // for left/right edges
@@ -117,7 +119,8 @@ export function ControlHandles({
     </svg>
   );
 
-  const MoreIcon = () => (
+  // @ts-expect-error TS6133
+  const _MoreIcon = () => (
     <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
       <circle cx="12" cy="12" r="1" fill="currentColor" />
       <circle cx="19" cy="12" r="1" fill="currentColor" />
@@ -125,7 +128,8 @@ export function ControlHandles({
     </svg>
   );
 
-  const MoreIconVertical = () => (
+  // @ts-expect-error TS6133
+  const _MoreIconVertical = () => (
     <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
       <circle cx="12" cy="5" r="1" fill="currentColor" />
       <circle cx="12" cy="12" r="1" fill="currentColor" />
@@ -270,7 +274,8 @@ export function ControlHandles({
   };
 
   // Check if an edge needs collapse based on position
-  const edgeNeedsCollapse = (position: HandlePosition): boolean => {
+  // @ts-expect-error TS6133
+  const _edgeNeedsCollapse = (position: HandlePosition): boolean => {
     const isHorizontal = position === 'top' || position === 'bottom';
     return isHorizontal ? isShortForHorizontalEdge : isShortForVerticalEdge;
   };
@@ -417,7 +422,8 @@ export function ControlHandles({
   };
 
   // Expanded popup for collapsed edge zones
-  const EdgeExpandedPopup = ({ position }: { position: HandlePosition }) => {
+  // @ts-expect-error TS6133
+  const _EdgeExpandedPopup = ({ position }: { position: HandlePosition }) => {
     const isHorizontal = position === 'top' || position === 'bottom';
     
     // Position the popup to extend in the direction it needs space
@@ -518,7 +524,8 @@ export function ControlHandles({
   );
 
   // Toolbar buttons (always the same, rendered conditionally based on narrow state)
-  const ToolbarButtons = () => (
+  // @ts-expect-error TS6133
+  const _ToolbarButtons = () => (
     <>
       <ActionButton
         icon={<MoveIcon />}

package/src/core/useBobbin.ts

@@ -1,4 +1,11 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
+import { defaultTokens } from '../tokens';
+import { applyStyleToElement, enableContentEditable } from '../utils/dom';
+import { getElementPath, getElementXPath } from '../utils/selectors';
+import { serializeChangesToYAML } from './changeSerializer';
+import { useChangeTracker } from './useChangeTracker';
+import { useClipboard } from './useClipboard';
+import { useElementSelection } from './useElementSelection';
 import type {
   BobbinState,
   BobbinActions,
@@ -6,13 +13,6 @@ import type {
   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 {
@@ -62,6 +62,7 @@ export function useBobbin(props: BobbinProps = {}) {
       enableContentEditable(selectedElement.element, true);
       return () => enableContentEditable(selectedElement.element, false);
     }
+    return undefined;
   }, [selectedElement]);
 
   // Notify on changes

package/src/core/useChangeTracker.ts

@@ -1,4 +1,6 @@
 import { useState, useCallback, useRef, useMemo } from 'react';
+import { deduplicateChanges } from '../utils/deduplicateChanges';
+import { generateId } from '../utils/selectors';
 import type {
   Change,
   StyleChange,
@@ -6,7 +8,6 @@ import type {
   MoveChange,
   ChangeType,
 } from '../types';
-import { generateId } from '../utils/selectors';
 
 export function useChangeTracker() {
   const [changes, setChanges] = useState<Change[]>([]);
@@ -138,37 +139,10 @@ export function useChangeTracker() {
 
   // 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]);
+  const deduplicatedChanges = useMemo(
+    () => deduplicateChanges(changes, originalStatesRef.current),
+    [changes],
+  );
 
   return {
     changes,

package/src/core/useElementSelection.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
-import type { SelectedElement } from '../types';
 import { getElementPath, getElementXPath } from '../utils/selectors';
+import type { SelectedElement } from '../types';
 
 export interface UseElementSelectionOptions {
   container?: HTMLElement | null;

package/src/index.ts

@@ -14,6 +14,21 @@ export {
   parseYAMLChangeset,
 } from './core/changeSerializer';
 export { getElementPath, getElementXPath, generateId } from './utils/selectors';
+export { deduplicateChanges } from './utils/deduplicateChanges';
+
+// Type guards
+export {
+  isChangeType,
+  isChange,
+  isStyleChange,
+  isTextChange,
+  isMoveChange,
+  isSelectedElement,
+  isAnnotation,
+  isDesignTokens,
+  isBobbinState,
+  isBobbinChangeset,
+} from './typeGuards';
 
 // Types
 export type {

package/src/tokens/index.ts

@@ -1,5 +1,6 @@
-import type { DesignTokens } from '../types';
+import { borderRadius, borderWidth } from './borders';
 import { colors } from './colors';
+import { boxShadow } from './shadows';
 import { spacing } from './spacing';
 import {
   fontSize,
@@ -8,8 +9,7 @@ import {
   lineHeight,
   letterSpacing,
 } from './typography';
-import { borderRadius, borderWidth } from './borders';
-import { boxShadow } from './shadows';
+import type { DesignTokens } from '../types';
 
 export const defaultTokens: DesignTokens = {
   colors,

package/src/typeGuards.ts

@@ -0,0 +1,169 @@
+import type {
+  ChangeType,
+  Change,
+  StyleChange,
+  TextChange,
+  MoveChange,
+  SelectedElement,
+  Annotation,
+  DesignTokens,
+  BobbinState,
+  BobbinChangeset,
+} from './types';
+
+const CHANGE_TYPE_VALUES: readonly string[] = [
+  'style',
+  'text',
+  'delete',
+  'move',
+  'duplicate',
+  'insert',
+  'attribute',
+];
+
+export function isChangeType(value: unknown): value is ChangeType {
+  return typeof value === 'string' && CHANGE_TYPE_VALUES.includes(value);
+}
+
+export function isChangeTarget(
+  value: unknown,
+): value is Change['target'] & Record<string, unknown> {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.path === 'string' &&
+    typeof obj.xpath === 'string' &&
+    typeof obj.tagName === 'string'
+  );
+}
+
+export function isChange(value: unknown): value is Change {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.id === 'string' &&
+    isChangeType(obj.type) &&
+    typeof obj.timestamp === 'number' &&
+    isChangeTarget(obj.target)
+  );
+}
+
+export function isStyleChange(value: unknown): value is StyleChange {
+  if (!isChange(value)) return false;
+  if (value.type !== 'style') return false;
+  const obj = value as unknown as Record<string, unknown>;
+  const before = obj.before;
+  const after = obj.after;
+  if (typeof before !== 'object' || before === null) return false;
+  if (typeof after !== 'object' || after === null) return false;
+  const b = before as Record<string, unknown>;
+  const a = after as Record<string, unknown>;
+  return (
+    typeof b.property === 'string' &&
+    typeof b.value === 'string' &&
+    typeof a.property === 'string' &&
+    typeof a.value === 'string'
+  );
+}
+
+export function isTextChange(value: unknown): value is TextChange {
+  if (!isChange(value)) return false;
+  if (value.type !== 'text') return false;
+  const obj = value as unknown as Record<string, unknown>;
+  return typeof obj.before === 'string' && typeof obj.after === 'string';
+}
+
+export function isMoveChange(value: unknown): value is MoveChange {
+  if (!isChange(value)) return false;
+  if (value.type !== 'move') return false;
+  const obj = value as unknown as Record<string, unknown>;
+  const before = obj.before;
+  const after = obj.after;
+  if (typeof before !== 'object' || before === null) return false;
+  if (typeof after !== 'object' || after === null) return false;
+  const b = before as Record<string, unknown>;
+  const a = after as Record<string, unknown>;
+  return (
+    typeof b.parent === 'string' &&
+    typeof b.index === 'number' &&
+    typeof a.parent === 'string' &&
+    typeof a.index === 'number'
+  );
+}
+
+export function isSelectedElement(value: unknown): value is SelectedElement {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.tagName === 'string' &&
+    typeof obj.path === 'string' &&
+    typeof obj.xpath === 'string' &&
+    Array.isArray(obj.classList) &&
+    (obj.id === undefined || typeof obj.id === 'string')
+  );
+}
+
+export function isAnnotation(value: unknown): value is Annotation {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.id === 'string' &&
+    typeof obj.elementPath === 'string' &&
+    typeof obj.elementXpath === 'string' &&
+    typeof obj.content === 'string' &&
+    typeof obj.createdAt === 'number'
+  );
+}
+
+export function isDesignTokens(value: unknown): value is DesignTokens {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  const keys = [
+    'colors',
+    'spacing',
+    'fontSize',
+    'fontWeight',
+    'fontFamily',
+    'borderRadius',
+    'borderWidth',
+    'boxShadow',
+    'lineHeight',
+    'letterSpacing',
+  ];
+  return keys.every(
+    (k) => k in obj && typeof obj[k] === 'object' && obj[k] !== null,
+  );
+}
+
+export function isBobbinState(value: unknown): value is BobbinState {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.isActive === 'boolean' &&
+    typeof obj.isPillExpanded === 'boolean' &&
+    typeof obj.showMarginPadding === 'boolean' &&
+    (obj.hoveredElement === null || isSelectedElement(obj.hoveredElement)) &&
+    (obj.selectedElement === null || isSelectedElement(obj.selectedElement)) &&
+    Array.isArray(obj.changes) &&
+    obj.changes.every(isChange) &&
+    Array.isArray(obj.annotations) &&
+    obj.annotations.every(isAnnotation) &&
+    (obj.clipboard === null || isSelectedElement(obj.clipboard)) &&
+    (obj.activePanel === null ||
+      obj.activePanel === 'style' ||
+      obj.activePanel === 'inspector') &&
+    (obj.theme === 'light' || obj.theme === 'dark' || obj.theme === 'system')
+  );
+}
+
+export function isBobbinChangeset(value: unknown): value is BobbinChangeset {
+  if (typeof value !== 'object' || value === null) return false;
+  const obj = value as Record<string, unknown>;
+  return (
+    obj.version === '1.0' &&
+    typeof obj.timestamp === 'string' &&
+    typeof obj.changeCount === 'number' &&
+    Array.isArray(obj.changes) &&
+    Array.isArray(obj.annotations)
+  );
+}

package/src/utils/deduplicateChanges.ts

@@ -0,0 +1,34 @@
+import type { Change, StyleChange } from '../types';
+
+export function deduplicateChanges(
+  changes: Change[],
+  originalStates: Map<string, Map<string, string>>,
+): Change[] {
+  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}`;
+    }
+
+    if (change.type === 'style') {
+      const styleChange = change as StyleChange;
+      const originalValue = originalStates
+        .get(change.target.path)
+        ?.get(styleChange.after.property);
+      if (originalValue === styleChange.after.value) {
+        uniqueChanges.delete(key);
+        continue;
+      }
+    }
+
+    uniqueChanges.set(key, change);
+  }
+
+  return Array.from(uniqueChanges.values());
+}