@zeyos/zx 4.1.0 → 4.2.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 +61 -0
- package/DESIGN-SYSTEM.md +33 -3
- package/README.md +17 -5
- package/dist/types/components/app-icon/app-icon.d.ts +8 -1
- package/dist/types/components/aurora/aurora.d.ts +72 -0
- package/dist/types/components/calendar/calendar-model.d.ts +202 -0
- package/dist/types/components/calendar/calendar.d.ts +500 -0
- package/dist/types/components/card-view/card-view.d.ts +303 -0
- package/dist/types/components/card-view/record-card.d.ts +242 -0
- package/dist/types/components/kanban-view/kanban-view.d.ts +572 -0
- package/dist/types/components/table/table.d.ts +120 -31
- package/dist/types/components/table-view/table-view.d.ts +192 -0
- package/dist/types/components/view/record-view.d.ts +464 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/zeyos/calendar.d.ts +91 -0
- package/dist/types/zeyos/icons.d.ts +19 -3
- package/dist/types/zeyos/index.d.ts +4 -0
- package/dist/types/zeyos/legacy-saved-views.d.ts +66 -0
- package/dist/types/zeyos/saved-views.d.ts +331 -0
- package/dist/types/zeyos/view.d.ts +305 -0
- package/dist/zx-zeyos.esm.js +4627 -1460
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +2492 -410
- package/dist/zx.esm.js +4891 -115
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +4891 -115
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +1702 -191
- package/docs/llms.md +207 -20
- package/docs/llms.txt +16 -6
- package/package.json +1 -1
- package/src/components/app-icon/app-icon.css +140 -30
- package/src/components/app-icon/app-icon.js +32 -5
- package/src/components/app-rail/app-rail.css +11 -2
- package/src/components/app-sidebar/app-sidebar.css +11 -2
- package/src/components/aurora/aurora.css +143 -0
- package/src/components/aurora/aurora.js +146 -0
- package/src/components/avatar/avatar.css +1 -1
- package/src/components/button/button.css +34 -2
- package/src/components/calendar/calendar-model.js +402 -0
- package/src/components/calendar/calendar.css +567 -0
- package/src/components/calendar/calendar.js +1524 -0
- package/src/components/card/card.css +25 -3
- package/src/components/card-view/card-view.css +389 -0
- package/src/components/card-view/card-view.js +527 -0
- package/src/components/card-view/record-card.js +392 -0
- package/src/components/context-menu/context-menu.css +2 -2
- package/src/components/date-picker/date-picker.css +15 -3
- package/src/components/datebox/date-range-box.css +15 -2
- package/src/components/datebox/datebox.css +16 -3
- package/src/components/dropdown/dropdown.css +15 -3
- package/src/components/kanban-view/kanban-view.css +216 -0
- package/src/components/kanban-view/kanban-view.js +1228 -0
- package/src/components/launcher/launcher.css +18 -5
- package/src/components/master-panel/master-panel.css +14 -3
- package/src/components/menu-button/menu-button.css +2 -2
- package/src/components/message/message.css +15 -10
- package/src/components/modal/modal.css +15 -3
- package/src/components/navigation-bar/navigation-bar.css +17 -5
- package/src/components/panel/panel.css +10 -2
- package/src/components/select/select.css +20 -4
- package/src/components/sheet/sheet.css +4 -1
- package/src/components/table/table.css +80 -4
- package/src/components/table/table.js +322 -37
- package/src/components/table-view/table-view.css +18 -0
- package/src/components/table-view/table-view.js +347 -0
- package/src/components/tag-picker/tag-picker.css +15 -3
- package/src/components/tooltip/tooltip.css +15 -3
- package/src/components/view/record-view.css +114 -0
- package/src/components/view/record-view.js +770 -0
- package/src/index.js +15 -0
- package/src/zeyos/calendar.js +115 -0
- package/src/zeyos/icons.js +15 -8
- package/src/zeyos/index.js +13 -0
- package/src/zeyos/launcher.js +2 -2
- package/src/zeyos/legacy-saved-views.js +155 -0
- package/src/zeyos/saved-views.js +815 -0
- package/src/zeyos/table.js +3 -1
- package/src/zeyos/view.js +543 -0
- package/styles/icons.css +3 -10
- package/styles/tokens/semantic.css +74 -2
- package/styles/zx.css +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,67 @@ and friends remain the complete record.
|
|
|
8
8
|
|
|
9
9
|
## Unreleased
|
|
10
10
|
|
|
11
|
+
## 4.2.0 — 2026-08-26
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **Calendar scheduling.** `Calendar` adds agenda/day/week/month/year views, local-time collision
|
|
16
|
+
and spanning layout, range selection, now/loading states, and pointer plus keyboard move/resize.
|
|
17
|
+
Optimistic updates are the default with an idempotent version-guarded rollback; setting
|
|
18
|
+
`optimistic: false` leaves updates application-controlled. The optional ZeyOS adapter maps
|
|
19
|
+
expanded appointment occurrences and Unix seconds while recurrence, DAV, and persistence remain
|
|
20
|
+
outside core.
|
|
21
|
+
- **Shared record views.** `TableView`, `CardView`, and `KanbanView` use one schema-friendly field,
|
|
22
|
+
data, sort, selection, loading, and versioned view-state contract. Tables can expose accessible
|
|
23
|
+
column ordering; cards support safe preview media and grouped responsive layouts; Kanban boards
|
|
24
|
+
add columns, swim lanes, WIP indicators, and cancelable pointer/keyboard moves in local or
|
|
25
|
+
application-controlled mode. The optional ZeyOS binding derives fields and projections from an
|
|
26
|
+
injected client without making validation, permissions, or routing core concerns. Its optional
|
|
27
|
+
saved-view registry persists named Table/Card/Kanban state by user, workspace, and resource
|
|
28
|
+
through an injected atomic transport; a compatibility adapter reuses ZeyOS's existing
|
|
29
|
+
`userfields` endpoints without trusting a client-supplied user identity.
|
|
30
|
+
- **Aurora surfaces.** `Aurora` adds a dependency-free, one- to four-colour ambient-light layer
|
|
31
|
+
with six geometries, bounded palettes and intensity, CSS-only composition, and deterministic
|
|
32
|
+
reduced-motion, reduced-transparency, and forced-colour fallbacks. The documentation includes a
|
|
33
|
+
live application composition and an earlier-studies comparison page.
|
|
34
|
+
|
|
35
|
+
### Changed
|
|
36
|
+
|
|
37
|
+
- Liquid-glass recipes now distinguish compact floating overlays from reading-sized panels and
|
|
38
|
+
apply consistently to menus, pickers, tooltips, column controls, toasts, Launcher, Modal,
|
|
39
|
+
Dialog, and overlay Sheets. Docked Sheets remain opaque.
|
|
40
|
+
- The documentation search is narrower at desktop widths, and Avatar now appears under Layout.
|
|
41
|
+
- **Application identity now has one deliberate shape language.** `zeyosAppIcon()` and application
|
|
42
|
+
destinations in Launcher/AppSidebar use quiet circular chromatic lenses with crisp centred white
|
|
43
|
+
glyphs; `moduleChip()` remains a low-radius tile for entities, nested destinations, and records.
|
|
44
|
+
Per-icon blur and hover movement were removed, while rim/light/shadow feedback and material-mode
|
|
45
|
+
differences remain visible without changing geometry.
|
|
46
|
+
|
|
47
|
+
### Fixed
|
|
48
|
+
|
|
49
|
+
- AppIcon now preserves native button/link semantics when enhancing an interactive target, forwards
|
|
50
|
+
ZeyOS badge and selection state, ignores hover on disabled destinations, and uses forced-colour
|
|
51
|
+
system values for badges.
|
|
52
|
+
- The AppSidebar example no longer replaces AppIcon's internal surface, so collapsed rails retain
|
|
53
|
+
the same material, focus, selection, and accessibility behavior as expanded navigation.
|
|
54
|
+
|
|
55
|
+
## 4.1.1 — 2026-08-25
|
|
56
|
+
|
|
57
|
+
### Changed
|
|
58
|
+
|
|
59
|
+
- **Material recipes are visibly distinct.** Flat, Glass, and Deep glass now resolve shared
|
|
60
|
+
semantic tokens consumed by application icons, buttons, raised cards, and transient messages;
|
|
61
|
+
reduced-transparency and forced-colour environments retain opaque accessible fallbacks.
|
|
62
|
+
- **Theme Studio documents the material system.** Its component showcase now includes the shared
|
|
63
|
+
AppIcon and raised-surface treatments, and explains which component families consume them.
|
|
64
|
+
- **Application identity is more consistent.** ZeyOS AppIcons use centred white glyphs, a tighter
|
|
65
|
+
corner radius, CSS-only depth, and explicit hover and focus feedback across module colours.
|
|
66
|
+
|
|
67
|
+
### Fixed
|
|
68
|
+
|
|
69
|
+
- AppIcons without badges no longer append a visible `null` text node, preserving exact glyph
|
|
70
|
+
centring and clean accessible output.
|
|
71
|
+
|
|
11
72
|
## 4.1.0 — 2026-08-25
|
|
12
73
|
|
|
13
74
|
### Added
|
package/DESIGN-SYSTEM.md
CHANGED
|
@@ -34,6 +34,8 @@ and navigation remain application-owned.
|
|
|
34
34
|
| Dialogs, sheets, dropdowns, context menus, tooltips, messages | Covered | Consolidate duplicate menu behavior before building account/launcher surfaces. |
|
|
35
35
|
| Tabs, panels, toolbar, breadcrumbs, stepper, split view, dock | Covered | Compose layouts; do not let navigation components own routes. |
|
|
36
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
|
+
| Operational calendars and scheduling | Covered | `Calendar` provides agenda/day/week/month/year views, local collision/spanning layout, selection, and configurable optimistic pointer/keyboard edits. The host owns loading, persistence, permissions, recurrence rules, and DAV. |
|
|
38
|
+
| Record table, card, and Kanban views | Covered by one shared contract | `TableView`, `CardView`, and `KanbanView` share schema fields, records, sort, selection, field controls, loading, and versioned state. Core remains persistence-neutral; the optional ZeyOS registry coordinates named layouts through an injected server transport. The host still owns permissions, server validation, and rollback. |
|
|
37
39
|
| 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
40
|
| 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
41
|
| 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. |
|
|
@@ -57,6 +59,8 @@ a Zx component or a documented composition are not counted as gaps.
|
|
|
57
59
|
| ZeyOS behavior | Source evidence | Xenon/Zx coverage |
|
|
58
60
|
| --- | --- | --- |
|
|
59
61
|
| 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. |
|
|
62
|
+
| Agenda/day/week/month/year scheduling | [`calendar.orig.js`](../zeyos/ext/mod/calendar.orig.js#L61) | `Calendar` covers timed collisions, spanning lanes, windowed range events, activity year view, selection, now state, and pointer/keyboard move/resize. `zeyosCalendar()` maps expanded appointment rows and Unix seconds without importing recurrence, DAV, routing, or permissions into core. |
|
|
63
|
+
| Record table/card collections and reusable view state | [`_newCrdLstTbl`](../zeyos/ext/global.orig/4-ui.orig.js#L4457), [`newCrd`](../zeyos/ext/global.orig/4-ui.orig.js#L4649), and [`newTbl`](../zeyos/ext/global.orig/4-ui.orig.js#L4782) | `TableView`, `CardView`, and the additive `KanbanView` consume the same field descriptors and JSON-safe layout state. `buildZeyosViewConfig()` derives them from the runtime schema; `SavedViewRegistry` adds exact user/workspace/resource scoping and can bridge the existing `userfields` endpoints. Neither imports the client into core. |
|
|
60
64
|
| 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
65
|
| 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
66
|
| 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. |
|
|
@@ -70,7 +74,6 @@ a Zx component or a documented composition are not counted as gaps.
|
|
|
70
74
|
| 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
75
|
| 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
76
|
| 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
77
|
| 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
78
|
| 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
79
|
| 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. |
|
|
@@ -94,7 +97,7 @@ a Zx component or a documented composition are not counted as gaps.
|
|
|
94
97
|
### Deliberately application-owned
|
|
95
98
|
|
|
96
99
|
Routing/history, authentication/session/logout, authorization, server transport/caching, saved-view
|
|
97
|
-
storage, audit policy, transaction tax/discount/subtotal/posting formulas,
|
|
100
|
+
storage, audit policy, transaction tax/discount/subtotal/posting formulas, server reconciliation and undo history,
|
|
98
101
|
calendar recurrence/DAV synchronization, rich-text sanitization, and activity actions are not
|
|
99
102
|
design-system responsibilities. Moving them into Zx would reproduce ZeyOS application logic inside
|
|
100
103
|
the library and make Xenon less reusable.
|
|
@@ -127,10 +130,37 @@ currency, line-total, and hierarchy schema while retaining Table's editing contr
|
|
|
127
130
|
follow-ups, deliberately separate from this generic preset:
|
|
128
131
|
|
|
129
132
|
- summary/footer rows and grouped subtotals;
|
|
130
|
-
- column
|
|
133
|
+
- persistence connectors for versioned view state (column order and visibility are now component capabilities);
|
|
131
134
|
- product-specific invoice/transaction presets with tax, discount, rounding, and formula golden tests;
|
|
132
135
|
- server persistence, optimistic rejection, and undo owned by the application/controller layer.
|
|
133
136
|
|
|
137
|
+
## Record-view contract
|
|
138
|
+
|
|
139
|
+
`RecordView` is the presentation-neutral base for `TableView`, `CardView`, and `KanbanView`.
|
|
140
|
+
Stable field IDs allow a runtime ZeyOS schema to drive every presentation, while per-view properties
|
|
141
|
+
add table widths, card previews, or board grouping without changing how values, sorting, selection,
|
|
142
|
+
and field visibility work. Each view returns a versioned JSON-safe configuration through
|
|
143
|
+
`getViewState()`; record data and rendered Nodes are deliberately excluded.
|
|
144
|
+
|
|
145
|
+
The optional ZeyOS adapter builds the shared descriptors and server projection, including hidden
|
|
146
|
+
title, media, column, and swim-lane fields. It can page any concrete record view through an injected
|
|
147
|
+
client. Preference storage remains outside Zx, and Kanban moves are cancelable: local mode updates a
|
|
148
|
+
record clone, while external mode waits for the application to supply accepted server state.
|
|
149
|
+
|
|
150
|
+
## Calendar contract
|
|
151
|
+
|
|
152
|
+
`Calendar` normalizes arbitrary event records into stable IDs, copied local Dates, optional colour
|
|
153
|
+
and location, and per-event edit policies. Agenda, day, week, month, and year are presentations of
|
|
154
|
+
the same event set. The interval helpers operate on calendar days rather than fixed 24-hour spans,
|
|
155
|
+
so DST does not move a date; timed overlaps get deterministic columns and all-day/multi-day items
|
|
156
|
+
get non-overlapping clipped lanes.
|
|
157
|
+
|
|
158
|
+
Move and resize proposals are cancelable and keyboard-equivalent. Optimistic mode is the default
|
|
159
|
+
and provides a version-guarded `revert()` that cannot overwrite a newer local edit. Controlled mode
|
|
160
|
+
emits the same proposal without local mutation. The optional ZeyOS adapter maps expanded
|
|
161
|
+
appointment occurrences and Unix seconds while the application retains transport, recurrence/DAV,
|
|
162
|
+
permissions, routing, validation, and conflict handling.
|
|
163
|
+
|
|
134
164
|
## Chart-engine candidates
|
|
135
165
|
|
|
136
166
|
Chart.js was selected for the first adapter. It is pinned at 4.5.1 as a development dependency for
|
package/README.md
CHANGED
|
@@ -98,7 +98,6 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
98
98
|
| `CheckButton` | Two-state pressed button with optional state-specific labels. |
|
|
99
99
|
| `Toggle` | Native-button switch with a separate submitted value. |
|
|
100
100
|
| `Search` | Search input with debounced input, submit, and clear events. |
|
|
101
|
-
| `Launcher` | Cmd/Ctrl+K application and record launcher with ranked local items and abortable grouped sources. |
|
|
102
101
|
| `Select` | APG combobox with local or async filtering, pinned items, priority/status/permission presets, and an optional ZeyOS entity picker. |
|
|
103
102
|
| `Checklist` | Searchable checkbox group with optional async loading. |
|
|
104
103
|
| `TagPicker` | Multi-select combobox that keeps its selection as removable tags. |
|
|
@@ -126,16 +125,18 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
126
125
|
| `MenuButton` | APG menu button built on `Dropdown`. |
|
|
127
126
|
| `ContextMenu` | APG right-click menu for a region or, via `selector`, per row. |
|
|
128
127
|
| `Tooltip`, `tooltip()`, `describe()` | Hover/focus description bubble anchored with `position()`. |
|
|
129
|
-
| `Avatar` | Fixed-size user image with initials fallback and optional presence. |
|
|
130
|
-
| `AccountMenu` | Identity trigger and grouped account actions over `MenuButton`. |
|
|
131
128
|
|
|
132
129
|
### Data
|
|
133
130
|
|
|
134
131
|
| API | Description |
|
|
135
132
|
| --- | --- |
|
|
136
133
|
| `Table` | Sortable/selectable table with typed transaction columns, flat-data hierarchy/treegrid projection, and opt-in cell/row editing. |
|
|
134
|
+
| `TableView` | Record-oriented Table composition with shared fields, portable state, column visibility/order, sorting, and selection. |
|
|
135
|
+
| `CardView` | Responsive record cards with configurable fields, safe preview media, grouping, actions, sorting, and selection. |
|
|
136
|
+
| `KanbanView` | Record board with configurable columns, swim lanes, WIP guidance, and cancelable pointer/keyboard movement. |
|
|
137
137
|
| `Grid`, `Grid.BillingItems()` | Table-compatible preset surface with editable currencies, units, totals, and sub-items. |
|
|
138
138
|
| `Chart`, `ChartJsAdapter` | Accessible engine-neutral chart host and explicitly injected Chart.js adapter. |
|
|
139
|
+
| `Calendar` | Agenda/day/week/month/year scheduling with timed collisions, spanning events, range selection, and configurable optimistic drag/resize editing. |
|
|
139
140
|
| `DataFilter` | Declarative select, text, and custom filters for client-side row sets. |
|
|
140
141
|
| `TreeView` | APG tree with lazy children, filtering, and tri-state checkboxes. |
|
|
141
142
|
| `Finder` | Miller-columns hierarchy browser with an optional preview pane. |
|
|
@@ -157,8 +158,13 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
157
158
|
|
|
158
159
|
| API | Description |
|
|
159
160
|
| --- | --- |
|
|
161
|
+
| `AccountMenu` | Identity trigger and grouped account actions over `MenuButton`. |
|
|
162
|
+
| `AppIcon`, `zeyosAppIcon()`, `moduleChip()` | White-glyph identity surface: a generic tile core, circular ZeyOS application presets, compact module/entity tiles, module colour, badges, selection, and CSS-first material. |
|
|
163
|
+
| `Avatar` | Fixed-size user image with initials fallback and optional presence. |
|
|
160
164
|
| `Groupbox` | Collapsible section backed by native `<details>`. |
|
|
161
165
|
| `Card` | Semantic content/record surface with media, native title link, actions, and footer. |
|
|
166
|
+
| `Aurora` | One- to four-colour ambient canvas light; chrome, raised content, and overlays respond through shared material tokens. |
|
|
167
|
+
| `Launcher` | Cmd/Ctrl+K application and record launcher with ranked local items and abortable grouped sources. |
|
|
162
168
|
| `Panel` | Framed, optionally collapsible section with a footer. |
|
|
163
169
|
| `MasterPanel` | Full-height application panel with fixed header actions and footer. |
|
|
164
170
|
| `Tabbox` | APG tabs in four appearances, with lazy content, closing, badges, and disabled states. |
|
|
@@ -180,8 +186,8 @@ ZeyOS binding — see `src/zeyos/modules.js`.
|
|
|
180
186
|
|
|
181
187
|
Use `@zeyos/client` for ZeyOS authentication, transport, generated resource operations, and runtime
|
|
182
188
|
schema introspection. Zx adds `zx-zeyos`, a schema-driven layer above that client: inject an existing
|
|
183
|
-
client into `connect`, `zeyosTable`, `zeyosForm`, or `zeyosSelect` to generate typed
|
|
184
|
-
and async entity selectors from real resource metadata.
|
|
189
|
+
client into `connect`, `zeyosTable`, `zeyosView`, `zeyosForm`, or `zeyosSelect` to generate typed
|
|
190
|
+
record views, tables, forms, and async entity selectors from real resource metadata.
|
|
185
191
|
|
|
186
192
|
```js
|
|
187
193
|
import { createZeyosClient } from '@zeyos/client';
|
|
@@ -198,6 +204,12 @@ const editor = zeyosForm(client, 'transactions', {
|
|
|
198
204
|
});
|
|
199
205
|
```
|
|
200
206
|
|
|
207
|
+
`zeyosView()` can coordinate named Table, Card, and Kanban configurations through
|
|
208
|
+
`SavedViewRegistry`. Saved documents are isolated by exact `userId + workspaceId + resource`, keep
|
|
209
|
+
records and selection out of persistence, and use an injected atomic transport. Existing ZeyOS
|
|
210
|
+
installations can adapt their authenticated `fields`, `fields_save`, and `fields_remove` endpoints
|
|
211
|
+
with `createLegacySavedViewTransport()`; the client-provided user id is never sent as authority.
|
|
212
|
+
|
|
201
213
|
The injection design means Zx never imports or bundles `@zeyos/client`. The optional binding ships
|
|
202
214
|
separately as `dist/zx-zeyos.esm.js` and is not part of the root `src/index.js` API. See the
|
|
203
215
|
schema-driven `website/layouts/zeyos-invoices.layout.js` for list, filter, sort, edit, and create wiring.
|
|
@@ -28,6 +28,10 @@ export type AppIconOptions = {
|
|
|
28
28
|
* Whether the icon represents the active application.
|
|
29
29
|
*/
|
|
30
30
|
selected?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Identity vessel geometry.
|
|
33
|
+
*/
|
|
34
|
+
shape?: 'tile' | 'circle';
|
|
31
35
|
/**
|
|
32
36
|
* CSS-first glass treatment.
|
|
33
37
|
*/
|
|
@@ -46,16 +50,18 @@ export type AppIconOptions = {
|
|
|
46
50
|
* @property {string|null} [label=null] Accessible image label; null makes the icon decorative.
|
|
47
51
|
* @property {string|number|null} [badge=null] Optional corner badge.
|
|
48
52
|
* @property {boolean} [selected=false] Whether the icon represents the active application.
|
|
53
|
+
* @property {'tile'|'circle'} [shape='tile'] Identity vessel geometry.
|
|
49
54
|
* @property {false|'subtle'|'strong'} [glass='subtle'] CSS-first glass treatment.
|
|
50
55
|
* @property {string|string[]} [class] Additional class names.
|
|
51
56
|
*/
|
|
52
57
|
/**
|
|
53
|
-
* Stable application-identity
|
|
58
|
+
* Stable application-identity surface with progressive CSS glass treatment.
|
|
54
59
|
* @extends {Component<AppIconOptions>}
|
|
55
60
|
*/
|
|
56
61
|
export declare class AppIcon extends Component<AppIconOptions> {
|
|
57
62
|
_createdRoot: boolean;
|
|
58
63
|
_snapshot: import("../../core/dom.js").TargetSnapshot;
|
|
64
|
+
_interactiveRoot: boolean;
|
|
59
65
|
_state: {
|
|
60
66
|
icon?: string | Node | (() => string | Node) | null;
|
|
61
67
|
color?: string | null;
|
|
@@ -64,6 +70,7 @@ export declare class AppIcon extends Component<AppIconOptions> {
|
|
|
64
70
|
label?: string | null;
|
|
65
71
|
badge?: string | number | null;
|
|
66
72
|
selected?: boolean;
|
|
73
|
+
shape?: 'tile' | 'circle';
|
|
67
74
|
glass?: false | 'subtle' | 'strong';
|
|
68
75
|
class?: string | string[];
|
|
69
76
|
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type AuroraOptions = {
|
|
3
|
+
/**
|
|
4
|
+
* Geometry of the ambient light field.
|
|
5
|
+
*/
|
|
6
|
+
preset?: 'source' | 'confluence' | 'horizon' | 'diagonal' | 'edge' | 'curtain';
|
|
7
|
+
/**
|
|
8
|
+
* Zero to four concrete CSS colours. An empty list uses semantic
|
|
9
|
+
* Zx colours; shorter palettes repeat across the four gradient fields.
|
|
10
|
+
*/
|
|
11
|
+
colors?: string[];
|
|
12
|
+
/**
|
|
13
|
+
* Strength of the light field.
|
|
14
|
+
*/
|
|
15
|
+
intensity?: 'subtle' | 'balanced' | 'vivid';
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* @typedef {Object} AuroraOptions
|
|
19
|
+
* @property {'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'} [preset='source']
|
|
20
|
+
* Geometry of the ambient light field.
|
|
21
|
+
* @property {string[]} [colors=[]] Zero to four concrete CSS colours. An empty list uses semantic
|
|
22
|
+
* Zx colours; shorter palettes repeat across the four gradient fields.
|
|
23
|
+
* @property {'subtle'|'balanced'|'vivid'} [intensity='subtle'] Strength of the light field.
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* Decorative multicolour ambient light for an existing application surface.
|
|
27
|
+
* Aurora owns no application content or interaction: it enhances the target in place and renders
|
|
28
|
+
* its pointer-transparent light field behind the target's existing children.
|
|
29
|
+
* @extends {Component<AuroraOptions>}
|
|
30
|
+
*/
|
|
31
|
+
export declare class Aurora extends Component<AuroraOptions> {
|
|
32
|
+
_createdRoot: boolean;
|
|
33
|
+
_original: import("../../core/dom.js").TargetSnapshot;
|
|
34
|
+
_cleaned: boolean;
|
|
35
|
+
_initialColors: {
|
|
36
|
+
property: string;
|
|
37
|
+
value: string;
|
|
38
|
+
priority: string;
|
|
39
|
+
}[];
|
|
40
|
+
_colors: any[] | string[];
|
|
41
|
+
static cssName: string;
|
|
42
|
+
/** @type {Readonly<AuroraOptions>} */
|
|
43
|
+
static defaults: Readonly<AuroraOptions>;
|
|
44
|
+
/**
|
|
45
|
+
* Creates or enhances an Aurora surface.
|
|
46
|
+
* @param {Element|string|null} [target=null] Existing surface, selector, or null.
|
|
47
|
+
* @param {AuroraOptions} [options={}] Aurora options.
|
|
48
|
+
*/
|
|
49
|
+
constructor(target?: Element | string | null, options?: AuroraOptions);
|
|
50
|
+
/** @returns {HTMLElement} */
|
|
51
|
+
render(): HTMLElement;
|
|
52
|
+
/** Sets the light-field geometry without replacing surface content. @param {string} preset @returns {this} */
|
|
53
|
+
setPreset(preset: string): this;
|
|
54
|
+
/** Sets zero to four concrete colours without replacing surface content. @param {string[]|null} colors @returns {this} */
|
|
55
|
+
setColors(colors: string[] | null): this;
|
|
56
|
+
/** Sets the light-field strength without replacing surface content. @param {string} intensity @returns {this} */
|
|
57
|
+
setIntensity(intensity: string): this;
|
|
58
|
+
/** Restores an enhanced target exactly, or removes an owned surface. @returns {void} */
|
|
59
|
+
destroy(): void;
|
|
60
|
+
}
|
|
61
|
+
/** @param {unknown} value @returns {'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'} */
|
|
62
|
+
export declare function normalizeAuroraPreset(value: unknown): 'source' | 'confluence' | 'horizon' | 'diagonal' | 'edge' | 'curtain';
|
|
63
|
+
/** @param {unknown} value @returns {'subtle'|'balanced'|'vivid'} */
|
|
64
|
+
export declare function normalizeAuroraIntensity(value: unknown): 'subtle' | 'balanced' | 'vivid';
|
|
65
|
+
/** @param {unknown} value @returns {string[]} */
|
|
66
|
+
export declare function normalizeAuroraColors(value: unknown): string[];
|
|
67
|
+
/**
|
|
68
|
+
* Repeats a one-to-three-colour palette deterministically across four gradient fields.
|
|
69
|
+
* @param {string[]} colors
|
|
70
|
+
* @returns {string[]}
|
|
71
|
+
*/
|
|
72
|
+
export declare function expandAuroraColors(colors: string[]): string[];
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/** @typedef {'agenda'|'day'|'week'|'month'|'year'} CalendarView */
|
|
2
|
+
/** @typedef {string|((record: Record<string, any>) => unknown)} CalendarReader */
|
|
3
|
+
export type CalendarView = 'agenda' | 'day' | 'week' | 'month' | 'year';
|
|
4
|
+
export type CalendarReader = string | ((record: Record<string, any>) => unknown);
|
|
5
|
+
export type CalendarEvent = {
|
|
6
|
+
/**
|
|
7
|
+
* Stable event identifier.
|
|
8
|
+
*/
|
|
9
|
+
id: string | number;
|
|
10
|
+
/**
|
|
11
|
+
* Visible event title.
|
|
12
|
+
*/
|
|
13
|
+
title: string;
|
|
14
|
+
/**
|
|
15
|
+
* Local start date and time.
|
|
16
|
+
*/
|
|
17
|
+
start: Date;
|
|
18
|
+
/**
|
|
19
|
+
* Local end date and time; equal to start for an instant event.
|
|
20
|
+
*/
|
|
21
|
+
end: Date;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the event belongs in an all-day lane.
|
|
24
|
+
*/
|
|
25
|
+
allDay: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Optional application-supplied CSS colour.
|
|
28
|
+
*/
|
|
29
|
+
color: string | null;
|
|
30
|
+
/**
|
|
31
|
+
* Optional location.
|
|
32
|
+
*/
|
|
33
|
+
location: string;
|
|
34
|
+
/**
|
|
35
|
+
* Per-event move policy, or null to inherit.
|
|
36
|
+
*/
|
|
37
|
+
editable: boolean | null;
|
|
38
|
+
/**
|
|
39
|
+
* Per-event resize policy, or null to inherit.
|
|
40
|
+
*/
|
|
41
|
+
durationEditable: boolean | null;
|
|
42
|
+
/**
|
|
43
|
+
* Original application record.
|
|
44
|
+
*/
|
|
45
|
+
data: Record<string, any>;
|
|
46
|
+
};
|
|
47
|
+
export type CalendarNormalizeOptions = {
|
|
48
|
+
/**
|
|
49
|
+
* ID reader.
|
|
50
|
+
*/
|
|
51
|
+
eventId?: CalendarReader;
|
|
52
|
+
/**
|
|
53
|
+
* Title reader.
|
|
54
|
+
*/
|
|
55
|
+
eventTitle?: CalendarReader;
|
|
56
|
+
/**
|
|
57
|
+
* Start reader.
|
|
58
|
+
*/
|
|
59
|
+
eventStart?: CalendarReader;
|
|
60
|
+
/**
|
|
61
|
+
* End reader.
|
|
62
|
+
*/
|
|
63
|
+
eventEnd?: CalendarReader;
|
|
64
|
+
/**
|
|
65
|
+
* All-day reader.
|
|
66
|
+
*/
|
|
67
|
+
eventAllDay?: CalendarReader;
|
|
68
|
+
/**
|
|
69
|
+
* Colour reader.
|
|
70
|
+
*/
|
|
71
|
+
eventColor?: CalendarReader;
|
|
72
|
+
/**
|
|
73
|
+
* Location reader.
|
|
74
|
+
*/
|
|
75
|
+
eventLocation?: CalendarReader;
|
|
76
|
+
/**
|
|
77
|
+
* Move-policy reader.
|
|
78
|
+
*/
|
|
79
|
+
eventEditable?: CalendarReader;
|
|
80
|
+
/**
|
|
81
|
+
* Resize-policy reader.
|
|
82
|
+
*/
|
|
83
|
+
eventDurationEditable?: CalendarReader;
|
|
84
|
+
/**
|
|
85
|
+
* Unit used for numeric dates.
|
|
86
|
+
*/
|
|
87
|
+
dateUnit?: 'milliseconds' | 'seconds';
|
|
88
|
+
};
|
|
89
|
+
/**
|
|
90
|
+
* @typedef {Object} CalendarEvent
|
|
91
|
+
* @property {string|number} id Stable event identifier.
|
|
92
|
+
* @property {string} title Visible event title.
|
|
93
|
+
* @property {Date} start Local start date and time.
|
|
94
|
+
* @property {Date} end Local end date and time; equal to start for an instant event.
|
|
95
|
+
* @property {boolean} allDay Whether the event belongs in an all-day lane.
|
|
96
|
+
* @property {string|null} color Optional application-supplied CSS colour.
|
|
97
|
+
* @property {string} location Optional location.
|
|
98
|
+
* @property {boolean|null} editable Per-event move policy, or null to inherit.
|
|
99
|
+
* @property {boolean|null} durationEditable Per-event resize policy, or null to inherit.
|
|
100
|
+
* @property {Record<string, any>} data Original application record.
|
|
101
|
+
*/
|
|
102
|
+
/**
|
|
103
|
+
* @typedef {Object} CalendarNormalizeOptions
|
|
104
|
+
* @property {CalendarReader} [eventId='id'] ID reader.
|
|
105
|
+
* @property {CalendarReader} [eventTitle='title'] Title reader.
|
|
106
|
+
* @property {CalendarReader} [eventStart='start'] Start reader.
|
|
107
|
+
* @property {CalendarReader} [eventEnd='end'] End reader.
|
|
108
|
+
* @property {CalendarReader} [eventAllDay='allDay'] All-day reader.
|
|
109
|
+
* @property {CalendarReader} [eventColor='color'] Colour reader.
|
|
110
|
+
* @property {CalendarReader} [eventLocation='location'] Location reader.
|
|
111
|
+
* @property {CalendarReader} [eventEditable='editable'] Move-policy reader.
|
|
112
|
+
* @property {CalendarReader} [eventDurationEditable='durationEditable'] Resize-policy reader.
|
|
113
|
+
* @property {'milliseconds'|'seconds'} [dateUnit='milliseconds'] Unit used for numeric dates.
|
|
114
|
+
*/
|
|
115
|
+
/** @type {readonly CalendarView[]} */
|
|
116
|
+
export declare const CALENDAR_VIEWS: readonly CalendarView[];
|
|
117
|
+
/**
|
|
118
|
+
* Returns the complete local-date window rendered by a view. The end is exclusive.
|
|
119
|
+
* @param {CalendarView} view View name.
|
|
120
|
+
* @param {Date} anchor Date inside the requested period.
|
|
121
|
+
* @param {{weekStart?: number, agendaDays?: number}} [options={}] Range options.
|
|
122
|
+
* @returns {{start: Date, end: Date}}
|
|
123
|
+
*/
|
|
124
|
+
export declare function calendarRange(view: CalendarView, anchor: Date, options?: {
|
|
125
|
+
weekStart?: number;
|
|
126
|
+
agendaDays?: number;
|
|
127
|
+
}): {
|
|
128
|
+
start: Date;
|
|
129
|
+
end: Date;
|
|
130
|
+
};
|
|
131
|
+
/**
|
|
132
|
+
* Normalizes caller records atomically into the Calendar event contract.
|
|
133
|
+
* @param {Record<string, any>[]} records Source records.
|
|
134
|
+
* @param {CalendarNormalizeOptions} [options={}] Reader and date options.
|
|
135
|
+
* @returns {CalendarEvent[]}
|
|
136
|
+
*/
|
|
137
|
+
export declare function normalizeCalendarEvents(records: Record<string, any>[], options?: CalendarNormalizeOptions): CalendarEvent[];
|
|
138
|
+
/**
|
|
139
|
+
* Returns defensive Date copies while retaining the caller's opaque source record.
|
|
140
|
+
* @param {CalendarEvent} event Event to clone.
|
|
141
|
+
* @returns {CalendarEvent}
|
|
142
|
+
*/
|
|
143
|
+
export declare function cloneCalendarEvent(event: CalendarEvent): CalendarEvent;
|
|
144
|
+
/**
|
|
145
|
+
* Lays out timed events for one day into collision columns.
|
|
146
|
+
* @param {CalendarEvent[]} events Normalized events.
|
|
147
|
+
* @param {Date} day Local day.
|
|
148
|
+
* @param {{minMinutes?: number, maxMinutes?: number, minimumMinutes?: number}} [options={}] Grid bounds.
|
|
149
|
+
* @returns {Array<{event: CalendarEvent, start: Date, end: Date, startMinutes: number, endMinutes: number, column: number, columns: number}>}
|
|
150
|
+
*/
|
|
151
|
+
export declare function layoutTimedCalendarEvents(events: CalendarEvent[], day: Date, options?: {
|
|
152
|
+
minMinutes?: number;
|
|
153
|
+
maxMinutes?: number;
|
|
154
|
+
minimumMinutes?: number;
|
|
155
|
+
}): Array<{
|
|
156
|
+
event: CalendarEvent;
|
|
157
|
+
start: Date;
|
|
158
|
+
end: Date;
|
|
159
|
+
startMinutes: number;
|
|
160
|
+
endMinutes: number;
|
|
161
|
+
column: number;
|
|
162
|
+
columns: number;
|
|
163
|
+
}>;
|
|
164
|
+
/**
|
|
165
|
+
* Assigns clipped all-day/multi-day spans to non-overlapping lanes in a period.
|
|
166
|
+
* @param {CalendarEvent[]} events Normalized events.
|
|
167
|
+
* @param {Date} rangeStart First visible local day.
|
|
168
|
+
* @param {number} days Number of visible days.
|
|
169
|
+
* @returns {Array<{event: CalendarEvent, start: number, end: number, lane: number}>}
|
|
170
|
+
*/
|
|
171
|
+
export declare function layoutCalendarSpans(events: CalendarEvent[], rangeStart: Date, days: number): Array<{
|
|
172
|
+
event: CalendarEvent;
|
|
173
|
+
start: number;
|
|
174
|
+
end: number;
|
|
175
|
+
lane: number;
|
|
176
|
+
}>;
|
|
177
|
+
/**
|
|
178
|
+
* Creates an immutable local-time move/resize proposal.
|
|
179
|
+
* @param {CalendarEvent} event Source event.
|
|
180
|
+
* @param {{days?: number, minutes?: number, endDays?: number, endMinutes?: number}} delta Local delta.
|
|
181
|
+
* @returns {CalendarEvent}
|
|
182
|
+
*/
|
|
183
|
+
export declare function shiftCalendarEvent(event: CalendarEvent, delta?: {
|
|
184
|
+
days?: number;
|
|
185
|
+
minutes?: number;
|
|
186
|
+
endDays?: number;
|
|
187
|
+
endMinutes?: number;
|
|
188
|
+
}): CalendarEvent;
|
|
189
|
+
/** @param {Date} value @returns {Date} */
|
|
190
|
+
export declare function startOfCalendarDay(value: Date): Date;
|
|
191
|
+
/** @param {Date} value @param {number} amount @returns {Date} */
|
|
192
|
+
export declare function addCalendarDays(value: Date, amount: number): Date;
|
|
193
|
+
/** @param {Date} value @param {number} weekStart @returns {Date} */
|
|
194
|
+
export declare function startOfCalendarWeek(value: Date, weekStart?: number): Date;
|
|
195
|
+
/** @param {Date} start @param {Date} end @returns {number} */
|
|
196
|
+
export declare function calendarDayDifference(start: Date, end: Date): number;
|
|
197
|
+
/** @param {Date} value @returns {string} */
|
|
198
|
+
export declare function calendarDayKey(value: Date): string;
|
|
199
|
+
/** @param {CalendarEvent} event @returns {boolean} */
|
|
200
|
+
export declare function calendarEventSpansDays(event: CalendarEvent): boolean;
|
|
201
|
+
/** @param {CalendarEvent} event @param {Date} start @param {Date} end @returns {boolean} */
|
|
202
|
+
export declare function calendarEventIntersects(event: CalendarEvent, start: Date, end: Date): boolean;
|