@fieldnotes/svelte 0.1.0 → 0.1.1

package/dist/CanvasElement.svelte

@@ -9,12 +9,6 @@
     size?: { w: number; h: number };
     children: Snippet;
   }
-
-  /**
-   * Marks every store mutation this component makes as host-owned: external origin, so it
-   * neither creates an undo step nor is re-broadcast to the sync hub.
-   */
-  const HOST_ORIGIN = 'host';
 </script>
 
 <!--
@@ -26,6 +20,8 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { attachHostElement } from '@fieldnotes/core';
+  import type { HostElementHandle } from '@fieldnotes/core';
   import { useViewport } from './context.js';
 
   const { position, size, children }: CanvasElementProps = $props();
@@ -42,77 +38,18 @@
   });
 
   let container: HTMLDivElement;
-  let elementId: string | null = null;
+  let host: HostElementHandle | undefined;
 
   onMount(() => {
-    const register = () => {
-      // Append to domLayer immediately so the children are queryable in the document
-      // before the viewport render loop fires via requestAnimationFrame.
-      viewport.domLayer.appendChild(container);
-      const { position: current, size: currentSize } = geometry();
-      return viewport.addHtmlElement(container, current, currentSize, {
-        transient: true,
-        origin: HOST_ORIGIN,
-      });
-    };
-
-    elementId = register();
-
-    // A store clear detaches every canvas-owned DOM node and forgets the content registered
-    // for it, so this component has to hand its container back afterwards. The decision is
-    // deferred to a microtask because a remote clear is followed — synchronously, by the sync
-    // client — by re-adding the transient elements: reading the store inside the event would
-    // always report this element gone and add a duplicate.
-    const handleStoreReplacement = () => {
-      const clearedId = elementId;
-      if (clearedId === null) return;
-      queueMicrotask(() => {
-        if (elementId !== clearedId) return;
-        if (viewport.store.getById(clearedId)?.type === 'html') {
-          // Survived the clear (the sync client re-adds transient elements after a remote
-          // clear): restore the container as that element's content instead of adding a second.
-          viewport.updateHtmlElement(clearedId, container);
-        } else {
-          elementId = register();
-        }
-        viewport.requestRender();
-      });
-    };
-    // `clear` covers a clear-canvas gesture and a remote clear. A wholesale state replacement
-    // (`loadState`/`loadJSON`) runs inside `suspendNotifications`, so the store coalesces its
-    // events into a single `batch` instead: the same recovery applies.
-    const unsubscribeClear = viewport.store.on('clear', handleStoreReplacement);
-    const unsubscribeBatch = viewport.store.on('batch', handleStoreReplacement);
-
-    return () => {
-      unsubscribeClear();
-      unsubscribeBatch();
-      if (elementId) {
-        viewport.store.remove(elementId, { origin: HOST_ORIGIN });
-        viewport.requestRender();
-        elementId = null;
-      }
-      // Removing the element usually detaches the container; never leave it orphaned in the layer.
-      if (container.parentNode === viewport.domLayer) container.remove();
-    };
+    const handle = attachHostElement(viewport, container, geometry());
+    host = handle;
+    return () => handle.destroy();
   });
 
-  let registered = false;
   $effect(() => {
+    // Read before the optional call so tracking never depends on `host`.
     const next = geometry();
-    // The first run sees the geometry onMount just registered.
-    if (!registered) {
-      registered = true;
-      return;
-    }
-    if (!elementId) return;
-    const { position: nextPosition, size: nextSize } = next;
-    viewport.store.update(
-      elementId,
-      { position: nextPosition, ...(nextSize ? { size: nextSize } : {}) },
-      { origin: HOST_ORIGIN },
-    );
-    viewport.requestRender();
+    host?.setGeometry(next);
   });
 </script>
 

package/dist/CanvasElement.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasElement.svelte.d.ts","sourceRoot":"","sources":["../src/CanvasElement.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,wEAAwE;IACxE,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAkHH;;;;;GAKG;AACH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CanvasElement.svelte.d.ts","sourceRoot":"","sources":["../src/CanvasElement.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,wEAAwE;IACxE,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqDH;;;;;GAKG;AACH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/FieldNotesCanvas.svelte

