@hachej/boring-ui-kit 0.4.22 → 0.4.24

package/r/documents.json

@@ -4,22 +4,23 @@
   "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.22",
-    "@hachej/boring-files@^0.4.22",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/button.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-artifacts.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/file-tree.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/viewer-frame.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/viewer-image.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/viewer-pdf.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-app-kinds.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/file-tree.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-frame.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-image.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-pdf.json",
     "drawer",
     "button",
     "scroll-area",
@@ -28,13 +29,13 @@
   "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 { Suspense, 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 { lazyView, ViewLoading } from '../pi-app/viewer-kinds';\nimport { imageKind } from '../viewer-image/image-kind';\nimport { pdfKind } from '../viewer-pdf/pdf-kind';\nimport { ViewerFrame } from '../viewer-frame/viewer-frame';\nimport { useViewerText } from '../viewer-frame/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  // The panes load the first time an image or a PDF revision opens (D-257), like the file viewer's.\n  const ImagePane = lazyView(imageKind.load), PdfPane = lazyView(pdfKind.load);\n  return <Suspense fallback={<ViewerFrame testId=\"viewer-pending\" title={nameOf(path)} status={status} onClose={onClose}><ViewLoading label={viewer.loading} /></ViewerFrame>}>\n    {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  </Suspense>;\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  // The file on show was renamed, moved or deleted from the list: follow it to its new path, or close it (its old path is gone).\n  const renamed = (from: string, to: string) => { setPath(current => current === from ? to : current); setPinned(undefined); };\n  const deleted = (gone: string) => { setPath(current => { if (current !== gone) return current; dirty.current = false; return undefined; }); setPinned(undefined); };\n  const list = tree ? <div className=\"min-h-0\">\n    <FileTreeView controller={tree} onOpen={choose} onRenamed={renamed} onDeleted={deleted} 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 { Suspense, 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 { lazyView, ViewLoading } from '../pi-app/viewer-kinds';\nimport { defaultKinds } from '../pi-app-kinds/pi-app-kinds';\nimport { imageKind } from '../viewer-image/image-kind';\nimport { pdfKind } from '../viewer-pdf/pdf-kind';\nimport { ViewerFrame } from '../viewer-frame/viewer-frame';\nimport { useViewerText } from '../viewer-frame/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\n/** The viewers' kinds: the pi-app default list, in English. */\nconst kinds = defaultKinds();\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  // The panes load the first time an image or a PDF revision opens (D-257), like the file viewer's.\n  const ImagePane = lazyView(imageKind.load), PdfPane = lazyView(pdfKind.load);\n  return <Suspense fallback={<ViewerFrame testId=\"viewer-pending\" title={nameOf(path)} status={status} onClose={onClose}><ViewLoading label={viewer.loading} /></ViewerFrame>}>\n    {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  </Suspense>;\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, kinds, 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  // The file on show was renamed, moved or deleted from the list: follow it to its new path, or close it (its old path is gone).\n  const renamed = (from: string, to: string) => { setPath(current => current === from ? to : current); setPinned(undefined); };\n  const deleted = (gone: string) => { setPath(current => { if (current !== gone) return current; dirty.current = false; return undefined; }); setPinned(undefined); };\n  const list = tree ? <div className=\"min-h-0\">\n    <FileTreeView controller={tree} onOpen={choose} onRenamed={renamed} onDeleted={deleted} 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"
     },
     {
       "path": "registry/documents/document-sheet.tsx",
-      "content": "'use client';\n\n// One document over the app, for « Voir la fiche »: the host sets `path` from its own handler (for example its `onOpenSpec`) and clears it in\n// `onClose`. The sheet is a full-screen view of the shell (`useShellLayer`): it closes the agent layers when it opens, and Back closes it\n// first. The file is the same viewer the Library opens (editable where the viewer edits). Closing a file with unsaved edits asks first.\n// `onShowAll` adds « Toutes les fiches »: the sheet closes, then the host's navigation runs after the sheet's Back entry is gone.\nimport { useCallback, useEffect, useRef } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerContent, DrawerTitle } from '@/components/ui/drawer';\nimport { afterBack } from '../app-shell/back';\nimport { useShellLayer } from '../app-shell/shell-layer';\nimport { useExclusiveSheet } from '../app-shell/use-exclusive-sheet';\nimport { FileViewer } from '../pi-app/file-viewer';\nimport type { CustomViewers, ViewerOptions } from '../pi-app/artifact-panel';\nimport type { RevisionProvider } from '@hachej/boring-files/revision';\nimport { cn } from '../utils/utils';\nimport { documentsLabels, DocumentsWords } from './words';\nimport type { DocumentsLocale } from './words';\nimport type { DocumentsLabels } from './documents-labels';\n\nexport interface DocumentSheetProps {\n  readonly provider: RevisionProvider;\n  /** The workspace path of the document on show; `undefined` closes the sheet. */\n  readonly path: string | undefined;\n  /** Called when the sheet closes (its close button, a swipe, Back, « Toutes les fiches »): the host clears `path`. */\n  readonly onClose: () => void;\n  /** Adds « Toutes les fiches » to the sheet. The sheet closes first, then this runs. */\n  readonly onShowAll?: (() => void) | undefined;\n  readonly locale?: DocumentsLocale | undefined;\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  readonly className?: string | undefined;\n}\n\n/** The sheet's name in the shell's layers: one sheet of this kind at a time. */\nconst LAYER = 'document';\n\nexport function DocumentSheet({ provider, path, onClose, onShowAll, locale, labels: given, viewers, share, className }: DocumentSheetProps) {\n  const shown = path !== undefined;\n  const labels = documentsLabels(locale, given);\n  // The viewer reports its unsaved edits; a close that would drop them asks first (the Back path too, through the shell layer).\n  const dirty = useRef(false);\n  const report = useCallback((unsaved: boolean) => { dirty.current = unsaved; }, []);\n  const mayLeave = () => !dirty.current || window.confirm(labels.discardChanges);\n  const { open, close, isOpen } = useShellLayer(LAYER, { confirmBack: mayLeave });\n  // The host's `path` decides whether the sheet is on show; a close from the sheet itself reports to the host.\n  useEffect(() => { if (shown) open(); else close(); }, [shown, open, close]);\n  useExclusiveSheet(isOpen, close);\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    if (shown && wasOpen.current && !isOpen) onClose();\n    wasOpen.current = isOpen;\n  }, [isOpen, shown, onClose]);\n  const requestClose = () => { if (mayLeave()) close(); };\n  const title = path === undefined ? labels.sheetTitle : path.split('/').pop() || path;\n  return <DocumentsWords locale={locale}>\n    <Drawer open={isOpen} onOpenChange={next => { if (!next) requestClose(); }} showSwipeHandle swipeDirection=\"down\">\n      <DrawerContent data-testid=\"document-sheet\" className={cn('app-shell max-h-[92dvh] min-h-[92dvh]', className)}>\n        {/* The title is for assistive technology: the viewer's own bar shows the file name. */}\n        <DrawerTitle className=\"sr-only\">{title}</DrawerTitle>\n        {onShowAll && <div className=\"flex shrink-0 justify-end px-3 pt-1 pb-2\">\n          <Button variant=\"ghost\" data-testid=\"document-sheet-all\" onClick={() => { if (!mayLeave()) return; close(); afterBack(onShowAll); }}>{labels.allDocuments}</Button>\n        </div>}\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]\">\n          {path !== undefined && <FileViewer key={path} path={path} locator={provider.locate(path)} onUnsavedChange={report}\n            options={{ client: provider, identity: provider.identity, ...(viewers ? { viewers } : {}), ...(share ? { share } : {}) }} onClose={requestClose} />}\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </DocumentsWords>;\n}\n",
+      "content": "'use client';\n\n// One document over the app, for « Voir la fiche »: the host sets `path` from its own handler (for example its `onOpenSpec`) and clears it in\n// `onClose`. The sheet is a full-screen view of the shell (`useShellLayer`): it closes the agent layers when it opens, and Back closes it\n// first. The file is the same viewer the Library opens (editable where the viewer edits). Closing a file with unsaved edits asks first.\n// `onShowAll` adds « Toutes les fiches »: the sheet closes, then the host's navigation runs after the sheet's Back entry is gone.\nimport { useCallback, useEffect, useRef } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerContent, DrawerTitle } from '@/components/ui/drawer';\nimport { afterBack } from '../app-shell/back';\nimport { useShellLayer } from '../app-shell/shell-layer';\nimport { useExclusiveSheet } from '../app-shell/use-exclusive-sheet';\nimport { FileViewer } from '../pi-app/file-viewer';\nimport type { CustomViewers, ViewerOptions } from '../pi-app/artifact-panel';\nimport { defaultKinds } from '../pi-app-kinds/pi-app-kinds';\nimport type { RevisionProvider } from '@hachej/boring-files/revision';\nimport { cn } from '../utils/utils';\nimport { documentsLabels, DocumentsWords } from './words';\nimport type { DocumentsLocale } from './words';\nimport type { DocumentsLabels } from './documents-labels';\n\nexport interface DocumentSheetProps {\n  readonly provider: RevisionProvider;\n  /** The workspace path of the document on show; `undefined` closes the sheet. */\n  readonly path: string | undefined;\n  /** Called when the sheet closes (its close button, a swipe, Back, « Toutes les fiches »): the host clears `path`. */\n  readonly onClose: () => void;\n  /** Adds « Toutes les fiches » to the sheet. The sheet closes first, then this runs. */\n  readonly onShowAll?: (() => void) | undefined;\n  readonly locale?: DocumentsLocale | undefined;\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  readonly className?: string | undefined;\n}\n\n/** The sheet's name in the shell's layers: one sheet of this kind at a time. */\nconst LAYER = 'document';\n/** The viewer's kinds: the pi-app default list, in English. */\nconst kinds = defaultKinds();\n\nexport function DocumentSheet({ provider, path, onClose, onShowAll, locale, labels: given, viewers, share, className }: DocumentSheetProps) {\n  const shown = path !== undefined;\n  const labels = documentsLabels(locale, given);\n  // The viewer reports its unsaved edits; a close that would drop them asks first (the Back path too, through the shell layer).\n  const dirty = useRef(false);\n  const report = useCallback((unsaved: boolean) => { dirty.current = unsaved; }, []);\n  const mayLeave = () => !dirty.current || window.confirm(labels.discardChanges);\n  const { open, close, isOpen } = useShellLayer(LAYER, { confirmBack: mayLeave });\n  // The host's `path` decides whether the sheet is on show; a close from the sheet itself reports to the host.\n  useEffect(() => { if (shown) open(); else close(); }, [shown, open, close]);\n  useExclusiveSheet(isOpen, close);\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    if (shown && wasOpen.current && !isOpen) onClose();\n    wasOpen.current = isOpen;\n  }, [isOpen, shown, onClose]);\n  const requestClose = () => { if (mayLeave()) close(); };\n  const title = path === undefined ? labels.sheetTitle : path.split('/').pop() || path;\n  return <DocumentsWords locale={locale}>\n    <Drawer open={isOpen} onOpenChange={next => { if (!next) requestClose(); }} showSwipeHandle swipeDirection=\"down\">\n      <DrawerContent data-testid=\"document-sheet\" className={cn('app-shell max-h-[92dvh] min-h-[92dvh]', className)}>\n        {/* The title is for assistive technology: the viewer's own bar shows the file name. */}\n        <DrawerTitle className=\"sr-only\">{title}</DrawerTitle>\n        {onShowAll && <div className=\"flex shrink-0 justify-end px-3 pt-1 pb-2\">\n          <Button variant=\"ghost\" data-testid=\"document-sheet-all\" onClick={() => { if (!mayLeave()) return; close(); afterBack(onShowAll); }}>{labels.allDocuments}</Button>\n        </div>}\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]\">\n          {path !== undefined && <FileViewer key={path} path={path} locator={provider.locate(path)} onUnsavedChange={report}\n            options={{ client: provider, identity: provider.identity, kinds, ...(viewers ? { viewers } : {}), ...(share ? { share } : {}) }} onClose={requestClose} />}\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </DocumentsWords>;\n}\n",
       "type": "registry:component",
       "target": "components/documents/document-sheet.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.22",
+    "@hachej/boring-feedback@^0.4.24",
     "@earendil-works/pi-ai@~1.2.0",
     "react@^19.0.0"
   ],

