@particle-academy/react-fancy 1.5.0 → 1.6.1

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,
@@ -2116,7 +2100,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 +2112,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 +2187,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 +2199,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 +2284,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 +2296,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 +2403,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 +2426,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 +2728,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 +3422,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 +3435,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
         }
       ),
@@ -4511,42 +4495,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 +4566,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 +4574,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 +4660,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 +4679,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,
@@ -4634,21 +4700,58 @@ var TimelineBlock = react.forwardRef(
 );
 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))
-      }
-    );
+  ({
+    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";
@@ -4769,7 +4872,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 +4882,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",
@@ -6271,7 +6374,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 +6468,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 +6599,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 +6648,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 +8008,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 +9201,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 +9220,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 +9289,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 +9485,7 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  fitOnMount = false,
   className,
   style
 }) {
@@ -9365,15 +9505,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 +9586,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 +9653,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 +9674,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 +9701,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 +9998,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 +10106,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,