create-eventus-app 0.1.2 → 0.1.4

package/package.json

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

package/template/package.json

@@ -10,12 +10,10 @@
   },
   "dependencies": {
     "@eventusgo/sdk": "__EVENTUS_SDK_VERSION__",
-    "qrcode": "1.5.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@types/qrcode": "1.5.5",
     "@eventusgo/vite-plugin": "__EVENTUS_VITE_PLUGIN_VERSION__",
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",

package/template/src/App.tsx

@@ -1,253 +1,66 @@
-import { useEffect, useState } from "react";
 import manifest from "virtual:eventus-manifest";
-import QRCode from "qrcode";
 import {
-  eventus,
-  type EventusContext,
-  type EventusRuntimeSource,
-} from "@eventusgo/sdk";
-import {
-  fetchDevPreviewDescriptor,
-  isBridgeUnavailableError,
-  type EventusDevPreviewDescriptor,
-} from "./dev-preview";
+  EventusContextProvider,
+  useEventusContext,
+} from "@eventusgo/sdk/react";
 
-type LoadState =
-  | { status: "idle" | "loading" }
-  | { status: "ready"; context: EventusContext }
-  | {
-      status: "bridge-unavailable";
-      preview: EventusDevPreviewDescriptor | null;
-    }
-  | { status: "error"; message: string };
+import logoDark from "./assets/logo_black_transparent.png";
+import logoLight from "./assets/logo_white_transparent.png";
 
 export default function App() {
-  const [state, setState] = useState<LoadState>({ status: "loading" });
-  const [runtimeSource, setRuntimeSource] = useState<
-    EventusRuntimeSource | "bridge-unavailable" | "loading"
-  >("loading");
-
-  useEffect(() => {
-    let cancelled = false;
-    let receivedReadyEvent = false;
-
-    const unsubscribeReady = eventus.on("ready", ({ context, source }) => {
-      receivedReadyEvent = true;
-      if (!cancelled) {
-        setRuntimeSource(source);
-        setState({ status: "ready", context });
-      }
-    });
-
-    const unsubscribe = eventus.on("themeChange", ({ context }) => {
-      if (!cancelled) {
-        setState({ status: "ready", context });
-      }
-    });
-
-    void (async () => {
-      try {
-        await eventus.ready();
-        const context = await eventus.getContext();
-
-        if (!cancelled && !receivedReadyEvent) {
-          setRuntimeSource(window.Eventus ? "native" : "mock");
-          setState({ status: "ready", context });
-        }
-      } catch (error) {
-        if (receivedReadyEvent || cancelled) {
-          return;
-        }
-
-        if (isBridgeUnavailableError(error)) {
-          const preview = await fetchDevPreviewDescriptor();
-          if (!cancelled && !receivedReadyEvent) {
-            setRuntimeSource("bridge-unavailable");
-            setState({
-              status: "bridge-unavailable",
-              preview,
-            });
-          }
-          return;
-        }
-
-        if (!cancelled) {
-          setState({
-            status: "error",
-            message:
-              error instanceof Error
-                ? error.message
-                : "Unable to initialize the Eventus client.",
-          });
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-      unsubscribeReady();
-      unsubscribe();
-    };
-  }, []);
-
-  const runtimeLabel =
-    runtimeSource === "native"
-      ? "Native bridge detected"
-      : runtimeSource === "mock"
-        ? "Explicit mock mode active"
-        : runtimeSource === "bridge-unavailable"
-          ? "Open this mini app inside Eventus X"
-        : "Detecting runtime…";
-
   return (
-    <main className="app-shell">
-      <section className="card">
-        <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>
-        </p>
-
-        <div className="status-banner">{runtimeLabel}</div>
-
-        {state.status === "loading" ? (
-          <p>Connecting to the Eventus client…</p>
-        ) : null}
-
-        {state.status === "error" ? (
-          <p className="error-text">{state.message}</p>
-        ) : null}
-
-        {state.status === "bridge-unavailable" ? (
-          <DeveloperHandoff preview={state.preview} />
-        ) : null}
-
-        {state.status === "ready" ? (
-          <dl className="details-grid">
-            <div>
-              <dt>Theme</dt>
-              <dd>{state.context.theme}</dd>
-            </div>
-            <div>
-              <dt>Locale</dt>
-              <dd>{state.context.locale}</dd>
-            </div>
-            <div>
-              <dt>User</dt>
-              <dd>{state.context.user?.name ?? state.context.user?.id ?? "Anonymous"}</dd>
-            </div>
-            <div>
-              <dt>Manifest Permissions</dt>
-              <dd>{manifest.permissions?.join(", ") ?? "None"}</dd>
-            </div>
-          </dl>
-        ) : null}
-
-        {state.status === "ready" ? (
-          <pre className="context-preview">
-            {JSON.stringify(state.context, null, 2)}
-          </pre>
-        ) : null}
-      </section>
-    </main>
+    <EventusContextProvider>
+      <WelcomeScreen />
+    </EventusContextProvider>
   );
 }
 
-function DeveloperHandoff({
-  preview,
-}: {
-  preview: EventusDevPreviewDescriptor | null;
-}) {
-  if (!preview) {
-    return (
-      <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>
-    );
-  }
+function WelcomeScreen() {
+  const { context, runtimeSource } = useEventusContext();
+  const userName =
+    context.user?.name ??
+    context.user?.displayName ??
+    context.user?.id ??
+    "there";
+  const logo = context.theme === "dark" ? logoLight : logoDark;
+  const runtimeLabel =
+    runtimeSource === "native" ? "Connected to Eventus X" : "Mock preview";
 
   return (
-    <div className="handoff-panel">
-      <div className="handoff-copy">
-        <h2>Live preview from your phone</h2>
-        <p>
-          Open Eventus X, go to <strong>Developer</strong>, and scan this QR
-          code to launch the mini app with the real Eventus bridge.
-        </p>
-        <dl className="preview-grid">
-          <div>
-            <dt>Preview URL</dt>
-            <dd>
-              <code>{preview.urls.preview}</code>
-            </dd>
+    <main className="welcome-shell">
+      <section className={`welcome-card theme-${context.theme}`}>
+        <div className="welcome-glow welcome-glow-primary" />
+        <div className="welcome-glow welcome-glow-secondary" />
+
+        <div className="welcome-brand">
+          <img src={logo} alt="Eventus" className="welcome-logo" />
+          <span className="welcome-badge">{runtimeLabel}</span>
+        </div>
+
+        <div className="welcome-copy">
+          <p className="welcome-eyebrow">{manifest.name}</p>
+          <h1>Welcome back, {userName}</h1>
+          <p className="welcome-subtitle">
+            Your mini app is ready inside Eventus. Start building a polished
+            experience for real users with the live bridge, theme, and locale.
+          </p>
+        </div>
+
+        <div className="welcome-chips">
+          <div className="welcome-chip">
+            <span>Theme</span>
+            <strong>{context.theme}</strong>
           </div>
-          <div>
-            <dt>Local URL</dt>
-            <dd>
-              <code>{preview.urls.local}</code>
-            </dd>
+          <div className="welcome-chip">
+            <span>Locale</span>
+            <strong>{context.locale}</strong>
           </div>
-          {preview.urls.network ? (
-            <div>
-              <dt>Network URL</dt>
-              <dd>
-                <code>{preview.urls.network}</code>
-              </dd>
-            </div>
-          ) : null}
-          <div>
-            <dt>Permissions</dt>
-            <dd>{preview.manifest.permissions?.join(", ") ?? "None"}</dd>
+          <div className="welcome-chip">
+            <span>App ID</span>
+            <strong>{manifest.appId}</strong>
           </div>
-        </dl>
-        <p className="hint-text">
-          Your phone and computer must be on the same local network.
-        </p>
-      </div>
-      <QrPanel payload={preview} />
-    </div>
-  );
-}
-
-function QrPanel({
-  payload,
-}: {
-  payload: EventusDevPreviewDescriptor;
-}) {
-  const [svg, setSvg] = useState("");
-
-  useEffect(() => {
-    let cancelled = false;
-
-    void (async () => {
-      const nextSvg = await QRCode.toString(JSON.stringify(payload), {
-        type: "svg",
-        width: 220,
-        margin: 1,
-      });
-      if (!cancelled) {
-        setSvg(nextSvg);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [payload]);
-
-  return (
-    <div className="qr-panel">
-      <div
-        className="qr-code"
-        aria-label="Eventus live preview QR code"
-        dangerouslySetInnerHTML={{
-          __html: svg || "<div class='qr-placeholder'>Generating QR…</div>",
-        }}
-      />
-    </div>
+        </div>
+      </section>
+    </main>
   );
 }

package/template/src/styles.css

@@ -2,7 +2,17 @@
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
   color: #102347;
   background:
-    radial-gradient(circle at top, #d8f2ff 0%, #f3f9ff 35%, #eef3ff 100%);
+    radial-gradient(
+      circle at top left,
+      rgba(97, 180, 255, 0.28),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 82% 18%,
+      rgba(58, 115, 255, 0.16),
+      transparent 26%
+    ),
+    linear-gradient(180deg, #e9f5ff 0%, #eef3ff 44%, #f8fbff 100%);
   line-height: 1.5;
   font-weight: 400;
 }
@@ -22,174 +32,162 @@ pre {
   font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
 }
 
-.app-shell {
+.welcome-shell {
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 24px;
 }
 
-.card {
-  width: min(720px, 100%);
+.welcome-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  width: min(760px, 100%);
   padding: 32px;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.84);
+  border-radius: 32px;
   border: 1px solid rgba(16, 35, 71, 0.08);
-  box-shadow: 0 24px 80px rgba(38, 73, 134, 0.14);
-  backdrop-filter: blur(16px);
+  box-shadow: 0 24px 80px rgba(38, 73, 134, 0.16);
+  backdrop-filter: blur(18px);
 }
 
-.eyebrow {
-  margin: 0 0 8px;
-  font-size: 0.85rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: #3f6ea8;
-}
-
-h1 {
-  margin: 0;
-  font-size: clamp(2rem, 4vw, 3rem);
+.theme-light {
+  background: rgba(255, 255, 255, 0.86);
+  color: #102347;
 }
 
-.subtitle {
-  margin: 12px 0 0;
-  color: #465d82;
+.theme-dark {
+  background: rgba(10, 24, 54, 0.9);
+  color: #f2f6ff;
+  border-color: rgba(182, 211, 255, 0.12);
+  box-shadow: 0 28px 96px rgba(6, 14, 30, 0.42);
 }
 
-.status-banner {
-  margin: 24px 0;
-  display: inline-flex;
-  padding: 8px 12px;
+.welcome-glow {
+  position: absolute;
   border-radius: 999px;
-  background: #eef6ff;
-  color: #22548d;
-  font-weight: 600;
+  filter: blur(12px);
+  opacity: 0.85;
+  pointer-events: none;
+  z-index: -1;
 }
 
-.handoff-panel {
-  margin: 24px 0;
-  display: grid;
-  gap: 20px;
+.welcome-glow-primary {
+  top: -80px;
+  right: -40px;
+  width: 220px;
+  height: 220px;
+  background: rgba(84, 169, 255, 0.24);
 }
 
-.handoff-copy h2 {
-  margin: 0 0 8px;
-  font-size: 1.5rem;
-}
-
-.handoff-copy p {
-  margin: 0;
-  color: #465d82;
+.welcome-glow-secondary {
+  bottom: -90px;
+  left: -80px;
+  width: 260px;
+  height: 260px;
+  background: rgba(0, 229, 214, 0.16);
 }
 
-.preview-grid {
-  margin: 20px 0 0;
-  display: grid;
-  gap: 12px;
-}
-
-.preview-grid div {
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: #f8fbff;
-  border: 1px solid rgba(16, 35, 71, 0.08);
+.welcome-brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
 }
 
-.preview-grid code {
-  word-break: break-all;
+.welcome-logo {
+  height: 34px;
+  width: auto;
 }
 
-.hint-text {
-  margin-top: 16px;
-  font-size: 0.95rem;
+.welcome-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: rgba(82, 137, 255, 0.12);
+  color: inherit;
 }
 
-.qr-panel {
-  display: grid;
-  place-items: center;
-  padding: 20px;
-  border-radius: 24px;
-  background: linear-gradient(180deg, #fefefe 0%, #f3f7ff 100%);
-  border: 1px solid rgba(16, 35, 71, 0.08);
+.welcome-copy {
+  margin-top: 32px;
+  max-width: 560px;
 }
 
-.qr-code {
-  width: min(260px, 100%);
-  aspect-ratio: 1;
-  display: grid;
-  place-items: center;
+.welcome-eyebrow {
+  margin: 0 0 10px;
+  font-size: 0.82rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: inherit;
+  opacity: 0.7;
 }
 
-.qr-code svg {
-  width: 100%;
-  height: auto;
+h1 {
+  margin: 0;
+  font-size: clamp(2.4rem, 5vw, 4.4rem);
+  line-height: 0.96;
+  letter-spacing: -0.04em;
 }
 
-.qr-placeholder {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 20px;
-  background: #eef6ff;
-  color: #22548d;
-  font-weight: 600;
+.welcome-subtitle {
+  margin: 18px 0 0;
+  font-size: 1.05rem;
+  line-height: 1.75;
+  opacity: 0.82;
 }
 
-.details-grid {
+.welcome-chips {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
-  margin: 24px 0;
+  margin-top: 28px;
 }
 
-.details-grid div {
-  padding: 16px;
-  border-radius: 16px;
-  background: #f8fbff;
+.welcome-chip {
+  padding: 16px 18px;
+  border-radius: 20px;
   border: 1px solid rgba(16, 35, 71, 0.08);
+  background: rgba(255, 255, 255, 0.36);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
 }
 
-dt {
-  margin-bottom: 6px;
-  font-size: 0.85rem;
-  color: #6880a6;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+.theme-dark .welcome-chip {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(182, 211, 255, 0.12);
+  box-shadow: none;
 }
 
-dd {
-  margin: 0;
-  font-weight: 600;
-}
-
-.context-preview {
-  margin: 0;
-  padding: 16px;
-  border-radius: 16px;
-  overflow: auto;
-  background: #0d1d3a;
-  color: #eef5ff;
+.welcome-chip span {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.65;
 }
 
-.error-text {
-  color: #b42318;
+.welcome-chip strong {
+  font-size: 1rem;
+  font-weight: 700;
 }
 
 @media (max-width: 640px) {
-  .card {
-    padding: 24px;
+  .welcome-shell {
+    padding: 18px;
   }
 
-  .handoff-panel {
-    grid-template-columns: 1fr;
+  .welcome-card {
+    padding: 24px;
   }
-}
 
-@media (min-width: 641px) {
-  .handoff-panel {
-    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
-    align-items: start;
+  .welcome-brand {
+    align-items: flex-start;
+    flex-direction: column;
   }
 }

package/template/src/dev-preview.ts

@@ -1,102 +0,0 @@
-export type EventusDevPreviewDescriptor = {
-  type: "eventus-dev-preview";
-  version: 1;
-  manifest: {
-    name: string;
-    appId: string;
-    version: string;
-    permissions?: string[];
-  };
-  urls: {
-    local: string;
-    network: string | null;
-    preview: string;
-  };
-};
-
-export function isBridgeUnavailableError(error: unknown): boolean {
-  return (
-    error instanceof Error && error.name === "EventusBridgeUnavailableError"
-  );
-}
-
-export async function fetchDevPreviewDescriptor(): Promise<EventusDevPreviewDescriptor | null> {
-  if (typeof fetch !== "function") {
-    return null;
-  }
-
-  try {
-    const response = await fetch("/__eventus__/preview.json", {
-      headers: {
-        Accept: "application/json",
-      },
-    });
-    if (!response.ok) {
-      return null;
-    }
-
-    const json = (await response.json()) as unknown;
-    return parseDevPreviewDescriptor(json);
-  } catch {
-    return null;
-  }
-}
-
-export function parseDevPreviewDescriptor(
-  value: unknown,
-): EventusDevPreviewDescriptor | null {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return null;
-  }
-
-  const descriptor = value as Record<string, unknown>;
-  const manifest = descriptor.manifest;
-  const urls = descriptor.urls;
-
-  if (
-    descriptor.type !== "eventus-dev-preview" ||
-    descriptor.version !== 1 ||
-    !manifest ||
-    typeof manifest !== "object" ||
-    Array.isArray(manifest) ||
-    !urls ||
-    typeof urls !== "object" ||
-    Array.isArray(urls)
-  ) {
-    return null;
-  }
-
-  const nextManifest = manifest as Record<string, unknown>;
-  const nextUrls = urls as Record<string, unknown>;
-  const permissions = nextManifest.permissions;
-
-  if (
-    typeof nextManifest.name !== "string" ||
-    typeof nextManifest.appId !== "string" ||
-    typeof nextManifest.version !== "string" ||
-    typeof nextUrls.local !== "string" ||
-    (nextUrls.network !== null && typeof nextUrls.network !== "string") ||
-    typeof nextUrls.preview !== "string" ||
-    (permissions !== undefined &&
-      (!Array.isArray(permissions) ||
-        permissions.some((permission) => typeof permission !== "string")))
-  ) {
-    return null;
-  }
-
-  return {
-    type: "eventus-dev-preview",
-    version: 1,
-    manifest: {
-      name: nextManifest.name,
-      appId: nextManifest.appId,
-      version: nextManifest.version,
-      ...(permissions ? { permissions: permissions as string[] } : {}),
-    },
-    urls: {
-      local: nextUrls.local,
-      network: nextUrls.network as string | null,
-      preview: nextUrls.preview,
-    },
-  };
-}