@bwp-web/canvas 0.4.0

package/dist/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE9D;;GAEG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,YAAY,EACpB,GAAG,OAAO,EAAE,YAAY,EAAE,GACzB,IAAI,CAGN;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,IAAI,CAgBxE"}

package/dist/serialization.d.ts

@@ -0,0 +1,52 @@
+import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
+/**
+ * Enable zoom-independent stroke widths on a canvas.
+ *
+ * On every render, each object's `strokeWidth` is set to `base / zoom` so
+ * strokes always appear as one visual pixel regardless of zoom level. The
+ * original (base) stroke width is stored in an internal WeakMap and is
+ * automatically restored before serialization by {@link serializeCanvas}.
+ *
+ * Returns a cleanup function that removes the listener and restores all
+ * stroke widths to their base values.
+ */
+export declare function enableScaledStrokes(canvas: FabricCanvas): () => void;
+/**
+ * Options for {@link serializeCanvas}.
+ */
+export interface SerializeOptions {
+    /**
+     * Additional Fabric object properties to include in the JSON output.
+     * The `'data'` and `'shapeType'` properties are always included.
+     * Default: `['data', 'shapeType']`.
+     */
+    properties?: string[];
+}
+/**
+ * Return the base (unscaled) stroke width for an object.
+ *
+ * When {@link enableScaledStrokes} is active, `obj.strokeWidth` is a
+ * zoom-adjusted value. This function returns the original intended width that
+ * was recorded before any zoom adjustment was applied. Falls back to the
+ * object's current `strokeWidth` if the object has never been seen by
+ * `enableScaledStrokes` (e.g. if the feature is disabled).
+ */
+export declare function getBaseStrokeWidth(obj: FabricObject): number;
+/**
+ * Serialize the canvas to a plain object, ready for `JSON.stringify`.
+ *
+ * - Always includes the `'data'` and `'shapeType'` custom properties.
+ * - If {@link enableScaledStrokes} is active, temporarily restores all stroke
+ *   widths to their base values before serializing, then reapplies the
+ *   zoom-scaled values. This ensures the saved JSON always contains the
+ *   intended visual stroke width, not the zoom-adjusted one.
+ */
+export declare function serializeCanvas(canvas: FabricCanvas, options?: SerializeOptions): object;
+/**
+ * Load a canvas from a previously serialized JSON object (from {@link serializeCanvas}).
+ *
+ * Clears the canvas and restores all objects, then requests a re-render.
+ * The returned promise resolves once the canvas is fully loaded.
+ */
+export declare function loadCanvas(canvas: FabricCanvas, json: object): Promise<void>;
+//# sourceMappingURL=serialization.d.ts.map

package/dist/serialization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialization.d.ts","sourceRoot":"","sources":["../src/serialization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAQ,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAWzE;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,IAAI,CA2BpE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAiCR;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAC9B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,CAAC,CAaf"}

package/dist/shapes/circle.d.ts

@@ -0,0 +1,36 @@
+import { Canvas as FabricCanvas, Rect } from 'fabric';
+import type { Point2D, ShapeStyleOptions } from '../types';
+export interface CircleOptions extends ShapeStyleOptions {
+    left: number;
+    top: number;
+    size: number;
+}
+export interface CircleAtPointOptions extends ShapeStyleOptions {
+    size: number;
+}
+/**
+ * Re-apply circle control visibility after deserialization.
+ *
+ * Fabric's `loadFromJSON` does not restore `setControlsVisibility` state, so
+ * this must be called on any deserialized object whose `shapeType === 'circle'`
+ * to restore the correct handle layout (no mid-edge or rotation handles).
+ *
+ * Not part of the public package API — imported directly by `serialization.ts`.
+ */
+export declare function restoreCircleConstraints(rect: Rect): void;
+/**
+ * Create a circle (a square Rect with full border-radius) and add it to the canvas.
+ * Returns the fabric Rect instance for further manipulation.
+ */
+export declare function createCircle(canvas: FabricCanvas, options: CircleOptions): Rect;
+/**
+ * Create a circle at the given scene point and add it to the canvas.
+ * Returns the fabric Rect instance.
+ */
+export declare function createCircleAtPoint(canvas: FabricCanvas, point: Point2D, options: CircleAtPointOptions): Rect;
+/**
+ * Edit an existing circle's properties (position, size, appearance).
+ * When size changes, rx and ry are automatically updated to maintain the circular shape.
+ */
+export declare function editCircle(canvas: FabricCanvas, rect: Rect, changes: Partial<CircleOptions>): void;
+//# sourceMappingURL=circle.d.ts.map

