@chai-ui/vue 0.0.0-stage → 0.7.0

package/dist/useComposer.d.ts

@@ -0,0 +1,22 @@
+import { type MaybeRefOrGetter } from "vue";
+import { type ComposerOptions } from "@chai-ui/core";
+export type UseComposerOptions = ComposerOptions;
+/**
+ * The Vue binding for `createComposerStore` in `@chai-ui/core`: turns a
+ * `Composer`'s submit payload into a real `Request` → `Run` → `Result`.
+ * Pass a getter (or ref) for options that change, e.g. `() => ({ engine, editImage: image.value })`.
+ */
+export declare function useComposer(options?: MaybeRefOrGetter<UseComposerOptions>): {
+    run: import("vue").ComputedRef<import("@chai-ui/core").Run | null>;
+    runs: import("vue").ComputedRef<import("@chai-ui/core").Run[]>;
+    submit: (payload: import("@chai-ui/core").ComposerSubmitPayload) => void;
+    cancel: () => void;
+    /** `undefined` without reasoning, so the Composer hides its Enhance button. */
+    enhance: import("vue").ComputedRef<((value: string) => Promise<string>) | undefined>;
+    enhancing: import("vue").ComputedRef<boolean>;
+    routing: import("vue").ComputedRef<boolean>;
+    /** Props for an `EditCard`, and `regions` for `Composer`. `null` when there's no `editImage`. */
+    edit: import("vue").ComputedRef<import("@chai-ui/core").ComposerEdit | null>;
+};
+export type UseComposerReturn = ReturnType<typeof useComposer>;
+//# sourceMappingURL=useComposer.d.ts.map

package/dist/useComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposer.d.ts","sourceRoot":"","sources":["../src/useComposer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC3F,OAAO,EAAsC,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAGzF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAEjD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,gBAAgB,CAAC,kBAAkB,CAAM;;;;;IAiB1E,+EAA+E;;;;IAI/E,iGAAiG;;EAGpG;AAED,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/useMediaAnalyzer.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeRefOrGetter } from "vue";
+import { type MediaAnalyzerOptions } from "@chai-ui/core";
+export type UseMediaAnalyzerOptions = MediaAnalyzerOptions;
+/**
+ * The Vue binding for `createMediaAnalyzerStore` in `@chai-ui/core`, behind
+ * `MediaAnalyzer`'s submit: `prompt` fills in as the text streams.
+ */
+export declare function useMediaAnalyzer(options?: MaybeRefOrGetter<UseMediaAnalyzerOptions>): {
+    analyzing: import("vue").ComputedRef<boolean>;
+    error: import("vue").ComputedRef<string | null>;
+    prompt: import("vue").ComputedRef<string | null>;
+    submit: (payload: import("@chai-ui/core").MediaAnalyzerSubmitPayload) => void;
+    cancel: () => void;
+    reset: () => void;
+};
+export type UseMediaAnalyzerReturn = ReturnType<typeof useMediaAnalyzer>;
+//# sourceMappingURL=useMediaAnalyzer.d.ts.map

