blixify-ui-web-mcp 0.1.71 → 0.1.72

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

@@ -809,6 +809,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 +985,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 +1251,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                                                                                                                                                                                                                                                                       |
@@ -1264,7 +1329,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 +1424,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 />;

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

@@ -287,9 +287,40 @@ bareSettings={{
 | Less Than 2 | `crew.1` does not exist |
 | Between 2 and 5 | `crew.1` exists, `crew.5` does not |
 
-Two conditions on one list may each be met by a different row. Referenced records and listObjects are not offered on Firebase or `unionCollections` lists.
+Two conditions on one list may each be met by a different row.
 
-The standalone `FlexFilter` takes both as `extras={{ references, listObjects: true }}`; pass the same object to `renderFlexFilterConditions` when building the query.
+**Filtering on related rows and their count**
+
+`bareFlexFilterRelated` names other collections whose rows point to these rows, such as a referrer's referrals. Each entry has a `name`, its `collection`, the column there that points here (`foreignField`), the column here it matches (`localField`: `_id` for a reference column, or a contact column), and its `structure`. The key becomes part of the lookup alias, so it may hold only letters, digits, `_` and `-`. The lookup names a variable after `localField`, so it may hold only letters, digits and `_`. An entry that breaks either rule is left out of the filter.
+
+The filters then offer `<Name> › <Field>` and `<Name> › Count`. The count is the number of that collection's rows pointing to the record that match the conditions on its fields. Field conditions with no count condition ask for at least one such row.
+
+```tsx
+bareSettings={{
+  bareFlexFilters: true,
+  bareFlexFilterRelated: {
+    referrals: {
+      name: "Referrals",
+      collection: "referrals",
+      localField: "phone",
+      foreignField: "referrerPhone",
+      structure: ReferralSchema,
+    },
+  },
+}}
+
+// "Referrals › Referral Date between 1 and 31 Oct" with "Referrals › Count
+// Greater Than 3" is sent as one condition on the row count:
+// { type: ">", queryId: "rel_referrals_count", value: 3,
+//   related: { collection: "referrals", localField: "phone", foreignField: "referrerPhone",
+//              alias: "rel_referrals", query: [{ type: "><", queryId: "referralDate", value: [...] }] } }
+```
+
+`ReadQuery` sends a `related` condition as a `pipeline` lookup with `referenceShowCount`, which MongoWrapper joins and counts before its `$match`, and leaves `rel_<key>_count` out of the rows it returns. The match is exact, so a contact column only matches a phone number stored in the same format. The lookup runs for every row the list's own read scope allows, before its other conditions, so index `foreignField` on a large collection: without it each row scans the whole related collection.
+
+Referenced records, listObjects and related rows are not offered on Firebase or `unionCollections` lists.
+
+The standalone `FlexFilter` takes all three as `extras={{ references, listObjects: true, related }}`; pass the same object to `renderFlexFilterConditions` when building the query.
 
 **8. newTabUrl (Optional)**
 
@@ -1226,13 +1257,24 @@ needs to know about the other.
   (`handleFormSubmit`, `handleUpdateSelectedData`, `handleDeleteModal`, `handleExportReadPDF`)
   target the panel instance. `handleRefresh()` refreshes both.
 
+### Adding a row in scroll mode
+
+With `organise.paginationType: "scroll"` and `edit.listAddable`, an Add button holds the bottom of the screen instead of an empty row after the last record. It opens the new row at the top of the table.
+
+### bareSettings.bareFormDrawer
+
+Create and edit open in the same panel over the list, so the list keeps its scroll, page
+and filters, and reloads when the panel closes. Off by default. Placement comes from
+`viewSettings.readDrawer` when set; on phones the sheet takes 90% of the height. A click
+outside or Escape closes the form, and asks first once something has been edited.
+
 ### viewSettings.readDrawer
 
 | Name            | Type                                                                 | Default        | Description                                                                         |
 | --------------- | -------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------- |
 | `anchor`        | `"bottom" \| "right" \| "responsive"`                                | `"responsive"` | `responsive` = right panel above the `sm` breakpoint (640px), bottom sheet below it |
 | `maxWidth`      | `"lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"` | `"3xl"`        | Panel width for the right anchor                                                    |
-| `maxHeight`     | `"50" \| "75" \| "100"`                                              | `"75"`         | Sheet height for the bottom anchor                                                  |
+| `maxHeight`     | `"50" \| "75" \| "90" \| "100"`                                            | `"75"`         | Sheet height for the bottom anchor                                                  |
 | `title`         | `string`                                                             | `title` prop   | Panel header title                                                                  |
 | `desc`          | `string`                                                             | —              | Panel header description                                                            |
 | `disableExpand` | `boolean`                                                            | `false`        | Hides the panel's expand-to-page button, leaving the peek as the only read surface  |

package/lib/components/data/flexFilter/flexFilterRelated.stories.tsx

@@ -0,0 +1,182 @@
+import { Transition } from "@headlessui/react";
+import axios from "axios";
+import React, { useState } from "react";
+import { StorySection } from "../../storyUtils";
+import { Loading } from "../../display/loading";
+import { DataStructure, DevSettings } from "../dataTemplate/model";
+import { DataTemplateWrapper } from "../dataWrapper";
+import {
+  STORY_API_ENDPOINT,
+  STORY_NAMES,
+  storyWorkspace,
+  useStoryBackend,
+} from "../dataWrapper/storyBackend.fixtures";
+import {
+  FlexFilter,
+  FlexFilterRelatedSet,
+  renderFlexFilterConditions,
+} from ".";
+import { FlexFilterData } from "./model";
+
+const meta = { title: "Data/Flex Filter/Related Rows" };
+export default meta;
+
+const USER_COLLECTION = "demo-rel-users";
+const REFERRAL_COLLECTION = "demo-rel-referrals";
+const REFERRAL_STATUSES = ["New", "Quoted", "Installed"];
+
+const userSchema: DataStructure[] = [
+  { id: "name", name: "Name", type: "string" },
+  { id: "phone", name: "Phone", type: "contact" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: ["Active", "Inactive"],
+  },
+];
+
+const referralSchema: DataStructure[] = [
+  { id: "referredName", name: "Referred Name", type: "string" },
+  { id: "referrerPhone", name: "Referrer Phone", type: "contact" },
+  { id: "referralDate", name: "Referral Date", type: "date" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: REFERRAL_STATUSES,
+  },
+];
+
+const related: FlexFilterRelatedSet = {
+  referrals: {
+    name: "Referrals",
+    collection: REFERRAL_COLLECTION,
+    localField: "phone",
+    foreignField: "referrerPhone",
+    structure: referralSchema,
+  },
+};
+
+// INFO: this month's dates, and last month's, so a date filter splits them
+const handleThisMonth = (day: number) => {
+  const date = new Date();
+  date.setDate(Math.min(day, 28));
+  date.setHours(10, 0, 0, 0);
+  return date.toISOString();
+};
+const handleLastMonth = (day: number) => {
+  const date = new Date();
+  date.setDate(1);
+  date.setMonth(date.getMonth() - 1);
+  date.setDate(Math.min(day, 28));
+  date.setHours(10, 0, 0, 0);
+  return date.toISOString();
+};
+
+const users = STORY_NAMES.slice(0, 8).map((name, index) => ({
+  _id: `user-${index + 1}`,
+  name,
+  phone: `6012${String(1000000 + index)}`,
+  status: index % 4 === 3 ? "Inactive" : "Active",
+}));
+
+// INFO: user n has n referrals this month and (7 - n) last month, so "more
+// than 3 this month" and "more than 3 in total" pick different people
+const referrals = users.flatMap((eachUser, index) => [
+  ...Array.from({ length: index }, (_, row) => ({
+    _id: `ref-${index}-now-${row}`,
+    referredName: STORY_NAMES[(index + row + 3) % STORY_NAMES.length],
+    referrerPhone: eachUser.phone,
+    referralDate: handleThisMonth(row + 2),
+    status: REFERRAL_STATUSES[row % REFERRAL_STATUSES.length],
+  })),
+  ...Array.from({ length: 7 - index }, (_, row) => ({
+    _id: `ref-${index}-last-${row}`,
+    referredName: STORY_NAMES[(index + row + 7) % STORY_NAMES.length],
+    referrerPhone: eachUser.phone,
+    referralDate: handleLastMonth(row + 2),
+    status: REFERRAL_STATUSES[(row + 1) % REFERRAL_STATUSES.length],
+  })),
+]);
+
+const extras = { related };
+
+const devSettings: DevSettings = {
+  server: "mongoServer",
+  dbEndpoint: STORY_API_ENDPOINT,
+  imageEndpoint: "",
+  uploadEndpoint: "",
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: "",
+  bucketName: "",
+  organisationMembers: [],
+};
+
+export const RelatedRows = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [USER_COLLECTION]: users,
+      [REFERRAL_COLLECTION]: referrals,
+    },
+  });
+  const [filters, setFilters] = useState<FlexFilterData[]>([
+    { id: "init", columnId: "", operator: "=", value: undefined },
+  ]);
+  const query = renderFlexFilterConditions(filters, userSchema, extras);
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="flex flex-col space-y-12">
+      <StorySection
+        title="Referrers filtered on their referrals"
+        description="User 1 has no referrals this month and user 8 has seven; last month it is the other way round. Try Referrals › Referral Date between the 1st and the end of this month, with Referrals › Count Greater Than 3."
+      >
+        <DataTemplateWrapper
+          title="Referrers"
+          type="list"
+          collectionId={USER_COLLECTION}
+          schema={userSchema}
+          workspace={storyWorkspace()}
+          limit={20}
+          organise={{ breadcrumbType: "hidden" }}
+          bareSettings={{
+            bareNewDTW: true,
+            bareFlexFilters: true,
+            bareFlexFilterRelated: related,
+          }}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Standalone filter (notification audience)"
+        description="The same related datasheet on the bare FlexFilter, with the query it builds."
+      >
+        <div className="flex flex-col">
+          <div className="max-w-[700px]">
+            <FlexFilter
+              structure={userSchema}
+              extras={extras}
+              filters={filters}
+              onChange={setFilters}
+              devSettings={devSettings}
+              dbModule={axios}
+              variant="bare"
+              lib={{ Transition }}
+            />
+          </div>
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({query.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(query, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+    </div>
+  );
+};

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

@@ -103,5 +103,5 @@ Two behaviours differ in controlled mode:
 | `desc`      | `string`                                                             | -       | The description text displayed below the title                                                                                     |
 | `anchor`    | `"bottom" \| "right" \| "responsive"`                                | `right` | `responsive` uses a right panel above the `sm` breakpoint (640px) and a bottom sheet below it, where a right panel covers almost the whole viewport |
 | `maxWidth`  | `"lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"` | `lg`    | Maximum width of the drawer (right anchor only)                                                                                    |
-| `maxHeight` | `"50" \| "75" \| "100"`                                              | `100`   | Height of the drawer as a viewport height percentage (bottom anchor only)                                                           |
+| `maxHeight` | `"50" \| "75" \| "90" \| "100"`                                              | `100`   | Height of the drawer as a viewport height percentage (bottom anchor only)                                                           |
 | `expandable` | `boolean`                                                           | -       | Shows a maximize toggle in the header that grows the panel to the full viewport (width on the right anchor, height on the bottom sheet) and back. Expansion resets when the drawer closes |

package/lib/components/input/textInput/README.md

@@ -50,34 +50,34 @@ const ref = useRef(null);
 
 ### Optional props
 
-| Name                    | Type               | Default    | Description                                                                  |
-| ----------------------- | ------------------ | ---------- | ---------------------------------------------------------------------------- |
-| `id`                    | `string`           | —          | HTML id attribute                                                            |
-| `subLabel`              | `string`           | —          | Secondary label shown below the main label                                   |
+| Name                    | Type               | Default    | Description                                                                                                                                                                                                                                                                                                              |
+| ----------------------- | ------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                    | `string`           | —          | HTML id attribute                                                                                                                                                                                                                                                                                                        |
+| `subLabel`              | `string`           | —          | Secondary label shown below the main label                                                                                                                                                                                                                                                                               |
 | `size`                  | `string`           | —          | `"small"` (px-3 py-2), `"mini"` (p-2) or `"xs"`; default is standard (px-5 py-3). `"xs"` looks 12px everywhere: on phones it keeps 16px text and draws the field at 75%, so iOS Safari does not zoom on focus; from `sm` up it is a plain 12px field. Give it a width through `containerClassName` when it sits in a row |
-| `enterKeyHint`          | `string`           | —          | Label for a phone keyboard's enter key, e.g. `"done"`, `"search"`, `"go"`     |
-| `onKeyDown`             | `(e) => void`      | —          | Passed to the `<input>` — e.g. Enter to commit, Escape to cancel             |
-| `labelExtra`            | `ReactElement`     | —          | Extra element rendered inline with the label                                 |
-| `infoElement`           | `ReactElement`     | —          | Content shown in an InfoWindow tooltip next to the label                     |
-| `customElement`         | `ReactElement`     | —          | Custom element rendered to the right of the label row                        |
-| `pattern`               | `string`           | —          | Regex string applied on submit (overrides type-based validation)             |
-| `customErrMsg`          | `string`           | —          | Overrides the default validation error message                               |
-| `minNumber`             | `number`           | —          | Minimum value (type `"number"` only)                                         |
-| `maxNumber`             | `number`           | —          | Maximum value (type `"number"` only)                                         |
-| `maxLength`             | `number`           | —          | Max character length                                                         |
-| `optional`              | `boolean`          | `false`    | Skips validation when `true`                                                 |
-| `disabled`              | `boolean`          | `false`    | Disables the input                                                           |
-| `autoFocus`             | `boolean`          | `false`    | Focuses the input on mount                                                   |
-| `autoComplete`          | `"on"` \| `"off"`  | —          | HTML autocomplete attribute                                                  |
-| `capitalize`            | `boolean`          | `false`    | Converts all input to uppercase (type `"text"` only)                         |
-| `showMagnifyIcon`       | `boolean`          | `false`    | Shows a magnifying glass icon on the right                                   |
-| `strSuggestions`        | `string[]`         | —          | List of suggestions shown in a dropdown as the user types                    |
-| `mobilePicker`          | `boolean`          | `false`    | Shows a country flag/code selector (type `"mobile"` only)                    |
-| `mobileCountryEditable` | `boolean`          | `false`    | Allows changing the country code (type `"mobile"` + `mobilePicker` only)     |
-| `mobileWhitelist`       | `("BN" \| "MY")[]` | —          | Restricts mobile validation to specific countries                            |
-| `mobileView`            | `boolean`          | `false`    | Renders a compact inline layout for mobile screens (label left, input right) |
-| `darkMode`              | `boolean`          | `false`    | Applies dark colour scheme to labels                                         |
-| `containerClassName`    | `tailwind class`   | —          | Class applied to the outer container                                         |
-| `inputClassName`        | `tailwind class`   | —          | Additional class applied to the `<input>` element                            |
-| `onChange`              | `(e: any) => void` | `() => {}` | Called on every change; `e.target.value` contains the new value              |
-| `cellInput`             | `CellInput`        | —          | Refer to Input Utils — enables cell/table editing mode                       |
+| `enterKeyHint`          | `string`           | —          | Label for a phone keyboard's enter key, e.g. `"done"`, `"search"`, `"go"`                                                                                                                                                                                                                                                |
+| `onKeyDown`             | `(e) => void`      | —          | Passed to the `<input>` — e.g. Enter to commit, Escape to cancel                                                                                                                                                                                                                                                         |
+| `labelExtra`            | `ReactElement`     | —          | Extra element rendered inline with the label                                                                                                                                                                                                                                                                             |
+| `infoElement`           | `ReactElement`     | —          | Content shown in an InfoWindow tooltip next to the label                                                                                                                                                                                                                                                                 |
+| `customElement`         | `ReactElement`     | —          | Custom element rendered to the right of the label row                                                                                                                                                                                                                                                                    |
+| `pattern`               | `string`           | —          | Regex string applied on submit (overrides type-based validation)                                                                                                                                                                                                                                                         |
+| `customErrMsg`          | `string`           | —          | Overrides the default validation error message                                                                                                                                                                                                                                                                           |
+| `minNumber`             | `number`           | —          | Minimum value (type `"number"` only)                                                                                                                                                                                                                                                                                     |
+| `maxNumber`             | `number`           | —          | Maximum value (type `"number"` only)                                                                                                                                                                                                                                                                                     |
+| `maxLength`             | `number`           | —          | Max character length                                                                                                                                                                                                                                                                                                     |
+| `optional`              | `boolean`          | `false`    | Skips validation when `true`                                                                                                                                                                                                                                                                                             |
+| `disabled`              | `boolean`          | `false`    | Disables the input                                                                                                                                                                                                                                                                                                       |
+| `autoFocus`             | `boolean`          | `false`    | Focuses the input on mount                                                                                                                                                                                                                                                                                               |
+| `autoComplete`          | `"on"` \| `"off"`  | —          | HTML autocomplete attribute                                                                                                                                                                                                                                                                                              |
+| `capitalize`            | `boolean`          | `false`    | Converts all input to uppercase (type `"text"` only)                                                                                                                                                                                                                                                                     |
+| `showMagnifyIcon`       | `boolean`          | `false`    | Shows a magnifying glass icon on the right                                                                                                                                                                                                                                                                               |
+| `strSuggestions`        | `string[]`         | —          | List of suggestions shown in a dropdown as the user types                                                                                                                                                                                                                                                                |
+| `mobilePicker`          | `boolean`          | `false`    | Shows a country flag/code selector (type `"mobile"` only)                                                                                                                                                                                                                                                                |
+| `mobileCountryEditable` | `boolean`          | `false`    | Allows changing the country code (type `"mobile"` + `mobilePicker` only)                                                                                                                                                                                                                                                 |
+| `mobileWhitelist`       | `("BN" \| "MY")[]` | —          | Restricts mobile validation to specific countries                                                                                                                                                                                                                                                                        |
+| `mobileView`            | `boolean`          | `false`    | Renders a compact inline layout for mobile screens (label left, input right)                                                                                                                                                                                                                                             |
+| `darkMode`              | `boolean`          | `false`    | Applies dark colour scheme to labels                                                                                                                                                                                                                                                                                     |
+| `containerClassName`    | `tailwind class`   | —          | Class applied to the outer container                                                                                                                                                                                                                                                                                     |
+| `inputClassName`        | `tailwind class`   | —          | Additional class applied to the `<input>` element                                                                                                                                                                                                                                                                        |
+| `onChange`              | `(e: any) => void` | `() => {}` | Called on every change; `e.target.value` contains the new value                                                                                                                                                                                                                                                          |
+| `cellInput`             | `CellInput`        | —          | Refer to Input Utils — enables cell/table editing mode                                                                                                                                                                                                                                                                   |

package/lib/components/input/textInput/textinput.stories.tsx

@@ -23,6 +23,8 @@ export const TextInput = () => {
   const [suggestText, setSuggestText] = useState("");
   const [regexText, setRegexText] = useState("");
   const [barcodeText, setBarcodeText] = useState("");
+  const [serialText, setSerialText] = useState("");
+  const [slashSerialText, setSlashSerialText] = useState("");
 
   return (
     <>
@@ -241,6 +243,34 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
+      <StorySection
+        title="Barcode Scan (append)"
+        description="barcodeMode='append' makes a scan add to the serials already in the box and skips one that is already there. A value uses one separator, picked from the value: the first one in barcodeSeparators that it contains, else the first listed. With [',', '/'] a series starts comma separated (A, B); typing a '/' after the first serial makes later scans slash separated (A/B/C); a value with a comma keeps any '/' as part of a serial. Typing still works."
+      >
+        <div className="w-full max-w-sm space-y-6">
+          <TextInputImpl
+            id="batterySerial"
+            value={serialText}
+            type="text"
+            label="Battery Serial Number (commas only, the default)"
+            placeholder="Scan each battery label"
+            barcodeEnabled
+            barcodeMode="append"
+            onChange={(e) => setSerialText(e.target.value)}
+          />
+          <TextInputImpl
+            id="batterySerialSlash"
+            value={slashSerialText}
+            type="text"
+            label="Battery Serial Number (comma, or slash if typed)"
+            placeholder="Scan, or type A/ then scan"
+            barcodeEnabled
+            barcodeMode="append"
+            barcodeSeparators={[",", "/"]}
+            onChange={(e) => setSlashSerialText(e.target.value)}
+          />
+        </div>
+      </StorySection>
       <StorySection
         title="Small & Mini sizes"
         description="size='small' reduces padding to px-3 py-2. size='mini' reduces further to p-2."

package/lib/components/navigation/leftNav/README.md

@@ -160,6 +160,7 @@ Below `lg` the rail moves into the mobile drawer as a row of icons above the sid
 | `renderDashboardFooterContent` | `() => ReactNode`                                          | —       | Renders a slot at the bottom of the sidebar, above a border separator                                       |
 | `dashboardFooterClassName`     | `string`                                                   | —       | Tailwind classes applied to the footer slot container                                                       |
 | `dashboardContentClassName`    | `string`                                                   | —       | Tailwind classes applied to the main content `<main>` element                                               |
+| `dashboardHeaderHeightClassName` | `string` | `h-16` | Tailwind height classes for the top header bar |
 | `linkType`                     | `"react" \| "gatsby" \| "next" \| "external" \| "default"` | —       | Router adapter passed through to nav links                                                                  |
 | `custom`                       | `any`                                                      | —       | Custom link component used when `linkType` is `"react"`, `"gatsby"`, or `"next"`                            |
 | `compactMode`                  | `boolean`                                                  | `false` | Tighter rows, smaller icons and a smaller expand chevron, keeping every label                               |

package/package.json

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