blixify-ui-web-mcp 0.1.38 → 0.1.40

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

@@ -47,9 +47,9 @@ Three schema-level settings shape how a record is laid out. They nest in one fix
 ```
 Tab  (DataStructure.tabId)                ← tab bar across the top of the read + update views
  └─ Section  (DataStructure.groupId)      ← titled card inside the tab; collapsible in the form
-     └─ fields                             ← an object / listObject field renders as a nested
-                                             block or table INSIDE its section — it is a field,
-                                             not a further structural level
+     └─ fields                             ← an object, or a listObject with
+                                             listObjectApplyGroup: true, renders inside
+                                             its section as a block or table
 ```
 
 - Columns with a `tabId` but no `groupId` sit directly under the tab; columns with
@@ -60,6 +60,45 @@ Tab  (DataStructure.tabId)                ← tab bar across the top of the read
 - `organise.groupBy` is different again: it splits the **list** into one table per value
   of a column ("Group By X"), and has nothing to do with `groupId`.
 
+**List-object section grouping** is opt-in on each schema field:
+
+| Attribute | Type | Behavior |
+| --- | --- | --- |
+| `listObjectApplyGroup` | `boolean` (optional) | `true` includes the list object in its `groupId` section in read and update/create views. False or omitted keeps it outside named groups. |
+
+```tsx
+{
+  id: "items",
+  name: "Items",
+  type: "listObject",
+  tabId: "Details",
+  groupId: "Shipping",
+  listObjectApplyGroup: true,
+  listObjectTableView: true,
+  objectData: [
+    { id: "name", name: "Name", type: "string" },
+    { id: "quantity", name: "Quantity", type: "number" },
+  ],
+}
+```
+
+Grouped list objects share the read section's card with ordinary fields. A
+section containing only a list object still shows its group heading. In update
+forms, list objects span all 12 grid columns regardless of list/table mode or
+`rowColumns`; their existing add/edit modal and save behavior are retained.
+
+In grouped read views, list objects with `listObjectApplyGroup` false or omitted
+render once after **all tab sections**, even if they have a `tabId` and `groupId`.
+In update forms, regular ungrouped lists render after the form; `listObjOrder`
+and `listFlexTable` lists remain in the form's default area outside named groups.
+To keep an existing list object inside a named section, explicitly set
+`listObjectApplyGroup: true`. `parseSpaceToDataStructure` preserves the attribute
+when deriving a model from a Space schema.
+
+The **DTW Group Test** story in `dataWrapper.view.stories.tsx` includes a grouped
+Operation Crew table, a grouped Sprayed Plots list, and an ungrouped Operation
+Equipment table for comparison.
+
 **How a tabbed form is dressed** (`tabAlign: "left"`):
 
 - The rail is a numbered `Stepper` (`variant="checklist"`) — the active step is a filled primary block, and a

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

@@ -400,6 +400,44 @@ organise={{ tabAlign: "stepper" }} // renders tabs as a step-by-step wizard
 
 `tabId` and `groupId` can be combined — fields are first split by tab, then grouped within each tab.
 
+#### List objects inside sections
+
+Set `listObjectApplyGroup: true` on a `listObject` schema entry to include it in
+its `groupId` section in read and update/create views:
+
+```tsx
+{
+  id: "items",
+  name: "Items",
+  type: "listObject",
+  tabId: "Details",
+  groupId: "Shipping",
+  listObjectApplyGroup: true,
+  listObjectTableView: true,
+  objectData: [
+    { id: "name", name: "Name", type: "string" },
+    { id: "quantity", name: "Quantity", type: "number" },
+  ],
+}
+```
+
+`listObjectApplyGroup?: boolean` defaults to ungrouped when false or omitted.
+It is independent of `listObjectTableView`: both lists and tables can join a
+section. Grouped list objects share the read section's card and span all columns
+of the update section, regardless of `rowColumns`. Adding and editing rows uses
+the existing modal.
+
+Ungrouped list objects appear after all tab sections in grouped read views,
+even when they have a `tabId` and `groupId`. In update forms, regular ungrouped
+lists appear after the form; ordered (`listObjOrder`) and FlexTable
+(`listFlexTable`) lists remain in the default form area outside named groups.
+Existing schemas must explicitly set `listObjectApplyGroup: true` to place a
+list object inside a named section.
+
+Open **Data / Data Wrapper / View / DTW Group Test** in Storybook to compare
+Operation Crew (grouped table), Sprayed Plots (grouped list), and Operation
+Equipment (ungrouped table), with sample rows provided in the story backend.
+
 ---
 
 ## Usage

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

