blixify-ui-web-mcp 0.1.41 → 0.1.42

package/lib/components/chat/chatAnchor/README.md

@@ -80,7 +80,7 @@ return (
 
 | Name             | Type                          | Default                                | Description                                                                                     |
 | ---------------- | ----------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `positionOffset` | `string`                      | `"bottom-28 right-4 md:bottom-6 md:right-6"` | Tailwind classes that control the fixed position of the anchor. On phones the default starts above a bottom bar such as DataTemplate's Quick find. Ignored on mobile when open. |
+| `positionOffset` | `string`                      | `"bottom-[88px] right-4 md:bottom-6 md:right-6"` | Tailwind classes that control the fixed position of the anchor. On phones the default rests on the top edge of a bottom bar such as DataTemplate's Quick find, clear of its filter button. Ignored on mobile when open. |
 | `greetingCard`   | `boolean`                     | `false`                                | When `true`, shows a greeting bubble next to the anchor button while the chat is closed.        |
 | `greetingText`   | `string`                      | `"Welcome! How can I help you today?"` | Text displayed inside the greeting card bubble.                                                 |
 | `openIcon`       | `React.ReactNode` \| `string` | `ChatBubbleOvalLeftIcon`               | Icon shown when the chat is closed. A string is treated as an image URL (56×56 rounded circle). |

package/lib/components/chat/chatBase/chatBase.stories.tsx

@@ -263,6 +263,29 @@ export const ChatBase = () => {
         } as any,
         createdAt: dayjs("2023-11-03 12:02").toDate(),
       },
+      // INFO: image attachments whose backend-stored MIME type is missing or
+      // generic — these must still preview inline (resolved from the filename
+      // extension), not fall through to the generic file card.
+      {
+        sender: botUser,
+        messageBody: {
+          fileName:
+            "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400",
+          token: "8e050d2a-28c0-4b07-a6f3-c45b65730727.gif",
+          type: "",
+        } as any,
+        createdAt: dayjs("2023-11-03 12:03").toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody: {
+          fileName:
+            "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?w=400",
+          token: "generated-image.png",
+          type: "application/octet-stream",
+        } as any,
+        createdAt: dayjs("2023-11-03 12:04").toDate(),
+      },
     ]),
   );
   const [files4, setFiles4] = useState<File[]>([]);
