@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/data/runtime/RuntimeBarActions.cjs

@@ -13,19 +13,22 @@ function RuntimeBarActions({
   inline = true,
   menuLabel = "Runtime options",
   standalone = false,
-  className
+  className,
+  visibleCount = fields.length
 }) {
   const variant = react.useContext(RuntimeBar_context.RuntimeBarVariantContext);
   const useStandalone = standalone || variant === "combo";
-  const inlineFields = inline ? fields : [];
+  const inlineFields = inline ? fields.filter((field) => field.isSet).slice(0, visibleCount) : [];
   const menuItems = [
-    ...(inline ? [] : fields).map((field) => ({
+    ...fields.map((field) => ({
       label: field.label,
       ...field.icon ? { icon: field.icon } : {},
+      ...field.iconClassName ? { iconClassName: field.iconClassName } : {},
       // Ignored: an item with `children` is a submenu trigger, not a leaf.
       onSelect: () => {
       },
-      children: field.items
+      children: field.items,
+      ...field.header ? { header: field.header } : {}
     })),
     ...menu
   ];
@@ -35,8 +38,8 @@ function RuntimeBarActions({
     {
       "data-runtime-bar-section": "actions",
       className: utils.cn(
-        "flex h-control-h min-w-0 items-stretch",
-        useStandalone ? "w-fit overflow-hidden rounded-md border border-input bg-background" : "-ml-px -mt-px border-l border-t border-border",
+        "flex h-control-h shrink-0 items-stretch",
+        useStandalone ? variant === "combo" ? "gap-1" : "w-fit overflow-hidden rounded-md border border-input bg-background" : "border-l border-border",
         className
       ),
       children: [
@@ -46,6 +49,7 @@ function RuntimeBarActions({
             menuLabel: field.label,
             title: field.title,
             items: field.items,
+            ...field.header ? { header: field.header } : {},
             children: field.caption
           },
           field.id

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

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarActions.cjs","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { RuntimeSegment } from \"./RuntimeBarSegment\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\n/**\n * A run setting offered by the runtime bar. Its choices are `DropdownMenuItem`s\n * so the inline and collapsed renderings are the SAME list: inline it is a\n * segment's menu, collapsed it is a flyout submenu of the ⋮ menu. Anything that\n * cannot be a menu item (a multi-select, reorder buttons) belongs in a modal\n * reached from an item, not in this list.\n */\nexport type RuntimeBarAction = {\n  id: string;\n  /** Menu entry label when collapsed; also the inline segment's menu label. */\n  label: string;\n  icon?: StaticIconComponent | undefined;\n  /** Tooltip on the inline segment, e.g. \"Permission posture — Plan\". */\n  title: string;\n  /** Inline segment caption: key + glyph + current value. */\n  caption: ReactNode;\n  /** Choices, identical inline and collapsed. */\n  items: DropdownMenuItem[];\n};\n\nexport type RuntimeBarActionsProps = {\n  fields?: RuntimeBarAction[] | undefined;\n  /** Always-collapsed entries listed after the fields, e.g. Advanced. */\n  menu?: DropdownMenuItem[] | undefined;\n  /** False collapses every field into the ⋮ menu. */\n  inline?: boolean | undefined;\n  menuLabel?: string | undefined;\n  /** Renders its own bar chrome instead of fusing onto the bar's border. */\n  standalone?: boolean | undefined;\n  className?: string | undefined;\n};\n\n/**\n * The runtime bar's host-level settings plus a ⋮ menu. It fuses onto the\n * segmented bar border and becomes a separate control group in combo layouts.\n */\nexport function RuntimeBarActions({\n  fields = [],\n  menu = [],\n  inline = true,\n  menuLabel = \"Runtime options\",\n  standalone = false,\n  className,\n}: RuntimeBarActionsProps) {\n  const variant = useContext(RuntimeBarVariantContext);\n  const useStandalone = standalone || variant === \"combo\";\n  const inlineFields = inline ? fields : [];\n  const menuItems: DropdownMenuItem[] = [\n    ...(inline ? [] : fields).map((field) => ({\n      label: field.label,\n      ...(field.icon ? { icon: field.icon } : {}),\n      // Ignored: an item with `children` is a submenu trigger, not a leaf.\n      onSelect: () => {},\n      children: field.items,\n    })),\n    ...menu,\n  ];\n  if (inlineFields.length === 0 && menuItems.length === 0) return null;\n\n  return (\n    <div\n      data-runtime-bar-section=\"actions\"\n      className={cn(\n        \"flex h-control-h min-w-0 items-stretch\",\n        useStandalone\n          ? \"w-fit overflow-hidden rounded-md border border-input bg-background\"\n          : \"-ml-px -mt-px border-l border-t border-border\",\n        className,\n      )}\n    >\n      {inlineFields.map((field) => (\n        <RuntimeSegment\n          key={field.id}\n          menuLabel={field.label}\n          title={field.title}\n          items={field.items}\n        >\n          {field.caption}\n        </RuntimeSegment>\n      ))}\n      {menuItems.length > 0 && (\n        <RuntimeSegment\n          menuLabel={menuLabel}\n          title={menuLabel}\n          items={menuItems}\n          hideChevron\n        >\n          <Icon\n            icon={UiDotsVertical}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n        </RuntimeSegment>\n      )}\n    </div>\n  );\n}\n"],"names":["useContext","RuntimeBarVariantContext","jsxs","cn","jsx","RuntimeSegment","Icon","UiDotsVertical"],"mappings":";;;;;;;;;AA4CO,SAAS,kBAAkB;AAAA,EAChC,SAAS,CAAA;AAAA,EACT,OAAO,CAAA;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACF,GAA2B;AACzB,QAAM,UAAUA,MAAAA,WAAWC,2CAAwB;AACnD,QAAM,gBAAgB,cAAc,YAAY;AAChD,QAAM,eAAe,SAAS,SAAS,CAAA;AACvC,QAAM,YAAgC;AAAA,IACpC,IAAI,SAAS,CAAA,IAAK,QAAQ,IAAI,CAAC,WAAW;AAAA,MACxC,OAAO,MAAM;AAAA,MACb,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA;AAAA,MAExC,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,UAAU,MAAM;AAAA,IAAA,EAChB;AAAA,IACF,GAAG;AAAA,EAAA;AAEL,MAAI,aAAa,WAAW,KAAK,UAAU,WAAW,EAAG,QAAO;AAEhE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BAAyB;AAAA,MACzB,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,gBACI,uEACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aAAa,IAAI,CAAC,UACjBC,2BAAAA;AAAAA,UAACC,kBAAAA;AAAAA,UAAA;AAAA,YAEC,WAAW,MAAM;AAAA,YACjB,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YAEZ,UAAA,MAAM;AAAA,UAAA;AAAA,UALF,MAAM;AAAA,QAAA,CAOd;AAAA,QACA,UAAU,SAAS,KAClBD,2BAAAA;AAAAA,UAACC,kBAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,OAAO;AAAA,YACP,aAAW;AAAA,YAEX,UAAAD,2BAAAA;AAAAA,cAACE,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,eAAAA;AAAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"RuntimeBarActions.cjs","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { RuntimeSegment } from \"./RuntimeBarSegment\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\n/**\n * A run setting offered by the runtime bar. Its choices are `DropdownMenuItem`s\n * so the inline and collapsed renderings are the SAME list: inline it is a\n * segment's menu, collapsed it is a flyout submenu of the ⋮ menu. Anything that\n * cannot be a menu item (a multi-select, reorder buttons) belongs in a modal\n * reached from an item, not in this list.\n */\nexport type RuntimeBarAction = {\n  id: string;\n  /** Menu entry label when collapsed; also the inline segment's menu label. */\n  label: string;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n  /** Tooltip on the inline segment, e.g. \"Permission posture — Plan\". */\n  title: string;\n  /** Inline segment caption: key + glyph + current value. */\n  caption: ReactNode;\n  /** Only supplied settings are candidates for inline display. */\n  isSet: boolean;\n  /** Custom editor shared by the inline dropdown and overflow submenu. */\n  header?: ReactNode;\n  /** Choices, identical inline and collapsed. */\n  items: DropdownMenuItem[];\n};\n\nexport type RuntimeBarActionsProps = {\n  fields?: RuntimeBarAction[] | undefined;\n  /** Always-collapsed entries listed after the fields, e.g. Advanced. */\n  menu?: DropdownMenuItem[] | undefined;\n  /** False collapses every field into the ⋮ menu. */\n  inline?: boolean | undefined;\n  menuLabel?: string | undefined;\n  /** Renders its own bar chrome instead of fusing onto the bar's border. */\n  standalone?: boolean | undefined;\n  className?: string | undefined;\n  /** Number of supplied fields that fit beside the runtime identity. */\n  visibleCount?: number | undefined;\n};\n\n/**\n * The runtime bar's host-level settings plus a ⋮ menu. It fuses onto the\n * segmented bar border and becomes a separate control group in combo layouts.\n */\nexport function RuntimeBarActions({\n  fields = [],\n  menu = [],\n  inline = true,\n  menuLabel = \"Runtime options\",\n  standalone = false,\n  className,\n  visibleCount = fields.length,\n}: RuntimeBarActionsProps) {\n  const variant = useContext(RuntimeBarVariantContext);\n  const useStandalone = standalone || variant === \"combo\";\n  const inlineFields = inline\n    ? fields.filter((field) => field.isSet).slice(0, visibleCount)\n    : [];\n  const menuItems: DropdownMenuItem[] = [\n    ...fields.map((field) => ({\n      label: field.label,\n      ...(field.icon ? { icon: field.icon } : {}),\n      ...(field.iconClassName ? { iconClassName: field.iconClassName } : {}),\n      // Ignored: an item with `children` is a submenu trigger, not a leaf.\n      onSelect: () => {},\n      children: field.items,\n      ...(field.header ? { header: field.header } : {}),\n    })),\n    ...menu,\n  ];\n  if (inlineFields.length === 0 && menuItems.length === 0) return null;\n\n  return (\n    <div\n      data-runtime-bar-section=\"actions\"\n      className={cn(\n        \"flex h-control-h shrink-0 items-stretch\",\n        useStandalone\n          ? variant === \"combo\"\n            ? \"gap-1\"\n            : \"w-fit overflow-hidden rounded-md border border-input bg-background\"\n          : \"border-l border-border\",\n        className,\n      )}\n    >\n      {inlineFields.map((field) => (\n        <RuntimeSegment\n          key={field.id}\n          menuLabel={field.label}\n          title={field.title}\n          items={field.items}\n          {...(field.header ? { header: field.header } : {})}\n        >\n          {field.caption}\n        </RuntimeSegment>\n      ))}\n      {menuItems.length > 0 && (\n        <RuntimeSegment\n          menuLabel={menuLabel}\n          title={menuLabel}\n          items={menuItems}\n          hideChevron\n        >\n          <Icon\n            icon={UiDotsVertical}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n        </RuntimeSegment>\n      )}\n    </div>\n  );\n}\n"],"names":["useContext","RuntimeBarVariantContext","jsxs","cn","jsx","RuntimeSegment","Icon","UiDotsVertical"],"mappings":";;;;;;;;;AAmDO,SAAS,kBAAkB;AAAA,EAChC,SAAS,CAAA;AAAA,EACT,OAAO,CAAA;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA,eAAe,OAAO;AACxB,GAA2B;AACzB,QAAM,UAAUA,MAAAA,WAAWC,2CAAwB;AACnD,QAAM,gBAAgB,cAAc,YAAY;AAChD,QAAM,eAAe,SACjB,OAAO,OAAO,CAAC,UAAU,MAAM,KAAK,EAAE,MAAM,GAAG,YAAY,IAC3D,CAAA;AACJ,QAAM,YAAgC;AAAA,IACpC,GAAG,OAAO,IAAI,CAAC,WAAW;AAAA,MACxB,OAAO,MAAM;AAAA,MACb,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA,MACxC,GAAI,MAAM,gBAAgB,EAAE,eAAe,MAAM,cAAA,IAAkB,CAAA;AAAA;AAAA,MAEnE,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,UAAU,MAAM;AAAA,MAChB,GAAI,MAAM,SAAS,EAAE,QAAQ,MAAM,OAAA,IAAW,CAAA;AAAA,IAAC,EAC/C;AAAA,IACF,GAAG;AAAA,EAAA;AAEL,MAAI,aAAa,WAAW,KAAK,UAAU,WAAW,EAAG,QAAO;AAEhE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BAAyB;AAAA,MACzB,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,gBACI,YAAY,UACV,UACA,uEACF;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aAAa,IAAI,CAAC,UACjBC,2BAAAA;AAAAA,UAACC,kBAAAA;AAAAA,UAAA;AAAA,YAEC,WAAW,MAAM;AAAA,YACjB,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YACZ,GAAI,MAAM,SAAS,EAAE,QAAQ,MAAM,OAAA,IAAW,CAAA;AAAA,YAE9C,UAAA,MAAM;AAAA,UAAA;AAAA,UANF,MAAM;AAAA,QAAA,CAQd;AAAA,QACA,UAAU,SAAS,KAClBD,2BAAAA;AAAAA,UAACC,kBAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,OAAO;AAAA,YACP,aAAW;AAAA,YAEX,UAAAD,2BAAAA;AAAAA,cAACE,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,eAAAA;AAAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -13,10 +13,15 @@ export type RuntimeBarAction = {
     /** Menu entry label when collapsed; also the inline segment's menu label. */
     label: string;
     icon?: StaticIconComponent | undefined;
+    iconClassName?: string | undefined;
     /** Tooltip on the inline segment, e.g. "Permission posture — Plan". */
     title: string;
     /** Inline segment caption: key + glyph + current value. */
     caption: ReactNode;
+    /** Only supplied settings are candidates for inline display. */
+    isSet: boolean;
+    /** Custom editor shared by the inline dropdown and overflow submenu. */
+    header?: ReactNode;
     /** Choices, identical inline and collapsed. */
     items: DropdownMenuItem[];
 };
@@ -30,10 +35,12 @@ export type RuntimeBarActionsProps = {
     /** Renders its own bar chrome instead of fusing onto the bar's border. */
     standalone?: boolean | undefined;
     className?: string | undefined;
+    /** Number of supplied fields that fit beside the runtime identity. */
+    visibleCount?: number | undefined;
 };
 /**
  * The runtime bar's host-level settings plus a ⋮ menu. It fuses onto the
  * segmented bar border and becomes a separate control group in combo layouts.
  */
-export declare function RuntimeBarActions({ fields, menu, inline, menuLabel, standalone, className, }: RuntimeBarActionsProps): import("react").JSX.Element | null;
+export declare function RuntimeBarActions({ fields, menu, inline, menuLabel, standalone, className, visibleCount, }: RuntimeBarActionsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=RuntimeBarActions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarActions.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIzD;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACvC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,OAAO,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACxC,uEAAuE;IACvE,IAAI,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACtC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAW,EACX,IAAS,EACT,MAAa,EACb,SAA6B,EAC7B,UAAkB,EAClB,SAAS,GACV,EAAE,sBAAsB,sCAoDxB"}
+{"version":3,"file":"RuntimeBarActions.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIzD;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,OAAO,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,KAAK,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACxC,uEAAuE;IACvE,IAAI,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACtC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAW,EACX,IAAS,EACT,MAAa,EACb,SAA6B,EAC7B,UAAkB,EAClB,SAAS,EACT,YAA4B,GAC7B,EAAE,sBAAsB,sCA2DxB"}

package/dist/data/runtime/RuntimeBarActions.js

@@ -11,19 +11,22 @@ function RuntimeBarActions({
   inline = true,
   menuLabel = "Runtime options",
   standalone = false,
-  className
+  className,
+  visibleCount = fields.length
 }) {
   const variant = useContext(RuntimeBarVariantContext);
   const useStandalone = standalone || variant === "combo";
-  const inlineFields = inline ? fields : [];
+  const inlineFields = inline ? fields.filter((field) => field.isSet).slice(0, visibleCount) : [];
   const menuItems = [
-    ...(inline ? [] : fields).map((field) => ({
+    ...fields.map((field) => ({
       label: field.label,
       ...field.icon ? { icon: field.icon } : {},
+      ...field.iconClassName ? { iconClassName: field.iconClassName } : {},
       // Ignored: an item with `children` is a submenu trigger, not a leaf.
       onSelect: () => {
       },
-      children: field.items
+      children: field.items,
+      ...field.header ? { header: field.header } : {}
     })),
     ...menu
   ];
@@ -33,8 +36,8 @@ function RuntimeBarActions({
     {
       "data-runtime-bar-section": "actions",
       className: cn(
-        "flex h-control-h min-w-0 items-stretch",
-        useStandalone ? "w-fit overflow-hidden rounded-md border border-input bg-background" : "-ml-px -mt-px border-l border-t border-border",
+        "flex h-control-h shrink-0 items-stretch",
+        useStandalone ? variant === "combo" ? "gap-1" : "w-fit overflow-hidden rounded-md border border-input bg-background" : "border-l border-border",
         className
       ),
       children: [
@@ -44,6 +47,7 @@ function RuntimeBarActions({
             menuLabel: field.label,
             title: field.title,
             items: field.items,
+            ...field.header ? { header: field.header } : {},
             children: field.caption
           },
           field.id

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

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarActions.js","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { RuntimeSegment } from \"./RuntimeBarSegment\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\n/**\n * A run setting offered by the runtime bar. Its choices are `DropdownMenuItem`s\n * so the inline and collapsed renderings are the SAME list: inline it is a\n * segment's menu, collapsed it is a flyout submenu of the ⋮ menu. Anything that\n * cannot be a menu item (a multi-select, reorder buttons) belongs in a modal\n * reached from an item, not in this list.\n */\nexport type RuntimeBarAction = {\n  id: string;\n  /** Menu entry label when collapsed; also the inline segment's menu label. */\n  label: string;\n  icon?: StaticIconComponent | undefined;\n  /** Tooltip on the inline segment, e.g. \"Permission posture — Plan\". */\n  title: string;\n  /** Inline segment caption: key + glyph + current value. */\n  caption: ReactNode;\n  /** Choices, identical inline and collapsed. */\n  items: DropdownMenuItem[];\n};\n\nexport type RuntimeBarActionsProps = {\n  fields?: RuntimeBarAction[] | undefined;\n  /** Always-collapsed entries listed after the fields, e.g. Advanced. */\n  menu?: DropdownMenuItem[] | undefined;\n  /** False collapses every field into the ⋮ menu. */\n  inline?: boolean | undefined;\n  menuLabel?: string | undefined;\n  /** Renders its own bar chrome instead of fusing onto the bar's border. */\n  standalone?: boolean | undefined;\n  className?: string | undefined;\n};\n\n/**\n * The runtime bar's host-level settings plus a ⋮ menu. It fuses onto the\n * segmented bar border and becomes a separate control group in combo layouts.\n */\nexport function RuntimeBarActions({\n  fields = [],\n  menu = [],\n  inline = true,\n  menuLabel = \"Runtime options\",\n  standalone = false,\n  className,\n}: RuntimeBarActionsProps) {\n  const variant = useContext(RuntimeBarVariantContext);\n  const useStandalone = standalone || variant === \"combo\";\n  const inlineFields = inline ? fields : [];\n  const menuItems: DropdownMenuItem[] = [\n    ...(inline ? [] : fields).map((field) => ({\n      label: field.label,\n      ...(field.icon ? { icon: field.icon } : {}),\n      // Ignored: an item with `children` is a submenu trigger, not a leaf.\n      onSelect: () => {},\n      children: field.items,\n    })),\n    ...menu,\n  ];\n  if (inlineFields.length === 0 && menuItems.length === 0) return null;\n\n  return (\n    <div\n      data-runtime-bar-section=\"actions\"\n      className={cn(\n        \"flex h-control-h min-w-0 items-stretch\",\n        useStandalone\n          ? \"w-fit overflow-hidden rounded-md border border-input bg-background\"\n          : \"-ml-px -mt-px border-l border-t border-border\",\n        className,\n      )}\n    >\n      {inlineFields.map((field) => (\n        <RuntimeSegment\n          key={field.id}\n          menuLabel={field.label}\n          title={field.title}\n          items={field.items}\n        >\n          {field.caption}\n        </RuntimeSegment>\n      ))}\n      {menuItems.length > 0 && (\n        <RuntimeSegment\n          menuLabel={menuLabel}\n          title={menuLabel}\n          items={menuItems}\n          hideChevron\n        >\n          <Icon\n            icon={UiDotsVertical}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n        </RuntimeSegment>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA4CO,SAAS,kBAAkB;AAAA,EAChC,SAAS,CAAA;AAAA,EACT,OAAO,CAAA;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACF,GAA2B;AACzB,QAAM,UAAU,WAAW,wBAAwB;AACnD,QAAM,gBAAgB,cAAc,YAAY;AAChD,QAAM,eAAe,SAAS,SAAS,CAAA;AACvC,QAAM,YAAgC;AAAA,IACpC,IAAI,SAAS,CAAA,IAAK,QAAQ,IAAI,CAAC,WAAW;AAAA,MACxC,OAAO,MAAM;AAAA,MACb,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA;AAAA,MAExC,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,UAAU,MAAM;AAAA,IAAA,EAChB;AAAA,IACF,GAAG;AAAA,EAAA;AAEL,MAAI,aAAa,WAAW,KAAK,UAAU,WAAW,EAAG,QAAO;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BAAyB;AAAA,MACzB,WAAW;AAAA,QACT;AAAA,QACA,gBACI,uEACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aAAa,IAAI,CAAC,UACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW,MAAM;AAAA,YACjB,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YAEZ,UAAA,MAAM;AAAA,UAAA;AAAA,UALF,MAAM;AAAA,QAAA,CAOd;AAAA,QACA,UAAU,SAAS,KAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,OAAO;AAAA,YACP,aAAW;AAAA,YAEX,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"RuntimeBarActions.js","sources":["../../../src/data/runtime/RuntimeBarActions.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiDotsVertical } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { RuntimeSegment } from \"./RuntimeBarSegment\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\n/**\n * A run setting offered by the runtime bar. Its choices are `DropdownMenuItem`s\n * so the inline and collapsed renderings are the SAME list: inline it is a\n * segment's menu, collapsed it is a flyout submenu of the ⋮ menu. Anything that\n * cannot be a menu item (a multi-select, reorder buttons) belongs in a modal\n * reached from an item, not in this list.\n */\nexport type RuntimeBarAction = {\n  id: string;\n  /** Menu entry label when collapsed; also the inline segment's menu label. */\n  label: string;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n  /** Tooltip on the inline segment, e.g. \"Permission posture — Plan\". */\n  title: string;\n  /** Inline segment caption: key + glyph + current value. */\n  caption: ReactNode;\n  /** Only supplied settings are candidates for inline display. */\n  isSet: boolean;\n  /** Custom editor shared by the inline dropdown and overflow submenu. */\n  header?: ReactNode;\n  /** Choices, identical inline and collapsed. */\n  items: DropdownMenuItem[];\n};\n\nexport type RuntimeBarActionsProps = {\n  fields?: RuntimeBarAction[] | undefined;\n  /** Always-collapsed entries listed after the fields, e.g. Advanced. */\n  menu?: DropdownMenuItem[] | undefined;\n  /** False collapses every field into the ⋮ menu. */\n  inline?: boolean | undefined;\n  menuLabel?: string | undefined;\n  /** Renders its own bar chrome instead of fusing onto the bar's border. */\n  standalone?: boolean | undefined;\n  className?: string | undefined;\n  /** Number of supplied fields that fit beside the runtime identity. */\n  visibleCount?: number | undefined;\n};\n\n/**\n * The runtime bar's host-level settings plus a ⋮ menu. It fuses onto the\n * segmented bar border and becomes a separate control group in combo layouts.\n */\nexport function RuntimeBarActions({\n  fields = [],\n  menu = [],\n  inline = true,\n  menuLabel = \"Runtime options\",\n  standalone = false,\n  className,\n  visibleCount = fields.length,\n}: RuntimeBarActionsProps) {\n  const variant = useContext(RuntimeBarVariantContext);\n  const useStandalone = standalone || variant === \"combo\";\n  const inlineFields = inline\n    ? fields.filter((field) => field.isSet).slice(0, visibleCount)\n    : [];\n  const menuItems: DropdownMenuItem[] = [\n    ...fields.map((field) => ({\n      label: field.label,\n      ...(field.icon ? { icon: field.icon } : {}),\n      ...(field.iconClassName ? { iconClassName: field.iconClassName } : {}),\n      // Ignored: an item with `children` is a submenu trigger, not a leaf.\n      onSelect: () => {},\n      children: field.items,\n      ...(field.header ? { header: field.header } : {}),\n    })),\n    ...menu,\n  ];\n  if (inlineFields.length === 0 && menuItems.length === 0) return null;\n\n  return (\n    <div\n      data-runtime-bar-section=\"actions\"\n      className={cn(\n        \"flex h-control-h shrink-0 items-stretch\",\n        useStandalone\n          ? variant === \"combo\"\n            ? \"gap-1\"\n            : \"w-fit overflow-hidden rounded-md border border-input bg-background\"\n          : \"border-l border-border\",\n        className,\n      )}\n    >\n      {inlineFields.map((field) => (\n        <RuntimeSegment\n          key={field.id}\n          menuLabel={field.label}\n          title={field.title}\n          items={field.items}\n          {...(field.header ? { header: field.header } : {})}\n        >\n          {field.caption}\n        </RuntimeSegment>\n      ))}\n      {menuItems.length > 0 && (\n        <RuntimeSegment\n          menuLabel={menuLabel}\n          title={menuLabel}\n          items={menuItems}\n          hideChevron\n        >\n          <Icon\n            icon={UiDotsVertical}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n        </RuntimeSegment>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAmDO,SAAS,kBAAkB;AAAA,EAChC,SAAS,CAAA;AAAA,EACT,OAAO,CAAA;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA,eAAe,OAAO;AACxB,GAA2B;AACzB,QAAM,UAAU,WAAW,wBAAwB;AACnD,QAAM,gBAAgB,cAAc,YAAY;AAChD,QAAM,eAAe,SACjB,OAAO,OAAO,CAAC,UAAU,MAAM,KAAK,EAAE,MAAM,GAAG,YAAY,IAC3D,CAAA;AACJ,QAAM,YAAgC;AAAA,IACpC,GAAG,OAAO,IAAI,CAAC,WAAW;AAAA,MACxB,OAAO,MAAM;AAAA,MACb,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA,MACxC,GAAI,MAAM,gBAAgB,EAAE,eAAe,MAAM,cAAA,IAAkB,CAAA;AAAA;AAAA,MAEnE,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,UAAU,MAAM;AAAA,MAChB,GAAI,MAAM,SAAS,EAAE,QAAQ,MAAM,OAAA,IAAW,CAAA;AAAA,IAAC,EAC/C;AAAA,IACF,GAAG;AAAA,EAAA;AAEL,MAAI,aAAa,WAAW,KAAK,UAAU,WAAW,EAAG,QAAO;AAEhE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BAAyB;AAAA,MACzB,WAAW;AAAA,QACT;AAAA,QACA,gBACI,YAAY,UACV,UACA,uEACF;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aAAa,IAAI,CAAC,UACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW,MAAM;AAAA,YACjB,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YACZ,GAAI,MAAM,SAAS,EAAE,QAAQ,MAAM,OAAA,IAAW,CAAA;AAAA,YAE9C,UAAA,MAAM;AAAA,UAAA;AAAA,UANF,MAAM;AAAA,QAAA,CAQd;AAAA,QACA,UAAU,SAAS,KAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,OAAO;AAAA,YACP,aAAW;AAAA,YAEX,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/runtime/RuntimeBarIdentity.cjs

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

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

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

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

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

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

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

package/dist/data/runtime/RuntimeBarIdentity.js

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

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

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