@fieldnotes/svelte 0.0.0-stage → 0.1.0

package/dist/Minimap.svelte

@@ -0,0 +1,85 @@
+<script module lang="ts">
+  /** Props for {@link Minimap}. */
+  export interface MinimapProps {
+    /** Thumbnail width in CSS pixels. Default `200`. */
+    width?: number;
+    /** Thumbnail height in CSS pixels. Default `140`. */
+    height?: number;
+    /** Start collapsed (icon button only). Uncontrolled. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Backdrop fill behind the thumbnail. */
+    background?: string;
+    /** Viewport rectangle stroke color. */
+    viewportStroke?: string;
+    class?: string;
+    style?: string;
+  }
+
+  const toggleStyle =
+    'position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; ' +
+    'border: none; border-radius: 4px; background: rgba(0,0,0,0.35); color: #fff; ' +
+    'font: 14px/1 system-ui, sans-serif; cursor: pointer;';
+
+  const collapsedStyle =
+    'min-width: 44px; min-height: 44px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; ' +
+    'background: rgba(255,255,255,0.85); cursor: pointer; font: 18px/1 system-ui, sans-serif;';
+</script>
+
+<!--
+  @component
+  Collapsible thumbnail overview navigator. Renders inside `<FieldNotesCanvas>`
+  (or under `setViewportContext`). Positioning is host-owned — place and
+  style the component via `class`/`style`. While collapsed, no controller
+  exists: zero listeners, zero rendering.
+-->
+<script lang="ts">
+  import { MinimapController } from '@fieldnotes/core';
+  import { useViewport } from './context.js';
+
+  const {
+    width = 200,
+    height = 140,
+    defaultCollapsed = false,
+    background,
+    viewportStroke,
+    class: className,
+    style = '',
+  }: MinimapProps = $props();
+  const viewport = useViewport();
+  // Uncontrolled: only the initial value is read.
+  // svelte-ignore state_referenced_locally
+  let collapsed = $state(defaultCollapsed);
+  let canvas = $state<HTMLCanvasElement | null>(null);
+
+  $effect(() => {
+    if (collapsed || !canvas) return;
+    const controller = new MinimapController(viewport, canvas, {
+      width,
+      height,
+      background,
+      viewportStroke,
+    });
+    return () => controller.dispose();
+  });
+</script>
+
+{#if collapsed}
+  <button
+    type="button"
+    aria-label="Expand minimap"
+    onclick={() => (collapsed = false)}
+    class={className}
+    style="{collapsedStyle} {style}">▣</button
+  >
+{:else}
+  <div class={className} style="position: relative; {style}">
+    <canvas bind:this={canvas} style="width: {width}px; height: {height}px; display: block"
+    ></canvas>
+    <button
+      type="button"
+      aria-label="Collapse minimap"
+      onclick={() => (collapsed = true)}
+      style={toggleStyle}>–</button
+    >
+  </div>
+{/if}

package/dist/Minimap.svelte.d.ts

@@ -0,0 +1,25 @@
+/** Props for {@link Minimap}. */
+export interface MinimapProps {
+    /** Thumbnail width in CSS pixels. Default `200`. */
+    width?: number;
+    /** Thumbnail height in CSS pixels. Default `140`. */
+    height?: number;
+    /** Start collapsed (icon button only). Uncontrolled. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Backdrop fill behind the thumbnail. */
+    background?: string;
+    /** Viewport rectangle stroke color. */
+    viewportStroke?: string;
+    class?: string;
+    style?: string;
+}
+/**
+ * Collapsible thumbnail overview navigator. Renders inside `<FieldNotesCanvas>`
+ * (or under `setViewportContext`). Positioning is host-owned — place and
+ * style the component via `class`/`style`. While collapsed, no controller
+ * exists: zero listeners, zero rendering.
+ */
+declare const Minimap: import("svelte").Component<MinimapProps, {}, "">;
+type Minimap = ReturnType<typeof Minimap>;
+export default Minimap;
+//# sourceMappingURL=Minimap.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.svelte.d.ts","sourceRoot":"","sources":["../src/Minimap.svelte.ts"],"names":[],"mappings":"AAGE,iCAAiC;AACjC,MAAM,WAAW,YAAY;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4DH;;;;;GAKG;AACH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/ViewportProvider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Viewport } from '@fieldnotes/core';
+  import { setViewportContext } from './context.js';
+
+  // Sets the context in its own init so children only render once the viewport exists.
+  const props: { viewport: Viewport; children: Snippet } = $props();
+  // The canvas mounts this provider once per viewport, so the initial value is the only one.
+  // svelte-ignore state_referenced_locally
+  setViewportContext(props.viewport);
+</script>
+
+{@render props.children()}

package/dist/ViewportProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { Viewport } from '@fieldnotes/core';
+type $$ComponentProps = {
+    viewport: Viewport;
+    children: Snippet;
+};
+declare const ViewportProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewportProvider = ReturnType<typeof ViewportProvider>;
+export default ViewportProvider;
+//# sourceMappingURL=ViewportProvider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportProvider.svelte.d.ts","sourceRoot":"","sources":["../src/ViewportProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGhD,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAiBpE,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,6 @@
+import type { Viewport } from '@fieldnotes/core';
+/** Provides `viewport` to descendants' `useViewport()`; call during component init. */
+export declare function setViewportContext(viewport: Viewport): void;
+/** The Viewport from the nearest `<FieldNotesCanvas>`. Throws outside one. */
+export declare function useViewport(): Viewport;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIjD,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE3D;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,IAAI,QAAQ,CAMtC"}

package/dist/context.js

@@ -0,0 +1,14 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('fieldnotes.viewport');
+/** Provides `viewport` to descendants' `useViewport()`; call during component init. */
+export function setViewportContext(viewport) {
+    setContext(key, viewport);
+}
+/** The Viewport from the nearest `<FieldNotesCanvas>`. Throws outside one. */
+export function useViewport() {
+    const viewport = getContext(key);
+    if (!viewport) {
+        throw new Error('useViewport must be used inside <FieldNotesCanvas>');
+    }
+    return viewport;
+}

package/dist/helpers/from-source.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Readable } from 'svelte/store';
+import type { ViewportSource } from '@fieldnotes/core';
+/** A store over `source`, live while subscribed; each `input` value resubscribes the source. */
+export declare function fromSource<T>(source: ViewportSource<T>, input?: Readable<unknown>): Readable<T>;
+//# sourceMappingURL=from-source.svelte.d.ts.map

