@joewinke/jatui 0.25.0 → 0.27.0

package/dist/components/graph/GraphCanvas.svelte

@@ -1,27 +1,117 @@
-<script lang="ts">
+<script lang="ts" generics="N extends Node = Node, E extends Edge = Edge">
 	import '@xyflow/svelte/dist/style.css'
 
-	import { SvelteFlow, Background, Controls, MiniMap, type Node, type Edge } from '@xyflow/svelte'
+	import {
+		SvelteFlow,
+		Background,
+		Controls,
+		MiniMap,
+		type Node,
+		type Edge,
+		type NodeTypes,
+		type EdgeTypes,
+		type DefaultEdgeOptions,
+		type Viewport,
+		type FitViewOptions,
+		type SnapGrid,
+		type ConnectionMode,
+		type MiniMapProps,
+		type BackgroundProps,
+		type NodeEventWithPointer,
+		type NodeEvents,
+		type EdgeEvents,
+		type PaneEvents,
+		type IsValidConnection,
+		type OnConnect,
+		type OnDelete,
+		type OnBeforeDelete,
+		type OnSelectionChange,
+		type OnMoveEnd,
+		type KeyDefinition,
+	} from '@xyflow/svelte'
+	import type { Snippet } from 'svelte'
 	import JatuiNode from './JatuiNode.svelte'
+	import GraphApiBridge from './GraphApiBridge.svelte'
 	import { watchAndApplyTheme } from './theme.js'
+	import {
+		createGraphCanvasApi,
+		mergeNodeTypes,
+		resolveBackgroundProps,
+		resolveMinimapProps,
+		viewportsEqual,
+		type GraphFlowHelpers,
+	} from './api.js'
 
-	import type { NodeEventWithPointer } from '@xyflow/svelte'
+	// Named (exported) xyflow types only — indexed SvelteFlowProps[...] lookups
+	// make svelte-package drop the .d.ts as "not portable".
+	type Keys = KeyDefinition | KeyDefinition[] | null
 
 	interface Props {
-		/** Flow nodes — bindable for interactive graphs. */
-		nodes: Node[]
-		/** Flow edges — bindable for interactive graphs. */
-		edges: Edge[]
-		/** When true, disables pan/zoom/selection interactions. */
+		// ── data ──────────────────────────────────────────────
+		/** Flow nodes — bindable; drags and selection write back. */
+		nodes: N[]
+		/** Flow edges — bindable; connects and deletes write back. */
+		edges: E[]
+		/** When true, disables drag/connect/select/pan/zoom interactions. */
 		readonly?: boolean
 		/** Fit the graph to the viewport on first render. */
 		fitView?: boolean
-		/** Show the minimap panel. */
-		minimap?: boolean
-		/** Fired when the user clicks a node. */
-		onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>
+		/** Show the minimap. Object form forwards MiniMap props (nodeColor, pannable, zoomable, …). */
+		minimap?: boolean | MiniMapProps
+		/** Fired when the user clicks a node (camelCase alias of `onnodeclick`; both fire). */
+		onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent, N>
 		/** Height of the canvas container (CSS value). Defaults to 100%. */
 		height?: string
+
+		// ── types ─────────────────────────────────────────────
+		/** Custom node components, merged OVER `{ jatuiNode: JatuiNode }`. Keep the object stable. */
+		nodeTypes?: NodeTypes
+		/** Custom edge components. Keep the object stable. */
+		edgeTypes?: EdgeTypes
+		defaultEdgeOptions?: DefaultEdgeOptions
+
+		// ── viewport ──────────────────────────────────────────
+		/** Live viewport `{ x, y, zoom }` — bindable; updates on every pan/zoom. */
+		viewport?: Viewport
+		/** Default `{ padding: 0.2 }`. */
+		fitViewOptions?: FitViewOptions<N>
+		minZoom?: number
+		maxZoom?: number
+
+		// ── editing ───────────────────────────────────────────
+		snapToGrid?: boolean
+		snapGrid?: SnapGrid
+		connectionMode?: ConnectionMode
+		isValidConnection?: IsValidConnection<E>
+		onconnect?: OnConnect
+		onbeforedelete?: OnBeforeDelete<N, E>
+		ondelete?: OnDelete<N, E>
+		deleteKey?: Keys
+		panActivationKey?: Keys
+		multiSelectionKey?: Keys
+		selectionKey?: Keys
+		/** Defaults to `!readonly`. */
+		panOnDrag?: boolean | number[]
+		selectionOnDrag?: boolean
+		zoomOnDoubleClick?: boolean
+
+		// ── events (forwarded verbatim) ───────────────────────
+		onnodeclick?: NodeEvents<N>['onnodeclick']
+		onnodecontextmenu?: NodeEvents<N>['onnodecontextmenu']
+		onnodedragstart?: NodeEvents<N>['onnodedragstart']
+		onnodedragstop?: NodeEvents<N>['onnodedragstop']
+		onedgeclick?: EdgeEvents<E>['onedgeclick']
+		onpaneclick?: PaneEvents['onpaneclick']
+		onselectionchange?: OnSelectionChange<N, E>
+		onmoveend?: OnMoveEnd
+
+		// ── chrome ────────────────────────────────────────────
+		/** Show zoom controls. Default true. */
+		controls?: boolean
+		/** `false` hides the dot grid; an object overrides `{ gap: 16, size: 1 }`. */
+		background?: false | BackgroundProps
+		/** Rendered INSIDE <SvelteFlow> — Panels, overlays, anything that calls useSvelteFlow(). */
+		children?: Snippet
 	}
 
 	let {
@@ -32,9 +122,69 @@
 		minimap = false,
 		onNodeClick,
 		height = '100%',
+		nodeTypes,
+		edgeTypes,
+		defaultEdgeOptions,
+		viewport = $bindable(),
+		fitViewOptions = { padding: 0.2 },
+		minZoom,
+		maxZoom,
+		snapToGrid,
+		snapGrid,
+		connectionMode,
+		isValidConnection,
+		onconnect,
+		onbeforedelete,
+		ondelete,
+		deleteKey,
+		panActivationKey,
+		multiSelectionKey,
+		selectionKey,
+		panOnDrag,
+		selectionOnDrag,
+		zoomOnDoubleClick,
+		onnodeclick,
+		onnodecontextmenu,
+		onnodedragstart,
+		onnodedragstop,
+		onedgeclick,
+		onpaneclick,
+		onselectionchange,
+		onmoveend,
+		controls = true,
+		background,
+		children,
 	}: Props = $props()
 
