@parallelworks/ui 0.51.0 → 0.52.0

package/README.md

@@ -18,7 +18,27 @@ so an application ships only what it imports:
 | `./theme.css`, `./base.css`, `./fonts.css`, `./styles.css`, `./logviewer.css`, `./ai.css` | stylesheets |
 
 Hosts bind strings, navigation, data hooks and the workflow engine through
-`UIProvider`, which also shows the package's toasts.
+`UIProvider`, which also shows the package's toasts:
+
+```tsx
+<UIProvider
+  strings={{ common: { save: 'Speichern' }, fileExplorer: { preview: { open: 'Öffnen' } } }}
+  navigation={{ goTo: navigate }}
+  data={{ useRunFile, usePersistedState }}
+  slots={{ link: RouterLink }}
+  engine={() => import('./engine').then((m) => m.engine)}
+>
+  {app}
+</UIProvider>
+```
+
+Every string has an English default, and `strings` overrides any of them at
+any depth. Each concern has its own context, compared by value, so a host may
+pass object literals: a render that passes equal ones re-renders nothing, and
+new `data` re-renders only what reads data. `navigation` is read when the
+package navigates and never re-renders anything. Define slot components and
+string functions outside a component: one made each render is a new value, and
+a new slot component remounts what it renders.
 
 ## Which component?
 
@@ -27,7 +47,8 @@ Each need has one component. Reach for it before styling markup by hand.
 | Need | Use |
 | --- | --- |
 | An action | `Button`; `IconButton` for an icon alone, named by its tooltip |
-| A link or another component's trigger that looks like a button | `buttonClasses()` |
+| Navigation, in any form | the component's `href` (see [Links](#links)); `AppLink` for a link of your own |
+| Another component's trigger that looks like a button | `buttonClasses()` |
 | A link out of the app | `ExternalLink` |
 | Work under way | `Loader`; `Skeleton` in a `LoadingRegion` for the shape of content still loading |
 | Nothing to show yet, or nothing matches | `EmptyState` |
@@ -35,7 +56,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
 | A one-time code, such as a sign-in check | `OneTimeCodeInput` |
 | A labeled value nobody edits, among fields | `FieldValue` in a `Field` |
-| A record's details, such as in a drawer or a card: names and values on their own | `DescriptionList` of `DescriptionListItem`s; `copy` on an ID, `mono` on a path, `variant="card"` to frame them |
+| A record's details, such as in a drawer or a card: names and values on their own | `DescriptionList` of `DescriptionListItem`s; `copy` on an ID, `mono` on a path, `variant="card"` to frame them; titled lists in a `DescriptionListGroup` to share one label column |
 | An error beside a control outside a `Field` | `ErrorText` |
 | A dense field in a toolbar or a table cell | any field control with `size="sm"`; a width in `className` wins, and `cx` merges classes the same way |
 | On or off | `Switch`; `Checkbox` in a list of things to tick, several of which may be on |
@@ -45,6 +66,8 @@ Each need has one component. Reach for it before styling markup by hand.
 | A value from a list | `Select`, or `Combobox` when the list needs filtering |
 | Free text with suggestions, or tags | `Autocomplete`; `Combobox` with `multiple creatable` |
 | A range | `Slider` |
