@hachej/boring-ui-kit 0.4.11 → 0.4.12

package/r/documents.json

@@ -4,20 +4,20 @@
   "title": "Documents: the Library, a file and its revisions",
   "description": "The workspace's Library as the list, the chosen file in its viewer and its retained revisions beside it (an older one opens read-only). DocumentSheet opens one document over the app for a host's « Voir la fiche », with an optional « Toutes les fiches ». Every read goes through one revisionProvider binding.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/button.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/file-tree.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/viewers.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/file-tree.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/viewers.json",
     "drawer",
     "button",
     "scroll-area",
@@ -26,7 +26,7 @@
   "files": [
     {
       "path": "registry/documents/documents.tsx",
-      "content": "'use client';\n\n// The documents screen: the workspace's Library is the list (`ListDetail`: beside the file on a wide screen, one pane at a time on a phone);\n// the chosen file opens in the same viewer the Library uses (editable where it edits); its Revisions sit beside it. Every revision row opens\n// that exact revision read-only, and « Back to editing » returns to the file. The editor stays mounted while a revision is inspected, so its\n// unsaved edits survive; leaving the file with unsaved edits asks first. Every read goes through the one `revisionProvider` the host binds.\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Separator } from '@/components/ui/separator';\nimport { createFileTreeController } from '@hachej/boring-ui-kit/file-tree';\nimport type { FileTreeController } from '@hachej/boring-ui-kit/file-tree';\nimport { FileTreeView } from '../file-tree/file-tree';\nimport type { RevisionProvider } from '@hachej/boring-files/revision';\nimport { mediaTypeOf, viewerKindOf } from '@hachej/boring-files/file-types';\nimport { checkBlobBase, withBlobPointers } from '@hachej/boring-files/blob';\nimport type { ViewerKind } from '@hachej/boring-files/file-types';\nimport { ListDetail } from '../app-shell/list-detail';\nimport { ArtifactPanel } from '../pi-app/artifact-panel';\nimport type { ArtifactDescriptor } from '../pi-chat/artifact';\nimport type { CustomViewers, ViewerOptions } from '../pi-app/artifact-panel';\nimport { FileViewer } from '../pi-app/file-viewer';\nimport { ImagePane } from '../viewers/image-pane';\nimport { PdfPane } from '../viewers/pdf-pane';\nimport { ViewerFrame } from '../viewers/viewer-frame';\nimport { useViewerText } from '../viewers/viewer-window';\nimport { cn } from '../utils/utils';\nimport { Revisions } from './revisions';\nimport type { DocumentsLabels } from './documents-labels';\nimport { documentsLabels, DocumentsWords } from './words';\nimport type { DocumentsLocale } from './words';\n\nexport interface DocumentsProps {\n  /** The workspace's revision provider (the files guide's `connectRevisionProvider`, or a host's own binding). Borrowed: the host disposes it. */\n  readonly provider: RevisionProvider;\n  readonly locale?: DocumentsLocale | undefined;\n  /** The block's own words, over `documentsLabels` (the viewers' words follow `locale`). */\n  readonly labels?: Partial<DocumentsLabels> | undefined;\n  /** Host viewers by kind, as for the Library (for example a canvas). */\n  readonly viewers?: CustomViewers | undefined;\n  readonly share?: ViewerOptions['share'];\n  /** Where the host serves the bytes of large files (blob pointers): a same-origin path starting with `/`, default `/_files/`. */\n  readonly blobBase?: string | undefined;\n}\n\nconst nameOf = (path: string) => path.split('/').pop() || path;\n\n/** The workspace's change feed as a counter: it moves on every change, so the listings and the revisions are read again. */\nfunction useWorkspaceVersion(provider: RevisionProvider): number {\n  const [version, setVersion] = useState(0);\n  useEffect(() => {\n    if (!provider.changes) return undefined;\n    const abort = new AbortController();\n    void (async () => {\n      try { for await (const change of provider.changes!({ signal: abort.signal })) { void change; setVersion(current => current + 1); } } catch { /* the binding ended the feed: the listings stay as they are */ }\n    })();\n    return () => abort.abort();\n  }, [provider]);\n  return version;\n}\n\n/** The Library's tree over the provider: created and disposed with the binding, read again when the workspace changes. */\nfunction useFileTree(provider: RevisionProvider, version: number, blobBase: string): FileTreeController | undefined {\n  const [tree, setTree] = useState<FileTreeController>();\n  useEffect(() => {\n    const next = createFileTreeController({ revisionProvider: withBlobPointers(provider, blobBase) });\n    setTree(next);\n    void next.refresh();\n    return () => next.dispose();\n  }, [provider, blobBase]);\n  useEffect(() => {\n    if (!tree || version === 0) return;\n    const { query, expanded } = tree.getSnapshot();\n    if (query) void tree.search(query);\n    else for (const directory of ['', ...expanded]) void tree.refresh(directory);\n  }, [tree, version]);\n  return tree;\n}\n\n/**\n * The provider as it reads one revision: every read of the returned client is the exact `revision`, over the same provider (a reload in a\n * pinned view re-reads that revision, never the latest). It is for read-only views only.\n */\nfunction pinnedProviderOf(provider: RevisionProvider, revision: string): RevisionProvider {\n  return { ...provider, read: (request, signal) => provider.read({ target: request.target, revision: { kind: 'exact', value: revision } }, signal) };\n}\n\n/** An image or PDF revision, read exactly and shown in the viewer's read-only pane. */\nfunction BinaryRevision({ provider, path, revision, kind, labels, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly revision: string;\n  readonly kind: 'image' | 'pdf';\n  readonly labels: DocumentsLabels;\n  readonly onClose: () => void;\n}) {\n  const [state, setState] = useState<{ readonly kind: 'loading' } | { readonly kind: 'failed' } | { readonly kind: 'ready'; readonly bytes: Uint8Array; readonly mediaType: string }>({ kind: 'loading' });\n  const { labels: viewer } = useViewerText();\n  useEffect(() => {\n    const abort = new AbortController();\n    setState({ kind: 'loading' });\n    provider.read({ target: provider.locate(path), revision: { kind: 'exact', value: revision } }, abort.signal).then(result => {\n      if (!abort.signal.aborted) setState(result.kind === 'available' ? { kind: 'ready', bytes: result.snapshot.bytes, mediaType: result.snapshot.mediaType } : { kind: 'failed' });\n    }, () => { if (!abort.signal.aborted) setState({ kind: 'failed' }); });\n    return () => abort.abort();\n  }, [provider, path, revision]);\n  const status = { label: viewer.readOnly, kind: 'read-only' as const };\n  if (state.kind !== 'ready') return <ViewerFrame title={nameOf(path)} status={status} onClose={onClose}>\n    <p role=\"status\" className=\"m-0 p-4 text-sm text-muted-foreground\">{state.kind === 'loading' ? labels.revisionsLoading : labels.revisionLoadFailed}</p>\n  </ViewerFrame>;\n  return kind === 'image'\n    ? <ImagePane name={nameOf(path)} mediaType={state.mediaType} bytes={state.bytes} status={status} onClose={onClose} />\n    : <PdfPane name={nameOf(path)} bytes={state.bytes} status={status} onClose={onClose} />;\n}\n\n/** One revision of the file, read-only, with « Back to editing ». Text, Markdown and HTML use the artifact panel's pinned view. */\nfunction OlderVersion({ provider, path, revision, options, labels, onBack, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly revision: string;\n  readonly options: ViewerOptions;\n  readonly labels: DocumentsLabels;\n  readonly onBack: () => void;\n  readonly onClose: () => void;\n}) {\n  const kind: ViewerKind = viewerKindOf(path);\n  const pinned = useMemo(() => pinnedProviderOf(provider, revision), [provider, revision]);\n  const type = kind === 'markdown' ? 'markdown' : kind === 'html' ? 'html' : kind === 'text' ? 'code' : undefined;\n  const artifact: ArtifactDescriptor | undefined = type === undefined ? undefined\n    : { schema: 'boring.artifact', version: 1, title: nameOf(path), type, mediaType: mediaTypeOf(path), target: provider.locate(path), revision };\n  const bar = <>\n    <div className=\"flex shrink-0 items-center gap-2 px-3 py-2\">\n      <span role=\"status\" className=\"min-w-0 flex-1 truncate text-sm font-medium\">{labels.readOnlyRevision}</span>\n      <Button variant=\"ghost\" data-testid=\"back-to-editing\" onClick={onBack}>{labels.backToEditing}</Button>\n    </div>\n    <Separator />\n  </>;\n  let body;\n  if (artifact) body = <ArtifactPanel active={{ descriptor: artifact, follow: false }} versions={[]} options={{ ...options, client: pinned }} onSelect={onBack} onClose={onClose} />;\n  else if (kind === 'image' || kind === 'pdf') body = <BinaryRevision provider={provider} path={path} revision={revision} kind={kind} labels={labels} onClose={onClose} />;\n  else body = <ViewerFrame title={nameOf(path)} onClose={onClose}><p role=\"status\" className=\"m-0 p-4 text-sm text-muted-foreground\">{labels.unsupportedPreview}</p></ViewerFrame>;\n  return <div data-testid=\"revision-view\" data-kind={kind} data-revision={revision} className=\"flex h-full min-h-0 flex-1 flex-col\">\n    {bar}\n    <div className=\"flex min-h-0 flex-1 flex-col\">{body}</div>\n  </div>;\n}\n\nfunction DocumentDetail({ provider, path, version, options, labels, locale, older, onDirty, onOpenRevision, onBack, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly version: number;\n  readonly options: ViewerOptions;\n  readonly labels: DocumentsLabels;\n  readonly locale: DocumentsLocale;\n  /** The older revision on show, `undefined` for the editable file. */\n  readonly older: string | undefined;\n  readonly onDirty: (unsaved: boolean) => void;\n  readonly onOpenRevision: (revision: string) => void;\n  readonly onBack: () => void;\n  readonly onClose: () => void;\n}) {\n  return <div data-testid=\"documents-detail\" className=\"flex h-full min-h-0 flex-col md:flex-row\">\n    <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n      {/* The editor stays mounted (hidden) while a revision is on show, so its unsaved edits are kept. */}\n      <div className={cn('min-h-0 flex-1 flex-col', older === undefined ? 'flex' : 'hidden')}>\n        <FileViewer path={path} locator={provider.locate(path)} options={options} onClose={onClose} onUnsavedChange={onDirty} />\n      </div>\n      {older !== undefined && <OlderVersion provider={provider} path={path} revision={older} options={options} labels={labels} onBack={onBack} onClose={onClose} />}\n    </div>\n    <Separator className=\"md:hidden\" />\n    <Separator orientation=\"vertical\" className=\"max-md:hidden\" />\n    <aside className=\"flex max-h-[40%] min-h-0 shrink-0 flex-col overflow-hidden md:max-h-none md:w-72\">\n      <Revisions provider={provider} path={path} version={version} selected={older} locale={locale} labels={labels} onOpen={onOpenRevision} />\n    </aside>\n  </div>;\n}\n\nexport function Documents({ provider, locale, labels: given, viewers, share, blobBase: givenBase }: DocumentsProps) {\n  const labels = documentsLabels(locale, given);\n  const language: DocumentsLocale = locale === 'fr' ? 'fr' : 'en';\n  const version = useWorkspaceVersion(provider);\n  const blobBase = checkBlobBase(givenBase);\n  const tree = useFileTree(provider, version, blobBase);\n  const [path, setPath] = useState<string>();\n  // An older revision of the file on show (`undefined`: the editable file).\n  const [pinned, setPinned] = useState<{ readonly path: string; readonly revision: string }>();\n  // The file's unsaved edits, as its viewer reports them. A change of file or a close that would drop them asks first.\n  const dirty = useRef(false);\n  const onDirty = useCallback((unsaved: boolean) => { dirty.current = unsaved; }, []);\n  const mayLeave = () => !dirty.current || window.confirm(labels.discardChanges);\n  const options = useMemo<ViewerOptions>(() => ({ client: provider, identity: provider.identity, blobBase, ...(viewers ? { viewers } : {}), ...(share ? { share } : {}) }), [provider, viewers, share, blobBase]);\n  const choose = (next: string) => {\n    if (next === path || !mayLeave()) return;\n    setPath(next);\n    setPinned(undefined);\n  };\n  const closeFile = () => { if (!mayLeave()) return; setPath(undefined); setPinned(undefined); };\n  const list = tree ? <div className=\"min-h-0\">\n    <FileTreeView controller={tree} onOpen={choose} selectedPath={path} locale={language} upload={false} history={false} />\n  </div> : null;\n  const older = path !== undefined && pinned?.path === path ? pinned.revision : undefined;\n  // `null` (nothing chosen) is what lets a phone show the list alone: ListDetail stacks the detail only when there is one.\n  const detail = path === undefined ? null\n    : <DocumentDetail key={path} provider={provider} path={path} version={version} options={options} labels={labels} locale={language} older={older}\n      onDirty={onDirty} onOpenRevision={revision => setPinned({ path, revision })} onBack={() => setPinned(undefined)} onClose={closeFile} />;\n  return <DocumentsWords locale={locale}>\n    <ListDetail list={list} detail={detail} onBack={closeFile} />\n  </DocumentsWords>;\n}\n",
+      "content": "'use client';\n\n// The documents screen: the workspace's Library is the list (`ListDetail`: beside the file on a wide screen, one pane at a time on a phone);\n// the chosen file opens in the same viewer the Library uses (editable where it edits); its Revisions sit beside it. Every revision row opens\n// that exact revision read-only, and « Back to editing » returns to the file. The editor stays mounted while a revision is inspected, so its\n// unsaved edits survive; leaving the file with unsaved edits asks first. Every read goes through the one `revisionProvider` the host binds.\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Separator } from '@/components/ui/separator';\nimport { createFileTreeController } from '@hachej/boring-ui-kit/file-tree';\nimport type { FileTreeController } from '@hachej/boring-ui-kit/file-tree';\nimport { FileTreeView } from '../file-tree/file-tree';\nimport type { RevisionProvider } from '@hachej/boring-files/revision';\nimport { mediaTypeOf, viewerKindOf } from '@hachej/boring-files/file-types';\nimport { checkBlobBase, withBlobPointers } from '@hachej/boring-files/blob';\nimport type { ViewerKind } from '@hachej/boring-files/file-types';\nimport { ListDetail } from '../app-shell/list-detail';\nimport { ArtifactPanel } from '../pi-app/artifact-panel';\nimport type { ArtifactDescriptor } from '../pi-artifacts/artifact';\nimport type { CustomViewers, ViewerOptions } from '../pi-app/artifact-panel';\nimport { FileViewer } from '../pi-app/file-viewer';\nimport { ImagePane } from '../viewers/image-pane';\nimport { PdfPane } from '../viewers/pdf-pane';\nimport { ViewerFrame } from '../viewers/viewer-frame';\nimport { useViewerText } from '../viewers/viewer-window';\nimport { cn } from '../utils/utils';\nimport { Revisions } from './revisions';\nimport type { DocumentsLabels } from './documents-labels';\nimport { documentsLabels, DocumentsWords } from './words';\nimport type { DocumentsLocale } from './words';\n\nexport interface DocumentsProps {\n  /** The workspace's revision provider (the files guide's `connectRevisionProvider`, or a host's own binding). Borrowed: the host disposes it. */\n  readonly provider: RevisionProvider;\n  readonly locale?: DocumentsLocale | undefined;\n  /** The block's own words, over `documentsLabels` (the viewers' words follow `locale`). */\n  readonly labels?: Partial<DocumentsLabels> | undefined;\n  /** Host viewers by kind, as for the Library (for example a canvas). */\n  readonly viewers?: CustomViewers | undefined;\n  readonly share?: ViewerOptions['share'];\n  /** Where the host serves the bytes of large files (blob pointers): a same-origin path starting with `/`, default `/_files/`. */\n  readonly blobBase?: string | undefined;\n}\n\nconst nameOf = (path: string) => path.split('/').pop() || path;\n\n/** The workspace's change feed as a counter: it moves on every change, so the listings and the revisions are read again. */\nfunction useWorkspaceVersion(provider: RevisionProvider): number {\n  const [version, setVersion] = useState(0);\n  useEffect(() => {\n    if (!provider.changes) return undefined;\n    const abort = new AbortController();\n    void (async () => {\n      try { for await (const change of provider.changes!({ signal: abort.signal })) { void change; setVersion(current => current + 1); } } catch { /* the binding ended the feed: the listings stay as they are */ }\n    })();\n    return () => abort.abort();\n  }, [provider]);\n  return version;\n}\n\n/** The Library's tree over the provider: created and disposed with the binding, read again when the workspace changes. */\nfunction useFileTree(provider: RevisionProvider, version: number, blobBase: string): FileTreeController | undefined {\n  const [tree, setTree] = useState<FileTreeController>();\n  useEffect(() => {\n    const next = createFileTreeController({ revisionProvider: withBlobPointers(provider, blobBase) });\n    setTree(next);\n    void next.refresh();\n    return () => next.dispose();\n  }, [provider, blobBase]);\n  useEffect(() => {\n    if (!tree || version === 0) return;\n    const { query, expanded } = tree.getSnapshot();\n    if (query) void tree.search(query);\n    else for (const directory of ['', ...expanded]) void tree.refresh(directory);\n  }, [tree, version]);\n  return tree;\n}\n\n/**\n * The provider as it reads one revision: every read of the returned client is the exact `revision`, over the same provider (a reload in a\n * pinned view re-reads that revision, never the latest). It is for read-only views only.\n */\nfunction pinnedProviderOf(provider: RevisionProvider, revision: string): RevisionProvider {\n  return { ...provider, read: (request, signal) => provider.read({ target: request.target, revision: { kind: 'exact', value: revision } }, signal) };\n}\n\n/** An image or PDF revision, read exactly and shown in the viewer's read-only pane. */\nfunction BinaryRevision({ provider, path, revision, kind, labels, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly revision: string;\n  readonly kind: 'image' | 'pdf';\n  readonly labels: DocumentsLabels;\n  readonly onClose: () => void;\n}) {\n  const [state, setState] = useState<{ readonly kind: 'loading' } | { readonly kind: 'failed' } | { readonly kind: 'ready'; readonly bytes: Uint8Array; readonly mediaType: string }>({ kind: 'loading' });\n  const { labels: viewer } = useViewerText();\n  useEffect(() => {\n    const abort = new AbortController();\n    setState({ kind: 'loading' });\n    provider.read({ target: provider.locate(path), revision: { kind: 'exact', value: revision } }, abort.signal).then(result => {\n      if (!abort.signal.aborted) setState(result.kind === 'available' ? { kind: 'ready', bytes: result.snapshot.bytes, mediaType: result.snapshot.mediaType } : { kind: 'failed' });\n    }, () => { if (!abort.signal.aborted) setState({ kind: 'failed' }); });\n    return () => abort.abort();\n  }, [provider, path, revision]);\n  const status = { label: viewer.readOnly, kind: 'read-only' as const };\n  if (state.kind !== 'ready') return <ViewerFrame title={nameOf(path)} status={status} onClose={onClose}>\n    <p role=\"status\" className=\"m-0 p-4 text-sm text-muted-foreground\">{state.kind === 'loading' ? labels.revisionsLoading : labels.revisionLoadFailed}</p>\n  </ViewerFrame>;\n  return kind === 'image'\n    ? <ImagePane name={nameOf(path)} mediaType={state.mediaType} bytes={state.bytes} status={status} onClose={onClose} />\n    : <PdfPane name={nameOf(path)} bytes={state.bytes} status={status} onClose={onClose} />;\n}\n\n/** One revision of the file, read-only, with « Back to editing ». Text, Markdown and HTML use the artifact panel's pinned view. */\nfunction OlderVersion({ provider, path, revision, options, labels, onBack, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly revision: string;\n  readonly options: ViewerOptions;\n  readonly labels: DocumentsLabels;\n  readonly onBack: () => void;\n  readonly onClose: () => void;\n}) {\n  const kind: ViewerKind = viewerKindOf(path);\n  const pinned = useMemo(() => pinnedProviderOf(provider, revision), [provider, revision]);\n  const type = kind === 'markdown' ? 'markdown' : kind === 'html' ? 'html' : kind === 'text' ? 'code' : undefined;\n  const artifact: ArtifactDescriptor | undefined = type === undefined ? undefined\n    : { schema: 'boring.artifact', version: 1, title: nameOf(path), type, mediaType: mediaTypeOf(path), target: provider.locate(path), revision };\n  const bar = <>\n    <div className=\"flex shrink-0 items-center gap-2 px-3 py-2\">\n      <span role=\"status\" className=\"min-w-0 flex-1 truncate text-sm font-medium\">{labels.readOnlyRevision}</span>\n      <Button variant=\"ghost\" data-testid=\"back-to-editing\" onClick={onBack}>{labels.backToEditing}</Button>\n    </div>\n    <Separator />\n  </>;\n  let body;\n  if (artifact) body = <ArtifactPanel active={{ descriptor: artifact, follow: false }} versions={[]} options={{ ...options, client: pinned }} onSelect={onBack} onClose={onClose} />;\n  else if (kind === 'image' || kind === 'pdf') body = <BinaryRevision provider={provider} path={path} revision={revision} kind={kind} labels={labels} onClose={onClose} />;\n  else body = <ViewerFrame title={nameOf(path)} onClose={onClose}><p role=\"status\" className=\"m-0 p-4 text-sm text-muted-foreground\">{labels.unsupportedPreview}</p></ViewerFrame>;\n  return <div data-testid=\"revision-view\" data-kind={kind} data-revision={revision} className=\"flex h-full min-h-0 flex-1 flex-col\">\n    {bar}\n    <div className=\"flex min-h-0 flex-1 flex-col\">{body}</div>\n  </div>;\n}\n\nfunction DocumentDetail({ provider, path, version, options, labels, locale, older, onDirty, onOpenRevision, onBack, onClose }: {\n  readonly provider: RevisionProvider;\n  readonly path: string;\n  readonly version: number;\n  readonly options: ViewerOptions;\n  readonly labels: DocumentsLabels;\n  readonly locale: DocumentsLocale;\n  /** The older revision on show, `undefined` for the editable file. */\n  readonly older: string | undefined;\n  readonly onDirty: (unsaved: boolean) => void;\n  readonly onOpenRevision: (revision: string) => void;\n  readonly onBack: () => void;\n  readonly onClose: () => void;\n}) {\n  return <div data-testid=\"documents-detail\" className=\"flex h-full min-h-0 flex-col md:flex-row\">\n    <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n      {/* The editor stays mounted (hidden) while a revision is on show, so its unsaved edits are kept. */}\n      <div className={cn('min-h-0 flex-1 flex-col', older === undefined ? 'flex' : 'hidden')}>\n        <FileViewer path={path} locator={provider.locate(path)} options={options} onClose={onClose} onUnsavedChange={onDirty} />\n      </div>\n      {older !== undefined && <OlderVersion provider={provider} path={path} revision={older} options={options} labels={labels} onBack={onBack} onClose={onClose} />}\n    </div>\n    <Separator className=\"md:hidden\" />\n    <Separator orientation=\"vertical\" className=\"max-md:hidden\" />\n    <aside className=\"flex max-h-[40%] min-h-0 shrink-0 flex-col overflow-hidden md:max-h-none md:w-72\">\n      <Revisions provider={provider} path={path} version={version} selected={older} locale={locale} labels={labels} onOpen={onOpenRevision} />\n    </aside>\n  </div>;\n}\n\nexport function Documents({ provider, locale, labels: given, viewers, share, blobBase: givenBase }: DocumentsProps) {\n  const labels = documentsLabels(locale, given);\n  const language: DocumentsLocale = locale === 'fr' ? 'fr' : 'en';\n  const version = useWorkspaceVersion(provider);\n  const blobBase = checkBlobBase(givenBase);\n  const tree = useFileTree(provider, version, blobBase);\n  const [path, setPath] = useState<string>();\n  // An older revision of the file on show (`undefined`: the editable file).\n  const [pinned, setPinned] = useState<{ readonly path: string; readonly revision: string }>();\n  // The file's unsaved edits, as its viewer reports them. A change of file or a close that would drop them asks first.\n  const dirty = useRef(false);\n  const onDirty = useCallback((unsaved: boolean) => { dirty.current = unsaved; }, []);\n  const mayLeave = () => !dirty.current || window.confirm(labels.discardChanges);\n  const options = useMemo<ViewerOptions>(() => ({ client: provider, identity: provider.identity, blobBase, ...(viewers ? { viewers } : {}), ...(share ? { share } : {}) }), [provider, viewers, share, blobBase]);\n  const choose = (next: string) => {\n    if (next === path || !mayLeave()) return;\n    setPath(next);\n    setPinned(undefined);\n  };\n  const closeFile = () => { if (!mayLeave()) return; setPath(undefined); setPinned(undefined); };\n  const list = tree ? <div className=\"min-h-0\">\n    <FileTreeView controller={tree} onOpen={choose} selectedPath={path} locale={language} upload={false} history={false} />\n  </div> : null;\n  const older = path !== undefined && pinned?.path === path ? pinned.revision : undefined;\n  // `null` (nothing chosen) is what lets a phone show the list alone: ListDetail stacks the detail only when there is one.\n  const detail = path === undefined ? null\n    : <DocumentDetail key={path} provider={provider} path={path} version={version} options={options} labels={labels} locale={language} older={older}\n      onDirty={onDirty} onOpenRevision={revision => setPinned({ path, revision })} onBack={() => setPinned(undefined)} onClose={closeFile} />;\n  return <DocumentsWords locale={locale}>\n    <ListDetail list={list} detail={detail} onBack={closeFile} />\n  </DocumentsWords>;\n}\n",
       "type": "registry:component",
       "target": "components/documents/documents.tsx"
     },

package/r/feedback-preview.json

@@ -4,7 +4,7 @@
   "title": "Feedback preview",
   "description": "PreviewBanner: a live, reversible preview of a change in the page (Approve / Discard) over `@hachej/boring-feedback/preview`, whose subagent calls models through a host gateway. Separate from `feedback` so annotation-only apps do not install the model SDK; install `feedback` first (its styles cover the banner).",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.11",
+    "@hachej/boring-feedback@^0.4.12",
     "@earendil-works/pi-ai@~1.2.0",
     "react@^19.0.0"
   ],

