@flanksource/clicky-ui 0.3.41 → 0.3.43

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

package/dist/data/runtime/use-runtime-bar-overflow.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function runtimeBarInlineCount({
+  width,
+  identity,
+  trigger,
+  fields,
+  gap
+}) {
+  let occupied = identity + trigger + gap;
+  let count = 0;
+  for (const field of fields) {
+    occupied += field + gap;
+    if (occupied > width) break;
+    count++;
+  }
+  return count;
+}
+function useRuntimeBarOverflow() {
+  const [container, setContainer] = react.useState(null);
+  const [measurement, setMeasurement] = react.useState(null);
+  const [visibleCount, setVisibleCount] = react.useState(Infinity);
+  const measure = react.useCallback(() => {
+    if (!container || !measurement) return;
+    const width = container.getBoundingClientRect().width;
+    if (width <= 0) return;
+    const [identity, ...controls] = [...measurement.children];
+    const trigger = controls.pop();
+    if (!identity || !trigger)
+      throw new Error(
+        "Runtime bar measurement requires identity and a menu trigger"
+      );
+    const spacing = getComputedStyle(measurement).columnGap;
+    const gap = spacing === "normal" || spacing === "" ? 0 : Number.parseFloat(spacing);
+    if (!Number.isFinite(gap))
+      throw new Error(`Invalid runtime bar spacing: ${spacing}`);
+    const count = runtimeBarInlineCount({
+      width: width - 2,
+      identity: identity.getBoundingClientRect().width,
+      trigger: trigger.getBoundingClientRect().width,
+      fields: controls.map((node) => node.getBoundingClientRect().width),
+      gap
+    });
+    setVisibleCount((previous) => previous === count ? previous : count);
+  }, [container, measurement]);
+  react.useLayoutEffect(() => {
+    measure();
+  });
+  react.useLayoutEffect(() => {
+    if (!container || !measurement) return;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(container);
+    observer == null ? void 0 : observer.observe(measurement);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [container, measurement, measure]);
+  return {
+    containerRef: setContainer,
+    measurementRef: setMeasurement,
+    visibleCount
+  };
+}
+exports.runtimeBarInlineCount = runtimeBarInlineCount;
+exports.useRuntimeBarOverflow = useRuntimeBarOverflow;
+//# sourceMappingURL=use-runtime-bar-overflow.cjs.map

package/dist/data/runtime/use-runtime-bar-overflow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-runtime-bar-overflow.cjs","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n  gap,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n  gap: number;\n}) {\n  let occupied = identity + trigger + gap;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field + gap;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const spacing = getComputedStyle(measurement).columnGap;\n    const gap =\n      spacing === \"normal\" || spacing === \"\" ? 0 : Number.parseFloat(spacing);\n    if (!Number.isFinite(gap))\n      throw new Error(`Invalid runtime bar spacing: ${spacing}`);\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n      gap,\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":["useState","useCallback","useLayoutEffect"],"mappings":";;;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,WAAW,WAAW,UAAU;AACpC,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY,QAAQ;AACpB,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAIA,MAAAA,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,QAAQ;AAEzD,QAAM,UAAUC,MAAAA,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,UAAU,iBAAiB,WAAW,EAAE;AAC9C,UAAM,MACJ,YAAY,YAAY,YAAY,KAAK,IAAI,OAAO,WAAW,OAAO;AACxE,QAAI,CAAC,OAAO,SAAS,GAAG;AACtB,YAAM,IAAI,MAAM,gCAAgC,OAAO,EAAE;AAC3D,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,MACjE;AAAA,IAAA,CACD;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3BC,QAAAA,gBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAEDA,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;;;"}

package/dist/data/runtime/use-runtime-bar-overflow.d.ts

@@ -0,0 +1,13 @@
+export declare function runtimeBarInlineCount({ width, identity, trigger, fields, gap, }: {
+    width: number;
+    identity: number;
+    trigger: number;
+    fields: number[];
+    gap: number;
+}): number;
+export declare function useRuntimeBarOverflow(): {
+    containerRef: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+    measurementRef: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+    visibleCount: number;
+};
+//# sourceMappingURL=use-runtime-bar-overflow.d.ts.map