@@ -7,7 +7,10 @@ import axios from "axios";
 import dayjs from "../../dayjs";
 import { Button } from "../../action/button";
 import { Loading } from "../../display/loading";
-import { DataWrapperTestSchema } from "./dataWrapper.fixtures";
+import {
+  DataWrapperTestSchema,
+  RowAlignmentSchema,
+} from "./dataWrapper.fixtures";
 import { DataTemplateWrapper } from "./index";
 import {
   STORY_API_ENDPOINT,
@@ -114,6 +117,43 @@ export const DataWrapperTest = () => {
 };
 DataWrapperTest.storyName = "DTW Test";
 
+// INFO: a create form whose two-column rows each mix a described field with an
+// undescribed one. Every row's controls must sit on one baseline while the
+// labels sit on another — the gap between them absorbs the difference.
+export const RowAlignment = () => {
+  const mount = useStoryBackend({
+    collections: { "row-alignment": [] },
+    yieldToE2E: true,
+  });
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">Row Alignment</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Two-column create form where some fields carry a description and their
+        row neighbours do not. Controls align per row; labels align per row.
+      </div>
+      <DataTemplateWrapper
+        title="Row Alignment"
+        type="update"
+        id="new"
+        collectionId={"row-alignment"}
+        schema={RowAlignmentSchema}
+        workspace={storyWorkspace()}
+        edit={{ allEditable: true }}
+        bareSettings={{ bareUpdateActionBottom: true }}
+        organise={{ breadcrumbType: "hidden" }}
+        limit={1}
+      />
+    </div>
+  );
+};
+RowAlignment.storyName = "Row Alignment";
+
 // INFO: Story used exclusively by the hide-columns e2e block. Shares the
 // dtw-test-collection alias so the spec's existing API mocks apply, and adds
 // one developer-hidden column to prove users can never toggle it back on.

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

