blixify-ui-web-mcp 0.1.23 → 0.1.25

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

@@ -42,17 +42,23 @@ import { DetailList } from "blixify-ui-web/components/display/detailList";
 
 ##### Optional props
 
-| Name                  | Type                                             | Description                                                                     |
-| --------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------- |
-| `addTitleElement`     | `ReactElement`                                   | Additional react elemnt to be displayed next to title                           |
-| `headerRightElement`  | `ReactElement`                                   | Element anchored to the top-right of the header, opposite the title/description |
-| `description`         | `string`                                         |                                                                                 |
-| `className`           | `tailwind class`                                 |                                                                                 |
-| `model`               | `Model Data Structure`                           | Only used in Data Template                                                      |
-| `hideModal`           | `boolean`                                        | Only used in Data Template                                                      |
-| `referenceModel`      | `Model Data Structure`                           | Only used in Data Template                                                      |
-| `splitView`           | `boolean`                                        | Able to split into two                                                          |
-| `handleReferenceLink` | `(dataId: string, collectionId: string) => void` | Only used in Data Template, when reference being clicked                        |
+| Name                  | Type                                             | Description                                                                                                                                     |
+| --------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `addTitleElement`     | `ReactElement`                                   | Additional react elemnt to be displayed next to title                                                                                           |
+| `headerRightElement`  | `ReactElement`                                   | Element anchored to the top-right of the header, opposite the title/description                                                                 |
+| `description`         | `string`                                         |                                                                                                                                                 |
+| `className`           | `tailwind class`                                 |                                                                                                                                                 |
+| `textClassName`       | `tailwind class`                                 | Applied to both the label (`dt`) and value (`dd`) text; overrides the default `text-sm`                                                         |
+| `darkMode`            | `boolean`                                        | Renders with dark-mode colors                                                                                                                   |
+| `darkModeBg`          | `tailwind class`                                 | Overrides the dark-mode background (defaults to `bg-gray-900`); only used when `darkMode` is set                                                |
+| `model`               | `Model Data Structure`                           | Only used in Data Template                                                                                                                      |
+| `hideModal`           | `boolean`                                        | Only used in Data Template                                                                                                                      |
+| `referenceModel`      | `Model Data Structure`                           | Only used in Data Template                                                                                                                      |
+| `splitView`           | `boolean`                                        | Able to split into two                                                                                                                          |
+| `size`                | `"default" \| "compact"`                         | `compact` renders label:value on the same row, much denser than the default stacked layout                                                      |
+| `valueTextAlign`      | `"left" \| "right"`                              | Compact only. Forces the value alignment at all widths. When omitted, compact keeps its responsive default (right on mobile, left from `sm` up) |
+| `maxHeight`           | `string`                                         | When set, the body scrolls with this max height (e.g. `"60vh"`, `"500px"`)                                                                      |
+| `handleReferenceLink` | `(dataId: string, collectionId: string) => void` | Only used in Data Template, when reference being clicked                                                                                        |
 
 ##### Detail List class
 

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

