@liminis/editor 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/LICENSE +0 -13
  2. package/README.md +90 -68
  3. package/dist/app/editor/CorrectionPanelPlugin.js +10 -11
  4. package/dist/app/editor/DragHandlePlugin.js +1 -1
  5. package/dist/app/editor/SelectionContextMenuPlugin.js +4 -4
  6. package/dist/app/editor/nodes/C4Component.js +8 -10
  7. package/dist/app/editor/nodes/C4Node.d.ts +1 -1
  8. package/dist/app/editor/nodes/DiagramContextMenu.js +5 -5
  9. package/dist/headless.d.ts +3 -5
  10. package/dist/headless.js +2 -4
  11. package/dist/index.d.ts +1 -1
  12. package/dist/styles.css +425 -454
  13. package/docs/decisions/adr-93-liminis-editor-defined-aliases.md +28 -1
  14. package/docs/decisions/adr-98-invert-token-direction.md +309 -0
  15. package/package.json +2 -2
  16. package/dist/app/editor/c4/C4InteractiveRenderer.d.ts +0 -35
  17. package/dist/app/editor/c4/C4InteractiveRenderer.js +0 -299
  18. package/dist/app/editor/c4/edge-clipping.d.ts +0 -24
  19. package/dist/app/editor/c4/edge-clipping.js +0 -139
  20. package/dist/app/editor/c4/hooks/useC4DiagramDrag.d.ts +0 -38
  21. package/dist/app/editor/c4/hooks/useC4DiagramDrag.js +0 -112
  22. package/dist/app/editor/c4/layout.d.ts +0 -25
  23. package/dist/app/editor/c4/layout.js +0 -839
  24. package/dist/app/editor/c4/parser.d.ts +0 -19
  25. package/dist/app/editor/c4/parser.js +0 -410
  26. package/dist/app/editor/c4/render-to-string.d.ts +0 -24
  27. package/dist/app/editor/c4/render-to-string.js +0 -34
  28. package/dist/app/editor/c4/renderer.d.ts +0 -64
  29. package/dist/app/editor/c4/renderer.js +0 -569
  30. package/dist/app/editor/c4/types.d.ts +0 -203
  31. package/dist/app/editor/c4/types.js +0 -43
package/LICENSE CHANGED
@@ -19,16 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
21
  SOFTWARE.
