@snowcone-app/canvas 0.1.0

package/dist/components/embed/ZoomControls.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface ZoomControlsProps {
+    /** CSS class name for the container */
+    className?: string;
+    /** Position of the controls */
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /** Whether to show the fit-to-screen button */
+    showFitButton?: boolean;
+    /** Whether to show the reset button */
+    showResetButton?: boolean;
+}
+/**
+ * Floating zoom controls for interactive canvas mode
+ */
+export declare const ZoomControls: React.FC<ZoomControlsProps>;
+export default ZoomControls;

package/dist/components/embed/index.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @snowcone-app/canvas - Composable canvas editor for merchandise design
+ *
+ * Provides a full-featured canvas editor with text transforms, image manipulation,
+ * layer effects, multi-artboard workflow, and Web Worker export. Designed for
+ * embedding in e-commerce apps (Shopify, Next.js, etc.).
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { SnowconeCanvas } from '@snowcone-app/canvas';
+ * import '@snowcone-app/canvas/style.css';
+ *
+ * function App() {
+ *   return <SnowconeCanvas width={800} height={800} />;
+ * }
+ * ```
+ *
+ * @example Composable layout with hooks
+ * ```tsx
+ * import {
+ *   EditorProvider,
+ *   Canvas,
+ *   useEditor,
+ *   useArtboards,
+ *   useLayers,
+ *   useExport,
+ *   LayersPanel,
+ *   ArtboardTabs,
+ * } from '@snowcone-app/canvas';
+ * import '@snowcone-app/canvas/style.css';
+ *
+ * function CustomEditor() {
+ *   return (
+ *     <EditorProvider>
+ *       <ArtboardTabs />
+ *       <Canvas style={{ width: '100%' }} />
+ *       <LayersPanel />
+ *     </EditorProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { SnowconeCanvas, SnowconeCanvas as default } from './SnowconeCanvas.js';
+export type { SnowconeCanvasProps, ArtboardConfig, CanvasState, ClipShape, AlignmentPoint, ExportStatusEvent } from './SnowconeCanvas.js';
+export { EditorProvider, useEditor } from '../../contexts/EditorContext.js';
+export type { EditorContextValue, EditorProviderProps, EditorElement, PanOffset, ExpandedPanelType } from '../../contexts/EditorContext.js';
+export { useViewportContext } from '../../contexts/ViewportContext.js';
+export type { ViewportContextValue, ViewportProviderProps } from '../../contexts/ViewportContext.js';
+export { useSelectionContext } from '../../contexts/SelectionContext.js';
+export type { SelectionContextValue, SelectionProviderProps } from '../../contexts/SelectionContext.js';
+export { useHistoryContext } from '../../contexts/HistoryContext.js';
+export type { HistoryContextValue, HistoryProviderProps } from '../../contexts/HistoryContext.js';
+export { useToolStateContext } from '../../contexts/ToolStateContext.js';
+export type { ToolStateContextValue, ToolStateProviderProps } from '../../contexts/ToolStateContext.js';
+export { ElementStore } from '../../core/ElementStore.js';
+export type { StoreElement } from '../../core/ElementStore.js';
+export { ThemeProvider, useTheme } from '../../contexts/ThemeContext.js';
+export type { Theme } from '../../contexts/ThemeContext.js';
+export { COMPACT_CUSTOMIZER, PRO_STUDIO, EMBED_ONLY, KIT_PRESETS, resolveKit, extendKit, createKit, validateKit, registerSection, getSection, getSectionIds, unregisterSection, registerBuiltinSections, registerBuiltinSectionsSync, serializeKit, loadKitFromJSON, } from '../../kits/index.js';
+export type { KitDefinition, KitPresetId, RuntimeTheme, KitValidationResult, SectionConfig, KitJSON } from '../../kits/index.js';
+export { KitProvider, useKit, useCapabilities } from '../../contexts/KitContext.js';
+export type { KitContextValue, KitProviderProps } from '../../contexts/KitContext.js';
+export { ALL_CAPABILITIES, MINIMAL_CAPABILITIES } from '../../types/capabilities.js';
+export type { EditorCapabilities, ElementType, EffectType, PanelType, ToolType } from '../../types/capabilities.js';
+export * from '../../types/public.js';
+export { Canvas } from './Canvas.js';
+export type { CanvasProps } from './Canvas.js';
+export { MenuButton } from './MenuButton.js';
+export type { MenuButtonProps } from './MenuButton.js';
+export { ContextualToolbars } from '../ContextualToolbars.js';
+export type { ContextualToolbarsProps } from '../ContextualToolbars.js';
+export { CropPanel } from '../CropPanel.js';
+export type { CropPanelProps } from '../CropPanel.js';
+export { LayersPanel } from './LayersPanel.js';
+export type { LayersPanelProps } from './LayersPanel.js';
+export { ArtboardTabs } from './ArtboardTabs.js';
+export type { ArtboardTabsProps } from './ArtboardTabs.js';
+export { ExportPanel } from './ExportPanel.js';
+export type { ExportPanelProps } from './ExportPanel.js';
+export { ImagePanel } from './ImagePanel.js';
+export type { ImagePanelProps } from './ImagePanel.js';
+export { EffectsPanel } from './EffectsPanel.js';
+export type { EffectsPanelProps } from './EffectsPanel.js';
+export { GlyphPanel } from './GlyphPanel.js';
+export type { GlyphPanelProps } from './GlyphPanel.js';
+export { ZoomControls } from './ZoomControls.js';
+export type { ZoomControlsProps } from './ZoomControls.js';
+export * from './primitives/index.js';
+export * from './ui/index.js';
+export { useTextToolbar } from '../../hooks/useTextToolbar.js';
+export type { UseTextToolbarOptions, UseTextToolbarReturn } from '../../hooks/useTextToolbar.js';
+export { TextToolbar } from '../TextToolbar.js';
+export type { TextToolbarProps } from '../TextToolbar.js';
+export * from '../text-toolbar/index.js';
+export { useArtboards } from '../../hooks/useArtboards.js';
+export type { ArtboardInfo, UseArtboardsReturn } from '../../hooks/useArtboards.js';
+export { useLayers } from '../../hooks/useLayers.js';
+export type { LayerInfo, UseLayersOptions, UseLayersReturn } from '../../hooks/useLayers.js';
+export { useExport } from '../../hooks/useExport.js';
+export type { ExportProgress, ContinuousExportOptions, UseExportReturn } from '../../hooks/useExport.js';
+export { useAutoExport } from '../../hooks/useAutoExport.js';
+export type { UseAutoExportOptions, UseAutoExportReturn } from '../../hooks/useAutoExport.js';
+export { AutoExportManager, DEFAULT_AUTO_EXPORT_CONFIG } from '../../services/AutoExportManager.js';
+export type { AutoExportConfig, AutoExportStats } from '../../services/AutoExportManager.js';
+export { useProjectLoader } from '../../hooks/useProjectLoader.js';
+export type { ProjectTemplate, ProjectMetadata, UseProjectLoaderReturn } from '../../hooks/useProjectLoader.js';
+export { useCommands } from '../../hooks/useCommands.js';
+export type { UseCommandsReturn } from '../../hooks/useCommands.js';
+export { useBreakpoint } from '../../hooks/useBreakpoint.js';
+export type { BreakpointConfig, Breakpoint, UseBreakpointReturn } from '../../hooks/useBreakpoint.js';
+export { usePerformance } from '../../hooks/usePerformance.js';
+export type { PerformanceMetrics, UsePerformanceReturn } from '../../hooks/usePerformance.js';
+export { useSelectedElement } from '../../hooks/useSelectedElement.js';
+export { useElementById } from '../../hooks/useElementById.js';
+export { useCanvasReady } from '../../hooks/useCanvasReady.js';
+export { useViewport } from '../../hooks/useViewport.js';
+export type { UseViewportReturn } from '../../hooks/useViewport.js';
+export * as testing from '../../testing/index.js';
+export { ErrorBoundary } from './ErrorBoundary.js';
+export type { ErrorBoundaryProps } from './ErrorBoundary.js';
+export { CanvasSkeleton, LayersPanelSkeleton, ToolbarSkeleton, Spinner } from './LoadingStates.js';
+export type { CanvasSkeletonProps, LayersPanelSkeletonProps, ToolbarSkeletonProps } from './LoadingStates.js';
+export * as utils from './utils/index.js';
+export { shouldPreserveSelection, preserveSelectionProps, PRESERVE_SELECTION_ATTR, } from '../../utils/selectionPreservation.js';
+export { clearImageBitmapCache, removeFromImageBitmapCache, clearRegisteredBitmapKeys, unregisterElementBitmaps, DEFAULT_MAX_BITMAP_DIMENSION, } from '../../rendering/element-serializer.js';
+export { WorkerExportManager, getSharedWorkerExportManager, terminateSharedWorkerExportManager, } from '../../utils/WorkerExportManager.js';
+export type { WorkerExportResult, WorkerBlobExportResult } from '../../utils/WorkerExportManager.js';

package/dist/components/embed/primitives/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Primitive Components - Low-level reusable UI components
+ * These are the foundational components for building custom UIs
+ *
+ * Use these to build custom toolbars, panels, and controls that match
+ * the design system used internally by Snowcone Canvas.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Slider } from '../ui';
+ * import { Dropdown } from '@snowcone-app/canvas/embed';
+ *
+ * function CustomToolbar() {
+ *   return (
+ *     <div>
+ *       <Button onClick={handleAdd}>Add Text</Button>
+ *       <Slider min={0} max={100} value={[50]} onValueChange={handleChange} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export { default as Dropdown } from '../../primitives/Dropdown';
+export type { DropdownProps } from '../../primitives/Dropdown';
+export { default as DropdownMenu } from '../../primitives/DropdownMenu';
+export type { DropdownMenuProps } from '../../primitives/DropdownMenu';
+export { default as MenuItem } from '../../primitives/MenuItem';
+export type { MenuItemProps } from '../../primitives/MenuItem';
+export { default as Panel } from '../../primitives/Panel';
+export type { PanelProps } from '../../primitives/Panel';
+export { default as Toggle } from '../../primitives/Toggle';
+export type { ToggleProps } from '../../primitives/Toggle';
+export { default as Switch } from '../../primitives/Switch';
+export type { SwitchProps } from '../../primitives/Switch';
+export { default as ButtonGroup } from '../../primitives/ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupOption } from '../../primitives/ButtonGroup';
+export { default as ControlGroup } from '../../primitives/ControlGroup';
+export type { ControlGroupProps } from '../../primitives/ControlGroup';
+export { default as SecondaryToolbar } from '../../primitives/SecondaryToolbar';
+export type { SecondaryToolbarProps } from '../../primitives/SecondaryToolbar';
+export { Surface, useSurface, surfaceVariants } from '../../ui';
+export type { SurfaceProps } from '../../ui';

package/dist/components/embed/ui/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * UI Components - Specialized components for design editor features
+ * These are higher-level components built on primitives, providing
+ * common design editor functionality like font selection, color picking, etc.
+ *
+ * Use these to quickly build custom toolbars without reinventing the wheel.
+ *
+ * @example
+ * ```tsx
+ * import { FontFamilyDropdown, ColorPickerDropdown } from '@snowcone-app/canvas/embed';
+ * import { useEditor } from '@snowcone-app/canvas/embed';
+ *
+ * function CustomTextToolbar() {
+ *   const { selectedElement, handleElementUpdate } = useEditor();
+ *
+ *   return (
+ *     <div>
+ *       <FontFamilyDropdown
+ *         value={selectedElement?.fontFamily}
+ *         onChange={(font) => {
+ *           const updated = selectedElement.clone();
+ *           updated.fontFamily = font;
+ *           handleElementUpdate(updated);
+ *         }}
+ *       />
+ *       <ColorPickerDropdown
+ *         value={selectedElement?.fontColor}
+ *         onChange={(color) => {
+ *           const updated = selectedElement.clone();
+ *           updated.fontColor = color;
+ *           handleElementUpdate(updated);
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export { default as FontBrowserDrawer } from '../../FontBrowserDrawer';
+export type { FontBrowserDrawerProps } from '../../FontBrowserDrawer';
+export { default as FontSizeDropdown } from '../../FontSizeDropdown';
+export type { FontSizeDropdownProps } from '../../FontSizeDropdown';
+export { default as ColorPickerDropdown } from '../../ColorPickerDropdown';
+export type { ColorPickerDropdownProps } from '../../ColorPickerDropdown';
+export { default as BackgroundPickerDropdown } from '../../BackgroundPickerDropdown';
+export type { BackgroundPickerDropdownProps } from '../../BackgroundPickerDropdown';
+export { default as TransformControlPanel } from '../../TransformControlPanel';
+export { default as ImageToolbar } from '../../ImageToolbar';
+export { default as ShapeToolbar } from '../../ShapeToolbar';
+export { default as PathToolbar } from '../../PathToolbar';
+export { default as ArtboardPropertiesToolbar } from '../../ArtboardPropertiesToolbar';
+export { default as MoreMenu } from '../../MoreMenu';

package/dist/components/embed/utils/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Core Utilities - Advanced utilities for extending functionality
+ * These are internal utilities exposed for advanced use cases
+ *
+ * @example
+ * ```tsx
+ * import { utils } from '@snowcone-app/canvas/embed';
+ *
+ * // Custom export with watermark
+ * async function exportWithWatermark(artboard, elements) {
+ *   const dataUrl = await utils.ExportManager.exportArtboardToImage(
+ *     artboard,
+ *     elements,
+ *     canvas,
+ *     { scale: 3 }
+ *   );
+ *
+ *   // Add watermark to dataUrl
+ *   return addWatermark(dataUrl);
+ * }
+ * ```
+ */
+export { ExportManager } from '../../../utils/ExportManager';
+export { WorkerExportManager } from '../../../utils/WorkerExportManager';
+export { ImportManager } from '../../../utils/ImportManager';
+export { generateElementPreview } from '../../../utils/ElementPreviewRenderer';
+export { FontAnalyzer } from '../../../utils/FontAnalyzer';
+export { fetchAllGoogleFonts, getAllGoogleFonts, isFontsLoaded, searchGoogleFonts, filterGoogleFontsByCategory, mapGoogleCategory } from '../../../utils/GoogleFontsService';
+export type { GoogleFontMetadata } from '../../../utils/GoogleFontsService';
+export { TextureManager } from '../../../utils/TextureManager';
+export { buildFontFeatureSettings, applyOpenTypeFeaturestoContext, renderTextWithOpenTypeFeatures, renderTextWithOpenTypeFeaturesSync, renderTextWithGlyphOverrides, renderTextWithGlyphOverridesSync, measureTextWithGlyphOverrides } from '../../../utils/GlyphRenderer';

package/dist/components/embedded/ArtboardEmbed.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { TextElement } from '../../core/TextElement.js';
+import { ImageElement } from '../../core/ImageElement.js';
+import { GroupElement } from '../../core/GroupElement.js';
+import { ShapeElement } from '../../core/ShapeElement.js';
+import { PathElement } from '../../core/PathElement.js';
+import { ArtboardElement } from '../../core/ArtboardElement.js';
+import { ArtboardManager } from '../../core/ArtboardManager.js';
+/** Union type for all canvas element types */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export interface ArtboardEmbedProps {
+    /** Elements to render */
+    elements: CanvasElement[];
+    /** Artboards in the canvas */
+    artboards: ArtboardElement[];
+    /** Artboard manager instance */
+    artboardManager: ArtboardManager;
+    /** Selected element ID */
+    selectedId: string | null;
+    /** Multi-selection IDs */
+    multiSelection: string[];
+    /** Callback when element is updated */
+    onElementUpdate: (element: CanvasElement) => void;
+    /** Set elements state */
+    setElements: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
+    /** Execute element update command */
+    executeElementUpdate: (oldElement: CanvasElement | undefined, newElement: CanvasElement) => void;
+    /** Callback when selection changes */
+    onSelectionChange: (id: string | null) => void;
+    /** Callback when multi-selection changes */
+    onMultiSelectionChange: (ids: string[]) => void;
+    /** Callback when active child changes */
+    onActiveChildChange?: (child: CanvasElement | null) => void;
+    /** Callback when text selection changes */
+    onTextSelectionChange?: () => void;
+    /** Callback when hover state changes */
+    onHoverChange?: (elementId: string | null) => void;
+    /** Callback when rotation state changes */
+    onRotationStateChange?: (isRotating: boolean) => void;
+    /** Callback when entering crop mode on an image element */
+    onCropModeEnter?: () => void;
+    /** Whether to hide interaction handles */
+    hideHandles?: boolean;
+    /** Container class name for styling */
+    className?: string;
+    /** Container style */
+    style?: React.CSSProperties;
+}
+/**
+ * ArtboardEmbed - Fit-to-container embedded editor
+ *
+ * Automatically calculates zoom to fit the artboard exactly in the container
+ * with NO gray margins visible.
+ *
+ * Example:
+ * ```tsx
+ * <div style={{ width: '400px', height: '400px' }}>
+ *   <ArtboardEmbed
+ *     elements={elements}
+ *     artboards={artboards}
+ *     artboardManager={artboardManager}
+ *     selectedId={selectedId}
+ *     onSelectionChange={setSelectedId}
+ *     // ... other props
+ *   />
+ * </div>
+ * ```
+ */
+export declare const ArtboardEmbed: React.FC<ArtboardEmbedProps>;
+export {};

package/dist/components/embedded/MerchifyThemeWrapper.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export type SnowconeThemeColor = 'default' | 'axis' | 'indigo' | 'ocean' | 'sunset' | 'lime';
+export type SnowconeThemeMode = 'light' | 'dark' | 'system';
+interface SnowconeThemeWrapperProps {
+    /**
+     * The accent color theme to apply.
+     * @default 'default'
+     */
+    color?: SnowconeThemeColor;
+    /**
+     * The mode to apply (light, dark, or system).
+     * If 'system', it will respect the user's OS preference.
+     * @default 'system'
+     */
+    mode?: SnowconeThemeMode;
+    /**
+     * The content to be themed (usually the EditorProvider and Canvas).
+     */
+    children: React.ReactNode;
+    /**
+     * Optional class name for the wrapper div.
+     */
+    className?: string;
+    /**
+     * Optional style overrides.
+     */
+    style?: React.CSSProperties;
+}
+export declare const SnowconeThemeWrapper: React.FC<SnowconeThemeWrapperProps>;
+export {};

package/dist/components/embedded/ProductPreviewCard.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type ThemeName = 'default' | 'indigo' | 'ocean' | 'sunset';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeVariant = 'default-light' | 'default-dark' | 'indigo-light' | 'indigo-dark' | 'ocean-light' | 'ocean-dark' | 'sunset-light' | 'sunset-dark';
+export interface ProductPreviewCardProps {
+    initialTheme?: ThemeVariant;
+}
+export declare const ProductPreviewCard: React.FC<ProductPreviewCardProps>;

package/dist/components/embedded/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Embedded Components - Composable artboard views for various layouts
+ *
+ * - ArtboardEmbed: Fit-to-container interactive editor (no gray margins)
+ * - More variants coming soon (read-only viewer, compact editor, etc.)
+ */
+export { ArtboardEmbed, type ArtboardEmbedProps } from './ArtboardEmbed.js';

package/dist/components/primitives/ButtonGroup.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface ButtonGroupOption<T = string> {
+    /** Option value */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Optional tooltip */
+    tooltip?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+export interface ButtonGroupProps<T = string> {
+    /** Available options */
+    options: ButtonGroupOption<T>[];
+    /** Current value */
+    value: T;
+    /** Callback when value changes */
+    onChange: (value: T) => void;
+    /** Full width buttons */
+    fullWidth?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function ButtonGroup<T = string>({ options, value, onChange, fullWidth, className, }: ButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/primitives/ControlGroup.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface ControlGroupProps {
+    /** Label text */
+    label: string;
+    /** Optional label suffix (e.g., value display "50px") */
+    labelSuffix?: React.ReactNode;
+    /** Control element(s) */
+    children: React.ReactNode;
+    /** Inline layout (label and control side-by-side) */
+    inline?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const ControlGroup: React.FC<ControlGroupProps>;
+export default ControlGroup;

package/dist/components/primitives/Dropdown.d.ts

@@ -0,0 +1,27 @@
+import { default as React, ReactNode } from 'react';
+type DropdownPosition = 'top' | 'bottom' | 'left' | 'right';
+type DropdownAlign = 'start' | 'center' | 'end';
+export interface DropdownProps {
+    /** Trigger element that opens the dropdown when clicked */
+    trigger: ReactNode;
+    /** Dropdown content */
+    children: ReactNode;
+    /** Whether the dropdown is currently open */
+    isOpen: boolean;
+    /** Callback when dropdown open state changes */
+    onToggle: (open: boolean) => void;
+    /** Position relative to trigger (default: bottom) */
+    position?: DropdownPosition;
+    /** Alignment along the position axis (default: start) */
+    align?: DropdownAlign;
+    /** Distance from trigger in pixels (default: 8) */
+    offset?: number;
+    /** Protect canvas from clicks when opening (default: true) */
+    protectClick?: boolean;
+    /** Additional CSS classes for container */
+    className?: string;
+    /** Additional CSS classes for content */
+    contentClassName?: string;
+}
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/components/primitives/DropdownMenu.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ReactNode } from 'react';
+export interface DropdownMenuProps {
+    children: ReactNode;
+    className?: string;
+    minWidth?: string;
+    maxHeight?: string;
+}
+declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export default DropdownMenu;

package/dist/components/primitives/MenuItem.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    label: string;
+    shortcut?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+export default MenuItem;

package/dist/components/primitives/Panel.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface PanelProps {
+    /** Panel title */
+    title: string;
+    /** Panel icon (optional) */
+    icon?: React.ReactNode;
+    /** Panel content */
+    children: React.ReactNode;
+    /** Enable toggle functionality (checkbox to enable/disable) */
+    enableable?: boolean;
+    /** Enabled state (only used if enableable=true) */
+    enabled?: boolean;
+    /** Callback when enabled state changes */
+    onEnabledChange?: (enabled: boolean) => void;
+    /** Enable expand/collapse functionality */
+    collapsible?: boolean;
+    /** Expanded state (only used if collapsible=true or enableable=true) */
+    expanded?: boolean;
+    /** Callback when expanded state changes */
+    onExpandChange?: (expanded: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Panel: React.FC<PanelProps>;
+export default Panel;

package/dist/components/primitives/SecondaryToolbar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface SecondaryToolbarProps {
+    isOpen: boolean;
+    onToggle: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const SecondaryToolbar: React.FC<SecondaryToolbarProps>;
+export default SecondaryToolbar;

package/dist/components/primitives/Switch.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/components/primitives/Toggle.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface ToggleProps {
+    /** Label text */
+    label: string;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Checked state */
+    checked: boolean;
+    /** Callback when checked state changes */
+    onChange: (checked: boolean) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/dist/components/primitives/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Primitives - Reusable component library
+ * These are the foundational components used throughout the app
+ */
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
+export { default as MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';
+export { default as Panel } from './Panel';
+export type { PanelProps } from './Panel';
+export { default as ControlGroup } from './ControlGroup';
+export type { ControlGroupProps } from './ControlGroup';
+export { default as ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupOption } from './ButtonGroup';
+export { default as Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { default as SecondaryToolbar } from './SecondaryToolbar';
+export type { SecondaryToolbarProps } from './SecondaryToolbar';

package/dist/components/stories/utils/MockEditorProvider.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { EditorElement } from '../../embed/index';
+import { ShapeElement } from '../../../core/ShapeElement';
+/**
+ * Default triangle shape that helps visualize canvas bounds in stories.
+ * Positioned at center (500, 500) with a semi-transparent gray fill.
+ */
+export declare const createDefaultTriangle: () => ShapeElement;
+export interface MockEditorProviderProps {
+    children: React.ReactNode;
+    initialElements?: EditorElement[];
+    initialSelection?: string | null;
+    /** If true, skips adding the default triangle marker. Default: false */
+    hideDefaultMarker?: boolean;
+    /** Configuration for the default artboard created on mount. */
+    initialArtboardConfig?: {
+        name?: string;
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        backgroundColor?: string;
+    };
+}
+/**
+ * A wrapper around EditorProvider that allows pre-populating data
+ * for testing and stories.
+ *
+ * By default, includes a semi-transparent triangle marker at the canvas center
+ * to help visualize canvas bounds. Pass `hideDefaultMarker={true}` to disable.
+ */
+export declare const MockEditorProvider: React.FC<MockEditorProviderProps>;