@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/ai/StreamingResponse/index.d.ts

@@ -7,9 +7,11 @@ export { ErrorDisplay } from './ErrorDisplay';
 export { MarkdownRenderer } from './MarkdownRenderer';
 export { AnimatedText } from './AnimatedText';
 export { StreamingCursor } from './StreamingCursor';
+export { WordAnimationProvider, useWordAnimation } from './WordAnimationContext';
 export { streamingResponseTheme } from './StreamingResponse.theme';
-export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
+export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, inlineTokenFadeIn, inlineTokenTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';
 export type { AnimatedTextProps } from './AnimatedText';
 export type { StreamingCursorProps } from './StreamingCursor';
 export type { MarkdownRendererProps } from './MarkdownRenderer';
+export type { WordAnimationProviderProps } from './WordAnimationContext';

package/dist/components/ai/TokenCounter/TokenCounter.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { tokenCounterTheme } from './TokenCounter.theme.js';
 import { MODEL_CONFIGS, estimateTokens, calculateCost, formatTokenCount, formatCost } from './tokenUtils.js';
 import { cn } from '../../../utils/cn.js';
-import { CircleStackIcon } from '@heroicons/react/16/solid';
+import { Database } from '@phosphor-icons/react';
 
 /**
  * TokenCounter - Real-time token usage display with cost estimation
@@ -54,7 +55,7 @@ const TokenCounter = React__default.forwardRef(({ text = "", tokens: providedTok
     const costStyle = customTheme.costStyle || tokenCounterTheme.costStyle;
     const progressStyle = customTheme.progressStyle || tokenCounterTheme.progressStyle;
     const progressBarStyle = customTheme.progressBarStyle || tokenCounterTheme.progressBarStyle;
-    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(CircleStackIcon, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
+    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(Database, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
 });
 TokenCounter.displayName = "TokenCounter";
 

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -4,7 +4,7 @@ const tokenCounterTheme = {
     countStyle: "font-medium text-[var(--color-text-primary)]",
     labelStyle: "text-[var(--color-text-muted)]",
     costStyle: "text-[var(--color-text-muted)] font-mono",
-    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressStyle: "h-1 bg-[var(--color-surface-sunken)] rounded-full overflow-hidden shadow-inner-real-sm",
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {

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

@@ -1,19 +1,15 @@
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
-export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
-export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
-export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
-export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
-export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestion";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestion";
 export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
-export { ApprovalCard } from "./ApprovalCard";
-export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
-export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";
+export * from "./AgentStatus";
+export * from "./Reasoning";
+export * from "./SourceCitation";

package/dist/components/ai/index.js

@@ -1,25 +1,31 @@
 export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
-export { MessageHistory } from './MessageHistory/MessageHistory.js';
-export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+import '../core/Message/MessageBody.js';
+import 'react/jsx-runtime';
+import '../../utils/cn.js';
+import 'react';
+import '../core/Link/Link.js';
+import '@phosphor-icons/react';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
-export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
-export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
-export { PromptSuggestion } from './PromptSuggestions/PromptSuggestion.js';
-export { promptSuggestionTheme } from './PromptSuggestions/PromptSuggestion.theme.js';
+export { PromptSuggestion } from './PromptSuggestion/PromptSuggestion.js';
+export { promptSuggestionTheme } from './PromptSuggestion/PromptSuggestion.theme.js';
 export { StreamingResponse } from './StreamingResponse/StreamingResponse.js';
 export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
 export { AnimatedText } from './StreamingResponse/AnimatedText.js';
 export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+import './StreamingResponse/WordAnimationContext.js';
 export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
-export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
-export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';
+export { AgentStatus } from './AgentStatus/AgentStatus.js';
+export { agentStatusTheme } from './AgentStatus/AgentStatus.theme.js';
+export { Reasoning } from './Reasoning/Reasoning.js';
+export { SourceCitation, SourceCitationGroup } from './SourceCitation/SourceCitation.js';
+export { sourceCitationTheme } from './SourceCitation/SourceCitation.theme.js';

package/dist/components/ai/shared/StatusIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type AIStatusIndicatorState = "idle" | "active" | "complete" | "pending" | "error";
+export interface AIStatusIndicatorProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+    state: AIStatusIndicatorState;
+    className?: string;
+}
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+export declare const AIStatusIndicator: React.ForwardRefExoticComponent<AIStatusIndicatorProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ai/shared/StatusIndicator.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+const AIStatusIndicator = React__default.forwardRef(({ state, className, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const instant = shouldReduceMotion ? { duration: 0 } : undefined;
+    // Unique per instance: SVG gradient ids are document-global, so a shared id
+    // would let the first-mounted indicator's def win for every spinner on the page.
+    const gradientId = `${React__default.useId()}-arc`;
+    return (jsx("svg", { ref: ref, viewBox: "0 0 16 16", fill: "none", className: cn("size-4 overflow-visible", className), "data-ai-status-indicator": state, "aria-hidden": "true", ...props, children: jsxs(AnimatePresence, { initial: false, mode: "sync", children: [state === "active" && (jsx(motion.g, { initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 1, scale: 1 }, exit: shouldReduceMotion
+                        ? { opacity: 0, transition: { duration: 0 } }
+                        : {
+                            opacity: 0,
+                            scale: 0.55,
+                            transition: { duration: 0.18, ease: "easeOut" },
+                        }, transition: {
+                        opacity: { duration: 0.16 },
+                        scale: { duration: 0.2, ease: "easeOut" },
+                    }, style: { transformBox: "view-box", transformOrigin: "8px 8px" }, children: jsxs("g", { className: "animate-spin motion-reduce:animate-none [transform-box:view-box] [transform-origin:center]", children: [jsx("defs", { children: jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "2.5", y1: "8", x2: "13.5", y2: "8", children: [jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "55%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), jsx("circle", { cx: "8", cy: "8", r: "5.5", stroke: `url(#${gradientId})`, strokeWidth: "1.75", strokeLinecap: "round", strokeDasharray: "17.3 34.6" })] }) }, "active")), state === "complete" && (jsx(motion.path, { d: "M3.5 8.25 6.65 11.2 12.6 4.9", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: shouldReduceMotion
+                        ? false
+                        : { opacity: 0, pathLength: 0, scale: 0.7, rotate: -18 }, animate: { opacity: 1, pathLength: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : {
+                        opacity: { duration: 0.12 },
+                        pathLength: { duration: 0.32, delay: 0.08, ease: "easeOut" },
+                        scale: { type: "spring", stiffness: 420, damping: 24 },
+                        rotate: { type: "spring", stiffness: 360, damping: 22 },
+                    }, style: { transformOrigin: "8px 8px" } }, "complete")), state === "pending" && (jsx(motion.circle, { cx: "8", cy: "8", r: "4.5", stroke: "currentColor", strokeWidth: "1.4", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 0.55, scale: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.2 }, style: { transformOrigin: "8px 8px" } }, "pending")), state === "error" && (jsx(motion.path, { d: "M4.5 4.5 11.5 11.5 M11.5 4.5 4.5 11.5", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", initial: shouldReduceMotion ? false : { opacity: 0, pathLength: 0 }, animate: { opacity: 1, pathLength: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.24 } }, "error")), state === "idle" && (jsx(motion.circle, { cx: "8", cy: "8", r: "2.25", fill: "currentColor", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.6 }, animate: { opacity: 0.7, scale: 1 }, exit: { opacity: 0, scale: 0.6 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.18 }, style: { transformOrigin: "8px 8px" } }, "idle"))] }) }));
+});
+AIStatusIndicator.displayName = "AIStatusIndicator";
+
+export { AIStatusIndicator };

package/dist/components/canvas/Background.d.ts

@@ -0,0 +1,19 @@
+export type BackgroundVariant = "dots" | "lines";
+export interface BackgroundProps {
+    /** `dots` (default) or a `lines` grid. */
+    variant?: BackgroundVariant;
+    /** Spacing between dots / grid lines in flow units. Defaults to `18`. */
+    gap?: number;
+    /** Dot radius (px, constant) or line stroke width. Defaults to `1`. */
+    size?: number;
+    className?: string;
+}
+/**
+ * A pannable / zoomable canvas backdrop. Lives at the pane level (behind the
+ * world) and follows the viewport via the SVG pattern origin + tile size, so the
+ * pattern tracks pan and its spacing scales with zoom. Non-interactive.
+ */
+export declare function Background({ variant, gap, size, className, }: BackgroundProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Background {
+    var displayName: string;
+}

package/dist/components/canvas/Background.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useCanvasState } from './context/CanvasContext.js';
+
+/**
+ * A pannable / zoomable canvas backdrop. Lives at the pane level (behind the
+ * world) and follows the viewport via the SVG pattern origin + tile size, so the
+ * pattern tracks pan and its spacing scales with zoom. Non-interactive.
+ */
+function Background({ variant = "dots", gap = 18, size = 1, className, }) {
+    const { viewport } = useCanvasState();
+    const id = useId();
+    const tile = gap * viewport.zoom;
+    return (jsxs("svg", { className: cn(
+        // border-secondary, not border: the hairline (93%) sits only 1% darker
+        // than the sunken pane (94%) and disappears — -secondary (87%) restores
+        // the ~7% delta the pattern had on the old white floor.
+        "absolute inset-0 w-full h-full z-0 pointer-events-none text-[var(--color-border-secondary)]", className), "aria-hidden": "true", children: [jsx("pattern", { id: id, x: viewport.x, y: viewport.y, width: tile, height: tile, patternUnits: "userSpaceOnUse", children: variant === "dots" ? (jsx("circle", { cx: tile / 2, cy: tile / 2, r: size, fill: "currentColor" })) : (jsx("path", { d: `M ${tile} 0 L 0 0 0 ${tile}`, fill: "none", stroke: "currentColor", strokeWidth: size })) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })] }));
+}
+Background.displayName = "Background";
+
+export { Background };

