@zeyos/zx 2.3.0 → 4.0.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 (150) hide show
  1. package/CHANGELOG.md +138 -0
  2. package/DESIGN-SYSTEM.md +96 -0
  3. package/README.md +29 -39
  4. package/dist/types/components/account-menu/account-menu.d.ts +144 -0
  5. package/dist/types/components/app-sidebar/app-sidebar.d.ts +243 -0
  6. package/dist/types/components/avatar/avatar.d.ts +100 -0
  7. package/dist/types/components/card/card.d.ts +128 -0
  8. package/dist/types/components/chart/chart.d.ts +322 -0
  9. package/dist/types/components/date-picker/month-picker.d.ts +6 -0
  10. package/dist/types/components/dialog/dialog.d.ts +9 -0
  11. package/dist/types/components/dock/dock.d.ts +495 -0
  12. package/dist/types/components/dropdown/dropdown.d.ts +2 -2
  13. package/dist/types/components/field/field.d.ts +14 -0
  14. package/dist/types/components/field-upload/field-upload.d.ts +37 -4
  15. package/dist/types/components/form/form.d.ts +25 -3
  16. package/dist/types/components/grid/grid.d.ts +172 -0
  17. package/dist/types/components/launcher/launcher.d.ts +359 -0
  18. package/dist/types/components/layout/layout.d.ts +4 -4
  19. package/dist/types/components/menu-button/menu-button.d.ts +10 -2
  20. package/dist/types/components/modal/modal.d.ts +25 -0
  21. package/dist/types/components/multi-value-editor/multi-value-editor.d.ts +7 -1
  22. package/dist/types/components/questionnaire/items.d.ts +327 -0
  23. package/dist/types/components/questionnaire/questionnaire.d.ts +449 -0
  24. package/dist/types/components/select/select.d.ts +51 -0
  25. package/dist/types/components/sheet/sheet-stack.d.ts +167 -0
  26. package/dist/types/components/sheet/sheet.d.ts +294 -0
  27. package/dist/types/components/split-view/split-view.d.ts +2 -21
  28. package/dist/types/components/table/table.d.ts +223 -15
  29. package/dist/types/components/tooltip/tooltip.d.ts +2 -2
  30. package/dist/types/components/value-list/value-list.d.ts +24 -3
  31. package/dist/types/core/dom.d.ts +122 -0
  32. package/dist/types/core/drag-axis.d.ts +111 -0
  33. package/dist/types/core/position.d.ts +4 -2
  34. package/dist/types/index.d.ts +13 -2
  35. package/dist/types/internal/app-rail.d.ts +265 -0
  36. package/dist/types/zeyos/icons.d.ts +5 -0
  37. package/dist/types/zeyos/index.d.ts +2 -1
  38. package/dist/types/zeyos/launcher.d.ts +147 -0
  39. package/dist/types/zeyos/select.d.ts +39 -0
  40. package/dist/zx-zeyos.esm.js +1870 -133
  41. package/dist/zx-zeyos.esm.min.js +1 -1
  42. package/dist/zx.css +2006 -267
  43. package/dist/zx.esm.js +8987 -2757
  44. package/dist/zx.esm.min.js +3 -3
  45. package/dist/zx.global.js +8987 -2757
  46. package/dist/zx.global.min.js +3 -3
  47. package/dist/zx.min.css +1 -1
  48. package/docs/api.json +4396 -2344
  49. package/docs/llms.md +463 -86
  50. package/docs/llms.txt +32 -19
  51. package/package.json +10 -17
  52. package/src/components/account-menu/account-menu.css +70 -0
  53. package/src/components/account-menu/account-menu.js +208 -0
  54. package/src/components/app-rail/app-rail.css +107 -0
  55. package/src/components/app-sidebar/app-sidebar.css +80 -0
  56. package/src/components/app-sidebar/app-sidebar.js +588 -0
  57. package/src/components/avatar/avatar.css +61 -0
  58. package/src/components/avatar/avatar.js +222 -0
  59. package/src/components/button/button.css +0 -1
  60. package/src/components/card/card.css +149 -0
  61. package/src/components/card/card.js +285 -0
  62. package/src/components/chart/chart.css +61 -0
  63. package/src/components/chart/chart.js +523 -0
  64. package/src/components/date-picker/month-picker.js +9 -0
  65. package/src/components/dialog/dialog.js +11 -4
  66. package/src/components/dock/dock.css +228 -0
  67. package/src/components/dock/dock.js +977 -0
  68. package/src/components/dropdown/dropdown.js +1 -1
  69. package/src/components/field/field.js +2 -0
  70. package/src/components/field-upload/field-upload.js +9 -4
  71. package/src/components/form/form.js +6 -3
  72. package/src/components/grid/grid.css +6 -0
  73. package/src/components/grid/grid.js +220 -0
  74. package/src/components/launcher/launcher.css +210 -0
  75. package/src/components/launcher/launcher.js +765 -0
  76. package/src/components/layout/layout.js +2 -2
  77. package/src/components/menu-button/menu-button.js +27 -2
  78. package/src/components/modal/modal.css +5 -1
  79. package/src/components/modal/modal.js +37 -2
  80. package/src/components/multi-value-editor/multi-value-editor.js +2 -1
  81. package/src/components/questionnaire/items.js +370 -0
  82. package/src/components/questionnaire/questionnaire.css +387 -0
  83. package/src/components/questionnaire/questionnaire.js +1033 -0
  84. package/src/components/select/field-adapter.js +9 -4
  85. package/src/components/select/select.css +144 -11
  86. package/src/components/select/select.js +259 -27
  87. package/src/components/sheet/sheet-stack.js +304 -0
  88. package/src/components/sheet/sheet.css +351 -0
  89. package/src/components/sheet/sheet.js +551 -0
  90. package/src/components/split-view/split-view.js +76 -161
  91. package/src/components/table/table.css +43 -0
  92. package/src/components/table/table.js +531 -52
  93. package/src/components/tooltip/tooltip.js +5 -2
  94. package/src/components/value-list/value-list.js +6 -3
  95. package/src/core/dom.js +322 -0
  96. package/src/core/drag-axis.js +203 -0
  97. package/src/core/position.js +68 -22
  98. package/src/index.js +20 -2
  99. package/src/internal/app-rail.js +718 -0
  100. package/src/zeyos/icons.js +8 -3
  101. package/src/zeyos/index.js +7 -1
  102. package/src/zeyos/launcher.js +338 -0
  103. package/src/zeyos/modules.js +1 -0
  104. package/src/zeyos/select.js +115 -1
  105. package/styles/tokens/dark.css +2 -3
  106. package/styles/tokens/global.css +6 -6
  107. package/styles/tokens/modules.css +1 -0
  108. package/styles/tokens/semantic.css +5 -3
  109. package/styles/tokens/themes.css +1 -1
  110. package/styles/zx.css +11 -1
  111. package/MIGRATION.md +0 -598
  112. package/dist/types/compat/base.d.ts +0 -156
  113. package/dist/types/compat/globals.d.ts +0 -20
  114. package/dist/types/compat/index.d.ts +0 -128
  115. package/dist/types/compat/map/basic.d.ts +0 -175
  116. package/dist/types/compat/map/data.d.ts +0 -102
  117. package/dist/types/compat/map/date-time.d.ts +0 -80
  118. package/dist/types/compat/map/factory.d.ts +0 -9
  119. package/dist/types/compat/map/form.d.ts +0 -98
  120. package/dist/types/compat/map/helpers.d.ts +0 -12
  121. package/dist/types/compat/map/http.d.ts +0 -36
  122. package/dist/types/compat/map/layout.d.ts +0 -106
  123. package/dist/types/compat/map/options.d.ts +0 -80
  124. package/dist/types/compat/map/select.d.ts +0 -95
  125. package/dist/types/compat/map/stubs.d.ts +0 -32
  126. package/dist/types/compat/map/utilities.d.ts +0 -37
  127. package/dist/types/compat-entry.d.ts +0 -5
  128. package/dist/types/components/permission/permission.d.ts +0 -96
  129. package/dist/zx-compat.esm.js +0 -17484
  130. package/dist/zx-compat.esm.min.js +0 -1
  131. package/dist/zx-compat.global.js +0 -23635
  132. package/dist/zx-compat.global.min.js +0 -3
  133. package/src/compat/base.js +0 -291
  134. package/src/compat/globals.js +0 -165
  135. package/src/compat/index.js +0 -84
  136. package/src/compat/map/basic.js +0 -464
  137. package/src/compat/map/data.js +0 -232
  138. package/src/compat/map/date-time.js +0 -177
  139. package/src/compat/map/factory.js +0 -45
  140. package/src/compat/map/form.js +0 -330
  141. package/src/compat/map/helpers.js +0 -46
  142. package/src/compat/map/http.js +0 -117
  143. package/src/compat/map/layout.js +0 -256
  144. package/src/compat/map/options.js +0 -267
  145. package/src/compat/map/select.js +0 -198
  146. package/src/compat/map/stubs.js +0 -26
  147. package/src/compat/map/utilities.js +0 -113
  148. package/src/compat-entry.js +0 -11
  149. package/src/components/permission/permission.css +0 -47
  150. package/src/components/permission/permission.js +0 -201
