@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

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

@@ -1,5 +1,5 @@
 const codeBlockTheme = {
-    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)]",
+    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)] shadow-inner-real-sm",
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",

package/dist/components/ai/PromptInput/PromptInput.js

@@ -1,48 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import '../../forms/Input/Input.js';
-import '../../forms/Input/Input.theme.js';
-import '../../forms/Select/Select.js';
-import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { StopIcon } from '@heroicons/react/24/solid';
+import { promptInputTheme } from './PromptInput.theme.js';
+import { VoiceRecorder } from './VoiceRecorder.js';
+import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
-import '../../forms/FormLabel/FormLabel.js';
-import '../../forms/Radio/Radio.js';
-import '../../forms/Checkbox/Checkbox.js';
-import '../../forms/Switch/Switch.js';
-import '../../forms/DatePicker/DatePicker.js';
-import '../../forms/DatePicker/DatePicker.theme.js';
-import '../../forms/DateRangePicker/DateRangePicker.js';
-import '../../forms/DateRangePicker/DateRangePicker.theme.js';
-import '../../forms/FileUpload/FileUpload.js';
-import '../../forms/FileUpload/FileUploadProgress.js';
-import '../../forms/TimePicker/TimePicker.js';
-import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { cn } from '../../../utils/cn.js';
-import 'react-dom';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
 import '../../core/Dropdown/DropdownMenu.js';
@@ -50,106 +16,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Popover/PopoverBody.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsBody.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import { StopIcon } from '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
-import '../../forms/TimePicker/WheelColumn.js';
-import '../../forms/TimePicker/TimePicker.theme.js';
-import '../../forms/Slider/Slider.js';
-import '../../forms/Slider/Slider.theme.js';
-import '../../forms/Signature/Signature.js';
-import '../../forms/Signature/Signature.theme.js';
-import '../../forms/RichTextEditor/RichTextEditor.js';
-import '../../forms/RichTextEditor/RichTextEditor.theme.js';
-import '../../forms/InputOTP/InputOTP.js';
-import '../../forms/InputOTP/InputOTP.theme.js';
-import '../../forms/InputCreditCard/InputCreditCard.js';
-import '../../forms/InputCreditCard/InputCreditCard.theme.js';
-import '../../forms/InputAddress/InputAddress.js';
-import '../../forms/InputAddress/InputAddress.theme.js';
-import '../../forms/InputDate/InputDate.js';
-import '../../forms/InputCounter/InputCounter.js';
-import '../../forms/InputTag/InputTag.js';
-import '../../forms/InputTag/InputTag.theme.js';
-import '../../forms/Combobox/Combobox.js';
-import '../../forms/Combobox/Combobox.theme.js';
-import '../../forms/ColorPicker/ColorPicker.js';
-import '../../forms/ColorPicker/ColorPickerContext.js';
-import '../../forms/ColorPicker/ColorPickerTrigger.js';
-import '../../forms/ColorPicker/ColorPickerBody.js';
-import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
-import '../../forms/ColorPicker/ColorPickerSwatch.js';
-import '../../forms/ColorPicker/ColorPickerSliders.js';
-import '../../forms/ColorPicker/ColorPickerInput.js';
-import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
-import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
-import '../../forms/ColorPicker/ColorPickerPresets.js';
-import '../../forms/ColorPicker/ColorPickerSavedColors.js';
-import '../../forms/ColorPicker/ColorPickerHeader.js';
-import '../../forms/ColorPicker/ColorPickerGradient.js';
-import '../../forms/ColorPicker/ColorPickerImage.js';
-import '../../forms/SelectableCard/SelectableCard.js';
-import '../../forms/Mention/Mention.js';
-import '../../forms/Mention/Mention.theme.js';
-import '../../forms/CronInput/CronInput.js';
-import '../../forms/CronInput/CronInput.theme.js';
-import { promptInputTheme } from './PromptInput.theme.js';
-import { VoiceRecorder } from './VoiceRecorder.js';
-import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * Default model options for the model selector

package/dist/components/ai/PromptInput/VoiceRecorder.js

@@ -3,92 +3,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { motion } from 'motion/react';
 import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.js';
-import '../../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 '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Popover/PopoverBody.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsBody.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 
 /**
  * Format seconds into MM:SS display

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-surface-sunken)] 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/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,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useNodeCanvasContext } 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 } = useNodeCanvasContext();
+    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,34 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CursorArrowRaysIcon, HandRaisedIcon, PlusIcon } from '@heroicons/react/24/outline';
+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 { useNodeCanvasContext } 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 } = useNodeCanvasContext();
+    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: "neutral", 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(CursorArrowRaysIcon, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "neutral", 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(HandRaisedIcon, { 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: "neutral", size: "sm", className: "rounded-full gap-1.5", children: [jsx(PlusIcon, { 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,35 @@
+import type 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 function Edge({ id, type, source, sourcePosition, target, targetPosition, selected, color, dashed, onPointerDown, }: EdgeRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Edge {
+    var displayName: string;
+}

package/dist/components/canvas/Edge.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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.
+ */
+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)]") })] }));
+}
+Edge.displayName = "Edge";
+
+export { Edge, buildBezierPath, buildEdgePath, buildStepPath, edgeMidpoint };