package/r/feedback.json

@@ -4,16 +4,17 @@
   "title": "Feedback",
   "description": "Feedback from the chat composer: one Feedback button starts feedback mode on the application page (hover, click to pin a numbered note, hold ⌥ to use the app, optional voice), and one chip carries the notes to the next message. FeedbackBar, NoteBubble, FeedbackChip with its review, useComposerFeedback for the pi-chat composer, and PickerOverlay styles. Optional, not mounted by default: PointButton, AnnotateSheet, FeedbackList and FeedbackReport. Picking, masking, anchoring and placement stay in @hachej/boring-feedback/page and /ui, so restyling cannot weaken them.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.11",
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-feedback@^0.4.12",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/utils.json",
     "button",
     "toggle",
     "badge",
@@ -25,7 +26,7 @@
   "files": [
     {
       "path": "registry/feedback/feedback-session.tsx",
-      "content": "// The feedback session's look (FEEDBACK.md, \"UX\"): the note pin beside a picked element (NoteBubble: a text field with a mic inside it),\n// the slim bar and the chip with its review (optional, for hosts with no chat). Everything they show and do is the headless\n// `createFeedbackSession` from `@hachej/boring-feedback/ui` (hover labels, pins, steps, the draft and Send come from there, through the\n// privacy policy); this file is how it looks. `useComposerFeedback` adapts a session to the chat composer's optional `feedback` prop\n// (registry/pi-chat): ONE annotate toggle and a count chip, structurally, so neither item imports the other.\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\nimport { MicIcon, SquareIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Badge } from '@/components/ui/badge';\nimport { Card } from '@/components/ui/card';\nimport { Textarea } from '@/components/ui/textarea';\nimport { readableElement } from '@hachej/boring-feedback/format';\nimport { createVoiceCapture, type VoiceCapture } from '@hachej/boring-feedback/page';\nimport { pinMark, type FeedbackSession, type FeedbackSessionSnapshot, type SessionNote } from '@hachej/boring-feedback/ui';\nimport { useHoldToRecord } from '../pi-chat/use-hold-to-record';\nimport { useExternal } from './use-external';\nimport { plainElement, withLabels, type FeedbackLabels } from './feedback-labels';\n\nconst plural = (count: number, one: string, many: string): string => `${count} ${count === 1 ? one : many}`;\n/** Notes the chip and the bar count: every note that says something (not a pin still being typed), plus the general note. */\nexport function noteCount(state: FeedbackSessionSnapshot): number {\n  return state.notes.filter(note => note.text.trim()).length + (state.general.trim() ? 1 : 0);\n}\n\nexport interface FeedbackBarProps {\n  readonly session: FeedbackSession;\n  readonly className?: string;\n  /** Docked under the chat composer (the composer's `feedback.bar`) instead of floating at the top of the page. */\n  readonly docked?: boolean;\n}\n\n/** Pins dropped while recording that have no note yet (nothing transcribed for them, or transcription failed). */\nexport function emptyPinCount(state: FeedbackSessionSnapshot): number {\n  return state.notes.filter(note => note.recorded && !note.text.trim()).length;\n}\n\n/** `mm:ss` since `since` (ms), for the recording timer. */\nexport function elapsed(ms: number): string {\n  const seconds = Math.max(0, Math.floor(ms / 1000));\n  return `${String(Math.floor(seconds / 60)).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;\n}\n\n/** The running time of a recording, from when the bar saw it start; 00:00 when not recording. */\nfunction useRecordingTime(recording: boolean): string {\n  const [since, setSince] = useState<number | undefined>(undefined);\n  const [, tick] = useState(0);\n  useEffect(() => {\n    if (!recording) { setSince(undefined); return; }\n    setSince(Date.now());\n    const timer = setInterval(() => tick(value => value + 1), 500);\n    return () => clearInterval(timer);\n  }, [recording]);\n  return elapsed(since === undefined ? 0 : Date.now() - since);\n}\n\nfunction barHint(state: FeedbackSessionSnapshot): string {\n  if (state.phase === 'processing') return state.transcribing ? 'Transcribing…' : 'Preparing your feedback…';\n  if (state.problem) return state.problem;\n  if (state.voice.kind === 'starting') return 'Allow the microphone if your browser asks…';\n  if (state.voice.kind === 'recording') return state.using ? 'Recording — using the app' : 'Recording — point and talk';\n  return state.using ? 'Using the app: your clicks are recorded as steps' : 'Click what you want to comment on';\n}\n\n/**\n * Feedback mode's bar: `● Feedback · N notes · 🎙 Record · Use app · Done · ✕`. While recording: a red dot, the\n * running time, \"Recording — point and talk\" and Stop. A refused microphone is said in the bar itself, never only in a tooltip.\n */\nexport function FeedbackBar({ session, className, docked = false }: FeedbackBarProps) {\n  const state = useExternal(session);\n  const recording = state.voice.kind === 'recording';\n  const time = useRecordingTime(recording && (state.phase === 'active' || state.phase === 'processing'));\n  if (state.phase !== 'active' && state.phase !== 'processing') return null;\n  const processing = state.phase === 'processing';\n  const pins = emptyPinCount(state);\n  const voiceProblem = state.voice.kind === 'refused' ? state.voice : undefined;\n  return <Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"toolbar\" aria-label=\"Feedback mode\" data-testid=\"feedback-bar\" data-docked={docked ? 'true' : 'false'}\n    data-using={state.using ? 'true' : 'false'} data-recording={recording ? 'true' : 'false'} data-transcribing={state.transcribing ? 'true' : 'false'}\n    className={['boring-feedback-bar', className].filter(Boolean).join(' ')}\n    onKeyDown={event => { if (event.key === 'Escape' && state.bubble) { event.stopPropagation(); session.cancelBubble(); } }}>\n    <span className=\"boring-feedback-bar-title\">Feedback</span>\n    <span className=\"boring-feedback-bar-meta\" data-testid=\"feedback-bar-count\">{plural(noteCount(state), 'note', 'notes')}{pins ? ` · ${plural(pins, 'pin', 'pins')}` : ''}</span>\n    {state.voiceAvailable && <Toggle data-testid=\"feedback-voice\" pressed={recording}\n      disabled={processing || state.voice.kind === 'starting' || state.voice.kind === 'stopping'} title={recording ? 'Stop recording' : 'Record your voice while you point: each click drops a pin, what you say becomes its note'}\n      onPressedChange={() => { void session.toggleVoice(); }}>\n      {recording ? <><SquareIcon data-icon=\"inline-start\" aria-hidden=\"true\" />Stop</> : <><MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{state.voice.kind === 'starting' ? 'Starting…' : state.voice.kind === 'stopping' ? 'Stopping…' : 'Record'}</>}\n    </Toggle>}\n    {recording && <Badge variant=\"destructive\" role=\"status\" data-testid=\"feedback-recording\">\n      <span className=\"boring-feedback-timer\" data-testid=\"feedback-recording-time\">{time}</span></Badge>}\n    <span className=\"boring-feedback-hint\" role=\"status\" aria-live=\"polite\" data-testid=\"feedback-bar-hint\">{barHint(state)}</span>\n    {voiceProblem && <span className=\"boring-feedback-voice-problem\" role=\"alert\" data-testid=\"feedback-voice-problem\" data-code={voiceProblem.code}>{voiceProblem.reason}</span>}\n    {!processing && <Toggle data-testid=\"feedback-use-app\" pressed={state.useToggle} onPressedChange={pressed => session.setUseToggle(pressed)}>Use app</Toggle>}\n    <Button variant=\"default\" data-testid=\"feedback-done\" disabled={processing} onClick={() => { void session.done(); }}>Done</Button>\n    <Button variant=\"ghost\" size=\"icon\" data-testid=\"feedback-discard\" aria-label=\"Discard feedback\" title=\"Discard feedback\" disabled={processing} onClick={() => session.discard()}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </Card>;\n}\n\nconst BUBBLE_WIDTH = 280;\n/** Pixels at the bottom of the viewport taken by comment mode's banner on a phone (CommentBanner, `data-feedback-point-bar=\"bottom\"`), plus a gap; 0 without it. */\nexport function pointBarInset(document: Document): number {\n  const bar = document.querySelector('[data-feedback-point-bar=\"bottom\"]');\n  const height = document.defaultView?.innerHeight ?? 768;\n  return bar ? Math.max(0, height - bar.getBoundingClientRect().top + 8) : 0;\n}\n\n/**\n * Beside the element: below it when the bubble (`size`, its measured height once drawn) fits above point mode's bar (if any), else\n * above it, else as low as it fits. Every branch is clamped to the space above the bar, so the bubble never covers it; a bubble taller\n * than that space scrolls inside it.\n */\nfunction bubblePlace(element: Element, size = 120): CSSProperties {\n  const view = element.ownerDocument.defaultView;\n  const width = view?.innerWidth ?? 1024, height = (view?.innerHeight ?? 768) - pointBarInset(element.ownerDocument);\n  const rect = element.getBoundingClientRect();\n  const left = Math.min(Math.max(8, rect.left), Math.max(8, width - BUBBLE_WIDTH - 8));\n  const below = rect.bottom + 8;\n  const above = rect.top - size - 8;\n  const lowest = Math.max(8, height - size);\n  const top = Math.min(below + size <= height ? below : above >= 8 ? above : lowest, lowest);\n  return { position: 'fixed', top, left, width: Math.min(BUBBLE_WIDTH, width - 16), maxHeight: Math.max(0, height - top), overflowY: 'auto', boxSizing: 'border-box' };\n}\n\ntype PinVoice = 'idle' | 'starting' | 'recording' | 'transcribing';\n\n/**\n * The mic inside the pin's field, held like the chat's voice message (`useHoldToRecord`, the same gesture policy as the composer and the\n * shell): press and hold to talk (Space or Enter from the keyboard), release and the transcript is added to the note and the note is kept\n * (with `useSendEachNote`, sent at once). A slide off the button, Escape or a hidden page drops the recording. A refused microphone, nothing\n * heard or a rejected transcription is said under the field and never touches the typed text. One capture (`createVoiceCapture`) per pin.\n */\nfunction PinMic({ session, transcribe, words }: { readonly session: FeedbackSession; readonly transcribe: PinTranscribe; readonly words: FeedbackLabels }) {\n  const [phase, setPhase] = useState<PinVoice>('idle');\n  const [problem, setProblem] = useState<string | undefined>(undefined);\n  const capture = useRef<VoiceCapture | null>(null);\n  const run = useRef(0);\n  const work = useRef<AbortController | null>(null);\n  // Let go before the microphone was ready: the recording ends as soon as it starts.\n  const released = useRef(false);\n  capture.current ??= createVoiceCapture();\n  // A closed pin releases the microphone and drops a transcription still in flight.\n  useEffect(() => () => { run.current += 1; capture.current?.cancel(); work.current?.abort(); }, []);\n  const finish = async (): Promise<void> => {\n    const attempt = run.current;\n    setPhase('transcribing');\n    const recording = await capture.current!.stop().catch(() => null);\n    if (attempt !== run.current) return;\n    if (!recording) { setPhase('idle'); setProblem(words.voiceNothing); return; }\n    const abort = new AbortController();\n    work.current = abort;\n    try {\n      const spoken = (await transcribe(recording.audio, abort.signal)).trim();\n      if (attempt !== run.current) return;\n      if (!spoken) { setProblem(words.voiceNothing); return; }\n      // Appended to what is typed NOW (the person may have kept typing), never replacing it.\n      const typed = session.getSnapshot().bubble?.text ?? '';\n      session.setBubbleText(`${typed}${typed === '' || /\\s$/.test(typed) ? '' : ' '}${spoken}`);\n      session.saveBubble();\n    } catch { if (attempt === run.current) setProblem(words.voiceFailed); }\n    finally { if (work.current === abort) work.current = null; if (attempt === run.current) setPhase('idle'); }\n  };\n  const hold = useHoldToRecord({\n    // Called straight from the press, so the browser ties the permission prompt to the person's gesture.\n    start: () => {\n      const attempt = ++run.current;\n      released.current = false;\n      setProblem(undefined); setPhase('starting');\n      void capture.current!.start().then(result => {\n        if (attempt !== run.current) return;\n        if (result.kind === 'refused') { setPhase('idle'); setProblem(result.reason); return; }\n        setPhase('recording');\n        if (released.current) void finish();\n      });\n    },\n    finish: () => { if (phase === 'recording') void finish(); else released.current = true; },\n    cancel: () => { run.current += 1; capture.current?.cancel(); setPhase('idle'); },\n  }, phase === 'transcribing');\n  const recording = phase === 'recording';\n  return <>\n    <Button {...hold} variant=\"ghost\" size=\"icon\" className=\"boring-feedback-pin-mic min-h-11 min-w-11 touch-none select-none\" data-testid=\"feedback-bubble-mic\" data-state={phase}\n      aria-pressed={recording || phase === 'starting'} aria-label={recording ? words.voiceStop : words.voiceRecord} title={recording ? words.voiceStop : words.voiceRecord} disabled={phase === 'transcribing'}>\n      {phase === 'transcribing' ? <span role=\"status\" aria-label={words.voiceTranscribing}>…</span>\n        : recording ? <SquareIcon data-icon=\"inline-start\" aria-hidden=\"true\" /> : <MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n    </Button>\n    {problem && <span className=\"boring-feedback-voice-problem\" role=\"alert\" data-testid=\"feedback-bubble-voice-problem\">{problem}</span>}\n  </>;\n}\n\n/** Turns a recording into text (`signal` aborts when the pin closes); a rejection keeps what was typed. */\nexport type PinTranscribe = (audio: Blob, signal: AbortSignal) => Promise<string>;\n\n/**\n * The pin beside a picked element: a text field with a mic inside it, \"Add note\" (Enter) and Cancel (Esc). Enter saves, Shift-Enter for a\n * new line, Esc discards the pin. The element is named in plain words (`plainElement`). On a phone it keeps clear of the comment banner. `transcribe` turns the mic's recording into text; without it there is no mic.\n */\nexport function NoteBubble({ session, labels, transcribe }: { readonly session: FeedbackSession; readonly labels?: Partial<FeedbackLabels>; readonly transcribe?: PinTranscribe }) {\n  const state = useExternal(session);\n  const words = withLabels(labels);\n  const bubble = state.bubble;\n  const field = useRef<HTMLTextAreaElement>(null);\n  const [place, setPlace] = useState<CSSProperties | undefined>(undefined);\n  const [, redraw] = useState(0);\n  const [announce, setAnnounce] = useState('');\n  const box = useRef<HTMLDivElement>(null);\n  // The bubble's natural height (its content plus borders), not the height it is clamped to, so it grows back when there is room.\n  const size = (): number | undefined => (box.current ? box.current.scrollHeight + box.current.offsetHeight - box.current.clientHeight : 0) || undefined;\n  useLayoutEffect(() => { if (bubble) setPlace(bubblePlace(bubble.element, size())); }, [bubble?.noteId, bubble?.element]);\n  // Once drawn, place it again with its real height (taller with 44px touch targets and wrapped buttons).\n  useLayoutEffect(() => {\n    if (!bubble || !place || !box.current) return;\n    const next = bubblePlace(bubble.element, size());\n    if (next.top !== place.top || next.left !== place.left) setPlace(next);\n  });\n  useEffect(() => { if (bubble) field.current?.focus({ preventScroll: true }); }, [bubble?.noteId]);\n  useEffect(() => {\n    if (!bubble) return;\n    const view = bubble.element.ownerDocument.defaultView;\n    const follow = () => { setPlace(bubblePlace(bubble.element, size())); redraw(value => value + 1); };\n    view?.addEventListener('scroll', follow, { capture: true, passive: true });\n    view?.addEventListener('resize', follow);\n    return () => { view?.removeEventListener('scroll', follow, { capture: true }); view?.removeEventListener('resize', follow); };\n  }, [bubble?.noteId, bubble?.element]);\n  // A polite live region outlives the bubble, so the cancellation is heard even though the dialog is gone.\n  const cancel = (): void => { session.cancelSelection(); setAnnounce(words.selectionCancelled); };\n  const live = <span data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"status\" aria-live=\"polite\" className=\"boring-feedback-sr\" data-testid=\"feedback-bubble-announce\"\n    style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{announce}</span>;\n  if (!bubble || state.phase !== 'active') return state.phase === 'active' ? live : null;\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing && event.target === field.current) { event.preventDefault(); session.saveBubble(); }\n    else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); session.cancelBubble(); }\n  };\n  return <>{live}<Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"dialog\" aria-label={`Note ${bubble.number}`} data-testid=\"feedback-bubble\" data-note={bubble.number}\n    ref={box} className=\"boring-feedback-bubble\" style={place} onKeyDown={onKeyDown}>\n    <span className=\"boring-feedback-bubble-head\"><span className=\"boring-feedback-pin\" aria-hidden=\"true\">{pinMark(bubble.number)}</span>\n      <span className=\"boring-feedback-bubble-label\" data-testid=\"feedback-bubble-label\">{plainElement(bubble.label, words)}</span></span>\n    <span className=\"boring-feedback-pin-field\">\n      <Textarea ref={field} data-testid=\"feedback-bubble-input\" rows={2} placeholder={words.bubblePlaceholder} aria-label={words.bubblePlaceholder} value={bubble.text}\n        onChange={event => session.setBubbleText(event.target.value)} />\n      {transcribe && <PinMic key={bubble.noteId} session={session} transcribe={transcribe} words={words} />}\n    </span>\n    <span className=\"boring-feedback-bubble-actions\">\n      <Button variant=\"ghost\" className=\"min-h-11 min-w-11\" data-testid=\"feedback-cancel-selection\" onClick={cancel}>{words.cancelSelection}</Button>\n      <Button variant=\"default\" className=\"min-h-11 min-w-11\" data-testid=\"feedback-bubble-save\" onClick={() => session.saveBubble()}>{words.add}</Button>\n    </span>\n  </Card></>;\n}\n\nexport interface FeedbackChipProps {\n  readonly session: FeedbackSession;\n  /** Opens the review on first render (journeys). */\n  readonly defaultOpen?: boolean;\n  /** Offer Copy report in the review: the way to use feedback with no chat and no store. */\n  readonly copy?: boolean;\n}\n\n/** The one composer chip after Done: `💬 Feedback · 3 notes · /settings/:section`. Click opens the review; × discards. */\nexport function FeedbackChip({ session, defaultOpen = false, copy = false }: FeedbackChipProps) {\n  const state = useExternal(session);\n  const [open, setOpen] = useState(defaultOpen);\n  const chip = useRef<HTMLSpanElement>(null);\n  if (state.phase !== 'review') return null;\n  const count = noteCount(state);\n  const pins = emptyPinCount(state);\n  const refusal = state.send.kind !== 'idle' && state.send.kind !== 'sending' && state.send.kind !== 'saved' ? state.send.reason : undefined;\n  return <span ref={chip} data-boring=\"feedback\" data-feedback-ignore=\"\" data-testid=\"feedback-chip\" data-send={state.send.kind} className=\"boring-feedback-chip\">\n    <Button variant=\"outline\" className=\"min-w-0 max-w-full\" data-testid=\"feedback-chip-open\" aria-expanded={open} onClick={() => setOpen(value => !value)}\n      title={refusal ?? 'Review your feedback before sending'}>\n      <span aria-hidden=\"true\">💬</span> Feedback · {plural(count, 'note', 'notes')}{pins ? ` · ${plural(pins, 'pin', 'pins')} to describe` : ''} · <span className=\"boring-feedback-chip-route\">{state.route}</span>\n    </Button>\n    <Button variant=\"ghost\" size=\"icon-sm\" data-testid=\"feedback-chip-discard\" aria-label=\"Discard feedback\" title=\"Discard feedback\" onClick={() => { session.highlight(undefined); session.discard(); }}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n    {state.problem && <span className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-chip-voice\">{state.problem}</span>}\n    {refusal && <span className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-chip-problem\">{refusal}</span>}\n    {/* In the page's body: the chip may sit in a transformed chat bar, where a fixed panel would not be placed against the viewport. */}\n    {open && createPortal(<FeedbackReview session={session} anchor={chip.current} copy={copy} onClose={() => setOpen(false)} />, chip.current?.ownerDocument.body ?? document.body)}\n  </span>;\n}\n\nfunction reviewPlace(anchor: Element | null): CSSProperties | undefined {\n  if (!anchor) return undefined;\n  const view = anchor.ownerDocument.defaultView;\n  const width = view?.innerWidth ?? 1024, height = view?.innerHeight ?? 768;\n  const rect = anchor.getBoundingClientRect();\n  const panel = Math.min(416, width - 24);\n  return { position: 'fixed', left: Math.min(Math.max(12, rect.left), width - panel - 12), bottom: Math.max(12, height - rect.top + 8), width: panel };\n}\n\n/** The compact review: notes in order, editable and removable; hovering a note highlights its element in the page, or says it is not here. */\nexport function FeedbackReview({ session, anchor = null, copy = false, onClose }: { readonly session: FeedbackSession; readonly anchor?: Element | null; readonly copy?: boolean; readonly onClose: () => void }) {\n  const state = useExternal(session);\n  const [where, setWhere] = useState<Readonly<Record<number, 'shown' | 'not-on-page'>>>({});\n  const [place, setPlace] = useState<CSSProperties | undefined>(undefined);\n  useLayoutEffect(() => { setPlace(reviewPlace(anchor)); }, [anchor]);\n  useEffect(() => () => { session.highlight(undefined); }, [session]);\n  const hover = (id: number | undefined): void => {\n    const result = session.highlight(id);\n    if (id !== undefined && result !== 'none') setWhere(value => ({ ...value, [id]: result }));\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => { if (event.key === 'Escape') { event.stopPropagation(); onClose(); } };\n  return <Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"dialog\" aria-label=\"Review feedback\" data-testid=\"feedback-review\" className=\"boring-feedback-review\"\n    style={place} onKeyDown={onKeyDown} onMouseLeave={() => hover(undefined)}>\n    <header className=\"boring-feedback-sheet-header\"><h2>Feedback · {state.route}</h2>\n      <Button variant=\"ghost\" size=\"icon\" aria-label=\"Close review\" title=\"Close review\" data-testid=\"feedback-review-close\" onClick={onClose}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button></header>\n    {state.problem && <p className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-review-problem\">{state.problem}</p>}\n    <ol className=\"boring-feedback-notes\">\n      {state.notes.map(note => <li key={note.id} data-testid=\"feedback-review-note\" data-note={note.number} data-where={where[note.id]}\n        onMouseEnter={() => hover(note.id)} onFocus={() => hover(note.id)}>\n        <span className=\"boring-feedback-note-head\"><span className=\"boring-feedback-pin\" aria-hidden=\"true\">{pinMark(note.number)}</span>\n          <ElementName note={note} />\n          {note.from === 'voice' && <Badge variant=\"secondary\" data-testid=\"feedback-review-voice\">voice</Badge>}\n          {where[note.id] === 'not-on-page' && <Badge variant=\"secondary\" data-testid=\"feedback-review-elsewhere\">not on this page</Badge>}\n          <Button variant=\"ghost\" size=\"icon\" aria-label={`Remove note ${note.number}`} title={`Remove note ${note.number}`} data-testid=\"feedback-review-remove\" onClick={() => session.removeNote(note.id)}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button></span>\n        <Textarea rows={2} aria-label={`Note ${note.number}`} data-testid=\"feedback-review-text\" value={note.text} placeholder={note.recorded ? 'Nothing was said here: type a note, or remove the pin' : undefined}\n          onChange={event => session.setNoteText(note.id, event.target.value)} />\n      </li>)}\n    </ol>\n    <label className=\"boring-feedback-field\"><span>General note</span>\n      <Textarea rows={2} data-testid=\"feedback-review-general\" placeholder=\"Anything else? (optional)\" value={state.general} onChange={event => session.setGeneral(event.target.value)} /></label>\n    <p className=\"boring-feedback-meta\">{state.stepCount > 1 ? `${plural(state.stepCount, 'step', 'steps')} recorded between the notes. ` : ''}{copy ? 'Copy the report and paste it anywhere.' : 'Sent with your next message.'}</p>\n    {copy && <div className=\"boring-feedback-actions\">\n      <Button variant=\"default\" data-testid=\"feedback-copy\" onClick={() => { void session.copy(); }}>Copy report</Button></div>}\n    {copy && <p role=\"status\" aria-live=\"polite\" className=\"boring-feedback-status\" data-testid=\"feedback-status\" data-copy={state.copy.kind}>\n      {state.copy.kind === 'copied' ? 'Report copied. Paste it anywhere.' : state.copy.kind === 'manual' ? 'The clipboard is not available here: select the report below and copy it.' : state.copy.kind === 'refused' ? state.copy.reason : ''}</p>}\n    {copy && state.copy.kind === 'manual' && <Textarea readOnly className=\"boring-feedback-manual\" data-testid=\"feedback-manual-copy\" value={state.copy.text} rows={6} onFocus={event => event.currentTarget.select()} />}\n    {copy && state.copy.kind === 'copied' && <details className=\"boring-feedback-copied\"><summary>Copied report</summary><pre data-testid=\"feedback-copy-text\">{state.copy.text}</pre></details>}\n  </Card>;\n}\n\n/**\n * A note's element as one calm line: the readable name (semibold) and the file basename (muted, monospace), the full path in the\n * tooltip. The same reading as the pi-chat feedback card's element line (`readableElement` from `@hachej/boring-feedback/format`).\n */\nexport function ElementName({ note }: { readonly note: SessionNote }) {\n  const readable = note.fallback ? readableElement(note.fallback, note.source) : { name: note.label };\n  return <span className=\"boring-feedback-element\" data-testid=\"feedback-review-element\" title={'path' in readable && readable.path ? readable.path : note.label}>\n    <span className=\"boring-feedback-element-name\" data-testid=\"feedback-review-name\">{readable.name}</span>\n    {'file' in readable && readable.file && <span className=\"boring-feedback-element-file\" data-testid=\"feedback-review-file\">{readable.file}</span>}\n  </span>;\n}\n\n/** What `useComposerFeedback` returns: the structural shape of pi-chat's `ComposerFeedback`. */\nexport interface ComposerFeedbackProp {\n  readonly annotate: () => void;\n  readonly active: boolean;\n  readonly count: number;\n  readonly clear: () => void;\n  readonly attach: (text: string) => Promise<{ readonly kind: 'ok'; readonly text: string } | { readonly kind: 'refused'; readonly reason: string }>;\n  readonly sent: () => void;\n}\n\n/** A Markdown fence longer than any backtick run in the text. */\nfunction fenced(text: string): string {\n  const longest = Math.max(0, ...[...text.matchAll(/`+/g)].map(match => match[0].length));\n  const fence = '`'.repeat(Math.max(3, longest + 1));\n  return `${fence}markdown\\n${text.endsWith('\\n') ? text : `${text}\\n`}${fence}`;\n}\n\n/** Touch or a compact screen: the panel covers the app and there is no hover, so annotating is point mode (use the app, then point). */\nfunction pointsInstead(): boolean {\n  return globalThis.matchMedia?.('(pointer: coarse)').matches === true || (globalThis.innerWidth ?? 1024) < 768;\n}\n\n/**\n * Starts (or resumes) annotating in either mode, with Esc as a way out. The session swallows Esc on the page (it only closes a pin), so\n * this listens on the window's capture phase BEFORE the session starts, and ends the mode (Done: the notes wait for Send) when no pin is\n * open. From the review, `resume` keeps the notes, anchors and save guards: a second round adds to the same draft.\n */\nfunction startAnnotating(session: FeedbackSession, mode: 'point' | undefined = pointsInstead() ? 'point' : undefined, fresh = true): void {\n  if (fresh) sentInRound.delete(session);\n  const view = globalThis.window;\n  const onKey = (event: globalThis.KeyboardEvent): void => {\n    // Esc that ends annotating is spent: a host layer around the composer (a panel that closes on Esc) must not also react to it.\n    if (event.key === 'Escape' && !session.getSnapshot().bubble) { event.preventDefault(); event.stopPropagation(); void session.done(); }\n  };\n  view?.addEventListener('keydown', onKey, { capture: true });\n  session.resume(mode ? { mode } : {});\n  const stop = session.subscribe(() => {\n    if (session.getSnapshot().phase === 'active') return;\n    view?.removeEventListener('keydown', onKey, { capture: true });\n    stop();\n  });\n}\n\n/**\n * The composer's `feedback` prop for a session: ONE annotate toggle (targeting with a hover highlight; point mode on touch and compact\n * screens, and again after Esc to add more), a count of the notes taken, and Send attaching them: a saved report as its `@` mention (the host's mention resolver inlines\n * the stored report with the person's access), otherwise the rendered report inline in a fenced block. Pair it with `NoteBubble`.\n */\nexport function useComposerFeedback(session: FeedbackSession | undefined): ComposerFeedbackProp | undefined {\n  const state = useSyncState(session);\n  if (!session || !state) return undefined;\n  const open = state.phase === 'active' || state.phase === 'processing';\n  return {\n    annotate: () => {\n      const phase = session.getSnapshot().phase;\n      if (phase === 'active') void session.done();\n      else if (phase === 'idle' || phase === 'review') startAnnotating(session);\n    },\n    active: open,\n    // A note being typed in the pin counts: Send saves it.\n    count: noteCount(state) + (state.bubble?.fresh && state.bubble.text.trim() ? 1 : 0),\n    clear: () => { session.highlight(undefined); session.discard(); },\n    attach: async text => {\n      // Send while annotating ends it first: the pin being typed is kept.\n      if (session.getSnapshot().phase === 'active') await session.done();\n      const attached = await session.attach();\n      if (attached.kind === 'refused') return attached;\n      const body = attached.kind === 'mention' ? `@${attached.path}` : fenced(attached.text);\n      return { kind: 'ok', text: text.trim() ? `${text.trimEnd()}\\n\\n${body}` : body };\n    },\n    sent: () => session.sent(),\n  };\n}\n\n/** Notes sent one by one in the current round of comment mode (`useSendEachNote`), for the banner; a new round starts at zero. */\nconst sentInRound = new WeakMap<FeedbackSession, number>();\nexport const notesSent = (session: FeedbackSession): number => sentInRound.get(session) ?? 0;\n\n/**\n * Each note goes to the chat the moment it is added: its element and text as one message (`send`, the chat's follow-up send), and\n * comment mode stays on for the next note. Nothing waits in a hidden batch, and the agent's reply follows in the conversation. Without\n * `send`, the notes wait for the person's next message as before. A refused report or a failed send stays in the review, where the composer shows it.\n */\nexport function useSendEachNote(session: FeedbackSession | undefined, send: ((text: string) => Promise<unknown>) | undefined): void {\n  const state = useSyncState(session);\n  const busy = useRef(false);\n  useEffect(() => {\n    if (!session || !send || !state || busy.current) return;\n    if (state.phase !== 'active' || state.bubble || !state.notes.some(note => note.text.trim())) return;\n    busy.current = true;\n    const mode = state.mode === 'point' ? 'point' : undefined;\n    void (async () => {\n      let again = false;\n      try {\n        await session.done();\n        const attached = await session.attach();\n        if (attached.kind === 'refused') return;\n        const submission = await send(attached.kind === 'mention' ? `@${attached.path}` : fenced(attached.text)).catch(() => undefined);\n        if (submission === false || submission === undefined || submission === null) return;\n        sentInRound.set(session, notesSent(session) + noteCount(session.getSnapshot()));\n        session.sent();\n        again = true;\n      } finally {\n        busy.current = false;\n        if (again) startAnnotating(session, mode, false);\n      }\n    })();\n  }, [session, send, state]);\n}\n\nconst NO_STATE = { getSnapshot: () => undefined, subscribe: () => () => {} };\nfunction useSyncState(session: FeedbackSession | undefined): FeedbackSessionSnapshot | undefined {\n  return useExternal<FeedbackSessionSnapshot | undefined>(session ?? NO_STATE);\n}\n\n/** What `usePointComments` returns: the structural shape of the maquette viewer's `MaquetteComments` (any viewer may take it). */\nexport interface PointCommentsProp {\n  /** A host-owned proxy element for an opaque frame pick, checked by the session's root and privacy policy. */\n  readonly pick: (element: Element) => void;\n  readonly reposition: () => void;\n  /** Clicks are currently captured, false during Use app or processing. */\n  readonly picking: boolean;\n  /** The session is annotating now (point mode or feedback mode). */\n  readonly active: boolean;\n  /** Point mode on the page, keeping the notes already taken (from the review too); Done when it is on. Esc ends it like the composer's toggle. */\n  readonly point: () => void;\n  /** Every pin with a marked element: its number and the `data-feedback-id` it sits in (`SessionNote.feedbackId`). */\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n}\n\n/**\n * Comment pins for a viewer inside the page (the maquette viewer's `comments`): the same session, notes, bubble, review and Send as the\n * composer's toggle, entered in point mode from the viewer's own icon. A viewer marks its parts with `data-feedback-id` and matches the\n * pins on them. Undefined without a session, so the viewer shows no icon.\n */\nexport function usePointComments(session: FeedbackSession | undefined): PointCommentsProp | undefined {\n  const state = useSyncState(session);\n  // One object per session state, so a host that puts it in a memoized kind list re-renders only when the pins or the mode change.\n  return useMemo(() => !session || !state ? undefined : {\n    active: state.phase === 'active' || state.phase === 'processing',\n    pick: session.pick,\n    reposition: session.reposition,\n    picking: state.phase === 'active' && !state.using,\n    point: () => {\n      const phase = session.getSnapshot().phase;\n      if (phase === 'active') void session.done();\n      else if (phase === 'idle' || phase === 'review') startAnnotating(session, 'point');\n    },\n    pins: state.notes.flatMap(note => note.feedbackId ? [{ number: note.number, target: note.feedbackId }] : []),\n  }, [session, state]);\n}\n",
+      "content": "// The feedback session's look (FEEDBACK.md, \"UX\"): the note pin beside a picked element (NoteBubble: a text field with a mic inside it),\n// the slim bar and the chip with its review (optional, for hosts with no chat). Everything they show and do is the headless\n// `createFeedbackSession` from `@hachej/boring-feedback/ui` (hover labels, pins, steps, the draft and Send come from there, through the\n// privacy policy); this file is how it looks. `useComposerFeedback` adapts a session to the chat composer's optional `feedback` prop\n// (registry/pi-chat): ONE annotate toggle and a count chip, structurally, so neither item imports the other.\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';\nimport { createPortal } from 'react-dom';\nimport { MicIcon, SquareIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Badge } from '@/components/ui/badge';\nimport { Card } from '@/components/ui/card';\nimport { Textarea } from '@/components/ui/textarea';\nimport { readableElement } from '@hachej/boring-feedback/format';\nimport { createVoiceCapture, type VoiceCapture } from '@hachej/boring-feedback/page';\nimport { pinMark, type FeedbackSession, type FeedbackSessionSnapshot, type SessionNote } from '@hachej/boring-feedback/ui';\nimport { useHoldToRecord } from '../pi-chat-voice/use-hold-to-record';\nimport { useExternal } from './use-external';\nimport { plainElement, withLabels, type FeedbackLabels } from './feedback-labels';\n\nconst plural = (count: number, one: string, many: string): string => `${count} ${count === 1 ? one : many}`;\n/** Notes the chip and the bar count: every note that says something (not a pin still being typed), plus the general note. */\nexport function noteCount(state: FeedbackSessionSnapshot): number {\n  return state.notes.filter(note => note.text.trim()).length + (state.general.trim() ? 1 : 0);\n}\n\nexport interface FeedbackBarProps {\n  readonly session: FeedbackSession;\n  readonly className?: string;\n  /** Docked under the chat composer (the composer's `feedback.bar`) instead of floating at the top of the page. */\n  readonly docked?: boolean;\n}\n\n/** Pins dropped while recording that have no note yet (nothing transcribed for them, or transcription failed). */\nexport function emptyPinCount(state: FeedbackSessionSnapshot): number {\n  return state.notes.filter(note => note.recorded && !note.text.trim()).length;\n}\n\n/** `mm:ss` since `since` (ms), for the recording timer. */\nexport function elapsed(ms: number): string {\n  const seconds = Math.max(0, Math.floor(ms / 1000));\n  return `${String(Math.floor(seconds / 60)).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;\n}\n\n/** The running time of a recording, from when the bar saw it start; 00:00 when not recording. */\nfunction useRecordingTime(recording: boolean): string {\n  const [since, setSince] = useState<number | undefined>(undefined);\n  const [, tick] = useState(0);\n  useEffect(() => {\n    if (!recording) { setSince(undefined); return; }\n    setSince(Date.now());\n    const timer = setInterval(() => tick(value => value + 1), 500);\n    return () => clearInterval(timer);\n  }, [recording]);\n  return elapsed(since === undefined ? 0 : Date.now() - since);\n}\n\nfunction barHint(state: FeedbackSessionSnapshot): string {\n  if (state.phase === 'processing') return state.transcribing ? 'Transcribing…' : 'Preparing your feedback…';\n  if (state.problem) return state.problem;\n  if (state.voice.kind === 'starting') return 'Allow the microphone if your browser asks…';\n  if (state.voice.kind === 'recording') return state.using ? 'Recording — using the app' : 'Recording — point and talk';\n  return state.using ? 'Using the app: your clicks are recorded as steps' : 'Click what you want to comment on';\n}\n\n/**\n * Feedback mode's bar: `● Feedback · N notes · 🎙 Record · Use app · Done · ✕`. While recording: a red dot, the\n * running time, \"Recording — point and talk\" and Stop. A refused microphone is said in the bar itself, never only in a tooltip.\n */\nexport function FeedbackBar({ session, className, docked = false }: FeedbackBarProps) {\n  const state = useExternal(session);\n  const recording = state.voice.kind === 'recording';\n  const time = useRecordingTime(recording && (state.phase === 'active' || state.phase === 'processing'));\n  if (state.phase !== 'active' && state.phase !== 'processing') return null;\n  const processing = state.phase === 'processing';\n  const pins = emptyPinCount(state);\n  const voiceProblem = state.voice.kind === 'refused' ? state.voice : undefined;\n  return <Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"toolbar\" aria-label=\"Feedback mode\" data-testid=\"feedback-bar\" data-docked={docked ? 'true' : 'false'}\n    data-using={state.using ? 'true' : 'false'} data-recording={recording ? 'true' : 'false'} data-transcribing={state.transcribing ? 'true' : 'false'}\n    className={['boring-feedback-bar', className].filter(Boolean).join(' ')}\n    onKeyDown={event => { if (event.key === 'Escape' && state.bubble) { event.stopPropagation(); session.cancelBubble(); } }}>\n    <span className=\"boring-feedback-bar-title\">Feedback</span>\n    <span className=\"boring-feedback-bar-meta\" data-testid=\"feedback-bar-count\">{plural(noteCount(state), 'note', 'notes')}{pins ? ` · ${plural(pins, 'pin', 'pins')}` : ''}</span>\n    {state.voiceAvailable && <Toggle data-testid=\"feedback-voice\" pressed={recording}\n      disabled={processing || state.voice.kind === 'starting' || state.voice.kind === 'stopping'} title={recording ? 'Stop recording' : 'Record your voice while you point: each click drops a pin, what you say becomes its note'}\n      onPressedChange={() => { void session.toggleVoice(); }}>\n      {recording ? <><SquareIcon data-icon=\"inline-start\" aria-hidden=\"true\" />Stop</> : <><MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{state.voice.kind === 'starting' ? 'Starting…' : state.voice.kind === 'stopping' ? 'Stopping…' : 'Record'}</>}\n    </Toggle>}\n    {recording && <Badge variant=\"destructive\" role=\"status\" data-testid=\"feedback-recording\">\n      <span className=\"boring-feedback-timer\" data-testid=\"feedback-recording-time\">{time}</span></Badge>}\n    <span className=\"boring-feedback-hint\" role=\"status\" aria-live=\"polite\" data-testid=\"feedback-bar-hint\">{barHint(state)}</span>\n    {voiceProblem && <span className=\"boring-feedback-voice-problem\" role=\"alert\" data-testid=\"feedback-voice-problem\" data-code={voiceProblem.code}>{voiceProblem.reason}</span>}\n    {!processing && <Toggle data-testid=\"feedback-use-app\" pressed={state.useToggle} onPressedChange={pressed => session.setUseToggle(pressed)}>Use app</Toggle>}\n    <Button variant=\"default\" data-testid=\"feedback-done\" disabled={processing} onClick={() => { void session.done(); }}>Done</Button>\n    <Button variant=\"ghost\" size=\"icon\" data-testid=\"feedback-discard\" aria-label=\"Discard feedback\" title=\"Discard feedback\" disabled={processing} onClick={() => session.discard()}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </Card>;\n}\n\nconst BUBBLE_WIDTH = 280;\n/** Pixels at the bottom of the viewport taken by comment mode's banner on a phone (CommentBanner, `data-feedback-point-bar=\"bottom\"`), plus a gap; 0 without it. */\nexport function pointBarInset(document: Document): number {\n  const bar = document.querySelector('[data-feedback-point-bar=\"bottom\"]');\n  const height = document.defaultView?.innerHeight ?? 768;\n  return bar ? Math.max(0, height - bar.getBoundingClientRect().top + 8) : 0;\n}\n\n/**\n * Beside the element: below it when the bubble (`size`, its measured height once drawn) fits above point mode's bar (if any), else\n * above it, else as low as it fits. Every branch is clamped to the space above the bar, so the bubble never covers it; a bubble taller\n * than that space scrolls inside it.\n */\nfunction bubblePlace(element: Element, size = 120): CSSProperties {\n  const view = element.ownerDocument.defaultView;\n  const width = view?.innerWidth ?? 1024, height = (view?.innerHeight ?? 768) - pointBarInset(element.ownerDocument);\n  const rect = element.getBoundingClientRect();\n  const left = Math.min(Math.max(8, rect.left), Math.max(8, width - BUBBLE_WIDTH - 8));\n  const below = rect.bottom + 8;\n  const above = rect.top - size - 8;\n  const lowest = Math.max(8, height - size);\n  const top = Math.min(below + size <= height ? below : above >= 8 ? above : lowest, lowest);\n  return { position: 'fixed', top, left, width: Math.min(BUBBLE_WIDTH, width - 16), maxHeight: Math.max(0, height - top), overflowY: 'auto', boxSizing: 'border-box' };\n}\n\ntype PinVoice = 'idle' | 'starting' | 'recording' | 'transcribing';\n\n/**\n * The mic inside the pin's field, held like the chat's voice message (`useHoldToRecord`, the same gesture policy as the composer and the\n * shell): press and hold to talk (Space or Enter from the keyboard), release and the transcript is added to the note and the note is kept\n * (with `useSendEachNote`, sent at once). A slide off the button, Escape or a hidden page drops the recording. A refused microphone, nothing\n * heard or a rejected transcription is said under the field and never touches the typed text. One capture (`createVoiceCapture`) per pin.\n */\nfunction PinMic({ session, transcribe, words }: { readonly session: FeedbackSession; readonly transcribe: PinTranscribe; readonly words: FeedbackLabels }) {\n  const [phase, setPhase] = useState<PinVoice>('idle');\n  const [problem, setProblem] = useState<string | undefined>(undefined);\n  const capture = useRef<VoiceCapture | null>(null);\n  const run = useRef(0);\n  const work = useRef<AbortController | null>(null);\n  // Let go before the microphone was ready: the recording ends as soon as it starts.\n  const released = useRef(false);\n  capture.current ??= createVoiceCapture();\n  // A closed pin releases the microphone and drops a transcription still in flight.\n  useEffect(() => () => { run.current += 1; capture.current?.cancel(); work.current?.abort(); }, []);\n  const finish = async (): Promise<void> => {\n    const attempt = run.current;\n    setPhase('transcribing');\n    const recording = await capture.current!.stop().catch(() => null);\n    if (attempt !== run.current) return;\n    if (!recording) { setPhase('idle'); setProblem(words.voiceNothing); return; }\n    const abort = new AbortController();\n    work.current = abort;\n    try {\n      const spoken = (await transcribe(recording.audio, abort.signal)).trim();\n      if (attempt !== run.current) return;\n      if (!spoken) { setProblem(words.voiceNothing); return; }\n      // Appended to what is typed NOW (the person may have kept typing), never replacing it.\n      const typed = session.getSnapshot().bubble?.text ?? '';\n      session.setBubbleText(`${typed}${typed === '' || /\\s$/.test(typed) ? '' : ' '}${spoken}`);\n      session.saveBubble();\n    } catch { if (attempt === run.current) setProblem(words.voiceFailed); }\n    finally { if (work.current === abort) work.current = null; if (attempt === run.current) setPhase('idle'); }\n  };\n  const hold = useHoldToRecord({\n    // Called straight from the press, so the browser ties the permission prompt to the person's gesture.\n    start: () => {\n      const attempt = ++run.current;\n      released.current = false;\n      setProblem(undefined); setPhase('starting');\n      void capture.current!.start().then(result => {\n        if (attempt !== run.current) return;\n        if (result.kind === 'refused') { setPhase('idle'); setProblem(result.reason); return; }\n        setPhase('recording');\n        if (released.current) void finish();\n      });\n    },\n    finish: () => { if (phase === 'recording') void finish(); else released.current = true; },\n    cancel: () => { run.current += 1; capture.current?.cancel(); setPhase('idle'); },\n  }, phase === 'transcribing');\n  const recording = phase === 'recording';\n  return <>\n    <Button {...hold} variant=\"ghost\" size=\"icon\" className=\"boring-feedback-pin-mic min-h-11 min-w-11 touch-none select-none\" data-testid=\"feedback-bubble-mic\" data-state={phase}\n      aria-pressed={recording || phase === 'starting'} aria-label={recording ? words.voiceStop : words.voiceRecord} title={recording ? words.voiceStop : words.voiceRecord} disabled={phase === 'transcribing'}>\n      {phase === 'transcribing' ? <span role=\"status\" aria-label={words.voiceTranscribing}>…</span>\n        : recording ? <SquareIcon data-icon=\"inline-start\" aria-hidden=\"true\" /> : <MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n    </Button>\n    {problem && <span className=\"boring-feedback-voice-problem\" role=\"alert\" data-testid=\"feedback-bubble-voice-problem\">{problem}</span>}\n  </>;\n}\n\n/** Turns a recording into text (`signal` aborts when the pin closes); a rejection keeps what was typed. */\nexport type PinTranscribe = (audio: Blob, signal: AbortSignal) => Promise<string>;\n\n/**\n * The pin beside a picked element: a text field with a mic inside it, \"Add note\" (Enter) and Cancel (Esc). Enter saves, Shift-Enter for a\n * new line, Esc discards the pin. The element is named in plain words (`plainElement`). On a phone it keeps clear of the comment banner. `transcribe` turns the mic's recording into text; without it there is no mic.\n */\nexport function NoteBubble({ session, labels, transcribe }: { readonly session: FeedbackSession; readonly labels?: Partial<FeedbackLabels>; readonly transcribe?: PinTranscribe }) {\n  const state = useExternal(session);\n  const words = withLabels(labels);\n  const bubble = state.bubble;\n  const field = useRef<HTMLTextAreaElement>(null);\n  const [place, setPlace] = useState<CSSProperties | undefined>(undefined);\n  const [, redraw] = useState(0);\n  const [announce, setAnnounce] = useState('');\n  const box = useRef<HTMLDivElement>(null);\n  // The bubble's natural height (its content plus borders), not the height it is clamped to, so it grows back when there is room.\n  const size = (): number | undefined => (box.current ? box.current.scrollHeight + box.current.offsetHeight - box.current.clientHeight : 0) || undefined;\n  useLayoutEffect(() => { if (bubble) setPlace(bubblePlace(bubble.element, size())); }, [bubble?.noteId, bubble?.element]);\n  // Once drawn, place it again with its real height (taller with 44px touch targets and wrapped buttons).\n  useLayoutEffect(() => {\n    if (!bubble || !place || !box.current) return;\n    const next = bubblePlace(bubble.element, size());\n    if (next.top !== place.top || next.left !== place.left) setPlace(next);\n  });\n  useEffect(() => { if (bubble) field.current?.focus({ preventScroll: true }); }, [bubble?.noteId]);\n  useEffect(() => {\n    if (!bubble) return;\n    const view = bubble.element.ownerDocument.defaultView;\n    const follow = () => { setPlace(bubblePlace(bubble.element, size())); redraw(value => value + 1); };\n    view?.addEventListener('scroll', follow, { capture: true, passive: true });\n    view?.addEventListener('resize', follow);\n    return () => { view?.removeEventListener('scroll', follow, { capture: true }); view?.removeEventListener('resize', follow); };\n  }, [bubble?.noteId, bubble?.element]);\n  // A polite live region outlives the bubble, so the cancellation is heard even though the dialog is gone.\n  const cancel = (): void => { session.cancelSelection(); setAnnounce(words.selectionCancelled); };\n  const live = <span data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"status\" aria-live=\"polite\" className=\"boring-feedback-sr\" data-testid=\"feedback-bubble-announce\"\n    style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{announce}</span>;\n  if (!bubble || state.phase !== 'active') return state.phase === 'active' ? live : null;\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing && event.target === field.current) { event.preventDefault(); session.saveBubble(); }\n    else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); session.cancelBubble(); }\n  };\n  return <>{live}<Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"dialog\" aria-label={`Note ${bubble.number}`} data-testid=\"feedback-bubble\" data-note={bubble.number}\n    ref={box} className=\"boring-feedback-bubble\" style={place} onKeyDown={onKeyDown}>\n    <span className=\"boring-feedback-bubble-head\"><span className=\"boring-feedback-pin\" aria-hidden=\"true\">{pinMark(bubble.number)}</span>\n      <span className=\"boring-feedback-bubble-label\" data-testid=\"feedback-bubble-label\">{plainElement(bubble.label, words)}</span></span>\n    <span className=\"boring-feedback-pin-field\">\n      <Textarea ref={field} data-testid=\"feedback-bubble-input\" rows={2} placeholder={words.bubblePlaceholder} aria-label={words.bubblePlaceholder} value={bubble.text}\n        onChange={event => session.setBubbleText(event.target.value)} />\n      {transcribe && <PinMic key={bubble.noteId} session={session} transcribe={transcribe} words={words} />}\n    </span>\n    <span className=\"boring-feedback-bubble-actions\">\n      <Button variant=\"ghost\" className=\"min-h-11 min-w-11\" data-testid=\"feedback-cancel-selection\" onClick={cancel}>{words.cancelSelection}</Button>\n      <Button variant=\"default\" className=\"min-h-11 min-w-11\" data-testid=\"feedback-bubble-save\" onClick={() => session.saveBubble()}>{words.add}</Button>\n    </span>\n  </Card></>;\n}\n\nexport interface FeedbackChipProps {\n  readonly session: FeedbackSession;\n  /** Opens the review on first render (journeys). */\n  readonly defaultOpen?: boolean;\n  /** Offer Copy report in the review: the way to use feedback with no chat and no store. */\n  readonly copy?: boolean;\n}\n\n/** The one composer chip after Done: `💬 Feedback · 3 notes · /settings/:section`. Click opens the review; × discards. */\nexport function FeedbackChip({ session, defaultOpen = false, copy = false }: FeedbackChipProps) {\n  const state = useExternal(session);\n  const [open, setOpen] = useState(defaultOpen);\n  const chip = useRef<HTMLSpanElement>(null);\n  if (state.phase !== 'review') return null;\n  const count = noteCount(state);\n  const pins = emptyPinCount(state);\n  const refusal = state.send.kind !== 'idle' && state.send.kind !== 'sending' && state.send.kind !== 'saved' ? state.send.reason : undefined;\n  return <span ref={chip} data-boring=\"feedback\" data-feedback-ignore=\"\" data-testid=\"feedback-chip\" data-send={state.send.kind} className=\"boring-feedback-chip\">\n    <Button variant=\"outline\" className=\"min-w-0 max-w-full\" data-testid=\"feedback-chip-open\" aria-expanded={open} onClick={() => setOpen(value => !value)}\n      title={refusal ?? 'Review your feedback before sending'}>\n      <span aria-hidden=\"true\">💬</span> Feedback · {plural(count, 'note', 'notes')}{pins ? ` · ${plural(pins, 'pin', 'pins')} to describe` : ''} · <span className=\"boring-feedback-chip-route\">{state.route}</span>\n    </Button>\n    <Button variant=\"ghost\" size=\"icon-sm\" data-testid=\"feedback-chip-discard\" aria-label=\"Discard feedback\" title=\"Discard feedback\" onClick={() => { session.highlight(undefined); session.discard(); }}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n    {state.problem && <span className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-chip-voice\">{state.problem}</span>}\n    {refusal && <span className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-chip-problem\">{refusal}</span>}\n    {/* In the page's body: the chip may sit in a transformed chat bar, where a fixed panel would not be placed against the viewport. */}\n    {open && createPortal(<FeedbackReview session={session} anchor={chip.current} copy={copy} onClose={() => setOpen(false)} />, chip.current?.ownerDocument.body ?? document.body)}\n  </span>;\n}\n\nfunction reviewPlace(anchor: Element | null): CSSProperties | undefined {\n  if (!anchor) return undefined;\n  const view = anchor.ownerDocument.defaultView;\n  const width = view?.innerWidth ?? 1024, height = view?.innerHeight ?? 768;\n  const rect = anchor.getBoundingClientRect();\n  const panel = Math.min(416, width - 24);\n  return { position: 'fixed', left: Math.min(Math.max(12, rect.left), width - panel - 12), bottom: Math.max(12, height - rect.top + 8), width: panel };\n}\n\n/** The compact review: notes in order, editable and removable; hovering a note highlights its element in the page, or says it is not here. */\nexport function FeedbackReview({ session, anchor = null, copy = false, onClose }: { readonly session: FeedbackSession; readonly anchor?: Element | null; readonly copy?: boolean; readonly onClose: () => void }) {\n  const state = useExternal(session);\n  const [where, setWhere] = useState<Readonly<Record<number, 'shown' | 'not-on-page'>>>({});\n  const [place, setPlace] = useState<CSSProperties | undefined>(undefined);\n  useLayoutEffect(() => { setPlace(reviewPlace(anchor)); }, [anchor]);\n  useEffect(() => () => { session.highlight(undefined); }, [session]);\n  const hover = (id: number | undefined): void => {\n    const result = session.highlight(id);\n    if (id !== undefined && result !== 'none') setWhere(value => ({ ...value, [id]: result }));\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => { if (event.key === 'Escape') { event.stopPropagation(); onClose(); } };\n  return <Card size=\"sm\" data-boring=\"feedback\" data-feedback-ignore=\"\" role=\"dialog\" aria-label=\"Review feedback\" data-testid=\"feedback-review\" className=\"boring-feedback-review\"\n    style={place} onKeyDown={onKeyDown} onMouseLeave={() => hover(undefined)}>\n    <header className=\"boring-feedback-sheet-header\"><h2>Feedback · {state.route}</h2>\n      <Button variant=\"ghost\" size=\"icon\" aria-label=\"Close review\" title=\"Close review\" data-testid=\"feedback-review-close\" onClick={onClose}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button></header>\n    {state.problem && <p className=\"boring-feedback-warning\" role=\"alert\" data-testid=\"feedback-review-problem\">{state.problem}</p>}\n    <ol className=\"boring-feedback-notes\">\n      {state.notes.map(note => <li key={note.id} data-testid=\"feedback-review-note\" data-note={note.number} data-where={where[note.id]}\n        onMouseEnter={() => hover(note.id)} onFocus={() => hover(note.id)}>\n        <span className=\"boring-feedback-note-head\"><span className=\"boring-feedback-pin\" aria-hidden=\"true\">{pinMark(note.number)}</span>\n          <ElementName note={note} />\n          {note.from === 'voice' && <Badge variant=\"secondary\" data-testid=\"feedback-review-voice\">voice</Badge>}\n          {where[note.id] === 'not-on-page' && <Badge variant=\"secondary\" data-testid=\"feedback-review-elsewhere\">not on this page</Badge>}\n          <Button variant=\"ghost\" size=\"icon\" aria-label={`Remove note ${note.number}`} title={`Remove note ${note.number}`} data-testid=\"feedback-review-remove\" onClick={() => session.removeNote(note.id)}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button></span>\n        <Textarea rows={2} aria-label={`Note ${note.number}`} data-testid=\"feedback-review-text\" value={note.text} placeholder={note.recorded ? 'Nothing was said here: type a note, or remove the pin' : undefined}\n          onChange={event => session.setNoteText(note.id, event.target.value)} />\n      </li>)}\n    </ol>\n    <label className=\"boring-feedback-field\"><span>General note</span>\n      <Textarea rows={2} data-testid=\"feedback-review-general\" placeholder=\"Anything else? (optional)\" value={state.general} onChange={event => session.setGeneral(event.target.value)} /></label>\n    <p className=\"boring-feedback-meta\">{state.stepCount > 1 ? `${plural(state.stepCount, 'step', 'steps')} recorded between the notes. ` : ''}{copy ? 'Copy the report and paste it anywhere.' : 'Sent with your next message.'}</p>\n    {copy && <div className=\"boring-feedback-actions\">\n      <Button variant=\"default\" data-testid=\"feedback-copy\" onClick={() => { void session.copy(); }}>Copy report</Button></div>}\n    {copy && <p role=\"status\" aria-live=\"polite\" className=\"boring-feedback-status\" data-testid=\"feedback-status\" data-copy={state.copy.kind}>\n      {state.copy.kind === 'copied' ? 'Report copied. Paste it anywhere.' : state.copy.kind === 'manual' ? 'The clipboard is not available here: select the report below and copy it.' : state.copy.kind === 'refused' ? state.copy.reason : ''}</p>}\n    {copy && state.copy.kind === 'manual' && <Textarea readOnly className=\"boring-feedback-manual\" data-testid=\"feedback-manual-copy\" value={state.copy.text} rows={6} onFocus={event => event.currentTarget.select()} />}\n    {copy && state.copy.kind === 'copied' && <details className=\"boring-feedback-copied\"><summary>Copied report</summary><pre data-testid=\"feedback-copy-text\">{state.copy.text}</pre></details>}\n  </Card>;\n}\n\n/**\n * A note's element as one calm line: the readable name (semibold) and the file basename (muted, monospace), the full path in the\n * tooltip. The same reading as the pi-chat feedback card's element line (`readableElement` from `@hachej/boring-feedback/format`).\n */\nexport function ElementName({ note }: { readonly note: SessionNote }) {\n  const readable = note.fallback ? readableElement(note.fallback, note.source) : { name: note.label };\n  return <span className=\"boring-feedback-element\" data-testid=\"feedback-review-element\" title={'path' in readable && readable.path ? readable.path : note.label}>\n    <span className=\"boring-feedback-element-name\" data-testid=\"feedback-review-name\">{readable.name}</span>\n    {'file' in readable && readable.file && <span className=\"boring-feedback-element-file\" data-testid=\"feedback-review-file\">{readable.file}</span>}\n  </span>;\n}\n\n/** What `useComposerFeedback` returns: the structural shape of pi-chat's `ComposerFeedback`. */\nexport interface ComposerFeedbackProp {\n  readonly annotate: () => void;\n  readonly active: boolean;\n  readonly count: number;\n  readonly clear: () => void;\n  readonly attach: (text: string) => Promise<{ readonly kind: 'ok'; readonly text: string } | { readonly kind: 'refused'; readonly reason: string }>;\n  readonly sent: () => void;\n}\n\n/** A Markdown fence longer than any backtick run in the text. */\nfunction fenced(text: string): string {\n  const longest = Math.max(0, ...[...text.matchAll(/`+/g)].map(match => match[0].length));\n  const fence = '`'.repeat(Math.max(3, longest + 1));\n  return `${fence}markdown\\n${text.endsWith('\\n') ? text : `${text}\\n`}${fence}`;\n}\n\n/** Touch or a compact screen: the panel covers the app and there is no hover, so annotating is point mode (use the app, then point). */\nfunction pointsInstead(): boolean {\n  return globalThis.matchMedia?.('(pointer: coarse)').matches === true || (globalThis.innerWidth ?? 1024) < 768;\n}\n\n/**\n * Starts (or resumes) annotating in either mode, with Esc as a way out. The session swallows Esc on the page (it only closes a pin), so\n * this listens on the window's capture phase BEFORE the session starts, and ends the mode (Done: the notes wait for Send) when no pin is\n * open. From the review, `resume` keeps the notes, anchors and save guards: a second round adds to the same draft.\n */\nfunction startAnnotating(session: FeedbackSession, mode: 'point' | undefined = pointsInstead() ? 'point' : undefined, fresh = true): void {\n  if (fresh) sentInRound.delete(session);\n  const view = globalThis.window;\n  const onKey = (event: globalThis.KeyboardEvent): void => {\n    // Esc that ends annotating is spent: a host layer around the composer (a panel that closes on Esc) must not also react to it.\n    if (event.key === 'Escape' && !session.getSnapshot().bubble) { event.preventDefault(); event.stopPropagation(); void session.done(); }\n  };\n  view?.addEventListener('keydown', onKey, { capture: true });\n  session.resume(mode ? { mode } : {});\n  const stop = session.subscribe(() => {\n    if (session.getSnapshot().phase === 'active') return;\n    view?.removeEventListener('keydown', onKey, { capture: true });\n    stop();\n  });\n}\n\n/**\n * The composer's `feedback` prop for a session: ONE annotate toggle (targeting with a hover highlight; point mode on touch and compact\n * screens, and again after Esc to add more), a count of the notes taken, and Send attaching them: a saved report as its `@` mention (the host's mention resolver inlines\n * the stored report with the person's access), otherwise the rendered report inline in a fenced block. Pair it with `NoteBubble`.\n */\nexport function useComposerFeedback(session: FeedbackSession | undefined): ComposerFeedbackProp | undefined {\n  const state = useSyncState(session);\n  if (!session || !state) return undefined;\n  const open = state.phase === 'active' || state.phase === 'processing';\n  return {\n    annotate: () => {\n      const phase = session.getSnapshot().phase;\n      if (phase === 'active') void session.done();\n      else if (phase === 'idle' || phase === 'review') startAnnotating(session);\n    },\n    active: open,\n    // A note being typed in the pin counts: Send saves it.\n    count: noteCount(state) + (state.bubble?.fresh && state.bubble.text.trim() ? 1 : 0),\n    clear: () => { session.highlight(undefined); session.discard(); },\n    attach: async text => {\n      // Send while annotating ends it first: the pin being typed is kept.\n      if (session.getSnapshot().phase === 'active') await session.done();\n      const attached = await session.attach();\n      if (attached.kind === 'refused') return attached;\n      const body = attached.kind === 'mention' ? `@${attached.path}` : fenced(attached.text);\n      return { kind: 'ok', text: text.trim() ? `${text.trimEnd()}\\n\\n${body}` : body };\n    },\n    sent: () => session.sent(),\n  };\n}\n\n/** Notes sent one by one in the current round of comment mode (`useSendEachNote`), for the banner; a new round starts at zero. */\nconst sentInRound = new WeakMap<FeedbackSession, number>();\nexport const notesSent = (session: FeedbackSession): number => sentInRound.get(session) ?? 0;\n\n/**\n * Each note goes to the chat the moment it is added: its element and text as one message (`send`, the chat's follow-up send), and\n * comment mode stays on for the next note. Nothing waits in a hidden batch, and the agent's reply follows in the conversation. Without\n * `send`, the notes wait for the person's next message as before. A refused report or a failed send stays in the review, where the composer shows it.\n */\nexport function useSendEachNote(session: FeedbackSession | undefined, send: ((text: string) => Promise<unknown>) | undefined): void {\n  const state = useSyncState(session);\n  const busy = useRef(false);\n  useEffect(() => {\n    if (!session || !send || !state || busy.current) return;\n    if (state.phase !== 'active' || state.bubble || !state.notes.some(note => note.text.trim())) return;\n    busy.current = true;\n    const mode = state.mode === 'point' ? 'point' : undefined;\n    void (async () => {\n      let again = false;\n      try {\n        await session.done();\n        const attached = await session.attach();\n        if (attached.kind === 'refused') return;\n        const submission = await send(attached.kind === 'mention' ? `@${attached.path}` : fenced(attached.text)).catch(() => undefined);\n        if (submission === false || submission === undefined || submission === null) return;\n        sentInRound.set(session, notesSent(session) + noteCount(session.getSnapshot()));\n        session.sent();\n        again = true;\n      } finally {\n        busy.current = false;\n        if (again) startAnnotating(session, mode, false);\n      }\n    })();\n  }, [session, send, state]);\n}\n\nconst NO_STATE = { getSnapshot: () => undefined, subscribe: () => () => {} };\nfunction useSyncState(session: FeedbackSession | undefined): FeedbackSessionSnapshot | undefined {\n  return useExternal<FeedbackSessionSnapshot | undefined>(session ?? NO_STATE);\n}\n\n/** What `usePointComments` returns: the structural shape of the maquette viewer's `MaquetteComments` (any viewer may take it). */\nexport interface PointCommentsProp {\n  /** A host-owned proxy element for an opaque frame pick, checked by the session's root and privacy policy. */\n  readonly pick: (element: Element) => void;\n  readonly reposition: () => void;\n  /** Clicks are currently captured, false during Use app or processing. */\n  readonly picking: boolean;\n  /** The session is annotating now (point mode or feedback mode). */\n  readonly active: boolean;\n  /** Point mode on the page, keeping the notes already taken (from the review too); Done when it is on. Esc ends it like the composer's toggle. */\n  readonly point: () => void;\n  /** Every pin with a marked element: its number and the `data-feedback-id` it sits in (`SessionNote.feedbackId`). */\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n}\n\n/**\n * Comment pins for a viewer inside the page (the maquette viewer's `comments`): the same session, notes, bubble, review and Send as the\n * composer's toggle, entered in point mode from the viewer's own icon. A viewer marks its parts with `data-feedback-id` and matches the\n * pins on them. Undefined without a session, so the viewer shows no icon.\n */\nexport function usePointComments(session: FeedbackSession | undefined): PointCommentsProp | undefined {\n  const state = useSyncState(session);\n  // One object per session state, so a host that puts it in a memoized kind list re-renders only when the pins or the mode change.\n  return useMemo(() => !session || !state ? undefined : {\n    active: state.phase === 'active' || state.phase === 'processing',\n    pick: session.pick,\n    reposition: session.reposition,\n    picking: state.phase === 'active' && !state.using,\n    point: () => {\n      const phase = session.getSnapshot().phase;\n      if (phase === 'active') void session.done();\n      else if (phase === 'idle' || phase === 'review') startAnnotating(session, 'point');\n    },\n    pins: state.notes.flatMap(note => note.feedbackId ? [{ number: note.number, target: note.feedbackId }] : []),\n  }, [session, state]);\n}\n",
       "type": "registry:component",
       "target": "components/feedback/feedback-session.tsx"
     },

package/r/file-tree.json

@@ -4,15 +4,15 @@
   "title": "File tree",
   "description": "Browse, search, upload and inspect retained versions through one revisionProvider binding. Uses the consumer's shadcn Button and dropdown-menu with shared version-history rows; Base UI style only.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/version-history.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/version-history.json",
     "button",
     "dropdown-menu",
     "collapsible",

package/r/highlights.json

@@ -4,13 +4,13 @@
   "title": "Anchored highlights",
   "description": "Exact Markdown highlights and comments in a conditional workspace sidecar.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/markdown-editor.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/markdown-editor.json",
     "button",
     "textarea",
     "label",

package/r/html-viewer.json

@@ -4,13 +4,13 @@
   "title": "HTML source and passive preview",
   "description": "Exact HTML source editing with a reconstructed passive preview and borrowed controller. Browser security qualification remains separate.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/button.json"
   ],
   "files": [
     {

package/r/looks-viewer.json

@@ -8,7 +8,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/mockup-viewer.json",
     "alert",
     "button",
     "card",

package/r/maquette-viewer.json

@@ -8,8 +8,8 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/diagram-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/diagram-viewer.json",
     "alert",
     "badge",
     "bubble",
@@ -49,7 +49,7 @@
     },
     {
       "path": "registry/maquette-viewer/maquette-viewer.tsx",
-      "content": "'use client';\n\n// The maquette viewer: a PM agent's `*.maquette.json` mock-up, one screen at a time. The screen is the content; the chrome is one thin bar\n// of icons: Back, ‹ 2 / 5 › (also arrow keys and swipe) and a menu holding the guided tours and \"How it works\" (the workflow, in a dialog).\n// During a tour the bar shows the step dots and ×, with the step's caption under it. `maquetteKind` is the kind the pi-app artifact panel\n// uses by default for `.maquette.json` files; an app's own kind in `artifactKinds` wins. It draws data only: nothing in the file runs.\n// The workflow is drawn by the diagram-viewer item's `DiagramView`, inline or from a linked `*.diagram.json`. With `comments` (the feedback\n// item's `usePointComments`, structurally) one more icon enters point mode on the screen: a tap on a block pins a note that names the\n// maquette path, the screen id and the block id; the pins of the current screen show as small numbers on their blocks.\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentType, KeyboardEvent, ReactNode, TouchEvent } from 'react';\nimport { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, CompassIcon, EllipsisIcon, InfoIcon, LayoutTemplateIcon, MessageSquarePlusIcon, TriangleAlertIcon, WorkflowIcon, XIcon } from 'lucide-react';\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { parseDiagram } from '../diagram-viewer/diagram';\nimport type { Diagram } from '../diagram-viewer/diagram';\nimport { DiagramView } from '../diagram-viewer/diagram-view';\nimport { MAQUETTE_FORMAT_VERSION, diagramPathOf, isMaquettePath, parseMaquette, screenFromFragment } from './maquette';\nimport type { Maquette, MaquetteBlock, MaquetteCase, MaquetteScreen } from './maquette';\nimport { maquetteLabelsFor } from './maquette-labels';\nimport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\nimport { MaquetteScreenView } from './maquette-blocks';\nimport type { MaquetteLinks } from './maquette-blocks';\n\nexport { MAQUETTE_FORMAT_VERSION, diagramPathOf, isMaquettePath, linksOf, parseMaquette, screenFromFragment } from './maquette';\nexport type { Maquette, MaquetteBlock, MaquetteBlockV1, MaquetteCase, MaquetteFileV1, MaquetteParse, MaquetteScreen, MaquetteState, MaquetteTransition, MaquetteWorkflow } from './maquette';\nexport { defaultMaquetteLabels, frenchMaquetteLabels, maquetteLabelsFor } from './maquette-labels';\nexport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\n\n/**\n * Comment pins, structurally the feedback item's `usePointComments(session)`: pass it and the bar shows a comment icon; omit it (no feedback\n * session in the host) and nothing shows.\n */\nexport interface MaquetteComments {\n  /** Point mode is on. */\n  readonly active: boolean;\n  /** Enters point mode (the person taps blocks to pin notes), or ends it when it is on. */\n  readonly point: () => void;\n  /** The pins taken: each one's number and the `data-feedback-id` its element sits in. */\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n}\n\n/** Reads another file of the workspace as text (the artifact panel passes one): a linked `*.diagram.json`. Undefined when it cannot. */\nexport type MaquetteRead = (path: string) => Promise<string | undefined>;\n\n/** A block's `data-feedback-id`: `maquette:<path>#screen=<screen id>&block=<block id>`. */\nexport const maquetteTarget = (path: string | undefined, screen: string, block: string): string => `maquette:${path ?? ''}#screen=${screen}&block=${block}`;\n\nexport interface MaquetteViewerProps {\n  /** The file's text (JSON). */\n  readonly text: string;\n  /** The file's path: named by comment pins, and the folder a linked diagram is read from. */\n  readonly path?: string | undefined;\n  /** Comment pins on blocks (the feedback item's `usePointComments`). */\n  readonly comments?: MaquetteComments | undefined;\n  /** Reads a linked `*.diagram.json`; without it a linked workflow is not offered. */\n  readonly read?: MaquetteRead | undefined;\n  /** The page's URL fragment: `screen=<id>` opens that screen (and follows later changes). */\n  readonly fragment?: string | undefined;\n  /** The base words: English by default. */\n  readonly locale?: MaquetteLocale | undefined;\n  /** Any word over the locale's. */\n  readonly labels?: Partial<MaquetteLabels> | undefined;\n}\n\n/** Where the person is: the screens visited (the last is shown) and the guided tour under way. */\ninterface Walk { readonly history: readonly string[]; readonly tour: { readonly name: string; readonly index: number } | null }\n\n/**\n * A host bar that owns the one \"…\" menu (the pi-app artifact panel) provides this: the viewer then publishes its tours and \"How it works\"\n * there instead of drawing a second \"…\" menu beside the screen counter. Without a provider the viewer keeps its own menu.\n */\nexport interface MaquetteMenuEntry { readonly id: string; readonly label: string; readonly icon: ReactNode; readonly testId: string; readonly separatorBefore: boolean; readonly onSelect: () => void }\nexport const MaquetteMenuContext = createContext<((items: readonly MaquetteMenuEntry[]) => void) | undefined>(undefined);\n\nconst TYPING = 'input, select, textarea, [contenteditable=\"true\"]';\nconst ICON = 'pointer-coarse:min-h-11 pointer-coarse:min-w-11';\n\n/** One dot per tour step, the current one in the primary colour. */\nfunction Dots({ count, index, label }: { readonly count: number; readonly index: number; readonly label: string }) {\n  return <svg role=\"img\" aria-label={label} data-testid=\"maquette-dots\" width={count * 12} height=\"8\" viewBox={`0 0 ${count * 12} 8`} className=\"shrink-0\">\n    {Array.from({ length: count }, (_, i) => <circle key={i} cx={i * 12 + 6} cy=\"4\" r=\"3\" className={i === index ? 'fill-primary' : 'fill-muted-foreground/30'} />)}\n  </svg>;\n}\n\n/** The diagram of a linked `*.diagram.json`, read when the dialog opens: undefined while reading, null when it cannot be read. */\nfunction useLinked(read: MaquetteRead | undefined, path: string | undefined, open: boolean): Diagram | null | undefined {\n  const [loaded, setLoaded] = useState<{ readonly path: string; readonly diagram: Diagram | null }>();\n  useEffect(() => {\n    if (!open || !path || !read || loaded?.path === path) return undefined;\n    let off = false;\n    read(path).then(text => text === undefined ? null : parseDiagram(text), () => null).then(parsed => {\n      if (!off) setLoaded({ path, diagram: parsed?.kind === 'ok' ? parsed.diagram : null });\n    });\n    return () => { off = true; };\n  }, [open, path, read, loaded?.path]);\n  return loaded && loaded.path === path ? loaded.diagram : undefined;\n}\n\n/** The workflow diagram, its legend and the cases' `path` highlights, in a dialog opened from the menu. */\nfunction HowItWorks({ maquette, source, labels, open, onOpenChange }: {\n  readonly maquette: Maquette; readonly source: DiagramSource; readonly labels: MaquetteLabels; readonly open: boolean; readonly onOpenChange: (open: boolean) => void;\n}) {\n  const [shown, setShown] = useState<string | null>(null);\n  const loaded = useLinked(source.read, source.path, open);\n  const diagram = maquette.diagram ?? loaded;\n  const highlighted = maquette.cases.filter(item => item.path.length > 0);\n  if (!maquette.diagram && !source.path) return null;\n  return <Dialog open={open} onOpenChange={onOpenChange}>\n    <DialogContent data-testid=\"maquette-how\" className=\"max-h-[85dvh] overflow-y-auto\">\n      <DialogHeader><DialogTitle>{labels.howItWorks}</DialogTitle></DialogHeader>\n      {diagram ? <DiagramView diagram={diagram} highlight={highlighted.find(item => item.name === shown)?.path ?? diagram.path} labels={labels} />\n        : diagram === null ? <Alert variant=\"destructive\" data-testid=\"maquette-how-error\"><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.diagramUnavailable}</AlertTitle></Alert>\n          : <p role=\"status\" className=\"m-0 text-sm text-muted-foreground\">{labels.loading}</p>}\n      {highlighted.length > 0 && <div role=\"group\" className=\"flex flex-wrap gap-2\">\n        {highlighted.map(item => <Button key={item.name} type=\"button\" size=\"sm\" variant={shown === item.name ? 'default' : 'outline'} aria-pressed={shown === item.name}\n          data-testid=\"maquette-case\" className=\"pointer-coarse:min-h-11\" onClick={() => setShown(current => current === item.name ? null : item.name)}>{item.name}</Button>)}\n      </div>}\n    </DialogContent>\n  </Dialog>;\n}\n\n/** Where a linked diagram is read from: its resolved path and the reader (both absent for an inline workflow, or with no reader). */\ninterface DiagramSource { readonly path: string | undefined; readonly read: MaquetteRead | undefined }\n\nfunction Walkthrough({ maquette, labels, fragment, path, comments, read }: {\n  readonly maquette: Maquette; readonly labels: MaquetteLabels; readonly fragment: string | undefined;\n  readonly path: string | undefined; readonly comments: MaquetteComments | undefined; readonly read: MaquetteRead | undefined;\n}) {\n  const exists = (id: string | undefined): id is string => !!id && maquette.screens.some(screen => screen.id === id);\n  const linked = screenFromFragment(fragment);\n  const [walk, setWalk] = useState<Walk>(() => ({ history: [exists(linked) ? linked : maquette.start], tour: null }));\n  const [how, setHow] = useState(false);\n  const seen = useRef(new Set<string>());\n  const heading = useRef<HTMLHeadingElement>(null);\n  const moved = useRef(false);\n  const touch = useRef<{ x: number; y: number } | null>(null);\n  const screens = maquette.screens;\n  const current: MaquetteScreen = screens.find(screen => screen.id === walk.history.at(-1)) ?? screens[0]!;\n  const position = screens.indexOf(current);\n  const tour: MaquetteCase | undefined = walk.tour ? maquette.cases.find(item => item.name === walk.tour!.name) : undefined;\n  const tours = useMemo(() => maquette.cases.filter(item => item.steps.length > 0), [maquette]);\n  const titleOf = (id: string) => screens.find(screen => screen.id === id)?.title ?? id;\n  // Goto blocks pulse once, the first time their screen is shown.\n  // Decided once per shown screen, so a re-render of the same screen (the host menu updating) does not end the pulse.\n  const shown = useRef<{ readonly id: string; readonly first: boolean } | undefined>(undefined);\n  const view = shown.current?.id === current.id ? shown.current : { id: current.id, first: !seen.current.has(current.id) };\n  shown.current = view;\n  const firstView = view.first;\n  useEffect(() => { seen.current.add(current.id); }, [current.id]);\n\n  const move = (next: Walk) => { moved.current = true; setWalk(next); };\n  const go = (id: string) => { if (exists(id) && id !== current.id) move({ history: [...walk.history, id], tour: null }); };\n  const step = (delta: number) => {\n    if (tour && walk.tour) {\n      const index = walk.tour.index + delta, target = tour.steps[index];\n      if (target) move({ history: [...walk.history, target.screen], tour: { name: tour.name, index } });\n      return;\n    }\n    const target = screens[position + delta];\n    if (target) move({ history: [...walk.history, target.id], tour: null });\n  };\n  const back = () => { if (walk.history.length > 1) move({ history: walk.history.slice(0, -1), tour: null }); };\n  const startTour = (item: MaquetteCase) => move({ history: [...walk.history, item.steps[0]!.screen], tour: { name: item.name, index: 0 } });\n  // A later `#screen=<id>` (the PM's \"see screen 2\" link) opens that screen.\n  useEffect(() => { if (exists(linked) && linked !== walk.history.at(-1)) setWalk(previous => ({ history: [...previous.history, linked], tour: null })); }, [linked]); // eslint-disable-line react-hooks/exhaustive-deps\n  // After a move, keyboard focus starts on the new screen, so Tab continues inside the screen just opened.\n  useEffect(() => { if (moved.current) { moved.current = false; heading.current?.focus(); } }, [walk]);\n\n  const index = tour && walk.tour ? walk.tour.index : position, count = tour ? tour.steps.length : screens.length;\n  const target = (block: MaquetteBlock) => maquetteTarget(path, current.id, block.id);\n  // While pointing, the session draws its own numbered pins over the page; the small numbers on the blocks are for afterwards.\n  const pins = (block: MaquetteBlock) => comments && !comments.active ? comments.pins.filter(pin => pin.target === target(block)).map(pin => pin.number) : [];\n  const links: MaquetteLinks = { go, hint: id => labels.opens(titleOf(id)), target, pins };\n  const source: DiagramSource = { path: maquette.diagramLink && read ? diagramPathOf(path ?? '', maquette.diagramLink) : undefined, read };\n  const workflow = !!maquette.diagram || !!source.path;\n  // Inside a host bar with its own \"…\" menu, the tours and \"How it works\" go there (one menu, not two).\n  const publish = useContext(MaquetteMenuContext);\n  const latestTour = useRef(startTour); latestTour.current = startTour;\n  useEffect(() => {\n    if (!publish) return undefined;\n    const items: MaquetteMenuEntry[] = [\n      ...(tour ? [] : tours).map((item, i) => ({ id: `tour-${i}`, label: item.name, icon: <CompassIcon aria-hidden=\"true\" />, testId: 'maquette-tour', separatorBefore: i === 0, onSelect: () => latestTour.current(item) })),\n      ...(workflow && !tour ? [{ id: 'how-it-works', label: labels.howItWorks, icon: <WorkflowIcon aria-hidden=\"true\" />, testId: 'maquette-how-open', separatorBefore: true, onSelect: () => setHow(true) }] : []),\n    ];\n    publish(items);\n    return () => publish([]);\n  }, [publish, tours, workflow, tour, labels.howItWorks]);\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || (event.target as Element).closest?.(TYPING)) return;\n    if (event.altKey) { if (event.key === 'ArrowLeft') { event.preventDefault(); back(); } return; }\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); step(event.key === 'ArrowLeft' ? -1 : 1); }\n  };\n  const onTouchStart = (event: TouchEvent) => { const point = event.touches[0]; touch.current = point ? { x: point.clientX, y: point.clientY } : null; };\n  const onTouchEnd = (event: TouchEvent) => {\n    const start = touch.current, point = event.changedTouches[0];\n    touch.current = null;\n    if (!start || !point) return;\n    const dx = point.clientX - start.x, dy = point.clientY - start.y;\n    if (Math.abs(dx) > 56 && Math.abs(dx) > Math.abs(dy) * 1.5) step(dx < 0 ? 1 : -1);\n  };\n  const caption = tour && walk.tour ? tour.steps[walk.tour.index]?.caption : undefined;\n\n  return <div data-testid=\"maquette-walk\" data-screen={current.id} data-tour={tour?.name} className=\"flex min-w-0 flex-col gap-2\" onKeyDown={onKeyDown}>\n    {/* The viewer's own chrome is never pinned, and keeps working while pointing: walk to another screen and pin there too. */}\n    <nav aria-label={labels.screens} data-testid=\"maquette-stepper\" data-feedback-ignore=\"\" className=\"flex items-center gap-1\">\n      {walk.history.length > 1 && <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.back} data-testid=\"maquette-back\" onClick={back}><ArrowLeftIcon aria-hidden=\"true\" /></Button>}\n      <div className=\"flex flex-1 items-center justify-center gap-1\">\n        <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.previous} data-testid=\"maquette-previous\" disabled={index <= 0} onClick={() => step(-1)}><ChevronLeftIcon aria-hidden=\"true\" /></Button>\n        {tour ? <Dots count={count} index={index} label={labels.tourStep(index + 1, count)} />\n          : <span data-testid=\"maquette-position\" className=\"min-w-10 text-center text-sm text-muted-foreground tabular-nums\">{index + 1} / {count}</span>}\n        <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.next} data-testid=\"maquette-next\" disabled={index >= count - 1} onClick={() => step(1)}><ChevronRightIcon aria-hidden=\"true\" /></Button>\n      </div>\n      {comments && <Tooltip><TooltipTrigger render={<Toggle className={ICON} aria-label={labels.comment} pressed={comments.active}\n        data-testid=\"maquette-comment\" onPressedChange={() => comments.point()} />}><MessageSquarePlusIcon aria-hidden=\"true\" /></TooltipTrigger><TooltipContent>{labels.comment}</TooltipContent></Tooltip>}\n      {tour ? <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.endTour} data-testid=\"maquette-end-tour\" onClick={() => setWalk(previous => ({ ...previous, tour: null }))}><XIcon aria-hidden=\"true\" /></Button>\n        : !publish && (tours.length > 0 || workflow) && <DropdownMenu>\n          <DropdownMenuTrigger render={<Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.more} data-testid=\"maquette-menu\" />}><EllipsisIcon aria-hidden=\"true\" /></DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" data-testid=\"maquette-menu-list\">\n            {tours.map(item => <DropdownMenuItem key={item.name} className=\"pointer-coarse:min-h-11\" data-testid=\"maquette-tour\" onClick={() => startTour(item)}><CompassIcon aria-hidden=\"true\" />{item.name}</DropdownMenuItem>)}\n            {tours.length > 0 && workflow && <DropdownMenuSeparator />}\n            {workflow && <DropdownMenuItem className=\"pointer-coarse:min-h-11\" data-testid=\"maquette-how-open\" onClick={() => setHow(true)}><WorkflowIcon aria-hidden=\"true\" />{labels.howItWorks}</DropdownMenuItem>}\n          </DropdownMenuContent>\n        </DropdownMenu>}\n    </nav>\n    {caption && <p data-testid=\"maquette-caption\" className=\"m-0 line-clamp-2 px-1 text-sm text-pretty text-muted-foreground\">{caption}</p>}\n\n    <div className={maquette.device === 'phone' ? 'mx-auto flex w-full max-w-sm flex-col gap-2' : 'flex min-w-0 flex-col gap-2'}>\n      <div className=\"min-w-0\" data-hint={firstView ? 'pulse' : undefined} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>\n        <Card data-testid=\"maquette-frame\" data-device={maquette.device ?? 'panel'}><CardContent>\n          <MaquetteScreenView key={current.id} maquette={maquette} screen={current} links={links} labels={labels} headingRef={heading} />\n        </CardContent></Card>\n      </div>\n      {current.note && <div className=\"flex min-w-0 items-center gap-1 px-1\">\n        <p data-testid=\"maquette-note\" title={current.note} className=\"m-0 min-w-0 flex-1 truncate text-xs text-muted-foreground\">{current.note}</p>\n        <Popover>\n          <PopoverTrigger render={<Button type=\"button\" variant=\"ghost\" size=\"icon-xs\" className={ICON} aria-label={labels.aboutScreen} data-testid=\"maquette-note-more\" />}><InfoIcon aria-hidden=\"true\" /></PopoverTrigger>\n          <PopoverContent align=\"end\" data-testid=\"maquette-note-full\">{current.note}</PopoverContent>\n        </Popover>\n      </div>}\n    </div>\n    <p aria-live=\"polite\" className=\"m-0 sr-only\">{labels.showing(current.title)}</p>\n    <HowItWorks maquette={maquette} source={source} labels={labels} open={how} onOpenChange={setHow} />\n  </div>;\n}\n\n/** A maquette file drawn one screen at a time; a newer format version shows a notice, an unreadable file an inline error. */\nexport function MaquetteViewer({ text, fragment, locale, labels: given, path, comments, read }: MaquetteViewerProps) {\n  const labels = useMemo(() => maquetteLabelsFor(locale, given), [locale, given]);\n  const parsed = useMemo(() => parseMaquette(text), [text]);\n  const newer = parsed.version !== undefined && parsed.version > MAQUETTE_FORMAT_VERSION;\n  const notice = newer && <Alert data-testid=\"maquette-newer\"><InfoIcon aria-hidden=\"true\" /><AlertTitle>{labels.newerTitle}</AlertTitle><AlertDescription>{labels.newer(parsed.version!)}</AlertDescription></Alert>;\n  return <section data-boring=\"maquette-viewer\" data-state={parsed.kind} aria-label={parsed.kind === 'ok' ? parsed.maquette.title || labels.kind : labels.kind}\n    className=\"mx-auto flex w-full max-w-5xl min-w-0 flex-col gap-2 px-3 pt-1 pb-4 sm:px-6\">\n    {notice}\n    {parsed.kind === 'ok' ? <Walkthrough maquette={parsed.maquette} labels={labels} fragment={fragment} path={path} comments={comments} read={read} />\n      : <Alert variant=\"destructive\" data-testid=\"maquette-error\" data-reason={parsed.reason}><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.errorTitle}</AlertTitle>\n        <AlertDescription>{parsed.reason === 'json' ? labels.invalidJson : labels.invalidShape}</AlertDescription></Alert>}\n  </section>;\n}\n\n/**\n * The artifact kind of a maquette file (structurally an `ArtifactKind` of pi-chat): it matches `*.maquette.json`, names it, gives its icon\n * and draws it with `MaquetteViewer`. Pass it, or your own, in `artifactKinds`; kinds an app passes are consulted before the built-in one.\n */\nexport interface MaquetteKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: {\n    readonly text: string; readonly fragment?: string | undefined;\n    readonly artifact?: { readonly target: { readonly resource: { readonly path: string } } } | undefined; readonly read?: MaquetteRead | undefined;\n  }) => ReactNode;\n}\n\n/**\n * A maquette kind in `locale` (\"Mock-up\" in English, \"Maquette\" in French) with any word overridden. `comments` (the feedback item's\n * `usePointComments(session)`) adds the comment icon; pass a fresh kind when it changes.\n */\nexport function createMaquetteKind({ locale, labels, comments }: {\n  readonly locale?: MaquetteLocale | undefined; readonly labels?: Partial<MaquetteLabels> | undefined; readonly comments?: MaquetteComments | undefined;\n} = {}): MaquetteKind {\n  return {\n    match: target => isMaquettePath(target.resource.path),\n    label: maquetteLabelsFor(locale, labels).kind,\n    icon: LayoutTemplateIcon,\n    renderer: ({ text, fragment, artifact, read }) => <MaquetteViewer text={text} fragment={fragment} locale={locale} labels={labels}\n      path={artifact?.target.resource.path} comments={comments} read={read} />,\n  };\n}\n\n/** The built-in maquette kind, in English. */\nexport const maquetteKind: MaquetteKind = createMaquetteKind();\n",
+      "content": "'use client';\n\n// The maquette viewer: a PM agent's `*.maquette.json` mock-up, one screen at a time. The screen is the content; the chrome is one thin bar\n// of icons: Back, ‹ 2 / 5 › (also arrow keys and swipe) and a menu holding the guided tours and \"How it works\" (the workflow, in a dialog).\n// During a tour the bar shows the step dots and ×, with the step's caption under it. `maquetteKind` is the kind the pi-app artifact panel\n// uses by default for `.maquette.json` files; an app's own kind in `artifactKinds` wins. It draws data only: nothing in the file runs.\n// The workflow is drawn by the diagram-viewer item's `DiagramView`, inline or from a linked `*.diagram.json`. With `comments` (the feedback\n// item's `usePointComments`, structurally) one more icon enters point mode on the screen: a tap on a block pins a note that names the\n// maquette path, the screen id and the block id; the pins of the current screen show as small numbers on their blocks.\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentType, KeyboardEvent, ReactNode, TouchEvent } from 'react';\nimport { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, CompassIcon, EllipsisIcon, InfoIcon, LayoutTemplateIcon, MessageSquarePlusIcon, TriangleAlertIcon, WorkflowIcon, XIcon } from 'lucide-react';\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { parseDiagram } from '../diagram-viewer/diagram';\nimport type { Diagram } from '../diagram-viewer/diagram';\nimport { DiagramView } from '../diagram-viewer/diagram-view';\nimport { MAQUETTE_FORMAT_VERSION, diagramPathOf, isMaquettePath, parseMaquette, screenFromFragment } from './maquette';\nimport type { Maquette, MaquetteBlock, MaquetteCase, MaquetteScreen } from './maquette';\nimport { maquetteLabelsFor } from './maquette-labels';\nimport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\nimport { MaquetteScreenView } from './maquette-blocks';\nimport type { MaquetteLinks } from './maquette-blocks';\n\nexport { MAQUETTE_FORMAT_VERSION, diagramPathOf, isMaquettePath, linksOf, parseMaquette, screenFromFragment } from './maquette';\nexport type { Maquette, MaquetteBlock, MaquetteBlockV1, MaquetteCase, MaquetteFileV1, MaquetteParse, MaquetteScreen, MaquetteState, MaquetteTransition, MaquetteWorkflow } from './maquette';\nexport { defaultMaquetteLabels, frenchMaquetteLabels, maquetteLabelsFor } from './maquette-labels';\nexport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\n\n/**\n * Comment pins, structurally the feedback item's `usePointComments(session)`: pass it and the bar shows a comment icon; omit it (no feedback\n * session in the host) and nothing shows.\n */\nexport interface MaquetteComments {\n  /** Point mode is on. */\n  readonly active: boolean;\n  /** Enters point mode (the person taps blocks to pin notes), or ends it when it is on. */\n  readonly point: () => void;\n  /** The pins taken: each one's number and the `data-feedback-id` its element sits in. */\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n}\n\n/** Reads another file of the workspace as text (the artifact panel passes one): a linked `*.diagram.json`. Undefined when it cannot. */\nexport type MaquetteRead = (path: string) => Promise<string | undefined>;\n\n/** A block's `data-feedback-id`: `maquette:<path>#screen=<screen id>&block=<block id>`. */\nexport const maquetteTarget = (path: string | undefined, screen: string, block: string): string => `maquette:${path ?? ''}#screen=${screen}&block=${block}`;\n\nexport interface MaquetteViewerProps {\n  /** The file's text (JSON). */\n  readonly text: string;\n  /** The file's path: named by comment pins, and the folder a linked diagram is read from. */\n  readonly path?: string | undefined;\n  /** Comment pins on blocks (the feedback item's `usePointComments`). */\n  readonly comments?: MaquetteComments | undefined;\n  /** Reads a linked `*.diagram.json`; without it a linked workflow is not offered. */\n  readonly read?: MaquetteRead | undefined;\n  /** The page's URL fragment: `screen=<id>` opens that screen (and follows later changes). */\n  readonly fragment?: string | undefined;\n  /** The base words: English by default. */\n  readonly locale?: MaquetteLocale | undefined;\n  /** Any word over the locale's. */\n  readonly labels?: Partial<MaquetteLabels> | undefined;\n}\n\n/** Where the person is: the screens visited (the last is shown) and the guided tour under way. */\ninterface Walk { readonly history: readonly string[]; readonly tour: { readonly name: string; readonly index: number } | null }\n\n/**\n * A host bar that owns the one \"…\" menu (the pi-app artifact panel) provides this: the viewer then publishes its tours and \"How it works\"\n * there instead of drawing a second \"…\" menu beside the screen counter. Without a provider the viewer keeps its own menu.\n */\nexport interface MaquetteMenuEntry { readonly id: string; readonly label: string; readonly icon: ReactNode; readonly testId: string; readonly separatorBefore: boolean; readonly onSelect: () => void }\nexport const MaquetteMenuContext = createContext<((items: readonly MaquetteMenuEntry[]) => void) | undefined>(undefined);\n\nconst TYPING = 'input, select, textarea, [contenteditable=\"true\"]';\nconst ICON = 'pointer-coarse:min-h-11 pointer-coarse:min-w-11';\n\n/** One dot per tour step, the current one in the primary colour. */\nfunction Dots({ count, index, label }: { readonly count: number; readonly index: number; readonly label: string }) {\n  return <svg role=\"img\" aria-label={label} data-testid=\"maquette-dots\" width={count * 12} height=\"8\" viewBox={`0 0 ${count * 12} 8`} className=\"shrink-0\">\n    {Array.from({ length: count }, (_, i) => <circle key={i} cx={i * 12 + 6} cy=\"4\" r=\"3\" className={i === index ? 'fill-primary' : 'fill-muted-foreground/30'} />)}\n  </svg>;\n}\n\n/** The diagram of a linked `*.diagram.json`, read when the dialog opens: undefined while reading, null when it cannot be read. */\nfunction useLinked(read: MaquetteRead | undefined, path: string | undefined, open: boolean): Diagram | null | undefined {\n  const [loaded, setLoaded] = useState<{ readonly path: string; readonly diagram: Diagram | null }>();\n  useEffect(() => {\n    if (!open || !path || !read || loaded?.path === path) return undefined;\n    let off = false;\n    read(path).then(text => text === undefined ? null : parseDiagram(text), () => null).then(parsed => {\n      if (!off) setLoaded({ path, diagram: parsed?.kind === 'ok' ? parsed.diagram : null });\n    });\n    return () => { off = true; };\n  }, [open, path, read, loaded?.path]);\n  return loaded && loaded.path === path ? loaded.diagram : undefined;\n}\n\n/** The workflow diagram, its legend and the cases' `path` highlights, in a dialog opened from the menu. */\nfunction HowItWorks({ maquette, source, labels, open, onOpenChange }: {\n  readonly maquette: Maquette; readonly source: DiagramSource; readonly labels: MaquetteLabels; readonly open: boolean; readonly onOpenChange: (open: boolean) => void;\n}) {\n  const [shown, setShown] = useState<string | null>(null);\n  const loaded = useLinked(source.read, source.path, open);\n  const diagram = maquette.diagram ?? loaded;\n  const highlighted = maquette.cases.filter(item => item.path.length > 0);\n  if (!maquette.diagram && !source.path) return null;\n  return <Dialog open={open} onOpenChange={onOpenChange}>\n    <DialogContent data-testid=\"maquette-how\" className=\"max-h-[85dvh] overflow-y-auto\">\n      <DialogHeader><DialogTitle>{labels.howItWorks}</DialogTitle></DialogHeader>\n      {diagram ? <DiagramView diagram={diagram} highlight={highlighted.find(item => item.name === shown)?.path ?? diagram.path} labels={labels} />\n        : diagram === null ? <Alert variant=\"destructive\" data-testid=\"maquette-how-error\"><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.diagramUnavailable}</AlertTitle></Alert>\n          : <p role=\"status\" className=\"m-0 text-sm text-muted-foreground\">{labels.loading}</p>}\n      {highlighted.length > 0 && <div role=\"group\" className=\"flex flex-wrap gap-2\">\n        {highlighted.map(item => <Button key={item.name} type=\"button\" size=\"sm\" variant={shown === item.name ? 'default' : 'outline'} aria-pressed={shown === item.name}\n          data-testid=\"maquette-case\" className=\"pointer-coarse:min-h-11\" onClick={() => setShown(current => current === item.name ? null : item.name)}>{item.name}</Button>)}\n      </div>}\n    </DialogContent>\n  </Dialog>;\n}\n\n/** Where a linked diagram is read from: its resolved path and the reader (both absent for an inline workflow, or with no reader). */\ninterface DiagramSource { readonly path: string | undefined; readonly read: MaquetteRead | undefined }\n\nfunction Walkthrough({ maquette, labels, fragment, path, comments, read }: {\n  readonly maquette: Maquette; readonly labels: MaquetteLabels; readonly fragment: string | undefined;\n  readonly path: string | undefined; readonly comments: MaquetteComments | undefined; readonly read: MaquetteRead | undefined;\n}) {\n  const exists = (id: string | undefined): id is string => !!id && maquette.screens.some(screen => screen.id === id);\n  const linked = screenFromFragment(fragment);\n  const [walk, setWalk] = useState<Walk>(() => ({ history: [exists(linked) ? linked : maquette.start], tour: null }));\n  const [how, setHow] = useState(false);\n  const seen = useRef(new Set<string>());\n  const heading = useRef<HTMLHeadingElement>(null);\n  const moved = useRef(false);\n  const touch = useRef<{ x: number; y: number } | null>(null);\n  const screens = maquette.screens;\n  const current: MaquetteScreen = screens.find(screen => screen.id === walk.history.at(-1)) ?? screens[0]!;\n  const position = screens.indexOf(current);\n  const tour: MaquetteCase | undefined = walk.tour ? maquette.cases.find(item => item.name === walk.tour!.name) : undefined;\n  const tours = useMemo(() => maquette.cases.filter(item => item.steps.length > 0), [maquette]);\n  const titleOf = (id: string) => screens.find(screen => screen.id === id)?.title ?? id;\n  // Goto blocks pulse once, the first time their screen is shown.\n  // Decided once per shown screen, so a re-render of the same screen (the host menu updating) does not end the pulse.\n  const shown = useRef<{ readonly id: string; readonly first: boolean } | undefined>(undefined);\n  const view = shown.current?.id === current.id ? shown.current : { id: current.id, first: !seen.current.has(current.id) };\n  shown.current = view;\n  const firstView = view.first;\n  useEffect(() => { seen.current.add(current.id); }, [current.id]);\n\n  const move = (next: Walk) => { moved.current = true; setWalk(next); };\n  const go = (id: string) => { if (exists(id) && id !== current.id) move({ history: [...walk.history, id], tour: null }); };\n  const step = (delta: number) => {\n    if (tour && walk.tour) {\n      const index = walk.tour.index + delta, target = tour.steps[index];\n      if (target) move({ history: [...walk.history, target.screen], tour: { name: tour.name, index } });\n      return;\n    }\n    const target = screens[position + delta];\n    if (target) move({ history: [...walk.history, target.id], tour: null });\n  };\n  const back = () => { if (walk.history.length > 1) move({ history: walk.history.slice(0, -1), tour: null }); };\n  const startTour = (item: MaquetteCase) => move({ history: [...walk.history, item.steps[0]!.screen], tour: { name: item.name, index: 0 } });\n  // A later `#screen=<id>` (the PM's \"see screen 2\" link) opens that screen.\n  useEffect(() => { if (exists(linked) && linked !== walk.history.at(-1)) setWalk(previous => ({ history: [...previous.history, linked], tour: null })); }, [linked]); // eslint-disable-line react-hooks/exhaustive-deps\n  // After a move, keyboard focus starts on the new screen, so Tab continues inside the screen just opened.\n  useEffect(() => { if (moved.current) { moved.current = false; heading.current?.focus(); } }, [walk]);\n\n  const index = tour && walk.tour ? walk.tour.index : position, count = tour ? tour.steps.length : screens.length;\n  const target = (block: MaquetteBlock) => maquetteTarget(path, current.id, block.id);\n  // While pointing, the session draws its own numbered pins over the page; the small numbers on the blocks are for afterwards.\n  const pins = (block: MaquetteBlock) => comments && !comments.active ? comments.pins.filter(pin => pin.target === target(block)).map(pin => pin.number) : [];\n  const links: MaquetteLinks = { go, hint: id => labels.opens(titleOf(id)), target, pins };\n  const source: DiagramSource = { path: maquette.diagramLink && read ? diagramPathOf(path ?? '', maquette.diagramLink) : undefined, read };\n  const workflow = !!maquette.diagram || !!source.path;\n  // Inside a host bar with its own \"…\" menu, the tours and \"How it works\" go there (one menu, not two).\n  const publish = useContext(MaquetteMenuContext);\n  const latestTour = useRef(startTour); latestTour.current = startTour;\n  useEffect(() => {\n    if (!publish) return undefined;\n    const items: MaquetteMenuEntry[] = [\n      ...(tour ? [] : tours).map((item, i) => ({ id: `tour-${i}`, label: item.name, icon: <CompassIcon aria-hidden=\"true\" />, testId: 'maquette-tour', separatorBefore: i === 0, onSelect: () => latestTour.current(item) })),\n      ...(workflow && !tour ? [{ id: 'how-it-works', label: labels.howItWorks, icon: <WorkflowIcon aria-hidden=\"true\" />, testId: 'maquette-how-open', separatorBefore: true, onSelect: () => setHow(true) }] : []),\n    ];\n    publish(items);\n    return () => publish([]);\n  }, [publish, tours, workflow, tour, labels.howItWorks]);\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || (event.target as Element).closest?.(TYPING)) return;\n    if (event.altKey) { if (event.key === 'ArrowLeft') { event.preventDefault(); back(); } return; }\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); step(event.key === 'ArrowLeft' ? -1 : 1); }\n  };\n  const onTouchStart = (event: TouchEvent) => { const point = event.touches[0]; touch.current = point ? { x: point.clientX, y: point.clientY } : null; };\n  const onTouchEnd = (event: TouchEvent) => {\n    const start = touch.current, point = event.changedTouches[0];\n    touch.current = null;\n    if (!start || !point) return;\n    const dx = point.clientX - start.x, dy = point.clientY - start.y;\n    if (Math.abs(dx) > 56 && Math.abs(dx) > Math.abs(dy) * 1.5) step(dx < 0 ? 1 : -1);\n  };\n  const caption = tour && walk.tour ? tour.steps[walk.tour.index]?.caption : undefined;\n\n  return <div data-testid=\"maquette-walk\" data-screen={current.id} data-tour={tour?.name} className=\"flex min-w-0 flex-col gap-2\" onKeyDown={onKeyDown}>\n    {/* The viewer's own chrome is never pinned, and keeps working while pointing: walk to another screen and pin there too. */}\n    <nav aria-label={labels.screens} data-testid=\"maquette-stepper\" data-feedback-ignore=\"\" className=\"flex items-center gap-1\">\n      {walk.history.length > 1 && <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.back} data-testid=\"maquette-back\" onClick={back}><ArrowLeftIcon aria-hidden=\"true\" /></Button>}\n      <div className=\"flex flex-1 items-center justify-center gap-1\">\n        <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.previous} data-testid=\"maquette-previous\" disabled={index <= 0} onClick={() => step(-1)}><ChevronLeftIcon aria-hidden=\"true\" /></Button>\n        {tour ? <Dots count={count} index={index} label={labels.tourStep(index + 1, count)} />\n          : <span data-testid=\"maquette-position\" className=\"min-w-10 text-center text-sm text-muted-foreground tabular-nums\">{index + 1} / {count}</span>}\n        <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.next} data-testid=\"maquette-next\" disabled={index >= count - 1} onClick={() => step(1)}><ChevronRightIcon aria-hidden=\"true\" /></Button>\n      </div>\n      {comments && <Tooltip><TooltipTrigger render={<Toggle className={ICON} aria-label={labels.comment} pressed={comments.active}\n        data-testid=\"maquette-comment\" onPressedChange={() => comments.point()} />}><MessageSquarePlusIcon aria-hidden=\"true\" /></TooltipTrigger><TooltipContent>{labels.comment}</TooltipContent></Tooltip>}\n      {tour ? <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.endTour} data-testid=\"maquette-end-tour\" onClick={() => setWalk(previous => ({ ...previous, tour: null }))}><XIcon aria-hidden=\"true\" /></Button>\n        : !publish && (tours.length > 0 || workflow) && <DropdownMenu>\n          <DropdownMenuTrigger render={<Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className={ICON} aria-label={labels.more} data-testid=\"maquette-menu\" />}><EllipsisIcon aria-hidden=\"true\" /></DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" data-testid=\"maquette-menu-list\">\n            {tours.map(item => <DropdownMenuItem key={item.name} className=\"pointer-coarse:min-h-11\" data-testid=\"maquette-tour\" onClick={() => startTour(item)}><CompassIcon aria-hidden=\"true\" />{item.name}</DropdownMenuItem>)}\n            {tours.length > 0 && workflow && <DropdownMenuSeparator />}\n            {workflow && <DropdownMenuItem className=\"pointer-coarse:min-h-11\" data-testid=\"maquette-how-open\" onClick={() => setHow(true)}><WorkflowIcon aria-hidden=\"true\" />{labels.howItWorks}</DropdownMenuItem>}\n          </DropdownMenuContent>\n        </DropdownMenu>}\n    </nav>\n    {caption && <p data-testid=\"maquette-caption\" className=\"m-0 line-clamp-2 px-1 text-sm text-pretty text-muted-foreground\">{caption}</p>}\n\n    <div className={maquette.device === 'phone' ? 'mx-auto flex w-full max-w-sm flex-col gap-2' : 'flex min-w-0 flex-col gap-2'}>\n      <div className=\"min-w-0\" data-hint={firstView ? 'pulse' : undefined} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>\n        <Card data-testid=\"maquette-frame\" data-device={maquette.device ?? 'panel'}><CardContent>\n          <MaquetteScreenView key={current.id} maquette={maquette} screen={current} links={links} labels={labels} headingRef={heading} />\n        </CardContent></Card>\n      </div>\n      {current.note && <div className=\"flex min-w-0 items-center gap-1 px-1\">\n        <p data-testid=\"maquette-note\" title={current.note} className=\"m-0 min-w-0 flex-1 truncate text-xs text-muted-foreground\">{current.note}</p>\n        <Popover>\n          <PopoverTrigger render={<Button type=\"button\" variant=\"ghost\" size=\"icon-xs\" className={ICON} aria-label={labels.aboutScreen} data-testid=\"maquette-note-more\" />}><InfoIcon aria-hidden=\"true\" /></PopoverTrigger>\n          <PopoverContent align=\"end\" data-testid=\"maquette-note-full\">{current.note}</PopoverContent>\n        </Popover>\n      </div>}\n    </div>\n    <p aria-live=\"polite\" className=\"m-0 sr-only\">{labels.showing(current.title)}</p>\n    <HowItWorks maquette={maquette} source={source} labels={labels} open={how} onOpenChange={setHow} />\n  </div>;\n}\n\n/** A maquette file drawn one screen at a time; a newer format version shows a notice, an unreadable file an inline error. */\nexport function MaquetteViewer({ text, fragment, locale, labels: given, path, comments, read }: MaquetteViewerProps) {\n  const labels = useMemo(() => maquetteLabelsFor(locale, given), [locale, given]);\n  const parsed = useMemo(() => parseMaquette(text), [text]);\n  const newer = parsed.version !== undefined && parsed.version > MAQUETTE_FORMAT_VERSION;\n  const notice = newer && <Alert data-testid=\"maquette-newer\"><InfoIcon aria-hidden=\"true\" /><AlertTitle>{labels.newerTitle}</AlertTitle><AlertDescription>{labels.newer(parsed.version!)}</AlertDescription></Alert>;\n  return <section data-boring=\"maquette-viewer\" data-state={parsed.kind} aria-label={parsed.kind === 'ok' ? parsed.maquette.title || labels.kind : labels.kind}\n    className=\"mx-auto flex w-full max-w-5xl min-w-0 flex-col gap-2 px-3 pt-1 pb-4 sm:px-6\">\n    {notice}\n    {parsed.kind === 'ok' ? <Walkthrough maquette={parsed.maquette} labels={labels} fragment={fragment} path={path} comments={comments} read={read} />\n      : <Alert variant=\"destructive\" data-testid=\"maquette-error\" data-reason={parsed.reason}><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.errorTitle}</AlertTitle>\n        <AlertDescription>{parsed.reason === 'json' ? labels.invalidJson : labels.invalidShape}</AlertDescription></Alert>}\n  </section>;\n}\n\n/**\n * The artifact kind of a maquette file (structurally an `ArtifactKind` of pi-artifacts): it matches `*.maquette.json`, names it, gives its icon\n * and draws it with `MaquetteViewer`. Pass it, or your own, in `artifactKinds`; kinds an app passes are consulted before the built-in one.\n */\nexport interface MaquetteKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: {\n    readonly text: string; readonly fragment?: string | undefined;\n    readonly artifact?: { readonly target: { readonly resource: { readonly path: string } } } | undefined; readonly read?: MaquetteRead | undefined;\n  }) => ReactNode;\n}\n\n/**\n * A maquette kind in `locale` (\"Mock-up\" in English, \"Maquette\" in French) with any word overridden. `comments` (the feedback item's\n * `usePointComments(session)`) adds the comment icon; pass a fresh kind when it changes.\n */\nexport function createMaquetteKind({ locale, labels, comments }: {\n  readonly locale?: MaquetteLocale | undefined; readonly labels?: Partial<MaquetteLabels> | undefined; readonly comments?: MaquetteComments | undefined;\n} = {}): MaquetteKind {\n  return {\n    match: target => isMaquettePath(target.resource.path),\n    label: maquetteLabelsFor(locale, labels).kind,\n    icon: LayoutTemplateIcon,\n    renderer: ({ text, fragment, artifact, read }) => <MaquetteViewer text={text} fragment={fragment} locale={locale} labels={labels}\n      path={artifact?.target.resource.path} comments={comments} read={read} />,\n  };\n}\n\n/** The built-in maquette kind, in English. */\nexport const maquetteKind: MaquetteKind = createMaquetteKind();\n",
       "type": "registry:component",
       "target": "components/maquette-viewer/maquette-viewer.tsx"
     }

package/r/markdown-editor.json

@@ -4,8 +4,8 @@
   "title": "Markdown editor",
   "description": "A host-owned styled wrapper over the concrete borrowed Markdown controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.11",
-    "@hachej/boring-files@^0.4.11",
+    "@hachej/boring-ui-kit@^0.4.12",
+    "@hachej/boring-files@^0.4.12",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -24,7 +24,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/button.json",
     "button",
     "toggle",
     "dropdown-menu"

package/r/mockup-viewer.json

@@ -10,7 +10,7 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.11/r/viewers.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.12/r/viewers.json",
     "badge",
     "toggle",
     "tooltip"