@mochabug/adapt-angular 1.0.1-rc.9

package/README.md

@@ -0,0 +1,502 @@
+# @mochabug/adapt-angular
+
+Angular component for Adapt.
+
+```bash
+npm install @mochabug/adapt-angular
+```
+
+Requires Angular 19 or later.
+
+## Quickstart
+
+```typescript
+import { Component } from '@angular/core';
+import { AdaptAutomation } from '@mochabug/adapt-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [AdaptAutomation],
+  template: `
+    <mb-adapt-automation [automationId]="'auto-123'" style="height: 600px;" />
+  `,
+})
+export class AppComponent {}
+```
+
+With authentication:
+
+```html
+<mb-adapt-automation [automationId]="'auto-123'" [authToken]="'your-token'" style="height: 600px;" />
+```
+
+With proof-of-work challenge:
+
+```html
+<mb-adapt-automation [automationId]="'auto-123'" [requiresChallenge]="true" style="height: 600px;" />
+```
+
+## SSR (Angular Universal / SSR)
+
+Keep auth token on server:
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { AdaptAutomation } from '@mochabug/adapt-angular';
+import { startSession } from '@mochabug/adapt-core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [AdaptAutomation],
+  template: `
+    @if (sessionToken) {
+      <mb-adapt-automation [automationId]="'auto-123'" [sessionToken]="sessionToken" style="height: 600px;" />
+    }
+  `,
+})
+export class AppComponent implements OnInit {
+  sessionToken?: string;
+
+  async ngOnInit() {
+    const authToken = await getAuthTokenFromBackend();
+    const { token } = await startSession({ id: 'auto-123' }, authToken);
+    this.sessionToken = token;
+  }
+}
+```
+
+## Session inheritance
+
+```html
+<!-- direct -->
+<mb-adapt-automation [automationId]="'auto-123'" [inheritToken]="'token-from-parent'" />
+
+<!-- from URL hash: example.com#mb_session=xxx -->
+<mb-adapt-automation [automationId]="'auto-123'" [inheritFrom]="{ hash: 'mb_session' }" />
+```
+
+## Fork display
+
+```html
+<!-- side-by-side (default) -->
+<mb-adapt-automation [automationId]="'auto-123'" [forkDisplay]="{ mode: 'side-by-side', split: 60 }" />
+
+<!-- dialog -->
+<mb-adapt-automation [automationId]="'auto-123'" [forkDisplay]="{ mode: 'dialog' }" />
+```
+
+## Events
+
+```html
+<mb-adapt-automation
+  [automationId]="'auto-123'"
+  (session)="onSession($event)"
+  (adaptOutput)="onOutput($event)"
+  (forkActive)="onForkActive($event)"
+/>
+```
+
+```typescript
+onSession(event: { status: StatusJson; fork?: string }) {
+  console.log(event.status, event.fork);
+}
+
+onOutput(output: Output) {
+  console.log(output);
+}
+
+onForkActive(active: boolean) {
+  console.log(active);
+}
+```
+
+---
+
+## 2. `AdaptCap`
+
+Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.
+
+```typescript
+import { Component } from '@angular/core';
+import { AdaptCap, createConnectClient } from '@mochabug/adapt-angular/cap';
+
+@Component({
+  selector: 'app-challenge',
+  standalone: true,
+  imports: [AdaptCap],
+  template: `
+    <mb-adapt-cap
+      [automationId]="'YOUR_ID'"
+      [client]="client"
+      (solve)="onSolve($event)"
+      (error)="onError($event)"
+    />
+  `,
+})
+export class ChallengeComponent {
+  client = createConnectClient({ id: 'YOUR_ID' });
+
+  onSolve(event: { token: string; expires: Date }) {
+    console.log('Solved:', event.token, event.expires);
+  }
+
+  onError(error: Error) {
+    console.error(error);
+  }
+}
+```
+
+### Props
+
+| Input | Type |
+|-------|------|
+| `automationId` | `string` (required) |
+| `client` | `AutomationClient` (required) |
+| `workerCount` | `number` |
+| `i18n` | `CapWidgetI18n` |
+| `darkMode` | `boolean` |
+
+### Events
+
+| Output | Payload |
+|--------|---------|
+| `solve` | `{ token: string; expires: Date }` |
+| `error` | `Error` |
+
+### Headless (no UI)
+
+Use the lower-level API to create and redeem challenges yourself:
+
+```ts
+import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-angular/cap';
+
+const client = createConnectClient({ id: 'YOUR_ID' });
+const challenge = await createChallenge(client);
+// ... solve with Cap.js or your own solver ...
+const redeemed = await redeemChallenge(client, solutions);
+```
+
+---
+
+## Styling
+
+All visuals are controlled via CSS custom properties on `.mb-adapt`. The `[darkMode]="true"` input automatically switches to dark defaults, but you can override any variable for either mode.
+
+### Where to put the CSS
+
+Add a CSS file and import it in your `angular.json` styles array:
+
+```json
+{
+  "styles": ["src/styles.css", "src/adapt-theme.css"]
+}
+```
+
+Or import a global CSS file in your root `styles.css`:
+
+```css
+@import './adapt-theme.css';
+```
+
+### Matching your site's toolbar
+
+Map your existing design tokens to the panel toolbar. These six variables control almost everything you see in the tab bar:
+
+```css
+/* adapt-theme.css */
+
+/* Light mode — derive from your site's surface/text colors */
+.mb-adapt {
+  --mb-adapt-fork-bg: #ffffff;              /* panel content background */
+  --mb-adapt-fork-tab-bg: #f5f5f5;         /* inactive tab / toolbar background */
+  --mb-adapt-fork-tab-active-bg: #ffffff;   /* active tab background */
+  --mb-adapt-fork-tab-color: #1a1a1a;      /* active tab text */
+  --mb-adapt-fork-tab-inactive-color: #888; /* inactive tab text */
+  --mb-adapt-fork-separator: #e0e0e0;      /* borders between tabs & panels */
+}
+
+/* Dark mode — active when [darkMode]="true" */
+.mb-adapt[dark-mode] {
+  --mb-adapt-fork-bg: #1e1e1e;
+  --mb-adapt-fork-tab-bg: #2a2a2a;
+  --mb-adapt-fork-tab-active-bg: #1e1e1e;
+  --mb-adapt-fork-tab-color: #e0e0e0;
+  --mb-adapt-fork-tab-inactive-color: #777;
+  --mb-adapt-fork-separator: #3a3a3a;
+}
+```
+
+**Typical mapping from your site's design system:**
+
+| Your site has | Maps to |
+|---|---|
+| Surface / card background | `--mb-adapt-fork-bg` |
+| Secondary / muted background | `--mb-adapt-fork-tab-bg` |
+| Primary text color | `--mb-adapt-fork-tab-color` |
+| Muted / secondary text | `--mb-adapt-fork-tab-inactive-color` |
+| Border / divider color | `--mb-adapt-fork-separator` |
+| Accent color | `--mb-adapt-separator-active` (resize handle highlight) |
+| Interactive hover tint | `--mb-adapt-button-hover-bg` |
+
+### Custom theme (light & dark)
+
+A more complete example mapping a full brand palette — primary, secondary, and accent colors — to Adapt's CSS variables for both light and dark modes. Add this as a global CSS file via `angular.json` styles array or import it in your root stylesheet:
+
+```css
+/* adapt-brand-theme.css */
+
+/*
+ * Example: brand theme using primary / secondary / accent colors.
+ * Maps your design-system tokens to Adapt's CSS variables for both modes.
+ */
+
+/* ── Light mode ────────────────────────────────── */
+.mb-adapt {
+  /* Brand palette */
+  --mb-adapt-fork-bg:               #ffffff;           /* surface          */
+  --mb-adapt-fork-tab-bg:           #f0f4ff;           /* primary-50       */
+  --mb-adapt-fork-tab-active-bg:    #ffffff;           /* surface          */
+  --mb-adapt-fork-tab-color:        #1e293b;           /* on-surface       */
+  --mb-adapt-fork-tab-inactive-color: #64748b;         /* on-surface-muted */
+  --mb-adapt-fork-separator:        #cbd5e1;           /* outline          */
+
+  /* Accent — resize handle highlight */
+  --mb-adapt-separator-active:      rgba(79, 70, 229, 0.5);  /* primary    */
+
+  /* Cap widget */
+  --mb-adapt-cap-background:        #ffffff;
+  --mb-adapt-cap-border-color:      #e2e8f0;
+  --mb-adapt-cap-color:             #1e293b;
+  --mb-adapt-cap-spinner-color:     #4f46e5;           /* primary          */
+
+  /* Status cards */
+  --mb-adapt-status-card-bg:        #ffffff;
+  --mb-adapt-status-card-border:    #e2e8f0;
+  --mb-adapt-status-text:           #334155;
+}
+
+/* ── Dark mode ─────────────────────────────────── */
+.mb-adapt[dark-mode] {
+  --mb-adapt-fork-bg:               #0f172a;           /* surface-dark     */
+  --mb-adapt-fork-tab-bg:           #1e293b;           /* primary-900      */
+  --mb-adapt-fork-tab-active-bg:    #0f172a;           /* surface-dark     */
+  --mb-adapt-fork-tab-color:        #f1f5f9;           /* on-surface-dark  */
+  --mb-adapt-fork-tab-inactive-color: #94a3b8;         /* muted-dark       */
+  --mb-adapt-fork-separator:        #334155;           /* outline-dark     */
+
+  --mb-adapt-separator-active:      rgba(129, 140, 248, 0.6); /* primary-light */
+
+  --mb-adapt-cap-background:        #1e293b;
+  --mb-adapt-cap-border-color:      #334155;
+  --mb-adapt-cap-color:             #f1f5f9;
+  --mb-adapt-cap-spinner-color:     #818cf8;           /* primary-light    */
+
+  --mb-adapt-status-card-bg:        #1e293b;
+  --mb-adapt-status-card-border:    #334155;
+  --mb-adapt-status-text:           #e2e8f0;
+}
+```
+
+### Font
+
+```css
+.mb-adapt {
+  --mb-adapt-font: "Inter", sans-serif;
+}
+```
+
+### Elevation and borders
+
+```css
+/* Subtle, modern elevation */
+.mb-adapt {
+  --mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  --mb-adapt-floating-border: 1px solid rgba(0, 0, 0, 0.06);
+  --mb-adapt-floating-radius: 12px;
+  --mb-adapt-floating-backdrop: none;
+
+  --mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  --mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --mb-adapt-border-radius: 8px;  /* iframe border radius */
+}
+
+/* Dark mode */
+.mb-adapt[dark-mode] {
+  --mb-adapt-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.08);
+  --mb-adapt-status-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  --mb-adapt-drag-ghost-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+```
+
+**Frosted glass effect:**
+
+```css
+.mb-adapt {
+  --mb-adapt-fork-bg: rgba(255, 255, 255, 0.7);
+  --mb-adapt-fork-tab-bg: rgba(245, 245, 245, 0.5);
+  --mb-adapt-floating-backdrop: blur(16px) saturate(180%);
+  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.2);
+  --mb-adapt-floating-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+}
+```
+
+**Flat / borderless:**
+
+```css
+.mb-adapt {
+  --mb-adapt-floating-shadow: none;
+  --mb-adapt-floating-border: 1px solid var(--mb-adapt-fork-separator);
+  --mb-adapt-floating-radius: 4px;
+  --mb-adapt-status-card-shadow: none;
+  --mb-adapt-drag-ghost-shadow: none;
+}
+```
+
+### Using the `classNames` input
+
+Override internal element classes for deeper customization:
+
+```html
+<mb-adapt-automation
+  [automationId]="'auto-123'"
+  [classNames]="{
+    root: 'my-adapt-root',
+    iframe: 'my-adapt-iframe',
+    statusMessage: 'my-status-overlay',
+    statusCard: 'my-status-card'
+  }"
+/>
+```
+
+### Using the `styles` input
+
+Apply inline styles to the internal root element (useful for sizing):
+
+```html
+<mb-adapt-automation
+  [automationId]="'auto-123'"
+  [styles]="{ height: '600px', maxWidth: '1200px', margin: '0 auto' }"
+/>
+```
+
+> **Note:** `[styles]` targets the internal `.mb-adapt` root. Use Angular's `style` attribute or `[ngStyle]` for styles on the outer `<mb-adapt-automation>` host element.
+
+<details>
+<summary>Full CSS variable reference</summary>
+
+### General
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-bg` | `transparent` | | Root & group backgrounds |
+| `--mb-adapt-font` | `system-ui, -apple-system, sans-serif` | | All panel UI text |
+| `--mb-adapt-button-hover-bg` | `rgba(128,128,128,0.2)` | `rgba(128,128,128,0.3)` | Close/popout/action button hover |
+| `--mb-adapt-separator-active` | `rgba(59,130,246,0.5)` | `rgba(99,130,246,0.6)` | Resize handle hover/active |
+| `--mb-adapt-border-radius` | `8px` | | Iframe border radius |
+
+### Toolbar and tabs
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-fork-bg` | `#ffffff` | `#1e1e1e` | Panel content background |
+| `--mb-adapt-fork-tab-bg` | `#f3f3f3` | `#252526` | Toolbar / inactive tab bg |
+| `--mb-adapt-fork-tab-active-bg` | `#ffffff` | `#1e1e1e` | Active tab background |
+| `--mb-adapt-fork-tab-color` | `rgb(51,51,51)` | `#ffffff` | Active tab text |
+| `--mb-adapt-fork-tab-inactive-color` | `rgba(51,51,51,0.7)` | `#969696` | Inactive tab text |
+| `--mb-adapt-fork-separator` | `rgba(128,128,128,0.35)` | `rgb(68,68,68)` | Tab/panel borders |
+
+### Floating panels (elevation)
+
+| Variable | Light default | Dark default | Description |
+|---|---|---|---|
+| `--mb-adapt-floating-shadow` | `0 25px 50px -12px rgba(0,0,0,0.25), 0 12px 24px -8px rgba(0,0,0,0.15)` | `… rgba(0,0,0,0.5), … rgba(0,0,0,0.3)` | Overlay box-shadow |
+| `--mb-adapt-floating-border` | `none` | `1px solid rgba(255,255,255,0.06)` | Overlay border |
+| `--mb-adapt-floating-backdrop` | `none` | | Overlay backdrop-filter |
+| `--mb-adapt-floating-radius` | `8px` | | Overlay border-radius |
+| `--mb-adapt-status-card-shadow` | `0 4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)` | `… rgba(0,0,0,0.25), … rgba(0,0,0,0.15)` | Status card box-shadow |
+| `--mb-adapt-drag-ghost-shadow` | `0 4px 12px rgba(0,0,0,0.15)` | `0 4px 12px rgba(0,0,0,0.35)` | Drag ghost box-shadow |
+
+### Drop targets
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-drop-header-bg` | `rgba(99,102,241,0.18)` | `rgba(129,140,248,0.22)` |
+| `--mb-adapt-drop-center-bg` | `rgba(99,102,241,0.12)` | `rgba(129,140,248,0.15)` |
+| `--mb-adapt-drop-split-bg` | `rgba(99,102,241,0.14)` | `rgba(129,140,248,0.18)` |
+| `--mb-adapt-drop-border` | `rgba(99,102,241,0.55)` | `rgba(129,140,248,0.6)` |
+
+### Status cards
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-status-card-bg` | `#ffffff` | `#1e293b` |
+| `--mb-adapt-status-card-border` | `#e5e7eb` | `#334155` |
+| `--mb-adapt-status-icon-bg` | `#fef2f2` | `#351c1c` |
+| `--mb-adapt-status-text` | `#374151` | `#e2e8f0` |
+
+### Cap widget
+
+| Variable | Light default | Dark default |
+|---|---|---|
+| `--mb-adapt-cap-background` | `#ffffff` | `#1e293b` |
+| `--mb-adapt-cap-border-color` | `#e2e8f0` | `#334155` |
+| `--mb-adapt-cap-border-radius` | `16px` | |
+| `--mb-adapt-cap-height` | `72px` | |
+| `--mb-adapt-cap-width` | `380px` | |
+| `--mb-adapt-cap-padding` | `20px 28px` | |
+| `--mb-adapt-cap-gap` | `20px` | |
+| `--mb-adapt-cap-color` | `#1e293b` | `#f1f5f9` |
+| `--mb-adapt-cap-checkbox-size` | `36px` | |
+| `--mb-adapt-cap-checkbox-border` | `2px solid #cbd5e1` | `2px solid #475569` |
+| `--mb-adapt-cap-checkbox-radius` | `10px` | |
+| `--mb-adapt-cap-checkbox-background` | `#f8fafc` | `#0f172a` |
+| `--mb-adapt-cap-spinner-color` | `#6366f1` | `#818cf8` |
+| `--mb-adapt-cap-spinner-bg` | `#e2e8f0` | `#334155` |
+| `--mb-adapt-cap-spinner-thickness` | `3px` | |
+| `--mb-adapt-cap-font` | `inherit` | |
+
+</details>
+
+---
+
+## Props
+
+| Input | Type |
+|-------|------|
+| `automationId` | `string` (required) |
+| `sessionToken` | `string` |
+| `authToken` | `string` |
+| `transmitter` | `string` |
+| `signals` | `{ [key: string]: SignalValue }` |
+| `challengeToken` | `string` |
+| `requiresChallenge` | `boolean` |
+| `capWidgetOptions` | `{ workerCount?: number; i18n?: CapWidgetI18n }` |
+| `inheritToken` | `string` |
+| `inheritFrom` | `{ hash: string } \| { param: string }` |
+| `forkDisplay` | `{ mode: 'side-by-side', split?: number } \| { mode: 'dialog' }` |
+| `darkMode` | `boolean` |
+| `autoResizing` | `boolean` |
+| `allowFloating` | `boolean` — hide pop-out buttons and block user-initiated floating (default `true`) |
+| `allowDocking` | `boolean` — hide dock buttons and block user-initiated docking (default `true`) |
+| `allowDialogDocking` | `boolean` — allow tab splits inside floating dialog overlays (default `true`) |
+| `floatingAutoResize` | `boolean` — floating overlays auto-resize from iframe content (default `false`) |
+| `confirmOnClose` | `boolean` — show confirmation dialog before leaving page (default `false`) |
+| `persist` | `boolean \| PersistOptions` |
+| `text` | `StatusText` |
+| `classNames` | `{ root?: string; iframe?: string; statusMessage?: string; statusCard?: string }` |
+| `styles` | `Partial<CSSStyleDeclaration>` |
+
+## Events
+
+| Output | Payload |
+|--------|---------|
+| `session` | `{ status: StatusJson; fork?: string }` |
+| `adaptOutput` | `Output` |
+| `forkActive` | `boolean` |
+
+## License
+
+ISC (c) mochabug AB

