@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/data/runtime/RuntimeBarLayout.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const Icon = require("../Icon.cjs");
+const RuntimeBarActions = require("./RuntimeBarActions.cjs");
+const RuntimeBarIdentity = require("./RuntimeBarIdentity.cjs");
+const RuntimeBarSegment = require("./RuntimeBarSegment.cjs");
+const useRuntimeBarOverflow = require("./use-runtime-bar-overflow.cjs");
+const UiDotsVertical = require("../../icons/components/UiDotsVertical.cjs");
+function RuntimeBarLayout({
+  identity,
+  actions,
+  ariaLabel,
+  className
+}) {
+  var _a, _b, _c;
+  const { containerRef, measurementRef, visibleCount } = useRuntimeBarOverflow.useRuntimeBarOverflow();
+  const supplied = ((_a = actions.fields) == null ? void 0 : _a.filter((field) => field.isSet)) ?? [];
+  const hasMenu = Boolean(((_b = actions.fields) == null ? void 0 : _b.length) || ((_c = actions.menu) == null ? void 0 : _c.length));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: utils.cn("relative w-full min-w-0", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": ariaLabel,
+            "data-runtime-bar-variant": identity.variant,
+            className: utils.cn(
+              "inline-flex h-control-h max-w-full items-stretch",
+              identity.variant === "combo" ? "gap-1" : "overflow-hidden rounded-md border border-input bg-background"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RuntimeBarIdentity.RuntimeBarIdentity, { ...identity }),
+              /* @__PURE__ */ jsxRuntime.jsx(RuntimeBarActions.RuntimeBarActions, { ...actions, visibleCount })
+            ]
+          }
+        ),
+        hasMenu && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 overflow-hidden",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref: measurementRef,
+                className: utils.cn(
+                  "pointer-events-none invisible absolute left-0 top-0 flex w-max items-stretch",
+                  identity.variant === "combo" && "gap-1"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RuntimeBarIdentity.RuntimeBarIdentity, { ...identity, measure: true }),
+                  supplied.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: utils.cn(
+                        "flex h-control-h items-center gap-1.5 px-density-2",
+                        identity.variant === "combo" ? "rounded-md border border-input" : "border-l border-border"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(RuntimeBarSegment.RuntimeSegmentCaption, { children: field.caption })
+                    },
+                    field.id
+                  )),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: utils.cn(
+                        "flex h-control-h items-center px-density-2",
+                        identity.variant === "combo" ? "rounded-md border border-input" : "border-l border-border"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Icon.Icon,
+                        {
+                          icon: UiDotsVertical.UiDotsVertical,
+                          className: "size-4 shrink-0 text-muted-foreground"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+exports.RuntimeBarLayout = RuntimeBarLayout;
+//# sourceMappingURL=RuntimeBarLayout.cjs.map

package/dist/data/runtime/RuntimeBarLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarLayout.cjs","sources":["../../../src/data/runtime/RuntimeBarLayout.tsx"],"sourcesContent":["import { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport {\n  RuntimeBarActions,\n  type RuntimeBarActionsProps,\n} from \"./RuntimeBarActions\";\nimport {\n  RuntimeBarIdentity,\n  type RuntimeBarIdentityProps,\n} from \"./RuntimeBarIdentity\";\nimport { RuntimeSegmentCaption } from \"./RuntimeBarSegment\";\nimport { useRuntimeBarOverflow } from \"./use-runtime-bar-overflow\";\n\nexport function RuntimeBarLayout({\n  identity,\n  actions,\n  ariaLabel,\n  className,\n}: {\n  identity: RuntimeBarIdentityProps;\n  actions: RuntimeBarActionsProps;\n  ariaLabel: string;\n  className?: string | undefined;\n}) {\n  const { containerRef, measurementRef, visibleCount } =\n    useRuntimeBarOverflow();\n  const supplied = actions.fields?.filter((field) => field.isSet) ?? [];\n  const hasMenu = Boolean(actions.fields?.length || actions.menu?.length);\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full min-w-0\", className)}\n    >\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        data-runtime-bar-variant={identity.variant}\n        className={cn(\n          \"inline-flex h-control-h max-w-full items-stretch\",\n          identity.variant === \"combo\"\n            ? \"gap-1\"\n            : \"overflow-hidden rounded-md border border-input bg-background\",\n        )}\n      >\n        <RuntimeBarIdentity {...identity} />\n        <RuntimeBarActions {...actions} visibleCount={visibleCount} />\n      </div>\n      {hasMenu && (\n        <div\n          className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n          aria-hidden=\"true\"\n        >\n          <div\n            ref={measurementRef}\n            className={cn(\n              \"pointer-events-none invisible absolute left-0 top-0 flex w-max items-stretch\",\n              identity.variant === \"combo\" && \"gap-1\",\n            )}\n          >\n            <RuntimeBarIdentity {...identity} measure />\n            {supplied.map((field) => (\n              <div\n                key={field.id}\n                className={cn(\n                  \"flex h-control-h items-center gap-1.5 px-density-2\",\n                  identity.variant === \"combo\"\n                    ? \"rounded-md border border-input\"\n                    : \"border-l border-border\",\n                )}\n              >\n                <RuntimeSegmentCaption>{field.caption}</RuntimeSegmentCaption>\n              </div>\n            ))}\n            <div\n              className={cn(\n                \"flex h-control-h items-center px-density-2\",\n                identity.variant === \"combo\"\n                  ? \"rounded-md border border-input\"\n                  : \"border-l border-border\",\n              )}\n            >\n              <Icon\n                icon={UiDotsVertical}\n                className=\"size-4 shrink-0 text-muted-foreground\"\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useRuntimeBarOverflow","jsxs","cn","jsx","RuntimeBarIdentity","RuntimeBarActions","RuntimeSegmentCaption","Icon","UiDotsVertical"],"mappings":";;;;;;;;;;AAcO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;;AACD,QAAM,EAAE,cAAc,gBAAgB,aAAA,IACpCA,sBAAAA,sBAAA;AACF,QAAM,aAAW,aAAQ,WAAR,mBAAgB,OAAO,CAAC,UAAU,MAAM,WAAU,CAAA;AACnE,QAAM,UAAU,UAAQ,aAAQ,WAAR,mBAAgB,aAAU,aAAQ,SAAR,mBAAc,OAAM;AACtE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,2BAA2B,SAAS;AAAA,MAElD,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,4BAA0B,SAAS;AAAA,YACnC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA,SAAS,YAAY,UACjB,UACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAAC,2BAAAA,IAACC,mBAAAA,oBAAA,EAAoB,GAAG,UAAU;AAAA,cAClCD,2BAAAA,IAACE,kBAAAA,mBAAA,EAAmB,GAAG,SAAS,aAAA,CAA4B;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAE7D,WACCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,WAAWC,MAAAA;AAAAA,kBACT;AAAA,kBACA,SAAS,YAAY,WAAW;AAAA,gBAAA;AAAA,gBAGlC,UAAA;AAAA,kBAAAC,2BAAAA,IAACC,mBAAAA,oBAAA,EAAoB,GAAG,UAAU,SAAO,KAAA,CAAC;AAAA,kBACzC,SAAS,IAAI,CAAC,UACbD,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,WAAWD,MAAAA;AAAAA,wBACT;AAAA,wBACA,SAAS,YAAY,UACjB,mCACA;AAAA,sBAAA;AAAA,sBAGN,UAAAC,2BAAAA,IAACG,kBAAAA,uBAAA,EAAuB,UAAA,MAAM,QAAA,CAAQ;AAAA,oBAAA;AAAA,oBARjC,MAAM;AAAA,kBAAA,CAUd;AAAA,kBACDH,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWD,MAAAA;AAAAA,wBACT;AAAA,wBACA,SAAS,YAAY,UACjB,mCACA;AAAA,sBAAA;AAAA,sBAGN,UAAAC,2BAAAA;AAAAA,wBAACI,KAAAA;AAAAA,wBAAA;AAAA,0BACC,MAAMC,eAAAA;AAAAA,0BACN,WAAU;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACZ;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/runtime/RuntimeBarLayout.d.ts

@@ -0,0 +1,9 @@
+import { RuntimeBarActionsProps } from './RuntimeBarActions.js';
+import { RuntimeBarIdentityProps } from './RuntimeBarIdentity.js';
+export declare function RuntimeBarLayout({ identity, actions, ariaLabel, className, }: {
+    identity: RuntimeBarIdentityProps;
+    actions: RuntimeBarActionsProps;
+    ariaLabel: string;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RuntimeBarLayout.d.ts.map

package/dist/data/runtime/RuntimeBarLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarLayout.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,sBAAsB,CAAC;AAI9B,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,uBAAuB,CAAC;IAClC,OAAO,EAAE,sBAAsB,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,+BAoEA"}

package/dist/data/runtime/RuntimeBarLayout.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { RuntimeBarActions } from "./RuntimeBarActions.js";
+import { RuntimeBarIdentity } from "./RuntimeBarIdentity.js";
+import { RuntimeSegmentCaption } from "./RuntimeBarSegment.js";
+import { useRuntimeBarOverflow } from "./use-runtime-bar-overflow.js";
+import { UiDotsVertical } from "../../icons/components/UiDotsVertical.js";
+function RuntimeBarLayout({
+  identity,
+  actions,
+  ariaLabel,
+  className
+}) {
+  var _a, _b, _c;
+  const { containerRef, measurementRef, visibleCount } = useRuntimeBarOverflow();
+  const supplied = ((_a = actions.fields) == null ? void 0 : _a.filter((field) => field.isSet)) ?? [];
+  const hasMenu = Boolean(((_b = actions.fields) == null ? void 0 : _b.length) || ((_c = actions.menu) == null ? void 0 : _c.length));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full min-w-0", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": ariaLabel,
+            "data-runtime-bar-variant": identity.variant,
+            className: cn(
+              "inline-flex h-control-h max-w-full items-stretch",
+              identity.variant === "combo" ? "gap-1" : "overflow-hidden rounded-md border border-input bg-background"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(RuntimeBarIdentity, { ...identity }),
+              /* @__PURE__ */ jsx(RuntimeBarActions, { ...actions, visibleCount })
+            ]
+          }
+        ),
+        hasMenu && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 overflow-hidden",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: measurementRef,
+                className: cn(
+                  "pointer-events-none invisible absolute left-0 top-0 flex w-max items-stretch",
+                  identity.variant === "combo" && "gap-1"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(RuntimeBarIdentity, { ...identity, measure: true }),
+                  supplied.map((field) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex h-control-h items-center gap-1.5 px-density-2",
+                        identity.variant === "combo" ? "rounded-md border border-input" : "border-l border-border"
+                      ),
+                      children: /* @__PURE__ */ jsx(RuntimeSegmentCaption, { children: field.caption })
+                    },
+                    field.id
+                  )),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex h-control-h items-center px-density-2",
+                        identity.variant === "combo" ? "rounded-md border border-input" : "border-l border-border"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: UiDotsVertical,
+                          className: "size-4 shrink-0 text-muted-foreground"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RuntimeBarLayout
+};
+//# sourceMappingURL=RuntimeBarLayout.js.map

package/dist/data/runtime/RuntimeBarLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarLayout.js","sources":["../../../src/data/runtime/RuntimeBarLayout.tsx"],"sourcesContent":["import { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport {\n  RuntimeBarActions,\n  type RuntimeBarActionsProps,\n} from \"./RuntimeBarActions\";\nimport {\n  RuntimeBarIdentity,\n  type RuntimeBarIdentityProps,\n} from \"./RuntimeBarIdentity\";\nimport { RuntimeSegmentCaption } from \"./RuntimeBarSegment\";\nimport { useRuntimeBarOverflow } from \"./use-runtime-bar-overflow\";\n\nexport function RuntimeBarLayout({\n  identity,\n  actions,\n  ariaLabel,\n  className,\n}: {\n  identity: RuntimeBarIdentityProps;\n  actions: RuntimeBarActionsProps;\n  ariaLabel: string;\n  className?: string | undefined;\n}) {\n  const { containerRef, measurementRef, visibleCount } =\n    useRuntimeBarOverflow();\n  const supplied = actions.fields?.filter((field) => field.isSet) ?? [];\n  const hasMenu = Boolean(actions.fields?.length || actions.menu?.length);\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full min-w-0\", className)}\n    >\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        data-runtime-bar-variant={identity.variant}\n        className={cn(\n          \"inline-flex h-control-h max-w-full items-stretch\",\n          identity.variant === \"combo\"\n            ? \"gap-1\"\n            : \"overflow-hidden rounded-md border border-input bg-background\",\n        )}\n      >\n        <RuntimeBarIdentity {...identity} />\n        <RuntimeBarActions {...actions} visibleCount={visibleCount} />\n      </div>\n      {hasMenu && (\n        <div\n          className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n          aria-hidden=\"true\"\n        >\n          <div\n            ref={measurementRef}\n            className={cn(\n              \"pointer-events-none invisible absolute left-0 top-0 flex w-max items-stretch\",\n              identity.variant === \"combo\" && \"gap-1\",\n            )}\n          >\n            <RuntimeBarIdentity {...identity} measure />\n            {supplied.map((field) => (\n              <div\n                key={field.id}\n                className={cn(\n                  \"flex h-control-h items-center gap-1.5 px-density-2\",\n                  identity.variant === \"combo\"\n                    ? \"rounded-md border border-input\"\n                    : \"border-l border-border\",\n                )}\n              >\n                <RuntimeSegmentCaption>{field.caption}</RuntimeSegmentCaption>\n              </div>\n            ))}\n            <div\n              className={cn(\n                \"flex h-control-h items-center px-density-2\",\n                identity.variant === \"combo\"\n                  ? \"rounded-md border border-input\"\n                  : \"border-l border-border\",\n              )}\n            >\n              <Icon\n                icon={UiDotsVertical}\n                className=\"size-4 shrink-0 text-muted-foreground\"\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAcO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;;AACD,QAAM,EAAE,cAAc,gBAAgB,aAAA,IACpC,sBAAA;AACF,QAAM,aAAW,aAAQ,WAAR,mBAAgB,OAAO,CAAC,UAAU,MAAM,WAAU,CAAA;AACnE,QAAM,UAAU,UAAQ,aAAQ,WAAR,mBAAgB,aAAU,aAAQ,SAAR,mBAAc,OAAM;AACtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,MAElD,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,4BAA0B,SAAS;AAAA,YACnC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,YAAY,UACjB,UACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,oBAAC,oBAAA,EAAoB,GAAG,UAAU;AAAA,cAClC,oBAAC,mBAAA,EAAmB,GAAG,SAAS,aAAA,CAA4B;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAE7D,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,WAAW;AAAA,kBACT;AAAA,kBACA,SAAS,YAAY,WAAW;AAAA,gBAAA;AAAA,gBAGlC,UAAA;AAAA,kBAAA,oBAAC,oBAAA,EAAoB,GAAG,UAAU,SAAO,KAAA,CAAC;AAAA,kBACzC,SAAS,IAAI,CAAC,UACb;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,WAAW;AAAA,wBACT;AAAA,wBACA,SAAS,YAAY,UACjB,mCACA;AAAA,sBAAA;AAAA,sBAGN,UAAA,oBAAC,uBAAA,EAAuB,UAAA,MAAM,QAAA,CAAQ;AAAA,oBAAA;AAAA,oBARjC,MAAM;AAAA,kBAAA,CAUd;AAAA,kBACD;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW;AAAA,wBACT;AAAA,wBACA,SAAS,YAAY,UACjB,mCACA;AAAA,sBAAA;AAAA,sBAGN,UAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,MAAM;AAAA,0BACN,WAAU;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACZ;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/runtime/RuntimeBarSegment.cjs

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
 const Icon = require("../Icon.cjs");
-const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+const RuntimeBar_context = require("./RuntimeBar.context.cjs");
 const UiCheck = require("../../icons/components/UiCheck.cjs");
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
 const SEGMENT_CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
 const SEGMENT_KEY_CLASS = "text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground";
 function RuntimeSegment({
@@ -18,6 +20,7 @@ function RuntimeSegment({
   className,
   children
 }) {
+  const variant = react.useContext(RuntimeBar_context.RuntimeBarVariantContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenu.DropdownMenu,
     {
@@ -25,33 +28,40 @@ function RuntimeSegment({
       menuLabel,
       items,
       ...header ? { header } : {},
-      menuClassName: "min-w-56 max-w-80",
+      menuClassName: "max-h-[70vh] min-w-56 max-w-80 overflow-y-auto",
       className: utils.cn(
-        "min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
+        "h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full",
+        variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0",
         className
       ),
-      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           disabled,
           title,
           className: "inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted",
-          children: [
-            children,
-            !hideChevron && /* @__PURE__ */ jsxRuntime.jsx(
-              Icon.Icon,
-              {
-                icon: UiChevronDown.UiChevronDown,
-                className: "size-3 shrink-0 text-muted-foreground/70"
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsx(RuntimeSegmentCaption, { hideChevron, children })
         }
       )
     }
   );
 }
+function RuntimeSegmentCaption({
+  children,
+  hideChevron = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    !hideChevron && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        icon: UiChevronDown.UiChevronDown,
+        className: "size-3 shrink-0 text-muted-foreground/70"
+      }
+    )
+  ] });
+}
 function SegmentItemLabel({
   text,
   hint,
@@ -77,6 +87,7 @@ function SegmentItemLabel({
   ] });
 }
 exports.RuntimeSegment = RuntimeSegment;
+exports.RuntimeSegmentCaption = RuntimeSegmentCaption;
 exports.SEGMENT_CAPTION_CLASS = SEGMENT_CAPTION_CLASS;
 exports.SEGMENT_KEY_CLASS = SEGMENT_KEY_CLASS;
 exports.SegmentItemLabel = SegmentItemLabel;

package/dist/data/runtime/RuntimeBarSegment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.cjs","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\n\nexport const SEGMENT_CAPTION_CLASS = \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"min-w-56 max-w-80\"\n      className={cn(\n        \"min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          {children}\n          {!hideChevron && (\n            <Icon\n              icon={UiChevronDown}\n              className=\"size-3 shrink-0 text-muted-foreground/70\"\n            />\n          )}\n        </button>\n      }\n    />\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":["jsx","DropdownMenu","cn","jsxs","Icon","UiChevronDown","Fragment","UiCheck"],"mappings":";;;;;;;;AASO,MAAM,wBAAwB;AAC9B,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAET,UAAA;AAAA,YAAA;AAAA,YACA,CAAC,eACAH,2BAAAA;AAAAA,cAACI,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,cAAAA;AAAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIR;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACEF,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,IAAAH,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAAH,2BAAAA,IAAC,UAAK,WAAWE,SAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACPF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,0CACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEFA,2BAAAA;AAAAA,MAACI,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAMG,QAAAA;AAAAA,QACN,WAAWL,MAAAA;AAAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;;;"}
+{"version":3,"file":"RuntimeBarSegment.cjs","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const variant = useContext(RuntimeBarVariantContext);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":["useContext","RuntimeBarVariantContext","jsx","DropdownMenu","cn","jsxs","Fragment","Icon","UiChevronDown","UiCheck"],"mappings":";;;;;;;;;;AAUO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,QAAM,UAAUA,MAAAA,WAAWC,2CAAwB;AACnD,SACEC,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,UACR,iDACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF,SACEF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAAA,2BAAAA,IAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACEG,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACAJ,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAMC,cAAAA;AAAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACEH,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAAH,2BAAAA,IAAC,UAAK,WAAWE,SAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACPF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,0CACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEFA,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAME,QAAAA;AAAAA,QACN,WAAWL,MAAAA;AAAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;;;;"}

package/dist/data/runtime/RuntimeBarSegment.d.ts

@@ -13,6 +13,10 @@ export declare function RuntimeSegment({ items, menuLabel, title, header, disabl
     className?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
+export declare function RuntimeSegmentCaption({ children, hideChevron, }: {
+    children: ReactNode;
+    hideChevron?: boolean;
+}): import("react").JSX.Element;
 export declare function SegmentItemLabel({ text, hint, selected, stacked, }: {
     text: string;
     hint?: string | undefined;

package/dist/data/runtime/RuntimeBarSegment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,qBAAqB,mDAAmD,CAAC;AACtF,eAAO,MAAM,iBAAiB,yFAC0D,CAAC;AAOzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8BA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BA2BA"}
+{"version":3,"file":"RuntimeBarSegment.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAIpC,eAAO,MAAM,qBAAqB,mDACgB,CAAC;AACnD,eAAO,MAAM,iBAAiB,yFAC0D,CAAC;AAOzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8BA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAYA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BA2BA"}

package/dist/data/runtime/RuntimeBarSegment.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
 import { cn } from "../../lib/utils.js";
 import { DropdownMenu } from "../../overlay/DropdownMenu.js";
 import { Icon } from "../Icon.js";
-import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+import { RuntimeBarVariantContext } from "./RuntimeBar.context.js";
 import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
 const SEGMENT_CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
 const SEGMENT_KEY_CLASS = "text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground";
 function RuntimeSegment({
@@ -16,6 +18,7 @@ function RuntimeSegment({
   className,
   children
 }) {
+  const variant = useContext(RuntimeBarVariantContext);
   return /* @__PURE__ */ jsx(
     DropdownMenu,
     {
@@ -23,33 +26,40 @@ function RuntimeSegment({
       menuLabel,
       items,
       ...header ? { header } : {},
-      menuClassName: "min-w-56 max-w-80",
+      menuClassName: "max-h-[70vh] min-w-56 max-w-80 overflow-y-auto",
       className: cn(
-        "min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
+        "h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full",
+        variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0",
         className
       ),
-      trigger: /* @__PURE__ */ jsxs(
+      trigger: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           disabled,
           title,
           className: "inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted",
-          children: [
-            children,
-            !hideChevron && /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: UiChevronDown,
-                className: "size-3 shrink-0 text-muted-foreground/70"
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsx(RuntimeSegmentCaption, { hideChevron, children })
         }
       )
     }
   );
 }
+function RuntimeSegmentCaption({
+  children,
+  hideChevron = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    !hideChevron && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: UiChevronDown,
+        className: "size-3 shrink-0 text-muted-foreground/70"
+      }
+    )
+  ] });
+}
 function SegmentItemLabel({
   text,
   hint,
@@ -76,6 +86,7 @@ function SegmentItemLabel({
 }
 export {
   RuntimeSegment,
+  RuntimeSegmentCaption,
   SEGMENT_CAPTION_CLASS,
   SEGMENT_KEY_CLASS,
   SegmentItemLabel

package/dist/data/runtime/RuntimeBarSegment.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.js","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\n\nexport const SEGMENT_CAPTION_CLASS = \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"min-w-56 max-w-80\"\n      className={cn(\n        \"min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          {children}\n          {!hideChevron && (\n            <Icon\n              icon={UiChevronDown}\n              className=\"size-3 shrink-0 text-muted-foreground/70\"\n            />\n          )}\n        </button>\n      }\n    />\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AASO,MAAM,wBAAwB;AAC9B,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAET,UAAA;AAAA,YAAA;AAAA,YACA,CAAC,eACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIR;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACP,oBAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,+BACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"RuntimeBarSegment.js","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const variant = useContext(RuntimeBarVariantContext);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAUO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,QAAM,UAAU,WAAW,wBAAwB;AACnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,YAAY,UACR,iDACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAA,oBAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACP,oBAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,+BACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/data/runtime/RuntimeLimitInput.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const InputField = require("../../components/InputField.cjs");
+function RuntimeLimitInput({
+  inputLabel,
+  text,
+  placeholder,
+  parse,
+  current,
+  onChange
+}) {
+  const [draft, setDraft] = react.useState();
+  const shown = draft ?? text;
+  const invalid = shown.trim() !== "" && parse(shown) === void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputField.InputField,
+    {
+      value: shown,
+      "aria-label": inputLabel,
+      placeholder,
+      invalid,
+      onFocus: () => setDraft(text),
+      onBlur: () => setDraft(void 0),
+      onChange: (next) => {
+        setDraft(next);
+        if (next.trim() === "") {
+          if (current !== void 0) onChange(void 0);
+          return;
+        }
+        const parsed = parse(next);
+        if (parsed !== void 0) onChange(parsed);
+      },
+      inputClassName: "font-mono text-xs",
+      className: "bg-background"
+    }
+  );
+}
+exports.RuntimeLimitInput = RuntimeLimitInput;
+//# sourceMappingURL=RuntimeLimitInput.cjs.map

package/dist/data/runtime/RuntimeLimitInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeLimitInput.cjs","sources":["../../../src/data/runtime/RuntimeLimitInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { InputField } from \"../../components/InputField\";\n\nexport function RuntimeLimitInput<V extends string | number>({\n  inputLabel,\n  text,\n  placeholder,\n  parse,\n  current,\n  onChange,\n}: {\n  inputLabel: string;\n  text: string;\n  placeholder: string;\n  parse: (text: string) => V | undefined;\n  current: string | undefined;\n  onChange: (next: V | undefined) => void;\n}) {\n  const [draft, setDraft] = useState<string>();\n  const shown = draft ?? text;\n  const invalid = shown.trim() !== \"\" && parse(shown) === undefined;\n  return (\n    <InputField\n      value={shown}\n      aria-label={inputLabel}\n      placeholder={placeholder}\n      invalid={invalid}\n      onFocus={() => setDraft(text)}\n      onBlur={() => setDraft(undefined)}\n      onChange={(next) => {\n        setDraft(next);\n        if (next.trim() === \"\") {\n          if (current !== undefined) onChange(undefined);\n          return;\n        }\n        const parsed = parse(next);\n        if (parsed !== undefined) onChange(parsed);\n      }}\n      inputClassName=\"font-mono text-xs\"\n      className=\"bg-background\"\n    />\n  );\n}\n"],"names":["useState","jsx","InputField"],"mappings":";;;;;AAGO,SAAS,kBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAA;AAC1B,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,MAAM,KAAA,MAAW,MAAM,MAAM,KAAK,MAAM;AACxD,SACEC,2BAAAA;AAAAA,IAACC,WAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,IAAI;AAAA,MAC5B,QAAQ,MAAM,SAAS,MAAS;AAAA,MAChC,UAAU,CAAC,SAAS;AAClB,iBAAS,IAAI;AACb,YAAI,KAAK,KAAA,MAAW,IAAI;AACtB,cAAI,YAAY,OAAW,UAAS,MAAS;AAC7C;AAAA,QACF;AACA,cAAM,SAAS,MAAM,IAAI;AACzB,YAAI,WAAW,OAAW,UAAS,MAAM;AAAA,MAC3C;AAAA,MACA,gBAAe;AAAA,MACf,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;;"}

package/dist/data/runtime/RuntimeLimitInput.d.ts

@@ -0,0 +1,9 @@
+export declare function RuntimeLimitInput<V extends string | number>({ inputLabel, text, placeholder, parse, current, onChange, }: {
+    inputLabel: string;
+    text: string;
+    placeholder: string;
+    parse: (text: string) => V | undefined;
+    current: string | undefined;
+    onChange: (next: V | undefined) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RuntimeLimitInput.d.ts.map

package/dist/data/runtime/RuntimeLimitInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeLimitInput.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeLimitInput.tsx"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC3D,UAAU,EACV,IAAI,EACJ,WAAW,EACX,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CACzC,+BAyBA"}

package/dist/data/runtime/RuntimeLimitInput.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { InputField } from "../../components/InputField.js";
+function RuntimeLimitInput({
+  inputLabel,
+  text,
+  placeholder,
+  parse,
+  current,
+  onChange
+}) {
+  const [draft, setDraft] = useState();
+  const shown = draft ?? text;
+  const invalid = shown.trim() !== "" && parse(shown) === void 0;
+  return /* @__PURE__ */ jsx(
+    InputField,
+    {
+      value: shown,
+      "aria-label": inputLabel,
+      placeholder,
+      invalid,
+      onFocus: () => setDraft(text),
+      onBlur: () => setDraft(void 0),
+      onChange: (next) => {
+        setDraft(next);
+        if (next.trim() === "") {
+          if (current !== void 0) onChange(void 0);
+          return;
+        }
+        const parsed = parse(next);
+        if (parsed !== void 0) onChange(parsed);
+      },
+      inputClassName: "font-mono text-xs",
+      className: "bg-background"
+    }
+  );
+}
+export {
+  RuntimeLimitInput
+};
+//# sourceMappingURL=RuntimeLimitInput.js.map

package/dist/data/runtime/RuntimeLimitInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeLimitInput.js","sources":["../../../src/data/runtime/RuntimeLimitInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { InputField } from \"../../components/InputField\";\n\nexport function RuntimeLimitInput<V extends string | number>({\n  inputLabel,\n  text,\n  placeholder,\n  parse,\n  current,\n  onChange,\n}: {\n  inputLabel: string;\n  text: string;\n  placeholder: string;\n  parse: (text: string) => V | undefined;\n  current: string | undefined;\n  onChange: (next: V | undefined) => void;\n}) {\n  const [draft, setDraft] = useState<string>();\n  const shown = draft ?? text;\n  const invalid = shown.trim() !== \"\" && parse(shown) === undefined;\n  return (\n    <InputField\n      value={shown}\n      aria-label={inputLabel}\n      placeholder={placeholder}\n      invalid={invalid}\n      onFocus={() => setDraft(text)}\n      onBlur={() => setDraft(undefined)}\n      onChange={(next) => {\n        setDraft(next);\n        if (next.trim() === \"\") {\n          if (current !== undefined) onChange(undefined);\n          return;\n        }\n        const parsed = parse(next);\n        if (parsed !== undefined) onChange(parsed);\n      }}\n      inputClassName=\"font-mono text-xs\"\n      className=\"bg-background\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,kBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAC1B,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,MAAM,KAAA,MAAW,MAAM,MAAM,KAAK,MAAM;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,IAAI;AAAA,MAC5B,QAAQ,MAAM,SAAS,MAAS;AAAA,MAChC,UAAU,CAAC,SAAS;AAClB,iBAAS,IAAI;AACb,YAAI,KAAK,KAAA,MAAW,IAAI;AACtB,cAAI,YAAY,OAAW,UAAS,MAAS;AAC7C;AAAA,QACF;AACA,cAAM,SAAS,MAAM,IAAI;AACzB,YAAI,WAAW,OAAW,UAAS,MAAM;AAAA,MAC3C;AAAA,MACA,gBAAe;AAAA,MACf,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}