react-os-shell 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1025,15 +1025,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 +1053,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;

package/dist/index.js

@@ -19,7 +19,7 @@ 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';
@@ -1400,7 +1400,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.9.0" ;
+var VERSION = "0.10.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6273,8 +6273,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 +6283,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 +6331,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
                   }
                 )