@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/cjs/layouts/breadcrumbs.cjs

@@ -41,6 +41,7 @@ var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const CRUMB_LINE_PX = 24;
 function Breadcrumbs({
   items,
   onNavigate
@@ -48,37 +49,69 @@ function Breadcrumbs({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const linkColor = (0, import_theme.useAccentOnSurface)();
   if (items.length === 0) return null;
   const sz = knobProps.sizeToken;
   const textSize = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
   const separatorSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-    ...knobProps.gap,
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    alignItems: "center",
-    flexWrap: "wrap",
-    children: items.map((item, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
-      children: [i > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: import_componentColors.componentColors.text.subtle,
-        fontSize: separatorSize,
-        userSelect: "none",
-        children: "/"
-      }), item.href && i < items.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$accentColor",
-        cursor: "pointer",
-        fontSize: textSize,
-        hoverStyle: {
-          textDecorationLine: "underline"
-        },
-        onPress: () => item.href && onNavigate?.(item.href),
-        children: item.label
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: import_componentColors.componentColors.text.muted,
-        fontSize: textSize,
-        fontWeight: i === items.length - 1 ? "600" : "400",
-        children: item.label
-      })]
-    }, `${item.label}-${i}`))
-  });
+  const spaceGap = knobProps.gap.gap;
+  const trailGap = spaceGap === "$2" ? "$1" : spaceGap === "$5" ? "$2" : "$1.5";
+  const crumbPadY = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - CRUMB_LINE_PX) / 2));
+  return (
+    // Wayfinding is chromeless flush text (DF-20 / Axiom 14 LAYER ROLE):
+    // no border/radius/panel padding — a bordered box would claim the
+    // surface tier of a card or input, which a trail has not earned. The
+    // page column owns the alignment line; the trail sits on it.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: trailGap,
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: items.map((item, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
+        children: [i > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: import_componentColors.componentColors.text.subtle,
+          fontSize: separatorSize,
+          userSelect: "none",
+          children: "/"
+        }), item.href && i < items.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Anchor, {
+          color: linkColor,
+          cursor: "pointer",
+          fontSize: textSize,
+          borderRadius: knobProps.borderRadius.borderRadius,
+          paddingVertical: crumbPadY,
+          marginVertical: -crumbPadY,
+          minWidth: import_theme.MIN_PRESS_TARGET,
+          minHeight: import_theme.MIN_PRESS_TARGET,
+          justifyContent: "center",
+          hitSlop: (0, import_theme.pressTargetHitSlop)(CRUMB_LINE_PX),
+          href: item.href,
+          textDecorationLine: "none",
+          hoverStyle: {
+            textDecorationLine: "underline"
+          },
+          focusVisibleStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid"
+          },
+          onPress: e => {
+            e.preventDefault();
+            if (item.href) onNavigate?.(item.href);
+          },
+          onKeyDown: e => {
+            if (e.key === " ") {
+              e.preventDefault();
+              if (item.href) onNavigate?.(item.href);
+            }
+          },
+          children: item.label
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: import_componentColors.componentColors.text.muted,
+          fontSize: textSize,
+          fontWeight: i === items.length - 1 ? "600" : "400",
+          children: item.label
+        })]
+      }, `${item.label}-${i}`))
+    })
+  );
 }

package/dist/cjs/layouts/breadcrumbs.native.js

