@jskit-ai/google-rewarded-web 0.1.1

package/README.md

@@ -0,0 +1,65 @@
+# @jskit-ai/google-rewarded-web
+
+Client runtime package for Google rewarded unlock gates.
+
+## What It Installs
+
+This package installs:
+
+- a client provider that mounts the rewarded gate host once
+- a runtime token: `google-rewarded.web.runtime`
+- a composable: `useGoogleRewardedRuntime()`
+
+The gate host is mounted from the provider and does not depend on placements or page-level route hacks.
+
+## Runtime API
+
+App feature code should not talk to GPT directly.
+
+Use the runtime:
+
+```js
+const rewarded = useGoogleRewardedRuntime();
+
+const result = await rewarded.requireUnlock({
+  gateKey: "progress-logging",
+  workspaceSlug
+});
+```
+
+`requireUnlock()` resolves in four normal cases:
+
+- already unlocked
+- reward granted
+- user closed the ad without reward
+- provider unavailable / load failure
+
+The runtime opens a fullscreen prompt first, then starts the rewarded ad flow only after the user opts in.
+
+Day 0 is intentionally app-surface-only. The runtime does not accept a caller-provided surface override.
+
+## Google Integration
+
+Day 0 is Google-only and uses GPT rewarded ads for web.
+
+The runtime relies on the rewarded slot lifecycle around:
+
+- `rewardedSlotReady`
+- `rewardedSlotGranted`
+- `rewardedSlotClosed`
+
+`rewardedSlotGranted` is the authoritative unlock trigger. The runtime then calls the server `grant` endpoint before resolving the gate as granted.
+
+## Failure Behavior
+
+If Google cannot provide a rewarded slot:
+
+- the gate stays unresolved
+- the runtime enters an error phase
+- dismissing the error closes the started watch session through the server `close` endpoint
+
+This keeps the session lifecycle explicit instead of leaving abandoned started rows behind.
+
+## Dependency
+
+This package expects `@jskit-ai/google-rewarded-core` to be installed as well.

package/package.descriptor.mjs

@@ -0,0 +1,66 @@
+export default Object.freeze({
+  packageVersion: 1,
+  packageId: "@jskit-ai/google-rewarded-web",
+  version: "0.1.1",
+  kind: "runtime",
+  description: "Google rewarded client runtime with a fullscreen gate host and GPT orchestration.",
+  dependsOn: [
+    "@jskit-ai/google-rewarded-core",
+    "@jskit-ai/http-runtime",
+    "@jskit-ai/kernel",
+    "@jskit-ai/shell-web"
+  ],
+  capabilities: {
+    provides: ["google-rewarded.web"],
+    requires: []
+  },
+  runtime: {
+    server: {
+      providers: []
+    },
+    client: {
+      providers: [
+        {
+          entrypoint: "src/client/providers/GoogleRewardedClientProvider.js",
+          export: "GoogleRewardedClientProvider"
+        }
+      ]
+    }
+  },
+  metadata: {
+    apiSummary: {
+      surfaces: [
+        {
+          subpath: "./client",
+          summary: "Exports the Google rewarded client provider, runtime composable, and fullscreen gate host."
+        }
+      ],
+      containerTokens: {
+        server: [],
+        client: [
+          "google-rewarded.web.runtime"
+        ]
+      }
+    }
+  },
+  mutations: {
+    dependencies: {
+      runtime: {
+        "@jskit-ai/google-rewarded-core": "0.1.1",
+        "@jskit-ai/http-runtime": "0.1.63",
+        "@jskit-ai/kernel": "0.1.64",
+        "@jskit-ai/shell-web": "0.1.63"
+      },
+      dev: {}
+    },
+    packageJson: {
+      scripts: {}
+    },
+    procfile: {},
+    vite: {
+      proxy: []
+    },
+    text: [],
+    files: []
+  }
+});

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@jskit-ai/google-rewarded-web",
+  "version": "0.1.1",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./client": "./src/client/index.js",
+    "./server": "./src/server/index.js",
+    "./shared": "./src/shared/index.js"
+  }
+}

