@chai-ui/vue 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { inject, computed, defineComponent, provide, renderSlot, watch, onScopeDispose, h, ref, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, unref, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, createVNode, nextTick, mergeProps, onMounted, onUnmounted, withModifiers, withCtx, withDirectives, vModelText, reactive, toValue, shallowRef } from "vue";
-import { reasoningEngineFor, createReasoning, regionColor, composerView, composerAttachMenuItems, MAX_ANIMATE_ENHANCE_LENGTH, enhanceRevealDurationMs, composerAttachmentsFromFiles, regionBoxStyle, REGION_CORNERS, DEFAULT_MAX_REGIONS, freeRegionNumber, EDIT_ZOOM_STEPS, regionPopoverPosition, editCardWidth, newRegion, panForZoom, clampPan, fitBox, resizeBox, regionBoxForKey, panForKey, downloadMedia, downloadFilename, shareMedia, resultModelLabel, formatTokens, formatCost, formatDuration, formatAspectRatio, SUGGESTED_ANALYSIS_MODELS, DEFAULT_MAX_ATTACHMENTS_BY_KIND, isMediaAnalyzerAtCap, mediaAnalyzerModelSections, PROMPT_LENGTH_HINT, readMediaFiles, nextMediaAnalyzerAttachments, replacedNote, createComposerStore, pickReasoning, createMediaAnalyzerStore } from "@chai-ui/core";
+import { inject, computed, defineComponent, provide, renderSlot, watch, onScopeDispose, h, ref, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, unref, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, createVNode, useId, nextTick, mergeProps, onMounted, onUnmounted, withModifiers, withCtx, withDirectives, vModelText, reactive, toValue, shallowRef } from "vue";
+import { reasoningEngineFor, createReasoning, regionColor, MAX_ANIMATE_ENHANCE_LENGTH, enhanceRevealDurationMs, composerView, composerAttachMenuItems, composerAttachmentsFromFiles, regionBoxStyle, REGION_CORNERS, DEFAULT_MAX_REGIONS, freeRegionNumber, EDIT_ZOOM_STEPS, regionPopoverPosition, editCardWidth, newRegion, panForZoom, clampPan, fitBox, resizeBox, regionBoxForKey, panForKey, downloadMedia, downloadFilename, shareMedia, resultModelLabel, formatTokens, formatCost, formatDuration, formatAspectRatio, SUGGESTED_ANALYSIS_MODELS, DEFAULT_MAX_ATTACHMENTS_BY_KIND, isMediaAnalyzerAtCap, mediaAnalyzerModelSections, PROMPT_LENGTH_HINT, readMediaFiles, nextMediaAnalyzerAttachments, replacedNote, createComposerStore, pickReasoning, createMediaAnalyzerStore } from "@chai-ui/core";
 import { DEFAULT_MAX_ATTACHMENTS_BY_KIND as DEFAULT_MAX_ATTACHMENTS_BY_KIND2, DEFAULT_MAX_REGIONS as DEFAULT_MAX_REGIONS2, DEFAULT_MEDIA_ANALYSIS_PROMPT_LENGTH, DEFAULT_MODEL_ID, DEFAULT_REASONING_MODEL, DEFAULT_REASONING_MODEL_BY_KIND, EDIT_IMAGE_USE_CASE, GenerationError, MEDIA_ANALYSIS_PROMPTS, MEDIA_ANALYSIS_PROMPT_LENGTHS, PRECISE_EDIT_MODELS, ROUTING_MODEL_ID, SUGGESTED_ANALYSIS_MODELS as SUGGESTED_ANALYSIS_MODELS2, SUGGESTED_EDIT_MODELS, SUGGESTED_IMAGE_MODELS, SUGGESTED_IMAGE_TO_VIDEO_MODELS, SUGGESTED_TEXT_TO_VIDEO_MODELS, TEXT_USE_CASE, buildRegionEditPrompt, checkSuggestedModels, createFalEngine, createMockEngine, createOpenRouterEngine, isMediaAnalyzerAtCap as isMediaAnalyzerAtCap2, mockEngine, nextMediaAnalyzerAttachments as nextMediaAnalyzerAttachments2, reasoningModelFor, suggestedModels } from "@chai-ui/core";
 import "@material/web/fab/fab.js";
 import "@material/web/checkbox/checkbox.js";
