@sciflow/editor-start 0.0.3 → 0.1.0

package/dist/lib/editor-element.js

@@ -22,6 +22,27 @@
  *
  * The rest of this file is heavily documented to map those steps to concrete
  * code. Treat it as a cookbook for your own integration.
+ *
+ * Light-DOM editable surface
+ * --------------------------
+ * The ProseMirror `contenteditable` (`view.dom`) is mounted on a **light-DOM
+ * child** of the host element (class `sf-editable-surface`), projected
+ * visually into the shadow root via a `<slot>`.  All chrome (formatbar,
+ * selection editor, node-view popovers) continues to live in the shadow root
+ * and is fully encapsulated.
+ *
+ * Why: external proofreading / AI writing extensions (Grammarly, LanguageTool
+ * browser add-on) walk the page's flat document tree for `[contenteditable]`
+ * and never enter shadow roots.  Mounting the editable in the light DOM makes
+ * it discoverable by those tools without sacrificing shadow encapsulation for
+ * the surrounding chrome.
+ *
+ * Consequence for theming: `.ProseMirror` content styles and inline node-view
+ * styles (figures, citations, footnotes, marks) are injected into a `<style>`
+ * element appended to `document.head` (scoped to `.sf-editable-surface`) so
+ * they reach PM's nested DOM.  Shadow-scoped `::part` / `:host` rules that
+ * applied to the editable content must be migrated to the
+ * `.sf-editable-surface .ProseMirror { … }` selector instead.
  */
 import { __decorate } from "tslib";
 import { css, html, unsafeCSS, LitElement } from 'lit';
@@ -31,6 +52,200 @@ import { manuscript as manuscriptSchema } from '@sciflow/schema-prosemirror';
 import editorStyles from './editor-element.css?inline';
 import { ghostCursorFeature } from './ghost-cursor.js';
 import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
