@flanksource/clicky-ui 0.2.20 → 0.3.1

package/dist/data.js

@@ -36,6 +36,8 @@ import { mergeSeries, resolveBreakdown, resolveSeries } from "./data/TimeseriesP
 import { assignAxes, latestOf } from "./data/TimeseriesPanel.axes.js";
 import { TimeseriesGauge } from "./data/TimeseriesGauge.js";
 import { TimeseriesCoreBars } from "./data/TimeseriesCoreBars.js";
+import { WorkloadCard } from "./data/WorkloadCard.js";
+import { formatReplicaCounts, workloadKindLabel, workloadStatusLabel, workloadStatusTone } from "./data/WorkloadCard.model.js";
 import { deriveCoreBars } from "./data/TimeseriesCoreBars.model.js";
 import { StackedStatusBar, StatusRows } from "./data/StatusBreakdown.js";
 import { segment } from "./data/status-breakdown-utils.js";
@@ -903,6 +905,7 @@ export {
   UiZoomOut,
   UiZoomOutFilled,
   Version,
+  WorkloadCard,
   allGroupsTerminal,
   annotateRoutePaths,
   assignAxes,
@@ -934,6 +937,7 @@ export {
   formatDateTimeRelative,
   formatPropertyLabel,
   formatRelativeTime,
+  formatReplicaCounts,
   formatTestDuration,
   formatTimestamp,
   frameHasSource,
@@ -987,6 +991,9 @@ export {
   totalDuration,
   useTagActions,
   useTagActionsValue,
-  useTestRunner
+  useTestRunner,
+  workloadKindLabel,
+  workloadStatusLabel,
+  workloadStatusTone
 };
 //# sourceMappingURL=data.js.map

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/use-sort.cjs

@@ -8,21 +8,30 @@ function resolvePath(obj, path) {
   }, obj);
 }
 function useSort(items, options = {}) {
-  const { defaultKey, defaultDir = "asc", resolvers } = options;
-  const [sort, setSort] = react.useState(
+  const {
+    defaultKey,
+    defaultDir = "asc",
+    sort: controlledSort,
+    onSortChange,
+    manual = false,
+    resolvers
+  } = options;
+  const [localSort, setLocalSort] = react.useState(
     defaultKey ? { key: defaultKey, dir: defaultDir } : null
   );
+  const isControlled = controlledSort !== void 0;
+  const sort = isControlled ? controlledSort : localSort;
   function toggle(key) {
-    setSort((prev) => {
-      if ((prev == null ? void 0 : prev.key) === key) {
-        return prev.dir === "asc" ? { key, dir: "desc" } : null;
-      }
-      return { key, dir: "asc" };
-    });
+    const next = (sort == null ? void 0 : sort.key) === key ? sort.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" };
+    if (isControlled) {
+      onSortChange == null ? void 0 : onSortChange(next);
+    } else {
+      setLocalSort(next);
+    }
   }
   const sorted = react.useMemo(() => {
     if (!items) return [];
-    if (!sort) return items;
+    if (manual || !sort) return items;
     const { key, dir } = sort;
     const resolver = resolvers == null ? void 0 : resolvers[key];
     const get = (item) => resolver ? resolver(item) : resolvePath(item, key);
@@ -35,7 +44,7 @@ function useSort(items, options = {}) {
       const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
       return dir === "asc" ? cmp : -cmp;
     });
-  }, [items, sort, resolvers]);
+  }, [items, manual, sort, resolvers]);
   return { sorted, sort, toggle };
 }
 exports.useSort = useSort;