@@ -10,7 +10,7 @@ function useReasoning() {
   const provided = inject(reasoningKey, null);
   return computed(() => provided?.value);
 }
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ChaiProvider",
   props: {
     reasoningModel: {},
@@ -86,24 +86,25 @@ const OptimizeIcon = icon("0 0 25 24", [{ "d": "M5 19H6.425L16.2 9.225L14.775 7.
 const UndoIcon = icon("0 -960 960 960", [{ "d": "M259-200v-60h310q70 0 120.5-46.5T740-422q0-69-50.5-115.5T569-584H274l114 114-42 42-186-186 186-186 42 42-114 114h294q95 0 163.5 64T800-422q0 94-68.5 158T568-200H259Z", "fill": "currentColor" }]);
 const AttachFileIcon = icon("0 -960 960 960", [{ "d": "M728-326q0 103-72.18 174.5-72.17 71.5-175 71.5Q378-80 305.5-151.5T233-326v-380q0-72.5 51.5-123.25T408-880q72 0 123.5 50.75T583-706v360q0 42-30 72t-72.5 30q-42.5 0-72.5-29.67-30-29.68-30-72.33v-370h60v370q0 17 12.5 29.5t30.64 12.5q18.14 0 30-12.5T523-346v-360q0-48-33.5-81t-81.71-33q-48.21 0-81.5 33.06T293-706v380q0 78 54.97 132T481-140q77.92 0 132.46-54Q668-248 668-326v-390h60v390Z", "fill": "currentColor" }]);
 const ImageIcon = icon("0 -960 960 960", [{ "d": "M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z", "fill": "currentColor" }]);
+const GlobeIcon = icon("0 -960 960 960", [{ "d": "M480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm-.27-60q142.38 0 241.19-99.5T820-480v-13q-6 26-27.41 43.5Q771.19-432 742-432h-80q-33 0-56.5-23.5T582-512v-40H422v-80q0-33 23.5-56.5T502-712h40v-22q0-16 13.5-40t30.5-29q-25-8-51.36-12.5Q508.29-820 480-820q-141 0-240.5 98.81T140-480h150q66 0 113 47t47 113v40H330v105q34 17 71.7 26t78.3 9Z", "fill": "currentColor" }]);
 const VideocamIcon = icon("0 -960 960 960", [{ "d": "M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l160-160v410L720-435v215q0 24-18 42t-42 18H140Zm0-60h520v-520H140v520Zm0 0v-520 520Z", "fill": "currentColor" }]);
 const ContentCutIcon = icon("0 -960 960 960", [{ "d": "M782-114 481-415 364-298q11 17 13.5 33t2.5 35q0 64-43 107T230-80q-64 0-107-43T80-230q0-64 43-107t107-43q18 0 35.5 5t36.5 15l116-116-118-118q-17 8-34.5 11t-35.5 3q-64 0-107-43T80-730q0-64 43-107t107-43q64 0 107 43t43 107q0 19-2.5 36T367-662l514 514v34h-99ZM599-527l-66-66 249-249h99v33L599-527ZM294-666q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Zm202.5 203.5Q502-468 502-476t-5.5-13.5Q491-495 483-495t-13.5 5.5Q464-484 464-476t5.5 13.5Q475-457 483-457t13.5-5.5ZM294-166q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Z", "fill": "currentColor" }]);
 const MusicNoteIcon = icon("0 -960 960 960", [{ "d": "M286.5-163.5Q243-207 243-270t43.5-106.5Q330-420 393-420q28 0 50.5 8t39.5 22v-450h234v135H543v435q0 63-43.5 106.5T393-120q-63 0-106.5-43.5Z", "fill": "currentColor" }]);
-const _hoisted_1$g = ["disabled", "aria-expanded", "aria-label"];
-const _hoisted_2$b = {
+const _hoisted_1$h = ["disabled", "aria-expanded", "aria-label"];
+const _hoisted_2$c = {
   key: 0,
   class: "chai-composer__attach-menu",
   role: "menu"
 };
-const _hoisted_3$9 = ["onClick"];
-const _hoisted_4$7 = { class: "chai-composer__attach-menu-icon" };
-const _hoisted_5$6 = {
+const _hoisted_3$a = ["onClick"];
+const _hoisted_4$8 = { class: "chai-composer__attach-menu-icon" };
+const _hoisted_5$7 = {
   key: 0,
   class: "chai-composer__attach-menu-divider",
   role: "separator"
 };
-const _hoisted_6$6 = ["accept", "multiple", "disabled"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_6$7 = ["accept", "multiple", "disabled"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "AttachMenu",
   props: {
     items: {},
@@ -113,7 +114,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   emits: ["select", "files"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "edit-media": ContentCutIcon };
+    const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "create-world": GlobeIcon, "edit-media": ContentCutIcon };
     const open = ref(false);
     const root = ref();
     const input = ref();
@@ -144,8 +145,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
         }, [
           open.value ? (openBlock(), createBlock(unref(CloseSymbolIcon), { key: 0 })) : (openBlock(), createBlock(unref(PlusIcon), { key: 1 }))
-        ], 10, _hoisted_1$g),
-        open.value ? (openBlock(), createElementBlock("ul", _hoisted_2$b, [
+        ], 10, _hoisted_1$h),
+        open.value ? (openBlock(), createElementBlock("ul", _hoisted_2$c, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
             return openBlock(), createElementBlock("li", {
               key: item.action,
@@ -157,12 +158,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 class: "chai-composer__attach-menu-item",
                 onClick: ($event) => pick(item.action)
               }, [
-                createElementVNode("span", _hoisted_4$7, [
+                createElementVNode("span", _hoisted_4$8, [
                   (openBlock(), createBlock(resolveDynamicComponent(ICONS[item.action])))
                 ]),
                 createTextVNode(toDisplayString(item.label), 1)
-              ], 8, _hoisted_3$9),
-              item.divider && i < __props.items.length - 1 ? (openBlock(), createElementBlock("hr", _hoisted_5$6)) : createCommentVNode("", true)
+              ], 8, _hoisted_3$a),
+              item.divider && i < __props.items.length - 1 ? (openBlock(), createElementBlock("hr", _hoisted_5$7)) : createCommentVNode("", true)
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -175,18 +176,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           hidden: "",
           disabled: __props.disabled,
           onChange: onFileChange
-        }, null, 40, _hoisted_6$6)
+        }, null, 40, _hoisted_6$7)
       ], 512);
     };
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 0,
   class: "chai-composer__region-badge",
   "aria-hidden": "true"
 };
-const _hoisted_2$a = ["disabled", "aria-label"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_2$b = ["disabled", "aria-label"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Chip",
   props: {
     label: {},
@@ -202,7 +203,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["chai-composer__chip", { "chai-composer__chip--region": __props.regionNumber != null }]),
         style: normalizeStyle(__props.regionNumber != null ? { "--chai-region-color": unref(regionColor)(__props.regionNumber) } : void 0)
       }, [
-        __props.regionNumber != null ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(__props.regionNumber), 1)) : createCommentVNode("", true),
+        __props.regionNumber != null ? (openBlock(), createElementBlock("span", _hoisted_1$g, toDisplayString(__props.regionNumber), 1)) : createCommentVNode("", true),
         createTextVNode(toDisplayString(__props.label), 1),
         __props.removable ? (openBlock(), createElementBlock("button", {
           key: 1,
@@ -213,11 +214,185 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
         }, [
           createVNode(unref(CloseSymbolIcon))
-        ], 8, _hoisted_2$a)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$b)) : createCommentVNode("", true)
       ], 6);
     };
   }
 });
