@mochabug/adapt-astro 1.0.1-rc.3 → 1.0.1-rc.30

package/README.md

@@ -6,22 +6,28 @@ Astro component for Adapt.
 npm install @mochabug/adapt-astro
 ```
 
-Requires Astro 3, 4, or 5.
+Requires Astro 3, 4, 5, or 6.
 
 ## Quickstart
 
 ```astro
 ---
-import Adapt from '@mochabug/adapt-astro/Adapt.astro';
+import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
 ---
 
-<Adapt id="auto-123" style="height: 600px;" />
+<AdaptAutomation automationId="auto-123" style="height: 600px;" />
 ```
 
-If the automation requires authentication:
+With authentication:
 
 ```astro
-<Adapt id="auto-123" authToken="your-token" style="height: 600px;" />
+<AdaptAutomation automationId="auto-123" authToken="your-token" style="height: 600px;" />
+```
+
+With proof-of-work challenge:
+
+```astro
+<AdaptAutomation automationId="auto-123" requiresChallenge style="height: 600px;" />
 ```
 
 ## SSR
@@ -37,51 +43,454 @@ export default defineConfig({
 
 ```astro
 ---
-import Adapt from '@mochabug/adapt-astro/Adapt.astro';
+import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
 import { startSession } from '@mochabug/adapt-core';
 
 const authToken = await getAuthTokenFromBackend();
 const { token } = await startSession({ id: 'auto-123' }, authToken);
 ---
 
-<Adapt id="auto-123" sessionToken={token} style="height: 600px;" />
+<AdaptAutomation automationId="auto-123" sessionToken={token} style="height: 600px;" />
 ```
 
 ## Session inheritance
 
 ```astro
 <!-- from URL hash: example.com#mb_session=xxx -->
-<Adapt id="auto-123" inheritFrom={{ hash: 'mb_session' }} />
+<AdaptAutomation automationId="auto-123" inheritFrom={{ hash: 'mb_session' }} />
 
 <!-- from URL param: example.com?token=xxx -->
-<Adapt id="auto-123" inheritFrom={{ param: 'token' }} />
+<AdaptAutomation automationId="auto-123" inheritFrom={{ param: 'token' }} />
 ```
 
 ## Fork display
 
 ```astro
-<!-- side-by-side -->
-<Adapt id="auto-123" forkDisplayMode="side-by-side" sideBySideSplit={60} />
+<!-- side-by-side (default) -->
+<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'side-by-side', split: 60 }} />
 
 <!-- dialog -->
