@marktiderman/genesis-ui 2.15.0 → 2.17.0

package/SKILL.md

@@ -386,7 +386,8 @@ most specific sibling wins) and an optional `badge` (a count or short status, sh
 it over.
 For live data (badge counts) the page calls `useAppShellSubNav(items, { mode? })`, which
 replaces the node's items while it is mounted, and puts a host chip at the end of the tab row with
-`<AppShellSubNavEnd>…</AppShellSubNavEnd>`. The page's resource header (breadcrumb, title,
+`<AppShellSubNavEnd>…</AppShellSubNavEnd>` (on phones, where the bottom bar replaces the row,
+the chip moves to a compact strip under the page header, so it stays reachable). The page's resource header (breadcrumb, title,
 status, actions) goes in `<AppShellPageHeader>…</AppShellPageHeader>`, which the shell renders
 above the tab row (on phones too; at the top of the content when there is no row). Both are
 portals; when a layout and its page both mount one, the page's (innermost) renders, and the same

package/dist/{AppShell-HCXpi6nv.d.ts → AppShell-DDyVqNmJ.d.ts}

@@ -31,6 +31,14 @@ type SubNavMode = "section" | "tabs" | "sidebar" | "off";
 interface SubNavItem extends Omit<NavItem, "icon" | "children"> {
     icon?: LucideIcon;
     children?: SubNavItem[];
+    /**
+     * Leave this item out of the phone bar (it stays in the tab row, the
+     * sidebar and the rail). The phone bar fits back plus about four items:
+     * fold a builder panel into its parent tab on phones instead of
+     * overflowing. If its route sits under another item's (without `end`),
+     * that item shows as current while it is open.
+     */
+    hideOnPhone?: boolean;
 }
 /**
  * Props for {@link SubNavTabs}.
@@ -93,8 +101,10 @@ declare function useAppShellSubNav(items: SubNavItem[] | null | undefined, optio
 /**
  * Render `children` in the right-hand slot of the shell's sub-navigation
  * tab row, e.g. a "Ready to publish" status chip. Rendered through a
- * portal, so it keeps the page's context and state. Renders nothing when
- * the shell shows no tab row (other modes, phones, no children). When
+ * portal, so it keeps the page's context and state. On phones, where the
+ * bottom bar replaces the tab row, it renders in a compact strip under the
+ * page header instead, so the chip stays reachable. Renders nothing when
+ * the shell has no tab row (other modes, a page without children). When
  * several are mounted (a layout's and a page's), the innermost renders.
  *
  * @stability Beta

package/dist/{chunk-46TZGMFW.js → chunk-24NUW3QN.js}

@@ -1,17 +1,19 @@
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-FK42ZGGV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-22XB3Q6H.js';
 import { Button } from './chunk-NWSCYLPT.js';
+import { useUiMessages, fillMessage } from './chunk-YCQAYWMX.js';
 import { LayoutGrid, Table2, List, Settings2 } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 
 function ViewToggle({ viewMode, onViewModeChange }) {
+  const m = useUiMessages();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex items-center border rounded-lg overflow-hidden",
       role: "group",
-      "aria-label": "View mode",
+      "aria-label": m.view.mode,
       children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -20,8 +22,8 @@ function ViewToggle({ viewMode, onViewModeChange }) {
             size: "icon",
             className: "h-8 w-8 rounded-none",
             onClick: () => onViewModeChange("grid"),
-            title: "Grid view",
-            "aria-label": "Grid view",
+            title: m.view.grid,
+            "aria-label": m.view.grid,
             "aria-pressed": viewMode === "grid",
             testID: "view-toggle-grid",
             children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4", "aria-hidden": "true" })
@@ -34,8 +36,8 @@ function ViewToggle({ viewMode, onViewModeChange }) {
             size: "icon",
             className: "h-8 w-8 rounded-none",
             onClick: () => onViewModeChange("table"),
-            title: "Table view",
-            "aria-label": "Table view",
+            title: m.view.table,
+            "aria-label": m.view.table,
             "aria-pressed": viewMode === "table",
             testID: "view-toggle-table",
             children: /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4", "aria-hidden": "true" })
@@ -48,8 +50,8 @@ function ViewToggle({ viewMode, onViewModeChange }) {
             size: "icon",
             className: "h-8 w-8 rounded-none",
             onClick: () => onViewModeChange("list"),
-            title: "List view",
-            "aria-label": "List view",
+            title: m.view.list,
+            "aria-label": m.view.list,
             "aria-pressed": viewMode === "list",
             testID: "view-toggle-list",
             children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4", "aria-hidden": "true" })
@@ -61,9 +63,9 @@ function ViewToggle({ viewMode, onViewModeChange }) {
 }
 var PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 var DENSITY_OPTIONS = [
-  { value: "compact", label: "Compact" },
-  { value: "comfortable", label: "Comfortable" },
-  { value: "spacious", label: "Spacious" }
+  { value: "compact", label: "compact" },
+  { value: "comfortable", label: "comfortable" },
+  { value: "spacious", label: "spacious" }
 ];
 function ViewSettings({
   pageSize,
@@ -71,6 +73,7 @@ function ViewSettings({
   density,
   onDensityChange
 }) {
+  const m = useUiMessages();
   const baseId = useId();
   const pageSizeLabelId = `${baseId}-page-size`;
   const densityLabelId = `${baseId}-density`;
@@ -81,21 +84,21 @@ function ViewSettings({
         variant: "ghost",
         size: "icon",
         className: "h-8 w-8",
-        title: "View settings",
-        "aria-label": "View settings",
+        title: m.view.settings,
+        "aria-label": m.view.settings,
         testID: "view-settings-trigger",
         children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4", "aria-hidden": "true" })
       }
     ) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 space-y-4", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Display Settings" }),
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: m.view.settingsTitle }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             id: pageSizeLabelId,
             className: "block text-xs text-muted-foreground",
-            children: "Page size"
+            children: m.view.pageSize
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -113,10 +116,7 @@ function ViewSettings({
                   children: /* @__PURE__ */ jsx(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsxs(SelectItem, { value: String(n), children: [
-                n,
-                " items"
-              ] }, n)) })
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), children: fillMessage(m.view.pageSizeOption, { n }) }, n)) })
             ]
           }
         )
