@hachej/boring-ui-kit 0.3.2 → 0.4.1

package/r/viewers.json

@@ -4,8 +4,8 @@
   "title": "Viewers",
   "description": "The standard viewer top bar (title, status, viewer controls, Refresh, Share, Copy, Download, Open in new tab, Close, overflow menu) with Tailwind panes over it: the Markdown editor with a formatting toolbar and prose styling, the passive HTML preview and source editor, an image viewer with zoom and pan, and a PDF viewer. Owned, editable source over the borrowed controllers; no AI SDK.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.3.2",
-    "@hachej/boring-files@^0.3.2",
+    "@hachej/boring-ui-kit@^0.4.1",
+    "@hachej/boring-files@^0.4.1",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -21,12 +21,21 @@
     "@tiptap/extension-highlight@^3.31.4",
     "@tiptap/extension-bubble-menu@^3.31.4",
     "@tiptap/extension-floating-menu@^3.31.4",
-    "lucide-react@^1.51.0"
+    "lucide-react@^1.51.0",
+    "pdfjs-dist@6.3.289"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.3.2/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.3.2/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.3.2/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.1/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.1/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.1/r/button.json",
+    "button",
+    "toggle",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.1/r/version-history.json",
+    "toggle-group",
+    "dialog",
+    "textarea",
+    "badge",
+    "dropdown-menu"
   ],
   "files": [
     {
@@ -37,25 +46,25 @@
     },
     {
       "path": "registry/viewers/html-pane.tsx",
-      "content": "'use client';\n\nimport { useMemo, useState, useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\nimport { CodeXmlIcon, EyeIcon, RotateCcwIcon, SaveIcon, SearchCheckIcon } from 'lucide-react';\nimport { HtmlViewer } from '@hachej/boring-ui-kit/html-viewer';\nimport type { HtmlController } from '@hachej/boring-ui-kit/html';\nimport { IconButton } from '../button/button';\nimport { downloadFile, fileNameFor } from './download';\nimport { copyText } from '../utils/utils';\nimport { InteractiveFrame } from './interactive-html';\nimport type { InteractiveHtml } from './interactive-html';\nimport { ViewerFrame, ViewerToggle } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { defaultViewerLabels, useViewerText } from './viewer-window';\nimport type { ViewerLabels } from './viewer-window';\n\nexport type HtmlPaneMode = 'preview' | 'source';\n\nexport interface HtmlPaneProps {\n  /** Borrowed: the host owns the controller and disposes it. */\n  readonly controller: HtmlController;\n  readonly title?: string;\n  readonly subtitle?: ReactNode;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly initialMode?: HtmlPaneMode;\n  /** Reports the person's choice, so a host that remounts the pane (for a new revision) can start it in the same mode. */\n  readonly onModeChange?: (mode: HtmlPaneMode) => void;\n  /**\n   * Host opt-in (off by default): the preview then runs the page's own scripts in a sandboxed frame with an opaque origin and a\n   * Content-Security-Policy limited to inline code and `scriptSources`. See registry/README.md. Without it the preview is the passive,\n   * script-free rendering of `@hachej/boring-ui-kit/html-viewer`.\n   */\n  readonly interactive?: InteractiveHtml;\n  readonly controls?: ReactNode;\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n  /** The pane's and its bar's words, over the window's and `defaultViewerLabels`. */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n}\n\nexport function htmlStatus(state: ReturnType<HtmlController['getSnapshot']>, labels: ViewerLabels = defaultViewerLabels): ViewerStatus {\n  if (state.lifecycle === 'disposed') return { label: labels.closed };\n  if (state.save.kind === 'pending') return { label: labels.saving };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'unknown') return { label: labels.saveUnconfirmed, tone: 'warning' };\n  if (state.remote !== null || state.save.kind === 'settled' && state.save.result.kind === 'conflict') return { label: labels.changedElsewhere, tone: 'warning' };\n  if (state.readOnly) return { label: labels.readOnly, kind: 'read-only' };\n  return state.dirty ? { label: labels.unsaved, tone: 'warning' } : { label: labels.saved, tone: 'success', kind: 'saved' };\n}\n\n/** The HTML safe preview and source editor in the standard viewer frame. The preview never runs scripts; a host-enabled interactive preview runs them, in a sandbox. */\nexport function HtmlPane({ controller, labels: ownLabels, title = 'HTML document', subtitle, target, revision, initialMode = 'preview', onModeChange, interactive, controls, onRefresh, onShare, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, className }: HtmlPaneProps) {\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const { labels } = useViewerText(ownLabels);\n  const [mode, setModeState] = useState<HtmlPaneMode>(initialMode);\n  const setMode = (next: HtmlPaneMode) => { setModeState(next); onModeChange?.(next); };\n  const [reload, setReload] = useState(0);\n  const [error, setError] = useState<string>();\n  const pending = state.save.kind === 'pending';\n  const unconfirmed = state.save.kind === 'settled' && state.save.result.kind === 'unknown';\n  const disposed = state.lifecycle === 'disposed';\n  const perform = (action: () => Promise<{ readonly kind: string; readonly reason?: string }>) => {\n    setError(undefined);\n    void Promise.resolve().then(action).then(result => { if ((result.kind === 'denied' || result.kind === 'unavailable' || result.kind === 'file_too_large') && result.reason) setError(result.reason); })\n      .catch(() => setError(labels.operationFailed));\n  };\n  const filename = useMemo(() => fileNameFor(title, 'html'), [title]);\n  return <ViewerFrame title={title} subtitle={subtitle} status={htmlStatus(state, labels)} labels={labels} target={target} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={() => { if (interactive && mode === 'preview') setReload(count => count + 1); return (onRefresh ?? (() => controller.actions.refresh()))(); }} onShare={onShare} onCopy={() => copyText(controller.getSnapshot().text)}\n    onDownload={() => downloadFile(filename, controller.getSnapshot().text, 'text/html;charset=utf-8')} onOpenInNewTab={onOpenInNewTab} onClose={onClose}\n    controls={<>\n      <ViewerToggle label={labels.view} value={mode} onChange={setMode} options={[\n        { id: 'preview', label: labels.htmlPreview, text: labels.preview, icon: <EyeIcon className=\"size-4\" aria-hidden=\"true\" />, testId: `${testId}-mode-preview` },\n        { id: 'source', label: labels.htmlSource, text: labels.source, icon: <CodeXmlIcon className=\"size-4\" aria-hidden=\"true\" />, testId: `${testId}-mode-source` }]} />\n      {!state.readOnly && state.dirty && <IconButton label={labels.save} variant=\"default\" data-testid={`${testId}-save`} disabled={disposed || pending || unconfirmed} onClick={() => perform(() => controller.flush(controller.actions.selection()))}><SaveIcon className=\"size-4\" aria-hidden=\"true\" /></IconButton>}\n      {unconfirmed && <IconButton label={labels.checkSave} onClick={() => perform(controller.actions.reconcile)}><SearchCheckIcon className=\"size-4\" aria-hidden=\"true\" /></IconButton>}\n      {unconfirmed && <IconButton label={labels.abandon} onClick={() => perform(controller.actions.abandon)}><RotateCcwIcon className=\"size-4\" aria-hidden=\"true\" /></IconButton>}\n      {state.remote !== null && <IconButton label={labels.discardLocal} disabled={pending || unconfirmed} onClick={() => perform(controller.actions.discardToRemote)}><RotateCcwIcon className=\"size-4\" aria-hidden=\"true\" /></IconButton>}\n      {controls}\n    </>}>\n    {error && <p role=\"alert\" className=\"m-0 border-b border-border bg-destructive/10 px-3 py-2 text-xs text-destructive\">{error}</p>}\n    {interactive && mode === 'preview'\n      ? <InteractiveFrame text={state.text} sources={interactive.scriptSources} reload={reload} title={`${title} (running)`} testId={testId} />\n      : <HtmlViewer controller={controller} title={title} header={false} mode={mode === 'source' ? 'source' : 'preview'} onModeChange={next => setMode(next)} className=\"boring-html-pane\" />}\n  </ViewerFrame>;\n}\n",
+      "content": "'use client';\n\nimport { useMemo, useState, useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\nimport { CodeXmlIcon, EyeIcon, RotateCcwIcon, SaveIcon, SearchCheckIcon } from 'lucide-react';\nimport { HtmlViewer } from '@hachej/boring-ui-kit/html-viewer';\nimport type { HtmlController } from '@hachej/boring-ui-kit/html';\nimport { Button } from '@/components/ui/button';\nimport { editorControls } from '../button/editor-controls';\nimport { downloadFile, fileNameFor } from './download';\nimport { copyText } from '../utils/utils';\nimport { InteractiveFrame } from './interactive-html';\nimport type { InteractiveHtml } from './interactive-html';\nimport { ViewerFrame, ViewerToggle } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { defaultViewerLabels, useViewerText } from './viewer-window';\nimport type { ViewerLabels } from './viewer-window';\n\nexport type HtmlPaneMode = 'preview' | 'source';\n\nexport interface HtmlPaneProps {\n  /** Borrowed: the host owns the controller and disposes it. */\n  readonly controller: HtmlController;\n  readonly title?: string;\n  readonly subtitle?: ReactNode;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly initialMode?: HtmlPaneMode;\n  /** Reports the person's choice, so a host that remounts the pane (for a new revision) can start it in the same mode. */\n  readonly onModeChange?: (mode: HtmlPaneMode) => void;\n  /**\n   * Host opt-in (off by default): the preview then runs the page's own scripts in a sandboxed frame with an opaque origin and a\n   * Content-Security-Policy limited to inline code and `scriptSources`. See registry/README.md. Without it the preview is the passive,\n   * script-free rendering of `@hachej/boring-ui-kit/html-viewer`.\n   */\n  readonly interactive?: InteractiveHtml;\n  /** Leading header content, before the title. */\n  readonly headerStart?: ReactNode;\n  readonly controls?: ReactNode;\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n  /** The pane's and its bar's words, over the window's and `defaultViewerLabels`. */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n}\n\nexport function htmlStatus(state: ReturnType<HtmlController['getSnapshot']>, labels: ViewerLabels = defaultViewerLabels): ViewerStatus {\n  if (state.lifecycle === 'disposed') return { label: labels.closed };\n  if (state.save.kind === 'pending') return { label: labels.saving };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'unknown') return { label: labels.saveUnconfirmed, tone: 'warning' };\n  if (state.remote !== null || state.save.kind === 'settled' && state.save.result.kind === 'conflict') return { label: labels.changedElsewhere, tone: 'warning' };\n  if (state.readOnly) return { label: labels.readOnly, kind: 'read-only' };\n  return state.dirty ? { label: labels.unsaved, tone: 'warning' } : { label: labels.saved, tone: 'success', kind: 'saved' };\n}\n\n/** The HTML safe preview and source editor in the standard viewer frame. The preview never runs scripts; a host-enabled interactive preview runs them, in a sandbox. */\nexport function HtmlPane({ controller, labels: ownLabels, title = 'HTML document', subtitle, target, revision, initialMode = 'preview', onModeChange, interactive, headerStart, controls, onRefresh, onShare, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, className }: HtmlPaneProps) {\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const { labels } = useViewerText(ownLabels);\n  const [mode, setModeState] = useState<HtmlPaneMode>(initialMode);\n  const setMode = (next: HtmlPaneMode) => { setModeState(next); onModeChange?.(next); };\n  const [reload, setReload] = useState(0);\n  const [error, setError] = useState<string>();\n  const pending = state.save.kind === 'pending';\n  const unconfirmed = state.save.kind === 'settled' && state.save.result.kind === 'unknown';\n  const disposed = state.lifecycle === 'disposed';\n  const perform = (action: () => Promise<{ readonly kind: string; readonly reason?: string }>) => {\n    setError(undefined);\n    void Promise.resolve().then(action).then(result => { if ((result.kind === 'denied' || result.kind === 'unavailable' || result.kind === 'file_too_large') && result.reason) setError(result.reason); })\n      .catch(() => setError(labels.operationFailed));\n  };\n  const filename = useMemo(() => fileNameFor(title, 'html'), [title]);\n  return <ViewerFrame title={title} subtitle={subtitle} headerStart={headerStart} status={htmlStatus(state, labels)} labels={labels} target={target} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={() => { if (interactive && mode === 'preview') setReload(count => count + 1); return (onRefresh ?? (() => controller.actions.refresh()))(); }} onShare={onShare} onCopy={() => copyText(controller.getSnapshot().text)}\n    onDownload={() => downloadFile(filename, controller.getSnapshot().text, 'text/html;charset=utf-8')} onOpenInNewTab={onOpenInNewTab} onClose={onClose}\n    controls={<>\n      <ViewerToggle label={labels.view} value={mode} onChange={setMode} options={[\n        { id: 'preview', label: labels.htmlPreview, text: labels.preview, icon: <EyeIcon data-icon=\"inline-start\" aria-hidden=\"true\" />, testId: `${testId}-mode-preview` },\n        { id: 'source', label: labels.htmlSource, text: labels.source, icon: <CodeXmlIcon data-icon=\"inline-start\" aria-hidden=\"true\" />, testId: `${testId}-mode-source` }]} />\n      {!state.readOnly && state.dirty && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.save} title={labels.save} data-testid={`${testId}-save`} disabled={disposed || pending || unconfirmed} onClick={() => perform(() => controller.flush(controller.actions.selection()))}><SaveIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n      {unconfirmed && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.checkSave} title={labels.checkSave} onClick={() => perform(controller.actions.reconcile)}><SearchCheckIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n      {unconfirmed && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.abandon} title={labels.abandon} onClick={() => perform(controller.actions.abandon)}><RotateCcwIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n      {state.remote !== null && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.discardLocal} title={labels.discardLocal} disabled={pending || unconfirmed} onClick={() => perform(controller.actions.discardToRemote)}><RotateCcwIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n      {controls}\n    </>}>\n    {error && <p role=\"alert\" className=\"m-0 px-3 py-2\">{error}</p>}\n    {interactive && mode === 'preview'\n      ? <InteractiveFrame text={state.text} sources={interactive.scriptSources} reload={reload} title={`${title} (running)`} testId={testId} />\n      : <HtmlViewer components={editorControls} controller={controller} title={title} header={false} mode={mode === 'source' ? 'source' : 'preview'} onModeChange={next => setMode(next)} className=\"boring-html-pane\" />}\n  </ViewerFrame>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/html-pane.tsx"
     },
     {
       "path": "registry/viewers/image-pane.tsx",
-      "content": "'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { PointerEvent, ReactNode } from 'react';\nimport { MaximizeIcon, ScanIcon, ZoomInIcon, ZoomOutIcon } from 'lucide-react';\nimport { Button } from '../button/button';\nimport { downloadFile } from './download';\nimport { formatBytes, useMediaUrl } from './media';\nimport type { MediaSource } from './media';\nimport { cn } from '../utils/utils';\nimport { useViewerBar, ViewerFrame, ViewerIconButton } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { useViewerText } from './viewer-window';\n\nexport const IMAGE_TYPES: Readonly<Record<string, string>> = { 'image/png': 'PNG', 'image/jpeg': 'JPEG', 'image/gif': 'GIF', 'image/webp': 'WebP', 'image/svg+xml': 'SVG' };\nconst STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8];\n\nexport interface ImagePaneProps extends MediaSource {\n  readonly name: string;\n  readonly mediaType: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: ViewerStatus;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly controls?: ReactNode;\n  /** Re-reads the file; the host passes the new bytes, blob or URL back in. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n}\n\n/** Zoom steps and the level; on a narrow bar only the steps stay (the stage also zooms with + - 0). Fit and Actual size are in the \"…\" menu. */\nfunction ZoomControls({ testId, percent, ready, onStep, onFit }: { readonly testId: string; readonly percent: string; readonly ready: boolean; readonly onStep: (direction: 1 | -1) => void; readonly onFit: () => void }) {\n  const { tight } = useViewerBar();\n  const { labels } = useViewerText();\n  return <div role=\"group\" aria-label={labels.zoom} className=\"flex items-center gap-0.5\">\n    <ViewerIconButton label={labels.zoomOut} data-testid={`${testId}-zoom-out`} disabled={!ready} onClick={() => onStep(-1)}><ZoomOutIcon className=\"size-4\" aria-hidden=\"true\" /></ViewerIconButton>\n    {!tight && <Button variant=\"quiet\" size=\"bar\" data-testid={`${testId}-zoom-level`} aria-label={labels.zoomLevel(percent)} title={labels.fitToView} disabled={!ready} className=\"min-w-10 px-1 tabular-nums\" onClick={onFit}>{percent}</Button>}\n    <ViewerIconButton label={labels.zoomIn} data-testid={`${testId}-zoom-in`} disabled={!ready} onClick={() => onStep(1)}><ZoomInIcon className=\"size-4\" aria-hidden=\"true\" /></ViewerIconButton>\n  </div>;\n}\n\ntype Zoom = { readonly kind: 'fit' } | { readonly kind: 'scale'; readonly value: number };\n\n/**\n * A read-only image viewer in the standard frame: fit to view by default, zoom, actual size, drag to pan when zoomed, a checkerboard\n * behind transparency. Every type, SVG included, is shown through an `<img>` from an object URL, never as markup.\n */\nexport function ImagePane({ name, mediaType, bytes, blob, url: hostUrl, subtitle, status, target, revision, controls, onRefresh, onShare, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, className }: ImagePaneProps) {\n  const source = useMemo<MediaSource>(() => ({ ...(bytes ? { bytes } : {}), ...(blob ? { blob } : {}), ...(hostUrl ? { url: hostUrl } : {}) }), [bytes, blob, hostUrl]);\n  const { url, size, blob: made } = useMediaUrl(source, mediaType);\n  const supported = mediaType in IMAGE_TYPES;\n  const { labels } = useViewerText();\n  const [zoom, setZoom] = useState<Zoom>({ kind: 'fit' });\n  const [natural, setNatural] = useState<{ width: number; height: number } | undefined>(undefined);\n  const [failed, setFailed] = useState(false);\n  const [fitScale, setFitScale] = useState(1);\n  const stage = useRef<HTMLDivElement>(null);\n  const image = useRef<HTMLImageElement>(null);\n  const drag = useRef<{ x: number; y: number; left: number; top: number } | undefined>(undefined);\n  useEffect(() => { setNatural(undefined); setFailed(false); }, [url]);\n  const measure = () => {\n    const box = stage.current, img = image.current;\n    if (box && img && img.naturalWidth) setFitScale(Math.min(1, (box.clientWidth - 32) / img.naturalWidth, (box.clientHeight - 32) / img.naturalHeight));\n  };\n  useEffect(() => {\n    const box = stage.current;\n    if (!box || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, [url]);\n  const current = zoom.kind === 'fit' ? fitScale : zoom.value;\n  const step = (direction: 1 | -1) => {\n    const now = Number(current.toFixed(3));\n    const next = direction > 0 ? STEPS.find(value => value > now + 0.001) : [...STEPS].reverse().find(value => value < now - 0.001);\n    if (next) setZoom({ kind: 'scale', value: next });\n  };\n  const label = IMAGE_TYPES[mediaType] ?? mediaType;\n  const facts = [label, natural && `${natural.width} × ${natural.height}`, size !== undefined && formatBytes(size)].filter(Boolean) as string[];\n  const panning = zoom.kind === 'scale' && natural !== undefined && (natural.width * zoom.value > (stage.current?.clientWidth ?? 0) || natural.height * zoom.value > (stage.current?.clientHeight ?? 0));\n  const begin = (event: PointerEvent<HTMLDivElement>) => {\n    const box = stage.current;\n    if (!panning || !box || event.button !== 0) return;\n    drag.current = { x: event.clientX, y: event.clientY, left: box.scrollLeft, top: box.scrollTop };\n    box.setPointerCapture?.(event.pointerId);\n  };\n  const move = (event: PointerEvent<HTMLDivElement>) => {\n    const box = stage.current, start = drag.current;\n    if (!box || !start) return;\n    box.scrollLeft = start.left - (event.clientX - start.x);\n    box.scrollTop = start.top - (event.clientY - start.y);\n  };\n  const end = () => { drag.current = undefined; };\n  const downloadName = name.split('/').pop() || 'image';\n  const download = () => { const data = made; if (data) downloadFile(downloadName, data, mediaType); else if (url) { const link = Object.assign(document.createElement('a'), { href: url, download: downloadName }); document.body.append(link); link.click(); link.remove(); } };\n  const percent = `${Math.round(current * 100)}%`;\n  return <ViewerFrame title={name.split('/').pop() || name} subtitle={<>{subtitle}{subtitle && facts.length > 0 && <span aria-hidden=\"true\">·</span>}{facts.join(' · ')}</>} status={status} target={target} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh} onShare={onShare} onDownload={url ? download : undefined} onOpenInNewTab={onOpenInNewTab ?? (url ? () => { window.open(url, '_blank', 'noopener,noreferrer'); } : undefined)} onClose={onClose}\n    menu={[\n      { id: 'zoom-fit', label: labels.fitToView, icon: <ScanIcon className=\"size-4\" />, disabled: !natural, onSelect: () => setZoom({ kind: 'fit' }) },\n      { id: 'zoom-actual', label: labels.actualSize, icon: <MaximizeIcon className=\"size-4\" />, disabled: !natural, onSelect: () => setZoom({ kind: 'scale', value: 1 }) }]}\n    controls={<>\n      <ZoomControls testId={testId} percent={percent} ready={Boolean(natural)} onStep={step} onFit={() => setZoom({ kind: 'fit' })} />\n      {controls}\n    </>}>\n    <div ref={stage} data-testid={`${testId}-stage`} data-zoom={zoom.kind === 'fit' ? 'fit' : String(zoom.value)} data-panning={panning || undefined}\n      onPointerDown={begin} onPointerMove={move} onPointerUp={end} onPointerCancel={end}\n      className={cn('boring-viewer-stage relative min-h-0 flex-1 overflow-auto', panning && 'cursor-grab active:cursor-grabbing')} tabIndex={0} aria-label={labels.imageStage(name)}\n      onKeyDown={event => { if (event.key === '+' || event.key === '=') step(1); else if (event.key === '-') step(-1); else if (event.key === '0') setZoom({ kind: 'fit' }); }}>\n      {!supported ? <p role=\"alert\" className=\"m-auto p-6 text-center text-sm text-muted-foreground\">{labels.imageUnsupported(mediaType)}</p>\n        : failed ? <p role=\"alert\" className=\"m-auto p-6 text-center text-sm text-muted-foreground\">{labels.imageUnreadable}</p>\n        : url ? <div className=\"flex min-h-full min-w-full items-center justify-center p-4\">\n          <img ref={image} src={url} alt={name} data-testid={`${testId}-image`} draggable={false} decoding=\"async\" referrerPolicy=\"no-referrer\"\n            onLoad={event => { setNatural({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight }); measure(); }} onError={() => setFailed(true)}\n            style={natural ? { width: natural.width * current, height: natural.height * current, maxWidth: 'none' } : undefined}\n            className=\"boring-viewer-checker block shrink-0 select-none rounded-sm shadow-sm outline outline-1 outline-border\" />\n        </div> : <p role=\"status\" className=\"m-auto p-6 text-sm text-muted-foreground\">{labels.loading}</p>}\n    </div>\n  </ViewerFrame>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { PointerEvent, ReactNode } from 'react';\nimport { MaximizeIcon, ScanIcon, ZoomInIcon, ZoomOutIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { downloadFile } from './download';\nimport { formatBytes, useMediaUrl } from './media';\nimport type { MediaSource } from './media';\nimport { cn } from '../utils/utils';\nimport { useViewerBar, ViewerFrame } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { useViewerText } from './viewer-window';\n\nexport const IMAGE_TYPES: Readonly<Record<string, string>> = { 'image/png': 'PNG', 'image/jpeg': 'JPEG', 'image/gif': 'GIF', 'image/webp': 'WebP', 'image/svg+xml': 'SVG' };\nconst STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8];\n\nexport interface ImagePaneProps extends MediaSource {\n  readonly name: string;\n  readonly mediaType: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: ViewerStatus;\n  readonly target?: unknown;\n  readonly revision?: string;\n  /** Leading header content, before the title. */\n  readonly headerStart?: ReactNode;\n  readonly controls?: ReactNode;\n  /** Re-reads the file; the host passes the new bytes, blob or URL back in. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n}\n\n/** Zoom steps and the level; on a narrow bar only the steps stay (the stage also zooms with + - 0). Fit and Actual size are in the \"…\" menu. */\nexport function ZoomControls({ testId, percent, ready, onStep, onFit }: { readonly testId: string; readonly percent: string; readonly ready: boolean; readonly onStep: (direction: 1 | -1) => void; readonly onFit: () => void }) {\n  const { tight } = useViewerBar();\n  const { labels } = useViewerText();\n  return <div role=\"group\" aria-label={labels.zoom} className=\"flex items-center gap-0.5\">\n    <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.zoomOut} title={labels.zoomOut} data-testid={`${testId}-zoom-out`} disabled={!ready} onClick={() => onStep(-1)}><ZoomOutIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n    {!tight && <Button variant=\"ghost\" size=\"sm\" data-testid={`${testId}-zoom-level`} aria-label={labels.zoomLevel(percent)} title={labels.fitToView} disabled={!ready} className=\"min-w-10\" onClick={onFit}>{percent}</Button>}\n    <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.zoomIn} title={labels.zoomIn} data-testid={`${testId}-zoom-in`} disabled={!ready} onClick={() => onStep(1)}><ZoomInIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </div>;\n}\n\ntype Zoom = { readonly kind: 'fit' } | { readonly kind: 'scale'; readonly value: number };\n\n/**\n * A read-only image viewer in the standard frame: fit to view by default, zoom, actual size, drag to pan when zoomed, a checkerboard\n * behind transparency. Every type, SVG included, is shown through an `<img>` from an object URL, never as markup.\n */\nexport function ImagePane({ name, mediaType, bytes, blob, url: hostUrl, subtitle, status, target, revision, headerStart, controls, onRefresh, onShare, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, className }: ImagePaneProps) {\n  const source = useMemo<MediaSource>(() => ({ ...(bytes ? { bytes } : {}), ...(blob ? { blob } : {}), ...(hostUrl ? { url: hostUrl } : {}) }), [bytes, blob, hostUrl]);\n  const { url, size, blob: made } = useMediaUrl(source, mediaType);\n  const supported = mediaType in IMAGE_TYPES;\n  const { labels } = useViewerText();\n  const [zoom, setZoom] = useState<Zoom>({ kind: 'fit' });\n  const [natural, setNatural] = useState<{ width: number; height: number } | undefined>(undefined);\n  const [failed, setFailed] = useState(false);\n  const [fitScale, setFitScale] = useState(1);\n  const stage = useRef<HTMLDivElement>(null);\n  const image = useRef<HTMLImageElement>(null);\n  const drag = useRef<{ x: number; y: number; left: number; top: number } | undefined>(undefined);\n  useEffect(() => { setNatural(undefined); setFailed(false); }, [url]);\n  const measure = () => {\n    const box = stage.current, img = image.current;\n    if (box && img && img.naturalWidth) setFitScale(Math.min(1, (box.clientWidth - 32) / img.naturalWidth, (box.clientHeight - 32) / img.naturalHeight));\n  };\n  useEffect(() => {\n    const box = stage.current;\n    if (!box || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, [url]);\n  const current = zoom.kind === 'fit' ? fitScale : zoom.value;\n  const step = (direction: 1 | -1) => {\n    const now = Number(current.toFixed(3));\n    const next = direction > 0 ? STEPS.find(value => value > now + 0.001) : [...STEPS].reverse().find(value => value < now - 0.001);\n    if (next) setZoom({ kind: 'scale', value: next });\n  };\n  const label = IMAGE_TYPES[mediaType] ?? mediaType;\n  const facts = [label, natural && `${natural.width} × ${natural.height}`, size !== undefined && formatBytes(size)].filter(Boolean) as string[];\n  const panning = zoom.kind === 'scale' && natural !== undefined && (natural.width * zoom.value > (stage.current?.clientWidth ?? 0) || natural.height * zoom.value > (stage.current?.clientHeight ?? 0));\n  const begin = (event: PointerEvent<HTMLDivElement>) => {\n    const box = stage.current;\n    if (!panning || !box || event.button !== 0) return;\n    drag.current = { x: event.clientX, y: event.clientY, left: box.scrollLeft, top: box.scrollTop };\n    box.setPointerCapture?.(event.pointerId);\n  };\n  const move = (event: PointerEvent<HTMLDivElement>) => {\n    const box = stage.current, start = drag.current;\n    if (!box || !start) return;\n    box.scrollLeft = start.left - (event.clientX - start.x);\n    box.scrollTop = start.top - (event.clientY - start.y);\n  };\n  const end = () => { drag.current = undefined; };\n  const downloadName = name.split('/').pop() || 'image';\n  const download = () => { const data = made; if (data) downloadFile(downloadName, data, mediaType); else if (url) { const link = Object.assign(document.createElement('a'), { href: url, download: downloadName }); document.body.append(link); link.click(); link.remove(); } };\n  const percent = `${Math.round(current * 100)}%`;\n  return <ViewerFrame title={name.split('/').pop() || name} subtitle={<>{subtitle}{subtitle && facts.length > 0 && <span aria-hidden=\"true\">·</span>}{facts.join(' · ')}</>} status={status} target={target} revision={revision} headerStart={headerStart} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh} onShare={onShare} onDownload={url ? download : undefined} onOpenInNewTab={onOpenInNewTab ?? (url ? () => { window.open(url, '_blank', 'noopener,noreferrer'); } : undefined)} onClose={onClose}\n    menu={[\n      { id: 'zoom-fit', label: labels.fitToView, icon: <ScanIcon className=\"size-4\" />, disabled: !natural, onSelect: () => setZoom({ kind: 'fit' }) },\n      { id: 'zoom-actual', label: labels.actualSize, icon: <MaximizeIcon className=\"size-4\" />, disabled: !natural, onSelect: () => setZoom({ kind: 'scale', value: 1 }) }]}\n    controls={<>\n      <ZoomControls testId={testId} percent={percent} ready={Boolean(natural)} onStep={step} onFit={() => setZoom({ kind: 'fit' })} />\n      {controls}\n    </>}>\n    <div ref={stage} data-testid={`${testId}-stage`} data-zoom={zoom.kind === 'fit' ? 'fit' : String(zoom.value)} data-panning={panning || undefined}\n      onPointerDown={begin} onPointerMove={move} onPointerUp={end} onPointerCancel={end}\n      className={cn('boring-viewer-stage relative min-h-0 flex-1 overflow-auto', panning && 'cursor-grab active:cursor-grabbing')} tabIndex={0} aria-label={labels.imageStage(name)}\n      onKeyDown={event => { if (event.key === '+' || event.key === '=') step(1); else if (event.key === '-') step(-1); else if (event.key === '0') setZoom({ kind: 'fit' }); }}>\n      {!supported ? <p role=\"alert\" className=\"m-auto p-6 text-center text-sm text-muted-foreground\">{labels.imageUnsupported(mediaType)}</p>\n        : failed ? <p role=\"alert\" className=\"m-auto p-6 text-center text-sm text-muted-foreground\">{labels.imageUnreadable}</p>\n        : url ? <div className=\"flex min-h-full min-w-full items-center justify-center p-4\">\n          <img ref={image} src={url} alt={name} data-testid={`${testId}-image`} draggable={false} decoding=\"async\" referrerPolicy=\"no-referrer\"\n            onLoad={event => { setNatural({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight }); measure(); }} onError={() => setFailed(true)}\n            style={natural ? { width: natural.width * current, height: natural.height * current, maxWidth: 'none' } : undefined}\n            className=\"boring-viewer-checker block shrink-0 select-none  outline outline-1 outline-border\" />\n        </div> : <p role=\"status\" className=\"m-auto p-6 text-sm text-muted-foreground\">{labels.loading}</p>}\n    </div>\n  </ViewerFrame>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/image-pane.tsx"
     },
     {
       "path": "registry/viewers/interactive-html.tsx",
-      "content": "'use client';\n\nimport type { ReactNode } from 'react';\n\n/**\n * Host opt-in for running an HTML document's own scripts. `scriptSources` are the HTTPS origins the page may load libraries, styles and fonts\n * from (for example `https://cdnjs.cloudflare.com`). Everything else is closed: no network requests from the page, no frames, no forms.\n * Pinning library versions is the page's responsibility.\n */\nexport interface InteractiveHtml { readonly scriptSources: readonly string[] }\n\n/** An origin only: `https://host` with an optional port, no path, no wildcard, nothing that could add a second CSP directive. */\nconst ORIGIN = /^https:\\/\\/[a-z0-9]([a-z0-9-]*[a-z0-9])?(\\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*(:\\d{1,5})?$/i;\n\nexport function allowedOrigins(sources: readonly string[]): string[] {\n  return [...new Set(sources.map(source => source.trim().toLowerCase()).filter(source => ORIGIN.test(source)))];\n}\n\n/** The Content-Security-Policy the running page gets: inline script and style, the allow-listed origins for libraries, nothing else. */\nexport function interactivePolicy(sources: readonly string[]): string {\n  const origins = allowedOrigins(sources).join(' ');\n  const list = (...extra: string[]) => [...extra, ...(origins ? [origins] : [])].join(' ');\n  return [\n    \"default-src 'none'\",\n    `script-src ${list(\"'unsafe-inline'\")}`,\n    `style-src ${list(\"'unsafe-inline'\")}`,\n    'img-src data: blob:',\n    `font-src ${list('data:')}`,\n    \"connect-src 'none'\",\n    \"frame-src 'none'\",\n    \"base-uri 'none'\",\n    \"form-action 'none'\",\n  ].join('; ');\n}\n\n/**\n * The document the frame loads: the policy and a no-referrer rule come first, so they apply before any of the page's own markup is parsed.\n * A second doctype or head in the page is ignored by the parser; a meta policy of the page's own can only tighten this one.\n */\nexport function interactiveDocument(text: string, sources: readonly string[]): string {\n  return `<!doctype html><meta http-equiv=\"Content-Security-Policy\" content=\"${interactivePolicy(sources).replaceAll('\"', '&quot;')}\"><meta name=\"referrer\" content=\"no-referrer\">${text}`;\n}\n\n/**\n * The page running in a sandboxed frame: `allow-scripts` only. There is no `allow-same-origin`, so the page has an opaque origin (no cookies,\n * storage or access to this page), and no top navigation, popups, forms, downloads or modals. `allow=\"\"` withholds camera, microphone, location\n * and the other powerful features. Changing `reload` loads the page again from the start.\n */\nexport function InteractiveFrame({ text, sources, reload = 0, title = 'HTML page (running)', testId = 'viewer', children }: {\n  readonly text: string;\n  readonly sources: readonly string[];\n  readonly reload?: number;\n  readonly title?: string;\n  readonly testId?: string;\n  readonly children?: ReactNode;\n}) {\n  return <div className=\"boring-html-run flex min-h-0 flex-1 flex-col bg-white\" data-testid={`${testId}-run`}>\n    <iframe key={reload} title={title} sandbox=\"allow-scripts\" allow=\"\" referrerPolicy=\"no-referrer\" srcDoc={interactiveDocument(text, sources)}\n      data-testid={`${testId}-run-frame`} className=\"size-full min-h-0 flex-1 border-0 bg-white\" />\n    {children}\n  </div>;\n}\n",
+      "content": "'use client';\n\nimport type { ReactNode } from 'react';\n\n/**\n * Host opt-in for running an HTML document's own scripts. `scriptSources` are the HTTPS origins the page may load libraries, styles and fonts\n * from (for example `https://cdnjs.cloudflare.com`). Everything else is closed: no network requests from the page, no frames, no forms.\n * Pinning library versions is the page's responsibility.\n */\nexport interface InteractiveHtml { readonly scriptSources: readonly string[] }\n\n/** An origin only: `https://host` with an optional port, no path, no wildcard, nothing that could add a second CSP directive. */\nconst ORIGIN = /^https:\\/\\/[a-z0-9]([a-z0-9-]*[a-z0-9])?(\\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*(:\\d{1,5})?$/i;\n\nexport function allowedOrigins(sources: readonly string[]): string[] {\n  return [...new Set(sources.map(source => source.trim().toLowerCase()).filter(source => ORIGIN.test(source)))];\n}\n\n/** The Content-Security-Policy the running page gets: inline script and style, the allow-listed origins for libraries, nothing else. */\nexport function interactivePolicy(sources: readonly string[]): string {\n  const origins = allowedOrigins(sources).join(' ');\n  const list = (...extra: string[]) => [...extra, ...(origins ? [origins] : [])].join(' ');\n  return [\n    \"default-src 'none'\",\n    `script-src ${list(\"'unsafe-inline'\")}`,\n    `style-src ${list(\"'unsafe-inline'\")}`,\n    'img-src data: blob:',\n    `font-src ${list('data:')}`,\n    \"connect-src 'none'\",\n    \"frame-src 'none'\",\n    \"base-uri 'none'\",\n    \"form-action 'none'\",\n  ].join('; ');\n}\n\n/**\n * The document the frame loads: the policy and a no-referrer rule come first, so they apply before any of the page's own markup is parsed.\n * A second doctype or head in the page is ignored by the parser; a meta policy of the page's own can only tighten this one.\n */\nexport function interactiveDocument(text: string, sources: readonly string[]): string {\n  return `<!doctype html><meta http-equiv=\"Content-Security-Policy\" content=\"${interactivePolicy(sources).replaceAll('\"', '&quot;')}\"><meta name=\"referrer\" content=\"no-referrer\">${text}`;\n}\n\n/**\n * The page running in a sandboxed frame: `allow-scripts` only. There is no `allow-same-origin`, so the page has an opaque origin (no cookies,\n * storage or access to this page), and no top navigation, popups, forms, downloads or modals. `allow=\"\"` withholds camera, microphone, location\n * and the other powerful features. Changing `reload` loads the page again from the start.\n */\nexport function InteractiveFrame({ text, sources, reload = 0, title = 'HTML page (running)', testId = 'viewer', children }: {\n  readonly text: string;\n  readonly sources: readonly string[];\n  readonly reload?: number;\n  readonly title?: string;\n  readonly testId?: string;\n  readonly children?: ReactNode;\n}) {\n  return <div className=\"boring-html-run flex min-h-0 flex-1 flex-col\" data-testid={`${testId}-run`}>\n    <iframe key={reload} title={title} sandbox=\"allow-scripts\" allow=\"\" referrerPolicy=\"no-referrer\" srcDoc={interactiveDocument(text, sources)}\n      data-testid={`${testId}-run-frame`} className=\"size-full min-h-0 flex-1\" />\n    {children}\n  </div>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/interactive-html.tsx"
     },
     {
       "path": "registry/viewers/markdown-pane.tsx",
-      "content": "'use client';\n\nimport { useMemo, useState, useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\nimport { CodeXmlIcon, PencilLineIcon, SaveIcon } from 'lucide-react';\nimport { MarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownImageResolver, MarkdownMountedTools, MarkdownRichSafety } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownController } from '@hachej/boring-ui-kit/markdown';\nimport { IconButton } from '../button/button';\nimport { downloadFile, fileNameFor } from './download';\nimport { copyText } from '../utils/utils';\nimport { ViewerFrame, ViewerToggle } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { defaultViewerLabels, useViewerText } from './viewer-window';\nimport type { ViewerLabels } from './viewer-window';\n\nexport interface MarkdownPaneProps {\n  /** Borrowed: the host owns the controller and disposes it. */\n  readonly controller: MarkdownController;\n  readonly title?: string;\n  readonly subtitle?: ReactNode;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly initialMode?: 'rich' | 'source';\n  /** Reports the person's choice, so a host that remounts the pane (for a new revision) can start it in the same mode. */\n  readonly onModeChange?: (mode: 'rich' | 'source') => void;\n  readonly placeholder?: string;\n  /** Extra viewer controls, for example a version switcher. */\n  readonly controls?: ReactNode;\n  /** Defaults to the controller's refresh: a clean document follows the saved one, unsaved edits are kept and shown as changed elsewhere. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** Host mapping from an image address in the document to a loadable URL. Images stay inert without it. */\n  readonly resolveImage?: MarkdownImageResolver;\n  readonly onMountedTools?: (tools: MarkdownMountedTools | null) => void;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n  /** The pane's and its bar's words, over the window's and `defaultViewerLabels`. */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n}\n\n/** The status chip for a Markdown controller: Saved, Unsaved, Saving, Changed elsewhere, Read-only. */\nexport function markdownStatus(state: ReturnType<MarkdownController['getSnapshot']>, labels: ViewerLabels = defaultViewerLabels): ViewerStatus {\n  if (state.lifecycle === 'disposed') return { label: labels.closed };\n  if (state.save.kind === 'pending') return { label: labels.saving };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'unknown') return { label: labels.saveUnconfirmed, tone: 'warning' };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'conflict' || state.remote !== null) return { label: labels.changedElsewhere, tone: 'warning' };\n  if (state.readOnly) return { label: labels.readOnly, kind: 'read-only' };\n  return state.dirty ? { label: labels.unsaved, tone: 'warning' } : { label: labels.saved, tone: 'success', kind: 'saved' };\n}\n\n/** The Markdown editor in the standard viewer frame: mode toggle, Save while there are edits, Share, and Reload, Copy and Download under the \"…\" menu. */\nexport function MarkdownPane({ controller, title: givenTitle, labels: ownLabels, subtitle, target, revision, initialMode = 'rich', onModeChange, placeholder, controls, onRefresh, onShare, onOpenInNewTab, onClose, resolveImage, onMountedTools, testId = 'viewer', titleTestId, className }: MarkdownPaneProps) {\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const { labels } = useViewerText(ownLabels);\n  const title = givenTitle ?? labels.document;\n  const [requested, setRequestedState] = useState<'rich' | 'source'>(initialMode);\n  const setRequested = (next: 'rich' | 'source') => { setRequestedState(next); onModeChange?.(next); };\n  const [safety, setSafety] = useState<MarkdownRichSafety>({ safe: true });\n  const mode = safety.safe ? requested : 'source';\n  const unavailable = state.readOnly || state.lifecycle !== 'active';\n  const pending = state.save.kind === 'pending';\n  const unconfirmed = state.save.kind === 'settled' && state.save.result.kind === 'unknown';\n  const [refused, setRefused] = useState<{ readonly version: number; readonly label: string } | null>(null);\n  const save = () => {\n    setRefused(null);\n    const version = controller.getSnapshot().bufferVersion;\n    void controller.flush(controller.actions.selection()).then(result => {\n      if (result.kind === 'denied' || result.kind === 'conflict' || result.kind === 'unavailable' || result.kind === 'file_too_large') {\n        const reason = result.reason ?? (result.kind === 'conflict' ? labels.changedElsewhereReason : result.kind);\n        setRefused({ version, label: labels.notSaved(reason.length > 48 ? `${reason.slice(0, 47)}…` : reason) });\n      }\n    }, () => setRefused({ version, label: labels.notSaved(labels.saveFailedReason) }));\n  };\n  const filename = useMemo(() => fileNameFor(title, 'md'), [title]);\n  return <ViewerFrame title={title} subtitle={subtitle} status={refused && refused.version === state.bufferVersion && state.save.kind !== 'pending' ? { label: refused.label, tone: 'warning' } : markdownStatus(state, labels)} target={target} labels={labels} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh ?? (() => controller.actions.refresh())} onShare={onShare} onCopy={() => copyText(controller.getSnapshot().text)}\n    onDownload={() => downloadFile(filename, controller.getSnapshot().text, 'text/markdown;charset=utf-8')} onOpenInNewTab={onOpenInNewTab} onClose={onClose}\n    controls={<>\n      <ViewerToggle label={labels.editorMode} value={mode} onChange={setRequested} options={[\n        { id: 'rich', label: labels.richText, text: labels.rich, icon: <PencilLineIcon className=\"size-4\" aria-hidden=\"true\" />, disabled: !safety.safe, testId: `${testId}-mode-rich` },\n        { id: 'source', label: labels.markdownSource, text: labels.source, icon: <CodeXmlIcon className=\"size-4\" aria-hidden=\"true\" />, testId: `${testId}-mode-source` }]} />\n      {!state.readOnly && state.dirty && <IconButton label={labels.save} variant=\"default\" data-testid={`${testId}-save`} disabled={unavailable || pending || unconfirmed} onClick={save}><SaveIcon className=\"size-4\" aria-hidden=\"true\" /></IconButton>}\n      {controls}\n    </>}>\n    <MarkdownEditor controller={controller} title={title} header={false} mode={mode} onModeChange={setRequested} onRichSafety={setSafety}\n      {...(placeholder === undefined ? {} : { placeholder })} {...(resolveImage ? { resolveImage } : {})} {...(onMountedTools ? { onMountedTools } : {})} className=\"boring-markdown-editor\" />\n  </ViewerFrame>;\n}\n",
+      "content": "'use client';\n\nimport { useCallback, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\nimport { CodeXmlIcon, PencilLineIcon, SaveIcon } from 'lucide-react';\nimport { MarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownEditorProps, MarkdownImageResolver, MarkdownMountedTools, MarkdownRichSafety } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownController } from '@hachej/boring-ui-kit/markdown';\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { editorControls } from '../button/editor-controls';\nimport { downloadFile, fileNameFor } from './download';\nimport { copyText } from '../utils/utils';\nimport { ViewerFrame, ViewerToggle } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { defaultViewerLabels, useViewerText, useViewerWindow } from './viewer-window';\nimport type { ViewerLabels } from './viewer-window';\n\nexport interface MarkdownPaneProps {\n  /** Borrowed: the host owns the controller and disposes it. */\n  readonly controller: MarkdownController;\n  readonly title?: string;\n  readonly subtitle?: ReactNode;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly initialMode?: 'rich' | 'source';\n  /** Reports the person's choice, so a host that remounts the pane (for a new revision) can start it in the same mode. */\n  readonly onModeChange?: (mode: 'rich' | 'source') => void;\n  readonly placeholder?: string;\n  /** Defaults to 1200ms idle autosave; false keeps the Save button. */\n  readonly autosave?: MarkdownEditorProps['autosave'];\n  /** Registers the flush for owner teardown; this is not a navigation guard. */\n  readonly onAutosaveChange?: MarkdownEditorProps['onAutosaveChange'];\n  /** Registers with a host navigation guard whose onClose handles refused saves and deliberate discard. */\n  readonly onBeforeLeaveChange?: MarkdownEditorProps['onAutosaveChange'];\n  /** Pinned by default on desktop. Phones always use the selection bubble. */\n  readonly formattingToolbar?: MarkdownEditorProps['formattingToolbar'];\n  /** Leading header content, before the title. */\n  readonly headerStart?: ReactNode;\n  /** Extra viewer controls, for example a version switcher. */\n  readonly controls?: ReactNode;\n  /** Defaults to the controller's refresh: a clean document follows the saved one, unsaved edits are kept and shown as changed elsewhere. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** Host mapping from an image address in the document to a loadable URL. Images stay inert without it. */\n  readonly resolveImage?: MarkdownImageResolver;\n  readonly onMountedTools?: (tools: MarkdownMountedTools | null) => void;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n  /** The pane's and its bar's words, over the window's and `defaultViewerLabels`. */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n}\n\n/** The status chip for a Markdown controller: Saved, Unsaved, Saving, Changed elsewhere, Read-only. */\nexport function markdownStatus(state: ReturnType<MarkdownController['getSnapshot']>, labels: ViewerLabels = defaultViewerLabels): ViewerStatus {\n  if (state.lifecycle === 'disposed') return { label: labels.closed };\n  if (state.save.kind === 'pending') return { label: labels.saving };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'unknown') return { label: labels.saveUnconfirmed, tone: 'warning' };\n  if (state.save.kind === 'settled' && state.save.result.kind === 'conflict' || state.remote !== null) return { label: labels.changedElsewhere, tone: 'warning' };\n  if (state.readOnly) return { label: labels.readOnly, kind: 'read-only' };\n  return state.dirty ? { label: labels.unsaved, tone: 'warning' } : { label: labels.saved, tone: 'success', kind: 'saved' };\n}\n\n/** The Markdown editor in the standard viewer frame: mode toggle, Save while there are edits, Share, and Reload, Copy and Download under the \"…\" menu. */\nexport function MarkdownPane({ controller, title: givenTitle, labels: ownLabels, subtitle, target, revision, initialMode = 'rich', onModeChange, placeholder, formattingToolbar = 'pinned', autosave: ownAutosave, onAutosaveChange, onBeforeLeaveChange, headerStart, controls, onRefresh, onShare, onOpenInNewTab, onClose, resolveImage, onMountedTools, testId = 'viewer', titleTestId, className }: MarkdownPaneProps) {\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const { labels } = useViewerText(ownLabels);\n  const window = useViewerWindow();\n  const autosave = ownAutosave ?? window?.autosave ?? true;\n  const flush = useRef<(() => Promise<boolean>) | null>(null);\n  const registerAutosave = useCallback((save: (() => Promise<boolean>) | null) => { flush.current = save; onAutosaveChange?.(save); onBeforeLeaveChange?.(save); }, [onAutosaveChange, onBeforeLeaveChange]);\n  const close = onClose ? async () => {\n    if (autosave !== false && flush.current && !await flush.current() && !onBeforeLeaveChange) return false;\n    return onClose();\n  } : undefined;\n  const title = givenTitle ?? labels.document;\n  const [requested, setRequestedState] = useState<'rich' | 'source'>(initialMode);\n  const setRequested = (next: 'rich' | 'source') => { setRequestedState(next); onModeChange?.(next); };\n  const [toolbar, setToolbar] = useState(formattingToolbar);\n  const [safety, setSafety] = useState<MarkdownRichSafety>({ safe: true });\n  const mode = safety.safe ? requested : 'source';\n  const unavailable = state.readOnly || state.lifecycle !== 'active';\n  const pending = state.save.kind === 'pending';\n  const unconfirmed = state.save.kind === 'settled' && state.save.result.kind === 'unknown';\n  const [refused, setRefused] = useState<{ readonly save: typeof state.save; readonly label: string } | null>(null);\n  const report: NonNullable<MarkdownEditorProps['onSaveResult']> = result => {\n    if (result.kind === 'saved' || result.kind === 'conflict') setRefused(null);\n    else if (result.kind === 'denied' || result.kind === 'unavailable' || result.kind === 'file_too_large') {\n      const reason = result.reason ?? result.kind;\n      setRefused({ save: controller.getSnapshot().save, label: labels.notSaved(reason.length > 48 ? `${reason.slice(0, 47)}…` : reason) });\n    }\n  };\n  const save = () => {\n    setRefused(null);\n    void controller.flush(controller.actions.selection()).then(report, () => setRefused({ save: controller.getSnapshot().save, label: labels.notSaved(labels.saveFailedReason) }));\n  };\n  const filename = useMemo(() => fileNameFor(title, 'md'), [title]);\n  return <ViewerFrame showSavedStatus title={title} subtitle={subtitle} headerStart={headerStart} status={refused && refused.save === state.save && state.save.kind !== 'pending' ? { label: refused.label, tone: 'warning' } : markdownStatus(state, labels)} target={target} labels={labels} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh ?? (() => controller.actions.refresh())} onShare={onShare} onCopy={() => copyText(controller.getSnapshot().text)}\n    onDownload={() => downloadFile(filename, controller.getSnapshot().text, 'text/markdown;charset=utf-8')} onOpenInNewTab={onOpenInNewTab} onClose={close}\n    controls={<>\n      {mode === 'rich' && <Toggle size=\"sm\" className=\"max-[640px]:hidden\" aria-label=\"Pin formatting toolbar\" title=\"Pin formatting toolbar\" pressed={toolbar === 'pinned'}\n        onPressedChange={pressed => setToolbar(pressed ? 'pinned' : 'selection')}>Aa</Toggle>}\n      <ViewerToggle label={labels.editorMode} value={mode} onChange={setRequested} options={[\n        { id: 'rich', label: labels.richText, text: labels.rich, icon: <PencilLineIcon data-icon=\"inline-start\" aria-hidden=\"true\" />, disabled: !safety.safe, testId: `${testId}-mode-rich` },\n        { id: 'source', label: labels.markdownSource, text: labels.source, icon: <CodeXmlIcon data-icon=\"inline-start\" aria-hidden=\"true\" />, testId: `${testId}-mode-source` }]} />\n      {autosave === false && !state.readOnly && state.dirty && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.save} title={labels.save} data-testid={`${testId}-save`} disabled={unavailable || pending || unconfirmed} onClick={save}><SaveIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n      {controls}\n    </>}>\n    <MarkdownEditor components={editorControls} controller={controller} title={title} header={false} autosave={autosave} onAutosaveChange={registerAutosave} onSaveResult={report} formattingToolbar={toolbar} mode={mode} onModeChange={setRequested} onRichSafety={setSafety}\n      {...(placeholder === undefined ? {} : { placeholder })} {...(resolveImage ? { resolveImage } : {})} {...(onMountedTools ? { onMountedTools } : {})} className=\"boring-markdown-editor\" />\n  </ViewerFrame>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/markdown-pane.tsx"
     },
@@ -67,16 +76,22 @@
     },
     {
       "path": "registry/viewers/menu.tsx",
-      "content": "'use client';\n\nimport { HistoryIcon } from 'lucide-react';\nimport { ActionMenu } from '../button/actions';\nimport type { ActionMenuProps, MenuItem } from '../button/actions';\nimport { useViewerText } from './viewer-window';\n\n/** One row of a viewer menu. With `checked` set (true or false) the row is a radio choice, otherwise a plain action. */\nexport type ViewerMenuItem = MenuItem;\nexport type ViewerMenuProps = Omit<ActionMenuProps, 'size'>;\n\n/**\n * An icon button that opens a small menu (the shared `ActionMenu` of the button item): arrow keys, Home/End and roving focus, Escape\n * (focus returns to the trigger), Tab and an outside press close it. Used for the viewer's overflow actions and the version history.\n */\nexport function ViewerMenu({ testId = 'viewer-menu', ...props }: ViewerMenuProps) {\n  return <ActionMenu testId={testId} {...props} />;\n}\n\n/** One saved version in a history menu. */\nexport interface ViewerVersion { readonly id: string; readonly label: string; readonly latest?: boolean }\n\n/**\n * The version history of a document: an icon button (tooltip \"Version history\") that opens the list of versions, newest first, with the\n * latest marked and the one on display checked.\n */\nexport function ViewerVersions({ versions, current, onSelect, testId = 'viewer-versions', label, latest }: {\n  readonly versions: readonly ViewerVersion[];\n  readonly current: string;\n  readonly onSelect: (id: string) => void;\n  readonly testId?: string;\n  readonly label?: string;\n  /** The hint on the newest version. */\n  readonly latest?: string;\n}) {\n  const { labels } = useViewerText();\n  return <ViewerMenu label={label ?? labels.versionHistory} testId={testId} align=\"end\" icon={<HistoryIcon className=\"size-4\" aria-hidden=\"true\" />}\n    items={versions.map(version => ({ id: version.id, label: version.label, ...(version.latest ? { hint: latest ?? labels.latest } : {}), checked: version.id === current, testId: `${testId}-item`, onSelect: () => onSelect(version.id) }))} />;\n}\n",
+      "content": "'use client';\n\nimport { useState } from 'react';\nimport { HistoryIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { ActionMenuContent, useMenuPortal } from '../button/actions';\nimport type { MenuItem } from '../button/actions';\nimport { versionHistoryItems } from '../version-history/version-history';\nimport type { VersionHistoryEntry } from '../version-history/version-history';\nimport { useViewerText } from './viewer-window';\n\nexport type ViewerMenuItem = MenuItem;\nexport interface ViewerActionsProps {\n  readonly label: string;\n  readonly icon: ReactNode;\n  readonly items: readonly MenuItem[];\n  readonly testId?: string;\n  readonly align?: 'start' | 'end';\n  readonly className?: string;\n  readonly children?: ReactNode;\n  readonly onOpenChange?: (open: boolean) => void;\n}\nexport type ViewerVersion = VersionHistoryEntry;\n\n/** The consumer's shadcn Base UI dropdown supplies positioning, dismissal and keyboard navigation. */\nexport function ViewerActions({ label, icon, items, testId = 'viewer-menu', align = 'end', className, children, onOpenChange }: ViewerActionsProps) {\n  const portal = useMenuPortal();\n  return <DropdownMenu onOpenChange={open => onOpenChange?.(open)}>\n    <DropdownMenuTrigger render={<Button ref={portal.ref} variant=\"ghost\" size=\"icon-sm\" aria-label={label} title={label} data-testid={testId} className={className}>{icon}</Button>} />\n    <ActionMenuContent label={label} testId={testId} items={items} align={align} container={portal.container}>{children}</ActionMenuContent>\n  </DropdownMenu>;\n}\n\n/** Saved versions are view-only choices. Current is the displayed revision, not necessarily the latest one. */\nexport function ViewerVersions({ versions, current, onSelect, testId = 'viewer-versions', label }: {\n  readonly versions: readonly ViewerVersion[];\n  readonly current: string;\n  readonly onSelect: (id: string) => void;\n  readonly testId?: string;\n  readonly label?: string;\n}) {\n  const { labels } = useViewerText();\n  const [now, setNow] = useState(Date.now);\n  return <ViewerActions label={label ?? labels.versionHistory} testId={testId} align=\"end\" icon={<HistoryIcon data-icon=\"inline-start\" aria-hidden=\"true\" />} onOpenChange={open => { if (open) setNow(Date.now()); }}\n    items={versionHistoryItems({ versions, current, onSelect, labels, now, testId })} />;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/menu.tsx"
     },
     {
       "path": "registry/viewers/pdf-pane.tsx",
-      "content": "'use client';\n\nimport { useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { DownloadIcon, FileTextIcon } from 'lucide-react';\nimport { Button } from '../button/button';\nimport { downloadFile } from './download';\nimport { formatBytes, useMediaUrl } from './media';\nimport type { MediaSource } from './media';\nimport { ViewerFrame } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { useViewerText } from './viewer-window';\n\nexport interface PdfPaneProps extends MediaSource {\n  readonly name: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: ViewerStatus;\n  readonly target?: unknown;\n  readonly revision?: string;\n  readonly controls?: ReactNode;\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** Force the fallback (for a host that knows its browser cannot render PDFs). Defaults to the browser's own report. */\n  readonly inline?: boolean;\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n}\n\n/** The browser reports whether it has a built-in PDF viewer. Unknown (older browsers) is treated as yes: the frame is tried. */\nexport function browserShowsPdf(): boolean {\n  const nav = globalThis.navigator as (Navigator & { pdfViewerEnabled?: boolean }) | undefined;\n  return nav?.pdfViewerEnabled !== false;\n}\n\n/**\n * A read-only PDF viewer in the standard frame, as in boring-ui v2: the browser's own PDF viewer in a frame over an object URL\n * (so its page navigation, zoom, search and print come with it). Where the browser cannot render PDFs inline, a clear message with\n * Download and Open in new tab replaces the frame.\n */\nexport function PdfPane({ name, bytes, blob, url: hostUrl, subtitle, status, target, revision, controls, onRefresh, onShare, onOpenInNewTab, onClose, inline, testId = 'viewer', titleTestId, className }: PdfPaneProps) {\n  const source = useMemo<MediaSource>(() => ({ ...(bytes ? { bytes } : {}), ...(blob ? { blob } : {}), ...(hostUrl ? { url: hostUrl } : {}) }), [bytes, blob, hostUrl]);\n  const { url, size, blob: made } = useMediaUrl(source, 'application/pdf');\n  const canShow = inline ?? browserShowsPdf();\n  const { labels } = useViewerText();\n  const downloadName = name.split('/').pop() || 'document.pdf';\n  const download = () => { if (made) downloadFile(downloadName, made, 'application/pdf'); else if (url) { const link = Object.assign(document.createElement('a'), { href: url, download: downloadName }); document.body.append(link); link.click(); link.remove(); } };\n  const open = onOpenInNewTab ?? (url ? () => { window.open(url, '_blank', 'noopener,noreferrer'); } : undefined);\n  return <ViewerFrame title={downloadName} subtitle={<>{subtitle}{subtitle && size !== undefined && <span aria-hidden=\"true\">·</span>}{['PDF', size !== undefined && formatBytes(size)].filter(Boolean).join(' · ')}</>} status={status} target={target} revision={revision} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh} onShare={onShare} onDownload={url ? download : undefined} onOpenInNewTab={open} onClose={onClose} controls={controls}>\n    <div data-testid={`${testId}-stage`} data-pdf={url ? (canShow ? 'inline' : 'fallback') : 'loading'} className=\"boring-viewer-stage relative flex min-h-0 flex-1\">\n      {!url ? <p role=\"status\" className=\"m-auto p-6 text-sm text-muted-foreground\">{labels.loading}</p>\n        : canShow ? <iframe src={url} title={`${downloadName} (PDF)`} data-testid={`${testId}-frame-pdf`} className=\"size-full min-h-0 flex-1 border-0 bg-background\" />\n          : <div role=\"alert\" data-testid={`${testId}-pdf-fallback`} className=\"m-auto flex max-w-sm flex-col items-center gap-3 p-6 text-center\">\n            <span className=\"grid size-12 place-items-center rounded-full bg-muted text-muted-foreground\"><FileTextIcon className=\"size-6\" aria-hidden=\"true\" /></span>\n            <p className=\"m-0 text-sm font-medium\">{labels.pdfUnsupported}</p>\n            <p className=\"m-0 text-xs text-muted-foreground\">{labels.pdfHint(downloadName, Boolean(open))}</p>\n            <div className=\"flex flex-wrap justify-center gap-2\">\n              <Button variant=\"default\" size=\"bar\" data-testid={`${testId}-pdf-download`} onClick={download}><DownloadIcon className=\"size-3.5\" aria-hidden=\"true\" />{labels.download}</Button>\n              {open && <Button variant=\"outline\" size=\"bar\" onClick={() => open()}>{labels.openInNewTab}</Button>}\n            </div>\n          </div>}\n    </div>\n  </ViewerFrame>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { DownloadIcon, FileTextIcon } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { downloadFile } from './download';\nimport { ZoomControls } from './image-pane';\nimport { formatBytes, useMediaUrl } from './media';\nimport { PdfPages } from './pdf-pages';\nimport type { MediaSource } from './media';\nimport { ViewerFrame } from './viewer-frame';\nimport type { ViewerShare, ViewerStatus } from './viewer-frame';\nimport { useViewerText } from './viewer-window';\n\nexport interface PdfPaneProps extends MediaSource {\n  readonly name: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: ViewerStatus;\n  readonly target?: unknown;\n  readonly revision?: string;\n  /** Leading header content, before the title. */\n  readonly headerStart?: ReactNode;\n  readonly controls?: ReactNode;\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** `false` draws the pages with pdf.js (for a host that knows its browser cannot render PDFs), `true` uses the browser's own viewer. Defaults to the browser's own report. */\n  readonly inline?: boolean;\n  /** How the browser's viewer opens the page: `width` (default) fits the page to the pane's width, `page` fits the whole page, `none` leaves the browser's own zoom. */\n  readonly fit?: 'width' | 'page' | 'none';\n  readonly testId?: string;\n  /** Overrides the title's `data-testid` (default `<testId>-title`). */\n  readonly titleTestId?: string;\n  readonly className?: string;\n}\n\n/** The browser reports whether it has a built-in PDF viewer. Unknown (older browsers) is treated as yes: the frame is tried. */\nexport function browserShowsPdf(): boolean {\n  const nav = globalThis.navigator as (Navigator & { pdfViewerEnabled?: boolean }) | undefined;\n  return nav?.pdfViewerEnabled !== false;\n}\n\nconst STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];\n\n/**\n * A read-only PDF viewer in the standard frame, as in boring-ui v2: the browser's own PDF viewer in a frame over an object URL\n * (so its page navigation, zoom, search and print come with it). Where the browser cannot render PDFs inline (phones), pdf.js, loaded\n * only then, draws the pages with zoom and a page indicator; if that fails too (a damaged or password-protected file, no worker), a clear\n * message with Download and Open in new tab replaces it.\n */\nexport function PdfPane({ name, bytes, blob, url: hostUrl, subtitle, status, target, revision, headerStart, controls, onRefresh, onShare, onOpenInNewTab, onClose, inline, fit = 'width', testId = 'viewer', titleTestId, className }: PdfPaneProps) {\n  const source = useMemo<MediaSource>(() => ({ ...(bytes ? { bytes } : {}), ...(blob ? { blob } : {}), ...(hostUrl ? { url: hostUrl } : {}) }), [bytes, blob, hostUrl]);\n  const { url, size, blob: made } = useMediaUrl(source, 'application/pdf');\n  const canShow = inline ?? browserShowsPdf();\n  const { labels } = useViewerText();\n  const downloadName = name.split('/').pop() || 'document.pdf';\n  const download = () => { if (made) downloadFile(downloadName, made, 'application/pdf'); else if (url) { const link = Object.assign(document.createElement('a'), { href: url, download: downloadName }); document.body.append(link); link.click(); link.remove(); } };\n  const open = onOpenInNewTab ?? (url ? () => { window.open(url, '_blank', 'noopener,noreferrer'); } : undefined);\n  const [zoom, setZoom] = useState(1);\n  const [pages, setPages] = useState<{ readonly count: number; readonly current: number }>();\n  const [failed, setFailed] = useState(false);\n  useEffect(() => { setPages(undefined); setFailed(false); }, [url]);\n  const step = (direction: 1 | -1) => setZoom(now => (direction > 0 ? STEPS.find(value => value > now) : [...STEPS].reverse().find(value => value < now)) ?? now);\n  const drawn = Boolean(url) && !canShow && !failed;\n  return <ViewerFrame title={downloadName} subtitle={<>{subtitle}{subtitle && size !== undefined && <span aria-hidden=\"true\">·</span>}{['PDF', size !== undefined && formatBytes(size)].filter(Boolean).join(' · ')}</>} status={status} target={target} revision={revision} headerStart={headerStart} testId={testId} {...(titleTestId ? { titleTestId } : {})} className={className}\n    onRefresh={onRefresh} onShare={onShare} onDownload={url ? download : undefined} onOpenInNewTab={open} onClose={onClose}\n    controls={drawn && pages ? <><ZoomControls testId={testId} percent={`${Math.round(zoom * 100)}%`} ready onStep={step} onFit={() => setZoom(1)} />{controls}</> : controls}>\n    <div data-testid={`${testId}-stage`} data-pdf={url ? (canShow ? 'inline' : drawn ? 'pages' : 'fallback') : 'loading'} className=\"boring-viewer-stage relative flex min-h-0 flex-1\">\n      {!url ? <p role=\"status\" className=\"m-auto p-6 text-sm text-muted-foreground\">{labels.loading}</p>\n        : canShow ? <iframe src={fit === 'none' ? url : `${url}#view=${fit === 'page' ? 'Fit' : 'FitH'}`} title={`${downloadName} (PDF)`} data-testid={`${testId}-frame-pdf`} className=\"size-full min-h-0 flex-1 bg-background\" />\n          : drawn ? <><PdfPages key={url} url={url} name={labels.pdfDocument(downloadName)} zoom={zoom} testId={testId} onLoad={count => setPages({ count, current: 1 })}\n            onPage={current => setPages(now => now && now.current !== current ? { ...now, current } : now)} onError={() => setFailed(true)}\n            onKey={key => { if (key === '+' || key === '=') step(1); else if (key === '-') step(-1); else if (key === '0') setZoom(1); }} />\n            {pages && <Badge variant=\"secondary\" data-testid={`${testId}-pdf-page-indicator`} aria-live=\"polite\" className=\"pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2\">{labels.pdfPage(pages.current, pages.count)}</Badge>}</>\n          : <div role=\"alert\" data-testid={`${testId}-pdf-fallback`} className=\"m-auto flex max-w-sm flex-col items-center gap-3 p-6 text-center\">\n            <span className=\"grid size-12 place-items-center  bg-muted text-muted-foreground\"><FileTextIcon className=\"size-6\" aria-hidden=\"true\" /></span>\n            <p className=\"m-0 text-sm font-medium\">{labels.pdfUnsupported}</p>\n            <p className=\"m-0 text-xs text-muted-foreground\">{labels.pdfHint(downloadName, Boolean(open))}</p>\n            <div className=\"flex flex-wrap justify-center gap-2\">\n              <Button variant=\"default\" size=\"sm\" data-testid={`${testId}-pdf-download`} onClick={download}><DownloadIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.download}</Button>\n              {open && <Button variant=\"outline\" size=\"sm\" onClick={() => open()}>{labels.openInNewTab}</Button>}\n            </div>\n          </div>}\n    </div>\n  </ViewerFrame>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/pdf-pane.tsx"
     },
