@liminis/editor 0.2.2 → 0.4.0

package/LICENSE

@@ -19,16 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-This package vendors a modified copy of `mdast-util-wiki-link` (MIT,
-Copyright (c) 2020 Mark Hudnall). Its license and a description of the
-modifications ship alongside it, at
-`dist/markdown/vendor/mdast-util-wiki-link/`.
-
-This package derives from the `webview-ui` package of SlashMD
-(https://github.com/wolfdavo/SlashMD) by David Wolfenden, which that project's
-README declares to be MIT-licensed. SlashMD carries no LICENSE file and no
-copyright notice, so none is reproduced here; this notice records the
-derivation and the stated license in their absence.

package/README.md

@@ -43,12 +43,20 @@ produce a broken editor context — peering is what prevents both.
 
 ```bash
 pnpm add react@^19 react-dom@^19 \
-  lexical@^0.44 @lexical/react@^0.44 @lexical/code@^0.44 \
-  @lexical/code-prism@^0.44 @lexical/link@^0.44 @lexical/list@^0.44 \
-  @lexical/mark@^0.44 @lexical/markdown@^0.44 @lexical/rich-text@^0.44 \
-  @lexical/selection@^0.44 @lexical/table@^0.44 @lexical/utils@^0.44
+  lexical@^0.49 @lexical/react@^0.49 @lexical/code@^0.49 \
+  @lexical/code-prism@^0.49 @lexical/link@^0.49 @lexical/list@^0.49 \
+  @lexical/mark@^0.49 @lexical/markdown@^0.49 @lexical/rich-text@^0.49 \
+  @lexical/selection@^0.49 @lexical/table@^0.49 @lexical/utils@^0.49
 ```
 
+> **The Lexical peer ranges are single-caret, not a wide band.** Lexical is
+> also `0.x`, where every minor is permitted to break — unlike React's range
+> above, which spans an untested-but-stable range, the Lexical range names
+> exactly the one minor this package is built and tested against. Expect it
+> to move forward (e.g. to `^0.50`) only after this package has adopted and
+> tested that release, not automatically at every upstream release. See
+> `docs/decisions/adr-92-lexical-peer-range-policy.md`.
+
 pnpm v8+ and npm v7+ install peers automatically, so in practice the first
 command is usually enough.
 
@@ -198,24 +206,47 @@ Neither is a package defect, but only one of them tells you what is wrong.
 
 The editor's colors, borders and a few layout metrics are all CSS custom
 properties under a single package-owned vocabulary, `--liminis-editor-*`.
-Every one of them resolves with no host configuration at all — the table
+Every one of them resolves with no host configuration at all, and every one
+of them *carries its own real value* declared at `:root`/`.dark` in
+`styles.css` — there is no indirection to look through (ADR-98). The table
 below exists so you can *override* a palette, and also so you can *consume*
 one: every property this package declares with a value anywhere in
-`styles.css` — the pre-`0.2.0` names still carrying the real defaults
-(`--vscode-*`, `--slashmd-*`, `--checkbox-*`, and a couple of standalone
-legacy names) that the `--liminis-editor-*` names below fall back to — is
-part of this package's public API, readable directly by a host, not only
-overridable. (The `--liminis-editor-*` names themselves are never declared
-with a value directly — see "Has a default" below — nor are legacy names
-like `--color-*` that appear only as an inner link in a fallback chain
-rather than a `:root`/`.dark` declaration; neither is part of the defined
-set this paragraph describes.) Some hosts do exactly that — mapping their
-own design tokens onto these definitions with `var(--x)` rather than
-overriding them. Renaming or removing a definition is therefore a breaking
-change, the same as any other change to a supported API surface described
-under "Versioning policy" above, and is distinct from renaming a
-*consumption* site (covered separately in "Migrating from the old names"
-below) — this package's CI guards against a definition disappearing
+`styles.css` is part of this package's public API, readable directly by a
+host, not only overridable.
+
+Before `0.4.0`, a small set of pre-`0.2.0` names (`--vscode-*`,
+`--checkbox-border`, `--editor-brand`) carried the real defaults, and every
+`--liminis-editor-*` name was itself only a forward to one of them. That
+direction is now reversed: those legacy names are deprecated shims —
+`<legacy-name>: var(--liminis-editor-x);` — read by nothing inside this
+package, kept only so that **reading** one of them (e.g. mapping a host's own
+design tokens onto `--vscode-foreground`) still returns a real value, via
+ordinary CSS cascade resolution of the shim's own `var()` reference.
+**Setting** only a legacy name no longer themes the editor: every internal
+consumption site reads `--liminis-editor-foreground` directly, never
+`--vscode-foreground`, so a host's override of the legacy name changes what
+that legacy property itself computes to and nothing else — it never reaches
+the editor. This was verified with `getComputedStyle` in a running Electron
+shell (`examples/electron/e2e/theming-aliases.spec.ts`), not assumed from
+cascade theory alone — see "Migrating from the old names" below for what to
+do about it. The pre-`0.2.0` `--slashmd-*` names have no shim at all — they
+are deleted outright, verified unread by any known consumer (ADR-98).
+
+`--liminis-editor-primary`/`-100` and `--liminis-editor-muted-foreground`/`-100`
+back the C4 diagram's layout-toggle buttons. Until `0.4.0`, `C4Component.tsx`
+checked liminis-app's own `--color-primary`/`--color-muted-foreground`
+Tailwind tokens *first*, falling back to this package's own default — a
+deliberate, documented exception (ADR-98) to the rule above. That exception
+has been removed: these six expressions now read `--liminis-editor-*` only, the
+same as every other consumption site in this package, and a host's
+`--color-*` tokens no longer have any effect on them (see ADR-98's
+amendment). A host that wants to override the C4 diagram colors sets
+`--liminis-editor-primary` and its siblings, the same as for any other
+token.
+
+Renaming or removing a definition is a breaking change, the same as any
+other change to a supported API surface described under "Versioning policy"
+above — this package's CI guards against a definition disappearing
 unintentionally (ADR-092).
 
 **Previous name** is the pre-`0.2.0` name this property replaced — the exact
@@ -224,87 +255,83 @@ vocabulary (`—` for a property that was never renamed). **Controls** is a
 short description of what the token actually affects. **Kind** distinguishes
 tokens that only affect appearance (`Cosmetic`) from the handful that also
 affect layout (`Structural` — heading indents and the base font). **Has a
-default** marks tokens with a `--liminis-editor-*` `:root`/`.dark`
-declaration in `styles.css` directly; every row below reads "No (inline
-fallback only)" because each token instead resolves through a fallback chain
-— `--liminis-editor-x` first, then its previous name (which still carries the
-real `:root`/`.dark` default), so a host supplying only the old name keeps
-theming unchanged. See "Migrating from the old names" below.
+default** marks tokens declared with a value in `styles.css` directly; every
+row below reads "Yes" for that reason directly, not via an alias.
 
 This table is generated from `src/` by `node scripts/generate-theming-docs.mjs`
 and checked for staleness in CI (`tests/theming-contract.test.ts`) — a `var(--x)`
 added to the source without regenerating this block fails the build. Do not
 hand-edit the rows between the markers below. See ADR-085 for how the