package/dist/data/runtime/use-runtime-bar-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-runtime-bar-overflow.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb,UASA;AAED,wBAAgB,qBAAqB;;;;EAuDpC"}

package/dist/data/runtime/use-runtime-bar-overflow.js

@@ -0,0 +1,70 @@
+import { useState, useCallback, useLayoutEffect } from "react";
+function runtimeBarInlineCount({
+  width,
+  identity,
+  trigger,
+  fields,
+  gap
+}) {
+  let occupied = identity + trigger + gap;
+  let count = 0;
+  for (const field of fields) {
+    occupied += field + gap;
+    if (occupied > width) break;
+    count++;
+  }
+  return count;
+}
+function useRuntimeBarOverflow() {
+  const [container, setContainer] = useState(null);
+  const [measurement, setMeasurement] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(Infinity);
+  const measure = useCallback(() => {
+    if (!container || !measurement) return;
+    const width = container.getBoundingClientRect().width;
+    if (width <= 0) return;
+    const [identity, ...controls] = [...measurement.children];
+    const trigger = controls.pop();
+    if (!identity || !trigger)
+      throw new Error(
+        "Runtime bar measurement requires identity and a menu trigger"
+      );
+    const spacing = getComputedStyle(measurement).columnGap;
+    const gap = spacing === "normal" || spacing === "" ? 0 : Number.parseFloat(spacing);
+    if (!Number.isFinite(gap))
+      throw new Error(`Invalid runtime bar spacing: ${spacing}`);
+    const count = runtimeBarInlineCount({
+      width: width - 2,
+      identity: identity.getBoundingClientRect().width,
+      trigger: trigger.getBoundingClientRect().width,
+      fields: controls.map((node) => node.getBoundingClientRect().width),
+      gap
+    });
+    setVisibleCount((previous) => previous === count ? previous : count);
+  }, [container, measurement]);
+  useLayoutEffect(() => {
+    measure();
+  });
+  useLayoutEffect(() => {
+    if (!container || !measurement) return;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(container);
+    observer == null ? void 0 : observer.observe(measurement);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [container, measurement, measure]);
+  return {
+    containerRef: setContainer,
+    measurementRef: setMeasurement,
+    visibleCount
+  };
+}
+export {
+  runtimeBarInlineCount,
+  useRuntimeBarOverflow
+};
+//# sourceMappingURL=use-runtime-bar-overflow.js.map

package/dist/data/runtime/use-runtime-bar-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-runtime-bar-overflow.js","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n  gap,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n  gap: number;\n}) {\n  let occupied = identity + trigger + gap;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field + gap;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const spacing = getComputedStyle(measurement).columnGap;\n    const gap =\n      spacing === \"normal\" || spacing === \"\" ? 0 : Number.parseFloat(spacing);\n    if (!Number.isFinite(gap))\n      throw new Error(`Invalid runtime bar spacing: ${spacing}`);\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n      gap,\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":[],"mappings":";AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,WAAW,WAAW,UAAU;AACpC,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY,QAAQ;AACpB,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AAEzD,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,UAAU,iBAAiB,WAAW,EAAE;AAC9C,UAAM,MACJ,YAAY,YAAY,YAAY,KAAK,IAAI,OAAO,WAAW,OAAO;AACxE,QAAI,CAAC,OAAO,SAAS,GAAG;AACtB,YAAM,IAAI,MAAM,gCAAgC,OAAO,EAAE;AAC3D,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,MACjE;AAAA,IAAA,CACD;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,kBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;"}

package/dist/data/use-edge-focus.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const graphDiagramModel = require("./graph-diagram-model.cjs");
+function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }) {
+  const [hoveredNode, setHoveredNode] = react.useState();
+  const [hoveredEdge, setHoveredEdge] = react.useState();
+  const on = graphDiagramModel.edgeFocusOn(mode, edges.length);
+  const state = react.useMemo(
+    () => on ? {
+      focused: graphDiagramModel.focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),
+      pinned: graphDiagramModel.focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),
+      nodes: new Set([selectedId, hoveredNode].filter((id) => id !== void 0))
+    } : void 0,
+    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge]
+  );
+  return { state, onNodeHover: on ? setHoveredNode : void 0, onEdgeHover: on ? setHoveredEdge : void 0 };
+}
+exports.useEdgeFocus = useEdgeFocus;
+//# sourceMappingURL=use-edge-focus.cjs.map