package/dist/hooks/use-sort.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-sort.cjs","sources":["../../src/hooks/use-sort.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nexport type SortDir = \"asc\" | \"desc\";\n\nexport type SortState = {\n  key: string;\n  dir: SortDir;\n};\n\nexport type UseSortOptions<T> = {\n  defaultKey?: string;\n  defaultDir?: SortDir;\n  resolvers?: Record<string, (item: T) => unknown>;\n};\n\nexport type UseSortReturn<T> = {\n  sorted: T[];\n  sort: SortState | null;\n  toggle: (key: string) => void;\n};\n\nfunction resolvePath(obj: unknown, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((o, k) => {\n    if (o && typeof o === \"object\") return (o as Record<string, unknown>)[k];\n    return undefined;\n  }, obj);\n}\n\nexport function useSort<T>(items: T[], options: UseSortOptions<T> = {}): UseSortReturn<T> {\n  const { defaultKey, defaultDir = \"asc\", resolvers } = options;\n\n  const [sort, setSort] = useState<SortState | null>(\n    defaultKey ? { key: defaultKey, dir: defaultDir } : null,\n  );\n\n  function toggle(key: string) {\n    setSort((prev) => {\n      if (prev?.key === key) {\n        return prev.dir === \"asc\" ? { key, dir: \"desc\" } : null;\n      }\n      return { key, dir: \"asc\" };\n    });\n  }\n\n  const sorted = useMemo(() => {\n    if (!items) return [];\n    if (!sort) return items;\n    const { key, dir } = sort;\n    const resolver = resolvers?.[key];\n    const get = (item: T) => (resolver ? resolver(item) : resolvePath(item, key));\n    return [...items].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      const cmp =\n        typeof av === \"number\" && typeof bv === \"number\"\n          ? av - bv\n          : String(av).localeCompare(String(bv));\n      return dir === \"asc\" ? cmp : -cmp;\n    });\n  }, [items, sort, resolvers]);\n\n  return { sorted, sort, toggle };\n}\n"],"names":["useState","useMemo"],"mappings":";;;AAqBA,SAAS,YAAY,KAAc,MAAuB;AACxD,SAAO,KAAK,MAAM,GAAG,EAAE,OAAgB,CAAC,GAAG,MAAM;AAC/C,QAAI,KAAK,OAAO,MAAM,SAAU,QAAQ,EAA8B,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,GAAG;AACR;AAEO,SAAS,QAAW,OAAY,UAA6B,IAAsB;AACxF,QAAM,EAAE,YAAY,aAAa,OAAO,cAAc;AAEtD,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA;AAAAA,IACtB,aAAa,EAAE,KAAK,YAAY,KAAK,eAAe;AAAA,EAAA;AAGtD,WAAS,OAAO,KAAa;AAC3B,YAAQ,CAAC,SAAS;AAChB,WAAI,6BAAM,SAAQ,KAAK;AACrB,eAAO,KAAK,QAAQ,QAAQ,EAAE,KAAK,KAAK,WAAW;AAAA,MACrD;AACA,aAAO,EAAE,KAAK,KAAK,MAAA;AAAA,IACrB,CAAC;AAAA,EACH;AAEA,QAAM,SAASC,MAAAA,QAAQ,MAAM;AAC3B,QAAI,CAAC,MAAO,QAAO,CAAA;AACnB,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,EAAE,KAAK,IAAA,IAAQ;AACrB,UAAM,WAAW,uCAAY;AAC7B,UAAM,MAAM,CAAC,SAAa,WAAW,SAAS,IAAI,IAAI,YAAY,MAAM,GAAG;AAC3E,WAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM;AAC/B,YAAM,KAAK,IAAI,CAAC;AAChB,YAAM,KAAK,IAAI,CAAC;AAChB,UAAI,MAAM,QAAQ,MAAM,KAAM,QAAO;AACrC,UAAI,MAAM,KAAM,QAAO;AACvB,UAAI,MAAM,KAAM,QAAO;AACvB,YAAM,MACJ,OAAO,OAAO,YAAY,OAAO,OAAO,WACpC,KAAK,KACL,OAAO,EAAE,EAAE,cAAc,OAAO,EAAE,CAAC;AACzC,aAAO,QAAQ,QAAQ,MAAM,CAAC;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,MAAM,SAAS,CAAC;AAE3B,SAAO,EAAE,QAAQ,MAAM,OAAA;AACzB;;"}
+{"version":3,"file":"use-sort.cjs","sources":["../../src/hooks/use-sort.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nexport type SortDir = \"asc\" | \"desc\";\n\nexport type SortState = {\n  key: string;\n  dir: SortDir;\n};\n\nexport type UseSortOptions<T> = {\n  defaultKey?: string;\n  defaultDir?: SortDir;\n  sort?: SortState | null;\n  onSortChange?: (sort: SortState | null) => void;\n  manual?: boolean;\n  resolvers?: Record<string, (item: T) => unknown>;\n};\n\nexport type UseSortReturn<T> = {\n  sorted: T[];\n  sort: SortState | null;\n  toggle: (key: string) => void;\n};\n\nfunction resolvePath(obj: unknown, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((o, k) => {\n    if (o && typeof o === \"object\") return (o as Record<string, unknown>)[k];\n    return undefined;\n  }, obj);\n}\n\nexport function useSort<T>(\n  items: T[],\n  options: UseSortOptions<T> = {},\n): UseSortReturn<T> {\n  const {\n    defaultKey,\n    defaultDir = \"asc\",\n    sort: controlledSort,\n    onSortChange,\n    manual = false,\n    resolvers,\n  } = options;\n\n  const [localSort, setLocalSort] = useState<SortState | null>(\n    defaultKey ? { key: defaultKey, dir: defaultDir } : null,\n  );\n  const isControlled = controlledSort !== undefined;\n  const sort = isControlled ? controlledSort : localSort;\n\n  function toggle(key: string) {\n    const next =\n      sort?.key === key\n        ? sort.dir === \"asc\"\n          ? { key, dir: \"desc\" as const }\n          : null\n        : { key, dir: \"asc\" as const };\n    if (isControlled) {\n      onSortChange?.(next);\n    } else {\n      setLocalSort(next);\n    }\n  }\n\n  const sorted = useMemo(() => {\n    if (!items) return [];\n    if (manual || !sort) return items;\n    const { key, dir } = sort;\n    const resolver = resolvers?.[key];\n    const get = (item: T) =>\n      resolver ? resolver(item) : resolvePath(item, key);\n    return [...items].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      const cmp =\n        typeof av === \"number\" && typeof bv === \"number\"\n          ? av - bv\n          : String(av).localeCompare(String(bv));\n      return dir === \"asc\" ? cmp : -cmp;\n    });\n  }, [items, manual, sort, resolvers]);\n\n  return { sorted, sort, toggle };\n}\n"],"names":["useState","useMemo"],"mappings":";;;AAwBA,SAAS,YAAY,KAAc,MAAuB;AACxD,SAAO,KAAK,MAAM,GAAG,EAAE,OAAgB,CAAC,GAAG,MAAM;AAC/C,QAAI,KAAK,OAAO,MAAM,SAAU,QAAQ,EAA8B,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,GAAG;AACR;AAEO,SAAS,QACd,OACA,UAA6B,IACX;AAClB,QAAM;AAAA,IACJ;AAAA,IACA,aAAa;AAAA,IACb,MAAM;AAAA,IACN;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EAAA,IACE;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA;AAAAA,IAChC,aAAa,EAAE,KAAK,YAAY,KAAK,eAAe;AAAA,EAAA;AAEtD,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,WAAS,OAAO,KAAa;AAC3B,UAAM,QACJ,6BAAM,SAAQ,MACV,KAAK,QAAQ,QACX,EAAE,KAAK,KAAK,WACZ,OACF,EAAE,KAAK,KAAK,MAAA;AAClB,QAAI,cAAc;AAChB,mDAAe;AAAA,IACjB,OAAO;AACL,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAASC,MAAAA,QAAQ,MAAM;AAC3B,QAAI,CAAC,MAAO,QAAO,CAAA;AACnB,QAAI,UAAU,CAAC,KAAM,QAAO;AAC5B,UAAM,EAAE,KAAK,IAAA,IAAQ;AACrB,UAAM,WAAW,uCAAY;AAC7B,UAAM,MAAM,CAAC,SACX,WAAW,SAAS,IAAI,IAAI,YAAY,MAAM,GAAG;AACnD,WAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM;AAC/B,YAAM,KAAK,IAAI,CAAC;AAChB,YAAM,KAAK,IAAI,CAAC;AAChB,UAAI,MAAM,QAAQ,MAAM,KAAM,QAAO;AACrC,UAAI,MAAM,KAAM,QAAO;AACvB,UAAI,MAAM,KAAM,QAAO;AACvB,YAAM,MACJ,OAAO,OAAO,YAAY,OAAO,OAAO,WACpC,KAAK,KACL,OAAO,EAAE,EAAE,cAAc,OAAO,EAAE,CAAC;AACzC,aAAO,QAAQ,QAAQ,MAAM,CAAC;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,QAAQ,MAAM,SAAS,CAAC;AAEnC,SAAO,EAAE,QAAQ,MAAM,OAAA;AACzB;;"}

