blixify-ui-web-mcp 0.1.63 → 0.1.65

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

@@ -0,0 +1,393 @@
+import { Menu, Transition } from "@headlessui/react";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import React, { useMemo, useState } from "react";
+import { DataTemplate } from "../dataTemplate";
+import { DataStructure } from "../dataTemplate/model";
+import { ButtonCell } from "./buttonCell";
+import { ColumnTypeContext } from "./context";
+import { RatingStars } from "./ratingCell";
+import { TimeTrackingCell } from "./timeTrackingCell";
+
+const meta = { title: "Data/Column Types" };
+export default meta;
+
+// INFO: an in-browser endpoint — every read and write below stays in memory
+const DEMO_ENDPOINT = "https://column-types-demo.local/api";
+const JOBS_COLLECTION = "demo-jobs";
+const BOARD_COLLECTION = "demo-board";
+
+const MEMBERS = [
+  { key: "u-alice", label: "Alice", image: "" },
+  { key: "u-bob", label: "Bob", image: "" },
+  { key: "u-carol", label: "Carol", image: "" },
+  { key: "u-dan", label: "Dan", image: "" },
+];
+
+const demoDevSettings: any = {
+  server: "mongoServer",
+  dbEndpoint: DEMO_ENDPOINT,
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: "",
+  imageEndpoint: "",
+  organisationMembers: MEMBERS,
+};
+
+const JOB_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Job", type: "string" },
+  {
+    id: "stage",
+    name: "Stage",
+    type: "list",
+    listSelection: ["Survey", "Install", "Handover"],
+    listSelectionColour: ["orange", "blue", "green"],
+    optional: true,
+  },
+  {
+    id: "generate",
+    name: "Quote",
+    type: "button",
+    buttonLabel: "Generate PDF",
+    buttonColour: "primary",
+  },
+  {
+    id: "moveOn",
+    name: "Move On",
+    type: "button",
+    buttonLabel: "Move on",
+    buttonColour: "green",
+    buttonConfirm: "Move this job to the next stage?",
+  },
+  { id: "work", name: "Site Time", type: "timeTracking", optional: true },
+  { id: "timeline", name: "Timeline", type: "dateRange", optional: true },
+  {
+    id: "score",
+    name: "Customer Rating",
+    type: "number",
+    ratingMax: 5,
+    optional: true,
+  },
+  {
+    id: "daysLeft",
+    name: "Days Planned",
+    type: "formula",
+    formulaExpression: "DAYS({timeline#end}, {timeline#start})",
+  },
+  {
+    id: "hoursText",
+    name: "Hours",
+    type: "formula",
+    formulaExpression: "ROUND({work}, 2)",
+  },
+];
+
+const handleSeedJobs = () => {
+  const today = new Date();
+  const handleDay = (offset: number) =>
+    new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() + offset,
+    ).toISOString();
+  return [
+    {
+      _id: "job-1",
+      name: "Ipoh rooftop",
+      stage: "Survey",
+      work: { totalSeconds: 5400, running: false },
+      timeline: { start: handleDay(2), end: handleDay(8) },
+      score: 4,
+      baseNumber: 101,
+      baseCreatedAt: handleDay(-20),
+      baseCreatedBy: "u-alice",
+    },
+    {
+      _id: "job-2",
+      name: "Shah Alam warehouse",
+      stage: "Install",
+      work: {
+        totalSeconds: 600,
+        running: true,
+        startedAt: new Date(Date.now() - 90 * 1000).toISOString(),
+      },
+      timeline: { start: handleDay(-3), end: handleDay(25) },
+      baseNumber: 102,
+      baseCreatedAt: handleDay(-10),
+      baseCreatedBy: "u-bob",
+    },
+    {
+      _id: "job-3",
+      name: "Penang terrace (older record, no stamps)",
+      stage: "Archived",
+    },
+  ];
+};
+
+const handleIsIn = (list: any[], value: any) =>
+  list.some((each) =>
+    each === null ? value === null || value === undefined : each === value,
+  );
+
+const handleMatchQuery = (row: any, query: any[]) =>
+  (Array.isArray(query) ? query : []).every((eachQuery) => {
+    if (!eachQuery?.queryId) return true;
+    const value = eachQuery.queryId
+      .split(".")
+      .reduce((acc: any, key: string) => acc?.[key], row);
+    switch (eachQuery.type) {
+      case "=":
+        return String(value) === String(eachQuery.value);
+      case "in":
+        return handleIsIn(eachQuery.value, value);
+      case "!in":
+        return !handleIsIn(eachQuery.value, value);
+      default:
+        return true;
+    }
+  });
+
+// INFO: list, get and update over one array per collection, so a timer
+// started or a rating given in the story survives a refresh of the list
+const handleInstallMock = (stores: { [collectionId: string]: any[] }) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 200,
+  });
+  const handleBody = (config: any) => JSON.parse(config?.data ?? "{}");
+  Object.entries(stores).forEach(([collectionId, store]) => {
+    const url = (type: string) => `${DEMO_ENDPOINT}/${collectionId}/${type}`;
+    mock.onPost(url("list")).reply((config) => {
+      const body = handleBody(config);
+      const rows = store.filter((each) => handleMatchQuery(each, body.query));
+      const cursor = typeof body.cursor === "number" ? body.cursor : 0;
+      const limit = typeof body.limit === "number" ? body.limit : rows.length;
+      return [
+        200,
+        {
+          data: JSON.parse(JSON.stringify(rows.slice(cursor, cursor + limit))),
+          count: rows.length,
+        },
+      ];
+    });
+    mock.onPost(url("get")).reply((config) => {
+      const body = handleBody(config);
+      const row = store.find((each) => each._id === body.id);
+      return [200, { data: row ? JSON.parse(JSON.stringify(row)) : null }];
+    });
+    mock.onPost(url("update")).reply((config) => {
+      const body = handleBody(config);
+      const row = store.find((each) => each._id === body.id);
+      if (row)
+        Object.assign(row, body.data, {
+          baseUpdatedAt: new Date().toISOString(),
+          baseUpdatedBy: "u-alice",
+        });
+      return [200, { success: true }];
+    });
+  });
+  return mock;
+};
+
+export const MondayParityColumns = () => {
+  // 1. State
+  const [type, setType] = useState<"list" | "read" | "update">("list");
+  const [id, setId] = useState("");
+  const [log, setLog] = useState<string[]>([]);
+
+  // 2. Refs
+  const jobs = useMemo(() => handleSeedJobs(), []);
+  useMemo(() => handleInstallMock({ [JOBS_COLLECTION]: jobs }), [jobs]);
+
+  // 5. Handlers
+  // INFO: stands in for the host — Space posts the click to its button route
+  const handleButtonClick = async (columnId: string, row: any) => {
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    setLog((previous) => [
+      `${new Date().toLocaleTimeString()} — ${columnId} on ${row.name}`,
+      ...previous,
+    ]);
+  };
+
+  // 7. Return
+  return (
+    <div className="w-full space-y-4">
+      <div className="text-sm text-gray-600">
+        A button column (Generate PDF; Move on asks first), a time tracking
+        column that ticks live, a timeline (date range), a 5-star rating and two
+        formulas reading them. System columns (Created At / By, Updated At / By,
+        Record ID, Number) are offered hidden in the column settings. The third
+        record is an older one with no stamps.
+      </div>
+      <DataTemplate
+        title="Jobs"
+        description="Monday parity column types"
+        type={type}
+        id={id}
+        collectionId={JOBS_COLLECTION}
+        model={JOB_SCHEMA}
+        localURLEndpoint=""
+        devSettings={demoDevSettings}
+        lib={{ axios, Menu, Transition }}
+        edit={{ allEditable: true, listEditable: true }}
+        bareSettings={{ bareNewDTW: true, bareSystemColumns: true }}
+        organise={{
+          paginationType: "page",
+          showGroupByFeature: true,
+          onButtonClick: handleButtonClick,
+          handleNavigate: (nextType: string, nextId?: string) => {
+            setType(nextType as any);
+            setId(nextId ?? "");
+          },
+        }}
+      />
+      <div data-testid="button-click-log" className="text-xs text-gray-500">
+        {log.length === 0
+          ? "Button clicks appear here."
+          : log.map((each) => <div key={each}>{each}</div>)}
+      </div>
+    </div>
+  );
+};
+
+const BOARD_STATUSES = ["Working on it", "Stuck", "Done"];
+
+const handleSeedBoard = () =>
+  Array.from({ length: 2300 }, (_, index) => ({
+    _id: `board-${index}`,
+    name: `Task #${index}`,
+    // INFO: every 50th row has no owner and every 70th a member who left, so
+    // the No Value and Unknown sections are both there
+    owner:
+      index % 50 === 49
+        ? ""
+        : index % 70 === 69
+          ? "u-left"
+          : MEMBERS[index % MEMBERS.length].key,
+    status:
+      index % 45 === 44 ? "" : BOARD_STATUSES[index % BOARD_STATUSES.length],
+    done: index % 3 === 0,
+    score: index % 6,
+  }));
+
+const BOARD_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Task", type: "string" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: BOARD_STATUSES,
+    listSelectionColour: ["orange", "red", "green"],
+    optional: true,
+  },
+  { id: "owner", name: "Owner", type: "person", optional: true },
+  { id: "done", name: "Checked", type: "boolean", optional: true },
+  {
+    id: "score",
+    name: "Priority",
+    type: "number",
+    ratingMax: 5,
+    optional: true,
+  },
+];
+
+export const GroupedBoard2300Rows = () => {
+  // 1. State
+  const [groupBy, setGroupBy] = useState("owner");
+
+  // 2. Refs
+  const board = useMemo(() => handleSeedBoard(), []);
+  useMemo(() => handleInstallMock({ [BOARD_COLLECTION]: board }), [board]);
+
+  // 7. Return
+  return (
+    <div className="w-full space-y-4">
+      <div className="text-sm text-gray-600">
+        2,300 tasks read in one page and grouped into sections. Grouped by Owner
+        (a person column) the sections follow the member order, then Unknown (a
+        member who left) and No Value; each section draws 50 rows and a Show
+        more. Grouped by Status or Checked each section reads and pages its own
+        rows.
+      </div>
+      <DataTemplate
+        key={groupBy}
+        title="Board"
+        description="Grouped into sections"
+        type="list"
+        collectionId={BOARD_COLLECTION}
+        model={BOARD_SCHEMA}
+        localURLEndpoint=""
+        devSettings={demoDevSettings}
+        lib={{ axios, Menu, Transition }}
+        limit={groupBy === "owner" ? 2300 : 25}
+        edit={{ allEditable: true }}
+        bareSettings={{ bareNewDTW: true }}
+        organise={{
+          paginationType: groupBy === "owner" ? "page" : "scroll",
+          showGroupByFeature: true,
+          groupBy,
+          onChangeGroupBy: (value: string) => setGroupBy(value || "owner"),
+        }}
+      />
+    </div>
+  );
+};
+
+// INFO: the cells on their own, outside a DataTemplate — the context is what
+// a DataTemplate provides
+export const Cells = () => {
+  // 1. State
+  const [score, setScore] = useState(3);
+  const [timer, setTimer] = useState<any>({
+    totalSeconds: 3725,
+    running: false,
+  });
+
+  // 2. Refs
+  const column = (overrides: Partial<DataStructure>): DataStructure => ({
+    id: "cell",
+    name: "Cell",
+    type: "string",
+    ...overrides,
+  });
+
+  // 7. Return
+  return (
+    <ColumnTypeContext.Provider
+      value={{
+        canUpdate: true,
+        onButtonClick: () =>
+          new Promise((resolve) => setTimeout(resolve, 1500)),
+        onUpdateCell: async (_rowId, _columnId, value) => setTimer(value),
+      }}
+    >
+      <div className="max-w-sm space-y-6">
+        <ButtonCell
+          column={column({ type: "button", buttonLabel: "Generate document" })}
+          row={{ _id: "demo" }}
+        />
+        <ButtonCell
+          column={column({
+            type: "button",
+            buttonLabel: "Archive",
+            buttonColour: "red",
+            buttonConfirm: "Archive this item?",
+          })}
+          row={{ _id: "demo" }}
+        />
+        <TimeTrackingCell
+          column={column({ id: "timer", type: "timeTracking" })}
+          rowId="demo"
+          value={timer}
+        />
+        <RatingStars
+          id="stars"
+          value={score}
+          max={5}
+          size="form"
+          onChange={setScore}
+        />
+      </div>
+    </ColumnTypeContext.Provider>
+  );
+};

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

