@meshmakers/octo-process-diagrams 3.4.1480 → 3.5.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 (7) hide show
  1. package/README.md +6 -4
  2. package/fesm2022/meshmakers-octo-process-diagrams.mjs +137 -54
  3. package/fesm2022/meshmakers-octo-process-diagrams.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/styles/{_dockview-lcars-theme.scss → _dockview-theme.scss} +77 -92
  6. package/styles/_index.scss +1 -1
  7. package/types/meshmakers-octo-process-diagrams.d.ts +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meshmakers/octo-process-diagrams",
3
- "version": "3.4.1480",
3
+ "version": "3.5.00",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^22.0.0",
6
6
  "@angular/core": "^22.0.0",
package/styles/{_dockview-lcars-theme.scss → _dockview-theme.scss} RENAMED
@@ -1,31 +1,38 @@
1
1
  // ============================================================================
2
- // DOCKVIEW THEME (formerly LCARS-specific — now neutral with host fallbacks)
2
+ // DOCKVIEW THEME — Deep Sea (AB#5526)
3
3
  //
4
4
  // Usage in host application (styles.scss):
5
- // @use '@meshmakers/octo-process-diagrams/styles/dockview-lcars-theme' as dockview;
6
- // @include dockview.lcars-theme();
5
+ // @use '@meshmakers/octo-process-diagrams/styles/dockview-theme' as dockview;
6
+ // @include dockview.dockview-theme();
7
7
  //
8
- // The mixin emits --dv-* variables that reference --theme-* host tokens with
9
- // neutral fallbacks. Hosts that define --theme-* tokens (e.g., octo-mesh-refinery-studio's
10
- // dark/light theme system) get a fully themed dockview; hosts that don't get a
11
- // sensible neutral default. The mixin name `lcars-theme` is preserved for
12
- // backward compatibility; existing `@include dockview.lcars-theme();` calls
13
- // continue to work.
8
+ // The mixin emits --dv-* variables and element overrides that reference the
9
+ // host's --theme-* tokens (surfaces, neutral hairline borders, accent for the
10
+ // active tab, focus and drop targets) with neutral dark fallbacks, so hosts
11
+ // without theme tokens still get a sensible default. Flat: no gradients, no
12
+ // glows, sentence-case tabs and labels in the UI face.
13
+ //
14
+ // The former `_dockview-lcars-theme.scss` alias (`lcars-theme` /
15
+ // `lcars-css-variables`) was removed in AB#5526.
14
16
  // ============================================================================
15
17
 