@@ -43,6 +43,7 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.native.js");
+var CRUMB_LINE_PX = 24;
 function Breadcrumbs(param) {
   var {
     items,
@@ -51,42 +52,79 @@ function Breadcrumbs(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var linkColor = (0, import_theme.useAccentOnSurface)();
   if (items.length === 0) return null;
   var sz = knobProps.sizeToken;
   var textSize = sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
   var separatorSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-    ...knobProps.gap,
-    ...knobProps.borderRadius,
-    ...knobProps.panelPadding,
-    alignItems: "center",
-    flexWrap: "wrap",
-    children: items.map(function (item, i) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
-        children: [i > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: import_componentColors.componentColors.text.subtle,
-          fontSize: separatorSize,
-          userSelect: "none",
-          children: "/"
-        }), item.href && i < items.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: "$accentColor",
-          cursor: "pointer",
-          fontSize: textSize,
-          hoverStyle: {
-            textDecorationLine: "underline"
-          },
-          onPress: function onPress() {
-            return item.href && (onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item.href));
-          },
-          children: item.label
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: import_componentColors.componentColors.text.muted,
-          fontSize: textSize,
-          fontWeight: i === items.length - 1 ? "600" : "400",
-          children: item.label
-        })]
-      }, `${item.label}-${i}`);
+  var spaceGap = knobProps.gap.gap;
+  var trailGap = spaceGap === "$2" ? "$1" : spaceGap === "$5" ? "$2" : "$1.5";
+  var crumbPadY = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - CRUMB_LINE_PX) / 2));
+  return (
+    // Wayfinding is chromeless flush text (DF-20 / Axiom 14 LAYER ROLE):
+    // no border/radius/panel padding — a bordered box would claim the
+    // surface tier of a card or input, which a trail has not earned. The
+    // page column owns the alignment line; the trail sits on it.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: trailGap,
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: items.map(function (item, i) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.default.Fragment, {
+          children: [i > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: import_componentColors.componentColors.text.subtle,
+            fontSize: separatorSize,
+            userSelect: "none",
+            children: "/"
+          }), item.href && i < items.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Anchor, {
+            color: linkColor,
+            cursor: "pointer",
+            fontSize: textSize,
+            // Crumbs are R-SCALE (spec Breadcrumbs): the interactive
+            // crumb surface (focus ring / hover box) rounds with the
+            // radius knob. Chromeless trail keeps no border, so only the
+            // scale radius applies — not the bordered fragment.
+            borderRadius: knobProps.borderRadius.borderRadius,
+            paddingVertical: crumbPadY,
+            marginVertical: -crumbPadY,
+            // Short labels (e.g. "Home") need a width floor too; long crumbs
+            // already exceed 44. No extra horizontal padding — that would
+            // re-spread the trail (theme-propagation breadcrumbs invariant).
+            minWidth: import_theme.MIN_PRESS_TARGET,
+            minHeight: import_theme.MIN_PRESS_TARGET,
+            justifyContent: "center",
+            hitSlop: (0, import_theme.pressTargetHitSlop)(CRUMB_LINE_PX),
+            href: item.href,
+            textDecorationLine: "none",
+            hoverStyle: {
+              textDecorationLine: "underline"
+            },
+            focusVisibleStyle: {
+              outlineColor: "$outlineColor",
+              outlineWidth: 2,
+              outlineStyle: "solid"
+            },
+            onPress: function onPress(e) {
+              e.preventDefault();
+              if (item.href) onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item.href);
+            },
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === " ") {
+                e.preventDefault();
+                if (item.href) onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item.href);
+              }
+            },
+            children: item.label
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: import_componentColors.componentColors.text.muted,
+            fontSize: textSize,
+            fontWeight: i === items.length - 1 ? "600" : "400",
+            children: item.label
+          })]
+        }, `${item.label}-${i}`);
+      })
     })
-  });
+  );
 }
 //# sourceMappingURL=breadcrumbs.native.js.map

