@liminis/editor 0.3.0 → 0.4.1

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

@@ -8,7 +8,8 @@ It is the editor from [Liminis](https://github.com/verveguy/liminis), extracted
 into this repository so it can stand on its own. MIT-licensed.
 
 Its history, and how to read the `ADR-0NNN`, `FR-NNN` and `#NNN` references that
-travelled with the code, are recorded in [`docs/provenance.md`](./docs/provenance.md).
+travelled with the code, are recorded in [`docs/provenance.md`](./docs/provenance.md)
+([on the docs site](https://v3rv.com/liminis-editor/guide/provenance/)).
 
 ## What you get
 
@@ -206,26 +207,48 @@ 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` is part of this package's public API, readable directly by a
-host, not only overridable. That now includes every `--liminis-editor-*` name
-itself (see "Has a default" below) as well as the pre-`0.2.0` names that still
-carry the real defaults (`--vscode-*`, `--slashmd-*`, `--checkbox-*`, and a
-couple of standalone legacy names) — each `--liminis-editor-*` declaration is
-an alias of its previous name (`--liminis-editor-x: var(--previous-name-x);`),
-so both names resolve to the same value and either can be read directly
-(ADR-93). (Legacy names like `--color-*` that appear only as an inner link in
-a fallback chain, with no `:root`/`.dark` declaration of their own, are not
-part of the defined set this paragraph describes — only the property that
-*carries* the value is.) Some hosts read these definitions directly — mapping
-their own design tokens onto them 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 unintentionally (ADR-092).
+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
 name to look for if you're migrating a host that still overrides the old
@@ -234,28 +257,19 @@ 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 declared with a value in `styles.css` directly; every
-row below now reads "Yes" — each `--liminis-editor-*` name carries its own
-`:root`/`.dark` declaration, an alias that reads its previous name via `var()`
-(ADR-93), so a host reading `--liminis-editor-x` gets a real value with no
-configuration, and a host overriding only the previous name at
-`:root`/`document.documentElement` still wins, because the alias re-resolves
-through that name's own `.dark`/`@media print` overrides at the point of use
-(ADR-93 documents a scope limitation for an override applied to a descendant
-element instead). See "Migrating from the old names" below.
+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, 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-93 for the `--liminis-editor-*` alias declarations
-that make the defined set (baseline) a superset of this table's rows —
-every consumed `--liminis-editor-*` name is now also a defined one — rather
-than the disjoint sets they were before.
+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 |
@@ -304,11 +318,11 @@ than the disjoint sets they were before.
 | `--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` | `--color-muted-100` | Background of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
-| `--liminis-editor-muted-foreground` | `--color-muted-foreground` | Icon/text color of the C4 diagram layout-toggle buttons when inactive. | 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` | `--color-primary` | Icon/text color of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
-| `--liminis-editor-primary-100` | `--color-primary-100` | Background of the C4 diagram layout-toggle buttons when active. | 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 |
@@ -350,36 +364,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.
-
-Reading, not just overriding, is also migratable: a host that currently reads
-a legacy name directly (e.g. mapping its own design tokens onto
-`--vscode-foreground`) can switch that read to the corresponding
-`--liminis-editor-*` name and get an identical value, **as long as it isn't
-also setting the `--liminis-editor-*` name itself** — a directly-set
-`--liminis-editor-*` value always wins over the previous name's own value,
-by ordinary cascade precedence (see "Has a default" below), so the two reads
-are identical only while the host relies solely on the previous name. Until
-ADR-93, `--liminis-editor-*` names were only ever *consumed*, never
-themselves declared with a value — there was nothing for such a host to
-migrate its reads to. Every `--liminis-editor-*` name now carries its own
-`:root`/`.dark` alias declaration that resolves to the previous name's own
-value in that legacy-only case, so the read migration is a like-for-like
-swap with no observable difference (see verveguy/zusammen#129, the migration
-this addresses). This guarantee holds for a previous-name override applied
-at `:root`/`document.documentElement`, the standard integration point; see
-ADR-93 for a documented limitation when a host scopes its override to a
-descendant element instead.
+`--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
 
@@ -468,12 +491,35 @@ over the same round-trip fixture corpus the package's own test suite uses, so
 every fixture-representable node class renders somewhere in it. See
 [`examples/demo/README.md`](./examples/demo/README.md).
 
-`examples/demo` is also the source of the public GitHub Pages site: a
+`examples/demo` is also the demo on the public GitHub Pages site, at
+**[v3rv.com/liminis-editor/demo/](https://v3rv.com/liminis-editor/demo/)** — a
 `release`-triggered (not merge-triggered) build of this same shell, showing a
-visible version badge for the published release it represents and a
-Documentation tab rendering this README. Between releases the deployed site
-stays on the last published version even as `main` keeps moving — that
-staleness is intentional, not a bug (see `docs/decisions/adr-082.md`).
+visible version badge for the published release it represents. Between releases
+the deployed site stays on the last published version even as `main` keeps
+moving — that staleness is intentional, not a bug (see
+`docs/decisions/adr-082.md`).
+
+## Documentation site
+
+**[v3rv.com/liminis-editor](https://v3rv.com/liminis-editor/)** publishes the
+pages in [`docs/`](./docs/) with search, cross-links, and the C4 diagrams
+rendered live rather than as pictures.
+
+`docs/*.md` remains the source of truth and is not moved or modified for the
+site: it ships inside the published tarball, `tests/adr-citations.test.ts` walks
+it, and it is cited by path from ADRs, the CHANGELOG and source comments.
+`site/scripts/sync-docs.mjs` generates the site's copy from it, taking each
+page's title from its H1.
+
+```bash
+pnpm --dir site demo    # build the demo and stage it at /demo/ (once)
+pnpm --dir site dev     # serve the docs at http://localhost:4321/liminis-editor/
+pnpm --dir site diagrams # re-render the committed SVGs after editing a ```c4 fence
+```
+
+`site/` is its own package, deliberately not a workspace member — the same
+reasoning as `examples/`. An Astro toolchain has no business in the dev install
+CI runs for lint, typecheck and test.
 
 ## Electron e2e shell
 
@@ -488,7 +534,8 @@ application, to exist. See
 ```bash
 pnpm build:examples   # builds and packs the package once, then builds both
                        # examples/demo and examples/electron against it
-pnpm build:site       # builds examples/demo only — what the release-triggered
+pnpm build:site       # builds examples/demo only — wrapped by the site's
+                       # `pnpm --dir site demo`, which the release-triggered
                        # Pages deploy runs (see the Demo section above)
 ```
 

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/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';