@12-apps/ui 5.0.1 → 5.2.0

package/dist/layout/SettingsLayout.js

@@ -1,34 +1,145 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
 import "../chunk-PZ5AY32C.js";
 
 // src/components/layout/SettingsLayout/SettingsLayout.tsx
-import { Box as Box2 } from "@mui/material";
+import { Box as Box6 } from "@mui/material";
 import { useMemo, useState } from "react";
 
-// src/components/layout/SettingsLayout/SettingsLayout.parts.tsx
+// src/components/layout/SettingsLayout/SettingsLayout.filters.ts
+function filterGroups(groups, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return groups;
+  const matches = (item) => item.label.toLowerCase().includes(needle) || (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle));
+  return groups.map((group) => ({ ...group, items: group.items.filter(matches) })).filter((group) => group.items.length > 0);
+}
+function activeItemLabel(groups, activeItemId) {
+  return groups.flatMap((group) => group.items).find((item) => item.id === activeItemId)?.label;
+}
+
+// src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import SearchIcon from "@mui/icons-material/Search";
+import { Box as Box3, Button, InputAdornment, TextField, Typography as Typography2 } from "@mui/material";
+
+// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
 import {
   alpha,
-  Box,
-  InputAdornment,
+  Box as Box2,
   List,
+  ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  TextField,
   Typography,
   useTheme
 } from "@mui/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/layout/SettingsLayout/SettingsLayout.styles.ts
 var RAIL_WIDTH = 300;
-function filterGroups(groups, query) {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return groups;
-  const matches = (item) => item.label.toLowerCase().includes(needle) || (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle));
-  return groups.map((group) => ({ ...group, items: group.items.filter(matches) })).filter((group) => group.items.length > 0);
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function atLeastRail(theme, breakpoint) {
+  return theme.breakpoints.up(breakpoint);
 }
-function activeItemLabel(groups, activeItemId) {
-  return groups.flatMap((group) => group.items).find((item) => item.id === activeItemId)?.label;
+function displayAcrossRail(theme, breakpoint, narrow, wide) {
+  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };
+}
+var TOUCH_TARGET = 44;
+var STATUS_COLOR = {
+  ok: "success.main",
+  off: "text.disabled",
+  new: "error.main"
+};
+
+// src/components/layout/SettingsLayout/SettingsStatusMarker.tsx
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsStatusMarker({
+  status,
+  label,
+  testId
+}) {
+  const hidden = label ? /* @__PURE__ */ jsx(Box, { component: "span", sx: SR_ONLY_SX, children: label }) : null;
+  if (status === "locked") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "span",
+        "data-testid": testId,
+        "data-status": status,
+        sx: { display: "inline-flex", alignItems: "center", color: "text.disabled" },
+        children: [
+          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 16 } }),
+          hidden
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      "data-testid": testId,
+      "data-status": status,
+      sx: { display: "inline-flex", alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              flex: "0 0 auto",
+              bgcolor: STATUS_COLOR[status]
+            }
+          }
+        ),
+        hidden
+      ]
+    }
+  );
+}
+SettingsStatusMarker.displayName = "SettingsStatusMarker";
+
+// src/components/layout/SettingsLayout/SettingsLayout.items.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RailItemContent({
+  item,
+  active,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx2(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
+    /* @__PURE__ */ jsx2(
+      ListItemText,
+      {
+        primary: item.label,
+        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
+      }
+    ),
+    item.status ? /* @__PURE__ */ jsx2(
+      SettingsStatusMarker,
+      {
+        status: item.status,
+        label: item.statusLabel,
+        testId: `${testIdPrefix}-status-${item.id}`
+      }
+    ) : null
+  ] });
 }
 function SettingsRailItem({
   item,
@@ -36,17 +147,19 @@ function SettingsRailItem({
   linkComponent,
   onSelectItem,
   onNavigate,
-  testIdPrefix
+  testIdPrefix,
+  variant,
+  breakpoint
 }) {
   const theme = useTheme();
+  const touchFloor = variant === "drilldown" ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: "auto" } } : null;
   const shared = {
-    selected: active,
-    "aria-current": active ? "page" : void 0,
     "data-testid": `${testIdPrefix}-item-${item.id}`,
     sx: {
       borderRadius: 1.5,
       mb: 0.25,
       gap: 1.5,
+      ...touchFloor,
       color: active ? "primary.main" : "text.secondary",
       "&.Mui-selected": {
         bgcolor: alpha(theme.palette.primary.main, 0.12),
@@ -54,42 +167,62 @@ function SettingsRailItem({
       }
     }
   };
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    item.icon ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
-    /* @__PURE__ */ jsx(
-      ListItemText,
-      {
-        primary: item.label,
-        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
-      }
-    )
-  ] });
+  const content = /* @__PURE__ */ jsx2(RailItemContent, { item, active, testIdPrefix });
+  if (item.inert) {
+    return /* @__PURE__ */ jsx2(ListItem, { ...shared, "data-inert": "true", children: content });
+  }
+  const interactive = {
+    ...shared,
+    selected: active,
+    "aria-current": active ? "page" : void 0
+  };
   if (item.href && linkComponent) {
     const LinkComponent = linkComponent;
-    return /* @__PURE__ */ jsx(ListItemButton, { component: LinkComponent, href: item.href, onClick: onNavigate, ...shared, children: content });
+    return /* @__PURE__ */ jsx2(
+      ListItemButton,
+      {
+        component: LinkComponent,
+        href: item.href,
+        onClick: onNavigate,
+        ...interactive,
+        children: content
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ListItemButton,
     {
       onClick: () => {
         onSelectItem?.(item.id);
         onNavigate?.();
       },
-      ...shared,
+      ...interactive,
       children: content
     }
   );
 }
+function indexListSx(shape) {
+  if (shape.variant !== "drilldown" || !shape.atIndex) return null;
+  return (theme) => ({
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    columnGap: 8,
+    [theme.breakpoints.up("sm")]: { gridTemplateColumns: "1fr 1fr" },
+    [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: "1fr" }
+  });
+}
 function SettingsRailGroup({
   group,
   activeItemId,
   linkComponent,
   onSelectItem,
   onNavigate,
-  testIdPrefix
+  testIdPrefix,
+  ...shape
 }) {
-  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
-    /* @__PURE__ */ jsx(
+  const grid = indexListSx(shape);
+  return /* @__PURE__ */ jsxs2(Box2, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsx2(
       Typography,
       {
         variant: "caption",
@@ -104,30 +237,42 @@ function SettingsRailGroup({
         children: group.label
       }
     ),
-    group.description ? /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
-    /* @__PURE__ */ jsx(List, { disablePadding: true, sx: { mt: 0.5 }, children: group.items.map((item) => /* @__PURE__ */ jsx(
-      SettingsRailItem,
+    group.description ? /* @__PURE__ */ jsx2(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
+    /* @__PURE__ */ jsx2(
+      List,
       {
-        item,
-        active: item.id === activeItemId,
-        linkComponent,
-        onSelectItem,
-        onNavigate,
-        testIdPrefix
-      },
-      item.id
-    )) })
+        disablePadding: true,
+        sx: (theme) => ({ mt: 0.5, ...grid ? grid(theme) : null }),
+        children: group.items.map((item) => /* @__PURE__ */ jsx2(
+          SettingsRailItem,
+          {
+            item,
+            active: item.id === activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate,
+            testIdPrefix,
+            ...shape
+          },
+          item.id
+        ))
+      }
+    )
   ] });
 }
+
+// src/components/layout/SettingsLayout/SettingsLayout.rail.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SettingsRailToggle({
   title,
   activeLabel,
   open,
   onToggle,
+  breakpoint,
   testIdPrefix
 }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ jsxs3(
+    Box3,
     {
       component: "button",
       type: "button",
@@ -135,12 +280,13 @@ function SettingsRailToggle({
       "aria-expanded": open,
       "aria-label": typeof title === "string" ? title : "Settings",
       "data-testid": `${testIdPrefix}-toggle`,
-      sx: {
-        display: { xs: "flex", md: "none" },
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
         alignItems: "center",
         justifyContent: "space-between",
         gap: 1,
         width: "100%",
+        minHeight: TOUCH_TARGET,
         px: 1.5,
         py: 1,
         mb: 1,
@@ -148,15 +294,15 @@ function SettingsRailToggle({
         cursor: "pointer",
         color: "text.primary",
         background: "transparent",
-        border: (theme) => `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${theme.palette.divider}`,
         borderRadius: 1.5
-      },
+      }),
       children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
-          title ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { display: "block", color: "text.secondary" }, children: title }) : null,
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: 600 }, children: activeLabel ?? "" })
+        /* @__PURE__ */ jsxs3(Box3, { sx: { minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsx3(Typography2, { variant: "caption", sx: { display: "block", color: "text.secondary" }, children: title }) : null,
+          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", noWrap: true, sx: { fontWeight: 600 }, children: activeLabel ?? "" })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           ExpandMoreIcon,
           {
             fontSize: "small",
@@ -164,7 +310,8 @@ function SettingsRailToggle({
               flex: "0 0 auto",
               color: "text.secondary",
               transition: "transform 150ms ease",
-              transform: open ? "rotate(180deg)" : "none"
+              transform: open ? "rotate(180deg)" : "none",
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
             }
           }
         )
@@ -172,26 +319,53 @@ function SettingsRailToggle({
     }
   );
 }
+function SettingsSearchEmpty({
+  label,
+  action,
+  onClear,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs3(Box3, { "data-testid": `${testIdPrefix}-empty`, sx: { px: 1, py: 2 }, children: [
+    /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "text.secondary", children: label }),
+    action ? /* @__PURE__ */ jsx3(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        onClick: () => {
+          onClear();
+          action.onClear?.();
+        },
+        "data-testid": `${testIdPrefix}-empty-action`,
+        sx: { mt: 1.5, minHeight: TOUCH_TARGET },
+        children: action.label
+      }
+    ) : null
+  ] });
+}
 function SettingsRailBody({
   navOpen,
   query,
   onQueryChange,
   searchPlaceholder,
   emptySearchLabel,
+  emptySearchAction,
   filteredGroups,
   activeItemId,
   linkComponent,
   onSelectItem,
   onNavigate,
-  testIdPrefix
+  testIdPrefix,
+  ...shape
 }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
+  const hidden = navOpen ? "block" : "none";
+  return /* @__PURE__ */ jsxs3(
+    Box3,
     {
       "data-testid": `${testIdPrefix}-rail-body`,
-      sx: { display: { xs: navOpen ? "block" : "none", md: "block" } },
+      sx: (theme) => shape.variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, shape.breakpoint, hidden, "block"),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           TextField,
           {
             value: query,
@@ -202,21 +376,20 @@ function SettingsRailBody({
             "aria-label": searchPlaceholder,
             "data-testid": `${testIdPrefix}-search`,
             InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary" } }) })
+              startAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx3(SearchIcon, { fontSize: "small", sx: { color: "text.secondary" } }) })
             },
             sx: { mb: 2 }
           }
         ),
