likec4 1.59.4 → 1.61.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 (186) hide show
  1. package/README.md +2 -0
  2. package/__app__/codegen/react.mjs +4 -10
  3. package/__app__/codegen/webcomponent.mjs +6 -131
  4. package/__app__/index.html +15 -15
  5. package/__app__/src/aichat/index.mjs +11 -7
  6. package/__app__/src/chunks/AIChat.mjs +1355 -739
  7. package/__app__/src/chunks/ErrorComponent.mjs +444 -0
  8. package/__app__/src/chunks/Header.mjs +269 -0
  9. package/__app__/src/chunks/ViewReact.mjs +438 -0
  10. package/__app__/src/chunks/find.mjs +38 -0
  11. package/__app__/src/chunks/hooks.mjs +158 -472
  12. package/__app__/src/chunks/libs/@tabler/icons-react.mjs +340 -0
  13. package/__app__/src/chunks/libs/@tanstack-ai.mjs +11841 -1417
  14. package/__app__/src/chunks/libs/@tanstack.mjs +5110 -2404
  15. package/__app__/src/chunks/libs/fast-equals.mjs +507 -214
  16. package/__app__/src/chunks/libs/html-to-image.mjs +613 -0
  17. package/__app__/src/chunks/libs/nanostores.mjs +170 -0
  18. package/__app__/src/chunks/libs/react-resizable-panels.mjs +2792 -0
  19. package/__app__/src/chunks/react.mjs +22 -0
  20. package/__app__/src/chunks/rolldown-runtime.mjs +16 -29
  21. package/__app__/src/chunks/router.mjs +106 -0
  22. package/__app__/src/chunks/scope.mjs +106 -0
  23. package/__app__/src/chunks/searchParams.mjs +29 -0
  24. package/__app__/src/chunks/single-index.mjs +465 -0
  25. package/__app__/src/chunks/styled-system.mjs +1826 -2528
  26. package/__app__/src/chunks/useAsync.mjs +69 -0
  27. package/__app__/src/chunks/useSyncedRef.mjs +16 -0
  28. package/__app__/src/components/ColorSchemeToggle.mjs +124 -0
  29. package/__app__/src/components/CopyToClipboard.mjs +53 -0
  30. package/__app__/src/components/ErrorComponent.mjs +1 -0
  31. package/__app__/src/components/NavigationPanel.mjs +63 -0
  32. package/__app__/src/components/NotFound.mjs +155 -0
  33. package/__app__/src/components/ViewOutlet.mjs +9 -0
  34. package/__app__/src/components/model-diff/CompareModelProvider.mjs +44 -0
  35. package/__app__/src/components/model-diff/ModelDiffPanel.mjs +179 -0
  36. package/__app__/src/components/model-diff/compare-model.mjs +76 -0
  37. package/__app__/src/components/model-diff/state.mjs +45 -0
  38. package/__app__/src/components/search/OverviewSearch.mjs +92 -0
  39. package/__app__/src/components/search/OverviewSearchAdapter.mjs +94 -0
  40. package/__app__/src/components/sidebar/DiagramTree.css.mjs +48 -0
  41. package/__app__/src/components/sidebar/DiagramsTree.mjs +304 -0
  42. package/__app__/src/components/sidebar/Drawer.mjs +178 -0
  43. package/__app__/src/components/sidebar/SidebarBurger.mjs +28 -0
  44. package/__app__/src/components/sidebar/data.mjs +94 -0
  45. package/__app__/src/components/sidebar/state.mjs +16 -0
  46. package/__app__/src/components/view-page/Header.mjs +1 -0
  47. package/__app__/src/components/view-page/SelectProject.mjs +258 -0
  48. package/__app__/src/components/view-page/ShareModal.mjs +111 -0
  49. package/__app__/src/components/view-page/share-modal/AlertLocalhost.mjs +31 -0
  50. package/__app__/src/components/view-page/share-modal/CopyButtonChild.mjs +36 -0
  51. package/__app__/src/components/view-page/share-modal/EmbedPanel.mjs +100 -0
  52. package/__app__/src/components/view-page/share-modal/WebcomponentsPanel.mjs +264 -0
  53. package/__app__/src/components/view-page/state.mjs +17 -0
  54. package/__app__/src/context/LikeC4CustomizationContext.mjs +26 -0
  55. package/__app__/src/context/LikeC4IconRendererContext.mjs +29 -0
  56. package/__app__/src/context/LikeC4ModelContext.mjs +34 -0
  57. package/__app__/src/context/LikeC4ProjectsContext.mjs +40 -0
  58. package/__app__/src/context/ModelDiffsContext.mjs +33 -0
  59. package/__app__/src/context/safeCtx.mjs +14 -0
  60. package/__app__/src/fonts.css +112 -1
  61. package/__app__/src/hooks.mjs +1 -0
  62. package/__app__/src/main.mjs +6 -29151
  63. package/__app__/src/pages/EmbedPage.mjs +93 -0
  64. package/__app__/src/pages/ExportPage.mjs +691 -0
  65. package/__app__/src/pages/ProjectsOverview.mjs +23 -0
  66. package/__app__/src/pages/ViewAsD2.mjs +105 -0
  67. package/__app__/src/pages/ViewAsDot.mjs +65 -0
  68. package/__app__/src/pages/ViewAsMmd.mjs +109 -0
  69. package/__app__/src/pages/ViewAsPuml.mjs +105 -0
  70. package/__app__/src/pages/ViewEditor.mjs +220 -0
  71. package/__app__/src/pages/ViewReact.mjs +1 -0
  72. package/__app__/src/pages/export-layout.mjs +95 -0
  73. package/__app__/src/pages/export-page-params.mjs +9 -0
  74. package/__app__/src/pages/styles.css.mjs +23 -0
  75. package/__app__/src/routeTree.gen.mjs +105 -0
  76. package/__app__/src/router.mjs +1 -0
  77. package/__app__/src/routes/__root.mjs +65 -0
  78. package/__app__/src/routes/index.css.mjs +29 -0
  79. package/__app__/src/routes/index.mjs +32 -0
  80. package/__app__/src/routes/project._projectId/-components.mjs +100 -0
  81. package/__app__/src/routes/project._projectId/embed._viewId.mjs +5 -0
  82. package/__app__/src/routes/project._projectId/export._viewId.mjs +24 -0
  83. package/__app__/src/routes/project._projectId/index.mjs +14 -0
  84. package/__app__/src/routes/project._projectId/route.mjs +93 -0
  85. package/__app__/src/routes/project._projectId/view._viewId.d2.mjs +34 -0
  86. package/__app__/src/routes/project._projectId/view._viewId.dot.mjs +41 -0
  87. package/__app__/src/routes/project._projectId/view._viewId.index.mjs +7 -0
  88. package/__app__/src/routes/project._projectId/view._viewId.mjs +23 -0
  89. package/__app__/src/routes/project._projectId/view._viewId.mmd.mjs +39 -0
  90. package/__app__/src/routes/project._projectId/view._viewId.puml.mjs +34 -0
  91. package/__app__/src/routes/projects.mjs +36 -0
  92. package/__app__/src/routes/single-index.mjs +1 -0
  93. package/__app__/src/routes/webcomponent._.mjs +94 -0
  94. package/__app__/src/style.css +18497 -1
  95. package/config/schema.json +146 -97
  96. package/dist/app/render-view-client.css +1 -1
  97. package/dist/app/render-view-client.js +394 -238
  98. package/dist/chunks/enableServer.mjs +1 -1
  99. package/dist/chunks/filenames.mjs +25 -17
  100. package/dist/chunks/generate-likec4.mjs +5 -0
  101. package/dist/chunks/index.d.mts +255 -194
  102. package/dist/chunks/index2.d.mts +8246 -3610
  103. package/dist/chunks/libs/@chenglou/pretext.mjs +9 -0
  104. package/dist/chunks/libs/@chevrotain/gast.mjs +27 -1
  105. package/dist/chunks/libs/@chevrotain/regexp-to-ast.mjs +81 -9
  106. package/dist/chunks/libs/@logtape/logtape.mjs +5 -4
  107. package/dist/chunks/libs/@lume/kiwi.mjs +1 -1
  108. package/dist/chunks/libs/@ts-graphviz/common.d.mts +2 -4
  109. package/dist/chunks/libs/@ts-graphviz/core.mjs +1 -1
  110. package/dist/chunks/libs/birpc.mjs +1 -1
  111. package/dist/chunks/libs/chevrotain-allstar.mjs +2 -2
  112. package/dist/chunks/libs/chevrotain.mjs +88 -36
  113. package/dist/chunks/libs/clone.mjs +1 -0
  114. package/dist/chunks/libs/eventemitter3.mjs +1 -1
  115. package/dist/chunks/libs/fast-equals.mjs +1 -0
  116. package/dist/chunks/libs/fontkit.mjs +1 -0
  117. package/dist/chunks/libs/json5.mjs +4 -4
  118. package/dist/chunks/libs/langium.d.mts +6707 -6715
  119. package/dist/chunks/libs/langium.mjs +16 -24
  120. package/dist/chunks/libs/merge-error-cause.mjs +1 -1
  121. package/dist/chunks/libs/p-limit.mjs +1 -0
  122. package/dist/chunks/libs/p-queue.mjs +1 -1
  123. package/dist/chunks/libs/package-manager-detector.mjs +1 -1
  124. package/dist/chunks/libs/pako.mjs +1 -1
  125. package/dist/chunks/libs/pathe.mjs +1 -1
  126. package/dist/chunks/libs/pretty-ms.mjs +1 -1
  127. package/dist/chunks/libs/remeda.mjs +1 -1
  128. package/dist/chunks/libs/ufo.mjs +1 -1
  129. package/dist/chunks/libs/unstorage.mjs +1 -1
  130. package/dist/chunks/libs/which.mjs +1 -1
  131. package/dist/chunks/node.mjs +111 -77
  132. package/dist/chunks/rolldown-runtime.mjs +1 -1
  133. package/dist/chunks/sequence-view.mjs +1 -1
  134. package/dist/chunks/vite-plugin.mjs +185 -166
  135. package/dist/cli/index.mjs +254 -1306
  136. package/dist/config/index.d.mts +66 -5
  137. package/dist/config/index.mjs +1 -1
  138. package/dist/generators/likec4.d.mts +6530 -0
  139. package/dist/generators/likec4.mjs +1 -0
  140. package/dist/index.d.mts +2 -4
  141. package/dist/model/index.d.mts +0 -7
  142. package/dist/vite-plugin/index.d.mts +83 -58
  143. package/dist/vite-plugin/index.mjs +1 -1
  144. package/dist/vite-plugin/internal/chunks/rolldown-runtime.mjs +8 -0
  145. package/dist/vite-plugin/internal/index.d.mts +92 -17
  146. package/dist/vite-plugin/internal/index.mjs +225 -126
  147. package/generators/likec4/package.json +4 -0
  148. package/package.json +134 -122
  149. package/react/index.d.mts +7496 -26659
  150. package/react/index.mjs +533 -63936
  151. package/react/rolldown-runtime-CfRud99p.js +1 -0
  152. package/skills/likec4-dsl/SKILL.md +474 -0
  153. package/skills/likec4-dsl/evals/evals-public.json +207 -0
  154. package/skills/likec4-dsl/evals/grading-spec.json +603 -0
  155. package/skills/likec4-dsl/references/bridge-leanix-drawio.md +42 -0
  156. package/skills/likec4-dsl/references/cli.md +168 -0
  157. package/skills/likec4-dsl/references/configuration.md +266 -0
  158. package/skills/likec4-dsl/references/deployment.md +160 -0
  159. package/skills/likec4-dsl/references/diffs.md +52 -0
  160. package/skills/likec4-dsl/references/dynamic-views.md +455 -0
  161. package/skills/likec4-dsl/references/examples.md +370 -0
  162. package/skills/likec4-dsl/references/identifier-validity.md +90 -0
  163. package/skills/likec4-dsl/references/include-predicates-wildcards.md +180 -0
  164. package/skills/likec4-dsl/references/model.md +182 -0
  165. package/skills/likec4-dsl/references/predicates.md +123 -0
  166. package/skills/likec4-dsl/references/relationships-bidirectional.md +176 -0
  167. package/skills/likec4-dsl/references/specification.md +79 -0
  168. package/skills/likec4-dsl/references/style-tokens-colors.md +150 -0
  169. package/skills/likec4-dsl/references/troubleshooting.md +101 -0
  170. package/skills/likec4-dsl/references/views.md +329 -0
  171. package/vite-plugin-modules.d.ts +126 -51
  172. package/__app__/src/chunks/LikeC4Styles.mjs +0 -2306
  173. package/__app__/src/chunks/ProjectsOverview.mjs +0 -537
  174. package/__app__/src/chunks/es.mjs +0 -439
  175. package/__app__/src/chunks/libs/@floating-ui.mjs +0 -2532
  176. package/__app__/src/chunks/libs/@mantine.mjs +0 -13868
  177. package/__app__/src/chunks/libs/@xstate/react.mjs +0 -2015
  178. package/__app__/src/chunks/libs/@xyflow/react.mjs +0 -5367
  179. package/__app__/src/chunks/libs/bezier-js.mjs +0 -1007
  180. package/__app__/src/chunks/libs/d3.mjs +0 -2817
  181. package/__app__/src/chunks/libs/framer.mjs +0 -5926
  182. package/__app__/src/chunks/libs/zod.mjs +0 -3176
  183. package/dist/chunks/libs/@chevrotain/types.d.mts +0 -108
  184. package/dist/chunks/libs/picomatch.mjs +0 -1
  185. package/dist/chunks/libs/zod.d.mts +0 -3840
  186. package/dist/chunks/libs/zod.mjs +0 -65
