@multiplatform.one/markdown 6.0.4 → 6.3.0

package/src/components/Break.tsx

@@ -1,6 +1,8 @@
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import type { BreakProps } from "../types";
 
 export function Break(_props: BreakProps) {
+  // a literal "\n" collapses under white-space: normal on web (SB-M-1210)
+  if (isWeb) return <br />;
   return <Text>{"\n"}</Text>;
 }

package/src/components/CodeBlock.tsx

@@ -1,93 +1,63 @@
+/**
+ * Plain-markdown code block.
+ *
+ * LC-16 wrapper: tokenizing and token rendering come from the canonical
+ * `@multiplatform.one/components` code family (`useShikiTokens` +
+ * `HighlightedCode` — one shiki highlighter for the whole app). This file
+ * only owns the markdown-specific container chrome: the block inset (rides
+ * the space knob — SP-PAD, spec CodeBlock frame) and the shared markdown
+ * code color ramp.
+ */
+
+import { Code, HighlightedCode, useShikiTokens } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useEffect, useState } from "react";
-import { ScrollView, Text, View, XStack } from "tamagui";
+import { ScrollView, View } from "tamagui";
 import { markdownCodeColors } from "../shared/colorRamps";
-import { highlightCode, type ThemedToken, type BundledTheme } from "../shiki";
 import type { CodeBlockProps } from "../types";
 
 interface CodeBlockInternalProps extends CodeBlockProps {
-  theme?: BundledTheme;
+  theme?: string | "auto";
 }
 
