@flanksource/clicky-ui 0.3.41 → 0.3.43

package/dist/data/runtime/RuntimeBarIdentity.cjs

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Combobox = require("../../components/Combobox.cjs");
+const utils = require("../../lib/utils.cjs");
+const Icon = require("../Icon.cjs");
+const RuntimeBar_model = require("./RuntimeBar.model.cjs");
+const RuntimeBarSegment = require("./RuntimeBarSegment.cjs");
+const unspecified = require("./unspecified.cjs");
+function RuntimeBarIdentity({
+  measure = false,
+  ...props
+}) {
+  const modeCaption = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    props.mode.icon && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        icon: props.mode.icon,
+        className: "size-4 shrink-0 text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: RuntimeBarSegment.SEGMENT_CAPTION_CLASS, children: props.mode.label })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-runtime-bar-section": measure ? void 0 : "identity",
+      className: utils.cn(
+        "flex h-control-h min-w-0 items-stretch",
+        props.variant === "combo" && "gap-1"
+      ),
+      children: [
+        measure ? /* @__PURE__ */ jsxRuntime.jsx(IdentityMeasure, { variant: props.variant, children: modeCaption }) : /* @__PURE__ */ jsxRuntime.jsx(
+          RuntimeBarSegment.RuntimeSegment,
+          {
+            menuLabel: "Runtime mode",
+            title: `Runtime mode — ${props.mode.label}`,
+            disabled: props.locked,
+            className: "shrink-0",
+            items: props.modes.map((mode) => ({
+              label: mode.label,
+              ...mode.icon ? { icon: mode.icon } : {},
+              onSelect: () => props.onModeChange(mode.id)
+            })),
+            children: modeCaption
+          }
+        ),
+        measure ? /* @__PURE__ */ jsxRuntime.jsx(IdentityMeasure, { variant: props.variant, model: true, children: /* @__PURE__ */ jsxRuntime.jsx(ModelCaption, { ...props }) }) : /* @__PURE__ */ jsxRuntime.jsx(RuntimeModelPicker, { ...props })
+      ]
+    }
+  );
+}
+function IdentityMeasure({
+  variant,
+  model = false,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "flex h-control-h items-center gap-1.5 px-density-2",
+        model && "max-w-56 min-w-0",
+        variant === "combo" ? "rounded-md border border-input" : "border-l border-border first:border-l-0"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(RuntimeBarSegment.RuntimeSegmentCaption, { children })
+    }
+  );
+}
+function ModelCaption(props) {
+  var _a;
+  const brand = RuntimeBar_model.runtimeFamilyBrand(props.family);
+  const label = props.showModel ? props.unavailable ? "Unavailable selection" : ((_a = props.selectedModel) == null ? void 0 : _a.label) ?? props.model ?? unspecified.UNSPECIFIED_LABEL : props.family.label;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    props.showModel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+      props.family.label,
+      " "
+    ] }),
+    brand.icon && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        icon: brand.icon,
+        className: utils.cn("size-4 shrink-0", brand.color)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate font-mono text-xs font-semibold text-foreground", children: label })
+  ] });
+}
+function RuntimeModelPicker(props) {
+  var _a;
+  const title = props.showModel ? `Model — ${props.unavailable ? "unavailable selection" : props.model || "unspecified"}` : `Family — ${props.family.label}`;
+  if (!props.showModel)
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RuntimeBarSegment.RuntimeSegment,
+      {
+        menuLabel: "Family",
+        title,
+        disabled: props.locked,
+        className: "min-w-0 max-w-56 flex-1",
+        items: props.groups.map(({ family }) => {
+          const brand = RuntimeBar_model.runtimeFamilyBrand(family);
+          return {
+            label: family.label,
+            ...brand.icon ? { icon: brand.icon } : {},
+            onSelect: () => props.onFamilySelect(family.id)
+          };
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ModelCaption, { ...props })
+      }
+    );
+  const options = [
+    {
+      value: "",
+      label: unspecified.UNSPECIFIED_LABEL,
+      description: unspecified.unspecifiedHint(props.inheritedModelLabel)
+    },
+    ...props.groups.flatMap(({ family, models }) => {
+      const brand = RuntimeBar_model.runtimeFamilyBrand(family);
+      const icon = brand.icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: brand.icon, className: utils.cn("size-4", brand.color) }) : void 0;
+      return models.length ? models.map((model) => ({
+        value: model.id,
+        label: model.label.trim() || model.id,
+        group: family.label,
+        icon
+      })) : [
+        {
+          value: `family:${family.id}`,
+          label: "Custom model…",
+          group: family.label,
+          icon
+        }
+      ];
+    })
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox,
+    {
+      searchPlacement: "menu",
+      ariaLabel: "Model",
+      title,
+      disabled: props.locked,
+      value: props.unavailable ? "" : ((_a = props.selectedModel) == null ? void 0 : _a.id) ?? props.model ?? "",
+      options,
+      className: utils.cn(
+        "h-control-h min-w-0 max-w-56 flex-1",
+        props.variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0"
+      ),
+      triggerClassName: "h-full rounded-none border-0 px-density-2 focus-visible:ring-inset aria-expanded:bg-muted",
+      triggerContent: /* @__PURE__ */ jsxRuntime.jsx(ModelCaption, { ...props }),
+      onNew: (value) => ({ value, label: `Use custom: ${value}` }),
+      onChange: (value) => {
+        var _a2;
+        if (!value) return props.onModelClear();
+        const family = (_a2 = props.groups.find(
+          ({ family: family2 }) => value === `family:${family2.id}`
+        )) == null ? void 0 : _a2.family;
+        if (family) return props.onFamilySelect(family.id);
+        const model = props.groups.flatMap(({ models }) => models).find((model2) => model2.id === value);
+        if (model) props.onModelSelect(model);
+        else props.onCustomModel(value);
+      }
+    }
+  );
+}
+exports.RuntimeBarIdentity = RuntimeBarIdentity;
+//# sourceMappingURL=RuntimeBarIdentity.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarIdentity.cjs","sources":["../../../src/data/runtime/RuntimeBarIdentity.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Combobox, type ComboboxOption } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport type { ChatModel } from \"../chat/types\";\nimport { runtimeFamilyBrand } from \"./RuntimeBar.model\";\nimport {\n  RuntimeSegment,\n  RuntimeSegmentCaption,\n  SEGMENT_CAPTION_CLASS,\n} from \"./RuntimeBarSegment\";\nimport { modelGroupsForMode } from \"./RuntimeBar.selection\";\nimport type { SpecRuntimeFamily, SpecRuntimeModeOption } from \"./runtime-mode\";\nimport { UNSPECIFIED_LABEL, unspecifiedHint } from \"./unspecified\";\n\nexport type RuntimeBarIdentityProps = {\n  family: SpecRuntimeFamily;\n  mode: SpecRuntimeModeOption;\n  modes: SpecRuntimeModeOption[];\n  groups: ReturnType<typeof modelGroupsForMode>;\n  selectedModel: ChatModel | undefined;\n  model: string | undefined;\n  unavailable: boolean;\n  inheritedModelLabel: string | undefined;\n  locked: boolean;\n  showModel: boolean;\n  variant: \"segmented\" | \"combo\";\n  onModeChange: (mode: string) => void;\n  onModelSelect: (model: ChatModel) => void;\n  onModelClear: () => void;\n  onCustomModel: (model: string) => void;\n  onFamilySelect: (family: string) => void;\n};\n\nexport function RuntimeBarIdentity({\n  measure = false,\n  ...props\n}: RuntimeBarIdentityProps & { measure?: boolean }) {\n  const modeCaption = (\n    <>\n      {props.mode.icon && (\n        <Icon\n          icon={props.mode.icon}\n          className=\"size-4 shrink-0 text-muted-foreground\"\n        />\n      )}\n      <span className={SEGMENT_CAPTION_CLASS}>{props.mode.label}</span>\n    </>\n  );\n  return (\n    <div\n      data-runtime-bar-section={measure ? undefined : \"identity\"}\n      className={cn(\n        \"flex h-control-h min-w-0 items-stretch\",\n        props.variant === \"combo\" && \"gap-1\",\n      )}\n    >\n      {measure ? (\n        <IdentityMeasure variant={props.variant}>{modeCaption}</IdentityMeasure>\n      ) : (\n        <RuntimeSegment\n          menuLabel=\"Runtime mode\"\n          title={`Runtime mode — ${props.mode.label}`}\n          disabled={props.locked}\n          className=\"shrink-0\"\n          items={props.modes.map((mode) => ({\n            label: mode.label,\n            ...(mode.icon ? { icon: mode.icon } : {}),\n            onSelect: () => props.onModeChange(mode.id),\n          }))}\n        >\n          {modeCaption}\n        </RuntimeSegment>\n      )}\n      {measure ? (\n        <IdentityMeasure variant={props.variant} model>\n          <ModelCaption {...props} />\n        </IdentityMeasure>\n      ) : (\n        <RuntimeModelPicker {...props} />\n      )}\n    </div>\n  );\n}\n\nfunction IdentityMeasure({\n  variant,\n  model = false,\n  children,\n}: {\n  variant: \"segmented\" | \"combo\";\n  model?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex h-control-h items-center gap-1.5 px-density-2\",\n        model && \"max-w-56 min-w-0\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input\"\n          : \"border-l border-border first:border-l-0\",\n      )}\n    >\n      <RuntimeSegmentCaption>{children}</RuntimeSegmentCaption>\n    </div>\n  );\n}\n\nfunction ModelCaption(props: RuntimeBarIdentityProps) {\n  const brand = runtimeFamilyBrand(props.family);\n  const label = props.showModel\n    ? props.unavailable\n      ? \"Unavailable selection\"\n      : (props.selectedModel?.label ?? props.model ?? UNSPECIFIED_LABEL)\n    : props.family.label;\n  return (\n    <>\n      {props.showModel && (\n        <span className=\"sr-only\">{props.family.label} </span>\n      )}\n      {brand.icon && (\n        <Icon\n          icon={brand.icon}\n          className={cn(\"size-4 shrink-0\", brand.color)}\n        />\n      )}\n      <span className=\"min-w-0 truncate font-mono text-xs font-semibold text-foreground\">\n        {label}\n      </span>\n    </>\n  );\n}\n\nfunction RuntimeModelPicker(props: RuntimeBarIdentityProps) {\n  const title = props.showModel\n    ? `Model — ${props.unavailable ? \"unavailable selection\" : props.model || \"unspecified\"}`\n    : `Family — ${props.family.label}`;\n  if (!props.showModel)\n    return (\n      <RuntimeSegment\n        menuLabel=\"Family\"\n        title={title}\n        disabled={props.locked}\n        className=\"min-w-0 max-w-56 flex-1\"\n        items={props.groups.map(({ family }) => {\n          const brand = runtimeFamilyBrand(family);\n          return {\n            label: family.label,\n            ...(brand.icon ? { icon: brand.icon } : {}),\n            onSelect: () => props.onFamilySelect(family.id),\n          };\n        })}\n      >\n        <ModelCaption {...props} />\n      </RuntimeSegment>\n    );\n  const options: ComboboxOption[] = [\n    {\n      value: \"\",\n      label: UNSPECIFIED_LABEL,\n      description: unspecifiedHint(props.inheritedModelLabel),\n    },\n    ...props.groups.flatMap(({ family, models }) => {\n      const brand = runtimeFamilyBrand(family);\n      const icon = brand.icon ? (\n        <Icon icon={brand.icon} className={cn(\"size-4\", brand.color)} />\n      ) : undefined;\n      return models.length\n        ? models.map((model) => ({\n            value: model.id,\n            label: model.label.trim() || model.id,\n            group: family.label,\n            icon,\n          }))\n        : [\n            {\n              value: `family:${family.id}`,\n              label: \"Custom model…\",\n              group: family.label,\n              icon,\n            },\n          ];\n    }),\n  ];\n  return (\n    <Combobox\n      searchPlacement=\"menu\"\n      ariaLabel=\"Model\"\n      title={title}\n      disabled={props.locked}\n      value={\n        props.unavailable ? \"\" : (props.selectedModel?.id ?? props.model ?? \"\")\n      }\n      options={options}\n      className={cn(\n        \"h-control-h min-w-0 max-w-56 flex-1\",\n        props.variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n      )}\n      triggerClassName=\"h-full rounded-none border-0 px-density-2 focus-visible:ring-inset aria-expanded:bg-muted\"\n      triggerContent={<ModelCaption {...props} />}\n      onNew={(value) => ({ value, label: `Use custom: ${value}` })}\n      onChange={(value) => {\n        if (!value) return props.onModelClear();\n        const family = props.groups.find(\n          ({ family }) => value === `family:${family.id}`,\n        )?.family;\n        if (family) return props.onFamilySelect(family.id);\n        const model = props.groups\n          .flatMap(({ models }) => models)\n          .find((model) => model.id === value);\n        if (model) props.onModelSelect(model);\n        else props.onCustomModel(value);\n      }}\n    />\n  );\n}\n"],"names":["jsxs","Fragment","jsx","Icon","SEGMENT_CAPTION_CLASS","cn","RuntimeSegment","RuntimeSegmentCaption","runtimeFamilyBrand","UNSPECIFIED_LABEL","unspecifiedHint","Combobox","_a","family","model"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { ChatModel } from '../chat/types.js';
+import { modelGroupsForMode } from './RuntimeBar.selection.js';
+import { SpecRuntimeFamily, SpecRuntimeModeOption } from './runtime-mode.js';
+export type RuntimeBarIdentityProps = {
+    family: SpecRuntimeFamily;
+    mode: SpecRuntimeModeOption;
+    modes: SpecRuntimeModeOption[];
+    groups: ReturnType<typeof modelGroupsForMode>;
+    selectedModel: ChatModel | undefined;
+    model: string | undefined;
+    unavailable: boolean;
+    inheritedModelLabel: string | undefined;
+    locked: boolean;
+    showModel: boolean;
+    variant: "segmented" | "combo";
+    onModeChange: (mode: string) => void;
+    onModelSelect: (model: ChatModel) => void;
+    onModelClear: () => void;
+    onCustomModel: (model: string) => void;
+    onFamilySelect: (family: string) => void;
+};
+export declare function RuntimeBarIdentity({ measure, ...props }: RuntimeBarIdentityProps & {
+    measure?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RuntimeBarIdentity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarIdentity.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarIdentity.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAG/E,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,MAAM,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;IAC9C,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,OAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,+BA8CjD"}

package/dist/data/runtime/RuntimeBarIdentity.js

@@ -0,0 +1,166 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Combobox } from "../../components/Combobox.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { runtimeFamilyBrand } from "./RuntimeBar.model.js";
+import { SEGMENT_CAPTION_CLASS, RuntimeSegment, RuntimeSegmentCaption } from "./RuntimeBarSegment.js";
+import { UNSPECIFIED_LABEL, unspecifiedHint } from "./unspecified.js";
+function RuntimeBarIdentity({
+  measure = false,
+  ...props
+}) {
+  const modeCaption = /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.mode.icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: props.mode.icon,
+        className: "size-4 shrink-0 text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: SEGMENT_CAPTION_CLASS, children: props.mode.label })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-runtime-bar-section": measure ? void 0 : "identity",
+      className: cn(
+        "flex h-control-h min-w-0 items-stretch",
+        props.variant === "combo" && "gap-1"
+      ),
+      children: [
+        measure ? /* @__PURE__ */ jsx(IdentityMeasure, { variant: props.variant, children: modeCaption }) : /* @__PURE__ */ jsx(
+          RuntimeSegment,
+          {
+            menuLabel: "Runtime mode",
+            title: `Runtime mode — ${props.mode.label}`,
+            disabled: props.locked,
+            className: "shrink-0",
+            items: props.modes.map((mode) => ({
+              label: mode.label,
+              ...mode.icon ? { icon: mode.icon } : {},
+              onSelect: () => props.onModeChange(mode.id)
+            })),
+            children: modeCaption
+          }
+        ),
+        measure ? /* @__PURE__ */ jsx(IdentityMeasure, { variant: props.variant, model: true, children: /* @__PURE__ */ jsx(ModelCaption, { ...props }) }) : /* @__PURE__ */ jsx(RuntimeModelPicker, { ...props })
+      ]
+    }
+  );
+}
+function IdentityMeasure({
+  variant,
+  model = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-control-h items-center gap-1.5 px-density-2",
+        model && "max-w-56 min-w-0",
+        variant === "combo" ? "rounded-md border border-input" : "border-l border-border first:border-l-0"
+      ),
+      children: /* @__PURE__ */ jsx(RuntimeSegmentCaption, { children })
+    }
+  );
+}
+function ModelCaption(props) {
+  var _a;
+  const brand = runtimeFamilyBrand(props.family);
+  const label = props.showModel ? props.unavailable ? "Unavailable selection" : ((_a = props.selectedModel) == null ? void 0 : _a.label) ?? props.model ?? UNSPECIFIED_LABEL : props.family.label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.showModel && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      props.family.label,
+      " "
+    ] }),
+    brand.icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: brand.icon,
+        className: cn("size-4 shrink-0", brand.color)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-xs font-semibold text-foreground", children: label })
+  ] });
+}
+function RuntimeModelPicker(props) {
+  var _a;
+  const title = props.showModel ? `Model — ${props.unavailable ? "unavailable selection" : props.model || "unspecified"}` : `Family — ${props.family.label}`;
+  if (!props.showModel)
+    return /* @__PURE__ */ jsx(
+      RuntimeSegment,
+      {
+        menuLabel: "Family",
+        title,
+        disabled: props.locked,
+        className: "min-w-0 max-w-56 flex-1",
+        items: props.groups.map(({ family }) => {
+          const brand = runtimeFamilyBrand(family);
+          return {
+            label: family.label,
+            ...brand.icon ? { icon: brand.icon } : {},
+            onSelect: () => props.onFamilySelect(family.id)
+          };
+        }),
+        children: /* @__PURE__ */ jsx(ModelCaption, { ...props })
+      }
+    );
+  const options = [
+    {
+      value: "",
+      label: UNSPECIFIED_LABEL,
+      description: unspecifiedHint(props.inheritedModelLabel)
+    },
+    ...props.groups.flatMap(({ family, models }) => {
+      const brand = runtimeFamilyBrand(family);
+      const icon = brand.icon ? /* @__PURE__ */ jsx(Icon, { icon: brand.icon, className: cn("size-4", brand.color) }) : void 0;
+      return models.length ? models.map((model) => ({
+        value: model.id,
+        label: model.label.trim() || model.id,
+        group: family.label,
+        icon
+      })) : [
+        {
+          value: `family:${family.id}`,
+          label: "Custom model…",
+          group: family.label,
+          icon
+        }
+      ];
+    })
+  ];
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      searchPlacement: "menu",
+      ariaLabel: "Model",
+      title,
+      disabled: props.locked,
+      value: props.unavailable ? "" : ((_a = props.selectedModel) == null ? void 0 : _a.id) ?? props.model ?? "",
+      options,
+      className: cn(
+        "h-control-h min-w-0 max-w-56 flex-1",
+        props.variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0"
+      ),
+      triggerClassName: "h-full rounded-none border-0 px-density-2 focus-visible:ring-inset aria-expanded:bg-muted",
+      triggerContent: /* @__PURE__ */ jsx(ModelCaption, { ...props }),
+      onNew: (value) => ({ value, label: `Use custom: ${value}` }),
+      onChange: (value) => {
+        var _a2;
+        if (!value) return props.onModelClear();
+        const family = (_a2 = props.groups.find(
+          ({ family: family2 }) => value === `family:${family2.id}`
+        )) == null ? void 0 : _a2.family;
+        if (family) return props.onFamilySelect(family.id);
+        const model = props.groups.flatMap(({ models }) => models).find((model2) => model2.id === value);
+        if (model) props.onModelSelect(model);
+        else props.onCustomModel(value);
+      }
+    }
+  );
+}
+export {
+  RuntimeBarIdentity
+};
+//# sourceMappingURL=RuntimeBarIdentity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarIdentity.js","sources":["../../../src/data/runtime/RuntimeBarIdentity.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Combobox, type ComboboxOption } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport type { ChatModel } from \"../chat/types\";\nimport { runtimeFamilyBrand } from \"./RuntimeBar.model\";\nimport {\n  RuntimeSegment,\n  RuntimeSegmentCaption,\n  SEGMENT_CAPTION_CLASS,\n} from \"./RuntimeBarSegment\";\nimport { modelGroupsForMode } from \"./RuntimeBar.selection\";\nimport type { SpecRuntimeFamily, SpecRuntimeModeOption } from \"./runtime-mode\";\nimport { UNSPECIFIED_LABEL, unspecifiedHint } from \"./unspecified\";\n\nexport type RuntimeBarIdentityProps = {\n  family: SpecRuntimeFamily;\n  mode: SpecRuntimeModeOption;\n  modes: SpecRuntimeModeOption[];\n  groups: ReturnType<typeof modelGroupsForMode>;\n  selectedModel: ChatModel | undefined;\n  model: string | undefined;\n  unavailable: boolean;\n  inheritedModelLabel: string | undefined;\n  locked: boolean;\n  showModel: boolean;\n  variant: \"segmented\" | \"combo\";\n  onModeChange: (mode: string) => void;\n  onModelSelect: (model: ChatModel) => void;\n  onModelClear: () => void;\n  onCustomModel: (model: string) => void;\n  onFamilySelect: (family: string) => void;\n};\n\nexport function RuntimeBarIdentity({\n  measure = false,\n  ...props\n}: RuntimeBarIdentityProps & { measure?: boolean }) {\n  const modeCaption = (\n    <>\n      {props.mode.icon && (\n        <Icon\n          icon={props.mode.icon}\n          className=\"size-4 shrink-0 text-muted-foreground\"\n        />\n      )}\n      <span className={SEGMENT_CAPTION_CLASS}>{props.mode.label}</span>\n    </>\n  );\n  return (\n    <div\n      data-runtime-bar-section={measure ? undefined : \"identity\"}\n      className={cn(\n        \"flex h-control-h min-w-0 items-stretch\",\n        props.variant === \"combo\" && \"gap-1\",\n      )}\n    >\n      {measure ? (\n        <IdentityMeasure variant={props.variant}>{modeCaption}</IdentityMeasure>\n      ) : (\n        <RuntimeSegment\n          menuLabel=\"Runtime mode\"\n          title={`Runtime mode — ${props.mode.label}`}\n          disabled={props.locked}\n          className=\"shrink-0\"\n          items={props.modes.map((mode) => ({\n            label: mode.label,\n            ...(mode.icon ? { icon: mode.icon } : {}),\n            onSelect: () => props.onModeChange(mode.id),\n          }))}\n        >\n          {modeCaption}\n        </RuntimeSegment>\n      )}\n      {measure ? (\n        <IdentityMeasure variant={props.variant} model>\n          <ModelCaption {...props} />\n        </IdentityMeasure>\n      ) : (\n        <RuntimeModelPicker {...props} />\n      )}\n    </div>\n  );\n}\n\nfunction IdentityMeasure({\n  variant,\n  model = false,\n  children,\n}: {\n  variant: \"segmented\" | \"combo\";\n  model?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex h-control-h items-center gap-1.5 px-density-2\",\n        model && \"max-w-56 min-w-0\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input\"\n          : \"border-l border-border first:border-l-0\",\n      )}\n    >\n      <RuntimeSegmentCaption>{children}</RuntimeSegmentCaption>\n    </div>\n  );\n}\n\nfunction ModelCaption(props: RuntimeBarIdentityProps) {\n  const brand = runtimeFamilyBrand(props.family);\n  const label = props.showModel\n    ? props.unavailable\n      ? \"Unavailable selection\"\n      : (props.selectedModel?.label ?? props.model ?? UNSPECIFIED_LABEL)\n    : props.family.label;\n  return (\n    <>\n      {props.showModel && (\n        <span className=\"sr-only\">{props.family.label} </span>\n      )}\n      {brand.icon && (\n        <Icon\n          icon={brand.icon}\n          className={cn(\"size-4 shrink-0\", brand.color)}\n        />\n      )}\n      <span className=\"min-w-0 truncate font-mono text-xs font-semibold text-foreground\">\n        {label}\n      </span>\n    </>\n  );\n}\n\nfunction RuntimeModelPicker(props: RuntimeBarIdentityProps) {\n  const title = props.showModel\n    ? `Model — ${props.unavailable ? \"unavailable selection\" : props.model || \"unspecified\"}`\n    : `Family — ${props.family.label}`;\n  if (!props.showModel)\n    return (\n      <RuntimeSegment\n        menuLabel=\"Family\"\n        title={title}\n        disabled={props.locked}\n        className=\"min-w-0 max-w-56 flex-1\"\n        items={props.groups.map(({ family }) => {\n          const brand = runtimeFamilyBrand(family);\n          return {\n            label: family.label,\n            ...(brand.icon ? { icon: brand.icon } : {}),\n            onSelect: () => props.onFamilySelect(family.id),\n          };\n        })}\n      >\n        <ModelCaption {...props} />\n      </RuntimeSegment>\n    );\n  const options: ComboboxOption[] = [\n    {\n      value: \"\",\n      label: UNSPECIFIED_LABEL,\n      description: unspecifiedHint(props.inheritedModelLabel),\n    },\n    ...props.groups.flatMap(({ family, models }) => {\n      const brand = runtimeFamilyBrand(family);\n      const icon = brand.icon ? (\n        <Icon icon={brand.icon} className={cn(\"size-4\", brand.color)} />\n      ) : undefined;\n      return models.length\n        ? models.map((model) => ({\n            value: model.id,\n            label: model.label.trim() || model.id,\n            group: family.label,\n            icon,\n          }))\n        : [\n            {\n              value: `family:${family.id}`,\n              label: \"Custom model…\",\n              group: family.label,\n              icon,\n            },\n          ];\n    }),\n  ];\n  return (\n    <Combobox\n      searchPlacement=\"menu\"\n      ariaLabel=\"Model\"\n      title={title}\n      disabled={props.locked}\n      value={\n        props.unavailable ? \"\" : (props.selectedModel?.id ?? props.model ?? \"\")\n      }\n      options={options}\n      className={cn(\n        \"h-control-h min-w-0 max-w-56 flex-1\",\n        props.variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n      )}\n      triggerClassName=\"h-full rounded-none border-0 px-density-2 focus-visible:ring-inset aria-expanded:bg-muted\"\n      triggerContent={<ModelCaption {...props} />}\n      onNew={(value) => ({ value, label: `Use custom: ${value}` })}\n      onChange={(value) => {\n        if (!value) return props.onModelClear();\n        const family = props.groups.find(\n          ({ family }) => value === `family:${family.id}`,\n        )?.family;\n        if (family) return props.onFamilySelect(family.id);\n        const model = props.groups\n          .flatMap(({ models }) => models)\n          .find((model) => model.id === value);\n        if (model) props.onModelSelect(model);\n        else props.onCustomModel(value);\n      }}\n    />\n  );\n}\n"],"names":["_a","family","model"],"mappings":"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"}

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;"}