@mp-consulting/homebridge-ui-kit 1.2.2 → 1.3.0

package/README.md

@@ -9,23 +9,41 @@ Provides shared CSS tokens, Bootstrap 5 overrides, and vanilla JS UI components
 | File | Description |
 |------|-------------|
 | `dist/kit.css` | CSS tokens, Bootstrap overrides, shared component styles and the Assistant (AI) components |
-| `dist/kit.js` | Vanilla JS helpers exposed as `window.MpKit` (including `MpKit.ai`) |
+| `dist/kit.js` | Vanilla JS helpers exposed as `window.MpKit` (including `MpKit.ai`) — a classic script |
 | `dist/ai.css` | Standalone build: tokens + Assistant components only, no Bootstrap overrides (for non-plugin apps such as the Glass UI) |
+| `dist/kit.min.css`, `dist/kit.min.js`, `dist/ai.min.css` | Minified builds of the above, each with a `.map` source map |
+| `dist/theme-boot.js` | ~0.4 kB `<head>` script that applies the light/dark theme before first paint (see [Theme](#theme)) |
+| `dist/kit.d.ts`, `dist/kit.d.mts` | TypeScript declarations for the global and the ES module |
+| `dist/kit.mjs` | ES module: `MpKit` (default export) plus named exports (`escapeHtml`, `markdown`, `diffLines`, `StatusBadge`, …); it does not set a global |
 
-Package entry points: `@mp-consulting/homebridge-ui-kit/dist/*` (and the shortcuts `/kit.css`, `/kit.js`, `/ai.css`).
+Package entry points: `@mp-consulting/homebridge-ui-kit` (the ES module), `@mp-consulting/homebridge-ui-kit/dist/*`
+and the shortcuts `/kit.css`, `/kit.min.css`, `/kit.js`, `/kit.min.js`, `/kit.mjs`, `/ai.css`, `/ai.min.css`.
+
+```js
+// In a bundled app (e.g. the Glass UI) — pure helpers, no global, tree-shakeable
+import { markdown, diffLines, escapeHtml } from '@mp-consulting/homebridge-ui-kit';
+```
 
 ## Integration
 
-### 1. Install as a dev dependency
+> **Serve everything from the plugin.** The Homebridge UI serves a plugin's custom UI with a
+> content-security policy that only allows **same-origin** scripts and styles
+> (`script-src 'self' 'unsafe-inline'`, `style-src 'self' 'unsafe-inline'`), so CDN `<script>` /
+> `<link>` tags are blocked (a plugin's `customUiCspDomains` can only widen `script-src`, never
+> `style-src`). Install the kit *and* Bootstrap as dev dependencies and let `mp-ui-kit-copy --vendor`
+> copy them into `homebridge-ui/public/lib/`, then reference the local `lib/` paths as shown below.
+
+### 1. Install as dev dependencies
 
 ```bash
-npm install --save-dev @mp-consulting/homebridge-ui-kit
+npm install --save-dev @mp-consulting/homebridge-ui-kit bootstrap@5.3 bootstrap-icons@1.11
 ```
 
 ### 2. Add the copy script to `package.json`
 
-The package ships a zero-dependency CLI, `mp-ui-kit-copy`, that copies `dist/` into
-`homebridge-ui/public/lib/` of the plugin it runs in:
+The package ships a zero-dependency CLI, `mp-ui-kit-copy`, that copies the kit's browser files into
+`homebridge-ui/public/lib/` of the plugin it runs in. With `--vendor` it also copies Bootstrap and
+Bootstrap Icons from your `node_modules`, so the UI needs nothing from a CDN:
 
 ```json
 {
@@ -38,19 +56,27 @@ The package ships a zero-dependency CLI, `mp-ui-kit-copy`, that copies `dist/` i
 
 | Option | Effect |
 |--------|--------|
-| *(none)* | Copies `kit.css`, `kit.js` and `ai.css` into `homebridge-ui/public/lib/` |
+| *(none)* | Copies the kit's browser files (`kit.css`, `kit.js`, `ai.css`, their `.min` variants, `kit.mjs`, `theme-boot.js`) into `homebridge-ui/public/lib/`. Source maps and `.d.ts` files are not copied, and the `sourceMappingURL` comments are stripped |
 | `--dest <dir>` | Copies into `<dir>` instead (relative to the current directory) |
+| `--only <files>` | Copies only these dist files (comma-separated, repeatable), e.g. `--only kit.min.css,kit.min.js,theme-boot.js` |
 | `--vendor` | Also copies `bootstrap.min.css`, `bootstrap.bundle.min.js`, `bootstrap-icons.min.css` and `fonts/bootstrap-icons.woff(2)` from the plugin's own `node_modules` (packages that are not installed are skipped) and strips their `sourceMappingURL` comments, producing the same `lib/` layout as the plugins' previous `copy:ui-assets` scripts |
 
+> **Load `kit.css` *or* `ai.css`, never both.** `kit.css` already contains everything in `ai.css`
+> (tokens + Assistant components); loading both duplicates ~20 kB of CSS and can reorder overrides.
+> Plugin UIs load `kit.css`; `ai.css` is for apps that do not use the plugin kit (the Glass UI).
+> The CLI warns when an `.html` page next to the destination folder links both.
+
 Without the CLI, the equivalent is:
 
 ```bash
-mkdir -p homebridge-ui/public/lib && cp node_modules/@mp-consulting/homebridge-ui-kit/dist/* homebridge-ui/public/lib/
+mkdir -p homebridge-ui/public/lib && cp node_modules/@mp-consulting/homebridge-ui-kit/dist/*.{css,js} homebridge-ui/public/lib/
 ```
 
 ### 3. Reference in `index.html`
 
-The plugin's `homebridge-ui/public/index.html` must be a full HTML document. Load Bootstrap 5.3 (from CDN as below, or `lib/bootstrap.min.css` when you use `--vendor`), then `lib/kit.css` and your styles in `<head>`, and Bootstrap JS + `kit.js` + your app script at the end of `<body>`:
+The plugin's `homebridge-ui/public/index.html` must be a full HTML document. Load Bootstrap, then
+`lib/kit.css` and your styles in `<head>`, and Bootstrap JS + `kit.js` + your app script at the end
+of `<body>` — all from `lib/`:
 
 ```html
 <!DOCTYPE html>
@@ -58,45 +84,62 @@ The plugin's `homebridge-ui/public/index.html` must be a full HTML document. Loa
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>
-    (function() {
-      try {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.documentElement.dataset.bsTheme = 'dark';
-        }
-      } catch(e) {}
-    })();
-  </script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous">
+  <script src="lib/theme-boot.js"></script>
+  <link rel="stylesheet" href="lib/bootstrap.min.css">
+  <link rel="stylesheet" href="lib/bootstrap-icons.min.css">
   <link rel="stylesheet" href="lib/kit.css">
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <!-- your UI here -->
 
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  <script src="lib/bootstrap.bundle.min.js"></script>
   <script src="lib/kit.js"></script>
   <script src="app.js"></script>
 </body>
 </html>
 ```
 
-The `integrity` hashes pin the exact CDN files; update them if you change a version (jsDelivr shows the SRI hash for each file).
+> **Outside Homebridge** (a standalone page or a prototype without that CSP) you can load Bootstrap
+> from a CDN instead. Pin the files with SRI hashes, and update them if you change a version
+> (jsDelivr shows the hash for each file):
+>
+> ```html
+> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous">
+> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+> ```
+
+#### Theme
 
-The early inline script applies `data-bs-theme="dark"` from the system preference before any CSS loads, preventing a flash of wrong theme. In your app script, also apply the Homebridge user's saved theme setting:
+`lib/theme-boot.js` is a tiny, same-origin script (inline scripts are not needed) that sets
+`data-bs-theme` (and the `.mp-theme-dark` class) on `<html>` before the stylesheets paint, from the
+preference remembered by `MpKit.Theme` or else the system preference — no flash of the wrong theme.
+Then, in your app script, let the kit apply the Homebridge user's setting and follow changes:
 
 ```js
-try {
-  const settings = await homebridge.getUserSettings?.();
-  if (settings?.theme === 'dark') {
-    document.documentElement.dataset.bsTheme = 'dark';
-  } else if (settings?.theme === 'light') {
-    document.documentElement.dataset.bsTheme = 'light';
-  }
-} catch (e) {}
+const theme = MpKit.Theme.init();   // system preference now; Homebridge setting when it arrives
+await theme.ready;                  // optional: resolves with 'light' | 'dark'
 ```
 
+`MpKit.Theme.init(opts)` reads `homebridge.getUserSettings()` (`colorScheme`/`theme`: `light`,
+`dark` or `auto`) and falls back to `homebridge.userCurrentLightingMode()`; with `auto` (or outside
+Homebridge) it follows `prefers-color-scheme` live through a `matchMedia` listener. It remembers the
+preference in `localStorage` (`mp-kit-theme`) for `theme-boot.js`.
+
+| Option | Default | Effect |
+|--------|---------|--------|
+| `target` | `<html>` | Element that gets `data-bs-theme` / `.mp-theme-dark` |
+| `theme` | — | Force `'light'`, `'dark'` or `'auto'` and skip the Homebridge lookup |
+| `homebridge` | `true` | `false` skips the Homebridge lookup |
+| `attribute` / `className` | `true` | Set `data-bs-theme` / toggle `.mp-theme-dark` |
+| `storageKey` | `'mp-kit-theme'` | `localStorage` key (`false` disables it) |
+| `onChange(resolved, preference)` | — | Called when the resolved theme changes |
+
+The controller has `ready`, `preference()`, `resolved()`, `set('light' | 'dark' | 'auto')` and
+`destroy()`. Pure helpers: `MpKit.Theme.resolve(preference, systemDark)`, `.normalize(value)`,
+`.fromSettings(settings)` and `.apply(resolved, opts)`.
+
 ### 4. Update `.gitignore`
 
 ```gitignore
@@ -126,6 +169,21 @@ export default tseslint.config(
 );
 ```
 
+### 6. TypeScript (optional)
+
+The package ships declarations for both builds. For the classic script (`lib/kit.js`), add a
+reference once (e.g. in a `globals.d.ts`) to type the `MpKit` global and `window.MpKit`:
+
+```ts
+/// <reference types="@mp-consulting/homebridge-ui-kit/kit.js" />
+// or: import type {} from '@mp-consulting/homebridge-ui-kit/kit.js';
+```
+
+The ES module entry is typed automatically (`import { markdown } from '@mp-consulting/homebridge-ui-kit'`).
+Option and handle types are exported too, e.g. `import type { AiRequestOptions, ThemeController,
+DeviceItem } from '@mp-consulting/homebridge-ui-kit'`. In JavaScript files, `// @ts-check` plus the
+reference above gives editor completion for every helper.
+
 ## MpKit API
 
 ```js
@@ -141,8 +199,32 @@ MpKit.EmptyState.render({ iconClass, title, hint })
 // Loading placeholder
 MpKit.Loading.render('Loading...')
 
-// View switching (.mp-view elements)
+// View switching (.mp-view elements). When switching from another view, focus
+// moves to the new view's heading (or [data-mp-focus], or the view) and its
+// aria-label / heading is announced politely. Returns the shown element.
 MpKit.View.show('viewId')
+MpKit.View.show('viewId', { focus: false, announce: 'Custom message' })
+
+// Accessible tabs for a .mp-tabs nav: roles, aria-selected, roving tabindex,
+// Arrow keys / Home / End (mirrored in RTL). Panels come from data-mp-view
+// (an .mp-view id), aria-controls, data-bs-target or href="#id".
+const tabs = MpKit.Tabs.init('#tabs', { activation: 'auto', onChange: (tab, index, panel) => {} });
+tabs.select(1);
+
+// Toasts: Homebridge's own toasts inside the plugin UI, a Bootstrap-style
+// fallback (.mp-toast, escaped text, role="status"/"alert") elsewhere
+MpKit.Toast.success('Config saved');            // also .error / .warning / .info
+MpKit.Toast.error('Login failed', 'Account');   // optional title
+MpKit.Toast.info('Local only', { title, duration: 0, local: true }); // 0 = until closed
+
+// Accessible confirmation dialog → Promise<boolean> (Escape/backdrop = false;
+// focus is trapped and restored; the danger variant focuses Cancel first)
+if (await MpKit.confirm({ title: 'Remove device?', message: 'This cannot be undone.',
+  confirmLabel: 'Remove', danger: true })) { /* … */ }
+
+// Screen-reader announcement through a shared, visually hidden live region
+MpKit.announce('Settings saved');          // polite
+MpKit.announce('Connection lost', 'assertive');
 
 // Support footer (only http/https URLs are rendered; icons are inline SVG,
 // so the Bootstrap Icons font is not required)
@@ -152,9 +234,110 @@ MpKit.Footer.render({ github, npm, changelog, target: '.mp-footer' })
 MpKit.escapeHtml(device.name)
 ```
 
+### Forms
+
+```js
+// Labelled Bootstrap controls (escaped; help/error wired with aria-describedby)
+form.innerHTML = MpKit.Form.field({ name: 'host', label: 'Host', help: 'IP or hostname', required: true })
+  + MpKit.Form.field({ name: 'pollInterval', label: 'Poll interval (s)', type: 'number', min: 10, value: 30 })
+  + MpKit.Form.field({ name: 'mode', label: 'Mode', type: 'select', options: ['cloud', 'lan'], value: 'lan' })
+  + MpKit.Form.field({ name: 'debug', label: 'Debug logging', type: 'switch' })
+  // Secret with Show/Hide (aria-pressed) and Copy buttons
+  + MpKit.Form.secret({ name: 'auth.token', label: 'API token', value: token });
+
+// Copy button for literal text or another element's value/text
+MpKit.CopyButton.render({ text: code, label: 'Copy code' });
+MpKit.CopyButton.render({ target: '#deviceId', size: 'sm' });
+await MpKit.copy('text');           // → true/false (Clipboard API, execCommand fallback)
+
+// Read / write named controls (dotted names nest: "auth.token" → { auth: { token } })
+MpKit.Form.fill(form, config);
+const values = MpKit.Form.values(form);
+
+// Dirty tracking + sticky Save bar → homebridge.updatePluginConfig + savePluginConfig
+const tracker = MpKit.Form.track(form, {
+  // optional: build the config blocks (default: merge values into the first block)
+  toConfig: (values, blocks) => [{ ...blocks[0], ...values, platform: 'MyPlatform' }],
+  // persist: false → only updatePluginConfig (the user clicks Homebridge's Save)
+});
+tracker.isDirty(); tracker.save(); tracker.discard(); tracker.reset(); tracker.destroy();
+```
+
+The copy and reveal buttons work through document-level delegated listeners the kit installs once,
+so the HTML strings need no extra wiring. Saving shows `MpKit.Toast` feedback (`toast: false` turns
+it off), re-enables the bar on failure and keeps the form dirty. Outside Homebridge (and without a
+custom `save(values)`), saving only resets the dirty state and resolves `false`.
+
+### Device lists, skeletons and logs
+
+```js
+// Searchable device list with loading (skeleton), empty and no-results states.
+const list = MpKit.DeviceList.render('#devices', {
+  loading: true,                         // skeleton cards + aria-busy until setItems()
+  label: 'Devices',                      // list name; search label "Search devices"
+  empty: { title: 'No devices found', hint: 'Click Discover to scan your network' },
+  onActivate: (device, index) => openDevice(device), // cards become role="button" (Enter/Space)
+  // renderItem: (device) => `<div class="card mp-device-card" role="button" tabindex="0">…</div>`,
+  // keys: ['name', 'subtitle', 'id'], filter: (device, query) => …, search: false,
+});
+list.setItems([{ id, name, subtitle: '192.168.1.40', status: 'online', iconClass: 'bi bi-lightbulb' }]);
+list.setQuery('lamp'); list.setLoading(true);
+
+// Shimmer placeholders (static with prefers-reduced-motion)
+el.innerHTML = MpKit.Skeleton.render({ lines: 3, avatar: true });
+
+// Plain-text log: ANSI codes stripped, capped, auto-scrolls unless the user
+// scrolled up (then shows "Jump to latest"); role="log", keyboard scrollable.
+const log = MpKit.LogViewer.create('#log', { maxLines: 1000, label: 'Plugin log' });
+log.append('\u001b[32m[info]\u001b[0m Connected\nSecond line');
+MpKit.stripAnsi(text);
+```
+
+Default device cards show `name` (or `displayName`), `subtitle`, `iconClass` and a `status` badge
+(`online` / `offline` / `checking` / `disabled`). Any `.mp-device-card[role="button"]` on the page —
+yours included — is activated by Enter and Space. The log's live region is off by default
+(a busy log would flood screen readers); pass `live: 'polite'` for low-volume logs.
+
+### Pairing and sign-in
+
+```js
+// HomeKit setup code: XXX-XX-XXX, read digit by digit by screen readers, with
+// a Copy button. The kit does not generate QR codes — pass an image or SVG.
+el.innerHTML = MpKit.Pairing.pin({ pin: '03145154', qrSrc: 'qr.png' }); // http(s), path or data:image/*
+MpKit.Pairing.renderPin(el, { pin, qr: svgElementFromYourServer });       // or mount an <svg>/<img>
+MpKit.Pairing.formatPin('03145154');                                      // '031-45-154'
+
+// OAuth device-code step card: open URL, code with Copy, polling state, success/error
+const signIn = MpKit.Auth.deviceCode('#signin', {
+  url: res.verificationUri, code: res.userCode, expiresIn: res.expiresIn,
+  poll: () => homebridge.request('/auth/poll'),  // true | { done } | { error } | { interval }
+  interval: 5000,
+  onSuccess: () => MpKit.Steps /* … */, onRetry: () => startAgain(),
+});
+signIn.setState('error', 'Access denied');       // or drive the state yourself (no poll)
+
+// Multi-step wizard: .mp-steps progress (aria-current="step") + one visible panel;
+// focus moves to the new panel's heading and "Step 2 of 3: Devices" is announced.
+const wizard = MpKit.Steps.create('#steps', {
+  steps: [{ title: 'Account', panel: '#step-login' }, { title: 'Devices', panel: '#step-devices' },
+    { title: 'Done', panel: '#step-done' }],
+  onChange: (index, step) => {},
+});
+wizard.next(); wizard.prev(); wizard.go(2);
+```
+
 All text passed to the helpers is HTML-escaped, so it is safe to pass device names or other
 values that came from the network. To include markup, build the element yourself.
 
+### Accessibility and RTL
+
+- `--mp-text-subtle` (secondary hints, ≥ 6:1 in both themes) and `--mp-focus-ring` (focus outlines;
+  the brand indigo in light mode, `#818cf8` in dark mode where the indigo is only 2.5:1) are the
+  contrast-safe tokens the components use. `.mp-sr-only` hides content visually only.
+- The component styles use logical properties (`margin-inline-start`, `padding-inline-end`, …), so
+  `dir="rtl"` pages lay out correctly with the regular (LTR) Bootstrap build. Code blocks and diffs
+  stay left-to-right.
+
 ## Assistant (AI)
 
 The Assistant components give AI features one recognisable look: a rotating
@@ -245,17 +428,62 @@ const chat = MpKit.ai.renderChat(document.getElementById('chat'), {
 });
 ```
 
+#### Cancelling a request
+
+Every request accepts an `AbortSignal` and returns a promise with `.cancel()` (and `.requestId`).
+Cancelling rejects the promise with an `AbortError` (or the signal's reason), removes the event
+listeners — late chunks are ignored — and sends a best-effort `/ai/cancel` request with the
+`requestId` so a server that supports it can stop generating (failures are ignored; pass
+`notifyServer: false` to skip it).
+
+```js
+const controller = new AbortController();
+stopBtn.onclick = () => controller.abort();
+try {
+  await MpKit.ai.ask({ prompt }, { onChunk: answer.append, signal: controller.signal });
+} catch (e) {
+  if (e.name !== 'AbortError') { answer.error(e); }
+}
+
+const req = MpKit.ai.explain({ error });  // or keep the promise…
+req.cancel();                             // …and cancel it directly
+```
+
+`renderChat()` returns `cancel()` too (the partial reply stays, marked "Stopped"), and passes
+`ctx.signal` to a custom `onSend`.
+
 `MpKit.ai.markdown(text)` and `MpKit.ai.diffLines(before, after)` are exported too.
 Outside Homebridge (e.g. the Glass UI) load only `dist/ai.css` and use the CSS
 classes directly.
 
-`examples/ai-preview.html` (repository only) previews every component in light and
-dark mode with a mocked `homebridge` object: run `npm run build` and serve the repo
-root with any static server.
+`examples/index.html` (repository only; published to GitHub Pages) is a gallery of every
+component — core, forms, feedback, pairing, logs and Assistant — with light/dark and RTL toggles
+and a mocked `homebridge` object; `examples/ai-preview.html` focuses on the Assistant components.
+See [Development](#development) to run them.
 
 ## Dark Mode
 
-Dark mode is handled entirely by Bootstrap's `data-bs-theme="dark"` attribute on `<html>`. Do **not** use `@media (prefers-color-scheme: dark)` blocks, `.dark-mode` CSS classes, or custom CSS variable overrides — Bootstrap handles all of this automatically. Use Bootstrap CSS variables (`var(--bs-body-bg)`, `var(--bs-primary)`, etc.) in your custom CSS instead of hardcoded hex values.
+Plugins use Bootstrap's `data-bs-theme="dark"` attribute on `<html>`: Bootstrap and the kit's
+`--mp-*` tokens both follow it. Use Bootstrap CSS variables (`var(--bs-body-bg)`, `var(--bs-primary)`, …)
+and the `--mp-*` tokens in your own CSS instead of hard-coded colours.
+
+Hosts whose dark mode is not Bootstrap's attribute (for example an app that toggles `body.dark-mode`,
+such as the Glass UI) add the **`mp-theme-dark`** class to the same element instead of copying the
+kit's dark values:
+
+```js
+document.body.classList.toggle('dark-mode', dark);
+document.body.classList.toggle('mp-theme-dark', dark); // kit tokens follow
+```
+
+Under `.mp-theme-dark` alone the host colours (`--mp-ai-surface`, `--mp-ai-fg`, …) are plain values
+from Bootstrap's dark palette, because the host does not switch Bootstrap's variables; override just
+the ones that differ (e.g. `--mp-ai-surface` for a different card colour). When an element has both
+`data-bs-theme="dark"` and `.mp-theme-dark`, the Bootstrap-variable values win.
+
+The kit's CSS is intentionally **not** wrapped in a cascade layer: unlayered styles beat every layered
+style, so with unlayered Bootstrap a `@layer mp-kit` would make Bootstrap override the kit's
+`.btn-primary` and `.mp-tabs` remaps.
 
 ## Development
 
@@ -263,12 +491,41 @@ Dark mode is handled entirely by Bootstrap's `data-bs-theme="dark"` attribute on
 npm install
 npm run build        # outputs to dist/ (commit the result)
 npm run build:check  # fails if dist/ is out of date (run in CI)
-npm test
+npm test             # node:test unit tests (jsdom) against dist/
+npm run test:types   # type-checks the .d.ts files
 ```
 
 Use the `--mp-*` tokens for brand colors. For text in the brand color use `--mp-primary-text`,
 which switches to a lighter shade in dark mode so it keeps WCAG AA contrast.
 
+### Gallery and visual tests
+
+```bash
+npm run examples              # copies dist/ + Bootstrap into examples/lib/ (git-ignored)
+npm run serve                 # http://localhost:4173/ with the Homebridge UI's CSP
+npx playwright install chromium
+npm run test:visual           # screenshots (light, dark, narrow, rtl) + axe-core + keyboard checks
+npm run test:visual:update    # refresh the baselines after an intentional visual change
+```
+
+Screenshot baselines live in `e2e/__screenshots__/<platform>/<project>/` because font rendering
+differs per OS. CI compares against the Linux baselines inside the
+`mcr.microsoft.com/playwright:v1.63.0-noble` image; refresh them with the same image (the command is
+in `.github/workflows/node.js.yml`) and keep its tag in step with `@playwright/test`. The axe-core (WCAG 2.2 AA)
+and keyboard checks always run. Append `?static&theme=dark&dir=rtl` to the gallery URL to preview a
+combination.
+
+### Releases
+
+`npm run size` checks the gzip size of the minified files against the budgets in
+`scripts/check-size.js` (CI and the publish workflow run it), and CI checks the `npm pack`
+contents. Releases are prepared by release-please (`release-please-config.json`,
+`.release-please-manifest.json`): it keeps a release PR with the next version and changelog from
+conventional commits; merging it creates the GitHub release and then starts `publish.yml` on the
+new tag with a `workflow_dispatch` (npm trusted publishing, which adds provenance automatically). No
+extra secret is needed: the default `GITHUB_TOKEN` may start a `workflow_dispatch`, and a release
+published by hand still runs `publish.yml` through its `release` trigger. Version 1.3.0 was released by hand (its notes predate release-please); release-please takes over from there.
+
 ## License
 
 MIT © MP Consulting

package/dist/ai.css

@@ -1,9 +1,18 @@
-/* @mp-consulting/homebridge-ui-kit v1.2.2 */
+/* @mp-consulting/homebridge-ui-kit v1.3.0 */
 
 /* ── Design tokens ──────────────────────────────────────────────────────────
    CSS custom properties used throughout the design system.
    Override these in your plugin's styles.css to customize per-plugin.
-   Light values live on :root; dark values follow Bootstrap's data-bs-theme.
+   Light values live on :root. Dark values apply under Bootstrap's
+   [data-bs-theme="dark"] or under the selector-agnostic .mp-theme-dark class,
+   for hosts whose dark mode does not use Bootstrap's attribute (e.g. a
+   `body.dark-mode` app): add .mp-theme-dark next to your own class instead of
+   copying these values.
+
+   The kit's rules are deliberately NOT wrapped in a cascade layer:
+   unlayered styles beat every layered style regardless of specificity or
+   order, so unlayered Bootstrap would then override the kit's Bootstrap
+   remaps (primary button, tabs, spinner) and break them.
    ────────────────────────────────────────────────────────────────────────── */
 
 :root {
@@ -19,10 +28,19 @@
   --mp-status-offline: #ef4444;
   --mp-status-checking: #94a3b8;
 
+  /* Accessible text and focus colours (plain values, so they hold contrast
+     whether or not the host switches Bootstrap's variables) */
+  --mp-text-subtle: #5c636a;           /* secondary hints; 6.1:1 on white */
+  --mp-focus-ring: #4f46e5;            /* focus outlines; 6.3:1 on white */
+
   /* Surfaces */
   --mp-surface: rgba(0, 0, 0, 0.02);
   --mp-border: rgba(0, 0, 0, 0.1);
 
+  /* Skeleton shimmer */
+  --mp-skeleton-base: rgba(0, 0, 0, 0.08);
+  --mp-skeleton-shine: rgba(0, 0, 0, 0.03);
+
   /* Shape */
   --mp-radius: 0.5rem;
   --mp-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
@@ -75,12 +93,42 @@
   initial-value: 0deg;
 }
 
-[data-bs-theme="dark"] {
+/* Dark values that do not depend on Bootstrap. */
+[data-bs-theme="dark"],
+.mp-theme-dark {
   --mp-primary-text: #818cf8;
+  --mp-text-subtle: #a3a9b0;           /* 6.5:1 on #212529 */
+  --mp-focus-ring: #818cf8;            /* 5.2:1 on #212529 (the brand indigo is 2.5:1) */
   --mp-surface: rgba(255, 255, 255, 0.03);
   --mp-border: rgba(255, 255, 255, 0.08);
   --mp-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
+  --mp-skeleton-base: rgba(255, 255, 255, 0.08);
+  --mp-skeleton-shine: rgba(255, 255, 255, 0.16);
   --mp-ai-text: #d8b4fe;               /* 9.6:1 on #212529 */
+  --mp-ai-glow-opacity: 0.7;
+  --mp-ai-edge-glow-opacity: 0.8;
+  --mp-ai-diff-add-bg: rgba(34, 197, 94, 0.16);
+  --mp-ai-diff-add-text: #bbf7d0;
+  --mp-ai-diff-del-bg: rgba(239, 68, 68, 0.18);
+  --mp-ai-diff-del-text: #fecaca;
+}
+
+/* .mp-theme-dark alone: the host does not switch Bootstrap's variables, so
+   the host colours are plain values (Bootstrap's dark palette). */
+.mp-theme-dark {
+  --mp-ai-surface: #212529;
+  --mp-ai-fg: #dee2e6;
+  --mp-ai-fg-muted: rgba(222, 226, 230, 0.75);
+  --mp-ai-bg: transparent;
+  --mp-ai-border-color: #495057;
+  --mp-ai-success-text: #75b798;
+  --mp-ai-danger-text: #ea868f;
+}
+
+/* Bootstrap's dark theme: follow its variables, so a plugin that customises
+   them is respected. Declared after .mp-theme-dark so it wins when an element
+   has both. */
+[data-bs-theme="dark"] {
   --mp-ai-surface: var(--bs-body-bg, #212529);
   --mp-ai-fg: var(--bs-body-color, #dee2e6);
   --mp-ai-fg-muted: var(--bs-secondary-color, rgba(222, 226, 230, 0.75));
@@ -88,12 +136,6 @@
   --mp-ai-border-color: var(--bs-border-color, #495057);
   --mp-ai-success-text: var(--bs-success-text-emphasis, #75b798);
   --mp-ai-danger-text: var(--bs-danger-text-emphasis, #ea868f);
-  --mp-ai-glow-opacity: 0.7;
-  --mp-ai-edge-glow-opacity: 0.8;
-  --mp-ai-diff-add-bg: rgba(34, 197, 94, 0.16);
-  --mp-ai-diff-add-text: #bbf7d0;
-  --mp-ai-diff-del-bg: rgba(239, 68, 68, 0.18);
-  --mp-ai-diff-del-text: #fecaca;
 }
 
 /* ── Assistant (AI) components ──────────────────────────────────────────────
@@ -373,7 +415,7 @@
   display: inline-block;
   width: 0.5em;
   height: 1.1em;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   vertical-align: text-bottom;
   border-radius: 1px;
   background: var(--mp-ai-text);
@@ -399,7 +441,7 @@
 
 .mp-ai-prose ul,
 .mp-ai-prose ol {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
 }
 
 .mp-ai-prose code {
@@ -412,7 +454,10 @@
   font-size: 0.85em;
 }
 
+/* Code reads left to right even on an RTL page. */
 .mp-ai-prose pre {
+  direction: ltr;
+  unicode-bidi: isolate;
   padding: 0.625rem 0.75rem;
   overflow-x: auto;
   border-radius: 0.375rem;
@@ -483,14 +528,14 @@
 }
 
 .is-user > .mp-ai-chat-bubble {
-  border-bottom-right-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
   background: var(--mp-primary, #4f46e5);
   color: #fff;
 }
 
 .is-assistant > .mp-ai-chat-bubble {
   border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
-  border-bottom-left-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
   background: var(--mp-surface, rgba(0, 0, 0, 0.02));
 }
 
@@ -560,7 +605,7 @@
 .mp-ai-diff-stats {
   flex: none;
   display: inline-flex;
-  margin-left: auto;
+  margin-inline-start: auto;
   gap: 0.5rem;
   font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 }
@@ -574,6 +619,8 @@
 }
 
 .mp-ai-diff-body {
+  direction: ltr;
+  unicode-bidi: isolate;
   max-height: 24rem;
   margin: 0;
   padding: 0.375rem 0;
@@ -586,7 +633,7 @@
 .mp-ai-diff-line {
   display: block;
   min-width: max-content;
-  padding-right: 0.75rem;
+  padding-inline-end: 0.75rem;
   white-space: pre;
 }
 
@@ -623,7 +670,7 @@
 }
 
 .mp-ai-diff-status {
-  margin-right: auto;
+  margin-inline-end: auto;
   color: var(--mp-ai-fg-muted);
   font-size: 0.8125rem;
 }

package/dist/ai.min.css

@@ -0,0 +1,3 @@
+/* @mp-consulting/homebridge-ui-kit v1.3.0 */
+:root{--mp-primary: #4f46e5;--mp-primary-rgb: 79, 70, 229;--mp-primary-hover: #4338ca;--mp-primary-text: #4f46e5;--mp-status-online: #10b981;--mp-status-online-glow: rgba(16, 185, 129, .35);--mp-status-offline: #ef4444;--mp-status-checking: #94a3b8;--mp-text-subtle: #5c636a;--mp-focus-ring: #4f46e5;--mp-surface: rgba(0, 0, 0, .02);--mp-border: rgba(0, 0, 0, .1);--mp-skeleton-base: rgba(0, 0, 0, .08);--mp-skeleton-shine: rgba(0, 0, 0, .03);--mp-radius: .5rem;--mp-shadow-hover: 0 .5rem 1rem rgba(0, 0, 0, .12);--mp-ai-1: #BC82F3;--mp-ai-2: #F5B9EA;--mp-ai-3: #8D9FFF;--mp-ai-4: #FF6778;--mp-ai-5: #FFBA71;--mp-ai-6: #C686FF;--mp-ai-stops: var(--mp-ai-1), var(--mp-ai-2), var(--mp-ai-3), var(--mp-ai-4), var(--mp-ai-5), var(--mp-ai-6), var(--mp-ai-1);--mp-ai-gradient: conic-gradient(from var(--mp-ai-angle), var(--mp-ai-stops));--mp-ai-gradient-linear: linear-gradient(90deg, var(--mp-ai-stops));--mp-ai-text: #7e22ce;--mp-ai-surface: var(--bs-body-bg, #fff);--mp-ai-fg: var(--bs-body-color, #212529);--mp-ai-fg-muted: var(--bs-secondary-color, #6c757d);--mp-ai-bg: var(--bs-body-bg, transparent);--mp-ai-border-color: var(--bs-border-color, #dee2e6);--mp-ai-success-text: var(--bs-success-text-emphasis, #0a3622);--mp-ai-danger-text: var(--bs-danger-text-emphasis, #b02a37);--mp-ai-border-width: 2px;--mp-ai-glow-blur: 12px;--mp-ai-glow-opacity: .45;--mp-ai-edge-glow-opacity: .55;--mp-ai-duration: 4s;--mp-ai-edge-width: 28px;--mp-ai-diff-add-bg: #dcfce7;--mp-ai-diff-add-text: #14532d;--mp-ai-diff-del-bg: #fee2e2;--mp-ai-diff-del-text: #7f1d1d}@property --mp-ai-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}[data-bs-theme=dark],.mp-theme-dark{--mp-primary-text: #818cf8;--mp-text-subtle: #a3a9b0;--mp-focus-ring: #818cf8;--mp-surface: rgba(255, 255, 255, .03);--mp-border: rgba(255, 255, 255, .08);--mp-shadow-hover: 0 .5rem 1rem rgba(0, 0, 0, .3);--mp-skeleton-base: rgba(255, 255, 255, .08);--mp-skeleton-shine: rgba(255, 255, 255, .16);--mp-ai-text: #d8b4fe;--mp-ai-glow-opacity: .7;--mp-ai-edge-glow-opacity: .8;--mp-ai-diff-add-bg: rgba(34, 197, 94, .16);--mp-ai-diff-add-text: #bbf7d0;--mp-ai-diff-del-bg: rgba(239, 68, 68, .18);--mp-ai-diff-del-text: #fecaca}.mp-theme-dark{--mp-ai-surface: #212529;--mp-ai-fg: #dee2e6;--mp-ai-fg-muted: rgba(222, 226, 230, .75);--mp-ai-bg: transparent;--mp-ai-border-color: #495057;--mp-ai-success-text: #75b798;--mp-ai-danger-text: #ea868f}[data-bs-theme=dark]{--mp-ai-surface: var(--bs-body-bg, #212529);--mp-ai-fg: var(--bs-body-color, #dee2e6);--mp-ai-fg-muted: var(--bs-secondary-color, rgba(222, 226, 230, .75));--mp-ai-bg: var(--bs-body-bg, transparent);--mp-ai-border-color: var(--bs-border-color, #495057);--mp-ai-success-text: var(--bs-success-text-emphasis, #75b798);--mp-ai-danger-text: var(--bs-danger-text-emphasis, #ea868f)}@keyframes mp-ai-spin{to{--mp-ai-angle: 360deg}}@keyframes mp-ai-glow-pulse{0%,to{opacity:calc(var(--mp-ai-glow-opacity) * .35)}50%{opacity:var(--mp-ai-glow-opacity)}}@keyframes mp-ai-orb-pulse{0%,to{transform:scale(.8);opacity:.65}50%{transform:scale(1.1);opacity:1}}@keyframes mp-ai-blink{50%{opacity:0}}@keyframes mp-ai-fade-in{0%{opacity:0}}.mp-ai-halo,.mp-ai-button,.mp-ai-badge,.mp-ai-panel{position:relative;isolation:isolate;background:transparent}.mp-ai-halo:before,.mp-ai-button:before,.mp-ai-badge:before,.mp-ai-panel:before{content:"";position:absolute;inset:0;z-index:-1;border:var(--mp-ai-border-width) solid transparent;border-radius:inherit;background:linear-gradient(var(--mp-ai-surface),var(--mp-ai-surface)) padding-box,conic-gradient(from var(--mp-ai-angle),var(--mp-ai-stops)) border-box;pointer-events:none}.mp-ai-halo:after,.mp-ai-button:after,.mp-ai-panel:after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--mp-ai-angle),var(--mp-ai-stops));filter:blur(var(--mp-ai-glow-blur));opacity:var(--mp-ai-glow-opacity);pointer-events:none;transition:opacity .2s ease}.mp-ai-halo{display:block;border-radius:var(--mp-radius, .5rem)}.mp-ai-halo:before,.mp-ai-halo:after{animation:mp-ai-spin var(--mp-ai-duration) linear infinite}.mp-ai-badge{--mp-ai-border-width: 1.5px;display:inline-flex;align-items:center;gap:.3em;padding:.2em .65em;border-radius:999px;color:var(--mp-ai-text);font-size:.75rem;font-weight:600;line-height:1.2;white-space:nowrap}.mp-ai-icon{width:1em;height:1em;flex-shrink:0;fill:currentColor;color:var(--mp-ai-text)}.mp-ai-button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.375rem .95rem;border:0;border-radius:999px;color:var(--mp-ai-fg);font:inherit;font-size:.875rem;font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer}.mp-ai-button:after{opacity:0}.mp-ai-button:hover:before,.mp-ai-button:hover:after,.mp-ai-button:focus-visible:before,.mp-ai-button:focus-visible:after,.mp-ai-button[aria-busy=true]:before,.mp-ai-button[aria-busy=true]:after{animation:mp-ai-spin var(--mp-ai-duration) linear infinite}.mp-ai-button:hover:after,.mp-ai-button:focus-visible:after,.mp-ai-button[aria-busy=true]:after{opacity:var(--mp-ai-glow-opacity)}.mp-ai-button:focus-visible{outline:2px solid var(--mp-ai-text);outline-offset:3px}.mp-ai-button:disabled:not([aria-busy=true]){cursor:not-allowed;opacity:.6}.mp-ai-button-sm{padding:.25rem .7rem;font-size:.8125rem}.mp-ai-button-lg{padding:.55rem 1.25rem;font-size:1rem}.mp-ai-thinking:not(.mp-ai-halo,.mp-ai-button,.mp-ai-badge,.mp-ai-panel){display:inline-flex;align-items:center;gap:.5rem;color:var(--mp-ai-fg-muted);font-size:.875rem}.mp-ai-thinking:not(.mp-ai-halo,.mp-ai-button,.mp-ai-badge,.mp-ai-panel):before{content:"";width:.875em;height:.875em;flex-shrink:0;border-radius:50%;background:conic-gradient(from var(--mp-ai-angle),var(--mp-ai-stops));animation:mp-ai-spin 1.5s linear infinite,mp-ai-orb-pulse 1.4s ease-in-out infinite}.mp-ai-thinking:is(.mp-ai-halo,.mp-ai-button,.mp-ai-panel):before{animation:mp-ai-spin var(--mp-ai-duration) linear infinite}.mp-ai-thinking:is(.mp-ai-halo,.mp-ai-button,.mp-ai-panel):after{animation:mp-ai-spin var(--mp-ai-duration) linear infinite,mp-ai-glow-pulse 1.6s ease-in-out infinite}.mp-ai-panel{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow-wrap:break-word;padding:1rem 1.125rem;border-radius:var(--mp-radius, .5rem);color:var(--mp-ai-fg);font-size:.9375rem}.mp-ai-panel:after{opacity:calc(var(--mp-ai-glow-opacity) * .4)}.mp-ai-panel.is-streaming:before,.mp-ai-panel.is-streaming:after{animation:mp-ai-spin var(--mp-ai-duration) linear infinite}.mp-ai-panel.is-streaming:after{opacity:var(--mp-ai-glow-opacity)}.mp-ai-panel-header{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .5rem;margin-bottom:.625rem}.mp-ai-panel-header>.mp-ai-badge{flex:none}.mp-ai-panel-title{flex:1 1 12rem;min-width:0;margin:0;font-size:.875rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}.mp-ai-panel-body{min-width:0}.mp-ai-panel-note{margin:.75rem 0 0;font-size:.75rem;color:var(--mp-ai-fg-muted)}.mp-ai-error{margin:.5rem 0 0;color:var(--mp-ai-danger-text);font-size:.875rem}.mp-ai-caret{display:inline-block;width:.5em;height:1.1em;margin-inline-start:2px;vertical-align:text-bottom;border-radius:1px;background:var(--mp-ai-text);animation:mp-ai-blink 1s steps(1) infinite}.mp-ai-prose>:first-child{margin-top:0}.mp-ai-prose>:last-child{margin-bottom:0}.mp-ai-prose p,.mp-ai-prose ul,.mp-ai-prose ol,.mp-ai-prose pre{margin:0 0 .625rem}.mp-ai-prose ul,.mp-ai-prose ol{padding-inline-start:1.25rem}.mp-ai-prose code{padding:.1em .35em;border-radius:.25rem;background:var(--mp-surface, rgba(0, 0, 0, .04));border:1px solid var(--mp-border, rgba(0, 0, 0, .1));color:inherit;font-family:var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);font-size:.85em}.mp-ai-prose pre{direction:ltr;unicode-bidi:isolate;padding:.625rem .75rem;overflow-x:auto;border-radius:.375rem;background:var(--mp-surface, rgba(0, 0, 0, .04));border:1px solid var(--mp-border, rgba(0, 0, 0, .1));font-size:.8125rem}.mp-ai-prose pre code{padding:0;border:0;background:none;font-size:inherit}.mp-ai-chat{display:flex;flex-direction:column;min-height:16rem;max-height:var(--mp-ai-chat-height, 28rem);overflow:hidden;border:1px solid var(--mp-border, rgba(0, 0, 0, .1));border-radius:var(--mp-radius, .5rem);background:var(--mp-ai-surface);color:var(--mp-ai-fg)}.mp-ai-chat-header{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid var(--mp-border, rgba(0, 0, 0, .1))}.mp-ai-chat-log{display:flex;flex:1;flex-direction:column;gap:.75rem;padding:1rem;overflow-y:auto}.mp-ai-chat-empty{margin:auto;color:var(--mp-ai-fg-muted);font-size:.875rem;text-align:center}.mp-ai-chat-msg{display:flex}.mp-ai-chat-msg.is-user{justify-content:flex-end}.mp-ai-chat-bubble{max-width:85%;padding:.5rem .75rem;border-radius:.875rem;font-size:.9rem;overflow-wrap:anywhere}.is-user>.mp-ai-chat-bubble{border-end-end-radius:.25rem;background:var(--mp-primary, #4f46e5);color:#fff}.is-assistant>.mp-ai-chat-bubble{border:1px solid var(--mp-border, rgba(0, 0, 0, .1));border-end-start-radius:.25rem;background:var(--mp-surface, rgba(0, 0, 0, .02))}.mp-ai-chat-form{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--mp-border, rgba(0, 0, 0, .1))}.mp-ai-chat-input{flex:1;min-height:2.375rem;max-height:8rem;padding:.45rem .75rem;resize:vertical;border:1px solid var(--mp-ai-border-color);border-radius:.5rem;background:var(--mp-ai-bg);color:inherit;font:inherit;font-size:.9rem}.mp-ai-chat-input:focus{outline:2px solid var(--mp-ai-text);outline-offset:1px;border-color:transparent}.mp-ai-diff{overflow:hidden;border:1px solid var(--mp-border, rgba(0, 0, 0, .1));border-radius:var(--mp-radius, .5rem);background:var(--mp-ai-surface);color:var(--mp-ai-fg)}.mp-ai-diff-header{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .5rem;padding:.5rem .75rem;border-bottom:1px solid var(--mp-border, rgba(0, 0, 0, .1));font-size:.8125rem}.mp-ai-diff-header>.mp-ai-badge{flex:none}.mp-ai-diff-title{flex:1 1 12rem;min-width:0;font-weight:500;line-height:1.35;overflow-wrap:anywhere}.mp-ai-diff-stats{flex:none;display:inline-flex;margin-inline-start:auto;gap:.5rem;font-family:var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.mp-ai-diff-stat-add{color:var(--mp-ai-success-text)}.mp-ai-diff-stat-del{color:var(--mp-ai-danger-text)}.mp-ai-diff-body{direction:ltr;unicode-bidi:isolate;max-height:24rem;margin:0;padding:.375rem 0;overflow:auto;font-family:var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);font-size:.8125rem;line-height:1.55}.mp-ai-diff-line{display:block;min-width:max-content;padding-inline-end:.75rem;white-space:pre}.mp-ai-diff-sign{display:inline-block;width:1.75rem;color:var(--mp-ai-fg-muted);text-align:center;-webkit-user-select:none;user-select:none}.mp-ai-diff-line.is-add{background:var(--mp-ai-diff-add-bg);color:var(--mp-ai-diff-add-text)}.mp-ai-diff-line.is-del{background:var(--mp-ai-diff-del-bg);color:var(--mp-ai-diff-del-text)}.mp-ai-diff-line.is-add .mp-ai-diff-sign,.mp-ai-diff-line.is-del .mp-ai-diff-sign{color:inherit}.mp-ai-diff-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--mp-border, rgba(0, 0, 0, .1))}.mp-ai-diff-status{margin-inline-end:auto;color:var(--mp-ai-fg-muted);font-size:.8125rem}.mp-ai-diff.is-applied .mp-ai-diff-status{color:var(--mp-ai-success-text)}.mp-ai-action{padding:.3rem .85rem;border:1px solid var(--mp-ai-border-color);border-radius:.375rem;background:transparent;color:var(--mp-ai-fg);font:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.mp-ai-action:hover{background:var(--mp-surface, rgba(0, 0, 0, .04))}.mp-ai-action-primary{border-color:var(--mp-primary, #4f46e5);background:var(--mp-primary, #4f46e5);color:#fff}.mp-ai-action-primary:hover{border-color:var(--mp-primary-hover, #4338ca);background:var(--mp-primary-hover, #4338ca)}.mp-ai-action:focus-visible{outline:2px solid var(--mp-ai-text);outline-offset:2px}.mp-ai-action:disabled{cursor:not-allowed;opacity:.6}.mp-ai-edge-glow{position:fixed;inset:0;z-index:1090;pointer-events:none;animation:mp-ai-fade-in .4s ease-out}.mp-ai-edge-glow[hidden]{display:none}.mp-ai-edge-glow:before,.mp-ai-edge-glow:after{content:"";position:absolute;inset:0;background:conic-gradient(from var(--mp-ai-angle) at 50% 50%,var(--mp-ai-stops));animation:mp-ai-spin var(--mp-ai-duration) linear infinite}.mp-ai-edge-glow:before{padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.mp-ai-edge-glow:after{opacity:var(--mp-ai-edge-glow-opacity);-webkit-mask-image:linear-gradient(to right,#000,transparent var(--mp-ai-edge-width),transparent calc(100% - var(--mp-ai-edge-width)),#000),linear-gradient(to bottom,#000,transparent var(--mp-ai-edge-width),transparent calc(100% - var(--mp-ai-edge-width)),#000);mask-image:linear-gradient(to right,#000,transparent var(--mp-ai-edge-width),transparent calc(100% - var(--mp-ai-edge-width)),#000),linear-gradient(to bottom,#000,transparent var(--mp-ai-edge-width),transparent calc(100% - var(--mp-ai-edge-width)),#000)}.mp-ai-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(prefers-reduced-motion:reduce){.mp-ai-halo:before,.mp-ai-halo:after,.mp-ai-button:before,.mp-ai-button:after,.mp-ai-panel:before,.mp-ai-panel:after,.mp-ai-thinking:before,.mp-ai-thinking:after,.mp-ai-edge-glow,.mp-ai-edge-glow:before,.mp-ai-edge-glow:after,.mp-ai-caret{animation:none!important}.mp-ai-button:after{transition:none}}@media(forced-colors:active){.mp-ai-halo,.mp-ai-button,.mp-ai-badge,.mp-ai-panel{border:1px solid CanvasText}.mp-ai-edge-glow{display:none}}
+/*# sourceMappingURL=ai.min.css.map */