@multiplatform.one/markdown 6.0.4 → 6.3.0

package/src/components/markdownPrimitives.spec.tsx

@@ -0,0 +1,121 @@
+/**
+ * LC-16 wrapper specs — the markdown package renders code blocks, inline
+ * code, and doc tabs through the canonical `@multiplatform.one/components`
+ * implementations (census items #9 / #12); these tests pin the wrappers to
+ * the canonical anatomy.
+ */
+
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { CodeBlock } from "./CodeBlock";
+import { InlineCode } from "./InlineCode";
+import { MDXTab, MDXTabs } from "../Tabs";
+
+describe("markdown CodeBlock (canonical code family)", () => {
+  it("renders code content inside a real <code> element", async () => {
+    const { container } = renderWithProviders(
+      <CodeBlock lang="typescript">{"const x = 1;"}</CodeBlock>,
+    );
+    expect(container.querySelector("code")).toBeTruthy();
+    expect(container.textContent).toContain("const x = 1;");
+  });
+
+  it("tokenizes through the shared shiki stack (colored tokens appear)", async () => {
+    const { container } = renderWithProviders(
+      <CodeBlock lang="typescript">{"const x = 1;"}</CodeBlock>,
+    );
+    await waitFor(
+      () => {
+        const colored = Array.from(container.querySelectorAll("span")).some(
+          (el) => el.style.color !== "",
+        );
+        expect(colored).toBe(true);
+      },
+      { timeout: 30000 },
+    );
+    expect(container.textContent).toContain("const x = 1;");
+  }, 35000);
+
+  it("falls back to plain text for unknown languages", async () => {
+    const { container } = renderWithProviders(
+      <CodeBlock lang="not-a-real-language">{"plain fallback"}</CodeBlock>,
+    );
+    await waitFor(() => {
+      expect(container.textContent).toContain("plain fallback");
+    });
+  });
+});
+
+describe("markdown InlineCode (canonical CodeInline)", () => {
+  it("renders a real <code> element with the content", () => {
+    const { container } = renderWithProviders(<InlineCode>npm install</InlineCode>);
+    const code = container.querySelector("code");
+    expect(code).toBeTruthy();
+    expect(code!.textContent).toBe("npm install");
+  });
+});
+
+describe("MDXTabs (canonical Tabs)", () => {
+  const renderTabs = (defaultValue?: string) =>
+    renderWithProviders(
+      <MDXTabs items={["npm", "pnpm"]} defaultValue={defaultValue}>
+        {[
+          <MDXTab key="npm">
+            <Text>npm panel</Text>
+          </MDXTab>,
+          <MDXTab key="pnpm">
+            <Text>pnpm panel</Text>
+          </MDXTab>,
+        ]}
+      </MDXTabs>,
+    );
+
+  it("renders a real tablist with aria-selected tabs", () => {
+    renderTabs();
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("npm panel")).toBeInTheDocument();
+  });
+
+  it("switches panels on click", () => {
+    renderTabs();
+    fireEvent.click(screen.getByText("pnpm"));
+    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("respects defaultValue addressed by label", () => {
+    renderTabs("pnpm");
+    expect(screen.getByText("pnpm panel")).toBeInTheDocument();
+  });
+
+  it("handles duplicate labels via index-suffixed values", () => {
+    renderWithProviders(
+      <MDXTabs items={["same", "same"]}>
+        {[
+          <MDXTab key="a">
+            <Text>first panel</Text>
+          </MDXTab>,
+          <MDXTab key="b">
+            <Text>second panel</Text>
+          </MDXTab>,
+        ]}
+      </MDXTabs>,
+    );
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    fireEvent.click(tabs[1]!);
+    expect(screen.getByText("second panel")).toBeInTheDocument();
+  });
+
+  it("renders nothing dangerous for empty items", () => {
+    const { container } = renderWithProviders(<MDXTabs items={[]}>{[]}</MDXTabs>);
+    expect(container).toBeTruthy();
+    expect(screen.queryAllByRole("tab")).toHaveLength(0);
+  });
+});

package/src/docBlocks.spec.tsx

@@ -0,0 +1,85 @@
+/**
+ * Doc building-block specs — the MDX-facing blocks docs compose directly:
+ * `Video` (web <video> anatomy + SB-M-1227 empty-src omission), `MDXAside`
+ * (cutoff + "Show more" expansion) and `MDXNote` (Alert-based note box).
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { MDXAside, MDXNote } from "./Aside";
+import { Video } from "./Video";
+
+describe("Video (web)", () => {
+  it("renders a muted, autoplaying, looping inline <video> inside a figure", () => {
+    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
+    expect(container.querySelector("figure")).toBeTruthy();
+    const video = container.querySelector("video");
+    expect(video).toBeTruthy();
+    expect(video!.getAttribute("src")).toBe("https://example.com/clip.mp4");
+    // Boolean media attributes reflect the safe-autoplay defaults.
+    expect(video!.hasAttribute("autoplay")).toBe(true);
+    expect(video!.hasAttribute("loop")).toBe(true);
+    expect(video!.hasAttribute("playsinline")).toBe(true);
+    expect(video!.hasAttribute("controls")).toBe(false);
+  });
+
+  it("omits the <video> element entirely for an empty src (SB-M-1227)", () => {
+    const { container } = renderWithProviders(<Video src="" />);
+    expect(container.querySelector("video")).toBeNull();
+    expect(container.querySelector("figure")).toBeTruthy();
+  });
+
+  it("forwards controls/poster and renders children as a figcaption", () => {
+    const { container } = renderWithProviders(
+      <Video src="https://example.com/clip.mp4" controls poster="https://example.com/poster.png">
+        A demo caption
+      </Video>,
+    );
+    const video = container.querySelector("video");
+    expect(video!.hasAttribute("controls")).toBe(true);
+    expect(video!.getAttribute("poster")).toBe("https://example.com/poster.png");
+    const caption = container.querySelector("figcaption");
+    expect(caption).toBeTruthy();
+    expect(caption!.textContent).toBe("A demo caption");
+  });
+
+  it("renders no figcaption without children", () => {
+    const { container } = renderWithProviders(<Video src="https://example.com/clip.mp4" />);
+    expect(container.querySelector("figcaption")).toBeNull();
+  });
+});
+
+describe("MDXAside", () => {
+  it("renders string content as a plain aside without a cutoff", () => {
+    const { container } = renderWithProviders(<MDXAside>just a note</MDXAside>);
+    expect(container.querySelector("aside")).toBeTruthy();
+    expect(container.textContent).toContain("just a note");
+    expect(screen.queryByText("Show more")).toBeNull();
+  });
+
+  it("cuts off unmeasured element content and expands on Show more", () => {
+    renderWithProviders(
+      <MDXAside>
+        <Text>long embedded content</Text>
+      </MDXAside>,
+    );
+    // Content is still rendered inside the clipped container...
+    expect(screen.getByText("long embedded content")).toBeTruthy();
+    // ...with the expansion affordance visible.
+    const showMore = screen.getByText("Show more");
+    expect(showMore).toBeTruthy();
+    fireEvent.click(showMore);
+    expect(screen.queryByText("Show more")).toBeNull();
+    expect(screen.getByText("long embedded content")).toBeTruthy();
+  });
+});
+
+describe("MDXNote", () => {
+  it("renders note content inside an aside", () => {
+    const { container } = renderWithProviders(<MDXNote>remember this</MDXNote>);
+    expect(container.querySelector("aside")).toBeTruthy();
+    expect(container.textContent).toContain("remember this");
+  });
+});

package/src/hooks/useCompileMdx.ts

@@ -1,5 +1,35 @@
 import { useEffect, useState } from "react";
 
+const logger = console;
+
+const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+
+/**
+ * Minimal browser-safe frontmatter parser (gray-matter depends on Buffer,
+ * which does not exist in the browser). Handles simple `key: value` YAML.
+ */
+export function parseFrontmatter(source: string): {
+  content: string;
+  data: Record<string, any>;
+} {
+  const match = source.match(frontmatterRegex);
+  if (!match) return { content: source, data: {} };
+  const data: Record<string, any> = {};
+  for (const line of match[1].split(/\r?\n/)) {
+    const separatorIndex = line.indexOf(":");
+    if (separatorIndex <= 0) continue;
+    const key = line.slice(0, separatorIndex).trim();
+    let value: any = line.slice(separatorIndex + 1).trim();
+    if (/^(["']).*\1$/.test(value)) value = value.slice(1, -1);
+    else if (value === "true") value = true;
+    else if (value === "false") value = false;
+    else if (value === "null") value = null;
+    else if (value !== "" && !Number.isNaN(Number(value))) value = Number(value);
+    data[key] = value;
+  }
+  return { content: source.slice(match[0].length), data };
+}
+
 export function useCompileMdx(
   source: string,
   options?: Record<string, any>,
@@ -11,43 +41,53 @@ export function useCompileMdx(
   const [frontmatter, setFrontmatter] = useState<Record<string, any> | undefined>();
 
   useEffect(() => {
+    let cancelled = false;
     (async () => {
-      const [
-        { compile },
-        { default: grayMatter },
-        { default: rehypeAutolinkHeadings },
-        { default: rehypeSlug },
-        { default: remarkFrontmatter },
-        { default: remarkMdxFrontmatter },
-        { rehypeMetaAttributes },
-      ] = await Promise.all([
-        import("@mdx-js/mdx"),
-        import("gray-matter"),
-        import("rehype-autolink-headings"),
-        import("rehype-slug"),
-        import("remark-frontmatter"),
-        import("remark-mdx-frontmatter"),
-        import("../util/rehypeMetaAttributes"),
-      ]);
-      const { value } = await compile(source, {
-        ...options,
-        development: false,
-        outputFormat: "function-body",
-        remarkPlugins: [
-          ...(options?.remarkPlugins || []),
-          [remarkMdxFrontmatter, { name: "frontmatter" }],
-          remarkFrontmatter,
-        ],
-        rehypePlugins: [
-          ...(options?.rehypePlugins || []),
-          rehypeAutolinkHeadings,
-          rehypeMetaAttributes,
-          rehypeSlug,
-        ],
-      });
-      setCode(value.toString());
-      setFrontmatter(grayMatter(source));
+      try {
+        const [
+          { compile },
+          { default: rehypeAutolinkHeadings },
+          { default: rehypeSlug },
+          { default: remarkFrontmatter },
+          { default: remarkMdxFrontmatter },
+          { rehypeMetaAttributes },
+        ] = await Promise.all([
+          import("@mdx-js/mdx"),
+          import("rehype-autolink-headings"),
+          import("rehype-slug"),
+          import("remark-frontmatter"),
+          import("remark-mdx-frontmatter"),
+          import("../util/rehypeMetaAttributes"),
+        ]);
+        const { value } = await compile(source, {
+          ...options,
+          development: false,
+          outputFormat: "function-body",
+          remarkPlugins: [
+            ...(options?.remarkPlugins || []),
+            [remarkMdxFrontmatter, { name: "frontmatter" }],
+            remarkFrontmatter,
+          ],
+          rehypePlugins: [
+            ...(options?.rehypePlugins || []),
+            rehypeAutolinkHeadings,
+            rehypeMetaAttributes,
+            rehypeSlug,
+          ],
+        });
+        if (cancelled) return;
+        setCode(value.toString());
+        setFrontmatter(parseFrontmatter(source));
+      } catch (err) {
+        if (cancelled) return;
+        logger.error("useCompileMdx: failed to compile MDX source", err);
+        setCode(undefined);
+        setFrontmatter(undefined);
+      }
     })();
+    return () => {
+      cancelled = true;
+    };
   }, [source, options]);
 
   if (!code || !frontmatter) return {};

package/src/hooks/useEvaluateMdx.ts

@@ -8,7 +8,13 @@ export function useEvaluateMdx(code?: string, options?: Record<string, any>) {
 
   useEffect(() => {
     if (!code) return;
-    setComponent(() => evaluateMdx(code, options));
+    try {
+      const Evaluated = evaluateMdx(code, options);
+      setComponent(() => Evaluated);
+    } catch (err) {
+      console.error("useEvaluateMdx: failed to evaluate compiled MDX", err);
+      setComponent(undefined);
+    }
   }, [code, options]);
 
   return Component;

package/src/icons/index.tsx

@@ -1,4 +1,4 @@
-import { Circle, Line, Path, Polyline, Rect, Svg } from "@tamagui/react-native-svg";
+import { Circle, Path, Rect, Svg } from "@tamagui/react-native-svg";
 import { useTheme } from "tamagui";
 
 interface IconProps {
@@ -6,9 +6,20 @@ interface IconProps {
   color?: string;
 }
 
-export function ClipboardIcon({ size = 16, color }: IconProps) {
+/**
+ * Resolve theme tokens like "$color10" to concrete values — raw SVG stroke
+ * attributes cannot consume unresolved token strings (SB-M-1206).
+ */
+function useIconColor(color?: string): string {
   const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
+  if (color?.startsWith("$")) {
+    return (theme as any)[color.slice(1)]?.val ?? theme.color?.val ?? "currentColor";
+  }
+  return color ?? theme.color?.val ?? "currentColor";
+}
+
+export function ClipboardIcon({ size = 16, color }: IconProps) {
+  const fill = useIconColor(color);
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Rect x="9" y="2" width="6" height="4" rx="1" stroke={fill} strokeWidth={2} />
@@ -21,16 +32,18 @@ export function ClipboardIcon({ size = 16, color }: IconProps) {
   );
 }
 
-export function CheckCircleIcon({ size = 16, color }: IconProps) {
-  const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
+export function CheckIcon({
+  size = 16,
+  color,
+  strokeWidth = 2.5,
+}: IconProps & { strokeWidth?: number }) {
+  const stroke = useIconColor(color);
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={fill} strokeWidth={2} />
       <Path
-        d="M9 12l2 2 4-4"
-        stroke={fill}
-        strokeWidth={2}
+        d="M4.5 12.75l5.25 5.25L19.5 7.5"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -38,20 +51,13 @@ export function CheckCircleIcon({ size = 16, color }: IconProps) {
   );
 }
 
-export function LinkIcon({ size = 12, color }: IconProps) {
-  const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
+export function CheckCircleIcon({ size = 16, color }: IconProps) {
+  const fill = useIconColor(color);
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={fill} strokeWidth={2} />
       <Path
-        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-        stroke={fill}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <Path
-        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        d="M9 12l2 2 4-4"
         stroke={fill}
         strokeWidth={2}
         strokeLinecap="round"
@@ -61,51 +67,19 @@ export function LinkIcon({ size = 12, color }: IconProps) {
   );
 }
 
-export function AlertTriangleIcon({ size = 16, color }: IconProps) {
-  const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
+export function LinkIcon({ size = 12, color }: IconProps) {
+  const fill = useIconColor(color);
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path
-        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
         stroke={fill}
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-      <Line x1="12" y1="9" x2="12" y2="13" stroke={fill} strokeWidth={2} strokeLinecap="round" />
-      <Line
-        x1="12"
-        y1="17"
-        x2="12.01"
-        y2="17"
-        stroke={fill}
-        strokeWidth={2}
-        strokeLinecap="round"
-      />
-    </Svg>
-  );
-}
-
-export function InfoIcon({ size = 16, color }: IconProps) {
-  const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
-  return (
-    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={fill} strokeWidth={2} />
-      <Line x1="12" y1="16" x2="12" y2="12" stroke={fill} strokeWidth={2} strokeLinecap="round" />
-      <Line x1="12" y1="8" x2="12.01" y2="8" stroke={fill} strokeWidth={2} strokeLinecap="round" />
-    </Svg>
-  );
-}
-
-export function ChevronRightIcon({ size = 16, color }: IconProps) {
-  const theme = useTheme();
-  const fill = color ?? theme.color?.val ?? "currentColor";
-  return (
-    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Polyline
-        points="9,18 15,12 9,6"
+      <Path
+        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
         stroke={fill}
         strokeWidth={2}
         strokeLinecap="round"
@@ -114,3 +88,7 @@ export function ChevronRightIcon({ size = 16, color }: IconProps) {
     </Svg>
   );
 }
+
+// AlertTriangleIcon / InfoIcon / ChevronRightIcon were removed in the
+// duplication census: they duplicated the catalog's intent icons and were
+// orphaned when markdown's Notice was replaced by the catalog Alert.

package/src/index.ts

@@ -12,8 +12,20 @@ export type { MarkdownProps, CodeTheme } from "./types";
 export { parseMarkdown } from "./parser";
 export { renderMarkdown } from "./renderer";
 
-// Shiki syntax highlighting
-export { highlightCode, getHighlighter, type ThemedToken, type BundledTheme } from "./shiki";
+// Mermaid diagrams — canonical lazy renderer (LC-16), shared with the
+// rich-text editor's live code-block preview (which imports the
+// dependency-free "./mermaid" subpath instead of this barrel)
+export * from "./mermaid";
+export { MermaidBlock, type MermaidBlockProps } from "./mermaid/MermaidBlock";
+
+// Shiki syntax highlighting — canonical stack lives in
+// @multiplatform.one/components (LC-16); re-exported for compatibility.
+export {
+  highlightCode,
+  type HighlightLine,
+  type HighlightToken,
+} from "@multiplatform.one/components";
+export type { BundledLanguage, BundledTheme } from "shiki";
 
 // MDX components
 export * from "./Aside";
@@ -22,11 +34,11 @@ export * from "./hooks";
 export * from "./Hr";
 export * from "./icons";
 export * from "./Li";
+export * from "./MarkdownSimpleTable";
 export * from "./Mdx";
 export * from "./MdxCodeBlock";
 export * from "./mdxComponents";
 export * from "./Notice";
-export * from "./SimpleTable";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Ul";

package/src/markdownComponent.spec.tsx

@@ -0,0 +1,58 @@
+/**
+ * <Markdown> component specs — the string-in, UI-out entry point. Locks down:
+ * string children parse + render, non-string children render nothing instead
+ * of crashing, and custom components reach the renderer.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text, View } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { Markdown } from "./Markdown";
+
+describe("Markdown", () => {
+  it("parses and renders a markdown string", () => {
+    const { container } = renderWithProviders(
+      <Markdown>{"# Hello\n\nSome **bold** text."}</Markdown>,
+    );
+    expect(container.querySelector("h1")?.textContent).toBe("Hello");
+    expect(container.querySelector("strong")?.textContent).toBe("bold");
+  });
+
+  it("renders nothing (no crash) for non-string children", () => {
+    // Consumers sometimes pass elements by mistake; cast to exercise that path.
+    const notMarkdown = (
+      <View>
+        <Text>not markdown</Text>
+      </View>
+    ) as unknown as string;
+    const { container } = renderWithProviders(<Markdown>{notMarkdown}</Markdown>);
+    expect(container.textContent).not.toContain("not markdown");
+  });
+
+  it("renders nothing for empty children", () => {
+    const { container } = renderWithProviders(<Markdown>{""}</Markdown>);
+    expect(container.querySelector("h1")).toBeNull();
+    expect(container.querySelector("p")).toBeNull();
+  });
+
+  it("threads custom components through to the renderer", () => {
+    const { getByTestId } = renderWithProviders(
+      <Markdown
+        components={{
+          h1: ({ children }) => <Text data-testid="branded-h1">{children}</Text>,
+        }}
+      >
+        {"# Branded"}
+      </Markdown>,
+    );
+    expect(getByTestId("branded-h1").textContent).toBe("Branded");
+  });
+
+  it("spreads extra view props onto the wrapper", () => {
+    const { getByTestId } = renderWithProviders(
+      <Markdown data-testid="md-root">{"content"}</Markdown>,
+    );
+    expect(getByTestId("md-root")).toBeTruthy();
+    expect(getByTestId("md-root").textContent).toContain("content");
+  });
+});

package/src/mdx.spec.tsx

@@ -110,6 +110,10 @@ vi.mock("@tamagui/react-native-svg", () => ({
   Line: (props: any) => <line {...props} />,
   Rect: (props: any) => <rect {...props} />,
   Polyline: (props: any) => <polyline {...props} />,
+  // The components barrel (now in this spec's graph via the LC-16 code/tabs
+  // wrappers) pulls charts/svg.ts, which also needs G and Text.
+  G: ({ children, ...props }: any) => <g {...props}>{children}</g>,
+  Text: ({ children, ...props }: any) => <text {...props}>{children}</text>,
 }));
 
 describe("MDX Components", () => {