@dataworkz/crystal 0.1.0-beta.0 → 0.1.0-beta.2

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, TemplateRef, EnvironmentProviders, InjectionToken } from '@angular/core';
+import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef } from '@angular/core';
 import { StorageIconSet } from '@dataworkz/crystal/icons';
 export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
 import { ValidationErrors, AbstractControl, NgModel, NgControl, ControlValueAccessor } from '@angular/forms';
@@ -187,7 +187,7 @@ type DwBadgeKind = 'count' | 'label';
  * <dw-badge value="Required" tone="accent" kind="label" />
  * <dw-badge value="admin" [bordered]="true" />   <!-- hairline outline, e.g. role pills -->
  * <dw-badge value="1 ms" kind="label" size="md" />   <!-- 12px, in detail headers -->
- * <dw-badge value="Jira" icon="assets/icons/jira.svg" />   <!-- image path icons work too -->
+ * <dw-badge value="Docs" [icon]="logoUrl" />   <!-- an image URL works too -->
  * ```
  */
 declare class DwBadgeComponent {
@@ -434,12 +434,12 @@ declare function initialsOf(name: string | null | undefined, strategy?: DwInitia
 /** A stable colour per name, for callers that opt in with `[tint]="tintFor(name)"`. */
 declare function tintFor(name: string | null | undefined): DwAvatarTint;
 /**
- * User / tenant avatar: image or initials on a bordered rounded square, neutral
+ * User / account avatar: image or initials on a bordered rounded square, neutral
  * grey unless a `tint` is given (the backend has no avatar colours).
  *
  * ```html
  * <dw-avatar [name]="user.fullName" size="sm" />
- * <dw-avatar [name]="tenant.accountName" initials="split" [presence]="tenant.active" />
+ * <dw-avatar [name]="account.name" initials="split" [presence]="account.online" />
  * ```
  */
 declare class DwAvatarComponent {
@@ -451,7 +451,7 @@ declare class DwAvatarComponent {
     readonly tint: _angular_core.InputSignal<DwAvatarTint>;
     readonly presence: _angular_core.InputSignal<boolean | null>;
     readonly tooltip: _angular_core.InputSignal<string>;
-    /** Darkens the tile's border while its parent button is hovered or open (account menus). */
+    /** Darkens the tile's border while its parent button is hovered or open (e.g. an account menu). */
     readonly ring: _angular_core.InputSignal<boolean>;
     readonly imageFailed: _angular_core.WritableSignal<boolean>;
     readonly text: _angular_core.Signal<string>;
@@ -463,12 +463,13 @@ declare class DwAvatarComponent {
 type DwEntityKind = 'tool' | 'storage' | 'file' | 'image' | 'icon';
 type DwEntityTint = 'none' | 'neutral' | 'accent' | 'workflow' | 'reasoning' | 'orange' | 'cyan' | 'pink' | 'danger';
 /**
- * Entity / type icon. Resolves artwork through the shared icon utilities so
- * every screen picks the same asset for the same type.
+ * Entity / type icon: a tool, storage or file-type logo (inlined), an image, or an icon in a tinted tile.
+ * For `tool` / `storage`, `type` is a crystal icon key (`snowflake`, `s3`), or your own type value when the app maps
+ * it with `provideCrystalIconResolvers()`.
  *
  * ```html
- * <dw-entity-icon kind="tool" [type]="tool.typeId" [toolId]="tool.id" />
- * <dw-entity-icon kind="storage" [type]="conn.storageType" size="lg" [framed]="true" />
+ * <dw-entity-icon kind="tool" type="snowflake" />
+ * <dw-entity-icon kind="storage" type="s3" size="lg" [framed]="true" />
  * <dw-entity-icon kind="file" type="pdf" size="sm" />
  * <dw-entity-icon kind="icon" type="pi pi-sitemap" tint="accent" [framed]="true" />
  * <dw-entity-icon kind="icon" type="dwi-robot" tint="accent" [framed]="true" />   <!-- a dw-icon glyph, in the tint colour -->