package/dist/helpers/from-source.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"from-source.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/from-source.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,gGAAgG;AAChG,wBAAgB,UAAU,CAAC,CAAC,EAC1B,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EACzB,KAAK,GAAE,QAAQ,CAAC,OAAO,CAAkB,GACxC,QAAQ,CAAC,CAAC,CAAC,CAqBb"}

package/dist/helpers/from-source.svelte.js

@@ -0,0 +1,25 @@
+import { readable } from 'svelte/store';
+/** A store over `source`, live while subscribed; each `input` value resubscribes the source. */
+export function fromSource(source, input = readable(null)) {
+    let current = source.getSnapshot();
+    return readable(current, (set) => {
+        // Svelte's store equality treats every object as changed, so compare references here.
+        const update = () => {
+            const next = source.getSnapshot();
+            if (next === current)
+                return;
+            current = next;
+            set(next);
+        };
+        let off;
+        const offInput = input.subscribe(() => {
+            off?.();
+            off = source.subscribe(update);
+            update();
+        });
+        return () => {
+            offInput();
+            off?.();
+        };
+    });
+}

package/dist/helpers/use-active-tool.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Readable } from 'svelte/store';
+/** `[activeToolName, setTool]` — the name updates on tool switches; `''` with no active tool. */
+export declare function useActiveTool(): [Readable<string>, (name: string) => void];
+//# sourceMappingURL=use-active-tool.svelte.d.ts.map

package/dist/helpers/use-active-tool.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-active-tool.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-active-tool.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,iGAAiG;AACjG,wBAAgB,aAAa,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,CAG1E"}

package/dist/helpers/use-active-tool.svelte.js

@@ -0,0 +1,8 @@
+import { createActiveToolSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/** `[activeToolName, setTool]` — the name updates on tool switches; `''` with no active tool. */
+export function useActiveTool() {
+    const viewport = useViewport();
+    return [fromSource(createActiveToolSource(viewport)), (name) => viewport.setTool(name)];
+}

package/dist/helpers/use-camera.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Readable } from 'svelte/store';
+import type { CameraState } from '@fieldnotes/core';
+/** Current camera position and zoom level — updates whenever the camera moves or zoom changes. */
+export declare function useCamera(): Readable<CameraState>;
+//# sourceMappingURL=use-camera.svelte.d.ts.map

