@chai-ui/vue 0.0.0-stage → 0.7.0

package/src/MediaAnalyzer.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+/**
+ * Turns attached media into a prompt: a drop zone for images, a video or
+ * audio, a model menu with auto-select, a prompt-length menu, and submit.
+ * Pair with `useMediaAnalyzer`. Same props as React's `MediaAnalyzer`, with
+ * `v-model:attachments`, `v-model:model-id`, `v-model:auto-select-model`
+ * and `v-model:prompt-length`.
+ */
+import "@material/web/fab/fab.js";
+import { computed, ref, watch } from "vue";
+import {
+  DEFAULT_MAX_ATTACHMENTS_BY_KIND,
+  isMediaAnalyzerAtCap,
+  mediaAnalyzerModelSections,
+  nextMediaAnalyzerAttachments,
+  PROMPT_LENGTH_HINT,
+  readMediaFiles,
+  replacedNote,
+  SUGGESTED_ANALYSIS_MODELS,
+  type MediaAnalysisPromptLength,
+  type MediaAnalyzerAttachment,
+  type MediaAnalyzerSubmitPayload,
+  type MediaKind,
+  type ModelOption,
+} from "@chai-ui/core";
+import { ArrowForwardIcon, AudioIcon, MixedMediaIcon, RemoveIcon, StopIcon, VideoIcon } from "./icons.js";
+import SearchMenu from "./primitives/SearchMenu.vue";
+
+const props = withDefaults(
+  defineProps<{
+    attachments: MediaAnalyzerAttachment[];
+    maxAttachmentsByKind?: Record<MediaKind, number>;
+    /** Fallback roster for a kind `modelsByKind` doesn't list. */
+    models?: ModelOption[];
+    /** Per-kind rosters; once a kind is attached, only its models show. Defaults to Chai's suggested OpenRouter models. */
+    modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
+    /** The picked model. While `autoSelectModel` is on it's `null` until a submit routes, then the routed model. */
+    modelId: string | null;
+    /** The "Auto-select model" switch inside the model menu. Turning it on clears the pick. */
+    autoSelectModel: boolean;
+    /** `null` until a person picks one: the trigger says "Prompt length" rather than pre-filling a choice. */
+    promptLength: MediaAnalysisPromptLength | null;
+    promptLengthOptions: { value: MediaAnalysisPromptLength; label: string }[];
+    disabled?: boolean;
+    submitting?: boolean;
+    submitError?: string | null;
+    /** With a listener, submit turns into stop while `submitting` (wire it to `useMediaAnalyzer`'s `cancel`); without one, submit is just disabled. */
+    onAbort?: () => void;
+  }>(),
+  { maxAttachmentsByKind: () => DEFAULT_MAX_ATTACHMENTS_BY_KIND, models: () => [], modelsByKind: () => SUGGESTED_ANALYSIS_MODELS }
+);
+const emit = defineEmits<{
+  "update:attachments": [next: MediaAnalyzerAttachment[]];
+  "update:modelId": [id: string | null];
+  "update:autoSelectModel": [next: boolean];
+  "update:promptLength": [value: MediaAnalysisPromptLength];
+  unsupportedFile: [fileName: string];
+  submit: [payload: MediaAnalyzerSubmitPayload];
+}>();
+
+const input = ref<HTMLInputElement>();
+// A count, not a boolean: dragenter/dragleave fire for every child the
+// pointer crosses too, so a boolean would flicker off over the icon or text.
+const dragDepth = ref(0);
+// What the last attach replaced (one kind per analysis), shown until the
+// attachments change some other way. Matched by ids: a parent's ref hands
+// the list back as a reactive copy, never the same array.
+const replaced = ref<{ note: string; ids: string } | null>(null);
+const idsOf = (list: MediaAnalyzerAttachment[]) => 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));
+// Looked up across every section, so a pick made before any media is attached still names itself on the trigger.
+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));
+
+// Auto-select chooses at submit, so turning it on clears the current pick
+// and the trigger says what will happen until it does.
+watch(
+  () => props.autoSelectModel,
+  (on, was) => {
+    if (on && !was) emit("update:modelId", null);
+  }
+);
+
+/** Reads every file first, then applies them in drop order and commits once. */
+async function handleFiles(files: FileList | null | undefined) {
+  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: DragEvent) {
+  dragDepth.value = 0;
+  if (!props.disabled) void handleFiles(e.dataTransfer?.files);
+}
+
+function onFileChange(e: Event) {
+  const el = e.target as HTMLInputElement;
+  void handleFiles(el.files);
+  el.value = "";
+}
+
+function remove(id: string) {
+  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,
+    });
+  }
+}
+</script>
+
+<template>
+  <div class="chai-media-analyzer">
+    <div
+      :class="[
+        'chai-media-analyzer__dropzone',
+        { 'chai-media-analyzer__dropzone--disabled': atCap, 'chai-media-analyzer__dropzone--drag-active': dragDepth > 0 },
+      ]"
+      @dragenter.prevent="dragDepth++"
+      @dragleave.prevent="dragDepth = Math.max(0, dragDepth - 1)"
+      @dragover.prevent
+      @drop.prevent="onDrop"
+    >
+      <span class="chai-media-analyzer__dropzone-icon" aria-hidden="true"><MixedMediaIcon /></span>
+      <!-- `atCap` is only ever true for image. -->
+      <p class="chai-media-analyzer__dropzone-hint">{{ atCap ? "Maximum images added" : "Add media to convert to prompt" }}</p>
+      <button type="button" class="chai-chip-button" :disabled="disabled" @click="input?.click()">Select files</button>
+      <input ref="input" type="file" accept="image/*,video/*,audio/*" multiple hidden :disabled="disabled" @change="onFileChange" />
+    </div>
+
+    <div v-if="attachments.length > 0" class="chai-media-analyzer__thumbnails">
+      <div v-for="a in attachments" :key="a.id" class="chai-media-analyzer__thumb">
+        <img v-if="a.kind === 'image'" class="chai-media-analyzer__thumb-img" :src="a.src" alt="" />
+        <span v-else class="chai-media-analyzer__thumb-icon"><VideoIcon v-if="a.kind === 'video'" /><AudioIcon v-else /></span>
+        <button type="button" class="chai-media-analyzer__thumb-remove" :aria-label="`Remove ${a.name ?? a.kind}`" @click="remove(a.id)">
+          <RemoveIcon />
+        </button>
+      </div>
+    </div>
+
+    <p v-if="replaced && replaced.ids === idsOf(attachments)" class="chai-media-analyzer__note" role="status">{{ replaced.note }}</p>
+    <p v-if="submitError" class="chai-media-analyzer__error" role="alert">{{ submitError }}</p>
+
+    <div class="chai-media-analyzer__controls">
+      <div class="chai-media-analyzer__controls-start">
+        <SearchMenu
+          :options="sections.length === 1 ? sections[0]!.options : undefined"
+          :sections="sections.length > 1 ? sections : undefined"
+          :toggle-header="{ label: 'Auto-select model', value: autoSelectModel, onChange: (next) => emit('update:autoSelectModel', next) }"
+          :value="modelId"
+          :trigger-label="modelTriggerLabel"
+          menu-label="Select model"
+          :searchable="false"
+          trigger-variant="text"
+          :disabled="disabled"
+          :panel-width="320"
+          @select="emit('update:modelId', $event.id)"
+        />
+        <SearchMenu
+          :options="lengthOptions"
+          :value="promptLength"
+          :trigger-label="lengthLabel"
+          menu-label="Prompt length"
+          :searchable="false"
+          trigger-variant="text"
+          :disabled="disabled"
+          @select="emit('update:promptLength', $event.id as MediaAnalysisPromptLength)"
+        />
+      </div>
+
+      <!-- The same unfilled-until-ready submit as Composer's FAB. -->
+      <md-fab
+        class="chai-media-analyzer__submit"
+        size="small"
+        variant="secondary"
+        label=""
+        :data-ready="showStop || !isSubmitDisabled || undefined"
+        :data-error="Boolean(submitError) || undefined"
+        :data-stop="showStop || undefined"
+        :aria-label="showStop ? 'Stop' : submitError ? 'Retry' : 'Analyze media'"
+        :aria-disabled="showStop ? 'false' : submitting || isSubmitDisabled ? 'true' : 'false'"
+        @click="onSubmitClick"
+      >
+        <span slot="icon"><StopIcon v-if="showStop" /><ArrowForwardIcon v-else /></span>
+      </md-fab>
+    </div>
+  </div>
+</template>