package/dist/useMediaAnalyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaAnalyzer.d.ts","sourceRoot":"","sources":["../src/useMediaAnalyzer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC3F,OAAO,EAA4B,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGpF,MAAM,MAAM,uBAAuB,GAAG,oBAAoB,CAAC;AAE3D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,gBAAgB,CAAC,uBAAuB,CAAM;;;;;;;EAoBvF;AAED,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "@chai-ui/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.7.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",
+  "homepage": "https://chai-ui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kazarazat/chai-ui.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/kazarazat/chai-ui/issues"
+  },
+  "keywords": [
+    "ai",
+    "generative-ai",
+    "design-system",
+    "ai-ui",
+    "vue",
+    "components",
+    "prompt",
+    "composer"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.*",
+    "!src/__tests__",
+    "DESIGN.md"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.3.0",
+    "@material/web": "^2.5.0",
+    "@chai-ui/core": "0.7.0",
+    "@chai-ui/tokens": "0.7.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/browser": "3.2.7",
+    "@vitest/coverage-v8": "3.2.7",
+    "@vue/test-utils": "^2.5.1",
+    "axe-core": "^4.13.0",
+    "jsdom": "^25.0.1",
+    "playwright": "^1.63.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3",
+    "vite": "^7.3.6",
+    "vitest": "^3.2.7",
+    "vitest-browser-vue": "^1.1.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.3.12"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist && node -e \"require('fs').copyFileSync('../react/src/style.css','dist/style.css');require('fs').copyFileSync('../react/DESIGN.md','DESIGN.md')\"",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "lint": "echo \"(no lint configured yet)\"",
+    "clean": "rimraf dist",
+    "test": "vitest run && vitest run --config vitest.browser.config.ts",
+    "test:coverage": "vitest run --coverage --coverage.reporter=lcov --coverage.reporter=text-summary --coverage.include=src/** --coverage.reportsDirectory=coverage/unit && vitest run --config vitest.browser.config.ts --coverage --coverage.reporter=lcov --coverage.reporter=text-summary --coverage.include=src/** --coverage.reportsDirectory=coverage/browser",
+    "test:unit": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts"
+  }
 }

package/src/ChaiProvider.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import { createReasoning, reasoningEngineFor, type GenerationEngine, type MediaKind } from "@chai-ui/core";
+import { reasoningKey } from "./reasoning.js";
+
+/** The reasoning engine and models every CHAI component inside shares. Same props as React's `ChaiProvider`. */
+const props = defineProps<{
+  /** Text, image and routing model. Defaults to `DEFAULT_REASONING_MODEL`. */
+  reasoningModel?: string;
+  /** Per-attachment-kind models, merged over `DEFAULT_REASONING_MODEL_BY_KIND` one kind at a time. */
+  reasoningModelByKind?: Partial<Record<MediaKind, string>>;
+  /** The engine the reasoning models run on. Defaults to OpenRouter, independent of the generation engine. */
+  reasoningEngine?: GenerationEngine;
+}>();
+
+// Created once, and again only when a different engine is passed.
+const engine = computed(() => reasoningEngineFor({ reasoningEngine: props.reasoningEngine }));
+provide(
+  reasoningKey,
+  computed(() => createReasoning(props, engine.value))
+);
+</script>
+
+<template>
+  <slot />
+</template>

package/src/Composer.vue

