blixify-ui-web-mcp 0.1.49 → 0.1.52

package/lib/components/data/dataTemplate/README.md

@@ -427,7 +427,7 @@ see the Write permission matrix below.
   edit={{
     allEditable: true,
     listEditable: true, // inline cell editing in table view
-    listAddable: true, // inline row creation in table view
+    listAddable: true, // an empty row at the bottom of the table view to type new records into
     deleteBtn: true,
   }}
   organise={{ handleNavigate }}
@@ -1114,7 +1114,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `enableComments`      | `boolean` | Enables create/update/delete comments                                                             |
 | `commentCollectionId` | `string`  | Collection ID for comments                                                                        |
 | `commentQuery`        | `Query[]` | Additional queries to filter comments                                                             |
-| `enableLogs`          | `boolean` | Displays create/update/delete logs in list and read views                                         |
+| `enableLogs`          | `boolean` | Displays create/update/delete logs in list and read views as one row per save (time, author, then the field label + type icon from the DTW schema with before › after, or "Updated N fields" with the field names when one save changed several). Clicking a row opens a popover with every before › after in full; a delete is one "Deleted" row whose popover lists the deleted values. Person and listPerson values show the member's name                                         |
 | `logsCollectionId`    | `string`  | Collection ID for logs                                                                            |
 | `logQuery`            | `Query[]` | Additional queries to filter logs                                                                 |
 | `userAPIEndpoint`     | `string`  | URL returning `{ data: { name: string, ...rest } }` — used to resolve user names in comments/logs |
@@ -1156,14 +1156,15 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `addColumnEnabled`            | `boolean`                                                                   | Shows an add-column button in the table header                                                                                                                                                                                                                                                                        |
 | `persistViewState`            | `"persistent" \| "session"`                                                 | Remembers the list's sort, filters, hidden columns, page, rows per page, search and reading position per collection, so a Back navigation lands where the user left. `"persistent"` uses `localStorage`; `"session"` writes `sessionStorage` and reads it first, falling back to `localStorage`. The reading position is restored on mount and on returning from a record, not on a tab switch; with several lists on one page, only the list a record was last opened from restores (tracked in `blixify-dtw-persist-last-drill`). Covers table, list, grid, kanban and feeds; not map. List view only                                        |
 | `persistKey`                  | `string`                                                                    | Keeps a separate saved view state for this instance: the storage key becomes `blixify-dtw-persist-<collectionId>-<persistKey>`. Saved state is read once, on mount, so give the component a React `key` that changes with `persistKey`                                                                               |
-| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page and columns under a name, reapply it, update it or delete it. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState`, and applying a view calls `onChangeSort`, `onChangePagination(0)` and `bareListHandleFilter` when those change. Each write re-reads storage first, so views saved in another browser tab are kept. With `onChangeHide` / `onChangeDrag`, a view's hides and column order stay on screen only: a toggle or reorder after applying one writes back the schema's columns plus that single change |
+| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page, grouping and columns under a name, reapply it, update it or delete it. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState`, and applying a view calls `onChangeSort`, `onChangeGroupBy`, `onChangePagination(0)` and `bareListHandleFilter` when those change. Each write re-reads storage first, so views saved in another browser tab are kept. With `onChangeHide` / `onChangeDrag`, a view's hides and column order stay on screen only: a toggle or reorder after applying one writes back the schema's columns plus that single change |
 | `defaultSavedViews`           | `DefaultSavedView[]`                                                        | Views provided by the app (`{ id?, name, tabId?, state }`), listed before the user's own and never deleted. Without `tabId` a view is listed on every tab. A field left out of `state` is reset to its default when the view is applied. `id` must be unique; without one the view gets `default-<index>`, its position in the whole array |
 | `sharedViews`                 | `SharedSavedView[]`                                                         | Views the app stores for everyone (`{ id, name, tabId, state }`), e.g. on the record the list belongs to. Given, it replaces this browser's storage: the list shows only these, saving goes to `onChangeSharedViews`, and nothing is read from or written to `localStorage` |
 | `onChangeSharedViews`         | `(views: SharedSavedView[]) => void`                                        | Called with the whole list after a view is saved, updated or deleted, for the app to store and pass back as `sharedViews`; a second change before it comes back builds on the list just sent. The whole list is replaced each time, so two editors saving at once is last-writer-wins. Without it the app's views are read-only and “+ Save view” is hidden |
 | `defaultSavedViewId`          | `string`                                                                    | The view everyone opens on, marked ★, stored by the app. The list opens on it when no `initialSavedViewId` is given — also when it arrives after mount — unless `persistViewState` restored a state or a view was already picked. A view that no longer exists leaves the list on All. Opening on it does not call `onChangeSort` |
 | `onChangeDefaultSavedViewId`  | `(id: string \| null) => void`                                              | Gives each view a ☆ that makes it the default; the ★ on the default takes it off (`null`, the list opens on All). Deleting the default view also sends `null` |
 | `initialSavedViewId`          | `string`                                                                    | A view the list opens on, once, in place of the ★ default — e.g. a page embedding a datasheet opens it on a chosen view. A view that no longer exists, or is on another tab, leaves the list on All. Opening on it does not call `onChangeSort` |
