react-os-shell 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1020,6 +1020,51 @@ 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`,
+ * and handle moves with `onMove(id, toColumn)`. Drops only change a card's
+ * column; within-column order is presentational (optionally 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.
+ */
+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;
+    /** Called when a card is dropped on a column (its own `value`). */
+    onMove: (id: string, toColumn: string) => 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. */
+    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 +1381,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

@@ -1400,7 +1400,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.8.0" ;
+var VERSION = "0.9.0" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6258,6 +6258,126 @@ 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 [fromCol, setFromCol] = useState(null);
+  const [gap, setGap] = useState(0);
+  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);
+    setFromCol(null);
+    setOver(null);
+  };
+  const isActive = (col) => over !== null && over.col === col && fromCol !== col;
+  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);
+    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"}`,
+        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();
+        },
+        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]",
+              style: { paddingBottom: active ? gap + 8 : 8, transition: "padding-bottom 160ms ease" },
+              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
+                  );
+                }),
+                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"}`,
+                    children: columnEmptyText
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      col.value
+    );
+  }) }) });
+}
 function useInfiniteScroll({
   queryKey,
   fetchFn,
@@ -6374,6 +6494,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