@particle-academy/react-fancy 1.5.1 → 1.7.0

package/dist/index.cjs

@@ -1323,13 +1323,6 @@ var avatarSize = {
   lg: "w-6 h-6",
   xl: "w-7 h-7"
 };
-var alertIconSize = {
-  xs: "w-2 h-2",
-  sm: "w-2.5 h-2.5",
-  md: "w-3 h-3",
-  lg: "w-4 h-4",
-  xl: "w-4 h-4"
-};
 var badgeSize = {
   xs: "text-[10px] px-1 min-w-[14px] h-3.5",
   sm: "text-[10px] px-1.5 min-w-[16px] h-4",
@@ -1441,7 +1434,7 @@ var Action = react.forwardRef(
           return /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: cn("flex-shrink-0", iconColorCls),
+              className: cn("inline-flex items-center flex-shrink-0", iconColorCls),
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconSlug, size: iconSizeMap[size] })
             },
             `icon-${trailing ? "t" : "l"}`
@@ -1495,17 +1488,8 @@ var Action = react.forwardRef(
           className: "relative inline-flex flex-shrink-0",
           "data-action-alert": true,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(alertIconSize[size], "text-red-500 dark:text-red-400 animate-pulse"), children: alertIconEl }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  alertIconSize[size],
-                  "absolute inset-0 text-red-400 dark:text-red-300 animate-ping opacity-75"
-                ),
-                children: alertIconEl
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 dark:text-red-400 animate-pulse", children: alertIconEl }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-red-400 dark:text-red-300 animate-ping opacity-75", children: alertIconEl })
           ]
         },
         "alert-icon"
