vibrant-tool 0.1.7 → 0.1.9

package/dist/lib/hooks/useCanvasZoom.d.ts

@@ -13,4 +13,7 @@ export interface CanvasZoomAPI {
     zoomReset: () => void;
     zoomTo: (value: number) => void;
 }
-export declare function useCanvasZoom(canvas: Canvas | null): CanvasZoomAPI;
+export interface CanvasZoomOptions {
+    onReset?: () => void;
+}
+export declare function useCanvasZoom(canvas: Canvas | null, options?: CanvasZoomOptions): CanvasZoomAPI;

package/dist/lib/services/background-removal.service.d.ts

@@ -0,0 +1,29 @@
+import { Canvas, FabricImage } from 'fabric';
+/**
+ * Official CDN path for @imgly/background-removal assets.
+ * Fetches the ONNX runtime binaries (.wasm) and neural network models on-demand directly
+ * from staticimgly.com instead of bundling 65 MB binaries into the local repository.
+ */
+export declare const IMGLY_CDN_PATH = "https://staticimgly.com/@imgly/background-removal-data/1.7.0/dist/";
+export declare class BackgroundRemovalService {
+    /**
+     * Automatically cuts out the background of a FabricImage using client-side AI
+     */
+    static removeBackgroundAI(canvas: Canvas, imageObj: FabricImage, onProgress?: (message: string) => void): Promise<boolean>;
+    /**
+     * Restores the original image background prior to AI cutout
+     */
+    static restoreOriginalBackground(canvas: Canvas, imageObj: FabricImage): Promise<boolean>;
+    /**
+     * Applies Fabric native RemoveColor filter for instant solid-color transparency
+     */
+    static applyColorRemovalFilter(canvas: Canvas, imageObj: FabricImage, color?: string, distance?: number, saveHistory?: boolean): void;
+    /**
+     * Removes the solid-color background filter
+     */
+    static removeColorRemovalFilter(canvas: Canvas, imageObj: FabricImage, saveHistory?: boolean): void;
+    /**
+     * Checks if an image has active background removal (AI or color filter)
+     */
+    static hasBackgroundRemoval(imageObj: FabricImage): boolean;
+}

package/dist/lib/services/upload.service.d.ts

@@ -1,4 +1,5 @@
 export declare function dataUrlToFile(dataUrl: string, filename?: string): File;
