blixify-ui-web-mcp 0.1.22 → 0.1.24

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

@@ -8,10 +8,20 @@ A floating chat button fixed to the viewport. Clicking it toggles the `ChatBase`
 
 The button can be dragged out of the way on desktop and touch, and where it is dropped is kept in `localStorage` so it stays there on the next visit. A short drag is still treated as a click, so tapping always opens the chat. A saved position is clamped back into view when it is restored on a smaller screen or the window is resized under it, and dragging is disabled while the panel is full screen on mobile.
 
+With `resizableWidth`, an open panel gains a grab handle on its left edge — dragging it left or right resizes the panel to any width. The only bounds are physical: it cannot be dragged wider than the viewport, nor narrower than 280px, below which the header, messages and input stop being usable. The chosen width is kept in `localStorage`, re-clamped to the viewport on window resize, and the handle is hidden while the panel is full screen on mobile.
+
+`resizableHeight` works the same way on the vertical axis: an open panel gains a grab handle on its top edge, and dragging it up or down resizes the panel to any height. Because the panel grows upward from the bottom-right anchor, the cap is the distance from its bottom edge to the top of the viewport, and the floor keeps the header and input row usable. The default height is three quarters of the viewport (matching the panel's `sm:h-[75vh]`). Width and height are independent — turn on either or both. The chosen height is kept in `localStorage` and re-clamped on window resize.
+
 | Prop                 | Type      | Default                          | Description                                                                                 |
 | -------------------- | --------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
 | `draggable`          | `boolean` | `true`                           | Set `false` to pin the button to `positionOffset` and ignore any saved position             |
 | `positionStorageKey` | `string`  | `"blixify-chat-anchor-position"` | `localStorage` key holding `{ right, bottom }` in px, measured from the bottom-right corner |
+| `resizableWidth`     | `boolean` | `false`                          | Set `true` to show a left-edge handle that drags the open panel to any width                |
+| `defaultWidth`       | `number`  | `384`                            | Width (px) the panel opens at before the user has dragged (matches `sm:w-96`)               |
+| `widthStorageKey`    | `string`  | `"blixify-chat-anchor-width"`    | `localStorage` key holding the panel width in px                                            |
+| `resizableHeight`    | `boolean` | `false`                          | Set `true` to show a top-edge handle that drags the open panel to any height                |
+| `defaultHeight`      | `number`  | `75% of viewport`                | Height (px) the panel opens at before the user has dragged (matches `sm:h-[75vh]`)          |
+| `heightStorageKey`   | `string`  | `"blixify-chat-anchor-height"`   | `localStorage` key holding the panel height in px                                           |
 
 ##### Import
 
@@ -70,11 +80,11 @@ return (
 
 | Name             | Type                          | Default                                | Description                                                                                     |
 | ---------------- | ----------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `positionOffset` | `string`                      | `"bottom-8 right-8"`                   | Tailwind classes that control the fixed position of the anchor. Ignored on mobile when open.    |
+| `positionOffset` | `string`                      | `"bottom-6 right-6"`                   | Tailwind classes that control the fixed position of the anchor. 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 (64×64 rounded circle). |
-| `closeIcon`      | `React.ReactNode` \| `string` | `XMarkIcon`                            | Icon shown when the chat is open. A string is treated as an image URL (64×64 rounded circle).   |
+| `openIcon`       | `React.ReactNode` \| `string` | `ChatBubbleOvalLeftIcon`               | Icon shown when the chat is closed. A string is treated as an image URL (56×56 rounded circle). |
+| `closeIcon`      | `React.ReactNode` \| `string` | `XMarkIcon`                            | Icon shown when the chat is open. A string is treated as an image URL (56×56 rounded circle).   |
 
 ##### Optional props — inherited from ChatBase
 

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

@@ -148,3 +148,53 @@ export const ChatAnchor = () => {
     </div>
   );
 }
+
+export const Resizable = () => {
+  const botUser = { id: "1", name: "Bot" };
+  const currentUser = { id: "2", name: "Guest" };
+
+  const [openChatBase, setOpenChatBase] = useState<boolean>(true);
+  const [message, setMessage] = useState("");
+
+  const [conversation, setConversation] = useState<Conversation>({
+    id: "1",
+    members: [currentUser, botUser],
+    messageList: [
+      {
+        sender: botUser,
+        messageBody:
+          "Drag my left edge to resize the width and my top edge to resize the height. Both are remembered independently.",
+        createdAt: dayjs(
+          "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+    ],
+  });
+
+  const handleOnClick = () => setOpenChatBase(!openChatBase);
+
+  const handleOnSendMessage = (conversation: Conversation) => {
+    setConversation(conversation);
+    setMessage("");
+  };
+
+  return (
+    <div className="h-96 w-full relative">
+      <ChatAnchorImpl
+        open={openChatBase}
+        value={message}
+        currentUser={currentUser}
+        conversation={conversation}
+        onSendMessage={handleOnSendMessage}
+        onChangeMessage={(e) => setMessage(e.target.value)}
+        onClose={handleOnClick}
+        onClick={handleOnClick}
+        className="shadow-lg border border-gray-200"
+        resizableWidth
+        defaultWidth={384}
+        resizableHeight
+        defaultHeight={384}
+      />
+    </div>
+  );
+};

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/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.22",
+  "version": "0.1.24",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {