@mochabug/adapt-astro 1.0.0-rc3 → 1.0.0-rc31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-astro",
-  "version": "1.0.0-rc3",
+  "version": "1.0.0-rc31",
   "description": "Astro component for Adapt automation platform",
   "type": "module",
   "main": "./src/index.ts",
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "build": "echo 'Astro component distributes source - no build needed'",
-    "sample": "cd sample && npm install && npm run dev"
+    "sample": "npm run build && cd sample && npm install && npm run dev"
   },
   "keywords": [
     "adapt",
@@ -31,6 +31,6 @@
     "astro": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.0-rc24"
+    "@mochabug/adapt-web": "^1.0.0-rc54"
   }
 }

package/src/Adapt.astro

@@ -1,23 +1,27 @@
 ---
-import type { AdaptWebClientOptions } from "@mochabug/adapt-web";
-
-export interface Props
-  extends Pick<
-    AdaptWebClientOptions,
-    | "id"
-    | "sessionToken"
-    | "authToken"
-    | "transmitter"
-    | "signals"
-    | "inheritToken"
-    | "inheritFrom"
-    | "forkDisplayMode"
-    | "sideBySideSplit"
-    | "dialogBackdropClose"
-    | "onSession"
-    | "onOutput"
-    | "classNames"
-  > {
+import type { AdaptWebClientOptions, ForkDisplay } from "@mochabug/adapt-web";
+
+export interface Props extends Pick<
+  AdaptWebClientOptions,
+  | "id"
+  | "sessionToken"
+  | "authToken"
+  | "transmitter"
+  | "signals"
+  | "challengeToken"
+  | "requiresChallenge"
+  | "capWidgetOptions"
+  | "inheritToken"
+  | "inheritFrom"
+  | "forkDisplay"
+  | "darkMode"
+  | "autoResizing"
+  | "onSession"
+  | "onOutput"
+  | "onForkActive"
+  | "classNames"
+  | "persist"
+> {
   /** CSS class name for the container */
   class?: string;
   /** Inline styles for the container */
@@ -30,108 +34,105 @@ const {
   authToken,
   transmitter,
   signals,
+  challengeToken,
+  requiresChallenge = false,
+  capWidgetOptions,
   inheritToken,
   inheritFrom,
-  forkDisplayMode = "side-by-side",
-  sideBySideSplit = 50,
-  dialogBackdropClose = false,
-  onSession,
-  onOutput,
+  forkDisplay,
+  darkMode = false,
+  autoResizing = false,
   classNames,
+  persist,
   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 containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
 ---
 
-<div
+<adapt-automation
   id={containerId}
   class={className}
   style={style}
-  data-adapt-id={id}
-  data-adapt-session-token={sessionToken}
-  data-adapt-auth-token={authToken}
-  data-adapt-transmitter={transmitter}
+  automation-id={id}
+  session-token={sessionToken}
+  auth-token={authToken}
+  transmitter={transmitter}
+  challenge-token={challengeToken}
+  requires-challenge={requiresChallenge ? "" : undefined}
+  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}
+  persist={persist ? "" : undefined}
+  data-adapt-persist-options={typeof persist === "object" ? JSON.stringify(persist) : undefined}
   data-adapt-signals={signals ? JSON.stringify(signals) : undefined}
-  data-adapt-inherit-token={inheritToken}
-  data-adapt-inherit-from={inheritFrom ? JSON.stringify(inheritFrom) : undefined}
-  data-adapt-fork-display-mode={forkDisplayMode}
-  data-adapt-side-by-side-split={sideBySideSplit}
-  data-adapt-dialog-backdrop-close={dialogBackdropClose}
+  data-adapt-cap-widget-options={capWidgetOptions
+    ? JSON.stringify(capWidgetOptions)
+    : undefined}
+  data-adapt-inherit-from={inheritFrom
+    ? JSON.stringify(inheritFrom)
+    : undefined}
   data-adapt-class-names={classNames ? JSON.stringify(classNames) : undefined}
-></div>
+>
+</adapt-automation>
 
 <script>
-  import { AdaptWebClient } from "@mochabug/adapt-web";
-
-  function initAdapt(container: HTMLElement) {
-    const id = container.dataset.adaptId;
-    if (!id) return;
-
-    const inheritFromStr = container.dataset.adaptInheritFrom;
-    const classNamesStr = container.dataset.adaptClassNames;
-    const signalsStr = container.dataset.adaptSignals;
-
-    const client = new AdaptWebClient({
-      container: container.id,
-      id,
-      sessionToken: container.dataset.adaptSessionToken,
-      authToken: container.dataset.adaptAuthToken,
-      transmitter: container.dataset.adaptTransmitter,
-      signals: signalsStr ? JSON.parse(signalsStr) : undefined,
-      inheritToken: container.dataset.adaptInheritToken,
-      inheritFrom: inheritFromStr ? JSON.parse(inheritFromStr) : undefined,
-      forkDisplayMode: container.dataset.adaptForkDisplayMode as "side-by-side" | "dialog",
-      sideBySideSplit: Number(container.dataset.adaptSideBySideSplit) || 50,
-      dialogBackdropClose: container.dataset.adaptDialogBackdropClose === "true",
-      classNames: classNamesStr ? JSON.parse(classNamesStr) : undefined,
-      // onSession and onOutput callbacks can be attached via custom events:
-      // container.addEventListener('adapt:session', (e) => { ... })
-      // container.addEventListener('adapt:output', (e) => { ... })
-      onSession: (status, fork) => {
-        container.dispatchEvent(new CustomEvent('adapt:session', {
-          detail: { status, fork },
-          bubbles: true
-        }));
-      },
-      onOutput: (output) => {
-        container.dispatchEvent(new CustomEvent('adapt:output', {
-          detail: { output },
-          bubbles: true
-        }));
-      },
-    });
-
-    // Store reference for cleanup
-    (container as any).__adaptClient = client;
-  }
+  import { AdaptAutomationElement } from "@mochabug/adapt-web";
 
-  function cleanupAdapt(container: HTMLElement) {
-    const client = (container as any).__adaptClient;
-    if (client) {
-      client.destroy();
-      delete (container as any).__adaptClient;
-    }
-  }
+  // Ensure custom element is registered
+  void AdaptAutomationElement;
 
-  // Initialize all Adapt containers on page load
   function initAll() {
-    document.querySelectorAll<HTMLElement>("[data-adapt-id]").forEach((container) => {
-      if (!(container as any).__adaptClient) {
-        initAdapt(container);
-      }
-    });
+    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 capStr = el.dataset.adaptCapWidgetOptions;
+        if (capStr) {
+          el.capWidgetOptions = JSON.parse(capStr);
+        }
+
+        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);
+        }
+
+        // Dispatch events for callbacks (users can addEventListener on the element)
+        // onSession and onOutput are handled automatically via adapt-session and adapt-output CustomEvents
+      });
   }
 
   // Initial load
   initAll();
 
