create-eventus-app 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-eventus-app",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Scaffold an Eventus mini app.",
   "type": "module",
   "bin": {

package/template/README.md

@@ -15,6 +15,12 @@ pnpm dev
 - `pnpm build`: type-check and build the app
 - `pnpm preview`: preview the production build locally
 
+## Local Live Preview
+
+Run `pnpm dev`, open the app in your desktop browser, and scan the QR code from
+Eventus X using the `Developer` screen. Your phone and computer must be on the
+same local network for the live preview URL to be reachable.
+
 ## Eventus Files
 
 - `eventus.manifest.json`: base Eventus manifest consumed by the Vite plugin

package/template/src/App.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import manifest from "virtual:eventus-manifest";
 import {
   eventus,
+  getLivePreviewHtml,
+  isBridgeUnavailableError,
   type EventusContext,
   type EventusRuntimeSource,
 } from "@eventusgo/sdk";
@@ -9,13 +11,17 @@ import {
 type LoadState =
   | { status: "idle" | "loading" }
   | { status: "ready"; context: EventusContext }
+  | {
+      status: "bridge-unavailable";
+      previewHtml: string | null;
+    }
   | { status: "error"; message: string };
 
 export default function App() {
   const [state, setState] = useState<LoadState>({ status: "loading" });
-  const [runtimeSource, setRuntimeSource] = useState<EventusRuntimeSource | "loading">(
-    "loading",
-  );
+  const [runtimeSource, setRuntimeSource] = useState<
+    EventusRuntimeSource | "bridge-unavailable" | "loading"
+  >("loading");
 
   useEffect(() => {
     let cancelled = false;
@@ -41,10 +47,26 @@ export default function App() {
         const context = await eventus.getContext();
 
         if (!cancelled && !receivedReadyEvent) {
-          setRuntimeSource("mock");
+          setRuntimeSource(window.Eventus ? "native" : "mock");
           setState({ status: "ready", context });
         }
       } catch (error) {
+        if (receivedReadyEvent || cancelled) {
+          return;
+        }
+
+        if (isBridgeUnavailableError(error)) {
+          const previewHtml = await getLivePreviewHtml();
+          if (!cancelled && !receivedReadyEvent) {
+            setRuntimeSource("bridge-unavailable");
+            setState({
+              status: "bridge-unavailable",
+              previewHtml,
+            });
+          }
+          return;
+        }
+
         if (!cancelled) {
           setState({
             status: "error",
@@ -68,8 +90,10 @@ export default function App() {
     runtimeSource === "native"
       ? "Native bridge detected"
       : runtimeSource === "mock"
-        ? "Browser mock mode active"
-        : "Detecting runtime…";
+        ? "Explicit mock mode active"
+        : runtimeSource === "bridge-unavailable"
+          ? "Open this mini app inside Eventus X"
+          : "Detecting runtime…";
 
   return (
     <main className="app-shell">
@@ -77,7 +101,8 @@ export default function App() {
         <p className="eyebrow">Eventus Mini App Toolkit</p>
         <h1>{manifest.name}</h1>
         <p className="subtitle">
-          App ID <code>{manifest.appId}</code> · Version <code>{manifest.version}</code>
+          App ID <code>{manifest.appId}</code> · Version{" "}
+          <code>{manifest.version}</code>
         </p>
 
         <div className="status-banner">{runtimeLabel}</div>
@@ -90,6 +115,25 @@ export default function App() {
           <p className="error-text">{state.message}</p>
         ) : null}
 
+        {state.status === "bridge-unavailable" ? (
+          state.previewHtml ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: state.previewHtml,
+              }}
+            />
+          ) : (
+            <div className="handoff-panel">
+              <h2>Open inside Eventus X</h2>
+              <p>
+                This mini app needs the Eventus bridge to access the real
+                runtime. Open it from Eventus X to test it with production-like
+                behavior.
+              </p>
+            </div>
+          )
+        ) : null}
+
         {state.status === "ready" ? (
           <dl className="details-grid">
             <div>
@@ -102,7 +146,11 @@ export default function App() {
             </div>
             <div>
               <dt>User</dt>
-              <dd>{state.context.user?.name ?? state.context.user?.id ?? "Anonymous"}</dd>
+              <dd>
+                {state.context.user?.name ??
+                  state.context.user?.id ??
+                  "Anonymous"}
+              </dd>
             </div>
             <div>
               <dt>Manifest Permissions</dt>

package/template/src/styles.css

@@ -1,8 +1,12 @@
 :root {
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
   color: #102347;
-  background:
-    radial-gradient(circle at top, #d8f2ff 0%, #f3f9ff 35%, #eef3ff 100%);
+  background: radial-gradient(
+    circle at top,
+    #d8f2ff 0%,
+    #f3f9ff 35%,
+    #eef3ff 100%
+  );
   line-height: 1.5;
   font-weight: 400;
 }
@@ -67,6 +71,12 @@ h1 {
   font-weight: 600;
 }
 
+.handoff-panel {
+  margin: 24px 0;
+  display: grid;
+  gap: 20px;
+}
+
 .details-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -111,4 +121,8 @@ dd {
   .card {
     padding: 24px;
   }
+
+  .handoff-panel {
+    grid-template-columns: 1fr;
+  }
 }