-<Adapt id="auto-123" forkDisplayMode="dialog" dialogBackdropClose />
+<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'dialog' }} />
 ```
 
+## Events
+
+Listen via `addEventListener` on the underlying `<adapt-automation>` element:
+
+```astro
+<AdaptAutomation automationId="auto-123" style="height: 600px;" />
+<script>
+  const el = document.querySelector('adapt-automation');
+  el?.addEventListener('adapt-session', (e) => console.log(e.detail));
+  el?.addEventListener('adapt-output', (e) => console.log(e.detail));
+</script>
+```
+
+---
+
+## 2. `AdaptCap`
+
+Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.
+
+Since Astro components are server-rendered, you must set the `client` property via JavaScript after the element is in the DOM:
+
+```astro
+---
+import AdaptCap from '@mochabug/adapt-astro/AdaptCap.astro';
+---
+
+<AdaptCap automationId="YOUR_ID" />
+
+<script>
+  import { createConnectClient, AdaptCapElement } from '@mochabug/adapt-astro/cap';
+
+  void AdaptCapElement; // ensure custom element is registered
+
+  const el = document.querySelector<AdaptCapElement>('adapt-cap');
+  if (el) {
+    el.client = createConnectClient({ id: 'YOUR_ID' });
+    el.addEventListener('adapt-cap-solve', (e) => {
+      const { token, expires } = (e as CustomEvent).detail;
+      console.log('Solved:', token, expires);
+    });
+    el.addEventListener('adapt-cap-error', (e) => {
+      console.error((e as CustomEvent).detail.error);
+    });
+  }
+</script>
+```
+
+### Props
+
+| Prop | Type |
+|------|------|
+| `automationId` | `string` (required) |
+| `workerCount` | `number` |
+| `i18n` | `CapWidgetI18n` |
+| `darkMode` | `boolean` |
+| `class` | `string` |
+| `style` | `string` |
+
+### JS-only properties
+
+| Property | Type |
+|----------|------|
+| `client` | `AutomationClient` — **required**, set via JS |
+| `i18n` | `CapWidgetI18n` — label overrides |
+
+### Events
+
+| Event | Detail |
+|-------|--------|
+| `adapt-cap-solve` | `{ token: string, expires: Date }` |
+| `adapt-cap-error` | `{ error: Error }` |
+
+### Headless (no UI)
+
+Use the lower-level API to create and redeem challenges yourself:
+
+```ts
+import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-astro/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
+
+There are three ways to style the Adapt component, from simplest to most powerful.
+
+### 1. `theme` prop (recommended)
+
+Pass an `AdaptTheme` object for semantic token-based theming. Define the theme in frontmatter and pass it as a prop:
+
+```astro
+---
+import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
+import type { AdaptTheme } from '@mochabug/adapt-astro';
+
+const myTheme: AdaptTheme = {
+  mode: 'light',
+  primary: '#4f46e5',
+  background: '#ffffff',
+  surface: '#f0f4ff',
+  text: '#1e293b',
+  textSecondary: '#64748b',
+  border: '#cbd5e1',
+  font: '"Inter", sans-serif',
+};
+---
+
+<AdaptAutomation automationId="auto-123" theme={myTheme} style="height: 600px;" />
+```
+
+#### `AdaptTheme` tokens
+
+| Token | Type | Description |
+|---|---|---|
+| `mode` | `'light' \| 'dark'` | Controls dark mode class and shadow/border defaults |
+| `primary` | `string` | Accent color -- derives separator, drop target, status icon, and spinner colors |
+| `background` | `string` | Main background (panels, active tabs, status cards) |
+| `surface` | `string` | Surface color (toolbar, inactive tabs) |
+| `text` | `string` | Primary text color (tabs, status, cap widget) |
+| `textSecondary` | `string` | Secondary/muted text (inactive tabs) |
+| `border` | `string` | Border/separator color (tabs, panels, cap widget, status cards) |
+| `font` | `string` | Font family for all panel UI text |
+| `vars` | `Record<string, string>` | Direct CSS variable overrides (see below) |
+
+#### `vars` escape hatch
+
+For any variable not covered by the semantic tokens, use `vars` with variable names **without** the `--mb-adapt-` prefix. These override everything, including derived values:
+
+```astro
+---
+const myTheme: AdaptTheme = {
+  mode: 'dark',
+  primary: '#818cf8',
+  background: '#0f172a',
+  surface: '#1e293b',
+  text: '#f1f5f9',
+  border: '#334155',
+  vars: {
+    'fork-tab-active-bg': '#0f172a',
+    'floating-radius': '12px',
+    'cap-spinner-color': '#a5b4fc',
+  },
+};
+---
+
+<AdaptAutomation automationId="auto-123" theme={myTheme} style="height: 600px;" />
+```
+
+### 2. CSS custom properties
+
+Override `--mb-adapt-*` variables on `.mb-adapt` using `<style is:global>` in your layout or page, or import a CSS file in frontmatter.
+
+**Inline in a layout or page:**
+
+```astro
+<style is:global>
+  .mb-adapt {
+    --mb-adapt-fork-bg: #ffffff;
+    --mb-adapt-fork-tab-bg: #f5f5f5;
+    --mb-adapt-fork-tab-active-bg: #ffffff;
+    --mb-adapt-fork-tab-color: #1a1a1a;
+    --mb-adapt-fork-tab-inactive-color: #888;
+    --mb-adapt-fork-separator: #e0e0e0;
+    --mb-adapt-font: "Inter", sans-serif;
+  }
+
+  .mb-adapt--dark {
+    --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;
+  }
+</style>
+```
+
+**Or import a CSS file in frontmatter:**
+
+```astro
+---
+import '../styles/adapt-theme.css';
+---
+```
+
+```css
+/* src/styles/adapt-theme.css */
+
+.mb-adapt {
+  --mb-adapt-fork-bg: #ffffff;
+  --mb-adapt-fork-tab-bg: #f0f4ff;
+  --mb-adapt-fork-tab-active-bg: #ffffff;
+  --mb-adapt-fork-tab-color: #1e293b;
+  --mb-adapt-fork-tab-inactive-color: #64748b;
+  --mb-adapt-fork-separator: #cbd5e1;
+  --mb-adapt-separator-active: rgba(79, 70, 229, 0.5);
+  --mb-adapt-cap-background: #ffffff;
+  --mb-adapt-cap-border-color: #e2e8f0;
+  --mb-adapt-cap-color: #1e293b;
+  --mb-adapt-cap-spinner-color: #4f46e5;
+  --mb-adapt-status-card-bg: #ffffff;
+  --mb-adapt-status-card-border: #e2e8f0;
+  --mb-adapt-status-text: #334155;
+}
+
+.mb-adapt--dark {
+  --mb-adapt-fork-bg: #0f172a;
+  --mb-adapt-fork-tab-bg: #1e293b;
+  --mb-adapt-fork-tab-active-bg: #0f172a;
+  --mb-adapt-fork-tab-color: #f1f5f9;
+  --mb-adapt-fork-tab-inactive-color: #94a3b8;
+  --mb-adapt-fork-separator: #334155;
+  --mb-adapt-separator-active: rgba(129, 140, 248, 0.6);
+  --mb-adapt-cap-background: #1e293b;
+  --mb-adapt-cap-border-color: #334155;
+  --mb-adapt-cap-color: #f1f5f9;
+  --mb-adapt-cap-spinner-color: #818cf8;
+  --mb-adapt-status-card-bg: #1e293b;
+  --mb-adapt-status-card-border: #334155;
+  --mb-adapt-status-text: #e2e8f0;
+}
+```
+
+### 3. Direct CSS on internal classes
+
+There is no Shadow DOM -- all classes are in the light DOM, so you can target internal elements directly with `<style is:global>`.
+
+**Animated gradient toolbar:**
+
+```astro
+<style is:global>
+  @keyframes mb-gradient-shift {
+    0%   { background-position: 0% 50%; }
+    50%  { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  .mb-group-header {
+    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
+    background-size: 300% 300%;
+    animation: mb-gradient-shift 6s ease infinite;
+  }
+
+  .mb-group-header .mb-tab[data-active="true"] {
+    background: rgba(255, 255, 255, 0.25);
+    color: #ffffff;
+  }
+
+  .mb-group-header .mb-tab {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Dark mode variant */
+  .mb-adapt--dark .mb-group-header {
+    background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95, #1e1b4b);
+    background-size: 300% 300%;
+    animation: mb-gradient-shift 6s ease infinite;
+  }
+
+  .mb-adapt--dark .mb-group-header .mb-tab[data-active="true"] {
+    background: rgba(255, 255, 255, 0.15);
+    color: #e0e7ff;
+  }
+
+  .mb-adapt--dark .mb-group-header .mb-tab {
+    color: rgba(224, 231, 255, 0.6);
+  }
+</style>
+```
+
+#### Key internal classes
+
+| Class | Element |
+|---|---|
+| `.mb-adapt` | Root container |
+| `.mb-adapt--dark` | Dark mode modifier on root |
+| `.mb-group-header` | Toolbar / tab bar |
+| `.mb-tab` | Individual tab |
+| `.mb-tab[data-active="true"]` | Active tab |
+| `.mb-tab-label` | Tab label text |
+| `.mb-group-content` | Panel content area |
+| `.mb-group-header-actions` | Toolbar action buttons (close, pop-out) |
+| `.mb-layout-separator` | Resize handle between panels |
+| `.mb-split-leaf` | Individual panel leaf in a split layout |
+
+> **Tip:** The `class` prop styles the outer `<adapt-automation>` host element. Use `classNames` to add classes to the internal `.mb-adapt` structure.
+
+<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 |
+| `--mb-adapt-tab-radius` | `0` | | Tab border-radius (use `999px` for pill shape) |
+| `--mb-adapt-tab-shadow` | `none` | | Tab box-shadow |
+| `--mb-adapt-tab-active-shadow` | `none` | | Active tab box-shadow |
+| `--mb-adapt-tab-gap` | `0px` | | Tab margin (spacing between tabs) |
+| `--mb-adapt-tab-padding` | `0 14px` | | Tab padding |
+| `--mb-adapt-tab-font-size` | `13px` | | Tab label font size |
+| `--mb-adapt-toolbar-height` | `40px` | | Toolbar / tab bar height |
+| `--mb-adapt-toolbar-padding` | `0` | | Toolbar inner padding (standard CSS shorthand) |
+| `--mb-adapt-tab-min-width` | `100px` | | Tab minimum width |
+| `--mb-adapt-tab-spacing` | `6px` | | Gap between tab label and action buttons |
+
+### 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` | |
+
+### Z-index / stacking
+
+| Variable | Default | Description |
+|---|---|---|
+| `--mb-adapt-z-base` | `0` | Base z-index offset — added to all internal z-index values |
+
+Set `--mb-adapt-z-base` to shift all internal z-index values. Useful when embedding inside modals or drawers that have their own stacking context. Example: `--mb-adapt-z-base: 10000` lifts all layers by 10000.
+
+Internal stacking order from low to high: separators (1), resize handles (10), minimized tabs (100), floating panels (100000+), status/cap (200000), confirm dialog (300000), drop targets (999998), drag ghost (999999). All values are offset by `--mb-adapt-z-base`.
+
+</details>
+
+---
+
 ## Props
 
 | Prop | Type |
 |------|------|