-  // Handle Astro View Transitions (page navigation without full reload)
+  // Handle Astro View Transitions
   document.addEventListener("astro:page-load", initAll);
 
   // Cleanup before page swap (View Transitions)
-  document.addEventListener("astro:before-swap", () => {
-    document.querySelectorAll<HTMLElement>("[data-adapt-id]").forEach(cleanupAdapt);
-  });
+  // The custom element handles its own cleanup in disconnectedCallback
 </script>

package/src/AdaptCap.astro

@@ -0,0 +1,96 @@
+---
+import type { CapWidgetI18n } from "@mochabug/adapt-web";
+
+export interface Props {
+  /** Automation ID for challenge endpoints */
+  automationId: string;
+  /** Number of workers for Cap.js */
+  workerCount?: number;
+  /** Custom labels for Cap.js widget */
+  i18n?: CapWidgetI18n;
+  /** Enable dark mode styling */
+  darkMode?: boolean;
+  /** CSS class name for the container */
+  class?: string;
+  /** Inline styles for the container */
+  style?: string;
+}
+
+const {
+  automationId,
+  workerCount,
+  i18n,
+  darkMode = false,
+  class: className,
+  style,
+} = Astro.props;
+
+const containerId = `adapt-cap-${Math.random().toString(36).slice(2, 11)}`;
+---
+
+<!--
+  AdaptCap Astro component for proof-of-work challenges.
+
+  Since the client object is only available at runtime, you must initialize it
+  via JavaScript after the element is in the DOM:
+
+  ```js
+  import { createConnectClient } from "@mochabug/adapt-core/connect";
+  import { AdaptCapElement } from "@mochabug/adapt-web";
+
+  const rawClient = createConnectClient({ id: "my-automation" });
+
+  // Find the element and set the client property
+  const capEl = document.querySelector('adapt-cap') as AdaptCapElement;
+  capEl.client = rawClient;
+
+  // Listen for solve event
+  capEl.addEventListener('adapt-cap-solve', (e) => {
+    const { token, expires } = (e as CustomEvent).detail;
+    // Use token with client.run({ challengeToken: token })
+  });
+  ```
+-->
+<adapt-cap
+  id={containerId}
+  class={className}
+  style={style}
+  automation-id={automationId}
+  dark-mode={darkMode ? "" : undefined}
+  worker-count={workerCount !== undefined ? String(workerCount) : undefined}
+  data-adapt-cap-i18n={i18n ? JSON.stringify(i18n) : undefined}
+>
+</adapt-cap>
+
+<script>
+  import { AdaptCapElement } from "@mochabug/adapt-web";
+  import type { AutomationClient } from "@mochabug/adapt-core";
+
+  // Ensure custom element is registered
+  void AdaptCapElement;
+
+  function initAll() {
+    document
+      .querySelectorAll<AdaptCapElement>("adapt-cap")
+      .forEach((el) => {
+        // Set i18n from data attribute if present
+        const i18nStr = el.dataset.adaptCapI18n;
+        if (i18nStr) {
+          el.i18n = JSON.parse(i18nStr);
+        }
+
+        // Listen for init event with client (legacy pattern for Astro)
+        el.addEventListener("adapt-cap:init", ((
+          e: CustomEvent<{ client: AutomationClient }>
+        ) => {
+          el.client = e.detail.client;
+        }) as EventListener);
+      });
+  }
+
+  // Initial setup
+  initAll();
+
+  // Handle Astro View Transitions
+  document.addEventListener("astro:page-load", initAll);
+</script>

package/src/index.ts

@@ -1,5 +1,5 @@
 // Import the component directly from the .astro file
 // Usage: import Adapt from '@mochabug/adapt-astro/Adapt.astro';
 
-// Re-export everything from web
+// Re-export everything from web (includes AdaptAutomationElement, AdaptCapElement)
 export * from "@mochabug/adapt-web";