@snowcone-app/canvas 0.1.9 → 0.1.12

package/dist/components/stories/utils/MockEditorProvider.d.ts

@@ -1,32 +0,0 @@
-import { default as React } from 'react';
-import { EditorElement } from '../../embed/index';
-import { ShapeElement } from '../../../core/ShapeElement';
-/**
- * Default triangle shape that helps visualize canvas bounds in stories.
- * Positioned at center (500, 500) with a semi-transparent gray fill.
- */
-export declare const createDefaultTriangle: () => ShapeElement;
-export interface MockEditorProviderProps {
-    children: React.ReactNode;
-    initialElements?: EditorElement[];
-    initialSelection?: string | null;
-    /** If true, skips adding the default triangle marker. Default: false */
-    hideDefaultMarker?: boolean;
-    /** Configuration for the default artboard created on mount. */
-    initialArtboardConfig?: {
-        name?: string;
-        x?: number;
-        y?: number;
-        width?: number;
-        height?: number;
-        backgroundColor?: string;
-    };
-}
-/**
- * A wrapper around EditorProvider that allows pre-populating data
- * for testing and stories.
- *
- * By default, includes a semi-transparent triangle marker at the canvas center
- * to help visualize canvas bounds. Pass `hideDefaultMarker={true}` to disable.
- */
-export declare const MockEditorProvider: React.FC<MockEditorProviderProps>;

package/dist/components/stories/utils/QACanvasCard.d.ts

@@ -1,41 +0,0 @@
-import { default as React } from 'react';
-import { EditorElement } from '../../embed/index';
-export interface QACanvasCardProps {
-    /** Unique test case ID (used by capture scripts and data attributes) */
-    id: string;
-    /** Short title describing the test case */
-    title: string;
-    /** Visual expectation description — what the rendered output should look like */
-    expect: string;
-    /** Optional tags for grouping/filtering (e.g., 'stroke', 'knockout', 'text') */
-    tags?: string[];
-    /**
-     * Factory function that returns the elements to render on the canvas.
-     * May be synchronous or asynchronous (e.g., when loading fonts/images).
-     */
-    createElements: () => EditorElement[] | Promise<EditorElement[]>;
-    /** Optional callback to configure the artboard after elements are registered */
-    artboardSetup?: (artboard: any) => void;
-    /** Optional cleanup callback invoked on unmount */
-    artboardCleanup?: (artboard: any) => void;
-    /** Optional callback fired when export diff result is available */
-    onDiffResult?: (id: string, diffPercentage: number | null) => void;
-}
-/**
- * A QA card that renders canvas elements inside a labeled VisualQACard,
- * with automatic export parity comparison (main-thread vs worker).
- */
-export declare const QACanvasCard: React.FC<QACanvasCardProps>;
-export interface QADiffSummaryItem {
-    id: string;
-    diffPercentage: number | null;
-}
-/**
- * Sticky summary banner that shows which cards have non-zero diffs.
- * Place at the top of a QA story page. If all diffs are zero, shows a green "All match" bar.
- */
-export declare const QADiffSummary: React.FC<{
-    items: QADiffSummaryItem[];
-}>;
-/** Grid layout for multiple QACanvasCards. Re-exported from VisualQACard. */
-export { VisualQAGrid as QACanvasGrid } from './VisualQACard';

package/dist/components/stories/utils/VisualQACard.d.ts

@@ -1,24 +0,0 @@
-import { default as React } from 'react';
-export interface VisualQACardProps {
-    /** Unique identifier for this test case (used by capture script) */
-    id: string;
-    /** Short title describing the test case */
-    title: string;
-    /** Detailed expectation: what the rendered output should look like */
-    expect: string;
-    /** Optional tags for grouping/filtering (e.g., 'stroke', 'knockout', 'text') */
-    tags?: string[];
-    /** The canvas content to render */
-    children: React.ReactNode;
-    /** Canvas height in pixels (default: 300) */
-    height?: number;
-}
-export declare const VisualQACard: React.FC<VisualQACardProps>;
-/**
- * Grid layout for multiple VisualQACards in a story.
- */
-export declare const VisualQAGrid: React.FC<{
-    children: React.ReactNode;
-    columns?: number;
-}>;
-export default VisualQACard;

