@adcops/autocore-react 3.5.13 → 3.6.3

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 (42) hide show
  1. package/dist/components/tis-editor/DeleteMethodDialog.d.ts +43 -0
  2. package/dist/components/tis-editor/DeleteMethodDialog.d.ts.map +1 -0
  3. package/dist/components/tis-editor/DeleteMethodDialog.js +1 -0
  4. package/dist/components/tis-editor/MethodTransfer.d.ts +69 -0
  5. package/dist/components/tis-editor/MethodTransfer.d.ts.map +1 -0
  6. package/dist/components/tis-editor/MethodTransfer.js +1 -0
  7. package/dist/components/tis-editor/TisConfigEditor.css +31 -0
  8. package/dist/components/tis-editor/TisConfigEditor.d.ts +9 -1
  9. package/dist/components/tis-editor/TisConfigEditor.d.ts.map +1 -1
  10. package/dist/components/tis-editor/TisConfigEditor.js +1 -1
  11. package/dist/components/tis-editor/editor/IdentitySection.d.ts.map +1 -1
  12. package/dist/components/tis-editor/editor/IdentitySection.js +1 -1
  13. package/dist/components/tis-editor/types.d.ts +11 -0
  14. package/dist/components/tis-editor/types.d.ts.map +1 -1
  15. package/dist/components/varpick/VariableInput.d.ts.map +1 -1
  16. package/dist/components/varpick/VariableInput.js +1 -1
  17. package/dist/components/varpick/VariablePicker.d.ts.map +1 -1
  18. package/dist/components/varpick/VariablePicker.js +1 -1
  19. package/dist/components/varpick/varpick.css +84 -30
  20. package/dist/hooks/index.d.ts +2 -0
  21. package/dist/hooks/index.d.ts.map +1 -1
  22. package/dist/hooks/index.js +1 -1
  23. package/dist/hooks/useMethodSequence.d.ts +60 -0
  24. package/dist/hooks/useMethodSequence.d.ts.map +1 -0
  25. package/dist/hooks/useMethodSequence.js +1 -0
  26. package/package.json +2 -1
  27. package/src/components/tis-editor/DeleteMethodDialog.tsx +162 -0
  28. package/src/components/tis-editor/MethodTransfer.ts +138 -0
  29. package/src/components/tis-editor/TisConfigEditor.css +31 -0
  30. package/src/components/tis-editor/TisConfigEditor.tsx +305 -7
  31. package/src/components/tis-editor/editor/IdentitySection.tsx +33 -1
  32. package/src/components/tis-editor/types.ts +11 -0
  33. package/src/components/varpick/VariableInput.tsx +9 -2
  34. package/src/components/varpick/VariablePicker.tsx +4 -0
  35. package/src/components/varpick/varpick.css +84 -30
  36. package/src/hooks/index.ts +4 -0
  37. package/src/hooks/useMethodSequence.ts +128 -0
  38. package/tools/tests/dist/{TestFieldDialog-C4mKVh7q.js → TestFieldDialog-Dph2oPfe.js} +159 -2
  39. package/tools/tests/dist/autocore-react.css +84 -30
  40. package/tools/tests/dist/tis-editor.entry.js +1 -1
  41. package/tools/tests/dist/varpick.entry.js +1 -1
  42. package/tools/tests/varpick.test.mjs +12 -0
package/tools/tests/dist/autocore-react.css CHANGED
@@ -90,12 +90,66 @@
90
90
  /*
91
91
  * Variable picker.
92
92
  *
93
- * Colours come from the PrimeReact theme's variables so the dialog matches
94
- * whatever theme the machine is running, light or dark. Every value has a
95
- * literal fallback: an un-themed host (the playground, a test harness) must
96
- * still render legible text rather than black on black.
93
+ * ## The token bridge
94
+ *
95
+ * Every colour resolves `--ac-*` first, then the PrimeReact theme variable,
96
+ * then a literal. That ordering is the whole point:
97
+ *
98
+ * - **`--ac-*`** is autocore's own design-token layer, which 4.0 supplies.
99
+ * When it exists, this file needs no edit to follow it.
100
+ * - **PrimeReact's `--surface-*` / `--text-color`** is what 3.5 actually
101
+ * defines today, so the picker matches whatever theme the machine runs,
102
+ * light or dark.
103
+ * - **The literal** keeps an un-themed host legible — the playground, the
104
+ * jsdom test harness — rather than rendering black on black.
105
+ *
106
+ * The token NAMES and their fallbacks are copied deliberately from
107
+ * `@adcops/autocore-seq-react`'s `styles.css`. The sequence editor's picker and
108
+ * this one sit one tab apart doing the identical thing; if they read different
109
+ * token names, 4.0 would have to satisfy two sets and the two panels could
110
+ * drift to different colours while both looked "correct".
111
+ *
112
+ * ## Why the tokens are declared twice
113
+ *
114
+ * The field lives inside the TIS editor's form, but PrimeReact renders the
115
+ * Dialog through a PORTAL to `<body>` — so the two halves are not in one
116
+ * subtree and a single scoping root cannot cover both. Hence the declaration on
117
+ * `.ac-varpick` (the dialog, which passes that className) and on
118
+ * `.ac-varpick__input` (the field). Declaring them on `:root` instead would
119
+ * push a dozen names into every consuming application's global scope for the
120
+ * benefit of one component.
97
121
  */
