vibrant-tool 0.1.9 → 0.1.11

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

@@ -1,2 +1,2 @@
 import { Canvas } from 'fabric';
-export declare function useKeyboardEvents(canvas: Canvas | null): void;
+export declare function useKeyboardEvents(canvasParam?: Canvas | null): void;

package/dist/lib/services/crop-image.service.d.ts

@@ -6,6 +6,7 @@ declare class CropService {
     private darkOverlay;
     private focusedImage;
     private cropZone;
+    private maskPath;
     private onEnd;
     init(canvas: Canvas): void;
     start(image: FabricImage, onEnd?: () => void): Promise<void>;

package/dist/lib/types/shape.types.d.ts

@@ -1,5 +1,6 @@
 export interface ShapeType {
     category?: string | null;
+    search?: string | null;
     page?: number | 1;
     limit?: number | 10;
 }

package/dist/lib/utils/alignment-guidelines.d.ts

@@ -0,0 +1,9 @@
+import { Canvas, FabricObject } from 'fabric';
+/**
+ * Removes active alignment guidelines from the canvas
+ */
+export declare function clearAlignmentGuidelines(canvas: Canvas | null): void;
+/**
+ * Handles automatic center and smart alignment snapping while an object is being moved
+ */
+export declare function handleObjectAlignmentSnap(canvas: Canvas, target: FabricObject): void;

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

@@ -1,4 +1,5 @@
 import { FabricImage, FabricObject } from 'fabric';
 export declare const isImage: (obj: FabricObject) => obj is FabricImage;
+export declare function flushBackgroundSave(): void;
 export declare function addBackgroundImage(url: string): Promise<void>;
-export declare function addBackgroundColor(color: string | any): Promise<void>;
+export declare function addBackgroundColor(color: string | any, immediate?: boolean): Promise<void>;

package/dist/lib/utils/grid-manager.d.ts

@@ -0,0 +1,4 @@
+import { Canvas } from 'fabric';
+export declare function getGridStep(width: number, height: number): number;
+export declare function renderGrid(canvas: Canvas | null): void;
+export declare function toggleGrid(canvas?: Canvas | null): void;

package/dist/lib/utils/page-manager.d.ts

@@ -1,4 +1,5 @@
 import { Canvas } from 'fabric';
 import { PageSide } from '../../zustand/historyStore';
 export type { PageSide };
+export declare const CUSTOM_PROPERTIES: string[];
 export declare function switchCanvasPage(canvas: Canvas, currentPage: PageSide, targetPage: PageSide, pageJSON: Record<PageSide, any>, clearSelection: () => void, containerRef: React.MutableRefObject<HTMLDivElement | null>): Promise<void>;

package/dist/modules/components/all-elements/index.d.ts

@@ -1,8 +1,11 @@
 import { RefObject } from 'react';
 import { ElementItem } from '../../../lib/types/shape.types';
-export default function AllElements({ elements, onBack, scrollRef, onSearch }: {
+export default function AllElements({ elements, onBack, scrollRef, onSearch, initialSearch, title, backText, }: {
     elements: ElementItem[];
     onBack?: () => void;
     scrollRef: RefObject<HTMLDivElement | null>;
     onSearch: (value: string) => void;
+    initialSearch?: string;
+    title?: string;
+    backText?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/modules/toolbar/text-toolbar/index.d.ts

@@ -7,5 +7,9 @@ export declare function TextAlignButton({ value, onChange }: {
     value: TextAlign;
     onChange: (v: TextAlign) => void;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TextAlignGroup({ value, onChange }: {
+    value: TextAlign;
+    onChange: (v: TextAlign) => void;
+}): import("react/jsx-runtime").JSX.Element;
 export default function TextToolbar(): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/vibrant-tool.css

@@ -78,6 +78,7 @@
     --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-200: oklch(92.5% .084 155.995);
     --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);
@@ -98,7 +99,6 @@
     --color-sky-200: oklch(90.1% .058 230.902);
     --color-sky-500: oklch(68.5% .169 237.323);
     --color-sky-900: oklch(39.1% .09 240.876);
-    --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
     --color-blue-600: oklch(54.6% .245 262.881);
@@ -152,6 +152,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --tracking-tight: -.025em;
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --leading-relaxed: 1.625;
@@ -749,6 +750,10 @@
     margin-bottom: calc(var(--spacing) * 2);
   }
 
+  .mb-2\.5 {
+    margin-bottom: calc(var(--spacing) * 2.5);
+  }
+
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -765,6 +770,10 @@
     margin-bottom: calc(var(--spacing) * 6);
   }
 
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -929,8 +938,8 @@
     height: 135px;
   }
 
-  .h-\[calc\(100dvh-180px\)\] {
-    height: calc(100dvh - 180px);
+  .h-\[calc\(100dvh-200px\)\] {
+    height: calc(100dvh - 200px);
   }
 
   .h-\[calc\(100vh-56px\)\] {
@@ -945,10 +954,6 @@
     height: calc(100vh - 126px);
   }
 
-  .h-\[calc\(100vh-160px\)\] {
-    height: calc(100vh - 160px);
-  }
-
   .h-\[calc\(100vh-165px\)\] {
     height: calc(100vh - 165px);
   }
@@ -1109,6 +1114,10 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-\[240px\] {
+    max-width: 240px;
+  }
+
   .max-w-\[360px\] {
     max-width: 360px;
   }
@@ -1275,6 +1284,10 @@
     justify-content: flex-end;
   }
 
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1303,10 +1316,6 @@
     gap: calc(var(--spacing) * 4);
   }
 
-  .gap-5 {
-    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));
@@ -1546,6 +1555,16 @@
     border-color: var(--color-gray-300);
   }
 
