react-os-shell 0.8.0 → 0.10.0

package/dist/index.d.ts

@@ -1020,6 +1020,60 @@ interface EntityListProps<T> {
  */
 declare function EntityList<T>(props: EntityListProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Generic, drag-and-drop Kanban board. Self-contained (native HTML5 DnD, no
+ * 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`.
+ * 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`.
+ *
+ * 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. */
+    value: string;
+    label: string;
+    /** Tailwind text + bg classes for the column header. */
+    accent?: string;
+    /** Tailwind bg class for the header dot. */
+    dot?: string;
+}
+interface KanbanProps<T> {
+    items: T[];
+    columns: KanbanColumn[];
+    columnOf: (item: T) => string;
+    getId: (item: T) => string;
+    /**
+     * 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;
+    /** Comparator for ordering within a column — sort by the persisted order field. */
+    sortInColumn?: (a: T, b: T) => number;
+    isLoading?: boolean;
+    loadingText?: string;
+    /** Shown when there are no items at all. */
+    emptyState?: ReactNode;
+    /** Placeholder text inside an empty column. */
+    columnEmptyText?: string;
+}
+declare function Kanban<T>({ items, columns, columnOf, getId, onMove, renderCard, onCardClick, sortInColumn, isLoading, loadingText, emptyState, columnEmptyText, }: KanbanProps<T>): react_jsx_runtime.JSX.Element;
+
 interface PaginatedResponse<T> {
     count: number;
     next: string | null;
@@ -1336,4 +1390,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, 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, 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

@@ -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.8.0" ;
+var VERSION = "0.10.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6258,6 +6258,131 @@ function EntityList(props) {
     }
   ) }) });
 }
+function Kanban({
+  items,
+  columns,
+  columnOf,
+  getId,
+  onMove,
+  renderCard,
+  onCardClick,
+  sortInColumn,
+  isLoading = false,
+  loadingText = "Loading\u2026",
+  emptyState,
+  columnEmptyText = "Drop here"
+}) {
+  const [dragId, setDragId] = useState(null);
+  const [over, setOver] = useState(null);
+  const grouped = useMemo(() => {
+    const map = {};
+    for (const c of columns) map[c.value] = [];
+    for (const it of items) (map[columnOf(it)] ??= []).push(it);
+    if (sortInColumn) for (const k of Object.keys(map)) map[k].sort(sortInColumn);
+    return map;
+  }, [items, columns, columnOf, sortInColumn]);
+  const reset = () => {
+    setDragId(null);
+    setOver(null);
+  };
+  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 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 ${isOver ? "border-blue-400 ring-2 ring-blue-300/60" : "border-gray-200"}`,
+        onDragOver: (e) => e.preventDefault(),
+        onDrop: () => commitMove(col.value),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between px-3 py-2 rounded-t-xl text-sm font-medium ${col.accent ?? "text-gray-700 bg-gray-100"}`,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${col.dot ?? "bg-gray-400"}` }),
+                  col.label
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs opacity-70", children: colItems.length })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex-1 overflow-y-auto p-2 space-y-2 min-h-[120px]",
+              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 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 ${isOver ? "border-2 border-dashed border-blue-300 bg-blue-50/50 text-blue-400 py-8" : "text-gray-400 py-6"}`,
+                    children: columnEmptyText
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      col.value
+    );
+  }) }) });
+}
 function useInfiniteScroll({
   queryKey,
   fetchFn,
@@ -6374,6 +6499,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, 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, 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