-        filteredGroups.length === 0 ? /* @__PURE__ */ jsx(
-          Typography,
+        filteredGroups.length === 0 ? /* @__PURE__ */ jsx3(
+          SettingsSearchEmpty,
           {
-            variant: "body2",
-            color: "text.secondary",
-            "data-testid": `${testIdPrefix}-empty`,
-            sx: { px: 1, py: 2 },
-            children: emptySearchLabel
+            label: emptySearchLabel,
+            action: emptySearchAction,
+            onClear: () => onQueryChange(""),
+            testIdPrefix
           }
-        ) : filteredGroups.map((group) => /* @__PURE__ */ jsx(
+        ) : filteredGroups.map((group) => /* @__PURE__ */ jsx3(
           SettingsRailGroup,
           {
             group,
@@ -224,7 +397,8 @@ function SettingsRailBody({
             linkComponent,
             onSelectItem,
             onNavigate,
-            testIdPrefix
+            testIdPrefix,
+            ...shape
           },
           group.id
         ))
@@ -240,75 +414,333 @@ function SettingsRail({
   testIdPrefix,
   ...bodyProps
 }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
+  const { variant, breakpoint, atIndex } = bodyProps;
+  const hiddenWhileInSection = variant === "drilldown" && !atIndex;
+  return /* @__PURE__ */ jsxs3(
+    Box3,
     {
       component: "nav",
       "aria-label": typeof title === "string" ? title : "Settings",
       "data-testid": `${testIdPrefix}-rail`,
-      sx: {
-        flex: { xs: "0 0 auto", md: `0 0 ${RAIL_WIDTH}px` },
-        width: { xs: "100%", md: RAIL_WIDTH },
-        borderRight: { md: `1px solid ${theme.palette.divider}` },
-        pr: { md: 2 }
-      },
+      sx: (theme) => ({
+        display: hiddenWhileInSection ? "none" : "block",
+        flex: "0 0 auto",
+        width: "100%",
+        [atLeastRail(theme, breakpoint)]: {
+          display: "block",
+          flex: `0 0 ${RAIL_WIDTH}px`,
+          width: RAIL_WIDTH,
+          borderRight: `1px solid ${theme.palette.divider}`,
+          pr: 2
+        }
+      }),
       children: [
-        title ? /* @__PURE__ */ jsx(
-          Typography,
+        title ? /* @__PURE__ */ jsx3(
+          Typography2,
           {
             variant: "h6",
             "data-testid": `${testIdPrefix}-title`,
-            sx: { display: { xs: "none", md: "block" }, fontWeight: 700, mb: 1.5 },
+            sx: (theme) => ({
+              ...variant === "drilldown" ? { display: "block" } : displayAcrossRail(theme, breakpoint, "none", "block"),
+              fontWeight: 700,
+              mb: 1.5
+            }),
             children: title
           }
         ) : null,
-        /* @__PURE__ */ jsx(
+        variant === "switcher" ? /* @__PURE__ */ jsx3(
           SettingsRailToggle,
           {
             title,
             activeLabel,
             open: navOpen,
             onToggle: onToggleNav,
+            breakpoint,
             testIdPrefix
           }
-        ),
-        /* @__PURE__ */ jsx(SettingsRailBody, { navOpen, testIdPrefix, ...bodyProps })
+        ) : null,
+        /* @__PURE__ */ jsx3(SettingsRailBody, { navOpen, testIdPrefix, ...bodyProps })
       ]
     }
   );
 }
 
-// src/components/layout/SettingsLayout/SettingsLayout.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SettingsLayout = ({
-  title,
-  groups,
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { Box as Box5 } from "@mui/material";
+
+// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
+import { alpha as alpha2, Box as Box4, useTheme as useTheme2 } from "@mui/material";
+import { useEffect, useRef } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || !activeItemId) return;
+    const chip = Array.from(strip.children).find(
+      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
+    );
+    if (!chip) return;
+    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
+    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
+    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  }, [stripRef, activeItemId, itemsKey]);
+}
+function SectionChip({
+  item,
+  active,
+  theme,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const asLink = item.href !== void 0 && linkComponent !== void 0;
+  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
+  return /* @__PURE__ */ jsxs4(
+    Box4,
+    {
+      ...behaviour,
+      "data-chip-id": item.id,
+      "data-testid": `${testIdPrefix}-chip-${item.id}`,
+      "aria-current": active ? "page" : void 0,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        flex: "0 0 auto",
+        minHeight: TOUCH_TARGET,
+        px: 1.5,
+        borderRadius: 999,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        fontWeight: active ? 700 : 500,
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? alpha2(theme.palette.primary.main, 0.12) : "transparent",
+        border: `1px solid ${active ? alpha2(theme.palette.primary.main, 0.4) : theme.palette.divider}`
+      },
+      children: [
+        item.status ? /* @__PURE__ */ jsx4(
+          SettingsStatusMarker,
+          {
+            status: item.status,
+            label: item.statusLabel,
+            testId: `${testIdPrefix}-chip-status-${item.id}`
+          }
+        ) : null,
+        item.label
+      ]
+    }
+  );
+}
+function SettingsSectionChips({
+  items,
   activeItemId,
+  ariaLabel,
+  linkComponent,
   onSelectItem,
-  searchPlaceholder = "Search settings",
-  emptySearchLabel = "No settings match your search.",
+  testIdPrefix
+}) {
+  const theme = useTheme2();
+  const stripRef = useRef(null);
+  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
+  return /* @__PURE__ */ jsx4(
+    Box4,
+    {
+      ref: stripRef,
+      component: "nav",
+      "aria-label": ariaLabel,
+      "data-testid": `${testIdPrefix}-chips`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        px: 0.25,
+        py: 0.75,
+        overflowX: "auto",
+        overflowY: "hidden",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" }
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx4(
+        SectionChip,
+        {
+          item,
+          active: item.id === activeItemId,
+          theme,
+          linkComponent,
+          onSelectItem,
+          testIdPrefix
+        },
+        item.id
+      ))
+    }
+  );
+}
+SettingsSectionChips.displayName = "SettingsSectionChips";
+
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
   linkComponent,
