@agentaily/design-system 0.1.0

package/DESIGN.md

@@ -0,0 +1,112 @@
+# Agentaily Design System
+
+**Agentaily** is an AI chatbot. The brand brief, verbatim: **极客风格，简约，大气，科技感** — geek-flavored, minimal, expansive, technological. Agentaily answers in plain language first, then shows its work: conclusion → derivation, no hype, no mascots.
+
+This is a **greenfield system** — no codebase, Figma, or existing assets were provided. Everything here (name, mark, palette, type, components, screens) was originated in this project on 2026-06-10 and is the source of truth. The only inputs were the one-line brief and these choices from the kickoff questionnaire: dual theme (dark default), **monochrome accent**, everything else delegated.
+
+Two product surfaces are represented as full UI kits:
+- **Chat app** (`ui_kits/chat/`) — the core product: sidebar + thread + composer.
+- **Marketing website** (`ui_kits/website/`) — the landing page.
+- **Documentation site** (`ui_kits/docs/`) — three-pane developer docs (nav + article + TOC).
+
+The component library is **deliberately exhaustive** — 116 exports across 11 categories, covering the full shadcn/ui primitive set plus AI-native surfaces (reasoning, tool calls, agents, voice, workflow graphs). See the INDEX below.
+
+---
+
+## CONTENT FUNDAMENTALS
+
+**Tone:** plain, precise, slightly dry. Confidence through restraint — Agentaily never sells, it states. The voice of a good senior engineer: short declaratives, concrete numbers, zero filler.
+
+**Language:** bilingual by design. Display/English carries the tech identity ("Reasoning, distilled"), body copy is natural Chinese（"先给结论，再给推导——不废话，不卖萌"）. Mixing is intentional, but within one element pick one language.
+
+**Casing:**
+- Product copy and buttons: sentence case — "New chat", "Start free", "Read the docs".
+- The label motif: mono ALL-CAPS with letter-spacing — `CONVERSATIONS`, `AGENTAILY MAY MAKE MISTAKES`.
+- The wordmark is always lowercase: **agentaily**.
+
+**Person:** address the user as 你/you; Agentaily refers to itself as Agentaily, never "I'm excited to…". System text is impersonal: "This cannot be undone."
+
+**Emoji: never.** Status is carried by square dots and color tokens. Keyboard glyphs (⌘ ⌥ ⇧ ⏎) and geometric unicode (▣ ▍) are typed as text and ARE part of the vocabulary.
+
+**Numbers are copy.** "0.4s", "128k", "Retry in 18s" — specific figures replace adjectives.
+
+Examples — ✓ "Rate limited. Retry in 18s." ✗ "Oops! Something went wrong 😅" · ✓ "有什么要解决的？" ✗ "✨ 开启你的奇妙旅程！"
+
+---
+
+## VISUAL FOUNDATIONS
+
+**Color.** Monochrome-first. Two scales: **ink** (dark, the default on `:root`) and **paper** (light, scoped under `[data-theme="light"]`). The accent is **inversion, not hue** — the primary button is white-on-black in dark, black-on-white in light. Semantic green/amber/red exist (`--ok/--warn/--danger`) but appear only as status; never decorative. There are no gradients anywhere except the dot-grid mask fade.
+
+**Type.** Space Grotesk (display + UI) and JetBrains Mono (code, timestamps, labels). CJK falls back to system sans (PingFang SC / Microsoft YaHei). Display sizes use tight tracking (−0.02em) and medium weight — never bold-black. The mono ALL-CAPS label (12px, +0.08em) is the system's signature. Body is 15px/1.6, max ~76ch.
+
+**Spacing.** 4px grid. Outer space is generous (sections 72–96px) — 大气; inner rhythm is tight (8–16px) — 极客. Chat thread column maxes at 760px; marketing container 1120px; sidebar fixed 272px.
+
+**Backgrounds.** Flat solids from the scale. No photography, no illustration. The only textures permitted: the **dot grid** (24px, for heroes/empty states, usually mask-faded) and hairline rules. Marketing hero art is the product window itself.
+
+**Corners.** Hard-edged: 2px chips, 4px buttons/inputs, 8px cards/dialogs. Full-round only for rare avatar cases; default avatars are **square** (4px).
+
+**Borders & shadows.** Hierarchy comes from 1px hairlines (`--line-1` resting, `--line-2` hover/strong), not shadows. Shadows exist only for floating layers (menus `--shadow-2`, dialogs/marketing window `--shadow-3`). No inner shadows except the Kbd's 2px bottom border.
+
+**Hover:** background fill (`--bg-3`) or border step-up (`--line-1`→`--line-2`) — never opacity fades on text. **Press:** translateY(1px) — mechanical, no scale. **Focus:** keyboard focus uses the double ring (`--ring`); inputs use border-color swap.
+
+**Motion.** One ease (`cubic-bezier(0.2,0,0,1)`), three durations (120/200/320ms). Decisive and damped — no bounce, no parallax. Mechanical exceptions that define the brand: the cursor blinks in `steps(1)`, the spinner rotates in `steps(8)`. Respect `prefers-reduced-motion`.
+
+**Transparency & blur:** only on overlay layers — dialog scrim (`--bg-overlay` + 12px blur) and the sticky marketing nav. Never on content.
+
+**Cards:** flat `--bg-2`, 1px `--line-1`, 8px radius, no shadow. Featured cards may carry the **corner-tick** motif (two L-shaped ticks on opposite corners).
+
+**Motifs (use 1, max 2 per view):** block cursor ▍ (liveness) · dot grid (potential space) · corner ticks (selection/precision) · mono ALL-CAPS labels.
+
+**Chat anatomy:** user turns are right-aligned hairline cards (max 78%); assistant turns are full-width prose under a mono `AGENTAILY` label — no bubble. Streaming = blinking block cursor.
+
+---
+
+## ICONOGRAPHY
+
+- **System: [Lucide](https://lucide.dev)** — 24px grid, stroke 2, round caps, `currentColor`, rendered at 14–20px. Chosen as the open-source set matching the hairline aesthetic. No brand icon font existed (greenfield); this substitution is flagged in CAVEATS.
+- **In static HTML:** load the UMD build from CDN (`https://unpkg.com/lucide@latest/dist/umd/lucide.js`) and call `lucide.createIcons()` on `<i data-lucide="plus">` elements — see `guidelines/iconography.card.html`.
+- **In React kits:** use `ChatIcon` from `ui_kits/chat/ChatIcons.jsx` — inline copies of Lucide path geometry (plus, search, settings, sun, moon, pen, trash, copy, refresh, chevron-down, x, paperclip, panel-left, arrow-up, message, share). Add icons by copying paths from Lucide, never by drawing freehand.
+- **Never:** filled icons, duotone, emoji-as-icon, mixed stroke weights.
+- **Unicode as UI:** ⌘ ⌥ ⇧ ⏎ in `Kbd`; ▣ as model-chip glyph; ✕ for dismiss; ✓ in copy-confirmation. These are text, set in mono.
+- **Logo:** `assets/logo/agentaily-mark-{white,black}.svg` — cursor-block-in-corner-ticks mark. Wordmark is typed, not drawn: lowercase mono `agentaily` + optional blinking cursor.
+
+---
+
+## INDEX
+
+| Path | What |
+|---|---|
+| `styles.css` | Global entry — `@import`s everything below. Link this one file. |
+| `tokens/colors.css` | Ink + paper scales, accent, semantic, aliases |
+| `tokens/typography.css` | Families, scale (12–68px), weights, tracking |
+| `tokens/spacing.css` | 4px scale + layout constants |
+| `tokens/effects.css` | Radii, shadows, motion, focus ring, blur |
+| `tokens/base.css` | Body defaults + motif utilities (`.ax-label`, `.ax-cursor`, `.ax-dotgrid`, `.ax-ticks`) |
+| `tokens/fonts.css` | Google Fonts imports (substitution — see CAVEATS) |
+| `assets/logo/` | Mark SVGs (white/black) |
+| `guidelines/` | 17 specimen cards (Colors ×4, Type ×4, Spacing ×5, Brand ×4) |
+| `states/` | 5 interaction-state matrices (buttons, form controls, selection/nav, loading/streaming, status/feedback) — force-rendered hover/focus/active/disabled |
+| `components/buttons/` | Button, IconButton, **ButtonGroup** |
+| `components/inputs/` | Input, Textarea, Select, Switch, Checkbox, Label, RadioGroup, Slider, Toggle, ToggleGroup, **Field, FieldGroup, InputGroup, InputOTP, Combobox, Calendar, DatePicker** |
+| `components/display/` | Card, Badge, Avatar, Tabs, Kbd, Separator, Skeleton, Progress, Accordion, Breadcrumb, Table, Pagination, Empty, **Collapsible, Item, Carousel, Chart (BarChart/LineChart), DataTable, Typography (Prose/Text)** |
+| `components/feedback/` | Spinner, Toast, Tooltip, Dialog, Alert |
+| `components/overlay/` | Popover, DropdownMenu, Command, Sheet, **HoverCard, ContextMenu, Menubar, NavigationMenu, AlertDialog** |
+| `components/layout/` | **AspectRatio, ScrollArea, Resizable, Sidebar** |
+| `components/chat/` | Message, Composer, CodeBlock |
+| `components/ai/` | Reasoning, ToolCall, Sources + Citation, Suggestion/Suggestions, ModelSelector, Attachments, Shimmer, **Conversation, Task, Plan, Context, Confirmation, Checkpoint, Queue** |
+| `components/code/` | **Terminal, FileTree, Snippet, StackTrace, TestResults, Artifact, WebPreview, Agent, Commit, EnvironmentVariables, PackageInfo, Sandbox, SchemaDisplay, JSXPreview** |
+| `components/voice/` | **AudioPlayer, MicSelector, VoiceSelector, SpeechInput, Transcription, Persona** |
+| `components/workflow/` | **Flow (Canvas), Canvas, Node, Edge, Connection, Controls, Panel, Toolbar** |
+| `components/utilities/` | **Image, OpenInChat** |
+| `ui_kits/chat/` | Chat app (interactive) |
+| `ui_kits/website/` | Marketing landing page |
+| `ui_kits/docs/` | Documentation site (interactive) |
+| `SKILL.md` | Agent-skill entry point |
+
+Every component ships `<Name>.jsx` + `<Name>.d.ts` (props) + `<Name>.prompt.md` (usage) — **116 component exports across 11 categories** (buttons, inputs, display, feedback, overlay, layout, chat, ai, code, voice, workflow, utilities). This is a deliberately exhaustive set covering shadcn/ui primitives + AI-native surfaces (reasoning, tools, agents, voice, workflow graphs). Consume via the compiled bundle: `window.AxiomDesignSystem_7fc962`. Read each component's `.prompt.md` for copy-paste usage.
+
+## CAVEATS
+- **Fonts are CDN substitutions:** Space Grotesk + JetBrains Mono via Google Fonts `@import` (no binaries shipped). Replace `tokens/fonts.css` with real `@font-face` + files for offline/production use.
+- **Icons are Lucide** (CDN / copied paths), not a bespoke set.
+- All product copy, stats and names in the kits are invented placeholders.

package/README.md

@@ -0,0 +1,81 @@
+# agentaily design system
+
+Agentaily(AI chatbot)设计系统:116 个 React 组件 + Storybook,单色暗色优先。品牌一句话:**极客风格,简约,大气,科技感**。
+
+📖 **在线 Storybook:** https://agentaily.github.io/design-system/
+
+设计规范全文见 [DESIGN.md](./DESIGN.md)(来自 claude.ai/design 的 handoff);运维与发布操作见 [OPERATIONS.md](./OPERATIONS.md)。
+
+## 开发
+
+```bash
+npm install
+npm run storybook        # 开发服务器 http://localhost:6006
+npm run build-storybook  # 静态构建到 storybook-static/
+```
+
+## 分发(三条渠道)
+
+### ① npm 组件库
+
+作为 React 组件库被其他项目消费。ESM-only,每个组件一个模块(`preserveModules`),消费方可 tree-shake 未用到的组件;`react` / `react-dom` 为 peer dependency。
+
+```bash
+npm run build:lib   # 产出 dist/:每组件一个 .js + index.d.ts + styles.css + assets/
+```
+
+产物结构:
+
+| 路径                                            | 内容                                      |
+| ----------------------------------------------- | ----------------------------------------- |
+| `dist/index.js`                                 | ESM 入口,re-export 全部 110 个组件符号    |
+| `dist/components/**/*.js`                       | 每个组件独立模块(含运行时 CSS 注入)       |
+| `dist/index.d.ts` + `dist/components/**/*.d.ts` | TypeScript 类型契约                       |
+| `dist/styles.css`                               | 内联好的 tokens + 字体,消费方 import 一次 |
+| `dist/assets/logo/*.svg`                        | 品牌 mark                                 |
+
+消费方用法:
+
+```jsx
+import "@agentaily/design-system/styles.css"; // 一次,加载 tokens
+import { Button, Composer, Reasoning } from "@agentaily/design-system";
+```
+
+**版本与发布走 [Changesets](https://github.com/changesets/changesets)**:
+
+- 改动值得发版时,跑 `npm run changeset` 选 patch/minor/major 并写一行摘要,把生成的 `.changeset/*.md` 跟代码一起提交。
+- `.github/workflows/release.yml` 在 push 到 `main` 时,要么开一个「Version Packages」PR(消费 changeset、bump 版本、写 `CHANGELOG.md`),要么在该 PR 合并后**发布到 npm**(OIDC trusted publishing + provenance,仓库零 token)并创建 GitHub Release。
+- **首发为引导步骤**:scoped 包要先存在才能配可信发布者,所以 v0.1.0 先本地手动 `npm publish` 一次;之后到 npmjs.com 给该包加 Trusted Publisher(org `agentaily` / repo `design-system` / workflow `release.yml`),后续全自动。
+
+注:`package.json` 的 `license` 暂为 `UNLICENSED`,公开发布前请确认授权条款。
+
+### ② 托管 Storybook(活文档)
+
+`.github/workflows/storybook.yml` 在推送到 `main` 时自动 `build-storybook` 并部署到 GitHub Pages —— 已上线:**https://agentaily.github.io/design-system/**。
+
+### ③ Agent Skill
+
+仓库根目录的 `SKILL.md` 让整个目录可作为 Claude Code / Agent Skill 分发,供 AI 按 Agentaily 品牌产出设计稿或生产代码。
+
+## 结构
+
+```
+.storybook/          Storybook 配置(深色默认 + 工具栏 ink/paper 双主题切换)
+src/styles.css       全局入口,@import 所有 token
+src/tokens/          颜色 / 字体 / 间距 / 效果 / 基础母题 CSS 变量
+src/assets/logo/     品牌 mark SVG(白/黑)
+src/foundations/     Foundations stories(Intro / Colors / Typography / Spacing / Effects / Motifs)
+src/components/      11 个类别的组件源码 + stories
+  <cat>/<Name>.jsx        组件(自包含,注入自身 CSS,只消费 token 变量)
+  <cat>/<Name>.d.ts       props 契约
+  <cat>/<Name>.prompt.md  用法说明
+  <cat>/<Name>.stories.jsx
+```
+
+## 约定
+
+- 暗色 ink 是默认主题(`:root`);亮色 paper 走 `[data-theme="light"]`,用 Storybook 工具栏切换。
+- 单色反相 accent,无渐变;语义色(--ok/--warn/--danger)只作状态。
+- 圆角 2/4/8px;层级靠 1px hairline 边框;阴影只给浮层。
+- 文案:平实精确,无 emoji,具体数字即文案("0.4s"、"128k")。
+- 字体经 Google Fonts CDN 引入(Space Grotesk + JetBrains Mono),生产环境请替换 `src/tokens/fonts.css` 为自托管 @font-face。

package/dist/assets/logo/agentaily-mark-black.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 10 V2 H10" stroke="#111113" stroke-width="2"></path>
+  <path d="M22 30 H30 V22" stroke="#111113" stroke-width="2"></path>
+  <rect x="12" y="9" width="8" height="14" fill="#111113"></rect>
+</svg>

package/dist/assets/logo/agentaily-mark-white.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 10 V2 H10" stroke="#F4F4F5" stroke-width="2"></path>
+  <path d="M22 30 H30 V22" stroke="#F4F4F5" stroke-width="2"></path>
+  <rect x="12" y="9" width="8" height="14" fill="#F4F4F5"></rect>
+</svg>

package/dist/components/ai/Attachments.d.ts

@@ -0,0 +1,23 @@
+/**
+ * File attachment display in three layouts: grid thumbnails, inline badges, list rows.
+ */
+export interface AttachmentFile {
+  id?: string | number;
+  name: string;
+  /** MIME type — drives the auto icon + list metadata. */
+  type?: string;
+  /** Human size, e.g. "2.4 MB" (list variant). */
+  size?: string;
+  /** Image src for grid thumbnails. */
+  src?: string;
+  /** Override auto media category. */
+  category?: "image" | "video" | "audio" | "document";
+}
+export interface AttachmentsProps {
+  files: AttachmentFile[];
+  /** @default "list" */
+  variant?: "grid" | "inline" | "list";
+  /** Renders a ✕ per item when provided; receives the file id (or index). */
+  onRemove?: (id: string | number) => void;
+}
+export declare function Attachments(props: AttachmentsProps): JSX.Element;

package/dist/components/ai/Attachments.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_ATTACH_CSS = `
+.ax-attachments { display: flex; gap: 8px; }
+.ax-attachments--grid { flex-wrap: wrap; }
+.ax-attachments--inline { flex-wrap: wrap; }
+.ax-attachments--list { flex-direction: column; }
+
+.ax-attach {
+  position: relative; display: flex; align-items: center; gap: 8px;
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  background: var(--surface-card); transition: border-color var(--dur-1) var(--ease-out);
+}
+.ax-attach:hover { border-color: var(--border-strong); }
+
+/* grid: thumbnail tile */
+.ax-attachments--grid .ax-attach { width: 96px; height: 96px; padding: 0; overflow: hidden; flex-direction: column; gap: 0; }
+.ax-attachments--grid .ax-attach__thumb { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: var(--surface-raised); }
+.ax-attachments--grid .ax-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
+.ax-attachments--grid .ax-attach__name { font-size: 10px; padding: 4px 6px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); border-top: 1px solid var(--border-default); }
+
+/* inline: compact badge */
+.ax-attachments--inline .ax-attach { padding: 4px 8px 4px 8px; border-radius: var(--radius-1); }
+.ax-attachments--inline .ax-attach__name { font-size: var(--text-xs); }
+
+/* list: full row */
+.ax-attachments--list .ax-attach { padding: 10px 12px; }
+.ax-attachments--list .ax-attach__body { flex: 1; min-width: 0; }
+.ax-attachments--list .ax-attach__meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }
+
+.ax-attach__icon { flex: none; color: var(--text-faint); display: inline-flex; }
+.ax-attach__icon svg { width: 15px; height: 15px; }
+.ax-attach__name { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
+.ax-attach__remove {
+  appearance: none; background: none; border: none; cursor: pointer; flex: none;
+  color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; line-height: 1;
+  padding: 3px; border-radius: var(--radius-1);
+}
+.ax-attach__remove:hover { color: var(--danger); background: var(--danger-dim); }
+.ax-attachments--grid .ax-attach__remove { position: absolute; top: 4px; right: 4px; background: var(--bg-overlay); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-attach-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-attach-css";
+  s.textContent = AX_ATTACH_CSS;
+  document.head.appendChild(s);
+}
+const ICONS = {
+  image: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+  ] }),
+  video: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "m22 8-6 4 6 4V8Z" }),
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" })
+  ] }),
+  audio: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+  ] }),
+  document: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+  ] })
+};
+function category(file) {
+  if (file.category) return file.category;
+  const t = file.type || "";
+  if (t.startsWith("image")) return "image";
+  if (t.startsWith("video")) return "video";
+  if (t.startsWith("audio")) return "audio";
+  return "document";
+}
+function Attachments({ files = [], variant = "list", onRemove, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-attachments", "ax-attachments--" + variant, className].filter(Boolean).join(" "), ...rest, children: files.map((file, i) => {
+    const cat = category(file);
+    const icon = ICONS[cat] || ICONS.document;
+    return /* @__PURE__ */ jsxs("div", { className: "ax-attach", children: [
+      variant === "grid" ? /* @__PURE__ */ jsx("span", { className: "ax-attach__thumb", children: file.src ? /* @__PURE__ */ jsx("img", { src: file.src, alt: file.name }) : /* @__PURE__ */ jsx("span", { className: "ax-attach__icon", children: icon }) }) : /* @__PURE__ */ jsx("span", { className: "ax-attach__icon", children: icon }),
+      variant === "list" ? /* @__PURE__ */ jsxs("span", { className: "ax-attach__body", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-attach__name", children: file.name }),
+        file.type ? /* @__PURE__ */ jsxs("span", { className: "ax-attach__meta", children: [
+          file.type,
+          file.size ? " · " + file.size : ""
+        ] }) : null
+      ] }) : /* @__PURE__ */ jsx("span", { className: "ax-attach__name", children: file.name }),
+      onRemove ? /* @__PURE__ */ jsx("button", { className: "ax-attach__remove", "aria-label": "Remove " + file.name, onClick: () => onRemove(file.id ?? i), children: "✕" }) : null
+    ] }, file.id || i);
+  }) });
+}
+export {
+  Attachments
+};
+//# sourceMappingURL=Attachments.js.map

package/dist/components/ai/Attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachments.js","sources":["../../../src/components/ai/Attachments.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ATTACH_CSS = `\n.ax-attachments { display: flex; gap: 8px; }\n.ax-attachments--grid { flex-wrap: wrap; }\n.ax-attachments--inline { flex-wrap: wrap; }\n.ax-attachments--list { flex-direction: column; }\n\n.ax-attach {\n  position: relative; display: flex; align-items: center; gap: 8px;\n  border: 1px solid var(--border-default); border-radius: var(--radius-2);\n  background: var(--surface-card); transition: border-color var(--dur-1) var(--ease-out);\n}\n.ax-attach:hover { border-color: var(--border-strong); }\n\n/* grid: thumbnail tile */\n.ax-attachments--grid .ax-attach { width: 96px; height: 96px; padding: 0; overflow: hidden; flex-direction: column; gap: 0; }\n.ax-attachments--grid .ax-attach__thumb { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: var(--surface-raised); }\n.ax-attachments--grid .ax-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }\n.ax-attachments--grid .ax-attach__name { font-size: 10px; padding: 4px 6px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); border-top: 1px solid var(--border-default); }\n\n/* inline: compact badge */\n.ax-attachments--inline .ax-attach { padding: 4px 8px 4px 8px; border-radius: var(--radius-1); }\n.ax-attachments--inline .ax-attach__name { font-size: var(--text-xs); }\n\n/* list: full row */\n.ax-attachments--list .ax-attach { padding: 10px 12px; }\n.ax-attachments--list .ax-attach__body { flex: 1; min-width: 0; }\n.ax-attachments--list .ax-attach__meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }\n\n.ax-attach__icon { flex: none; color: var(--text-faint); display: inline-flex; }\n.ax-attach__icon svg { width: 15px; height: 15px; }\n.ax-attach__name { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }\n.ax-attach__remove {\n  appearance: none; background: none; border: none; cursor: pointer; flex: none;\n  color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; line-height: 1;\n  padding: 3px; border-radius: var(--radius-1);\n}\n.ax-attach__remove:hover { color: var(--danger); background: var(--danger-dim); }\n.ax-attachments--grid .ax-attach__remove { position: absolute; top: 4px; right: 4px; background: var(--bg-overlay); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-attach-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-attach-css\";\n  s.textContent = AX_ATTACH_CSS;\n  document.head.appendChild(s);\n}\n\nconst ICONS = {\n  image: <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"></path></svg>,\n  video: <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m22 8-6 4 6 4V8Z\"></path><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"></rect></svg>,\n  audio: <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M9 18V5l12-2v13\"></path><circle cx=\"6\" cy=\"18\" r=\"3\"></circle><circle cx=\"18\" cy=\"16\" r=\"3\"></circle></svg>,\n  document: <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\"></path><path d=\"M14 2v6h6\"></path></svg>,\n};\n\nfunction category(file) {\n  if (file.category) return file.category;\n  const t = file.type || \"\";\n  if (t.startsWith(\"image\")) return \"image\";\n  if (t.startsWith(\"video\")) return \"video\";\n  if (t.startsWith(\"audio\")) return \"audio\";\n  return \"document\";\n}\n\nexport function Attachments({ files = [], variant = \"list\", onRemove, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-attachments\", \"ax-attachments--\" + variant, className].filter(Boolean).join(\" \")} {...rest}>\n      {files.map((file, i) => {\n        const cat = category(file);\n        const icon = ICONS[cat] || ICONS.document;\n        return (\n          <div className=\"ax-attach\" key={file.id || i}>\n            {variant === \"grid\" ? (\n              <span className=\"ax-attach__thumb\">{file.src ? <img src={file.src} alt={file.name} /> : <span className=\"ax-attach__icon\">{icon}</span>}</span>\n            ) : (\n              <span className=\"ax-attach__icon\">{icon}</span>\n            )}\n            {variant === \"list\" ? (\n              <span className=\"ax-attach__body\">\n                <span className=\"ax-attach__name\">{file.name}</span>\n                {file.type ? <span className=\"ax-attach__meta\">{file.type}{file.size ? \" · \" + file.size : \"\"}</span> : null}\n              </span>\n            ) : (\n              <span className=\"ax-attach__name\">{file.name}</span>\n            )}\n            {onRemove ? <button className=\"ax-attach__remove\" aria-label={\"Remove \" + file.name} onClick={() => onRemove(file.id ?? i)}>✕</button> : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ai/Checkpoint.d.ts

@@ -0,0 +1,3 @@
+/** Inline conversation checkpoint divider with optional restore action. */
+export interface CheckpointProps { label?: string; time?: string; onRestore?: () => void; }
+export declare function Checkpoint(props: CheckpointProps): JSX.Element;

package/dist/components/ai/Checkpoint.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_CHECKPOINT_CSS = `
+.ax-checkpoint { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
+.ax-checkpoint__line { flex: 1; height: 1px; background: var(--border-default); }
+.ax-checkpoint__chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); white-space: nowrap; }
+.ax-checkpoint__icon { width: 13px; height: 13px; color: var(--text-faint); }
+.ax-checkpoint__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
+.ax-checkpoint__time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.ax-checkpoint__restore { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding: 0; transition: color var(--dur-1) var(--ease-out); }
+.ax-checkpoint__restore:hover { color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-checkpoint-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-checkpoint-css";
+  s.textContent = AX_CHECKPOINT_CSS;
+  document.head.appendChild(s);
+}
+const Flag = /* @__PURE__ */ jsxs("svg", { className: "ax-checkpoint__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 22v-7" })
+] });
+function Checkpoint({ label = "Checkpoint", time, onRestore, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-checkpoint", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "ax-checkpoint__line" }),
+    /* @__PURE__ */ jsxs("span", { className: "ax-checkpoint__chip", children: [
+      Flag,
+      /* @__PURE__ */ jsx("span", { className: "ax-checkpoint__label", children: label }),
+      time ? /* @__PURE__ */ jsx("span", { className: "ax-checkpoint__time", children: time }) : null,
+      onRestore ? /* @__PURE__ */ jsx("button", { className: "ax-checkpoint__restore", onClick: onRestore, children: "↺ Restore" }) : null
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "ax-checkpoint__line" })
+  ] });
+}
+export {
+  Checkpoint
+};
+//# sourceMappingURL=Checkpoint.js.map

package/dist/components/ai/Checkpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkpoint.js","sources":["../../../src/components/ai/Checkpoint.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CHECKPOINT_CSS = `\n.ax-checkpoint { display: flex; align-items: center; gap: 12px; padding: 6px 0; }\n.ax-checkpoint__line { flex: 1; height: 1px; background: var(--border-default); }\n.ax-checkpoint__chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); white-space: nowrap; }\n.ax-checkpoint__icon { width: 13px; height: 13px; color: var(--text-faint); }\n.ax-checkpoint__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }\n.ax-checkpoint__time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }\n.ax-checkpoint__restore { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding: 0; transition: color var(--dur-1) var(--ease-out); }\n.ax-checkpoint__restore:hover { color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-checkpoint-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-checkpoint-css\";\n  s.textContent = AX_CHECKPOINT_CSS;\n  document.head.appendChild(s);\n}\n\nconst Flag = <svg className=\"ax-checkpoint__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><path d=\"M4 22v-7\"></path></svg>;\n\nexport function Checkpoint({ label = \"Checkpoint\", time, onRestore, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-checkpoint\", className].filter(Boolean).join(\" \")} {...rest}>\n      <span className=\"ax-checkpoint__line\"></span>\n      <span className=\"ax-checkpoint__chip\">\n        {Flag}\n        <span className=\"ax-checkpoint__label\">{label}</span>\n        {time ? <span className=\"ax-checkpoint__time\">{time}</span> : null}\n        {onRestore ? <button className=\"ax-checkpoint__restore\" onClick={onRestore}>↺ Restore</button> : null}\n      </span>\n      <span className=\"ax-checkpoint__line\"></span>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OAAO,qBAAC,OAAA,EAAI,WAAU,uBAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,4DAAA,CAA4D;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,WAAA,CAAW;AAAA,GAAO;AAEnQ,SAAS,WAAW,EAAE,QAAQ,cAAc,MAAM,WAAW,YAAY,IAAI,GAAG,QAAQ;AAC7F,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC1E,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;AAAA,IACtC,qBAAC,QAAA,EAAK,WAAU,uBACb,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA,OAAM;AAAA,MAC7C,OAAO,oBAAC,QAAA,EAAK,WAAU,uBAAuB,gBAAK,IAAU;AAAA,MAC7D,gCAAa,UAAA,EAAO,WAAU,0BAAyB,SAAS,WAAW,uBAAS,IAAY;AAAA,IAAA,GACnG;AAAA,IACA,oBAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;AAAA,EAAA,GACxC;AAEJ;"}

