@tangle-network/agent-app 0.45.66 → 0.46.2

package/dist/studio-react/index.js

@@ -1,17 +1,11 @@
 import {
-  IMAGE_QUALITIES,
-  IMAGE_SIZE_HINT,
-  IMAGE_SIZE_PATTERN,
-  MAX_IMAGE_COUNT,
-  MIN_IMAGE_COUNT,
-  VIDEO_ASPECT_RATIOS,
-  VIDEO_DURATIONS,
-  VIDEO_RESOLUTIONS,
   buildGenerationRequestBody,
+  curateComposerModels,
   failedOptimisticGeneration,
   generationError,
   generationStatus,
   generationVaultPath,
+  imageToVideoSibling,
   isGenerationType,
   isLocalGeneration,
   latestBatchOf,
@@ -20,20 +14,30 @@ import {
   modelMessage,
   normalizeImageCount,
   optimisticGeneration,
-  outputPathFor,
+  optionChoices,
   preferredModelId,
+  reconcileOptionValues,
   relativeTime,
-  selectedModelsWithDefaults,
-  userSafeGenerationMessage
-} from "../chunk-E2CWFUUP.js";
+  resolveComposerOptions,
+  supportsCustomImageSize,
+  textToVideoSibling,
+  userSafeGenerationMessage,
+  validateCustomImageSize
+} from "../chunk-2RTYQU4W.js";
 import {
-  ProviderLogo
-} from "../chunk-MLG6XKPV.js";
+  CheckGlyph,
+  ChevronDown,
+  OVERLAY_SHADOW,
+  POPOVER_OPTION_FOCUS,
+  PopoverSurface,
+  ProviderLogo,
+  usePopover
+} from "../chunk-YDOQE47G.js";
 
 // src/studio-react/studio-workspace.tsx
-import { useRef as useRef3, useState as useState3 } from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
 import { useSearchParams } from "react-router";
-import { Button as Button5 } from "@tangle-network/sandbox-ui/primitives";
+import { Button as Button4 } from "@tangle-network/sandbox-ui/primitives";
 import { Images as Images2 } from "lucide-react";
 
 // src/studio-react/use-studio-generations.ts
@@ -92,274 +96,651 @@ function useStudioGenerations(loaderGenerations, options = {}) {
   return { mergedGenerations, latestBatch, onGenerated };
 }
 
-// src/studio-react/composer-hero.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import {
-  Button,
-  Input as Input4,
-  Label as Label2,
-  Textarea,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@tangle-network/sandbox-ui/primitives";
-import { Sparkles } from "lucide-react";
+// src/studio-react/studio-composer.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { AudioLines, ArrowUp, Image as ImageIcon, Video } from "lucide-react";
 
