@likec4/diagram 1.46.3 → 1.47.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 (68) hide show
  1. package/bundle/index.js +1548 -595
  2. package/dist/LikeC4Diagram.d.ts +1 -1
  3. package/dist/LikeC4Diagram.js +2 -2
  4. package/dist/LikeC4Diagram.props.d.ts +1 -1
  5. package/dist/LikeC4ProjectsOverview.d.ts +7 -0
  6. package/dist/LikeC4ProjectsOverview.js +32 -0
  7. package/dist/base-primitives/Markdown.d.ts +1 -1
  8. package/dist/base-primitives/compound/CompoundNodeContainer.d.ts +4 -3
  9. package/dist/base-primitives/compound/actionbtns.css.d.ts +1 -1
  10. package/dist/base-primitives/element/ElementNodeContainer.js +2 -3
  11. package/dist/base-primitives/element/ElementShape.js +109 -20
  12. package/dist/components/NavigationPanel.d.ts +11 -0
  13. package/dist/components/NavigationPanel.js +69 -0
  14. package/dist/context/DiagramEventHandlers.js +1 -1
  15. package/dist/context/IconRenderer.js +4 -1
  16. package/dist/hooks/useLikeC4Project.js +10 -2
  17. package/dist/hooks/useLikeC4Styles.js +0 -3
  18. package/dist/index.d.ts +2 -1
  19. package/dist/index.js +2 -1
  20. package/dist/likec4diagram/DiagramXYFlow.js +1 -0
  21. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +3 -3
  22. package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +1 -38
  23. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +29 -14
  24. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +9 -5
  25. package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts +6 -1
  26. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +44 -8
  27. package/dist/likec4diagram/xyflow-sequence/utils.d.ts +1 -1
  28. package/dist/navigationpanel/NavigationPanelControls.js +2 -2
  29. package/dist/navigationpanel/_common.d.ts +1 -1
  30. package/dist/navigationpanel/controls/LogoButton.d.ts +1 -0
  31. package/dist/navigationpanel/controls/{BurgerButton.js → LogoButton.js} +5 -5
  32. package/dist/navigationpanel/controls/index.d.ts +1 -1
  33. package/dist/navigationpanel/styles.css.d.ts +1 -1
  34. package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js +14 -0
  35. package/dist/overlays/relationships-browser/custom/edgeTypes.js +0 -1
  36. package/dist/projects-overview/ProjectsOverview.d.ts +13 -0
  37. package/dist/projects-overview/ProjectsOverview.js +57 -0
  38. package/dist/projects-overview/ProjectsOverviewXY.d.ts +17 -0
  39. package/dist/projects-overview/ProjectsOverviewXY.js +98 -0
  40. package/dist/projects-overview/_types.d.ts +34 -0
  41. package/dist/projects-overview/actor.d.ts +121 -0
  42. package/dist/projects-overview/actor.js +382 -0
  43. package/dist/projects-overview/context.d.ts +4 -0
  44. package/dist/projects-overview/context.js +9 -0
  45. package/dist/projects-overview/custom/edgeTypes.d.ts +3 -0
  46. package/dist/projects-overview/custom/edgeTypes.js +23 -0
  47. package/dist/projects-overview/custom/index.d.ts +2 -0
  48. package/dist/projects-overview/custom/nodeTypes.d.ts +2 -0
  49. package/dist/projects-overview/custom/nodeTypes.js +45 -0
  50. package/dist/projects-overview/custom/styles.css.d.ts +1 -0
  51. package/dist/projects-overview/hooks.d.ts +5 -0
  52. package/dist/projects-overview/hooks.js +14 -0
  53. package/dist/projects-overview/index.d.ts +1 -0
  54. package/dist/projects-overview/layouted-to-xyflow.d.ts +6 -0
  55. package/dist/projects-overview/layouted-to-xyflow.js +49 -0
  56. package/dist/projects-overview/panel/ProjectsOverviewPanel.d.ts +1 -0
  57. package/dist/projects-overview/panel/ProjectsOverviewPanel.js +11 -0
  58. package/dist/projects-overview/persistence.d.ts +5 -0
  59. package/dist/projects-overview/persistence.js +24 -0
  60. package/dist/search/components/_shared.css.d.ts +1 -1
  61. package/dist/styles.css2.js +1 -1
  62. package/package.json +10 -10
  63. package/panda.buildinfo.json +62 -29
  64. package/styles-min.css +1 -1
  65. package/styles.css +1 -1
  66. package/dist/base-primitives/element/ElementNodeContainer.css.d.ts +0 -1
  67. package/dist/base-primitives/element/ElementNodeContainer.css.js +0 -39
  68. package/dist/navigationpanel/controls/BurgerButton.d.ts +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@likec4/diagram",