package/dist/components/canvas/BaseNode.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface BaseNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Reflects selection with a primary-colored border. */
+    selected?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Optional presentational shell for custom nodes — a themeable surface card so
+ * node types look consistent without re-deriving styles. Purely visual: the node
+ * wrapper rendered by `NodeRenderer` owns positioning, focus, drag, and selection.
+ *
+ * Put interactive controls inside and mark them `.nodrag` (or use a native
+ * `<button>`/`<input>`) to keep them clickable without starting a drag.
+ */
+export declare const BaseNode: React.ForwardRefExoticComponent<BaseNodeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/canvas/BaseNode.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Optional presentational shell for custom nodes — a themeable surface card so
+ * node types look consistent without re-deriving styles. Purely visual: the node
+ * wrapper rendered by `NodeRenderer` owns positioning, focus, drag, and selection.
+ *
+ * Put interactive controls inside and mark them `.nodrag` (or use a native
+ * `<button>`/`<input>`) to keep them clickable without starting a drag.
+ */
+const BaseNode = React__default.forwardRef(function BaseNode({ selected, className, children, ...rest }, ref) {
+    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-300", selected
+            ? "border-[var(--color-surface)] ring-4 ring-[var(--color-primary)]"
+            : "border-[var(--color-border)] group-hover:border-[var(--color-border-hover)] group-hover:shadow-real-md", className), ...rest, children: children }));
+});
+BaseNode.displayName = "BaseNode";
+
+export { BaseNode };