-| `id` | `string` (required) |
+| `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 }` |
-| `forkDisplayMode` | `'side-by-side' \| 'dialog'` |
-| `sideBySideSplit` | `number` (0-100) |
-| `dialogBackdropClose` | `boolean` |
+| `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`) |
+| `persist` | `boolean \| PersistOptions` |
+| `text` | `StatusText` |
+| `theme` | `AdaptTheme` |
+| `classNames` | `{ root?: string; iframe?: string; statusMessage?: string; statusCard?: string }` |
 | `class` | `string` |
 | `style` | `string` |
 
 ## License
 
-ISC © mochabug AB
+ISC (c) mochabug AB

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-astro",
-  "version": "1.0.1-rc.3",
+  "version": "1.0.1-rc.30",
   "description": "Astro component for Adapt automation platform",
   "type": "module",
   "main": "./src/index.ts",
@@ -10,13 +10,23 @@
       "types": "./src/index.ts",
       "import": "./src/index.ts"
     },
-    "./Adapt.astro": "./src/Adapt.astro"
+    "./core": {
+      "types": "./src/core.ts",
+      "import": "./src/core.ts"
+    },
+    "./cap": {
+      "types": "./src/cap.ts",
+      "import": "./src/cap.ts"
+    },
+    "./AdaptAutomation.astro": "./src/AdaptAutomation.astro",
+    "./AdaptAutomationCore.astro": "./src/AdaptAutomationCore.astro",
+    "./AdaptCap.astro": "./src/AdaptCap.astro"
   },
   "files": [
     "src"
   ],
   "scripts": {
-    "build": "echo 'Astro component distributes source - no build needed'",
+    "build": "(cd ../web && npm run build) && echo 'Astro component distributes source - no build needed'",
     "sample": "npm run build && cd sample && npm install && npm run dev"
   },
   "keywords": [
@@ -28,9 +38,9 @@
   "author": "mochabug AB",
   "license": "ISC",
   "peerDependencies": {
-    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.1-rc.3"
+    "@mochabug/adapt-web": "^1.0.1-rc.28"
   }
 }