package/dist/cjs/layouts/breadcrumbs.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","breadcrumbs_exports","__export","Breadcrumbs","module","exports","import_jsx_runtime","require","import_theme","import_react","__toESM","import_tamagui","import_componentColors","param","items","onNavigate","knobProps","useResolvedKnobs","length","sz","sizeToken","textSize","separatorSize","jsx","XStack","gap","borderRadius","panelPadding","alignItems","flexWrap","children","map","item","i","jsxs","default","Fragment","Text","color","componentColors","text","subtle","fontSize","userSelect","href","cursor","hoverStyle","textDecorationLine","onPress","label","muted","fontWeight"],"sources":["../../../src/layouts/breadcrumbs.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAQAC,MAAA,CAAAC,OAAA,GAAAT,YAAiC,CAAAK,mBAAA;AACjC,IAAAK,kBAAkB,GAAAC,OAAA;AAClB,IAAAC,YAAA,GAAAD,OAA6B;AAC7B,IAAAE,YAAA,GAAAC,OAAA,CAAAH,OAAgC;AAsCxB,IAAAI,cAAA,GAAAJ,OAAA;AAlBD,IAAAK,sBAAuB,GAAAL,OAAO,+BAAgC;AACnE,SAAMJ,WAAYA,CAAAU,KAAA,EAAI;EACtB,IAAI;IAAAC,KAAM;IAAAC;EAAc,IAAAF,KAAO;EAE/B;IAAMG;EAAK,KAAU,GAAAR,YAAA,CAAAS,gBAAA;EACrB,IAAAH,KAAM,CAAAI,MAAA,KAAW,GAAO,OAAQ;EAChC,IAAAC,EAAM,GAAAH,SAAA,CAAAI,SACJ;EAEF,IAAAC,QACE,GAAAF,EAAA,mBAAAA,EAAA;EAAA,IAACG,aAAA,GAAAH,EAAA,mBAAAA,EAAA;EAAA,0BAAAb,kBAAA,CAAAiB,GAAA,EAAAZ,cAAA,CAAAa,MAAA;IAAA,GACER,SAAG,CAAAS,GAAU;IAAA,GACbT,SAAG,CAAAU,YAAU;IAAA,GACbV,SAAG,CAAAW,YAAU;IAAAC,UACd,UAAW;IAAAC,QACX,QAAS;IAAAC,QAER,EAAAhB,KAAA,CAAAiB,GAAM,WAAWC,IAAA,EAChBC,CAAA;MACG,OAAI,eACH,IAAA3B,kBAAA,CAAA4B,IAAA,EAAAzB,YAAC,CAAA0B,OAAA,CAAAC,QAAK;QAIPN,QAAK,GACHG,CAAA,2BAAA3B,kBAAA,CAAAiB,GAAA,EAAAZ,cAAA,CAAA0B,IAAA;UAAAC,KAAA,EAAA1B,sBAAA,CAAA2B,eAAA,CAAAC,IAAA,CAAAC,MAAA;UACCC,QAAM,EAAApB,aAAA;UACNqB,UAAO;UACPb,QAAA,EAAU;QAAA,EACV,EAA8CE,IAC9C,CAAAY,IAAA,IAASX,CAAA,GAAMnB,KAAK,CAAAI,MAAA,GAAQ,mBAAsB,IAAAZ,kBAAA,CAAAiB,GAAA,EAAAZ,cAAA,CAAA0B,IAAA;UAEjDC,KAAA,gBAAK;UAAAO,MAAA;UAGRH,QAAA,EAAArB,QAAA;UAACyB,UAAA;YAAAC,kBAAA;UACC;UACAC,OAAA,WAAUA,QAAA;YACV,OAAAhB,IAAY,CAAAY,IAAM,KAAA7B,UAAe,KAAI,QAAQA,UAAA,uBAAAA,UAAA,CAAAiB,IAAA,CAAAY,IAAA;UAE5C;UAAKd,QAAA,EAAAE,IAAA,CAAAiB;QACR,wBAAA3C,kBAAA,CAAAiB,GAAA,EAAAZ,cAAA,CAAA0B,IAAA;UAvBiBC,KAAG,EAAK1B,sBA0B9B,CAAA2B,eAAA,CAAAC,IAAA,CAAAU,KAAA;UAAAR,QAAA,EAAArB,QAAA;UACH8B,UAAA,EAAAlB,CAAA,KAAAnB,KAAA,CAAAI,MAAA;UAEJY,QAAA,EAAAE,IAAA,CAAAiB","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","breadcrumbs_exports","__export","Breadcrumbs","module","exports","import_jsx_runtime","require","import_theme","import_react","__toESM","import_tamagui","import_componentColors","CRUMB_LINE_PX","param","items","onNavigate","knobProps","useResolvedKnobs","linkColor","useAccentOnSurface","length","sz","sizeToken","textSize","separatorSize","spaceGap","gap","trailGap","crumbPadY","Math","max","ceil","MIN_PRESS_TARGET","jsx","XStack","alignItems","flexWrap","children","map","item","i","jsxs","default","Fragment","Text","color","componentColors","text","subtle","fontSize","userSelect","href","Anchor","cursor","borderRadius","paddingVertical","marginVertical","minWidth","minHeight","justifyContent","hitSlop","pressTargetHitSlop","textDecorationLine","hoverStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","onPress","e","preventDefault"],"sources":["../../../src/layouts/breadcrumbs.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/layouts/index.cjs

