@vivix-labs/project-studio 0.0.0-stage → 1.0.0-beta

package/dist/client.bundle.js

@@ -0,0 +1,1373 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/project-studio/src/cost.ts
+function taskCostLabel(task) {
+  const cost = task.cost;
+  if (cost?.status === "settled" && cost.credits != null) return `${cost.credits} credits`;
+  if (cost?.status === "pending") return "Pending settlement";
+  return "-";
+}
+var init_cost = __esm({
+  "packages/project-studio/src/cost.ts"() {
+    "use strict";
+  }
+});
+
+// packages/ui-system/dist/icon.js
+import { jsx as _jsx } from "react/jsx-runtime";
+function Icon({ name, size }) {
+  return _jsx("span", { "aria-hidden": "true", className: "vx-icon", "data-icon": name, style: size === void 0 ? void 0 : { "--vx-icon-size": `${size}px` } });
+}
+var init_icon = __esm({
+  "packages/ui-system/dist/icon.js"() {
+    "use strict";
+  }
+});
+
+// packages/ui-system/dist/button-variants.js
+var buttonVariants;
+var init_button_variants = __esm({
+  "packages/ui-system/dist/button-variants.js"() {
+    "use strict";
+    buttonVariants = {
+      "text-filled-sm": { size: 32, appearance: "filled", shape: "text", width: 215 },
+      "text-filled-leading-sm": { size: 32, appearance: "filled", shape: "text" },
+      "text-ghost-sm": { size: 32, appearance: "ghost", shape: "text" },
+      "text-on-content-sm": { size: 32, appearance: "on-content", shape: "text" },
+      "text-tonal-sm": { size: 32, appearance: "tonal", shape: "text" },
+      // The medium recipes are shared by all dialog footer actions.
+      "text-filled-md": { size: 40, appearance: "filled", shape: "text" },
+      "text-tonal-md": { size: 40, appearance: "tonal", shape: "text" },
+      "text-ghost-md": { size: 40, appearance: "ghost", shape: "text" },
+      "icon-ghost-md": { size: 40, appearance: "ghost", shape: "icon" },
+      "text-filled-lg": { size: 44, appearance: "filled", shape: "text", width: 412 },
+      "text-tonal-lg": { size: 44, appearance: "tonal", shape: "text", width: 412 },
+      "text-outline-lg": {
+        size: 44,
+        appearance: "outline",
+        shape: "text",
+        width: 412
+      },
+      "pill-filled": { size: 44, appearance: "filled", shape: "pill" },
+      "pill-plain": { size: 48, appearance: "plain", shape: "pill" },
+      "pill-small": { size: 32, appearance: "plain", shape: "pill" },
+      "icon-outline-sm": { size: 32, appearance: "outline", shape: "icon" },
+      "icon-on-content": { size: 24, appearance: "on-content", shape: "icon" },
+      "icon-outline-lg": { size: 48, appearance: "outline", shape: "icon" },
+      // Compact bare action: reuse the transparent/default and surface-hover ghost treatment.
+      "icon-bare-xs": { size: 24, appearance: "ghost", shape: "icon" },
+      "icon-ghost-sm": { size: 32, appearance: "ghost", shape: "icon" },
+      "icon-ghost-lg": { size: 48, appearance: "ghost", shape: "icon" },
+      "icon-circle-sm": { size: 32, appearance: "filled", shape: "circle" },
+      "icon-circle-lg": { size: 44, appearance: "filled", shape: "circle" }
+    };
+  }
+});
+
+// packages/ui-system/dist/button.js
+import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
+function ButtonFrame({ label, variant, loading = false, width, children, disabled, type = "button", style, className, ...props }) {
+  const spec = buttonVariants[variant];
+  const buttonStyle = "width" in spec ? { ...style, "--vx-button-width": `${spec.width}px` } : style;
+  return _jsxs("button", { ...props, type, className: className ? `vx-button ${className}` : "vx-button", "data-variant": variant, "data-appearance": spec.appearance, "data-shape": spec.shape, "data-size": spec.size, "data-width": width, "data-state": loading ? "loading" : disabled ? "disabled" : "default", style: buttonStyle, disabled: disabled || loading, "aria-label": label, "aria-busy": loading || void 0, children: [_jsx2("span", { className: "vx-button-content", children }), loading && _jsx2("span", { className: "vx-button-loading", "aria-hidden": "true" })] });
+}
+function Button({ variant = "text-filled-sm", leadingIcon, trailingIcon, ...props }) {
+  return _jsxs(ButtonFrame, { ...props, variant, children: [leadingIcon && _jsx2(Icon, { name: leadingIcon }), _jsx2("span", { className: "vx-button-label", children: props.label }), trailingIcon && _jsx2("span", { className: "vx-button-trailing", children: _jsx2(Icon, { name: trailingIcon }) })] });
+}
+var init_button = __esm({
+  "packages/ui-system/dist/button.js"() {
+    "use strict";
+    init_icon();
+    init_button_variants();
+  }
+});
+
+// packages/ui-system/dist/dropdown.js
+import { jsx as _jsx3, jsxs as _jsxs2 } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+function Dropdown({ label, options, value, onValueChange, placeholder = "Select an option", size = "medium", width = "fixed", disabled = false }) {
+  const id = useId();
+  const activeOption = useRef(null);
+  const search = useRef({ query: "", time: 0 });
+  const [open, setOpen] = useState(false);
+  const [highlighted, setHighlighted] = useState(null);
+  const enabled = options.filter((option) => !option.disabled);
+  const canOpen = !disabled && enabled.length > 0;
+  const expanded = canOpen && open;
+  const selected = options.find((option) => option.value === value);
+  const active = enabled.find((option) => option.value === highlighted) ?? enabled.find((option) => option.value === value) ?? enabled[0];
+  const activeIndex = active ? enabled.indexOf(active) : -1;
+  useEffect(() => {
+    if (expanded)
+      activeOption.current?.scrollIntoView({ block: "nearest" });
+  }, [expanded, active?.value]);
+  useEffect(() => {
+    if (!canOpen) {
+      setOpen(false);
+      setHighlighted(null);
+    }
+  }, [canOpen]);
+  function close() {
+    search.current = { query: "", time: 0 };
+    setHighlighted(null);
+    setOpen(false);
+  }
+  function choose(option) {
+    close();
+    if (option && !option.disabled && option.value !== value)
+      onValueChange(option.value);
+  }
+  function handleKey(event) {
+    if (!canOpen || event.nativeEvent.isComposing)
+      return;
+    const { key } = event;
+    if (key === "Tab") {
+      if (expanded)
+        choose(active);
+      return;
+    }
+    if (key === "Escape") {
+      if (!expanded)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      if (expanded)
+        choose(active);
+      else
+        setOpen(true);
+      return;
+    }
+    if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+      event.preventDefault();
+      if (event.altKey && key === "ArrowUp" && expanded) {
+        choose(active);
+        return;
+      }
+      setOpen(true);
+      let index = activeIndex;
+      if (key === "Home")
+        index = 0;
+      else if (key === "End")
+        index = enabled.length - 1;
+      else if (expanded && !event.altKey) {
+        const step = key === "ArrowDown" ? 1 : -1;
+        index = Math.max(0, Math.min(activeIndex + step, enabled.length - 1));
+      }
+      setHighlighted(enabled[index]?.value ?? null);
+      return;
+    }
+    if (key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+      return;
+    event.preventDefault();
+    const char = key.toLocaleLowerCase();
+    const previous = performance.now() - search.current.time < 500 ? search.current.query : "";
+    const repeated = previous.length > 0 && [...previous].every((letter) => letter === char);
+    const query = repeated ? char : previous + char;
+    search.current = { query, time: performance.now() };
+    const start = previous && !repeated ? activeIndex : activeIndex + 1;
+    const ordered = [...enabled.slice(start), ...enabled.slice(0, start)];
+    const match = ordered.find((option) => option.label.toLocaleLowerCase().startsWith(query));
+    setOpen(true);
+    if (match)
+      setHighlighted(match.value);
+  }
+  return _jsxs2("div", { className: "vx-dropdown", "data-size": size, "data-width": width, children: [_jsxs2("button", { type: "button", role: "combobox", className: "vx-dropdown-trigger", "aria-label": label, "aria-expanded": expanded, "aria-controls": `${id}-listbox`, "aria-activedescendant": expanded && active ? `${id}-option-${options.indexOf(active)}` : void 0, disabled: !canOpen, onClick: () => expanded ? close() : setOpen(true), onBlur: close, onKeyDown: handleKey, children: [_jsxs2("span", { className: "vx-dropdown-value", children: [selected?.icon && _jsx3(Icon, { name: selected.icon }), _jsx3("span", { children: selected?.label ?? placeholder })] }), _jsx3(Icon, { name: expanded ? "chevron-up" : "chevron-down" })] }), _jsx3("ul", { id: `${id}-listbox`, role: "listbox", "aria-label": label, hidden: !expanded, children: options.map((option, index) => _jsxs2("li", { id: `${id}-option-${index}`, ref: active === option ? activeOption : void 0, role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled || void 0, "data-active": active === option, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+    if (!option.disabled)
+      choose(option);
+  }, children: [option.icon && _jsx3(Icon, { name: option.icon }), option.label, width === "hug" && option.value === value && _jsx3(Icon, { name: "check" })] }, option.value)) })] });
+}
+var init_dropdown = __esm({
+  "packages/ui-system/dist/dropdown.js"() {
+    "use strict";
+    init_icon();
+  }
+});
+
+// packages/ui-system/dist/segmented-control.js
+import { jsx as _jsx4, jsxs as _jsxs3 } from "react/jsx-runtime";
+import { useId as useId2 } from "react";
+function SegmentedControl({ label, items, value, onValueChange, size = "medium", width = "fixed", iconOnly = false }) {
+  const id = useId2();
+  return _jsx4("div", { role: "radiogroup", "aria-label": label, className: "vx-segment", "data-size": size, "data-width": width, "data-icon-only": iconOnly, children: items.map((item) => _jsxs3("label", { children: [_jsx4("input", { type: "radio", name: id, value: item.value, disabled: item.disabled, checked: item.value === value, "aria-label": item.label, onChange: () => onValueChange(item.value) }), _jsxs3("span", { className: "vx-segment-item", children: [item.icon && _jsx4(Icon, { name: item.icon }), (!iconOnly || !item.icon) && item.label] })] }, item.value)) });
+}
+var init_segmented_control = __esm({
+  "packages/ui-system/dist/segmented-control.js"() {
+    "use strict";
+    init_icon();
+  }
+});
+
+// packages/ui-system/dist/input.js
+import { jsx as _jsx5, jsxs as _jsxs4 } from "react/jsx-runtime";
+function TextInput({ label, value, onValueChange, size = "medium", ...props }) {
+  return _jsxs4("label", { className: "vx-field", "data-size": size, children: [_jsx5("span", { children: label }), _jsx5("input", { ...props, type: "text", value, onChange: (event) => onValueChange(event.currentTarget.value) })] });
+}
+var init_input = __esm({
+  "packages/ui-system/dist/input.js"() {
+    "use strict";
+  }
+});
+
+// packages/ui-system/dist/index.js
+var init_dist = __esm({
+  "packages/ui-system/dist/index.js"() {
+    "use strict";
+    init_button();
+    init_dropdown();
+    init_segmented_control();
+    init_input();
+  }
+});
+
+// packages/project-studio/src/ui/reference-picker.tsx
+import * as React from "react";
+function referenceRoles(model, operation) {
+  if (model?.modality === "image" && model.requires_explicit_source_roles === false && Array.isArray(model.source_roles) && model.source_roles.length === 0 && operation === "image.edit" && model.operations?.some((o) => o.name === operation)) {
+    return [
+      {
+        role: "implicit-image",
+        kind: "image",
+        min_items: 1,
+        max_items: 1,
+        supports_weight: false,
+        derived: true
+      }
+    ];
+  }
+  return model?.source_roles || [];
+}
+function roleLabel(role) {
+  const labels = {
+    "implicit-image": "Reference image",
+    "first-frame": "First frame",
+    "last-frame": "Last frame",
+    reference: "Reference file",
+    "reference-image": "Reference image",
+    "reference-video": "Reference video",
+    "reference-audio": "Reference audio",
+    style: "Style reference"
+  };
+  return labels[role.replaceAll("_", "-")] || role.replaceAll("_", " ").replaceAll("-", " ");
+}
+function Thumbnail({ bridge, projectId, studio, asset, version }) {
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    let current = true;
+    setUrl("");
+    setError("");
+    if (asset && version)
+      bridge.project(projectId, studio, "files.resolveLocation", {
+        ref: { storeId: asset.storeId, objectId: asset.objectId, versionId: version.versionId }
+      }).then((value) => {
+        if (current) setUrl(value.previewUrl);
+      }).catch((e) => {
+        if (current) setError(e.message);
+      });
+    return () => {
+      current = false;
+    };
+  }, [projectId, studio, asset?.objectId, version?.versionId]);
+  if (!url) return /* @__PURE__ */ React.createElement("span", { className: "sub" }, error || "Loading\u2026");
+  if (asset.data.kind === "image") return /* @__PURE__ */ React.createElement("img", { src: url, alt: asset.data.name });
+  if (asset.data.kind === "video")
+    return /* @__PURE__ */ React.createElement("video", { src: url, preload: "metadata", muted: true, "aria-label": asset.data.name });
+  return /* @__PURE__ */ React.createElement("span", { className: "sub" }, asset.data.kind === "audio" ? "\u266A Audio" : asset.data.name);
+}
+function ReferenceInputs({
+  bridge,
+  projectId,
+  studio,
+  capability,
+  draft,
+  changeDraft,
+  attempt,
+  onInputKinds
+}) {
+  const [assets, setAssets] = React.useState([]);
+  const [search, setSearch] = React.useState("");
+  const [nextOffset, setNextOffset] = React.useState(null);
+  const uploadInput = React.useRef(null);
+  const [picker, setPicker] = React.useState(false);
+  const [editing, setEditing] = React.useState(null);
+  const [assetId, setAssetId] = React.useState("");
+  const [versionId, setVersionId] = React.useState("");
+  const [role, setRole] = React.useState("");
+  const [fixedRole, setFixedRole] = React.useState("");
+  const sequence = React.useRef(0);
+  const scope = React.useRef("");
+  const scopeKey = JSON.stringify([projectId, studio, search]);
+  scope.current = scopeKey;
+  const load = async (offset = 0) => {
+    const current = ++sequence.current;
+    const page = await bridge.project(projectId, studio, "assets.list", {
+      search,
+      limit: 50,
+      offset
+    });
+    if (sequence.current !== current || scope.current !== scopeKey) return;
+    setAssets(
+      (old) => offset ? [...old, ...page.items.filter((a) => !old.some((x) => x.objectId === a.objectId))] : page.items
+    );
+    setNextOffset(page.nextOffset);
+  };
+  React.useEffect(() => {
+    void attempt(() => load());
+  }, [projectId, studio, search]);
+  let inputs = [], error = "";
+  try {
+    inputs = JSON.parse(draft.inputs);
+    if (!Array.isArray(inputs)) throw Error("Reference file could not be read. Select it again.");
+  } catch (e) {
+    error = e.message;
+  }
+  const referenceOperation = capability?.modality === "image" && capability.operations?.some((operation) => operation.name === "image.edit") ? "image.edit" : draft.capabilityId;
+  const roles = referenceRoles(capability, referenceOperation);
+  const asset = assets.find((a) => a.objectId === assetId);
+  const compatibleRoles = roles.filter(
+    (r) => kinds(r).includes(asset?.data.kind) && (!fixedRole || roleId(r) === fixedRole)
+  );
+  const selectedRole = compatibleRoles.find((r) => roleId(r) === role);
+  React.useEffect(() => {
+    if (asset && compatibleRoles.length === 1 && role !== roleId(compatibleRoles[0]))
+      setRole(roleId(compatibleRoles[0]));
+  }, [assetId, capability, fixedRole, role]);
+  React.useEffect(() => {
+    if (error) return;
+    let current = true;
+    const missing = [...new Set(inputs.map((i) => i.ref?.objectId))].filter(
+      (id) => id && !assets.some((a) => a.objectId === id)
+    );
+    if (missing.length)
+      void attempt(async () => {
+        const records = await Promise.all(
+          missing.map((id) => bridge.project(projectId, studio, "assets.get", { assetId: id }))
+        );
+        if (current)
+          setAssets((old) => [
+            ...old,
+            ...records.filter((a) => !old.some((x) => x.objectId === a.objectId))
+          ]);
+      });
+    onInputKinds(inputs.map((i) => assets.find((a) => a.objectId === i.ref?.objectId)?.data.kind));
+    return () => {
+      current = false;
+    };
+  }, [projectId, studio, assets, draft.inputs]);
+  const update = (value) => changeDraft({
+    inputs: JSON.stringify(
+      value.map((item, order) => ({ ...item, order })),
+      null,
+      2
+    )
+  });
+  const open = (targetRole = "", index = null) => {
+    const existing = index === null ? null : inputs[index];
+    setEditing(index);
+    setFixedRole(targetRole);
+    setRole(existing?.role || targetRole);
+    setAssetId(existing?.ref?.objectId || "");
+    setVersionId(existing?.ref?.versionId || "");
+    setPicker(true);
+  };
+  const pick = (record) => {
+    setAssetId(record.objectId);
+    setVersionId(record.versions.at(-1).versionId);
+    const choices = roles.filter(
+      (r) => kinds(r).includes(record.data.kind) && (!fixedRole || roleId(r) === fixedRole)
+    );
+    setRole(choices.length === 1 ? roleId(choices[0]) : "");
+  };
+  const count = inputs.filter((item, index) => index !== editing && item.role === role).length;
+  const atLimit = selectedRole && selectedRole.max_items != null && count >= selectedRole.max_items;
+  const apply = () => void attempt(async () => {
+    if (!asset || !versionId || !selectedRole || atLimit) return;
+    const ref2 = { storeId: asset.storeId, objectId: asset.objectId, versionId };
+    await bridge.project(projectId, studio, "files.resolveLocation", { ref: ref2 });
+    const value = { ...editing === null ? { weight: null } : inputs[editing], ref: ref2, role };
+    update(
+      editing === null ? [...inputs, value] : inputs.map((item, i) => i === editing ? value : item)
+    );
+    setPicker(false);
+  });
+  const upload = (files) => {
+    if (!files?.length) return;
+    const file = files[0];
+    void attempt(async () => {
+      const staged = await bridge.stage(file, projectId);
+      const created = await bridge.project(
+        projectId,
+        studio,
+        "assets.import",
+        {
+          name: file.name,
+          stagingFileIds: [staged.stagingFileId]
+        },
+        { requestKey: crypto.randomUUID() }
+      );
+      const record = await bridge.project(projectId, studio, "assets.get", {
+        assetId: created.asset.objectId
+      });
+      setAssets((old) => [record, ...old.filter((a) => a.objectId !== record.objectId)]);
+      setSearch("");
+      pick(record);
+    });
+  };
+  const tile = (input, index) => {
+    const record = assets.find((a) => a.objectId === input.ref?.objectId);
+    const version = record?.versions.find((v) => v.versionId === input.ref?.versionId);
+    const declared = roles.find((r) => roleId(r) === input.role);
+    return /* @__PURE__ */ React.createElement("div", { className: "reference-tile", key: index }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "reference-thumb",
+        "aria-label": `Replace Reference file ${index + 1}`,
+        onClick: () => open("", index)
+      },
+      /* @__PURE__ */ React.createElement(
+        Thumbnail,
+        {
+          bridge,
+          projectId,
+          studio,
+          asset: record,
+          version
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "reference-remove",
+        "aria-label": `Remove Reference file ${index + 1}`,
+        onClick: () => update(inputs.filter((_, i) => i !== index))
+      },
+      "\xD7"
+    ), /* @__PURE__ */ React.createElement("div", { className: "reference-caption" }, /* @__PURE__ */ React.createElement("strong", null, record?.data.name || "Reference file"), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "plain version-button",
+        "aria-label": `Reference file ${index + 1} version`,
+        onClick: () => open("", index)
+      },
+      version ? `v${version.versionNumber}` : "Version",
+      " \xB7 ",
+      roleLabel(input.role)
+    )), !declared && /* @__PURE__ */ React.createElement("p", { className: "reference-warning" }, "Choose a reference supported by this model."), declared?.supports_weight && /* @__PURE__ */ React.createElement("label", { className: "small" }, "Reference weight", /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "number",
+        step: "any",
+        "aria-label": `Reference file ${index + 1} weight`,
+        value: input.weight ?? "",
+        onChange: (e) => update(
+          inputs.map(
+            (r, i) => i === index ? { ...r, weight: e.target.value === "" ? null : Number(e.target.value) } : r
+          )
+        )
+      }
+    )), inputs.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "reference-actions" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        disabled: index === 0,
+        onClick: () => {
+          const value = [...inputs];
+          [value[index - 1], value[index]] = [value[index], value[index - 1]];
+          update(value);
+        }
+      },
+      "Move earlier"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        disabled: index === inputs.length - 1,
+        onClick: () => {
+          const value = [...inputs];
+          [value[index + 1], value[index]] = [value[index], value[index + 1]];
+          update(value);
+        }
+      },
+      "Move later"
+    )));
+  };
+  if (!roles.length && !inputs.length) return null;
+  const frames = roles.filter(frameRole);
+  return /* @__PURE__ */ React.createElement("section", { className: "reference-section" }, /* @__PURE__ */ React.createElement("div", { className: "reference-heading" }, /* @__PURE__ */ React.createElement("h3", null, "Reference file"), /* @__PURE__ */ React.createElement("span", { className: "sub" }, "Added ", inputs.length)), error ? /* @__PURE__ */ React.createElement("p", { role: "alert", className: "error" }, error) : /* @__PURE__ */ React.createElement(React.Fragment, null, frames.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "reference-slot-group" }, frames.map((r) => {
+    const id = roleId(r), index = inputs.findIndex((item) => item.role === id);
+    return /* @__PURE__ */ React.createElement("div", { className: "reference-slot", key: id }, /* @__PURE__ */ React.createElement("span", null, roleLabel(id), !r.min_items ? " (optional)" : ""), index >= 0 ? tile(inputs[index], index) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "reference-add",
+        "aria-label": `Choose ${roleLabel(id)}`,
+        onClick: () => open(id)
+      },
+      /* @__PURE__ */ React.createElement("b", null, "+"),
+      "Add file"
+    ));
+  })), /* @__PURE__ */ React.createElement("div", { className: "reference-strip" }, inputs.map(
+    (input, index) => frames.some((r) => roleId(r) === input.role) ? null : tile(input, index)
+  ), (roles.some((r) => !frameRole(r)) || !roles.length) && /* @__PURE__ */ React.createElement("button", { className: "reference-add", disabled: !roles.length, onClick: () => open() }, /* @__PURE__ */ React.createElement("b", null, "+"), "Add reference")), /* @__PURE__ */ React.createElement("p", { className: "reference-help" }, "Choose project files or upload from your computer. Select a thumbnail to replace it.")), picker && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "reference-picker-backdrop",
+      onKeyDown: (e) => {
+        if (e.key === "Escape") setPicker(false);
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "section",
+      {
+        className: "reference-picker",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Choose Reference file"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "reference-picker-header" }, /* @__PURE__ */ React.createElement("h2", null, editing === null ? "Add reference" : "Replace Reference file"), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          label: "Close",
+          variant: "text-ghost-md",
+          width: "hug",
+          onClick: () => setPicker(false)
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "reference-picker-toolbar" }, /* @__PURE__ */ React.createElement(
+        TextInput,
+        {
+          label: "Search project files",
+          placeholder: "Search file names",
+          value: search,
+          onValueChange: setSearch
+        }
+      ), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          label: "Upload file",
+          variant: "text-tonal-md",
+          width: "hug",
+          onClick: () => uploadInput.current?.click()
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          ref: uploadInput,
+          hidden: true,
+          type: "file",
+          accept: "image/*,video/*,audio/*",
+          onChange: (e) => upload(e.target.files)
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "reference-picker-grid" }, assets.filter(
+        (a) => a.versions?.length && roles.some(
+          (r) => kinds(r).includes(a.data.kind) && (!fixedRole || roleId(r) === fixedRole)
+        )
+      ).map((a) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: a.objectId,
+          className: `reference-picker-card ${assetId === a.objectId ? "chosen" : ""}`,
+          onClick: () => pick(a)
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "reference-thumb" }, /* @__PURE__ */ React.createElement(
+          Thumbnail,
+          {
+            bridge,
+            projectId,
+            studio,
+            asset: a,
+            version: a.versions.at(-1)
+          }
+        )),
+        /* @__PURE__ */ React.createElement("strong", null, a.data.name),
+        /* @__PURE__ */ React.createElement("small", null, a.data.kind, " \xB7 v", a.versions.at(-1).versionNumber)
+      ))),
+      !assets.some(
+        (a) => a.versions?.length && roles.some(
+          (r) => kinds(r).includes(a.data.kind) && (!fixedRole || roleId(r) === fixedRole)
+        )
+      ) && /* @__PURE__ */ React.createElement("p", { className: "reference-picker-empty" }, "No matching files. Upload a file from your computer."),
+      nextOffset !== null && /* @__PURE__ */ React.createElement("button", { onClick: () => void attempt(() => load(nextOffset)) }, "Load more files"),
+      asset && /* @__PURE__ */ React.createElement("div", { className: "reference-picker-selection" }, /* @__PURE__ */ React.createElement("label", null, "File version", /* @__PURE__ */ React.createElement(
+        Dropdown,
+        {
+          label: "File version",
+          value: versionId,
+          onValueChange: setVersionId,
+          options: asset.versions.map((v) => ({
+            value: v.versionId,
+            label: `v${v.versionNumber}${v.versionId === asset.versions.at(-1)?.versionId ? " \xB7 Latest" : ""}`
+          }))
+        }
+      )), compatibleRoles.length > 1 && /* @__PURE__ */ React.createElement("label", null, "Reference purpose", /* @__PURE__ */ React.createElement(
+        Dropdown,
+        {
+          label: "Reference purpose",
+          value: role,
+          onValueChange: setRole,
+          options: [
+            { value: "", label: "Choose purpose" },
+            ...compatibleRoles.map((r) => ({
+              value: roleId(r),
+              label: roleLabel(roleId(r))
+            }))
+          ]
+        }
+      ))),
+      atLimit && /* @__PURE__ */ React.createElement("p", { className: "reference-warning" }, "This purpose supports up to ", selectedRole.max_items, " files. Replace an existing reference."),
+      /* @__PURE__ */ React.createElement("div", { className: "reference-picker-footer" }, /* @__PURE__ */ React.createElement("span", { className: "sub" }, "This fixed version will be used as the reference."), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          label: editing === null ? "Use file" : "Use version",
+          variant: "text-filled-md",
+          width: "hug",
+          disabled: !asset || !versionId || !selectedRole || atLimit || Boolean(error),
+          onClick: apply
+        }
+      ))
+    )
+  ));
+}
+var roleId, kinds, frameRole;
+var init_reference_picker = __esm({
+  "packages/project-studio/src/ui/reference-picker.tsx"() {
+    "use strict";
+    init_dist();
+    roleId = (role) => role.role || role.name;
+    kinds = (role) => role.kind ? [role.kind] : role.media_types || role.media_kinds || role.kinds || role.accepted_kinds || [];
+    frameRole = (role) => ["first-frame", "last-frame"].includes(roleId(role)?.replaceAll("_", "-"));
+  }
+});
+
+// packages/project-studio/src/ui/generation-inputs.tsx
+import * as React2 from "react";
+function TypedParameters({ capability, draft, changeDraft, inputKinds }) {
+  let parameters, inputs;
+  try {
+    parameters = JSON.parse(draft.parameters);
+    inputs = JSON.parse(draft.inputs);
+  } catch {
+    return /* @__PURE__ */ React2.createElement("p", { className: "reference-warning" }, "Draft settings could not be read. Choose the model again.");
+  }
+  if (!parameters || typeof parameters !== "object" || Array.isArray(parameters) || !Array.isArray(inputs))
+    return /* @__PURE__ */ React2.createElement("p", { className: "reference-warning" }, "Choose the model again to restore generation settings.");
+  const mode = inputKinds.includes("video") ? "video" : inputKinds.includes("image") ? "image" : inputKinds.includes("audio") ? "audio" : "text";
+  const operation = capability?.operations?.find((o) => o.name === draft.capabilityId);
+  const all = (operation?.params || []).filter(
+    (p) => names[p.name] && ["string", "number", "integer", "boolean"].includes(p.type) && (!p.input_modes || p.input_modes.includes(mode))
+  );
+  const definitions = all.filter(
+    (p) => p.name !== "size" || !all.some((v) => v.name === "aspect-ratio")
+  );
+  const common = definitions.filter(
+    (p) => ["aspect-ratio", "quality", "resolution", "duration"].includes(p.name) || p.required
+  );
+  const advanced = definitions.filter((p) => !common.includes(p));
+  const set = (name, value) => {
+    const next = { ...parameters };
+    if (value === void 0) delete next[name];
+    else next[name] = value;
+    changeDraft({ parameters: JSON.stringify(next, null, 2) });
+  };
+  const field = (p) => {
+    const value = parameters[p.name] ?? p.default;
+    const choices = p.enum || (p.type === "boolean" ? [true, false] : null);
+    const label = names[p.name];
+    return /* @__PURE__ */ React2.createElement("div", { className: "vx-field", key: p.name }, /* @__PURE__ */ React2.createElement("span", null, label, p.required ? " *" : ""), choices ? /* @__PURE__ */ React2.createElement(
+      Dropdown,
+      {
+        label,
+        value: value === void 0 ? null : JSON.stringify(coerce(p, value)),
+        placeholder: p.default !== void 0 ? "Default" : "Automatic",
+        options: [
+          { value: "", label: p.default !== void 0 ? "Default" : "Automatic" },
+          ...choices.map((v) => ({
+            value: JSON.stringify(v),
+            label: choiceLabels[String(v)] || String(v)
+          }))
+        ],
+        onValueChange: (value2) => set(p.name, value2 === "" ? void 0 : JSON.parse(value2))
+      }
+    ) : ["number", "integer"].includes(p.type) ? /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        "aria-label": label,
+        type: "number",
+        min: p.min,
+        max: p.max,
+        step: p.type === "integer" ? 1 : "any",
+        value: value ?? "",
+        onChange: (e) => set(p.name, e.target.value === "" ? void 0 : Number(e.target.value))
+      }
+    ) : /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        "aria-label": label,
+        value: value ?? "",
+        minLength: p.min_length,
+        maxLength: p.max_length,
+        onChange: (e) => set(p.name, e.target.value)
+      }
+    ));
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "generation-settings-grid" }, common.map(field)), advanced.length > 0 && /* @__PURE__ */ React2.createElement("details", { className: "generation-more" }, /* @__PURE__ */ React2.createElement("summary", null, "More settings"), /* @__PURE__ */ React2.createElement("div", { className: "generation-settings-grid" }, advanced.map(field))));
+}
+function coerce(p, value) {
+  if (p.type === "integer" || p.type === "number") return Number(value);
+  if (p.type === "boolean" && typeof value === "string") return value === "true";
+  return value;
+}
+var names, choiceLabels;
+var init_generation_inputs = __esm({
+  "packages/project-studio/src/ui/generation-inputs.tsx"() {
+    "use strict";
+    init_dist();
+    init_reference_picker();
+    names = {
+      "aspect-ratio": "Aspect ratio",
+      quality: "Quality",
+      resolution: "Resolution",
+      duration: "Duration (seconds)",
+      size: "Size",
+      background: "Background",
+      "input-fidelity": "Reference fidelity",
+      "output-format": "Output format",
+      seed: "Seed",
+      "enhance-prompt": "Enhance prompt",
+      "camera-fixed": "Fixed camera",
+      "voice-id": "Voice ID",
+      language: "Language",
+      "speech-rate": "Speech rate",
+      "pitch-rate": "Pitch",
+      volume: "Volume",
+      "voice-name": "Voice name",
+      prefix: "Voice name",
+      "voice-description": "Voice description",
+      "preview-text": "Preview text",
+      gender: "Gender",
+      age: "Age",
+      emotion: "Emotion",
+      "sample-rate": "Sample rate",
+      "bit-rate": "Bit rate",
+      speed: "Speech rate",
+      "audio-format": "Audio format"
+    };
+    choiceLabels = {
+      low: "Low",
+      medium: "Standard",
+      high: "High",
+      auto: "Automatic",
+      transparent: "Transparent",
+      opaque: "Opaque",
+      standard: "Standard",
+      lite: "Fast",
+      true: "On",
+      false: "Off"
+    };
+  }
+});
+
+// packages/project-studio/src/ads-shared.ts
+import { z } from "vivix-studio/sdk/shared";
+var fixedRef, copy, clipScript, adBrief, adStoryboard;
+var init_ads_shared = __esm({
+  "packages/project-studio/src/ads-shared.ts"() {
+    "use strict";
+    fixedRef = z.object({ storeId: z.uuid(), objectId: z.uuid(), versionId: z.uuid() }).strict();
+    copy = z.string().max(8e3).default("");
+    clipScript = z.object({
+      title: z.string().trim().min(1).max(200),
+      visual: copy,
+      voiceover: copy,
+      onScreenText: copy,
+      cta: copy,
+      plannedDurationMs: z.number().int().positive().nullable().default(null)
+    }).strict();
+    adBrief = z.object({
+      product: copy,
+      category: copy,
+      audience: copy,
+      sellingPoints: copy,
+      channel: copy,
+      aspectRatio: z.string().max(40).nullable().default(null),
+      targetDurationMs: z.number().int().positive().nullable().default(null),
+      body: copy,
+      productRefs: z.array(fixedRef).max(100).default([]),
+      modelRefs: z.array(fixedRef).max(100).default([])
+    }).strict();
+    adStoryboard = z.object({
+      brief: adBrief,
+      clips: z.array(
+        z.object({
+          assetId: z.uuid(),
+          script: clipScript,
+          edits: z.array(z.object({ sourceVersionId: z.uuid(), editRef: fixedRef }).strict()).max(200)
+        }).strict()
+      ).max(200)
+    }).strict().superRefine((value, context) => {
+      if (new Set(value.clips.map((c) => c.assetId)).size !== value.clips.length)
+        context.addIssue({ code: "custom", message: "A clip can appear only once in a storyboard." });
+      for (const clip of value.clips)
+        if (new Set(clip.edits.map((e) => e.sourceVersionId)).size !== clip.edits.length)
+          context.addIssue({
+            code: "custom",
+            message: "Each candidate has one current edit binding."
+          });
+    });
+  }
+});
+
+// packages/project-studio/src/shared.ts
+import { z as z2, defineOperation } from "vivix-studio/sdk/shared";
+function generationOperation(model, kind2, referenceCount, action = "") {
+  if (!model || model.modality !== kind2) return "";
+  const operations = model.operations || [];
+  if (kind2 === "image") {
+    const name = referenceCount ? "image.edit" : "image.generate";
+    return operations.some((operation) => operation.name === name) ? name : "";
+  }
+  if (operations.length === 1) return operations[0].name;
+  return operations.some((operation) => operation.name === action) ? action : "";
+}
+function generationParameters(model, operation, raw, kinds2) {
+  let parameters;
+  try {
+    parameters = JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+  if (!parameters || typeof parameters !== "object" || Array.isArray(parameters)) return raw;
+  const mode = kinds2.includes("video") ? "video" : kinds2.includes("image") ? "image" : kinds2.includes("audio") ? "audio" : "text";
+  const declared = model?.operations?.flatMap((item) => item.params || []) || [];
+  const active = (model?.operations?.find((item) => item.name === operation)?.params || []).filter((parameter) => !parameter.input_modes || parameter.input_modes.includes(mode));
+  return JSON.stringify(
+    Object.fromEntries(
+      Object.entries(parameters).filter(
+        ([name]) => active.some((parameter) => parameter.name === name) || !declared.some((parameter) => parameter.name === name)
+      )
+    )
+  );
+}
+var studioConfig, versionRef, tags, kind, projectData, assetData, anchor, generationInput, projectSettingsInput, generationSubmitOperation, favoriteData, sqlScalar, globalQueryInput;
+var init_shared = __esm({
+  "packages/project-studio/src/shared.ts"() {
+    "use strict";
+    init_cost();
+    init_ads_shared();
+    studioConfig = z2.object({
+      role: z2.enum(["project", "coordinator"]).default("project"),
+      dataInstance: z2.string().min(1).default("user:data"),
+      apiInstance: z2.string().min(1).default("api"),
+      libraryInstance: z2.string().min(1).nullable().default(null)
+    }).strict();
+    versionRef = z2.object({ storeId: z2.uuid(), objectId: z2.uuid(), versionId: z2.uuid() }).strict();
+    tags = z2.array(z2.string().trim().min(1).max(64)).max(50).transform((x) => [...new Set(x)]).default([]);
+    kind = z2.enum(["text", "image", "video", "audio", "file"]);
+    projectData = z2.object({
+      name: z2.string().trim().min(1).max(120),
+      description: z2.string().max(4e3).default(""),
+      status: z2.enum(["draft", "active", "archived"]).default("draft"),
+      aspectRatio: z2.string().nullable().default(null),
+      coverRef: versionRef.nullable().default(null),
+      briefRef: z2.object({ storeId: z2.uuid(), objectId: z2.uuid() }).strict().nullable().default(null),
+      tags
+    }).strict();
+    assetData = z2.object({
+      projectId: z2.uuid(),
+      name: z2.string().trim().min(1).max(200),
+      kind,
+      purpose: z2.enum(["reference", "script", "shot", "music", "voice", "subtitle", "final", "other"]).default("other"),
+      origin: z2.enum(["upload", "library", "generated", "authored"]),
+      orderKey: z2.number().int().nullable().default(null),
+      tags,
+      lifecycle: z2.enum(["draft", "ready", "archived"]).default("draft"),
+      sourceRef: versionRef.nullable().default(null),
+      adoptedVersionId: z2.uuid().nullable().default(null)
+    }).strict();
+    anchor = z2.discriminatedUnion("kind", [
+      z2.object({ kind: z2.literal("whole") }).strict(),
+      z2.object({
+        kind: z2.literal("timeRange"),
+        startMs: z2.number().int().nonnegative(),
+        endMs: z2.number().int().nonnegative()
+      }).strict()
+    ]);
+    generationInput = z2.object({
+      targetAssetId: z2.uuid().optional(),
+      taskName: z2.string().trim().min(1).max(200).optional(),
+      context: z2.record(z2.string().min(1).max(64), z2.string().min(1).max(200)).optional(),
+      expectedRevision: z2.number().int().positive().optional(),
+      newAsset: z2.object({
+        name: z2.string().trim().min(1).max(200),
+        kind: z2.enum(["image", "video", "audio"])
+      }).strict().optional(),
+      modelId: z2.string().min(1),
+      capabilityId: z2.string().min(1),
+      prompt: z2.string().max(32e3),
+      parameters: z2.record(z2.string(), z2.unknown()).default({}),
+      outputCount: z2.number().int().min(1).max(100).default(1),
+      inputs: z2.array(
+        z2.object({
+          ref: versionRef,
+          role: z2.string().min(1),
+          order: z2.number().int().nonnegative(),
+          weight: z2.number().finite().nullable().default(null)
+        }).strict()
+      ).max(100).default([]),
+      baseVersionId: z2.uuid().optional(),
+      changeRequest: z2.string().trim().min(1).max(4e3).optional(),
+      preserveRequest: z2.string().max(4e3).default(""),
+      anchor: anchor.default({ kind: "whole" }),
+      retryOfTaskId: z2.uuid().optional(),
+      acknowledgeUnknown: z2.boolean().optional()
+    }).strict();
+    projectSettingsInput = z2.object({
+      projectId: z2.uuid(),
+      expectedRevision: z2.number().int().positive(),
+      changes: projectData.pick({ name: true, description: true, tags: true, aspectRatio: true, coverRef: true }).extend({
+        description: projectData.shape.description.unwrap(),
+        tags: projectData.shape.tags.unwrap(),
+        aspectRatio: projectData.shape.aspectRatio.unwrap(),
+        coverRef: projectData.shape.coverRef.unwrap()
+      }).partial().strict()
+    }).strict();
+    generationSubmitOperation = defineOperation({
+      id: "generation.submit",
+      title: "Generate",
+      description: "Submit one media generation without approval, retaining its paid request identity.",
+      input: generationInput,
+      output: z2.any(),
+      effects: ["write", "paid"],
+      confirm: "none"
+    });
+    favoriteData = z2.object({ ref: versionRef }).strict();
+    sqlScalar = z2.union([z2.string(), z2.number().finite(), z2.null()]);
+    globalQueryInput = z2.object({
+      sql: z2.string().trim().min(1),
+      params: z2.union([z2.array(sqlScalar), z2.record(z2.string(), sqlScalar)]).optional(),
+      timeoutMs: z2.number().int().positive().optional(),
+      maxRows: z2.number().int().positive().optional(),
+      limit: z2.number().int().min(1).max(200).optional(),
+      offset: z2.number().int().nonnegative().optional(),
+      source: z2.enum(["projects", "assets", "tasks"]),
+      catalog: z2.array(z2.object({ id: z2.string().min(1), name: z2.string(), available: z2.boolean() }).strict()).optional()
+    }).strict();
+  }
+});
+
+// packages/project-studio/src/ui/generation-operation.ts
+var init_generation_operation = __esm({
+  "packages/project-studio/src/ui/generation-operation.ts"() {
+    "use strict";
+    init_shared();
+  }
+});
+
+// packages/project-studio/src/ui/panels.tsx
+import * as React3 from "react";
+function GenerationPanel(props) {
+  const {
+    bridge,
+    projectId,
+    api,
+    studio,
+    selected,
+    draft,
+    changeDraft,
+    models,
+    capability,
+    busy,
+    submitting = busy,
+    submitGeneration,
+    attempt,
+    setCapability,
+    shotGeneration = false,
+    resultDescription = "Generated results are saved to this project."
+  } = props;
+  const [inputKinds, setInputKinds] = React3.useState([]);
+  const [loadingModel, setLoadingModel] = React3.useState(false);
+  const modelRequest = React3.useRef(0);
+  const statusId = React3.useId();
+  const kind2 = selected?.data.kind || draft.kind;
+  const currentModel = capability?.model === draft.modelId && capability.modality === kind2 ? capability : null;
+  let references = [];
+  let validReferences = true;
+  try {
+    references = JSON.parse(draft.inputs);
+    if (!Array.isArray(references)) throw Error("Invalid references.");
+  } catch {
+    validReferences = false;
+  }
+  const operation = generationOperation(
+    currentModel,
+    kind2,
+    references?.length || 0,
+    draft.capabilityId
+  );
+  const generationDraft = { ...draft, capabilityId: operation };
+  const chooseAction = kind2 !== "image" && currentModel?.operations?.length > 1;
+  const actionLabel = kind2 === "audio" ? "Audio action" : "Video action";
+  const countParameter = currentModel?.operations?.find((o) => o.name === operation)?.params?.find((p) => ["n", "num-outputs", "output-count"].includes(p.name));
+  const minOutputs = countParameter?.min ?? 1;
+  const maxOutputs = countParameter?.max ?? (countParameter ? 100 : 1);
+  const roles = referenceRoles(currentModel, operation);
+  const requiredReference = roles.find((role) => {
+    const id = role.role || role.name;
+    return references.filter((reference) => reference?.role === id).length < (role.min_items || 0);
+  });
+  const modelListed = models.some(
+    (model) => model.model === draft.modelId && model.modality === kind2
+  );
+  const promptLabel = shotGeneration ? kind2 === "video" ? "Video prompt" : "Image prompt" : "Prompt";
+  const imageOperationMessage = references.length ? "This model does not support reference images. Remove them or select another model." : "This model needs a reference image. Add an image or select another model.";
+  const validationMessage = () => {
+    if (!draft.modelId) return "Select a model.";
+    if (loadingModel) return "Loading model settings\u2026";
+    if (!currentModel || !modelListed || currentModel.available === false)
+      return "This model is unavailable. Select another model.";
+    if (!operation)
+      return kind2 === "image" ? imageOperationMessage : "Select an action supported by this model.";
+    if (!draft.prompt?.trim() && kind2 !== "audio") return `Enter a ${kind2} prompt.`;
+    if (!validReferences) return "Select the reference files again.";
+    if (references.some(
+      (reference) => !roles.some((role) => (role.role || role.name) === reference?.role)
+    ))
+      return "Remove or replace the references this model does not support.";
+    if (requiredReference)
+      return `Add the required reference: ${roleLabel(requiredReference.role || requiredReference.name)}.`;
+    if (!Number.isInteger(draft.outputCount) || draft.outputCount < minOutputs || draft.outputCount > maxOutputs)
+      return `Enter an output count from ${minOutputs} to ${maxOutputs}.`;
+    return "";
+  };
+  const blocked = shotGeneration ? validationMessage() : "";
+  const selectModel = (modelId) => {
+    const request = ++modelRequest.current;
+    changeDraft({
+      modelId,
+      capabilityId: "",
+      parameters: "{}",
+      ...shotGeneration && { outputCount: 1 }
+    });
+    setCapability(null);
+    setLoadingModel(Boolean(modelId));
+    if (!modelId) return;
+    void attempt(async () => {
+      try {
+        const details = await bridge.project(projectId, api, "capabilities.get", { modelId });
+        if (modelRequest.current === request) setCapability(details);
+      } catch (error) {
+        if (modelRequest.current === request) throw error;
+      } finally {
+        if (modelRequest.current === request) setLoadingModel(false);
+      }
+    });
+  };
+  return /* @__PURE__ */ React3.createElement("div", { className: "vx-generation-panel" }, /* @__PURE__ */ React3.createElement("p", { className: "vx-generation-hint" }, shotGeneration ? kind2 === "video" ? "Describe the movement, camera, and timing. Review the result before adding it as a candidate." : "Describe the composition, characters, and lighting. Review the result before using it on the storyboard." : "Describe the result you want to create."), !shotGeneration && /* @__PURE__ */ React3.createElement(
+    TextInput,
+    {
+      label: "Task name",
+      value: draft.taskName || "",
+      onValueChange: (taskName) => changeDraft({ taskName })
+    }
+  ), !selected && !shotGeneration && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    TextInput,
+    {
+      label: "File name",
+      value: draft.newName,
+      onValueChange: (newName) => changeDraft({ newName })
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    SegmentedControl,
+    {
+      label: "Creation type",
+      value: draft.kind,
+      onValueChange: (value) => changeDraft({ kind: value }),
+      items: ["image", "video", "audio"].map((value) => ({
+        value,
+        label: { image: "Image", video: "Video", audio: "Audio" }[value]
+      }))
+    }
+  )), /* @__PURE__ */ React3.createElement("div", { className: "vx-field" }, /* @__PURE__ */ React3.createElement("span", null, "Model"), /* @__PURE__ */ React3.createElement(
+    Dropdown,
+    {
+      label: "Model",
+      value: draft.modelId || null,
+      placeholder: "Choose a model",
+      options: [
+        { value: "", label: "Choose a model" },
+        ...models.filter((m) => m.modality === (selected?.data.kind || draft.kind)).map((m) => ({ value: m.model, label: m.model }))
+      ],
+      onValueChange: selectModel
+    }
+  )), chooseAction && /* @__PURE__ */ React3.createElement("div", { className: "vx-field" }, /* @__PURE__ */ React3.createElement("span", null, actionLabel), /* @__PURE__ */ React3.createElement(
+    Dropdown,
+    {
+      label: actionLabel,
+      value: operation || null,
+      placeholder: "Choose a purpose",
+      options: [
+        { value: "", label: "Choose an action" },
+        ...currentModel.operations.map((item) => ({
+          value: item.name,
+          label: {
+            "voice.generate": "Generate speech",
+            "voice.clone": "Clone voice",
+            "voice.design": "Design voice",
+            "voice.create": "Create voice",
+            "video.generate": "Generate video",
+            "video.edit": "Edit video",
+            "video.extend": "Extend video"
+          }[item.name] || item.name
+        }))
+      ],
+      onValueChange: (capabilityId) => changeDraft({ capabilityId, ...shotGeneration && { outputCount: 1 } })
+    }
+  )), !shotGeneration && currentModel && !operation && kind2 === "image" && /* @__PURE__ */ React3.createElement("p", { className: "reference-warning", role: "alert" }, imageOperationMessage), /* @__PURE__ */ React3.createElement("label", { className: "vx-field" }, /* @__PURE__ */ React3.createElement("span", null, promptLabel), /* @__PURE__ */ React3.createElement(
+    "textarea",
+    {
+      "aria-label": promptLabel,
+      rows: 6,
+      value: draft.prompt,
+      onChange: (e) => changeDraft({ prompt: e.target.value })
+    }
+  )), /* @__PURE__ */ React3.createElement(
+    ReferenceInputs,
+    {
+      bridge,
+      projectId,
+      studio,
+      capability: currentModel,
+      draft: generationDraft,
+      changeDraft,
+      attempt,
+      onInputKinds: setInputKinds
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    TypedParameters,
+    {
+      capability: currentModel,
+      draft: generationDraft,
+      changeDraft,
+      inputKinds
+    }
+  ), (!shotGeneration || countParameter) && /* @__PURE__ */ React3.createElement("label", { className: "vx-field vx-generation-count" }, /* @__PURE__ */ React3.createElement("span", null, "Number of results"), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      "aria-label": "Number of results",
+      type: "number",
+      min: minOutputs,
+      max: maxOutputs,
+      disabled: !countParameter,
+      value: draft.outputCount,
+      onChange: (e) => changeDraft({ outputCount: Number(e.target.value) })
+    }
+  )), /* @__PURE__ */ React3.createElement("div", { className: "vx-generation-submit" }, /* @__PURE__ */ React3.createElement("p", { className: "vx-generation-hint", id: statusId, role: blocked ? "status" : void 0 }, blocked || resultDescription), /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      label: submitting || shotGeneration && busy ? "Submitting\u2026" : "Generate",
+      "aria-describedby": statusId,
+      loading: submitting || shotGeneration && busy,
+      width: "hug",
+      variant: "text-filled-md",
+      disabled: busy || loadingModel || Boolean(blocked) || !draft.modelId || !draft.prompt?.trim() && kind2 !== "audio" || !operation || !validReferences || !currentModel || !models.some(
+        (m) => m.model === draft.modelId && m.modality === (selected?.data.kind || draft.kind)
+      ),
+      onClick: () => void submitGeneration({
+        capabilityId: operation,
+        parameters: generationParameters(
+          currentModel,
+          operation,
+          draft.parameters,
+          inputKinds
+        )
+      })
+    }
+  )));
+}
+function ReviewPanel(props) {
+  const {
+    selected,
+    locations,
+    Preview,
+    tasks,
+    attempt,
+    setLocations,
+    projectCall,
+    generation,
+    setSelected,
+    openForm
+  } = props;
+  return selected ? /* @__PURE__ */ React3.createElement("div", { className: "split" }, /* @__PURE__ */ React3.createElement("div", { className: "compare" }, selected.versions.map((v) => /* @__PURE__ */ React3.createElement("section", { className: "candidate", key: v.versionId }, /* @__PURE__ */ React3.createElement("h3", null, "v", v.versionNumber, " ", selected.data.adoptedVersionId === v.versionId ? "\xB7 Adopted" : ""), /* @__PURE__ */ React3.createElement(Preview, { kind: selected.data.kind, location: locations[v.versionId] }), !locations[v.versionId] && /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => void attempt(
+        async () => setLocations({
+          ...locations,
+          [v.versionId]: await projectCall("files.resolveLocation", {
+            ref: ref(selected, v)
+          })
+        })
+      )
+    },
+    "Load version"
+  ), /* @__PURE__ */ React3.createElement("div", { className: "sub" }, v.payload.durationMs !== null ? v.payload.durationMs + " ms" : "", " \xB7 ", v.origin), /* @__PURE__ */ React3.createElement("div", { className: "actions" }, /* @__PURE__ */ React3.createElement("button", { onClick: () => generation(v) }, "Iterate from v", v.versionNumber), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => void attempt(async () => {
+        await projectCall(
+          "choices.adopt",
+          {
+            assetId: selected.objectId,
+            versionId: v.versionId,
+            expectedRevision: selected.revision
+          },
+          { requestKey: freshKey() }
+        );
+        const current = await projectCall("assets.get", {
+          assetId: selected.objectId
+        });
+        setSelected(current);
+      })
+    },
+    "Adopt"
+  ))))), /* @__PURE__ */ React3.createElement("section", null, /* @__PURE__ */ React3.createElement("div", { className: "eyebrow" }, "Comments and iteration"), /* @__PURE__ */ React3.createElement("p", { className: "sub" }, "Choose a fixed version. Enter changes and preservation requirements before submitting."), tasks.filter((t) => t.data.kind === "iterate").map((t) => /* @__PURE__ */ React3.createElement("article", { className: "history", key: t.objectId }, /* @__PURE__ */ React3.createElement("span", { className: "sub" }, t.data.state, " \xB7", " ", t.data.inputSnapshot.anchor.kind === "timeRange" ? `${t.data.inputSnapshot.anchor.startMs / 1e3}${t.data.inputSnapshot.anchor.endMs !== t.data.inputSnapshot.anchor.startMs ? "\u2013" + t.data.inputSnapshot.anchor.endMs / 1e3 : ""} s` : "Whole version"), /* @__PURE__ */ React3.createElement("p", null, t.data.inputSnapshot.changeRequest), /* @__PURE__ */ React3.createElement("p", { className: "sub" }, "Preserve: ", t.data.inputSnapshot.preserveRequest), /* @__PURE__ */ React3.createElement("button", { onClick: () => openForm("Task", t) }, "View task"))))) : /* @__PURE__ */ React3.createElement("div", { className: "empty" }, "Select an asset in the asset table to compare its versions.");
+}
+function TaskDetails({ form }) {
+  const snapshot = form.data.inputSnapshot;
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("h3", null, form.data.name || "Generation"), /* @__PURE__ */ React3.createElement("p", { className: "status" }, form.data.state), /* @__PURE__ */ React3.createElement("dl", null, /* @__PURE__ */ React3.createElement("dt", null, "Actual cost"), /* @__PURE__ */ React3.createElement("dd", null, taskCostLabel(form.data)), form.data.cost?.checkedAt && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("dt", null, "Cost updated"), /* @__PURE__ */ React3.createElement("dd", null, new Date(form.data.cost.checkedAt).toLocaleString())), /* @__PURE__ */ React3.createElement("dt", null, "Model"), /* @__PURE__ */ React3.createElement("dd", null, snapshot.modelId), /* @__PURE__ */ React3.createElement("dt", null, "Prompt"), /* @__PURE__ */ React3.createElement("dd", null, snapshot.originalPrompt), form.projection && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("dt", null, "Remote result"), /* @__PURE__ */ React3.createElement("dd", null, form.projection.remoteOutcome.status), /* @__PURE__ */ React3.createElement("dt", null, "Local saving"), /* @__PURE__ */ React3.createElement("dd", null, form.projection.localPersistence), /* @__PURE__ */ React3.createElement("dt", null, "Outputs returned"), /* @__PURE__ */ React3.createElement("dd", null, form.projection.remoteOutcome.resultCount ?? "Unknown", " /", " ", form.projection.remoteOutcome.requestedCount ?? "Unknown")), /* @__PURE__ */ React3.createElement("dt", null, "Outputs saved"), /* @__PURE__ */ React3.createElement("dd", null, form.data.receivedOutputs, " / ", form.data.expectedOutputs)), form.data.cost?.error && /* @__PURE__ */ React3.createElement("p", { role: "status" }, form.data.cost.error.message), form.data.error && /* @__PURE__ */ React3.createElement("p", { role: "alert" }, form.data.error.message));
+}
+function ref(object, version) {
+  return { storeId: object.storeId, objectId: object.objectId, versionId: version.versionId };
+}
+var freshKey;
+var init_panels = __esm({
+  "packages/project-studio/src/ui/panels.tsx"() {
+    "use strict";
+    init_cost();
+    init_dist();
+    init_generation_inputs();
+    init_generation_operation();
+    init_reference_picker();
+    freshKey = () => crypto.randomUUID();
+  }
+});
+
+// packages/ui-system/dist/styles.css
+var init_styles = __esm({
+  "packages/ui-system/dist/styles.css"() {
+  }
+});
+
+// packages/project-studio/src/ui/generation-form.css
+var init_generation_form = __esm({
+  "packages/project-studio/src/ui/generation-form.css"() {
+  }
+});
+
+// packages/project-studio/src/ui/generation-ui.tsx
+var generation_ui_exports = {};
+__export(generation_ui_exports, {
+  default: () => GenerationPanel
+});
+var init_generation_ui = __esm({
+  "packages/project-studio/src/ui/generation-ui.tsx"() {
+    "use strict";
+    init_styles();
+    init_generation_form();
+    init_panels();
+  }
+});
+
+// packages/project-studio/src/client.tsx
+init_panels();
+import * as React4 from "react";
+
+// packages/project-studio/src/property-metadata.ts
+function isInternalMediaProvenance(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const media = value;
+  const uuid = (value2) => typeof value2 === "string" && /^[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i.test(value2);
+  if (media.kind !== "video" && media.kind !== "sequence" || !uuid(media.jobId)) return false;
+  if (!Array.isArray(media.inputs) || !media.inputs.length) return false;
+  return media.inputs.every((input) => {
+    if (!input || typeof input !== "object") return false;
+    const { file, recipe } = input;
+    return uuid(file?.fileId) && uuid(file?.source?.storeId) && uuid(file?.source?.objectId) && uuid(file?.source?.versionId) && recipe && typeof recipe === "object" && recipe.trim && recipe.crop;
+  }) && !!media.tools && typeof media.tools === "object" && typeof media.tools.ffmpegVersion === "string" && typeof media.tools.ffprobeVersion === "string";
+}
+
+// packages/project-studio/src/client.tsx
+init_shared();
+var StyledGenerationPanel = React4.lazy(() => Promise.resolve().then(() => (init_generation_ui(), generation_ui_exports)));
+function GenerationPanel2(props) {
+  return /* @__PURE__ */ React4.createElement(React4.Suspense, { fallback: /* @__PURE__ */ React4.createElement("p", null, "Loading generation settings\u2026") }, /* @__PURE__ */ React4.createElement(StyledGenerationPanel, { ...props }));
+}
+function AssetPreview({ location, kind: kind2 }) {
+  if (!location) return /* @__PURE__ */ React4.createElement("div", { className: "empty-preview" }, "Select a readable version");
+  const url = location.previewUrl;
+  return kind2 === "video" ? /* @__PURE__ */ React4.createElement("video", { controls: true, src: url }) : kind2 === "audio" ? /* @__PURE__ */ React4.createElement("audio", { controls: true, src: url }) : kind2 === "image" ? /* @__PURE__ */ React4.createElement("img", { src: url, alt: "Selected version" }) : kind2 === "text" ? /* @__PURE__ */ React4.createElement(TextPreview, { url }) : /* @__PURE__ */ React4.createElement("a", { href: url }, "Open file");
+}
+function TextPreview({ url }) {
+  const [text, setText] = React4.useState("");
+  React4.useEffect(() => {
+    let current = true;
+    fetch(url).then((r) => {
+      if (!r.ok) throw Error("Text is unavailable.");
+      return r.text();
+    }).then((t) => {
+      if (current) setText(t);
+    }).catch((e) => {
+      if (current) setText(e.message);
+    });
+    return () => {
+      current = false;
+    };
+  }, [url]);
+  return /* @__PURE__ */ React4.createElement("pre", { className: "text-preview" }, text);
+}
+function AssetProperties({ record }) {
+  return /* @__PURE__ */ React4.createElement("dl", null, /* @__PURE__ */ React4.createElement("dt", null, "Type"), /* @__PURE__ */ React4.createElement("dd", null, record.data.kind), /* @__PURE__ */ React4.createElement("dt", null, "Tags"), /* @__PURE__ */ React4.createElement("dd", null, record.data.tags.map((t) => /* @__PURE__ */ React4.createElement("span", { className: "tag", key: t }, t))), /* @__PURE__ */ React4.createElement("dt", null, "Latest"), /* @__PURE__ */ React4.createElement("dd", null, record.versions?.at(-1)?.versionNumber || "No content"), /* @__PURE__ */ React4.createElement("dt", null, "Adopted"), /* @__PURE__ */ React4.createElement("dd", null, record.versions?.find((v) => v.versionId === record.data.adoptedVersionId)?.versionNumber || "None"), /* @__PURE__ */ React4.createElement("dt", null, "Availability"), /* @__PURE__ */ React4.createElement("dd", null, record.availability), /* @__PURE__ */ React4.createElement("dt", null, "Revision"), /* @__PURE__ */ React4.createElement("dd", null, record.revision), Object.entries(record.metadata).filter(([key, value]) => key !== "media" || !isInternalMediaProvenance(value)).map(([key, value]) => /* @__PURE__ */ React4.createElement(React4.Fragment, { key }, /* @__PURE__ */ React4.createElement("dt", null, key), /* @__PURE__ */ React4.createElement("dd", null, /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", null, typeof value === "object" ? JSON.stringify(value).slice(0, 60) : String(value)), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(value, null, 2)))))));
+}
+var dependencies = (config) => [
+  config.apiInstance,
+  config.dataInstance,
+  ...config.libraryInstance ? [config.libraryInstance] : []
+];
+function activate(client) {
+  if (client.config.role === "coordinator") return;
+  let active = true;
+  for (const [id, component] of Object.entries({
+    "studio.generation": GenerationPanel2,
+    "studio.review": ReviewPanel,
+    "studio.task": TaskDetails,
+    "studio.preview": AssetPreview,
+    "studio.properties": AssetProperties
+  }))
+    client.registerUI({
+      id,
+      title: id,
+      kind: "component",
+      component: (props) => active ? React4.createElement(component, props) : null
+    });
+  client.onDispose(() => {
+    active = false;
+  });
+}
+export {
+  AssetPreview,
+  AssetProperties,
+  studioConfig as Config,
+  activate as default,
+  dependencies
+};