package/dist/hooks/use-sort.d.ts

@@ -6,6 +6,9 @@ export type SortState = {
 export type UseSortOptions<T> = {
     defaultKey?: string;
     defaultDir?: SortDir;
+    sort?: SortState | null;
+    onSortChange?: (sort: SortState | null) => void;
+    manual?: boolean;
     resolvers?: Record<string, (item: T) => unknown>;
 };
 export type UseSortReturn<T> = {

package/dist/hooks/use-sort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sort.d.ts","sourceRoot":"","sources":["../../src/hooks/use-sort.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,OAAO,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AASF,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,OAAO,GAAE,cAAc,CAAC,CAAC,CAAM,GAAG,aAAa,CAAC,CAAC,CAAC,CAqCxF"}
+{"version":3,"file":"use-sort.d.ts","sourceRoot":"","sources":["../../src/hooks/use-sort.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,OAAO,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AASF,wBAAgB,OAAO,CAAC,CAAC,EACvB,KAAK,EAAE,CAAC,EAAE,EACV,OAAO,GAAE,cAAc,CAAC,CAAC,CAAM,GAC9B,aAAa,CAAC,CAAC,CAAC,CAoDlB"}

package/dist/hooks/use-sort.js

@@ -6,21 +6,30 @@ function resolvePath(obj, path) {
   }, obj);
 }
 function useSort(items, options = {}) {
-  const { defaultKey, defaultDir = "asc", resolvers } = options;
-  const [sort, setSort] = useState(
+  const {
+    defaultKey,
+    defaultDir = "asc",
+    sort: controlledSort,
+    onSortChange,
+    manual = false,
+    resolvers
+  } = options;
+  const [localSort, setLocalSort] = useState(
     defaultKey ? { key: defaultKey, dir: defaultDir } : null
   );
+  const isControlled = controlledSort !== void 0;
+  const sort = isControlled ? controlledSort : localSort;
   function toggle(key) {
-    setSort((prev) => {
-      if ((prev == null ? void 0 : prev.key) === key) {
-        return prev.dir === "asc" ? { key, dir: "desc" } : null;
-      }
-      return { key, dir: "asc" };
-    });
+    const next = (sort == null ? void 0 : sort.key) === key ? sort.dir === "asc" ? { key, dir: "desc" } : null : { key, dir: "asc" };
+    if (isControlled) {
+      onSortChange == null ? void 0 : onSortChange(next);
+    } else {
+      setLocalSort(next);
+    }
   }
   const sorted = useMemo(() => {
     if (!items) return [];
-    if (!sort) return items;
+    if (manual || !sort) return items;
     const { key, dir } = sort;
     const resolver = resolvers == null ? void 0 : resolvers[key];
     const get = (item) => resolver ? resolver(item) : resolvePath(item, key);
@@ -33,7 +42,7 @@ function useSort(items, options = {}) {
       const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
       return dir === "asc" ? cmp : -cmp;
     });
-  }, [items, sort, resolvers]);
+  }, [items, manual, sort, resolvers]);
   return { sorted, sort, toggle };
 }
 export {

package/dist/hooks/use-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sort.js","sources":["../../src/hooks/use-sort.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nexport type SortDir = \"asc\" | \"desc\";\n\nexport type SortState = {\n  key: string;\n  dir: SortDir;\n};\n\nexport type UseSortOptions<T> = {\n  defaultKey?: string;\n  defaultDir?: SortDir;\n  resolvers?: Record<string, (item: T) => unknown>;\n};\n\nexport type UseSortReturn<T> = {\n  sorted: T[];\n  sort: SortState | null;\n  toggle: (key: string) => void;\n};\n\nfunction resolvePath(obj: unknown, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((o, k) => {\n    if (o && typeof o === \"object\") return (o as Record<string, unknown>)[k];\n    return undefined;\n  }, obj);\n}\n\nexport function useSort<T>(items: T[], options: UseSortOptions<T> = {}): UseSortReturn<T> {\n  const { defaultKey, defaultDir = \"asc\", resolvers } = options;\n\n  const [sort, setSort] = useState<SortState | null>(\n    defaultKey ? { key: defaultKey, dir: defaultDir } : null,\n  );\n\n  function toggle(key: string) {\n    setSort((prev) => {\n      if (prev?.key === key) {\n        return prev.dir === \"asc\" ? { key, dir: \"desc\" } : null;\n      }\n      return { key, dir: \"asc\" };\n    });\n  }\n\n  const sorted = useMemo(() => {\n    if (!items) return [];\n    if (!sort) return items;\n    const { key, dir } = sort;\n    const resolver = resolvers?.[key];\n    const get = (item: T) => (resolver ? resolver(item) : resolvePath(item, key));\n    return [...items].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      const cmp =\n        typeof av === \"number\" && typeof bv === \"number\"\n          ? av - bv\n          : String(av).localeCompare(String(bv));\n      return dir === \"asc\" ? cmp : -cmp;\n    });\n  }, [items, sort, resolvers]);\n\n  return { sorted, sort, toggle };\n}\n"],"names":[],"mappings":";AAqBA,SAAS,YAAY,KAAc,MAAuB;AACxD,SAAO,KAAK,MAAM,GAAG,EAAE,OAAgB,CAAC,GAAG,MAAM;AAC/C,QAAI,KAAK,OAAO,MAAM,SAAU,QAAQ,EAA8B,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,GAAG;AACR;AAEO,SAAS,QAAW,OAAY,UAA6B,IAAsB;AACxF,QAAM,EAAE,YAAY,aAAa,OAAO,cAAc;AAEtD,QAAM,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,aAAa,EAAE,KAAK,YAAY,KAAK,eAAe;AAAA,EAAA;AAGtD,WAAS,OAAO,KAAa;AAC3B,YAAQ,CAAC,SAAS;AAChB,WAAI,6BAAM,SAAQ,KAAK;AACrB,eAAO,KAAK,QAAQ,QAAQ,EAAE,KAAK,KAAK,WAAW;AAAA,MACrD;AACA,aAAO,EAAE,KAAK,KAAK,MAAA;AAAA,IACrB,CAAC;AAAA,EACH;AAEA,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,CAAC,MAAO,QAAO,CAAA;AACnB,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,EAAE,KAAK,IAAA,IAAQ;AACrB,UAAM,WAAW,uCAAY;AAC7B,UAAM,MAAM,CAAC,SAAa,WAAW,SAAS,IAAI,IAAI,YAAY,MAAM,GAAG;AAC3E,WAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM;AAC/B,YAAM,KAAK,IAAI,CAAC;AAChB,YAAM,KAAK,IAAI,CAAC;AAChB,UAAI,MAAM,QAAQ,MAAM,KAAM,QAAO;AACrC,UAAI,MAAM,KAAM,QAAO;AACvB,UAAI,MAAM,KAAM,QAAO;AACvB,YAAM,MACJ,OAAO,OAAO,YAAY,OAAO,OAAO,WACpC,KAAK,KACL,OAAO,EAAE,EAAE,cAAc,OAAO,EAAE,CAAC;AACzC,aAAO,QAAQ,QAAQ,MAAM,CAAC;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,MAAM,SAAS,CAAC;AAE3B,SAAO,EAAE,QAAQ,MAAM,OAAA;AACzB;"}
+{"version":3,"file":"use-sort.js","sources":["../../src/hooks/use-sort.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nexport type SortDir = \"asc\" | \"desc\";\n\nexport type SortState = {\n  key: string;\n  dir: SortDir;\n};\n\nexport type UseSortOptions<T> = {\n  defaultKey?: string;\n  defaultDir?: SortDir;\n  sort?: SortState | null;\n  onSortChange?: (sort: SortState | null) => void;\n  manual?: boolean;\n  resolvers?: Record<string, (item: T) => unknown>;\n};\n\nexport type UseSortReturn<T> = {\n  sorted: T[];\n  sort: SortState | null;\n  toggle: (key: string) => void;\n};\n\nfunction resolvePath(obj: unknown, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((o, k) => {\n    if (o && typeof o === \"object\") return (o as Record<string, unknown>)[k];\n    return undefined;\n  }, obj);\n}\n\nexport function useSort<T>(\n  items: T[],\n  options: UseSortOptions<T> = {},\n): UseSortReturn<T> {\n  const {\n    defaultKey,\n    defaultDir = \"asc\",\n    sort: controlledSort,\n    onSortChange,\n    manual = false,\n    resolvers,\n  } = options;\n\n  const [localSort, setLocalSort] = useState<SortState | null>(\n    defaultKey ? { key: defaultKey, dir: defaultDir } : null,\n  );\n  const isControlled = controlledSort !== undefined;\n  const sort = isControlled ? controlledSort : localSort;\n\n  function toggle(key: string) {\n    const next =\n      sort?.key === key\n        ? sort.dir === \"asc\"\n          ? { key, dir: \"desc\" as const }\n          : null\n        : { key, dir: \"asc\" as const };\n    if (isControlled) {\n      onSortChange?.(next);\n    } else {\n      setLocalSort(next);\n    }\n  }\n\n  const sorted = useMemo(() => {\n    if (!items) return [];\n    if (manual || !sort) return items;\n    const { key, dir } = sort;\n    const resolver = resolvers?.[key];\n    const get = (item: T) =>\n      resolver ? resolver(item) : resolvePath(item, key);\n    return [...items].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      const cmp =\n        typeof av === \"number\" && typeof bv === \"number\"\n          ? av - bv\n          : String(av).localeCompare(String(bv));\n      return dir === \"asc\" ? cmp : -cmp;\n    });\n  }, [items, manual, sort, resolvers]);\n\n  return { sorted, sort, toggle };\n}\n"],"names":[],"mappings":";AAwBA,SAAS,YAAY,KAAc,MAAuB;AACxD,SAAO,KAAK,MAAM,GAAG,EAAE,OAAgB,CAAC,GAAG,MAAM;AAC/C,QAAI,KAAK,OAAO,MAAM,SAAU,QAAQ,EAA8B,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,GAAG;AACR;AAEO,SAAS,QACd,OACA,UAA6B,IACX;AAClB,QAAM;AAAA,IACJ;AAAA,IACA,aAAa;AAAA,IACb,MAAM;AAAA,IACN;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EAAA,IACE;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,aAAa,EAAE,KAAK,YAAY,KAAK,eAAe;AAAA,EAAA;AAEtD,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,WAAS,OAAO,KAAa;AAC3B,UAAM,QACJ,6BAAM,SAAQ,MACV,KAAK,QAAQ,QACX,EAAE,KAAK,KAAK,WACZ,OACF,EAAE,KAAK,KAAK,MAAA;AAClB,QAAI,cAAc;AAChB,mDAAe;AAAA,IACjB,OAAO;AACL,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,CAAC,MAAO,QAAO,CAAA;AACnB,QAAI,UAAU,CAAC,KAAM,QAAO;AAC5B,UAAM,EAAE,KAAK,IAAA,IAAQ;AACrB,UAAM,WAAW,uCAAY;AAC7B,UAAM,MAAM,CAAC,SACX,WAAW,SAAS,IAAI,IAAI,YAAY,MAAM,GAAG;AACnD,WAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM;AAC/B,YAAM,KAAK,IAAI,CAAC;AAChB,YAAM,KAAK,IAAI,CAAC;AAChB,UAAI,MAAM,QAAQ,MAAM,KAAM,QAAO;AACrC,UAAI,MAAM,KAAM,QAAO;AACvB,UAAI,MAAM,KAAM,QAAO;AACvB,YAAM,MACJ,OAAO,OAAO,YAAY,OAAO,OAAO,WACpC,KAAK,KACL,OAAO,EAAE,EAAE,cAAc,OAAO,EAAE,CAAC;AACzC,aAAO,QAAQ,QAAQ,MAAM,CAAC;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,QAAQ,MAAM,SAAS,CAAC;AAEnC,SAAO,EAAE,QAAQ,MAAM,OAAA;AACzB;"}