@@ -1,7 +1,12 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte';
-  import type { ViewportOptions, Tool, CanvasState, ImportableCanvasState } from '@fieldnotes/core';
-  import { Viewport, createDefaultTools } from '@fieldnotes/core';
+  import type {
+    ViewportOptions,
+    Tool,
+    CanvasState,
+    ImportableCanvasState,
+    Viewport,
+  } from '@fieldnotes/core';
 
   export interface FieldNotesCanvasProps {
     /** Constructor-only: changes after mount are ignored (the canvas is stateful). */
@@ -42,6 +47,8 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { mountViewport } from '@fieldnotes/core';
+  import type { MountedViewport } from '@fieldnotes/core';
   import ViewportProvider from './ViewportProvider.svelte';
 
   const {
@@ -63,82 +70,44 @@
   let root: HTMLDivElement;
   let viewport = $state.raw<Viewport | null>(null);
 
-  // Props are read inside callbacks, so the debounce and handlers always see the latest values.
-  onMount(() => {
-    const vp = new Viewport(root, options);
-
-    const activate = (fallback?: string) => {
-      const name = tool ?? defaultTool ?? fallback;
-      if (name) vp.setTool(name);
-    };
-    // An explicit `options.tools` is the host's choice; core registers it and activates select.
-    const deferDefaults = tools === undefined && options?.tools === undefined;
-    for (const t of tools === 'default' ? createDefaultTools() : (tools ?? [])) {
-      vp.toolManager.register(t);
-    }
-    if (!deferDefaults) activate(tools === 'default' ? 'select' : undefined);
+  let mounted: MountedViewport | undefined;
 
-    try {
-      if (typeof initialData === 'string') vp.loadJSON(initialData);
-      else if (initialData) vp.loadState(initialData);
-    } catch (error) {
-      vp.destroy();
-      throw error;
-    }
-
-    let timer: ReturnType<typeof setTimeout> | undefined;
-    const emitChange = () => {
-      timer = undefined;
-      onchange?.(vp.exportState());
-    };
-    // Subscribed after initialData so the initial load is not reported as a change.
-    const unsubscribe = vp.onStateChange(() => {
-      clearTimeout(timer);
-      timer = setTimeout(emitChange, changeDebounceMs);
+  // Getters keep the destructured props live for the helper's deferred reads.
+  onMount(() => {
+    const handle = mountViewport(root, {
+      options,
+      tools,
+      initialData,
+      get tool() {
+        return tool;
+      },
+      get defaultTool() {
+        return defaultTool;
+      },
+      onReady: onready,
+      get onChange() {
+        return onchange;
+      },
+      get changeDebounceMs() {
+        return changeDebounceMs;
+      },
+      get onToolChange() {
+        return ontoolchange;
+      },
     });
-
-    try {
-      onready?.(vp);
-
-      // Hosts that register their own tools in onready keep exactly those.
-      if (deferDefaults) {
-        const registerDefaults = vp.toolManager.toolNames.length === 0;
-        if (registerDefaults) {
-          for (const t of createDefaultTools()) vp.toolManager.register(t);
-        }
-        activate(registerDefaults ? 'select' : undefined);
-      }
-    } catch (error) {
-      clearTimeout(timer);
-      unsubscribe();
-      vp.destroy();
-      throw error;
-    }
-
-    const unsubscribeTool = vp.toolManager.onChange((name) => ontoolchange?.(name));
-    viewport = vp;
+    mounted = handle;
+    viewport = handle.viewport;
 
     return () => {
-      if (timer !== undefined) {
-        clearTimeout(timer);
-        try {
-          emitChange();
-        } catch (error) {
-          // A failing host save must not leak the viewport or throw out of unmount.
-          if (typeof reportError === 'function') reportError(error);
-          else console.error('[fieldnotes] onChange failed during unmount', error);
-        }
-      }
-      unsubscribeTool();
-      unsubscribe();
-      vp.destroy();
+      handle.destroy();
+      mounted = undefined;
       viewport = null;
     };
   });
 
   $effect(() => {
     if (!viewport || tool === undefined) return;
-    if (viewport.toolManager.activeTool?.name !== tool) viewport.setTool(tool);
+    mounted?.setTool(tool);
   });
 
   $effect(() => {
@@ -148,9 +117,7 @@
 
   $effect(() => {
     if (!viewport || !Array.isArray(tools)) return;
-    for (const t of tools) {
-      if (!viewport.toolManager.getTool(t.name)) viewport.toolManager.register(t);
-    }
+    mounted?.addTools(tools);
   });
 </script>
 

package/dist/FieldNotesCanvas.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ViewportOptions, Tool, CanvasState, ImportableCanvasState } from '@fieldnotes/core';
-import { Viewport } from '@fieldnotes/core';
+import type { ViewportOptions, Tool, CanvasState, ImportableCanvasState, Viewport } from '@fieldnotes/core';
 export interface FieldNotesCanvasProps {
     /** Constructor-only: changes after mount are ignored (the canvas is stateful). */
     options?: ViewportOptions;

package/dist/FieldNotesCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldNotesCanvas.svelte.d.ts","sourceRoot":"","sources":["../src/FieldNotesCanvas.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAsB,MAAM,kBAAkB,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC3B,iFAAiF;IACjF,WAAW,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC7C,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkIH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FieldNotesCanvas.svelte.d.ts","sourceRoot":"","sources":["../src/FieldNotesCanvas.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACV,eAAe,EACf,IAAI,EACJ,WAAW,EACX,qBAAqB,EACrB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC3B,iFAAiF;IACjF,WAAW,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC7C,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8FH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/svelte",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Svelte wrapper for Field Notes canvas SDK",
   "type": "module",
   "sideEffects": false,
@@ -37,7 +37,7 @@
     "fieldnotes"
   ],
   "peerDependencies": {
-    "@fieldnotes/core": ">=0.96.0 <1.0.0",
+    "@fieldnotes/core": ">=0.98.0 <1.0.0",
     "svelte": ">=5 <6"
   },
   "devDependencies": {
@@ -49,7 +49,7 @@
     "svelte": "^5.57.2",
     "svelte-check": "^4.7.7",
     "vitest": "^5.0.5",
-    "@fieldnotes/core": "0.96.0"
+    "@fieldnotes/core": "0.98.0"
   },
   "scripts": {
     "build": "svelte-package -i src -o dist",