-export function CodeBlock({ children, lang, theme = "github-dark" }: CodeBlockInternalProps) {
+export function CodeBlock({ children, lang, theme: themeProp = "auto" }: CodeBlockInternalProps) {
   const { knobProps } = useResolvedKnobs();
-  const [tokens, setTokens] = useState<ThemedToken[][] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    highlightCode(children, lang || "text", theme)
-      .then((result) => {
-        if (!cancelled) {
-          setTokens(result);
-          setError(null);
-        }
-      })
-      .catch((err) => {
-        if (!cancelled) {
-          setError(String(err));
-          setTokens(null);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [children, lang, theme]);
-
-  const containerProps = {
-    borderRadius: knobProps.borderRadiusOuter?.borderRadius ?? "$4",
-    backgroundColor: markdownCodeColors.background.base,
-    borderWidth: 1,
-    borderColor: markdownCodeColors.border.base,
-    padding: knobProps.panelPadding.padding,
-    marginVertical: "$2",
-    overflow: "hidden" as const,
-  };
-
-  // Loading or error fallback
-  if (!tokens || error) {
-    return (
-      <View {...containerProps}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <Text
-            fontFamily="$mono"
-            fontSize={knobProps.sizeToken}
-            color={markdownCodeColors.text.muted}
-          >
-            {children}
-          </Text>
-        </ScrollView>
-      </View>
-    );
-  }
+  // "auto" defers to useShikiTokens' scheme default (github-light/dark from
+  // the active Tamagui theme), so direct CodeBlock use matches the color
+  // scheme instead of painting dark tokens on a light container (SB-M-1216).
+  const tokens = useShikiTokens(
+    children,
+    lang || "text",
+    themeProp === "auto" ? undefined : themeProp,
+  );
 
   return (
-    <View {...containerProps}>
+    <View
+      // Full fragment spread (AGENTS.md knob rule) so the cornerSmoothing
+      // class rides along with the outer radius; the fallback keeps the old
+      // default when a Preset override drops the fragment.
+      {...(knobProps.borderRadiusOuter ?? { borderRadius: "$4" })}
+      backgroundColor={markdownCodeColors.background.base}
+      borderWidth={1}
+      borderColor={markdownCodeColors.border.base}
+      // SP-PAD (spec CodeBlock frame; LC-18 / UX-P07): the block inset rides
+      // the space knob through the complete panelPadding fragment —
+      // components-CodeBlock parity.
+      {...knobProps.panelPadding}
+      marginVertical="$2"
+      overflow="hidden"
+    >
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <View>
-          {tokens.map((line, lineIndex) => (
-            <XStack key={lineIndex} minHeight={20}>
-              {line.length === 0 ? (
-                <Text fontFamily="$mono" fontSize={knobProps.sizeToken}>
-                  {"\n"}
-                </Text>
-              ) : (
-                line.map((token, tokenIndex) => (
-                  <Text
-                    key={tokenIndex}
-                    fontFamily="$mono"
-                    fontSize={knobProps.sizeToken}
-                    style={{ color: token.color }}
-                  >
-                    {token.content}
-                  </Text>
-                ))
-              )}
-            </XStack>
-          ))}
-        </View>
+        <Code
+          backgroundColor="transparent"
+          borderWidth={0}
+          padding={0}
+          color={markdownCodeColors.text.base}
+          fontSize={knobProps.sizeToken}
+        >
+          <HighlightedCode tokens={tokens} fontSize={knobProps.sizeToken}>
+            {children}
+          </HighlightedCode>
+        </Code>
       </ScrollView>
     </View>
   );

package/src/components/Heading.tsx

@@ -1,4 +1,5 @@
-import { H1, H2, H3, H4, H5, H6 } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { H1, H2, H3, H4, H5, H6, isWeb } from "tamagui";
 import type { HeadingProps } from "../types";
 
 const headingComponents = {
@@ -10,10 +11,22 @@ const headingComponents = {
   6: H6,
 } as const;
 
+/** Tamagui default heading scale per level (medium size knob keeps these). */
+const headingBaseSize = { 1: 9, 2: 8, 3: 7, 4: 6, 5: 5, 6: 4 } as const;
+
+/** Size knob shifts the whole heading scale one step, preserving hierarchy. */
+const sizeShift: Record<string, number> = { $3: -1, $4: 0, $5: 1 };
+
 export function Heading({ level, children }: HeadingProps) {
   const Component = headingComponents[level];
+  // T-HEADING: heading recipe + sizeToken-appropriate scale (spec: Heading).
+  // Web resolves the heading family through the tamagui font config, so the
+  // fontFamily override is native-only (same pattern as PageHeader).
+  const { knobProps } = useResolvedKnobs();
+  const headingFamily = isWeb ? null : { fontFamily: knobProps.heading.fontFamily };
+  const size = `$${headingBaseSize[level] + (sizeShift[knobProps.sizeToken] ?? 0)}`;
   return (
-    <Component marginTop="$3" marginBottom="$2">
+    <Component marginTop="$3" marginBottom="$2" size={size as any} {...headingFamily}>
       {children}
     </Component>
   );

package/src/components/Image.tsx

@@ -7,12 +7,15 @@ export function MarkdownImage({ src, alt, title }: ImageProps) {
   return (
     <View marginVertical="$2">
       <TamaguiImage
-        source={{ uri: src }}
+        // src (string), not source: the RN source object never reaches the
+        // DOM <img> src on web, so the image silently renders empty; tamagui
+        // maps src back to source={{uri}} on native.
+        src={src}
         alt={alt || ""}
-        accessibilityLabel={alt || title || "Image"}
+        aria-label={alt || title || undefined}
         width="100%"
         height={200}
-        resizeMode="contain"
+        objectFit="contain"
         borderRadius={knobProps.borderRadius.borderRadius}
       />
     </View>

package/src/components/InlineCode.tsx

@@ -1,21 +1,28 @@
-import { Text } from "tamagui";
+/**
+ * Plain-markdown inline code.
+ *
+ * LC-16 wrapper over the canonical `CodeInline` from
+ * `@multiplatform.one/components` (real `<code>` semantics, shared code
+ * color ramp). Markdown-specific constraint kept here: sizing uses the size
+ * knob token instead of CodeInline's web-only percentage font metrics, so
+ * the same source renders on native (React Native has no % font sizes).
+ */
+
+import { CodeInline } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { markdownCodeColors } from "../shared/colorRamps";
 import type { InlineCodeProps } from "../types";
 
 export function InlineCode({ children }: InlineCodeProps) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <Text
-      fontFamily="$mono"
+    <CodeInline
       fontSize={knobProps.sizeToken}
-      backgroundColor={markdownCodeColors.background.base}
-      color={markdownCodeColors.text.base}
+      lineHeight={knobProps.sizeToken}
       paddingHorizontal="$1.5"
       paddingVertical="$0.5"
       borderRadius={knobProps.borderRadius.borderRadius}
     >
       {children}
-    </Text>
+    </CodeInline>
   );
 }

package/src/components/InlineStyles.tsx

@@ -2,13 +2,25 @@ import { Text } from "tamagui";
 import type { InlineProps } from "../types";
 
 export function Strong({ children }: InlineProps) {
-  return <Text fontWeight="bold">{children}</Text>;
+  return (
+    <Text render="strong" fontWeight="bold">
+      {children}
+    </Text>
+  );
 }
 
 export function Emphasis({ children }: InlineProps) {
-  return <Text fontStyle="italic">{children}</Text>;
+  return (
+    <Text render="em" fontStyle="italic">
+      {children}
+    </Text>
+  );
 }
 
 export function Strikethrough({ children }: InlineProps) {
-  return <Text textDecorationLine="line-through">{children}</Text>;
+  return (
+    <Text render="del" textDecorationLine="line-through">
+      {children}
+    </Text>
+  );
 }

package/src/components/Link.tsx

@@ -1,24 +1,47 @@
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { openUrl } from "@multiplatform.one/platform";
 import { markdownLinkColors } from "../shared/colorRamps";
 import type { LinkProps } from "../types";
 
+const safeProtocols = new Set(["http", "https", "mailto", "tel", "sms"]);
+
+function getSafeHref(href?: string): string | undefined {
+  if (!href) return undefined;
+  const trimmed = href.trim();
+  const match = trimmed.match(/^([a-z][a-z0-9+.-]*):/i);
+  // relative, hash, and query hrefs have no scheme and are safe
+  if (!match) return trimmed;
+  return safeProtocols.has(match[1].toLowerCase()) ? trimmed : undefined;
+}
+
 export function Link({ href, title, children }: LinkProps) {
+  const safeHref = getSafeHref(href);
+  const isExternal = !!safeHref && /^https?:\/\//i.test(safeHref);
+
   const handlePress = () => {
-    if (href) {
-      openUrl(href);
-    }
+    // web navigation is handled natively by the anchor element
+    if (!isWeb && safeHref) openUrl(safeHref);
   };
 
   return (
     <Text
+      render="a"
+      // @ts-expect-error anchor attributes forwarded to the DOM element
+      href={safeHref}
+      target={isExternal ? "_blank" : undefined}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+      title={title || undefined}
       color={markdownLinkColors.text.base}
       textDecorationLine="underline"
       cursor="pointer"
       onPress={handlePress}
-      accessibilityRole="link"
-      accessibilityLabel={title || undefined}
       hoverStyle={{ color: markdownLinkColors.text.hover }}
+      focusVisibleStyle={{
+        outlineColor: "$outlineColor",
+        outlineWidth: 2,
+        outlineStyle: "solid",
+        outlineOffset: 2,
+      }}
     >
       {children}
     </Text>

package/src/components/List.tsx

@@ -1,13 +1,108 @@
-import { View, XStack, Text } from "tamagui";
-import type { ListProps, ListItemProps } from "../types";
+import { Children, cloneElement, isValidElement } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, View, XStack, getConfig, getVariableValue } from "tamagui";
+import { CheckIcon } from "../icons";
+import type { ListItemProps, ListProps } from "../types";
 
-export function MarkdownList({ ordered: _ordered, start: _start, children }: ListProps) {
-  return <View marginVertical="$2">{children}</View>;
+const listReset = {
+  listStyleType: "none",
+  paddingInlineStart: 0,
+  marginBlockStart: 0,
+  marginBlockEnd: 0,
+} as any;
+
+export function MarkdownList({ ordered, start, children }: ListProps) {
+  const items = Children.map(children, (child) => {
+    if (!isValidElement(child) || child.type !== MarkdownListItem) return child;
+    const childProps = child.props as ListItemInternalProps;
+    return cloneElement(child as React.ReactElement<ListItemInternalProps>, {
+      ordered: childProps.ordered ?? ordered,
+      start: childProps.start ?? start ?? undefined,
+    });
+  });
+  return (
+    <View
+      render={ordered ? "ol" : "ul"}
+      start={ordered ? (start ?? undefined) : undefined}
+      style={listReset}
+      marginVertical="$2"
+    >
+      {items}
+    </View>
+  );
 }
 
 interface ListItemInternalProps extends ListItemProps {
   index?: number;
   ordered?: boolean;
+  start?: number;
+}
+
+/**
+ * Typography of the prose the task marker sits beside: markdown Paragraph
+ * renders the $body font at size $true with lineHeight $6 (./Paragraph.tsx).
+ * The box derives from those same tokens so it scales with the body type
+ * instead of a hardcoded glyph column (theme-propagation-spec: MarkdownListItem
+ * marker "scales with type/size").
+ */
+function getTaskBoxMetrics() {
+  const bodyFont = getConfig()?.fontsParsed?.$body;
+  const fontSize = Math.round(getVariableValue(bodyFont?.size?.$true) || 14);
+  const lineHeight = Math.round(getVariableValue(bodyFont?.lineHeight?.$6) || fontSize * 2);
+  return { boxSize: Math.round(fontSize * 1.15), lineHeight };
+}
+
+/** Box↔label gap by space knob — mirrors the forms Checkbox inline gap. */
+const taskInlineGapMap: Record<string, string> = {
+  small: "$1.5",
+  medium: "$2",
+  large: "$2.5",
+};
+
+/** Cap the radius knob for a small square control (R-CLAMP: never a circle). */
+function clampTaskBoxRadius(radiusToken: string, pointy: boolean): string | number {
+  if (pointy || radiusToken === "$0") return 0;
+  const num = Number.parseInt(radiusToken.replace("$", ""), 10);
+  return Number.isFinite(num) && num > 2 ? "$2" : radiusToken;
+}
+
+/**
+ * Read-only GFM task-list marker. It is document content, not a form field:
+ * never focusable or clickable, state conveyed via role/aria only. Drawn with
+ * the house control treatment ($color5 surface, $color7 border, accent check)
+ * so radius/border/fill/space/accent/weight knobs all reach it (LC-18).
+ */
+function TaskCheckbox({ checked }: { checked: boolean }) {
+  const { knobProps } = useResolvedKnobs();
+  const { boxSize, lineHeight } = getTaskBoxMetrics();
+  return (
+    <View height={lineHeight} justifyContent="center">
+      <View
+        role="checkbox"
+        aria-checked={checked}
+        aria-disabled={true}
+        width={boxSize}
+        height={boxSize}
+        borderWidth={knobProps.borderRadius.borderWidth}
+        borderColor="$color7"
+        backgroundColor={knobProps.outlined ? "transparent" : "$color5"}
+        borderRadius={clampTaskBoxRadius(
+          knobProps.borderRadius.borderRadius as string,
+          knobProps.pointy,
+        )}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {checked ? (
+          <CheckIcon
+            size={Math.round(boxSize * 0.72)}
+            color={knobProps.textAccentColor}
+            strokeWidth={knobProps.textWeight.fontWeight === "700" ? 3 : 2.5}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
 }
 
 export function MarkdownListItem({
@@ -15,24 +110,29 @@ export function MarkdownListItem({
   children,
   index = 0,
   ordered = false,
+  start,
 }: ListItemInternalProps) {
-  const bullet = ordered ? `${index + 1}.` : "•";
+  const { knobProps } = useResolvedKnobs();
+  const bullet = ordered ? `${(start ?? 1) + index}.` : "•";
 
   // Task list item
   if (checked !== null && checked !== undefined) {
     return (
-      <XStack marginBottom="$1" alignItems="flex-start">
-        <Text width={24} color="$color11">
-          {checked ? "☑" : "☐"}
-        </Text>
+      <XStack
+        render="li"
+        marginBottom="$1"
+        alignItems="flex-start"
+        gap={taskInlineGapMap[knobProps.space] ?? "$2"}
+      >
+        <TaskCheckbox checked={checked} />
         <View flex={1}>{children}</View>
       </XStack>
     );
   }
 
   return (
-    <XStack marginBottom="$1" alignItems="flex-start">
-      <Text width={24} color="$color11">
+    <XStack render="li" marginBottom="$1" alignItems="flex-start">
+      <Text width={24} color="$color11" aria-hidden>
         {bullet}
       </Text>
       <View flex={1}>{children}</View>

package/src/components/Paragraph.tsx

@@ -1,9 +1,14 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Paragraph as TamaguiParagraph } from "tamagui";
 import type { ParagraphProps } from "../types";
 
 export function Paragraph({ children }: ParagraphProps) {
+  // Prose is T-VALUE: body recipe (family/weight) + size-knob body scale
+  // (spec: markdown Paragraph binds `body`; LC-18). The size prop carries
+  // the paired lineHeight, replacing the old fixed $6.
+  const { knobProps } = useResolvedKnobs();
   return (
-    <TamaguiParagraph marginBottom="$2" lineHeight="$6">
+    <TamaguiParagraph marginBottom="$2" size={knobProps.sizeToken as any} {...knobProps.body}>
       {children}
     </TamaguiParagraph>
   );

package/src/components/Table.tsx

@@ -1,56 +1,77 @@
+/**
+ * Plain-markdown table renderer.
+ *
+ * Built on `@multiplatform.one/table-primitives` so plain-markdown tables
+ * render real `<table>/<thead>/<tbody>/<tr>/<th>/<td>` semantics and match
+ * the MDX table styling. The renderer emits a flat list of rows (first row
+ * flagged `isHeader`); MarkdownTable partitions them into head and body.
+ */
+
+import { Children, isValidElement } from "react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, Text, XStack, YStack, ScrollView } from "tamagui";
-import { markdownTableColors } from "../shared/colorRamps";
+import { Paragraph, ScrollView, YStack } from "tamagui";
+import { Table } from "@multiplatform.one/table-primitives";
 import type { TableProps, TableRowProps, TableCellProps } from "../types";
 
+function isHeaderRow(row: unknown): boolean {
+  return isValidElement(row) && Boolean((row.props as TableRowProps).isHeader);
+}
+
 export function MarkdownTable({ children }: TableProps) {
   const { knobProps } = useResolvedKnobs();
+  const rows = Children.toArray(children);
+  const headerRows = rows.filter((row) => isHeaderRow(row));
+  const bodyRows = rows.filter((row) => !isHeaderRow(row));
 
   return (
-    <ScrollView horizontal marginVertical="$3">
-      <YStack
-        {...knobProps.borderRadiusOuter}
-        borderWidth={1}
-        borderColor={markdownTableColors.border.base}
-        overflow="hidden"
-        minWidth="100%"
-      >
-        {children}
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} marginVertical="$3">
+      <YStack minWidth="100%">
+        <Table
+          render="table"
+          // Size by content inside the horizontal scroller: a real <table> with
+          // width:100% against the scroller's indefinite width hits Chromium's
+          // 1e6px table clamp. Auto width + auto layout = GitHub-style
+          // shrink-to-fit columns; cellWidth="auto" lifts the token width cap.
+          width="auto"
+          cellWidth="auto"
+          style={{ tableLayout: "auto" }}
+          borderColor="$borderColor"
+          borderRadius={knobProps.borderRadius.borderRadius}
+          alignCells={{ x: "start", y: "center" }}
+          alignHeaderCells={{ x: "start", y: "center" }}
+        >
+          {headerRows.length > 0 && <Table.Head render="thead">{headerRows}</Table.Head>}
+          <Table.Body render="tbody">{bodyRows}</Table.Body>
+        </Table>
       </YStack>
     </ScrollView>
   );
 }
 
-export function MarkdownTableRow({ children, isHeader }: TableRowProps) {
-  return (
-    <XStack
-      backgroundColor={
-        isHeader ? markdownTableColors.background.header : markdownTableColors.background.base
-      }
-      borderBottomWidth={isHeader ? 1 : 0.5}
-      borderBottomColor={markdownTableColors.border.base}
-    >
-      {children}
-    </XStack>
-  );
+export function MarkdownTableRow({ children }: TableRowProps) {
+  // `isHeader` is consumed by MarkdownTable to place the row in thead/tbody.
+  return <Table.Row render="tr">{children}</Table.Row>;
 }
 
 export function MarkdownTableCell({ children, isHeader, align }: TableCellProps) {
-  const { knobProps } = useResolvedKnobs();
   const textAlign = align || "left";
 
+  if (isHeader) {
+    return (
+      <Table.HeaderCell render="th">
+        <Paragraph render="span" display="block" size="$4" fontWeight="600" textAlign={textAlign}>
+          {children}
+        </Paragraph>
+      </Table.HeaderCell>
+    );
+  }
+
   return (
-    <View
-      flex={1}
-      paddingHorizontal={knobProps.gap.gap}
-      paddingVertical="$2"
-      borderRightWidth={0.5}
-      borderRightColor={markdownTableColors.border.base}
-      justifyContent="center"
-    >
-      <Text fontWeight={isHeader ? "600" : "normal"} textAlign={textAlign}>
+    <Table.Cell render="td">
+      {/* maxWidth caps the column's max-content contribution so long cells wrap */}
+      <Paragraph render="span" display="block" size="$4" textAlign={textAlign} maxWidth={480}>
         {children}
-      </Text>
-    </View>
+      </Paragraph>
+    </Table.Cell>
   );
 }