package/dist/helpers/use-camera.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-camera.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-camera.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,kGAAkG;AAClG,wBAAgB,SAAS,IAAI,QAAQ,CAAC,WAAW,CAAC,CAEjD"}

package/dist/helpers/use-camera.svelte.js

@@ -0,0 +1,7 @@
+import { createCameraSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/** Current camera position and zoom level — updates whenever the camera moves or zoom changes. */
+export function useCamera() {
+    return fromSource(createCameraSource(useViewport()));
+}

package/dist/helpers/use-element-rects.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Readable } from 'svelte/store';
+import type { ElementRect, ElementRectMatch } from '@fieldnotes/core';
+/**
+ * World rects of the elements a host matcher selects, updating only when a
+ * tracked field changes. Camera motion never updates: position content under
+ * one camera transform and let the browser composite it. `match` is fixed at init.
+ */
+export declare function useElementRects(match: ElementRectMatch): Readable<readonly ElementRect[]>;
+//# sourceMappingURL=use-element-rects.svelte.d.ts.map

package/dist/helpers/use-element-rects.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-rects.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-element-rects.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,QAAQ,CAAC,SAAS,WAAW,EAAE,CAAC,CAQzF"}

package/dist/helpers/use-element-rects.svelte.js

@@ -0,0 +1,17 @@
+import { readable } from 'svelte/store';
+import { ElementRectTracker } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+/**
+ * World rects of the elements a host matcher selects, updating only when a
+ * tracked field changes. Camera motion never updates: position content under
+ * one camera transform and let the browser composite it. `match` is fixed at init.
+ */
+export function useElementRects(match) {
+    const viewport = useViewport();
+    return readable([], (set) => {
+        const tracker = new ElementRectTracker(viewport, { match });
+        set(tracker.getRects());
+        tracker.onChange(set);
+        return () => tracker.dispose();
+    });
+}

package/dist/helpers/use-elements.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Readable } from 'svelte/store';
+import type { CanvasElement, ElementType } from '@fieldnotes/core';
+/** All elements; updates on every store mutation (use a selector for hot paths). */
+export declare function useElements(): Readable<CanvasElement[]>;
+/** Elements of one type; updates on every store mutation. */
+export declare function useElements<T extends ElementType>(type: T): Readable<Extract<CanvasElement, {
+    type: T;
+}>[]>;
+/**
+ * Derived value; updates only when the selected value changes (per `isEqual`,
+ * default: one-level shallow compare — arrays by index, plain objects by key, primitives by
+ * Object.is). Supply `isEqual` for deeper structures: selectors returning nested fresh objects
+ * still need a custom comparator because the default only compares one level deep.
+ */
+export declare function useElements<R>(selector: (elements: CanvasElement[]) => R, isEqual?: (a: R, b: R) => boolean): Readable<R>;
+//# sourceMappingURL=use-elements.svelte.d.ts.map

package/dist/helpers/use-elements.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-elements.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-elements.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAInE,oFAAoF;AACpF,wBAAgB,WAAW,IAAI,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AACzD,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAC/C,IAAI,EAAE,CAAC,GACN,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,EAAE,CAAC,CAAC;AACnD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,QAAQ,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC,EAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GAChC,QAAQ,CAAC,CAAC,CAAC,CAAC"}

package/dist/helpers/use-elements.svelte.js

@@ -0,0 +1,10 @@
+import { createElementsSelectorSource, createElementsSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+export function useElements(arg, isEqual) {
+    const viewport = useViewport();
+    if (typeof arg === 'function') {
+        return fromSource(createElementsSelectorSource(viewport, () => arg, () => isEqual));
+    }
+    return fromSource(createElementsSource(viewport, () => arg));
+}

package/dist/helpers/use-history.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Readable } from 'svelte/store';
+import type { HistoryState } from '@fieldnotes/core';
+/** Result of {@link useHistory}. */
+export type UseHistoryResult = Readable<HistoryState> & {
+    undo(): void;
+    redo(): void;
+};
+/** `$history` is `{ canUndo, canRedo }`; `history.undo()` / `history.redo()` act on the viewport. */
+export declare function useHistory(): UseHistoryResult;
+//# sourceMappingURL=use-history.svelte.d.ts.map