package/dist/data/use-edge-focus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.cjs","sources":["../../src/data/use-edge-focus.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { edgeFocusOn, focusedEdgeIds, type GraphDiagramEdge, type GraphDiagramEdgeFocus } from \"./graph-diagram-model\";\n\nexport interface EdgeFocusState {\n  /** Every edge in focus, by selection or by hover. Empty when nothing is. */\n  focused: ReadonlySet<string>;\n  /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */\n  pinned: ReadonlySet<string>;\n  /** The nodes in focus: the selected one and the hovered one. */\n  nodes: ReadonlySet<string>;\n}\n\nexport interface EdgeFocus {\n  /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */\n  state: EdgeFocusState | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n  onEdgeHover: ((id: string | undefined) => void) | undefined;\n}\n\nexport interface UseEdgeFocusOptions {\n  mode: GraphDiagramEdgeFocus;\n  edges: readonly GraphDiagramEdge[];\n  selectedId: string | undefined;\n  selectedEdgeId: string | undefined;\n}\n\nexport function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus {\n  const [hoveredNode, setHoveredNode] = useState<string>();\n  const [hoveredEdge, setHoveredEdge] = useState<string>();\n  const on = edgeFocusOn(mode, edges.length);\n  const state = useMemo(\n    () =>\n      on\n        ? {\n            focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),\n            pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),\n            nodes: new Set([selectedId, hoveredNode].filter((id): id is string => id !== undefined)),\n          }\n        : undefined,\n    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge],\n  );\n  return { state, onNodeHover: on ? setHoveredNode : undefined, onEdgeHover: on ? setHoveredEdge : undefined };\n}\n"],"names":["useState","edgeFocusOn","useMemo","focusedEdgeIds"],"mappings":";;;;AA0BO,SAAS,aAAa,EAAE,MAAM,OAAO,YAAY,kBAAkD;AACxG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAA;AACtC,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAA;AACtC,QAAM,KAAKC,kBAAAA,YAAY,MAAM,MAAM,MAAM;AACzC,QAAM,QAAQC,MAAAA;AAAAA,IACZ,MACE,KACI;AAAA,MACE,SAASC,kBAAAA,eAAe,OAAO,EAAE,OAAO,CAAC,YAAY,WAAW,GAAG,OAAO,CAAC,gBAAgB,WAAW,GAAG;AAAA,MACzG,QAAQA,kBAAAA,eAAe,OAAO,EAAE,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,cAAc,GAAG;AAAA,MAC9E,OAAO,IAAI,IAAI,CAAC,YAAY,WAAW,EAAE,OAAO,CAAC,OAAqB,OAAO,MAAS,CAAC;AAAA,IAAA,IAEzF;AAAA,IACN,CAAC,IAAI,OAAO,YAAY,gBAAgB,aAAa,WAAW;AAAA,EAAA;AAElE,SAAO,EAAE,OAAO,aAAa,KAAK,iBAAiB,QAAW,aAAa,KAAK,iBAAiB,OAAA;AACnG;;"}

package/dist/data/use-edge-focus.d.ts

@@ -0,0 +1,23 @@
+import { GraphDiagramEdge, GraphDiagramEdgeFocus } from './graph-diagram-model.js';
+export interface EdgeFocusState {
+    /** Every edge in focus, by selection or by hover. Empty when nothing is. */
+    focused: ReadonlySet<string>;
+    /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */
+    pinned: ReadonlySet<string>;
+    /** The nodes in focus: the selected one and the hovered one. */
+    nodes: ReadonlySet<string>;
+}
+export interface EdgeFocus {
+    /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */
+    state: EdgeFocusState | undefined;
+    onNodeHover: ((id: string | undefined) => void) | undefined;
+    onEdgeHover: ((id: string | undefined) => void) | undefined;
+}
+export interface UseEdgeFocusOptions {
+    mode: GraphDiagramEdgeFocus;
+    edges: readonly GraphDiagramEdge[];
+    selectedId: string | undefined;
+    selectedEdgeId: string | undefined;
+}
+export declare function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus;
+//# sourceMappingURL=use-edge-focus.d.ts.map