@@ -1645,7 +1629,7 @@ function dirtyRingClasses(dirty) {
 function errorClasses(error) {
   return error ? "border-red-500 focus:ring-red-500" : "";
 }
-var inputBaseClasses = "border border-zinc-300 bg-white text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500";
+var inputBaseClasses = "border border-zinc-300 bg-white text-zinc-900 placeholder:text-zinc-400 transition-[border-color,box-shadow] duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-blue-400 dark:focus:ring-blue-400/20";
 function resolveOption(option) {
   if (typeof option === "string") {
     return { value: option, label: option };
@@ -1662,13 +1646,13 @@ function Field({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-field": "", className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
         htmlFor,
         className: cn(
-          "font-medium text-zinc-700 dark:text-zinc-300",
+          "font-medium text-zinc-700 dark:text-zinc-100",
           labelSizeClasses[size]
         ),
         children: [
@@ -1696,7 +1680,7 @@ var insidePaddingRight = {
   lg: "pr-10",
   xl: "pr-11"
 };
-var affixOutsideClasses = "inline-flex items-center border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400";
+var affixOutsideClasses = "inline-flex items-center border border-zinc-300 bg-zinc-50 px-3 text-sm text-zinc-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400";
 function InputWrapper({
   children,
   prefix,
@@ -1940,10 +1924,157 @@ var Textarea = react.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+function Portal({ children, container }) {
+  if (typeof document === "undefined") return null;
+  const target = container ?? document.body;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(PortalDarkWrapper, { children }),
+    target
+  );
+}
+function PortalDarkWrapper({ children }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const root = document.documentElement;
+    const wrapper = ref.current;
+    if (!wrapper) return;
+    const sync = () => {
+      const isDark = root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
+      wrapper.classList.toggle("dark", isDark);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-portal": "", style: { display: "contents" }, children });
+}
+function getPosition(anchor, floating, placement, offset) {
+  let x = 0;
+  let y = 0;
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  switch (base) {
+    case "top":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.top - floating.height - offset;
+      break;
+    case "bottom":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.bottom + offset;
+      break;
+    case "left":
+      x = anchor.left - floating.width - offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+    case "right":
+      x = anchor.right + offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+  }
+  if (base === "top" || base === "bottom") {
+    if (align === "start") x = anchor.left;
+    else if (align === "end") x = anchor.right - floating.width;
+  }
+  if (base === "left" || base === "right") {
+    if (align === "start") y = anchor.top;
+    else if (align === "end") y = anchor.bottom - floating.height;
+  }
+  let finalPlacement = placement;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (base === "bottom" && y + floating.height > vh) {
+    y = anchor.top - floating.height - offset;
+    finalPlacement = placement.replace("bottom", "top");
+  } else if (base === "top" && y < 0) {
+    y = anchor.bottom + offset;
+    finalPlacement = placement.replace("top", "bottom");
+  }
+  x = Math.max(4, Math.min(x, vw - floating.width - 4));
+  y = Math.max(4, Math.min(y, vh - floating.height - 4));
+  return { x, y, placement: finalPlacement };
+}
+function useFloatingPosition(anchorRef, floatingRef, options = {}) {
+  const { placement = "bottom", offset = 8, enabled = true } = options;
+  const [position, setPosition] = react.useState({
+    x: -9999,
+    y: -9999,
+    placement
+  });
+  const update = react.useCallback(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const floatingRect = floating.getBoundingClientRect();
+    setPosition(getPosition(anchorRect, floatingRect, placement, offset));
+  }, [anchorRef, floatingRef, placement, offset]);
+  react.useLayoutEffect(() => {
+    if (!enabled) return;
+    update();
+    const raf = requestAnimationFrame(() => {
+      update();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [update, enabled]);
+  react.useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [update, enabled]);
+  return position;
+}
+function useOutsideClick(ref, handler, enabled = true, ignoreRef) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) return;
+      if (ignoreRef?.current?.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler, enabled, ignoreRef]);
+}
+function useEscapeKey(handler, enabled = true) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (event.key === "Escape") {
+        handler();
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [handler, enabled]);
+}
 function isOptionGroup(item) {
   return typeof item === "object" && "options" in item;
 }
-function renderOption(option, index) {
+function flattenOptions(list) {
+  const flat = [];
+  for (const item of list) {
+    if (isOptionGroup(item)) {
+      flat.push(...item.options);
+    } else {
+      flat.push(item);
+    }
+  }
+  return flat;
+}
+function renderNativeOption(option, index) {
   const resolved = resolveOption(option);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "option",
@@ -1955,7 +2086,7 @@ function renderOption(option, index) {
     `${resolved.value}-${index}`
   );
 }
-var Select = react.forwardRef(
+var NativeSelect = react.forwardRef(
   ({
     size = "md",
     dirty,
@@ -2013,8 +2144,8 @@ var Select = react.forwardRef(
               placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
               list.map(
                 (item, index) => isOptionGroup(item) ? /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label: item.label, children: item.options.map(
-                  (opt, optIndex) => renderOption(opt, optIndex)
-                ) }, `group-${index}`) : renderOption(item, index)
+                  (opt, optIndex) => renderNativeOption(opt, optIndex)
+                ) }, `group-${index}`) : renderNativeOption(item, index)
               )
             ]
           }
@@ -2038,6 +2169,270 @@ var Select = react.forwardRef(
     return select;
   }
 );
+NativeSelect.displayName = "NativeSelect";
+var ListboxSelect = react.forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    list,
+    placeholder = "Select...",
+    multiple = false,
+    values: controlledValues,
+    defaultValues,
+    onValueChange,
+    onValuesChange,
+    searchable = false,
+    selectedSuffix = "selected",
+    indicator = "check",
+    value: controlledSingleValue,
+    defaultValue: defaultSingleValue
+  }, _ref) => {
+    const autoId = react.useId();
+    const selectId = id ?? autoId;
+    const [open, setOpen] = react.useState(false);
+    const [search2, setSearch] = react.useState("");
+    const [activeIndex, setActiveIndex] = react.useState(-1);
+    const [singleValue, setSingleValue] = react.useState(
+      controlledSingleValue ?? defaultSingleValue ?? ""
+    );
+    const currentSingle = controlledSingleValue ?? singleValue;
+    const [multiValues, setMultiValues] = react.useState(
+      controlledValues ?? defaultValues ?? []
+    );
+    const currentMulti = controlledValues ?? multiValues;
+    react.useEffect(() => {
+      if (controlledValues) setMultiValues(controlledValues);
+    }, [controlledValues]);
+    react.useEffect(() => {
+      if (controlledSingleValue !== void 0) setSingleValue(controlledSingleValue);
+    }, [controlledSingleValue]);
+    const anchorRef = react.useRef(null);
+    const listRef = react.useRef(null);
+    const wrapperRef = react.useRef(null);
+    const searchRef = react.useRef(null);
+    const position = useFloatingPosition(anchorRef, listRef, {
+      placement: "bottom-start",
+      offset: 4,
+      enabled: open
+    });
+    const close = react.useCallback(() => {
+      setOpen(false);
+      setSearch("");
+      setActiveIndex(-1);
+    }, []);
+    useOutsideClick(wrapperRef, close, open);
+    useEscapeKey(close, open);
+    react.useEffect(() => {
+      if (open && searchable) {
+        requestAnimationFrame(() => searchRef.current?.focus());
+      }
+    }, [open, searchable]);
+    const allOptions = flattenOptions(list);
+    const resolvedOptions = allOptions.map(resolveOption);
+    const filtered = search2 ? resolvedOptions.filter(
+      (o) => o.label.toLowerCase().includes(search2.toLowerCase())
+    ) : resolvedOptions;
+    const isSelected = (value) => {
+      if (multiple) return currentMulti.includes(value);
+      return currentSingle === value;
+    };
+    const toggleOption = react.useCallback(
+      (value) => {
+        if (multiple) {
+          const next = currentMulti.includes(value) ? currentMulti.filter((v) => v !== value) : [...currentMulti, value];
+          setMultiValues(next);
+          onValuesChange?.(next);
+        } else {
+          setSingleValue(value);
+          onValueChange?.(value);
+          close();
+        }
+      },
+      [multiple, currentMulti, onValuesChange, onValueChange, close]
+    );
+    const getDisplayText = () => {
+      if (multiple) {
+        if (currentMulti.length === 0) return placeholder;
+        if (currentMulti.length === 1) {
+          const opt2 = resolvedOptions.find((o) => o.value === currentMulti[0]);
+          return opt2?.label ?? currentMulti[0];
+        }
+        return `${currentMulti.length} ${selectedSuffix}`;
+      }
+      if (!currentSingle) return placeholder;
+      const opt = resolvedOptions.find((o) => o.value === currentSingle);
+      return opt?.label ?? currentSingle;
+    };
+    const hasValue = multiple ? currentMulti.length > 0 : !!currentSingle;
+    const handleKeyDown = (e) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setOpen(true);
+        }
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && activeIndex >= 0) {
+        e.preventDefault();
+        const item = filtered[activeIndex];
+        if (item && !item.disabled) toggleOption(item.value);
+      }
+    };
+    const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: anchorRef,
+        type: "button",
+        id: selectId,
+        disabled,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: handleKeyDown,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "data-react-fancy-select": "",
+        "data-variant": "listbox",
+        className: cn(
+          inputBaseClasses,
+          inputSizeClasses[size],
+          dirtyClasses(dirty),
+          errorClasses(error),
+          "flex w-full cursor-pointer items-center justify-between gap-2 text-left",
+          !hasValue && "text-zinc-400 dark:text-zinc-500",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: getDisplayText() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn("h-4 w-4 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    const dropdown = open && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        className: "fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-zinc-950/50 fancy-scale-in",
+        style: {
+          left: position.x,
+          top: position.y,
+          width: anchorRef.current?.offsetWidth
+        },
+        children: [
+          searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              value: search2,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setActiveIndex(-1);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: "Search...",
+              className: "w-full rounded-md border-0 bg-zinc-100 px-2.5 py-1.5 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+            }
+          ) }),
+          filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "No results found" }) : filtered.map((option, i) => {
+            const selected = isSelected(option.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                disabled: option.disabled,
+                onClick: () => toggleOption(option.value),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
+                  i === activeIndex ? "bg-zinc-100 dark:bg-zinc-800" : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+                  selected ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-300",
+                  option.disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  indicator === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
+                        selected ? "border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400" : "border-zinc-300 dark:border-zinc-600"
+                      ),
+                      children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2.5 6 5 8.5 9.5 3.5" }) })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4 text-blue-500 dark:text-blue-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z", clipRule: "evenodd" }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+                    option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-zinc-400 dark:text-zinc-500", children: option.description })
+                  ] })
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    ) });
+    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative", children: [
+      trigger,
+      dropdown
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: selectId,
+          size,
+          children: content
+        }
+      );
+    }
+    return content;
+  }
+);
+ListboxSelect.displayName = "ListboxSelect";
+var Select = react.forwardRef(
+  (props, ref) => {
+    const variant = props.variant ?? (props.multiple ? "listbox" : "native");
+    if (variant === "listbox") {
+      return /* @__PURE__ */ jsxRuntime.jsx(ListboxSelect, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeSelect, { ...props, ref });
+  }
+);
 Select.displayName = "Select";
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -2116,7 +2511,7 @@ var Checkbox = react.forwardRef(
           onChange: (e) => setChecked(e.target.checked),
           className: cn(
             sizeClasses6,
-            "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+            "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
             dirtyRingClasses(dirty),
             error && "border-red-500"
           )
@@ -2128,7 +2523,7 @@ var Checkbox = react.forwardRef(
           {
             htmlFor: checkboxId,
             className: cn(
-              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
               disabled && "cursor-not-allowed opacity-50"
             ),
             children: [
@@ -2203,7 +2598,7 @@ function CheckboxGroup({
               onChange: () => handleToggle(resolved.value),
               className: cn(
                 sizeClasses6,
-                "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+                "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
                 dirtyRingClasses(dirty),
                 error && "border-red-500"
               )
@@ -2215,7 +2610,7 @@ function CheckboxGroup({
               {
                 htmlFor: optionId,
                 className: cn(
-                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
                   (disabled || resolved.disabled) && "cursor-not-allowed opacity-50"
                 ),
                 children: resolved.label
@@ -2300,7 +2695,7 @@ function RadioGroup({
               onChange: () => setValue(resolved.value),
               className: cn(
                 sizeClasses6,
-                "cursor-pointer border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+                "cursor-pointer border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
                 dirtyRingClasses(dirty),
                 error && "border-red-500"
               )
@@ -2312,7 +2707,7 @@ function RadioGroup({
               {
                 htmlFor: optionId,
                 className: cn(
-                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
                   (disabled || resolved.disabled) && "cursor-not-allowed opacity-50"
                 ),
                 children: resolved.label
@@ -2419,7 +2814,7 @@ var Switch = react.forwardRef(
           className: cn(
             "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             trackSizes,
-            checked ? trackColorMap[color] : "bg-zinc-200 dark:bg-zinc-700",
+            checked ? trackColorMap[color] : "bg-zinc-200 dark:bg-zinc-600",
             dirtyRingClasses(dirty),
             error && "ring-2 ring-red-500/50"
           ),
@@ -2442,7 +2837,7 @@ var Switch = react.forwardRef(
           {
             htmlFor: switchId,
             className: cn(
-              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
               disabled && "cursor-not-allowed opacity-50"
             ),
             children: [
@@ -2744,7 +3139,7 @@ function MultiSwitch({
       role: "radiogroup",
       id,
       className: cn(
-        "relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800",
+        "relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800",
         dirty && "ring-2 ring-amber-400/50",
         error && "ring-2 ring-red-500/50",
         disabled && "opacity-50 cursor-not-allowed",
@@ -3438,7 +3833,7 @@ function EmojiSelect({
       "button",
       {
         type: "button",
-        className: "flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-600",
+        className: "flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24]",
         onClick: () => setOpen(!open),
         children: selected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl", children: selected }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400", children: "Pick emoji" })
       }
@@ -3451,7 +3846,7 @@ function EmojiSelect({
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder,
-          className: "mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm dark:border-zinc-600 dark:bg-zinc-700",
+          className: "mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm transition-[border-color,box-shadow] duration-150 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100",
           autoFocus: true
         }
       ),
@@ -3706,34 +4101,6 @@ var Table = Object.assign(TableRoot, {
   Tray: TableTray,
   RowTray: TableRowTray
 });
-function Portal({ children, container }) {
-  if (typeof document === "undefined") return null;
-  const target = container ?? document.body;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(PortalDarkWrapper, { children }),
-    target
-  );
-}
-function PortalDarkWrapper({ children }) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    const root = document.documentElement;
-    const wrapper = ref.current;
-    if (!wrapper) return;
-    const sync = () => {
-      const isDark = root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
-      wrapper.classList.toggle("dark", isDark);
-    };
-    sync();
-    const observer = new MutationObserver(sync);
-    observer.observe(root, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"]
-    });
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-portal": "", style: { display: "contents" }, children });
-}
 var sizeClasses3 = {
   xs: "text-xs",
   sm: "text-sm",
@@ -4511,42 +4878,66 @@ var Callout = react.forwardRef(
 );
 Callout.displayName = "Callout";
 var TimelineContext = react.createContext({
-  orientation: "vertical",
-  index: 0
+  variant: "stacked",
+  index: 0,
+  total: 0,
+  animated: true
 });
 function useTimeline() {
   return react.useContext(TimelineContext);
 }
 var dotColorClasses2 = {
-  blue: "bg-blue-500 dark:bg-blue-400",
-  green: "bg-green-500 dark:bg-green-400",
-  amber: "bg-amber-500 dark:bg-amber-400",
-  red: "bg-red-500 dark:bg-red-400",
-  zinc: "bg-zinc-400 dark:bg-zinc-500"
-};
-var iconColorClasses2 = {
-  blue: "text-blue-500 dark:text-blue-400",
-  green: "text-green-500 dark:text-green-400",
-  amber: "text-amber-500 dark:text-amber-400",
-  red: "text-red-500 dark:text-red-400",
-  zinc: "text-zinc-500 dark:text-zinc-400"
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500",
+  zinc: "bg-zinc-300 dark:bg-zinc-600"
 };
 var ringColorClasses = {
-  blue: "ring-blue-500/30 dark:ring-blue-400/30",
-  green: "ring-green-500/30 dark:ring-green-400/30",
-  amber: "ring-amber-500/30 dark:ring-amber-400/30",
-  red: "ring-red-500/30 dark:ring-red-400/30",
+  red: "ring-red-500/30",
+  orange: "ring-orange-500/30",
+  amber: "ring-amber-500/30",
+  yellow: "ring-yellow-500/30",
+  lime: "ring-lime-500/30",
+  green: "ring-green-500/30",
+  emerald: "ring-emerald-500/30",
+  teal: "ring-teal-500/30",
+  cyan: "ring-cyan-500/30",
+  sky: "ring-sky-500/30",
+  blue: "ring-blue-500/30",
+  indigo: "ring-indigo-500/30",
+  violet: "ring-violet-500/30",
+  purple: "ring-purple-500/30",
+  fuchsia: "ring-fuchsia-500/30",
+  pink: "ring-pink-500/30",
+  rose: "ring-rose-500/30",
   zinc: "ring-zinc-400/30 dark:ring-zinc-500/30"
 };
-function Dot({ icon, color, active }) {
+function Dot({ icon, emoji, color, active }) {
   const c = color ?? "zinc";
+  if (emoji) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: emoji }) });
+  }
   if (icon) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn(
-          "flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-zinc-900",
-          iconColorClasses2[c],
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white",
+          dotColorClasses2[c],
           active && "ring-4",
           active && ringColorClasses[c]
         ),
@@ -4558,7 +4949,7 @@ function Dot({ icon, color, active }) {
     "span",
     {
       className: cn(
-        "h-3 w-3 rounded-full",
+        "h-3 w-3 shrink-0 rounded-full",
         dotColorClasses2[c],
         active && "ring-4",
         active && ringColorClasses[c]
@@ -4566,32 +4957,83 @@ function Dot({ icon, color, active }) {
     }
   );
 }
+function useIntersectionReveal(animated) {
+  const ref = react.useRef(null);
+  const [visible, setVisible] = react.useState(!animated);
+  react.useEffect(() => {
+    if (!animated || !ref.current) return;
+    const el = ref.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [animated]);
+  return { ref, visible };
+}
 var TimelineItem = react.forwardRef(
-  ({
-    children,
-    icon,
-    color = "zinc",
-    active = false,
-    className
-  }, ref) => {
-    const { orientation, index } = useTimeline();
-    if (orientation === "horizontal") {
-      const isTop = index % 2 === 0;
+  ({ children, icon, emoji, date, color = "zinc", active = false, className }, _ref) => {
+    const { variant, index, total, animated } = useTimeline();
+    const { ref, visible } = useIntersectionReveal(animated);
+    const isLast = index === total - 1;
+    const isLargeDot = !!icon || !!emoji;
+    const isEven = index % 2 === 0;
+    if (variant === "horizontal") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref,
           "data-react-fancy-timeline-item": "",
-          className: cn("relative flex flex-col items-center", className),
-          style: { minWidth: 120 },
+          className: cn(
+            "flex flex-col items-center",
+            !isLast && "min-w-40",
+            animated && "transition duration-500 ease-out",
+            animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+            className
+          ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-[4rem] items-end pb-2", !isTop && "invisible"), children: isTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-center", children }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, color, active }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 w-full items-center", children: [
+              index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, emoji, color, active }),
+              !isLast ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-[4rem] items-start pt-2", isTop && "invisible"), children: !isTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-center", children }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 max-w-40 px-2 text-center", children: [
+              date && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              children
+            ] })
+          ]
+        }
+      );
+    }
+    if (variant === "alternating") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-timeline-item": "",
+          className: cn(
+            "relative flex gap-x-4 md:grid md:grid-cols-[1fr_1.5rem_1fr] md:gap-x-6",
+            animated && "transition duration-500 ease-out",
+            animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex w-8 shrink-0 justify-center md:col-start-2 md:row-start-1 md:w-auto md:justify-center", children: !isLargeDot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, emoji, color, active }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, emoji, color, active }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+              "min-w-0 flex-1",
+              !isLast && "pb-8",
+              isLargeDot && "pt-1",
+              isEven ? "md:col-start-1 md:row-start-1 md:text-right" : "md:col-start-3"
+            ), children: [
+              date && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              children
+            ] })
           ]
         }
       );
@@ -4601,11 +5043,18 @@ var TimelineItem = react.forwardRef(
       {
         ref,
         "data-react-fancy-timeline-item": "",
-        className: cn("relative flex gap-4 pb-8 last:pb-0", className),
+        className: cn(
+          "relative flex gap-x-4",
+          animated && "transition duration-500 ease-out",
+          animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+          className
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-6 bottom-0 w-px bg-zinc-200 last:hidden dark:bg-zinc-700" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex shrink-0 mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, color, active }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pt-0.5", children })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex w-8 shrink-0 justify-center", children: !isLargeDot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, emoji, color, active }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dot, { icon, emoji, color, active }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0 flex-1", !isLast && "pb-8", isLargeDot && "pt-1"), children: [
+            date && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+            children
+          ] })
         ]
       }
     );
@@ -4613,8 +5062,8 @@ var TimelineItem = react.forwardRef(
 );
 TimelineItem.displayName = "TimelineItem";
 var TimelineBlock = react.forwardRef(
-  ({ heading, children, icon, color = "zinc", active = false, className }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(TimelineItem, { icon, color, active, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  ({ heading, children, icon, emoji, color = "zinc", active = false, className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(TimelineItem, { icon, emoji, color, active, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
@@ -4624,117 +5073,75 @@ var TimelineBlock = react.forwardRef(
           active && "ring-2 ring-blue-500/20 dark:ring-blue-400/20",
           className
         ),
-        children: [
-          heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: heading }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children })
-        ]
-      }
-    ) });
-  }
-);
-TimelineBlock.displayName = "TimelineBlock";
-var TimelineRoot = react.forwardRef(
-  ({ children, orientation = "vertical", className }, ref) => {
-    const items = react.Children.toArray(children);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-react-fancy-timeline": "",
-        "data-orientation": orientation,
-        className: cn(
-          orientation === "vertical" ? "flex flex-col" : "flex flex-row items-center overflow-x-auto",
-          className
-        ),
-        children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: { orientation, index: i }, children: child }, i))
-      }
-    );
-  }
-);
-TimelineRoot.displayName = "Timeline";
-var Timeline = Object.assign(TimelineRoot, {
-  Item: TimelineItem,
-  Block: TimelineBlock
-});
-function getPosition(anchor, floating, placement, offset) {
-  let x = 0;
-  let y = 0;
-  const base = placement.split("-")[0];
-  const align = placement.split("-")[1];
-  switch (base) {
-    case "top":
-      x = anchor.left + anchor.width / 2 - floating.width / 2;
-      y = anchor.top - floating.height - offset;
-      break;
-    case "bottom":
-      x = anchor.left + anchor.width / 2 - floating.width / 2;
-      y = anchor.bottom + offset;
-      break;
-    case "left":
-      x = anchor.left - floating.width - offset;
-      y = anchor.top + anchor.height / 2 - floating.height / 2;
-      break;
-    case "right":
-      x = anchor.right + offset;
-      y = anchor.top + anchor.height / 2 - floating.height / 2;
-      break;
-  }
-  if (base === "top" || base === "bottom") {
-    if (align === "start") x = anchor.left;
-    else if (align === "end") x = anchor.right - floating.width;
-  }
-  if (base === "left" || base === "right") {
-    if (align === "start") y = anchor.top;
-    else if (align === "end") y = anchor.bottom - floating.height;
-  }
-  let finalPlacement = placement;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  if (base === "bottom" && y + floating.height > vh) {
-    y = anchor.top - floating.height - offset;
-    finalPlacement = placement.replace("bottom", "top");
-  } else if (base === "top" && y < 0) {
-    y = anchor.bottom + offset;
-    finalPlacement = placement.replace("top", "bottom");
+        children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: heading }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children })
+        ]
+      }
+    ) });
   }
