@chai-ui/vue 0.0.0-stage → 0.7.0

package/DESIGN.md

@@ -0,0 +1,235 @@
+# CHAI UI — DESIGN.md
+
+The rules for building with `@chai-ui/react` or `@chai-ui/vue`, written for
+the people and the coding agents who integrate them. Both packages ship
+this file. It uses React's names; "In Vue" below maps them. The API reference is the JSDoc on each
+component's props and the docs site's `llms.txt`. This file covers how to
+use the pieces correctly: which component to pick, which tokens to use,
+which states you get for free, and what not to build.
+
+If this file and the code disagree, the code wins. Please report the
+mismatch.
+
+## 1. Pick the component, don't rebuild it
+
+| You need | Use | Not |
+|---|---|---|
+| A prompt box with attach, model and aspect-ratio pickers, submit | `Composer` | A hand-built textarea + button row |
+| Media (image, video, audio) in, a generation-ready prompt out | `MediaAnalyzer` + `useMediaAnalyzer` | A file input plus your own model call |
+| One prompt's generated output (image, video, audio, text) | `ResultCard` | A custom media card |
+| Editing an image: marked regions, each with its own instruction | `EditCard` + `EDIT_IMAGE_USE_CASE` + `useComposer`'s `editImage` | A canvas or box-drawing library of your own |
+| Submit → engine → result state, wired together | `useComposer` | Your own fetch/loading/error state |
+| One reasoning model shared by every component | `ChaiProvider`, `useReasoning` | A text model picked per component |
+| A switch, an option menu, a pager | `Toggle`, `SearchMenu`, `Pagination` | Another UI kit's versions inside a CHAI surface |
+
+These don't exist yet. Don't import them, and don't invent stand-ins that
+use these names: `Results`, `Compare`, `ModelPicker`,
+`ParamControls`, `Presets`, `RunSummary`, `MediaViewer`, `createHttpEngine`.
+
+## 2. Integration rules
+
+1. **Load the CSS in order:** `@chai-ui/tokens/css` first, then
+   `@chai-ui/react/style.css` (or `@chai-ui/vue/style.css`). Component
+   styles read the token variables.
+2. **Everything is controlled.** Every value comes in as a prop and every
+   change comes out as a callback (`value` / `onChange`). Keep the state in
+   your app.
+3. **Advanced selection is the builder's opt-in.** `multiSelectModels`
+   and `multiSelectUseCases` are off by default. Turn them on only where
+   comparing models or making several media types at once is the point.
+4. **A callback's presence is the opt-in.** Omit `onEnhance` and there's
+   no optimize button. Omit `onAbort` and there's no stop button. Omit
+   `moreActions` and there's no ⋯ menu. Don't pass no-op handlers just to
+   make a control appear.
+5. **API keys never reach the browser.** Engines call one same-origin
+   route, `/api/chai/*`, served by `createChaiHandler` from
+   `@chai-ui/core/server`, which adds the key. Never pass a key to
+   `createFalEngine` or `createOpenRouterEngine`. In production, set the
+   handler's `authorize` and `allowedModels`.
+6. **Media generation and reasoning are separate choices.** `engine`
+   generates media and defaults to Fal.ai. `ChaiProvider`'s
+   reasoning models power Enhance, routing and text requests. Defaults:
+   Claude Opus 5 for text and images, Gemini 3.8 Flash for video and
+   audio, on OpenRouter. They're suggestions; respect a builder's own
+   `reasoningModel`, `reasoningModelByKind` and `reasoningEngine`.
+7. **Suggest models, never require them.** With no `models`, Composer and
+   MediaAnalyzer use the suggested lists (`suggestedModels`,
+   `SUGGESTED_ANALYSIS_MODELS`), each model carrying its verified aspect
+   ratios and Fal input format. A builder's own list always wins. Don't
+   make a builder write a model list to get a working Model menu.
+8. **Only show what's real.** Show cost only when the engine reports it.
+   Don't show model rankings or leaderboard positions you can't keep up to
+   date. Don't show a control the selected model can't honor.
+
+### In Vue
+
+The same components, rules and behavior, with Vue's names:
+
+- `value` / `onChange` is `v-model`; every other `x` / `onXChange` pair is
+  `v-model:x` (`v-model:attachments`, `v-model:model-id`, `v-model:regions`, …).
+- Other callbacks are events: `@submit`, `@action`, `@enhance`, `@abort`.
+  Rule 4 holds: a control that needs a callback shows only with its
+  listener (`@enhance` for the optimize button, `@abort` for stop,
+  `@update:model-id` for the Model menu).
+- `useComposer` and `useMediaAnalyzer` are composables returning refs.
+  Pass a getter for options that change: `useComposer(() => ({ engine, editImage: image.value }))`.
+- `ChaiProvider` is a component with the same props.
+
+## 3. Material components, and where Chai uses its own
+
+Chai builds on Material Design 3's web components where they fit, and
+uses its own component where they don't. Both kinds take every color from
+Chai tokens (§4), so they look like one system.
+
+| Native Material component | Where Chai uses it |
+|---|---|
+| `<md-fab>` | The submit, retry and stop button |
+| `<md-switch>` (`Toggle`) | Auto-select model, and any switch you add |
+| `<md-checkbox>` | The checkboxes on rows in a multi-select model menu |
+| `<md-outlined-text-field>` | The search field in searchable menus |
+| `<md-focus-ring>` | The focus ring on all of the above |
+
+Chai's own components are the menus (`SearchMenu` and the attach menu),
+the use-case chips, `Pagination`, and the cards. The menus are the main
+difference, because Material has an `<md-menu>`:
+
+- **Placement.** `<md-menu>` opens as a floating popover anchored to a
+  corner of its trigger. Chai's menus open as a panel directly under their
+  trigger, inside the component, as the Figma designs show.
+- **Features `<md-menu>` doesn't have.** Chai's model menus need a search
+  field, grouped sections with headings (one per use case), a switch
+  pinned at the top (auto-select), and multi-select. `<md-menu>` closes
+  when an item is picked and has none of these.
+- **Portability.** Chai isn't tied to Material. Its own components restyle
+  entirely through tokens, which keeps the door open to other design
+  systems later.
+
+They still follow Material's conventions where they apply: a trailing
+check mark for single-select, MD3's own checkbox for multi-select,
+and Material's type scale. Each option is a plain button: reach it with
+Tab, pick it with Enter or Space; `aria-pressed` marks what's picked.
+
+## 4. Tokens
+
+All visual values come from `@chai-ui/tokens`, which builds from one JSON
+source into CSS variables, JS/TS and a Figma token set. **It is the only
+source of color:** no component contains a hard-coded color, and Material's
+colors are driven by Chai tokens, not the other way around.
+
+| Layer | Pattern | Use it for |
+|---|---|---|
+| Root palette | `--chai-color-root-{gray, green, amber, red}-*` | Nothing directly. It only feeds the layers below. `green-50` (`#009747`) is the brand green. |
+| Brand and state | `--chai-color-semantic-{accent, accent-hover, accent-subtle, accent-soft, accent-text, text-on-accent, warning, warning-subtle, danger, danger-subtle}` | The brand green and state colors. Use `accent` for fills, icons and focus rings, and `accent-text` for green text (`accent` is only 3.8:1 on white). |
+| Controls | `--chai-color-semantic-control-{surface, surface-hover, surface-raised, track, divider, border, border-soft, border-faint, text-strong, text, text-muted}` | The pure grays the components are built from. |
+| Overlays and media | `--chai-color-semantic-{overlay, on-overlay, scrim, media-backdrop}` | Buttons and backdrops on top of images and video |
+| Space | `--chai-space-0` … `--chai-space-8` (0, 4, 8, 12, 16, 24, 32, 48, 64px) | Padding, gaps, margins |
+| Radius | `--chai-radius-{sm, md, lg, full}` | Corners |
+| Type | `--chai-type-{family, size, weight, leading, tracking}-*` | Text |
+| Motion | `--chai-motion-duration-{fast, base, slow, steep}`, `--chai-motion-easing-{standard, growth}` | Transitions |
+| Effects | `--chai-shadow-menu`, `--chai-gradient-ai` | Floating menus, and the AI shimmer after prompt optimization |
+| Component | `--chai-composer-{bg, border, hover, placeholder, text}`, `--chai-media-analyzer-{bg, border, hover, text}` | Restyling that one component. Each defaults to a control role. |
+| Material | `--md-sys-color-*` | Nothing in your code. They exist so the Material switch, button and text field follow Chai tokens. |
+
+Rules:
+
+- **Never invent a token name.** If it isn't listed above or in
+  `@chai-ui/tokens/css`, it doesn't exist, and `var()` on an unknown name
+  silently falls back to nothing.
+- **Never put a literal color on a component.** Use a semantic role. If a
+  design needs a color that has no role yet, add the role to
+  `packages/tokens/src/tokens.json` instead of writing the hex.
+- **Restyle by overriding variables, not selectors.** Override the
+  semantic roles on `:root` to restyle everything, including the Material
+  components, or set a component variable like `--chai-composer-bg` on
+  `.chai-composer` to restyle one component. Don't target internal
+  `.chai-*__*` class names. Those are implementation details and can
+  change without notice.
+
+## 5. AI states you get for free — use them, don't replace them
+
+| Situation | Built-in behavior | Your part |
+|---|---|---|
+| Generation failed | `Composer`'s submit button becomes a retry action and an inline message appears (`submitError`) | Set `submitError`, and clear it on success or when the prompt changes. **No error dialogs or toasts for a failed generation.** |
+| Request in flight | Submit becomes a stop button (`submitting` + `onAbort`) | Pass `useComposer`'s `cancel` as `onAbort`; results show "Stopped" |
+| Prompt too thin | Optimize button rewrites the prompt, then offers undo (`onEnhance`) | Run the rewrite and call `onChange` with the new text |
+| No use case picked | The prompt is a text request and gets a text reply | Set `defaultUseCase` if your app's default should be image or video |
+| Result pending | `ResultCard` shows a spinner for `queued` / `running` | Nothing. `useComposer` sets the status. |
+| Long text answer | `ResultCard` keeps line breaks, scrolls past 400px with a visible scrollbar, and follows streaming text unless the person scrolls up | Change the height with `textMaxHeight` if needed |
+| Text streaming in | `ResultCard` renders partial text with a caret, marked `aria-busy` | Use an engine that calls `onText` (OpenRouter does, and so does the mock text engine). `useComposer` wires it. |
+| Result failed | `ResultCard` shows the error message in place | Nothing |
+| Image edit in progress | `EditCard` shows a spinner over the image being edited, then the edit as a new version | Nothing. `useComposer` adds the version. |
+| Edit model's region limit | `EditCard` disables "New region" at `maxRegions` | Pass the chosen model's `maxRegions` |
+| Try again | `ResultCard`'s retry fires `onAction("retry", result)` | Re-run the **same** model call, not a different one |
+| Feedback | Like/dislike fire `onAction`, and the displayed vote comes from `getVote` | Store votes yourself |
+| Details | The flip side shows prompt, model, tokens, cost and duration | Supply `models` so ids resolve to labels |
+| Quality checks | Each result's `evaluations` render on the flip side: green with a check if it passed, red with a cross if it failed | Run your checks in your backend proxy and add a top-level `evaluations: [{ id, label, passed }]` field to the JSON it returns (for a stream, send it as its own `data:` chunk). The built-in Fal and OpenRouter engines read that field, a custom engine returns it from `generate`, and `useComposer` puts it on the matching `Result`. CHAI never runs or scores anything itself, and there are no confidence scores. |
+
+`ResultCard` is where a run ends. Don't add a "use as input" action that
+feeds a result back into a `Composer`. Chaining steps like that is
+deliberately out of scope. The one exception is `EditCard`: an edit's result
+is a new version of the same image, and the next edit applies to the version
+showing.
+
+## 6. Accessibility
+
+- Every icon-only button in CHAI has an accessible name. In `moreActions`,
+  `label` is the item's visible and announced text, so pass an `icon` that
+  is `aria-hidden`.
+- Animations (the optimize reveal, the streaming caret) are disabled under
+  `prefers-reduced-motion`. Your own motion around CHAI should do the same.
+- **Focus rings are on by default, as WCAG 2.2 AA requires** (2.4.7 Focus
+  Visible). Every control shows a ring when it
+  has keyboard focus: buttons and menu items use the browser's own ring,
+  MD3 elements use `<md-focus-ring>`, and the Composer rings its whole pill
+  while the prompt field is focused. Hover fills don't replace these,
+  because hover never appears for someone navigating with a keyboard.
+- **To hide them**, set `data-chai-focus-ring="hidden"` on any ancestor.
+  Every CHAI component inside it stops drawing focus rings, and your own
+  controls under the same ancestor are unaffected. Remove the attribute to
+  turn them back on:
+
+  ```tsx
+  <div data-chai-focus-ring={showFocusRings ? undefined : "hidden"}>…</div>
+  // or page-wide:
+  document.documentElement.dataset.chaiFocusRing = "hidden";
+  ```
+
+  **Hiding focus rings breaks WCAG 2.2 AA (and 2.1 AA) compliance.** Keyboard users
+  lose any indication of where they are. Only hide them on showcase or
+  preview surfaces, like the docs site's component previews, not in a
+  production app. Don't set `tabIndex={-1}` on CHAI controls either.
+- Streaming text is `aria-busy` until it settles, so screen readers read
+  the finished text once instead of every chunk.
+- **Supports WCAG 2.2 AA.** Chai's components are built to support WCAG 2.2 AA and are tested
+  against it with automated checks: axe (WCAG 2.0, 2.1 and 2.2, levels A
+  and AA) on every component state in the test suite, plus keyboard and
+  focus tests in a browser. They haven't been tested by hand with a
+  screen reader, so this is support, not a certification. Compliance is
+  judged for a whole app, so test yours, including with a screen reader.
+
+  What that covers: contrast, focus rings, a name for every control
+  (`Composer`'s `promptLabel`, `Toggle`'s `ariaLabel`), alt text for
+  generated images (`ResultCard`'s `altText`, default the prompt), 24px
+  targets, and keyboard use: video play/pause (Tab to the video, Space)
+  and seeking (a slider: arrow keys, Home, End), paging (`Pagination` is
+  one slider rather than a button per dot, so the dots can sit 16px apart:
+  arrow keys, Home, End), the turned-away side of a
+  flipped card is `inert` and focus follows the flip, and the expanded
+  view is a dialog (focus inside, Escape closes, focus returns to Expand).
+
+## 7. What's enforced
+
+Inside this repo, `pnpm lint` runs `scripts/lint-tokens.mjs` over the
+packages' CSS:
+
+- It fails on `var(--…)` names that don't exist (invented tokens).
+- It fails on any hard-coded color, custom properties included.
+- It fails on direct use of Material's `--md-sys-color-*` roles, which
+  must go through the Chai token they map to.
+
+TypeScript enforces the component APIs: controlled props, typed submit
+payloads, and typed engine and result shapes. `ResultCard`'s `onAction`
+is a plain `string` so it can carry your own `moreActions` ids, which
+means a misspelled action name isn't caught. Nothing checks your
+app's own CSS or markup yet, so sections 1–6 above are guidance there, not
+guarantees.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kazarazat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,123 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://chai-ui.com"><img src="https://chai-ui.com/chai-wordmark.svg" alt="Chai UI" width="220" /></a>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@chai-ui/vue"><img src="https://img.shields.io/npm/v/@chai-ui/vue?label=npm&color=009747" alt="npm version" /></a>
+  <a href="https://github.com/kazarazat/chai-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-009747" alt="MIT license" /></a>
+  <a href="https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml"><img src="https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
+  <a href="https://codecov.io/gh/kazarazat/chai-ui"><img src="https://codecov.io/gh/kazarazat/chai-ui/graph/badge.svg" alt="Coverage" /></a>
+  <a href="https://chai-ui.com/docs/"><img src="https://img.shields.io/badge/docs-chai--ui.com-009747" alt="Docs" /></a>
+</p>
+
+# @chai-ui/vue
+
+Vue components for the input and output surfaces of generative-media
+apps: a prompt composer, a media-to-prompt analyzer, a result card and an
+edit card, with the AI work built in and wired to Fal.ai, OpenRouter or
+your own engine. Everything is controlled: you own the state with
+`v-model`, and the components render it.
+
+These are the same components as [`@chai-ui/react`](https://www.npmjs.com/package/@chai-ui/react),
+with the same behavior. Both packages are thin layers over
+`@chai-ui/core` and run one shared test suite, including the WCAG 2.2 AA
+checks (axe, keyboard and focus).
+
+Building with it, or pointing a coding agent at it? Read
+[`DESIGN.md`](./DESIGN.md) (shipped in the package) for the usage rules,
+and the docs site's [`llms.txt`](https://chai-ui.com/docs/llms.txt) for
+the API. The code boxes on [chai-ui.com/docs](https://chai-ui.com/docs)
+switch between React and Vue.
+
+## Install
+
+```sh
+pnpm add @chai-ui/vue @chai-ui/core @chai-ui/tokens
+```
+
+Vue 3.5 or later, Nuxt included. No Chai-specific build setup.
+
+```ts
+// main.ts: tokens first, then the component styles that read them
+import "@chai-ui/tokens/css";
+import "@chai-ui/vue/style.css";
+```
+
+## Quick start
+
+```vue
+<!-- App.vue -->
+<template>
+  <ChaiProvider><Create /></ChaiProvider>
+</template>
+
+<!-- Create.vue -->
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Composer, ResultCard, createFalEngine, useComposer } from "@chai-ui/vue";
+
+const engine = createFalEngine();
+const value = ref("");
+const { run, submit, cancel, enhance, enhancing } = useComposer({ engine });
+const busy = computed(() => run.value?.results.some((r) => r.status === "queued" || r.status === "running") ?? false);
+
+async function onEnhance(prompt: string) {
+  value.value = await enhance.value!(prompt);
+}
+</script>
+
+<template>
+  <Composer v-model="value" :submitting="busy" :enhancing="enhancing" @submit="submit" @abort="cancel" @enhance="onEnhance" />
+  <ResultCard v-if="run" :results="run.results" :prompt="run.request.prompt" @action="() => {}" />
+</template>
+```
+
+To try it before setting up a provider, leave out `engine` and
+`ChaiProvider`: everything then runs on built-in mocks, with no network
+calls and no keys.
+
+## The Vue names
+
+The props are React's, with Vue's conventions:
+
+| React | Vue |
+|---|---|
+| `value` + `onChange` | `v-model` |
+| `x` + `onXChange` | `v-model:x`, e.g. `v-model:attachments`, `v-model:model-id`, `v-model:regions` |
+| `onSubmit`, `onAction`, `onEnhance`, `onAbort` | `@submit`, `@action`, `@enhance`, `@abort` |
+| `useComposer` / `useMediaAnalyzer` hooks | composables returning refs; pass a getter for options that change |
+| `<EditCard {...edit} />` | `edit`'s fields one by one, with `@update:active-version` and `@update:regions` |
+
+Some controls show only with a listener, as in React: the optimize button
+with `@enhance`, stop with `@abort`, the Model menu with `@update:model-id`.
+
+## What's in the package
+
+- **`Composer`**: prompt, attachments, use cases, model and aspect-ratio
+  menus with suggested models, prompt optimization, auto-select routing,
+  stop and retry.
+- **`MediaAnalyzer`** + **`useMediaAnalyzer`**: media in, a
+  generation-ready prompt out.
+- **`ResultCard`**: one prompt's results, paged, with votes, retry,
+  download, share, details and streaming text.
+- **`EditCard`**: marked regions with their own instructions, and each
+  edit as a new version.
+- **`useComposer`**, **`ChaiProvider`**, and the `Toggle`, `SearchMenu`
+  and `Pagination` building blocks.
+- The engines and types from `@chai-ui/core`, re-exported.
+
+## Your API keys stay on your server
+
+The engines call one route on your server, which adds the key. In Nuxt:
+
+```ts
+// server/api/chai/[...path].ts
+import { createChaiHandler } from "@chai-ui/core/server";
+
+const chai = createChaiHandler();
+export default defineEventHandler((event) => chai.handle(toWebRequest(event)));
+```
+
+Then set `FAL_KEY` and `OPENROUTER_API_KEY` on your server. Other servers,
+and `authorize` and `allowedModels` for production, are in the
+[`@chai-ui/core` README](https://github.com/kazarazat/chai-ui/tree/main/packages/core#the-server-route-chai-uicoreserver).

package/dist/ChaiProvider.vue.d.ts

@@ -0,0 +1,24 @@
+import { type GenerationEngine, type MediaKind } from "@chai-ui/core";
+/** The reasoning engine and models every CHAI component inside shares. Same props as React's `ChaiProvider`. */
+type __VLS_Props = {
+    /** 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;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ChaiProvider.vue.d.ts.map

package/dist/ChaiProvider.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChaiProvider.vue.d.ts","sourceRoot":"","sources":["../src/ChaiProvider.vue"],"names":[],"mappings":"AA8BA,OAAO,EAAuC,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAG3G,gHAAgH;AAChH,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oGAAoG;IACpG,oBAAoB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1D,4GAA4G;IAC5G,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAwBF,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAC/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/Composer.vue.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 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 { type ComposerAttachment, type ComposerAttachMenuAction, type ComposerSubmitPayload, type ComposerUseCase, type EditRegion, type MediaKind, type ModelOption, type ParameterOption } from "@chai-ui/core";
+type __VLS_Props = {
+    /** 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;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: ComposerSubmitPayload) => any;
+    "update:modelValue": (value: string) => any;
+    unsupportedFile: (fileName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: ComposerSubmitPayload) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onUnsupportedFile?: ((fileName: string) => any) | undefined;
+}>, {
+    attachments: ComposerAttachment[];
+    useCase: ComposerUseCase | null;
+    useCases: ComposerUseCase[];
+    modelIds: string[];
+    modelId: string | null;
+    aspectRatio: string | null;
+    submitError: string | null;
+    submitDisabled: boolean;
+    regions: EditRegion[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Composer.vue.d.ts.map

package/dist/Composer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.vue.d.ts","sourceRoot":"","sources":["../src/Composer.vue"],"names":[],"mappings":"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"}

package/dist/EditCard.vue.d.ts

@@ -0,0 +1,38 @@
+import { type EditRegion, type EditVersion } from "@chai-ui/core";
+type __VLS_Props = {
+    /** The original image first, then each edit. Paged with the dots in the card's bottom row. */
+    versions: EditVersion[];
+    activeVersion: number;
+    /** The new regions on the image, each committed with its instruction. Share them with the Composer's `regions`. */
+    regions: EditRegion[];
+    /** The most regions the chosen model takes (`ModelOption.maxRegions`). "New region" is disabled at this many. */
+    maxRegions?: number;
+    /** A fixed starting width in px, fitted within `maxWidth` and `maxHeight`. */
+    width?: number;
+    /** Sizes the card from the image's own pixel width: `0.3` makes it 30% as wide as the image. */
+    scale?: number;
+    /** The widest the card gets, in px. With no `width` or `scale`, the card fills `maxWidth` × `maxHeight`, keeping the image's shape. */
+    maxWidth?: number;
+    /** The tallest the card gets, in px. */
+    maxHeight?: number;
+    /** Alt text for the image. */
+    alt?: string;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeVersion": (index: number) => any;
+    "update:regions": (next: EditRegion[]) => any;
+    action: (action: "download" | "share", version: EditVersion) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeVersion"?: ((index: number) => any) | undefined;
+    "onUpdate:regions"?: ((next: EditRegion[]) => any) | undefined;
+    onAction?: ((action: "download" | "share", version: EditVersion) => any) | undefined;
+}>, {
+    alt: string;
+    maxRegions: number;
+    maxWidth: number;
+    maxHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=EditCard.vue.d.ts.map

package/dist/EditCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditCard.vue.d.ts","sourceRoot":"","sources":["../src/EditCard.vue"],"names":[],"mappings":"AA2hBA,OAAO,EAiBL,KAAK,UAAU,EACf,KAAK,WAAW,EAKjB,MAAM,eAAe,CAAC;AAoBvB,KAAK,WAAW,GAAG;IACf,8FAA8F;IAC9F,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,mHAAmH;IACnH,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,iHAAiH;IACjH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uIAAuI;IACvI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA60BJ,QAAA,MAAM,YAAY;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/MediaAnalyzer.vue.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 { type MediaAnalysisPromptLength, type MediaAnalyzerAttachment, type MediaAnalyzerSubmitPayload, type MediaKind, type ModelOption } from "@chai-ui/core";
+type __VLS_Props = {
+    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;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: MediaAnalyzerSubmitPayload) => any;
+    unsupportedFile: (fileName: string) => any;
+    "update:attachments": (next: MediaAnalyzerAttachment[]) => any;
+    "update:modelId": (id: string | null) => any;
+    "update:autoSelectModel": (next: boolean) => any;
+    "update:promptLength": (value: MediaAnalysisPromptLength) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: MediaAnalyzerSubmitPayload) => any) | undefined;
+    onUnsupportedFile?: ((fileName: string) => any) | undefined;
+    "onUpdate:attachments"?: ((next: MediaAnalyzerAttachment[]) => any) | undefined;
+    "onUpdate:modelId"?: ((id: string | null) => any) | undefined;
+    "onUpdate:autoSelectModel"?: ((next: boolean) => any) | undefined;
+    "onUpdate:promptLength"?: ((value: MediaAnalysisPromptLength) => any) | undefined;
+}>, {
+    modelsByKind: Partial<Record<MediaKind, ModelOption[]>>;
+    models: ModelOption[];
+    maxAttachmentsByKind: Record<MediaKind, number>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MediaAnalyzer.vue.d.ts.map

package/dist/MediaAnalyzer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaAnalyzer.vue.d.ts","sourceRoot":"","sources":["../src/MediaAnalyzer.vue"],"names":[],"mappings":"AA2NA;;;;;;GAMG;AACH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EASL,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAIvB,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,uBAAuB,EAAE,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACjD,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,uHAAuH;IACvH,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IACzD,gHAAgH;IAChH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,eAAe,EAAE,OAAO,CAAC;IACzB,0GAA0G;IAC1G,YAAY,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC/C,mBAAmB,EAAE;QAAE,KAAK,EAAE,yBAAyB,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,mJAAmJ;IACnJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAmaJ,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/PageSlide.vue.d.ts

@@ -0,0 +1,23 @@
+import type { Slide } from "./page-slide.js";
+type __VLS_Props = {
+    slide: Slide | null;
+    pageClass?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PageSlide.vue.d.ts.map

package/dist/PageSlide.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSlide.vue.d.ts","sourceRoot":"","sources":["../src/PageSlide.vue"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA+C/D,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}