package/src/client/components/GoogleRewardedGateHost.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { computed } from "vue";
+import { useGoogleRewardedRuntime } from "../composables/useGoogleRewardedRuntime.js";
+
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: false,
+    default: null
+  }
+});
+
+const runtime = computed(() => props.runtime || useGoogleRewardedRuntime());
+const state = computed(() => runtime.value?.state || null);
+const isVisible = computed(() => {
+  const currentState = state.value;
+  return currentState?.open === true && currentState?.phase !== "showing-ad";
+});
+const titleText = computed(() => state.value?.gateState?.rule?.title || "Watch an ad to continue");
+const descriptionText = computed(() =>
+  state.value?.gateState?.rule?.description ||
+  "Watch a rewarded ad to unlock this action."
+);
+
+function handleWatchClick() {
+  runtime.value?.beginWatch?.();
+}
+
+function handleCancelClick() {
+  runtime.value?.cancelPrompt?.();
+}
+
+function handleDismissError() {
+  runtime.value?.dismissError?.();
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible" class="google-rewarded-gate">
+      <div class="google-rewarded-gate__scrim" />
+      <div class="google-rewarded-gate__panel">
+        <div class="google-rewarded-gate__eyebrow">Rewarded unlock</div>
+        <h2 class="google-rewarded-gate__title">{{ titleText }}</h2>
+        <p class="google-rewarded-gate__description">{{ descriptionText }}</p>
+
+        <p
+          v-if="state?.phase === 'loading'"
+          class="google-rewarded-gate__status"
+        >
+          Loading Google rewarded ad…
+        </p>
+
+        <p
+          v-else-if="state?.phase === 'error'"
+          class="google-rewarded-gate__status google-rewarded-gate__status--error"
+        >
+          {{ state?.errorMessage || "Unable to start the rewarded ad." }}
+        </p>
+
+        <div class="google-rewarded-gate__actions">
+          <button
+            v-if="state?.phase === 'prompt'"
+            type="button"
+            class="google-rewarded-gate__button google-rewarded-gate__button--primary"
+            @click="handleWatchClick"
+          >
+            Watch ad
+          </button>
+
+          <button
+            v-if="state?.phase === 'prompt'"
+            type="button"
+            class="google-rewarded-gate__button"
+            @click="handleCancelClick"
+          >
+            Not now
+          </button>
+
+          <button
+            v-if="state?.phase === 'error'"
+            type="button"
+            class="google-rewarded-gate__button google-rewarded-gate__button--primary"
+            @click="handleDismissError"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.google-rewarded-gate {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.google-rewarded-gate__scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.94));
+  backdrop-filter: blur(4px);
+}
+
+.google-rewarded-gate__panel {
+  position: relative;
+  width: min(32rem, calc(100vw - 2rem));
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  background: #fffaf0;
+  color: #201510;
+  box-shadow: 0 2rem 5rem rgba(15, 23, 42, 0.35);
+}
+
+.google-rewarded-gate__eyebrow {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #9a3412;
+}
+
+.google-rewarded-gate__title {
+  margin: 0.5rem 0 0;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.google-rewarded-gate__description {
+  margin: 0.75rem 0 0;
+  line-height: 1.5;
+  color: #5b4636;
+}
+
+.google-rewarded-gate__status {
+  margin: 1rem 0 0;
+  font-size: 0.95rem;
+  color: #854d0e;
+}
+
+.google-rewarded-gate__status--error {
+  color: #991b1b;
+}
+
+.google-rewarded-gate__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.google-rewarded-gate__button {
+  appearance: none;
+  border: 1px solid #d6d3d1;
+  border-radius: 999px;
+  padding: 0.8rem 1.2rem;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.google-rewarded-gate__button--primary {
+  border-color: transparent;
+  background: #ea580c;
+  color: #fff;
+}
+
+@media (max-width: 640px) {
+  .google-rewarded-gate__actions {
+    flex-direction: column;
+  }
+
+  .google-rewarded-gate__button {
+    width: 100%;
+  }
+}
+</style>

package/src/client/composables/useGoogleRewardedRuntime.js

@@ -0,0 +1,8 @@
+import { inject } from "vue";
+import { GOOGLE_REWARDED_RUNTIME_INJECTION_KEY } from "../runtime/googleRewardedRuntime.js";
+
+function useGoogleRewardedRuntime() {
+  return inject(GOOGLE_REWARDED_RUNTIME_INJECTION_KEY, null);
+}
+
+export { useGoogleRewardedRuntime };

package/src/client/index.js

@@ -0,0 +1,7 @@
+export { GoogleRewardedClientProvider } from "./providers/GoogleRewardedClientProvider.js";
+export { default as GoogleRewardedGateHost } from "./components/GoogleRewardedGateHost.vue";
+export {
+  GOOGLE_REWARDED_RUNTIME_INJECTION_KEY,
+  createGoogleRewardedRuntime
+} from "./runtime/googleRewardedRuntime.js";
+export { useGoogleRewardedRuntime } from "./composables/useGoogleRewardedRuntime.js";

package/src/client/providers/GoogleRewardedClientProvider.js

@@ -0,0 +1,59 @@
+import { h, render } from "vue";
+import GoogleRewardedGateHost from "../components/GoogleRewardedGateHost.vue";
+import {
+  GOOGLE_REWARDED_RUNTIME_INJECTION_KEY,
+  createGoogleRewardedRuntime
+} from "../runtime/googleRewardedRuntime.js";
+
+class GoogleRewardedClientProvider {
+  static id = "google-rewarded.web.client";
+
+  static dependsOn = ["shell.web.client"];
+
+  register(app) {
+    if (!app || typeof app.singleton !== "function") {
+      throw new Error("GoogleRewardedClientProvider requires application singleton().");
+    }
+
+    app.singleton("google-rewarded.web.runtime", () => createGoogleRewardedRuntime());
+  }
+
+  async boot(app) {
+    if (!app || typeof app.make !== "function" || typeof app.has !== "function") {
+      throw new Error("GoogleRewardedClientProvider boot requires application make()/has().");
+    }
+
+    if (!app.has("jskit.client.vue.app") || typeof document === "undefined") {
+      return;
+    }
+
+    const vueApp = app.make("jskit.client.vue.app");
+    const runtime = app.make("google-rewarded.web.runtime");
+
+    if (vueApp && typeof vueApp.provide === "function") {
+      vueApp.provide(GOOGLE_REWARDED_RUNTIME_INJECTION_KEY, runtime);
+    }
+
+    this.hostContainer = document.createElement("div");
+    this.hostContainer.dataset.jskitGoogleRewardedHost = "true";
+    document.body.appendChild(this.hostContainer);
+
+    const vnode = h(GoogleRewardedGateHost, {
+      runtime
+    });
+    vnode.appContext = vueApp?._context || null;
+    render(vnode, this.hostContainer);
+  }
+
+  shutdown() {
+    if (!this.hostContainer) {
+      return;
+    }
+
+    render(null, this.hostContainer);
+    this.hostContainer.remove();
+    this.hostContainer = null;
+  }
+}
+
+export { GoogleRewardedClientProvider };