vibrant-tool 0.1.2 → 0.1.4

package/README.md

@@ -1,36 +1,36 @@
-## Next.js setup in consumer app
-
-Update `next.config.ts`:
-
-```ts
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  transpilePackages: ["vibrant-tool"]
-};
-
-export default nextConfig;
-```
-
-Import global styles in your app layout (`app/layout.tsx`):
-
-```ts
-import "vibrant-tool/styles.css";
-```
-
-Use the editor component:
-
-```tsx
-"use client";
-
-import { VibrantEditor } from "vibrant-tool";
-
-export default function Page() {
-  return <VibrantEditor />;
-}
-```
-
-## Exported API
-
-- `VibrantEditor`
-- `default` export: `VibrantEditor`
+## Next.js setup in consumer app
+
+Update `next.config.ts`:
+
+```ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["vibrant-tool"]
+};
+
+export default nextConfig;
+```
+
+Import global styles in your app layout (`app/layout.tsx`):
+
+```ts
+import "vibrant-tool/styles.css";
+```
+
+Use the editor component:
+
+```tsx
+"use client";
+
+import { VibrantEditor } from "vibrant-tool";
+
+export default function Page() {
+  return <VibrantEditor />;
+}
+```
+
+## Exported API
+
+- `VibrantEditor`
+- `default` export: `VibrantEditor`

package/dist/App.d.ts

