@chai-ui/vue 0.10.1 → 0.11.0

package/dist/primitives/SearchMenu.vue.d.ts

@@ -6,6 +6,7 @@
  */
 import "@material/web/checkbox/checkbox.js";
 import "@material/web/textfield/outlined-text-field.js";
+import { type MenuPlacement } from "@chai-ui/core";
 import type { SearchMenuOption, SearchMenuSection, SearchMenuToggleHeader } from "./search-menu.js";
 declare const __VLS_export: <T extends SearchMenuOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
@@ -29,6 +30,8 @@ declare const __VLS_export: <T extends SearchMenuOption>(__VLS_props: NonNullabl
         triggerVariant?: "outlined" | "text";
         /** Panel width in px; longer labels ellipsize. */
         panelWidth?: number;
+        /** Which way the panel opens: "auto" (default) below when it fits, else above when that fits, else toward the side with more room. */
+        placement?: MenuPlacement;
     } & {
         onSelect?: ((option: T) => any) | undefined;
     }> & (typeof globalThis extends {

package/dist/primitives/SearchMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchMenu.vue.d.ts","sourceRoot":"","sources":["../../src/primitives/SearchMenu.vue"],"names":[],"mappings":"AA0KA;;;;;GAKG;AACH,OAAO,oCAAoC,CAAC;AAC5C,OAAO,gDAAgD,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAEpG,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,gBAAgB,EAChD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA2XO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAzXpD,0DAA0D;kBAChD,CAAC,EAAE;QACb,gFAAgF;mBACrE,iBAAiB,CAAC,CAAC,CAAC,EAAE;QACjC,0HAA0H;uBAC3G,sBAAsB;QACrC,uDAAuD;eAChD,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;QAC/B,mGAAmG;mBACxF,OAAO;sBACJ,MAAM;QACpB,2EAA2E;mBAChE,MAAM;mBACN,OAAO;QAClB,yDAAyD;qBAC5C,OAAO;QACpB,kFAAkF;yBACjE,UAAU,GAAG,MAAM;QACpC,kDAAkD;qBACrC,MAAM;;;KAsWoE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SearchMenu.vue.d.ts","sourceRoot":"","sources":["../../src/primitives/SearchMenu.vue"],"names":[],"mappings":"AAgLA;;;;;GAKG;AACH,OAAO,oCAAoC,CAAC;AAC5C,OAAO,gDAAgD,CAAC;AAIxD,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAEpG,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,gBAAgB,EAChD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAkYO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAhYpD,0DAA0D;kBAChD,CAAC,EAAE;QACb,gFAAgF;mBACrE,iBAAiB,CAAC,CAAC,CAAC,EAAE;QACjC,0HAA0H;uBAC3G,sBAAsB;QACrC,uDAAuD;eAChD,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;QAC/B,mGAAmG;mBACxF,OAAO;sBACJ,MAAM;QACpB,2EAA2E;mBAChE,MAAM;mBACN,OAAO;QAClB,yDAAyD;qBAC5C,OAAO;QACpB,kFAAkF;yBACjE,UAAU,GAAG,MAAM;QACpC,kDAAkD;qBACrC,MAAM;QACnB,sIAAsI;oBAC1H,aAAa;;;KA2W8D,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/style.css

@@ -209,8 +209,17 @@
   gap: var(--chai-space-2);
 }
 
+/* Opens upward: `placement="above"`, or `"auto"` with no room below. */
+.chai-search-menu__panel--above {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+/* 44px tall, not Material's 56px: the field sits inside a compact menu. */
 .chai-search-menu__search {
   width: 100%;
+  --md-outlined-text-field-top-space: 10px;
+  --md-outlined-text-field-bottom-space: 10px;
 }
 
 .chai-search-menu__search-icon {
@@ -249,9 +258,13 @@
   border: none;
   border-radius: var(--chai-radius-sm);
   background: transparent;
-  color: var(--chai-color-semantic-control-text-strong);
+  /* The same grey and 14px label type as the menu triggers and the rest
+     of the controls: 40px rows, the attach menu's density. */
+  color: var(--chai-color-semantic-control-text);
   font-family: var(--chai-type-family-material);
-  font-size: var(--chai-type-size-body-large);
+  font-size: var(--chai-type-size-label-large);
+  line-height: var(--chai-type-leading-label-large);
+  letter-spacing: var(--chai-type-tracking-label-large);
   text-align: left;
   cursor: pointer;
 }
@@ -296,6 +309,9 @@
 .chai-search-menu__checkbox {
   flex: none;
   pointer-events: none;
+  /* 16px, not MD3's 18px, beside 14px labels. */
+  --md-checkbox-container-size: 16px;
+  --md-checkbox-icon-size: 16px;
 }
 
 .chai-search-menu__option svg {
@@ -339,11 +355,13 @@
   gap: var(--chai-space-3);
 }
 
+/* The menu triggers' type: 14px medium, the controls' grey. */
 .chai-search-menu__toggle-header-text {
   font-family: var(--chai-type-family-material);
-  font-size: var(--chai-type-size-body-large);
+  font-size: var(--chai-type-size-label-large);
   font-weight: var(--chai-type-weight-material-medium);
-  color: var(--chai-color-semantic-control-text-strong);
+  letter-spacing: var(--chai-type-tracking-label-large);
+  color: var(--chai-color-semantic-control-text);
 }
 
 .chai-search-menu__empty {
@@ -870,18 +888,26 @@
   position: relative;
 }
 
+/* A 40px rounded square, the size of the mic button's target, with
+   -8px margins so the 24px icon and the row's layout stay where they were. */
 .chai-composer__attach-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 40px;
+  height: 40px;
+  margin: -8px;
   padding: 0;
   border: none;
-  border-radius: var(--chai-radius-full);
+  border-radius: var(--chai-radius-sm);
   background: transparent;
   color: var(--chai-composer-text);
   cursor: pointer;
+  transition: background-color var(--chai-motion-duration-fast) var(--chai-motion-easing-standard);
+}
+
+.chai-composer__attach-toggle:hover:not(:disabled) {
+  background: var(--chai-composer-hover);
 }
 
 .chai-composer__attach-toggle svg {
@@ -901,7 +927,7 @@
 .chai-composer__attach-menu {
   position: absolute;
   z-index: 10;
-  bottom: calc(100% + 8px);
+  top: calc(100% + 8px);
   left: 0;
   min-width: 180px;
   margin: 0;
@@ -912,12 +938,21 @@
   box-shadow: var(--chai-shadow-menu);
 }
 
+/* Opens upward: `menuPlacement="above"`, or `"auto"` with no room below. */
+.chai-composer__attach-menu--above {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+/* MD3 menu density -2: 40px items (48px at density 0, 4px less per step),
+   so the longer menu with the audio group stays compact. */
 .chai-composer__attach-menu-item {
   display: flex;
   align-items: center;
   gap: var(--chai-space-3);
   width: 100%;
-  padding: var(--chai-space-2) var(--chai-space-4);
+  min-height: 40px;
+  padding: 0 var(--chai-space-4);
   border: none;
   background: transparent;
   color: var(--chai-color-semantic-control-text-strong);
@@ -946,9 +981,9 @@
   height: 100%;
 }
 
-/* Reference: "Add media" (`MenuListItem1`) is the only item with a divider
-   under it in the source (`showDivider: true`), separating the real
-   attach action from the three generation-mode actions below it. */
+/* Between menu groups (see `COMPOSER_ATTACH_MENU_ITEMS`): under "Add media",
+   separating the real attach action from the visual use cases, and above
+   the audio use cases. */
 .chai-composer__attach-menu-divider {
   margin: var(--chai-space-2) 0;
   border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/vue",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Chai UI Vue components — smart, drop-in UI for AI apps: Composer, Media Analyzer, Result Card, Edit Card, and the useComposer composable.",
   "license": "MIT",
   "author": "kazarazat",
@@ -47,8 +47,8 @@
   "dependencies": {
     "@fontsource/roboto": "^5.3.0",
     "@material/web": "^2.5.0",
-    "@chai-ui/tokens": "0.10.1",
-    "@chai-ui/core": "0.10.1"
+    "@chai-ui/core": "0.11.0",
+    "@chai-ui/tokens": "0.11.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",

package/src/Composer.vue

@@ -29,6 +29,7 @@ import {
   type ComposerUseCase,
   type EditRegion,
   type MediaKind,
+  type MenuPlacement,
   type ModelOption,
   type OutputKind,
   type ParameterOption,
@@ -90,6 +91,19 @@ const props = withDefaults(
     /** A world's frame rate menu, from the selected models' `frameRates`. */
     frameRate?: number | null;
     "onUpdate:frameRate"?: (value: number) => void;
+    /** Create speech's Voice menu, from the one picked model's `voices` (`v-model:speech-voice`). Not `voiceInput`, which is dictation. */
+    speechVoice?: string | null;
+    "onUpdate:speechVoice"?: (value: string) => void;
+    /** Create music's Genre menu, several at once, from the picked models' `genres` (`v-model:genres`). */
+    genres?: string[];
+    "onUpdate:genres"?: (values: string[]) => void;
+    /**
+     * Which way the bar's menus open. "above" for a bar docked to the bottom
+     * of the screen, "below" for one docked to the top. "auto" (default)
+     * measures when a menu opens: below if it fits, else above if that fits,
+     * else toward the side with more room.
+     */
+    menuPlacement?: MenuPlacement;
     /** The last submit's failure: submit becomes retry, and the message shows inline. */
     submitError?: string | null;
     /** Overrides the built-in "empty prompt and no attachments" check. Ignored while `submitError` is set. */
@@ -121,6 +135,9 @@ const props = withDefaults(
     aspectRatio: null,
     character: "",
     frameRate: null,
+    speechVoice: null,
+    genres: () => [],
+    menuPlacement: "auto",
     submitError: null,
     // Left undefined unless set: Vue would make an absent boolean `false`,
     // which reads as "never disable".
@@ -154,6 +171,12 @@ const modelMenuOptions = computed(() =>
     ? { sections: view.value.modelSections.map((s) => ({ label: s.label, options: s.options })) }
     : { options: view.value.modelSections[0]?.options }
 );
+const toMenuOption = (o: { value: string; label: string }) => ({ id: o.value, label: o.label });
+const voiceMenuOptions = computed(() =>
+  view.value.voiceSections
+    ? { sections: view.value.voiceSections.map((s) => ({ label: s.label, options: s.options.map(toMenuOption) })) }
+    : { options: view.value.voiceOptions.map(toMenuOption) }
+);
 
 // Auto-select chooses at submit, so turning it on clears the current pick
 // and the trigger reads "Auto-select" until routing fills in the model.
@@ -301,6 +324,7 @@ function onSubmitClick() {
           :items="menuItems"
           :images-only="view.editing"
           :disabled="disabled"
+          :placement="menuPlacement"
           @select="onAttachMenuSelect?.($event)"
           @files="onFiles"
         />
@@ -316,6 +340,7 @@ function onSubmitClick() {
 
         <!-- The auto-select switch lives inside the Model menu, so with it shown the trigger stays enabled: it's the only way back to the switch. -->
         <SearchMenu
+          :placement="menuPlacement"
           v-if="view.modelSections.length > 0 && view.canPickModel"
           v-bind="modelMenuOptions"
           :value="view.multiModel ? view.pickedModelIds : modelId"
@@ -335,6 +360,7 @@ function onSubmitClick() {
         />
 
         <SearchMenu
+          :placement="menuPlacement"
           v-if="view.showAspectRatio && view.aspectOptions.length > 0 && props['onUpdate:aspectRatio']"
           :options="view.aspectOptions.map((o) => ({ id: o.value, label: o.label }))"
           :value="view.offeredAspect"
@@ -347,6 +373,34 @@ function onSubmitClick() {
         />
 
         <SearchMenu
+          :placement="menuPlacement"
+          v-if="view.voiceOptions.length > 0 && props['onUpdate:speechVoice']"
+          v-bind="voiceMenuOptions"
+          :value="view.offeredVoice"
+          :trigger-label="view.voiceTriggerLabel"
+          menu-label="Voice"
+          :searchable="view.voiceOptions.length > view.searchableAt"
+          trigger-variant="text"
+          :disabled="disabled"
+          @select="props['onUpdate:speechVoice']?.($event.id)"
+        />
+
+        <SearchMenu
+          :placement="menuPlacement"
+          v-if="view.genreOptions.length > 0 && props['onUpdate:genres']"
+          :options="view.genreOptions.map(toMenuOption)"
+          :value="view.offeredGenres"
+          multiple
+          :trigger-label="view.genreTriggerLabel"
+          menu-label="Genre"
+          :searchable="view.genreOptions.length > view.searchableAt"
+          trigger-variant="text"
+          :disabled="disabled"
+          @select="props['onUpdate:genres']?.(view.toggledGenres($event.id))"
+        />
+
+        <SearchMenu
+          :placement="menuPlacement"
           v-if="view.frameRateOptions.length > 0 && props['onUpdate:frameRate']"
           :options="view.frameRateOptions.map((r) => ({ id: String(r), label: `${r}fps` }))"
           :value="view.offeredFrameRate == null ? null : String(view.offeredFrameRate)"

package/src/composer/AttachMenu.vue

@@ -1,24 +1,42 @@
 <script setup lang="ts">
 /** The "+" / "×" attach control: a positioned popover of the use-case actions, and the hidden file picker behind "Add media". */
-import { ref } from "vue";
-import type { ComposerAttachMenuAction, composerAttachMenuItems } from "@chai-ui/core";
+import { nextTick, ref, watch, type Component } from "vue";
+import { menuOpensAbove, type ComposerAttachMenuAction, type composerAttachMenuItems, type MenuPlacement } from "@chai-ui/core";
 import { useDismiss } from "../dismiss.js";
-import { AttachFileIcon, CloseSymbolIcon, ContentCutIcon, ImageIcon, PlusIcon, GlobeIcon, VideocamIcon } from "../icons.js";
+import { AttachFileIcon, CloseSymbolIcon, ContentCutIcon, ImageIcon, MusicNoteIcon, PlusIcon, GlobeIcon, VideocamIcon, VolumeUpIcon } from "../icons.js";
 
-defineProps<{
+const props = defineProps<{
   items: ReturnType<typeof composerAttachMenuItems>;
   /** Edit mode: one image file at a time. */
   imagesOnly?: boolean;
   disabled?: boolean;
+  placement: MenuPlacement;
 }>();
 const emit = defineEmits<{ select: [action: ComposerAttachMenuAction]; files: [files: FileList | null] }>();
 
-const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "create-world": GlobeIcon, "edit-media": ContentCutIcon };
+const ICONS: Record<ComposerAttachMenuAction, Component> = {
+  "add-media": AttachFileIcon,
+  "create-image": ImageIcon,
+  "create-video": VideocamIcon,
+  "create-world": GlobeIcon,
+  "edit-image": ContentCutIcon,
+  "create-speech": VolumeUpIcon,
+  "create-music": MusicNoteIcon,
+};
 const open = ref(false);
+const above = ref(false);
 const root = ref<HTMLElement>();
+const menu = ref<HTMLElement>();
 const input = ref<HTMLInputElement>();
 useDismiss(root, open, () => (open.value = false));
 
+// Up or down, before the first paint, so it never flashes on the wrong side.
+watch(open, async (isOpen) => {
+  if (!isOpen) return;
+  await nextTick();
+  above.value = menuOpensAbove(props.placement, root.value!.getBoundingClientRect(), menu.value!.offsetHeight, document.documentElement.clientHeight);
+});
+
 function pick(action: ComposerAttachMenuAction) {
   open.value = false;
   if (action === "add-media") input.value?.click();
@@ -45,7 +63,7 @@ function onFileChange(e: Event) {
     >
       <CloseSymbolIcon v-if="open" /><PlusIcon v-else />
     </button>
-    <ul v-if="open" class="chai-composer__attach-menu" role="menu">
+    <ul v-if="open" ref="menu" :class="['chai-composer__attach-menu', { 'chai-composer__attach-menu--above': above }]" role="menu">
       <li v-for="(item, i) in items" :key="item.action" role="none">
         <button type="button" role="menuitem" class="chai-composer__attach-menu-item" @click="pick(item.action)">
           <span class="chai-composer__attach-menu-icon"><component :is="ICONS[item.action]" /></span>{{ item.label }}

package/src/icons.ts

@@ -56,4 +56,5 @@ export const ImageIcon = icon("0 -960 960 960", [{ "d": "M180-120q-24 0-42-18t-1
 export const GlobeIcon = icon("0 -960 960 960", [{ "d": "M480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm-.27-60q142.38 0 241.19-99.5T820-480v-13q-6 26-27.41 43.5Q771.19-432 742-432h-80q-33 0-56.5-23.5T582-512v-40H422v-80q0-33 23.5-56.5T502-712h40v-22q0-16 13.5-40t30.5-29q-25-8-51.36-12.5Q508.29-820 480-820q-141 0-240.5 98.81T140-480h150q66 0 113 47t47 113v40H330v105q34 17 71.7 26t78.3 9Z", "fill": "currentColor" }]);
 export 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" }]);
 export 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" }]);
+export const VolumeUpIcon = icon("0 -960 960 960", [{ "d": "M560-131v-62q97-28 158.5-107.5T780-481q0-101-61-181T560-769v-62q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm420 48v-337q55 17 87.5 64T660-480q0 57-33 104t-87 64ZM420-648 307-540H180v120h127l113 109v-337Zm-94 168Z", "fill": "currentColor" }]);
 export 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" }]);

package/src/index.ts

@@ -26,6 +26,8 @@ export {
   DEFAULT_MODEL_ID,
   DEFAULT_REASONING_MODEL,
   DEFAULT_REASONING_MODEL_BY_KIND,
+  CREATE_MUSIC_USE_CASE,
+  CREATE_SPEECH_USE_CASE,
   EDIT_IMAGE_USE_CASE,
   TEXT_USE_CASE,
   PRECISE_EDIT_MODELS,
@@ -43,9 +45,11 @@ export {
   SUGGESTED_ANALYSIS_MODELS,
   reasoningModelFor,
   suggestedModels,
+  promptWithGenres,
   checkSuggestedModels,
 } from "@chai-ui/core";
 export type {
+  AudioUseCase,
   ComposerAttachMenuAction,
   ComposerPromptField,
   ComposerAttachment,
@@ -63,11 +67,13 @@ export type {
   MediaAnalyzerAttachment,
   MediaAnalyzerSubmitPayload,
   MediaKind,
+  MenuPlacement,
   ModelOption,
   OutputKind,
   Transcribe,
   VoiceClip,
   VoiceInputConfig,
+  VoiceOption,
   ParameterOption,
   Reasoning,
   RegionBox,

package/src/primitives/SearchMenu.vue

@@ -10,6 +10,7 @@ import "@material/web/textfield/outlined-text-field.js";
 import { computed, nextTick, ref, watch } from "vue";
 import { useDismiss } from "../dismiss.js";
 import { CheckIcon } from "../icons.js";
+import { menuOpensAbove, type MenuPlacement } from "@chai-ui/core";
 import Toggle from "./Toggle.vue";
 import type { SearchMenuOption, SearchMenuSection, SearchMenuToggleHeader } from "./search-menu.js";
 
@@ -35,12 +36,15 @@ const props = withDefaults(
     triggerVariant?: "outlined" | "text";
     /** Panel width in px; longer labels ellipsize. */
     panelWidth?: number;
+    /** Which way the panel opens: "auto" (default) below when it fits, else above when that fits, else toward the side with more room. */
+    placement?: MenuPlacement;
   }>(),
-  { searchable: true, triggerVariant: "outlined", panelWidth: 280 }
+  { searchable: true, triggerVariant: "outlined", panelWidth: 280, placement: "auto" }
 );
 const emit = defineEmits<{ select: [option: T] }>();
 
 const open = ref(false);
+const above = ref(false);
 const search = ref("");
 const root = ref<HTMLElement>();
 const panel = ref<HTMLElement>();
@@ -60,6 +64,8 @@ watch(open, async (isOpen) => {
   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`;
+  // Up or down, before the first paint, so it never flashes on the wrong side.
+  above.value = menuOpensAbove(props.placement, root.value!.getBoundingClientRect(), el.offsetHeight, document.documentElement.clientHeight);
 });
 
 useDismiss(root, open, close);
@@ -101,7 +107,7 @@ function pick(option: T) {
       </svg>
     </button>
 
-    <div v-if="open" ref="panel" class="chai-search-menu__panel" role="group" :aria-label="menuLabel" :style="{ width: `${panelWidth}px` }">
+    <div v-if="open" ref="panel" class="chai-search-menu__panel" :class="{ 'chai-search-menu__panel--above': above }" role="group" :aria-label="menuLabel" :style="{ width: `${panelWidth}px` }">
       <div v-if="toggleHeader" class="chai-search-menu__toggle-header">
         <span class="chai-search-menu__toggle-header-label">{{ menuLabel }}</span>
         <span class="chai-search-menu__toggle-header-row">
@@ -113,7 +119,7 @@ function pick(option: T) {
         v-if="searchable"
         class="chai-search-menu__search"
         :label="menuLabel"
-        placeholder="Input"
+        placeholder="Search"
         :value.prop="search"
         @input="search = ($event.target as HTMLInputElement).value"
       >