blixify-ui-web-mcp 0.1.48 → 0.1.50

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

@@ -1013,6 +1013,7 @@ const devSettings = parseWorkspaceSettings(
 | `dbUserToken`         | `string`                                                      | Per-user auth token (pass `""` if not used)               |
 | `schemaEndpoint`      | `string`                                                      | Schema API endpoint URL                                   |
 | `schemaEndpointToken` | `string`                                                      | Optional token for schema endpoint                        |
+| `schemaEndpointUserToken` | `string`                                                  | Optional signed-in user token sent with schema reads      |
 | `schemaReference`     | `{ [key: string]: DataStructure[] }`                          | Hardcoded schema reference (bypasses schema endpoint)     |
 | `imageEndpoint`       | `string`                                                      | Asset retrieval base URL                                  |
 | `uploadEndpoint`      | `string`                                                      | Upload endpoint (required when `imageEndpoint` is custom) |
@@ -1127,7 +1128,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 | `sort`                        | `Sort`                                                                      | Default sort applied to list queries                                                                                                                                                                                                                                                                                  |
 | `pageIndex`                   | `number`                                                                    | Initial page index                                                                                                                                                                                                                                                                                                    |
 | `viewId`                      | `string`                                                                    | Active view type: `"general"`, `"calendar"`, `"grid"`, `"list"`, `"feeds"`, `"kanban"`, etc.                                                                                                                                                                                                                          |
-| `idField`                     | `string`                                                                    | DataStructure column ID whose value becomes the new record's ID on creation                                                                                                                                                                                                                                           |
+| `idField`                     | `string`                                                                    | DataStructure column ID whose value becomes the new record's ID on creation. A new record is saved as an upsert on that ID; when the column is also the schema's `unique` field it is saved as a create instead, so an existing value is refused rather than overwritten                                                                                                                                                                                                                                           |
 | `extendedTabs`                | `ExtendedTabs[]`                                                            | Additional tabs rendered alongside the main view — see Extended Tab below                                                                                                                                                                                                                                             |
 | `additionalQuery`             | `AdditionalQuery[]`                                                         | Filter/search controls rendered above the list — see Additional Query below                                                                                                                                                                                                                                           |
 | `darkMode`                    | `boolean`                                                                   | Applies dark colour scheme to the organise bar                                                                                                                                                                                                                                                                        |

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

@@ -31,7 +31,7 @@ You can still pass `organise` for everything else (`breadcrumbType`, `tabAlign`,
 `DevSettings`, because it maps to what a workspace record actually stores. Some
 app-level values have no place on a workspace and so cannot travel that way:
 
-- `schemaEndpoint` / `schemaEndpointToken` — schema editing
+- `schemaEndpoint` / `schemaEndpointToken` — schema editing; `schemaEndpointUserToken` sends the signed-in user's token with schema reads
 - `roleOptions` — role pickers in forms
 - `currentUser` — activity log attribution
 

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

@@ -97,6 +97,39 @@ const navigation = [
 />;
 ```
 
+##### Icon rail
+
+A narrow column of icons left of the sidebar — the two-level layout of tools like monday.com. The rail switches between whole areas of the app (a workspace tree, chat, agents, notifications); the sidebar beside it navigates inside the area that is open. Without `railItems` nothing changes.
+
+```jsx
+import { BellIcon, ChatBubbleLeftRightIcon, Cog6ToothIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+
+const [railId, setRailId] = useState("workspace");
+
+<LeftNav
+  railItems={[
+    { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+    { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon, href: "/chat" },
+    { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+  ]}
+  railFooterItems={[{ id: "settings", name: "Settings", icon: Cog6ToothIcon }]}
+  selectedRailId={railId}
+  handleRailOnClick={(id) => setRailId(id)}
+  {...otherProps}
+/>;
+```
+
+| Name               | Type                   | Description                                                                                      |
+| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------ |
+| `railItems`        | `RailItem[]`           | Icons at the top of the rail. Turns the rail on.                                                 |
+| `railFooterItems`  | `RailItem[]`           | Icons pinned to the bottom of the rail, for settings-type entries.                               |
+| `selectedRailId`   | `string`               | The `id` of the open area, highlighted.                                                          |
+| `handleRailOnClick`| `(id: string) => void` | Called with the item `id` on every click, link or not.                                           |
+
+`RailItem` is `{ id, name, icon, href?, badge? }`. With `href` the item is a link through the same `linkType` / `custom` as the sidebar; without it the item only reports `handleRailOnClick`. `badge` shows a count on the icon — `0`, empty or absent hides it, and a number over 99 reads `99+`.
+
+Below `lg` the rail moves into the mobile drawer as a row of icons above the sidebar's list.
+
 ##### Required props
 
 | Name                            | Type              | Description                                        |

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

@@ -1,11 +1,16 @@
 import {
+  BellIcon,
+  ChatBubbleLeftRightIcon,
+  Cog6ToothIcon,
+  CpuChipIcon,
   FolderIcon,
   FunnelIcon,
   HomeIcon,
+  Squares2X2Icon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { LeftNav as LeftNavImpl, Navigation } from ".";
+import { LeftNav as LeftNavImpl, Navigation, RailItem } from ".";
 import { BarMove } from "../bars";
 import { StorySection } from "../../storyUtils";
 import Logo from "../../../assets/logo.png";
@@ -221,6 +226,74 @@ const workspaceNavigation = [
   },
 ];
 
+// INFO: the rail switches between whole areas; the sidebar beside it lists the
+// pages inside the area that is open
+const railItems: RailItem[] = [
+  { id: "workspace", name: "Workspace", icon: Squares2X2Icon },
+  { id: "chat", name: "Chat", icon: ChatBubbleLeftRightIcon },
+  { id: "agents", name: "Agents", icon: CpuChipIcon },
+  { id: "notifications", name: "Alerts", icon: BellIcon, badge: 9 },
+];
+
+// INFO: each area brings its own sidebar list
+const railNavigation: { [railId: string]: Navigation[] } = {
+  chat: [
+    {
+      id: "chat-new",
+      name: "New chat",
+      href: "/chat",
+      icon: ChatBubbleLeftRightIcon,
+    },
+    {
+      id: "chat-1",
+      name: "Quarterly sales recap",
+      href: "/chat/1",
+      icon: ChatBubbleLeftRightIcon,
+    },
+  ],
+  agents: [
+    {
+      id: "agent-1",
+      name: "Lead qualifier",
+      href: "/agents/1",
+      icon: CpuChipIcon,
+    },
+    {
+      id: "agent-2",
+      name: "Support triage",
+      href: "/agents/2",
+      icon: CpuChipIcon,
+    },
+  ],
+  notifications: [
+    { id: "note-all", name: "All", href: "/alerts", icon: BellIcon },
+    {
+      id: "note-unread",
+      name: "Unread",
+      href: "/alerts/unread",
+      icon: BellIcon,
+    },
+  ],
+  settings: [
+    {
+      id: "set-members",
+      name: "Members",
+      href: "/settings/members",
+      icon: UsersIcon,
+    },
+    {
+      id: "set-workspace",
+      name: "Workspace",
+      href: "/settings/workspace",
+      icon: Cog6ToothIcon,
+    },
+  ],
+};
+
+const railFooterItems: RailItem[] = [
+  { id: "settings", name: "Settings", icon: Cog6ToothIcon },
+];
+
 const renderLogo = (collapse?: boolean) => (
   <div className="flex items-center flex-shrink-0 px-6 cursor-pointer">
     <img
@@ -285,6 +358,8 @@ export const LeftNav = () => {
   // button, so each story needs its own open state for that button to work on
   // a phone
   const [mobileStoryId, setMobileStoryId] = useState("");
+  const [railId, setRailId] = useState("workspace");
+  const [darkRailId, setDarkRailId] = useState("workspace");
 
   const handleMobileMenu = (storyId: string) => ({
     leftNavMobileMenu: mobileStoryId === storyId,
@@ -639,6 +714,63 @@ export const LeftNav = () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Icon Rail"
+        description="railItems adds a narrow column of icons left of the sidebar, the two-level layout of tools like monday.com: the rail switches between whole areas (workspace, chat, agents, alerts), the sidebar beside it navigates inside the open one. selectedRailId highlights the open area, badge shows a count (over 99 reads 99+), and railFooterItems sit at the bottom for settings-type entries. An item with href is a link; without one it only reports handleRailOnClick. Without railItems nothing changes. Below lg the rail moves into the drawer as a row of icons above the list — open the menu at phone width to see it."
+      >
+        <div className="w-full h-96 relative overflow-hidden border rounded-lg">
+          <LeftNavImpl
+            selectedId={workspaceSelectedId}
+            navigation={
+              railId === "workspace"
+                ? workspaceNavigation
+                : (railNavigation[railId] ?? [])
+            }
+            {...handleMobileMenu("story-rail")}
+            compactMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={railId}
+            handleRailOnClick={(id) => setRailId(id)}
+            handleBarsOnClick={(id) => setWorkspaceSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-sm text-gray-500">
+                {`Open area: ${railId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Icon Rail — Dark Mode"
+        description="The rail follows darkMode and navbarBgColor like the sidebar, so the two read as one surface."
+        dark
+      >
+        <div className="w-full h-96 relative overflow-hidden border border-gray-700 rounded-lg">
+          <LeftNavImpl
+            selectedId={selectedId}
+            navigation={navigation}
+            {...handleMobileMenu("story-rail-dark")}
+            darkMode={true}
+            railItems={railItems}
+            railFooterItems={railFooterItems}
+            selectedRailId={darkRailId}
+            handleRailOnClick={(id) => setDarkRailId(id)}
+            handleBarsOnClick={(id) => setSelectedId(id)}
+            renderDashboardLogo={() => renderLogo()}
+            renderDashboardContent={() => (
+              <div className="p-6 text-gray-400 text-sm">
+                {`Open area: ${darkRailId}`}
+              </div>
+            )}
+            renderDashboardHeaderContent={renderHeader}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Transparent"
         description="transparent makes the TOP HEADER BAR see-through, dropping its background, shadow and bottom border so a page can run its own hero or image up under it — the same pair Header carries. mobileOpaque keeps that bar solid below lg, where it holds the hamburger and is the only way back to the nav. The sidebar itself is unaffected. Shown over a gradient page so the effect is visible."

package/package.json

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