blixify-ui-web-mcp 0.1.19 → 0.1.21

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { FilePreview as FilePreviewImpl } from ".";
+import { StorySection } from "../../storyUtils";
+
+const meta = { title: "Display/File Preview" };
+export default meta;
+
+// INFO: a real firebase download url — percent-encoded path, timestamp-prefixed
+// filename, token in the query. The label and the type are both read off this
+// shape, so the story uses it rather than a tidy fake that would hide the work.
+const FIREBASE_PDF =
+  "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/notes%2Fn1%2Fcontent%2F1757238400000_Annual%20Report.pdf?alt=media&token=abc123";
+
+const IMAGE =
+  "https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&w=600";
+
+const VIDEO =
+  "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+
+export const FilePreview = () => {
+  return (
+    <div className="font-sans p-6">
+      <StorySection
+        title="Card — one row per file"
+        description="The default. An icon chosen by type, the name with its upload timestamp stripped, and a human-readable size. This is what an attachment in a markdown document renders as."
+      >
+        <div className="flex w-full max-w-md flex-col gap-y-2">
+          <FilePreviewImpl
+            file={{ fileName: FIREBASE_PDF, fileSize: 2097152 }}
+          />
+          <FilePreviewImpl
+            file={{ fileName: IMAGE, label: "site-photo.jpg", fileSize: 348160 }}
+          />
+          <FilePreviewImpl
+            file={{ fileName: "s/ledger.xlsx", fileSize: 51200 }}
+          />
+          <FilePreviewImpl file={{ fileName: "s/archive.zip" }} />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Tile — a grid of files"
+        description="Media gets a real thumbnail; everything else falls back to its icon. Pair with viewType 'grid' and a $unwind pipeline to paginate over files rather than records — the server counts through the pipeline, so the total is the file count with nothing extra to configure."
+      >
+        <div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
+          <FilePreviewImpl
+            variant="tile"
+            file={{ fileName: IMAGE, label: "site-photo.jpg", fileSize: 348160 }}
+          />
+          <FilePreviewImpl
+            variant="tile"
+            file={{ fileName: VIDEO, label: "walkthrough.mp4" }}
+          />
+          <FilePreviewImpl
+            variant="tile"
+            file={{ fileName: FIREBASE_PDF, fileSize: 2097152 }}
+          />
+          <FilePreviewImpl
+            variant="tile"
+            file={{ fileName: "s/ledger.xlsx", fileSize: 51200 }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Type resolution"
+        description="mimeType wins when the consumer stored one. Most files were saved as only a name and a token, so the extension is the fallback — not a shortcut, the only thing available. The query string is cut first, or every firebase url would look like a '.pdf?alt=media' file."
+      >
+        <div className="flex w-full max-w-md flex-col gap-y-2">
+          <FilePreviewImpl
+            file={{ fileName: "s/mystery.bin", mimeType: "image/png", label: "Stored type says image" }}
+          />
+          <FilePreviewImpl
+            file={{ fileName: "s/clip.MOV", label: "Extension, upper case" }}
+          />
+          <FilePreviewImpl
+            file={{ fileName: "s/no-extension", label: "Nothing to go on" }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Pending upload"
+        description="A blob URL belongs to the session that made it, so a stored one is a file whose upload never finished. It is named but deliberately NOT a link — following it would 404, and an anchor with no href is unreachable by keyboard while still looking clickable."
+      >
+        <div className="flex w-full max-w-md flex-col gap-y-2">
+          <FilePreviewImpl
+            file={{ fileName: "blob:http://localhost/abc", label: "draft.pdf" }}
+          />
+          <FilePreviewImpl
+            variant="tile"
+            file={{ fileName: "blob:http://localhost/abc", label: "draft.png" }}
+            className="max-w-[12rem]"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="onClick instead of a link"
+        description="A file view navigates to the record a file belongs to rather than downloading it — the record carries the status, the owner and everything else you came looking for. Passing onClick renders a button and leaves the destination to the consumer."
+      >
+        <div className="w-full max-w-md">
+          <FilePreviewImpl
+            file={{ fileName: FIREBASE_PDF, fileSize: 2097152 }}
+            onClick={() => window.alert("Navigate to the parent record")}
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+};

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

@@ -41,3 +41,6 @@ import { Overlay } from "blixify-ui-web/components/display/overlay";
 | `renderContent`  | `function`      | `() => {}` |                                                                                                     |
 | `onClose`        | `function`      | `() => {}` | Called upon modal overlay is clicked                                                                |
 | `overflowScroll` | `boolean`       | `false`    | If `true`, modal height is limited to 75vh on mobile, title stays sticky, and content is scrollable |
+| `bgColor`        | `string`        | `bg-white` | Tailwind background class for the panel in light mode                                               |
+| `darkMode`       | `boolean`       | `false`    | Switches the panel, text and icons to the dark palette                                              |
+| `darkModeBg`     | `string`        | `bg-gray-900` | Tailwind background class for the panel when `darkMode` is on                                    |

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

@@ -49,7 +49,7 @@ export const Modal = () => {
             workspace={{
               apiEndpoint: "http://localhost:3000/api/data",
               assetEndpoint:
-                "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
+                "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/",
             }}
             additionalQuery={[]}
             organise={{
@@ -72,3 +72,52 @@ export const Modal = () => {
     />
   );
 };
+
+// INFO: the light panel was hardcoded bg-white — darkModeBg only ever applied
+// when darkMode was on, so there was no way to tint a light modal.
+
+export const ModalBgColor = () => {
+  const [open, setOpen] = useState<string | null>("grey");
+
+  const renderSwatch = (id: string, label: string) => (
+    <button
+      type="button"
+      className="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm hover:bg-gray-50"
+      onClick={() => setOpen(id)}
+    >
+      {label}
+    </button>
+  );
+
+  const renderModal = (id: string, label: string, bgColor?: string) => (
+    <ModalImpl
+      open={open === id}
+      title={label}
+      bgColor={bgColor}
+      renderContent={() => (
+        <div className="py-4 text-sm text-gray-700">
+          Panel background: <code>{bgColor ?? "bg-white (default)"}</code>
+        </div>
+      )}
+      onClose={() => setOpen(null)}
+    />
+  );
+
+  return (
+    <div className="w-full">
+      <div className="mb-3 text-sm text-gray-500">
+        bgColor takes any Tailwind background class and applies to the light
+        panel. darkModeBg still owns the panel when darkMode is on.
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {renderSwatch("default", "Default (bg-white)")}
+        {renderSwatch("grey", "bg-gray-100")}
+        {renderSwatch("tint", "bg-primary-50")}
+      </div>
+      {renderModal("default", "Default")}
+      {renderModal("grey", "Grey Panel", "bg-gray-100")}
+      {renderModal("tint", "Tinted Panel", "bg-primary-50")}
+    </div>
+  );
+};
+ModalBgColor.storyName = "bgColor";

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

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

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

@@ -17,7 +17,7 @@ const sampleEvents: NewCalendarEvent[] = [
   },
   {
     id: "2",
-    title: "Verdant Summarize Updates",
+    title: "Weekly Summary Updates",
     start: dayjs("2024/05/08 13:10", "YYYY/MM/DD HH:mm").toDate(),
     status: "Pending",
   },

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

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

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

@@ -33,12 +33,12 @@ const feeds: NewFeedItem[] = [
     id: "2",
     iconClass: "bg-blue-500",
     iconType: <HandThumbUpIcon className="h-5 w-5 text-white" />,
-    content: "Notify Arus Oil logistic team once you are ready to sell",
+    content: "Notify the logistics team once you are ready to sell",
     step: "2025-12-11",
     addContent: (
       <img
         className="mt-4 h-auto w-36 sm:w-56"
-        src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+        src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum"
         alt=""
       />
     ),
@@ -47,7 +47,7 @@ const feeds: NewFeedItem[] = [
     id: "3",
     iconClass: "bg-green-500",
     iconType: <CheckIcon className="h-5 w-5 text-white" />,
-    content: "View payment made to you on Arus Oil App",
+    content: "View payments made to you in the app",
     step: "2025-12-15",
   },
 ];

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

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

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

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

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

@@ -2,15 +2,6 @@
 
 Tabular display with a List-shaped mobile breakpoint. The architectural key: **`mobileView=true` delegates row rendering to `NewListRow`**, so the same tap-rhythm and avatar/title/trailing geometry shows up across NewList, NewFeeds, and NewTable mobile.
 
-## Design reference
-
-PR #1666 — `uiRefresh.stories.tsx`:
-
-- **"Table — Desktop (clean borderless)"** (~line 491, `DesktopTable`)
-- **"Table — Mobile Card View"** (~line 552, `MobileCardTable`)
-
-Note: the Mobile Card View mock in #1666 invented a bespoke avatar/name/status layout. That pattern is being replaced — the mobile rendering should use `NewListRow` (composition), not duplicate it.
-
 ## Mobile column flags
 
 Columns expose three optional booleans that map them to the `NewListItem` shape:
@@ -23,6 +14,35 @@ Columns expose three optional booleans that map them to the `NewListItem` shape:
 
 Columns flagged `hideOnMobile` are dropped from the mobile rendering entirely.
 
+## Mobile tooltip (`mobileTooltip`)
+
+With `mobileView`, `mobileTooltip` adds row data to the collapsed row and to a hover card. Through `DataTemplate` it is `bareSettings.bareMobileTooltip`, which applies when `bareNewDTW` and `bareListMobileView` are both on.
+
+| Key                         | Type                       | Shows                                                                                                                                                                                                                  |
+| --------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `titleAdjacent.tagKey`      | `string`                   | That row field's value as a Tag next to the row title                                                                                                                                                                  |
+| `titleAdjacent.tagColor`    | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                          |
+| `titleAdjacent.trailingKey` | `string`                   | That row field's value as trailing text, e.g. a price                                                                                                                                                                  |
+| `titleAdjacent.summaryKeys` | `string[]`                 | A second line under the title while the row is collapsed, as label + value pairs. Labels come from the column titles; a dotted key (`shippingAddress.name`) falls back to its parent column's title. Empty values are skipped. Tapping the line expands the row |
+| `tooltip.imageKey`          | `string`                   | The image URL field shown in the hover card                                                                                                                                                                            |
+| `tooltip.summaryKeys`       | `string[]`                 | Label + value pairs in the hover card                                                                                                                                                                                  |
+| `tooltip.tagKeys`           | `string[]`                 | Tag pills in the hover card                                                                                                                                                                                            |
+| `tooltip.tagColors`         | `Record<string, TagColor>` | The Tag colour for each value                                                                                                                                                                                          |
+
+```tsx
+<NewTable
+  mobileView
+  mobileTooltip={{
+    titleAdjacent: {
+      tagKey: "status",
+      tagColor: { Delivered: "green", Pending: "yellow" },
+      summaryKeys: ["shippingAddress.name"],
+    },
+  }}
+  {...tableProps}
+/>
+```
+
 ## Column width
 
 Drag the grip on a header's right border to resize that column. The line is

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

@@ -133,7 +133,7 @@ const fullColumns: NewTableColumn[] = [
 ];
 
 // INFO: a compact "config matrix" — the pattern used for KNX group addresses in
-// energeek-gateway-config. Cells are React elements (kit inputs in cellInput
+// a gateway-config screen. Cells are React elements (kit inputs in cellInput
 // mode, icon buttons), typed columns power the inline add row, and the parent
 // owns the state.
 interface MatrixRow {
@@ -187,11 +187,11 @@ const EditableWithAddColumn = () => {
         advSettings={{
           addColumnEnabled: true,
           renderReferenceSpaceOptions: () => [
-            { key: "kpj-projects", label: "Projects" },
-            { key: "kpj-users", label: "Users" },
+            { key: "projects", label: "Projects" },
+            { key: "users", label: "Users" },
           ],
           renderReferenceLabelOptions: (spaceId?: string) =>
-            spaceId === "kpj-users"
+            spaceId === "users"
               ? [{ key: "email", label: "Email" }]
               : [{ key: "name", label: "Name" }],
           onAddColumn: (column: any) => {
@@ -372,6 +372,85 @@ const ElementCellsMatrix = () => {
   );
 };
 
+// INFO: an editable table with disabled schema columns beside editable ones —
+// hovering Value or Notes opens an editor, while Unit, Source and the coloured
+// Status column stay read-only, matching how the form treats disabled fields
+const lockedColumns: NewTableColumn[] = [
+  {
+    key: "metric",
+    title: "Metric",
+    type: "list",
+    listSelection: ["Steps", "Heart Rate", "Weight"],
+    listSelectionColour: ["blue", "red", "yellow"],
+  },
+  { key: "value", title: "Value", type: "number" },
+  { key: "unit", title: "Unit (disabled)", type: "string", disabled: true },
+  { key: "notes", title: "Notes", type: "string" },
+  {
+    key: "source",
+    title: "Source (disabled)",
+    type: "string",
+    disabled: true,
+  },
+  {
+    key: "status",
+    title: "Status (disabled)",
+    type: "list",
+    listSelection: ["Synced", "Pending"],
+    listSelectionColour: ["green", "yellow"],
+    disabled: true,
+  },
+];
+
+const lockedRows: NewTableRow[] = [
+  {
+    id: "1",
+    metric: "Heart Rate",
+    value: 72,
+    unit: "bpm",
+    notes: "After walk",
+    source: "Manual entry",
+    status: "Synced",
+  },
+  {
+    id: "2",
+    metric: "Weight",
+    value: 68.5,
+    unit: "kg",
+    notes: "Morning",
+    source: "Device sync",
+    status: "Pending",
+  },
+];
+
+const EditableWithDisabledColumns = () => {
+  const [rows, setRows] = useState<NewTableRow[]>(lockedRows);
+
+  return (
+    <NewTableImpl
+      columns={lockedColumns}
+      data={rows}
+      paginationType="page"
+      size={rows.length}
+      limit={10}
+      pageIndex={0}
+      handleUpdatePageIndex={() => {}}
+      editable={{
+        active: true,
+        onUpdateData: async (rowId, columnId, value) => {
+          setRows((previous) =>
+            previous.map((eachRow) =>
+              eachRow.id === rowId
+                ? { ...eachRow, [columnId]: value }
+                : eachRow,
+            ),
+          );
+        },
+      }}
+    />
+  );
+};
+
 export const NewTable = () => {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
@@ -452,7 +531,6 @@ export const NewTable = () => {
                   Processing: "blue",
                   Pending: "yellow",
                 },
-                trailingKey: "totalAmount",
               },
               tooltip: {
                 imageKey: "shippingAddress.name",
@@ -468,6 +546,32 @@ export const NewTable = () => {
           />
         </div>
       </StorySection>
+      <StorySection
+        title="Mobile view with Summary"
+        description="titleAdjacent.tagKey shows a status tag next to the title; summaryKeys renders extra columns as label + value pairs on a second line below (visible while collapsed). Clicking the summary expands the row."
+      >
+        <div className="w-full max-w-96">
+          <NewTableImpl
+            columns={fullColumns}
+            data={data}
+            mobileView
+            checkbox
+            selectedIds={selectedIds}
+            handleSelectedIds={setSelectedIds}
+            mobileTooltip={{
+              titleAdjacent: {
+                tagKey: "status",
+                summaryKeys: ["shippingAddress.name"],
+                tagColor: {
+                  Delivered: "green",
+                  Processing: "blue",
+                  Pending: "yellow",
+                },
+              },
+            }}
+          />
+        </div>
+      </StorySection>
 
       <StorySection
         title="Empty state"
@@ -487,6 +591,13 @@ export const NewTable = () => {
         <EditableWithAddColumn />
       </StorySection>
 
+      <StorySection
+        title="Editable with disabled columns"
+        description="A column marked disabled in the schema stays read-only in an editable table, the same as in the form. Hover Value or Notes to edit; Unit, Source and the coloured Status column never open an editor, and a row click still reaches the row."
+      >
+        <EditableWithDisabledColumns />
+      </StorySection>
+
       <StorySection
         title="Element cells with row actions (config matrix)"
         description="Cells can be React elements: kit inputs with cellInput={{ active: true }} (the same compact mode the DTW inline edit matrix uses) and IconButtons per row, while the parent owns the row state. Typed columns are what make the inline 'Create New Item' row render inputs — element-only columns render nothing there. Do NOT combine with editable.active: edit mode wraps element cells in its own editors (from 1.2.66 a React element cell passes through, but its inputs are ~286px wide). Wrap in overflow-x-auto when the columns outgrow the pane."
@@ -509,8 +620,8 @@ export const NewTable = () => {
 
 export const FlatTable = () => {
   const rows = [
-    { _id: "1", name: "Acme", stage: "Won" },
-    { _id: "2", name: "Globex", stage: "Lost" },
+    { id: "1", name: "Acme", stage: "Won" },
+    { id: "2", name: "Globex", stage: "Lost" },
   ];
   return (
     <StorySection
@@ -526,7 +637,7 @@ export const FlatTable = () => {
           limit={10}
           cursor=""
           loading={false}
-          paginationType="hidden"
+          paginationType="page"
           advSettings={{ flat: true }}
           handleUpdatePageIndex={() => {}}
         />
@@ -541,7 +652,7 @@ export const FlatTable = () => {
           cursor=""
           loading={false}
           mobileView
-          paginationType="hidden"
+          paginationType="page"
           advSettings={{ flat: true }}
           handleUpdatePageIndex={() => {}}
         />

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

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

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

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

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

@@ -18,7 +18,7 @@ export const MarkdownInput = () => {
     <>
       <StorySection
         title="Default (boxed form field)"
-        description="Renders as a form field — bordered container, static toolbar, and a fixed-height scroll box. Press / to see the available commands, esc to close the menu. Images show blob URL previews in Storybook."
+        description="Renders as a form field — bordered container, static toolbar, and a fixed-height scroll box. Press / to see the available commands, esc to close the menu. Image, Video and File each appear only when the host enables them. Storybook wires no upload handler, so a file stays on Uploading — in an app the host flushes it on save."
       >
         <div className="w-full">
           <MarkdownInputImpl
@@ -31,6 +31,7 @@ export const MarkdownInput = () => {
             darkMode={false}
             enableImageUpload={true}
             enableVideoUpload={true}
+            enableFileUpload={true}
           />
         </div>
       </StorySection>
@@ -49,6 +50,7 @@ export const MarkdownInput = () => {
             darkMode={false}
             enableImageUpload={true}
             enableVideoUpload={true}
+            enableFileUpload={true}
             onRequestRemove={(spaceId, remove) => {
               // INFO: stands in for the host's confirmation modal
               if (window.confirm(`Remove ${spaceId} from this page?`)) remove();

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

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