-  x = Math.max(4, Math.min(x, vw - floating.width - 4));
-  y = Math.max(4, Math.min(y, vh - floating.height - 4));
-  return { x, y, placement: finalPlacement };
-}
-function useFloatingPosition(anchorRef, floatingRef, options = {}) {
-  const { placement = "bottom", offset = 8, enabled = true } = options;
-  const [position, setPosition] = react.useState({
-    x: -9999,
-    y: -9999,
-    placement
-  });
-  const update = react.useCallback(() => {
-    const anchor = anchorRef.current;
-    const floating = floatingRef.current;
-    if (!anchor || !floating) return;
-    const anchorRect = anchor.getBoundingClientRect();
-    const floatingRect = floating.getBoundingClientRect();
-    setPosition(getPosition(anchorRect, floatingRect, placement, offset));
-  }, [anchorRef, floatingRef, placement, offset]);
-  react.useLayoutEffect(() => {
-    if (!enabled) return;
-    update();
-    const raf = requestAnimationFrame(() => {
-      update();
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [update, enabled]);
-  react.useEffect(() => {
-    if (!enabled) return;
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [update, enabled]);
-  return position;
-}
+);
+TimelineBlock.displayName = "TimelineBlock";
+var TimelineRoot = react.forwardRef(
+  ({
+    children,
+    variant: variantProp,
+    orientation,
+    events,
+    heading,
+    description,
+    animated = true,
+    className
+  }, ref) => {
+    const scrollRef = react.useRef(null);
+    let variant = variantProp ?? "stacked";
+    if (!variantProp && orientation) {
+      variant = orientation === "horizontal" ? "horizontal" : "stacked";
+    }
+    const isHorizontal = variant === "horizontal";
+    const isAlternating = variant === "alternating";
+    const items = events ? events.map((e, i) => /* @__PURE__ */ jsxRuntime.jsxs(TimelineItem, { date: e.date, emoji: e.emoji, icon: e.icon, color: e.color, children: [
+      e.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-zinc-900 dark:text-white", children: e.title }),
+      e.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400", children: e.description })
+    ] }, i)) : react.Children.toArray(children);
+    const handleWheel = react.useCallback((e) => {
+      if (!scrollRef.current) return;
+      e.preventDefault();
+      scrollRef.current.scrollLeft += e.deltaY;
+    }, []);
+    const content = items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: { variant, index: i, total: items.length, animated }, children: child }, i));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-timeline": "", "data-variant": variant, className, children: [
+      (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+        heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-white", children: heading }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: description })
+      ] }),
+      isHorizontal ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: "overflow-x-auto pb-4 -mb-4",
+          style: { scrollbarWidth: "thin", scrollbarColor: "rgb(161 161 170) transparent" },
+          onWheel: handleWheel,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-max items-start", children: content })
+        }
+      ) : (
+        /* Vertical variants: continuous background line behind all events */
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          items.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+            "absolute top-0 bottom-0 w-px bg-zinc-200 dark:bg-zinc-700",
+            isAlternating ? "left-4 md:left-1/2 md:-translate-x-px" : "left-4"
+          ) }),
+          content
+        ] })
+      )
+    ] });
+  }
+);
+TimelineRoot.displayName = "Timeline";
+var Timeline = Object.assign(TimelineRoot, {
+  Item: TimelineItem,
+  Block: TimelineBlock
+});
 var Tooltip = react.forwardRef(
   function Tooltip2({ children, content, placement = "top", delay = 200, offset = 8, className }, _ref) {
     const [open, setOpen] = react.useState(false);
@@ -4769,7 +5176,7 @@ var Tooltip = react.forwardRef(
           "data-react-fancy-tooltip": "",
           role: "tooltip",
           className: cn(
-            "fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900",
+            "fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100",
             className
           ),
           style: { left: position.x, top: position.y },
@@ -4779,7 +5186,7 @@ var Tooltip = react.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-100",
+                  "absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-700",
                   position.placement.startsWith("top") && "bottom-[-4px] left-1/2 -translate-x-1/2",
                   position.placement.startsWith("bottom") && "top-[-4px] left-1/2 -translate-x-1/2",
                   position.placement.startsWith("left") && "right-[-4px] top-1/2 -translate-y-1/2",
@@ -4802,78 +5209,26 @@ function usePopover() {
   }
   return ctx;
 }
-function PopoverTrigger({ children }) {
-  const { setOpen, open, anchorRef } = usePopover();
-  return react.cloneElement(children, {
-    ref: anchorRef,
-    onClick: () => setOpen(!open),
-    "aria-expanded": open,
-    "aria-haspopup": true
-  });
-}
-PopoverTrigger.displayName = "PopoverTrigger";
-function useOutsideClick(ref, handler, enabled = true, ignoreRef) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const listener = (event) => {
-      const el = ref.current;
-      if (!el || el.contains(event.target)) return;
-      if (ignoreRef?.current?.contains(event.target)) return;
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler, enabled, ignoreRef]);
-}
-function useEscapeKey(handler, enabled = true) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const listener = (event) => {
-      if (event.key === "Escape") {
-        handler();
-      }
-    };
-    document.addEventListener("keydown", listener);
-    return () => document.removeEventListener("keydown", listener);
-  }, [handler, enabled]);
-}
-function useAnimation({
-  open,
-  enterClass,
-  exitClass
-}) {
-  const [mounted, setMounted] = react.useState(open);
-  const [animClass, setAnimClass] = react.useState(open ? enterClass : "");
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (open) {
-      setMounted(true);
-      setAnimClass(enterClass);
-    } else if (mounted) {
-      setAnimClass(exitClass);
-    }
-  }, [open, enterClass, exitClass, mounted]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (!open) {
-      setMounted(false);
-      setAnimClass("");
+function PopoverTrigger({ children, className }) {
+  const { setOpen, open, anchorRef, hover, onHoverEnter, onHoverLeave } = usePopover();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: anchorRef,
+      "data-react-fancy-popover-trigger": "",
+      className: cn("inline-flex", className),
+      onClick: hover ? void 0 : () => setOpen(!open),
+      onMouseEnter: hover ? onHoverEnter : void 0,
+      onMouseLeave: hover ? onHoverLeave : void 0,
+      "aria-expanded": open,
+      "aria-haspopup": true,
+      children
     }
-  }, [open]);
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.addEventListener("animationend", handleAnimationEnd);
-    return () => el.removeEventListener("animationend", handleAnimationEnd);
-  }, [handleAnimationEnd, mounted]);
-  return { mounted, className: animClass, ref };
+  );
 }
