@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/data/runtime/RuntimeBarLimits.js

@@ -0,0 +1,262 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Combobox } from "../../components/Combobox.js";
+import { InputField } from "../../components/InputField.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { parseTimeout, TIMEOUT_PRESETS, parseCost, COST_PRESETS, formatCost } from "./RuntimeBar.limits.js";
+import { SegmentItemLabel, RuntimeSegment, SEGMENT_CAPTION_CLASS, SEGMENT_KEY_CLASS } from "./RuntimeBarSegment.js";
+import { UiTimer } from "../../icons/components/UiTimer.js";
+import { UiCurrencyDollar } from "../../icons/components/UiCurrencyDollar.js";
+function TimeoutSegment({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    LimitSegment,
+    {
+      label: "Timeout",
+      inputLabel: "Timeout duration",
+      icon: UiTimer,
+      current: value,
+      text: value ?? "",
+      placeholder: "45m",
+      presets: TIMEOUT_PRESETS.map((timeout) => ({ label: timeout, value: timeout })),
+      parse: parseTimeout,
+      onChange
+    }
+  );
+}
+function CostSegment({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    LimitSegment,
+    {
+      label: "Max cost",
+      inputLabel: "Max cost (USD)",
+      icon: UiCurrencyDollar,
+      current: formatCost(value),
+      text: value === void 0 ? "" : String(value),
+      placeholder: "2.50",
+      presets: COST_PRESETS.map((cost) => ({ label: formatCost(cost) ?? "", value: cost })),
+      parse: parseCost,
+      onChange
+    }
+  );
+}
+function RuntimeBarLimitFields({
+  timeout,
+  cost,
+  showTimeout,
+  showCost,
+  onTimeoutChange,
+  onCostChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+    showTimeout && /* @__PURE__ */ jsx(
+      LimitField,
+      {
+        label: "Timeout",
+        icon: UiTimer,
+        inputLabel: "Timeout duration",
+        current: timeout,
+        text: timeout ?? "",
+        placeholder: "45m",
+        presets: TIMEOUT_PRESETS.map((preset) => ({
+          label: preset,
+          value: preset
+        })),
+        parse: parseTimeout,
+        onChange: onTimeoutChange
+      }
+    ),
+    showCost && /* @__PURE__ */ jsx(
+      LimitField,
+      {
+        label: "Max cost",
+        icon: UiCurrencyDollar,
+        inputLabel: "Max cost (USD)",
+        current: formatCost(cost),
+        text: cost === void 0 ? "" : String(cost),
+        placeholder: "2.50",
+        presets: COST_PRESETS.map((preset) => ({ label: formatCost(preset) ?? "", value: preset })),
+        parse: parseCost,
+        onChange: onCostChange
+      }
+    )
+  ] }) });
+}
+function LimitSegment({
+  label,
+  inputLabel,
+  icon,
+  current,
+  text,
+  placeholder,
+  presets,
+  parse,
+  onChange
+}) {
+  const items = [
+    {
+      group: label,
+      label: /* @__PURE__ */ jsx(SegmentItemLabel, { text: "No limit", selected: current === void 0 }),
+      onSelect: () => onChange(void 0)
+    },
+    ...presets.map((preset) => ({
+      group: label,
+      label: /* @__PURE__ */ jsx(SegmentItemLabel, { text: preset.label, selected: preset.label === current }),
+      onSelect: () => onChange(preset.value)
+    }))
+  ];
+  return /* @__PURE__ */ jsxs(
+    RuntimeSegment,
+    {
+      menuLabel: label,
+      title: `${label} — ${current ?? "no limit"}`,
+      className: "shrink-0",
+      items,
+      header: /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: SEGMENT_KEY_CLASS, children: inputLabel }),
+        /* @__PURE__ */ jsx(
+          LimitInput,
+          {
+            inputLabel,
+            text,
+            placeholder,
+            parse,
+            current,
+            onChange
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon, className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0",
+              current ? SEGMENT_CAPTION_CLASS : "truncate text-xs text-muted-foreground"
+            ),
+            children: current ?? "None"
+          }
+        )
+      ]
+    }
+  );
+}
+function LimitField({
+  label,
+  icon,
+  inputLabel,
+  current,
+  text,
+  placeholder,
+  presets,
+  parse,
+  onChange
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": `${label} limit`,
+      className: "flex min-w-0 items-center gap-2",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsx(Icon, { icon, className: "size-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+        ] }),
+        /* @__PURE__ */ jsx(
+          LimitInput,
+          {
+            inputLabel,
+            text,
+            placeholder,
+            parse,
+            current,
+            onChange,
+            className: "w-24 shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            id: `${id}-presets`,
+            ariaLabel: `${label} presets`,
+            value: current ?? "",
+            onChange: (selectedPreset) => {
+              if (selectedPreset === "" || selectedPreset === "__no_limit") {
+                onChange(void 0);
+                return;
+              }
+              const preset = presets.find(
+                (candidate) => candidate.label === selectedPreset
+              );
+              if (!preset) {
+                throw new Error(`Unknown ${label} preset: ${selectedPreset}`);
+              }
+              onChange(preset.value);
+            },
+            options: [
+              { value: "__no_limit", label: "No limit" },
+              ...presets.map((preset) => ({
+                value: preset.label,
+                label: preset.label
+              }))
+            ],
+            allowCustomValue: false,
+            size: "xs",
+            placeholder: "Presets",
+            className: "w-28 shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function LimitInput({
+  inputLabel,
+  text,
+  placeholder,
+  parse,
+  current,
+  onChange,
+  className
+}) {
+  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: cn("bg-background", className)
+    }
+  );
+}
+export {
+  CostSegment,
+  RuntimeBarLimitFields,
+  TimeoutSegment
+};
+//# sourceMappingURL=RuntimeBarLimits.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarLimits.js","sources":["../../../src/data/runtime/RuntimeBarLimits.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"../../components/Combobox\";\nimport { InputField } from \"../../components/InputField\";\nimport { UiCurrencyDollar, UiTimer } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport {\n  COST_PRESETS,\n  TIMEOUT_PRESETS,\n  formatCost,\n  parseCost,\n  parseTimeout,\n} from \"./RuntimeBar.limits\";\nimport {\n  RuntimeSegment,\n  SEGMENT_CAPTION_CLASS,\n  SEGMENT_KEY_CLASS,\n  SegmentItemLabel,\n} from \"./RuntimeBarSegment\";\n\nexport function TimeoutSegment({\n  value,\n  onChange,\n}: {\n  value: string | undefined;\n  onChange: (next: string | undefined) => void;\n}) {\n  return (\n    <LimitSegment\n      label=\"Timeout\"\n      inputLabel=\"Timeout duration\"\n      icon={UiTimer}\n      current={value}\n      text={value ?? \"\"}\n      placeholder=\"45m\"\n      presets={TIMEOUT_PRESETS.map((timeout) => ({ label: timeout, value: timeout }))}\n      parse={parseTimeout}\n      onChange={onChange}\n    />\n  );\n}\n\nexport function CostSegment({\n  value,\n  onChange,\n}: {\n  value: number | undefined;\n  onChange: (next: number | undefined) => void;\n}) {\n  return (\n    <LimitSegment\n      label=\"Max cost\"\n      inputLabel=\"Max cost (USD)\"\n      icon={UiCurrencyDollar}\n      current={formatCost(value)}\n      text={value === undefined ? \"\" : String(value)}\n      placeholder=\"2.50\"\n      presets={COST_PRESETS.map((cost) => ({ label: formatCost(cost) ?? \"\", value: cost }))}\n      parse={parseCost}\n      onChange={onChange}\n    />\n  );\n}\n\nexport function RuntimeBarLimitFields({\n  timeout,\n  cost,\n  showTimeout,\n  showCost,\n  onTimeoutChange,\n  onCostChange,\n}: {\n  timeout: string | undefined;\n  cost: number | undefined;\n  showTimeout: boolean;\n  showCost: boolean;\n  onTimeoutChange: (next: string | undefined) => void;\n  onCostChange: (next: number | undefined) => void;\n}) {\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"grid gap-1\">\n        {showTimeout && (\n          <LimitField\n            label=\"Timeout\"\n            icon={UiTimer}\n            inputLabel=\"Timeout duration\"\n            current={timeout}\n            text={timeout ?? \"\"}\n            placeholder=\"45m\"\n            presets={TIMEOUT_PRESETS.map((preset) => ({\n              label: preset,\n              value: preset,\n            }))}\n            parse={parseTimeout}\n            onChange={onTimeoutChange}\n          />\n        )}\n        {showCost && (\n          <LimitField\n            label=\"Max cost\"\n            icon={UiCurrencyDollar}\n            inputLabel=\"Max cost (USD)\"\n            current={formatCost(cost)}\n            text={cost === undefined ? \"\" : String(cost)}\n            placeholder=\"2.50\"\n            presets={COST_PRESETS.map((preset) => ({ label: formatCost(preset) ?? \"\", value: preset }))}\n            parse={parseCost}\n            onChange={onCostChange}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// A preset menu plus a free-text header. Typed text is held while the field is\n// focused and only committed once it parses, so partial input (\"2.\") never\n// rewrites the value under the caret.\nfunction LimitSegment<V extends string | number>({\n  label,\n  inputLabel,\n  icon,\n  current,\n  text,\n  placeholder,\n  presets,\n  parse,\n  onChange,\n}: {\n  label: string;\n  inputLabel: string;\n  icon: StaticIconComponent;\n  current: string | undefined;\n  text: string;\n  placeholder: string;\n  presets: { label: string; value: V }[];\n  parse: (text: string) => V | undefined;\n  onChange: (next: V | undefined) => void;\n}) {\n  const items: DropdownMenuItem[] = [\n    {\n      group: label,\n      label: <SegmentItemLabel text=\"No limit\" selected={current === undefined} />,\n      onSelect: () => onChange(undefined),\n    },\n    ...presets.map((preset) => ({\n      group: label,\n      label: <SegmentItemLabel text={preset.label} selected={preset.label === current} />,\n      onSelect: () => onChange(preset.value),\n    })),\n  ];\n\n  return (\n    <RuntimeSegment\n      menuLabel={label}\n      title={`${label} — ${current ?? \"no limit\"}`}\n      // A limit is only worth showing at its full value, so it never absorbs the\n      // settings row's shrink; the effort segment's \"Effort\" key label does.\n      className=\"shrink-0\"\n      items={items}\n      header={\n        <div className=\"grid gap-1\">\n          <span className={SEGMENT_KEY_CLASS}>{inputLabel}</span>\n          <LimitInput\n            inputLabel={inputLabel}\n            text={text}\n            placeholder={placeholder}\n            parse={parse}\n            current={current}\n            onChange={onChange}\n          />\n        </div>\n      }\n    >\n      <Icon icon={icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n      <span\n        className={cn(\n          \"shrink-0\",\n          current ? SEGMENT_CAPTION_CLASS : \"truncate text-xs text-muted-foreground\",\n        )}\n      >\n        {current ?? \"None\"}\n      </span>\n    </RuntimeSegment>\n  );\n}\n\nfunction LimitField<V extends string | number>({\n  label,\n  icon,\n  inputLabel,\n  current,\n  text,\n  placeholder,\n  presets,\n  parse,\n  onChange,\n}: {\n  label: string;\n  icon: StaticIconComponent;\n  inputLabel: string;\n  current: string | undefined;\n  text: string;\n  placeholder: string;\n  presets: { label: string; value: V }[];\n  parse: (text: string) => V | undefined;\n  onChange: (next: V | undefined) => void;\n}) {\n  const id = useId();\n  return (\n    <div\n      role=\"group\"\n      aria-label={`${label} limit`}\n      className=\"flex min-w-0 items-center gap-2\"\n    >\n      <span className=\"flex min-w-0 flex-1 items-center gap-1.5 text-xs font-medium text-foreground\">\n        <Icon icon={icon} className=\"size-4 shrink-0 text-muted-foreground\" />\n        <span className=\"truncate\">{label}</span>\n      </span>\n      <LimitInput\n        inputLabel={inputLabel}\n        text={text}\n        placeholder={placeholder}\n        parse={parse}\n        current={current}\n        onChange={onChange}\n        className=\"w-24 shrink-0\"\n      />\n      <Combobox\n        id={`${id}-presets`}\n        ariaLabel={`${label} presets`}\n        value={current ?? \"\"}\n        onChange={(selectedPreset) => {\n          if (selectedPreset === \"\" || selectedPreset === \"__no_limit\") {\n            onChange(undefined);\n            return;\n          }\n          const preset = presets.find(\n            (candidate) => candidate.label === selectedPreset,\n          );\n          if (!preset) {\n            throw new Error(`Unknown ${label} preset: ${selectedPreset}`);\n          }\n          onChange(preset.value);\n        }}\n        options={[\n          { value: \"__no_limit\", label: \"No limit\" },\n          ...presets.map<ComboboxOption>((preset) => ({\n            value: preset.label,\n            label: preset.label,\n          })),\n        ]}\n        allowCustomValue={false}\n        size=\"xs\"\n        placeholder=\"Presets\"\n        className=\"w-28 shrink-0\"\n      />\n    </div>\n  );\n}\n\nfunction LimitInput<V extends string | number>({\n  inputLabel,\n  text,\n  placeholder,\n  parse,\n  current,\n  onChange,\n  className,\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  className?: string | undefined;\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={cn(\"bg-background\", className)}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/runtime/RuntimeBarSegment.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 UiCheck = require("../../icons/components/UiCheck.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({
+  items,
+  menuLabel,
+  title,
+  header,
+  disabled = false,
+  hideChevron = false,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "left",
+      menuLabel,
+      items,
+      ...header ? { header } : {},
+      menuClassName: "min-w-56 max-w-80",
+      className: utils.cn(
+        "min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
+        className
+      ),
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "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"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SegmentItemLabel({
+  text,
+  hint,
+  selected,
+  stacked = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("block truncate", selected && "font-semibold"), children: text }),
+      hint && stacked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block whitespace-normal text-[11px] leading-4 text-muted-foreground", children: hint })
+    ] }),
+    hint && !stacked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: hint }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        icon: UiCheck.UiCheck,
+        className: utils.cn(
+          "size-3.5 shrink-0 text-primary",
+          !selected && "invisible"
+        )
+      }
+    )
+  ] });
+}
+exports.RuntimeSegment = RuntimeSegment;
+exports.SEGMENT_CAPTION_CLASS = SEGMENT_CAPTION_CLASS;
+exports.SEGMENT_KEY_CLASS = SEGMENT_KEY_CLASS;
+exports.SegmentItemLabel = SegmentItemLabel;
+//# sourceMappingURL=RuntimeBarSegment.cjs.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { DropdownMenuItem } from '../../overlay/DropdownMenu';
+export declare const SEGMENT_CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
+export declare const SEGMENT_KEY_CLASS = "text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground";
+export declare function RuntimeSegment({ items, menuLabel, title, header, disabled, hideChevron, className, children, }: {
+    items: DropdownMenuItem[];
+    menuLabel: string;
+    title: string;
+    header?: ReactNode;
+    disabled?: boolean;
+    /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */
+    hideChevron?: boolean;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SegmentItemLabel({ text, hint, selected, stacked, }: {
+    text: string;
+    hint?: string | undefined;
+    selected: boolean;
+    stacked?: boolean | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RuntimeBarSegment.d.ts.map

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

@@ -0,0 +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"}

package/dist/data/runtime/RuntimeBarSegment.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+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 { UiCheck } from "../../icons/components/UiCheck.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({
+  items,
+  menuLabel,
+  title,
+  header,
+  disabled = false,
+  hideChevron = false,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "left",
+      menuLabel,
+      items,
+      ...header ? { header } : {},
+      menuClassName: "min-w-56 max-w-80",
+      className: cn(
+        "min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
+        className
+      ),
+      trigger: /* @__PURE__ */ jsxs(
+        "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"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SegmentItemLabel({
+  text,
+  hint,
+  selected,
+  stacked = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("block truncate", selected && "font-semibold"), children: text }),
+      hint && stacked && /* @__PURE__ */ jsx("span", { className: "block whitespace-normal text-[11px] leading-4 text-muted-foreground", children: hint })
+    ] }),
+    hint && !stacked && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: hint }),
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: UiCheck,
+        className: cn(
+          "size-3.5 shrink-0 text-primary",
+          !selected && "invisible"
+        )
+      }
+    )
+  ] });
+}
+export {
+  RuntimeSegment,
+  SEGMENT_CAPTION_CLASS,
+  SEGMENT_KEY_CLASS,
+  SegmentItemLabel
+};
+//# sourceMappingURL=RuntimeBarSegment.js.map

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

@@ -0,0 +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;"}