package/dist/components/stories/utils/element-factories.d.ts

@@ -1,188 +0,0 @@
-import { CustomTransform } from '../../../transforms/CustomTransform';
-import { CircleTransform } from '../../../transforms/CircleTransform';
-import { ArchTransform } from '../../../transforms/ArchTransform';
-import { WaveTransform } from '../../../transforms/WaveTransform';
-import { LeanTransform } from '../../../transforms/LeanTransform';
-import { AscendTransform } from '../../../transforms/AscendTransform';
-import { FlagTransform } from '../../../transforms/FlagTransform';
-import { ShapeElement } from '../../../core/ShapeElement';
-import { ImageElement } from '../../../core/ImageElement';
-import { EditorElement } from '../../embed/index';
-export declare const CX = 250;
-export declare const CY = 250;
-export declare function ensureGoogleFont(family: string): Promise<void>;
-/**
- * Create a test image: 100x100 red square rendered to an HTMLImageElement via canvas.
- * Using a canvas-drawn image avoids data-URL CORS issues with createImageBitmap
- * that occur inside the Storybook iframe.
- */
-export declare function createTestImage(): HTMLImageElement;
-export declare function createImageElement(overrides?: Partial<{
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}>): ImageElement;
-export declare function createPlainText(): CustomTransform[];
-export declare function createStrokeText(): CustomTransform[];
-export declare function createCircleTransform(): CircleTransform[];
-export declare function createArchTransform(): ArchTransform[];
-export declare function createWaveTransform(): WaveTransform[];
-export declare function createDistressText(): CustomTransform[];
-export declare function createShape(): ShapeElement[];
-export declare function createKnockout(): (ShapeElement | CustomTransform)[];
-export declare function createDistressBg(): CustomTransform[];
-export declare function createStrokeArch(): ArchTransform[];
-export declare function createKnockoutFillOnly(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutStrokeOnly(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutBoth(): (ShapeElement | CustomTransform)[];
-export declare function createStrokeDistress(): CustomTransform[];
-export declare function createLeanTransform(): LeanTransform[];
-export declare function createAscendTransform(): AscendTransform[];
-export declare function createFlagTransform(): FlagTransform[];
-export declare function createNormalText(): CustomTransform[];
-export declare function createBoldText(): CustomTransform[];
-export declare function createItalicText(): CustomTransform[];
-export declare function createBoldItalicText(): CustomTransform[];
-export declare function createFontOswald(): Promise<CustomTransform[]>;
-export declare function createFontOswaldBold(): Promise<CustomTransform[]>;
-export declare function createFontPlayfair(): Promise<CustomTransform[]>;
-export declare function createFontPlayfairBoldItalic(): Promise<CustomTransform[]>;
-export declare function createFontGeorgia(): CustomTransform[];
-export declare function createFontGeorgiaBold(): CustomTransform[];
-export declare function createFontLobster(): Promise<CustomTransform[]>;
-export declare function createFontBebas(): Promise<CustomTransform[]>;
-export declare function createFontPoppins(): Promise<CustomTransform[]>;
-export declare function createFontPoppinsBold(): Promise<CustomTransform[]>;
-export declare function createFontDancingScript(): Promise<CustomTransform[]>;
-/**
- * Bangers — single-weight (400-only) Google Font. Canonical regression
- * case for the worker's Google Fonts CSS2 fetch: `wght@400;700` returns
- * an empty HTTP-200 body when the font doesn't have all the requested
- * weights, so a single-weight family loses its @font-face rule entirely
- * and the export PNG silently renders with the serif fallback. The
- * worker now per-weight-fetches; keep this story so anyone who
- * refactors back gets a visible diff against main-thread rendering.
- */
-export declare function createFontBangers(): Promise<CustomTransform[]>;
-export declare function createFontRobotoSlab(): Promise<CustomTransform[]>;
-export declare function createFontRobotoSlabBold(): Promise<CustomTransform[]>;
-export declare function createFontCourierNew(): CustomTransform[];
-export declare function createFontArialBlack(): CustomTransform[];
-export declare function createUnderlineText(): CustomTransform[];
-export declare function createStrikethroughText(): CustomTransform[];
-export declare function createTextAlignLeft(): CustomTransform[];
-export declare function createTextAlignRight(): CustomTransform[];
-export declare function createMultilineWrapping(): CustomTransform[];
-export declare function createLargeFont(): CustomTransform[];
-export declare function createSmallFont(): CustomTransform[];
-export declare function createTextOpacity(): CustomTransform[];
-export declare function createShapeOpacity(): ShapeElement[];
-export declare function createStrokeOpacity(): CustomTransform[];
-export declare function createOverlappingOpacity(): ShapeElement[];
-export declare function createTextRotated45(): CustomTransform[];
-export declare function createTextRotated90(): CustomTransform[];
-export declare function createTextRotated180(): CustomTransform[];
-export declare function createShapeRotated45(): ShapeElement[];
-export declare function createCircleShape(): ShapeElement[];
-export declare function createEllipseShape(): ShapeElement[];
-export declare function createTriangleShape(): ShapeElement[];
-export declare function createStarShape(): ShapeElement[];
-export declare function createPolygonShape(): ShapeElement[];
-export declare function createRoundedRectShape(): ShapeElement[];
-export declare function createShapeWithStroke(): ShapeElement[];
-export declare function createCircleWithStroke(): ShapeElement[];
-export declare function createStarWithStroke(): ShapeElement[];
-export declare function createDashedStroke(): CustomTransform[];
-export declare function createThickStroke(): CustomTransform[];
-export declare function createStrokeWithFeather(): CustomTransform[];
-export declare function createStrokeOpacityOnly(): CustomTransform[];
-export declare function createStrokeCircle(): CircleTransform[];
-export declare function createStrokeWave(): WaveTransform[];
-export declare function createStrokeLean(): LeanTransform[];
-export declare function createStrokeFlag(): FlagTransform[];
-export declare function createDistressArch(): ArchTransform[];
-export declare function createDistressCircle(): CircleTransform[];
-export declare function createDistressWave(): WaveTransform[];
-export declare function createKnockoutCircleShape(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutRotation(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutOpacity(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutGroupScope(): (ShapeElement | CustomTransform)[];
-export declare function createMultipleKnockouts(): (ShapeElement | CustomTransform)[];
-export declare function createStackedText(): CustomTransform[];
-export declare function createTextOverShape(): (ShapeElement | CustomTransform)[];
-export declare function createMixedColorsSizes(): CustomTransform[];
-export declare function createElementAtEdge(): CustomTransform[];
-export declare function createManyElements(): EditorElement[];
-export declare function createDistressWornStyle(): CustomTransform[];
-export declare function createDistressLowIntensity(): CustomTransform[];
-export declare function createDistressHighIntensity(): CustomTransform[];
-export declare function createStrokeDistressRotation(): CustomTransform[];
-export declare function createKnockoutDistress(): (ShapeElement | CustomTransform)[];
-export declare function createStrokeOpacityArch(): ArchTransform[];
-export declare function createDistressStrokeArch(): ArchTransform[];
-export declare function createDistressStrokeCircle(): CircleTransform[];
-export declare function createDistressStrokeWave(): WaveTransform[];
-export declare function createDistressStrokeLean(): LeanTransform[];
-export declare function createDistressStrokeFlag(): FlagTransform[];
-export declare function createDistressStrokeAscend(): AscendTransform[];
-export declare function createDistressLean(): LeanTransform[];
-export declare function createDistressAscend(): AscendTransform[];
-export declare function createDistressFlag(): FlagTransform[];
-export declare function createStrokeAscend(): AscendTransform[];
-export declare function createRotatedOpacityText(): CustomTransform[];
-export declare function createRotatedStrokeText(): CustomTransform[];
-export declare function createRotatedDistressText(): CustomTransform[];
-export declare function createShapeRotated90(): ShapeElement[];
-export declare function createTriangleRotated(): ShapeElement[];
-export declare function createShapeFillOpacity(): ShapeElement[];
-export declare function createShapeNoFill(): ShapeElement[];
-export declare function createEllipseWithStroke(): ShapeElement[];
-export declare function createTriangleWithStroke(): ShapeElement[];
-export declare function createPolygonWithStroke(): ShapeElement[];
-export declare function createRoundedRectWithStroke(): ShapeElement[];
-export declare function createShapeRotatedWithStroke(): ShapeElement[];
-export declare function createStarRotatedWithStroke(): ShapeElement[];
-export declare function createShapeOpacityStroke(): ShapeElement[];
-export declare function createKnockoutStrokeRotation(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutOnTriangle(): (ShapeElement | CustomTransform)[];
-export declare function createKnockoutOnStar(): (ShapeElement | CustomTransform)[];
-export declare function createCircleTransformLargeFont(): CircleTransform[];
-export declare function createArchTransformSmallFont(): ArchTransform[];
-export declare function createWaveTransformRotated(): WaveTransform[];
-export declare function createLeanTransformNegative(): LeanTransform[];
-export declare function createAscendTransformNegative(): AscendTransform[];
-export declare function createFlagTransformHighFreq(): FlagTransform[];
-export declare function createOverlappingShapes(): ShapeElement[];
-export declare function createShapeGrid(): ShapeElement[];
-export declare function createTextInsideCircle(): (ShapeElement | CustomTransform)[];
-export declare function createTextWithStrokeOverShape(): (ShapeElement | CustomTransform)[];
-export declare function createTextRotated270(): CustomTransform[];
-export declare function createTextRotated355(): CustomTransform[];
-export declare function createVeryThinStroke(): CustomTransform[];
-export declare function createStrokeSquareCap(): CustomTransform[];
-export declare function createStrokeMiterJoin(): CustomTransform[];
-export declare function createArtboardDistressWithStrokeText(): CustomTransform[];
-export declare function createArtboardDistressWithShape(): ShapeElement[];
-export declare function createMultipleDistressElements(): CustomTransform[];
-export declare function createMultipleStrokeElements(): CustomTransform[];
-export declare function createShapeAndTransformText(): (ShapeElement | ArchTransform)[];
-export declare function createZeroOpacity(): CustomTransform[];
-export declare function createElementOffscreen(): CustomTransform[];
-export declare function createWhiteOnWhite(): CustomTransform[];
-export declare function createBlackOnBlack(): CustomTransform[];
-export declare function createPentagonShape(): ShapeElement[];
-export declare function createOctagonShape(): ShapeElement[];
-export declare function createStar8Points(): ShapeElement[];
-export declare function createStarThinSpikes(): ShapeElement[];
-export declare function createKnockoutArch(): (ShapeElement | ArchTransform)[];
-export declare function createKnockoutWave(): (ShapeElement | WaveTransform)[];
-export declare function createWideText(): CustomTransform[];
-export declare function createTallStack(): EditorElement[];
-export declare function createPlainImage(): ImageElement[];
-export declare function createImageWithDistress(): ImageElement[];
-export declare function createImageWithDistressAndText(): (ImageElement | CustomTransform)[];
-export declare function createImageWithOpacity(): ImageElement[];
-export declare function createImageRotated(): ImageElement[];
-export declare function createImageWithArtboardDistress(): ImageElement[];

package/dist/components/stories/utils/spec-to-elements.d.ts

@@ -1,74 +0,0 @@
-import { EditorElement } from '../../embed/index';
-export interface DesignSpec {
-    artboard: {
-        width: number;
-        height: number;
-    };
-    backgroundColor?: string;
-    elements: DesignElement[];
-    fontsRequired: string[];
-    designNotes: string;
-}
-export type DesignElement = TextSpec | ShapeSpec | ImageLayerSpec;
-export interface TextSpec {
-    type: 'text';
-    id: string;
-    text: string;
-    x: number;
-    y: number;
-    fontSize: number;
-    fontFamily: string;
-    fontFamilyNotes?: string;
-    color: string;
-    bold: boolean;
-    italic: boolean;
-    textAlign: 'left' | 'center' | 'right';
-    containerWidth?: number;
-    rotation?: number;
-    opacity?: number;
-    stroke?: {
-        color: string;
-        width: number;
-    };
-    transformType?: string;
-    transformParams?: Record<string, number>;
-}
-export interface ShapeSpec {
-    type: 'shape';
-    id: string;
-    x: number;
-    y: number;
-    shapeType: 'rectangle' | 'circle' | 'ellipse' | 'triangle' | 'polygon' | 'star';
-    width: number;
-    height: number;
-    fillColor: string;
-    fillOpacity?: number;
-    borderRadius?: number;
-    rotation?: number;
-    opacity?: number;
-    stroke?: {
-        color: string;
-        width: number;
-    };
-    sides?: number;
-    points?: number;
-    innerRadius?: number;
-}
-export interface ImageLayerSpec {
-    type: 'image';
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    imageUrl: string;
-    rotation?: number;
-    opacity?: number;
-}
-/**
- * Convert a DesignSpec into EditorElement[].
- *
- * This is an async function because it needs to load Google Fonts.
- * Elements are returned in spec order (index 0 = bottom of z-stack).
- */
-export declare function specToElements(spec: DesignSpec): Promise<EditorElement[]>;

package/dist/components/stories/utils/themeDecorator.d.ts

@@ -1,45 +0,0 @@
-import { default as React } from 'react';
-/**
- * Shared theme utilities for Storybook stories
- *
- * HeroUI Convention:
- * - ThemeAccent: 'default' | 'axis' | 'indigo' | 'ocean' | 'sunset' (accent color)
- * - ThemeMode: 'light' | 'dark' (controlled by .dark class)
- *
- * These are INDEPENDENT - accent sets data-theme, mode sets .dark class
- */
-export type ThemeAccent = 'default' | 'axis' | 'indigo' | 'ocean' | 'sunset';
-export type ThemeMode = 'light' | 'dark';
-export type ThemeColor = ThemeAccent;
-export type SnowconeThemeVariant = 'light' | 'dark' | 'axis' | 'axis-light' | 'axis-dark' | 'indigo' | 'indigo-light' | 'indigo-dark' | 'ocean' | 'ocean-light' | 'ocean-dark' | 'sunset' | 'sunset-light' | 'sunset-dark';
-/**
- * Gets theme accent and mode from Storybook context globals
- */
-export declare function getThemeFromContext(context: {
-    globals?: Record<string, unknown>;
-}): {
-    accent: ThemeAccent;
-    mode: ThemeMode;
-};
-/**
- * @deprecated Use the global ThemeDecorator in preview.tsx instead.
- *
- * The global decorator applies theme to document.documentElement which ensures
- * CSS variables cascade properly. This local decorator is kept for backward
- * compatibility but should not be used for new stories.
- *
- * Stories should rely on Storybook's global theme controls:
- * - Dark mode toggle (moon icon) for light/dark
- * - Accent color picker (paintbrush) for theme variants
- */
-export declare function createThemeDecorator(): (Story: React.ComponentType<any>, context: {
-    globals?: Record<string, unknown>;
-    args?: Record<string, unknown>;
-}) => import("react/jsx-runtime").JSX.Element;
-export type StorybookTheme = ThemeAccent | ThemeMode;
-/**
- * @deprecated Use accent-only themes instead (e.g., 'ocean' not 'ocean-light')
- */
-export declare function buildThemeVariant(color: ThemeAccent, mode: ThemeMode): SnowconeThemeVariant;
-export declare function mapStorybookThemeToVariant(storybookTheme: string): SnowconeThemeVariant;
-export declare function mapStorybookThemeToProductCardVariant(storybookTheme: string): string;

package/dist/components/stories/utils/unified-test-cases.d.ts

@@ -1,27 +0,0 @@
-import { EditorElement } from '../../embed/index';
-export interface UnifiedTestCase {
-    /** Unique ID for QA card (kebab-case) */
-    id: string;
-    /** Display name */
-    name: string;
-    /** Group name for organizing stories */
-    group: string;
-    /** Visual expectation: what correct rendering looks like (for AI evaluation) */
-    expect: string;
-    /** Tags for filtering */
-    tags: string[];
-    /** Factory that produces the elements for this test */
-    createElements: () => EditorElement[] | Promise<EditorElement[]>;
-    /** Optional artboard setup (e.g. background color, distress texture) */
-    artboardSetup?: (artboard: any) => void;
-    /** Optional artboard cleanup (restore defaults) */
-    artboardCleanup?: (artboard: any) => void;
-    /** Optional wait time in ms before capturing */
-    waitMs?: number;
-}
-export declare const UNIFIED_TEST_CASES: UnifiedTestCase[];
-/** Returns test cases organized by group */
-export declare function getTestGroups(): {
-    name: string;
-    cases: UnifiedTestCase[];
-}[];