@parallelworks/ui 0.33.0 → 0.35.0

package/README.md

@@ -87,6 +87,18 @@ The engine converts input definitions into the form's field tree, resolves
 grouping, step labels and log paths. The form and graph throw without one; the
 editor and log viewer fall back to plain behavior.
 
+An engine can also carry `editing` (`WorkflowEditing`), the workflow model the
+graph defers to for where jobs go: each job's slot from its `position` or a
+stored layout, a matrix drawn as a run lists its jobs, and needs that wait for
+any one of a matrix's jobs. A host built on a workflow package passes that
+package's functions of the same names:
+
+```tsx
+const engine = { ...createWorkflowEngine(), editing: workflowPackage }
+```
+
+Without `editing`, the graph lays its jobs out by their needs alone.
+
 ## AI chat
 
 `@parallelworks/ui/ai` is a chat interface (thread, composer, streaming,
@@ -141,3 +153,192 @@ animations) and streamdown's classes next to the theme contract:
 ```
 
 The prebuilt `@parallelworks/ui/styles.css` already includes both.
+
+## Form layouts
+
+`DynamicForm` accepts an optional `$meta.layout` in `formJSONs`. A layout arranges
+existing inputs; it never creates a value or changes an input's name, validation,
+default, or saved-value path. Without a layout, the existing form behavior stays
+unchanged.
+
+```yaml
+$meta:
+  layout:
+    type: grid
+    columns: { base: 1, md: [2, 1] }
+    gap: lg
+    children:
+      - type: field
+        field: name
+      - type: section
+        label: Resources
+        children:
+          - { type: field, field: queue }
+          - { type: field, field: nodes }
+name: { type: string, label: Name }
+queue: { type: dropdown, label: Queue, options: [cpu, gpu] }
+nodes: { type: number, label: Nodes }
+```
+
+Layout nodes can nest:
+
+| Type | Properties | Behavior |
+| --- | --- | --- |
+| `field` | `field` | References an input name in the current scope. |
+| `stack` | `children`, optional `gap` | Stacks children vertically. |
+| `grid` | `children`, `columns`, optional `gap`, `align` | Arranges children in equal or weighted columns. |
+| `section` | `children`, `label`, optional `description`, `gap` | Groups controls in a labeled fieldset. |
+
+`columns` accepts a count from 1 to 12, or an array of positive relative weights
+such as `[2, 1]`. For responsive layouts, use an object with `base`, `sm`, `md`,
+and/or `lg`. These thresholds refer to the **grid container's width**: 24rem,
+40rem, and 64rem respectively. An omitted base starts with one column; each
+larger threshold inherits the previous value. A plain count or weight array
+applies at every width. Nested grids measure their own available space.
+
+Every node can set `span`, as a count or the same responsive object. A span is
+clamped to the current grid's column count. `gap` accepts `none`, `sm`, `md`
+(default), or `lg`. Labels default to the top within an explicit layout;
+`$meta.labelPosition` still overrides them.
+
+A grid defaults to `align: independent`: its children start at the top and their
+contents flow independently. Set `align: rows` when every immediate child is a
+section. Adjacent sections then share a header row and one row per direct child.
+A description, help text, or validation message increases the shared row height,
+so the following rows stay aligned. A nested grid counts as one child row.
+The grid's gap controls shared row spacing. Hidden children retain their row slot
+while a neighboring section uses it; empty sections disappear. When the configured
+grid becomes one column, sections flow vertically and hidden rows collapse.
+Tab order follows each section's document order, including when the sections stack.
+Wrapped field labels still belong to their individual field; row alignment aligns
+field groups, not separate label and control baselines.
+
+```yaml
+type: grid
+columns: { base: 1, md: [2, 1] }
+align: rows
+children:
+  - type: section
+    label: Resources
+    description: Choose the capacity for this run.
+    children:
+      - { type: field, field: queue }
+      - { type: field, field: nodes }
+  - type: section
+    label: Accounting
+    children:
+      - { type: field, field: account }
+```
+
+References are local names, not dotted paths. To arrange a group's children,
+put a layout in that group's `items.$meta`; a list uses `template.$meta` and a
+wizard page uses `options.$meta`. Keep `$meta.wizard` on the wizard container
+and place layouts inside its pages. Layout and wizard metadata do not share
+the same scope.
+
+Unreferenced inputs render after the layout in schema order. Field visibility
+keeps its existing semantics; empty layout containers disappear, and siblings
+remain in their declared containers. Explicit layouts take precedence over
+field `width` and `anchor-below` hints within that scope. Those hints keep their
+existing behavior when no explicit layout is set.
+
+Malformed layouts, unknown references, and duplicate references fall back to
+the existing form layout, showing each input once. Hosts can call
+`resolveFormLayout(layout, fieldNames)` from `@parallelworks/ui/form` to get
+structured `issues` with node paths before saving a layout. Each layout scope is
+limited to 1,024 nodes, 128 children per container, 64 nesting levels below the
+root, and 65,536 total CSS UTF-16 code units. Names and section labels are limited
+to 256 code units; descriptions to 4,096. Oversized layouts fall back to ordinary
+fields. These renderer limits supplement host limits on workflow request size,
+parsing, expression evaluation, and the number of input scopes. Authors can edit
+this metadata in YAML; drag-and-drop layout authoring is a separate consumer
+of the same contract.
+
+### Optional layout CSS
+
+Hosts can enable `allowLayoutCSS` on `DynamicForm` (default `false`). Each layout
+node can then supply a `css` **declaration block**:
+
+```yaml
+type: field
+field: account
+css: "max-width: 28rem; padding: 0.5rem;"
+```
+
+Columns, spans, responsive breakpoints, and shared rows remain in the structured
+layout. CSS provides spacing, sizing, alignment, surfaces, and typography. It styles
+the content container of grids/stacks, the complete section including its heading,
+and the wrapper of a field. Section titles accept the node's `font-size`,
+`font-weight`, and `line-height`; field controls retain their component sizing.
+No authored selectors target individual inputs, error messages, or surrounding UI.
+
+The supported declarations are:
+
+- Spacing and sizing: `gap`, `row-gap`, `column-gap`, `padding`, `padding-inline`,
+  `padding-block`, the four physical padding longhands, `width`, and `max-width`.
+  Nonnegative `px`, `rem`, `em`, `ch`, percentages, and `min()`, `max()`, or `clamp()`
+  are accepted where the CSS grammar permits. Lengths are capped at 256 units and
+  percentages at 100.
+- Alignment: `align-items`, `justify-items`, `align-self`, `justify-self`, and
+  `text-align`. Only the supported keywords accepted by the CSS grammar apply.
+- Surfaces: `color`, `background-color`, `border`, the four physical border
+  shorthands, `border-color`, `border-width`, `border-style`, and `border-radius`.
+  Colors are opaque three- or six-digit hex values. Borders are limited to 8px
+  or 0.5rem; radii to 32px or 2rem. Styles are solid, dashed, dotted, double, or none.
+- Typography: `font-family` (serif, sans-serif, monospace, or the bundled
+  `"Geist Sans"` / `"Geist Mono"`), `font-size` (12–96px or 0.75–6rem),
+  `font-weight` (100–900), `font-style` (normal/italic), `line-height` (normal or 1–2),
+  and `letter-spacing` (0–2px or 0–0.1em).
+
+For a complete local theme, supply **both** `--form-surface` and `--form-accent`
+as opaque hex colors in the same block:
+
+```yaml
+type: section
+label: Delivery
+css: >-
+  --form-surface: #d4ed7a;
+  --form-accent: #25320f;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  font-size: 1.5rem;
+children:
+  - type: field
+    field: output
+```
+
+These two reserved declarations are color seeds, consumed by the existing theme
+generator. It derives local text, input, focus, disabled, and status colors, plus
+a color scheme for native controls. The generated variables live on that layout
+node and inherit into its descendants; a child can start its own theme. Nothing
+is written to the page root. Omitting the seeds preserves the host theme. A plain
+`background-color` only paints the node; use the seeds when its controls also need
+to follow the new palette. Arbitrary custom properties and direct theme-token
+writes remain prohibited. With CSS enabled, the layout gets a paint containment boundary, so an oversized
+surface cannot paint over adjacent application UI. A small inset preserves focus
+rings. Popovers, tooltips, or dialogs that need to extend outside that boundary
+must use a host-controlled portal and carry their own theme context into it.
+Authors cannot change the boundary or portal destination through layout CSS.
+
+CSS is parsed into an AST, checked against both this allowlist and CSS property
+grammars, then applied through React style properties. No authored stylesheet,
+selector, HTML, or style element is inserted. Imports, URLs, arbitrary custom properties,
+`var()`, `attr()`, arbitrary functions, positioning, transforms, negative lengths,
+and `!important` are rejected. Blocks are limited to 4,096 characters and 32
+declarations. Any unsupported or malformed declaration discards the entire node's
+CSS block; the structured layout and all input bindings continue to work.
+`resolveLayoutCSS(css)` returns the accepted style object and diagnostic `issues`
+for authoring tools; validate before saving and surface those issues to authors.
+The workflow schema validates the string's shape and size; it does not authorize
+CSS or replace runtime validation in the renderer.
+
+This restricts the styling surface; it is not a sandbox for arbitrary CSS or a
+security certification. Permitted sizing and color overrides can still produce an awkward or unreadable
+form; validate authored designs for contrast and usability.
+The host retains its CSP and its normal workflow publishing permissions. Enabling
+this feature does not require allowing external stylesheets or weakening script
+policy. Treat authors as trusted to design the contents of their own form: permitted
+colors and sizing can obscure labels or make controls hard to use. Keep trusted
+confirmation summaries, permissions, and security notices outside the authored
+layout. Full stylesheets or mutually untrusted embedded applications require a
+separate isolation design.

package/dist/ai/components/ChatEmptyState.js

@@ -1,16 +1,16 @@
 import { FaCloud } from "../../icons/fa/FaCloud.js";
-import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
 import { FaPlus } from "../../icons/fa/FaPlus.js";
-import { FaTimes } from "../../icons/fa/FaTimes.js";
 import { keyedByContent } from "../../components/keys.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
 import { getGreeting } from "../core/greeting.js";
 import useDragDrop from "../core/useDragDrop.js";
+import { NoticeCard } from "../ui/Notice.js";
 import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
+import ChatStage from "./ChatStage.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -76,99 +76,84 @@ function ChatEmptyState({ targetSession }) {
 			children: [
 				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
 				/* @__PURE__ */ jsx(ProviderIssueBanner, {}),
-				sessionUnreachable && !sessionBannerDismissed && /* @__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(FaExclamationTriangle, { className: "w-4 h-4 text-amber-500 flex-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",
+				sessionUnreachable && !sessionBannerDismissed && /* @__PURE__ */ jsx("div", {
+					className: "mx-4 mt-2",
+					children: /* @__PURE__ */ jsxs(NoticeCard, {
+						tone: "warning",
+						onDismiss: () => setSessionBannerDismissed(true),
+						dismissLabel: strings.chrome.dismiss,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "block font-medium",
 								children: t.sessionUnreachableTitle(targetSession?.split(":").pop() ?? "")
-							}), /* @__PURE__ */ jsx("p", {
-								className: "text-xs text-amber-600/80 mt-0.5",
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mt-0.5 block",
 								children: t.sessionUnreachableBody
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 flex-shrink-0",
-							children: [/* @__PURE__ */ jsx("button", {
+							}),
+							/* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: () => refreshModels(),
-								className: "text-xs font-medium text-amber-700 hover:text-amber-800 hover:bg-amber-500/10 px-2 py-1 rounded transition-colors cursor-pointer",
+								className: "mt-1 font-medium underline-offset-2 hover:underline",
 								children: t.retry
-							}), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: () => setSessionBannerDismissed(true),
-								className: "text-amber-400 hover:text-amber-600 transition-colors cursor-pointer",
-								children: /* @__PURE__ */ jsx(FaTimes, { className: "w-3 h-3" })
-							})]
-						})
-					]
+							})
+						]
+					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1 flex flex-col relative bg-(--theme-panel-bg)",
 					...attachmentsAvailable ? dragHandlers : {},
-					children: [isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl m-4" }), /* @__PURE__ */ jsx("div", {
-						className: "flex-1 flex flex-col items-center justify-center pt-8 pb-[12vh]",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "w-full",
-							children: [
-								!(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsxs("div", {
-									className: "mx-auto mb-6 max-w-[var(--chat-column,50rem)] px-8 text-center",
-									children: [/* @__PURE__ */ jsx("h1", {
-										className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-panel)",
-										children: greeting
-									}), /* @__PURE__ */ jsx("p", {
-										className: "mt-2 text-sm theme-muted-text",
-										children: t.modernSubtitle
-									})]
-								}),
-								hasLoadedModels && models.length === 0 && /* @__PURE__ */ jsxs("div", {
-									className: "mx-auto mb-6 flex max-w-md flex-col items-center gap-3 px-8 text-center",
-									children: [
-										/* @__PURE__ */ jsx(FaCloud, { className: "h-10 w-10 theme-muted-text opacity-60" }),
-										/* @__PURE__ */ jsx("p", {
-											className: "text-lg font-medium theme-text",
-											children: t.noProvidersTitle
-										}),
-										/* @__PURE__ */ jsx("p", {
-											className: "text-sm theme-muted-text",
-											children: t.noProvidersBody
-										}),
-										extraLinks.addProvider && /* @__PURE__ */ jsxs(LinkComponent, {
-											target: {
-												kind: "external",
-												href: extraLinks.addProvider
-											},
-											className: "mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full transition-opacity text-sm font-medium theme-element hover:opacity-90",
-											children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), t.addProvider]
-										})
-									]
-								}),
-								/* @__PURE__ */ jsx(ChatInput, {
-									ref: inputRef,
-									onSend: handleSendMessage,
-									disabled: isLoading || isLoadingModels || models.length === 0,
-									placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
-									settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-									settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
-								}),
-								prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
-									className: "mx-auto max-w-[var(--chat-column,50rem)] px-8",
-									children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("li", {
-										className: "border-b theme-border last:border-b-0",
-										children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											onClick: () => handleSuggestedPrompt(prompt),
-											disabled: isLoading || isLoadingModels || models.length === 0,
-											className: "-mx-3 my-1 block w-[calc(100%+1.5rem)] text-pretty rounded-lg px-3 py-2 text-left text-sm theme-muted-text transition-colors hover:chat-tint hover:theme-text disabled:opacity-50 disabled:cursor-not-allowed",
-											children: prompt
-										})
-									}, key))
-								})
-							]
-						})
+					children: [isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl m-4" }), /* @__PURE__ */ jsxs(ChatStage, {
+						...hasLoadedModels && models.length === 0 ? {} : {
+							heading: greeting,
+							subheading: t.modernSubtitle
+						},
+						children: [
+							hasLoadedModels && models.length === 0 && /* @__PURE__ */ jsxs("div", {
+								className: "mx-auto mb-6 flex max-w-md flex-col items-center gap-3 px-8 text-center",
+								children: [
+									/* @__PURE__ */ jsx(FaCloud, { className: "h-10 w-10 theme-muted-text opacity-60" }),
+									/* @__PURE__ */ jsx("p", {
+										className: "text-lg font-medium theme-text",
+										children: t.noProvidersTitle
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "text-sm theme-muted-text",
+										children: t.noProvidersBody
+									}),
+									extraLinks.addProvider && /* @__PURE__ */ jsxs(LinkComponent, {
+										target: {
+											kind: "external",
+											href: extraLinks.addProvider
+										},
+										className: "mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full transition-opacity text-sm font-medium theme-element hover:opacity-90",
+										children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), t.addProvider]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx(ChatInput, {
+								ref: inputRef,
+								reserveContext: true,
+								onSend: handleSendMessage,
+								disabled: isLoading || isLoadingModels || models.length === 0,
+								placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
+								settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+								settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+							}),
+							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
+								className: "mx-auto max-w-[var(--chat-column,50rem)] px-8",
+								children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("li", {
+									className: "border-b theme-border last:border-b-0",
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => handleSuggestedPrompt(prompt),
+										disabled: isLoading || isLoadingModels || models.length === 0,
+										className: "-mx-3 my-1 block w-[calc(100%+1.5rem)] text-pretty rounded-lg px-3 py-2 text-left text-sm theme-muted-text transition-colors hover:chat-tint hover:theme-text disabled:opacity-50 disabled:cursor-not-allowed",
+										children: prompt
+									})
+								}, key))
+							})
+						]
 					})]
 				})
 			]

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

@@ -8,9 +8,6 @@ interface ChatInputProps {
     placeholder?: string | undefined;
     conversationId?: string;
     onEditLastMessage?: () => void;
-    /** Only the box: no page padding, width cap, or settings row, for a host
-     *  that lays out its own controls around it. */
-    flush?: boolean;
     /** Send with nothing typed, for a surface where the text is optional. */
     allowEmpty?: boolean;
     /** Attach, paste, and drop files. Off for a target that takes text only. */
@@ -23,10 +20,21 @@ interface ChatInputProps {
     sendTestId?: string;
     /** Offers the host's slash commands as the input starts with /. */
     slash?: SlashMenuConfig | undefined;
+    /** Cards above everything else, such as a warning about this turn. */
+    notices?: ReactNode;
+    /** Sits where a terminal's spinner line would, just above the box. */
+    activity?: ReactNode;
     /** Pills naming where the turn runs, rendered above the input. */
     context?: ReactNode;
+    /** Keeps the row of pills above the box even with none, so the box sits
+     *  where it does on a surface that has them. */
+    reserveContext?: boolean;
+    /** Under the box, on the left. */
     settingsLeft?: ReactNode;
+    /** In the box beside send. Defaults to the model and allocation pickers. */
     settingsRight?: ReactNode;
+    /** One centered line under everything. */
+    hint?: string | undefined;
     /** A turn the chat provider does not run, such as an agent session's: it
      *  drives the Stop button in place of the provider's stream and queue. */
     turn?: {

package/dist/ai/components/ChatInput.js

@@ -5,7 +5,7 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
 import useDragDrop from "../core/useDragDrop.js";
-import { ComposerContext, ComposerSettings } from "./ComposerChrome.js";
+import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
@@ -88,7 +88,7 @@ function streamControls(chat, turn) {
 		queuedCount: chat.queuedMessages.length
 	};
 }
-var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, flush = false, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, context, settingsLeft, settingsRight, turn, pastes }, ref) {
+var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext = false, settingsLeft, settingsRight = /* @__PURE__ */ jsx(ComposerControls, {}), hint, turn, pastes }, ref) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
 	const { cards, handleTextPaste, removeCard, takeCards, blocking: pastesBlocking } = usePasteCards(pastes, input, (value) => {
 		setInput(value);
@@ -200,7 +200,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		if (pastes && handleTextPaste(e.clipboardData.getData("text/plain"))) e.preventDefault();
 	};
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
-	const toolbar = attachmentsAvailable || !flush && !!settingsRight;
+	const toolbar = attachmentsAvailable || !!settingsRight;
 	const action = isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: stopStreaming,
@@ -217,12 +217,16 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		testId: sendTestId
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative", !flush && "chat-composer-dock px-4 pb-5 pt-2 bg-(--theme-panel-bg)"),
+		className: "chat-composer-dock relative bg-(--theme-panel-bg) px-4 pt-2 pb-5",
 		...attachmentsAvailable ? dragHandlers : {},
 		children: [isDragging && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl" }), /* @__PURE__ */ jsxs("div", {
-			className: cx(!flush && "w-full max-w-[var(--chat-column,50rem)] mx-auto px-4"),
-			children: [
-				context && /* @__PURE__ */ jsx(ComposerContext, { children: context }),
+			className: "mx-auto w-full max-w-[var(--chat-column,50rem)] space-y-2 px-4",
+			children: [notices, /* @__PURE__ */ jsxs("div", { children: [
+				activity && /* @__PURE__ */ jsx("div", {
+					className: "mb-2",
+					children: activity
+				}),
+				(context || reserveContext) && /* @__PURE__ */ jsx(ComposerContext, { children: context }),
 				cards.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "mb-2 flex flex-wrap gap-2",
 					"data-testid": "composer-pastes",
@@ -285,7 +289,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 									onClick: () => setShowAttachments(!showAttachments)
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "ml-auto flex min-w-0 items-center gap-1",
-									children: [!flush && /* @__PURE__ */ jsx("div", {
+									children: [/* @__PURE__ */ jsx("div", {
 										className: "flex min-w-0 items-center justify-end gap-1",
 										children: settingsRight
 									}), /* @__PURE__ */ jsx("div", {
@@ -297,11 +301,15 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 						]
 					})]
 				}),
-				!flush && (settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-[11px] theme-muted-text",
 					children: t.filesAttached(uploadedCount)
-				})] }) })
-			]
+				})] }) }),
+				hint && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-center text-[11px] theme-muted-text",
+					children: hint
+				})
+			] })]
 		})]
 	});
 });

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

@@ -2,12 +2,31 @@ import { type ReactNode } from 'react';
 /** Where the conversation list goes: beside the thread, in a drawer over it,
  *  or whichever fits the width the chat is given. */
 export type SidebarMode = 'inline' | 'drawer' | 'auto';
-export declare const DRAWER_BELOW_PX = 768;
+/** The list at its default width beside the narrowest thread that still
+ *  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */
+export declare const DRAWER_BELOW_PX: number;
 /** Put on the element the thread and composer sit in: their shared column
  *  grows with it, from 50rem to 64rem, instead of staying 50rem on a wide
  *  screen. */
 export declare const CHAT_COLUMN_SCOPE = "@container [--chat-column:clamp(50rem,60cqi,64rem)]";
-export default function ChatLayout({ children, sidebarActions, sidebarTop, sidebarMode, drawerBelowPx, drawerToggle, }: {
+/** A conversation list beside a thread, or in a drawer over it when the
+ *  space is narrow. The list reads where it goes from `useChat`
+ *  (`sidebarPresentation`, `drawerOpen`); `ChatLayout` is this with the chat
+ *  list, and a host with its own list uses it directly. Must be mounted
+ *  inside a ChatProvider. */
+export declare function ConversationLayout({ sidebar, children, sidebarMode, drawerBelowPx, drawerToggle, drawerBar, }: {
+    sidebar: ReactNode;
+    children: ReactNode;
+    sidebarMode?: SidebarMode;
+    /** The width under which 'auto' shows the drawer. */
+    drawerBelowPx?: number;
+    /** False when the host's own header opens the drawer. */
+    drawerToggle?: boolean;
+    /** Beside the drawer's toggle, while the list is a drawer: what the top of
+     *  the list would otherwise keep in view. */
+    drawerBar?: ReactNode;
+}): import("react").JSX.Element;
+export default function ChatLayout({ children, sidebarActions, sidebarTop, sidebarMode, drawerBelowPx, drawerToggle, drawerBar, }: {
     children: ReactNode;
     sidebarActions?: boolean;
     /** Above the conversation list, given whether it is collapsed to the rail. */
@@ -19,4 +38,6 @@ export default function ChatLayout({ children, sidebarActions, sidebarTop, sideb
     drawerBelowPx?: number;
     /** False when the host's own header opens the drawer. */
     drawerToggle?: boolean;
+    /** Beside the drawer's toggle, while the list is a drawer. */
+    drawerBar?: ReactNode;
 }): import("react").JSX.Element;

package/dist/ai/components/ChatLayout.js

@@ -8,7 +8,9 @@ import cx from "classnames";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatLayout.tsx
-var DRAWER_BELOW_PX = 768;
+/** The list at its default width beside the narrowest thread that still
+*  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */
+var DRAWER_BELOW_PX = 896;
 /** Put on the element the thread and composer sit in: their shared column
 *  grows with it, from 50rem to 64rem, instead of staying 50rem on a wide
 *  screen. */
@@ -37,34 +39,49 @@ function useSidebarPresentation(ref, mode, drawerBelowPx) {
 	useLayoutEffect(() => () => report("inline"), [report]);
 	return presentation;
 }
-function ChatLayout({ children, sidebarActions = true, sidebarTop, sidebarMode = "inline", drawerBelowPx = 768, drawerToggle = true }) {
+/** A conversation list beside a thread, or in a drawer over it when the
+*  space is narrow. The list reads where it goes from `useChat`
+*  (`sidebarPresentation`, `drawerOpen`); `ChatLayout` is this with the chat
+*  list, and a host with its own list uses it directly. Must be mounted
+*  inside a ChatProvider. */
+function ConversationLayout({ sidebar, children, sidebarMode = "inline", drawerBelowPx = DRAWER_BELOW_PX, drawerToggle = true, drawerBar }) {
 	const ref = useRef(null);
 	const drawer = useSidebarPresentation(ref, sidebarMode, drawerBelowPx) === "drawer";
 	const { drawerOpen, toggleSidebar } = useChat();
 	const { strings } = useChatConfig();
-	return /* @__PURE__ */ jsx(KeyboardShortcutsProvider, { children: /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("flex h-full", drawer && "relative overflow-hidden"),
-		children: [/* @__PURE__ */ jsx(ChatSidebar, {
-			actions: sidebarActions,
-			top: sidebarTop
-		}), /* @__PURE__ */ jsxs("main", {
+		children: [sidebar, /* @__PURE__ */ jsxs("main", {
 			inert: drawer && drawerOpen,
 			className: cx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
-			children: [drawer && drawerToggle && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center bg-(--theme-panel-bg) px-2 pt-2",
-				children: /* @__PURE__ */ jsx(SidebarToggle, {
+			children: [drawer && (drawerToggle || drawerBar) && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2 bg-(--theme-panel-bg) px-2 pt-2",
+				children: [drawerToggle && /* @__PURE__ */ jsx(SidebarToggle, {
 					collapsed: !drawerOpen,
 					onToggle: toggleSidebar,
 					openLabel: strings.sidebar.openSidebar,
 					closeLabel: strings.sidebar.closeSidebar
-				})
+				}), drawerBar]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex min-h-0 flex-1 flex-col",
 				children
 			})]
 		})]
+	});
+}
+function ChatLayout({ children, sidebarActions = true, sidebarTop, sidebarMode = "inline", drawerBelowPx = DRAWER_BELOW_PX, drawerToggle = true, drawerBar }) {
+	return /* @__PURE__ */ jsx(KeyboardShortcutsProvider, { children: /* @__PURE__ */ jsx(ConversationLayout, {
+		sidebar: /* @__PURE__ */ jsx(ChatSidebar, {
+			actions: sidebarActions,
+			top: sidebarTop
+		}),
+		sidebarMode,
+		drawerBelowPx,
+		drawerToggle,
+		drawerBar,
+		children
 	}) });
 }
 //#endregion
-export { CHAT_COLUMN_SCOPE, DRAWER_BELOW_PX, ChatLayout as default };
+export { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX, ChatLayout as default };