package/dist/index.cjs

@@ -44,6 +44,8 @@ const JsonSchemaForm = require("./components/JsonSchemaForm.cjs");
 const jsonSchemaFormSize = require("./components/json-schema-form-size.cjs");
 const jsonSchemaFormPreferences = require("./components/json-schema-form-preferences.cjs");
 const jsonSchemaFormResolve = require("./components/json-schema-form-resolve.cjs");
+const jsonSchemaFormRefs = require("./components/json-schema-form-refs.cjs");
+const jsonSchemaFormTemplate = require("./components/json-schema-form-template.cjs");
 const SplitPane = require("./layout/SplitPane.cjs");
 const AppShell = require("./layout/AppShell.cjs");
 const AppSidebar = require("./layout/AppSidebar.cjs");
@@ -94,6 +96,8 @@ const TimeseriesPanel_model = require("./data/TimeseriesPanel.model.cjs");
 const TimeseriesPanel_axes = require("./data/TimeseriesPanel.axes.cjs");
 const TimeseriesGauge = require("./data/TimeseriesGauge.cjs");
 const TimeseriesCoreBars = require("./data/TimeseriesCoreBars.cjs");
+const WorkloadCard = require("./data/WorkloadCard.cjs");
+const WorkloadCard_model = require("./data/WorkloadCard.model.cjs");
 const TimeseriesCoreBars_model = require("./data/TimeseriesCoreBars.model.cjs");
 const StatusBreakdown = require("./data/StatusBreakdown.cjs");
 const statusBreakdownUtils = require("./data/status-breakdown-utils.cjs");