package/src/{Adapt.astro → AdaptAutomation.astro}

@@ -1,9 +1,9 @@
 ---
-import type { AdaptWebClientOptions, ForkDisplay } from "@mochabug/adapt-web";
+import type { AdaptWebClientOptions } from "@mochabug/adapt-web/core";
 
 export interface Props extends Pick<
   AdaptWebClientOptions,
-  | "id"
+  | "automationId"
   | "sessionToken"
   | "authToken"
   | "transmitter"
@@ -16,12 +16,21 @@ export interface Props extends Pick<
   | "forkDisplay"
   | "darkMode"
   | "autoResizing"
+  | "allowFloating"
+  | "allowDocking"
+  | "allowDialogDocking"
+  | "allowMinimize"
+  | "allowMaximize"
+  | "floatingAutoResize"
   | "onSession"
   | "onOutput"
   | "onForkActive"
+  | "onError"
   | "classNames"
   | "persist"
   | "text"
+  | "theme"
+  | "debug"
 > {
   /** CSS class name for the container */
   class?: string;
@@ -30,7 +39,7 @@ export interface Props extends Pick<
 }
 
 const {
-  id,
+  automationId,
   sessionToken,
   authToken,
   transmitter,
@@ -43,17 +52,24 @@ const {
   forkDisplay,
   darkMode = false,
   autoResizing = false,
+  allowFloating,
+  allowDocking,
+  allowDialogDocking,
+  allowMinimize,
+  allowMaximize,
+  floatingAutoResize = false,
   classNames,
   persist,
   text,
+  theme,
+  debug = false,
   class: className,
   style,
 } = Astro.props;
 
 const forkDisplayMode = forkDisplay?.mode ?? "side-by-side";
-const sideBySideSplit = forkDisplay?.mode === "side-by-side" ? (forkDisplay.split ?? 50) : 50;
-const dialogBackdropClose = forkDisplay?.mode === "dialog" && forkDisplay.backdropClose !== false;
-const dialogResizeToContent = forkDisplay?.mode === "dialog" && forkDisplay.resizeToContent !== false;
+const sideBySideSplit =
+  forkDisplay?.mode === "side-by-side" ? (forkDisplay.split ?? 50) : 50;
 
 const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
 ---
@@ -62,7 +78,7 @@ const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
   id={containerId}
   class={className}
   style={style}
-  automation-id={id}
+  automation-id={automationId}
   session-token={sessionToken}
   auth-token={authToken}
   transmitter={transmitter}
@@ -71,13 +87,20 @@ const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
   inherit-token={inheritToken}
   fork-display-mode={forkDisplayMode}
   side-by-side-split={String(sideBySideSplit)}
-  dialog-backdrop-close={dialogBackdropClose ? "" : undefined}
-  dialog-resize-to-content={dialogResizeToContent ? "" : undefined}
   dark-mode={darkMode ? "" : undefined}
   auto-resizing={autoResizing ? "" : undefined}
+  allow-floating={allowFloating === false ? "false" : undefined}
+  allow-docking={allowDocking === false ? "false" : undefined}
+  allow-dialog-docking={allowDialogDocking === false ? "false" : undefined}
+  allow-minimize={allowMinimize === false ? "false" : undefined}
+  allow-maximize={allowMaximize === false ? "false" : undefined}
+  floating-auto-resize={floatingAutoResize ? "" : undefined}
   persist={persist ? "" : undefined}
+  debug={debug ? "" : undefined}
   data-adapt-text={text ? JSON.stringify(text) : undefined}
-  data-adapt-persist-options={typeof persist === "object" ? JSON.stringify(persist) : undefined}
+  data-adapt-persist-options={typeof persist === "object"
+    ? JSON.stringify(persist)
+    : undefined}
   data-adapt-signals={signals ? JSON.stringify(signals) : undefined}
   data-adapt-cap-widget-options={capWidgetOptions
     ? JSON.stringify(capWidgetOptions)
@@ -86,14 +109,13 @@ const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
     ? JSON.stringify(inheritFrom)
     : undefined}
   data-adapt-class-names={classNames ? JSON.stringify(classNames) : undefined}
+  data-adapt-theme={theme ? JSON.stringify(theme) : undefined}
 >
 </adapt-automation>
 
 <script>
-  import { AdaptAutomationElement } from "@mochabug/adapt-web";
-
-  // Ensure custom element is registered
-  void AdaptAutomationElement;
+  import type { AdaptAutomationElement } from "@mochabug/adapt-web";
+  import "@mochabug/adapt-web";
 
   function initAll() {
     document
@@ -130,8 +152,13 @@ const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
           el.text = JSON.parse(textStr);
         }
 
-        // Dispatch events for callbacks (users can addEventListener on the element)
-        // onSession and onOutput are handled automatically via adapt-session and adapt-output CustomEvents
+        const themeStr = el.dataset.adaptTheme;
+        if (themeStr) {
+          el.theme = JSON.parse(themeStr);
+        }
+
+        // All properties set — explicitly initialize
+        el.initialize();
       });
   }
 