22
-
23
- ---
24
-
25
- This package vendors a modified copy of `mdast-util-wiki-link` (MIT,
26
- Copyright (c) 2020 Mark Hudnall). Its license and a description of the
27
- modifications ship alongside it, at
28
- `dist/markdown/vendor/mdast-util-wiki-link/`.
29
-
30
- This package derives from the `webview-ui` package of SlashMD
31
- (https://github.com/wolfdavo/SlashMD) by David Wolfenden, which that project's
32
- README declares to be MIT-licensed. SlashMD carries no LICENSE file and no
33
- copyright notice, so none is reproduced here; this notice records the
34
- derivation and the stated license in their absence.
package/README.md CHANGED
@@ -206,26 +206,48 @@ Neither is a package defect, but only one of them tells you what is wrong.
206
206
 
207
207
  The editor's colors, borders and a few layout metrics are all CSS custom
208
208
  properties under a single package-owned vocabulary, `--liminis-editor-*`.
209
- Every one of them resolves with no host configuration at all the table
209
+ Every one of them resolves with no host configuration at all, and every one
210
+ of them *carries its own real value* declared at `:root`/`.dark` in
211
+ `styles.css` — there is no indirection to look through (ADR-98). The table
210
212
  below exists so you can *override* a palette, and also so you can *consume*
211
213
  one: every property this package declares with a value anywhere in
212
214
  `styles.css` is part of this package's public API, readable directly by a
213
- host, not only overridable. That now includes every `--liminis-editor-*` name
214
- itself (see "Has a default" below) as well as the pre-`0.2.0` names that still
215
- carry the real defaults (`--vscode-*`, `--slashmd-*`, `--checkbox-*`, and a
216
- couple of standalone legacy names) each `--liminis-editor-*` declaration is
217
- an alias of its previous name (`--liminis-editor-x: var(--previous-name-x);`),
218
- so both names resolve to the same value and either can be read directly
219
- (ADR-93). (Legacy names like `--color-*` that appear only as an inner link in
220
- a fallback chain, with no `:root`/`.dark` declaration of their own, are not
221
- part of the defined set this paragraph describes only the property that
222
- *carries* the value is.) Some hosts read these definitions directly — mapping
223
- their own design tokens onto them with `var(--x)` rather than overriding
224
- them. Renaming or removing a definition is therefore a breaking change, the
225
- same as any other change to a supported API surface described under
226
- "Versioning policy" above, and is distinct from renaming a *consumption* site
227
- (covered separately in "Migrating from the old names" below) this package's
228
- CI guards against a definition disappearing unintentionally (ADR-092).
215
+ host, not only overridable.
216
+
217
+ Before `0.4.0`, a small set of pre-`0.2.0` names (`--vscode-*`,
218
+ `--checkbox-border`, `--editor-brand`) carried the real defaults, and every
219
+ `--liminis-editor-*` name was itself only a forward to one of them. That
220
+ direction is now reversed: those legacy names are deprecated shims
221
+ `<legacy-name>: var(--liminis-editor-x);` read by nothing inside this
222
+ package, kept only so that **reading** one of them (e.g. mapping a host's own
223
+ design tokens onto `--vscode-foreground`) still returns a real value, via
224
+ ordinary CSS cascade resolution of the shim's own `var()` reference.
225
+ **Setting** only a legacy name no longer themes the editor: every internal
226
+ consumption site reads `--liminis-editor-foreground` directly, never
227
+ `--vscode-foreground`, so a host's override of the legacy name changes what
228
+ that legacy property itself computes to and nothing else it never reaches
229
+ the editor. This was verified with `getComputedStyle` in a running Electron
230
+ shell (`examples/electron/e2e/theming-aliases.spec.ts`), not assumed from
231
+ cascade theory alone — see "Migrating from the old names" below for what to
232
+ do about it. The pre-`0.2.0` `--slashmd-*` names have no shim at all — they
233
+ are deleted outright, verified unread by any known consumer (ADR-98).
234
+
235
+ `--liminis-editor-primary`/`-100` and `--liminis-editor-muted-foreground`/`-100`
236
+ back the C4 diagram's layout-toggle buttons. Until `0.4.0`, `C4Component.tsx`
237
+ checked liminis-app's own `--color-primary`/`--color-muted-foreground`
238
+ Tailwind tokens *first*, falling back to this package's own default — a
239
+ deliberate, documented exception (ADR-98) to the rule above. That exception
240
+ has been removed: these six expressions now read `--liminis-editor-*` only, the
241
+ same as every other consumption site in this package, and a host's
242
+ `--color-*` tokens no longer have any effect on them (see ADR-98's
243
+ amendment). A host that wants to override the C4 diagram colors sets
244
+ `--liminis-editor-primary` and its siblings, the same as for any other
245
+ token.
246
+
247
+ Renaming or removing a definition is a breaking change, the same as any
248
+ other change to a supported API surface described under "Versioning policy"
249
+ above — this package's CI guards against a definition disappearing
250
+ unintentionally (ADR-092).
229
251
 
230
252
  **Previous name** is the pre-`0.2.0` name this property replaced — the exact
231
253
  name to look for if you're migrating a host that still overrides the old
@@ -234,28 +256,19 @@ short description of what the token actually affects. **Kind** distinguishes
234
256
  tokens that only affect appearance (`Cosmetic`) from the handful that also
235
257
  affect layout (`Structural` — heading indents and the base font). **Has a
236
258
  default** marks tokens declared with a value in `styles.css` directly; every
237
- row below now reads "Yes" each `--liminis-editor-*` name carries its own
238
- `:root`/`.dark` declaration, an alias that reads its previous name via `var()`
239
- (ADR-93), so a host reading `--liminis-editor-x` gets a real value with no
240
- configuration, and a host overriding only the previous name at
241
- `:root`/`document.documentElement` still wins, because the alias re-resolves
242
- through that name's own `.dark`/`@media print` overrides at the point of use
243
- (ADR-93 documents a scope limitation for an override applied to a descendant
244
- element instead). See "Migrating from the old names" below.
259
+ row below reads "Yes" for that reason directly, not via an alias.
245
260
 
246
261
  This table is generated from `src/` by `node scripts/generate-theming-docs.mjs`
247
262
  and checked for staleness in CI (`tests/theming-contract.test.ts`) — a `var(--x)`
248
263
  added to the source without regenerating this block fails the build. Do not
249
264
  hand-edit the rows between the markers below. See ADR-085 for how the
250
- generation and drift guard work, ADR-087 for the rename and its compatibility
251
- design, ADR-092 for the separate guard that protects the full *defined* set —
252
- every token declared with a value in `styles.css`, per the checked-in baseline
253
- (`scripts/lib/theming-defined-tokens-baseline.json`) — against an
254
- unintentional rename or removal (run `pnpm docs:theming-baseline` after a
255
- deliberate one), and ADR-93 for the `--liminis-editor-*` alias declarations
256
- that make the defined set (baseline) a superset of this table's rows —
257
- every consumed `--liminis-editor-*` name is now also a defined one — rather
258
- than the disjoint sets they were before.
265
+ generation and drift guard work, ADR-087 for the original rename and its
266
+ compatibility design, ADR-092 for the separate guard that protects the full
267
+ *defined* set — every token declared with a value in `styles.css`, per the
268
+ checked-in baseline (`scripts/lib/theming-defined-tokens-baseline.json`) —
269
+ against an unintentional rename or removal (run `pnpm docs:theming-baseline`
270
+ after a deliberate one), and ADR-98 for the direction inversion this section
271
+ describes, superseding ADR-93.
259
272
 
260
273
  <!-- theming-tokens:start -->
261
274
  | Custom property | Previous name | Controls | Kind | Has a default |
@@ -304,11 +317,11 @@ than the disjoint sets they were before.
304
317
  | `--liminis-editor-menu-foreground` | `--vscode-menu-foreground` | Text color of context menu items. | Cosmetic | Yes |
305
318
  | `--liminis-editor-menu-selectionBackground` | `--vscode-menu-selectionBackground` | Background of a hovered/selected context menu item. | Cosmetic | Yes |
306
319
  | `--liminis-editor-menu-separatorBackground` | `--vscode-menu-separatorBackground` | Color of separator lines inside context menus. | Cosmetic | Yes |
307
- | `--liminis-editor-muted-100` | `--color-muted-100` | Background of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
308
- | `--liminis-editor-muted-foreground` | `--color-muted-foreground` | Icon/text color of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
320
+ | `--liminis-editor-muted-100` | | Background of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
321
+ | `--liminis-editor-muted-foreground` | | Icon/text color of the C4 diagram layout-toggle buttons when inactive. | Cosmetic | Yes |
309
322
  | `--liminis-editor-notificationsInfoIcon-foreground` | `--vscode-notificationsInfoIcon-foreground` | Color of informational icons in inline notifications. | Cosmetic | Yes |
310
- | `--liminis-editor-primary` | `--color-primary` | Icon/text color of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
311
- | `--liminis-editor-primary-100` | `--color-primary-100` | Background of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
323
+ | `--liminis-editor-primary` | `--editor-brand` | Icon/text color of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
324
+ | `--liminis-editor-primary-100` | | Background of the C4 diagram layout-toggle buttons when active. | Cosmetic | Yes |
312
325
  | `--liminis-editor-selection` | `--vscode-selection` | Background color of selected/highlighted text. | Cosmetic | Yes |
313
326
  | `--liminis-editor-token-comment` | `--slashmd-token-comment` | Syntax-highlight color for comments in fenced code blocks. | Cosmetic | Yes |
314
327
  | `--liminis-editor-token-function` | `--slashmd-token-function` | Syntax-highlight color for function names in fenced code blocks. | Cosmetic | Yes |
@@ -350,36 +363,45 @@ highest-value place to start.
350
363
  #### Migrating from the old names
351
364
 
352
365
  Before `0.2.0`, these tokens were split across four inconsistent prefixes:
353
- `--vscode-*`, `--slashmd-*`, `--color-*` and `--checkbox-*`. `0.2.0` renames
354
- all 59 of them to `--liminis-editor-*`, but **a host that still only supplies
355
- the old names keeps working unchanged** — every renamed token resolves
356
- `--liminis-editor-x` first, then falls back to its specific previous name,
357
- so nothing breaks silently on upgrade. The old prefixes are deprecated as of
358
- `0.2.0` and will be removed in a future major release; migrate at your own
359
- pace using the table above's **Previous name** column, which lists each
360
- renamed property's exact old name the mapping isn't always a mechanical
361
- prefix swap (`--checkbox-border` became `--liminis-editor-checkbox-border`,
362
- not `--liminis-editor-border`, to avoid colliding with `--vscode-border`'s
363
- new name), so look it up rather than deriving it.
364
-
365
- Reading, not just overriding, is also migratable: a host that currently reads
366
- a legacy name directly (e.g. mapping its own design tokens onto
367
- `--vscode-foreground`) can switch that read to the corresponding
368
- `--liminis-editor-*` name and get an identical value, **as long as it isn't
369
- also setting the `--liminis-editor-*` name itself** a directly-set
370
- `--liminis-editor-*` value always wins over the previous name's own value,
371
- by ordinary cascade precedence (see "Has a default" below), so the two reads
372
- are identical only while the host relies solely on the previous name. Until
373
- ADR-93, `--liminis-editor-*` names were only ever *consumed*, never
374
- themselves declared with a value there was nothing for such a host to
375
- migrate its reads to. Every `--liminis-editor-*` name now carries its own
376
- `:root`/`.dark` alias declaration that resolves to the previous name's own
377
- value in that legacy-only case, so the read migration is a like-for-like
378
- swap with no observable difference (see verveguy/zusammen#129, the migration
379
- this addresses). This guarantee holds for a previous-name override applied
380
- at `:root`/`document.documentElement`, the standard integration point; see
381
- ADR-93 for a documented limitation when a host scopes its override to a
382
- descendant element instead.
366
+ `--vscode-*`, `--slashmd-*`, `--color-*` and `--checkbox-*`. `0.2.0` renamed
367
+ all of them to `--liminis-editor-*`. **As of `0.4.0` (ADR-98), a host that
368
+ still only *sets* an old name to theme the editor no longer works** — this is
369
+ a breaking change from `0.2.0`'s original guarantee, corrected here rather
370
+ than left silently wrong. `--old-name-x: var(--liminis-editor-x);` is a
371
+ one-line `:root`-scoped shim that this package never itself reads; a host's
372
+ own override of the old name still changes what the old name computes to,
373
+ but since every internal consumption site reads `--liminis-editor-x`
374
+ directly, that override never reaches the editor. Set the corresponding
375
+ `--liminis-editor-*` name instead see the table above's **Previous name**
376
+ column to find it. This was verified with `getComputedStyle` in a running
377
+ Electron shell, not assumed (`examples/electron/e2e/theming-aliases.spec.ts`),
378
+ and neither known consumer of this package (`liminis-app`, Zusammen) sets a
379
+ legacy name today. `--slashmd-*` is the one prefix with no shim at all: it is
380
+ deleted outright in `0.4.0`, verified unread by any known consumer (ADR-98).
381
+
382
+ The old prefixes are deprecated and will be removed in a future major
383
+ release; migrate at your own pace using the table above's **Previous name**
384
+ column, which lists each renamed property's exact old name the mapping
385
+ isn't always a mechanical prefix swap (`--checkbox-border` became
386
+ `--liminis-editor-checkbox-border`, not `--liminis-editor-border`, to avoid
387
+ colliding with `--vscode-border`'s new name), so look it up rather than
388
+ deriving it.
389
+
390
+ Reading, not just overriding, is also migratable, and is the direction
391
+ `0.4.0` actually improves: before ADR-98, a host reading a legacy name
392
+ directly (e.g. mapping its own design tokens onto `--vscode-foreground`)
393
+ could switch that read to `--liminis-editor-foreground` only as long as
394
+ nothing (host or package) set the new name some `--liminis-editor-*`
395
+ aliases forwarded to a token this package never defined at all
396
+ (`--liminis-editor-primary`, notably, forwarded to liminis-app's
397
+ `--color-primary` and baked a literal, `#3b82f6`, whenever liminis-app
398
+ hadn't set it), so switching a read to those names would return a value
399
+ this package didn't actually own. As of `0.4.0`, every `--liminis-editor-*`
400
+ name carries its own real, package-owned default — read migration is now a
401
+ like-for-like swap with no caveat, for every name except
402
+ `--liminis-editor-primary`/`-100`, whose default value deliberately changed
403
+ (see verveguy/zusammen#134, the migration this addresses, and ADR-98 for why
404
+ the old value was a defect, not a default worth preserving).
383
405
 
384
406
  ## Annotations
385
407
 
@@ -29,10 +29,10 @@ const panelStyle = () => {
29
29
  padding: '12px',
30
30
  minWidth: '280px',
31
31
  maxWidth: '360px',
32
- background: `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${dark ? '#252526' : '#ffffff'}))`,
33
- border: `1px solid var(--liminis-editor-menu-border, var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'}))`,
32
+ background: `var(--liminis-editor-menu-background)`,
33
+ border: `1px solid var(--liminis-editor-menu-border)`,
34
34
  boxShadow: dark ? '0 4px 16px rgba(0,0,0,0.4)' : '0 4px 16px rgba(0,0,0,0.15)',
35
- color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
35
+ color: `var(--liminis-editor-menu-foreground)`,
36
36
  fontFamily: 'system-ui, -apple-system, sans-serif',
37
37
  fontSize: '13px',
38
38
  };
@@ -260,8 +260,8 @@ export function CorrectionPanelPlugin() {
260
260
  if (!isOpen)
261
261
  return null;
262
262
  const dark = isDark();
263
- const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'}))`;
264
- const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${dark ? '#094771' : '#e8e8e8'}))`;
263
+ const borderColor = `var(--liminis-editor-menu-border)`;
264
+ const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
265
265
  const mutedColor = dark ? '#888888' : '#999999';
266
266
  const inputBg = dark ? '#1e1e1e' : '#f5f5f5';
267
267
  const warningBg = dark ? '#4a3500' : '#fff8e1';
@@ -273,12 +273,12 @@ export function CorrectionPanelPlugin() {
273
273
  cursor: 'pointer',
274
274
  border: `1px solid ${borderColor}`,
275
275
  background: 'transparent',
276
- color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
276
+ color: `var(--liminis-editor-menu-foreground)`,
277
277
  };
278
278
  const btnPrimary = {
279
279
  ...btnBase,
280
- background: `var(--liminis-editor-button-background, var(--vscode-button-background, ${dark ? '#0e639c' : '#007acc'}))`,
281
- color: `var(--liminis-editor-button-foreground, var(--vscode-button-foreground, #ffffff))`,
280
+ background: `var(--liminis-editor-button-background)`,
281
+ color: `var(--liminis-editor-button-foreground)`,
282
282
  border: 'none',
283
283
  opacity: isSubmitting ? 0.6 : 1,
284
284
  };
@@ -297,7 +297,7 @@ export function CorrectionPanelPlugin() {
297
297
  borderRadius: '4px',
298
298
  border: `1px solid ${borderColor}`,
299
299
  background: inputBg,
300
- color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
300
+ color: `var(--liminis-editor-menu-foreground)`,
301
301
  fontSize: '13px',
302
302
  boxSizing: 'border-box',
303
303
  }, onKeyDown: (e) => {
@@ -313,7 +313,6 @@ export function CorrectionPanelPlugin() {
313
313
  }, 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' }))] })] }));
314
314
  }
315
315
  function SuggestionItem({ name, hoverBg, onClick, }) {
316
- const dark = isDark();
317
316
  return (_jsx("button", { onClick: onClick, style: {
318
317
  display: 'block',
319
318
  width: '100%',
@@ -324,7 +323,7 @@ function SuggestionItem({ name, hoverBg, onClick, }) {
324
323
  cursor: 'pointer',
325
324
  fontSize: '13px',
326
325
  borderRadius: '3px',
327
- color: `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'}))`,
326
+ color: `var(--liminis-editor-menu-foreground)`,
328
327
  }, onMouseEnter: (e) => {
329
328
  e.currentTarget.style.background = hoverBg;
330
329
  }, onMouseLeave: (e) => {
@@ -293,7 +293,7 @@ export function DragHandlePlugin() {
293
293
  left: 0,
294
294
  right: 0,
295
295
  height: 2,
296
- background: 'var(--liminis-editor-focusBorder, var(--vscode-focusBorder, #007acc))',
296
+ background: 'var(--liminis-editor-focusBorder)',
297
297
  pointerEvents: 'none',
298
298
  zIndex: 100,
299
299
  } }))] }));
@@ -36,10 +36,10 @@ const itemStyle = {
36
36
  function SelectionContextMenu({ visible, x, y, selectedText, onChatAboutThis, annotationAffordances, onCreateAnnotation, onClose, }) {
37
37
  const menuRef = useRef(null);
38
38
  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
39
- const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
40
- const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
41
- const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
42
- const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
39
+ const bgColor = `var(--liminis-editor-menu-background)`;
40
+ const borderColor = `var(--liminis-editor-menu-border)`;
41
+ const textColor = `var(--liminis-editor-menu-foreground)`;
42
+ const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
43
43
  useEffect(() => {
44
44
  if (!visible)
45
45
  return;
@@ -11,10 +11,8 @@ import { mergeRegister } from '@lexical/utils';
11
11
  import { $getNodeByKey, $getSelection, $isNodeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
12
12
  import { Move, RotateCcw } from 'lucide-react';
13
13
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
14
- import { parseC4, validateC4 } from '../c4/parser.js';
15
- import { layoutC4Diagram } from '../c4/layout.js';
16
- import { C4Renderer, C4ErrorDisplay } from '../c4/renderer.js';
17
- import { C4InteractiveRenderer } from '../c4/C4InteractiveRenderer.js';
14
+ import { parseC4, validateC4, layoutC4Diagram } from '@liminis/diagrams/core';
15
+ import { C4Renderer, C4ErrorDisplay, C4InteractiveRenderer } from '@liminis/diagrams/react';
18
16
  import { $isC4Node } from './C4Node.js';
19
17
  import { DiagramContextMenu, useDiagramContextMenu } from './DiagramContextMenu.js';
20
18
  function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
@@ -181,11 +179,11 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
181
179
  border: 'none',
182
180
  cursor: 'pointer',
183
181
  backgroundColor: isEditingLayout
184
- ? 'var(--liminis-editor-primary-100, var(--color-primary-100, rgba(59, 130, 246, 0.1)))'
185
- : 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
182
+ ? 'var(--liminis-editor-primary-100)'
183
+ : 'var(--liminis-editor-muted-100)',
186
184
  color: isEditingLayout
187
- ? 'var(--liminis-editor-primary, var(--color-primary, #3b82f6))'
188
- : 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
185
+ ? 'var(--liminis-editor-primary)'
186
+ : 'var(--liminis-editor-muted-foreground)',
189
187
  }, children: _jsx(Move, { size: 16 }) }), manualLayout && (_jsx("button", { type: "button", onClick: (e) => {
190
188
  e.stopPropagation();
191
189
  handleResetLayout();
@@ -198,8 +196,8 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
198
196
  borderRadius: '4px',
199
197
  border: 'none',
200
198
  cursor: 'pointer',
201
- backgroundColor: 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
202
- color: 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
199
+ backgroundColor: 'var(--liminis-editor-muted-100)',
200
+ color: 'var(--liminis-editor-muted-foreground)',
203
201
  }, 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 })] }));
