@arbidocs/blocks 0.4.4 → 0.4.5

package/README.md

@@ -65,6 +65,8 @@ Every capability is its own entry, so a bundler only loads what you use:
 | `@arbidocs/blocks` | Light root: theme, primitives, chat, shell, auth, retrieval, agents, citations, collaboration, site blocks | none (zustand, dompurify) |
 | `/chat`, `/shell`, `/auth`, `/retrieval`, `/citations`, `/collaboration`, `/agents`, `/timeline`, `/site` | one capability each | none |
 | `/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) |
 | `/home`, `/workspaces` | dashboard, workspace cards and forms | `@dnd-kit/*` |
 | `/settings` | settings, billing, modals | `cmdk` |
 | `/connect` | demo/live connection layer | `@tanstack/react-query` |
@@ -112,6 +114,29 @@ const { isDockAvailable } = useChatSurface()
 ```
 
 Theme the user bubble with `--chat-user-bubble` and `--chat-user-bubble-foreground` (HSL triplets).
+## Edit an artifact, save versions, compare
+
+`/artifacts` is the surface for an AI-drafted document the user may edit: a toolbar (Edit, Cancel,
+Compare, Save as a new version), a version bar ("Version 2 of 3", a list, Compare with previous),
+and Word-style track changes between two versions with a per-change undo. It is presentational:
+state comes from `useArtifactSession` in `@arbidocs/react/artifacts`, and the editor and redline are
+slots.
+
+```tsx
+import { ArtifactEditor, ArtifactRedlineView } from '@arbidocs/blocks/artifacts'
+import { ArtifactMarkdownEditor } from '@arbidocs/blocks/artifacts/editor'
+import { renderArtifactMarkdown, useArtifactSession } from '@arbidocs/react/artifacts'
+import '@mdxeditor/editor/style.css'
+
+const s = useArtifactSession({ workspaceId, docId, onSaved: ({ docId: next }) => next && open(next) })
+<ArtifactEditor {...s.view} onOpenVersion={open} renderMarkdown={renderArtifactMarkdown}
+  editor={<ArtifactMarkdownEditor {...s.editorProps} />}
+  redline={<ArtifactRedlineView {...s.redlineProps} renderMarkdown={renderArtifactMarkdown} />} />
+```
+
+Every part takes `labels` and `testIds`; Mod+S saves while editing; touch targets are 44px. The
+editor needs `@mdxeditor/editor` (optional peer) and is heavy (mount it behind `lazy`) and needs the global `Prism` defined before it loads (`@lexical/code` reads it while it evaluates): in the module that lazily imports the editor, import first a side-effect module with `import Prism from 'prismjs'; globalThis.Prism = Prism`. A library cannot order that reliably across bundlers.
+See `examples/custom-ui/ArtifactPage.tsx` for a custom editing surface on in-memory data.
 
 ## Editorial site parts