package/src/PageSlide.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Renders a page with its slide. The outgoing image stays in the layout
+ * while it slides away, so the card holds its height even while the new
+ * image is still loading, and the new page slides in over that space. The
+ * page keeps its key once the slide ends, so it isn't remounted (no
+ * reloaded image, no restarted video).
+ */
+import { computed } from "vue";
+import type { Slide } from "./page-slide.js";
+
+const props = defineProps<{ slide: Slide | null; pageClass?: string }>();
+const emit = defineEmits<{ end: [] }>();
+
+const side = computed(() => (props.slide?.forward ? "left" : "right"));
+const outgoing = computed(() => (props.slide?.active ? props.slide.from : undefined));
+</script>
+
+<template>
+  <img
+    v-if="outgoing"
+    :key="`out-${slide!.key}`"
+    :class="`chai-slide-out chai-slide-out--${side}`"
+    :src="outgoing"
+    alt=""
+    aria-hidden="true"
+    draggable="false"
+  />
+  <div
+    :key="`in-${slide?.key ?? 0}`"
+    :class="[pageClass, slide?.active && `chai-slide-in chai-slide-in--${side}`, outgoing && 'chai-slide-in--over']"
+    @animationend.self="emit('end')"
+  >
+    <slot />
+  </div>
+</template>

