@aprovan/bobbin 0.1.0-dev.c00a8ae → 0.1.0-dev.c1ac1dc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/bobbin",
-  "version": "0.1.0-dev.c00a8ae",
+  "version": "0.1.0-dev.c1ac1dc",
   "description": "Visual DOM editor",
   "type": "module",
   "main": "./dist/index.js",

package/src/Bobbin.tsx

@@ -1,12 +1,12 @@
 import { createPortal } from 'react-dom';
-import type { BobbinProps } from './types';
-import { useBobbin } from './core/useBobbin';
-import { Pill } from './components/Pill/Pill';
-import { SelectionOverlay } from './components/Overlay/SelectionOverlay';
-import { ControlHandles } from './components/Overlay/ControlHandles';
-import { MarginPaddingOverlay } from './components/Overlay/MarginPaddingOverlay';
 import { EditPanel } from './components/EditPanel/EditPanel';
 import { Inspector } from './components/Inspector/Inspector';
+import { ControlHandles } from './components/Overlay/ControlHandles';
+import { MarginPaddingOverlay } from './components/Overlay/MarginPaddingOverlay';
+import { SelectionOverlay } from './components/Overlay/SelectionOverlay';
+import { Pill } from './components/Pill/Pill';
+import { useBobbin } from './core/useBobbin';
+import type { BobbinProps } from './types';
 
 export interface BobbinComponentProps extends BobbinProps {
   /** Show inspector panel */

package/src/components/EditPanel/EditPanel.tsx

@@ -1,12 +1,12 @@
 import { useState, useMemo } from 'react';
-import type { SelectedElement, BobbinActions, DesignTokens, Change, StyleChange, Annotation } from '../../types';
+import { AnnotationSection } from './sections/AnnotationSection';
+import { BackgroundSection } from './sections/BackgroundSection';
+import { EffectsSection } from './sections/EffectsSection';
 import { LayoutSection } from './sections/LayoutSection';
-import { SpacingSection } from './sections/SpacingSection';
 import { SizeSection } from './sections/SizeSection';
+import { SpacingSection } from './sections/SpacingSection';
 import { TypographySection } from './sections/TypographySection';
-import { BackgroundSection } from './sections/BackgroundSection';
-import { EffectsSection } from './sections/EffectsSection';
-import { AnnotationSection } from './sections/AnnotationSection';
+import type { SelectedElement, BobbinActions, DesignTokens, Change, StyleChange, Annotation } from '../../types';
 
 // Theme icons
 const SunIcon = () => (

package/src/components/EditPanel/controls/QuickSelectDropdown.tsx

@@ -13,7 +13,7 @@ export function QuickSelectDropdown({
   tokens,
   quickKeys,
   onChange,
-  placeholder = 'More...',
+  placeholder: _placeholder = 'More...',
 }: QuickSelectDropdownProps) {
   const [showDropdown, setShowDropdown] = useState(false);
 

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

@@ -1,7 +1,7 @@
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
 import { ColorPicker } from '../controls/ColorPicker';
 import { TokenDropdown } from '../controls/TokenDropdown';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 interface BackgroundSectionProps {
   expanded: boolean;

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

@@ -1,7 +1,7 @@
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
 import { QuickSelectDropdown } from '../controls/QuickSelectDropdown';
 import { SliderInput } from '../controls/SliderInput';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 interface EffectsSectionProps {
   expanded: boolean;

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

@@ -1,7 +1,7 @@
-import type { DesignTokens } from '../../../types';
-import { SectionWrapper } from './SectionWrapper';
 import { ToggleGroup } from '../controls/ToggleGroup';
 import { TokenDropdown } from '../controls/TokenDropdown';
+import { SectionWrapper } from './SectionWrapper';
+import type { DesignTokens } from '../../../types';
 
 // Direction icons
 const ArrowRightIcon = () => (

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 interface SectionWrapperProps {
   title: string;

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,7 @@ 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);
+  const _toolbarRef = useRef<HTMLDivElement>(null);
   const { rect } = selectedElement;
 
   const layoutDirection = useMemo(
@@ -59,7 +59,7 @@ export function ControlHandles({
   );
 
   // Check if corner toolbar should collapse
-  const isNarrowElement = rect.width < MIN_WIDTH_FOR_CORNER_TOOLBAR;
+  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 +117,7 @@ export function ControlHandles({
     </svg>
   );
 
-  const MoreIcon = () => (
+  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 +125,7 @@ export function ControlHandles({
     </svg>
   );
 
-  const MoreIconVertical = () => (
+  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 +270,7 @@ export function ControlHandles({
   };
 
   // Check if an edge needs collapse based on position
-  const edgeNeedsCollapse = (position: HandlePosition): boolean => {
+  const _edgeNeedsCollapse = (position: HandlePosition): boolean => {
     const isHorizontal = position === 'top' || position === 'bottom';
     return isHorizontal ? isShortForHorizontalEdge : isShortForVerticalEdge;
   };
@@ -417,7 +417,7 @@ export function ControlHandles({
   };
 
   // Expanded popup for collapsed edge zones
-  const EdgeExpandedPopup = ({ position }: { position: HandlePosition }) => {
+  const _EdgeExpandedPopup = ({ position }: { position: HandlePosition }) => {
     const isHorizontal = position === 'top' || position === 'bottom';
     
     // Position the popup to extend in the direction it needs space
@@ -518,7 +518,7 @@ export function ControlHandles({
   );
 
   // Toolbar buttons (always the same, rendered conditionally based on narrow state)
-  const ToolbarButtons = () => (
+  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 {

package/src/core/useChangeTracker.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback, useRef, useMemo } from 'react';
+import { generateId } from '../utils/selectors';
 import type {
   Change,
   StyleChange,
@@ -6,7 +7,6 @@ import type {
   MoveChange,
   ChangeType,
 } from '../types';
-import { generateId } from '../utils/selectors';
 
 export function useChangeTracker() {
   const [changes, setChanges] = useState<Change[]>([]);

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/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,