@arbidocs/blocks 0.4.69 → 0.4.71

package/README.md

@@ -19,7 +19,7 @@ Optional peers, only needed for the entry that uses them:
 
 | Peer | Needed by |
 | --- | --- |
-| `@tanstack/react-query` | `@arbidocs/blocks/connect`, `@arbidocs/blocks/studio` |
+| `@tanstack/react-query` | `@arbidocs/blocks/connect`, `@arbidocs/blocks/studio`, `@arbidocs/blocks/document-tools` |
 | `react-router-dom` | `@arbidocs/blocks/studio` |
 | `@measured/puck` | `@arbidocs/blocks/studio` |
 | `@playwright/test` | types of `@arbidocs/blocks/record` (no runtime import) |
@@ -67,6 +67,8 @@ Every capability is its own entry, so a bundler only loads what you use:
 | `/files`, `/facts` | document grid, facts table | `ag-grid-*` |
 | `/artifacts` | artifact editor, version bar, track changes | none |
 | `/artifacts/editor` | rich-text (markdown) editing surface | `@mdxeditor/editor` (optional peer) |
+| `/document-tools` | PDF markup, signing and version parts (see below) | `@tanstack/react-query` |
+| `/document-tools/viewer` | annotated PDF viewer, signature placement | `pdf-lib`, `react-pdf` (optional peers of `@arbidocs/react`) |
 | `/home`, `/workspaces` | dashboard, workspace cards and forms | `@dnd-kit/*` |
 | `/settings` | settings, billing, modals | `cmdk` |
 | `/connect` | demo/live connection layer | `@tanstack/react-query` |
