blixify-ui-web-mcp 0.1.2 → 0.1.18

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

@@ -1,53 +1,119 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
-import { useState } from "react";
+import React, { useState } from "react";
 import { DataReference } from "../dataReference/index";
-import README from "./README.md";
+import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Data Reference" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Data Reference", () => {
-  const [value, setValue] = useState("");
+const devSettings = {
+  apiEndpoint: "http://localhost:3000/api",
+  apiEndpointType: "mondayServer" as const,
+};
+
+export const DataReferenceStory = () => {
+  const [singleValue, setSingleValue] = useState("");
+  const [filteredValue, setFilteredValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>([]);
 
   return (
-    <div className="p-4 rounded-md bg-zinc-800">
-      <DataReference
-        value={value}
-        subLabel="Testing sublabel"
-        schema={{
-          id: "salesSelected",
-          name: "Referral Sales Person",
-          type: "reference",
-          referenceSpaceId: "nonAuthSalesNameList",
-          referenceLabel: "name",
-          referenceQuery: [
-            {
-              type: "=",
-              value: "Sales",
-              queryId: "dup__of_role__1",
-            },
-          ],
-          referenceSort: { sortId: "name", type: "asc" },
-        }}
-        devSettings={{
-          apiEndpoint: `http://localhost:3000/api`,
-          apiEndpointType: "mondayServer",
-        }}
-        lib={{
-          axios: axios,
-        }}
-        onChange={(value) => {
-          setValue(value);
-        }}
-        darkMode
-        staticDropdown
-      />
-    </div>
+    <>
+      <StorySection
+        title="Single Reference"
+        description="type='reference' renders a single-select. Options are fetched from the referenceSpaceId collection and labelled by referenceLabel."
+      >
+        <div className="w-80">
+          <DataReference
+            value={singleValue}
+            schema={{
+              id: "salesSelected",
+              name: "Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setSingleValue(value)}
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Query Filter & Sort"
+        description="referenceQuery filters the fetched options server-side. referenceSort controls the order. subLabel adds a secondary hint below the field label."
+      >
+        <div className="w-80">
+          <DataReference
+            value={filteredValue}
+            schema={{
+              id: "filteredSales",
+              name: "Referral Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+              referenceQuery: [
+                { type: "=", value: "Sales", queryId: "dup__of_role__1" },
+              ],
+              referenceSort: { sortId: "name", type: "asc" },
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setFilteredValue(value)}
+            subLabel="Only Sales role members are shown"
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Multi-select (listReference)"
+        description="type='listReference' enables multi-select — value is a string array. closeOnClickOutside keeps the dropdown open until the user clicks away."
+      >
+        <div className="w-80">
+          <DataReference
+            value={multiValue}
+            schema={{
+              id: "assignees",
+              name: "Assignees",
+              type: "listReference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setMultiValue(value)}
+            closeOnClickOutside
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true for use on dark backgrounds."
+        dark
+      >
+        <div className="w-80">
+          <DataReference
+            value={singleValue}
+            schema={{
+              id: "darkSales",
+              name: "Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setSingleValue(value)}
+            darkMode
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+    </>
   );
-});
+}

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

@@ -683,57 +683,58 @@ const devSettings = parseWorkspaceSettings(
 
 ### Organise
 
-| Name                          | Type                                                                        | Description                                                                                  |
-| ----------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `sort`                        | `Sort`                                                                      | Default sort applied to list queries                                                         |
-| `pageIndex`                   | `number`                                                                    | Initial page index                                                                           |
-| `viewId`                      | `string`                                                                    | Active view type: `"general"`, `"calendar"`, `"grid"`, `"list"`, `"feeds"`, `"kanban"`, etc. |
-| `idField`                     | `string`                                                                    | DataStructure column ID whose value becomes the new record's ID on creation                  |
-| `extendedTabs`                | `ExtendedTabs[]`                                                            | Additional tabs rendered alongside the main view — see Extended Tab below                    |
-| `additionalQuery`             | `AdditionalQuery[]`                                                         | Filter/search controls rendered above the list — see Additional Query below                  |
-| `darkMode`                    | `boolean`                                                                   | Applies dark colour scheme to the organise bar                                               |
-| `hideSearch`                  | `boolean`                                                                   | Hides the search input                                                                       |
-| `hidePagination`              | `boolean`                                                                   | Hides pagination on Table, List, Grid, and Feeds views                                       |
-| `hideNewTabs`                 | `boolean`                                                                   | Hides the new-tab creation button                                                            |
-| `splitView`                   | `boolean`                                                                   | Renders a split list/detail layout in read mode                                              |
-| `listObjectTableView`         | `boolean`                                                                   | Shows list objects in table view during read and update                                      |
-| `disableMulti`                | `boolean`                                                                   | Disables multi-row selection                                                                 |
-| `disableSelectFullData`       | `{ table?: boolean; list?: boolean }`                                       | Disables "select all pages" for table and/or list views                                      |
-| `disabledOnEnter`             | `boolean`                                                                   | Prevents Enter key from submitting forms                                                     |
-| `breadcrumbType`              | `"button" \| "hidden"`                                                      | `"button"` shows a back button; `"hidden"` hides the breadcrumb entirely                     |
-| `breadcrumbAttributeId`       | `string`                                                                    | Column ID whose value is used as the breadcrumb label in read view                           |
-| `tabAlign`                    | `"top" \| "left" \| "stepper"`                                              | Tab layout direction                                                                         |
-| `groupRead`                   | `"groupId"`                                                                 | Groups and separates read view sections by DataStructure `groupId`                           |
-| `showCollapsibleTab`          | `boolean`                                                                   | Renders tabs as collapsible sections                                                         |
-| `showBaseUpdatedAt`           | `boolean`                                                                   | Shows the `baseUpdatedAt` timestamp in Table, Grid, List, and Kanban views                   |
-| `showGroupByFeature`          | `boolean`                                                                   | Shows the group-by selector in the toolbar                                                   |
-| `showReadFloatingNav`         | `boolean`                                                                   | Shows a floating section navigator in read view                                              |
-| `showExport`                  | `boolean`                                                                   | Shows import/export options (default `true`)                                                 |
-| `disableEllipsisOnLongWord`   | `boolean`                                                                   | Wraps long text instead of truncating with ellipsis                                          |
-| `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                                               |
-| `advSortEnabled`              | `boolean`                                                                   | Shows advanced sort controls                                                                 |
-| `advFilterEnabled`            | `boolean`                                                                   | Shows advanced filter controls                                                               |
-| `advDragEnabled`              | `boolean`                                                                   | Enables drag-to-reorder columns                                                              |
-| `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                                                         |
-| `unionCollections`            | `any[]`                                                                     | Additional collections to union-query alongside the main collection                          |
-| `moreSettings`                | `{ text: string; onClick: () => void }[]`                                   | Extra items appended to the "more" dropdown menu                                             |
-| `exportSettings`              | `ExportSettings`                                                            | See Export Settings below                                                                    |
-| `onChangeSort`                | `(value: Sort) => void`                                                     | Called when the user changes the sort                                                        |
-| `onChangeFilter`              | `(value: AdditionalQuery[]) => void`                                        | Called when the user changes filters                                                         |
-| `onChangeHide`                | `(value: DataStructure[]) => void`                                          | Called when the user hides/shows columns                                                     |
-| `onChangeDrag`                | `(dragId: string, dropId: string, newHeader: TableHeader[]) => void`        | Called after a column is reordered                                                           |
-| `onChangeTabs`                | `(value: ExtendedTabs[]) => void`                                           | Called when tabs are added/removed/reordered                                                 |
-| `onChangePagination`          | `(page: number) => void`                                                    | Called when the page changes                                                                 |
-| `onAddColumns`                | `(model: DataStructure[]) => void`                                          | Called when a new column is added                                                            |
-| `handleNavigate`              | `(type: string, selectedId?: string, viewId?: string) => void`              | Called when the component needs to navigate (e.g. row click → read view)                     |
-| `handleCustomDownloadFile`    | `(url: string, fileName?: string) => void`                                  | Overrides the default file download behaviour                                                |
-| `renderReferenceLabelOptions` | `(spaceId?: string, includeReference?: boolean, type?: string) => Option[]` | Returns column options for reference label selectors                                         |
-| `renderReferenceSpaceOptions` | `() => Option[]`                                                            | Returns space options for reference space selectors                                          |
-| `renderGroupByOptions`        | `() => Option[]`                                                            | Returns custom options for the group-by selector                                             |
+| Name                          | Type                                                                        | Description                                                                                                                                                                                                                                                                                                           |
+| ----------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sort`                        | `Sort`                                                                      | Default sort applied to list queries                                                                                                                                                                                                                                                                                  |
+| `pageIndex`                   | `number`                                                                    | Initial page index                                                                                                                                                                                                                                                                                                    |
+| `viewId`                      | `string`                                                                    | Active view type: `"general"`, `"calendar"`, `"grid"`, `"list"`, `"feeds"`, `"kanban"`, etc.                                                                                                                                                                                                                          |
+| `idField`                     | `string`                                                                    | DataStructure column ID whose value becomes the new record's ID on creation                                                                                                                                                                                                                                           |
+| `extendedTabs`                | `ExtendedTabs[]`                                                            | Additional tabs rendered alongside the main view — see Extended Tab below                                                                                                                                                                                                                                             |
+| `additionalQuery`             | `AdditionalQuery[]`                                                         | Filter/search controls rendered above the list — see Additional Query below                                                                                                                                                                                                                                           |
+| `darkMode`                    | `boolean`                                                                   | Applies dark colour scheme to the organise bar                                                                                                                                                                                                                                                                        |
+| `hideSearch`                  | `boolean`                                                                   | Hides the search input                                                                                                                                                                                                                                                                                                |
+| `hidePagination`              | `boolean`                                                                   | Hides pagination on Table, List, Grid, and Feeds views                                                                                                                                                                                                                                                                |
+| `hideNewTabs`                 | `boolean`                                                                   | Hides the new-tab creation button                                                                                                                                                                                                                                                                                     |
+| `splitView`                   | `boolean`                                                                   | Renders a split list/detail layout in read mode                                                                                                                                                                                                                                                                       |
+| `listObjectTableView`         | `boolean`                                                                   | Shows list objects in table view during read and update                                                                                                                                                                                                                                                               |
+| `disableMulti`                | `boolean`                                                                   | Disables multi-row selection                                                                                                                                                                                                                                                                                          |
+| `disableSelectFullData`       | `{ table?: boolean; list?: boolean }`                                       | Disables "select all pages" for table and/or list views                                                                                                                                                                                                                                                               |
+| `disabledOnEnter`             | `boolean`                                                                   | Prevents Enter key from submitting forms                                                                                                                                                                                                                                                                              |
+| `breadcrumbType`              | `"button" \| "hidden"`                                                      | `"button"` shows a back button; `"hidden"` hides the breadcrumb entirely                                                                                                                                                                                                                                              |
+| `breadcrumbAttributeId`       | `string`                                                                    | Column ID whose value is used as the breadcrumb label in read view                                                                                                                                                                                                                                                    |
+| `tabAlign`                    | `"top" \| "left" \| "stepper"`                                              | Tab layout direction                                                                                                                                                                                                                                                                                                  |
+| `groupRead`                   | `"groupId"`                                                                 | Groups and separates read view sections by DataStructure `groupId`                                                                                                                                                                                                                                                    |
+| `showCollapsibleTab`          | `boolean`                                                                   | Renders tabs as collapsible sections                                                                                                                                                                                                                                                                                  |
+| `showBaseUpdatedAt`           | `boolean`                                                                   | Shows the `baseUpdatedAt` timestamp in Table, Grid, List, and Kanban views                                                                                                                                                                                                                                            |
+| `showGroupByFeature`          | `boolean`                                                                   | Shows the group-by selector in the toolbar                                                                                                                                                                                                                                                                            |
+| `showReadFloatingNav`         | `boolean`                                                                   | Shows a floating section navigator in read view                                                                                                                                                                                                                                                                       |
+| `showExport`                  | `boolean`                                                                   | Shows import/export options (default `true`)                                                                                                                                                                                                                                                                          |
+| `disableEllipsisOnLongWord`   | `boolean`                                                                   | Wraps long text instead of truncating with ellipsis                                                                                                                                                                                                                                                                   |
+| `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                                                                                                                                                                                                                                                                        |
+| `advSortEnabled`              | `boolean`                                                                   | Shows advanced sort controls                                                                                                                                                                                                                                                                                          |
+| `advFilterEnabled`            | `boolean`                                                                   | Shows advanced filter controls                                                                                                                                                                                                                                                                                        |
+| `advDragEnabled`              | `boolean`                                                                   | Enables drag-to-reorder columns                                                                                                                                                                                                                                                                                       |
+| `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                                                                                                                                                                                                                                                                                  |
+| `unionCollections`            | `any[]`                                                                     | Additional collections to union-query alongside the main collection                                                                                                                                                                                                                                                   |
+| `moreSettings`                | `{ text: string; onClick: () => void }[]`                                   | Extra items appended to the "more" dropdown menu                                                                                                                                                                                                                                                                      |
+| `exportSettings`              | `ExportSettings`                                                            | See Export Settings below                                                                                                                                                                                                                                                                                             |
+| `onChangeSort`                | `(value: Sort) => void`                                                     | Called when the user changes the sort                                                                                                                                                                                                                                                                                 |
+| `onChangeFilter`              | `(value: AdditionalQuery[]) => void`                                        | Called when the user changes filters                                                                                                                                                                                                                                                                                  |
+| `onChangeHide`                | `(value: DataStructure[]) => void`                                          | Called when the user hides/shows columns                                                                                                                                                                                                                                                                              |
+| `onChangeDrag`                | `(dragId: string, dropId: string, newHeader: TableHeader[]) => void`        | Called after a column is reordered                                                                                                                                                                                                                                                                                    |
+| `onChangeTabs`                | `(value: ExtendedTabs[]) => void`                                           | Called when tabs are added/removed/reordered                                                                                                                                                                                                                                                                          |
+| `onChangePagination`          | `(page: number) => void`                                                    | Called when the page changes                                                                                                                                                                                                                                                                                          |
+| `customPaginationCount`       | `(pageDataCount: number) => void`                                           | Called after each data fetch with the actual record count. Use this to override the count shown in the pagination bar — store the value in your own state and pass it back via `customPaginationSize` on `Table`, `Grid`, `List`, or `Pagination` if needed, or use it to display a custom count elsewhere in your UI |
+| `onAddColumns`                | `(model: DataStructure[]) => void`                                          | Called when a new column is added                                                                                                                                                                                                                                                                                     |
+| `handleNavigate`              | `(type: string, selectedId?: string, viewId?: string) => void`              | Called when the component needs to navigate (e.g. row click → read view)                                                                                                                                                                                                                                              |
+| `handleCustomDownloadFile`    | `(url: string, fileName?: string) => void`                                  | Overrides the default file download behaviour                                                                                                                                                                                                                                                                         |
+| `renderReferenceLabelOptions` | `(spaceId?: string, includeReference?: boolean, type?: string) => Option[]` | Returns column options for reference label selectors                                                                                                                                                                                                                                                                  |
+| `renderReferenceSpaceOptions` | `() => Option[]`                                                            | Returns space options for reference space selectors                                                                                                                                                                                                                                                                   |
+| `renderGroupByOptions`        | `() => Option[]`                                                            | Returns custom options for the group-by selector                                                                                                                                                                                                                                                                      |
 
 ### Export Settings
 
@@ -863,16 +864,42 @@ Injects custom React components and callbacks into the list, read, and update vi
 
 ### Calendar Settings
 
-| Name               | Type                 | Description                                                      |
-| ------------------ | -------------------- | ---------------------------------------------------------------- |
-| `title`            | `string`             | Column ID for event title                                        |
-| `startDate`        | `string`             | Column ID for event start date                                   |
-| `endDate`          | `string`             | Column ID for event end date                                     |
-| `defaultStartDate` | `Date`               | Default calendar start date                                      |
-| `customView`       | `CalendarCustomView` | Custom calendar view config                                      |
-| `groupId`          | `string`             | Column ID — events with the same value share a background colour |
-| `groupColor`       | `Color[]`            | Background colours for groups                                    |
-| `customHeader`     | `string`             | Custom title replacing the default calendar header               |
+| Name               | Type                       | Description                                                                                               |
+| ------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `title`            | `string`                   | Column ID for event title                                                                                 |
+| `startDate`        | `string`                   | Column ID for event start date                                                                            |
+| `endDate`          | `string`                   | Column ID for event end date                                                                              |
+| `defaultStartDate` | `Date`                     | Default calendar start date                                                                               |
+| `customView`       | `CalendarCustomView`       | Custom calendar view config                                                                               |
+| `groupId`          | `string`                   | Column ID — events with the same value share a background colour                                          |
+| `groupColor`       | `Color[]`                  | Background colours for groups                                                                             |
+| `customHeader`     | `string`                   | Custom title replacing the default calendar header                                                        |
+| `eventColorRules`  | `CalendarEventColorRule[]` | Maps a field+value on each event to an explicit color. Takes priority over `groupId` coloring. See below. |
+
+### CalendarEventColorRule
+
+| Name         | Type     | Required | Description                                                          |
+| ------------ | -------- | -------- | -------------------------------------------------------------------- |
+| `field`      | `string` | yes      | Column ID on the event data to match against (e.g. `"status"`)       |
+| `value`      | `any`    | yes      | The value to match (e.g. `"Approved"`)                               |
+| `color`      | `string` | yes      | Tailwind bg class for the event pill, e.g. `"bg-green-500"`          |
+| `hoverColor` | `string` | no       | Tailwind hover class for the event pill, e.g. `"hover:bg-green-700"` |
+| `textColor`  | `string` | no       | Tailwind text class for the event pill, e.g. `"text-white"`          |
+
+Example — color events by status:
+
+```tsx
+calendarSettings: {
+  title: "name",
+  startDate: "startAt",
+  endDate: "endAt",
+  eventColorRules: [
+    { field: "status", value: "Approved", color: "bg-green-500", hoverColor: "hover:bg-green-700", textColor: "text-white" },
+    { field: "status", value: "Pending",  color: "bg-yellow-400", hoverColor: "hover:bg-yellow-600", textColor: "text-white" },
+    { field: "status", value: "Rejected", color: "bg-red-500",   hoverColor: "hover:bg-red-700",   textColor: "text-white" },
+  ],
+}
+```
 
 ### Feeds Settings
 

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

@@ -1,5 +1,4 @@
 import { Menu, Transition } from "@headlessui/react";
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import Papa from "papaparse";
 import React, { useEffect, useState } from "react";
@@ -11,20 +10,15 @@ import { blixifyDevCollection, blixifyDevWorkspace } from "../testData";
 import { parseSpaceToDataStructure, parseWorkspaceSettings } from "../utils";
 import { DataTemplateProps } from "./dataStateModel";
 import { DataStructure } from "./model";
-import README from "./README.md";
 import SampleModule from "./SampleModule";
 import { AdditionalQuery, ExtendedTabs, Space } from "./spaceModel";
 import { Workspace } from "./workspaceModel";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Data Module" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Data Module", () => {
+export const DataModule = () => {
   const [selectedSpace, setSelectedSpace] = useState<Space | null>(null);
   const [selectedWorkspace, setSelectedWorkspace] =
     useState<Workspace | null>(null);
@@ -193,4 +187,4 @@ stories.add("Data Module", () => {
       )}
     </Container>
   );
-});
+}

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

@@ -1,6 +1,5 @@
 import { Menu, Transition } from "@headlessui/react";
 import { TagIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import Papa from "papaparse";
 import React, { useEffect, useRef, useState } from "react";
@@ -24,19 +23,14 @@ import {
 import { blixifyDevCollection, blixifyDevWorkspace } from "../testData";
 import { parseSpaceToDataStructure, parseWorkspaceSettings } from "../utils";
 import { DataStructure } from "./model";
-import README from "./README.md";
 import { AdditionalQuery, ExtendedTabs, Space } from "./spaceModel";
 import { Workspace } from "./workspaceModel";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Data Template" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Data Template", () => {
+export const DataTemplateStory = () => {
   const [selectedSpace, setSelectedSpace] = useState<Space | null>(null);
   const [allWorkspaceSpace, setAllWorkspaceSpace] = useState<Space[]>([]);
   const [selectedWorkspace, setSelectedWorkspace] =
@@ -334,4 +328,4 @@ stories.add("Data Template", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -397,7 +397,8 @@ bareSettings={{
           <span className="text-sm text-gray-500">{item.status}</span>
         </li>
       ))}
-    </ul>
+    </ul>,
+    viewSettings={{ listImage: "image" }} // Pass in image column ID (or just "image") for bareListComponent to replace the ddefault UI
   ),
 
   // Always-on filter applied to every list fetch (e.g. scope to current user)
@@ -630,7 +631,7 @@ async function prefetchReferenceOptions() {
   await db.put(
     "references",
     siteRecords.map((r) => ({ key: r._id, label: r.name })),
-    "sites-ref"
+    "sites-ref",
   );
   await db.put(
     "references",
@@ -639,7 +640,7 @@ async function prefetchReferenceOptions() {
       label: r.name,
       secondaryLabel: r.email,
     })),
-    "users-ref"
+    "users-ref",
   );
 }
 
@@ -1023,49 +1024,50 @@ A shorthand that builds the `extendedTabs` and `viewId` config for you. Only one
 
 ### Bare Settings
 
-| Name                                     | Type                                                                                  | Description                                                |
-| ---------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| `bareReadComponent`                      | `(data: any) => ReactElement`                                                         | Custom component rendered in read view                     |
-| `bareReadComponentPos`                   | `"top"`                                                                               | Renders `bareReadComponent` above the default read content |
-| `bareReadComponentHide`                  | `boolean`                                                                             | Hides the default read content                             |
-| `bareReadDescription`                    | `(key, value) => any`                                                                 | Custom renderer for read view field values                 |
-| `bareReadReferenceView`                  | `(dataId, collectionId, attributeId) => boolean \| void`                              | Controls whether a reference field opens a view            |
-| `bareReadHandleData`                     | `(data: any) => void`                                                                 | Called when read view data is loaded                       |
-| `bareReadListTabs`                       | `boolean`                                                                             | Shows list-style tabs in read view                         |
-| `bareListComponent`                      | `(data, prettierData, loading, pageIndex) => ReactElement`                            | Fully replaces the list UI                                 |
-| `bareListActionBtns`                     | `(data: any) => ReactElement[]`                                                       | Extra icon buttons on each list row                        |
-| `bareListMultipleSelectAddtionalActions` | `{ text: string; className?: string; onClick: (ids, selectAll, query) => void }[]`    | Extra bulk-action buttons when rows are selected           |
-| `bareListGridComponent`                  | `(data: any) => ReactElement`                                                         | Custom card renderer for grid view                         |
-| `bareListGridColClassName`               | `string`                                                                              | Tailwind class for grid column width                       |
-| `bareListGridTags`                       | `(data: any) => string[]`                                                             | Tag strings shown on grid cards                            |
-| `bareListGridRibbonText`                 | `(data: any) => string`                                                               | Ribbon text on grid cards                                  |
-| `bareListGridFallbackImg`                | `(data: any) => string \| ReactElement`                                               | Fallback image for grid cards                              |
-| `bareListHandleData`                     | `(data, prettierData) => void`                                                        | Called when list data is loaded                            |
-| `bareListHandleFilter`                   | `(search, select, date, reference) => void`                                           | Called when any filter changes                             |
-| `bareListHandleSelection`                | `(selectAll, selectedIds, query?) => void`                                            | Called when row selection changes                          |
-| `bareListDescription`                    | `(key, value) => any`                                                                 | Custom renderer for list view field values                 |
-| `bareListFilterQuery`                    | `Query[]`                                                                             | Additional queries always applied to list fetches          |
-| `bareListFilterAddComponent`             | `ReactElement[]`                                                                      | Extra filter components in the filter bar                  |
-| `bareListPipeline`                       | `PipeLine[]`                                                                          | Additional MongoDB aggregation pipeline stages             |
-| `bareListFilterSelected`                 | `(filterSearchParams, filterSelection, filterReference, filterReferenceDate) => void` | Called with the current filter state on every change       |
-| `bareUpdatePrefill`                      | `(data: any) => { key: string; value: any }[]`                                        | Returns prefill values for the update form                 |
-| `bareUpdateComponent`                    | `(data: any) => ReactElement`                                                         | Custom component rendered inside the update form           |
-| `bareUpdateComponentAbove`               | `boolean`                                                                             | Renders `bareUpdateComponent` above the form fields        |
-| `bareUpdateActionComponent`              | `(data: any) => ReactElement`                                                         | Custom action buttons in the form footer                   |
-| `bareUpdateColumnType`                   | `"one" \| "two" \| "four"`                                                            | Form column layout                                         |
-| `bareUpdateMobileView`                   | `boolean`                                                                             | Mobile-optimised form layout                               |
-| `bareUpdateActionBottom`                 | `boolean`                                                                             | Moves action buttons to the bottom of the form             |
-| `bareUpdateHandleData`                   | `(data, changedAttributeIds?) => void`                                                | Called on every form field change                          |
-| `bareUpdateHandlePreComplete`            | `(data: any) => Promise<boolean>`                                                     | Called before save — return `false` to cancel              |
-| `bareUpdateHandleComplete`               | `(data: any) => void`                                                                 | Called after save completes                                |
-| `bareUpdateHandlePostComplete`           | `(data: any) => void`                                                                 | Called after post-save operations complete                 |
-| `bareUpdateTabId`                        | `(tabId: string) => void`                                                             | Called when the active form tab changes                    |
-| `bareUpdateTabComponent`                 | `(tabIds: string[]) => { tabId: string; icon?: ReactElement; skip?: boolean }[]`      | Customise tab icons or skip specific tabs in the form      |
-| `bareUpdateIndividualComponent`          | `(columnId, ref, selectedData, setSelectedData) => ReactElement \| null`              | Replaces a specific form field with a custom component     |
-| `bareReferenceDel`                       | `{ collectionId, collectionName, columnId, schema }[]`                                | Blocks deletion when the record is referenced elsewhere    |
-| `bareOffline`                            | `boolean`                                                                             | Enables offline data caching                               |
-| `bareCSVImportEndpoint`                  | `string`                                                                              | Custom CSV import endpoint                                 |
-| `bareCSVExportEndpoint`                  | `string`                                                                              | Custom CSV export endpoint                                 |
+| Name                                     | Type                                                                                  | Description                                                                                     |
+| ---------------------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `bareReadComponent`                      | `(data: any) => ReactElement`                                                         | Custom component rendered in read view                                                          |
+| `bareReadComponentPos`                   | `"top"`                                                                               | Renders `bareReadComponent` above the default read content                                      |
+| `bareReadComponentHide`                  | `boolean`                                                                             | Hides the default read content                                                                  |
+| `bareReadDescription`                    | `(key, value) => any`                                                                 | Custom renderer for read view field values                                                      |
+| `bareReadReferenceView`                  | `(dataId, collectionId, attributeId) => boolean \| void`                              | Controls whether a reference field opens a view                                                 |
+| `bareReadHandleData`                     | `(data: any) => void`                                                                 | Called when read view data is loaded                                                            |
+| `bareReadListTabs`                       | `boolean`                                                                             | Shows list-style tabs in read view                                                              |
+| `bareListComponent`                      | `(data, prettierData, loading, pageIndex) => ReactElement`                            | Fully replaces the list UI                                                                      |
+| `bareListActionBtns`                     | `(data: any) => ReactElement[]`                                                       | Extra icon buttons on each list row                                                             |
+| `bareListMultipleSelectAddtionalActions` | `{ text: string; className?: string; onClick: (ids, selectAll, query) => void }[]`    | Extra bulk-action buttons when rows are selected                                                |
+| `bareListGridComponent`                  | `(data: any) => ReactElement`                                                         | Custom card renderer for grid view                                                              |
+| `bareListGridColClassName`               | `string`                                                                              | Tailwind class for grid column width                                                            |
+| `bareListGridTags`                       | `(data: any) => string[]`                                                             | Tag strings shown on grid cards                                                                 |
+| `bareListGridRibbonText`                 | `(data: any) => string`                                                               | Ribbon text on grid cards                                                                       |
+| `bareListGridFallbackImg`                | `(data: any) => string \| ReactElement`                                               | Fallback image for grid cards                                                                   |
+| `bareListHandleData`                     | `(data, prettierData) => void`                                                        | Called when list data is loaded                                                                 |
+| `bareListHandleFilter`                   | `(search, select, date, reference) => void`                                           | Called when any filter changes                                                                  |
+| `bareListHandleSelection`                | `(selectAll, selectedIds, query?) => void`                                            | Called when row selection changes                                                               |
+| `bareListDescription`                    | `(key, value) => any`                                                                 | Custom renderer for list view field values                                                      |
+| `bareListFilterQuery`                    | `Query[]`                                                                             | Additional queries always applied to list fetches                                               |
+| `bareListFilterAddComponent`             | `ReactElement[]`                                                                      | Extra filter components in the filter bar                                                       |
+| `bareListFilterAsPopup`                  | `boolean`                                                                             | Collapses all `additionalQuery` filters into a funnel icon popup instead of showing them inline |
+| `bareListPipeline`                       | `PipeLine[]`                                                                          | Additional MongoDB aggregation pipeline stages                                                  |
+| `bareListFilterSelected`                 | `(filterSearchParams, filterSelection, filterReference, filterReferenceDate) => void` | Called with the current filter state on every change                                            |
+| `bareUpdatePrefill`                      | `(data: any) => { key: string; value: any }[]`                                        | Returns prefill values for the update form                                                      |
+| `bareUpdateComponent`                    | `(data: any) => ReactElement`                                                         | Custom component rendered inside the update form                                                |
+| `bareUpdateComponentAbove`               | `boolean`                                                                             | Renders `bareUpdateComponent` above the form fields                                             |
+| `bareUpdateActionComponent`              | `(data: any) => ReactElement`                                                         | Custom action buttons in the form footer                                                        |
+| `bareUpdateColumnType`                   | `"one" \| "two" \| "four"`                                                            | Form column layout                                                                              |
+| `bareUpdateMobileView`                   | `boolean`                                                                             | Mobile-optimised form layout                                                                    |
+| `bareUpdateActionBottom`                 | `boolean`                                                                             | Moves action buttons to the bottom of the form                                                  |
+| `bareUpdateHandleData`                   | `(data, changedAttributeIds?) => void`                                                | Called on every form field change                                                               |
+| `bareUpdateHandlePreComplete`            | `(data: any) => Promise<boolean>`                                                     | Called before save — return `false` to cancel                                                   |
+| `bareUpdateHandleComplete`               | `(data: any) => void`                                                                 | Called after save completes                                                                     |
+| `bareUpdateHandlePostComplete`           | `(data: any) => void`                                                                 | Called after post-save operations complete                                                      |
+| `bareUpdateTabId`                        | `(tabId: string) => void`                                                             | Called when the active form tab changes                                                         |
+| `bareUpdateTabComponent`                 | `(tabIds: string[]) => { tabId: string; icon?: ReactElement; skip?: boolean }[]`      | Customise tab icons or skip specific tabs in the form                                           |
+| `bareUpdateIndividualComponent`          | `(columnId, ref, selectedData, setSelectedData) => ReactElement \| null`              | Replaces a specific form field with a custom component                                          |
+| `bareReferenceDel`                       | `{ collectionId, collectionName, columnId, schema }[]`                                | Blocks deletion when the record is referenced elsewhere                                         |
+| `bareOffline`                            | `boolean`                                                                             | Enables offline data caching                                                                    |
+| `bareCSVImportEndpoint`                  | `string`                                                                              | Custom CSV import endpoint                                                                      |
+| `bareCSVExportEndpoint`                  | `string`                                                                              | Custom CSV export endpoint                                                                      |
 
 ---