3
- "version": "1.46.3",
3
+ "version": "1.47.0",
4
4
  "license": "MIT",
5
5
  "bugs": "https://github.com/likec4/likec4/issues",
6
6
  "homepage": "https://likec4.dev",
@@ -73,10 +73,10 @@
73
73
  "@xstate/react": "6.0.0",
74
74
  "@xyflow/react": "12.10.0",
75
75
  "@xyflow/system": "0.0.74",
76
- "immer": "^11.0.1",
76
+ "immer": "^11.1.0",
77
77
  "bezier-js": "^6.1.4",
78
78
  "d3-shape": "^3.2.0",
79
- "fast-equals": "^5.4.0",
79
+ "fast-equals": "^6.0.0",
80
80
  "khroma": "2.1.0",
81
81
  "motion": "^12.23.26",
82
82
  "nanostores": "1.1.0",
@@ -85,11 +85,11 @@
85
85
  "remeda": "^2.32.0",
86
86
  "type-fest": "^4.41.0",
87
87
  "xstate": "5.24.0",
88
- "@likec4/core": "1.46.3",
89
- "@likec4/styles": "1.46.3"
88
+ "@likec4/core": "1.47.0",
89
+ "@likec4/styles": "1.47.0"
90
90
  },
91
91
  "peerDependencies": {
92
- "@pandacss/dev": "^1.7.1",
92
+ "@pandacss/dev": "^1.7.2",
93
93
  "@types/react": "^18.x || ^19.x",
94
94
  "@types/react-dom": "^18.x || ^19.x",
95
95
  "react": "^18.x || ^19.x",
@@ -107,7 +107,7 @@
107
107
  }
108
108
  },
109
109
  "devDependencies": {
110
- "@pandacss/dev": "^1.7.1",
110
+ "@pandacss/dev": "^1.7.2",
111
111
  "@statelyai/inspect": "^0.4.0",
112
112
  "@tabler/icons-react": "3.36.0",
113
113
  "@types/bezier-js": "^4.1.3",
@@ -116,7 +116,7 @@
116
116
  "@types/react": "19.2.7",
117
117
  "@types/react-dom": "19.2.3",
118
118
  "@vitejs/plugin-react": "^5.1.2",
119
- "oxlint": "1.33.0",
119
+ "oxlint": "1.35.0",
120
120
  "postcss": "8.5.6",
121
121
  "react": "19.2.3",
122
122
  "react-dom": "19.2.3",
@@ -126,8 +126,8 @@
126
126
  "vitest": "4.0.16",
127
127
  "wireit": "0.14.12",
128
128
  "zx": "8.8.5",
129
- "@likec4/devops": "1.42.0",
130
- "@likec4/tsconfig": "1.46.1"
129
+ "@likec4/tsconfig": "1.46.1",
130
+ "@likec4/devops": "1.42.0"
131
131
  },