package/dist/components/ai/Confirmation.d.ts

@@ -0,0 +1,3 @@
+/** Tool-permission prompt: Allow / Deny with optional detail; shows a verdict once resolved. */
+export interface ConfirmationProps { title?: string; description?: React.ReactNode; detail?: React.ReactNode; allowLabel?: string; denyLabel?: string; resolved?: "allowed" | "denied"; onAllow?: () => void; onDeny?: () => void; }
+export declare function Confirmation(props: ConfirmationProps): JSX.Element;

package/dist/components/ai/Confirmation.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_CONFIRM_CSS = `
+.ax-confirm { border: 1px solid var(--border-strong); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }
+.ax-confirm__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
+.ax-confirm__icon { width: 16px; height: 16px; flex: none; color: var(--warn); }
+.ax-confirm__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); flex: 1; }
+.ax-confirm__body { padding: 0 14px 12px 40px; }
+.ax-confirm__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: var(--leading-body); }
+.ax-confirm__detail { margin-top: 10px; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); white-space: pre-wrap; word-break: break-word; }
+[data-theme="light"] .ax-confirm__detail { background: var(--bg-1); }
+.ax-confirm__actions { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-default); background: var(--surface-panel); }
+.ax-confirm__spacer { flex: 1; }
+.ax-confirm__btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; cursor: pointer; border-radius: var(--radius-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out); }
+.ax-confirm__btn--deny { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
+.ax-confirm__btn--deny:hover { background: var(--surface-raised); color: var(--text-body); }
+.ax-confirm__btn--allow { background: var(--accent); color: var(--accent-fg); }
+.ax-confirm__btn--allow:hover { background: var(--accent-hover); }
+.ax-confirm--resolved { opacity: 0.6; }
+.ax-confirm__verdict { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 12px 14px; border-top: 1px solid var(--border-default); }
+.ax-confirm__verdict--allowed { color: var(--ok); }
+.ax-confirm__verdict--denied { color: var(--danger); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-confirm-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-confirm-css";
+  s.textContent = AX_CONFIRM_CSS;
+  document.head.appendChild(s);
+}
+const Warn = /* @__PURE__ */ jsxs("svg", { className: "ax-confirm__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+function Confirmation({ title = "Confirm action", description, detail, allowLabel = "Allow", denyLabel = "Deny", resolved, onAllow, onDeny, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-confirm", resolved ? "ax-confirm--resolved" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-confirm__head", children: [
+      Warn,
+      /* @__PURE__ */ jsx("span", { className: "ax-confirm__title", children: title })
+    ] }),
+    description || detail ? /* @__PURE__ */ jsxs("div", { className: "ax-confirm__body", children: [
+      description ? /* @__PURE__ */ jsx("p", { className: "ax-confirm__desc", children: description }) : null,
+      detail ? /* @__PURE__ */ jsx("div", { className: "ax-confirm__detail", children: detail }) : null
+    ] }) : null,
+    resolved ? /* @__PURE__ */ jsx("div", { className: "ax-confirm__verdict ax-confirm__verdict--" + (resolved === "allowed" ? "allowed" : "denied"), children: resolved === "allowed" ? "✓ Allowed" : "✕ Denied" }) : /* @__PURE__ */ jsxs("div", { className: "ax-confirm__actions", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-confirm__spacer" }),
+      /* @__PURE__ */ jsx("button", { className: "ax-confirm__btn ax-confirm__btn--deny", onClick: onDeny, children: denyLabel }),
+      /* @__PURE__ */ jsx("button", { className: "ax-confirm__btn ax-confirm__btn--allow", onClick: onAllow, children: allowLabel })
+    ] })
+  ] });
+}
+export {
+  Confirmation
+};
+//# sourceMappingURL=Confirmation.js.map

package/dist/components/ai/Confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.js","sources":["../../../src/components/ai/Confirmation.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CONFIRM_CSS = `\n.ax-confirm { border: 1px solid var(--border-strong); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }\n.ax-confirm__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }\n.ax-confirm__icon { width: 16px; height: 16px; flex: none; color: var(--warn); }\n.ax-confirm__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); flex: 1; }\n.ax-confirm__body { padding: 0 14px 12px 40px; }\n.ax-confirm__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: var(--leading-body); }\n.ax-confirm__detail { margin-top: 10px; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); white-space: pre-wrap; word-break: break-word; }\n[data-theme=\"light\"] .ax-confirm__detail { background: var(--bg-1); }\n.ax-confirm__actions { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-default); background: var(--surface-panel); }\n.ax-confirm__spacer { flex: 1; }\n.ax-confirm__btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; cursor: pointer; border-radius: var(--radius-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out); }\n.ax-confirm__btn--deny { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }\n.ax-confirm__btn--deny:hover { background: var(--surface-raised); color: var(--text-body); }\n.ax-confirm__btn--allow { background: var(--accent); color: var(--accent-fg); }\n.ax-confirm__btn--allow:hover { background: var(--accent-hover); }\n.ax-confirm--resolved { opacity: 0.6; }\n.ax-confirm__verdict { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 12px 14px; border-top: 1px solid var(--border-default); }\n.ax-confirm__verdict--allowed { color: var(--ok); }\n.ax-confirm__verdict--denied { color: var(--danger); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-confirm-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-confirm-css\";\n  s.textContent = AX_CONFIRM_CSS;\n  document.head.appendChild(s);\n}\n\nconst Warn = <svg className=\"ax-confirm__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z\"></path><path d=\"M12 9v4M12 17h.01\"></path></svg>;\n\nexport function Confirmation({ title = \"Confirm action\", description, detail, allowLabel = \"Allow\", denyLabel = \"Deny\", resolved, onAllow, onDeny, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-confirm\", resolved ? \"ax-confirm--resolved\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-confirm__head\">\n        {Warn}\n        <span className=\"ax-confirm__title\">{title}</span>\n      </div>\n      {(description || detail) ? (\n        <div className=\"ax-confirm__body\">\n          {description ? <p className=\"ax-confirm__desc\">{description}</p> : null}\n          {detail ? <div className=\"ax-confirm__detail\">{detail}</div> : null}\n        </div>\n      ) : null}\n      {resolved ? (\n        <div className={\"ax-confirm__verdict ax-confirm__verdict--\" + (resolved === \"allowed\" ? \"allowed\" : \"denied\")}>\n          {resolved === \"allowed\" ? \"✓ Allowed\" : \"✕ Denied\"}\n        </div>\n      ) : (\n        <div className=\"ax-confirm__actions\">\n          <span className=\"ax-confirm__spacer\"></span>\n          <button className=\"ax-confirm__btn ax-confirm__btn--deny\" onClick={onDeny}>{denyLabel}</button>\n          <button className=\"ax-confirm__btn ax-confirm__btn--allow\" onClick={onAllow}>{allowLabel}</button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OAAO,qBAAC,OAAA,EAAI,WAAU,oBAAmB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,gFAAA,CAAgF;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,oBAAA,CAAoB;AAAA,GAAO;AAE7R,SAAS,aAAa,EAAE,QAAQ,kBAAkB,aAAa,QAAQ,aAAa,SAAS,YAAY,QAAQ,UAAU,SAAS,QAAQ,YAAY,IAAI,GAAG,QAAQ;AAC5K,8BACG,OAAA,EAAI,WAAW,CAAC,cAAc,WAAW,yBAAyB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC/G,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA,MAAA,CAAM;AAAA,IAAA,GAC7C;AAAA,IACE,eAAe,SACf,qBAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,MAAA,cAAc,oBAAC,KAAA,EAAE,WAAU,oBAAoB,uBAAY,IAAO;AAAA,MAClE,SAAS,oBAAC,OAAA,EAAI,WAAU,sBAAsB,kBAAO,IAAS;AAAA,IAAA,EAAA,CACjE,IACE;AAAA,IACH,WACC,oBAAC,OAAA,EAAI,WAAW,+CAA+C,aAAa,YAAY,YAAY,WACjG,UAAA,aAAa,YAAY,cAAc,YAC1C,IAEA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,0BACpC,UAAA,EAAO,WAAU,yCAAwC,SAAS,QAAS,UAAA,WAAU;AAAA,0BACrF,UAAA,EAAO,WAAU,0CAAyC,SAAS,SAAU,UAAA,WAAA,CAAW;AAAA,IAAA,EAAA,CAC3F;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/ai/Context.d.ts

@@ -0,0 +1,3 @@
+/** Context-window usage meter (tokens). Optionally splits input vs output; warns near the cap. */
+export interface ContextProps { used?: number; max?: number; input?: number; output?: number; label?: string; }
+export declare function Context(props: ContextProps): JSX.Element;

package/dist/components/ai/Context.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+const AX_CONTEXT_CSS = `
+.ax-context { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
+.ax-context__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.ax-context__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-context__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
+.ax-context__val b { color: var(--text-body); font-weight: var(--weight-medium); }
+.ax-context__track { display: flex; height: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-1); overflow: hidden; background: var(--surface-raised); }
+.ax-context__seg { height: 100%; }
+.ax-context__seg--in { background: var(--text-body); }
+.ax-context__seg--out { background: var(--text-faint); }
+.ax-context__seg--warn { background: var(--warn); }
+.ax-context__legend { display: flex; gap: 14px; }
+.ax-context__key { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.ax-context__dot { width: 7px; height: 7px; border-radius: 1px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-context-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-context-css";
+  s.textContent = AX_CONTEXT_CSS;
+  document.head.appendChild(s);
+}
+function fmt(n) {
+  if (n >= 1e3) return (n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1) + "k";
+  return String(n);
+}
+function Context({ used = 0, max = 128e3, input, output, label = "Context", className = "", ...rest }) {
+  const pct = Math.min(100, used / max * 100);
+  const near = pct >= 85;
+  const inPct = input != null ? input / max * 100 : pct;
+  const outPct = output != null ? output / max * 100 : 0;
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-context", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-context__top", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-context__label", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-context__val", children: [
+        /* @__PURE__ */ jsx("b", { children: fmt(used) }),
+        " / ",
+        fmt(max)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-context__track", children: input != null ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-context__seg " + (near ? "ax-context__seg--warn" : "ax-context__seg--in"), style: { width: inPct + "%" } }),
+      /* @__PURE__ */ jsx("span", { className: "ax-context__seg ax-context__seg--out", style: { width: outPct + "%" } })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "ax-context__seg " + (near ? "ax-context__seg--warn" : "ax-context__seg--in"), style: { width: pct + "%" } }) }),
+    input != null ? /* @__PURE__ */ jsxs("div", { className: "ax-context__legend", children: [
+      /* @__PURE__ */ jsxs("span", { className: "ax-context__key", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-context__dot", style: { background: near ? "var(--warn)" : "var(--text-body)" } }),
+        "Input ",
+        fmt(input)
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-context__key", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-context__dot", style: { background: "var(--text-faint)" } }),
+        "Output ",
+        fmt(output || 0)
+      ] })
+    ] }) : null
+  ] });
+}
+export {
+  Context
+};
+//# sourceMappingURL=Context.js.map

package/dist/components/ai/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../src/components/ai/Context.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CONTEXT_CSS = `\n.ax-context { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }\n.ax-context__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }\n.ax-context__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-context__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }\n.ax-context__val b { color: var(--text-body); font-weight: var(--weight-medium); }\n.ax-context__track { display: flex; height: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-1); overflow: hidden; background: var(--surface-raised); }\n.ax-context__seg { height: 100%; }\n.ax-context__seg--in { background: var(--text-body); }\n.ax-context__seg--out { background: var(--text-faint); }\n.ax-context__seg--warn { background: var(--warn); }\n.ax-context__legend { display: flex; gap: 14px; }\n.ax-context__key { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }\n.ax-context__dot { width: 7px; height: 7px; border-radius: 1px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-context-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-context-css\";\n  s.textContent = AX_CONTEXT_CSS;\n  document.head.appendChild(s);\n}\n\nfunction fmt(n) {\n  if (n >= 1000) return (n / 1000).toFixed(n % 1000 === 0 ? 0 : 1) + \"k\";\n  return String(n);\n}\n\nexport function Context({ used = 0, max = 128000, input, output, label = \"Context\", className = \"\", ...rest }) {\n  const pct = Math.min(100, (used / max) * 100);\n  const near = pct >= 85;\n  const inPct = input != null ? (input / max) * 100 : pct;\n  const outPct = output != null ? (output / max) * 100 : 0;\n  return (\n    <div className={[\"ax-context\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-context__top\">\n        <span className=\"ax-context__label\">{label}</span>\n        <span className=\"ax-context__val\"><b>{fmt(used)}</b> / {fmt(max)}</span>\n      </div>\n      <div className=\"ax-context__track\">\n        {input != null ? (\n          <React.Fragment>\n            <span className={\"ax-context__seg \" + (near ? \"ax-context__seg--warn\" : \"ax-context__seg--in\")} style={{ width: inPct + \"%\" }}></span>\n            <span className=\"ax-context__seg ax-context__seg--out\" style={{ width: outPct + \"%\" }}></span>\n          </React.Fragment>\n        ) : (\n          <span className={\"ax-context__seg \" + (near ? \"ax-context__seg--warn\" : \"ax-context__seg--in\")} style={{ width: pct + \"%\" }}></span>\n        )}\n      </div>\n      {input != null ? (\n        <div className=\"ax-context__legend\">\n          <span className=\"ax-context__key\"><span className=\"ax-context__dot\" style={{ background: near ? \"var(--warn)\" : \"var(--text-body)\" }}></span>Input {fmt(input)}</span>\n          <span className=\"ax-context__key\"><span className=\"ax-context__dot\" style={{ background: \"var(--text-faint)\" }}></span>Output {fmt(output || 0)}</span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,SAAS,IAAI,GAAG;AACd,MAAI,KAAK,IAAM,SAAQ,IAAI,KAAM,QAAQ,IAAI,QAAS,IAAI,IAAI,CAAC,IAAI;AACnE,SAAO,OAAO,CAAC;AACjB;AAEO,SAAS,QAAQ,EAAE,OAAO,GAAG,MAAM,OAAQ,OAAO,QAAQ,QAAQ,WAAW,YAAY,IAAI,GAAG,QAAQ;AAC7G,QAAM,MAAM,KAAK,IAAI,KAAM,OAAO,MAAO,GAAG;AAC5C,QAAM,OAAO,OAAO;AACpB,QAAM,QAAQ,SAAS,OAAQ,QAAQ,MAAO,MAAM;AACpD,QAAM,SAAS,UAAU,OAAQ,SAAS,MAAO,MAAM;AACvD,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA,OAAM;AAAA,MAC3C,qBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAG,UAAA,IAAI,IAAI,EAAA,CAAE;AAAA,QAAI;AAAA,QAAI,IAAI,GAAG;AAAA,MAAA,EAAA,CAAE;AAAA,IAAA,GACnE;AAAA,IACA,oBAAC,SAAI,WAAU,qBACZ,mBAAS,OACR,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,sBAAsB,OAAO,0BAA0B,wBAAwB,OAAO,EAAE,OAAO,QAAQ,IAAA,EAAI,CAAG;AAAA,MAC/H,oBAAC,UAAK,WAAU,wCAAuC,OAAO,EAAE,OAAO,SAAS,MAAI,CAAG;AAAA,IAAA,EAAA,CACzF,IAEA,oBAAC,QAAA,EAAK,WAAW,sBAAsB,OAAO,0BAA0B,wBAAwB,OAAO,EAAE,OAAO,MAAM,IAAA,GAAO,GAEjI;AAAA,IACC,SAAS,OACR,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,mBAAkB,OAAO,EAAE,YAAY,OAAO,gBAAgB,mBAAA,EAAmB,CAAG;AAAA,QAAO;AAAA,QAAO,IAAI,KAAK;AAAA,MAAA,GAAE;AAAA,MAC/J,qBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,mBAAkB,OAAO,EAAE,YAAY,uBAAuB;AAAA,QAAO;AAAA,QAAQ,IAAI,UAAU,CAAC;AAAA,MAAA,EAAA,CAAE;AAAA,IAAA,EAAA,CAClJ,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/ai/Conversation.d.ts

@@ -0,0 +1,3 @@
+/** Auto-scrolling chat thread container; sticks to bottom unless the user scrolls up (shows a "jump to latest" pill). */
+export interface ConversationProps { autoStick?: boolean; children?: React.ReactNode; }
+export declare function Conversation(props: ConversationProps): JSX.Element;