blixify-ui-web-mcp 0.1.75 → 0.1.76

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

@@ -480,7 +480,7 @@ Under `bareNewDTW` the grid hides `Grid`'s own page buttons and renders the same
 
 Set `organise.viewId="grid"` (or add an `extendedTabs` entry with `viewType="grid"`) to render records as cards. Use `bareSettings.bareListGridComponent` to fully customise each card, or use the built-in grid. `viewImage` is optional: point it at an image or multipleImage column to show a picture on each card, or leave it empty for cards with only the title and fields. The Add Tab modal offers **Grid** on every space, and shows the Preview Image picker only when the space has an image column.
 
-The list, kanban and grid items show the view's visible columns in column order, with the table's cell renderers. The title column is the item's title, the grid's image column is its picture, and a column with nothing stored is left out. A button, timer or rating is always shown. Each item carries the edit pencil (only for users who can update) and the comment bubble (when `edit.activityLog` is on) beside its title.
+The list, kanban and grid items show the view's visible columns in column order, with the table's cell renderers. Under `bareNewDTW` a list item is a two-line row like a mail inbox (`NewList` `compact`): the first list column as a pill leading the second line, the first date column as a short date at the right, the next two columns that hold something on a grey line after the pill, and every field behind the row's arrow. On a wide screen the row is one line: title, pill, values, date. The grouped column is left off rows under group sections. `bareListDescription` still renders each value, the row's date included, and `bareListComponent` still replaces the row. The title column is the item's title, the grid's image column is its picture, and a column with nothing stored is left out. A button, timer or rating is left off the row's second line and shown behind its arrow; grid and kanban cards always show them. Each item carries the edit pencil (only for users who can update) and the comment bubble (when `edit.activityLog` is on) beside its title. The table also shows a chevron beside each title that opens the read view, for anyone who can see the record when `organise.handleNavigate` is set, since an editable title cell is hard to click open; its pencil and bubble sit in divided columns at the title cell's edge.
 
 ```tsx
 <DataTemplate
@@ -766,6 +766,7 @@ Column types with monday.com counterparts. The value maths is in `src/components
 | Time tracking | `type: "timeTracking"` | `{ totalSeconds, running, startedAt?, sessions? }` | table, read view and the record form show the total with start / stop, ticking each second inside the cell only; the form draws it as a field box, read-only on a record not created yet or without update rights. Start / stop saves at once, apart from Submit, and a form save never sends the timer. With `organise.onTimeTrackingAction` a click sends only `"start"` / `"stop"` and shows the value the host's server stored, timed on the server's clock (the cell ticks at once and is corrected to the reply, or put back if it fails); without it the cell works the value out and saves that one field. `handleStartTimeTracking` / `handleStopTimeTracking` are idempotent, so a flow can drive the same value. Sorts on `<id>.totalSeconds`; formulas read hours (`handleGetTimeTrackingHours`) |
 | Date range | `type: "dateRange"`, `minDate?`, `maxDate?` | `{ start, end }` | `12 – 18 Nov`; a range picker in the form; in an editable table the whole cell opens it, with the inline date cell's border on hover; filters and sorts on `<id>.start`. A calendar or timeline tab can use `<id>.start` and `<id>.end` as its dates |
 | Rating | `type: "number"`, `ratingMax` | a number | stars in every view; a tap saves the number, tapping the current rating clears it |
+| Lookup | `type: "lookup"`, `referenceFieldId`, `lookupFieldId`, `lookupFieldType?`, `lookupFieldSettings?` | the linked record's `lookupFieldId` value, written by the host's server | every view draws it as `lookupFieldType` (a `multipleList` through a `listReference`) with `lookupFieldSettings`, disabled and optional; `organise.onAddColumns` gets it back as stored, with only its name, width and visibility taken from the table; the column dialog edits it as a lookup |
 
 `bareSettings.bareSystemColumns` adds the server-stamped columns without declaring them: Created At / By (`baseCreatedAt`, `baseCreatedBy`), Updated At / By (`baseUpdatedAt`, `baseUpdatedBy`), Record ID (the record's `_id`) and Number (`baseNumber`). They start hidden; showing one is kept per view (`shownSystemColumnIds`) and never written back through `onChangeHide` or `onChangeDrag`. They are read-only, sortable and filterable, empty on a record the server never stamped, and a form save never sends them (nor a timer or a button).
 

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

@@ -106,6 +106,8 @@ const handleInstallMock = (rows: any[]) => {
     inFlight: 0,
     maxInFlight: 0,
   });
