@open-mercato/ui 0.6.7-develop.6552.1.5208a19369 → 0.6.7-develop.6565.1.1026d85fff

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.7-develop.6552.1.5208a19369",
+  "version": "0.6.7-develop.6565.1.1026d85fff",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6552.1.5208a19369",
+    "@open-mercato/shared": "0.6.7-develop.6565.1.1026d85fff",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6552.1.5208a19369",
+    "@open-mercato/shared": "0.6.7-develop.6565.1.1026d85fff",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/DataTable.tsx

@@ -471,6 +471,12 @@ function resolveExportSections(config: DataTableExportConfig | null | undefined)
 const PERSPECTIVE_COOKIE_PREFIX = 'om_table_perspective'
 const PERSPECTIVE_STORAGE_PREFIX = 'om_table_perspective_snapshot'
 
+// Bounds for user-driven column resizing (#1835). Widths outside this range are
+// clamped so a persisted/dragged value can never collapse a column to nothing or
+// blow the table out horizontally.
+const COLUMN_MIN_WIDTH = 60
+const COLUMN_MAX_WIDTH = 900
+
 function formatDurationLabel(durationMs?: number | null): string {
   if (durationMs == null) return ''
   if (!Number.isFinite(durationMs)) return ''
@@ -544,7 +550,7 @@ export function writePerspectiveSnapshot(tableId: string, snapshot: PerspectiveS
   writeVersionedPreference(key, PERSPECTIVE_SNAPSHOT_VERSION, snapshot)
 }
 
-function sanitizePerspectiveSettings(source?: PerspectiveSettings | null): PerspectiveSettings | null {
+export function sanitizePerspectiveSettings(source?: PerspectiveSettings | null): PerspectiveSettings | null {
   if (!source || typeof source !== 'object') return null
   const forbidden = new Set(['__proto__', 'prototype', 'constructor'])
   const result: PerspectiveSettings = {}
@@ -567,6 +573,17 @@ function sanitizePerspectiveSettings(source?: PerspectiveSettings | null): Persp
     }
   }
 
+  if (source.columnSizing && typeof source.columnSizing === 'object') {
+    const sizing: Record<string, number> = {}
+    for (const [key, value] of Object.entries(source.columnSizing)) {
+      const id = typeof key === 'string' ? key.trim() : ''
+      if (!id || forbidden.has(id)) continue
+      if (typeof value !== 'number' || !Number.isFinite(value)) continue
+      sizing[id] = Math.max(COLUMN_MIN_WIDTH, Math.min(COLUMN_MAX_WIDTH, Math.round(value)))
+    }
+    if (Object.keys(sizing).length) result.columnSizing = sizing
+  }
+
   if (Array.isArray(source.sorting)) {
     const sorting = source.sorting
       .map((item) => {
@@ -856,7 +873,99 @@ function HeaderDndWrapper({ enabled, contextId, sensors, columnIds, onDragEnd, c
   )
 }
 
-function SortableHeaderCell({ id, children, className }: { id: string; children: React.ReactNode; className?: string }) {
+// Drag handle on a column header's right edge (#1835). Uses manual pointer
+// tracking (mirrors the deals-pipeline LaneResizeHandle) rather than TanStack's
+// built-in resize so the table keeps its auto layout — only user-resized columns
+// get an explicit width, and dragging measures the header's real current width so
+// there is no jump. `stopPropagation` on pointer/click keeps the header's
+// reorder-DnD and sort-toggle from firing while resizing.
+function ColumnResizeHandle({
+  columnId,
+  onResize,
+  onCommit,
+  onReset,
+  ariaLabel,
+}: {
+  columnId: string
+  onResize: (columnId: string, width: number) => void
+  onCommit: () => void
+  onReset: (columnId: string) => void
+  ariaLabel: string
+}) {
+  const [active, setActive] = React.useState(false)
+  // Holds the current drag's teardown so an unmount mid-drag (perspective apply,
+  // data reload, column-visibility change) still removes the document listeners
+  // and restores the body cursor/selection instead of leaking them.
+  const dragCleanupRef = React.useRef<(() => void) | null>(null)
+  React.useEffect(() => () => { dragCleanupRef.current?.() }, [])
+
+  const handlePointerDown = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    const headerCell = event.currentTarget.parentElement as HTMLElement | null
+    if (!headerCell) return
+    const startX = event.clientX
+    const startWidth = headerCell.getBoundingClientRect().width
+    setActive(true)
+    let frame = 0
+    let latest = startWidth
+    const onMove = (moveEvent: PointerEvent) => {
+      latest = Math.max(COLUMN_MIN_WIDTH, Math.min(COLUMN_MAX_WIDTH, Math.round(startWidth + (moveEvent.clientX - startX))))
+      if (frame) return
+      frame = window.requestAnimationFrame(() => {
+        frame = 0
+        onResize(columnId, latest)
+      })
+    }
+    const teardown = () => {
+      if (frame) window.cancelAnimationFrame(frame)
+      document.removeEventListener('pointermove', onMove)
+      document.removeEventListener('pointerup', onUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      onResize(columnId, latest)
+      teardown()
+      setActive(false)
+      onCommit()
+    }
+    dragCleanupRef.current = teardown
+    document.addEventListener('pointermove', onMove)
+    document.addEventListener('pointerup', onUp)
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [columnId, onResize, onCommit])
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      onPointerDown={handlePointerDown}
+      onClick={(event) => event.stopPropagation()}
+      onDoubleClick={(event) => { event.preventDefault(); event.stopPropagation(); onReset(columnId) }}
+      className="group/resize absolute right-0 top-0 z-10 flex h-full w-3 translate-x-1/2 cursor-col-resize touch-none select-none items-center justify-center"
+    >
+      {/* Always-visible short grip marks the column edge as resizable; it grows
+          to full height and brightens on header/handle hover and while dragging. */}
+      <span
+        aria-hidden
+        className={cn(
+          'w-0.5 rounded-full transition-all',
+          active
+            ? 'h-full bg-primary'
+            : 'h-3.5 bg-border group-hover:h-full group-hover:bg-border group-hover/resize:h-full group-hover/resize:bg-primary',
+        )}
+      />
+    </div>
+  )
+}
+
+function SortableHeaderCell({ id, children, className, width }: { id: string; children: React.ReactNode; className?: string; width?: number }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
   const isSticky = typeof className === 'string' && className.includes('sticky')
   const style: React.CSSProperties = {
@@ -865,6 +974,7 @@ function SortableHeaderCell({ id, children, className }: { id: string; children:
     opacity: isDragging ? 0.5 : 1,
     cursor: 'grab',
     position: isSticky ? 'sticky' : 'relative',
+    ...(typeof width === 'number' ? { width, minWidth: width, maxWidth: width } : {}),
   }
   return (
     <TableHead ref={setNodeRef} style={style} className={className} {...attributes} {...listeners}>
@@ -1106,6 +1216,11 @@ export function DataTable<T>({
   const [activePerspectiveId, setActivePerspectiveId] = React.useState<string | null>(initialActiveId)
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(() => mergedInitialSettings?.columnVisibility ?? {})
   const [columnOrder, setColumnOrder] = React.useState<string[]>(() => mergedInitialSettings?.columnOrder ?? [])
+  const [columnSizing, setColumnSizing] = React.useState<Record<string, number>>(() => mergedInitialSettings?.columnSizing ?? {})
+  // Mirror of columnSizing so the resize commit (fired from a pointerup handler
+  // set up on drag start) always reads the latest widths without a stale closure.
+  const columnSizingRef = React.useRef(columnSizing)
+  React.useEffect(() => { columnSizingRef.current = columnSizing }, [columnSizing])
   const [deletingIds, setDeletingIds] = React.useState<string[]>([])
   const [roleClearingIds, setRoleClearingIds] = React.useState<string[]>([])
   const [perspectiveApiMissing, setPerspectiveApiMissing] = React.useState(false)
@@ -1596,12 +1711,13 @@ export function DataTable<T>({
     const candidate: PerspectiveSettings = {
       columnOrder,
       columnVisibility: visibility,
+      columnSizing,
       sorting,
       filters: filtersPayload,
       searchValue,
     }
     return sanitizePerspectiveSettings(candidate) ?? {}
-  }, [columnOrder, columnVisibility, sorting, filterValues, searchValue, advancedFilter])
+  }, [columnOrder, columnVisibility, columnSizing, sorting, filterValues, searchValue, advancedFilter])
 
   const applyPerspectiveSettings = React.useCallback((
     settings: PerspectiveSettings,
@@ -1636,6 +1752,13 @@ export function DataTable<T>({
       setSorting([])
       onSortingChange?.([])
     }
+    if (normalized.columnSizing) {
+      setColumnSizing(normalized.columnSizing)
+      columnSizingRef.current = normalized.columnSizing
+    } else {
+      setColumnSizing({})
+      columnSizingRef.current = {}
+    }
     // Two filter shapes can live in `settings.filters`:
     //   1. Persisted advanced-filter tree: `{ v: 2, root: {...} }`
     //   2. Legacy flat FilterValues record: arbitrary `{ key: value, ... }`
@@ -1672,6 +1795,17 @@ export function DataTable<T>({
         const snapshot: PerspectiveSnapshot = { perspectiveId: nextId, settings: normalized, updatedAt: Date.now() }
         writePerspectiveSnapshot(perspectiveTableId, snapshot)
         initialSnapshotRef.current = snapshot
+      } else if (normalized.columnSizing && Object.keys(normalized.columnSizing).length) {
+        // Preserve a "No view" snapshot that only carries user column widths so
+        // they survive refresh without an active perspective (#1835). A genuine
+        // "No view" clear passes empty settings (no columnSizing) and still clears.
+        const snapshot: PerspectiveSnapshot = {
+          perspectiveId: null,
+          settings: { columnSizing: normalized.columnSizing },
+          updatedAt: Date.now(),
+        }
+        writePerspectiveSnapshot(perspectiveTableId, snapshot)
+        initialSnapshotRef.current = snapshot
       } else {
         writePerspectiveSnapshot(perspectiveTableId, null)
         initialSnapshotRef.current = null
@@ -1679,6 +1813,46 @@ export function DataTable<T>({
     }
   }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table, advancedFilter])
 
+  // Persist the current column widths into the local snapshot so they survive a
+  // refresh even without saving a perspective (#1835). Widths are merged into the
+  // active perspective's other settings — resizing never disturbs the saved
+  // column order/visibility/filters.
+  const persistColumnSizingSnapshot = React.useCallback(() => {
+    if (!perspectiveTableId) return
+    const sizing = columnSizingRef.current
+    const existing = readPerspectiveSnapshot(perspectiveTableId) ?? initialSnapshotRef.current
+    const baseSettings: PerspectiveSettings = existing?.settings
+      ? { ...existing.settings }
+      : (mergedInitialSettings ? { ...mergedInitialSettings } : {})
+    if (sizing && Object.keys(sizing).length) baseSettings.columnSizing = sizing
+    else delete baseSettings.columnSizing
+    const snapshot: PerspectiveSnapshot = {
+      perspectiveId: existing?.perspectiveId ?? activePerspectiveId ?? null,
+      settings: baseSettings,
+      updatedAt: Date.now(),
+    }
+    writePerspectiveSnapshot(perspectiveTableId, snapshot)
+    initialSnapshotRef.current = snapshot
+  }, [perspectiveTableId, activePerspectiveId, mergedInitialSettings])
+
+  const handleColumnResize = React.useCallback((colId: string, width: number) => {
+    const next = { ...columnSizingRef.current, [colId]: width }
+    columnSizingRef.current = next
+    setColumnSizing(next)
+  }, [])
+
+  const commitColumnSizing = React.useCallback(() => {
+    persistColumnSizingSnapshot()
+  }, [persistColumnSizingSnapshot])
+
+  const resetColumnSize = React.useCallback((colId: string) => {
+    const next = { ...columnSizingRef.current }
+    delete next[colId]
+    columnSizingRef.current = next
+    setColumnSizing(next)
+    persistColumnSizingSnapshot()
+  }, [persistColumnSizingSnapshot])
+
   React.useLayoutEffect(() => {
     if (!perspectiveTableId) return
     if (snapshotHydratedTableRef.current === perspectiveTableId) return
@@ -2012,6 +2186,10 @@ export function DataTable<T>({
 
   const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
   const enableHeaderDnd = Boolean(columnChooser)
+  // Column resize is offered only where widths can persist (#1835): tables with a
+  // perspective config. Portal / settings / sub-tables that opt out of perspectives
+  // get no handle, so resizing never silently resets on reload for them.
+  const enableColumnResize = perspectiveEnabled
   const stableDndContextId = React.useMemo(
     () => sanitizeDndContextId(
       extensionTableId
@@ -2845,13 +3023,30 @@ export function DataTable<T>({
                       ) : null}
                     </Button>
                   )
+                  const columnId = header.column.id
+                  const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : undefined
+                  const resizeHandle = enableColumnResize && !header.isPlaceholder && columnId ? (
+                    <ColumnResizeHandle
+                      columnId={columnId}
+                      onResize={handleColumnResize}
+                      onCommit={commitColumnSizing}
+                      onReset={resetColumnSize}
+                      ariaLabel={t('ui.dataTable.resizeColumn', 'Resize column')}
+                    />
+                  ) : null
                   return enableHeaderDnd ? (
-                    <SortableHeaderCell key={header.id} id={header.id} className={responsiveClass(priority, columnMeta?.hidden) + stickyClass}>
+                    <SortableHeaderCell key={header.id} id={header.id} width={sizedWidth} className={cn('group', responsiveClass(priority, columnMeta?.hidden) + stickyClass)}>
                       {headerCellContent}
+                      {resizeHandle}
                     </SortableHeaderCell>
                   ) : (
-                    <TableHead key={header.id} className={responsiveClass(priority, columnMeta?.hidden) + stickyClass}>
+                    <TableHead
+                      key={header.id}
+                      className={cn('group relative', responsiveClass(priority, columnMeta?.hidden) + stickyClass)}
+                      style={typeof sizedWidth === 'number' ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : undefined}
+                    >
                       {headerCellContent}
+                      {resizeHandle}
                     </TableHead>
                   )
                 })}
@@ -2974,14 +3169,22 @@ export function DataTable<T>({
                         tooltipText = cellValue != null ? String(cellValue) : undefined
                       }
 
+                      // A user-resized width (#1835) overrides the default truncation
+                      // max-width so the cell truncates at the dragged column width.
+                      const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : undefined
+                      const effectiveMaxWidth = typeof sizedWidth === 'number' ? `${sizedWidth}px` : maxWidth
                       const wrappedContent = shouldTruncate ? (
-                        <TruncatedCell maxWidth={maxWidth} tooltipContent={tooltipText}>
+                        <TruncatedCell maxWidth={effectiveMaxWidth} tooltipContent={tooltipText}>
                           {content}
                         </TruncatedCell>
                       ) : content
 
                       return (
-                        <TableCell key={cell.id} className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}>
+                        <TableCell
+                          key={cell.id}
+                          className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}
+                          style={typeof sizedWidth === 'number' ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : undefined}
+                        >
                           {wrappedContent}
                         </TableCell>
                       )

package/src/backend/__tests__/DataTable.columnSizing.test.ts

@@ -0,0 +1,49 @@
+/** @jest-environment jsdom */
+import { sanitizePerspectiveSettings } from '../DataTable'
+
+// Column widths persisted in PerspectiveSettings come from untrusted sources
+// (localStorage snapshot, saved perspectives API), so `sanitizePerspectiveSettings`
+// must validate and clamp them before they drive layout (#1835).
+describe('sanitizePerspectiveSettings — columnSizing (#1835)', () => {
+  it('keeps valid integer widths keyed by column id', () => {
+    const result = sanitizePerspectiveSettings({ columnSizing: { name: 240, status: 120 } })
+    expect(result?.columnSizing).toEqual({ name: 240, status: 120 })
+  })
+
+  it('clamps widths into the [60, 900] bound and rounds fractional pixels', () => {
+    const result = sanitizePerspectiveSettings({
+      columnSizing: { tooSmall: 10, tooBig: 5000, fractional: 199.7 },
+    })
+    expect(result?.columnSizing).toEqual({ tooSmall: 60, tooBig: 900, fractional: 200 })
+  })
+
+  it('drops non-numeric, non-finite, and prototype-polluting entries', () => {
+    // JSON.parse creates genuine own `__proto__` / `constructor` keys (unlike an
+    // object literal, where `__proto__` sets the prototype), so the forbidden-key
+    // guard is actually exercised.
+    const columnSizing = JSON.parse('{"good":150,"__proto__":300,"constructor":400}')
+    columnSizing.nan = Number.NaN
+    columnSizing.inf = Number.POSITIVE_INFINITY
+    columnSizing.str = '200'
+    const result = sanitizePerspectiveSettings({ columnSizing })
+    expect(result?.columnSizing).toEqual({ good: 150 })
+  })
+
+  it('omits columnSizing entirely when no valid entry survives', () => {
+    const result = sanitizePerspectiveSettings({ columnSizing: { bad: Number.NaN } })
+    expect(result?.columnSizing).toBeUndefined()
+  })
+
+  it('preserves columnSizing alongside the other settings', () => {
+    const result = sanitizePerspectiveSettings({
+      columnOrder: ['a', 'b'],
+      columnVisibility: { a: false },
+      columnSizing: { a: 300 },
+    })
+    expect(result).toEqual({
+      columnOrder: ['a', 'b'],
+      columnVisibility: { a: false },
+      columnSizing: { a: 300 },
+    })
+  })
+})

package/src/backend/__tests__/DataTable.perspectiveStorage.test.ts

@@ -17,6 +17,16 @@ describe('DataTable perspective snapshot storage (versioned envelope)', () => {
     expect(readPerspectiveSnapshot('tbl')).toEqual(snapshot)
   })
 
+  it('round-trips user column widths (columnSizing) through the snapshot (#1835)', () => {
+    const snapshot = {
+      perspectiveId: 'p1',
+      settings: { columnOrder: ['a', 'b'], columnSizing: { a: 240, b: 120 } },
+      updatedAt: 456,
+    }
+    writePerspectiveSnapshot('tbl-sizing', snapshot)
+    expect(readPerspectiveSnapshot('tbl-sizing')).toEqual(snapshot)
+  })
+
   it('migrates a legacy bare (pre-envelope) snapshot on read', () => {
     const legacy = { perspectiveId: 'p2', settings: { columnOrder: ['x'] }, updatedAt: 7 }
     localStorage.setItem(`${PREFIX}:tbl2`, JSON.stringify(legacy))