-generation and drift guard work, ADR-087 for the rename and its compatibility
-design, and ADR-092 for the separate guard that protects the full *defined*
-set — every token declared with a value in `styles.css`, per the checked-in
-baseline (`scripts/lib/theming-defined-tokens-baseline.json`), a different
-and non-overlapping set of names from this table's rows — against an
-unintentional rename or removal — run `pnpm docs:theming-baseline` after a
-deliberate one.
+generation and drift guard work, ADR-087 for the original rename and its
+compatibility design, ADR-092 for the separate guard that protects the full
+*defined* set — every token declared with a value in `styles.css`, per the
+checked-in baseline (`scripts/lib/theming-defined-tokens-baseline.json`) —
+against an unintentional rename or removal (run `pnpm docs:theming-baseline`
+after a deliberate one), and ADR-98 for the direction inversion this section
+describes, superseding ADR-93.
 
 <!-- theming-tokens:start -->
 | Custom property | Previous name | Controls | Kind | Has a default |
 | --- | --- | --- | --- | --- |
-| `--liminis-editor-background` | `--vscode-background` | Base background color of the editor surface and its popovers/menus. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-bold-color` | `--slashmd-bold-color` | Text color of bold (`**text**`) markdown spans. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-border` | `--vscode-border` | Default border color used throughout the editor chrome. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-button-background` | `--vscode-button-background` | Background of primary action buttons (e.g. the correction panel's "Apply" button). | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-button-foreground` | `--vscode-button-foreground` | Text color of primary action buttons. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-caution-bg` | `--slashmd-callout-caution-bg` | Background of "caution" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-caution-border` | `--slashmd-callout-caution-border` | Left border accent of "caution" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-important-bg` | `--slashmd-callout-important-bg` | Background of "important" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-important-border` | `--slashmd-callout-important-border` | Left border accent of "important" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-note-bg` | `--slashmd-callout-note-bg` | Background of "note" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-note-border` | `--slashmd-callout-note-border` | Left border accent of "note" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-tip-bg` | `--slashmd-callout-tip-bg` | Background of "tip" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-tip-border` | `--slashmd-callout-tip-border` | Left border accent of "tip" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-warning-bg` | `--slashmd-callout-warning-bg` | Background of "warning" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-callout-warning-border` | `--slashmd-callout-warning-border` | Left border accent of "warning" callout blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-checkbox-border` | `--checkbox-border` | Border color of unchecked task-list checkboxes. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-code-bg` | `--vscode-code-bg` | Background of inline code spans and fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-errorForeground` | `--vscode-errorForeground` | Text color for error and validation messages. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-external-link` | `--vscode-external-link` | Text color of links that point outside the document. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-focus-border` | `--vscode-focus-border` | Border color of the toolbar link-input field when focused. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-focusBorder` | `--vscode-focusBorder` | Color of the drag-and-drop position indicator while reordering blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-font-family` | `--vscode-font-family` | Base font family for the editor content. | Structural | No (inline fallback only) |
-| `--liminis-editor-font-size` | `--vscode-font-size` | Base font size for the editor content. | Structural | No (inline fallback only) |
-| `--liminis-editor-foreground` | `--vscode-foreground` | Default text color throughout the editor. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-foreground-muted` | `--vscode-foreground-muted` | Hover border color for the frontmatter tray's raw-view toggle. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h1-color` | `--slashmd-h1-color` | Text color of level-1 (`#`) headings. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h1-indent` | `--slashmd-h1-indent` | Left margin of level-1 (`#`) headings. | Structural | No (inline fallback only) |
-| `--liminis-editor-h2-color` | `--slashmd-h2-color` | Text color of level-2 (`##`) headings. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h2-indent` | `--slashmd-h2-indent` | Left margin of level-2 (`##`) headings. | Structural | No (inline fallback only) |
-| `--liminis-editor-h3-color` | `--slashmd-h3-color` | Text color of level-3 (`###`) headings. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h3-indent` | `--slashmd-h3-indent` | Left margin of level-3 (`###`) headings. | Structural | No (inline fallback only) |
-| `--liminis-editor-h4-color` | `--slashmd-h4-color` | Text color of level-4 (`####`) headings. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h4-indent` | `--slashmd-h4-indent` | Left margin of level-4 (`####`) headings. | Structural | No (inline fallback only) |
-| `--liminis-editor-h5-color` | `--slashmd-h5-color` | Text color of level-5 (`#####`) headings. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-h5-indent` | `--slashmd-h5-indent` | Left margin of level-5 (`#####`) headings. | Structural | No (inline fallback only) |
-| `--liminis-editor-input-bg` | `--vscode-input-bg` | Background of the toolbar link-input field. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-inputValidation-errorBackground` | `--vscode-inputValidation-errorBackground` | Background of inline validation-error messages. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-italic-color` | `--slashmd-italic-color` | Text color of italic (`*text*`) markdown spans. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-link` | `--vscode-link` | Text color of in-document links. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-menu-background` | `--vscode-menu-background` | Background of context menus (block, selection and correction menus). | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-menu-border` | `--vscode-menu-border` | Border color of context menus. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-menu-foreground` | `--vscode-menu-foreground` | Text color of context menu items. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-menu-selectionBackground` | `--vscode-menu-selectionBackground` | Background of a hovered/selected context menu item. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-menu-separatorBackground` | `--vscode-menu-separatorBackground` | Color of separator lines inside context menus. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-muted-100` | `--color-muted-100` | Background of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-muted-foreground` | `--color-muted-foreground` | Icon/text color of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-notificationsInfoIcon-foreground` | `--vscode-notificationsInfoIcon-foreground` | Color of informational icons in inline notifications. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-primary` | `--color-primary` | Icon/text color of the C4 diagram layout-toggle buttons when active. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-primary-100` | `--color-primary-100` | Background of the C4 diagram layout-toggle buttons when active. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-selection` | `--vscode-selection` | Background color of selected/highlighted text. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-comment` | `--slashmd-token-comment` | Syntax-highlight color for comments in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-function` | `--slashmd-token-function` | Syntax-highlight color for function names in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-keyword` | `--slashmd-token-keyword` | Syntax-highlight color for keywords in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-operator` | `--slashmd-token-operator` | Syntax-highlight color for operators in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-property` | `--slashmd-token-property` | Syntax-highlight color for object properties in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-punctuation` | `--slashmd-token-punctuation` | Syntax-highlight color for punctuation in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-selector` | `--slashmd-token-selector` | Syntax-highlight color for CSS selectors in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-token-variable` | `--slashmd-token-variable` | Syntax-highlight color for variables in fenced code blocks. | Cosmetic | No (inline fallback only) |
-| `--liminis-editor-toolbar-hoverBackground` | `--vscode-toolbar-hoverBackground` | Background of a toolbar button on hover. | Cosmetic | No (inline fallback only) |
+| `--liminis-editor-background` | `--vscode-background` | Base background color of the editor surface and its popovers/menus. | Cosmetic | Yes |
+| `--liminis-editor-bold-color` | `--slashmd-bold-color` | Text color of bold (`**text**`) markdown spans. | Cosmetic | Yes |
+| `--liminis-editor-border` | `--vscode-border` | Default border color used throughout the editor chrome. | Cosmetic | Yes |
+| `--liminis-editor-button-background` | `--vscode-button-background` | Background of primary action buttons (e.g. the correction panel's "Apply" button). | Cosmetic | Yes |
+| `--liminis-editor-button-foreground` | `--vscode-button-foreground` | Text color of primary action buttons. | Cosmetic | Yes |
+| `--liminis-editor-callout-caution-bg` | `--slashmd-callout-caution-bg` | Background of "caution" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-caution-border` | `--slashmd-callout-caution-border` | Left border accent of "caution" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-important-bg` | `--slashmd-callout-important-bg` | Background of "important" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-important-border` | `--slashmd-callout-important-border` | Left border accent of "important" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-note-bg` | `--slashmd-callout-note-bg` | Background of "note" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-note-border` | `--slashmd-callout-note-border` | Left border accent of "note" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-tip-bg` | `--slashmd-callout-tip-bg` | Background of "tip" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-tip-border` | `--slashmd-callout-tip-border` | Left border accent of "tip" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-warning-bg` | `--slashmd-callout-warning-bg` | Background of "warning" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-callout-warning-border` | `--slashmd-callout-warning-border` | Left border accent of "warning" callout blocks. | Cosmetic | Yes |
+| `--liminis-editor-checkbox-border` | `--checkbox-border` | Border color of unchecked task-list checkboxes. | Cosmetic | Yes |
+| `--liminis-editor-code-bg` | `--vscode-code-bg` | Background of inline code spans and fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-errorForeground` | `--vscode-errorForeground` | Text color for error and validation messages. | Cosmetic | Yes |
+| `--liminis-editor-external-link` | `--vscode-external-link` | Text color of links that point outside the document. | Cosmetic | Yes |
+| `--liminis-editor-focus-border` | `--vscode-focus-border` | Border color of the toolbar link-input field when focused. | Cosmetic | Yes |
+| `--liminis-editor-focusBorder` | `--vscode-focusBorder` | Color of the drag-and-drop position indicator while reordering blocks. | Cosmetic | Yes |
+| `--liminis-editor-font-family` | `--vscode-font-family` | Base font family for the editor content. | Structural | Yes |
+| `--liminis-editor-font-size` | `--vscode-font-size` | Base font size for the editor content. | Structural | Yes |
+| `--liminis-editor-foreground` | `--vscode-foreground` | Default text color throughout the editor. | Cosmetic | Yes |
+| `--liminis-editor-foreground-muted` | `--vscode-foreground-muted` | Hover border color for the frontmatter tray's raw-view toggle. | Cosmetic | Yes |
+| `--liminis-editor-h1-color` | `--slashmd-h1-color` | Text color of level-1 (`#`) headings. | Cosmetic | Yes |
+| `--liminis-editor-h1-indent` | `--slashmd-h1-indent` | Left margin of level-1 (`#`) headings. | Structural | Yes |
+| `--liminis-editor-h2-color` | `--slashmd-h2-color` | Text color of level-2 (`##`) headings. | Cosmetic | Yes |
+| `--liminis-editor-h2-indent` | `--slashmd-h2-indent` | Left margin of level-2 (`##`) headings. | Structural | Yes |
+| `--liminis-editor-h3-color` | `--slashmd-h3-color` | Text color of level-3 (`###`) headings. | Cosmetic | Yes |
+| `--liminis-editor-h3-indent` | `--slashmd-h3-indent` | Left margin of level-3 (`###`) headings. | Structural | Yes |
+| `--liminis-editor-h4-color` | `--slashmd-h4-color` | Text color of level-4 (`####`) headings. | Cosmetic | Yes |
+| `--liminis-editor-h4-indent` | `--slashmd-h4-indent` | Left margin of level-4 (`####`) headings. | Structural | Yes |
+| `--liminis-editor-h5-color` | `--slashmd-h5-color` | Text color of level-5 (`#####`) headings. | Cosmetic | Yes |
+| `--liminis-editor-h5-indent` | `--slashmd-h5-indent` | Left margin of level-5 (`#####`) headings. | Structural | Yes |
+| `--liminis-editor-input-bg` | `--vscode-input-bg` | Background of the toolbar link-input field. | Cosmetic | Yes |
+| `--liminis-editor-inputValidation-errorBackground` | `--vscode-inputValidation-errorBackground` | Background of inline validation-error messages. | Cosmetic | Yes |
+| `--liminis-editor-italic-color` | `--slashmd-italic-color` | Text color of italic (`*text*`) markdown spans. | Cosmetic | Yes |
+| `--liminis-editor-link` | `--vscode-link` | Text color of in-document links. | Cosmetic | Yes |
+| `--liminis-editor-menu-background` | `--vscode-menu-background` | Background of context menus (block, selection and correction menus). | Cosmetic | Yes |
+| `--liminis-editor-menu-border` | `--vscode-menu-border` | Border color of context menus. | Cosmetic | Yes |
+| `--liminis-editor-menu-foreground` | `--vscode-menu-foreground` | Text color of context menu items. | Cosmetic | Yes |
+| `--liminis-editor-menu-selectionBackground` | `--vscode-menu-selectionBackground` | Background of a hovered/selected context menu item. | Cosmetic | Yes |
+| `--liminis-editor-menu-separatorBackground` | `--vscode-menu-separatorBackground` | Color of separator lines inside context menus. | Cosmetic | Yes |
+| `--liminis-editor-muted-100` | — | Background of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
+| `--liminis-editor-muted-foreground` | — | Icon/text color of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
+| `--liminis-editor-notificationsInfoIcon-foreground` | `--vscode-notificationsInfoIcon-foreground` | Color of informational icons in inline notifications. | Cosmetic | Yes |
+| `--liminis-editor-primary` | `--editor-brand` | Icon/text color of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
+| `--liminis-editor-primary-100` | — | Background of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
+| `--liminis-editor-selection` | `--vscode-selection` | Background color of selected/highlighted text. | Cosmetic | Yes |
+| `--liminis-editor-token-comment` | `--slashmd-token-comment` | Syntax-highlight color for comments in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-function` | `--slashmd-token-function` | Syntax-highlight color for function names in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-keyword` | `--slashmd-token-keyword` | Syntax-highlight color for keywords in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-operator` | `--slashmd-token-operator` | Syntax-highlight color for operators in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-property` | `--slashmd-token-property` | Syntax-highlight color for object properties in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-punctuation` | `--slashmd-token-punctuation` | Syntax-highlight color for punctuation in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-selector` | `--slashmd-token-selector` | Syntax-highlight color for CSS selectors in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-token-variable` | `--slashmd-token-variable` | Syntax-highlight color for variables in fenced code blocks. | Cosmetic | Yes |
+| `--liminis-editor-toolbar-hoverBackground` | `--vscode-toolbar-hoverBackground` | Background of a toolbar button on hover. | Cosmetic | Yes |
 <!-- theming-tokens:end -->
 
 **A worked example.** To match a host's own palette, override a subset of
@@ -336,17 +363,45 @@ highest-value place to start.
 #### Migrating from the old names
 
 Before `0.2.0`, these tokens were split across four inconsistent prefixes:
-`--vscode-*`, `--slashmd-*`, `--color-*` and `--checkbox-*`. `0.2.0` renames
-all 59 of them to `--liminis-editor-*`, but **a host that still only supplies
-the old names keeps working unchanged** — every renamed token resolves
-`--liminis-editor-x` first, then falls back to its specific previous name,
-so nothing breaks silently on upgrade. The old prefixes are deprecated as of
-`0.2.0` and will be removed in a future major release; migrate at your own
-pace using the table above's **Previous name** column, which lists each
-renamed property's exact old name — the mapping isn't always a mechanical
-prefix swap (`--checkbox-border` became `--liminis-editor-checkbox-border`,
-not `--liminis-editor-border`, to avoid colliding with `--vscode-border`'s
-new name), so look it up rather than deriving it.
+`--vscode-*`, `--slashmd-*`, `--color-*` and `--checkbox-*`. `0.2.0` renamed
+all of them to `--liminis-editor-*`. **As of `0.4.0` (ADR-98), a host that
+still only *sets* an old name to theme the editor no longer works** — this is
+a breaking change from `0.2.0`'s original guarantee, corrected here rather
+than left silently wrong. `--old-name-x: var(--liminis-editor-x);` is a
+one-line `:root`-scoped shim that this package never itself reads; a host's
+own override of the old name still changes what the old name computes to,
+but since every internal consumption site reads `--liminis-editor-x`
+directly, that override never reaches the editor. Set the corresponding
+`--liminis-editor-*` name instead — see the table above's **Previous name**
+column to find it. This was verified with `getComputedStyle` in a running
+Electron shell, not assumed (`examples/electron/e2e/theming-aliases.spec.ts`),
+and neither known consumer of this package (`liminis-app`, Zusammen) sets a
+legacy name today. `--slashmd-*` is the one prefix with no shim at all: it is
+deleted outright in `0.4.0`, verified unread by any known consumer (ADR-98).
+
+The old prefixes are deprecated and will be removed in a future major
+release; migrate at your own pace using the table above's **Previous name**
+column, which lists each renamed property's exact old name — the mapping
+isn't always a mechanical prefix swap (`--checkbox-border` became
+`--liminis-editor-checkbox-border`, not `--liminis-editor-border`, to avoid
+colliding with `--vscode-border`'s new name), so look it up rather than
+deriving it.
+
+Reading, not just overriding, is also migratable, and is the direction
+`0.4.0` actually improves: before ADR-98, a host reading a legacy name
+directly (e.g. mapping its own design tokens onto `--vscode-foreground`)
+could switch that read to `--liminis-editor-foreground` only as long as
+nothing (host or package) set the new name — some `--liminis-editor-*`
+aliases forwarded to a token this package never defined at all
+(`--liminis-editor-primary`, notably, forwarded to liminis-app's
+`--color-primary` and baked a literal, `#3b82f6`, whenever liminis-app
+hadn't set it), so switching a read to those names would return a value
+this package didn't actually own. As of `0.4.0`, every `--liminis-editor-*`
+name carries its own real, package-owned default — read migration is now a
+like-for-like swap with no caveat, for every name except
+`--liminis-editor-primary`/`-100`, whose default value deliberately changed
+(see verveguy/zusammen#134, the migration this addresses, and ADR-98 for why
+the old value was a defect, not a default worth preserving).
 
 ## Annotations
 

package/dist/app/editor/CorrectionPanelPlugin.js

@@ -29,10 +29,10 @@ const panelStyle = () => {
         padding: '12px',
         minWidth: '280px',
         maxWidth: '360px',
-        background: `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${dark ? '#252526' : '#ffffff'}))`,
-        border: `1px solid var(--liminis-editor-menu-border, var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'}))`,
+        background: `var(--liminis-editor-menu-background)`,
+        border: `1px solid var(--liminis-editor-menu-border)`,
         boxShadow: dark ? '0 4px 16px rgba(0,0,0,0.4)' : '0 4px 16px rgba(0,0,0,0.15)',
-        color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
+        color: `var(--liminis-editor-menu-foreground)`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '13px',
     };
@@ -260,8 +260,8 @@ export function CorrectionPanelPlugin() {
     if (!isOpen)
         return null;
     const dark = isDark();
-    const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'}))`;
-    const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${dark ? '#094771' : '#e8e8e8'}))`;
+    const borderColor = `var(--liminis-editor-menu-border)`;
+    const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
     const mutedColor = dark ? '#888888' : '#999999';
     const inputBg = dark ? '#1e1e1e' : '#f5f5f5';
     const warningBg = dark ? '#4a3500' : '#fff8e1';
@@ -273,12 +273,12 @@ export function CorrectionPanelPlugin() {
         cursor: 'pointer',
         border: `1px solid ${borderColor}`,
         background: 'transparent',
-        color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
+        color: `var(--liminis-editor-menu-foreground)`,
     };
     const btnPrimary = {
         ...btnBase,
-        background: `var(--liminis-editor-button-background, var(--vscode-button-background, ${dark ? '#0e639c' : '#007acc'}))`,
-        color: `var(--liminis-editor-button-foreground, var(--vscode-button-foreground, #ffffff))`,
+        background: `var(--liminis-editor-button-background)`,
+        color: `var(--liminis-editor-button-foreground)`,
         border: 'none',
         opacity: isSubmitting ? 0.6 : 1,
     };
@@ -297,7 +297,7 @@ export function CorrectionPanelPlugin() {
                             borderRadius: '4px',
                             border: `1px solid ${borderColor}`,
                             background: inputBg,
-                            color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
+                            color: `var(--liminis-editor-menu-foreground)`,
                             fontSize: '13px',
                             boxSizing: 'border-box',
                         }, onKeyDown: (e) => {
@@ -313,7 +313,6 @@ export function CorrectionPanelPlugin() {
                 }, children: "This term is already a canonical name for other aliases. Proceeding will re-canonicalize it." })), _jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [_jsx("button", { style: btnBase, onClick: close, children: "Cancel" }), confirmPhase === 'needs-canonical-warning' ? (_jsx("button", { style: btnPrimary, onClick: handleConfirm, disabled: isSubmitting || !canonicalInput.trim(), children: "Proceed anyway" })) : (_jsx("button", { style: btnPrimary, onClick: handleConfirm, disabled: isSubmitting || !canonicalInput.trim(), children: isSubmitting ? 'Saving…' : 'Confirm' }))] })] }));
 }
 function SuggestionItem({ name, hoverBg, onClick, }) {
-    const dark = isDark();
     return (_jsx("button", { onClick: onClick, style: {
             display: 'block',
             width: '100%',
@@ -324,7 +323,7 @@ function SuggestionItem({ name, hoverBg, onClick, }) {
             cursor: 'pointer',
             fontSize: '13px',
             borderRadius: '3px',
-            color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
+            color: `var(--liminis-editor-menu-foreground)`,
         }, onMouseEnter: (e) => {
             e.currentTarget.style.background = hoverBg;
         }, onMouseLeave: (e) => {

package/dist/app/editor/DragHandlePlugin.js

@@ -293,7 +293,7 @@ export function DragHandlePlugin() {
                     left: 0,
                     right: 0,
                     height: 2,
-                    background: 'var(--liminis-editor-focusBorder, var(--vscode-focusBorder, #007acc))',
+                    background: 'var(--liminis-editor-focusBorder)',
                     pointerEvents: 'none',
                     zIndex: 100,
                 } }))] }));

