@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/hooks/useAnnotations.js

@@ -0,0 +1,115 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiCall } from "../../utils/apiCall.js";
+function annotationKey(target, columnKey) {
+  return `${target.entityType}:${target.rowId}:${columnKey}`;
+}
+const NO_TARGETS = [];
+function useAnnotations({
+  enabled,
+  targets,
+  entityType,
+  data,
+  idColumnName
+}) {
+  const [annotations, setAnnotations] = useState(/* @__PURE__ */ new Map());
+  const [loading, setLoading] = useState(false);
+  const abortControllerRef = useRef(null);
+  const resolvedTargets = useMemo(() => {
+    if (targets) return targets;
+    if (!entityType || !data) return NO_TARGETS;
+    const idKey = idColumnName || "id";
+    return data.map((row) => ({ entityType, rowId: String(row?.[idKey] ?? "") })).filter((target) => target.rowId);
+  }, [targets, entityType, data, idColumnName]);
+  const targetsKey = useMemo(
+    () => resolvedTargets.map((t) => `${t.entityType}\0${t.rowId}`).sort().join("
"),
+    [resolvedTargets]
+  );
+  const targetsRef = useRef(resolvedTargets);
+  targetsRef.current = resolvedTargets;
+  const fetchAnnotations = useCallback(async () => {
+    const current = targetsRef.current;
+    if (!enabled || current.length === 0) {
+      setAnnotations(/* @__PURE__ */ new Map());
+      return;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+    setLoading(true);
+    try {
+      const groups = /* @__PURE__ */ new Map();
+      for (const target of current) {
+        if (!target.entityType || !target.rowId) continue;
+        const existing = groups.get(target.entityType);
+        if (existing) existing.add(target.rowId);
+        else groups.set(target.entityType, /* @__PURE__ */ new Set([target.rowId]));
+      }
+      if (groups.size === 0) {
+        setAnnotations(/* @__PURE__ */ new Map());
+        return;
+      }
+      const fetches = Array.from(groups.entries()).map(async ([entityType2, rowIds]) => {
+        const params = new URLSearchParams({
+          entityType: entityType2,
+          rowIds: Array.from(rowIds).join(",")
+        });
+        const { ok, result } = await apiCall(`/api/annotations/annotations?${params}`, { signal });
+        if (!ok || !result) return [];
+        const items = result.items || result.data || result || [];
+        return items.map((item) => ({ ...item, entityType: item.entityType ?? entityType2 }));
+      });
+      const results = await Promise.all(fetches);
+      const allItems = results.flat();
+      const map = /* @__PURE__ */ new Map();
+      for (const annotation of allItems) {
+        const key = annotationKey(
+          {
+            entityType: annotation.entityType ?? annotation.entity_type ?? "",
+            rowId: String(annotation.rowId ?? annotation.row_id ?? "")
+          },
+          annotation.columnKey || annotation.column_key
+        );
+        const comments = (annotation.comments || []).map((c) => ({
+          id: c.id,
+          content: c.content ?? "",
+          userName: c.userName ?? c.user_name ?? void 0,
+          userId: c.userId ?? c.user_id ?? void 0,
+          createdAt: c.createdAt ?? c.created_at ?? void 0,
+          audience: c.audience ?? "internal"
+        }));
+        map.set(key, {
+          id: annotation.id,
+          color: annotation.color || null,
+          commentCount: comments.length || annotation.commentCount || 0,
+          comments,
+          assignees: (annotation.assignees || []).map((a) => ({ userId: a.userId || a.user_id }))
+        });
+      }
+      setAnnotations(map);
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") return;
+      console.error("Failed to fetch annotations:", error);
+      setAnnotations(/* @__PURE__ */ new Map());
+    } finally {
+      setLoading(false);
+    }
+  }, [enabled, targetsKey]);
+  useEffect(() => {
+    fetchAnnotations();
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [fetchAnnotations]);
+  return {
+    annotations,
+    loading,
+    refresh: fetchAnnotations
+  };
+}
+export {
+  annotationKey,
+  useAnnotations
+};
+//# sourceMappingURL=useAnnotations.js.map

package/dist/backend/dynamic-table/hooks/useAnnotations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/hooks/useAnnotations.ts"],
+  "sourcesContent": ["import { useState, useEffect, useCallback, useMemo, useRef } from 'react';\nimport { apiCall } from '../../utils/apiCall';\n\n/** Who a comment is written for \u2014 see `packages/annotations` (workshop B8c). */\nexport type CellCommentAudience = 'internal' | 'carrier';\n\nexport interface AnnotationComment {\n  id: string;\n  content: string;\n  userName?: string;\n  userId?: string;\n  createdAt?: string;\n  /** `carrier` = printed on the waybill; `internal` = a note between colleagues. */\n  audience?: CellCommentAudience;\n}\n\nexport interface CellAnnotationInfo {\n  id: string;\n  color: string | null;\n  commentCount: number;\n  /** The comment thread for this cell \u2014 used by the hover preview popup. */\n  comments: AnnotationComment[];\n  assignees: Array<{ userId: string }>;\n}\n\nexport type AnnotationMap = Map<string, CellAnnotationInfo>;\n\n/**\n * One cell's annotation target (workshop B8a).\n *\n * A grid row is not always one record. On the transport list a row is a\n * unit-LEG: the truck plate belongs to the leg, the container number belongs to\n * the container that travels on both legs. Keying every comment by the row's id\n * column made a container note appear on both legs \u2014 \"on si\u0119 teraz powiela w\n * innych miejscach\". A cell therefore names its own target.\n */\nexport interface AnnotationTarget {\n  entityType: string;\n  rowId: string;\n}\n\n/** Map key. `entityType` is part of it precisely so two scopes cannot collide. */\nexport function annotationKey(target: AnnotationTarget, columnKey: string): string {\n  return `${target.entityType}:${target.rowId}:${columnKey}`;\n}\n\ninterface UseAnnotationsOptions {\n  enabled: boolean;\n  /**\n   * Every (entityType, rowId) pair on screen, already de-duplicated by the\n   * caller. One request per distinct `entityType`.\n   */\n  targets?: AnnotationTarget[];\n  /**\n   * @deprecated Pass `targets` instead. Still read so a consumer compiled\n   * against the pre-`targets` signature keeps its annotations \u2014 see the note\n   * on `resolvedTargets` below.\n   */\n  entityType?: string;\n  /** @deprecated Pass `targets` instead. */\n  data?: Array<Record<string, unknown>>;\n  /** @deprecated Pass `targets` instead. Defaults to `id`, as it always did. */\n  idColumnName?: string;\n}\n\n/** Stable identity, so \"nothing to annotate\" does not re-key the fetch memo. */\nconst NO_TARGETS: AnnotationTarget[] = [];\n\nexport function useAnnotations({\n  enabled,\n  targets,\n  entityType,\n  data,\n  idColumnName,\n}: UseAnnotationsOptions) {\n  const [annotations, setAnnotations] = useState<AnnotationMap>(new Map());\n  const [loading, setLoading] = useState(false);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  /**\n   * Walkthrough 2026-08-27 bug 27 \u2014 why the legacy option shape is still read.\n   *\n   * `targets` replaced `{ entityType, data, idColumnName }` (workshop B8a: a\n   * grid row is not always one record). The rename shipped on a PUBLISHED\n   * surface with no bridge, and `targets.map(...)` below ran unguarded \u2014 so a\n   * consumer built against the old signature did not lose its comments, it\n   * threw a TypeError on the FIRST render, before any request was made.\n   *\n   * That is not hypothetical. `@freighttech/invoicing` declares\n   * `\"@freighttech/ui\": \"0.13.0\"` as a peer, so the INF deployment resolved ui\n   * 0.13.15 alongside invoicing 0.13.2 \u2014 old caller, new hook. Every\n   * `/backend/invoicing/<id>/allocate` answered 500, for every id, including\n   * ids that match no invoice: the crash is in the render, not the data. Cost\n   * allocation was unreachable and the release walkthrough stopped there.\n   *\n   * A missing or renamed option must cost the annotations, never the page. An\n   * absent `targets` therefore resolves to \"nothing to annotate\", and the\n   * legacy trio is mapped forward rather than dropped so an un-republished\n   * consumer keeps working until it is rebuilt.\n   */\n  const resolvedTargets = useMemo(() => {\n    if (targets) return targets;\n    if (!entityType || !data) return NO_TARGETS;\n    const idKey = idColumnName || 'id';\n    return data\n      .map((row) => ({ entityType, rowId: String(row?.[idKey] ?? '') }))\n      .filter((target) => target.rowId);\n  }, [targets, entityType, data, idColumnName]);\n\n  // Refetch on CONTENT, not identity: `targets` is rebuilt whenever the data\n  // page or the column set changes, and a column reorder must not re-request\n  // every annotation on the page.\n  const targetsKey = useMemo(\n    () => resolvedTargets.map((t) => `${t.entityType}\\u0000${t.rowId}`).sort().join('\\u0001'),\n    [resolvedTargets],\n  );\n  const targetsRef = useRef(resolvedTargets);\n  targetsRef.current = resolvedTargets;\n\n  const fetchAnnotations = useCallback(async () => {\n    const current = targetsRef.current;\n    if (!enabled || current.length === 0) {\n      setAnnotations(new Map());\n      return;\n    }\n\n    // Abort previous request\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n    abortControllerRef.current = new AbortController();\n    const signal = abortControllerRef.current.signal;\n\n    setLoading(true);\n    try {\n      const groups = new Map<string, Set<string>>();\n      for (const target of current) {\n        if (!target.entityType || !target.rowId) continue;\n        const existing = groups.get(target.entityType);\n        if (existing) existing.add(target.rowId);\n        else groups.set(target.entityType, new Set([target.rowId]));\n      }\n\n      if (groups.size === 0) {\n        setAnnotations(new Map());\n        return;\n      }\n\n      const fetches = Array.from(groups.entries()).map(async ([entityType, rowIds]) => {\n        const params = new URLSearchParams({\n          entityType,\n          rowIds: Array.from(rowIds).join(','),\n        });\n        const { ok, result } = await apiCall<any>(`/api/annotations/annotations?${params}`, { signal });\n        if (!ok || !result) return [] as any[];\n        const items: any[] = result.items || result.data || result || [];\n        // The endpoint echoes `entityType`, but fall back to the group's key so\n        // an older response shape still lands in the right bucket.\n        return items.map((item) => ({ ...item, entityType: item.entityType ?? entityType }));\n      });\n\n      const results = await Promise.all(fetches);\n      const allItems = results.flat();\n\n      const map: AnnotationMap = new Map();\n      for (const annotation of allItems) {\n        const key = annotationKey(\n          {\n            entityType: annotation.entityType ?? annotation.entity_type ?? '',\n            rowId: String(annotation.rowId ?? annotation.row_id ?? ''),\n          },\n          annotation.columnKey || annotation.column_key,\n        );\n        const comments: AnnotationComment[] = (annotation.comments || []).map((c: any) => ({\n          id: c.id,\n          content: c.content ?? '',\n          userName: c.userName ?? c.user_name ?? undefined,\n          userId: c.userId ?? c.user_id ?? undefined,\n          createdAt: c.createdAt ?? c.created_at ?? undefined,\n          audience: (c.audience as CellCommentAudience) ?? 'internal',\n        }));\n        map.set(key, {\n          id: annotation.id,\n          color: annotation.color || null,\n          commentCount: comments.length || annotation.commentCount || 0,\n          comments,\n          assignees: (annotation.assignees || []).map((a: any) => ({ userId: a.userId || a.user_id })),\n        });\n      }\n      setAnnotations(map);\n    } catch (error) {\n      if (error instanceof Error && error.name === 'AbortError') return;\n      console.error('Failed to fetch annotations:', error);\n      setAnnotations(new Map());\n    } finally {\n      setLoading(false);\n    }\n    // `targetsKey` is the real dependency \u2014 see the note on the memo above.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, targetsKey]);\n\n  // Fetch when the target set changes\n  useEffect(() => {\n    fetchAnnotations();\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, [fetchAnnotations]);\n\n  return {\n    annotations,\n    loading,\n    refresh: fetchAnnotations,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,SAAS,cAAc;AAClE,SAAS,eAAe;AAyCjB,SAAS,cAAc,QAA0B,WAA2B;AACjF,SAAO,GAAG,OAAO,UAAU,IAAI,OAAO,KAAK,IAAI,SAAS;AAC1D;AAsBA,MAAM,aAAiC,CAAC;AAEjC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,oBAAI,IAAI,CAAC;AACvE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,qBAAqB,OAA+B,IAAI;AAuB9D,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,QAAS,QAAO;AACpB,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,UAAM,QAAQ,gBAAgB;AAC9B,WAAO,KACJ,IAAI,CAAC,SAAS,EAAE,YAAY,OAAO,OAAO,MAAM,KAAK,KAAK,EAAE,EAAE,EAAE,EAChE,OAAO,CAAC,WAAW,OAAO,KAAK;AAAA,EACpC,GAAG,CAAC,SAAS,YAAY,MAAM,YAAY,CAAC;AAK5C,QAAM,aAAa;AAAA,IACjB,MAAM,gBAAgB,IAAI,CAAC,MAAM,GAAG,EAAE,UAAU,KAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,GAAQ;AAAA,IACxF,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,aAAa,OAAO,eAAe;AACzC,aAAW,UAAU;AAErB,QAAM,mBAAmB,YAAY,YAAY;AAC/C,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AACpC,qBAAe,oBAAI,IAAI,CAAC;AACxB;AAAA,IACF;AAGA,QAAI,mBAAmB,SAAS;AAC9B,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AACA,uBAAmB,UAAU,IAAI,gBAAgB;AACjD,UAAM,SAAS,mBAAmB,QAAQ;AAE1C,eAAW,IAAI;AACf,QAAI;AACF,YAAM,SAAS,oBAAI,IAAyB;AAC5C,iBAAW,UAAU,SAAS;AAC5B,YAAI,CAAC,OAAO,cAAc,CAAC,OAAO,MAAO;AACzC,cAAM,WAAW,OAAO,IAAI,OAAO,UAAU;AAC7C,YAAI,SAAU,UAAS,IAAI,OAAO,KAAK;AAAA,YAClC,QAAO,IAAI,OAAO,YAAY,oBAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;AAAA,MAC5D;AAEA,UAAI,OAAO,SAAS,GAAG;AACrB,uBAAe,oBAAI,IAAI,CAAC;AACxB;AAAA,MACF;AAEA,YAAM,UAAU,MAAM,KAAK,OAAO,QAAQ,CAAC,EAAE,IAAI,OAAO,CAACA,aAAY,MAAM,MAAM;AAC/E,cAAM,SAAS,IAAI,gBAAgB;AAAA,UACjC,YAAAA;AAAA,UACA,QAAQ,MAAM,KAAK,MAAM,EAAE,KAAK,GAAG;AAAA,QACrC,CAAC;AACD,cAAM,EAAE,IAAI,OAAO,IAAI,MAAM,QAAa,gCAAgC,MAAM,IAAI,EAAE,OAAO,CAAC;AAC9F,YAAI,CAAC,MAAM,CAAC,OAAQ,QAAO,CAAC;AAC5B,cAAM,QAAe,OAAO,SAAS,OAAO,QAAQ,UAAU,CAAC;AAG/D,eAAO,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,YAAY,KAAK,cAAcA,YAAW,EAAE;AAAA,MACrF,CAAC;AAED,YAAM,UAAU,MAAM,QAAQ,IAAI,OAAO;AACzC,YAAM,WAAW,QAAQ,KAAK;AAE9B,YAAM,MAAqB,oBAAI,IAAI;AACnC,iBAAW,cAAc,UAAU;AACjC,cAAM,MAAM;AAAA,UACV;AAAA,YACE,YAAY,WAAW,cAAc,WAAW,eAAe;AAAA,YAC/D,OAAO,OAAO,WAAW,SAAS,WAAW,UAAU,EAAE;AAAA,UAC3D;AAAA,UACA,WAAW,aAAa,WAAW;AAAA,QACrC;AACA,cAAM,YAAiC,WAAW,YAAY,CAAC,GAAG,IAAI,CAAC,OAAY;AAAA,UACjF,IAAI,EAAE;AAAA,UACN,SAAS,EAAE,WAAW;AAAA,UACtB,UAAU,EAAE,YAAY,EAAE,aAAa;AAAA,UACvC,QAAQ,EAAE,UAAU,EAAE,WAAW;AAAA,UACjC,WAAW,EAAE,aAAa,EAAE,cAAc;AAAA,UAC1C,UAAW,EAAE,YAAoC;AAAA,QACnD,EAAE;AACF,YAAI,IAAI,KAAK;AAAA,UACX,IAAI,WAAW;AAAA,UACf,OAAO,WAAW,SAAS;AAAA,UAC3B,cAAc,SAAS,UAAU,WAAW,gBAAgB;AAAA,UAC5D;AAAA,UACA,YAAY,WAAW,aAAa,CAAC,GAAG,IAAI,CAAC,OAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;AAAA,QAC7F,CAAC;AAAA,MACH;AACA,qBAAe,GAAG;AAAA,IACpB,SAAS,OAAO;AACd,UAAI,iBAAiB,SAAS,MAAM,SAAS,aAAc;AAC3D,cAAQ,MAAM,gCAAgC,KAAK;AACnD,qBAAe,oBAAI,IAAI,CAAC;AAAA,IAC1B,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EAGF,GAAG,CAAC,SAAS,UAAU,CAAC;AAGxB,YAAU,MAAM;AACd,qBAAiB;AACjB,WAAO,MAAM;AACX,yBAAmB,SAAS,MAAM;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "names": ["entityType"]
+}

package/dist/backend/dynamic-table/hooks/useColumnVirtualizer.js

@@ -0,0 +1,155 @@
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  DEFAULT_COLUMN_OVERSCAN,
+  buildColumnWindow,
+  computeColumnGeometry,
+  computeScrollLeftToReveal,
+  createFullColumnWindow,
+  getAriaColCount,
+  getAriaColIndex
+} from "../utils/columnWindow.js";
+function useIndexListKey(list) {
+  return React.useMemo(() => list && list.length ? list.join(",") : "", [list]);
+}
+function useColumnVirtualizer(options) {
+  const {
+    enabled = false,
+    columnCount,
+    getColumnWidth,
+    getScrollElement,
+    pinnedLeftIndices,
+    pinnedRightIndices,
+    forcedIndices,
+    overscan = DEFAULT_COLUMN_OVERSCAN,
+    leadingWidth = 0,
+    trailingWidth = 0,
+    widthRevision = 0,
+    getColumnKey,
+    hasRowHeader = false,
+    hasActionsColumn = false
+  } = options;
+  const getColumnWidthRef = React.useRef(getColumnWidth);
+  getColumnWidthRef.current = getColumnWidth;
+  const getColumnKeyRef = React.useRef(getColumnKey);
+  getColumnKeyRef.current = getColumnKey;
+  const getScrollElementRef = React.useRef(getScrollElement);
+  getScrollElementRef.current = getScrollElement;
+  const estimateSize = React.useCallback(
+    (index) => getColumnWidthRef.current(index),
+    []
+  );
+  const getItemKey = React.useCallback(
+    (index) => getColumnKeyRef.current?.(index) ?? index,
+    []
+  );
+  const getScrollElementStable = React.useCallback(() => getScrollElementRef.current(), []);
+  const geometry = React.useMemo(
+    () => computeColumnGeometry(columnCount, (i) => getColumnWidthRef.current(i), {
+      leadingWidth,
+      trailingWidth
+    }),
+    // getColumnWidth is read through a ref, so `widthRevision` is what makes the
+    // prefix sums recompute after a resize.
+    [columnCount, leadingWidth, trailingWidth, widthRevision]
+  );
+  const virtualizer = useVirtualizer({
+    count: columnCount,
+    getScrollElement: getScrollElementStable,
+    estimateSize,
+    getItemKey,
+    horizontal: true,
+    // We own overscan (see module comment) — the library gives us the bare
+    // intersecting range.
+    overscan: 0,
+    enabled
+  });
+  React.useEffect(() => {
+    if (!enabled) return;
+    virtualizer.measure();
+  }, [enabled, widthRevision, columnCount, virtualizer]);
+  const virtualItems = enabled ? virtualizer.getVirtualItems() : [];
+  const baseRange = virtualItems.length > 0 ? {
+    startIndex: virtualItems[0].index,
+    endIndex: virtualItems[virtualItems.length - 1].index
+  } : null;
+  const pinnedLeftKey = useIndexListKey(pinnedLeftIndices);
+  const pinnedRightKey = useIndexListKey(pinnedRightIndices);
+  const forcedKey = useIndexListKey(forcedIndices);
+  const columnWindow = React.useMemo(() => {
+    const getKey = getColumnKeyRef.current;
+    if (!enabled || baseRange === null) {
+      return createFullColumnWindow(geometry, {
+        pinnedLeftIndices,
+        pinnedRightIndices,
+        getColumnKey: getKey
+      });
+    }
+    return buildColumnWindow({
+      geometry,
+      range: baseRange,
+      overscan,
+      pinnedLeftIndices,
+      pinnedRightIndices,
+      forcedIndices,
+      getColumnKey: getKey
+    });
+  }, [
+    enabled,
+    geometry,
+    baseRange?.startIndex,
+    baseRange?.endIndex,
+    baseRange === null,
+    overscan,
+    pinnedLeftKey,
+    pinnedRightKey,
+    forcedKey
+  ]);
+  const scrollToColumn = React.useCallback(
+    (columnIndex, scrollOptions) => {
+      const element = getScrollElementRef.current();
+      if (!element) return;
+      const target = computeScrollLeftToReveal(geometry, columnIndex, {
+        scrollLeft: element.scrollLeft,
+        viewportWidth: element.clientWidth,
+        pinnedLeftWidth: columnWindow.pinnedLeftWidth,
+        pinnedRightWidth: columnWindow.pinnedRightWidth,
+        align: scrollOptions?.align,
+        pinnedIndices: columnWindow.mountedIndices.length ? [...pinnedLeftIndices ?? [], ...pinnedRightIndices ?? []] : void 0
+      });
+      if (target === null) return;
+      if (typeof element.scrollTo === "function") {
+        element.scrollTo({ left: target, behavior: scrollOptions?.behavior ?? "auto" });
+      } else {
+        element.scrollLeft = target;
+      }
+    },
+    [geometry, columnWindow, pinnedLeftIndices, pinnedRightIndices]
+  );
+  const measure = React.useCallback(() => virtualizer.measure(), [virtualizer]);
+  const ariaColCount = React.useMemo(
+    () => getAriaColCount(columnCount, { hasRowHeader, hasActionsColumn }),
+    [columnCount, hasRowHeader, hasActionsColumn]
+  );
+  const ariaColIndexFor = React.useCallback(
+    (columnIndex) => getAriaColIndex(columnIndex, { hasRowHeader }),
+    [hasRowHeader]
+  );
+  return React.useMemo(
+    () => ({
+      ...columnWindow,
+      ariaColCount,
+      getAriaColIndex: ariaColIndexFor,
+      scrollToColumn,
+      measure,
+      geometry
+    }),
+    [columnWindow, ariaColCount, ariaColIndexFor, scrollToColumn, measure, geometry]
+  );
+}
+var useColumnVirtualizer_default = useColumnVirtualizer;
+export {
+  useColumnVirtualizer_default as default,
+  useColumnVirtualizer
+};
+//# sourceMappingURL=useColumnVirtualizer.js.map

package/dist/backend/dynamic-table/hooks/useColumnVirtualizer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/hooks/useColumnVirtualizer.ts"],
+  "sourcesContent": ["/**\n * HORIZONTAL (COLUMN) VIRTUALIZATION \u2014 REACT WRAPPER\n * ==================================================\n *\n * A thin wrapper. All correctness lives in `../utils/columnWindow.ts`, which is\n * pure and unit-tested; this file only owns the three things that need React\n * and the DOM:\n *\n *   1. subscribing to scroll/resize (delegated to `@tanstack/react-virtual`,\n *      which already does the rAF batching, passive listeners, `scrollend`\n *      handling and `ResizeObserver` teardown correctly),\n *   2. rebuilding geometry when the user resizes a column,\n *   3. writing `scrollLeft` for scroll-into-view.\n *\n * WHY THE UNDERLYING VIRTUALIZER RUNS AT `overscan: 0`\n * ----------------------------------------------------\n * We apply overscan ourselves in `buildColumnWindow`, because our mounted set is\n * `window \u222A pinned \u222A forced` and the library has no concept of a force-mounted\n * item. Our window is a pure function of the library's base range, so it changes\n * exactly when the base range changes \u2014 running the library at `overscan: 0`\n * therefore costs no extra re-renders and gives us the earliest possible commit\n * (one full column before the viewport edge).\n *\n * WHY WE NEVER CALL `measureElement`\n * ----------------------------------\n * Column widths are already fully model-held: `store.getColumnWidth(i)` answers\n * for every `i` whether or not the column is mounted, resizing writes straight\n * to that map without touching the DOM, and widths persist by `col.data`.\n * Measuring the DOM instead would make geometry depend on what happens to be\n * mounted, which is the exact feedback loop that makes a virtualized grid\n * jitter. `estimateSize` reads the model and is authoritative.\n *\n * OPT-IN, NOT OPT-OUT\n * -------------------\n * `enabled` defaults to FALSE. 56 consumer files pass 231 renderer functions\n * into this grid and the renderer contract must not change; column\n * virtualization ships behind `uiConfig.enableColumnVirtualization` so the\n * stress fixture and the container table can adopt it first. When disabled this\n * hook still runs (hook order is fixed) but returns a full window \u2014 every column\n * mounted, no spacers, `virtualized: false` \u2014 which is byte-for-byte the render\n * the grid produces today.\n */\nimport * as React from 'react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  DEFAULT_COLUMN_OVERSCAN,\n  buildColumnWindow,\n  computeColumnGeometry,\n  computeScrollLeftToReveal,\n  createFullColumnWindow,\n  getAriaColCount,\n  getAriaColIndex,\n  type ColumnGeometry,\n  type ColumnRange,\n  type ColumnScrollAlign,\n  type ColumnWindow,\n} from '../utils/columnWindow';\n\nexport interface UseColumnVirtualizerOptions {\n  /**\n   * Master switch. Default FALSE \u2014 see the module comment. Wire it to\n   * `uiConfig.enableColumnVirtualization`.\n   */\n  enabled?: boolean;\n  /** Length of the FULL, view-ordered column array (`cols.length`). */\n  columnCount: number;\n  /**\n   * MUST be `store.getColumnWidth`, i.e. must answer for every index whether or\n   * not the column is mounted. Never a DOM measurement.\n   */\n  getColumnWidth: (index: number) => number;\n  /** The horizontally scrolling element \u2014 the same node the row virtualizer uses. */\n  getScrollElement: () => HTMLElement | null;\n  /**\n   * Indices of columns pinned to the LEFT: `sticky === 'left'` plus the runtime\n   * frozen set. Always mounted \u2014 `position: sticky` needs an element to exist.\n   * Derive with `getPinnedColumnIndices(cols, frozenColumns)`.\n   */\n  pinnedLeftIndices?: readonly number[];\n  /** Indices of columns pinned to the RIGHT (`sticky === 'right'`). Always mounted. */\n  pinnedRightIndices?: readonly number[];\n  /**\n   * Extra always-mounted indices: the selection anchor, the selection focus and\n   * the editing cell. Without these, moving the caret onto an off-window column\n   * paints nothing and `setEditingCell` mounts no editor.\n   */\n  forcedIndices?: readonly number[];\n  /** @default DEFAULT_COLUMN_OVERSCAN (3) \u2014 justification lives with the constant. */\n  overscan?: number;\n  /** Width of the row-header gutter (0 when `rowHeaders` is false). */\n  leadingWidth?: number;\n  /** Width of the sticky Actions column (0 when it is not rendered). */\n  trailingWidth?: number;\n  /**\n   * Bumped whenever ANY column width changes. Column widths are user-resizable\n   * and live in a mutable store map, so nothing else can tell React the prefix\n   * sums went stale. Pass the store revision, or better a width-only revision so\n   * a resize drag does not also re-render every row (Defect 6).\n   */\n  widthRevision?: number;\n  /** Stable per-column key, normally `(i) => cols[i].data`. */\n  getColumnKey?: (index: number) => string | number;\n  /** Whether a row-header column is rendered \u2014 affects `aria-colcount`/`-colindex`. */\n  hasRowHeader?: boolean;\n  /** Whether the Actions column is rendered \u2014 affects `aria-colcount`. */\n  hasActionsColumn?: boolean;\n}\n\nexport interface ColumnVirtualizer extends ColumnWindow {\n  /** `aria-colcount` for the grid element. Counts ALL columns, not the mounted ones. */\n  ariaColCount: number;\n  /** `aria-colindex` (1-based) for a data column index. */\n  getAriaColIndex: (columnIndex: number) => number;\n  /**\n   * Scrolls `columnIndex` into view. No-op when it is pinned or already visible.\n   * MUST be called in the same commit as a selection/edit move onto an\n   * off-window column, BEFORE any focus attempt.\n   */\n  scrollToColumn: (\n    columnIndex: number,\n    options?: { align?: ColumnScrollAlign; behavior?: ScrollBehavior }\n  ) => void;\n  /** Invalidates the virtualizer's cached sizes. Called for you on `widthRevision`. */\n  measure: () => void;\n  /** Prefix-sum geometry \u2014 the model answer to \"where is column i?\". */\n  geometry: ColumnGeometry;\n}\n\n/** Stable dependency key for an index list without depending on array identity. */\nfunction useIndexListKey(list: readonly number[] | undefined): string {\n  return React.useMemo(() => (list && list.length ? list.join(',') : ''), [list]);\n}\n\nexport function useColumnVirtualizer(\n  options: UseColumnVirtualizerOptions\n): ColumnVirtualizer {\n  const {\n    enabled = false,\n    columnCount,\n    getColumnWidth,\n    getScrollElement,\n    pinnedLeftIndices,\n    pinnedRightIndices,\n    forcedIndices,\n    overscan = DEFAULT_COLUMN_OVERSCAN,\n    leadingWidth = 0,\n    trailingWidth = 0,\n    widthRevision = 0,\n    getColumnKey,\n    hasRowHeader = false,\n    hasActionsColumn = false,\n  } = options;\n\n  // Callbacks read through refs so the virtualizer options keep a stable\n  // identity: `estimateSize` changing identity does NOT invalidate the library's\n  // measurement memo (it is keyed on count/paddingStart/getItemKey/enabled), so\n  // relying on identity here would be a silent staleness bug. `measure()` on\n  // `widthRevision` is the real invalidation path.\n  const getColumnWidthRef = React.useRef(getColumnWidth);\n  getColumnWidthRef.current = getColumnWidth;\n  const getColumnKeyRef = React.useRef(getColumnKey);\n  getColumnKeyRef.current = getColumnKey;\n  const getScrollElementRef = React.useRef(getScrollElement);\n  getScrollElementRef.current = getScrollElement;\n\n  const estimateSize = React.useCallback(\n    (index: number) => getColumnWidthRef.current(index),\n    []\n  );\n  const getItemKey = React.useCallback(\n    (index: number) => getColumnKeyRef.current?.(index) ?? index,\n    []\n  );\n  const getScrollElementStable = React.useCallback(() => getScrollElementRef.current(), []);\n\n  const geometry = React.useMemo(\n    () => computeColumnGeometry(columnCount, (i) => getColumnWidthRef.current(i), {\n      leadingWidth,\n      trailingWidth,\n    }),\n    // getColumnWidth is read through a ref, so `widthRevision` is what makes the\n    // prefix sums recompute after a resize.\n    [columnCount, leadingWidth, trailingWidth, widthRevision]\n  );\n\n  const virtualizer = useVirtualizer({\n    count: columnCount,\n    getScrollElement: getScrollElementStable,\n    estimateSize,\n    getItemKey,\n    horizontal: true,\n    // We own overscan (see module comment) \u2014 the library gives us the bare\n    // intersecting range.\n    overscan: 0,\n    enabled,\n  });\n\n  // Widths are model-held and mutable, so a resize must invalidate the library's\n  // size cache explicitly. `measure()` clears it and re-reads `estimateSize`.\n  React.useEffect(() => {\n    if (!enabled) return;\n    virtualizer.measure();\n  }, [enabled, widthRevision, columnCount, virtualizer]);\n\n  const virtualItems = enabled ? virtualizer.getVirtualItems() : [];\n  const baseRange: ColumnRange | null =\n    virtualItems.length > 0\n      ? {\n          startIndex: virtualItems[0].index,\n          endIndex: virtualItems[virtualItems.length - 1].index,\n        }\n      : null;\n\n  const pinnedLeftKey = useIndexListKey(pinnedLeftIndices);\n  const pinnedRightKey = useIndexListKey(pinnedRightIndices);\n  const forcedKey = useIndexListKey(forcedIndices);\n\n  const columnWindow = React.useMemo<ColumnWindow>(() => {\n    const getKey = getColumnKeyRef.current;\n    // Disabled, or enabled but not measured yet (SSR, first paint, a zero-width\n    // scroller). FAIL OPEN: mount everything. Correct-but-slow is the only\n    // acceptable failure direction \u2014 the alternative paints an empty grid.\n    if (!enabled || baseRange === null) {\n      return createFullColumnWindow(geometry, {\n        pinnedLeftIndices,\n        pinnedRightIndices,\n        getColumnKey: getKey,\n      });\n    }\n    return buildColumnWindow({\n      geometry,\n      range: baseRange,\n      overscan,\n      pinnedLeftIndices,\n      pinnedRightIndices,\n      forcedIndices,\n      getColumnKey: getKey,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    enabled,\n    geometry,\n    baseRange?.startIndex,\n    baseRange?.endIndex,\n    baseRange === null,\n    overscan,\n    pinnedLeftKey,\n    pinnedRightKey,\n    forcedKey,\n  ]);\n\n  const scrollToColumn = React.useCallback(\n    (\n      columnIndex: number,\n      scrollOptions?: { align?: ColumnScrollAlign; behavior?: ScrollBehavior }\n    ) => {\n      const element = getScrollElementRef.current();\n      if (!element) return;\n      const target = computeScrollLeftToReveal(geometry, columnIndex, {\n        scrollLeft: element.scrollLeft,\n        viewportWidth: element.clientWidth,\n        pinnedLeftWidth: columnWindow.pinnedLeftWidth,\n        pinnedRightWidth: columnWindow.pinnedRightWidth,\n        align: scrollOptions?.align,\n        pinnedIndices: columnWindow.mountedIndices.length\n          ? [...(pinnedLeftIndices ?? []), ...(pinnedRightIndices ?? [])]\n          : undefined,\n      });\n      if (target === null) return;\n      if (typeof element.scrollTo === 'function') {\n        element.scrollTo({ left: target, behavior: scrollOptions?.behavior ?? 'auto' });\n      } else {\n        element.scrollLeft = target;\n      }\n    },\n    [geometry, columnWindow, pinnedLeftIndices, pinnedRightIndices]\n  );\n\n  const measure = React.useCallback(() => virtualizer.measure(), [virtualizer]);\n\n  const ariaColCount = React.useMemo(\n    () => getAriaColCount(columnCount, { hasRowHeader, hasActionsColumn }),\n    [columnCount, hasRowHeader, hasActionsColumn]\n  );\n  const ariaColIndexFor = React.useCallback(\n    (columnIndex: number) => getAriaColIndex(columnIndex, { hasRowHeader }),\n    [hasRowHeader]\n  );\n\n  return React.useMemo<ColumnVirtualizer>(\n    () => ({\n      ...columnWindow,\n      ariaColCount,\n      getAriaColIndex: ariaColIndexFor,\n      scrollToColumn,\n      measure,\n      geometry,\n    }),\n    [columnWindow, ariaColCount, ariaColIndexFor, scrollToColumn, measure, geometry]\n  );\n}\n\nexport default useColumnVirtualizer;\n"],
+  "mappings": "AA0CA,YAAY,WAAW;AACvB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAyEP,SAAS,gBAAgB,MAA6C;AACpE,SAAO,MAAM,QAAQ,MAAO,QAAQ,KAAK,SAAS,KAAK,KAAK,GAAG,IAAI,IAAK,CAAC,IAAI,CAAC;AAChF;AAEO,SAAS,qBACd,SACmB;AACnB,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,EACrB,IAAI;AAOJ,QAAM,oBAAoB,MAAM,OAAO,cAAc;AACrD,oBAAkB,UAAU;AAC5B,QAAM,kBAAkB,MAAM,OAAO,YAAY;AACjD,kBAAgB,UAAU;AAC1B,QAAM,sBAAsB,MAAM,OAAO,gBAAgB;AACzD,sBAAoB,UAAU;AAE9B,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAkB,kBAAkB,QAAQ,KAAK;AAAA,IAClD,CAAC;AAAA,EACH;AACA,QAAM,aAAa,MAAM;AAAA,IACvB,CAAC,UAAkB,gBAAgB,UAAU,KAAK,KAAK;AAAA,IACvD,CAAC;AAAA,EACH;AACA,QAAM,yBAAyB,MAAM,YAAY,MAAM,oBAAoB,QAAQ,GAAG,CAAC,CAAC;AAExF,QAAM,WAAW,MAAM;AAAA,IACrB,MAAM,sBAAsB,aAAa,CAAC,MAAM,kBAAkB,QAAQ,CAAC,GAAG;AAAA,MAC5E;AAAA,MACA;AAAA,IACF,CAAC;AAAA;AAAA;AAAA,IAGD,CAAC,aAAa,cAAc,eAAe,aAAa;AAAA,EAC1D;AAEA,QAAM,cAAc,eAAe;AAAA,IACjC,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,YAAY;AAAA;AAAA;AAAA,IAGZ,UAAU;AAAA,IACV;AAAA,EACF,CAAC;AAID,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,SAAS,eAAe,aAAa,WAAW,CAAC;AAErD,QAAM,eAAe,UAAU,YAAY,gBAAgB,IAAI,CAAC;AAChE,QAAM,YACJ,aAAa,SAAS,IAClB;AAAA,IACE,YAAY,aAAa,CAAC,EAAE;AAAA,IAC5B,UAAU,aAAa,aAAa,SAAS,CAAC,EAAE;AAAA,EAClD,IACA;AAEN,QAAM,gBAAgB,gBAAgB,iBAAiB;AACvD,QAAM,iBAAiB,gBAAgB,kBAAkB;AACzD,QAAM,YAAY,gBAAgB,aAAa;AAE/C,QAAM,eAAe,MAAM,QAAsB,MAAM;AACrD,UAAM,SAAS,gBAAgB;AAI/B,QAAI,CAAC,WAAW,cAAc,MAAM;AAClC,aAAO,uBAAuB,UAAU;AAAA,QACtC;AAAA,QACA;AAAA,QACA,cAAc;AAAA,MAChB,CAAC;AAAA,IACH;AACA,WAAO,kBAAkB;AAAA,MACvB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AAAA,EAEH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CACE,aACA,kBACG;AACH,YAAM,UAAU,oBAAoB,QAAQ;AAC5C,UAAI,CAAC,QAAS;AACd,YAAM,SAAS,0BAA0B,UAAU,aAAa;AAAA,QAC9D,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QACvB,iBAAiB,aAAa;AAAA,QAC9B,kBAAkB,aAAa;AAAA,QAC/B,OAAO,eAAe;AAAA,QACtB,eAAe,aAAa,eAAe,SACvC,CAAC,GAAI,qBAAqB,CAAC,GAAI,GAAI,sBAAsB,CAAC,CAAE,IAC5D;AAAA,MACN,CAAC;AACD,UAAI,WAAW,KAAM;AACrB,UAAI,OAAO,QAAQ,aAAa,YAAY;AAC1C,gBAAQ,SAAS,EAAE,MAAM,QAAQ,UAAU,eAAe,YAAY,OAAO,CAAC;AAAA,MAChF,OAAO;AACL,gBAAQ,aAAa;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,cAAc,mBAAmB,kBAAkB;AAAA,EAChE;AAEA,QAAM,UAAU,MAAM,YAAY,MAAM,YAAY,QAAQ,GAAG,CAAC,WAAW,CAAC;AAE5E,QAAM,eAAe,MAAM;AAAA,IACzB,MAAM,gBAAgB,aAAa,EAAE,cAAc,iBAAiB,CAAC;AAAA,IACrE,CAAC,aAAa,cAAc,gBAAgB;AAAA,EAC9C;AACA,QAAM,kBAAkB,MAAM;AAAA,IAC5B,CAAC,gBAAwB,gBAAgB,aAAa,EAAE,aAAa,CAAC;AAAA,IACtE,CAAC,YAAY;AAAA,EACf;AAEA,SAAO,MAAM;AAAA,IACX,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,iBAAiB,gBAAgB,SAAS,QAAQ;AAAA,EACjF;AACF;AAEA,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/backend/dynamic-table/hooks/useColumnWidthPersistence.js

@@ -0,0 +1,135 @@
+"use client";
+import * as React from "react";
+import { apiCall } from "@freighttech/ui/backend/utils/apiCall";
+import { getCurrentOrganizationScope } from "@open-mercato/shared/lib/frontend/organizationEvents";
+const STORAGE_PREFIX = "fms.dt.colw";
+const SCOPE_CACHE_KEY = "fms.dt.uid";
+const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function keyFor(scope, tableId) {
+  return `${STORAGE_PREFIX}:${scope}:${tableId}`;
+}
+function syncScope() {
+  try {
+    const cached = window.localStorage.getItem(SCOPE_CACHE_KEY);
+    if (cached) return { scope: cached, fromCache: true };
+  } catch {
+  }
+  let org = null;
+  try {
+    org = getCurrentOrganizationScope().organizationId;
+  } catch {
+  }
+  return { scope: org || "shared", fromCache: false };
+}
+function readStored(key) {
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") return parsed;
+  } catch {
+  }
+  return {};
+}
+function writeStored(key, value) {
+  try {
+    if (Object.keys(value).length === 0) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function applyStored(store, cols, stored, userResizedColsRef) {
+  let applied = 0;
+  cols.forEach((col, idx) => {
+    const w = stored[col.data];
+    if (typeof w === "number" && w > 0) {
+      store.setColumnWidth(idx, w);
+      userResizedColsRef.current.add(idx);
+      applied++;
+    }
+  });
+  return applied;
+}
+function useColumnWidthPersistence({
+  tableId,
+  store,
+  cols,
+  userResizedColsRef
+}) {
+  const scopeRef = React.useRef("");
+  const scopeFromCacheRef = React.useRef(false);
+  const appliedKeyRef = React.useRef("");
+  const [, forceRender] = React.useReducer((n) => n + 1, 0);
+  const colsRef = React.useRef(cols);
+  colsRef.current = cols;
+  useIsoLayoutEffect(() => {
+    if (!tableId) return;
+    const { scope, fromCache } = syncScope();
+    scopeRef.current = scope;
+    scopeFromCacheRef.current = fromCache;
+    const key = keyFor(scope, tableId);
+    if (appliedKeyRef.current === key) return;
+    appliedKeyRef.current = key;
+    if (applyStored(store, cols, readStored(key), userResizedColsRef) > 0) forceRender();
+  }, [tableId, store, userResizedColsRef]);
+  React.useEffect(() => {
+    if (!tableId) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await apiCall("/api/auth/feature-check", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ features: [] })
+        });
+        if (cancelled || !res.ok) return;
+        const uid = res.result?.userId;
+        if (typeof uid !== "string" || !uid) return;
+        const prevScope = scopeRef.current;
+        const prevFromCache = scopeFromCacheRef.current;
+        try {
+          window.localStorage.setItem(SCOPE_CACHE_KEY, uid);
+        } catch {
+        }
+        if (prevScope === uid) return;
+        const uidKey = keyFor(uid, tableId);
+        if (!prevFromCache) {
+          const carried = readStored(keyFor(prevScope, tableId));
+          if (Object.keys(carried).length) {
+            writeStored(uidKey, { ...carried, ...readStored(uidKey) });
+          }
+        } else {
+          store.reinitColumnWidths();
+          userResizedColsRef.current.clear();
+        }
+        scopeRef.current = uid;
+        scopeFromCacheRef.current = true;
+        appliedKeyRef.current = uidKey;
+        applyStored(store, colsRef.current, readStored(uidKey), userResizedColsRef);
+        forceRender();
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [tableId, store, userResizedColsRef]);
+  const persistResize = React.useCallback(
+    (colIndex) => {
+      if (!tableId) return;
+      const col = cols[colIndex];
+      if (!col) return;
+      const scope = scopeRef.current || syncScope().scope;
+      const key = keyFor(scope, tableId);
+      const stored = readStored(key);
+      stored[col.data] = store.getBaseColumnWidth(colIndex);
+      writeStored(key, stored);
+    },
+    [tableId, cols, store]
+  );
+  return { persistResize };
+}
+export {
+  useColumnWidthPersistence
+};
+//# sourceMappingURL=useColumnWidthPersistence.js.map

package/dist/backend/dynamic-table/hooks/useColumnWidthPersistence.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/hooks/useColumnWidthPersistence.ts"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { apiCall } from '@freighttech/ui/backend/utils/apiCall'\nimport { getCurrentOrganizationScope } from '@open-mercato/shared/lib/frontend/organizationEvents'\nimport type { CellStore } from '../store/index'\nimport type { ColumnDef } from '../types/index'\n\n// Column widths are a per-device ergonomic preference, so we persist them in\n// localStorage rather than server-side perspectives. The key is scoped to the\n// signed-in user (so two accounts on the same machine keep separate layouts),\n// falling back to the active organization and finally a shared bucket. Widths are\n// stored by column `data` key \u2014 NOT the store's column index \u2014 so they survive\n// column reorder / show-hide.\nconst STORAGE_PREFIX = 'fms.dt.colw'\n// Last authoritative userId, cached so the storage scope is known *synchronously*\n// on the next load. That lets us apply saved widths in a layout effect (before\n// the browser paints) instead of after an async /api/auth/feature-check round\n// trip \u2014 which is what caused the visible default-then-resize layout shift.\nconst SCOPE_CACHE_KEY = 'fms.dt.uid'\n\n// Apply widths before paint on the client; degrade to a no-op-safe passive effect\n// during SSR (useLayoutEffect warns and does nothing on the server).\nconst useIsoLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\ntype StoredWidths = Record<string, number>\n\nfunction keyFor(scope: string, tableId: string): string {\n  return `${STORAGE_PREFIX}:${scope}:${tableId}`\n}\n\n/** Best-effort scope resolvable without a network call: cached userId \u2192 org \u2192 shared. */\nfunction syncScope(): { scope: string; fromCache: boolean } {\n  try {\n    const cached = window.localStorage.getItem(SCOPE_CACHE_KEY)\n    if (cached) return { scope: cached, fromCache: true }\n  } catch {\n    /* storage unavailable */\n  }\n  let org: string | null = null\n  try {\n    org = getCurrentOrganizationScope().organizationId\n  } catch {\n    /* scope module not ready */\n  }\n  return { scope: org || 'shared', fromCache: false }\n}\n\nfunction readStored(key: string): StoredWidths {\n  try {\n    const raw = window.localStorage.getItem(key)\n    if (!raw) return {}\n    const parsed = JSON.parse(raw)\n    if (parsed && typeof parsed === 'object') return parsed as StoredWidths\n  } catch {\n    /* corrupt / unavailable storage \u2014 treat as empty */\n  }\n  return {}\n}\n\nfunction writeStored(key: string, value: StoredWidths): void {\n  try {\n    if (Object.keys(value).length === 0) window.localStorage.removeItem(key)\n    else window.localStorage.setItem(key, JSON.stringify(value))\n  } catch {\n    /* storage full / blocked (private mode) \u2014 silently skip persistence */\n  }\n}\n\n/** Returns how many columns were actually re-sized, so the caller can skip a needless re-render. */\nfunction applyStored(\n  store: CellStore,\n  cols: ColumnDef[],\n  stored: StoredWidths,\n  userResizedColsRef: React.MutableRefObject<Set<number>>,\n): number {\n  let applied = 0\n  cols.forEach((col, idx) => {\n    const w = stored[col.data]\n    if (typeof w === 'number' && w > 0) {\n      store.setColumnWidth(idx, w)\n      // Mark as user-resized so badge auto-fit / stretch don't override it.\n      userResizedColsRef.current.add(idx)\n      applied++\n    }\n  })\n  return applied\n}\n\nexport interface ColumnWidthPersistenceOptions {\n  /** Stable table identity. When omitted, persistence is disabled (legacy behavior). */\n  tableId?: string\n  store: CellStore\n  /** Columns in current (visible) order \u2014 index in this array maps to the store column index. */\n  cols: ColumnDef[]\n  /** Columns the user has explicitly sized; loaded widths are added so auto-fit/stretch won't override them. */\n  userResizedColsRef: React.MutableRefObject<Set<number>>\n}\n\nexport interface ColumnWidthPersistenceResult {\n  /** Call on resize end with the resized column index to persist its width. */\n  persistResize: (colIndex: number) => void\n}\n\nexport function useColumnWidthPersistence({\n  tableId,\n  store,\n  cols,\n  userResizedColsRef,\n}: ColumnWidthPersistenceOptions): ColumnWidthPersistenceResult {\n  // Scope the widths were last applied under. Kept in a ref so persistResize and\n  // the async confirmation below always read the current value without re-binding.\n  const scopeRef = React.useRef<string>('')\n  const scopeFromCacheRef = React.useRef<boolean>(false)\n  const appliedKeyRef = React.useRef<string>('')\n\n  // The store's change-subscription that drives the table's re-render is attached\n  // in a passive effect that runs *after* our mount layout effect, so writing\n  // widths to the store there notifies no one. Force a synchronous (pre-paint)\n  // re-render of this component so the applied widths actually get painted.\n  const [, forceRender] = React.useReducer((n: number) => n + 1, 0)\n\n  // Latest columns, read by the (run-once) async resolver without re-firing it.\n  const colsRef = React.useRef(cols)\n  colsRef.current = cols\n\n  // Apply saved widths BEFORE the first paint, using the synchronously-known\n  // scope \u2014 no layout shift. Guarded to run once per resolved key; column\n  // reorder/show-hide is handled by the store preserving widths across\n  // setColumns(), so this does not need to re-run on `cols` changes.\n  useIsoLayoutEffect(() => {\n    if (!tableId) return\n    const { scope, fromCache } = syncScope()\n    scopeRef.current = scope\n    scopeFromCacheRef.current = fromCache\n    const key = keyFor(scope, tableId)\n    if (appliedKeyRef.current === key) return\n    appliedKeyRef.current = key\n    if (applyStored(store, cols, readStored(key), userResizedColsRef) > 0) forceRender()\n    // `cols` intentionally read but not a trigger \u2014 see comment above.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableId, store, userResizedColsRef])\n\n  // Confirm the authoritative userId in the background and cache it for next load.\n  // If it differs from the scope we painted with, reconcile so the layout is both\n  // correct and never leaks between accounts:\n  //  \u2022 painted with an org/shared fallback (no cache yet) \u2192 same user's first\n  //    visit: migrate any widths saved under the fallback to the user key.\n  //  \u2022 painted with a *different* cached user id \u2192 another account on this\n  //    browser: wipe the borrowed layout and apply this user's own.\n  React.useEffect(() => {\n    if (!tableId) return\n    let cancelled = false\n    void (async () => {\n      try {\n        const res = await apiCall<{ ok: boolean; userId?: string }>('/api/auth/feature-check', {\n          method: 'POST',\n          headers: { 'content-type': 'application/json' },\n          body: JSON.stringify({ features: [] }),\n        })\n        if (cancelled || !res.ok) return\n        const uid = res.result?.userId\n        if (typeof uid !== 'string' || !uid) return\n\n        const prevScope = scopeRef.current\n        const prevFromCache = scopeFromCacheRef.current\n        try { window.localStorage.setItem(SCOPE_CACHE_KEY, uid) } catch { /* ignore */ }\n        if (prevScope === uid) return\n\n        const uidKey = keyFor(uid, tableId)\n        if (!prevFromCache) {\n          // Same user, first ever resolution: carry forward fallback-scoped widths.\n          const carried = readStored(keyFor(prevScope, tableId))\n          if (Object.keys(carried).length) {\n            writeStored(uidKey, { ...carried, ...readStored(uidKey) })\n          }\n        } else {\n          // Different account painted first \u2014 reset before applying this user's.\n          store.reinitColumnWidths()\n          userResizedColsRef.current.clear()\n        }\n        scopeRef.current = uid\n        scopeFromCacheRef.current = true\n        appliedKeyRef.current = uidKey\n        applyStored(store, colsRef.current, readStored(uidKey), userResizedColsRef)\n        forceRender()\n      } catch {\n        /* keep the scope we painted with */\n      }\n    })()\n    return () => { cancelled = true }\n    // Resolve the user id once per table \u2014 column changes are read via colsRef.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableId, store, userResizedColsRef])\n\n  const persistResize = React.useCallback(\n    (colIndex: number) => {\n      if (!tableId) return\n      const col = cols[colIndex]\n      if (!col) return\n      const scope = scopeRef.current || syncScope().scope\n      const key = keyFor(scope, tableId)\n      const stored = readStored(key)\n      // The DECLARED width. Persisting the painted one would save this\n      // session's fill-to-container surplus as if the user had chosen it, and\n      // a narrower window next time would then inherit a column nobody sized.\n      stored[col.data] = store.getBaseColumnWidth(colIndex)\n      writeStored(key, stored)\n    },\n    [tableId, cols, store],\n  )\n\n  return { persistResize }\n}\n"],
+  "mappings": "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",
+  "names": []
+}