@multiplatform.one/components 6.1.0 → 6.4.0

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

@@ -24,6 +24,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,
@@ -35,11 +36,26 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.native.js");
+var import_pageHeadingScope = require("./pageHeadingScope.native.js");
+var 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
+};
+var subtitleSizeMap = {
+  $3: "$4",
+  $4: "$5",
+  $5: "$6"
+};
+var CONTENT_MAX_WIDTH = import_theme.layoutBreakpoints.xl;
 function Screen(param) {
   var {
     children,
     scroll = true,
-    maxWidth = 1200,
+    maxWidth = CONTENT_MAX_WIDTH,
     bleed = false,
     noPadding = false,
     scrollViewProps,
@@ -58,7 +74,10 @@ function Screen(param) {
     ...(noPadding ? null : knobProps.panelPadding),
     ...knobProps.gapLg,
     ...rest,
-    children
+    children: (/* DG-A11Y-02: one h1 budget per Screen — catalog headings register here. */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_pageHeadingScope.PageHeadingScope, {
+      children
+    }))
   });
   if (!scroll) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -70,6 +89,11 @@ function Screen(param) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     flex: 1,
     backgroundColor: "$background",
+    // flexGrow lets flex:1 children (e.g. EmptyState centering) fill the
+    // viewport when the content is shorter than the screen.
+    contentContainerStyle: {
+      flexGrow: 1
+    },
     ...scrollViewProps,
     children: inner
   });
@@ -81,14 +105,32 @@ function PageHeader(param) {
     heading,
     actions,
     divider = true,
+    headingLevel = 1,
+    titleScale = "display",
     children,
     ...rest
   } = param;
+  var _subtitleSizeMap_knobProps_sizeToken;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var titleNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+  (0, import_pageHeadingScope.useRegisterPageHeading)({
+    level: headingLevel,
+    component: "PageHeader",
+    label: title,
+    enabled: !heading && !!title
+  });
+  var headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  var TitleTag = PAGE_HEADING_TAGS[headingLevel];
+  var titleSize = titleScale === "moderate" ? {
+    size: "$8"
+  } : null;
+  var titleNode = heading !== null && heading !== void 0 ? 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, {
@@ -99,21 +141,35 @@ function PageHeader(param) {
       alignItems: "center",
       flexWrap: "wrap",
       ...knobProps.gap,
-      children: [titleNode ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      children: [
+      /* LC-10 FRAME-CONTAINMENT: title + actions must shrink and wrap at
+      narrow widths instead of painting past the frame. flexShrink:1 +
+      minWidth:0 lets the H1 wrap (DF-02) and each action wrap below the
+      title rather than clip off-canvas (DF-01). */
+      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 = subtitleSizeMap[knobProps.sizeToken]) !== null && _subtitleSizeMap_knobProps_sizeToken !== void 0 ? _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]
   });
 }
@@ -124,38 +180,51 @@ function PageSection(param) {
     heading,
     divider = true,
     surface = false,
+    headingLevel = 2,
     children,
     ...rest
   } = param;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var headingNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
+  var headingFamily = import_tamagui.isWeb ? null : {
+    fontFamily: knobProps.heading.fontFamily
+  };
+  var SectionTag = PAGE_HEADING_TAGS[headingLevel];
+  var headingNode = heading !== null && heading !== void 0 ? heading : title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SectionTag, {
     margin: 0,
+    ...headingFamily,
+    ...import_componentColors.sectionHeading,
     children: title
   }) : null;
   var surfaceProps = surface ? {
-    backgroundColor: import_componentColors.componentColors.surface.background,
-    borderRadius: "$4",
-    borderWidth: 1,
-    borderColor: import_componentColors.componentColors.surface.border,
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
     ...knobProps.panelPadding
   } : {};