package/dist/data/use-edge-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.d.ts","sourceRoot":"","sources":["../../src/data/use-edge-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEvH,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,4FAA4F;IAC5F,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,gEAAgE;IAChE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,+FAA+F;IAC/F,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAgBxG"}

package/dist/data/use-edge-focus.js

@@ -0,0 +1,20 @@
+import { useState, useMemo } from "react";
+import { edgeFocusOn, focusedEdgeIds } from "./graph-diagram-model.js";
+function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }) {
+  const [hoveredNode, setHoveredNode] = useState();
+  const [hoveredEdge, setHoveredEdge] = useState();
+  const on = edgeFocusOn(mode, edges.length);
+  const state = useMemo(
+    () => on ? {
+      focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),
+      pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),
+      nodes: new Set([selectedId, hoveredNode].filter((id) => id !== void 0))
+    } : void 0,
+    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge]
+  );
+  return { state, onNodeHover: on ? setHoveredNode : void 0, onEdgeHover: on ? setHoveredEdge : void 0 };
+}
+export {
+  useEdgeFocus
+};
+//# sourceMappingURL=use-edge-focus.js.map

package/dist/data/use-edge-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.js","sources":["../../src/data/use-edge-focus.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { edgeFocusOn, focusedEdgeIds, type GraphDiagramEdge, type GraphDiagramEdgeFocus } from \"./graph-diagram-model\";\n\nexport interface EdgeFocusState {\n  /** Every edge in focus, by selection or by hover. Empty when nothing is. */\n  focused: ReadonlySet<string>;\n  /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */\n  pinned: ReadonlySet<string>;\n  /** The nodes in focus: the selected one and the hovered one. */\n  nodes: ReadonlySet<string>;\n}\n\nexport interface EdgeFocus {\n  /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */\n  state: EdgeFocusState | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n  onEdgeHover: ((id: string | undefined) => void) | undefined;\n}\n\nexport interface UseEdgeFocusOptions {\n  mode: GraphDiagramEdgeFocus;\n  edges: readonly GraphDiagramEdge[];\n  selectedId: string | undefined;\n  selectedEdgeId: string | undefined;\n}\n\nexport function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus {\n  const [hoveredNode, setHoveredNode] = useState<string>();\n  const [hoveredEdge, setHoveredEdge] = useState<string>();\n  const on = edgeFocusOn(mode, edges.length);\n  const state = useMemo(\n    () =>\n      on\n        ? {\n            focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),\n            pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),\n            nodes: new Set([selectedId, hoveredNode].filter((id): id is string => id !== undefined)),\n          }\n        : undefined,\n    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge],\n  );\n  return { state, onNodeHover: on ? setHoveredNode : undefined, onEdgeHover: on ? setHoveredEdge : undefined };\n}\n"],"names":[],"mappings":";;AA0BO,SAAS,aAAa,EAAE,MAAM,OAAO,YAAY,kBAAkD;AACxG,QAAM,CAAC,aAAa,cAAc,IAAI,SAAA;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAA;AACtC,QAAM,KAAK,YAAY,MAAM,MAAM,MAAM;AACzC,QAAM,QAAQ;AAAA,IACZ,MACE,KACI;AAAA,MACE,SAAS,eAAe,OAAO,EAAE,OAAO,CAAC,YAAY,WAAW,GAAG,OAAO,CAAC,gBAAgB,WAAW,GAAG;AAAA,MACzG,QAAQ,eAAe,OAAO,EAAE,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,cAAc,GAAG;AAAA,MAC9E,OAAO,IAAI,IAAI,CAAC,YAAY,WAAW,EAAE,OAAO,CAAC,OAAqB,OAAO,MAAS,CAAC;AAAA,IAAA,IAEzF;AAAA,IACN,CAAC,IAAI,OAAO,YAAY,gBAAgB,aAAa,WAAW;AAAA,EAAA;AAElE,SAAO,EAAE,OAAO,aAAa,KAAK,iBAAiB,QAAW,aAAa,KAAK,iBAAiB,OAAA;AACnG;"}