@@ -476,8 +477,9 @@ type DwEntityTint = 'none' | 'neutral' | 'accent' | 'workflow' | 'reasoning' | '
  */
 declare class DwEntityIconComponent {
     readonly kind: _angular_core.InputSignal<DwEntityKind>;
-    /** Tool typeId, storage type, file extension, image src, or icon class / `dwi-<name>` (per `kind`). */
+    /** Tool or storage icon key (or your type, see provideCrystalIconResolvers), file extension, image src, or icon class / `dwi-<name>` (per `kind`). */
     readonly type: _angular_core.InputSignal<string | null>;
+    /** Passed to your tool resolver (provideCrystalIconResolvers), for mappings that depend on the tool's id. */
     readonly toolId: _angular_core.InputSignal<string | null>;
     readonly src: _angular_core.InputSignal<string | null>;
     readonly fallback: _angular_core.InputSignal<string | undefined>;
@@ -488,6 +490,7 @@ declare class DwEntityIconComponent {
     readonly alt: _angular_core.InputSignal<string>;
     readonly failed: _angular_core.WritableSignal<boolean>;
     private readonly icons;
+    private readonly resolvers;
     /** kind `icon` with a `dwi-<name>` glyph or a registered icon name: drawn by dw-icon, in the tile's colour. */
     readonly svgIcon: _angular_core.Signal<string | null>;
     readonly iconClass: _angular_core.Signal<string>;
@@ -497,6 +500,31 @@ declare class DwEntityIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwEntityIconComponent, "dw-entity-icon", never, { "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "toolId": { "alias": "toolId"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "fallback": { "alias": "fallback"; "required": false; "isSignal": true; }; "storageSet": { "alias": "storageSet"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "tint": { "alias": "tint"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Maps an app's own type values to crystal's icon keys, for `dw-entity-icon kind="tool" | "storage"`. Crystal knows only
+ * its artwork names (`snowflake`, `s3`…); an app whose data says e.g. `RELATIONAL_POSTGRES` tells it which icon that is.
+ * Return `null` / `undefined` for "no artwork" (the generic or fallback icon shows).
+ */
+interface DwIconResolvers {
+    /** Your tool `type` → a tool icon key. `toolId` is the element's `toolId` input, if your mapping needs it. */
+    tool?: (type: string, context: {
+        toolId: string | null;
+    }) => string | null | undefined;
+    /** Your storage `type` → a storage icon key. */
+    storage?: (type: string) => string | null | undefined;
+}
+/** The resolvers given to `provideCrystalIconResolvers()`; none by default (`type` is then the icon key itself). */
+declare const DW_ICON_RESOLVERS: InjectionToken<DwIconResolvers>;
+/**
+ * Lets `dw-entity-icon` take your own type values:
+ *
+ * ```ts
+ * providers: [provideCrystalIconResolvers({ tool: (typeId) => myToolIconKey(typeId), storage: (t) => myStorageKey(t) })]
+ * // <dw-entity-icon kind="tool" [type]="tool.typeId" />
+ * ```
+ */
+declare function provideCrystalIconResolvers(resolvers: DwIconResolvers): EnvironmentProviders;
+
 /**
  * The one spinner. Replaces `fa-spinner fa-spin`, ad-hoc `pi-spin`,
  * cosmetic `p-progressSpinner`, `.loading-state` and `.loading-overlay`.
@@ -811,7 +839,7 @@ declare class DwResizerComponent {
 }
 
 /**
- * Overlay anchors: a bar (e.g. the app header) marked `data-dw-overlay-anchor` makes every
+ * Overlay anchors: a bar (e.g. a fixed page header) marked `data-dw-overlay-anchor` makes every
  * dw-menu / dw-popover opened from inside it start just below the bar, rather than below
  * the individual trigger — so menus from a short avatar button and a full-height nav tab
  * line up on the same edge.
@@ -855,7 +883,7 @@ declare class DwCopyButtonComponent implements OnDestroy {
 }
 
 /**
- * The app-wide entity ID badge: a muted monospace ID (truncated to
+ * Entity ID badge: a muted monospace ID (truncated to
  * `first8...last4` by default) that reveals a copy icon on hover and copies
  * the full ID on click, flashing a "Copied!" confirmation.
  *
@@ -875,18 +903,28 @@ declare class IdBlockComponent implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<IdBlockComponent, "app-id-block, dw-id-block", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "truncate": { "alias": "truncate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type MessageFn = (error: unknown, label: string) => string;
+/** A message, or a function building one from the validator's error value and the field's label. */
+type DwFieldMessage = string | ((error: unknown, label: string) => string);
+/**
+ * Default validation messages for Angular's built-in validators, keyed by error key. An app adds messages for its own
+ * validators with `provideCrystalFieldMessages()`; a single field can override any of them through `dw-field [errors]`.
+ */
+declare const DW_FIELD_MESSAGES: Readonly<Record<string, DwFieldMessage>>;
+/** The app's own validator messages (provideCrystalFieldMessages), merged over the defaults; none by default. */
+declare const DW_APP_FIELD_MESSAGES: InjectionToken<Readonly<Record<string, DwFieldMessage>>>;
 /**
- * Default validation messages, keyed by validator error key. Screens can
- * override any of them per field through `dw-field [errors]`.
+ * Messages for the app's own validators (and replacements for the defaults), used by every dw-field:
+ *
+ * ```ts
+ * providers: [provideCrystalFieldMessages({ phone: 'Enter a phone number', duplicate: 'This name already exists' })]
+ * ```
  */
-declare const DW_FIELD_MESSAGES: Readonly<Record<string, string | MessageFn>>;
+declare function provideCrystalFieldMessages(messages: Readonly<Record<string, DwFieldMessage>>): EnvironmentProviders;
 /**
- * First matching message for a control's errors. Override map wins, then a
- * string error value (validators that return their own message), then the
- * defaults, then a generic fallback.
+ * First matching message for a control's errors. Override map wins, then a string error value (validators that
+ * return their own message), then the app's messages, then the defaults, then a generic fallback.
  */
-declare function fieldErrorMessage(errors: ValidationErrors | null | undefined, overrides?: Readonly<Record<string, string>> | null, label?: string): string;
+declare function fieldErrorMessage(errors: ValidationErrors | null | undefined, overrides?: Readonly<Record<string, string>> | null, label?: string, appMessages?: Readonly<Record<string, DwFieldMessage>>): string;
 
 type DwShowErrorsWhen = 'touched' | 'dirty' | 'touchedOrDirty' | 'always';
 /**
@@ -911,6 +949,7 @@ type DwShowErrorsWhen = 'touched' | 'dirty' | 'touchedOrDirty' | 'always';
 declare class DwFieldComponent {
     private readonly host;
     private readonly destroyRef;
+    private readonly appMessages;
     readonly label: _angular_core.InputSignal<string>;
     /** Explicit control id; generated when omitted. */
     readonly for: _angular_core.InputSignal<string | null>;
@@ -1233,7 +1272,7 @@ type DwCardTint = 'neutral' | 'accent' | 'workflow' | 'reasoning' | 'orange' | '
  * <dw-card variant="stat" label="Runs" [value]="1204" [interactive]="true" [selected]="filter === 'runs'" />
  *
  * <!-- Stat with the info icon and an expand chevron at the end of the label row, a muted suffix -->
- * <dw-card variant="stat" label="Invoices" [value]="'1,341'" valueSuffix="/ 1,500" tooltip="…" infoPosition="end">
+ * <dw-card variant="stat" label="Orders" [value]="'1,341'" valueSuffix="/ 1,500" tooltip="…" infoPosition="end">
  *   <i dwStatLabelEnd class="pi pi-chevron-down"></i>
  * </dw-card>
  *
@@ -1307,7 +1346,7 @@ declare class DwToggleCardBodyDirective {
  *
  * ```html
  * <dw-toggle-card title="Full Text Search Index" description="Enable full text search"
- *   icon="assets/images/svgIcon/text-search.svg" [expanded]="form.value.fullTextSearchIndex"
+ *   icon="pi pi-search" [expanded]="form.value.fullTextSearchIndex"
  *   [disabledReason]="graphDbOn ? '' : 'Requires Graph Database Storage to be enabled'">
  *   <p-toggleswitch dwToggleCardControl formControlName="fullTextSearchIndex" />
  *   <ng-template dwToggleCardBody>…configuration fields…</ng-template>
@@ -1340,7 +1379,7 @@ declare const DW_TOGGLE_CARD: readonly [typeof DwToggleCardComponent, typeof DwT
  *
  * ```html
  * <div class="dw-tile-grid">
- *   <dw-tile label="Snowflake" icon="assets/snowflake.svg" [count]="3" (activate)="open('snowflake')" />
+ *   <dw-tile label="Snowflake" icon="pi pi-database" [count]="3" (activate)="open('snowflake')" />
  *   <dw-tile label="Slack" icon="pi pi-slack" badge="Coming soon" [disabled]="true" />
  * </div>
  * ```
@@ -1561,14 +1600,14 @@ declare class DwBreadcrumbComponent {
  * subtitle, count, deprecated badge, meta row and right-side actions.
  *
  * ```html
- * <dw-page-header title="My agents" [count]="total">
+ * <dw-page-header title="Projects" [count]="total">
  *   <dw-button dwPageHeaderActions label="Create" icon="pi pi-plus" (clicked)="create()" />
  * </dw-page-header>
  *
- * <dw-page-header [breadcrumbs]="[{label:'LLM Configuration', action: back}, {label: cfg.name}]"
- *                 icon="assets/images/svgIcon/llm.svg" variant="panel" [showClose]="true" (close)="close()" />
+ * <dw-page-header [breadcrumbs]="[{label:'Settings', action: back}, {label: item.name}]"
+ *                 icon="pi pi-cog" variant="panel" [showClose]="true" (close)="close()" />
  *
- * <dw-page-header variant="list" [flush]="true" title="Tenant Analytics" />   <!-- on the content edge -->
+ * <dw-page-header variant="list" [flush]="true" title="Analytics" />   <!-- on the content edge -->
  *
  * <dw-page-header [title]="agent.name" [editableTitle]="true" (titleChange)="rename($event)"
  *                 [showBack]="true" (back)="goBack()">
@@ -1782,8 +1821,8 @@ declare class DwNavListComponent {
     /** Nested items hang off guide lines instead of plain indentation (reference trees). */
     readonly treeLines: _angular_core.InputSignal<boolean>;
     /**
-     * The accent left border on the selected item. Only the agents list page's sidebar uses it;
-     * everywhere else a selection is the plain selected fill.
+     * The accent left border on the selected item, for a sidebar that wants a stronger marker;
+     * otherwise a selection is the plain selected fill.
      */
     readonly marker: _angular_core.InputSignal<boolean>;
     /** Where item tooltips open: beside a sidebar (right, the default) or above, e.g. in a wide panel. */
@@ -1934,10 +1973,10 @@ interface DwConfirmSummaryRow {
  * copied `.delete-modal-*` markup.
  *
  * ```html
- * <dw-confirm-dialog [(visible)]="confirmOpen" header="Delete workspace"
- *   [message]="'Delete “' + ws.name + '”? This cannot be undone.'"
+ * <dw-confirm-dialog [(visible)]="confirmOpen" header="Delete project"
+ *   [message]="'Delete “' + project.name + '”? This cannot be undone.'"
  *   acceptLabel="Delete" loadingLabel="Deleting…" [loading]="deleting"
- *   [warning]="{ title: 'In use', text: '3 collections use this workspace' }"
+ *   [warning]="{ title: 'In use', text: '3 reports use this project' }"
  *   (accept)="delete()" />
  * ```
  * Project extra body content (radio options, dependency lists) as children.
@@ -2087,7 +2126,7 @@ declare class DwDrawerComponent {
     readonly breadcrumbs: _angular_core.InputSignal<readonly DwBreadcrumb[]>;
     readonly showBack: _angular_core.InputSignal<boolean>;
     readonly showCloseIcon: _angular_core.InputSignal<boolean>;
-    /** False when the body brings its own header and close control (e.g. the probe view). */
+    /** False when the body brings its own header and close control. */
     readonly showHeader: _angular_core.InputSignal<boolean>;
     readonly modal: _angular_core.InputSignal<boolean>;
     /** Close on mask click. */
@@ -2154,8 +2193,8 @@ declare class DwPopoverFooterDirective {
  * and footer actions.
  *
  * ```html
- * <dw-button label="New tenant" (clicked)="pop.toggle($event)" />
- * <dw-popover #pop header="Create tenant" width="320px">
+ * <dw-button label="New project" (clicked)="pop.toggle($event)" />
+ * <dw-popover #pop header="Create project" width="320px">
  *   <input pInputText [(ngModel)]="name" />
  *   <div dwPopoverFooter>
  *     <dw-button label="Cancel" variant="secondary" appearance="text" (clicked)="pop.hide()" />
@@ -2234,7 +2273,7 @@ interface DwToast {
  *
  * ```ts
  * this.toast.success('Agent saved');
- * this.toast.error('Could not delete workspace', { sticky: true });
+ * this.toast.error('Could not delete the project', { sticky: true });
  * ```
  */
 declare class DwToastService implements OnDestroy {
@@ -2261,7 +2300,7 @@ declare class DwToastService implements OnDestroy {
 type DwToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
 /**
  * Renders the DwToastService stack. Place it once, in the app's root component; every screen pushes toasts through
- * DwToastService and they all show here, with one position and one look (dataworkz-ui's toasts as they look today).
+ * DwToastService and they all show here, with one position and one look.
  *
  * ```html
  * <router-outlet />
@@ -2270,7 +2309,7 @@ type DwToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-ri
  */
 declare class DwToastHostComponent {
     private readonly toasts;
-    /** Where the stack sits. Default: centred under the top edge, as in dataworkz-ui today. */
+    /** Where the stack sits. Default: centred under the top edge. */
     readonly position: _angular_core.InputSignal<DwToastPosition>;
     /** Most toasts shown at once; the newest win, older ones wait until these go. */
     readonly max: _angular_core.InputSignal<number>;
@@ -2502,7 +2541,7 @@ declare class DwTableComponent<T = any> {
     readonly rowClass: _angular_core.InputSignal<((row: T) => string | string[] | Record<string, boolean> | null) | null>;
     readonly actionsHeader: _angular_core.InputSignal<string>;
     readonly actionsWidth: _angular_core.InputSignal<string>;
-    /** `start`: the actions column comes right after the first column, frozen left (agents list). */
+    /** `start`: the actions column comes right after the first column, frozen left. */
     readonly actionsPlacement: _angular_core.InputSignal<"start" | "end">;
     /** A row's menu (Edit, Delete…): the actions column gets a ⋮ that opens it. */
     readonly rowMenuItems: _angular_core.InputSignal<((row: T) => DwMenuItem<T>[]) | null>;
@@ -2655,7 +2694,7 @@ declare class DwIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwIconComponent, "dw-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Icon names starting with this (any case) are crystal's: `dw…` and `dwi-…` (MIGRATION-PLAN D16). */
+/** Icon names starting with this (any case) are crystal's: `dw…` and `dwi-…`. */
 declare const DW_RESERVED_ICON_PREFIX = "dw";
 /**
  * The consumer's own SVG icons, by name. A consumer registers markup under any name that doesn't start with `dw`, and
@@ -2770,10 +2809,10 @@ interface CrystalThemeConfig {
     apply?: boolean;
     /** Theme used until the viewer picks one. Default 'light'. */
     initial?: DwTheme;
-    /** localStorage key for the viewer's choice. Default 'dw-theme' (dataworkz-ui's key, so stored choices survive). */
+    /** localStorage key for the viewer's choice. Default 'dw-theme' (kept stable, so stored choices survive upgrades). */
     storageKey?: string;
 }
-/** What `provideCrystal()` configures. Theme only (MIGRATION-PLAN §3.2). */
+/** What `provideCrystal()` configures: the theme. */
 interface CrystalConfig {
     theme?: CrystalThemeConfig;
 }
@@ -2787,7 +2826,7 @@ declare const DW_CRYSTAL_CONFIG: InjectionToken<CrystalConfig>;
  *
  * `provideCrystal()` applies it once at start-up so a stored dark choice
  * doesn't flash light. With `theme.apply: false` (federated elements on a
- * legacy host page) it never touches <html>.
+ * page crystal doesn't own) it never touches <html>.
  */
 declare class ThemeService {
     private readonly document;
@@ -2806,7 +2845,7 @@ declare class ThemeService {
 }
 
 /**
- * Crystal's app-level setup: the theme (MIGRATION-PLAN §3.2). With `theme.apply` (the default) it puts the stored or
+ * Crystal's app-level setup: the theme. With `theme.apply` (the default) it puts the stored or
  * initial theme on <html> before the first render, so a dark choice doesn't flash light.
  *
  * ```ts
@@ -2823,7 +2862,7 @@ interface CrystalHostThemeOptions {
     fonts?: boolean;
 }
 /**
- * Themes a page crystal doesn't own: for components delivered as federated custom elements (MIGRATION-PLAN §3.5).
+ * Themes a page crystal doesn't own: for components delivered as federated custom elements.
  * Prepends one `<style data-dw-crystal-theme>` ahead of the host's stylesheets (so the host wins equal-specificity
  * ties) holding the host-safe theme: tokens incl. dark, the element base, component CSS and utilities, no resets and
  * no html / body rules. Fonts are embedded, since relative URLs can't resolve from an injected `<style>`.
@@ -2840,5 +2879,5 @@ declare function installCrystalHostTheme({ fonts }?: CrystalHostThemeOptions): v
 /** Removes the host theme again (e.g. a host that unloads crystal, or a test). */
 declare function removeCrystalHostTheme(): void;
 
-export { DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwCheckToggleComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, provideCrystal, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
-export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwInitialsStrategy, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone };
+export { DW_APP_FIELD_MESSAGES, DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_ICON_RESOLVERS, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwCheckToggleComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
+export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.2",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",

package/primeng/index.d.ts

@@ -5,7 +5,7 @@ import { PrimeNGConfigType } from 'primeng/config';
 
 /**
  * Azure Electric primary ramp. Same hex values as `--dw-primary-*` in
- * src/styles/tokens/primitives.css — PrimeNG needs literal hex for the
+ * tokens/primitives.css — PrimeNG needs literal hex for the
  * primitive ramp because it derives other tokens from it at build time.
  */
 declare const AZURE_PRIMARY_RAMP: {
@@ -23,8 +23,8 @@ declare const AZURE_PRIMARY_RAMP: {
 };
 /**
  * PrimeNG color scheme, used for both light and dark. Every value points at a
- * design-system CSS variable, so PrimeNG follows src/styles/tokens/semantic.css
- * and semantic-dark.css: switching theme re-points the variables, the preset
+ * design-system CSS variable, so PrimeNG follows the semantic tokens (tokens/semantic.css
+ * and semantic-dark.css): switching theme re-points the variables, the preset
  * never changes. (The surface ramp is the raw neutral scale, light → dark,
  * which is the order Aura's own light and dark schemes expect.)
  */
@@ -610,6 +610,35 @@ declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base
 
 /** 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 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 +649,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_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };

package/styles/base.css

@@ -1,12 +1,12 @@
 /* ============================================================================
    Dataworkz Design System — BASE
-   The ONLY place in the app that declares font-family (element-base.css is
-   its equivalent for the federated elements on the legacy page). Everything else
+   The ONLY place in the theme that declares font-family (element-base.css is
+   its equivalent for components embedded in a page crystal doesn't own). Everything else
    inherits (`font: inherit`) or uses the typography classes.
    ============================================================================ */
 
-/* ── Reset — the element defaults the app was built on (ported from the
-   Bootstrap 4 Reboot when Bootstrap was removed) ── */
+/* ── Reset — the element defaults the components are built on (in the spirit of the
+   Bootstrap 4 Reboot) ── */
 *,
 *::before,
 *::after {

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

@@ -153,108 +153,6 @@ dw-markdown.dw-prose { display: block; }
 .dw-prose--compact { font-size: var(--dw-font-size-12); line-height: 1.5; }
 .dw-prose--compact p { margin-bottom: var(--dw-space-1); }
 
-/* ── Citation chip — numbered source reference in rendered answers (RAG run,
-   Q&A history, probe). The markup is generated by the RAG answer services. ── */
-.dw-rag-cite-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
-  margin: 0 2px;
-  border-radius: var(--dw-radius-sm);
-  border: 1px solid var(--dw-border-accent);
-  background: var(--dw-accent-tint);
-  color: var(--dw-accent-text);
-  font-size: var(--dw-font-size-12);
-  font-weight: var(--dw-font-weight-semibold);
-  line-height: var(--dw-line-height-20);
-  text-decoration: none;
-  vertical-align: middle;
-}
-
-a.dw-rag-cite-chip:hover {
-  background: var(--dw-accent-tint-strong);
-  text-decoration: none;
-}
-
 /* ── 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; }
-
-/* ── Chat message: avatar · author line · bubble ──
-   <div class="dw-msg dw-msg--user"><span class="dw-msg__avatar"><i class="pi pi-user"></i></span>
-   <div class="dw-msg__main"><div class="dw-msg__head"><span class="dw-msg__author">Ana</span>
-   <span class="dw-msg__role">User query</span></div><div class="dw-msg__bubble">…</div></div></div> */
-.dw-msg { display: flex; gap: 10px; }
-.dw-msg + .dw-msg { margin-top: 14px; }
-.dw-msg__avatar {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  margin-top: 2px;
-  border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-full);
-  background: var(--dw-surface-pressed);
-  color: var(--dw-text-secondary);
-  font-size: var(--dw-font-size-12);
-}
-.dw-msg__main { flex: 1; min-width: 0; }
-.dw-msg__head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--dw-space-1); }
-.dw-msg__author { color: var(--dw-text); font-size: var(--dw-font-size-12); font-weight: var(--dw-font-weight-semibold); }
-.dw-msg__role { color: var(--dw-text-secondary); font-size: var(--dw-font-size-12); }
-.dw-msg__bubble {
-  padding: 10px 14px;
-  border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-md) var(--dw-radius-md) var(--dw-radius-md) 2px;
-  background: var(--dw-surface-pressed);
-  color: var(--dw-text);
-  font-size: var(--dw-font-size-14);
-  line-height: var(--dw-line-height-20);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.dw-msg--user .dw-msg__avatar { border-color: var(--dw-border-accent); background: var(--dw-accent-tint); color: var(--dw-accent); }
-.dw-msg--user .dw-msg__bubble { border-color: var(--dw-border-accent); background: var(--dw-accent-tint); color: var(--dw-accent-text); }
-.dw-msg--agent .dw-msg__avatar { border-color: var(--dw-status-success-border); background: var(--dw-status-success-bg); color: var(--dw-status-success-fg); }
-
-/* ── Chat composer: a borderless textarea + toolbar inside one card ──
-   <div class="dw-composer"><textarea class="dw-composer__input" …></textarea>
-   <div class="dw-composer__toolbar"><dw-button …/><span class="dw-composer__spacer"></span>
-   <span class="dw-composer__hint">⌘ Enter</span><dw-button label="Send" …/></div></div> */
-.dw-composer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dw-space-2);
-  padding: var(--dw-space-3) var(--dw-space-3) var(--dw-space-2);
-  border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-xl);
-  background: var(--dw-surface);
-  box-shadow: var(--dw-shadow-sm);
-  transition: border-color var(--dw-dur-micro) var(--dw-ease), box-shadow var(--dw-dur-micro) var(--dw-ease);
-}
-.dw-composer:focus-within { border-color: var(--dw-border-accent); box-shadow: var(--dw-focus-ring); }
-.dw-composer__input {
-  width: 100%;
-  min-height: 84px;
-  max-height: 220px;
-  padding: 0;
-  border: 0;
-  outline: none;
-  resize: none;
-  background: transparent;
-  color: var(--dw-text);
-  font-size: var(--dw-font-size-14);
-  line-height: var(--dw-line-height-20);
-}
-.dw-composer__input::placeholder { color: var(--dw-text-muted); }
-.dw-composer__toolbar { display: flex; align-items: center; gap: var(--dw-space-2); }
-.dw-composer__spacer { flex: 1; }
-.dw-composer__hint {
-  color: var(--dw-text-muted);
-  font-size: var(--dw-font-size-12);
-}

package/styles/components/data.css

@@ -79,7 +79,7 @@
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-/* Dense detail panels (e.g. the Probe): 13px values; key column and spacing unchanged. */
+/* Dense detail panels: 13px values; key column and spacing unchanged. */
 .dw-kv-list--sm .dw-kv-list__value { font-size: var(--dw-font-size-13); }
 .dw-kv-list__action { flex-shrink: 0; opacity: 0; transition: opacity var(--dw-dur-micro) var(--dw-ease); }
 .dw-kv-list__row:hover .dw-kv-list__action,

package/styles/components/form.css

@@ -470,8 +470,9 @@ 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,

package/styles/components/surface.css

@@ -406,8 +406,8 @@
 .dw-avatar--tint-cyan { background: var(--dw-icon-tint-cyan); color: var(--dw-icon-tint-cyan-fg); }
 .dw-avatar--tint-pink { background: var(--dw-icon-tint-pink); color: var(--dw-icon-tint-pink-fg); }
 
-/* Ring (account menus): the border darkens while its button is hovered or open,
-   like the other header controls (e.g. the tenant switcher). */
+/* Ring (e.g. an account menu button): the border darkens while its button is hovered or open,
+   like other header controls. */
 .dw-avatar--ring { transition: border-color var(--dw-dur-micro); }
 
 button:hover > dw-avatar .dw-avatar--ring,

package/styles/components/toast.css

@@ -1,4 +1,4 @@
-/* ── Toasts (dw-toast-host): today's dataworkz-ui look, ported from app-notifications ──
+/* ── Toasts (dw-toast-host) ──
    Rounded pills in the status colours, stacked under the top edge, centred on half the page width.
    z-index 9999 as today: it keeps toasts above PrimeNG overlays, whose z-index grows with every one opened. */
 .dw-toast-host { display: contents; }

package/styles/crystal-no-fonts.css

@@ -1,7 +1,6 @@
 /*
  * @dataworkz/crystal — the full app theme without @font-face, shipped as @dataworkz/crystal/styles/crystal-no-fonts.css.
- * For a page that already loads Inter and IBM Plex Mono itself. Same order as dataworkz-ui's src/styles/index.css,
- * minus its legacy CSS and app-header.css (they stay in the app).
+ * For a page that already loads Inter and IBM Plex Mono itself. Same layers and order as crystal.css.
  *
  * Rules: colours only in tokens/primitives.css (everything else uses semantic tokens); font-family only in base.css.
  */

package/styles/tokens/primitives.css

@@ -1,8 +1,6 @@
 /* ============================================================================
    Dataworkz Design System — PRIMITIVE tokens
-   Source of truth: designs/dataworkz-design-system/handoff/design-system.html
-
-   This is the ONLY file in the app allowed to contain raw color literals.
+   This is the ONLY file in the theme allowed to contain raw color literals.
    Components never consume primitives directly — they consume the semantic
    role tokens in semantic.css, which point at these. A future dark theme only
    re-points the semantic layer.