+// ---------------------------------------------------------------------------
+// Light-DOM content styles
+//
+// ProseMirror's `.contenteditable` (view.dom) is mounted on `.sf-editable-surface`,
+// a light-DOM child of the host element.  Because `::slotted()` cannot reach
+// PM's nested content, content styles are injected into `document.head` under
+// a data attribute guard.
+//
+// Ref-counting: the shared `<style>` is injected when the first instance
+// connects and removed when the last instance disconnects.  A per-element
+// width `<style>` is also managed in `document.head`, keyed by a unique id
+// written as a `data-sf-width-<id>` attribute so it can be replaced or removed
+// without touching the shared content styles.
+//
+// These styles are scoped to `.sf-editable-surface` so they don't leak into
+// unrelated page content.  Chrome styles (:host, .editor border, theme vars)
+// remain shadow-scoped in `editor-element.css`.
+// ---------------------------------------------------------------------------
+const LIGHT_DOM_CONTENT_STYLES_ATTR = 'data-sf-content-styles';
+/** Module-level ref-count: number of currently connected `<sciflow-editor>` instances. */
+let _contentStylesRefCount = 0;
+const LIGHT_DOM_CONTENT_STYLES = `
+/* === SciFlow editor content styles (light-DOM surface) === */
+/* Scoped to .sf-editable-surface to avoid leaking into the host page. */
+.sf-editable-surface .ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  font-weight: lighter;
+  outline: none;
+  min-height: inherit;
+  padding: calc(0.75rem + 1.5em) 4rem 0.5rem calc(2.5rem + 1rem);
+  color: inherit;
+  font-size: 1rem;
+  counter-reset: sciflow-footnote;
+  line-height: 1.6;
+}
+.sf-editable-surface .ProseMirror p { margin: 0 0 0.75rem; }
+.sf-editable-surface .ProseMirror p:only-child:last-child,
+.sf-editable-surface .ProseMirror table p { margin: 0; }
+.sf-editable-surface .ProseMirror h1,
+.sf-editable-surface .ProseMirror h2,
+.sf-editable-surface .ProseMirror h3,
+.sf-editable-surface .ProseMirror h4,
+.sf-editable-surface .ProseMirror h5,
+.sf-editable-surface .ProseMirror h6 {
+  margin: 1.25rem 0 0.5rem; line-height: 1.2; position: relative;
+}
+.sf-editable-surface .ProseMirror > h1:first-child,
+.sf-editable-surface .ProseMirror > h2:first-child,
+.sf-editable-surface .ProseMirror > h3:first-child,
+.sf-editable-surface .ProseMirror > h4:first-child,
+.sf-editable-surface .ProseMirror > h5:first-child,
+.sf-editable-surface .ProseMirror > h6:first-child { margin-top: 0; }
+.sf-editable-surface .ProseMirror h1 { font-size: 1.33em; padding-top: 0.35em; font-weight: normal; }
+.sf-editable-surface .ProseMirror h2 { font-size: 1.22em; font-weight: normal; }
+.sf-editable-surface .ProseMirror h3 { font-size: 1.17em; font-weight: normal; }
+.sf-editable-surface .ProseMirror h4 { font-size: 1.11em; font-weight: normal; }
+.sf-editable-surface .ProseMirror h5 { font-size: 1.06em; font-weight: normal; }
+.sf-editable-surface .ProseMirror h6 { font-size: 1em; font-weight: bold; }
+.sf-editable-surface .ProseMirror h1::before {
+  content: "#"; opacity: 0.5; font-size: 0.8rem; position: absolute;
+  left: -2.5rem; top: 60%; transform: translateY(-50%); padding-right: .5rem;
+}
+.sf-editable-surface .ProseMirror h2::before {
+  content: "##"; opacity: 0.5; font-size: 0.8rem; padding-right: .5rem;
+  position: absolute; left: -2.5rem; top: 50%; transform: translateY(-50%);
+}
+.sf-editable-surface .ProseMirror h3::before {
+  content: "###"; opacity: 0.5; font-size: 0.8rem; padding-right: .5rem;
+  position: absolute; left: -2.5rem; top: 50%; transform: translateY(-50%);
+}
+.sf-editable-surface .ProseMirror li { position: relative; }
+.sf-editable-surface .ProseMirror img { max-width: 40vw; height: auto; }
+.sf-editable-surface .ProseMirror pre { white-space: pre-wrap; }
+.sf-editable-surface .ProseMirror cite {
+  background: var(--sciflow-editor-citation-bg, rgba(15,23,42,0.05));
+  color: var(--sciflow-editor-citation-color, inherit);
+  padding: 0.1rem 0.35rem; border-radius: 4px;
+}
+.sf-editable-surface .ProseMirror a[data-type='xref'] {
+  background: var(--sciflow-editor-citation-bg, rgba(15,23,42,0.05));
+  color: var(--sciflow-editor-citation-color, inherit);
+  padding: 0.1rem 0.35rem; border-radius: 4px; text-decoration: none;
+}
+.sf-editable-surface .ProseMirror a[data-type='xref']:hover { text-decoration: underline; }
+.sf-editable-surface .ProseMirror table {
+  width: 100%; border-collapse: collapse; border-spacing: 0; margin: 1rem 0;
+}
+.sf-editable-surface .ProseMirror th,
+.sf-editable-surface .ProseMirror td {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  vertical-align: top; box-sizing: border-box; position: relative;
+}
+.sf-editable-surface .ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.sf-editable-surface .ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width, 80px);
+}
+.sf-editable-surface .ProseMirror .tableWrapper { overflow-x: auto; }
+.sf-editable-surface .ProseMirror .column-resize-handle {
+  position: absolute; right: -2px; top: 0; bottom: 0; width: 4px;
+  z-index: 20; background-color: #adf; pointer-events: none;
+}
+.sf-editable-surface .ProseMirror.resize-cursor { cursor: ew-resize; cursor: col-resize; }
+.sf-editable-surface .ProseMirror .selectedCell::after {
+  z-index: 2; position: absolute; content: '';
+  left: 0; right: 0; top: 0; bottom: 0;
+  background: rgba(200,200,255,0.4); pointer-events: none;
+}
+.sf-editable-surface .ProseMirror section { margin-top: 2.5rem; }
+.sf-editable-surface .ProseMirror section:first-child { margin-top: 0.5rem; }
+.sf-editable-surface .ProseMirror-hideselection *::selection { background: transparent; }
+.sf-editable-surface .ProseMirror-hideselection *::-moz-selection { background: transparent; }
+.sf-editable-surface .ProseMirror-hideselection { caret-color: transparent; }
+.sf-editable-surface .ProseMirror [draggable][contenteditable='false'] { user-select: text; }
+.sf-editable-surface .ProseMirror-selectednode {
+  outline: 2px solid var(--sciflow-editor-selectednode, var(--sciflow-editor-border-active, #2563eb));
+  outline-offset: 1px;
+}
+.sf-editable-surface .ProseMirror cite.ProseMirror-selectednode {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sciflow-editor-border-active, #2563eb);
+}
+.sf-editable-surface .ProseMirror span[data-type='footnote'].ProseMirror-selectednode {
+  outline: none; box-shadow: none;
+}
+.sf-editable-surface .ProseMirror span[data-type='footnote'].ProseMirror-selectednode .sciflow-footnote-body {
+  border-color: var(--sciflow-editor-border-active, #2563eb);
+}
+.sf-editable-surface .ProseMirror a[data-type='xref'].ProseMirror-selectednode {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sciflow-editor-selectednode, var(--sciflow-editor-border-active, #2563eb));
+}
+.sf-editable-surface .ProseMirror li.ProseMirror-selectednode { outline: none; }
+.sf-editable-surface .ProseMirror li.ProseMirror-selectednode:after {
+  content: ''; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px;
+  border: 2px solid var(--sciflow-editor-selectednode, var(--sciflow-editor-border-active, #2563eb));
+  pointer-events: none;
+}
+.sf-editable-surface .ProseMirror img.ProseMirror-separator {
+  display: inline !important; border: none !important; margin: 0 !important;
+}
+.sf-editable-surface .prosemirror-ghost-cursor {
+  display: inline-block; width: 3px; height: 1.25em;
+  background: #2563eb; border-radius: 2px; vertical-align: text-bottom;
+  margin: 0 -1px; pointer-events: none;
+  box-shadow: 0 0 0 1.5px color-mix(in srgb, #2563eb 30%, transparent);
+  animation: sf-ghost-cursor-pulse 1.8s ease-in-out infinite;
+}
+@keyframes sf-ghost-cursor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.sf-editable-surface .prosemirror-ghost-selection {
+  background: color-mix(in srgb, #2563eb 25%, transparent);
+  border-radius: 2px;
+  outline: 1px solid color-mix(in srgb, #2563eb 40%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  .sf-editable-surface .ProseMirror-selectednode { outline-color: var(--sciflow-editor-selectednode, rgba(148,163,184,0.6)); }
+  .sf-editable-surface .ProseMirror cite.ProseMirror-selectednode { box-shadow: 0 0 0 2px var(--sciflow-editor-border-active, #3b82f6); }
+  .sf-editable-surface .ProseMirror a[data-type='xref'].ProseMirror-selectednode { box-shadow: 0 0 0 2px var(--sciflow-editor-selectednode, rgba(148,163,184,0.6)); }
+  .sf-editable-surface .ProseMirror li.ProseMirror-selectednode:after { border-color: var(--sciflow-editor-selectednode, rgba(148,163,184,0.6)); }
+}
+`;
+/**
+ * Increment the ref-count and inject the light-DOM content styles into
+ * document.head if this is the first active instance.  SSR-safe.
+ */
+function acquireLightDomContentStyles() {
+    if (typeof document === 'undefined')
+        return;
+    _contentStylesRefCount++;
+    if (_contentStylesRefCount === 1) {
+        const style = document.createElement('style');
+        style.setAttribute(LIGHT_DOM_CONTENT_STYLES_ATTR, '');
+        style.textContent = LIGHT_DOM_CONTENT_STYLES;
+        document.head.appendChild(style);
+    }
+}
+/**
+ * Decrement the ref-count and remove the shared content styles from
+ * document.head once the last active instance disconnects.  SSR-safe.
+ */
+function releaseLightDomContentStyles() {
+    if (typeof document === 'undefined')
+        return;
+    _contentStylesRefCount = Math.max(0, _contentStylesRefCount - 1);
+    if (_contentStylesRefCount === 0) {
+        document.querySelector(`[${LIGHT_DOM_CONTENT_STYLES_ATTR}]`)?.remove();
+    }
+}
 /**
  * Custom element that owns a SciFlow editor instance.
  *
@@ -93,6 +308,72 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
          * ```
          */
         this.locale = null;
