@arbidocs/blocks 0.4.20 → 0.4.22

package/dist/workspaces/index.cjs

@@ -4,11 +4,11 @@
 var chunkXZIYRKLW_cjs = require('../chunk-XZIYRKLW.cjs');
 var chunkXAJIKT6Y_cjs = require('../chunk-XAJIKT6Y.cjs');
 var chunkOB5F4577_cjs = require('../chunk-OB5F4577.cjs');
+require('../chunk-C54XEN5T.cjs');
+var chunkKDG6FER6_cjs = require('../chunk-KDG6FER6.cjs');
 var chunk7G2LJMUG_cjs = require('../chunk-7G2LJMUG.cjs');
 var chunk2ZTONLT5_cjs = require('../chunk-2ZTONLT5.cjs');
 require('../chunk-DCDVWPMB.cjs');
-require('../chunk-C54XEN5T.cjs');
-var chunkKDG6FER6_cjs = require('../chunk-KDG6FER6.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');

package/dist/workspaces/index.js

@@ -2,11 +2,11 @@
 import { CollapsibleSection, KeyValueRow } from '../chunk-LGBAZD37.js';
 import { MemberAvatarStack } from '../chunk-XNOASBGW.js';
 import { ActionLink } from '../chunk-S7PSMMRG.js';
+import '../chunk-76JDDMSP.js';
+import { fromNow, fmtDate } from '../chunk-OXF2IFXG.js';
 export { RoleBadge, WorkspaceTypeBadgeView } from '../chunk-NBV56SGU.js';
 import { ModalHeader } from '../chunk-CPMNAJLF.js';
 import '../chunk-TJMKFY5P.js';
-import '../chunk-76JDDMSP.js';
-import { fromNow, fmtDate } from '../chunk-OXF2IFXG.js';
 import { createContext, useContext, useMemo, useState, useCallback, useId } from 'react';
 import { FileText, MessagesSquare, Users, Check, ChevronRight, UserPlus, LogOut, AlertCircle, Plus, ArrowUpRight, AlignLeft, Globe, CreditCard, Loader2, FolderLock } from 'lucide-react';
 import { cn, Button, Dialog, DialogContent, DialogTitle, DialogDescription, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectSeparator, Input } from '@arbidocs/react/ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/blocks",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "Composable, domain-neutral UI blocks for ARBI apps, organised by capability (retrieval, facts, agents, workspaces, citations, collaboration) plus shell, theme and site primitives, on top of @arbidocs/react.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -112,6 +112,17 @@
       "types": "./dist/artifacts/editor/index.d.ts",
       "import": "./dist/artifacts/editor/index.js",
       "require": "./dist/artifacts/editor/index.cjs"
+    },
+    "./docx": {
+      "types": "./dist/docx/index.d.ts",
+      "import": "./dist/docx/index.js",
+      "require": "./dist/docx/index.cjs"
+    },
+    "./docx.css": "./src/docx/styles.css",
+    "./connect/docx": {
+      "types": "./dist/connect/docx.d.ts",
+      "import": "./dist/connect/docx.js",
+      "require": "./dist/connect/docx.cjs"
     }
   },
   "typesVersions": {
@@ -172,6 +183,12 @@
       ],
       "artifacts/editor": [
         "./dist/artifacts/editor/index.d.ts"
+      ],
+      "docx": [
+        "./dist/docx/index.d.ts"
+      ],
+      "connect/docx": [
+        "./dist/connect/docx.d.ts"
       ]
     }
   },
@@ -181,7 +198,9 @@
     "src/blocks.css",
     "src/studio/studio.css",
     "src/components/grid.css",
