likec4 1.17.1 → 1.19.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 (44) hide show
  1. package/LICENSE +1 -1
  2. package/{dist/__app__ → __app__}/index.html +0 -1
  3. package/{dist/__app__ → __app__}/react/likec4.tsx +16 -30
  4. package/__app__/src/chunks/-index-overview-C9eO_hFX.js +309 -0
  5. package/__app__/src/chunks/-view-lazy-data-CI4xD57c.js +9 -0
  6. package/__app__/src/chunks/index-KI-kE60c.js +465 -0
  7. package/__app__/src/chunks/likec4-CusAw_j6.js +6106 -0
  8. package/__app__/src/chunks/main-DY2KbFcO.js +24136 -0
  9. package/__app__/src/chunks/mantine-B_6mKFFA.js +13671 -0
  10. package/__app__/src/chunks/tanstack-router-BBWuTKWO.js +2373 -0
  11. package/__app__/src/icons.js +9 -0
  12. package/{dist/__app__ → __app__}/src/main.js +1 -1
  13. package/{dist/__app__ → __app__}/src/style.css +1 -1
  14. package/{dist/__app__ → __app__}/webcomponent/webcomponent.js +11351 -10812
  15. package/dist/chunks/prompt.mjs +35 -35
  16. package/dist/cli/index.mjs +225 -191
  17. package/dist/index.d.mts +760 -1787
  18. package/dist/index.d.ts +760 -1787
  19. package/dist/index.mjs +1 -1
  20. package/dist/model/index.d.mts +258 -0
  21. package/dist/model/index.d.ts +258 -0
  22. package/dist/model/index.mjs +1 -0
  23. package/dist/shared/likec4.CbSUX9bc.mjs +1853 -0
  24. package/dist/shared/likec4.DCwaTTuF.d.mts +1625 -0
  25. package/dist/shared/likec4.DCwaTTuF.d.ts +1625 -0
  26. package/dist/shared/likec4.LktBLTET.mjs +9 -0
  27. package/package.json +75 -73
  28. package/react/index.d.ts +328 -628
  29. package/react/index.js +39830 -0
  30. package/react/style.css +1 -1
  31. package/dist/__app__/src/chunks/-index-overview-DrCqsLHx.js +0 -309
  32. package/dist/__app__/src/chunks/-view-lazy-data-WZmbIsHq.js +0 -9
  33. package/dist/__app__/src/chunks/index-CIsxIzOH.js +0 -465
  34. package/dist/__app__/src/chunks/likec4-DF_Jsv_p.js +0 -6109
  35. package/dist/__app__/src/chunks/main-E2hyQKFO.js +0 -23847
  36. package/dist/__app__/src/chunks/mantine-BzD51ZKm.js +0 -13484
  37. package/dist/__app__/src/chunks/tanstack-router-CF1kJvtP.js +0 -2373
  38. package/dist/__app__/src/icons.js +0 -9
  39. package/dist/shared/likec4.BkLj38-D.mjs +0 -1824
  40. package/react/index.mjs +0 -40096
  41. /package/{dist/__app__ → __app__}/favicon.ico +0 -0
  42. /package/{dist/__app__ → __app__}/favicon.svg +0 -0
  43. /package/{dist/__app__ → __app__}/robots.txt +0 -0
  44. /package/{dist/__app__ → __app__}/src/const.js +0 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023-2024 Denis Davydkov
3
+ Copyright (c) 2023-2025 Denis Davydkov
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
@@ -5,7 +5,6 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
6
6
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
7
7
  <link rel="stylesheet" href="/src/style.css">
8
- <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=structuredClone%2Ces2022%2Ces2023%2CqueueMicrotask%2CrequestAnimationFrame%2Cdefault"></script>
9
8
  <title>LikeC4</title>
10
9
  </head>
11
10
  <body>
@@ -1,17 +1,18 @@
1
+ import type { LikeC4Model } from '@likec4/core/model'
1
2
  import {
3
+ type LikeC4ViewProps as BaseLikeC4ViewProps,
4
+ type ReactLikeC4Props as GenericReactLikeC4Props,
2
5
  LikeC4Browser,
3
- type LikeC4Model,
4
6
  LikeC4ModelProvider as GenericLikeC4ModelProvider,
5
7
  LikeC4ViewEmbedded,
6
- type LikeC4ViewProps as BaseLikeC4ViewProps,
7
8
  ReactLikeC4 as GenericReactLikeC4,
8
- type ReactLikeC4Props as GenericReactLikeC4Props,
9
- useColorScheme
9
+ useColorScheme,
10
+ ViewNotFound,
10
11
  } from 'likec4/react'
