@drawnagency/primitives 0.1.113 → 0.1.115

package/src/components/shell/HistoryToolbar.tsx

@@ -1,5 +1,7 @@
 import { formatDateTime } from "../../lib/timestamp";
 import { Button } from "../shared/Button";
+import { Select } from "../shared/Select";
+import { ToolbarFrame } from "../shared/ToolbarFrame";
 
 interface HistoryPageOption {
   id: string;
@@ -17,38 +19,34 @@ interface HistoryToolbarProps {
 
 export function HistoryToolbar({ date, pages, activePageId, onPageChange, onBackToCurrent, onRestore }: HistoryToolbarProps) {
   return (
-    <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
-      <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
-        <div className="flex items-center">
-          <Button variant="secondary" size="sm" onClick={onBackToCurrent}>
-            Back to current
-          </Button>
-        </div>
-        <div className="flex items-center justify-center gap-2">
+    <ToolbarFrame
+      left={
+        <Button variant="secondary" size="sm" onClick={onBackToCurrent}>
+          Back to current
+        </Button>
+      }
+      center={
+        <>
           <span className="text-xs font-medium text-base-contrast-light">
             Viewing {formatDateTime(date)}
           </span>
           {pages.length > 1 && (
-            <select
+            <Select
               value={activePageId}
-              onChange={(e) => onPageChange(e.target.value)}
-              className="rounded border border-base-200 bg-base px-1.5 py-0.5 text-xs font-medium text-base-contrast"
+              onChange={onPageChange}
+              options={pages.map((p) => ({ value: p.id, label: p.title }))}
+              selectClassName="py-0.5 pl-1.5 text-xs"
+              className="w-auto"
               aria-label="Page at this version"
-            >
-              {pages.map((p) => (
-                <option key={p.id} value={p.id}>
-                  {p.title}
-                </option>
-              ))}
-            </select>
+            />
           )}
-        </div>
-        <div className="flex items-center justify-end">
-          <Button variant="primary" size="sm" onClick={onRestore}>
-            Restore this version
-          </Button>
-        </div>
-      </div>
-    </div>
+        </>
+      }
+      right={
+        <Button variant="primary" size="sm" onClick={onRestore}>
+          Restore this version
+        </Button>
+      }
+    />
   );
 }

package/src/components/shell/MediaFolderTile.tsx

@@ -13,7 +13,10 @@ export interface MediaFolderTileProps {
   onOpen: (id: string) => void;
   manage: boolean;
   onRename?: (id: string, name: string) => void;
-  onDeleteRequest?: (id: string) => void;
+  /** `trigger` is the kebab "Folder actions" button — the Delete menu item
+   *  itself unmounts (menu closes) the instant it's clicked, so the caller's
+   *  ConfirmInline returns focus to the kebab button instead. */
+  onDeleteRequest?: (id: string, trigger: HTMLElement | null) => void;
   dnd?: MediaFolderDndBindings;
   /** Optional accessible label override for the root element (e.g. "Open folder Logos"). */
   ariaLabel?: string;
@@ -29,6 +32,7 @@ export function MediaFolderTile({
   const [renaming, setRenaming] = useState(false);
   const [draft, setDraft] = useState(name);
   const menuRef = useRef<HTMLDivElement>(null);
+  const kebabButtonRef = useRef<HTMLButtonElement>(null);
   const emptyFoldersRef = useRef<Record<string, MediaFolder>>({});
   const emptyItemsRef = useRef<Record<string, MediaItem>>({});
 
@@ -105,6 +109,7 @@ export function MediaFolderTile({
       {manage && !renaming && (
         <div ref={menuRef} className="relative shrink-0">
           <button
+            ref={kebabButtonRef}
             type="button"
             aria-label={`Folder actions: ${name}`}
             onClick={(e) => { e.stopPropagation(); setMenuOpen((v) => !v); }}
@@ -128,8 +133,8 @@ export function MediaFolderTile({
               </button>
               <button
                 type="button"
-                className="block w-full px-3 py-1.5 text-left text-sm text-red-600 hover:bg-base-accent dark:text-red-400"
-                onClick={(e) => { e.stopPropagation(); setMenuOpen(false); onDeleteRequest?.(id); }}
+                className="block w-full px-3 py-1.5 text-left text-sm text-danger hover:bg-base-accent dark:text-danger"
+                onClick={(e) => { e.stopPropagation(); setMenuOpen(false); onDeleteRequest?.(id, kebabButtonRef.current); }}
                 onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
               >
                 Delete

package/src/components/shell/MediaLibraryModal.tsx

@@ -2,10 +2,13 @@ import { useState, useRef, useCallback, useMemo, useEffect } from "react";
 import { Search, Upload, Trash2, FolderPlus, FolderInput, FileText } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
-import { UploadRejectionAlert } from "../shared/UploadRejectionAlert";
+import { Input } from "../shared/Input";
+import { InlineAlert } from "../shared/InlineAlert";
+import { ConfirmInline } from "../shared/ConfirmInline";
+import { Notice } from "../shared/Notice";
 import { Select } from "../shared/Select";
 import type { MediaFolder, MediaItem } from "../../media/types";
-import { displayFilename, displayName, formatFileSize, mimeToExt } from "../../media/utils";
+import { displayFilename, displayName, formatFileSize, mediaThumbnailUrl } from "../../media/utils";
 import {
   childFolderIds, descendantFolderIds, DOCUMENTS_FOLDER_ID, folderPathIds, folderPathNames,
   itemFolderId, recursiveItemCounts,
@@ -75,17 +78,8 @@ export interface MediaLibraryModalProps {
 
 type KindFilter = "all" | LibraryKind;
 
-function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): string {
-  const localUrl = localUrls[item.id];
-  if (localUrl) return localUrl;
-  if (item.kind === "video") {
-    return `/api/media/${item.id}/original.${mimeToExt(item.mimeType)}`;
-  }
-  if (item.kind === "image" && item.variants.length > 0) {
-    const smallest = item.variants.reduce((a, b) => (a.width < b.width ? a : b));
-    return `/api/media/${item.id}/${smallest.width}.webp`;
-  }
-  return `/api/media/${item.id}/poster.webp`;
+function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): string | undefined {
+  return localUrls[item.id] ?? mediaThumbnailUrl(item) ?? undefined;
 }
 
 function DocumentTile({ doc, manage, isSelected, refCount, showFolderChip, onClick }: {
@@ -540,6 +534,8 @@ export function MediaLibraryModal({
   }
 
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const batchDeleteButtonRef = useRef<HTMLButtonElement>(null);
+  const folderDeleteTriggerRef = useRef<HTMLElement | null>(null);
 
   // One selection, two kinds. Everything downstream — delete dispatch, usage
   // totals, the move dialog — splits on this: documents have no folder and
@@ -685,12 +681,14 @@ export function MediaLibraryModal({
                 size={14}
                 className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light"
               />
-              <input
+              <Input
+                label="Search media"
+                hideLabel
                 type="text"
                 placeholder="Search media..."
                 value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="w-full rounded border border-base-200 bg-base py-1.5 pl-8 pr-3 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
+                onChange={setSearch}
+                inputClassName="py-1.5 pl-8 pr-3 focus:ring-primary"
               />
             </div>
 
@@ -725,6 +723,7 @@ export function MediaLibraryModal({
 
             {mode === "manage" && selected.size > 0 && (
               <Button
+                ref={batchDeleteButtonRef}
                 variant="destructive"
                 size="sm"
                 onClick={handleBatchDelete}
@@ -750,16 +749,19 @@ export function MediaLibraryModal({
 
           {newFolderOpen && (
             <div className="flex items-center gap-2">
-              <input
+              <Input
+                label="Folder name"
+                hideLabel
                 autoFocus
                 placeholder="Folder name"
                 value={newFolderName}
-                onChange={(e) => setNewFolderName(e.target.value)}
+                onChange={setNewFolderName}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") commitNewFolder();
                   if (e.key === "Escape") { setNewFolderOpen(false); setNewFolderName(""); }
                 }}
-                className="flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:ring-1 focus:ring-primary"
+                className="flex-1"
+                inputClassName="px-2 py-1 focus:ring-primary"
               />
               <Button variant="secondary" size="sm" onClick={() => { setNewFolderOpen(false); setNewFolderName(""); }}>Cancel</Button>
               <Button variant="primary" size="sm" onClick={commitNewFolder}>Create</Button>
@@ -768,49 +770,46 @@ export function MediaLibraryModal({
 
           {/* Delete confirmation */}
           {confirmDelete && (
-            <div className="flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30">
-              <p className="mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200">
-                {totalUsage > 0
+            <ConfirmInline
+              message={
+                totalUsage > 0
                   ? `Some of these ${usedNoun} are being used. Deleting them will remove them from the sections that use them.`
-                  : `Delete ${selectedIds.length} ${usedNoun}? No section uses them.`}
-              </p>
-              <div className="flex shrink-0 items-center gap-2">
-                <Button variant="secondary" size="sm" onClick={() => setConfirmDelete(false)}>
-                  Cancel
-                </Button>
-                <Button variant="destructive" size="sm" onClick={handleConfirmDelete}>
-                  Confirm Delete
-                </Button>
-              </div>
-            </div>
+                  : `Delete ${selectedIds.length} ${usedNoun}? No section uses them.`
+              }
+              confirmLabel="Confirm Delete"
+              tone="destructive"
+              onConfirm={handleConfirmDelete}
+              onCancel={() => setConfirmDelete(false)}
+              returnFocusTo={batchDeleteButtonRef}
+            />
           )}
 
           {folderToDelete && folderDeleteInfo && onDeleteFolder && (
-            <div className="flex flex-col gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 dark:border-red-900/50 dark:bg-red-950/30">
-              <p className="text-sm text-red-800 dark:text-red-200">
-                Delete &ldquo;{folderDeleteInfo.name}&rdquo;? It contains {folderDeleteInfo.count} item{folderDeleteInfo.count === 1 ? "" : "s"}
-                {folderDeleteInfo.inUse > 0 && (
-                  <> — {folderDeleteInfo.inUse === 1 ? "1 is in use" : `${folderDeleteInfo.inUse} are in use`} and will be removed from those sections</>
-                )}
-                .
-              </p>
-              <div className="flex flex-wrap items-center justify-end gap-2">
-                <Button variant="secondary" size="sm" onClick={() => setFolderToDelete(null)}>Cancel</Button>
-                <Button variant="secondary" size="sm"
-                  onClick={() => { onDeleteFolder(folderToDelete, "move"); setFolderToDelete(null); }}>
-                  Move contents to parent
-                </Button>
-                <Button variant="destructive" size="sm"
-                  onClick={() => { onDeleteFolder(folderToDelete, "delete"); setFolderToDelete(null); }}>
-                  Delete {folderDeleteInfo.count} item{folderDeleteInfo.count === 1 ? "" : "s"}
-                </Button>
-              </div>
-            </div>
+            <ConfirmInline
+              message={
+                <>
+                  Delete &ldquo;{folderDeleteInfo.name}&rdquo;? It contains {folderDeleteInfo.count} item{folderDeleteInfo.count === 1 ? "" : "s"}
+                  {folderDeleteInfo.inUse > 0 && (
+                    <> — {folderDeleteInfo.inUse === 1 ? "1 is in use" : `${folderDeleteInfo.inUse} are in use`} and will be removed from those sections</>
+                  )}
+                  .
+                </>
+              }
+              confirmLabel={`Delete ${folderDeleteInfo.count} item${folderDeleteInfo.count === 1 ? "" : "s"}`}
+              tone="destructive"
+              secondaryAction={{
+                label: "Move contents to parent",
+                onClick: () => { onDeleteFolder(folderToDelete, "move"); setFolderToDelete(null); },
+              }}
+              onConfirm={() => { onDeleteFolder(folderToDelete, "delete"); setFolderToDelete(null); }}
+              onCancel={() => setFolderToDelete(null)}
+              returnFocusTo={folderDeleteTriggerRef}
+            />
           )}
 
           {/* File size rejection alert */}
           {rejectedFiles.length > 0 && maxFileSize && (
-            <UploadRejectionAlert
+            <InlineAlert
               message={
                 rejectedFiles.length === 1
                   ? `"${rejectedFiles[0]}" exceeds the ${formatFileSize(maxFileSize)} file size limit.`
@@ -823,7 +822,7 @@ export function MediaLibraryModal({
           {/* Async upload failure (oversized/disallowed file, upload-intent error,
               direct-to-bucket PUT failure) — distinct from the client-side check above. */}
           {uploadError && (
-            <UploadRejectionAlert
+            <InlineAlert
               message={uploadError}
               onDismiss={() => onDismissUploadError?.()}
             />
@@ -831,10 +830,9 @@ export function MediaLibraryModal({
 
           {/* Informational, non-error upload notice (e.g. dedup skip). */}
           {uploadNotice && (
-            <UploadRejectionAlert
-              message={uploadNotice}
-              onDismiss={() => onDismissUploadNotice?.()}
-            />
+            <Notice tone="info" placement="inline" onDismiss={() => onDismissUploadNotice?.()}>
+              {uploadNotice}
+            </Notice>
           )}
         </div>
 
@@ -868,7 +866,7 @@ export function MediaLibraryModal({
                 onRename={onRenameFolder}
                 onDeleteRequest={
                   manage && onDeleteFolder
-                    ? (id) => {
+                    ? (id, trigger) => {
                         const doomed = descendantFolderIds(folders, id);
                         const hasContents =
                           items.some((item) => {
@@ -876,6 +874,7 @@ export function MediaLibraryModal({
                             return fid !== null && doomed.has(fid);
                           }) || doomed.size > 1;
                         if (hasContents) {
+                          folderDeleteTriggerRef.current = trigger;
                           setFolderToDelete(id);
                           setConfirmDelete(false); // the two delete confirmations are mutually exclusive
                         } else onDeleteFolder(id, "move"); // empty: no dialog needed

package/src/components/shell/ProcessingIndicator.tsx

@@ -59,11 +59,11 @@ export function ProcessingIndicator({ items }: ProcessingIndicatorProps) {
             {/* Error items */}
             {errorItems.map((item) => (
               <div key={item.id} className="flex flex-col gap-0.5 px-3 py-2">
-                <span className="truncate text-xs font-medium text-red-600">
+                <span className="truncate text-xs font-medium text-danger">
                   {item.originalName}
                 </span>
                 {item.error && (
-                  <span className="text-xs text-red-500">{item.error}</span>
+                  <span className="text-xs text-danger">{item.error}</span>
                 )}
               </div>
             ))}

package/src/components/shell/RestoreModal.tsx

@@ -1,6 +1,5 @@
 import { formatDateTime } from "../../lib/timestamp";
-import { EditorModal } from "./EditorModal";
-import { Button } from "../shared/Button";
+import { ConfirmDialog } from "../shared/ConfirmDialog";
 
 interface RestoreModalProps {
   isOpen: boolean;
@@ -12,19 +11,21 @@ interface RestoreModalProps {
 
 export function RestoreModal({ isOpen, onClose, date, onConfirm, isRestoring }: RestoreModalProps) {
   return (
-    <EditorModal isOpen={isOpen} onClose={onClose} title="Restore this version?">
-      <p className="mb-4 text-sm text-base-contrast-light">
-        This will publish the content from {formatDateTime(date)} as a new update.
-        Your current content will still be available in the history.
-      </p>
-      <div className="flex justify-end gap-3">
-        <Button variant="secondary" size="md" onClick={onClose} disabled={isRestoring}>
-          Cancel
-        </Button>
-        <Button variant="primary" size="md" onClick={onConfirm} disabled={isRestoring}>
-          {isRestoring ? "Restoring..." : "Restore"}
-        </Button>
-      </div>
-    </EditorModal>
+    <ConfirmDialog
+      isOpen={isOpen}
+      title="Restore this version?"
+      body={
+        <p className="text-sm text-base-contrast-light">
+          This will publish the content from {formatDateTime(date)} as a new update.
+          Your current content will still be available in the history.
+        </p>
+      }
+      confirmLabel="Restore"
+      tone="destructive"
+      busy={isRestoring}
+      busyLabel="Restoring…"
+      onConfirm={onConfirm}
+      onCancel={onClose}
+    />
   );
 }

package/src/components/shell/SetPasswordForm.tsx

@@ -42,7 +42,7 @@ export function SetPasswordForm({ reason }: Props) {
           return;
         }
         const data = await response.json().catch(() => ({}));
-        setError(data.error || "Failed to set password");
+        setError(data.error || "Couldn't set password");
         return;
       }
 
@@ -82,14 +82,14 @@ export function SetPasswordForm({ reason }: Props) {
           autoComplete="new-password"
         />
 
-        {error && <p className="text-sm text-red-600">{error}</p>}
+        {error && <p className="text-sm text-danger">{error}</p>}
 
         <Button
           type="submit"
           variant="primary"
           size="md"
           isLoading={loading}
-          loadingLabel="Saving..."
+          loadingLabel="Saving…"
           className="w-full"
         >
           {buttonLabel}

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "../shared/Button";
+import { Input } from "../shared/Input";
+import { Textarea } from "../shared/Textarea";
 import { SubTabs } from "../shared/SubTabs";
 import { AudienceChips } from "./AudienceChips";
 import ChatPanel from "../chat/ChatPanel";
@@ -90,32 +92,33 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
         Show the chat widget to viewers
       </label>
 
-      <div>
-        <label htmlFor="chatbot-name" className="mb-1 block text-sm font-medium text-base-contrast">Assistant name</label>
-        <input id="chatbot-name" aria-label="Assistant name" maxLength={60} value={chatbot.name}
-          onChange={(e) => patch({ name: e.target.value })}
-          placeholder={DEFAULT_CHATBOT_NAME}
-          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-        <p className="mt-1 text-xs text-base-contrast-light">Shown in the widget header. Leave blank for “{DEFAULT_CHATBOT_NAME}”. Audiences can override it below.</p>
-      </div>
+      <Input
+        label="Assistant name"
+        maxLength={60}
+        value={chatbot.name}
+        onChange={(v) => patch({ name: v })}
+        placeholder={DEFAULT_CHATBOT_NAME}
+        hint={`Shown in the widget header. Leave blank for “${DEFAULT_CHATBOT_NAME}”. Audiences can override it below.`}
+      />
 
-      <div>
-        <label htmlFor="chatbot-thinking-phrases" className="mb-1 block text-sm font-medium text-base-contrast">Thinking phrases</label>
-        <textarea id="chatbot-thinking-phrases" aria-label="Thinking phrases" rows={2}
-          value={thinkingText}
-          onChange={(e) => { setThinkingText(e.target.value); patch({ thinkingPhrases: parseThinkingPhrases(e.target.value) }); }}
-          placeholder="Mixing the palette, Checking the guide, Consulting the brand book"
-          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-        <p className="mt-1 text-xs text-base-contrast-light">Comma-separated; one is shown at random while the assistant thinks, with “…” added automatically. Leave blank for “Thinking…”.</p>
-      </div>
+      <Textarea
+        label="Thinking phrases"
+        rows={2}
+        value={thinkingText}
+        onChange={(v) => { setThinkingText(v); patch({ thinkingPhrases: parseThinkingPhrases(v) }); }}
+        placeholder="Mixing the palette, Checking the guide, Consulting the brand book"
+        hint="Comma-separated; one is shown at random while the assistant thinks, with “…” added automatically. Leave blank for “Thinking…”."
+      />
 
       <div>
-        <label htmlFor="chatbot-system-prompt" className="mb-1 block text-sm font-medium text-base-contrast">System prompt</label>
-        <textarea id="chatbot-system-prompt" aria-label="System prompt" rows={5} maxLength={8000}
+        <Textarea
+          label="System prompt"
+          rows={5}
+          maxLength={8000}
           value={chatbot.systemPrompt}
-          onChange={(e) => patch({ systemPrompt: e.target.value })}
+          onChange={(v) => patch({ systemPrompt: v })}
           placeholder="Describe the brand's voice and how the assistant should behave — e.g. “Speak warmly and concisely; always reference our color names, never hex codes.”"
-          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+        />
         <p className="text-right text-xs text-base-contrast-light">{chatbot.systemPrompt.length}/8000</p>
       </div>
     </div>
@@ -129,22 +132,22 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
         <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
         {chatbot.audiences.map((name) => (
           <div key={name} className="mt-2">
-            <label htmlFor={`audience-name-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
-              Assistant name for {name}
-            </label>
-            <input id={`audience-name-${name}`} aria-label={`Assistant name for ${name}`} maxLength={60}
+            <Input
+              label={`Assistant name for ${name}`}
+              maxLength={60}
               value={audienceNameValue(name)}
-              onChange={(e) => patch({ audienceNames: { ...chatbot.audienceNames, [name]: e.target.value } })}
+              onChange={(v) => patch({ audienceNames: { ...chatbot.audienceNames, [name]: v } })}
               placeholder={resolveChatbotName(chatbot, null)}
-              className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-            <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
-              Additional guidance for {name}
-            </label>
-            <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
+              className="mb-1"
+            />
+            <Textarea
+              label={`Additional guidance for ${name}`}
+              rows={2}
+              maxLength={8000}
               value={overlayValue(name)}
-              onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
+              onChange={(v) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: v } })}
               placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
-              className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+            />
           </div>
         ))}
       </div>
@@ -160,27 +163,43 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
           {chatbot.tasks.map((t, i) => (
             <div key={t.id} className="rounded border border-base-200 p-2">
               <div className="mb-1 flex items-center justify-between gap-2">
-                <input aria-label={`Task ${t.id} label`} value={t.label} maxLength={60}
-                  onChange={(e) => patchTask(i, { label: e.target.value })}
-                  className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+                <Input
+                  label={`Task ${t.id} label`}
+                  hideLabel
+                  value={t.label}
+                  maxLength={60}
+                  onChange={(v) => patchTask(i, { label: v })}
+                  className="min-w-0 flex-1"
+                />
                 <Button type="button" variant="destructive"
                   onClick={() => patch({ tasks: chatbot.tasks.filter((_, idx) => idx !== i) })}>
                   Remove
                 </Button>
               </div>
-              <textarea aria-label={`Task ${t.id} prompt`} rows={2} maxLength={4000} value={t.prompt}
-                onChange={(e) => patchTask(i, { prompt: e.target.value })}
+              <Textarea
+                label={`Task ${t.id} prompt`}
+                hideLabel
+                rows={2}
+                maxLength={4000}
+                value={t.prompt}
+                onChange={(v) => patchTask(i, { prompt: v })}
                 placeholder="Instructions for this task…"
-                className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+                className="mb-1"
+              />
               <AudienceChips audiences={audiences} selected={t.access} onToggle={(n) => patchTask(i, { access: toggleName(t.access, n) })} />
             </div>
           ))}
         </div>
         <div className="mt-2 flex gap-2">
-          <input aria-label="New task label" value={newTaskLabel} maxLength={60}
-            onChange={(e) => setNewTaskLabel(e.target.value)}
+          <Input
+            label="New task label"
+            hideLabel
+            value={newTaskLabel}
+            maxLength={60}
+            onChange={setNewTaskLabel}
             placeholder="e.g. Draft a social post"
-            className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+            className="min-w-0 flex-1"
+          />
           <Button type="button" onClick={addTask}>Add task</Button>
         </div>
       </div>