+        // -------------------------------------------------------------------------
+        // Binding: which document, which part, which client, through which strategy.
+        //
+        // All four are mount-time identity. A running editor is bound to exactly one
+        // of each, and none can be swapped underneath it, so changing any of them
+        // after the editor is up tears the editor down and re-creates it against the
+        // new binding — the same path a replaced `features` list takes.
+        //
+        // The element opens no connections of its own: it only forwards what the
+        // host gives it to `Editor.create()`.
+        // -------------------------------------------------------------------------
+        /**
+         * Sync strategy that owns loading and persisting this document.
+         *
+         * Unset (the default) means the element uses a built-in in-memory strategy:
+         * the document stays in the page and nothing is persisted. Set it to hand
+         * loading, persistence and — with `clientID` — collaborative concurrency to
+         * your own implementation.
+         *
+         * When a strategy is supplied and neither `doc` nor `initialContent` is set,
+         * the editor starts from the strategy's `load(docId)`.
+         *
+         * Note that tearing the editor down (element disconnect, or a change to any
+         * binding property) disposes the strategy via its `dispose()`. Supply a
+         * fresh strategy whenever you change the binding.
+         *
+         * @example
+         * ```js
+         * editor.docId = 'doc-123';
+         * editor.partId = 'chapter-2';
+         * editor.clientID = 'tab-7';
+         * editor.sync = myStrategy;
+         * ```
+         */
+        this.sync = null;
+        /**
+         * Stable identifier of the document this editor is bound to. Handed to the
+         * sync strategy's `load()` and `bind()`.
+         *
+         * Defaults to a fresh random id per mount, which is only meaningful for the
+         * built-in in-memory strategy — set it whenever you supply your own `sync`.
+         */
+        this.docId = null;
+        /**
+         * Stable client identifier for collaborative editing. Setting it activates
+         * step-based concurrency (`prosemirror-collab`) in the editor runtime, so
+         * remote changes rebase local edits instead of replacing the document.
+         *
+         * Should stay stable across reloads of the same client (for example one id
+         * per browser tab) so the server and other clients can recognize this
+         * client's own confirmed changes. Only useful together with a `sync`
+         * strategy that speaks a step protocol.
+         *
+         * Set as an attribute (`client-id`) the value is always a string; set as a
+         * property it may also be a number.
+         */
+        this.clientID = null;
+        /**
+         * Part of the document this editor is bound to, for backends whose
+         * concurrency unit is narrower than a document — one document holding
+         * several parts, each with its own version counter and change log.
+         *
+         * The editor never interprets it; it is forwarded to the sync strategy's
+         * `bind()` so the strategy can address the right part.
+         */
+        this.partId = null;
         this.view = null;
         this.pendingOps = [];
         this.pendingOpsFromTransform = false;
