@pixerate/editor-svelte 0.15.2 → 0.16.0

package/src/canvas/index.ts

@@ -1,126 +0,0 @@
-// Types
-export * from './types.js';
-
-// Graph management rune & pure functions
-export {
-	createCanvasGraph,
-	calculateGraphDifferences,
-	replaceNodeInGraph,
-	type CreateCanvasGraphOptions
-} from './createCanvasGraph.svelte.js';
-
-// Layout calculations
-export {
-	getLayoutedNodes,
-	getCenteredNodePosition,
-	centerNodes,
-	ensureLayout,
-	placeBeside,
-	estimateNodeSize,
-	flowSide
-} from './createCanvasLayout.js';
-
-// Clipboard rune & helpers
-export {
-	createCanvasClipboard,
-	isEventFromTextInput,
-	isValidCanvasNode,
-	isValidUrl,
-	type CreateCanvasClipboardOptions
-} from './createCanvasClipboard.svelte.js';
-
-// Docking & drag interactions rune
-export {
-	createCanvasDocking,
-	type CreateCanvasDockingOptions,
-	type DockStrategy
-} from './createCanvasDocking.svelte.js';
-
-// Shortcuts manager
-export {
-	createCanvasShortcuts
-} from './createCanvasShortcuts.js';
-
-// Interaction modes & presets
-export {
-	createCanvasInteractions,
-	defaultSvelteFlowPreset,
-	miroCompatiblePreset,
-	restorePanelPointerEvents,
-	type CreateCanvasInteractionsOptions
-} from './createCanvasInteractions.svelte.js';
-
-// Trajectory calculation & multi-node transitions
-export {
-	linearTrajectory,
-	linearPositionTrajectory,
-	createFanOutTrajectory,
-	createBezierTrajectory,
-	runMultiNodeTransition
-} from './createCanvasTrajectory.js';
-
-// Spatial layout displacement
-export {
-	computeNodesBoundingBox,
-	calculateDirectionalDisplacement,
-	calculateReflowDisplacement
-} from './createCanvasDisplacement.js';
-
-// Node explosion & collapse rune
-export {
-	createCanvasExplosion,
-	type CanvasGraphTarget,
-	type CreateCanvasExplosionOptions
-} from './createCanvasExplosion.svelte.js';
-
-// Node synchronization & handle normalization
-export {
-	createCanvasNodeSync,
-	preserveNodeMeasurements,
-	normalizeNodeHandles,
-	type HandleConfig,
-	type NodeMeasurement,
-	type CreateCanvasNodeSyncOptions
-} from './createCanvasNodeSync.svelte.js';
-
-// Multi-node drag coordination rune
-export {
-	createCanvasMultiDrag,
-	type MultiDragState,
-	type MultiDragFollowerOffset,
-	type CreateCanvasMultiDragOptions,
-	type FollowerTransform
-} from './createCanvasMultiDrag.svelte.js';
-
-// Drag selection helpers & presets
-export {
-	getMarqueeSelectionPreset,
-	handleDeselectOnEscape,
-	type CanvasSelectionOptions
-} from './createCanvasSelection.svelte.js';
-
-// Viewport floating scrollbar component
-export { default as FloatingHorizontalScrollbar } from './FloatingHorizontalScrollbar.svelte';
-
-// Agent presence visual layer
-export { default as AgentPresenceLayer } from './AgentPresenceLayer.svelte';
-
-// Streaming canvas rune
-export {
-	createStreamingCanvas,
-	type CreateStreamingCanvasOptions
-} from './createStreamingCanvas.svelte.js';
-
-// Clock and view helpers from core
-export {
-	realClock,
-	ManualClock,
-	layoutBounds,
-	canvasHeight,
-	estimateCanvasHeight,
-	blendLayout,
-	connectedOnly,
-	type Clock,
-	type CanvasHeightOptions
-} from '@pixerate/editor/canvas';
-

package/src/canvas/types.ts

