vibrant-tool 0.1.5 → 0.1.7

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

@@ -11,10 +11,12 @@ export interface TemplateDesignItem {
     pages: TemplatePage[];
     designs?: any[];
     image?: string;
+    mockup?: any;
     product?: string | any;
     category?: string | any;
     colors?: string[];
     industries?: string[];
+    fonts?: any[];
     status?: boolean;
 }
 export interface TemplateDesignResponse {

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

@@ -34,6 +34,7 @@ export interface TextTemplateItem {
     name: string;
     image: string;
     jsonData: object;
+    fonts?: any[];
 }
 export interface TextTemplateResponse {
     data: TextTemplateItem[];

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

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

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/color-apply.utils.d.ts

@@ -21,3 +21,7 @@ export declare function extractTargetColor(targets: any[]): {
  * 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;
+/**
+ * Applies a Fabric Gradient to selected Fabric objects.
+ */
+export declare function applyGradientToFabricObjects(objects: any[], gradient: any, canvas: any): void;

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

@@ -1,4 +1,7 @@
 import { Canvas } from 'fabric';
+/**
+ * Main Canvas Export function for PNG, JPEG, SVG, PDF and JSON
+ */
 export declare function downloadCanvasWorkarea(canvas: Canvas, type: "png" | "jpeg" | "pdf" | "svg" | "json", scale?: number, pages?: Record<string, {
     history: any[];
 }>, currentPageSide?: string, dpi?: number): Promise<void>;

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

@@ -0,0 +1,2 @@
+export declare function triggerDownload(url: string, filename: string): void;
+export declare function exportDesignJSON(canvas: any, workarea: any): void;

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

@@ -0,0 +1,27 @@
+/**
+ * Registers custom fonts into pdfMake.vfs (base64) + pdfMake.fonts
+ * AND writes to pdfMake.virtualfs (pdfMake 0.3.x) so createPdf finds them.
+ *
+ * Follows the old pattern:
+ *   pdfMakevfs[fontName] = dataUrl.split(",")[1]
+ *   pdfMakefonts[fontName] = { normal: fontName, bold: fontName, ... }
+ *   pdfMake.vfs = pdfMakevfs
+ *   pdfMake.fonts = pdfMakefonts
+ */
+export declare function registerFontsInPdfMake(fontList: Array<{
+    fontName: string;
+    fontFile: string;
+    fontFamily?: string;
+}>): Promise<void>;
+/**
+ * Cleans SVG font-family values so they match the keys registered in pdfMake.fonts
+ */
+export declare function sanitizeSvgForPdf(svg: string): string;
+export interface VectorPDFPage {
+    svg?: string;
+    image?: string;
+}
+/**
+ * Compiles and downloads a multi-page true vector/raster PDF with DeviceCMYK color profiling
+ */
+export declare function generateAndDownloadPDF(pages: VectorPDFPage[], width: number, height: number, filename?: string): Promise<void>;

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

@@ -0,0 +1,9 @@
+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, pageSide?: string): string | null;
+/**
+ * Embeds external images into the SVG string as base64 data URIs
+ */
+export declare function processSVGWithEmbeds(svg: string): Promise<string>;

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

@@ -0,0 +1,6 @@
+import { Rect, IText } from 'fabric';
+export declare const WATERMARK_TEXT = "vibrantprintshop";
+/**
+ * Creates a calibrated watermark text object for canvas export
+ */
+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

@@ -0,0 +1,27 @@
+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
+ */
+export declare function injectFontFace(fontName: string, fontUrl: string): Promise<void>;
+/**
+ * Loads all fonts from a template (populated fonts array and/or page design JSONs) into document.head
+ */
+export declare function loadTemplateFontsIntoHead(templateFonts?: any[] | null, pagesDesignData?: any[] | any): Promise<void>;
+/**
+ * Recursively extracts all unique font families from Fabric JSON or canvas objects
+ */
+export declare function extractFontFamilies(designJson: any): string[];
+/**
+ * Resolves font family names/strings from both canvas sides to MongoDB Font ObjectIds
+ */
+export declare function resolveFontIds(fontNames: string[]): Promise<string[]>;
+export interface ExportFontItem {
+    fontName: string;
+    fontFamily?: string;
+    fontFile: string;
+}
+/**
+ * Resolves font items (with fontFile URLs) for PDF export from design JSONs and templateFonts
+ */
+export declare function resolveFontsForExport(designs: any[], templateFonts?: any[] | null): Promise<ExportFontItem[]>;

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

@@ -0,0 +1,87 @@
+export interface Point2D {
+    x: number;
+    y: number;
+}
+export interface CardQuad {
+    name: string;
+    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];
+        lightingAngle: number;
+    };
+    stackTopCard: {
+        name: string;
+        corners: [Point2D, Point2D, Point2D, Point2D];
+        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
+ */
+export declare function drawPerspectiveWarp(ctx: CanvasRenderingContext2D, img: HTMLImageElement | HTMLCanvasElement, dstCorners: [Point2D, Point2D, Point2D, Point2D], gridDivisions?: number): void;
+/**
+ * Loads an image from URL/dataURL
+ */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+export interface GenerateMockupOptions {
+    frontUrl: string;
+    backUrl?: string;
+    isTwoSided?: boolean;
+    swapSides?: boolean;
+    scale?: number;
+    bgUrl?: string;
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Generates the full dynamic composite mockup onto an HTMLCanvasElement
+ */
+export declare function renderCompositeMockup(targetCanvas: HTMLCanvasElement, options: GenerateMockupOptions): Promise<void>;
+/**
+ * Returns the final composite mockup rendered to a base64 PNG data URL
+ */
+export declare function generateMockupDataUrl(options: GenerateMockupOptions): Promise<string>;

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

@@ -0,0 +1,5 @@
+/**
+ * Navigates to a client-side route without triggering a full page reload.
+ * Triggers History API pushState and dispatches popstate event for React Router.
+ */
+export declare function spaNavigate(path: string): void;

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/AlphaSlider.d.ts

@@ -0,0 +1,9 @@
+interface AlphaSliderProps {
+    alpha: number;
+    color: string;
+    showLabel?: boolean;
+    className?: string;
+    onAlphaChange: (alpha: number) => void;
+}
+export declare function AlphaSlider({ alpha, color, showLabel, className, onAlphaChange, }: AlphaSliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { ColorItem } from '../../../lib/types/color.types';
+interface BrandPalettesSectionProps {
+    groupedDbColors: Map<string, ColorItem[]>;
+    isLoading: boolean;
+    selectedColor: string;
+    onColorClick: (hex: string) => void;
+}
+export declare function BrandPalettesSection({ groupedDbColors, isLoading, selectedColor, onColorClick, }: BrandPalettesSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,24 @@
+import { CMYKColor, HSVColor } from '../../../lib/types/color.types';
+interface CMYKPopoverContentProps {
+    color: string;
+    cmyk: CMYKColor;
+    hsv: HSVColor;
+    alpha: number;
+    mode: "HEX" | "CMYK";
+    setMode: (mode: "HEX" | "CMYK") => void;
+    copied: boolean;
+    recentColors: string[];
+    coords: {
+        top: number;
+        left: number;
+    };
+    popoverRef: React.RefObject<HTMLDivElement | null>;
+    updateFromHsv: (hsv: HSVColor) => void;
+    updateFromCmyk: (cmyk: CMYKColor) => void;
+    updateFromHex: (hex: string) => void;
+    updateAlpha: (alpha: number) => void;
+    handleCopy: () => void;
+    handleEyeDropper: () => void;
+}
+export declare function CMYKPopoverContent({ color, cmyk, hsv, alpha, mode, setMode, copied, recentColors, coords, popoverRef, updateFromHsv, updateFromCmyk, updateFromHex, updateAlpha, handleCopy, handleEyeDropper, }: CMYKPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { CMYKColor, HSVColor } from '../../../lib/types/color.types';
+interface CustomColorCardProps {
+    currentColor: string;
+    currentCmyk: CMYKColor;
+    hsv: HSVColor;
+    alpha: number;
+    colorMode: "HEX" | "CMYK";
+    setColorMode: (mode: "HEX" | "CMYK") => void;
+    updateFromHsv: (hsv: HSVColor) => void;
+    updateFromHex: (hex: string) => void;
+    updateFromCmyk: (cmyk: CMYKColor) => void;
+    setAlpha: (alpha: number) => void;
+    applyColor: (hex: string, cmyk?: CMYKColor, alpha?: number) => void;
+    handleCopyHex: () => void;
+    copied: boolean;
+    handleEyeDropper: () => void;
+}
+export declare function CustomColorCard({ currentColor, currentCmyk, hsv, alpha, colorMode, setColorMode, updateFromHsv, updateFromHex, updateFromCmyk, setAlpha, applyColor, handleCopyHex, copied, handleEyeDropper, }: CustomColorCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+interface DocumentColorsSectionProps {
+    documentColors: string[];
+    selectedColor: string;
+    onColorClick: (hex: string) => void;
+}
+export declare function DocumentColorsSection({ documentColors, selectedColor, onColorClick, }: DocumentColorsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+import { CMYKColor } from '../../../lib/types/color.types';
+interface GradientColorCardProps {
+    gradientType: "linear" | "radial";
+    setGradientType: (type: "linear" | "radial") => void;
+    gradColorMode: "HEX" | "CMYK";
+    setGradColorMode: (mode: "HEX" | "CMYK") => void;
+    gradColor1: string;
+    setGradColor1: (color: string) => void;
+    gradColor2: string;
+    setGradColor2: (color: string) => void;
+    gradColor1Cmyk: CMYKColor;
+    setGradColor1Cmyk: (cmyk: CMYKColor) => void;
+    gradColor2Cmyk: CMYKColor;
+    setGradColor2Cmyk: (cmyk: CMYKColor) => void;
+    activeGradColorSlot: 1 | 2;
+    setActiveGradColorSlot: (slot: 1 | 2) => void;
+    gradX1: number;
+    setGradX1: (val: number) => void;
+    gradX2: number;
+    setGradX2: (val: number) => void;
+    gradY1: number;
+    setGradY1: (val: number) => void;
+    gradY2: number;
+    setGradY2: (val: number) => void;
+    gradR1: number;
+    setGradR1: (val: number) => void;
+    gradR2: number;
+    setGradR2: (val: number) => void;
+    applyGradient: (params?: any) => void;
+    updateGradCmyk: (key: keyof CMYKColor, val: number) => void;
+}
+export declare function GradientColorCard({ gradientType, setGradientType, gradColorMode, setGradColorMode, gradColor1, setGradColor1, gradColor2, setGradColor2, gradColor1Cmyk, setGradColor1Cmyk, gradColor2Cmyk, setGradColor2Cmyk, activeGradColorSlot, setActiveGradColorSlot, gradX1, setGradX1, gradX2, setGradX2, gradY1, setGradY1, gradY2, setGradY2, gradR1, setGradR1, gradR2, setGradR2, applyGradient, updateGradCmyk, }: GradientColorCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { HSVColor } from '../../../lib/types/color.types';
+interface HueSliderProps {
+    hsv: HSVColor;
+    hueColor: string;
+    showLabel?: boolean;
+    className?: string;
+    onHueChange: (hsv: HSVColor) => void;
+}
+export declare function HueSlider({ hsv, hueColor, showLabel, className, onHueChange, }: HueSliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+interface ObjectColorsSectionProps {
+    objectColors: string[];
+    currentColor: string;
+    onSelectObjectColor: (hex: string, idx: number) => void;
+}
+export declare function ObjectColorsSection({ objectColors, currentColor, onSelectObjectColor, }: ObjectColorsSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,7 @@
+interface PresetColorsSectionProps {
+    presetColors: string[];
+    selectedColor: string;
+    onColorClick: (hex: string) => void;
+}
+export declare function PresetColorsSection({ presetColors, selectedColor, onColorClick, }: PresetColorsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { HSVColor } from '../../../lib/types/color.types';
+interface SVBoxProps {
+    hsv: HSVColor;
+    hueColor: string;
+    currentColor: string;
+    heightClass?: string;
+    onHsvChange: (hsv: HSVColor) => void;
+}
+export declare function SVBox({ hsv, hueColor, currentColor, heightClass, onHsvChange, }: SVBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,21 @@
-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 {};
+import { CMYKColorPicker } from './CMYKColorPicker';
+export default CMYKColorPicker;
+export { CMYKColorPicker } from './CMYKColorPicker';
+export type { CMYKColorPickerProps } from './CMYKColorPicker';
+export { CMYKPopoverContent } from './CMYKPopoverContent';
+export { SVBox } from './SVBox';
+export { HueSlider } from './HueSlider';
+export { AlphaSlider } from './AlphaSlider';
+export { ChannelRow } from './ChannelRow';
+export { ChannelSlider } from './ChannelSlider';
+export { ObjectColorsSection } from './ObjectColorsSection';
+export { CustomColorCard } from './CustomColorCard';
+export { GradientColorCard } from './GradientColorCard';
+export { DocumentColorsSection } from './DocumentColorsSection';
+export { PresetColorsSection } from './PresetColorsSection';
+export { BrandPalettesSection } from './BrandPalettesSection';
+export { useColorPanelState, DEFAULT_PRESET_COLORS } from './useColorPanelState';
+export { useCMYKPickerState, DEFAULT_SWATCH_COLORS, CMYK_CHANNELS } from './useCMYKPickerState';
+export { useSolidColorState } from './useSolidColorState';
+export { useGradientState } from './useGradientState';
+export { usePaletteData } from './usePaletteData';

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

@@ -0,0 +1,53 @@
+import { CMYKColor, HSVColor } from '../../../lib/types/color.types';
+export declare const DEFAULT_SWATCH_COLORS: string[];
+export declare const CMYK_CHANNELS: ({
+    key: "c";
+    label: string;
+    color: string;
+    name: string;
+} | {
+    key: "m";
+    label: string;
+    color: string;
+    name: string;
+} | {
+    key: "y";
+    label: string;
+    color: string;
+    name: string;
+} | {
+    key: "k";
+    label: string;
+    color: string;
+    name: string;
+})[];
+export declare function useCMYKPickerState(value?: string | CMYKColor, onChange?: (hexOrCmyk: any, cmyk?: CMYKColor) => void): {
+    isControlled: boolean;
+    targets: import('fabric').FabricObject<Partial<import('fabric').FabricObjectProps>, import('fabric').SerializedObjectProps, import('fabric').ObjectEvents>[];
+    allTargetColors: string[];
+    activeColor: string | null;
+    activeColorIndex: number;
+    setActiveColor: (color: string | null, index?: number) => void;
+    color: string;
+    cmyk: CMYKColor;
+    hsv: HSVColor;
+    alpha: number;
+    mode: "HEX" | "CMYK";
+    setMode: import('react').Dispatch<import('react').SetStateAction<"HEX" | "CMYK">>;
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    copied: boolean;
+    recentColors: string[];
+    coords: {
+        top: number;
+        left: number;
+    };
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    popoverRef: import('react').RefObject<HTMLDivElement | null>;
+    updateFromHsv: (newHsv: HSVColor) => void;
+    updateFromCmyk: (newCmyk: CMYKColor) => void;
+    updateFromHex: (inputHex: string) => void;
+    updateAlpha: (newAlpha: number) => void;
+    handleCopy: () => void;
+    handleEyeDropper: () => Promise<void>;
+};

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

@@ -0,0 +1,64 @@
+export declare const DEFAULT_PRESET_COLORS: string[];
+export declare function useColorPanelState(): {
+    fillMode: "solid" | "gradient";
+    setFillMode: import('react').Dispatch<import('react').SetStateAction<"solid" | "gradient">>;
+    activeSelectedColor: string;
+    handleSwatchClick: (hex: string) => void;
+    documentColors: string[];
+    groupedDbColors: Map<string, import('../../../lib/types/color.types').ColorItem[]>;
+    isLoadingColors: boolean;
+    gradientType: "linear" | "radial";
+    setGradientType: import('react').Dispatch<import('react').SetStateAction<"linear" | "radial">>;
+    gradColorMode: "HEX" | "CMYK";
+    setGradColorMode: import('react').Dispatch<import('react').SetStateAction<"HEX" | "CMYK">>;
+    gradColor1: string;
+    setGradColor1: import('react').Dispatch<import('react').SetStateAction<string>>;
+    gradColor2: string;
+    setGradColor2: import('react').Dispatch<import('react').SetStateAction<string>>;
+    gradColor1Cmyk: import('../../../lib/types/color.types').CMYKColor;
+    setGradColor1Cmyk: import('react').Dispatch<import('react').SetStateAction<import('../../../lib/types/color.types').CMYKColor>>;
+    gradColor2Cmyk: import('../../../lib/types/color.types').CMYKColor;
+    setGradColor2Cmyk: import('react').Dispatch<import('react').SetStateAction<import('../../../lib/types/color.types').CMYKColor>>;
+    activeGradColorSlot: 1 | 2;
+    setActiveGradColorSlot: import('react').Dispatch<import('react').SetStateAction<1 | 2>>;
+    gradX1: number;
+    setGradX1: import('react').Dispatch<import('react').SetStateAction<number>>;
+    gradX2: number;
+    setGradX2: import('react').Dispatch<import('react').SetStateAction<number>>;
+    gradY1: number;
+    setGradY1: import('react').Dispatch<import('react').SetStateAction<number>>;
+    gradY2: number;
+    setGradY2: import('react').Dispatch<import('react').SetStateAction<number>>;
+    gradR1: number;
+    setGradR1: import('react').Dispatch<import('react').SetStateAction<number>>;
+    gradR2: number;
+    setGradR2: import('react').Dispatch<import('react').SetStateAction<number>>;
+    applyGradient: (params?: {
+        type?: "linear" | "radial";
+        c1?: string;
+        c2?: string;
+        x1?: number;
+        x2?: number;
+        y1?: number;
+        y2?: number;
+        r1?: number;
+        r2?: number;
+    }) => void;
+    updateGradCmyk: (key: keyof import('../../../lib/types/color.types').CMYKColor, val: number) => void;
+    objectColors: string[];
+    currentColor: string;
+    currentCmyk: import('../../../lib/types/color.types').CMYKColor;
+    hsv: import('../../../lib/types/color.types').HSVColor;
+    alpha: number;
+    colorMode: "HEX" | "CMYK";
+    copied: boolean;
+    setAlpha: import('react').Dispatch<import('react').SetStateAction<number>>;
+    setColorMode: import('react').Dispatch<import('react').SetStateAction<"HEX" | "CMYK">>;
+    applyColor: (newHex: string, cmykVal?: import('../../../lib/types/color.types').CMYKColor, opacityVal?: number) => void;
+    updateFromHsv: (newHsv: import('../../../lib/types/color.types').HSVColor) => void;
+    updateFromCmyk: (newCmyk: import('../../../lib/types/color.types').CMYKColor) => void;
+    updateFromHex: (inputHex: string) => void;
+    handleSelectObjectColor: (hex: string, idx: number) => void;
+    handleCopyHex: () => void;
+    handleEyeDropper: () => Promise<void>;
+};