@@ -101,6 +382,20 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         this.shadowStyleElements = [];
         this.themeStyleElements = [];
         this._hostDragoverBound = null;
+        /**
+         * The light-DOM container that ProseMirror mounts into.
+         * A direct child of the host element (not the shadow root), projected
+         * visually via the shadow root's `<slot>`.
+         */
+        this.lightDomMount = null;
+        /**
+         * Unique identifier for this element instance.  Used to key the per-element
+         * width `<style>` in `document.head` so that each instance can update or
+         * remove its own rule without affecting other instances.
+         */
+        this._instanceId = `sf-${Math.random().toString(36).slice(2)}`;
+        /** The `<style>` element in `document.head` that holds this instance's width rules. */
+        this._widthStyleEl = null;
     }
     get shadowStyles() {
         return this._shadowStyles;
@@ -152,9 +447,14 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
             dispatchEvent: (event) => this.editor?.dispatchEvent(event) ?? false,
         };
     }
+    // Shadow root retains chrome styles.  The `.editor` wrapper provides the
+    // border/focus-ring and projects the light-DOM editable via `<slot>`.
     static { this.styles = css `${unsafeCSS(editorStyles)}`; }
     render() {
-        return html `<div class="editor" part="editor"></div>`;
+        // The <slot> projects the light-DOM .sf-editable-surface child visually
+        // into the shadow layout.  All other chrome (formatbar slot, popovers)
+        // remains shadow-scoped via the editor-element.css `.editor` rules.
+        return html `<div class="editor" part="editor"><slot></slot></div>`;
     }
     /** Lit lifecycle hook: start the editor once the DOM container exists. */
     async firstUpdated() {
@@ -170,6 +470,29 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         if (this.locale) {
             setLocale(this.locale);
         }
+        // Inject light-DOM content styles (ref-counted; injected on first connect,
+        // removed on last disconnect).
+        acquireLightDomContentStyles();
+        // Create the light-DOM mount point as a direct child of the host.
+        // ProseMirror will mount its editable (view.dom) inside this div.
+        // Because it is a child of the host element — not the shadow root — its
+        // getRootNode() === document, making it discoverable by external tools.
+        if (!this.lightDomMount) {
+            const div = document.createElement('div');
+            div.className = 'sf-editable-surface';
+            div.setAttribute('data-sf-lightdom-mount', '');
+            this.appendChild(div);
+            this.lightDomMount = div;
+        }
+        // Re-apply the per-element width style whenever the element (re-)connects.
+        // disconnectedCallback removes _widthStyleEl from document.head; without
+        // this call the width constraint is silently lost after a DOM re-parent.
+        // Guard with hasUpdated so we don't race with firstUpdated on the initial
+        // render cycle (firstUpdated → applyShadowStyles → applyWidthStyles already
+        // covers that path).
+        if (this.hasUpdated) {
+            this.applyWidthStyles();
+        }
         this._hostDragoverBound = (e) => {
             if (!e.dataTransfer?.types || !this.contains(e.target))
                 return;
@@ -193,11 +516,22 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (this.deferInitializationForDoc && this.doc !== null) {
+        if (this.deferInitializationForDoc && !this.shouldDeferInitialization()) {
             this.deferInitializationForDoc = false;
             void this.initializeView();
         }
-        if (!this.suppressFeatureUpdate && changedProperties.has('features') && this.editor) {
+        // A running editor cannot be re-bound in place: its document identity, its
+        // part, its client identity and its strategy are all fixed at creation.
+        // Re-create it instead, discarding the previous binding's content — the
+        // new instance sources its document the same way a fresh mount does.
+        const bindingChanged = changedProperties.has('sync') ||
+            changedProperties.has('docId') ||
+            changedProperties.has('clientID') ||
+            changedProperties.has('partId');
+        if (bindingChanged && this.editor) {
+            void this.reinitializeEditor({ preserveContent: false });
+        }
+        else if (!this.suppressFeatureUpdate && changedProperties.has('features') && this.editor) {
             void this.reinitializeEditor();
         }
         // Only apply shadowStyles if changed via property (not via setShadowStyles method)
@@ -232,6 +566,18 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         this.themeUnsub = undefined;
         this.destroyEditor();
         this.view = null;
+        // Remove the light-DOM mount point.
+        if (this.lightDomMount && this.lightDomMount.parentNode === this) {
+            this.removeChild(this.lightDomMount);
+            this.lightDomMount = null;
+        }
+        // Remove the per-element width style from document.head.
+        if (this._widthStyleEl) {
+            this._widthStyleEl.remove();
+            this._widthStyleEl = null;
+        }
+        // Release the shared content styles (removes from head when last instance disconnects).
+        releaseLightDomContentStyles();
     }
     /**
      * Public helper to update the feature list and reconfigure the editor.
@@ -274,17 +620,20 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         return this.features ?? this.getDefaultFeatures();
     }
     shouldDeferInitialization() {
-        return this.doc === null && this.initialContent === null;
+        // A host-supplied strategy is itself a source for the document (its
+        // `load()`), so there is nothing left to wait for.
+        return this.doc === null && this.initialContent === null && this.sync === null;
     }
     async initializeView() {
         if (this.view) {
             return;
         }
-        const mountPoint = this.renderRoot.querySelector('.editor');
+        // Mount ProseMirror on the light-DOM child — the visual slot wrapper
+        // (.editor) is in the shadow root and projects this via <slot>.
+        const mountPoint = this.lightDomMount;
         if (!mountPoint) {
             return;
         }
-        const initialDoc = this.resolveInitialDoc();
         const docInput = this.doc;
         const initialFiles = this.isExternalDocUpdate(docInput) && Array.isArray(docInput.files) ? docInput.files : [];
         const initialReferences = this.isExternalDocUpdate(docInput) && Array.isArray(docInput.references) ? docInput.references : [];
@@ -292,11 +641,28 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         const externalSelection = this.isExternalDocUpdate(docInput) ? docInput.selection : undefined;
         const initialVersion = this.isExternalDocUpdate(docInput) && typeof docInput.version === 'number' ? docInput.version : undefined;
         const initialSelection = this.initialSelection ?? externalSelection;
+        // Who supplies the starting document: the host, or the strategy? A
+        // host-supplied strategy with no host-supplied content owns the load, and
+        // `Editor.create()` only calls `sync.load(docId)` when it receives no
+        // `initialDoc` — so that option has to be left out entirely, not passed
+        // as a placeholder.
+        const hostSync = this.sync;
+        let syncStrategy;
+        let initialDoc = null;
+        if (hostSync && docInput === null && this.initialContent === null) {
+            syncStrategy = hostSync;
+        }
+        else {
+            initialDoc = this.resolveInitialDoc();
+            syncStrategy = hostSync ?? this.createLocalSync(initialDoc);
+        }
         try {
             const editor = await Editor.create({
-                docId: `lit-${Math.random().toString(36).slice(2)}`,
-                sync: this.createLocalSync(initialDoc),
-                initialDoc: initialDoc.toJSON(),
+                docId: this.docId ?? `lit-${Math.random().toString(36).slice(2)}`,
+                sync: syncStrategy,
+                clientID: this.clientID ?? undefined,
+                partId: this.partId ?? undefined,
+                ...(initialDoc ? { initialDoc: initialDoc.toJSON() } : {}),
                 initialFiles,
                 initialReferences,
                 features: activeFeatures,
@@ -324,7 +690,7 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
                 this.dispatchSelectionChange(selection);
             });
             this.validationUnsub = editor.onValidation(() => undefined);
-            this.dispatchEditorChange(initialDoc.toJSON(), [], editor.getFiles());
+            this.dispatchEditorChange(initialDoc ? initialDoc.toJSON() : editor.getDoc(), [], editor.getFiles());
             this.dispatchEditorReady();
             this.initialSelection = undefined;
         }
@@ -360,7 +726,7 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
                 return {
                     doc: docJSON,
                     version: 0,
-                    selection: { anchor: 0, head: 0 },
+                    selection: { anchor: 1, head: 1 },
                     files: [],
                     references: [],
                 };
@@ -601,16 +967,27 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
      * Tear down subscriptions and dispose the editor instance.
      * Called automatically when the element disconnects.
      */
-    async reinitializeEditor() {
+    async reinitializeEditor(options = {}) {
         if (!this.isConnected) {
             return;
         }
-        const currentDoc = this.editor?.getDoc() ?? null;
-        const currentSelection = this.editor?.getSelection() ?? null;
-        const currentFiles = this.editor?.getFiles() ?? [];
-        const currentVersion = this.editor?.getVersion();
+        // Reconfiguring the editor (a new feature list) keeps the live document:
+        // it is the same document, edited by the same client, through the same
+        // strategy. Re-binding it (a new document, part, client or strategy) does
+        // not — that content belongs to the previous binding, and the new one
+        // sources its own from `doc`/`initialContent`/`sync.load()`.
+        const preserveContent = options.preserveContent ?? true;
+        const currentDoc = preserveContent ? this.editor?.getDoc() ?? null : null;
+        const currentSelection = preserveContent ? this.editor?.getSelection() ?? null : null;
+        const currentFiles = preserveContent ? this.editor?.getFiles() ?? [] : [];
+        const currentVersion = preserveContent ? this.editor?.getVersion() : undefined;
         this.destroyEditor();
         this.view = null;
+        // Clear the light-DOM mount so ProseMirror gets a fresh container on
+        // re-init (avoids stale node-view DOM from the previous instance).
+        if (this.lightDomMount) {
+            this.lightDomMount.innerHTML = '';
+        }
         if (currentDoc) {
             const nextDoc = {
                 doc: currentDoc,
@@ -624,7 +1001,9 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
             }
             this.doc = nextDoc;
         }
-        this.initialSelection = currentSelection ?? this.initialSelection;
+        this.initialSelection = preserveContent
+            ? currentSelection ?? this.initialSelection
+            : undefined;
         await this.initializeView();
     }
     /**
@@ -684,30 +1063,49 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         if (!root || typeof root.appendChild !== 'function') {
             return;
         }
+        // Remove previously injected consumer shadow styles.
         for (const styleEl of this.shadowStyleElements) {
             if (styleEl.parentNode === root) {
                 root.removeChild(styleEl);
             }
         }
         this.shadowStyleElements = [];
+        // Consumer-supplied shadow styles go into the shadow root (unchanged API).
         const cssTexts = this.normalizeShadowStyles(this.shadowStyles);
-        const widthCss = this.getEditorWidthStyles();
-        if (widthCss) {
-            cssTexts.push(widthCss);
-        }
-        if (cssTexts.length === 0) {
-            return;
-        }
         for (const cssText of cssTexts) {
             const styleEl = document.createElement('style');
             styleEl.textContent = cssText;
             root.appendChild(styleEl);
             this.shadowStyleElements.push(styleEl);
         }
+        // Width styles target the light-DOM editable (.sf-editable-surface .ProseMirror).
+        // Shadow CSS cannot pierce into slotted descendants, so these must live in
+        // document.head where they reach the light-DOM tree directly.
+        this.applyWidthStyles();
+    }
+    /**
+     * Inject (or replace) the per-element width style in `document.head`.
+     * Keyed by `data-sf-width-<instanceId>` so each instance manages its own rule.
+     * SSR-safe.
+     */
+    applyWidthStyles() {
+        if (typeof document === 'undefined')
+            return;
+        const css = this.getEditorWidthStyles();
+        if (!this._widthStyleEl) {
+            const el = document.createElement('style');
+            el.setAttribute(`data-sf-width-${this._instanceId}`, '');
+            document.head.appendChild(el);
+            this._widthStyleEl = el;
+        }
+        this._widthStyleEl.textContent = css;
     }
     getEditorWidthStyles() {
         const isNarrow = this.editorWidth === 'narrow';
-        return `.ProseMirror {
+        // Scoped to .sf-editable-surface so the rule reaches the light-DOM editable.
+        // Injected into document.head (not the shadow root) so shadow-CSS slot
+        // restrictions do not apply.
+        return `.sf-editable-surface[data-sf-lightdom-mount] .ProseMirror {
   font-size: 11pt;
   max-width: ${isNarrow ? '52ch' : '82ch'};
   margin-left: auto;
@@ -776,6 +1174,18 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], SciFlowEditorElement.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], SciFlowEditorElement.prototype, "sync", void 0);
+__decorate([
+    property({ type: String, attribute: 'doc-id' })
+], SciFlowEditorElement.prototype, "docId", void 0);
+__decorate([
+    property({ attribute: 'client-id' })
+], SciFlowEditorElement.prototype, "clientID", void 0);
+__decorate([
+    property({ type: String, attribute: 'part-id' })
+], SciFlowEditorElement.prototype, "partId", void 0);
 SciFlowEditorElement = __decorate([
     customElement('sciflow-editor')
 ], SciFlowEditorElement);

package/dist/lib/format-bar.d.ts

@@ -35,6 +35,16 @@ export declare class SciFlowFormatBarElement extends LitElement {
     editor: SciFlowEditorElement | null;
     /** ID reference to resolve an editor instance declaratively. */
     for?: string;
+    /**
+     * Space- or comma-separated list of command-metadata `group` names to omit
+     * from rendering (e.g. `"align"`). Suppresses the toolbar buttons for that
+     * group without touching command registration — the commands stay
+     * schema-legal and remain reachable via `editor.commands`/`runner.available()`.
+     * Use this for structured-manuscript contexts (e.g. a JATS-based export)
+     * where a UI-exposed capability isn't representable in the export content
+     * model. See docs/pages/user-guide/web-component-api.md.
+     */
+    hiddenGroups: string;
     private selectionVersion;
     private styleMenuOpen;
     private insertMenuOpen;
@@ -109,6 +119,18 @@ export declare class SciFlowFormatBarElement extends LitElement {
      * Render a single command button, wiring up availability checks and active state handling.
      */
     private renderCommandButton;
+    /**
+     * Parse the `hidden-groups` attribute into a set of group names to suppress.
+     * Accepts whitespace- and/or comma-separated values (e.g. `"align table"`, `"align,table"`).
+     */
+    private get hiddenGroupSet();
+    /**
+     * Drop metadata entries whose `group` is listed in `hidden-groups` before any
+     * rendering derivation runs. This is a rendering-only filter: it does not touch
+     * command registration, so hidden commands stay schema-legal and remain reachable
+     * via `editor.commands`/`runner.available()` — only the toolbar buttons disappear.
+     */
+    private filterHiddenGroups;
     /**
      * Determine which groups should be displayed and in which order based on command metadata.
      */

package/dist/lib/format-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format-bar.d.ts","sourceRoot":"","sources":["../../src/lib/format-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAa,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAoChE;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,oFAAoF;IAEpF,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IAEhE,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,OAAO,CAAC,gBAAgB,CAAK;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,iBAAiB,CAAC,CAAgB;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,cAAc,CAAC,CAAgB;IACvC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,kBAAkB,CAA0B;IACpD,OAAO,CAAC,mBAAmB,CAAC,CAA0B;IAEtD,OAAgB,MAAM,0BAAmC;IAEzD,uEAAuE;IAC9D,iBAAiB,IAAI,IAAI;IAoBlC,qDAAqD;IAC5C,oBAAoB,IAAI,IAAI;IAYrC;;;OAGG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMjF;;;OAGG;cACgB,MAAM;IAwCzB,OAAO,CAAC,mBAAmB;IAyD3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,oBAAoB;IAuD5B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,0BAA0B;IAkBlC,OAAO,CAAC,yBAAyB;IAWjC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA2ChC;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,aAAa;IAkBrB,+DAA+D;IAC/D,OAAO,CAAC,qBAAqB;IAc7B,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;IAQxB,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IA6BxB,mDAAmD;IACnD,OAAO,CAAC,kBAAkB;IA6B1B,yEAAyE;IACzE,OAAO,CAAC,mBAAmB;IA6C3B,gFAAgF;IAChF,OAAO,CAAC,iBAAiB;IAmBzB,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAmB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuC3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;CA2BzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,uBAAuB,CAAC;KAC9C;CACF"}
+{"version":3,"file":"format-bar.d.ts","sourceRoot":"","sources":["../../src/lib/format-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAa,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAoChE;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,oFAAoF;IAEpF,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IAEhE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;;;;OAQG;IAEH,YAAY,SAAM;IAGlB,OAAO,CAAC,gBAAgB,CAAK;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,iBAAiB,CAAC,CAAgB;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,cAAc,CAAC,CAAgB;IACvC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,kBAAkB,CAA0B;IACpD,OAAO,CAAC,mBAAmB,CAAC,CAA0B;IAEtD,OAAgB,MAAM,0BAAmC;IAEzD,uEAAuE;IAC9D,iBAAiB,IAAI,IAAI;IAoBlC,qDAAqD;IAC5C,oBAAoB,IAAI,IAAI;IAYrC;;;OAGG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMjF;;;OAGG;cACgB,MAAM;IAwCzB,OAAO,CAAC,mBAAmB;IAyD3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,oBAAoB;IAuD5B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,0BAA0B;IAkBlC,OAAO,CAAC,yBAAyB;IAWjC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA2ChC;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,aAAa;IAkBrB,+DAA+D;IAC/D,OAAO,CAAC,qBAAqB;IAc7B,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;IAQxB,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IA6BxB,mDAAmD;IACnD,OAAO,CAAC,kBAAkB;IA6B1B,yEAAyE;IACzE,OAAO,CAAC,mBAAmB;IA6C3B,gFAAgF;IAChF,OAAO,CAAC,iBAAiB;IAmBzB,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAmB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuC3B;;;OAGG;IACH,OAAO,KAAK,cAAc,GAOzB;IAED;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAY1B;;OAEG;IACH,OAAO,CAAC,gBAAgB;CA2BzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,uBAAuB,CAAC;KAC9C;CACF"}