@multiplatform.one/markdown 7.4.1 → 7.6.0

package/dist/jsx/shared/index.native.js

@@ -4,6 +4,12 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
@@ -18,6 +24,12 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var shared_exports = {};
+__export(shared_exports, {
+  tokenPx: () => import_tokenPx.tokenPx,
+  useMarkdownTableKnobs: () => import_useMarkdownTableKnobs.useMarkdownTableKnobs
+});
 module.exports = __toCommonJS(shared_exports);
 __reExport(shared_exports, require("./colorRamps.native.js"), module.exports);
+var import_tokenPx = require("./tokenPx.native.js");
+var import_useMarkdownTableKnobs = require("./useMarkdownTableKnobs.native.js");
 //# sourceMappingURL=index.native.js.map

package/dist/jsx/shared/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/shared/index.ts"],"sourcesContent":[null],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor"],"sources":["../../../src/shared/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAe;AACxB,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAA6B","ignoreList":[]}

package/dist/jsx/shared/tokenPx.mjs

@@ -0,0 +1,16 @@
+import { getTokens, getVariableValue } from "tamagui";
+function tokenPx(token, fallback, scale = "size") {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (token == null) return fallback;
+  try {
+    const tokens = getTokens();
+    const bucket = scale === "fontSize" ? tokens.fontSize : tokens[scale];
+    const raw = getVariableValue(bucket?.[String(token)] ?? token);
+    const n = typeof raw === "number" ? raw : Number.parseFloat(String(raw));
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+  } catch {
+    return fallback;
+  }
+}
+export { tokenPx };
+//# sourceMappingURL=tokenPx.mjs.map

package/dist/jsx/shared/tokenPx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTokens","getVariableValue","tokenPx","token","fallback","scale","Number","isFinite","tokens","bucket","fontSize","raw","String","n","parseFloat"],"sources":["../../../src/shared/tokenPx.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,gBAAA,QAAwB;AAOrC,SAASC,QACdC,KAAA,EACAC,QAAA,EACAC,KAAA,GAAkD,QAC1C;EACR,IAAI,OAAOF,KAAA,KAAU,YAAYG,MAAA,CAAOC,QAAA,CAASJ,KAAK,GAAG,OAAOA,KAAA;EAChE,IAAIA,KAAA,IAAS,MAAM,OAAOC,QAAA;EAC1B,IAAI;IACF,MAAMI,MAAA,GAASR,SAAA,CAAU;IACzB,MAAMS,MAAA,GACJJ,KAAA,KAAU,aACLG,MAAA,CAAkDE,QAAA,GACnDF,MAAA,CAAOH,KAAK;IAClB,MAAMM,GAAA,GAAMV,gBAAA,CACTQ,MAAA,GAAiDG,MAAA,CAAOT,KAAK,CAAC,KAAKA,KACtE;IACA,MAAMU,CAAA,GAAI,OAAOF,GAAA,KAAQ,WAAWA,GAAA,GAAML,MAAA,CAAOQ,UAAA,CAAWF,MAAA,CAAOD,GAAG,CAAC;IACvE,OAAOL,MAAA,CAAOC,QAAA,CAASM,CAAC,KAAKA,CAAA,GAAI,IAAIA,CAAA,GAAIT,QAAA;EAC3C,QAAQ;IACN,OAAOA,QAAA;EACT;AACF","ignoreList":[]}

package/dist/jsx/shared/tokenPx.native.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var tokenPx_exports = {};
+__export(tokenPx_exports, {
+  tokenPx: () => tokenPx
+});
+module.exports = __toCommonJS(tokenPx_exports);
+var import_tamagui = require("tamagui");
+function tokenPx(token, fallback) {
+  var scale = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "size";
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (token == null) return fallback;
+  try {
+    var _ref;
+    var tokens = (0, import_tamagui.getTokens)();
+    var bucket = scale === "fontSize" ? tokens.fontSize : tokens[scale];
+    var raw = (0, import_tamagui.getVariableValue)((_ref = bucket === null || bucket === void 0 ? void 0 : bucket[String(token)]) !== null && _ref !== void 0 ? _ref : token);
+    var n = typeof raw === "number" ? raw : Number.parseFloat(String(raw));
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+  } catch (unused) {
+    return fallback;
+  }
+}
+//# sourceMappingURL=tokenPx.native.js.map

