@aprovan/bobbin 0.1.0-dev.6bd527d

package/dist/index.d.ts

@@ -0,0 +1,402 @@
+import * as react from 'react';
+
+interface SelectedElement {
+    element: HTMLElement;
+    rect: DOMRect;
+    path: string;
+    xpath: string;
+    tagName: string;
+    id?: string;
+    classList: string[];
+}
+type ChangeType = 'style' | 'text' | 'delete' | 'move' | 'duplicate' | 'insert' | 'attribute';
+interface Change {
+    id: string;
+    type: ChangeType;
+    timestamp: number;
+    target: {
+        path: string;
+        xpath: string;
+        tagName: string;
+    };
+    before: unknown;
+    after: unknown;
+    metadata?: Record<string, unknown>;
+}
+interface StyleChange extends Change {
+    type: 'style';
+    before: {
+        property: string;
+        value: string;
+    };
+    after: {
+        property: string;
+        value: string;
+    };
+}
+interface TextChange extends Change {
+    type: 'text';
+    before: string;
+    after: string;
+}
+interface MoveChange extends Change {
+    type: 'move';
+    before: {
+        parent: string;
+        index: number;
+    };
+    after: {
+        parent: string;
+        index: number;
+    };
+}
+interface Annotation {
+    id: string;
+    elementPath: string;
+    elementXpath: string;
+    content: string;
+    createdAt: number;
+}
+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>;
+}
+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';
+}
+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;
+    getChanges: () => Change[];
+    resetChanges: () => void;
+}
+interface BobbinChangeset {
+    version: '1.0';
+    timestamp: string;
+    changeCount: number;
+    changes: Array<{
+        type: ChangeType;
+        target: string;
+        xpath: string;
+        property?: string;
+        before?: string;
+        after?: string;
+        note?: string;
+    }>;
+    annotations: Array<{
+        type: 'annotation';
+        target: string;
+        xpath: string;
+        note: string;
+    }>;
+}
+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[];
+}
+
+interface BobbinComponentProps extends BobbinProps {
+    /** Show inspector panel */
+    showInspector?: boolean;
+}
+declare function Bobbin(props: BobbinComponentProps): react.ReactPortal;
+
+declare function useBobbin(props?: BobbinProps): {
+    tokens: DesignTokens;
+    setActivePanel: react.Dispatch<react.SetStateAction<"style" | "inspector" | null>>;
+    setIsPillExpanded: react.Dispatch<react.SetStateAction<boolean>>;
+    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;
+    getChanges: () => Change[];
+    resetChanges: () => void;
+    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";
+};
+
+interface UseElementSelectionOptions {
+    container?: HTMLElement | null;
+    exclude?: string[];
+    enabled?: boolean;
+}
+declare function useElementSelection(options: UseElementSelectionOptions): {
+    hoveredElement: SelectedElement | null;
+    selectedElement: SelectedElement | null;
+    selectElement: (el: HTMLElement | null) => void;
+    clearSelection: () => void;
+    lastRect: DOMRect | null;
+};
+
+declare function useChangeTracker(): {
+    changes: Change[];
+    deduplicatedChanges: Change[];
+    changeCount: number;
+    recordStyleChange: (path: string, xpath: string, tagName: string, property: string, value: string, originalValue: string) => StyleChange;
+    recordTextChange: (path: string, xpath: string, tagName: string, originalText: string, newText: string) => TextChange;
+    recordMoveChange: (path: string, xpath: string, tagName: string, fromParent: string, fromIndex: number, toParent: string, toIndex: number) => MoveChange;
+    recordChange: (type: ChangeType, path: string, xpath: string, tagName: string, before: unknown, after: unknown, metadata?: Record<string, unknown>) => Change;
+    undo: () => Change | null | undefined;
+    clearChanges: () => void;
+    getChanges: () => Change[];
+    originalStates: Map<string, Map<string, string>>;
+};
+
+declare function useClipboard(): {
+    copied: SelectedElement | null;
+    copy: (element: SelectedElement) => void;
+    clear: () => void;
+    hasCopied: boolean;
+};
+
+declare function serializeChangesToYAML(changes: Change[], annotations?: Annotation[]): string;
+declare function parseYAMLChangeset(yaml: string): BobbinChangeset;
+
+declare function generateId(): string;
+declare function getElementPath(el: HTMLElement): string;
+declare function getElementXPath(el: HTMLElement): string;
+
+declare const colors: {
+    slate: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    zinc: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    indigo: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    white: {
+        DEFAULT: string;
+    };
+    black: {
+        DEFAULT: string;
+    };
+    transparent: {
+        DEFAULT: string;
+    };
+    current: {
+        DEFAULT: string;
+    };
+};
+
+declare const spacing: Record<string, string>;
+
+declare const fontSize: Record<string, string>;
+declare const fontWeight: Record<string, string>;
+declare const fontFamily: Record<string, string>;
+declare const lineHeight: Record<string, string>;
+declare const letterSpacing: Record<string, string>;
+
+declare const borderRadius: Record<string, string>;
+declare const borderWidth: Record<string, string>;
+
+declare const boxShadow: Record<string, string>;
+
+declare const defaultTokens: DesignTokens;
+
+export { type Annotation, Bobbin, type BobbinActions, type BobbinChangeset, type BobbinComponentProps, type BobbinProps, type BobbinState, type Change, type ChangeType, type DesignTokens, type MoveChange, type SelectedElement, type StyleChange, type TextChange, borderRadius, borderWidth, boxShadow, colors, defaultTokens, fontFamily, fontSize, fontWeight, generateId, getElementPath, getElementXPath, letterSpacing, lineHeight, parseYAMLChangeset, serializeChangesToYAML, spacing, useBobbin, useChangeTracker, useClipboard, useElementSelection };