@@ -1,223 +0,0 @@
-import type { Node, Edge, XYPosition, Rect, ColorMode, Position } from '@xyflow/svelte';
-
-/**
- * Generic node interface representing an element on the canvas.
- */
-export type CanvasNode<
-	TData extends Record<string, any> = Record<string, any>,
-	TType extends string | undefined = string | undefined
-> = Node<TData, TType>;
-
-/**
- * Generic edge interface representing a connection on the canvas.
- */
-export type CanvasEdge<
-	TData extends Record<string, any> = Record<string, any>,
-	TType extends string | undefined = string | undefined
-> = Edge<TData, TType>;
-
-/**
- * Differences computed between two graph states.
- */
-export interface GraphDifferences<
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
-> {
-	changedNodes: TNode[];
-	changedEdges: TEdge[];
-	removedNodes: TNode[];
-	removedEdges: TEdge[];
-}
-
-/**
- * Standard serialized clipboard payload for nodes and optional edges.
- */
-export interface CanvasClipboardPayload<
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
-> {
-	version?: number;
-	nodes: TNode[];
-	edges?: TEdge[];
-}
-
-/**
- * Options for Dagre graph layout.
- */
-export interface CanvasLayoutOptions {
-	direction?: 'LR' | 'TB' | 'RL' | 'BT';
-	ranksep?: number;
-	nodesep?: number;
-	defaultNodeWidth?: number;
-	defaultNodeHeight?: number;
-}
-
-/**
- * Options for keyboard shortcuts.
- */
-export interface CanvasShortcutsOptions<TNode extends CanvasNode = CanvasNode> {
-	targetElement?: HTMLElement | Window;
-	onCopy?: () => void;
-	onCut?: () => void;
-	onPaste?: (event: ClipboardEvent) => void;
-	onDelete?: (selectedNodes: TNode[]) => void;
-	onDuplicate?: (selectedNodes: TNode[]) => void;
-	onSelectAll?: () => void;
-	onGroup?: (selectedNodes: TNode[]) => void;
-	onUngroup?: (selectedNodes: TNode[]) => void;
-	onZoomIn?: () => void;
-	onZoomOut?: () => void;
-	onFitView?: () => void;
-	onSearch?: () => void;
-	getSelectedNodes?: () => TNode[];
-}
-
-/**
- * Strategy used to resolve the primary dock target when multiple targets intersect a dragged node.
- * - 'center-point': Chooses the target enclosing or closest to the center coordinate of the dragged node.
- * - 'max-overlap': Chooses the target with the largest bounding box intersection area.
- * - 'pointer': Chooses the target enclosing or closest to the mouse/touch cursor coordinates (falls back to 'center-point').
- * - 'first': Chooses the first intersecting target (legacy behavior).
- */
-export type DockStrategy = 'center-point' | 'max-overlap' | 'pointer' | 'first';
-
-/**
- * Docking and intersection callbacks.
- */
-export interface CanvasDockingCallbacks<TNode extends CanvasNode = CanvasNode> {
-	onDockHover?: (dockTarget: TNode, draggedNode: TNode) => void;
-	onDockLeave?: (dockTarget: TNode, draggedNode: TNode) => void;
-	onDockDrop?: (dockTarget: TNode, draggedNode: TNode) => void;
-}
-
-/**
- * Configuration options for SvelteFlow presets.
- */
-export interface CanvasInteractionPresetConfig {
-	snapGrid?: [number, number];
-	panOnDrag?: number[] | boolean;
-	panOnScroll?: boolean;
-	selectionOnDrag?: boolean;
-	colorMode?: ColorMode;
-	multiSelectionKey?: string[];
-	minZoom?: number;
-	maxZoom?: number;
-	selectionMode?: 'partial' | 'full';
-}
-
-/**
- * Parametric point returned by a trajectory evaluation.
- */
-export interface TrajectoryPoint {
-	position: XYPosition;
-	scale?: number;
-	opacity?: number;
-}
-
-/**
- * Trajectory evaluation function determining path, scale, and opacity over time t in [0, 1].
- */
-export type TrajectoryFunction = (
-	origin: XYPosition,
-	target: XYPosition,
-	progress: number,
-	index: number,
-	total: number
-) => TrajectoryPoint;
-
-/**
- * Options for fan-out trajectory generator.
- */
-export interface FanOutTrajectoryOptions {
-	curvature?: number;
-	spreadAngle?: number;
-	startScale?: number;
-	endScale?: number;
-	startOpacity?: number;
-	endOpacity?: number;
-}
-
-/**
- * Single node animation transition definition.
- */
-export interface NodeTransition<TNode extends CanvasNode = CanvasNode> {
-	node: TNode;
-	from: XYPosition;
-	to: XYPosition;
-	trajectory?: TrajectoryFunction;
-	delay?: number;
-	duration?: number;
-	easing?: (t: number) => number;
-	index?: number;
-	total?: number;
-}
-
-/**
- * Displacement axis / direction.
- */
-export type DisplacementDirection = 'right' | 'left' | 'down' | 'up' | 'vertical';
-
-/**
- * Options for directional displacement calculation.
- */
-export interface DirectionalDisplacementOptions {
-	direction?: DisplacementDirection;
-	gap?: number;
-	spreadSiblingLanes?: boolean;
-	siblingTolerance?: number;
-	minY?: number;
-}
-
-/**
- * Options for Dagre reflow displacement calculation.
- */
-export interface ReflowDisplacementOptions extends CanvasLayoutOptions {
-	anchorNodeId: string;
-}
-
-/**
- * Snapshot of canvas graph state prior to node explosion, enabling exact reversibility.
- */
-export interface ExplosionSnapshot<
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
-> {
-	parentId: string;
-	childNodeIds: string[];
-	childEdgeIds: string[];
-	displacedNodes: { id: string; originalPosition: XYPosition }[];
-	timestamp: number;
-}
-
-/**
- * Options for exploding a node.
- */
-export interface ExplodeNodeOptions<
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
-> {
-	childNodes: TNode[];
-	childEdges?: TEdge[];
-	connectParentToChildren?: boolean | 'first' | 'all';
-	connectChildrenToDownstream?: boolean;
-	displacementStrategy?: 'directional' | 'dagre' | 'none';
-	directionalOptions?: DirectionalDisplacementOptions;
-	reflowOptions?: Partial<ReflowDisplacementOptions>;
-	trajectory?: TrajectoryFunction;
-	duration?: number;
-	staggerDelay?: number;
-	easing?: (t: number) => number;
-	onComplete?: () => void;
-}
-
-/**
- * Options for collapsing an exploded node.
- */
-export interface CollapseNodeOptions {
-	duration?: number;
-	staggerDelay?: number;
-	easing?: (t: number) => number;
-	trajectory?: TrajectoryFunction;
-	onComplete?: () => void;
-}
-

