vibrant-tool 0.1.6 → 0.1.7

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

@@ -23,9 +23,10 @@ export interface WorkareaProductOptions {
     safetyArea?: number;
     hideGuidelines?: boolean;
     isTextTemplate?: boolean;
+    shape?: string;
     optionsMap?: Record<string, string>;
 }
-export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement, productData?: WorkareaProductOptions | null): Rect<{
+export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement, productData?: WorkareaProductOptions | null, pageSide?: string): Rect<{
     width: number;
     height: number;
     fill: string;
@@ -34,4 +35,6 @@ export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement
     name: string;
     scaleX: number;
     scaleY: number;
+    rx: number;
+    ry: number;
 }, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;

package/dist/lib/utils/export/export-svg.utils.d.ts

@@ -2,7 +2,7 @@ import { Canvas, Rect } from 'fabric';
 /**
  * Captures the workarea bounds from a Fabric canvas as a standalone SVG string
  */
-export declare function captureWorkareaSVG(canvas: Canvas, workarea?: Rect): string | null;
+export declare function captureWorkareaSVG(canvas: Canvas, workarea?: Rect, pageSide?: string): string | null;
 /**
  * Embeds external images into the SVG string as base64 data URIs
  */

package/dist/lib/utils/export/export-watermark.utils.d.ts

@@ -3,4 +3,4 @@ export declare const WATERMARK_TEXT = "vibrantprintshop";
 /**
  * Creates a calibrated watermark text object for canvas export
  */
-export declare function createWatermark(curWorkarea: Rect): IText;
+export declare function createWatermark(curWorkarea: Rect, pageSide?: string): IText;

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

@@ -1,4 +1,4 @@
 import { Canvas } from 'fabric';
-export declare function loadPageToCanvas(canvas: Canvas, json: any): Promise<void>;
-export declare function getWorkareaDataUrl(cvs: Canvas, multiplier?: number): string;
-export declare function renderPageDataUrl(json: any, baseCanvas: Canvas, multiplier?: number): Promise<string>;
+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>;

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

@@ -1,3 +1,5 @@
+import { FontItem } from '../types/font.types';
+export declare function fetchAllFontsCached(): Promise<FontItem[]>;
 /**
  * Injects a @font-face rule into document.head and ensures the browser loads it
  */

package/dist/lib/utils/mockup-generator.d.ts

@@ -7,9 +7,40 @@ export interface CardQuad {
     corners: [Point2D, Point2D, Point2D, Point2D];
     lightingAngle?: number;
 }
