@chai-ui/vue 0.0.0-stage → 0.7.1

package/dist/index.js

@@ -0,0 +1,2521 @@
+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 { 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";
+import "@material/web/textfield/outlined-text-field.js";
+import "@material/web/switch/switch.js";
+const reasoningKey = /* @__PURE__ */ Symbol("chai-reasoning");
+function useReasoning() {
+  const provided = inject(reasoningKey, null);
+  return computed(() => provided?.value);
+}
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "ChaiProvider",
+  props: {
+    reasoningModel: {},
+    reasoningModelByKind: {},
+    reasoningEngine: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const engine = computed(() => reasoningEngineFor({ reasoningEngine: props.reasoningEngine }));
+    provide(
+      reasoningKey,
+      computed(() => createReasoning(props, engine.value))
+    );
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+function useDismiss(root, open, close) {
+  function onPointerDown(e) {
+    if (!root.value?.contains(e.target)) close();
+  }
+  function onKeydown(e) {
+    if (e.key === "Escape") close();
+  }
+  function listen(on) {
+    if (on) {
+      document.addEventListener("pointerdown", onPointerDown);
+      document.addEventListener("keydown", onKeydown);
+    } else {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeydown);
+    }
+  }
+  watch(open, listen);
+  onScopeDispose(() => listen(false));
+}
+const icon = (viewBox, shapes, traced = false) => () => h(
+  "svg",
+  { viewBox, "aria-hidden": "true", ...traced && { fill: "none" } },
+  shapes.map(({ tag = "path", ...attrs }) => h(tag, attrs))
+);
+const DownloadIcon = icon("0 0 18 18", [{ "d": "M8.99961 11.9999L5.24961 8.2499L6.29961 7.1624L8.24961 9.1124V2.9999H9.74961V9.1124L11.6996 7.1624L12.7496 8.2499L8.99961 11.9999ZM2.99961 14.9999V11.2499H4.49961V13.4999H13.4996V11.2499H14.9996V14.9999H2.99961Z", "fill": "currentColor" }], true);
+const ShareIcon = icon("0 0 18 18", [{ "d": "M2.99961 16.4999V5.9999H6.74961V7.4999H4.49961V14.9999H13.4996V7.4999H11.2496V5.9999H14.9996V16.4999H2.99961ZM8.24961 11.9999V3.61865L7.04961 4.81865L5.99961 3.7499L8.99961 0.749904L11.9996 3.7499L10.9496 4.81865L9.74961 3.61865V11.9999H8.24961Z", "fill": "currentColor" }], true);
+const ExpandIcon = icon("0 0 18 18", [{ "d": "M2 6V2h4M12 2h4v4M16 12v4h-4M6 16H2v-4", "stroke": "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" }], true);
+const ZoomInIcon = icon("0 -960 960 960", [{ "d": "M796-121 533-384q-30 26-69.96 40.5Q423.08-329 378-329q-108.16 0-183.08-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.13-57.5Q572-504 572-585t-56.87-138.5Q458.25-781 377-781q-82.08 0-139.54 57.5Q180-666 180-585t57.46 138.5Q294.92-389 377-389Zm-31-85v-82h-82v-60h82v-81h60v81h81v60h-81v82h-60Z", "fill": "currentColor" }]);
+const ZoomOutIcon = icon("0 -960 960 960", [{ "d": "M796-121 533-384q-30 26-70 40.5T378-329q-108 0-183-75t-75-181q0-106 75-181t182-75q106 0 180.5 75T632-585q0 43-14 83t-42 75l264 262-44 44ZM377-389q81 0 138-57.5T572-585q0-81-57-138.5T377-781q-82 0-139.5 57.5T180-585q0 81 57.5 138.5T377-389ZM275-556v-60h201v60H275Z", "fill": "currentColor" }]);
+const AddIcon = icon("0 -960 960 960", [{ "d": "M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z", "fill": "currentColor" }]);
+const DeleteIcon = icon("0 -960 960 960", [{ "d": "M261-120q-24.75 0-42.37-17.63Q201-155.25 201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z", "fill": "currentColor" }]);
+const VisibilityIcon = icon("0 -960 960 960", [{ "d": "M600.5-379.5Q650-429 650-500t-49.5-120.5Q551-670 480-670t-120.5 49.5Q310-571 310-500t49.5 120.5Q409-330 480-330t120.5-49.5Zm-200-41Q368-453 368-500t32.5-79.5Q433-612 480-612t79.5 32.5Q592-547 592-500t-32.5 79.5Q527-388 480-388t-79.5-32.5ZM216-283Q98-366 40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83q-146 0-264-83Zm264-217Zm222.5 174.5Q804-391 857-500q-53-109-154.5-174.5T480-740q-121 0-222.5 65.5T102-500q54 109 155.5 174.5T480-260q121 0 222.5-65.5Z", "fill": "currentColor" }]);
+const VisibilityOffIcon = icon("0 -960 960 960", [{ "d": "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z", "fill": "currentColor" }]);
+const CheckSymbolIcon = icon("0 -960 960 960", [{ "d": "M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z", "fill": "currentColor" }]);
+const CloseSymbolIcon = icon("0 -960 960 960", [{ "d": "m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z", "fill": "currentColor" }]);
+const StopIcon = icon("0 -960 960 960", [{ "d": "M240-240v-480h480v480H240Z", "fill": "currentColor" }]);
+const ThumbUpIcon = icon("0 0 18 18", [{ "d": "M5.25039 15.7502V6.00019L10.5004 0.750193L11.8879 2.13769L10.9129 6.00019H17.2504V9.30019L14.5129 15.7502H5.25039ZM6.75039 14.2502H13.5004L15.7504 9.00019V7.50019H9.00039L10.0129 3.37519L6.75039 6.63769V14.2502ZM1.50039 15.7502V6.00019H5.25039V7.50019H3.00039V14.2502H5.25039V15.7502H1.50039Z", "fill": "currentColor" }], true);
+const ThumbDownIcon = icon("0 0 18 18", [{ "d": "M2.24961 12C1.84961 12 1.49961 11.85 1.19961 11.55C0.899615 11.25 0.749615 10.9 0.749615 10.5V9C0.749615 8.9125 0.762115 8.81875 0.787115 8.71875C0.812115 8.61875 0.837115 8.525 0.862115 8.4375L3.11211 3.15C3.22461 2.9 3.41211 2.6875 3.67461 2.5125C3.93711 2.3375 4.21211 2.25 4.49961 2.25H12.7496V12L8.24961 16.4625C8.06211 16.65 7.84024 16.7594 7.58399 16.7906C7.32774 16.8219 7.08086 16.775 6.84336 16.65C6.60586 16.525 6.43086 16.35 6.31836 16.125C6.20586 15.9 6.18086 15.6688 6.24336 15.4313L7.08711 12H2.24961ZM11.2496 11.3625V3.75H4.49961L2.24961 9V10.5H8.99961L7.98711 14.625L11.2496 11.3625ZM14.9996 2.25C15.4121 2.25 15.7652 2.39688 16.059 2.69063C16.3527 2.98438 16.4996 3.3375 16.4996 3.75V10.5C16.4996 10.9125 16.3527 11.2656 16.059 11.5594C15.7652 11.8531 15.4121 12 14.9996 12H12.7496V10.5H14.9996V3.75H12.7496V2.25H14.9996Z", "fill": "currentColor" }], true);
+const RefreshIcon = icon("0 0 18 18", [{ "d": "M8.99961 15.0002C7.32461 15.0002 5.90586 14.4189 4.74336 13.2564C3.58086 12.0939 2.99961 10.6752 2.99961 9.00019C2.99961 7.32519 3.58086 5.90644 4.74336 4.74394C5.90586 3.58144 7.32461 3.00019 8.99961 3.00019C9.86211 3.00019 10.6871 3.17832 11.4746 3.53457C12.2621 3.89082 12.9371 4.40019 13.4996 5.06269V3.00019H14.9996V8.25019H9.74961V6.75019H12.8996C12.4996 6.05019 11.9527 5.50019 11.259 5.10019C10.5652 4.70019 9.81211 4.50019 8.99961 4.50019C7.74961 4.50019 6.68711 4.93769 5.81211 5.81269C4.93711 6.68769 4.49961 7.75019 4.49961 9.00019C4.49961 10.2502 4.93711 11.3127 5.81211 12.1877C6.68711 13.0627 7.74961 13.5002 8.99961 13.5002C9.96211 13.5002 10.8309 13.2252 11.6059 12.6752C12.3809 12.1252 12.9246 11.4002 13.2371 10.5002H14.8121C14.4621 11.8252 13.7496 12.9064 12.6746 13.7439C11.5996 14.5814 10.3746 15.0002 8.99961 15.0002Z", "fill": "currentColor" }], true);
+const MoreHorizIcon = icon("0 0 24 24", [{ "d": "M6.41473 14C5.86473 14 5.3939 13.8042 5.00223 13.4125C4.61056 13.0208 4.41473 12.55 4.41473 12C4.41473 11.45 4.61056 10.9792 5.00223 10.5875C5.3939 10.1958 5.86473 10 6.41473 10C6.96473 10 7.43556 10.1958 7.82723 10.5875C8.2189 10.9792 8.41473 11.45 8.41473 12C8.41473 12.55 8.2189 13.0208 7.82723 13.4125C7.43556 13.8042 6.96473 14 6.41473 14ZM12.4147 14C11.8647 14 11.3939 13.8042 11.0022 13.4125C10.6106 13.0208 10.4147 12.55 10.4147 12C10.4147 11.45 10.6106 10.9792 11.0022 10.5875C11.3939 10.1958 11.8647 10 12.4147 10C12.9647 10 13.4356 10.1958 13.8272 10.5875C14.2189 10.9792 14.4147 11.45 14.4147 12C14.4147 12.55 14.2189 13.0208 13.8272 13.4125C13.4356 13.8042 12.9647 14 12.4147 14ZM18.4147 14C17.8647 14 17.3939 13.8042 17.0022 13.4125C16.6106 13.0208 16.4147 12.55 16.4147 12C16.4147 11.45 16.6106 10.9792 17.0022 10.5875C17.3939 10.1958 17.8647 10 18.4147 10C18.9647 10 19.4356 10.1958 19.8272 10.5875C20.2189 10.9792 20.4147 11.45 20.4147 12C20.4147 12.55 20.2189 13.0208 19.8272 13.4125C19.4356 13.8042 18.9647 14 18.4147 14Z", "fill": "currentColor" }], true);
+const InfoIcon = icon("0 0 22 22", [{ "d": "M10.0833 6.41667H11.9167V8.25H10.0833V6.41667ZM10.0833 10.0833H11.9167V15.5833H10.0833V10.0833ZM11 1.83333C5.94 1.83333 1.83333 5.94 1.83333 11C1.83333 16.06 5.94 20.1667 11 20.1667C16.06 20.1667 20.1667 16.06 20.1667 11C20.1667 5.94 16.06 1.83333 11 1.83333ZM11 18.3333C6.9575 18.3333 3.66667 15.0425 3.66667 11C3.66667 6.9575 6.9575 3.66667 11 3.66667C15.0425 3.66667 18.3333 6.9575 18.3333 11C18.3333 15.0425 15.0425 18.3333 11 18.3333Z", "fill": "currentColor" }], true);
+const CloseIcon = icon("0 0 14 14", [{ "d": "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", "fill": "currentColor" }], true);
+const CopyIcon = icon("0 0 8.60253 11.6462", [{ "d": "M1.01206 11.6462C0.733745 11.6462 0.495405 11.5323 0.29704 11.3044C0.0990134 11.0761 0 10.8019 0 10.4816V2.32924H1.01206V10.4816H6.57841V11.6462H1.01206ZM3.03619 9.31697C2.75787 9.31697 2.5197 9.20303 2.32167 8.97515C2.12331 8.74689 2.02413 8.47262 2.02413 8.15235V1.16462C2.02413 0.84435 2.12331 0.570082 2.32167 0.341816C2.5197 0.113939 2.75787 0 3.03619 0H7.59047C7.86879 0 8.10713 0.113939 8.30549 0.341816C8.50352 0.570082 8.60253 0.84435 8.60253 1.16462V8.15235C8.60253 8.47262 8.50352 8.74689 8.30549 8.97515C8.10713 9.20303 7.86879 9.31697 7.59047 9.31697H3.03619ZM3.03619 8.15235H7.59047V1.16462H3.03619V8.15235Z", "fill": "currentColor" }], true);
+const CheckIcon = icon("0 0 18 18", [{ "d": "M7.1625 13.5L2.8875 9.225L3.95625 8.15625L7.1625 11.3625L14.0438 4.48125L15.1125 5.55L7.1625 13.5Z", "fill": "currentColor" }], true);
+const PlayIcon = icon("0 -960 960 960", [{ "d": "M320-200v-560l440 280-440 280Z", "fill": "currentColor" }]);
+const ArrowForwardIcon = icon("0 -960 960 960", [{ "d": "M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z", "fill": "currentColor" }]);
+const RemoveIcon = icon("0 0 16 16", [{ "d": "M3.5 3.5l9 9m0-9-9 9", "stroke": "currentColor", "stroke-width": "3.5", "stroke-linecap": "round" }], true);
+const VideoIcon = icon("0 0 24 24", [{ "tag": "rect", "x": "2.5", "y": "5", "width": "19", "height": "14", "rx": "2", "stroke": "currentColor", "stroke-width": "1.5" }, { "d": "M10 9.5v5l4.5-2.5-4.5-2.5Z", "fill": "currentColor" }], true);
+const AudioIcon = icon("0 0 24 24", [{ "d": "M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm12-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z", "stroke": "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }], true);
+const MixedMediaIcon = icon("0 0 24.1904 24.3948", [{ "d": "M2.90401 23.3661C3.05621 23.765 3.35538 24.0825 3.7464 24.2557C3.95634 24.3502 4.17678 24.3948 4.39985 24.3948C4.59404 24.3948 4.78561 24.3581 4.97194 24.2872L14.4167 20.6762C15.2407 20.3613 15.6554 19.4323 15.3405 18.6083L12.543 11.2918C12.3908 10.8929 12.0916 10.5753 11.7006 10.4021C11.3096 10.2289 10.8739 10.2158 10.4751 10.368L1.03027 13.9817C0.63138 14.1339 0.313842 14.433 0.14064 14.824C-0.0351869 15.2151 -0.045684 15.6507 0.106524 16.0496L2.90401 23.3661ZM0.859692 15.1442C0.948918 14.9448 1.109 14.7926 1.31107 14.7165L10.7559 11.1054C10.8503 11.0687 10.95 11.0503 11.0471 11.0503C11.16 11.0503 11.2728 11.074 11.3778 11.1212C11.5773 11.2104 11.7295 11.3705 11.8056 11.5752L13.9811 17.262L10.294 14.9474C9.92658 14.7165 9.48308 14.6718 9.07631 14.8293C8.66955 14.9841 8.37038 15.3122 8.24966 15.7294L7.76155 17.43L6.26308 16.4905C5.89568 16.2595 5.45218 16.2149 5.04542 16.3724C4.63865 16.5272 4.33949 16.8552 4.21877 17.2725L3.01685 21.4582L0.843947 15.7688C0.765218 15.5667 0.773091 15.3437 0.862317 15.1468L0.859692 15.1442ZM14.6057 18.8917C14.7657 19.3116 14.5558 19.7839 14.1359 19.944L4.69114 23.555C4.48907 23.6338 4.26601 23.6259 4.06919 23.5367C3.86974 23.4474 3.71753 23.2873 3.64143 23.0827L3.57845 22.9199L7.24194 21.5186L14.5453 18.7263L14.6083 18.8891L14.6057 18.8917ZM7.69594 20.503L9.00546 15.9446C9.05532 15.7662 9.18391 15.6271 9.35711 15.5615C9.42534 15.5352 9.4962 15.5221 9.56705 15.5221C9.67465 15.5221 9.78224 15.551 9.87672 15.6113L13.8945 18.1333L7.69857 20.503H7.69594ZM6.77482 20.8546L3.66505 22.0434L4.97456 17.4851C5.02442 17.3066 5.15301 17.1675 5.32622 17.1019C5.39445 17.0757 5.4653 17.0626 5.53616 17.0626C5.64375 17.0626 5.75135 17.0914 5.84582 17.1518L7.53586 18.212L6.77744 20.852L6.77482 20.8546Z", "fill": "currentColor" }, { "d": "M6.70667 15.8872C6.70667 15.8872 6.71716 15.8872 6.72241 15.8872C7.04782 15.882 7.34961 15.7534 7.57793 15.5198C7.80624 15.2863 7.92695 14.9819 7.92171 14.6565C7.91646 14.331 7.78787 14.0293 7.55431 13.8009C7.32075 13.5753 7.00846 13.4493 6.69092 13.4572C6.36551 13.4624 6.06372 13.591 5.8354 13.8246C5.60709 14.0581 5.48638 14.3625 5.49162 14.6879C5.49687 15.0134 5.62546 15.3152 5.85902 15.5435C6.08734 15.7665 6.38913 15.8872 6.70667 15.8872ZM6.70667 14.2444C6.81951 14.2444 6.92448 14.2864 7.00583 14.3652C7.08719 14.4439 7.13442 14.5515 7.13442 14.667C7.13442 14.7824 7.09243 14.89 7.01371 14.9714C6.93498 15.0527 6.82738 15.1 6.71191 15.1C6.5912 15.1 6.48885 15.058 6.4075 14.9792C6.32614 14.9005 6.27891 14.7929 6.27891 14.6775C6.27891 14.562 6.3209 14.4544 6.39962 14.373C6.47835 14.2917 6.58595 14.2444 6.70142 14.2444H6.70667Z", "fill": "currentColor" }, { "d": "M23.9034 19.6056C23.8981 19.5819 23.885 19.5636 23.8797 19.5399C23.8797 19.5137 23.8745 19.4901 23.8692 19.4638L22.7408 15.0026L22.2894 13.2181C22.2606 13.1052 22.1845 13.0107 22.0821 12.9609C21.9771 12.911 21.8564 12.9084 21.7515 12.953L16.6236 15.1994C16.4478 15.2755 16.3533 15.4697 16.4005 15.656L16.8519 17.4405C16.8519 17.4405 16.8572 17.451 16.8598 17.4589C16.8598 17.4668 16.8598 17.472 16.8624 17.4799L17.794 21.1644C17.4686 21.1565 17.1039 21.2562 16.7417 21.4662C15.8862 21.9569 15.3692 22.836 15.5372 23.5105C15.6106 23.8018 15.8048 24.0275 16.083 24.1456C16.23 24.2085 16.39 24.2374 16.5633 24.2374C16.8808 24.2374 17.2324 24.1351 17.5815 23.933C18.437 23.4422 18.954 22.5631 18.786 21.8887C18.7808 21.8651 18.7676 21.8467 18.7624 21.8231C18.7624 21.7968 18.7571 21.7732 18.7519 21.747L17.6969 17.5717L22.0926 15.6455L22.9114 18.8812C22.586 18.8734 22.2212 18.9731 21.859 19.183C21.0035 19.6738 20.4865 20.5529 20.6545 21.2274C20.728 21.5187 20.9222 21.7443 21.2004 21.8624C21.3473 21.9254 21.51 21.9543 21.6806 21.9543C21.9981 21.9543 22.3498 21.8519 22.6988 21.6499C23.5543 21.1591 24.0713 20.28 23.9007 19.6056H23.9034ZM21.5074 21.1355C21.4549 21.1145 21.4313 21.0856 21.4182 21.0332C21.3552 20.7812 21.6412 20.2144 22.2501 19.8654C22.4967 19.7236 22.7198 19.6685 22.8799 19.6685C22.9481 19.6685 23.0059 19.679 23.0505 19.6974C23.103 19.7184 23.1266 19.7473 23.1397 19.7997C23.2027 20.0517 22.9166 20.6185 22.3078 20.9676C21.9561 21.1696 21.6517 21.1985 21.5074 21.1355ZM17.5001 16.7976L17.2456 15.7872L21.6412 13.861L21.8958 14.8713L17.5001 16.7976ZM16.39 23.4186C16.3376 23.3976 16.3139 23.3688 16.3008 23.3163C16.2378 23.0644 16.5239 22.4975 17.1327 22.1485C17.3794 22.0068 17.6025 21.9517 17.7625 21.9517C17.8308 21.9517 17.8885 21.9622 17.9331 21.9805C17.9856 22.0015 18.0092 22.0304 18.0224 22.0829C18.0853 22.3348 17.7993 22.9016 17.1905 23.2507C16.8388 23.4527 16.5344 23.4816 16.39 23.4186Z", "fill": "currentColor" }, { "d": "M2.04571 7.49995C2.2504 7.54719 2.4551 7.57081 2.65192 7.57081C3.33686 7.57081 3.94831 7.30313 4.19237 6.85438C4.20549 6.83076 4.21074 6.80715 4.22124 6.78353C4.23436 6.76778 4.24748 6.75204 4.25798 6.73367L6.1737 3.23025L10.3489 4.6841L8.88721 7.35562C8.66677 7.15355 8.35973 6.99872 7.9897 6.91212C7.0817 6.70217 6.15796 6.98035 5.84042 7.55769C5.70133 7.80962 5.69083 8.09567 5.80893 8.36072C5.98475 8.75174 6.41251 9.0509 6.98723 9.18212C7.19192 9.22936 7.39662 9.25297 7.59344 9.25297C8.27837 9.25297 8.88983 8.9853 9.13389 8.53655C9.14701 8.51293 9.15226 8.48931 9.16276 8.46569C9.17588 8.44994 9.189 8.4342 9.1995 8.41583L11.2569 4.65261L12.081 3.14628C12.1361 3.04393 12.1439 2.92321 12.1019 2.81562C12.06 2.70802 11.9734 2.62404 11.8631 2.58468L6.94262 0.871025C6.76154 0.808042 6.55947 0.884146 6.46762 1.05472L5.6436 2.56106C5.6436 2.56106 5.63835 2.57156 5.63572 2.57681C5.6331 2.58206 5.62785 2.5873 5.62523 2.59255L3.94044 5.67083C3.72 5.46876 3.41296 5.31393 3.04294 5.22733C2.13494 5.01739 1.21119 5.29556 0.893651 5.8729C0.754565 6.12483 0.744067 6.41088 0.86216 6.67593C1.03799 7.06695 1.46574 7.36612 2.04046 7.49733L2.04571 7.49995ZM1.58909 6.2508C1.67306 6.09859 2.01422 5.94638 2.44722 5.94638C2.58106 5.94638 2.72277 5.96213 2.86973 5.99362C3.22926 6.0776 3.4497 6.24293 3.50743 6.37151C3.52843 6.41613 3.52056 6.445 3.50481 6.47649C3.39459 6.67593 2.84349 6.87538 2.22416 6.73367C1.86463 6.64969 1.6442 6.48436 1.58646 6.35577C1.56547 6.31116 1.57334 6.28229 1.58909 6.25342V6.2508ZM11.173 3.17777L10.7321 3.98342L6.55685 2.52957L6.99773 1.72392L11.173 3.17777ZM7.1683 8.41583C6.80878 8.33185 6.58834 8.16652 6.5306 8.03793C6.50961 7.99332 6.51748 7.96445 6.53323 7.93296C6.61721 7.78075 6.95836 7.62592 7.39137 7.62592C7.52521 7.62592 7.66692 7.64167 7.81388 7.67316C8.1734 7.75713 8.39384 7.92246 8.45158 8.05105C8.47257 8.09567 8.4647 8.12453 8.44895 8.15602C8.33873 8.35547 7.78501 8.55492 7.1683 8.41321V8.41583Z", "fill": "currentColor" }, { "d": "M13.0938 8.46027L18.1771 11.6671C18.4736 11.8535 18.8095 11.9506 19.1507 11.9506C19.2871 11.9506 19.4236 11.9348 19.5574 11.9059C20.0351 11.7983 20.4392 11.5097 20.7016 11.0977L23.9085 6.01444C24.4465 5.16155 24.1919 4.02786 23.3364 3.48988L18.2532 0.283009C17.8385 0.0232057 17.3504 -0.0633955 16.8728 0.0468243C16.3952 0.15442 15.991 0.443091 15.7286 0.855103L12.5217 5.93833C11.9838 6.79122 12.2383 7.92491 13.0938 8.46289V8.46027ZM17.046 0.813114C17.1221 0.794744 17.2008 0.786871 17.2769 0.786871C17.4711 0.786871 17.6627 0.841981 17.8307 0.946952L22.9139 4.15382C23.3994 4.46086 23.5463 5.10644 23.2393 5.59193L20.0324 10.6752C19.8828 10.9113 19.6519 11.074 19.3816 11.1344C19.1087 11.1974 18.8305 11.1475 18.5943 11.0006L13.5111 7.7937C13.0256 7.48666 12.8786 6.84108 13.1857 6.35559L16.3926 1.27236C16.5421 1.03618 16.7731 0.873472 17.0434 0.813114H17.046Z", "fill": "currentColor" }, { "d": "M16.4532 7.53394L19.353 7.78587C19.3845 7.78587 19.4133 7.78849 19.4448 7.78849C19.7991 7.78849 20.1298 7.60742 20.324 7.303C20.5313 6.97234 20.5392 6.5577 20.3397 6.2218L18.8649 3.71299C18.6785 3.39807 18.3505 3.2065 17.9857 3.20125C17.6262 3.196 17.2851 3.37708 17.0909 3.68674L15.6659 5.94625C15.4717 6.25591 15.4507 6.63643 15.6134 6.96447C15.7761 7.2925 16.091 7.50769 16.4558 7.53919L16.4532 7.53394ZM17.7548 4.104C17.8204 3.99903 17.9228 3.98591 17.9674 3.98591H17.97C18.012 3.98591 18.1196 3.99903 18.1826 4.10925L19.6574 6.61806C19.7283 6.73878 19.6784 6.84113 19.6522 6.88049C19.6285 6.91986 19.5524 7.00908 19.416 6.99596L16.5161 6.74403C16.3875 6.73353 16.3298 6.64431 16.3114 6.60494C16.2931 6.56558 16.2563 6.46586 16.3246 6.35826L17.7496 4.09876L17.7548 4.104Z", "fill": "currentColor" }], true);
+const PlusIcon = icon("0 -960 960 960", [{ "d": "M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z", "fill": "currentColor" }]);
+const RetryIcon = icon("0 -960 960 960", [{ "d": "M480-160q-133 0-226.5-93.5T160-480q0-133 93.5-226.5T480-800q85 0 149 34.5T740-671v-129h60v254H546v-60h168q-38-60-97-97t-137-37q-109 0-184.5 75.5T220-480q0 109 75.5 184.5T480-220q83 0 152-47.5T728-393h62q-29 105-115 169t-195 64Z", "fill": "currentColor" }]);
+const ErrorIcon = icon("0 -960 960 960", [{ "d": "M503.5-289.48q9.5-9.48 9.5-23.5t-9.48-23.52q-9.48-9.5-23.5-9.5t-23.52 9.48q-9.5 9.48-9.5 23.5t9.48 23.52q9.48 9.5 23.5 9.5t23.52-9.48ZM453-433h60v-253h-60v253Zm27.27 353q-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.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z", "fill": "currentColor" }]);
+const OptimizeIcon = icon("0 0 25 24", [{ "d": "M5 19H6.425L16.2 9.225L14.775 7.8L5 17.575V19ZM3 21V16.75L16.2 3.575C16.4 3.39167 16.6208 3.25 16.8625 3.15C17.1042 3.05 17.3583 3 17.625 3C17.8917 3 18.15 3.05 18.4 3.15C18.65 3.25 18.8667 3.4 19.05 3.6L20.425 5C20.625 5.18333 20.7708 5.4 20.8625 5.65C20.9542 5.9 21 6.15 21 6.4C21 6.66667 20.9542 6.92083 20.8625 7.1625C20.7708 7.40417 20.625 7.625 20.425 7.825L7.25 21H3ZM15.475 8.525L14.775 7.8L16.2 9.225L15.475 8.525Z", "fill": "currentColor" }, { "d": "M20 12L21.5918 15.4082L25 17L21.5918 18.5918L20 22L18.4082 18.5918L15 17L18.4082 15.4082L20 12Z", "fill": "currentColor" }, { "d": "M6 3L7.27345 5.72655L10 7L7.27345 8.27345L6 11L4.72655 8.27345L2 7L4.72655 5.72655L6 3Z", "fill": "currentColor" }], true);
+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 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 = {
+  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 = {
+  key: 0,
+  class: "chai-composer__attach-menu-divider",
+  role: "separator"
+};
+const _hoisted_6$6 = ["accept", "multiple", "disabled"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "AttachMenu",
+  props: {
+    items: {},
+    imagesOnly: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  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 open = ref(false);
+    const root = ref();
+    const input = ref();
+    useDismiss(root, open, () => open.value = false);
+    function pick(action) {
+      open.value = false;
+      if (action === "add-media") input.value?.click();
+      emit("select", action);
+    }
+    function onFileChange(e) {
+      const el = e.target;
+      emit("files", el.files);
+      el.value = "";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: "chai-composer__attach"
+      }, [
+        createElementVNode("button", {
+          type: "button",
+          class: normalizeClass(["chai-composer__attach-toggle", { "chai-composer__attach-toggle--open": open.value }]),
+          disabled: __props.disabled,
+          "aria-expanded": open.value,
+          "aria-haspopup": "menu",
+          "aria-label": open.value ? "Close attach menu" : "Add media",
+          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, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
+            return openBlock(), createElementBlock("li", {
+              key: item.action,
+              role: "none"
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                role: "menuitem",
+                class: "chai-composer__attach-menu-item",
+                onClick: ($event) => pick(item.action)
+              }, [
+                createElementVNode("span", _hoisted_4$7, [
+                  (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)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("input", {
+          ref_key: "input",
+          ref: input,
+          type: "file",
+          accept: __props.imagesOnly ? "image/*" : "image/*,video/*,audio/*",
+          multiple: !__props.imagesOnly,
+          hidden: "",
+          disabled: __props.disabled,
+          onChange: onFileChange
+        }, null, 40, _hoisted_6$6)
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$f = {
+  key: 0,
+  class: "chai-composer__region-badge",
+  "aria-hidden": "true"
+};
+const _hoisted_2$a = ["disabled", "aria-label"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "Chip",
+  props: {
+    label: {},
+    regionNumber: {},
+    removable: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["remove"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        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),
+        createTextVNode(toDisplayString(__props.label), 1),
+        __props.removable ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          type: "button",
+          class: "chai-composer__chip-remove",
+          disabled: __props.disabled,
+          "aria-label": `Remove ${__props.label}`,
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
+        }, [
+          createVNode(unref(CloseSymbolIcon))
+        ], 8, _hoisted_2$a)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const _hoisted_1$e = ["aria-label", ".selected", ".disabled"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "Toggle",
+  props: {
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean },
+    ariaLabel: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("md-switch", {
+        class: "chai-switch",
+        "aria-label": __props.ariaLabel,
+        ".selected": __props.modelValue,
+        ".disabled": __props.disabled ?? false,
+        "show-only-selected-icon": "",
+        onChange: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.selected))
+      }, null, 40, _hoisted_1$e);
+    };
+  }
+});
+const _hoisted_1$d = ["disabled", "aria-expanded"];
+const _hoisted_2$9 = ["title"];
+const _hoisted_3$8 = ["aria-label"];
+const _hoisted_4$6 = {
+  key: 0,
+  class: "chai-search-menu__toggle-header"
+};
+const _hoisted_5$5 = { class: "chai-search-menu__toggle-header-label" };
+const _hoisted_6$5 = { class: "chai-search-menu__toggle-header-row" };
+const _hoisted_7$5 = { class: "chai-search-menu__toggle-header-text" };
+const _hoisted_8$5 = ["label", ".value"];
+const _hoisted_9$5 = { class: "chai-search-menu__list" };
+const _hoisted_10$5 = {
+  key: 0,
+  class: "chai-search-menu__section-label"
+};
+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 = {
+  key: 1,
+  class: "chai-search-menu__divider",
+  role: "separator"
+};
+const _hoisted_16$3 = {
+  key: 0,
+  class: "chai-search-menu__empty"
+};
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "SearchMenu",
+  props: {
+    options: {},
+    sections: {},
+    toggleHeader: {},
+    value: {},
+    multiple: { type: Boolean },
+    triggerLabel: {},
+    menuLabel: {},
+    disabled: { type: Boolean },
+    searchable: { type: Boolean, default: true },
+    triggerVariant: { default: "outlined" },
+    panelWidth: { default: 280 }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const search = ref("");
+    const root = ref();
+    const panel = ref();
+    function close() {
+      open.value = false;
+      search.value = "";
+    }
+    watch(open, async (isOpen) => {
+      if (!isOpen) return;
+      await nextTick();
+      const el = panel.value;
+      const rect = el.getBoundingClientRect();
+      const over = rect.right - (document.documentElement.clientWidth - 16);
+      if (over > 0) el.style.left = `${-Math.min(over, Math.max(0, rect.left - 16))}px`;
+    });
+    useDismiss(root, open, close);
+    const groups = computed(() => {
+      const q = search.value.trim().toLowerCase();
+      const raw = props.sections ?? [{ label: "", options: props.options ?? [] }];
+      if (!q) return raw;
+      return raw.map((g) => ({ ...g, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.rowLabel?.toLowerCase().includes(q)) })).filter((g) => g.options.length > 0);
+    });
+    const hasAnyOption = computed(() => groups.value.some((g) => g.options.length > 0));
+    const isSelected = (id) => Array.isArray(props.value) ? props.value.includes(id) : id === props.value;
+    function pick(option) {
+      emit("select", option);
+      if (!props.multiple) close();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: "chai-search-menu"
+      }, [
+        createElementVNode("button", {
+          type: "button",
+          class: normalizeClass([
+            __props.triggerVariant === "outlined" ? "chai-btn chai-btn--outlined" : "chai-search-menu__trigger--text",
+            "chai-search-menu__trigger",
+            { "chai-search-menu__trigger--open": open.value }
+          ]),
+          disabled: __props.disabled,
+          "aria-expanded": open.value,
+          onClick: _cache[0] || (_cache[0] = ($event) => open.value ? close() : open.value = true)
+        }, [
+          createElementVNode("span", {
+            class: "chai-search-menu__trigger-label",
+            title: __props.triggerLabel
+          }, toDisplayString(__props.triggerLabel), 9, _hoisted_2$9),
+          (openBlock(), createElementBlock("svg", {
+            class: normalizeClass(["chai-search-menu__chevron", { "chai-search-menu__chevron--open": open.value }]),
+            viewBox: "0 -960 960 960",
+            "aria-hidden": "true"
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("path", {
+              d: "M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z",
+              fill: "currentColor"
+            }, null, -1)
+          ])], 2))
+        ], 10, _hoisted_1$d),
+        open.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "panel",
+          ref: panel,
+          class: "chai-search-menu__panel",
+          role: "group",
+          "aria-label": __props.menuLabel,
+          style: normalizeStyle({ width: `${__props.panelWidth}px` })
+        }, [
+          __props.toggleHeader ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+            createElementVNode("span", _hoisted_5$5, toDisplayString(__props.menuLabel), 1),
+            createElementVNode("span", _hoisted_6$5, [
+              createElementVNode("span", _hoisted_7$5, toDisplayString(__props.toggleHeader.label), 1),
+              createVNode(_sfc_main$e, {
+                "model-value": __props.toggleHeader.value,
+                "aria-label": __props.toggleHeader.label,
+                "onUpdate:modelValue": __props.toggleHeader.onChange
+              }, null, 8, ["model-value", "aria-label", "onUpdate:modelValue"])
+            ])
+          ])) : createCommentVNode("", true),
+          __props.searchable ? (openBlock(), createElementBlock("md-outlined-text-field", {
+            key: 1,
+            class: "chai-search-menu__search",
+            label: __props.menuLabel,
+            placeholder: "Input",
+            ".value": search.value,
+            onInput: _cache[2] || (_cache[2] = ($event) => search.value = $event.target.value)
+          }, [
+            _cache[5] || (_cache[5] = createElementVNode("span", {
+              slot: "leading-icon",
+              class: "chai-search-menu__search-icon"
+            }, [
+              createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true"
+              }, [
+                createElementVNode("circle", {
+                  cx: "11",
+                  cy: "11",
+                  r: "6.5",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5"
+                }),
+                createElementVNode("path", {
+                  d: "m20 20-3.6-3.6",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round"
+                })
+              ])
+            ], -1)),
+            search.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              slot: "trailing-icon",
+              class: "chai-search-menu__clear",
+              "aria-label": "Clear search",
+              onClick: _cache[1] || (_cache[1] = ($event) => search.value = "")
+            }, [..._cache[4] || (_cache[4] = [
+              createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true"
+              }, [
+                createElementVNode("circle", {
+                  cx: "12",
+                  cy: "12",
+                  r: "9",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5"
+                }),
+                createElementVNode("path", {
+                  d: "m9 9 6 6m0-6-6 6",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round"
+                })
+              ], -1)
+            ])])) : createCommentVNode("", true)
+          ], 40, _hoisted_8$5)) : createCommentVNode("", true),
+          createElementVNode("ul", _hoisted_9$5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group, i) => {
+              return openBlock(), createElementBlock("li", {
+                key: group.label || i
+              }, [
+                group.label ? (openBlock(), createElementBlock("p", _hoisted_10$5, toDisplayString(group.label), 1)) : createCommentVNode("", true),
+                createElementVNode("ul", {
+                  class: "chai-search-menu__section-list",
+                  "aria-label": group.label || void 0
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (o) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: o.id
+                    }, [
+                      createElementVNode("button", {
+                        type: "button",
+                        "aria-pressed": isSelected(o.id),
+                        disabled: __props.toggleHeader?.value,
+                        class: normalizeClass(["chai-search-menu__option", { "chai-search-menu__option--selected": !__props.multiple && isSelected(o.id) }]),
+                        onClick: ($event) => pick(o)
+                      }, [
+                        __props.multiple ? (openBlock(), createElementBlock("md-checkbox", {
+                          key: 0,
+                          class: "chai-search-menu__checkbox",
+                          ".checked": isSelected(o.id),
+                          ".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),
+                        !__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)
+              ]);
+            }), 128)),
+            !hasAnyOption.value ? (openBlock(), createElementBlock("li", _hoisted_16$3, "No matches.")) : createCommentVNode("", true)
+          ])
+        ], 12, _hoisted_3$8)) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$c = { class: "chai-composer" };
+const _hoisted_2$8 = {
+  key: 0,
+  class: "chai-composer__thumbnails"
+};
+const _hoisted_3$7 = ["src"];
+const _hoisted_4$5 = {
+  key: 1,
+  class: "chai-composer__thumb-icon"
+};
+const _hoisted_5$4 = ["onClick"];
+const _hoisted_6$4 = {
+  key: 1,
+  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 = {
+  key: 2,
+  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 _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "Composer",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    promptLabel: {},
+    attachments: { default: () => [] },
+    "onUpdate:attachments": {},
+    useCase: { default: null },
+    onClearUseCase: {},
+    defaultUseCase: {},
+    multiSelectUseCases: { type: Boolean },
+    useCases: { default: () => [] },
+    "onUpdate:useCases": {},
+    modelsByKind: {},
+    multiSelectModels: { type: Boolean },
+    modelIds: { default: () => [] },
+    "onUpdate:modelIds": {},
+    models: {},
+    modelId: { default: null },
+    "onUpdate:modelId": {},
+    autoSelectModel: { type: Boolean },
+    showAutoSelectToggle: { type: Boolean },
+    "onUpdate:autoSelectModel": {},
+    aspectRatios: {},
+    aspectRatio: { default: null },
+    "onUpdate:aspectRatio": {},
+    onEnhance: {},
+    enhancing: { type: Boolean },
+    submitError: { default: null },
+    submitDisabled: { type: Boolean, default: void 0 },
+    submitting: { type: Boolean },
+    onAbort: {},
+    onAttachMenuSelect: {},
+    attachMenuActions: {},
+    regions: { default: () => [] },
+    "onUpdate:regions": {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "submit", "unsupportedFile"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const view = computed(
+      () => composerView({
+        ...props,
+        value: props.modelValue,
+        onModelChange: props["onUpdate:modelId"],
+        onModelIdsChange: props["onUpdate:modelIds"]
+      })
+    );
+    const menuItems = computed(
+      () => composerAttachMenuItems(props.attachMenuActions, {
+        canAddMedia: Boolean(props["onUpdate:attachments"]),
+        canSelect: Boolean(props.onAttachMenuSelect)
+      })
+    );
+    const modelMenuOptions = computed(
+      () => props.multiSelectUseCases ? { sections: view.value.modelSections.map((s) => ({ label: s.label, options: s.options })) } : { options: view.value.modelSections[0]?.options }
+    );
+    watch(
+      () => props.autoSelectModel,
+      (on, was) => {
+        if (!on || was) return;
+        if (view.value.multiModel) props["onUpdate:modelIds"]?.([]);
+        else props["onUpdate:modelId"]?.(null);
+      }
+    );
+    watch(
+      () => view.value.useCaseKey,
+      () => {
+        if (props.autoSelectModel && props.showAutoSelectToggle) props["onUpdate:autoSelectModel"]?.(false);
+      }
+    );
+    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,
+      () => {
+        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);
+      }
+    );
+    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);
+    }
+    async function onFiles(files) {
+      const onAttachments = props["onUpdate:attachments"];
+      if (!files || files.length === 0 || !onAttachments) return;
+      const { attachments, unsupported } = await composerAttachmentsFromFiles(files, props.attachments, view.value.editing);
+      unsupported.forEach((name) => emit("unsupportedFile", name));
+      if (attachments) onAttachments(attachments);
+    }
+    function removeUseCase(useCase) {
+      if (props.multiSelectUseCases) props["onUpdate:useCases"]?.(props.useCases.filter((u) => u.kind !== useCase.kind));
+      else props.onClearUseCase?.();
+    }
+    function onSubmitClick() {
+      if (view.value.showStop) props.onAbort?.();
+      else if (!view.value.isSubmitDisabled && !props.submitting) emit("submit", view.value.payload());
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        __props.attachments.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.attachments, (a) => {
+            return openBlock(), createElementBlock("div", {
+              key: a.id,
+              class: "chai-composer__thumb"
+            }, [
+              a.kind === "image" ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                class: "chai-composer__thumb-img",
+                src: a.src,
+                alt: ""
+              }, null, 8, _hoisted_3$7)) : (openBlock(), createElementBlock("span", _hoisted_4$5, [
+                a.kind === "video" ? (openBlock(), createBlock(unref(VideocamIcon), { key: 0 })) : a.kind === "audio" ? (openBlock(), createBlock(unref(MusicNoteIcon), { key: 1 })) : (openBlock(), createBlock(unref(ImageIcon), { key: 2 }))
+              ])),
+              props["onUpdate:attachments"] ? (openBlock(), createElementBlock("button", {
+                key: 2,
+                type: "button",
+                class: "chai-composer__thumb-remove",
+                "aria-label": "Remove attachment",
+                onClick: ($event) => props["onUpdate:attachments"]?.(__props.attachments.filter((x) => x.id !== a.id))
+              }, [
+                createVNode(unref(CloseSymbolIcon))
+              ], 8, _hoisted_5$4)) : createCommentVNode("", true)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        view.value.editing && __props.regions.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_6$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.regions, (r) => {
+            return openBlock(), createElementBlock("li", {
+              key: r.id
+            }, [
+              createVNode(_sfc_main$f, {
+                label: `Region ${r.number}`,
+                "region-number": r.number,
+                removable: Boolean(props["onUpdate:regions"]),
+                disabled: __props.disabled,
+                onRemove: ($event) => props["onUpdate:regions"]?.(__props.regions.filter((x) => x.id !== r.id))
+              }, null, 8, ["label", "region-number", "removable", "disabled", "onRemove"])
+            ]);
+          }), 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 }]),
+            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, [
+          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, {
+              key: 0,
+              items: menuItems.value,
+              "images-only": view.value.editing,
+              disabled: __props.disabled,
+              onSelect: _cache[1] || (_cache[1] = ($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, {
+                key: u.kind,
+                label: u.label,
+                removable: Boolean(__props.multiSelectUseCases ? props["onUpdate:useCases"] : __props.onClearUseCase),
+                disabled: __props.disabled,
+                onRemove: ($event) => removeUseCase(u)
+              }, null, 8, ["label", "removable", "disabled", "onRemove"]);
+            }), 128)),
+            view.value.modelSections.length > 0 && view.value.canPickModel ? (openBlock(), createBlock(_sfc_main$d, mergeProps({ key: 1 }, modelMenuOptions.value, {
+              value: view.value.multiModel ? view.value.pickedModelIds : __props.modelId,
+              multiple: view.value.multiModel,
+              "toggle-header": __props.showAutoSelectToggle ? { label: "Auto-select model", value: __props.autoSelectModel, onChange: (v) => props["onUpdate:autoSelectModel"]?.(v) } : void 0,
+              "trigger-label": view.value.modelTriggerLabel,
+              "menu-label": view.value.multiModel ? "Select models" : "Select model",
+              searchable: false,
+              "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))
+            }), 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,
+              options: view.value.aspectOptions.map((o) => ({ id: o.value, label: o.label })),
+              value: view.value.offeredAspect,
+              "trigger-label": view.value.selectedAspect?.label ?? "Aspect ratio",
+              "menu-label": "Aspect ratio",
+              searchable: false,
+              "trigger-variant": "text",
+              disabled: __props.disabled,
+              onSelect: _cache[3] || (_cache[3] = ($event) => props["onUpdate:aspectRatio"]?.($event.id))
+            }, null, 8, ["options", "value", "trigger-label", "disabled"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("md-fab", {
+            class: "chai-composer__submit",
+            size: "small",
+            variant: "secondary",
+            label: "",
+            "data-ready": view.value.showStop || !view.value.isSubmitDisabled || void 0,
+            "data-error": Boolean(__props.submitError) || void 0,
+            "data-stop": view.value.showStop || void 0,
+            "aria-label": view.value.showStop ? "Stop" : __props.submitError ? "Retry" : "Submit",
+            "aria-disabled": view.value.showStop ? "false" : __props.submitting || view.value.isSubmitDisabled ? "true" : "false",
+            onClick: onSubmitClick
+          }, [
+            createElementVNode("span", _hoisted_16$2, [
+              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)
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$b = { class: "chai-result-card__expand-frame" };
+const _hoisted_2$7 = ["src", "alt"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "ExpandedImage",
+  props: {
+    src: {},
+    alt: {}
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const closeButton = ref();
+    let opener = null;
+    onMounted(() => {
+      opener = document.activeElement;
+      closeButton.value?.focus();
+    });
+    onUnmounted(() => opener?.focus());
+    function onKeydown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        emit("close");
+      } else if (e.key === "Tab") {
+        e.preventDefault();
+        closeButton.value?.focus();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "chai-result-card__expand-overlay",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Expanded image",
+        onKeydown
+      }, [
+        createElementVNode("div", {
+          class: "chai-result-card__expand-scrim",
+          role: "presentation",
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+        }),
+        createElementVNode("div", _hoisted_1$b, [
+          createElementVNode("img", {
+            class: "chai-result-card__image",
+            src: __props.src,
+            alt: __props.alt
+          }, null, 8, _hoisted_2$7),
+          createElementVNode("button", {
+            ref_key: "closeButton",
+            ref: closeButton,
+            type: "button",
+            class: "chai-result-card__collapse",
+            "aria-label": "Collapse",
+            onClick: _cache[1] || (_cache[1] = ($event) => emit("close"))
+          }, [
+            createVNode(unref(CloseSymbolIcon))
+          ], 512)
+        ])
+      ], 32);
+    };
+  }
+});
+const _hoisted_1$a = ["aria-label", "aria-pressed", "disabled"];
+const _hoisted_2$6 = {
+  class: "chai-edit-card__badge",
+  "aria-hidden": "true"
+};
+const _hoisted_3$6 = ["onPointerdown"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "RegionShape",
+  props: {
+    region: {},
+    selected: { type: Boolean },
+    draft: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["dragStart", "select", "keydown"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["chai-edit-card__region", { "chai-edit-card__region--selected": __props.selected, "chai-edit-card__region--draft": __props.draft }]),
+        style: normalizeStyle(unref(regionBoxStyle)(__props.region))
+      }, [
+        createElementVNode("button", {
+          type: "button",
+          class: "chai-edit-card__region-body",
+          "aria-label": `Region ${__props.region.number}${__props.region.prompt ? `: ${__props.region.prompt}` : ", no instruction yet"}. Arrow keys move it, Shift and arrow keys resize it.`,
+          "aria-pressed": __props.selected,
+          disabled: __props.disabled,
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => emit("dragStart", $event, "move")),
+          onClick: _cache[1] || (_cache[1] = ($event) => emit("select")),
+          onKeydown: _cache[2] || (_cache[2] = ($event) => emit("keydown", $event))
+        }, null, 40, _hoisted_1$a),
+        createElementVNode("span", _hoisted_2$6, toDisplayString(__props.region.number), 1),
+        __props.selected ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(REGION_CORNERS), (corner) => {
+          return openBlock(), createElementBlock("span", {
+            key: corner,
+            class: normalizeClass(`chai-edit-card__handle chai-edit-card__handle--${corner}`),
+            "aria-hidden": "true",
+            onPointerdown: ($event) => emit("dragStart", $event, corner)
+          }, null, 42, _hoisted_3$6);
+        }), 128)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const _hoisted_1$9 = ["src"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "PageSlide",
+  props: {
+    slide: {},
+    pageClass: {}
+  },
+  emits: ["end"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const side = computed(() => props.slide?.forward ? "left" : "right");
+    const outgoing = computed(() => props.slide?.active ? props.slide.from : void 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        outgoing.value ? (openBlock(), createElementBlock("img", {
+          key: `out-${__props.slide.key}`,
+          class: normalizeClass(`chai-slide-out chai-slide-out--${side.value}`),
+          src: outgoing.value,
+          alt: "",
+          "aria-hidden": "true",
+          draggable: "false"
+        }, null, 10, _hoisted_1$9)) : createCommentVNode("", true),
+        (openBlock(), createElementBlock("div", {
+          key: `in-${__props.slide?.key ?? 0}`,
+          class: normalizeClass([__props.pageClass, __props.slide?.active && `chai-slide-in chai-slide-in--${side.value}`, outgoing.value && "chai-slide-in--over"]),
+          onAnimationend: _cache[0] || (_cache[0] = withModifiers(($event) => emit("end"), ["self"]))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 34))
+      ], 64);
+    };
+  }
+});
+function usePageSlide(page) {
+  const slide = ref(null);
+  let shown = page();
+  watch(page, (next) => {
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (next.id !== shown.id && shown.id !== void 0 && next.id !== void 0 && !reduceMotion) {
+      slide.value = { from: shown.image, forward: next.index > shown.index, key: (slide.value?.key ?? 0) + 1, active: true };
+    }
+    shown = next;
+  });
+  const endSlide = () => {
+    if (slide.value) slide.value = { ...slide.value, active: false, from: void 0 };
+  };
+  return { slide, endSlide };
+}
+const _hoisted_1$8 = ["aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "tabindex"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "Pagination",
+  props: {
+    count: {},
+    index: {},
+    label: {},
+    itemLabel: { default: "Result" },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:index"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function go(next) {
+      const clamped = Math.max(0, Math.min(props.count - 1, next));
+      if (clamped !== props.index) emit("update:index", clamped);
+    }
+    function onClick(e) {
+      if (props.disabled) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      go(Math.floor((e.clientX - rect.left) / rect.width * props.count));
+    }
+    const KEY_STEPS = {
+      ArrowRight: (i) => i + 1,
+      ArrowUp: (i) => i + 1,
+      PageDown: (i) => i + 1,
+      ArrowLeft: (i) => i - 1,
+      ArrowDown: (i) => i - 1,
+      PageUp: (i) => i - 1,
+      Home: () => 0,
+      End: (_, count) => count - 1
+    };
+    function onKeydown(e) {
+      const step = KEY_STEPS[e.key];
+      if (props.disabled || !step) return;
+      e.preventDefault();
+      go(step(props.index, props.count));
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["chai-pagination", { "chai-pagination--disabled": __props.disabled }]),
+        role: "slider",
+        "aria-label": __props.label,
+        "aria-valuemin": 1,
+        "aria-valuemax": __props.count,
+        "aria-valuenow": __props.index + 1,
+        "aria-valuetext": `${__props.itemLabel} ${__props.index + 1} of ${__props.count}`,
+        "aria-disabled": __props.disabled || void 0,
+        tabindex: __props.disabled ? -1 : 0,
+        style: normalizeStyle({ "--chai-pagination-fill": `${(__props.index + 1) / __props.count * 100}%` }),
+        onClick,
+        onKeydown
+      }, [
+        _cache[0] || (_cache[0] = createElementVNode("span", {
+          class: "chai-pagination__track",
+          "aria-hidden": "true"
+        }, null, -1)),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.count, (i) => {
+          return openBlock(), createElementBlock("span", {
+            key: i,
+            class: normalizeClass(["chai-pagination__dot", { "chai-pagination__dot--filled": i - 1 <= __props.index }]),
+            "aria-hidden": "true"
+          }, null, 2);
+        }), 128))
+      ], 46, _hoisted_1$8);
+    };
+  }
+});
+const _hoisted_1$7 = ["aria-label", "tabindex"];
+const _hoisted_2$5 = ["src", "alt"];
+const _hoisted_3$5 = {
+  key: 1,
+  class: "chai-edit-card__placeholder"
+};
+const _hoisted_4$4 = {
+  key: 0,
+  class: "chai-edit-card__status",
+  role: "status"
+};
+const _hoisted_5$3 = {
+  key: 0,
+  class: "chai-edit-card__spinner",
+  role: "img",
+  "aria-label": "Editing"
+};
+const _hoisted_6$3 = {
+  key: 1,
+  class: "chai-edit-card__status-text"
+};
+const _hoisted_7$3 = ["disabled"];
+const _hoisted_8$3 = {
+  class: "chai-edit-card__zoom-level",
+  "aria-live": "polite"
+};
+const _hoisted_9$3 = ["disabled"];
+const _hoisted_10$3 = ["disabled"];
+const _hoisted_11$2 = ["aria-label", "title", "disabled"];
+const _hoisted_12$2 = ["disabled"];
+const _hoisted_13$2 = {
+  key: 1,
+  class: "chai-card-fade"
+};
+const _hoisted_14$2 = { class: "chai-card-actions" };
+const _hoisted_15$2 = { class: "chai-card-chips" };
+const _hoisted_16$1 = ["disabled", "title"];
+const _hoisted_17$1 = ["disabled"];
+const _hoisted_18$1 = ["aria-label", "title", "disabled"];
+const _hoisted_19 = ["aria-label"];
+const _hoisted_20 = { class: "chai-edit-card__popover-header" };
+const _hoisted_21 = { class: "chai-edit-card__popover-title" };
+const _hoisted_22 = ["disabled"];
+const _hoisted_23 = ["disabled"];
+const _hoisted_24 = ["aria-label", "disabled"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "EditCard",
+  props: {
+    versions: {},
+    activeVersion: {},
+    regions: {},
+    maxRegions: { default: DEFAULT_MAX_REGIONS },
+    width: {},
+    scale: {},
+    maxWidth: { default: 630 },
+    maxHeight: { default: 630 },
+    alt: { default: "Image being edited" },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:activeVersion", "update:regions", "action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const index = computed(() => Math.min(Math.max(props.activeVersion, 0), Math.max(0, props.versions.length - 1)));
+    const version = computed(() => props.versions[index.value]);
+    const ready = computed(() => version.value?.status === "done" && Boolean(version.value.src));
+    const paginated = computed(() => props.versions.length > 1);
+    const hasImage = computed(() => Boolean(version.value?.src || version.value?.from));
+    const draft = ref(null);
+    const selectedId = ref(null);
+    const text = ref("");
+    const hidden = ref(false);
+    const zoom = ref(1);
+    const pan = ref({ x: 0, y: 0 });
+    const size = ref({ width: 0, height: 0 });
+    const natural = ref(null);
+    const expanded = ref(false);
+    const linkCopied = ref(false);
+    let drag = null;
+    const viewport = ref();
+    const field = ref();
+    const { slide, endSlide } = usePageSlide(() => ({
+      id: version.value?.id,
+      index: index.value,
+      image: version.value?.src ?? version.value?.from
+    }));
+    watch(
+      () => version.value?.id,
+      () => {
+        draft.value = null;
+        selectedId.value = null;
+        zoom.value = 1;
+        pan.value = { x: 0, y: 0 };
+      }
+    );
+    let observer;
+    onMounted(() => {
+      observer = new ResizeObserver(([entry]) => {
+        if (entry) size.value = { width: entry.contentRect.width, height: entry.contentRect.height };
+      });
+      if (viewport.value) observer.observe(viewport.value);
+    });
+    onUnmounted(() => observer?.disconnect());
+    const shownDraft = computed(() => {
+      const d = draft.value;
+      return d && props.regions.some((r) => r.number === d.number) ? { ...d, number: freeRegionNumber(props.regions) } : d;
+    });
+    const all = computed(() => shownDraft.value ? [...props.regions, shownDraft.value] : props.regions);
+    const selected = computed(() => all.value.find((r) => r.id === selectedId.value) ?? null);
+    const isDraft = computed(() => selected.value != null && selected.value.id === draft.value?.id);
+    const canCheck = computed(
+      () => selected.value != null && text.value.trim().length > 0 && (isDraft.value || text.value.trim() !== selected.value.prompt)
+    );
+    const atCap = computed(() => all.value.length >= props.maxRegions);
+    const anyRegions = computed(() => all.value.length > 0 || (version.value?.regions.length ?? 0) > 0);
+    const zoomIndex = computed(() => EDIT_ZOOM_STEPS.indexOf(zoom.value));
+    const popover = computed(
+      () => selected.value && !hidden.value && size.value.width ? regionPopoverPosition(selected.value.box, zoom.value, pan.value, size.value, paginated.value) : null
+    );
+    const cardWidth = computed(
+      () => editCardWidth(natural.value, { width: props.width, scale: props.scale, maxWidth: props.maxWidth, maxHeight: props.maxHeight })
+    );
+    watch(selectedId, (id) => id && field.value?.focus(), { flush: "post" });
+    watch(
+      [text, selectedId],
+      () => {
+        const el = field.value;
+        if (!el) return;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+      },
+      { flush: "post" }
+    );
+    function select(region) {
+      selectedId.value = region?.id ?? null;
+      text.value = region?.prompt ?? "";
+    }
+    function setBox(id, box) {
+      if (draft.value?.id === id) draft.value = { ...draft.value, box };
+      else emit("update:regions", props.regions.map((r) => r.id === id ? { ...r, box } : r));
+    }
+    function removeRegion(region) {
+      if (region.id === draft.value?.id) draft.value = null;
+      else emit("update:regions", props.regions.filter((r) => r.id !== region.id));
+      select(null);
+    }
+    function addRegion() {
+      const region = newRegion(props.regions, zoom.value, pan.value, size.value);
+      draft.value = region;
+      hidden.value = false;
+      select(region);
+    }
+    function check() {
+      const region = selected.value;
+      if (!region || !canCheck.value) return;
+      const prompt = text.value.trim();
+      if (isDraft.value) {
+        emit("update:regions", [...props.regions, { ...region, prompt }]);
+        draft.value = null;
+      } else {
+        emit("update:regions", props.regions.map((r) => r.id === region.id ? { ...r, prompt } : r));
+      }
+      select(null);
+    }
+    function clearAll() {
+      draft.value = null;
+      select(null);
+      emit("update:regions", []);
+    }
+    function toggleHidden() {
+      hidden.value = !hidden.value;
+      select(null);
+    }
+    function zoomTo(next) {
+      pan.value = panForZoom(pan.value, zoom.value, next, size.value);
+      zoom.value = next;
+    }
+    function startRegionDrag(e, region, kind) {
+      if (props.disabled || e.button !== 0) return;
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      drag = { kind, id: region.id, x: e.clientX, y: e.clientY, box: region.box, moved: false };
+      if (region.id !== selectedId.value) select(region);
+    }
+    function startPan(e) {
+      if (e.button !== 0) return;
+      if (zoom.value > 1) e.currentTarget.setPointerCapture(e.pointerId);
+      drag = { kind: "pan", x: e.clientX, y: e.clientY, pan: pan.value, moved: false };
+    }
+    function onPointerMove(e) {
+      const d = drag;
+      const { width, height } = size.value;
+      if (!d || !width) return;
+      const dxPx = e.clientX - d.x;
+      const dyPx = e.clientY - d.y;
+      if (Math.abs(dxPx) + Math.abs(dyPx) > 2) d.moved = true;
+      if (d.kind === "pan") {
+        if (zoom.value > 1) pan.value = clampPan({ x: d.pan.x + dxPx, y: d.pan.y + dyPx }, zoom.value, size.value);
+        return;
+      }
+      const dx = dxPx / (width * zoom.value);
+      const dy = dyPx / (height * zoom.value);
+      setBox(d.id, d.kind === "move" ? fitBox({ ...d.box, x: d.box.x + dx, y: d.box.y + dy }) : resizeBox(d.box, d.kind, dx, dy));
+    }
+    function onPointerUp() {
+      const d = drag;
+      drag = null;
+      if (d?.kind === "pan" && !d.moved) select(null);
+    }
+    function onRegionKey(e, region) {
+      const box = regionBoxForKey(region.box, e.key, { shift: e.shiftKey, alt: e.altKey });
+      if (box) {
+        e.preventDefault();
+        e.stopPropagation();
+        setBox(region.id, box);
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        removeRegion(region);
+      }
+    }
+    function onViewportKey(e) {
+      if (e.target !== e.currentTarget || zoom.value <= 1) return;
+      const next = panForKey(pan.value, e.key, zoom.value, size.value);
+      if (!next) return;
+      e.preventDefault();
+      pan.value = next;
+    }
+    function onFieldKey(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        check();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        if (isDraft.value) draft.value = null;
+        select(null);
+      }
+    }
+    async function download() {
+      const v = version.value;
+      if (!v?.src) return;
+      await downloadMedia(v.src, downloadFilename(v.id, "image", v.src));
+      emit("action", "download", v);
+    }
+    async function share() {
+      const v = version.value;
+      if (!v?.src) return;
+      if (await shareMedia(v.src) === "copied") {
+        linkCopied.value = true;
+        setTimeout(() => linkCopied.value = false, 1500);
+      }
+      emit("action", "share", v);
+    }
+    function onImageLoad(e) {
+      const img = e.currentTarget;
+      natural.value = { width: img.naturalWidth, height: img.naturalHeight };
+    }
+    return (_ctx, _cache) => {
+      return version.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("div", {
+          class: "chai-edit-card",
+          style: normalizeStyle({ "--chai-edit-card-width": `${cardWidth.value}px` })
+        }, [
+          createElementVNode("div", {
+            ref_key: "viewport",
+            ref: viewport,
+            class: normalizeClass(["chai-edit-card__viewport", { "chai-edit-card__viewport--zoomed": zoom.value > 1 }]),
+            role: "group",
+            "aria-label": zoom.value > 1 ? `Image, zoomed to ${Math.round(zoom.value * 100)}%. Arrow keys move around.` : "Image",
+            tabindex: zoom.value > 1 ? 0 : void 0,
+            onPointerdown: startPan,
+            onPointermove: onPointerMove,
+            onPointerup: onPointerUp,
+            onPointercancel: onPointerUp,
+            onKeydown: onViewportKey
+          }, [
+            createVNode(_sfc_main$9, {
+              slide: unref(slide),
+              onEnd: unref(endSlide)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: "chai-edit-card__layer",
+                  style: normalizeStyle({ transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`, "--chai-edit-zoom": zoom.value })
+                }, [
+                  version.value.src || version.value.from ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    class: "chai-edit-card__image",
+                    src: version.value.src ?? version.value.from,
+                    alt: __props.alt,
+                    draggable: "false",
+                    onLoad: onImageLoad
+                  }, null, 40, _hoisted_2$5)) : (openBlock(), createElementBlock("div", _hoisted_3$5)),
+                  !hidden.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(version.value.regions, (r) => {
+                      return openBlock(), createElementBlock("span", {
+                        key: `applied-${r.id}`,
+                        class: "chai-edit-card__region chai-edit-card__region--applied",
+                        style: normalizeStyle(unref(regionBoxStyle)(r)),
+                        "aria-hidden": "true"
+                      }, null, 4);
+                    }), 128)),
+                    ready.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(all.value, (r) => {
+                      return openBlock(), createBlock(_sfc_main$a, {
+                        key: r.id,
+                        region: r,
+                        selected: r.id === selectedId.value,
+                        draft: r.id === draft.value?.id,
+                        disabled: __props.disabled,
+                        onDragStart: (e, kind) => startRegionDrag(e, r, kind),
+                        onSelect: ($event) => select(r),
+                        onKeydown: ($event) => onRegionKey($event, r)
+                      }, null, 8, ["region", "selected", "draft", "disabled", "onDragStart", "onSelect", "onKeydown"]);
+                    }), 128)) : createCommentVNode("", true)
+                  ], 64)) : createCommentVNode("", true)
+                ], 4)
+              ]),
+              _: 1
+            }, 8, ["slide", "onEnd"]),
+            version.value.status !== "done" ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+              version.value.status === "queued" || version.value.status === "running" ? (openBlock(), createElementBlock("span", _hoisted_5$3)) : (openBlock(), createElementBlock("p", _hoisted_6$3, toDisplayString(version.value.status === "cancelled" ? "Stopped" : version.value.error ?? "Something went wrong."), 1))
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "chai-card-top chai-card-top--start",
+              onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-card-top-btn",
+                "aria-label": "Zoom in",
+                title: "Zoom in",
+                disabled: !ready.value || zoomIndex.value >= unref(EDIT_ZOOM_STEPS).length - 1,
+                onClick: _cache[0] || (_cache[0] = ($event) => zoomTo(unref(EDIT_ZOOM_STEPS)[zoomIndex.value + 1]))
+              }, [
+                createVNode(unref(ZoomInIcon))
+              ], 8, _hoisted_7$3),
+              createElementVNode("span", _hoisted_8$3, toDisplayString(Math.round(zoom.value * 100)) + "%", 1),
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-card-top-btn",
+                "aria-label": "Zoom out",
+                title: "Zoom out",
+                disabled: !ready.value || zoomIndex.value <= 0,
+                onClick: _cache[1] || (_cache[1] = ($event) => zoomTo(unref(EDIT_ZOOM_STEPS)[zoomIndex.value - 1]))
+              }, [
+                createVNode(unref(ZoomOutIcon))
+              ], 8, _hoisted_9$3)
+            ], 32),
+            createElementVNode("div", {
+              class: "chai-card-top chai-card-top--end",
+              onPointerdown: _cache[4] || (_cache[4] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-card-top-btn",
+                "aria-label": "Download",
+                title: "Download",
+                disabled: __props.disabled || !ready.value,
+                onClick: download
+              }, [
+                createVNode(unref(DownloadIcon))
+              ], 8, _hoisted_10$3),
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-card-top-btn",
+                "aria-label": linkCopied.value ? "Link copied" : "Share",
+                title: linkCopied.value ? "Link copied" : "Share",
+                disabled: __props.disabled || !ready.value,
+                onClick: share
+              }, [
+                linkCopied.value ? (openBlock(), createBlock(unref(CheckSymbolIcon), { key: 0 })) : (openBlock(), createBlock(unref(ShareIcon), { key: 1 }))
+              ], 8, _hoisted_11$2),
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-card-top-btn",
+                "aria-label": "Expand",
+                title: "Expand",
+                disabled: !ready.value,
+                onClick: _cache[3] || (_cache[3] = ($event) => expanded.value = true)
+              }, [
+                createVNode(unref(ExpandIcon))
+              ], 8, _hoisted_12$2)
+            ], 32),
+            paginated.value && hasImage.value ? (openBlock(), createElementBlock("div", _hoisted_13$2)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "chai-card-bottom",
+              onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("div", _hoisted_14$2, [
+                createElementVNode("div", _hoisted_15$2, [
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "chai-card-chip",
+                    disabled: __props.disabled || !ready.value || atCap.value,
+                    title: atCap.value ? `This model takes up to ${__props.maxRegions} regions` : void 0,
+                    onClick: addRegion
+                  }, [
+                    createVNode(unref(AddIcon)),
+                    _cache[11] || (_cache[11] = createTextVNode("New region ", -1))
+                  ], 8, _hoisted_16$1),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "chai-card-chip",
+                    disabled: __props.disabled || all.value.length === 0,
+                    onClick: clearAll
+                  }, [
+                    createVNode(unref(CloseSymbolIcon)),
+                    _cache[12] || (_cache[12] = createTextVNode("Clear regions ", -1))
+                  ], 8, _hoisted_17$1)
+                ]),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "chai-card-round",
+                  "aria-label": hidden.value ? "Show regions" : "Hide regions",
+                  title: hidden.value ? "Show regions" : "Hide regions",
+                  disabled: !anyRegions.value,
+                  onClick: toggleHidden
+                }, [
+                  hidden.value ? (openBlock(), createBlock(unref(VisibilityOffIcon), { key: 0 })) : (openBlock(), createBlock(unref(VisibilityIcon), { key: 1 }))
+                ], 8, _hoisted_18$1)
+              ])
+            ], 32),
+            popover.value && selected.value ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass(["chai-edit-card__popover", { "chai-edit-card__popover--above": popover.value.above }]),
+              style: normalizeStyle({ left: `${popover.value.left}px`, top: `${popover.value.top}px` }),
+              role: "dialog",
+              "aria-label": `Region ${selected.value.number}`,
+              onPointerdown: _cache[8] || (_cache[8] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("div", _hoisted_20, [
+                createElementVNode("span", _hoisted_21, "Region " + toDisplayString(selected.value.number), 1),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "chai-card-top-btn",
+                  "aria-label": "Add region to prompt",
+                  title: "Add region to prompt",
+                  disabled: __props.disabled || !canCheck.value,
+                  onClick: check
+                }, [
+                  createVNode(unref(CheckSymbolIcon))
+                ], 8, _hoisted_22),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "chai-card-top-btn",
+                  "aria-label": "Delete region",
+                  title: "Delete region",
+                  disabled: __props.disabled,
+                  onClick: _cache[6] || (_cache[6] = ($event) => removeRegion(selected.value))
+                }, [
+                  createVNode(unref(DeleteIcon))
+                ], 8, _hoisted_23)
+              ]),
+              withDirectives(createElementVNode("textarea", {
+                ref_key: "field",
+                ref: field,
+                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => text.value = $event),
+                class: "chai-edit-card__field",
+                rows: "1",
+                placeholder: "What should change here?",
+                "aria-label": `Instruction for region ${selected.value.number}`,
+                disabled: __props.disabled,
+                onKeydown: onFieldKey
+              }, null, 40, _hoisted_24), [
+                [vModelText, text.value]
+              ])
+            ], 46, _hoisted_19)) : createCommentVNode("", true)
+          ], 42, _hoisted_1$7),
+          paginated.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["chai-card-pager-bar", { "chai-card-pager-bar--over-media": hasImage.value }])
+          }, [
+            createVNode(_sfc_main$8, {
+              count: __props.versions.length,
+              index: index.value,
+              label: "Versions",
+              "item-label": "Version",
+              disabled: __props.disabled,
+              "onUpdate:index": _cache[9] || (_cache[9] = ($event) => emit("update:activeVersion", $event))
+            }, null, 8, ["count", "index", "disabled"])
+          ], 2)) : createCommentVNode("", true)
+        ], 4),
+        expanded.value && version.value.src ? (openBlock(), createBlock(_sfc_main$b, {
+          key: 0,
+          src: version.value.src,
+          alt: __props.alt,
+          onClose: _cache[10] || (_cache[10] = ($event) => expanded.value = false)
+        }, null, 8, ["src", "alt"])) : createCommentVNode("", true)
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$6 = ["aria-label", "aria-pressed", "title", "disabled"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "IconButton",
+  props: {
+    variant: {},
+    label: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    const CLASS = { top: "chai-card-top-btn", pill: "chai-card-pill-btn", round: "chai-card-round" };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: normalizeClass([CLASS[__props.variant], { "chai-card-pill-btn--active": __props.active }]),
+        "aria-label": __props.label,
+        "aria-pressed": __props.active,
+        title: __props.label,
+        disabled: __props.disabled
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1$6);
+    };
+  }
+});
+const _hoisted_1$5 = {
+  key: 0,
+  class: "chai-result-card__more-menu",
+  role: "menu"
+};
+const _hoisted_2$4 = ["onClick"];
+const _hoisted_3$4 = {
+  key: 0,
+  class: "chai-result-card__more-menu-icon"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "MoreMenu",
+  props: {
+    actions: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const open = ref(false);
+    const root = ref();
+    useDismiss(root, open, () => open.value = false);
+    function pick(action) {
+      open.value = false;
+      emit("select", action);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: "chai-result-card__more"
+      }, [
+        createVNode(_sfc_main$6, {
+          variant: "pill",
+          label: "More",
+          active: open.value,
+          disabled: __props.disabled,
+          onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(MoreHorizIcon))
+          ]),
+          _: 1
+        }, 8, ["active", "disabled"]),
+        open.value ? (openBlock(), createElementBlock("ul", _hoisted_1$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action) => {
+            return openBlock(), createElementBlock("li", {
+              key: action.id,
+              role: "none"
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                role: "menuitem",
+                class: "chai-result-card__more-menu-item",
+                onClick: ($event) => pick(action)
+              }, [
+                action.icon ? (openBlock(), createElementBlock("span", _hoisted_3$4, [
+                  (openBlock(), createBlock(resolveDynamicComponent(action.icon)))
+                ])) : createCommentVNode("", true),
+                createTextVNode(toDisplayString(action.label), 1)
+              ], 8, _hoisted_2$4)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-busy"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ResultText",
+  props: {
+    text: {},
+    streaming: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const el = ref();
+    let follow = true;
+    function followNewest() {
+      if (el.value && props.streaming && follow) el.value.scrollTop = el.value.scrollHeight;
+    }
+    onMounted(() => requestAnimationFrame(followNewest));
+    watch(() => [props.text, props.streaming], followNewest, { flush: "post" });
+    function onScroll(e) {
+      const p = e.currentTarget;
+      follow = p.scrollTop + p.clientHeight >= p.scrollHeight - 24;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", {
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(["chai-result-card__text-output", { "chai-result-card__text-output--streaming": __props.streaming }]),
+        "aria-busy": __props.streaming,
+        tabindex: "0",
+        onScroll
+      }, toDisplayString(__props.text), 43, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["src"];
+const _hoisted_2$3 = ["aria-label"];
+const _hoisted_3$3 = {
+  key: 0,
+  class: "chai-result-card__play"
+};
+const _hoisted_4$3 = ["aria-valuenow", "aria-valuetext"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "VideoPlayer",
+  props: {
+    src: {},
+    expanded: { type: Boolean },
+    time: {},
+    wasPlaying: { type: Boolean }
+  },
+  emits: ["playingChange", "dimensions"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const video = ref();
+    const playing = ref(props.wasPlaying);
+    const progress = ref(0);
+    function togglePlay() {
+      const el = video.value;
+      if (el.paused) el.play();
+      else el.pause();
+    }
+    function onLoadedMetadata() {
+      const el = video.value;
+      el.currentTime = props.time.current;
+      if (props.wasPlaying) el.play().catch(() => {
+      });
+      emit("dimensions", el.videoWidth, el.videoHeight);
+    }
+    function setPlaying(value) {
+      playing.value = value;
+      emit("playingChange", value);
+    }
+    function onTimeUpdate() {
+      const el = video.value;
+      props.time.current = el.currentTime;
+      if (el.duration) progress.value = el.currentTime / el.duration;
+    }
+    function scrub(e) {
+      const el = video.value;
+      if (!el.duration) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      el.currentTime = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)) * el.duration;
+    }
+    const STEPS = { ArrowRight: 5, ArrowUp: 5, ArrowLeft: -5, ArrowDown: -5 };
+    function onScrubKey(e) {
+      const el = video.value;
+      if (!el.duration) return;
+      const step = STEPS[e.key];
+      if (step != null) el.currentTime = Math.min(el.duration, Math.max(0, el.currentTime + step));
+      else if (e.key === "Home") el.currentTime = 0;
+      else if (e.key === "End") el.currentTime = el.duration;
+      else return;
+      e.preventDefault();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("video", {
+          ref_key: "video",
+          ref: video,
+          class: "chai-result-card__video",
+          src: __props.src,
+          onLoadedmetadata: onLoadedMetadata,
+          onPlay: _cache[0] || (_cache[0] = ($event) => setPlaying(true)),
+          onPause: _cache[1] || (_cache[1] = ($event) => setPlaying(false)),
+          onTimeupdate: onTimeUpdate
+        }, null, 40, _hoisted_1$3),
+        createElementVNode("button", {
+          type: "button",
+          class: "chai-result-card__video-toggle",
+          "aria-label": playing.value ? "Pause" : "Play",
+          onClick: togglePlay
+        }, [
+          !playing.value ? (openBlock(), createElementBlock("span", _hoisted_3$3, [
+            createVNode(unref(PlayIcon))
+          ])) : createCommentVNode("", true)
+        ], 8, _hoisted_2$3),
+        createElementVNode("div", {
+          class: normalizeClass(["chai-result-card__scrubber", { "chai-result-card__scrubber--expanded": __props.expanded }]),
+          role: "slider",
+          tabindex: "0",
+          "aria-label": "Seek",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": Math.round(progress.value * 100),
+          "aria-valuetext": `${Math.round(progress.value * 100)}%`,
+          onClick: scrub,
+          onKeydown: onScrubKey
+        }, [
+          createElementVNode("div", {
+            class: "chai-result-card__scrubber-fill",
+            style: normalizeStyle({ width: `${progress.value * 100}%` })
+          }, null, 4)
+        ], 42, _hoisted_4$3)
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  key: 0,
+  class: "chai-result-card__media chai-result-card__media--pending"
+};
+const _hoisted_2$2 = ["aria-label"];
+const _hoisted_3$2 = {
+  key: 1,
+  class: "chai-result-card__media chai-result-card__media--cancelled"
+};
+const _hoisted_4$2 = {
+  key: 2,
+  class: "chai-result-card__media chai-result-card__media--error"
+};
+const _hoisted_5$2 = { class: "chai-result-card__error-text" };
+const _hoisted_6$2 = {
+  key: 3,
+  class: "chai-result-card__media"
+};
+const _hoisted_7$2 = ["src"];
+const _hoisted_8$2 = ["src"];
+const _hoisted_9$2 = ["src", "alt"];
+const _hoisted_10$2 = {
+  key: 4,
+  class: "chai-card-top chai-card-top--end"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "ResultMedia",
+  props: {
+    result: {},
+    alt: {},
+    disabled: { type: Boolean },
+    mediaExpanded: { type: Boolean },
+    linkCopied: { type: Boolean },
+    videoTime: {},
+    videoWasPlaying: { type: Boolean }
+  },
+  emits: ["download", "share", "expand", "dimensions", "videoPlayingChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const kind = computed(() => props.result.output?.kind);
+    const streaming = computed(() => props.result.status === "running" && kind.value === "text");
+    const pending = computed(() => (props.result.status === "queued" || props.result.status === "running") && !streaming.value);
+    function onImageLoad(e) {
+      const img = e.currentTarget;
+      emit("dimensions", img.naturalWidth, img.naturalHeight);
+    }
+    return (_ctx, _cache) => {
+      return pending.value ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("span", {
+          class: "chai-result-card__spinner",
+          role: "img",
+          "aria-label": __props.result.status === "running" ? "Running" : "Queued"
+        }, null, 8, _hoisted_2$2)
+      ])) : __props.result.status === "cancelled" && !__props.result.output ? (openBlock(), createElementBlock("div", _hoisted_3$2, [..._cache[5] || (_cache[5] = [
+        createElementVNode("p", { class: "chai-result-card__cancelled-text" }, "Stopped", -1)
+      ])])) : __props.result.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+        createElementVNode("p", _hoisted_5$2, toDisplayString(__props.result.error?.message ?? "Something went wrong."), 1)
+      ])) : !__props.result.output ? (openBlock(), createElementBlock("div", _hoisted_6$2)) : (openBlock(), createElementBlock("div", {
+        key: 4,
+        class: normalizeClass(["chai-result-card__media", { "chai-result-card__media--fixed-height": kind.value === "audio" || kind.value === "text" }])
+      }, [
+        kind.value === "video" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          __props.mediaExpanded ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            class: "chai-result-card__image",
+            src: __props.result.output.src,
+            alt: ""
+          }, null, 8, _hoisted_7$2)) : (openBlock(), createBlock(_sfc_main$3, {
+            key: 1,
+            src: __props.result.output.src,
+            time: __props.videoTime,
+            "was-playing": __props.videoWasPlaying,
+            onPlayingChange: _cache[0] || (_cache[0] = ($event) => emit("videoPlayingChange", $event)),
+            onDimensions: _cache[1] || (_cache[1] = (w, h2) => emit("dimensions", w, h2))
+          }, null, 8, ["src", "time", "was-playing"]))
+        ], 64)) : kind.value === "audio" ? (openBlock(), createElementBlock("audio", {
+          key: 1,
+          class: "chai-result-card__audio",
+          src: __props.result.output.src,
+          controls: ""
+        }, null, 8, _hoisted_8$2)) : kind.value === "text" ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 2,
+          text: __props.result.output.src,
+          streaming: streaming.value
+        }, null, 8, ["text", "streaming"])) : (openBlock(), createElementBlock("img", {
+          key: 3,
+          class: "chai-result-card__image",
+          src: __props.result.output.src,
+          alt: __props.alt,
+          onLoad: onImageLoad
+        }, null, 40, _hoisted_9$2)),
+        !__props.mediaExpanded && !streaming.value ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
+          createVNode(_sfc_main$6, {
+            variant: "top",
+            label: "Download",
+            disabled: __props.disabled,
+            onClick: _cache[2] || (_cache[2] = ($event) => emit("download"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(DownloadIcon))
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          createVNode(_sfc_main$6, {
+            variant: "top",
+            label: __props.linkCopied ? "Link copied" : "Share",
+            disabled: __props.disabled,
+            onClick: _cache[3] || (_cache[3] = ($event) => emit("share"))
+          }, {
+            default: withCtx(() => [
+              __props.linkCopied ? (openBlock(), createBlock(unref(CheckSymbolIcon), { key: 0 })) : (openBlock(), createBlock(unref(ShareIcon), { key: 1 }))
+            ]),
+            _: 1
+          }, 8, ["label", "disabled"]),
+          kind.value === "video" || kind.value === "image" ? (openBlock(), createBlock(_sfc_main$6, {
+            key: 0,
+            variant: "top",
+            label: "Expand",
+            disabled: __props.disabled,
+            onClick: _cache[4] || (_cache[4] = ($event) => emit("expand"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(ExpandIcon))
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2));
+    };
+  }
+});
+const _hoisted_1$1 = { class: "chai-result-card__inner" };
+const _hoisted_2$1 = ["aria-hidden", "inert"];
+const _hoisted_3$1 = { class: "chai-result-card__media-frame" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "chai-card-fade"
+};
+const _hoisted_5$1 = { class: "chai-card-pager-label" };
+const _hoisted_6$1 = { class: "chai-card-bottom" };
+const _hoisted_7$1 = { class: "chai-card-actions" };
+const _hoisted_8$1 = { class: "chai-card-pill" };
+const _hoisted_9$1 = ["aria-hidden", "inert"];
+const _hoisted_10$1 = { class: "chai-result-card__prompt-box" };
+const _hoisted_11$1 = { class: "chai-result-card__prompt-text" };
+const _hoisted_12$1 = ["aria-label", "title"];
+const _hoisted_13$1 = { class: "chai-result-card__chips" };
+const _hoisted_14$1 = ["title"];
+const _hoisted_15$1 = { class: "chai-visually-hidden" };
+const _hoisted_16 = ["aria-label"];
+const _hoisted_17 = { class: "chai-result-card__expand-frame" };
+const _hoisted_18 = ["src", "alt"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ResultCard",
+  props: {
+    results: {},
+    width: {},
+    textMaxHeight: {},
+    prompt: {},
+    altText: { type: Function },
+    models: {},
+    getVote: { type: Function },
+    moreActions: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeIndex = ref(0);
+    const flipped = ref(false);
+    const copied = ref(false);
+    const linkCopied = ref(false);
+    const mediaExpanded = ref(false);
+    const measured = ref(null);
+    const videoTime = reactive({ current: 0 });
+    const videoWasPlaying = ref(false);
+    const front = ref();
+    const back = ref();
+    const overlay = ref();
+    const index = computed(() => Math.min(activeIndex.value, Math.max(0, props.results.length - 1)));
+    const result = computed(() => props.results[index.value]);
+    const kind = computed(() => result.value?.output?.kind);
+    const paginated = computed(() => props.results.length > 1);
+    const overMedia = computed(() => kind.value === "image" || kind.value === "video");
+    const vote = computed(() => (result.value && props.getVote?.(result.value)) ?? null);
+    const modelLabel = computed(() => result.value ? resultModelLabel(result.value, props.models) : "");
+    const alt = computed(() => result.value ? props.altText?.(result.value) ?? props.prompt : "");
+    const chips = computed(() => {
+      const r = result.value;
+      const dims = measured.value?.id === r?.id ? measured.value : null;
+      return [
+        modelLabel.value,
+        formatTokens(r?.usage?.totalTokens),
+        formatCost(r?.usage?.costUsd),
+        formatDuration(r?.durationMs),
+        dims ? formatAspectRatio(dims.width, dims.height) : void 0
+      ].filter(Boolean);
+    });
+    const cardStyle = computed(() => ({
+      ...props.width != null && { "--chai-result-card-width": `${props.width}px` },
+      ...props.textMaxHeight != null && { "--chai-result-card-text-max-height": `${props.textMaxHeight}px` }
+    }));
+    const { slide, endSlide } = usePageSlide(() => ({
+      id: result.value?.id,
+      index: index.value,
+      image: kind.value === "image" ? result.value.output.src : void 0
+    }));
+    const act = (action) => emit("action", action, result.value);
+    function flash(flag) {
+      flag.value = true;
+      setTimeout(() => flag.value = false, 1500);
+    }
+    function copyPrompt() {
+      navigator.clipboard?.writeText(props.prompt).catch(() => {
+      });
+      flash(copied);
+      act("copy-prompt");
+    }
+    async function download() {
+      const r = result.value;
+      if (r.output) await downloadMedia(r.output.src, downloadFilename(r.id, r.output.kind, r.output.src));
+      emit("action", "download", r);
+    }
+    async function share() {
+      const r = result.value;
+      if (r.output && await shareMedia(r.output.src) === "copied") flash(linkCopied);
+      emit("action", "share", r);
+    }
+    watch(
+      flipped,
+      (isFlipped) => {
+        const target = isFlipped ? back.value?.querySelector('[aria-label="Close details"]') : front.value?.querySelector('[aria-label="Show details"]');
+        target?.focus();
+      },
+      { flush: "post" }
+    );
+    watch(mediaExpanded, async (open) => {
+      await nextTick();
+      if (open) overlay.value?.querySelector(".chai-result-card__collapse")?.focus();
+      else front.value?.querySelector('[aria-label="Expand"]')?.focus();
+    });
+    function onOverlayKeydown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        mediaExpanded.value = false;
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusable = [
+        ...e.currentTarget.querySelectorAll('button, [tabindex="0"], a[href], input, video[controls]')
+      ].filter((el) => !el.hasAttribute("disabled"));
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!first || !last) return;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    return (_ctx, _cache) => {
+      return result.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("div", {
+          class: normalizeClass(["chai-result-card", { "chai-result-card--flipped": flipped.value }]),
+          style: normalizeStyle(cardStyle.value)
+        }, [
+          createElementVNode("div", _hoisted_1$1, [
+            createElementVNode("div", {
+              ref_key: "front",
+              ref: front,
+              class: normalizeClass(["chai-result-card__face chai-result-card__front", { "chai-result-card__front--paginated": paginated.value }]),
+              "aria-hidden": flipped.value,
+              inert: flipped.value
+            }, [
+              createElementVNode("div", _hoisted_3$1, [
+                createVNode(_sfc_main$9, {
+                  slide: unref(slide),
+                  "page-class": "chai-result-card__media-page",
+                  onEnd: unref(endSlide)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$2, {
+                      result: result.value,
+                      alt: alt.value,
+                      disabled: __props.disabled,
+                      "media-expanded": mediaExpanded.value,
+                      "link-copied": linkCopied.value,
+                      "video-time": videoTime,
+                      "video-was-playing": videoWasPlaying.value,
+                      onDownload: download,
+                      onShare: share,
+                      onExpand: _cache[0] || (_cache[0] = ($event) => mediaExpanded.value = true),
+                      onDimensions: _cache[1] || (_cache[1] = (w, h2) => measured.value = { id: result.value.id, width: w, height: h2 }),
+                      onVideoPlayingChange: _cache[2] || (_cache[2] = ($event) => videoWasPlaying.value = $event)
+                    }, null, 8, ["result", "alt", "disabled", "media-expanded", "link-copied", "video-time", "video-was-playing"])
+                  ]),
+                  _: 1
+                }, 8, ["slide", "onEnd"]),
+                paginated.value && overMedia.value ? (openBlock(), createElementBlock("div", _hoisted_4$1)) : createCommentVNode("", true)
+              ]),
+              paginated.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["chai-card-pager-bar", { "chai-card-pager-bar--over-media": overMedia.value }])
+              }, [
+                createElementVNode("span", _hoisted_5$1, toDisplayString(modelLabel.value), 1),
+                createVNode(_sfc_main$8, {
+                  count: __props.results.length,
+                  index: index.value,
+                  label: "Results",
+                  disabled: __props.disabled,
+                  "onUpdate:index": _cache[3] || (_cache[3] = ($event) => activeIndex.value = $event)
+                }, null, 8, ["count", "index", "disabled"])
+              ], 2)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_6$1, [
+                createElementVNode("div", _hoisted_7$1, [
+                  createElementVNode("div", _hoisted_8$1, [
+                    createVNode(_sfc_main$6, {
+                      variant: "pill",
+                      label: "Like",
+                      active: vote.value === "like",
+                      disabled: __props.disabled,
+                      onClick: _cache[4] || (_cache[4] = ($event) => act("like"))
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ThumbUpIcon))
+                      ]),
+                      _: 1
+                    }, 8, ["active", "disabled"]),
+                    createVNode(_sfc_main$6, {
+                      variant: "pill",
+                      label: "Dislike",
+                      active: vote.value === "dislike",
+                      disabled: __props.disabled,
+                      onClick: _cache[5] || (_cache[5] = ($event) => act("dislike"))
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ThumbDownIcon))
+                      ]),
+                      _: 1
+                    }, 8, ["active", "disabled"]),
+                    createVNode(_sfc_main$6, {
+                      variant: "pill",
+                      label: "Retry",
+                      disabled: __props.disabled,
+                      onClick: _cache[6] || (_cache[6] = ($event) => act("retry"))
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(RefreshIcon))
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"]),
+                    __props.moreActions?.length ? (openBlock(), createBlock(_sfc_main$5, {
+                      key: 0,
+                      actions: __props.moreActions,
+                      disabled: __props.disabled,
+                      onSelect: _cache[7] || (_cache[7] = ($event) => act($event.id))
+                    }, null, 8, ["actions", "disabled"])) : createCommentVNode("", true)
+                  ]),
+                  createVNode(_sfc_main$6, {
+                    variant: "round",
+                    label: "Show details",
+                    disabled: __props.disabled,
+                    onClick: _cache[8] || (_cache[8] = ($event) => flipped.value = true)
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(InfoIcon))
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"])
+                ])
+              ])
+            ], 10, _hoisted_2$1),
+            createElementVNode("div", {
+              ref_key: "back",
+              ref: back,
+              class: "chai-result-card__face chai-result-card__back",
+              "aria-hidden": !flipped.value,
+              inert: !flipped.value
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-result-card__close",
+                "aria-label": "Close details",
+                onClick: _cache[9] || (_cache[9] = ($event) => flipped.value = false)
+              }, [
+                createVNode(unref(CloseIcon))
+              ]),
+              createElementVNode("div", _hoisted_10$1, [
+                createElementVNode("p", _hoisted_11$1, toDisplayString(__props.prompt), 1),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "chai-result-card__copy",
+                  "aria-label": copied.value ? "Copied" : "Copy prompt",
+                  title: copied.value ? "Copied" : "Copy prompt",
+                  onClick: copyPrompt
+                }, [
+                  copied.value ? (openBlock(), createBlock(unref(CheckIcon), { key: 0 })) : (openBlock(), createBlock(unref(CopyIcon), { key: 1 }))
+                ], 8, _hoisted_12$1)
+              ]),
+              createElementVNode("div", _hoisted_13$1, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(chips.value, (chip, i) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: i,
+                    class: "chai-result-card__chip"
+                  }, toDisplayString(chip), 1);
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(result.value.evaluations, (evaluation) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: evaluation.id,
+                    class: normalizeClass([
+                      "chai-result-card__chip chai-result-card__chip--evaluation",
+                      `chai-result-card__chip--${evaluation.passed ? "passed" : "failed"}`
+                    ]),
+                    title: `${evaluation.label}: ${evaluation.passed ? "passed" : "failed"}`
+                  }, [
+                    evaluation.passed ? (openBlock(), createBlock(unref(CheckIcon), { key: 0 })) : (openBlock(), createBlock(unref(CloseIcon), { key: 1 })),
+                    createTextVNode(toDisplayString(evaluation.label), 1),
+                    createElementVNode("span", _hoisted_15$1, toDisplayString(evaluation.passed ? ", passed" : ", failed"), 1)
+                  ], 10, _hoisted_14$1);
+                }), 128))
+              ])
+            ], 8, _hoisted_9$1)
+          ])
+        ], 6),
+        mediaExpanded.value && result.value.output && overMedia.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "overlay",
+          ref: overlay,
+          class: "chai-result-card__expand-overlay",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": kind.value === "video" ? "Expanded video" : "Expanded image",
+          onKeydown: onOverlayKeydown
+        }, [
+          createElementVNode("div", {
+            class: "chai-result-card__expand-scrim",
+            role: "presentation",
+            onClick: _cache[10] || (_cache[10] = ($event) => mediaExpanded.value = false)
+          }),
+          createElementVNode("div", _hoisted_17, [
+            kind.value === "video" ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 0,
+              src: result.value.output.src,
+              expanded: "",
+              time: videoTime,
+              "was-playing": videoWasPlaying.value,
+              onPlayingChange: _cache[11] || (_cache[11] = ($event) => videoWasPlaying.value = $event)
+            }, null, 8, ["src", "time", "was-playing"])) : (openBlock(), createElementBlock("img", {
+              key: 1,
+              class: "chai-result-card__image",
+              src: result.value.output.src,
+              alt: alt.value
+            }, null, 8, _hoisted_18)),
+            createElementVNode("button", {
+              type: "button",
+              class: "chai-result-card__collapse",
+              "aria-label": "Collapse",
+              onClick: _cache[12] || (_cache[12] = ($event) => mediaExpanded.value = false)
+            }, [
+              createVNode(unref(CloseIcon))
+            ])
+          ])
+        ], 40, _hoisted_16)) : createCommentVNode("", true)
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = { class: "chai-media-analyzer" };
+const _hoisted_2 = {
+  class: "chai-media-analyzer__dropzone-icon",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = { class: "chai-media-analyzer__dropzone-hint" };
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
+const _hoisted_6 = {
+  key: 0,
+  class: "chai-media-analyzer__thumbnails"
+};
+const _hoisted_7 = ["src"];
+const _hoisted_8 = {
+  key: 1,
+  class: "chai-media-analyzer__thumb-icon"
+};
+const _hoisted_9 = ["aria-label", "onClick"];
+const _hoisted_10 = {
+  key: 1,
+  class: "chai-media-analyzer__note",
+  role: "status"
+};
+const _hoisted_11 = {
+  key: 2,
+  class: "chai-media-analyzer__error",
+  role: "alert"
+};
+const _hoisted_12 = { class: "chai-media-analyzer__controls" };
+const _hoisted_13 = { class: "chai-media-analyzer__controls-start" };
+const _hoisted_14 = ["data-ready", "data-error", "data-stop", "aria-label", "aria-disabled"];
+const _hoisted_15 = { slot: "icon" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MediaAnalyzer",
+  props: {
+    attachments: {},
+    maxAttachmentsByKind: { default: () => DEFAULT_MAX_ATTACHMENTS_BY_KIND },
+    models: { default: () => [] },
+    modelsByKind: { default: () => SUGGESTED_ANALYSIS_MODELS },
+    modelId: {},
+    autoSelectModel: { type: Boolean },
+    promptLength: {},
+    promptLengthOptions: {},
+    disabled: { type: Boolean },
+    submitting: { type: Boolean },
+    submitError: {},
+    onAbort: {}
+  },
+  emits: ["update:attachments", "update:modelId", "update:autoSelectModel", "update:promptLength", "unsupportedFile", "submit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const input = ref();
+    const dragDepth = ref(0);
+    const replaced = ref(null);
+    const idsOf = (list) => list.map((a) => a.id).join();
+    const kind = computed(() => props.attachments[0]?.kind);
+    const atCap = computed(() => isMediaAnalyzerAtCap(props.attachments, props.maxAttachmentsByKind));
+    const sections = computed(() => mediaAnalyzerModelSections(kind.value, props.modelsByKind, props.models));
+    const selectedModel = computed(() => sections.value.flatMap((s) => s.options).find((m) => m.id === props.modelId));
+    const modelTriggerLabel = computed(
+      () => selectedModel.value?.label ?? (props.autoSelectModel ? "Auto-select model" : "Select model")
+    );
+    const lengthOptions = computed(
+      () => (
+        // The clarifying suffix shows only in the list, never on the trigger.
+        props.promptLengthOptions.map((o) => ({ id: o.value, label: o.label, rowLabel: `${o.label} (${PROMPT_LENGTH_HINT[o.value]})` }))
+      )
+    );
+    const lengthLabel = computed(() => props.promptLengthOptions.find((o) => o.value === props.promptLength)?.label ?? "Prompt length");
+    const isSubmitDisabled = computed(() => props.disabled || props.attachments.length === 0);
+    const showStop = computed(() => Boolean(props.submitting && props.onAbort));
+    watch(
+      () => props.autoSelectModel,
+      (on, was) => {
+        if (on && !was) emit("update:modelId", null);
+      }
+    );
+    async function handleFiles(files) {
+      if (!files || files.length === 0) return;
+      const { media, unsupported } = await readMediaFiles(files);
+      unsupported.forEach((name) => emit("unsupportedFile", name));
+      if (media.length === 0) return;
+      const next = media.reduce((acc, m) => nextMediaAnalyzerAttachments(acc, m, props.maxAttachmentsByKind), props.attachments);
+      const note = replacedNote(props.attachments, next);
+      replaced.value = note ? { note, ids: idsOf(next) } : null;
+      emit("update:attachments", next);
+    }
+    function onDrop(e) {
+      dragDepth.value = 0;
+      if (!props.disabled) void handleFiles(e.dataTransfer?.files);
+    }
+    function onFileChange(e) {
+      const el = e.target;
+      void handleFiles(el.files);
+      el.value = "";
+    }
+    function remove(id) {
+      emit(
+        "update:attachments",
+        props.attachments.filter((a) => a.id !== id)
+      );
+    }
+    function onSubmitClick() {
+      if (showStop.value) props.onAbort?.();
+      else if (!isSubmitDisabled.value && !props.submitting) {
+        emit("submit", {
+          attachments: props.attachments,
+          modelId: props.modelId,
+          autoSelectModel: props.autoSelectModel,
+          models: kind.value ? props.modelsByKind[kind.value] ?? props.models : [],
+          promptLength: props.promptLength
+        });
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            "chai-media-analyzer__dropzone",
+            { "chai-media-analyzer__dropzone--disabled": atCap.value, "chai-media-analyzer__dropzone--drag-active": dragDepth.value > 0 }
+          ]),
+          onDragenter: _cache[1] || (_cache[1] = withModifiers(($event) => dragDepth.value++, ["prevent"])),
+          onDragleave: _cache[2] || (_cache[2] = withModifiers(($event) => dragDepth.value = Math.max(0, dragDepth.value - 1), ["prevent"])),
+          onDragover: _cache[3] || (_cache[3] = withModifiers(() => {
+          }, ["prevent"])),
+          onDrop: withModifiers(onDrop, ["prevent"])
+        }, [
+          createElementVNode("span", _hoisted_2, [
+            createVNode(unref(MixedMediaIcon))
+          ]),
+          createElementVNode("p", _hoisted_3, toDisplayString(atCap.value ? "Maximum images added" : "Add media to convert to prompt"), 1),
+          createElementVNode("button", {
+            type: "button",
+            class: "chai-chip-button",
+            disabled: __props.disabled,
+            onClick: _cache[0] || (_cache[0] = ($event) => input.value?.click())
+          }, "Select files", 8, _hoisted_4),
+          createElementVNode("input", {
+            ref_key: "input",
+            ref: input,
+            type: "file",
+            accept: "image/*,video/*,audio/*",
+            multiple: "",
+            hidden: "",
+            disabled: __props.disabled,
+            onChange: onFileChange
+          }, null, 40, _hoisted_5)
+        ], 34),
+        __props.attachments.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.attachments, (a) => {
+            return openBlock(), createElementBlock("div", {
+              key: a.id,
+              class: "chai-media-analyzer__thumb"
+            }, [
+              a.kind === "image" ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                class: "chai-media-analyzer__thumb-img",
+                src: a.src,
+                alt: ""
+              }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("span", _hoisted_8, [
+                a.kind === "video" ? (openBlock(), createBlock(unref(VideoIcon), { key: 0 })) : (openBlock(), createBlock(unref(AudioIcon), { key: 1 }))
+              ])),
+              createElementVNode("button", {
+                type: "button",
+                class: "chai-media-analyzer__thumb-remove",
+                "aria-label": `Remove ${a.name ?? a.kind}`,
+                onClick: ($event) => remove(a.id)
+              }, [
+                createVNode(unref(RemoveIcon))
+              ], 8, _hoisted_9)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        replaced.value && replaced.value.ids === idsOf(__props.attachments) ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(replaced.value.note), 1)) : createCommentVNode("", true),
+        __props.submitError ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(__props.submitError), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_12, [
+          createElementVNode("div", _hoisted_13, [
+            createVNode(_sfc_main$d, {
+              options: sections.value.length === 1 ? sections.value[0].options : void 0,
+              sections: sections.value.length > 1 ? sections.value : void 0,
+              "toggle-header": { label: "Auto-select model", value: __props.autoSelectModel, onChange: (next) => emit("update:autoSelectModel", next) },
+              value: __props.modelId,
+              "trigger-label": modelTriggerLabel.value,
+              "menu-label": "Select model",
+              searchable: false,
+              "trigger-variant": "text",
+              disabled: __props.disabled,
+              "panel-width": 320,
+              onSelect: _cache[4] || (_cache[4] = ($event) => emit("update:modelId", $event.id))
+            }, null, 8, ["options", "sections", "toggle-header", "value", "trigger-label", "disabled"]),
+            createVNode(_sfc_main$d, {
+              options: lengthOptions.value,
+              value: __props.promptLength,
+              "trigger-label": lengthLabel.value,
+              "menu-label": "Prompt length",
+              searchable: false,
+              "trigger-variant": "text",
+              disabled: __props.disabled,
+              onSelect: _cache[5] || (_cache[5] = ($event) => emit("update:promptLength", $event.id))
+            }, null, 8, ["options", "value", "trigger-label", "disabled"])
+          ]),
+          createElementVNode("md-fab", {
+            class: "chai-media-analyzer__submit",
+            size: "small",
+            variant: "secondary",
+            label: "",
+            "data-ready": showStop.value || !isSubmitDisabled.value || void 0,
+            "data-error": Boolean(__props.submitError) || void 0,
+            "data-stop": showStop.value || void 0,
+            "aria-label": showStop.value ? "Stop" : __props.submitError ? "Retry" : "Analyze media",
+            "aria-disabled": showStop.value ? "false" : __props.submitting || isSubmitDisabled.value ? "true" : "false",
+            onClick: onSubmitClick
+          }, [
+            createElementVNode("span", _hoisted_15, [
+              showStop.value ? (openBlock(), createBlock(unref(StopIcon), { key: 0 })) : (openBlock(), createBlock(unref(ArrowForwardIcon), { key: 1 }))
+            ])
+          ], 8, _hoisted_14)
+        ])
+      ]);
+    };
+  }
+});
+function useComposer(options = {}) {
+  const provided = useReasoning();
+  const store = createComposerStore(
+    () => toValue(options),
+    () => provided.value
+  );
+  const state = shallowRef(store.getState());
+  onScopeDispose(
+    store.subscribe(() => state.value = store.getState()),
+    true
+  );
+  return {
+    run: computed(() => state.value.runs[0] ?? null),
+    runs: computed(() => state.value.runs),
+    submit: store.submit,
+    cancel: store.cancel,
+    /** `undefined` without reasoning, so the Composer hides its Enhance button. */
+    enhance: computed(() => pickReasoning(toValue(options), provided.value) ? store.enhance : void 0),
+    enhancing: computed(() => state.value.enhancing),
+    routing: computed(() => state.value.routing),
+    /** Props for an `EditCard`, and `regions` for `Composer`. `null` when there's no `editImage`. */
+    edit: computed(() => store.edit(state.value, toValue(options).editImage))
+  };
+}
+function useMediaAnalyzer(options = {}) {
+  const provided = useReasoning();
+  const store = createMediaAnalyzerStore(
+    () => toValue(options),
+    () => provided.value
+  );
+  const state = shallowRef(store.getState());
+  onScopeDispose(
+    store.subscribe(() => state.value = store.getState()),
+    true
+  );
+  return {
+    analyzing: computed(() => state.value.analyzing),
+    error: computed(() => state.value.error),
+    prompt: computed(() => state.value.prompt),
+    submit: store.submit,
+    cancel: store.cancel,
+    reset: store.reset
+  };
+}
+export {
+  _sfc_main$h 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,
+  DEFAULT_MEDIA_ANALYSIS_PROMPT_LENGTH,
+  DEFAULT_MODEL_ID,
+  DEFAULT_REASONING_MODEL,
+  DEFAULT_REASONING_MODEL_BY_KIND,
+  EDIT_IMAGE_USE_CASE,
+  _sfc_main$7 as EditCard,
+  GenerationError,
+  MEDIA_ANALYSIS_PROMPTS,
+  MEDIA_ANALYSIS_PROMPT_LENGTHS,
+  _sfc_main as MediaAnalyzer,
+  PRECISE_EDIT_MODELS,
+  _sfc_main$8 as Pagination,
+  ROUTING_MODEL_ID,
+  _sfc_main$1 as ResultCard,
+  SUGGESTED_ANALYSIS_MODELS2 as SUGGESTED_ANALYSIS_MODELS,
+  SUGGESTED_EDIT_MODELS,
+  SUGGESTED_IMAGE_MODELS,
+  SUGGESTED_IMAGE_TO_VIDEO_MODELS,
+  SUGGESTED_TEXT_TO_VIDEO_MODELS,
+  _sfc_main$d as SearchMenu,
+  TEXT_USE_CASE,
+  _sfc_main$e as Toggle,
+  buildRegionEditPrompt,
+  checkSuggestedModels,
+  createFalEngine,
+  createMockEngine,
+  createOpenRouterEngine,
+  isMediaAnalyzerAtCap2 as isMediaAnalyzerAtCap,
+  mockEngine,
+  nextMediaAnalyzerAttachments2 as nextMediaAnalyzerAttachments,
+  reasoningKey,
+  reasoningModelFor,
+  suggestedModels,
+  useComposer,
+  useMediaAnalyzer,
+  useReasoning
+};
+//# sourceMappingURL=index.js.map