-// src/studio-react/type-config.ts
-import { FileText, Image, Mic, User, Video } from "lucide-react";
-var MEDIA_SCRIM = "bg-black/60 text-white border-white/10";
-var IMAGE = { label: "Image", icon: Image, color: MEDIA_SCRIM };
-var TYPE_CONFIG = {
-  image: IMAGE,
-  video: { label: "Video", icon: Video, color: MEDIA_SCRIM },
-  avatar: { label: "Avatar", icon: User, color: MEDIA_SCRIM },
-  speech: { label: "Audio", icon: Mic, color: MEDIA_SCRIM },
-  transcription: { label: "Transcript", icon: FileText, color: MEDIA_SCRIM }
-};
-function typeConfigFor(type) {
-  return TYPE_CONFIG[type] ?? IMAGE;
+// src/studio-react/composer-option-controls.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId,
+  useState as useState2
+} from "react";
+import { ImagePlus, 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-[12.5px] font-medium text-foreground transition hover:bg-accent";
+var MENU_PANEL = `flex min-w-[184px] flex-col overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground ${OVERLAY_SHADOW}`;
+var MENU_HEADER = "px-2.5 pb-1 pt-1.5 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-muted-foreground";
+function menuRowClass(selected) {
+  return `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-[13px] transition ${POPOVER_OPTION_FOCUS} ${selected ? "bg-primary/10 font-medium" : "hover:bg-accent"}`;
 }
-
-// src/studio-react/composer-shell.tsx
-import { Label } from "@tangle-network/sandbox-ui/primitives";
-import { ChevronRight, Minus, Plus } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Field({
-  label,
-  htmlFor,
-  className = "space-y-1.5",
+var MAX_FADE = 32;
+function MediaTypeSegments({
+  value,
+  segments,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Media type",
+      className: "flex flex-none items-center gap-0.5 rounded-full border border-border bg-muted p-[3px]",
+      children: segments.map(({ type, label, icon: Icon }) => {
+        const active = type === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            "aria-label": label,
+            title: label,
+            onClick: () => onChange(type),
+            className: `inline-flex h-7 items-center gap-1.5 whitespace-nowrap rounded-full text-[12.5px] transition ${active ? "bg-card px-2.5 font-medium text-foreground shadow-sm" : "px-2 text-muted-foreground hover:text-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0", strokeWidth: 1.5 }),
+              active && /* @__PURE__ */ jsx("span", { children: label })
+            ]
+          },
+          type
+        );
+      })
+    }
+  );
+}
+function ComposerBand({
+  bandRef,
+  resetKey,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx(
-      Label,
-      {
-        htmlFor,
-        className: "text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground",
-        children: label
-      }
-    ),
-    children
-  ] });
+  const sync = useCallback2(() => {
+    const band = bandRef.current;
+    if (!band) return;
+    const hiddenStart = band.scrollLeft;
+    const hiddenEnd = Math.max(0, band.scrollWidth - band.clientWidth - band.scrollLeft);
+    const atStart = hiddenStart > 1;
+    const atEnd = hiddenEnd > 1;
+    band.dataset.overflow = atStart && atEnd ? "both" : atStart ? "start" : atEnd ? "end" : "none";
+    band.style.setProperty("--fade-start", `${atStart ? Math.min(MAX_FADE, hiddenStart) : 0}px`);
+    band.style.setProperty("--fade-end", `${atEnd ? Math.min(MAX_FADE, hiddenEnd) : 0}px`);
+  }, [bandRef]);
+  useEffect2(sync);
+  useEffect2(() => {
+    const band = bandRef.current;
+    window.addEventListener("resize", sync);
+    const observer = typeof ResizeObserver === "undefined" || !band ? null : new ResizeObserver(sync);
+    if (band) observer?.observe(band);
+    return () => {
+      window.removeEventListener("resize", sync);
+      observer?.disconnect();
+    };
+  }, [bandRef, sync]);
+  useEffect2(() => {
+    const band = bandRef.current;
+    if (band) band.scrollLeft = 0;
+    sync();
+  }, [bandRef, resetKey, sync]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: bandRef,
+      "data-overflow": "none",
+      onScroll: sync,
+      className: "studio-band flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-x-auto",
+      children
+    }
+  );
+}
+function useCloseWhenScrolledOut(open, setOpen, triggerRef, bandRef) {
+  useEffect2(() => {
+    const band = bandRef.current;
+    if (!open || !band) return;
+    const onScroll = () => {
+      const trigger = triggerRef.current;
+      if (!trigger) return;
+      const anchor = trigger.getBoundingClientRect();
+      const box = band.getBoundingClientRect();
+      const centre = anchor.left + anchor.width / 2;
+      if (centre < box.left || centre > box.right) setOpen(false);
+    };
+    band.addEventListener("scroll", onScroll);
+    return () => band.removeEventListener("scroll", onScroll);
+  }, [bandRef, open, setOpen, triggerRef]);
 }
-function Stepper({
+function OptionPill({
+  label,
   value,
-  min,
-  max,
-  onChange
+  choices,
+  onSelect,
+  bandRef,
+  custom
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center justify-between rounded-md border border-input bg-background px-1.5", children: [
-    /* @__PURE__ */ jsx(
+  const [open, setOpen] = useState2(false);
+  const [customOpen, setCustomOpen] = useState2(false);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId();
+  useCloseWhenScrolledOut(open, setOpen, triggerRef, bandRef);
+  const selected = choices.find((choice) => choice.value === value);
+  const close = () => {
+    setOpen(false);
+    setCustomOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex flex-none", children: [
+    /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        "aria-label": "Decrease",
-        onClick: () => onChange(Math.max(min, value - 1)),
-        disabled: value <= min,
-        className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
-        children: /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5" })
+        ...triggerProps,
+        "aria-controls": open ? panelId : void 0,
+        title: label,
+        "aria-label": `${label}: ${selected?.label ?? "not set"}`,
+        onClick: () => {
+          setCustomOpen(false);
+          setOpen(!open);
+        },
+        className: PILL,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: selected?.label ?? "\u2014" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tabular-nums", children: value }),
-    /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsxs(
+      PopoverSurface,
       {
-        type: "button",
-        "aria-label": "Increase",
-        onClick: () => onChange(Math.min(max, value + 1)),
-        disabled: value >= max,
-        className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
-        children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
+        open,
+        id: panelId,
+        role: customOpen ? void 0 : "menu",
+        triggerRef,
+        panelRef,
+        className: MENU_PANEL,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: MENU_HEADER, children: label }),
+          customOpen && custom ? custom.render({ close }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            choices.map((choice) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": choice.value === value,
+                onClick: () => {
+                  onSelect(choice.value);
+                  close();
+                },
+                className: menuRowClass(choice.value === value),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: choice.label }),
+                  choice.value === value && /* @__PURE__ */ jsx(CheckGlyph, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
+                ]
+              },
+              String(choice.value)
+            )),
+            custom && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCustomOpen(true),
+                className: `${menuRowClass(false)} text-muted-foreground`,
+                children: custom.label
+              }
+            )
+          ] })
+        ]
       }
     )
   ] });
 }
-function ComposerDisclosure({ summary, children }) {
-  return /* @__PURE__ */ jsxs("details", { className: "group rounded-lg border border-border bg-background transition-colors", children: [
-    /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-1.5 px-3 py-2.5 text-xs font-medium text-foreground/80 transition-colors hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-open:rotate-90" }),
-      summary
+function CustomSizeForm({
+  initial,
+  onApply,
+  onCancel
+}) {
+  const parsed = /^(\d+)x(\d+)$/.exec(initial ?? "");
+  const [width, setWidth] = useState2(parsed?.[1] ?? "");
+  const [height, setHeight] = useState2(parsed?.[2] ?? "");
+  const [error, setError] = useState2(null);
+  const fieldClass = "h-8 w-[74px] rounded-md border border-input bg-background px-2 text-[13px] tabular-nums";
+  function apply() {
+    const verdict = validateCustomImageSize(Number(width), Number(height));
+    if (!verdict.ok) {
+      setError(verdict.reason);
+      return;
+    }
+    onApply(`${Number(width)}x${Number(height)}`);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-[228px] flex-col gap-2 p-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: width,
+          "aria-label": "Custom width",
+          onChange: (event) => {
+            setWidth(event.target.value);
+            setError(null);
+          },
+          className: fieldClass
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\xD7" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: height,
+          "aria-label": "Custom height",
+          onChange: (event) => {
+            setHeight(event.target.value);
+            setError(null);
+          },
+          className: fieldClass
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-3", children })
+    error ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-destructive", children: error }) : /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: "Multiples of 16, long edge up to 3840, ratio between 1:3 and 3:1." }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-md px-2.5 py-1 text-[12.5px] font-medium text-muted-foreground transition hover:bg-accent hover:text-foreground",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: apply,
+          className: "rounded-md bg-primary px-2.5 py-1 text-[12.5px] font-medium text-primary-foreground transition hover:opacity-90",
+          children: "Apply"
+        }
+      )
+    ] })
   ] });
 }
-function NativeSelect(props) {
-  return /* @__PURE__ */ jsx("select", { ...props, className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm" });
+function AudioTogglePill({ on, onToggle }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": on,
+      title: "Audio",
+      onClick: () => onToggle(!on),
+      className: `${PILL} ${on ? "" : "text-muted-foreground"}`,
+      children: [
+        on ? /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4 shrink-0", strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(VolumeX, { className: "h-4 w-4 shrink-0", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("span", { children: on ? "Audio on" : "Audio off" })
+      ]
+    }
+  );
 }
-
-// src/studio-react/image-composer.tsx
-import { Input } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function ImageComposer({
-  size,
-  quality,
-  imageCount,
-  onSizeChange,
-  onQualityChange,
-  onImageCountChange
+function ReferencePill({
+  url,
+  onAttach,
+  onRemove,
+  pick,
+  bandRef
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ jsx2(Field, { label: "Size", children: /* @__PURE__ */ jsx2(
-        Input,
+  const [open, setOpen] = useState2(false);
+  const [draft, setDraft] = useState2("");
+  const [error, setError] = useState2(null);
+  const { containerRef, triggerRef, panelRef } = usePopover(open, setOpen);
+  const panelId = useId();
+  useCloseWhenScrolledOut(open, setOpen, triggerRef, bandRef);
+  if (url) {
+    return /* @__PURE__ */ jsxs("div", { className: `${PILL} border-primary bg-primary/10 pr-1.5 text-primary hover:bg-primary/10`, children: [
+      /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "h-[18px] w-[18px] shrink-0 rounded-[5px] object-cover" }),
+      /* @__PURE__ */ jsx("span", { children: "Reference" }),
+      /* @__PURE__ */ jsx(
+        "button",
         {
-          value: size,
-          onChange: (event) => onSizeChange(event.target.value),
-          pattern: IMAGE_SIZE_PATTERN,
-          placeholder: IMAGE_SIZE_HINT,
-          className: "bg-background"
+          type: "button",
+          "aria-label": "Remove reference image",
+          onClick: onRemove,
+          className: "ml-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition hover:bg-primary/20",
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", strokeWidth: 2 })
         }
-      ) }),
-      /* @__PURE__ */ jsx2(Field, { label: "Quality", children: /* @__PURE__ */ jsx2(NativeSelect, { value: quality, onChange: (event) => onQualityChange(event.target.value), children: IMAGE_QUALITIES.map((option) => /* @__PURE__ */ jsx2("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option)) }) })
-    ] }),
-    /* @__PURE__ */ jsx2(Field, { label: "Images", children: /* @__PURE__ */ jsx2(
-      Stepper,
+      )
+    ] });
+  }
+  function attach() {
+    const value = draft.trim();
+    if (!/^https?:\/\//i.test(value)) {
+      setError("Enter a URL starting with http:// or https://");
+      return;
+    }
+    onAttach(value);
+    setDraft("");
+    setError(null);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex flex-none", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        value: imageCount,
-        min: MIN_IMAGE_COUNT,
-        max: MAX_IMAGE_COUNT,
-        onChange: (value) => onImageCountChange(normalizeImageCount(value))
+        type: "button",
+        ref: triggerRef,
+        ...pick ? {} : { "aria-haspopup": true, "aria-expanded": open, "aria-controls": open ? panelId : void 0 },
+        title: "Reference image",
+        onClick: () => {
+          if (!pick) {
+            setOpen(!open);
+            return;
+          }
+          void pick().then((picked) => {
+            if (picked) onAttach(picked);
+          });
+        },
+        className: PILL,
+        children: [
+          /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("span", { children: "Reference image" })
+        ]
       }
-    ) })
+    ),
+    !pick && /* @__PURE__ */ jsxs(
+      PopoverSurface,
+      {
+        open,
+        id: panelId,
+        triggerRef,
+        panelRef,
+        className: MENU_PANEL,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: MENU_HEADER, children: "Reference image" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-[260px] flex-col gap-2 p-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "url",
+                value: draft,
+                "aria-label": "Reference image URL",
+                placeholder: "https://\u2026",
+                onChange: (event) => {
+                  setDraft(event.target.value);
+                  setError(null);
+                },
+                className: "h-8 w-full rounded-md border border-input bg-background px-2 text-[13px]"
+              }
+            ),
+            error && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-destructive", children: error }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setOpen(false),
+                  className: "rounded-md px-2.5 py-1 text-[12.5px] font-medium text-muted-foreground transition hover:bg-accent hover:text-foreground",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: attach,
+                  className: "rounded-md bg-primary px-2.5 py-1 text-[12.5px] font-medium text-primary-foreground transition hover:opacity-90",
+                  children: "Attach"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 }
-
-// src/studio-react/video-composer.tsx
-import { Input as Input2 } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function VideoComposer({
-  duration,
-  resolution,
-  aspectRatio,
-  referenceImageUrl,
-  onDurationChange,
-  onResolutionChange,
-  onAspectRatioChange,
-  onReferenceImageUrlChange
+function ModelPill({
+  models,
+  value,
+  displayName,
+  provider,
+  onSelect,
+  bandRef
 }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
-    /* @__PURE__ */ jsx3(Field, { label: "Duration (s)", children: /* @__PURE__ */ jsx3(NativeSelect, { value: duration, onChange: (event) => onDurationChange(event.target.value), children: VIDEO_DURATIONS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Resolution", children: /* @__PURE__ */ jsx3(NativeSelect, { value: resolution, onChange: (event) => onResolutionChange(event.target.value), children: VIDEO_RESOLUTIONS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Aspect ratio", children: /* @__PURE__ */ jsx3(NativeSelect, { value: aspectRatio, onChange: (event) => onAspectRatioChange(event.target.value), children: VIDEO_ASPECT_RATIOS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Reference image URL", children: /* @__PURE__ */ jsx3(Input2, { value: referenceImageUrl, onChange: (event) => onReferenceImageUrlChange(event.target.value), className: "bg-background" }) })
+  const [open, setOpen] = useState2(false);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId();
+  useCloseWhenScrolledOut(open, setOpen, triggerRef, bandRef);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex flex-none", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ...triggerProps,
+        "aria-controls": open ? panelId : void 0,
+        title: "Model",
+        "aria-label": `Model: ${displayName}`,
+        onClick: () => setOpen(!open),
+        className: PILL,
+        children: [
+          provider && /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 14 }),
+          /* @__PURE__ */ jsx("span", { className: "max-w-[168px] truncate", children: displayName }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverSurface,
+      {
+        open,
+        id: panelId,
+        role: "menu",
+        triggerRef,
+        panelRef,
+        className: `${MENU_PANEL} max-w-[320px]`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: MENU_HEADER, children: "Model" }),
+          models.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2.5 py-2 text-[13px] text-muted-foreground", children: "No models are available for this media type." }),
+          models.map((model) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": model.id === value,
+              disabled: model.status === "unavailable",
+              onClick: () => {
+                onSelect(model.id);
+                setOpen(false);
+              },
+              className: `${menuRowClass(model.id === value)} disabled:opacity-50`,
+              children: [
+                model.provider && /* @__PURE__ */ jsx(ProviderLogo, { provider: model.provider, size: 14 }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: model.name || model.id }),
+                model.status !== "available" && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[11px] capitalize text-muted-foreground", children: model.status }),
+                model.id === value && /* @__PURE__ */ jsx(CheckGlyph, { className: `${model.status === "available" ? "ml-auto " : ""}h-3.5 w-3.5 shrink-0 text-primary` })
+              ]
+            },
+            model.id
+          ))
+        ]
+      }
+    )
   ] });
 }
-
-// src/studio-react/speech-composer.tsx
-import { Input as Input3 } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function SpeechComposer({
-  voice,
-  onVoiceChange
-}) {
-  return /* @__PURE__ */ jsx4(Field, { label: "Voice", children: /* @__PURE__ */ jsx4(Input3, { value: voice, onChange: (event) => onVoiceChange(event.target.value), className: "bg-background" }) });
+function optionValueLabel(param, value) {
+  if (typeof value === "boolean") return value ? "On" : "Off";
+  const text = String(value);
+  if (param === "n") return `\xD7${text}`;
+  if (param === "speed") return `${text}\xD7`;
+  if (text === "auto") return "Auto";
+  if (param === "duration") return /^\d+(\.\d+)?$/.test(text) ? `${text}s` : text;
+  if (param === "size") {
+    const size = /^(\d+)x(\d+)$/.exec(text);
+    return size ? `${size[1]}\xD7${size[2]}` : text;
+  }
+  if (param === "resolution" || param === "aspect_ratio") return text;
+  return text.charAt(0).toUpperCase() + text.slice(1);
 }
 
-// src/studio-react/composer-hero.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var COMPOSER_TYPES = ["image", "video", "speech"];
-var SUGGESTIONS = [
-  {
-    label: "Storyboard frame",
-    type: "image",
-    prompt: "A vertical storyboard frame for a product launch teaser \u2014 dark cinematic lighting, sleek studio aesthetic, 9:16 composition."
-  },
-  {
-    label: "Launch teaser clip",
-    type: "video",
-    prompt: "A 6-second vertical launch teaser: animated product reveal, dynamic camera move, hero music swell."
-  },
-  {
-    label: "Scratch voiceover",
-    type: "speech",
-    prompt: "A confident 12-second scratch voiceover for a product launch teaser: warm tone, conversational pace."
-  }
+// src/studio-react/studio-composer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SEGMENTS = [
+  { type: "image", label: "Image", icon: ImageIcon },
+  { type: "video", label: "Video", icon: Video },
+  { type: "speech", label: "Audio", icon: AudioLines }
 ];
-function ComposerHero({
+var PILL_ORDER = {
+  image: ["size", "quality", "n"],
+  video: ["duration", "resolution", "aspect_ratio", "mode"],
+  speech: ["voice", "speed"]
+};
+var PARAM_LABELS = {
+  size: "Size",
+  quality: "Quality",
+  n: "Count",
+  duration: "Duration",
+  resolution: "Resolution",
+  aspect_ratio: "Aspect",
+  mode: "Mode",
+  voice: "Voice",
+  speed: "Speed"
+};
+var SPEED_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4];
+function choicesFor(param, meta) {
+  const { min, max } = meta;
+  if (param === "speed" && !meta.values && min != null && max != null) {
+    return SPEED_PRESETS.filter((speed) => speed >= min && speed <= max);
+  }
+  return optionChoices(meta);
+}
+function visibleParams(type, options) {
+  if (!options) return [];
+  return PILL_ORDER[type].filter((param) => {
+    const meta = options[param];
+    return Boolean(meta) && meta?.supported !== false;
+  });
+}
+function defaultModelId(type, catalog, curated) {
+  const preferred = preferredModelId(type, catalog);
+  if (preferred && curated.some((model) => model.id === preferred)) return preferred;
+  return curated.find((model) => model.status !== "unavailable")?.id ?? curated[0]?.id ?? "";
+}
+function StudioComposer({
   workspaceId,
-  align = "start",
-  surfaceClassName = "bg-card",
-  onGenerated
+  onGenerated,
+  variant = "home",
+  pickReferenceImage,
+  className
 }) {
-  const [type, setType] = useState2("image");
-  const [prompt, setPrompt] = useState2("");
-  const [negativePrompt, setNegativePrompt] = useState2("");
-  const [outputPath, setOutputPath] = useState2(outputPathFor("image"));
-  const [size, setSize] = useState2("1536x1024");
-  const [quality, setQuality] = useState2("high");
-  const [imageCount, setImageCount] = useState2(1);
-  const [duration, setDuration] = useState2("6");
-  const [resolution, setResolution] = useState2("720p");
-  const [aspectRatio, setAspectRatio] = useState2("16:9");
-  const [referenceImageUrl, setReferenceImageUrl] = useState2("");
-  const [voice, setVoice] = useState2("alloy");
-  const [mediaModels, setMediaModels] = useState2(null);
-  const [mediaModelsLoading, setMediaModelsLoading] = useState2(false);
-  const [mediaModelsError, setMediaModelsError] = useState2(null);
-  const [selectedModels, setSelectedModels] = useState2({});
+  const [type, setType] = useState3("image");
+  const [prompt, setPrompt] = useState3("");
+  const [catalog, setCatalog] = useState3(null);
+  const [catalogLoading, setCatalogLoading] = useState3(false);
+  const [catalogError, setCatalogError] = useState3(null);
+  const [selectedModels, setSelectedModels] = useState3({});
+  const [optionValues, setOptionValues] = useState3({
+    image: {},
+    video: {},
+    speech: {}
+  });
+  const [referenceImageUrl, setReferenceImageUrl] = useState3(null);
+  const [isSubmitting, setIsSubmitting] = useState3(false);
+  const [error, setError] = useState3(null);
   const submitLockRef = useRef2(false);
-  const [isSubmitting, setIsSubmitting] = useState2(false);
-  const [error, setError] = useState2(null);
-  const modelsForType = mediaModels?.models[type] ?? [];
-  const selectedModel = selectedModels[type] ?? preferredModelId(type, mediaModels) ?? "";
-  const selectedModelOption = modelsForType.find((model) => model.id === selectedModel);
-  const modelReady = Boolean(selectedModelOption) && selectedModelOption?.status !== "unavailable" && !mediaModelsLoading && !mediaModelsError;
-  const hasRequiredInput = Boolean(prompt.trim());
-  const canSubmit = Boolean(workspaceId) && modelReady && hasRequiredInput && !isSubmitting;
-  useEffect2(() => {
+  const bandRef = useRef2(null);
+  useEffect3(() => {
     if (!workspaceId) return;
     let cancelled = false;
-    setMediaModelsLoading(true);
-    setMediaModelsError(null);
+    setCatalogLoading(true);
+    setCatalogError(null);
     fetch(`/api/media-models?workspaceId=${encodeURIComponent(workspaceId)}`).then(async (res) => {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error ?? "Could not load media models");
       return data;
     }).then((data) => {
       if (cancelled) return;
-      setMediaModels(data);
-      setSelectedModels((current) => selectedModelsWithDefaults(current, data));
+      setCatalog(data);
     }).catch(() => {
       if (cancelled) return;
-      setMediaModels(null);
-      setMediaModelsError("Could not load media models");
+      setCatalog(null);
+      setCatalogError("Could not load media models");
     }).finally(() => {
-      if (!cancelled) setMediaModelsLoading(false);
+      if (!cancelled) setCatalogLoading(false);
     });
     return () => {
       cancelled = true;
     };
   }, [workspaceId]);
-  function changeType(next) {
-    setType(next);
-    setOutputPath(outputPathFor(next));
+  const laneModels = useMemo2(() => catalog?.models[type] ?? [], [catalog, type]);
+  const curatedModels = useMemo2(() => curateComposerModels(type, laneModels), [laneModels, type]);
+  const retained = selectedModels[type];
+  const retainedUsable = retained !== void 0 && (!catalog || Boolean(textToVideoSibling(retained)) || curatedModels.some((model) => model.id === retained && model.status !== "unavailable"));
+  const modelId = retainedUsable ? retained : defaultModelId(type, catalog, curatedModels);
+  const modelOption = laneModels.find((model) => model.id === modelId);
+  const options = useMemo2(
+    () => modelId ? resolveComposerOptions({
+      type,
+      modelId,
+      provider: modelOption?.provider,
+      catalogOptions: modelOption?.options
+    }) : void 0,
+    [modelId, modelOption, type]
+  );
+  useEffect3(() => {
+    setOptionValues((current) => {
+      const next = reconcileOptionValues(options, current[type], {
+        allowCustomSize: supportsCustomImageSize(modelId)
+      });
+      const unchanged = Object.keys(next).length === Object.keys(current[type]).length && Object.entries(next).every(([key, value]) => current[type][key] === value);
+      return unchanged ? current : { ...current, [type]: next };
+    });
+  }, [modelId, options, type]);
+  const values = optionValues[type];
+  const params = visibleParams(type, options);
+  const audioMeta = type === "video" ? options?.audio : void 0;
+  const audioSupported = Boolean(audioMeta) && audioMeta?.supported !== false;
+  const unlistedSibling = !modelOption && Boolean(textToVideoSibling(modelId));
+  const referenceSupported = type === "video" && Boolean(imageToVideoSibling(modelId) ?? textToVideoSibling(modelId));
+  const modelReady = (Boolean(modelOption) || unlistedSibling) && modelOption?.status !== "unavailable" && !catalogLoading && !catalogError;
+  const canSubmit = Boolean(workspaceId) && modelReady && Boolean(prompt.trim()) && !isSubmitting;
+  function selectModel(id) {
+    setSelectedModels((current) => ({ ...current, [type]: id }));
+  }
+  function chooseModel(id) {
+    if (!referenceImageUrl || type !== "video") return selectModel(id);
+    const sibling = imageToVideoSibling(id);
+    if (sibling) return selectModel(sibling);
+    if (!textToVideoSibling(id)) setReferenceImageUrl(null);
+    return selectModel(id);
+  }
+  function setOption(param, value) {
+    setOptionValues((current) => ({ ...current, [type]: { ...current[type], [param]: value } }));
+  }
+  function attachReference(url) {
+    setReferenceImageUrl(url);
+    const sibling = imageToVideoSibling(modelId);
+    if (sibling) selectModel(sibling);
+  }
+  function removeReference() {
+    setReferenceImageUrl(null);
+    const sibling = textToVideoSibling(modelId);
+    if (sibling) selectModel(sibling);
   }
   async function generate() {
-    if (!workspaceId || submitLockRef.current) return;
+    if (!workspaceId || submitLockRef.current || isSubmitting) return;
     const promptText = prompt.trim();
-    if (!promptText) {
-      setError("prompt is required");
-      return;
-    }
-    if (!selectedModelOption || selectedModelOption.status === "unavailable") {
-      setError(`Select an available ${typeConfigFor(type).label} model`);
+    if (!promptText) return;
+    if (!modelReady) {
+      if (!catalogLoading) setError("Select an available model");
       return;
     }
     submitLockRef.current = true;
     setIsSubmitting(true);
     setError(null);
     const clientRequestId = crypto.randomUUID();
-    const requestedImageCount = type === "image" ? normalizeImageCount(imageCount) : 1;
-    if (type === "image" && requestedImageCount !== imageCount) setImageCount(requestedImageCount);
-    const localGenerations = Array.from({ length: requestedImageCount }, (_, outputIndex) => optimisticGeneration({
+    const imageCount = type === "image" ? normalizeImageCount(values.n ?? 1) : 1;
+    const localGenerations = Array.from({ length: imageCount }, (_, outputIndex) => optimisticGeneration({
       type,
       prompt: promptText,
-      model: selectedModel,
+      model: modelId,
       clientRequestId,
       outputIndex: type === "image" ? outputIndex : void 0,
-      outputCount: type === "image" ? requestedImageCount : void 0
+      outputCount: type === "image" ? imageCount : void 0
     }));
     localGenerations.slice().reverse().forEach(onGenerated);
     setPrompt("");
@@ -369,13 +750,29 @@ function ComposerHero({
         workspaceId,
         clientRequestId,
         type,
-        model: selectedModel,
-        prompt,
-        negativePrompt,
-        outputPath,
-        image: { size, quality, count: requestedImageCount },
-        video: { duration, resolution, aspectRatio, referenceImageUrl },
-        speech: { voice }
+        model: modelId,
+        prompt: promptText,
+        // `duration`, `audio` and `speed` go on the wire in the TYPE the model
+        // published them in — a `duration` of `'5'` that arrives as `5` is a
+        // different request, and the three providers behind this lane disagree
+        // about which is right. An absent value is omitted, never defaulted.
+        image: {
+          size: asText(values.size),
+          quality: asText(values.quality),
+          count: imageCount
+        },
+        video: {
+          duration: asWireScalar(values.duration),
+          resolution: asText(values.resolution),
+          aspectRatio: asText(values.aspect_ratio),
+          referenceImageUrl: referenceSupported && referenceImageUrl ? referenceImageUrl : void 0,
+          audio: audioSupported && typeof values.audio === "boolean" ? values.audio : void 0,
+          mode: asText(values.mode)
+        },
+        speech: {
+          voice: asText(values.voice),
+          speed: typeof values.speed === "number" ? values.speed : void 0
+        }
       });
       const res = await fetch("/api/generate", {
         method: "POST",
@@ -397,192 +794,164 @@ function ComposerHero({
       setIsSubmitting(false);
     }
   }
-  const mediaTypes = COMPOSER_TYPES.map((key) => [key, typeConfigFor(key)]);
-  return /* @__PURE__ */ jsxs4("section", { className: `rounded-2xl border border-border p-5 shadow-sm ${surfaceClassName}`, children: [
-    /* @__PURE__ */ jsx5("div", { className: `mb-5 ${align === "center" ? "text-center" : "text-left"}`, children: /* @__PURE__ */ jsx5(
-      "h2",
-      {
-        className: `font-semibold tracking-tight text-foreground transition-all duration-300 ${align === "center" ? "text-xl" : "text-base"}`,
-        children: "Media Generation"
-      }
-    ) }),
-    /* @__PURE__ */ jsx5("div", { role: "tablist", "aria-label": "Generation type", className: "grid grid-cols-3 gap-1.5", children: mediaTypes.map(([key, cfg]) => {
-      const Icon = cfg.icon;
-      const active = type === key;
-      return /* @__PURE__ */ jsxs4(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          "aria-selected": active,
-          onClick: () => changeType(key),
-          className: `flex flex-col items-center gap-1.5 rounded-lg border px-1 pb-2 pt-2.5 text-xs transition-all ${active ? "border-primary/30 bg-primary/10 font-semibold text-primary" : "border-border bg-background font-medium text-muted-foreground hover:border-foreground/20 hover:text-foreground"}`,
-          children: [
-            /* @__PURE__ */ jsx5(Icon, { className: "h-[17px] w-[17px] shrink-0" }),
-            /* @__PURE__ */ jsx5("span", { className: "truncate", children: cfg.label })
-          ]
-        },
-        key
-      );
-    }) }),
-    /* @__PURE__ */ jsxs4("div", { className: "mt-5", children: [
-      /* @__PURE__ */ jsx5(
-        Label2,
-        {
-          htmlFor: "studio-prompt",
-          className: "mb-1.5 block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground",
-          children: "Prompt"
-        }
-      ),
-      /* @__PURE__ */ jsxs4("div", { className: "rounded-xl border border-border bg-background transition-colors focus-within:border-primary/30 focus-within:ring-[3px] focus-within:ring-primary/10", children: [
-        /* @__PURE__ */ jsx5(
+  const statusMessage = unlistedSibling ? null : modelMessage(modelOption, catalogLoading, curatedModels.length);
+  const notice = catalogError ?? error ?? statusMessage;
+  const noticeIsProblem = Boolean(catalogError || error || modelOption?.status === "unavailable");
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      "data-variant": variant,
+      className: `rounded-[14px] border border-border bg-card px-2.5 pb-[9px] pt-2 shadow-sm transition focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/30 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx2(
           "textarea",
           {
-            id: "studio-prompt",
             value: prompt,
             onChange: (event) => setPrompt(event.target.value),
             onKeyDown: (event) => {
-              if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                void generate();
-              }
+              if (event.key !== "Enter" || event.shiftKey) return;
+              event.preventDefault();
+              void generate();
             },
-            rows: 4,
-            placeholder: "A vertical hero frame for a product launch teaser, dark cinematic lighting...",
-            className: "block min-h-[96px] w-full resize-none border-0 bg-transparent px-3.5 pb-1.5 pt-3 text-sm leading-relaxed outline-none placeholder:text-muted-foreground"
+            rows: 3,
+            "aria-label": "Prompt",
+            placeholder: "Describe what you want to generate\u2026",
+            className: "block min-h-[66px] w-full resize-none border-0 bg-transparent px-1.5 pb-1 pt-1.5 text-[14.5px] leading-relaxed outline-none placeholder:text-muted-foreground"
           }
         ),
-        /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center gap-1.5 px-2.5 pb-2.5", children: SUGGESTIONS.map((suggestion) => /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setPrompt(suggestion.prompt);
-              changeType(suggestion.type);
-            },
-            className: "rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/30 hover:text-primary",
-            children: suggestion.label
-          },
-          suggestion.label
-        )) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "mt-5 space-y-3", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx5(Field, { label: "Model", htmlFor: "studio-media-model", children: /* @__PURE__ */ jsxs4(
-          Select,
-          {
-            value: selectedModel || void 0,
-            onValueChange: (value) => setSelectedModels((current) => ({ ...current, [type]: value })),
-            disabled: mediaModelsLoading || Boolean(mediaModelsError) || modelsForType.length === 0,
-            children: [
-              /* @__PURE__ */ jsx5(SelectTrigger, { id: "studio-media-model", className: "h-9 w-full bg-background", children: selectedModelOption ? /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-2", children: [
-                selectedModelOption.provider && /* @__PURE__ */ jsx5(ProviderLogo, { provider: selectedModelOption.provider, size: 14 }),
-                /* @__PURE__ */ jsx5("span", { className: "truncate", children: selectedModelOption.name || selectedModelOption.id }),
-                selectedModelOption.provider && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 text-muted-foreground", children: [
-                  "\xB7 ",
-                  selectedModelOption.provider
-                ] }),
-                selectedModelOption.status !== "available" && /* @__PURE__ */ jsx5("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 text-xs font-semibold uppercase tracking-[0.05em] text-warning", children: selectedModelOption.status })
-              ] }) : /* @__PURE__ */ jsx5(SelectValue, { placeholder: mediaModelsLoading ? "Loading models\u2026" : "Select a model" }) }),
-              /* @__PURE__ */ jsx5(SelectContent, { className: "bg-background", children: modelsForType.map((model) => /* @__PURE__ */ jsx5(SelectItem, { value: model.id, disabled: model.status === "unavailable", children: /* @__PURE__ */ jsxs4("span", { className: "flex w-full items-center justify-between gap-3", children: [
-                /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  model.provider && /* @__PURE__ */ jsx5(ProviderLogo, { provider: model.provider, size: 14 }),
-                  /* @__PURE__ */ jsxs4("span", { className: "truncate", children: [
-                    model.name || model.id,
-                    model.provider ? ` \xB7 ${model.provider}` : ""
-                  ] })
-                ] }),
-                model.status !== "available" && /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs capitalize text-muted-foreground", children: model.status })
-              ] }) }, model.id)) })
-            ]
-          }
-        ) }),
-        (mediaModelsError || modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length)) && /* @__PURE__ */ jsx5("p", { className: `text-xs ${mediaModelsError || selectedModelOption?.status === "unavailable" ? "text-destructive" : "text-muted-foreground"}`, children: mediaModelsError ?? modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length) })
-      ] }),
-      type === "image" && /* @__PURE__ */ jsx5(
-        ImageComposer,
-        {
-          size,
-          quality,
-          imageCount,
-          onSizeChange: setSize,
-          onQualityChange: setQuality,
-          onImageCountChange: setImageCount
-        }
-      ),
-      type === "video" && /* @__PURE__ */ jsx5(
-        VideoComposer,
-        {
-          duration,
-          resolution,
-          aspectRatio,
-          referenceImageUrl,
-          onDurationChange: setDuration,
-          onResolutionChange: setResolution,
-          onAspectRatioChange: setAspectRatio,
-          onReferenceImageUrlChange: setReferenceImageUrl
-        }
-      ),
-      type === "speech" && /* @__PURE__ */ jsx5(SpeechComposer, { voice, onVoiceChange: setVoice })
-    ] }),
-    /* @__PURE__ */ jsx5("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ jsx5(ComposerDisclosure, { summary: "Advanced options", children: /* @__PURE__ */ jsxs4("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-      /* @__PURE__ */ jsx5(Field, { label: "Negative prompt", children: /* @__PURE__ */ jsx5(
-        Textarea,
-        {
-          value: negativePrompt,
-          onChange: (event) => setNegativePrompt(event.target.value),
-          rows: 2,
-          placeholder: "Avoid artifacts, off-style composition...",
-          className: "bg-background"
-        }
-      ) }),
-      /* @__PURE__ */ jsx5(Field, { label: "Save to", children: /* @__PURE__ */ jsx5(Input4, { value: outputPath, onChange: (event) => setOutputPath(event.target.value), className: "bg-background" }) })
-    ] }) }) }),
-    error && /* @__PURE__ */ jsx5("div", { className: "mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsxs4(
-      Button,
-      {
-        onClick: generate,
-        disabled: !canSubmit,
-        size: "lg",
-        className: "mt-5 w-full disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
-        children: [
-          /* @__PURE__ */ jsx5(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Generate",
-          /* @__PURE__ */ jsx5("span", { className: "ml-2 text-xs opacity-60", children: "\u2318\u21B5" })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(MediaTypeSegments, { value: type, segments: SEGMENTS, onChange: setType }),
+          /* @__PURE__ */ jsxs2(ComposerBand, { bandRef, resetKey: type, children: [
+            /* @__PURE__ */ jsx2(
+              ModelPill,
+              {
+                models: curatedModels,
+                value: modelId,
+                displayName: modelOption?.name || modelId || "Select a model",
+                provider: modelOption?.provider,
+                onSelect: chooseModel,
+                bandRef
+              }
+            ),
+            params.map((param) => /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(
+              OptionPill,
+              {
+                label: PARAM_LABELS[param] ?? param,
+                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`),
+            referenceSupported && /* @__PURE__ */ jsx2("div", { className: "studio-pill-in flex-none", children: /* @__PURE__ */ jsx2(
+              ReferencePill,
+              {
+                url: referenceImageUrl,
+                onAttach: attachReference,
+                onRemove: removeReference,
+                pick: pickReferenceImage,
+                bandRef
+              }
+            ) }, `${type}-reference`)
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Generate",
+              title: "Generate",
+              disabled: !canSubmit,
+              onClick: () => void generate(),
+              className: "studio-send ml-auto inline-flex h-8 w-8 flex-none items-center justify-center rounded-full text-white transition disabled:opacity-40",
+              children: /* @__PURE__ */ jsx2(ArrowUp, { className: "h-4 w-4", strokeWidth: 2 })
+            }
+          )
+        ] }),
+        notice && /* @__PURE__ */ jsx2("p", { className: `px-1.5 pt-1.5 text-[12px] ${noticeIsProblem ? "text-destructive" : "text-muted-foreground"}`, children: notice })
+      ]
+    }
+  );
+}
+function asText(value) {
+  return typeof value === "string" ? value : typeof value === "number" ? String(value) : void 0;
+}
+function asWireScalar(value) {
+  return typeof value === "string" || typeof value === "number" ? value : void 0;
+}
+function choicesForPill(param, meta, value) {
+  if (!meta) return [];
+  const choices = choicesFor(param, meta).map((choice) => ({
+    value: choice,
+    label: optionValueLabel(param, choice)
+  }));
+  if (value === void 0 || choices.some((choice) => choice.value === value)) return choices;
+  return [...choices, { value, label: `${optionValueLabel(param, value)} \xB7 custom` }];
 }
 
 // src/studio-react/studio-header.tsx
-import { Button as Button2 } from "@tangle-network/sandbox-ui/primitives";
+import { Button } from "@tangle-network/sandbox-ui/primitives";
 import { Images } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function StudioHeader({
   count,
   onOpenLibrary,
   canGenerate
 }) {
-  return /* @__PURE__ */ jsx6("header", { className: "sticky top-0 z-20 border-b border-border bg-card", children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto flex w-full max-w-3xl items-center justify-between gap-3 px-4 py-3 sm:px-6", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx6("h1", { className: "text-lg font-semibold tracking-tight text-foreground", children: "Studio" }),
-      /* @__PURE__ */ jsx6("p", { className: "truncate text-xs text-muted-foreground", children: canGenerate ? "Generate images, video, voice, avatars, and transcripts." : "Browse your team's generations." })
+  return /* @__PURE__ */ jsx3("header", { className: "sticky top-0 z-20 border-b border-border bg-card", children: /* @__PURE__ */ jsxs3("div", { className: "mx-auto flex w-full max-w-3xl items-center justify-between gap-3 px-4 py-3 sm:px-6", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx3("h1", { className: "text-lg font-semibold tracking-tight text-foreground", children: "Studio" }),
+      /* @__PURE__ */ jsx3("p", { className: "truncate text-xs text-muted-foreground", children: canGenerate ? "Generate images, video, voice, avatars, and transcripts." : "Browse your team's generations." })
     ] }),
-    /* @__PURE__ */ jsxs5(Button2, { size: "sm", variant: "outline", onClick: onOpenLibrary, className: "shrink-0", children: [
-      /* @__PURE__ */ jsx6(Images, { className: "mr-1.5 h-4 w-4" }),
+    /* @__PURE__ */ jsxs3(Button, { size: "sm", variant: "outline", onClick: onOpenLibrary, className: "shrink-0", children: [
+      /* @__PURE__ */ jsx3(Images, { className: "mr-1.5 h-4 w-4" }),
       "Library",
-      count > 0 && /* @__PURE__ */ jsx6("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/15 px-1.5 text-xs font-semibold text-primary", children: count })
+      count > 0 && /* @__PURE__ */ jsx3("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/15 px-1.5 text-xs font-semibold text-primary", children: count })
     ] })
   ] }) });
 }
 
 // src/studio-react/result-canvas.tsx
 import { Badge } from "@tangle-network/sandbox-ui/primitives";
-import { ArrowRight, Sparkles as Sparkles2 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { ArrowRight, Sparkles } from "lucide-react";
+
+// src/studio-react/type-config.ts
+import { FileText, Image, Mic, User, Video as Video2 } from "lucide-react";
+var MEDIA_SCRIM = "bg-black/60 text-white border-white/10";
+var IMAGE = { label: "Image", icon: Image, color: MEDIA_SCRIM };
+var TYPE_CONFIG = {
+  image: IMAGE,
+  video: { label: "Video", icon: Video2, color: MEDIA_SCRIM },
+  avatar: { label: "Avatar", icon: User, color: MEDIA_SCRIM },
+  speech: { label: "Audio", icon: Mic, color: MEDIA_SCRIM },
+  transcription: { label: "Transcript", icon: FileText, color: MEDIA_SCRIM }
+};
+function typeConfigFor(type) {
+  return TYPE_CONFIG[type] ?? IMAGE;
+}
+
+// src/studio-react/result-canvas.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ResultCanvas({
   batch,
   onOpenLibrary,
@@ -590,10 +959,10 @@ function ResultCanvas({
 }) {
   const cardClass = "rounded-xl border border-border bg-card shadow-sm";
   if (batch.length === 0) {
-    return /* @__PURE__ */ jsxs6("section", { className: `${cardClass} flex min-h-[180px] flex-col items-center justify-center gap-2 p-8 text-center`, children: [
-      /* @__PURE__ */ jsx7("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx7(Sparkles2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
-      /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium text-foreground", children: "Your creations appear here" }),
-      /* @__PURE__ */ jsx7("p", { className: "max-w-xs text-xs text-muted-foreground", children: "Generate above \u2014 results appear here and are saved to your library." })
+    return /* @__PURE__ */ jsxs4("section", { className: `${cardClass} flex min-h-[180px] flex-col items-center justify-center gap-2 p-8 text-center`, children: [
+      /* @__PURE__ */ jsx4("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx4(Sparkles, { className: "h-6 w-6 text-muted-foreground/40" }) }),
+      /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-foreground", children: "Your creations appear here" }),
+      /* @__PURE__ */ jsx4("p", { className: "max-w-xs text-xs text-muted-foreground", children: "Generate above \u2014 results appear here and are saved to your library." })
     ] });
   }
   const cfg = typeConfigFor(batch[0]?.type ?? "image");
@@ -601,17 +970,17 @@ function ResultCanvas({
   const statuses = batch.map(generationStatus);
   const runLabel = statuses.some((s) => s === "pending" || s === "running") ? "Generating\u2026" : statuses.every((s) => s === "failed") ? "Last run failed" : "Latest creation";
   const isWorking = statuses.some((s) => s === "pending" || s === "running");
-  return /* @__PURE__ */ jsxs6("section", { className: `${cardClass} p-5`, children: [
-    /* @__PURE__ */ jsxs6("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs6(Badge, { variant: "outline", className: `${cfg.color} gap-1 text-xs`, children: [
-          /* @__PURE__ */ jsx7(Icon, { className: "h-3 w-3" }),
+  return /* @__PURE__ */ jsxs4("section", { className: `${cardClass} p-5`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs4(Badge, { variant: "outline", className: `${cfg.color} gap-1 text-xs`, children: [
+          /* @__PURE__ */ jsx4(Icon, { className: "h-3 w-3" }),
           cfg.label
         ] }),
-        /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-foreground", children: runLabel }),
-        isWorking && /* @__PURE__ */ jsx7("span", { className: "h-2 w-2 animate-pulse rounded-full bg-primary" })
+        /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-foreground", children: runLabel }),
+        isWorking && /* @__PURE__ */ jsx4("span", { className: "h-2 w-2 animate-pulse rounded-full bg-primary" })
       ] }),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs4(
         "button",
         {
           type: "button",
@@ -619,22 +988,22 @@ function ResultCanvas({
           className: "flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary/80",
           children: [
             "View in Library",
-            /* @__PURE__ */ jsx7(ArrowRight, { className: "h-3.5 w-3.5" })
+            /* @__PURE__ */ jsx4(ArrowRight, { className: "h-3.5 w-3.5" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: `grid gap-3 ${batch.length === 1 ? "grid-cols-1" : "grid-cols-2"}`, children: batch.map((generation) => /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx4("div", { className: `grid gap-3 ${batch.length === 1 ? "grid-cols-1" : "grid-cols-2"}`, children: batch.map((generation) => /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         onClick: () => onSelect(generation),
         className: "studio-bloom group relative aspect-video overflow-hidden rounded-lg border border-border bg-secondary transition-colors hover:border-primary/40",
-        children: /* @__PURE__ */ jsx7(CanvasTile, { generation })
+        children: /* @__PURE__ */ jsx4(CanvasTile, { generation })
       },
       generation.id
     )) }),
-    batch.length > 1 && !isWorking && /* @__PURE__ */ jsxs6("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+    batch.length > 1 && !isWorking && /* @__PURE__ */ jsxs4("p", { className: "mt-2 text-xs text-muted-foreground", children: [
       batch.length,
       " results from this run"
     ] })
@@ -645,58 +1014,58 @@ function CanvasTile({ generation }) {
   const Icon = cfg.icon;
   const status = generationStatus(generation);
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ jsx7("div", { className: "studio-shimmer absolute inset-0 h-full w-full" });
+    return /* @__PURE__ */ jsx4("div", { className: "studio-shimmer absolute inset-0 h-full w-full" });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsxs6("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center", children: [
-      /* @__PURE__ */ jsx7(Icon, { className: "h-6 w-6 text-destructive/50" }),
-      /* @__PURE__ */ jsx7("p", { className: "line-clamp-3 text-xs text-destructive", children: generationError(generation) ?? "Generation failed" })
+    return /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center", children: [
+      /* @__PURE__ */ jsx4(Icon, { className: "h-6 w-6 text-destructive/50" }),
+      /* @__PURE__ */ jsx4("p", { className: "line-clamp-3 text-xs text-destructive", children: generationError(generation) ?? "Generation failed" })
     ] });
   }
   if (generation.type === "image" && generation.result) {
-    return /* @__PURE__ */ jsx7("img", { src: generation.result, alt: generation.prompt, className: "absolute inset-0 h-full w-full object-contain" });
+    return /* @__PURE__ */ jsx4("img", { src: generation.result, alt: generation.prompt, className: "absolute inset-0 h-full w-full object-contain" });
   }
   if ((generation.type === "video" || generation.type === "avatar") && generation.result) {
-    return /* @__PURE__ */ jsx7("video", { src: generation.result, controls: true, className: "absolute inset-0 h-full w-full object-contain" });
+    return /* @__PURE__ */ jsx4("video", { src: generation.result, controls: true, className: "absolute inset-0 h-full w-full object-contain" });
   }
   if (generation.type === "speech" && generation.result) {
-    return /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx7("audio", { src: generation.result, controls: true, className: "w-full" }) });
+    return /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx4("audio", { src: generation.result, controls: true, className: "w-full" }) });
   }
   if (generation.type === "transcription" && generation.result) {
-    return /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 overflow-y-auto p-4", children: /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-xs text-foreground", children: generation.result }) });
+    return /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 overflow-y-auto p-4", children: /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap text-xs text-foreground", children: generation.result }) });
   }
-  return /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx7(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) });
+  return /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx4(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) });
 }
 
 // src/studio-react/library-drawer.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { Link as Link2 } from "react-router";
 import {
-  Button as Button4,
+  Button as Button3,
   Tabs,
   TabsList,
   TabsTrigger
 } from "@tangle-network/sandbox-ui/primitives";
-import { ArrowLeft, DollarSign, FolderOpen as FolderOpen2, X } from "lucide-react";
+import { ArrowLeft, DollarSign, FolderOpen as FolderOpen2, X as X2 } from "lucide-react";
 
 // src/studio-react/studio-sheet.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function StudioSheet({
   open,
   onOpenChange,
   title,
   children
 }) {
-  return /* @__PURE__ */ jsx8(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx8(Dialog.Overlay, { className: "studio-sheet-overlay fixed inset-0 z-50 bg-black/50" }),
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx5(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx5(Dialog.Overlay, { className: "studio-sheet-overlay fixed inset-0 z-50 bg-black/50" }),
+    /* @__PURE__ */ jsxs5(
       Dialog.Content,
       {
         className: "studio-sheet-content fixed inset-y-0 right-0 z-50 flex w-[min(92vw,30rem)] flex-col border-l border-card-edge bg-popover shadow-[var(--shadow-overlay)] focus:outline-none",
         "aria-describedby": void 0,
         children: [
-          /* @__PURE__ */ jsx8(Dialog.Title, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx5(Dialog.Title, { className: "sr-only", children: title }),
           children
         ]
       }
@@ -706,11 +1075,11 @@ function StudioSheet({
 
 // src/studio-react/generation-grid.tsx
 import { EmptyState } from "@tangle-network/sandbox-ui/primitives";
-import { Film, Sparkles as Sparkles3 } from "lucide-react";
+import { Film, Sparkles as Sparkles2 } from "lucide-react";
 
 // src/studio-react/generation-card.tsx
 import { Card, CardContent, Badge as Badge2 } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function GenerationCard({
   generation,
   onSelect
@@ -718,26 +1087,26 @@ function GenerationCard({
   const cfg = typeConfigFor(generation.type);
   const Icon = cfg.icon;
   const status = generationStatus(generation);
-  return /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => onSelect(generation), className: "group text-left animate-row-in", children: /* @__PURE__ */ jsxs8(Card, { className: "overflow-hidden transition-all group-hover:border-primary/50 group-hover:shadow-md", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "relative aspect-video bg-secondary", children: [
-      generation.type === "image" && generation.result ? /* @__PURE__ */ jsx9("img", { src: generation.result, alt: generation.prompt, className: "h-full w-full object-cover" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx9("video", { src: generation.result, className: "h-full w-full object-cover", muted: true }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx9(Icon, { className: "h-6 w-6 text-muted-foreground/40" }) }) : generation.type === "transcription" && generation.result ? /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx9("p", { className: "line-clamp-5 text-xs text-muted-foreground", children: generation.result }) }) : status === "pending" || status === "running" ? /* @__PURE__ */ jsx9("div", { className: "shimmer h-full w-full" }) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx9(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }),
-      /* @__PURE__ */ jsx9("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsxs8(Badge2, { variant: "outline", className: `${cfg.color} gap-1 text-xs`, children: [
-        /* @__PURE__ */ jsx9(Icon, { className: "h-3 w-3" }),
+  return /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onSelect(generation), className: "group text-left animate-row-in", children: /* @__PURE__ */ jsxs6(Card, { className: "overflow-hidden transition-all group-hover:border-primary/50 group-hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative aspect-video bg-secondary", children: [
+      generation.type === "image" && generation.result ? /* @__PURE__ */ jsx6("img", { src: generation.result, alt: generation.prompt, className: "h-full w-full object-cover" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx6("video", { src: generation.result, className: "h-full w-full object-cover", muted: true }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx6(Icon, { className: "h-6 w-6 text-muted-foreground/40" }) }) : generation.type === "transcription" && generation.result ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx6("p", { className: "line-clamp-5 text-xs text-muted-foreground", children: generation.result }) }) : status === "pending" || status === "running" ? /* @__PURE__ */ jsx6("div", { className: "shimmer h-full w-full" }) : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx6(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsxs6(Badge2, { variant: "outline", className: `${cfg.color} gap-1 text-xs`, children: [
+        /* @__PURE__ */ jsx6(Icon, { className: "h-3 w-3" }),
         cfg.label
       ] }) }),
-      /* @__PURE__ */ jsx9(GenerationStatusBadge, { generation })
+      /* @__PURE__ */ jsx6(GenerationStatusBadge, { generation })
     ] }),
-    /* @__PURE__ */ jsxs8(CardContent, { className: "p-3", children: [
-      /* @__PURE__ */ jsx9("p", { className: "mb-2 line-clamp-2 text-sm font-medium text-foreground", children: generation.prompt }),
-      status === "failed" && /* @__PURE__ */ jsx9("p", { className: "mb-2 line-clamp-2 text-xs text-destructive", children: generationError(generation) }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-        generation.model && /* @__PURE__ */ jsx9("span", { className: "truncate text-xs text-muted-foreground", children: generation.model }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-2", children: [
-          generation.cost != null && /* @__PURE__ */ jsxs8("span", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs6(CardContent, { className: "p-3", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mb-2 line-clamp-2 text-sm font-medium text-foreground", children: generation.prompt }),
+      status === "failed" && /* @__PURE__ */ jsx6("p", { className: "mb-2 line-clamp-2 text-xs text-destructive", children: generationError(generation) }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+        generation.model && /* @__PURE__ */ jsx6("span", { className: "truncate text-xs text-muted-foreground", children: generation.model }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-2", children: [
+          generation.cost != null && /* @__PURE__ */ jsxs6("span", { className: "text-xs text-muted-foreground", children: [
             "$",
             generation.cost.toFixed(3)
           ] }),
-          /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: relativeTime(generation.createdAt) })
+          /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: relativeTime(generation.createdAt) })
         ] })
       ] })
     ] })
@@ -751,11 +1120,11 @@ function GenerationStatusBadge({
   if (status === "succeeded") return null;
   const label = status === "failed" ? "Failed" : status === "running" ? "Running" : "Pending";
   const className = status === "failed" ? "border-destructive/30 bg-[color-mix(in_srgb,hsl(var(--destructive))_10%,hsl(var(--card)))] text-destructive" : "border-warning/30 bg-[color-mix(in_srgb,hsl(var(--warning))_10%,hsl(var(--card)))] text-warning";
-  return /* @__PURE__ */ jsx9("div", { className: inline ? "" : "absolute bottom-2 left-2", children: /* @__PURE__ */ jsx9(Badge2, { variant: "outline", className: `${className} text-xs`, children: label }) });
+  return /* @__PURE__ */ jsx6("div", { className: inline ? "" : "absolute bottom-2 left-2", children: /* @__PURE__ */ jsx6(Badge2, { variant: "outline", className: `${className} text-xs`, children: label }) });
 }
 
 // src/studio-react/generation-grid.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function filterGenerations(generations, typeFilter) {
   if (!typeFilter || !isGenerationType(typeFilter)) return generations;
   return generations.filter((generation) => generation.type === typeFilter);
@@ -766,24 +1135,24 @@ function GenerationGrid({
   onSelect
 }) {
   if (generations.length === 0) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx7(
       EmptyState,
       {
-        icon: typeFilter ? /* @__PURE__ */ jsx10(Film, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx10(Sparkles3, { className: "h-10 w-10 text-muted-foreground/30" }),
+        icon: typeFilter ? /* @__PURE__ */ jsx7(Film, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx7(Sparkles2, { className: "h-10 w-10 text-muted-foreground/30" }),
         title: typeFilter ? `No ${TYPE_CONFIG[typeFilter]?.label ?? typeFilter} generations` : "No generations yet",
         description: typeFilter ? "Try a different filter or change the type in the composer." : "Everything you and the agent create lives here.",
         className: "py-16"
       }
     );
   }
-  return /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: generations.map((generation) => /* @__PURE__ */ jsx10(GenerationCard, { generation, onSelect }, generation.id)) });
+  return /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: generations.map((generation) => /* @__PURE__ */ jsx7(GenerationCard, { generation, onSelect }, generation.id)) });
 }
 
 // src/studio-react/generation-detail.tsx
 import { Link } from "react-router";
-import { Badge as Badge3, Button as Button3 } from "@tangle-network/sandbox-ui/primitives";
+import { Badge as Badge3, Button as Button2 } from "@tangle-network/sandbox-ui/primitives";
 import { FolderOpen } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function GenerationDetail({
   generation,
   vaultHref,
@@ -793,50 +1162,50 @@ function GenerationDetail({
   const Icon = cfg.icon;
   const vaultPath = generationVaultPath(generation);
   const href = vaultHref && vaultPath ? vaultHref(vaultPath) : null;
-  return /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx11("div", { className: "overflow-hidden rounded-lg bg-secondary", children: generation.type === "image" && generation.result ? /* @__PURE__ */ jsx11("img", { src: generation.result, alt: generation.prompt, className: "max-h-[420px] w-full object-contain" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx11("video", { src: generation.result, controls: true, className: "max-h-[420px] w-full" }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx11("div", { className: "p-6", children: /* @__PURE__ */ jsx11("audio", { src: generation.result, controls: true, className: "w-full" }) }) : /* @__PURE__ */ jsx11("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx11(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }) }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsxs9(Badge3, { variant: "outline", className: `${cfg.color} gap-1`, children: [
-        /* @__PURE__ */ jsx11(Icon, { className: "h-3 w-3" }),
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx8("div", { className: "overflow-hidden rounded-lg bg-secondary", children: generation.type === "image" && generation.result ? /* @__PURE__ */ jsx8("img", { src: generation.result, alt: generation.prompt, className: "max-h-[420px] w-full object-contain" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx8("video", { src: generation.result, controls: true, className: "max-h-[420px] w-full" }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx8("div", { className: "p-6", children: /* @__PURE__ */ jsx8("audio", { src: generation.result, controls: true, className: "w-full" }) }) : /* @__PURE__ */ jsx8("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx8(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs7(Badge3, { variant: "outline", className: `${cfg.color} gap-1`, children: [
+        /* @__PURE__ */ jsx8(Icon, { className: "h-3 w-3" }),
         cfg.label
       ] }),
-      /* @__PURE__ */ jsx11(GenerationStatusBadge, { generation, inline: true }),
-      generationError(generation) && /* @__PURE__ */ jsx11("span", { className: "text-xs text-destructive", children: generationError(generation) })
+      /* @__PURE__ */ jsx8(GenerationStatusBadge, { generation, inline: true }),
+      generationError(generation) && /* @__PURE__ */ jsx8("span", { className: "text-xs text-destructive", children: generationError(generation) })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx11("span", { className: "mb-1 block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Prompt" }),
-      /* @__PURE__ */ jsx11("p", { className: "text-sm text-foreground", children: generation.prompt })
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx8("span", { className: "mb-1 block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Prompt" }),
+      /* @__PURE__ */ jsx8("p", { className: "text-sm text-foreground", children: generation.prompt })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-4", children: [
-      generation.model && /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx11("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Model" }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs text-foreground", children: generation.model })
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-4", children: [
+      generation.model && /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Model" }),
+        /* @__PURE__ */ jsx8("span", { className: "text-xs text-foreground", children: generation.model })
       ] }),
-      generation.cost != null && /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx11("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Cost" }),
-        /* @__PURE__ */ jsxs9("span", { className: "text-xs text-foreground", children: [
+      generation.cost != null && /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Cost" }),
+        /* @__PURE__ */ jsxs7("span", { className: "text-xs text-foreground", children: [
           "$",
           generation.cost.toFixed(3)
         ] })
       ] }),
-      generation.createdAt && /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx11("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Created" }),
-        /* @__PURE__ */ jsx11("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }) })
+      generation.createdAt && /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("span", { className: "block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Created" }),
+        /* @__PURE__ */ jsx8("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }) })
       ] })
     ] }),
-    generation.type === "transcription" && generation.result && /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx11("span", { className: "mb-1 block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Transcription" }),
-      /* @__PURE__ */ jsx11("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-secondary p-4 font-mono text-[13px] tabular-nums text-foreground", children: generation.result })
+    generation.type === "transcription" && generation.result && /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx8("span", { className: "mb-1 block text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Transcription" }),
+      /* @__PURE__ */ jsx8("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-secondary p-4 font-mono text-[13px] tabular-nums text-foreground", children: generation.result })
     ] }),
-    href && /* @__PURE__ */ jsx11("div", { className: "border-t border-border pt-2", children: /* @__PURE__ */ jsx11(Link, { to: href, prefetch: "intent", onClick: onNavigate, children: /* @__PURE__ */ jsxs9(Button3, { size: "sm", variant: "outline", children: [
-      /* @__PURE__ */ jsx11(FolderOpen, { className: "mr-1.5 h-3.5 w-3.5" }),
+    href && /* @__PURE__ */ jsx8("div", { className: "border-t border-border pt-2", children: /* @__PURE__ */ jsx8(Link, { to: href, prefetch: "intent", onClick: onNavigate, children: /* @__PURE__ */ jsxs7(Button2, { size: "sm", variant: "outline", children: [
+      /* @__PURE__ */ jsx8(FolderOpen, { className: "mr-1.5 h-3.5 w-3.5" }),
       "Open in Vault"
     ] }) }) })
   ] });
 }
 
 // src/studio-react/library-drawer.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function LibraryDrawer({
   open,
   onOpenChange,
@@ -848,71 +1217,71 @@ function LibraryDrawer({
   selected,
   onSelect
 }) {
-  const visible = useMemo2(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
-  return /* @__PURE__ */ jsxs10(StudioSheet, { open, onOpenChange, title: "Asset library", children: [
-    /* @__PURE__ */ jsxs10("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
-      selected ? /* @__PURE__ */ jsxs10(
+  const visible = useMemo3(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
+  return /* @__PURE__ */ jsxs8(StudioSheet, { open, onOpenChange, title: "Asset library", children: [
+    /* @__PURE__ */ jsxs8("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
+      selected ? /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
           onClick: () => onSelect(null),
           className: "flex items-center gap-1.5 text-sm font-medium text-foreground transition-colors hover:text-primary",
           children: [
-            /* @__PURE__ */ jsx12(ArrowLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9(ArrowLeft, { className: "h-4 w-4" }),
             "Back to library"
           ]
         }
-      ) : /* @__PURE__ */ jsx12("h2", { className: "text-sm font-semibold text-foreground", children: "Asset library" }),
-      /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx9("h2", { className: "text-sm font-semibold text-foreground", children: "Asset library" }),
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           "aria-label": "Close library",
           onClick: () => onOpenChange(false),
           className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-          children: /* @__PURE__ */ jsx12(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx9(X2, { className: "h-4 w-4" })
         }
       )
     ] }),
-    selected ? /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx12(
+    selected ? /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx9(
       GenerationDetail,
       {
         generation: selected,
         vaultHref,
         onNavigate: () => onOpenChange(false)
       }
-    ) }) : /* @__PURE__ */ jsxs10(Fragment, { children: [
-      /* @__PURE__ */ jsxs10("div", { className: "shrink-0 border-b border-border px-4 pt-3", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs10("span", { children: [
+    ) }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsxs8("div", { className: "shrink-0 border-b border-border px-4 pt-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs8("span", { children: [
               visible.length,
               " generation",
               visible.length !== 1 ? "s" : ""
             ] }),
-            /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx12(DollarSign, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsx9(DollarSign, { className: "h-3 w-3" }),
               totalCost.toFixed(2),
               " spent"
             ] })
           ] }),
-          vaultHref && /* @__PURE__ */ jsx12(Link2, { to: vaultHref(), prefetch: "intent", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsxs10(Button4, { size: "sm", variant: "outline", children: [
-            /* @__PURE__ */ jsx12(FolderOpen2, { className: "mr-1.5 h-3.5 w-3.5" }),
+          vaultHref && /* @__PURE__ */ jsx9(Link2, { to: vaultHref(), prefetch: "intent", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsxs8(Button3, { size: "sm", variant: "outline", children: [
+            /* @__PURE__ */ jsx9(FolderOpen2, { className: "mr-1.5 h-3.5 w-3.5" }),
             "Vault"
           ] }) })
         ] }),
-        /* @__PURE__ */ jsx12(Tabs, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs10(TabsList, { className: "h-9 w-full justify-start gap-1 overflow-x-auto bg-transparent", children: [
-          /* @__PURE__ */ jsx12(TabsTrigger, { value: "all", className: "text-xs", children: "All" }),
-          Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx12(TabsTrigger, { value: key, className: "text-xs", children: cfg.label }, key))
+        /* @__PURE__ */ jsx9(Tabs, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs8(TabsList, { className: "h-9 w-full justify-start gap-1 overflow-x-auto bg-transparent", children: [
+          /* @__PURE__ */ jsx9(TabsTrigger, { value: "all", className: "text-xs", children: "All" }),
+          Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx9(TabsTrigger, { value: key, className: "text-xs", children: cfg.label }, key))
         ] }) })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx12(GenerationGrid, { generations: visible, typeFilter, onSelect }) })
+      /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx9(GenerationGrid, { generations: visible, typeFilter, onSelect }) })
     ] })
   ] });
 }
 
 // src/studio-react/studio-workspace.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function StudioWorkspace({
   generations,
   totalCost,
@@ -923,8 +1292,8 @@ function StudioWorkspace({
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const typeFilter = searchParams.get("type");
-  const [drawerOpen, setDrawerOpen] = useState3(false);
-  const [selected, setSelected] = useState3(null);
+  const [drawerOpen, setDrawerOpen] = useState4(false);
+  const [selected, setSelected] = useState4(null);
   const canvasRef = useRef3(null);
   const canGenerate = role !== "viewer";
   const resolvedVaultHref = vaultHref ?? (workspaceId ? (filePath) => filePath ? `/app/${workspaceId}/vault?file=${encodeURIComponent(filePath)}` : `/app/${workspaceId}/vault` : void 0);
@@ -944,8 +1313,8 @@ function StudioWorkspace({
     setSelected(generation);
     setDrawerOpen(true);
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "min-h-0 flex-1 overflow-y-auto bg-background", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "min-h-0 flex-1 overflow-y-auto bg-background", children: [
+    /* @__PURE__ */ jsx10(
       StudioHeader,
       {
         count: mergedGenerations.length,
@@ -953,9 +1322,9 @@ function StudioWorkspace({
         onOpenLibrary: openLibrary
       }
     ),
-    /* @__PURE__ */ jsx13("div", { className: "mx-auto w-full max-w-3xl space-y-4 px-4 py-6 sm:px-6", children: canGenerate ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
-      /* @__PURE__ */ jsx13(
-        ComposerHero,
+    /* @__PURE__ */ jsx10("div", { className: "mx-auto w-full max-w-3xl space-y-4 px-4 py-6 sm:px-6", children: canGenerate ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx10(
+        StudioComposer,
         {
           workspaceId,
           onGenerated: (generation) => {
@@ -966,7 +1335,7 @@ function StudioWorkspace({
           }
         }
       ),
-      /* @__PURE__ */ jsx13("div", { ref: canvasRef, children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx10("div", { ref: canvasRef, children: /* @__PURE__ */ jsx10(
         ResultCanvas,
         {
           batch: latestBatch,
@@ -974,16 +1343,16 @@ function StudioWorkspace({
           onSelect: openDetail
         }
       ) })
-    ] }) : /* @__PURE__ */ jsxs11("section", { className: "flex flex-col items-center justify-center gap-3 rounded-xl border border-border bg-card p-10 text-center shadow-sm", children: [
-      /* @__PURE__ */ jsx13("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx13(Images2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
-      /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-foreground", children: mergedGenerations.length > 0 ? `${mergedGenerations.length} asset${mergedGenerations.length !== 1 ? "s" : ""} in this workspace` : "No generations yet" }),
-      /* @__PURE__ */ jsx13("p", { className: "max-w-sm text-xs text-muted-foreground", children: "Team generations appear in the library." }),
-      /* @__PURE__ */ jsxs11(Button5, { size: "sm", variant: "outline", onClick: openLibrary, children: [
-        /* @__PURE__ */ jsx13(Images2, { className: "mr-1.5 h-4 w-4" }),
+    ] }) : /* @__PURE__ */ jsxs9("section", { className: "flex flex-col items-center justify-center gap-3 rounded-xl border border-border bg-card p-10 text-center shadow-sm", children: [
+      /* @__PURE__ */ jsx10("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx10(Images2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
+      /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-foreground", children: mergedGenerations.length > 0 ? `${mergedGenerations.length} asset${mergedGenerations.length !== 1 ? "s" : ""} in this workspace` : "No generations yet" }),
+      /* @__PURE__ */ jsx10("p", { className: "max-w-sm text-xs text-muted-foreground", children: "Team generations appear in the library." }),
+      /* @__PURE__ */ jsxs9(Button4, { size: "sm", variant: "outline", onClick: openLibrary, children: [
+        /* @__PURE__ */ jsx10(Images2, { className: "mr-1.5 h-4 w-4" }),
         "Open library"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx10(
       LibraryDrawer,
       {
         open: drawerOpen,
@@ -1006,15 +1375,32 @@ function StudioWorkspace({
   ] });
 }
 
+// src/studio-react/generation-notice.tsx
+import { Info } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function GenerationNoticeChip({ className }) {
+  return /* @__PURE__ */ jsxs10(
+    "p",
+    {
+      className: `inline-block rounded-full border px-3.5 py-1.5 text-center text-[12.5px] font-medium leading-relaxed text-foreground shadow-sm ${className ?? ""}`,
+      style: { background: "var(--studio-notice-bg)", borderColor: "var(--studio-notice-border)" },
+      children: [
+        /* @__PURE__ */ jsx11(Info, { className: "mr-1.5 inline-block h-[14px] w-[14px] align-[-2px] text-primary", strokeWidth: 1.5, "aria-hidden": true }),
+        "Each prompt starts a new generation \u2014 this chat does not remember the last one."
+      ]
+    }
+  );
+}
+
 // src/studio-react/library-panel.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import {
   Tabs as Tabs2,
   TabsList as TabsList2,
   TabsTrigger as TabsTrigger2
 } from "@tangle-network/sandbox-ui/primitives";
 import { DollarSign as DollarSign2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function LibraryPanel({
   generations,
   totalCost,
@@ -1022,11 +1408,11 @@ function LibraryPanel({
   onFilterChange,
   onSelect
 }) {
-  const visible = useMemo3(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
-  return /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-col", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx14(Tabs2, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs12(TabsList2, { className: "h-9 justify-start gap-1 overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-background p-1", children: [
-        /* @__PURE__ */ jsx14(
+  const visible = useMemo4(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
+  return /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx12(Tabs2, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs11(TabsList2, { className: "h-9 justify-start gap-1 overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-background p-1", children: [
+        /* @__PURE__ */ jsx12(
           TabsTrigger2,
           {
             value: "all",
@@ -1034,7 +1420,7 @@ function LibraryPanel({
             children: "All"
           }
         ),
-        Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx14(
+        Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx12(
           TabsTrigger2,
           {
             value: key,
@@ -1044,158 +1430,54 @@ function LibraryPanel({
           key
         ))
       ] }) }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs12("span", { children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs11("span", { children: [
           visible.length,
           " generation",
           visible.length !== 1 ? "s" : ""
         ] }),
-        /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ jsx14(DollarSign2, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx12(DollarSign2, { className: "h-3 w-3" }),
           totalCost.toFixed(2),
           " spent"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx14(GenerationGrid, { generations: visible, typeFilter, onSelect })
+    /* @__PURE__ */ jsx12(GenerationGrid, { generations: visible, typeFilter, onSelect })
   ] });
 }
 
 // src/studio-react/generation-detail-modal.tsx
 import { Dialog as Dialog2, DialogContent, DialogHeader, DialogTitle } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function GenerationDetailModal({
   generation,
   vaultHref,
   onClose
 }) {
   const cfg = generation ? typeConfigFor(generation.type) : null;
-  return /* @__PURE__ */ jsx15(Dialog2, { open: generation != null, onOpenChange: (open) => {
+  return /* @__PURE__ */ jsx13(Dialog2, { open: generation != null, onOpenChange: (open) => {
     if (!open) onClose();
-  }, children: /* @__PURE__ */ jsxs13(DialogContent, { className: "max-h-[85vh] max-w-2xl overflow-y-auto border-card-edge bg-popover shadow-[var(--shadow-overlay)]", children: [
-    /* @__PURE__ */ jsx15(DialogHeader, { children: /* @__PURE__ */ jsx15(DialogTitle, { className: "text-left text-[15px] font-semibold", children: cfg ? `${cfg.label} generation` : "Generation" }) }),
-    generation && /* @__PURE__ */ jsx15(GenerationDetail, { generation, vaultHref, onNavigate: onClose })
+  }, children: /* @__PURE__ */ jsxs12(DialogContent, { className: "max-h-[85vh] max-w-2xl overflow-y-auto border-card-edge bg-popover shadow-[var(--shadow-overlay)]", children: [
+    /* @__PURE__ */ jsx13(DialogHeader, { children: /* @__PURE__ */ jsx13(DialogTitle, { className: "text-left text-[15px] font-semibold", children: cfg ? `${cfg.label} generation` : "Generation" }) }),
+    generation && /* @__PURE__ */ jsx13(GenerationDetail, { generation, vaultHref, onNavigate: onClose })
   ] }) });
 }
-
-// src/studio-react/avatar-composer.tsx
-import { Input as Input5 } from "@tangle-network/sandbox-ui/primitives";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function AvatarComposer({
-  audioUrl,
-  imageUrl,
-  avatarId,
-  onAudioUrlChange,
-  onImageUrlChange,
-  onAvatarIdChange
-}) {
-  return /* @__PURE__ */ jsxs14("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
-    /* @__PURE__ */ jsx16(Field, { label: "Audio URL", htmlFor: "studio-audio-url", children: /* @__PURE__ */ jsx16(
-      Input5,
-      {
-        id: "studio-audio-url",
-        value: audioUrl,
-        onChange: (event) => onAudioUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/source-audio.mp3",
-        className: "bg-background"
-      }
-    ) }),
-    /* @__PURE__ */ jsx16(Field, { label: "Image URL", htmlFor: "studio-avatar-image-url", children: /* @__PURE__ */ jsx16(
-      Input5,
-      {
-        id: "studio-avatar-image-url",
-        value: imageUrl,
-        onChange: (event) => onImageUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/portrait.png",
-        className: "bg-background"
-      }
-    ) }),
-    /* @__PURE__ */ jsx16(Field, { label: "Avatar ID", htmlFor: "studio-avatar-id", children: /* @__PURE__ */ jsx16(
-      Input5,
-      {
-        id: "studio-avatar-id",
-        value: avatarId,
-        onChange: (event) => onAvatarIdChange(event.target.value),
-        placeholder: "Optional provider avatar id",
-        className: "bg-background"
-      }
-    ) })
-  ] });
-}
-
-// src/studio-react/transcription-composer.tsx
-import { Input as Input6 } from "@tangle-network/sandbox-ui/primitives";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-function TranscriptionComposer({
-  audioUrl,
-  language,
-  onAudioUrlChange,
-  onLanguageChange
-}) {
-  return /* @__PURE__ */ jsxs15("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
-    /* @__PURE__ */ jsx17(Field, { label: "Audio URL", htmlFor: "studio-audio-url", children: /* @__PURE__ */ jsx17(
-      Input6,
-      {
-        id: "studio-audio-url",
-        value: audioUrl,
-        onChange: (event) => onAudioUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/source-audio.mp3",
-        className: "bg-background"
-      }
-    ) }),
-    /* @__PURE__ */ jsx17(Field, { label: "Language", htmlFor: "studio-transcription-language", children: /* @__PURE__ */ jsx17(
-      Input6,
-      {
-        id: "studio-transcription-language",
-        value: language,
-        onChange: (event) => onLanguageChange(event.target.value),
-        placeholder: "en",
-        className: "bg-background"
-      }
-    ) })
-  ] });
-}
-function TranscriptionOptions({
-  responseFormat,
-  temperature,
-  onResponseFormatChange,
-  onTemperatureChange
-}) {
-  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
-    /* @__PURE__ */ jsx17(Field, { label: "Response format", children: /* @__PURE__ */ jsxs15(NativeSelect, { value: responseFormat, onChange: (event) => onResponseFormatChange(event.target.value), children: [
-      /* @__PURE__ */ jsx17("option", { value: "json", children: "JSON" }),
-      /* @__PURE__ */ jsx17("option", { value: "text", children: "Text" }),
-      /* @__PURE__ */ jsx17("option", { value: "srt", children: "SRT" }),
-      /* @__PURE__ */ jsx17("option", { value: "verbose_json", children: "Verbose JSON" }),
-      /* @__PURE__ */ jsx17("option", { value: "vtt", children: "VTT" })
-    ] }) }),
-    /* @__PURE__ */ jsx17(Field, { label: "Temperature", children: /* @__PURE__ */ jsx17(Input6, { type: "number", min: "0", max: "1", step: "0.1", value: temperature, onChange: (event) => onTemperatureChange(event.target.value), className: "bg-background" }) })
-  ] });
-}
 export {
-  AvatarComposer,
-  ComposerDisclosure,
-  ComposerHero,
-  Field,
   GenerationCard,
   GenerationDetail,
   GenerationDetailModal,
   GenerationGrid,
+  GenerationNoticeChip,
   GenerationStatusBadge,
-  ImageComposer,
   LibraryDrawer,
   LibraryPanel,
-  NativeSelect,
   ResultCanvas,
-  SpeechComposer,
-  Stepper,
+  StudioComposer,
   StudioHeader,
   StudioSheet,
   StudioWorkspace,
   TYPE_CONFIG,
-  TranscriptionComposer,
-  TranscriptionOptions,
-  VideoComposer,
   filterGenerations,
   typeConfigFor,
   useStudioGenerations