+PopoverTrigger.displayName = "PopoverTrigger";
 function PopoverContent({ children, className }) {
-  const { open, setOpen, anchorRef, placement, offset } = usePopover();
-  const floatingRef = react.useRef(null);
+  const { open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave } = usePopover();
   const outsideRef = react.useRef(null);
   const position = useFloatingPosition(anchorRef, floatingRef, {
     placement,
@@ -4881,29 +5236,26 @@ function PopoverContent({ children, className }) {
     enabled: open
   });
   const close = react.useCallback(() => setOpen(false), [setOpen]);
-  useOutsideClick(outsideRef, close, open, anchorRef);
+  useOutsideClick(outsideRef, close, open && !hover, anchorRef);
   useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = useAnimation({
-    open,
-    enterClass: "fancy-scale-in",
-    exitClass: "fancy-fade-out"
-  });
-  if (!mounted) return null;
+  const positioned = position.x !== -9999 && position.y !== -9999;
+  if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: (node) => {
         outsideRef.current = node;
         floatingRef.current = node;
-        animRef.current = node;
       },
       "data-react-fancy-popover": "",
       className: cn(
         "fixed z-50 rounded-xl border border-zinc-200 bg-white p-4 text-zinc-700 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:shadow-zinc-950/50",
-        animClass,
+        positioned ? "fancy-scale-in" : "invisible",
         className
       ),
       style: { left: position.x, top: position.y },
+      onMouseEnter: hover ? onHoverEnter : void 0,
+      onMouseLeave: hover ? onHoverLeave : void 0,
       children
     }
   ) });
