@multiplatform.one/markdown 6.1.0 → 6.3.0

package/src/{SimpleTable → MarkdownSimpleTable}/index.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { Paragraph, ScrollView, Text, useMedia } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Link } from "../components/Link";
 
 type CellContent = ReactNode;
 
@@ -26,15 +27,15 @@ function parseCell(content: CellContent): ReactNode {
     const key = `m-${matchIndex}`;
     if (match[1]) {
       parts.push(
-        <Text key={key} fontWeight="700" color="$blue10">
-          {match[2]}
+        <Text key={key} fontWeight="700">
+          <Link href={match[3]}>{match[2]}</Link>
         </Text>,
       );
     } else if (match[4]) {
       parts.push(
-        <Text key={key} color="$blue10">
+        <Link key={key} href={match[6]}>
           {match[5]}
-        </Text>,
+        </Link>,
       );
     } else if (match[7]) {
       parts.push(
@@ -67,28 +68,41 @@ function parseCell(content: CellContent): ReactNode {
   return parts.length === 1 ? parts[0] : parts;
 }
 
-export interface SimpleTableProps {
+export interface MarkdownSimpleTableProps {
   headers: CellContent[];
   rows: CellContent[][];
 }
 
-export function SimpleTable({ headers, rows }: SimpleTableProps) {
+/**
+ * MarkdownSimpleTable — headers/rows table for markdown-ish content.
+ *
+ * Cells are ReactNodes; string cells get a mini inline-markdown pass
+ * (links, bold, inline code). Not a data table — for that use
+ * `SimpleTable` from `@multiplatform.one/table`.
+ */
+export function MarkdownSimpleTable({ headers, rows }: MarkdownSimpleTableProps) {
   const { knobProps } = useResolvedKnobs();
   const media = useMedia();
   const isMobile = media.sm;
 
   const table = (
     <Table
+      render="table"
+      // Auto width/layout: a real <table> with width:100% against the
+      // scroller's indefinite width hits Chromium's 1e6px table clamp.
+      width="auto"
+      cellWidth="auto"
+      style={{ tableLayout: "auto" }}
       borderColor="$borderColor"
       borderRadius={knobProps.borderRadius.borderRadius}
       alignCells={{ x: "start", y: "center" }}
       alignHeaderCells={{ x: "start", y: "center" }}
       {...(isMobile && { minWidth: 760 })}
     >
-      <Table.Head>
-        <Table.Row rowLocation="first">
+      <Table.Head render="thead">
+        <Table.Row render="tr" rowLocation="first">
           {headers.map((header, headerIdx) => (
-            <Table.HeaderCell key={`h-${headerIdx}`}>
+            <Table.HeaderCell render="th" key={`h-${headerIdx}`}>
               <Paragraph size="$4" fontWeight="600">
                 {header}
               </Paragraph>
@@ -96,15 +110,19 @@ export function SimpleTable({ headers, rows }: SimpleTableProps) {
           ))}
         </Table.Row>
       </Table.Head>
-      <Table.Body>
+      <Table.Body render="tbody">
         {rows.map((row, rowIdx) => (
           <Table.Row
+            render="tr"
             key={`r-${rowIdx}`}
             rowLocation={rowIdx === rows.length - 1 ? "last" : "middle"}
           >
             {row.map((cell, cellIdx) => (
-              <Table.Cell key={`c-${rowIdx}-${cellIdx}`}>
-                <Paragraph size="$4">{parseCell(cell)}</Paragraph>
+              <Table.Cell render="td" key={`c-${rowIdx}-${cellIdx}`}>
+                {/* maxWidth caps the column's max-content contribution so long cells wrap */}
+                <Paragraph render="span" display="block" size="$4" maxWidth={480}>
+                  {parseCell(cell)}
+                </Paragraph>
               </Table.Cell>
             ))}
           </Table.Row>

package/src/MarkdownSimpleTable/markdownSimpleTable.spec.tsx

@@ -0,0 +1,92 @@
+/**
+ * MarkdownSimpleTable contract specs — headers/rows render into real
+ * table/thead/tbody semantics, and string cells get the mini inline-markdown
+ * pass (links, bold links, bold, inline code) while element cells and plain
+ * strings pass through untouched.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { MarkdownSimpleTable } from "./index";
+
+describe("MarkdownSimpleTable", () => {
+  it("renders headers into thead and rows into tbody", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable
+        headers={["Name", "Role"]}
+        rows={[
+          ["Ada", "Engineer"],
+          ["Grace", "Admiral"],
+        ]}
+      />,
+    );
+    expect(container.querySelector("table")).toBeTruthy();
+    const ths = container.querySelectorAll("thead th");
+    expect(ths).toHaveLength(2);
+    expect(ths[0].textContent).toBe("Name");
+    const bodyRows = container.querySelectorAll("tbody tr");
+    expect(bodyRows).toHaveLength(2);
+    expect(bodyRows[1].querySelectorAll("td")[1].textContent).toBe("Admiral");
+  });
+
+  it("parses [label](url) cell syntax into a real link", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable
+        headers={["Docs"]}
+        rows={[["see [guide](https://example.com/guide)"]]}
+      />,
+    );
+    const anchor = container.querySelector("tbody a");
+    expect(anchor).toBeTruthy();
+    expect(anchor!.getAttribute("href")).toBe("https://example.com/guide");
+    expect(anchor!.textContent).toBe("guide");
+    expect(container.textContent).toContain("see");
+  });
+
+  it("parses **[label](url)** into a bold link", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable headers={["Docs"]} rows={[["**[api](https://example.com/api)**"]]} />,
+    );
+    const anchor = container.querySelector("tbody a");
+    expect(anchor).toBeTruthy();
+    expect(anchor!.getAttribute("href")).toBe("https://example.com/api");
+    expect(anchor!.textContent).toBe("api");
+  });
+
+  it("parses **bold** and `code` cell fragments", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable headers={["Col"]} rows={[["a **strong** and `snippet` end"]]} />,
+    );
+    const cell = container.querySelector("tbody td");
+    expect(cell!.textContent).toBe("a strong and snippet end");
+    // Both fragments render as distinct styled spans, not raw markup.
+    expect(cell!.textContent).not.toContain("**");
+    expect(cell!.textContent).not.toContain("`");
+  });
+
+  it("leaves plain string cells untouched", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable headers={["Col"]} rows={[["just plain text"]]} />,
+    );
+    expect(container.querySelector("tbody td")!.textContent).toBe("just plain text");
+    expect(container.querySelector("tbody a")).toBeNull();
+  });
+
+  it("passes ReactNode cells through without a markdown pass", () => {
+    const { getByTestId } = renderWithProviders(
+      <MarkdownSimpleTable
+        headers={["Col"]}
+        rows={[
+          [
+            <Text key="x" data-testid="element-cell">
+              **not parsed**
+            </Text>,
+          ],
+        ]}
+      />,
+    );
+    // The literal asterisks survive because element cells skip parseCell.
+    expect(getByTestId("element-cell").textContent).toBe("**not parsed**");
+  });
+});

package/src/Mdx/index.tsx

@@ -1,4 +1,5 @@
 import { useMDXComponents } from "@mdx-js/react";
+import { ErrorBoundary } from "@multiplatform.one/components";
 import type { DebugProp } from "@tamagui/web";
 import type { MDXComponents } from "mdx/types";
 import { useCompileAndEvaluateMdx } from "../hooks";
@@ -21,12 +22,16 @@ export function MDX({ children, debug, ...props }: MDXProps) {
     logger.debug(code);
   }
   return (
-    <Component
-      components={{
-        ...mdxComponents,
-        ...components,
-        ...props.components,
-      }}
-    />
+    // contain runtime render errors (e.g. missing component mappings) so
+    // sibling content outside the MDX renderer survives
+    <ErrorBoundary>
+      <Component
+        components={{
+          ...mdxComponents,
+          ...components,
+          ...props.components,
+        }}
+      />
+    </ErrorBoundary>
   );
 }

package/src/MdxCodeBlock/index.tsx

@@ -11,8 +11,9 @@ import { LinearGradient } from "@tamagui/linear-gradient";
 import rangeParser from "parse-numeric-range";
 import type { ReactNode } from "react";
 import { useContext, useMemo, useState } from "react";
-import { Button, ScrollView, Spacer, TooltipSimple, XStack, YStack } from "tamagui";
+import { Button, ScrollView, TooltipSimple, XStack, YStack } from "tamagui";
 import { CheckCircleIcon, ClipboardIcon } from "../icons";
+import { useCutoffGradientColors } from "../shared/cutoffGradient";
 
 const zIndex = { localTop: 100 };
 import type { MDXCodeBlockContextValue } from "./mdxCodeBlockContext";
@@ -62,6 +63,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
   };
 
   const { knobProps } = useResolvedKnobs();
+  const gradientColors = useCutoffGradientColors();
   const codeText = useMemo(() => extractCodeText(children).replace(/\n$/, ""), [children]);
   const language = useMemo(() => extractLanguage(className), [className]);
   const tokens = useShikiTokens(codeText, language);
@@ -90,21 +92,28 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
           })}
         >
           {(!isCollapsed || !isCollapsible) && isCutoff && (
-            <LinearGradient
-              position="absolute"
-              bottom={0}
-              left={0}
-              right={0}
-              height={200}
-              colors={["$backgroundTransparent", "$background"]}
-              zIndex={zIndex.localTop}
-            >
-              <Spacer flex={1} />
-              <Button onPress={() => setIsCutoff(!isCutoff)} alignSelf="center">
-                Show more
-              </Button>
-              <Spacer size="$4" />
-            </LinearGradient>
+            <>
+              <LinearGradient
+                position="absolute"
+                bottom={0}
+                left={0}
+                right={0}
+                height={200}
+                colors={gradientColors}
+                pointerEvents="none"
+                zIndex={zIndex.localTop}
+              />
+              <XStack
+                position="absolute"
+                bottom="$4"
+                left={0}
+                right={0}
+                justifyContent="center"
+                zIndex={zIndex.localTop + 1}
+              >
+                <Button onPress={() => setIsCutoff(false)}>Show more</Button>
+              </XStack>
+            </>
           )}
           {(!isCollapsed || !isCollapsible) && (
             <Pre
@@ -122,8 +131,12 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                 <Code
                   backgroundColor="transparent"
                   flex={1}
+                  borderWidth={0}
+                  // SP-PAD + T-VALUE via sizeToken (spec MdxCodeBlock; LC-18):
+                  // inset rides the space knob, content type rides the size
+                  // knob — components-CodeBlock parity. Explicit props eject.
                   {...knobProps.panelPadding}
-                  size={(size ?? "$5") as any}
+                  size={(size ?? knobProps.sizeToken) as any}
                   {...codeProps}
                 >
                   <HighlightedCode
@@ -137,7 +150,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               </ScrollView>
             </Pre>
           )}
-          <XStack position="absolute" top="$3" right="$3" {...knobProps.gap}>
+          <XStack position="absolute" top="$3" insetInlineEnd="$3" {...knobProps.gap}>
             {(!isCollapsed || !isCollapsible) && !disableCopy && (
               <TooltipSimple label={hasCopied ? "Copied" : "Copy to clipboard"}>
                 <Button
@@ -145,7 +158,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                   size="$2"
                   icon={hasCopied ? <CheckCircleIcon size={14} /> : <ClipboardIcon size={14} />}
                   onPress={onCopy}
-                  $xs={{
+                  $max-xs={{
                     display: "none",
                   }}
                 />
@@ -153,7 +166,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
             )}
             {isCollapsible && (
               <Button
-                accessibilityLabel="Show or hide code"
+                aria-label="Show or hide code"
                 size="$2"
                 onPress={() => setIsCollapsed((x) => !x)}
               >

package/src/Notice/index.tsx

@@ -1,21 +1,14 @@
-import { unwrapText } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Alert, type AlertIntent, unwrapText } from "@multiplatform.one/components";
 import type { ReactNode } from "react";
-import { H3, Paragraph, XStack, YStack, styled } from "tamagui";
-import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from "../icons";
 
 type NoticeTheme = "yellow" | "blue" | "green" | "red";
 
-function getIcon(theme: NoticeTheme) {
-  switch (theme) {
-    case "blue":
-      return InfoIcon;
-    case "green":
-      return CheckCircleIcon;
-    default:
-      return AlertTriangleIcon;
-  }
-}
+const themeIntentMap: Record<NoticeTheme, AlertIntent> = {
+  yellow: "warning",
+  blue: "info",
+  green: "success",
+  red: "error",
+};
 
 export interface NoticeProps {
   children: ReactNode;
@@ -24,15 +17,7 @@ export interface NoticeProps {
   title?: string;
 }
 
-export const NoticeFrame = styled(YStack, {
-  name: "NoticeFrame",
-  borderWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$background",
-  marginVertical: "$4",
-  position: "relative",
-});
-
+/** Markdown-facing callout: a thin wrapper mapping Notice themes onto Alert intents. */
 export function Notice({
   children,
   theme = "yellow",
@@ -40,37 +25,10 @@ export function Notice({
   title,
   ...props
 }: NoticeProps & Record<string, unknown>) {
-  const { knobProps } = useResolvedKnobs();
-  const IconComponent = getIcon(theme);
-
+  const content = disableUnwrap ? children : unwrapText(children);
   return (
-    <NoticeFrame
-      {...knobProps.panelPadding}
-      {...knobProps.gap}
-      borderRadius={knobProps.borderRadius.borderRadius}
-      {...props}
-    >
-      <XStack {...knobProps.gap}>
-        <YStack marginTop={5}>
-          <IconComponent size={20} color="$color10" />
-        </YStack>
-        <YStack flex={1}>
-          {title && (
-            <H3 size="$5" marginBottom={-10} marginTop={5}>
-              {title}
-            </H3>
-          )}
-          <Paragraph
-            paddingVertical={knobProps.gap.gap}
-            color="$color11"
-            marginTop={-3}
-            marginBottom={-3}
-            size="$5"
-          >
-            {disableUnwrap ? children : unwrapText(children)}
-          </Paragraph>
-        </YStack>
-      </XStack>
-    </NoticeFrame>
+    <Alert intent={themeIntentMap[theme]} title={title} marginVertical="$4" {...props}>
+      {content}
+    </Alert>
   );
 }

package/src/Table/index.tsx

@@ -17,6 +17,12 @@ export function MDXTable({
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
       <MDXTableFrame>
         <BaseTable
+          render="table"
+          // Auto width/layout: a real <table> with width:100% against the
+          // scroller's indefinite width hits Chromium's 1e6px table clamp.
+          width="auto"
+          cellWidth="auto"
+          style={{ tableLayout: "auto" }}
           borderColor="$borderColor"
           borderRadius={knobProps.borderRadius.borderRadius}
           alignCells={{ x: "start", y: "center" }}
@@ -34,14 +40,22 @@ export function MDXTableHead({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
-  return <BaseTable.Head {...props}>{children}</BaseTable.Head>;
+  return (
+    <BaseTable.Head render="thead" {...props}>
+      {children}
+    </BaseTable.Head>
+  );
 }
 
 export function MDXTableBody({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
-  return <BaseTable.Body {...props}>{children}</BaseTable.Body>;
+  return (
+    <BaseTable.Body render="tbody" {...props}>
+      {children}
+    </BaseTable.Body>
+  );
 }
 
 export function MDXTableRow({
@@ -49,7 +63,7 @@ export function MDXTableRow({
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
   return (
-    <BaseTable.Row rowLocation="middle" {...props}>
+    <BaseTable.Row render="tr" rowLocation="middle" {...props}>
       {children}
     </BaseTable.Row>
   );
@@ -60,7 +74,7 @@ export function MDXTableHeaderCell({
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
   return (
-    <BaseTable.HeaderCell {...props}>
+    <BaseTable.HeaderCell render="th" {...props}>
       <Paragraph size="$4" fontWeight="600">
         {children}
       </Paragraph>
@@ -73,8 +87,10 @@ export function MDXTableCell({
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
   return (
-    <BaseTable.Cell {...props}>
-      <Paragraph size="$4">{children}</Paragraph>
+    <BaseTable.Cell render="td" {...props}>
+      <Paragraph render="span" display="block" size="$4">
+        {children}
+      </Paragraph>
     </BaseTable.Cell>
   );
 }

package/src/Tabs/index.tsx

@@ -1,34 +1,16 @@
+/**
+ * MDX doc tabs.
+ *
+ * LC-16 wrapper over the canonical `Tabs` from
+ * `@multiplatform.one/components` (tamagui tablist/tab/tabpanel aria, roving
+ * focus, knob-scaled underline variant) instead of the previous hand-rolled
+ * strip. This file only owns the MDX-facing API: parallel `items` (labels)
+ * and `children` (panels) arrays, with `defaultValue` addressing a label.
+ */
+
+import { Tabs } from "@multiplatform.one/components";
 import type { ReactNode } from "react";
-import { useState } from "react";
-import { Paragraph, XStack, YStack, styled } from "tamagui";
-
-const TabListFrame = styled(XStack, {
-  borderBottomWidth: 1,
-  borderBottomColor: "$borderColor",
-  marginBottom: "$3",
-  gap: "$1",
-});
-
-const TabTrigger = styled(XStack, {
-  paddingHorizontal: "$4",
-  paddingVertical: "$2",
-  cursor: "pointer",
-  borderBottomWidth: 2,
-  borderBottomColor: "transparent",
-  marginBottom: -1,
-
-  hoverStyle: {
-    backgroundColor: "$color3",
-  },
-
-  variants: {
-    active: {
-      true: {
-        borderBottomColor: "$color10",
-      },
-    },
-  } as const,
-});
+import { YStack } from "tamagui";
 
 export interface MDXTabsProps {
   items: string[];
@@ -37,32 +19,24 @@ export interface MDXTabsProps {
 }
 
 export function MDXTabs({ items, children, defaultValue }: MDXTabsProps) {
-  const [activeIndex, setActiveIndex] = useState(() => {
-    if (defaultValue) {
-      const idx = items.indexOf(defaultValue);
-      return idx >= 0 ? idx : 0;
-    }
-    return 0;
-  });
-
   const childArray = Array.isArray(children) ? children : [children];
+  // Doc labels may repeat; index-suffixed values keep tab identity unique.
+  const values = items.map((label, index) => `${label}-${index}`);
+  const defaultIndex = defaultValue ? Math.max(items.indexOf(defaultValue), 0) : 0;
 
   return (
     <YStack marginVertical="$4">
-      <TabListFrame>
-        {items.map((item, i) => (
-          <TabTrigger key={item} active={i === activeIndex} onPress={() => setActiveIndex(i)}>
-            <Paragraph
-              size="$4"
-              fontWeight={i === activeIndex ? "600" : "400"}
-              color={i === activeIndex ? "$color12" : "$color9"}
-            >
-              {item}
-            </Paragraph>
-          </TabTrigger>
-        ))}
-      </TabListFrame>
-      <YStack>{childArray[activeIndex] ?? null}</YStack>
+      <Tabs
+        items={items.map((label, index) => ({
+          value: values[index]!,
+          label,
+          // Panels mount on first visit and stay mounted (lazyMount), so
+          // focus/input state inside a visited panel survives switching.
+          content: childArray[index] ?? null,
+        }))}
+        defaultValue={values[defaultIndex]}
+        lazyMount
+      />
     </YStack>
   );
 }

package/src/Ul/index.ts

@@ -4,8 +4,8 @@ export const UL = styled(YStack, {
   name: "UL",
   render: "ul",
   marginVertical: "$1",
-  marginLeft: "$4",
-  marginRight: "$2",
+  marginInlineStart: "$4",
+  marginInlineEnd: "$2",
 });
 
 export type ULProps = React.ComponentProps<typeof UL>;

package/src/Video/index.tsx

@@ -26,18 +26,21 @@ export function Video({
   return (
     <YStack render="figure" marginHorizontal={0} marginVertical="$6" {...props}>
       {isWeb ? (
-        <YStack
-          render="video"
-          // @ts-expect-error HTML video attributes via render prop
-          src={src}
-          autoPlay={autoPlay}
-          playsInline
-          muted={muted}
-          controls={controls}
-          loop={loop}
-          poster={poster}
-          style={{ width: "100%", display: "block", borderRadius: 8 }}
-        />
+        src ? (
+          <YStack
+            render="video"
+            // @ts-expect-error HTML video attributes via render prop
+            src={src}
+            autoPlay={autoPlay}
+            playsInline
+            muted={muted}
+            controls={controls}
+            loop={loop}
+            poster={poster}
+            style={{ width: "100%", display: "block", borderRadius: 8 }}
+          />
+        ) : // omit the element entirely for an empty src (SB-M-1227)
+        null
       ) : (
         <YStack
           {...knobProps.panelPadding}

package/src/components/Blockquote.tsx

@@ -1,18 +1,43 @@
-import { View } from "tamagui";
+import { View, getTokens, isWeb, useTheme } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { markdownBlockquoteColors } from "../shared/colorRamps";
 import type { BlockquoteProps } from "../types";
 
 export function Blockquote({ children }: BlockquoteProps) {
   const { knobProps } = useResolvedKnobs();
+  const theme = useTheme();
+  const padToken = knobProps.panelPadding.padding as number | string;
+  const pad =
+    typeof padToken === "number"
+      ? padToken
+      : ((getTokens().space as any)?.[padToken]?.val ?? padToken);
   return (
     <View
       backgroundColor={markdownBlockquoteColors.background.base}
-      borderLeftWidth={4}
-      borderLeftColor={markdownBlockquoteColors.border.base}
-      paddingLeft={knobProps.panelPadding.padding}
+      // R-SCALE quote frame (spec Blockquote): the painted quote surface
+      // rounds with the radius knob, capped at its own padding (Axiom 1 —
+      // containerRadius fragment). Was radius-dead (spec conformance note).
+      {...knobProps.containerRadius}
       paddingVertical={knobProps.gap.gap}
       marginVertical="$3"
+      // CSS logical properties keep the border and padding on the logical
+      // start side in RTL (SB-M-1215); tamagui borderStartWidth does not
+      // compile to working CSS in this version. Native uses the RN logical
+      // border/padding props, which flip with I18nManager.
+      {...(isWeb
+        ? {
+            style: {
+              borderInlineStartWidth: 4,
+              borderInlineStartStyle: "solid",
+              borderInlineStartColor: theme.color8?.val ?? "#999",
+              paddingInlineStart: pad,
+            } as any,
+          }
+        : {
+            borderStartWidth: 4,
+            borderStartColor: markdownBlockquoteColors.border.base,
+            paddingStart: knobProps.panelPadding.padding,
+          })}
     >
       {children}
     </View>