-  children,
-  testIdPrefix = "settings"
-}) => {
-  const [query, setQuery] = useState("");
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      component: linkComponent,
+      href,
+      "aria-label": label,
+      "data-testid": `${testIdPrefix}-back`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
+        alignItems: "center",
+        gap: 0.5,
+        minHeight: TOUCH_TARGET,
+        pr: 1,
+        textDecoration: "none",
+        color: "text.secondary",
+        font: "inherit",
+        fontSize: "0.875rem"
+      }),
+      children: [
+        /* @__PURE__ */ jsx5(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: (theme) => ({
+        ...hideOnNarrow ? displayAcrossRail(theme, breakpoint, "none", "block") : { display: "block" },
+        flex: "1 1 auto",
+        minWidth: 0,
+        width: "100%"
+      }),
+      children: [
+        showBack ? /* @__PURE__ */ jsx5(
+          BackLink,
+          {
+            href: indexHref,
+            label: backLabel,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx5(
+          Box5,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx5(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULTS = {
+  searchPlaceholder: "Search settings",
+  defaultQuery: "",
+  emptySearchLabel: "No settings match your search.",
+  testIdPrefix: "settings",
+  railBreakpoint: "md",
+  navVariant: "switcher",
+  atIndex: false,
+  backLabel: "Back"
+};
+function shellSx(breakpoint) {
+  return (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 1.5,
+    width: "100%",
+    minWidth: 0,
+    [atLeastRail(theme, breakpoint ?? "md")]: { flexDirection: "row", gap: 3 }
+  });
+}
+var SettingsLayout = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    defaultQuery,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips
+  } = withDefaults(props, DEFAULTS);
+  const [query, setQuery] = useState(defaultQuery);
   const [navOpen, setNavOpen] = useState(false);
   const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
   const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
-  return /* @__PURE__ */ jsxs2(
-    Box2,
+  const drilldown = navVariant === "drilldown";
+  const ariaLabel = typeof title === "string" ? title : "Settings";
+  return /* @__PURE__ */ jsxs6(
+    Box6,
     {
       "data-testid": testIdPrefix,
-      sx: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        alignItems: "stretch",
-        gap: { xs: 1.5, md: 3 },
-        width: "100%"
-      },
+      "data-nav-variant": navVariant,
+      "data-at-index": atIndex ? "true" : "false",
+      sx: shellSx(railBreakpoint),
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx6(
           SettingsRail,
           {
             title,
@@ -319,21 +751,43 @@ var SettingsLayout = ({
             onQueryChange: setQuery,
             searchPlaceholder,
             emptySearchLabel,
+            emptySearchAction,
             filteredGroups,
             activeItemId,
             linkComponent,
             onSelectItem,
             onNavigate: () => setNavOpen(false),
-            testIdPrefix
+            testIdPrefix,
+            variant: navVariant,
+            breakpoint: railBreakpoint,
+            atIndex
           }
         ),
-        /* @__PURE__ */ jsx2(Box2, { "data-testid": `${testIdPrefix}-panel`, sx: { flex: "1 1 auto", minWidth: 0, width: "100%" }, children })
+        /* @__PURE__ */ jsx6(
+          SettingsPanel,
+          {
+            inSection: drilldown && !atIndex,
+            hideOnNarrow: drilldown && atIndex,
+            breakpoint: railBreakpoint,
+            indexHref,
+            backLabel,
+            ariaLabel,
+            sectionChips,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            testIdPrefix,
+            children
+          }
+        )
       ]
     }
   );
 };
 SettingsLayout.displayName = "SettingsLayout";
 export {
-  SettingsLayout
+  SettingsLayout,
+  SettingsSectionChips,
+  SettingsStatusMarker
 };
 //# sourceMappingURL=SettingsLayout.js.map