@snowcone-app/canvas 0.1.0

package/dist/hooks/useLayerPreview.d.ts

@@ -0,0 +1,31 @@
+import { EditorElement } from '../contexts/EditorContext.js';
+export interface UseLayerPreviewOptions {
+    /** The element to generate a preview for */
+    element: EditorElement;
+    /** Preview size in pixels (width and height). Default: 148 */
+    size?: number;
+    /** Background color for the preview. Default: 'transparent' */
+    backgroundColor?: string;
+    /** Whether preview generation is enabled. Default: true */
+    enabled?: boolean;
+}
+export interface UseLayerPreviewReturn {
+    /** Data URL of the preview image, or null if not yet generated */
+    previewUrl: string | null;
+    /** Whether the preview is currently being generated */
+    isLoading: boolean;
+}
+/**
+ * Hook for generating element preview thumbnails.
+ *
+ * Handles image elements by waiting for the image to load before
+ * generating the preview. For text, shape, path, and group elements,
+ * the preview is generated synchronously.
+ *
+ * Automatically regenerates when visual properties change (position,
+ * rotation, transform data, text content, image URL, etc.).
+ *
+ * Debounces regeneration with a 50ms delay to avoid excessive
+ * canvas operations during rapid property changes.
+ */
+export declare function useLayerPreview(options: UseLayerPreviewOptions): UseLayerPreviewReturn;

package/dist/hooks/useLayerSelection.d.ts

@@ -0,0 +1,76 @@
+/**
+ * useLayerSelection - Hook for layer selection logic
+ *
+ * Extracts the selection logic (shift-click multi-select, single-click,
+ * deselection) from LayersPanel.tsx into a reusable hook.
+ *
+ * @example
+ * ```tsx
+ * function LayersList({ elements }) {
+ *   const [selectedId, setSelectedId] = useState<string | null>(null);
+ *   const [multiSelection, setMultiSelection] = useState<string[]>([]);
+ *
+ *   const { isSelected, handleClick } = useLayerSelection({
+ *     selectedId,
+ *     multiSelection,
+ *     onSelectionChange: setSelectedId,
+ *     onMultiSelectionChange: setMultiSelection,
+ *   });
+ *
+ *   return elements.map(el => (
+ *     <div
+ *       key={el.id}
+ *       className={isSelected(el.id) ? 'selected' : ''}
+ *       onClick={(e) => handleClick(e, el.id)}
+ *     />
+ *   ));
+ * }
+ * ```
+ */
+export interface UseLayerSelectionOptions {
+    /** Currently selected single element ID, or null */
+    selectedId: string | null;
+    /** Array of multi-selected element IDs */
+    multiSelection: string[];
+    /** Callback for single selection changes */
+    onSelectionChange: (id: string | null) => void;
+    /** Callback for multi-selection changes */
+    onMultiSelectionChange: (ids: string[]) => void;
+}
+export interface UseLayerSelectionReturn {
+    /**
+     * Check if an element is selected (either single or multi-selected).
+     * Does not account for activeChildElement priority -- callers handling
+     * group children should check that separately.
+     */
+    isSelected: (id: string) => boolean;
+    /**
+     * Handle a click on a layer element.
+     * - Normal click: selects only this element, clears multi-selection
+     * - Shift+click: toggles the element in/out of multi-selection
+     */
+    handleClick: (e: React.MouseEvent | React.KeyboardEvent, elementId: string) => void;
+}
+/**
+ * Hook for managing layer selection state.
+ *
+ * Implements the following selection behaviors:
+ *
+ * **Normal click:**
+ * - Selects only the clicked element
+ * - Clears any multi-selection
+ *
+ * **Shift+click with existing multi-selection:**
+ * - If element is in multi-selection: removes it
+ *   - If only 1 remains: converts back to single selection
+ *   - If 0 remain: clears selection
+ * - If element is not in multi-selection: adds it
+ *
+ * **Shift+click with single selection:**
+ * - If clicking the already-selected element: no-op
+ * - If clicking a different element: starts multi-selection with both
+ *
+ * **Shift+click with no selection:**
+ * - Selects the clicked element as a single selection
+ */
+export declare function useLayerSelection(options: UseLayerSelectionOptions): UseLayerSelectionReturn;

package/dist/hooks/useLayers.d.ts

