@dataworkz/crystal 0.1.0-beta.1 → 0.1.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.10",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",
@@ -19,21 +19,19 @@
     "@angular/forms": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@primeng/themes": "^21.0.0",
     "ngx-markdown": "^20.0.0",
-    "primeicons": "^7.0.0",
-    "primeng": "^20.4.0",
     "rxjs": "~7.8.0"
   },
   "peerDependenciesMeta": {
-    "@primeng/themes": {
-      "optional": true
-    },
     "ngx-markdown": {
       "optional": true
     }
   },
   "dependencies": {
+    "@primeng/themes": "^21.0.0",
+    "chart.js": "^4.5.1",
+    "primeicons": "^7.0.0",
+    "primeng": "~20.4.0",
     "tslib": "^2.8.1"
   },
   "exports": {

package/primeng/index.d.ts

@@ -608,8 +608,48 @@ declare const DW_PRESET_OVERRIDES: {
 /** Dataworkz PrimeNG preset: Aura retargeted to the design system. */
 declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base.AuraBaseDesignTokens>;
 
-/** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on <html>. */
+/** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on `<html>`. */
 declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
+/** Panel class that sizes a select's option list for a small trigger (components/form.css). */
+declare const DW_SELECT_PANEL_SM = "dw-select-panel--sm";
+type SizedInstance = {
+    size?: () => string | null | undefined;
+};
+/**
+ * Crystal's pass-through defaults: a small `p-select` / `p-multiselect` gets small options even when its list is
+ * appended to `<body>` (where CSS can't see the trigger).
+ */
+declare const DW_PRIMENG_PT: {
+    readonly select: {
+        readonly overlay: ({ instance }: {
+            instance?: SizedInstance;
+        }) => {
+            class: string;
+        } | {
+            class?: undefined;
+        };
+    };
+    readonly multiselect: {
+        readonly overlay: ({ instance }: {
+            instance?: SizedInstance;
+        }) => {
+            class: string;
+        } | {
+            class?: undefined;
+        };
+    };
+};
+/**
+ * PrimeNG's z-index bases, with tooltips raised to 5000: PrimeNG already stacks a tooltip above the overlays it manages
+ * (dialogs, drawers, popovers), and the higher base keeps it above layers that set their own z-index too (a panel or
+ * page chrome with `z-index` in CSS), so a tooltip is never hidden under what it describes.
+ */
+declare const DW_PRIMENG_Z_INDEX: {
+    readonly modal: 1100;
+    readonly overlay: 1000;
+    readonly menu: 1000;
+    readonly tooltip: 5000;
+};
 /**
  * PrimeNG with the Dataworkz preset, dark mode on `[data-theme="dark"]`. Pass app-specific PrimeNG settings
  * (ripple, zIndex, translation…) as `config`; its `theme.options` are merged over crystal's.
@@ -620,4 +660,4 @@ declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
  */
 declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
 
-export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DwPreset, provideCrystalPrimeNG };
+export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };

package/styles/components/button.css

@@ -325,6 +325,9 @@
 .dw-icon-btn.is-active { background: var(--dw-accent-tint); color: var(--dw-accent); }
 /* Hovering the active (selected) button keeps it accented, a step stronger */
 .dw-icon-btn.is-active:hover:not(:disabled) { background: var(--dw-accent-tint-strong); color: var(--dw-accent); }
+/* A selected danger toggle (e.g. a "not helpful" rating) keeps its danger colour instead of the accent. */
+.dw-icon-btn--danger.is-active,
+.dw-icon-btn--danger.is-active:hover:not(:disabled) { background: var(--dw-danger-tint); color: var(--dw-danger-solid); }
 .dw-icon-btn--inverse { color: var(--dw-text-muted); }
 .dw-icon-btn--inverse:hover:not(:disabled),
 .dw-icon-btn--inverse.is-active { background: color-mix(in srgb, var(--dw-text-inverse) 12%, transparent); color: var(--dw-text-inverse); }

package/styles/components/content.css

@@ -156,3 +156,103 @@ dw-markdown.dw-prose { display: block; }
 /* ── dw-icon: app SVG glyphs, drawn in currentColor at the text size ── */
 .dw-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.125em; }
 .dw-icon svg { display: block; }