+const _hoisted_1$f = {
+  key: 0,
+  class: "chai-composer__world-field"
+};
+const _hoisted_2$a = { class: "chai-composer__world-field-head" };
+const _hoisted_3$9 = ["for"];
+const _hoisted_4$7 = ["disabled", "aria-label", "title"];
+const _hoisted_5$6 = { class: "chai-composer__field chai-composer__field--boxed" };
+const _hoisted_6$6 = ["id", "value", "placeholder", "aria-describedby", "disabled"];
+const _hoisted_7$6 = {
+  key: 0,
+  class: "chai-composer__reveal chai-composer__type",
+  "aria-hidden": "true"
+};
+const _hoisted_8$6 = { class: "chai-composer__reveal-text" };
+const _hoisted_9$6 = ["id"];
+const _hoisted_10$6 = {
+  key: 1,
+  class: "chai-composer__field"
+};
+const _hoisted_11$5 = ["id", "value", "placeholder", "aria-label", "disabled"];
+const _hoisted_12$5 = {
+  key: 0,
+  class: "chai-composer__reveal chai-composer__type",
+  "aria-hidden": "true"
+};
+const _hoisted_13$4 = { class: "chai-composer__reveal-text" };
+const _hoisted_14$4 = ["disabled", "aria-label", "title"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "PromptField",
+  props: {
+    value: {},
+    placeholder: {},
+    label: {},
+    heading: {},
+    note: {},
+    hint: {},
+    onEnhance: { type: Function },
+    enhancing: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const id = useId();
+    const textarea = ref();
+    watch(
+      () => props.value,
+      () => {
+        const el = textarea.value;
+        if (!el) return;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+      },
+      { flush: "post", immediate: true }
+    );
+    const originalValue = ref(null);
+    const enhancedValue = ref(null);
+    const animatingText = ref(null);
+    const revealedLength = ref(0);
+    let raf = 0;
+    watch(
+      () => props.enhancing,
+      (now, was) => {
+        if (!was || now || originalValue.value == null || props.value === originalValue.value) return;
+        const value = props.value;
+        enhancedValue.value = value;
+        if (value.length > MAX_ANIMATE_ENHANCE_LENGTH || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+        animatingText.value = value;
+        revealedLength.value = 0;
+        const duration = enhanceRevealDurationMs(value.length);
+        const start = performance.now();
+        const tick = (time) => {
+          revealedLength.value = Math.min(value.length, Math.floor((time - start) / duration * value.length));
+          if (revealedLength.value < value.length) raf = requestAnimationFrame(tick);
+          else animatingText.value = null;
+        };
+        raf = requestAnimationFrame(tick);
+      }
+    );
+    onScopeDispose(() => cancelAnimationFrame(raf));
+    const animating = computed(() => animatingText.value != null);
+    const isEnhanced = computed(() => !animating.value && enhancedValue.value != null && props.value === enhancedValue.value);
+    const enhanceBusy = computed(() => props.enhancing || animating.value);
+    const optimizeName = computed(
+      () => `${isEnhanced.value ? "Revert to original" : "Optimize"} ${props.heading ? props.heading.toLowerCase() : "prompt"}`
+    );
+    function onOptimizeClick() {
+      if (isEnhanced.value) {
+        const original = originalValue.value;
+        enhancedValue.value = null;
+        originalValue.value = null;
+        if (original != null) emit("change", original);
+        return;
+      }
+      originalValue.value = props.value;
+      props.onEnhance?.(props.value);
+    }
+    return (_ctx, _cache) => {
+      return __props.heading ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$a, [
+          createElementVNode("label", {
+            for: unref(id),
+            class: "chai-composer__world-field-label"
+          }, [
+            createElementVNode("strong", null, toDisplayString(__props.heading), 1),
+            createTextVNode(" " + toDisplayString(__props.note), 1)
+          ], 8, _hoisted_3$9),
+          __props.onEnhance ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: normalizeClass(["chai-composer__optimize", { "chai-composer__optimize--active": enhanceBusy.value }]),
+            disabled: __props.disabled || (isEnhanced.value ? false : !__props.value.trim() || enhanceBusy.value),
+            "aria-label": optimizeName.value,
+            title: optimizeName.value,
+            onClick: onOptimizeClick
+          }, [
+            isEnhanced.value ? (openBlock(), createBlock(unref(UndoIcon), { key: 0 })) : (openBlock(), createBlock(unref(OptimizeIcon), { key: 1 }))
+          ], 10, _hoisted_4$7)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_5$6, [
+          createElementVNode("textarea", {
+            id: unref(id),
+            ref_key: "textarea",
+            ref: textarea,
+            class: normalizeClass(["chai-composer__input chai-composer__type", { "chai-composer__input--revealing": animating.value }]),
+            value: __props.value,
+            placeholder: __props.placeholder,
+            "aria-describedby": __props.hint ? `${unref(id)}-hint` : void 0,
+            rows: "1",
+            disabled: __props.disabled || animating.value,
+            onInput: _cache[0] || (_cache[0] = ($event) => emit("change", $event.target.value))
+          }, null, 42, _hoisted_6$6),
+          animating.value ? (openBlock(), createElementBlock("div", _hoisted_7$6, [
+            createElementVNode("span", _hoisted_8$6, toDisplayString(animatingText.value.slice(0, revealedLength.value)), 1)
+          ])) : createCommentVNode("", true)
+        ]),
+        __props.hint ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          id: `${unref(id)}-hint`,
+          class: "chai-composer__field-hint"
+        }, toDisplayString(__props.hint), 9, _hoisted_9$6)) : createCommentVNode("", true)
+      ])) : (openBlock(), createElementBlock("div", _hoisted_10$6, [
+        createElementVNode("textarea", {
+          id: unref(id),
+          ref_key: "textarea",
+          ref: textarea,
+          class: normalizeClass(["chai-composer__input chai-composer__type", { "chai-composer__input--revealing": animating.value }]),
+          value: __props.value,
+          placeholder: __props.placeholder,
+          "aria-label": __props.label ?? __props.placeholder,
+          rows: "1",
+          disabled: __props.disabled || animating.value,
+          onInput: _cache[1] || (_cache[1] = ($event) => emit("change", $event.target.value))
+        }, null, 42, _hoisted_11$5),
+        animating.value ? (openBlock(), createElementBlock("div", _hoisted_12$5, [
+          createElementVNode("span", _hoisted_13$4, toDisplayString(animatingText.value.slice(0, revealedLength.value)), 1)
+        ])) : createCommentVNode("", true),
+        __props.onEnhance ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          type: "button",
+          class: normalizeClass(["chai-composer__optimize", { "chai-composer__optimize--active": enhanceBusy.value }]),
+          disabled: __props.disabled || (isEnhanced.value ? false : !__props.value.trim() || enhanceBusy.value),
+          "aria-label": optimizeName.value,
+          title: optimizeName.value,
+          onClick: onOptimizeClick
+        }, [
+          isEnhanced.value ? (openBlock(), createBlock(unref(UndoIcon), { key: 0 })) : (openBlock(), createBlock(unref(OptimizeIcon), { key: 1 }))
+        ], 10, _hoisted_14$4)) : createCommentVNode("", true)
+      ]));
+    };
+  }
+});
 const _hoisted_1$e = ["aria-label", ".selected", ".disabled"];
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Toggle",
@@ -259,14 +434,14 @@ const _hoisted_10$5 = {
 };
 const _hoisted_11$4 = ["aria-label"];
 const _hoisted_12$4 = ["aria-pressed", "disabled", "onClick"];