@@ -189,6 +189,12 @@ Custom layout via renderSettings:
 | `topN`             | `number`                                        | Keep the first N groups; the rest are added up as "Others" unless `showOthers` is `false` (averages never get "Others").                 |
 | `showPercent`      | `boolean`                                       | Show each group as a percentage of the total (count and sum, unsplit charts).                                                            |
 | `cumulative`       | `boolean`                                       | Running total over the date buckets.                                                                                                     |
+| `datesAcross`      | `boolean`                                       | Table grouped by a date interval: the dates become the columns (every bucket in the range, oldest first) and the `segmentBy` values the rows, with a Total column and a Total row for count and sum. With no `segmentBy`, one row named by its measure. |
+| `higherIsBetter`   | `boolean`                                       | Dates-across table: colours the Change column (last complete period vs the one before) green for good and red for bad. Unset leaves it grey. |
+| `highlights`       | `{ row, colour?, bold? }[]`                     | Table rows marked by label: tint (`red` `amber` `green` `blue` `purple`) and/or bold. Set by an editor from the highlight bar beside a row label (`onHighlightRow`). |
+| `valueDisplay`     | `"count" \| "percent" \| "both"`          | Dates-across table split by `segmentBy`: cells as counts, as each period's share of its total, or both. In `percent`, Change is in percentage points. |
+| `recordColumns` / `recordSort` / `recordPageSize` | `string[]` / `Sort` / `number` | What clicking a value opens: the columns in order, the sort and the rows per page. Unset follows the datasheet. ChartView's `renderDrillDown` lets an app render that view itself. |
+| `rangeOverride`    | `{ startDate?: string; endDate: string }`       | ISO range set by the page the chart sits on; replaces the chart's own range and hides its picker. No `startDate` counts all time, and date buckets then start at the first record's day. Not saved with the chart. |
 
 ##### WorkspaceDevSettings
 

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