package/dist/jsx/shared/tokenPx.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call"],"sources":["../../../src/shared/tokenPx.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AAOF,IAAAA,SAAS,GAAAC,MACd,CAAAC,cAEA;AAEA,IAAAC,gBAAW,GAAUF,MAAA,CAAAG,wBAA4B;AACjD,IAAAC,iBAAmB,GAAAJ,MAAO,CAAAK,mBAAA;AAC1B,IAAAC,YAAI,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AACF,IAAAC,QAAM,GAAAA,CAAAC,MAAS,EAAAC,GAAA,KAAU;EACzB,SAAMC,IAAA,IACJD,GAAA,EAGFZ,SAAM,CAAAW,MAAM,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAAA;AAC0D,IACtEC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EACA,IAAAF,IAAM,IAAI,OAAOA,IAAA,KAAQ,YAAW,OAAMA,IAAO,eAAW;IAC5D,SAAOG,GAAA,IAAOhB,iBAAmB,CAAAa,IAAI,GACvC,IAAQ,CAAAX,YAAA,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACNnB,SAAO,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACT;EACF,OAAAE,EAAA","ignoreList":[]}

package/dist/jsx/shared/useMarkdownTableKnobs.mjs

@@ -0,0 +1,36 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+function useMarkdownTableKnobs() {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const cellPad = {
+    paddingHorizontal: knobProps.gap.gap,
+    paddingVertical: knobProps.gap.gap,
+    borderRadius: 0
+  };
+  return {
+    knobProps,
+    frameProps: {
+      ...knobProps.surface,
+      ...knobProps.borderRadiusOuter,
+      overflow: "hidden",
+      "data-markdown-table-frame": "true",
+      "data-border-width": String(knobProps.surface.borderWidth)
+    },
+    headerTextProps: {
+      size: knobProps.sizeToken,
+      ...knobProps.heading
+    },
+    cellTextProps: {
+      size: knobProps.sizeToken,
+      ...knobProps.body
+    },
+    cellPad,
+    headRule: {
+      borderBottomWidth: knobProps.surface.borderWidth,
+      borderBottomColor: "$borderColor"
+    }
+  };
+}
+export { useMarkdownTableKnobs };
+//# sourceMappingURL=useMarkdownTableKnobs.mjs.map

package/dist/jsx/shared/useMarkdownTableKnobs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","useMarkdownTableKnobs","knobProps","cellPad","paddingHorizontal","gap","paddingVertical","borderRadius","frameProps","surface","borderRadiusOuter","overflow","String","borderWidth","headerTextProps","size","sizeToken","heading","cellTextProps","body","headRule","borderBottomWidth","borderBottomColor"],"sources":["../../../src/shared/useMarkdownTableKnobs.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAO1B,SAASC,sBAAA,EAAwB;EACtC,MAAM;IAAEC;EAAU,IAAIF,gBAAA,CAAiB;EACvC,MAAMG,OAAA,GAAU;IACdC,iBAAA,EAAmBF,SAAA,CAAUG,GAAA,CAAIA,GAAA;IACjCC,eAAA,EAAiBJ,SAAA,CAAUG,GAAA,CAAIA,GAAA;IAC/BE,YAAA,EAAc;EAChB;EACA,OAAO;IACLL,SAAA;IACAM,UAAA,EAAY;MACV,GAAGN,SAAA,CAAUO,OAAA;MACb,GAAGP,SAAA,CAAUQ,iBAAA;MACbC,QAAA,EAAU;MACV,6BAA6B;MAC7B,qBAAqBC,MAAA,CAAOV,SAAA,CAAUO,OAAA,CAAQI,WAAW;IAC3D;IACAC,eAAA,EAAiB;MACfC,IAAA,EAAMb,SAAA,CAAUc,SAAA;MAChB,GAAGd,SAAA,CAAUe;IACf;IACAC,aAAA,EAAe;MACbH,IAAA,EAAMb,SAAA,CAAUc,SAAA;MAChB,GAAGd,SAAA,CAAUiB;IACf;IACAhB,OAAA;IACAiB,QAAA,EAAU;MACRC,iBAAA,EAAmBnB,SAAA,CAAUO,OAAA,CAAQI,WAAA;MACrCS,iBAAA,EAAmB;IACrB;EACF;AACF","ignoreList":[]}