+/* A PrimeIcons glyph (dw-icon pi="…") is a font glyph: it needs a line box, which the SVG case sets to 0. */
+.dw-icon.pi { line-height: 1; }
+.dw-icon--spin { animation: dw-icon-spin 1s linear infinite; }
+@keyframes dw-icon-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .dw-icon--spin, .dw-icon.pi-spin { animation-duration: 3s; } }
+
+/* ── dw-accordion: panels that open and close under a header row (PrimeNG's p-accordion underneath) ──
+   PrimeNG reads its accordion design tokens as --p-accordion-* variables, so the look is set through them (no
+   specificity race with its own :hover / :first-child rules). flush (default): rows on the container, a divider
+   between panels; card: each panel a bordered card, the list spaced, a divider under an open header. */
+.dw-accordion {
+  display: block;
+  min-width: 0;
+  --p-accordion-panel-border-width: 0;
+  --p-accordion-panel-border-color: var(--dw-border);
+  --p-accordion-header-padding: var(--dw-space-3) var(--dw-space-4);
+  --p-accordion-header-font-weight: var(--dw-font-weight-semibold);
+  --p-accordion-header-color: var(--dw-text-strong);
+  --p-accordion-header-hover-color: var(--dw-text-strong);
+  --p-accordion-header-active-color: var(--dw-text-strong);
+  --p-accordion-header-active-hover-color: var(--dw-text-strong);
+  --p-accordion-header-background: transparent;
+  --p-accordion-header-hover-background: var(--dw-surface-hover);
+  --p-accordion-header-active-background: transparent;
+  --p-accordion-header-active-hover-background: var(--dw-surface-hover);
+  --p-accordion-header-border-width: 0;
+  --p-accordion-header-border-color: var(--dw-border);
+  --p-accordion-header-border-radius: 0;
+  --p-accordion-header-first-border-width: 0;
+  --p-accordion-header-first-top-border-radius: 0;
+  --p-accordion-header-last-bottom-border-radius: 0;
+  --p-accordion-header-last-active-bottom-border-radius: 0;
+  --p-accordion-header-focus-ring-width: 0;
+  --p-accordion-header-focus-ring-shadow: inset var(--dw-focus-ring);
+  --p-accordion-content-background: transparent;
+  --p-accordion-content-color: var(--dw-text);
+  --p-accordion-content-padding: 0 var(--dw-space-4) var(--dw-space-4);
+}
+
+.dw-accordion .p-accordionheader {
+  gap: var(--dw-space-3);
+  font-size: var(--dw-font-size-14);
+  line-height: 1.4;
+}
+
+.dw-accordion__header {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--dw-space-2);
+  min-width: 0;
+}
+
+.dw-accordion__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.dw-accordion__chevron {
+  flex: none;
+  font-size: var(--dw-font-size-12);
+  color: var(--dw-text-secondary);
+  transition: transform var(--dw-dur-enter) var(--dw-ease);
+}
+
+.dw-accordion .p-accordionpanel-active > .p-accordionheader .dw-accordion__chevron { transform: rotate(180deg); }
+.dw-accordion .p-accordionpanel.p-disabled > .p-accordionheader { cursor: default; }
+
+/* flush: a divider between panels */
+.dw-accordion--flush .p-accordionpanel + .p-accordionpanel { --p-accordion-panel-border-width: 1px 0 0; }
+
+/* card: each panel its own card; a closed one lifts on hover, an open one divides its header from its content */
+.dw-accordion--card {
+  --p-accordion-header-hover-background: transparent;
+  --p-accordion-header-active-hover-background: transparent;
+  --p-accordion-header-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-header-first-top-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-header-last-bottom-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-content-padding: var(--dw-space-4);
+}
+
+.dw-accordion--card > .p-accordion { display: flex; flex-direction: column; gap: var(--dw-space-2); }
+
+.dw-accordion--card .p-accordionpanel {
+  border: 1px solid var(--dw-border);
+  border-radius: var(--dw-radius-card);
+  background: var(--dw-surface);
+  transition: box-shadow var(--dw-dur-enter) var(--dw-ease);
+}
+
+.dw-accordion--card .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover { box-shadow: var(--dw-shadow-md); }
+
+.dw-accordion--card .p-accordionpanel-active {
+  --p-accordion-header-border-width: 0 0 1px;
+  --p-accordion-header-first-border-width: 0 0 1px;
+  --p-accordion-header-border-radius: calc(var(--dw-radius-card) - 1px) calc(var(--dw-radius-card) - 1px) 0 0;
+  --p-accordion-header-last-active-bottom-border-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dw-accordion__chevron,
+  .dw-accordion--card .p-accordionpanel { transition: none; }
+}

