@tsdraw/core 0.4.0 → 0.5.1

package/dist/index.d.cts

@@ -39,9 +39,53 @@ declare const DRAG_DISTANCE_SQUARED = 36;
 declare const DEFAULT_COLORS: Record<string, string>;
 declare const MAX_POINTS_PER_SHAPE = 200;
 
+interface TsdrawPageRecord {
+    id: string;
+    typeName: 'page';
+    pageId: string;
+    shapeIds: ShapeId[];
+    erasingShapeIds: ShapeId[];
+}
+interface TsdrawShapeRecord {
+    id: ShapeId;
+    typeName: 'shape';
+    shape: Shape;
+}
+type TsdrawPersistedRecord = TsdrawPageRecord | TsdrawShapeRecord;
+interface TsdrawDocumentSnapshot {
+    records: TsdrawPersistedRecord[];
+}
+interface TsdrawSessionStateSnapshot {
+    version: 1;
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    currentToolId: string;
+    drawStyle: {
+        color: ColorStyle;
+        dash: DashStyle;
+        size: SizeStyle;
+    };
+    selectedShapeIds: ShapeId[];
+}
+interface TsdrawEditorSnapshot {
+    document: TsdrawDocumentSnapshot;
+    state: TsdrawSessionStateSnapshot;
+}
+interface DocumentStoreSnapshot {
+    page: PageState;
+    order: ShapeId[];
+}
+declare function documentSnapshotToRecords(snapshot: DocumentStoreSnapshot): TsdrawPersistedRecord[];
+declare function recordsToDocumentSnapshot(records: TsdrawPersistedRecord[]): DocumentStoreSnapshot | null;
+
+type DocumentStoreListener = () => void;
 declare class DocumentStore {
     private state;
     private order;
+    private readonly listeners;
     getPage(): PageState;
     getShape(id: ShapeId): Shape | undefined;
     getCurrentPageShapesSorted(): Shape[];
@@ -58,6 +102,10 @@ declare class DocumentStore {
         maxX: number;
         maxY: number;
     }): Set<ShapeId>;