-	const nodeTypes = { jatuiNode: JatuiNode }
+	// Stable identity unless the consumer swaps nodeTypes — xyflow re-mounts
+	// every node when this object changes.
+	const resolvedNodeTypes = $derived(mergeNodeTypes({ jatuiNode: JatuiNode }, nodeTypes) as NodeTypes)
+	const minimapProps = $derived(resolveMinimapProps(minimap))
+	const backgroundProps = $derived(resolveBackgroundProps(background))
+
+	const handleNodeClick: NodeEventWithPointer<MouseEvent | TouchEvent, N> = (e) => {
+		onnodeclick?.(e)
+		onNodeClick?.(e)
+	}
+
+	let helpers: GraphFlowHelpers | null = null
+
+	/**
+	 * Imperative handle (`bind:this={canvas}` → `canvas.api.fitView()`). Every
+	 * method is a safe no-op until the flow initialises. `fitView` lives only on
+	 * `api` because the `fitView` prop owns the bare name; the rest are also
+	 * exported directly.
+	 */
+	export const api = createGraphCanvasApi(() => helpers)
+	export const zoomTo = api.zoomTo
+	export const getZoom = api.getZoom
+	export const setCenter = api.setCenter
+	export const screenToFlowPosition = api.screenToFlowPosition
+	export const getViewport = api.getViewport
+
+	function syncViewport(v: Viewport) {
+		if (!viewportsEqual(viewport, v)) viewport = v
+	}
 
 	let flowEl: HTMLDivElement | null = $state(null)
 	let stopWatch: (() => void) | null = null
@@ -52,24 +202,54 @@
 
 <div class="graph-canvas" style:height bind:this={flowEl}>
 	<SvelteFlow
-		{nodes}
-		{edges}
-		{nodeTypes}
+		bind:nodes
+		bind:edges
+		bind:viewport
+		nodeTypes={resolvedNodeTypes}
+		{edgeTypes}
+		{defaultEdgeOptions}
 		{fitView}
