@g4rcez/components 2.0.5 → 2.0.7

package/dist/components/core/button.d.ts

@@ -12,6 +12,7 @@ declare const variants: {
         default: string;
         min: string;
         small: string;
+        tiny: string;
     };
     rounded: {
         rough: string;

package/dist/components/core/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}

package/dist/components/core/button.js

@@ -14,6 +14,7 @@ const variants = {
         default: "h-10 px-4 py-2",
         min: "h-7 px-3 py-1 text-sm",
         small: "h-8 px-4 py-2 text-sm",
+        tiny: "h-6 px-2 py-1 text-sm",
     },
     rounded: {
         rough: "rounded-sm",

package/dist/components/core/tag.js

@@ -38,7 +38,7 @@ const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
         },
     },
 });
-const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
+const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-0 items-center justify-center align-middle whitespace-nowrap", {
     variants,
     defaultVariants: { theme: "primary", size: "default" },
 });

package/dist/components/display/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AA2DhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAuDhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}

package/dist/components/display/list.js

@@ -4,7 +4,7 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDis
 import { AnimatePresence, motion, MotionConfig } from "motion/react";
 import { XIcon } from "lucide-react";
 import React, { Fragment, useCallback, useId, useState } from "react";
-const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.2 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { layout: true, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card", ref: refs.setFloating, ...get(), children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] }) }) })) : null })] }) }) }));
+const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.3 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [item ? (_jsx(motion.div, { exit: { opacity: 0 }, animate: { opacity: 1 }, initial: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70" })) : null, item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-floating flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { layout: true, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card", ref: refs.setFloating, ...get(), children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] }) }) })) : null] }) }) }));
 export const AnimatedList = (props) => {
     const [selected, setSelected] = useState(null);
     const id = useId();
@@ -26,7 +26,7 @@ export const AnimatedList = (props) => {
                     const innerId = `${id}-${index}`;
                     const setter = () => setSelected({ ...item, id: innerId });
                     const Leading = item.leading;
-                    return (_jsx(motion.li, { layout: true, layoutId: `item-${innerId}`, className: `border-b border-card-border py-2 last:border-transparent`, children: _jsx(motion.div, { layoutId: `toast-${innerId}`, className: "relative", children: _jsx("div", { className: "relative flex items-start space-x-3", children: _jsxs(Fragment, { children: [item.avatar ? (_jsx("div", { children: _jsx("div", { className: "relative px-1", children: _jsx("button", { onClick: setter, className: "flex size-10 items-center justify-center ring-primary", children: item.avatar }) }) })) : null, _jsx("div", { className: "min-w-0 flex-1 py-1 text-foreground", children: _jsxs("div", { className: "flex flex-row flex-nowrap justify-between gap-4", children: [_jsxs("button", { onClick: setter, className: "cursor-pointer text-left transition-all ease-out hover:scale-105 hover:text-primary", children: [_jsx("h3", { children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), Leading ? _jsx(Leading, { open: setter }) : null] }) })] }) }) }) }, innerId));
+                    return (_jsx(motion.li, { layout: true, layoutId: `item-${innerId}`, className: `border-b border-card-border py-2 last:border-transparent`, children: _jsx(motion.div, { layoutId: `toast-${innerId}`, className: "relative", children: _jsx("div", { className: "relative flex items-start space-x-3", children: _jsxs(Fragment, { children: [item.avatar ? (_jsx("div", { children: _jsx("div", { className: "relative px-1", children: _jsx("button", { onClick: setter, className: "flex size-10 items-center justify-center ring-primary", children: item.avatar }) }) })) : null, _jsx("div", { className: "min-w-0 flex-1 py-1 text-foreground", children: _jsxs("div", { className: "flex flex-row flex-nowrap justify-between gap-4", children: [_jsxs("button", { onClick: setter, className: "cursor-pointer text-left transition-all ease-out hover:text-primary", children: [_jsx("h3", { children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), Leading ? _jsx(Leading, { open: setter }) : null] }) })] }) }) }) }, innerId));
                 }) })] }));
 };
 export const AnimatedListItem = (props) => _jsx(Fragment, { children: props.children });

package/dist/components/floating/menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "radix-ui";
 import { ChevronRightIcon } from "lucide-react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
@@ -84,7 +84,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
             tree.events.emit("menuopen", { parentId, nodeId });
     }, [tree, isOpen, nodeId, parentId]);
     const className = isParent ? props.className : css(menuItemClassName(props.className));
