@tangle-network/agent-app 0.60.153 → 0.60.154

package/dist/studio-react/composer-option-controls.d.ts

@@ -91,6 +91,32 @@ export declare function OptionPill({ label, value, choices, onSelect, bandRef, c
         }) => ReactNode;
     };
 }): JSX.Element;
+export interface GenerationSetting {
+    key: string;
+    label: string;
+    summary: string;
+    value: ModelOptionValue | undefined;
+    choices: readonly OptionChoice[];
+    onSelect: (value: ModelOptionValue) => void;
+    icon?: LucideIcon;
+    /** A binary setting acts immediately instead of opening a two-row menu. */
+    onToggle?: () => void;
+    custom?: {
+        label: string;
+        render: (args: {
+            close: () => void;
+        }) => ReactNode;
+    };
+}
+/** The model's current defaults and optional parameters in one compact menu.
+ * The value list opens inside the panel, so no nested portal can be clipped or
+ * mistaken for an outside click. A long duration or voice list scrolls within
+ * 16rem while the rest of the settings stay in place. */
+export declare function GenerationSettings({ settings, bandRef, resetKey, }: {
+    settings: readonly GenerationSetting[];
+    bandRef: RefObject<HTMLDivElement | null>;
+    resetKey: string;
+}): JSX.Element;
 /**
  * The custom-size form the Size menu swaps to.
  *

package/dist/studio-react/index.js

@@ -127,7 +127,7 @@ import {
   Monitor,
   Ratio,
   Scaling,
-  SlidersHorizontal,
+  SlidersHorizontal as SlidersHorizontal2,
   Sparkles,
   TriangleAlert,
   Video
@@ -140,7 +140,7 @@ import {
   useId,
   useState as useState2
 } from "react";
-import { ImagePlus, Volume2, VolumeX, X } from "lucide-react";
+import { ImagePlus, SlidersHorizontal, Volume2, VolumeX, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var PILL = "inline-flex h-7 flex-none items-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-card px-2.5 text-[14px] font-medium text-foreground transition hover:bg-accent";
 var PILL_LABEL = "[text-box:trim-both_cap_alphabetic]";
@@ -403,6 +403,166 @@ function OptionPill({
     )
   ] });
 }
+function GenerationSettings({
+  settings,
+  bandRef,
+  resetKey
+}) {
+  const [open, setOpen] = useState2(false);
+  const [more, setMore] = useState2(false);
+  const [active, setActive] = useState2(null);
+  const [customOpen, setCustomOpen] = useState2(false);
+  const [focusAfterSelect, setFocusAfterSelect] = useState2(null);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId();
+  useCloseWhenScrolledOut(open, setOpen, triggerRef, bandRef);
+  useEffect2(() => {
+    setOpen(false);
+    setMore(false);
+    setActive(null);
+    setCustomOpen(false);
+    setFocusAfterSelect(null);
+  }, [resetKey]);
+  useEffect2(() => {
+    if (open) panelRef.current?.querySelector("[data-setting-key]")?.focus();
+  }, [open, panelRef]);
+  useEffect2(() => {
+    if (!focusAfterSelect) return;
+    const rows = panelRef.current?.querySelectorAll("[data-setting-key]");
+    Array.from(rows ?? []).find((row) => row.dataset.settingKey === focusAfterSelect)?.focus();
+    setFocusAfterSelect(null);
+  }, [focusAfterSelect, panelRef]);
+  const primary = settings.slice(0, 3);
+  const visible = more ? settings : primary;
+  const summary = primary.map((setting) => setting.summary).join(" \xB7 ");
+  const fullSummary = settings.map((setting) => `${setting.label}: ${setting.summary}`).join(", ");
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex flex-none", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ...triggerProps,
+        "aria-haspopup": "dialog",
+        "aria-controls": open ? panelId : void 0,
+        "aria-label": `Generation settings: ${fullSummary}`,
+        title: "Generation settings",
+        onClick: () => setOpen(!open),
+        className: PILL,
+        children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: "Settings" }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "hidden max-w-[150px] truncate text-muted-foreground @[640px]/studio-composer:inline", children: summary }),
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "h-3 w-3 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverSurface,
+      {
+        open,
+        id: panelId,
+        role: "dialog",
+        "aria-label": "Generation settings",
+        triggerRef,
+        panelRef,
+        contentKey: `${active}:${more}:${customOpen}`,
+        className: `${MENU_PANEL} w-[min(320px,calc(100vw-24px))] gap-0.5`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: MENU_HEADER, children: "Generation settings" }),
+          visible.map((setting) => {
+            const Icon = setting.icon;
+            const expanded = active === setting.key;
+            return /* @__PURE__ */ jsx("div", { children: setting.onToggle ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "data-setting-key": setting.key,
+                "aria-checked": setting.value === true,
+                "aria-label": setting.label,
+                onClick: setting.onToggle,
+                className: menuRowClass(false),
+                children: [
+                  Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }),
+                  /* @__PURE__ */ jsx("span", { children: setting.label }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-auto text-muted-foreground", children: setting.summary })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-setting-key": setting.key,
+                  "aria-expanded": expanded,
+                  "aria-label": `${setting.label}: ${setting.summary}`,
+                  onClick: () => {
+                    setActive(expanded ? null : setting.key);
+                    setCustomOpen(false);
+                  },
+                  className: menuRowClass(expanded),
+                  children: [
+                    Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }),
+                    /* @__PURE__ */ jsx("span", { children: setting.label }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-auto truncate text-muted-foreground", children: setting.summary }),
+                    /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "h-3 w-3 shrink-0 text-muted-foreground" })
+                  ]
+                }
+              ),
+              expanded && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": `${setting.label} choices`, className: "ml-5 max-h-64 overflow-y-auto overscroll-contain border-l border-border pl-1", children: customOpen && setting.custom ? setting.custom.render({ close: () => {
+                setActive(null);
+                setCustomOpen(false);
+                setFocusAfterSelect(setting.key);
+              } }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                setting.choices.map((choice, index) => /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: `${menuRowClass(choice.value === setting.value)} relative focus-within:outline focus-within:outline-2 focus-within:outline-ring`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "radio",
+                          name: `${panelId}-${setting.key}`,
+                          value: String(choice.value),
+                          checked: choice.value === setting.value,
+                          onChange: () => {
+                            setting.onSelect(choice.value);
+                            setActive(null);
+                            setFocusAfterSelect(setting.key);
+                          },
+                          className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: choice.label }),
+                      choice.value === setting.value && /* @__PURE__ */ jsx(CheckGlyph, { "aria-hidden": true, className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
+                    ]
+                  },
+                  `${String(choice.value)}-${index}`
+                )),
+                setting.custom && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCustomOpen(true), className: `${menuRowClass(false)} text-muted-foreground`, children: setting.custom.label })
+              ] }) })
+            ] }) }, setting.key);
+          }),
+          settings.length > 3 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": more,
+              onClick: () => {
+                setMore(!more);
+                setActive(null);
+                setCustomOpen(false);
+              },
+              className: `${menuRowClass(false)} text-primary`,
+              children: more ? "Less" : `More settings (${settings.length - 3})`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function CustomSizeForm({
   initial,
   onApply,
@@ -681,7 +841,7 @@ var SEGMENTS = [
   { type: "video", label: "Video", icon: Video },
   { type: "speech", label: "Audio", icon: AudioLines }
 ];
-var PILL_ORDER = {
+var PARAM_ORDER = {
   image: ["size", "quality", "n"],
   video: ["duration", "resolution", "aspect_ratio", "mode"],
   speech: ["voice", "speed"]
@@ -704,7 +864,7 @@ var PARAM_ICONS = {
   duration: Clock,
   resolution: Monitor,
   aspect_ratio: Ratio,
-  mode: SlidersHorizontal,
+  mode: SlidersHorizontal2,
   voice: Mic,
   speed: Gauge
 };
@@ -743,7 +903,7 @@ function pickerModel(model, type) {
 }
 function visibleParams(type, options) {
   if (!options) return [];
-  return PILL_ORDER[type].filter((param) => {
+  return PARAM_ORDER[type].filter((param) => {
     const meta = options[param];
     return Boolean(meta) && meta?.supported !== false;
   });
@@ -1019,6 +1179,50 @@ function StudioComposer({
   const modelDisplayName = laneDown ? "Unavailable" : modelOption?.name || modelId || "Select a model";
   const modelUnavailable = laneDown || modelOption?.status === "unavailable";
   const canReloadModels = Boolean(workspaceId) && !loadingModels && Boolean(catalogError || catalogReady && curatedModels.length === 0);
+  const settingParams = type === "video" ? ["aspect_ratio", "duration", ...params.filter((param) => param !== "aspect_ratio" && param !== "duration")].filter((param) => params.includes(param)) : params;
+  const settings = settingParams.map((param) => {
+    const value = values[param] ?? options?.[param]?.default;
+    const choices = choicesForSetting(param, options?.[param], value);
+    const label = PARAM_LABELS[param] ?? param;
+    return {
+      key: param,
+      label,
+      summary: choices.find((choice) => choice.value === value)?.label ?? "\u2014",
+      value,
+      choices,
+      onSelect: (next) => setOption(param, next),
+      icon: PARAM_ICONS[param] ?? SlidersHorizontal2,
+      ...param === "size" && supportsCustomImageSize(modelId) ? {
+        custom: {
+          label: "Custom\u2026",
+          render: ({ close }) => /* @__PURE__ */ jsx2(
+            CustomSizeForm,
+            {
+              initial: asText(value),
+              onApply: (size) => {
+                setOption("size", size);
+                close();
+              },
+              onCancel: close
+            }
+          )
+        }
+      } : {}
+    };
+  });
+  if (audioSupported) {
+    const audioOn = (values.audio ?? audioMeta?.default) === true;
+    settings.splice(Math.min(2, settings.length), 0, {
+      key: "audio",
+      label: "Audio",
+      summary: audioOn ? "Audio on" : "Audio off",
+      value: audioOn,
+      choices: [],
+      onSelect: (next) => setOption("audio", next),
+      onToggle: () => setOption("audio", !audioOn),
+      icon: AudioLines
+    });
+  }
   function reloadModels() {
     if (!workspaceId || catalogLoading || catalogPendingRef.current) return;
     catalogPendingRef.current = true;
@@ -1073,38 +1277,7 @@ function StudioComposer({
                 ] })
               }
             ) }),
-            params.map((param) => /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(
-              OptionPill,
-              {
-                label: PARAM_LABELS[param] ?? param,
-                icon: PARAM_ICONS[param] ?? SlidersHorizontal,
-                value: values[param],
-                choices: choicesForPill(param, options?.[param], values[param]),
-                onSelect: (value) => setOption(param, value),
-                bandRef,
-                custom: param === "size" && supportsCustomImageSize(modelId) ? {
-                  label: "Custom\u2026",
-                  render: ({ close }) => /* @__PURE__ */ jsx2(
-                    CustomSizeForm,
-                    {
-                      initial: asText(values.size),
-                      onApply: (size) => {
-                        setOption("size", size);
-                        close();
-                      },
-                      onCancel: close
-                    }
-                  )
-                } : void 0
-              }
-            ) }, `${type}-${param}`)),
-            audioSupported && /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(
-              AudioTogglePill,
-              {
-                on: values.audio === true,
-                onToggle: (on) => setOption("audio", on)
-              }
-            ) }, `${type}-audio`),
+            settings.length > 0 && /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(GenerationSettings, { settings, bandRef, resetKey: `${type}:${modelId}` }) }),
             referenceSupported && /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(
               ReferencePill,
               {
@@ -1140,7 +1313,7 @@ function asText(value) {
 function asWireScalar(value) {
   return typeof value === "string" || typeof value === "number" ? value : void 0;
 }
-function choicesForPill(param, meta, value) {
+function choicesForSetting(param, meta, value) {
   if (!meta) return [];
   const choices = choicesFor(param, meta).map((choice) => ({
     value: choice,
@@ -3334,6 +3507,7 @@ export {
   ComposerBand,
   CustomSizeForm,
   GenerationNoticeChip,
+  GenerationSettings,
   MediaTile,
   MediaTypeSegments,
   MediaViewerModal,