package/r/feedback.json

@@ -4,17 +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.22",
-    "@hachej/boring-ui-kit@^0.4.22",
-    "@hachej/boring-files@^0.4.22",
+    "@hachej/boring-feedback@^0.4.24",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "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.22/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json",
     "button",
     "toggle",
     "badge",

package/r/file-tree.json

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

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.22",
-    "@hachej/boring-files@^0.4.22",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/markdown-editor.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/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.22",
-    "@hachej/boring-files@^0.4.22",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/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.22/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/mockup-viewer.json",
     "alert",
     "button",
     "card",

package/r/maquette-viewer.json

@@ -2,14 +2,14 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "maquette-viewer",
   "title": "Maquette viewer",
-  "description": "MaquetteViewer and maquetteKind: a PM agent's *.maquette.json mock-up (format v1, versioned) one screen at a time, drawn from the host's shadcn components, under one thin icon bar: Back, previous and next (also arrow keys and swipe), an optional comment icon (point mode of the feedback item: a note pinned on a block names the maquette path, screen id and block id) and a menu with guided tours and How it works (the workflow, inline or a linked *.diagram.json, drawn by the diagram-viewer item in a dialog). Optional phone or desktop frame and #screen=<id> deep links. The pi-app artifact panel shows .maquette.json files with it by default; app artifactKinds win.",
+  "description": "MaquetteViewer and maquetteKind: a PM agent's *.maquette.json mock-up (format v1, versioned) one screen at a time, drawn from the host's shadcn components, under one thin icon bar: Back, previous and next (also arrow keys and swipe), an optional comment icon (point mode of the feedback item: a note pinned on a block names the maquette path, screen id and block id) and a menu with guided tours and How it works (the workflow, inline or a linked *.diagram.json, drawn by the diagram-viewer item in a dialog). Optional phone or desktop frame and #screen=<id> deep links. Its kind is in the pi-app-kinds default list, which an app passes to the pi-app artifact panel; an app kind placed before it wins.",
   "dependencies": [
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/diagram-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/diagram-viewer.json",
     "alert",
     "badge",
     "bubble",
@@ -49,13 +49,13 @@
     },
     {
       "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` (maquette-kind.ts) 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 { KeyboardEvent, ReactNode, TouchEvent } from 'react';\nimport { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, CompassIcon, EllipsisIcon, InfoIcon, 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, 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  /** A host bar's \"…\" menu (the pi-app artifact panel's `setMenu`): the tours and \"How it works\" go there, as with `MaquetteMenuContext`. */\n  readonly publishMenu?: ((items: readonly MaquetteMenuEntry[]) => void) | 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, publishMenu }: {\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  readonly publishMenu: ((items: readonly MaquetteMenuEntry[]) => void) | 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 fromContext = useContext(MaquetteMenuContext);\n  const publish = publishMenu ?? fromContext;\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, publishMenu }: 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} publishMenu={publishMenu} />\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",
+      "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` (maquette-kind.ts) is the kind of the pi-app-kinds default\n// list for `.maquette.json` files; an app kind placed before it 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 { KeyboardEvent, ReactNode, TouchEvent } from 'react';\nimport { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, CompassIcon, EllipsisIcon, InfoIcon, 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, 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  /** A host bar's \"…\" menu (the pi-app artifact panel's `setMenu`): the tours and \"How it works\" go there, as with `MaquetteMenuContext`. */\n  readonly publishMenu?: ((items: readonly MaquetteMenuEntry[]) => void) | 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, publishMenu }: {\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  readonly publishMenu: ((items: readonly MaquetteMenuEntry[]) => void) | 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 fromContext = useContext(MaquetteMenuContext);\n  const publish = publishMenu ?? fromContext;\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, publishMenu }: 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} publishMenu={publishMenu} />\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",
       "type": "registry:component",
       "target": "components/maquette-viewer/maquette-viewer.tsx"
     },
     {
       "path": "registry/maquette-viewer/maquette-kind.tsx",
-      "content": "'use client';\n\nimport { lazy } from 'react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { LayoutTemplateIcon } from 'lucide-react';\nimport { isMaquettePath } from './maquette';\nimport { maquetteLabelsFor } from './maquette-labels';\nimport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\nimport type { MaquetteComments, MaquetteMenuEntry, MaquetteRead } from './maquette-viewer';\n\n// The viewer loads only when a maquette opens: this module (match, label, icon) is all a host's first paint carries.\nconst MaquetteViewer = lazy(() => import('./maquette-viewer').then(module => ({ default: module.MaquetteViewer })));\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`, loaded on first open. Pass it, or your own, in `artifactKinds`; kinds an app passes are consulted first.\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    readonly setMenu?: ((items: readonly MaquetteMenuEntry[]) => void) | 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, setMenu }) => <MaquetteViewer text={text} fragment={fragment} locale={locale} labels={labels}\n      path={artifact?.target.resource.path} comments={comments} read={read} publishMenu={setMenu} />,\n  };\n}\n\n/** The built-in maquette kind, in English. */\nexport const maquetteKind: MaquetteKind = createMaquetteKind();\n",
+      "content": "'use client';\n\nimport { lazy } from 'react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { LayoutTemplateIcon } from 'lucide-react';\nimport { isMaquettePath } from './maquette';\nimport { maquetteLabelsFor } from './maquette-labels';\nimport type { MaquetteLabels, MaquetteLocale } from './maquette-labels';\nimport type { MaquetteComments, MaquetteMenuEntry, MaquetteRead } from './maquette-viewer';\n\n// The viewer loads only when a maquette opens: this module (match, label, icon) is all a host's first paint carries.\nconst MaquetteViewer = lazy(() => import('./maquette-viewer').then(module => ({ default: module.MaquetteViewer })));\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`, loaded on first open. It is in the pi-app-kinds default list (`defaultKinds`); kinds in `artifactKinds` are consulted in order.\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    readonly setMenu?: ((items: readonly MaquetteMenuEntry[]) => void) | 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, setMenu }) => <MaquetteViewer text={text} fragment={fragment} locale={locale} labels={labels}\n      path={artifact?.target.resource.path} comments={comments} read={read} publishMenu={setMenu} />,\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-kind.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.22",
-    "@hachej/boring-files@^0.4.22",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "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.22/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/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.22/r/viewer-frame.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-frame.json",
     "badge",
     "toggle",
     "tooltip"

package/r/pi-ambient.json

@@ -4,7 +4,7 @@
   "title": "Pi ambient agent",
   "description": "AmbientChat, a compact floating agent bar that grows into a chat window over an existing page, and AgentNotifications, toasts for finished, failed and waiting tasks (with the one guarded browser Notification helper). A block over the pi-chat item; its in-window artifact panel uses the pi-workspace layout.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.22",
+    "@hachej/boring-ui-kit@^0.4.24",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "@earendil-works/pi-durable@~1.2.0",
@@ -12,14 +12,14 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-chat-plugins.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-chat-question.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-artifacts.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/pi-workspace.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.22/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat-plugins.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat-question.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-workspace.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/button.json",
     "message-scroller",
     "button",
     "toggle",
@@ -43,7 +43,7 @@
     },
     {
       "path": "registry/pi-ambient/notifications.tsx",
-      "content": "'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport { CircleCheckIcon, CircleAlertIcon, MessageCircleQuestionIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { notifyWhenHidden } from './browser-notify';\nimport { parseQuestion } from '../pi-chat-question/question-card';\nimport { derive, object } from '../pi-chat/rows';\nimport type { Row } from '../pi-chat/rows';\nimport { cn, withDefaults } from '../utils/utils';\n\n/** `done`: a run finished. `input`: the agent waits for an answer (never auto-dismissed). `error`: a run failed. */\nexport type NotificationKind = 'done' | 'input' | 'error';\n\nexport interface AgentNotification {\n  readonly id: string;\n  readonly kind: NotificationKind;\n  /** The task or conversation title. */\n  readonly title: string;\n  /** One line: the first line of the final reply, the question, or the failure. */\n  readonly summary?: string | undefined;\n  /** What a click opens. Hosts use their own ids for background tasks. */\n  readonly conversationId?: string | undefined;\n  readonly createdAt: number;\n}\nexport type NewNotification = Omit<AgentNotification, 'id' | 'createdAt'> & { readonly id?: string | undefined };\n\n/**\n * A small external store of notifications. `AmbientChat` feeds it for its own conversation; a host feeds it for background\n * conversations or tasks (`push` from any event), and may share one store between `AmbientChat` and `AgentNotifications`.\n */\nexport interface NotificationStore {\n  readonly subscribe: (listener: () => void) => () => void;\n  readonly getSnapshot: () => readonly AgentNotification[];\n  /** Adds a notification (or replaces the one with the same `id`) and returns its id. */\n  readonly push: (notification: NewNotification) => string;\n  readonly dismiss: (id: string) => void;\n  /** Dismisses every notification of a conversation, optionally of one kind. */\n  readonly dismissConversation: (conversationId: string, kind?: NotificationKind) => void;\n  readonly clear: () => void;\n}\n\nexport function createNotificationStore(): NotificationStore {\n  let items: readonly AgentNotification[] = [];\n  let sequence = 0;\n  const listeners = new Set<() => void>();\n  const set = (next: readonly AgentNotification[]) => { items = next; for (const listener of [...listeners]) listener(); };\n  return {\n    subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; },\n    getSnapshot: () => items,\n    push: notification => {\n      const id = notification.id ?? `notification-${++sequence}`;\n      set([...items.filter(item => item.id !== id), { ...notification, id, createdAt: Date.now() }]);\n      return id;\n    },\n    dismiss: id => { if (items.some(item => item.id === id)) set(items.filter(item => item.id !== id)); },\n    dismissConversation: (conversationId, kind) => {\n      if (items.some(item => item.conversationId === conversationId && (!kind || item.kind === kind))) set(items.filter(item => item.conversationId !== conversationId || (kind && item.kind !== kind)));\n    },\n    clear: () => { if (items.length) set([]); },\n  };\n}\n\n/** The current notifications of a store. */\nexport function useNotifications(store: NotificationStore): readonly AgentNotification[] {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n}\n\n/** One line from a Markdown reply: its first non-empty line without Markdown marks, cut with an ellipsis. */\nexport function summaryOf(text: string, limit = 140): string {\n  const line = text.split('\\n').map(item => item.trim()).find(item => item && !/^(```|---+$)/.test(item)) ?? '';\n  const plain = line.replace(/^(#{1,6}\\s+|>\\s*|[-*+]\\s+|\\d+[.)]\\s+)/, '').replace(/!?\\[([^\\]]*)\\]\\([^)]*\\)/g, '$1').replace(/[*_`~]+/g, '').replace(/\\s+/g, ' ').trim();\n  return plain.length > limit ? `${plain.slice(0, limit - 1).trimEnd()}…` : plain;\n}\n\n/** What the newest pending `ask_user` question or approval asks, if one waits for the person. */\nexport function pendingQuestion(rows: readonly Row[]): string | undefined {\n  for (const row of [...rows].reverse()) if (row.type === 'assistant') for (const part of row.parts) {\n    if (part.kind === 'question' && !part.live && !part.result) return parseQuestion(part.call).question;\n    if (part.kind === 'approval' && !part.live && !part.result && !part.decision) return `Approve: ${part.summary}`;\n  }\n  return undefined;\n}\n\n/** What a toast says about a run that just ended, from the conversation's rows; `undefined` when the person stopped it. */\nexport function finishNotice(rows: readonly Row[]): { readonly kind: 'done' | 'error'; readonly summary: string } | undefined {\n  const last = [...rows].reverse().find((row): row is Extract<Row, { type: 'assistant' }> => row.type === 'assistant');\n  if (last?.stopReason === 'aborted') return undefined;\n  if (last?.stopReason === 'error') return { kind: 'error', summary: last.errorMessage ?? 'The run failed' };\n  return { kind: 'done', summary: summaryOf(last?.text ?? '') || 'Finished' };\n}\n\n/**\n * Feeds a store from a conversation the host keeps connected in the background (a task, a subagent, another chat): a toast when its\n * run finishes or fails and while a question waits. Returns the unsubscribe. `AmbientChat` does the same for its own conversation.\n */\nexport function watchConversation(controller: NativeChatController, store: NotificationStore, options: { readonly conversationId: string; readonly title: string | (() => string) }): () => void {\n  const { conversationId } = options;\n  const title = () => typeof options.title === 'function' ? options.title() : options.title;\n  const state = () => {\n    const snapshot = controller.getSnapshot();\n    const live = object(snapshot.view?.docs['pi.live']);\n    return { working: Boolean(object(live?.['run'])), entries: snapshot.view?.entries.length ?? 0, connected: snapshot.connection.kind === 'connected' };\n  };\n  let before = state(), waiting = false;\n  return controller.subscribe(() => {\n    const now = state();\n    const was = before;\n    before = now;\n    if (!now.connected || (now.working === was.working && now.entries === was.entries)) return;\n    const rows = derive(controller.getSnapshot().view, { mode: 'expert', renderEntry: undefined, renderTool: undefined, groupTool: undefined }).rows;\n    const question = now.working ? pendingQuestion(rows) : undefined;\n    if (question !== undefined && !waiting) store.push({ id: `${conversationId}:input`, kind: 'input', title: title(), summary: question, conversationId });\n    if (question === undefined && waiting) store.dismiss(`${conversationId}:input`);\n    waiting = question !== undefined;\n    if (now.working && !was.working) store.dismiss(`${conversationId}:done`);\n    if (was.working && !now.working) {\n      const finished = finishNotice(rows);\n      if (finished) store.push({ id: `${conversationId}:done`, kind: finished.kind, title: title(), summary: finished.summary, conversationId });\n    }\n  });\n}\n\nconst ICONS = {\n  done: { Icon: CircleCheckIcon, label: 'finished', tone: 'text-(--chat-success)' },\n  input: { Icon: MessageCircleQuestionIcon, label: 'needsInput', tone: 'text-(--chat-warning)' },\n  error: { Icon: CircleAlertIcon, label: 'failedRun', tone: 'text-destructive' },\n} as const;\n\n/** The toasts' words; `AmbientChat`'s `labels` carries them too. */\nexport const defaultNotificationLabels = {\n  finished: 'Finished',\n  needsInput: 'Needs your input',\n  failedRun: 'Failed',\n  notifications: 'Agent notifications',\n  /** A toast's accessible name: its kind, title and summary, then what a press does. */\n  openNotification: (kind: string, title: string, summary: string | undefined) => `${kind}: ${title}${summary ? `. ${summary}` : ''}. Open`,\n  dismissNotification: (title: string) => `Dismiss: ${title}`,\n  dismissShort: 'Dismiss',\n};\nexport type NotificationLabels = typeof defaultNotificationLabels;\n\n/** The status icon of a notification, also used by the ambient header. */\nexport function KindIcon({ kind, className }: { readonly kind: NotificationKind; readonly className?: string }) {\n  const { Icon, tone } = ICONS[kind];\n  return <Icon className={cn('size-5 shrink-0', tone, className)} aria-hidden=\"true\" />;\n}\n\nfunction Toast({ item, autoDismissMs, onActivate, onDismiss, labels }: {\n  readonly item: AgentNotification; readonly autoDismissMs: number; readonly labels: NotificationLabels;\n  readonly onActivate: (item: AgentNotification) => void; readonly onDismiss: (item: AgentNotification) => void;\n}) {\n  const [paused, setPaused] = useState(false);\n  const dismissible = item.kind !== 'input' && autoDismissMs > 0;\n  useEffect(() => {\n    if (!dismissible || paused) return;\n    const timer = setTimeout(() => onDismiss(item), autoDismissMs);\n    return () => clearTimeout(timer);\n  }, [dismissible, paused, autoDismissMs, item, onDismiss]);\n  const { Icon } = ICONS[item.kind];\n  const label = labels[ICONS[item.kind].label];\n  return <li data-testid=\"agent-toast\" data-kind={item.kind} data-conversation-id={item.conversationId} className=\"pointer-events-auto relative list-none\"\n    onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)}\n    onKeyDown={(event: KeyboardEvent) => { if (event.key === 'Escape') { event.stopPropagation(); onDismiss(item); } }}>\n    <Button variant=\"ghost\" data-testid=\"agent-toast-open\" onClick={() => onActivate(item)} aria-label={labels.openNotification(label, item.title, item.summary)}\n      className=\"h-auto w-full flex-col items-start whitespace-normal\">\n      <span className=\"flex items-center gap-2.5\"><Icon data-icon=\"inline-start\" aria-hidden=\"true\" /><span className=\"min-w-0 flex-1 truncate\">{item.title}</span></span>\n      {item.summary && <span data-testid=\"agent-toast-summary\" className=\"mt-1 block max-w-full truncate\">{item.summary}</span>}\n    </Button>\n    <Button variant=\"ghost\" size=\"icon-sm\" data-testid=\"agent-toast-close\" aria-label={labels.dismissNotification(item.title)} title={labels.dismissShort} onClick={() => onDismiss(item)}\n      className=\"absolute -top-2 -left-2\">\n      <XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </li>;\n}\n\nexport interface AgentNotificationsProps {\n  readonly store: NotificationStore;\n  /** Toasts shown at once; older ones appear when newer ones are closed. */\n  readonly max?: number;\n  /** Milliseconds before a toast closes itself; 0 keeps them. \"Needs input\" toasts never close themselves. Hovering or focusing a toast pauses the timer. */\n  readonly autoDismissMs?: number;\n  /** A click on a toast. It is dismissed afterwards. */\n  readonly onActivate?: (notification: AgentNotification) => void;\n  /** Also show a system notification while the page is hidden, when the person has allowed it (see `AmbientChat`'s bell). */\n  readonly systemNotifications?: boolean;\n  readonly variant?: 'contrast' | 'surface';\n  /** `fixed` docks the stack at the bottom right of the page; `inline` leaves placement to `className`. */\n  readonly placement?: 'fixed' | 'inline';\n  /** The toasts' words, over `defaultNotificationLabels`. */\n  readonly labels?: Partial<NotificationLabels> | undefined;\n  readonly className?: string;\n}\n\n/**\n * A stack of toasts for finished, failed and waiting tasks, driven by a `NotificationStore`. It is a polite live region;\n * Escape closes the focused toast. `AmbientChat` renders one above its bar; use this directly for a host-placed stack.\n */\nexport function AgentNotifications({ store, max = 3, autoDismissMs = 8000, onActivate, systemNotifications = false, variant = 'contrast', placement = 'fixed', labels: given, className }: AgentNotificationsProps) {\n  const labels = useMemo(() => withDefaults(defaultNotificationLabels, given), [given]);\n  const items = useNotifications(store);\n  const seen = useRef(new Set<string>());\n  const dismiss = useCallback((item: AgentNotification) => store.dismiss(item.id), [store]);\n  const activate = useCallback((item: AgentNotification) => { onActivate?.(item); store.dismiss(item.id); }, [onActivate, store]);\n  useEffect(() => {\n    for (const item of items) {\n      if (seen.current.has(`${item.id}:${item.createdAt}`)) continue;\n      seen.current.add(`${item.id}:${item.createdAt}`);\n      if (systemNotifications) notifyWhenHidden(item.title, item.summary ?? labels[ICONS[item.kind].label], item.id, () => { globalThis.focus?.(); activate(item); });\n    }\n  }, [items, systemNotifications, activate, labels]);\n  const shown = items.slice(-max);\n  return <div data-boring=\"agent-notifications\" data-variant={variant} role=\"status\" aria-live=\"polite\" aria-relevant=\"additions\" aria-label={labels.notifications}\n    className={cn('pi-chat pi-ambient pointer-events-none z-50', variant === 'contrast' && 'dark scheme-dark', placement === 'fixed' && 'fixed right-4 bottom-4 w-[min(26rem,calc(100vw-2rem))]', className)}>\n    <ul className=\"m-0 flex list-none flex-col gap-3 p-0\">\n      {shown.map(item => <Toast key={`${item.id}:${item.createdAt}`} item={item} autoDismissMs={autoDismissMs} onActivate={activate} onDismiss={dismiss} labels={labels} />)}\n    </ul>\n  </div>;\n}\n",
+      "content": "'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport { CircleCheckIcon, CircleAlertIcon, MessageCircleQuestionIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { notifyWhenHidden } from './browser-notify';\nimport { parseQuestion } from '../pi-chat-question/question-card';\nimport { finishNotice, pendingNotice } from '@hachej/boring-ui-kit/chat-view';\nimport { derive, object } from '../pi-chat/rows';\nimport type { Row } from '../pi-chat/rows';\nimport { cn, withDefaults } from '../utils/utils';\n\n/** `done`: a run finished. `input`: the agent waits for an answer (never auto-dismissed). `error`: a run failed. */\nexport type NotificationKind = 'done' | 'input' | 'error';\n\nexport interface AgentNotification {\n  readonly id: string;\n  readonly kind: NotificationKind;\n  /** The task or conversation title. */\n  readonly title: string;\n  /** One line: the first line of the final reply, the question, or the failure. */\n  readonly summary?: string | undefined;\n  /** What a click opens. Hosts use their own ids for background tasks. */\n  readonly conversationId?: string | undefined;\n  readonly createdAt: number;\n}\nexport type NewNotification = Omit<AgentNotification, 'id' | 'createdAt'> & { readonly id?: string | undefined };\n\n/**\n * A small external store of notifications. `AmbientChat` feeds it for its own conversation; a host feeds it for background\n * conversations or tasks (`push` from any event), and may share one store between `AmbientChat` and `AgentNotifications`.\n */\nexport interface NotificationStore {\n  readonly subscribe: (listener: () => void) => () => void;\n  readonly getSnapshot: () => readonly AgentNotification[];\n  /** Adds a notification (or replaces the one with the same `id`) and returns its id. */\n  readonly push: (notification: NewNotification) => string;\n  readonly dismiss: (id: string) => void;\n  /** Dismisses every notification of a conversation, optionally of one kind. */\n  readonly dismissConversation: (conversationId: string, kind?: NotificationKind) => void;\n  readonly clear: () => void;\n}\n\nexport function createNotificationStore(): NotificationStore {\n  let items: readonly AgentNotification[] = [];\n  let sequence = 0;\n  const listeners = new Set<() => void>();\n  const set = (next: readonly AgentNotification[]) => { items = next; for (const listener of [...listeners]) listener(); };\n  return {\n    subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; },\n    getSnapshot: () => items,\n    push: notification => {\n      const id = notification.id ?? `notification-${++sequence}`;\n      set([...items.filter(item => item.id !== id), { ...notification, id, createdAt: Date.now() }]);\n      return id;\n    },\n    dismiss: id => { if (items.some(item => item.id === id)) set(items.filter(item => item.id !== id)); },\n    dismissConversation: (conversationId, kind) => {\n      if (items.some(item => item.conversationId === conversationId && (!kind || item.kind === kind))) set(items.filter(item => item.conversationId !== conversationId || (kind && item.kind !== kind)));\n    },\n    clear: () => { if (items.length) set([]); },\n  };\n}\n\n/** The current notifications of a store. */\nexport function useNotifications(store: NotificationStore): readonly AgentNotification[] {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n}\n\nexport { finishNotice, summaryOf } from '@hachej/boring-ui-kit/chat-view';\n\n/** What the newest pending `ask_user` question or approval asks, if one waits for the person (the kit's `waitingPart` rule and notice words). */\nexport function pendingQuestion(rows: readonly Row[]): string | undefined {\n  return pendingNotice(rows, call => parseQuestion(call).question);\n}\n\n/**\n * Feeds a store from a conversation the host keeps connected in the background (a task, a subagent, another chat): a toast when its\n * run finishes or fails and while a question waits. Returns the unsubscribe. `AmbientChat` does the same for its own conversation.\n */\nexport function watchConversation(controller: NativeChatController, store: NotificationStore, options: { readonly conversationId: string; readonly title: string | (() => string) }): () => void {\n  const { conversationId } = options;\n  const title = () => typeof options.title === 'function' ? options.title() : options.title;\n  const state = () => {\n    const snapshot = controller.getSnapshot();\n    const live = object(snapshot.view?.docs['pi.live']);\n    return { working: Boolean(object(live?.['run'])), entries: snapshot.view?.entries.length ?? 0, connected: snapshot.connection.kind === 'connected' };\n  };\n  let before = state(), waiting = false;\n  return controller.subscribe(() => {\n    const now = state();\n    const was = before;\n    before = now;\n    if (!now.connected || (now.working === was.working && now.entries === was.entries)) return;\n    const rows = derive(controller.getSnapshot().view, { mode: 'expert', renderEntry: undefined, renderTool: undefined, groupTool: undefined }).rows;\n    const question = now.working ? pendingQuestion(rows) : undefined;\n    if (question !== undefined && !waiting) store.push({ id: `${conversationId}:input`, kind: 'input', title: title(), summary: question, conversationId });\n    if (question === undefined && waiting) store.dismiss(`${conversationId}:input`);\n    waiting = question !== undefined;\n    if (now.working && !was.working) store.dismiss(`${conversationId}:done`);\n    if (was.working && !now.working) {\n      const finished = finishNotice(rows);\n      if (finished) store.push({ id: `${conversationId}:done`, kind: finished.kind, title: title(), summary: finished.summary, conversationId });\n    }\n  });\n}\n\nconst ICONS = {\n  done: { Icon: CircleCheckIcon, label: 'finished', tone: 'text-(--chat-success)' },\n  input: { Icon: MessageCircleQuestionIcon, label: 'needsInput', tone: 'text-(--chat-warning)' },\n  error: { Icon: CircleAlertIcon, label: 'failedRun', tone: 'text-destructive' },\n} as const;\n\n/** The toasts' words; `AmbientChat`'s `labels` carries them too. */\nexport const defaultNotificationLabels = {\n  finished: 'Finished',\n  needsInput: 'Needs your input',\n  failedRun: 'Failed',\n  notifications: 'Agent notifications',\n  /** A toast's accessible name: its kind, title and summary, then what a press does. */\n  openNotification: (kind: string, title: string, summary: string | undefined) => `${kind}: ${title}${summary ? `. ${summary}` : ''}. Open`,\n  dismissNotification: (title: string) => `Dismiss: ${title}`,\n  dismissShort: 'Dismiss',\n};\nexport type NotificationLabels = typeof defaultNotificationLabels;\n\n/** The status icon of a notification, also used by the ambient header. */\nexport function KindIcon({ kind, className }: { readonly kind: NotificationKind; readonly className?: string }) {\n  const { Icon, tone } = ICONS[kind];\n  return <Icon className={cn('size-5 shrink-0', tone, className)} aria-hidden=\"true\" />;\n}\n\nfunction Toast({ item, autoDismissMs, onActivate, onDismiss, labels }: {\n  readonly item: AgentNotification; readonly autoDismissMs: number; readonly labels: NotificationLabels;\n  readonly onActivate: (item: AgentNotification) => void; readonly onDismiss: (item: AgentNotification) => void;\n}) {\n  const [paused, setPaused] = useState(false);\n  const dismissible = item.kind !== 'input' && autoDismissMs > 0;\n  useEffect(() => {\n    if (!dismissible || paused) return;\n    const timer = setTimeout(() => onDismiss(item), autoDismissMs);\n    return () => clearTimeout(timer);\n  }, [dismissible, paused, autoDismissMs, item, onDismiss]);\n  const { Icon } = ICONS[item.kind];\n  const label = labels[ICONS[item.kind].label];\n  return <li data-testid=\"agent-toast\" data-kind={item.kind} data-conversation-id={item.conversationId} className=\"pointer-events-auto relative list-none\"\n    onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)}\n    onKeyDown={(event: KeyboardEvent) => { if (event.key === 'Escape') { event.stopPropagation(); onDismiss(item); } }}>\n    <Button variant=\"ghost\" data-testid=\"agent-toast-open\" onClick={() => onActivate(item)} aria-label={labels.openNotification(label, item.title, item.summary)}\n      className=\"h-auto w-full flex-col items-start whitespace-normal\">\n      <span className=\"flex items-center gap-2.5\"><Icon data-icon=\"inline-start\" aria-hidden=\"true\" /><span className=\"min-w-0 flex-1 truncate\">{item.title}</span></span>\n      {item.summary && <span data-testid=\"agent-toast-summary\" className=\"mt-1 block max-w-full truncate\">{item.summary}</span>}\n    </Button>\n    <Button variant=\"ghost\" size=\"icon-sm\" data-testid=\"agent-toast-close\" aria-label={labels.dismissNotification(item.title)} title={labels.dismissShort} onClick={() => onDismiss(item)}\n      className=\"absolute -top-2 -left-2\">\n      <XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </li>;\n}\n\nexport interface AgentNotificationsProps {\n  readonly store: NotificationStore;\n  /** Toasts shown at once; older ones appear when newer ones are closed. */\n  readonly max?: number;\n  /** Milliseconds before a toast closes itself; 0 keeps them. \"Needs input\" toasts never close themselves. Hovering or focusing a toast pauses the timer. */\n  readonly autoDismissMs?: number;\n  /** A click on a toast. It is dismissed afterwards. */\n  readonly onActivate?: (notification: AgentNotification) => void;\n  /** Also show a system notification while the page is hidden, when the person has allowed it (see `AmbientChat`'s bell). */\n  readonly systemNotifications?: boolean;\n  readonly variant?: 'contrast' | 'surface';\n  /** `fixed` docks the stack at the bottom right of the page; `inline` leaves placement to `className`. */\n  readonly placement?: 'fixed' | 'inline';\n  /** The toasts' words, over `defaultNotificationLabels`. */\n  readonly labels?: Partial<NotificationLabels> | undefined;\n  readonly className?: string;\n}\n\n/**\n * A stack of toasts for finished, failed and waiting tasks, driven by a `NotificationStore`. It is a polite live region;\n * Escape closes the focused toast. `AmbientChat` renders one above its bar; use this directly for a host-placed stack.\n */\nexport function AgentNotifications({ store, max = 3, autoDismissMs = 8000, onActivate, systemNotifications = false, variant = 'contrast', placement = 'fixed', labels: given, className }: AgentNotificationsProps) {\n  const labels = useMemo(() => withDefaults(defaultNotificationLabels, given), [given]);\n  const items = useNotifications(store);\n  const seen = useRef(new Set<string>());\n  const dismiss = useCallback((item: AgentNotification) => store.dismiss(item.id), [store]);\n  const activate = useCallback((item: AgentNotification) => { onActivate?.(item); store.dismiss(item.id); }, [onActivate, store]);\n  useEffect(() => {\n    for (const item of items) {\n      if (seen.current.has(`${item.id}:${item.createdAt}`)) continue;\n      seen.current.add(`${item.id}:${item.createdAt}`);\n      if (systemNotifications) notifyWhenHidden(item.title, item.summary ?? labels[ICONS[item.kind].label], item.id, () => { globalThis.focus?.(); activate(item); });\n    }\n  }, [items, systemNotifications, activate, labels]);\n  const shown = items.slice(-max);\n  return <div data-boring=\"agent-notifications\" data-variant={variant} role=\"status\" aria-live=\"polite\" aria-relevant=\"additions\" aria-label={labels.notifications}\n    className={cn('pi-chat pi-ambient pointer-events-none z-50', variant === 'contrast' && 'dark scheme-dark', placement === 'fixed' && 'fixed right-4 bottom-4 w-[min(26rem,calc(100vw-2rem))]', className)}>\n    <ul className=\"m-0 flex list-none flex-col gap-3 p-0\">\n      {shown.map(item => <Toast key={`${item.id}:${item.createdAt}`} item={item} autoDismissMs={autoDismissMs} onActivate={activate} onDismiss={dismiss} labels={labels} />)}\n    </ul>\n  </div>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-ambient/notifications.tsx"
     }

