@tangle-network/agent-app 0.43.21 → 0.43.23

package/dist/studio-react/index.js

@@ -121,7 +121,7 @@ function typeConfigFor(type) {
 
 // src/studio-react/composer-shell.tsx
 import { Label } from "@tangle-network/sandbox-ui/primitives";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Minus, Plus } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Field({
   label,
@@ -130,12 +130,51 @@ function Field({
   children
 }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor, className: "text-sm", children: label }),
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor,
+        className: "text-[10.5px] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+        children: label
+      }
+    ),
     children
   ] });
 }
+function Stepper({
+  value,
+  min,
+  max,
+  onChange
+}) {
+  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(
+      "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" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tabular-nums", children: value }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        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" })
+      }
+    )
+  ] });
+}
 function ComposerDisclosure({ summary, children }) {
-  return /* @__PURE__ */ jsxs("details", { className: "group rounded-lg border border-border bg-muted/30 transition-colors open:bg-muted/40", 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
@@ -144,12 +183,12 @@ function ComposerDisclosure({ summary, children }) {
   ] });
 }
 function NativeSelect(props) {
-  return /* @__PURE__ */ jsx("select", { ...props, className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm" });
+  return /* @__PURE__ */ jsx("select", { ...props, className: "h-9 w-full rounded-md border border-input bg-[var(--md3-surface-container-low)] px-3 text-sm" });
 }
 
 // src/studio-react/image-composer.tsx
 import { Input } from "@tangle-network/sandbox-ui/primitives";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ImageComposer({
   size,
   quality,
@@ -158,16 +197,26 @@ function ImageComposer({
   onQualityChange,
   onImageCountChange
 }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(Field, { label: "Size", children: /* @__PURE__ */ jsx2(Input, { value: size, onChange: (event) => onSizeChange(event.target.value) }) }),
-    /* @__PURE__ */ jsx2(Field, { label: "Quality", children: /* @__PURE__ */ jsx2(Input, { value: quality, onChange: (event) => onQualityChange(event.target.value) }) }),
-    /* @__PURE__ */ jsx2(Field, { label: "Images", children: /* @__PURE__ */ jsx2(Input, { type: "number", min: MIN_IMAGE_COUNT, max: MAX_IMAGE_COUNT, value: imageCount, onChange: (event) => onImageCountChange(normalizeImageCount(event.target.value)) }) })
+  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, { value: size, onChange: (event) => onSizeChange(event.target.value), className: "bg-background" }) }),
+      /* @__PURE__ */ jsx2(Field, { label: "Quality", children: /* @__PURE__ */ jsx2(Input, { value: quality, onChange: (event) => onQualityChange(event.target.value), className: "bg-background" }) })
+    ] }),
+    /* @__PURE__ */ jsx2(Field, { label: "Images", children: /* @__PURE__ */ jsx2(
+      Stepper,
+      {
+        value: imageCount,
+        min: MIN_IMAGE_COUNT,
+        max: MAX_IMAGE_COUNT,
+        onChange: (value) => onImageCountChange(normalizeImageCount(value))
+      }
+    ) })
   ] });
 }
 
 // src/studio-react/video-composer.tsx
 import { Input as Input2 } from "@tangle-network/sandbox-ui/primitives";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function VideoComposer({
   duration,
   resolution,
@@ -178,11 +227,11 @@ function VideoComposer({
   onAspectRatioChange,
   onReferenceImageUrlChange
 }) {
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(Field, { label: "Duration (s)", children: /* @__PURE__ */ jsx3(Input2, { value: duration, onChange: (event) => onDurationChange(event.target.value) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Resolution", children: /* @__PURE__ */ jsx3(Input2, { value: resolution, onChange: (event) => onResolutionChange(event.target.value) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Aspect ratio", children: /* @__PURE__ */ jsx3(Input2, { value: aspectRatio, onChange: (event) => onAspectRatioChange(event.target.value) }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Reference image URL", children: /* @__PURE__ */ jsx3(Input2, { value: referenceImageUrl, onChange: (event) => onReferenceImageUrlChange(event.target.value) }) })
+  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ jsx3(Field, { label: "Duration (s)", children: /* @__PURE__ */ jsx3(Input2, { value: duration, onChange: (event) => onDurationChange(event.target.value), className: "bg-background" }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Resolution", children: /* @__PURE__ */ jsx3(Input2, { value: resolution, onChange: (event) => onResolutionChange(event.target.value), className: "bg-background" }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Aspect ratio", children: /* @__PURE__ */ jsx3(Input2, { value: aspectRatio, onChange: (event) => onAspectRatioChange(event.target.value), className: "bg-background" }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Reference image URL", children: /* @__PURE__ */ jsx3(Input2, { value: referenceImageUrl, onChange: (event) => onReferenceImageUrlChange(event.target.value), className: "bg-background" }) })
   ] });
 }
 
@@ -193,7 +242,7 @@ function SpeechComposer({
   voice,
   onVoiceChange
 }) {
-  return /* @__PURE__ */ jsx4(Field, { label: "Voice", children: /* @__PURE__ */ jsx4(Input3, { value: voice, onChange: (event) => onVoiceChange(event.target.value) }) });
+  return /* @__PURE__ */ jsx4(Field, { label: "Voice", children: /* @__PURE__ */ jsx4(Input3, { value: voice, onChange: (event) => onVoiceChange(event.target.value), className: "bg-background" }) });
 }
 
 // src/studio-react/avatar-composer.tsx
@@ -214,7 +263,8 @@ function AvatarComposer({
         id: "studio-audio-url",
         value: audioUrl,
         onChange: (event) => onAudioUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/source-audio.mp3"
+        placeholder: "https://cdn.example.com/source-audio.mp3",
+        className: "bg-background"
       }
     ) }),
     /* @__PURE__ */ jsx5(Field, { label: "Image URL", htmlFor: "studio-avatar-image-url", children: /* @__PURE__ */ jsx5(
@@ -223,7 +273,8 @@ function AvatarComposer({
         id: "studio-avatar-image-url",
         value: imageUrl,
         onChange: (event) => onImageUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/portrait.png"
+        placeholder: "https://cdn.example.com/portrait.png",
+        className: "bg-background"
       }
     ) }),
     /* @__PURE__ */ jsx5(Field, { label: "Avatar ID", htmlFor: "studio-avatar-id", children: /* @__PURE__ */ jsx5(
@@ -232,7 +283,8 @@ function AvatarComposer({
         id: "studio-avatar-id",
         value: avatarId,
         onChange: (event) => onAvatarIdChange(event.target.value),
-        placeholder: "Optional provider avatar id"
+        placeholder: "Optional provider avatar id",
+        className: "bg-background"
       }
     ) })
   ] });
@@ -240,7 +292,7 @@ function AvatarComposer({
 
 // src/studio-react/transcription-composer.tsx
 import { Input as Input5 } from "@tangle-network/sandbox-ui/primitives";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function TranscriptionComposer({
   audioUrl,
   language,
@@ -254,7 +306,8 @@ function TranscriptionComposer({
         id: "studio-audio-url",
         value: audioUrl,
         onChange: (event) => onAudioUrlChange(event.target.value),
-        placeholder: "https://cdn.example.com/source-audio.mp3"
+        placeholder: "https://cdn.example.com/source-audio.mp3",
+        className: "bg-background"
       }
     ) }),
     /* @__PURE__ */ jsx6(Field, { label: "Language", htmlFor: "studio-transcription-language", children: /* @__PURE__ */ jsx6(
@@ -263,7 +316,8 @@ function TranscriptionComposer({
         id: "studio-transcription-language",
         value: language,
         onChange: (event) => onLanguageChange(event.target.value),
-        placeholder: "en"
+        placeholder: "en",
+        className: "bg-background"
       }
     ) })
   ] });
@@ -274,7 +328,7 @@ function TranscriptionOptions({
   onResponseFormatChange,
   onTemperatureChange
 }) {
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
     /* @__PURE__ */ jsx6(Field, { label: "Response format", children: /* @__PURE__ */ jsxs5(NativeSelect, { value: responseFormat, onChange: (event) => onResponseFormatChange(event.target.value), children: [
       /* @__PURE__ */ jsx6("option", { value: "json", children: "JSON" }),
       /* @__PURE__ */ jsx6("option", { value: "text", children: "Text" }),
@@ -282,7 +336,7 @@ function TranscriptionOptions({
       /* @__PURE__ */ jsx6("option", { value: "verbose_json", children: "Verbose JSON" }),
       /* @__PURE__ */ jsx6("option", { value: "vtt", children: "VTT" })
     ] }) }),
-    /* @__PURE__ */ jsx6(Field, { label: "Temperature", children: /* @__PURE__ */ jsx6(Input5, { type: "number", min: "0", max: "1", step: "0.1", value: temperature, onChange: (event) => onTemperatureChange(event.target.value) }) })
+    /* @__PURE__ */ jsx6(Field, { label: "Temperature", children: /* @__PURE__ */ jsx6(Input5, { type: "number", min: "0", max: "1", step: "0.1", value: temperature, onChange: (event) => onTemperatureChange(event.target.value), className: "bg-[var(--md3-surface-container-low)]" }) })
   ] });
 }
 
@@ -326,7 +380,7 @@ function PublishPackageComposer({
           disabled: !connected,
           "aria-pressed": active,
           onClick: () => onDestinationToggle(destination.id),
-          className: `rounded-md border p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${active ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border hover:bg-muted/50"}`,
+          className: `rounded-md border p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${active ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border bg-[var(--md3-surface-container-low)] hover:bg-muted/50"}`,
           children: [
             /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1.5 text-xs font-medium text-foreground", children: [
@@ -341,10 +395,10 @@ function PublishPackageComposer({
         destination.id
       );
     }) }),
-    /* @__PURE__ */ jsx7(Field, { label: "Caption", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: caption, onChange: (event) => onCaptionChange(event.target.value), rows: 3, placeholder: "Write or generate the caption for selected destinations..." }) }),
-    /* @__PURE__ */ jsx7(Field, { label: "Description / CTA", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: postDescription, onChange: (event) => onDescriptionChange(event.target.value), rows: 2, placeholder: "Release note, product context, link, or approval instruction..." }) }),
+    /* @__PURE__ */ jsx7(Field, { label: "Caption", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: caption, onChange: (event) => onCaptionChange(event.target.value), rows: 3, placeholder: "Write or generate the caption for selected destinations...", className: "bg-[var(--md3-surface-container-low)]" }) }),
+    /* @__PURE__ */ jsx7(Field, { label: "Description / CTA", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: postDescription, onChange: (event) => onDescriptionChange(event.target.value), rows: 2, placeholder: "Release note, product context, link, or approval instruction...", className: "bg-[var(--md3-surface-container-low)]" }) }),
     /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ jsx7(Field, { label: "Mentions", className: "space-y-2", children: /* @__PURE__ */ jsx7(Input6, { value: mentions, onChange: (event) => onMentionsChange(event.target.value), placeholder: "@creator, @partner" }) }),