package/dist/esm/adapt-automation.component.d.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy } from "@angular/core";
+import { type AdaptWebClientOptions, type ForkDisplay, type Output as AdaptOutput, type PersistOptions, type SignalValue, type StatusJson, type StatusText } from "@mochabug/adapt-web";
+import "@mochabug/adapt-web/cap";
+import * as i0 from "@angular/core";
+/**
+ * Angular component for embedding Adapt automations.
+ * Renders the `<adapt-automation>` custom element internally and syncs
+ * Angular inputs/outputs to the element's attributes and properties.
+ */
+export declare class AdaptAutomation implements AfterViewInit, OnChanges, OnDestroy {
+    private zone;
+    private elRef;
+    automationId: string;
+    sessionToken?: string;
+    authToken?: string;
+    transmitter?: string;
+    signals?: Record<string, SignalValue>;
+    challengeToken?: string;
+    requiresChallenge?: boolean;
+    capWidgetOptions?: AdaptWebClientOptions["capWidgetOptions"];
+    inheritToken?: string;
+    inheritFrom?: {
+        hash: string;
+    } | {
+        param: string;
+    };
+    forkDisplay?: ForkDisplay;
+    darkMode?: boolean;
+    autoResizing?: boolean;
+    allowFloating?: boolean;
+    allowDocking?: boolean;
+    allowDialogDocking?: boolean;
+    allowMinimize?: boolean;
+    allowMaximize?: boolean;
+    floatingAutoResize?: boolean;
+    confirmOnClose?: boolean;
+    persist?: boolean | PersistOptions;
+    text?: StatusText;
+    classNames?: AdaptWebClientOptions["classNames"];
+    styles?: Partial<CSSStyleDeclaration>;
+    session: EventEmitter<{
+        status: StatusJson;
+        fork?: string;
+    }>;
+    adaptOutput: EventEmitter<AdaptOutput>;
+    forkActive: EventEmitter<boolean>;
+    private initialized;
+    constructor(zone: NgZone);
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    /** End current session and start a new one. */
+    newSession(): Promise<void>;
+    private sync;
+    private setAttr;
+    private setBoolAttr;
+    private setFalseAttr;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdaptAutomation, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdaptAutomation, "mb-adapt-automation", never, { "automationId": { "alias": "automationId"; "required": true; }; "sessionToken": { "alias": "sessionToken"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "transmitter": { "alias": "transmitter"; "required": false; }; "signals": { "alias": "signals"; "required": false; }; "challengeToken": { "alias": "challengeToken"; "required": false; }; "requiresChallenge": { "alias": "requiresChallenge"; "required": false; }; "capWidgetOptions": { "alias": "capWidgetOptions"; "required": false; }; "inheritToken": { "alias": "inheritToken"; "required": false; }; "inheritFrom": { "alias": "inheritFrom"; "required": false; }; "forkDisplay": { "alias": "forkDisplay"; "required": false; }; "darkMode": { "alias": "darkMode"; "required": false; }; "autoResizing": { "alias": "autoResizing"; "required": false; }; "allowFloating": { "alias": "allowFloating"; "required": false; }; "allowDocking": { "alias": "allowDocking"; "required": false; }; "allowDialogDocking": { "alias": "allowDialogDocking"; "required": false; }; "allowMinimize": { "alias": "allowMinimize"; "required": false; }; "allowMaximize": { "alias": "allowMaximize"; "required": false; }; "floatingAutoResize": { "alias": "floatingAutoResize"; "required": false; }; "confirmOnClose": { "alias": "confirmOnClose"; "required": false; }; "persist": { "alias": "persist"; "required": false; }; "text": { "alias": "text"; "required": false; }; "classNames": { "alias": "classNames"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; }, { "session": "session"; "adaptOutput": "adaptOutput"; "forkActive": "forkActive"; }, never, never, true, never>;
+}

package/dist/esm/adapt-automation.component.js

@@ -0,0 +1,177 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Input, Output, ViewChild, } from "@angular/core";
+import { AdaptAutomationElement, } from "@mochabug/adapt-web";
+import "@mochabug/adapt-web/cap";
+import * as i0 from "@angular/core";
+// Ensure custom element is registered
+void AdaptAutomationElement;
+/**
+ * Angular component for embedding Adapt automations.
+ * Renders the `<adapt-automation>` custom element internally and syncs
+ * Angular inputs/outputs to the element's attributes and properties.
+ */
+export class AdaptAutomation {
+    constructor(zone) {
+        this.zone = zone;
+        this.session = new EventEmitter();
+        this.adaptOutput = new EventEmitter();
+        this.forkActive = new EventEmitter();
+        this.initialized = false;
+    }
+    ngAfterViewInit() {
+        this.sync();
+        this.initialized = true;
+    }
+    ngOnChanges() {
+        if (this.initialized) {
+            this.sync();
+        }
+    }
+    ngOnDestroy() {
+        // Custom element handles cleanup via disconnectedCallback
+    }
+    /** End current session and start a new one. */
+    async newSession() {
+        await this.elRef.nativeElement.newSession();
+    }
+    sync() {
+        const el = this.elRef.nativeElement;
+        // String attributes
+        this.setAttr(el, "automation-id", this.automationId);
+        this.setAttr(el, "session-token", this.sessionToken);
+        this.setAttr(el, "auth-token", this.authToken);
+        this.setAttr(el, "transmitter", this.transmitter);
+        this.setAttr(el, "challenge-token", this.challengeToken);
+        this.setAttr(el, "inherit-token", this.inheritToken);
+        // Boolean presence attributes
+        this.setBoolAttr(el, "requires-challenge", this.requiresChallenge);
+        this.setBoolAttr(el, "dark-mode", this.darkMode);
+        this.setBoolAttr(el, "auto-resizing", this.autoResizing);
+        this.setBoolAttr(el, "floating-auto-resize", this.floatingAutoResize);
+        this.setBoolAttr(el, "confirm-on-close", this.confirmOnClose);
+        this.setBoolAttr(el, "persist", !!this.persist);
+        // Boolean "false" attributes (default true, set "false" to disable)
+        this.setFalseAttr(el, "allow-floating", this.allowFloating);
+        this.setFalseAttr(el, "allow-docking", this.allowDocking);
+        this.setFalseAttr(el, "allow-dialog-docking", this.allowDialogDocking);
+        this.setFalseAttr(el, "allow-minimize", this.allowMinimize);
+        this.setFalseAttr(el, "allow-maximize", this.allowMaximize);
+        // Fork display attributes
+        if (this.forkDisplay) {
+            el.setAttribute("fork-display-mode", this.forkDisplay.mode);
+            if (this.forkDisplay.mode === "side-by-side" &&
+                this.forkDisplay.split !== undefined) {
+                el.setAttribute("side-by-side-split", String(this.forkDisplay.split));
+            }
+            else {
+                el.removeAttribute("side-by-side-split");
+            }
+        }
+        // Non-serializable properties
+        el.signals = this.signals;
+        el.capWidgetOptions = this.capWidgetOptions;
+        el.inheritFrom = this.inheritFrom;
+        el.classNames = this.classNames;
+        el.styles = this.styles;
+        el.persistOptions =
+            typeof this.persist === "object" ? this.persist : undefined;
+        el.text = this.text;
+        // Callbacks — run inside NgZone for change detection
+        el.onSessionCallback = (status, fork) => {
+            this.zone.run(() => this.session.emit({ status, fork }));
+        };
+        el.onOutputCallback = (output) => {
+            this.zone.run(() => this.adaptOutput.emit(output));
+        };
+        el.onForkActiveCallback = (active) => {
+            this.zone.run(() => this.forkActive.emit(active));
+        };
+    }
+    setAttr(el, name, value) {
+        if (value != null) {
+            el.setAttribute(name, value);
+        }
+        else {
+            el.removeAttribute(name);
+        }
+    }
+    setBoolAttr(el, name, value) {
+        if (value) {
+            el.setAttribute(name, "");
+        }
+        else {
+            el.removeAttribute(name);
+        }
+    }
+    setFalseAttr(el, name, value) {
+        if (value === false) {
+            el.setAttribute(name, "false");
+        }
+        else {
+            el.removeAttribute(name);
+        }
+    }
+}
+AdaptAutomation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AdaptAutomation, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AdaptAutomation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AdaptAutomation, isStandalone: true, selector: "mb-adapt-automation", inputs: { automationId: "automationId", sessionToken: "sessionToken", authToken: "authToken", transmitter: "transmitter", signals: "signals", challengeToken: "challengeToken", requiresChallenge: "requiresChallenge", capWidgetOptions: "capWidgetOptions", inheritToken: "inheritToken", inheritFrom: "inheritFrom", forkDisplay: "forkDisplay", darkMode: "darkMode", autoResizing: "autoResizing", allowFloating: "allowFloating", allowDocking: "allowDocking", allowDialogDocking: "allowDialogDocking", allowMinimize: "allowMinimize", allowMaximize: "allowMaximize", floatingAutoResize: "floatingAutoResize", confirmOnClose: "confirmOnClose", persist: "persist", text: "text", classNames: "classNames", styles: "styles" }, outputs: { session: "session", adaptOutput: "adaptOutput", forkActive: "forkActive" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<adapt-automation #el></adapt-automation>`, isInline: true, styles: [":host { display: block; }", "adapt-automation { display: block; width: 100%; height: 100%; }"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AdaptAutomation, decorators: [{
+            type: Component,
+            args: [{ selector: "mb-adapt-automation", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<adapt-automation #el></adapt-automation>`, styles: [":host { display: block; }", "adapt-automation { display: block; width: 100%; height: 100%; }"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { elRef: [{
+                type: ViewChild,
+                args: ["el", { static: true }]
+            }], automationId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sessionToken: [{
+                type: Input
+            }], authToken: [{
+                type: Input
+            }], transmitter: [{
+                type: Input
+            }], signals: [{
+                type: Input
+            }], challengeToken: [{
+                type: Input
+            }], requiresChallenge: [{
+                type: Input
+            }], capWidgetOptions: [{
+                type: Input
+            }], inheritToken: [{
+                type: Input
+            }], inheritFrom: [{
+                type: Input
+            }], forkDisplay: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }], autoResizing: [{
+                type: Input
+            }], allowFloating: [{
+                type: Input
+            }], allowDocking: [{
+                type: Input
+            }], allowDialogDocking: [{
+                type: Input
+            }], allowMinimize: [{
+                type: Input
+            }], allowMaximize: [{
+                type: Input
+            }], floatingAutoResize: [{
+                type: Input
+            }], confirmOnClose: [{
+                type: Input
+            }], persist: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], classNames: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], session: [{
+                type: Output
+            }], adaptOutput: [{
+                type: Output
+            }], forkActive: [{
+                type: Output
+            }] } });