+    {
+      "path": "registry/viewers/pdf-pages.tsx",
+      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport type { PDFDocumentProxy, PDFWorker, RenderTask } from 'pdfjs-dist';\nimport { useViewerText } from './viewer-window';\n\n/** Device pixels per CSS pixel are capped (3) and so is one page's canvas (about 8 megapixels) so a zoomed page stays within a phone's memory. */\nconst MAX_RATIO = 3;\nconst MAX_PIXELS = 8 * 1024 * 1024;\n\n/**\n * pdf.js's own worker, from the package's worker entry. `new Worker(new URL(<package path>, import.meta.url))` is the form Vite and\n * webpack (Next) bundle as a worker; a host bundler that leaves the URL as is (esbuild) serves that path itself. Resolves once the\n * worker reports ready and rejects when it cannot load, so a missing worker shows the Download fallback instead of a spinner forever.\n */\nfunction startWorker(signal: AbortSignal): Promise<Worker> {\n  return new Promise((resolve, reject) => {\n    const worker = new Worker(new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url), { type: 'module' });\n    const fail = () => { worker.terminate(); reject(new Error('The PDF worker could not start.')); };\n    worker.addEventListener('message', () => { signal.removeEventListener('abort', fail); resolve(worker); }, { once: true });\n    worker.addEventListener('error', fail, { once: true });\n    signal.addEventListener('abort', fail, { once: true });\n  });\n}\n\n/** Opens the document with pdf.js (loaded on demand) in its own worker. `close` destroys the document and stops the worker. */\nasync function openPdf(url: string, signal: AbortSignal): Promise<{ readonly document: PDFDocumentProxy; readonly close: () => void }> {\n  const started = startWorker(signal);\n  let worker: PDFWorker | undefined, task: { destroy(): Promise<void> } | undefined;\n  const close = () => { void task?.destroy(); worker?.destroy(); void started.then(port => port.terminate(), () => {}); };\n  try {\n    const [pdfjs, port] = await Promise.all([import('pdfjs-dist'), started]);\n    if (signal.aborted) throw signal.reason;\n    worker = pdfjs.PDFWorker.create({ port });\n    const loading = pdfjs.getDocument({ url, worker, verbosity: 0 });\n    task = loading;\n    const document = await loading.promise;\n    if (signal.aborted) throw signal.reason;\n    return { document, close };\n  } catch (error) { close(); throw error; }\n}\n\nexport interface PdfPagesProps {\n  readonly url: string;\n  readonly name: string;\n  /** 1 fits the page to the pane's width. */\n  readonly zoom: number;\n  readonly testId: string;\n  readonly onLoad: (pages: number) => void;\n  readonly onPage: (page: number) => void;\n  readonly onError: (error: unknown) => void;\n  readonly onKey?: (key: string) => void;\n}\n\n/**\n * The pages of a PDF drawn by pdf.js, for a browser without a PDF viewer of its own (phones): stacked, fit to the pane's width times\n * `zoom`, rendered only near the viewport, crisp at the device's pixel ratio. Unmounting cancels rendering and destroys the document.\n */\nexport function PdfPages({ url, name, zoom, testId, onLoad, onPage, onError, onKey }: PdfPagesProps) {\n  const { labels } = useViewerText();\n  const scroller = useRef<HTMLDivElement>(null);\n  const [document, setDocument] = useState<PDFDocumentProxy>();\n  const [ratio, setRatio] = useState(Math.SQRT2);\n  const [width, setWidth] = useState(0);\n  const latest = useRef({ onLoad, onError });\n  latest.current = { onLoad, onError };\n  useEffect(() => {\n    const abort = new AbortController();\n    let close: (() => void) | undefined;\n    openPdf(url, abort.signal).then(async opened => {\n      close = opened.close;\n      if (abort.signal.aborted) { close(); return; }\n      const first = (await opened.document.getPage(1)).getViewport({ scale: 1 });\n      if (abort.signal.aborted) return;\n      setRatio(first.height / first.width);\n      setDocument(opened.document);\n      latest.current.onLoad(opened.document.numPages);\n    }).catch(error => { if (!abort.signal.aborted) latest.current.onError(error); });\n    return () => { abort.abort(); close?.(); };\n  }, [url]);\n  useEffect(() => {\n    const box = scroller.current;\n    if (!box) return;\n    const measure = () => setWidth(Math.max(0, box.clientWidth - 16));\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, []);\n  const scrolled = () => {\n    const box = scroller.current;\n    if (!box) return;\n    const line = box.scrollTop + box.clientHeight / 3;\n    let page = 1;\n    for (const element of box.querySelectorAll<HTMLElement>('[data-page]')) if (element.offsetTop <= line) page = Number(element.dataset.page);\n    onPage(page);\n  };\n  const pageWidth = Math.floor(width * zoom);\n  return <div ref={scroller} data-testid={`${testId}-pdf-pages`} aria-label={name} role=\"document\" tabIndex={0} onScroll={scrolled}\n    onKeyDown={event => onKey?.(event.key)} className=\"relative min-h-0 min-w-0 flex-1 overflow-auto p-2\">\n    {!document ? <p role=\"status\" className=\"m-0 p-6 text-center text-sm text-muted-foreground\">{labels.loading}</p>\n      : <div className=\"flex w-max min-w-full flex-col items-center gap-2\">\n        {Array.from({ length: document.numPages }, (_, index) => <PdfPage key={index} document={document} number={index + 1} width={pageWidth} ratio={ratio} root={scroller.current} testId={testId} />)}\n      </div>}\n  </div>;\n}\n\nfunction PdfPage({ document, number, width, ratio, root, testId }: { readonly document: PDFDocumentProxy; readonly number: number; readonly width: number; readonly ratio: number; readonly root: Element | null; readonly testId: string }) {\n  const box = useRef<HTMLDivElement>(null);\n  const canvas = useRef<HTMLCanvasElement>(null);\n  const [near, setNear] = useState(false);\n  const [own, setOwn] = useState<number>();\n  const [rendered, setRendered] = useState(false);\n  useEffect(() => {\n    const element = box.current;\n    if (!element || typeof IntersectionObserver === 'undefined') { setNear(true); return; }\n    const observer = new IntersectionObserver(entries => { if (entries.some(entry => entry.isIntersecting)) setNear(true); }, { root, rootMargin: '100% 0px' });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [root]);\n  useEffect(() => {\n    const element = canvas.current;\n    if (!near || !width || !element) return;\n    let cancelled = false, task: RenderTask | undefined;\n    void document.getPage(number).then(page => {\n      if (cancelled) return;\n      const base = page.getViewport({ scale: 1 });\n      setOwn(base.height / base.width);\n      const viewport = page.getViewport({ scale: width / base.width });\n      const scale = Math.min(globalThis.devicePixelRatio || 1, MAX_RATIO, Math.sqrt(MAX_PIXELS / (viewport.width * viewport.height)));\n      element.width = Math.floor(viewport.width * scale);\n      element.height = Math.floor(viewport.height * scale);\n      task = page.render({ canvas: element, viewport, ...(scale === 1 ? {} : { transform: [scale, 0, 0, scale, 0, 0] }) });\n      return task.promise.then(() => { if (!cancelled) setRendered(true); });\n    }).catch(() => {});\n    return () => { cancelled = true; task?.cancel(); };\n  }, [document, number, width, near]);\n  return <div ref={box} data-page={number} data-testid={`${testId}-pdf-page`} data-rendered={rendered || undefined} className=\"relative shrink-0 bg-background outline outline-1 outline-border\"\n    style={{ width, height: Math.round(width * (own ?? ratio)) }}>\n    <canvas ref={canvas} data-testid={`${testId}-pdf-canvas`} className=\"absolute inset-0 size-full\" />\n  </div>;\n}\n",
+      "type": "registry:component",
+      "target": "components/viewers/pdf-pages.tsx"
+    },
     {
       "path": "registry/viewers/share.ts",
       "content": "import { copyText } from '../utils/utils';\n\n/** What the frame hands the host when the person presses Share. `target` and `revision` are the host's own identifiers for what is shown. */\nexport interface ViewerShareRequest {\n  readonly title: string;\n  readonly target: unknown;\n  readonly revision: string | undefined;\n}\n\n/** `shared`: the system share sheet took it. `copied`: a link is on the clipboard (the frame says so). Nothing: the host confirmed it its own way. */\nexport type ViewerShareResult = 'shared' | 'copied' | undefined | void;\nexport type ViewerShare = (request: ViewerShareRequest) => ViewerShareResult | Promise<ViewerShareResult>;\n\n/**\n * The ready-made Share action. `link` turns the request into the URL a person can open to see the same thing. Uses the Web Share\n * API where the browser offers it (phones), otherwise copies the link (see `copyText`) and lets the frame show \"Link copied\". A cancelled share\n * sheet is not an error.\n */\nexport function createLinkShare(link: (request: ViewerShareRequest) => string): ViewerShare {\n  return async request => {\n    const url = link(request);\n    const nav = globalThis.navigator;\n    if (typeof nav?.share === 'function' && (typeof nav.canShare !== 'function' || nav.canShare({ title: request.title, url }))) {\n      try { await nav.share({ title: request.title, url }); return 'shared'; }\n      catch (error) { if ((error as { name?: string })?.name === 'AbortError') return undefined; /* fall back to the clipboard */ }\n    }\n    // Clipboard API, then execCommand; when neither works copyText throws ManualCopyError and the frame shows the link selected.\n    await copyText(url);\n    return 'copied';\n  };\n}\n",
@@ -85,47 +100,38 @@
     },
     {
       "path": "registry/viewers/viewer-frame.tsx",
-      "content": "'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { CheckIcon, CopyIcon, DownloadIcon, ExternalLinkIcon, RefreshCwIcon } from 'lucide-react';\nimport { Button, IconButton } from '../button/button';\nimport { ActionButton, actionMenuItem, headerActions, menuActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { ViewerMenu } from './menu';\nimport type { ViewerMenuItem } from './menu';\nimport { useViewerText, useViewerWindow } from './viewer-window';\nimport type { ViewerIcons, ViewerLabels } from './viewer-window';\nimport { cn } from '../utils/utils';\nimport type { ManualCopyError } from '../utils/utils';\nimport type { ViewerShare } from './share';\n\nexport type { ViewerShare, ViewerShareRequest, ViewerShareResult } from './share';\nexport { ViewerWindowProvider, defaultViewerIcons, defaultViewerLabels, useViewerText } from './viewer-window';\nexport type { ViewerIcons, ViewerLabels, ViewerWindow } from './viewer-window';\n\nexport type ViewerTone = 'neutral' | 'success' | 'warning' | 'danger';\n/** `kind` says what the status is whatever its (translated) label: the bar hides a plain `saved` and shows `read-only` as a fact. */\nexport interface ViewerStatus { readonly label: string; readonly tone?: ViewerTone; readonly kind?: 'saved' | 'read-only' | undefined }\n\nexport interface ViewerFrameProps {\n  /** What is shown, for example the file name. */\n  readonly title: string;\n  /** Type, version, path, size: short facts under the title. */\n  readonly subtitle?: ReactNode;\n  /** Saved, Unsaved, Saving, Changed elsewhere, Read-only. */\n  readonly status?: ViewerStatus | undefined;\n  /** Opaque identifiers handed to `onShare` so the host can build a link to this exact thing. */\n  readonly target?: unknown;\n  readonly revision?: string | undefined;\n  /** Viewer-specific controls that stay visible: a mode toggle, Save while there are edits, zoom steps, a version switcher when there are several. */\n  readonly controls?: ReactNode;\n  /** Viewer-specific secondary actions, listed in the \"…\" menu after the standard ones. */\n  readonly menu?: readonly ViewerMenuItem[];\n  /**\n   * The host's actions for this bar, after the window's (`ViewerWindow.actions`): `header` ones as buttons beside Share, `menu` ones at the\n   * end of the \"…\" menu. Test ids `<testId>-<id>`.\n   */\n  readonly actions?: readonly BlockAction[] | undefined;\n  /** This bar's words and icons, over the window's and the defaults (`defaultViewerLabels`, `defaultViewerIcons`). */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n  readonly icons?: Partial<ViewerIcons> | undefined;\n  /** Each standard action appears only when its handler is supplied. Share is always visible; Reload, Copy, Download and Open in new tab live in the \"…\" menu. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onCopy?: () => unknown;\n  readonly onDownload?: () => unknown;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** Prefix of the `data-testid` of the bar and its actions (`viewer-share`, `viewer-more`, and `viewer-refresh` for the menu's Reload, ...). */\n  readonly testId?: string;\n  readonly titleTestId?: string;\n  readonly className?: string;\n  readonly children?: ReactNode;\n}\n\n\nconst TONES: Record<ViewerTone, string> = {\n  neutral: 'bg-muted text-muted-foreground',\n  success: 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-300',\n  warning: 'bg-amber-500/15 text-amber-800 dark:text-amber-300',\n  danger: 'bg-destructive/12 text-destructive',\n};\nconst DOTS: Record<ViewerTone, string> = {\n  neutral: 'bg-muted-foreground/60',\n  success: 'bg-emerald-500',\n  warning: 'bg-amber-500',\n  danger: 'bg-destructive',\n};\n/** Buttons are 40-44px on a phone or touch screen (see Button), 32px with a mouse: below this width a pane drops its optional bar controls. */\nconst TIGHT_WIDTH = { touch: 440, pointer: 340 };\nconst touchScreen = () => typeof matchMedia === 'function' && matchMedia('(max-width: 639px), (pointer: coarse)').matches;\n\n/** How much room the bar has, for a pane that wants to drop optional controls (the zoom percentage, for example) on a narrow panel. */\nexport interface ViewerBarSpace { readonly tight: boolean }\nconst ViewerBarContext = createContext<ViewerBarSpace>({ tight: false });\nexport const useViewerBar = (): ViewerBarSpace => useContext(ViewerBarContext);\nconst NOTICE_MS = 2600;\n\n/** A bar button: an icon with an accessible name and a tooltip. */\nexport const ViewerIconButton = IconButton;\n\n/** One choice of a mode toggle, for example Rich | Source. Icon only: `label` is the accessible name and the tooltip, `text` the short word for hosts that want it. */\nexport interface ViewerToggleOption<T extends string> { readonly id: T; readonly label: string; readonly text: string; readonly icon?: ReactNode; readonly disabled?: boolean; readonly testId?: string }\n\nexport function ViewerToggle<T extends string>({ label, value, options, onChange }: { readonly label: string; readonly value: T; readonly options: readonly ViewerToggleOption<T>[]; readonly onChange: (id: T) => void }) {\n  const move = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n    if (!step) return;\n    const buttons = [...event.currentTarget.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')];\n    const at = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (at < 0) return;\n    event.preventDefault();\n    buttons[(at + step + buttons.length) % buttons.length]?.focus();\n  };\n  return <div role=\"group\" aria-label={label} onKeyDown={move} className=\"inline-flex shrink-0 rounded-lg border border-border bg-muted/40 p-0.5\">\n    {options.map(option => <button key={option.id} type=\"button\" aria-label={option.label} title={option.label} aria-pressed={value === option.id} disabled={option.disabled}\n      data-testid={option.testId} data-mode={option.id} onClick={() => onChange(option.id)}\n      className={cn('inline-flex size-7 cursor-pointer items-center justify-center rounded-md outline-none max-sm:size-10 pointer-coarse:size-10 focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-45',\n        value === option.id ? 'bg-background text-foreground shadow-xs' : 'text-muted-foreground hover:text-foreground')}>\n      {option.icon ?? option.text}</button>)}\n  </div>;\n}\n\n/** The copy helper throws this when the browser allowed no automatic copy at all; the person copies by hand instead. */\nconst needsManualCopy = (error: unknown): error is ManualCopyError => (error as { name?: string } | null)?.name === 'ManualCopyError' && typeof (error as { text?: unknown }).text === 'string';\n\n/** Last resort for Copy and Share: the text, already selected, so Ctrl/Cmd+C or the long-press menu finishes the job. */\nfunction ManualCopy({ testId, link, text, onClose, labels }: { readonly testId: string; readonly link: boolean; readonly text: string; readonly onClose: () => void; readonly labels: ViewerLabels }) {\n  const field = useRef<HTMLTextAreaElement>(null);\n  const labelId = useId();\n  useEffect(() => { const element = field.current; if (element) { element.focus(); element.select(); } }, [text]);\n  return <div role=\"dialog\" aria-labelledby={labelId} data-testid={`${testId}-manual-copy`}\n    onKeyDown={event => { if (event.key === 'Escape') { event.stopPropagation(); onClose(); } }}\n    className=\"absolute top-full right-3 left-3 z-50 mt-1 grid gap-2 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg sm:left-auto sm:w-96\">\n    <p id={labelId} className=\"m-0 text-xs font-medium\">{labels.manualCopy(link)}</p>\n    <textarea ref={field} readOnly rows={Math.min(6, Math.max(2, Math.ceil(text.length / 48)))} value={text} data-testid={`${testId}-manual-copy-text`} onFocus={event => event.currentTarget.select()}\n      className=\"w-full resize-none rounded-md border border-border bg-background p-2 font-mono text-xs break-all outline-none focus-visible:ring-2 focus-visible:ring-ring/60\" />\n    <div className=\"flex justify-end\"><Button variant=\"quiet\" size=\"bar\" data-testid={`${testId}-manual-copy-close`} onClick={onClose}>{labels.done}</Button></div>\n  </div>;\n}\n\n/** The status as a small dot with the words in a tooltip and for screen readers. The frame shows it only when the state is not plain \"Saved\". */\nfunction StatusMark({ status, testId }: { readonly status: ViewerStatus; readonly testId: string }) {\n  const tone = status.tone ?? 'neutral';\n  return <span role=\"status\" data-testid={`${testId}-status`} data-tone={tone} title={status.label} className=\"inline-flex size-6 shrink-0 cursor-default items-center justify-center rounded-full\">\n    <span aria-hidden=\"true\" className={cn('size-2 rounded-full', DOTS[tone], tone === 'warning' && status.label !== 'Unsaved' && 'animate-pulse motion-reduce:animate-none')} />\n    <span className=\"sr-only\">{status.label}</span>\n  </span>;\n}\n\n/** The one top bar of every viewer, always a single row: title and facts, viewer controls, a status dot when something needs attention, Share, full screen, Close and the \"…\" menu. */\nexport function ViewerFrame({ title, subtitle, status, target, revision, controls, menu, actions, labels: ownLabels, icons: ownIcons, onRefresh, onShare, onCopy, onDownload, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, className, children }: ViewerFrameProps) {\n  const bar = useRef<HTMLElement>(null);\n  const [space, setSpace] = useState<ViewerBarSpace>({ tight: false });\n  const [busy, setBusy] = useState<'refresh' | 'share' | undefined>();\n  const [notice, setNotice] = useState<{ readonly text: string; readonly tone: ViewerTone } | undefined>();\n  const [copied, setCopied] = useState(false);\n  const [manual, setManual] = useState<{ readonly text: string; readonly link: boolean } | undefined>();\n  const host = useViewerWindow();\n  const { labels, icons } = useViewerText(ownLabels, ownIcons);\n  const mounted = useRef(true);\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);\n  useLayoutEffect(() => {\n    const element = bar.current;\n    if (!element || typeof ResizeObserver === 'undefined') return;\n    const measure = () => {\n      const width = element.getBoundingClientRect().width;\n      const next = { tight: width > 0 && width < (touchScreen() ? TIGHT_WIDTH.touch : TIGHT_WIDTH.pointer) };\n      setSpace(now => now.tight === next.tight ? now : next);\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n  useEffect(() => {\n    if (!notice) return;\n    const timer = setTimeout(() => setNotice(undefined), NOTICE_MS);\n    return () => clearTimeout(timer);\n  }, [notice]);\n\n  const guarded = useCallback(async (kind: 'refresh' | 'share', run: () => unknown, failed: string) => {\n    setBusy(kind);\n    setNotice(undefined);\n    try { return await run(); }\n    catch (error) { if (mounted.current) { if (needsManualCopy(error)) setManual({ text: error.text, link: kind === 'share' }); else setNotice({ text: failed, tone: 'danger' }); } return undefined; }\n    finally { if (mounted.current) setBusy(undefined); }\n  }, []);\n  const refresh = () => { if (onRefresh) void guarded('refresh', onRefresh, labels.refreshFailed); };\n  const share = () => {\n    if (!onShare) return;\n    void guarded('share', () => onShare({ title, target, revision }), labels.shareFailed).then(result => {\n      if (!mounted.current) return;\n      if (result === 'copied') setNotice({ text: labels.linkCopied, tone: 'success' });\n      else if (result === 'shared') setNotice({ text: labels.shared, tone: 'success' });\n    });\n  };\n  const copy = () => {\n    void Promise.resolve().then(onCopy).then(() => { if (mounted.current) { setCopied(true); setNotice({ text: labels.copied, tone: 'success' }); setTimeout(() => { if (mounted.current) setCopied(false); }, 1500); } })\n      .catch(error => { if (!mounted.current) return; if (needsManualCopy(error)) setManual({ text: error.text, link: false }); else setNotice({ text: labels.copyFailed, tone: 'danger' }); });\n  };\n  const run = (action: (() => unknown) | undefined) => { void Promise.resolve().then(action).catch(() => { if (mounted.current) setNotice({ text: labels.actionFailed, tone: 'danger' }); }); };\n  // The host's actions: the window's (every viewer in the panel), then this frame's. Each runs through `run`, so a failure shows as a notice.\n  const hostActions = [...host?.actions ?? [], ...actions ?? []].map(action => ({ ...action, onSelect: () => run(action.onSelect) }));\n\n  const reading = status?.kind === 'read-only' || status?.label === labels.readOnly;\n  const menuItems: ViewerMenuItem[] = ([\n    ...(onRefresh ? [{ id: 'refresh', label: labels.reload, icon: <RefreshCwIcon className=\"size-4\" />, disabled: busy === 'refresh', onSelect: refresh }] : []),\n    ...(onCopy ? [{ id: 'copy', label: labels.copy, icon: copied ? <CheckIcon className=\"size-4\" /> : <CopyIcon className=\"size-4\" />, onSelect: copy }] : []),\n    ...(onDownload ? [{ id: 'download', label: labels.download, icon: <DownloadIcon className=\"size-4\" />, onSelect: () => run(onDownload) }] : []),\n    ...(onOpenInNewTab ? [{ id: 'open', label: labels.openInNewTab, icon: <ExternalLinkIcon className=\"size-4\" />, onSelect: () => run(onOpenInNewTab) }] : []),\n    ...(menu ?? []),\n    ...menuActions(hostActions).map(action => actionMenuItem(action, testId)),\n  ] as ViewerMenuItem[]).map(entry => ({ ...entry, testId: entry.testId ?? `${testId}-${entry.id}` }));\n\n  return <ViewerBarContext.Provider value={space}>\n    <section data-boring=\"viewer-frame\" data-testid={`${testId}-frame`} data-tight={space.tight || undefined}\n      className={cn('boring-viewer flex h-full min-h-0 min-w-0 flex-col bg-background text-foreground', className)}>\n      <header ref={bar} data-testid={`${testId}-bar`} className=\"relative flex shrink-0 flex-nowrap items-center gap-x-1.5 border-b border-border px-3 py-1.5\">\n        <div className=\"min-w-0 flex-1 basis-0\">\n          <h2 data-testid={titleTestId ?? `${testId}-title`} title={title} className=\"m-0 truncate text-sm leading-5 font-semibold tracking-tight\">{title}</h2>\n          {(subtitle || reading) && <p data-testid={`${testId}-subtitle`} className=\"m-0 flex min-w-0 items-center gap-x-1.5 overflow-hidden text-xs leading-4 whitespace-nowrap text-muted-foreground\">{subtitle}{subtitle && reading && <span aria-hidden=\"true\">·</span>}{reading && <span data-testid={`${testId}-readonly`}>{labels.readOnly}</span>}</p>}\n        </div>\n        {controls && <div data-testid={`${testId}-controls`} className=\"flex shrink-0 items-center gap-1\">{controls}</div>}\n        {status && !reading && status.kind !== 'saved' && status.label !== labels.saved && <StatusMark status={status} testId={testId} />}\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {headerActions(hostActions).map(action => <ActionButton key={action.id} action={action} testId={testId} size=\"icon-bar\" />)}\n          {onShare && <ViewerIconButton label={labels.share} data-testid={`${testId}-share`} disabled={busy === 'share'} onClick={share}><icons.share className=\"size-4\" aria-hidden=\"true\" /></ViewerIconButton>}\n          {menuItems.length > 0 && <ViewerMenu label={labels.moreActions} testId={`${testId}-more`} icon={<icons.more className=\"size-4\" aria-hidden=\"true\" />} items={menuItems} />}\n          {host?.onFullscreenChange && <ViewerIconButton label={host.fullscreen ? labels.exitFullscreen : labels.enterFullscreen} data-testid={`${testId}-fullscreen`} aria-pressed={host.fullscreen === true}\n            onClick={() => host.onFullscreenChange!(!host.fullscreen)}>{host.fullscreen ? <icons.exitFullscreen className=\"size-4\" aria-hidden=\"true\" /> : <icons.enterFullscreen className=\"size-4\" aria-hidden=\"true\" />}</ViewerIconButton>}\n          {onClose && <ViewerIconButton label={labels.close} data-testid={`${testId}-close`} onClick={() => run(onClose)}><icons.close className=\"size-4\" aria-hidden=\"true\" /></ViewerIconButton>}\n        </div>\n        {notice && <span role=\"status\" aria-live=\"polite\" data-testid={`${testId}-notice`} data-tone={notice.tone} className={cn('absolute top-full right-3 z-40 mt-1 rounded-full border border-border px-2.5 py-1 text-xs font-medium shadow-md', TONES[notice.tone])}>{notice.text}</span>}\n        {manual && <ManualCopy testId={testId} link={manual.link} text={manual.text} labels={labels} onClose={() => setManual(undefined)} />}\n      </header>\n      <div data-testid={`${testId}-body`} className=\"flex min-h-0 min-w-0 flex-1 flex-col\">{children}</div>\n    </section>\n  </ViewerBarContext.Provider>;\n}\n",
+      "content": "'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { ArrowLeftIcon, CheckIcon, CopyIcon, DownloadIcon, ExternalLinkIcon, RefreshCwIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';\nimport { Badge } from '@/components/ui/badge';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';\nimport { Textarea } from '@/components/ui/textarea';\nimport { ActionButton, actionMenuItem, headerActions, menuActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { ViewerActions } from './menu';\nimport type { ViewerMenuItem } from './menu';\nimport { useViewerText, useViewerWindow } from './viewer-window';\nimport type { ViewerIcons, ViewerLabels } from './viewer-window';\nimport { cn } from '../utils/utils';\nimport type { ManualCopyError } from '../utils/utils';\nimport type { ViewerShare } from './share';\n\nexport type { ViewerShare, ViewerShareRequest, ViewerShareResult } from './share';\nexport { ViewerWindowProvider, defaultViewerIcons, defaultViewerLabels, useViewerText } from './viewer-window';\nexport type { ViewerIcons, ViewerLabels, ViewerWindow } from './viewer-window';\n\nexport type ViewerTone = 'neutral' | 'success' | 'warning' | 'danger';\n/** `kind` says what the status is whatever its (translated) label: the bar hides a plain `saved` and shows `read-only` as a fact. */\nexport interface ViewerStatus { readonly label: string; readonly tone?: ViewerTone; readonly kind?: 'saved' | 'read-only' | undefined }\n\nexport interface ViewerFrameProps {\n  /** What is shown, for example the file name. */\n  readonly title: string;\n  /** Type, version, path, size: short facts under the title. */\n  readonly subtitle?: ReactNode;\n  /** Saved, Unsaved, Saving, Changed elsewhere, Read-only. */\n  readonly status?: ViewerStatus | undefined;\n  /** Keep a quiet saved acknowledgement visible, for autosaving editors. */\n  readonly showSavedStatus?: boolean | undefined;\n  /** Opaque identifiers handed to `onShare` so the host can build a link to this exact thing. */\n  readonly target?: unknown;\n  readonly revision?: string | undefined;\n  /** Leading header content, for example Back before the file title. */\n  readonly headerStart?: ReactNode;\n  /** Viewer-specific controls that stay visible: a mode toggle, Save while there are edits, zoom steps, a version switcher when there are several. */\n  readonly controls?: ReactNode;\n  /** Viewer-specific secondary actions, listed in the \"…\" menu after the standard ones. */\n  readonly menu?: readonly ViewerMenuItem[];\n  /**\n   * The host's actions for this bar, after the window's (`ViewerWindow.actions`): `header` ones as buttons beside Share, `menu` ones at the\n   * end of the \"…\" menu. Test ids `<testId>-<id>`.\n   */\n  readonly actions?: readonly BlockAction[] | undefined;\n  /** This bar's words and icons, over the window's and the defaults (`defaultViewerLabels`, `defaultViewerIcons`). */\n  readonly labels?: Partial<ViewerLabels> | undefined;\n  readonly icons?: Partial<ViewerIcons> | undefined;\n  /** Each standard action appears only when its handler is supplied. Share is always visible; Reload, Copy, Download and Open in new tab live in the \"…\" menu. */\n  readonly onRefresh?: () => unknown;\n  readonly onShare?: ViewerShare;\n  readonly onCopy?: () => unknown;\n  readonly onDownload?: () => unknown;\n  readonly onOpenInNewTab?: () => unknown;\n  readonly onClose?: () => unknown;\n  /** Prefix of the `data-testid` of the bar and its actions (`viewer-share`, `viewer-more`, and `viewer-refresh` for the menu's Reload, ...). */\n  readonly testId?: string;\n  readonly titleTestId?: string;\n  /** Quiet one-row bar with secondary actions in the menu. False retains the former visible Share/fullscreen/close layout. */\n  readonly compactHeader?: boolean;\n  readonly className?: string;\n  readonly children?: ReactNode;\n}\n\n\n/** Narrow panes drop optional controls. */\nconst TIGHT_WIDTH = { touch: 440, pointer: 340 };\nconst touchScreen = () => typeof matchMedia === 'function' && matchMedia('(max-width: 639px), (pointer: coarse)').matches;\n\n/** How much room the bar has, for a pane that wants to drop optional controls (the zoom percentage, for example) on a narrow panel. */\nexport interface ViewerBarSpace { readonly tight: boolean }\nconst ViewerBarContext = createContext<ViewerBarSpace>({ tight: false });\nexport const useViewerBar = (): ViewerBarSpace => useContext(ViewerBarContext);\nconst NOTICE_MS = 2600;\n\n/** One choice of a mode toggle, for example Rich | Source. Icon only: `label` is the accessible name and the tooltip, `text` the short word for hosts that want it. */\nexport interface ViewerToggleOption<T extends string> { readonly id: T; readonly label: string; readonly text: string; readonly icon?: ReactNode; readonly disabled?: boolean; readonly testId?: string }\n\nexport function ViewerToggle<T extends string>({ label, value, options, onChange }: { readonly label: string; readonly value: T; readonly options: readonly ViewerToggleOption<T>[]; readonly onChange: (id: T) => void }) {\n  return <ToggleGroup aria-label={label} size=\"sm\" value={[value]} onValueChange={values => {\n    const selected = options.find(option => option.id === values[0] && !option.disabled);\n    if (selected && selected.id !== value) onChange(selected.id);\n  }}>\n    {options.map(option => <ToggleGroupItem key={option.id} value={option.id} aria-label={option.label} title={option.label} disabled={option.disabled}\n      data-testid={option.testId} data-mode={option.id}>\n      {option.icon ?? option.text}</ToggleGroupItem>)}\n  </ToggleGroup>;\n}\n\n/** The copy helper throws this when the browser allowed no automatic copy at all; the person copies by hand instead. */\nconst needsManualCopy = (error: unknown): error is ManualCopyError => (error as { name?: string } | null)?.name === 'ManualCopyError' && typeof (error as { text?: unknown }).text === 'string';\n\n/** Last resort for Copy and Share: the text, already selected, so Ctrl/Cmd+C or the long-press menu finishes the job. */\nfunction ManualCopy({ testId, link, text, onClose, labels }: { readonly testId: string; readonly link: boolean; readonly text: string; readonly onClose: () => void; readonly labels: ViewerLabels }) {\n  const field = useRef<HTMLTextAreaElement>(null);\n  return <Dialog open onOpenChange={open => { if (!open) onClose(); }}>\n    <DialogContent showCloseButton={false} className=\"boring-viewer\" data-testid={`${testId}-manual-copy`} initialFocus={field}>\n      <DialogHeader><DialogTitle>{labels.manualCopy(link)}</DialogTitle></DialogHeader>\n      <Textarea ref={field} readOnly rows={Math.min(6, Math.max(2, Math.ceil(text.length / 48)))} value={text} data-testid={`${testId}-manual-copy-text`} onFocus={event => event.currentTarget.select()} />\n      <div className=\"flex justify-end\"><Button variant=\"ghost\" size=\"sm\" data-testid={`${testId}-manual-copy-close`} onClick={onClose}>{labels.done}</Button></div>\n    </DialogContent>\n  </Dialog>;\n}\n\n/** Status uses the consumer's Badge; the frame decides whether a saved acknowledgement is shown. */\nfunction StatusMark({ status, testId }: { readonly status: ViewerStatus; readonly testId: string }) {\n  return <Badge role=\"status\" title={status.label} data-testid={`${testId}-status`} data-tone={status.tone ?? 'neutral'} variant={status.tone === 'danger' ? 'destructive' : 'secondary'}>{status.label}</Badge>;\n}\n\n/** The one top bar of every viewer, always a single row: title and facts, viewer controls, a status dot when something needs attention, Share, full screen, Close and the \"…\" menu. */\nexport function ViewerFrame({ title, subtitle, status, showSavedStatus = false, target, revision, headerStart, controls, menu, actions, labels: ownLabels, icons: ownIcons, onRefresh, onShare, onCopy, onDownload, onOpenInNewTab, onClose, testId = 'viewer', titleTestId, compactHeader = true, className, children }: ViewerFrameProps) {\n  const bar = useRef<HTMLElement>(null);\n  const [space, setSpace] = useState<ViewerBarSpace>({ tight: false });\n  const [busy, setBusy] = useState<'refresh' | 'share' | undefined>();\n  const [notice, setNotice] = useState<{ readonly text: string; readonly tone: ViewerTone } | undefined>();\n  const [copied, setCopied] = useState(false);\n  const [manual, setManual] = useState<{ readonly text: string; readonly link: boolean } | undefined>();\n  const host = useViewerWindow();\n  const { labels, icons } = useViewerText(ownLabels, ownIcons);\n  const mounted = useRef(true);\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);\n  useLayoutEffect(() => {\n    const element = bar.current;\n    if (!element || typeof ResizeObserver === 'undefined') return;\n    const measure = () => {\n      const width = element.getBoundingClientRect().width;\n      const next = { tight: width > 0 && width < (touchScreen() ? TIGHT_WIDTH.touch : TIGHT_WIDTH.pointer) };\n      setSpace(now => now.tight === next.tight ? now : next);\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [host?.renderHeader]);\n  useEffect(() => {\n    if (!notice) return;\n    const timer = setTimeout(() => setNotice(undefined), NOTICE_MS);\n    return () => clearTimeout(timer);\n  }, [notice]);\n\n  const guarded = useCallback(async (kind: 'refresh' | 'share', run: () => unknown, failed: string) => {\n    setBusy(kind);\n    setNotice(undefined);\n    try { return await run(); }\n    catch (error) { if (mounted.current) { if (needsManualCopy(error)) setManual({ text: error.text, link: kind === 'share' }); else setNotice({ text: failed, tone: 'danger' }); } return undefined; }\n    finally { if (mounted.current) setBusy(undefined); }\n  }, []);\n  const refresh = () => { if (onRefresh) void guarded('refresh', onRefresh, labels.refreshFailed); };\n  const share = () => {\n    if (!onShare) return;\n    void guarded('share', () => onShare({ title, target, revision }), labels.shareFailed).then(result => {\n      if (!mounted.current) return;\n      if (result === 'copied') setNotice({ text: labels.linkCopied, tone: 'success' });\n      else if (result === 'shared') setNotice({ text: labels.shared, tone: 'success' });\n    });\n  };\n  const copy = () => {\n    void Promise.resolve().then(onCopy).then(() => { if (mounted.current) { setCopied(true); setNotice({ text: labels.copied, tone: 'success' }); setTimeout(() => { if (mounted.current) setCopied(false); }, 1500); } })\n      .catch(error => { if (!mounted.current) return; if (needsManualCopy(error)) setManual({ text: error.text, link: false }); else setNotice({ text: labels.copyFailed, tone: 'danger' }); });\n  };\n  const run = (action: (() => unknown) | undefined) => { void Promise.resolve().then(action).catch(() => { if (mounted.current) setNotice({ text: labels.actionFailed, tone: 'danger' }); }); };\n  // The host's actions: the window's (every viewer in the panel), then this frame's. Each runs through `run`, so a failure shows as a notice.\n  const hostActions = [...host?.actions ?? [], ...actions ?? []].map(action => ({ ...action, onSelect: () => run(action.onSelect) }));\n\n  const reading = status?.kind === 'read-only' || status?.label === labels.readOnly;\n  const menuItems: ViewerMenuItem[] = ([\n    ...(compactHeader && onShare ? [{ id: 'share', label: labels.share, icon: <icons.share className=\"size-4\" />, onSelect: share }] : []),\n    ...(compactHeader && host?.onFullscreenChange ? [{ id: 'fullscreen', label: host.fullscreen ? labels.exitFullscreen : labels.enterFullscreen, icon: <icons.enterFullscreen className=\"size-4\" />, onSelect: () => host.onFullscreenChange!(!host.fullscreen) }] : []),\n    ...(onRefresh ? [{ id: 'refresh', separatorBefore: true, label: labels.reload, icon: <RefreshCwIcon className=\"size-4\" />, disabled: busy === 'refresh', onSelect: refresh }] : []),\n    ...(onCopy ? [{ id: 'copy', label: labels.copy, icon: copied ? <CheckIcon className=\"size-4\" /> : <CopyIcon className=\"size-4\" />, onSelect: copy }] : []),\n    ...(onDownload ? [{ id: 'download', label: labels.download, icon: <DownloadIcon className=\"size-4\" />, onSelect: () => run(onDownload) }] : []),\n    ...(onOpenInNewTab ? [{ id: 'open', label: labels.openInNewTab, icon: <ExternalLinkIcon className=\"size-4\" />, onSelect: () => run(onOpenInNewTab) }] : []),\n    ...(menu ?? []).map((item, index) => ({ ...item, separatorBefore: index === 0 || item.separatorBefore })),\n    ...menuActions(hostActions).map((action, index) => ({ ...actionMenuItem(action, testId), separatorBefore: index === 0 })),\n  ] as ViewerMenuItem[]).map(entry => ({ ...entry, testId: entry.testId ?? `${testId}-${entry.id}` }));\n\n  const stacked = !compactHeader && host?.headerLayout === 'stacked';\n  const toolbar = controls && <div data-testid={`${testId}-controls`} className={cn('flex shrink-0 items-center gap-1', compactHeader && 'max-[641px]:hidden', stacked && 'flex-wrap px-3 py-2')}>{controls}</div>;\n  const titlebar = <>\n        {compactHeader && !headerStart && onClose && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.close} title={labels.close} data-testid={`${testId}-close`} onClick={() => run(onClose)}><ArrowLeftIcon data-icon=\"inline-start\" className=\"min-[641px]:hidden\" aria-hidden=\"true\" /><icons.close data-icon=\"inline-start\" className=\"hidden min-[641px]:block\" aria-hidden=\"true\" /></Button>}\n        {headerStart}\n        <div className=\"group/title relative min-w-0 flex-1 basis-0 text-left\">\n          <h2 data-testid={titleTestId ?? `${testId}-title`} title={title} className=\"m-0 truncate text-sm leading-5 font-semibold tracking-tight\">{title}</h2>\n          {(subtitle || reading) && <p data-testid={`${testId}-subtitle`} className={cn('m-0 flex min-w-0 items-center gap-x-1.5 text-xs leading-4 whitespace-nowrap text-muted-foreground', compactHeader ? 'hidden group-hover/title:flex max-[641px]:hidden' : 'overflow-hidden')}>{subtitle}{subtitle && reading && <span aria-hidden=\"true\">·</span>}{reading && <span data-testid={`${testId}-readonly`}>{labels.readOnly}</span>}</p>}\n        </div>\n        {!stacked && toolbar}\n        {status && !reading && (showSavedStatus || status.kind !== 'saved' && status.label !== labels.saved) && <StatusMark status={status} testId={testId} />}\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {headerActions(hostActions).map(action => <ActionButton key={action.id} action={action} testId={testId} size=\"icon-sm\" />)}\n          {!compactHeader && onShare && <Button variant=\"ghost\" size=\"icon-sm\" aria-label={labels.share} title={labels.share} data-testid={`${testId}-share`} disabled={busy === 'share'} onClick={share}><icons.share data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n          {(menuItems.length > 0 || controls) && <ViewerActions label={labels.moreActions} testId={`${testId}-more`} icon={<icons.more data-icon=\"inline-start\" aria-hidden=\"true\" />} items={menuItems}>{compactHeader && controls && <div className=\"boring-viewer flex flex-wrap items-center gap-2 p-2 min-[641px]:hidden\">{controls}</div>}</ViewerActions>}\n          {!compactHeader && host?.onFullscreenChange && <Toggle size=\"sm\" aria-label={host.fullscreen ? labels.exitFullscreen : labels.enterFullscreen} title={host.fullscreen ? labels.exitFullscreen : labels.enterFullscreen} data-testid={`${testId}-fullscreen`} pressed={host.fullscreen === true}\n            onPressedChange={pressed => host.onFullscreenChange!(pressed)}>{host.fullscreen ? <icons.exitFullscreen data-icon=\"inline-start\" aria-hidden=\"true\" /> : <icons.enterFullscreen data-icon=\"inline-start\" aria-hidden=\"true\" />}</Toggle>}\n          {(!compactHeader || headerStart) && onClose && <Button variant=\"ghost\" size=\"icon-sm\" className={compactHeader ? 'max-[641px]:hidden' : undefined} aria-label={labels.close} title={labels.close} data-testid={`${testId}-close`} onClick={() => run(onClose)}><icons.close data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n        </div>\n      </>;\n  const header = <header ref={bar} data-testid={`${testId}-bar`} data-layout={stacked ? 'stacked' : undefined}\n    className={cn('relative flex shrink-0', stacked ? 'flex-col' : 'h-13 flex-nowrap items-center gap-x-1.5 px-2 sm:px-3')}>\n        {stacked ? <><div data-testid={`${testId}-titlebar`} className=\"flex min-h-14 min-w-0 items-center gap-x-1.5 px-3 py-1.5\">{titlebar}</div>{toolbar}</> : titlebar}\n        {notice && <Badge role=\"status\" aria-live=\"polite\" data-testid={`${testId}-notice`} data-tone={notice.tone} variant={notice.tone === 'danger' ? 'destructive' : 'secondary'}>{notice.text}</Badge>}\n        {manual && <ManualCopy testId={testId} link={manual.link} text={manual.text} labels={labels} onClose={() => setManual(undefined)} />}\n      </header>;\n  return <ViewerBarContext.Provider value={space}>\n    <section data-boring=\"viewer-frame\" data-testid={`${testId}-frame`} data-tight={space.tight || undefined}\n      className={cn('boring-viewer isolate flex h-full min-h-0 min-w-0 flex-col bg-background text-foreground', className)}>\n      {host?.renderHeader ? host.renderHeader(header) : header}\n      <div data-testid={`${testId}-body`} className=\"flex min-h-0 min-w-0 flex-1 flex-col\">{children}</div>\n    </section>\n  </ViewerBarContext.Provider>;\n}\n",
       "type": "registry:component",
       "target": "components/viewers/viewer-frame.tsx"
     },
     {
       "path": "registry/viewers/viewer-window.ts",
-      "content": "/*\n * The window a viewer sits in, and the viewers' words and icons as plain data. A host passes a partial `labels` (and `icons`) object to\n * `ViewerWindowProvider` (every viewer below reads it) or to one `ViewerFrame`; what it leaves out keeps the default below.\n */\nimport { createContext, useContext, useMemo } from 'react';\nimport { EllipsisIcon, Maximize2Icon, Minimize2Icon, Share2Icon, XIcon } from 'lucide-react';\nimport type { BlockAction, BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\n\nexport const defaultViewerLabels = {\n  share: 'Share',\n  moreActions: 'More actions',\n  reload: 'Reload',\n  copy: 'Copy',\n  download: 'Download',\n  openInNewTab: 'Open in new tab',\n  enterFullscreen: 'Enter full screen',\n  exitFullscreen: 'Exit full screen',\n  close: 'Close',\n  readOnly: 'Read-only',\n  refreshFailed: 'Refresh failed',\n  shareFailed: 'Could not share',\n  linkCopied: 'Link copied',\n  shared: 'Shared',\n  copied: 'Copied',\n  copyFailed: 'Could not copy',\n  actionFailed: 'The action failed',\n  /** Shown when the browser allowed no automatic copy: `link` is true for Share, false for Copy. */\n  manualCopy: (link: boolean) => `This browser blocked automatic copying. Copy the ${link ? 'link' : 'text'} below.`,\n  done: 'Done',\n  versionHistory: 'Version history',\n  latest: 'Latest',\n  loading: 'Loading…',\n  // Save status\n  saved: 'Saved',\n  unsaved: 'Unsaved',\n  saving: 'Saving',\n  saveUnconfirmed: 'Save unconfirmed',\n  changedElsewhere: 'Changed elsewhere',\n  closed: 'Closed',\n  save: 'Save',\n  checkSave: 'Check save outcome',\n  abandon: 'Abandon and refresh, keeping my draft',\n  discardLocal: 'Discard local edits',\n  // Modes\n  view: 'View',\n  preview: 'Preview',\n  source: 'Source',\n  htmlPreview: 'HTML preview',\n  htmlSource: 'HTML source',\n  editorMode: 'Editor mode',\n  rich: 'Rich',\n  richText: 'Rich text',\n  markdownSource: 'Markdown source',\n  document: 'Document',\n  // Images and PDFs\n  zoom: 'Zoom',\n  zoomIn: 'Zoom in',\n  zoomOut: 'Zoom out',\n  zoomLevel: (percent: string) => `Zoom ${percent}, fit to view`,\n  fitToView: 'Fit to view',\n  actualSize: 'Actual size',\n  imageUnreadable: 'This file could not be read as an image.',\n  imageUnsupported: (mediaType: string) => `This image type (${mediaType || 'unknown'}) cannot be shown here. You can still download it.`,\n  imageStage: (name: string) => `${name} image`,\n  pdfUnsupported: 'This browser cannot show PDFs inline.',\n  pdfHint: (name: string, canOpen: boolean) => `Download ${name} to read it in a PDF app${canOpen ? ', or open it in a new tab' : ''}.`,\n  notSaved: (reason: string) => `Not saved: ${reason}`,\n  saveFailedReason: 'the save failed',\n  changedElsewhereReason: 'changed elsewhere',\n  operationFailed: 'The document operation failed. Your source has been retained.',\n};\nexport type ViewerLabels = typeof defaultViewerLabels;\n\nexport const defaultViewerIcons = {\n  share: Share2Icon as BlockIcon,\n  more: EllipsisIcon as BlockIcon,\n  close: XIcon as BlockIcon,\n  enterFullscreen: Maximize2Icon as BlockIcon,\n  exitFullscreen: Minimize2Icon as BlockIcon,\n};\nexport type ViewerIcons = typeof defaultViewerIcons;\n\n/**\n * The window a viewer sits in, when the host lays viewers out in a panel (pi-app's `AgentWorkspace`, the ambient window). With\n * `onFullscreenChange`, every `ViewerFrame` below shows an \"Enter full screen\" / \"Exit full screen\" button; `actions` adds the host's\n * actions to every viewer bar (`header` ones as buttons, `menu` ones in its \"…\" menu, test ids `<frame testId>-<id>`); `labels` and\n * `icons` reach every viewer below. Without a provider nothing changes.\n */\nexport interface ViewerWindow {\n  readonly fullscreen?: boolean | undefined;\n  readonly onFullscreenChange?: ((next: boolean) => void) | undefined;\n  readonly actions?: readonly BlockAction[] | undefined;\n  readonly labels?: Partial<ViewerLabels> | undefined;\n  readonly icons?: Partial<ViewerIcons> | undefined;\n}\nconst ViewerWindowContext = createContext<ViewerWindow | undefined>(undefined);\nexport const ViewerWindowProvider = ViewerWindowContext.Provider;\nexport const useViewerWindow = (): ViewerWindow | undefined => useContext(ViewerWindowContext);\n\n/** The viewers' labels and icons: the defaults, then the window's, then the frame's own. */\nexport function useViewerText(labels?: Partial<ViewerLabels>, icons?: Partial<ViewerIcons>): { readonly labels: ViewerLabels; readonly icons: ViewerIcons } {\n  const host = useViewerWindow();\n  return useMemo(() => ({ labels: withDefaults(defaultViewerLabels, host?.labels, labels), icons: withDefaults(defaultViewerIcons, host?.icons, icons) }), [host?.labels, host?.icons, labels, icons]);\n}\n",
+      "content": "/*\n * The window a viewer sits in, and the viewers' words and icons as plain data. A host passes a partial `labels` (and `icons`) object to\n * `ViewerWindowProvider` (every viewer below reads it) or to one `ViewerFrame`; what it leaves out keeps the default below.\n */\nimport { createContext, useContext, useMemo } from 'react';\nimport { EllipsisIcon, Maximize2Icon, Minimize2Icon, Share2Icon, XIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { MarkdownEditorProps } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { BlockAction, BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\nimport { defaultVersionHistoryLabels } from '../version-history/version-history';\n\nexport const defaultViewerLabels = {\n  share: 'Share',\n  moreActions: 'More actions',\n  reload: 'Reload',\n  copy: 'Copy',\n  download: 'Download',\n  openInNewTab: 'Open in new tab',\n  enterFullscreen: 'Enter full screen',\n  exitFullscreen: 'Exit full screen',\n  close: 'Close',\n  readOnly: 'Read-only',\n  refreshFailed: 'Refresh failed',\n  shareFailed: 'Could not share',\n  linkCopied: 'Link copied',\n  shared: 'Shared',\n  copied: 'Copied',\n  copyFailed: 'Could not copy',\n  actionFailed: 'The action failed',\n  /** Shown when the browser allowed no automatic copy: `link` is true for Share, false for Copy. */\n  manualCopy: (link: boolean) => `This browser blocked automatic copying. Copy the ${link ? 'link' : 'text'} below.`,\n  done: 'Done',\n  ...defaultVersionHistoryLabels,\n  versionViewOnly: 'Viewing an older version. Restore is not available in this viewer.',\n  latest: 'Latest',\n  loading: 'Loading…',\n  // Save status\n  saved: 'Saved',\n  unsaved: 'Unsaved',\n  saving: 'Saving…',\n  saveUnconfirmed: 'Save unconfirmed',\n  changedElsewhere: 'Changed elsewhere',\n  closed: 'Closed',\n  save: 'Save',\n  checkSave: 'Check save outcome',\n  abandon: 'Abandon and refresh, keeping my draft',\n  discardLocal: 'Discard local edits',\n  // Modes\n  view: 'View',\n  preview: 'Preview',\n  source: 'Source',\n  htmlPreview: 'HTML preview',\n  htmlSource: 'HTML source',\n  editorMode: 'Editor mode',\n  rich: 'Rich',\n  richText: 'Rich text',\n  markdownSource: 'Markdown source',\n  document: 'Document',\n  // Images and PDFs\n  zoom: 'Zoom',\n  zoomIn: 'Zoom in',\n  zoomOut: 'Zoom out',\n  zoomLevel: (percent: string) => `Zoom ${percent}, fit to view`,\n  fitToView: 'Fit to view',\n  actualSize: 'Actual size',\n  imageUnreadable: 'This file could not be read as an image.',\n  imageUnsupported: (mediaType: string) => `This image type (${mediaType || 'unknown'}) cannot be shown here. You can still download it.`,\n  imageStage: (name: string) => `${name} image`,\n  pdfUnsupported: 'This browser cannot show PDFs inline.',\n  pdfDocument: (name: string) => `${name} pages`,\n  /** The page indicator of the drawn pages, for example `3 / 12`. */\n  pdfPage: (current: number, count: number) => `${current} / ${count}`,\n  pdfHint: (name: string, canOpen: boolean) => `Download ${name} to read it in a PDF app${canOpen ? ', or open it in a new tab' : ''}.`,\n  notSaved: (reason: string) => `Not saved: ${reason}`,\n  saveFailedReason: 'the save failed',\n  changedElsewhereReason: 'changed elsewhere',\n  operationFailed: 'The document operation failed. Your source has been retained.',\n};\nexport type ViewerLabels = typeof defaultViewerLabels;\n\nexport const defaultViewerIcons = {\n  share: Share2Icon as BlockIcon,\n  more: EllipsisIcon as BlockIcon,\n  close: XIcon as BlockIcon,\n  enterFullscreen: Maximize2Icon as BlockIcon,\n  exitFullscreen: Minimize2Icon as BlockIcon,\n};\nexport type ViewerIcons = typeof defaultViewerIcons;\n\n/**\n * The window a viewer sits in, when the host lays viewers out in a panel (pi-app's `AgentWorkspace`, the ambient window). With\n * `onFullscreenChange`, every `ViewerFrame` below shows an \"Enter full screen\" / \"Exit full screen\" button; `actions` adds the host's\n * actions to every viewer bar (`header` ones as buttons, `menu` ones in its \"…\" menu, test ids `<frame testId>-<id>`); `labels` and\n * `icons` reach every viewer below. Without a provider nothing changes.\n */\nexport interface ViewerWindow {\n  /** Markdown autosave policy for every pane below. Defaults to true, with a 1200ms idle delay. */\n  readonly autosave?: MarkdownEditorProps['autosave'];\n  /** Place the existing bar in a host-owned shared header (for example with createPortal). Default: above the viewer body. */\n  readonly renderHeader?: ((header: ReactNode) => ReactNode) | undefined;\n  /** `stacked` keeps the title and window actions above a separate content toolbar. Default: `inline`, one row. */\n  readonly headerLayout?: 'inline' | 'stacked' | undefined;\n  readonly fullscreen?: boolean | undefined;\n  readonly onFullscreenChange?: ((next: boolean) => void) | undefined;\n  readonly actions?: readonly BlockAction[] | undefined;\n  readonly labels?: Partial<ViewerLabels> | undefined;\n  readonly icons?: Partial<ViewerIcons> | undefined;\n}\nconst ViewerWindowContext = createContext<ViewerWindow | undefined>(undefined);\nexport const ViewerWindowProvider = ViewerWindowContext.Provider;\nexport const useViewerWindow = (): ViewerWindow | undefined => useContext(ViewerWindowContext);\n\n/** The viewers' labels and icons: the defaults, then the window's, then the frame's own. */\nexport function useViewerText(labels?: Partial<ViewerLabels>, icons?: Partial<ViewerIcons>): { readonly labels: ViewerLabels; readonly icons: ViewerIcons } {\n  const host = useViewerWindow();\n  return useMemo(() => ({ labels: withDefaults(defaultViewerLabels, host?.labels, labels), icons: withDefaults(defaultViewerIcons, host?.icons, icons) }), [host?.labels, host?.icons, labels, icons]);\n}\n",
       "type": "registry:lib",
       "target": "components/viewers/viewer-window.ts"
     },
     {
       "path": "registry/viewers/viewer-labels-fr.ts",
-      "content": "/* The viewers' words in French, the `locale=\"fr\"` base of `AgentWorkspace`'s viewers. Typed as `ViewerLabels`, so a key added in English must be added here too. */\nimport type { ViewerLabels } from './viewer-window';\n\nexport const frenchViewerLabels: ViewerLabels = {\n  share: 'Partager',\n  moreActions: 'Plus d’actions',\n  reload: 'Recharger',\n  copy: 'Copier',\n  download: 'Télécharger',\n  openInNewTab: 'Ouvrir dans un nouvel onglet',\n  enterFullscreen: 'Plein écran',\n  exitFullscreen: 'Quitter le plein écran',\n  close: 'Fermer',\n  readOnly: 'Lecture seule',\n  refreshFailed: 'Échec de l’actualisation',\n  shareFailed: 'Partage impossible',\n  linkCopied: 'Lien copié',\n  shared: 'Partagé',\n  copied: 'Copié',\n  copyFailed: 'Copie impossible',\n  actionFailed: 'L’action a échoué',\n  manualCopy: link => `Ce navigateur a bloqué la copie automatique. Copiez ${link ? 'le lien' : 'le texte'} ci-dessous.`,\n  done: 'Terminé',\n  versionHistory: 'Historique des versions',\n  latest: 'Dernière version',\n  loading: 'Chargement…',\n  saved: 'Enregistré',\n  unsaved: 'Non enregistré',\n  saving: 'Enregistrement',\n  saveUnconfirmed: 'Enregistrement non confirmé',\n  changedElsewhere: 'Modifié ailleurs',\n  closed: 'Fermé',\n  save: 'Enregistrer',\n  checkSave: 'Vérifier l’enregistrement',\n  abandon: 'Abandonner et actualiser, en gardant mon brouillon',\n  discardLocal: 'Annuler mes modifications',\n  view: 'Affichage',\n  preview: 'Aperçu',\n  source: 'Source',\n  htmlPreview: 'Aperçu HTML',\n  htmlSource: 'Source HTML',\n  editorMode: 'Mode d’édition',\n  rich: 'Mise en forme',\n  richText: 'Texte mis en forme',\n  markdownSource: 'Source Markdown',\n  document: 'Document',\n  zoom: 'Zoom',\n  zoomIn: 'Agrandir',\n  zoomOut: 'Réduire',\n  zoomLevel: percent => `Zoom ${percent}, ajuster à la vue`,\n  fitToView: 'Ajuster à la vue',\n  actualSize: 'Taille réelle',\n  imageUnreadable: 'Ce fichier n’a pas pu être lu comme une image.',\n  imageUnsupported: mediaType => `Ce type d’image (${mediaType || 'inconnu'}) ne peut pas être affiché ici. Vous pouvez toujours le télécharger.`,\n  imageStage: name => `Image ${name}`,\n  pdfUnsupported: 'Ce navigateur ne peut pas afficher les PDF directement.',\n  pdfHint: (name, canOpen) => `Téléchargez ${name} pour le lire dans une application PDF${canOpen ? ', ou ouvrez-le dans un nouvel onglet' : ''}.`,\n  notSaved: reason => `Non enregistré : ${reason}`,\n  saveFailedReason: 'l’enregistrement a échoué',\n  changedElsewhereReason: 'modifié ailleurs',\n  operationFailed: 'L’opération sur le document a échoué. Votre source est conservée.',\n};\n",
+      "content": "/* The viewers' words in French, the `locale=\"fr\"` base of `AgentWorkspace`'s viewers. Typed as `ViewerLabels`, so a key added in English must be added here too. */\nimport type { ViewerLabels } from './viewer-window';\nimport { frenchVersionHistoryLabels } from '../version-history/version-history';\n\nexport const frenchViewerLabels: ViewerLabels = {\n  share: 'Partager',\n  moreActions: 'Plus d’actions',\n  reload: 'Recharger',\n  copy: 'Copier',\n  download: 'Télécharger',\n  openInNewTab: 'Ouvrir dans un nouvel onglet',\n  enterFullscreen: 'Plein écran',\n  exitFullscreen: 'Quitter le plein écran',\n  close: 'Fermer',\n  readOnly: 'Lecture seule',\n  refreshFailed: 'Échec de l’actualisation',\n  shareFailed: 'Partage impossible',\n  linkCopied: 'Lien copié',\n  shared: 'Partagé',\n  copied: 'Copié',\n  copyFailed: 'Copie impossible',\n  actionFailed: 'L’action a échoué',\n  manualCopy: link => `Ce navigateur a bloqué la copie automatique. Copiez ${link ? 'le lien' : 'le texte'} ci-dessous.`,\n  done: 'Terminé',\n  ...frenchVersionHistoryLabels,\n  versionViewOnly: 'Ancienne version en lecture seule. La restauration n’est pas disponible dans cette vue.',\n  latest: 'Dernière version',\n  loading: 'Chargement…',\n  saved: 'Enregistré',\n  unsaved: 'Non enregistré',\n  saving: 'Enregistrement',\n  saveUnconfirmed: 'Enregistrement non confirmé',\n  changedElsewhere: 'Modifié ailleurs',\n  closed: 'Fermé',\n  save: 'Enregistrer',\n  checkSave: 'Vérifier l’enregistrement',\n  abandon: 'Abandonner et actualiser, en gardant mon brouillon',\n  discardLocal: 'Annuler mes modifications',\n  view: 'Affichage',\n  preview: 'Aperçu',\n  source: 'Source',\n  htmlPreview: 'Aperçu HTML',\n  htmlSource: 'Source HTML',\n  editorMode: 'Mode d’édition',\n  rich: 'Mise en forme',\n  richText: 'Texte mis en forme',\n  markdownSource: 'Source Markdown',\n  document: 'Document',\n  zoom: 'Zoom',\n  zoomIn: 'Agrandir',\n  zoomOut: 'Réduire',\n  zoomLevel: percent => `Zoom ${percent}, ajuster à la vue`,\n  fitToView: 'Ajuster à la vue',\n  actualSize: 'Taille réelle',\n  imageUnreadable: 'Ce fichier n’a pas pu être lu comme une image.',\n  imageUnsupported: mediaType => `Ce type d’image (${mediaType || 'inconnu'}) ne peut pas être affiché ici. Vous pouvez toujours le télécharger.`,\n  imageStage: name => `Image ${name}`,\n  pdfUnsupported: 'Ce navigateur ne peut pas afficher les PDF directement.',\n  pdfDocument: name => `Pages de ${name}`,\n  pdfPage: (current, count) => `${current} / ${count}`,\n  pdfHint: (name, canOpen) => `Téléchargez ${name} pour le lire dans une application PDF${canOpen ? ', ou ouvrez-le dans un nouvel onglet' : ''}.`,\n  notSaved: reason => `Non enregistré : ${reason}`,\n  saveFailedReason: 'l’enregistrement a échoué',\n  changedElsewhereReason: 'modifié ailleurs',\n  operationFailed: 'L’opération sur le document a échoué. Votre source est conservée.',\n};\n",
       "type": "registry:lib",
       "target": "components/viewers/viewer-labels-fr.ts"
     }
   ],
   "css": {
-    "@layer base": {
-      ".boring-viewer, .boring-viewer *, .boring-viewer *::before, .boring-viewer *::after": {
-        "box-sizing": "border-box"
-      },
-      ".boring-viewer :where(button, input, textarea)": {
-        "font": "inherit",
-        "color": "inherit",
-        "letter-spacing": "inherit"
-      },
-      ".boring-viewer :where(button)": {
-        "background-color": "transparent",
-        "border": "0",
-        "padding": "0"
-      },
-      ".boring-viewer :where(textarea, input)": {
-        "margin": "0"
-      },
-      ".boring-viewer [hidden]": {
-        "display": "none"
+    "@layer utilities": {
+      "@media (max-width: 640px), (pointer: coarse)": {
+        ".boring-viewer :is([data-slot=\"button\"], [data-slot=\"toggle\"], [data-slot=\"toggle-group-item\"], [class~=\"group/button\"], [class~=\"group/toggle\"])": {
+          "min-height": "2.75rem",
+          "min-width": "2.75rem"
+        },
+        ".boring-viewer.boring-markdown-bubble :is([data-slot=\"button\"], [data-slot=\"toggle\"])": {
+          "min-height": "2.75rem",
+          "min-width": "2.75rem"
+        }
       }
     },
     "@layer components": {
-      ".boring-viewer .boring-markdown-editor": {
+      ".boring-viewer .boring-markdown-editor, .boring-viewer .boring-html-pane": {
         "display": "flex",
         "flex-direction": "column",
         "flex": "1 1 auto",
@@ -136,156 +142,60 @@
       ".boring-viewer .boring-markdown-surface": {
         "flex": "1 1 auto",
         "min-height": "0",
-        "overflow": "auto",
-        "scrollbar-width": "thin",
-        "scrollbar-color": "color-mix(in oklab, var(--foreground) 22%, transparent) transparent"
+        "overflow": "auto"
       },
-      ".boring-viewer .boring-markdown-surface:focus-within": {
-        "box-shadow": "inset 0 0 0 1px color-mix(in oklab, var(--ring) 55%, transparent)"
-      },
-      ".boring-viewer .boring-markdown-toolbar": {
+      ".boring-viewer .boring-markdown-toolbar, .boring-viewer.boring-markdown-bubble": {
         "display": "flex",
         "flex": "none",
         "align-items": "center",
-        "gap": "0.125rem",
-        "padding": "0.375rem 0.75rem",
-        "border-bottom": "1px solid var(--border)",
-        "background": "var(--background)",
+        "gap": "0.25rem",
+        "max-width": "calc(100vw - 24px)"
+      },
+      ".boring-viewer .boring-markdown-toolbar": {
+        "padding": "0.375rem 1.5rem 0.375rem 0.75rem",
         "overflow-x": "auto",
-        "scrollbar-width": "none"
+        "scrollbar-width": "none",
+        "mask-image": "linear-gradient(to right, black calc(100% - 2rem), transparent)"
       },
       ".boring-viewer .boring-markdown-toolbar::-webkit-scrollbar": {
         "display": "none"
       },
       ".boring-viewer .boring-markdown-tool": {
-        "display": "inline-flex",
-        "flex": "none",
-        "align-items": "center",
-        "justify-content": "center",
-        "width": "2rem",
-        "height": "2rem",
-        "border-radius": "0.375rem",
-        "color": "var(--muted-foreground)",
-        "cursor": "pointer",
-        "transition": "background-color 0.12s, color 0.12s"
-      },
-      ".boring-viewer .boring-markdown-tool:hover:not(:disabled)": {
-        "background": "var(--muted)",
-        "color": "var(--foreground)"
-      },
-      ".boring-viewer .boring-markdown-tool[aria-pressed=\"true\"]": {
-        "background": "color-mix(in oklab, var(--primary) 12%, transparent)",
-        "color": "var(--foreground)",
-        "box-shadow": "inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent)"
-      },
-      ".boring-viewer .boring-markdown-tool:disabled": {
-        "opacity": "0.4",
-        "cursor": "not-allowed"
-      },
-      ".boring-viewer .boring-markdown-tool:focus-visible, .boring-viewer .boring-markdown-link button:focus-visible, .boring-viewer .boring-markdown-alert button:focus-visible, .boring-viewer .boring-markdown-proposal button:focus-visible": {
-        "outline": "2px solid color-mix(in oklab, var(--ring) 70%, transparent)",
-        "outline-offset": "1px"
+        "flex": "none"
       },
       ".boring-viewer .boring-markdown-separator": {
         "flex": "none",
-        "width": "1px",
-        "height": "1rem",
-        "margin": "0 0.375rem",
-        "background": "var(--border)"
+        "margin-inline": "0.25rem"
+      },
+      ".boring-viewer span.boring-markdown-separator": {
+        "width": "0.5rem",
+        "margin": "0"
       },
       ".boring-viewer .boring-markdown-icon": {
         "display": "block"
       },
-      ".boring-viewer .boring-markdown-link": {
+      ".boring-viewer .boring-markdown-link, .boring-viewer .boring-markdown-alert, .boring-viewer .boring-markdown-proposal, .boring-viewer [data-boring=\"text-draft-controls\"]": {
         "display": "flex",
         "flex": "none",
         "flex-wrap": "wrap",
         "align-items": "center",
         "gap": "0.5rem",
-        "padding": "0.5rem 0.75rem",
-        "border-bottom": "1px solid var(--border)",
-        "background": "var(--muted)"
+        "padding": "0.5rem 0.75rem"
       },
-      ".boring-viewer .boring-markdown-link input": {
+      ".boring-viewer .boring-markdown-link [data-slot=\"input\"]": {
         "flex": "1 1 14rem",
-        "min-width": "0",
-        "height": "2rem",
-        "padding": "0 0.625rem",
-        "border": "1px solid var(--input)",
-        "border-radius": "0.375rem",
-        "background": "var(--background)",
-        "font-size": "0.875rem"
-      },
-      ".boring-viewer .boring-markdown-link input:focus-visible": {
-        "outline": "2px solid color-mix(in oklab, var(--ring) 70%, transparent)",
-        "outline-offset": "0"
-      },
-      ".boring-viewer .boring-markdown-link button, .boring-viewer .boring-markdown-alert button, .boring-viewer .boring-markdown-proposal > button": {
-        "height": "2rem",
-        "padding": "0 0.75rem",
-        "border": "1px solid var(--border)",
-        "border-radius": "0.375rem",
-        "background": "var(--background)",
-        "font-size": "0.8125rem",
-        "font-weight": "500",
-        "cursor": "pointer"
-      },
-      ".boring-viewer .boring-markdown-link button:hover:not(:disabled), .boring-viewer .boring-markdown-alert button:hover:not(:disabled), .boring-viewer .boring-markdown-proposal > button:hover:not(:disabled)": {
-        "background": "var(--muted)"
-      },
-      ".boring-viewer .boring-markdown-alert button:disabled, .boring-viewer .boring-markdown-proposal > button:disabled": {
-        "opacity": "0.45",
-        "cursor": "not-allowed"
-      },
-      ".boring-viewer .boring-markdown-notice, .boring-viewer .boring-markdown-alert, .boring-viewer .boring-markdown-proposal": {
-        "flex": "none",
-        "margin": "0.75rem 0.75rem 0",
-        "padding": "0.625rem 0.75rem",
-        "border": "1px solid var(--border)",
-        "border-radius": "0.5rem",
-        "background": "var(--muted)",
-        "font-size": "0.8125rem",
-        "line-height": "1.5"
+        "min-width": "0"
       },
       ".boring-viewer .boring-markdown-notice": {
-        "border-left": "3px solid color-mix(in oklab, var(--primary) 55%, transparent)"
-      },
-      ".boring-viewer .boring-markdown-alert": {
-        "display": "flex",
-        "flex-wrap": "wrap",
-        "align-items": "center",
-        "gap": "0.5rem",
-        "border-color": "color-mix(in oklab, var(--destructive) 40%, var(--border))",
-        "background": "color-mix(in oklab, var(--destructive) 8%, var(--background))"
-      },
-      ".boring-viewer .boring-markdown-proposal": {
-        "display": "flex",
-        "flex-wrap": "wrap",
-        "align-items": "center",
-        "gap": "0.5rem",
-        "background": "var(--background)"
-      },
-      ".boring-viewer .boring-markdown-proposal h3": {
-        "flex": "1 1 100%",
-        "margin": "0",
-        "font-size": "0.875rem"
+        "margin": "0.75rem"
       },
-      ".boring-viewer .boring-markdown-proposal details": {
+      ".boring-viewer .boring-markdown-proposal :is(h3, details)": {
         "flex": "1 1 100%",
         "min-width": "0"
       },
-      ".boring-viewer .boring-markdown-proposal summary": {
-        "cursor": "pointer",
-        "color": "var(--muted-foreground)"
-      },
       ".boring-viewer .boring-markdown-proposal pre": {
-        "margin": "0.25rem 0",
         "max-height": "12rem",
         "overflow": "auto",
-        "padding": "0.5rem",
-        "border-radius": "0.375rem",
-        "background": "var(--muted)",
-        "font": "0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
         "white-space": "pre-wrap"
       },
       ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"]": {
@@ -295,70 +205,35 @@
         ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"]": {
           "display": "block",
           "flex": "none",
-          "padding": "0.375rem 0.75rem",
-          "border-bottom": "1px solid var(--border)",
-          "overflow-x": "auto"
+          "overflow-x": "auto",
+          "padding": "0.375rem 0.75rem"
         },
         ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"] ol": {
           "display": "flex",
           "gap": "0.25rem",
+          "list-style": "none",
           "margin": "0",
-          "padding": "0",
-          "list-style": "none"
-        },
-        ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"] button": {
-          "max-width": "14rem",
-          "padding": "0.125rem 0.5rem",
-          "overflow": "hidden",
-          "border-radius": "999px",
-          "color": "var(--muted-foreground)",
-          "font-size": "0.75rem",
-          "text-overflow": "ellipsis",
-          "white-space": "nowrap",
-          "cursor": "pointer"
-        },
-        ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"] button:hover": {
-          "background": "var(--muted)",
-          "color": "var(--foreground)"
-        },
-        ".boring-viewer .boring-markdown-editor nav[aria-label=\"Document outline\"] [data-heading-level=\"1\"] button": {
-          "font-weight": "600"
+          "padding": "0"
         }
       },
       ".boring-viewer .boring-markdown-source, .boring-viewer .boring-html-viewer__source": {
-        "display": "block",
         "flex": "1 1 auto",
         "width": "100%",
         "min-height": "0",
-        "margin": "0",
-        "padding": "1rem 1.25rem",
-        "border": "0",
-        "border-radius": "0",
-        "outline": "none",
-        "resize": "none",
-        "background": "var(--background)",
-        "color": "var(--foreground)",
-        "font": "0.8125rem/1.65 ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
-        "tab-size": "2",
-        "caret-color": "var(--foreground)"
-      },
-      ".boring-viewer .boring-markdown-source:focus-visible, .boring-viewer .boring-html-viewer__source:focus-visible": {
-        "box-shadow": "inset 0 0 0 1px color-mix(in oklab, var(--ring) 55%, transparent)"
-      },
-      ".boring-viewer .boring-markdown-source::selection, .boring-viewer .boring-html-viewer__source::selection, .boring-viewer .boring-markdown-content ::selection, .boring-viewer .boring-markdown-content::selection": {
-        "background": "color-mix(in oklab, var(--primary) 24%, transparent)"
+        "resize": "none"
       },
       ".boring-viewer .boring-markdown-content": {
-        "max-width": "46rem",
+        "max-width": "68ch",
         "min-height": "100%",
         "margin": "0 auto",
-        "padding": "1.25rem 1.25rem 3rem",
-        "outline": "none",
+        "padding": "1.5rem 1.5rem 3rem",
+        "overflow-wrap": "anywhere",
         "color": "var(--foreground)",
-        "font-size": "0.9375rem",
-        "line-height": "1.7",
-        "letter-spacing": "-0.005em",
-        "overflow-wrap": "anywhere"
+        "font-size": "var(--text-base)",
+        "line-height": "var(--leading-relaxed)"
+      },
+      ".boring-viewer .boring-markdown-content:focus": {
+        "outline": "none"
       },
       ".boring-viewer .boring-markdown-content > :first-child": {
         "margin-top": "0"
@@ -371,32 +246,27 @@
         "float": "left",
         "height": "0",
         "color": "var(--muted-foreground)",
-        "opacity": "0.8",
         "pointer-events": "none"
       },
       ".boring-viewer .boring-markdown-content :is(h1, h2, h3, h4, h5, h6)": {
-        "color": "var(--foreground)",
-        "font-weight": "600",
-        "letter-spacing": "-0.02em",
-        "line-height": "1.25"
+        "font-weight": "var(--font-weight-semibold)",
+        "line-height": "var(--leading-tight)"
       },
       ".boring-viewer .boring-markdown-content h1": {
         "margin": "1.75rem 0 0.75rem",
-        "font-size": "1.875rem"
+        "font-size": "var(--text-2xl)"
       },
       ".boring-viewer .boring-markdown-content h2": {
-        "margin": "1.5rem 0 0.625rem",
-        "padding-bottom": "0.25rem",
-        "border-bottom": "1px solid color-mix(in oklab, var(--border) 70%, transparent)",
-        "font-size": "1.375rem"
+        "margin": "2rem 0 0.75rem",
+        "font-size": "var(--text-xl)"
       },
       ".boring-viewer .boring-markdown-content h3": {
         "margin": "1.25rem 0 0.5rem",
-        "font-size": "1.125rem"
+        "font-size": "var(--text-lg)"
       },
       ".boring-viewer .boring-markdown-content :is(h4, h5, h6)": {
         "margin": "1rem 0 0.4rem",
-        "font-size": "1rem"
+        "font-size": "var(--text-base)"
       },
       ".boring-viewer .boring-markdown-content :is(ul, ol)": {
         "margin": "0.75rem 0",
@@ -405,27 +275,12 @@
       ".boring-viewer .boring-markdown-content ul": {
         "list-style": "disc"
       },
-      ".boring-viewer .boring-markdown-content ul ul": {
-        "list-style": "circle"
-      },
-      ".boring-viewer .boring-markdown-content ul ul ul": {
-        "list-style": "square"
-      },
       ".boring-viewer .boring-markdown-content ol": {
         "list-style": "decimal"
       },
-      ".boring-viewer .boring-markdown-content ol ol": {
-        "list-style": "lower-alpha"
-      },
-      ".boring-viewer .boring-markdown-content ol ol ol": {
-        "list-style": "lower-roman"
-      },
       ".boring-viewer .boring-markdown-content li": {
         "margin": "0.25rem 0"
       },
-      ".boring-viewer .boring-markdown-content li::marker": {
-        "color": "var(--muted-foreground)"
-      },
       ".boring-viewer .boring-markdown-content li > p": {
         "margin": "0"
       },
@@ -457,27 +312,29 @@
         "flex": "1 1 auto",
         "min-width": "0"
       },
-      ".boring-viewer .boring-markdown-content ul[data-type=\"taskList\"] li[data-checked=\"true\"] > div": {
+      ".boring-viewer .boring-markdown-content li[data-checked=\"true\"] > div": {
         "color": "var(--muted-foreground)",
         "text-decoration": "line-through"
       },
       ".boring-viewer .boring-markdown-content strong": {
-        "font-weight": "600"
+        "font-weight": "var(--font-weight-semibold)"
       },
       ".boring-viewer .boring-markdown-content code": {
         "padding": "0.1em 0.35em",
-        "border-radius": "0.25rem",
-        "background": "color-mix(in oklab, var(--foreground) 7%, transparent)",
-        "font": "0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+        "border-radius": "var(--radius-sm)",
+        "background": "var(--muted)",
+        "font-family": "var(--font-mono)",
+        "font-size": "var(--text-sm)"
       },
       ".boring-viewer .boring-markdown-content pre": {
         "margin": "1rem 0",
         "padding": "0.875rem 1rem",
         "overflow-x": "auto",
-        "border": "1px solid color-mix(in oklab, var(--border) 80%, transparent)",
-        "border-radius": "0.5rem",
-        "background": "color-mix(in oklab, var(--foreground) 4%, transparent)",
-        "font": "0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+        "border": "var(--default-border-width) solid var(--border)",
+        "border-radius": "var(--radius-lg)",
+        "background": "var(--muted)",
+        "font-family": "var(--font-mono)",
+        "font-size": "var(--text-sm)"
       },
       ".boring-viewer .boring-markdown-content pre code": {
         "padding": "0",
@@ -487,35 +344,22 @@
       ".boring-viewer .boring-markdown-content blockquote": {
         "margin": "1rem 0",
         "padding": "0.5rem 1rem",
-        "border-left": "3px solid color-mix(in oklab, var(--primary) 35%, transparent)",
-        "border-radius": "0 0.375rem 0.375rem 0",
-        "background": "color-mix(in oklab, var(--foreground) 4%, transparent)",
-        "color": "color-mix(in oklab, var(--foreground) 85%, transparent)"
-      },
-      ".boring-viewer .boring-markdown-content blockquote > :first-child": {
-        "margin-top": "0"
-      },
-      ".boring-viewer .boring-markdown-content blockquote > :last-child": {
-        "margin-bottom": "0"
+        "border-inline-start": "var(--default-border-width) solid var(--border)",
+        "color": "var(--muted-foreground)"
       },
       ".boring-viewer .boring-markdown-content a": {
         "color": "var(--foreground)",
         "text-decoration": "underline",
-        "text-decoration-thickness": "1px",
-        "text-underline-offset": "3px",
-        "text-decoration-color": "color-mix(in oklab, var(--foreground) 45%, transparent)",
         "cursor": "text"
       },
       ".boring-viewer .boring-markdown-content hr": {
         "margin": "1.5rem 0",
         "border": "0",
-        "border-top": "1px solid color-mix(in oklab, var(--border) 85%, transparent)"
+        "border-top": "var(--default-border-width) solid var(--border)"
       },
       ".boring-viewer .boring-markdown-content mark": {
-        "padding": "0 0.15em",
-        "border-radius": "0.2em",
-        "background": "color-mix(in oklab, #facc15 40%, transparent)",
-        "color": "inherit"
+        "background": "var(--accent)",
+        "color": "var(--accent-foreground)"
       },
       ".boring-viewer .boring-markdown-content .tableWrapper": {
         "margin": "1rem 0",
@@ -524,84 +368,49 @@
       ".boring-viewer .boring-markdown-content table": {
         "width": "100%",
         "border-collapse": "collapse",
-        "font-size": "0.875rem"
+        "font-size": "var(--text-sm)"
       },
       ".boring-viewer .boring-markdown-content :is(th, td)": {
         "min-width": "4rem",
         "padding": "0.5rem 0.75rem",
-        "border": "1px solid color-mix(in oklab, var(--border) 90%, transparent)",
+        "border": "var(--default-border-width) solid var(--border)",
         "text-align": "left",
         "vertical-align": "top"
       },
       ".boring-viewer .boring-markdown-content th": {
-        "background": "color-mix(in oklab, var(--foreground) 5%, transparent)",
-        "font-weight": "600"
+        "background": "var(--muted)",
+        "font-weight": "var(--font-weight-semibold)"
       },
       ".boring-viewer .boring-markdown-content :is(th, td) > p": {
         "margin": "0"
       },
       ".boring-viewer .boring-markdown-content .selectedCell": {
-        "background": "color-mix(in oklab, var(--primary) 12%, transparent)"
+        "background": "var(--accent)"
       },
       ".boring-viewer .boring-markdown-content img": {
         "display": "block",
         "max-width": "100%",
         "height": "auto",
-        "margin": "1rem 0",
-        "border-radius": "0.5rem"
+        "margin": "1rem 0"
       },
       ".boring-viewer .boring-markdown-content .boring-markdown-image": {
         "display": "inline-flex",
-        "align-items": "center",
-        "gap": "0.4rem",
         "max-width": "100%",
         "margin": "0.125rem 0",
         "padding": "0.125rem 0.5rem",
-        "border": "1px dashed var(--border)",
-        "border-radius": "0.375rem",
         "background": "var(--muted)",
-        "color": "var(--muted-foreground)",
-        "font-size": "0.85em",
-        "line-height": "1.5"
-      },
-      ".boring-viewer .boring-markdown-content .boring-markdown-image::before": {
-        "content": "\"\"",
-        "flex": "none",
-        "width": "0.85em",
-        "height": "0.85em",
-        "border": "1.5px solid currentColor",
-        "border-radius": "0.15em",
-        "opacity": "0.7"
-      },
-      ".boring-viewer .boring-markdown-content .ProseMirror-selectednode": {
-        "outline": "2px solid color-mix(in oklab, var(--ring) 70%, transparent)",
-        "outline-offset": "2px"
-      },
-      ".boring-viewer .boring-html-pane": {
-        "display": "flex",
-        "flex": "1 1 auto",
-        "flex-direction": "column",
-        "min-height": "0",
-        "min-width": "0"
+        "color": "var(--muted-foreground)"
       },
       ".boring-viewer .boring-html-viewer__preview": {
         "display": "flex",
         "flex": "1 1 auto",
         "flex-direction": "column",
-        "min-height": "0",
-        "background": "var(--muted)"
+        "min-height": "0"
       },
       ".boring-viewer .boring-html-viewer__preview > p": {
         "flex": "none",
         "margin": "0",
-        "padding": "0.375rem 0.75rem",
-        "border-bottom": "1px solid var(--border)",
-        "background": "var(--background)",
-        "color": "var(--muted-foreground)",
-        "font-size": "0.75rem"
-      },
-      ".boring-viewer .boring-html-viewer__preview > p[role=\"alert\"]": {
-        "color": "var(--destructive)"
+        "padding": "0.375rem 0.75rem"
       },
       ".boring-viewer .boring-html-viewer__preview > div": {
         "display": "flex",
@@ -613,38 +422,48 @@
         "width": "100%",
         "height": "100%",
         "min-height": "0",
-        "border": "0",
-        "background": "#fff",
-        "color-scheme": "light"
+        "border": "0"
       },
       ".boring-viewer .boring-viewer-checker": {
-        "background-color": "#fff",
-        "background-image": "linear-gradient(45deg, #d4d4d8 25%, transparent 25%, transparent 75%, #d4d4d8 75%), linear-gradient(45deg, #d4d4d8 25%, transparent 25%, transparent 75%, #d4d4d8 75%)",
+        "background-color": "var(--background)",
+        "background-image": "linear-gradient(45deg, var(--muted) 25%, transparent 25%, transparent 75%, var(--muted) 75%), linear-gradient(45deg, var(--muted) 25%, transparent 25%, transparent 75%, var(--muted) 75%)",
         "background-position": "0 0, 8px 8px",
         "background-size": "16px 16px"
       },
       ".boring-viewer .boring-viewer-stage": {
-        "background": "var(--muted)",
-        "scrollbar-width": "thin"
-      },
-      ".boring-viewer .boring-viewer-stage:focus-visible": {
-        "outline": "2px solid color-mix(in oklab, var(--ring) 60%, transparent)",
-        "outline-offset": "-2px"
+        "overflow": "auto"
       },
-      "@media (pointer: coarse)": {
-        ".boring-viewer .boring-markdown-tool": {
-          "width": "2.75rem",
-          "height": "2.75rem"
+      "@media (max-width: 640px)": {
+        ".boring-viewer .boring-markdown-content": {
+          "padding": "1.25rem 1.25rem 3rem"
+        },
+        ".boring-viewer .boring-markdown-toolbar": {
+          "display": "none"
+        },
+        ".boring-viewer.boring-markdown-dock": {
+          "display": "flex",
+          "align-items": "center",
+          "gap": "0.125rem",
+          "overflow-x": "auto",
+          "scrollbar-width": "none",
+          "position": "fixed",
+          "inset-inline": "0",
+          "z-index": "50",
+          "padding": "0.25rem 1.5rem 0.25rem 0.5rem",
+          "padding-bottom": "calc(0.25rem + env(safe-area-inset-bottom, 0px))",
+          "background": "var(--background)",
+          "mask-image": "linear-gradient(to right, black calc(100% - 2rem), transparent)"
         },
-        ".boring-viewer .boring-markdown-link input, .boring-viewer .boring-markdown-link button, .boring-viewer .boring-markdown-alert button, .boring-viewer .boring-markdown-proposal > button": {
-          "height": "2.75rem"
+        ".boring-viewer.boring-markdown-dock[data-keyboard]": {
+          "padding-bottom": "0.25rem"
         },
-        ".boring-viewer .boring-markdown-link input, .boring-viewer .boring-markdown-source, .boring-viewer .boring-html-viewer__source": {
-          "font-size": "1rem"
+        ".boring-viewer.boring-markdown-dock > .boring-markdown-dock-rule": {
+          "position": "absolute",
+          "inset-inline": "0",
+          "top": "0"
         },
-        ".boring-viewer .boring-markdown-content ul[data-type=\"taskList\"] li > label input[type=\"checkbox\"]": {
-          "width": "1.25rem",
-          "height": "1.25rem"
+        ".boring-viewer [data-boring=\"markdown-editor\"][data-dock] .boring-markdown-content": {
+          "padding-bottom": "6rem"
         }
       }
     }