blixify-ui-web-mcp 0.1.25 → 0.1.26

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

@@ -0,0 +1,256 @@
+import React, { useState } from "react";
+import { NewGrid as NewGridImpl, NewGridItem } from ".";
+import { StorySection } from "../../storyUtils";
+
+const meta = { title: "Display/New Grid" };
+export default meta;
+
+// INFO: identical sample data to legacy Display/Grid for side-by-side comparison
+const data: NewGridItem[] = [
+  {
+    id: "1",
+    title: "Nike Court Vision",
+    description: "Nike Men's Court Vision Low Next Nature Shoes - Black",
+    tags: ["Sports"],
+    imageUrl: "https://cf.shopee.com.my/file/fef57a9b0d40a0626def6fdc993c442a",
+  },
+  {
+    id: "2",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports", "Promotions"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "3",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports", "Promotions"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "4",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports", "Promotions"],
+    ribbonText: "SALE",
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "5",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "6",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports", "Promotions"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "7",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+  {
+    id: "8",
+    title: "Nike Air Max 2X",
+    description: "Nike Men's Air Max 2X Shoes - White",
+    tags: ["Sports", "Promotions"],
+    imageUrl: "https://cf.shopee.com.my/file/6df4da8ff019bfa08c1bcba4bbe3c983",
+  },
+];
+
+const renderImgRibbon = (id: string) => {
+  if (id === "1" || id === "2") {
+    return (
+      <div className="absolute top-5 -left-9 w-[50%] bg-yellow-500 text-white text-xs font-bold p-2 text-center -rotate-45">
+        <span>WINNER</span>
+      </div>
+    );
+  }
+  return null;
+};
+
+export const NewGrid = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const limit = 5;
+  const cursor = true;
+
+  const handlePagination = (value: string | number) => {
+    if (typeof value === "number") setPageIndex(value);
+    else setPageIndex((prev) => (value === "next" ? prev + 1 : prev - 1));
+  };
+
+  return (
+    <div className="font-sans p-6">
+      <StorySection
+        title="NewGrid — same data as legacy Display/Grid"
+        description="NewGridItem = GridClass. Drop-in swap from <Grid data={d}> to <NewGridImpl data={d}> — modernised card chrome (rounded-2xl, tag chips, shared NewPagination footer)."
+      >
+        <NewGridImpl
+          data={data}
+          limit={limit}
+          loading={false}
+          paginationType="page"
+          size={data.length}
+          pageIndex={pageIndex}
+          handleUpdatePageIndex={handlePagination}
+          renderImgRibbon={renderImgRibbon}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Horizontal scroll pagination"
+        description="Use paginationType='scroll' with horizontalScroll for an infinite grid that auto-loads the next page when the user scrolls to the right edge. Grab-to-pan drag is enabled."
+      >
+        <NewGridImpl
+          data={data}
+          limit={limit}
+          loading={false}
+          paginationType="scroll"
+          cursor={cursor}
+          pageIndex={pageIndex}
+          size={data.length}
+          horizontalScroll
+          handleUpdatePageIndex={handlePagination}
+          renderImgRibbon={renderImgRibbon}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Cursor pagination"
+        description="Use paginationType='cursor' for prev/next navigation with a truthy cursor while more data exists."
+      >
+        <NewGridImpl
+          data={data}
+          limit={limit}
+          loading={false}
+          paginationType="cursor"
+          cursor={cursor}
+          pageIndex={pageIndex}
+          size={data.length}
+          handleUpdatePageIndex={handlePagination}
+          onClickData={(id) => console.log("clicked", id)}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Custom grid item"
+        description="Pass customGridItems with a map of id → ReactElement to replace a specific card with fully custom content. The key must match the item's id in data."
+      >
+        <NewGridImpl
+          data={data.slice(0, 4)}
+          limit={limit}
+          loading={false}
+          customGridItems={{
+            "2": (
+              <div className="flex h-full flex-col items-center justify-center bg-primary-700 p-4 font-thin text-white">
+                <h1 className="text-3xl">Custom item</h1>
+                <p className="mt-6 text-sm">
+                  This card replaces the default grid item for id="2".
+                </p>
+              </div>
+            ),
+          }}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Selected items"
+        description="Pass selectedItemsId and selectedItemClassName to highlight specific cards."
+      >
+        <NewGridImpl
+          data={data.slice(0, 4)}
+          limit={limit}
+          loading={false}
+          selectedItemsId={["1", "3"]}
+          selectedItemClassName="ring-2 ring-primary-500"
+          onClickData={(id) => console.log("clicked", id)}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Dark mode"
+        description="darkMode uses the solid bg-gray-900 surface (same as NewList/NewKanban). Pass darkModeBg to override the default surface."
+        dark
+      >
+        <div className="w-full min-w-0 rounded-lg bg-gray-950 p-6">
+          <NewGridImpl
+            data={data}
+            limit={limit}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            pageIndex={pageIndex}
+            darkMode
+            handleUpdatePageIndex={handlePagination}
+            renderImgRibbon={renderImgRibbon}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Loading state"
+        description="Pass loading=true to show a loading indicator while data is being fetched."
+      >
+        <NewGridImpl data={[]} loading={true} />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Card links open in a new tab"
+        description="Pass newTabUrl alongside onClickData: a plain click navigates in place via onClickData, while cmd/ctrl-click falls through to the underlying link and opens a new tab."
+      >
+        <NewGridImpl
+          data={data.slice(0, 3)}
+          limit={limit}
+          loading={false}
+          newTabUrl="?record="
+          onClickData={(id) => console.log("clicked", id)}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewGrid — Empty and loading keep the pagination footer"
+        description="Loading and empty states render inside the wrapper, so the NewPagination footer stays mounted. Without it an empty page on a non-zero pageIndex would leave no control to navigate back."
+      >
+        <div className="w-full space-y-6">
+          <NewGridImpl
+            data={[]}
+            loading={false}
+            paginationType="page"
+            limit={limit}
+            size={0}
+            pageIndex={2}
+            emptyTitle="No records match the current filter"
+            handleUpdatePageIndex={handlePagination}
+          />
+          <NewGridImpl
+            data={[]}
+            loading={true}
+            paginationType="page"
+            limit={limit}
+            size={0}
+            pageIndex={2}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Comparing with the legacy Grid"
+        description="Open Display/Grid in another tab — same sample data renders. NewGridItem is exactly GridClass — drop-in data swap."
+      >
+        <div className="rounded-lg bg-gray-50 p-6 text-center text-sm text-gray-500">
+          → See <code>Display/Grid</code> in the sidebar for the legacy
+          component.
+        </div>
+      </StorySection>
+    </div>
+  );
+};

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

