labellife-design-tool 0.2.0 → 0.3.0

package/README.md

@@ -175,6 +175,70 @@ Control which tools are available:
 />
 ```
 
+#### Template Input Configuration
+
+Control how template input dialogs behave when importing templates:
+
+```tsx
+<CanvasEditor
+  name="Optional Template Inputs"
+  config={{
+    templateInput: {
+      show: true,      // Whether to show the input dialog (default: true)
+      required: false, // Whether input fields are required (default: true)
+    }
+  }}
+/>
+```
+
+Options:
+- `show`: When set to `false`, no input dialog will appear when importing templates, and all template variables will remain as placeholders.
+- `required`: When set to `false`, all input fields in the dialog will be marked as optional, allowing users to skip them if desired.
+
+#### Theme Customization
+
+Customize the visual appearance with themes:
+
+```tsx
+<CanvasEditor
+  name="Custom Theme"
+  config={{
+    theme: {
+      colors: {
+        primary: '#10b981', // Green instead of blue
+        background: {
+          main: '#1e293b',    // Slate-800
+          sidebar: '#0f172a', // Slate-900
+        },
+        button: {
+          primary: {
+            background: '#10b981', // Green-600
+            hover: '#059669',     // Green-700
+          }
+        }
+      }
+    }
+  }}
+/>
+```
+
+#### Using Pre-built Themes
+
+Use one of the built-in themes:
+
+```tsx
+import { CanvasEditor, LIGHT_THEME, DARK_THEME } from 'labellife-design-tool';
+
+<CanvasEditor
+  name="Light Theme Editor"
+  config={{
+    theme: {
+      colors: LIGHT_THEME
+    }
+  }}
+/>
+```
+
 ### Adding Custom Panels
 
 You can add your own custom panels to extend the editor's functionality.

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,KAA4D,MAAM,OAAO,CAAC;AAqFjF,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,CAikC7D,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.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,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,CAkL5C,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/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"}

package/dist/lib/index.css

@@ -7,19 +7,19 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-green-400: oklch(79.2% 0.209 151.711);
-    --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
@@ -391,6 +391,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -415,6 +418,9 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-center {
     align-items: center;
   }
@@ -548,12 +554,6 @@
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
-  .border-red-500 {
-    border-color: var(--color-red-500);
-  }
   .border-r-transparent {
     border-right-color: transparent;
   }
@@ -575,33 +575,18 @@
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
-  .bg-gray-700\/50 {
-    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
-    }
-  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
-  .bg-green-500\/10 {
-    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
-    }
-  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
-  .bg-red-600 {
-    background-color: var(--color-red-600);
-  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -659,6 +644,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .text-center {
     text-align: center;
   }
@@ -710,9 +698,6 @@
   .text-gray-400 {
     color: var(--color-gray-400);
   }
-  .text-green-400 {
-    color: var(--color-green-400);
-  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -812,17 +797,31 @@
       }
     }
   }
-  .hover\:border-gray-500 {
+  .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-gray-500);
+        background-color: var(--color-blue-700);
       }
     }
   }
-  .hover\:bg-blue-700 {
+  .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-700);
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .hover\:bg-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-200);
       }
     }
   }
@@ -847,31 +846,31 @@
       }
     }
   }
-  .hover\:bg-green-700 {
+  .hover\:bg-gray-800 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-green-700);
+        background-color: var(--color-gray-800);
       }
     }
   }
-  .hover\:bg-red-600 {
+  .hover\:bg-green-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-600);
+        background-color: var(--color-green-700);
       }
     }
   }
-  .hover\:bg-red-700 {
+  .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-700);
+        background-color: var(--color-red-500);
       }
     }
   }
-  .hover\:text-red-300 {
+  .hover\:bg-red-600 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-red-300);
+        background-color: var(--color-red-600);
       }
     }
   }