package/r/pi-app-kinds.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pi-app-kinds",
+  "title": "Pi agent app default kinds",
+  "description": "defaultKinds({ locale, comments }): the artifact kinds the pi-app item draws with by default, in order: maquette, diagram, mock-up and records, then Markdown, HTML, SVG, CSV, image and PDF (documentKinds). Pass it as AgentWorkspace's artifactKinds (or ViewerOptions.kinds), with an app's own kinds before it. Each kind loads its viewer on first open.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-markdown.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-html.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-image.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-pdf.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/viewer-code.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/maquette-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/diagram-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/record-viewer.json"
+  ],
+  "files": [
+    {
+      "path": "registry/pi-app-kinds/pi-app-kinds.ts",
+      "content": "'use client';\n\n// The default artifact kinds of the pi-app item (D-257), in its resolution order: the domain kinds (maquette, diagram, mock-up, records),\n// then the document kinds (Markdown, HTML, SVG, CSV, image, PDF). `AgentWorkspace` and `ViewerOptions` resolve kinds only from the list a\n// host passes; pass `defaultKinds()` for these, put an app's own kinds before them, or pass a list of your own. Each kind module is cheap\n// (match, label, icon, loader); its view loads the first time an artifact of that kind opens, so no viewer is in the page's first bundle.\nimport { createMaquetteKind } from '../maquette-viewer/maquette-kind';\nimport type { MaquetteComments } from '../maquette-viewer/maquette-viewer';\nimport { createDiagramKind } from '../diagram-viewer/diagram-kind';\nimport { createMockupKind } from '../mockup-viewer/mockup-kind';\nimport type { MockupComments } from '../mockup-viewer/mockup-viewer';\nimport { createRecordsKind } from '../record-viewer/records-kind';\nimport { markdownKind } from '../viewer-markdown/markdown-kind';\nimport { htmlKind } from '../viewer-html/html-kind';\nimport { csvKind, svgKind } from '../viewer-code/code-kinds';\nimport { imageKind } from '../viewer-image/image-kind';\nimport { pdfKind } from '../viewer-pdf/pdf-kind';\nimport type { PanelKind } from '../pi-app/viewer-kinds';\n\n/** The document kinds: each is a host's default for its type, so a `viewers` entry for that type wins over it. */\nexport const documentKinds: readonly PanelKind[] = [markdownKind, htmlKind, svgKind, csvKind, imageKind, pdfKind];\n\nexport interface DefaultKindsOptions {\n  /** The language of the domain kinds' names and viewers (a `.maquette.json` card says « Maquette » in French). Default English. */\n  readonly locale?: 'en' | 'fr' | undefined;\n  /** Comment pins on mock-ups and maquettes: the registry `feedback` item's `usePointComments(session)`. Omit it and no comment icon shows. */\n  readonly comments?: (MaquetteComments & Pick<MockupComments, 'pick' | 'picking' | 'reposition'>) | undefined;\n}\n\n/**\n * The default kinds, in order (the first match wins): maquette, diagram, mock-up and records, then Markdown, HTML, SVG, CSV, image and\n * PDF. A fresh list each call: build it once (a module constant, or `useMemo` on `locale` and `comments`) and pass it as `artifactKinds`.\n */\nexport function defaultKinds({ locale, comments }: DefaultKindsOptions = {}): readonly PanelKind[] {\n  return [createMaquetteKind({ locale, comments }), createDiagramKind({ locale }), createMockupKind({ locale, comments }), createRecordsKind({ locale }), ...documentKinds];\n}\n",
+      "type": "registry:lib",
+      "target": "components/pi-app-kinds/pi-app-kinds.ts"
+    }
+  ],
+  "type": "registry:lib"
+}