+  var 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(param) {
@@ -164,28 +233,73 @@ function EmptyState(param) {
     description,
     icon,
     action,
+    compact = false,
+    intent = "neutral",
     children,
     ...rest
   } = param;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var 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",
+      // R-PILL icon well: always a circle; its inset scales with the
+      // size knob (spec: empty icon well consumes sizeToken).
+      padding: knobProps.sizeToken,
+      borderRadius: 1e3,
+      children: icon
+    }) : null,
+    /* RN has no hyphenation, so a long single word (brand names, ids)
+    character-wraps and orphans its tail on phone widths. $sm steps the
+    42px H2 down on web; native scales the text to FIT instead
+    (adjustsFontSizeToFit) -- deterministic at any width, no media
+    dependency. */
+    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]
   });
@@ -203,15 +317,23 @@ function ScreenToolbar(param) {
   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
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","page_exports","__export","EmptyState","PageHeader","PageSection","Screen","ScreenToolbar","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","param","children","scroll","maxWidth","bleed","noPadding","scrollViewProps","rest","knobProps","useResolvedKnobs","inner","jsx","YStack","flex","width","alignSelf","panelPadding","gapLg","backgroundColor","ScrollView","title","subtitle","heading","actions","divider","titleNode","H1","margin","jsxs","gap","XStack","justifyContent","alignItems","flexWrap","Paragraph","color","componentColors","text","muted","size","Separator","borderColor","description","surface","headingNode","H2","surfaceProps","background","borderRadius","borderWidth","border","icon","action"],"sources":["../../../src/layouts/page.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","page_exports","__export","CONTENT_MAX_WIDTH","EmptyState","PageHeader","PageSection","Screen","ScreenToolbar","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","import_pageHeadingScope","PAGE_HEADING_TAGS","H1","H2","H3","H4","H5","H6","subtitleSizeMap","$3","$4","$5","layoutBreakpoints","xl","param","children","scroll","maxWidth","bleed","noPadding","scrollViewProps","rest","knobProps","useResolvedKnobs","inner","jsx","YStack","flex","width","alignSelf","panelPadding","gapLg","PageHeadingScope","backgroundColor","ScrollView","contentContainerStyle","flexGrow","title","subtitle","heading","actions","divider","headingLevel","titleScale","_subtitleSizeMap_knobProps_sizeToken","useRegisterPageHeading","level","component","label","enabled","headingFamily","isWeb","fontFamily","TitleTag","titleSize","size","titleNode","margin","jsxs","gap","XStack","justifyContent","alignItems","flexWrap","flexShrink","minWidth","Paragraph","color","componentColors","text","muted","sizeToken","Separator","hairline","line","description","surface","SectionTag","headingNode","sectionHeading","surfaceProps","containerRadius","headerBlock","icon","action","compact","intent","padding","borderRadius","textAlign","numberOfLines","adjustsFontSizeToFit","minimumFontScale","fontWeight","$sm","fontSize","lineHeight","readingWidthStyle"],"sources":["../../../src/layouts/page.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/layouts/pageHeadingScope.cjs

@@ -0,0 +1,74 @@
+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 pageHeadingScope_exports = {};
+__export(pageHeadingScope_exports, {
+  PageHeadingScope: () => PageHeadingScope,
+  useRegisterPageHeading: () => useRegisterPageHeading
+});
+module.exports = __toCommonJS(pageHeadingScope_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+const PageHeadingScopeContext = (0, import_react.createContext)(null);
+function PageHeadingScope({
+  children,
+  name = "Screen"
+}) {
+  const h1CountRef = (0, import_react.useRef)(0);
+  const value = (0, import_react.useMemo)(() => ({
+    registerH1: detail => {
+      h1CountRef.current += 1;
+      if (h1CountRef.current > 1) {
+        (0, import_theme.devWarn)("multiple-h1", {
+          component: name,
+          id: detail?.component,
+          value: detail?.label,
+          count: h1CountRef.current
+        });
+      }
+      return () => {
+        h1CountRef.current -= 1;
+      };
+    }
+  }), [name]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PageHeadingScopeContext.Provider, {
+    value,
+    children
+  });
+}
+function useRegisterPageHeading(args) {
+  const registry = (0, import_react.useContext)(PageHeadingScopeContext);
+  const {
+    level,
+    component,
+    label,
+    enabled = true
+  } = args;
+  (0, import_react.useEffect)(() => {
+    if (!enabled || level !== 1 || !registry) return;
+    return registry.registerH1({
+      component,
+      label
+    });
+  }, [enabled, level, registry, component, label]);
+}

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

@@ -0,0 +1,80 @@
+"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 pageHeadingScope_exports = {};
+__export(pageHeadingScope_exports, {
+  PageHeadingScope: () => PageHeadingScope,
+  useRegisterPageHeading: () => useRegisterPageHeading
+});
+module.exports = __toCommonJS(pageHeadingScope_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var PageHeadingScopeContext = /* @__PURE__ */(0, import_react.createContext)(null);
+function PageHeadingScope(param) {
+  var {
+    children,
+    name = "Screen"
+  } = param;
+  var h1CountRef = (0, import_react.useRef)(0);
+  var value = (0, import_react.useMemo)(function () {
+    return {
+      registerH1: function registerH1(detail) {
+        h1CountRef.current += 1;
+        if (h1CountRef.current > 1) {
+          (0, import_theme.devWarn)("multiple-h1", {
+            component: name,
+            id: detail === null || detail === void 0 ? void 0 : detail.component,
+            value: detail === null || detail === void 0 ? void 0 : detail.label,
+            count: h1CountRef.current
+          });
+        }
+        return function () {
+          h1CountRef.current -= 1;
+        };
+      }
+    };
+  }, [name]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PageHeadingScopeContext.Provider, {
+    value,
+    children
+  });
+}
+function useRegisterPageHeading(args) {
+  var registry = (0, import_react.useContext)(PageHeadingScopeContext);
+  var {
+    level,
+    component,
+    label,
+    enabled = true
+  } = args;
+  (0, import_react.useEffect)(function () {
+    if (!enabled || level !== 1 || !registry) return;
+    return registry.registerH1({
+      component,
+      label
+    });
+  }, [enabled, level, registry, component, label]);
+}
+//# sourceMappingURL=pageHeadingScope.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","pageHeadingScope_exports","__export","PageHeadingScope","useRegisterPageHeading","module","exports","import_jsx_runtime","require","import_theme","import_react","PageHeadingScopeContext","createContext","param","children","name","h1CountRef","useRef","useMemo","registerH1","detail","current","devWarn","component","id","label","count","jsx","Provider","args","registry","useContext"],"sources":["../../../src/layouts/pageHeadingScope.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,wBAAA;AAAAC,QAAA,CAAAD,wBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,sBAAA,EAAAA,CAAA,KAAAA;AAAA;AAeAC,MAAA,CAAAC,OAAA,GAAAV,YAAwB,CAAAK,wBAAA;AAExB,IAAAM,kBAAsE,GAAAC,OAAA;AA6ClE,IAAAC,YAAA,GAAAD,OAAA;AAnCJ,IAAAE,YAAM,GAAAF,OAAA;AAaC,IAAAG,uBAA0B,GAAE,eAAiB,IAAAD,YAAmC,CAAAE,aAAA;AACrF,SAAMT,gBAAaA,CAAAU,KAAA;EACnB;IAAMC,QAAA;IAAAC,IAAQ;EAAA,IAAAF,KAAA;EAAA,IACZG,UAAO,OAAAN,YAAA,CAAAO,MAAA;EAAA,IACLjB,KAAA,OAAYU,YAAY,CAAAQ,OAAA;IACtB;MACAC,UAAI,WAAWA,UAAaA,CAAAC,MAAA;QAC1BJ,UAAA,CAAAK,OAAA;QAAuB,IACrBL,UAAA,CAAWK,OAAA;UAAA,EACX,EAAAZ,YAAY,CAAAa,OAAA;YACZC,SAAO,EAAAR,IAAQ;YACfS,EAAA,EAAAJ,MAAO,SAAW,IAAAA,MAAA,uBAAAA,MAAA,CAAAG,SAAA;YACnBvB,KAAA,EAAAoB,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAAK,KAAA;YACHC,KAAA,EAAAV,UAAA,CAAAK;UACA;QACE;QACF;UACFL,UAAA,CAAAK,OAAA;QACF;MACC;IACH;EACA,IAGFN,IAAA,CAOO;EASL,OAAM,eAAW,IAAAR,kBAAA,CAAWoB,GAAA,EAAAhB,uBAAuB,CAAAiB,QAAA;IACnD5B,KAAM;IACNc;EACE;AACA;AAA+C,SAC7CV,sBAAgBA,CAAUyB,IAAA;EAChC,IAAAC,QAAA,OAAApB,YAAA,CAAAqB,UAAA,EAAApB,uBAAA","ignoreList":[]}

package/dist/cjs/layouts/sidebar.cjs

@@ -36,38 +36,58 @@ function Sidebar({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const onAccent = (0, import_theme.useReadableTextOn)("$accentBackground");
+  const rowPad = knobProps.panelPadding.padding;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     width,
-    borderRightWidth: 1,
     borderColor: "$borderColor",
+    ...(import_tamagui.isWeb ? {
+      borderInlineEndWidth: import_theme.hairlineWidth,
+      borderInlineEndStyle: "solid",
+      className: "mp-hairline-ie"
+    } : {
+      borderEndWidth: import_theme.hairlineWidth
+    }),
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
         ...knobProps.panelPadding,
+        paddingHorizontal: 0,
         ...knobProps.gapLg,
         children: sections.map((section, sectionIdx) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
           ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+          children: [section.title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            size: knobProps.sizeToken,
             fontSize: "$2",
             fontWeight: "600",
             textTransform: "uppercase",
             color: import_componentColors.componentColors.text.muted,
-            paddingHorizontal: "$2",
-            size: knobProps.sizeToken,
+            paddingHorizontal: 0,
+            marginHorizontal: rowPad,
+            height: "auto",
+            lineHeight: "$1",
             children: section.title
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group, {
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group, {
+            borderRadius: knobProps.borderRadius.borderRadius,
             children: section.items.map((item, itemIdx) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Group.Item, {
-              children: [itemIdx > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+              children: [itemIdx > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+                ...import_theme.hairline.line
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
                 title: item.label,
                 subTitle: item.subTitle,
                 icon: item.icon,
                 iconAfter: item.count !== void 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                  color: import_componentColors.componentColors.text.muted,
+                  color: item.active && onAccent ? onAccent : import_componentColors.componentColors.text.muted,
                   fontSize: "$2",
                   children: ["(", item.count, ")"]
                 }) : void 0,
                 size: knobProps.sizeToken,
+                paddingHorizontal: rowPad,
+                borderRadius: knobProps.borderRadius.borderRadius,
                 theme: item.active ? "active" : void 0,
                 backgroundColor: item.active ? "$accentBackground" : "transparent",
+                ...(item.active && onAccent ? {
+                  color: onAccent
+                } : void 0),
                 hoverStyle: {
                   backgroundColor: import_componentColors.componentColors.surface.background
                 },
@@ -75,11 +95,29 @@ function Sidebar({
                   backgroundColor: import_componentColors.componentColors.interactive.background
                 },
                 cursor: item.onPress ? "pointer" : "default",
-                onPress: item.onPress
+                onPress: item.onPress,
+                ...(item.onPress ? {
+                  role: "button",
+                  tabIndex: 0,
+                  focusVisibleStyle: {
+                    outlineColor: "$outlineColor",
+                    outlineWidth: 2,
+                    outlineStyle: "solid",
+                    outlineOffset: -2
+                  },
+                  onKeyDown: e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      item.onPress?.();
+                    }
+                  }
+                } : void 0)
               })]
             }, item.label))
-          }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-        }, section.title))
+          }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+            ...import_theme.hairline.line
+          })]
+        }, section.title ?? sectionIdx))
       })
     })
   });