package/styles/components/data.css

@@ -138,6 +138,29 @@ body .p-treetable .p-treetable-tbody > tr.p-treetable-row-selected {
   border-left: 1px solid var(--dw-tree-spine);
 }
 
+/* dw-tree: no box of its own (it sits on its container); --framed draws one. Node content fills the row, so a
+   dwTreeNode template can lay out across it. */
+.dw-tree-view { display: block; min-width: 0; }
+.dw-tree-view > .p-tree { padding: 0; border: 0; border-radius: 0; background: transparent; }
+.dw-tree-view.dw-tree-view--framed > .p-tree {
+  padding: var(--dw-space-2);
+  border: 1px solid var(--dw-border-strong);
+  border-radius: var(--dw-radius-control);
+  background: var(--dw-surface);
+}
+.dw-tree-view .p-tree-node-label { flex: 1 1 auto; min-width: 0; }
+/* --sm: compact rows, through PrimeNG's own tree variables (row ~28px instead of ~36px). */
+.dw-tree-view.dw-tree-view--sm {
+  --p-tree-node-padding: var(--dw-space-1) var(--dw-space-2);
+  --p-tree-node-gap: var(--dw-space-1);
+  --p-tree-node-toggle-button-size: var(--dw-space-5);
+  --p-tree-gap: 0;
+  font-size: var(--dw-font-size-13);
+}
+/* --marker: the selected row's accent bar, as dw-nav-list [marker] (an inset shadow, so nothing shifts). Specific
+   enough to outlast PrimeNG's focus styles, which it loads after crystal. */
+.dw-tree-view.dw-tree-view--marker .p-tree-node-content.p-tree-node-selected { box-shadow: inset 3px 0 0 var(--dw-accent); }
+
 /* ── Skeleton ── */
 .dw-skeleton {
   height: 20px;

package/styles/components/form.css

@@ -225,14 +225,15 @@ dw-field.dw-field--inline:has(.dw-field__control :is(.p-inputtext-sm, .p-textare
 .dw-field__control > :first-child:not([dwFieldSuffix]) { flex: 1 1 auto; min-width: 0; }
 /* Switches, checkboxes and radios keep their own size — stretching one turns a toggle into a bar. */
 /* (Same specificity as the stretch rule above, plus the element, so it wins.) */
-.dw-field__control > :is(p-toggleswitch, p-checkbox, p-radiobutton):first-child:not([dwFieldSuffix]) { flex: none; }
+.dw-field__control > :is(p-toggleswitch, p-checkbox, p-radiobutton, dw-switch, dw-checkbox, dw-radio):first-child:not([dwFieldSuffix]) { flex: none; }
 .dw-field__control > input,
 .dw-field__control > textarea,
 .dw-field__control > p-select,
 .dw-field__control > p-multiselect,
 .dw-field__control > p-inputnumber,
 .dw-field__control > p-datepicker,
-.dw-field__control > p-autocomplete { width: 100%; }
+.dw-field__control > p-autocomplete,
+.dw-field__control > :is(dw-select, dw-multiselect, dw-number-input, dw-date-picker, dw-autocomplete, dw-slider) { width: 100%; }
 .dw-field__error { display: inline-flex; align-items: center; gap: var(--dw-space-1); }
 /* Field errors are text only (the red text and border carry the state): no leading icon, even in
    hand-written error lines. */
@@ -391,12 +392,6 @@ dw-search-input.dw-search--block { width: 100%; }
   display: none;
 }
 
-/* PrimeNG's slider host is inline; give it the field's width. */
-p-slider {
-  display: block;
-  width: 100%;
-}
-
 /* pSize="small" inputs: base.css's `font: inherit` would keep them at 14px, so restate the
    small type here — 5px padding + 16px line + 1px borders = 28px, the small dw-button height. */
 /* Small selects match small inputs exactly (28px): their label gets the same 16px line
@@ -470,12 +465,14 @@ p-slider {
 
 
 /* Small selects (size="small"): their option list matches the 12px trigger instead of the default
-   14px rows. The list renders inside the select unless it is appended elsewhere (appendTo); a list
-   appended to <body> takes the panel class `dw-select-panel--sm` for the same sizing. */
+   14px rows. A list rendered inside the select matches `.p-select-sm`; a list appended elsewhere
+   (appendTo="body") gets `dw-select-panel--sm` from provideCrystalPrimeNG()'s pass-through, so no
+   screen sets it by hand. */
 .p-select-sm .p-select-option,
 .p-multiselect-sm .p-multiselect-option,
 .dw-select-panel--sm .p-select-option,
-.dw-select-panel--sm .p-multiselect-option {
+.dw-select-panel--sm .p-multiselect-option,
+.dw-autocomplete-panel--sm .p-autocomplete-option {
   padding: 5px 10px;
   font-size: var(--dw-font-size-12);
   line-height: var(--dw-line-height-16);
@@ -483,7 +480,8 @@ p-slider {
 .p-select-sm .p-select-empty-message,
 .p-multiselect-sm .p-multiselect-empty-message,
 .dw-select-panel--sm .p-select-empty-message,
-.dw-select-panel--sm .p-multiselect-empty-message {
+.dw-select-panel--sm .p-multiselect-empty-message,
+.dw-autocomplete-panel--sm .p-autocomplete-empty-message {
   padding: 5px 10px;
   font-size: var(--dw-font-size-12);
 }
@@ -635,7 +633,7 @@ body .dw-var-field .p-textarea {
 .dw-check-toggle.is-on .dw-check-toggle__label { color: var(--dw-text-strong); font-weight: var(--dw-font-weight-medium); }
 
 /* Compact calendar (inline in popovers): smaller day cells and type, quieter weekday row and a
-   tighter time picker. <p-datepicker styleClass="dw-datepicker--compact" [inline]="true" />.
+   tighter time picker. <dw-date-picker [compact]="true" [inline]="true" />.
    Two classes per rule so they outrank PrimeNG's own (unlayered) datepicker styles. */
 .dw-datepicker--compact .p-datepicker-header { padding: 0 0 var(--dw-space-2); }
 .dw-datepicker--compact .p-datepicker-title,
@@ -675,3 +673,108 @@ body .dw-var-field .p-textarea {
 .config-form-body .toggle-label { margin: 0; cursor: pointer; }
 /* Host of a config form component inside .config-drawer-body: fill the drawer height. */
 .config-form-host { display: flex; flex: 1; flex-direction: column; min-height: 0; }
+
+/* ── dw-select / dw-multiselect (components) ──
+   The host takes the screen's sizing (a width, `dw-w-full`, a grid track) and the PrimeNG control fills it; with no
+   width set, the host is as wide as the control would be on its own. */
+.dw-select,
+.dw-multiselect {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.dw-select > p-select,
+.dw-multiselect > p-multiselect {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.dw-select.dw-select--fluid,
+.dw-multiselect.dw-multiselect--fluid {
+  display: flex;
+  width: 100%;
+}
+
+/* ── dw-checkbox / dw-radio / dw-switch (components): the control and its label on one line (dw-check) ── */
+.dw-checkbox__label--empty:empty,
+.dw-radio__label--empty:empty { display: none; }
+
+/* ── dw-number-input (component): sized by the screen like dw-select ── */
+.dw-number-input { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-number-input > p-inputnumber { flex: 1 1 auto; min-width: 0; }
+.dw-number-input.dw-number-input--fluid { display: flex; width: 100%; }
+
+/* ── dw-date-picker (component): sized by the screen like dw-select; the inline calendar keeps its own width unless fluid ── */
+.dw-date-picker { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-date-picker > p-datepicker { flex: 1 1 auto; min-width: 0; }
+.dw-date-picker.dw-date-picker--fluid { display: flex; width: 100%; }
+.dw-date-picker.dw-date-picker--inline > p-datepicker { flex: none; }
+.dw-date-picker.dw-date-picker--inline.dw-date-picker--fluid > p-datepicker { flex: 1 1 auto; }
+/* flush: the inline calendar loses its own box and sits on its container's surface (a popover or a panel pads it). */
+.dw-date-picker.dw-date-picker--flush .p-datepicker-panel-inline {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ── dw-autocomplete (component): sized by the screen like dw-select; the text input fills it ──
+   (The extra elements outweigh PrimeNG's `width: 1%` on the input beside a dropdown button, whose styles load after ours.) */
+.dw-autocomplete { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-autocomplete > p-autocomplete { display: flex; flex: 1 1 auto; min-width: 0; }
+.dw-autocomplete > p-autocomplete.p-autocomplete > input.p-autocomplete-input { flex: 1 1 auto; width: auto; min-width: 0; }
+.dw-autocomplete.dw-autocomplete--fluid { display: flex; width: 100%; }
+/* Its list (appended to <body>, so styled by its panel classes): rows in the 14px body type, unless small. */
+body .dw-autocomplete-panel:not(.dw-autocomplete-panel--sm) :is(.p-autocomplete-option, .p-autocomplete-empty-message) {
+  font-size: var(--dw-font-size-14);
+}
+/* panelWidth="field": exactly as wide as the field, as select lists are (see above): PrimeNG puts the field's width in
+   the overlay's inline min-width, a zero width lets it win, and long suggestions ellipsise. */
+.p-overlay:has(> .p-overlay-content > .dw-autocomplete-panel--field) { width: 0; }
+.dw-autocomplete-panel--field .p-autocomplete-option > * {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* size="sm" gives it the small select rows (`.dw-autocomplete-panel--sm`, with the small select lists above). */
+
+/* ── dw-slider (component): fills its container, in crystal's tokens ──
+   A 4px track in the meter's colours (dw-meter) and a 16px accent handle with a surface centre; the padding keeps the
+   handle clear of what sits above and below. PrimeNG draws it from these variables. */
+.dw-slider {
+  --p-slider-track-size: 4px;
+  --p-slider-track-background: var(--dw-surface-pressed);
+  --p-slider-track-border-radius: var(--dw-radius-full);
+  --p-slider-range-background: var(--dw-accent);
+  --p-slider-handle-width: 16px;
+  --p-slider-handle-height: 16px;
+  --p-slider-handle-border-radius: var(--dw-radius-full);
+  --p-slider-handle-background: var(--dw-accent);
+  --p-slider-handle-hover-background: var(--dw-accent-hover);
+  --p-slider-handle-content-width: 8px;
+  --p-slider-handle-content-height: 8px;
+  --p-slider-handle-content-border-radius: var(--dw-radius-full);
+  --p-slider-handle-content-background: var(--dw-surface);
+  --p-slider-handle-content-hover-background: var(--dw-surface);
+  --p-slider-handle-content-shadow: none;
+  --p-slider-handle-focus-ring-width: 0;
+  --p-slider-handle-focus-ring-shadow: var(--dw-focus-ring);
+
+  display: block;
+  width: 100%;
+  padding-block: var(--dw-space-2);
+}
+/* PrimeNG shows a grab cursor on the handle; show it grabbing while held. */
+.dw-slider .p-slider-handle:active { cursor: grabbing; }
+.dw-slider.dw-slider--invalid {
+  --p-slider-range-background: var(--dw-danger-solid);
+  --p-slider-handle-background: var(--dw-danger-solid);
+  --p-slider-handle-hover-background: var(--dw-danger-solid);
+  --p-slider-handle-focus-ring-shadow: var(--dw-focus-ring-danger);
+}
+.dw-slider.dw-slider--vertical { display: inline-block; width: auto; height: 100%; padding-block: 0; padding-inline: var(--dw-space-2); }
+.dw-slider.dw-slider--vertical > p-slider { height: 100%; }
+/* p-slider used directly (until its screens move to dw-slider): a block as wide as its field. */
+p-slider { display: block; width: 100%; }
+.dw-slider--vertical > p-slider { width: var(--p-slider-track-size); }

package/styles/components/navigation.css

@@ -215,7 +215,7 @@
 }
 
 /* Selected marker: an accent left border that follows the item's rounded corners. Only the agents
-   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-selected-marker); every
+   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-tree [marker]); every
    other selection is the plain selected fill. An inset shadow, not a border, so the item's content
    does not shift when it is selected. */
 .dw-nav-list--marker .dw-nav-item.is-active,
@@ -547,6 +547,36 @@ dw-nav-list.dw-nav-list--minimizable { overflow: hidden; padding-bottom: 0; }
 .dw-steps__item.is-done .dw-steps__no { border-color: var(--dw-accent); background: var(--dw-accent); color: var(--dw-text-inverse); }
 .dw-steps__sep { flex: 0 0 48px; height: 1px; background: var(--dw-border-strong); }
 
+/* ── dw-stepper: the component over .dw-steps. Each step is a button; a done step goes back,
+   an upcoming step of a linear stepper is disabled but drawn as upcoming (not faded).
+   --inline drops the sub-header strip (a wizard header); --md is the wizard size, --sm the strip above. ── */
+.dw-stepper { display: block; min-width: 0; }
+.dw-steps--inline { padding: 0; border-bottom: 0; }
+.dw-steps__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dw-space-2);
+  margin: calc(-1 * var(--dw-space-1));
+  padding: var(--dw-space-1);
+  border: 0;
+  border-radius: var(--dw-radius-md);
+  background: transparent;
+  color: inherit;
+  font-weight: inherit;
+  white-space: nowrap;
+  transition: color var(--dw-dur-micro) var(--dw-ease);
+}
+.dw-steps__btn:disabled,
+.dw-steps__btn[aria-current='step'] { cursor: default; }
+.dw-steps__btn:not(:disabled, [aria-current='step']):hover { color: var(--dw-text-link); }
+.dw-steps__btn:focus-visible { outline: none; box-shadow: var(--dw-focus-ring); }
+.dw-steps__no { flex: none; transition: background-color var(--dw-dur-micro) var(--dw-ease), border-color var(--dw-dur-micro) var(--dw-ease); }
+.dw-steps__item.is-disabled { opacity: 0.5; }
+.dw-steps__item.is-disabled .dw-steps__btn { cursor: not-allowed; }
+.dw-steps__sep.is-done { background: var(--dw-accent); }
+.dw-steps--md .dw-steps__no { width: 32px; height: 32px; border-width: 2px; font-size: var(--dw-font-size-14); }
+.dw-steps--md .dw-steps__sep { height: 2px; }
+
 /* ── dw-rail-tabs: vertical icon-over-label tab strip at a panel edge ── */
 .dw-rail-tabs { display: flex; flex-shrink: 0; width: 64px; }
 .dw-rail-tabs__nav {

package/styles/components/overlay.css

@@ -339,9 +339,24 @@ body .p-drawer-right {
 }
 .p-tooltip.dw-tooltip--multiline .p-tooltip-text { white-space: pre-line; }
 .p-tooltip.dw-tooltip--error .p-tooltip-text { background: var(--dw-status-danger-fg); color: var(--dw-text-inverse); }
+/* Preview (dwTooltipVariant="preview"): a long value shown whole, up to 720 × 340px, then scrolled; line breaks kept,
+   long tokens broken anywhere. Pair it with dwTooltipInteractive so the pointer can scroll it. */
+.p-tooltip.dw-tooltip--preview { width: auto; max-width: min(720px, 68vw); }
+.p-tooltip.dw-tooltip--preview .p-tooltip-text {
+  display: inline-block;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(720px, 68vw);
+  max-height: min(42vh, 340px);
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: var(--dw-font-size-12);
+  line-height: 1.45;
+}
 .p-tooltip.dw-tooltip--error .p-tooltip-arrow { border-top-color: var(--dw-status-danger-fg); }
 /* Long code / JSON: wide, scrollable, monospace, wrapped. */
-.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); z-index: 5000; }
+.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); }
 .p-tooltip.dw-tooltip--code .p-tooltip-text {
   display: block;
   width: 100%;

package/styles/components/surface.css

@@ -703,3 +703,39 @@ div.dw-section__header { cursor: default; }
 .p-splitter.dw-splitter--rail-start > .p-splitter-gutter {
   background: linear-gradient(to right, var(--dw-surface-rail) 50%, transparent 50%);
 }
+
+/* ── dw-splitter (the component): the same flat panes and hairline gutter, the gutter holding a
+   dw-resizer. The pane sizes are flex-grow ratios set by the component; the handle is a zero-size
+   anchor at the gutter's centre that the resizer's 10px hit strip straddles. The resizer's own line
+   and grip are hidden: the hairline is the gutter's. ── */
+.dw-splitter--horizontal,
+.dw-splitter--vertical { display: flex; height: 100%; min-width: 0; min-height: 0; }
+.dw-splitter--horizontal { flex-direction: row; }
+.dw-splitter--vertical { flex-direction: column; }
+.dw-splitter__pane { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
+.dw-splitter__pane > * { flex: 1 1 auto; height: 100%; min-width: 0; min-height: 0; }
+.dw-splitter__gutter { position: relative; flex: 0 0 auto; background: transparent; }
+.dw-splitter--horizontal > .dw-splitter__gutter { cursor: col-resize; }
+.dw-splitter--vertical > .dw-splitter__gutter { cursor: row-resize; }
+.dw-splitter__gutter::before {
+  content: '';
+  position: absolute;
+  background: var(--dw-border);
+  transition: background var(--dw-dur-micro) var(--dw-ease);
+}
+.dw-splitter--horizontal > .dw-splitter__gutter::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
+.dw-splitter--vertical > .dw-splitter__gutter::before { top: 50%; right: 0; left: 0; height: 1px; transform: translateY(-50%); }
+.dw-splitter--horizontal > .dw-splitter__gutter:is(:hover, .is-dragging, :has(.dw-resizer:focus-visible))::before { width: 2px; background: var(--dw-accent); }
+.dw-splitter--vertical > .dw-splitter__gutter:is(:hover, .is-dragging, :has(.dw-resizer:focus-visible))::before { height: 2px; background: var(--dw-accent); }
+.dw-splitter__handle { position: absolute; }
+.dw-splitter--horizontal > .dw-splitter__gutter > .dw-splitter__handle { top: 0; bottom: 0; left: 50%; width: 0; }
+.dw-splitter--vertical > .dw-splitter__gutter > .dw-splitter__handle { top: 50%; right: 0; left: 0; height: 0; }
+.dw-splitter__handle > .dw-resizer::before,
+.dw-splitter__handle > .dw-resizer::after { display: none; }
+.dw-splitter.is-resizing { user-select: none; }
+.dw-splitter--rail-start.dw-splitter--horizontal > .dw-splitter__gutter {
+  background: linear-gradient(to right, var(--dw-surface-rail) 50%, transparent 50%);
+}
+.dw-splitter--rail-start.dw-splitter--vertical > .dw-splitter__gutter {
+  background: linear-gradient(to bottom, var(--dw-surface-rail) 50%, transparent 50%);
+}

package/styles/crystal-no-fonts.css

@@ -4,6 +4,8 @@
  *
  * Rules: colours only in tokens/primitives.css (everything else uses semantic tokens); font-family only in base.css.
  */
+/* PrimeIcons (pi pi-*): crystal's dependency, so an app never installs or loads it itself. Its font is local. */
+@import './icons.css';
 @import './tokens/primitives.css';
 @import './tokens/semantic.css';
 @import './tokens/semantic-dark.css';

package/styles/icons.css

@@ -0,0 +1,6 @@
+/*
+ * @dataworkz/crystal — the PrimeIcons font (`pi pi-*`, `<dw-icon pi>`), shipped as @dataworkz/crystal/styles/icons.css.
+ * Crystal depends on primeicons, so an app never installs or loads it itself: crystal.css / crystal-no-fonts.css import
+ * this file; an app that imports crystal's styles file by file imports it too. The font files are local (no CDN).
+ */
+@import 'primeicons/primeicons.css';