@@ -744,13 +744,29 @@ A `type: "formula"` column is a monday.com-style formula. It is worked out from
 
 - **Syntax** follows [monday's formula column](https://support.monday.com/hc/en-us/articles/360001235445-The-Formula-Column): `{Column}` references a column (the builder shows names, the schema stores ids, so renaming a column never breaks a formula), text in quotes, `=` / `<>` compare, `&` joins text (below `+`/`-`, above comparisons, as in monday), `+ - * / ^ %` and `( )`.
 - **Functions** — monday's library, in `src/components/data/formula/functions.ts`: text (`CONCATENATE`, `LEFT`, `LEN`, `REPLACE`, `SEARCH`, `SUBSTITUTE`, `TEXT`, `TRIM` …), logical (`IF`, `SWITCH`, `AND`, `OR`, `XOR`, `NOT`, `EXACT`), numeric (`SUM`, `AVERAGE`, `ROUND`, `ROUNDUP`, `ROUNDDOWN`, `MOD`, `POWER` …), date (`TODAY`, `NOW`, `DAYS`, `WORKDAYS`, `ADD_DAYS`, `FORMAT_DATE`, `WEEKNUM` …) and `PI` / `TRUE` / `FALSE`. Text results are capped at 10,000 characters.
-- **Values:** an empty cell is blank text, 0 in arithmetic and equal to 0 in a comparison with a number. Reference and role columns read their label; a math column reads the number it shows. A formula can read another formula; a circular reference shows `Error`. Files, images, addresses, objects, passwords, signatures, canvas and gantt columns cannot be used.
+- **More functions:** `MID`, `FIND`, `VALUE`, `REGEXEXTRACT` (text), `ISBLANK`, `ISNUMBER` (logical), `INT` (numeric), `WEEKDAY`, `YEARFRAC` (date). `REGEXEXTRACT` returns the first match, or its first group; a pattern over 200 characters, one with a backreference or a nested quantifier such as `(a+)+`, and one that once ran longer than 50 ms are refused with an error instead of run.
+- **Values:** an empty cell is blank text, 0 in arithmetic and equal to 0 in a comparison with a number. Reference and role columns read their label; a math column reads the number it shows. A time tracking column reads in hours; a date range reads as `start - end`, and `{Timeline#Start}` / `{Timeline#End}` read one end as a date. A formula can read another formula; a circular reference shows `Error`. Files, images, addresses, objects, passwords, signatures, canvas and gantt columns cannot be used.
 - **Adding:** with `bareAddColumns`, pick **Formula** as the type in the header + panel. The builder lists columns and functions with an example of each, validates as you type and previews the first row.
 - **Sort and filter** use the computed value, as monday does: header / view settings sort, and the flex filters. Either makes the list read the matching rows — at most `FORMULA_VIEW_MAX_ROWS` (5,000), in a fixed order, with a notice when there are more — and filter, order and page them locally. The cap also applies to the calendar, map, timeline and legacy grouped views, which otherwise read every row. On Firebase and union lists formula columns are not offered for sorting or filtering. CSV export sends the rows a formula filter kept, by id; "Select all pages" is off in a formula view, and the selection callbacks' query does not carry formula conditions.
 - **Earlier library versions** have no case for `formula`, so they show its cell blank. Apps that build schemas with `parseSpaceToDataStructure` need this version to receive `formulaExpression`; a consumer with its own `DataType` list (blixify-space-next `models/Data.ts`) adds `"formula"` to it.
 
 ---
 
+### Button, time tracking, date range, rating and system columns
+
+Column types with monday.com counterparts. The value maths is in `src/components/data/columnTypes/`, as pure functions a server can import.
+
+| Column | Schema | Stored value | Where it shows |
+| --- | --- | --- | --- |
+| Button | `type: "button"`, `buttonLabel?`, `buttonColour?`, `buttonConfirm?` | nothing | table, list, kanban and read view; never in a form. A tap calls `organise.onButtonClick(columnId, row)` and the button stays busy until the returned promise settles, ignoring taps meanwhile. `buttonConfirm` asks first. Disabled without `onButtonClick` or update rights |
+| Time tracking | `type: "timeTracking"` | `{ totalSeconds, running, startedAt?, sessions? }` | table and read view show the total with start / stop, ticking each second inside the cell only; a form shows the total read-only. Start / stop 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; 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 |
+
+`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).
+
+---
+
 ### With activity log (comments + audit trail)
 
 Enable `edit.activityLog` to open the activity panel from list and read views, in a drawer on the right (a bottom sheet on phones). In the new table each record also gets a chat bubble beside its title, for anyone who can see the row. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
@@ -1112,10 +1128,16 @@ path should not render it.
 Which field types can be edited from the list table, and how. Types not listed under
 "Never rendered" appear as read-only cells when they are not editable.
 
-| Edited **in the cell**                                                                                                                                                                                                   | Edited **in a modal** (cell click opens it)                                                                                 | Read-only in list             | Never rendered as a list column |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------- |
-| `string`, `contact`, `email`, `textArea`, `number`, `boolean` (checkbox and radio commit on select), `date`, `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection` | `image`, `multipleImage`, `address`, `object`, `listObject`, `markdown`, `signature`, `file`, `multipleFile`, `listAddress` | `math` (computed), `formula` (computed), `password` | `canvas`, `ganttchart`          |
+| Edited **in the cell** | Edited **in a modal** (cell click opens it) | Read-only in list | Never rendered as a list column |
+| --- | --- | --- | --- |
+| `string`, `contact`, `email`, `textArea`, `number` (stars when `ratingMax` is set), `boolean` (checkbox and radio commit on select), `date`, `dateRange` (the range picker opens in the cell), `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection`, `timeTracking` (start / stop), `button` (click) | `image`, `multipleImage`, `address`, `object`, `markdown`, `signature`, `file`, `multipleFile` | `math` (computed), `formula` (computed), `password` | `listObject`, `listAddress`, `canvas`, `ganttchart` |
 
+- **What a modal cell shows:** one line — an image thumbnail, a file's name or
+  `N files`, the first words of a markdown body without its markup, a signature
+  thumbnail — or `Add` when empty, so no row grows taller than its neighbours.
+- **The `+` Add Column types** leave out `listAddress`, `canvas` and
+  `ganttchart` (and `listObject`, `object` and `math`): a column of them would
+  never be drawn in the table it was added from.
 - **Why some types edit in a modal:** their editor is bigger than one line. An
   `address` is a Places autocomplete plus a map with a draggable pin plus
   country/state/district fields; `image` / `multipleImage` are an upload area
@@ -1193,7 +1215,8 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `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. 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                                                                                                                                                                                                                                                                                    |
+| `groupBy`                     | `string`                                                                    | Column ID to group list results by. With `bareNewDTW` the groups are bands in one table. Grouped by a `list` or `boolean` column, every option (in option order, with its colour) plus "Unknown" (a value outside the options) and "No Value" (missing or blank) 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 (a `person` column's sections follow the member order), page mode groups the rows of the current page and scroll mode keeps the normal scroll; a section built from loaded rows draws 50 rows and a "Show more" at a time. A search, filter, sort or regroup starts every band over. Firebase and `bareListMobileView` keep the normal pagination. Saved views store and restore it                                                                                                                                                                                                                                                                                    |
+| `onButtonClick`               | `(columnId: string, row: any) => Promise<any> \| void`                     | Called when a `button` column is tapped, with the stored record. The button is busy until the promise settles. See Button, time tracking … columns |
 | `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                                                                                                                                                                                                                                                                                  |
@@ -1309,6 +1332,7 @@ Injects custom React components and callbacks into the list, read, and update vi
 | `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                                                                                     |
+| `bareSystemColumns`                      | `boolean`                                                                             | Offers Created At / By, Updated At / By, Record ID and Number in the column settings, sort, filters and saved views without declaring them. See Button, time tracking … columns |
 | `bareCalendarOnClickEvent`               | `(event: NewCalendarEvent, rawData?: any) => void`                                    | Replaces the calendar's open-in-read-view on tap when `bareNewDTW` is on; `rawData` is the tapped event's unformatted row. See Calendar view                                                                         |
 | `bareCalendarMapEvents`                  | `(events: NewCalendarEvent[]) => NewCalendarEvent[]`                                  | Reshapes the `bareNewDTW` calendar's events after each fetch — expand one row into several, or restyle; each event's row is in `meta.rawData`. See Calendar view                                                     |
 | `bareCalendarOnChangeRange`              | `(start: Date, end: Date, view) => void`                                              | Fired when the user pages the `bareNewDTW` calendar or switches its view, with the range now on screen. Never fires on render. See Calendar view                                                                     |

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

@@ -1160,7 +1160,7 @@ const GROUPBY_SCHEMA: DataStructure[] = [
 
 // 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".
+// and lands in the No Value section.
 const renderGroupByRecords = () => {
   const rows: any[] = [];
   const total = 2400;
@@ -1206,14 +1206,20 @@ const handleInstallGroupByMock = (store: any[]) => {
     }
   };
 
-  // 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
+  // INFO: applies every "=", "in" and "!in" condition — a band's own query
+  // and any filter the list carries — so a filter narrows each band's total.
+  // A null in a list matches a missing field too, as Mongo's $in does.
+  const handleIsIn = (list: any[], value: any) =>
+    list.some((each) =>
+      each === null ? value === null || value === undefined : each === value,
+    );
   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);
+      if (eachQuery.type === "in") return handleIsIn(eachQuery.value, value);
+      if (eachQuery.type === "!in") return !handleIsIn(eachQuery.value, value);
       return true;
     });
 
@@ -1337,7 +1343,7 @@ export const GroupByScrollPagination = () => (
     <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
+      first page holds only Alice, yet every owner, Unknown and 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,

package/package.json

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