package/dist/esm/adapt-cap.component.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy } from "@angular/core";
+import type { AutomationClient } from "@mochabug/adapt-core";
+import { type CapWidgetI18n } from "@mochabug/adapt-web/cap";
+import * as i0 from "@angular/core";
+/**
+ * Angular component for Cap.js proof-of-work challenges.
+ * Renders the `<adapt-cap>` custom element internally and syncs
+ * non-serializable properties via ViewChild.
+ */
+export declare class AdaptCap implements AfterViewInit, OnChanges, OnDestroy {
+    private zone;
+    private elRef;
+    automationId: string;
+    client: AutomationClient;
+    workerCount?: number;
+    i18n?: CapWidgetI18n;
+    darkMode?: boolean;
+    solve: EventEmitter<{
+        token: string;
+        expires: Date;
+    }>;
+    error: EventEmitter<Error>;
+    private initialized;
+    constructor(zone: NgZone);
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    private sync;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdaptCap, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdaptCap, "mb-adapt-cap", never, { "automationId": { "alias": "automationId"; "required": true; }; "client": { "alias": "client"; "required": true; }; "workerCount": { "alias": "workerCount"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "darkMode": { "alias": "darkMode"; "required": false; }; }, { "solve": "solve"; "error": "error"; }, never, never, true, never>;
+}

package/dist/esm/adapt-cap.component.js

@@ -0,0 +1,82 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Input, Output, ViewChild, } from "@angular/core";
+import { AdaptCapElement } from "@mochabug/adapt-web/cap";
+import * as i0 from "@angular/core";
+// Ensure custom element is registered
+void AdaptCapElement;
+/**
+ * Angular component for Cap.js proof-of-work challenges.
+ * Renders the `<adapt-cap>` custom element internally and syncs
+ * non-serializable properties via ViewChild.
+ */
+export class AdaptCap {
+    constructor(zone) {
+        this.zone = zone;
+        this.solve = new EventEmitter();
+        this.error = new EventEmitter();
+        this.initialized = false;
+    }
+    ngAfterViewInit() {
+        this.sync();
+        this.initialized = true;
+    }
+    ngOnChanges() {
+        if (this.initialized) {
+            this.sync();
+        }
+    }
+    ngOnDestroy() {
+        // Custom element handles cleanup
+    }
+    sync() {
+        const el = this.elRef.nativeElement;
+        // Attributes
+        el.setAttribute("automation-id", this.automationId);
+        if (this.workerCount !== undefined) {
+            el.setAttribute("worker-count", String(this.workerCount));
+        }
+        else {
+            el.removeAttribute("worker-count");
+        }
+        if (this.darkMode) {
+            el.setAttribute("dark-mode", "");
+        }
+        else {
+            el.removeAttribute("dark-mode");
+        }
+        // Non-serializable properties
+        el.client = this.client;
+        el.i18n = this.i18n;
+        // Callbacks — run inside NgZone for change detection
+        el.onSolveCallback = (token, expires) => {
+            this.zone.run(() => this.solve.emit({ token, expires }));
+        };
+        el.onErrorCallback = (error) => {
+            this.zone.run(() => this.error.emit(error));
+        };
+    }
+}
+AdaptCap.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AdaptCap, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AdaptCap.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AdaptCap, isStandalone: true, selector: "mb-adapt-cap", inputs: { automationId: "automationId", client: "client", workerCount: "workerCount", i18n: "i18n", darkMode: "darkMode" }, outputs: { solve: "solve", error: "error" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<adapt-cap #el></adapt-cap>`, isInline: true, styles: [":host { display: block; }", "adapt-cap { display: block; width: 100%; height: 100%; }"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AdaptCap, decorators: [{
+            type: Component,
+            args: [{ selector: "mb-adapt-cap", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<adapt-cap #el></adapt-cap>`, styles: [":host { display: block; }", "adapt-cap { display: block; width: 100%; height: 100%; }"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { elRef: [{
+                type: ViewChild,
+                args: ["el", { static: true }]
+            }], automationId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], client: [{
+                type: Input,
+                args: [{ required: true }]
+            }], workerCount: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }], solve: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }] } });