package/src/AdaptAutomationCore.astro

@@ -0,0 +1,160 @@
+---
+import type { AdaptWebClientOptions } from "@mochabug/adapt-web/core";
+
+export interface Props extends Pick<
+  AdaptWebClientOptions,
+  | "automationId"
+  | "sessionToken"
+  | "authToken"
+  | "transmitter"
+  | "signals"
+  | "challengeToken"
+  | "inheritToken"
+  | "inheritFrom"
+  | "forkDisplay"
+  | "darkMode"
+  | "autoResizing"
+  | "allowFloating"
+  | "allowDocking"
+  | "allowDialogDocking"
+  | "allowMinimize"
+  | "allowMaximize"
+  | "floatingAutoResize"
+  | "onSession"
+  | "onOutput"
+  | "onForkActive"
+  | "onError"
+  | "classNames"
+  | "persist"
+  | "text"
+  | "theme"
+  | "debug"
+> {
+  /** CSS class name for the container */
+  class?: string;
+  /** Inline styles for the container */
+  style?: string;
+}
+
+const {
+  automationId,
+  sessionToken,
+  authToken,
+  transmitter,
+  signals,
+  challengeToken,
+  inheritToken,
+  inheritFrom,
+  forkDisplay,
+  darkMode = false,
+  autoResizing = false,
+  allowFloating,
+  allowDocking,
+  allowDialogDocking,
+  allowMinimize,
+  allowMaximize,
+  floatingAutoResize = false,
+  classNames,
+  persist,
+  text,
+  theme,
+  debug = false,
+  class: className,
+  style,
+} = Astro.props;
+
+const forkDisplayMode = forkDisplay?.mode ?? "side-by-side";
+const sideBySideSplit =
+  forkDisplay?.mode === "side-by-side" ? (forkDisplay.split ?? 50) : 50;
+
+const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
+---
+
+<adapt-automation
+  id={containerId}
+  class={className}
+  style={style}
+  automation-id={automationId}
+  session-token={sessionToken}
+  auth-token={authToken}
+  transmitter={transmitter}
+  challenge-token={challengeToken}
+  inherit-token={inheritToken}
+  fork-display-mode={forkDisplayMode}
+  side-by-side-split={String(sideBySideSplit)}
+  dark-mode={darkMode ? "" : undefined}
+  auto-resizing={autoResizing ? "" : undefined}
+  allow-floating={allowFloating === false ? "false" : undefined}
+  allow-docking={allowDocking === false ? "false" : undefined}
+  allow-dialog-docking={allowDialogDocking === false ? "false" : undefined}
+  allow-minimize={allowMinimize === false ? "false" : undefined}
+  allow-maximize={allowMaximize === false ? "false" : undefined}
+  floating-auto-resize={floatingAutoResize ? "" : undefined}
+  persist={persist ? "" : undefined}
+  debug={debug ? "" : undefined}
+  data-adapt-text={text ? JSON.stringify(text) : undefined}
+  data-adapt-persist-options={typeof persist === "object"
+    ? JSON.stringify(persist)
+    : undefined}
+  data-adapt-signals={signals ? JSON.stringify(signals) : undefined}
+  data-adapt-inherit-from={inheritFrom
+    ? JSON.stringify(inheritFrom)
+    : undefined}
+  data-adapt-class-names={classNames ? JSON.stringify(classNames) : undefined}
+  data-adapt-theme={theme ? JSON.stringify(theme) : undefined}
+>
+</adapt-automation>
+
+<script>
+  import type { AdaptAutomationElement } from "@mochabug/adapt-web/core";
+  import "@mochabug/adapt-web/core";
+
+  function initAll() {
+    document
+      .querySelectorAll<AdaptAutomationElement>("adapt-automation")
+      .forEach((el) => {
+        // Set non-serializable properties from data attributes
+        const signalsStr = el.dataset.adaptSignals;
+        if (signalsStr) {
+          el.signals = JSON.parse(signalsStr);
+        }
+
+        const inheritFromStr = el.dataset.adaptInheritFrom;
+        if (inheritFromStr) {
+          el.inheritFrom = JSON.parse(inheritFromStr);
+        }
+
+        const classNamesStr = el.dataset.adaptClassNames;
+        if (classNamesStr) {
+          el.classNames = JSON.parse(classNamesStr);
+        }
+
+        const persistStr = el.dataset.adaptPersistOptions;
+        if (persistStr) {
+          el.persistOptions = JSON.parse(persistStr);
+        }
+
+        const textStr = el.dataset.adaptText;
+        if (textStr) {
+          el.text = JSON.parse(textStr);
+        }
+
+        const themeStr = el.dataset.adaptTheme;
+        if (themeStr) {
+          el.theme = JSON.parse(themeStr);
+        }
+
+        // All properties set — explicitly initialize
+        el.initialize();
+      });
+  }
+
+  // Initial load
+  initAll();
+
+  // Handle Astro View Transitions
+  document.addEventListener("astro:page-load", initAll);
+
+  // Cleanup before page swap (View Transitions)
+  // The custom element handles its own cleanup in disconnectedCallback
+</script>