@@ -489,6 +493,8 @@ exports.effectiveProperties = jsonSchemaFormResolve.effectiveProperties;
 exports.isOpenStringMap = jsonSchemaFormResolve.isOpenStringMap;
 exports.matchesIf = jsonSchemaFormResolve.matchesIf;
 exports.resolveControl = jsonSchemaFormResolve.resolveControl;
+exports.rehydrateRefs = jsonSchemaFormRefs.rehydrateRefs;
+exports.templateValuePre = jsonSchemaFormTemplate.templateValuePre;
 exports.SplitPane = SplitPane.SplitPane;
 exports.AppShell = AppShell.AppShell;
 exports.AppLayout = AppSidebar.AppLayout;
@@ -559,6 +565,11 @@ exports.assignAxes = TimeseriesPanel_axes.assignAxes;
 exports.latestOf = TimeseriesPanel_axes.latestOf;
 exports.TimeseriesGauge = TimeseriesGauge.TimeseriesGauge;
 exports.TimeseriesCoreBars = TimeseriesCoreBars.TimeseriesCoreBars;
+exports.WorkloadCard = WorkloadCard.WorkloadCard;
+exports.formatReplicaCounts = WorkloadCard_model.formatReplicaCounts;
+exports.workloadKindLabel = WorkloadCard_model.workloadKindLabel;
+exports.workloadStatusLabel = WorkloadCard_model.workloadStatusLabel;
+exports.workloadStatusTone = WorkloadCard_model.workloadStatusTone;
 exports.deriveCoreBars = TimeseriesCoreBars_model.deriveCoreBars;
 exports.StackedStatusBar = StatusBreakdown.StackedStatusBar;
 exports.StatusRows = StatusBreakdown.StatusRows;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -42,6 +42,8 @@ import { JsonSchemaForm } from "./components/JsonSchemaForm.js";
 import { DEFAULT_FORM_SIZE } from "./components/json-schema-form-size.js";
 import { DEFAULT_PREFERENCES_STORAGE_KEY, readPreferences, writePreferences } from "./components/json-schema-form-preferences.js";
 import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from "./components/json-schema-form-resolve.js";
+import { rehydrateRefs } from "./components/json-schema-form-refs.js";
+import { templateValuePre } from "./components/json-schema-form-template.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { AppShell } from "./layout/AppShell.js";
 import { AppLayout, AppSidebar } from "./layout/AppSidebar.js";
@@ -92,6 +94,8 @@ import { mergeSeries, resolveBreakdown, resolveSeries } from "./data/TimeseriesP
 import { assignAxes, latestOf } from "./data/TimeseriesPanel.axes.js";
 import { TimeseriesGauge } from "./data/TimeseriesGauge.js";
 import { TimeseriesCoreBars } from "./data/TimeseriesCoreBars.js";
+import { WorkloadCard } from "./data/WorkloadCard.js";
+import { formatReplicaCounts, workloadKindLabel, workloadStatusLabel, workloadStatusTone } from "./data/WorkloadCard.model.js";
 import { deriveCoreBars } from "./data/TimeseriesCoreBars.model.js";
 import { StackedStatusBar, StatusRows } from "./data/StatusBreakdown.js";
 import { segment } from "./data/status-breakdown-utils.js";
@@ -1045,6 +1049,7 @@ export {
   UiZoomOutFilled,
   VIEW_OPTIONS,
   Version,
+  WorkloadCard,
   WorkloadPicker,
   allGroupsTerminal,
   annotateRoutePaths,
@@ -1091,6 +1096,7 @@ export {
   formatDuration,
   formatPropertyLabel,
   formatRelativeTime,
+  formatReplicaCounts,
   formatShort,
   formatTestDuration,
   formatTimestamp,
@@ -1140,6 +1146,7 @@ export {
   processStateColor,
   processStateIcon,
   readPreferences,
+  rehydrateRefs,
   resolveBreakdown,
   resolveControl,
   resolveSeries,
@@ -1159,6 +1166,7 @@ export {
   taskStatusBg,
   taskStatusColor,
   taskStatusIcon,
+  templateValuePre,
   testStatus,
   totalDuration,
   useBrowserRouter,
@@ -1184,6 +1192,9 @@ export {
   useToast,
   withBasePath,
   workloadKey,
+  workloadKindLabel,
+  workloadStatusLabel,
+  workloadStatusTone,
   writePreferences
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/layout/AppShell.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const router = require("../rpc/router.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
 const SplitPane = require("./SplitPane.cjs");
 const UiSidebar = require("../icons/components/UiSidebar.cjs");
 const UiMenu = require("../icons/components/UiMenu.cjs");
@@ -19,6 +20,7 @@ function AppShell(props) {
     nav,
     search,
     actions,
+    mobileActions,
     toolbar,
     searchMaxWidth = "28rem",
     navSections,
@@ -52,16 +54,10 @@ function AppShell(props) {
     if (collapsedStorageKey && typeof window !== "undefined")
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
-  react.useEffect(() => {
-    if (!mobileSidebarOpen) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setMobileSidebarOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [mobileSidebarOpen]);
+  modalStack.useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));
   const railWidth = collapsed ? collapsedWidth : sidebarWidth;
-  const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || toolbar !== void 0;
+  const compactActions = mobileActions ?? actions;
+  const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || mobileActions !== void 0 || toolbar !== void 0;
   const hasMobileHeader = hasSidebar;
   const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
   const renderSidebarContent = (collapsedValue, onNavigate) => typeof sidebar === "function" ? sidebar(collapsedValue) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsxRuntime.jsx(
@@ -126,7 +122,7 @@ function AppShell(props) {
             }
           ),
           brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-density-2", children: brand }),
-          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center gap-density-2", children: actions }),
+          compactActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex min-w-0 shrink items-center justify-end gap-density-2", children: compactActions }),
           search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0", children: search }),
           nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0 overflow-x-auto", children: nav })
         ] }),

package/dist/layout/AppShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.cjs","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useRouter } from \"../rpc/router\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { SplitPane } from \"./SplitPane\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEffect(() => {\n    if (!mobileSidebarOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setMobileSidebarOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [mobileSidebarOpen]);\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {(hasTopBar || hasMobileHeader) && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {actions && (\n                  <div className=\"ml-auto flex shrink-0 items-center gap-density-2\">\n                    {actions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {brand}\n                </div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            className={cn(\n              \"flex shrink-0 flex-col items-stretch gap-density-2 border-b border-border bg-card px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 flex-wrap items-center gap-density-2\">\n                {bodyActions}\n              </div>\n            )}\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\">\n                {bodySidebar}\n              </div>\n              <main\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={bodySidebar}\n              right={\n                <div className={cn(\"h-full min-w-0\", contentClassName)}>\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const inner = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {inner}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children: inner,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return (\n    <div onClick={onNavigate}>\n      {link}\n    </div>\n  );\n}\n"],"names":["useState","useEffect","jsx","cn","jsxs","Icon","UiSidebar","UiMenu","Fragment","SplitPane","UiClose","useRouter"],"mappings":"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"}
+{"version":3,"file":"AppShell.cjs","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useRouter } from \"../rpc/router\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {(hasTopBar || hasMobileHeader) && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {brand}\n                </div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            className={cn(\n              \"flex shrink-0 flex-col items-stretch gap-density-2 border-b border-border bg-card px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 flex-wrap items-center gap-density-2\">\n                {bodyActions}\n              </div>\n            )}\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\">\n                {bodySidebar}\n              </div>\n              <main\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={bodySidebar}\n              right={\n                <div className={cn(\"h-full min-w-0\", contentClassName)}>\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            {children}\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const inner = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {inner}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children: inner,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return (\n    <div onClick={onNavigate}>\n      {link}\n    </div>\n  );\n}\n"],"names":["useState","useEffect","useEscapeLayer","jsx","cn","jsxs","Icon","UiSidebar","UiMenu","Fragment","SplitPane","UiClose","useRouter"],"mappings":"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"}

