@praxisui/core 9.0.4-rc.2 → 9.0.4-rc.20
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/README.md +51 -55
- package/ai/component-registry.json +456 -96
- package/fesm2022/praxisui-core.mjs +2178 -756
- package/package.json +1 -1
- package/types/praxisui-core.d.ts +131 -4
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Use this package directly when a host application or library needs Praxis UI typ
|
|
|
8
8
|
|
|
9
9
|
- Recommend when: use it as the first dependency for shared Praxis UI contracts, metadata models, resource discovery, global actions, i18n, theme bridge, and dynamic widget runtime primitives.
|
|
10
10
|
- Avoid when: a consuming app wants to redefine contracts owned by core, metadata starter, config starter, or component packages.
|
|
11
|
-
- Pair with: Every runtime package in the @praxisui
|
|
11
|
+
- Pair with: Every runtime package in the @praxisui/\* family.
|
|
12
12
|
|
|
13
13
|
## Official Links
|
|
14
14
|
|
|
@@ -20,7 +20,7 @@ Use this package directly when a host application or library needs Praxis UI typ
|
|
|
20
20
|
## Install
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
|
-
npm i @praxisui/core@
|
|
23
|
+
npm i @praxisui/core@rc
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
Peer dependencies:
|
|
@@ -40,13 +40,13 @@ Import the theme bridge after Angular Material and CDK overlay styles.
|
|
|
40
40
|
Use `PraxisIconDirective` to normalize Material Icons and Material Symbols names.
|
|
41
41
|
|
|
42
42
|
```ts
|
|
43
|
-
import { Component } from
|
|
44
|
-
import { MatIconModule } from
|
|
45
|
-
import { PraxisIconDirective } from
|
|
43
|
+
import { Component } from "@angular/core";
|
|
44
|
+
import { MatIconModule } from "@angular/material/icon";
|
|
45
|
+
import { PraxisIconDirective } from "@praxisui/core";
|
|
46
46
|
|
|
47
47
|
@Component({
|
|
48
48
|
standalone: true,
|
|
49
|
-
selector:
|
|
49
|
+
selector: "app-icons",
|
|
50
50
|
imports: [MatIconModule, PraxisIconDirective],
|
|
51
51
|
template: `
|
|
52
52
|
<mat-icon [praxisIcon]="'mi:pending'"></mat-icon>
|
|
@@ -65,20 +65,12 @@ and `mss:` icon-family prefixes as `PraxisIconDirective`; unprefixed names keep
|
|
|
65
65
|
the legacy Material Icons behavior.
|
|
66
66
|
|
|
67
67
|
```ts
|
|
68
|
-
import { Component, signal } from
|
|
69
|
-
import { PraxisIconButtonComponent } from
|
|
68
|
+
import { Component, signal } from "@angular/core";
|
|
69
|
+
import { PraxisIconButtonComponent } from "@praxisui/core";
|
|
70
70
|
|
|
71
71
|
@Component({
|
|
72
72
|
imports: [PraxisIconButtonComponent],
|
|
73
|
-
template: `
|
|
74
|
-
<button
|
|
75
|
-
type="button"
|
|
76
|
-
[praxisIconButton]="'mic'"
|
|
77
|
-
size="compact"
|
|
78
|
-
[pressed]="isListening()"
|
|
79
|
-
aria-label="Ditar pedido"
|
|
80
|
-
></button>
|
|
81
|
-
`,
|
|
73
|
+
template: ` <button type="button" [praxisIconButton]="'mic'" size="compact" [pressed]="isListening()" aria-label="Ditar pedido"></button> `,
|
|
82
74
|
})
|
|
83
75
|
export class ComposerActionsComponent {
|
|
84
76
|
readonly isListening = signal(false);
|
|
@@ -87,14 +79,14 @@ export class ComposerActionsComponent {
|
|
|
87
79
|
|
|
88
80
|
Public inputs:
|
|
89
81
|
|
|
90
|
-
| Input
|
|
91
|
-
|
|
|
92
|
-
| `praxisIconButton` | icon name or canonical family-prefixed icon | required
|
|
93
|
-
| `size`
|
|
94
|
-
| `appearance`
|
|
95
|
-
| `presentation`
|
|
96
|
-
| `pressed`
|
|
97
|
-
| `busy`
|
|
82
|
+
| Input | Values | Default | Purpose |
|
|
83
|
+
| ------------------ | ------------------------------------------- | ---------- | --------------------------------------------------------------------------------------- |
|
|
84
|
+
| `praxisIconButton` | icon name or canonical family-prefixed icon | required | Glyph materialized inside the button |
|
|
85
|
+
| `size` | `dense`, `compact`, `standard` | `standard` | Governed target, visible surface and glyph density |
|
|
86
|
+
| `appearance` | `plain`, `filled` | `plain` | Transparent or emphasized action surface |
|
|
87
|
+
| `presentation` | `icon`, `projected` | `icon` | Uses the named glyph or host-projected governed presentation |
|
|
88
|
+
| `pressed` | `true`, `false`, `null` | `null` | Persistent toggle/listening state and native `aria-pressed`; `null` omits the attribute |
|
|
89
|
+
| `busy` | boolean | `false` | Replaces the glyph with the canonical progress indicator and publishes `aria-busy` |
|
|
98
90
|
|
|
99
91
|
The component defaults the native host to `type="button"`; an explicit host
|
|
100
92
|
attribute still documents intent and prevents accidental form submission in
|
|
@@ -115,11 +107,11 @@ Praxis Material 3 semantic color tokens.
|
|
|
115
107
|
|
|
116
108
|
Governed density matrix:
|
|
117
109
|
|
|
118
|
-
| Size
|
|
119
|
-
|
|
|
120
|
-
| `standard` |
|
|
121
|
-
| `compact`
|
|
122
|
-
| `dense`
|
|
110
|
+
| Size | Pointer target | Visible surface | Glyph | Intended use |
|
|
111
|
+
| ---------- | -------------: | --------------: | ----: | ------------------------------------------------------- |
|
|
112
|
+
| `standard` | 44px | 40px | 22px | Primary and standalone icon actions |
|
|
113
|
+
| `compact` | 44px | 36px | 20px | Composers, headers and frequent application actions |
|
|
114
|
+
| `dense` | 36px | 32px | 18px | Secondary actions inside constrained editorial toolbars |
|
|
123
115
|
|
|
124
116
|
On coarse pointers, `dense` automatically restores a 44px pointer target while
|
|
125
117
|
keeping its 32px visible surface. Do not use `dense` for a primary action, an
|
|
@@ -137,11 +129,11 @@ the Core primitive owns presentation and native interaction only.
|
|
|
137
129
|
`PraxisThemeSurfaceTokens` is the public semantic bridge for runtime surfaces. It deliberately avoids Material or MDC selectors, so a host can theme Praxis overlays, borders and focus states without patching component internals.
|
|
138
130
|
|
|
139
131
|
```ts
|
|
140
|
-
import { buildPraxisThemeSurfaceCss } from
|
|
132
|
+
import { buildPraxisThemeSurfaceCss } from "@praxisui/core";
|
|
141
133
|
|
|
142
134
|
const themeCss = buildPraxisThemeSurfaceCss({
|
|
143
|
-
surfaceOverlay:
|
|
144
|
-
focusOutline:
|
|
135
|
+
surfaceOverlay: "var(--app-overlay-surface)",
|
|
136
|
+
focusOutline: "var(--app-focus-ring)",
|
|
145
137
|
});
|
|
146
138
|
```
|
|
147
139
|
|
|
@@ -152,16 +144,16 @@ Apply the generated variables in the host stylesheet or define the `--praxis-the
|
|
|
152
144
|
`ComponentMetadataRegistry` is the shared registry used by builders and runtime loaders to resolve component metadata.
|
|
153
145
|
|
|
154
146
|
```ts
|
|
155
|
-
import { ComponentDocMeta, ComponentMetadataRegistry } from
|
|
147
|
+
import { ComponentDocMeta, ComponentMetadataRegistry } from "@praxisui/core";
|
|
156
148
|
|
|
157
149
|
const metadata: ComponentDocMeta = {
|
|
158
|
-
id:
|
|
159
|
-
selector:
|
|
150
|
+
id: "app-widget",
|
|
151
|
+
selector: "app-widget",
|
|
160
152
|
component: AppWidgetComponent,
|
|
161
|
-
friendlyName:
|
|
162
|
-
description:
|
|
163
|
-
icon:
|
|
164
|
-
lib:
|
|
153
|
+
friendlyName: "App widget",
|
|
154
|
+
description: "Host-owned widget.",
|
|
155
|
+
icon: "widgets",
|
|
156
|
+
lib: "app-host",
|
|
165
157
|
};
|
|
166
158
|
|
|
167
159
|
registry.register(metadata);
|
|
@@ -174,12 +166,12 @@ Component-owned config editors and AI authoring manifests are declared on `Compo
|
|
|
174
166
|
`DynamicWidgetPageComponent` renders `WidgetPageDefinition` documents.
|
|
175
167
|
|
|
176
168
|
```ts
|
|
177
|
-
import { Component } from
|
|
178
|
-
import { DynamicWidgetPageComponent, WidgetPageDefinition } from
|
|
169
|
+
import { Component } from "@angular/core";
|
|
170
|
+
import { DynamicWidgetPageComponent, WidgetPageDefinition } from "@praxisui/core";
|
|
179
171
|
|
|
180
172
|
@Component({
|
|
181
173
|
standalone: true,
|
|
182
|
-
selector:
|
|
174
|
+
selector: "app-page",
|
|
183
175
|
imports: [DynamicWidgetPageComponent],
|
|
184
176
|
template: `<praxis-dynamic-page [page]="page"></praxis-dynamic-page>`,
|
|
185
177
|
})
|
|
@@ -187,10 +179,10 @@ export class PageComponent {
|
|
|
187
179
|
page: WidgetPageDefinition = {
|
|
188
180
|
widgets: [
|
|
189
181
|
{
|
|
190
|
-
key:
|
|
182
|
+
key: "summary",
|
|
191
183
|
definition: {
|
|
192
|
-
id:
|
|
193
|
-
inputs: { title:
|
|
184
|
+
id: "app-widget",
|
|
185
|
+
inputs: { title: "Summary" },
|
|
194
186
|
},
|
|
195
187
|
},
|
|
196
188
|
],
|
|
@@ -201,6 +193,12 @@ export class PageComponent {
|
|
|
201
193
|
|
|
202
194
|
Use `page.composition.links` for persisted wiring. `page.connections` is legacy/residual and should not be used for new pages or examples. Nested component ports should use `component-port` endpoints with `ref.nestedPath`.
|
|
203
195
|
|
|
196
|
+
Page-owned business copy can use `page.i18n` plus explicit `PraxisTextValue`
|
|
197
|
+
descriptors inside widget shells or nested widget inputs. The runtime resolves
|
|
198
|
+
those descriptors only in its render projection, so the authored and persisted
|
|
199
|
+
document keeps stable semantic keys. Plain strings remain untouched, and
|
|
200
|
+
framework chrome continues to come from each library's i18n catalog.
|
|
201
|
+
|
|
204
202
|
## Resource Discovery
|
|
205
203
|
|
|
206
204
|
`resourcePath` and `resourceKey` serve different purposes:
|
|
@@ -217,6 +215,8 @@ it must not infer authorization from a `canonicalOperations` boolean or discard
|
|
|
217
215
|
|
|
218
216
|
`ResourceRecordOpenService` materializes the minimal `ResourceRecordOpenRef` published by governed analytics. It resolves the target resource catalog, loads the real item, follows its HATEOAS `surfaces` relation, requires the exact item surface to be available for the current context, and only then delegates to `ResourceSurfaceOpenAdapterService`. Consumers must not replace this flow with `${item.id}`, a copied surface path, a label match, or a prebuilt `surface.open` payload.
|
|
219
217
|
|
|
218
|
+
When a discovered item surface publishes `relatedResource`, `ResourceSurfaceOpenAdapterService` delegates to `RelatedResourceSurfaceResolverService`. The resulting table targets the canonical child resource and receives the parent identity through `queryContext.filters`; it does not prefetch the item projection and rebuild a host-local table before opening. When the child surface publishes `childParentField`, related create actions seed that field through `actions[].form.initialValue`, and both create/update command policies project it into `groupedCommand.contextFields`. The field therefore remains in the schema-backed form and submit payload without rendering a redundant lookup for context the dossier already established. The materializer declares `openMode: "drawer"` but does not redefine drawer geometry: positioning, viewport height, focus, and close behavior remain owned by `@praxisui/crud`. This keeps the drawer responsive and preserves child operations, empty states, endpoint routing, and resource identity from the backend contract.
|
|
219
|
+
|
|
220
220
|
## Schema And Metadata
|
|
221
221
|
|
|
222
222
|
Core exports schema and metadata infrastructure used by form, table, list, chart, CRUD, and page-builder packages:
|
|
@@ -244,27 +244,23 @@ For governed analytics cross-filtering, `bindings.primaryDimension.keyFilterFiel
|
|
|
244
244
|
Global actions let widgets and shells request host-mediated work such as navigation, dialog, toast, analytics, API calls, or surface opening.
|
|
245
245
|
|
|
246
246
|
```ts
|
|
247
|
-
import {
|
|
248
|
-
providePraxisGlobalActions,
|
|
249
|
-
providePraxisToastGlobalActions,
|
|
250
|
-
} from '@praxisui/core';
|
|
247
|
+
import { providePraxisGlobalActions, providePraxisToastGlobalActions } from "@praxisui/core";
|
|
251
248
|
|
|
252
249
|
export const appConfig = {
|
|
253
|
-
providers: [
|
|
254
|
-
providePraxisGlobalActions(),
|
|
255
|
-
providePraxisToastGlobalActions(),
|
|
256
|
-
],
|
|
250
|
+
providers: [providePraxisGlobalActions(), providePraxisToastGlobalActions()],
|
|
257
251
|
};
|
|
258
252
|
```
|
|
259
253
|
|
|
260
254
|
Use `GlobalActionRef` and the catalog helpers when declaring or validating action payloads. The host remains responsible for registered executors and policy.
|
|
261
255
|
|
|
256
|
+
Resource action discovery also carries an optional `execution` contract. Consumers must materialize its interaction, idempotency, correlation, resource-version, selection, outcome and refresh policies instead of inferring command behavior from labels or HTTP methods. `ResourceActionOpenAdapterService` projects form-based actions into Dynamic Form inputs, uses transient schema-owned command layout, keeps the materialized host inputs authoritative over saved preferences, and fails closed when a required `If-Match` version cannot be supplied or bound at runtime.
|
|
257
|
+
|
|
262
258
|
## Collection Export
|
|
263
259
|
|
|
264
260
|
`PraxisCollectionExportService` is the shared export contract used by table, list, and future collection components.
|
|
265
261
|
|
|
266
262
|
```ts
|
|
267
|
-
import { providePraxisHttpCollectionExportProvider } from
|
|
263
|
+
import { providePraxisHttpCollectionExportProvider } from "@praxisui/core";
|
|
268
264
|
|
|
269
265
|
export const appConfig = {
|
|
270
266
|
providers: [providePraxisHttpCollectionExportProvider()],
|