@memberjunction/ng-entity-action-ux 0.0.1 → 5.43.0

package/README.md

@@ -1,45 +1,177 @@
 # @memberjunction/ng-entity-action-ux
 
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@memberjunction/ng-entity-action-ux`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+A **pluggable runtime-UX framework for entity actions**, plus the flagship driver: a safe, two-step
+**Record Process bulk-update runner** (dry-run → review the exact per-record diff → confirm → apply).
+
+Most entity actions "fire and forget." Some need a real interaction first — a preview, a confirmation, a
+small form. This package lets an entity action declare a **`RuntimeUXDriverClass`**; when present, the host
+mounts that interactive component instead of invoking the action blind. New drivers register via the MJ
+ClassFactory and need **zero host changes**.
+
+```
+┌─ entity grid / list / form ─────────────────────────────────────────────┐
+│  user clicks an entity action                                            │
+│        │ EntityActionRequested { action, selectedRecords, ... }          │
+│        ▼                                                                  │
+│  parent: does action.runtimeUXDriverClass exist?                         │
+│        ├─ no  → invoke the action normally (existing path)               │
+│        └─ yes → <mj-entity-action-ux-host [DriverClass] [Context]>        │
+│                      │ ClassFactory.GetRegistration(Base…, DriverClass)   │
+│                      ▼                                                     │
+│                 RecordProcessRunnerUX  (or any registered driver)         │
+│                   dry-run → diff → confirm → apply → Completed            │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+## What's in the box
+
+| Export | Kind | Purpose |
+|---|---|---|
+| `BaseEntityActionRuntimeUX` | `@Directive()` base | The driver contract: `@Input() Context`, `@Output() Completed/Cancelled`, `abstract Start()`. |
+| `EntityActionUXHostComponent` | `<mj-entity-action-ux-host>` | Resolves a driver key via ClassFactory and mounts it with a context. |
+| `EntityActionUXContext` / `EntityActionUXResult` | types | The data the host hands a driver / the outcome it returns. |
+| `RecordProcessRunnerUXComponent` | driver (`RecordProcessRunnerUX`) | The flagship: runs a `MJ: Record Processes` as a dry-run, shows the diff, applies on confirm. |
+| `AIPromptSelectorComponent` | `<mj-ai-prompt-selector>` | Category-grouped, searchable AI-prompt picker. |
+| `FieldRulesBuilderComponent` | `<mj-field-rules-builder>` | Visual authoring for a `FieldRuleSet` (static / field / formula / lookup / prompt + condition), with live metadata validation. |
+| `field-rules-model` / `scope` / `prompt-grouping` | pure fns | Angular-free, unit-tested logic the components delegate to. |
+
+## The Record Process Runner (flagship driver)
+
+The runner turns a **FieldRules Record Process** into a safe bulk update:
+
+1. **Dry-run** — calls the server (`RunRecordProcess`, `DryRun: true`), which computes the exact per-record
+   field changes **without writing**, and persists them to `MJ: Process Run Details`.
+2. **Review** — reads those details (`RunView`) and renders a per-record `old → new` diff, with a summary
+   ("42 of 120 records will change · 67 field updates").
+3. **Confirm** — only on the user's click does it call `RunRecordProcess` again with `DryRun: false`. MJ's
+   built-in Record Changes versioning captures every before/after automatically.
+
+Nothing is ever written until the user has seen precisely what will change.
+
+## Wiring it into a grid (the full integration)
+
+The MJ `entity-data-grid` already emits everything you need (`LoadEntityActionsRequested`,
+`EntityActionRequested`) and exposes `ShowEntityActionButtons` to toggle visibility. The parent (an Explorer
+view component) owns action resolution + mounting:
+
+```typescript
+import { EntityActionEngine } from '@memberjunction/actions';
+import { EntityActionUXHostComponent, type EntityActionUXContext } from '@memberjunction/ng-entity-action-ux';
+import type { EntityActionConfig } from '@memberjunction/ng-entity-viewer';
+
+// 1) Resolve the entity's actions → grid configs (carry the driver key + its RecordProcessID param)
+onLoadEntityActionsRequested(e: { entityInfo: EntityInfo }) {
+    const actions = EntityActionEngine.Instance.GetActionsByEntityName(e.entityInfo.Name, 'Active');
+    this.dataGrid.EntityActions = actions.map(a => ({
+        id: a.ID, name: a.Action, icon: 'fa-solid fa-list-check',
+        // the invocation's RuntimeUXDriverClass + the action's RecordProcessID param:
+        runtimeUXDriverClass: a.invocations.find(i => i.RuntimeUXDriverClass)?.RuntimeUXDriverClass,
+        metadata: { RecordProcessID: a.params.find(p => p.Name === 'RecordProcessID')?.Value },
+    }));
+}
+
+// 2) On request — mount the driver if one is named, else invoke normally
+onEntityActionRequested(e: { entityInfo: EntityInfo; action: EntityActionConfig; selectedRecords: Record<string, unknown>[] }) {
+    if (e.action.runtimeUXDriverClass) {
+        this.activeDriver = {
+            DriverClass: e.action.runtimeUXDriverClass,
+            Context: <EntityActionUXContext>{
+                EntityInfo: e.entityInfo,
+                ScopeKind: 'records',
+                SelectedRecordIDs: e.selectedRecords.map(r => r[e.entityInfo.FirstPrimaryKey.Name] as string),
+                Config: { RecordProcessID: e.action.metadata?.['RecordProcessID'] },
+                Provider: this.Provider,           // multi-provider: thread your provider through
+            },
+        };
+    } else {
+        /* existing: invoke the action directly */
+    }
+}
+```
+
+```html
+<mj-entity-data-grid #dataGrid [Entity]="entityName" [ShowEntityActionButtons]="true"
+    (LoadEntityActionsRequested)="onLoadEntityActionsRequested($event)"
+    (EntityActionRequested)="onEntityActionRequested($event)">
+</mj-entity-data-grid>
+
+@if (activeDriver) {
+    <mj-entity-action-ux-host
+        [DriverClass]="activeDriver.DriverClass" [Context]="activeDriver.Context"
+        (Completed)="activeDriver = null; dataGrid.RefreshData()"
+        (Cancelled)="activeDriver = null">
+    </mj-entity-action-ux-host>
+}
+```
+
+> **Tree-shaking:** call `LoadEntityActionUX()` once from your app bootstrap so the driver's `@RegisterClass`
+> side effect survives bundling (same pattern as other MJ dynamically-resolved classes).
+
+## Server pieces (this feature ships them)
+
+- **`RunRecordProcess` GraphQL mutation** (`@memberjunction/server`) → typed
+  **`GraphQLRecordProcessClient`** (`@memberjunction/graphql-dataprovider`). The runner uses the client; you
+  never inline `gql`.
+- **`Run Record Process` Action** (`@memberjunction/core-actions`) — the agent / workflow / low-code surface
+  for the same engine. Seeded by [`metadata/actions/.record-processing.json`](../../../../metadata/actions/.record-processing.json).
+- The engine is **`RecordProcessExecutor`** (`@memberjunction/record-set-processor`); FieldRules sit on the
+  pure rules engine in `@memberjunction/global`.
+
+## Authoring rules (the builder)
+
+```html
+<mj-field-rules-builder [EntityName]="'Accounts'" [Provider]="Provider"
+    (ValueChange)="ruleSet = $event" (ValidChange)="canSave = $event">
+</mj-field-rules-builder>
+```
+
+Serialize `ruleSet` into the Record Process's `Configuration` column (`JSON.stringify(ruleSet)`). The builder
+validates live against the entity's metadata (`EntityFieldRules.Validate`) and shows per-rule errors.
+
+## Demo metadata (copy-paste, adapt to your entity)
+
+Wire the runner to an entity in three records. Seed a `MJ: Record Processes` (FieldRules), then an
+`EntityAction` for the same entity whose invocation names the driver and whose param supplies the process ID:
+
+```jsonc
+// 1) the process — metadata/record-processes/.demo.json  (entity: "MJ: Record Processes")
+{ "fields": {
+    "Name": "Deactivate selected Accounts",
+    "EntityID": "@lookup:MJ: Entities.Name=Accounts",
+    "WorkType": "FieldRules",
+    "ScopeType": "Filter",
+    "Status": "Active",
+    "Configuration": "{\"Rules\":[{\"TargetField\":\"Status\",\"Source\":{\"Kind\":\"static\",\"Value\":\"Inactive\"}}]}"
+} }
+
+// 2) the entity action — links the generic "Run Record Process" action to the Accounts entity,
+//    names the driver on the invocation, and pins the RecordProcessID param.
+{ "fields": {
+    "EntityID": "@lookup:MJ: Entities.Name=Accounts",
+    "ActionID": "@lookup:MJ: Actions.Name=Run Record Process",
+    "Status": "Active"
+  },
+  "relatedEntities": {
+    "MJ: Entity Action Invocations": [ { "fields": {
+        "InvocationTypeID": "@lookup:MJ: Entity Action Invocation Types.Name=Multi-Record",
+        "RuntimeUXDriverClass": "RecordProcessRunnerUX", "Status": "Active" } } ],
+    "MJ: Entity Action Params": [ { "fields": {
+        "Name": "RecordProcessID", "ValueType": "Static",
+        "Value": "@lookup:MJ: Record Processes.Name=Deactivate selected Accounts" } } ]
+  } }
+```
+
+## Roadmap / proposed next work
+
+- **Field-Rules authoring agent** — an AI agent that turns a natural-language instruction ("set Status to
+  Inactive for accounts with no activity in 12 months") into a validated `FieldRuleSet`, creates the Record
+  Process, and offers to run it via the `Run Record Process` action. Designed; intentionally not seeded here
+  because it needs a live system + prompt-tuning to validate.
+- **`entityDocument` source** in the visual builder (engine already supports it; today it round-trips as a
+  static slot).
+- **Saved-rule templates** and a side-by-side "before/after" record preview in the runner.
+
+## Conventions
+
+Standalone components · `inject()` DI · `@if`/`@for`/`@switch` · PascalCase public members · `--mj-*` design
+tokens · confirm-left/cancel-right buttons · multi-provider via `Context.Provider` / `[Provider]`.

package/dist/lib/ai-prompt-selector/ai-prompt-selector.component.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @fileoverview A category-grouped, searchable AI-Prompt picker — the "slick selector" for choosing the
+ * prompt that powers a `prompt` field-rule source. Loads `MJ: AI Prompts`, groups them by category, and
+ * exposes the chosen prompt's ID via a two-way `Value`. Self-contained (no CDK overlay) so it drops into
+ * any form.
+ * @module @memberjunction/ng-entity-action-ux
+ */
+import { EventEmitter, OnInit } from '@angular/core';
+import { type IMetadataProvider } from '@memberjunction/core';
+import { type PromptGroup, type PromptOption } from '../prompt-grouping';
+import * as i0 from "@angular/core";
+export declare class AIPromptSelectorComponent implements OnInit {
+    private cdr;
+    private host;
+    /** The selected prompt's ID (two-way bindable). */
+    Value: string | null;
+    ValueChange: EventEmitter<string | null>;
+    /** Placeholder shown when nothing is selected. */
+    Placeholder: string;
+    /** Metadata provider (multi-provider). Falls back to the global default when null. */
+    Provider: IMetadataProvider | null;
+    IsOpen: boolean;
+    Loading: boolean;
+    Filter: string;
+    Groups: PromptGroup[];
+    private allPrompts;
+    ngOnInit(): Promise<void>;
+    get SelectedLabel(): string;
+    /** True when the given prompt is the selected one (UUID-safe across SQL Server / PostgreSQL). */
+    IsSelected(prompt: PromptOption): boolean;
+    get FilteredGroups(): PromptGroup[];
+    Toggle(): void;
+    Select(p: PromptOption): void;
+    OnFilter(event: Event): void;
+    /** Close when clicking outside the component. */
+    onDocumentClick(event: MouseEvent): void;
+    private loadPrompts;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AIPromptSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AIPromptSelectorComponent, "mj-ai-prompt-selector", never, { "Value": { "alias": "Value"; "required": false; }; "Placeholder": { "alias": "Placeholder"; "required": false; }; "Provider": { "alias": "Provider"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=ai-prompt-selector.component.d.ts.map

package/dist/lib/ai-prompt-selector/ai-prompt-selector.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-selector.component.d.ts","sourceRoot":"","sources":["../../../src/lib/ai-prompt-selector/ai-prompt-selector.component.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAKH,YAAY,EAGZ,MAAM,EAGT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAW,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEvE,OAAO,EAA8C,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;;AAErH,qBAyEa,yBAA0B,YAAW,MAAM;IACpD,OAAO,CAAC,GAAG,CAA6B;IACxC,OAAO,CAAC,IAAI,CAAsB;IAElC,mDAAmD;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3B,WAAW,8BAAqC;IAE1D,kDAAkD;IACzC,WAAW,SAA0B;IAE9C,sFAAsF;IAC7E,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE5C,MAAM,UAAS;IACf,OAAO,UAAQ;IACf,MAAM,SAAM;IACZ,MAAM,EAAE,WAAW,EAAE,CAAM;IAElC,OAAO,CAAC,UAAU,CAAsB;IAElC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAI/B,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,iGAAiG;IACjG,UAAU,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO;IAIzC,IAAI,cAAc,IAAI,WAAW,EAAE,CAElC;IAED,MAAM,IAAI,IAAI;IAMd,MAAM,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAO7B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK5B,iDAAiD;IAEjD,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;YAO1B,WAAW;yCAjEhB,yBAAyB;2CAAzB,yBAAyB;CA+ErC"}

package/dist/lib/ai-prompt-selector/ai-prompt-selector.component.js

@@ -0,0 +1,231 @@
+/**
+ * @fileoverview A category-grouped, searchable AI-Prompt picker — the "slick selector" for choosing the
+ * prompt that powers a `prompt` field-rule source. Loads `MJ: AI Prompts`, groups them by category, and
+ * exposes the chosen prompt's ID via a two-way `Value`. Self-contained (no CDK overlay) so it drops into
+ * any form.
+ * @module @memberjunction/ng-entity-action-ux
+ */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, inject, } from '@angular/core';
+import { RunView } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
+import { filterPromptGroups, groupPromptsByCategory } from '../prompt-grouping';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.Category;
+const _forTrack1 = ($index, $item) => $item.ID;
+function AIPromptSelectorComponent_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 11);
+    i0.ɵɵtext(1, "Loading prompts\u2026");
+    i0.ɵɵdomElementEnd();
+} }
+function AIPromptSelectorComponent_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("No prompts match \u201C", ctx_r1.Filter, "\u201D.");
+} }
+function AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "i", 15);
+} }
+function AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 14);
+    i0.ɵɵdomListener("click", function AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_For_3_Template_div_click_0_listener() { const p_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.Select(p_r4)); });
+    i0.ɵɵdomElementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_For_3_Conditional_3_Template, 1, 0, "i", 15);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const p_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("ps-option--selected", ctx_r1.IsSelected(p_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(p_r4.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsSelected(p_r4) ? 3 : -1);
+} }
+function AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵrepeaterCreate(2, AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_For_3_Template, 4, 4, "div", 13, _forTrack1);
+} if (rf & 2) {
+    const group_r5 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(group_r5.Category);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r5.Prompts);
+} }
+function AIPromptSelectorComponent_Conditional_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, AIPromptSelectorComponent_Conditional_6_Conditional_8_For_1_Template, 4, 1, null, null, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.FilteredGroups);
+} }
+function AIPromptSelectorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 6)(1, "div", 7);
+    i0.ɵɵdomElement(2, "i", 8);
+    i0.ɵɵdomElementStart(3, "input", 9, 0);
+    i0.ɵɵdomListener("input", function AIPromptSelectorComponent_Conditional_6_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFilter($event)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 10);
+    i0.ɵɵconditionalCreate(6, AIPromptSelectorComponent_Conditional_6_Conditional_6_Template, 2, 0, "div", 11)(7, AIPromptSelectorComponent_Conditional_6_Conditional_7_Template, 2, 1, "div", 11)(8, AIPromptSelectorComponent_Conditional_6_Conditional_8_Template, 2, 0);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r1.Filter);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.Loading ? 6 : ctx_r1.FilteredGroups.length === 0 ? 7 : 8);
+} }
+export class AIPromptSelectorComponent {
+    cdr = inject(ChangeDetectorRef);
+    host = inject(ElementRef);
+    /** The selected prompt's ID (two-way bindable). */
+    Value = null;
+    ValueChange = new EventEmitter();
+    /** Placeholder shown when nothing is selected. */
+    Placeholder = 'Select an AI prompt…';
+    /** Metadata provider (multi-provider). Falls back to the global default when null. */
+    Provider = null;
+    IsOpen = false;
+    Loading = true;
+    Filter = '';
+    Groups = [];
+    allPrompts = [];
+    async ngOnInit() {
+        await this.loadPrompts();
+    }
+    get SelectedLabel() {
+        return this.allPrompts.find((p) => UUIDsEqual(p.ID, this.Value ?? ''))?.Name ?? '';
+    }
+    /** True when the given prompt is the selected one (UUID-safe across SQL Server / PostgreSQL). */
+    IsSelected(prompt) {
+        return UUIDsEqual(prompt.ID, this.Value ?? '');
+    }
+    get FilteredGroups() {
+        return filterPromptGroups(this.Groups, this.Filter);
+    }
+    Toggle() {
+        this.IsOpen = !this.IsOpen;
+        if (this.IsOpen)
+            this.Filter = '';
+        this.cdr.detectChanges();
+    }
+    Select(p) {
+        this.Value = p.ID;
+        this.ValueChange.emit(p.ID);
+        this.IsOpen = false;
+        this.cdr.detectChanges();
+    }
+    OnFilter(event) {
+        this.Filter = event.target.value;
+        this.cdr.detectChanges();
+    }
+    /** Close when clicking outside the component. */
+    onDocumentClick(event) {
+        if (this.IsOpen && !this.host.nativeElement.contains(event.target)) {
+            this.IsOpen = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async loadPrompts() {
+        const runView = this.Provider ? RunView.FromMetadataProvider(this.Provider) : new RunView();
+        const rv = await runView.RunView({
+            EntityName: 'MJ: AI Prompts',
+            Fields: ['ID', 'Name', 'Category'],
+            ExtraFilter: `Status='Active'`,
+            OrderBy: 'Category, Name',
+            ResultType: 'simple',
+        });
+        this.allPrompts = rv.Success ? (rv.Results ?? []) : [];
+        this.Groups = groupPromptsByCategory(this.allPrompts);
+        this.Loading = false;
+        this.cdr.detectChanges();
+    }
+    static ɵfac = function AIPromptSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AIPromptSelectorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIPromptSelectorComponent, selectors: [["mj-ai-prompt-selector"]], hostBindings: function AIPromptSelectorComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function AIPromptSelectorComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Value: "Value", Placeholder: "Placeholder", Provider: "Provider" }, outputs: { ValueChange: "ValueChange" }, decls: 7, vars: 7, consts: [["search", ""], [1, "ps"], ["type", "button", 1, "ps-trigger", 3, "click"], [1, "ps-trigger-text"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "fa-solid", "fa-chevron-down", "ps-caret"], ["role", "listbox", 1, "ps-panel"], [1, "ps-search"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search prompts\u2026", 1, "mj-input", 3, "input", "value"], [1, "ps-list"], [1, "ps-empty"], [1, "ps-group-label"], ["role", "option", 1, "ps-option", 3, "ps-option--selected"], ["role", "option", 1, "ps-option", 3, "click"], [1, "fa-solid", "fa-check"]], template: function AIPromptSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1)(1, "button", 2);
+            i0.ɵɵdomListener("click", function AIPromptSelectorComponent_Template_button_click_1_listener() { return ctx.Toggle(); });
+            i0.ɵɵdomElementStart(2, "span", 3);
+            i0.ɵɵdomElement(3, "i", 4);
+            i0.ɵɵtext(4);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElement(5, "i", 5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(6, AIPromptSelectorComponent_Conditional_6_Template, 9, 2, "div", 6);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("ps--open", ctx.IsOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-expanded", ctx.IsOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("ps-placeholder", !ctx.SelectedLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.SelectedLabel || ctx.Placeholder, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsOpen ? 6 : -1);
+        } }, styles: [".ps[_ngcontent-%COMP%] { position: relative; width: 100%; }\n        .ps-trigger[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;\n            padding: 8px 12px; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-sm, 6px); color: var(--mj-text-primary); cursor: pointer; font-size: 14px; }\n        .ps--open[_ngcontent-%COMP%]   .ps-trigger[_ngcontent-%COMP%] { border-color: var(--mj-border-focus); }\n        .ps-trigger-text[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n        .ps-trigger-text[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n        .ps-placeholder[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n        .ps-caret[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 12px; transition: transform .15s ease; }\n        .ps--open[_ngcontent-%COMP%]   .ps-caret[_ngcontent-%COMP%] { transform: rotate(180deg); }\n        .ps-panel[_ngcontent-%COMP%] { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px;\n            display: flex; flex-direction: column; background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n            border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px);\n            box-shadow: var(--mj-shadow-md, 0 6px 20px rgba(0,0,0,.12)); overflow: hidden; }\n        .ps-search[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--mj-border-subtle); }\n        .ps-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n        .ps-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] { flex: 1; border: none; outline: none; background: transparent; color: var(--mj-text-primary); }\n        .ps-list[_ngcontent-%COMP%] { overflow-y: auto; padding: 4px 0; }\n        .ps-group-label[_ngcontent-%COMP%] { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;\n            letter-spacing: .04em; color: var(--mj-text-muted); }\n        .ps-option[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px 7px 22px;\n            cursor: pointer; font-size: 14px; color: var(--mj-text-primary); }\n        .ps-option[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n        .ps-option--selected[_ngcontent-%COMP%] { color: var(--mj-brand-primary); font-weight: 600; }\n        .ps-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n        .ps-empty[_ngcontent-%COMP%] { padding: 16px; text-align: center; color: var(--mj-text-muted); font-size: 13px; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIPromptSelectorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-ai-prompt-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="ps" [class.ps--open]="IsOpen">
+            <button type="button" class="ps-trigger" (click)="Toggle()" [attr.aria-expanded]="IsOpen">
+                <span class="ps-trigger-text" [class.ps-placeholder]="!SelectedLabel">
+                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                    {{ SelectedLabel || Placeholder }}
+                </span>
+                <i class="fa-solid fa-chevron-down ps-caret"></i>
+            </button>
+
+            @if (IsOpen) {
+                <div class="ps-panel" role="listbox">
+                    <div class="ps-search">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                        <input #search type="text" class="mj-input" placeholder="Search prompts…"
+                            [value]="Filter" (input)="OnFilter($event)" />
+                    </div>
+                    <div class="ps-list">
+                        @if (Loading) {
+                            <div class="ps-empty">Loading prompts…</div>
+                        } @else if (FilteredGroups.length === 0) {
+                            <div class="ps-empty">No prompts match “{{ Filter }}”.</div>
+                        } @else {
+                            @for (group of FilteredGroups; track group.Category) {
+                                <div class="ps-group-label">{{ group.Category }}</div>
+                                @for (p of group.Prompts; track p.ID) {
+                                    <div class="ps-option" role="option"
+                                        [class.ps-option--selected]="IsSelected(p)"
+                                        (click)="Select(p)">
+                                        <span>{{ p.Name }}</span>
+                                        @if (IsSelected(p)) { <i class="fa-solid fa-check"></i> }
+                                    </div>
+                                }
+                            }
+                        }
+                    </div>
+                </div>
+            }
+        </div>
+    `, styles: ["\n        .ps { position: relative; width: 100%; }\n        .ps-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;\n            padding: 8px 12px; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-sm, 6px); color: var(--mj-text-primary); cursor: pointer; font-size: 14px; }\n        .ps--open .ps-trigger { border-color: var(--mj-border-focus); }\n        .ps-trigger-text { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n        .ps-trigger-text i { color: var(--mj-brand-primary); }\n        .ps-placeholder { color: var(--mj-text-muted); }\n        .ps-caret { color: var(--mj-text-muted); font-size: 12px; transition: transform .15s ease; }\n        .ps--open .ps-caret { transform: rotate(180deg); }\n        .ps-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px;\n            display: flex; flex-direction: column; background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n            border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px);\n            box-shadow: var(--mj-shadow-md, 0 6px 20px rgba(0,0,0,.12)); overflow: hidden; }\n        .ps-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--mj-border-subtle); }\n        .ps-search i { color: var(--mj-text-muted); }\n        .ps-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--mj-text-primary); }\n        .ps-list { overflow-y: auto; padding: 4px 0; }\n        .ps-group-label { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;\n            letter-spacing: .04em; color: var(--mj-text-muted); }\n        .ps-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px 7px 22px;\n            cursor: pointer; font-size: 14px; color: var(--mj-text-primary); }\n        .ps-option:hover { background: var(--mj-bg-surface-hover); }\n        .ps-option--selected { color: var(--mj-brand-primary); font-weight: 600; }\n        .ps-option i { color: var(--mj-brand-primary); }\n        .ps-empty { padding: 16px; text-align: center; color: var(--mj-text-muted); font-size: 13px; }\n    "] }]
+    }], null, { Value: [{
+            type: Input
+        }], ValueChange: [{
+            type: Output
+        }], Placeholder: [{
+            type: Input
+        }], Provider: [{
+            type: Input
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIPromptSelectorComponent, { className: "AIPromptSelectorComponent", filePath: "lib/ai-prompt-selector/ai-prompt-selector.component.ts", lineNumber: 97 }); })();
+//# sourceMappingURL=ai-prompt-selector.component.js.map

package/dist/lib/ai-prompt-selector/ai-prompt-selector.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-selector.component.js","sourceRoot":"","sources":["../../../src/lib/ai-prompt-selector/ai-prompt-selector.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview A category-grouped, searchable AI-Prompt picker — the \"slick selector\" for choosing the\n * prompt that powers a `prompt` field-rule source. Loads `MJ: AI Prompts`, groups them by category, and\n * exposes the chosen prompt's ID via a two-way `Value`. Self-contained (no CDK overlay) so it drops into\n * any form.\n * @module @memberjunction/ng-entity-action-ux\n */\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnInit,\n    Output,\n    inject,\n} from '@angular/core';\nimport { RunView, type IMetadataProvider } from '@memberjunction/core';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport { filterPromptGroups, groupPromptsByCategory, type PromptGroup, type PromptOption } from '../prompt-grouping';\n\n@Component({\n    selector: 'mj-ai-prompt-selector',\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <div class=\"ps\" [class.ps--open]=\"IsOpen\">\n            <button type=\"button\" class=\"ps-trigger\" (click)=\"Toggle()\" [attr.aria-expanded]=\"IsOpen\">\n                <span class=\"ps-trigger-text\" [class.ps-placeholder]=\"!SelectedLabel\">\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                    {{ SelectedLabel || Placeholder }}\n                </span>\n                <i class=\"fa-solid fa-chevron-down ps-caret\"></i>\n            </button>\n\n            @if (IsOpen) {\n                <div class=\"ps-panel\" role=\"listbox\">\n                    <div class=\"ps-search\">\n                        <i class=\"fa-solid fa-magnifying-glass\"></i>\n                        <input #search type=\"text\" class=\"mj-input\" placeholder=\"Search prompts…\"\n                            [value]=\"Filter\" (input)=\"OnFilter($event)\" />\n                    </div>\n                    <div class=\"ps-list\">\n                        @if (Loading) {\n                            <div class=\"ps-empty\">Loading prompts…</div>\n                        } @else if (FilteredGroups.length === 0) {\n                            <div class=\"ps-empty\">No prompts match “{{ Filter }}”.</div>\n                        } @else {\n                            @for (group of FilteredGroups; track group.Category) {\n                                <div class=\"ps-group-label\">{{ group.Category }}</div>\n                                @for (p of group.Prompts; track p.ID) {\n                                    <div class=\"ps-option\" role=\"option\"\n                                        [class.ps-option--selected]=\"IsSelected(p)\"\n                                        (click)=\"Select(p)\">\n                                        <span>{{ p.Name }}</span>\n                                        @if (IsSelected(p)) { <i class=\"fa-solid fa-check\"></i> }\n                                    </div>\n                                }\n                            }\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    `,\n    styles: [`\n        .ps { position: relative; width: 100%; }\n        .ps-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;\n            padding: 8px 12px; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n            border-radius: var(--mj-radius-sm, 6px); color: var(--mj-text-primary); cursor: pointer; font-size: 14px; }\n        .ps--open .ps-trigger { border-color: var(--mj-border-focus); }\n        .ps-trigger-text { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n        .ps-trigger-text i { color: var(--mj-brand-primary); }\n        .ps-placeholder { color: var(--mj-text-muted); }\n        .ps-caret { color: var(--mj-text-muted); font-size: 12px; transition: transform .15s ease; }\n        .ps--open .ps-caret { transform: rotate(180deg); }\n        .ps-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px;\n            display: flex; flex-direction: column; background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n            border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px);\n            box-shadow: var(--mj-shadow-md, 0 6px 20px rgba(0,0,0,.12)); overflow: hidden; }\n        .ps-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--mj-border-subtle); }\n        .ps-search i { color: var(--mj-text-muted); }\n        .ps-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--mj-text-primary); }\n        .ps-list { overflow-y: auto; padding: 4px 0; }\n        .ps-group-label { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;\n            letter-spacing: .04em; color: var(--mj-text-muted); }\n        .ps-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px 7px 22px;\n            cursor: pointer; font-size: 14px; color: var(--mj-text-primary); }\n        .ps-option:hover { background: var(--mj-bg-surface-hover); }\n        .ps-option--selected { color: var(--mj-brand-primary); font-weight: 600; }\n        .ps-option i { color: var(--mj-brand-primary); }\n        .ps-empty { padding: 16px; text-align: center; color: var(--mj-text-muted); font-size: 13px; }\n    `],\n})\nexport class AIPromptSelectorComponent implements OnInit {\n    private cdr = inject(ChangeDetectorRef);\n    private host = inject(ElementRef);\n\n    /** The selected prompt's ID (two-way bindable). */\n    @Input() Value: string | null = null;\n    @Output() ValueChange = new EventEmitter<string | null>();\n\n    /** Placeholder shown when nothing is selected. */\n    @Input() Placeholder = 'Select an AI prompt…';\n\n    /** Metadata provider (multi-provider). Falls back to the global default when null. */\n    @Input() Provider: IMetadataProvider | null = null;\n\n    public IsOpen = false;\n    public Loading = true;\n    public Filter = '';\n    public Groups: PromptGroup[] = [];\n\n    private allPrompts: PromptOption[] = [];\n\n    async ngOnInit(): Promise<void> {\n        await this.loadPrompts();\n    }\n\n    get SelectedLabel(): string {\n        return this.allPrompts.find((p) => UUIDsEqual(p.ID, this.Value ?? ''))?.Name ?? '';\n    }\n\n    /** True when the given prompt is the selected one (UUID-safe across SQL Server / PostgreSQL). */\n    IsSelected(prompt: PromptOption): boolean {\n        return UUIDsEqual(prompt.ID, this.Value ?? '');\n    }\n\n    get FilteredGroups(): PromptGroup[] {\n        return filterPromptGroups(this.Groups, this.Filter);\n    }\n\n    Toggle(): void {\n        this.IsOpen = !this.IsOpen;\n        if (this.IsOpen) this.Filter = '';\n        this.cdr.detectChanges();\n    }\n\n    Select(p: PromptOption): void {\n        this.Value = p.ID;\n        this.ValueChange.emit(p.ID);\n        this.IsOpen = false;\n        this.cdr.detectChanges();\n    }\n\n    OnFilter(event: Event): void {\n        this.Filter = (event.target as HTMLInputElement).value;\n        this.cdr.detectChanges();\n    }\n\n    /** Close when clicking outside the component. */\n    @HostListener('document:click', ['$event'])\n    onDocumentClick(event: MouseEvent): void {\n        if (this.IsOpen && !this.host.nativeElement.contains(event.target)) {\n            this.IsOpen = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    private async loadPrompts(): Promise<void> {\n        const runView = this.Provider ? RunView.FromMetadataProvider(this.Provider) : new RunView();\n        const rv = await runView.RunView<PromptOption>({\n            EntityName: 'MJ: AI Prompts',\n            Fields: ['ID', 'Name', 'Category'],\n            ExtraFilter: `Status='Active'`,\n            OrderBy: 'Category, Name',\n            ResultType: 'simple',\n        });\n        this.allPrompts = rv.Success ? (rv.Results ?? []) : [];\n        this.Groups = groupPromptsByCategory(this.allPrompts);\n        this.Loading = false;\n        this.cdr.detectChanges();\n    }\n}\n"]}

package/dist/lib/base-entity-action-runtime-ux.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @fileoverview The plugin contract for an entity-action runtime UX. A concrete driver is a standalone
+ * Angular component that extends this base and registers itself with `@RegisterClass(BaseEntityActionRuntimeUX,
+ * '<DriverKey>')`. The host ({@link EntityActionUXHostComponent}) resolves the key via the MJ ClassFactory,
+ * mounts the component, hands it a {@link EntityActionUXContext}, calls {@link Start}, and listens for the
+ * `Completed` / `Cancelled` outputs. New drivers ship in this package or any consumer — no host changes.
+ * @module @memberjunction/ng-entity-action-ux
+ */
+import { EventEmitter } from '@angular/core';
+import type { EntityActionUXContext, EntityActionUXResult } from './runtime-ux-context';
+import * as i0 from "@angular/core";
+/**
+ * Abstract base for a runtime-UX driver. `@Directive()` (not `@Component`) so it can be a decorated,
+ * DI-capable base class without its own template; concrete drivers supply the `@Component`.
+ */
+export declare abstract class BaseEntityActionRuntimeUX {
+    /** The work context, set by the host immediately after construction (before {@link Start}). */
+    Context: EntityActionUXContext;
+    /** Emit when the driver has finished its work (applied or not — see {@link EntityActionUXResult}). */
+    Completed: EventEmitter<EntityActionUXResult>;
+    /** Emit when the user dismisses the driver without completing. */
+    Cancelled: EventEmitter<void>;
+    /**
+     * Begin the driver's flow. Called once by the host after `Context` is set. Implementations typically
+     * kick off an async preview/load here and drive their own template state from it.
+     */
+    abstract Start(): void | Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseEntityActionRuntimeUX, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseEntityActionRuntimeUX, never, never, { "Context": { "alias": "Context"; "required": false; }; }, { "Completed": "Completed"; "Cancelled": "Cancelled"; }, never, never, true, never>;
+}
+//# sourceMappingURL=base-entity-action-runtime-ux.d.ts.map

package/dist/lib/base-entity-action-runtime-ux.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-entity-action-runtime-ux.d.ts","sourceRoot":"","sources":["../../src/lib/base-entity-action-runtime-ux.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;;AAExF;;;GAGG;AACH,8BACsB,yBAAyB;IAC3C,+FAA+F;IACtF,OAAO,EAAG,qBAAqB,CAAC;IAEzC,sGAAsG;IAC5F,SAAS,qCAA4C;IAE/D,kEAAkE;IACxD,SAAS,qBAA4B;IAE/C;;;OAGG;IACH,QAAQ,CAAC,KAAK,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;yCAdpB,yBAAyB;2CAAzB,yBAAyB;CAe9C"}

package/dist/lib/base-entity-action-runtime-ux.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview The plugin contract for an entity-action runtime UX. A concrete driver is a standalone
+ * Angular component that extends this base and registers itself with `@RegisterClass(BaseEntityActionRuntimeUX,
+ * '<DriverKey>')`. The host ({@link EntityActionUXHostComponent}) resolves the key via the MJ ClassFactory,
+ * mounts the component, hands it a {@link EntityActionUXContext}, calls {@link Start}, and listens for the
+ * `Completed` / `Cancelled` outputs. New drivers ship in this package or any consumer — no host changes.
+ * @module @memberjunction/ng-entity-action-ux
+ */
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Abstract base for a runtime-UX driver. `@Directive()` (not `@Component`) so it can be a decorated,
+ * DI-capable base class without its own template; concrete drivers supply the `@Component`.
+ */
+export class BaseEntityActionRuntimeUX {
+    /** The work context, set by the host immediately after construction (before {@link Start}). */
+    Context;
+    /** Emit when the driver has finished its work (applied or not — see {@link EntityActionUXResult}). */
+    Completed = new EventEmitter();
+    /** Emit when the user dismisses the driver without completing. */
+    Cancelled = new EventEmitter();
+    static ɵfac = function BaseEntityActionRuntimeUX_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseEntityActionRuntimeUX)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseEntityActionRuntimeUX, inputs: { Context: "Context" }, outputs: { Completed: "Completed", Cancelled: "Cancelled" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseEntityActionRuntimeUX, [{
+        type: Directive
+    }], null, { Context: [{
+            type: Input
+        }], Completed: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }] }); })();
+//# sourceMappingURL=base-entity-action-runtime-ux.js.map

package/dist/lib/base-entity-action-runtime-ux.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-entity-action-runtime-ux.js","sourceRoot":"","sources":["../../src/lib/base-entity-action-runtime-ux.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAGvE;;;GAGG;AAEH,MAAM,OAAgB,yBAAyB;IAC3C,+FAA+F;IACtF,OAAO,CAAyB;IAEzC,sGAAsG;IAC5F,SAAS,GAAG,IAAI,YAAY,EAAwB,CAAC;IAE/D,kEAAkE;IACxD,SAAS,GAAG,IAAI,YAAY,EAAQ,CAAC;mHAR7B,yBAAyB;6DAAzB,yBAAyB;;iFAAzB,yBAAyB;cAD9C,SAAS;;kBAGL,KAAK;;kBAGL,MAAM;;kBAGN,MAAM","sourcesContent":["/**\n * @fileoverview The plugin contract for an entity-action runtime UX. A concrete driver is a standalone\n * Angular component that extends this base and registers itself with `@RegisterClass(BaseEntityActionRuntimeUX,\n * '<DriverKey>')`. The host ({@link EntityActionUXHostComponent}) resolves the key via the MJ ClassFactory,\n * mounts the component, hands it a {@link EntityActionUXContext}, calls {@link Start}, and listens for the\n * `Completed` / `Cancelled` outputs. New drivers ship in this package or any consumer — no host changes.\n * @module @memberjunction/ng-entity-action-ux\n */\nimport { Directive, EventEmitter, Input, Output } from '@angular/core';\nimport type { EntityActionUXContext, EntityActionUXResult } from './runtime-ux-context';\n\n/**\n * Abstract base for a runtime-UX driver. `@Directive()` (not `@Component`) so it can be a decorated,\n * DI-capable base class without its own template; concrete drivers supply the `@Component`.\n */\n@Directive()\nexport abstract class BaseEntityActionRuntimeUX {\n    /** The work context, set by the host immediately after construction (before {@link Start}). */\n    @Input() Context!: EntityActionUXContext;\n\n    /** Emit when the driver has finished its work (applied or not — see {@link EntityActionUXResult}). */\n    @Output() Completed = new EventEmitter<EntityActionUXResult>();\n\n    /** Emit when the user dismisses the driver without completing. */\n    @Output() Cancelled = new EventEmitter<void>();\n\n    /**\n     * Begin the driver's flow. Called once by the host after `Context` is set. Implementations typically\n     * kick off an async preview/load here and drive their own template state from it.\n     */\n    abstract Start(): void | Promise<void>;\n}\n"]}