@multiplatform.one/markdown 7.6.1 → 7.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/markdown",
-  "version": "7.6.1",
+  "version": "7.6.3",
   "description": "Cross-platform markdown renderer with Shiki syntax highlighting for React and React Native",
   "keywords": [
     "cross-platform",
@@ -82,11 +82,11 @@
     "tamagui": "2.7.6",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
-    "@multiplatform.one/components": "7.6.1",
-    "@multiplatform.one/platform": "7.6.1",
-    "@multiplatform.one/router": "7.6.1",
-    "@multiplatform.one/theme": "7.6.1",
-    "@multiplatform.one/table-primitives": "7.6.1"
+    "@multiplatform.one/components": "7.6.3",
+    "@multiplatform.one/platform": "7.6.3",
+    "@multiplatform.one/router": "7.6.3",
+    "@multiplatform.one/table-primitives": "7.6.3",
+    "@multiplatform.one/theme": "7.6.3"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -99,9 +99,9 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.1",
-    "@multiplatform.one/storybook": "7.6.1",
-    "@multiplatform.one/test-utils": "7.6.1"
+    "@multiplatform.one/config": "7.6.3",
+    "@multiplatform.one/storybook": "7.6.3",
+    "@multiplatform.one/test-utils": "7.6.3"
   },
   "peerDependencies": {
     "react": "^19.1.0",

package/src/Notice/Notice.spec.tsx

@@ -0,0 +1,68 @@
+/**
+ * Notice spec (MPO-120). Stories live in Markdown/Callouts; this file covers
+ * the theme → Alert intent map the Callouts variants render.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Paragraph } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { Notice } from "./index";
+
+describe("Notice", () => {
+  it("yellow maps onto warning (assertive alert)", () => {
+    const { container } = renderWithProviders(
+      <Notice theme="yellow" title="Warning">
+        Yellow warning notice.
+      </Notice>,
+    );
+    expect(container.querySelector('[role="alert"]')).toBeTruthy();
+    expect(container.textContent).toContain("Warning");
+    expect(container.textContent).toContain("Yellow warning notice.");
+  });
+
+  it("blue maps onto info (polite status)", () => {
+    const { container } = renderWithProviders(
+      <Notice theme="blue" title="Info">
+        Blue info notice.
+      </Notice>,
+    );
+    expect(container.querySelector('[role="status"]')).toBeTruthy();
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.textContent).toContain("Info");
+  });
+
+  it("green maps onto success (polite status)", () => {
+    const { container } = renderWithProviders(
+      <Notice theme="green" title="Success">
+        Green success notice.
+      </Notice>,
+    );
+    expect(container.querySelector('[role="status"]')).toBeTruthy();
+    expect(container.textContent).toContain("Success");
+  });
+
+  it("red maps onto error (assertive alert)", () => {
+    const { container } = renderWithProviders(
+      <Notice theme="red" title="Error">
+        Red error notice.
+      </Notice>,
+    );
+    expect(container.querySelector('[role="alert"]')).toBeTruthy();
+    expect(container.textContent).toContain("Error");
+    expect(container.textContent).toContain("Red error notice.");
+  });
+
+  it("empty children still mount a notice", () => {
+    const { container } = renderWithProviders(<Notice theme="blue">{""}</Notice>);
+    expect(container.querySelector('[role="status"]')).toBeTruthy();
+  });
+
+  it("disableUnwrap keeps element children instead of flattening them", () => {
+    const { container } = renderWithProviders(
+      <Notice theme="green" disableUnwrap>
+        <Paragraph>kept as an element</Paragraph>
+      </Notice>,
+    );
+    expect(container.querySelector("p")?.textContent).toBe("kept as an element");
+  });
+});

package/src/mermaid/MermaidBlock.spec.tsx

@@ -0,0 +1,70 @@
+/**
+ * MermaidBlock spec (MPO-120). The block owns three faces: loading (source
+ * as a mermaid CodeBlock), ok (mounted SVG), error (parse message above the
+ * source). Native is a CodeBlock of the source and never mounts a diagram.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const { renderMermaidDiagram, mountDiagramSvg } = vi.hoisted(() => ({
+  renderMermaidDiagram: vi.fn(),
+  mountDiagramSvg: vi.fn(() => true),
+}));
+
+vi.mock("./renderMermaidDiagram", () => ({
+  renderMermaidDiagram,
+  resetMermaidForTesting: vi.fn(),
+}));
+
+vi.mock("./mountDiagramSvg", () => ({
+  mountDiagramSvg,
+}));
+
+import { MermaidBlock } from "./MermaidBlock";
+import { MermaidBlock as NativeMermaidBlock } from "./MermaidBlock.native";
+
+const FLOWCHART = "graph TD\n A-->B";
+
+describe("MermaidBlock", () => {
+  it("mounts a diagram after the lazy render succeeds", async () => {
+    renderMermaidDiagram.mockResolvedValue({ ok: true, svg: "<svg><g>ok</g></svg>" });
+    const { container } = renderWithProviders(<MermaidBlock>{FLOWCHART}</MermaidBlock>);
+    await waitFor(() => {
+      expect(container.querySelector('[data-mermaid-diagram="true"]')).toBeTruthy();
+    });
+    expect(renderMermaidDiagram).toHaveBeenCalledWith(FLOWCHART, expect.objectContaining({}));
+    expect(mountDiagramSvg).toHaveBeenCalled();
+    expect(container.querySelector('[role="img"]')?.getAttribute("aria-label")).toBe(
+      "Mermaid diagram",
+    );
+  });
+
+  it("shows the parse error above the source when the engine fails (Axiom 6)", async () => {
+    renderMermaidDiagram.mockResolvedValue({ ok: false, error: "Parse error on line 2" });
+    const { container } = renderWithProviders(<MermaidBlock>{"graph TD\n A--"}</MermaidBlock>);
+    await waitFor(() => {
+      expect(container.querySelector('[role="alert"]')?.textContent).toContain(
+        "Parse error on line 2",
+      );
+    });
+    expect(container.querySelector('[data-mermaid-diagram="true"]')).toBeNull();
+    expect(container.textContent).toContain("graph TD");
+  });
+
+  it("shows the mermaid CodeBlock while loading", () => {
+    renderMermaidDiagram.mockReturnValue(new Promise(() => {}));
+    const { container } = renderWithProviders(<MermaidBlock>{FLOWCHART}</MermaidBlock>);
+    expect(container.querySelector('[data-mermaid-diagram="true"]')).toBeNull();
+    expect(container.textContent).toContain("graph TD");
+  });
+});
+
+describe("MermaidBlock native fallback", () => {
+  it("renders the source as a mermaid CodeBlock, never a diagram host", () => {
+    const { container } = renderWithProviders(<NativeMermaidBlock>{FLOWCHART}</NativeMermaidBlock>);
+    expect(container.querySelector('[data-mermaid-diagram="true"]')).toBeNull();
+    expect(container.textContent).toContain("graph TD");
+  });
+});

package/src/mermaid/MermaidBlock.stories.tsx

@@ -0,0 +1,59 @@
+/**
+ * MermaidBlock — read-only mermaid diagram for rendered markdown.
+ * Engine is lazy; native falls back to a mermaid CodeBlock because the
+ * engine needs a DOM. Import is colocated (MPO-10: the ./mermaid subpath
+ * is the engine helpers, not this block).
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, YStack } from "tamagui";
+import { MermaidBlock } from "./MermaidBlock";
+
+const FLOWCHART = `graph TD
+  A[Scan] --> B[Preview]
+  B --> C[Commit]`;
+
+const meta: Meta<typeof MermaidBlock> = {
+  title: "Markdown/Mermaid",
+  component: MermaidBlock,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Fenced mermaid source rendered as SVG on web. Invalid source shows the parse error above the source (Axiom 6). Native hosts fall back to a mermaid CodeBlock.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MermaidBlock>;
+
+export const Main: Story = {
+  name: "Main",
+  args: { children: FLOWCHART },
+};
+
+/** Same diagram; Storybook scheme addon is the dark specimen. */
+export const DarkScheme: Story = {
+  args: { children: FLOWCHART },
+  parameters: { backgrounds: { default: "dark" } },
+};
+
+/** Axiom 6: parse failure is visible, never a blank box. */
+export const InvalidSource: Story = {
+  args: { children: "graph TD\n A--" },
+};
+
+export const NativeFallbackNote: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={700} padding="$4">
+      <Text fontSize="$2" color="$color10">
+        Native has no DOM mermaid engine, so MermaidBlock.native.tsx renders the source as a mermaid
+        CodeBlock. This web story is the live SVG path.
+      </Text>
+      <MermaidBlock>{FLOWCHART}</MermaidBlock>
+    </YStack>
+  ),
+};