react-os-shell 0.9.0 → 0.11.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { W as WindowRegistry } from './types-D_4ifuf-.js';
-export { M as ModalRegistryEntry, P as PageRegistryEntry, a as WindowRegistryEntry, i as isEntityEntry, b as isPageEntry, s as setShellWindowRegistry } from './types-D_4ifuf-.js';
+import { W as WindowRegistry } from './types-BYiS2cc8.js';
+export { M as ModalRegistryEntry, P as PageRegistryEntry, a as WindowRegistryEntry, i as isEntityEntry, b as isPageEntry, s as setShellWindowRegistry } from './types-BYiS2cc8.js';
 import * as react from 'react';
 import react__default, { ReactNode, CSSProperties, Dispatch, SetStateAction, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -200,6 +200,10 @@ interface ModalProps {
      *  self-chromed apps like Preview, Files, Browser. Implies `bodyScroll: false`
      *  — apps manage their own scrolling internally. */
     appStyle?: boolean;
+    /** Flush body: keeps the STANDARD full title bar and footer, but drops the
+     *  body padding so the content sits flush to the window edges (e.g. a
+     *  `<SidebarLayout>`). Implies `bodyScroll: false`. */
+    flushBody?: boolean;
     /** Auto-size height based on content. Window's height adapts to whatever the
      *  body renders; combined with `autoMinHeight` to prevent collapse and capped
      *  to the available viewport so nothing overflows the screen. Only set this
@@ -232,7 +236,7 @@ declare function setExposeHighlight(id: string | null): void;
  */
 declare function commitExposeHighlight(): void;
 
-declare function Modal({ open, onClose, title, icon, copyText, size, dirty, onNext, onPrev, footer, bodyScroll, onMinimize, initialBox, actions, actionsLeft, allowPinOnTop, initialPosition, widget, compact, appStyle, autoHeight, autoMinHeight, widgetMenu, dimensions, windowKey, openedFromKey, children }: ModalProps): react.ReactPortal | null;
+declare function Modal({ open, onClose, title, icon, copyText, size, dirty, onNext, onPrev, footer, bodyScroll, onMinimize, initialBox, actions, actionsLeft, allowPinOnTop, initialPosition, widget, compact, appStyle, flushBody, autoHeight, autoMinHeight, widgetMenu, dimensions, windowKey, openedFromKey, children }: ModalProps): react.ReactPortal | null;
 
 /**
  * Unified popup menu component — used for all context menus, dropdowns, and flyouts.
@@ -450,6 +454,45 @@ interface EditableGridProps {
  */
 declare function EditableGrid({ columns, data, onChange, onColumnsChange, fixedRows, minRows, maxHeight, cellStyles, onFocusChange, onSelectionChange }: EditableGridProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Two-pane layout with a drag-to-resize left sidebar.
+ *
+ * Renders flush (`h-full w-full`) — pair it with a `flushBody` window so the
+ * sidebar runs from just under the title bar to the very bottom with no
+ * surrounding padding. The user can drag the right edge of the sidebar to
+ * resize it; pass `storageKey` to persist that width across reopens, or
+ * double-click the handle to reset to `defaultWidth`.
+ *
+ * @example
+ * <SidebarLayout sidebar={<MyNav />} storageKey="todo.sidebarWidth">
+ *   <MyContent />
+ * </SidebarLayout>
+ */
+interface SidebarLayoutProps {
+    /** Content of the left sidebar pane. */
+    sidebar: ReactNode;
+    /** Content of the main pane (right of the sidebar). */
+    children: ReactNode;
+    /** localStorage key to persist the sidebar width across reopens. When set,
+     *  the last dragged width is restored on mount. Omit for session-only width. */
+    storageKey?: string;
+    /** Initial sidebar width in px (used when nothing is persisted). Default 256. */
+    defaultWidth?: number;
+    /** Minimum sidebar width in px. Default 180. */
+    minWidth?: number;
+    /** Maximum sidebar width in px. Default 480. */
+    maxWidth?: number;
+    /** Extra classes for the outer flex row. */
+    className?: string;
+    /** Classes for the sidebar pane (background, border, …). The pane is a flex
+     *  column that scrolls its own overflow. Defaults to a light-grey,
+     *  right-bordered sidebar. */
+    sidebarClassName?: string;
+    /** Classes for the main content pane. Defaults to a white background. */
+    contentClassName?: string;
+}
+declare function SidebarLayout({ sidebar, children, storageKey, defaultWidth, minWidth, maxWidth, className, sidebarClassName, contentClassName, }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+
 /** Generic notification shape consumed by the shell. Consumer-specific
  * fields live on `extra` (or just on additional properties — TS structural
  * typing is permissive). */
@@ -1025,15 +1068,19 @@ declare function EntityList<T>(props: EntityListProps<T>): react_jsx_runtime.JSX
  * library) and styled with the same Tailwind utilities + `grid-scroll` class the
  * shell already ships, so consumers get it for free.
  *
- * Group items into columns with `columnOf`, render each card with `renderCard`,
- * and handle moves with `onMove(id, toColumn)`. Drops only change a card's
- * column; within-column order is presentational (optionally via `sortInColumn`).
+ * Group items into columns with `columnOf`, render each card with `renderCard`.
+ * Cards can be dragged **between** columns (to change which column they belong
+ * to) and **within** a column (to reorder / prioritise). On drop, `onMove(id,
+ * toColumn, toIndex)` fires — `toIndex` is the target position within `toColumn`
+ * measured against that column's cards *excluding* the dragged one, so the
+ * consumer can persist an order (e.g. midpoint between neighbours) that every
+ * user then sees. Sort each column by that order via `sortInColumn`.
  *
- * Drag affordance: as a card is dragged over a *different* column, the cards at
- * and below the hovered position slide down (CSS transform transition) to open a
- * gap the size of the dragged card, and the column highlights. The dragged card
- * is dimmed. Insertion index tracks `dragenter` (once per card crossed) rather
- * than `dragover` (every few ms) so the gap stays stable instead of oscillating.
+ * Affordance: a blue **drop-line** shows exactly where the card will land
+ * (between two cards, in either the source or a different column), and the
+ * target column highlights. The dragged card dims. The insertion point tracks
+ * `dragenter` (once per card crossed) so the line stays stable rather than
+ * flickering.
  */
 interface KanbanColumn {
     /** Stable column key — what `columnOf` returns and `onMove` receives. */
@@ -1049,12 +1096,17 @@ interface KanbanProps<T> {
     columns: KanbanColumn[];
     columnOf: (item: T) => string;
     getId: (item: T) => string;
-    /** Called when a card is dropped on a column (its own `value`). */
-    onMove: (id: string, toColumn: string) => void;
+    /**
+     * Fired on drop. `toColumn` is the destination column's `value`; `toIndex` is
+     * the target position within that column measured against its cards
+     * **excluding** the dragged card (0 = top). A same-column drop that wouldn't
+     * change the order is not reported.
+     */
+    onMove: (id: string, toColumn: string, toIndex: number) => void;
     /** Inner card content — the card chrome (border, padding, hover) is provided. */
     renderCard: (item: T) => ReactNode;
     onCardClick?: (item: T) => void;
-    /** Optional comparator for ordering within a column. */
+    /** Comparator for ordering within a column — sort by the persisted order field. */
     sortInColumn?: (a: T, b: T) => number;
     isLoading?: boolean;
     loadingText?: string;
@@ -1381,4 +1433,4 @@ declare function useNewHotkey(callback: () => void): void;
  */
 declare function useEditHotkey(callback: (() => void) | null): void;
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, DEV_BANNER_TEXT, Desktop, type DesktopHostConfig, DesktopHostProvider, DevIndicator, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, HelpCenter, type HelpCenterDoc, type HelpCenterProps, Kanban, type KanbanColumn, type KanbanProps, Layout, type LayoutProps, ListFooter, MOD, Markdown, type MarkdownProps, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, type TodoProvider, type TodoTask, VERSION, WidgetManager, WindowManagerProvider, WindowRegistry, WindowTitle, applyDevTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, getWindowPosition, glassStyle, isDevEnv, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellNavIcons, setShellTodoProvider, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, DEV_BANNER_TEXT, Desktop, type DesktopHostConfig, DesktopHostProvider, DevIndicator, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, HelpCenter, type HelpCenterDoc, type HelpCenterProps, Kanban, type KanbanColumn, type KanbanProps, Layout, type LayoutProps, ListFooter, MOD, Markdown, type MarkdownProps, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, SidebarLayout, type SidebarLayoutProps, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, type TodoProvider, type TodoTask, VERSION, WidgetManager, WindowManagerProvider, WindowRegistry, WindowTitle, applyDevTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, getWindowPosition, glassStyle, isDevEnv, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellNavIcons, setShellTodoProvider, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };

package/dist/index.js

@@ -4,22 +4,22 @@ import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 export { setShellTodoProvider } from './chunk-QTJ2CHJX.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-SUUADOG6.js';
+import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-3SIZAHR6.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-KJ5664G7.js';
+import { setPdfPreview } from './chunk-DMSHU2HJ.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-export { EditableGrid } from './chunk-ZETQWO2W.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-3T6SQ4UO.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-3T6SQ4UO.js';
+export { EditableGrid } from './chunk-66GIT3PM.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-IMFUTSYY.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-IMFUTSYY.js';
 import { confirm } from './chunk-UBN4IUDE.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-ZF6AYO4G.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-ZF6AYO4G.js';
-import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore } from 'react';
+import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -560,6 +560,78 @@ function HelpCenter({
     ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
   ] });
 }
+var clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
+function SidebarLayout({
+  sidebar,
+  children,
+  storageKey,
+  defaultWidth = 256,
+  minWidth = 180,
+  maxWidth = 480,
+  className = "",
+  sidebarClassName = "border-r border-gray-200 bg-gray-50",
+  contentClassName = "bg-white"
+}) {
+  const [width, setWidth] = useState(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const saved = window.localStorage.getItem(storageKey);
+      const n = saved ? parseInt(saved, 10) : NaN;
+      if (!Number.isNaN(n)) return clamp(n, minWidth, maxWidth);
+    }
+    return clamp(defaultWidth, minWidth, maxWidth);
+  });
+  const dragRef = useRef(null);
+  const onMove = useCallback((e) => {
+    const d = dragRef.current;
+    if (!d) return;
+    setWidth(clamp(d.startWidth + (e.clientX - d.startX), minWidth, maxWidth));
+  }, [minWidth, maxWidth]);
+  const onUp = useCallback(() => {
+    dragRef.current = null;
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    document.body.style.removeProperty("cursor");
+    document.body.style.removeProperty("user-select");
+  }, [onMove]);
+  const startDrag = useCallback((e) => {
+    e.preventDefault();
+    dragRef.current = { startX: e.clientX, startWidth: width };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [width, onMove, onUp]);
+  useEffect(() => {
+    if (!storageKey) return;
+    const id = window.setTimeout(() => {
+      try {
+        window.localStorage.setItem(storageKey, String(Math.round(width)));
+      } catch {
+      }
+    }, 200);
+    return () => window.clearTimeout(id);
+  }, [width, storageKey]);
+  useEffect(() => () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+  }, [onMove, onUp]);
+  return /* @__PURE__ */ jsxs("div", { className: `flex h-full w-full overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex h-full shrink-0 flex-col", style: { width }, children: [
+      /* @__PURE__ */ jsx("div", { className: `flex h-full flex-col overflow-y-auto ${sidebarClassName}`, children: sidebar }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          onPointerDown: startDrag,
+          onDoubleClick: () => setWidth(clamp(defaultWidth, minWidth, maxWidth)),
+          title: "Drag to resize \xB7 double-click to reset",
+          className: "group absolute inset-y-0 right-0 z-10 w-2 cursor-col-resize",
+          children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 w-px bg-transparent transition-colors group-hover:bg-blue-400" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `flex min-w-0 flex-1 flex-col ${contentClassName}`, children })
+  ] });
+}
 function timeAgo(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
   const mins = Math.floor(diff / 6e4);
@@ -1400,7 +1472,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.9.0" ;
+var VERSION = "0.11.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6273,8 +6345,6 @@ function Kanban({
   columnEmptyText = "Drop here"
 }) {
   const [dragId, setDragId] = useState(null);
-  const [fromCol, setFromCol] = useState(null);
-  const [gap, setGap] = useState(0);
   const [over, setOver] = useState(null);
   const grouped = useMemo(() => {
     const map = {};
@@ -6285,27 +6355,36 @@ function Kanban({
   }, [items, columns, columnOf, sortInColumn]);
   const reset = () => {
     setDragId(null);
-    setFromCol(null);
     setOver(null);
   };
-  const isActive = (col) => over !== null && over.col === col && fromCol !== col;
+  const commitMove = (col) => {
+    if (dragId && over && over.col === col) {
+      const colItems = grouped[col] ?? [];
+      const dp = colItems.findIndex((it) => getId(it) === dragId);
+      const sameCol = dp !== -1;
+      const noop = sameCol && (over.index === dp || over.index === dp + 1);
+      if (!noop) {
+        const toIndex = sameCol && over.index > dp ? over.index - 1 : over.index;
+        onMove(dragId, col, toIndex);
+      }
+    }
+    reset();
+  };
   if (isLoading) return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: loadingText });
   if (items.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: "No items." }) });
   }
   return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto grid-scroll", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 h-full min-w-max pb-2", children: columns.map((col) => {
     const colItems = grouped[col.value] ?? [];
-    const active = isActive(col.value);
+    const isOver = over !== null && over.col === col.value;
+    const dp = dragId !== null ? colItems.findIndex((it) => getId(it) === dragId) : -1;
+    const lineAt = isOver && !(dp !== -1 && (over.index === dp || over.index === dp + 1)) ? over.index : -1;
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `flex flex-col w-72 shrink-0 rounded-xl bg-gray-50 border transition-colors ${active ? "border-blue-400 ring-2 ring-blue-300/60" : "border-gray-200"}`,
+        className: `flex flex-col w-72 shrink-0 rounded-xl bg-gray-50 border transition-colors ${isOver ? "border-blue-400 ring-2 ring-blue-300/60" : "border-gray-200"}`,
         onDragOver: (e) => e.preventDefault(),
-        onDragEnter: () => setOver((prev) => prev && prev.col === col.value ? prev : { col: col.value, index: colItems.length }),
-        onDrop: () => {
-          if (dragId) onMove(dragId, col.value);
-          reset();
-        },
+        onDrop: () => commitMove(col.value),
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -6324,48 +6403,46 @@ function Kanban({
             "div",
             {
               className: "flex-1 overflow-y-auto p-2 space-y-2 min-h-[120px]",
-              style: { paddingBottom: active ? gap + 8 : 8, transition: "padding-bottom 160ms ease" },
+              onDragEnter: () => setOver(
+                (prev) => prev && prev.col === col.value && prev.index === colItems.length ? prev : { col: col.value, index: colItems.length }
+              ),
               children: [
                 colItems.map((item, index) => {
                   const id = getId(item);
-                  const shift = active && over !== null && index >= over.index ? gap : 0;
-                  const style = dragId === null ? {} : {
-                    transform: `translateY(${shift}px)`,
-                    transition: "transform 160ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms ease",
-                    opacity: id === dragId ? 0.4 : 1
-                  };
-                  return /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      draggable: true,
-                      onDragStart: (e) => {
-                        setDragId(id);
-                        setFromCol(col.value);
-                        setGap(Math.round(e.currentTarget.getBoundingClientRect().height) + 8);
-                        try {
-                          e.dataTransfer.effectAllowed = "move";
-                        } catch {
-                        }
-                      },
-                      onDragEnter: (e) => {
-                        e.stopPropagation();
-                        setOver(
-                          (prev) => prev && prev.col === col.value && prev.index === index ? prev : { col: col.value, index }
-                        );
-                      },
-                      onDragEnd: reset,
-                      onClick: onCardClick ? () => onCardClick(item) : void 0,
-                      style,
-                      className: `rounded-lg bg-white border border-gray-200 p-3 shadow-sm hover:border-blue-400 hover:shadow transition ${onCardClick ? "cursor-pointer" : ""}`,
-                      children: renderCard(item)
-                    },
-                    id
-                  );
+                  const isDragged = id === dragId;
+                  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    lineAt === index && /* @__PURE__ */ jsx("div", { className: "h-0.5 rounded-full bg-blue-500", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        draggable: true,
+                        onDragStart: (e) => {
+                          setDragId(id);
+                          try {
+                            e.dataTransfer.effectAllowed = "move";
+                          } catch {
+                          }
+                        },
+                        onDragEnter: (e) => {
+                          e.stopPropagation();
+                          setOver(
+                            (prev) => prev && prev.col === col.value && prev.index === index ? prev : { col: col.value, index }
+                          );
+                        },
+                        onDragEnd: reset,
+                        onClick: onCardClick ? () => onCardClick(item) : void 0,
+                        style: dragId === null ? void 0 : { opacity: isDragged ? 0.4 : 1, transition: "opacity 120ms ease" },
+                        className: `rounded-lg bg-white border border-gray-200 p-3 shadow-sm hover:border-blue-400 hover:shadow transition ${onCardClick ? "cursor-pointer" : ""}`,
+                        children: renderCard(item)
+                      }
+                    )
+                  ] }, id);
                 }),
+                colItems.length > 0 && lineAt === colItems.length && /* @__PURE__ */ jsx("div", { className: "h-0.5 rounded-full bg-blue-500", "aria-hidden": true }),
                 colItems.length === 0 && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: `text-[11px] text-center rounded-lg transition-all duration-150 ${active ? "border-2 border-dashed border-blue-300 bg-blue-50/50 text-blue-400 py-8" : "text-gray-400 py-6"}`,
+                    className: `text-[11px] text-center rounded-lg transition-all duration-150 ${isOver ? "border-2 border-dashed border-blue-300 bg-blue-50/50 text-blue-400 py-8" : "text-gray-400 py-6"}`,
                     children: columnEmptyText
                   }
                 )
@@ -6494,6 +6571,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, WidgetManager, applyDevTitle, createWindowRegistry, isDevEnv, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SidebarLayout, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, WidgetManager, applyDevTitle, createWindowRegistry, isDevEnv, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map