@@ -2,6 +2,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, {
@@ -16,6 +22,14 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var layouts_exports = {};
+__export(layouts_exports, {
+  AsyncBoundary: () => import_AsyncBoundary.AsyncBoundary,
+  AsyncSkeleton: () => import_AsyncBoundary.AsyncSkeleton,
+  __resetAsyncDevWarnSeen: () => import_AsyncBoundary.__resetAsyncDevWarnSeen,
+  resolveAsyncStatus: () => import_AsyncBoundary.resolveAsyncStatus,
+  useAsyncBoundary: () => import_AsyncBoundary.useAsyncBoundary,
+  useAsyncCount: () => import_AsyncBoundary.useAsyncCount
+});
 module.exports = __toCommonJS(layouts_exports);
 __reExport(layouts_exports, require("./Debug/index.cjs"), module.exports);
 __reExport(layouts_exports, require("./SafeAreaWrapper/index.cjs"), module.exports);
@@ -27,4 +41,8 @@ __reExport(layouts_exports, require("./breadcrumbs.cjs"), module.exports);
 __reExport(layouts_exports, require("./attachments.cjs"), module.exports);
 __reExport(layouts_exports, require("./tags.cjs"), module.exports);
 __reExport(layouts_exports, require("./timeline.cjs"), module.exports);
-__reExport(layouts_exports, require("./page.cjs"), module.exports);
+__reExport(layouts_exports, require("./page.cjs"), module.exports);
+__reExport(layouts_exports, require("./pageHeadingScope.cjs"), module.exports);
+__reExport(layouts_exports, require("./PageTemplates.cjs"), module.exports);
+__reExport(layouts_exports, require("./PaneScaffold.cjs"), module.exports);
+var import_AsyncBoundary = require("./AsyncBoundary.cjs");

package/dist/cjs/layouts/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,14 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var layouts_exports = {};
+__export(layouts_exports, {
+  AsyncBoundary: () => import_AsyncBoundary.AsyncBoundary,
+  AsyncSkeleton: () => import_AsyncBoundary.AsyncSkeleton,
+  __resetAsyncDevWarnSeen: () => import_AsyncBoundary.__resetAsyncDevWarnSeen,
+  resolveAsyncStatus: () => import_AsyncBoundary.resolveAsyncStatus,
+  useAsyncBoundary: () => import_AsyncBoundary.useAsyncBoundary,
+  useAsyncCount: () => import_AsyncBoundary.useAsyncCount
+});
 module.exports = __toCommonJS(layouts_exports);
 __reExport(layouts_exports, require("./Debug/index.native.js"), module.exports);
 __reExport(layouts_exports, require("./SafeAreaWrapper/index.native.js"), module.exports);
@@ -30,4 +44,8 @@ __reExport(layouts_exports, require("./attachments.native.js"), module.exports);
 __reExport(layouts_exports, require("./tags.native.js"), module.exports);
 __reExport(layouts_exports, require("./timeline.native.js"), module.exports);
 __reExport(layouts_exports, require("./page.native.js"), module.exports);
+__reExport(layouts_exports, require("./pageHeadingScope.native.js"), module.exports);
+__reExport(layouts_exports, require("./PageTemplates.native.js"), module.exports);
+__reExport(layouts_exports, require("./PaneScaffold.native.js"), module.exports);
+var import_AsyncBoundary = require("./AsyncBoundary.native.js");
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/layouts/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","layouts_exports","module","exports","__reExport","require"],"sources":["../../../src/layouts/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,eAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,eAAA;AACdG,UAAA,CAAAH,eAAA,EAAcI,OAAA,6BAAAH,MAAA,CAAAC,OADd;AAEAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,uCAAAH,MAAA,CAAAC,OAFd;AAGAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,4CAHd,GAAAH,MAAA,CAAAC,OAAA;AAIAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,yBAJdH,MAAA,CAAAC,OAAA;AAKAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,yBAAAH,MALd,CAAAC,OAAA;AAMAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,8BANdH,MAAA,CAAAC,OAAA;AAOAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,6BAPdH,MAAA,CAAAC,OAAA;AAQAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,0BARd,GAAAH,MAAA,CAAAC,OAAA;AASAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,sBAAAH,MATd,CAAAC,OAAA;AAUAC,UAAA,CAAAH,eAAA,EAAcI,OAAA,uBAVd,GAAAH,MAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","layouts_exports","__export","AsyncBoundary","import_AsyncBoundary","AsyncSkeleton","__resetAsyncDevWarnSeen","resolveAsyncStatus","useAsyncBoundary","useAsyncCount","module","exports","__reExport","require"],"sources":["../../../src/layouts/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,eAAA;AAAAC,QAAA,CAAAD,eAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAC,oBAAA,CAAAD,aAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAD,oBAAA,CAAAC,aAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAF,oBAAA,CAAAE,uBAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAH,oBAAA,CAAAG,kBAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAJ,oBAAA,CAAAI,gBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAL,oBAAA,CAAAK;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAf,YAAc,CAAAK,eAAA;AACdW,UAAA,CAAAX,eAAA,EAAcY,OAAA,6BAAAH,MAAA,CAAAC,OADd;AAEAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,uCAAAH,MAAA,CAAAC,OAFd;AAGAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,4CAHd,GAAAH,MAAA,CAAAC,OAAA;AAIAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,yBAJdH,MAAA,CAAAC,OAAA;AAKAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,yBAAAH,MALd,CAAAC,OAAA;AAMAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,8BANdH,MAAA,CAAAC,OAAA;AAOAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,6BAPdH,MAAA,CAAAC,OAAA;AAQAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,0BARd,GAAAH,MAAA,CAAAC,OAAA;AASAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,sBAAAH,MATd,CAAAC,OAAA;AAUAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,uBAVd,GAAAH,MAAA,CAAAC,OAAA;AAWAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,sBAAAH,MAAA,CAAAC,OAXd;AAYAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,+BAZd,GAAAH,MAAA,CAAAC,OAAA;AAaAC,UAAA,CAAAX,eAAA,EAAcY,OAAA,+BAbdH,MAAA,CAAAC,OAAA;AAcAC,UAAA,CAAAX,eAAA,EAWOY,OAAA,8BAAAH,MAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/cjs/layouts/page.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var page_exports = {};
 __export(page_exports, {
+  CONTENT_MAX_WIDTH: () => CONTENT_MAX_WIDTH,
   EmptyState: () => EmptyState,
   PageHeader: () => PageHeader,
   PageSection: () => PageSection,
@@ -32,11 +33,26 @@ module.exports = __toCommonJS(page_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
+var import_pageHeadingScope = require("./pageHeadingScope.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const PAGE_HEADING_TAGS = {
+  1: import_tamagui.H1,
+  2: import_tamagui.H2,
+  3: import_tamagui.H3,
+  4: import_tamagui.H4,
+  5: import_tamagui.H5,
+  6: import_tamagui.H6
+};
+const subtitleSizeMap = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+const CONTENT_MAX_WIDTH = import_theme.layoutBreakpoints.xl;
 function Screen({
   children,
   scroll = true,
-  maxWidth = 1200,
+  maxWidth = CONTENT_MAX_WIDTH,
   bleed = false,
   noPadding = false,
   scrollViewProps,
@@ -55,7 +71,9 @@ function Screen({
     ...(noPadding ? null : knobProps.panelPadding),
     ...knobProps.gapLg,
     ...rest,
-    children
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_pageHeadingScope.PageHeadingScope, {
+      children
+    })
   });
   if (!scroll) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -67,6 +85,9 @@ function Screen({
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     flex: 1,
     backgroundColor: "$background",
+    contentContainerStyle: {
+      flexGrow: 1
+    },
     ...scrollViewProps,
     children: inner
   });
@@ -77,14 +98,31 @@ function PageHeader({
   heading,
   actions,
   divider = true,
+  headingLevel = 1,
+  titleScale = "display",
   children,
   ...rest
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const titleNode = heading ?? (title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+  (0, import_pageHeadingScope.useRegisterPageHeading)({
+    level: headingLevel,
+    component: "PageHeader",
+    label: title,
+    enabled: !heading && !!title
+  });
+  const headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  const TitleTag = PAGE_HEADING_TAGS[headingLevel];
+  const titleSize = titleScale === "moderate" ? {
+    size: "$8"
+  } : null;
+  const titleNode = heading ?? (title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleTag, {
     margin: 0,
+    ...titleSize,
+    ...headingFamily,
     children: title
   }) : null);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
@@ -96,20 +134,29 @@ function PageHeader({
       flexWrap: "wrap",
       ...knobProps.gap,
       children: [titleNode ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flexShrink: 1,
+        minWidth: 0,
         children: titleNode
       }) : null, actions ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
         ...knobProps.gap,
         alignItems: "center",
         flexWrap: "wrap",
+        flexShrink: 1,
+        minWidth: 0,
         children: actions
       }) : null]
-    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+    }), subtitle ?
+    // Lede rides one step above the size-knob body scale (medium keeps
+    // the previous $5), so the size knob reaches the header copy (LC-18).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
       color: import_componentColors.componentColors.text.muted,
-      size: "$5",
+      size: subtitleSizeMap[knobProps.sizeToken] ?? "$5",
       margin: 0,
       children: subtitle
     }) : null, children, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-      borderColor: import_componentColors.componentColors.divider
+      ...import_theme.hairline.line,
+      backgroundColor: import_componentColors.componentColors.divider
     }) : null]
   });
 }