-    "src/source.css"
+    "src/source.css",
+    "src/docx/styles.css",
+    "src/docx/README.md"
   ],
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json",
@@ -194,7 +213,7 @@
     "example:test:e2e": "playwright test -c examples/custom-ui/playwright.config.ts"
   },
   "dependencies": {
-    "@arbidocs/client": "0.4.20",
+    "@arbidocs/client": "0.4.22",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -206,17 +225,23 @@
     "cmdk": "^1.1.1",
     "dompurify": "^3.4.7",
     "lucide-react": "^1.22.0",
-    "zustand": "^5.0.14"
+    "zustand": "^5.0.14",
+    "fflate": "^0.8.2",
+    "@hocuspocus/provider": "4.6.0"
   },
   "peerDependencies": {
-    "@arbidocs/react": "0.4.20",
+    "@arbidocs/react": "0.4.22",
     "@mdxeditor/editor": "^4.0.4",
     "@measured/puck": ">=0.20",
     "@playwright/test": ">=1.40",
     "@tanstack/react-query": ">=5",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-router-dom": ">=6"
+    "react-router-dom": ">=6",
+    "@docx-editor.dev/core": "2.27.0",
+    "@docx-editor.dev/react": "2.27.0",
+    "@docx-editor.dev/pro": "2.27.0",
+    "yjs": "^13.6.32"
   },
   "peerDependenciesMeta": {
     "@mdxeditor/editor": {
@@ -233,6 +258,18 @@
     },
     "react-router-dom": {
       "optional": true
+    },
+    "@docx-editor.dev/core": {
+      "optional": true
+    },
+    "@docx-editor.dev/react": {
+      "optional": true
+    },
+    "@docx-editor.dev/pro": {
+      "optional": true
+    },
+    "yjs": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -248,7 +285,11 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router-dom": "^6.30.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "@docx-editor.dev/core": "2.27.0",
+    "@docx-editor.dev/react": "2.27.0",
+    "@docx-editor.dev/pro": "2.27.0",
+    "yjs": "^13.6.32"
   },
   "license": "MIT",
   "publishConfig": {

package/src/docx/README.md

@@ -0,0 +1,68 @@
+# Native DOCX building blocks
+
+Import from `@arbidocs/blocks/docx`. This optional entry is separate from the root
+package so apps that do not edit Word files do not load the DOCX engine.
+Install the three `@docx-editor.dev` peer packages at 2.27.0 and `yjs`. The blocks package supplies the Hocuspocus provider.
+The Pro package requires an appropriate production licence.
+
+```tsx
+import {
+  NativeDocxEditor, loadDocxFonts, type NativeDocxAdapter,
+} from '@arbidocs/blocks/docx'
+import '@docx-editor.dev/react/styles.css'
+import '@arbidocs/blocks/docx.css'
+
+// Keep this adapter stable for the mounted document. Supply your authenticated
+// fetch implementation; `request` paths are relative to ARBI's /v1/editor.
+const adapter: NativeDocxAdapter = {
+  request: authenticatedEditorRequest,
+  open: id => authenticatedEditorRequest(`/${id}/session`, {
+    method: 'POST',
+  }).then(r => r.json()),
+  save: (id, state) => authenticatedEditorRequest(`/${id}/save`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ state }),
+  }).then(r => r.json()),
+  loadFonts: () => loadDocxFonts('/native-docx/fonts'),
+  baseUrl: apiOrigin,
+  author: currentUserName,
+  onDirtyChange: setNavigationGuard,
+  onVersionSaved: refreshDocumentCache,
+  subscribeTokenChanges: subscribeToSessionRenewal,
+}
+
+<NativeDocxEditor documentId={documentId} title="Contract.docx"
+  adapter={adapter} onSaved={openSavedVersion} />
+```
+
+The complete widget handles Yjs/Hocuspocus collaboration, encrypted server
+recovery acknowledgements, reconnects, tracked changes, comments, review actions,
+immutable Save version, DOCX download, read-only snapshots, and new Word notes.
+Use `snapshot` for immutable history/compare documents. Supply `draftContent`
+for a new note; `/prepare` converts its initial content and `/notes` saves DOCX.
+
+Fonts are supplied by the host: either provide your own `FontConfiguration`, or
+serve the twelve Liberation TTF files used by `loadDocxFonts`. The ARBI app serves
+these at `/native-docx/fonts`; this library does not assume a consumer's asset
+server or copy assets automatically.
+
+For custom layouts, the same entry exports `DocxRibbon`, `DocxParticipants`,
+`DocxEditor` compound primitives, `DocxEditorReview`, editor/review hooks and
+`createHocuspocusCollaboration`. Mount the ribbon within `DocxEditor.Root` and the
+review UI inside `DocxEditor.Viewport`. There are no imports from the ARBI app,
+Zustand stores, app routing, notification singletons, or app query keys.
+
+Backend services are still required: ARBI native editor endpoints, one
+Hocuspocus room owner and object storage; LibreOffice provides document compare.
+Workspace people and agents are available through the adapter's `mentions` and
+`requestAgent` callbacks. `@ARBI` wakes the managed assistant; replies remain in
+the originating comment thread. `ConnectedNativeDocxEditor` from `@arbidocs/blocks/connect/docx` supplies these
+callbacks using the blocks connection and authenticated SDK, including normal
+session recovery. Import the same two stylesheets and serve the document fonts.
+For a prompt panel, pass `activeArtifactExtId: documentId` to
+`useConnectedAiTask().run(prompt, [], options)`; the backend edits the live DOCX
+with tracked operations and refuses stale targets.
+
+`NativeDocxComparison` uses the same adapter and native editor for the LibreOffice
+Word redline. Pass `baseId`, `revisedId`, `title` and optionally `onCompared` to
+refresh only the generated document in your host cache. Source files stay intact.

package/src/docx/styles.css

@@ -0,0 +1,36 @@
+.native-docx-viewer{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;background:var(--background);color:var(--foreground);font:inherit}
+.native-docx-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
+.native-docx-body .docx-toolbar{flex:none;width:100%;margin:0;border-radius:0;border-width:0 0 1px;padding:4px 8px;background:var(--background);box-shadow:none}
+.native-docx-stage{position:relative;flex:1;min-height:0;overflow:hidden}
+.native-docx-viewport{height:100%;padding-top:8px;padding-bottom:64px;background:var(--muted)}
+.native-docx-body .docx-paginated-surface{margin-top:0;margin-bottom:0}
+.native-docx-actions{position:absolute;z-index:30;right:12px;bottom:12px;left:12px;display:flex;align-items:center;gap:8px;pointer-events:none;font-size:11px}
+.native-docx-actions>*{pointer-events:auto;flex-shrink:0}
+.native-docx-actions .native-docx-status{margin-right:auto;display:flex;align-items:center;gap:5px;max-width:45%;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--muted-foreground);box-shadow:0 2px 8px #0000000a}
+.native-docx-actions button{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--background);cursor:pointer;font:inherit;box-shadow:0 2px 8px #0000000a}
+.native-docx-actions button:hover{background:var(--muted)}.native-docx-actions button:disabled{opacity:.5;cursor:default}.native-docx-actions button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.native-docx-actions .native-docx-save{background:#285c4b;color:white;border-color:#285c4b}
+.native-docx-presence{display:flex;gap:4px}.native-docx-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d7e9e0;color:#285c4b;font-size:10px}
+.native-docx-error{padding:24px;display:grid;gap:12px;color:var(--foreground)}
+.native-docx-notice{position:absolute;z-index:40;top:48px;left:12px;right:12px;padding:8px 12px;font-size:11px;border-radius:8px;background:#fff6e5;color:#76572f;box-shadow:0 2px 10px #00000014}.native-docx-notice[data-error=true]{background:#fff0ef;color:#a23832}
+.native-docx-body .docx-review__card{font-family:inherit}
+@media(max-width:600px){.native-docx-actions{right:8px;left:8px;gap:5px}.native-docx-actions .native-docx-status{font-size:10px;padding:5px;max-width:40%}.native-docx-actions button{padding:6px}.native-docx-presence{display:none}}
+
+/* Review controls overlay the page, matching the other ARBI viewers. */
+.native-docx-body .native-docx-viewport[data-review-pane]{padding-inline:8px;scrollbar-gutter:stable;transition:none}
+.native-docx-viewport .docx-review{left:auto!important;right:8px!important}
+.native-docx-stage .docx-editor__page-number{top:auto;bottom:56px;right:12px;transform:none}
+
+.native-docx-ribbon{display:flex;align-items:center;flex:none;min-width:0;border-bottom:1px solid var(--border);background:var(--background)}
+.native-docx-ribbon>select{flex:none;width:76px;margin:4px;padding:6px 4px;border:0;border-radius:4px;background:var(--muted);color:var(--foreground);font:inherit;font-size:12px;cursor:pointer}
+.native-docx-body .native-docx-ribbon .docx-toolbar{min-width:0;flex:1;width:auto;border:0;overflow:visible;flex-wrap:nowrap}
+.native-docx-ribbon .docx-toolbar>*{flex-shrink:0}
+
+.native-docx-ribbon{position:relative;z-index:35}
+.native-docx-ribbon>select{width:64px;margin-inline:2px}
+.native-docx-ribbon .docx-toolbar{gap:2px}
+.native-docx-ribbon-menu{position:static;display:flex;align-items:center}
+.native-docx-ribbon-trigger{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}
+.native-docx-ribbon-trigger:hover,.native-docx-ribbon-trigger[aria-expanded=true]{background:var(--muted)}
+.native-docx-ribbon-popover{position:absolute;top:100%;right:8px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:270px;max-width:calc(100% - 16px);padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--background);box-shadow:0 4px 16px #0002}
+.native-docx-ribbon .docx-toolbar__button{width:28px;min-width:28px;padding-inline:4px}