+export declare function getFullImageUrl(url: string): string;
 export declare const UploadService: {
     uploadFileApi(file: File | Blob, filename?: string): Promise<string>;
     uploadDataUrl(dataUrl: string, filename?: string): Promise<string>;

package/dist/lib/utils/canvas-setup.d.ts

@@ -5,6 +5,8 @@ export declare function createInitialWorkarea(canvas: Canvas): Rect<{
     width: number;
     height: number;
     fill: string;
+    strokeWidth: number;
+    stroke: null;
     selectable: false;
     evented: false;
     name: string;
@@ -13,6 +15,8 @@ export declare function createLargeWorkarea(canvas: Canvas, config: VCanvasConfi
     width: number;
     height: number;
     fill: string;
+    strokeWidth: number;
+    stroke: null;
     selectable: false;
     evented: false;
     name: string;
@@ -30,6 +34,8 @@ export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement
     width: number;
     height: number;
     fill: string;
+    strokeWidth: number;
+    stroke: null;
     selectable: false;
     evented: false;
     name: string;

package/dist/lib/utils/fabric-helper.d.ts

@@ -1,4 +1,7 @@
 import { Canvas } from 'fabric';
 export declare function loadPageToCanvas(canvas: Canvas, json: any, pageSide?: string): Promise<void>;
-export declare function getWorkareaDataUrl(cvs: Canvas, multiplier?: number, pageSide?: string): string;
-export declare function renderPageDataUrl(json: any, baseCanvas: Canvas, multiplier?: number, targetSide?: string): Promise<string>;
+/**
+ * Exports high-resolution Workarea data URL cleanly cropped to its exact boundary
+ */
+export declare function getWorkareaDataUrl(cvs: Canvas, multiplier?: number, pageSide?: string, includeGuidelines?: boolean): string;
+export declare function renderPageDataUrl(json: any, baseCanvas: Canvas, multiplier?: number, targetSide?: string, includeGuidelines?: boolean): Promise<string>;

package/dist/lib/utils/image-utils.d.ts

@@ -1,3 +1,7 @@
 import { FabricImage, FabricObject } from 'fabric';
 export declare const isImage: (obj: FabricObject) => obj is FabricImage;
+/**
+ * Converts any image URL (http, https, blob, relative) into a base64 Data URL
+ */
+export declare function getBase64ImageFromURL(url: string): Promise<string>;
 export declare function addImageToCanvas(url: string): Promise<void>;

package/dist/modules/components/position-picker/position-icons.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface IconProps {
+    className?: string;
+    size?: number;
+}
+export declare const AlignTopIcon: React.FC<IconProps>;
+export declare const AlignLeftIcon: React.FC<IconProps>;
+export declare const AlignMiddleIcon: React.FC<IconProps>;
+export declare const AlignCenterIcon: React.FC<IconProps>;
+export declare const AlignBottomIcon: React.FC<IconProps>;
+export declare const AlignRightIcon: React.FC<IconProps>;
+export {};

package/dist/modules/components/zoom-controls/index.d.ts

@@ -1 +1,5 @@
-export default function ZoomControls(): import("react/jsx-runtime").JSX.Element;
+interface ZoomControlsProps {
+    onReset?: () => void;
+}
+export default function ZoomControls({ onReset }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/icons/bgremoveicon/index.d.ts

@@ -0,0 +1,4 @@
+export declare function BgRemoveIcon({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modules/topbar/preview-modal.d.ts

@@ -1,3 +1,9 @@
-export default function PreviewModal({ onClose }: {
+export interface PreviewModalProps {
     onClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+    onUpload?: (urls: {
+        front: string;
+        back?: string;
+        active: string;
+    }) => void;
+}
+export default function PreviewModal({ onClose, onUpload }: PreviewModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/vibrant-tool.css

@@ -76,14 +76,19 @@
   :root, :host {
     --color-red-400: oklch(70.4% .191 22.216);
     --color-red-500: oklch(63.7% .237 25.331);
+    --color-red-700: oklch(50.5% .213 27.518);
     --color-yellow-400: oklch(85.2% .199 91.936);
     --color-green-600: oklch(62.7% .194 149.214);
     --color-green-700: oklch(52.7% .154 150.069);
     --color-emerald-50: oklch(97.9% .021 166.113);
+    --color-emerald-100: oklch(95% .052 163.051);
     --color-emerald-200: oklch(90.5% .093 164.15);
+    --color-emerald-300: oklch(84.5% .143 164.978);
     --color-emerald-400: oklch(76.5% .177 163.223);
     --color-emerald-500: oklch(69.6% .17 162.48);
     --color-emerald-600: oklch(59.6% .145 163.225);
+    --color-emerald-700: oklch(50.8% .118 165.612);
+    --color-emerald-800: oklch(43.2% .095 166.913);
     --color-emerald-900: oklch(37.8% .077 168.94);
     --color-emerald-950: oklch(26.2% .051 172.552);
     --color-teal-500: oklch(70.4% .14 182.503);
@@ -160,7 +165,6 @@
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
-    --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-xl: 24px;
@@ -451,6 +455,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -793,6 +801,10 @@
     display: none;
   }
 
+  .inline {
+    display: inline;
+  }
+
   .inline-block {
     display: inline-block;
   }
@@ -805,6 +817,10 @@
     aspect-ratio: 1;
   }
 
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
+
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -1065,14 +1081,14 @@
     width: 200px;
   }
 
-  .w-\[260px\] {
-    width: 260px;
-  }
-
   .w-\[270px\] {
     width: 270px;
   }
 
+  .w-\[280px\] {
+    width: 280px;
+  }
+
   .w-auto {
     width: auto;
   }
@@ -1093,6 +1109,10 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-\[360px\] {
+    max-width: 360px;
+  }
+
   .max-w-full {
     max-width: 100%;
   }
@@ -1121,6 +1141,10 @@
     min-width: 90px;
   }
 
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -1187,6 +1211,10 @@
     cursor: pointer;
   }
 
+  .cursor-wait {
+    cursor: wait;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -1279,6 +1307,12 @@
     gap: calc(var(--spacing) * 5);
   }
 
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-1\.5 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
@@ -1291,6 +1325,12 @@
     margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-2\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -1309,10 +1349,18 @@
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
 
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-y-3\.5 {
     row-gap: calc(var(--spacing) * 3.5);
   }
@@ -1414,6 +1462,11 @@
     border-top-width: 1px;
   }
 
+  .border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
+
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -1449,6 +1502,10 @@
     border-color: var(--color-blue-500);
   }
 
+  .border-emerald-100 {
+    border-color: var(--color-emerald-100);
+  }
+
   .border-emerald-200\/70 {
     border-color: #a4f4cfb3;
   }
@@ -1459,6 +1516,14 @@
     }
   }
 
+  .border-emerald-300 {
+    border-color: var(--color-emerald-300);
+  }
+
+  .border-emerald-600 {
+    border-color: var(--color-emerald-600);
+  }
+
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1481,6 +1546,10 @@
     border-color: var(--color-gray-300);
   }
 
+  .border-gray-400 {
+    border-color: var(--color-gray-400);
+  }
+
   .border-gray-600 {
     border-color: var(--color-gray-600);
   }
