@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.
- package/LICENSE +0 -13
- package/README.md +90 -68
- package/dist/app/editor/CorrectionPanelPlugin.js +10 -11
- package/dist/app/editor/DragHandlePlugin.js +1 -1
- package/dist/app/editor/SelectionContextMenuPlugin.js +4 -4
- package/dist/app/editor/nodes/C4Component.js +8 -10
- package/dist/app/editor/nodes/C4Node.d.ts +1 -1
- package/dist/app/editor/nodes/DiagramContextMenu.js +5 -5
- package/dist/headless.d.ts +3 -5
- package/dist/headless.js +2 -4
- package/dist/index.d.ts +1 -1
- package/dist/styles.css +425 -454
- package/docs/decisions/adr-93-liminis-editor-defined-aliases.md +28 -1
- package/docs/decisions/adr-98-invert-token-direction.md +309 -0
- package/package.json +2 -2
- package/dist/app/editor/c4/C4InteractiveRenderer.d.ts +0 -35
- package/dist/app/editor/c4/C4InteractiveRenderer.js +0 -299
- package/dist/app/editor/c4/edge-clipping.d.ts +0 -24
- package/dist/app/editor/c4/edge-clipping.js +0 -139
- package/dist/app/editor/c4/hooks/useC4DiagramDrag.d.ts +0 -38
- package/dist/app/editor/c4/hooks/useC4DiagramDrag.js +0 -112
- package/dist/app/editor/c4/layout.d.ts +0 -25
- package/dist/app/editor/c4/layout.js +0 -839
- package/dist/app/editor/c4/parser.d.ts +0 -19
- package/dist/app/editor/c4/parser.js +0 -410
- package/dist/app/editor/c4/render-to-string.d.ts +0 -24
- package/dist/app/editor/c4/render-to-string.js +0 -34
- package/dist/app/editor/c4/renderer.d.ts +0 -64
- package/dist/app/editor/c4/renderer.js +0 -569
- package/dist/app/editor/c4/types.d.ts +0 -203
- 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
|
|
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.
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
(
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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
|
|
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
|
|
251
|
-
design, ADR-092 for the separate guard that protects the full
|
|
252
|
-
every token declared with a value in `styles.css`, per the
|
|
253
|
-
(`scripts/lib/theming-defined-tokens-baseline.json`) —
|
|
254
|
-
unintentional rename or removal (run `pnpm docs:theming-baseline`
|
|
255
|
-
deliberate one), and ADR-
|
|
256
|
-
|
|
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` |
|
|
308
|
-
| `--liminis-editor-muted-foreground` |
|
|
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` | `--
|
|
311
|
-
| `--liminis-editor-primary-100` |
|
|
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`
|
|
354
|
-
all
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
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
|
|
33
|
-
border: `1px solid var(--liminis-editor-menu-border
|
|
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
|
|
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
|
|
264
|
-
const hoverBg = `var(--liminis-editor-menu-selectionBackground
|
|
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
|
|
276
|
+
color: `var(--liminis-editor-menu-foreground)`,
|
|
277
277
|
};
|
|
278
278
|
const btnPrimary = {
|
|
279
279
|
...btnBase,
|
|
280
|
-
background: `var(--liminis-editor-button-background
|
|
281
|
-
color: `var(--liminis-editor-button-foreground
|
|
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
|
|
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
|
|
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
|
|
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
|
|
40
|
-
const borderColor = `var(--liminis-editor-menu-border
|
|
41
|
-
const textColor = `var(--liminis-editor-menu-foreground
|
|
42
|
-
const hoverBg = `var(--liminis-editor-menu-selectionBackground
|
|
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 '
|
|
15
|
-
import {
|
|
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
|
|
185
|
-
: 'var(--liminis-editor-muted-100
|
|
182
|
+
? 'var(--liminis-editor-primary-100)'
|
|
183
|
+
: 'var(--liminis-editor-muted-100)',
|
|
186
184
|
color: isEditingLayout
|
|
187
|
-
? 'var(--liminis-editor-primary
|
|
188
|
-
: 'var(--liminis-editor-muted-foreground
|
|
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
|
|
202
|
-
color: 'var(--liminis-editor-muted-foreground
|
|
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 '
|
|
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
|
|
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
|
|
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)
|
package/dist/headless.d.ts
CHANGED
|
@@ -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 '
|
|
33
|
-
export { parseC4, validateC4 } from '
|
|
34
|
-
export {
|
|
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 '
|
|
34
|
-
export { parseC4, validateC4 } from '
|
|
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 '
|
|
40
|
+
export type { ParseResult as C4ParseResult, ParseError as C4ParseError, } from '@liminis/diagrams/core';
|