package/dist/helpers/use-history.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-history.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-history.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIrD,oCAAoC;AACpC,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG;IAAE,IAAI,IAAI,IAAI,CAAC;IAAC,IAAI,IAAI,IAAI,CAAA;CAAE,CAAC;AAEvF,qGAAqG;AACrG,wBAAgB,UAAU,IAAI,gBAAgB,CAQ7C"}

package/dist/helpers/use-history.svelte.js

@@ -0,0 +1,13 @@
+import { createHistorySource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/** `$history` is `{ canUndo, canRedo }`; `history.undo()` / `history.redo()` act on the viewport. */
+export function useHistory() {
+    const viewport = useViewport();
+    const { subscribe } = fromSource(createHistorySource(viewport));
+    return {
+        subscribe,
+        undo: () => viewport.undo(),
+        redo: () => viewport.redo(),
+    };
+}

package/dist/helpers/use-layers.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Readable } from 'svelte/store';
+import type { Layer, LayersState } from '@fieldnotes/core';
+/** Result of {@link useLayers}. */
+export type UseLayersResult = Readable<LayersState> & {
+    createLayer: (name?: string) => Layer;
+    removeLayer: (id: string) => void;
+    renameLayer: (id: string, name: string) => void;
+    reorderLayer: (id: string, newOrder: number) => void;
+    setVisible: (id: string, visible: boolean) => void;
+    setLocked: (id: string, locked: boolean) => void;
+    setOpacity: (id: string, opacity: number) => void;
+    setActiveLayer: (id: string) => void;
+    moveElement: (elementId: string, layerId: string) => void;
+};
+/**
+ * Current layer list (`$layers.layers`, `$layers.activeLayerId`) and mutation helpers — updates
+ * whenever a layer is added, removed, reordered, renamed, or its visibility/lock/opacity/active
+ * state changes.
+ */
+export declare function useLayers(): UseLayersResult;
+//# sourceMappingURL=use-layers.svelte.d.ts.map

package/dist/helpers/use-layers.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-layers.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-layers.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI3D,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG;IACpD,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC;IACtC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,IAAI,eAAe,CAgB3C"}

package/dist/helpers/use-layers.svelte.js

@@ -0,0 +1,25 @@
+import { createLayersSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/**
+ * Current layer list (`$layers.layers`, `$layers.activeLayerId`) and mutation helpers — updates
+ * whenever a layer is added, removed, reordered, renamed, or its visibility/lock/opacity/active
+ * state changes.
+ */
+export function useLayers() {
+    const viewport = useViewport();
+    const layerManager = viewport.layerManager;
+    const { subscribe } = fromSource(createLayersSource(viewport));
+    return {
+        subscribe,
+        createLayer: (name) => layerManager.createLayer(name),
+        removeLayer: (id) => layerManager.removeLayer(id),
+        renameLayer: (id, name) => layerManager.renameLayer(id, name),
+        reorderLayer: (id, newOrder) => layerManager.reorderLayer(id, newOrder),
+        setVisible: (id, visible) => layerManager.setLayerVisible(id, visible),
+        setLocked: (id, locked) => layerManager.setLayerLocked(id, locked),
+        setOpacity: (id, opacity) => layerManager.setLayerOpacity(id, opacity),
+        setActiveLayer: (id) => layerManager.setActiveLayer(id),
+        moveElement: (elementId, layerId) => layerManager.moveElementToLayer(elementId, layerId),
+    };
+}

package/dist/helpers/use-selection-ops.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Readable } from 'svelte/store';
+import type { AlignEdge, DistributeAxis, SelectionOpsState } from '@fieldnotes/core';
+/** Result of {@link useSelectionOps}. */
+export type UseSelectionOpsResult = Readable<SelectionOpsState & {
+    selectedCount: number;
+}> & {
+    group: () => void;
+    ungroup: () => void;
+    toggleLock: () => void;
+    align: (edge: AlignEdge) => void;
+    distribute: (axis: DistributeAxis) => void;
+    rotateCW: () => void;
+    rotateCCW: () => void;
+};
+/**
+ * Selection operations + derived predicates for the current selection.
+ * Predicates (`canGroup`/`canAlign`/…) reflect whether each action is meaningful;
+ * `isLocked` is `true`/`false` when the selection is uniformly locked/unlocked,
+ * and `null` when empty or mixed. Actions delegate to the core Viewport.
+ */
+export declare function useSelectionOps(): UseSelectionOpsResult;
+//# sourceMappingURL=use-selection-ops.svelte.d.ts.map

