okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/motion/table/table-header.tsx

@@ -0,0 +1,337 @@
+/**
+ * Sticky header row for the motion Table — sort, resize, reorder, column menu.
+ */
+
+import {
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  ArrowUp01Icon,
+  Delete02Icon,
+  GripVerticalIcon,
+  MoreHorizontalCircle01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, type JSX, type PointerEvent as ReactPointerEvent } from "react";
+import { createPortal } from "react-dom";
+import { Checkbox } from "@/components/motion/checkbox.tsx";
+import { EASE_OUT, SPRING_PRESS } from "@/lib/ease.ts";
+import { motion } from "@/lib/motion.ts";
+import { cn } from "@/lib/utils.ts";
+import { TableMenu, type TableMenuItem } from "./table-menu.tsx";
+import type { HeaderCellRefs, InsertPosition, SortState, TableColumn } from "./types.ts";
+import { alignFlex, alignText, COLUMN_ACTIVE_SHADOW, TABLE_CHECKBOX_CLASS } from "./utils.ts";
+
+/** Props for {@link TableHeader}. */
+export interface TableHeaderProps<T> {
+  readonly columns: readonly TableColumn<T>[];
+  readonly rowHeight: number;
+  readonly reduce: boolean;
+  readonly thRefs: HeaderCellRefs;
+  readonly selectable: boolean;
+  readonly allSelected: boolean;
+  readonly someSelected: boolean;
+  readonly onToggleAll: () => void;
+  readonly sort: SortState | null;
+  readonly onToggleSort: (key: string) => void;
+  readonly resizable: boolean;
+  readonly onResizeStart: (key: string, e: ReactPointerEvent) => void;
+  readonly onResizeMove: (e: ReactPointerEvent) => void;
+  readonly onResizeEnd: (e: ReactPointerEvent) => void;
+  readonly reorderable: boolean;
+  readonly dragKey: string | null;
+  readonly dropIndex: number | null;
+  readonly onReorderStart: (key: string, e: ReactPointerEvent) => void;
+  readonly onReorderMove: (e: ReactPointerEvent) => void;
+  readonly onReorderEnd: (e: ReactPointerEvent) => void;
+  readonly onInsertColumn?: (index: number, position: InsertPosition) => void;
+  readonly onDeleteColumn?: (columnKey: string, index: number) => void;
+  readonly onColumnRename?: (columnKey: string, value: string) => void;
+  readonly activeColumn: string | null;
+  readonly onColumnActivate?: (key: string) => void;
+  readonly onColumnDeactivate?: () => void;
+  /** Trailing slack header when no column is marked `fill`. */
+  readonly slack?: boolean;
+}
+
+/**
+ * Insert / delete items shared by the header cell and the portal handle.
+ *
+ * @param column - Active column
+ * @param index - Column index in the current order
+ */
+function columnMenuItems<T>(
+  column: TableColumn<T>,
+  index: number,
+  onInsertColumn?: (index: number, position: InsertPosition) => void,
+  onDeleteColumn?: (columnKey: string, index: number) => void,
+): TableMenuItem[] {
+  return [
+    ...(onInsertColumn
+      ? [
+          {
+            label: "Insert before",
+            icon: <HugeiconsIcon icon={ArrowLeft01Icon} />,
+            onSelect: () => onInsertColumn(index, "before"),
+          },
+          {
+            label: "Insert after",
+            icon: <HugeiconsIcon icon={ArrowRight01Icon} />,
+            onSelect: () => onInsertColumn(index, "after"),
+          },
+        ]
+      : []),
+    ...(onDeleteColumn
+      ? [
+          {
+            label: "Delete column",
+            icon: <HugeiconsIcon icon={Delete02Icon} />,
+            destructive: true,
+            onSelect: () => onDeleteColumn(column.key, index),
+          },
+        ]
+      : []),
+  ];
+}
+
+/** Props for {@link ColumnHandle}. */
+interface ColumnHandleProps<T> {
+  readonly column: TableColumn<T>;
+  readonly index: number;
+  readonly thRefs: HeaderCellRefs;
+  readonly onInsertColumn?: (index: number, position: InsertPosition) => void;
+  readonly onDeleteColumn?: (columnKey: string, index: number) => void;
+  readonly onEnter: () => void;
+  readonly onLeave: () => void;
+}
+
+/**
+ * Ellipse handle, portaled onto the column's top border so the scroll
+ * container cannot clip it. Straddles the border to bridge hover.
+ *
+ * @param props - Target header cell + insert/delete callbacks
+ */
+function ColumnHandle<T>({
+  column,
+  index,
+  thRefs,
+  onInsertColumn,
+  onDeleteColumn,
+  onEnter,
+  onLeave,
+}: ColumnHandleProps<T>): JSX.Element | null {
+  useEffect(() => {
+    window.addEventListener("scroll", onLeave, true);
+    return () => window.removeEventListener("scroll", onLeave, true);
+  }, [onLeave]);
+
+  const el = thRefs.current[column.key];
+  if (!el || typeof document === "undefined") return null;
+  const rect = el.getBoundingClientRect();
+
+  return createPortal(
+    <div
+      style={{
+        position: "fixed",
+        top: rect.top,
+        left: rect.left + rect.width / 2,
+        transform: "translate(-50%, -50%)",
+        zIndex: 40,
+      }}
+      onPointerEnter={onEnter}
+      onPointerLeave={onLeave}
+    >
+      <TableMenu
+        ariaLabel={`${column.key} column options`}
+        triggerClassName="flex h-2 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
+        trigger={<HugeiconsIcon icon={MoreHorizontalCircle01Icon} className="size-3" />}
+        items={columnMenuItems(column, index, onInsertColumn, onDeleteColumn)}
+      />
+    </div>,
+    document.body,
+  );
+}
+
+/**
+ * Sticky `<thead>` with optional select-all, sort, grip, and resize handles.
+ *
+ * @param props - Ordered columns + interaction callbacks
+ */
+export function TableHeader<T>({
+  columns,
+  rowHeight,
+  reduce,
+  thRefs,
+  selectable,
+  allSelected,
+  someSelected,
+  onToggleAll,
+  sort,
+  onToggleSort,
+  resizable,
+  onResizeStart,
+  onResizeMove,
+  onResizeEnd,
+  reorderable,
+  dragKey,
+  dropIndex,
+  onReorderStart,
+  onReorderMove,
+  onReorderEnd,
+  onInsertColumn,
+  onDeleteColumn,
+  onColumnRename,
+  activeColumn,
+  onColumnActivate,
+  onColumnDeactivate,
+  slack = true,
+}: TableHeaderProps<T>): JSX.Element {
+  const hasColumnMenu = !!(onInsertColumn || onDeleteColumn);
+  const activeIndex = columns.findIndex((c) => c.key === activeColumn);
+  const activeCol = activeIndex >= 0 ? columns[activeIndex] : undefined;
+
+  return (
+    <>
+      {hasColumnMenu && activeColumn && activeCol ? (
+        <ColumnHandle
+          column={activeCol}
+          index={activeIndex}
+          thRefs={thRefs}
+          onInsertColumn={onInsertColumn}
+          onDeleteColumn={onDeleteColumn}
+          onEnter={() => onColumnActivate?.(activeColumn)}
+          onLeave={() => onColumnDeactivate?.()}
+        />
+      ) : null}
+      <thead>
+        <tr>
+          {selectable ? (
+            <th className="sticky top-0 z-10 border-b border-border/60 bg-background p-0 font-medium">
+              <div className="flex items-center justify-center" style={{ height: rowHeight }}>
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={someSelected && !allSelected}
+                  onCheckedChange={() => onToggleAll()}
+                  aria-label="Select all rows"
+                  className={TABLE_CHECKBOX_CLASS}
+                />
+              </div>
+            </th>
+          ) : null}
+          {columns.map((column, index) => {
+            const active = sort?.key === column.key;
+            const isDragging = dragKey === column.key;
+            const isActive = activeColumn === column.key;
+            return (
+              <th
+                key={column.key}
+                ref={(el) => {
+                  thRefs.current[column.key] = el;
+                }}
+                onPointerEnter={() => onColumnActivate?.(column.key)}
+                onPointerLeave={() => onColumnDeactivate?.()}
+                style={isActive ? { boxShadow: COLUMN_ACTIVE_SHADOW } : undefined}
+                aria-sort={
+                  active ? (sort?.direction === "asc" ? "ascending" : "descending") : undefined
+                }
+                data-drop={dragKey ? dropIndex === index : undefined}
+                data-dropend={
+                  dragKey ? dropIndex === columns.length && index === columns.length - 1 : undefined
+                }
+                className={cn(
+                  "group relative sticky top-0 z-10 border-b border-border/60 bg-background p-0 font-medium text-muted-foreground",
+                  "data-[drop=true]:before:absolute data-[drop=true]:before:inset-y-0 data-[drop=true]:before:left-0 data-[drop=true]:before:w-0.5 data-[drop=true]:before:bg-primary",
+                  "data-[dropend=true]:after:absolute data-[dropend=true]:after:inset-y-0 data-[dropend=true]:after:right-0 data-[dropend=true]:after:w-0.5 data-[dropend=true]:after:bg-primary",
+                )}
+              >
+                <motion.div
+                  className={cn("flex h-full w-full min-w-0 items-center", alignFlex(column.align))}
+                  style={{ height: rowHeight }}
+                  animate={
+                    reduce
+                      ? { opacity: isDragging ? 0.5 : 1 }
+                      : {
+                          scale: isDragging ? 1.04 : 1,
+                          opacity: isDragging ? 0.5 : 1,
+                        }
+                  }
+                  transition={SPRING_PRESS}
+                >
+                  {reorderable ? (
+                    <button
+                      type="button"
+                      aria-label={`Reorder ${column.key}`}
+                      onPointerDown={(e) => onReorderStart(column.key, e)}
+                      onPointerMove={onReorderMove}
+                      onPointerUp={onReorderEnd}
+                      className="flex h-full w-6 cursor-grab touch-none items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground active:cursor-grabbing"
+                    >
+                      <HugeiconsIcon icon={GripVerticalIcon} className="size-3.5" />
+                    </button>
+                  ) : null}
+                  {column.sortable ? (
+                    <button
+                      type="button"
+                      onClick={() => onToggleSort(column.key)}
+                      className={cn(
+                        "flex h-full min-w-0 flex-1 select-none items-center gap-1 px-4 transition-colors hover:text-foreground",
+                        alignFlex(column.align),
+                        active && "text-foreground",
+                      )}
+                    >
+                      {column.header}
+                      <motion.span
+                        aria-hidden
+                        className="inline-flex shrink-0"
+                        animate={{
+                          rotate: active && sort?.direction === "desc" ? 180 : 0,
+                          opacity: active ? 1 : 0.35,
+                        }}
+                        transition={reduce ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT }}
+                      >
+                        <HugeiconsIcon icon={ArrowUp01Icon} className="size-3" />
+                      </motion.span>
+                    </button>
+                  ) : onColumnRename ? (
+                    <input
+                      defaultValue={typeof column.header === "string" ? column.header : column.key}
+                      aria-label={`Rename ${column.key}`}
+                      onBlur={(e) => onColumnRename(column.key, e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") e.currentTarget.blur();
+                      }}
+                      className={cn(
+                        "min-w-0 flex-1 truncate appearance-none rounded-md border-0 bg-transparent px-4 font-medium text-muted-foreground outline-none transition-colors focus:bg-muted focus:text-foreground",
+                        alignText(column.align),
+                      )}
+                    />
+                  ) : (
+                    <div className={cn("min-w-0 flex-1 truncate px-4", alignText(column.align))}>
+                      {column.header}
+                    </div>
+                  )}
+                </motion.div>
+                {resizable ? (
+                  <div
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label={`Resize ${column.key}`}
+                    onPointerDown={(e) => onResizeStart(column.key, e)}
+                    onPointerMove={onResizeMove}
+                    onPointerUp={onResizeEnd}
+                    className="absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-primary/40"
+                  />
+                ) : null}
+              </th>
+            );
+          })}
+          {slack ? (
+            <th
+              className="sticky top-0 z-10 border-b border-border/60 bg-background p-0"
+              aria-hidden
+            />
+          ) : null}
+        </tr>
+      </thead>
+    </>
+  );
+}