+		{fitViewOptions}
+		{minZoom}
+		{maxZoom}
+		{connectionMode}
+		{isValidConnection}
+		{onconnect}
+		{onbeforedelete}
+		{ondelete}
+		{deleteKey}
+		{panActivationKey}
+		{multiSelectionKey}
+		{selectionKey}
+		{selectionOnDrag}
+		{zoomOnDoubleClick}
+		snapGrid={snapToGrid ? (snapGrid ?? [16, 16]) : snapGrid}
 		nodesDraggable={!readonly}
 		nodesConnectable={!readonly}
 		elementsSelectable={!readonly}
-		panOnDrag={!readonly}
+		panOnDrag={panOnDrag ?? !readonly}
 		zoomOnScroll={!readonly}
-		onnodeclick={onNodeClick as NodeEventWithPointer<MouseEvent | TouchEvent> | undefined}
-		fitViewOptions={{ padding: 0.2 }}
+		onnodeclick={handleNodeClick}
+		{onnodecontextmenu}
+		{onnodedragstart}
+		{onnodedragstop}
+		{onedgeclick}
+		{onpaneclick}
+		{onselectionchange}
+		{onmoveend}
 		attributionPosition="bottom-right"
 	>
-		<Background gap={16} size={1} />
-		<Controls showLock={false} />
-		{#if minimap}
-			<MiniMap />
+		<GraphApiBridge onready={(h) => (helpers = h)} onviewport={syncViewport} />
+		{#if backgroundProps}
+			<Background {...backgroundProps} />
+		{/if}
+		{#if controls}
+			<Controls showLock={false} />
+		{/if}
+		{#if minimapProps}
+			<MiniMap {...minimapProps} />
 		{/if}
+		{@render children?.()}
 	</SvelteFlow>
 </div>
 
@@ -84,19 +264,24 @@
 		background: var(--color-base-100, oklch(0.98 0 0));
 	}
 
-	/* Strip xyflow's built-in node box-shadow (house rule: no at-rest shadows) */
-	:global(.svelte-flow .svelte-flow__node) {
+	/*
+	 * House rule (no at-rest shadows): strip xyflow's built-in shadow on the
+	 * node WRAPPER — scoped to this canvas so other flows in the app are left
+	 * alone. A custom node that draws a status glow on an INNER element is
+	 * unaffected; put glows there, not on the wrapper.
+	 */
+	.graph-canvas :global(.svelte-flow__node) {
 		box-shadow: none !important;
 		filter: none !important;
 	}
 
 	/* Edge animation uses opacity+stroke transitions, not layout — allowed */
-	:global(.svelte-flow .svelte-flow__edge path) {
+	.graph-canvas :global(.svelte-flow__edge path) {
 		transition: stroke var(--motion-fast) var(--motion-glide);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		:global(.svelte-flow .svelte-flow__edge path) {
+		.graph-canvas :global(.svelte-flow__edge path) {
 			transition: none;
 		}
 	}

package/dist/components/graph/GraphCanvas.svelte.d.ts

@@ -1,22 +1,116 @@
 import '@xyflow/svelte/dist/style.css';
-import { type Node, type Edge } from '@xyflow/svelte';
-import type { NodeEventWithPointer } from '@xyflow/svelte';
-interface Props {
-    /** Flow nodes — bindable for interactive graphs. */
-    nodes: Node[];
-    /** Flow edges — bindable for interactive graphs. */
-    edges: Edge[];
-    /** When true, disables pan/zoom/selection interactions. */
-    readonly?: boolean;
-    /** Fit the graph to the viewport on first render. */
-    fitView?: boolean;
-    /** Show the minimap panel. */
-    minimap?: boolean;
-    /** Fired when the user clicks a node. */
-    onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
-    /** Height of the canvas container (CSS value). Defaults to 100%. */
-    height?: string;
+import { type Node, type Edge, type NodeTypes, type EdgeTypes, type DefaultEdgeOptions, type Viewport, type FitViewOptions, type SnapGrid, type ConnectionMode, type MiniMapProps, type BackgroundProps, type NodeEventWithPointer, type NodeEvents, type EdgeEvents, type PaneEvents, type IsValidConnection, type OnConnect, type OnDelete, type OnBeforeDelete, type OnSelectionChange, type OnMoveEnd, type KeyDefinition } from '@xyflow/svelte';
+import type { Snippet } from 'svelte';
+declare function $$render<N extends Node = Node, E extends Edge = Edge>(): {
+    props: {
+        /** Flow nodes — bindable; drags and selection write back. */
+        nodes: N[];
+        /** Flow edges — bindable; connects and deletes write back. */
+        edges: E[];
+        /** When true, disables drag/connect/select/pan/zoom interactions. */
+        readonly?: boolean;
+        /** Fit the graph to the viewport on first render. */
+        fitView?: boolean;
+        /** Show the minimap. Object form forwards MiniMap props (nodeColor, pannable, zoomable, …). */
+        minimap?: boolean | MiniMapProps;
+        /** Fired when the user clicks a node (camelCase alias of `onnodeclick`; both fire). */
+        onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent, N>;
+        /** Height of the canvas container (CSS value). Defaults to 100%. */
+        height?: string;
+        /** Custom node components, merged OVER `{ jatuiNode: JatuiNode }`. Keep the object stable. */
+        nodeTypes?: NodeTypes;
+        /** Custom edge components. Keep the object stable. */
+        edgeTypes?: EdgeTypes;
+        defaultEdgeOptions?: DefaultEdgeOptions;
+        /** Live viewport `{ x, y, zoom }` — bindable; updates on every pan/zoom. */
+        viewport?: Viewport;
+        /** Default `{ padding: 0.2 }`. */
+        fitViewOptions?: FitViewOptions<N>;
+        minZoom?: number;
+        maxZoom?: number;
+        snapToGrid?: boolean;
+        snapGrid?: SnapGrid;
+        connectionMode?: ConnectionMode;
+        isValidConnection?: IsValidConnection<E>;
+        onconnect?: OnConnect;
+        onbeforedelete?: OnBeforeDelete<N, E>;
+        ondelete?: OnDelete<N, E>;
+        deleteKey?: KeyDefinition | KeyDefinition[] | null;
+        panActivationKey?: KeyDefinition | KeyDefinition[] | null;
+        multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
+        selectionKey?: KeyDefinition | KeyDefinition[] | null;
+        /** Defaults to `!readonly`. */
+        panOnDrag?: boolean | number[];
+        selectionOnDrag?: boolean;
+        zoomOnDoubleClick?: boolean;
+        onnodeclick?: NodeEvents<N>["onnodeclick"];
+        onnodecontextmenu?: NodeEvents<N>["onnodecontextmenu"];
+        onnodedragstart?: NodeEvents<N>["onnodedragstart"];
+        onnodedragstop?: NodeEvents<N>["onnodedragstop"];
+        onedgeclick?: EdgeEvents<E>["onedgeclick"];
+        onpaneclick?: PaneEvents["onpaneclick"];
+        onselectionchange?: OnSelectionChange<N, E>;
+        onmoveend?: OnMoveEnd;
+        /** Show zoom controls. Default true. */
+        controls?: boolean;
+        /** `false` hides the dot grid; an object overrides `{ gap: 16, size: 1 }`. */
+        background?: false | BackgroundProps;
+        /** Rendered INSIDE <SvelteFlow> — Panels, overlays, anything that calls useSvelteFlow(). */
+        children?: Snippet;
+    };
+    exports: {
+        /**
+             * Imperative handle (`bind:this={canvas}` → `canvas.api.fitView()`). Every
+             * method is a safe no-op until the flow initialises. `fitView` lives only on
+             * `api` because the `fitView` prop owns the bare name; the rest are also
+             * exported directly.
+             */ api: import("./api.js").GraphCanvasApi;
+        zoomTo: (zoom: number, options?: {
+            duration?: number;
+        }) => Promise<boolean>;
+        getZoom: () => number;
+        setCenter: (x: number, y: number, options?: {
+            zoom?: number;
+            duration?: number;
+        }) => Promise<boolean>;
+        screenToFlowPosition: (p: import("@xyflow/system").XYPosition) => import("@xyflow/system").XYPosition;
+        getViewport: () => Viewport;
+    };
+    bindings: "viewport" | "nodes" | "edges";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<N extends Node = Node, E extends Edge = Edge> {
+    props(): ReturnType<typeof $$render<N, E>>['props'];
+    events(): ReturnType<typeof $$render<N, E>>['events'];
+    slots(): ReturnType<typeof $$render<N, E>>['slots'];
+    bindings(): "viewport" | "nodes" | "edges";
+    exports(): {
+        /**
+             * Imperative handle (`bind:this={canvas}` → `canvas.api.fitView()`). Every
+             * method is a safe no-op until the flow initialises. `fitView` lives only on
+             * `api` because the `fitView` prop owns the bare name; the rest are also
+             * exported directly.
+             */ api: import("./api.js").GraphCanvasApi;
+        zoomTo: (zoom: number, options?: {
+            duration?: number;
+        }) => Promise<boolean>;
+        getZoom: () => number;
+        setCenter: (x: number, y: number, options?: {
+            zoom?: number;
+            duration?: number;
+        }) => Promise<boolean>;
+        screenToFlowPosition: (p: import("@xyflow/system").XYPosition) => import("@xyflow/system").XYPosition;
+        getViewport: () => Viewport;
+    };
 }
-declare const GraphCanvas: import("svelte").Component<Props, {}, "nodes" | "edges">;
-type GraphCanvas = ReturnType<typeof GraphCanvas>;
+interface $$IsomorphicComponent {
+    new <N extends Node = Node, E extends Edge = Edge>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<N, E>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<N, E>['props']>, ReturnType<__sveltets_Render<N, E>['events']>, ReturnType<__sveltets_Render<N, E>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<N, E>['bindings']>;
+    } & ReturnType<__sveltets_Render<N, E>['exports']>;
+    <N extends Node = Node, E extends Edge = Edge>(internal: unknown, props: ReturnType<__sveltets_Render<N, E>['props']> & {}): ReturnType<__sveltets_Render<N, E>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const GraphCanvas: $$IsomorphicComponent;
+type GraphCanvas<N extends Node = Node, E extends Edge = Edge> = InstanceType<typeof GraphCanvas<N, E>>;
 export default GraphCanvas;

package/dist/components/graph/api.d.ts

@@ -0,0 +1,52 @@
+/**
+ * GraphCanvas imperative API + pure prop helpers.
+ *
+ * `useSvelteFlow()` only works inside a CHILD of <SvelteFlow>, so a consumer
+ * holding `bind:this` on <GraphCanvas> can't reach it. GraphCanvas mounts a
+ * tiny internal child (GraphApiBridge) that calls the hook and hands the
+ * helpers up; `createGraphCanvasApi` wraps them so every method is a safe
+ * no-op until the flow has initialised.
+ *
+ * Kept free of Svelte/xyflow runtime imports so it is unit-testable in node.
+ */
+import type { BackgroundProps, FitViewOptions, MiniMapProps, Viewport, XYPosition } from '@xyflow/svelte';
+/** Imperative handle exposed on a GraphCanvas instance (`bind:this`). */
+export interface GraphCanvasApi {
+    fitView(options?: FitViewOptions): Promise<boolean>;
+    zoomTo(zoom: number, options?: {
+        duration?: number;
+    }): Promise<boolean>;
+    getZoom(): number;
+    setCenter(x: number, y: number, options?: {
+        zoom?: number;
+        duration?: number;
+    }): Promise<boolean>;
+    screenToFlowPosition(p: XYPosition): XYPosition;
+    getViewport(): Viewport;
+}
+/** The subset of `useSvelteFlow()` the bridge hands up. */
+export type GraphFlowHelpers = GraphCanvasApi;
+export declare const DEFAULT_VIEWPORT: Viewport;
+/**
+ * Build a GraphCanvasApi over a lazily-resolved helper set. Before the bridge
+ * reports in, methods resolve `false` / return identity values instead of
+ * throwing.
+ */
+export declare function createGraphCanvasApi(getHelpers: () => GraphFlowHelpers | null): GraphCanvasApi;
+export declare function viewportsEqual(a: Viewport | undefined, b: Viewport | undefined): boolean;
+/** `minimap` prop → MiniMap props, or null when hidden. */
+export declare function resolveMinimapProps(minimap: boolean | MiniMapProps | undefined): MiniMapProps | null;
+export declare const DEFAULT_BACKGROUND: BackgroundProps;
+/** `background` prop → Background props, or null when disabled. */
+export declare function resolveBackgroundProps(background: false | BackgroundProps | undefined): BackgroundProps | null;
+/**
+ * Merge consumer nodeTypes OVER the built-ins. Callers must memoise the
+ * result — xyflow re-mounts every node when the nodeTypes identity changes.
+ */
+export declare function mergeNodeTypes<T extends Record<string, unknown>>(builtins: T, custom: Record<string, unknown> | undefined): Record<string, unknown>;
+/**
+ * Viewport for zooming to `zoom` while keeping the point at the centre of a
+ * `width`×`height` pane fixed (xyflow 1.x has no zoomTo helper; setViewport
+ * alone would zoom around the top-left corner).
+ */
+export declare function zoomViewportAround(current: Viewport, zoom: number, width: number, height: number): Viewport;

package/dist/components/graph/api.js

@@ -0,0 +1,66 @@
+/**
+ * GraphCanvas imperative API + pure prop helpers.
+ *
+ * `useSvelteFlow()` only works inside a CHILD of <SvelteFlow>, so a consumer
+ * holding `bind:this` on <GraphCanvas> can't reach it. GraphCanvas mounts a
+ * tiny internal child (GraphApiBridge) that calls the hook and hands the
+ * helpers up; `createGraphCanvasApi` wraps them so every method is a safe
+ * no-op until the flow has initialised.
+ *
+ * Kept free of Svelte/xyflow runtime imports so it is unit-testable in node.
+ */
+export const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
+/**
+ * Build a GraphCanvasApi over a lazily-resolved helper set. Before the bridge
+ * reports in, methods resolve `false` / return identity values instead of
+ * throwing.
+ */
+export function createGraphCanvasApi(getHelpers) {
+    return {
+        fitView: (options) => getHelpers()?.fitView(options) ?? Promise.resolve(false),
+        zoomTo: (zoom, options) => getHelpers()?.zoomTo(zoom, options) ?? Promise.resolve(false),
+        getZoom: () => getHelpers()?.getZoom() ?? DEFAULT_VIEWPORT.zoom,
+        setCenter: (x, y, options) => getHelpers()?.setCenter(x, y, options) ?? Promise.resolve(false),
+        screenToFlowPosition: (p) => getHelpers()?.screenToFlowPosition(p) ?? { x: p.x, y: p.y },
+        getViewport: () => getHelpers()?.getViewport() ?? { ...DEFAULT_VIEWPORT },
+    };
+}
+export function viewportsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.x === b.x && a.y === b.y && a.zoom === b.zoom;
+}
+/** `minimap` prop → MiniMap props, or null when hidden. */
+export function resolveMinimapProps(minimap) {
+    if (!minimap)
+        return null;
+    return minimap === true ? {} : minimap;
+}
+export const DEFAULT_BACKGROUND = { gap: 16, size: 1 };
+/** `background` prop → Background props, or null when disabled. */
+export function resolveBackgroundProps(background) {
+    if (background === false)
+        return null;
+    return { ...DEFAULT_BACKGROUND, ...(background ?? {}) };
+}
+/**
+ * Merge consumer nodeTypes OVER the built-ins. Callers must memoise the
+ * result — xyflow re-mounts every node when the nodeTypes identity changes.
+ */
+export function mergeNodeTypes(builtins, custom) {
+    return custom ? { ...builtins, ...custom } : builtins;
+}
+/**
+ * Viewport for zooming to `zoom` while keeping the point at the centre of a
+ * `width`×`height` pane fixed (xyflow 1.x has no zoomTo helper; setViewport
+ * alone would zoom around the top-left corner).
+ */
+export function zoomViewportAround(current, zoom, width, height) {
+    const cx = width / 2;
+    const cy = height / 2;
+    const fx = (cx - current.x) / current.zoom;
+    const fy = (cy - current.y) / current.zoom;
+    return { x: cx - fx * zoom, y: cy - fy * zoom, zoom };
+}

package/dist/components/graph/index.d.ts

@@ -2,3 +2,5 @@ export { default as GraphCanvas } from './GraphCanvas.svelte';
 export { default as JatuiNode } from './JatuiNode.svelte';
 export { getStatusColor, applyXyflowTheme, watchAndApplyTheme } from './theme';
 export type { NodeStatus } from './theme';
+export { createGraphCanvasApi, DEFAULT_VIEWPORT, DEFAULT_BACKGROUND } from './api';
+export type { GraphCanvasApi } from './api';

package/dist/components/graph/index.js

@@ -2,3 +2,4 @@
 export { default as GraphCanvas } from './GraphCanvas.svelte';
 export { default as JatuiNode } from './JatuiNode.svelte';
 export { getStatusColor, applyXyflowTheme, watchAndApplyTheme } from './theme';
+export { createGraphCanvasApi, DEFAULT_VIEWPORT, DEFAULT_BACKGROUND } from './api';

package/dist/components/graph/theme.js

@@ -32,6 +32,13 @@ const THEME_MAP = [
     // Selection box
     ['--xy-selection-background-color', 'color-mix(in oklch, var(--color-primary, #6366f1) 10%, transparent)'],
     ['--xy-selection-border', '1px dotted color-mix(in oklch, var(--color-primary, #6366f1) 50%, transparent)'],
+    // Controls (zoom buttons) — otherwise stay light-on-dark in dark themes
+    ['--xy-controls-button-background-color', 'var(--color-base-100, #fefefe)'],
+    ['--xy-controls-button-background-color-hover', 'var(--color-base-200, #f4f4f4)'],
+    ['--xy-controls-button-color', 'var(--color-base-content, inherit)'],
+    ['--xy-controls-button-color-hover', 'var(--color-base-content, inherit)'],
+    ['--xy-controls-button-border-color', 'var(--color-base-300, #eee)'],
+    ['--xy-controls-box-shadow', 'none'],
     // Attribution
     ['--xy-attribution-background-color', 'color-mix(in oklch, var(--color-base-100, #fff) 80%, transparent)'],
 ];
@@ -112,6 +119,12 @@ function resolveThemeValue(prop) {
         '--xy-minimap-node-background-color': () => getDaisyUIColor('base-200'),
         '--xy-selection-background-color': () => `color-mix(in oklch, ${getDaisyUIColor('primary')} 10%, transparent)`,
         '--xy-selection-border': () => `1px dotted color-mix(in oklch, ${getDaisyUIColor('primary')} 50%, transparent)`,
+        '--xy-controls-button-background-color': () => getDaisyUIColor('base-100'),
+        '--xy-controls-button-background-color-hover': () => getDaisyUIColor('base-200'),
+        '--xy-controls-button-color': () => getDaisyUIColor('base-content'),
+        '--xy-controls-button-color-hover': () => getDaisyUIColor('base-content'),
+        '--xy-controls-button-border-color': () => getDaisyUIColor('base-300'),
+        '--xy-controls-box-shadow': () => 'none',
         '--xy-attribution-background-color': () => `color-mix(in oklch, ${getDaisyUIColor('base-100')} 80%, transparent)`,
     };
     return propToColor[prop]?.() ?? '';

package/dist/components/messaging/MessageItem.svelte

@@ -16,6 +16,7 @@
     AttachmentCallbacks,
   } from '../../types/messaging'
   import { renderMentionsAsHTML, extractPlainText } from '../../utils/mentionParser'
+  import { longpress } from '../../actions/longpress'
   import Avatar from './Avatar.svelte'
   import QuotedMessageDisplay from './QuotedMessageDisplay.svelte'
   import MessageAttachment from './MessageAttachment.svelte'
@@ -49,6 +50,8 @@
     swipeActions?: boolean
     /** Snippet rendered in the revealed action zone (right side, behind the item). */
     swipeContent?: Snippet
+    /** Long-press (touch) / right-click (mouse) affordance — e.g. open a context sheet. Fires with the message id and gesture coordinates. */
+    onlongpress?: (detail: { messageId: string; x: number; y: number; source: 'touch' | 'mouse' }) => void
   }
 
   let {
@@ -72,6 +75,7 @@
     onreactionchange,
     swipeActions = false,
     swipeContent,
+    onlongpress,
   }: Props = $props()
 
   let isEditing = $state(false)
@@ -276,6 +280,7 @@
   class:pt-2={!isConsecutive}
   data-message-id={message.id}
   onclick={handleMessageClick}
+  use:longpress={{ enabled: !!onlongpress, onLongPress: (d) => onlongpress?.({ messageId: message.id, x: d.x, y: d.y, source: d.source }) }}
   role="button"
   tabindex="0"
   onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleMessageClick(e as any) } }}

package/dist/components/messaging/MessageItem.svelte.d.ts

@@ -40,6 +40,13 @@ interface Props {
     swipeActions?: boolean;
     /** Snippet rendered in the revealed action zone (right side, behind the item). */
     swipeContent?: Snippet;
+    /** Long-press (touch) / right-click (mouse) affordance — e.g. open a context sheet. Fires with the message id and gesture coordinates. */
+    onlongpress?: (detail: {
+        messageId: string;
+        x: number;
+        y: number;
+        source: 'touch' | 'mouse';
+    }) => void;
 }
 declare const MessageItem: import("svelte").Component<Props, {}, "">;
 type MessageItem = ReturnType<typeof MessageItem>;