package/dist/jsx/shared/useMarkdownTableKnobs.native.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useMarkdownTableKnobs_exports = {};
+__export(useMarkdownTableKnobs_exports, {
+  useMarkdownTableKnobs: () => useMarkdownTableKnobs
+});
+module.exports = __toCommonJS(useMarkdownTableKnobs_exports);
+var import_theme = require("@multiplatform.one/theme");
+function useMarkdownTableKnobs() {
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var cellPad = {
+    paddingHorizontal: knobProps.gap.gap,
+    paddingVertical: knobProps.gap.gap,
+    borderRadius: 0
+  };
+  return {
+    knobProps,
+    frameProps: {
+      ...knobProps.surface,
+      ...knobProps.borderRadiusOuter,
+      overflow: "hidden",
+      "data-markdown-table-frame": "true",
+      "data-border-width": String(knobProps.surface.borderWidth)
+    },
+    headerTextProps: {
+      size: knobProps.sizeToken,
+      ...knobProps.heading
+    },
+    cellTextProps: {
+      size: knobProps.sizeToken,
+      ...knobProps.body
+    },
+    cellPad,
+    headRule: {
+      borderBottomWidth: knobProps.surface.borderWidth,
+      borderBottomColor: "$borderColor"
+    }
+  };
+}
+//# sourceMappingURL=useMarkdownTableKnobs.native.js.map

package/dist/jsx/shared/useMarkdownTableKnobs.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","useMarkdownTableKnobs_exports","useMarkdownTableKnobs","module","exports","import_theme","require","knobProps","useResolvedKnobs","cellPad","paddingHorizontal","gap","paddingVertical","borderRadius"],"sources":["../../../src/shared/useMarkdownTableKnobs.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AAOF,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAwB;AACtC,IAAAC,gBAAkB,GAAAF,MAAI,CAAAG,wBAAiB;AACvC,IAAAC,iBAAgB,GAAAJ,MAAA,CAAAK,mBAAA;AAAA,IACdC,YAAA,GAAAN,MAAmB,CAAAO,SAAU,CAAAC,cAAI;AAAA,IACjCC,QAAA,GAAAA,CAAAC,MAAiB,EAAAC,GAAA,KAAU;EAAI,KAC/B,IAAAC,IAAA,IAAcD,GAAA,EAChBZ,SAAA,CAAAW,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACA;AAAO,IACLC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EAAA,IACAF,IAAA,WAAYA,IAAA,wBAAAA,IAAA;IAAA,KACP,IAAAG,GAAA,IAAUhB,iBAAA,CAAAa,IAAA,GACb,IAAG,CAAAX,YAAU,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACbnB,SAAU,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAAA;EACmB,OAC7BE,EAAA;AAAyD;AAC3D,IACAM,YAAA,GAAAC,GAAiB,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAAA,IAAAE,6BACC;AAAAhB,QAChB,CAAGgB,6BAAU;EAAAC,qBACf,EAAAA,CAAA,KAAAA;AAAA;AACeC,MACb,CAAAC,OAAM,GAAAN,YAAU,CAAAG,6BAAA;AAAA,IAAAI,YACb,GAAUC,OAAA;AAAA,SACfJ,sBAAA;EAAA,IACA;IAAAK;EAAA,QAAAF,YAAA,CAAAG,gBAAA;EAAA,IACAC,OAAA,GAAU;IAAAC,iBACR,EAAAH,SAAmB,CAAAI,GAAU,CAAAA,GAAA;IAAQC,eACrC,EAAAL,SAAmB,CAAAI,GAAA,CAAAA,GAAA;IACrBE,YAAA;EACF;EACF","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/markdown",
-  "version": "7.4.1",
+  "version": "7.6.0",
   "description": "Cross-platform markdown renderer with Shiki syntax highlighting for React and React Native",
   "keywords": [
     "cross-platform",
@@ -51,6 +51,11 @@
     },
     "./mermaid": {
       "source": "./src/mermaid/index.ts",
+      "react-native": {
+        "types": "./types/mermaid/index.d.ts",
+        "import": "./dist/esm/mermaid/index.native.js",
+        "require": "./dist/cjs/mermaid/index.native.js"
+      },
       "types": "./types/mermaid/index.d.ts",
       "import": "./dist/esm/mermaid/index.mjs",
       "require": "./dist/cjs/mermaid/index.cjs",
@@ -77,11 +82,11 @@
     "tamagui": "2.7.6",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
-    "@multiplatform.one/components": "7.4.1",
-    "@multiplatform.one/platform": "7.4.1",
-    "@multiplatform.one/router": "7.4.1",
-    "@multiplatform.one/table-primitives": "7.4.1",
-    "@multiplatform.one/theme": "7.4.1"
+    "@multiplatform.one/components": "7.6.0",
+    "@multiplatform.one/platform": "7.6.0",
+    "@multiplatform.one/router": "7.6.0",
+    "@multiplatform.one/table-primitives": "7.6.0",
+    "@multiplatform.one/theme": "7.6.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -94,9 +99,9 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.4.1",
-    "@multiplatform.one/storybook": "7.4.1",
-    "@multiplatform.one/test-utils": "7.4.1"
+    "@multiplatform.one/config": "7.6.0",
+    "@multiplatform.one/storybook": "7.6.0",
+    "@multiplatform.one/test-utils": "7.6.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",

package/src/Aside/index.tsx

@@ -4,10 +4,10 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Children, useState, type ReactNode } from "react";
 import { Button, Paragraph, XStack, YStack } from "tamagui";
 import { useCutoffGradientColors } from "../shared/cutoffGradient";