132
132
  "scripts": {
133
133
  "typecheck": "tsc --build --verbose",
package/panda.buildinfo.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "schemaVersion": "1.7.1",
2
+ "schemaVersion": "1.7.2",
3
3
  "styles": {
4
4
  "atomic": [
5
5
  "background]___[value:dots",
@@ -69,6 +69,10 @@
69
69
  "width]___[value:12",
70
70
  "fill]___[value:[#FCFBF7]",
71
71
  "fill]___[value:[#222221]]___[cond:_light",
72
+ "display]___[value:none",
73
+ "display]___[value:block]___[cond:@/md",
74
+ "display]___[value:block",
75
+ "display]___[value:none]___[cond:@/md",
72
76
  "height]___[value:30px",
73
77
  "paddingLeft]___[value:sm",
74
78
  "paddingRight]___[value:1",
@@ -126,8 +130,6 @@
126
130
  "pointerEvents]___[value:all",
127
131
  "userSelect]___[value:none",
128
132
  "maxWidth]___[value:200px",
129
- "display]___[value:none",
130
- "display]___[value:block]___[cond:@/md",
131
133
  "gap]___[value:1",
132
134
  "flexShrink]___[value:1",
133
135
  "flexGrow]___[value:1",
@@ -230,20 +232,11 @@
230
232
  "top]___[value:[14px]]___[cond:_shapeStorage",
231
233
  "top]___[value:[1px]]___[cond:_shapeQueue",
232
234
  "right]___[value:3]___[cond:_shapeQueue",
233
- "width]___[value:full",
234
- "height]___[value:full",
235
- "outline]___[value:none]___[cond:_focusVisible",
236
- "pointerEvents]___[value:all]___[cond:_whenSelectable",
237
- "content]___[value:\" \"]___[cond:_whenSelectable<___>_before",
238
- "position]___[value:absolute]___[cond:_whenSelectable<___>_before",
239
- "top]___[value:[calc(100% - 4px)]]___[cond:_whenSelectable<___>_before",
240
- "left]___[value:0]___[cond:_whenSelectable<___>_before",
241
- "width]___[value:full]___[cond:_whenSelectable<___>_before",
242
- "height]___[value:24px]___[cond:_whenSelectable<___>_before",
243
- "background]___[value:transparent]___[cond:_whenSelectable<___>_before",
244
- "pointerEvents]___[value:all]___[cond:_whenSelectable<___>_before",
245
- "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
246
- "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
235
+ "borderStyle]___[value:solid]___[cond:&",
236
+ "borderWidth]___[value:3px]___[cond:&",
237
+ "borderColor]___[value:var(--likec4-palette-stroke)]___[cond:&",
238
+ "--likec4-outline-size]___[value:6px]___[cond:&",
239
+ "borderRadius]___[value:10px]___[cond:& .likec4-shape-outline",
247
240
  "alignItems]___[value:flex-end",
248
241
  "justifyItems]___[value:stretch",
249
242
  "bottom]___[value:0",
@@ -297,7 +290,6 @@
297
290
  "borderLeftColor]___[value:mantine.colors.gray[3]",
298
291
  "borderLeftColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
299
292
  "opacity]___[value:0.5",
300
- "display]___[value:block",
301
293
  "fontSize]___[value:xxs",
302
294
  "lineHeight]___[value:sm",
303
295
  "color]___[value:mantine.colors.dimmed",
@@ -310,6 +302,8 @@
310
302
  "color]___[value:var(--likec4-palette-hiContrast)]___[cond:_light",
311
303
  "color]___[value:var(--likec4-palette-loContrast)]___[cond:_dark",
312
304
  "whiteSpaceCollapse]___[value:preserve-breaks",
305
+ "width]___[value:full",
306
+ "height]___[value:full",
313
307
  "border]___[value:default",
314
308
  "borderWidth]___[value:4",
315
309
  "fontSize]___[value:xs",
@@ -329,10 +323,6 @@
329
323
  "paddingLeft]___[value:3",
330
324
  "color]___[value:likec4.panel.text",
331
325
  "color]___[value:green",
332
- "padding]___[value:0.5",
333
- "width]___[value:[20px]",
334
- "width]___[value:[64px]]___[cond:@/md",
335
- "display]___[value:none]___[cond:@/md",
336
326
  "position]___[value:bottom-end",
337
327
  "display]___[value:flex]___[cond:@/xs",
338
328
  "backgroundColor]___[value:likec4.panel.action.bg.hover]___[cond:_hover",
@@ -359,6 +349,9 @@
359
349
  "padding]___[value:1.5",
360
350
  "marginTop]___[value:4",
361
351
  "marginTop]___[value:xs",
352
+ "padding]___[value:0.5",
353
+ "width]___[value:[20px]",
354
+ "width]___[value:[64px]]___[cond:@/md",
362
355
  "layerStyle]___[value:likec4.panel.action.filled",
363
356
  "paddingInline]___[value:xxs",
364
357
  "backgroundColor]___[value:none",
@@ -653,6 +646,8 @@
653
646
  "offset]___[value:4",
654
647
  "stroke]___[value:3.5",
655
648
  "flex]___[value:1 0 auto",
649
+ "border]___[value:3px dashed",
650
+ "borderRadius]___[value:md",
656
651
  "marginBottom]___[value:2",
657
652
  "containerName]___[value:likec4-tree",
658
653
  "containerType]___[value:inline-size",
@@ -730,7 +725,6 @@
730
725
  "fontSize]___[value:12px",
731
726
  "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
732
727
  "border]___[value:2px dashed",
733
- "borderRadius]___[value:md",
734
728
  "fontSize]___[value:md",
735
729
  "paddingBlock]___[value:xl",
736
730
  "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
@@ -842,17 +836,14 @@
842
836
  "borderWidth]___[value:3px",
843
837
  "borderStyle]___[value:dashed",
844
838
  "strokeWidth]___[value:5",
845
- "border]___[value:3px dashed",
846
- "position]___[value:right-end",
847
- "paddingInline]___[value:3",
839
+ "paddingInline]___[value:6",
848
840
  "height]___[value:xs",
849
841
  "justifyContent]___[value:flex-start",
850
842
  "position]___[value:left-start",
843
+ "paddingInline]___[value:8",
851
844
  "paddingInline]___[value:5",
852
845
  "paddingBottom]___[value:8",
853
846
  "paddingTop]___[value:4",
854
- "gap]___[value:6px",
855
- "paddingInline]___[value:4px",
856
847
  "maxWidth]___[value:220px"
857
848
  ],
858
849
  "recipes": {
@@ -891,6 +882,22 @@
891
882
  "*]___[value:true]___[recipe:navigationLink",
892
883
  "*]___[value:false]___[recipe:navigationLink"
893
884
  ],
885
+ "navigationPanel": [
886
+ "size]___[value:md]___[recipe:navigationPanel",
887
+ "size]___[value:lg]___[recipe:navigationPanel",
888
+ "*]___[value:md]___[recipe:navigationPanel",
889
+ "*]___[value:md]___[cond:xs]___[recipe:navigationPanel",
890
+ "*]___[value:md]___[cond:sm]___[recipe:navigationPanel",
891
+ "*]___[value:md]___[cond:md]___[recipe:navigationPanel",
892
+ "*]___[value:md]___[cond:lg]___[recipe:navigationPanel",
893
+ "*]___[value:md]___[cond:xl]___[recipe:navigationPanel",
894
+ "*]___[value:lg]___[recipe:navigationPanel",
895
+ "*]___[value:lg]___[cond:xs]___[recipe:navigationPanel",
896
+ "*]___[value:lg]___[cond:sm]___[recipe:navigationPanel",
897
+ "*]___[value:lg]___[cond:md]___[recipe:navigationPanel",
898
+ "*]___[value:lg]___[cond:lg]___[recipe:navigationPanel",
899
+ "*]___[value:lg]___[cond:xl]___[recipe:navigationPanel"
900
+ ],
894
901
  "navigationPanelActionIcon": [
895
902
  "variant]___[value:default]___[recipe:navigationPanelActionIcon",
896
903
  "type]___[value:default]___[recipe:navigationPanelActionIcon",
@@ -926,11 +933,37 @@
926
933
  "edgeActionBtn": [],
927
934
  "edgePath": [],
928
935
  "elementNodeData": [],
936
+ "elementNode": [],
929
937
  "elementShapeRecipe": [
938
+ "withBorder]___[value:none]___[recipe:elementShapeRecipe",
939
+ "withBorder]___[value:false]___[recipe:elementShapeRecipe",
930
940
  "shapetype]___[value:html]___[recipe:elementShapeRecipe",
931
941
  "shapetype]___[value:svg]___[recipe:elementShapeRecipe",
932
942
  "*]___[value:html]___[recipe:elementShapeRecipe",
933
- "*]___[value:svg]___[recipe:elementShapeRecipe"
943
+ "*]___[value:html]___[cond:xs]___[recipe:elementShapeRecipe",
944
+ "*]___[value:html]___[cond:sm]___[recipe:elementShapeRecipe",
945
+ "*]___[value:html]___[cond:md]___[recipe:elementShapeRecipe",
946
+ "*]___[value:html]___[cond:lg]___[recipe:elementShapeRecipe",
947
+ "*]___[value:html]___[cond:xl]___[recipe:elementShapeRecipe",
948
+ "*]___[value:svg]___[recipe:elementShapeRecipe",
949
+ "*]___[value:svg]___[cond:xs]___[recipe:elementShapeRecipe",
950
+ "*]___[value:svg]___[cond:sm]___[recipe:elementShapeRecipe",
951
+ "*]___[value:svg]___[cond:md]___[recipe:elementShapeRecipe",
952
+ "*]___[value:svg]___[cond:lg]___[recipe:elementShapeRecipe",
953
+ "*]___[value:svg]___[cond:xl]___[recipe:elementShapeRecipe",
954
+ "withBorder]___[value:true]___[recipe:elementShapeRecipe",
955
+ "*]___[value:true]___[recipe:elementShapeRecipe",
956
+ "*]___[value:true]___[cond:xs]___[recipe:elementShapeRecipe",
957
+ "*]___[value:true]___[cond:sm]___[recipe:elementShapeRecipe",
958
+ "*]___[value:true]___[cond:md]___[recipe:elementShapeRecipe",
959
+ "*]___[value:true]___[cond:lg]___[recipe:elementShapeRecipe",
960
+ "*]___[value:true]___[cond:xl]___[recipe:elementShapeRecipe",
961
+ "*]___[value:false]___[recipe:elementShapeRecipe",
962
+ "*]___[value:false]___[cond:xs]___[recipe:elementShapeRecipe",
963
+ "*]___[value:false]___[cond:sm]___[recipe:elementShapeRecipe",
964
+ "*]___[value:false]___[cond:md]___[recipe:elementShapeRecipe",
965
+ "*]___[value:false]___[cond:lg]___[recipe:elementShapeRecipe",
966
+ "*]___[value:false]___[cond:xl]___[recipe:elementShapeRecipe"
934
967
  ],
935
968
  "likec4tag": [
936
969
  "autoTextColor]___[value:false]___[recipe:likec4tag",