@multiplatform.one/markdown 7.4.0 → 7.5.0

package/src/components/Heading.tsx

@@ -26,7 +26,13 @@ export function Heading({ level, children }: HeadingProps) {
   const headingFamily = isWeb ? null : { fontFamily: knobProps.heading.fontFamily };
   const size = `$${headingBaseSize[level] + (sizeShift[knobProps.sizeToken] ?? 0)}`;
   return (
-    <Component marginTop="$3" marginBottom="$2" size={size as any} {...headingFamily}>
+    <Component
+      marginTop="$3"
+      marginBottom="$2"
+      size={size as any}
+      {...knobProps.heading}
+      {...headingFamily}
+    >
       {children}
     </Component>
   );

package/src/components/HorizontalRule.tsx

@@ -1,6 +1,23 @@
-import { Separator } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { View } from "tamagui";
 import type { HorizontalRuleProps } from "../types";
 
+/**
+ * Semantic divider. House paint is a filled 1px rule (R9 G10 — weight is
+ * not a knob). `borderWidth=none` hides the rule without leaving a 1px gap.
+ */
 export function HorizontalRule(_props: HorizontalRuleProps) {
-  return <Separator marginVertical="$4" />;
+  const { knobProps } = useResolvedKnobs();
+  if (knobProps.borderRadius.borderWidth === 0) return null;
+  return (
+    <View
+      role="separator"
+      height={1}
+      backgroundColor="$borderColor"
+      alignSelf="stretch"
+      flexGrow={0}
+      flexShrink={0}
+      marginVertical="$4"
+    />
+  );
 }

package/src/components/Image.tsx

@@ -14,9 +14,10 @@ export function MarkdownImage({ src, alt, title }: ImageProps) {
         alt={alt || ""}
         aria-label={alt || title || undefined}
         width="100%"
-        height={200}
+        aspectRatio={16 / 9}
         objectFit="contain"
-        borderRadius={knobProps.borderRadius.borderRadius}
+        // R11: media tiles stay UNCLAMPED — radius rides the scale, no pad cap.
+        {...knobProps.borderRadius}
       />
     </View>
   );

package/src/components/InlineCode.tsx

@@ -20,7 +20,8 @@ export function InlineCode({ children }: InlineCodeProps) {
       lineHeight={knobProps.sizeToken}
       paddingHorizontal="$1.5"
       paddingVertical="$0.5"
-      borderRadius={knobProps.borderRadius.borderRadius}
+      {...knobProps.body}
+      {...knobProps.borderRadius}
     >
       {children}
     </CodeInline>

package/src/components/InlineStyles.tsx

@@ -1,25 +1,29 @@
 import { Text } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { InlineProps } from "../types";
 
 export function Strong({ children }: InlineProps) {
+  const { knobProps } = useResolvedKnobs();
   return (
-    <Text render="strong" fontWeight="bold">
+    <Text render="strong" {...knobProps.body} fontWeight="700">
       {children}
     </Text>
   );
 }
 
 export function Emphasis({ children }: InlineProps) {
+  const { knobProps } = useResolvedKnobs();
   return (
-    <Text render="em" fontStyle="italic">
+    <Text render="em" {...knobProps.body} fontStyle="italic">
       {children}
     </Text>
   );
 }
 
 export function Strikethrough({ children }: InlineProps) {
+  const { knobProps } = useResolvedKnobs();
   return (
-    <Text render="del" textDecorationLine="line-through">
+    <Text render="del" {...knobProps.body} textDecorationLine="line-through">
       {children}
     </Text>
   );

package/src/components/Link.tsx

@@ -1,5 +1,6 @@
 import { Text, isWeb } from "tamagui";
 import { openUrl } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { markdownLinkColors } from "../shared/colorRamps";
 import type { LinkProps } from "../types";
 
@@ -15,6 +16,7 @@ function getSafeHref(href?: string): string | undefined {
 }
 
 export function Link({ href, title, children }: LinkProps) {
+  const { knobProps } = useResolvedKnobs();
   const safeHref = getSafeHref(href);
   const isExternal = !!safeHref && /^https?:\/\//i.test(safeHref);
 
@@ -31,6 +33,7 @@ export function Link({ href, title, children }: LinkProps) {
       target={isExternal ? "_blank" : undefined}
       rel={isExternal ? "noopener noreferrer" : undefined}
       title={title || undefined}
+      {...knobProps.body}
       color={markdownLinkColors.text.base}
       textDecorationLine="underline"
       cursor="pointer"

package/src/components/List.tsx

@@ -49,7 +49,7 @@ 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 };
+  return { fontSize, boxSize: Math.round(fontSize * 1.15), lineHeight };
 }
 
 /** Box↔label gap by space knob — mirrors the forms Checkbox inline gap. */
@@ -130,9 +130,16 @@ export function MarkdownListItem({
     );
   }
 
+  const { fontSize } = getTaskBoxMetrics();
+  const markerWidth = Math.round(fontSize * 1.7);
   return (
-    <XStack render="li" marginBottom="$1" alignItems="flex-start">
-      <Text width={24} color="$color11" aria-hidden>
+    <XStack
+      render="li"
+      marginBottom="$1"
+      alignItems="flex-start"
+      gap={taskInlineGapMap[knobProps.space] ?? "$2"}
+    >
+      <Text width={markerWidth} color="$color11" aria-hidden {...knobProps.body}>
         {bullet}
       </Text>
       <View flex={1}>{children}</View>

package/src/components/Table.tsx

@@ -8,9 +8,9 @@
  */
 
 import { Children, isValidElement } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Paragraph, ScrollView, YStack } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
+import { useMarkdownTableKnobs } from "../shared/useMarkdownTableKnobs";
 import type { TableProps, TableRowProps, TableCellProps } from "../types";
 
 function isHeaderRow(row: unknown): boolean {
@@ -18,7 +18,7 @@ function isHeaderRow(row: unknown): boolean {
 }
 
 export function MarkdownTable({ children }: TableProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { frameProps, headRule } = useMarkdownTableKnobs();
   const rows = Children.toArray(children);
   const headerRows = rows.filter((row) => isHeaderRow(row));
   const bodyRows = rows.filter((row) => !isHeaderRow(row));
@@ -35,12 +35,15 @@ export function MarkdownTable({ children }: TableProps) {
           width="auto"
           cellWidth="auto"
           style={{ tableLayout: "auto" }}
-          borderColor="$borderColor"
-          borderRadius={knobProps.borderRadius.borderRadius}
           alignCells={{ x: "start", y: "center" }}
           alignHeaderCells={{ x: "start", y: "center" }}
+          {...frameProps}
         >
-          {headerRows.length > 0 && <Table.Head render="thead">{headerRows}</Table.Head>}
+          {headerRows.length > 0 && (
+            <Table.Head render="thead" {...headRule}>
+              {headerRows}
+            </Table.Head>
+          )}
           <Table.Body render="tbody">{bodyRows}</Table.Body>
         </Table>
       </YStack>
@@ -54,12 +57,13 @@ export function MarkdownTableRow({ children }: TableRowProps) {
 }
 
 export function MarkdownTableCell({ children, isHeader, align }: TableCellProps) {
+  const { headerTextProps, cellTextProps, cellPad } = useMarkdownTableKnobs();
   const textAlign = align || "left";
 
   if (isHeader) {
     return (
-      <Table.HeaderCell render="th">
-        <Paragraph render="span" display="block" size="$4" fontWeight="600" textAlign={textAlign}>
+      <Table.HeaderCell render="th" {...cellPad}>
+        <Paragraph render="span" display="block" {...headerTextProps} textAlign={textAlign}>
           {children}
         </Paragraph>
       </Table.HeaderCell>
@@ -67,9 +71,8 @@ export function MarkdownTableCell({ children, isHeader, align }: TableCellProps)
   }
 
   return (
-    <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}>
+    <Table.Cell render="td" {...cellPad}>
+      <Paragraph render="span" display="block" {...cellTextProps} textAlign={textAlign}>
         {children}
       </Paragraph>
     </Table.Cell>

package/src/designLaw.spec.tsx

@@ -0,0 +1,130 @@
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Heading } from "./components/Heading";
+import { HorizontalRule } from "./components/HorizontalRule";
+import { MarkdownList, MarkdownListItem } from "./components/List";
+import { MarkdownImage } from "./components/Image";
+import { MarkdownTable, MarkdownTableCell, MarkdownTableRow } from "./components/Table";
+import { MarkdownSimpleTable } from "./MarkdownSimpleTable";
+import {
+  MDXTable,
+  MDXTableBody,
+  MDXTableCell,
+  MDXTableHead,
+  MDXTableHeaderCell,
+  MDXTableRow,
+} from "./Table";
+
+function headerWeight(container: HTMLElement) {
+  const th = container.querySelector("th");
+  expect(th).toBeTruthy();
+  return window.getComputedStyle(th!.querySelector("span") ?? th!).fontWeight;
+}
+
+describe("markdown design-law (MPO-60)", () => {
+  it("Heading binds the heading recipe (T-HEADING)", () => {
+    const { container } = renderWithProviders(<Heading level={2}>Title</Heading>);
+    expect(container.textContent).toContain("Title");
+    expect(container.querySelector("h2")).toBeTruthy();
+  });
+
+  it("HorizontalRule paints a separator and hides at borderWidth=none", () => {
+    const shown = renderWithProviders(<HorizontalRule />);
+    expect(shown.container.querySelector('[role="separator"]')).toBeTruthy();
+
+    const hidden = renderWithProviders(
+      <Preset overrides={{ borderWidth: "none" }}>
+        <HorizontalRule />
+      </Preset>,
+    );
+    expect(hidden.container.querySelector('[role="separator"]')).toBeNull();
+  });
+
+  it("list marker column is not a fixed 24px", () => {
+    const { container } = renderWithProviders(
+      <MarkdownList ordered={false}>
+        <MarkdownListItem>alpha</MarkdownListItem>
+      </MarkdownList>,
+    );
+    const marker = container.querySelector('[aria-hidden="true"]') as HTMLElement | null;
+    expect(marker).toBeTruthy();
+    expect(marker!.style.width).not.toBe("24px");
+    expect(container.textContent).toContain("alpha");
+  });
+
+  it("image fallback is aspect-ratio, not a fixed 200px height", () => {
+    const { container } = renderWithProviders(
+      <MarkdownImage src="https://example.com/x.png" alt="demo" />,
+    );
+    const img = container.querySelector("img") as HTMLElement | null;
+    expect(img).toBeTruthy();
+    const style = img!.getAttribute("style") ?? "";
+    expect(style).not.toMatch(/height:\s*200px/);
+  });
+
+  it("MarkdownTable is R-OUTER: framed, square cells, header not weight 600", () => {
+    const { container } = renderWithProviders(
+      <MarkdownTable>
+        <MarkdownTableRow isHeader>
+          <MarkdownTableCell isHeader>Col</MarkdownTableCell>
+        </MarkdownTableRow>
+        <MarkdownTableRow>
+          <MarkdownTableCell>cell</MarkdownTableCell>
+        </MarkdownTableRow>
+      </MarkdownTable>,
+    );
+    const frame = container.querySelector("[data-markdown-table-frame='true']");
+    expect(frame).toBeTruthy();
+    expect(frame!.getAttribute("data-border-width")).not.toBe("undefined");
+    const th = container.querySelector("th") as HTMLElement;
+    const td = container.querySelector("td") as HTMLElement;
+    expect(th.style.borderRadius || window.getComputedStyle(th).borderRadius).not.toBe("50%");
+    expect(td).toBeTruthy();
+    const weight = headerWeight(container);
+    expect(weight === "600" || weight === "500").toBe(false);
+  });
+
+  it("MDXTable shares the same R-OUTER frame contract", () => {
+    const { container } = renderWithProviders(
+      <MDXTable>
+        <MDXTableHead>
+          <MDXTableRow>
+            <MDXTableHeaderCell>Col</MDXTableHeaderCell>
+          </MDXTableRow>
+        </MDXTableHead>
+        <MDXTableBody>
+          <MDXTableRow>
+            <MDXTableCell>cell</MDXTableCell>
+          </MDXTableRow>
+        </MDXTableBody>
+      </MDXTable>,
+    );
+    expect(container.querySelector("[data-markdown-table-frame='true']")).toBeTruthy();
+    expect(container.querySelector("thead th")!.textContent).toContain("Col");
+    const weight = headerWeight(container);
+    expect(weight === "600" || weight === "500").toBe(false);
+  });
+
+  it("MarkdownSimpleTable shares the same R-OUTER frame contract", () => {
+    const { container } = renderWithProviders(
+      <MarkdownSimpleTable headers={["Col"]} rows={[["cell"]]} />,
+    );
+    expect(container.querySelector("[data-markdown-table-frame='true']")).toBeTruthy();
+    expect(container.querySelector("thead th")!.textContent).toContain("Col");
+    expect(container.querySelector("tbody td")!.textContent).toContain("cell");
+    const weight = headerWeight(container);
+    expect(weight === "600" || weight === "500").toBe(false);
+  });
+
+  it("table frame borderWidth=none drops the painted rule", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderWidth: "none" }}>
+        <MarkdownSimpleTable headers={["Col"]} rows={[["cell"]]} />
+      </Preset>,
+    );
+    const frame = container.querySelector("[data-markdown-table-frame='true']");
+    expect(frame).toBeTruthy();
+    expect(frame!.getAttribute("data-border-width")).toBe("0");
+  });
+});