package/dist/components/canvas/CanvasToolbar.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+declare const POSITIONS: {
+    readonly bottom: "bottom-6 left-1/2 -translate-x-1/2";
+    readonly top: "top-6 left-1/2 -translate-x-1/2";
+};
+/** A node type that can be added from the toolbar palette. */
+export interface CanvasToolbarNodeOption {
+    type: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface CanvasToolbarProps {
+    /** Node types addable from the palette (consumer adds them via `onAddNode`). */
+    nodeOptions?: CanvasToolbarNodeOption[];
+    onAddNode?: (type: string) => void;
+    /** Show the Select / Hand (pan) tool toggle. Defaults to `true`. */
+    showTools?: boolean;
+    position?: keyof typeof POSITIONS;
+    className?: string;
+    /** Custom app actions rendered at the end (e.g. Run, Undo/Redo). */
+    children?: React.ReactNode;
+}
+/**
+ * A floating, bottom-center canvas toolbar (FigJam/tldraw style). Built-in **Select /
+ * Hand** tool toggle (drives the engine `tool` mode) and a single **"+ Add node"**
+ * trigger opening a Dropdown menu of `nodeOptions`; a `children` slot holds
+ * app-specific actions. Marked `data-flikkui-nopan` so the pane never pans or steals
+ * clicks from it (the Dropdown menu portals with `data-flikkui-portal`, same rule).
+ */
+export declare function CanvasToolbar({ nodeOptions, onAddNode, showTools, position, className, children, }: CanvasToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CanvasToolbar {
+    var displayName: string;
+}
+export {};

package/dist/components/canvas/CanvasToolbar.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CursorClick, Hand, Plus } from '@phosphor-icons/react';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../core/Button/Button.js';
+import 'react';
+import { Dropdown } from '../core/Dropdown/Dropdown.js';
+import '../core/Dropdown/DropdownTrigger.js';
+import '../core/Dropdown/DropdownMenu.js';
+import '../core/Dropdown/DropdownItem.js';
+import '../core/Dropdown/DropdownSection.js';
+import '../core/Dropdown/DropdownSeparator.js';
+import '../core/Dropdown/Dropdown.theme.js';
+import { useCanvasApi } from './context/CanvasContext.js';
+
+const POSITIONS = {
+    bottom: "bottom-6 left-1/2 -translate-x-1/2",
+    top: "top-6 left-1/2 -translate-x-1/2",
+};
+const Divider = () => (jsx("span", { className: "mx-0.5 h-6 w-px bg-[var(--color-border)]", "aria-hidden": "true" }));
+/**
+ * A floating, bottom-center canvas toolbar (FigJam/tldraw style). Built-in **Select /
+ * Hand** tool toggle (drives the engine `tool` mode) and a single **"+ Add node"**
+ * trigger opening a Dropdown menu of `nodeOptions`; a `children` slot holds
+ * app-specific actions. Marked `data-flikkui-nopan` so the pane never pans or steals
+ * clicks from it (the Dropdown menu portals with `data-flikkui-portal`, same rule).
+ */
+function CanvasToolbar({ nodeOptions, onAddNode, showTools = true, position = "bottom", className, children, }) {
+    const { tool, setTool } = useCanvasApi();
+    const hasNodes = !!(nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.length);
+    return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorClick, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(Hand, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "mono", size: "sm", className: "rounded-full gap-1.5", children: [jsx(Plus, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
+}
+CanvasToolbar.displayName = "CanvasToolbar";
+
+export { CanvasToolbar };

package/dist/components/canvas/Edge.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { EdgeType, HandlePosition, XYPosition } from "./NodeCanvas.types";
+/** Cubic-bezier path curving out from each handle's side. */
+export declare function buildBezierPath(source: XYPosition, sourceSide: HandlePosition, target: XYPosition, targetSide: HandlePosition): string;
+/** Build an orthogonal path, optionally rounding the corners (smoothstep). */
+export declare function buildStepPath(source: XYPosition, sourceSide: HandlePosition, target: XYPosition, rounded: boolean, radius?: number): string;
+/** The on-curve midpoint of an edge (for placing the × delete button). */
+export declare function edgeMidpoint(type: EdgeType, source: XYPosition, sourceSide: HandlePosition, target: XYPosition, targetSide: HandlePosition): XYPosition;
+/** Dispatch to the routing builder for the given edge type. */
+export declare function buildEdgePath(type: EdgeType, source: XYPosition, sourceSide: HandlePosition, target: XYPosition, targetSide: HandlePosition): string;
+export interface EdgeRenderProps {
+    id?: string;
+    type?: EdgeType;
+    source: XYPosition;
+    sourcePosition: HandlePosition;
+    target: XYPosition;
+    targetPosition: HandlePosition;
+    selected?: boolean;
+    /** Stroke color override (any CSS color). Selection still strokes `--color-primary`. */
+    color?: string;
+    /** Render dashed (used for the in-progress connection ghost). */
+    dashed?: boolean;
+    /** When provided, the edge is interactive (a wide transparent hit-path is rendered). */
+    onPointerDown?: (e: React.PointerEvent) => void;
+}
+/**
+ * A single edge (bezier / step / smoothstep). Uses `vectorEffect="non-scaling-stroke"`
+ * so the line keeps a constant on-screen width at any zoom. When `onPointerDown` is
+ * set, a wide transparent hit-path makes it easy to click, and the visible stroke
+ * emphasizes on hover (via the group) and when selected.
+ */
+export declare const Edge: React.NamedExoticComponent<EdgeRenderProps>;

package/dist/components/canvas/Edge.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../utils/cn.js';
+
+function controlPoint(p, side, dist) {
+    switch (side) {
+        case "left":
+            return { x: p.x - dist, y: p.y };
+        case "right":
+            return { x: p.x + dist, y: p.y };
+        case "top":
+            return { x: p.x, y: p.y - dist };
+        case "bottom":
+            return { x: p.x, y: p.y + dist };
+    }
+}
+/** Cubic-bezier path curving out from each handle's side. */
+function buildBezierPath(source, sourceSide, target, targetSide) {
+    const dist = Math.max(Math.hypot(target.x - source.x, target.y - source.y) * 0.4, 30);
+    const c1 = controlPoint(source, sourceSide, dist);
+    const c2 = controlPoint(target, targetSide, dist);
+    return `M ${source.x},${source.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${target.x},${target.y}`;
+}
+/** Orthogonal waypoints routed through a mid-line based on the source handle axis. */
+function stepWaypoints(source, sourceSide, target) {
+    const horizontal = sourceSide === "left" || sourceSide === "right";
+    if (horizontal) {
+        const mx = (source.x + target.x) / 2;
+        return [source, { x: mx, y: source.y }, { x: mx, y: target.y }, target];
+    }
+    const my = (source.y + target.y) / 2;
+    return [source, { x: source.x, y: my }, { x: target.x, y: my }, target];
+}
+/** Build an orthogonal path, optionally rounding the corners (smoothstep). */
+function buildStepPath(source, sourceSide, target, rounded, radius = 8) {
+    const pts = stepWaypoints(source, sourceSide, target);
+    if (!rounded) {
+        return (`M ${pts[0].x},${pts[0].y} ` +
+            pts.slice(1).map((p) => `L ${p.x},${p.y}`).join(" "));
+    }
+    let d = `M ${pts[0].x},${pts[0].y}`;
+    for (let i = 1; i < pts.length - 1; i++) {
+        const p0 = pts[i - 1];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const len1 = Math.hypot(p1.x - p0.x, p1.y - p0.y) || 1;
+        const len2 = Math.hypot(p2.x - p1.x, p2.y - p1.y) || 1;
+        const r = Math.min(radius, len1 / 2, len2 / 2);
+        const a = { x: p1.x - ((p1.x - p0.x) / len1) * r, y: p1.y - ((p1.y - p0.y) / len1) * r };
+        const b = { x: p1.x + ((p2.x - p1.x) / len2) * r, y: p1.y + ((p2.y - p1.y) / len2) * r };
+        d += ` L ${a.x},${a.y} Q ${p1.x},${p1.y} ${b.x},${b.y}`;
+    }
+    const last = pts[pts.length - 1];
+    d += ` L ${last.x},${last.y}`;
+    return d;
+}
+/** The on-curve midpoint of an edge (for placing the × delete button). */
+function edgeMidpoint(type, source, sourceSide, target, targetSide) {
+    if (type === "step" || type === "smoothstep") {
+        const pts = stepWaypoints(source, sourceSide, target);
+        return { x: (pts[1].x + pts[2].x) / 2, y: (pts[1].y + pts[2].y) / 2 };
+    }
+    // Cubic bezier evaluated at t = 0.5.
+    const dist = Math.max(Math.hypot(target.x - source.x, target.y - source.y) * 0.4, 30);
+    const c1 = controlPoint(source, sourceSide, dist);
+    const c2 = controlPoint(target, targetSide, dist);
+    return {
+        x: 0.125 * source.x + 0.375 * c1.x + 0.375 * c2.x + 0.125 * target.x,
+        y: 0.125 * source.y + 0.375 * c1.y + 0.375 * c2.y + 0.125 * target.y,
+    };
+}
+/** Dispatch to the routing builder for the given edge type. */
+function buildEdgePath(type, source, sourceSide, target, targetSide) {
+    if (type === "step")
+        return buildStepPath(source, sourceSide, target, false);
+    if (type === "smoothstep")
+        return buildStepPath(source, sourceSide, target, true);
+    return buildBezierPath(source, sourceSide, target, targetSide);
+}
+/**
+ * A single edge (bezier / step / smoothstep). Uses `vectorEffect="non-scaling-stroke"`
+ * so the line keeps a constant on-screen width at any zoom. When `onPointerDown` is
+ * set, a wide transparent hit-path makes it easy to click, and the visible stroke
+ * emphasizes on hover (via the group) and when selected.
+ */
+const Edge = React__default.memo(function Edge({ id, type = "bezier", source, sourcePosition, target, targetPosition, selected, color, dashed, onPointerDown, }) {
+    const d = buildEdgePath(type, source, sourcePosition, target, targetPosition);
+    // Inline stroke beats the class strokes below; selection keeps priority.
+    const colorStyle = color && !selected ? { stroke: color } : undefined;
+    return (jsxs("g", { className: "group", children: [onPointerDown && (jsx("path", { d: d, fill: "none", stroke: "transparent", strokeWidth: 16, strokeLinecap: "round", "data-flikkui-edge": "", "data-edge-id": id, style: { pointerEvents: "stroke", cursor: "pointer" }, onPointerDown: onPointerDown })), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 8 : 6, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("pointer-events-none opacity-0 transition-opacity duration-150", selected
+                    ? "opacity-20 stroke-[var(--color-primary)]"
+                    : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-150", selected
+                    ? "stroke-[var(--color-primary)]"
+                    : "stroke-[var(--color-border)] group-hover:stroke-[var(--color-border-hover)]") })] }));
+}, 
+// EdgeLayer allocates fresh anchor point objects every render, so `source`/
+// `target` must be compared by value — default shallow memo would never bail.
+(prev, next) => prev.id === next.id &&
+    prev.type === next.type &&
+    prev.selected === next.selected &&
+    prev.color === next.color &&
+    prev.dashed === next.dashed &&
+    prev.onPointerDown === next.onPointerDown &&
+    prev.sourcePosition === next.sourcePosition &&
+    prev.targetPosition === next.targetPosition &&
+    prev.source.x === next.source.x &&
+    prev.source.y === next.source.y &&
+    prev.target.x === next.target.x &&
+    prev.target.y === next.target.y);
+Edge.displayName = "Edge";
+
+export { Edge, buildBezierPath, buildEdgePath, buildStepPath, edgeMidpoint };

package/dist/components/canvas/EdgeLayer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ConnectionState } from "./context/ConnectionContext";
+import type { NodeCanvasEdge, NodeCanvasNode } from "./NodeCanvas.types";
+interface EdgeLayerProps {
+    nodes: NodeCanvasNode[];
+    edges: NodeCanvasEdge[];
+    connection: ConnectionState | null;
+    onSelectEdge: (id: string, additive: boolean) => void;
+    onDeleteEdge: (id: string) => void;
+}
+/**
+ * SVG layer (inside the zoom-scaled world) that draws every edge, the in-progress
+ * connection ghost, and a delete (×) button at the midpoint of hovered/selected
+ * edges. Anchors come from `node.position + handleOffset`, so edges stay locked to
+ * handles through pan / zoom / node drag. The × is counter-scaled so it stays a
+ * constant on-screen size.
+ */
+export declare const EdgeLayer: React.NamedExoticComponent<EdgeLayerProps>;
+export {};

package/dist/components/canvas/EdgeLayer.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { edgeMidpoint, Edge } from './Edge.js';
+import { useHandleRegistry } from './context/HandleRegistry.js';
+import { useCanvasState } from './context/CanvasContext.js';
+
+const SIDE_NORMAL = {
+    top: [0, -1],
+    right: [1, 0],
+    bottom: [0, 1],
+    left: [-1, 0],
+};
+/**
+ * SVG layer (inside the zoom-scaled world) that draws every edge, the in-progress
+ * connection ghost, and a delete (×) button at the midpoint of hovered/selected
+ * edges. Anchors come from `node.position + handleOffset`, so edges stay locked to
+ * handles through pan / zoom / node drag. The × is counter-scaled so it stays a
+ * constant on-screen size.
+ */
+const EdgeLayer = React__default.memo(function EdgeLayer({ nodes, edges, connection, onSelectEdge, onDeleteEdge, }) {
+    const { handlesRef, version } = useHandleRegistry();
+    const { viewport } = useCanvasState();
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+    // One stable handler for every edge (reads the id stamped on the hit path)
+    // so memo(Edge) can bail on unrelated re-renders.
+    const onEdgePointerDown = useCallback((e) => {
+        const id = e.currentTarget.getAttribute("data-edge-id");
+        if (!id)
+            return;
+        e.stopPropagation();
+        onSelectEdge(id, e.shiftKey);
+    }, [onSelectEdge]);
+    const anchorAt = (node, h) => ({
+        point: { x: node.position.x + h.offset.x, y: node.position.y + h.offset.y },
+        position: h.position,
+    });
+    /** Node center (in flow coords), derived from the 4 auto-handle side-centers. */
+    const nodeCenter = (node) => {
+        var _a;
+        const auto = ((_a = handlesRef.current.get(node.id)) !== null && _a !== void 0 ? _a : []).filter((h) => h.kind === "auto");
+        if (auto.length) {
+            const sum = auto.reduce((a, h) => ({ x: a.x + h.offset.x, y: a.y + h.offset.y }), {
+                x: 0,
+                y: 0,
+            });
+            return { x: node.position.x + sum.x / auto.length, y: node.position.y + sum.y / auto.length };
+        }
+        return { x: node.position.x + 90, y: node.position.y + 40 };
+    };
+    /**
+     * Anchor an edge end. An explicit (non-auto) `<Handle>` is honored; otherwise the
+     * edge "floats" — it anchors to whichever auto-handle side faces `toward`, so edges
+     * route cleanly and re-route as nodes move.
+     */
+    const anchorFor = (nodeId, handleId, type, toward) => {
+        var _a;
+        const node = nodeMap.get(nodeId);
+        if (!node)
+            return null;
+        const list = (_a = handlesRef.current.get(nodeId)) !== null && _a !== void 0 ? _a : [];
+        const explicit = handleId
+            ? list.find((h) => h.id === handleId && h.kind !== "auto")
+            : list.find((h) => h.type === type && h.kind !== "auto");
+        if (explicit)
+            return anchorAt(node, explicit);
+        // Float: pick the auto-handle whose side best faces the other node.
+        const auto = list.filter((h) => h.kind === "auto");
+        if (auto.length) {
+            const center = nodeCenter(node);
+            const dir = { x: toward.x - center.x, y: toward.y - center.y };
+            let best = auto[0];
+            let bestDot = -Infinity;
+            for (const h of auto) {
+                const n = SIDE_NORMAL[h.position];
+                const dot = n[0] * dir.x + n[1] * dir.y;
+                if (dot > bestDot) {
+                    bestDot = dot;
+                    best = h;
+                }
+            }
+            return anchorAt(node, best);
+        }
+        return { point: { ...node.position }, position: type === "source" ? "right" : "left" };
+    };
+    const resolveEdge = (edge) => {
+        const sNode = nodeMap.get(edge.source);
+        const tNode = nodeMap.get(edge.target);
+        if (!sNode || !tNode)
+            return null;
+        const s = anchorFor(edge.source, edge.sourceHandle, "source", nodeCenter(tNode));
+        const t = anchorFor(edge.target, edge.targetHandle, "target", nodeCenter(sNode));
+        if (!s || !t)
+            return null;
+        return { s, t };
+    };
+    let ghost = null;
+    if (connection) {
+        // Ghost source floats toward the cursor.
+        ghost = anchorFor(connection.sourceNodeId, connection.sourceHandleId, connection.sourceType, connection.to);
+    }
+    return (jsxs("svg", { className: "absolute top-0 left-0 overflow-visible pointer-events-none", style: { width: 1, height: 1 }, children: [edges.map((edge) => {
+                var _a;
+                const resolved = resolveEdge(edge);
+                if (!resolved)
+                    return null;
+                const { s, t } = resolved;
+                const showDelete = !connection && (edge.selected || hoveredEdge === edge.id);
+                const mid = showDelete
+                    ? edgeMidpoint((_a = edge.type) !== null && _a !== void 0 ? _a : "bezier", s.point, s.position, t.point, t.position)
+                    : null;
+                return (jsxs("g", { onPointerEnter: () => setHoveredEdge(edge.id), onPointerLeave: () => setHoveredEdge((h) => (h === edge.id ? null : h)), children: [jsx(Edge, { id: edge.id, type: edge.type, source: s.point, sourcePosition: s.position, target: t.point, targetPosition: t.position, selected: edge.selected, color: edge.color, onPointerDown: onEdgePointerDown }), showDelete && mid && (jsxs("g", { transform: `translate(${mid.x} ${mid.y}) scale(${1 / viewport.zoom})`, style: { pointerEvents: "auto", cursor: "pointer" }, className: "group/delete", onPointerDown: (e) => {
+                                e.stopPropagation();
+                                onDeleteEdge(edge.id);
+                            }, "aria-label": "Delete connection", children: [jsx("circle", { r: 9, className: "fill-[var(--color-surface)] stroke-[var(--color-border)] drop-shadow-sm transition-colors group-hover/delete:fill-[var(--color-danger)] group-hover/delete:stroke-[var(--color-danger)]", strokeWidth: 1 }), jsx("path", { d: "M -3 -3 L 3 3 M 3 -3 L -3 3", className: "stroke-[var(--color-danger)] transition-colors group-hover/delete:stroke-white", strokeWidth: 1.5, strokeLinecap: "round", fill: "none" })] }))] }, edge.id));
+            }), connection && ghost && (jsx(Edge, { source: ghost.point, sourcePosition: ghost.position, target: connection.to, targetPosition: connection.to.x >= ghost.point.x ? "left" : "right", dashed: true, selected: true }))] }));
+});
+EdgeLayer.displayName = "EdgeLayer";
+
+export { EdgeLayer };

package/dist/components/canvas/Handle.d.ts

@@ -0,0 +1,11 @@
+import type { HandleProps } from "./NodeCanvas.types";
+/**
+ * A connection port, declared inside a custom node. Registers its center offset
+ * (in flow coords, relative to the node) so edges and connection drags anchor to
+ * `node.position + offset` — stable under pan/zoom/drag. Measured once after
+ * render and again only when the node's size changes.
+ */
+export declare function Handle({ type, id, position, isConnectable, className, style, children, }: HandleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Handle {
+    var displayName: string;
+}