@revolist/ui 4.0.2-rc → 4.0.2

package/ai/chat.d.ts

@@ -0,0 +1,65 @@
+import { h, ComponentChildren, JSX } from '../_vendor/preact/src/index';
+import { AiPromptInputProps } from './components';
+import { AiUiTranslations } from './translations';
+export interface AiChatPartProps {
+    children?: ComponentChildren;
+    className?: string;
+    translations?: AiUiTranslations;
+}
+export interface AiChatProps extends AiChatPartProps {
+    label?: string;
+    style?: JSX.CSSProperties;
+}
+/** Presentation only. The host owns transcript, provider, actions and persistence. */
+export declare function AiChat({ children, className, label, style, translations, }: AiChatProps): h.JSX.Element;
+export interface AiChatContentProps extends AiChatPartProps {
+    label?: string;
+    /** Follow updates only while the reader remains at the live edge. */
+    autoScroll?: boolean;
+    busy?: boolean;
+    jumpLabel?: string;
+}
+/** Scroll measurement belongs to this visual viewport, never to a grid/data owner. */
+export declare function AiChatContent({ children, className, autoScroll, busy, label, jumpLabel, translations, }: AiChatContentProps): h.JSX.Element;
+export interface AiChatEmptyStateProps extends AiChatPartProps {
+    title?: string;
+    description?: string;
+    /** Framework-owned image/text content. Return cleanup for listeners or mounted views. */
+    renderContent?(host: HTMLElement): void | (() => void);
+}
+export declare function AiChatEmptyState({ title, description, children, className, translations, renderContent, }: AiChatEmptyStateProps): h.JSX.Element;
+/** Existing composer behavior, with chat-specific defaults. */
+export declare function AiChatComposer(props: AiPromptInputProps): h.JSX.Element;
+export interface AiMessageProps extends AiChatPartProps {
+    from: 'user' | 'assistant' | 'system';
+    label?: string;
+    isStreaming?: boolean;
+}
+export declare function AiMessage({ from, label, isStreaming, children, className, translations, }: AiMessageProps): h.JSX.Element;
+/** Text stays text. Hosts can supply their own trusted Markdown renderer as children. */
+export declare function AiMessageContent({ children, className, }: AiChatPartProps): h.JSX.Element;
+export interface AiMessageActionsProps extends AiChatPartProps {
+    label?: string;
+}
+export declare function AiMessageActions({ children, className, label, translations, }: AiMessageActionsProps): h.JSX.Element;
+export type AiTaskStatus = 'pending' | 'running' | 'completed' | 'error' | 'cancelled';
+export interface AiTaskProps extends AiChatPartProps {
+    title: string;
+    status?: AiTaskStatus;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+}
+export declare function AiTask(props: AiTaskProps): h.JSX.Element;
+export interface AiTaskItemProps extends AiChatPartProps {
+    status?: AiTaskStatus;
+}
+export declare function AiTaskItem({ status, children, className, translations, }: AiTaskItemProps): h.JSX.Element;
+export interface AiReasoningProps extends Omit<AiTaskProps, 'title' | 'status'> {
+    title?: string;
+    isStreaming?: boolean;
+    /** Host-supplied elapsed seconds; no hidden timer or invented reasoning. */
+    duration?: number;
+}
+/** Render only reasoning/summary text explicitly supplied by the host or provider. */
+export declare function AiReasoning({ title, isStreaming, duration, children, translations, ...props }: AiReasoningProps): h.JSX.Element;

package/ai/components.d.ts

@@ -1,7 +1,7 @@
 import { AiUiTranslations } from './translations';
 import { h, ComponentChildren, ComponentProps } from '../_vendor/preact/src/index';
 import { Textarea } from '../controls';