@@ -0,0 +1,322 @@
1
+ import { Component } from '../../core/component.js';
2
+ export type ChartDataset = {
3
+ label?: string;
4
+ data?: unknown[];
5
+ [key: string]: unknown;
6
+ };
7
+ export type ChartData = {
8
+ labels?: unknown[];
9
+ datasets?: ChartDataset[];
10
+ [key: string]: unknown;
11
+ };
12
+ export type ChartSpec = {
13
+ /**
14
+ * Chart type.
15
+ */
16
+ type: string;
17
+ /**
18
+ * Chart data.
19
+ */
20
+ data: ChartData;
21
+ /**
22
+ * Engine-specific options.
23
+ */
24
+ options: Record<string, unknown>;
25
+ /**
26
+ * Point-selection callback.
27
+ */
28
+ onSelect: (detail: ChartSelectDetail) => void;
29
+ };
30
+ export type ChartHandle = {
31
+ /**
32
+ * Update the mounted chart.
33
+ */
34
+ update: (spec: ChartSpec) => void;
35
+ /**
36
+ * Resize the mounted chart.
37
+ */
38
+ resize: () => void;
39
+ /**
40
+ * Destroy the mounted chart.
41
+ */
42
+ destroy: () => void;
43
+ /**
44
+ * Engine instance.
45
+ */
46
+ instance?: unknown;
47
+ };
48
+ export type ChartAdapter = {
49
+ create: (canvas: HTMLCanvasElement, spec: ChartSpec) => ChartHandle;
50
+ };
51
+ export type ChartJsAdapterOptions = Object;
52
+ export type ChartSelectDetail = {
53
+ /**
54
+ * Dataset index.
55
+ */
56
+ datasetIndex: number;
57
+ /**
58
+ * Data index.
59
+ */
60
+ index: number;
61
+ /**
62
+ * Dataset definition.
63
+ */
64
+ dataset: ChartDataset | null;
65
+ /**
66
+ * Label at the selected index.
67
+ */
68
+ label: unknown;
69
+ /**
70
+ * Data value.
71
+ */
72
+ value: unknown;
73
+ /**
74
+ * Engine-native event when available.
75
+ */
76
+ nativeEvent: Event | null;
77
+ };
78
+ export type ChartOptions = {
79
+ /**
80
+ * Injected engine adapter.
81
+ */
82
+ adapter?: ChartAdapter | null;
83
+ /**
84
+ * Chart type passed to the adapter.
85
+ */
86
+ type?: string;
87
+ /**
88
+ * Chart data.
89
+ */
90
+ data?: ChartData;
91
+ /**
92
+ * Engine-specific options.
93
+ */
94
+ chartOptions?: Record<string, unknown>;
95
+ /**
96
+ * Accessible canvas and summary label; blank text falls back to `Chart`.
97
+ */
98
+ label?: string;
99
+ /**
100
+ * Accessible description.
101
+ */
102
+ description?: string;
103
+ /**
104
+ * Semantic data-table presentation.
105
+ */
106
+ summary?: 'hidden' | 'visible';
107
+ /**
108
+ * Initial loading state.
109
+ */
110
+ loading?: boolean;
111
+ /**
112
+ * Empty-state text.
113
+ */
114
+ emptyText?: string;
115
+ /**
116
+ * Loading-state text.
117
+ */
118
+ loadingText?: string;
119
+ /**
120
+ * Error fallback text.
121
+ */
122
+ errorText?: string;
123
+ /**
124
+ * Responsive container aspect ratio.
125
+ */
126
+ aspectRatio?: string;
127
+ /**
128
+ * Engine-ready listener.
129
+ */
130
+ onready?: (event: CustomEvent<{
131
+ instance: unknown;
132
+ }>) => void;
133
+ /**
134
+ * Update listener.
135
+ */
136
+ onupdate?: (event: CustomEvent<{
137
+ data: ChartData;
138
+ type: string;
139
+ }>) => void;
140
+ /**
141
+ * Point-selection listener.
142
+ */
143
+ onselect?: (event: CustomEvent<ChartSelectDetail>) => void;
144
+ /**
145
+ * Engine error listener.
146
+ */
147
+ onerror?: (event: CustomEvent<{
148
+ error: unknown;
149
+ }>) => void;
150
+ };
151
+ /** @typedef {{label?: string, data?: unknown[], [key: string]: unknown}} ChartDataset */
152
+ /** @typedef {{labels?: unknown[], datasets?: ChartDataset[], [key: string]: unknown}} ChartData */
153
+ /**
154
+ * @typedef {Object} ChartSpec
155
+ * @property {string} type Chart type.
156
+ * @property {ChartData} data Chart data.
157
+ * @property {Record<string, unknown>} options Engine-specific options.
158
+ * @property {(detail: ChartSelectDetail) => void} onSelect Point-selection callback.
159
+ */
160
+ /**
161
+ * @typedef {Object} ChartHandle
162
+ * @property {(spec: ChartSpec) => void} update Update the mounted chart.
163
+ * @property {() => void} resize Resize the mounted chart.
164
+ * @property {() => void} destroy Destroy the mounted chart.
165
+ * @property {unknown} [instance] Engine instance.
166
+ */
167
+ /** @typedef {{create: (canvas: HTMLCanvasElement, spec: ChartSpec) => ChartHandle}} ChartAdapter */
168
+ /**
169
+ * @typedef {Object} ChartJsAdapterOptions
170
+ * Generated API marker for the adapter class; its constructor accepts an injected engine and
171
+ * optional defaults directly rather than a component options object.
172
+ */
173
+ /**
174
+ * @typedef {Object} ChartSelectDetail
175
+ * @property {number} datasetIndex Dataset index.
176
+ * @property {number} index Data index.
177
+ * @property {ChartDataset|null} dataset Dataset definition.
178
+ * @property {unknown} label Label at the selected index.
179
+ * @property {unknown} value Data value.
180
+ * @property {Event|null} nativeEvent Engine-native event when available.
181
+ */
182
+ /**
183
+ * @typedef {Object} ChartOptions
184
+ * @property {ChartAdapter|null} [adapter=null] Injected engine adapter.
185
+ * @property {string} [type='bar'] Chart type passed to the adapter.
186
+ * @property {ChartData} [data={labels: [], datasets: []}] Chart data.
187
+ * @property {Record<string, unknown>} [chartOptions={}] Engine-specific options.
188
+ * @property {string} [label='Chart'] Accessible canvas and summary label; blank text falls back to `Chart`.
189
+ * @property {string} [description=''] Accessible description.
190
+ * @property {'hidden'|'visible'} [summary='hidden'] Semantic data-table presentation.
191
+ * @property {boolean} [loading=false] Initial loading state.
192
+ * @property {string} [emptyText='No chart data'] Empty-state text.
193
+ * @property {string} [loadingText='Loading chart…'] Loading-state text.
194
+ * @property {string} [errorText='Unable to render chart'] Error fallback text.
195
+ * @property {string} [aspectRatio='16 / 9'] Responsive container aspect ratio.
196
+ * @property {(event: CustomEvent<{instance: unknown}>) => void} [onready] Engine-ready listener.
197
+ * @property {(event: CustomEvent<{data: ChartData, type: string}>) => void} [onupdate] Update listener.
198
+ * @property {(event: CustomEvent<ChartSelectDetail>) => void} [onselect] Point-selection listener.
199
+ * @property {(event: CustomEvent<{error: unknown}>) => void} [onerror] Engine error listener.
200
+ */
201
+ /**
202
+ * Accessible, engine-neutral chart host with explicit adapter lifecycle.
203
+ * @fires Chart#ready
204
+ * @fires Chart#update
205
+ * @fires Chart#select
206
+ * @fires Chart#error
207
+ * @extends {Component<ChartOptions>}
208
+ */
209
+ export declare class Chart extends Component<ChartOptions> {
210
+ _createdRoot: boolean;
211
+ _original: {
212
+ attributes: string[][];
213
+ children: ChildNode[];
214
+ };
215
+ _adapter: ChartAdapter;
216
+ _type: string;
217
+ _data: ChartData;
218
+ _label: string;
219
+ _chartOptions: Record<string, unknown>;
220
+ _loading: boolean;
221
+ _error: unknown;
222
+ _hasError: boolean;
223
+ _handle: ChartHandle;
224
+ _destroyed: boolean;
225
+ _observer: ResizeObserver;
226
+ static cssName: string;
227
+ /** @type {Readonly<ChartOptions>} */
228
+ static defaults: Readonly<ChartOptions>;
229
+ /**
230
+ * Creates or enhances a chart host.
231
+ * @param {Element|string|null} target Chart target.
232
+ * @param {ChartOptions} [options={}] Chart options.
233
+ */
234
+ constructor(target?: Element | string | null, options?: ChartOptions);
235
+ /** @returns {HTMLElement} */
236
+ render(): HTMLElement;
237
+ /** Replaces chart data and updates or mounts the engine. @param {ChartData} data @returns {this} */
238
+ setData(data: ChartData): this;
239
+ /** Changes the chart type and updates/recreates the engine as needed. @param {string} type @returns {this} */
240
+ setType(type: string): this;
241
+ /** Replaces engine-specific options. @param {Record<string, unknown>} options @returns {this} */
242
+ update(options: Record<string, unknown>): this;
243
+ /** Replaces the engine adapter. @param {ChartAdapter|null} adapter @returns {this} */
244
+ setAdapter(adapter: ChartAdapter | null): this;
245
+ /** Toggles loading state. Loading charts do not keep an engine instance alive. @param {boolean} [loading=true] @returns {this} */
246
+ setLoading(loading?: boolean): this;
247
+ /** Shows an error and destroys the current engine. @param {unknown} error @returns {this} */
248
+ setError(error: unknown): this;
249
+ /** Clears the error and remounts when data and an adapter are available. @returns {this} */
250
+ clearError(): this;
251
+ /** Requests an engine resize. @returns {this} */
252
+ resize(): this;
253
+ /** Re-applies computed theme defaults through the adapter update path. @returns {this} */
254
+ refreshTheme(): this;
255
+ /** Returns the underlying engine instance when the adapter exposes it. @returns {unknown} */
256
+ getInstance(): unknown;
257
+ /** Destroys the engine/observer and restores or removes the host. @returns {void} */
258
+ destroy(): void;
259
+ /** @param {boolean} emitUpdate @returns {void} */
260
+ _mountOrUpdate(emitUpdate: boolean): void;
261
+ /** @returns {ChartSpec} */
262
+ _spec(): ChartSpec;
263
+ /** @returns {void} */
264
+ _destroyHandle(): void;
265
+ /** @returns {void} */
266
+ _syncState(): void;
267
+ /** @returns {void} */
268
+ _renderSummary(): void;
269
+ }
270
+ /**
271
+ * Adapter for an injected Chart.js 4 constructor or namespace.
272
+ */
273
+ export declare class ChartJsAdapter {
274
+ engine: Function;
275
+ defaults: Record<string, unknown>;
276
+ /**
277
+ * @param {Function|{Chart?: Function}} engine Injected Chart.js constructor or namespace.
278
+ * @param {Record<string, unknown>} [defaults={}] Adapter-wide Chart.js options.
279
+ */
280
+ constructor(engine: Function | {
281
+ Chart?: Function;
282
+ }, defaults?: Record<string, unknown>);
283
+ /**
284
+ * Creates one Chart.js lifecycle handle.
285
+ * @param {HTMLCanvasElement} canvas Canvas.
286
+ * @param {ChartSpec} spec Initial chart specification.
287
+ * @returns {ChartHandle}
288
+ */
289
+ create(canvas: HTMLCanvasElement, spec: ChartSpec): ChartHandle;
290
+ }
291
+ /**
292
+ * Clones arrays and plain objects while preserving callbacks and engine-specific object instances.
293
+ * @template T
294
+ * @param {T} value Value.
295
+ * @returns {T}
296
+ */
297
+ export declare function cloneChartValue<T>(value: T): T;
298
+ /** @param {ChartData} data @returns {boolean} */
299
+ export declare function isEmptyChartData(data: ChartData): boolean;
300
+ /**
301
+ * Builds the semantic table mirrored alongside the canvas.
302
+ * @param {ChartData} data Chart data.
303
+ * @param {string} label Caption.
304
+ * @returns {HTMLTableElement}
305
+ */
306
+ export declare function chartSummaryTable(data: ChartData, label?: string): HTMLTableElement;
307
+ /**
308
+ * Produces the exact text matrix rendered by the semantic chart summary.
309
+ * @param {ChartData} data Chart data.
310
+ * @returns {{headers: string[], rows: Array<{label: string, values: string[]}>}}
311
+ */
312
+ export declare function chartSummaryModel(data: ChartData): {
313
+ headers: string[];
314
+ rows: Array<{
315
+ label: string;
316
+ values: string[];
317
+ }>;
318
+ };
319
+ /** Fired after the adapter creates an engine instance. @event Chart#ready @type {CustomEvent<{instance: unknown}>} */
320
+ /** Fired after an existing chart updates. @event Chart#update @type {CustomEvent<{data: ChartData, type: string}>} */
321
+ /** Fired when the engine reports a selected point. @event Chart#select @type {CustomEvent<ChartSelectDetail>} */
322
+ /** Fired when adapter creation/update fails. @event Chart#error @type {CustomEvent<{error: unknown}>} */
@@ -40,6 +40,12 @@ export declare class MonthPicker extends DatePicker {
40
40
  static cssName: string;
41
41
  /** @type {MonthPickerOptions} */
42
42
  static defaults: MonthPickerOptions;
43
+ /**
44
+ * Creates a month picker with its narrower month-based option contract.
45
+ * @param {Element|string|null} target Existing element, selector, or null.
46
+ * @param {MonthPickerOptions} [options={}] Month-picker options.
47
+ */
48
+ constructor(target: Element | string | null, options?: MonthPickerOptions);
43
49
  /** @returns {HTMLElement} */
44
50
  render(): HTMLElement;
45
51
  /** @returns {Date|null} */
@@ -281,4 +281,13 @@ export declare class Dialog extends Modal {
281
281
  * @returns {Promise<string|null>}
282
282
  */
283
283
  static prompt({ title, message, value, placeholder }?: PromptOptions): Promise<string | null>;
284
+ /**
285
+ * Applies the dialog width. Subclasses that size themselves on a different axis override this.
286
+ *
287
+ * Called from the constructor before any subclass field initializers have run, so an override
288
+ * may only touch the DOM — reading an uninitialized private field here throws.
289
+ * @param {'sm'|'md'|'lg'|number} size Preset or pixel width.
290
+ * @returns {void}
291
+ */
292
+ _applySize(size: 'sm' | 'md' | 'lg' | number): void;
284
293
  }