11
- import { memo, type PropsWithChildren, useCallback, useState } from 'react'
12
+ import { type PropsWithChildren, memo, useCallback, useState } from 'react'
12
13
  import { Icons } from 'virtual:likec4/icons'
13
14
  import type { DiagramView, LikeC4ElementKind, LikeC4Tag, LikeC4ViewId } from 'virtual:likec4/model'
14
- import { likec4model as likeC4Model, LikeC4Views, useLikeC4ModelAtom as useLikeC4Model } from 'virtual:likec4/model'
15
+ import { likeC4Model, LikeC4Views, useLikeC4Model } from 'virtual:likec4/model'
15
16
 
16
17
  type IconRendererProps = {
17
18
  node: {
@@ -28,10 +29,13 @@ export function RenderIcon({ node }: IconRendererProps) {
28
29
 
29
30
  export { likeC4Model, LikeC4Views, useLikeC4Model }
30
31
 
31
- export const useLikeC4ViewModel = (viewId: LikeC4ViewId): LikeC4Model.Layouted.ViewModel =>
32
- useLikeC4Model().view(viewId)
32
+ export function useLikeC4ViewModel(viewId: LikeC4ViewId): LikeC4Model.View {
33
+ return useLikeC4Model().view(viewId as any)
34
+ }
33
35
 
34
- export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView => useLikeC4Model().view(viewId).view as any
36
+ export function useLikeC4View(viewId: LikeC4ViewId): DiagramView {
37
+ return useLikeC4Model().view(viewId as any).$view as DiagramView
38
+ }
35
39
 
36
40
  export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
37
41
 
@@ -43,24 +47,6 @@ export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId {
43
47
  )
44
48
  }
45
49
 
46
- const NotFound = ({ viewId }: { viewId: string }) => (
47
- <div
48
- style={{
49
- margin: '1rem 0'
50
- }}>
51
- <div
52
- style={{
53
- margin: '0 auto',
54
- display: 'inline-block',
55
- padding: '2rem',
56
- background: 'rgba(250,82,82,.15)',
57
- color: '#ffa8a8'
58
- }}>
59
- View <code>{viewId}</code> not found
60
- </div>
61
- </div>
62
- )
63
-
64
50
  export function LikeC4ModelProvider({ children }: PropsWithChildren) {
65
51
  const likeC4Model = useLikeC4Model()
66
52
  return (
@@ -104,11 +90,11 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
104
90
  const colorScheme = useColorScheme(explicitColorScheme)
105
91
 
106
92
  if (!view) {
107
- return <NotFound viewId={viewId} />
93
+ return <ViewNotFound viewId={viewId} />
108
94
  }
109
95
 
110
96
  if (browserViewId && !browserView) {
111
- return <NotFound viewId={browserViewId} />
97
+ return <ViewNotFound viewId={browserViewId} />
112
98
  }
113
99
 
114
100
  if (interactive && enableFocusMode) {
@@ -169,7 +155,7 @@ export type ReactLikeC4Props =
169
155
  const ReactLikeC4Memo = /* @__PURE__ */ memo<ReactLikeC4Props>(function ReactLikeC4({ viewId, ...props }) {
170
156
  const view = LikeC4Views[viewId]
171
157
  if (!view) {
172
- return <NotFound viewId={viewId} />
158
+ return <ViewNotFound viewId={viewId} />
173
159
  }
174
160
  return (
175
161
  <LikeC4ModelProvider>
@@ -0,0 +1,309 @@
1
+ import { jsx as t, jsxs as u, Fragment as z } from "react/jsx-runtime";
2
+ import { useOverviewGraph as L } from "virtual:likec4/overview-graph";
3
+ import { c as b, I as R, n as S, u as B, i as V, a as G } from "./main-DY2KbFcO.js";
4
+ import { u as $ } from "./tanstack-router-BBWuTKWO.js";
5
+ import { B as K, H as v, P as g, u as U, a as A, i as X, b as Y, c as q } from "./likec4-CusAw_j6.js";
6
+ import { memo as k, useRef as J, useMemo as j } from "react";
7
+ import { P as O, c as I, G as C, T as F, a as y, C as Q, b as W, d as ee, I as te, B as P, u as se } from "./mantine-B_6mKFFA.js";
8
+ import { usePreviewUrl as ae } from "virtual:likec4/previews";
9
+ /**
10
+ * @license @tabler/icons-react v3.17.0 - MIT
11
+ *
12
+ * This source code is licensed under the MIT license.
13
+ * See the LICENSE file in the root directory of this source tree.
14
+ */
15
+ var oe = b("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
16
+ /**
17
+ * @license @tabler/icons-react v3.17.0 - MIT
18
+ *
19
+ * This source code is licensed under the MIT license.
20
+ * See the LICENSE file in the root directory of this source tree.
21
+ */
22
+ var re = b("filled", "file-filled", "IconFileFilled", [["path", { d: "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z", key: "svg-0" }], ["path", { d: "M19 7h-4l-.001 -4.001z", key: "svg-1" }]]), ie = "mxt2a80";
23
+ function ne(r) {
24
+ return r.reduce((e, [s, a], o) => e + `${o === 0 ? "M" : " L"} ${s},${a}`, "");
25
+ }
26
+ function de({
27
+ id: r,
28
+ data: e,
29
+ ...s
30
+ }) {
31
+ if (!e)
32
+ return null;
33
+ const a = ne(e.points);
34
+ return /* @__PURE__ */ t(
35
+ K,
36
+ {
37
+ id: r,
38
+ path: a,
39
+ ...s
40
+ }
41
+ );
42
+ }
43
+ var h = "_1n8mzjc0", _ = "_1n8mzjc1", D = "_1n8mzjc2", M = "_1n8mzjc3", le = "_1n8mzjc4", ce = "_1n8mzjc5", me = "_1n8mzjc6", ue = "_1n8mzjc7", pe = "_1n8mzjc8";
44
+ const fe = /* @__PURE__ */ k(function({
45
+ data: e,
46
+ parentId: s,
47
+ id: a
48
+ }) {
49
+ const o = S(s);
50
+ return /* @__PURE__ */ u(z, { children: [
51
+ /* @__PURE__ */ t(v, { type: "target", position: g.Top, className: h }),
52
+ /* @__PURE__ */ t(
53
+ O,
54
+ {
55
+ p: "sm",
56
+ pt: "xs",
57
+ radius: "md",
58
+ withBorder: !0,
59
+ shadow: o ? "lg" : "xs",
60
+ className: I(
61
+ le,
62
+ o ? _ : D,
63
+ e.dimmed && M
64
+ ),
65
+ children: /* @__PURE__ */ u(C, { gap: 8, children: [
66
+ /* @__PURE__ */ t(F, { size: 24, variant: "transparent", color: "dark.4", children: /* @__PURE__ */ t(R, { size: "100%" }) }),
67
+ /* @__PURE__ */ t(y, { size: "lg", fw: 500, children: e.label })
68
+ ] })
69
+ }
70
+ ),
71
+ /* @__PURE__ */ t(v, { type: "source", position: g.Bottom, className: h })
72
+ ] });
73
+ }), ve = /* @__PURE__ */ k(function({
74
+ data: e,
75
+ parentId: s,
76
+ id: a
77
+ }) {
78
+ const o = S(s);
79
+ return /* @__PURE__ */ u(z, { children: [
80
+ /* @__PURE__ */ t(v, { type: "target", position: g.Top, className: h }),
81
+ /* @__PURE__ */ t(
82
+ O,
83
+ {
84
+ p: "sm",
85
+ pt: "xs",
86
+ radius: "md",
87
+ withBorder: !0,
88
+ shadow: o ? "lg" : "xs",
89
+ className: I(
90
+ ce,
91
+ o ? _ : D,
92
+ e.dimmed && M
93
+ ),
94
+ children: /* @__PURE__ */ u(C, { gap: 8, children: [
95
+ /* @__PURE__ */ t(F, { size: 24, variant: "transparent", color: "dark.3", children: /* @__PURE__ */ t(re, { size: "100%" }) }),
96
+ /* @__PURE__ */ t(y, { size: "lg", fw: 500, children: e.label })
97
+ ] })
98
+ }
99
+ ),
100
+ /* @__PURE__ */ t(v, { type: "source", position: g.Bottom, className: h })
101
+ ] });
102
+ }), ge = /* @__PURE__ */ k(function({
103
+ data: e,
104
+ height: s = 320
105
+ }) {
106
+ const o = ae(e.viewId);
107
+ return /* @__PURE__ */ u(z, { children: [
108
+ /* @__PURE__ */ t(v, { type: "target", position: g.Top, className: h }),
109
+ /* @__PURE__ */ u(
110
+ Q,
111
+ {
112
+ className: I(
113
+ me,
114
+ e.dimmed && M
115
+ ),
116
+ withBorder: !0,
117
+ shadow: "xs",
118
+ padding: 0,
119
+ children: [
120
+ /* @__PURE__ */ t(W, { className: ue, children: o ? /* @__PURE__ */ t(
121
+ te,
122
+ {
123
+ src: o,
124
+ fit: "contain",
125
+ h: s - 60
126
+ }
127
+ ) : /* @__PURE__ */ t(ee, { h: s - 60, children: /* @__PURE__ */ u(C, { children: [
128
+ /* @__PURE__ */ t(F, { size: 60, variant: "transparent", color: "dark", children: /* @__PURE__ */ t(oe, { stroke: 1.5, size: "100%" }) }),
129
+ /* @__PURE__ */ t(y, { size: "xl", fw: 500, c: "dimmed", children: "Preview not available" })
130
+ ] }) }) }),
131
+ /* @__PURE__ */ t(P, { className: pe, h: 60, p: "sm", pl: "md", children: /* @__PURE__ */ t(y, { component: "div", size: "lg", fw: 500, children: e.label }) })
132
+ ]
133
+ }
134
+ ),
135
+ /* @__PURE__ */ t(v, { type: "source", position: g.Bottom, className: h })
136
+ ] });
137
+ }), he = {
138
+ folder: fe,
139
+ file: ve,
140
+ view: ge
141
+ }, we = {
142
+ link: de
143
+ }, ye = (r) => ({
144
+ nodes: r.nodes.map(({ id: e, parentId: s, position: a, width: o, height: c, ...l }) => {
145
+ const i = s ? r.nodes.find((N) => N.id === s) : null, w = {
146
+ ...a,
147
+ width: o,
148
+ height: c
149
+ };
150
+ i && (a = {
151
+ x: a.x - i.position.x,
152
+ y: a.y - i.position.y
153
+ });
154
+ const p = i ? { parentId: i.id } : {};
155
+ switch (l.type) {
156
+ case "file":
157
+ case "folder":
158
+ return {
159
+ id: e,
160
+ type: l.type,
161
+ data: {
162
+ dimmed: !1,
163
+ label: l.label,
164
+ path: l.path,
165
+ rect: w
166
+ },
167
+ deletable: !1,
168
+ position: a,
169
+ width: o,
170
+ height: c,
171
+ zIndex: 1,
172
+ ...p
173
+ };
174
+ case "view":
175
+ return {
176
+ id: e,
177
+ type: "view",
178
+ data: {
179
+ dimmed: !1,
180
+ label: l.label,
181
+ viewId: l.viewId,
182
+ rect: w
183
+ },
184
+ selectable: !1,
185
+ deletable: !1,
186
+ position: a,
187
+ width: o,
188
+ height: c,
189
+ zIndex: 3,
190
+ ...p
191
+ };
192
+ default:
193
+ G(l);
194
+ }
195
+ }),
196
+ edges: r.edges.map((e) => ({
197
+ id: e.id,
198
+ source: e.source,
199
+ target: e.target,
200
+ type: "link",
201
+ zIndex: 2,
202
+ hidden: !0,
203
+ data: {
204
+ points: e.points
205
+ }
206
+ }))
207
+ });
208
+ function Ne({
209
+ graph: r,
210
+ fitViewPadding: e = 0.1,
211
+ zoomable: s = !0,
212
+ pannable: a = !0
213
+ }) {
214
+ const o = $(), c = J(), { colorScheme: l } = se(), i = j(() => ye(r), [r]), [w, p, N] = U(i.nodes), [E, H, Z] = A(i.edges);
215
+ B(() => {
216
+ p(
217
+ (n) => i.nodes.map((d) => {
218
+ const f = n.find((m) => m.id === d.id);
219
+ return f ? { ...V(f, ["selected", "hidden"]), ...d } : d;
220
+ })
221
+ ), H(i.edges);
222
+ }, [i.nodes, i.edges]);
223
+ const x = w.find((n) => n.selected);
224
+ return B(() => {
225
+ const n = c.current;
226
+ n && (x ? n.fitView({
227
+ maxZoom: 1,
228
+ padding: e,
229
+ nodes: [x],
230
+ duration: 450
231
+ }) : n.fitView({
232
+ maxZoom: 1,
233
+ padding: e,
234
+ duration: 800
235
+ }));
236
+ }, [x?.id ?? null]), /* @__PURE__ */ t(
237
+ X,
238
+ {
239
+ colorMode: l === "auto" ? "system" : l,
240
+ className: ie,
241
+ nodeTypes: he,
242
+ edgeTypes: we,
243
+ nodes: w,
244
+ onNodesChange: N,
245
+ edges: E,
246
+ onEdgesChange: Z,
247
+ fitView: !0,
248
+ fitViewOptions: j(() => ({
249
+ minZoom: 0.05,
250
+ maxZoom: 1,
251
+ padding: e,
252
+ includeHiddenNodes: !0
253
+ }), [e]),
254
+ nodesDraggable: !1,
255
+ nodesConnectable: !1,
256
+ nodesFocusable: !0,
257
+ edgesReconnectable: !1,
258
+ edgesFocusable: !1,
259
+ multiSelectionKeyCode: null,
260
+ zoomOnPinch: s,
261
+ zoomOnScroll: !a && s,
262
+ zoomOnDoubleClick: !1,
263
+ ...!s && {
264
+ zoomActivationKeyCode: null
265
+ },
266
+ maxZoom: s ? 2 : 1,
267
+ minZoom: s ? 0.01 : 1,
268
+ preventScrolling: s || a,
269
+ noDragClassName: "nodrag",
270
+ noPanClassName: "nopan",
271
+ panOnScroll: a,
272
+ panOnDrag: a,
273
+ ...!a && {
274
+ selectionKeyCode: null
275
+ },
276
+ onInit: (n) => c.current = n,
277
+ onNodeClick: (n, d) => {
278
+ if (d.type === "view") {
279
+ n.stopPropagation(), p((f) => f.map(({ data: m, ...T }) => ({ ...T, data: { ...m, dimmed: T.id !== d.id } }))), c.current?.fitView({
280
+ maxZoom: 10,
281
+ padding: 0,
282
+ nodes: [d],
283
+ duration: 1200
284
+ }), setTimeout(() => {
285
+ c.current?.updateNodeData(d.id, { dimmed: !0 });
286
+ }, 400), setTimeout(() => {
287
+ o.navigate({
288
+ to: "/view/$viewId/",
289
+ params: {
290
+ viewId: d.data.viewId
291
+ },
292
+ search: !0
293
+ });
294
+ }, 800);
295
+ return;
296
+ }
297
+ d.selected && (n.stopPropagation(), p((f) => f.map((m) => m.id === d.id ? { ...m, selected: !1 } : m)));
298
+ },
299
+ children: /* @__PURE__ */ t(Y, { variant: q.Dots, size: 4, gap: 50 })
300
+ }
301
+ );
302
+ }
303
+ function Be() {
304
+ const r = L();
305
+ return /* @__PURE__ */ t(P, { pos: "fixed", inset: 0, children: /* @__PURE__ */ t(Ne, { graph: r }) });
306
+ }
307
+ export {
308
+ Be as default
309
+ };
@@ -0,0 +1,9 @@
1
+ import { d2Source as e } from "virtual:likec4/d2-sources";
2
+ import { dotSource as c, svgSource as t } from "virtual:likec4/dot-sources";
3
+ import { mmdSource as S } from "virtual:likec4/mmd-sources";
4
+ export {
5
+ e as d2Source,
6
+ c as dotSource,
7
+ S as mmdSource,
8
+ t as svgSource
9
+ };