package/dist/shapes/circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.d.ts","sourceRoot":"","sources":["../../src/shapes/circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd;AAuBD;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAGzD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,aAAa,GACrB,IAAI,CAeN;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,oBAAoB,GAC5B,IAAI,CAiBN;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,GAC9B,IAAI,CAeN"}

package/dist/shapes/index.d.ts

@@ -0,0 +1,4 @@
+export * from './rectangle';
+export * from './circle';
+export * from './polygon';
+//# sourceMappingURL=index.d.ts.map

package/dist/shapes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shapes/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/shapes/polygon.d.ts

@@ -0,0 +1,37 @@
+import { Canvas as FabricCanvas, Polygon } from 'fabric';
+import type { Point2D, ShapeStyleOptions } from '../types';
+export interface PolygonOptions extends ShapeStyleOptions {
+    points: Point2D[];
+    left?: number;
+    top?: number;
+}
+/** @deprecated Use `ShapeStyleOptions` directly. This alias will be removed in a future major version. */
+export type PolygonStyleOptions = ShapeStyleOptions;
+/**
+ * Create a polygon and add it to the canvas.
+ * Returns the fabric Polygon instance for further manipulation.
+ */
+export declare function createPolygon(canvas: FabricCanvas, options: PolygonOptions): Polygon;
+/**
+ * Create a rectangular polygon at the given scene point and add it to the canvas.
+ * Returns the fabric Polygon instance.
+ */
+export declare function createPolygonAtPoint(canvas: FabricCanvas, point: Point2D, options: PolygonStyleOptions & {
+    width: number;
+    height: number;
+}): Polygon;
+/**
+ * Create a rectangular polygon from drag bounds (two corner points) and add it to the canvas.
+ * Returns the fabric Polygon instance.
+ */
+export declare function createPolygonFromDrag(canvas: FabricCanvas, start: Point2D, end: Point2D, style?: PolygonStyleOptions): Polygon;
+/**
+ * Create a polygon from an arbitrary array of vertices and add it to the canvas.
+ * Returns the fabric Polygon instance.
+ */
+export declare function createPolygonFromVertices(canvas: FabricCanvas, points: Point2D[], style?: PolygonStyleOptions): Polygon;
+/**
+ * Edit an existing polygon's properties (position, points, appearance, etc.).
+ */
+export declare function editPolygon(canvas: FabricCanvas, polygon: Polygon, changes: Partial<PolygonOptions>): void;
+//# sourceMappingURL=polygon.d.ts.map

package/dist/shapes/polygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.d.ts","sourceRoot":"","sources":["../../src/shapes/polygon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,MAAM,EAAE,OAAO,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,0GAA0G;AAC1G,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,cAAc,GACtB,OAAO,CAMT;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC/D,OAAO,CAcT;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,OAAO,EACZ,KAAK,CAAC,EAAE,mBAAmB,GAC1B,OAAO,CAiBT;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,OAAO,EAAE,EACjB,KAAK,CAAC,EAAE,mBAAmB,GAC1B,OAAO,CAQT;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAC/B,IAAI,CASN"}

package/dist/shapes/rectangle.d.ts