@@ -119,38 +166,51 @@ function PageSection({
   heading,
   divider = true,
   surface = false,
+  headingLevel = 2,
   children,
   ...rest
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const headingNode = heading ?? (title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+  const headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  const SectionTag = PAGE_HEADING_TAGS[headingLevel];
+  const headingNode = heading ?? (title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionTag, {
     margin: 0,
+    ...headingFamily,
+    ...import_componentColors.sectionHeading,
     children: title
   }) : null);
   const surfaceProps = surface ? {
-    backgroundColor: import_componentColors.componentColors.surface.background,
-    borderRadius: "$4",
-    borderWidth: 1,
-    borderColor: import_componentColors.componentColors.surface.border,
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
     ...knobProps.panelPadding
   } : {};
+  const headerBlock = headingNode || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
+    children: [headingNode, description ?
+    // Section copy follows the size-knob body scale (medium = $4).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      color: import_componentColors.componentColors.text.muted,
+      size: knobProps.sizeToken,
+      margin: 0,
+      children: description
+    }) : null, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      ...import_theme.hairline.line,
+      backgroundColor: import_componentColors.componentColors.divider
+    }) : null]
+  }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    ...surfaceProps,
     ...rest,
-    children: [headingNode || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$2",
-      children: [headingNode, description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-        color: import_componentColors.componentColors.text.muted,
-        size: "$4",
-        margin: 0,
-        children: description
-      }) : null, divider ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-        borderColor: import_componentColors.componentColors.divider
-      }) : null]
-    }) : null, children]
+    children: [headerBlock, surface ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      ...surfaceProps,
+      children
+    }) : children]
   });
 }
 function EmptyState({
@@ -158,28 +218,65 @@ function EmptyState({
   description,
   icon,
   action,
+  compact = false,
+  intent = "neutral",
   children,
   ...rest
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    flex: 1,
+    flex: compact ? void 0 : 1,
     alignItems: "center",
     justifyContent: "center",
+    "data-empty-intent": intent,
     ...knobProps.panelPadding,
     ...knobProps.gap,
     ...rest,
-    children: [icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+    children: [icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "$color3",
+      padding: knobProps.sizeToken,
+      borderRadius: 1e3,
+      children: icon
+    }) : null, compact ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+      color: import_componentColors.componentColors.text.muted,
       textAlign: "center",
       margin: 0,
+      ...(!import_tamagui.isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
+      children: title
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+      ...headingFamily,
+      textAlign: "center",
+      margin: 0,
+      fontWeight: "600",
+      $sm: {
+        fontSize: "$8",
+        lineHeight: 42
+      },
+      ...(!import_tamagui.isWeb && {
+        numberOfLines: 2,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.55
+      }),
       children: title
     }), description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
       color: import_componentColors.componentColors.text.muted,
+      size: knobProps.sizeToken,
       textAlign: "center",
-      maxWidth: 520,
       margin: 0,
+      ...(0, import_theme.readingWidthStyle)(),
       children: description
     }) : null, action, children]
   });
@@ -196,15 +293,23 @@ function ScreenToolbar({
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     justifyContent: "space-between",
     alignItems: "center",
+    flexWrap: "wrap",
     ...knobProps.gap,
     ...rest,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
       children: leading
     }), children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       ...knobProps.gap,
       alignItems: "center",
+      flexWrap: "wrap",
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "flex-end",
       children: trailing
     })]
   });