+  // INFO: e2e reads how many table rows were drawn
+  (window as any).__newTableRowDraws = { count: 0 };
   const handleDelay = () => new Promise((resolve) => setTimeout(resolve, 400));
   mock.onPost(`${ENDPOINT}/${COLLECTION}/list`).reply(async (config) => {
     const body = JSON.parse(config.data ?? "{}");
@@ -155,6 +157,12 @@ const handleInstallMock = (rows: any[]) => {
     rows.unshift(row);
     return [200, { data: row._id }];
   });
+  mock.onPost(`${ENDPOINT}/${COLLECTION}/update`).reply((config) => {
+    const body = JSON.parse(config.data ?? "{}");
+    const row = rows.find((each) => each._id === body.id);
+    if (row) Object.assign(row, body.data ?? {});
+    return [200, { data: body.id }];
+  });
   mock.onPost(`${ENDPOINT}/${COLLECTION}/get`).reply((config) => {
     const body = JSON.parse(config.data ?? "{}");
     return [200, { data: rows.find((row) => row._id === body.id) ?? null }];
@@ -181,8 +189,9 @@ const VIEW_NAMES = [
   "1.42 Wang's Lead Board · Drawing",
 ];
 
-const GroupedBoardDemo = () => {
+const GroupedBoardDemo = (props: { isPhone?: boolean }) => {
   const rows = useMemo(() => handleBuildRows(), []);
+  const [openedId, setOpenedId] = useState("");
   useMemo(() => handleInstallMock(rows), [rows]);
   const [sharedViews, setSharedViews] = useState<SharedSavedView[]>(() => [
     {
@@ -204,40 +213,61 @@ const GroupedBoardDemo = () => {
   ]);
 
   return (
-    <DataTemplateImpl
-      title="Master Leads"
-      description="148,936 leads grouped by state"
-      type="list"
-      collectionId={COLLECTION}
-      model={SCHEMA}
-      localURLEndpoint=""
-      devSettings={{
-        server: "mongoServer",
-        dbEndpoint: ENDPOINT,
-        dbAPIToken: "",
-        dbUserToken: "",
-        schemaEndpoint: "",
-        imageEndpoint: "",
-      }}
-      lib={{ axios, Menu, Transition }}
-      edit={{ listAddable: true }}
-      limit={50}
-      bareSettings={{ bareNewDTW: true, bareFlexFilters: true }}
-      organise={{
-        viewId: "general",
-        datasheetDefaults: true,
-        showGroupByFeature: true,
-        groupBy: "area",
-        paginationType: "scroll",
-        savedViews: true,
-        sharedViews,
-        onChangeSharedViews: setSharedViews,
-        renderGroupByOptions: () => [
-          { key: "area", label: "State (Area)" },
-          { key: "status", label: "Status" },
-        ],
-      }}
-    />
+    <>
+      {props.isPhone && (
+        <div data-testid="grouped-board-opened" className="mb-2 text-xs">
+          {openedId ? `Opened ${openedId}` : ""}
+        </div>
+      )}
+      <DataTemplateImpl
+        title="Master Leads"
+        description="148,936 leads grouped by state"
+        type="list"
+        collectionId={COLLECTION}
+        model={SCHEMA}
+        localURLEndpoint=""
+        devSettings={{
+          server: "mongoServer",
+          dbEndpoint: ENDPOINT,
+          dbAPIToken: "",
+          dbUserToken: "",
+          schemaEndpoint: "",
+          imageEndpoint: "",
+        }}
+        lib={{ axios, Menu, Transition }}
+        edit={{ listAddable: true, listEditable: true }}
+        limit={50}
+        bareSettings={{
+          bareNewDTW: true,
+          bareFlexFilters: true,
+          bareListMobileView: props.isPhone,
+          // INFO: rows can be ticked on the phone board
+          ...(props.isPhone
+            ? { bareListMultipleSelectAddtionalActions: [] }
+            : {}),
+        }}
+        organise={{
+          viewId: "general",
+          datasheetDefaults: true,
+          showGroupByFeature: true,
+          groupBy: "area",
+          paginationType: "scroll",
+          savedViews: true,
+          sharedViews,
+          onChangeSharedViews: setSharedViews,
+          renderGroupByOptions: () => [
+            { key: "area", label: "State (Area)" },
+            { key: "status", label: "Status" },
+          ],
+          ...(props.isPhone
+            ? {
+                handleNavigate: (_type: string, id?: string) =>
+                  setOpenedId(id ?? ""),
+              }
+            : {}),
+        }}
+      />
+    </>
   );
 };
 
@@ -252,8 +282,30 @@ export const GroupedLargeBoard = () => (
       Scroll up and down: every band shows its full total from the start, bands
       not read yet draw no "Add item" rows, and bands load one at a time. The 16
       views fold behind "+N more"; the pencil on a view renames it, and "Closed
-      only" filters every band.
+      only" filters every band. Cells edit in place on hover, and only the rows
+      near the screen are drawn.
     </div>
     <GroupedBoardDemo />
   </div>
 );
+
+export const GroupedLargeBoardPhone = () => (
+  <div className="w-full max-w-sm">
+    <div className="mb-1 font-semibold text-gray-900">
+      Data Template — the large grouped board on a phone
+    </div>
+    <div className="mb-4 text-sm text-gray-600">
+      The same 148,936 leads in the phone layout. Each row reads like a mail
+      inbox: the name and date on top, the status pill under it, and an arrow
+      that opens every field. The state is left off the row, as its header
+      already says it. Tapping a row opens it, the box ticks it, and each
+      state&apos;s header folds its rows. Only the rows near the screen are
+      drawn.
+    </div>
+    <GroupedBoardDemo isPhone />
+  </div>
+);
+
+GroupedLargeBoardPhone.parameters = {
+  viewport: { defaultViewport: "mobile2" },
+};

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

@@ -0,0 +1,334 @@
+import { Menu, Transition } from "@headlessui/react";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import Papa from "papaparse";
+import React, { useEffect, useMemo, useState } from "react";
+import { ButtonGroup } from "../../action/buttonGroup";
+import { DataTemplate as DataTemplateImpl } from ".";
+import { handleApplyStoryQueries } from "../dataWrapper/storyBackend.fixtures";
+import { DataStructure } from "./model";
+
+const meta = { title: "Data/Data Template" };
+export default meta;
+
+// INFO: its own endpoint, so the mock never answers for another story
+const DEMO_ENDPOINT = "https://dtw-read-drawer-demo.local/api";
+const DEMO_COLLECTION = "demo-read-drawer-records";
+const COMMENTS_COLLECTION = `${DEMO_COLLECTION}-comments`;
+const LOGS_COLLECTION = `${DEMO_COLLECTION}-logs`;
+const CURRENT_USER = "alice";
+const STAGES = ["New", "In Progress", "Done"];
+const OWNERS = ["Alice", "Ben", "Chitra", "Dan"];
+
+const DEMO_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Record", type: "string" },
+  { id: "stage", name: "Stage", type: "list", listSelection: STAGES },
+  { id: "owner", name: "Owner", type: "string" },
+  { id: "summary", name: "Summary", type: "string" },
+];
+
+const DRAWER_TOGGLE = [
+  { id: "drawer", name: "Read drawer" },
+  { id: "page", name: "No drawer" },
+];
+const ROLE_TOGGLE = [
+  { id: "editor", name: "Can update" },
+  { id: "viewer", name: "Viewer" },
+];
+const COMMENTS_TOGGLE = [
+  { id: "on", name: "Comments" },
+  { id: "off", name: "No comments" },
+];
+const LAYOUT_TOGGLE = [
+  { id: "desktop", name: "Desktop" },
+  { id: "mobile", name: "Mobile" },
+];
+
+const demoDevSettings: any = {
+  server: "mongoServer",
+  dbEndpoint: DEMO_ENDPOINT,
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: DEMO_ENDPOINT,
+  schemaEndpointToken: "",
+  imageEndpoint: "https://placehold.co/600x400/e2e8f0/475569.png?text=",
+  uploadEndpoint: "",
+  organisationMembers: [
+    { key: "alice", label: "Alice Tan" },
+    { key: "ben", label: "Ben Wong" },
+  ],
+};
+
+// INFO: a few records carry comments so the bubble's count shows on some rows
+// and not others
+const COMMENT_COUNTS: { [id: string]: number } = {
+  "rec-01": 3,
+  "rec-02": 1,
+  "rec-04": 12,
+  "rec-07": 120,
+};
+
+const renderDemoComments = () =>
+  Object.entries(COMMENT_COUNTS).flatMap(([itemId, count]) =>
+    Array.from({ length: Math.min(count, 5) }, (_, index) => ({
+      _id: `${itemId}-comment-${index + 1}`,
+      collectionId: DEMO_COLLECTION,
+      itemId,
+      userId: index % 2 === 0 ? "ben" : "alice",
+      comment: `Comment ${index + 1} on ${itemId}`,
+      createdAt: new Date(Date.UTC(2026, 10, 1, 9, index)).toISOString(),
+    })),
+  );
+
+const renderDemoRecords = () =>
+  Array.from({ length: 12 }, (_, index) => {
+    const number = String(index + 1).padStart(2, "0");
+    return {
+      _id: `rec-${number}`,
+      name: `Record ${number}`,
+      stage: STAGES[index % STAGES.length],
+      owner: OWNERS[index % OWNERS.length],
+      summary: `Summary for record ${number}`,
+    };
+  });
+
+const handleInstallDemoMock = (
+  store: any[],
+  activity: { [collection: string]: any[] },
+) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 150,
+  });
+  const renderUrl = (type: string) =>
+    `${DEMO_ENDPOINT}/${DEMO_COLLECTION}/${type}`;
+  const handleParseBody = (config: any) => {
+    try {
+      return JSON.parse(config?.data ?? "{}");
+    } catch (err) {
+      return {};
+    }
+  };
+
+  mock
+    .onPost(renderUrl("list"))
+    .reply(() => [200, { data: store, count: store.length }]);
+  mock.onPost(renderUrl("get")).reply((config) => {
+    const body = handleParseBody(config);
+    return [200, { data: store.find((each) => each._id === body.id) ?? null }];
+  });
+  mock.onPost(renderUrl("update")).reply((config) => {
+    const body = handleParseBody(config);
+    const index = store.findIndex((each) => each._id === body.id);
+    if (index >= 0) store[index] = { ...store[index], ...body.data };
+    return [200, { data: body.id }];
+  });
+  mock
+    .onPost(
+      new RegExp(
+        `^${DEMO_ENDPOINT}/(${COMMENTS_COLLECTION}|${LOGS_COLLECTION})/[a-z]+$`,
+      ),
+    )
+    .reply((config) => {
+      const [collection, action] = (config.url ?? "").split("/").slice(-2);
+      const body = handleParseBody(config);
+      const rows = activity[collection];
+      if (action === "list") {
+        const data = handleApplyStoryQueries(rows, body.query).sort(
+          (a: any, b: any) =>
+            String(b.createdAt ?? "").localeCompare(String(a.createdAt ?? "")),
+        );
+        const cursor = body.cursor ?? 0;
+        return [
+          200,
+          {
+            data: data.slice(cursor, cursor + (body.limit ?? 10)),
+            count: data.length,
+          },
+        ];
+      }
+      if (action === "get")
+        return [200, { data: rows.find((row) => row._id === body.id) }];
+      if (action === "create") rows.push(body.data);
+      if (action === "update") {
+        const index = rows.findIndex((row) => row._id === body.id);
+        if (index >= 0) rows[index] = { ...rows[index], ...body.data };
+      }
+      if (action === "delete") {
+        const index = rows.findIndex((row) => row._id === body.id);
+        if (index >= 0) rows.splice(index, 1);
+      }
+      return [200, { success: true }];
+    });
+  // INFO: the tab bar waits on this lookup
+  mock
+    .onPost(`${DEMO_ENDPOINT}/spaces/list`)
+    .reply(200, { data: [], count: 0 });
+
+  return mock;
+};
+
+const ReadDrawerDemo = () => {
+  const [typeParam, setTypeParam] = useState<"list" | "read" | "update">(
+    "list",
+  );
+  const [dataId, setDataId] = useState<string>("");
+  const [drawerMode, setDrawerMode] = useState<"drawer" | "page">("drawer");
+  const [role, setRole] = useState<"editor" | "viewer">("editor");
+  const [comments, setComments] = useState<"on" | "off">("on");
+  const [layout, setLayout] = useState<"desktop" | "mobile">("desktop");
+  const [isMockReady, setIsMockReady] = useState(false);
+
+  const store = useMemo(() => renderDemoRecords(), []);
+  const activity = useMemo(
+    () => ({
+      [COMMENTS_COLLECTION]: renderDemoComments(),
+      [LOGS_COLLECTION]: [] as any[],
+    }),
+    [],
+  );
+  const hasComments = comments === "on";
+  const hasDrawer = drawerMode === "drawer";
+  const canUpdate = role === "editor";
+  const isMobile = layout === "mobile";
+
+  // INFO: in an effect so it survives StrictMode's double mount
+  useEffect(() => {
+    const mock = handleInstallDemoMock(store, activity);
+    setIsMockReady(true);
+    return () => {
+      mock.restore();
+      setIsMockReady(false);
+    };
+  }, [store, activity]);
+
+  const handleNavigate = (type: string, id?: string) => {
+    setTypeParam(type as "list" | "read" | "update");
+    setDataId(id ?? "");
+  };
+
+  return (
+    <div className="w-full">
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <ButtonGroup
+          selection={DRAWER_TOGGLE}
+          selectedId={drawerMode}
+          variant="tag"
+          size="small"
+          onClick={(id) => {
+            setDrawerMode(id as "drawer" | "page");
+            handleNavigate("list");
+          }}
+        />
+        <ButtonGroup
+          selection={ROLE_TOGGLE}
+          selectedId={role}
+          variant="tag"
+          size="small"
+          onClick={(id) => setRole(id as "editor" | "viewer")}
+        />
+        <ButtonGroup
+          selection={COMMENTS_TOGGLE}
+          selectedId={comments}
+          variant="tag"
+          size="small"
+          onClick={(id) => setComments(id as "on" | "off")}
+        />
+        <ButtonGroup
+          selection={LAYOUT_TOGGLE}
+          selectedId={layout}
+          variant="tag"
+          size="small"
+          onClick={(id) => setLayout(id as "desktop" | "mobile")}
+        />
+        {typeParam !== "list" && !hasDrawer && (
+          <button
+            type="button"
+            className="rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-700 hover:bg-gray-50"
+            onClick={() => handleNavigate("list")}
+          >
+            ← Back to list
+          </button>
+        )}
+      </div>
+      <div className={isMobile ? "mx-auto max-w-sm" : "w-full"}>
+        {isMockReady && (
+          <DataTemplateImpl
+            key={`${drawerMode}-${role}-${comments}-${layout}`}
+            title="Read Drawer"
+            description="Offline records"
+            type={typeParam}
+            id={dataId}
+            collectionId={DEMO_COLLECTION}
+            model={DEMO_SCHEMA}
+            localURLEndpoint=""
+            devSettings={demoDevSettings}
+            lib={{ axios, Menu, Transition, papaParser: Papa }}
+            organise={{
+              handleNavigate,
+              // INFO: counted from the live comments, so a comment added in
+              // the panel shows on the row once the list reloads
+              onFetchCommentCounts: hasComments
+                ? async (ids: string[]) =>
+                    Object.fromEntries(
+                      ids.map((id) => [
+                        id,
+                        id in COMMENT_COUNTS && COMMENT_COUNTS[id] > 5
+                          ? COMMENT_COUNTS[id]
+                          : activity[COMMENTS_COLLECTION].filter(
+                              (row) => row.itemId === id,
+                            ).length,
+                      ]),
+                    )
+                : undefined,
+            }}
+            edit={{
+              allEditable: canUpdate,
+              listEditable: canUpdate,
+              disabledUpdate: !canUpdate,
+              activityLog: hasComments
+                ? {
+                    enableComments: true,
+                    commentCollectionId: COMMENTS_COLLECTION,
+                    enableLogs: true,
+                    logsCollectionId: LOGS_COLLECTION,
+                    currentUserId: CURRENT_USER,
+                  }
+                : undefined,
+            }}
+            bareSettings={{
+              bareNewDTW: true,
+              bareFormDrawer: hasDrawer,
+              bareListMobileView: isMobile,
+              bareUpdateMobileView: isMobile,
+            }}
+            viewSettings={
+              hasDrawer
+                ? { readDrawer: { anchor: "responsive", maxWidth: "3xl" } }
+                : undefined
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ReadDrawerRowAction = () => (
+  <div className="w-full">
+    <div className="font-semibold mb-1 text-gray-900">
+      Data Template — row action beside the title
+    </div>
+    <div className="text-sm mb-4 text-gray-600">
+      Hover a table row to show the chevron beside its title, which opens the
+      record's read view for anyone who can see it — in the drawer with a read
+      drawer, as a page with No drawer. Then come two divided columns: the
+      pencil, which opens the edit form, only for people who can update, and the
+      comment bubble, with a count on rows that have any (12 and 120 show the
+      two-digit and 99+ badges). Drag the Record column narrower to see its
+      floor. Mobile cards open from the card, so they carry the pencil and the
+      bubble but no chevron.
+    </div>
+    <ReadDrawerDemo />
+  </div>
+);

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

@@ -41,6 +41,36 @@ The legacy `List` renders **every** extra key on an item. `NewList` renders only
 <NewList list={tasks} extraKeys={["details", "activity"]} />
 ```
 
+## Compact rows
+
+Set `compact` on an item to draw it as a two-line row, like a mail inbox: the title with a pill and a short date on the first line, one grey line under it, and an arrow that opens the rest. Every compact row is the same height. An item without `compact` keeps the layout above, so existing keys such as an `extraKeys` "details" keep their meaning.
+
+| `compact` field | Rendered as                                                                   |
+| --------------- | ----------------------------------------------------------------------------- |
+| `subtitle`      | One grey line under the title, cut to fit                                     |
+| `details`       | Shown under the row when its arrow is tapped; the arrow does not open the row |
+| `badge`         | A pill leading the second line. Without it, the item's `tags` / `tag`         |
+| `trailing`      | The right end of the title line. Without it, the item's `date`                |
+
+```tsx
+<NewList
+  list={[
+    {
+      id: "a1",
+      title: "Ahmad Solar House",
+      compact: {
+        badge: <Tag tagText="Done" color="green" size="small" />,
+        trailing: "12 Nov",
+        subtitle: "Selangor · RM 12,400",
+        details: <DetailList title="" list={fields} size="compact" />,
+      },
+    },
+  ]}
+/>
+```
+
+`NewListCompactRow` (`newList/compactRow`) is the row on its own; the new table draws its phone rows with it. `handlePickListRowFields` (`newList/listRowFields`) picks a row's fields from a column list in view order: the first date column for `trailing`, the first list column for `badge`, and the next two columns that hold something for `subtitle`. Pictures, files, drawings, long text, nested lists, buttons, timers and star ratings are left off the second line. `handleFormatListRowDate` writes a date as "12 Nov", adding the year outside the current one.
+
 ## Date
 
 | `date` value                                                   | Output                                                                                    |

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

@@ -1,12 +1,14 @@
 # NewTable
 
-Tabular display with a List-shaped mobile breakpoint. The architectural key: **`mobileView=true` delegates row rendering to `NewListRow`**, so the same tap-rhythm and avatar/title/trailing geometry shows up across NewList, NewFeeds, and NewTable mobile.
+Tabular display with a List-shaped mobile breakpoint. With `mobileView=true` each row is a two-line `NewListCompactRow`, like a mail inbox: the title and a short date, then a pill and a grey line of key values, and an arrow that opens every field. Tapping the row opens the record (`onClickRow` / `newTabUrl`), the checkbox ticks it without opening it, and groups draw the same foldable headers, counts and per-group paging as the computer layout. Rows are drawn again only when their own data changes, and a group with 120 or more loaded rows draws only the rows near the screen.
+
+Without `mobileTooltip.titleAdjacent`, the view's column order picks a row's fields (`handlePickListRowFields`): the first list column is the pill, the first date column the date, and the next two columns that hold something the grey line.
 
 ## Row activity
 
 Pass `onRowActivity={(id) => ...}` to show a keyboard-accessible chat button at the right of the first visible cell (beside the title on mobile cards). It stops row navigation and does not enter inline editing. When no left pins are configured, the first ungrouped column is pinned automatically; existing pin configurations are preserved. DTW wires this callback automatically when `edit.activityLog` is enabled with `bareNewDTW`.
 
-Pass `onRowEdit={(id) => ...}` as well to put an edit pencil before the chat button, at the same size and colour. Both sit over the cell's right padding, so the row does not grow. DTW passes it only when the user can update records (`edit.allEditable`) and opens the record's edit form with `handleNavigate("update", id, "general")`.
+Pass `onRowEdit={(id) => ...}` as well to put an edit pencil before the chat button, at the same size and colour, and `onRowOpen={(id) => ...}` to put a chevron beside the title. The pencil and the chat button each sit in their own divided strip at the title cell's right edge, like columns of their own, with the chevron just left of them. The chevron shows only when the row is hovered or the chevron is focused, and always on a touch screen, which cannot hover. While it shows, the title cell's padding grows to take it, so it never covers the title or its inline editor. All of them sit over the cell's right padding, so the row does not grow. While the title carries these actions, its column cannot be dragged — or set, or saved — narrower than its left padding, the actions' room (with the chevron's) and 48px of title; other columns keep the 80px floor. DTW passes the pencil only when the user can update records and opens the edit form with `handleNavigate("update", id, "general")`. It passes the chevron to anyone who can see the record, when `organise.handleNavigate` is set, and opens the read view with `handleNavigate("read", id, "general")` — in the drawer when `viewSettings.readDrawer` is set, as a page otherwise. An editable title cell is hard to click open, so the chevron is the sure way in. Mobile cards open from the card, so they show the pencil and the chat button but no chevron.
 
 ## Adding a row
 
@@ -26,18 +28,18 @@ Columns flagged `hideOnMobile` are dropped from the mobile rendering entirely.
 
 ## Mobile tooltip (`mobileTooltip`)
 
-With `mobileView`, `mobileTooltip` adds row data to the collapsed row and to a hover card. Through `DataTemplate` it is `bareSettings.bareMobileTooltip`, which applies when `bareNewDTW` and `bareListMobileView` are both on.
+With `mobileView`, `mobileTooltip` picks what the row shows, in place of the column order, and adds a hover card. Through `DataTemplate` it is `bareSettings.bareMobileTooltip`, which applies when `bareNewDTW` and `bareListMobileView` are both on.
 
-| Key                         | Type                       | Shows                                                                                                                                                                                                                  |
-| --------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `titleAdjacent.tagKey`      | `string`                   | That row field's value as a Tag next to the row title                                                                                                                                                                  |
-| `titleAdjacent.tagColor`    | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                          |
-| `titleAdjacent.trailingKey` | `string`                   | That row field's value as trailing text, e.g. a price                                                                                                                                                                  |
-| `titleAdjacent.summaryKeys` | `string[]`                 | A second line under the title while the row is collapsed, as label + value pairs. Labels come from the column titles; a dotted key (`shippingAddress.name`) falls back to its parent column's title. Empty values are skipped. Tapping the line expands the row |
-| `tooltip.imageKey`          | `string`                   | The image URL field shown in the hover card                                                                                                                                                                            |
-| `tooltip.summaryKeys`       | `string[]`                 | Label + value pairs in the hover card                                                                                                                                                                                  |
-| `tooltip.tagKeys`           | `string[]`                 | Tag pills in the hover card                                                                                                                                                                                            |
-| `tooltip.tagColors`         | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                          |
+| Key                         | Type                       | Shows                                                                                                                                                                                                                                                                                                                                    |
+| --------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `titleAdjacent.tagKey`      | `string`                   | That row field's value as a Tag next to the row title                                                                                                                                                                                                                                                                                    |
+| `titleAdjacent.tagColor`    | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                                                                                                                                            |
+| `titleAdjacent.trailingKey` | `string`                   | That row field's value at the right of the title line, e.g. a price. Without it the row shows no date                                                                                                                                                                                                                                    |
+| `titleAdjacent.summaryKeys` | `string[]`                 | The grey line under the title, as "Label: value" pairs joined with " · ". Labels come from the column titles; a dotted key (`shippingAddress.name`) falls back to its parent column's title. Empty values, hidden columns, the title and the `tagKey` column are skipped. Without it, and with `titleAdjacent` set, the line is left out |
+| `tooltip.imageKey`          | `string`                   | The image URL field shown in the hover card                                                                                                                                                                                                                                                                                              |
+| `tooltip.summaryKeys`       | `string[]`                 | Label + value pairs in the hover card                                                                                                                                                                                                                                                                                                    |
+| `tooltip.tagKeys`           | `string[]`                 | Tag pills in the hover card                                                                                                                                                                                                                                                                                                              |
+| `tooltip.tagColors`         | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                                                                                                                                            |
 
 ```tsx
 <NewTable
@@ -117,8 +119,11 @@ Types that need more than a name and a type are completed in the popup:
 | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `reference`, `listReference`, `referenceSelection` | endpoint and label, from `renderReferenceSpaceOptions` / `renderReferenceLabelOptions` — required, since a reference with no target resolves nothing |
 | `list`, `multipleList`                             | options, as a comma-separated line                                                                                                                   |
+| `lookup`                                           | a `reference` or `listReference` column of this table, then a column of the space it links to, from `renderReferenceLabelOptions(spaceId, true)`; `lookup`, `password` and `button` columns are left out. Offered only with `renderReferenceLabelOptions`. Saved as `{ type: "lookup", referenceFieldId, lookupFieldId }`, always optional and read-only |
 | `image`, `file`, `multipleImage`, `multipleFile`   | nothing — the consumer fills the storage path from its own settings                                                                                  |
 
+A `reference` or `listReference` column has a solid line under its header, and a `lookup` column (or a column drawn from one, carrying `lookupFieldId`) a dashed one, both in the primary colour.
+
 A **Required** toggle sets the field's `optional` flag. New columns default to
 optional, since the rows already in the table have no value for one the moment it
 is added — ticking it says so.
@@ -206,10 +211,10 @@ With `editable.active` most columns edit in the cell (`supportedInlineEditList`)
 
 `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`          |
-
+| 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     |
+| `groupColumnKey`     | `string`                                                              | The column the groups are built from. Phone rows leave it off, since the group header shows it. Group headers show on a phone while their rows load |
+| `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

@@ -833,3 +833,70 @@ export const RowLinks = () => {
     </StorySection>
   );
 };
+
+// INFO: reference columns carry a solid line under their header and lookup
+// columns a dashed one; a lookup is drawn as its source column's type
+export const LinkedColumns = () => {
+  const columns: NewTableColumn[] = [
+    { key: "name", title: "Customer", type: "string" },
+    {
+      key: "project",
+      title: "PV Project",
+      type: "reference",
+      referenceSpaceId: "projects",
+      referenceLabel: "code",
+    },
+    {
+      key: "projectStatus",
+      title: "Project Status",
+      type: "string",
+      referenceFieldId: "project",
+      lookupFieldId: "status",
+      disabled: true,
+    },
+    {
+      key: "installer",
+      title: "Installer",
+      type: "string",
+      referenceFieldId: "project",
+      lookupFieldId: "installer",
+      disabled: true,
+    },
+    { key: "notes", title: "Notes", type: "string" },
+  ];
+  const rows = [
+    {
+      id: "1",
+      name: "Andrew Tan",
+      project: "PV-1023",
+      projectStatus: "Installed",
+      installer: "Ahmad",
+      notes: "Call before visit",
+    },
+    {
+      id: "2",
+      name: "Celine Wong",
+      project: "PV-1031",
+      projectStatus: "Scheduled",
+      installer: "Kumar",
+      notes: "",
+    },
+  ];
+  return (
+    <StorySection
+      title="Linked columns"
+      description="A reference column has a solid line under its header; a lookup column, filled from the linked record, has a dashed one."
+    >
+      <NewTableImpl
+        columns={columns}
+        data={rows}
+        size={rows.length}
+        limit={10}
+        cursor=""
+        loading={false}
+        paginationType="page"
+        handleUpdatePageIndex={() => {}}
+      />
+    </StorySection>
+  );
+};

package/package.json

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