@@ -1,5 +1 @@
-export default function App({ width, height, link }: {
-    width?: number;
-    height?: number;
-    link?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export default function App(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { Canvas } from 'fabric';
-export declare function useBrightnessEffect(canvas: Canvas | null, enabled: boolean): void;
+export declare function useBrightnessEffect(canvas: Canvas | null, active: boolean): void;

package/dist/lib/services/api.d.ts

@@ -9,4 +9,5 @@ interface ApiFetchOptions<TBody> {
     headers?: HeadersInit;
 }
 export declare function apiFetch<TResponse, TBody = unknown>(endpoint: string, options?: ApiFetchOptions<TBody>): Promise<TResponse>;
+export declare function apiUploadImage<TResponse, TBody = unknown>(endpoint: string, options?: ApiFetchOptions<TBody>): Promise<TResponse>;
 export {};

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

@@ -0,0 +1,10 @@
+import { ColorItem } from '../types/color.types';
+export interface ColorQuery {
+    page?: number;
+    limit?: number;
+    search?: string;
+    status?: boolean | string;
+}
+export declare const ColorService: {
+    getAll(params?: ColorQuery): Promise<ColorItem[]>;
+};

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

@@ -0,0 +1,4 @@
+import { ProductOptionResponse } from '../types/product.types';
+export declare const ProductService: {
+    getProductOptions(id: string): Promise<ProductOptionResponse>;
+};

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

@@ -0,0 +1,24 @@
+export interface QuoteItem {
+    _id?: string;
+    content: string;
+    author: string;
+    position?: number;
+    status?: boolean;
+}
+export interface QuoteResponse {
+    success: boolean;
+    data: QuoteItem[];
+    pagination?: {
+        total: number;
+        page: number;
+        limit: number;
+        totalPages: number;
+    };
+}
+export declare const QuoteService: {
+    getAllQuotes(params?: {
+        page?: number;
+        limit?: number;
+        search?: string;
+    }): Promise<QuoteItem[]>;
+};

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

@@ -1,9 +1,15 @@
-import { ElementItem, ExternalShapeType, ShapeType } from '../types/shape.types';
+import { ElementItem, ExternalShapeType, ShapeType, TextTemplateItem } from '../types/shape.types';
 type NormalizedShapeResponse = {
     items: ElementItem[];
 };
 export declare const ShapeService: {
     getAll(data: ShapeType): Promise<NormalizedShapeResponse>;
     getAllExternal(data: ExternalShapeType): Promise<NormalizedShapeResponse>;
+    getTextTemplates(data: ShapeType): Promise<{
+        items: TextTemplateItem[];
+    }>;
+    getTextTemplateById(id: string): Promise<TextTemplateItem | null>;
+    updateTextTemplate(id: string, body: any): Promise<any>;
+    convertImages(url: string): Promise<any>;
 };
 export {};

package/dist/lib/services/template-design.service.d.ts

@@ -0,0 +1,36 @@
+export interface TemplatePage {
+    side: "front" | "back";
+    designData: any;
+    image?: string;
+    order?: number;
+}
+export interface TemplateDesignItem {
+    _id: string;
+    name?: string;
+    type?: "design" | "text" | string;
+    pages: TemplatePage[];
+    designs?: any[];
+    image?: string;
+    product?: string | any;
+    category?: string | any;
+    colors?: string[];
+    industries?: string[];
+    status?: boolean;
+}
+export interface TemplateDesignResponse {
+    success: boolean;
+    data: TemplateDesignItem[];
+    message?: string;
+}
+export declare const TemplateDesignService: {
+    getTemplates(data: {
+        product?: string;
+        page: number;
+        limit: number;
+    }): Promise<TemplateDesignResponse | null>;
+    getTemplateDesignById(id: string): Promise<{
+        success: boolean;
+        data: TemplateDesignItem;
+    } | null>;
+    updateTemplateDesign(id: string, body: Partial<TemplateDesignItem>): Promise<TemplateDesignResponse | null>;
+};

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

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

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

@@ -9,3 +9,12 @@ export interface HSVColor {
     s: number;
     v: number;
 }
+export interface ColorItem {
+    _id: string;
+    colorName: string;
+    hexCode: string;
+    colorGroup?: string;
+    cmyk?: string;
+    pantone?: string;
+    status?: boolean;
+}

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

@@ -1,4 +1,5 @@
 import { Canvas, FabricObject } from 'fabric';
+import { CMYKColor } from './color.types';
 export interface AppFabricObject extends FabricObject {
     objectId?: string;
     objectName?: string;
@@ -12,13 +13,18 @@ export type SavedDesign = {
     updatedAt: number;
 };
 export interface ExtendedFabricObject extends FabricObject {
+    __cmyk?: CMYKColor;
     __isQR?: boolean;
     __qrValue?: string;
     __qrDataUrl?: string;
     __qrDark?: string;
+    __qrDarkCmyk?: CMYKColor;
     __qrLight?: string;
+    __qrLightCmyk?: CMYKColor;
     __barcodeBackground?: string;
+    __barcodeBgCmyk?: CMYKColor;
     __barcodeForeground?: string;
+    __barcodeFgCmyk?: CMYKColor;
     __isVideo?: boolean;
     videoEl?: HTMLVideoElement;
     trimStart?: number;

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

@@ -1,14 +1,12 @@
 export interface FontType {
-    pagination: boolean;
-    pageNumber: number | 1;
-    pageSize: number | 30;
-    IsAdmin: boolean;
+    page: number | 1;
+    limit: number | 30;
 }
 export interface FontItem {
     _id: string;
-    IsActive: boolean;
+    status: boolean;
     chieldFonts: {
-        IsActive: boolean;
+        status: boolean;
         fontFile: string;
         fontImage: string;
         fontName: string;
@@ -21,8 +19,6 @@ export interface FontItem {
     fontWeight: string;
 }
 export interface FontItemResponse {
-    message: {
-        data: FontItem[];
-    };
-    status: boolean;
+    data: FontItem[];
+    success: boolean;
 }

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

@@ -0,0 +1,23 @@
+export interface ProductOptionItem {
+    _id: string;
+    parentId: string;
+    width: number;
+    height: number;
+    bleedArea: number;
+    trimArea: number;
+    safetyArea: number;
+    status: boolean;
+    options: {
+        attributeItemDisplayName: string;
+        attributeItemName: string;
+        variantCode: string;
+        variantName: string;
+        variantType: string;
+    }[];
+    optionsMap?: Record<string, string>;
+    [key: string]: any;
+}
+export interface ProductOptionResponse {
+    success: boolean;
+    data: ProductOptionItem;
+}

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

@@ -1,15 +1,11 @@
 export interface ShapeType {
-    type?: string;
     category?: string | null;
-    pageNumber?: number | 1;
-    pagination?: boolean;
-    id?: string;
-    statusKey?: string;
-    statusValue?: string;
+    page?: number | 1;
+    limit?: number | 10;
 }
 export interface ElementItem {
     _id: string;
-    IsActive: boolean;
+    status: boolean;
     category: string;
     image: string;
     largeImage: string;
@@ -18,19 +14,28 @@ export interface ElementItem {
     data?: string;
 }
 export interface ElementItemResponse {
-    message: {
-        data: ElementItem[];
-    };
-    status: boolean;
+    data: ElementItem[];
+    success: boolean;
 }
 export interface ExternalItemResponse {
     data: ElementItem[];
-    status: boolean;
+    success: boolean;
 }
 export interface ExternalShapeType {
     query?: string | null;
     keyType: string | null;
-    pageNumber: number | 1;
-    pageSize: number | 30;
+    page: number | 1;
+    limit: number | 30;
     isVector: boolean;
 }
+export interface TextTemplateItem {
+    _id: string;
+    status: boolean;
+    name: string;
+    image: string;
+    jsonData: object;
+}
+export interface TextTemplateResponse {
+    data: TextTemplateItem[];
+    success: boolean;
+}

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

@@ -17,10 +17,15 @@ export declare function createLargeWorkarea(canvas: Canvas, config: VCanvasConfi
     evented: false;
     name: string;
 }, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;
-export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement, sizeInInches?: {
-    width: number;
-    height: number;
-}): Rect<{
+export interface WorkareaProductOptions {
+    bleedArea?: number;
+    trimArea?: number;
+    safetyArea?: number;
+    hideGuidelines?: boolean;
+    isTextTemplate?: boolean;
+    optionsMap?: Record<string, string>;
+}
+export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement, productData?: WorkareaProductOptions | null): Rect<{
     width: number;
     height: number;
     fill: string;

package/dist/lib/utils/color-apply.utils.d.ts

@@ -0,0 +1,23 @@
+import { CMYKColor } from '../types/color.types';
+/**
+ * Normalizes any valid CSS color or fabric color string into 6-digit #rrggbb hex.
+ */
+export declare function normalizeHexColor(c: any): string | null;
+/**
+ * Extracts all unique colors (fills and visible strokes) from selected target objects only.
+ * Avoids reading default prototype fills from Group containers.
+ */
+export declare function extractAllTargetColors(targets: any[]): string[];
+/**
+ * Extracts the primary color, opacity, and __cmyk from the first selected target object.
+ */
+export declare function extractTargetColor(targets: any[]): {
+    color?: string;
+    opacity?: number;
+    cmyk?: CMYKColor;
+};
+/**
+ * Replaces a specific color (or applies new color) across selected Fabric objects.
+ * If targetOldColor is specified, only occurrences of that color are replaced.
+ */
+export declare function applyFillToFabricObjects(objects: any[], newColor: string, alpha: number, targetOldColor: string | null | undefined, canvas: any, cmykValues?: CMYKColor): void;

package/dist/lib/utils/color-conversions.utils.d.ts

@@ -17,3 +17,7 @@ export declare function hexToRgb(hex: string): {
     g: number;
     b: number;
 };
+export declare function hexToCmyk(hex: string): CMYKColor;
+export declare function cmykToHex(c: number, m: number, y: number, k: number): string;
+export declare function convertSvgColorsToCmyk(svg: string): string;
+export declare function convertPdfToDeviceCMYK(rawBuffer: ArrayBuffer): Promise<Uint8Array>;

package/dist/lib/utils/custom-controls.d.ts

@@ -1,5 +1,5 @@
 import { Control, FabricObject } from 'fabric';
 export declare function renderRotateIcon(ctx: CanvasRenderingContext2D, left: number, top: number, fabricObject: FabricObject): void;
-export declare function createRotateControl(): Control;
+export declare function createRotateControl(size?: number, offsetY?: number): Control;
 export declare function configureObjectControls(obj: FabricObject): void;
 export declare function initializeRotateImage(): void;

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

@@ -1,2 +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>;

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

@@ -1,3 +1,4 @@
 import { Canvas } from 'fabric';
-export type PageSide = "front" | "back";
-export declare function switchCanvasPage(canvas: Canvas, currentPage: PageSide, targetPage: PageSide, pageJSON: Record<PageSide, any>, clearSelection: () => void, containerRef: React.MutableRefObject<HTMLDivElement | null>, data?: any): Promise<void>;
+import { PageSide } from '../../zustand/historyStore';
+export type { PageSide };
+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/lib/utils/qr-utils.d.ts

@@ -1,4 +1,4 @@
 import { FabricObject } from 'fabric';
 import { ExtendedFabricObject } from '../types/fabric.types';
 export declare const isQRCode: (obj?: FabricObject | null) => obj is ExtendedFabricObject;
-export declare function generateQRSVG(value: string, dark: string, light: string): Promise<string>;
+export declare function generateQRSVG(value: string, dark?: string, light?: string): Promise<string>;

package/dist/lib/utils/query-params.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Universal Query Parameter Helpers
+ * Can be used anywhere in the codebase (React components, utilities, stores, services).
+ */
+/**
+ * Get a query parameter string value by key
+ * @example const productId = getQueryParam('productId');
+ */
+export declare function getQueryParam(key: string): string | null;
+/**
+ * Get a query parameter as a number
+ * @example const width = getQueryParamNumber('width', 3.5);
+ */
+export declare function getQueryParamNumber(key: string, defaultValue?: number): number | undefined;
+/**
+ * Get a query parameter as a boolean
+ * @example const isVector = getQueryParamBoolean('isVector', false);
+ */
+export declare function getQueryParamBoolean(key: string, defaultValue?: boolean): boolean;
+/**
+ * Get all query parameters as a plain Key-Value object
+ * @example const params = getAllQueryParams();
+ */
+export declare function getAllQueryParams(): Record<string, string>;
+/**
+ * Update or set a query parameter in the current browser URL without page reload
+ */
+export declare function setQueryParam(key: string, value: string | number | boolean | null): void;

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

@@ -1,8 +1,11 @@
 import { FabricObject } from 'fabric';
+import { ExtendedFabricObject } from '../types/fabric.types';
 export declare function addSVGToCanvas(type: string | undefined, url: string): Promise<void>;
 export declare function renderSVGStringToCanvas(type: string | undefined, svg: string, options?: {
     background?: string;
     color?: string;
 }): Promise<FabricObject<Partial<import('fabric').FabricObjectProps>, import('fabric').SerializedObjectProps, import('fabric').ObjectEvents> | undefined>;
+export declare function updateBarcodeObjectColors(barcodeGroup: ExtendedFabricObject, fgColor: string, bgColor: string): void;
+export declare function updateQRObjectColors(qrGroup: ExtendedFabricObject, darkColor: string, lightColor: string): void;
 export declare function extractSVGColors(svg: FabricObject): string[];
 export declare function replaceSVGColor(svg: FabricObject, fromColor: string, toColor: string): void;

package/dist/modules/canvas/index.d.ts

@@ -1,5 +1 @@
-export default function Workspace({ width, height, link }: {
-    width?: number;
-    height?: number;
-    link?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export default function Workspace(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+export interface ChannelRowProps {
+    label: string;
+    labelColor: string;
+    /** Full accessible name for the channel (e.g. "Cyan") */
+    ariaLabel: string;
+    value: number;
+    min: number;
+    max: number;
+    gradient: string;
+    onChange: (value: number) => void;
+    /** Discrete commit. `'slider'` = drag/keypress on the track; `'input'` = the number box. */
+    onCommit?: (source: 'slider' | 'input') => void;
+    /** Part-level classes forwarded to the slider track / thumb. */
+    sliderClassName?: string;
+    sliderThumbClassName?: string;
+}
+export declare function ChannelRow({ label, labelColor, ariaLabel, value, min, max, gradient, onChange, onCommit, sliderClassName, sliderThumbClassName }: ChannelRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export interface ChannelSliderProps {
+    value: number;
+    min: number;
+    max: number;
+    gradient: string;
+    /** Accessible name for the slider (e.g. "Cyan", "Magenta") */
+    ariaLabel: string;
+    onChange: (value: number) => void;
+    /** Discrete commit — fires on pointer-up (end of a drag) and on blur */
+    onCommit?: () => void;
+    /** Extra class on the track / thumb */
+    className?: string;
+    thumbClassName?: string;
+}
+export declare function ChannelSlider({ value, min, max, gradient, ariaLabel, onChange, onCommit, className, thumbClassName }: ChannelSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,8 @@
-export default function CMYKColorPicker(): import("react/jsx-runtime").JSX.Element | null;
+import { CMYKColor } from '../../../lib/types/color.types';
+interface CMYKColorPickerProps {
+    value?: string | CMYKColor;
+    onChange?: (hexOrCmyk: any, cmyk?: CMYKColor) => void;
+    className?: string;
+}
+export default function CMYKColorPicker({ value, onChange, className }?: CMYKColorPickerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/modules/components/product-not-found/index.d.ts

@@ -0,0 +1,3 @@
+export default function ProductNotFound({ message, }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modules/index.d.ts

@@ -1,5 +1 @@
-export default function Home({ width, height, link }: {
-    width?: number;
-    height?: number;
-    link?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/modules/side-panel/color-panel/index.d.ts

@@ -0,0 +1 @@
+export default function ColorPanel(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export default function PreviewModal({ onClose }: {
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;