@ctrl-ui/react 0.8.19 → 0.8.20

package/dist/styles/recipes/resize-handle.css

@@ -0,0 +1,126 @@
+@layer components {
+  :where([data-control-family="resize-handle"][data-slot="root"]) {
+    --cui-resize-handle-size: 10px;
+    --cui-resize-handle-hit-size: var(--target-min);
+    --cui-resize-handle-background: var(--background);
+    --cui-resize-handle-hover-background: oklch(from var(--primary) l c h / 0.1);
+    --cui-resize-handle-border-color: var(--primary);
+    --cui-resize-handle-border-width: var(--control-rim-width);
+    --cui-resize-handle-radius: 0px;
+    inline-size: var(--cui-resize-handle-hit-size);
+    block-size: var(--cui-resize-handle-hit-size);
+    translate: -50% -50%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"])::before {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    inline-size: var(--cui-resize-handle-size);
+    block-size: var(--cui-resize-handle-size);
+    translate: -50% -50%;
+    border: var(--cui-resize-handle-border-width) solid var(--cui-resize-handle-border-color);
+    border-radius: var(--cui-resize-handle-radius);
+    background: var(--cui-resize-handle-background);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="resize-handle"][data-slot="root"]:hover)::before {
+      background: var(--cui-resize-handle-hover-background);
+    }
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="n"]) {
+    top: 0;
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="ne"]) {
+    top: 0;
+    left: 100%;
+    cursor: nesw-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="e"]) {
+    top: 50%;
+    left: 100%;
+    cursor: ew-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="se"]) {
+    top: 100%;
+    left: 100%;
+    cursor: nwse-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="s"]) {
+    top: 100%;
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="sw"]) {
+    top: 100%;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="w"]) {
+    top: 50%;
+    left: 0;
+    cursor: ew-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="nw"]) {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+}
+
+@property --cui-resize-handle-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-hit-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/sidebar-mobile.css

@@ -0,0 +1,171 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="wrapper"]) {
+    --cui-sidebar-nav-height: 4.5rem;
+    --cui-sidebar-nav-background: var(--sidebar);
+    --cui-sidebar-nav-foreground: var(--sidebar-foreground);
+    --cui-sidebar-nav-border-color: var(--sidebar-border);
+    --cui-sidebar-nav-border-width: var(--control-rim-width);
+    --cui-sidebar-nav-shadow: var(--shadow-md);
+    --cui-sidebar-nav-item-radius: var(--radius-control);
+    --cui-sidebar-nav-item-active-background: var(--active-fill);
+    --cui-sidebar-nav-item-active-foreground: var(--foreground);
+    --cui-sidebar-nav-gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav-container"]) {
+    --_sidebar-nav-space: calc(var(--cui-sidebar-nav-height) + env(safe-area-inset-bottom, 0px));
+    block-size: var(--_sidebar-nav-space);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"]) {
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
+    z-index: 30;
+    min-block-size: var(--_sidebar-nav-space);
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 1) max(calc(var(--spacing) * 2), env(safe-area-inset-right, 0px))
+      calc(var(--spacing) * 1 + env(safe-area-inset-bottom, 0px)) max(calc(var(--spacing) * 2), env(safe-area-inset-left, 0px));
+    background-color: var(--cui-sidebar-nav-background);
+    color: var(--cui-sidebar-nav-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"][data-variant="bar"]) {
+    border-block-start: var(--cui-sidebar-nav-border-width) solid var(--cui-sidebar-nav-border-color);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav-container"][data-layout="contained"] > [data-slot="mobile-nav"]) {
+    position: absolute;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item]) {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1);
+    min-inline-size: 48px;
+    min-block-size: 48px;
+    block-size: auto;
+    padding: calc(var(--spacing) * 1);
+    border-radius: var(--cui-sidebar-nav-item-radius);
+    background-color: transparent;
+    color: var(--cui-sidebar-nav-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    text-align: center;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item] > svg) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+    flex-shrink: 0;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item] > span) {
+    max-inline-size: 100%;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item][data-active]) {
+    background-color: var(--cui-sidebar-nav-item-active-background);
+    color: var(--cui-sidebar-nav-item-active-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item]:is(:disabled, [aria-disabled="true"])) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav-container"][data-variant="floating"]) {
+    block-size: calc(var(--_sidebar-nav-space) + var(--cui-sidebar-nav-gap));
+  }
+
+  :where([data-control-family="sidebar"][data-slot="mobile-nav"][data-variant="floating"]) {
+    inset-inline-start: auto;
+    inset-inline-end: max(var(--cui-sidebar-nav-gap), env(safe-area-inset-right, 0px));
+    inset-block-end: calc(var(--cui-sidebar-nav-gap) + env(safe-area-inset-bottom, 0px));
+    min-block-size: 0;
+    padding: calc(var(--spacing) * 1);
+    border: var(--cui-sidebar-nav-border-width) solid var(--cui-sidebar-nav-border-color);
+    border-radius: var(--cui-sidebar-nav-item-radius);
+    box-shadow: var(--cui-sidebar-nav-shadow);
+  }
+
+  @media (width < 64rem) {
+    :where([data-control-family="sidebar"][data-slot="wrapper"]:has(> [data-slot="mobile-nav-container"])) {
+      flex-direction: column;
+    }
+
+    :where([data-control-family="sidebar"][data-slot="wrapper"]:has(> [data-slot="mobile-nav-container"]) > [data-slot="inset"]) {
+      scroll-padding-block-end: calc(var(--cui-sidebar-nav-height) + env(safe-area-inset-bottom, 0px));
+    }
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="mobile-nav"] [data-mobile-nav-item]:hover) {
+      background-color: var(--cui-sidebar-nav-item-active-background);
+      color: var(--cui-sidebar-nav-item-active-foreground);
+    }
+  }
+}
+
+@property --cui-sidebar-nav-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 72px;
+}
+
+@property --cui-sidebar-nav-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-nav-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-nav-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-nav-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-nav-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-nav-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-nav-item-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-nav-item-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-nav-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 12px;
+}