@@ -157,6 +159,164 @@ draft is stored and parsed, then the editor on the stored version (the presentat
 <StreamedArtifact artifacts={task.artifacts} workspaceId={workspaceId} busy={task.status === 'running'} error={task.error} />
 ```
 
+## Using the document tools in another frontend
+
+The PDF document tools are what ARBI's document page uses: annotate (highlight, comment, stamp,
+redact) with the marks saved as the version's markup on the server (autosave, colleagues' edits
+merged in), "Show original", "Download with markup", the notes about markup on an older version
+("Copy open comments here") and about marks left in this browser, Freeze (a separate annotated or
+redacted copy, with a redaction log), e-signing (choose where the signature goes, sign with the
+password; only the signature and optionally the date are drawn), the signature details with "View
+certificate", the public certificate page, the read-only version bar and production sets (Bates
+numbering).
+
+| Import | What |
+| --- | --- |
+| `@arbidocs/react/document-tools` | `DocumentToolsProvider`, `fetchDocumentPdf`, `fetchDocumentFile`, `useDocumentMarkup`, `createMarkupStore`, `fetchMarkupPdf`, `canAnnotate`, `useDocumentSignatures`, `useSignDocument`, `useSignatureVerification`, `buildProduction`, `saveProductionFiles` |
+| `@arbidocs/blocks/document-tools` | `AnnotateButton`, `ShowOriginalButton`, `DownloadMarkupButton`, `SignButton`, `MarkupNotices`, `MarkupViewNote`, `SignDocumentDialog`, `SignatureStatus`, `SignatureCertificate`, `VersionSnapshotBar` |
+| `@arbidocs/blocks/document-tools/viewer` | `AnnotatedPdfViewer`, `SignaturePlacementViewer` (load lazily: pdf-lib) |
+| `@arbidocs/blocks/document-tools/production` | `ProductionSetDialog` (load lazily; pdf-lib and JSZip load on confirm) |
+
+What the host provides, once, around the viewer (the tools import no store, router or toast
+library of their own):
+
+- an ARBI API client signed in as the user: `arbi.getClient().fetch` from an `@arbidocs/sdk`
+  `Arbi`, or `createArbiClient(...).fetch` from `@arbidocs/client`;
+- `user: { name, email }` for signing (without a user marks are authored as "You") and the
+  `deploymentDomain` the user's keys are derived for. Inside an `ArbiProvider` (or
+  `ArbiAppProvider`, which mounts one) `deploymentDomain` defaults to the SDK's own,
+  `arbi.getDeploymentDomain()` (the `deploymentDomain` option, else the API URL's hostname), which
+  is also `useDeploymentDomain()` from `@arbidocs/react` and `deploymentDomain` on
+  `useConnection()`. Pass it only when the API is served from another host than the one users
+  registered on (`ArbiConnectionConfig.deploymentDomain` sets it for the whole app);
+- callbacks, all optional: `notify(message, kind, { description, action })`, `openDocument(ref)`
+  (the copy just frozen, the signed copy, a saved production), `onDocumentsChanged(ids, 'markup' |
+  'copy' | 'signed')` to refresh your lists, `emailDocument(ref)` (adds "Email it" after signing),
+  `uploadDocument`, `saveFile` and `certificateUrl` (defaults: the API client, a download link, the
+  backend's certificate link; see Signature certificates);
+- a React Query `QueryClientProvider`, the blocks styles (see Styles), the optional peers
+  `react-pdf`, `pdfjs-dist` and `pdf-lib`, and the pdf.js runtime (see below).
+
+The PDF the tools draw on is the document's `/view` rendering (the file itself for a PDF, its PDF
+rendering for a Word or text file). Fetch it with the function the tools use:
+
+```ts
+import { fetchDocumentPdf } from '@arbidocs/react/document-tools'
+
+// GET /v1/document/{id}/view?version= with Accept: application/pdf; a `doc-…@v2` reference
+// names a version too. Throws a DocumentFetchError (with `status`) when there is no PDF yet.
+const pdf = await fetchDocumentPdf(arbi.getClient().fetch, doc.external_id, { version: 2 })
+```
+
+Put the version in your cache key: a document keeps its id across versions (a signed copy is the
+next version), so a new version must never show the previous one's file.
+
+```tsx
+import { lazy, Suspense, useState } from 'react'
+import { DocumentToolsProvider, useDocumentMarkup, useDocumentSignatures } from '@arbidocs/react/document-tools'
+import { AnnotateButton, MarkupNotices, SignatureStatus } from '@arbidocs/blocks/document-tools'
+const AnnotatedPdfViewer = lazy(() =>
+  import('@arbidocs/blocks/document-tools/viewer').then((m) => ({ default: m.AnnotatedPdfViewer })))
+
+<DocumentToolsProvider
+  client={arbi.getClient().fetch}
+  user={{ name: 'Ana Lopez', email: 'ana@firm.example' }}
+  notify={(message, kind) => toast[kind](message)}
+  openDocument={(ref) => navigate(`/documents/${ref}`)}
+  onDocumentsChanged={() => queryClient.invalidateQueries({ queryKey: ['documents'] })}
+  certificateUrl={(ref) => `${location.origin}/verify/${ref}`}
+>
+  <DocumentPage doc={doc} pdf={pdfBlob} />
+</DocumentToolsProvider>
+
+function DocumentPage({ doc, pdf }) {
+  // `doc` is the document record (DocResponse): external_id, shared, folder, current_version, versions.
+  const [editing, setEditing] = useState(false)
+  const markup = useDocumentMarkup(doc, undefined)
+  const { data: signatures } = useDocumentSignatures(doc.external_id)
+  return (
+    <>
+      <AnnotateButton active={editing} onClick={() => setEditing((on) => !on)} />
+      {signatures?.signed && <SignatureStatus status={signatures} />}
+      <MarkupNotices legacyPrompt={markup.legacyPrompt} olderNote={markup.olderNote}
+        onOpenVersion={(n) => navigate(`/documents/${doc.external_id}@v${n}`)} />
+      <Suspense fallback={null}>
+        <AnnotatedPdfViewer file={pdf} documentId={doc.external_id} fileName={doc.file_name}
+          shared={!!doc.shared} folder={doc.folder} editing={editing}
+          onMarkupChange={markup.onMarkupChange} />
+      </Suspense>
+    </>
+  )
+}
+```
+
+A signed version is locked: only a further signature changes it. Pass `signed` to
+`AnnotatedPdfViewer` and a `disabledReason` (`SIGNED_LOCKED_REASON`, from `isSignedVersion(doc)` or
+the signature status) to `DownloadMarkupButton`: marks stay in the markup layer and are never
+written into its PDF, and the plain download is the signed file. Show `SignedEditNote` above any
+editor of a signed version ("Editing creates a new unsigned version").
+
+`AnnotatedPdfViewer` and `SignaturePlacementViewer` take your own binding of the kit viewer as
+`viewer` (for example one that reports the visible page); `SignaturePlacementViewer`'s
+`onContinue(appearance)` hands the box to `SignDocumentDialog`.
+
+### Signature certificates
+
+Serve `SignatureCertificate` on a route that needs no sign-in (ARBI uses `/verify/:reference`),
+inside a `DocumentToolsProvider` with an unauthenticated client. "View certificate" (in
+`SignatureStatus`, and after signing) opens the provider's `certificateUrl(reference)` when you
+give one, so it lands on your own page; without it, the `certificate_url` the backend returned,
+else `/verify/{reference}` on this origin. The link drawn into the signed PDF itself is set by the
+backend and always points at the deployment domain (`https://{DEPLOYMENT_DOMAIN}/verify/{ref}`):
+serve the certificate page there too, or redirect that path to yours.
+
+### Production sets
+
+`ProductionSetDialog` numbers the selected documents with Bates labels (optionally a QR code back
+to each document and an index page), downloads the result (one PDF, or a ZIP with each file and an
+`index.csv`) and saves it to the workspace as new documents derived from all their sources
+(`derived_from` repeated, role `production`) in a Productions folder, shared only if every source
+is. A PDF is numbered as stored, anything else through its `/view` PDF; media are left out. It uses
+the provider's client, `uploadDocument`, `saveFile`, `notify`, `onDocumentsChanged(ids, 'copy')`
+and `openDocument` (its "Open" action); you give it the selection and your deep link:
+
+```tsx
+const ProductionSetDialog = lazy(() =>
+  import('@arbidocs/blocks/document-tools/production').then((m) => ({ default: m.ProductionSetDialog })))
+
+<ProductionSetDialog open={open} onOpenChange={setOpen} documents={selectedDocs}
+  documentUrl={(id) => `${location.origin}/documents/${id}`} />
+```
+
+A custom `uploadDocument` receives the upload query typed from the API schema
+(`DocumentUploadQuery`: `derived_from` is a list, `shared` a boolean). If you post the upload
+yourself (an XHR with progress), build the query string with `uploadQueryString(query)`, which
+repeats `derived_from` for each source; the default, `clientUpload(client)`, does this already.
+
+### The pdf.js runtime
+
+The kit `PdfViewer` loads the pdf.js worker and its data from your site: `/pdf.worker.min.mjs`,
+`/cmaps/`, `/standard_fonts/` and `/wasm/` (the JPEG 2000 and JBIG2 decoders: without them
+scanned PDFs render blank). `@arbidocs/blocks` ships a command that copies them from your installed
+`pdfjs-dist` into your public directory, with shims for the newer built-ins pdf.js needs in older
+browsers. It fails if your `pdfjs-dist` differs from the one `react-pdf` runs, which would break
+every PDF with "API version does not match Worker version":
+
+```json
+{
+  "scripts": {
+    "pdf-assets": "arbidocs-copy-pdf-assets public",
+    "predev": "npm run pdf-assets",
+    "prebuild": "npm run pdf-assets"
+  }
+}
+```
+
+Pin `pdfjs-dist` to the exact version `react-pdf` depends on, and keep the copied files out of
+version control (`public/pdf.worker*.mjs`, `public/cmaps/`, `public/standard_fonts/`,
+`public/wasm/`). `--images` also copies the pdf.js annotation icons to `/images/`. To serve them
+elsewhere, pass `assets` (`workerSrc`, `cMapUrl`, `standardFontDataUrl`, `wasmUrl`) to the viewer.
+
 ## Editorial site parts
 
 `@arbidocs/blocks/site` (and the root) carry the layout parts for static marketing pages:

package/bin/arbidocs-copy-pdf-assets.mjs

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+/**
+ * arbidocs-copy-pdf-assets <publicDir> [--images]
+ *
+ * Serve the pdf.js runtime the document tools' PDF viewer loads (the kit `PdfViewer` of
+ * @arbidocs/react/viewers, whose default asset paths these are):
+ *
+ *   /pdf.worker.min.mjs, /pdf.worker.mjs   the worker, with shims for newer built-ins
+ *   /cmaps/                                 character maps (CJK and other non-embedded encodings)
+ *   /standard_fonts/                        the standard 14 fonts
+ *   /wasm/                                  JPEG 2000 / JBIG2 / colour decoders: without them a
+ *                                           scanned PDF renders blank white pages
+ *   /images/  (with --images)               pdf.js annotation icons
+ *
+ * Copied from the pdfjs-dist installed for the app (resolved from the current directory), so the
+ * worker always matches the library react-pdf runs: a mismatch fails every PDF with "API version
+ * does not match Worker version". Run it before dev and build, e.g. in `predev` / `prebuild`.
+ *
+ * The worker gets small shims for the newer built-ins pdf.js 5+ relies on (Uint8Array hex,
+ * Map.prototype.getOrInsertComputed, Math.sumPrecise); each steps aside where the browser has the
+ * real one. Without them older browsers fail to parse ("x.toHex is not a function") or draw no
+ * pages at all.
+ */
+
+import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join, resolve } from 'node:path'
+
+const args = process.argv.slice(2)
+const withImages = args.includes('--images')
+const target = args.find((arg) => !arg.startsWith('--'))
+if (!target || args.includes('--help')) {
+  console.error('Usage: arbidocs-copy-pdf-assets <publicDir> [--images]')
+  process.exit(target ? 0 : 1)
+}
+
+// Resolve from the app (the current directory), not from this package: the app's pdfjs-dist is
+// the one its bundle runs.
+const appRequire = createRequire(join(process.cwd(), 'package.json'))
+let pdfjsRoot
+try {
+  pdfjsRoot = dirname(appRequire.resolve('pdfjs-dist/package.json'))
+} catch {
+  console.error('arbidocs-copy-pdf-assets: pdfjs-dist is not installed (npm install pdfjs-dist)')
+  process.exit(1)
+}
+const versionOf = (dir) => JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8')).version
+
+// react-pdf may use a nested copy of pdfjs-dist; the worker must match that one.
+try {
+  const reactPdfRequire = createRequire(appRequire.resolve('react-pdf'))
+  const reactPdfPdfjs = dirname(reactPdfRequire.resolve('pdfjs-dist/package.json'))
+  if (versionOf(reactPdfPdfjs) !== versionOf(pdfjsRoot)) {
+    console.error(
+      `arbidocs-copy-pdf-assets: pdfjs-dist ${versionOf(pdfjsRoot)} differs from the ` +
+        `${versionOf(reactPdfPdfjs)} react-pdf uses. Pin "pdfjs-dist" to ` +
+        `"${versionOf(reactPdfPdfjs)}" (no ^) in package.json and reinstall.`
+    )
+    process.exit(1)
+  }
+} catch {
+  // No react-pdf installed: nothing to match.
+}
+
+const SHIMS = `
+if (typeof Uint8Array.prototype.toHex !== 'function') {
+  Object.defineProperty(Uint8Array.prototype, 'toHex', { configurable: true, writable: true,
+    value() { let s = ''; for (let i = 0; i < this.length; i++) s += this[i].toString(16).padStart(2, '0'); return s; } });
+}
+if (typeof Uint8Array.fromHex !== 'function') {
+  Object.defineProperty(Uint8Array, 'fromHex', { configurable: true, writable: true,
+    value(hex) { const h = hex.replace(/\\s+/g, ''); if (h.length % 2) throw new SyntaxError('Uint8Array.fromHex: odd length');
+      const out = new Uint8Array(h.length / 2);
+      for (let i = 0; i < out.length; i++) { const b = parseInt(h.slice(i * 2, i * 2 + 2), 16);
+        if (Number.isNaN(b)) throw new SyntaxError('Uint8Array.fromHex: non-hex digit'); out[i] = b; }
+      return out; } });
+}
+if (typeof Map.prototype.getOrInsertComputed !== 'function') {
+  Object.defineProperty(Map.prototype, 'getOrInsertComputed', { configurable: true, writable: true,
+    value(key, make) { if (this.has(key)) return this.get(key); const v = make(key); this.set(key, v); return v; } });
+}
+if (typeof Math.sumPrecise !== 'function') {
+  Object.defineProperty(Math, 'sumPrecise', { configurable: true, writable: true,
+    value(values) { let sum = 0, c = 0; for (const v of values) { const t = sum + v;
+      c += Math.abs(sum) >= Math.abs(v) ? sum - t + v : v - t + sum; sum = t; } return sum + c; } });
+}
+`
+
+const publicDir = resolve(target)
+mkdirSync(publicDir, { recursive: true })
+for (const name of ['pdf.worker.min.mjs', 'pdf.worker.mjs']) {
+  const source = readFileSync(join(pdfjsRoot, 'build', name), 'utf8')
+  writeFileSync(join(publicDir, name), SHIMS + source)
+}
+const dirs = [
+  ['cmaps', 'cmaps'],
+  ['standard_fonts', 'standard_fonts'],
+  ['wasm', 'wasm'],
+  ...(withImages ? [['web/images', 'images']] : []),
+]
+for (const [from, to] of dirs) {
+  const source = join(pdfjsRoot, from)
+  if (!existsSync(source)) {
+    console.error(`arbidocs-copy-pdf-assets: pdfjs-dist ${versionOf(pdfjsRoot)} has no ${from}/`)
+    process.exit(1)
+  }
+  cpSync(source, join(publicDir, to), { recursive: true })
+}
+console.log(
+  `pdf.js ${versionOf(pdfjsRoot)} worker, ${dirs.map(([, to]) => `${to}/`).join(', ')} ` +
+    `copied to ${publicDir}`
+)