package/dist/layout/AppShell.d.ts

@@ -30,6 +30,8 @@ export type AppShellProps = {
     search?: ReactNode;
     /** Right-aligned cluster (icon buttons, settings/org picker, …). */
     actions?: ReactNode;
+    /** Compact action cluster used in the mobile header. Defaults to `actions`. */
+    mobileActions?: ReactNode;
     /** Optional second top-bar row for filters / bulk actions. */
     toolbar?: ReactNode;
     /** Max width of the centered search slot. Defaults to 28rem. */

package/dist/layout/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAc9D,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAE1B,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGjC,wEAAwE;IACxE,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;IAC1D,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAG5B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAOF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAgT5C"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAe9D,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAE1B,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGjC,wEAAwE;IACxE,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;IAC1D,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAG5B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAOF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA4S5C"}

package/dist/layout/AppShell.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { useRouter } from "../rpc/router.js";
+import { useEscapeLayer } from "../overlay/modalStack.js";
 import { SplitPane } from "./SplitPane.js";
 import { UiSidebar } from "../icons/components/UiSidebar.js";
 import { UiMenu } from "../icons/components/UiMenu.js";
@@ -17,6 +18,7 @@ function AppShell(props) {
     nav,
     search,
     actions,
+    mobileActions,
     toolbar,
     searchMaxWidth = "28rem",
     navSections,
@@ -50,16 +52,10 @@ function AppShell(props) {
     if (collapsedStorageKey && typeof window !== "undefined")
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
-  useEffect(() => {
-    if (!mobileSidebarOpen) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setMobileSidebarOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [mobileSidebarOpen]);
+  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));
   const railWidth = collapsed ? collapsedWidth : sidebarWidth;
-  const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || toolbar !== void 0;
+  const compactActions = mobileActions ?? actions;
+  const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || mobileActions !== void 0 || toolbar !== void 0;
   const hasMobileHeader = hasSidebar;
   const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
   const renderSidebarContent = (collapsedValue, onNavigate) => typeof sidebar === "function" ? sidebar(collapsedValue) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsx(
@@ -124,7 +120,7 @@ function AppShell(props) {
             }
           ),
           brand && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-density-2", children: brand }),
-          actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-density-2", children: actions }),
+          compactActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex min-w-0 shrink items-center justify-end gap-density-2", children: compactActions }),
           search !== void 0 && /* @__PURE__ */ jsx("div", { className: "basis-full min-w-0", children: search }),
           nav && /* @__PURE__ */ jsx("div", { className: "basis-full min-w-0 overflow-x-auto", children: nav })
         ] }),