@@ -0,0 +1,91 @@
+import { GroupElement } from '../core/GroupElement.js';
+import { EditorElement } from '../contexts/EditorContext.js';
+import { TransformType } from '../types/index.js';
+import { ArtboardManager } from '../core/ArtboardManager.js';
+export interface LayerInfo {
+    id: string;
+    name: string;
+    type: TransformType;
+    visible: boolean;
+    locked: boolean;
+    isSelected: boolean;
+    isGroup: boolean;
+    depth: number;
+    parentId: string | null;
+    children?: LayerInfo[];
+    previewUrl: string | null;
+    refreshPreview: () => Promise<void>;
+}
+export interface UseLayersOptions {
+    artboardId?: string | null;
+    includeHidden?: boolean;
+    previewSize?: number;
+    previewBackgroundColor?: string;
+    autoRefreshPreviews?: boolean;
+}
+export interface UseLayersReturn {
+    layers: LayerInfo[];
+    flatLayers: LayerInfo[];
+    selectedLayers: LayerInfo[];
+    selectLayer: (id: string, addToSelection?: boolean) => void;
+    selectMultipleLayers: (ids: string[]) => void;
+    clearSelection: () => void;
+    toggleVisibility: (id: string) => void;
+    toggleLock: (id: string) => void;
+    renameLayer: (id: string, name: string) => void;
+    deleteLayer: (id: string) => void;
+    duplicateLayer: (id: string) => void;
+    reorderLayers: (fromIndex: number, toIndex: number) => void;
+    reorderById: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
+    reorderWithinGroup: (draggedId: string, targetId: string, position: 'before' | 'after', groupId: string) => void;
+    moveLayerForward: (id: string) => void;
+    moveLayerBackward: (id: string) => void;
+    groupLayers: (ids: string[]) => void;
+    ungroupLayer: (id: string) => void;
+    addToGroup: (elementId: string, groupId: string) => void;
+    removeFromGroup: (elementId: string, targetId?: string, position?: 'before' | 'after') => void;
+    createEmptyGroup: () => void;
+    findElementById: (id: string) => EditorElement | null;
+    findParentGroup: (id: string) => GroupElement | null;
+    generateAllPreviews: (size?: number) => Promise<void>;
+    clearPreviewCache: () => void;
+    artboardId: string | null;
+    artboardManager: ArtboardManager;
+    layerCount: number;
+}
+/**
+ * Hook for accessing layer data and operations
+ * Must be used within EditorProvider
+ *
+ * @example
+ * ```tsx
+ * function CustomLayersPanel() {
+ *   const { layers, selectLayer, toggleVisibility, deleteLayer } = useLayers({
+ *     previewSize: 80,
+ *     autoRefreshPreviews: true
+ *   });
+ *
+ *   return (
+ *     <div className="layers-panel">
+ *       {layers.map(layer => (
+ *         <div
+ *           key={layer.id}
+ *           className={layer.isSelected ? 'selected' : ''}
+ *           style={{ paddingLeft: layer.depth * 20 }}
+ *         >
+ *           {layer.previewUrl && (
+ *             <img src={layer.previewUrl} alt={layer.name} width={40} />
+ *           )}
+ *           <span onClick={() => selectLayer(layer.id)}>{layer.name}</span>
+ *           <button onClick={() => toggleVisibility(layer.id)}>
+ *             {layer.visible ? '👁' : '🚫'}
+ *           </button>
+ *           <button onClick={() => deleteLayer(layer.id)}>🗑</button>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useLayers(options?: UseLayersOptions): UseLayersReturn;

package/dist/hooks/usePerformance.d.ts

@@ -0,0 +1,48 @@
+/**
+ * usePerformance - Hook for performance monitoring
+ * Provides metrics for tracking editor performance
+ *
+ * @example
+ * ```tsx
+ * function PerformanceMonitor() {
+ *   const { metrics, startProfiling } = usePerformance();
+ *
+ *   useEffect(() => {
+ *     startProfiling();
+ *   }, []);
+ *
+ *   if (metrics.fps < 30) {
+ *     console.warn('Low FPS:', metrics.fps);
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>FPS: {Math.round(metrics.fps)}</p>
+ *       <p>Render Time: {metrics.avgRenderTime.toFixed(2)}ms</p>
+ *       <p>Elements: {metrics.elementCount}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export interface PerformanceMetrics {
+    fps: number;
+    avgRenderTime: number;
+    peakRenderTime: number;
+    memoryUsage: number;
+    elementCount: number;
+    exportCount: number;
+    avgExportTime: number;
+}
+export interface UsePerformanceReturn {
+    metrics: PerformanceMetrics;
+    startProfiling: () => void;
+    stopProfiling: () => void;
+    clearMetrics: () => void;
+    getReport: () => string;
+    isProfiling: boolean;
+}
+/**
+ * Hook for performance monitoring
+ */
+export declare function usePerformance(): UsePerformanceReturn;

package/dist/hooks/useProjectLoader.d.ts

@@ -0,0 +1,64 @@
+import { CanvasDocument } from '../utils/ExportManager.js';
+import { AnyElementConfig } from '../types/index.js';
+export interface ProjectTemplate {
+    name: string;
+    description?: string;
+    artboards: Array<{
+        name: string;
+        width: number;
+        height: number;
+        backgroundColor: string;
+        elements?: AnyElementConfig[];
+    }>;
+}
+export interface ProjectMetadata {
+    version: string;
+    timestamp: string;
+    artboardCount: number;
+    elementCount: number;
+}
+export interface UseProjectLoaderReturn {
+    loadFromJSON: (json: string | CanvasDocument) => Promise<void>;
+    loadFromFile: (file: File) => Promise<void>;
+    loadTemplate: (template: ProjectTemplate) => Promise<void>;
+    isLoading: boolean;
+    loadError: Error | null;
+    currentProject: CanvasDocument | null;
+    projectMetadata: ProjectMetadata | null;
+}
+/**
+ * Hook for loading saved projects
+ * Must be used within EditorProvider
+ *
+ * @example Load from API
+ * ```tsx
+ * function ProductCustomizer({ productId }: { productId: string }) {
+ *   const { loadFromJSON, isLoading } = useProjectLoader();
+ *
+ *   useEffect(() => {
+ *     fetch(`/api/designs/${productId}`)
+ *       .then(res => res.json())
+ *       .then(design => loadFromJSON(design))
+ *       .catch(console.error);
+ *   }, [productId]);
+ *
+ *   if (isLoading) return <div>Loading design...</div>;
+ *
+ *   return <Canvas />;
+ * }
+ * ```
+ *
+ * @example Load from template
+ * ```tsx
+ * function TemplateGallery() {
+ *   const { loadTemplate } = useProjectLoader();
+ *
+ *   const handleSelectTemplate = (template: ProjectTemplate) => {
+ *     loadTemplate(template);
+ *   };
+ *
+ *   return <div>Template gallery...</div>;
+ * }
+ * ```
+ */
+export declare function useProjectLoader(): UseProjectLoaderReturn;

package/dist/hooks/useSelectedElement.d.ts

@@ -0,0 +1,17 @@
+import { EditorElement } from '../contexts/EditorContext.js';
+/**
+ * Returns the currently selected element, or null if nothing is selected.
+ *
+ * This is a convenience wrapper around `useEditor()` that only extracts
+ * selection state, keeping consumer components focused on what they need.
+ *
+ * @example
+ * ```tsx
+ * function PropertiesPanel() {
+ *   const selected = useSelectedElement();
+ *   if (!selected) return <p>Nothing selected</p>;
+ *   return <p>Selected: {selected.id}</p>;
+ * }
+ * ```
+ */
+export declare function useSelectedElement(): EditorElement | null;

package/dist/hooks/useTextBinding.d.ts

@@ -0,0 +1,26 @@
+import { EditorElement } from '../contexts/EditorContext.js';
+/** Result returned by {@link useTextBinding}. */
+export interface TextBindingResult {
+    /** Current plain text content (from first bound element). Empty string if disconnected. */
+    text: string;
+    /** Update text on all bound elements. No-op if disconnected. */
+    setText: (text: string) => void;
+    /** The first bound element, or null if no matching text element exists. */
+    element: EditorElement | null;
+    /** All bound text elements (empty array if disconnected). */
+    elements: readonly EditorElement[];
+    /** Whether at least one matching text element exists. */
+    isConnected: boolean;
+}
+/**
+ * Bind an HTML input to canvas text elements by their `name` property.
+ *
+ * Multiple elements can share the same name — `setText` updates all of them.
+ * Text is read from the first matching element (render order).
+ *
+ * Must be used within an `EditorProvider`.
+ *
+ * @param name - The element name to bind to.
+ * @returns Text value, setter, element references, and connection status.
+ */
+export declare function useTextBinding(name: string): TextBindingResult;