-export type AiActionPhase = 'idle' | 'understanding' | 'applying' | 'completed' | 'clarification' | 'unsupported' | 'error' | 'cancelled';
+export type AiActionPhase = 'idle' | 'understanding' | 'applying' | 'preview' | 'completed' | 'clarification' | 'unsupported' | 'error' | 'cancelled';
 export interface AiPromptInputProps {
     translations?: AiUiTranslations;
     value: string;
@@ -14,6 +14,8 @@ export interface AiPromptInputProps {
     placeholder?: string;
     submitLabel?: string;
     stopLabel?: string;
+    /** Opt-in local prompt recall. Arrow keys retain normal multiline behavior away from text edges. */
+    promptHistory?: readonly string[];
     /** Empty-draft keyboard guidance. An empty string lets toolbar context replace it. */
     hint?: string;
     /** Host-supported actions or context, displayed in the composer toolbar. */
@@ -24,15 +26,21 @@ export interface AiPromptInputProps {
     textareaProps?: Pick<ComponentProps<typeof Textarea>, 'className' | 'style' | 'rows'>;
 }
 /** Shared composer: Enter submits, Shift+Enter inserts a line; IME never submits. */
-export declare function AiPromptInput({ translations, value, onValueChange, onSubmit, onStop, busy, disabled, label, placeholder, submitLabel, stopLabel, hint, actions, footer, textareaProps, }: AiPromptInputProps): h.JSX.Element;
+export declare function AiPromptInput({ translations, value, onValueChange, onSubmit, onStop, busy, disabled, label, placeholder, submitLabel, stopLabel, promptHistory, hint, actions, footer, textareaProps, }: AiPromptInputProps): h.JSX.Element;
+export interface AiSuggestionChoice {
+    label: string;
+    prompt: string;
+}
 export interface AiSuggestionsProps {
+    /** Number of inline choices; remaining choices are available under More. Default: 2. */
+    maxVisible?: number;
     translations?: AiUiTranslations;
-    items: readonly string[];
+    items: readonly (string | AiSuggestionChoice)[];
     onSelect(value: string): void;
     disabled?: boolean;
     label?: string;
 }
-export declare function AiSuggestions({ translations, items, onSelect, disabled, label, }: AiSuggestionsProps): h.JSX.Element | null;
+export declare function AiSuggestions({ translations, items, onSelect, disabled, label, maxVisible, }: AiSuggestionsProps): h.JSX.Element | null;
 export interface AiActionStatusProps {
     translations?: AiUiTranslations;
     phase: AiActionPhase;
@@ -49,6 +57,8 @@ export interface AiResultProps {
 }
 export declare function AiResult({ translations, summary, matchedRows, countLabel, actions, children, }: AiResultProps): h.JSX.Element;
 export interface AiAssistantProps {
+    /** Fill a bounded parent, with messages scrolling above the composer. */
+    layout?: 'flow' | 'fill';
     translations?: AiUiTranslations;
     label?: string;
     children?: ComponentChildren;
@@ -56,4 +66,23 @@ export interface AiAssistantProps {
     busy?: boolean;
 }
 /** Neutral composition; grid/model/query policy remains in the consuming product. */
-export declare function AiAssistant({ translations, label, children, footer, busy, }: AiAssistantProps): h.JSX.Element;
+export declare function AiAssistant({ layout, translations, label, children, footer, busy, }: AiAssistantProps): h.JSX.Element;
+export interface AiPreviewChange {
+    /** User-facing record, task or chart name. */
+    item?: string;
+    label: string;
+    before?: string;
+    after?: string;
+}
+export interface AiChangePreviewProps {
+    translations?: AiUiTranslations;
+    summary: string;
+    details?: string;
+    changes?: readonly AiPreviewChange[];
+    notice?: string;
+    disabled?: boolean;
+    onApply(): void;
+    onCancel(): void;
+}
+/** Generic approval surface; the host retains the prepared command and its mutation policy. */
+export declare function AiChangePreview({ translations, summary, details, changes, notice, disabled, onApply, onCancel, }: AiChangePreviewProps): h.JSX.Element;

package/ai/index.d.ts

@@ -2,4 +2,7 @@ export * from './components';
 export * from './mount';
 export * from './request-trail';
 export * from './translations';
+export type { AiPromptHistoryOptions } from './prompt-history';
 export { AiTranslationProvider } from './translation-context';
+export * from './chat';
+export * from './results';

package/ai/index.js

@@ -1,3 +1,3 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../_chunks/request-trail-IdNiFvKH.js";
-import { t as l } from "../_chunks/mount-DZe_6VtR.js";
-export { t as AI_UI_MESSAGES, i as AiActionStatus, o as AiAssistant, n as AiPromptInput, c as AiRequestTrail, e as AiResult, a as AiSuggestions, s as AiTranslationProvider, l as mountAiAssistant, r as translateAiText };
+import { t as e } from "../_chunks/mount-BRdcG60g.js";
+import { C as t, E as n, S as r, T as i, _ as a, a as o, b as s, c, d as l, f as u, g as d, h as f, i as p, l as m, m as h, n as g, o as _, p as v, r as y, s as b, t as x, u as S, w as C, x as w, y as T } from "../_chunks/request-trail-DrhdpWiH.js";
+export { i as AI_UI_MESSAGES, u as AiActionStatus, v as AiAssistant, h as AiChangePreview, g as AiChat, y as AiChatComposer, p as AiChatContent, o as AiChatEmptyState, _ as AiMessage, b as AiMessageActions, c as AiMessageContent, f as AiPromptInput, m as AiReasoning, x as AiRequestTrail, d as AiResult, w as AiResultMetrics, r as AiResultTable, s as AiResultText, T as AiResultView, a as AiSuggestions, S as AiTask, l as AiTaskItem, C as AiTranslationProvider, t as formatAiResultValue, e as mountAiAssistant, n as translateAiText };

package/ai/mount.d.ts

@@ -1,33 +1,86 @@
+import { AiResultContent, AiTableRenderer } from './results';
+import { AiChatEmptyStateProps } from './chat';
 import { AiUiTranslations } from './translations';
-import { AiActionPhase, AiPromptInputProps } from './components';
+import { AiActionPhase, AiPromptInputProps, AiPreviewChange, AiSuggestionChoice } from './components';
 import { AiRequestTrailItem, AiRequestTrailProps } from './request-trail';
+import { AiPromptHistoryOptions } from './prompt-history';
 export interface AiAssistantMountState {
     phase: AiActionPhase;
+    /** Accepted public user request only; never an internal model prompt. */
+    request?: {
+        id: string;
+        prompt: string;
+    };
+    /** Increment to clear the local chat transcript and composer. */
+    chatKey?: number;
     message: string;
+    /** Plain text from a bounded host-owned action result. */
+    resultDetails?: string;
+    result?: AiResultContent;
+    pendingAction?: {
+        summary: string;
+        details?: string;
+        changes?: readonly AiPreviewChange[];
+        notice?: string;
+    };
+    canUndoData?: boolean;
+    canRedoData?: boolean;
     matchedRows?: number;
     canRestore?: boolean;
     suggestions?: readonly string[];
+    choices?: readonly AiSuggestionChoice[];
     steps?: readonly AiRequestTrailItem[];
     canEditSteps?: boolean;
+    /** Host-owned chart view can return to the record grid. */
+    canClearChart?: boolean;
+    viewSwitching?: boolean;
 }
 export interface AiAssistantMountOptions {
+    /** Trusted host renderer for tabular results; never supplied by model output. */
+    renderTable?: AiTableRenderer;
+    mode?: 'toolbar' | 'chat';
+    layout?: 'flow' | 'fill';
+    /** Optional host for reactive undo/redo and view controls. Cleaned up on destroy. */
+    controlsMountTo?: HTMLElement;
+    /** Show the separate New conversation icon. Defaults to true. */
+    showNewConversation?: boolean;
+    /** @deprecated Use showNewConversation. */
+    showClearChat?: boolean;
+    /** Request-history popup: hidden by default in chat, visible in toolbar mode. */
+    showRequestHistory?: boolean;
+    /** Hide native data Undo/Redo controls. Workspace reset belongs to the application. */
+    showHistoryControls?: boolean;
+    /** Optional welcome content shown only while the local chat transcript is empty. */
+    emptyState?: AiChatEmptyStateProps | false;
+    onClearChat?(): void;
+    /** Return to the grid while retaining the chart configuration. */
+    onClearChart?(): void;
+    /** Local input recall and optional host persistence; never sent to the model automatically. */
+    promptHistory?: AiPromptHistoryOptions;
+    /** Auto-dismiss settled activity messages; disabled unless configured. */
+    activityDurationMs?: number;
     translations?: AiUiTranslations;
+    onApplyAction?(): void;
+    onCancelAction?(): void;
+    onUndoData?(): void;
+    onRedoData?(): void;
     onSubmit(prompt: string): void;
     onStop(): void;
-    onRestore(): void;
-    onReset(): void;
     onRemoveStep?(id: string): void;
     suggestions?: readonly string[];
+    /** Inline choice count; additional choices remain under More. Default: 2. */
+    maxVisibleSuggestions?: number;
     label?: string;
     footer?: string;
-    restoreLabel?: string;
-    resetLabel?: string;
+    /** Format the matched-row count in command activity, independently of request history. */
     countLabel?: (count: number) => string;
-    trail?: Pick<AiRequestTrailProps, 'label' | 'triggerLabel' | 'clearLabel' | 'clearDescription' | 'removeLabel' | 'countLabel' | 'changedMessage'>;
+    trail?: Pick<AiRequestTrailProps, 'label' | 'triggerLabel' | 'removeLabel' | 'countLabel' | 'changedMessage'>;
     prompt?: Pick<AiPromptInputProps, 'label' | 'placeholder' | 'submitLabel' | 'stopLabel' | 'hint' | 'textareaProps'>;
 }
 /** Framework-independent mount of the same TSX used by the public components. */
 export declare function mountAiAssistant(host: HTMLElement, options: AiAssistantMountOptions): {
     update(state: AiAssistantMountState): void;
+    /** Update example choices without remounting the composer or losing its draft. */
+    setSuggestions(items: readonly string[]): void;
     destroy(): void;
 };

package/ai/prompt-history.d.ts

@@ -0,0 +1,13 @@
+/** Recall stays local to the UI; it never becomes model conversation automatically. */
+export interface AiPromptHistoryOptions {
+    /** Initial prompts loaded by the host from its preferred storage. Newest comes last. */
+    items?: readonly string[];
+    /** Optional host-owned persistence. No browser storage is read or written by the component. */
+    onChange?(items: readonly string[]): void;
+}
+export declare function boundAiPromptHistory(items: readonly string[]): string[];
+export declare class AiPromptRecall {
+    private state?;
+    reset(): void;
+    move(value: string, direction: 'up' | 'down', items: readonly string[]): string | undefined;
+}

package/ai/request-trail.d.ts

@@ -1,7 +1,9 @@
 import { AiUiTranslations } from './translations';
-import { h } from '../_vendor/preact/src/index';
+import { h, ComponentChildren } from '../_vendor/preact/src/index';
 export interface AiRequestTrailItem {
     id: string;
+    /** Hide removal when the host cannot safely undo this individual request. */
+    removable?: boolean;
     label: string;
     /** Number of earlier requests represented by a grouped step. */
     count?: number;
@@ -10,8 +12,12 @@ export interface AiRequestTrailProps {
     translations?: AiUiTranslations;
     items: readonly AiRequestTrailItem[];
     onRemove(id: string): void;
-    onClear(): void;
+    onClear?(): void;
     onEmpty?(): void;
+    /** Additional host-owned actions in the steps popup. */
+    footer?: ComponentChildren;
+    /** Optional application-owned clear action for standalone history presentation. */
+    showClear?: boolean;
     disabled?: boolean;
     removalsDisabled?: boolean;
     label?: string;
@@ -23,4 +29,4 @@ export interface AiRequestTrailProps {
     changedMessage?: string;
 }
 /** Applied context only. The host owns replay, persistence and view mutations. */
-export declare function AiRequestTrail({ translations, items, onRemove, onClear, onEmpty, disabled, removalsDisabled, label, triggerLabel, clearLabel, clearDescription, removeLabel, countLabel, changedMessage, }: AiRequestTrailProps): h.JSX.Element | null;
+export declare function AiRequestTrail({ translations, items, onRemove, onClear, onEmpty, footer, showClear, disabled, removalsDisabled, label, triggerLabel, clearLabel, clearDescription, removeLabel, countLabel, changedMessage, }: AiRequestTrailProps): h.JSX.Element | null;

package/ai/results/_style.scss

@@ -0,0 +1,83 @@
+.rv-ai-result-content {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  background: var(--rv-ui-surface);
+  overflow-wrap: anywhere;
+}
+.rv-ai-result-table-scroll {
+  max-width: 100%;
+  overflow: auto;
+}
+.rv-ai-result-content--grid {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+.rv-ai-result-table {
+  width: 100%;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  border-collapse: collapse;
+  font: inherit;
+  caption {
+    text-align: start;
+    padding-block-end: 0.75rem;
+  }
+  caption span {
+    display: block;
+    color: var(--rv-ui-text-muted);
+    font-size: 0.8125rem;
+    margin-block-start: 0.25rem;
+  }
+  th,
+  td {
+    min-width: 6rem;
+    padding: 0.625rem;
+    text-align: start;
+    border-block-end: 1px solid var(--rv-ui-border);
+  }
+  th {
+    color: var(--rv-ui-text-muted);
+    font-weight: 500;
+  }
+  tbody tr:last-child td {
+    border: 0;
+  }
+  .rv-ai-result-number {
+    min-width: 4rem;
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+.rv-ai-result-description,
+.rv-ai-result-empty {
+  color: var(--rv-ui-text-muted);
+  margin-block: 0.25rem 0;
+}
+.rv-ai-result-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
+  gap: 1rem;
+  margin-block: 1rem 0;
+  dt {
+    color: var(--rv-ui-text-muted);
+    font-size: 0.8125rem;
+  }
+  dd {
+    margin: 0.25rem 0 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+}
+.rv-ai-result-text {
+  margin-block-end: 0;
+  white-space: pre-wrap;
+}

package/ai/results/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentChildren } from '../../_vendor/preact/src/index';
+import { AiResultContent, AiTableResult } from './types';
+export type AiTableRenderer = (result: AiTableResult) => ComponentChildren;
+export * from './types';
+export * from './table';
+export * from './metrics';
+export * from './text';
+export declare function AiResultView({ result, renderTable, }: {
+    result: AiResultContent;
+    renderTable?: AiTableRenderer;
+}): ComponentChildren;

package/ai/results/metrics.d.ts

@@ -0,0 +1,5 @@
+import { h } from '../../_vendor/preact/src/index';
+import { AiMetricsResult } from './types';
+export declare function AiResultMetrics({ result }: {
+    result: AiMetricsResult;
+}): h.JSX.Element;

package/ai/results/table.d.ts

@@ -0,0 +1,5 @@
+import { h } from '../../_vendor/preact/src/index';
+import { AiTableResult } from './types';
+export declare function AiResultTable({ result }: {
+    result: AiTableResult;
+}): h.JSX.Element;

package/ai/results/text.d.ts

@@ -0,0 +1,5 @@
+import { h } from '../../_vendor/preact/src/index';
+import { AiTextResult } from './types';
+export declare function AiResultText({ result }: {
+    result: AiTextResult;
+}): h.JSX.Element;

package/ai/results/types.d.ts

@@ -0,0 +1,29 @@
+/** Presentation-only values. No HTML, grid records or executable render callbacks. */
+export type AiResultValue = string | number | boolean | null;
+interface ResultBase {
+    title: string;
+    description?: string;
+}
+export interface AiTableResult extends ResultBase {
+    kind: 'table';
+    columns: readonly {
+        label: string;
+        numeric?: boolean;
+    }[];
+    rows: readonly (readonly AiResultValue[])[];
+}
+export interface AiMetricsResult extends ResultBase {
+    kind: 'metrics';
+    items: readonly {
+        label: string;
+        value: AiResultValue;
+    }[];
+}
+export interface AiTextResult extends ResultBase {
+    kind: 'text';
+    text: string;
+}
+/** Add new result kinds here and their renderer in AiResultView. */
+export type AiResultContent = AiTableResult | AiMetricsResult | AiTextResult;
+export declare function formatAiResultValue(value: AiResultValue): string;
+export {};

package/ai/transcript.d.ts

@@ -0,0 +1,27 @@
+import { AiAssistantMountState } from './mount';
+import { AiResultContent } from './results';
+export interface AiTranscriptMessage {
+    id: string;
+    group: string;
+    from: 'user' | 'assistant' | 'system';
+    text: string;
+    phase?: AiAssistantMountState['phase'];
+    details?: string;
+    result?: AiResultContent;
+    pending?: boolean;
+}
+/** Local presentation state only. Never supplies model context or persists values. */
+export declare class AiTranscript {
+    messages: readonly AiTranscriptMessage[];
+    private epoch;
+    private initialized;
+    private requestId?;
+    private ignoredRequest?;
+    private currentId?;
+    private active;
+    private lastPhase?;
+    private key;
+    private sequence;
+    update(state: AiAssistantMountState): void;
+    clear(): void;
+}

package/ai/translations.d.ts

@@ -1,4 +1,4 @@
 /** English message IDs and fallbacks; hosts supply translated values. */
-export declare const AI_UI_MESSAGES: readonly ["Ask AI to change this view", "Filter or sort your data…", "Send", "Stop", "Enter to send · Shift+Enter for a new line", "Suggested requests", "AI view assistant", "View steps", "Clear all", "Restore the starting view", "Restore previous view", "Reset view", "The view changed manually. Start a new request to continue.", "Remove request: {label}", "{count} step", "{count} steps", "{count} applied request", "{count} applied requests", "{count} matching rows"];
+export declare const AI_UI_MESSAGES: readonly ["AI chat", "No results", "Clear chat", "Restart conversation", "New conversation", "Request history", "Clear chart", "Conversation messages", "Jump to latest", "You", "Assistant", "System", "Message actions", "Start a conversation", "Ask a question to get started.", "Message", "Type a message…", "Working…", "Reasoning summary", "Pending", "Running", "Completed", "Failed", "Cancelled", "{seconds}s", "Data history", "Review changes", "Proposed changes", "Change", "Current", "Proposed", "Apply changes", "Cancel changes", "Undo data change", "Redo data change", "Ask AI to change this view", "Filter or sort your data…", "Send", "Stop", "Enter to send · Shift+Enter for a new line", "Suggested requests", "More", "Search requests", "Activity", "Collapse activity", "Expand activity", "AI view assistant", "View steps", "Clear all", "Restore the starting view", "Restore previous view", "Reset view", "The view changed manually. Start a new request to continue.", "Remove request: {label}", "{count} step", "{count} steps", "{count} applied request", "{count} applied requests", "{count} matching rows"];
 export type AiUiTranslations = Partial<Record<(typeof AI_UI_MESSAGES)[number], string>>;
 export declare function translateAiText(text: string, translations?: Readonly<Record<string, string | undefined>>, values?: Readonly<Record<string, string | number>>): string;

package/angular/angular.d.ts

@@ -40,5 +40,5 @@ export declare class UiComponent implements AfterContentInit, AfterViewInit, OnC
 }
 export type { PdfViewerProps, PdfViewerText } from '../pdf-viewer/component.js';
 export type { PdfViewerToolbarProps } from '../pdf-viewer/toolbar.js';
-export type { PdfViewerButton, PdfViewerButtonOptions, PdfViewerToolbarOptions, PdfViewerToolbarConfig } from '../pdf-viewer/toolbar-options.js';
+export type { PdfViewerButton, PdfViewerButtonOptions, PdfViewerToolbarOptions, PdfViewerToolbarConfig, } from '../pdf-viewer/toolbar-options.js';
 export { defaultPdfViewerText } from '../pdf-viewer/index.js';

package/angular/angular.js

@@ -35,10 +35,12 @@ export class UiComponent {
     ngAfterViewInit() {
         if (!this.browser)
             return;
-        this.mount = createFrameworkMount(this.host.nativeElement, targets => this.renderTemplates(targets));
+        this.mount = createFrameworkMount(this.host.nativeElement, (targets) => this.renderTemplates(targets));
+        this.update();
+    }
+    ngOnChanges() {
         this.update();
     }
-    ngOnChanges() { this.update(); }
     update() {
         if (!this.mount || this.destroyed)
             return;
@@ -47,8 +49,11 @@ export class UiComponent {
             throw new Error(`Unknown UI component: ${this.component}`);
         const props = { ...this.props };
         const model = componentModels[this.component];
-        const callbacks = new Set([...Object.keys(props).filter(key => /^on[A-Z]/.test(key)),
-            'onClose', ...(model ? [model.callback] : [])]);
+        const callbacks = new Set([
+            ...Object.keys(props).filter((key) => /^on[A-Z]/.test(key)),
+            'onClose',
+            ...(model ? [model.callback] : []),
+        ]);
         for (const name of callbacks) {
             const original = props[name];
             props[name] = (...args) => {
@@ -60,16 +65,13 @@ export class UiComponent {
                 return result;
             };
         }
-        const slots = Object.fromEntries(this.slots?.map(slot => [slot.rvUiSlot, slot]) ?? []);
-        if (this.component === 'NativeSelect' && Object.keys(slots).length) {
-            throw new Error('Use <select rvControl> for native Angular option templates.');
-        }
+        const slots = Object.fromEntries(this.slots?.map((slot) => [slot.rvUiSlot, slot]) ?? []);
         this.mount.render(component, props, (props, content) => withFrameworkContent(this.component, props, slots, content));
     }
     renderTemplates(targets) {
         if (this.destroyed)
             return;
-        const live = new Set(targets.map(target => target.id));
+        const live = new Set(targets.map((target) => target.id));
         for (const [id, record] of this.views) {
             if (!live.has(id)) {
                 this.release(record);
@@ -126,7 +128,8 @@ export class UiComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'rv-ui', standalone: true,
+                    selector: 'rv-ui',
+                    standalone: true,
                     template: '<span #host style="display: contents"></span>',
                     host: { style: 'display: contents' },
                 }]

package/assignee/assignee.scss

@@ -45,7 +45,7 @@
   }
 }
 
-.rv-assignee-editor .selected-tag {
+.rv-assignee-editor.dropdown-container .selected-tag {
   display: inline-flex;
   align-items: center;
   border-radius: 16px;
@@ -53,6 +53,12 @@
   font-size: 14px;
   line-height: 18px;
   white-space: nowrap;
+  color: var(--rv-ui-text);
+
+  // Keep the full 24px remove target within the 24px value pill.
+  > button.rv-remove-button {
+    margin-block: -3px;
+  }
 }
 .rv-assignee-picker__allocations {
   display: grid;
@@ -90,15 +96,31 @@
 }
 .rv-assignee-picker__allocations {
   border-top: 1px solid var(--rv-ui-border);
-  &:empty { display: none; }
+  &:empty {
+    display: none;
+  }
   label {
     padding: 8px 10px;
     border-radius: 8px;
     background: var(--rv-ui-field-surface);
     font-size: 12px;
-    > span { min-width: 0; overflow-wrap: anywhere; }
+    > span {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+  }
+  input {
+    flex: 0 0 88px;
+    width: 88px;
+    min-height: 32px;
+    padding: 6px 8px;
+    font-size: 12px;
   }
-  input { flex: 0 0 88px; width: 88px; min-height: 32px; padding: 6px 8px; font-size: 12px; }
 }
-.rv-assignee-picker__footer { flex-wrap: wrap; font-size: 12px; }
-.rv-assignee-picker__footer .rv-editor-actions { margin-inline-start: auto; }
+.rv-assignee-picker__footer {
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+.rv-assignee-picker__footer .rv-editor-actions {
+  margin-inline-start: auto;
+}