@snowcone-app/canvas 0.1.0

package/dist/testing.mjs

@@ -0,0 +1,140 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { T as s, E as m } from "./ThemeContext-H0Z-MqqR.js";
+import { ad as d, i as h, f as g, I as A } from "./HybridHistoryManager-BV6XV0nD.js";
+const x = ({
+  children: t,
+  initialElements: e = [],
+  initialArtboards: n,
+  initialSelection: r = null,
+  initialMultiSelection: i = [],
+  initialArtboardConfig: l = {}
+}) => {
+  const [f] = u(() => {
+    const c = new d();
+    return n && n.length > 0 ? n.forEach((o) => {
+      c.createArtboard({
+        name: o.name,
+        width: o.width,
+        height: o.height,
+        backgroundColor: o.backgroundColor
+      });
+    }) : c.createArtboard({
+      name: "Test Artboard",
+      width: 1200,
+      height: 1200,
+      backgroundColor: "#FFFFFF",
+      ...l
+    }), c;
+  });
+  return /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a(
+    m,
+    {
+      initialArtboardConfig: l,
+      children: t
+    }
+  ) });
+}, M = ({
+  children: t,
+  initialElements: e = [],
+  initialSelection: n = null,
+  initialMultiSelection: r = [],
+  initialArtboardConfig: i = {}
+}) => /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a(m, { initialArtboardConfig: i, children: t }) });
+function S(t = "custom", e = {}) {
+  const n = g(t);
+  if (!n || !n.Component)
+    throw new Error(`Transform type "${t}" not found in registry`);
+  return new n.Component({
+    transformType: t,
+    text: "Test Text",
+    fontSize: 32,
+    color: "#000000",
+    fontFamily: "Arial",
+    x: 100,
+    y: 100,
+    rotation: 0,
+    ...e
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test utility: overrides merge Partial<TextElement> properties with config, which are structurally compatible but not type-assignable
+  });
+}
+function k(t = {}) {
+  return new A({
+    imageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+    imageAspectRatio: 1,
+    x: 100,
+    y: 100,
+    rotation: 0,
+    ...t
+  });
+}
+function p(t = {}) {
+  return new h({
+    name: "Test Artboard",
+    width: 1200,
+    height: 1200,
+    x: 0,
+    y: 0,
+    backgroundColor: "#FFFFFF",
+    ...t
+  });
+}
+async function w(t, e = 5e3, n = 100) {
+  const r = Date.now();
+  for (; !t(); ) {
+    if (Date.now() - r > e)
+      throw new Error(`Timeout waiting for condition after ${e}ms`);
+    await new Promise((i) => setTimeout(i, n));
+  }
+}
+async function v(t, e = 5e3) {
+  let n = null;
+  return await w(() => !1, e), n;
+}
+function T(t, e = {}) {
+  const n = new KeyboardEvent("keydown", {
+    key: t,
+    ctrlKey: e.ctrl,
+    shiftKey: e.shift,
+    altKey: e.alt,
+    metaKey: e.meta,
+    bubbles: !0,
+    cancelable: !0
+  });
+  document.dispatchEvent(n);
+}
+function _(t = 800, e = 600) {
+  const n = document.createElement("canvas");
+  return n.width = t, n.height = e, n;
+}
+function B(t, e) {
+  Object.entries(e).forEach(([n, r]) => {
+    if (t[n] !== r)
+      throw new Error(
+        `Expected element.${n} to be ${r}, got ${t[n]}`
+      );
+  });
+}
+function C(t) {
+  const e = t.getBoundingBox();
+  return {
+    x: e.x,
+    y: e.y,
+    width: e.width,
+    height: e.height
+  };
+}
+export {
+  x as MockEditorProvider,
+  M as MockEditorProviderWithState,
+  B as assertElementProperties,
+  p as createMockArtboard,
+  _ as createMockCanvas,
+  S as createMockElement,
+  k as createMockImageElement,
+  C as getElementBounds,
+  T as simulateKeyPress,
+  w as waitFor,
+  v as waitForExport
+};
+//# sourceMappingURL=testing.mjs.map