package/dist/app/editor/Editor.js

@@ -240,6 +240,20 @@ function CursorRestorePlugin({ contentVersion, cursorToRestoreRef, }) {
         const cursorToRestore = cursorToRestoreRef.current;
         if (!cursorToRestore)
             return;
+        // Only restore the caret if the user was actually in the editor when the
+        // reload arrived. A content reload is not always the user's doing: an
+        // agent writing the open file reaches here too, and re-focusing then pulls
+        // the caret out of whatever the user is typing in — a chat prompt beside
+        // the editor, say — mid-sentence. Restoring a caret nobody is looking at
+        // buys nothing, so an unfocused editor is left entirely alone (no
+        // selection write either, so reconciliation cannot move focus as a side
+        // effect). Same rule as `AutoFocusPlugin`: never take focus unasked.
+        // Read synchronously, before the update below can perturb focus.
+        const rootElement = editor.getRootElement();
+        const hadFocus = rootElement !== null &&
+            (rootElement === document.activeElement || rootElement.contains(document.activeElement));
+        if (!hadFocus)
+            return;
         console.log('[CursorRestorePlugin] Restoring cursor', {
             contentVersion,
             offset: cursorToRestore.offset,
@@ -262,11 +276,9 @@ function CursorRestorePlugin({ contentVersion, cursorToRestoreRef, }) {
                     console.log('[CursorRestorePlugin] Selection restored at offset', newOffset);
                 }
             });
-            // Re-focus the editor
-            const rootElement = editor.getRootElement();
-            if (rootElement) {
-                rootElement.focus({ preventScroll: true });
-            }
+            // Re-focus the editor. Reached only when it already had focus above, so
+            // this restores focus the reload disturbed rather than taking it.
+            rootElement.focus({ preventScroll: true });
         });
     }, [editor, contentVersion, cursorToRestoreRef]);
     return null;