package/dist/esm/cap.d.ts

@@ -0,0 +1,3 @@
+import "@mochabug/adapt-web/cap";
+export { AdaptCap } from "./adapt-cap.component.js";
+export { Cap as AdaptCapWidget, type AdaptCapWidgetOptions, createChallenge, redeemChallenge, AdaptCapElement, createConnectClient, type ChallengeInfo, type RedeemedChallenge, type CapWidgetI18n, type CapWidgetOptions, } from "@mochabug/adapt-web/cap";

package/dist/esm/cap.js

@@ -0,0 +1,4 @@
+// Cap entry — standalone Cap.js widget for Angular
+import "@mochabug/adapt-web/cap";
+export { AdaptCap } from "./adapt-cap.component.js";
+export { Cap as AdaptCapWidget, createChallenge, redeemChallenge, AdaptCapElement, createConnectClient, } from "@mochabug/adapt-web/cap";

package/dist/esm/core.d.ts

@@ -0,0 +1,2 @@
+export * from "@mochabug/adapt-web/core";
+export { AdaptAutomation } from "./adapt-automation.component.js";

package/dist/esm/core.js

@@ -0,0 +1,3 @@
+// Core entry — Adapt component without Cap.js
+export * from "@mochabug/adapt-web/core";
+export { AdaptAutomation } from "./adapt-automation.component.js";

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "@mochabug/adapt-web";
+export { AdaptAutomation } from "./adapt-automation.component.js";

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+// Re-export everything from web
+export * from "@mochabug/adapt-web";
+// Re-export the Angular component
+export { AdaptAutomation } from "./adapt-automation.component.js";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@mochabug/adapt-angular",
+  "version": "1.0.1-rc.9",
+  "description": "Angular component for Adapt automation platform",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
+    },
+    "./core": {
+      "types": "./dist/esm/core.d.ts",
+      "import": "./dist/esm/core.js"
+    },
+    "./cap": {
+      "types": "./dist/esm/cap.d.ts",
+      "import": "./dist/esm/cap.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:esm": "ngc --project tsconfig.esm.json",
+    "build": "(cd ../web && npm run build) && rm -rf dist && npm run build:esm",
+    "sample": "npm run build && cd sample && npm run dev"
+  },
+  "keywords": [
+    "adapt",
+    "automations",
+    "mochabug",
+    "angular"
+  ],
+  "author": "mochabug AB",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0"
+  },
+  "devDependencies": {
+    "@angular/core": "^21.2.4",
+    "@angular/compiler": "^21.2.4",
+    "@angular/compiler-cli": "^21.2.4",
+    "rxjs": "^7.8.2",
+    "typescript": "~5.9.3",
+    "zone.js": "^0.16.1"
+  },
+  "dependencies": {
+    "@mochabug/adapt-web": "*"
+  }
+}