+export declare const HORIZONTAL_MOCKUP_CONFIG: {
+    width: number;
+    height: number;
+    defaultBgUrl: string;
+    foregroundCard: {
+        name: string;
+        corners: [Point2D, Point2D, Point2D, Point2D];
+        lightingAngle: number;
+    };
+    stackTopCard: {
+        name: string;
+        corners: [Point2D, Point2D, Point2D, Point2D];
+        lightingAngle: number;
+    };
+};
+export declare const VERTICAL_MOCKUP_CONFIG: {
+    width: number;
+    height: number;
+    defaultBgUrl: string;
+    foregroundCard: {
+        name: string;
+        corners: [Point2D, Point2D, Point2D, Point2D];
+        lightingAngle: number;
+    };
+    stackTopCard: {
+        name: string;
+        corners: [Point2D, Point2D, Point2D, Point2D];
+        lightingAngle: number;
+    };
+};
 export declare const DEFAULT_MOCKUP_CONFIG: {
     width: number;
     height: number;
+    defaultBgUrl: string;
     foregroundCard: {
         name: string;
         corners: [Point2D, Point2D, Point2D, Point2D];
@@ -21,6 +52,14 @@ export declare const DEFAULT_MOCKUP_CONFIG: {
         lightingAngle: number;
     };
 };
+/**
+ * Rotates an image or canvas 180 degrees
+ */
+export declare function rotateImage180(img: HTMLImageElement | HTMLCanvasElement): HTMLCanvasElement;
+/**
+ * Rotates an image or canvas 90 degrees clockwise
+ */
+export declare function rotateImage90(img: HTMLImageElement | HTMLCanvasElement): HTMLCanvasElement;
 /**
  * Draws a perspective-warped image onto canvas using triangle subdivision
  */
@@ -36,6 +75,7 @@ export interface GenerateMockupOptions {
     swapSides?: boolean;
     scale?: number;
     bgUrl?: string;
+    orientation?: "horizontal" | "vertical";
 }
 /**
  * Generates the full dynamic composite mockup onto an HTMLCanvasElement

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

@@ -1,3 +1,3 @@
 import { Canvas, Rect } from 'fabric';
-export declare function createOverlays(canvas: Canvas, workarea: Rect): void;
+export declare function createOverlays(canvas: Canvas, workarea: Rect, pageSide?: string): void;
 export declare function bringOverlaysToFront(canvas: Canvas): void;

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

@@ -0,0 +1,51 @@
+import { FabricObject } from 'fabric';
+export type ProductShapeType = "standard" | "rounded" | "circle" | "oval" | "leaf" | "folded" | "die-cut";
+export interface ShapeRadiusResult {
+    rx: number;
+    ry: number;
+    radiusOfCanvas: number;
+}
+export interface ShapeBounds {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+export interface GuidelineInsets {
+    bleedX: number;
+    bleedY: number;
+    safeX: number;
+    safeY: number;
+}
+/**
+ * Normalizes any raw product shape name into a standardized ProductShapeType
+ */
+export declare function detectShape(rawShape?: string): ProductShapeType;
+/**
+ * Calculates rx, ry and base radius based on shape type and dimensions
+ */
+export declare function calculateShapeRadius(shape: ProductShapeType, width: number, height: number, isVertical?: boolean): ShapeRadiusResult;
+/**
+ * Generates leaf SVG path string based on page side:
+ * - Front side: Top-Left & Bottom-Right rounded
+ * - Back side: Top-Right & Bottom-Left rounded (opposite)
+ */
+export declare function getLeafPathString(x: number, y: number, w: number, h: number, r: number, isBackSide?: boolean): string;
+/**
+ * Creates corner overlay masks for canvas editor to hide bleed outside shapes
+ */
+export declare function createShapeCornerOverlays(shape: ProductShapeType, bounds: ShapeBounds, pageSide?: string, overlayColor?: string): FabricObject[];
+/**
+ * Creates shape-specific guidelines (Trim, Safe, and Fold score lines)
+ */
+export declare function createShapeGuidelines(shape: ProductShapeType, bounds: ShapeBounds, insets: GuidelineInsets, pageSide?: string): FabricObject[];
+/**
+ * Generates vector SVG <clipPath> content (used for Vector SVG and Vector PDF exports)
+ */
+export declare function getShapeSvgClipContent(shape: ProductShapeType, bounds: ShapeBounds, pageSide?: string): string;
+/**
+ * Creates Fabric clip object for canvas export
+ */
+export declare function createShapeExportClip(shape: ProductShapeType, bounds: ShapeBounds, pageSide?: string): FabricObject | undefined;

package/dist/modules/components/color-picker/useColorPanelState.d.ts

@@ -1,7 +1,7 @@
 export declare const DEFAULT_PRESET_COLORS: string[];
 export declare function useColorPanelState(): {
-    fillMode: "gradient" | "solid";
-    setFillMode: import('react').Dispatch<import('react').SetStateAction<"gradient" | "solid">>;
+    fillMode: "solid" | "gradient";
+    setFillMode: import('react').Dispatch<import('react').SetStateAction<"solid" | "gradient">>;
     activeSelectedColor: string;
     handleSwatchClick: (hex: string) => void;
     documentColors: string[];

package/dist/vibrant-tool.css

@@ -2017,10 +2017,6 @@
     object-fit: cover;
   }
 
-  .object-fill {
-    object-fit: fill;
-  }
-
   .p-0\.5 {
     padding: calc(var(--spacing) * .5);
   }
@@ -2517,10 +2513,6 @@
     mix-blend-mode: difference;
   }
 
-  .mix-blend-overlay {
-    mix-blend-mode: overlay;
-  }
-
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);