+  .border-gray-300\/60 {
+    border-color: #d1d5dc99;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-300\/60 {
+      border-color: color-mix(in oklab, var(--color-gray-300) 60%, transparent);
+    }
+  }
+
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
@@ -1558,6 +1577,16 @@
     border-color: var(--color-gray-700);
   }
 
+  .border-gray-700\/70 {
+    border-color: #364153b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-700\/70 {
+      border-color: color-mix(in oklab, var(--color-gray-700) 70%, transparent);
+    }
+  }
+
   .border-gray-800 {
     border-color: var(--color-gray-800);
   }
@@ -1604,6 +1633,16 @@
     border-color: var(--color-neutral-800);
   }
 
+  .border-neutral-800\/60 {
+    border-color: #26262699;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-neutral-800\/60 {
+      border-color: color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
+    }
+  }
+
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -1902,6 +1941,16 @@
     background-color: var(--color-gray-700);
   }
 
+  .bg-gray-700\/80 {
+    background-color: #364153cc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-700\/80 {
+      background-color: color-mix(in oklab, var(--color-gray-700) 80%, transparent);
+    }
+  }
+
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
@@ -1928,6 +1977,10 @@
     background-color: var(--color-neutral-200);
   }
 
+  .bg-neutral-600 {
+    background-color: var(--color-neutral-600);
+  }
+
   .bg-neutral-700 {
     background-color: var(--color-neutral-700);
   }
@@ -2068,6 +2121,16 @@
     }
   }
 
+  .bg-white\/90 {
+    background-color: #ffffffe6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/90 {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+
   .bg-white\/95 {
     background-color: #fffffff2;
   }
@@ -2264,6 +2327,10 @@
     padding-block: calc(var(--spacing) * 8);
   }
 
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
   .py-\[5px\] {
     padding-block: 5px;
   }
@@ -2300,6 +2367,10 @@
     padding-right: calc(var(--spacing) * 3);
   }
 
+  .pr-7 {
+    padding-right: calc(var(--spacing) * 7);
+  }
+
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2456,6 +2527,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -2603,6 +2679,10 @@
     font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
   }
 
+  .overline {
+    text-decoration-line: overline;
+  }
+
   .underline {
     text-decoration-line: underline;
   }
@@ -2616,6 +2696,10 @@
     color: var(--color-gray-400);
   }
 
+  .placeholder-gray-500::placeholder {
+    color: var(--color-gray-500);
+  }
+
   .accent-\[\#02bc71\] {
     accent-color: #02bc71;
   }
@@ -2640,6 +2724,10 @@
     opacity: .4;
   }
 
+  .opacity-50 {
+    opacity: .5;
+  }
+
   .opacity-60 {
     opacity: .6;
   }
@@ -2744,16 +2832,6 @@
     }
   }
 
-  .shadow-blue-200 {
-    --tw-shadow-color: oklch(88.2% .059 254.128);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .shadow-blue-200 {
-      --tw-shadow-color: color-mix(in oklab, var(--color-blue-200) var(--tw-shadow-alpha), transparent);
-    }
-  }
-
   .shadow-emerald-200\/50 {
     --tw-shadow-color: #a4f4cf80;
   }
@@ -2784,6 +2862,16 @@
     }
   }
 
+  .shadow-green-200 {
+    --tw-shadow-color: oklch(92.5% .084 155.995);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-green-200 {
+      --tw-shadow-color: color-mix(in oklab, var(--color-green-200) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
   .ring-\[\#02bc71\] {
     --tw-ring-color: #02bc71;
   }
@@ -2953,6 +3041,11 @@
   }
 
   @media (hover: hover) {
+    .group-hover\:-translate-x-0\.5:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     .group-hover\:scale-105:is(:where(.group):hover *) {
       --tw-scale-x: 105%;
       --tw-scale-y: 105%;
@@ -2994,6 +3087,15 @@
     background-color: var(--color-blue-600);
   }
 
+  .focus-within\:ring-1:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-within\:ring-neutral-600:focus-within {
+    --tw-ring-color: var(--color-neutral-600);
+  }
+
   @media (hover: hover) {
     .hover\:scale-105:hover {
       --tw-scale-x: 105%;
@@ -3025,6 +3127,10 @@
       border-color: oklab(69.9534% -.154036 .0673199 / .4);
     }
 
+    .hover\:border-gray-500:hover {
+      border-color: var(--color-gray-500);
+    }
+
     .hover\:border-neutral-400:hover {
       border-color: var(--color-neutral-400);
     }
@@ -3045,6 +3151,10 @@
       background-color: oklab(69.9534% -.154036 .0673199 / .15);
     }
 
+    .hover\:bg-\[\#2c2c2c\]:hover {
+      background-color: #2c2c2c;
+    }
+
     .hover\:bg-\[\#8f99a826\]:hover {
       background-color: #8f99a826;
     }
@@ -3093,6 +3203,10 @@
       background-color: var(--color-neutral-800);
     }
 
+    .hover\:bg-white:hover {
+      background-color: var(--color-white);
+    }
+
     .hover\:bg-white\/10:hover {
       background-color: #ffffff1a;
     }
@@ -3155,6 +3269,10 @@
       color: var(--color-white);
     }
 
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+
     .hover\:opacity-80:hover {
       opacity: .8;
     }
@@ -3241,6 +3359,10 @@
     cursor: grabbing;
   }
 
+  .active\:bg-\[\#1a1a1a\]:active {
+    background-color: #1a1a1a;
+  }
+
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -3261,6 +3383,12 @@
     opacity: .6;
   }
 
+  @media (min-width: 40rem) {
+    .sm\:block {
+      display: block;
+    }
+  }
+
   @media (min-width: 48rem) {
     .md\:absolute {
       position: absolute;