package/src/createNavigationGuard.svelte.ts

@@ -1,97 +0,0 @@
-export interface CreateNavigationGuardOptions {
-  /** Function or boolean returning whether there are unsaved changes */
-  isDirty: boolean | (() => boolean);
-  /** Whether guarding is enabled (defaults to true) */
-  enabled?: boolean | (() => boolean);
-  /** Optional custom navigation callback (e.g. SvelteKit goto) */
-  onNavigate?: (url: string) => void;
-  /** Optional callback fired when an internal navigation is intercepted */
-  onBlocked?: (url: string) => void;
-}
-
-export interface NavigationGuardManager {
-  readonly showConfirm: boolean;
-  setShowConfirm(show: boolean): void;
-  readonly pendingUrl: string | null;
-  intercept(url: string): boolean;
-  confirmLeave(): void;
-  cancelLeave(): void;
-  destroy(): void;
-}
-
-/**
- * Headless Svelte 5 rune managing navigation guard state and beforeunload interception.
- */
-export function createNavigationGuard(
-  options: CreateNavigationGuardOptions,
-): NavigationGuardManager {
-  let showConfirm = $state(false);
-  let pendingUrl = $state<string | null>(null);
-
-  const getIsDirty = () =>
-    typeof options.isDirty === "function" ? options.isDirty() : options.isDirty;
-
-  const getEnabled = () =>
-    typeof options.enabled === "function"
-      ? options.enabled()
-      : (options.enabled ?? true);
-
-  function handleBeforeUnload(e: BeforeUnloadEvent) {
-    if (!getEnabled() || !getIsDirty()) return;
-    e.preventDefault();
-    e.returnValue = "";
-  }
-
-  if (typeof window !== "undefined") {
-    window.addEventListener("beforeunload", handleBeforeUnload);
-  }
-
-  function intercept(url: string): boolean {
-    if (getEnabled() && getIsDirty()) {
-      pendingUrl = url;
-      showConfirm = true;
-      options.onBlocked?.(url);
-      return true;
-    }
-    return false;
-  }
-
-  function confirmLeave() {
-    showConfirm = false;
-    const target = pendingUrl;
-    if (target) {
-      if (options.onNavigate) {
-        options.onNavigate(target);
-      } else if (typeof window !== "undefined") {
-        window.location.href = target;
-      }
-    }
-  }
-
-  function cancelLeave() {
-    showConfirm = false;
-    pendingUrl = null;
-  }
-
-  function destroy() {
-    if (typeof window !== "undefined") {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    }
-  }
-
-  return {
-    get showConfirm() {
-      return showConfirm;
-    },
-    setShowConfirm(val: boolean) {
-      showConfirm = val;
-    },
-    get pendingUrl() {
-      return pendingUrl;
-    },
-    intercept,
-    confirmLeave,
-    cancelLeave,
-    destroy,
-  };
-}

