@deadragdoll/reactnu 0.1.73 → 0.1.74

package/dist/components/TreeListView/TreeListView.d.ts

@@ -16,6 +16,8 @@ export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttribut
     acceptsDrop?: (item: NuDragDropItem) => boolean;
     activeItemId?: string;
     checkedIds?: string[];
+    /** Persists user-resized column widths in `localStorage` under `reactnu.<key>`. */
+    columnStoreKey?: string;
     onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: T, context: TreeListCellContext<T>) => void;
     columns: TreeListColumn<T>[];
     data: T[];
@@ -39,5 +41,9 @@ export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttribut
     selectedId?: string;
     uncheckedShape?: "box" | "none";
 };
-declare function TreeListViewInner<T extends TreeListItemBase<T>>({ acceptsDrop, activeItemId: activeItemIdProp, checkedIds, className, columns, onPopupMenu, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getDragItem, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemDragOut, onItemSelect, onDrop, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
+declare function TreeListViewInner<T extends TreeListItemBase<T>>({ acceptsDrop, activeItemId: activeItemIdProp, checkedIds, className, columnStoreKey, columns, onPopupMenu, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getDragItem, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemDragOut, onItemSelect, onDrop, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const TreeListView: <T extends TreeListItemBase<T>>(props: TreeListViewProps<T> & RefAttributes<TreeListViewHandle>) => ReturnType<typeof TreeListViewInner>;
+/** Semantic alias for `TreeListView` when used as a hierarchical data table. */
+export declare const TreeTable: <T extends TreeListItemBase<T>>(props: TreeListViewProps<T> & RefAttributes<TreeListViewHandle>) => ReturnType<typeof TreeListViewInner>;
+export type TreeTableHandle = TreeListViewHandle;
+export type TreeTableProps<T extends TreeListItemBase<T>> = TreeListViewProps<T>;

package/dist/index.cjs

@@ -71,6 +71,7 @@ __export(index_exports, {
   ToolDropButton: () => ToolDropButton,
   ToolSeparator: () => ToolSeparator,
   TreeListView: () => TreeListView,
+  TreeTable: () => TreeTable,
   TreeView: () => TreeView,
   Window: () => Window,
   WindowBar: () => WindowBar,
@@ -9803,11 +9804,42 @@ var TreeListViewRow = (0, import_react46.memo)(
 
 // src/components/TreeListView/TreeListView.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
+function getColumnStorageKey(columnStoreKey) {
+  const normalizedKey = columnStoreKey?.trim();
+  return normalizedKey ? `reactnu.${normalizedKey}` : null;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(rawValue);
+    if (!parsedValue || typeof parsedValue !== "object") {
+      return {};
+    }
+    return Object.fromEntries(
+      columns.flatMap((column) => {
+        const width = parsedValue[column.id];
+        if (typeof width !== "number" || !Number.isFinite(width)) {
+          return [];
+        }
+        return [[column.id, Math.max(width, column.minWidth ?? 0)]];
+      })
+    );
+  } catch {
+    return {};
+  }
+}
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
+  columnStoreKey,
   columns,
   onPopupMenu,
   data,
@@ -9832,6 +9864,9 @@ function TreeListViewInner({
   const rootRef = (0, import_react47.useRef)(null);
   const [rootElement, setRootElement] = (0, import_react47.useState)(null);
   const treeId = (0, import_react47.useId)();
+  const storageKey = getColumnStorageKey(columnStoreKey);
+  const loadedStorageKeyRef = (0, import_react47.useRef)(storageKey);
+  const shouldPersistColumnWidthsRef = (0, import_react47.useRef)(false);
   const itemRefs = (0, import_react47.useRef)({});
   const resizeFrameRef = (0, import_react47.useRef)(null);
   const resizeStateRef = (0, import_react47.useRef)(null);
@@ -9845,7 +9880,7 @@ function TreeListViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react47.useState)(null);
   const [autoColumnWidths, setAutoColumnWidths] = (0, import_react47.useState)({});
-  const [userColumnWidths, setUserColumnWidths] = (0, import_react47.useState)({});
+  const [userColumnWidths, setUserColumnWidths] = (0, import_react47.useState)(() => readStoredColumnWidths(storageKey, columns));
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = (0, import_react47.useMemo)(
@@ -9907,6 +9942,27 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
+  (0, import_react47.useEffect)(() => {
+    if (loadedStorageKeyRef.current === storageKey) {
+      return;
+    }
+    loadedStorageKeyRef.current = storageKey;
+    shouldPersistColumnWidthsRef.current = false;
+    setUserColumnWidths(readStoredColumnWidths(storageKey, columns));
+  }, [columns, storageKey]);
+  (0, import_react47.useEffect)(() => {
+    if (!shouldPersistColumnWidthsRef.current) {
+      return;
+    }
+    shouldPersistColumnWidthsRef.current = false;
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(userColumnWidths));
+    } catch {
+    }
+  }, [storageKey, userColumnWidths]);
   const registerItemRef = (0, import_react47.useCallback)(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
@@ -10197,9 +10253,15 @@ function TreeListViewInner({
       return;
     }
     setUserColumnWidths(
-      (currentWidths) => currentWidths[resizeState.columnId] === resizeState.nextWidth ? currentWidths : {
-        ...currentWidths,
-        [resizeState.columnId]: resizeState.nextWidth
+      (currentWidths) => {
+        if (currentWidths[resizeState.columnId] === resizeState.nextWidth) {
+          return currentWidths;
+        }
+        shouldPersistColumnWidthsRef.current = true;
+        return {
+          ...currentWidths,
+          [resizeState.columnId]: resizeState.nextWidth
+        };
       }
     );
   }
@@ -10330,6 +10392,7 @@ function TreeListViewInner({
   );
 }
 var TreeListView = (0, import_react47.forwardRef)(TreeListViewInner);
+var TreeTable = TreeListView;
 
 // src/theme/NuThemeProvider.tsx
 var import_react49 = require("react");
@@ -10789,6 +10852,7 @@ function NuThemeProvider({
   ToolDropButton,
   ToolSeparator,
   TreeListView,
+  TreeTable,
   TreeView,
   Window,
   WindowBar,

package/dist/index.js

@@ -9841,11 +9841,42 @@ var TreeListViewRow = memo5(
 
 // src/components/TreeListView/TreeListView.tsx
 import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
+function getColumnStorageKey(columnStoreKey) {
+  const normalizedKey = columnStoreKey?.trim();
+  return normalizedKey ? `reactnu.${normalizedKey}` : null;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(rawValue);
+    if (!parsedValue || typeof parsedValue !== "object") {
+      return {};
+    }
+    return Object.fromEntries(
+      columns.flatMap((column) => {
+        const width = parsedValue[column.id];
+        if (typeof width !== "number" || !Number.isFinite(width)) {
+          return [];
+        }
+        return [[column.id, Math.max(width, column.minWidth ?? 0)]];
+      })
+    );
+  } catch {
+    return {};
+  }
+}
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
+  columnStoreKey,
   columns,
   onPopupMenu,
   data,
@@ -9870,6 +9901,9 @@ function TreeListViewInner({
   const rootRef = useRef23(null);
   const [rootElement, setRootElement] = useState31(null);
   const treeId = useId17();
+  const storageKey = getColumnStorageKey(columnStoreKey);
+  const loadedStorageKeyRef = useRef23(storageKey);
+  const shouldPersistColumnWidthsRef = useRef23(false);
   const itemRefs = useRef23({});
   const resizeFrameRef = useRef23(null);
   const resizeStateRef = useRef23(null);
@@ -9883,7 +9917,7 @@ function TreeListViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState31(null);
   const [autoColumnWidths, setAutoColumnWidths] = useState31({});
-  const [userColumnWidths, setUserColumnWidths] = useState31({});
+  const [userColumnWidths, setUserColumnWidths] = useState31(() => readStoredColumnWidths(storageKey, columns));
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = useMemo20(
@@ -9945,6 +9979,27 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
+  useEffect17(() => {
+    if (loadedStorageKeyRef.current === storageKey) {
+      return;
+    }
+    loadedStorageKeyRef.current = storageKey;
+    shouldPersistColumnWidthsRef.current = false;
+    setUserColumnWidths(readStoredColumnWidths(storageKey, columns));
+  }, [columns, storageKey]);
+  useEffect17(() => {
+    if (!shouldPersistColumnWidthsRef.current) {
+      return;
+    }
+    shouldPersistColumnWidthsRef.current = false;
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(userColumnWidths));
+    } catch {
+    }
+  }, [storageKey, userColumnWidths]);
   const registerItemRef = useCallback8(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
@@ -10235,9 +10290,15 @@ function TreeListViewInner({
       return;
     }
     setUserColumnWidths(
-      (currentWidths) => currentWidths[resizeState.columnId] === resizeState.nextWidth ? currentWidths : {
-        ...currentWidths,
-        [resizeState.columnId]: resizeState.nextWidth
+      (currentWidths) => {
+        if (currentWidths[resizeState.columnId] === resizeState.nextWidth) {
+          return currentWidths;
+        }
+        shouldPersistColumnWidthsRef.current = true;
+        return {
+          ...currentWidths,
+          [resizeState.columnId]: resizeState.nextWidth
+        };
       }
     );
   }
@@ -10368,6 +10429,7 @@ function TreeListViewInner({
   );
 }
 var TreeListView = forwardRef4(TreeListViewInner);
+var TreeTable = TreeListView;
 
 // src/theme/NuThemeProvider.tsx
 import {
@@ -10831,6 +10893,7 @@ export {
   ToolDropButton,
   ToolSeparator,
   TreeListView,
+  TreeTable,
   TreeView,
   Window,
   WindowBar,

package/docs/API_REFERENCE.md

@@ -96,8 +96,8 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
   docs: [ListView](./ListView.md)
 - `TreeView`
   docs: [TreeView](./TreeView.md)
-- `TreeListView`
-  docs: [TreeListView](./TreeListView.md)
+- `TreeListView`, `TreeTable`
+  docs: [TreeListView](./TreeListView.md), [TreeTable](./TreeTable.md)
 - Shared drag-and-drop contract
   docs: [NuDragDropProvider](./NuDragDropProvider.md)
 

package/docs/COMPONENT_INDEX.md

@@ -42,6 +42,7 @@
 - [TickBar](./TickBar.md)
 - [ToolBar](./ToolBar.md)
 - [TreeListView](./TreeListView.md)
+- [TreeTable](./TreeTable.md)
 - [TreeView](./TreeView.md)
 - [NuView](./NuView.md)
 - [Window](./Window.md)

package/docs/TreeListView.md

@@ -44,6 +44,8 @@ const columns: TreeListColumn<Node>[] = [
 ## Key Props
 
 - `columns`
+- `columnStoreKey` — stores user-resized widths under `reactnu.<key>` in
+  `localStorage`
 - `data`
 - `getCellContent`
 - `dataVersion`
@@ -87,6 +89,9 @@ const columns: TreeListColumn<Node>[] = [
 - Columns auto-size from visible content by default.
 - `minWidth` sets a lower bound for auto-sized and resized columns.
 - Columns are resizable unless `resizable={false}` is set on a column.
+- Give `columnStoreKey` a stable, application-owned name to restore a user's
+  resized widths on the next mount. Missing, malformed, or unavailable browser
+  storage falls back to the column definitions without throwing.
 - Right-clicking an enabled row activates it and calls
   `onPopupMenu(event, item, context)`. `context` has the same `depth`, `isLeaf`,
   `item`, and `rowIndex` fields as `getCellContent`; the host owns rendering the

package/docs/TreeTable.md

@@ -0,0 +1,21 @@
+# TreeTable
+
+`TreeTable` is the semantic name for `TreeListView` when it is used as a
+hierarchical report table. It is the same component and accepts the same props,
+including tree navigation, report cells, drag-and-drop, and column resizing.
+
+## Usage
+
+```tsx
+<TreeTable
+  columnStoreKey="workspace-files"
+  columns={columns}
+  data={nodes}
+/>
+```
+
+`columnStoreKey="workspace-files"` persists user-resized widths as JSON in
+`localStorage` under `reactnu.workspace-files`. Only widths changed by the user
+are stored. Invalid or unavailable storage is ignored safely.
+
+For the full API, see [TreeListView](./TreeListView.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deadragdoll/reactnu",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",