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

package/dist/esm/AdaptCap.js

@@ -0,0 +1,69 @@
+import { AdaptCapElement } from "@mochabug/adapt-web";
+import { defineComponent, h, ref, watchEffect, } from "vue";
+// Re-export for direct use
+export { AdaptCapWidget, } from "@mochabug/adapt-web";
+// Ensure custom element is registered
+void AdaptCapElement;
+/**
+ * Vue component for Cap.js proof-of-work challenges.
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
+ */
+export const AdaptCap = defineComponent({
+    name: "AdaptCap",
+    inheritAttrs: false,
+    props: {
+        automationId: {
+            type: String,
+            required: true,
+        },
+        client: {
+            type: Object,
+            required: true,
+        },
+        workerCount: {
+            type: Number,
+            default: undefined,
+        },
+        i18n: {
+            type: Object,
+            default: undefined,
+        },
+        darkMode: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: {
+        solve: (_token, _expires) => true,
+        error: (_error) => true,
+    },
+    setup(props, { emit, attrs }) {
+        const elementRef = ref(null);
+        const syncProperties = () => {
+            const el = elementRef.value;
+            if (!el)
+                return;
+            el.client = props.client;
+            el.i18n = props.i18n;
+            el.onSolveCallback = (token, expires) => {
+                emit("solve", token, expires);
+            };
+            el.onErrorCallback = (error) => {
+                emit("error", error);
+            };
+        };
+        watchEffect(() => {
+            syncProperties();
+        });
+        return () => h("adapt-cap", {
+            ref: elementRef,
+            "automation-id": props.automationId,
+            "dark-mode": props.darkMode ? "" : undefined,
+            "worker-count": props.workerCount !== undefined
+                ? String(props.workerCount)
+                : undefined,
+            ...attrs,
+        });
+    },
+});
+export default AdaptCap;

package/dist/esm/index.js

@@ -1,116 +1,143 @@
-import { AdaptWebClient, } from "@mochabug/adapt-web";
-import { defineComponent, h, onMounted, onUnmounted, ref, watch, } from "vue";
+import { AdaptAutomationElement, } from "@mochabug/adapt-web";
+import { defineComponent, h, ref, watchEffect } from "vue";
 // Re-export everything from web
 export * from "@mochabug/adapt-web";
+// Export standalone Cap widget component
+export { AdaptCap } from "./AdaptCap.js";
+// Ensure custom element is registered
+void AdaptAutomationElement;
 /**
  * Vue component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
 export const Adapt = defineComponent({
     name: "Adapt",
     inheritAttrs: false,
     props: {
-        /** Automation ID to connect to */
         id: {
             type: String,
             required: true,
         },
-        /** Pre-created session token from server-side session creation */
         sessionToken: {
             type: String,
             default: undefined,
         },
-        /** Authentication token for starting new sessions */
         authToken: {
             type: String,
             default: undefined,
         },
-        /** The transmitter to start from (optional) */
         transmitter: {
             type: String,
             default: undefined,
         },
-        /** Initial signals to pass to the transmitter */
         signals: {
             type: Object,
             default: undefined,
         },
-        /** Token to inherit an existing session */
         inheritToken: {
             type: String,
             default: undefined,
         },
-        /** Auto-parse inherit token from URL */
         inheritFrom: {
             type: Object,
             default: undefined,
         },
-        /** Fork display mode (default: 'side-by-side') */
-        forkDisplayMode: {
-            type: String,
-            default: "side-by-side",
+        forkDisplay: {
+            type: Object,
+            default: undefined,
         },
-        /** Split percentage for side-by-side mode, 0-100 (default: 50) */
-        sideBySideSplit: {
-            type: Number,
-            default: 50,
+        darkMode: {
+            type: Boolean,
+            default: false,
         },
-        /** Allow closing dialog via backdrop click (default: false) */
-        dialogBackdropClose: {
+        autoResizing: {
             type: Boolean,
             default: false,
         },
-        /** Custom CSS class names for internal elements */
         classNames: {
             type: Object,
             default: undefined,
         },
+        styles: {
+            type: Object,
+            default: undefined,
+        },
+        challengeToken: {
+            type: String,
+            default: undefined,
+        },
+        requiresChallenge: {
+            type: Boolean,
+            default: false,
+        },
+        capWidgetOptions: {
+            type: Object,
+            default: undefined,
+        },
+        persist: {
+            type: [Boolean, Object],
+            default: undefined,
+        },
     },
     emits: {
-        /** Emitted when session status changes */
         session: (_status, _fork) => true,
-        /** Emitted when automation produces output */
         output: (_output) => true,
+        forkActive: (_active) => true,
     },
     setup(props, { emit, attrs }) {
-        const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
-        const clientRef = ref(null);
-        const createClient = () => {
-            if (clientRef.value) {
-                clientRef.value.destroy();
-                clientRef.value = null;
-            }
-            clientRef.value = new AdaptWebClient({
-                container: containerId,
-                id: props.id,
-                sessionToken: props.sessionToken,
-                authToken: props.authToken,
-                transmitter: props.transmitter,
-                signals: props.signals,
-                inheritToken: props.inheritToken,
-                inheritFrom: props.inheritFrom,
-                forkDisplayMode: props.forkDisplayMode,
-                sideBySideSplit: props.sideBySideSplit,
-                dialogBackdropClose: props.dialogBackdropClose,
-                classNames: props.classNames,
-                onSession: (status, fork) => {
-                    emit("session", status, fork);
-                },
-                onOutput: (output) => {
-                    emit("output", output);
-                },
-            });
+        const elementRef = ref(null);
+        // Sync non-serializable properties when element is mounted
+        const syncProperties = () => {
+            const el = elementRef.value;
+            if (!el)
+                return;
+            el.signals = props.signals;
+            el.capWidgetOptions = props.capWidgetOptions;
+            el.inheritFrom = props.inheritFrom;
+            el.classNames = props.classNames;
+            el.styles = props.styles;
+            el.persistOptions =
+                typeof props.persist === "object" ? props.persist : undefined;
+            el.onSessionCallback = (status, fork) => {
+                emit("session", status, fork);
+            };
+            el.onOutputCallback = (output) => {
+                emit("output", output);
+            };
+            el.onForkActiveCallback = (active) => {
+                emit("forkActive", active);
+            };
         };
-        onMounted(() => {
-            createClient();
+        watchEffect(() => {
+            syncProperties();
         });
-        onUnmounted(() => {
-            if (clientRef.value) {
-                clientRef.value.destroy();
-                clientRef.value = null;
-            }
+        return () => h("adapt-automation", {
+            ref: elementRef,
+            "automation-id": props.id,
+            "session-token": props.sessionToken,
+            "auth-token": props.authToken,
+            transmitter: props.transmitter,
+            "challenge-token": props.challengeToken,
+            "requires-challenge": props.requiresChallenge ? "" : undefined,
+            "inherit-token": props.inheritToken,
+            "fork-display-mode": props.forkDisplay?.mode,
+            "side-by-side-split": props.forkDisplay?.mode === "side-by-side" &&
+                props.forkDisplay.split !== undefined
+                ? String(props.forkDisplay.split)
+                : undefined,
+            "dialog-backdrop-close": props.forkDisplay?.mode === "dialog" &&
+                props.forkDisplay.backdropClose !== false
+                ? ""
+                : undefined,
+            "dialog-resize-to-content": props.forkDisplay?.mode === "dialog" &&
+                props.forkDisplay.resizeToContent !== false
+                ? ""
+                : undefined,
+            "dark-mode": props.darkMode ? "" : undefined,
+            "auto-resizing": props.autoResizing ? "" : undefined,
+            persist: props.persist ? "" : undefined,
+            ...attrs,
         });
-        watch(() => props.id, createClient);
-        return () => h("div", { id: containerId, ...attrs });
     },
 });
 export default Adapt;

package/dist/types/AdaptCap.d.ts

@@ -0,0 +1,64 @@
+import type { AutomationClient } from "@mochabug/adapt-core";
+import { type CapWidgetI18n } from "@mochabug/adapt-web";
+import { type PropType } from "vue";
+export { AdaptCapWidget, type AdaptCapWidgetOptions, } from "@mochabug/adapt-web";
+/**
+ * Vue component for Cap.js proof-of-work challenges.
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
+ */
+export declare const AdaptCap: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    automationId: {
+        type: StringConstructor;
+        required: true;
+    };
+    client: {
+        type: PropType<AutomationClient>;
+        required: true;
+    };
+    workerCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    i18n: {
+        type: PropType<CapWidgetI18n>;
+        default: undefined;
+    };
+    darkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    solve: (_token: string, _expires: Date) => true;
+    error: (_error: Error) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    automationId: {
+        type: StringConstructor;
+        required: true;
+    };
+    client: {
+        type: PropType<AutomationClient>;
+        required: true;
+    };
+    workerCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    i18n: {
+        type: PropType<CapWidgetI18n>;
+        default: undefined;
+    };
+    darkMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSolve?: ((_token: string, _expires: Date) => any) | undefined;
+    onError?: ((_error: Error) => any) | undefined;
+}>, {
+    workerCount: number;
+    i18n: CapWidgetI18n;
+    darkMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default AdaptCap;

package/dist/types/index.d.ts

@@ -1,43 +1,38 @@
-import { type AdaptWebClientOptions, type Output, type SignalValue, type StatusJson } from "@mochabug/adapt-web";
+import { type AdaptWebClientOptions, type ForkDisplay, type Output, type PersistOptions, type SignalValue, type StatusJson } from "@mochabug/adapt-web";
 import { type PropType } from "vue";
 export * from "@mochabug/adapt-web";
+export { AdaptCap } from "./AdaptCap.js";
 /**
  * Vue component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
 export declare const Adapt: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /** Automation ID to connect to */
     id: {
         type: StringConstructor;
         required: true;
     };
-    /** Pre-created session token from server-side session creation */
     sessionToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Authentication token for starting new sessions */
     authToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** The transmitter to start from (optional) */
     transmitter: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Initial signals to pass to the transmitter */
     signals: {
         type: PropType<{
             [key: string]: SignalValue;
         }>;
         default: undefined;
     };
-    /** Token to inherit an existing session */
     inheritToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Auto-parse inherit token from URL */
     inheritFrom: {
         type: PropType<{
             hash: string;
@@ -46,67 +41,75 @@ export declare const Adapt: import("vue").DefineComponent<import("vue").ExtractP
         }>;
         default: undefined;
     };
-    /** Fork display mode (default: 'side-by-side') */
-    forkDisplayMode: {
-        type: PropType<"side-by-side" | "dialog">;
-        default: string;
+    forkDisplay: {
+        type: PropType<ForkDisplay>;
+        default: undefined;
     };
-    /** Split percentage for side-by-side mode, 0-100 (default: 50) */
-    sideBySideSplit: {
-        type: NumberConstructor;
-        default: number;
+    darkMode: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    /** Allow closing dialog via backdrop click (default: false) */
-    dialogBackdropClose: {
+    autoResizing: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Custom CSS class names for internal elements */
     classNames: {
         type: PropType<AdaptWebClientOptions["classNames"]>;
         default: undefined;
     };
+    styles: {
+        type: PropType<Partial<CSSStyleDeclaration>>;
+        default: undefined;
+    };
+    challengeToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    requiresChallenge: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    capWidgetOptions: {
+        type: PropType<AdaptWebClientOptions["capWidgetOptions"]>;
+        default: undefined;
+    };
+    persist: {
+        type: PropType<boolean | PersistOptions>;
+        default: undefined;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    /** Emitted when session status changes */
     session: (_status: StatusJson, _fork?: string) => true;
-    /** Emitted when automation produces output */
     output: (_output: Output) => true;
+    forkActive: (_active: boolean) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** Automation ID to connect to */
     id: {
         type: StringConstructor;
         required: true;
     };
-    /** Pre-created session token from server-side session creation */
     sessionToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Authentication token for starting new sessions */
     authToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** The transmitter to start from (optional) */
     transmitter: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Initial signals to pass to the transmitter */
     signals: {
         type: PropType<{
             [key: string]: SignalValue;
         }>;
         default: undefined;
     };
-    /** Token to inherit an existing session */
     inheritToken: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Auto-parse inherit token from URL */
     inheritFrom: {
         type: PropType<{
             hash: string;
@@ -115,30 +118,48 @@ export declare const Adapt: import("vue").DefineComponent<import("vue").ExtractP
         }>;
         default: undefined;
     };
-    /** Fork display mode (default: 'side-by-side') */
-    forkDisplayMode: {
-        type: PropType<"side-by-side" | "dialog">;
-        default: string;
+    forkDisplay: {
+        type: PropType<ForkDisplay>;
+        default: undefined;
     };
-    /** Split percentage for side-by-side mode, 0-100 (default: 50) */
-    sideBySideSplit: {
-        type: NumberConstructor;
-        default: number;
+    darkMode: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    /** Allow closing dialog via backdrop click (default: false) */
-    dialogBackdropClose: {
+    autoResizing: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Custom CSS class names for internal elements */
     classNames: {
         type: PropType<AdaptWebClientOptions["classNames"]>;
         default: undefined;
     };
+    styles: {
+        type: PropType<Partial<CSSStyleDeclaration>>;
+        default: undefined;
+    };
+    challengeToken: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    requiresChallenge: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    capWidgetOptions: {
+        type: PropType<AdaptWebClientOptions["capWidgetOptions"]>;
+        default: undefined;
+    };
+    persist: {
+        type: PropType<boolean | PersistOptions>;
+        default: undefined;
+    };
 }>> & Readonly<{
-    onSession?: ((_status: StatusJson, _fork?: string | undefined) => any) | undefined;
     onOutput?: ((_output: Output) => any) | undefined;
+    onSession?: ((_status: StatusJson, _fork?: string | undefined) => any) | undefined;
+    onForkActive?: ((_active: boolean) => any) | undefined;
 }>, {
+    darkMode: boolean;
     classNames: {
         root?: string;
         wrapper?: string;
@@ -152,7 +173,11 @@ export declare const Adapt: import("vue").DefineComponent<import("vue").ExtractP
         dialogClose?: string;
         dragHandle?: string;
         expandButton?: string;
+        toolbar?: string;
+        toolbarTitle?: string;
+        toolbarButton?: string;
     } | undefined;
+    capWidgetOptions: import("@mochabug/adapt-web").CapWidgetOptions | undefined;
     sessionToken: string;
     authToken: string;
     transmitter: string;
@@ -165,8 +190,11 @@ export declare const Adapt: import("vue").DefineComponent<import("vue").ExtractP
     } | {
         param: string;
     };
-    forkDisplayMode: "side-by-side" | "dialog";
-    sideBySideSplit: number;
-    dialogBackdropClose: boolean;
+    forkDisplay: ForkDisplay;
+    autoResizing: boolean;
+    styles: Partial<CSSStyleDeclaration>;
+    challengeToken: string;
+    requiresChallenge: boolean;
+    persist: boolean | PersistOptions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default Adapt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-vue",
-  "version": "1.0.0-rc3",
+  "version": "1.0.0-rc31",
   "description": "Vue component for Adapt automation platform",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -18,7 +18,7 @@
     "build:esm": "tsc --project tsconfig.esm.json",
     "build:types": "tsc --project tsconfig.types.json",
     "build": "rm -rf dist && npm run build:esm && npm run build:types",
-    "sample": "cd sample && npm run dev"
+    "sample": "npm run build && cd sample && npm run dev"
   },
   "keywords": [
     "adapt",
@@ -33,9 +33,9 @@
   },
   "devDependencies": {
     "typescript": "^5.9.3",
-    "vue": "^3.5.24"
+    "vue": "^3.5.29"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.0-rc24"
+    "@mochabug/adapt-web": "^1.0.0-rc54"
   }
 }