package/dist/hooks/useTextToolbar.d.ts

@@ -0,0 +1,61 @@
+import { TransformType, TextAlign, CharacterStyle } from '../types/index.js';
+import { CanvasEditorHandle } from '../components/CanvasEditor.js';
+export interface UseTextToolbarOptions {
+    canvasEditorRef?: React.RefObject<CanvasEditorHandle | null>;
+}
+export interface UseTextToolbarReturn {
+    fontSize: number;
+    fontColor: string;
+    fontFamily: string;
+    textAlign: TextAlign;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    letterCase: string;
+    handleFontSizeChange: (size: number) => void;
+    handleFontSizeIncrement: (delta: number) => void;
+    handleFontFamilyChange: (family: string) => void;
+    handleFontColorChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleBoldToggle: () => void;
+    handleItalicToggle: () => void;
+    handleUnderlineToggle: () => void;
+    handleLetterCaseToggle: () => void;
+    isLetterCaseActive: () => boolean;
+    handleTextAlignToggle: () => void;
+    getEffectiveStyle: () => CharacterStyle;
+    handleTransformTypeChange: (type: TransformType) => void;
+}
+/**
+ * Hook for text element formatting state and handlers.
+ *
+ * Extracts all text-specific toolbar logic (font size, color, family,
+ * bold/italic/underline, letter case, text align, transform type) so it
+ * can be reused across different toolbar layouts.
+ *
+ * Uses `useEditor()` internally. Pass a `canvasEditorRef` to enable
+ * character-level rich text formatting during text editing mode.
+ *
+ * @param options - Configuration options
+ * @returns Text toolbar state and handler functions
+ *
+ * @example
+ * ```tsx
+ * function MyTextToolbar() {
+ *   const toolbar = useTextToolbar({ canvasEditorRef });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={toolbar.handleBoldToggle}>
+ *         Bold: {toolbar.bold ? 'ON' : 'OFF'}
+ *       </button>
+ *       <input
+ *         type="number"
+ *         value={toolbar.fontSize}
+ *         onChange={(e) => toolbar.handleFontSizeChange(Number(e.target.value))}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTextToolbar(options?: UseTextToolbarOptions): UseTextToolbarReturn;

package/dist/hooks/useViewport.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { PanOffset } from '../contexts/ViewportContext.js';
+/**
+ * Return type for {@link useViewport}.
+ */
+export interface UseViewportReturn {
+    /** Current zoom level (1.0 = 100%) */
+    zoom: number;
+    /** Current pan offset in world coordinates */
+    panOffset: PanOffset;
+    /** Increment zoom by one step */
+    zoomIn: () => void;
+    /** Decrement zoom by one step */
+    zoomOut: () => void;
+    /** Zoom to fit the active artboard in the viewport */
+    zoomToFit: () => void;
+    /** Reset zoom to 100% and pan offset to origin */
+    resetView: () => void;
+    /** Set zoom to an exact value */
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    /** Set pan offset to an exact value */
+    setPanOffset: React.Dispatch<React.SetStateAction<PanOffset>>;
+}
+/**
+ * Returns viewport state (zoom, pan) and control functions.
+ *
+ * This hook now reads directly from ViewportContext (instead of the full
+ * EditorContext), so components using it will only re-render when viewport
+ * state changes -- not when elements, selection, or other state changes.
+ *
+ * @example
+ * ```tsx
+ * function ZoomBar() {
+ *   const { zoom, zoomIn, zoomOut, zoomToFit } = useViewport();
+ *   return (
+ *     <div>
+ *       <button onClick={zoomOut}>-</button>
+ *       <span>{Math.round(zoom * 100)}%</span>
+ *       <button onClick={zoomIn}>+</button>
+ *       <button onClick={zoomToFit}>Fit</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useViewport(): UseViewportReturn;

package/dist/icons/icon-data.d.ts

@@ -0,0 +1,2 @@
+import { IconifyIcon } from '@iconify/react';
+export declare const canvasIcons: Record<string, IconifyIcon>;

package/dist/icons/registry.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Icon Registry - Registers only the icons actually used in the canvas package
+ *
+ * This ensures icons work when the canvas package is bundled and used in
+ * consuming applications (like Next.js) where CDN icon loading may fail.
+ *
+ * Icons are auto-generated by scripts/generate-icons.ts which scans the source
+ * files and extracts only the SVG data for icons that are actually used.
+ * This dramatically reduces bundle size compared to bundling entire icon sets.
+ *
+ * To regenerate after adding new icons:
+ *   pnpm generate:icons
+ *
+ * @see https://iconify.design/docs/icons/json.html
+ */
+/**
+ * Registers all icons used in the canvas package.
+ * Call this function once when the application loads.
+ *
+ * This function registers only the ~100-150 icons actually used,
+ * rather than ~20,000+ icons from the full icon sets.
+ */
+export declare function registerCanvasIcons(): void;
+/**
+ * Ensures icons are registered exactly once.
+ * Safe to call multiple times.
+ */
+export declare function ensureIconsRegistered(): void;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './api/stable'
+export {}
+import SnowconeCanvas from './api/stable'
+export default SnowconeCanvas
+export * from './api/stable'
+export {}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("./compose-Bo108juW.cjs"),U=require("./HybridHistoryManager-BXD93pp8.cjs"),C=require("react/jsx-runtime"),o=require("react"),B=require("./ThemeContext-4mJ_y0Me.cjs"),le=require("./ElementFactory-B7UOaJSD.cjs"),de=require("./CanvasStateV1-D5GzvmnY.cjs"),it=U.createLogger("ErrorBoundary");class ze extends o.Component{constructor(e){super(e),this.resetError=()=>{this.setState({hasError:!1,error:null})},this.state={hasError:!1,error:null}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,r){if(it.error("Caught error:",e,r),this.props.onError&&this.props.onError(e,r),this.props.onCanvasError){const a={category:"unknown",message:e.message,originalError:e,recoverable:!1};this.props.onCanvasError(a)}}render(){return this.state.hasError&&this.state.error?this.props.renderError?this.props.renderError(this.state.error,this.resetError):this.props.fallback?typeof this.props.fallback=="function"?this.props.fallback(this.state.error,this.resetError):this.props.fallback:C.jsxs("div",{style:{padding:"24px",border:"2px solid var(--danger)",borderRadius:"8px",backgroundColor:"color-mix(in oklch, var(--danger) 10%, var(--background))",color:"var(--danger)",fontFamily:"system-ui, sans-serif"},children:[C.jsx("h2",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Something went wrong"}),C.jsx("pre",{style:{margin:"0 0 16px 0",padding:"12px",backgroundColor:"color-mix(in oklch, var(--danger) 15%, var(--background))",borderRadius:"4px",fontSize:"14px",overflow:"auto",maxHeight:"200px"},children:this.state.error.message}),C.jsx("button",{onClick:this.resetError,style:{padding:"8px 16px",backgroundColor:"var(--danger)",color:"var(--danger-foreground)",border:"none",borderRadius:"4px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}):this.props.children}}const ct=U.createLogger("useAutoExport");function Oe(t){const{config:e,historyManager:r,artboards:a,elements:n,onExport:l,onExportScheduled:s,isCanvasReady:c=!1}=t,d=o.useRef(null),b=o.useRef(!1),S=o.useRef({totalExports:0,skippedExports:0,lastExportTime:null,avgExportInterval:0}),[L,k]=o.useState(S.current),y=o.useRef(l);y.current=l,o.useEffect(()=>{const h=new I.AutoExportManager({...I.DEFAULT_AUTO_EXPORT_CONFIG,...e});return h.onExport(async()=>{try{await y.current(),S.current=h.getStats()}catch(R){ct.error("[useAutoExport] Export failed:",R)}}),d.current=h,()=>{h.destroy()}},[]),o.useEffect(()=>{c&&b.current&&d.current&&(b.current=!1,d.current.forceExport())},[c]),o.useEffect(()=>{d.current&&e&&d.current.updateConfig(e)},[e==null?void 0:e.enabled,e==null?void 0:e.debounceMs,e==null?void 0:e.maxWaitMs]),o.useEffect(()=>{d.current&&s&&d.current.onExportScheduled(s)},[s]),o.useEffect(()=>{if(!r||!d.current)return;const h=r.onCommandExecuted(()=>{if(d.current){if(!c){b.current=!0;return}d.current.scheduleExport()}});return()=>{h()}},[r,c]),o.useEffect(()=>{if(d.current){if(!c){b.current=!0;return}d.current.scheduleExport()}},[n,a,c]),o.useEffect(()=>U.subscribeToImageLoads(R=>{if(!d.current||!c)return;n.some(W=>W.id===R)&&d.current.scheduleExport()}),[n,c]);const T=o.useCallback(h=>{d.current&&d.current.updateConfig(h)},[]),w=o.useCallback(async()=>{d.current&&(await d.current.forceExport(),S.current=d.current.getStats(),k(S.current))},[]),P=o.useCallback(()=>{d.current&&(d.current.resetStats(),S.current=d.current.getStats(),k(S.current))},[]),A=o.useCallback(()=>{d.current&&d.current.resetChangeDetection()},[]);return{stats:L,updateConfig:T,forceExport:w,resetStats:P,resetChangeDetection:A}}const Ye=U.createLogger("useContentReady");function lt(t){var r;const e=new Set;for(const a of t)if("fontFamily"in a&&typeof a.fontFamily=="string"&&a.fontFamily&&e.add(a.fontFamily),"getRichText"in a&&typeof a.getRichText=="function")try{const n=a.getRichText();if(n!=null&&n.spans)for(const l of n.spans)(r=l.style)!=null&&r.fontFamily&&e.add(l.style.fontFamily)}catch{}return Array.from(e)}async function dt(t){if(t.length===0||typeof document>"u"||!document.fonts)return;const e=[];for(const r of t){const a=`16px "${r}"`;e.push(document.fonts.load(a))}await Promise.all(e),document.fonts.ready&&await Promise.race([document.fonts.ready,new Promise(r=>setTimeout(r,250))]),Ye.debug(`Awaited ${e.length} font(s)`)}function ut(){return new Promise(t=>requestAnimationFrame(()=>t()))}function $e(t){const{isCanvasReady:e,elements:r,hasInitialElements:a,initialElementsLoaded:n}=t,[l,s]=o.useState(!1),c=o.useRef(!1);return o.useEffect(()=>{if(l||!e||a&&!n||a&&r.length===0||c.current)return;c.current=!0;let d=!1;return(async()=>{try{const b=lt(r);if(b.length>0&&(await dt(b),d)||(await ut(),d))return;s(!0)}catch(b){Ye.error("Error during content readiness check:",b),d||s(!0)}finally{c.current=!1}})(),()=>{d=!0,c.current=!1}},[e,r,a,n,l]),l}const ft={"far-top":"t",top:"t",center:"c",bottom:"b","far-bottom":"b","far-left":"l",left:"l",right:"r","far-right":"r",tl:"tl",t:"t",tr:"tr",l:"l",c:"c",r:"r",bl:"bl",b:"b",br:"br"};function mt(t){return t&&ft[t]||"c"}function ht(t,e){const r=e.scaleMode||"cover",a=(r==="contain"?e.marginTop:0)||0,n=(r==="contain"?e.marginRight:0)||0,l=(r==="contain"?e.marginBottom:0)||0,s=(r==="contain"?e.marginLeft:0)||0,c=e.width-s-n,d=e.height-a-l,b=c/t.width,S=d/t.height,L=r==="contain"?Math.min(b,S):Math.max(b,S),k=e.scale||1,y=L*k,T=t.width*y,w=t.height*y,P=e.align||"c";let A=0,h=0;const R=T-c,E=w-d;switch(P){case"tl":A=0,h=0;break;case"t":A=-R/2,h=0;break;case"tr":A=-R,h=0;break;case"l":A=0,h=-E/2;break;case"c":default:A=-R/2,h=-E/2;break;case"r":A=-R,h=-E/2;break;case"bl":A=0,h=-E;break;case"b":A=-R/2,h=-E;break;case"br":A=-R,h=-E;break}A+=s,h+=a;const W=e.offsetX||0,F=e.offsetY||0,Y=R,_=E;return A+=W*Y,h+=F*_,A=Math.round(A),h=Math.round(h),{scale:y,width:Math.round(T),height:Math.round(w),x:A,y:h,debug:{coverScale:L,userScale:k,overflow:{x:R,y:E},alignment:P,appliedOffset:{x:W*Y,y:F*_}}}}const gt={timeout:3e4,retries:1,retryDelay:1e3,validateUrl:!0};function pt(t){try{const e=new URL(t);return["http:","https:","data:","blob:"].includes(e.protocol)}catch{return!1}}async function bt(t,e={}){const r={...gt,...e};if(r.validateUrl&&!pt(t))return{success:!1,error:new Error(`Invalid image URL: ${t}`)};let a;for(let n=0;n<=r.retries;n++)try{return await xt(t,r.timeout)}catch(l){a=l instanceof Error?l:new Error(String(l)),n<r.retries&&await vt(r.retryDelay)}return{success:!1,error:a||new Error("Failed to load image after retries")}}function xt(t,e){return new Promise(r=>{const a=new Image;a.crossOrigin="anonymous";let n=null,l=!1;const s=()=>{n&&(clearTimeout(n),n=null)},c=()=>{if(l)return;l=!0,s();const b=a.naturalWidth||a.width,S=a.naturalHeight||a.height;r({success:!0,element:a,width:b,height:S,aspectRatio:S>0?b/S:1})},d=b=>{l||(l=!0,s(),r({success:!1,error:new Error(b)}))};a.onload=c,a.onerror=()=>{d(`Failed to load image: ${t}`)},n=setTimeout(()=>{d(`Image load timed out after ${e}ms: ${t}`)},e),a.src=t})}async function Et(t,e,r={},a={}){var k,y,T,w,P,A,h;const n=await bt(t,a);if(!n.success||!n.width||!n.height)return{success:!1,error:n.error||new Error("Failed to get image dimensions")};const l={width:e.artboard.width,height:e.artboard.height,scale:e.scale,align:mt(e.alignment),offsetX:e.offsetX,offsetY:e.offsetY,scaleMode:e.scaleMode,marginTop:e.marginTop,marginRight:e.marginRight,marginBottom:e.marginBottom,marginLeft:e.marginLeft},s=ht({width:n.width,height:n.height},l),c=e.artboard.x+s.x,d=e.artboard.y+s.y,b=c+s.width/2,S=d+s.height/2;return{success:!0,element:new U.ImageElement({...r,x:b,y:S,imageUrl:t,imageAspectRatio:n.aspectRatio,preserveDimensions:!0,transformData:{type:"image",width:s.width,height:s.height,cropX:((k=r.transformData)==null?void 0:k.cropX)??0,cropY:((y=r.transformData)==null?void 0:y.cropY)??0,cropWidth:((T=r.transformData)==null?void 0:T.cropWidth)??1,cropHeight:((w=r.transformData)==null?void 0:w.cropHeight)??1,flipHorizontal:((P=r.transformData)==null?void 0:P.flipHorizontal)??!1,flipVertical:((A=r.transformData)==null?void 0:A.flipVertical)??!1,borderRadius:((h=r.transformData)==null?void 0:h.borderRadius)??0}}),placement:{artworkSize:{width:n.width,height:n.height},finalSize:{width:s.width,height:s.height},position:{x:b,y:S},scale:s.scale}}}function vt(t){return new Promise(e=>setTimeout(e,t))}const V=U.createLogger("SnowconeCanvas");function Ee(t,e,r,a){if(a<=0||!isFinite(a))return r;const n=t*r,l=e*r;if(Math.max(n,l)<=a)return r;const c=Math.max(t,e),d=a/c;return Math.min(d,r)}const Xe=o.forwardRef((t,e)=>{const{exportConfig:r,imageConfig:a,layoutConfig:n,kit:l,artboards:s,activeArtboard:c,onArtboardChange:d,initialElements:b,onChange:S,onSelectionChange:L,autoExportInterval:k,onExport:y,onExportScheduled:T,onExportStatus:w,onExportReady:P,onImageLoad:A,onImageError:h,onError:R,onReady:E,className:W,style:F,enableShortcuts:Y,overlay:_}=t,we=k,Z=t.autoExportConfig??(r==null?void 0:r.autoExportConfig),q=t.autoExportFormat??(r==null?void 0:r.format)??"dataUrl",ue=t.autoExportAll??(r==null?void 0:r.exportAll)??!1,X=t.exportScale??(r==null?void 0:r.scale)??2,j=t.maxExportSize??(r==null?void 0:r.maxSize)??4e3,ee=t.exportImageFormat??(r==null?void 0:r.imageFormat)??"png",te=t.exportImageQuality??(r==null?void 0:r.imageQuality)??.92,z=t.initialImage??(a==null?void 0:a.src),ye=t.initialImageAlignment??(a==null?void 0:a.alignment)??"center",Ae=t.initialImageScale??(a==null?void 0:a.scale)??1,Se=t.initialImageScaleMode??(a==null?void 0:a.scaleMode)??"cover",Ke=t.width??(n==null?void 0:n.width)??1200,Ve=t.height??(n==null?void 0:n.height)??1200,Re=t.viewPadding??(n==null?void 0:n.viewPadding)??.9,Ce=t.artboardBorderRadius??(n==null?void 0:n.artboardBorderRadius)??0,Ie=t.fixedMargin??(n==null?void 0:n.fixedMargin),ke=t.maxHeight??(n==null?void 0:n.maxHeight),Me=t.showRotationHandle??(n==null?void 0:n.showRotationHandle)??!0,qe=t.hideCanvas??(n==null?void 0:n.hideCanvas)??!1,Te=t.canvasWrapperClassName??(n==null?void 0:n.canvasWrapperClassName),Fe=t.canvasWrapperStyle??(n==null?void 0:n.canvasWrapperStyle),De=t.canvasCutouts??(n==null?void 0:n.canvasCutouts),fe=t.pieceGuides,Le=t.pieceFocus,Pe=Y??!0,re=o.useMemo(()=>I.resolveKit(l??"pro-studio"),[l]);o.useEffect(()=>{if(U.process$1.env.NODE_ENV==="development"&&re){const i=I.validateKit(re);i.valid||V.warn("Kit validation warnings:",i.errors),i.warnings.length>0&&V.warn("Kit validation warnings:",i.warnings)}},[re]);const ne=o.useRef(R);ne.current=R;const N=o.useCallback(i=>{var u;V.error(`[${i.category}] ${i.message}`,i.originalError),(u=ne.current)==null||u.call(ne,i)},[]);o.useEffect(()=>(le.CanvasRenderer.onRenderError=N,()=>{le.CanvasRenderer.onRenderError===N&&(le.CanvasRenderer.onRenderError=null)}),[N]);const{elements:K,setElements:ae,selectedId:He,artboardManager:M,refreshArtboards:Ge,historyManager:Qe,isCanvasReady:me,setCanvasReady:oe}=B.useEditor(),{createArtboard:Ze,selectArtboard:Je,artboards:H}=I.useArtboards(),{exportArtboard:G,exportAllArtboards:se,exportArtboardAsBlob:Q,exportAllArtboardsAsBlobs:ie}=I.useExport();o.useImperativeHandle(e,()=>({exportArtboards:async(i={})=>{const u=i.format||q,g=i.scale||X,p=i.all??!1;let m=g;if(j>0&&isFinite(j))for(const v of H){const x=Ee(v.width,v.height,g,j);m=Math.min(m,x)}const f={scale:m,format:ee,quality:te};if(p){const v=u==="blob"?await ie(f):await se(f),x={};for(const[D,O]of Object.entries(v)){const $=H.find(J=>J.id===D);$&&(x[$.name]=O)}return x}else{const v=M.getActiveArtboard();if(!v)throw new Error("[SnowconeCanvas] No active artboard found");if(u==="blob"){const x=await Q(v.id,f);return{[v.name]:x}}else{const x=await G(v.id,f);return{[v.name]:x}}}}}),[G,se,Q,ie,q,X,j,ee,te,M,H]),o.useEffect(()=>{P&&P(async()=>{const u=M.getActiveArtboard();if(!u)throw new Error("[SnowconeCanvas] No active artboard found");const g=Ee(u.width,u.height,X,j),p=q==="blob"?await Q(u.id,{scale:g}):await G(u.id,{scale:g});return{[u.name]:p}})},[P,G,Q,M,q,X,j]);const[Be,ce]=o.useState("idle"),[We,he]=o.useState(null),ge=o.useRef(void 0),pe=o.useRef(!1),Ne=o.useRef(!1),[_e,et]=o.useState(!1),tt=o.useRef(0),rt=o.useRef(0),be=o.useRef(!1);o.useEffect(()=>{if(pe.current)return;pe.current=!0;const i=s||[{name:"Design",width:Ke,height:Ve}],u=M.getAllArtboards();if(u.length>0){const g=i[0],p=u[0],m=fe?"transparent":void 0;p.name=g.name,p.width=g.width,p.height=g.height,p.clipShape=g.clipShape,g.backgroundColor?p.backgroundColor=g.backgroundColor:m&&(p.backgroundColor=m);for(let f=1;f<i.length;f++)Ze(i[f].width,i[f].height,{name:i[f].name,backgroundColor:i[f].backgroundColor??m,clipShape:i[f].clipShape})}Ge()},[]),o.useEffect(()=>{if(!(!b||b.length===0)&&!Ne.current&&pe.current){Ne.current=!0,et(!0);try{const i=le.ElementFactory.createManyFromJSON(b),u=M.getAllArtboards();if(u.length>0){const p=u[0];for(const m of i)M.addElementToArtboard(m.id,p.id)}ae(i);const g=new Set;for(const p of i){const m=p.fontFamily;typeof m=="string"&&m.trim().length>0&&g.add(m)}if(g.size>0&&typeof document<"u"){const p=document.fonts??null,m=Array.from(g).map(f=>{const v=`font-${f.replace(/\s+/g,"-").toLowerCase()}`;let x=document.getElementById(v);return x||(x=document.createElement("link"),x.id=v,x.rel="stylesheet",x.href=`https://fonts.googleapis.com/css2?family=${f.replace(/\s+/g,"+")}:wght@400;700&display=swap`,document.head.appendChild(x)),new Promise(D=>{if(x.sheet){D(f);return}const O=()=>D(f);x.addEventListener("load",O,{once:!0}),x.addEventListener("error",O,{once:!0}),setTimeout(O,4e3)})});Promise.all(m).then(f=>{if(p)return Promise.all(f.flatMap(v=>[p.load(`400 16px "${v}"`).catch(()=>{}),p.load(`700 16px "${v}"`).catch(()=>{})]))}).then(()=>{ae(f=>f.slice())})}}catch(i){V.error("Failed to load initial elements:",i);const u=i instanceof Error?i:new Error(String(i));N({category:"import",message:`Failed to load initial elements: ${u.message}`,originalError:u,recoverable:!0})}}},[b,M,ae,N]),o.useEffect(()=>{if(!c){be.current=!0;return}const i=H.find(u=>u.name===c);if(i){const u=M.getActiveArtboard();(u==null?void 0:u.name)!==c&&Je(i.id),be.current=!0}},[c,H]),o.useEffect(()=>{if(!z||ge.current===z)return;if(K.length>0){ge.current=z;return}ge.current=z,(async()=>{ce("loading"),he(null);try{const u=M.getAllArtboards();if(u.length===0)throw new Error("No artboards available");const g=[];for(const p of u){const m=s==null?void 0:s.find(x=>x.name===p.name),f=(m==null?void 0:m.scaleMode)||Se,v=await Et(z,{artboard:{width:p.width,height:p.height,x:p.x,y:p.y},alignment:(m==null?void 0:m.fitAlign)||ye,scale:Ae,scaleMode:f,marginTop:m==null?void 0:m.fitMarginTop,marginRight:m==null?void 0:m.fitMarginRight,marginBottom:m==null?void 0:m.fitMarginBottom,marginLeft:m==null?void 0:m.fitMarginLeft});v.success&&v.element?(M.addElementToArtboard(v.element.id,p.id),g.push(v.element)):V.error("Failed to load image for artboard:",p.name,v.error)}if(g.length>0)ae(p=>[...p,...g]),ce("success"),A==null||A(z);else{const p=new Error("Failed to load image into any artboard");ce("error"),he(p),h==null||h(z,p),N({category:"image",message:p.message,originalError:p,recoverable:!0})}}catch(u){const g=u instanceof Error?u:new Error(String(u));ce("error"),he(g),h==null||h(z,g),N({category:"image",message:g.message,originalError:g,recoverable:!0})}})()},[z,ye,Ae,Se]),o.useEffect(()=>{L==null||L(He)},[He,L]),o.useEffect(()=>{if(!S)return;const i=M.getActiveArtboard(),u={elements:K.map(g=>g.toJSON()),artboards:H.map(g=>({name:g.name,width:g.width,height:g.height,clipShape:g.clipShape,backgroundColor:g.backgroundColor})),activeArtboard:(i==null?void 0:i.name)||"Design"};S(u)},[K,H,S]),o.useEffect(()=>{if(!d||!be.current)return;const i=M.getActiveArtboard();i&&d(i.name)},[M.getActiveArtboardId()]);const nt=o.useCallback(async()=>{if(!y&&!w)return;const i=++rt.current,u=Date.now();let g=X;if(j>0&&isFinite(j))for(const f of H){const v=Ee(f.width,f.height,X,j);g=Math.min(g,v)}const p=M.getActiveArtboard(),m=(p==null?void 0:p.id)??"unknown";w==null||w({status:"rendering",artboardId:m}),tt.current=u;try{let f;const v={format:ee,scale:g,quality:te};if(q==="blob")if(ue){const x=await ie(v);f={};for(const[D,O]of Object.entries(x)){const $=H.find(J=>J.id===D);$&&(f[$.name]=O)}}else{const x=M.getActiveArtboard();if(!x)return;const D=await Q(x.id,v);f={[x.name]:D}}else if(ue){const x=await se(v);f={};for(const[D,O]of Object.entries(x)){const $=H.find(J=>J.id===D);$&&(f[$.name]=O)}}else{const x=M.getActiveArtboard();if(!x)return;const D=await G(x.id,v);f={[x.name]:D}}y==null||y(f),w==null||w({status:"complete",artboardId:m,result:f})}catch(f){const v=f instanceof Error?f.message:String(f);if(v.includes("Canvas ref not available"))return;const x=Date.now()-u;V.error("Export failed (export #"+i+"):",{duration:`${x}ms`,error:v});const D=f instanceof Error?f:new Error(v);w==null||w({status:"error",artboardId:m,error:D}),N({category:"export",message:D.message,originalError:D,artboardId:m,recoverable:!0})}},[y,w,ue,q,X,j,ee,te,G,se,Q,ie,H,M,K,Z,N]);o.useEffect(()=>{we!==void 0&&we>0&&V.warn("autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead.")},[]),o.useEffect(()=>{},[K]);const at=o.useCallback(()=>{if(T==null||T(),w){const i=M.getActiveArtboard();w({status:"scheduled",artboardId:(i==null?void 0:i.id)??"unknown"})}},[T,w,M]),ot=!!b&&b.length>0,xe=$e({isCanvasReady:me,elements:K,hasInitialElements:ot,initialElementsLoaded:_e}),je=o.useRef(!1);o.useEffect(()=>{xe&&!je.current&&(je.current=!0,E==null||E())},[xe,E]),Oe({config:Z?{enabled:Z.enabled??!0,debounceMs:Z.debounceMs??100,maxWaitMs:Z.maxWaitMs??1e3}:{enabled:!1},historyManager:Qe,artboards:H,elements:K,onExport:nt,onExportScheduled:at,isCanvasReady:xe}),o.useEffect(()=>{if(H.length>0&&!me){const i=requestAnimationFrame(()=>{oe(!0)});return()=>cancelAnimationFrame(i)}},[H.length,me,oe]),o.useEffect(()=>()=>{oe(!1)},[oe]);const st=o.useCallback(i=>{N({category:"unknown",message:i.message,originalError:i,recoverable:!1})},[N]);return Be==="loading"?C.jsx("div",{className:W,style:{...F,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)"},children:C.jsx(I.Spinner,{size:48})}):Be==="error"&&We?C.jsx("div",{className:W,style:{...F,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--danger, #dc2626)",padding:"1rem"},children:C.jsxs("div",{className:"text-center",children:[C.jsx("div",{className:"font-medium",children:"Failed to load image"}),C.jsx("div",{className:"text-sm mt-1 opacity-70",children:We.message})]})}):C.jsx(I.KitProvider,{kit:re,children:C.jsx("div",{className:`app-modern ${W||""}`,style:{...F,position:"relative"},children:C.jsxs(ze,{onError:st,fallback:(i,u)=>C.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",minHeight:"200px",backgroundColor:"var(--surface, #f5f5f5)",color:"var(--foreground, #333)",fontFamily:"system-ui, sans-serif",textAlign:"center"},children:[C.jsx("div",{style:{fontSize:"18px",fontWeight:600,marginBottom:"8px"},children:"Something went wrong"}),C.jsx("div",{style:{fontSize:"14px",opacity:.7,marginBottom:"16px",maxWidth:"400px"},children:i.message}),C.jsx("button",{onClick:u,style:{padding:"8px 20px",backgroundColor:"var(--primary, #333)",color:"var(--primary-foreground, #fff)",border:"none",borderRadius:"6px",fontSize:"14px",fontWeight:500,cursor:"pointer"},children:"Try again"})]}),children:[!qe&&(Te||Fe?C.jsx("div",{className:Te,style:Fe,children:C.jsx(I.Canvas,{style:{width:"100%"},fitPadding:Re,artboardBorderRadius:Ce,fixedMargin:Ie,maxHeight:ke,showRotationHandle:Me,enableShortcuts:Pe,canvasCutouts:De,pieceGuides:fe,pieceFocus:Le})}):C.jsx(I.Canvas,{style:{width:"100%"},fitPadding:Re,artboardBorderRadius:Ce,fixedMargin:Ie,maxHeight:ke,showRotationHandle:Me,enableShortcuts:Pe,canvasCutouts:De,pieceGuides:fe,pieceFocus:Le})),_]})})})});Xe.displayName="SnowconeCanvasInner";const ve=o.forwardRef((t,e)=>{var s;const{inheritTheme:r,externalProvider:a}=t,n=t.viewPadding??((s=t.layoutConfig)==null?void 0:s.viewPadding),l=C.jsx(Xe,{ref:e,...t});return a?C.jsx(B.ThemeProvider,{defaultTheme:"light",passive:r,children:l}):C.jsx(B.ThemeProvider,{defaultTheme:"light",passive:r,children:C.jsx(B.EditorProvider,{viewPadding:n,children:l})})});ve.displayName="SnowconeCanvas";const Ue=U.createLogger("useCommands");function wt(){const t=B.useEditor(),{undo:e,redo:r,canUndo:a,canRedo:n,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCommandBatch:b,executeCreateArtboard:S,executeDeleteArtboard:L,executeUpdateArtboard:k}=t,y=o.useCallback(()=>{Ue.warn("[useCommands] clearHistory is not yet implemented in EditorContext")},[]),T=o.useCallback(w=>{Ue.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext")},[]);return{undo:e,redo:r,canUndo:a,canRedo:n,clearHistory:y,clearArtboardHistory:T,executeElementUpdate:l,executeAddElement:s,executeRemoveElement:c,executeReorderElement:d,executeCreateArtboard:S,executeDeleteArtboard:L,executeUpdateArtboard:k,executeCommandBatch:b}}function yt(){const{selectedElement:t}=B.useEditor();return t??null}function At(){const{isCanvasReady:t}=B.useEditor();return t}const St=()=>{},Rt=[];function Ct(t){const{elementStore:e}=B.useElementsContext(),{executeElementUpdate:r}=B.useCommandContext(),a=o.useMemo(()=>e.getAllByName(t).filter(s=>s instanceof U.TextElement),[e,t]),n=o.useCallback(l=>{for(const s of a){const c=s.clone();c.setText(l),r(s,c)}},[a,r]);return a.length===0?{text:"",setText:St,element:null,elements:Rt,isConnected:!1}:{text:a[0].getText(),setText:n,element:a[0],elements:a,isConnected:!0}}const It=()=>{},kt=[];function Mt(t,e,r){const a=t/e;if(r>=a){const n=e,l=n*r,s=t/l;return{width:l,height:n,cropX:(1-s)/2,cropY:0,cropWidth:s,cropHeight:1}}else{const n=t,l=n/r,s=e/l;return{width:n,height:l,cropX:0,cropY:(1-s)/2,cropWidth:1,cropHeight:s}}}function Tt(t,e){const r=(e==null?void 0:e.fit)??"cover",{elementStore:a,setElements:n}=B.useElementsContext(),{executeElementUpdate:l}=B.useCommandContext(),s=o.useMemo(()=>a.getAllByName(t).filter(y=>y instanceof U.ImageElement),[a,t]),c=o.useRef(new Map);for(const k of s)if(!c.current.has(k.id)){const y=k.transformData;c.current.set(k.id,{width:y.width*y.cropWidth,height:y.height*y.cropHeight})}const d=o.useRef(s);d.current=s;const b=o.useRef(l);b.current=l;const S=o.useRef(n);S.current=n;const L=o.useCallback(k=>{const y=d.current,T=b.current;S.current;for(const w of y){const P=c.current.get(w.id);if(!P)continue;const{width:A,height:h}=P,R=w.clone();R.imageLoaded=!1,R.imageElement=null,R.isCropping=!1,R.imageUrl=k,r==="cover"?(R.preserveDimensions=!0,R.onLoadCallback=E=>{const W=E.imageAspectRatio||1,F=Mt(A,h,W);E.transformData.width=F.width,E.transformData.height=F.height,E.transformData.cropX=F.cropX,E.transformData.cropY=F.cropY,E.transformData.cropWidth=F.cropWidth,E.transformData.cropHeight=F.cropHeight,T(w,E)}):(R.preserveDimensions=!1,R.onLoadCallback=E=>{const W=E.transformData.width,F=E.transformData.height,Y=Math.min(A/W,h/F,1);Y<1&&(E.transformData.width=W*Y,E.transformData.height=F*Y),E.transformData.cropX=0,E.transformData.cropY=0,E.transformData.cropWidth=1,E.transformData.cropHeight=1,T(w,E)}),R.loadImage(k)}},[r]);return s.length===0?{imageUrl:"",setImageUrl:It,element:null,elements:kt,isConnected:!1}:{imageUrl:s[0].imageUrl,setImageUrl:L,element:s[0],elements:s,isConnected:!0}}function Ft(t){const{elementStore:e}=B.useElementsContext();return t?e.getByName(t)??null:null}function Dt(){const{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}=B.useViewportContext();return{zoom:t,panOffset:e,zoomIn:r,zoomOut:a,zoomToFit:n,resetView:l,setZoom:s,setPanOffset:c}}function Lt(t){var a;const e=((a=t.artboards)==null?void 0:a[0])||{name:"Front",width:800,height:800},r=(t.elements||[]).map(Pt);return{artboards:[{id:"artboard-1",name:e.name||"Front",x:0,y:0,width:e.width||800,height:e.height||800,backgroundColor:e.backgroundColor||"transparent",exportBackground:!1,elements:r,distressTexture:e.distressTexture,imageMask:e.imageMask}]}}function Pt(t){const e=t.type||t.transformType;return e==="image"?Ht(t):{...t,type:e}}function Ht(t){var b;const e=t.transformData||{},r=t.masks&&t.masks.length>0,a=e.width||0,n=e.height||0,l=r?a:a*(e.cropWidth??1),s=r?n:n*(e.cropHeight??1),c={id:t.id,type:"image",x:t.x||0,y:t.y||0,width:l,height:s,rotation:t.rotation||0,imageUrl:t.imageUrl,imageAspectRatio:t.imageAspectRatio};return!r&&(e.cropX!==0||e.cropY!==0||e.cropWidth!==1||e.cropHeight!==1)&&(c.cropX=e.cropX,c.cropY=e.cropY,c.cropWidth=e.cropWidth,c.cropHeight=e.cropHeight,c.needsCropPixelConversion=!0),e.flipHorizontal&&(c.flipHorizontal=e.flipHorizontal),e.flipVertical&&(c.flipVertical=e.flipVertical),e.borderRadius&&(c.borderRadius=e.borderRadius),t.opacity!==void 0&&(c.opacity=t.opacity),t.distressEffect&&(c.distressEffect=t.distressEffect),((b=t.masks)==null?void 0:b.length)>0&&(c.masks=t.masks),t.blendMode&&(c.blendMode=t.blendMode),t.knockoutParts&&(c.knockoutParts=t.knockoutParts),t.stroke&&(c.stroke=t.stroke),c}I.ensureIconsRegistered();exports.ALL_CAPABILITIES=I.ALL_CAPABILITIES;exports.COMPACT_CUSTOMIZER=I.COMPACT_CUSTOMIZER;exports.EMBED_ONLY=I.EMBED_ONLY;exports.MINIMAL_CAPABILITIES=I.MINIMAL_CAPABILITIES;exports.PRO_STUDIO=I.PRO_STUDIO;exports.createKit=I.createKit;exports.extendKit=I.extendKit;exports.resolveKit=I.resolveKit;exports.useArtboards=I.useArtboards;exports.useExport=I.useExport;exports.useLayers=I.useLayers;exports.validateKit=I.validateKit;exports.useEditor=B.useEditor;exports.deserializeState=de.deserializeState;exports.migrateState=de.migrateState;exports.serializeState=de.serializeState;exports.validateState=de.validateState;exports.ErrorBoundary=ze;exports.SnowconeCanvas=ve;exports.default=ve;exports.serializeStateForServer=Lt;exports.useAutoExport=Oe;exports.useCanvasReady=At;exports.useCommands=wt;exports.useContentReady=$e;exports.useElementByName=Ft;exports.useImageBinding=Tt;exports.useSelectedElement=yt;exports.useTextBinding=Ct;exports.useViewport=Dt;
+//# sourceMappingURL=index.js.map