@@ -0,0 +1,362 @@
+<script setup lang="ts">
+/**
+ * The compose bar for generative AI input: prompt field, attachments, use
+ * case, model and aspect-ratio menus, Enhance, and submit, all driven by
+ * which props are given. Same props as React's `Composer`, with `v-model`
+ * for the prompt and `v-model:…` for attachments, use cases, models, aspect
+ * ratio, auto-select and regions.
+ *
+ * Some controls show only with somewhere for them to go, so these listeners
+ * are props, checked for: `@update:attachments` (add and remove media),
+ * `@update:model-id` / `@update:model-ids` (the Model menu),
+ * `@update:aspect-ratio`, `@update:use-cases` and `@clear-use-case` (chip
+ * remove), `@update:regions`, `@enhance` (the Enhance button), `@abort` (stop
+ * while submitting) and `@attach-menu-select` (the + menu's use cases).
+ */
+import "@material/web/fab/fab.js";
+import { computed, onScopeDispose, ref, watch } from "vue";
+import {
+  composerAttachmentsFromFiles,
+  composerAttachMenuItems,
+  composerView,
+  enhanceRevealDurationMs,
+  MAX_ANIMATE_ENHANCE_LENGTH,
+  type ComposerAttachment,
+  type ComposerAttachMenuAction,
+  type ComposerSubmitPayload,
+  type ComposerUseCase,
+  type EditRegion,
+  type MediaKind,
+  type ModelOption,
+  type ParameterOption,
+} from "@chai-ui/core";
+import AttachMenu from "./composer/AttachMenu.vue";
+import Chip from "./composer/Chip.vue";
+import { ArrowForwardIcon, CloseSymbolIcon, ErrorIcon, ImageIcon, MusicNoteIcon, OptimizeIcon, RetryIcon, StopIcon, UndoIcon, VideocamIcon } from "./icons.js";
+import SearchMenu from "./primitives/SearchMenu.vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** The prompt text. Controlled: use `v-model`. */
+    modelValue: string;
+    /** Defaults to "Describe media to create", or edit wording when the use case is an edit. */
+    placeholder?: string;
+    /** The prompt field's accessible name. Defaults to `placeholder`, which disappears once the person types. */
+    promptLabel?: string;
+    attachments?: ComposerAttachment[];
+    "onUpdate:attachments"?: (next: ComposerAttachment[]) => void;
+    /** The use-case chip. Aspect ratio only renders for an image or video use case. */
+    useCase?: ComposerUseCase | null;
+    onClearUseCase?: () => void;
+    /** What a submit means with no use case picked. Defaults to `TEXT_USE_CASE`. Never shown as a chip. */
+    defaultUseCase?: ComposerUseCase;
+    /** Several use cases at once, at most one per kind, with `useCases` and `modelsByKind`. */
+    multiSelectUseCases?: boolean;
+    useCases?: ComposerUseCase[];
+    "onUpdate:useCases"?: (next: ComposerUseCase[]) => void;
+    /** Models per use-case kind, for `multiSelectUseCases`. A kind left out gets Chai's suggested models. */
+    modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
+    /** The end user can pick several models, each producing its own result, with `modelIds`. */
+    multiSelectModels?: boolean;
+    modelIds?: string[];
+    "onUpdate:modelIds"?: (ids: string[]) => void;
+    /** Models for the use case. Leave out for Chai's suggested Fal models; `[]` for no Model menu. */
+    models?: ModelOption[];
+    modelId?: string | null;
+    "onUpdate:modelId"?: (id: string | null) => void;
+    /** The model is chosen at submit: `useComposer` asks the reasoning model. Turning it on clears the pick. */
+    autoSelectModel?: boolean;
+    /** An "Auto-select model" switch at the top of the Model menu, for the end user. */
+    showAutoSelectToggle?: boolean;
+    "onUpdate:autoSelectModel"?: (value: boolean) => void;
+    /** Your own labels or a shorter list; ratios the models don't take are left out either way. */
+    aspectRatios?: ParameterOption<string>[];
+    aspectRatio?: string | null;
+    "onUpdate:aspectRatio"?: (value: string) => void;
+    /** Shows the Enhance button; your handler runs the rewrite and updates the prompt. Gets the current prompt. */
+    onEnhance?: (value: string) => void;
+    /** True while your Enhance handler is running. */
+    enhancing?: boolean;
+    /** 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. */
+    submitDisabled?: boolean;
+    /** True while a request is in flight: with `@abort`, submit becomes stop; without, it's disabled. */
+    submitting?: boolean;
+    onAbort?: () => void;
+    onAttachMenuSelect?: (action: ComposerAttachMenuAction) => void;
+    /** Which + menu items to show. Each still shows only when it can work. */
+    attachMenuActions?: ComposerAttachMenuAction[];
+    /** An edit's regions (from `useComposer`'s `edit`), shown as colored chips while editing. */
+    regions?: EditRegion[];
+    "onUpdate:regions"?: (next: EditRegion[]) => void;
+    disabled?: boolean;
+  }>(),
+  {
+    attachments: () => [],
+    useCase: null,
+    useCases: () => [],
+    modelIds: () => [],
+    modelId: null,
+    aspectRatio: null,
+    submitError: null,
+    // Left undefined unless set: Vue would make an absent boolean `false`,
+    // which reads as "never disable".
+    submitDisabled: undefined,
+    regions: () => [],
+  }
+);
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  /** Everything Composer tracks. Also what retry sends, with the same payload, when `submitError` is set. */
+  submit: [payload: ComposerSubmitPayload];
+  unsupportedFile: [fileName: string];
+}>();
+
+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 }
+);
+
+// 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.
+watch(
+  () => props.autoSelectModel,
+  (on, was) => {
+    if (!on || was) return;
+    if (view.value.multiModel) props["onUpdate:modelIds"]?.([]);
+    else props["onUpdate:modelId"]?.(null);
+  }
+);
+
+function toggleModel(id: string) {
+  if (view.value.multiModel) props["onUpdate:modelIds"]?.(view.value.toggledModelIds(id));
+  else props["onUpdate:modelId"]?.(id);
+}
+
+// Grows with wrapped text from one line, instead of a fixed row count.
+const textarea = ref<HTMLTextAreaElement>();
+watch(
+  () => props.modelValue,
+  () => {
+    const el = textarea.value;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  },
+  { flush: "post", immediate: true }
+);
+
+// Enhance and undo. The prompt already holds the rewrite once `enhancing`
+// drops; the reveal is a decorative overlay painting it in, then gone.
+const originalValue = ref<string | null>(null);
+const enhancedValue = ref<string | null>(null);
+const animatingText = ref<string | null>(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;
+    // Long rewrites and reduced-motion requests appear at once.
+    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: number) => {
+      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; // for undo, before the rewrite lands
+  props.onEnhance?.(props.modelValue);
+}
+
+async function onFiles(files: FileList | null) {
+  const onAttachments = props["onUpdate:attachments"];
+  if (!files || files.length === 0 || !onAttachments) return;
+  // Edit mode works on one image: a new one replaces it, and the edit starts over.
+  const { attachments, unsupported } = await composerAttachmentsFromFiles(files, props.attachments, view.value.editing);
+  unsupported.forEach((name) => emit("unsupportedFile", name));
+  if (attachments) onAttachments(attachments);
+}
+
+function removeUseCase(useCase: ComposerUseCase) {
+  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());
+}
+</script>
+
+<template>
+  <div class="chai-composer">
+    <div v-if="attachments.length > 0" class="chai-composer__thumbnails">
+      <div v-for="a in attachments" :key="a.id" class="chai-composer__thumb">
+        <img v-if="a.kind === 'image'" class="chai-composer__thumb-img" :src="a.src" alt="" />
+        <span v-else class="chai-composer__thumb-icon"><VideocamIcon v-if="a.kind === 'video'" /><MusicNoteIcon v-else-if="a.kind === 'audio'" /><ImageIcon v-else /></span>
+        <button
+          v-if="props['onUpdate:attachments']"
+          type="button"
+          class="chai-composer__thumb-remove"
+          aria-label="Remove attachment"
+          @click="props['onUpdate:attachments']?.(attachments.filter((x) => x.id !== a.id))"
+        >
+          <CloseSymbolIcon />
+        </button>
+      </div>
+    </div>
+
+    <ul v-if="view.editing && regions.length > 0" class="chai-composer__regions" aria-label="Edit regions">
+      <li v-for="r in regions" :key="r.id">
+        <Chip
+          :label="`Region ${r.number}`"
+          :region-number="r.number"
+          :removable="Boolean(props['onUpdate:regions'])"
+          :disabled="disabled"
+          @remove="props['onUpdate:regions']?.(regions.filter((x) => x.id !== r.id))"
+        />
+      </li>
+    </ul>
+
+    <div class="chai-composer__field">
+      <textarea
+        ref="textarea"
+        :class="['chai-composer__input chai-composer__type', { 'chai-composer__input--revealing': animating }]"
+        :value="modelValue"
+        :placeholder="view.placeholder"
+        :aria-label="promptLabel ?? view.placeholder"
+        rows="1"
+        :disabled="disabled || animating"
+        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+      />
+      <!-- The Enhance reveal: decorative, so hidden from screen readers, which read the textarea's final text. -->
+      <div v-if="animating" class="chai-composer__reveal chai-composer__type" aria-hidden="true">
+        <span class="chai-composer__reveal-text">{{ animatingText!.slice(0, revealedLength) }}</span>
+      </div>
+      <!-- Optimize, or once a rewrite lands, undo it: until the prompt is edited by hand. -->
+      <button
+        v-if="onEnhance"
+        type="button"
+        :class="['chai-composer__optimize', { 'chai-composer__optimize--active': enhanceBusy }]"
+        :disabled="disabled || (isEnhanced ? false : !modelValue.trim() || enhanceBusy)"
+        :aria-label="isEnhanced ? 'Revert to original prompt' : 'Optimize prompt'"
+        :title="isEnhanced ? 'Revert to original prompt' : 'Optimize prompt'"
+        @click="onOptimizeClick"
+      >
+        <UndoIcon v-if="isEnhanced" /><OptimizeIcon v-else />
+      </button>
+    </div>
+
+    <p v-if="submitError" class="chai-composer__error" role="alert"><ErrorIcon />{{ submitError }}</p>
+
+    <div class="chai-composer__controls">
+      <div class="chai-composer__controls-start">
+        <AttachMenu
+          v-if="menuItems.length > 0"
+          :items="menuItems"
+          :images-only="view.editing"
+          :disabled="disabled"
+          @select="onAttachMenuSelect?.($event)"
+          @files="onFiles"
+        />
+
+        <Chip
+          v-for="u in view.pickedUseCases"
+          :key="u.kind"
+          :label="u.label"
+          :removable="Boolean(multiSelectUseCases ? props['onUpdate:useCases'] : onClearUseCase)"
+          :disabled="disabled"
+          @remove="removeUseCase(u)"
+        />
+
+        <!-- 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
+          v-if="view.modelSections.length > 0 && view.canPickModel"
+          v-bind="modelMenuOptions"
+          :value="view.multiModel ? view.pickedModelIds : modelId"
+          :multiple="view.multiModel"
+          :toggle-header="
+            showAutoSelectToggle
+              ? { label: 'Auto-select model', value: autoSelectModel, onChange: (v: boolean) => props['onUpdate:autoSelectModel']?.(v) }
+              : undefined
+          "
+          :trigger-label="view.modelTriggerLabel"
+          :menu-label="view.multiModel ? 'Select models' : 'Select model'"
+          :searchable="false"
+          trigger-variant="text"
+          :disabled="disabled || (autoSelectModel && !showAutoSelectToggle)"
+          :panel-width="showAutoSelectToggle ? 320 : undefined"
+          @select="toggleModel($event.id)"
+        />
+
+        <SearchMenu
+          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"
+          :trigger-label="view.selectedAspect?.label ?? 'Aspect ratio'"
+          menu-label="Aspect ratio"
+          :searchable="false"
+          trigger-variant="text"
+          :disabled="disabled"
+          @select="props['onUpdate:aspectRatio']?.($event.id)"
+        />
+      </div>
+
+      <!-- MD3's md-fab has no disabled state of its own; Chai's unfilled-until-ready look comes from `data-ready` in style.css. `label=""` keeps it a plain icon FAB. -->
+      <md-fab
+        class="chai-composer__submit"
+        size="small"
+        variant="secondary"
+        label=""
+        :data-ready="view.showStop || !view.isSubmitDisabled || undefined"
+        :data-error="Boolean(submitError) || undefined"
+        :data-stop="view.showStop || undefined"
+        :aria-label="view.showStop ? 'Stop' : submitError ? 'Retry' : 'Submit'"
+        :aria-disabled="view.showStop ? 'false' : submitting || view.isSubmitDisabled ? 'true' : 'false'"
+        @click="onSubmitClick"
+      >
+        <span slot="icon"><StopIcon v-if="view.showStop" /><RetryIcon v-else-if="submitError" /><ArrowForwardIcon v-else /></span>
+      </md-fab>
+    </div>
+  </div>
+</template>