98
122
 
123
+ .ac-varpick,
124
+ .ac-varpick__input {
125
+ /* -- surfaces ---------------------------------------------------- */
126
+ --vp-sunk: var(--ac-surface-sunk, var(--surface-50, #f8f9fa));
127
+ --vp-overlay: var(--ac-surface-overlay, var(--surface-overlay,#ffffff));
128
+ --vp-hover: var(--ac-hover, var(--surface-hover, rgba(127, 127, 127, 0.08)));
129
+
130
+ /* -- ink --------------------------------------------------------- */
131
+ --vp-ink: var(--ac-on-surface, var(--text-color, #111827));
132
+ --vp-ink-muted: var(--ac-on-surface-muted, var(--text-color-secondary, #6b7280));
133
+ --vp-ink-subtle: var(--ac-on-surface-subtle, var(--text-color-secondary, #8b95a1));
134
+
135
+ /* -- lines ------------------------------------------------------- */
136
+ --vp-border: var(--ac-border, var(--surface-border, rgba(127, 127, 127, 0.25)));
137
+ --vp-divider: var(--ac-divider, var(--surface-border, rgba(127, 127, 127, 0.18)));
138
+
139
+ /* -- accents ----------------------------------------------------- */
140
+ --vp-primary: var(--ac-primary, var(--primary-color, #2563eb));
141
+ --vp-primary-subtle: var(--ac-primary-subtle, var(--highlight-bg, rgba(37, 99, 235, 0.14)));
142
+ --vp-success: var(--ac-success, var(--green-500, #15803d));
143
+ --vp-warning: var(--ac-warning, var(--orange-500, #b45309));
144
+ --vp-info: var(--ac-info, var(--blue-500, #0369a1));
145
+ --vp-focus-ring: var(--ac-focus-ring, rgba(37, 99, 235, 0.45));
146
+
147
+ /* -- type -------------------------------------------------------- */
148
+ --vp-mono: var(--ac-font-mono, ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace);
149
+ --vp-font-sm: var(--ac-text-sm, 0.8125rem);
150
+ --vp-font-xs: var(--ac-text-xs, 0.75rem);
151
+ }
152
+
99
153
  .ac-varpick__input {
100
154
  display: flex;
101
155
  align-items: stretch;
@@ -120,8 +174,8 @@
120
174
  }
121
175
 
122
176
  .ac-varpick__hint {
123
- font-size: 0.8125rem;
124
- color: var(--text-color-secondary, #6b7280);
177
+ font-size: var(--vp-font-sm);
178
+ color: var(--vp-ink-muted);
125
179
  margin-bottom: 0.75rem;
126
180
  line-height: 1.4;
127
181
  }
@@ -130,7 +184,7 @@
130
184
 
131
185
  .ac-varpick__empty {
132
186
  padding: 1.5rem 0.25rem;
133
- color: var(--text-color-secondary, #6b7280);
187
+ color: var(--vp-ink-muted);
134
188
  font-size: 0.875rem;
135
189
  }
136
190
 
@@ -153,24 +207,24 @@
153
207
  gap: 0.5rem;
154
208
  padding-bottom: 0.25rem;
155
209
  margin-bottom: 0.25rem;
156
- border-bottom: 1px solid var(--surface-border, rgba(127, 127, 127, 0.25));
210
+ border-bottom: 1px solid var(--vp-divider);
157
211
  position: sticky;
158
212
  top: 0;
159
- background: var(--surface-overlay, #ffffff);
213
+ background: var(--vp-overlay);
160
214
  z-index: 1;
161
215
  }
162
216
 
163
217
  .ac-varpick__grouptitle {
164
- font-size: 0.75rem;
218
+ font-size: var(--vp-font-xs);
165
219
  font-weight: 700;
166
220
  letter-spacing: 0.04em;
167
221
  text-transform: uppercase;
168
- color: var(--text-color-secondary, #6b7280);
222
+ color: var(--vp-ink-muted);
169
223
  }
170
224
 
171
225
  .ac-varpick__grouphint {
172
- font-size: 0.75rem;
173
- color: var(--text-color-secondary, #8b95a1);
226
+ font-size: var(--vp-font-xs);
227
+ color: var(--vp-ink-subtle);
174
228
  }
175
229
 
176
230
  /*
@@ -191,21 +245,21 @@
191
245
  border: 1px solid transparent;
192
246
  border-radius: 3px;
193
247
  background: transparent;
194
- color: var(--text-color, #111827);
248
+ color: var(--vp-ink);
195
249
  font: inherit;
196
250
  cursor: pointer;
197
251
  }
198
252
 
199
- .ac-varpick__row:hover { background: var(--surface-hover, rgba(127, 127, 127, 0.08)); }
253
+ .ac-varpick__row:hover { background: var(--vp-hover); }
200
254
 
201
255
  .ac-varpick__row:focus-visible {
202
- outline: 2px solid var(--primary-color, #2563eb);
256
+ outline: 2px solid var(--vp-focus-ring);
203
257
  outline-offset: -2px;
204
258
  }
205
259
 
206
260
  .ac-varpick__row--on {
207
- background: var(--highlight-bg, rgba(37, 99, 235, 0.14));
208
- border-color: var(--primary-color, #2563eb);
261
+ background: var(--vp-primary-subtle);
262
+ border-color: var(--vp-primary);
209
263
  }
210
264
 
211
265
  .ac-varpick__row--off { opacity: 0.55; cursor: default; }
@@ -219,19 +273,19 @@
219
273
  }
220
274
 
221
275
  .ac-varpick__name {
222
- font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
276
+ font-family: var(--vp-mono);
223
277
  font-weight: 600;
224
278
  }
225
279
 
226
280
  .ac-varpick__label { font-size: 0.875rem; }
227
281
 
228
282
  .ac-varpick__chip {
229
- font-size: 0.75rem;
283
+ font-size: var(--vp-font-xs);
230
284
  padding: 0 6px;
231
285
  border-radius: 999px;
232
- background: var(--surface-100, rgba(127, 127, 127, 0.12));
233
- border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.25));
234
- color: var(--text-color-secondary, #6b7280);
286
+ background: var(--vp-sunk);
287
+ border: 1px solid var(--vp-border);
288
+ color: var(--vp-ink-muted);
235
289
  /* A unit symbol's case is meaningful: "mm/s", "N", "MPa". */
236
290
  text-transform: none;
237
291
  }
@@ -239,19 +293,19 @@
239
293
  /* The current reading. Nothing turns an unfamiliar name into an obvious one
240
294
  * faster than seeing what it says right now. */
241
295
  .ac-varpick__live {
242
- font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
243
- font-size: 0.75rem;
244
- color: var(--green-600, #15803d);
296
+ font-family: var(--vp-mono);
297
+ font-size: var(--vp-font-xs);
298
+ color: var(--vp-success);
245
299
  }
246
300
 
247
301
  .ac-varpick__desc {
248
- font-size: 0.8125rem;
249
- color: var(--text-color-secondary, #6b7280);
302
+ font-size: var(--vp-font-sm);
303
+ color: var(--vp-ink-muted);
250
304
  line-height: 1.35;
251
305
  }
252
306
 
253
- .ac-varpick__why { font-size: 0.8125rem; color: var(--orange-600, #b45309); }
254
- .ac-varpick__note { font-size: 0.8125rem; color: var(--blue-600, #0369a1); }
307
+ .ac-varpick__why { font-size: var(--vp-font-sm); color: var(--vp-warning); }
308
+ .ac-varpick__note { font-size: var(--vp-font-sm); color: var(--vp-info); }
255
309
 
256
310
  .ac-varpick__foot { display: flex; justify-content: flex-end; gap: 0.5rem; }
257
311
  /*$vite$:1*/
package/tools/tests/dist/tis-editor.entry.js CHANGED
@@ -1,4 +1,4 @@
1
- import { A as useMergeProps, B as PrimeReact$2, C as Portal, D as ComponentBase, E as IconBase, F as useUnmountEffect, G as IconUtils, H as ariaLabel$2, I as useUpdateEffect, J as ZIndexUtils, K as ObjectUtils, L as FilterMatchMode$2, M as useOverlayListener, N as usePrevious, O as useHandleStyle, P as useStyle, Q as __toESM, R as FilterOperator, S as Tooltip, T as SpinnerIcon, U as localeOption, V as PrimeReactContext, W as DomHandler, X as require_client, Y as classNames, Z as require_react, _ as OverlayService, b as InputNumber, c as useEditDraft, d as require_jsx_runtime, f as Button, g as CSSTransition, h as VirtualScroller, i as chartFieldCatalog, j as useMountEffect, k as useEventListener, l as FormRow, m as CheckIcon, p as Dropdown, q as UniqueComponentId, s as VariableInput, t as TestFieldDialog, u as Dialog, v as TimesIcon, w as Ripple, x as InputText, y as ChevronDownIcon, z as FilterService } from "./TestFieldDialog-C4mKVh7q.js";
1
+ import { A as useMergeProps, B as PrimeReact$2, C as Portal, D as ComponentBase, E as IconBase, F as useUnmountEffect, G as IconUtils, H as ariaLabel$2, I as useUpdateEffect, J as ZIndexUtils, K as ObjectUtils, L as FilterMatchMode$2, M as useOverlayListener, N as usePrevious, O as useHandleStyle, P as useStyle, Q as __toESM, R as FilterOperator, S as Tooltip, T as SpinnerIcon, U as localeOption, V as PrimeReactContext, W as DomHandler, X as require_client, Y as classNames, Z as require_react, _ as OverlayService, b as InputNumber, c as useEditDraft, d as require_jsx_runtime, f as Button, g as CSSTransition, h as VirtualScroller, i as chartFieldCatalog, j as useMountEffect, k as useEventListener, l as FormRow, m as CheckIcon, p as Dropdown, q as UniqueComponentId, s as VariableInput, t as TestFieldDialog, u as Dialog, v as TimesIcon, w as Ripple, x as InputText, y as ChevronDownIcon, z as FilterService } from "./TestFieldDialog-Dph2oPfe.js";
2
2
  //#region node_modules/primereact/icons/arrowdown/index.esm.js
3
3
  var import_client = require_client();
4
4
  var import_react = /* @__PURE__ */ __toESM(require_react());
package/tools/tests/dist/varpick.entry.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Q as __toESM, X as require_client, Z as require_react, a as configSourceCatalog, d as require_jsx_runtime, i as chartFieldCatalog, n as AuthoringContext, o as cycleSourceCatalog, r as boundCatalog, t as TestFieldDialog } from "./TestFieldDialog-C4mKVh7q.js";
1
+ import { Q as __toESM, X as require_client, Z as require_react, a as configSourceCatalog, d as require_jsx_runtime, i as chartFieldCatalog, n as AuthoringContext, o as cycleSourceCatalog, r as boundCatalog, t as TestFieldDialog } from "./TestFieldDialog-Dph2oPfe.js";
2
2
  //#region src/hooks/useSequenceProducers.ts
3
3
  var import_client = require_client();
4
4
  var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
package/tools/tests/varpick.test.mjs CHANGED
@@ -158,6 +158,13 @@ const buttonLabelled = (root, text) =>
158
158
  ok('every field dialog input still renders', inputIn('Source') !== undefined);
159
159
  ok('Source has a picker button',
160
160
  pickerButtonIn('Source')?.getAttribute('aria-label') === 'Choose a source for this field');
161
+ // The Lucide glyph, matching the sequence editor's button for the same action.
162
+ // PrimeReact's Button takes an `icon` STRING for PrimeIcons, so the icon is
163
+ // passed as a child instead — worth asserting, because a Button that silently
164
+ // dropped its children would leave an unlabelled empty square.
165
+ ok('the picker button renders the variable icon',
166
+ pickerButtonIn('Source')?.querySelector('svg.lucide-variable') !== null,
167
+ pickerButtonIn('Source')?.innerHTML?.slice(0, 120));
161
168
 
162
169
  // -- a cycle field picks a SEQUENCE producer, which clears Source ------------
163
170
  setValue(inputIn('Source'), 'gm.stale_binding');
@@ -166,6 +173,11 @@ check('typing still works', inputIn('Source').value, 'gm.stale_binding');
166
173
 
167
174
  await click(pickerButtonIn('Source'));
168
175
  ok('the picker opened', dialogs().length > 1, `dialogs=${dialogs().length}`);
176
+ // The dialog is PORTALED to <body>, so it inherits nothing from the field's
177
+ // subtree — the token bridge in varpick.css is declared on this class, and
178
+ // without it every colour would fall through to its literal.
179
+ ok('the dialog carries the token-bridge class',
180
+ picker().classList.contains('ac-varpick'), picker().className);
169
181
  ok('the sequence group is present',
170
182
  picker().textContent.includes('Recorded by the sequence'));
171
183