package/src/console/ui-next/src/components/motion/table/table-menu.tsx

@@ -0,0 +1,130 @@
+/**
+ * Portaled dropdown used by row/column handles on the motion Table.
+ */
+
+import { useEffect, useRef, useState, type JSX, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { SPRING_PANEL } from "@/lib/ease.ts";
+import { motion, useReducedMotion } from "@/lib/motion.ts";
+import { cn } from "@/lib/utils.ts";
+
+/** One menu entry. */
+export type TableMenuItem = {
+  readonly label: string;
+  readonly icon?: ReactNode;
+  readonly onSelect: () => void;
+  readonly destructive?: boolean;
+};
+
+const MENU_WIDTH = 188;
+
+/** Props for {@link TableMenu}. */
+export interface TableMenuProps {
+  readonly items: readonly TableMenuItem[];
+  readonly ariaLabel: string;
+  readonly trigger: ReactNode;
+  readonly triggerClassName?: string;
+}
+
+/**
+ * Click-to-open menu anchored to a handle trigger.
+ *
+ * @param props - Items + trigger
+ */
+export function TableMenu({
+  items,
+  ariaLabel,
+  trigger,
+  triggerClassName,
+}: TableMenuProps): JSX.Element {
+  const reduce = useReducedMotion();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
+  const open = coords !== null;
+
+  useEffect(() => {
+    if (!open) return;
+    const close = () => setCoords(null);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const toggle = () => {
+    if (open) {
+      setCoords(null);
+      return;
+    }
+    const el = triggerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setCoords({
+      top: r.bottom + 4,
+      left: Math.max(8, r.right - MENU_WIDTH),
+    });
+  };
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation();
+          toggle();
+        }}
+        className={triggerClassName}
+      >
+        {trigger}
+      </button>
+      {open && coords && typeof document !== "undefined"
+        ? createPortal(
+            <>
+              <div className="fixed inset-0 z-40" onPointerDown={() => setCoords(null)} />
+              <motion.div
+                role="menu"
+                className="fixed z-50 overflow-hidden rounded-xl border border-border bg-background p-1 shadow-xl"
+                style={{ top: coords.top, left: coords.left, width: MENU_WIDTH }}
+                initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4 }}
+                animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}
+                transition={reduce ? { duration: 0 } : SPRING_PANEL}
+              >
+                {items.map((item) => (
+                  <button
+                    key={item.label}
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      setCoords(null);
+                      item.onSelect();
+                    }}
+                    className={cn(
+                      "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors [&_svg]:size-4",
+                      item.destructive
+                        ? "text-rose-500 hover:bg-rose-500/10"
+                        : "text-foreground hover:bg-muted",
+                    )}
+                  >
+                    {item.icon}
+                    {item.label}
+                  </button>
+                ))}
+              </motion.div>
+            </>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}