package/dist/testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.mjs","sources":["../src/testing/MockEditorProvider.tsx","../src/testing/utils.ts"],"sourcesContent":["/**\n * MockEditorProvider - Lightweight mock for testing custom components\n * Compatible with Vitest (does not require Jest)\n *\n * @example\n * ```tsx\n * import { render } from '@testing-library/react';\n * import { MockEditorProvider } from '@snowcone-app/canvas/embed';\n *\n * test('my component renders', () => {\n *   render(\n *     <MockEditorProvider>\n *       <MyCustomComponent />\n *     </MockEditorProvider>\n *   );\n * });\n * ```\n */\n\nimport React, { useState, ReactNode } from 'react';\nimport { EditorProvider } from '../contexts/EditorContext.js';\nimport { ThemeProvider } from '../contexts/ThemeContext.js';\nimport { ArtboardManager } from '../core/ArtboardManager.js';\nimport { ArtboardElement } from '../core/ArtboardElement.js';\nimport type { TextElement } from '../core/TextElement.js';\nimport type { ImageElement } from '../core/ImageElement.js';\nimport type { GroupElement } from '../core/GroupElement.js';\nimport type { ShapeElement } from '../core/ShapeElement.js';\n\nexport type MockEditorElement = TextElement | ImageElement | GroupElement | ShapeElement;\n\nexport interface MockEditorProviderProps {\n  children: ReactNode;\n\n  /**\n   * Initial elements to populate the editor\n   */\n  initialElements?: MockEditorElement[];\n\n  /**\n   * Initial artboards (default: one artboard)\n   */\n  initialArtboards?: ArtboardElement[];\n\n  /**\n   * Initial selection\n   */\n  initialSelection?: string | null;\n\n  /**\n   * Initial multi-selection\n   */\n  initialMultiSelection?: string[];\n\n  /**\n   * Initial artboard configuration\n   */\n  initialArtboardConfig?: {\n    name?: string;\n    width?: number;\n    height?: number;\n    backgroundColor?: string;\n  };\n}\n\n/**\n * MockEditorProvider - Wraps EditorProvider with test-friendly defaults\n *\n * This is a lightweight wrapper that provides the same EditorContext\n * as the real app, making it perfect for testing custom components.\n */\nexport const MockEditorProvider: React.FC<MockEditorProviderProps> = ({\n  children,\n  initialElements: _initialElements = [],\n  initialArtboards,\n  initialSelection: _initialSelection = null,\n  initialMultiSelection: _initialMultiSelection = [],\n  initialArtboardConfig = {},\n}) => {\n  // Create artboard manager if artboards provided\n  const [_artboardManager] = useState(() => {\n    const manager = new ArtboardManager();\n\n    if (initialArtboards && initialArtboards.length > 0) {\n      // Use provided artboards\n      initialArtboards.forEach(artboard => {\n        manager.createArtboard({\n          name: artboard.name,\n          width: artboard.width,\n          height: artboard.height,\n          backgroundColor: artboard.backgroundColor,\n        });\n      });\n    } else {\n      // Create default artboard\n      manager.createArtboard({\n        name: 'Test Artboard',\n        width: 1200,\n        height: 1200,\n        backgroundColor: '#FFFFFF',\n        ...initialArtboardConfig,\n      });\n    }\n\n    return manager;\n  });\n\n  // Simple wrapper that passes children through to real EditorProvider\n  // The EditorProvider will handle all the state management\n  // ThemeProvider is required because CanvasEditor uses useTheme()\n  return (\n    <ThemeProvider>\n      <EditorProvider\n        initialArtboardConfig={initialArtboardConfig}\n      >\n        {children}\n      </EditorProvider>\n    </ThemeProvider>\n  );\n};\n\n/**\n * MockEditorProviderWithState - For tests that need to control state directly\n *\n * Use this when you need fine-grained control over the editor state.\n * Most tests should use the simpler MockEditorProvider above.\n */\nexport const MockEditorProviderWithState: React.FC<MockEditorProviderProps> = ({\n  children,\n  initialElements: _initialElements = [],\n  initialSelection: _initialSelection = null,\n  initialMultiSelection: _initialMultiSelection = [],\n  initialArtboardConfig = {},\n}) => {\n  return (\n    <ThemeProvider>\n      <EditorProvider initialArtboardConfig={initialArtboardConfig}>\n        {children}\n      </EditorProvider>\n    </ThemeProvider>\n  );\n};\n","/**\n * Testing Utilities - Helpers for creating mock elements and artboards\n * Compatible with Vitest\n */\n\nimport { TextElement } from '../core/TextElement.js';\nimport { ImageElement } from '../core/ImageElement.js';\nimport { ArtboardElement } from '../core/ArtboardElement.js';\nimport { getTransformById } from '../transforms/registry.js';\nimport type { TransformType, ImageElementConfig } from '../types/index.js';\n\n/**\n * Create a mock text element with sensible defaults\n *\n * @example\n * ```tsx\n * const element = createMockElement('custom', {\n *   text: 'Hello World',\n *   fontSize: 48,\n *   fontColor: '#FF0000'\n * });\n * ```\n */\nexport function createMockElement(\n  transformType: TransformType = 'custom',\n  overrides: Partial<TextElement> = {}\n): TextElement {\n  // Get the correct concrete class from registry\n  const transformDef = getTransformById(transformType);\n  if (!transformDef || !transformDef.Component) {\n    throw new Error(`Transform type \"${transformType}\" not found in registry`);\n  }\n\n  // Create element using the concrete class\n  const element = new transformDef.Component({\n    transformType,\n    text: 'Test Text',\n    fontSize: 32,\n    color: '#000000',\n    fontFamily: 'Arial',\n    x: 100,\n    y: 100,\n    rotation: 0,\n    ...overrides,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test utility: overrides merge Partial<TextElement> properties with config, which are structurally compatible but not type-assignable\n  } as any);\n\n  return element as TextElement;\n}\n\n/**\n * Create a mock image element\n *\n * @example\n * ```tsx\n * const image = createMockImageElement({\n *   imageUrl: 'data:image/png;base64,...',\n *   width: 200,\n *   height: 200\n * });\n * ```\n */\nexport function createMockImageElement(\n  overrides: Partial<ImageElementConfig> = {}\n): ImageElement {\n  const element = new ImageElement({\n    imageUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',\n    imageAspectRatio: 1,\n    x: 100,\n    y: 100,\n    rotation: 0,\n    ...overrides,\n  });\n\n  return element;\n}\n\n/**\n * Create a mock artboard\n *\n * @example\n * ```tsx\n * const artboard = createMockArtboard({\n *   name: 'Front',\n *   width: 1200,\n *   height: 1200,\n *   backgroundColor: '#FFFFFF'\n * });\n * ```\n */\nexport function createMockArtboard(\n  overrides: Partial<{\n    name: string;\n    width: number;\n    height: number;\n    x: number;\n    y: number;\n    backgroundColor: string;\n  }> = {}\n): ArtboardElement {\n  const artboard = new ArtboardElement({\n    name: 'Test Artboard',\n    width: 1200,\n    height: 1200,\n    x: 0,\n    y: 0,\n    backgroundColor: '#FFFFFF',\n    ...overrides,\n  });\n\n  return artboard;\n}\n\n/**\n * Wait for a condition to become true\n * Useful for async testing\n *\n * @example\n * ```tsx\n * await waitFor(() => screen.getByText('Loaded'), 5000);\n * ```\n */\nexport async function waitFor(\n  condition: () => boolean,\n  timeout = 5000,\n  interval = 100\n): Promise<void> {\n  const startTime = Date.now();\n\n  while (!condition()) {\n    if (Date.now() - startTime > timeout) {\n      throw new Error(`Timeout waiting for condition after ${timeout}ms`);\n    }\n    await new Promise(resolve => setTimeout(resolve, interval));\n  }\n}\n\n/**\n * Wait for an export to complete\n * Polls until dataUrl is available\n *\n * @example\n * ```tsx\n * const dataUrl = await waitForExport('artboard-1', 5000);\n * expect(dataUrl).toContain('data:image/png');\n * ```\n */\nexport async function waitForExport(\n  _artboardId: string,\n  timeout = 5000\n): Promise<string | null> {\n  let dataUrl: string | null = null;\n\n  await waitFor(() => {\n    // Check if export completed (this would need to be implemented based on your export state)\n    // For now, just return false as a placeholder\n    return false;\n  }, timeout);\n\n  return dataUrl;\n}\n\n/**\n * Simulate a keyboard event\n * Useful for testing keyboard shortcuts\n *\n * @example\n * ```tsx\n * simulateKeyPress('c', { meta: true }); // Cmd+C\n * ```\n */\nexport function simulateKeyPress(\n  key: string,\n  options: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  } = {}\n): void {\n  const event = new KeyboardEvent('keydown', {\n    key,\n    ctrlKey: options.ctrl,\n    shiftKey: options.shift,\n    altKey: options.alt,\n    metaKey: options.meta,\n    bubbles: true,\n    cancelable: true,\n  });\n\n  document.dispatchEvent(event);\n}\n\n/**\n * Create a mock canvas element for testing\n * Returns an HTMLCanvasElement with mocked context\n *\n * @example\n * ```tsx\n * const canvas = createMockCanvas(800, 600);\n * const ctx = canvas.getContext('2d');\n * ```\n */\nexport function createMockCanvas(\n  width = 800,\n  height = 600\n): HTMLCanvasElement {\n  const canvas = document.createElement('canvas');\n  canvas.width = width;\n  canvas.height = height;\n\n  return canvas;\n}\n\n/**\n * Assert that an element has certain properties\n * Useful for programmatic assertions\n *\n * @example\n * ```tsx\n * assertElementProperties(element, {\n *   text: 'Hello',\n *   fontSize: 48,\n *   fontColor: '#FF0000'\n * });\n * ```\n */\nexport function assertElementProperties(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Test utility: accepts any element type and checks arbitrary properties\n  element: any,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Test utility: expected values can be any type\n  expected: Record<string, any>\n): void {\n  Object.entries(expected).forEach(([key, value]) => {\n    if (element[key] !== value) {\n      throw new Error(\n        `Expected element.${key} to be ${value}, got ${element[key]}`\n      );\n    }\n  });\n}\n\n/**\n * Get element bounding box for testing\n * Returns computed bounds from the element\n *\n * @example\n * ```tsx\n * const bounds = getElementBounds(element);\n * expect(bounds.width).toBeGreaterThan(0);\n * ```\n */\nexport function getElementBounds(element: TextElement | ImageElement): {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n} {\n  const bbox = element.getBoundingBox();\n\n  return {\n    x: bbox.x,\n    y: bbox.y,\n    width: bbox.width,\n    height: bbox.height,\n  };\n}\n"],"names":["MockEditorProvider","children","_initialElements","initialArtboards","_initialSelection","_initialMultiSelection","initialArtboardConfig","_artboardManager","useState","manager","ArtboardManager","artboard","ThemeProvider","jsx","EditorProvider","MockEditorProviderWithState","createMockElement","transformType","overrides","transformDef","getTransformById","createMockImageElement","ImageElement","createMockArtboard","ArtboardElement","waitFor","condition","timeout","interval","startTime","resolve","waitForExport","_artboardId","dataUrl","simulateKeyPress","key","options","event","createMockCanvas","width","height","canvas","assertElementProperties","element","expected","value","getElementBounds","bbox"],"mappings":"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"}

package/dist/textures/glass-frame.svg

@@ -0,0 +1,32 @@
+<svg width="1200" height="800" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Diagonal shine gradient with more contrast -->
+    <linearGradient id="shine" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:rgba(255,255,255,1);stop-opacity:1" />
+      <stop offset="25%" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" />
+      <stop offset="100%" style="stop-color:rgba(255,255,255,0);stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Top-left bright highlight with higher contrast -->
+    <radialGradient id="highlight" cx="15%" cy="15%">
+      <stop offset="0%" style="stop-color:rgba(255,255,255,1);stop-opacity:1" />
+      <stop offset="20%" style="stop-color:rgba(255,255,255,0.4);stop-opacity:1" />
+      <stop offset="60%" style="stop-color:rgba(255,255,255,0);stop-opacity:1" />
+    </radialGradient>
+  </defs>
+
+  <!-- Base glass layer - lighter overall -->
+  <rect width="1200" height="800" fill="rgba(255, 255, 255, 0.15)" rx="12"/>
+
+  <!-- Diagonal shine -->
+  <rect width="1200" height="800" fill="url(#shine)" rx="12"/>
+
+  <!-- Radial highlight for extra shine -->
+  <rect width="1200" height="800" fill="url(#highlight)" rx="12"/>
+
+  <!-- Sharp bright border for contrast -->
+  <rect x="0" y="0" width="1200" height="800" fill="none" stroke="rgba(255,255,255,1)" stroke-width="3" rx="12"/>
+
+  <!-- Inner subtle highlight edge -->
+  <rect x="3" y="3" width="1194" height="794" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1" rx="10"/>
+</svg>

package/dist/theme.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Theme constants for the application
+ * Centralized color palette and design tokens
+ */
+export declare const colors: {
+    readonly primary: string;
+    accent: {
+        blue: string;
+        purple: string;
+        orange: string;
+    };
+    background: string;
+    surface: string;
+    border: string;
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    readonly hover: string;
+    readonly active: string;
+    disabled: string;
+};
+export declare const theme: {
+    colors: {
+        readonly primary: string;
+        accent: {
+            blue: string;
+            purple: string;
+            orange: string;
+        };
+        background: string;
+        surface: string;
+        border: string;
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        readonly hover: string;
+        readonly active: string;
+        disabled: string;
+    };
+    spacing: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+    borderRadius: {
+        sm: number;
+        md: number;
+        lg: number;
+        full: number;
+    };
+    fontSize: {
+        xs: number;
+        sm: number;
+        base: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+    zIndex: {
+        base: number;
+        dropdown: number;
+        modal: number;
+        tooltip: number;
+        editor: number;
+    };
+    canvas: {
+        readonly selectionColor: string;
+        readonly snapGuideColor: string;
+        readonly rotationHandleColor: string;
+        handleSize: number;
+        handleHoverSize: number;
+        snapThreshold: number;
+        snapGuideDash: number[];
+        snapGuideWidth: number;
+        selectionPadding: number;
+        spacingIndicatorColor: string;
+        spacingIndicatorWidth: number;
+        spacingDetectionThreshold: number;
+        spacingLabelFontSize: number;
+        spacingLabelFontFamily: string;
+        spacingLabelBackground: string;
+    };
+};
+export default theme;

package/dist/themes/index.d.ts

@@ -0,0 +1,23 @@
+import { applyTheme, clearTheme } from '@snowcone-app/ui/themes';
+/**
+ * Theme System
+ *
+ * Re-exports from the shared theme system in @snowcone-app/ui.
+ * This module provides backward-compatible aliases for canvas-specific names.
+ *
+ * USAGE:
+ * ------
+ * 1. Use `baseThemes` for the theme picker dropdown (light themes only)
+ * 2. Use `getThemeVariant(theme, isDark)` to get the light/dark variant
+ * 3. Use `applyNextEcommerceTheme(theme)` to apply CSS variables (or `applyTheme`)
+ *
+ * SOURCE OF TRUTH: packages/ui-react/src/themes/
+ */
+export type { ThemeConfig, ThemePreset, FontPairing, FontWeights, RadiusSize, RadiusPresetId, RadiusConfig, } from '@snowcone-app/ui/themes';
+export { RADIUS_PRESETS } from '@snowcone-app/ui/themes';
+export { presetThemes, baseThemes, getThemeVariant, findTheme, getBaseThemeName, } from '@snowcone-app/ui/themes';
+export { applyTheme, clearTheme, toThemeId, getCurrentThemeId } from '@snowcone-app/ui/themes';
+export declare const applyNextEcommerceTheme: typeof applyTheme;
+export declare const clearNextEcommerceTheme: typeof clearTheme;
+export { ThemeProvider, useTheme, useThemeStandalone, type ThemeContextValue, type ThemeProviderProps, } from '@snowcone-app/ui/themes';
+export { getThemeStyles, getThemeStylesCSS } from '@snowcone-app/ui/themes';

package/dist/transforms/ArchTransform.d.ts

@@ -0,0 +1,14 @@
+import { TextElement } from '../core/TextElement.js';
+import { ArchElementConfig, ArchTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class ArchTransform extends TextElement {
+    transformData: ArchTransformData;
+    constructor(config?: Partial<ArchElementConfig>);
+    getBoundingBox(): BoundingBox;
+    getVisualBoundingBox(): BoundingBox;
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    resize(anchor: ResizeAnchor, newWidth: number, _newHeight: number, startData: TransformStartData): void;
+    getEnabledAnchors(): ResizeAnchor[];
+    toJSON(): ArchElementConfig;
+    getTransformStartData(): TransformStartData;
+}
+export default ArchTransform;

package/dist/transforms/AscendTransform.d.ts

@@ -0,0 +1,14 @@
+import { TextElement } from '../core/TextElement.js';
+import { AscendElementConfig, AscendTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class AscendTransform extends TextElement {
+    transformData: AscendTransformData;
+    constructor(config?: Partial<AscendElementConfig>);
+    getBoundingBox(): BoundingBox;
+    getVisualBoundingBox(): BoundingBox;
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    resize(anchor: ResizeAnchor, newWidth: number, _newHeight: number, startData: TransformStartData): void;
+    getEnabledAnchors(): ResizeAnchor[];
+    toJSON(): AscendElementConfig;
+    getTransformStartData(): TransformStartData;
+}
+export default AscendTransform;

package/dist/transforms/CircleTransform.d.ts

@@ -0,0 +1,51 @@
+import { TextElement } from '../core/TextElement.js';
+import { CircleElementConfig, CircleTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class CircleTransform extends TextElement {
+    transformData: CircleTransformData;
+    constructor(config?: Partial<CircleElementConfig>);
+    /**
+     * Get bounding box in world coordinates
+     * For circle, this is center ± radius (diameter)
+     * This is used for transform math (resize, rotation)
+     */
+    getBoundingBox(): BoundingBox;
+    /**
+     * Get visual bounding box (tight fit around actual text)
+     * For circular text, calculate the arc bounds where text actually appears
+     */
+    getVisualBoundingBox(): BoundingBox;
+    /**
+     * Render the circular text
+     * Uses canvas arc path like SVG path in original
+     * Now uses shared rendering function
+     */
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    /**
+     * Handle resize
+     * For circle, we maintain uniform scale and keep scale on the transform
+     */
+    resize(anchor: ResizeAnchor, newWidth: number, newHeight: number, startData: TransformStartData): void;
+    /**
+     * Get enabled anchors
+     * Circle supports only corner handles (uniform scale)
+     */
+    getEnabledAnchors(): ResizeAnchor[];
+    /**
+     * Get effective font size (base fontSize * scale)
+     * This is what the user sees
+     */
+    getEffectiveFontSize(): number;
+    /**
+     * Set effective font size (adjusts base fontSize to achieve desired effective size)
+     */
+    setEffectiveFontSize(targetSize: number): void;
+    /**
+     * Serialize with transform data
+     */
+    toJSON(): CircleElementConfig;
+    /**
+     * Get transform start data
+     */
+    getTransformStartData(): TransformStartData;
+}
+export default CircleTransform;

package/dist/transforms/CustomTransform.d.ts

@@ -0,0 +1,81 @@
+import { TextElement } from '../core/TextElement.js';
+import { CustomElementConfig, CustomTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class CustomTransform extends TextElement {
+    transformData: CustomTransformData;
+    _lockedLineCount?: number;
+    constructor(config?: Partial<CustomElementConfig>);
+    /**
+     * Calculate height for rich text considering per-character fonts
+     * Returns the total height based on the tallest font in each line
+     */
+    private calculateRichTextHeight;
+    /**
+     * Check if rich text has per-character formatting that differs from element defaults
+     */
+    private hasPerCharacterFormatting;
+    /**
+     * Get bounding box in world coordinates
+     * For straight text with center-based positioning (x, y is the center)
+     * This should match the actual text bounds including wrapping
+     */
+    getBoundingBox(): BoundingBox;
+    /**
+     * Get visual bounding box (container bounds for selection display)
+     * For CustomTransform, this shows the container width (transformData.width)
+     * and the actual height based on text wrapping
+     * (x, y) is the center of the element
+     */
+    getVisualBoundingBox(): BoundingBox;
+    /**
+     * Get rotation anchor (center of the visual bounding box)
+     * CustomTransform rotates around the center of the actual text, including multi-line
+     */
+    getRotationAnchor(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Render the straight text
+     * (x, y) is the center of the element, we rotate around this center point
+     * Now uses shared rendering function that works in both main thread and worker
+     */
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    /**
+     * Render stroke+fill to an offscreen canvas at full opacity, then composite
+     * at the element's opacity. Prevents stroke inner half showing through fill.
+     */
+    private renderWithOffscreen;
+    /**
+     * Override getTransformStartData to capture initial line count
+     */
+    getTransformStartData(): TransformStartData;
+    /**
+     * Handle resize using standard resize logic
+     * Corner handles: uniform scale (fontSize and width both change) - line count locked
+     * Side handles: only width changes - text re-wraps naturally
+     */
+    resize(anchor: ResizeAnchor, newWidth: number, newHeight: number, startData: TransformStartData): void;
+    /**
+     * Override setText - don't auto-adjust width
+     * Let text wrap naturally within the current container width
+     */
+    setText(newText: string): void;
+    /**
+     * Get enabled anchors
+     * Straight text supports all 8 handles
+     */
+    getEnabledAnchors(): ResizeAnchor[];
+    /**
+     * Clone this element
+     * Override to preserve temporary _lockedLineCount during resize operations
+     * (but it still won't be saved in JSON exports)
+     */
+    clone(): CustomTransform;
+    /**
+     * Serialize with transform data
+     * NOTE: _lockedLineCount is intentionally NOT serialized
+     * The lock is temporary during resize and should not persist after
+     */
+    toJSON(): CustomElementConfig;
+}
+export default CustomTransform;

package/dist/transforms/FlagTransform.d.ts

@@ -0,0 +1,14 @@
+import { TextElement } from '../core/TextElement.js';
+import { FlagElementConfig, FlagTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class FlagTransform extends TextElement {
+    transformData: FlagTransformData;
+    constructor(config?: Partial<FlagElementConfig>);
+    getBoundingBox(): BoundingBox;
+    getVisualBoundingBox(): BoundingBox;
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    resize(anchor: ResizeAnchor, newWidth: number, _newHeight: number, startData: TransformStartData): void;
+    getEnabledAnchors(): ResizeAnchor[];
+    toJSON(): FlagElementConfig;
+    getTransformStartData(): TransformStartData;
+}
+export default FlagTransform;

package/dist/transforms/LeanTransform.d.ts

@@ -0,0 +1,14 @@
+import { TextElement } from '../core/TextElement.js';
+import { LeanElementConfig, LeanTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class LeanTransform extends TextElement {
+    transformData: LeanTransformData;
+    constructor(config?: Partial<LeanElementConfig>);
+    getBoundingBox(): BoundingBox;
+    getVisualBoundingBox(): BoundingBox;
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    resize(anchor: ResizeAnchor, newWidth: number, _newHeight: number, startData: TransformStartData): void;
+    getEnabledAnchors(): ResizeAnchor[];
+    toJSON(): LeanElementConfig;
+    getTransformStartData(): TransformStartData;
+}
+export default LeanTransform;

package/dist/transforms/WaveTransform.d.ts

@@ -0,0 +1,16 @@
+import { TextElement } from '../core/TextElement.js';
+import { WaveElementConfig, WaveTransformData, BoundingBox, ResizeAnchor, TransformStartData } from '../types/index.js';
+export declare class WaveTransform extends TextElement {
+    transformData: WaveTransformData;
+    constructor(config?: Partial<WaveElementConfig>);
+    getBoundingBox(): BoundingBox;
+    getVisualBoundingBox(): BoundingBox;
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    resize(anchor: ResizeAnchor, newWidth: number, newHeight: number, startData: TransformStartData): void;
+    getEnabledAnchors(): ResizeAnchor[];
+    /**
+     * Serialize with transform data
+     */
+    toJSON(): WaveElementConfig;
+}
+export default WaveTransform;

package/dist/transforms/defaults.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Transform Default Values
+ * Single source of truth for all transform default parameters
+ */
+export declare const WAVE_DEFAULTS: {
+    readonly amplitude: 0.2;
+    readonly frequency: 1.2;
+    readonly width: 200;
+};
+export declare const FLAG_DEFAULTS: {
+    readonly amplitude: 0.2;
+    readonly frequency: 2;
+    readonly width: 200;
+};
+export declare const ARCH_DEFAULTS: {
+    readonly archHeight: 0.5;
+    readonly width: 200;
+};
+export declare const CIRCLE_DEFAULTS: {
+    readonly radius: 100;
+    readonly reverse: false;
+};
+export declare const LEAN_DEFAULTS: {
+    readonly leanAmount: 0;
+    readonly width: 200;
+};
+export declare const ASCEND_DEFAULTS: {
+    readonly ascendAngle: -15;
+    readonly width: 200;
+};
+export declare const CUSTOM_DEFAULTS: {
+    readonly width: 200;
+};

package/dist/transforms/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Export all transform types
+ */
+export { CustomTransform } from './CustomTransform.js';
+export { CircleTransform } from './CircleTransform.js';
+export { ArchTransform } from './ArchTransform.js';
+export { WaveTransform } from './WaveTransform.js';
+export { FlagTransform } from './FlagTransform.js';
+export { LeanTransform } from './LeanTransform.js';
+export { AscendTransform } from './AscendTransform.js';

package/dist/transforms/registry.d.ts

@@ -0,0 +1,51 @@
+import { TransformType, TransformControl } from '../types/index.js';
+/**
+ * Transform control configurations
+ * Defines the sliders and their properties for each transform type
+ */
+export declare const TRANSFORM_CONTROLS: Partial<Record<TransformType, TransformControl[]>>;
+/**
+ * Transform definition shape used in the registry
+ */
+export interface TransformDef {
+    id: string;
+    label: string;
+    Component: new (config: any) => any;
+}
+/**
+ * Transform type definitions (built-in)
+ * Combines metadata (id, label) with component class
+ */
+export declare const TRANSFORM_TYPES: TransformDef[];
+/**
+ * Check if a transform type ID belongs to a built-in type
+ */
+export declare function isBuiltinTransformType(id: string): boolean;
+/**
+ * Register a dynamic transform type at runtime.
+ * Throws if the id conflicts with a built-in type or is already registered.
+ */
+export declare function registerTransform(id: string, def: TransformDef): void;
+/**
+ * Unregister a dynamic transform type.
+ * Returns true if the type was removed, false if it was not found.
+ * Throws if attempting to unregister a built-in type.
+ */
+export declare function unregisterTransform(id: string): boolean;
+/**
+ * Get all registered transforms (built-in + dynamic)
+ */
+export declare function getAllTransforms(): TransformDef[];
+/**
+ * Get transform definition by id (built-in or dynamic)
+ */
+export declare function getTransformById(id: string): TransformDef | undefined;
+/**
+ * Get transform controls by id
+ */
+export declare function getTransformControls(id: TransformType): TransformControl[];
+/**
+ * Reset all dynamic transforms (for testing only)
+ * @internal
+ */
+export declare function _resetDynamicTransforms(): void;