package/dist/styles/recipes/toolbar.css

@@ -32,6 +32,13 @@
     gap: calc(var(--spacing) * 1);
   }
 
+  :where([data-control-family="toolbar"][data-slot="root"][data-chrome="embedded"]) {
+    --cui-toolbar-background: transparent;
+    --cui-toolbar-border-width: 0px;
+    --cui-toolbar-radius: 0px;
+    --cui-toolbar-shadow: none;
+  }
+
   :where([data-control-family="toolbar"][data-slot="root"][data-variant="floating"]) {
     --cui-toolbar-background: transparent;
     --cui-toolbar-border-color: transparent;
@@ -112,7 +119,7 @@
     }
   }
 
-  :where([data-control-family="toolbar"][data-slot="button"]:is([data-pressed], [data-active])),
+  :where([data-control-family="toolbar"][data-slot="button"]:is([data-pressed], [data-active], [aria-pressed="true"])),
   :where([data-control-family="toolbar"][data-slot="link"]:is([data-pressed], [data-active])) {
     background-color: var(--cui-toolbar-item-active-background);
     color: var(--cui-toolbar-item-active-foreground);

package/dist/styles/theme.css

@@ -168,6 +168,7 @@
   --popover: var(--scale-neutral-1);
   --popover-foreground: var(--scale-neutral-12);
   --canvas: var(--scale-neutral-1);
+  --canvas-grid-dot: oklch(from var(--foreground) l c h / 0.16);
 
   --radius: 0px;
   --shadow-size: 0;

package/dist/ui/app-shell.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { PageScrollContext, usePageScroll } from "./page-layout.js";
 import { SidebarProvider } from "./sidebar-provider.js";
 import { SidebarInset } from "./sidebar.js";
+import { PageScrollContext, usePageScroll } from "./page-layout.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/app-shell.tsx
 function AppShell({ scroll = "auto", layout = "viewport", className, ...props }) {

package/dist/ui/color-picker.js

@@ -4,10 +4,10 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
-import { Input } from "./input.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { Input } from "./input.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/combobox.d.ts

@@ -4,7 +4,7 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
-export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> = Pick<Combobox$1.Root.Props<Value, Multiple>, "children" | "multiple" | "value" | "defaultValue" | "onValueChange" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "readOnly" | "required" | "name" | "autoHighlight" | "itemToStringLabel" | "isItemEqualToValue" | "filter" | "modal"> & {
+export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> = Pick<Combobox$1.Root.Props<Value, Multiple>, "children" | "multiple" | "value" | "defaultValue" | "onValueChange" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "readOnly" | "required" | "name" | "autoHighlight" | "itemToStringLabel" | "isItemEqualToValue" | "filter" | "limit" | "modal"> & {
   items?: readonly Value[];
 };
 export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {

package/dist/ui/command.js

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.js";
 import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Command as Command$1, useCommandState } from "cmdk";

package/dist/ui/dockable-panel.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
+import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { clampDockablePanelPosition, dockablePanelSideAt, dockablePanelSideForKey, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
-import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
 import { createContext, use, useEffect, useEffectEvent, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/dockable-panel.tsx

package/dist/ui/flow.d.ts

@@ -0,0 +1,51 @@
+import { FlowKnobStyle } from "../knob-contracts/flow-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { BaseEdgeProps, Edge, FitViewOptions, Handle, Node, Panel, ReactFlowProps } from "@xyflow/react";
+//#region src/ui/flow.d.ts
+export type FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<ReactFlowProps<NodeType, EdgeType>, "colorMode" | "style"> & {
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowBackgroundProps = {
+  id?: string;
+  className?: string;
+};
+export type FlowPanelProps = Omit<ComponentProps<typeof Panel>, "style"> & {
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowControlsProps = Omit<FlowPanelProps, "children"> & {
+  fitViewOptions?: FitViewOptions;
+};
+export type FlowNodeProps = Omit<ComponentProps<"div">, "style"> & {
+  selected?: boolean;
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowNodePartProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowHandleProps = Omit<ComponentProps<typeof Handle>, "style"> & {
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowEdgeProps = Omit<BaseEdgeProps, "style"> & {
+  dashed?: boolean;
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowEdgeLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  x: number;
+  y: number;
+  style?: CSSProperties & FlowKnobStyle;
+};
+export type FlowEdgeLabelChipProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & FlowKnobStyle;
+};
+export declare function Flow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: FlowProps<NodeType, EdgeType>): import("react").JSX.Element;
+export declare function FlowBackground(props: FlowBackgroundProps): import("react").JSX.Element;
+export declare function FlowPanel(props: FlowPanelProps): import("react").JSX.Element;
+export declare function FlowControls({ position, fitViewOptions, className, ...props }: FlowControlsProps): import("react").JSX.Element;
+export declare function FlowNode({ selected, className, ...props }: FlowNodeProps): import("react").JSX.Element;
+export declare function FlowNodeHeader({ className, ...props }: FlowNodePartProps): import("react").JSX.Element;
+export declare function FlowNodeBody({ className, ...props }: FlowNodePartProps): import("react").JSX.Element;
+export declare function FlowHandle(props: FlowHandleProps): import("react").JSX.Element;
+export declare function FlowEdge({ dashed, ...props }: FlowEdgeProps): import("react").JSX.Element;
+export declare function FlowEdgeLabel({ x, y, className, style, ...props }: FlowEdgeLabelProps): import("react").JSX.Element;
+export declare function FlowEdgeLabelChip({ className, ...props }: FlowEdgeLabelChipProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/flow.js

@@ -0,0 +1,153 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { prefersReducedMotion, readDurationMs } from "../lib/motion.js";
+import "../lib/canvas-grid.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
+import { Background, BackgroundVariant, BaseEdge, EdgeLabelRenderer, Handle, Panel, ReactFlow, useReactFlow, useStore } from "@xyflow/react";
+//#region src/ui/flow.tsx
+function viewportTransitionMs(element) {
+	return prefersReducedMotion(element) ? 0 : readDurationMs(element, "--duration-base");
+}
+function Flow(props) {
+	return /* @__PURE__ */ jsx(ReactFlow, {
+		defaultMarkerColor: null,
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "root"
+	});
+}
+function FlowBackground(props) {
+	return /* @__PURE__ */ jsx(Background, {
+		...props,
+		variant: BackgroundVariant.Dots,
+		gap: 24,
+		size: 2
+	});
+}
+function FlowPanel(props) {
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "panel"
+	});
+}
+function FlowControls({ position = "bottom-left", fitViewOptions, className, ...props }) {
+	const { zoomIn, zoomOut, fitView } = useReactFlow();
+	const atMinZoom = useStore((state) => state.transform[2] <= state.minZoom);
+	const atMaxZoom = useStore((state) => state.transform[2] >= state.maxZoom);
+	return /* @__PURE__ */ jsxs(Panel, {
+		...props,
+		position,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "controls",
+		className: cn("flex items-center", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				disabled: atMinZoom,
+				"aria-label": "Zoom out",
+				onClick: (event) => zoomOut({ duration: viewportTransitionMs(event.currentTarget) }),
+				children: /* @__PURE__ */ jsx(MinusIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				disabled: atMaxZoom,
+				"aria-label": "Zoom in",
+				onClick: (event) => zoomIn({ duration: viewportTransitionMs(event.currentTarget) }),
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				"aria-label": "Fit view",
+				onClick: (event) => fitView({
+					...fitViewOptions,
+					duration: viewportTransitionMs(event.currentTarget)
+				}),
+				children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+			})
+		]
+	});
+}
+function FlowNode({ selected, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "node",
+		"data-selected": selected || void 0,
+		className: cn("flex flex-col", className)
+	});
+}
+function FlowNodeHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "node-header",
+		className: cn("flex items-center", className)
+	});
+}
+function FlowNodeBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "node-body",
+		className: cn("flex flex-col", className)
+	});
+}
+function FlowHandle(props) {
+	return /* @__PURE__ */ jsx(Handle, {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "handle"
+	});
+}
+function FlowEdge({ dashed, ...props }) {
+	return /* @__PURE__ */ jsx(BaseEdge, {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "edge",
+		"data-dashed": dashed || void 0
+	});
+}
+function FlowEdgeLabel({ x, y, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "edge-label",
+		className: cn("nodrag nopan pointer-events-auto absolute flex items-center", className),
+		style: {
+			...style,
+			transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`
+		}
+	}) });
+}
+function FlowEdgeLabelChip({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-control-ui": "flow",
+		"data-control-family": "flow",
+		"data-slot": "edge-label-chip",
+		className: cn("inline-flex max-w-40 items-center truncate", className)
+	});
+}
+//#endregion
+export { Flow, FlowBackground, FlowControls, FlowEdge, FlowEdgeLabel, FlowEdgeLabelChip, FlowHandle, FlowNode, FlowNodeBody, FlowNodeHeader, FlowPanel };

package/dist/ui/infinite-canvas.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import "../lib/canvas-grid.js";
 import { createContext, use, useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { MinusIcon, PlusIcon } from "lucide-react";
@@ -13,7 +14,6 @@ const DEFAULT_TRANSFORM = {
 const DEFAULT_MIN_SCALE = .35;
 const DEFAULT_MAX_SCALE = 2.5;
 const KEYBOARD_PAN_STEP = 32;
-const GRID_SIZE = 24;
 const WHEEL_ZOOM_SPEED = .004;
 const MAX_WHEEL_ZOOM_DELTA = 50;
 const CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0";
@@ -78,7 +78,7 @@ function useInfiniteCanvas() {
 	return context;
 }
 function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", "aria-keyshortcuts": ariaKeyShortcuts, ...props }) {
-	const minScale = Math.max(.1, minScaleProp);
+	const minScale = minScaleProp > 0 ? minScaleProp : DEFAULT_MIN_SCALE;
 	const maxScale = Math.max(minScale, maxScaleProp);
 	const [uncontrolledTransform, setUncontrolledTransform] = useState(defaultTransform);
 	const [panning, setPanning] = useState(false);
@@ -222,7 +222,7 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 	const canvasStyle = {
 		...style,
 		backgroundPosition: `${transform.x}px ${transform.y}px`,
-		backgroundSize: `${GRID_SIZE * transform.scale}px ${GRID_SIZE * transform.scale}px`
+		backgroundSize: `${24 * transform.scale}px ${24 * transform.scale}px`
 	};
 	return /* @__PURE__ */ jsx(InfiniteCanvasContext.Provider, {
 		value: context,

package/dist/ui/item.d.ts

@@ -27,6 +27,10 @@ export type ItemGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
 export type ItemSeparatorProps = ComponentProps<"div">;
+export type ItemActionsProps = Omit<ComponentProps<"div">, "style"> & {
+  showOnHover?: boolean;
+  style?: CSSProperties & ItemKnobStyle;
+};
 export declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react").JSX.Element;
 export declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react").JSX.Element;
 export declare function Item({ variant, render, className, children, ...props }: ItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -36,9 +40,7 @@ export declare function ItemContent({ className, ...props }: ComponentProps<"div
 }): import("react").JSX.Element;
 export declare function ItemTitle({ render, className, ...props }: ItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
-export declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
-  style?: CSSProperties & ItemKnobStyle;
-}): import("react").JSX.Element;
+export declare function ItemActions({ showOnHover, className, ...props }: ItemActionsProps): import("react").JSX.Element;
 export declare function ItemHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/item.js

@@ -83,11 +83,12 @@ function ItemDescription({ className, ...props }) {
 		...props
 	});
 }
-function ItemActions({ className, ...props }) {
+function ItemActions({ showOnHover, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "item",
 		"data-control-family": "item",
 		"data-slot": "actions",
+		"data-show-on-hover": showOnHover || void 0,
 		className: cn("flex shrink-0 items-center", className),
 		...props
 	});