build: d73775f9-b787-4b17-921e-f13c97d46940

2026-05-27 17:52:53 +00:00
commit 0e463bad02
90 changed files with 5286 additions and 0 deletions
@@ -0,0 +1,32 @@
+import React from "react";
+import { Redirect, Route } from "react-router-dom";
+import { IonApp, IonRouterOutlet } from "@ionic/react";
+import { IonReactRouter } from "@ionic/react-router";
+
+import "@ionic/react/css/core.css";
+import "@ionic/react/css/normalize.css";
+import "@ionic/react/css/structure.css";
+import "@ionic/react/css/typography.css";
+import "@ionic/react/css/padding.css";
+import "@ionic/react/css/float-elements.css";
+import "@ionic/react/css/text-alignment.css";
+import "@ionic/react/css/text-transformation.css";
+import "@ionic/react/css/flex-utils.css";
+import "@ionic/react/css/display.css";
+
+import "./theme/variables.css";
+
+import Home from "./pages/Home";
+
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/home" component={Home} exact />
+        <Redirect exact from="/" to="/home" />
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
+);
+
+export default App;
@@ -0,0 +1,7 @@
+const Hello = () => (
+  <div>
+    <p>Hello</p>
+  </div>
+);
+
+export default Hello;
@@ -0,0 +1,112 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { setupIonicReact } from '@ionic/react';
+import { Capacitor } from '@capacitor/core';
+import App from './App';
+
+// ── Ionic initialisation ──────────────────────────────────────────────────────
+// ?mode=md|ios overrides (used by AppSuite preview); otherwise follow the platform.
+const _urlMode = new URLSearchParams(window.location.search).get('mode');
+const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
+setupIonicReact({
+  mode: (_urlMode === 'md' ? 'md' : _urlMode === 'ios' ? 'ios' : _platform === 'android' ? 'md' : 'ios'),
+});
+
+// Derive the studio parent origin dynamically so this works in both dev
+// (parent at localhost:3000) and production (parent at appcakes.qqura.com).
+const studioOrigin = (() => {
+  try {
+    if (document.referrer) return new URL(document.referrer).origin;
+  } catch {}
+  return 'http://localhost:3000';
+})();
+
+// ── Safe area bridge ──────────────────────────────────────────────────────────
+// Priority: URL params (first load) → sessionStorage (HMR full-reloads) → postMessage.
+// Capacitor sets env() natively in compiled apps; these paths cover the browser preview.
+function _applyInsets(sat: string | null, sab: string | null) {
+  if (sat) { document.documentElement.style.setProperty('--ion-safe-area-top', `${sat}px`); sessionStorage.setItem('__apsuite_sat', sat); }
+  if (sab) { document.documentElement.style.setProperty('--ion-safe-area-bottom', `${sab}px`); sessionStorage.setItem('__apsuite_sab', sab); }
+}
+
+const _sp = new URLSearchParams(window.location.search);
+_applyInsets(
+  _sp.get('sat') ?? sessionStorage.getItem('__apsuite_sat'),
+  _sp.get('sab') ?? sessionStorage.getItem('__apsuite_sab'),
+);
+
+window.addEventListener('message', (e) => {
+  if (e.data?.type !== '__apsuite_insets') return;
+  const { sat, sab } = e.data as { sat?: number; sab?: number };
+  _applyInsets(sat != null ? String(sat) : null, sab != null ? String(sab) : null);
+});
+
+// Re-apply after React Fast Refresh so insets survive soft HMR cycles.
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeUpdate', () => {
+    const c = (window as any).Ionic?.config;
+    if (c) c.animated = false;
+  });
+  import.meta.hot.on('vite:afterUpdate', () => {
+    _applyInsets(sessionStorage.getItem('__apsuite_sat'), sessionStorage.getItem('__apsuite_sab'));
+    const c = (window as any).Ionic?.config;
+    if (c) c.animated = true;
+  });
+}
+
+// ── Session bridge ────────────────────────────────────────────────────────────
+// Post auth session to the AppSuite parent frame so the AI can test auth-protected
+// Edge Functions. Uses import.meta.glob so Vite never errors if supabase.ts is absent.
+(async () => {
+  const mods = import.meta.glob('./supabase.ts', { eager: false });
+  if ('./supabase.ts' in mods) {
+    try {
+      const { supabase } = await mods['./supabase.ts']() as { supabase: any };
+      supabase.auth.onAuthStateChange((_event: unknown, session: any) => {
+        window.parent.postMessage(
+          {
+            type: '__apsuite_session',
+            access_token: session?.access_token ?? null,
+            email: session?.user?.email ?? null,
+          },
+          studioOrigin,
+        );
+      });
+    } catch {
+      // supabase client failed to initialise — session bridge unavailable
+    }
+  }
+})();
+
+// ── Runtime error reporting ───────────────────────────────────────────────────
+// Forward uncaught errors to the AppSuite dev server so the AI can read them.
+function reportError(message: string, stack?: string) {
+  fetch(`${studioOrigin}/api/agent/runtime-error`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message, stack }),
+  }).catch(() => {});
+}
+
+window.onerror = (_msg, _src, _line, _col, err) => {
+  reportError(String(_msg), err?.stack);
+  return false;
+};
+
+window.addEventListener('unhandledrejection', (e) => {
+  const err = e.reason as Error | undefined;
+  reportError(err?.message ?? String(e.reason), err?.stack);
+});
+
+// ── PWA Elements (Action Sheet, Camera, Toast etc. in browser preview) ────────
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+defineCustomElements(window);
+
+// ── App bootstrap ─────────────────────────────────────────────────────────────
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import Hello from '../components/Hello';
+
+const Home: React.FC = () => (
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Home</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent className="ion-padding">
+      <Hello />
+    </IonContent>
+  </IonPage>
+);
+
+export default Home;
@@ -0,0 +1,7 @@
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from './database.types';
+
+export const supabase = createClient<Database>(
+  'https://gsltltsypffowdpfdhkf.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImdzbHRsdHN5cGZmb3dkcGZkaGtmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1Njg0MTIsImV4cCI6MjA5NTE0NDQxMn0.XH2adPZPr9p0fQwP3mXDP6wIS41DByW7ZAPSMA0_TYI',
+);
@@ -0,0 +1,65 @@
+/* Ionic CSS Variables — customise to match your app's brand */
+:root {
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
@@ -0,0 +1,23 @@
+import { StatusBar, Style } from '@capacitor/status-bar';
+export { Style };
+``
+const _origin = (() => {
+  try { if (document.referrer) return new URL(document.referrer).origin; } catch {}
+  return window.location.origin;
+})();
+
+/** Set status bar icon/text colour. Use instead of StatusBar.setStyle directly. */
+export async function setStatusBarStyle(style: Style): Promise<void> {
+  try { await StatusBar.setStyle({ style }); } catch {}
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: '__apsuite_statusbar', style }, _origin);
+  }
+}
+
+/** Set status bar background colour (Android). Use instead of StatusBar.setBackgroundColor directly. */
+export async function setStatusBarBackground(color: string): Promise<void> {
+  try { await (StatusBar as any).setBackgroundColor({ color }); } catch {}
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: '__apsuite_statusbar_bg', color }, _origin);
+  }
+}