labellife-design-tool 0.2.0 → 0.4.0

package/README.md

@@ -14,7 +14,6 @@ Professional canvas editor built with React, TypeScript, and Konva.js. A powerfu
 - 📥 **Template Import** - Import JSON templates with user input collection
 - 🌐 **i18n Support** - Internationalization support (English, Dutch)
 - ⚙️ **Configurable** - Customize features, panels, and behavior
-- 🧩 **Modular Architecture** - Exclude panels, add custom panels, control features
 
 ## Installation
 
@@ -74,6 +73,9 @@ import {
   CanvasDesign, 
   Config,
   exportToPNG,
+  exportToJPG,
+  exportToJSON,
+  canvasToBlob,
   importFromJSON 
 } from 'labellife-design-tool';
 import type { CanvasElement } from 'labellife-design-tool';
@@ -89,333 +91,6 @@ function MyEditor() {
 }
 ```
 
-### Modular Configuration (v0.2.0+)
-
-The library supports a modular architecture that allows you to customize panels, features, and tools.
-
-#### Exclude Panels
-
-Hide panels you don't need:
-
-```tsx
-import { CanvasEditor } from 'labellife-design-tool';
-
-<CanvasEditor
-  name="Editor"
-  config={{
-    panels: {
-      disable: ['variables', 'export', 'background'], // Hide these panels
-    },
-  }}
-/>
-```
-
-#### Enable Only Specific Panels
-
-Show only the panels you need:
-
-```tsx
-<CanvasEditor
-  name="Minimal Editor"
-  config={{
-    panels: {
-      enable: ['elements', 'text', 'image'], // Only show these three
-    },
-  }}
-/>
-```
-
-#### Reorder Panels
-
-Customize the panel order:
-
-```tsx
-<CanvasEditor
-  name="Custom Order"
-  config={{
-    panels: {
-      order: ['text', 'elements', 'image', 'design'], // Custom order
-    },
-  }}
-/>
-```
-
-#### Feature Flags
-
-Control which features are available:
-
-```tsx
-<CanvasEditor
-  name="No Unsplash"
-  config={{
-    features: {
-      unsplash: false,        // Disable Unsplash integration
-      imageUpload: true,      // Keep image upload enabled
-      textTools: true,        // Keep text tools enabled
-      shapeTools: false,      // Disable shape tools
-    },
-  }}
-/>
-```
-
-#### Tool Configuration
-
-Control which tools are available:
-
-```tsx
-<CanvasEditor
-  name="Limited Tools"
-  config={{
-    tools: {
-      disable: ['line'], // Disable line tool
-      // Or enable only specific tools:
-      // enable: ['select', 'text'],
-    },
-  }}
-/>
-```
-
-### Adding Custom Panels
-
-You can add your own custom panels to extend the editor's functionality.
-
-#### Step 1: Create Your Custom Panel Component
-
-```tsx
-import React from 'react';
-import { PanelProps } from 'labellife-design-tool';
-import { Settings } from 'lucide-react';
-
-// Your custom panel component receives PanelProps
-const MyCustomPanel: React.FC<PanelProps> = ({
-  design,           // Current design state
-  currentPage,      // Current page
-  selectedElement,  // Currently selected element (or null)
-  selectedIds,      // Array of selected element IDs
-  setDesign,        // Function to update the design
-  updateElement,    // Function to update an element
-  deleteElement,    // Optional: Function to delete an element
-}) => {
-  return (
-    <div className="p-4">
-      <h3 className="text-white font-semibold mb-4 flex items-center gap-2">
-        <Settings className="w-5 h-5" />
-        Custom Settings
-      </h3>
-      
-      <div className="space-y-4">
-        {/* Display current design info */}
-        <div className="bg-gray-700 p-3 rounded">
-          <p className="text-sm text-gray-300">
-            Design: {design.name}
-          </p>
-          <p className="text-sm text-gray-300">
-            Pages: {design.pages.length}
-          </p>
-          <p className="text-sm text-gray-300">
-            Selected: {selectedElement?.name || 'None'}
-          </p>
-        </div>
-
-        {/* Custom actions */}
-        <button
-          onClick={() => {
-            setDesign({
-              ...design,
-              name: `Updated at ${new Date().toLocaleTimeString()}`,
-            });
-          }}
-          className="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-        >
-          Update Design Name
-        </button>
-
-        {/* Update selected element */}
-        {selectedElement && (
-          <button
-            onClick={() => {
-              updateElement(selectedElement.id, {
-                opacity: selectedElement.opacity === 1 ? 0.5 : 1,
-              });
-            }}
-            className="w-full bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
-          >
-            Toggle Opacity
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-```
-
-#### Step 2: Configure and Add Your Custom Panel
-
-```tsx
-import { CanvasEditor, CustomPanelConfig } from 'labellife-design-tool';
-import { Settings } from 'lucide-react';
-import { MyCustomPanel } from './MyCustomPanel';
-
-// Define your custom panel configuration
-const customPanel: CustomPanelConfig = {
-  id: 'my-custom-panel',        // Unique ID (must not conflict with built-in panels)
-  title: 'Custom Settings',     // Title shown in the panel header
-  icon: Settings,               // Optional: Icon component (from lucide-react or custom)
-  component: MyCustomPanel,      // Your panel component
-  
-  // Positioning options (choose one):
-  position: 'after',            // 'before' | 'after' | number
-  afterPanel: 'text',           // Insert after 'text' panel
-  // Or use:
-  // beforePanel: 'design',     // Insert before 'design' panel
-  // position: 2,               // Insert at index 2
-};
-
-// Use it in your editor
-function App() {
-  return (
-    <CanvasEditor
-      name="My Editor"
-      config={{
-        panels: {
-          custom: [customPanel], // Add your custom panel
-        },
-      }}
-    />
-  );
-}
-```
-
-#### Panel Positioning Options
-
-You can control where your custom panel appears:
-
-```tsx
-// Position after a specific panel
-{
-  id: 'panel-after',
-  position: 'after',
-  afterPanel: 'text'  // Appears after 'text' panel
-}
-
-// Position before a specific panel
-{
-  id: 'panel-before',
-  position: 'before',
-  beforePanel: 'design'  // Appears before 'design' panel
-}
-
-// Position at a specific index
-{
-  id: 'panel-index',
-  position: 2  // Appears at index 2 (0-based)
-}
-
-// Default: Add to end (no position specified)
-{
-  id: 'panel-end'
-}
-```
-
-#### Complete Example: Custom Panel with Multiple Features
-
-```tsx
-import React from 'react';
-import { CanvasEditor, CustomPanelConfig, PanelProps } from 'labellife-design-tool';
-import { Palette, Layers } from 'lucide-react';
-
-// Custom panel that manages design colors
-const ColorPalettePanel: React.FC<PanelProps> = ({
-  design,
-  setDesign,
-}) => {
-  const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
-  
-  return (
-    <div className="p-4">
-      <h3 className="text-white font-semibold mb-4">Color Palette</h3>
-      <div className="grid grid-cols-5 gap-2">
-        {colors.map((color) => (
-          <button
-            key={color}
-            onClick={() => {
-              setDesign({
-                ...design,
-                colors: [...(design.colors || []), color],
-              });
-            }}
-            className="w-10 h-10 rounded"
-            style={{ backgroundColor: color }}
-            title={color}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-// Custom panel configuration
-const colorPalettePanel: CustomPanelConfig = {
-  id: 'color-palette',
-  title: 'Colors',
-  icon: Palette,
-  component: ColorPalettePanel,
-  position: 'after',
-  afterPanel: 'design',
-};
-
-// Use multiple custom panels
-function App() {
-  return (
-    <CanvasEditor
-      name="Custom Editor"
-      config={{
-        panels: {
-          custom: [colorPalettePanel], // Add custom panel
-          disable: ['variables'],       // Hide variables panel
-          order: ['elements', 'text', 'color-palette', 'image'], // Custom order
-        },
-      }}
-    />
-  );
-}
-```
-
-#### Available Panel Props
-
-Your custom panel component receives these props:
-
-```tsx
-interface PanelProps {
-  // Core editor state
-  design: CanvasDesign;              // Current design
-  currentPage: Page;                 // Current page
-  selectedElement: CanvasElement | null;  // Selected element
-  selectedIds: string[];             // Array of selected IDs
-  
-  // Core editor actions
-  setDesign: (design: CanvasDesign) => void;
-  updateElement: (id: string, attrs: Partial<CanvasElement>) => void;
-  deleteElement?: (id: string) => void;
-  
-  // Additional props (panel-specific)
-  [key: string]: any;
-}
-```
-
-#### Built-in Panel IDs
-
-Available built-in panel IDs you can reference:
-- `'elements'` - Elements/Shapes panel
-- `'text'` - Text panel
-- `'image'` - Images panel
-- `'design'` - Design panel
-- `'background'` - Background panel
-- `'variables'` - Variables panel (if enabled)
-- `'export'` - Export panel (if enabled)
-
-For more advanced examples and API documentation, see [MODULAR_USAGE_GUIDE.md](./MODULAR_USAGE_GUIDE.md).
-
 ## Development
 
 To run the development server:
@@ -437,6 +112,53 @@ To build the app:
 bun run build:app
 ```
 
+### Canvas to Blob Export
+
+The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:
+
+```tsx
+import { canvasToBlob } from 'labellife-design-tool';
+
+// Example usage in a custom component
+const handleExport = async () => {
+  if (stageRef.current) {
+    try {
+      // Get canvas as PNG blob
+      const blob = await canvasToBlob(stageRef.current, 'png', { pixelRatio: 2 });
+      
+      // Example: Convert to base64
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+        console.log('Base64:', base64data);
+        
+        // Use base64 data with APIs, embed in other applications, etc.
+      };
+      
+      // Example: Create File object for upload
+      const file = new File([blob], 'canvas-export.png', { type: 'image/png' });
+      
+      // Example: Create object URL for display
+      const blobUrl = URL.createObjectURL(blob);
+      // Remember to revoke URL when done
+      // URL.revokeObjectURL(blobUrl);
+      
+    } catch (error) {
+      console.error('Error exporting canvas:', error);
+    }
+  }
+};
+```
+
+The `canvasToBlob` function parameters:
+
+- `stage`: The Konva.Stage object to convert
+- `format`: Output format ('png' or 'jpg')
+- `options`: Additional options object
+  - `quality`: Quality for JPG format (0-1)
+  - `pixelRatio`: Resolution multiplier (default: 2)
+
 ## Project Structure
 
 - `src/lib/index.ts` - Library entry point (npm package)

package/dist/lib/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA+ExE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAk8B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA68B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0CxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0DxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/lib/components/LeftMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ToolType, ActivePanelId, PanelConfig } from "../types";
+import { ToolType, ActivePanelId } from "../types";
 import { Config } from "../types/Config";
 export interface LeftMenuProps {
     tool: ToolType;
@@ -7,7 +7,6 @@ export interface LeftMenuProps {
     onSetTool: (tool: ToolType) => void;
     onSetActivePanel: (panel: ActivePanelId) => void;
     config?: Config;
-    panels?: PanelConfig[];
 }
 export declare const LeftMenu: React.FC<LeftMenuProps>;
 export default LeftMenu;

package/dist/lib/components/LeftMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAsBzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwJ5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAWzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/lib/components/TemplateInputModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateInputModal.d.ts","sourceRoot":"","sources":["../../../src/components/TemplateInputModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,UAAU,uBAAuB;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkazD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"TemplateInputModal.d.ts","sourceRoot":"","sources":["../../../src/components/TemplateInputModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,UAAU,uBAAuB;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2ezD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/lib/components/header/AppName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAGpB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAGpB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/lib/components/header/ExportButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExportButton.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ExportButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAW7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ExportButton.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ExportButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAW7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/header/HistoryControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/HistoryControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HistoryControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/HistoryControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/lib/components/header/ZoomControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ZoomControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/components/header/ZoomControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/sidebar/RightSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/RightSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,iBAAiB;IACzB,mBAAmB,EAAE,aAAa,EAAE,CAAC;IACrC,eAAe,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACrE,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"RightSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/RightSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,iBAAiB;IACzB,mBAAmB,EAAE,aAAa,EAAE,CAAC;IACrC,eAAe,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACrE,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqL7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/constants/themes.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Default theme configurations for LabelLife Design Tool
+ */
+import { ThemeColors } from '../types/Theme';
+/**
+ * Default dark theme (matches current styling)
+ */
+export declare const DEFAULT_THEME: ThemeColors;
+/**
+ * Light theme variant
+ */
+export declare const LIGHT_THEME: ThemeColors;
+/**
+ * Dark theme variant with higher contrast
+ */
+export declare const DARK_THEME: ThemeColors;
+//# sourceMappingURL=themes.d.ts.map

package/dist/lib/constants/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/constants/themes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,WA6B3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WA6BzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,WA6BxB,CAAC"}

package/dist/lib/contexts/ThemeContext.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ThemeColors, ThemeConfig } from '../types/Theme';
+/**
+ * Theme context type
+ */
+interface ThemeContextType {
+    theme: ThemeColors;
+}
+/**
+ * Hook to access the current theme
+ */
+export declare const useTheme: () => ThemeContextType;
+/**
+ * Theme provider component
+ */
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+    themeConfig?: ThemeConfig;
+}>;
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/lib/contexts/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI1D;;GAEG;AACH,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC;CACpB;AASD;;GAEG;AACH,eAAO,MAAM,QAAQ,wBAAiC,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAYA,CAAC"}