package/dist/{StreamedArtifactEditor-OPL4KXOT.js → StreamedArtifactEditor-HTNPG4NB.js}

@@ -3,6 +3,7 @@ import { ArtifactMarkdownEditor } from './chunk-NEFHQHQV.js';
 import { ArtifactEditor, ArtifactRedlineView } from './chunk-65HZ36MY.js';
 import './chunk-LOJVUGBJ.js';
 import './chunk-7F6CBP3Z.js';
+import './chunk-VUNV25KB.js';
 import { useState } from 'react';
 import { Copy, Download } from 'lucide-react';
 import { Button, cn } from '@arbidocs/react/ui';
@@ -100,5 +101,5 @@ function StreamedArtifactEditor({
 }
 
 export { StreamedArtifactEditor as default };
-//# sourceMappingURL=StreamedArtifactEditor-OPL4KXOT.js.map
-//# sourceMappingURL=StreamedArtifactEditor-OPL4KXOT.js.map
+//# sourceMappingURL=StreamedArtifactEditor-HTNPG4NB.js.map
+//# sourceMappingURL=StreamedArtifactEditor-HTNPG4NB.js.map

package/dist/StreamedArtifactEditor-HTNPG4NB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/connection/StreamedArtifactEditor.tsx"],"names":[],"mappings":"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","file":"StreamedArtifactEditor-HTNPG4NB.js","sourcesContent":["import { useState, type ReactNode } from 'react'\nimport { Copy, Download } from 'lucide-react'\nimport { Button, cn } from '@arbidocs/react/ui'\nimport { renderArtifactMarkdown, useArtifactSession } from '@arbidocs/react/artifacts'\nimport { ArtifactEditor, ArtifactRedlineView, type ArtifactEditorLabels } from '../artifacts'\nimport {\n  ArtifactMarkdownEditor,\n  type ArtifactMarkdownEditorProps,\n} from '../artifacts/editor/ArtifactMarkdownEditor'\n\nexport interface StreamedArtifactEditorProps {\n  workspaceId: string | undefined\n  /** The stored first version (the lineage's root as far as this panel goes). */\n  docId: string\n  /** File name for the versions saved from here. */\n  title: string\n  testId: string\n  className?: string\n  /** Extra props of the rich-text editor (`dictation`, labels). */\n  editorProps?: Partial<Omit<ArtifactMarkdownEditorProps, 'markdown' | 'onChange' | 'onNormalized'>>\n  /** Called after a version is saved. */\n  onSaved?: (docId: string | undefined) => void\n  onSaveError?: (error: unknown) => void\n  /** Extra header actions next to the toolbar. */\n  actions?: (ctx: { content: string; title: string }) => ReactNode\n  /** Hide the default Copy and Download buttons. */\n  hideDefaultActions?: boolean\n  labels?: Partial<ArtifactEditorLabels>\n}\n\n/**\n * The editing stage of `StreamedArtifact`: `ArtifactEditor` bound to `useArtifactSession`. It is\n * a separate module because it pulls the rich-text editor (Lexical), which must stay behind a\n * `lazy()` boundary.\n */\nexport default function StreamedArtifactEditor({\n  workspaceId,\n  docId,\n  title,\n  testId,\n  className,\n  editorProps,\n  onSaved,\n  onSaveError,\n  actions,\n  hideDefaultActions,\n  labels,\n}: StreamedArtifactEditorProps) {\n  const [openId, setOpenId] = useState(docId)\n  const s = useArtifactSession({\n    workspaceId,\n    docId: openId,\n    title,\n    onSaved: ({ docId: next }) => {\n      if (next) setOpenId(next)\n      onSaved?.(next)\n    },\n    onSaveError,\n  })\n\n  const copy = () => void navigator.clipboard.writeText(s.content)\n  const download = () => {\n    const url = URL.createObjectURL(new Blob([s.content], { type: 'text/markdown' }))\n    const a = document.createElement('a')\n    a.href = url\n    a.download = `${title.replace(/\\.md$/i, '')}.md`\n    a.click()\n    URL.revokeObjectURL(url)\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex min-h-[560px] flex-col rounded-xl border border-border bg-card',\n        className\n      )}\n      data-testid={testId}\n    >\n      <ArtifactEditor\n        {...s.view}\n        className=\"min-h-[560px] flex-1\"\n        labels={labels}\n        onOpenVersion={setOpenId}\n        renderMarkdown={renderArtifactMarkdown}\n        editor={<ArtifactMarkdownEditor {...editorProps} {...s.editorProps} />}\n        redline={\n          <ArtifactRedlineView {...s.redlineProps} renderMarkdown={renderArtifactMarkdown} />\n        }\n        actions={\n          <>\n            {!hideDefaultActions && (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={copy}\n                  data-testid={`${testId}-copy`}\n                  className=\"pointer-coarse:min-h-11\"\n                >\n                  <Copy className=\"size-4\" aria-hidden /> Copy\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={download}\n                  data-testid={`${testId}-download`}\n                  className=\"pointer-coarse:min-h-11\"\n                >\n                  <Download className=\"size-4\" aria-hidden /> Download\n                </Button>\n              </>\n            )}\n            {actions?.({ content: s.content, title })}\n          </>\n        }\n      />\n    </div>\n  )\n}\n"]}

package/dist/{StreamedArtifactEditor-RIKG6CJQ.cjs → StreamedArtifactEditor-IZWYNFMM.cjs}

@@ -5,6 +5,7 @@ var chunkQS4RV3MA_cjs = require('./chunk-QS4RV3MA.cjs');
 var chunkSVJQWLOF_cjs = require('./chunk-SVJQWLOF.cjs');
 require('./chunk-QVBZESYQ.cjs');
 require('./chunk-MHVNT4J3.cjs');
+require('./chunk-DES3K4SD.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');
@@ -102,5 +103,5 @@ function StreamedArtifactEditor({
 }
 
 module.exports = StreamedArtifactEditor;
-//# sourceMappingURL=StreamedArtifactEditor-RIKG6CJQ.cjs.map
-//# sourceMappingURL=StreamedArtifactEditor-RIKG6CJQ.cjs.map
+//# sourceMappingURL=StreamedArtifactEditor-IZWYNFMM.cjs.map
+//# sourceMappingURL=StreamedArtifactEditor-IZWYNFMM.cjs.map

package/dist/StreamedArtifactEditor-IZWYNFMM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/connection/StreamedArtifactEditor.tsx"],"names":["useState","useArtifactSession","jsx","cn","ArtifactEditor","renderArtifactMarkdown","ArtifactMarkdownEditor","ArtifactRedlineView","jsxs","Fragment","Button","Copy","Download"],"mappings":"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","file":"StreamedArtifactEditor-IZWYNFMM.cjs","sourcesContent":["import { useState, type ReactNode } from 'react'\nimport { Copy, Download } from 'lucide-react'\nimport { Button, cn } from '@arbidocs/react/ui'\nimport { renderArtifactMarkdown, useArtifactSession } from '@arbidocs/react/artifacts'\nimport { ArtifactEditor, ArtifactRedlineView, type ArtifactEditorLabels } from '../artifacts'\nimport {\n  ArtifactMarkdownEditor,\n  type ArtifactMarkdownEditorProps,\n} from '../artifacts/editor/ArtifactMarkdownEditor'\n\nexport interface StreamedArtifactEditorProps {\n  workspaceId: string | undefined\n  /** The stored first version (the lineage's root as far as this panel goes). */\n  docId: string\n  /** File name for the versions saved from here. */\n  title: string\n  testId: string\n  className?: string\n  /** Extra props of the rich-text editor (`dictation`, labels). */\n  editorProps?: Partial<Omit<ArtifactMarkdownEditorProps, 'markdown' | 'onChange' | 'onNormalized'>>\n  /** Called after a version is saved. */\n  onSaved?: (docId: string | undefined) => void\n  onSaveError?: (error: unknown) => void\n  /** Extra header actions next to the toolbar. */\n  actions?: (ctx: { content: string; title: string }) => ReactNode\n  /** Hide the default Copy and Download buttons. */\n  hideDefaultActions?: boolean\n  labels?: Partial<ArtifactEditorLabels>\n}\n\n/**\n * The editing stage of `StreamedArtifact`: `ArtifactEditor` bound to `useArtifactSession`. It is\n * a separate module because it pulls the rich-text editor (Lexical), which must stay behind a\n * `lazy()` boundary.\n */\nexport default function StreamedArtifactEditor({\n  workspaceId,\n  docId,\n  title,\n  testId,\n  className,\n  editorProps,\n  onSaved,\n  onSaveError,\n  actions,\n  hideDefaultActions,\n  labels,\n}: StreamedArtifactEditorProps) {\n  const [openId, setOpenId] = useState(docId)\n  const s = useArtifactSession({\n    workspaceId,\n    docId: openId,\n    title,\n    onSaved: ({ docId: next }) => {\n      if (next) setOpenId(next)\n      onSaved?.(next)\n    },\n    onSaveError,\n  })\n\n  const copy = () => void navigator.clipboard.writeText(s.content)\n  const download = () => {\n    const url = URL.createObjectURL(new Blob([s.content], { type: 'text/markdown' }))\n    const a = document.createElement('a')\n    a.href = url\n    a.download = `${title.replace(/\\.md$/i, '')}.md`\n    a.click()\n    URL.revokeObjectURL(url)\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex min-h-[560px] flex-col rounded-xl border border-border bg-card',\n        className\n      )}\n      data-testid={testId}\n    >\n      <ArtifactEditor\n        {...s.view}\n        className=\"min-h-[560px] flex-1\"\n        labels={labels}\n        onOpenVersion={setOpenId}\n        renderMarkdown={renderArtifactMarkdown}\n        editor={<ArtifactMarkdownEditor {...editorProps} {...s.editorProps} />}\n        redline={\n          <ArtifactRedlineView {...s.redlineProps} renderMarkdown={renderArtifactMarkdown} />\n        }\n        actions={\n          <>\n            {!hideDefaultActions && (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={copy}\n                  data-testid={`${testId}-copy`}\n                  className=\"pointer-coarse:min-h-11\"\n                >\n                  <Copy className=\"size-4\" aria-hidden /> Copy\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={download}\n                  data-testid={`${testId}-download`}\n                  className=\"pointer-coarse:min-h-11\"\n                >\n                  <Download className=\"size-4\" aria-hidden /> Download\n                </Button>\n              </>\n            )}\n            {actions?.({ content: s.content, title })}\n          </>\n        }\n      />\n    </div>\n  )\n}\n"]}