+      /* @__PURE__ */ jsx7(Field, { label: "Mentions", className: "space-y-2", children: /* @__PURE__ */ jsx7(Input6, { value: mentions, onChange: (event) => onMentionsChange(event.target.value), placeholder: "@creator, @partner", className: "bg-[var(--md3-surface-container-low)]" }) }),
       /* @__PURE__ */ jsx7(Field, { label: "Cadence", className: "space-y-2", children: /* @__PURE__ */ jsx7(NativeSelect, { value: cadence, onChange: (event) => onCadenceChange(event.target.value), children: CADENCES.map((option) => /* @__PURE__ */ jsx7("option", { value: option, children: option }, option)) }) })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 rounded-md bg-muted/40 p-2 text-xs text-muted-foreground", children: [
@@ -355,7 +409,7 @@ function PublishPackageComposer({
 }
 
 // src/studio-react/composer-hero.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var HUB_BASE_URL = "/api/integrations/hub";
 var SUGGESTIONS = [
   {
@@ -383,6 +437,8 @@ function ComposerHero({
   workspaceId,
   integrationsHref,
   canManageIntegrations,
+  align = "start",
+  surfaceClassName = "bg-card",
   onGenerated
 }) {
   const [type, setType] = useState2("image");
@@ -547,57 +603,61 @@ function ComposerHero({
     }
   }
   const mediaTypes = Object.entries(TYPE_CONFIG);
-  const hasInlineParams = type === "image" || type === "video" || type === "speech";
-  return /* @__PURE__ */ jsxs7("section", { className: "rounded-xl border border-border bg-card p-5 shadow-sm", children: [
-    /* @__PURE__ */ jsx8(Field, { label: "Media type", className: "space-y-1.5", children: /* @__PURE__ */ jsx8(
-      "div",
+  return /* @__PURE__ */ jsxs7("section", { className: `rounded-2xl border border-border p-5 shadow-sm ${surfaceClassName}`, children: [
+    /* @__PURE__ */ jsx8("div", { className: `mb-5 ${align === "center" ? "text-center" : "text-left"}`, children: /* @__PURE__ */ jsx8(
+      "h1",
       {
-        role: "tablist",
-        "aria-label": "Generation type",
-        className: "grid grid-cols-5 gap-1 rounded-lg border border-border bg-muted/40 p-1",
-        children: mediaTypes.map(([key, cfg]) => {
-          const Icon = cfg.icon;
-          const active = type === key;
-          return /* @__PURE__ */ jsxs7(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": active,
-              onClick: () => changeType(key),
-              className: `flex items-center justify-center gap-1.5 rounded-md px-2 py-2 text-xs font-medium transition-all ${active ? "bg-primary/15 text-primary shadow-sm ring-1 ring-inset ring-primary/30" : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground"}`,
-              children: [
-                /* @__PURE__ */ jsx8(Icon, { className: "h-4 w-4 shrink-0" }),
-                /* @__PURE__ */ jsx8("span", { className: "truncate", children: cfg.label })
-              ]
-            },
-            key
-          );
-        })
+        className: `font-semibold tracking-tight text-foreground transition-all duration-300 ${align === "center" ? "text-xl" : "text-base"}`,
+        children: "Media Generation"
       }
     ) }),
-    type !== "avatar" && /* @__PURE__ */ jsxs7("div", { className: "mt-4 space-y-2", children: [
-      /* @__PURE__ */ jsx8(Label2, { htmlFor: "studio-prompt", className: "block text-sm font-medium", children: "What do you want to create?" }),
+    /* @__PURE__ */ jsx8("div", { role: "tablist", "aria-label": "Generation type", className: "grid grid-cols-5 gap-1.5", children: mediaTypes.map(([key, cfg]) => {
+      const Icon = cfg.icon;
+      const active = type === key;
+      return /* @__PURE__ */ jsxs7(
+        "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-[11px] 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__ */ jsx8(Icon, { className: "h-[17px] w-[17px] shrink-0" }),
+            /* @__PURE__ */ jsx8("span", { className: "truncate", children: cfg.label })
+          ]
+        },
+        key
+      );
+    }) }),
+    type !== "avatar" && /* @__PURE__ */ jsxs7("div", { className: "mt-5", children: [
       /* @__PURE__ */ jsx8(
-        Textarea2,
+        Label2,
         {
-          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();
-            }
-          },
-          rows: 4,
-          placeholder: type === "transcription" ? "Optional vocabulary, speaker names, timestamp style, or context..." : "A vertical hero frame for a product launch teaser, dark cinematic lighting...",
-          className: "resize-none text-sm"
+          htmlFor: "studio-prompt",
+          className: "mb-1.5 block text-[10.5px] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+          children: "Prompt"
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx8("span", { children: "Try:" }),
-        SUGGESTIONS.map((suggestion) => /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs7("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__ */ jsx8(
+          "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();
+              }
+            },
+            rows: 4,
+            placeholder: type === "transcription" ? "Optional vocabulary, speaker names, timestamp style, or context..." : "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"
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap items-center gap-1.5 px-2.5 pb-2.5", children: SUGGESTIONS.map((suggestion) => /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -605,13 +665,13 @@ function ComposerHero({
               setPrompt(suggestion.prompt);
               changeType(suggestion.type);
             },
-            className: "rounded-full border border-border bg-background px-2.5 py-1 text-xs text-foreground/80 transition-colors hover:border-primary/40 hover:bg-muted",
+            className: "rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:border-primary/30 hover:text-primary",
             children: suggestion.label
           },
           suggestion.label
-        ))
+        )) })
       ] }),
-      type === "transcription" && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Optional \u2014 biases the transcript's spelling, vocabulary, and speaker names. It isn't an instruction for the model to follow." })
+      type === "transcription" && /* @__PURE__ */ jsx8("p", { className: "mt-2 text-xs text-muted-foreground", children: "Optional \u2014 biases the transcript's spelling, vocabulary, and speaker names. It isn't an instruction for the model to follow." })
     ] }),
     type === "avatar" && /* @__PURE__ */ jsx8(
       AvatarComposer,
@@ -633,33 +693,35 @@ function ComposerHero({
         onLanguageChange: setTranscriptionLanguage
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
-      /* @__PURE__ */ jsx8(
-        Field,
-        {
-          label: "Model",
-          htmlFor: "studio-media-model",
-          className: `space-y-1.5 ${hasInlineParams ? "" : "sm:col-span-2"}`,
-          children: /* @__PURE__ */ jsxs7(
-            Select,
-            {
-              value: selectedModel || void 0,
-              onValueChange: (value) => setSelectedModels((current) => ({ ...current, [type]: value })),
-              disabled: mediaModelsLoading || Boolean(mediaModelsError) || modelsForType.length === 0,
-              children: [
-                /* @__PURE__ */ jsx8(SelectTrigger, { id: "studio-media-model", className: "h-9 w-full", children: /* @__PURE__ */ jsx8(SelectValue, { placeholder: mediaModelsLoading ? "Loading models\u2026" : "Select a model" }) }),
-                /* @__PURE__ */ jsx8(SelectContent, { children: modelsForType.map((model) => /* @__PURE__ */ jsx8(SelectItem, { value: model.id, disabled: model.status === "unavailable", children: /* @__PURE__ */ jsxs7("span", { className: "flex w-full items-center justify-between gap-3", children: [
-                  /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
-                    model.name || model.id,
-                    model.provider ? ` \xB7 ${model.provider}` : ""
-                  ] }),
-                  model.status !== "available" && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] capitalize text-muted-foreground", children: model.status })
-                ] }) }, model.id)) })
-              ]
-            }
-          )
-        }
-      ),
+    /* @__PURE__ */ jsxs7("div", { className: "mt-5 space-y-3", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx8(Field, { label: "Model", htmlFor: "studio-media-model", children: /* @__PURE__ */ jsxs7(
+          Select,
+          {
+            value: selectedModel || void 0,
+            onValueChange: (value) => setSelectedModels((current) => ({ ...current, [type]: value })),
+            disabled: mediaModelsLoading || Boolean(mediaModelsError) || modelsForType.length === 0,
+            children: [
+              /* @__PURE__ */ jsx8(SelectTrigger, { id: "studio-media-model", className: "h-9 w-full bg-background", children: selectedModelOption ? /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx8("span", { className: "truncate", children: selectedModelOption.name || selectedModelOption.id }),
+                selectedModelOption.provider && /* @__PURE__ */ jsxs7("span", { className: "shrink-0 text-muted-foreground", children: [
+                  "\xB7 ",
+                  selectedModelOption.provider
+                ] }),
+                selectedModelOption.status !== "available" && /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning", children: selectedModelOption.status })
+              ] }) : /* @__PURE__ */ jsx8(SelectValue, { placeholder: mediaModelsLoading ? "Loading models\u2026" : "Select a model" }) }),
+              /* @__PURE__ */ jsx8(SelectContent, { className: "bg-background", children: modelsForType.map((model) => /* @__PURE__ */ jsx8(SelectItem, { value: model.id, disabled: model.status === "unavailable", children: /* @__PURE__ */ jsxs7("span", { className: "flex w-full items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
+                  model.name || model.id,
+                  model.provider ? ` \xB7 ${model.provider}` : ""
+                ] }),
+                model.status !== "available" && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[10px] capitalize text-muted-foreground", children: model.status })
+              ] }) }, model.id)) })
+            ]
+          }
+        ) }),
+        (mediaModelsError || modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length)) && /* @__PURE__ */ jsx8("p", { className: `text-xs ${mediaModelsError || selectedModelOption?.status === "unavailable" ? "text-destructive" : "text-muted-foreground"}`, children: mediaModelsError ?? modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length) })
+      ] }),
       type === "image" && /* @__PURE__ */ jsx8(
         ImageComposer,
         {
@@ -686,8 +748,6 @@ function ComposerHero({
       ),
       type === "speech" && /* @__PURE__ */ jsx8(SpeechComposer, { voice, onVoiceChange: setVoice })
     ] }),