@@ -6,14 +6,13 @@ import { StorySection } from "../../storyUtils";
 const meta = { title: "Display/New Kanban" };
 export default meta;
 
-
 // INFO: identical sample data to legacy Display/Kanban for side-by-side comparison
 const initialData: NewKanbanCard[] = [
   {
     id: "1",
     title: "DC-1",
     description: "Desc",
-    groupBy: "Open",
+    status: "Open",
     tags: ["Sports", "Promotions"],
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
@@ -22,7 +21,7 @@ const initialData: NewKanbanCard[] = [
     title: "DC-2",
     description:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
-    groupBy: "In progress",
+    status: "In progress",
     tags: ["Sports", "Promotions"],
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
@@ -30,7 +29,7 @@ const initialData: NewKanbanCard[] = [
     id: "3",
     title: "DC-3",
     description: "test",
-    groupBy: "To be tested",
+    status: "To be tested",
     tags: ["Sports", "Promotions"],
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
@@ -38,39 +37,47 @@ const initialData: NewKanbanCard[] = [
     id: "4",
     title: "DC-4",
     description: "test",
-    groupBy: "Reopen",
+    status: "Reopen",
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
   {
     id: "5",
     title: "DC-5",
     description: "test",
-    groupBy: "Reopen",
+    status: "Reopen",
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
   {
     id: "6",
     title: "DC-6",
     description: "test",
-    groupBy: "Open",
+    status: "Open",
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
   {
     id: "7",
     title: "DC-7",
     description: "test",
-    groupBy: "Open",
+    status: "Open",
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
   {
     id: "8",
     title: "DC-8",
     description: "test",
-    groupBy: "Open",
+    status: "Open",
+    createdAt: dayjs("12/24/2020").toDate(),
+  } as any, // INFO: no status, so it lands in Unassigned
+  {
+    id: "9",
+    title: "DC-9",
+    description: "No status yet",
     createdAt: dayjs("12/24/2020").toDate(),
   } as any,
 ];
 
+const STATUSES = ["Open", "In progress", "To be tested", "Reopen"];
+
 export const NewKanban = () => {
   // INFO: stateful demo for drag-and-drop — onUpdateData mutates the local copy
   // so dropping a card visually moves it. Matches legacy <Kanban onUpdateData>.
@@ -78,54 +85,105 @@ export const NewKanban = () => {
   const handleUpdate = (cardId: string, _from: string, toCol: string) => {
     setData((prev) =>
       prev.map((c) =>
-        c.id === cardId ? ({ ...c, groupBy: toCol } as any) : c,
+        c.id === cardId
+          ? ({
+              ...c,
+              status: toCol || undefined,
+            } as any)
+          : c,
       ),
     );
   };
 
   return (
-  <div className="font-sans p-6">
-    <StorySection
-      title="NewKanban — same data as legacy Display/Kanban"
-      description="NewKanbanCard = GridClass. Pass flat GridClass[] data + groupBy directly — drop-in swap from <Kanban data={d} groupBy={['groupBy']}> to <NewKanbanImpl data={d} groupBy={['groupBy']}>."
-    >
-      <NewKanbanImpl data={data} groupBy={["groupBy"]} />
-    </StorySection>
+    <div className="font-sans p-6">
+      <StorySection
+        title="NewKanban — same data as legacy Display/Kanban"
+        description="Same props as legacy <Kanban>: groupId is the field to group by, groupBy lists the column values in order, and nullColumn always shows Unassigned for cards with no value."
+      >
+        <NewKanbanImpl
+          data={data}
+          groupId="status"
+          groupBy={STATUSES}
+          nullColumn
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewKanban — Drag and drop (desktop)"
+        description="draggable=true + onUpdateData enables HTML5 drag between columns. Drop a card on another column to move it. Column highlights when a draggable card hovers over it."
+      >
+        <NewKanbanImpl
+          data={data}
+          groupId="status"
+          groupBy={STATUSES}
+          nullColumn
+          draggable
+          onUpdateData={handleUpdate}
+        />
+      </StorySection>
+
+      <StorySection
+        title="NewKanban — Mobile (tab switcher) + touch drag"
+        description="One column at a time. Tabs replace horizontal scroll. With draggable=true, long-press a card and drag onto a tab button to move it to that column. The active tab also switches automatically."
+      >
+        <NewKanbanImpl
+          data={data}
+          groupId="status"
+          groupBy={STATUSES}
+          nullColumn
+          mobileView
+          draggable
+          onUpdateData={handleUpdate}
+          onAddCard={() => {}}
+        />
+      </StorySection>
 
-    <StorySection
-      title="NewKanban — Drag and drop (desktop)"
-      description="draggable=true + onUpdateData enables HTML5 drag between columns. Drop a card on another column to move it. Column highlights when a draggable card hovers over it."
-    >
-      <NewKanbanImpl
-        data={data}
-        groupBy={["groupBy"]}
-        draggable
-        onUpdateData={handleUpdate}
-      />
-    </StorySection>
+      <StorySection
+        title="NewKanban — Dark mode"
+        description="darkMode uses the solid bg-gray-900 surface (same as Grid/List/DetailList) instead of a translucent white overlay. Columns show a subtle border only, so there is no washed-out overlay behind the cards. Pass darkModeBg to override the default surface."
+      >
+        <div className="w-full min-w-0 rounded-lg bg-gray-950 p-6">
+          <NewKanbanImpl
+            data={data}
+            groupId="status"
+            groupBy={STATUSES}
+            nullColumn
+            draggable
+            onUpdateData={handleUpdate}
+            darkMode
+          />
+        </div>
+      </StorySection>
 
-    <StorySection
-      title="NewKanban — Mobile (tab switcher) + touch drag"
-      description="One column at a time. Tabs replace horizontal scroll. With draggable=true, long-press a card and drag onto a tab button to move it to that column. The active tab also switches automatically."
-    >
-      <NewKanbanImpl
-        data={data}
-        groupBy={["groupBy"]}
-        mobileView
-        draggable
-        onUpdateData={handleUpdate}
-        onAddCard={() => {}}
-      />
-    </StorySection>
+      <StorySection
+        title="NewKanban — Dark mode (mobile)"
+        description="Mobile tab switcher in dark mode. Tab bar and count badges use the gray-800/700 palette, cards use bg-gray-900."
+      >
+        <div className="w-full min-w-0 rounded-lg bg-gray-950 p-6">
+          <NewKanbanImpl
+            data={data}
+            groupId="status"
+            groupBy={STATUSES}
+            nullColumn
+            mobileView
+            draggable
+            onUpdateData={handleUpdate}
+            onAddCard={() => {}}
+            darkMode
+          />
+        </div>
+      </StorySection>
 
-    <StorySection
-      title="Comparing with the legacy Kanban"
-      description="Open Display/Kanban in another tab — same sample data renders. NewKanbanCard is exactly GridClass — drop-in data swap. NewKanbanImpl renders the same data with modernised card styling (image strip, tag chips, rounded corners) and a mobile tab switcher instead of horizontal scroll."
-    >
-      <div className="rounded-lg bg-gray-50 p-6 text-center text-sm text-gray-500">
-        → See <code>Display/Kanban</code> in the sidebar for the legacy component.
-      </div>
-    </StorySection>
-  </div>
-);
+      <StorySection
+        title="Comparing with the legacy Kanban"
+        description="Open Display/Kanban in another tab — same sample data renders. NewKanbanCard is exactly GridClass — drop-in data swap. NewKanbanImpl renders the same data with modernised card styling (image strip, tag chips, rounded corners) and a mobile tab switcher instead of horizontal scroll."
+      >
+        <div className="rounded-lg bg-gray-50 p-6 text-center text-sm text-gray-500">
+          → See <code>Display/Kanban</code> in the sidebar for the legacy
+          component.
+        </div>
+      </StorySection>
+    </div>
+  );
 };

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

@@ -82,6 +82,7 @@ const ref = useRef(null);
 | `mobileView`     | `boolean`                                                       | `false`         | Renders a compact inline layout for mobile (label left, value right)                                                                           |
 | `darkMode`       | `boolean`                                                       | `false`         | Applies dark colour scheme to labels                                                                                                           |
 | `className`      | `tailwind class`                                                | —               | Class applied to the outer container                                                                                                           |
+| `size`           | `"xs"`                                                          | —               | Compact input that looks 12px everywhere: on phones it keeps 16px text drawn at 75%, so iOS Safari does not zoom; from `sm` up it is a plain 12px input. Uses important utilities so an app's global date-picker input rule does not override it |
 | `onChange`       | `(id: string, value: Date \| undefined, type?: string) => void` | —               | Called on date selection. `type` is `"start"` or `"end"` in range mode                                                                         |
 | `cellInput`      | `CellInput`                                                     | —               | Refer to Input Utils — enables cell/table editing mode                                                                                         |
 

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

@@ -92,6 +92,7 @@ Async / database search:
 | `infoElement`                | `ReactElement`                                                         | —           | Info element rendered in the label area                                                                                                                                                                                                                                                                                                    |
 | `containerClassName`         | `string`                                                               | —           | Tailwind classes for the outer container                                                                                                                                                                                                                                                                                                   |
 | `selectClassName`            | `string`                                                               | —           | Tailwind classes for the select trigger element                                                                                                                                                                                                                                                                                            |
+| `size`                       | `"xs"`                                                                 | —           | Compact field that looks 12px everywhere: on phones it keeps 16px text and draws the trigger at 75%, so iOS Safari does not zoom on focus; from `sm` up it is a plain 12px field |
 | `dropdownClassName`          | `string`                                                               | —           | Tailwind classes for the dropdown list                                                                                                                                                                                                                                                                                                     |
 | `imageClassName`             | `string`                                                               | —           | Tailwind classes for option images (used with `type="button"`)                                                                                                                                                                                                                                                                             |
 | `onChange`                   | `(value: string \| string[]) => void`                                  | —           | Called with the updated value when selection changes                                                                                                                                                                                                                                                                                       |

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

@@ -54,7 +54,9 @@ const ref = useRef(null);
 | ----------------------- | ------------------ | ---------- | ---------------------------------------------------------------------------- |
 | `id`                    | `string`           | —          | HTML id attribute                                                            |
 | `subLabel`              | `string`           | —          | Secondary label shown below the main label                                   |
-| `size`                  | `string`           | —          | `"small"` (px-3 py-2) or `"mini"` (p-2); default is standard (px-5 py-3)     |
+| `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                        |

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

@@ -18,6 +18,7 @@ export const TextInput = () => {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [xsValue, setXsValue] = useState("");
   const [number, setNumber] = useState("");
   const [mobile, setMobile] = useState("");
   const [capText, setCapText] = useState("");
@@ -51,6 +52,32 @@ 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."
+      >
+        <form
+          className="flex items-center gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+        >
+          <TextInputImpl
+            id="xs-input"
+            value={xsValue}
+            type="text"
+            label=""
+            size="xs"
+            placeholder="View name"
+            enterKeyHint="done"
+            containerClassName="w-32 sm:w-44"
+            onChange={(e) => setXsValue(e.target.value)}
+          />
+          <span className="text-xs text-gray-500">Compact, no iOS zoom</span>
+        </form>
+      </StorySection>
+
       <StorySection
         title="Password (show/hide toggle)"
         description="type='password' renders an eye icon to toggle visibility. Validates 6–30 characters, no spaces."

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

@@ -127,6 +127,10 @@ const navigation = [
 | `dashboardContentClassName`    | `string`                                                   | —       | Tailwind classes applied to the main content `<main>` element                                               |
 | `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                               |
+| `searchable`                   | `boolean`                                                  | `false` | Shows a filter box. Matches are listed flat, each with the path it sits under (e.g. `Sales › Reports`)      |
+| `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                              |
 
 ##### Navigation
 
@@ -137,6 +141,7 @@ const navigation = [
 | `href`    | `string` | URL used when `handleBarsOnClick` is not provided                                                          |
 | `icon`    | `any`    | Heroicon or SVG component rendered beside the label                                                        |
 | `groupId` | `string` | Optional — items sharing the same `groupId` are nested under a collapsible group labelled with that string |
+| `parentId` | `string` | Optional — `id` of the item this one nests under. A row with children shows a chevron and, with nothing stored, opens when it holds `selectedId`. Rows are keyed by `id`, so names may repeat. |
 
 ##### Transition
 

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

@@ -77,6 +77,21 @@ const twoGroupNavigation = [
   { id: "vol3", name: "Volume 3", href: "/j/3", icon: FolderIcon, groupId: "Journals" },
 ];
 
+// INFO: the shape Space builds — workspace rows, group rows under them, then
+// spaces and sub-pages, all through parentId. "Reports" and "Charts" repeat
+// 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: "ws-ops", name: "Operations", href: "/ws/ops", icon: UsersIcon },
+  { id: "ops-charts", name: "Charts", href: "/s/ops-charts", icon: FolderIcon, parentId: "ws-ops" },
+];
+
 const renderLogo = (collapse?: boolean) => (
   <div className="flex items-center flex-shrink-0 px-6 cursor-pointer">
     <img
@@ -108,6 +123,8 @@ export const LeftNav = () => {
   // INFO: starts on an item inside a group, so the story shows the group already
   // open on mount — the case a route change reproduces in a real app
   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");
 
   return (
     <>
@@ -298,6 +315,27 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Workspace Tree"
+        description="Workspaces, groups and pages nested through parentId, in compact mode with search — the shape Blixify Space builds. The selected page (Sales › Reports › Charts › Q3 Review) starts with its whole branch open; other workspaces start closed, and every row with children shows a chevron. 'Reports' and 'Charts' repeat across workspaces: rows are keyed by id, so they never collide. Type 'charts' — each match shows the path it came from — then clear the box and the tree comes back exactly as it was."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={workspaceSelectedId}
+            navigation={workspaceNavigation}
+            leftNavMobileMenu={false}
+            compactMode={true}
+            searchable={true}
+            searchPlaceholder="Filter spaces"
+            handleBarsOnClick={(id) => setWorkspaceSelectedId(id)}
+            handleToggleLeftNavMobileMenu={() => {}}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={renderContent}
+            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."

package/lib/mcp/tools/getBackendComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getBackendComponent.d.ts","sourceRoot":"","sources":["../../../src/mcp/tools/getBackendComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AA6DxB,eAAO,MAAM,uBAAuB;;;;;;;;;;CA6DnC,CAAC"}
+{"version":3,"file":"getBackendComponent.d.ts","sourceRoot":"","sources":["../../../src/mcp/tools/getBackendComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAkExB,eAAO,MAAM,uBAAuB;;;;;;;;;;CA6DnC,CAAC"}