blixify-ui-web-mcp 0.1.20 → 0.1.21

package/lib/components/auth/signUp/signUp.stories.tsx

@@ -36,6 +36,7 @@ export const SignUp = () => {
   const [signUpType, setSignUpType] =
     useState<typeof AvailableProvider | "">("");
   const [stepIndex, setStepIndex] = useState(0);
+  const [phone, setPhone] = useState("");
 
   const handleChangeProvider = (provider: typeof AvailableProvider | "") => {
     setSignUpType(provider);
@@ -75,10 +76,11 @@ export const SignUp = () => {
           <TextInput
             ref={input2}
             id="phoneNumber"
-            value=""
+            value={phone}
             type="mobile"
             label="Mobile"
             placeholder="+60123456789"
+            onChange={(e) => setPhone(e.target.value)}
           />,
           <Select
             value="M"
@@ -120,6 +122,21 @@ export const SignUp = () => {
     ],
   };
 
+  // INFO: with the country picker on, the code comes from the selector, so the
+  // number field only asks for the local part; the other sections keep the full
+  // +60 format a plain mobile field expects
+  const pickerFormList = {
+    ...formList,
+    steps: formList.steps.map((eachStep) => ({
+      ...eachStep,
+      components: eachStep.components.map((eachComponent) =>
+        eachComponent.props?.id === "phoneNumber"
+          ? React.cloneElement(eachComponent, { placeholder: "123456789" })
+          : eachComponent
+      ),
+    })),
+  };
+
   return (
     <div className="font-sans max-w-4xl p-6">
       <StorySection
@@ -150,6 +167,27 @@ export const SignUp = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Phone Country Picker"
+        description="Enable mobilePicker and mobileCountryEditable on SignUpTemplate to apply an editable country selector to mobile TextInput fields."
+      >
+        <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+          <SignUpTemplate
+            type="phone"
+            stepIndex={0}
+            leftComponents={leftComponents}
+            leftClassName="bg-gray-50"
+            handleUpdateStepIndex={setStepIndex}
+            onChangeProvider={handleChangeProvider}
+            provider={["phone"]}
+            defaultProvider="phone"
+            formList={pickerFormList}
+            mobilePicker={true}
+            mobileCountryEditable={true}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Colored Left Panel"
         description={

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

@@ -349,7 +349,9 @@ No `edit` prop — hides all create/update/delete controls. Users can browse and
 
 ### Full CRUD
 
-Enable all editing features. `allEditable` turns on create, update, and delete in one flag.
+Enable all editing features. `allEditable` turns on create and update; delete is
+granted separately by `deleteBtn`, and inline cell editing by `listEditable` —
+see the Write permission matrix below.
 
 ```tsx
 <DataTemplate
@@ -561,6 +563,58 @@ Set `viewType="kanban"` on an `extendedTabs` entry and configure `kanbanSettings
 
 ---
 
+### Drive view
+
+A Google Drive-style folder browser. Every row in the collection is a file or a folder, so a folder is a row, and moving something only changes one column. Set `viewType="drive"` on an `extendedTabs` entry and name the four columns in `driveSettings`.
+
+- **Browse:** the open folder's rows load as one unpaged list, with folders first and then files, sorted A–Z. A path above the list goes back up. While the DTW search has text, the view searches the whole drive and shows each result's folder.
+- **Folder id:** pass `organise.folderId` and `organise.onChangeFolder` to keep the open folder in the url. Without them the view keeps its own state.
+- **Actions:** New folder, and Upload (one row per file, stored in that row's own storage folder). Files dragged over the drive show a "Drop to upload to <folder>" overlay, and a drop starts uploading straight away. The record Create button is hidden on a drive tab. Each item's menu has Details (the record's read view), Rename, Move to… and Delete. Deleting a folder deletes everything inside it, rows and storage.
+- **Permissions:** `allEditable` or `createBtn` shows New folder and Upload. `canUpdateRecord` or `canInlineUpdate` allows Rename and Move. `deleteBtn` allows Delete. Without them the drive can be browsed but not changed.
+- **Layout:** grid or list. The choice is remembered per browser, and phones start in the list layout.
+
+```tsx
+<DataTemplate
+  title="Documents"
+  description=""
+  type="list"
+  collectionId="documents"
+  model={[
+    { id: "name", name: "Name", type: "string" },
+    { id: "kind", name: "Kind", type: "list", listSelection: ["folder", "file"] },
+    { id: "parentId", name: "Folder", type: "string" },
+    { id: "file", name: "File", type: "multipleFile" },
+    { id: "size", name: "Size", type: "number" },
+  ]}
+  localURLEndpoint=""
+  devSettings={devSettings}
+  lib={{ axios, Menu, Transition }}
+  edit={{ allEditable: true, listEditable: true, deleteBtn: true }}
+  organise={{
+    handleNavigate,
+    folderId,
+    onChangeFolder: setFolderId,
+    extendedTabs: [
+      {
+        name: "Drive",
+        type: "list",
+        viewType: "drive",
+        defaultTab: true,
+        driveSettings: {
+          nameColumnId: "name",
+          kindColumnId: "kind",
+          parentColumnId: "parentId",
+          fileColumnId: "file",
+          sizeColumnId: "size",
+        },
+      },
+    ],
+  }}
+/>
+```
+
+---
+
 ### With search and filter
 
 Use `organise.additionalQuery` to add filter controls above the list. Each entry maps to a filter UI control.
@@ -858,9 +912,9 @@ const devSettings = parseWorkspaceSettings(
 
 | Name                    | Type          | Description                                              |
 | ----------------------- | ------------- | -------------------------------------------------------- |
-| `allEditable`           | `boolean`     | Enables add and update, and gates inline/drag writes     |
+| `allEditable`           | `boolean`     | Enables add and update, and gates card drag and batch writes |
 | `listAddable`           | `boolean`     | Enables adding rows inline in list view                  |
-| `listEditable`          | `boolean`     | Enables inline cell editing in list view                 |
+| `listEditable`          | `boolean`     | Enables inline cell editing in list view, and gates its write |
 | `createBtn`             | `boolean`     | Shows a create button even when `allEditable` is `false` |
 | `deleteBtn`             | `boolean`     | Enables delete and batch delete, independent of `allEditable` |
 | `disabledUpdate`        | `boolean`     | Disables update and batch update                         |
@@ -871,15 +925,19 @@ const devSettings = parseWorkspaceSettings(
 
 #### Write permission matrix
 
-Reader-reachable controls are gated by these rules. A control that is off is not
-rendered, and its underlying write is refused even if the callback is reached.
+These rules decide whether a control is **rendered**. The inline cell, Kanban
+drag, Kanban checkbox and batch callbacks re-check them before writing, so a
+stray callback cannot write. Delete is render-gated only, because the delete
+modal is also opened through the imperative `handleDeleteModal`.
 
 | Control                                            | Requires                                |
 | -------------------------------------------------- | --------------------------------------- |
 | Kanban drag/drop and its update write              | `allEditable && !disabledUpdate`        |
-| Inline cell edit, Kanban boolean checkbox          | `listEditable && !disabledUpdate`       |
-| Read-view Update button, list Update column        | `allEditable && !disabledUpdate`        |
-| Batch update, clone, change-to-draft               | `allEditable && !disabledUpdate && !disableBatchUpdate` |
+| Inline cell edit and its write                     | `listEditable && !disabledUpdate`       |
+| Kanban boolean checkbox and its write              | `listEditable && !disabledUpdate`       |
+| Read-view Update button                            | `allEditable && !disabledUpdate`        |
+| List Update column                                 | `allEditable && !disabledUpdate`, or `bareListMultipleSelectAddtionalActions` |
+| Batch update, clone, change-to-draft               | `allEditable && !disabledUpdate && !disableBatchUpdate` (the batch Update button also requires a non-Firebase backend) |
 | Delete button, batch delete, map delete            | `deleteBtn` (independent of `allEditable`) |
 | Map polygon select                                 | batch-update or delete permission       |
 
@@ -892,8 +950,15 @@ The imperative API is **not** gated by these rules. `handleFormSubmit`,
 `handleFormSaveDraft`, `handleDeleteModal` and `handleUploadOfflineData` are only
 reachable from consumer code, and `DataTemplateWrapper` defaults `edit` to
 `disabledUpdate: true, deleteBtn: false` — gating them would break every consumer
-that drives its own form without passing an `edit` prop. A consumer that does not
-want a write path should not render it.
+that drives its own form without passing an `edit` prop. Neither is the shared
+write path (`handleSubmitData`), which also serves the auth modal writing a
+changed email back to the profile record. A consumer that does not want a write
+path should not render it.
+
+> Reading these rules through `DataTemplateWrapper`: it spreads your `edit` over
+> its own defaults, so `edit={{ allEditable: true }}` still inherits
+> `disabledUpdate: true` and yields no update affordances. Pass
+> `disabledUpdate: false` explicitly to enable update, drag and batch controls.
 
 #### Inline editability matrix (`listEditable`)
 
@@ -970,7 +1035,8 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `fixedPagination`             | `boolean`                                                                   | Fixes the pagination bar to the bottom of the viewport                                                                                                                                                                                                                                                                |
 | `filterComponentNewRow`       | `boolean`                                                                   | Renders each filter component on its own row                                                                                                                                                                                                                                                                          |
 | `addColumnEnabled`            | `boolean`                                                                   | Shows an add-column button in the table header                                                                                                                                                                                                                                                                        |
-| `persistViewState`            | `"session" \| "local"`                                                      | Remembers the list's sort, filters, hidden columns, page and search in `sessionStorage` / `localStorage` per collection, so a Back navigation lands where the user left                                                                                                                                               |
+| `persistViewState`            | `"persistent" \| "session"`                                                 | Remembers the list's sort, filters, hidden columns, page and search 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`. 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`                                                                               |
 | `groupBy`                     | `string`                                                                    | Column ID to group list results by                                                                                                                                                                                                                                                                                    |
 | `groupIdCollapsible`          | `{ [key: string]: boolean }`                                                | Initial collapsed/expanded state per group ID                                                                                                                                                                                                                                                                         |
 | `sortGroupByAlphabetically`   | `boolean`                                                                   | Sorts group-by values alphabetically                                                                                                                                                                                                                                                                                  |
@@ -1083,6 +1149,8 @@ Injects custom React components and callbacks into the list, read, and update vi
 | `bareListTablePinColumns`                | `{ left?: string[]; right?: string[] }`                                               | Columns kept sticky at the edges while the table scrolls sideways (`"update"` is the actions column); new table only                                                                                                 |
 | `bareListMobileView`                     | `boolean`                                                                             | Phone card list instead of the table (the app passes its own isMobile)                                                                                                                                               |
 | `bareListMobileFloatingSearch`           | `boolean`                                                                             | Floating search bar at the bottom on phones; the list reserves room under its last row for it                                                                                                                        |
+| `bareMobileTooltip`                      | `MobileViewTooltip`                                                                   | Passed to NewTable as `mobileTooltip` when `bareNewDTW` and `bareListMobileView` are on: a Tag, trailing text and summary line on the collapsed row, plus a hover card. See the NewTable README → Mobile tooltip   |
+| `bareListMobileTooltip`                  | `NewListMobileTooltip`                                                                | Passed to NewList when `bareNewDTW` is on: `imageKey`, `summaryKeys`, `tagKeys` and `tagColors` for the hover card on list items                                                                                     |
 | `bareListMaxSelectedCount`               | `number`                                                                              | Caps how many rows the checkbox column may select at once                                                                                                                                                            |
 | `bareUpdateHandleData`                   | `(data: any, changedAttributeIds?: string[]) => void`                                 | Called on every form field change with the current data and changed field IDs                                                                                                                                        |
 | `bareUpdateHandlePreComplete`            | `(data: any) => Promise<boolean>`                                                     | Called before save — return `false` to cancel                                                                                                                                                                        |
@@ -1168,6 +1236,16 @@ calendarSettings: {
 }
 ```
 
+### Field visibility (`hideRead`)
+
+`hideRead: true` on a DataStructure field:
+
+- leaves the field out of the read view's field list;
+- on a `listObject`, `ganttchart` or `canvas` field, hides the whole field from the read view;
+- on a column inside a `listObject` (`objectData`), leaves that column out of the list-object table, in both the read and the update view. The row's edit popup still shows it, and the stored value is not changed.
+
+*Pointers:* `src/components/data/dataTemplate/index.tsx`, `renderEachListObject` in `src/components/data/updateModule.tsx`
+
 ### List / MultipleList Field Settings
 
 Properties specific to `type: "list"` and `type: "multipleList"` fields in the DataStructure schema.
@@ -1224,6 +1302,17 @@ Under `bareNewDTW` the feeds tab renders `NewFeeds` (timeline card that matches
 | `useColumnName` | `boolean`                     | Shows column name instead of column ID on cards        |
 | `query`         | `Query[]`                     | Additional queries to filter and organise kanban cards |
 
+### Drive Settings
+
+| Name               | Type     | Description                                                                                                  |
+| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------ |
+| `nameColumnId`     | `string` | A string column holding the file or folder name                                                              |
+| `kindColumnId`     | `string` | A list column whose value is `folder` or `file`                                                              |
+| `parentColumnId`   | `string` | The containing folder's row id. Missing, null or `""` means the top level                                    |
+| `fileColumnId`     | `string` | A `multipleFile` column holding the one uploaded file as `{ token, fileName }`, so the original name is kept |
+| `sizeColumnId`     | `string` | Optional. A number column written with the file size in bytes on upload                                      |
+| `mimeTypeColumnId` | `string` | Optional. A string column written with the file type on upload                                               |
+
 ### Map Settings
 
 | Name      | Type     | Description                                |

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

@@ -0,0 +1,197 @@
+// INFO: the drive view over an in-memory collection. The story mocks its own
+// API, so it opens without a server and the e2e spec drives it as it is.
+
+import React, { useEffect, useRef, useState } from "react";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import { DataTemplateWrapper } from "../dataWrapper";
+import { DataStructure } from "./model";
+import { ExtendedTabs } from "./spaceModel";
+
+const meta = {
+  title: "Data/Data Template/Drive",
+  decorators: [
+    (Story: () => React.ReactElement) => (
+      <div className="bg-gray-50 min-h-screen p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+const DRIVE_ENDPOINT = "http://localhost:3000/api/data";
+const DRIVE_UPLOAD = "http://localhost:3000/api/asset";
+const DRIVE_COLLECTION = "demo-drive";
+
+const DriveSchema: DataStructure[] = [
+  { id: "name", name: "Name", type: "string" },
+  { id: "kind", name: "Kind", type: "list", listSelection: ["folder", "file"] },
+  { id: "parentId", name: "Folder", type: "string" },
+  { id: "file", name: "File", type: "multipleFile" },
+  { id: "size", name: "Size", type: "number" },
+];
+
+const DriveTabs: ExtendedTabs[] = [
+  {
+    name: "Drive",
+    type: "list",
+    viewType: "drive",
+    defaultTab: true,
+    driveSettings: {
+      nameColumnId: "name",
+      kindColumnId: "kind",
+      parentColumnId: "parentId",
+      fileColumnId: "file",
+      sizeColumnId: "size",
+    },
+  },
+];
+
+const handleBuildDriveStore = () => [
+  { _id: "f-contracts", name: "Contracts", kind: "folder", parentId: "" },
+  { _id: "f-invoices", name: "Invoices", kind: "folder", parentId: "" },
+  { _id: "f-2025", name: "2025", kind: "folder", parentId: "f-invoices" },
+  {
+    _id: "d-handbook",
+    name: "Team handbook.pdf",
+    kind: "file",
+    parentId: "",
+    size: 482000,
+    file: [{ token: "demo", fileName: "demo-handbook.pdf" }],
+  },
+  {
+    _id: "d-inv-01",
+    name: "Invoice 01.pdf",
+    kind: "file",
+    parentId: "f-2025",
+    size: 91000,
+    file: [{ token: "demo", fileName: "demo-inv-01.pdf" }],
+  },
+  {
+    _id: "d-nda",
+    name: "Supplier NDA.docx",
+    kind: "file",
+    parentId: "f-contracts",
+    size: 34000,
+    file: [{ token: "demo", fileName: "demo-nda.docx" }],
+  },
+];
+
+const handleParseBody = (config: any) => {
+  try {
+    return JSON.parse(config?.data ?? "{}");
+  } catch (err) {
+    return {};
+  }
+};
+
+// INFO: enough of the query language for a drive — equality, `in` with null
+// matching a missing field the way Mongo does, and a name search
+const handleMatchQuery = (row: any, query: any[]) =>
+  query.every((eachQuery) => {
+    const value = row[eachQuery.queryId];
+    if (eachQuery.type === "=") return value === eachQuery.value;
+    if (eachQuery.type === "in")
+      return (eachQuery.value ?? []).some((eachValue: any) =>
+        eachValue === null
+          ? value === undefined || value === null
+          : value === eachValue,
+      );
+    if (eachQuery.type === "search")
+      return String(row.name ?? "")
+        .toLowerCase()
+        .includes(String(eachQuery.value ?? "").toLowerCase());
+    return true;
+  });
+
+export const Drive = () => {
+  const [folderId, setFolderId] = useState("");
+  const [mounted, setMounted] = useState(false);
+  const storeRef = useRef<any[]>(handleBuildDriveStore());
+
+  useEffect(() => {
+    const store = storeRef.current;
+    const mock = new MockAdapter(axios, {
+      onNoMatch: "passthrough",
+      delayResponse: 120,
+    });
+    const base = `${DRIVE_ENDPOINT}/${DRIVE_COLLECTION}`;
+
+    mock.onPost(`${base}/list`).reply((config) => {
+      const body = handleParseBody(config);
+      const rows = store.filter((eachRow) =>
+        handleMatchQuery(eachRow, body.query ?? []),
+      );
+      return [200, { data: rows, count: rows.length }];
+    });
+    mock.onPost(`${base}/get`).reply((config) => {
+      const body = handleParseBody(config);
+      return [200, { data: store.find((row) => row._id === body.id) ?? null }];
+    });
+    mock.onPost(`${base}/create`).reply((config) => {
+      store.push(handleParseBody(config).data);
+      return [200, { success: true }];
+    });
+    mock.onPost(`${base}/update`).reply((config) => {
+      const body = handleParseBody(config);
+      const row = store.find((eachRow) => eachRow._id === body.id);
+      if (row) Object.assign(row, body.data);
+      return [200, { success: true }];
+    });
+    mock.onPost(`${base}/batchDelete`).reply((config) => {
+      const ids: string[] = handleParseBody(config).id ?? [];
+      for (let index = store.length - 1; index >= 0; index -= 1)
+        if (ids.includes(store[index]._id)) store.splice(index, 1);
+      return [200, { success: true }];
+    });
+    mock.onPost(`${DRIVE_UPLOAD}/upload`).reply(200, { data: "demo-token" });
+    mock
+      .onPost(`${DRIVE_UPLOAD}/batchDeleteDirectory`)
+      .reply(200, { success: true });
+
+    setMounted(true);
+    return () => mock.restore();
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">Drive</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        A folder browser over a collection where every row is a file or a
+        folder. Open folders, use the path to go back, create, upload, rename,
+        move and delete. Deleting a folder takes everything inside it.
+      </div>
+      <DataTemplateWrapper
+        title="Documents"
+        type="list"
+        collectionId={DRIVE_COLLECTION}
+        schema={DriveSchema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: DRIVE_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+          assetEndpoint:
+            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.firebasestorage.app/o/",
+          assetUploadEndpoint: DRIVE_UPLOAD,
+        }}
+        edit={{
+          allEditable: true,
+          listEditable: true,
+          disabledUpdate: false,
+          deleteBtn: true,
+        }}
+        bareSettings={{ bareNewDTW: true, bareCompactMode: true }}
+        organise={{
+          extendedTabs: DriveTabs,
+          folderId,
+          onChangeFolder: setFolderId,
+        }}
+        handleNavigate={() => {}}
+      />
+    </div>
+  );
+};

package/lib/components/data/dataWrapper/dataWrapper.edit.stories.tsx

@@ -756,3 +756,203 @@ export const DTWListObjectTable = () => {
   );
 };
 DTWListObjectTable.storyName = "DTW List Object Table";
+
+// ---------------------------------------------------------------------------
+// DTW Callback Counts — used by e2e/dtw-callbacks.spec.ts
+// ---------------------------------------------------------------------------
+
+const CALLBACK_ENDPOINT = "https://callback-counts.blixify.invalid/api/data";
+const CALLBACK_COLLECTION = "callback-records";
+
+const CallbackCountsSchema = [
+  { id: "name", name: "Name", type: "string" as const },
+  { id: "notes", name: "Notes", type: "string" as const, optional: true },
+];
+
+type CallbackCounterKey =
+  | "list"
+  | "get"
+  | "create"
+  | "update"
+  | "delete"
+  | "preComplete"
+  | "postComplete"
+  | "navigate";
+
+const CALLBACK_COUNTER_KEYS: CallbackCounterKey[] = [
+  "list",
+  "get",
+  "create",
+  "update",
+  "delete",
+  "preComplete",
+  "postComplete",
+  "navigate",
+];
+
+const handleInstallCallbackMock = (
+  store: any[],
+  onCount: (key: CallbackCounterKey) => void,
+) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 100,
+  });
+  const handleParseBody = (config: any) => {
+    try {
+      return JSON.parse(config?.data ?? "{}");
+    } catch (err) {
+      return {};
+    }
+  };
+  const renderUrl = (type: string) =>
+    `${CALLBACK_ENDPOINT}/${CALLBACK_COLLECTION}/${type}`;
+  mock.onPost(renderUrl("list")).reply(() => {
+    onCount("list");
+    return [
+      200,
+      { data: store.map((row) => ({ ...row })), count: store.length },
+    ];
+  });
+  mock
+    .onPost(renderUrl("count"))
+    .reply(() => [200, { data: store.length, count: store.length }]);
+  mock.onPost(renderUrl("get")).reply((config) => {
+    onCount("get");
+    const body = handleParseBody(config);
+    const row = store.find((eachRow) => eachRow._id === body.id);
+    return [200, { data: row ? { ...row } : null }];
+  });
+  mock.onPost(renderUrl("create")).reply((config) => {
+    onCount("create");
+    store.push({ ...(handleParseBody(config).data ?? {}) });
+    return [200, { success: true }];
+  });
+  mock.onPost(renderUrl("update")).reply((config) => {
+    onCount("update");
+    const body = handleParseBody(config);
+    const index = store.findIndex((eachRow) => eachRow._id === body.id);
+    if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
+    return [200, { success: true }];
+  });
+  mock.onPost(renderUrl("delete")).reply((config) => {
+    onCount("delete");
+    const body = handleParseBody(config);
+    const index = store.findIndex((eachRow) => eachRow._id === body.id);
+    if (index >= 0) store.splice(index, 1);
+    return [200, { success: true }];
+  });
+  return mock;
+};
+
+/**
+ * INFO: a full CRUD page that counts every request and every save callback on
+ * screen, so e2e can assert that one user action fires each of them exactly
+ * once. A doubled callback reaches consumers as a doubled email or upload,
+ * while the page itself looks fine — the counters are the only visible signal.
+ */
+export const DTWCallbackCounts = () => {
+  // 1. State
+  const [mount, setMount] = useState<boolean>(false);
+  const [, setTick] = useState<number>(0);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string>("");
+  const [lastNavigate, setLastNavigate] = useState<string>("");
+
+  // 2. Refs
+  const storeRef = useRef<any[]>([
+    { _id: "r1", name: "Record One", notes: "first" },
+    { _id: "r2", name: "Record Two", notes: "second" },
+  ]);
+  const countersRef = useRef<Record<CallbackCounterKey, number>>({
+    list: 0,
+    get: 0,
+    create: 0,
+    update: 0,
+    delete: 0,
+    preComplete: 0,
+    postComplete: 0,
+    navigate: 0,
+  });
+  const mockRef = useRef<any>(null);
+
+  // 4. Effects
+  useEffect(() => {
+    mockRef.current = handleInstallCallbackMock(storeRef.current, handleCount);
+    setMount(true);
+    return () => {
+      mockRef.current?.restore();
+      mockRef.current = null;
+    };
+  }, []);
+
+  // 5. Handlers
+  function handleCount(key: CallbackCounterKey) {
+    countersRef.current[key] += 1;
+    setTick((previous) => previous + 1);
+  }
+
+  const handleNavigate = (type: any, id: any) => {
+    handleCount("navigate");
+    setLastNavigate(`${type}:${id ?? ""}`);
+    setViewType(type);
+    if (id !== undefined) setSelectedId(id);
+  };
+
+  // 7. Return
+  if (!mount) return <Loading />;
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW Callback Counts
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Every request and save callback is counted below. One create, update or
+        delete should move each of its counters by exactly one.
+      </div>
+      <div className="flex flex-wrap gap-4 mb-4 text-xs text-gray-600 font-mono">
+        {CALLBACK_COUNTER_KEYS.map((eachKey) => (
+          <span key={eachKey}>
+            {eachKey}:{" "}
+            <span data-testid={`callback-count-${eachKey}`}>
+              {countersRef.current[eachKey]}
+            </span>
+          </span>
+        ))}
+        <span>
+          last navigate:{" "}
+          <span data-testid="callback-last-navigate">{lastNavigate}</span>
+        </span>
+      </div>
+      <DataTemplateWrapper
+        title="Records"
+        type={viewType}
+        id={selectedId}
+        collectionId={CALLBACK_COLLECTION}
+        schema={CallbackCountsSchema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: CALLBACK_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+          assetEndpoint: "",
+          assetUploadEndpoint: "",
+        }}
+        edit={{ allEditable: true, disabledUpdate: false, deleteBtn: true }}
+        organise={{ breadcrumbType: "button" }}
+        bareSettings={{
+          bareNewDTW: true,
+          bareUpdateHandlePreComplete: async () => {
+            handleCount("preComplete");
+            return true;
+          },
+          bareUpdateHandlePostComplete: async () => {
+            handleCount("postComplete");
+          },
+        }}
+        handleNavigate={handleNavigate}
+      />
+    </div>
+  );
+};
+DTWCallbackCounts.storyName = "DTW Callback Counts";

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

@@ -2,12 +2,6 @@
 
 Calendar surface with six variants. Mobile default should be **weekStrip + dayTimeline** (not month grid).
 
-## Design reference
-
-PR #1666 — `uiRefresh.stories.tsx`, sections **Calendar — Variant 1 through Variant 5** (~line 979 `MiniMonthCalendar`, ~line 1091 `MobileWeekStrip`, ~line 1136 `DayTimeline`, etc.).
-
-Note: an earlier draft of `NewCalendar` lived at `src/components/display/newCalendar/index.tsx` (1,243 LOC) but was deleted by Sean's commit `bbd0117c` ("fix removed new stories and implemented redesign directly to components"). The full source is recoverable via `git show <sha>:src/components/display/newCalendar/index.tsx` and should be the starting point for this implementation — don't rewrite from scratch.
-
 ## Variants
 
 | Variant | Pattern | Best for |

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

@@ -2,11 +2,7 @@
 
 Social-style activity feed. Composes `NewListRow` so the row geometry matches `NewList` — same avatar size, same trailing-time position, same border treatment. The Feed-specific bits (quoted content, inline media, reactions row) attach via `renderExtra`.
 
-## Design reference
-
-PR #1666 — `uiRefresh.stories.tsx`, section **"Feeds View — Modern Mobile (Social-style Activity)"** (~line 1676, `ModernFeedsView`).
-
-Patterns to honour:
+## Design patterns
 
 - Avatar + actor name + relative time on the row header
 - Quoted comment blocks with left-border accent

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

@@ -2,13 +2,6 @@
 
 Sectioned card board. Desktop: horizontal columns. Mobile: tab switcher between columns + swipe-card-to-move-column + FAB for primary CTA.
 
-## Design reference
-
-PR #1666 — `uiRefresh.stories.tsx`:
-
-- **"Kanban — Desktop Column View"** (~line 650, `DesktopKanban`)
-- **"Kanban — Mobile Tab View"** (~line 675, `MobileKanban`) — already includes the tab switcher, swipe hint, and FAB pattern. Lift those into the real component.
-
 ## Mobile interactions
 
 - Tap a column tab to switch (no horizontal scroll)

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

@@ -6,11 +6,8 @@ Mobile-native list foundation. Other components (`NewFeeds`, `NewTable` mobile b
 
 `Calendar` / `Table` / `Kanban` / `List` / `Feeds` already exist as legacy components. The `New*` prefix lets us ship the modernised foundation without breaking consumers. Migration plan TBD (likely v2.0.0 deprecation).
 
-## Design reference
+## Design patterns
 
-PR #1666 — `uiRefresh.stories.tsx`, section **"List View — Modern Mobile (Sticky Section Headers)"** (~line 1561, `ModernListView`).
-
-Key patterns to honour:
 - Sticky section headers (TODAY / YESTERDAY / THIS WEEK) — stay pinned while scrolling
 - Avatar + 2-line preview row (`NewListRow`)
 - Unread state — bold sender + small blue dot

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

@@ -2,15 +2,6 @@
 
 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.
 
-## Design reference
-
-PR #1666 — `uiRefresh.stories.tsx`:
-
-- **"Table — Desktop (clean borderless)"** (~line 491, `DesktopTable`)
-- **"Table — Mobile Card View"** (~line 552, `MobileCardTable`)
-
-Note: the Mobile Card View mock in #1666 invented a bespoke avatar/name/status layout. That pattern is being replaced — the mobile rendering should use `NewListRow` (composition), not duplicate it.
-
 ## Mobile column flags
 
 Columns expose three optional booleans that map them to the `NewListItem` shape:
@@ -23,6 +14,35 @@ Columns expose three optional booleans that map them to the `NewListItem` shape:
 
 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.
+
+| 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                                                                                                                                                                                          |
+
+```tsx
+<NewTable
+  mobileView
+  mobileTooltip={{
+    titleAdjacent: {
+      tagKey: "status",
+      tagColor: { Delivered: "green", Pending: "yellow" },
+      summaryKeys: ["shippingAddress.name"],
+    },
+  }}
+  {...tableProps}
+/>
+```
+
 ## Column width
 
 Drag the grip on a header's right border to resize that column. The line is

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

@@ -372,6 +372,85 @@ const ElementCellsMatrix = () => {
   );
 };
 
+// INFO: an editable table with disabled schema columns beside editable ones —
+// hovering Value or Notes opens an editor, while Unit, Source and the coloured
+// Status column stay read-only, matching how the form treats disabled fields
+const lockedColumns: NewTableColumn[] = [
+  {
+    key: "metric",
+    title: "Metric",
+    type: "list",
+    listSelection: ["Steps", "Heart Rate", "Weight"],
+    listSelectionColour: ["blue", "red", "yellow"],
+  },
+  { key: "value", title: "Value", type: "number" },
+  { key: "unit", title: "Unit (disabled)", type: "string", disabled: true },
+  { key: "notes", title: "Notes", type: "string" },
+  {
+    key: "source",
+    title: "Source (disabled)",
+    type: "string",
+    disabled: true,
+  },
+  {
+    key: "status",
+    title: "Status (disabled)",
+    type: "list",
+    listSelection: ["Synced", "Pending"],
+    listSelectionColour: ["green", "yellow"],
+    disabled: true,
+  },
+];
+
+const lockedRows: NewTableRow[] = [
+  {
+    id: "1",
+    metric: "Heart Rate",
+    value: 72,
+    unit: "bpm",
+    notes: "After walk",
+    source: "Manual entry",
+    status: "Synced",
+  },
+  {
+    id: "2",
+    metric: "Weight",
+    value: 68.5,
+    unit: "kg",
+    notes: "Morning",
+    source: "Device sync",
+    status: "Pending",
+  },
+];
+
+const EditableWithDisabledColumns = () => {
+  const [rows, setRows] = useState<NewTableRow[]>(lockedRows);
+
+  return (
+    <NewTableImpl
+      columns={lockedColumns}
+      data={rows}
+      paginationType="page"
+      size={rows.length}
+      limit={10}
+      pageIndex={0}
+      handleUpdatePageIndex={() => {}}
+      editable={{
+        active: true,
+        onUpdateData: async (rowId, columnId, value) => {
+          setRows((previous) =>
+            previous.map((eachRow) =>
+              eachRow.id === rowId
+                ? { ...eachRow, [columnId]: value }
+                : eachRow,
+            ),
+          );
+        },
+      }}
+    />
+  );
+};
+
 export const NewTable = () => {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
@@ -512,6 +591,13 @@ export const NewTable = () => {
         <EditableWithAddColumn />
       </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."
+      >
+        <EditableWithDisabledColumns />
+      </StorySection>
+
       <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."

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

@@ -68,7 +68,7 @@ return (
 | `disabled`       | `boolean`                                     |                               |
 | `rounded`        | `none / md /lg`                               | Border with                   |
 | `variant`        | `flat / outline /flatOutline`                 |                               |
-| `color`          | `red / blue / green / yellow / indigo / dark` | Background color & text color |
+| `color`          | `TagColor \| string` — `primary / red / blue / green / yellow / indigo / purple / lime / sky / pink / orange / dark` | Background color & text color. `TagColor` is exported from this component |
 | `customFontSize` | `string`                                      | Tailwind font class name      |
 | `customPadding`  | `string`                                      | Tailwind padding class name   |
 | `onClick`        | `(value: string) => void`                     | Value is tagText              |

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

@@ -67,6 +67,13 @@ export const Tag = () => {
           <TagImpl tagText="React" color="dark" variant="flatOutline" />
           <TagImpl tagText="Default" color="default" variant="flatOutline" />
         </div>
+        <h1 className="text-sm font-medium">Custom Hex</h1>
+        <div className="flex flex-wrap gap-4">
+          <TagImpl tagText="Joel Michael" color="#2563eb" />
+          <TagImpl tagText="cychanyi" color="#0d9488" />
+          <TagImpl tagText="Backlogs" color="#a16207" />
+          <TagImpl tagText="Small" size="small" color="#db2777" />
+        </div>
       </div>
     </div>
   );

package/lib/components/input/uploadInput/uploadInput.stories.tsx

@@ -34,6 +34,10 @@ export const UploadInput = () => {
   const [multiPdfs, setMultiPdfs] = useState<any>({ ...emptyFiles });
   const [noDupFiles, setNoDupFiles] = useState<any>({ ...emptyFiles });
   const [compactFiles, setCompactFiles] = useState<any>({ ...preloadedImages });
+  const [chooserFiles, setChooserFiles] = useState<any>({ ...emptyFiles });
+  const [chooserMobileFiles, setChooserMobileFiles] = useState<any>({
+    ...emptyFiles,
+  });
   const [tagFiles, setTagFiles] = useState<any>({
     data: [
       {
@@ -104,6 +108,43 @@ export const UploadInput = () => {
 
   return (
     <>
+      <StorySection
+        title="Camera / Gallery Chooser"
+        description="showCameraGalleryOptionModal anchors a Camera / Gallery panel to the upload trigger. Android needs it: a WebView only reaches the camera when the input carries `capture`, so without a chooser an image field drops straight into the file picker with no camera option. iOS presents its own sheet, so consumers should gate this on platform. Camera uses capture='environment'; both honour the field's accept."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInputImpl
+            lib={{ axios }}
+            id="chooserImages"
+            label="Roof Aerial / Overview Image"
+            type="multi"
+            showModal
+            accept="image/*"
+            files={chooserFiles}
+            onChange={(value: any) => setChooserFiles(value)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Camera / Gallery Chooser — Mobile Row"
+        description="The same chooser in the mobileView row layout, which is what a phone renders below 768px. The panel is anchored to its trigger, so it travels with the field as the form scrolls."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInputImpl
+            lib={{ axios }}
+            id="chooserMobileImages"
+            label="Ridgecapping Location Image"
+            type="multi"
+            showModal
+            mobileView
+            accept="image/*,video/*"
+            files={chooserMobileFiles}
+            onChange={(value: any) => setChooserMobileFiles(value)}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Single Image Upload"
         description="Default single-file mode. Accepts PNG, JPG, JPEG, HEIC, HEIF. HEIC/HEIF files are auto-converted to JPEG. compress reduces file size before upload."

package/package.json

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