-    (mediaModelsError || modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length)) && /* @__PURE__ */ jsx8("p", { className: `mt-2 text-xs ${mediaModelsError || selectedModelOption?.status === "unavailable" ? "text-destructive" : "text-muted-foreground"}`, children: mediaModelsError ?? modelMessage(selectedModelOption, mediaModelsLoading, modelsForType.length) }),
-    error && /* @__PURE__ */ jsx8("div", { className: "mt-3 rounded-md border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
     /* @__PURE__ */ jsxs7("div", { className: "mt-4 space-y-2", children: [
       /* @__PURE__ */ jsx8(ComposerDisclosure, { summary: "Advanced options", children: /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsx8(Field, { label: "Negative prompt", children: /* @__PURE__ */ jsx8(
@@ -696,10 +756,11 @@ function ComposerHero({
             value: negativePrompt,
             onChange: (event) => setNegativePrompt(event.target.value),
             rows: 2,
-            placeholder: "Avoid artifacts, off-style composition..."
+            placeholder: "Avoid artifacts, off-style composition...",
+            className: "bg-[var(--md3-surface-container-low)]"
           }
         ) }),
-        /* @__PURE__ */ jsx8(Field, { label: "Save to", children: /* @__PURE__ */ jsx8(Input7, { value: outputPath, onChange: (event) => setOutputPath(event.target.value) }) }),
+        /* @__PURE__ */ jsx8(Field, { label: "Save to", children: /* @__PURE__ */ jsx8(Input7, { value: outputPath, onChange: (event) => setOutputPath(event.target.value), className: "bg-[var(--md3-surface-container-low)]" }) }),
         type === "transcription" && /* @__PURE__ */ jsx8(
           TranscriptionOptions,
           {
@@ -713,7 +774,7 @@ function ComposerHero({
       /* @__PURE__ */ jsx8(
         ComposerDisclosure,
         {
-          summary: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          summary: /* @__PURE__ */ jsxs7(Fragment2, { children: [
             "Schedule a post",
             selectedConnectedDestinations.length > 0 && /* @__PURE__ */ jsx8(Badge2, { variant: "outline", className: "ml-1 text-[10px]", children: selectedConnectedDestinations.length })
           ] }),
@@ -744,7 +805,8 @@ function ComposerHero({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7(Button2, { onClick: generate, disabled: !canSubmit, size: "lg", className: "mt-4 w-full", children: [
+    error && /* @__PURE__ */ jsx8("div", { className: "mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsxs7(Button2, { onClick: generate, disabled: !canSubmit, size: "lg", className: "mt-5 w-full", children: [
       /* @__PURE__ */ jsx8(Sparkles, { className: "mr-2 h-4 w-4" }),
       "Generate",
       /* @__PURE__ */ jsx8("span", { className: "ml-2 text-[10px] opacity-60", children: "\u2318\u21B5" })
@@ -864,12 +926,11 @@ import { useMemo as useMemo3 } from "react";
 import { Link as Link3 } from "react-router";
 import {
   Button as Button5,
-  EmptyState,
   Tabs,
   TabsList,
   TabsTrigger
 } from "@tangle-network/sandbox-ui/primitives";
-import { ArrowLeft, DollarSign, Film as Film2, FolderOpen as FolderOpen2, Sparkles as Sparkles3, X } from "lucide-react";
+import { ArrowLeft, DollarSign, FolderOpen as FolderOpen2, X } from "lucide-react";
 
 // src/studio-react/studio-sheet.tsx
 import * as Dialog from "@radix-ui/react-dialog";
@@ -896,6 +957,10 @@ function StudioSheet({
   ] }) });
 }
 
+// src/studio-react/generation-grid.tsx
+import { EmptyState } from "@tangle-network/sandbox-ui/primitives";
+import { Film as Film2, Sparkles as Sparkles3 } from "lucide-react";
+
 // src/studio-react/generation-card.tsx
 import { Card, CardContent, Badge as Badge4 } from "@tangle-network/sandbox-ui/primitives";
 import { Send } from "lucide-react";
@@ -951,11 +1016,36 @@ function GenerationStatusBadge({
   return /* @__PURE__ */ jsx12("div", { className: inline ? "" : "absolute bottom-2 left-2", children: /* @__PURE__ */ jsx12(Badge4, { variant: "outline", className: `${className} text-[10px] backdrop-blur-sm`, children: label }) });
 }
 
+// src/studio-react/generation-grid.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function filterGenerations(generations, typeFilter) {
+  if (!typeFilter || !isGenerationType(typeFilter)) return generations;
+  return generations.filter((generation) => generation.type === typeFilter);
+}
+function GenerationGrid({
+  generations,
+  typeFilter,
+  onSelect
+}) {
+  if (generations.length === 0) {
+    return /* @__PURE__ */ jsx13(
+      EmptyState,
+      {
+        icon: typeFilter ? /* @__PURE__ */ jsx13(Film2, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx13(Sparkles3, { 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__ */ jsx13("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: generations.map((generation) => /* @__PURE__ */ jsx13(GenerationCard, { generation, onSelect }, generation.id)) });
+}
+
 // src/studio-react/generation-detail.tsx
 import { Link as Link2 } from "react-router";
 import { Badge as Badge5, Button as Button4 } from "@tangle-network/sandbox-ui/primitives";
 import { FolderOpen } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function GenerationDetail({
   generation,
   vaultHref,
@@ -966,46 +1056,46 @@ function GenerationDetail({
   const vaultPath = generationVaultPath(generation);
   const href = vaultHref && vaultPath ? vaultHref(vaultPath) : null;
   return /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx13("div", { className: "overflow-hidden rounded-lg bg-muted/50", children: generation.type === "image" && generation.result ? /* @__PURE__ */ jsx13("img", { src: generation.result, alt: generation.prompt, className: "max-h-[420px] w-full object-contain" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx13("video", { src: generation.result, controls: true, className: "max-h-[420px] w-full" }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx13("div", { className: "p-6", children: /* @__PURE__ */ jsx13("audio", { src: generation.result, controls: true, className: "w-full" }) }) : /* @__PURE__ */ jsx13("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx13(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }) }),
+    /* @__PURE__ */ jsx14("div", { className: "overflow-hidden rounded-lg bg-muted/50", children: generation.type === "image" && generation.result ? /* @__PURE__ */ jsx14("img", { src: generation.result, alt: generation.prompt, className: "max-h-[420px] w-full object-contain" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx14("video", { src: generation.result, controls: true, className: "max-h-[420px] w-full" }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx14("div", { className: "p-6", children: /* @__PURE__ */ jsx14("audio", { src: generation.result, controls: true, className: "w-full" }) }) : /* @__PURE__ */ jsx14("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx14(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }) }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx13(Badge5, { variant: "outline", className: cfg.color, children: cfg.label }),
-      /* @__PURE__ */ jsx13(GenerationStatusBadge, { generation, inline: true }),
-      generationError(generation) && /* @__PURE__ */ jsx13("span", { className: "text-xs text-destructive", children: generationError(generation) })
+      /* @__PURE__ */ jsx14(Badge5, { variant: "outline", className: cfg.color, children: cfg.label }),
+      /* @__PURE__ */ jsx14(GenerationStatusBadge, { generation, inline: true }),
+      generationError(generation) && /* @__PURE__ */ jsx14("span", { className: "text-xs text-destructive", children: generationError(generation) })
     ] }),
     /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Prompt" }),
-      /* @__PURE__ */ jsx13("p", { className: "text-sm text-foreground", children: generation.prompt })
+      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Prompt" }),
+      /* @__PURE__ */ jsx14("p", { className: "text-sm text-foreground", children: generation.prompt })
     ] }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-4", children: [
       generation.model && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx13("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Model" }),
-        /* @__PURE__ */ jsx13("span", { className: "text-xs text-foreground", children: generation.model })
+        /* @__PURE__ */ jsx14("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Model" }),
+        /* @__PURE__ */ jsx14("span", { className: "text-xs text-foreground", children: generation.model })
       ] }),
       generation.cost != null && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx13("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Cost" }),
+        /* @__PURE__ */ jsx14("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Cost" }),
         /* @__PURE__ */ jsxs12("span", { className: "text-xs text-foreground", children: [
           "$",
           generation.cost.toFixed(4)
         ] })
       ] }),
       generation.createdAt && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx13("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Created" }),
-        /* @__PURE__ */ jsx13("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsx14("span", { className: "block text-[10px] font-medium text-muted-foreground", children: "Created" }),
+        /* @__PURE__ */ jsx14("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString() })
       ] })
     ] }),
     generation.type === "transcription" && generation.result && /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Transcription" }),
-      /* @__PURE__ */ jsx13("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-muted/50 p-4 text-sm text-foreground", children: generation.result })
+      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Transcription" }),
+      /* @__PURE__ */ jsx14("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-muted/50 p-4 text-sm text-foreground", children: generation.result })
     ] }),
-    href && /* @__PURE__ */ jsx13("div", { className: "border-t border-border pt-2", children: /* @__PURE__ */ jsx13(Link2, { to: href, prefetch: "intent", onClick: onNavigate, children: /* @__PURE__ */ jsxs12(Button4, { size: "sm", variant: "outline", children: [
-      /* @__PURE__ */ jsx13(FolderOpen, { className: "mr-1.5 h-3.5 w-3.5" }),
+    href && /* @__PURE__ */ jsx14("div", { className: "border-t border-border pt-2", children: /* @__PURE__ */ jsx14(Link2, { to: href, prefetch: "intent", onClick: onNavigate, children: /* @__PURE__ */ jsxs12(Button4, { size: "sm", variant: "outline", children: [
+      /* @__PURE__ */ jsx14(FolderOpen, { className: "mr-1.5 h-3.5 w-3.5" }),
       "Open in Vault"
     ] }) }) })
   ] });
 }
 
 // src/studio-react/library-drawer.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function LibraryDrawer({
   open,
   onOpenChange,
@@ -1017,10 +1107,7 @@ function LibraryDrawer({
   selected,
   onSelect
 }) {
-  const visible = useMemo3(() => {
-    if (!typeFilter || !isGenerationType(typeFilter)) return generations;
-    return generations.filter((generation) => generation.type === typeFilter);
-  }, [generations, typeFilter]);
+  const visible = useMemo3(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
   return /* @__PURE__ */ jsxs13(StudioSheet, { open, onOpenChange, title: "Asset library", children: [
     /* @__PURE__ */ jsxs13("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
       selected ? /* @__PURE__ */ jsxs13(
@@ -1030,30 +1117,30 @@ function LibraryDrawer({
           onClick: () => onSelect(null),
           className: "flex items-center gap-1.5 text-sm font-medium text-foreground transition-colors hover:text-primary",
           children: [
-            /* @__PURE__ */ jsx14(ArrowLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx15(ArrowLeft, { className: "h-4 w-4" }),
             "Back to library"
           ]
         }
-      ) : /* @__PURE__ */ jsx14("h2", { className: "text-sm font-semibold text-foreground", children: "Asset library" }),
-      /* @__PURE__ */ jsx14(
+      ) : /* @__PURE__ */ jsx15("h2", { className: "text-sm font-semibold text-foreground", children: "Asset library" }),
+      /* @__PURE__ */ jsx15(
         "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__ */ jsx14(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx15(X, { className: "h-4 w-4" })
         }
       )
     ] }),
-    selected ? /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx14(
+    selected ? /* @__PURE__ */ jsx15("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx15(
       GenerationDetail,
       {
         generation: selected,
         vaultHref,
         onNavigate: () => onOpenChange(false)
       }
-    ) }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    ) }) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
       /* @__PURE__ */ jsxs13("div", { className: "shrink-0 border-b border-border px-4 pt-3", children: [
         /* @__PURE__ */ jsxs13("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
@@ -1063,36 +1150,28 @@ function LibraryDrawer({
               visible.length !== 1 ? "s" : ""
             ] }),
             /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx14(DollarSign, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx15(DollarSign, { className: "h-3 w-3" }),
               totalCost.toFixed(2),
               " spent"
             ] })
           ] }),
-          vaultHref && /* @__PURE__ */ jsx14(Link3, { to: vaultHref(), prefetch: "intent", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsxs13(Button5, { size: "sm", variant: "outline", children: [
-            /* @__PURE__ */ jsx14(FolderOpen2, { className: "mr-1.5 h-3.5 w-3.5" }),
+          vaultHref && /* @__PURE__ */ jsx15(Link3, { to: vaultHref(), prefetch: "intent", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsxs13(Button5, { size: "sm", variant: "outline", children: [
+            /* @__PURE__ */ jsx15(FolderOpen2, { className: "mr-1.5 h-3.5 w-3.5" }),
             "Vault"
           ] }) })
         ] }),
-        /* @__PURE__ */ jsx14(Tabs, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs13(TabsList, { className: "h-9 w-full justify-start gap-1 overflow-x-auto bg-transparent", children: [
-          /* @__PURE__ */ jsx14(TabsTrigger, { value: "all", className: "text-xs", children: "All" }),
-          Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx14(TabsTrigger, { value: key, className: "text-xs", children: cfg.label }, key))
+        /* @__PURE__ */ jsx15(Tabs, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs13(TabsList, { className: "h-9 w-full justify-start gap-1 overflow-x-auto bg-transparent", children: [
+          /* @__PURE__ */ jsx15(TabsTrigger, { value: "all", className: "text-xs", children: "All" }),
+          Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx15(TabsTrigger, { value: key, className: "text-xs", children: cfg.label }, key))
         ] }) })
       ] }),
-      /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-y-auto p-4", children: visible.length === 0 ? /* @__PURE__ */ jsx14(
-        EmptyState,
-        {
-          icon: typeFilter ? /* @__PURE__ */ jsx14(Film2, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx14(Sparkles3, { 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"
-        }
-      ) : /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: visible.map((generation) => /* @__PURE__ */ jsx14(GenerationCard, { generation, onSelect }, generation.id)) }) })
+      /* @__PURE__ */ jsx15("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx15(GenerationGrid, { generations: visible, typeFilter, onSelect }) })
     ] })
   ] });
 }
 
 // src/studio-react/studio-workspace.tsx
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function StudioWorkspace({
   generations,
   totalCost,
@@ -1128,7 +1207,7 @@ function StudioWorkspace({
     setDrawerOpen(true);
   }
   return /* @__PURE__ */ jsxs14("div", { className: "min-h-0 flex-1 overflow-y-auto bg-background", children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       StudioHeader,
       {
         count: mergedGenerations.length,
@@ -1136,8 +1215,8 @@ function StudioWorkspace({
         onOpenLibrary: openLibrary
       }
     ),
-    /* @__PURE__ */ jsx15("div", { className: "mx-auto w-full max-w-3xl space-y-4 px-4 py-6 sm:px-6", children: canGenerate ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16("div", { className: "mx-auto w-full max-w-3xl space-y-4 px-4 py-6 sm:px-6", children: canGenerate ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(
         ComposerHero,
         {
           workspaceId,
@@ -1151,7 +1230,7 @@ function StudioWorkspace({
           }
         }
       ),
-      /* @__PURE__ */ jsx15("div", { ref: canvasRef, children: /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16("div", { ref: canvasRef, children: /* @__PURE__ */ jsx16(
         ResultCanvas,
         {
           batch: latestBatch,
@@ -1160,15 +1239,15 @@ function StudioWorkspace({
         }
       ) })
     ] }) : /* @__PURE__ */ jsxs14("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__ */ jsx15("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx15(Images2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
-      /* @__PURE__ */ jsx15("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__ */ jsx15("p", { className: "max-w-sm text-xs text-muted-foreground", children: "When workspace members generate images, video, voice, avatars, or transcripts, they appear in the library." }),
+      /* @__PURE__ */ jsx16("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx16(Images2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
+      /* @__PURE__ */ jsx16("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__ */ jsx16("p", { className: "max-w-sm text-xs text-muted-foreground", children: "When workspace members generate images, video, voice, avatars, or transcripts, they appear in the library." }),
       /* @__PURE__ */ jsxs14(Button6, { size: "sm", variant: "outline", onClick: openLibrary, children: [
-        /* @__PURE__ */ jsx15(Images2, { className: "mr-1.5 h-4 w-4" }),
+        /* @__PURE__ */ jsx16(Images2, { className: "mr-1.5 h-4 w-4" }),
         "Open library"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       LibraryDrawer,
       {
         open: drawerOpen,
@@ -1190,6 +1269,78 @@ function StudioWorkspace({
     )
   ] });
 }
+
+// src/studio-react/library-panel.tsx
+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 jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function LibraryPanel({
+  generations,
+  totalCost,
+  typeFilter,
+  onFilterChange,
+  onSelect
+}) {
+  const visible = useMemo4(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
+  return /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx17(Tabs2, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs15(TabsList2, { className: "h-9 justify-start gap-1 overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-[var(--md3-surface-container-low)] p-1", children: [
+        /* @__PURE__ */ jsx17(
+          TabsTrigger2,
+          {
+            value: "all",
+            className: "rounded-md px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[state=active]:bg-primary/10 data-[state=active]:font-semibold data-[state=active]:text-primary data-[state=active]:shadow-none",
+            children: "All"
+          }
+        ),
+        Object.entries(TYPE_CONFIG).map(([key, cfg]) => /* @__PURE__ */ jsx17(
+          TabsTrigger2,
+          {
+            value: key,
+            className: "rounded-md px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[state=active]:bg-primary/10 data-[state=active]:font-semibold data-[state=active]:text-primary data-[state=active]:shadow-none",
+            children: cfg.label
+          },
+          key
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs15("span", { children: [
+          visible.length,
+          " generation",
+          visible.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs15("span", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx17(DollarSign2, { className: "h-3 w-3" }),
+          totalCost.toFixed(2),
+          " spent"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(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 jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function GenerationDetailModal({
+  generation,
+  vaultHref,
+  onClose
+}) {
+  const cfg = generation ? typeConfigFor(generation.type) : null;
+  return /* @__PURE__ */ jsx18(Dialog2, { open: generation != null, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs16(DialogContent, { className: "max-h-[85vh] max-w-2xl overflow-y-auto", children: [
+    /* @__PURE__ */ jsx18(DialogHeader, { children: /* @__PURE__ */ jsx18(DialogTitle, { className: "text-left text-base", children: cfg?.label ?? "Generation" }) }),
+    generation && /* @__PURE__ */ jsx18(GenerationDetail, { generation, vaultHref, onNavigate: onClose })
+  ] }) });
+}
 export {
   AvatarComposer,
   ComposerDisclosure,
@@ -1197,13 +1348,17 @@ export {
   Field,
   GenerationCard,
   GenerationDetail,
+  GenerationDetailModal,
+  GenerationGrid,
   GenerationStatusBadge,
   ImageComposer,
   LibraryDrawer,
+  LibraryPanel,
   NativeSelect,
   PublishPackageComposer,
   ResultCanvas,
   SpeechComposer,
+  Stepper,
   StudioHeader,
   StudioSheet,
   StudioWorkspace,
@@ -1211,6 +1366,7 @@ export {
   TranscriptionComposer,
   TranscriptionOptions,
   VideoComposer,
+  filterGenerations,
   typeConfigFor,
   useStudioGenerations
 };