@@ -594,7 +617,7 @@ export const ChatBase = () => {
 
       <StorySection
         title="File Upload"
-        description="fileUpload.allowFileUpload=true shows a paperclip button. Selected files appear as chips in footerElement. onSendMessage fires for both text and file sends — the consumer handles upload logic there."
+        description="fileUpload.allowFileUpload=true shows a paperclip button. Selected files appear as chips in footerElement. onSendMessage fires for both text and file sends — the consumer handles upload logic there. Image attachments preview inline even when the backend-stored MIME type is missing or generic (the .gif and .png below arrive with type '' / 'application/octet-stream' and are resolved from their filename extension)."
       >
         <ChatBaseImpl
           open

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

@@ -1095,6 +1095,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `groupIdCollapsible`          | `{ [key: string]: boolean }`                                                | Initial collapsed/expanded state per group ID                                                                                                                                                                                                                                                                         |
 | `sortGroupByAlphabetically`   | `boolean`                                                                   | Sorts group-by values alphabetically                                                                                                                                                                                                                                                                                  |
 | `unionCollections`            | `any[]`                                                                     | Additional collections to union-query alongside the main collection                                                                                                                                                                                                                                                   |
+| `unionPagination`             | `boolean`                                                                   | Opt in to paging a union list: sends the page offset as `skip` and adds `_id` to the sort as a tie-break (default `false`). See *Union Collections* in the DataWrapper README                                                                                                                                         |
 | `moreSettings`                | `{ text: string; onClick: () => void }[]`                                   | Extra items appended to the "more" dropdown menu                                                                                                                                                                                                                                                                      |
 | `exportSettings`              | `ExportSettings`                                                            | See Export Settings below                                                                                                                                                                                                                                                                                             |
 | `onChangeSort`                | `(value: Sort) => void`                                                     | Called when the user changes the sort                                                                                                                                                                                                                                                                                 |

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

@@ -1017,6 +1017,31 @@ organise={{
 
 ---
 
+### Paging a union list — `unionPagination`
+
+A union list does not page on its own. The DTW sends `skip: 0` for every union request, so page 2 (or the next scroll load) returns the first rows again. If the app fetches the whole union in one request and pages it itself, that is fine and nothing changes.
+
+Set `organise.unionPagination` to let the server do the paging instead. It is **off by default**, so upgrading the library changes nothing until you opt in.
+
+```tsx
+organise={{
+  unionCollections: [/* ... */],
+  unionPagination: true,
+  paginationType: "scroll", // or "page"
+  sort: { sortId: "sortDate", type: "asc" },
+}}
+limit={20}
+```
+
+With it on, each page request:
+
+- sends `skip = pageIndex × limit` (the first page is `0`);
+- sends the sort followed by `_id` in the same direction, e.g. `[{ sortId: "sortDate", type: "asc" }, { sortId: "_id", type: "asc" }]`. Every page is a separate request, and two rows with the same sort value have no fixed order between requests, so without the tie-break a row can appear on two pages or on none. With no sort set, the server default (`date` descending) is kept and `_id` is added after it.
+
+It only applies with `unionCollections`. Calendar, map and timeline views fetch the full set and are not affected.
+
+---
+
 ### Dynamic queries — rebuild unionCollections when filters change
 
 Because `unionCollections` is inside `organise`, you can recompute it reactively when your filter state changes. Call `dataRef.current?.handleRefresh()` after updating state.

package/lib/components/data/dataWrapper/dataWrapper.barcode.stories.tsx

@@ -0,0 +1,85 @@
+// INFO: a DataTemplateWrapper form with a barcodeEnabled field, on the in-memory
+// story backend so it opens without a server. The scan button runs the real
+// camera flow: BarcodeDetector where the browser has it, a ZXing-wasm polyfill
+// elsewhere (iOS Safari). The camera needs https or localhost.
+
+import React, { useState } from "react";
+import { Loading } from "../../display/loading";
+import { DataStructure } from "../dataTemplate/model";
+import { DataTemplateWrapper } from "./index";
+import {
+  handleBuildStoryRecords,
+  storyWorkspace,
+  useStoryBackend,
+} from "./storyBackend.fixtures";
+
+const meta = {
+  title: "Data/Data Wrapper/Barcode",
+  decorators: [
+    (Story: () => React.ReactElement) => (
+      <div className="bg-white min-h-screen p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+const COLLECTION = "dtw-barcode-collection";
+
+const BarcodeSchema: DataStructure[] = [
+  { id: "name", name: "Asset Name", type: "string" },
+  {
+    id: "assetTag",
+    name: "Asset Tag",
+    type: "string",
+    barcodeEnabled: true,
+    capitalize: true,
+  },
+  { id: "location", name: "Location", type: "string" },
+];
+
+export const BarcodeField = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [COLLECTION]: handleBuildStoryRecords(5, (index) => ({
+        _id: `asset-${index}`,
+        name: `Asset ${index}`,
+        assetTag: `BLX-00${index}`,
+        location: `Rack ${index}`,
+      })),
+    },
+  });
+  const [viewType, setViewType] = useState<"list" | "read" | "update">(
+    "update",
+  );
+  const [selectedId, setSelectedId] = useState<string | undefined>("asset-1");
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full max-w-2xl">
+      <div className="font-semibold mb-1 text-gray-900">Barcode field</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Tap the scan icon on Asset Tag, then point the camera at a barcode or QR
+        code. Save runs against the in-memory story backend.
+      </div>
+      <DataTemplateWrapper
+        title="Asset"
+        type={viewType}
+        id={selectedId}
+        collectionId={COLLECTION}
+        schema={BarcodeSchema}
+        workspace={storyWorkspace()}
+        edit={{ allEditable: true, disabledUpdate: false }}
+        bareSettings={{ bareNewDTW: true, bareOffline: false }}
+        handleNavigate={(type: any, id: any) => {
+          setViewType(type);
+          setSelectedId(id);
+        }}
+        limit={10}
+      />
+    </div>
+  );
+};
+BarcodeField.storyName = "Barcode Field";

package/lib/components/data/dataWrapper/dataWrapper.view.stories.tsx

@@ -224,7 +224,7 @@ export const DataWrapper = () => {
           }}
           bareSettings={{
             bareCompactMode: true,
-            bareNewDTW: listLayout === "calendar",
+            bareNewDTW: true,
             bareOffline: false,
             bareListComponent:
               listLayout === "customList"

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

@@ -4,12 +4,8 @@ The footer every new-DTW list renderer shares — NewTable, NewList and the grid
 view: "Showing N result(s)" on the left, bare chevrons with an outlined current
 page on the right. Dark mode follows `darkMode` / `darkModeBg` like the tables.
 
-| Prop                                   | Type                                          | Notes                                                                   |
-| -------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------- |
-| `paginationType`                       | `"page" \| "cursor" \| "scroll"`              | `scroll` shows only the result count; nothing renders when unset        |
-| `pageIndex`, `limit`, `size`, `cursor` |                                               | same meaning as on NewTable                                             |
-| `resultCount`                          | `number`                                      | rows on the current page — the count shown for cursor / scroll paging   |
-| `customPaginationSize`                 | `number`                                      | overrides the shown count                                               |
-| `hidePagination`                       | `boolean`                                     | renders nothing                                                         |
-| `handleUpdatePageIndex`                | `(value: number \| "prev" \| "next") => void` | page numbers for `page`, `prev` / `next` for `cursor`                   |
-| `className`                            | `string`                                      | extra classes on the footer row (NewTable uses it for the fixed footer) |
+`page` paging also shows a go-to-page input — a numeric field with −/+ steppers on
+larger screens. The page changes on its own about 0.7s after the last digit, at once when no
+longer number could be a valid page, and straight away on Enter or blur. A typed page is
+clamped to the first and last page, and the input is hidden when there is only one page.
+`cursor` and `scroll` paging have no total, so they never show it.

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

@@ -26,6 +26,9 @@ export const MarkdownInput = () => {
   const [diagramValue, setDiagramValue] = useState<string | undefined>(
     DIAGRAM_SAMPLE,
   );
+  const [smallValue, setSmallValue] = useState<string | undefined>(
+    "## Text size sm\n\nThis editor reads as 14px on every screen. On a phone it keeps a real 16px font and is drawn at 87.5%, so iOS Safari does not zoom in when it is tapped.\n\n- Select text to see the floating toolbar",
+  );
   const handleOnChange = (id: string, value?: string) => setValue(value);
   const handleOnDiagramChange = (id: string, value?: string) =>
     setDiagramValue(value);
@@ -107,6 +110,26 @@ export const MarkdownInput = () => {
         </pre>
       </StorySection>
 
+      <StorySection
+        title="Text size sm"
+        description="textSize=&quot;sm&quot; gives 14px text on every screen. On phones the editor keeps a real 16px font drawn with transform: scale(0.875), the same trick as TextInput xs, so iOS Safari does not zoom on focus. CSS zoom would still trigger the zoom. MarkdownStatic takes the same prop."
+      >
+        <div className="grid w-full gap-6 md:grid-cols-2">
+          <MarkdownInputImpl
+            id="text-size-sm"
+            value={smallValue ?? ""}
+            onChange={(id, value) => setSmallValue(value)}
+            borderless={true}
+            textSize="sm"
+          />
+          <MarkdownStatic
+            label="MarkdownStatic"
+            value={smallValue ?? ""}
+            textSize="sm"
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Mermaid diagrams"
         description="lib.mermaid given, so ```mermaid blocks draw as diagrams — under the source while editing, in place of it in MarkdownStatic. Inline tags such as <b>, <i> and <br> format the label; an <img> is stripped."

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

@@ -16,10 +16,14 @@ export const Signature = () => {
   const signatureRef = useRef<any>(null);
   const modalSignatureRef = useRef<any>(null);
   const modalFormRef = useRef<any>(null);
+  const darkSignatureRef = useRef<any>(null);
+  const lightSignatureRef = useRef<any>(null);
 
   const [signing, setSigning] = useState(false);
   const [modalSigning, setModalSigning] = useState(false);
   const [signaturePreview, setSignaturePreview] = useState("");
+  const [darkPreview, setDarkPreview] = useState("");
+  const [lightPreview, setLightPreview] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalKey, setModalKey] = useState(0);
 
@@ -103,25 +107,102 @@ export const Signature = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Light mode (exported preview)"
+        description="Default pad, no penColor set. The exported image is black ink on a transparent background — the first preview sits on white, the second on a checkerboard so the transparency is visible."
+      >
+        <div className="w-full max-w-md">
+          <div className="h-[280px]">
+            <SignatureImpl
+              id="signature-light"
+              ref={lightSignatureRef}
+              signing={false}
+              label="Signature"
+              optional
+              signatureClear={true}
+              onChange={() => {}}
+              onSubmit={(_, dataURL) => setLightPreview(dataURL ?? "")}
+            />
+          </div>
+          <Button
+            className="mt-3"
+            size="small"
+            text="Submit"
+            type="normal"
+            onClick={() => lightSignatureRef.current?.handleSubmit()}
+          />
+          {lightPreview && (
+            <div className="mt-3 flex flex-wrap gap-3">
+              <div className="rounded bg-white p-2">
+                <p className="text-sm font-medium text-gray-700 mb-1">
+                  Exported preview (on white)
+                </p>
+                <img
+                  src={lightPreview}
+                  alt="light mode signature preview on white"
+                  className="border rounded max-h-24"
+                />
+              </div>
+              <div className="rounded bg-white p-2">
+                <p className="text-sm font-medium text-gray-700 mb-1">
+                  Exported preview (on checkerboard)
+                </p>
+                <img
+                  src={lightPreview}
+                  alt="light mode signature preview on checkerboard"
+                  className="border rounded max-h-24"
+                  style={{
+                    backgroundColor: "#ffffff",
+                    backgroundImage:
+                      "linear-gradient(45deg, #d1d5db 25%, transparent 25%, transparent 75%, #d1d5db 75%), linear-gradient(45deg, #d1d5db 25%, transparent 25%, transparent 75%, #d1d5db 75%)",
+                    backgroundSize: "16px 16px",
+                    backgroundPosition: "0 0, 8px 8px",
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </StorySection>
+
       <StorySection
         title="Dark mode"
-        description="darkMode=true switches label colours to suit a dark background."
+        description="darkMode=true switches label colours and gives the pad a dark surface. With no penColor set, the pen defaults to white so the stroke is visible. The exported image is black ink on transparent (the white on-screen pen is recoloured on export) — the preview below sits on white to prove the saved signature reads correctly off a dark pad."
         dark
       >
         <div className="w-full max-w-md">
           <div className="h-[280px]">
             <SignatureImpl
               id="signature-dark"
+              ref={darkSignatureRef}
               signing={false}
               label="Signature"
               optional
               darkMode={true}
-              penColor="white"
               signatureClear={true}
               onChange={() => {}}
-              onSubmit={() => {}}
+              onSubmit={(_, dataURL) => setDarkPreview(dataURL ?? "")}
             />
           </div>
+          <Button
+            className="mt-3"
+            size="small"
+            text="Submit"
+            type="normal"
+            onClick={() => darkSignatureRef.current?.handleSubmit()}
+          />
+          {darkPreview && (
+            <div className="mt-3 rounded bg-white p-2">
+              <p className="text-sm font-medium text-gray-700 mb-1">
+                Exported preview (on white)
+              </p>
+              <img
+                src={darkPreview}
+                alt="dark mode signature preview"
+                className="border rounded max-h-24"
+              />
+            </div>
+          )}
         </div>
       </StorySection>
 

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

@@ -6,7 +6,6 @@ import { StorySection } from "../../storyUtils";
 const meta = { title: "Input/TextInput" };
 export default meta;
 
-
 export const TextInput = () => {
   const refEmail = useRef<any>(null);
   const refPassword = useRef<any>(null);
@@ -15,7 +14,6 @@ export const TextInput = () => {
   const refCap = useRef<any>(null);
   const refSuggest = useRef<any>(null);
   const refRegex = useRef<any>(null);
-
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [xsValue, setXsValue] = useState("");
@@ -24,6 +22,7 @@ export const TextInput = () => {
   const [capText, setCapText] = useState("");
   const [suggestText, setSuggestText] = useState("");
   const [regexText, setRegexText] = useState("");
+  const [barcodeText, setBarcodeText] = useState("");
 
   return (
     <>
@@ -51,7 +50,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="Extra small (xs)"
         description="size='xs' looks 12px everywhere. On a phone it keeps 16px text and draws the field at 75%, so iOS Safari does not zoom when it is focused; from sm up it is a plain 12px field. enterKeyHint='done' labels the phone keyboard's enter key, and onKeyDown handles Enter here."
@@ -100,7 +98,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="Number (with min/max)"
         description="type='number' prevents scroll-to-change. minNumber and maxNumber enforce range on submit."
@@ -126,7 +123,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="Mobile (with country picker)"
         description="type='mobile' with mobilePicker shows a country flag/code selector. mobileCountryEditable allows changing the country."
@@ -151,7 +147,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="Capitalize Text"
         description="capitalize=true forces all input to uppercase as the user types."
@@ -170,7 +165,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="With Suggestions"
         description="strSuggestions provides a dropdown of matching options as the user types."
@@ -195,7 +189,6 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
       <StorySection
         title="Custom Regex Pattern + Form Validation"
         description="pattern accepts a regex string. customErrMsg overrides the default error message. Call handleSubmit() via ref to trigger validation."
@@ -221,7 +214,33 @@ export const TextInput = () => {
           />
         </div>
       </StorySection>
-
+      <StorySection
+        title="Barcode Scan"
+        description="barcodeEnabled adds a viewfinder scan button to the top-right that opens the camera and prefills the value from a scanned barcode/QR. Uses the browser BarcodeDetector where available (Chrome / Android) and a ZXing-wasm polyfill elsewhere (e.g. iOS Safari). The camera needs https (or localhost)."
+      >
+        <div className="w-full max-w-sm space-y-6">
+          <TextInputImpl
+            id="assetTag"
+            value={barcodeText}
+            type="text"
+            label="Asset Tag"
+            placeholder="Enter or scan asset tag"
+            subLabel="Scan the barcode on the asset, or type it in"
+            barcodeEnabled
+            onChange={(e) => setBarcodeText(e.target.value)}
+          />
+          <TextInputImpl
+            id="assetTagMobile"
+            value={barcodeText}
+            type="text"
+            label="Asset Tag (mobile layout)"
+            placeholder="Enter or scan asset tag"
+            barcodeEnabled
+            mobileView
+            onChange={(e) => setBarcodeText(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."
@@ -249,4 +268,4 @@ export const TextInput = () => {
       </StorySection>
     </>
   );
-}
+};

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

@@ -116,6 +116,8 @@ const navigation = [
 | `draggable`                    | `boolean`                                                  | `false` | Enables drag-to-reorder on nav items. Requires `handleChangeNavigation`.                                    |
 | `handleChangeNavigation`       | `(value: Navigation[]) => void`                            | —       | Called with the updated nav array after each drag move. Required when `draggable` is `true`.                |
 | `handleDropEnd`                | `() => void`                                               | —       | Called when a drag interaction ends. Required when `draggable` is `true`.                                   |
+| `handleMoveItem`               | `(move: BarMove) => void`                                  | —       | Turns on moving rows in a tree (rows with `parentId`) by dragging — see Moving rows in a tree below.        |
+| `canDropItem`                  | `(dragId, targetId, position) => boolean`                  | —       | Refuses a drop target before the drop, so a row that cannot hold children never lights up as one.           |
 | `handleBarsOnClick`            | `(id: string) => void`                                     | —       | Called with the nav item `id` when clicked. Use instead of href navigation for single-page apps.            |
 | `handleToggleCollapse`         | `() => void`                                               | —       | Called when the collapse arrow is clicked. Required when `transition` is set.                               |
 | `transition`                   | `{ headerVisible?: boolean; collapse?: boolean }`          | —       | Controls sidebar collapse and header visibility — see Transition below.                                     |
@@ -132,6 +134,43 @@ const navigation = [
 | `persistKey`                   | `string`                                                   | —       | localStorage key that remembers open groups and pages. A new key loads that key's stored state.             |
 | `defaultExpandedIds`           | `string[]`                                                 | —       | Groups (by `groupId`) and pages (by `id`) open when nothing is stored for them                              |
 
+##### Moving rows in a tree
+
+With `handleMoveItem` set and rows nested through `parentId`, each row can be dragged:
+
+- **middle of a row** — file the dragged row **inside** it, as its last child
+- **top / bottom edge** — place it **before / after** that row, under the same parent (how a row moves between parents)
+- holding a row over a closed parent opens it after a moment
+- on touch, **hold a row** to pick it up, then drag; a quick swipe still scrolls
+- a list with nothing nested yet still works — passing `handleMoveItem` lays the rows out as a tree, so the first row can be dropped inside another
+- a row can never be dropped inside itself or one of its own children
+
+LeftNav never rearranges the tree itself. It reports one `BarMove` and the caller saves it and passes the new `navigation` back:
+
+```tsx
+import { BarMove, LeftNav } from "blixify-ui-web";
+
+<LeftNav
+  navigation={rows}
+  handleMoveItem={(move: BarMove) => handleSaveMove(move)}
+  // INFO: e.g. only a page may hold others, and workspaces stay put
+  canDropItem={(dragId, targetId, position) =>
+    position !== "inside" || isPage(targetId)
+  }
+  {...otherProps}
+/>
+```
+
+| `BarMove` field | Meaning                                                              |
+| --------------- | -------------------------------------------------------------------- |
+| `id`            | the dragged row                                                      |
+| `parentId`      | the row it now sits under, or `null` for the top level               |
+| `beforeId`      | the sibling it now sits in front of, or `null` for the end           |
+| `targetId`      | the row it was dropped on                                            |
+| `position`      | `"before"`, `"inside"` or `"after"`                                  |
+
+Moving stays off while the list is filtered, collapsed or horizontal. Without `handleMoveItem`, lists keep `draggable` for reordering. A caller that moves rows nests groups as rows, since the tree layout draws no `groupId` headers.
+
 ##### Navigation
 
 | Name      | Type     | Description                                                                                                |

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -1,13 +1,13 @@
 import { FolderIcon, HomeIcon, UsersIcon } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { LeftNav as LeftNavImpl } from ".";
+import { LeftNav as LeftNavImpl, Navigation } from ".";
+import { BarMove } from "../bars";
 import { StorySection } from "../../storyUtils";
 import Logo from "../../../assets/logo.png";
 
 const meta = { title: "Navigation/LeftNav" };
 export default meta;
 
-
 const baseNavigation = [
   { id: "dashboard", name: "Dashboard", href: "/dashboard", icon: HomeIcon },
   {
@@ -55,26 +55,109 @@ const groupedNavigation = [
   },
 ];
 
-
 const manyNavigation = [
-  { id: "home", name: "Home", href: "/home", icon: HomeIcon, description: "Dashboard overview and recent activity" },
-  { id: "journals", name: "Journals", href: "/journals", icon: FolderIcon, description: "Peer reviewed medical journal volumes" },
-  { id: "vol2", name: "Journal Volume 2", href: "/j/2", icon: FolderIcon, parentId: "journals" },
-  { id: "vol3", name: "Journal Volume 3", href: "/j/3", icon: FolderIcon, parentId: "journals" },
-  { id: "charts", name: "Charts", href: "/charts", icon: FolderIcon, description: "Analytics and research dashboards" },
-  { id: "archive", name: "Archive", href: "/archive", icon: FolderIcon, description: "Institutional records and strategic memory" },
-  { id: "governance", name: "Governance", href: "/gov", icon: FolderIcon, description: "Policies, SOPs and quality documentation" },
-  { id: "theses", name: "Theses", href: "/theses", icon: FolderIcon, description: "Postgraduate and capstone scholarship" },
-  { id: "policies", name: "Policies", href: "/policies", icon: FolderIcon, description: "Reimbursement claims and expense rules" },
-  { id: "settings", name: "Settings", href: "/settings", icon: UsersIcon, description: "Workspace preferences and member access" },
+  {
+    id: "home",
+    name: "Home",
+    href: "/home",
+    icon: HomeIcon,
+    description: "Dashboard overview and recent activity",
+  },
+  {
+    id: "journals",
+    name: "Journals",
+    href: "/journals",
+    icon: FolderIcon,
+    description: "Peer reviewed medical journal volumes",
+  },
+  {
+    id: "vol2",
+    name: "Journal Volume 2",
+    href: "/j/2",
+    icon: FolderIcon,
+    parentId: "journals",
+  },
+  {
+    id: "vol3",
+    name: "Journal Volume 3",
+    href: "/j/3",
+    icon: FolderIcon,
+    parentId: "journals",
+  },
+  {
+    id: "charts",
+    name: "Charts",
+    href: "/charts",
+    icon: FolderIcon,
+    description: "Analytics and research dashboards",
+  },
+  {
+    id: "archive",
+    name: "Archive",
+    href: "/archive",
+    icon: FolderIcon,
+    description: "Institutional records and strategic memory",
+  },
+  {
+    id: "governance",
+    name: "Governance",
+    href: "/gov",
+    icon: FolderIcon,
+    description: "Policies, SOPs and quality documentation",
+  },
+  {
+    id: "theses",
+    name: "Theses",
+    href: "/theses",
+    icon: FolderIcon,
+    description: "Postgraduate and capstone scholarship",
+  },
+  {
+    id: "policies",
+    name: "Policies",
+    href: "/policies",
+    icon: FolderIcon,
+    description: "Reimbursement claims and expense rules",
+  },
+  {
+    id: "settings",
+    name: "Settings",
+    href: "/settings",
+    icon: UsersIcon,
+    description: "Workspace preferences and member access",
+  },
 ];
 
 const twoGroupNavigation = [
   { id: "home", name: "Home", href: "/home", icon: HomeIcon },
-  { id: "eng", name: "Engineering", href: "/t/eng", icon: UsersIcon, groupId: "People" },
-  { id: "hr", name: "Human Resources", href: "/t/hr", icon: UsersIcon, groupId: "People" },
-  { id: "vol2", name: "Volume 2", href: "/j/2", icon: FolderIcon, groupId: "Journals" },
-  { id: "vol3", name: "Volume 3", href: "/j/3", icon: FolderIcon, groupId: "Journals" },
+  {
+    id: "eng",
+    name: "Engineering",
+    href: "/t/eng",
+    icon: UsersIcon,
+    groupId: "People",
+  },
+  {
+    id: "hr",
+    name: "Human Resources",
+    href: "/t/hr",
+    icon: UsersIcon,
+    groupId: "People",
+  },
+  {
+    id: "vol2",
+    name: "Volume 2",
+    href: "/j/2",
+    icon: FolderIcon,
+    groupId: "Journals",
+  },
+  {
+    id: "vol3",
+    name: "Volume 3",
+    href: "/j/3",
+    icon: FolderIcon,
+    groupId: "Journals",
+  },
 ];
 
 // INFO: the shape Space builds — workspace rows, group rows under them, then
@@ -82,14 +165,55 @@ const twoGroupNavigation = [
 // across workspaces on purpose.
 const workspaceNavigation = [
   { id: "ws-sales", name: "Sales", href: "/ws/sales", icon: UsersIcon },
-  { id: "sales-reports", name: "Reports", href: "/g/sales-reports", icon: FolderIcon, parentId: "ws-sales" },
-  { id: "sales-charts", name: "Charts", href: "/s/sales-charts", icon: FolderIcon, parentId: "sales-reports" },
-  { id: "sales-q3", name: "Q3 Review", href: "/s/sales-q3", icon: FolderIcon, parentId: "sales-charts" },
-  { id: "ws-marketing", name: "Marketing", href: "/ws/marketing", icon: UsersIcon },
-  { id: "marketing-reports", name: "Reports", href: "/g/marketing-reports", icon: FolderIcon, parentId: "ws-marketing" },
-  { id: "marketing-charts", name: "Charts", href: "/s/marketing-charts", icon: FolderIcon, parentId: "marketing-reports" },
+  {
+    id: "sales-reports",
+    name: "Reports",
+    href: "/g/sales-reports",
+    icon: FolderIcon,
+    parentId: "ws-sales",
+  },
+  {
+    id: "sales-charts",
+    name: "Charts",
+    href: "/s/sales-charts",
+    icon: FolderIcon,
+    parentId: "sales-reports",
+  },
+  {
+    id: "sales-q3",
+    name: "Q3 Review",
+    href: "/s/sales-q3",
+    icon: FolderIcon,
+    parentId: "sales-charts",
+  },
+  {
+    id: "ws-marketing",
+    name: "Marketing",
+    href: "/ws/marketing",
+    icon: UsersIcon,
+  },
+  {
+    id: "marketing-reports",
+    name: "Reports",
+    href: "/g/marketing-reports",
+    icon: FolderIcon,
+    parentId: "ws-marketing",
+  },
+  {
+    id: "marketing-charts",
+    name: "Charts",
+    href: "/s/marketing-charts",
+    icon: FolderIcon,
+    parentId: "marketing-reports",
+  },
   { id: "ws-ops", name: "Operations", href: "/ws/ops", icon: UsersIcon },
-  { id: "ops-charts", name: "Charts", href: "/s/ops-charts", icon: FolderIcon, parentId: "ws-ops" },
+  {
+    id: "ops-charts",
+    name: "Charts",
+    href: "/s/ops-charts",
+    icon: FolderIcon,
+    parentId: "ws-ops",
+  },
 ];
 
 const renderLogo = (collapse?: boolean) => (
@@ -112,6 +236,30 @@ const renderHeader = () => (
   <div className="px-4 text-sm font-medium text-gray-700">Page Title</div>
 );
 
+/**
+ * INFO: what a caller does with a BarMove — the row takes its new parent and
+ * is put in front of `beforeId`, or after the last of its new siblings. The
+ * story keeps it in state; an app saves it and reloads its navigation.
+ */
+const handleApplyMove = (rows: Navigation[], move: BarMove): Navigation[] => {
+  const moving = rows.find((each) => each.id === move.id);
+  if (!moving) return rows;
+  const moved = { ...moving, parentId: move.parentId };
+  const rest = rows.filter((each) => each.id !== move.id);
+  let index = move.beforeId
+    ? rest.findIndex((each) => each.id === move.beforeId)
+    : -1;
+  if (index < 0) {
+    const siblings = rest.filter(
+      (each) => (each.parentId ?? null) === move.parentId,
+    );
+    const last = siblings[siblings.length - 1];
+    index = last ? rest.indexOf(last) + 1 : rest.length;
+  }
+  rest.splice(index, 0, moved);
+  return rest;
+};
+
 export const LeftNav = () => {
   const [mobile, setMobile] = useState(false);
   const [selectedId, setSelectedId] = useState("dashboard");
@@ -125,6 +273,8 @@ export const LeftNav = () => {
   const [groupedSelectedId, setGroupedSelectedId] = useState("engineering");
   // INFO: starts three levels down, so the story shows its branch open on mount
   const [workspaceSelectedId, setWorkspaceSelectedId] = useState("sales-q3");
+  const [movableNav, setMovableNav] = useState(workspaceNavigation);
+  const [lastMove, setLastMove] = useState("");
 
   return (
     <>
@@ -175,12 +325,47 @@ export const LeftNav = () => {
           <LeftNavImpl
             selectedId={groupedSelectedId}
             navigation={[
-              { id: "dashboard", name: "Dashboard", href: "/dashboard", icon: HomeIcon },
-              { id: "teams", name: "Teams", href: "/teams", icon: UsersIcon, groupId: "People" },
-              { id: "engineering", name: "Engineering", href: "/teams/engineering", icon: UsersIcon, groupId: "People" },
-              { id: "hr", name: "Human Resources", href: "/teams/hr", icon: UsersIcon, groupId: "People" },
-              { id: "reports", name: "Reports", href: "/reports", icon: FolderIcon, groupId: "Site data" },
-              { id: "exports", name: "Exports", href: "/exports", icon: FolderIcon, groupId: "Site data" },
+              {
+                id: "dashboard",
+                name: "Dashboard",
+                href: "/dashboard",
+                icon: HomeIcon,
+              },
+              {
+                id: "teams",
+                name: "Teams",
+                href: "/teams",
+                icon: UsersIcon,
+                groupId: "People",
+              },
+              {
+                id: "engineering",
+                name: "Engineering",
+                href: "/teams/engineering",
+                icon: UsersIcon,
+                groupId: "People",
+              },
+              {
+                id: "hr",
+                name: "Human Resources",
+                href: "/teams/hr",
+                icon: UsersIcon,
+                groupId: "People",
+              },
+              {
+                id: "reports",
+                name: "Reports",
+                href: "/reports",
+                icon: FolderIcon,
+                groupId: "Site data",
+              },
+              {
+                id: "exports",
+                name: "Exports",
+                href: "/exports",
+                icon: FolderIcon,
+                groupId: "Site data",
+              },
             ]}
             leftNavMobileMenu={false}
             handleBarsOnClick={(id) => setGroupedSelectedId(id)}
@@ -336,6 +521,42 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Move In The Tree"
+        description="Drag a page by its row. Drop on the middle of a page to file it inside, or on its top or bottom edge to place it before or after that page, under the same parent — that is how a page moves between parents. Workspaces only take a page inside them, and cannot be dragged themselves (canDropItem). Hold a page over a closed row to open it. On a phone, hold a page to pick it up, then drag. A page can never go inside itself or its own sub pages. LeftNav only reports each move; the story applies it to its own state, the way an app saves it and reloads."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={workspaceSelectedId}
+            navigation={movableNav}
+            leftNavMobileMenu={false}
+            compactMode={true}
+            defaultExpandedIds={["ws-sales", "ws-marketing"]}
+            handleBarsOnClick={(id) => setWorkspaceSelectedId(id)}
+            handleMoveItem={(move) => {
+              setMovableNav((rows) => handleApplyMove(rows, move));
+              setLastMove(
+                `${move.id} → ${move.position} ${move.targetId} (parent ${move.parentId ?? "top level"})`,
+              );
+            }}
+            canDropItem={(dragId, targetId, position) =>
+              !dragId.startsWith("ws-") &&
+              (!targetId.startsWith("ws-") || position === "inside")
+            }
+            handleToggleLeftNavMobileMenu={() => {}}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-sm text-gray-500">
+                {lastMove
+                  ? `Last move: ${lastMove}`
+                  : "Drag a page in the sidebar."}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Persistent Expand State"
         description="persistKey names a localStorage entry that remembers which groups and pages are open. Expand a group, reload the page, and it is still open — without it expansion lasts one mount only, so anything opened is shut again by the next navigation. Groups are keyed by groupId and pages by id. Omit persistKey and no storage is touched at all."
@@ -403,4 +624,4 @@ export const LeftNav = () => {
       </StorySection>
     </>
   );
-}
+};

package/package.json

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