-| `groupBy`                     | `string`                                                                    | Column ID to group list results by                                                                                                                                                                                                                                                                                    |
+| `groupBy`                     | `string`                                                                    | Column ID to group list results by. With `bareNewDTW` the groups are bands in one table. Grouped by a `list` column, every option plus "Unknown/No Value" is a band with its real total that reads its own rows under the list's filters, search and sort: in scroll mode each band loads more as it scrolls, in page mode each band has its own pager and the list-wide pager is hidden. Grouped by any other column, page mode groups the rows of the current page and scroll mode keeps the normal scroll. A search, filter, sort or regroup starts every band over. Firebase and `bareListMobileView` keep the normal pagination. Saved views store and restore it                                                                                                                                                                                                                                                                                    |
+| `onChangeGroupBy`             | `(groupBy: string) => void`                                                 | Called when the user picks another grouping in the group-by selector or by applying a saved view (`""` for none), so the app can store it with the tab. Not called when the list opens on a view |
 | `groupIdCollapsible`          | `{ [key: string]: boolean }`                                                | Initial collapsed/expanded state per group ID                                                                                                                                                                                                                                                                         |
 | `sortGroupByAlphabetically`   | `boolean`                                                                   | Sorts group-by values alphabetically                                                                                                                                                                                                                                                                                  |
 | `unionCollections`            | `any[]`                                                                     | Additional collections to union-query alongside the main collection                                                                                                                                                                                                                                                   |

package/lib/components/data/dataTemplate/activityModal.stories.tsx

@@ -5,6 +5,7 @@ import { ActivityModal } from "./activityModal";
 import { DataStructure, DevSettings } from "./model";
 import { DataTemplateWrapper } from "../dataWrapper";
 import { ActivityLog } from "./dataStateModel";
+import { Modal } from "../../display/modal";
 import { handleApplyStoryQueries } from "../dataWrapper/storyBackend.fixtures";
 
 const meta = { title: "Data/Activity Panel" };
@@ -35,15 +36,34 @@ const taskSchema: DataStructure[] = [
   },
   { id: "owner", name: "Owner", type: "person" },
 ];
+// INFO: the standalone panel gets the full schema so every log row resolves a
+// label and type icon; the DTW story keeps a narrow table and shows the raw-id fallback
+const activitySchema: DataStructure[] = [
+  ...taskSchema,
+  {
+    id: "priority",
+    name: "Priority",
+    type: "list",
+    listSelection: ["Normal", "High"],
+    listSelectionColour: ["blue", "orange"],
+  },
+  { id: "notes", name: "Notes", type: "textArea" },
+  { id: "dueDate", name: "Due Date", type: "date" },
+  { id: "contactEmail", name: "Contact Email", type: "email" },
+  { id: "contactPhone", name: "Contact Phone", type: "contact" },
+  { id: "driveLink", name: "Project Drive", type: "string" },
+];
 
 const ActivityDemo = ({
   darkMode = false,
   logsOnly = false,
   integrated = false,
+  inModal = false,
 }: {
   darkMode?: boolean;
   logsOnly?: boolean;
   integrated?: boolean;
+  inModal?: boolean;
 }) => {
   const [ready, setReady] = useState(false);
   const [failPings, setFailPings] = useState(false);
@@ -123,6 +143,26 @@ const ActivityDemo = ({
             },
           ],
         },