@@ -4915,17 +5267,37 @@ function PopoverRoot({
   defaultOpen = false,
   onOpenChange,
   placement = "bottom",
-  offset = 8
+  offset = 8,
+  hover = false,
+  hoverDelay = 200,
+  hoverCloseDelay = 300
 }) {
-  const [open, setOpen] = useControllableState(
-    controlledOpen,
-    defaultOpen,
-    onOpenChange
-  );
+  const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
   const anchorRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const hoverTimeoutRef = react.useRef(void 0);
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const onHoverEnter = react.useCallback(() => {
+    if (!hover) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setOpen(true), hoverDelay);
+  }, [hover, hoverDelay, setOpen]);
+  const onHoverLeave = react.useCallback(() => {
+    if (!hover) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hover, hoverCloseDelay, setOpen]);
   const ctx = react.useMemo(
-    () => ({ open, setOpen, anchorRef, placement, offset }),
-    [open, setOpen, anchorRef, placement, offset]
+    () => ({ open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave }),
+    [open, setOpen, placement, offset, hover, onHoverEnter, onHoverLeave]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: ctx, children });
 }
@@ -4953,6 +5325,36 @@ function DropdownTrigger({ children }) {
   });
 }
 DropdownTrigger.displayName = "DropdownTrigger";
+function useAnimation({
+  open,
+  enterClass,
+  exitClass
+}) {
+  const [mounted, setMounted] = react.useState(open);
+  const [animClass, setAnimClass] = react.useState(open ? enterClass : "");
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setAnimClass(enterClass);
+    } else if (mounted) {
+      setAnimClass(exitClass);
+    }
+  }, [open, enterClass, exitClass, mounted]);
+  const handleAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      setMounted(false);
+      setAnimClass("");
+    }
+  }, [open]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener("animationend", handleAnimationEnd);
+    return () => el.removeEventListener("animationend", handleAnimationEnd);
+  }, [handleAnimationEnd, mounted]);
+  return { mounted, className: animClass, ref };
+}
 function DropdownItems({ children, className }) {
   const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } = useDropdown();
   const floatingRef = react.useRef(null);
@@ -6271,7 +6673,7 @@ var Autocomplete = react.forwardRef(
           role: "combobox",
           "aria-expanded": open,
           "aria-autocomplete": "list",
-          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none transition-colors focus:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-zinc-500"
+          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-blue-400 dark:focus:ring-blue-400/20"
         }
       ),
       open && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6365,7 +6767,7 @@ var Pillbox = react.forwardRef(
         "data-react-fancy-pillbox": "",
         ref,
         className: cn(
-          "flex flex-wrap items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-2 transition-colors focus-within:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:focus-within:border-zinc-500",
+          "flex flex-wrap items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -6496,7 +6898,7 @@ var OtpInput = react.forwardRef(
         onFocus: (e) => e.target.select(),
         disabled,
         autoFocus: autoFocus && i === 0,
-        className: "h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium outline-none transition-colors focus:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:focus:border-zinc-500",
+        className: "h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium text-zinc-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20",
         "aria-label": `Digit ${i + 1}`
       },
       i
@@ -6545,7 +6947,7 @@ function FileUploadDropzone({
       onClick: () => !disabled && inputRef.current?.click(),
       className: cn(
         "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 text-center transition-colors",
-        dragOver ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-950" : "border-zinc-300 hover:border-zinc-400 dark:border-zinc-600 dark:hover:border-zinc-500",
+        dragOver ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-950" : "border-zinc-300 hover:border-zinc-400 dark:border-zinc-700 dark:hover:border-zinc-500",
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
@@ -7905,6 +8307,7 @@ function usePanZoom({
     if (!container) return;
     function handleWheel(e) {
       if (!zoomableRef.current) return;
+      if (!e.ctrlKey && !e.metaKey) return;
       e.preventDefault();
       const rect = container.getBoundingClientRect();
       const mouseX = e.clientX - rect.left;
@@ -9097,9 +9500,11 @@ function useCanvas() {
   if (!ctx) throw new Error("useCanvas must be used within a Canvas component");
   return ctx;
 }
-function CanvasNode({ children, id, x, y, className, style }) {
-  const { registerNode, unregisterNode } = useCanvas();
+function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
+  const { registerNode, unregisterNode, viewport } = useCanvas();
   const nodeRef = react.useRef(null);
+  const isDragging = react.useRef(false);
+  const dragStart = react.useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
   react.useEffect(() => {
     const el = nodeRef.current;
     if (!el) return;
@@ -9114,14 +9519,39 @@ function CanvasNode({ children, id, x, y, className, style }) {
       unregisterNode(id);
     };
   }, [id, x, y, registerNode, unregisterNode]);
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      if (!draggable || e.button !== 0) return;
+      e.stopPropagation();
+      isDragging.current = true;
+      dragStart.current = { mouseX: e.clientX, mouseY: e.clientY, nodeX: x, nodeY: y };
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [draggable, x, y]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!isDragging.current) return;
+      const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
+      const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
+      onPositionChange?.(dragStart.current.nodeX + dx, dragStart.current.nodeY + dy);
+    },
+    [viewport.zoom, onPositionChange]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    isDragging.current = false;
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: nodeRef,
       "data-react-fancy-canvas-node": "",
       "data-node-id": id,
-      className: cn("absolute", className),
+      className: cn("absolute", draggable && "cursor-grab active:cursor-grabbing", className),
       style: { left: x, top: y, ...style },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       children
     }
   );
@@ -9158,10 +9588,18 @@ function getAnchorPoint(rect, anchor, otherRect) {
   }
 }
 function bezierPath(from, to) {
-  const dx = Math.abs(to.x - from.x) * 0.5;
-  const cp1x = from.x + (to.x > from.x ? dx : -dx);
-  const cp2x = to.x + (to.x > from.x ? -dx : dx);
-  return `M${from.x},${from.y} C${cp1x},${from.y} ${cp2x},${to.y} ${to.x},${to.y}`;
+  const dx = Math.abs(to.x - from.x);
+  const dy = Math.abs(to.y - from.y);
+  if (dx > dy) {
+    const offset2 = dx * 0.5;
+    const cp1x = from.x + (to.x > from.x ? offset2 : -offset2);
+    const cp2x = to.x + (to.x > from.x ? -offset2 : offset2);
+    return `M${from.x},${from.y} C${cp1x},${from.y} ${cp2x},${to.y} ${to.x},${to.y}`;
+  }
+  const offset = Math.max(dy * 0.5, 30);
+  const cp1y = from.y + (to.y > from.y ? offset : -offset);
+  const cp2y = to.y + (to.y > from.y ? -offset : offset);
+  return `M${from.x},${from.y} C${from.x},${cp1y} ${to.x},${cp2y} ${to.x},${to.y}`;
 }
 function stepPath(from, to) {
   const midX = (from.x + to.x) / 2;
@@ -9346,6 +9784,7 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  fitOnMount = false,
   className,
   style
 }) {
@@ -9365,15 +9804,41 @@ function CanvasRoot({
     () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef }),
     [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion]
   );
+  const hasFitted = react.useRef(false);
+  react.useEffect(() => {
+    if (!fitOnMount || hasFitted.current || nodeRects.size === 0) return;
+    const container = containerRef.current;
+    if (!container || container.clientWidth === 0) return;
+    hasFitted.current = true;
+    requestAnimationFrame(() => {
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      nodeRects.forEach((r) => {
+        minX = Math.min(minX, r.x);
+        minY = Math.min(minY, r.y);
+        maxX = Math.max(maxX, r.x + r.width);
+        maxY = Math.max(maxY, r.y + r.height);
+      });
+      const padding = 40;
+      const contentW = maxX - minX + padding * 2;
+      const contentH = maxY - minY + padding * 2;
+      const cw = container.clientWidth;
+      const ch = container.clientHeight;
+      const zoom = Math.min(cw / contentW, ch / contentH, 1.5);
+      const panX = (cw - contentW * zoom) / 2 - minX * zoom + padding * zoom;
+      const panY = (ch - contentH * zoom) / 2 - minY * zoom + padding * zoom;
+      setViewport({ panX, panY, zoom });
+    });
+  }, [fitOnMount, nodeRects, registryVersion, setViewport]);
   const edges = [];
   const others = [];
   const overlays = [];
   react.Children.forEach(children, (child) => {
     const el = child;
     if (!el || !el.type) return;
-    if (el.type === CanvasEdge) {
+    const elType = el.type;
+    if (elType === CanvasEdge || elType?._isCanvasEdge) {
       edges.push(el);
-    } else if (el.type === CanvasMinimap || el.type === CanvasControls) {
+    } else if (elType === CanvasMinimap || elType === CanvasControls) {
       overlays.push(el);
     } else {
       others.push(el);
@@ -9420,15 +9885,16 @@ function CanvasRoot({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-arrow", viewBox: "0 0 10 10", refX: "10", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 Z", fill: "currentColor", className: "text-zinc-400 dark:text-zinc-500" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-circle", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "5", r: "3.5", fill: "currentColor", className: "text-zinc-400 dark:text-zinc-500" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-square", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1.5", y: "1.5", width: "7", height: "7", fill: "currentColor", className: "text-zinc-400 dark:text-zinc-500" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("marker", { id: "canvas-crow-foot", viewBox: "0 0 12 12", refX: "12", refY: "6", markerWidth: "10", markerHeight: "10", orient: "auto-start-reverse", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "0", x2: "12", y2: "6", stroke: "currentColor", strokeWidth: "1.5", className: "text-zinc-400 dark:text-zinc-500" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "12", x2: "12", y2: "6", stroke: "currentColor", strokeWidth: "1.5", className: "text-zinc-400 dark:text-zinc-500" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "6", x2: "12", y2: "6", stroke: "currentColor", strokeWidth: "1.5", className: "text-zinc-400 dark:text-zinc-500" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-diamond", viewBox: "0 0 12 12", refX: "6", refY: "6", markerWidth: "10", markerHeight: "10", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "6,0 12,6 6,12 0,6", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: "text-zinc-400 dark:text-zinc-500" }) })
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-arrow", viewBox: "0 0 10 10", refX: "10", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 Z", fill: "#71717a" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-circle", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "5", r: "3.5", fill: "#71717a" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-diamond", viewBox: "0 0 12 12", refX: "6", refY: "6", markerWidth: "10", markerHeight: "10", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "6,0 12,6 6,12 0,6", fill: "none", stroke: "#71717a", strokeWidth: "1.5" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-one", viewBox: "0 0 2 16", refX: "1", refY: "8", markerWidth: "2", markerHeight: "14", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "0", x2: "1", y2: "16", stroke: "#71717a", strokeWidth: "2" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("marker", { id: "canvas-crow-foot", viewBox: "0 0 16 16", refX: "16", refY: "8", markerWidth: "14", markerHeight: "14", orient: "auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "0", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "8", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "16", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "0", x2: "16", y2: "16", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" })
+                ] })
               ] }),
               edges
             ]