-    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { ...getReferenceProps(parent.getItemProps({
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot.Root, { ...getReferenceProps(parent.getItemProps({
                         ...props,
                         onFocus(event) {
                             props.onFocus?.(event);

package/dist/components/form/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAoWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGA0WxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -13,6 +13,7 @@ import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs
 import { safeRegex } from "../../lib/fns";
 import { fzf } from "../../lib/fzf";
 import { InputField } from "./input-field";
+import { useReducer } from "use-typed-reducer";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
 const transitionStyles = {
     duration: 300,
@@ -33,45 +34,59 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const scroller = useRef(null);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
-    const defaults = props.value ?? props.defaultValue ?? "";
+    const defaults = options.length === 0 ? "" : props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
+    const [state, dispatch] = useReducer({
+        open: false,
+        shadow: "",
+        value: defaults,
+        label: options.find((x) => x.value === defaults)?.label ?? defaults,
+        index: null
+    }, (get) => ({
+        open: (open) => ({ open }),
+        index: (index) => ({ index }),
+        shadow: (shadow) => ({ shadow }),
+        option: (value, label) => ({ value, label }),
+        select: (value, label, index) => ({ open: false, shadow: "", index, value, label }),
+        caretDown: () => ({ open: true, shadow: "" }),
+        onClose: () => ({ open: false, label: "", value: "", shadow: "" }),
+        onFocus: () => {
+            const prev = get.state();
+            return { index: prev.index === null ? 0 : prev.index, open: true, shadow: "" };
+        }
+    }));
     const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
-    const [open, setOpen] = useState(false);
-    const [shadow, setShadow] = useState("");
-    const [value, setValue] = useState(defaults);
-    const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
-    const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
-    const removeScrollRef = useRemoveScroll(open, "block-only");
-    const innerOptions = dynamicOption && shadow !== ""
+    const removeScrollRef = useRemoveScroll(state.open, "block-only");
+    const innerOptions = dynamicOption && state.shadow !== ""
         ? [
             {
-                value: shadow,
-                label: shadow,
+                value: state.shadow,
+                label: state.shadow,
                 "data-dynamic": "true",
             },
             ...options,
         ]
         : options;
-    const list = shadow
+    const list = state.shadow
         ? fzf(innerOptions, "value", [
-            { key: "value", value: shadow },
-            { key: "label", value: shadow },
+            { key: "value", value: state.shadow },
+            { key: "label", value: state.shadow },
         ])
         : innerOptions;
     const setClosed = () => {
-        setOpen(false);
         setH(0);
+        dispatch.open(false);
     };
     const displayList = list.filter((x) => x.hidden !== true);
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
     const { x, y, strategy, refs, context } = useFloating({
-        open,
+        open: state.open,
         transform: true,
-        onOpenChange: setOpen,
         placement: "bottom-start",
+        onOpenChange: dispatch.open,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
@@ -100,17 +115,20 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             loop: true,
             virtual: true,
             allowEscape: true,
-            activeIndex: index,
-            selectedIndex: index,
             focusItemOnOpen: "auto",
             openOnArrowKeyDown: true,
             scrollItemIntoView: true,
+            activeIndex: state.index,
+            selectedIndex: state.index,
         }),
     ]);
     useEffect(() => {
         if (props.value) {
+            if (options.length === 0)
+                return dispatch.option("", "");
             const item = options.find((x) => x.value === props.value);
-            setValue(item?.label ?? props.value);
+            if (item)
+                return dispatch.option(item.value, item.label ?? item.value);
         }
     }, [props.value, options.length]);
     useEffect(() => {
@@ -121,7 +139,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             return;
         const s = getRemainingSize(inputRef.current, window.innerHeight);
         setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
-    }, [shadow, open, refs.reference, displayList.length]);
+    }, [state.shadow, state.open, refs.reference, displayList.length]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -129,55 +147,43 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         return initializeInputDataset(input);
     }, []);
     const onSelect = (opt, i) => {
-        setValue(opt.value);
         const input = refs.reference.current;
-        if (!input)
-            return;
+        if (!input) {
+            return void dispatch.option(opt.value, opt.label ?? opt.value);
+        }
         input?.setAttribute("data-value", opt.value);
         input.value = opt.value;
         const event = new Event("change", { bubbles: false, cancelable: true });
         input.dispatchEvent(event);
         if (props.onChange)
             props.onChange(event);
-        setLabel(opt.label ?? "");
-        setClosed();
-        setShadow("");
-        setIndex(i);
+        const label = options.find(x => x.value === opt.value)?.label || opt.value;
+        dispatch.select(opt.value, label, i);
     };
     const onChange = (event) => {
         const value = event.target.value;
-        setShadow(value);
+        dispatch.shadow(value);
         if (!open && value === "")
-            return setOpen(true);
+            return dispatch.open(true);
         event.target.name = props.name || "";
-        return value ? setOpen(true) : props.onChange?.(event);
+        return value ? dispatch.open(true) : props.onChange?.(event);
     };
     const onCaretDownClick = () => {
-        setOpen(true);
-        setShadow("");
+        dispatch.caretDown();
         refs.reference.current?.focus();
     };
-    const onFocus = () => {
-        setIndex((prev) => (prev === null ? 0 : prev));
-        setOpen(true);
-        setShadow("");
-    };
     const onClose = () => {
         refs.reference.current?.setAttribute("data-value", "");
-        setShadow("");
-        setValue("");
-        setLabel("");
+        dispatch.onClose();
         dispatchInput(refs.reference.current);
-        setClosed();
     };
     const id = props.id || props.name;
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: shadowId, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { "data-shadow": "true", ...getReferenceProps({
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: shadowId, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), state.value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { "data-shadow": "true", ...getReferenceProps({
                     ...props,
-                    onFocus,
+                    onFocus: dispatch.onFocus,
                     pattern,
-                    onChange,
                     id: shadowId,
                     name: shadowId,
                     ref: refs.setReference,
@@ -190,23 +196,23 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                         if (!open)
                             return;
                         if (event.key === "ArrowDown") {
-                            let next = Is.number(index) ? index + 1 : 0;
+                            let next = Is.number(state.index) ? state.index + 1 : 0;
                             if (next > displayList.length - 1)
                                 next = 0;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
+                            return dispatch.index(next);
                         }
                         if (event.key === "ArrowUp") {
-                            let next = Is.number(index) ? index - 1 : displayList.length - 1;
+                            let next = Is.number(state.index) ? state.index - 1 : displayList.length - 1;
                             if (next < 0)
                                 next = displayList.length - 1;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
+                            return dispatch.index(next);
                         }
                         if (event.key === "Enter") {
-                            if (index !== null && displayList[index]) {
+                            if (state.index !== null && displayList[state.index]) {
                                 event.preventDefault();
-                                return onSelect(displayList[index], index);
+                                return onSelect(displayList[state.index], state.index);
                             }
                             if (displayList.length === 1) {
                                 event.preventDefault();
@@ -214,7 +220,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             }
                         }
                     },
-                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
+                }), "data-name": id, "data-target": id, autoComplete: "off", onChange: onChange, required: required, "data-error": !!error, "aria-autocomplete": "list", "data-value": state.value, placeholder: props.placeholder, value: state.open ? state.shadow : state.label || state.value, className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || state.value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
                             ref: mergeRefs(removeScrollRef, refs.setFloating),
                             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
                         }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {
@@ -226,8 +232,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             return flushSync(() => setH(sum + 10));
                         }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h - 10 }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-[calc(100%-2px)] overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
-                                    const active = value === option.value || value === option.label;
-                                    const selected = index === i;
+                                    const active = state.value === option.value || state.value === option.label;
+                                    const selected = state.index === i;
                                     const children = option.label ?? option.value;
                                     return (_jsx("button", { "data-value": option.value, ...getItemProps({
                                             ref: (node) => void (listRef.current[i] = node),

package/dist/components/form/slider.d.ts

@@ -1,5 +1,5 @@
-import { type SliderProps as RadixSliderProps } from "@radix-ui/react-slider";
-type SliderProps = RadixSliderProps & {
+import { Slider as RadixSlider } from "radix-ui";
+type SliderProps = Parameters<typeof RadixSlider.Root>[0] & {
     tooltip?: boolean;
 };
 export declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO9E,KAAK,WAAW,GAAG,gBAAgB,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAoBxC,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAOjD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAoBxC,CAAC"}

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from "./display/progress";
 export * from "./display/stats";
 export * from "./display/tabs";
 export * from "./display/timeline";
+export * from "./display/list";
 export * from "./floating/command-palette";
 export * from "./floating/dropdown";
 export * from "./floating/expand";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -11,6 +11,7 @@ export * from "./display/progress";
 export * from "./display/stats";
 export * from "./display/tabs";
 export * from "./display/timeline";
+export * from "./display/list";
 export * from "./floating/command-palette";
 export * from "./floating/dropdown";
 export * from "./floating/expand";

package/dist/components/table/table-lib.js

@@ -17,6 +17,7 @@ export var ColType;
     ColType["Text"] = "text";
 })(ColType || (ColType = {}));
 export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
+;
 const cols = () => (id, thead, options) => ({ ...options, id, thead });
 export const createColumns = (callback) => {
     let items = [];

package/dist/flow/flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../../src/flow/flow.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,IAAI,EAQZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAS,MAAM,cAAc,CAAC;AAClD,OAAO,KAAiH,MAAM,OAAO,CAAC;AAGtI,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI,QAAQ,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AA4C5F,KAAK,KAAK,CAAC,CAAC,SAAS,IAAI,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACtC,CAAC;AAoJF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,4CAM1D,CAAC"}
+{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../../src/flow/flow.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,IAAI,EAQZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAS,MAAM,cAAc,CAAC;AAClD,OAAO,KAAiH,MAAM,OAAO,CAAC;AAGtI,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI,QAAQ,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AA4C5F,KAAK,KAAK,CAAC,CAAC,SAAS,IAAI,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACtC,CAAC;AAyJF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,4CAM1D,CAAC"}

package/dist/flow/flow.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addEdge, Background, Controls, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, } from "@xyflow/react";
+import { addEdge, Background, Controls, Handle, Position, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, } from "@xyflow/react";
 import { XIcon } from "lucide-react";
 import { createContext, Fragment, memo, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { css } from "../lib/dom";
@@ -20,18 +20,18 @@ const Sidebar = (props) => {
         setType(nodeType);
         event.dataTransfer.effectAllowed = "move";
     };
-    return (_jsx("aside", { className: "absolute top-0 right-0 p-2 rounded-lg border shadow min-w-24 border-floating-border bg-background", children: _jsx("ul", { className: "space-y-2", children: props.items.map((item) => (_jsxs("li", { draggable: true, className: "flex gap-1.5 items-center text-lg hover:cursor-grab hover:text-primary", onDragStart: (event) => onDragStart(event, item), children: [item.Icon ? _jsx(item.Icon, { size: 16 }) : null, item.title] }, `${item.id}-flow-side-item`))) }) }));
+    return (_jsx("aside", { className: "absolute top-0 right-0 p-2 rounded-lg border shadow min-w-24 border-floating-border bg-card-background shadow-lg", children: _jsx("ul", { className: "space-y-2", children: props.items.map((item) => (_jsxs("li", { draggable: true, onDragStart: (event) => onDragStart(event, item), className: "flex gap-1.5 items-center text-lg hover:cursor-grab hover:text-primary", children: [item.Icon ? _jsx(item.Icon, { size: 16 }) : null, item.title] }, `${item.id}-flow-side-item`))) }) }));
 };
 const Handlers = (props) => {
-    return (_jsxs(Fragment, { children: [_jsx(Handle, { id: `${props.id}-handle-top`, type: props.type, position: Position.Top, className: "h-1 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: props.type, position: Position.Left, className: "h-4 w-1 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: props.type, position: Position.Right, className: "h-4 w-1 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: props.type, position: Position.Bottom, className: "h-1 w-10 !bg-primary" })] }));
+    return (_jsxs(Fragment, { children: [_jsx(Handle, { id: `${props.id}-handle-top`, type: "source", position: Position.Top, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: "source", position: Position.Left, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: "source", position: Position.Right, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: "source", position: Position.Bottom, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-top`, type: "target", position: Position.Top, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: "target", position: Position.Left, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: "target", position: Position.Right, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: "target", position: Position.Bottom, className: "h-0.5 w-10 !bg-primary" })] }));
 };
 const Input = memo((node) => {
-    return (_jsxs("div", { className: css("relative flex border min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "", "border-floating-border"), children: [_jsx(Handlers, { id: node.data.id, type: "source" }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
+    return (_jsxs("div", { className: css("relative flex border min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "", "border-floating-border"), children: [_jsx(Handlers, { id: node.data.id }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
 });
 const Connection = memo((node) => {
     const { deleteElements } = useReactFlow();
     const onClick = () => deleteElements({ nodes: [node] }).then(noop);
-    return (_jsxs("div", { className: css("relative border flex min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "border-muted", "border-floating-border"), children: [_jsx("button", { className: "flex absolute top-2 right-2 justify-center items-center text-foreground hover:text-danger active:text-danger", onClick: onClick, children: _jsx(XIcon, { size: 18 }) }), _jsx(Handlers, { id: node.data.id, type: "target" }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
+    return (_jsxs("div", { className: css("relative border flex min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "border-muted", "border-floating-border"), children: [_jsx("button", { className: "flex absolute top-2 right-2 justify-center items-center text-foreground hover:text-danger active:text-danger", onClick: onClick, children: _jsx(XIcon, { size: 18 }) }), _jsx(Handlers, { id: node.data.id }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
 });
 const nodeTypes = { input: Input, output: Connection };
 const AddNodeOnEdgeDrop = (props) => {
@@ -43,9 +43,11 @@ const AddNodeOnEdgeDrop = (props) => {
     const { screenToFlowPosition } = useReactFlow();
     useEffect(() => {
         props.onChange(nodes);
-    }, [nodes.length]);
+    }, [nodes.length, edges.length]);
     const onConnect = useCallback((params) => {
-        setEdges((eds) => addEdge({ ...params, animated: true, markerEnd: { type: MarkerType.Arrow } }, eds));
+        setEdges((eds) => addEdge({
+            ...params, animated: true, deletable: true, reconnectable: true,
+        }, eds));
     }, [setEdges]);
     const onDragOver = useCallback((event) => {
         event.preventDefault();
@@ -70,6 +72,6 @@ const AddNodeOnEdgeDrop = (props) => {
         event.dataTransfer.setData("text/plain", JSON.stringify(nodeType));
         event.dataTransfer.effectAllowed = "move";
     };
-    return (_jsxs("div", { className: "relative w-full bg-card-background", style: { height: 1000 }, ref: reactFlowWrapper, children: [_jsxs(ReactFlow, { fitView: true, ref: ref, edges: edges, nodes: nodes, onDrop: onDrop, nodeOrigin: [0, 0], onConnect: onConnect, onDragOver: onDragOver, className: "bg-background", nodeTypes: nodeTypes, onEdgesChange: onEdgesChange, onNodesChange: onNodesChange, attributionPosition: "top-right", fitViewOptions: { padding: 2 }, onDragStart: onDragStart, colorMode: props.theme ?? "dark", children: [_jsx(MiniMap, {}), _jsx(Background, { bgColor: "hsla(var(--floating-background))" }), _jsx(Controls, {})] }), _jsx(Sidebar, { items: props.parents })] }));
+    return (_jsxs("div", { className: "relative w-full bg-card-background", style: { height: 1000 }, ref: reactFlowWrapper, children: [_jsxs(ReactFlow, { fitView: true, ref: ref, edges: edges, nodes: nodes, onDrop: onDrop, nodeOrigin: [0, 0], onConnect: onConnect, onDragOver: onDragOver, className: "bg-transparent", nodeTypes: nodeTypes, onEdgesChange: onEdgesChange, onNodesChange: onNodesChange, attributionPosition: "bottom-left", fitViewOptions: { padding: 2 }, onDragStart: onDragStart, colorMode: props.theme ?? "dark", children: [_jsx(Controls, {}), _jsx(Background, { bgColor: "hsla(var(--floating-background))" })] }), _jsx(Sidebar, { items: props.parents })] }));
 };
 export const Flow = (props) => (_jsx(ReactFlowProvider, { fitView: true, initialMaxZoom: 1, children: _jsx(DnDProvider, { children: _jsx(AddNodeOnEdgeDrop, { ...props }) }) }));