package/src/editor.svelte.ts

@@ -1,65 +0,0 @@
-import { Editor, type Content, type EditorOptions, type Extensions } from "@tiptap/core";
-import { createRichTextPreset, type RichTextPresetOptions } from "@pixerate/editor";
-
-export interface SvelteInitiateEditorOptions extends Partial<EditorOptions> {
-  richTextOptions?: RichTextPresetOptions;
-}
-
-/**
- * Initializes a TipTap editor instance preconfigured with rich text extensions.
- */
-export const initiateEditor = (
-  element?: HTMLElement,
-  content?: Content,
-  extensions?: Extensions,
-  options?: SvelteInitiateEditorOptions,
-): Editor => {
-  const { richTextOptions, ...editorOptions } = options || {};
-  const defaultPreset = createRichTextPreset(richTextOptions);
-
-  const editor = new Editor({
-    element,
-    content,
-    extensions: [
-      ...defaultPreset,
-      ...(extensions ?? []),
-    ],
-    autofocus: false,
-    ...editorOptions,
-  });
-
-  return editor;
-};
-
-export interface ReactiveEditorState {
-  editor: Editor | undefined;
-  content: string;
-  isEditable: boolean;
-}
-
-/**
- * Creates a reactive editor state manager for Svelte 5.
- */
-export function createReactiveEditor(
-  initialContent: string = "",
-  extensions: Extensions = [],
-  options: Partial<EditorOptions> = {},
-) {
-  let editorInstance: Editor | undefined;
-
-  return {
-    get current() {
-      return editorInstance;
-    },
-    mount(element: HTMLElement) {
-      editorInstance = initiateEditor(element, initialContent, extensions, options);
-      return editorInstance;
-    },
-    destroy() {
-      if (editorInstance) {
-        editorInstance.destroy();
-        editorInstance = undefined;
-      }
-    },
-  };
-}

package/src/history/createHistoryShortcuts.ts