package/src/AdaptCap.astro

@@ -1,5 +1,5 @@
 ---
-import type { CapWidgetI18n } from "@mochabug/adapt-web";
+import type { CapWidgetI18n } from "@mochabug/adapt-web/cap";
 
 export interface Props {
   /** Automation ID for challenge endpoints */
@@ -63,12 +63,10 @@ const containerId = `adapt-cap-${Math.random().toString(36).slice(2, 11)}`;
 </adapt-cap>
 
 <script>
-  import { AdaptCapElement } from "@mochabug/adapt-web";
+  import type { AdaptCapElement } from "@mochabug/adapt-web/cap";
+  import "@mochabug/adapt-web/cap";
   import type { AutomationClient } from "@mochabug/adapt-core";
 
-  // Ensure custom element is registered
-  void AdaptCapElement;
-
   function initAll() {
     document
       .querySelectorAll<AdaptCapElement>("adapt-cap")

package/src/cap.ts

@@ -0,0 +1,15 @@
+// Cap entry — Cap.js types and widget for Astro
+// For the Astro component, import AdaptCap.astro directly
+import "@mochabug/adapt-web/cap";
+export {
+  Cap as AdaptCapWidget,
+  type AdaptCapWidgetOptions,
+  createChallenge,
+  redeemChallenge,
+  AdaptCapElement,
+  createConnectClient,
+  type ChallengeInfo,
+  type RedeemedChallenge,
+  type CapWidgetI18n,
+  type CapWidgetOptions,
+} from "@mochabug/adapt-web/cap";

package/src/core.ts

@@ -0,0 +1,2 @@
+// Core entry — without Cap.js
+export * from "@mochabug/adapt-web/core";

package/src/index.ts

@@ -1,5 +1,23 @@
 // Import the component directly from the .astro file
-// Usage: import Adapt from '@mochabug/adapt-astro/Adapt.astro';
+// Usage: import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
 
 // Re-export everything from web (includes AdaptAutomationElement, AdaptCapElement)
 export * from "@mochabug/adapt-web";
+
+// Re-export types (export * doesn't re-export type-only exports with isolatedModules)
+export type {
+  AdaptError,
+  AdaptErrorKind,
+  AdaptTheme,
+  AdaptWebClientOptions,
+  CapWidgetI18n,
+  CapWidgetOptions,
+  ChallengeInfo,
+  ForkDisplay,
+  Output,
+  PersistOptions,
+  RedeemedChallenge,
+  SignalValue,
+  StatusJson,
+  StatusText,
+} from "@mochabug/adapt-web";