@praxisui/rich-content 8.0.0-beta.7 → 8.0.0-beta.70
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 +183 -0
- package/fesm2022/praxisui-rich-content.mjs +15035 -403
- package/package.json +10 -7
- package/types/praxisui-rich-content.d.ts +524 -0
- package/index.d.ts +0 -166
package/README.md
CHANGED
|
@@ -61,6 +61,30 @@ settings-panel editor for `praxis-rich-content`. Hosts such as
|
|
|
61
61
|
`@praxisui/page-builder` should open this editor from the component metadata
|
|
62
62
|
instead of creating local rich-content JSON editors.
|
|
63
63
|
|
|
64
|
+
The canonical editor provides structured block authoring for common top-level
|
|
65
|
+
nodes (`text`, `badge`, `icon`, `image`, `metric`, `progress`, `compose`,
|
|
66
|
+
`link`, `actionButton`, `card`, `callout`, `ctaGroup`, `keyValueList`,
|
|
67
|
+
`emptyState`, `propertySheet`, `statGroup`, `tabs`, `recordSummary`, `lookupResult`, `lookupCard`, `relatedRecord`,
|
|
68
|
+
`actionCard`, `collapsibleCard`, `disclosure`, `accordion`, `formLauncher`, `mediaBlock`,
|
|
69
|
+
`timeline` and `preset`), including add, reorder, inline removal confirmation
|
|
70
|
+
and field-level editing. It also supports nested authoring for
|
|
71
|
+
`card.content[]`, named card slots, `compose.items[]`, `timeline.items[]` and
|
|
72
|
+
governed action collections such as `callout.actions[]`,
|
|
73
|
+
`recordSummary.actions[]`, `lookupCard.secondaryActions[]`, `actionCard.secondaryActions[]` and
|
|
74
|
+
`disclosure.actions[]`, plus governed preset selection from
|
|
75
|
+
`PRAXIS_RICH_BLOCK_PRESETS`. Common node metadata such as `testId`,
|
|
76
|
+
`className`, capability-gated visibility (`requiresCapabilities` and
|
|
77
|
+
`capabilityMode`), a simple `visibleWhen` equality rule and one safe inline
|
|
78
|
+
style declaration can be edited visually. Advanced JSON remains available for
|
|
79
|
+
less common nested fields and deep structures, but it is no longer the only
|
|
80
|
+
authoring path.
|
|
81
|
+
|
|
82
|
+
Runtime conditional metadata is governed by the shared JSON Logic contract:
|
|
83
|
+
`visibleWhen` and `loadWhen` gate rendering, `disabledWhen` disables interactive
|
|
84
|
+
surfaces, and `classWhen`/`styleWhen` apply declarative visual state. Invalid
|
|
85
|
+
visibility/loading/style rules fail closed by not rendering or not applying the
|
|
86
|
+
rule; invalid `disabledWhen` fails safe by disabling the action surface.
|
|
87
|
+
|
|
64
88
|
The editor receives the widget input envelope and returns the same canonical
|
|
65
89
|
shape expected by the runtime:
|
|
66
90
|
|
|
@@ -85,6 +109,165 @@ Authoring labels, helper text and validation messages use the rich-content i18n
|
|
|
85
109
|
dictionary. Apps can provide overrides with `providePraxisRichContentI18n()` or
|
|
86
110
|
reuse `resolvePraxisRichContentText()` when extending the canonical editor.
|
|
87
111
|
|
|
112
|
+
The editor validates the public `RichContentDocument` contract before
|
|
113
|
+
Apply/Save. Hosts that need the same checks outside the settings panel can use
|
|
114
|
+
`validateRichContentDocument()` from `@praxisui/rich-content` to reject
|
|
115
|
+
unsupported document versions, unknown node types, unsafe URLs, unsafe style
|
|
116
|
+
values and malformed nested nodes before persistence.
|
|
117
|
+
|
|
118
|
+
### Timeline authoring
|
|
119
|
+
|
|
120
|
+
`timeline` is a governed rich-content block, not a local page-builder widget.
|
|
121
|
+
The public document contract supports node-level presentation fields
|
|
122
|
+
`orientation`, `order`, `position`, `connectorVariant`, `connectorColor`,
|
|
123
|
+
`markerVariant`, `markerColor` and `markerStyle`, plus item-level `opposite`
|
|
124
|
+
and `oppositeExpr` content. `orientation` accepts `vertical` or `horizontal`;
|
|
125
|
+
`order` accepts `normal` or `reverse`, allowing hosts and agents to publish the
|
|
126
|
+
same lifecycle data as a vertical document flow, a horizontal process rail or a
|
|
127
|
+
reverse chronological activity stream without reshaping `timeline.items[]`.
|
|
128
|
+
Timeline items may override `connectorVariant`, `connectorColor`, `markerColor`
|
|
129
|
+
and `markerStyle` when a specific step needs status or exception emphasis.
|
|
130
|
+
These fields are available through the canonical rich-content editor, validated
|
|
131
|
+
by `validateRichContentDocument()` and consumed directly by the runtime
|
|
132
|
+
renderer.
|
|
133
|
+
|
|
134
|
+
Use timeline node settings when the host needs to publish lifecycle, workflow or
|
|
135
|
+
operational history as portable `RichContentDocument` JSON. Use item-level
|
|
136
|
+
fields such as `title`, `subtitle`, `meta`, `icon`, `badge` and `opposite` for
|
|
137
|
+
display data, with `*Expr` variants when the values come from the widget
|
|
138
|
+
context.
|
|
139
|
+
|
|
140
|
+
## Semantic blocks and interactive surfaces
|
|
141
|
+
|
|
142
|
+
`@praxisui/rich-content` now supports a broader contract for configuration-first
|
|
143
|
+
platform surfaces:
|
|
144
|
+
|
|
145
|
+
- semantic editorial blocks such as `callout`, `keyValueList`, `emptyState`,
|
|
146
|
+
`recordSummary`, `statGroup`, `tabs`, `lookupResult`, `lookupCard`, `relatedRecord`, `actionCard`, `collapsibleCard`,
|
|
147
|
+
`disclosure` and `accordion`
|
|
148
|
+
- interactive buttons through `actionButton`, mediated by
|
|
149
|
+
`hostCapabilities.dispatchAction(...)`; when `action.confirmMessage` is
|
|
150
|
+
present, runtime first calls `hostCapabilities.confirmAction(...)` and fails
|
|
151
|
+
closed without dispatch if the host does not confirm
|
|
152
|
+
- governed action surfaces such as `lookupCard`, `relatedRecord`, `actionCard` and `formLauncher`, which keep
|
|
153
|
+
the document canonical while delegating execution to host capabilities
|
|
154
|
+
- capability-gated visibility through `requiresCapabilities` and
|
|
155
|
+
`capabilityMode`
|
|
156
|
+
- richer `card` composition through semantic surface fields (`variant`, `tone`,
|
|
157
|
+
`size`, `density`, `orientation`), optional `media`, `headerAction`,
|
|
158
|
+
whole-card `interaction`, accessibility overrides and named slots (`header`,
|
|
159
|
+
`body`, `footer`, `actions`, `aside`) while preserving the required
|
|
160
|
+
`content[]` path for existing consumers
|
|
161
|
+
|
|
162
|
+
This keeps purely visual content (`card`, `callout`, `keyValueList`) distinct
|
|
163
|
+
from host-mediated interaction (`actionButton`) without introducing ad hoc host
|
|
164
|
+
JSON.
|
|
165
|
+
|
|
166
|
+
Example semantic card surface:
|
|
167
|
+
|
|
168
|
+
```ts
|
|
169
|
+
const document: RichContentDocument = {
|
|
170
|
+
kind: 'praxis.rich-content',
|
|
171
|
+
version: '1.0.0',
|
|
172
|
+
nodes: [
|
|
173
|
+
{
|
|
174
|
+
type: 'card',
|
|
175
|
+
titleExpr: '${decision.title}',
|
|
176
|
+
subtitleExpr: '${decision.source}',
|
|
177
|
+
variant: 'elevated',
|
|
178
|
+
tone: 'info',
|
|
179
|
+
size: 'lg',
|
|
180
|
+
orientation: 'horizontal',
|
|
181
|
+
media: {
|
|
182
|
+
kind: 'icon',
|
|
183
|
+
icon: 'psychology',
|
|
184
|
+
label: 'AI-authored decision surface',
|
|
185
|
+
placement: 'leading',
|
|
186
|
+
},
|
|
187
|
+
interaction: {
|
|
188
|
+
mode: 'action',
|
|
189
|
+
action: { actionId: 'decision.open' },
|
|
190
|
+
},
|
|
191
|
+
accessibility: {
|
|
192
|
+
role: 'button',
|
|
193
|
+
ariaLabel: 'Open decision surface',
|
|
194
|
+
},
|
|
195
|
+
content: [
|
|
196
|
+
{ type: 'text', textExpr: '${decision.summary}' },
|
|
197
|
+
],
|
|
198
|
+
},
|
|
199
|
+
],
|
|
200
|
+
};
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## Governed presets
|
|
204
|
+
|
|
205
|
+
The preset registry still uses `PRAXIS_RICH_BLOCK_PRESETS`, and the lib now also
|
|
206
|
+
publishes `providePraxisDefaultRichBlockPresets()` with a small canonical starter
|
|
207
|
+
set for configuration-first hosts:
|
|
208
|
+
|
|
209
|
+
- `callout-guidance`
|
|
210
|
+
- `empty-state-launcher`
|
|
211
|
+
- `record-summary-compact`
|
|
212
|
+
|
|
213
|
+
For widget hosts such as `@praxisui/page-builder`, the component metadata also
|
|
214
|
+
publishes insertion presets through `ComponentDocMeta.insertionPresets`. The
|
|
215
|
+
current canonical starter set is:
|
|
216
|
+
|
|
217
|
+
- `editorial-card`
|
|
218
|
+
- `callout-guidance`
|
|
219
|
+
- `cta-group`
|
|
220
|
+
- `knowledge-surface`
|
|
221
|
+
- `lookup-card`
|
|
222
|
+
- `related-record`
|
|
223
|
+
- `action-card`
|
|
224
|
+
- `approval-audit-surface`
|
|
225
|
+
- `approval-decision-surface`
|
|
226
|
+
- `approval-review-surface`
|
|
227
|
+
- `approval-sla-triage-surface`
|
|
228
|
+
- `approval-delegation-exception-surface`
|
|
229
|
+
- `employee-insight-surface`
|
|
230
|
+
- `hr-compensation-review-surface`
|
|
231
|
+
- `hr-performance-review-surface`
|
|
232
|
+
- `hr-promotion-review-surface`
|
|
233
|
+
- `hr-offboarding-surface`
|
|
234
|
+
- `hr-succession-planning-surface`
|
|
235
|
+
- `hr-leave-absence-surface`
|
|
236
|
+
- `hr-internal-mobility-surface`
|
|
237
|
+
- `onboarding-journey-surface`
|
|
238
|
+
- `onboarding-equipment-access-recovery-surface`
|
|
239
|
+
- `onboarding-day-30-coaching-surface`
|
|
240
|
+
- `onboarding-manager-follow-up-surface`
|
|
241
|
+
- `onboarding-readiness-surface`
|
|
242
|
+
- `stat-group`
|
|
243
|
+
- `timeline-surface`
|
|
244
|
+
- `tabs-surface`
|
|
245
|
+
|
|
246
|
+
Hosts can use the defaults directly or provide their own governed preset pack.
|
|
247
|
+
|
|
248
|
+
## Agentic Authoring Contract
|
|
249
|
+
|
|
250
|
+
`@praxisui/rich-content` publishes an executable `ComponentAuthoringManifest`
|
|
251
|
+
through `PRAXIS_RICH_CONTENT_AUTHORING_MANIFEST`.
|
|
252
|
+
|
|
253
|
+
The manifest treats rich content as structured `RichContentDocument` data, not
|
|
254
|
+
HTML or markdown patches. It governs document replacement, block add/remove,
|
|
255
|
+
block order, text updates, canonical link nodes, common node metadata,
|
|
256
|
+
`mediaBlock` fields, timeline node settings, `timeline.items[]`, preset refs
|
|
257
|
+
and sanitization policy.
|
|
258
|
+
Security-sensitive policy edits and destructive removals require confirmation
|
|
259
|
+
before a patch can be compiled.
|
|
260
|
+
|
|
261
|
+
Link authoring uses a first-class `link` node with `label`, `href`, `target`
|
|
262
|
+
and `rel`; unsafe protocols are rejected by `validateRichContentDocument()`.
|
|
263
|
+
|
|
264
|
+
Each operation declares its own editable target resolver, ambiguity policy,
|
|
265
|
+
preconditions, validators, affected paths, effects and typed submission impact.
|
|
266
|
+
Document, block, text, link, media, timeline, preset, metadata and sanitization
|
|
267
|
+
operations are `config-only` because they edit the structured widget input
|
|
268
|
+
contract. `display.mode.set` is `visual-only` because it changes `layout` and
|
|
269
|
+
`rootClassName` without mutating the `RichContentDocument`.
|
|
270
|
+
|
|
88
271
|
## Layout Modes
|
|
89
272
|
|
|
90
273
|
The component defaults to `layout="block"` to preserve document-style rendering.
|