@@ -127,7 +127,7 @@ function ViewSettings({
           {
             id: densityLabelId,
             className: "block text-xs text-muted-foreground",
-            children: "Density"
+            children: m.view.density
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -145,7 +145,7 @@ function ViewSettings({
                   children: /* @__PURE__ */ jsx(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: DENSITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: DENSITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: m.view[opt.label] }, opt.value)) })
             ]
           }
         )
@@ -155,5 +155,5 @@ function ViewSettings({
 }
 
 export { ViewSettings, ViewToggle };
-//# sourceMappingURL=chunk-46TZGMFW.js.map
-//# sourceMappingURL=chunk-46TZGMFW.js.map
+//# sourceMappingURL=chunk-24NUW3QN.js.map
+//# sourceMappingURL=chunk-24NUW3QN.js.map

package/dist/chunk-24NUW3QN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/patterns/view-toggle.tsx","../src/components/patterns/view-settings.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;;;;AAWO,SAAS,UAAA,CAAW,EAAE,QAAA,EAAU,gBAAA,EAAiB,EAAoB;AAC1E,EAAA,MAAM,IAAI,aAAA,EAAc;AAKxB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,qDAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,EAAE,IAAA,CAAK,IAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,QAAA,KAAa,MAAA,GAAS,SAAA,GAAY,OAAA;AAAA,YAC3C,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,sBAAA;AAAA,YACV,OAAA,EAAS,MAAM,gBAAA,CAAiB,MAAM,CAAA;AAAA,YACtC,KAAA,EAAO,EAAE,IAAA,CAAK,IAAA;AAAA,YACd,YAAA,EAAY,EAAE,IAAA,CAAK,IAAA;AAAA,YACnB,gBAAc,QAAA,KAAa,MAAA;AAAA,YAC3B,MAAA,EAAO,kBAAA;AAAA,YAEP,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,SAAA,EAAU,eAAY,MAAA,EAAO;AAAA;AAAA,SACrD;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,QAAA,KAAa,OAAA,GAAU,SAAA,GAAY,OAAA;AAAA,YAC5C,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,sBAAA;AAAA,YACV,OAAA,EAAS,MAAM,gBAAA,CAAiB,OAAO,CAAA;AAAA,YACvC,KAAA,EAAO,EAAE,IAAA,CAAK,KAAA;AAAA,YACd,YAAA,EAAY,EAAE,IAAA,CAAK,KAAA;AAAA,YACnB,gBAAc,QAAA,KAAa,OAAA;AAAA,YAC3B,MAAA,EAAO,mBAAA;AAAA,YAEP,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAU,SAAA,EAAU,eAAY,MAAA,EAAO;AAAA;AAAA,SACjD;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,QAAA,KAAa,MAAA,GAAS,SAAA,GAAY,OAAA;AAAA,YAC3C,IAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAU,sBAAA;AAAA,YACV,OAAA,EAAS,MAAM,gBAAA,CAAiB,MAAM,CAAA;AAAA,YACtC,KAAA,EAAO,EAAE,IAAA,CAAK,IAAA;AAAA,YACd,YAAA,EAAY,EAAE,IAAA,CAAK,IAAA;AAAA,YACnB,gBAAc,QAAA,KAAa,MAAA;AAAA,YAC3B,MAAA,EAAO,kBAAA;AAAA,YAEP,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,eAAY,MAAA,EAAO;AAAA;AAAA;AAC/C;AAAA;AAAA,GACF;AAEJ;ACpCA,IAAM,iBAAA,GAAoB,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,GAAG,CAAA;AAC1C,IAAM,eAAA,GAAuF;AAAA,EAC3F,EAAE,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU;AAAA,EACrC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,aAAA,EAAc;AAAA,EAC7C,EAAE,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,UAAA;AAC9B,CAAA;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,IAAI,aAAA,EAAc;AAKxB,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,eAAA,GAAkB,GAAG,MAAM,CAAA,UAAA,CAAA;AACjC,EAAA,MAAM,cAAA,GAAiB,GAAG,MAAM,CAAA,QAAA,CAAA;AAEhC,EAAA,uBACEA,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,GAAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAAA,GAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,MAAA;AAAA,QACL,SAAA,EAAU,SAAA;AAAA,QACV,KAAA,EAAO,EAAE,IAAA,CAAK,QAAA;AAAA,QAEd,YAAA,EAAY,EAAE,IAAA,CAAK,QAAA;AAAA,QACnB,MAAA,EAAO,uBAAA;AAAA,QAEP,0BAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,SAAA,EAAU,eAAY,MAAA,EAAO;AAAA;AAAA,KACpD,EACF,CAAA;AAAA,oBACAD,IAAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAM,KAAA,EAAM,WAAU,gBAAA,EACpC,QAAA,EAAA;AAAA,sBAAAC,IAAC,IAAA,EAAA,EAAG,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,CAAA,CAAE,KAAK,aAAA,EAAc,CAAA;AAAA,sBAE5DD,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,GAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,eAAA;AAAA,YACJ,SAAA,EAAU,qCAAA;AAAA,YAET,YAAE,IAAA,CAAK;AAAA;AAAA,SACV;AAAA,wBACAD,IAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,OAAO,QAAQ,CAAA;AAAA,YACtB,eAAe,CAAC,CAAA,KAAM,gBAAA,CAAiB,MAAA,CAAO,CAAC,CAAC,CAAA;AAAA,YAEhD,QAAA,EAAA;AAAA,8BAAAC,GAAAA;AAAA,gBAAC,aAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,aAAA;AAAA,kBACV,iBAAA,EAAiB,eAAA;AAAA,kBACjB,aAAA,EAAY,yBAAA;AAAA,kBAEZ,QAAA,kBAAAA,IAAC,WAAA,EAAA,EAAY;AAAA;AAAA,eACf;AAAA,8BACAA,GAAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,iBAAA,EACtB,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,CAAA,qBACtBA,GAAAA,CAAC,UAAA,EAAA,EAAmB,KAAA,EAAO,OAAO,CAAC,CAAA,EAChC,QAAA,EAAA,WAAA,CAAY,CAAA,CAAE,IAAA,CAAK,cAAA,EAAgB,EAAE,CAAA,EAAG,CAAA,EAAA,EAD1B,CAEjB,CACD,CAAA,EACH;AAAA;AAAA;AAAA;AACF,OAAA,EACF,CAAA;AAAA,sBAEAD,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,GAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,cAAA;AAAA,YACJ,SAAA,EAAU,qCAAA;AAAA,YAET,YAAE,IAAA,CAAK;AAAA;AAAA,SACV;AAAA,wBACAD,IAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,OAAA;AAAA,YACP,aAAA,EAAe,CAAC,CAAA,KAAM,eAAA,CAAgB,CAAY,CAAA;AAAA,YAElD,QAAA,EAAA;AAAA,8BAAAC,GAAAA;AAAA,gBAAC,aAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,aAAA;AAAA,kBACV,iBAAA,EAAiB,cAAA;AAAA,kBACjB,aAAA,EAAY,uBAAA;AAAA,kBAEZ,QAAA,kBAAAA,IAAC,WAAA,EAAA,EAAY;AAAA;AAAA,eACf;AAAA,8BACAA,IAAC,aAAA,EAAA,EAAc,SAAA,EAAU,mBACtB,QAAA,EAAA,eAAA,CAAgB,GAAA,CAAI,CAAC,GAAA,qBACpBA,GAAAA,CAAC,cAA2B,KAAA,EAAO,GAAA,CAAI,KAAA,EACpC,QAAA,EAAA,CAAA,CAAE,IAAA,CAAK,GAAA,CAAI,KAAK,CAAA,EAAA,EADF,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA;AAAA;AAAA;AACF,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"chunk-24NUW3QN.js","sourcesContent":["import { Button } from \"../ui/button\";\nimport { LayoutGrid, Table2, List } from \"lucide-react\";\nimport { useUiMessages } from \"../../messages\";\n\nexport type ViewMode = \"grid\" | \"table\" | \"list\";\n\ninterface ViewToggleProps {\n  viewMode: ViewMode;\n  onViewModeChange: (mode: ViewMode) => void;\n}\n\nexport function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {\n  const m = useUiMessages();\n  // Each button is icon-only, so `aria-label` supplies the accessible name\n  // (`title` alone is not a reliable one) and `aria-pressed` reports which of\n  // the three is current — the `default`/`ghost` variant swap conveys that to\n  // sighted users only.\n  return (\n    <div\n      className=\"flex items-center border rounded-lg overflow-hidden\"\n      role=\"group\"\n      aria-label={m.view.mode}\n    >\n      <Button\n        variant={viewMode === \"grid\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"grid\")}\n        title={m.view.grid}\n        aria-label={m.view.grid}\n        aria-pressed={viewMode === \"grid\"}\n        testID=\"view-toggle-grid\"\n      >\n        <LayoutGrid className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n      <Button\n        variant={viewMode === \"table\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"table\")}\n        title={m.view.table}\n        aria-label={m.view.table}\n        aria-pressed={viewMode === \"table\"}\n        testID=\"view-toggle-table\"\n      >\n        <Table2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n      <Button\n        variant={viewMode === \"list\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"list\")}\n        title={m.view.list}\n        aria-label={m.view.list}\n        aria-pressed={viewMode === \"list\"}\n        testID=\"view-toggle-list\"\n      >\n        <List className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n}\n","import { useId } from \"react\";\nimport { Settings2 } from \"lucide-react\";\nimport { fillMessage, useUiMessages } from \"../../messages\";\nimport { Button } from \"../ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport type { Density } from \"../../hooks/use-view-settings\";\n\ninterface ViewSettingsProps {\n  pageSize: number;\n  onPageSizeChange: (size: number) => void;\n  density: Density;\n  onDensityChange: (density: Density) => void;\n}\n\nconst PAGE_SIZE_OPTIONS = [10, 25, 50, 100];\nconst DENSITY_OPTIONS: { value: Density; label: \"compact\" | \"comfortable\" | \"spacious\" }[] = [\n  { value: \"compact\", label: \"compact\" },\n  { value: \"comfortable\", label: \"comfortable\" },\n  { value: \"spacious\", label: \"spacious\" },\n];\n\nexport function ViewSettings({\n  pageSize,\n  onPageSizeChange,\n  density,\n  onDensityChange,\n}: ViewSettingsProps) {\n  const m = useUiMessages();\n  // Radix renders each `SelectTrigger` as a <button>, and a <label> cannot be\n  // associated with a button via `htmlFor`. `aria-labelledby` pointing at the\n  // visible label is the association that actually reaches assistive tech.\n  // `useId` keeps the ids unique when more than one ViewSettings is mounted.\n  const baseId = useId();\n  const pageSizeLabelId = `${baseId}-page-size`;\n  const densityLabelId = `${baseId}-density`;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-8 w-8\"\n          title={m.view.settings}\n          // Icon-only trigger: `title` is not a dependable accessible name.\n          aria-label={m.view.settings}\n          testID=\"view-settings-trigger\"\n        >\n          <Settings2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-56 space-y-4\">\n        <h4 className=\"text-sm font-semibold\">{m.view.settingsTitle}</h4>\n\n        <div className=\"space-y-2\">\n          <span\n            id={pageSizeLabelId}\n            className=\"block text-xs text-muted-foreground\"\n          >\n            {m.view.pageSize}\n          </span>\n          <Select\n            value={String(pageSize)}\n            onValueChange={(v) => onPageSizeChange(Number(v))}\n          >\n            <SelectTrigger\n              className=\"h-8 text-xs\"\n              aria-labelledby={pageSizeLabelId}\n              data-testid=\"view-settings-page-size\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent className=\"bg-popover z-50\">\n              {PAGE_SIZE_OPTIONS.map((n) => (\n                <SelectItem key={n} value={String(n)}>\n                  {fillMessage(m.view.pageSizeOption, { n })}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"space-y-2\">\n          <span\n            id={densityLabelId}\n            className=\"block text-xs text-muted-foreground\"\n          >\n            {m.view.density}\n          </span>\n          <Select\n            value={density}\n            onValueChange={(v) => onDensityChange(v as Density)}\n          >\n            <SelectTrigger\n              className=\"h-8 text-xs\"\n              aria-labelledby={densityLabelId}\n              data-testid=\"view-settings-density\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent className=\"bg-popover z-50\">\n              {DENSITY_OPTIONS.map((opt) => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {m.view[opt.label]}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

package/dist/{chunk-DTQHAZWN.js → chunk-3FKF2SN4.js}

@@ -1,5 +1,5 @@
 "use client";
-import { ViewToggle, ViewSettings } from './chunk-46TZGMFW.js';
+import { ViewToggle, ViewSettings } from './chunk-24NUW3QN.js';
 import { Collapsible, CollapsibleContent } from './chunk-B2GIBUQD.js';
 import { Badge } from './chunk-NPNADZHM.js';
 import { Tooltip } from './chunk-G5YKBPBF.js';
@@ -10,6 +10,7 @@ import { Switch } from './chunk-27ELYTGE.js';
 import { Label } from './chunk-F47U5KNW.js';
 import { cn } from './chunk-NZ5WBA4R.js';
 import { isPathActive, resolveNavigation, DefaultLink } from './chunk-J45FHL7D.js';
+import { useIsMobile } from './chunk-VFO3I7PV.js';
 import { createContext, useId, useState, useEffect, useMemo, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
 import { ListFilter, MoreHorizontal, SlidersHorizontal, Menu, ArrowLeft, X, Sun, Moon, PanelLeft, PanelLeftClose, ChevronRight, ChevronDown } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1416,7 +1417,7 @@ function AppShell({
   const subActive = contextualNavItems.some((i) => itemIsActive(i, activePath, isActive));
   const subNavOn = subNavMode === "tabs" || subNavMode === "sidebar";
   const leaves = (items) => items.filter((i) => !i.children || i.children.length === 0);
-  const contextualLeaves = subNavMode === "off" ? [] : leaves(contextualNavItems);
+  const contextualLeaves = subNavMode === "off" ? [] : leaves(contextualNavItems).filter((i) => !i.hideOnPhone);
   const subBottom = subNavOn && contextualLeaves.length > 0;
   const legacyBottom = !subNavOn && !mobileNavItems && contextualLeaves.length > 0;
   const backTarget = subBottom ? parentNavigation ?? derived?.backItem ?? (() => {
@@ -1454,6 +1455,8 @@ function AppShell({
   const showUser = hasUser && resolved.showUserSlot !== false;
   const showMobileBottom = bottomItems.length > 0 && resolved.showMobileBottomNav !== false;
   const showTabs = subNavMode === "tabs" && contextualNavItems.length > 0;
+  const isPhone = useIsMobile();
+  const endOnPhone = showTabs && showMobileBottom && isPhone && subNavChannel.hasEnd;
   const optionsControl = resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
@@ -1758,6 +1761,17 @@ function AppShell({
                         "data-testid": "app-shell-page-header"
                       }
                     ) : null,
+                    endOnPhone ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: subNavChannel.setEndSlot,
+                        className: cn(
+                          "flex min-w-0 flex-wrap items-center justify-end gap-2 px-4 sm:px-6",
+                          parentNavigation || hasPageHeader ? "pt-2 sm:pt-3" : "pt-4 sm:pt-6"
+                        ),
+                        "data-testid": "app-shell-sub-nav-end-phone"
+                      }
+                    ) : null,
                     showTabs ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -1775,7 +1789,7 @@ function AppShell({
                             isActive,
                             linkComponent,
                             label: subNavLabel ?? derived?.current.label ?? "Page sections",
-                            end: subNavChannel.hasEnd ? /* @__PURE__ */ jsx("div", { ref: subNavChannel.setEndSlot, className: "flex items-center" }) : void 0
+                            end: subNavChannel.hasEnd && !endOnPhone ? /* @__PURE__ */ jsx("div", { ref: subNavChannel.setEndSlot, className: "flex items-center" }) : void 0
                           }
                         )
                       }
@@ -1855,5 +1869,5 @@ function AppShell({
 }
 
 export { AppShell, AppShellPageHeader, AppShellSubNavEnd, PageHeader, SubNavTabs, useAppShellSubNav };
-//# sourceMappingURL=chunk-DTQHAZWN.js.map
-//# sourceMappingURL=chunk-DTQHAZWN.js.map
+//# sourceMappingURL=chunk-3FKF2SN4.js.map
+//# sourceMappingURL=chunk-3FKF2SN4.js.map