@zeyos/zx 3.0.0 → 4.1.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.
- package/CHANGELOG.md +95 -0
- package/DESIGN-SYSTEM.md +87 -71
- package/README.md +16 -37
- package/dist/types/components/app-icon/app-icon.d.ts +88 -0
- package/dist/types/components/app-sidebar/app-sidebar.d.ts +106 -32
- package/dist/types/components/card/card.d.ts +128 -0
- package/dist/types/components/chart/chart.d.ts +1 -0
- package/dist/types/components/filter/filter-model.d.ts +87 -0
- package/dist/types/components/filter/filter.d.ts +331 -0
- package/dist/types/components/launcher/launcher.d.ts +65 -6
- package/dist/types/components/select/select.d.ts +97 -4
- package/dist/types/components/table/table.d.ts +107 -3
- package/dist/types/components/tag-picker/tag-picker.d.ts +16 -0
- package/dist/types/core/dom.d.ts +9 -1
- package/dist/types/core/util.d.ts +9 -0
- package/dist/types/index.d.ts +6 -2
- package/dist/types/{components/app-rail → internal}/app-rail.d.ts +34 -19
- package/dist/types/zeyos/icons.d.ts +24 -2
- package/dist/types/zeyos/index.d.ts +3 -2
- package/dist/types/zeyos/launcher.d.ts +147 -0
- package/dist/types/zeyos/select.d.ts +41 -0
- package/dist/zx-zeyos.esm.js +2018 -113
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +815 -16
- package/dist/zx.esm.js +2661 -338
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +2661 -338
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +602 -110
- package/docs/llms.md +181 -123
- package/docs/llms.txt +24 -21
- package/package.json +8 -17
- package/src/components/app-icon/app-icon.css +105 -0
- package/src/components/app-icon/app-icon.js +134 -0
- package/src/components/app-sidebar/app-sidebar.css +12 -0
- package/src/components/app-sidebar/app-sidebar.js +310 -110
- package/src/components/card/card.css +149 -0
- package/src/components/card/card.js +285 -0
- package/src/components/chart/chart.js +8 -3
- package/src/components/filter/filter-model.js +226 -0
- package/src/components/filter/filter.css +147 -0
- package/src/components/filter/filter.js +554 -0
- package/src/components/grid/grid.css +1 -1
- package/src/components/grid/grid.js +14 -4
- package/src/components/launcher/launcher.css +113 -3
- package/src/components/launcher/launcher.js +234 -26
- package/src/components/message/message.css +36 -3
- package/src/components/select/field-adapter.js +9 -4
- package/src/components/select/select.css +161 -10
- package/src/components/select/select.js +361 -48
- package/src/components/table/table.css +85 -0
- package/src/components/table/table.js +426 -31
- package/src/components/tag-picker/tag-picker.css +19 -0
- package/src/components/tag-picker/tag-picker.js +42 -5
- package/src/core/dom.js +21 -1
- package/src/core/util.js +20 -0
- package/src/index.js +9 -2
- package/src/{components/app-rail → internal}/app-rail.js +80 -30
- package/src/zeyos/icons.js +38 -20
- package/src/zeyos/index.js +8 -2
- package/src/zeyos/launcher.js +338 -0
- package/src/zeyos/modules.js +1 -0
- package/src/zeyos/select.js +116 -1
- package/styles/tokens/global.css +1 -1
- package/styles/tokens/modules.css +1 -0
- package/styles/tokens/semantic.css +9 -0
- package/styles/tokens/themes.css +2 -2
- package/styles/zx.css +3 -0
- package/MIGRATION.md +0 -749
- package/dist/types/compat/base.d.ts +0 -156
- package/dist/types/compat/globals.d.ts +0 -20
- package/dist/types/compat/index.d.ts +0 -128
- package/dist/types/compat/map/basic.d.ts +0 -175
- package/dist/types/compat/map/data.d.ts +0 -103
- package/dist/types/compat/map/date-time.d.ts +0 -80
- package/dist/types/compat/map/factory.d.ts +0 -9
- package/dist/types/compat/map/form.d.ts +0 -98
- package/dist/types/compat/map/helpers.d.ts +0 -12
- package/dist/types/compat/map/http.d.ts +0 -36
- package/dist/types/compat/map/layout.d.ts +0 -106
- package/dist/types/compat/map/options.d.ts +0 -80
- package/dist/types/compat/map/select.d.ts +0 -95
- package/dist/types/compat/map/stubs.d.ts +0 -32
- package/dist/types/compat/map/utilities.d.ts +0 -37
- package/dist/types/compat-entry.d.ts +0 -5
- package/dist/zx-compat.esm.js +0 -17848
- package/dist/zx-compat.esm.min.js +0 -1
- package/dist/zx-compat.global.js +0 -29008
- package/dist/zx-compat.global.min.js +0 -3
- package/src/compat/base.js +0 -291
- package/src/compat/globals.js +0 -167
- package/src/compat/index.js +0 -84
- package/src/compat/map/basic.js +0 -464
- package/src/compat/map/data.js +0 -254
- package/src/compat/map/date-time.js +0 -177
- package/src/compat/map/factory.js +0 -45
- package/src/compat/map/form.js +0 -330
- package/src/compat/map/helpers.js +0 -46
- package/src/compat/map/http.js +0 -117
- package/src/compat/map/layout.js +0 -256
- package/src/compat/map/options.js +0 -267
- package/src/compat/map/select.js +0 -198
- package/src/compat/map/stubs.js +0 -26
- package/src/compat/map/utilities.js +0 -113
- package/src/compat-entry.js +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,101 @@ and friends remain the complete record.
|
|
|
8
8
|
|
|
9
9
|
## Unreleased
|
|
10
10
|
|
|
11
|
+
## 4.1.0 — 2026-08-25
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **`AppIcon`.** A reusable application-identity surface with safe semantic colours, badges,
|
|
16
|
+
accessible labelled and decorative modes, and an optional CSS-only translucent glass material.
|
|
17
|
+
The ZeyOS adapter supplies presets for all 29 current applications while keeping glyph loading
|
|
18
|
+
and routing application-owned.
|
|
19
|
+
- **`Filter`.** A backend-neutral visual expression builder with a versioned JSON-safe AST,
|
|
20
|
+
nested AND/OR groups, typed operators and value editors, abortable asynchronous choices,
|
|
21
|
+
structural and semantic validation, defensive limits, deterministic keyboard focus, and
|
|
22
|
+
valid-only Apply events. Query compilation, saved views, and URL state remain adapter concerns.
|
|
23
|
+
- **Richer entity and tag selection.** `Select.entity()` supports optional recent items and an
|
|
24
|
+
application-owned create command; `TagPicker` now renders native item icons and semantic colours
|
|
25
|
+
without overriding a custom renderer.
|
|
26
|
+
|
|
27
|
+
### Changed
|
|
28
|
+
|
|
29
|
+
- **Transaction grids are faster to operate.** `Grid.BillingItems()` and `Table` now support
|
|
30
|
+
single-click typed editing, opt-in double-click compatibility, same-parent row reordering by
|
|
31
|
+
drag or keyboard, hierarchy-safe branch moves, and accessible column visibility controls.
|
|
32
|
+
- **ZeyOS identity is consistent across workflows.** Launcher application tiles use the new
|
|
33
|
+
AppIcons, while Launcher recents and entity-select results use module/entity identities and
|
|
34
|
+
colours rather than generic placeholders.
|
|
35
|
+
- **The documentation shell is easier to navigate.** Global search is centred in every header and
|
|
36
|
+
reports full breadcrumb paths; component groups are alphabetized, application-shell primitives
|
|
37
|
+
are collected under Layout, narrow API tables remain locally scrollable, and public navigation
|
|
38
|
+
and footer links are reduced to their canonical destinations.
|
|
39
|
+
- **Theme Studio now applies complete recipes.** Presets change typography, tint, radius, density,
|
|
40
|
+
control sizing, and glass strength in addition to colour; the house preset is named `ZeyOS`.
|
|
41
|
+
|
|
42
|
+
### Fixed
|
|
43
|
+
|
|
44
|
+
- Select preset chevrons retain their alignment across theme recipes and enhanced
|
|
45
|
+
`Select.entity()` targets restore their exact original DOM when destroyed.
|
|
46
|
+
- Floating messages default to a content-sized upper-right glass surface instead of stretching
|
|
47
|
+
with the document, with opaque and reduced-transparency fallbacks.
|
|
48
|
+
- Filter mutations preserve keyboard focus and accessible announcements; asynchronous editors
|
|
49
|
+
expose busy state and abort stale work.
|
|
50
|
+
- Row editing no longer targets hidden columns or hijacks buttons and links rendered inside cells;
|
|
51
|
+
column toggles retain focus and row drags do not export record identifiers as plain text.
|
|
52
|
+
- Application and tag colour overrides reject CSS image and URL values before reaching public
|
|
53
|
+
custom properties.
|
|
54
|
+
|
|
55
|
+
## 4.0.0 — 2026-08-24
|
|
56
|
+
|
|
57
|
+
### Added
|
|
58
|
+
|
|
59
|
+
- **`Card`.** A semantic, product-agnostic content and record surface with optional media, native
|
|
60
|
+
title link, secondary actions, footer metadata, three variants, horizontal/vertical layout, and
|
|
61
|
+
exact enhanced-target restoration. The root never impersonates a link or button, so nested
|
|
62
|
+
controls remain valid and independently keyboard-accessible.
|
|
63
|
+
|
|
64
|
+
### Changed
|
|
65
|
+
|
|
66
|
+
- **One public application-navigation component.** `AppSidebar` now owns expanded vertical, minimized
|
|
67
|
+
vertical, and horizontal rail presentations over one active/branch state model. Descendants are
|
|
68
|
+
inline only while expanded and use pointer-, focus-, and keyboard-accessible flyouts in rail
|
|
69
|
+
states; its minimized renderer is an implementation detail, not a second public component.
|
|
70
|
+
- **Richer Select presets.** `Select.priority()` now uses the five-square ZeyOS scale;
|
|
71
|
+
`Select.status()` adds shape- and semantic-color-distinct workflow states; and the optional
|
|
72
|
+
`zeyosEntitySelect()` binding adds grouped remote records, module-colored icons, an explicit
|
|
73
|
+
empty choice, and application-owned command rows without changing the selected-ID contract.
|
|
74
|
+
- **Full launcher parity.** `Launcher` now distinguishes application tiles from record rows,
|
|
75
|
+
exposes current and pinned state, spatial keyboard movement, visible hints, query-state/source
|
|
76
|
+
ordering, and injected icon factories. The optional ZeyOS adapter maps all 29 prototype
|
|
77
|
+
applications, forks/weblets, cached or async recent records, and grouped abortable search while
|
|
78
|
+
leaving permissions, icons, destinations, and routing with the host application.
|
|
79
|
+
- The documentation now has a global destination search, a clearer uppercase green
|
|
80
|
+
Presets/Examples hierarchy, and product-agnostic Xenon positioning. The internal rollout guide
|
|
81
|
+
is no longer shipped or linked from public surfaces.
|
|
82
|
+
|
|
83
|
+
### Removed
|
|
84
|
+
|
|
85
|
+
- **The separate `AppRail` constructor.** Use `AppSidebar` with `collapsed: true` for a vertical
|
|
86
|
+
rail or `orientation: 'horizontal'` for a horizontal rail. This completes the single-owner
|
|
87
|
+
navigation contract instead of maintaining two public root-DOM models.
|
|
88
|
+
- **Public gx compatibility entry points and bundles.** The compact `__()` DOM builder is part of
|
|
89
|
+
the Zx core; gx adapter source remains repository-internal and is no longer exported, built, or
|
|
90
|
+
included in the npm package.
|
|
91
|
+
|
|
92
|
+
### Fixed
|
|
93
|
+
|
|
94
|
+
- Late Launcher sources preserve the current keyboard choice only while completing the same query;
|
|
95
|
+
a new query resets to its own best match.
|
|
96
|
+
- Card rejects control-obfuscated unsafe URL schemes; Launcher and every AppSidebar presentation
|
|
97
|
+
strip executable/data destinations and disable inert descriptors. AppSidebar also relocates focus,
|
|
98
|
+
emits its effective collapse state across layout changes, and releases obsolete mode listeners.
|
|
99
|
+
- Card restores an enhanced target after failed construction, releases callbacks when links or
|
|
100
|
+
actions are replaced, and keeps the full non-interactive body inside the primary-link target.
|
|
101
|
+
- Status shortcut hints now activate their options, async permission group loaders cannot be
|
|
102
|
+
disconnected by a filter override, and enhanced billing grids restore every target attribute.
|
|
103
|
+
- Billing totals now distinguish a missing operand from an explicit zero, and Chart renders a
|
|
104
|
+
consistent error state for falsy payloads and errors without a message.
|
|
105
|
+
|
|
11
106
|
## 3.0.0 — 2026-08-24
|
|
12
107
|
|
|
13
108
|
### Added
|
package/DESIGN-SYSTEM.md
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
# Xenon
|
|
1
|
+
# Xenon Design System
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
implementation.
|
|
5
|
-
|
|
3
|
+
Xenon is a product-agnostic design system for browser applications; Zx is its dependency-free
|
|
4
|
+
JavaScript implementation. It provides shared foundations, accessible components, interaction
|
|
5
|
+
patterns, and application layouts without taking ownership of an application's routing or domain
|
|
6
|
+
logic.
|
|
6
7
|
|
|
7
8
|
## System boundary
|
|
8
9
|
|
|
@@ -16,66 +17,104 @@ Xenon has four layers:
|
|
|
16
17
|
4. **Application layouts** — rails, bars, workspaces, master/detail, dashboards, inboxes, wizards,
|
|
17
18
|
and responsive shell geometry.
|
|
18
19
|
|
|
19
|
-
This separation
|
|
20
|
-
|
|
21
|
-
[SAP Fiori design principles](https://experience.sap.com/fiori-design-web/design-principles/),
|
|
22
|
-
without copying either system's code, assets, or component contracts.
|
|
20
|
+
This separation keeps foundations, components, patterns, and layouts independently reusable while
|
|
21
|
+
preserving a coherent API and visual language.
|
|
23
22
|
|
|
24
|
-
Zx
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
## ZeyOS adoption boundary
|
|
30
|
-
|
|
31
|
-
ZeyOS Classic does not use `gx`. Across its 30 module files it has roughly 2,500 `UI.*` calls and
|
|
32
|
-
2,600 `PG.*` calls. `PG` already owns navigation, transport, history, exit guards, and page
|
|
33
|
-
lifecycle and remains authoritative.
|
|
34
|
-
|
|
35
|
-
The existing compact DOM surface has 2,668 executable builder calls: 871 bare `__()` calls, 1,710
|
|
36
|
-
parent-returning `parent.__()` calls, and 87 child-returning `parent.$__()` calls. Zx now provides
|
|
37
|
-
the exact compact builder plus pure append/property/event helpers. Existing global and prototype
|
|
38
|
-
names remain application-owned delegation seams; Zx does not install or replace them.
|
|
39
|
-
|
|
40
|
-
Migration therefore replaces `UI.new*` implementations one family at a time, keeps their current
|
|
41
|
-
DOM/value contracts until call sites reach zero, and leaves `PG`, `MD`, routes, and server payloads
|
|
42
|
-
in place. See [MIGRATION.md](./MIGRATION.md) for the ordering and shell invariants.
|
|
23
|
+
Zx has a generated API reference, live examples, bundled local icons, and no runtime dependency.
|
|
24
|
+
Its compact `__()` DOM builder and pure append/property/event helpers let established applications
|
|
25
|
+
adopt the system without introducing a framework runtime. Domain policy, transport, persistence,
|
|
26
|
+
and navigation remain application-owned.
|
|
43
27
|
|
|
44
28
|
## Coverage ledger
|
|
45
29
|
|
|
46
|
-
|
|
|
30
|
+
| Front-end capability | Xenon/Zx status | Design-system boundary |
|
|
47
31
|
| --- | --- | --- |
|
|
48
|
-
| Buttons, inputs, toggles, dates, selects, checklists, tags | Covered by public components |
|
|
32
|
+
| Buttons, inputs, toggles, dates, selects, checklists, tags | Covered by public components | Components preserve native semantics and expose consistent value/event contracts. |
|
|
49
33
|
| Forms and fieldsets | Covered, including component-backed field adapters | Use for record editors; keep validation/business rules application-owned. |
|
|
50
34
|
| Dialogs, sheets, dropdowns, context menus, tooltips, messages | Covered | Consolidate duplicate menu behavior before building account/launcher surfaces. |
|
|
51
35
|
| Tabs, panels, toolbar, breadcrumbs, stepper, split view, dock | Covered | Compose layouts; do not let navigation components own routes. |
|
|
52
|
-
| Sorting, selection, filtering, pagination, trees/finder | Covered |
|
|
53
|
-
| Editable billing/transaction rows | Covered at generic-grid level | `Grid.BillingItems()` composes typed
|
|
54
|
-
| Global launcher/search | Covered | `Launcher` combines
|
|
55
|
-
| Account/profile/preferences menu | Covered at presentation level | `Avatar` and `AccountMenu` provide identity and action UI.
|
|
56
|
-
| Persistent app rail / side navigation | Covered | `AppSidebar`
|
|
36
|
+
| Sorting, selection, dynamic/local filtering, pagination, trees/finder | Covered | `Filter` authors typed nested expressions; `DataFilter` executes simple local predicates. Backend query compilation stays in adapters. |
|
|
37
|
+
| Editable billing/transaction rows | Covered at generic-grid level | `Grid.BillingItems()` composes single-click typed currency/unit editors, flat hierarchy, same-parent row movement, and column visibility over `Table`. Tax, subtotal, posting, rounding, and persistence stay domain code. |
|
|
38
|
+
| Global launcher/search | Covered | `Launcher` combines an application grid, current/pinned state, recent records, and abortable grouped sources. The optional ZeyOS adapter maps the complete 29-app shell catalogue while the host retains permissions, icons, and routing. |
|
|
39
|
+
| Account/profile/preferences menu | Covered at presentation level | `Avatar` and `AccountMenu` provide identity and action UI. The host supplies permitted actions and owns preferences, authentication, and logout. |
|
|
40
|
+
| Persistent app rail / side navigation | Covered | One route-agnostic `AppSidebar` owns expanded, minimized, and horizontal presentations. Only expanded vertical branches render inline; every rail presentation uses flyouts. |
|
|
57
41
|
| Charts and analytical summaries | Covered through an adapter | `Chart` is engine-neutral and accessible; `ChartJsAdapter` accepts an injected Chart.js 4 engine. Chart.js is documentation/test tooling only. |
|
|
58
|
-
| Local product/module icons |
|
|
59
|
-
| Domain entity selectors/cards/links |
|
|
42
|
+
| Local product/module icons | Covered | `AppIcon` is generic; `zeyosAppIcon()` maps every current ZeyOS module/entity identity and accepts an offline glyph override. The optional remote Font Awesome kit is never loaded automatically. |
|
|
43
|
+
| Domain entity selectors/cards/links | Covered at generic presentation level | `Card` provides media, native primary links, secondary actions, and metadata; applications own entity routing and policy. |
|
|
60
44
|
| Persistent notification/activity center | Missing, lower priority | `Message` covers ephemeral feedback, not read/unread activity history. |
|
|
61
45
|
|
|
46
|
+
## Current ZeyOS delta audit (25 August 2026)
|
|
47
|
+
|
|
48
|
+
This is a source audit, not a visual inventory. The comparison uses the current ZeyOS DOM/UI
|
|
49
|
+
implementation as evidence: its generic control catalogue is concentrated in
|
|
50
|
+
[`4-ui.orig.js`](../zeyos/ext/global.orig/4-ui.orig.js), configurable index-column management in
|
|
51
|
+
[`4-pg.orig.js`](../zeyos/ext/global.orig/4-pg.orig.js#L3464), and the multi-view scheduling surface
|
|
52
|
+
in [`calendar.orig.js`](../zeyos/ext/mod/calendar.orig.js#L61). Capabilities already represented by
|
|
53
|
+
a Zx component or a documented composition are not counted as gaps.
|
|
54
|
+
|
|
55
|
+
### Already closed by Zx core
|
|
56
|
+
|
|
57
|
+
| ZeyOS behavior | Source evidence | Xenon/Zx coverage |
|
|
58
|
+
| --- | --- | --- |
|
|
59
|
+
| Dynamic search/filter authoring and saved filter controls | [`UI.newSearch`](../zeyos/ext/global.orig/4-ui.orig.js#L3378) and [`UI.newContainerFilters`](../zeyos/ext/global.orig/4-ui.orig.js#L7723) | `Filter` supplies a typed/versioned AST editor; `DataFilter` remains the lightweight local-row helper. A compiler and persistence service are intentionally not core. |
|
|
60
|
+
| Editable transaction rows and row movement | [`_newTblAddColEdit`](../zeyos/ext/global.orig/4-ui.orig.js#L5613) and [`newTblItems`](../zeyos/ext/global.orig/4-ui.orig.js#L6070) | `Table`/`Grid.BillingItems()` cover typed editing, currencies/units, hierarchy, single-click entry, same-parent drag/keyboard reorder, and show/hide columns. |
|
|
61
|
+
| Entity selection, priority, status, and permission choices | [`newSelEntity`](../zeyos/ext/global.orig/4-ui.orig.js#L3296), [`newSelPriority`](../zeyos/ext/global.orig/4-ui.orig.js#L3101), and the surrounding Select family | `Select.entity()`, `.priority()`, `.status()`, and `.permission()` cover the interaction contract; the ZeyOS adapter owns schemas and localized catalogues. |
|
|
62
|
+
| Application launcher and module/entity identity | [`newExpLst`](../zeyos/ext/global.orig/4-ui.orig.js#L4355) and entity/module item builders through line 4457 | `Launcher`, `AppIcon`, and the optional ZeyOS adapter cover the full app catalogue, current/pinned state, recent records, grouped abortable search, forks/weblets, and injected routing. |
|
|
63
|
+
| Expanded/minimized/horizontal app navigation | Current shell navigation plus the same module identity catalogue | One public `AppSidebar` owns all presentations. The rail renderer is an internal presenter, not a second component; only expanded vertical branches render inline and rail branches use anchored flyouts. |
|
|
64
|
+
| Toasts, loading, cards, dialogs, forms, grids, charts, and layout primitives | Multiple `newContainer*`, input, table, and progress families in `4-ui.orig.js` | Covered by existing Zx components and documented composition; these are not delta items merely because the legacy factory names differ. |
|
|
65
|
+
|
|
66
|
+
### Recommended additions to Zx core
|
|
67
|
+
|
|
68
|
+
| Priority | Missing reusable contract | Evidence and proposed boundary |
|
|
69
|
+
| --- | --- | --- |
|
|
70
|
+
| P0 | **EntityRef** | ZeyOS has a large family of linked/static entity presentations with subtitle, owner/group/assignee context, fork, and record actions: [`newLinkEntity*`](../zeyos/ext/global.orig/4-ui.orig.js#L225) and [`newEntityStatic`/`newEntity*`](../zeyos/ext/global.orig/4-ui.orig.js#L8262). A generic `EntityRef` should own icon/title/subtitle/metadata/link/action semantics; ZeyOS routing, permissions, and context menus remain injected. `Card` is too large for dense table/feed rows. |
|
|
71
|
+
| P0 | **FileItem / FileList** | Existing-file, temporary-file, waiting/progress, MIME, size, and download rows recur in [`newFile`, `newFileTemp`, and `newFileWait`](../zeyos/ext/global.orig/4-ui.orig.js#L8158). `FieldUpload` owns selection/upload but not durable file presentation. Core should render file identity/state/actions; transport, authorization, preview, and download URLs stay with the host. |
|
|
72
|
+
| P0 | **ActivityList / ActivityItem** | [`newFeed`](../zeyos/ext/global.orig/4-ui.orig.js#L8704) combines chronological records, comments, attachments, likes, and incremental updates. Core should own an accessible chronological list, grouping, loading/empty state, and action slots. Posting, reactions, channels, permissions, and persistence remain application code. |
|
|
73
|
+
| P1 | **Scheduler** | The current calendar implements agenda/day/week/month/year views, timed and spanning items, keyboard/routing affordances, and dense collision layout in [`calendar.orig.js`](../zeyos/ext/mod/calendar.orig.js#L61). A generic scheduler is a real core gap, but should be a separate workstream with interval-layout and accessibility invariants; recurrence, DAV, permissions, and routes are adapters/application logic. |
|
|
74
|
+
| P1 | **FacetList** | Counted activity/status/tag/entity side filters appear in [`newNavActivityStatus`](../zeyos/ext/global.orig/4-ui.orig.js#L3967), `newNavTag`, and `newNavEntity`. `Filter` is an expression author, not a compact persistent facet navigator. Core should own selection/count/collapse/loading behavior; query mapping stays injected. |
|
|
75
|
+
| P1 | **EditorHost** | ZeyOS uses plain/Markdown/contenteditable/iframe editors through [`newEditor`](../zeyos/ext/global.orig/4-ui.orig.js#L1607) and `newFrameEditor`. Like `Chart`, core should provide labels, toolbar/action slots, value/lifecycle, dirty/read-only/error states, and an injected engine adapter. Sanitization and document/media policy must not be implicit core behavior. |
|
|
76
|
+
| P1 | **ColorPicker** | The reusable swatch picker is [`newCl`](../zeyos/ext/global.orig/4-ui.orig.js#L3753). A dependency-free accessible swatch/custom-color picker belongs in core and would also serve the Theme Studio. |
|
|
77
|
+
| P2 | **Metric / Summary** | [`newSummary`](../zeyos/ext/global.orig/4-ui.orig.js#L7312) repeatedly formats counts, money, timing, size, stock, and relative values. These can currently be composed from Card and format helpers, but a small semantic Metric/DescriptionList pair would remove repeated markup without importing business formulas. |
|
|
78
|
+
| P2 | **RecordPreview** | Typed preview builders for appointments, contacts, links, messages, tasks, and tickets start at [`newPreviewForm`](../zeyos/ext/global.orig/4-ui.orig.js#L9589). Core should offer a generic preview anatomy or engine-neutral preview host, not one component per ZeyOS entity. |
|
|
79
|
+
| P2 | **Shortcut / Kbd** | Launcher and menus expose shortcuts but Zx has no reusable semantic `<kbd>` treatment. A tiny factory is justified once shortcuts appear outside those components. |
|
|
80
|
+
|
|
81
|
+
### Adapter work, not new core components
|
|
82
|
+
|
|
83
|
+
- A **ZeyOS Filter compiler** mapping allowlisted AST field/operator IDs to the server's plural
|
|
84
|
+
`filters` query shape, plus a parser for stored legacy filter state. Compilation must use bound/
|
|
85
|
+
structured values and never accept raw SQL or URL fragments.
|
|
86
|
+
- A shared **ZeyOS field/status/priority catalogue** built from runtime schemas and localization,
|
|
87
|
+
feeding `Field`, `Filter`, `Select.status()`, and `Select.priority()` without hard-coding
|
|
88
|
+
entity-specific policy in core.
|
|
89
|
+
- **EntityRef/FileItem/ActivityList adapters** that resolve routes, icons, permissions, server
|
|
90
|
+
payloads, and action menus while leaving their visual/interaction contracts reusable.
|
|
91
|
+
- Optional persistence connectors for column visibility/order, sidebar state, saved filters, recent
|
|
92
|
+
items, and theme preferences. Core should expose serializable state and events only.
|
|
93
|
+
|
|
94
|
+
### Deliberately application-owned
|
|
95
|
+
|
|
96
|
+
Routing/history, authentication/session/logout, authorization, server transport/caching, saved-view
|
|
97
|
+
storage, audit policy, transaction tax/discount/subtotal/posting formulas, optimistic writes/undo,
|
|
98
|
+
calendar recurrence/DAV synchronization, rich-text sanitization, and activity actions are not
|
|
99
|
+
design-system responsibilities. Moving them into Zx would reproduce ZeyOS application logic inside
|
|
100
|
+
the library and make Xenon less reusable.
|
|
101
|
+
|
|
62
102
|
### Launcher contract
|
|
63
103
|
|
|
64
|
-
The
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
104
|
+
The launcher searches applications, recent records, and grouped remote record types. The generic
|
|
105
|
+
component supplies the tile/list layouts, pinned-order ranking, current-route marker, request
|
|
106
|
+
cancellation, spatial keyboard movement, visible keyboard hints, native link metadata, and a
|
|
107
|
+
cancelable action. The optional ZeyOS adapter accepts all 29 prototype modules plus forks and
|
|
108
|
+
weblets, cached or async recent items, grouped legacy search payloads, permission/current state,
|
|
109
|
+
and host icon renderers. All state is injected; the adapter reads no shell globals and deliberately
|
|
110
|
+
does not become a second router.
|
|
69
111
|
|
|
70
112
|
### Account contract
|
|
71
113
|
|
|
72
|
-
|
|
73
|
-
logout,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
actions without owning routes or session state. `AccountMenu` now provides that composition over
|
|
77
|
-
`MenuButton`; a future shared low-level `Menu` remains an internal consolidation opportunity, not
|
|
78
|
-
an adoption blocker.
|
|
114
|
+
A typical account surface includes identity, role-dependent links, language, authentication and
|
|
115
|
+
logout, preferences, and About/version content. `AccountMenu` composes `Avatar` with the existing
|
|
116
|
+
menu behavior and emits actions without owning routes or session state. The host decides which
|
|
117
|
+
actions exist and what each one does.
|
|
79
118
|
|
|
80
119
|
## Table and transaction follow-ups
|
|
81
120
|
|
|
@@ -111,26 +150,3 @@ owns loading/empty/error states, and mirrors its data in an accessible table. Ch
|
|
|
111
150
|
default adapter; Frappe Charts remains the lean ERP-oriented alternative, uPlot a specialized
|
|
112
151
|
time-series candidate, and ECharts an opt-in advanced adapter. Any additional package still
|
|
113
152
|
requires explicit dependency approval.
|
|
114
|
-
|
|
115
|
-
## Review corrections completed
|
|
116
|
-
|
|
117
|
-
- Generated API records no longer let helper typedefs overwrite component options; inline JSDoc
|
|
118
|
-
tags are parsed, and audited runtime events are present in types and documentation.
|
|
119
|
-
- Form documentation exposes `Form`, `Fieldset`, and `Field`; `MonthPicker` has its own constructor
|
|
120
|
-
type.
|
|
121
|
-
- Theme Studio destroys registered component instances on every rebuild and describes its honest
|
|
122
|
-
family-level coverage.
|
|
123
|
-
- Documentation separates Presets from green-accent Examples and uses callable preset names.
|
|
124
|
-
- Current source and documentation no longer carry branding from the retired framework experiment.
|
|
125
|
-
|
|
126
|
-
## Recommended sequence
|
|
127
|
-
|
|
128
|
-
1. Ship the Zx runtime and delegate the current compact DOM/event seams; verify no navigation or
|
|
129
|
-
listener regressions.
|
|
130
|
-
2. Mount `Launcher`, `Avatar`/`AccountMenu`, and `AppSidebar`/`AppRail` behind the current shell
|
|
131
|
-
fixtures, permission filters, and preference store.
|
|
132
|
-
3. Replace high-volume `UI.new*` families, one discriminating fixture set at a time.
|
|
133
|
-
4. Introduce `Grid.BillingItems()` where its generic schema fits; add domain presets only with
|
|
134
|
-
formula and rounding fixtures.
|
|
135
|
-
5. Inject Chart.js into `ChartJsAdapter` only on analytical surfaces that need it; keep the engine
|
|
136
|
-
out of the base Zx runtime bundle.
|
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Xenon Design System (Zx)
|
|
2
2
|
|
|
3
|
-
Xenon is
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
Xenon is a dependency-free design system for browser applications; Zx is its vanilla-JavaScript
|
|
4
|
+
implementation. It combines foundations, accessible components, repeatable workflow patterns,
|
|
5
|
+
and application layouts in plain ES2022 modules. Source modules run directly in a browser; the
|
|
6
|
+
distribution also provides ESM and classic-script bundles. Xenon originated at ZeyOS, while its
|
|
7
|
+
components and contracts remain product- and framework-agnostic.
|
|
8
8
|
|
|
9
9
|
The [design-system audit](./DESIGN-SYSTEM.md) records current ZeyOS coverage, missing shell
|
|
10
10
|
patterns, the adoption boundary, transaction-grid follow-ups, and chart-engine candidates.
|
|
@@ -41,15 +41,15 @@ For an application built from classic scripts, the IIFE bundle exposes the same
|
|
|
41
41
|
</script>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
Import
|
|
44
|
+
Import a component source module directly when a bundler needs the narrowest possible graph:
|
|
45
45
|
|
|
46
46
|
```js
|
|
47
47
|
import { Slider } from '@zeyos/zx/src/components/slider/slider.js';
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
The package also exposes the bundled ESM entry for ordinary named imports. Load the complete
|
|
51
|
+
stylesheet either way: it contains the shared tokens and cross-component states that make the
|
|
52
|
+
system coherent, while JavaScript can still be tree-shaken or imported component by component.
|
|
53
53
|
|
|
54
54
|
TypeScript definitions ship with the package. They are generated from the JSDoc that documents
|
|
55
55
|
every option, method, and event, so `new Slider(null, { … })` is checked against `SliderOptions`
|
|
@@ -99,7 +99,7 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
99
99
|
| `Toggle` | Native-button switch with a separate submitted value. |
|
|
100
100
|
| `Search` | Search input with debounced input, submit, and clear events. |
|
|
101
101
|
| `Launcher` | Cmd/Ctrl+K application and record launcher with ranked local items and abortable grouped sources. |
|
|
102
|
-
| `Select` | APG combobox with local or async filtering, pinned
|
|
102
|
+
| `Select` | APG combobox with local or async filtering, pinned items, priority/status/permission presets, and an optional ZeyOS entity picker. |
|
|
103
103
|
| `Checklist` | Searchable checkbox group with optional async loading. |
|
|
104
104
|
| `TagPicker` | Multi-select combobox that keeps its selection as removable tags. |
|
|
105
105
|
| `NumberField` | APG spinbutton with step buttons, ranges, units, and wrapping. |
|
|
@@ -158,12 +158,12 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
158
158
|
| API | Description |
|
|
159
159
|
| --- | --- |
|
|
160
160
|
| `Groupbox` | Collapsible section backed by native `<details>`. |
|
|
161
|
+
| `Card` | Semantic content/record surface with media, native title link, actions, and footer. |
|
|
161
162
|
| `Panel` | Framed, optionally collapsible section with a footer. |
|
|
162
163
|
| `MasterPanel` | Full-height application panel with fixed header actions and footer. |
|
|
163
164
|
| `Tabbox` | APG tabs in four appearances, with lazy content, closing, badges, and disabled states. |
|
|
164
165
|
| `NavigationBar` | Responsive application navigation with optional tab panels and overflow. |
|
|
165
|
-
| `AppSidebar` | Expanded vertical application navigation
|
|
166
|
-
| `AppRail` | Minimized vertical/horizontal application navigation with flyout-only descendants. |
|
|
166
|
+
| `AppSidebar` | Expanded or minimized vertical application navigation plus horizontal rails; descendants are inline only while expanded. |
|
|
167
167
|
| `Toolbar` | APG toolbar: one tab stop, arrow-key movement, and overflow into a menu. |
|
|
168
168
|
| `SplitView` | Resizable two-pane split with a keyboard-operable separator. |
|
|
169
169
|
| `Stepper` | Linear multi-step progress with completed, active, and error states. |
|
|
@@ -297,7 +297,7 @@ classic-script distribution tests.
|
|
|
297
297
|
|
|
298
298
|
```sh
|
|
299
299
|
npm test # Node unit tests plus semantic-token lint
|
|
300
|
-
npm run build # writes ESM, global,
|
|
300
|
+
npm run build # writes ESM, ZeyOS, global, CSS, and declaration assets to dist/
|
|
301
301
|
npm run build:site # assembles the deployable documentation site into site/
|
|
302
302
|
npm run serve:site # serves site/ exactly as it will be deployed
|
|
303
303
|
```
|
|
@@ -313,28 +313,7 @@ import { Table, Message } from '@zeyos/zx';
|
|
|
313
313
|
import '@zeyos/zx/zx.css';
|
|
314
314
|
```
|
|
315
315
|
|
|
316
|
-
Additional entry points: `@zeyos/zx/zeyos` (the schema-driven ZeyOS binding)
|
|
317
|
-
|
|
316
|
+
Additional entry points: `@zeyos/zx/zeyos` (the schema-driven ZeyOS binding) and
|
|
317
|
+
`@zeyos/zx/global` for classic script tags.
|
|
318
318
|
|
|
319
|
-
Documentation lives at <https://zx.zeyos.com
|
|
320
|
-
package are published.
|
|
321
|
-
|
|
322
|
-
## `gx` compatibility layer
|
|
323
|
-
|
|
324
|
-
During an incremental migration, load the global API before the compatibility bundle:
|
|
325
|
-
|
|
326
|
-
```html
|
|
327
|
-
<link rel="stylesheet" href="/assets/zx.css">
|
|
328
|
-
<script src="/assets/zx.global.js"></script>
|
|
329
|
-
<script src="/assets/zx-compat.global.js"></script>
|
|
330
|
-
<script>
|
|
331
|
-
// Only for gx-era free functions; an existing ZeyOS __() is preserved:
|
|
332
|
-
gx.compat.installGlobals();
|
|
333
|
-
</script>
|
|
334
|
-
```
|
|
335
|
-
|
|
336
|
-
The compatibility bundle always exposes `window.gx` and installs only the element
|
|
337
|
-
`store`/`retrieve`/`eliminate` shim automatically. Legacy globals and prototype conveniences are
|
|
338
|
-
an explicit opt-in through `gx.compat.installGlobals()`; it never replaces an existing `__`.
|
|
339
|
-
See [MIGRATION.md](./MIGRATION.md) for
|
|
340
|
-
class mappings, script replacement, deliberate behavior changes, and unsupported legacy APIs.
|
|
319
|
+
Documentation lives at <https://zx.zeyos.com>.
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type AppIconOptions = {
|
|
3
|
+
/**
|
|
4
|
+
* Icon name, node, or lazy renderer.
|
|
5
|
+
*/
|
|
6
|
+
icon?: string | Node | (() => string | Node) | null;
|
|
7
|
+
/**
|
|
8
|
+
* Identity colour; falls back to the accent colour.
|
|
9
|
+
*/
|
|
10
|
+
color?: string | null;
|
|
11
|
+
/**
|
|
12
|
+
* Edge length in pixels or any CSS length.
|
|
13
|
+
*/
|
|
14
|
+
size?: number | string;
|
|
15
|
+
/**
|
|
16
|
+
* Glyph size.
|
|
17
|
+
*/
|
|
18
|
+
iconSize?: number | string;
|
|
19
|
+
/**
|
|
20
|
+
* Accessible image label; null makes the icon decorative.
|
|
21
|
+
*/
|
|
22
|
+
label?: string | null;
|
|
23
|
+
/**
|
|
24
|
+
* Optional corner badge.
|
|
25
|
+
*/
|
|
26
|
+
badge?: string | number | null;
|
|
27
|
+
/**
|
|
28
|
+
* Whether the icon represents the active application.
|
|
29
|
+
*/
|
|
30
|
+
selected?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* CSS-first glass treatment.
|
|
33
|
+
*/
|
|
34
|
+
glass?: false | 'subtle' | 'strong';
|
|
35
|
+
/**
|
|
36
|
+
* Additional class names.
|
|
37
|
+
*/
|
|
38
|
+
class?: string | string[];
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* @typedef {Object} AppIconOptions
|
|
42
|
+
* @property {string|Node|(()=>string|Node)|null} [icon=null] Icon name, node, or lazy renderer.
|
|
43
|
+
* @property {string|null} [color=null] Identity colour; falls back to the accent colour.
|
|
44
|
+
* @property {number|string} [size=36] Edge length in pixels or any CSS length.
|
|
45
|
+
* @property {number|string} [iconSize='52%'] Glyph size.
|
|
46
|
+
* @property {string|null} [label=null] Accessible image label; null makes the icon decorative.
|
|
47
|
+
* @property {string|number|null} [badge=null] Optional corner badge.
|
|
48
|
+
* @property {boolean} [selected=false] Whether the icon represents the active application.
|
|
49
|
+
* @property {false|'subtle'|'strong'} [glass='subtle'] CSS-first glass treatment.
|
|
50
|
+
* @property {string|string[]} [class] Additional class names.
|
|
51
|
+
*/
|
|
52
|
+
/**
|
|
53
|
+
* Stable application-identity tile with progressive CSS glass treatment.
|
|
54
|
+
* @extends {Component<AppIconOptions>}
|
|
55
|
+
*/
|
|
56
|
+
export declare class AppIcon extends Component<AppIconOptions> {
|
|
57
|
+
_createdRoot: boolean;
|
|
58
|
+
_snapshot: import("../../core/dom.js").TargetSnapshot;
|
|
59
|
+
_state: {
|
|
60
|
+
icon?: string | Node | (() => string | Node) | null;
|
|
61
|
+
color?: string | null;
|
|
62
|
+
size?: number | string;
|
|
63
|
+
iconSize?: number | string;
|
|
64
|
+
label?: string | null;
|
|
65
|
+
badge?: string | number | null;
|
|
66
|
+
selected?: boolean;
|
|
67
|
+
glass?: false | 'subtle' | 'strong';
|
|
68
|
+
class?: string | string[];
|
|
69
|
+
};
|
|
70
|
+
_appliedClasses: any[] | string[];
|
|
71
|
+
static cssName: string;
|
|
72
|
+
/** @type {Readonly<AppIconOptions>} */
|
|
73
|
+
static defaults: Readonly<AppIconOptions>;
|
|
74
|
+
/** @returns {HTMLElement} */
|
|
75
|
+
render(): HTMLElement;
|
|
76
|
+
/** Updates identity or presentation without replacing the root. @param {Partial<AppIconOptions>} values @returns {this} */
|
|
77
|
+
set(values?: Partial<AppIconOptions>): this;
|
|
78
|
+
/** Restores an enhanced target. @returns {void} */
|
|
79
|
+
destroy(): void;
|
|
80
|
+
/** @returns {void} */
|
|
81
|
+
_sync(): void;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Creates an AppIcon element without retaining a component lifecycle handle.
|
|
85
|
+
* @param {AppIconOptions} [options={}] Icon options.
|
|
86
|
+
* @returns {HTMLElement}
|
|
87
|
+
*/
|
|
88
|
+
export declare function appIcon(options?: AppIconOptions): HTMLElement;
|