@@ -0,0 +1,691 @@
1
+ import "../chunks/rolldown-runtime.mjs";
2
+ import { s as Box$1 } from "../chunks/styled-system.mjs";
3
+ import { l as useSearch } from "../chunks/libs/@tanstack.mjs";
4
+ import { a as useTransparentBackground, n as useCurrentView } from "../chunks/hooks.mjs";
5
+ import { computeExportPageLayout } from "./export-layout.mjs";
6
+ import { isExportSearchFlagEnabled } from "./export-page-params.mjs";
7
+ import { useRef } from "react";
8
+ import { c } from "react/compiler-runtime";
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
+ import { LoadingOverlay } from "@mantine/core";
11
+ import { ElementShape, LikeC4Diagram, Markdown, pickViewBounds, useLikeC4Model, useLikeC4Styles } from "likec4/react";
12
+ import { RichText } from "@likec4/core";
13
+ // src/pages/ExportPage.tsx
14
+ /**
15
+ * Downloads a generated object URL or data URL through a temporary browser link.
16
+ */
17
+ function triggerDownload(url, filename) {
18
+ const link = document.createElement("a");
19
+ link.setAttribute("download", filename);
20
+ link.href = url;
21
+ document.body.appendChild(link);
22
+ link.click();
23
+ return new Promise((resolve) => setTimeout(() => {
24
+ document.body.removeChild(link);
25
+ URL.revokeObjectURL(url);
26
+ resolve();
27
+ }, 1e3));
28
+ }
29
+ /**
30
+ * Converts the export viewport into a PNG file and starts a browser download.
31
+ */
32
+ async function downloadAsPng({ pngFilename, viewport }) {
33
+ try {
34
+ const { toBlob } = await import("../chunks/libs/html-to-image.mjs").then((n) => n.t);
35
+ const blob = await toBlob(viewport, {
36
+ backgroundColor: "transparent",
37
+ cacheBust: true,
38
+ imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
39
+ });
40
+ if (!blob) throw new Error("Failed to create PNG blob");
41
+ await triggerDownload(URL.createObjectURL(blob), `${pngFilename}.png`);
42
+ window.close();
43
+ } catch (err) {
44
+ console.error(err);
45
+ window.alert(`Failed to export to PNG, check the console for more details.`);
46
+ }
47
+ }
48
+ /**
49
+ * Converts the export viewport into a JPEG file and starts a browser download.
50
+ */
51
+ async function downloadAsJpeg({ filename, viewport, quality = .8 }) {
52
+ try {
53
+ const { toJpeg } = await import("../chunks/libs/html-to-image.mjs").then((n) => n.t);
54
+ await triggerDownload(await toJpeg(viewport, {
55
+ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--mantine-color-body"),
56
+ quality,
57
+ cacheBust: true,
58
+ imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
59
+ }), `${filename}.jpg`);
60
+ window.close();
61
+ } catch (err) {
62
+ console.error(err);
63
+ window.alert(`Failed to export to JPEG, check the console for more details.`);
64
+ }
65
+ }
66
+ /**
67
+ * Renders the single-view export page used by browser downloads and CLI screenshots.
68
+ */
69
+ function ExportPage() {
70
+ const $ = c(5);
71
+ const [diagram] = useCurrentView();
72
+ let t0;
73
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
74
+ t0 = { strict: false };
75
+ $[0] = t0;
76
+ } else t0 = $[0];
77
+ const { format } = useSearch(t0);
78
+ const isJpeg = (format ?? "png") === "jpeg";
79
+ useTransparentBackground(!isJpeg);
80
+ if (!diagram) {
81
+ let t1;
82
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
83
+ t1 = /* @__PURE__ */ jsx("div", { children: "Loading..." });
84
+ $[1] = t1;
85
+ } else t1 = $[1];
86
+ return t1;
87
+ }
88
+ let t1;
89
+ if ($[2] !== diagram || $[3] !== isJpeg) {
90
+ t1 = /* @__PURE__ */ jsx(GuardedExportPage, {
91
+ diagram,
92
+ isJpeg
93
+ });
94
+ $[2] = diagram;
95
+ $[3] = isJpeg;
96
+ $[4] = t1;
97
+ } else t1 = $[4];
98
+ return t1;
99
+ }
100
+ /**
101
+ * Renders the measured export viewport for a loaded diagram.
102
+ */
103
+ function GuardedExportPage(t0) {
104
+ const $ = c(48);
105
+ const { diagram, isJpeg } = t0;
106
+ let t1;
107
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
108
+ t1 = { strict: false };
109
+ $[0] = t1;
110
+ } else t1 = $[0];
111
+ const { padding: t2, download: t3, description: t4, quality, dynamic, notation: t5 } = useSearch(t1);
112
+ const padding = t2 === void 0 ? 20 : t2;
113
+ const download = t3 === void 0 ? false : t3;
114
+ const description = t4 === void 0 ? false : t4;
115
+ const notation = t5 === void 0 ? false : t5;
116
+ const viewportRef = useRef(null);
117
+ const loadingOverlayRef = useRef(null);
118
+ const downloadedRef = useRef(false);
119
+ const bounds = pickViewBounds(diagram, dynamic);
120
+ const model = useLikeC4Model();
121
+ const viewDescription = RichText.from(diagram.description, model.resolveMarkdownRef);
122
+ const showDescription = isExportSearchFlagEnabled(description) && viewDescription.nonEmpty;
123
+ const viewTitle = diagram.title ?? diagram.id;
124
+ let t6;
125
+ if ($[1] !== diagram.notation?.nodes) {
126
+ t6 = diagram.notation?.nodes ?? [];
127
+ $[1] = diagram.notation?.nodes;
128
+ $[2] = t6;
129
+ } else t6 = $[2];
130
+ const notationEntries = t6;
131
+ const showNotation = isExportSearchFlagEnabled(notation) && notationEntries.length > 0;
132
+ const layout = computeExportPageLayout({
133
+ bounds,
134
+ padding,
135
+ description: showDescription ? {
136
+ title: viewTitle,
137
+ text: viewDescription.text
138
+ } : null,
139
+ notationEntries: showNotation ? notationEntries.length : 0
140
+ });
141
+ let t7;
142
+ if ($[3] !== diagram || $[4] !== download || $[5] !== isJpeg || $[6] !== quality) {
143
+ t7 = () => {
144
+ const viewport = viewportRef.current;
145
+ if (!download || !viewport || !diagram || downloadedRef.current) return;
146
+ const loadingOverlay = loadingOverlayRef.current;
147
+ if (loadingOverlay) loadingOverlay.style.display = "none";
148
+ downloadedRef.current = true;
149
+ if (isJpeg) downloadAsJpeg({
150
+ filename: diagram.id,
151
+ viewport,
152
+ quality: quality ?? .8
153
+ });
154
+ else downloadAsPng({
155
+ pngFilename: diagram.id,
156
+ viewport
157
+ });
158
+ };
159
+ $[3] = diagram;
160
+ $[4] = download;
161
+ $[5] = isJpeg;
162
+ $[6] = quality;
163
+ $[7] = t7;
164
+ } else t7 = $[7];
165
+ const downloadDiagram = t7;
166
+ let t8;
167
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
168
+ t8 = {
169
+ position: "fixed",
170
+ top: "0",
171
+ left: "0",
172
+ padding: "0",
173
+ margin: "0",
174
+ overflow: "hidden",
175
+ zIndex: "[2]"
176
+ };
177
+ $[8] = t8;
178
+ } else t8 = $[8];
179
+ const t9 = isJpeg ? "var(--mantine-color-body)" : "transparent";
180
+ let t10;
181
+ if ($[9] !== layout.height || $[10] !== layout.width || $[11] !== t9) {
182
+ t10 = {
183
+ marginRight: "auto",
184
+ marginBottom: "auto",
185
+ minWidth: layout.width,
186
+ width: layout.width,
187
+ minHeight: layout.height,
188
+ height: layout.height,
189
+ background: t9
190
+ };
191
+ $[9] = layout.height;
192
+ $[10] = layout.width;
193
+ $[11] = t9;
194
+ $[12] = t10;
195
+ } else t10 = $[12];
196
+ let t11;
197
+ if ($[13] !== download) {
198
+ t11 = download && /* @__PURE__ */ jsx(LoadingOverlay, {
199
+ ref: loadingOverlayRef,
200
+ visible: true
201
+ });
202
+ $[13] = download;
203
+ $[14] = t11;
204
+ } else t11 = $[14];
205
+ let t12;
206
+ if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
207
+ t12 = {
208
+ position: "absolute",
209
+ overflow: "hidden"
210
+ };
211
+ $[15] = t12;
212
+ } else t12 = $[15];
213
+ const t13 = layout.height - layout.diagram.top;
214
+ let t14;
215
+ if ($[16] !== layout.diagram.left || $[17] !== layout.diagram.top || $[18] !== layout.diagram.width || $[19] !== t13) {
216
+ t14 = {
217
+ top: layout.diagram.top,
218
+ left: layout.diagram.left,
219
+ width: layout.diagram.width,
220
+ height: t13
221
+ };
222
+ $[16] = layout.diagram.left;
223
+ $[17] = layout.diagram.top;
224
+ $[18] = layout.diagram.width;
225
+ $[19] = t13;
226
+ $[20] = t14;
227
+ } else t14 = $[20];
228
+ let t15;
229
+ if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
230
+ t15 = {
231
+ top: "0px",
232
+ bottom: "0px",
233
+ left: "0px",
234
+ right: "0px"
235
+ };
236
+ $[21] = t15;
237
+ } else t15 = $[21];
238
+ const t16 = isJpeg ? "solid" : "transparent";
239
+ let t17;
240
+ if ($[22] !== bounds || $[23] !== download || $[24] !== downloadDiagram || $[25] !== padding) {
241
+ t17 = () => {
242
+ if (!viewportRef.current) {
243
+ console.error("viewportRef.current is null");
244
+ return;
245
+ }
246
+ const x = Math.round(-bounds.x + padding);
247
+ const y = Math.round(-bounds.y + padding);
248
+ [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
249
+ el.style.transform = "translate(" + x + "px, " + y + "px)";
250
+ });
251
+ if (download) window.setTimeout(downloadDiagram, 500);
252
+ };
253
+ $[22] = bounds;
254
+ $[23] = download;
255
+ $[24] = downloadDiagram;
256
+ $[25] = padding;
257
+ $[26] = t17;
258
+ } else t17 = $[26];
259
+ let t18;
260
+ if ($[27] !== diagram || $[28] !== dynamic || $[29] !== t16 || $[30] !== t17) {
261
+ t18 = /* @__PURE__ */ jsx(LikeC4Diagram, {
262
+ view: diagram,
263
+ fitView: false,
264
+ fitViewPadding: t15,
265
+ background: t16,
266
+ reduceGraphics: false,
267
+ dynamicViewVariant: dynamic,
268
+ className: "likec4-static-view",
269
+ pannable: false,
270
+ zoomable: false,
271
+ controls: false,
272
+ enableNotations: false,
273
+ enableElementDetails: false,
274
+ enableRelationshipDetails: false,
275
+ enableRelationshipBrowser: false,
276
+ enableDynamicViewWalkthrough: false,
277
+ enableFocusMode: false,
278
+ enableSearch: false,
279
+ nodesSelectable: false,
280
+ enableElementTags: false,
281
+ onInitialized: t17
282
+ });
283
+ $[27] = diagram;
284
+ $[28] = dynamic;
285
+ $[29] = t16;
286
+ $[30] = t17;
287
+ $[31] = t18;
288
+ } else t18 = $[31];
289
+ let t19;
290
+ if ($[32] !== t14 || $[33] !== t18) {
291
+ t19 = /* @__PURE__ */ jsx(Box$1, {
292
+ "data-testid": "export-diagram-area",
293
+ css: t12,
294
+ style: t14,
295
+ children: t18
296
+ });
297
+ $[32] = t14;
298
+ $[33] = t18;
299
+ $[34] = t19;
300
+ } else t19 = $[34];
301
+ let t20;
302
+ if ($[35] !== layout.description || $[36] !== viewDescription || $[37] !== viewTitle) {
303
+ t20 = layout.description && /* @__PURE__ */ jsx(ExportDescriptionPanel, {
304
+ title: viewTitle,
305
+ description: viewDescription,
306
+ layout: layout.description
307
+ });
308
+ $[35] = layout.description;
309
+ $[36] = viewDescription;
310
+ $[37] = viewTitle;
311
+ $[38] = t20;
312
+ } else t20 = $[38];
313
+ let t21;
314
+ if ($[39] !== layout.notation || $[40] !== notationEntries) {
315
+ t21 = layout.notation && /* @__PURE__ */ jsx(ExportNotationPanel, {
316
+ entries: notationEntries,
317
+ layout: layout.notation
318
+ });
319
+ $[39] = layout.notation;
320
+ $[40] = notationEntries;
321
+ $[41] = t21;
322
+ } else t21 = $[41];
323
+ let t22;
324
+ if ($[42] !== t10 || $[43] !== t11 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21) {
325
+ t22 = /* @__PURE__ */ jsxs(Box$1, {
326
+ ref: viewportRef,
327
+ "data-testid": "export-page",
328
+ css: t8,
329
+ style: t10,
330
+ children: [
331
+ t11,
332
+ t19,
333
+ t20,
334
+ t21
335
+ ]
336
+ });
337
+ $[42] = t10;
338
+ $[43] = t11;
339
+ $[44] = t19;
340
+ $[45] = t20;
341
+ $[46] = t21;
342
+ $[47] = t22;
343
+ } else t22 = $[47];
344
+ return t22;
345
+ }
346
+ /**
347
+ * Renders the optional Markdown description panel above the exported diagram.
348
+ */
349
+ function ExportDescriptionPanel(t0) {
350
+ const $ = c(14);
351
+ const { title, description, layout } = t0;
352
+ let t1;
353
+ if ($[0] !== layout) {
354
+ t1 = {
355
+ ...layout,
356
+ position: "absolute",
357
+ boxSizing: "border-box",
358
+ overflow: "hidden",
359
+ border: "1px solid var(--mantine-color-default-border)",
360
+ borderRadius: 6,
361
+ background: "var(--mantine-color-body)",
362
+ boxShadow: "0 4px 18px rgb(0 0 0 / 14%)",
363
+ color: "var(--mantine-color-text)"
364
+ };
365
+ $[0] = layout;
366
+ $[1] = t1;
367
+ } else t1 = $[1];
368
+ const panelStyle = t1;
369
+ let t2;
370
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
371
+ t2 = {
372
+ paddingTop: 10,
373
+ paddingBottom: 4,
374
+ paddingLeft: 16,
375
+ paddingRight: 16,
376
+ fontSize: 15,
377
+ fontWeight: 600,
378
+ lineHeight: `20px`,
379
+ whiteSpace: "nowrap",
380
+ overflow: "hidden",
381
+ textOverflow: "ellipsis"
382
+ };
383
+ $[2] = t2;
384
+ } else t2 = $[2];
385
+ const titleStyle = t2;
386
+ const t3 = layout.height - 10 - 20 - 4 - 16;
387
+ let t4;
388
+ if ($[3] !== t3) {
389
+ t4 = {
390
+ maxHeight: t3,
391
+ overflow: "hidden",
392
+ paddingLeft: 16,
393
+ paddingRight: 16,
394
+ paddingBottom: 16
395
+ };
396
+ $[3] = t3;
397
+ $[4] = t4;
398
+ } else t4 = $[4];
399
+ const descriptionStyle = t4;
400
+ let t5;
401
+ if ($[5] !== title) {
402
+ t5 = /* @__PURE__ */ jsx(Box$1, {
403
+ style: titleStyle,
404
+ children: title
405
+ });
406
+ $[5] = title;
407
+ $[6] = t5;
408
+ } else t5 = $[6];
409
+ let t6;
410
+ if ($[7] !== description || $[8] !== descriptionStyle) {
411
+ t6 = /* @__PURE__ */ jsx(Markdown, {
412
+ value: description,
413
+ hideIfEmpty: true,
414
+ fontSize: "sm",
415
+ textScale: .9,
416
+ style: descriptionStyle
417
+ });
418
+ $[7] = description;
419
+ $[8] = descriptionStyle;
420
+ $[9] = t6;
421
+ } else t6 = $[9];
422
+ let t7;
423
+ if ($[10] !== panelStyle || $[11] !== t5 || $[12] !== t6) {
424
+ t7 = /* @__PURE__ */ jsxs(Box$1, {
425
+ "data-testid": "export-description",
426
+ style: panelStyle,
427
+ children: [t5, t6]
428
+ });
429
+ $[10] = panelStyle;
430
+ $[11] = t5;
431
+ $[12] = t6;
432
+ $[13] = t7;
433
+ } else t7 = $[13];
434
+ return t7;
435
+ }
436
+ /**
437
+ * Renders the optional notation panel next to the exported diagram.
438
+ */
439
+ function ExportNotationPanel(t0) {
440
+ const $ = c(12);
441
+ const { entries, layout } = t0;
442
+ let t1;
443
+ if ($[0] !== layout) {
444
+ t1 = {
445
+ ...layout,
446
+ position: "absolute",
447
+ boxSizing: "border-box",
448
+ overflow: "hidden",
449
+ border: "1px solid var(--mantine-color-default-border)",
450
+ borderRadius: 6,
451
+ background: "var(--mantine-color-body)",
452
+ boxShadow: "0 4px 18px rgb(0 0 0 / 14%)",
453
+ color: "var(--mantine-color-text)"
454
+ };
455
+ $[0] = layout;
456
+ $[1] = t1;
457
+ } else t1 = $[1];
458
+ const panelStyle = t1;
459
+ let t2;
460
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
461
+ t2 = {
462
+ height: 36,
463
+ display: "flex",
464
+ alignItems: "center",
465
+ paddingLeft: 12,
466
+ paddingRight: 12,
467
+ fontSize: 13,
468
+ fontWeight: 600,
469
+ borderBottom: "1px solid var(--mantine-color-default-border)"
470
+ };
471
+ $[2] = t2;
472
+ } else t2 = $[2];
473
+ const headerStyle = t2;
474
+ let t3;
475
+ if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
476
+ t3 = /* @__PURE__ */ jsx(Box$1, {
477
+ style: headerStyle,
478
+ children: "Notation"
479
+ });
480
+ $[3] = t3;
481
+ } else t3 = $[3];
482
+ let t4;
483
+ if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
484
+ t4 = { padding: 12 };
485
+ $[4] = t4;
486
+ } else t4 = $[4];
487
+ let t5;
488
+ if ($[5] !== entries) {
489
+ t5 = entries.map(_temp);
490
+ $[5] = entries;
491
+ $[6] = t5;
492
+ } else t5 = $[6];
493
+ let t6;
494
+ if ($[7] !== t5) {
495
+ t6 = /* @__PURE__ */ jsx(Box$1, {
496
+ style: t4,
497
+ children: t5
498
+ });
499
+ $[7] = t5;
500
+ $[8] = t6;
501
+ } else t6 = $[8];
502
+ let t7;
503
+ if ($[9] !== panelStyle || $[10] !== t6) {
504
+ t7 = /* @__PURE__ */ jsxs(Box$1, {
505
+ "data-testid": "export-notation",
506
+ style: panelStyle,
507
+ children: [t3, t6]
508
+ });
509
+ $[9] = panelStyle;
510
+ $[10] = t6;
511
+ $[11] = t7;
512
+ } else t7 = $[11];
513
+ return t7;
514
+ }
515
+ function _temp(entry, index) {
516
+ return /* @__PURE__ */ jsx(ExportNotationItem, { entry }, `${entry.title}-${index}`);
517
+ }
518
+ /**
519
+ * Renders one notation entry with its representative element shape and labels.
520
+ */
521
+ function ExportNotationItem(t0) {
522
+ const $ = c(30);
523
+ const { entry } = t0;
524
+ const styles = useLikeC4Styles();
525
+ let t1;
526
+ if ($[0] !== entry.color || $[1] !== styles) {
527
+ t1 = styles.colors(entry.color);
528
+ $[0] = entry.color;
529
+ $[1] = styles;
530
+ $[2] = t1;
531
+ } else t1 = $[2];
532
+ const elementColors = t1.elements;
533
+ let t2;
534
+ if ($[3] !== elementColors.fill || $[4] !== elementColors.hiContrast || $[5] !== elementColors.loContrast || $[6] !== elementColors.stroke) {
535
+ t2 = {
536
+ "--likec4-palette-fill": elementColors.fill,
537
+ "--likec4-palette-stroke": elementColors.stroke,
538
+ "--likec4-palette-hiContrast": elementColors.hiContrast,
539
+ "--likec4-palette-loContrast": elementColors.loContrast,
540
+ display: "grid",
541
+ gridTemplateColumns: "64px 1fr",
542
+ columnGap: 10,
543
+ alignItems: "center",
544
+ height: 68,
545
+ overflow: "hidden"
546
+ };
547
+ $[3] = elementColors.fill;
548
+ $[4] = elementColors.hiContrast;
549
+ $[5] = elementColors.loContrast;
550
+ $[6] = elementColors.stroke;
551
+ $[7] = t2;
552
+ } else t2 = $[7];
553
+ const itemStyle = t2;
554
+ let t3;
555
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
556
+ t3 = {
557
+ display: "flex",
558
+ flexWrap: "wrap",
559
+ gap: 3,
560
+ marginBottom: 5,
561
+ maxHeight: 31,
562
+ overflow: "hidden"
563
+ };
564
+ $[8] = t3;
565
+ } else t3 = $[8];
566
+ const kindsStyle = t3;
567
+ let t4;
568
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
569
+ t4 = {
570
+ display: "inline-flex",
571
+ alignItems: "center",
572
+ height: 14,
573
+ maxWidth: "100%",
574
+ paddingLeft: 4,
575
+ paddingRight: 4,
576
+ borderRadius: 2,
577
+ background: "var(--likec4-palette-fill)",
578
+ color: "var(--likec4-palette-hiContrast)",
579
+ fontSize: 9.5,
580
+ fontWeight: 500,
581
+ lineHeight: 1,
582
+ textTransform: "lowercase",
583
+ whiteSpace: "nowrap"
584
+ };
585
+ $[9] = t4;
586
+ } else t4 = $[9];
587
+ const kindStyle = t4;
588
+ let t5;
589
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
590
+ t5 = {
591
+ overflow: "hidden",
592
+ display: "-webkit-box",
593
+ WebkitBoxOrient: "vertical",
594
+ WebkitLineClamp: 2,
595
+ fontSize: 13,
596
+ fontWeight: 500,
597
+ lineHeight: 1.2
598
+ };
599
+ $[10] = t5;
600
+ } else t5 = $[10];
601
+ const titleStyle = t5;
602
+ const t6 = entry.color;
603
+ let t7;
604
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
605
+ t7 = {
606
+ position: "relative",
607
+ width: 56,
608
+ height: 38
609
+ };
610
+ $[11] = t7;
611
+ } else t7 = $[11];
612
+ let t8;
613
+ if ($[12] !== entry.shape) {
614
+ t8 = /* @__PURE__ */ jsx(Box$1, {
615
+ style: t7,
616
+ children: /* @__PURE__ */ jsx(ElementShape, {
617
+ data: {
618
+ shape: entry.shape,
619
+ width: 300,
620
+ height: 200
621
+ },
622
+ showSelectionOutline: false
623
+ })
624
+ });
625
+ $[12] = entry.shape;
626
+ $[13] = t8;
627
+ } else t8 = $[13];
628
+ let t9;
629
+ if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
630
+ t9 = { minWidth: "0" };
631
+ $[14] = t9;
632
+ } else t9 = $[14];
633
+ let t10;
634
+ if ($[15] !== entry.kinds) {
635
+ let t11;
636
+ if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
637
+ t11 = (kind) => /* @__PURE__ */ jsx(Box$1, {
638
+ as: "span",
639
+ style: kindStyle,
640
+ children: kind
641
+ }, kind);
642
+ $[17] = t11;
643
+ } else t11 = $[17];
644
+ t10 = entry.kinds.map(t11);
645
+ $[15] = entry.kinds;
646
+ $[16] = t10;
647
+ } else t10 = $[16];
648
+ let t11;
649
+ if ($[18] !== t10) {
650
+ t11 = /* @__PURE__ */ jsx(Box$1, {
651
+ style: kindsStyle,
652
+ children: t10
653
+ });
654
+ $[18] = t10;
655
+ $[19] = t11;
656
+ } else t11 = $[19];
657
+ let t12;
658
+ if ($[20] !== entry.title) {
659
+ t12 = /* @__PURE__ */ jsx(Box$1, {
660
+ style: titleStyle,
661
+ children: entry.title
662
+ });
663
+ $[20] = entry.title;
664
+ $[21] = t12;
665
+ } else t12 = $[21];
666
+ let t13;
667
+ if ($[22] !== t11 || $[23] !== t12) {
668
+ t13 = /* @__PURE__ */ jsxs(Box$1, {
669
+ css: t9,
670
+ children: [t11, t12]
671
+ });
672
+ $[22] = t11;
673
+ $[23] = t12;
674
+ $[24] = t13;
675
+ } else t13 = $[24];
676
+ let t14;
677
+ if ($[25] !== entry.color || $[26] !== itemStyle || $[27] !== t13 || $[28] !== t8) {
678
+ t14 = /* @__PURE__ */ jsxs(Box$1, {
679
+ "data-likec4-color": t6,
680
+ style: itemStyle,
681
+ children: [t8, t13]
682
+ });
683
+ $[25] = entry.color;
684
+ $[26] = itemStyle;
685
+ $[27] = t13;
686
+ $[28] = t8;
687
+ $[29] = t14;
688
+ } else t14 = $[29];
689
+ return t14;
690
+ }
691
+ export { ExportPage };
@@ -0,0 +1,23 @@
1
+ import "../chunks/rolldown-runtime.mjs";
2
+ import { c } from "react/compiler-runtime";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { LikeC4ProjectsOverview, useChangeLikeC4Project } from "likec4/react";
5
+ import { useLikeC4ProjectsOverview } from "likec4:projects-overview";
6
+ // src/pages/ProjectsOverview.tsx
7
+ function ProjectsOverviewPage() {
8
+ const $ = c(3);
9
+ const changeProject = useChangeLikeC4Project();
10
+ const projectsOverview = useLikeC4ProjectsOverview();
11
+ let t0;
12
+ if ($[0] !== changeProject || $[1] !== projectsOverview) {
13
+ t0 = /* @__PURE__ */ jsx(LikeC4ProjectsOverview, {
14
+ view: projectsOverview,
15
+ onNavigateToProject: changeProject
16
+ });
17
+ $[0] = changeProject;
18
+ $[1] = projectsOverview;
19
+ $[2] = t0;
20
+ } else t0 = $[2];
21
+ return t0;
22
+ }
23
+ export { ProjectsOverviewPage };