package/dist/helpers/use-selection-ops.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-ops.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-selection-ops.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrF,yCAAyC;AACzC,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC,iBAAiB,GAAG;IAAE,aAAa,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG;IAC5F,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,qBAAqB,CAgBvD"}

package/dist/helpers/use-selection-ops.svelte.js

@@ -0,0 +1,27 @@
+import { derived } from 'svelte/store';
+import { createSelectionOpsSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/**
+ * Selection operations + derived predicates for the current selection.
+ * Predicates (`canGroup`/`canAlign`/…) reflect whether each action is meaningful;
+ * `isLocked` is `true`/`false` when the selection is uniformly locked/unlocked,
+ * and `null` when empty or mixed. Actions delegate to the core Viewport.
+ */
+export function useSelectionOps() {
+    const viewport = useViewport();
+    const { subscribe } = derived(fromSource(createSelectionOpsSource(viewport)), (state) => ({
+        ...state,
+        selectedCount: state.selectedIds.length,
+    }));
+    return {
+        subscribe,
+        group: () => viewport.groupSelection(),
+        ungroup: () => viewport.ungroupSelection(),
+        toggleLock: () => viewport.toggleLockSelection(),
+        align: (edge) => viewport.alignSelection(edge),
+        distribute: (axis) => viewport.distributeSelection(axis),
+        rotateCW: () => viewport.rotateSelection('cw'),
+        rotateCCW: () => viewport.rotateSelection('ccw'),
+    };
+}

package/dist/helpers/use-selection-style-details.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Readable } from 'svelte/store';
+import type { ElementStyle, SelectionStyleDetails } from '@fieldnotes/core';
+/**
+ * Style details of the current selection: per-field applicability and
+ * mixed-state, plus the common style. `null` when nothing valid is selected.
+ * The apply function delegates to `applyStyleToSelection` (one undo step).
+ */
+export declare function useSelectionStyleDetails(): [
+    Readable<SelectionStyleDetails | null>,
+    (style: ElementStyle) => void
+];
+//# sourceMappingURL=use-selection-style-details.svelte.d.ts.map

package/dist/helpers/use-selection-style-details.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-style-details.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-selection-style-details.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAI5E;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI;IAC1C,QAAQ,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACtC,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI;CAC9B,CAMA"}

package/dist/helpers/use-selection-style-details.svelte.js

@@ -0,0 +1,15 @@
+import { createSelectionStyleDetailsSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/**
+ * Style details of the current selection: per-field applicability and
+ * mixed-state, plus the common style. `null` when nothing valid is selected.
+ * The apply function delegates to `applyStyleToSelection` (one undo step).
+ */
+export function useSelectionStyleDetails() {
+    const viewport = useViewport();
+    return [
+        fromSource(createSelectionStyleDetailsSource(viewport)),
+        (style) => viewport.applyStyleToSelection(style),
+    ];
+}

package/dist/helpers/use-selection-style.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Readable } from 'svelte/store';
+import type { ElementStyle } from '@fieldnotes/core';
+/**
+ * Normalized style of the current selection.
+ * Returns `[style, applyPatch]` — `style` is `null` when nothing is selected.
+ * `applyPatch` applies an `ElementStyle` patch to every selected element.
+ */
+export declare function useSelectionStyle(): [
+    Readable<ElementStyle | null>,
+    (style: ElementStyle) => void
+];
+//# sourceMappingURL=use-selection-style.svelte.d.ts.map

package/dist/helpers/use-selection-style.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-style.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-selection-style.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI;IACnC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI;CAC9B,CAMA"}

package/dist/helpers/use-selection-style.svelte.js

@@ -0,0 +1,15 @@
+import { createSelectionStyleSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/**
+ * Normalized style of the current selection.
+ * Returns `[style, applyPatch]` — `style` is `null` when nothing is selected.
+ * `applyPatch` applies an `ElementStyle` patch to every selected element.
+ */
+export function useSelectionStyle() {
+    const viewport = useViewport();
+    return [
+        fromSource(createSelectionStyleSource(viewport)),
+        (style) => viewport.applyStyleToSelection(style),
+    ];
+}

package/dist/helpers/use-selection.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Readable } from 'svelte/store';
+/** Selected element ids. Stable array reference — only changes when the selection changes. */
+export declare function useSelection(): Readable<string[]>;
+//# sourceMappingURL=use-selection.svelte.d.ts.map