@@ -107,6 +107,28 @@ export const DetailList = () => (
       />
     </StorySection>
 
+    <StorySection
+      title='Order Summary — valueTextAlign="right"'
+      description="Compact list with values pinned to the right at all widths. The final row uses a styled node as its text to render the total bigger and bold."
+    >
+      <DetailListImpl
+        title="Order Summary"
+        size="compact"
+        valueTextAlign="right"
+        list={[
+          { title: "Subtotal", text: "RM 1,200.00" },
+          { title: "Shipping", text: "RM 15.00" },
+          { title: "Tax (6%)", text: "RM 72.90" },
+          { title: "Discount", text: "- RM 27.90" },
+          {
+            title: "Total",
+            customTitle: <span className="text-lg font-bold">Total</span>,
+            text: <span className="text-lg font-bold">RM 1,260.00</span>,
+          },
+        ]}
+      />
+    </StorySection>
+
     <StorySection
       title="splitView (legacy) — Two-Column Grid"
       description='Two-up grid layout. Kept for backward compat; new code should prefer size="compact" or groups instead.'

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

@@ -22,6 +22,38 @@ This is the **base primitive** for the Batch 3 work. `NewListRow` is exported in
 
 Do not duplicate the row layout in those components — extend `NewListRow` via `renderExtra` or compose.
 
+## Item content
+
+| Item field | Rendered as |
+| --- | --- |
+| `title` | Row title |
+| `description` | String / number: a `<p>`. Element: a `<div>` (block content). Both are truncated to one line per line of content unless `noTruncate` |
+| `tag` / `tags` | Pill(s) next to the title |
+| `date` | Right-aligned date text (see below) |
+| `icon` / `img` | Avatar |
+| `action` | Right-side element |
+| any key in `extraKeys` | Block content under the description, in order |
+
+The legacy `List` renders **every** extra key on an item. `NewList` renders only the keys listed in `extraKeys`:
+
+```tsx
+<NewList list={tasks} extraKeys={["details", "activity"]} />
+```
+
+## Date
+
+| `date` value | Output |
+| --- | --- |
+| `Date`, or a string / number `new Date()` parses | `dateFormat(date)` when given, else `date.toLocaleDateString()` (browser locale, no time) |
+| A string `new Date()` cannot parse (e.g. `"18/09/2026 10:00"`) | The string as given |
+
+```tsx
+<NewList
+  list={tasks}
+  dateFormat={(date) => moment(date).format("DD/MM/YYYY HH:mm")}
+/>
+```
+
 ## Status
 
 🚧 **Scaffold only.** Implementation lands in follow-up commits per #1714.

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

@@ -219,6 +219,46 @@ export const NewList = () => (
       <NewListImpl list={baseLists} darkMode />
     </StorySection>
 
+    <StorySection
+      title="NewList — Extra Keys, Date Format and Rich Description"
+      description="extraKeys renders the named item keys (string or element) as block content under the description — the legacy List rendered every extra key, NewList only the ones named. dateFormat customises the date text (here with time); a date string Date cannot parse is shown as given. A non-string description renders as block content in a div, truncated like a string unless noTruncate."
+    >
+      <NewListImpl
+        hidePagination
+        extraKeys={["details", "activity"]}
+        dateFormat={(date) =>
+          `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
+        }
+        list={[
+          {
+            id: "task-1",
+            title: "3D Model — Site A",
+            date: new Date(),
+            details: "⏱ 42 min · 🖼 318 images",
+            activity: (
+              <div className="h-1.5 w-40 overflow-hidden rounded-full bg-gray-100">
+                <div className="h-full w-2/3 bg-primary-500" />
+              </div>
+            ),
+          },
+          {
+            id: "task-2",
+            title: "2D Map — Site B",
+            date: "18/09/2026 10:00",
+            description: (
+              <div className="flex gap-2">
+                <span className="rounded bg-green-100 px-2 text-xs text-green-800">
+                  Completed
+                </span>
+                <span className="text-xs text-gray-500">Ready to download</span>
+              </div>
+            ),
+            details: "⏱ 12 min · 🖼 96 images",
+          },
+        ]}
+      />
+    </StorySection>
+
     <StorySection
       title="Comparing with the legacy List"
       description="Open Display/List in another tab — same sample data renders. NewListItem is exactly ListClass — drop-in data swap. NewListImpl renders the same shape with modernised card styling, optional sticky section headers, and sticky search slot."

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

@@ -53,3 +53,17 @@ const passwordRef = useRef(null);
 | `handleComplete`         | `(isDraft?: boolean) => void` | —       | Called when all inputs pass validation. `isDraft=true` when triggered via `handleSave()` |
 | `handleOnFailValidation` | `(ids: string[]) => void`     | —       | Called when one or more inputs fail. Receives an array of the failed input `id` values   |
 | `disabledOnEnter`        | `boolean`                     | `false` | When `true`, pressing Enter does not trigger form submission                             |
+
+### Enter to submit
+
+Pressing Enter calls `handleSubmit()` when the key event comes from inside this `<form>` — including inputs a child renders through a portal. Enter pressed anywhere else on the page, or inside another `Form`, does not submit this one.
+
+Enter does not submit when:
+
+| Condition | |
+| --- | --- |
+| `disabledOnEnter` is `true` | set it for forms with a textarea or rich text field that needs Enter for a newline |
+| Shift is held | |
+| an IME composition is in progress (`isComposing`, or `keyCode` 229) | |
+| the key is auto-repeating (`repeat`) | |
+| the focused element is a `button` | |

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

@@ -6,19 +6,21 @@ import { RadioList } from "../../action/radioList";
 import { StorySection } from "../../storyUtils";
 import { TextInput } from "../textInput";
 import { UploadInput } from "../uploadInput";
+import { TextArea } from "../textArea";
 
 const meta = { title: "Input/Form" };
 export default meta;
 
-
 export const Form = () => {
   const formRef = useRef<any>(null);
   const input1 = useRef<any>(null);
   const input2 = useRef<any>(null);
+  const input3 = useRef<any>(null);
   const uploadRef = useRef<any>(null);
 
   const [radioValue, setRadioValue] = useState("");
   const [textValue, setTextValue] = useState("");
+  const [textAreaValue, setTextAreaValue] = useState("");
   const [file, setFile] = useState<any>(undefined);
   const [result, setResult] = useState<string | null>(null);
 
@@ -38,7 +40,7 @@ export const Form = () => {
         <div className="w-full max-w-sm">
           <FormImpl
             ref={formRef}
-            refList={[input1, input2, uploadRef]}
+            refList={[input1, input2, input3, uploadRef]}
             handleComplete={() => setResult("All valid — form submitted!")}
           >
             <RadioList
@@ -61,6 +63,16 @@ export const Form = () => {
               containerClassName="mt-3"
               onChange={(e) => setTextValue(e.target.value)}
             />
+            <TextArea
+              ref={input3}
+              id="remarks"
+              value={textAreaValue}
+              rows={3}
+              label="Remarks"
+              placeholder="Remarks"
+              containerClassName="mt-3"
+              onChange={(e) => setTextAreaValue(e.target.value)}
+            />
             <UploadInput
               ref={uploadRef}
               id="file-upload"
@@ -134,4 +146,4 @@ export const Form = () => {
       </StorySection>
     </>
   );
-}
+};

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

@@ -160,7 +160,7 @@ On error the editor draws a red outline (`border border-red-500 rounded`) — th
 | `enableImageUpload`  | `boolean`                                       | `false` | Enable image upload functionality (drag-and-drop, paste, click to upload)                                        |
 | `enableVideoUpload`  | `boolean`                                       | `false` | Enable video upload functionality (supports MP4, MOV, WebM, AVI, MKV, etc.)                                      |
 | `compress`           | `{ maxFileSize?: number, fileQuality?: number}` | `null`  | Image compression settings. `maxFileSize` in MB (default: 30), `fileQuality` 0.0-1.0 (default: 0.8)              |
-| `lib`                | `{ axios: any }`                                | `null`  | External libraries (e.g., axios for API calls)                                                                   |
+| `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                                                                           |
 
 ##### Ref Methods
@@ -209,6 +209,57 @@ commands. `onSelect` receives `insertEmbed`, and may await first — the host
 usually has to create the space before it has an id. Embeds survive the round
 trip back to markdown as the same `div`, the way an inline `<video>` does.
 
+##### Embed view — grid or list
+
+Each embed carries a `view` of `grid` (default) or `list`. It is stored on the
+marker only when it is `list`:
+
+```html
+<div data-space-id="guides"></div>                  <!-- grid -->
+<div data-space-id="guides" data-view="list"></div> <!-- list -->
+```
+
+Grid writes no attribute at all, so documents saved before views existed
+serialise byte-for-byte as they did. Anything other than exactly `list` reads as
+grid. A host that parses these markers itself must accept the optional
+`data-view`.
+
+`renderEmbed` receives `view` and `onChangeView(view)` alongside `onRemove`, so
+the host decides what a list row looks like and where its toggle sits. The node
+view wrapper also carries `data-view` for styling. A new embed copies the view
+of the embed directly above it, so a list stays a list as items are added.
+
+##### Mermaid diagrams
+
+Pass a loader and fenced ```` ```mermaid ```` blocks draw as diagrams — in the
+editor as a live preview under the source, and in `MarkdownStatic` in place of
+the block. The `/` menu gains **Diagram**, which inserts a starter flowchart.
+
+```tsx
+<MarkdownInput lib={{ axios, mermaid: () => import("mermaid") }} />
+<MarkdownStatic label="" value={body} lib={{ mermaid: () => import("mermaid") }} />
+```
+
+- **The host supplies mermaid.** This library compiles to CommonJS, so importing
+  mermaid here would bundle it into every app with a markdown field. Passed in,
+  the host's bundler splits it into a chunk fetched only by pages with a diagram.
+  Without a loader the block shows as ordinary code and Diagram is not offered.
+- **`securityLevel: "strict"` is always set.** Documents can be published to
+  anyone with a link; strict keeps mermaid sanitising labels and refusing click
+  handlers.
+- **Html labels keep inline formatting; `<img>` is stripped.** `<b>`, `<i>`,
+  `<u>`, `<sup>` and `<br>` draw as formatting. Strict still keeps sanitised
+  tags, so `dompurifyConfig.FORBID_TAGS: ["img"]` removes images, which would
+  otherwise load a remote file for every reader.
+- **Entity codes such as `#quot;` render garbled** in mermaid 11.17.2 with
+  either api (`render` or `run`). Write the character directly instead.
+- **`suppressErrorRendering: true`.** Without it mermaid appends its own error
+  graphic to `document.body` on a syntax error, left behind below the page.
+- **A broken diagram never breaks the page.** It shows a message; in
+  `MarkdownStatic` the source stays visible under it.
+- **The source is what is stored**, as a normal fenced block, so search and
+  anything reading the raw markdown still see the diagram's text.
+
 ##### The slash menu
 
 Only a real edit opens it. The detection also runs on selection changes so that

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

@@ -1,16 +1,34 @@
 import React, { useState } from "react";
-import { MarkdownInput as MarkdownInputImpl } from ".";
+import { MarkdownInput as MarkdownInputImpl, MarkdownStatic } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Input/Markdown Input" };
 export default meta;
 
+// INFO: the host passes mermaid in; the library never imports it
+const handleLoadMermaid = () => import("mermaid");
+
+const DIAGRAM_SAMPLE = [
+  "Pick Diagram from the / menu to add another.",
+  "",
+  "```mermaid",
+  "flowchart LR",
+  "  A[<b>Draft</b>] --> B[Review<br/>by <i>owner</i>]",
+  "  B --> C[Published]",
+  "```",
+].join("\n");
+
 export const MarkdownInput = () => {
   const [value, setValue] = useState<string | undefined>("");
   const [noteValue, setNoteValue] = useState<string | undefined>(
     'A page can hold a live database, not just a link to one.\n\n<div data-space-id="orders"></div>\n\nType / on any line and pick Database to add another.',
   );
+  const [diagramValue, setDiagramValue] = useState<string | undefined>(
+    DIAGRAM_SAMPLE,
+  );
   const handleOnChange = (id: string, value?: string) => setValue(value);
+  const handleOnDiagramChange = (id: string, value?: string) =>
+    setDiagramValue(value);
   const handleOnNoteChange = (id: string, value?: string) =>
     setNoteValue(value);
 
@@ -88,6 +106,26 @@ export const MarkdownInput = () => {
           {noteValue}
         </pre>
       </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."
+      >
+        <div className="grid w-full gap-6 md:grid-cols-2">
+          <MarkdownInputImpl
+            id="diagram"
+            value={diagramValue ?? ""}
+            onChange={handleOnDiagramChange}
+            borderless={true}
+            lib={{ mermaid: handleLoadMermaid }}
+          />
+          <MarkdownStatic
+            label="MarkdownStatic"
+            value={diagramValue ?? ""}
+            lib={{ mermaid: handleLoadMermaid }}
+          />
+        </div>
+      </StorySection>
     </>
   );
 };

package/package.json

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