package/src/console/ui-next/src/components/motion/table/types.ts

@@ -0,0 +1,109 @@
+/**
+ * beUI motion Table — public types (https://beui.dev/components/motion/table).
+ */
+
+import type { ReactNode } from "react";
+import type { CellRange } from "@/features/store/lib/cell-selection.ts";
+
+/** Sort direction for a column. */
+export type SortDirection = "asc" | "desc";
+
+/** Active sort state. */
+export type SortState = {
+  readonly key: string;
+  readonly direction: SortDirection;
+};
+
+/**
+ * Column descriptor. `key` is the default object property for cell + sort.
+ */
+export type TableColumn<T> = {
+  readonly key: string;
+  /** Header content. */
+  readonly header: ReactNode;
+  /** Allow clicking the header to sort by this column. */
+  readonly sortable?: boolean;
+  /** Cell text alignment. */
+  readonly align?: "left" | "center" | "right";
+  /** Column width as a CSS length, e.g. `"160px"` or `"20%"`. */
+  readonly width?: string;
+  /** Absorb leftover table width instead of leaving a slack column. */
+  readonly fill?: boolean;
+  /** Custom cell renderer. Falls back to `row[key]`. */
+  readonly cell?: (row: T) => ReactNode;
+  /** Render an inline text input (ignored when `cell` is set). */
+  readonly editable?: boolean;
+  /** Value used for sorting. Falls back to `row[key]`. */
+  readonly sortValue?: (row: T) => string | number;
+};
+
+/** Insert before/after the hovered row or column. */
+export type InsertPosition = "before" | "after";
+
+/**
+ * Virtualized data table with optional selection, resize, reorder, and inline edit.
+ */
+export interface TableProps<T> {
+  readonly data: readonly T[];
+  readonly columns: readonly TableColumn<T>[];
+  /** Stable id per row. Defaults to row index. */
+  readonly getRowId?: (row: T, index: number) => string;
+  /** Render a leading checkbox column with select-all in the header. */
+  readonly selectable?: boolean;
+  readonly selectedRowIds?: readonly string[];
+  readonly defaultSelectedRowIds?: readonly string[];
+  readonly onSelectionChange?: (ids: readonly string[]) => void;
+  readonly sort?: SortState | null;
+  readonly defaultSort?: SortState | null;
+  readonly onSortChange?: (sort: SortState | null) => void;
+  /** Allow dragging the right edge of a header to resize that column. */
+  readonly resizable?: boolean;
+  /** Minimum column width in px when resizing. */
+  readonly minColumnWidth?: number;
+  readonly onColumnResize?: (key: string, width: number) => void;
+  /** Allow dragging a header grip to reorder columns. */
+  readonly reorderable?: boolean;
+  readonly onColumnOrderChange?: (keys: readonly string[]) => void;
+  /** Called when an `editable` cell commits (blur / Enter). */
+  readonly onCellEdit?: (rowId: string, columnKey: string, value: string) => void;
+  /** When set, non-sortable headers become editable inputs for the column name. */
+  readonly onColumnRename?: (columnKey: string, value: string) => void;
+  /** Enables the row menu (Insert before / after). */
+  readonly onInsertRow?: (index: number, position: InsertPosition) => void;
+  /** Enables Delete in the row menu. */
+  readonly onDeleteRow?: (rowId: string, index: number) => void;
+  /** Enables the column menu (Insert before / after). */
+  readonly onInsertColumn?: (index: number, position: InsertPosition) => void;
+  /** Enables Delete in the column menu. */
+  readonly onDeleteColumn?: (columnKey: string, index: number) => void;
+  /** Double-click a body row. */
+  readonly onRowDoubleClick?: (row: T, id: string) => void;
+  /** Controlled cell range (visible row index × column index). */
+  readonly cellRange?: CellRange | null;
+  /** Enables drag / Shift+click cell-range selection. */
+  readonly onCellRangeChange?: (range: CellRange | null) => void;
+  /** Click an already-selected cell (no drag) — start inline edit. */
+  readonly onCellActivate?: (row: number, col: number) => void;
+  /** Fixed row height in px — required for virtualization. */
+  readonly rowHeight?: number;
+  /** Scroll viewport height in px. */
+  readonly height?: number;
+  /** Rows rendered above/below the viewport. */
+  readonly overscan?: number;
+  /** Fires when the viewport scrolls near the bottom — load the next page. */
+  readonly onEndReached?: () => void;
+  /** Currently fetching — shows skeleton rows and pauses `onEndReached`. */
+  readonly loading?: boolean;
+  /** How many skeleton rows to show while loading more. */
+  readonly skeletonRows?: number;
+  readonly emptyState?: ReactNode;
+  readonly className?: string;
+}
+
+/** A data row paired with its stable id. */
+export type TableRow<T> = { readonly row: T; readonly id: string };
+
+/** Ref map from column key to its header cell, shared across resize/reorder hooks. */
+export type HeaderCellRefs = {
+  current: Record<string, HTMLTableCellElement | null>;
+};