@@ -1,95 +0,0 @@
-import { HistoryManager } from "@pixerate/editor";
-
-export interface HistoryShortcutsOptions {
-  /**
-   * Whether keyboard shortcuts are enabled. Defaults to true.
-   */
-  enabled?: boolean;
-  /**
-   * Target element or window to listen on. Defaults to window.
-   */
-  target?: Window | HTMLElement | null;
-  /**
-   * When true (default), shortcuts will not trigger if an <input>, <textarea>,
-   * or [contenteditable] element is currently active / focused.
-   */
-  ignoreEditableElements?: boolean;
-}
-
-/**
- * Attaches keyboard listeners for Undo (Mod+Z) and Redo (Mod+Shift+Z / Mod+Y).
- * Returns an object with a `destroy()` function for lifecycle cleanup.
- */
-export function createHistoryShortcuts(
-  manager: HistoryManager,
-  options: HistoryShortcutsOptions = {},
-): { destroy: () => void } {
-  const {
-    enabled = true,
-    target,
-    ignoreEditableElements = true,
-  } = options;
-
-  if (!enabled) {
-    return { destroy: () => {} };
-  }
-
-  const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
-  if (!eventTarget) {
-    return { destroy: () => {} };
-  }
-
-  const handleKeyDown = (event: Event) => {
-    const e = event as KeyboardEvent;
-    const isMac =
-      typeof navigator !== "undefined" &&
-      /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-    const modifier = isMac ? e.metaKey : e.ctrlKey;
-
-    if (!modifier) return;
-
-    if (ignoreEditableElements && typeof document !== "undefined") {
-      const targetEl = (e.target || document.activeElement) as HTMLElement | null;
-      if (targetEl && targetEl.tagName) {
-        const tagName = targetEl.tagName.toLowerCase();
-        const isInput = tagName === "input" || tagName === "textarea";
-        const isContentEditable =
-          targetEl.isContentEditable ||
-          targetEl.getAttribute?.("contenteditable") === "true";
-        if (isInput || isContentEditable) {
-          return;
-        }
-      }
-    }
-
-    const key = e.key?.toLowerCase();
-
-    // Undo: Mod+Z (without Shift)
-    if (key === "z" && !e.shiftKey) {
-      if (manager.getState().canUndo) {
-        e.preventDefault();
-        manager.undo();
-      }
-      return;
-    }
-
-    // Redo: Mod+Shift+Z or (on non-Mac) Mod+Y
-    const isRedoKey =
-      (key === "z" && e.shiftKey) || (!isMac && key === "y" && !e.shiftKey);
-
-    if (isRedoKey) {
-      if (manager.getState().canRedo) {
-        e.preventDefault();
-        manager.redo();
-      }
-    }
-  };
-
-  eventTarget.addEventListener("keydown", handleKeyDown);
-
-  return {
-    destroy: () => {
-      eventTarget.removeEventListener("keydown", handleKeyDown);
-    },
-  };
-}

package/src/history/history.svelte.ts

@@ -1,68 +0,0 @@
-import {
-  HistoryManager,
-  HistoryState,
-  Command,
-  createHistoryManager,
-  HistoryManagerOptions,
-} from "@pixerate/editor";
-
-export interface SvelteHistory extends HistoryState {
-  readonly manager: HistoryManager;
-  undo(): boolean;
-  redo(): boolean;
-  clear(): void;
-  execute(command: Command): void;
-  executeMerged(command: Command, options?: { windowMs?: number }): void;
-  batch(name: string, fn: () => void): void;
-  subscribe(run: (value: HistoryState) => void): () => void;
-}
-
-/**
- * Creates a reactive Svelte 5 rune-based and Svelte store-compatible history adapter.
- */
-export function createHistory(
-  managerOrOptions?: HistoryManager | HistoryManagerOptions,
-): SvelteHistory {
-  const manager =
-    managerOrOptions instanceof HistoryManager
-      ? managerOrOptions
-      : createHistoryManager(managerOrOptions);
-
-  let state = $state<HistoryState>(manager.getState());
-
-  manager.subscribe((newState) => {
-    state = newState;
-  });
-
-  return {
-    get canUndo() {
-      return state.canUndo;
-    },
-    get canRedo() {
-      return state.canRedo;
-    },
-    get undoName() {
-      return state.undoName;
-    },
-    get redoName() {
-      return state.redoName;
-    },
-    get undoCount() {
-      return state.undoCount;
-    },
-    get redoCount() {
-      return state.redoCount;
-    },
-    get manager() {
-      return manager;
-    },
-    undo: () => manager.undo(),
-    redo: () => manager.redo(),
-    clear: () => manager.clear(),
-    execute: (cmd: Command) => manager.execute(cmd),
-    executeMerged: (cmd: Command, opts?: { windowMs?: number }) =>
-      manager.executeMerged(cmd, opts),
-    batch: (name: string, fn: () => void) => manager.batch(name, fn),
-    subscribe: (run: (value: HistoryState) => void) => manager.subscribe(run),
-  };
-}

package/src/history/index.ts

@@ -1,2 +0,0 @@
-export * from "./history.svelte";
-export * from "./createHistoryShortcuts";