16
- // Mixin to apply LCARS-style theme to dockview, driven by host --theme-* tokens
17
- @mixin lcars-theme() {
18
- // Override CSS variables for dockview - target the actual dockview elements
18
+ // Mixin to apply the Deep Sea theme to dockview, driven by host --theme-* tokens
19
+ @mixin dockview-theme() {
20
+ // Override CSS variables for dockview - target the actual dockview elements.
21
+ // `mm-dockview` covers hosts that embed the bare wrapper (the Studio's data-flow
22
+ // editor): without it dockview's own theme variables (#f5f5f5 tab strip) showed
23
+ // through in dark mode (AB#5526 visual check). Variables only — element overrides
24
+ // below stay with the designer hosts, embedding pages style their own tabs.
19
25
  mm-process-designer,
20
- mm-symbol-editor {
26
+ mm-symbol-editor,
27
+ mm-dockview {
21
28
  // Panel backgrounds
22
29
  --dv-background-color: var(--theme-bg-app, #07172b);
23
30
  --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
24
31
  --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
25
32
  --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
26
33
  --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
27
- --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
28
- --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
34
+ --dv-icon-hover-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
35
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
29
36
 
30
37
  // Tab colors - active group
31
38
  --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
@@ -40,33 +47,35 @@
40
47
  --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
41
48
 
42
49
  // Borders and separators
43
- --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
50
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
44
51
 
45
52
  // Tab active indicator
46
53
  --dv-tab-active-border-bottom: 2px solid var(--theme-text-accent, #64ceb9);
47
54
 
48
55
  // Drag overlay
49
- --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
50
- --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
56
+ --dv-drag-over-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
57
+ --dv-drag-over-border-color: var(--theme-accent, #64ceb9);
51
58
 
52
59
  // Sash (resizer)
53
- --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
54
- --dv-sash-hover-color: var(--octo-mint, #64ceb9);
60
+ --dv-sash-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
61
+ --dv-sash-hover-color: var(--theme-accent, #64ceb9);
55
62
  }
56
63
 
57
64
  // Direct style overrides for dockview elements (higher specificity)
58
65
  mm-process-designer .dv-dockview,
59
66
  mm-process-designer .dv-grid-view,
60
67
  mm-symbol-editor .dv-dockview,
61
- mm-symbol-editor .dv-grid-view {
68
+ mm-symbol-editor .dv-grid-view,
69
+ mm-dockview .dv-dockview,
70
+ mm-dockview .dv-grid-view {
62
71
  background-color: var(--theme-bg-app, #07172b) !important;
63
72
  --dv-background-color: var(--theme-bg-app, #07172b);
64
73
  --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
65
74
  --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
66
75
  --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
67
76
  --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
68
- --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
69
- --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
77
+ --dv-icon-hover-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
78
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
70
79
  --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
71
80
  --dv-activegroup-hiddenpanel-tab-background-color: var(--theme-bg-surface, #394555);
72
81
  --dv-activegroup-visiblepanel-tab-color: var(--theme-text-accent, #64ceb9);
@@ -75,11 +84,11 @@
75
84
  --dv-inactivegroup-hiddenpanel-tab-background-color: color-mix(in srgb, var(--theme-bg-surface, #394555) 70%, transparent);
76
85
  --dv-inactivegroup-visiblepanel-tab-color: var(--theme-text-secondary, #9292a6);
77
86
  --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
78
- --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
79
- --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
80
- --dv-sash-hover-color: var(--octo-mint, #64ceb9);
81
- --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
82
- --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
87
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
88
+ --dv-sash-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
89
+ --dv-sash-hover-color: var(--theme-accent, #64ceb9);
90
+ --dv-drag-over-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
91
+ --dv-drag-over-border-color: var(--theme-accent, #64ceb9);
83
92
  }
84
93
 
85
94
  // Direct element overrides for tabs and containers
@@ -91,17 +100,15 @@
91
100
 
92
101
  .dv-tabs-and-actions-container {
93
102
  background-color: var(--theme-bg-surface, #394555) !important;
94
- border-bottom: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20)) !important;
103
+ border-bottom: 1px solid var(--theme-border-subtle, rgba(200, 214, 229, 0.08)) !important;
95
104
  }
96
105
 
97
106
  .dv-tab {
98
107
  background-color: var(--theme-bg-surface, #394555) !important;
99
108
  color: var(--theme-text-secondary, #9292a6) !important;
100
- font-family: "Montserrat", "Roboto", sans-serif;
109
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
101
110
  font-weight: 500;
102
- text-transform: uppercase;
103
111
  font-size: 11px;
104
- letter-spacing: 0.5px;
105
112
  transition: all 0.15s ease;
106
113
 
107
114
  &.dv-active-tab {
@@ -111,7 +118,7 @@
111
118
  }
112
119
 
113
120
  &:hover:not(.dv-active-tab) {
114
- background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent) !important;
121
+ background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06)) !important;
115
122
  color: var(--theme-text-primary, #ffffff) !important;
116
123
  }
117
124
  }
@@ -133,47 +140,42 @@
133
140
  }
134
141
 
135
142
  .dv-sash {
136
- background-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20)) !important;
143
+ background-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08)) !important;
137
144
 
138
145
  &:hover,
139
146
  &.dv-active {
140
- background-color: var(--octo-mint, #64ceb9) !important;
141
- box-shadow: 0 0 8px color-mix(in srgb, var(--octo-mint, #64ceb9) 50%, transparent);
147
+ background-color: var(--theme-accent, #64ceb9) !important;
142
148
  }
143
149
  }
144
150
 
145
151
  .dv-drop-target-dropzone {
146
- background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent) !important;
147
- border: 2px dashed var(--octo-mint, #64ceb9) !important;
152
+ background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06)) !important;
153
+ border: 1px dashed var(--theme-accent, #64ceb9) !important;
148
154
  }
149
155
 
150
156
  // Floating overflow dropdown
151
157
  .dv-tabs-overflow-container {
152
158
  background-color: var(--theme-bg-surface, #394555) !important;
153
- border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent) !important;
154
- box-shadow:
155
- var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4)),
156
- 0 0 15px color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent) !important;
159
+ border: 1px solid var(--theme-border-default, rgba(200, 214, 229, 0.14)) !important;
160
+ box-shadow: var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4)) !important;
157
161
  }
158
162
  }
159
163
 
160
- // Additional LCARS styling for dockview elements
164
+ // Additional styling for dockview elements
161
165
  mm-process-designer,
162
166
  mm-symbol-editor {
163
167
  // View menu dropdown styling
164
168
  .view-menu-dropdown {
165
169
  background: var(--theme-bg-elevated, #1f2e40);
166
- border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
167
- box-shadow:
168
- var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4)),
169
- 0 0 15px color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
170
+ border: 1px solid var(--theme-border-default, rgba(200, 214, 229, 0.14));
171
+ box-shadow: var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4));
170
172
  }
171
173
 
172
174
  .view-menu-item {
173
175
  color: var(--theme-text-primary, #ffffff);
174
176
 
175
177
  &:hover {
176
- background: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
178
+ background: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
177
179
  }
178
180
  }
179
181
 
@@ -186,7 +188,7 @@
186
188
  }
187
189
 
188
190
  .view-menu-divider {
189
- background: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
191
+ background: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
190
192
  }
191
193
  }
192
194
 
@@ -221,7 +223,7 @@
221
223
 
222
224
  .no-selection {
223
225
  color: var(--theme-text-secondary, #9292a6);
224
- font-family: "Montserrat", "Roboto", sans-serif;
226
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
225
227
 
226
228
  .hint {
227
229
  color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
@@ -232,12 +234,10 @@
232
234
  .section-header,
233
235
  .panel-section-header {
234
236
  color: var(--theme-text-accent, #64ceb9);
235
- font-family: "Montserrat", "Roboto", sans-serif;
237
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
236
238
  font-weight: 600;
237
- text-transform: uppercase;
238
239
  font-size: 11px;
239
- letter-spacing: 0.5px;
240
- border-bottom: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
240
+ border-bottom: 1px solid var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
241
241
  }
242
242
 
243
243
  // Form inputs
@@ -245,50 +245,36 @@
245
245
  select,
246
246
  textarea {
247
247
  background: var(--theme-bg-input, #07172b);
248
- border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
248
+ border: 1px solid var(--theme-border-default, rgba(200, 214, 229, 0.14));
249
249
  color: var(--theme-text-primary, #ffffff);
250
250
  border-radius: 4px;
251
251
 
252
252
  &:focus {
253
- border-color: var(--octo-mint, #64ceb9);
254
- box-shadow: 0 0 8px color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
253
+ border-color: var(--theme-accent, #64ceb9);
255
254
  outline: none;
256
255
  }
257
256
  }
258
257
 
259
258
  label {
260
259
  color: var(--theme-text-secondary, #9292a6);
261
- font-family: "Montserrat", "Roboto", sans-serif;
260
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
262
261
  font-size: 11px;
263
- text-transform: uppercase;
264
- letter-spacing: 0.5px;
265
262
  }
266
263
 
267
264
  // Buttons in panels
268
265
  button {
269
- background: linear-gradient(
270
- 180deg,
271
- color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent),
272
- color-mix(in srgb, var(--octo-mint, #64ceb9) 5%, transparent)
273
- );
274
- border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
266
+ background: transparent;
267
+ border: 1px solid var(--theme-border-default, rgba(200, 214, 229, 0.14));
275
268
  color: var(--theme-text-accent, #64ceb9);
276
269
  border-radius: 4px;
277
- font-family: "Montserrat", "Roboto", sans-serif;
270
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
278
271
  font-weight: 500;
279
- text-transform: uppercase;
280
272
  font-size: 11px;
281
- letter-spacing: 0.5px;
282
273
  transition: all 0.15s ease;
283
274
 
284
275
  &:hover:not(:disabled) {
285
- background: linear-gradient(
286
- 180deg,
287
- color-mix(in srgb, var(--octo-mint, #64ceb9) 25%, transparent),
288
- color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent)
289
- );
290
- border-color: var(--octo-mint, #64ceb9);
291
- box-shadow: 0 0 10px color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
276
+ background: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
277
+ border-color: var(--theme-accent, #64ceb9);
292
278
  }
293
279
 
294
280
  &:disabled {
@@ -302,16 +288,15 @@
302
288
  mm-symbols-panel {
303
289
  .palette-category {
304
290
  background: transparent;
305
- border-bottom: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
291
+ border-bottom: 1px solid var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
306
292
 
307
293
  .category-header {
308
294
  color: var(--theme-text-secondary, #9292a6);
309
- font-family: "Montserrat", "Roboto", sans-serif;
295
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
310
296
  font-size: 11px;
311
- text-transform: uppercase;
312
297
 
313
298
  &:hover {
314
- background: color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
299
+ background: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
315
300
  }
316
301
  }
317
302
 
@@ -322,14 +307,14 @@
322
307
 
323
308
  .palette-item {
324
309
  background: color-mix(in srgb, var(--theme-bg-surface, #394555) 50%, transparent);
325
- border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
310
+ border: 1px solid var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
326
311
  border-radius: 4px;
327
312
  color: var(--theme-text-primary, #ffffff);
328
313
  transition: all 0.15s ease;
329
314
 
330
315
  &:hover {
331
- background: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
332
- border-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 40%, transparent);
316
+ background: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
317
+ border-color: var(--theme-border-default, rgba(200, 214, 229, 0.14));
333
318
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
334
319
  }
335
320
 
@@ -339,7 +324,7 @@
339
324
  }
340
325
 
341
326
  svg {
342
- stroke: var(--octo-mint, #64ceb9);
327
+ stroke: var(--theme-accent, #64ceb9);
343
328
  fill: none;
344
329
  }
345
330
  }
@@ -350,14 +335,14 @@
350
335
  // Add these CSS variables to your :root or component host. These reference
351
336
  // --theme-* host tokens with neutral dark fallbacks, so the result adapts to
352
337
  // the host's active theme (or stays dark if no host theme is defined).
353
- @mixin lcars-css-variables() {
338
+ @mixin dockview-css-variables() {
354
339
  --dv-background-color: var(--theme-bg-app, #07172b);
355
340
  --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
356
341
  --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
357
342
  --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
358
343
  --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
359
- --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
360
- --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
344
+ --dv-icon-hover-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
345
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
361
346
  --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
362
347
  --dv-activegroup-hiddenpanel-tab-background-color: var(--theme-bg-surface, #394555);
363
348
  --dv-activegroup-visiblepanel-tab-color: var(--theme-text-accent, #64ceb9);
@@ -366,10 +351,10 @@
366
351
  --dv-inactivegroup-hiddenpanel-tab-background-color: color-mix(in srgb, var(--theme-bg-surface, #394555) 70%, transparent);
367
352
  --dv-inactivegroup-visiblepanel-tab-color: var(--theme-text-secondary, #9292a6);
368
353
  --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
369
- --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
354
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
370
355
  --dv-tab-active-border-bottom: 2px solid var(--theme-text-accent, #64ceb9);
371
- --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
372
- --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
373
- --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
374
- --dv-sash-hover-color: var(--octo-mint, #64ceb9);
356
+ --dv-drag-over-background-color: var(--theme-bg-hover, rgba(200, 214, 229, 0.06));
357
+ --dv-drag-over-border-color: var(--theme-accent, #64ceb9);
358
+ --dv-sash-color: var(--theme-border-subtle, rgba(200, 214, 229, 0.08));
359
+ --dv-sash-hover-color: var(--theme-accent, #64ceb9);
375
360
  }
package/styles/_index.scss CHANGED
@@ -2,4 +2,4 @@
2
2
  // OCTO PROCESS DIAGRAMS - STYLES INDEX
3
3
  // ============================================================================
4
4
 
5
- @forward 'dockview-lcars-theme';
5
+ @forward 'dockview-theme';
package/types/meshmakers-octo-process-diagrams.d.ts CHANGED
@@ -7,7 +7,7 @@ import { SafeHtml } from '@angular/platform-browser';
7
7
  import { SerializedDockview, DockviewApi, DockviewDidDropEvent, DockviewWillDropEvent } from 'dockview-core';
8
8
  import { CommandItemExecuteEventArgs } from '@meshmakers/shared-services';
9
9
  import { Observable } from 'rxjs';
10
- import { DataSourceBase, FetchDataOptions, FetchResult, HasUnsavedChanges } from '@meshmakers/shared-ui';
10
+ import { DataSourceBase, FetchDataOptions, FetchResult, MmAction, HasUnsavedChanges } from '@meshmakers/shared-ui';
11
11
  import * as Types from '@meshmakers/octo-services';
12
12
  import * as Apollo from 'apollo-angular';
13
13
 
@@ -6543,6 +6543,9 @@ declare class SymbolLibraryDetailComponent implements OnInit {
6543
6543
  private normalizePrimitives;
6544
6544
  private getPrimitiveBoundsForImport;
6545
6545
  private offsetPrimitive;
6546
+ /** Row actions of a symbol card (AB#5580): Edit, Delete (danger; disabled with reason in read-only libraries). */
6547
+ protected readonly symbolActions: _angular_core.Signal<MmAction<"delete" | "edit">[]>;
6548
+ protected onSymbolAction(id: 'edit' | 'delete', symbol: SymbolDefinition): void;
6546
6549
  protected deleteSymbol(symbol: SymbolDefinition): Promise<void>;
6547
6550
  /**
6548
6551
  * Convert points array to SVG points string.