@@ -1501,6 +1570,16 @@
     border-color: var(--color-neutral-700);
   }
 
+  .border-neutral-700\/50 {
+    border-color: #40404080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-neutral-700\/50 {
+      border-color: color-mix(in oklab, var(--color-neutral-700) 50%, transparent);
+    }
+  }
+
   .border-neutral-700\/70 {
     border-color: #404040b3;
   }
@@ -1571,6 +1650,16 @@
     }
   }
 
+  .border-white\/30 {
+    border-color: #ffffff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/30 {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+
   .border-white\/40 {
     border-color: #fff6;
   }
@@ -1595,6 +1684,10 @@
     border-top-color: #0000;
   }
 
+  .border-t-white {
+    border-top-color: var(--color-white);
+  }
+
   .bg-\[\#1d1d1d\] {
     background-color: #1d1d1d;
   }
@@ -1611,6 +1704,10 @@
     background-color: oklab(69.9534% -.154036 .0673199 / .15);
   }
 
+  .bg-\[\#02bc71\]\/20 {
+    background-color: oklab(69.9534% -.154036 .0673199 / .2);
+  }
+
   .bg-\[\#2b2b2b\] {
     background-color: #2b2b2b;
   }
@@ -1663,6 +1760,16 @@
     }
   }
 
+  .bg-black\/65 {
+    background-color: #000000a6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/65 {
+      background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
+    }
+  }
+
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -1681,6 +1788,20 @@
     background-color: var(--color-blue-600);
   }
 
+  .bg-emerald-50 {
+    background-color: var(--color-emerald-50);
+  }
+
+  .bg-emerald-50\/70 {
+    background-color: #ecfdf5b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-emerald-50\/70 {
+      background-color: color-mix(in oklab, var(--color-emerald-50) 70%, transparent);
+    }
+  }
+
   .bg-emerald-50\/90 {
     background-color: #ecfdf5e6;
   }
@@ -1691,6 +1812,10 @@
     }
   }
 
+  .bg-emerald-100 {
+    background-color: var(--color-emerald-100);
+  }
+
   .bg-emerald-500 {
     background-color: var(--color-emerald-500);
   }
@@ -1761,6 +1886,10 @@
     }
   }
 
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -1851,16 +1980,6 @@
     }
   }
 
-  .bg-neutral-900\/90 {
-    background-color: #171717e6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-neutral-900\/90 {
-      background-color: color-mix(in oklab, var(--color-neutral-900) 90%, transparent);
-    }
-  }
-
   .bg-neutral-900\/95 {
     background-color: #171717f2;
   }
@@ -2097,6 +2216,10 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -2133,6 +2256,10 @@
     padding-block: calc(var(--spacing) * 5);
   }
 
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -2141,6 +2268,10 @@
     padding-block: 5px;
   }
 
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -2351,10 +2482,26 @@
     color: var(--color-emerald-200);
   }
 
+  .text-emerald-400 {
+    color: var(--color-emerald-400);
+  }
+
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
+
+  .text-emerald-800 {
+    color: var(--color-emerald-800);
+  }
+
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
 
+  .text-emerald-950 {
+    color: var(--color-emerald-950);
+  }
+
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -2419,6 +2566,10 @@
     color: var(--color-red-500);
   }
 
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
+
   .text-rose-600 {
     color: var(--color-rose-600);
   }
@@ -2647,6 +2798,16 @@
     }
   }
 
+  .ring-black\/10 {
+    --tw-ring-color: #0000001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-black\/10 {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
+
   .ring-black\/30 {
     --tw-ring-color: #0000004d;
   }
@@ -2699,6 +2860,12 @@
     filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
   }
 
+  .backdrop-blur-\[2px\] {
+    --tw-backdrop-blur: blur(2px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+  }
+
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
@@ -2717,12 +2884,6 @@
     backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
   }
 
-  .backdrop-blur-xs {
-    --tw-backdrop-blur: blur(var(--blur-xs));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-  }
-
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2808,6 +2969,10 @@
     }
   }
 
+  .peer-checked\:left-4\.5:is(:where(.peer):checked ~ *) {
+    left: calc(var(--spacing) * 4.5);
+  }
+
   .peer-checked\:left-6:is(:where(.peer):checked ~ *) {
     left: calc(var(--spacing) * 6);
   }
@@ -2884,6 +3049,10 @@
       background-color: #8f99a826;
     }
 
+    .hover\:bg-\[\#029a5d\]:hover {
+      background-color: #029a5d;
+    }
+
     .hover\:bg-\[\#333\]:hover {
       background-color: #333;
     }
@@ -3161,6 +3330,10 @@
       display: none;
     }
 
+    .md\:inline {
+      display: inline;
+    }
+
     .md\:h-20 {
       height: calc(var(--spacing) * 20);
     }