+| A page's breadcrumbs, title and commands | `PageHeader`, shown by the shell's `PageHeaderBar` (see [Page header](#page-header)) |
+| An action in the page header | `PageHeaderAction`; `PageHeaderAddButton` for "+ Add" or "+ Create"; `PageHeaderMenu` for the "…" menu |
 | A titled part of a page or form | `Section` |
 | More detail under a line | `Disclosure` |
 | Views of one thing | `Tabs` |
@@ -52,8 +75,9 @@ Each need has one component. Reach for it before styling markup by hand.
 | A panel of controls anchored to a trigger | `Popover` |
 | A hint for a control | `Tooltip`; `InfoTip` for help everyone must reach |
 | A preview of what a link leads to | `HoverCard` |
-| A task that blocks the page | `Modal`; `ConfirmModal` to confirm one action |
+| A task that blocks the page | `Modal`, laid out with `title`, `description` and `footer` as a `Drawer` is; `ConfirmModal` to confirm one action; `CreateModal` to name and create one thing |
 | A panel beside the page | `Drawer` |
+| A message set into the page: guidance, a warning, an error | `Callout`; `variant="bar"` across a surface under its header |
 | A passing notice, or the progress of work in the background | `toast` |
 | How full something is, how far a task has come | `Meter`, `ProgressBar` |
 | Pages of a long list | `Pagination` |
@@ -61,9 +85,12 @@ Each need has one component. Reach for it before styling markup by hand.
 | A person | `Avatar` |
 | A status in words | `StatusBadge`, or `StatusDot` beside text that says it |
 | A run's, job's or step's status beside its name | `RunStatusIcon`; `StatusBadge` with `runStatusTone` to say it in words |
-| A copy action | `useCopy`, or `CopyToClipboard` for its button |
+| A copy action | `CopyButton`; `CopyCodeBlock` for a command or snippet; `useCopy` for a menu row or a control of your own |
 | A live relative time or duration | `RelativeTime`, `Elapsed` |
 | Rendered Markdown | `Markdown` |
+| Code or YAML to read or edit | `Editor` from `./editor`; `EditorField` as a form field, `FormCodePanel` for a form's values as JSON |
+| A run's jobs, steps, logs and annotations | `DependencyGraph` from `./graph`, as a graph or a list |
+| A workflow's jobs drawn from its YAML, or edited by hand | `DependencyGraphPreview` from `./graph`, editable with an `editor`; `InputsFormEditor` for its run form |
 | A value that survives a reload | `usePersistedState` |
 | Choosing the app's colors | `ThemeEditor`, applied with `useApplyTheme` |
 
@@ -102,6 +129,71 @@ Some pairs look alike and are split on purpose:
   A `Combobox` filters as you type, for a list long enough to search, and is the
   one that takes several values, new ones, or free text (`Autocomplete`).
 
+## Page header
+
+A page declares its header in one place, and the shell shows it:
+
+```tsx
+// The shell, once: the provider above the bar and the routes.
+<PageHeaderProvider>
+  <Sidebar />
+  <div className="flex min-w-0 flex-1 flex-col">
+    <PageHeaderBar compact={fullBleed} persistent={isMobile} />
+    <main><Outlet /></main>
+  </div>
+</PageHeaderProvider>
+
+// A page.
+<PageHeader
+  breadcrumbs={[{ label: 'Clusters', href: '/clusters' }, { label: cluster?.name ?? '' }]}
+  titleActions={
+    <>
+      <PageHeaderAction icon={EditIcon} iconOnly label="Rename" onClick={rename} />
+      <PageHeaderMenu items={menu} />
+    </>
+  }
+  actions={
+    <PageHeaderAction icon={SaveIcon} label="Save" onClick={save} disabled={!dirty} disabledReason="No changes" />
+  }
+/>
+```
+
+- **`breadcrumbs`** is the whole trail, ending with the page itself, which the
+  bar makes the page's one `h1` (`aria-current="page"`). Don't render another
+  `h1`. An empty label, such as a name still loading, shows a placeholder. The
+  trail is a list in a `nav` landmark named by the strings' `breadcrumb`. A
+  trail too wide for its bar folds its ancestors into a "…" menu of links
+  (named by `showFullPath`), keeping the parent when it fits beside the page's
+  name; the name truncates last, with the full name on hover.
+- **`titleActions`** sit beside the title, for actions on the page's subject.
+  **`actions`** sit at the end of the bar, for the page's commands: a detail
+  page's Start, Stop or Terminal go here, not in a row of buttons below it.
+  `ActionToolbar` (from `./list`) is for the controls of a panel on the page,
+  such as a log's follow and refresh: its buttons are outlined, and `primary`
+  fills the one, if any, the panel leads to.
+  **`toolbar`** is a row under the bar, such as tabs or a time range.
+- **`hidden`** takes the bar away while the page is mounted, for a page that
+  fills the window.
+
+The actions render in the page's React tree, so they keep its context and
+state, and show in the bar through portals; they come before the page's content
+in focus order. Any component may render a `PageHeader`, such as a form adding
+its Save button: the bar shows the actions of all of them, outermost first,
+and the trail of the last one rendered that has one. A layout renders its own
+before its `Outlet`, so a page under it that names a trail replaces the
+layout's, and a page that doesn't keeps it. Changing pages swaps the header
+before paint, and a page's actions go when it unmounts.
+
+`PageHeaderBar` renders nothing while the page declares nothing, unless it is
+`persistent`, as on a narrow screen where it holds the `navToggle` slot. The
+`breadcrumbPin` slot renders after the trail. Without a `PageHeaderProvider`, a
+`PageHeader` renders its bar in place, for a page with no shell.
+
+The header's actions share one control: a link (`href`, with `external` for a
+new tab), a button (`onClick`, with `pressed` for a toggle) or a menu (`menu`).
+`destructive` takes the error color. A `disabled` one stays focusable and says
+its `disabledReason` in its tooltip and name.
+
 ## Menu and row actions
 
 A `MenuAction`, and the `RowAction` and `ToolbarAction` built on it, does
@@ -317,13 +409,42 @@ Every pressable thing has one look, from `buttonClasses({ variant, size, iconOnl
 
 Sizes are `xs`, `sm` and `md`. `Button` and `IconButton` apply it. An
 `IconButton` is named by its tooltip, and takes `pressed` for a toggle and
-`dot` for an indicator. Pass `buttonClasses()` to a host link or to another
-component's trigger rather than styling a button by hand. A pressed toggle
+`dot` for an indicator. Either takes `href` to be a link in the same look. Pass
+`buttonClasses()` to another component's trigger rather than styling a button
+by hand. A pressed toggle
 (`aria-pressed`) and an open popup's trigger read as selected.
 
 `Loader` is the one spinner. Inside a button, or beside text that already
 says what is happening, use `<Loader inline decorative />`.
 
+## Links
+
+Navigation is a link, never a button whose `onClick` navigates: a link opens
+in a new tab with a middle or modified click, can be copied, shows its URL on
+hover, and reads as a link. Every component that can navigate takes `href`,
+with `reloadDocument` for a path the host's router doesn't serve and `target`
+where it opens elsewhere, and renders it through `AppLink`:
+
+| Surface | Navigates with |
+| --- | --- |
+| `Button`, `IconButton`, `Card` | `href` |
+| Menu rows, `RowAction`s (a list row's menu and pinned buttons), `ToolbarAction`s | `href` on the action, with `target: '_blank'` for a new tab |
+| `PageHeaderAction`, `PageHeaderAddButton`, `PageHeader` breadcrumbs | `href`; `external` opens a new tab |
+| `Tabs` that are pages, `Pagination` | `href` on the item, `pageHref` |
+| A list row | `ListRow` `href` with a `NameCell` of the same `href`: the name's link covers the row |
+| A toast's action | `action: { label, href }` |
+| `SidebarRailItem` | `href`; `onSelect` then runs only on a plain click |
+| `EmptyState`, `SettingsCard` actions | a `Button` with `href` |
+
+`AppLink` routes in-app URLs through the provider's `link` slot, so a host
+binds its router's `Link` there once. That link receives the whole URL, search
+and hash included, and routes it client-side on a plain click, leaving
+modified and middle clicks to the browser. `AppLink` passes every href through
+`safeUrl`, gives a `reloadDocument` or another origin a plain anchor, and
+renders a disabled link with no href and `aria-disabled`, still focusable for
+its tooltip. Work a link's `onClick` does beside navigating, such as closing a
+drawer, belongs to a plain click only: check `isPlainClick(event)`.
+
 ## Toasts
 
 `toast` shows a notice from anywhere, a component or not. `UIProvider` renders
@@ -358,6 +479,7 @@ root:
 | ------------------- | ----------------------------------------------------------------------- |
 | `--app-inset-top`   | The height of a fixed top bar. Drawers and toasts start below it.       |
 | `--app-inset-start` | The width of a fixed sidebar on the start side. Toasts center over the page beside it, and a drawer at its widest leaves that strip, and never less than 2.5rem. Update it when the sidebar collapses. |
+| `--table-header-top` | How far below the top of its scrolling box a table's sticky header row stops (`Table stickyHeader`, which list tables use). Set it on the scrolling box, or an ancestor, when something else sticks at that box's top, such as a page header in a page that scrolls as a whole. Inside `ListPage` the rows scroll in their own box below the header and toolbar, so it stays 0. |
 
 ```ts
 document.documentElement.style.setProperty('--app-inset-top', '56px')
@@ -413,6 +535,9 @@ meaning across the apps.
   record. `RemoveUserIcon` takes someone out of a group or project, while
   `DisableUserIcon` turns off their account. `ChangesRequestedIcon` asks for
   changes to something sent, while `FlaggedIcon` marks an item for attention.
+  `ProjectIcon` is a project, while `FolderIcon` is a folder of files.
+  `LibraryIcon` is a collection of write-ups to browse, while `NotebookIcon`
+  is one notebook.
   `PendingIcon` is a requirement not met yet and `NotRunningIcon` a run not
   started; they share the empty circle, so keep them out of the same list.
 - **Adding an icon:** pick the [Lucide glyph](https://lucide.dev/icons) and add
@@ -477,36 +602,52 @@ configureEditorYaml([
 ])
 ```
 
-Without them, those views still edit, but check nothing against the schema.
+Without them, those views still edit, but check nothing against the schema. Registering a schema
+under a `uri` already registered replaces it, and `configureEditorYaml` returns a function that
+removes what it added.
+
+`Editor` is controlled like an input: pass `value` and `onChange`, and hand back the text it sent.
+Text that comes back unchanged leaves the cursor alone, and a reset from outside keeps the cursor
+and scroll where they were. Each editor has a model of its own unless it is given a `path`, and it
+is named `UIStrings.common.codeEditor` unless given an `ariaLabel`.
 
 ## AI chat
 
 `@parallelworks/ui/ai` is a chat interface (thread, composer, streaming,
 sidebar, model selector, attachments, sharing, branching) decoupled from any
 backend through a `ChatAdapter`. State lives in `ChatProvider` and is read
-with `useChat`:
+with `useChat`; the reply being streamed is read with `useChatStream`, apart
+from the rest, so only what draws the reply re-renders for each token:
 
 ```tsx
-import { ChatProvider, ChatLayout, ChatThread } from '@parallelworks/ui/ai'
+import { ChatEmptyState, ChatLayout, ChatProvider, ChatThread } from '@parallelworks/ui/ai'
 import { createMockChatAdapter } from '@parallelworks/ui/ai/mock'
 
-export function Chat() {
+export function Chat({ conversationId }: { conversationId: string | null }) {
   return (
     <ChatProvider
       adapter={createMockChatAdapter()}
       currentUser={{ id: 'u1', username: 'you', name: 'You' }}
-      navigation={{ toConversation: id => {}, toNewChat: () => {}, toAttachments: () => {} }}
+      navigation={{ toConversation: id => {}, toNewChat: () => {} }}
+      activeConversationId={conversationId}
     >
       <ChatLayout>
-        <ChatThread />
+        {conversationId ? <ChatThread conversationId={conversationId} /> : <ChatEmptyState />}
       </ChatLayout>
     </ChatProvider>
   )
 }
 ```
 
+The chat's links (each conversation, a new chat, attachments, and the
+`extraLinks` pages) render through the config's `LinkComponent`, which gets a
+`ChatLinkTarget`; without one they go to `/chat/:id`, `/chat` and
+`/chat/attachments` through `UIProvider`'s link slot. Navigation in the chat is
+these links, so `navigation` handles only the moves that aren't clicks, such as
+keyboard shortcuts.
+
 `ChatLayout sidebarMode="auto"` shows the conversation list as a drawer over
-the thread when the chat is narrower than `drawerBelowPx` (768 by default),
+the thread when the chat is narrower than `drawerBelowPx` (`DRAWER_BELOW_PX`, 896, by default),
 measured on the chat's own box; `"drawer"` always does, and `"inline"` (the
 default) never does. The reader's toggle drives the list unless the host
 passes `sidebar` (`'expanded' | 'collapsed' | 'hidden'`) and `drawerOpen` to

package/dist/ai/agent/toolStrings.d.ts

@@ -34,4 +34,6 @@ export interface ToolStrings {
         sentence: (clauses: string[]) => string;
     };
 }
+/** A count and its noun in English: "1 file", "1,024 files". */
+export declare const countOf: (n: number, one: string, other: string) => string;
 export declare const defaultToolStrings: ToolStrings;

package/dist/ai/agent/toolStrings.js

@@ -1,30 +1,32 @@
 //#region src/ai/agent/toolStrings.ts
-var count = (n, one, many) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+var englishPlural = new Intl.PluralRules("en");
+/** A count and its noun in English: "1 file", "1,024 files". */
+var countOf = (n, one, other) => `${n.toLocaleString()} ${englishPlural.select(n) === "one" ? one : other}`;
 var defaultToolStrings = {
 	noOutput: "(no output)",
-	firstLine: (line, moreLines) => moreLines > 0 ? `${line}  (+${count(moreLines, "line", "lines")})` : line,
+	firstLine: (line, moreLines) => moreLines > 0 ? `${line}  (+${countOf(moreLines, "line", "lines")})` : line,
 	emptyFile: "Empty file",
 	readImage: "Read image",
-	readLines: (lines, more) => more > 0 ? `Read ${count(lines, "line", "lines")} (${more.toLocaleString()} more)` : `Read ${count(lines, "line", "lines")}`,
+	readLines: (lines, more) => more > 0 ? `Read ${countOf(lines, "line", "lines")} (${more.toLocaleString()} more)` : `Read ${countOf(lines, "line", "lines")}`,
 	noMatches: "No matches",
-	foundMatches: (matches, files) => `Found ${count(matches, "match", "matches")} in ${count(files, "file", "files")}`,
-	foundFiles: (files) => `Found ${count(files, "file", "files")}`,
+	foundMatches: (matches, files) => `Found ${countOf(matches, "match", "matches")} in ${countOf(files, "file", "files")}`,
+	foundFiles: (files) => `Found ${countOf(files, "file", "files")}`,
 	noFilesMatched: "No files matched",
 	truncated: (summary) => `${summary} (truncated)`,
-	exitCode: (code, lines) => lines > 0 ? `Exit ${code} · ${count(lines, "line", "lines")}` : `Exit ${code}`,
-	httpStatus: (status, lines) => `HTTP ${status} · ${count(lines, "line", "lines")}`,
+	exitCode: (code, lines) => lines > 0 ? `Exit ${code} · ${countOf(lines, "line", "lines")}` : `Exit ${code}`,
+	httpStatus: (status, lines) => `HTTP ${status} · ${countOf(lines, "line", "lines")}`,
 	outputTruncated: (summary) => `${summary} (output truncated)`,
-	edited: (added, removed) => added > 0 && removed > 0 ? `Added ${count(added, "line", "lines")}, removed ${count(removed, "line", "lines")}` : added > 0 ? `Added ${count(added, "line", "lines")}` : removed > 0 ? `Removed ${count(removed, "line", "lines")}` : "",
-	wrote: (lines, path) => path ? `Wrote ${count(lines, "line", "lines")} to ${path}` : `Wrote ${count(lines, "line", "lines")}`,
+	edited: (added, removed) => added > 0 && removed > 0 ? `Added ${countOf(added, "line", "lines")}, removed ${countOf(removed, "line", "lines")}` : added > 0 ? `Added ${countOf(added, "line", "lines")}` : removed > 0 ? `Removed ${countOf(removed, "line", "lines")}` : "",
+	wrote: (lines, path) => path ? `Wrote ${countOf(lines, "line", "lines")} to ${path}` : `Wrote ${countOf(lines, "line", "lines")}`,
 	rollup: {
-		searched: (n) => `searched for ${count(n, "pattern", "patterns")}`,
-		read: (n) => `read ${count(n, "file", "files")}`,
-		ranCommands: (n) => `ran ${count(n, "shell command", "shell commands")}`,
-		fetched: (n) => `fetched ${count(n, "URL", "URLs")}`,
-		loadedSkills: (n) => `loaded ${count(n, "skill", "skills")}`,
-		sentMessages: (n) => `sent ${count(n, "message", "messages")}`,
-		calledMcpTools: (n) => `called ${count(n, "MCP tool", "MCP tools")}`,
-		ranTools: (n) => `ran ${count(n, "tool", "tools")}`,
+		searched: (n) => `searched for ${countOf(n, "pattern", "patterns")}`,
+		read: (n) => `read ${countOf(n, "file", "files")}`,
+		ranCommands: (n) => `ran ${countOf(n, "shell command", "shell commands")}`,
+		fetched: (n) => `fetched ${countOf(n, "URL", "URLs")}`,
+		loadedSkills: (n) => `loaded ${countOf(n, "skill", "skills")}`,
+		sentMessages: (n) => `sent ${countOf(n, "message", "messages")}`,
+		calledMcpTools: (n) => `called ${countOf(n, "MCP tool", "MCP tools")}`,
+		ranTools: (n) => `ran ${countOf(n, "tool", "tools")}`,
 		sentence: (clauses) => {
 			const s = clauses.join(", ");
 			return s.charAt(0).toUpperCase() + s.slice(1);
@@ -32,4 +34,4 @@ var defaultToolStrings = {
 	}
 };
 //#endregion
-export { defaultToolStrings };
+export { countOf, defaultToolStrings };

package/dist/ai/ai.css

@@ -338,6 +338,18 @@
   color: transparent;
 }
 
+/* The shimmer sweeps forever, so under reduced motion it holds still: the
+ * text drawn plainly in the accent, the color the sweep passes through. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-shimmer {
+    animation: none;
+  }
+  .text-shimmer {
+    background-image: none;
+    color: var(--theme-accent, #06354f);
+  }
+}
+
 /* Entrance animation for chat messages (CSS replacement for a JS motion lib).
  * Only `from` is defined so elements settle at their natural styles (queued
  * messages render at reduced opacity). */

package/dist/ai/components/AllocationSelector.js

@@ -8,7 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import useSWR from "swr";
 //#region src/ai/components/AllocationSelector.tsx
-var money = (amount) => `$${amount.toFixed(2)}`;
+var dollars = new Intl.NumberFormat(void 0, {
+	style: "currency",
+	currency: "USD"
+});
+var money = (amount) => dollars.format(amount);
 /** Which allocation an organization model bills, with its spend so far. Shows
 *  only for an organization model, and picks the first allocation for it. */
 function AllocationSelector() {

package/dist/ai/components/AttachmentManager.js

@@ -1,10 +1,11 @@
 import { cx } from "../../cx.js";
 import { DownloadIcon, FileIcon, TrashIcon } from "../../icons.js";
 import { safeUrl } from "../../safeUrl.js";
-import { EmptyState } from "../../components/EmptyState.js";
 import { Loader } from "../../components/Loader.js";
 import { toast } from "../../components/Toast.js";
+import { Tooltip } from "../../components/Tooltip.js";
 import { useStrings } from "../../components/Provider.js";
+import { EmptyState } from "../../components/EmptyState.js";
 import { formatBytes } from "../../format.js";
 import { RelativeTime } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
@@ -14,16 +15,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import useSWRInfinite from "swr/infinite";
 //#region src/ai/components/AttachmentManager.tsx
-function triggerDownload(url, filename) {
-	const href = safeUrl(url);
-	if (!href) return;
-	const a = document.createElement("a");
-	a.href = href;
-	a.download = filename;
-	document.body.appendChild(a);
-	a.click();
-	document.body.removeChild(a);
-}
 function AttachmentManager() {
 	const { adapter } = useChat();
 	const t = useChatConfig().strings.attachmentManager;
@@ -76,54 +67,72 @@ function AttachmentManager() {
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
 						children: attachments.map((att) => {
-							const downloadUrl = attachmentsAdapter.downloadUrl(att.id);
+							const downloadUrl = safeUrl(attachmentsAdapter.downloadUrl(att.id));
+							const name = att.filename || t.unnamedFile;
 							const isDeleting = deleting === att.id;
 							const thumbnail = thumbnails[att.id];
 							const showThumbnail = att.contentType?.startsWith("image/") && thumbnail !== "broken";
-							const openProps = attachmentsAdapter.onOpen ? {
-								onClick: () => attachmentsAdapter.onOpen?.(att),
-								role: "button",
-								style: { cursor: "pointer" }
-							} : {};
+							const preview = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileIcon, {
+								"aria-hidden": "true",
+								className: "w-8 h-8 theme-muted-text"
+							}), showThumbnail && /* @__PURE__ */ jsx("img", {
+								src: downloadUrl,
+								alt: "",
+								className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
+								loading: "lazy",
+								onLoad: () => markThumbnail(att.id, "loaded"),
+								onError: () => markThumbnail(att.id, "broken")
+							})] });
+							const previewClasses = "relative aspect-square w-full bg-(--theme-muted-panel-bg) flex items-center justify-center";
 							return /* @__PURE__ */ jsxs("div", {
 								className: cx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "relative aspect-square bg-(--theme-muted-panel-bg) flex items-center justify-center",
-									...openProps,
-									children: [/* @__PURE__ */ jsx(FileIcon, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
-										src: downloadUrl,
-										alt: att.filename || "Image",
-										className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
-										loading: "lazy",
-										onLoad: () => markThumbnail(att.id, "loaded"),
-										onError: () => markThumbnail(att.id, "broken")
-									})]
+								children: [attachmentsAdapter.onOpen ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => attachmentsAdapter.onOpen?.(att),
+									"aria-label": t.open(name),
+									className: cx(previewClasses, "cursor-pointer"),
+									children: preview
+								}) : /* @__PURE__ */ jsx("div", {
+									className: previewClasses,
+									children: preview
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "p-3 text-xs bg-(--theme-panel-bg) flex items-center justify-between gap-1",
 									children: [/* @__PURE__ */ jsxs("div", {
 										className: "min-w-0 flex-1",
 										children: [/* @__PURE__ */ jsx("p", {
 											className: "truncate font-medium text-(--theme-app)",
-											children: att.filename || "File"
+											children: name
 										}), /* @__PURE__ */ jsxs("p", {
 											className: "truncate theme-muted-text",
 											children: [att.size ? formatBytes(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment, { children: [att.size ? " · " : "", /* @__PURE__ */ jsx(RelativeTime, { value: att.uploadedAt })] })]
 										})]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-0.5 flex-shrink-0",
-										children: [/* @__PURE__ */ jsx("button", {
-											type: "button",
-											onClick: () => triggerDownload(downloadUrl, att.filename || "File"),
-											className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
-											title: common.download,
-											children: /* @__PURE__ */ jsx(DownloadIcon, { className: "w-4 h-4" })
-										}), /* @__PURE__ */ jsx("button", {
-											type: "button",
-											onClick: () => handleDelete(att.id),
-											disabled: isDeleting,
-											className: "p-1.5 rounded-lg hover:bg-red-500/15 theme-muted-text hover:text-red-600 transition-colors",
-											title: common.delete,
-											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-4 h-4" })
+										children: [/* @__PURE__ */ jsx(Tooltip, {
+											content: common.download,
+											children: /* @__PURE__ */ jsx("a", {
+												href: downloadUrl,
+												download: att.filename || true,
+												"aria-label": t.download(name),
+												className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
+												children: /* @__PURE__ */ jsx(DownloadIcon, {
+													"aria-hidden": "true",
+													className: "w-4 h-4"
+												})
+											})
+										}), /* @__PURE__ */ jsx(Tooltip, {
+											content: common.delete,
+											children: /* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: () => handleDelete(att.id),
+												disabled: isDeleting,
+												"aria-label": t.remove(name),
+												className: "p-1.5 rounded-lg hover:bg-(--theme-error-muted) theme-muted-text hover:text-(--theme-error-text) transition-colors",
+												children: /* @__PURE__ */ jsx(TrashIcon, {
+													"aria-hidden": "true",
+													className: "w-4 h-4"
+												})
+											})
 										})]
 									})]
 								})]

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

@@ -1,3 +1,4 @@
+import { type Ref } from 'react';
 export interface AttachmentUploadHandle {
     addFiles: (files: FileList | File[]) => void;
 }
@@ -19,6 +20,7 @@ interface AttachmentUploadProps {
     disabled?: boolean;
     maxFiles?: number;
     maxFileSize?: number;
+    ref?: Ref<AttachmentUploadHandle> | undefined;
 }
-declare const AttachmentUpload: import("react").ForwardRefExoticComponent<AttachmentUploadProps & import("react").RefAttributes<AttachmentUploadHandle>>;
-export default AttachmentUpload;
+export default function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled, maxFiles, maxFileSize, ref, }: AttachmentUploadProps): import("react").JSX.Element;
+export {};

package/dist/ai/components/AttachmentUpload.js

@@ -7,7 +7,7 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { mutate } from "swr";
 //#region src/ai/components/AttachmentUpload.tsx
 var DEFAULT_MAX_FILE_SIZE = 26214400;
@@ -18,7 +18,7 @@ function getFileIcon(mimeType) {
 	if (mimeType === "application/pdf") return PdfIcon;
 	return FileIcon;
 }
-var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE }, ref) {
+function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE, ref }) {
 	const { adapter } = useChat();
 	const t = useChatConfig().strings.attachmentUpload;
 	const { common } = useStrings();
@@ -125,7 +125,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			children: attachments.map((attachment, index) => {
 				const Icon = getFileIcon(attachment.mimeType);
 				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-(--theme-error)"),
 					children: [
 						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
 						/* @__PURE__ */ jsx("span", {
@@ -137,22 +137,22 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 							children: formatBytes(attachment.size)
 						}),
 						attachment.uploading && /* @__PURE__ */ jsx("span", {
-							className: "text-xs text-blue-500 animate-pulse",
+							className: "text-xs theme-muted-text animate-pulse",
 							children: t.uploading
 						}),
 						attachment.error && /* @__PURE__ */ jsx("span", {
 							role: "img",
 							"aria-label": attachment.error,
 							title: attachment.error,
-							children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 text-red-500" })
+							children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 text-(--theme-error)" })
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => handleRemove(index),
-							className: "p-0.5 rounded hover:bg-red-500/10",
+							className: "p-0.5 rounded hover:bg-(--theme-error-muted)",
 							title: common.remove,
 							disabled,
-							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
+							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-(--theme-error)" })
 						})
 					]
 				}, attachment.id || index);
@@ -162,7 +162,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
 			onDrop: handleDrop,
-			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-(--theme-accent) bg-(--theme-accent)/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 			onClick: disabled ? void 0 : handleClick,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",
@@ -173,6 +173,6 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			})]
 		})]
 	})] });
-});
+}
 //#endregion
 export { AttachmentUpload as default };

package/dist/ai/components/BlockedGroupBanner.js

@@ -1,8 +1,8 @@
-import { WarningIcon } from "../../icons.js";
+import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { getProviderKeyFromModelId } from "./ModelSelector.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/ai/components/BlockedGroupBanner.tsx
 function BlockedGroupBanner() {
 	const { strings } = useChatConfig();
@@ -11,18 +11,12 @@ function BlockedGroupBanner() {
 	const providerKey = getProviderKeyFromModelId(selectedProvider);
 	const provider = providers.find((p) => `${p.user}:${p.name}` === providerKey);
 	if (!provider?.groupBlocked || !provider.group) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
-		children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-w-0",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium text-amber-700",
-				children: strings.blockedGroup.title.replace("{group}", provider.group)
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-amber-600/80 mt-0.5",
-				children: strings.blockedGroup.message
-			})]
-		})]
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: "warning",
+		size: "sm",
+		className: "mx-4 mt-2",
+		title: strings.blockedGroup.title(provider.group),
+		children: strings.blockedGroup.message
 	});
 }
 //#endregion