@@ -19,6 +19,7 @@ import {
   CalendarSettings,
   FeedsSettings,
   KanbanSettings,
+  TimelineSettings,
 } from "../dataTemplate/spaceModel";
 import {
   DataWrapperTestSchema,
@@ -64,6 +65,10 @@ const handleBuildChecklistRecord = (index: number) => ({
   date: dayjs()
     .add(index - 15, "day")
     .toISOString(),
+  // INFO: a span a few days after the start so the timeline draws a readable bar
+  endDate: dayjs()
+    .add(index - 15 + (3 + (index % 5)), "day")
+    .toISOString(),
   installerName: STORY_NAMES[(index + 4) % STORY_NAMES.length],
   numberOfModules: 8 + (index % 12),
   typeOfInverter: index % 2 === 0 ? "String Inverter" : "Microinverter",
@@ -119,6 +124,7 @@ export const DataWrapper = () => {
       calendarSettings?: CalendarSettings;
       feedsSettings?: FeedsSettings;
       kanbanSettings?: KanbanSettings;
+      timelineSettings?: TimelineSettings;
     } = {};
 
     if (listLayout === "grid") {
@@ -146,6 +152,20 @@ export const DataWrapper = () => {
         viewSwitch: ["month", "week", "agenda"],
       };
     }
+    if (listLayout === "timeline") {
+      viewSettings.timelineSettings = {
+        title: "clientName",
+        startDate: "date",
+        endDate: "endDate",
+        // INFO: colour bars by inverter type, same grouping the calendar story
+        // uses so the two views read the same data the same way
+        groupId: "typeOfInverter",
+        groupColorMap: {
+          "String Inverter": "blue",
+          Microinverter: "indigo",
+        },
+      };
+    }
     return viewSettings;
   };
 
@@ -179,6 +199,7 @@ export const DataWrapper = () => {
             { id: "scrollList", name: "Scroll Pagination List", href: "#" },
             { id: "grid", name: "Grid View", href: "#" },
             { id: "calendar", name: "Calendar View", href: "#" },
+            { id: "timeline", name: "Timeline View", href: "#" },
             { id: "customList", name: "Custom List View", href: "#" },
           ]}
           onClick={(id) => {
@@ -458,6 +479,34 @@ const DTWGroupTestSchema = [
     groupId: "1. Operation",
     optional: true,
   },
+  {
+    id: "operationCrew",
+    name: "Operation Crew",
+    type: "listObject" as const,
+    tabId: "A. Basic Info",
+    groupId: "1. Operation",
+    listObjectApplyGroup: true,
+    listObjectTableView: true,
+    optional: true,
+    objectData: [
+      { id: "name", name: "Name", type: "string" as const },
+      { id: "role", name: "Role", type: "string" as const },
+    ],
+  },
+  {
+    id: "operationEquipment",
+    name: "Operation Equipment (Ungrouped)",
+    type: "listObject" as const,
+    tabId: "A. Basic Info",
+    groupId: "1. Operation",
+    listObjectApplyGroup: false,
+    listObjectTableView: true,
+    optional: true,
+    objectData: [
+      { id: "name", name: "Equipment", type: "string" as const },
+      { id: "quantity", name: "Quantity", type: "number" as const },
+    ],
+  },
   {
     id: "status",
     name: "Status",
@@ -523,6 +572,19 @@ const DTWGroupTestSchema = [
     groupId: "2. Coverage",
     optional: true,
   },
+  {
+    id: "sprayedPlots",
+    name: "Sprayed Plots",
+    type: "listObject" as const,
+    tabId: "B. Pesticide",
+    groupId: "2. Coverage",
+    listObjectApplyGroup: true,
+    optional: true,
+    objectData: [
+      { id: "plot", name: "Plot", type: "string" as const },
+      { id: "hectares", name: "Hectares", type: "number" as const },
+    ],
+  },
   // Tab C: Flight Metrics
   {
     id: "totalFlight",
@@ -654,6 +716,18 @@ const handleBuildWorkOrderRecord = (index: number) => {
     endDate: start.add(6, "hour").toISOString(),
     totalFlight: 2 + (index % 6),
     totalHours: 3 + (index % 5),
+    operationCrew: [
+      { id: `crew-${index}-1`, name: "Ali", role: "Pilot" },
+      { id: `crew-${index}-2`, name: "Siti", role: "Ground Crew" },
+    ],
+    operationEquipment: [
+      { id: `equipment-${index}-1`, name: "Sprayer Drone", quantity: 1 },
+      { id: `equipment-${index}-2`, name: "Spare Battery", quantity: 3 },
+    ],
+    sprayedPlots: [
+      { id: `plot-${index}-1`, plot: "North Field", hectares: 2.5 },
+      { id: `plot-${index}-2`, plot: "South Field", hectares: 1.8 },
+    ],
   };
 };
 
@@ -680,7 +754,9 @@ export const DTWGroupTest = () => {
       <div className="text-sm font-light mb-4 text-gray-500">
         Multi-tab + multi-group schema demo. List + read view renders sections
         by tabId / groupId; Create / Update / Delete write to the in-memory
-        story backend.
+        story backend. Operation Crew (table) and Sprayed Plots (list) use
+        listObjectApplyGroup to appear inside their sections. Operation
+        Equipment has grouping disabled for comparison.
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
@@ -706,7 +782,7 @@ export const DTWGroupTest = () => {
           sort: { sortId: "startDate", type: "desc" as const },
           breadcrumbType: "button",
           groupRead: "groupId",
-          tabAlign: "left",
+          // tabAlign: "left",
           filterComponentNewRow: true,
           // INFO: removed showExport to hide the ellipsis (⋮) menu
         }}
@@ -1039,6 +1115,135 @@ export const DataWrapperDrawerTest = () => {
 };
 DataWrapperDrawerTest.storyName = "DTW Drawer Test";
 
+// ===================================================================================
+// SECTION: Timeline view — GanttChart-backed date-range view
+// ===================================================================================
+
+// INFO: seeds records that each carry a start (projectStart) and end (projectEnd)
+// spanning a few days, so the timeline draws a readable bar per row. One row is
+// intentionally left without an end date to show that incomplete rows are skipped
+// rather than dropping every bar around them.
+const TimelineStorySchema = [
+  {
+    id: "projectName",
+    name: "Project",
+    type: "string" as const,
+  },
+  {
+    id: "team",
+    name: "Team",
+    type: "list" as const,
+    listSelection: ["Design", "Engineering", "QA"],
+  },
+  {
+    id: "projectStart",
+    name: "Start Date",
+    type: "date" as const,
+  },
+  {
+    id: "projectEnd",
+    name: "End Date",
+    type: "date" as const,
+    optional: true,
+  },
+];
+
+const TIMELINE_TEAMS = ["Design", "Engineering", "QA"];
+
+const handleBuildTimelineRecord = (index: number) => {
+  // INFO: stagger each project's start so the bars cascade down the axis the way
+  // the Velocity-style timeline in the brief does
+  const start = dayjs()
+    .startOf("month")
+    .add(index * 3, "day");
+  // INFO: every 5th row is left open-ended (no projectEnd) to demonstrate the
+  // skip — it must not render a bar, and must not hide the rows after it
+  const isOpenEnded = index % 5 === 4;
+  return {
+    _id: `timeline-${index}`,
+    projectName: `Project ${String.fromCharCode(65 + (index % 26))}${index}`,
+    team: TIMELINE_TEAMS[index % TIMELINE_TEAMS.length],
+    projectStart: start.toISOString(),
+    projectEnd: isOpenEnded
+      ? undefined
+      : start.add(4 + (index % 6), "day").toISOString(),
+  };
+};
+
+export const Timeline = () => {
+  const mount = useStoryBackend({
+    collections: {
+      "dtw-timeline-collection": handleBuildStoryRecords(
+        12,
+        handleBuildTimelineRecord,
+      ),
+    },
+    yieldToE2E: true,
+  });
+  const dataRefreshRef: any = useRef(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">DTW Timeline</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        The timeline view renders each record as a horizontal bar spanning its
+        start and end date, powered by GanttChart. Bars are coloured by team via{" "}
+        <code>timelineSettings.groupColorMap</code>. Rows missing an end date are
+        skipped (every 5th project here is open-ended), and clicking a bar
+        navigates to that record. Backed by 12 in-memory records — no dev server
+        needed.
+      </div>
+      <DataTemplateWrapper
+        ref={dataRefreshRef}
+        title="Projects"
+        type={viewType}
+        id={selectedId}
+        collectionId={"dtw-timeline-collection"}
+        schema={TimelineStorySchema}
+        workspace={storyWorkspace()}
+        edit={{ allEditable: true }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareOffline: false,
+        }}
+        organise={{
+          sort: { sortId: "projectStart", type: "asc" as const },
+          breadcrumbType: "button",
+        }}
+        handleNavigate={handleNavigate}
+        viewSettings={{
+          timelineSettings: {
+            title: "projectName",
+            startDate: "projectStart",
+            endDate: "projectEnd",
+            // INFO: fixed colour per team so the same team is always the same
+            // colour across refetches, matching the calendar's grouping behaviour
+            groupId: "team",
+            groupColorMap: {
+              Design: "violet",
+              Engineering: "blue",
+              QA: "green",
+            },
+          },
+        }}
+        limit={50}
+      />
+    </div>
+  );
+};
+Timeline.storyName = "DTW Timeline";
+
 // ===================================================================================
 // SECTION: Offline demo — DTW with no backend required
 // ===================================================================================

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

@@ -16,3 +16,9 @@ Sectioned card board. Desktop: horizontal columns. Mobile: tab switcher between
 ## Phone view
 
 `mobileView` swaps the column row for a tab rail with one column visible. The first column is selected as soon as columns exist (data usually arrives after the first render). `className` styles the desktop column row only — the stacked phone layout ignores it, so a `flex` / `inline-flex` passed for the desktop row cannot turn the phone view into a row. Rail, count badges, hint text and the default card follow `darkMode`.
+
+## Lane colours
+
+Each lane carries an accent colour: a coloured top border and a matching dot beside its title (and on its tab in the phone view). Colours come from a fixed palette in lane order. `Unassigned` is always grey and is left out of the order, so switching `nullColumn` on does not change any other lane's colour. When `columns` is passed, a column's own `color` (any CSS colour) is used as it is.
+
+The lane heading shows the title and the number of cards in a pill; the count pill carries `data-testid="new-kanban-count-<column id>"`.

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

@@ -109,7 +109,7 @@ What changes when `borderless` is on:
 |           | Default                                                  | `borderless`                                                                     |
 | --------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- |
 | Container | `rounded`, `bg-white`, `border border-gray-300`          | none                                                                             |
-| Toolbar   | Always shown when not `readOnly`                         | Hidden — use `/` and keyboard shortcuts                                          |
+| Toolbar   | Always shown when not `readOnly`                         | Hidden — floating toolbar on text selection, `/` and keyboard shortcuts          |
 | Height    | `heightClassName ?? "h-72"` with inner `overflow-y-auto` | `heightClassName ?? "min-h-[12rem]"`, grows with content, page scrolls           |
 | Padding   | `p-4`                                                    | `p-0`                                                                            |
 | Label row | Always rendered                                          | Rendered only if `label`, `subLabel`, `customElement`, or `infoElement` is given |
@@ -118,6 +118,8 @@ On error the editor draws a red outline (`border border-red-500 rounded`) — th
 
 > **`heightClassName` in borderless mode must be a `min-h-*` class**, not a fixed `h-*`. Borderless has no inner `overflow-y-auto`, so a fixed height clips content instead of scrolling it. Leave it unset unless you need a taller empty state.
 
+Selecting text in borderless mode shows a floating toolbar above the selection — Bold, Italic, Underline, Strikethrough, Inline code, Link and Clear formatting. It works inside table cells, and does not show in read-only mode, in a code block, or when an image or embed is selected. The boxed editor keeps its static toolbar instead.
+
 > **Note:** hiding the toolbar also hides its media-upload button. In borderless mode insert images and videos by **dragging or pasting** into the editor, or supply your own control via `customElement`.
 
 ##### Read-Only Mode (Preview)
@@ -163,6 +165,7 @@ On error the editor draws a red outline (`border border-red-500 rounded`) — th
 | `lib`                | `{ axios?: any, mermaid?: () => Promise<any> }` | `null`  | External libraries — axios for API calls; `mermaid` loader (e.g. `() => import("mermaid")`) to draw diagrams     |
 | `uploadEndpoint`     | `string`                                        | `null`  | API endpoint for uploading media files                                                                           |
 | `onHeadingsChange`   | `(headings: MarkdownHeading[]) => void`         | `null`  | Reports the document's `h1`–`h3` outline whenever it changes — feed it to `MarkdownOutline`                       |
+| `textSize`           | `"sm"`                                          | `null`  | 14px text on every screen. On phones the editor keeps a real 16px font and is drawn at 87.5% with `transform: scale`, the same trick as `TextInput` xs, so iOS Safari does not zoom on focus. `MarkdownStatic` takes the same prop |
 
 ##### Ref Methods
 

package/package.json

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