@fasl-work/caos-app-shell 0.14.0 → 0.14.2

package/dist/index.d.ts

@@ -250,6 +250,9 @@ interface CaseSelectorProps {
      * category structure is preserved either way; only the height changes.
      */
     layout?: 'chips' | 'select';
+    /** A control that sits on the select's row, after it (the workbench's Focus button, shell 0.14.1): the select shrinks to make
+     * room, so the selector is no taller with it. With `layout: 'chips'` it gets a row of its own, after the chips. */
+    accessory?: ReactNode;
 }
 /**
  * CaseSelector v2, the shared source + case picker. Renders (1) an optional first-level source

package/dist/index.js

@@ -740,6 +740,17 @@ function CaseSelector(props) {
   const visible = casesInSource(cases, source);
   const groups = groupByCategory(visible);
   const modified = cases.find((c) => c.id === modifiedFromId) ?? null;
+  const select = /* @__PURE__ */ jsx(
+    "select",
+    {
+      "data-control": "case",
+      className: "select cs-select",
+      "aria-label": ariaLabel ?? "Case selector",
+      value: selectedId,
+      onChange: (e) => onSelect(e.target.value),
+      children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: c.name }, c.id)) }, g.category || "_"))
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: `cs${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel ?? "Case selector", children: [
     source && lanes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "cs-source", children: [
       /* @__PURE__ */ jsx("span", { className: "cs-source-label", children: t2.source }),
@@ -757,17 +768,10 @@ function CaseSelector(props) {
       )) })
     ] }),
     source && source !== "synthetic" && /* @__PURE__ */ jsx("p", { className: "cs-locked banner", children: lockedNote ?? t2.lockedNote }),
-    layout === "select" && /* @__PURE__ */ jsx(
-      "select",
-      {
-        "data-control": "case",
-        className: "select cs-select",
-        "aria-label": ariaLabel ?? "Case selector",
-        value: selectedId,
-        onChange: (e) => onSelect(e.target.value),
-        children: groups.map((g) => /* @__PURE__ */ jsx("optgroup", { label: g.category || " ", children: g.cases.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, disabled: c.disabled, title: caseTooltip(c) || void 0, children: c.name }, c.id)) }, g.category || "_"))
-      }
-    ),
+    layout === "select" && (props.accessory ? /* @__PURE__ */ jsxs("div", { className: "cs-select-row", children: [
+      select,
+      props.accessory
+    ] }) : select),
     layout === "chips" && groups.map((g) => /* @__PURE__ */ jsxs("div", { className: "cs-group", role: "group", "aria-label": g.category || void 0, "data-control": "case", children: [
       g.category && /* @__PURE__ */ jsx("span", { className: "cs-group-label", children: g.category }),
       /* @__PURE__ */ jsx("div", { className: "cs-chips", children: g.cases.map((c) => {
@@ -793,6 +797,7 @@ function CaseSelector(props) {
         );
       }) })
     ] }, g.category || "_")),
+    layout === "chips" && props.accessory,
     modified && /* @__PURE__ */ jsxs("div", { className: "cs-modified", children: [
       /* @__PURE__ */ jsxs("span", { className: "badge accent", children: [
         t2.modifiedPrefix,
@@ -3329,10 +3334,6 @@ function CaseWorkbench(props) {
     );
   }
   const [openGroup, selectGroup] = useUrlView(tabs.map((t2) => t2.id), viewParamOf(deepLinkView), group, onGroupChange);
-  const pickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases }),
-    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
-  ] }) : null;
   const enter = focusCfg && /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3349,9 +3350,14 @@ function CaseWorkbench(props) {
       ]
     }
   );
+  const besideSelect = Boolean(cases && (cases.layout ?? "chips") === "select");
+  const pickers = cases || variants ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    cases && /* @__PURE__ */ jsx(CaseSelector, { lang, ...cases, accessory: besideSelect ? enter : cases.accessory }),
+    variants && /* @__PURE__ */ jsx(VariantBar, { ...variants })
+  ] }) : null;
   const railHead = pickers || enter ? /* @__PURE__ */ jsxs(Fragment, { children: [
     pickers,
-    enter
+    besideSelect ? null : enter
   ] }) : null;
   const instrumentData = {
     "data-case-workbench": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/reserved-classes.json

@@ -198,6 +198,7 @@
     "cs-modified",
     "cs-reset",
     "cs-select",
+    "cs-select-row",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",
@@ -506,6 +507,7 @@
     "cs-modified",
     "cs-reset",
     "cs-select",
+    "cs-select-row",
     "cs-source",
     "cs-source-label",
     "cs-source-tabs",

package/styles.css

@@ -508,6 +508,10 @@ svg.lucide { flex: none; }
 /* The compact one-of-N case picker (ADR-0071 rule 7): ten cases in four categories cost a 308px chip block, 21% of a
    2560x1440 viewport, and one row as a dropdown. */
 .cs-select { width: 100%; max-width: 460px; }
+/* the select and a control beside it (the workbench's Focus button): one row, the select shrinks, the control keeps its size */
+.cs-select-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.cs-select-row > .cs-select { flex: 1 1 auto; min-width: 0; }
+.cs-select-row > :not(.cs-select) { flex: none; }
 
 /* == 9 workbench ================================================================================================ */
 
@@ -750,6 +754,8 @@ svg.lucide { flex: none; }
 .caos-exec-badge { align-self: flex-start; padding: 0.1rem 0.5rem; font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-fg-subtle); }
 .caos-exec-cause { min-width: 0; overflow-wrap: anywhere; }
 .caos-exec-cause-head { display: flex; justify-content: space-between; gap: 1rem; }
+/* the cause's share stays whole: the row lets its label wrap anywhere, and the squeezed value broke into "3", "5", "%" at 390px */
+.caos-exec-cause-head > .caos-exec-value { flex: none; white-space: nowrap; overflow-wrap: normal; }
 .caos-exec-bar { height: 0.45rem; margin-top: 0.3rem; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
 .caos-exec-bar > span { display: block; height: 100%; background: var(--color-accent); }
 .caos-exec-cdef { font-size: var(--text-xs); line-height: 1.4; color: var(--color-fg-faint); }