@@ -0,0 +1,31 @@
+import { Canvas as FabricCanvas, Rect } from 'fabric';
+import type { Point2D, ShapeStyleOptions } from '../types';
+export interface RectangleOptions extends ShapeStyleOptions {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+export interface RectangleAtPointOptions extends ShapeStyleOptions {
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+/**
+ * Create a rectangle and add it to the canvas.
+ * Returns the fabric Rect instance for further manipulation.
+ */
+export declare function createRectangle(canvas: FabricCanvas, options: RectangleOptions): Rect;
+/**
+ * Create a rectangle at the given scene point and add it to the canvas.
+ * Returns the fabric Rect instance.
+ */
+export declare function createRectangleAtPoint(canvas: FabricCanvas, point: Point2D, options: RectangleAtPointOptions): Rect;
+/**
+ * Edit an existing rectangle's properties (position, dimensions, appearance, etc.).
+ */
+export declare function editRectangle(canvas: FabricCanvas, rect: Rect, changes: Partial<RectangleOptions>): void;
+//# sourceMappingURL=rectangle.d.ts.map

package/dist/shapes/rectangle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectangle.d.ts","sourceRoot":"","sources":["../../src/shapes/rectangle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,gBAAgB,GACxB,IAAI,CAKN;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,uBAAuB,GAC/B,IAAI,CAaN;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,GACjC,IAAI,CAIN"}

package/dist/styles.d.ts

@@ -0,0 +1,46 @@
+export declare const DEFAULT_CONTROL_STYLE: {
+    borderColor: string;
+    cornerColor: string;
+    cornerStrokeColor: string;
+    transparentCorners: boolean;
+};
+export declare const DEFAULT_SHAPE_STYLE: {
+    borderColor: string;
+    cornerColor: string;
+    cornerStrokeColor: string;
+    transparentCorners: boolean;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    strokeUniform: boolean;
+};
+export declare const DEFAULT_CIRCLE_STYLE: {
+    borderColor: string;
+    cornerColor: string;
+    cornerStrokeColor: string;
+    transparentCorners: boolean;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    strokeUniform: boolean;
+};
+export declare const DEFAULT_DRAG_SHAPE_STYLE: {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    strokeUniform: boolean;
+    strokeDashArray: number[];
+};
+export declare const DEFAULT_GUIDELINE_SHAPE_STYLE: {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    strokeUniform: boolean;
+    strokeDashArray: number[];
+};
+export declare const DEFAULT_ALIGNMENT_STYLE: {
+    readonly color: "rgba(255, 0, 0, 0.9)";
+    readonly width: 1;
+    readonly xSize: 2.4;
+};
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB;;;;;CAKjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;CAM/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;CAMhC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;CAMpC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;CAMzC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,48 @@
+import type { Canvas as FabricCanvas, FabricObject } from 'fabric';
+import type { ViewportController } from './viewport';
+import type { GuidelineStyle } from './alignment/cursorSnapping';
+/** A simple 2D point. */
+export type Point2D = {
+    x: number;
+    y: number;
+};
+/** Common style fields shared across all shape options. */
+export interface ShapeStyleOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+}
+/** Snapping configuration used by interaction modes (dragToCreate, drawToCreate). */
+export type SnappingOptions = boolean | {
+    /** Snap margin in screen pixels. Default: 6. */
+    margin?: number;
+    /** Custom guideline style. */
+    guidelineStyle?: GuidelineStyle;
+};
+/** Options shared by all interaction modes that create objects. */
+export interface InteractionModeOptions {
+    onCreated?: (obj: FabricObject) => void;
+    viewport?: ViewportController;
+}
+/** Options shared by interaction modes that support snapping. */
+export interface SnappableInteractionOptions extends InteractionModeOptions {
+    /** Enable cursor snapping. Pass `true` for defaults or an options object. Default: enabled. */
+    snapping?: SnappingOptions;
+    /**
+     * Master toggle for alignment/snapping.
+     * - `undefined`: uses the `snapping` prop (default: enabled).
+     * - `true`: force-enable snapping.
+     * - `false`: force-disable snapping.
+     */
+    enableAlignment?: boolean;
+}
+/** Bounds produced by a drag-to-create interaction. */
+export interface DragBounds {
+    startX: number;
+    startY: number;
+    width: number;
+    height: number;
+}
+/** Setup function for interaction modes, used by useEditCanvas.setMode(). */
+export type ModeSetup = (canvas: FabricCanvas, viewport: ViewportController | undefined) => (() => void) | void;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,yBAAyB;AACzB,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,2DAA2D;AAC3D,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qFAAqF;AACrF,MAAM,MAAM,eAAe,GACvB,OAAO,GACP;IACE,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEN,mEAAmE;AACnE,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAED,iEAAiE;AACjE,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;IACzE,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,CACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,kBAAkB,GAAG,SAAS,KACrC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC"}

package/dist/viewport.d.ts

@@ -0,0 +1,51 @@
+import { Canvas as FabricCanvas } from 'fabric';
+export type ViewportMode = 'select' | 'pan';
+export interface PanAndZoomOptions {
+    /** Minimum zoom level (default: 0.2) */
+    minZoom?: number;
+    /** Maximum zoom level (default: 10) */
+    maxZoom?: number;
+    /** Zoom sensitivity — larger values zoom faster (default: 1.03) */
+    zoomFactor?: number;
+    /** Initial viewport mode (default: 'select') */
+    initialMode?: ViewportMode;
+}
+export interface ViewportController {
+    /** Switch between select and pan modes. */
+    setMode: (mode: ViewportMode) => void;
+    /** Get the current viewport mode. */
+    getMode: () => ViewportMode;
+    /** Temporarily disable all pan and zoom input (e.g. during draw modes). */
+    setEnabled: (enabled: boolean) => void;
+    /**
+     * Zoom in toward the canvas center by `step` zoom units.
+     * Respects the configured min/max zoom bounds. Default step: 0.2.
+     */
+    zoomIn: (step?: number) => void;
+    /**
+     * Zoom out from the canvas center by `step` zoom units.
+     * Respects the configured min/max zoom bounds. Default step: 0.2.
+     */
+    zoomOut: (step?: number) => void;
+    /** Remove all event listeners. */
+    cleanup: () => void;
+}
+/**
+ * Enable pan and zoom on the canvas viewport.
+ *
+ * - **Zoom**: Scroll the mouse wheel to zoom in/out centred on the cursor
+ *   (works in both modes). On touch devices, pinch with two fingers to zoom.
+ * - **Select mode**: Normal object selection. Hold Cmd (Mac) / Ctrl (Win) and
+ *   drag to pan. Middle-button drag also pans.
+ * - **Pan mode**: Click or single-touch drag to pan freely. Object selection
+ *   is disabled.
+ *
+ * Returns a {@link ViewportController} for switching modes, programmatic zoom,
+ * and cleanup.
+ */
+export declare function enablePanAndZoom(canvas: FabricCanvas, options?: PanAndZoomOptions): ViewportController;
+/**
+ * Reset the canvas viewport to the default (no pan, zoom = 1).
+ */
+export declare function resetViewport(canvas: FabricCanvas): void;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAwB,MAAM,QAAQ,CAAC;AAQtE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,qCAAqC;IACrC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,kCAAkC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0MD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,kBAAkB,CAwEpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAExD"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@bwp-web/canvas",
+  "version": "0.4.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "build:types": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "clean": "rm -rf dist node_modules .turbo",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "fabric": "^7.2.0"
+  },
+  "peerDependencies": {
+    "@bwp-web/styles": "*",
+    "@mui/material": ">=7.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@bwp-web/eslint-config": "*",
+    "@bwp-web/styles": "*",
+    "@types/react": "^19.1.0",
+    "eslint": "^9.39.2",
+    "prettier": "^3.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.2"
+  }
+}