-const _hoisted_13$4 = [".checked", ".disabled"];
-const _hoisted_14$4 = { class: "chai-search-menu__option-label" };
-const _hoisted_15$4 = {
+const _hoisted_13$3 = [".checked", ".disabled"];
+const _hoisted_14$3 = { class: "chai-search-menu__option-label" };
+const _hoisted_15$3 = {
   key: 1,
   class: "chai-search-menu__divider",
   role: "separator"
 };
-const _hoisted_16$3 = {
+const _hoisted_16$2 = {
   key: 0,
   class: "chai-search-menu__empty"
 };
@@ -459,17 +634,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           ".disabled": __props.toggleHeader?.value ?? false,
                           tabindex: "-1",
                           "aria-hidden": "true"
-                        }, null, 40, _hoisted_13$4)) : createCommentVNode("", true),
-                        createElementVNode("span", _hoisted_14$4, toDisplayString(o.rowLabel ?? o.label), 1),
+                        }, null, 40, _hoisted_13$3)) : createCommentVNode("", true),
+                        createElementVNode("span", _hoisted_14$3, toDisplayString(o.rowLabel ?? o.label), 1),
                         !__props.multiple && isSelected(o.id) ? (openBlock(), createBlock(unref(CheckIcon), { key: 1 })) : createCommentVNode("", true)
                       ], 10, _hoisted_12$4)
                     ]);
                   }), 128))
                 ], 8, _hoisted_11$4),