+        {
+          _id: "log-3",
+          collectionId: "tasks",
+          itemId: "task-1",
+          userId: "sam",
+          type: "update",
+          createdAt: "2026-09-28T08:15:00Z",
+          values: [
+            {
+              columnId: "contactEmail",
+              oldValue: "",
+              newValue: "sam.lee@example.com",
+            },
+            { columnId: "contactPhone", newValue: "0123456789" },
+            {
+              columnId: "driveLink",
+              newValue: "https://drive.example.com/folders/review-activity",
+            },
+          ],
+        },
         {
           _id: "log-2",
           collectionId: "tasks",
@@ -188,6 +228,20 @@ const ActivityDemo = ({
       setRecipients(event.mentionedUserIds.join(", "));
     },
   };
+
+  const renderPanel = () => (
+    <ActivityModal
+      title="Tasks"
+      collectionId="tasks"
+      dataId="task-1"
+      devSettings={settings}
+      darkMode={darkMode}
+      activityLog={activityLog}
+      model={activitySchema}
+      initialTab={inModal ? "logs" : undefined}
+    />
+  );
+
   return (
     <div
       className={`mx-auto max-w-3xl rounded-2xl p-3 sm:p-6 ${darkMode ? "bg-gray-900 text-gray-100" : "bg-gray-50 text-gray-800"}`}
@@ -200,9 +254,10 @@ const ActivityDemo = ({
       {integrated && (
         <p className="mb-4 text-sm text-gray-500">
           Click the chat icon beside a task for its comments and audit history,
-          or open the task and click its chat bubble. The list clock opens logs first. Tasks have separate conversations. All
-          data and notifications are simulated; refreshing resets the demo.
-          Audit entries are seeded examples.
+          or open the task and click its chat bubble. The list clock opens logs
+          first. Tasks have separate conversations. All data and notifications
+          are simulated; refreshing resets the demo. Audit entries are seeded
+          examples.
         </p>
       )}
       {!logsOnly && (
@@ -247,15 +302,19 @@ const ActivityDemo = ({
               setSelectedId(id ?? "");
             }}
           />
-        ) : (
-          <ActivityModal
-            title="Tasks"
-            collectionId="tasks"
-            dataId="task-1"
-            devSettings={settings}
+        ) : inModal ? (
+          // INFO: mirrors how DTW mounts the panel, so row popovers are checked
+          // against the Modal's clipping and outside-click behaviour
+          <Modal
+            open
+            title="Activity Log"
+            maxWidth="4xl"
             darkMode={darkMode}
-            activityLog={activityLog}
+            onClose={() => {}}
+            renderContent={renderPanel}
           />
+        ) : (
+          renderPanel()
         ))}
     </div>
   );
@@ -265,3 +324,4 @@ export const CommentsAndLogs = () => <ActivityDemo />;
 export const DarkMode = () => <ActivityDemo darkMode />;
 export const LogsOnly = () => <ActivityDemo logsOnly />;
 export const WithDataTemplateWrapper = () => <ActivityDemo integrated />;
+export const InModal = () => <ActivityDemo inModal />;

package/lib/components/data/dataTemplate/dataTemplate.stories.tsx

@@ -1024,3 +1024,245 @@ export const RelatedRecords = () => (
     <RelatedRecordsDemo />
   </div>
 );
+
+// INFO: Monday-board per-group scroll pagination demo. A single collection with
+// thousands of rows spread across a handful of owners — grouping by owner then
+// pages EACH band independently as you scroll inside it, instead of bulk
+// loading every grouped row at once. All local mock data, no backend.
+const GROUPBY_COLLECTION = "demo-groupby-items";
+
+// INFO: six owners with matching Tag-palette colours so each band is tinted;
+// a status list column is offered as a second groupable column.
+const GROUPBY_OWNERS = ["Alice", "Bob", "Carol", "Dan", "Eve", "Frank"];
+const GROUPBY_OWNER_COLOURS = [
+  "red",
+  "blue",
+  "green",
+  "yellow",
+  "indigo",
+  "purple",
+];
+const GROUPBY_STATUSES = ["Draft", "In Review", "Approved"];
+
+const GROUPBY_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Item", type: "string" },
+  {
+    id: "owner",
+    name: "Owner",
+    type: "list",
+    listSelection: GROUPBY_OWNERS,
+    listSelectionColour: GROUPBY_OWNER_COLOURS,
+  },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: GROUPBY_STATUSES,
+  },
+  { id: "createdAt", name: "Created At", type: "date" },
+];
+
+// INFO: 2400 rows in owner blocks (~400 each), so the first page holds only
+// Alice — every other band has to load on its own. Every 40th row has no owner
+// and lands in "Unknown/No Value".
+const renderGroupByRecords = () => {
+  const rows: any[] = [];
+  const total = 2400;
+  for (let index = 0; index < total; index++) {
+    const owner =
+      index % 40 === 39
+        ? ""
+        : GROUPBY_OWNERS[Math.floor(index / (total / GROUPBY_OWNERS.length))];
+    const status = GROUPBY_STATUSES[index % GROUPBY_STATUSES.length];
+    rows.push({
+      _id: `gb-${index}`,
+      name: `${owner || "No owner"} item #${index}`,
+      owner,
+      status,
+      createdAt: new Date(2026, 0, 1 + (index % 180)),
+    });
+  }
+  return rows;
+};
+
+/**
+ * INFO: the mock honours cursor/limit AND the active group filter so each group
+ * pages independently. The list request body carries a
+ * { type:"=", queryId:"owner"/"status", value } entry when a group is expanded —
+ * the mock filters the store to that value, then slices by cursor/limit, so
+ * `count` is that group's total and the band knows when it is exhausted. With no
+ * group filter present it falls back to the full store (the initial grouped
+ * read that seeds the first page of every band). delayResponse makes the
+ * per-group spinner watchable as rows stream in.
+ */
+const handleInstallGroupByMock = (store: any[]) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 500,
+  });
+  const renderUrl = (type: string) =>
+    `${DEMO_ENDPOINT}/${GROUPBY_COLLECTION}/${type}`;
+  const handleParseBody = (config: any) => {
+    try {
+      return JSON.parse(config?.data ?? "{}");
+    } catch (err) {
+      return {};
+    }
+  };
+
+  // INFO: applies every "=" and "!in" condition — a band's own query and
+  // any filter the list carries — so a filter narrows each band's total
+  const handleMatchQuery = (row: any, query: any[]) =>
+    (Array.isArray(query) ? query : []).every((eachQuery) => {
+      if (!eachQuery?.queryId) return true;
+      const value = row[eachQuery.queryId];
+      if (eachQuery.type === "=") return value === eachQuery.value;
+      if (eachQuery.type === "!in") return !eachQuery.value.includes(value);
+      return true;
+    });
+
+  mock.onPost(renderUrl("list")).reply((config) => {
+    const body = handleParseBody(config);
+    // INFO: e2e hook — a band read for this value fails, counted per attempt
+    const failValue = (window as any).__groupByFailValue;
+    if (
+      failValue &&
+      (body.query ?? []).some(
+        (eachQuery: any) =>
+          eachQuery?.type === "=" && eachQuery.value === failValue,
+      )
+    ) {
+      (window as any).__groupByFailCount =
+        ((window as any).__groupByFailCount ?? 0) + 1;
+      return [500, { message: "failed" }];
+    }
+    const cursor = typeof body.cursor === "number" ? body.cursor : 0;
+    // INFO: no limit means every row, as the list endpoint does for a
+    // grouped page-mode read
+    const limit =
+      typeof body.limit === "number" ? body.limit : Number.MAX_SAFE_INTEGER;
+    const rows = store.filter((eachRow) =>
+      handleMatchQuery(eachRow, body.query),
+    );
+    return [
+      200,
+      { data: rows.slice(cursor, cursor + limit), count: rows.length },
+    ];
+  });
+
+  mock.onPost(renderUrl("get")).reply((config) => {
+    const body = handleParseBody(config);
+    return [200, { data: store.find((each) => each._id === body.id) ?? null }];
+  });
+
+  mock
+    .onPost(`${DEMO_ENDPOINT}/spaces/list`)
+    .reply(200, { data: [], count: 0 });
+
+  return mock;
+};
+
+const GroupByScrollPaginationDemo = (props: {
+  paginationType: "scroll" | "page";
+}) => {
+  const store = React.useMemo(() => renderGroupByRecords(), []);
+  React.useMemo(() => handleInstallGroupByMock(store), [store]);
+
+  const [typeParam, setTypeParam] = useState<"list" | "read" | "update">(
+    "list",
+  );
+  const [dataId, setDataId] = useState<string>("");
+  const [viewId, setViewId] = useState<string | undefined>(undefined);
+
+  return (
+    <div className="w-full">
+      <DataTemplateImpl
+        title="Group by scroll pagination"
+        description="2,400 items across six owners — each group pages on its own as you scroll"
+        type={typeParam}
+        id={dataId}
+        collectionId={GROUPBY_COLLECTION}
+        model={GROUPBY_SCHEMA}
+        localURLEndpoint=""
+        devSettings={demoDevSettings}
+        lib={{ axios, Menu, Transition, papaParser: Papa }}
+        limit={25}
+        bareSettings={{ bareNewDTW: true, bareFlexFilters: true }}
+        organise={{
+          viewId,
+          showGroupByFeature: true,
+          groupBy: "owner",
+          // INFO: a saved view regroups by status; All goes back to owner
+          savedViews: true,
+          defaultSavedViews: [
+            {
+              id: "by-status",
+              name: "By status",
+              state: { groupBy: "status" },
+            },
+            {
+              id: "draft-only",
+              name: "Draft only",
+              state: {
+                flexFilters: [
+                  {
+                    id: "f1",
+                    columnId: "status",
+                    operator: "=",
+                    value: "Draft",
+                  },
+                ],
+              },
+            },
+          ],
+          paginationType: props.paginationType,
+          // INFO: the group Select consumes Option[] (key/label) — offer the two
+          // list columns that make sense to group a board on.
+          renderGroupByOptions: () => [
+            { key: "owner", label: "Owner" },
+            { key: "status", label: "Status" },
+          ],
+          handleNavigate: (type: string, id?: string, view?: string) => {
+            setTypeParam(type as any);
+            setDataId(id ?? "");
+            if (view) setViewId(view);
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export const GroupByScrollPagination = () => (
+  <div className="w-full">
+    <div className="font-semibold mb-1 text-gray-900">
+      Data Template — Monday-board per-group scroll pagination
+    </div>
+    <div className="text-sm mb-4 text-gray-600">
+      2,400 items in owner blocks (~400 each, every 40th with no owner), all
+      from local mock data. The board opens grouped by <code>Owner</code>; the
+      first page holds only Alice, yet every owner and Unknown/No Value is a
+      band from the start and loads its own rows. To demo: keep the{" "}
+      <strong>Group</strong> picker on Owner (or switch it to Status), then
+      scroll down inside a band — that group fetches its next page on its own,
+      with a short spinner, while the other groups stay where they are. Each
+      group pages independently against the mock, Monday-board style, rather
+      than bulk-loading every row.
+    </div>
+    <GroupByScrollPaginationDemo paginationType="scroll" />
+  </div>
+);
+
+export const GroupByPagePagination = () => (
+  <div className="w-full">
+    <div className="font-semibold mb-1 text-gray-900">
+      Data Template — group by with page pagination
+    </div>
+    <div className="text-sm mb-4 text-gray-600">
+      The same 2,400 items in page mode. Each page reads 25 rows and groups only
+      those rows, so the pager moves through the list without skipping or
+      repeating rows.
+    </div>
+    <GroupByScrollPaginationDemo paginationType="page" />
+  </div>
+);

package/lib/components/display/newTable/README.md

@@ -173,3 +173,31 @@ unconditionally hands every viewer a delete button.
 The older `organise.addColumnEnabled` path is unaffected: it still opens the
 formula builder and gets no bin, since those tables never gained a plain-column
 `+` and so have no way to add a deleted column back.
+
+## Adding rows
+
+With `addable={{ active: true, onAddData }}` the table keeps an empty row at the bottom, as a spreadsheet does:
+
+- Clicking any of its cells starts a new row with that cell focused.
+- Enter saves the row through `onAddData` and opens the next one, focused on its first cell. A multi-line field keeps Enter for a new line.
+- Escape drops the row. Clicking another row of the table saves it.
+- A required field left empty keeps the row open with the field marked. If the click went to another row, the row closes and what was typed comes back the next time it is opened.
+- Text, number, phone, email, long text, yes/no, date, single and multi select, person, people, role, Gantt and canvas columns are filled in the row (`supportedNewTableAddList`). Any other column, and a disabled one, stays empty in the new row and never stops a row being added — it is filled in afterwards. A required column of such a type is not checked when the row is saved, so the record starts without it.
+- If `onAddData` rejects, the typed values come back in the row, unless the next row is already being typed in. DataTemplate rejects when a create fails, after its own error message.
+- The row is hidden while rows are selected and in the mobile view.
+
+## Editing cells
+
+With `editable.active` most columns edit in the cell (`supportedInlineEditList`). Image, images, address, file and files open the same form field in a modal (`supportedModalEditList`) and save through `onUpdateData` like any cell. Markdown, signature, address list and password are edited on the record, not in the table. A disabled column stays read-only.
+
+## Groups
+
+`groups` draws rows as coloured, collapsible bands inside the one table. DataTemplate builds them from `organise.groupBy`; a consumer using NewTable on its own passes them directly.
+
+| Prop                 | Type                                                                                  | Behavior                                                                                                                                       |
+| -------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `groups`             | `{ id, title, colour?, rowIds, count? }[]`                                            | One band per entry; `rowIds` reference row ids. `count` is the band's real total, shown in its header instead of the rows it holds |
+| `onGroupLoadMore`    | `(groupId: string) => void`                                                           | Scroll paging: fired when the bottom of a band scrolls into view, so that band loads its next rows                                              |
+| `onGroupPageChange`  | `(groupId: string, page: number) => void`                                             | Page paging: each band gets the list footer (numbered pages, chevrons, go-to-page) under its rows, scoped to that band. 0-based page            |
+| `groupLoadingStatus` | `{ [groupId]: { loadingMore?, exhausted?, page?, size?, fetched? } }`                 | Per band: a spinner while a page loads; `exhausted` removes the scroll sentinel; `page` and `size` drive the band pager once `fetched`          |
+

package/lib/components/display/newTable/newTable.stories.tsx

@@ -155,6 +155,70 @@ const matrixColumns: NewTableColumn[] = [
   { key: "run", title: "" },
 ];
 
+// INFO: rows added like a spreadsheet — the empty bottom row takes typing in
+// any cell, Enter saves and opens the next row. Photo and Contract have no
+// inline editor: they stay empty in a new row without blocking it, and an
+// existing row's cell opens its editor in a modal
+const spreadsheetColumns: NewTableColumn[] = [
+  { key: "name", title: "Name", type: "string" },
+  { key: "qty", title: "Qty", type: "number", optional: true },
+  {
+    key: "stage",
+    title: "Stage",
+    type: "list",
+    listSelection: ["Lead", "Quoted", "Won"],
+    optional: true,
+  },
+  { key: "dueDate", title: "Due", type: "date", optional: true },
+  { key: "photo", title: "Photo", type: "image" },
+  { key: "contract", title: "Contract", type: "file" },
+];
+
+const SpreadsheetRows = () => {
+  const [rows, setRows] = useState<NewTableRow[]>([
+    { id: "row-1", name: "Rooftop survey", qty: 2, stage: "Lead" },
+  ]);
+  const [saved, setSaved] = useState<any[]>([]);
+  return (
+    <>
+      <NewTableImpl
+        columns={spreadsheetColumns}
+        data={rows}
+        paginationType="page"
+        size={rows.length}
+        limit={20}
+        pageIndex={0}
+        handleUpdatePageIndex={() => {}}
+        editable={{
+          active: true,
+          onUpdateData: async (rowId, columnId, value) => {
+            setRows((previous) =>
+              previous.map((eachRow) =>
+                eachRow.id === rowId
+                  ? { ...eachRow, [columnId]: value?.[columnId] ?? value }
+                  : eachRow,
+              ),
+            );
+          },
+        }}
+        addable={{
+          active: true,
+          onAddData: (added) => {
+            setSaved((previous) => [...previous, added]);
+            setRows((previous) => [
+              ...previous,
+              { id: `row-${previous.length + 1}`, ...added },
+            ]);
+          },
+        }}
+      />
+      <pre data-testid="spreadsheet-saved" className="mt-3 text-xs">
+        {JSON.stringify(saved)}
+      </pre>
+    </>
+  );
+};
+
 // INFO: inline edit and add-column together — the + appends to the same columns
 // the cells are editing, so a new field is immediately fillable
 const EditableWithAddColumn = () => {
@@ -386,7 +450,7 @@ const ElementCellsMatrix = () => {
             setRows((prev) => prev.filter((row) => row.id !== rowId)),
         }}
         enableCopy={false}
-        emptyTitle="No rows yet — use Create New Item"
+        emptyTitle="No rows yet"
       />
     </div>
   );
@@ -611,6 +675,13 @@ export const NewTable = () => {
         <EditableWithAddColumn />
       </StorySection>
 
+      <StorySection
+        title="Adding rows like a spreadsheet"
+        description="addable.active=true keeps an empty row at the bottom. Click any of its cells and type; Enter saves the row and opens the next one, Escape drops it, and clicking another row saves it. A column the row cannot fill in (Photo, Contract) stays empty without blocking it; on a saved row its cell opens the editor in a modal."
+      >
+        <SpreadsheetRows />
+      </StorySection>
+
       <StorySection
         title="Editable with disabled columns"
         description="A column marked disabled in the schema stays read-only in an editable table, the same as in the form. Hover Value or Notes to edit; Unit, Source and the coloured Status column never open an editor, and a row click still reaches the row."
@@ -620,7 +691,7 @@ export const NewTable = () => {
 
       <StorySection
         title="Element cells with row actions (config matrix)"
-        description="Cells can be React elements: kit inputs with cellInput={{ active: true }} (the same compact mode the DTW inline edit matrix uses) and IconButtons per row, while the parent owns the row state. Typed columns are what make the inline 'Create New Item' row render inputs — element-only columns render nothing there. Do NOT combine with editable.active: edit mode wraps element cells in its own editors (from 1.2.66 a React element cell passes through, but its inputs are ~286px wide). Wrap in overflow-x-auto when the columns outgrow the pane."
+        description="Cells can be React elements: kit inputs with cellInput={{ active: true }} (the same compact mode the DTW inline edit matrix uses) and IconButtons per row, while the parent owns the row state. Typed columns are what make the empty add row render inputs — element-only columns render nothing there. Do NOT combine with editable.active: edit mode wraps element cells in its own editors (from 1.2.66 a React element cell passes through, but its inputs are ~286px wide). Wrap in overflow-x-auto when the columns outgrow the pane."
       >
         <ElementCellsMatrix />
       </StorySection>

package/lib/components/navigation/leftNav/README.md

@@ -97,6 +97,39 @@ const navigation = [
 />;
 ```
 
+##### Icon rail
+
+A narrow column of icons left of the sidebar — the two-level layout of tools like monday.com. The rail switches between whole areas of the app (a workspace tree, chat, agents, notifications); the sidebar beside it navigates inside the area that is open. Without `railItems` nothing changes.
+
+```jsx
+import { BellIcon, ChatBubbleLeftRightIcon, Cog6ToothIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+
+const [railId, setRailId] = useState("workspace");
+
+<LeftNav
+  railItems={[
+    { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+    { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon, href: "/chat" },
+    { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+  ]}
+  railFooterItems={[{ id: "settings", name: "Settings", icon: Cog6ToothIcon }]}
+  selectedRailId={railId}
+  handleRailOnClick={(id) => setRailId(id)}
+  {...otherProps}
+/>;
+```
+
+| Name               | Type                   | Description                                                                                      |
+| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------ |
+| `railItems`        | `RailItem[]`           | Icons at the top of the rail. Turns the rail on.                                                 |
+| `railFooterItems`  | `RailItem[]`           | Icons pinned to the bottom of the rail, for settings-type entries.                               |
+| `selectedRailId`   | `string`               | The `id` of the open area, highlighted.                                                          |
+| `handleRailOnClick`| `(id: string) => void` | Called with the item `id` on every click, link or not.                                           |
+
+`RailItem` is `{ id, name, icon, href?, badge? }`. With `href` the item is a link through the same `linkType` / `custom` as the sidebar; without it the item only reports `handleRailOnClick`. `badge` shows a count on the icon — `0`, empty or absent hides it, and a number over 99 reads `99+`.
+
+Below `lg` the rail moves into the mobile drawer as a row of icons above the sidebar's list.
+
 ##### Required props
 
 | Name                            | Type              | Description                                        |

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -1,11 +1,16 @@
 import {
+  BellIcon,
+  ChatBubbleLeftRightIcon,
+  Cog6ToothIcon,
+  CpuChipIcon,
   FolderIcon,
   FunnelIcon,
   HomeIcon,
+  Squares2X2Icon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { LeftNav as LeftNavImpl, Navigation } from ".";
+import { LeftNav as LeftNavImpl, Navigation, RailItem } from ".";
 import { BarMove } from "../bars";
 import { StorySection } from "../../storyUtils";
 import Logo from "../../../assets/logo.png";
@@ -221,6 +226,74 @@ const workspaceNavigation = [
   },
 ];
 
+// INFO: the rail switches between whole areas; the sidebar beside it lists the
+// pages inside the area that is open
+const railItems: RailItem[] = [
+  { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+  { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon },
+  { id: "agents", name: "Agents", icon: CpuChipIcon },
+  { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+];
+
+// INFO: each area brings its own sidebar list
+const railNavigation: { [railId: string]: Navigation[] } = {
+  chat: [
+    {
+      id: "chat-new",
+      name: "New chat",
+      href: "/chat",
+      icon: ChatBubbleLeftRightIcon,
+    },
+    {
+      id: "chat-1",
+      name: "Quarterly sales recap",
+      href: "/chat/1",
+      icon: ChatBubbleLeftRightIcon,
+    },
+  ],
+  agents: [
+    {
+      id: "agent-1",
+      name: "Lead qualifier",
+      href: "/agents/1",
+      icon: CpuChipIcon,
+    },
+    {
+      id: "agent-2",
+      name: "Support triage",
+      href: "/agents/2",
+      icon: CpuChipIcon,
+    },
+  ],
+  notifications: [
+    { id: "note-all", name: "All", href: "/alerts", icon: BellIcon },
+    {
+      id: "note-unread",
+      name: "Unread",
+      href: "/alerts/unread",
+      icon: BellIcon,
+    },
+  ],
+  settings: [
+    {
+      id: "set-members",
+      name: "Members",
+      href: "/settings/members",
+      icon: UsersIcon,
+    },
+    {
+      id: "set-workspace",
+      name: "Workspace",
+      href: "/settings/workspace",
+      icon: Cog6ToothIcon,
+    },
+  ],
+};
+
+const railFooterItems: RailItem[] = [
+  { id: "settings", name: "Settings", icon: Cog6ToothIcon },
+];
+
 const renderLogo = (collapse?: boolean) => (
   <div className="flex items-center flex-shrink-0 px-6 cursor-pointer">
     <img
@@ -285,6 +358,8 @@ export const LeftNav = () => {
   // button, so each story needs its own open state for that button to work on
   // a phone
   const [mobileStoryId, setMobileStoryId] = useState("");
+  const [railId, setRailId] = useState("workspace");
+  const [darkRailId, setDarkRailId] = useState("workspace");
 
   const handleMobileMenu = (storyId: string) => ({
     leftNavMobileMenu: mobileStoryId === storyId,
@@ -639,6 +714,63 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Icon Rail"
+        description="railItems adds a narrow column of icons left of the sidebar, the two-level layout of tools like monday.com: the rail switches between whole areas (workspace, chat, agents, alerts), the sidebar beside it navigates inside the open one. selectedRailId highlights the open area, badge shows a count (over 99 reads 99+), and railFooterItems sit at the bottom for settings-type entries. An item with href is a link; without one it only reports handleRailOnClick. Without railItems nothing changes. Below lg the rail moves into the drawer as a row of icons above the list — open the menu at phone width to see it."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={workspaceSelectedId}
+            navigation={
+              railId === "workspace"
+                ? workspaceNavigation
+                : (railNavigation[railId] ?? [])
+            }
+            {...handleMobileMenu("story-rail")}
+            compactMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={railId}
+            handleRailOnClick={(id) => setRailId(id)}
+            handleBarsOnClick={(id) => setWorkspaceSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-sm text-gray-500">
+                {`Open area: ${railId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Icon Rail — Dark Mode"
+        description="The rail follows darkMode and navbarBgColor like the sidebar, so the two read as one surface."
+        dark
+      >
+        <div className="w-full h-96 relative overflow-hidden border border-gray-700 rounded-lg">
+          <LeftNavImpl
+            selectedId={selectedId}
+            navigation={navigation}
+            {...handleMobileMenu("story-rail-dark")}
+            darkMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={darkRailId}
+            handleRailOnClick={(id) => setDarkRailId(id)}
+            handleBarsOnClick={(id) => setSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-gray-400 text-sm">
+                {`Open area: ${darkRailId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Transparent"
         description="transparent makes the TOP HEADER BAR see-through, dropping its background, shadow and bottom border so a page can run its own hero or image up under it — the same pair Header carries. mobileOpaque keeps that bar solid below lg, where it holds the hamburger and is the only way back to the nav. The sidebar itself is unaffected. Shown over a gradient page so the effect is visible."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {