blixify-ui-web-mcp 0.1.71 → 0.1.75

package/lib/components/chart/barChart/README.md

@@ -103,6 +103,7 @@ Custom styled with annotation labels:
 | `stackedVertical`  | `boolean`                                   | `false`     | Stack series on top of each other (requires `stackedBarSeries`) |
 | `distributed`      | `boolean`                                   | `false`     | Give each bar in a single series a distinct colour              |
 | `showDataLabel`    | `boolean`                                   | `true`      | Show value labels on bars                                       |
+| `dataLabelPosition` | `"inside" \| "outside"`              | —           | Where each bar's value is printed: inside the bar, or outside past its end (above an upright bar, beside a horizontal one) in dark text. Unset, it is outside on a chart with `benchmarkLines` and inside otherwise. A stacked chart always keeps its values inside |
 | `showToolbar`      | `boolean`                                   | `false`     | Show the ApexCharts toolbar                                     |
 | `borderColor`      | `string`                                    | `"#e7e7e7"` | Grid line colour. Pass `""` to remove grid lines                |
 | `newTabUrl`        | `string`                                    | `""`        | Makes the chart title a link that opens in a new tab            |
@@ -119,6 +120,7 @@ Custom styled with annotation labels:
 | `roundedBars`      | `boolean`         | `false` | Apply rounded corners to bar tops                            |
 | `disableZoom`      | `boolean`         | `false` | Disable zoom interaction                                     |
 | `disableTooltip`   | `boolean`         | `false` | Disable hover tooltips                                       |
+| `benchmarkLines`   | `{ value, label?, color? }[]` | — | Dashed benchmark lines across the chart, each with its label (or its value, for one without a label) and colour (default purple); hovering a label shows both. Placed like monday.com: just above the line at its left end on an upright bar, and along the top just right of the line on a horizontal one (left of it at the right edge). Close labels move apart, and none covers a bar value: with benchmark lines the bars show their values past their ends. Past 3 rows, a horizontal label shows as "…". The value axis grows to show a benchmark above every bar |
 | `customAnimation`  | `AnimationConfig` | —       | Override default animation settings                          |
 | `xAxisLabels`      | `AxisLabelConfig` | —       | Customise X-axis label rotation, style, and formatter        |
 | `yAxisLabels`      | `AxisLabelConfig` | —       | Customise Y-axis label rotation, style, and formatter        |

package/lib/components/chart/barChart/barChart.stories.tsx

@@ -8,13 +8,20 @@ import { StorySection } from "../../storyUtils";
 const meta = { title: "Chart/Bar Chart" };
 export default meta;
 
-
 const stackedSeries = [
   { name: "Company A", data: [400, 430, 448] },
   { name: "Company B", data: [430, 460, 478] },
   { name: "Company C", data: [448, 470, 490] },
 ];
 
+const benchmarkLines = [
+  { value: 15, label: "April SF Target", color: "#8B5CF6" },
+  { value: 30, label: "May SF Target", color: "#8B5CF6" },
+  { value: 45, label: "June SF Target", color: "#8B5CF6" },
+  { value: 3, label: "April LF Target", color: "#EF4444" },
+  { value: 6, label: "June LF Target", color: "#EF4444" },
+];
+
 const rawData = [
   { label: "Apple", value: 10, daysAgo: 7 },
   { label: "Mango", value: 20, daysAgo: 7 },
@@ -50,7 +57,7 @@ export const BarChart = () => {
         .map((d) => ({ x: d.label, y: d.value }));
       setSeriesData(points);
     },
-    [chartDummyData]
+    [chartDummyData],
   );
 
   useEffect(() => {
@@ -95,6 +102,82 @@ export const BarChart = () => {
         />
       </StorySection>
 
+      <StorySection
+        title="Values Outside The Bars"
+        description={
+          <>
+            <code>dataLabelPosition="outside"</code> prints each bar's value
+            past its end: above an upright bar, beside a horizontal one. Charts
+            with <code>benchmarkLines</code> do this on their own.
+          </>
+        }
+      >
+        <BarChartImpl
+          title="Videos Done by Tier"
+          seriesName="Videos"
+          orientation="col"
+          distributed
+          dataLabelPosition="outside"
+          categories={["Tier 3", "Tier 2", "Tier 1"]}
+          seriesData={[
+            { x: "Tier 3", y: 8 },
+            { x: "Tier 2", y: 12 },
+            { x: "Tier 1", y: 33 },
+          ]}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Benchmark Lines"
+        description={
+          <>
+            <code>benchmarkLines</code> draws a dashed line across the chart at
+            each goal, with its label, in its <code>color</code>. The value axis
+            grows to show a goal above every bar, and a horizontal bar draws its
+            goals upright.
+          </>
+        }
+      >
+        <BarChartImpl
+          title="Videos Done by Type"
+          seriesName="Videos"
+          orientation="col"
+          distributed
+          categories={[
+            "Poster (Static)",
+            "Photo",
+            "Video (Long)",
+            "Video (short)",
+          ]}
+          seriesData={[
+            { x: "Poster (Static)", y: 3 },
+            { x: "Photo", y: 4 },
+            { x: "Video (Long)", y: 17 },
+            { x: "Video (short)", y: 57 },
+          ]}
+          benchmarkLines={benchmarkLines}
+        />
+        <div className="mt-6">
+          <BarChartImpl
+            title="Videos Done by Type (horizontal, close goals stack)"
+            seriesName="Videos"
+            orientation="row"
+            categories={["Poster (Static)", "Photo", "Video (Long)"]}
+            seriesData={[
+              { x: "Poster (Static)", y: 3 },
+              { x: "Photo", y: 4 },
+              { x: "Video (Long)", y: 17 },
+            ]}
+            benchmarkLines={[
+              { value: 30, label: "May SF Target", color: "#8B5CF6" },
+              { value: 4, label: "April LF Target", color: "#EF4444" },
+              { value: 5, label: "May LF Target", color: "#EF4444" },
+              { value: 6, label: "June LF Target", color: "#10B981" },
+            ]}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Stacked Vertical Bar Chart"
         description={
@@ -309,4 +392,4 @@ export const BarChart = () => {
       </StorySection>
     </div>
   );
-}
+};

package/lib/components/chart/pieChart/README.md

@@ -83,8 +83,10 @@ Chart only (no header or date range):
 | `type`        | `"pie" \| "donut"`                       | `"donut"`   | Chart type                                                    |
 | `valueType`   | `"percent" \| "value"`                   | `"percent"` | Whether labels and data labels show percentages or raw values |
 | `roundValue`  | `boolean`                                | `false`     | Round displayed values to whole numbers                       |
-| `legendPos`   | `"top" \| "bottom" \| "right" \| "left"` | `"top"`     | Position of the legend                                        |
+| `legendPos`   | `"top" \| "bottom" \| "right" \| "left"` | `"top"`     | Position of the legend. Left and Right move below, centred, while the chart is narrower than 360px (`PIE_SIDE_LEGEND_MIN_WIDTH`), and return beside it from 384px |
 | `legendAlign` | `"right" \| "left" \| "center"`          | `"right"`   | Horizontal alignment of the legend                            |
+| `showTotal`   | `boolean`                                | `false`     | Show the sum of the series in the centre of a donut. Ignored for `type="pie"`. Selecting a slice shows its name and value there instead |
+| `showDataLabel` | `boolean`                              | `true`      | Draw each slice's value on the pie. The legend and tooltip still show it when `false` |
 | `newTabUrl`   | `string`                                 | `""`        | Makes the chart title a link that opens in a new tab          |
 
 > Note: Legend labels are truncated to 10 characters. The full label is shown in the tooltip on hover.

package/lib/components/chart/pieChart/pieChart.stories.tsx

@@ -137,9 +137,25 @@ export const PieChart = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Total And Slice Values"
+        description='showTotal=true puts the sum in the centre of a donut, its "Total" caption smaller and lighter than the number. showDataLabel=false hides the value on each slice; the legend and tooltip still show it.'
+      >
+        <div className="w-full">
+          <PieChartImpl
+            title="Orders By Channel"
+            series={series}
+            labels={labels}
+            showTotal
+            showDataLabel={false}
+            roundValue={true}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Dark Mode"
-        description="Pass darkMode=true and optionally darkModeBg to customise the background."
+        description="Pass darkMode=true and optionally darkModeBg to customise the background. The total in the centre turns white, with a lighter grey caption."
         dark
       >
         <div className="w-full">
@@ -150,6 +166,7 @@ export const PieChart = () => {
             tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
             darkMode={true}
             darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+            showTotal
             roundValue={true}
           />
         </div>

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

@@ -177,6 +177,9 @@ Custom layout via renderSettings:
 | `cardIcon`         | `string`                                        | Heroicon name (solid) for the card icon, e.g. `"UserIcon"`. Defaults to `FolderIcon`.                                                     |
 | `cardSize`         | `"default" \| "compact"`                        | `card` layout; `"compact"` is the short stat-first card. Defaults to `"default"`.                                                       |
 | `pieType`          | `"donut" \| "pie"`                               | `pie` style. Defaults to `"donut"`.                                                                                                       |
+| `legendPosition`   | `"top" \| "bottom" \| "left" \| "right"`        | `pie` legend placement. Defaults to `"top"`.                                                                                              |
+| `showDataLabel`    | `boolean`                                       | `pie` only: `false` hides the value on each slice; the legend and tooltip still show it. Defaults to shown.                                |
+| `showTotal`        | `boolean`                                       | `pie` donut only: the total in the centre. Ignored for averages. Defaults to hidden.                                                       |
 | `cardEmoji`        | `string`                                        | Emoji shown instead of `cardIcon` when set, e.g. `"📦"`. Clearing it brings `cardIcon` back.                                              |
 | `cardIconBgColor`  | `string`                                        | Tailwind bg class for the card icon background                                                                                            |
 | `colors`           | `string[]`                                      | Custom color array for chart segments/bars/lines                                                                                          |
@@ -187,15 +190,29 @@ Custom layout via renderSettings:
 | `segmentBy`        | `string`                                        | Second column split into stacked series (bar, line, table), at most 10 values plus "Others".                                             |
 | `sortBy`           | `"value" \| "label"`                             | Sort the groups. `sortDirection` is `"asc"` or `"desc"` (default).                                                                       |
 | `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).                                                            |
+| `showPercent`      | `boolean`                                       | Show each group as a percentage of the total (count and sum, unsplit charts). Ignored for `pie`, which already draws slices as shares.     |
 | `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. |
+| `benchmarks`          | `{ label?, value, colour? }[]`                  | `bar` only: goals drawn as dashed lines across the chart, each with its label. `colour` is `purple` (default) `red` `amber` `green` `blue`, the same five as `highlights`, each with a lighter shade ready for dark mode (`handleChartBenchmarkLines(chart, darkMode)`); DataGraph's cards are light today, so it uses the light one. Picked from a row of swatches in the builder's Benchmark lines section. |
+| `valuePosition`    | `"inside" \| "outside" \| "hidden"`        | `bar` only: where the values are printed, or `"hidden"` for none. Unset is inside; with `benchmarks` it is outside, and inside counts as outside. A chart split by a column (`segmentBy`) has no benchmark lines and keeps its values inside or hidden. Set in the builder's Values position dropdown. |
 | `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. |
 
+##### Chart builder sections
+
+ChartView's Edit Chart form groups these settings into collapsible sections, like monday.com's Widget settings. A header opens or closes its section, and a closed one keeps its fields in the form and shows a one-line summary.
+
+| Section         | Opens by default | Fields                                                                                                                   | Summary when closed                  |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ |
+| Chart           | Yes              | Datasheet, Title, type, Emoji (card), Orientation / Style, Width                                                         | The chart type                       |
+| Data            | Only when a setting is missing | Measure, Of column, Group By, Date Range On / Over Time, Interval, Split By                                | e.g. "Sum of Amount by Status", or what's missing in red, such as "Pick a column to sum" |
+| Customize       | No               | Values position, Legend, Show values / Show total, Sort / Show, Show as %, Multicolour bars, the table options, Running total. Hidden when the chart has none of these, such as a card | —                                    |
+| Benchmark lines | No               | `bar` only: the goal lines. A chart split by a column says why it has none                                               | e.g. "2 lines", "None"               |
+| Records list    | No               | Columns, Sort by, Order, Rows per page                                                                                   | e.g. "20 rows per page, sorted by Amount" |
+
 ##### WorkspaceDevSettings
 
 | Name               | Type                                                                       | Description                     |

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

@@ -750,6 +750,8 @@ A `type: "formula"` column is a monday.com-style formula. It is worked out from
 - **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.
+- **On a server**, wrap evaluation in `handleWithFormulaTimezone(timezone, () => …)` so `TODAY()`, `NOW()` and stored dates are read on the reader's calendar rather than the server's (UTC). Inside it, a `Date` or zoned text (`…Z`, `…+08:00`) becomes that timezone's wall-clock time; text without a zone is read as written. An invalid or missing timezone changes nothing, and the browser needs no wrapper.
+- **Charts** offer formula columns to group by (bar, pie, table) and to sum or average (`handleGetMeasureOptions`). Their values are never stored, so the server answering the chart works them out per row; Space does this.
 - **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.
 
 ---
@@ -809,6 +811,70 @@ edit={{
 }}
 ```
 
+#### Attachments and reactions on comments
+
+Both are off until configured, and an app that sets neither behaves as before.
+
+**Attachments.** Pass `edit.activityLog.attachments` and the composer gets a paperclip (a hidden file input) and a chip per picked file. A comment may be only files. Up to 5 files of 20 MB each (`maxFiles`, `maxBytes`), photos, video, audio and PDFs.
+
+```tsx
+edit={{
+  activityLog: {
+    enableComments: true,
+    commentCollectionId: "tasks-comments",
+    currentUserId: currentUser.id,
+    attachments: {
+      // Called when the comment is sent, once per file, in order.
+      upload: async (file, { commentId, collectionId, itemId }) => {
+        const path = await storeFile(file, `${commentId}/${file.name}`);
+        return { name: file.name, type: file.type, size: file.size, path };
+      },
+      // After a failed send, an edit that drops a file, and a deleted comment. Errors are ignored.
+      remove: async (attachment) => deleteFile(attachment.path),
+      // The link the browser loads; defaults to `path`.
+      getUrl: (attachment) => `/files/${attachment.path}`,
+    },
+  },
+}}
+```
+
+Files are uploaded **when the comment is sent**, not when they are picked. If an upload fails nothing is saved, the files already uploaded are removed with `remove`, and the draft and chips stay for another try. If the comment itself cannot be saved the uploaded files are removed too. The comment keeps `attachments: [{ name, type, size?, path, width?, height? }]`, replaced as a whole on an edit.
+
+In the feed nothing is fetched up front. Images are `loading="lazy"` (give `width` and `height` to keep their place while loading), a video is a card until it is played, audio uses `preload="none"`, and PDFs and other files are a link. A picture the browser cannot draw (a HEIC photo outside Safari) falls back to the file card. The library does not resize or convert images.
+
+**Reactions.** Set `enableReactions`, `reactionCollectionId` and `currentUserId`. Each comment gets a Like button (the first of `reactionEmojis`, default 👍), a chip per other emoji with its count (hold one to see who), and an add-reaction popover with quick emoji and a lazily loaded emoji-mart picker.
+
+```tsx
+activityLog: {
+  enableReactions: true,
+  reactionCollectionId: "tasks-reactions",
+  reactionEmojis: ["👍", "❤️", "😂", "🎉"], // optional; the first is the Like
+}
+```
+
+**Who reacted.** Holding any reaction (about half a second; right-click or the keyboard's context-menu key also work) opens a small panel against it, in the style of a log row's details: a "Reactions" title over a divider, then each emoji with the names of the people who chose it under it. The emoji held comes first. A plain click still adds or takes back your own reaction, and the click that ends a hold does neither.
+
+Reactions are not part of the comment. The collection holds one document per comment, person and emoji, with the id `<commentId>:<userId>:<emoji code points in hex joined by ->` (`handleReactionId`), shaped `{ _id | id, commentId, emoji, userId, collectionId, itemId, createdAt }`. A reaction is a **create** and taking it back is a **delete** of that one id, so a repeat cannot duplicate and nobody's click overwrites another's. The panel reads the reactions of the comments on screen with one list (`collectionId` = and `commentId` in), and reacting never changes the comment (no "Edited"). The backend should set `userId` from the signed-in user, accept only the matching id, and delete a comment's reactions when the comment goes; the panel's `userId` is only a request.
+
+#### Replies and who may edit
+
+**Replies.** Set `enableReplies` and each comment gets a Reply button. Choosing it shows "Replying to <name> <first line>" above the box (with a cancel), and the reply is saved as a comment of its own with `replyTo: { commentId }` on the record of the comment it answers. A reply to a reply quotes that reply, so there is no nesting: the feed stays flat and paged.
+
+In the feed a reply shows a quote over its text: the author's name and **one line** of the original (its first line, cut with an ellipsis; "📷 Photo", "🎥 Video" and so on when the original has only files), never the whole comment. Clicking it scrolls to the original and highlights it when it is on the page. The feed is paged, so an original on another page opens in a window with its full text. The quoted comments of a page are read in one list (`collectionId` = and the id `in`), and one that is gone shows "Original comment was deleted". `replyTo` is set when the reply is made and never changed by an edit.
+
+```tsx
+activityLog: {
+  enableReplies: true,
+  // After a reply is saved, for the author of the comment answered (not for a reply to your own comment).
+  // It works like onMention: a failure keeps the comment and offers "Retry notifications", and without it the panel says notifications are not connected.
+  onReply: async (event) => sendReplyNotification(event),
+}
+```
+
+`ActivityReplyEvent` is exported from `data/dataTemplate/dataStateModel`: `commentId`, `commentCollectionId`, `collectionId`, `itemId`, `comment`, `userId`, `replyToCommentId` and `replyToUserId`. The backend should check the original exists on the same datasheet and record, as it does for reactions.
+
+**Who may edit.** With `currentUserId` given, Edit shows only on a comment you wrote, and Delete on yours and, when `canModerate` is set, on everyone's. A comment with no author is open to everyone, and so is every comment when `currentUserId` is not given. An edit never sends `userId`, so editing a comment without an author does not make the editor its author. These only decide what is offered: the backend has to refuse the rest.
+
 `ActivityMentionEvent` is exported from `data/dataTemplate/dataStateModel`. It contains `commentId`, `commentCollectionId`, `collectionId`, `itemId`, `comment`, `userId`, and `mentionedUserIds`. A failed callback displays a retry action that repeats only notification delivery, never the comment write. The handler must be idempotent per comment ID and recipient, validate recipients' access server-side, and use trusted server-side identity. UI props and mention IDs are not an authorization boundary. Existing backend access controls continue to govern comment creation, editing, and deletion.
 
 The panel keeps DataTemplateWrapper for fetching and paging, and uses the shared WriteQuery transport for composer mutations, forwarding configured API and user tokens. Custom comment-collection schemas must accept the added mention fields. No notification endpoint is assumed by the library.
@@ -921,7 +987,7 @@ Enable `organise.exportSettings.enableExportReadPDF` to add a PDF export button
       hideExportPDF: false, // hide list-view PDF export (not read-view)
       hideExportPrint: false, // hide Print option
       hideExportQR: false, // hide Export QR option
-      hideExportDraft: false, // hide Filter Draft option
+      hideExportDraft: false, // hide Filter Draft option, shown only with edit.enableUpdateDraft
       hideSubItems: false, // hide nested rows in exports
     },
   }}
@@ -1187,6 +1253,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `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                                                                                                                                                                                                                                                                                                |
+| `hideSearchLabel` | `boolean` | Hides the "Search" label above the search field, keeping its placeholder, so the list header is shorter |
 | `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                                                                                                                                                                                                                                                                       |
@@ -1210,14 +1277,14 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `addColumnEnabled`            | `boolean`                                                                   | Shows an add-column button in the table header                                                                                                                                                                                                                                                                        |
 | `persistViewState`            | `"persistent" \| "session"`                                                 | Remembers the list's sort, filters, hidden columns, page, rows per page, search and reading position per collection, so a Back navigation lands where the user left. `"persistent"` uses `localStorage`; `"session"` writes `sessionStorage` and reads it first, falling back to `localStorage`. The reading position is restored on mount and on returning from a record, not on a tab switch; with several lists on one page, only the list a record was last opened from restores (tracked in `blixify-dtw-persist-last-drill`). Covers table, list, grid, kanban and feeds; not map. List view only                                        |
 | `persistKey`                  | `string`                                                                    | Keeps a separate saved view state for this instance: the storage key becomes `blixify-dtw-persist-<collectionId>-<persistKey>`. Saved state is read once, on mount, so give the component a React `key` that changes with `persistKey`                                                                               |
-| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page, grouping, columns and column widths under a name, reapply it, update it or delete it. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState`, and applying a view calls `onChangeSort`, `onChangeGroupBy`, `onChangePagination(0)` and `bareListHandleFilter` when those change. Each write re-reads storage first, so views saved in another browser tab are kept. With `onChangeHide` / `onChangeDrag`, a view's hides and column order stay on screen only: a toggle or reorder after applying one writes back the schema's columns plus that single change |
+| `savedViews`                  | `boolean`                                                                   | Shows a row of view tags under the tab bar: save the current filters, flex filters, sort, rows per page, grouping, columns and column widths under a name, reapply it, update, rename or delete it. Past eight views the rest fold behind “+N more”; the open view always shows. Views belong to the tab they were saved on and are kept in `localStorage` under `blixify-dtw-views-<collectionId>[-<persistKey>][-<currentUser.userEmail>]`. Sort is held by the template while it is on, as with `persistViewState`, and applying a view calls `onChangeSort`, `onChangeGroupBy`, `onChangePagination(0)` and `bareListHandleFilter` when those change. Each write re-reads storage first, so views saved in another browser tab are kept. With `onChangeHide` / `onChangeDrag`, a view's hides and column order stay on screen only: a toggle or reorder after applying one writes back the schema's columns plus that single change |
 | `defaultSavedViews`           | `DefaultSavedView[]`                                                        | Views provided by the app (`{ id?, name, tabId?, state }`), listed before the user's own and never deleted. Without `tabId` a view is listed on every tab. A field left out of `state` is reset to its default when the view is applied. `id` must be unique; without one the view gets `default-<index>`, its position in the whole array |
 | `sharedViews`                 | `SharedSavedView[]`                                                         | Views the app stores for everyone (`{ id, name, tabId, state }`), e.g. on the record the list belongs to. Given, it replaces this browser's storage: the list shows only these, saving goes to `onChangeSharedViews`, and nothing is read from or written to `localStorage` |
 | `onChangeSharedViews`         | `(views: SharedSavedView[]) => void`                                        | Called with the whole list after a view is saved, updated or deleted, for the app to store and pass back as `sharedViews`; a second change before it comes back builds on the list just sent. The whole list is replaced each time, so two editors saving at once is last-writer-wins. Without it the app's views are read-only and “+ Save view” is hidden |
 | `defaultSavedViewId`          | `string`                                                                    | The view everyone opens on, marked ★, stored by the app. The list opens on it when no `initialSavedViewId` is given — also when it arrives after mount — unless `persistViewState` restored a state or a view was already picked. A view that no longer exists leaves the list on All. Opening on it does not call `onChangeSort` |
 | `onChangeDefaultSavedViewId`  | `(id: string \| null) => void`                                              | Gives each view a ☆ that makes it the default; the ★ on the default takes it off (`null`, the list opens on All). Deleting the default view also sends `null` |
 | `initialSavedViewId`          | `string`                                                                    | A view the list opens on, once, in place of the ★ default — e.g. a page embedding a datasheet opens it on a chosen view. A view that no longer exists, or is on another tab, leaves the list on All. Opening on it does not call `onChangeSort` |
-| `groupBy`                     | `string`                                                                    | Column ID to group list results by. 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                                                                                                                                                                                                                                                                                    |
+| `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, one band at a time, and a band not read yet shows the grouped count's total (a band it counts empty stays hidden until its own read), 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 |
 | `onTimeTrackingAction`        | `(columnId: string, row: any, action: "start" \| "stop") => Promise<any>` | Starts or stops a `timeTracking` timer on the host's server, with the stored record. Resolve with the value the server stored; the timer shows it, and goes back to where it was if the promise rejects. Without it a timer works its value out on the device and saves it through the single-field update |
 | `allView`                     | `PersistedViewState`                                                        | All's settings as the app stores them for everyone (`{}` when none are saved yet): sort, grouping, filters, hidden columns, column order, column widths (`columnWidths`, `"180px"` by column id) and rows per page. A setting left out falls back to the model and the props. Needs `savedViews`. Given, the list opens on it, and every change a person makes to All or a saved view is kept in their browser (`blixify-dtw-draft-<collectionId>[-<persistKey>][-<currentUser.userEmail>]-<all \| view id>`) until they choose Update or Reset; a saved view with no width of its own for a column follows All's |
@@ -1264,7 +1331,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `hideExportPDF`           | `boolean`              | Hides the Export PDF option                                                      |
 | `hideExportPrint`         | `boolean`              | Hides the Print option                                                           |
 | `hideExportQR`            | `boolean`              | Hides the Export QR option                                                       |
-| `hideExportDraft`         | `boolean`              | Hides the Filter Draft option                                                    |
+| `hideExportDraft`         | `boolean`              | Hides the Filter Draft option, which shows only with `edit.enableUpdateDraft`    |
 | `enableExportReadPDF`     | `boolean`              | Enables PDF export from read view                                                |
 | `exportReadPDFHeader`     | `PDFHeaderConfig`      | Header config for read-view PDF export — see PDFHeaderConfig below               |
 | `exportReadPDFDimensions` | `PDFDimensionsConfig`  | Page/capture dimensions for read-view PDF export — see PDFDimensionsConfig below |
@@ -1359,6 +1426,7 @@ Injects custom React components and callbacks into the list, read, and update vi
 | `bareCSVImportEndpoint`                  | `string`                                                                              | Custom CSV import endpoint                                                                                                                                                                                           |
 | `bareCSVExportEndpoint`                  | `string`                                                                              | Custom CSV export endpoint                                                                                                                                                                                           |
 | `bareHideTableExtraMultipleAction`       | `boolean`                                                                             | Hides the extra multiple-action button in table view                                                                                                                                                                 |
+| `bareListMobileToolbar` | `boolean` | On a phone, moves refresh and view settings into the floating search bar and keeps the title on one line. Needs `bareListMobileFloatingSearch` |
 
 ### Extended Tab
 

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

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import { createPortal } from "react-dom";
 import MockAdapter from "axios-mock-adapter";
 import { ActivityModal } from "./activityModal";
 import { DataStructure, DevSettings } from "./model";
 import { DataTemplateWrapper } from "../dataWrapper";
 import { ActivityLog } from "./dataStateModel";
 import { Modal } from "../../display/modal";
+import { Drawer } from "../../display/drawer";
 import { handleApplyStoryQueries } from "../dataWrapper/storyBackend.fixtures";
 
 const meta = { title: "Data/Activity Panel" };
@@ -59,11 +61,16 @@ const ActivityDemo = ({
   logsOnly = false,
   integrated = false,
   inModal = false,
+  inDrawer = false,
+  extras = false,
 }: {
   darkMode?: boolean;
   logsOnly?: boolean;
   integrated?: boolean;
   inModal?: boolean;
+  inDrawer?: boolean;
+  // INFO: switches on file attachments and emoji reactions
+  extras?: boolean;
 }) => {
   const [ready, setReady] = useState(false);
   const [failPings, setFailPings] = useState(false);
@@ -72,6 +79,7 @@ const ActivityDemo = ({
   const [selectedId, setSelectedId] = useState("");
   useEffect(() => {
     const rows: Record<string, any[]> = {
+      "tasks-reactions": [],
       tasks: [
         {
           _id: "task-1",
@@ -223,6 +231,28 @@ const ActivityDemo = ({
     enableLogs: true,
     logsCollectionId: "tasks-logs",
     currentUserId: "alex",
+    ...(extras
+      ? {
+          // INFO: the demo keeps a picked file as a browser link; an app
+          // stores it and answers where it lives
+          attachments: {
+            upload: async (file: File) => ({
+              name: file.name,
+              type: file.type,
+              size: file.size,
+              path: URL.createObjectURL(file),
+            }),
+          },
+          enableReactions: true,
+          reactionCollectionId: "tasks-reactions",
+          enableReplies: true,
+          onReply: async (event: { replyToUserId: string | null }) => {
+            if (failPings) throw new Error("Demo notification failure");
+            setRecipients(event.replyToUserId ?? "");
+          },
+          canModerate: true,
+        }
+      : {}),
     onMention: async (event) => {
       if (failPings) throw new Error("Demo notification failure");
       setRecipients(event.mentionedUserIds.join(", "));
@@ -313,6 +343,26 @@ const ActivityDemo = ({
             onClose={() => {}}
             renderContent={renderPanel}
           />
+        ) : inDrawer ? (
+          // INFO: mirrors how DTW mounts the panel in Space: the library Drawer, portalled to the
+          // body inside a z-50 wrapper. Its frame clips, its content scrolls and its panel is
+          // translated, so a pop-up drawn inside the comment row is cut off by it
+          createPortal(
+            <div className="relative z-50">
+              <Drawer
+                darkMode={darkMode}
+                testId="story-activity-drawer"
+                open
+                onClose={() => {}}
+                anchor="responsive"
+                maxWidth="2xl"
+                maxHeight="75"
+                title="Activity Log"
+                content={renderPanel()}
+              />
+            </div>,
+            document.body,
+          )
         ) : (
           renderPanel()
         ))}
@@ -325,3 +375,5 @@ export const DarkMode = () => <ActivityDemo darkMode />;
 export const LogsOnly = () => <ActivityDemo logsOnly />;
 export const WithDataTemplateWrapper = () => <ActivityDemo integrated />;
 export const InModal = () => <ActivityDemo inModal />;
+export const WithAttachmentsAndReactions = () => <ActivityDemo extras />;
+export const ReactionsInDrawer = () => <ActivityDemo extras inDrawer />;