package/dist/app/editor/SelectionContextMenuPlugin.js

@@ -36,10 +36,10 @@ const itemStyle = {
 function SelectionContextMenu({ visible, x, y, selectedText, onChatAboutThis, annotationAffordances, onCreateAnnotation, onClose, }) {
     const menuRef = useRef(null);
     const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-    const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
-    const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
-    const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
-    const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
+    const bgColor = `var(--liminis-editor-menu-background)`;
+    const borderColor = `var(--liminis-editor-menu-border)`;
+    const textColor = `var(--liminis-editor-menu-foreground)`;
+    const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
     useEffect(() => {
         if (!visible)
             return;

package/dist/app/editor/nodes/C4Component.js

@@ -11,10 +11,8 @@ import { mergeRegister } from '@lexical/utils';
 import { $getNodeByKey, $getSelection, $isNodeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { Move, RotateCcw } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { parseC4, validateC4 } from '../c4/parser.js';
-import { layoutC4Diagram } from '../c4/layout.js';
-import { C4Renderer, C4ErrorDisplay } from '../c4/renderer.js';
-import { C4InteractiveRenderer } from '../c4/C4InteractiveRenderer.js';
+import { parseC4, validateC4, layoutC4Diagram } from '@liminis/diagrams/core';
+import { C4Renderer, C4ErrorDisplay, C4InteractiveRenderer } from '@liminis/diagrams/react';
 import { $isC4Node } from './C4Node.js';
 import { DiagramContextMenu, useDiagramContextMenu } from './DiagramContextMenu.js';
 function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
@@ -181,11 +179,11 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
                             border: 'none',
                             cursor: 'pointer',
                             backgroundColor: isEditingLayout
-                                ? 'var(--liminis-editor-primary-100, var(--color-primary-100, rgba(59, 130, 246, 0.1)))'
-                                : 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
+                                ? 'var(--liminis-editor-primary-100)'
+                                : 'var(--liminis-editor-muted-100)',
                             color: isEditingLayout
-                                ? 'var(--liminis-editor-primary, var(--color-primary, #3b82f6))'
-                                : 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
+                                ? 'var(--liminis-editor-primary)'
+                                : 'var(--liminis-editor-muted-foreground)',
                         }, children: _jsx(Move, { size: 16 }) }), manualLayout && (_jsx("button", { type: "button", onClick: (e) => {
                             e.stopPropagation();
                             handleResetLayout();
@@ -198,8 +196,8 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
                             borderRadius: '4px',
                             border: 'none',
                             cursor: 'pointer',
-                            backgroundColor: 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
-                            color: 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
+                            backgroundColor: 'var(--liminis-editor-muted-100)',
+                            color: 'var(--liminis-editor-muted-foreground)',
                         }, children: _jsx(RotateCcw, { size: 16 }) }))] })), isEditingLayout && parseResult.diagram ? (_jsx(C4InteractiveRenderer, { diagram: parseResult.diagram, isDarkMode: isDarkMode, isEditMode: isEditingLayout, manualPositions: manualPositions, onPositionChange: handlePositionChange })) : (_jsx(C4Renderer, { layout: layout, isDarkMode: isDarkMode })), _jsx(DiagramContextMenu, { ...contextMenu.props, onEditText: isEditable ? onDoubleClick : undefined, onEditLayout: isEditable ? () => setIsEditingLayout(prev => !prev) : undefined, onResetLayout: isEditable ? handleResetLayout : undefined, isEditingLayout: isEditingLayout, hasManualLayout: !!manualLayout })] }));
 }
 // =============================================================================