+    getSnapshot(): DocumentStoreSnapshot;
+    loadSnapshot(snapshot: DocumentStoreSnapshot): void;
+    listen(listener: DocumentStoreListener): () => void;
+    private emitChange;
 }
 
 interface PointerInput {
@@ -228,6 +276,7 @@ interface EditorOptions {
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
 }
+type EditorListener = () => void;
 declare class Editor {
     readonly store: DocumentStore;
     readonly input: InputManager;
@@ -239,6 +288,7 @@ declare class Editor {
     };
     private drawStyle;
     private readonly toolStateContext;
+    private readonly listeners;
     constructor(opts?: EditorOptions);
     registerToolDefinition(toolDefinition: ToolDefinition): void;
     private getDefaultToolDefinitions;
@@ -269,12 +319,25 @@ declare class Editor {
         dash: DashStyle;
         size: SizeStyle;
     }>): void;
+    setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
+    getDocumentSnapshot(): TsdrawDocumentSnapshot;
+    loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
+    getSessionStateSnapshot(args?: {
+        selectedShapeIds?: ShapeId[];
+    }): TsdrawSessionStateSnapshot;
+    loadSessionStateSnapshot(snapshot: TsdrawSessionStateSnapshot): ShapeId[];
+    getPersistenceSnapshot(args?: {
+        selectedShapeIds?: ShapeId[];
+    }): TsdrawEditorSnapshot;
+    loadPersistenceSnapshot(snapshot: Partial<TsdrawEditorSnapshot>): ShapeId[];
+    listen(listener: EditorListener): () => void;
     screenToPage(screenX: number, screenY: number): {
         x: number;
         y: number;
     };
     render(ctx: CanvasRenderingContext2D): void;
+    private emitChange;
 }
 
 declare class PenIdleState extends StateNode {
@@ -461,4 +524,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawRenderTheme, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.d.ts

@@ -39,9 +39,53 @@ declare const DRAG_DISTANCE_SQUARED = 36;
 declare const DEFAULT_COLORS: Record<string, string>;
 declare const MAX_POINTS_PER_SHAPE = 200;
 
+interface TsdrawPageRecord {
+    id: string;
+    typeName: 'page';
+    pageId: string;
+    shapeIds: ShapeId[];
+    erasingShapeIds: ShapeId[];
+}
+interface TsdrawShapeRecord {
+    id: ShapeId;
+    typeName: 'shape';
+    shape: Shape;
+}
+type TsdrawPersistedRecord = TsdrawPageRecord | TsdrawShapeRecord;
+interface TsdrawDocumentSnapshot {
+    records: TsdrawPersistedRecord[];
+}
+interface TsdrawSessionStateSnapshot {
+    version: 1;
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    currentToolId: string;
+    drawStyle: {
+        color: ColorStyle;
+        dash: DashStyle;
+        size: SizeStyle;
+    };
+    selectedShapeIds: ShapeId[];
+}
+interface TsdrawEditorSnapshot {
+    document: TsdrawDocumentSnapshot;
+    state: TsdrawSessionStateSnapshot;
+}
+interface DocumentStoreSnapshot {
+    page: PageState;
+    order: ShapeId[];
+}
+declare function documentSnapshotToRecords(snapshot: DocumentStoreSnapshot): TsdrawPersistedRecord[];
+declare function recordsToDocumentSnapshot(records: TsdrawPersistedRecord[]): DocumentStoreSnapshot | null;
+
+type DocumentStoreListener = () => void;
 declare class DocumentStore {
     private state;
     private order;
+    private readonly listeners;
     getPage(): PageState;
     getShape(id: ShapeId): Shape | undefined;
     getCurrentPageShapesSorted(): Shape[];
@@ -58,6 +102,10 @@ declare class DocumentStore {
         maxX: number;
         maxY: number;
     }): Set<ShapeId>;
+    getSnapshot(): DocumentStoreSnapshot;
+    loadSnapshot(snapshot: DocumentStoreSnapshot): void;
+    listen(listener: DocumentStoreListener): () => void;
+    private emitChange;
 }
 
 interface PointerInput {
@@ -228,6 +276,7 @@ interface EditorOptions {
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
 }
+type EditorListener = () => void;
 declare class Editor {
     readonly store: DocumentStore;
     readonly input: InputManager;
@@ -239,6 +288,7 @@ declare class Editor {
     };
     private drawStyle;
     private readonly toolStateContext;
+    private readonly listeners;
     constructor(opts?: EditorOptions);
     registerToolDefinition(toolDefinition: ToolDefinition): void;
     private getDefaultToolDefinitions;
@@ -269,12 +319,25 @@ declare class Editor {
         dash: DashStyle;
         size: SizeStyle;
     }>): void;
+    setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
+    getDocumentSnapshot(): TsdrawDocumentSnapshot;
+    loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
+    getSessionStateSnapshot(args?: {
+        selectedShapeIds?: ShapeId[];
+    }): TsdrawSessionStateSnapshot;
+    loadSessionStateSnapshot(snapshot: TsdrawSessionStateSnapshot): ShapeId[];
+    getPersistenceSnapshot(args?: {
+        selectedShapeIds?: ShapeId[];
+    }): TsdrawEditorSnapshot;
+    loadPersistenceSnapshot(snapshot: Partial<TsdrawEditorSnapshot>): ShapeId[];
+    listen(listener: EditorListener): () => void;
     screenToPage(screenX: number, screenY: number): {
         x: number;
         y: number;
     };
     render(ctx: CanvasRenderingContext2D): void;
+    private emitChange;
 }
 
 declare class PenIdleState extends StateNode {
@@ -461,4 +524,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawRenderTheme, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.js

@@ -69,6 +69,12 @@ function decodePathToPoints(segments, ox, oy) {
 }
 
 // src/store/documentStore.ts
+function cloneValue(value) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(value);
+  }
+  return JSON.parse(JSON.stringify(value));
+}
 var DocumentStore = class {
   state = {
     id: "page-1",
@@ -76,6 +82,7 @@ var DocumentStore = class {
     erasingShapeIds: []
   };
   order = [];
+  listeners = /* @__PURE__ */ new Set();
   getPage() {
     return this.state;
   }
@@ -96,15 +103,18 @@ var DocumentStore = class {
   }
   setErasingShapes(ids) {
     this.state.erasingShapeIds = ids;
+    this.emitChange();
   }
   createShape(shape) {
     this.state.shapes[shape.id] = shape;
     this.order.push(shape.id);
+    this.emitChange();
   }
   updateShape(id, partial) {
     const existing = this.state.shapes[id];
     if (!existing) return;
     this.state.shapes[id] = { ...existing, ...partial, id };
+    this.emitChange();
   }
   deleteShapes(ids) {
     for (const id of ids) {
@@ -112,6 +122,7 @@ var DocumentStore = class {
       this.order = this.order.filter((i) => i !== id);
     }
     this.state.erasingShapeIds = this.state.erasingShapeIds.filter((i) => !ids.includes(i));
+    this.emitChange();
   }
   getCurrentPageShapes() {
     return Object.values(this.state.shapes);
@@ -127,6 +138,35 @@ var DocumentStore = class {
     }
     return ids;
   }
+  getSnapshot() {
+    return {
+      page: cloneValue(this.state),
+      order: [...this.order]
+    };
+  }
+  // Load snapshot into the document when loading a persistence snapshot (so on page reload)
+  loadSnapshot(snapshot) {
+    const pageState = cloneValue(snapshot.page);
+    const normalizedOrder = [...snapshot.order].filter((shapeId) => pageState.shapes[shapeId] != null);
+    this.state = {
+      id: pageState.id,
+      shapes: pageState.shapes,
+      erasingShapeIds: pageState.erasingShapeIds.filter((shapeId) => pageState.shapes[shapeId] != null)
+    };
+    this.order = normalizedOrder;
+    this.emitChange();
+  }
+  listen(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
 };
 function getShapeBounds(shape) {
   if (shape.type !== "draw") {
@@ -213,105 +253,26 @@ function zoomViewport(viewport, factor, centerX, centerY) {
 }
 
 // src/utils/colors.ts
+var DARK_COLORS = {
+  black: "#f0f0f0",
+  grey: "#aeb8c2",
+  "light-violet": "#cf6ef5",
+  violet: "#a83ce0",
+  blue: "#5b7dff",
+  "light-blue": "#4fb3ff",
+  yellow: "#f4b13a",
+  orange: "#ef7a24",
+  green: "#1fb27a",
+  "light-green": "#4ecb66",
+  "light-red": "#ff6f78",
+  red: "#f24343",
+  white: "#ffffff"
+};
 function resolveThemeColor(colorStyle, theme) {
-  const paletteColor = DEFAULT_COLORS[colorStyle];
-  if (!paletteColor) return colorStyle;
-  if (theme === "light") return paletteColor;
-  return invertAndHueRotate180(paletteColor);
-}
-function invertAndHueRotate180(color) {
-  const rgb = parseHexColor(color);
-  if (!rgb) return color;
-  const inverted = {
-    r: 255 - rgb.r,
-    g: 255 - rgb.g,
-    b: 255 - rgb.b
-  };
-  const hsl = rgbToHsl(inverted.r, inverted.g, inverted.b);
-  const rotated = hslToRgb((hsl.h + 180) % 360, hsl.s, hsl.l);
-  return rgbToHex(rotated.r, rotated.g, rotated.b);
-}
-function parseHexColor(color) {
-  const normalized = color.trim().toLowerCase();
-  if (!normalized.startsWith("#")) return null;
-  if (normalized.length === 4) {
-    return {
-      r: parseInt(normalized[1] + normalized[1], 16),
-      g: parseInt(normalized[2] + normalized[2], 16),
-      b: parseInt(normalized[3] + normalized[3], 16)
-    };
-  }
-  if (normalized.length !== 7) return null;
-  return {
-    r: parseInt(normalized.slice(1, 3), 16),
-    g: parseInt(normalized.slice(3, 5), 16),
-    b: parseInt(normalized.slice(5, 7), 16)
-  };
-}
-function rgbToHex(r, g, b) {
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function toHex(value) {
-  return Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, "0");
-}
-function rgbToHsl(r, g, b) {
-  const red = r / 255;
-  const green = g / 255;
-  const blue = b / 255;
-  const maxChannel = Math.max(red, green, blue);
-  const minChannel = Math.min(red, green, blue);
-  const delta = maxChannel - minChannel;
-  const lightness = (maxChannel + minChannel) / 2;
-  if (delta === 0) {
-    return { h: 0, s: 0, l: lightness };
-  }
-  const saturation = lightness > 0.5 ? delta / (2 - maxChannel - minChannel) : delta / (maxChannel + minChannel);
-  let hue = 0;
-  if (maxChannel === red) {
-    hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
-  } else if (maxChannel === green) {
-    hue = ((blue - red) / delta + 2) * 60;
-  } else {
-    hue = ((red - green) / delta + 4) * 60;
-  }
-  return { h: hue, s: saturation, l: lightness };
-}
-function hslToRgb(h, s, l) {
-  if (s === 0) {
-    const channel = l * 255;
-    return { r: channel, g: channel, b: channel };
-  }
-  const chroma = (1 - Math.abs(2 * l - 1)) * s;
-  const hueSegment = h / 60;
-  const x = chroma * (1 - Math.abs(hueSegment % 2 - 1));
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-  if (hueSegment >= 0 && hueSegment < 1) {
-    red = chroma;
-    green = x;
-  } else if (hueSegment < 2) {
-    red = x;
-    green = chroma;
-  } else if (hueSegment < 3) {
-    green = chroma;
-    blue = x;
-  } else if (hueSegment < 4) {
-    green = x;
-    blue = chroma;
-  } else if (hueSegment < 5) {
-    red = x;
-    blue = chroma;
-  } else {
-    red = chroma;
-    blue = x;
-  }
-  const match = l - chroma / 2;
-  return {
-    r: (red + match) * 255,
-    g: (green + match) * 255,
-    b: (blue + match) * 255
-  };
+  const lightThemeColor = DEFAULT_COLORS[colorStyle];
+  if (!lightThemeColor) return colorStyle;
+  if (theme === "light") return lightThemeColor;
+  return DARK_COLORS[colorStyle] ?? lightThemeColor;
 }
 var CanvasRenderer = class {
   theme = "light";
@@ -1288,10 +1249,68 @@ var HandDraggingState = class extends StateNode {
   }
 };
 
+// src/persistence/snapshots.ts
+var PAGE_RECORD_ID = "page:current";
+function cloneValue2(value) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(value);
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function asDrawShape(value) {
+  return cloneValue2(value);
+}
+function documentSnapshotToRecords(snapshot) {
+  const shapeIds = [...snapshot.order].filter((id) => snapshot.page.shapes[id] != null);
+  const pageRecord = {
+    id: PAGE_RECORD_ID,
+    typeName: "page",
+    pageId: snapshot.page.id,
+    shapeIds,
+    erasingShapeIds: [...snapshot.page.erasingShapeIds]
+  };
+  const shapeRecords = shapeIds.map((shapeId) => snapshot.page.shapes[shapeId]).filter((shape) => shape != null).map((shape) => ({
+    id: shape.id,
+    typeName: "shape",
+    shape: asDrawShape(shape)
+  }));
+  return [pageRecord, ...shapeRecords];
+}
+function recordsToDocumentSnapshot(records) {
+  const pageRecord = records.find((record) => record.typeName === "page");
+  if (!pageRecord) {
+    return null;
+  }
+  const shapeRecordMap = /* @__PURE__ */ new Map();
+  for (const record of records) {
+    if (record.typeName === "shape") {
+      shapeRecordMap.set(record.id, record);
+    }
+  }
+  const shapes = {};
+  const order = [];
+  for (const shapeId of pageRecord.shapeIds) {
+    const shapeRecord = shapeRecordMap.get(shapeId);
+    if (!shapeRecord) continue;
+    shapes[shapeId] = asDrawShape(shapeRecord.shape);
+    order.push(shapeId);
+  }
+  return {
+    page: {
+      id: pageRecord.pageId,
+      shapes,
+      erasingShapeIds: [...pageRecord.erasingShapeIds].filter((shapeId) => shapes[shapeId] != null)
+    },
+    order
+  };
+}
+
 // src/editor/Editor.ts
 var shapeIdCounter = 0;
+var shapeIdRuntimeSeed = Math.random().toString(36).slice(2, 8);
 function createShapeId() {
-  return `shape:${String(++shapeIdCounter).padStart(6, "0")}`;
+  shapeIdCounter += 1;
+  return `shape:${Date.now().toString(36)}-${shapeIdRuntimeSeed}-${shapeIdCounter.toString(36)}`;
 }
 var Editor = class {
   store = new DocumentStore();
@@ -1307,9 +1326,11 @@ var Editor = class {
     size: "m"
   };
   toolStateContext;
+  listeners = /* @__PURE__ */ new Set();
   // Creates a new editor instance with the given options (with defaults if not provided)
   constructor(opts = {}) {
     this.options = { dragDistanceSquared: opts.dragDistanceSquared ?? DRAG_DISTANCE_SQUARED };
+    this.store.listen(() => this.emitChange());
     this.toolStateContext = {
       transition: (id, info) => this.tools.transition(id, info)
     };
@@ -1319,7 +1340,7 @@ var Editor = class {
     for (const customTool of opts.toolDefinitions ?? []) {
       this.registerToolDefinition(customTool);
     }
-    this.tools.setCurrentTool(opts.initialToolId ?? "pen");
+    this.setCurrentTool(opts.initialToolId ?? "pen");
   }
   registerToolDefinition(toolDefinition) {
     for (const stateConstructor of toolDefinition.stateConstructors) {
@@ -1380,6 +1401,7 @@ var Editor = class {
   }
   setCurrentTool(id) {
     this.tools.setCurrentTool(id);
+    this.emitChange();
   }
   getCurrentToolId() {
     return this.tools.getCurrentToolId();
@@ -1389,10 +1411,73 @@ var Editor = class {
   }
   setCurrentDrawStyle(partial) {
     this.drawStyle = { ...this.drawStyle, ...partial };
+    this.emitChange();
+  }
+  setViewport(partial) {
+    this.viewport = {
+      x: partial.x ?? this.viewport.x,
+      y: partial.y ?? this.viewport.y,
+      zoom: partial.zoom ?? this.viewport.zoom
+    };
+    this.emitChange();
   }
   panBy(dx, dy) {
-    this.viewport.x += dx;
-    this.viewport.y += dy;
+    this.setViewport({
+      x: this.viewport.x + dx,
+      y: this.viewport.y + dy
+    });
+  }
+  getDocumentSnapshot() {
+    return {
+      records: documentSnapshotToRecords(this.store.getSnapshot())
+    };
+  }
+  loadDocumentSnapshot(snapshot) {
+    const documentSnapshot = recordsToDocumentSnapshot(snapshot.records);
+    if (!documentSnapshot) return;
+    this.store.loadSnapshot(documentSnapshot);
+  }
+  getSessionStateSnapshot(args) {
+    return {
+      version: 1,
+      viewport: {
+        x: this.viewport.x,
+        y: this.viewport.y,
+        zoom: this.viewport.zoom
+      },
+      currentToolId: this.getCurrentToolId(),
+      drawStyle: this.getCurrentDrawStyle(),
+      selectedShapeIds: [...args?.selectedShapeIds ?? []]
+    };
+  }
+  loadSessionStateSnapshot(snapshot) {
+    this.setViewport(snapshot.viewport);
+    this.setCurrentDrawStyle(snapshot.drawStyle);
+    if (this.tools.hasTool(snapshot.currentToolId)) {
+      this.setCurrentTool(snapshot.currentToolId);
+    }
+    return [...snapshot.selectedShapeIds];
+  }
+  getPersistenceSnapshot(args) {
+    return {
+      document: this.getDocumentSnapshot(),
+      state: this.getSessionStateSnapshot(args)
+    };
+  }
+  loadPersistenceSnapshot(snapshot) {
+    if (snapshot.document) {
+      this.loadDocumentSnapshot(snapshot.document);
+    }
+    if (snapshot.state) {
+      return this.loadSessionStateSnapshot(snapshot.state);
+    }
+    return [];
+  }
+  listen(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
   }
   // Convert screen coords to page coords
   screenToPage(screenX, screenY) {
@@ -1405,6 +1490,11 @@ var Editor = class {
     const visible = shapes.filter((s) => !erasingIds.has(s.id));
     this.renderer.render(ctx, this.viewport, visible);
   }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
 };
 
 // src/tools/select/selectHelpers.ts
@@ -1648,6 +1738,6 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
   }
 }
 
-export { CanvasRenderer, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { CanvasRenderer, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map