package/dist/helpers/use-selection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-selection.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,8FAA8F;AAC9F,wBAAgB,YAAY,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,CAEjD"}

package/dist/helpers/use-selection.svelte.js

@@ -0,0 +1,7 @@
+import { createSelectionSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/** Selected element ids. Stable array reference — only changes when the selection changes. */
+export function useSelection() {
+    return fromSource(createSelectionSource(useViewport()));
+}

package/dist/helpers/use-tool-options.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Readable } from 'svelte/store';
+/**
+ * `[options, setOptions]` for the named tool — updates when the tool's options change.
+ * `options` is `null` if the tool is not registered or does not expose options.
+ * A getter `toolName` is tracked: the store resubscribes to the new tool.
+ */
+export declare function useToolOptions<T extends Record<string, unknown>>(toolName: string | (() => string)): [Readable<T | null>, (partial: Partial<T>) => void];
+//# sourceMappingURL=use-tool-options.svelte.d.ts.map

package/dist/helpers/use-tool-options.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tool-options.svelte.d.ts","sourceRoot":"","sources":["../../src/helpers/use-tool-options.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9D,QAAQ,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,GAChC,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAiBrD"}

package/dist/helpers/use-tool-options.svelte.js

@@ -0,0 +1,28 @@
+import { get, writable } from 'svelte/store';
+import { createToolOptionsSource } from '@fieldnotes/core';
+import { useViewport } from '../context.js';
+import { fromSource } from './from-source.svelte.js';
+/**
+ * `[options, setOptions]` for the named tool — updates when the tool's options change.
+ * `options` is `null` if the tool is not registered or does not expose options.
+ * A getter `toolName` is tracked: the store resubscribes to the new tool.
+ */
+export function useToolOptions(toolName) {
+    const viewport = useViewport();
+    let getName;
+    let input;
+    if (typeof toolName === 'string') {
+        getName = () => toolName;
+    }
+    else {
+        const name = writable(toolName());
+        $effect.pre(() => name.set(toolName()));
+        getName = () => get(name);
+        input = name;
+    }
+    const options = fromSource(createToolOptionsSource(viewport, getName), input);
+    const setOptions = (partial) => {
+        viewport.toolManager.getTool(getName())?.setOptions?.(partial);
+    };
+    return [options, setOptions];
+}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export { default as FieldNotesCanvas } from './FieldNotesCanvas.svelte';
+export type { FieldNotesCanvasProps } from './FieldNotesCanvas.svelte';
+export { setViewportContext, useViewport } from './context.js';
+export { default as CanvasElement } from './CanvasElement.svelte';
+export type { CanvasElementProps } from './CanvasElement.svelte';
+export { default as Minimap } from './Minimap.svelte';
+export type { MinimapProps } from './Minimap.svelte';
+export { useCamera } from './helpers/use-camera.svelte.js';
+export { useElements } from './helpers/use-elements.svelte.js';
+export { useSelection } from './helpers/use-selection.svelte.js';
+export { useActiveTool } from './helpers/use-active-tool.svelte.js';
+export { useToolOptions } from './helpers/use-tool-options.svelte.js';
+export { useSelectionStyle } from './helpers/use-selection-style.svelte.js';
+export { useSelectionStyleDetails } from './helpers/use-selection-style-details.svelte.js';
+export { useHistory } from './helpers/use-history.svelte.js';
+export type { UseHistoryResult } from './helpers/use-history.svelte.js';
+export { useLayers } from './helpers/use-layers.svelte.js';
+export type { UseLayersResult } from './helpers/use-layers.svelte.js';
+export { useSelectionOps } from './helpers/use-selection-ops.svelte.js';
+export type { UseSelectionOpsResult } from './helpers/use-selection-ops.svelte.js';
+export { useElementRects } from './helpers/use-element-rects.svelte.js';
+export type { AlignEdge, CameraState, DistributeAxis, ElementRect, ElementStyle, HistoryState, LayersState, SelectionOpsState, SelectionStyleDetails, } from '@fieldnotes/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,YAAY,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,YAAY,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC"}