vibrant-tool 0.1.10 → 0.1.11

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/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/vibrant-tool.css

@@ -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;
   }
@@ -1307,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));
@@ -1550,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);
   }
@@ -1562,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);
   }
@@ -1608,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);
   }
@@ -1906,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);
   }
@@ -2076,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;
   }
@@ -2272,6 +2327,10 @@
     padding-block: calc(var(--spacing) * 8);
   }
 
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
   .py-\[5px\] {
     padding-block: 5px;
   }
@@ -2308,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);
   }
@@ -2464,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);
@@ -2611,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;
   }
@@ -2624,6 +2696,10 @@
     color: var(--color-gray-400);
   }
 
+  .placeholder-gray-500::placeholder {
+    color: var(--color-gray-500);
+  }
+
   .accent-\[\#02bc71\] {
     accent-color: #02bc71;
   }
@@ -2648,6 +2724,10 @@
     opacity: .4;
   }
 
+  .opacity-50 {
+    opacity: .5;
+  }
+
   .opacity-60 {
     opacity: .6;
   }
@@ -2961,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%;
@@ -3002,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%;
@@ -3033,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);
     }
@@ -3053,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;
     }
@@ -3101,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;
     }
@@ -3163,6 +3269,10 @@
       color: var(--color-white);
     }
 
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+
     .hover\:opacity-80:hover {
       opacity: .8;
     }
@@ -3249,6 +3359,10 @@
     cursor: grabbing;
   }
 
+  .active\:bg-\[\#1a1a1a\]:active {
+    background-color: #1a1a1a;
+  }
+
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -3269,6 +3383,12 @@
     opacity: .6;
   }
 
+  @media (min-width: 40rem) {
+    .sm\:block {
+      display: block;
+    }
+  }
+
   @media (min-width: 48rem) {
     .md\:absolute {
       position: absolute;