@@ -9486,13 +9952,16 @@ function DiagramField({
 DiagramField.displayName = "DiagramField";
 function DiagramEntity({
   children,
-  id,
+  id: idProp,
   name,
   x = 0,
   y = 0,
   color = "bg-blue-600 dark:bg-blue-500",
+  draggable,
+  onPositionChange,
   className
 }) {
+  const id = idProp ?? name;
   const fields = [];
   const other = [];
   react.Children.forEach(children, (child) => {
@@ -9504,7 +9973,7 @@ function DiagramEntity({
       other.push(el);
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Canvas.Node, { id, x, y, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Canvas.Node, { id, x, y, draggable, onPositionChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-react-fancy-diagram-entity": "",
@@ -9531,37 +10000,193 @@ function DiagramEntity({
   ) });
 }
 DiagramEntity.displayName = "DiagramEntity";
-function getMarkers(type) {
-  switch (type) {
-    case "one-to-one":
-      return { markerStart: "canvas-arrow", markerEnd: "canvas-arrow" };
-    case "one-to-many":
-      return { markerStart: "canvas-arrow", markerEnd: "canvas-crow-foot" };
-    case "many-to-many":
-      return { markerStart: "canvas-crow-foot", markerEnd: "canvas-crow-foot" };
+var HEADER_HEIGHT = 36;
+var FIELD_HEIGHT = 28;
+var SYMBOL_SIZE = 12;
+function oneSymbol(pt, direction) {
+  const s = SYMBOL_SIZE * 0.6;
+  switch (direction) {
+    case "left":
+    case "right":
+      return `M${pt.x},${pt.y - s} L${pt.x},${pt.y + s}`;
+    case "up":
+    case "down":
+      return `M${pt.x - s},${pt.y} L${pt.x + s},${pt.y}`;
   }
 }
+function crowFootSymbol(pt, direction) {
+  const s = SYMBOL_SIZE;
+  const spread = s * 0.8;
+  let tip;
+  switch (direction) {
+    case "right":
+      tip = { x: pt.x - s, y: pt.y };
+      return [
+        `M${pt.x},${pt.y - spread} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y + spread} L${tip.x},${tip.y}`,
+        // bar at entity edge
+        `M${pt.x},${pt.y - spread} L${pt.x},${pt.y + spread}`
+      ].join(" ");
+    case "left":
+      tip = { x: pt.x + s, y: pt.y };
+      return [
+        `M${pt.x},${pt.y - spread} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y + spread} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y - spread} L${pt.x},${pt.y + spread}`
+      ].join(" ");
+    case "down":
+      tip = { x: pt.x, y: pt.y - s };
+      return [
+        `M${pt.x - spread},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x + spread},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x - spread},${pt.y} L${pt.x + spread},${pt.y}`
+      ].join(" ");
+    case "up":
+      tip = { x: pt.x, y: pt.y + s };
+      return [
+        `M${pt.x - spread},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x + spread},${pt.y} L${tip.x},${tip.y}`,
+        `M${pt.x - spread},${pt.y} L${pt.x + spread},${pt.y}`
+      ].join(" ");
+  }
+}
+function getSymbolPath(type, end, pt, direction) {
+  const side = end === "start" ? type.split("-to-")[0] : type.split("-to-")[1];
+  if (side === "one") return oneSymbol(pt, direction);
+  if (side === "many") return crowFootSymbol(pt, direction);
+  return null;
+}
 function DiagramRelation({
   from,
   to,
+  fromField: fromFieldProp,
+  toField: toFieldProp,
   type,
-  label,
-  className
+  label
 }) {
-  const markers = getMarkers(type);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Canvas.Edge,
-    {
-      from,
-      to,
-      curve: "bezier",
-      markerStart: markers.markerStart,
-      markerEnd: markers.markerEnd,
-      label,
-      className: cn("text-zinc-300 dark:text-zinc-600", className)
+  const { nodeRects, registryVersion } = useCanvas();
+  const { schema } = useDiagram();
+  const result = react.useMemo(() => {
+    const fromRect = nodeRects.get(from);
+    const toRect = nodeRects.get(to);
+    if (!fromRect || !toRect) return null;
+    const fromEntity = schema.entities.find((e) => (e.id ?? e.name) === from);
+    const toEntity = schema.entities.find((e) => (e.id ?? e.name) === to);
+    let fromFieldIdx = -1;
+    let toFieldIdx = -1;
+    if (fromFieldProp && fromEntity?.fields) {
+      fromFieldIdx = fromEntity.fields.findIndex((f) => f.name === fromFieldProp);
+    } else if (fromEntity?.fields) {
+      fromFieldIdx = fromEntity.fields.findIndex((f) => f.primary);
     }
-  );
+    if (toFieldProp && toEntity?.fields) {
+      toFieldIdx = toEntity.fields.findIndex((f) => f.name === toFieldProp);
+    } else if (toEntity?.fields) {
+      const fromName = (fromEntity?.name ?? from).toLowerCase();
+      toFieldIdx = toEntity.fields.findIndex(
+        (f) => f.foreign && (f.name === `${fromName}_id` || f.name === `${fromName}Id`)
+      );
+      if (toFieldIdx === -1) {
+        toFieldIdx = toEntity.fields.findIndex((f) => f.foreign);
+      }
+    }
+    const fromFieldY = fromFieldIdx >= 0 ? HEADER_HEIGHT + fromFieldIdx * FIELD_HEIGHT + FIELD_HEIGHT / 2 : fromRect.height / 2;
+    const toFieldY = toFieldIdx >= 0 ? HEADER_HEIGHT + toFieldIdx * FIELD_HEIGHT + FIELD_HEIGHT / 2 : toRect.height / 2;
+    const fromCx = fromRect.x + fromRect.width / 2;
+    const toCx = toRect.x + toRect.width / 2;
+    const fromCy = fromRect.y + fromRect.height / 2;
+    const toCy = toRect.y + toRect.height / 2;
+    const dx = Math.abs(fromCx - toCx);
+    const dy = Math.abs(fromCy - toCy);
+    let fromPt, toPt;
+    let fromDir;
+    let toDir;
+    if (dx > dy * 0.5) {
+      if (fromCx < toCx) {
+        fromPt = { x: fromRect.x + fromRect.width, y: fromRect.y + fromFieldY };
+        toPt = { x: toRect.x, y: toRect.y + toFieldY };
+        fromDir = "right";
+        toDir = "left";
+      } else {
+        fromPt = { x: fromRect.x, y: fromRect.y + fromFieldY };
+        toPt = { x: toRect.x + toRect.width, y: toRect.y + toFieldY };
+        fromDir = "left";
+        toDir = "right";
+      }
+    } else {
+      if (fromCy < toCy) {
+        fromPt = { x: fromRect.x + fromRect.width / 2, y: fromRect.y + fromRect.height };
+        toPt = { x: toRect.x + toRect.width / 2, y: toRect.y };
+        fromDir = "down";
+        toDir = "up";
+      } else {
+        fromPt = { x: fromRect.x + fromRect.width / 2, y: fromRect.y };
+        toPt = { x: toRect.x + toRect.width / 2, y: toRect.y + toRect.height };
+        fromDir = "up";
+        toDir = "down";
+      }
+    }
+    const offsetFrom = { ...fromPt };
+    const offsetTo = { ...toPt };
+    switch (fromDir) {
+      case "right":
+        offsetFrom.x += SYMBOL_SIZE;
+        break;
+      case "left":
+        offsetFrom.x -= SYMBOL_SIZE;
+        break;
+      case "down":
+        offsetFrom.y += SYMBOL_SIZE;
+        break;
+      case "up":
+        offsetFrom.y -= SYMBOL_SIZE;
+        break;
+    }
+    switch (toDir) {
+      case "right":
+        offsetTo.x += SYMBOL_SIZE;
+        break;
+      case "left":
+        offsetTo.x -= SYMBOL_SIZE;
+        break;
+      case "down":
+        offsetTo.y += SYMBOL_SIZE;
+        break;
+      case "up":
+        offsetTo.y -= SYMBOL_SIZE;
+        break;
+    }
+    const adx = Math.abs(offsetTo.x - offsetFrom.x);
+    const ady = Math.abs(offsetTo.y - offsetFrom.y);
+    let linePath;
+    if (adx > ady) {
+      const off = adx * 0.4;
+      const cp1x = offsetFrom.x + (offsetTo.x > offsetFrom.x ? off : -off);
+      const cp2x = offsetTo.x + (offsetTo.x > offsetFrom.x ? -off : off);
+      linePath = `M${offsetFrom.x},${offsetFrom.y} C${cp1x},${offsetFrom.y} ${cp2x},${offsetTo.y} ${offsetTo.x},${offsetTo.y}`;
+    } else {
+      const off = Math.max(ady * 0.4, 20);
+      const cp1y = offsetFrom.y + (offsetTo.y > offsetFrom.y ? off : -off);
+      const cp2y = offsetTo.y + (offsetTo.y > offsetFrom.y ? -off : off);
+      linePath = `M${offsetFrom.x},${offsetFrom.y} C${offsetFrom.x},${cp1y} ${offsetTo.x},${cp2y} ${offsetTo.x},${offsetTo.y}`;
+    }
+    const startSymbol = getSymbolPath(type, "start", fromPt, fromDir);
+    const endSymbol = getSymbolPath(type, "end", toPt, toDir);
+    return { linePath, startSymbol, endSymbol, midX: (offsetFrom.x + offsetTo.x) / 2, midY: (offsetFrom.y + offsetTo.y) / 2 };
+  }, [from, to, fromFieldProp, toFieldProp, type, schema, nodeRects, registryVersion]);
+  if (!result) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-react-fancy-diagram-relation": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: result.linePath, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
+    result.startSymbol && /* @__PURE__ */ jsxRuntime.jsx("path", { d: result.startSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
+    result.endSymbol && /* @__PURE__ */ jsxRuntime.jsx("path", { d: result.endSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("foreignObject", { x: result.midX - 40, y: result.midY - 12, width: 80, height: 24, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: label }) })
+  ] });
 }
+DiagramRelation._isCanvasEdge = true;
 DiagramRelation.displayName = "DiagramRelation";
 var FORMAT_LABELS = {
   erd: "ERD",
@@ -9672,12 +10297,12 @@ DiagramToolbar.displayName = "DiagramToolbar";
 
 // src/components/Diagram/diagram.layout.ts
 var ENTITY_WIDTH = 220;
-var HEADER_HEIGHT = 40;
-var FIELD_HEIGHT = 28;
+var HEADER_HEIGHT2 = 40;
+var FIELD_HEIGHT2 = 28;
 var HORIZONTAL_GAP = 80;
 var VERTICAL_GAP = 60;
 function getEntityHeight(fieldCount) {
-  return HEADER_HEIGHT + Math.max(fieldCount, 1) * FIELD_HEIGHT;
+  return HEADER_HEIGHT2 + Math.max(fieldCount, 1) * FIELD_HEIGHT2;
 }
 function computeDiagramLayout(schema) {
   const positions = /* @__PURE__ */ new Map();
@@ -9780,58 +10405,103 @@ function DiagramRoot({
 }) {
   const downloadableRef = react.useRef(downloadable);
   const importableRef = react.useRef(importable);
-  const resolvedSchema = react.useMemo(() => {
+  const normalizedSchema = react.useMemo(() => {
     if (!schema) return { entities: [], relations: [] };
-    const layout = computeDiagramLayout(schema);
-    const entities = schema.entities.map((entity) => {
-      if (entity.x !== void 0 && entity.y !== void 0) return entity;
-      const pos = layout.get(entity.id);
-      return pos ? { ...entity, x: pos.x, y: pos.y } : entity;
-    });
-    return { entities, relations: schema.relations };
+    const entities = schema.entities.map((e) => ({
+      ...e,
+      id: e.id ?? e.name
+    }));
+    const relations = schema.relations.map((r, i) => ({
+      ...r,
+      id: r.id ?? `rel-${i}`
+    }));
+    return { entities, relations };
   }, [schema]);
+  const initialPositions = react.useMemo(() => {
+    if (normalizedSchema.entities.length === 0) return /* @__PURE__ */ new Map();
+    const layout = computeDiagramLayout(normalizedSchema);
+    const positions = /* @__PURE__ */ new Map();
+    for (const entity of normalizedSchema.entities) {
+      if (entity.x !== void 0 && entity.y !== void 0) {
+        positions.set(entity.id, { x: entity.x, y: entity.y });
+      } else {
+        const pos = layout.get(entity.id);
+        positions.set(entity.id, pos ?? { x: 0, y: 0 });
+      }
+    }
+    return positions;
+  }, [normalizedSchema]);
+  const computedDefaultViewport = react.useMemo(() => {
+    if (defaultViewport) return defaultViewport;
+    if (initialPositions.size === 0) return { panX: 0, panY: 0, zoom: 1 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    initialPositions.forEach((pos) => {
+      minX = Math.min(minX, pos.x);
+      minY = Math.min(minY, pos.y);
+      maxX = Math.max(maxX, pos.x + 220);
+      maxY = Math.max(maxY, pos.y + 200);
+    });
+    const padding = 40;
+    const panX = -minX + padding;
+    const panY = -minY + padding;
+    return { panX, panY, zoom: 1 };
+  }, [defaultViewport, initialPositions]);
+  const [entityPositions, setEntityPositions] = react.useState(initialPositions);
+  const handleEntityMove = react.useCallback((entityId, x, y) => {
+    setEntityPositions((prev) => {
+      const next = new Map(prev);
+      next.set(entityId, { x, y });
+      return next;
+    });
+  }, []);
   const ctx = react.useMemo(
     () => ({
       diagramType: type,
-      schema: resolvedSchema,
+      schema: normalizedSchema,
       downloadableRef,
       importableRef,
       exportFormats,
       onImport
     }),
-    [type, resolvedSchema, exportFormats, onImport]
+    [type, normalizedSchema, exportFormats, onImport]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DiagramContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-diagram": "", className: "relative h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
     Canvas,
     {
       viewport,
-      defaultViewport,
+      defaultViewport: computedDefaultViewport,
       onViewportChange,
       showGrid: true,
+      fitOnMount: true,
       className: cn("h-full w-full", className),
       children: [
-        resolvedSchema.entities.map((entity) => /* @__PURE__ */ jsxRuntime.jsx(
-          DiagramEntity,
-          {
-            id: entity.id,
-            name: entity.name,
-            x: entity.x ?? 0,
-            y: entity.y ?? 0,
-            children: entity.fields?.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-              DiagramField,
-              {
-                name: field.name,
-                type: field.type,
-                primary: field.primary,
-                foreign: field.foreign,
-                nullable: field.nullable
-              },
-              field.name
-            ))
-          },
-          entity.id
-        )),
-        resolvedSchema.relations.map((rel) => /* @__PURE__ */ jsxRuntime.jsx(
+        normalizedSchema.entities.map((entity) => {
+          const pos = entityPositions.get(entity.id) ?? { x: 0, y: 0 };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            DiagramEntity,
+            {
+              id: entity.id,
+              name: entity.name,
+              x: pos.x,
+              y: pos.y,
+              draggable: true,
+              onPositionChange: (nx, ny) => handleEntityMove(entity.id, nx, ny),
+              children: entity.fields?.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                DiagramField,
+                {
+                  name: field.name,
+                  type: field.type,
+                  primary: field.primary,
+                  foreign: field.foreign,
+                  nullable: field.nullable
+                },
+                field.name
+              ))
+            },
+            entity.id
+          );
+        }),
+        normalizedSchema.relations.map((rel) => /* @__PURE__ */ jsxRuntime.jsx(
           DiagramRelation,
           {
             from: rel.from,