package/src/ResultCard.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+/**
+ * The Composer bar's complement, and the last stop in the pipeline: the
+ * results from one prompt, one at a time, paged with the dots when there
+ * are several. Flips to show the prompt and details. Same props as React's
+ * `ResultCard`; `onAction` is the `action` event.
+ */
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import {
+  downloadFilename,
+  downloadMedia,
+  formatAspectRatio,
+  formatCost,
+  formatDuration,
+  formatTokens,
+  resultModelLabel,
+  shareMedia,
+  type ModelOption,
+  type Result,
+} from "@chai-ui/core";
+import { CheckIcon, CloseIcon, CopyIcon, InfoIcon, RefreshIcon, ThumbDownIcon, ThumbUpIcon } from "./icons.js";
+import PageSlide from "./PageSlide.vue";
+import { usePageSlide } from "./page-slide.js";
+import Pagination from "./primitives/Pagination.vue";
+import IconButton from "./result-card/IconButton.vue";
+import MoreMenu from "./result-card/MoreMenu.vue";
+import ResultMedia from "./result-card/ResultMedia.vue";
+import VideoPlayer from "./result-card/VideoPlayer.vue";
+import type { ResultCardMoreAction, ResultCardVote } from "./result-card/types.js";
+
+const props = defineProps<{
+  /** The results from one prompt: `results[0]` if there's only one, paged internally if more. */
+  results: Result[];
+  /** Fixed width in px. Defaults to 375; height follows the media. */
+  width?: number;
+  /** Max height in px of a text result before it scrolls. Defaults to 400. */
+  textMaxHeight?: number;
+  /** The request's prompt, shown read-only (copiable) on the info side. */
+  prompt: string;
+  /** Alt text for a generated image. Defaults to `prompt`. */
+  altText?: (result: Result) => string;
+  /** Resolves `Result.modelId` to a label, on the info side and beside the page dots. */
+  models?: ModelOption[];
+  /** A result's vote, if any. Controlled: what a vote means is the app's policy. */
+  getVote?: (result: Result) => ResultCardVote;
+  /** Extra items in the ⋯ menu. Omit to hide the menu. */
+  moreActions?: ResultCardMoreAction[];
+  disabled?: boolean;
+}>();
+const emit = defineEmits<{
+  /** `"like"`, `"dislike"`, `"download"`, `"share"`, `"copy-prompt"`, `"retry"`, or a `moreActions` id. */
+  action: [action: string, result: Result];
+}>();
+
+const activeIndex = ref(0);
+const flipped = ref(false);
+const copied = ref(false);
+const linkCopied = ref(false);
+const mediaExpanded = ref(false);
+// Measured off the loaded media for the aspect-ratio chip, with the id it
+// was measured from, so a stale ratio never shows after paging.
+const measured = ref<{ id: string; width: number; height: number } | null>(null);
+const videoTime = reactive({ current: 0 });
+const videoWasPlaying = ref(false);
+const front = ref<HTMLElement>();
+const back = ref<HTMLElement>();
+const overlay = ref<HTMLElement>();
+
+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);
+// An image or video runs under a dark fade into the bar; text, audio and status pages keep the plain surface.
+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) : undefined,
+  ].filter(Boolean) as string[];
+});
+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` }),
+}));
+
+// Paging slides, with the last image sliding out (other kinds just slide in).
+const { slide, endSlide } = usePageSlide(() => ({
+  id: result.value?.id,
+  index: index.value,
+  image: kind.value === "image" ? result.value!.output!.src : undefined,
+}));
+
+const act = (action: string) => emit("action", action, result.value!);
+
+function flash(flag: typeof copied) {
+  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!;
+  // With no share sheet the link is copied; say so, or the click looks like nothing happened.
+  if (r.output && (await shareMedia(r.output.src)) === "copied") flash(linkCopied);
+  emit("action", "share", r);
+}
+
+// Flipping moves focus to the side now showing, so a keyboard user isn't left on a button that just turned away.
+watch(
+  flipped,
+  (isFlipped) => {
+    const target = isFlipped
+      ? back.value?.querySelector<HTMLElement>('[aria-label="Close details"]')
+      : front.value?.querySelector<HTMLElement>('[aria-label="Show details"]');
+    target?.focus();
+  },
+  { flush: "post" }
+);
+
+// The expanded view is a modal dialog: focus moves in, Tab stays inside,
+// Escape closes, and focus returns to Expand, the only way in.
+watch(mediaExpanded, async (open) => {
+  await nextTick();
+  if (open) overlay.value?.querySelector<HTMLElement>(".chai-result-card__collapse")?.focus();
+  else front.value?.querySelector<HTMLElement>('[aria-label="Expand"]')?.focus();
+});
+
+function onOverlayKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    e.stopPropagation();
+    mediaExpanded.value = false;
+    return;
+  }
+  if (e.key !== "Tab") return;
+  const focusable = [
+    ...(e.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('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();
+  }
+}
+</script>
+
+<template>
+  <template v-if="result">
+    <div :class="['chai-result-card', { 'chai-result-card--flipped': flipped }]" :style="cardStyle">
+      <div class="chai-result-card__inner">
+        <!-- The face turned away is inert, so its buttons can't be tabbed to. -->
+        <div
+          ref="front"
+          :class="['chai-result-card__face chai-result-card__front', { 'chai-result-card__front--paginated': paginated }]"
+          :aria-hidden="flipped"
+          :inert="flipped"
+        >
+          <div class="chai-result-card__media-frame">
+            <PageSlide :slide="slide" page-class="chai-result-card__media-page" @end="endSlide">
+              <ResultMedia
+                :result="result"
+                :alt="alt"
+                :disabled="disabled"
+                :media-expanded="mediaExpanded"
+                :link-copied="linkCopied"
+                :video-time="videoTime"
+                :video-was-playing="videoWasPlaying"
+                @download="download"
+                @share="share"
+                @expand="mediaExpanded = true"
+                @dimensions="(w, h) => (measured = { id: result!.id, width: w, height: h })"
+                @video-playing-change="videoWasPlaying = $event"
+              />
+            </PageSlide>
+            <div v-if="paginated && overMedia" class="chai-card-fade" />
+          </div>
+
+          <!-- With several results, the page dots are the card's last row, with the model that made this page on the left. -->
+          <div v-if="paginated" :class="['chai-card-pager-bar', { 'chai-card-pager-bar--over-media': overMedia }]">
+            <span class="chai-card-pager-label">{{ modelLabel }}</span>
+            <Pagination
+              :count="results.length"
+              :index="index"
+              label="Results"
+              :disabled="disabled"
+              @update:index="activeIndex = $event"
+            />
+          </div>
+
+          <!-- Floating over the bottom of the media: votes and retry in one pill, details on the right. -->
+          <div class="chai-card-bottom">
+            <div class="chai-card-actions">
+              <div class="chai-card-pill">
+                <IconButton variant="pill" label="Like" :active="vote === 'like'" :disabled="disabled" @click="act('like')">
+                  <ThumbUpIcon />
+                </IconButton>
+                <IconButton variant="pill" label="Dislike" :active="vote === 'dislike'" :disabled="disabled" @click="act('dislike')">
+                  <ThumbDownIcon />
+                </IconButton>
+                <IconButton variant="pill" label="Retry" :disabled="disabled" @click="act('retry')"><RefreshIcon /></IconButton>
+                <MoreMenu v-if="moreActions?.length" :actions="moreActions" :disabled="disabled" @select="act($event.id)" />
+              </div>
+              <IconButton variant="round" label="Show details" :disabled="disabled" @click="flipped = true"><InfoIcon /></IconButton>
+            </div>
+          </div>
+        </div>
+
+        <div ref="back" class="chai-result-card__face chai-result-card__back" :aria-hidden="!flipped" :inert="!flipped">
+          <button type="button" class="chai-result-card__close" aria-label="Close details" @click="flipped = false">
+            <CloseIcon />
+          </button>
+          <div class="chai-result-card__prompt-box">
+            <p class="chai-result-card__prompt-text">{{ prompt }}</p>
+            <button
+              type="button"
+              class="chai-result-card__copy"
+              :aria-label="copied ? 'Copied' : 'Copy prompt'"
+              :title="copied ? 'Copied' : 'Copy prompt'"
+              @click="copyPrompt"
+            >
+              <CheckIcon v-if="copied" /><CopyIcon v-else />
+            </button>
+          </div>
+          <div class="chai-result-card__chips">
+            <span v-for="(chip, i) in chips" :key="i" class="chai-result-card__chip">{{ chip }}</span>
+            <!-- The builder's own backend checks: pass green with a check, fail red with a cross, so the verdict never relies on color alone. -->
+            <span
+              v-for="evaluation in result.evaluations"
+              :key="evaluation.id"
+              :class="[
+                'chai-result-card__chip chai-result-card__chip--evaluation',
+                `chai-result-card__chip--${evaluation.passed ? 'passed' : 'failed'}`,
+              ]"
+              :title="`${evaluation.label}: ${evaluation.passed ? 'passed' : 'failed'}`"
+            >
+              <CheckIcon v-if="evaluation.passed" /><CloseIcon v-else />{{ evaluation.label
+              }}<span class="chai-visually-hidden">{{ evaluation.passed ? ", passed" : ", failed" }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- The expanded view is the card's sibling, not its child: the card's
+         `perspective` (for the flip) would make a nested `position: fixed`
+         overlay cover only the card. The expanded video is a second element;
+         `videoTime` and `videoWasPlaying` carry its place across. -->
+    <div
+      v-if="mediaExpanded && result.output && overMedia"
+      ref="overlay"
+      class="chai-result-card__expand-overlay"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="kind === 'video' ? 'Expanded video' : 'Expanded image'"
+      @keydown="onOverlayKeydown"
+    >
+      <div class="chai-result-card__expand-scrim" role="presentation" @click="mediaExpanded = false" />
+      <div class="chai-result-card__expand-frame">
+        <VideoPlayer
+          v-if="kind === 'video'"
+          :src="result.output.src"
+          expanded
+          :time="videoTime"
+          :was-playing="videoWasPlaying"
+          @playing-change="videoWasPlaying = $event"
+        />
+        <img v-else class="chai-result-card__image" :src="result.output.src" :alt="alt" />
+        <button type="button" class="chai-result-card__collapse" aria-label="Collapse" @click="mediaExpanded = false">
+          <CloseIcon />
+        </button>
+      </div>
+    </div>
+  </template>
+</template>

package/src/composer/AttachMenu.vue

@@ -0,0 +1,66 @@
+<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 { useDismiss } from "../dismiss.js";
+import { AttachFileIcon, CloseSymbolIcon, ContentCutIcon, ImageIcon, PlusIcon, VideocamIcon } from "../icons.js";
+
+defineProps<{
+  items: ReturnType<typeof composerAttachMenuItems>;
+  /** Edit mode: one image file at a time. */
+  imagesOnly?: boolean;
+  disabled?: boolean;
+}>();
+const emit = defineEmits<{ select: [action: ComposerAttachMenuAction]; files: [files: FileList | null] }>();
+
+const ICONS = { "add-media": AttachFileIcon, "create-image": ImageIcon, "create-video": VideocamIcon, "edit-media": ContentCutIcon };
+const open = ref(false);
+const root = ref<HTMLElement>();
+const input = ref<HTMLInputElement>();
+useDismiss(root, open, () => (open.value = false));
+
+function pick(action: ComposerAttachMenuAction) {
+  open.value = false;
+  if (action === "add-media") input.value?.click();
+  emit("select", action);
+}
+
+function onFileChange(e: Event) {
+  const el = e.target as HTMLInputElement;
+  emit("files", el.files);
+  el.value = "";
+}
+</script>
+
+<template>
+  <div ref="root" class="chai-composer__attach">
+    <button
+      type="button"
+      :class="['chai-composer__attach-toggle', { 'chai-composer__attach-toggle--open': open }]"
+      :disabled="disabled"
+      :aria-expanded="open"
+      aria-haspopup="menu"
+      :aria-label="open ? 'Close attach menu' : 'Add media'"
+      @click="open = !open"
+    >
+      <CloseSymbolIcon v-if="open" /><PlusIcon v-else />
+    </button>
+    <ul v-if="open" class="chai-composer__attach-menu" 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 }}
+        </button>
+        <hr v-if="item.divider && i < items.length - 1" class="chai-composer__attach-menu-divider" role="separator" />
+      </li>
+    </ul>
+    <input
+      ref="input"
+      type="file"
+      :accept="imagesOnly ? 'image/*' : 'image/*,video/*,audio/*'"
+      :multiple="!imagesOnly"
+      hidden
+      :disabled="disabled"
+      @change="onFileChange"
+    />
+  </div>
+</template>

package/src/composer/Chip.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * A use-case or region chip: its label, and a remove button revealed on
+ * hover when it can be removed. A region chip shows its numbered badge in
+ * the region's color, matching the box on the image.
+ */
+import { regionColor } from "@chai-ui/core";
+import { CloseSymbolIcon } from "../icons.js";
+
+defineProps<{ label: string; regionNumber?: number; removable?: boolean; disabled?: boolean }>();
+const emit = defineEmits<{ remove: [] }>();
+</script>
+
+<template>
+  <span
+    :class="['chai-composer__chip', { 'chai-composer__chip--region': regionNumber != null }]"
+    :style="regionNumber != null ? { '--chai-region-color': regionColor(regionNumber) } : undefined"
+  >
+    <!-- Label and button touch: whitespace between them would render as a space. -->
+    <span v-if="regionNumber != null" class="chai-composer__region-badge" aria-hidden="true">{{ regionNumber }}</span
+    >{{ label }}<button
+      v-if="removable" type="button" class="chai-composer__chip-remove" :disabled="disabled" :aria-label="`Remove ${label}`" @click="emit('remove')">
+      <CloseSymbolIcon />
+    </button>
+  </span>
+</template>

package/src/dismiss.ts

@@ -0,0 +1,22 @@
+import { onScopeDispose, watch, type Ref } from "vue";
+
+/** While `open`, a press outside `root` or Escape calls `close`: the inline menus' popover behavior. */
+export function useDismiss(root: Ref<HTMLElement | undefined>, open: Ref<boolean>, close: () => void) {
+  function onPointerDown(e: PointerEvent) {
+    if (!root.value?.contains(e.target as Node)) close();
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") close();
+  }
+  function listen(on: boolean) {
+    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));
+}