-                i < groups.value.length - 1 ? (openBlock(), createElementBlock("hr", _hoisted_15$4)) : createCommentVNode("", true)
+                i < groups.value.length - 1 ? (openBlock(), createElementBlock("hr", _hoisted_15$3)) : createCommentVNode("", true)
               ]);
             }), 128)),
-            !hasAnyOption.value ? (openBlock(), createElementBlock("li", _hoisted_16$3, "No matches.")) : createCommentVNode("", true)
+            !hasAnyOption.value ? (openBlock(), createElementBlock("li", _hoisted_16$2, "No matches.")) : createCommentVNode("", true)
           ])
         ], 12, _hoisted_3$8)) : createCommentVNode("", true)
       ], 512);
@@ -492,24 +667,19 @@ const _hoisted_6$4 = {
   class: "chai-composer__regions",
   "aria-label": "Edit regions"
 };
-const _hoisted_7$4 = { class: "chai-composer__field" };
-const _hoisted_8$4 = ["value", "placeholder", "aria-label", "disabled"];
-const _hoisted_9$4 = {
-  key: 0,
-  class: "chai-composer__reveal chai-composer__type",
-  "aria-hidden": "true"
-};
-const _hoisted_10$4 = { class: "chai-composer__reveal-text" };
-const _hoisted_11$3 = ["disabled", "aria-label", "title"];
-const _hoisted_12$3 = {
+const _hoisted_7$4 = {
   key: 2,
+  class: "chai-composer__world-fields"
+};
+const _hoisted_8$4 = {
+  key: 4,
   class: "chai-composer__error",
   role: "alert"
 };
-const _hoisted_13$3 = { class: "chai-composer__controls" };
-const _hoisted_14$3 = { class: "chai-composer__controls-start" };
-const _hoisted_15$3 = ["data-ready", "data-error", "data-stop", "aria-label", "aria-disabled"];
-const _hoisted_16$2 = { slot: "icon" };
+const _hoisted_9$4 = { class: "chai-composer__controls" };
+const _hoisted_10$4 = { class: "chai-composer__controls-start" };
+const _hoisted_11$3 = ["data-ready", "data-error", "data-stop", "aria-label", "aria-disabled"];
+const _hoisted_12$3 = { slot: "icon" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Composer",
   props: {
@@ -539,6 +709,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     "onUpdate:aspectRatio": {},
     onEnhance: {},
     enhancing: { type: Boolean },
+    character: { default: "" },
+    "onUpdate:character": {},
+    frameRate: { default: null },
+    "onUpdate:frameRate": {},
     submitError: { default: null },
     submitDisabled: { type: Boolean, default: void 0 },
     submitting: { type: Boolean },
@@ -578,60 +752,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         else props["onUpdate:modelId"]?.(null);
       }
     );
-    function toggleModel(id) {
-      if (view.value.multiModel) props["onUpdate:modelIds"]?.(view.value.toggledModelIds(id));
-      else props["onUpdate:modelId"]?.(id);
-    }
-    const textarea = ref();
     watch(
-      () => props.modelValue,
+      () => view.value.useCaseKey,
       () => {
-        const el = textarea.value;
-        if (!el) return;
-        el.style.height = "auto";
-        el.style.height = `${el.scrollHeight}px`;
-      },
-      { flush: "post", immediate: true }
-    );
-    const originalValue = ref(null);
-    const enhancedValue = ref(null);
-    const animatingText = ref(null);
-    const revealedLength = ref(0);
-    let raf = 0;
-    watch(
-      () => props.enhancing,
-      (now, was) => {
-        if (!was || now || originalValue.value == null || props.modelValue === originalValue.value) return;
-        const value = props.modelValue;
-        enhancedValue.value = value;
-        if (value.length > MAX_ANIMATE_ENHANCE_LENGTH || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-        animatingText.value = value;
-        revealedLength.value = 0;
-        const duration = enhanceRevealDurationMs(value.length);
-        const start = performance.now();
-        const tick = (time) => {
-          revealedLength.value = Math.min(value.length, Math.floor((time - start) / duration * value.length));
-          if (revealedLength.value < value.length) raf = requestAnimationFrame(tick);
-          else animatingText.value = null;
-        };
-        raf = requestAnimationFrame(tick);
+        if (props.autoSelectModel && props.showAutoSelectToggle) props["onUpdate:autoSelectModel"]?.(false);
       }
     );
-    onScopeDispose(() => cancelAnimationFrame(raf));
-    const animating = computed(() => animatingText.value != null);
-    const isEnhanced = computed(() => !animating.value && enhancedValue.value != null && props.modelValue === enhancedValue.value);
-    const enhanceBusy = computed(() => Boolean(props.enhancing) || animating.value);
-    function onOptimizeClick() {
-      if (isEnhanced.value) {
-        const original = originalValue.value;
-        enhancedValue.value = null;
-        originalValue.value = null;
-        if (original != null) emit("update:modelValue", original);
-        return;
-      }
-      originalValue.value = props.modelValue;
-      props.onEnhance?.(props.modelValue);
+    function toggleModel(id) {
+      if (view.value.multiModel) props["onUpdate:modelIds"]?.(view.value.toggledModelIds(id));
+      else props["onUpdate:modelId"]?.(id);
     }
+    const enhancingField = ref("prompt");
+    const enhanceField = (field) => props.onEnhance && ((current) => {
+      enhancingField.value = field;
+      props.onEnhance?.(current, field);
+    });
     async function onFiles(files) {
       const onAttachments = props["onUpdate:attachments"];
       if (!files || files.length === 0 || !onAttachments) return;
@@ -680,7 +815,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             return openBlock(), createElementBlock("li", {
               key: r.id
             }, [
-              createVNode(_sfc_main$f, {
+              createVNode(_sfc_main$g, {
                 label: `Region ${r.number}`,
                 "region-number": r.number,
                 removable: Boolean(props["onUpdate:regions"]),
@@ -690,49 +825,55 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_7$4, [
-          createElementVNode("textarea", {
-            ref_key: "textarea",
-            ref: textarea,
-            class: normalizeClass(["chai-composer__input chai-composer__type", { "chai-composer__input--revealing": animating.value }]),
+        view.value.world ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
+          createVNode(_sfc_main$f, {
             value: __props.modelValue,
             placeholder: view.value.placeholder,
-            "aria-label": __props.promptLabel ?? view.value.placeholder,
-            rows: "1",
-            disabled: __props.disabled || animating.value,
-            onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }, null, 42, _hoisted_8$4),
-          animating.value ? (openBlock(), createElementBlock("div", _hoisted_9$4, [
-            createElementVNode("span", _hoisted_10$4, toDisplayString(animatingText.value.slice(0, revealedLength.value)), 1)
-          ])) : createCommentVNode("", true),
-          __props.onEnhance ? (openBlock(), createElementBlock("button", {
-            key: 1,
-            type: "button",
-            class: normalizeClass(["chai-composer__optimize", { "chai-composer__optimize--active": enhanceBusy.value }]),
-            disabled: __props.disabled || (isEnhanced.value ? false : !__props.modelValue.trim() || enhanceBusy.value),
-            "aria-label": isEnhanced.value ? "Revert to original prompt" : "Optimize prompt",
-            title: isEnhanced.value ? "Revert to original prompt" : "Optimize prompt",
-            onClick: onOptimizeClick
-          }, [
-            isEnhanced.value ? (openBlock(), createBlock(unref(UndoIcon), { key: 0 })) : (openBlock(), createBlock(unref(OptimizeIcon), { key: 1 }))
-          ], 10, _hoisted_11$3)) : createCommentVNode("", true)
-        ]),
-        __props.submitError ? (openBlock(), createElementBlock("p", _hoisted_12$3, [
+            heading: "Environment",
+            note: "(required)",
+            hint: view.value.environmentHint,
+            "on-enhance": enhanceField("environment"),
+            enhancing: Boolean(__props.enhancing) && enhancingField.value === "environment",
+            disabled: __props.disabled,
+            onChange: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+          }, null, 8, ["value", "placeholder", "hint", "on-enhance", "enhancing", "disabled"]),
+          props["onUpdate:character"] ? (openBlock(), createBlock(_sfc_main$f, {
+            key: 0,
+            value: __props.character,
+            placeholder: view.value.characterPlaceholder,
+            heading: "Character",
+            note: "(optional)",
+            "on-enhance": enhanceField("character"),
+            enhancing: Boolean(__props.enhancing) && enhancingField.value === "character",
+            disabled: __props.disabled,
+            onChange: _cache[1] || (_cache[1] = ($event) => props["onUpdate:character"]?.($event))
+          }, null, 8, ["value", "placeholder", "on-enhance", "enhancing", "disabled"])) : createCommentVNode("", true)
+        ])) : (openBlock(), createBlock(_sfc_main$f, {
+          key: 3,
+          value: __props.modelValue,
+          placeholder: view.value.placeholder,
+          label: __props.promptLabel,
+          "on-enhance": enhanceField("prompt"),
+          enhancing: Boolean(__props.enhancing),
+          disabled: __props.disabled,
+          onChange: _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
+        }, null, 8, ["value", "placeholder", "label", "on-enhance", "enhancing", "disabled"])),
+        __props.submitError ? (openBlock(), createElementBlock("p", _hoisted_8$4, [
           createVNode(unref(ErrorIcon)),
           createTextVNode(toDisplayString(__props.submitError), 1)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_13$3, [
-          createElementVNode("div", _hoisted_14$3, [
-            menuItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$g, {
+        createElementVNode("div", _hoisted_9$4, [
+          createElementVNode("div", _hoisted_10$4, [
+            menuItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$h, {
               key: 0,
               items: menuItems.value,
               "images-only": view.value.editing,
               disabled: __props.disabled,
-              onSelect: _cache[1] || (_cache[1] = ($event) => __props.onAttachMenuSelect?.($event)),
+              onSelect: _cache[3] || (_cache[3] = ($event) => __props.onAttachMenuSelect?.($event)),
               onFiles
             }, null, 8, ["items", "images-only", "disabled"])) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(view.value.pickedUseCases, (u) => {
-              return openBlock(), createBlock(_sfc_main$f, {
+              return openBlock(), createBlock(_sfc_main$g, {
                 key: u.kind,
                 label: u.label,
                 removable: Boolean(__props.multiSelectUseCases ? props["onUpdate:useCases"] : __props.onClearUseCase),
@@ -750,7 +891,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "trigger-variant": "text",
               disabled: __props.disabled || __props.autoSelectModel && !__props.showAutoSelectToggle,
               "panel-width": __props.showAutoSelectToggle ? 320 : void 0,
-              onSelect: _cache[2] || (_cache[2] = ($event) => toggleModel($event.id))
+              onSelect: _cache[4] || (_cache[4] = ($event) => toggleModel($event.id))
             }), null, 16, ["value", "multiple", "toggle-header", "trigger-label", "menu-label", "disabled", "panel-width"])) : createCommentVNode("", true),
             view.value.showAspectRatio && view.value.aspectOptions.length > 0 && props["onUpdate:aspectRatio"] ? (openBlock(), createBlock(_sfc_main$d, {
               key: 2,
@@ -761,7 +902,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               searchable: false,
               "trigger-variant": "text",
               disabled: __props.disabled,
-              onSelect: _cache[3] || (_cache[3] = ($event) => props["onUpdate:aspectRatio"]?.($event.id))
+              onSelect: _cache[5] || (_cache[5] = ($event) => props["onUpdate:aspectRatio"]?.($event.id))
+            }, null, 8, ["options", "value", "trigger-label", "disabled"])) : createCommentVNode("", true),
+            view.value.frameRateOptions.length > 0 && props["onUpdate:frameRate"] ? (openBlock(), createBlock(_sfc_main$d, {
+              key: 3,
+              options: view.value.frameRateOptions.map((r) => ({ id: String(r), label: `${r}fps` })),
+              value: view.value.offeredFrameRate == null ? null : String(view.value.offeredFrameRate),
+              "trigger-label": view.value.offeredFrameRate == null ? "Frame rate" : `${view.value.offeredFrameRate}fps`,
+              "menu-label": "Frame rate",
+              searchable: false,
+              "trigger-variant": "text",
+              disabled: __props.disabled,
+              onSelect: _cache[6] || (_cache[6] = ($event) => props["onUpdate:frameRate"]?.(Number($event.id)))
             }, null, 8, ["options", "value", "trigger-label", "disabled"])) : createCommentVNode("", true)
           ]),
           createElementVNode("md-fab", {
@@ -776,10 +928,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "aria-disabled": view.value.showStop ? "false" : __props.submitting || view.value.isSubmitDisabled ? "true" : "false",
             onClick: onSubmitClick
           }, [
-            createElementVNode("span", _hoisted_16$2, [
+            createElementVNode("span", _hoisted_12$3, [
               view.value.showStop ? (openBlock(), createBlock(unref(StopIcon), { key: 0 })) : __props.submitError ? (openBlock(), createBlock(unref(RetryIcon), { key: 1 })) : (openBlock(), createBlock(unref(ArrowForwardIcon), { key: 2 }))
             ])
-          ], 8, _hoisted_15$3)
+          ], 8, _hoisted_11$3)
         ])
       ]);
     };
@@ -2471,7 +2623,7 @@ function useMediaAnalyzer(options = {}) {
   };
 }
 export {
-  _sfc_main$h as ChaiProvider,
+  _sfc_main$i as ChaiProvider,
   _sfc_main$c as Composer,
   DEFAULT_MAX_ATTACHMENTS_BY_KIND2 as DEFAULT_MAX_ATTACHMENTS_BY_KIND,
   DEFAULT_MAX_REGIONS2 as DEFAULT_MAX_REGIONS,