@arbidocs/blocks 0.4.127 → 0.4.129

package/README.md

@@ -33,14 +33,28 @@ The blocks are styled with Tailwind v4 utilities. Tailwind skips `node_modules`
 class names, so you must point it at the package. Order matters:
 
 ```css
-/* app.css */
-@import '@arbidocs/blocks/tokens.css';   /* 1. token defaults, light + dark */
-@import '@arbidocs/blocks/blocks.css';   /* 2. blocks helpers (declares the layer order) */
-@import '@arbidocs/blocks/grid.css';     /*    only if you use /files, /facts or /databases */
-@import 'tailwindcss';                   /* 3. Tailwind */
-@import '@arbidocs/blocks/source.css';   /* 4. tells Tailwind to scan blocks' AND react's dist */
+/* app.css: one stylesheet, in this order */
+@import '@arbidocs/blocks/tokens.css';           /* 1. token defaults, light + dark */
+@import '@arbidocs/blocks/blocks.css';           /* 2. blocks helpers; declares the layer order, so it
+                                                       comes before any other blocks sheet */
+@import '@arbidocs/blocks/workflow-canvas.css';  /* 3. per entry, only for the entries you use: */
+                                                 /*    /workflow-canvas */
+@import '@arbidocs/blocks/grid.css';             /*    /files, /facts, /databases */
+@import '@arbidocs/blocks/calendar.css';         /*    /calendar */
+@import '@arbidocs/blocks/calls.css';            /*    /calls */
+@import 'tailwindcss';                           /* 4. Tailwind, after every other @import */
+@import '@arbidocs/blocks/source.css';           /* 5. tells Tailwind to scan blocks' AND react's dist */
 ```
 
+Two sheets are imported from the code that renders them rather than from `app.css`, because they
+are large and only those pages need them: `import '@arbidocs/blocks/studio.css'` next to `/studio`,
+and `import '@arbidocs/blocks/docx.css'` (with `@docx-editor.dev/react/styles.css`, see
+[src/docx/README.md](src/docx/README.md)) next to `/docx`.
+
+Every stylesheet is published with the package (`npm pack --dry-run` lists them under `src/`), and
+the release checks that each one, and each file it `@import`s, is in the tarball
+(`scripts/check-package-files.mjs`).
+
 `source.css` contains `@source` lines for the blocks' `dist` **and** `@arbidocs/react`'s `dist`
 (`../../react/dist` from `node_modules/@arbidocs/blocks/src`, `../../arbi-react/dist` in this
 monorepo). The react half matters: Dialog, Popover and the other primitives are defined in
@@ -54,7 +68,7 @@ lines yourself, relative to your stylesheet:
 ```
 
 Tailwind 4.1 or later is required (the `pointer-coarse:` variant). Dark mode is the `.dark` class
-or `[data-theme='dark']` on a parent. Studio pages also import `@arbidocs/blocks/studio.css`.
+or `[data-theme='dark']` on a parent.
 
 ## Import from a subpath
 

package/dist/{StreamedArtifactEditor-EEYAXJ4H.cjs → StreamedArtifactEditor-TQAND4H5.cjs}

@@ -2,7 +2,8 @@
 'use strict';
 
 var chunkQS4RV3MA_cjs = require('./chunk-QS4RV3MA.cjs');
-var chunkINW76PEL_cjs = require('./chunk-INW76PEL.cjs');
+var chunk2YV7FBLO_cjs = require('./chunk-2YV7FBLO.cjs');
+require('./chunk-VG24E4JJ.cjs');
 require('./chunk-QVBZESYQ.cjs');
 require('./chunk-MHVNT4J3.cjs');
 require('./chunk-DES3K4SD.cjs');
@@ -54,7 +55,7 @@ function StreamedArtifactEditor({
       ),
       "data-testid": testId,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkINW76PEL_cjs.ArtifactEditor,
+        chunk2YV7FBLO_cjs.ArtifactEditor,
         {
           ...s.view,
           className: "min-h-[560px] flex-1",
@@ -62,7 +63,7 @@ function StreamedArtifactEditor({
           onOpenVersion: setOpenId,
           renderMarkdown: artifacts.renderArtifactMarkdown,
           editor: /* @__PURE__ */ jsxRuntime.jsx(chunkQS4RV3MA_cjs.ArtifactMarkdownEditor, { ...editorProps, ...s.editorProps }),
-          redline: /* @__PURE__ */ jsxRuntime.jsx(chunkINW76PEL_cjs.ArtifactRedlineView, { ...s.redlineProps, renderMarkdown: artifacts.renderArtifactMarkdown }),
+          redline: /* @__PURE__ */ jsxRuntime.jsx(chunk2YV7FBLO_cjs.ArtifactRedlineView, { ...s.redlineProps, renderMarkdown: artifacts.renderArtifactMarkdown }),
           actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             !hideDefaultActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -103,5 +104,5 @@ function StreamedArtifactEditor({
 }
 
 module.exports = StreamedArtifactEditor;
-//# sourceMappingURL=StreamedArtifactEditor-EEYAXJ4H.cjs.map
-//# sourceMappingURL=StreamedArtifactEditor-EEYAXJ4H.cjs.map
+//# sourceMappingURL=StreamedArtifactEditor-TQAND4H5.cjs.map
+//# sourceMappingURL=StreamedArtifactEditor-TQAND4H5.cjs.map

package/dist/StreamedArtifactEditor-TQAND4H5.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-TQAND4H5.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"]}

package/dist/{StreamedArtifactEditor-TDATDYD2.js → StreamedArtifactEditor-XQNANTWM.js}

@@ -1,6 +1,7 @@
 "use client";
 import { ArtifactMarkdownEditor } from './chunk-NEFHQHQV.js';
-import { ArtifactEditor, ArtifactRedlineView } from './chunk-KELGOCJA.js';
+import { ArtifactEditor, ArtifactRedlineView } from './chunk-65S53MZK.js';
+import './chunk-NS4JD2VR.js';
 import './chunk-LOJVUGBJ.js';
 import './chunk-7F6CBP3Z.js';
 import './chunk-VUNV25KB.js';
@@ -101,5 +102,5 @@ function StreamedArtifactEditor({
 }
 
 export { StreamedArtifactEditor as default };
-//# sourceMappingURL=StreamedArtifactEditor-TDATDYD2.js.map
-//# sourceMappingURL=StreamedArtifactEditor-TDATDYD2.js.map
+//# sourceMappingURL=StreamedArtifactEditor-XQNANTWM.js.map
+//# sourceMappingURL=StreamedArtifactEditor-XQNANTWM.js.map

package/dist/StreamedArtifactEditor-XQNANTWM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/connection/StreamedArtifactEditor.tsx"],"names":[],"mappings":"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","file":"StreamedArtifactEditor-XQNANTWM.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"]}