+import { tokenPx } from "../shared/tokenPx";
 import { isBareTextChild, wrapBareTextChildren } from "../shared/textRidesText";
 
 const zIndex = { localTop: 100 };
-const cutoffMaxHeight = 300;
 
 export interface MDXAsideProps {
   children: ReactNode;
@@ -16,6 +16,8 @@ export interface MDXAsideProps {
 export function MDXAside({ children, ...props }: MDXAsideProps & Record<string, unknown>) {
   const { knobProps } = useResolvedKnobs();
   const gradientColors = useCutoffGradientColors();
+  const cutoffMaxHeight = tokenPx(knobProps.sizeToken, 24) * 12;
+  const gradientHeight = tokenPx(knobProps.sizeToken, 24) * 8;
   // LC-82 TEXT-RIDES-TEXT: an ARRAY of bare strings is text too — treat it
   // like the singleton string path (one coalesced Paragraph, no cutoff).
   const flattened = Array.isArray(children) ? Children.toArray(children) : null;
@@ -33,7 +35,7 @@ export function MDXAside({ children, ...props }: MDXAsideProps & Record<string,
     <YStack
       render="aside"
       {...knobProps.gap}
-      borderRadius={knobProps.borderRadius.borderRadius}
+      {...knobProps.containerRadius}
       {...knobProps.panelPadding}
       marginHorizontal="$-2"
       marginTop="$2"
@@ -41,7 +43,7 @@ export function MDXAside({ children, ...props }: MDXAsideProps & Record<string,
       {...(cutoff && {
         marginVertical: "$4",
         paddingHorizontal: knobProps.panelPadding.padding,
-        borderWidth: 1,
+        borderWidth: knobProps.borderRadius.borderWidth,
         paddingBottom: "$10",
         backgroundColor: "$color1",
         borderColor: "$borderColor",
@@ -73,7 +75,7 @@ export function MDXAside({ children, ...props }: MDXAsideProps & Record<string,
             bottom={0}
             left={0}
             right={0}
-            height={200}
+            height={gradientHeight}
             colors={gradientColors}
             pointerEvents="none"
             zIndex={zIndex.localTop}

package/src/Hr/hr.spec.tsx

@@ -1,18 +1,19 @@
+import { Preset } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { expect, it } from "vitest";
 import { HR } from "./index";
 
-it("renders without crashing", () => {
+it("renders a painted separator rule", () => {
   const { container } = renderWithProviders(<HR />);
-  expect(container).toBeTruthy();
+  const rule = container.querySelector('[role="separator"]');
+  expect(rule).toBeTruthy();
 });
 
-it("renders outer YStack with correct basic alignment and structure", () => {
-  const { container } = renderWithProviders(<HR />);
-  const outerYStack = container.firstElementChild as HTMLElement;
-  expect(outerYStack).toBeTruthy();
-  const styleAttr = outerYStack.getAttribute("style") || "";
-  expect(styleAttr.includes("margin-left: auto"));
-  expect(styleAttr.includes("margin-right: auto"));
-  expect(styleAttr.includes("max-width: 50%"));
+it("hides the rule when borderWidth is none", () => {
+  const { container } = renderWithProviders(
+    <Preset overrides={{ borderWidth: "none" }}>
+      <HR />
+    </Preset>,
+  );
+  expect(container.querySelector('[role="separator"]')).toBeNull();
 });

package/src/Hr/index.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "tamagui";
+import { HorizontalRule } from "../components/HorizontalRule";
 
 // must match the markdown HorizontalRule's rendering exactly (SB-M-1214)
-export const HR = (props: any) => <Separator marginVertical="$4" {...props} />;
+export const HR = (props: Record<string, unknown>) => <HorizontalRule {...(props as any)} />;

package/src/MarkdownSimpleTable/index.tsx

@@ -1,8 +1,9 @@
 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";
+import { InlineCode } from "../components/InlineCode";
+import { useMarkdownTableKnobs } from "../shared/useMarkdownTableKnobs";
 
 type CellContent = ReactNode;
 
@@ -44,18 +45,7 @@ function parseCell(content: CellContent): ReactNode {
         </Text>,
       );
     } else if (match[9]) {
-      parts.push(
-        <Text
-          key={key}
-          fontFamily="$mono"
-          backgroundColor="$color4"
-          paddingHorizontal="$1.5"
-          paddingVertical="$0.5"
-          borderRadius="$2"
-        >
-          {match[10]}
-        </Text>,
-      );
+      parts.push(<InlineCode key={key}>{match[10]}</InlineCode>);
     }
 
     lastIndex = matchIndex + match[0].length;
@@ -81,7 +71,7 @@ export interface MarkdownSimpleTableProps {
  * `SimpleTable` from `@multiplatform.one/table`.
  */
 export function MarkdownSimpleTable({ headers, rows }: MarkdownSimpleTableProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { frameProps, headerTextProps, cellTextProps, cellPad, headRule } = useMarkdownTableKnobs();
   const media = useMedia();
   const isMobile = media.sm;
 
@@ -93,19 +83,16 @@ export function MarkdownSimpleTable({ headers, rows }: MarkdownSimpleTableProps)
       width="auto"
       cellWidth="auto"
       style={{ tableLayout: "auto" }}
-      borderColor="$borderColor"
-      borderRadius={knobProps.borderRadius.borderRadius}
       alignCells={{ x: "start", y: "center" }}
       alignHeaderCells={{ x: "start", y: "center" }}
+      {...frameProps}
       {...(isMobile && { minWidth: 760 })}
     >
-      <Table.Head render="thead">
+      <Table.Head render="thead" {...headRule}>
         <Table.Row render="tr" rowLocation="first">
           {headers.map((header, headerIdx) => (
-            <Table.HeaderCell render="th" key={`h-${headerIdx}`}>
-              <Paragraph size="$4" fontWeight="600">
-                {header}
-              </Paragraph>
+            <Table.HeaderCell render="th" key={`h-${headerIdx}`} {...cellPad}>
+              <Paragraph {...headerTextProps}>{header}</Paragraph>
             </Table.HeaderCell>
           ))}
         </Table.Row>
@@ -118,9 +105,8 @@ export function MarkdownSimpleTable({ headers, rows }: MarkdownSimpleTableProps)
             rowLocation={rowIdx === rows.length - 1 ? "last" : "middle"}
           >
             {row.map((cell, cellIdx) => (
-              <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}>
+              <Table.Cell render="td" key={`c-${rowIdx}-${cellIdx}`} {...cellPad}>
+                <Paragraph render="span" display="block" {...cellTextProps}>
                   {parseCell(cell)}
                 </Paragraph>
               </Table.Cell>

package/src/MdxCodeBlock/index.tsx

@@ -14,6 +14,7 @@ import { useContext, useMemo, useState } from "react";
 import { Button, ScrollView, TooltipSimple, XStack, YStack } from "tamagui";
 import { CheckCircleIcon, ClipboardIcon } from "../icons";
 import { useCutoffGradientColors } from "../shared/cutoffGradient";
+import { tokenPx } from "../shared/tokenPx";
 
 const zIndex = { localTop: 100 };
 import type { MDXCodeBlockContextValue } from "./mdxCodeBlockContext";
@@ -64,6 +65,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
 
   const { knobProps } = useResolvedKnobs();
   const gradientColors = useCutoffGradientColors();
+  const cutoffMaxHeight = tokenPx(knobProps.sizeToken, 24) * 16;
+  const gradientHeight = tokenPx(knobProps.sizeToken, 24) * 8;
+  const iconPx = tokenPx(knobProps.label.fontSize as string, 14, "fontSize");
   const codeText = useMemo(() => extractCodeText(children).replace(/\n$/, ""), [children]);
   const language = useMemo(() => extractLanguage(className), [className]);
   const tokens = useShikiTokens(codeText, language);
@@ -86,9 +90,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
         <YStack
           position="relative"
           {...(isCutoff && {
-            maxHeight: 400,
+            maxHeight: cutoffMaxHeight,
             overflow: "hidden",
-            borderRadius: knobProps.borderRadius.borderRadius,
+            ...knobProps.borderRadiusOuter,
           })}
         >
           {(!isCollapsed || !isCollapsible) && isCutoff && (
@@ -98,7 +102,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                 bottom={0}
                 left={0}
                 right={0}
-                height={200}
+                height={gradientHeight}
                 colors={gradientColors}
                 pointerEvents="none"
                 zIndex={zIndex.localTop}
@@ -156,7 +160,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                 <Button
                   aria-label="Copy code to clipboard"
                   size="$2"
-                  icon={hasCopied ? <CheckCircleIcon size={14} /> : <ClipboardIcon size={14} />}
+                  icon={
+                    hasCopied ? <CheckCircleIcon size={iconPx} /> : <ClipboardIcon size={iconPx} />
+                  }
                   onPress={onCopy}
                   $max-xs={{
                     display: "none",

package/src/Table/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { Paragraph, ScrollView, YStack, styled } from "tamagui";
 import { Table as BaseTable } from "@multiplatform.one/table-primitives";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMarkdownTableKnobs } from "../shared/useMarkdownTableKnobs";
 
 const MDXTableFrame = styled(YStack, {
   marginVertical: "$4",
@@ -12,7 +12,7 @@ export function MDXTable({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
-  const { knobProps } = useResolvedKnobs();
+  const { frameProps } = useMarkdownTableKnobs();
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
       <MDXTableFrame>
@@ -23,10 +23,9 @@ export function MDXTable({
           width="auto"
           cellWidth="auto"
           style={{ tableLayout: "auto" }}
-          borderColor="$borderColor"
-          borderRadius={knobProps.borderRadius.borderRadius}
           alignCells={{ x: "start", y: "center" }}
           alignHeaderCells={{ x: "start", y: "center" }}
+          {...frameProps}
           {...props}
         >
           {children}
@@ -40,8 +39,9 @@ export function MDXTableHead({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
+  const { headRule } = useMarkdownTableKnobs();
   return (
-    <BaseTable.Head render="thead" {...props}>
+    <BaseTable.Head render="thead" {...headRule} {...props}>
       {children}
     </BaseTable.Head>
   );
@@ -73,11 +73,10 @@ export function MDXTableHeaderCell({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
+  const { headerTextProps, cellPad } = useMarkdownTableKnobs();
   return (
-    <BaseTable.HeaderCell render="th" {...props}>
-      <Paragraph size="$4" fontWeight="600">
-        {children}
-      </Paragraph>
+    <BaseTable.HeaderCell render="th" {...cellPad} {...props}>
+      <Paragraph {...headerTextProps}>{children}</Paragraph>
     </BaseTable.HeaderCell>
   );
 }
@@ -86,9 +85,10 @@ export function MDXTableCell({
   children,
   ...props
 }: { children?: ReactNode } & Record<string, unknown>) {
+  const { cellTextProps, cellPad } = useMarkdownTableKnobs();
   return (
-    <BaseTable.Cell render="td" {...props}>
-      <Paragraph render="span" display="block" size="$4">
+    <BaseTable.Cell render="td" {...cellPad} {...props}>
+      <Paragraph render="span" display="block" {...cellTextProps}>
         {children}
       </Paragraph>
     </BaseTable.Cell>

package/src/Video/index.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { isWeb, Paragraph, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { tokenPx } from "../shared/tokenPx";
 
 export interface VideoProps {
   src: string;
@@ -23,6 +24,8 @@ export function Video({
   ...props
 }: VideoProps & Record<string, unknown>) {
   const { knobProps } = useResolvedKnobs();
+  const radiusPx = tokenPx(knobProps.borderRadius.borderRadius as string, 8, "radius");
+  const fallbackMin = tokenPx(knobProps.sizeToken, 24) * 8;
   return (
     <YStack render="figure" marginHorizontal={0} marginVertical="$6" {...props}>
       {isWeb ? (
@@ -37,26 +40,33 @@ export function Video({
             controls={controls}
             loop={loop}
             poster={poster}
-            style={{ width: "100%", display: "block", borderRadius: 8 }}
+            // R11: media radius stays UNCLAMPED and rides the radius knob.
+            style={{ width: "100%", display: "block", borderRadius: radiusPx }}
           />
         ) : // omit the element entirely for an empty src (SB-M-1227)
         null
       ) : (
         <YStack
           {...knobProps.panelPadding}
-          borderRadius={knobProps.borderRadius.borderRadius}
+          {...knobProps.borderRadius}
           backgroundColor="$color3"
           alignItems="center"
           justifyContent="center"
-          minHeight={200}
+          minHeight={fallbackMin}
         >
-          <Paragraph color="$color9" size="$4">
+          <Paragraph color="$color9" size={knobProps.sizeToken as any} {...knobProps.body}>
             Video playback requires a native video player
           </Paragraph>
         </YStack>
       )}
       {children ? (
-        <Paragraph render="figcaption" lineHeight={23} marginTop="$2" color="$color9" size="$3">
+        <Paragraph
+          render="figcaption"
+          marginTop="$2"
+          color={knobProps.textAccentColor}
+          size={knobProps.sizeToken as any}
+          {...knobProps.body}
+        >
           {children}
         </Paragraph>
       ) : null}

package/src/components/Blockquote.tsx

@@ -11,12 +11,13 @@ export function Blockquote({ children }: BlockquoteProps) {
     typeof padToken === "number"
       ? padToken
       : ((getTokens().space as any)?.[padToken]?.val ?? padToken);
+  const railWidth = knobProps.borderRadius.borderWidth;
   return (
     <View
       backgroundColor={markdownBlockquoteColors.background.base}
       // 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).
+      // containerRadius fragment). Rail thickness rides borderWidth (0 hides).
       {...knobProps.containerRadius}
       paddingVertical={knobProps.gap.gap}
       marginVertical="$3"
@@ -27,14 +28,14 @@ export function Blockquote({ children }: BlockquoteProps) {
       {...(isWeb
         ? {
             style: {
-              borderInlineStartWidth: 4,
-              borderInlineStartStyle: "solid",
-              borderInlineStartColor: theme.color8?.val ?? "#999",
+              borderInlineStartWidth: railWidth,
+              borderInlineStartStyle: railWidth ? "solid" : "none",
+              borderInlineStartColor: theme.color8?.val ?? theme.borderColor?.val,
               paddingInlineStart: pad,
             } as any,
           }
         : {
-            borderStartWidth: 4,
+            borderStartWidth: railWidth,
             borderStartColor: markdownBlockquoteColors.border.base,
             paddingStart: knobProps.panelPadding.padding,
           })}

package/src/components/CodeBlock.tsx

@@ -35,9 +35,9 @@ export function CodeBlock({ children, lang, theme: themeProp = "auto" }: CodeBlo
       // 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" })}
+      {...(knobProps.borderRadiusNested ?? { borderRadius: "$4" })}
       backgroundColor={markdownCodeColors.background.base}
-      borderWidth={1}
+      borderWidth={knobProps.borderRadius.borderWidth}
       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 —