204
202
  }
205
203
  // =============================================================================
@@ -3,7 +3,7 @@
3
3
  * Uses DecoratorNode pattern similar to MermaidNode
4
4
  */
5
5
  import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
6
- import type { ManualLayout } from '../c4/types.js';
6
+ import type { ManualLayout } from '@liminis/diagrams/core';
7
7
  export type SerializedC4Node = Spread<{
8
8
  code: string;
9
9
  manualLayout?: ManualLayout;
@@ -75,11 +75,11 @@ const separatorStyle = {
75
75
  export function DiagramContextMenu({ visible, x, y, onCopyImage, onClose, onEditText, onEditLayout, onResetLayout, isEditingLayout, hasManualLayout, }) {
76
76
  const menuRef = useRef(null);
77
77
  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
78
- const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
79
- const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
80
- const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
81
- const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
82
- const separatorColor = `var(--liminis-editor-menu-separatorBackground, var(--vscode-menu-separatorBackground, ${isDark ? '#454545' : '#d4d4d4'}))`;
78
+ const bgColor = `var(--liminis-editor-menu-background)`;
79
+ const borderColor = `var(--liminis-editor-menu-border)`;
80
+ const textColor = `var(--liminis-editor-menu-foreground)`;
81
+ const hoverBg = `var(--liminis-editor-menu-selectionBackground)`;
82
+ const separatorColor = `var(--liminis-editor-menu-separatorBackground)`;
83
83
  // Close on click outside or Escape
84
84
  useEffect(() => {
85
85
  if (!visible)
@@ -29,11 +29,9 @@
29
29
  * graph yourself. The fix for a violation is always to prune that graph, never to
30
30
  * widen main's `lib`.
31
31
  */
32
- export { renderC4DiagramToSVG } from './app/editor/c4/render-to-string.js';
33
- export { parseC4, validateC4 } from './app/editor/c4/parser.js';
34
- export { layoutC4Diagram } from './app/editor/c4/layout.js';
35
- export { isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from './app/editor/c4/types.js';
36
- export type { C4ElementType, C4Shape, C4Direction, C4Style, C4Properties, C4Element, C4Relationship, C4Diagram, Point, LayoutNode, LayoutEdge, LayoutResult, LayoutOptions, ParseError, ParseResult, ManualLayout, } from './app/editor/c4/types.js';
32
+ export { renderC4DiagramToSVG } from '@liminis/diagrams/server';
33
+ export { parseC4, validateC4, layoutC4Diagram, isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from '@liminis/diagrams/core';
34
+ export type { C4ElementType, C4Shape, C4Direction, C4Style, C4Properties, C4Element, C4Relationship, C4Diagram, Point, LayoutNode, LayoutEdge, LayoutResult, LayoutOptions, ParseError, ParseResult, ManualLayout, } from '@liminis/diagrams/core';
37
35
  export { createLiteAdaptorDocument, TEX_PACKAGES } from './mathjax-config.js';
38
36
  export type { TeXPackage, MathDocument, LiteMathJaxInstance } from './mathjax-config.js';
39
37
  export { getFileType } from './utils/file-types.js';
package/dist/headless.js CHANGED
@@ -30,10 +30,8 @@
30
30
  * widen main's `lib`.
31
31
  */
32
32
  // C4 diagram subsystem — parse, layout, and server-side SVG rendering
33
- export { renderC4DiagramToSVG } from './app/editor/c4/render-to-string.js';
34
- export { parseC4, validateC4 } from './app/editor/c4/parser.js';
35
- export { layoutC4Diagram } from './app/editor/c4/layout.js';
36
- export { isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from './app/editor/c4/types.js';
33
+ export { renderC4DiagramToSVG } from '@liminis/diagrams/server';
34
+ export { parseC4, validateC4, layoutC4Diagram, isSystem, isContainer, isComponent, isPerson, isExternal, isBoundary, } from '@liminis/diagrams/core';
37
35
  // MathJax lite-adaptor factory (equation rendering, server-side export).
38
36
  //
39
37
  // `createBrowserAdaptorDocument` / `BrowserMathJaxInstance` are deliberately NOT
package/dist/index.d.ts CHANGED
@@ -37,4 +37,4 @@ export * from './types.js';
37
37
  export { useEditorStore } from './stores/editorStore.js';
38
38
  export { findSvgElement } from './app/editor/nodes/diagram-utils.js';
39
39
  export * from './headless.js';
40
- export type { ParseResult as C4ParseResult, ParseError as C4ParseError, } from './app/editor/c4/types.js';
40
+ export type { ParseResult as C4ParseResult, ParseError as C4ParseError, } from '@liminis/diagrams/core';