package/dist/app/editor/nodes/C4Node.d.ts

@@ -3,7 +3,7 @@
  * Uses DecoratorNode pattern similar to MermaidNode
  */
 import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
-import type { ManualLayout } from '../c4/types.js';
+import type { ManualLayout } from '@liminis/diagrams/core';
 export type SerializedC4Node = Spread<{
     code: string;
     manualLayout?: ManualLayout;

package/dist/app/editor/nodes/DiagramContextMenu.js

@@ -75,11 +75,11 @@ const separatorStyle = {
 export function DiagramContextMenu({ visible, x, y, onCopyImage, onClose, onEditText, onEditLayout, onResetLayout, isEditingLayout, hasManualLayout, }) {
     const menuRef = useRef(null);
     const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-    const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
-    const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
-    const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
-    const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
-    const separatorColor = `var(--liminis-editor-menu-separatorBackground, var(--vscode-menu-separatorBackground, ${isDark ? '#454545' : '#d4d4d4'}))`;
+    const bgColor = `var(--liminis-editor-menu-background)`;
+    const borderColor = `var(--liminis-editor-menu-border)`;
+    const textColor = `var(--liminis-editor-menu-foreground)`;
+    const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
+    const separatorColor = `var(--liminis-editor-menu-separatorBackground)`;
     // Close on click outside or Escape
     useEffect(() => {
         if (!visible)

package/dist/headless.d.ts

@@ -29,11 +29,9 @@
  * graph yourself. The fix for a violation is always to prune that graph, never to
  * widen main's `lib`.
  */
-export { renderC4DiagramToSVG } from './app/editor/c4/render-to-string.js';
-export { parseC4, validateC4 } from './app/editor/c4/parser.js';
-export { layoutC4Diagram } from './app/editor/c4/layout.js';
-export { isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from './app/editor/c4/types.js';
-export type { C4ElementType, C4Shape, C4Direction, C4Style, C4Properties, C4Element, C4Relationship, C4Diagram, Point, LayoutNode, LayoutEdge, LayoutResult, LayoutOptions, ParseError, ParseResult, ManualLayout, } from './app/editor/c4/types.js';
+export { renderC4DiagramToSVG } from '@liminis/diagrams/server';
+export { parseC4, validateC4, layoutC4Diagram, isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from '@liminis/diagrams/core';
+export type { C4ElementType, C4Shape, C4Direction, C4Style, C4Properties, C4Element, C4Relationship, C4Diagram, Point, LayoutNode, LayoutEdge, LayoutResult, LayoutOptions, ParseError, ParseResult, ManualLayout, } from '@liminis/diagrams/core';
 export { createLiteAdaptorDocument, TEX_PACKAGES } from './mathjax-config.js';
 export type { TeXPackage, MathDocument, LiteMathJaxInstance } from './mathjax-config.js';
 export { getFileType } from './utils/file-types.js';

package/dist/headless.js

@@ -30,10 +30,8 @@
  * widen main's `lib`.
  */
 // C4 diagram subsystem — parse, layout, and server-side SVG rendering
-export { renderC4DiagramToSVG } from './app/editor/c4/render-to-string.js';
-export { parseC4, validateC4 } from './app/editor/c4/parser.js';
-export { layoutC4Diagram } from './app/editor/c4/layout.js';
-export { isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from './app/editor/c4/types.js';
+export { renderC4DiagramToSVG } from '@liminis/diagrams/server';
+export { parseC4, validateC4, layoutC4Diagram, isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from '@liminis/diagrams/core';
 // MathJax lite-adaptor factory (equation rendering, server-side export).
 //
 // `createBrowserAdaptorDocument` / `BrowserMathJaxInstance` are deliberately NOT

package/dist/index.d.ts

@@ -37,4 +37,4 @@ export * from './types.js';
 export { useEditorStore } from './stores/editorStore.js';
 export { findSvgElement } from './app/editor/nodes/diagram-utils.js';
 export * from './headless.js';
-export type { ParseResult as C4ParseResult, ParseError as C4ParseError, } from './app/editor/c4/types.js';
+export type { ParseResult as C4ParseResult, ParseError as C4ParseError, } from '@liminis/diagrams/core';