ugly-app 0.1.479 → 0.1.481

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.479";
+export declare const CLI_VERSION = "0.1.481";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.479";
+export const CLI_VERSION = "0.1.481";
 //# sourceMappingURL=version.js.map

package/dist/client/bootstrapApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrapApp.d.ts","sourceRoot":"","sources":["../../src/client/bootstrapApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOzE,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,UAAU,mBAAmB;IAC3B,mFAAmF;IACnF,QAAQ,EAAE,eAAe,CAAC;IAE1B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,uDAAuD;IACvD,cAAc,EAAE,aAAa,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;QACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC;QAChC,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC,CAAC;IAEH,+EAA+E;IAC/E,MAAM,EAAE,MAAM,YAAY,CAAC;IAE3B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE5B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qFAAqF;IACrF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAoF/D"}
+{"version":3,"file":"bootstrapApp.d.ts","sourceRoot":"","sources":["../../src/client/bootstrapApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOzE,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAInF,UAAU,mBAAmB;IAC3B,mFAAmF;IACnF,QAAQ,EAAE,eAAe,CAAC;IAE1B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,uDAAuD;IACvD,cAAc,EAAE,aAAa,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;QACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,OAAO,CAAC;QAChC,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC,CAAC;IAEH,+EAA+E;IAC/E,MAAM,EAAE,MAAM,YAAY,CAAC;IAE3B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE5B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qFAAqF;IACrF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAsF/D"}

package/dist/client/bootstrapApp.js

@@ -7,6 +7,7 @@ import { AppProvider } from './AppProvider.js';
 import { KeyboardProvider } from './components/KeyboardProvider.js';
 import { createSocket } from './createSocket.js';
 import { StringsProvider } from './StringsProvider.js';
+import { installUglyStudioPreviewBridge } from './uglyStudioPreviewBridge.js';
 import { createUglyBotSocket } from './uglyBotSocket.js';
 const w = typeof window !== 'undefined' ? window : {};
 export function bootstrapApp(options) {
@@ -14,6 +15,7 @@ export function bootstrapApp(options) {
     const enableKeyboard = keyboardOpt !== false;
     const rootEl = typeof rootOpt === 'string' ? document.querySelector(rootOpt) : rootOpt;
     const root = createRoot(rootEl);
+    installUglyStudioPreviewBridge();
     // Initialize error/feedback reporting
     const uglyBotUrl = w['__UGLY_BOT_URL__'] ?? 'https://ugly.bot';
     const uglyBotProjectId = w['__UGLY_BOT_PROJECT_ID__'] ?? '';

package/dist/client/bootstrapApp.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrapApp.js","sourceRoot":"","sources":["../../src/client/bootstrapApp.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"bootstrapApp.js","sourceRoot":"","sources":["../../src/client/bootstrapApp.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,eAAe,EAA8B,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAoCzD,MAAM,CAAC,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAuD,CAAC,CAAC,CAAC,EAAwC,CAAC;AAE7I,MAAM,UAAU,YAAY,CAAC,OAA4B;IACvD,MAAM,EACJ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,WAAW,GAAG,EAAE,EAC1B,cAAc,EACd,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,OAAO,GAAG,OAAO,EACvB,QAAQ,GAAG,sDAA+B,EAC1C,SAAS,GAAG,MAAM,EAClB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,WAAW,GACtB,GAAG,OAAO,CAAC;IACZ,MAAM,cAAc,GAAG,WAAW,KAAK,KAAK,CAAC;IAE7C,MAAM,MAAM,GACV,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3E,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAEhC,8BAA8B,EAAE,CAAC;IAEjC,sCAAsC;IACtC,MAAM,UAAU,GAAG,CAAC,CAAC,kBAAkB,CAAC,IAAI,kBAAkB,CAAC;IAC/D,MAAM,gBAAgB,GAAG,CAAC,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;IAC5D,IAAI,gBAAgB,EAAE,CAAC;QACrB,UAAU,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,MAAM,KAAK,GAAG,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAElC,SAAS,gBAAgB,CACvB,eAAwB,EACxB,SAAkB,EAClB,QAAsB;QAEtB,MAAM,IAAI,GAAG,CACX,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,GAAG,EAAE,CAAC,eAAe,EACtC,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACM,CAClB,CAAC;QAEF,MAAM,WAAW,GAAG,aAAa;YAC/B,CAAC,CAAC,KAAC,eAAe,IAAC,MAAM,EAAE,aAAa,YAAG,IAAI,GAAmB;YAClE,CAAC,CAAC,IAAI,CAAC;QAET,IAAI,CAAC,MAAM,CACT,cAAc;YACZ,CAAC,CAAC,KAAC,gBAAgB,cAAE,WAAW,GAAoB;YACpD,CAAC,CAAC,WAAW,CAChB,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAC3C,OAAO;IACT,CAAC;IAED,MAAM,MAAM,GAAG,CACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACtC,CAAC,GAAG,CAAC;IACN,MAAM,MAAM,GAAG,YAAY,CAAC;QAC1B,QAAQ,EAAE,EAAE,GAAG,iBAAiB,EAAE,GAAG,WAAW,EAAE;QAClD,QAAQ,EAAE,EAAE,GAAG,iBAAiB,EAAE,GAAG,WAAW,EAAE;QAClD,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;IAEH,MAAM;SACH,OAAO,CAAC,KAAK,CAAC;SACd,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC3B,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAClF,gBAAgB,CACd,IAAI,EACJ,KAAK,EACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,YAClF,SAAS,EAAE,GACA,CACf,CAAC;IACJ,CAAC,CAAC;SACD,KAAK,CAAC,CAAC,GAAY,EAAE,EAAE;QACtB,OAAO,CAAC,KAAK,CAAC,6DAA6D,EAAE,GAAG,CAAC,CAAC;QAClF,QAAQ,CAAC,MAAM,GAAG,4DAA4D,CAAC;QAC/E,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/client/uglyStudioPreviewBridge.d.ts

@@ -0,0 +1,2 @@
+export declare function installUglyStudioPreviewBridge(): void;
+//# sourceMappingURL=uglyStudioPreviewBridge.d.ts.map

package/dist/client/uglyStudioPreviewBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uglyStudioPreviewBridge.d.ts","sourceRoot":"","sources":["../../src/client/uglyStudioPreviewBridge.ts"],"names":[],"mappings":"AAyBA,wBAAgB,8BAA8B,IAAI,IAAI,CAgDrD"}

package/dist/client/uglyStudioPreviewBridge.js

@@ -0,0 +1,61 @@
+/**
+ * Bridge between the ugly-studio Preview panel (parent frame) and the
+ * running app (this iframe). Studio's Preview posts simulated device
+ * insets via:
+ *   { source: 'ugly-studio-preview-cmd', type: 'deviceFrame',
+ *     data: { safeAreaInsetTop, safeAreaInsetBottom,
+ *             safeAreaInsetLeft, safeAreaInsetRight,
+ *             keyboardInsetHeight } }
+ *
+ * We apply those values two ways so every consumer in the app reacts:
+ *
+ *  1. CSS variables on `:root` — `--safe-area-inset-*` and
+ *     `--keyboard-inset-height`. Components that style via
+ *     `var(--safe-area-inset-bottom)` pick this up automatically.
+ *  2. The same custom events `KeyboardProvider` already listens for
+ *     from the native bridge: `safe-area-insets` and `keyboard-height`.
+ *     This drives the React context (`useSafeAreaInsets`,
+ *     `useKeyboardHeight`) used by `KeyboardSpacer` and consumers like
+ *     `SafeAreaTestPage`.
+ *
+ * Safe to call unconditionally — the listener is cheap, and standalone
+ * runs simply never receive the studio message.
+ */
+const INSTALLED_FLAG = '__uglyStudioPreviewBridgeInstalled__';
+export function installUglyStudioPreviewBridge() {
+    if (typeof window === 'undefined')
+        return;
+    const w = window;
+    if (w[INSTALLED_FLAG])
+        return;
+    w[INSTALLED_FLAG] = true;
+    window.addEventListener('message', (event) => {
+        const msg = event.data;
+        if (!msg || typeof msg !== 'object')
+            return;
+        if (msg.source !== 'ugly-studio-preview-cmd')
+            return;
+        if (msg.type !== 'deviceFrame')
+            return;
+        const d = msg.data ?? {};
+        const insets = {
+            top: numOr0(d.safeAreaInsetTop),
+            right: numOr0(d.safeAreaInsetRight),
+            bottom: numOr0(d.safeAreaInsetBottom),
+            left: numOr0(d.safeAreaInsetLeft),
+        };
+        const keyboardHeight = numOr0(d.keyboardInsetHeight);
+        const root = document.documentElement;
+        root.style.setProperty('--safe-area-inset-top', `${insets.top}px`);
+        root.style.setProperty('--safe-area-inset-right', `${insets.right}px`);
+        root.style.setProperty('--safe-area-inset-bottom', `${insets.bottom}px`);
+        root.style.setProperty('--safe-area-inset-left', `${insets.left}px`);
+        root.style.setProperty('--keyboard-inset-height', `${keyboardHeight}px`);
+        window.dispatchEvent(new CustomEvent('safe-area-insets', { detail: insets }));
+        window.dispatchEvent(new CustomEvent('keyboard-height', { detail: { height: keyboardHeight } }));
+    });
+}
+function numOr0(v) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : 0;
+}
+//# sourceMappingURL=uglyStudioPreviewBridge.js.map

package/dist/client/uglyStudioPreviewBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uglyStudioPreviewBridge.js","sourceRoot":"","sources":["../../src/client/uglyStudioPreviewBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,cAAc,GAAG,sCAAsC,CAAC;AAE9D,MAAM,UAAU,8BAA8B;IAC5C,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IAC1C,MAAM,CAAC,GAAG,MAA4C,CAAC;IACvD,IAAI,CAAC,CAAC,cAAc,CAAC;QAAE,OAAO;IAC9B,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAezB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;QACzD,MAAM,GAAG,GAAG,KAAK,CAAC,IAA6C,CAAC;QAChE,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;YAAE,OAAO;QAC5C,IAAI,GAAG,CAAC,MAAM,KAAK,yBAAyB;YAAE,OAAO;QACrD,IAAI,GAAG,CAAC,IAAI,KAAK,aAAa;YAAE,OAAO;QAEvC,MAAM,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG;YACb,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAC/B,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC;YACnC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;SAClC,CAAC;QACF,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;QAErD,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;QACzE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC;QACrE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,cAAc,IAAI,CAAC,CAAC;QAEzE,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CACxD,CAAC;QACF,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,CAAC,CAC3E,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,MAAM,CAAC,CAAU;IACxB,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.479",
+  "version": "0.1.481",
   "type": "module",
   "main": "./dist/server/index.js",
   "exports": {

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.479";
+export const CLI_VERSION = "0.1.481";

package/src/client/bootstrapApp.tsx

@@ -8,6 +8,7 @@ import { AppProvider } from './AppProvider.js';
 import { KeyboardProvider } from './components/KeyboardProvider.js';
 import { createSocket } from './createSocket.js';
 import { StringsProvider, type StringsProviderConfig } from './StringsProvider.js';
+import { installUglyStudioPreviewBridge } from './uglyStudioPreviewBridge.js';
 import { createUglyBotSocket } from './uglyBotSocket.js';
 
 interface BootstrapAppOptions {
@@ -64,6 +65,8 @@ export function bootstrapApp(options: BootstrapAppOptions): void {
     typeof rootOpt === 'string' ? document.querySelector(rootOpt)! : rootOpt;
   const root = createRoot(rootEl);
 
+  installUglyStudioPreviewBridge();
+
   // Initialize error/feedback reporting
   const uglyBotUrl = w['__UGLY_BOT_URL__'] ?? 'https://ugly.bot';
   const uglyBotProjectId = w['__UGLY_BOT_PROJECT_ID__'] ?? '';

package/src/client/uglyStudioPreviewBridge.ts

@@ -0,0 +1,78 @@
+/**
+ * Bridge between the ugly-studio Preview panel (parent frame) and the
+ * running app (this iframe). Studio's Preview posts simulated device
+ * insets via:
+ *   { source: 'ugly-studio-preview-cmd', type: 'deviceFrame',
+ *     data: { safeAreaInsetTop, safeAreaInsetBottom,
+ *             safeAreaInsetLeft, safeAreaInsetRight,
+ *             keyboardInsetHeight } }
+ *
+ * We apply those values two ways so every consumer in the app reacts:
+ *
+ *  1. CSS variables on `:root` — `--safe-area-inset-*` and
+ *     `--keyboard-inset-height`. Components that style via
+ *     `var(--safe-area-inset-bottom)` pick this up automatically.
+ *  2. The same custom events `KeyboardProvider` already listens for
+ *     from the native bridge: `safe-area-insets` and `keyboard-height`.
+ *     This drives the React context (`useSafeAreaInsets`,
+ *     `useKeyboardHeight`) used by `KeyboardSpacer` and consumers like
+ *     `SafeAreaTestPage`.
+ *
+ * Safe to call unconditionally — the listener is cheap, and standalone
+ * runs simply never receive the studio message.
+ */
+const INSTALLED_FLAG = '__uglyStudioPreviewBridgeInstalled__';
+
+export function installUglyStudioPreviewBridge(): void {
+  if (typeof window === 'undefined') return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w[INSTALLED_FLAG]) return;
+  w[INSTALLED_FLAG] = true;
+
+  interface DeviceFrameData {
+    safeAreaInsetTop?: number;
+    safeAreaInsetBottom?: number;
+    safeAreaInsetLeft?: number;
+    safeAreaInsetRight?: number;
+    keyboardInsetHeight?: number;
+  }
+  interface DeviceFrameMessage {
+    source?: string;
+    type?: string;
+    data?: DeviceFrameData;
+  }
+
+  window.addEventListener('message', (event: MessageEvent) => {
+    const msg = event.data as DeviceFrameMessage | null | undefined;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.source !== 'ugly-studio-preview-cmd') return;
+    if (msg.type !== 'deviceFrame') return;
+
+    const d = msg.data ?? {};
+    const insets = {
+      top: numOr0(d.safeAreaInsetTop),
+      right: numOr0(d.safeAreaInsetRight),
+      bottom: numOr0(d.safeAreaInsetBottom),
+      left: numOr0(d.safeAreaInsetLeft),
+    };
+    const keyboardHeight = numOr0(d.keyboardInsetHeight);
+
+    const root = document.documentElement;
+    root.style.setProperty('--safe-area-inset-top', `${insets.top}px`);
+    root.style.setProperty('--safe-area-inset-right', `${insets.right}px`);
+    root.style.setProperty('--safe-area-inset-bottom', `${insets.bottom}px`);
+    root.style.setProperty('--safe-area-inset-left', `${insets.left}px`);
+    root.style.setProperty('--keyboard-inset-height', `${keyboardHeight}px`);
+
+    window.dispatchEvent(
+      new CustomEvent('safe-area-insets', { detail: insets }),
+    );
+    window.dispatchEvent(
+      new CustomEvent('keyboard-height', { detail: { height: keyboardHeight } }),
+    );
+  });
+}
+
+function numOr0(v: unknown): number {
+  return typeof v === 'number' && Number.isFinite(v) ? v : 0;
+}

package/templates/CLAUDE.md

@@ -81,6 +81,12 @@ Every endpoint is accessible via both WebSocket (`socket.request(name, input)`)
 - Navigate: `useRouter().push('route-key', params)`
 - Popups: always use `useRouter().openPopup(<Component />, { mode: 'transient' })` — never custom fixed overlays
 
+### Home page is the primary surface
+- The home route is `''` in `shared/pages.ts`, rendered by `client/pages/HomePage.tsx`.
+- When building or customizing the app's main functionality, **edit `HomePage.tsx`** — replace its body with the requested UI. Do not add a new route just to land the user on it.
+- Only add new pages for secondary navigation the user explicitly asks for (settings, detail views, multi-screen flows). One screen ⇒ home page edit. Multiple screens ⇒ home page + extra routes.
+- Demo/test pages under `client/pages/` (`AuthDemoPage`, `TodoDemoPage`, `*TestPage`, etc.) are scaffolding — delete the ones you don't need as you build the real app.
+
 ## Critical rules
 - **Never** change a collection schema without running `npm run db:schema-gen` and fixing the generated migration
 - **Always** include a `schema: ZodSchema` when defining a collection — it's required

package/templates/client/pages/AuthDemoPage.tsx

@@ -1,6 +1,37 @@
-import React from 'react';
+import { nanoid } from 'nanoid';
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, Card, PageLayout, Text, useApp } from 'ugly-app/client';
 
+// ─── Session helpers (used for the experiment / analytics demo below) ─────────
+
+function getSessionId(): string {
+  const key = 'sessionId';
+  const existing = sessionStorage.getItem(key);
+  if (existing) return existing;
+  const id = nanoid();
+  sessionStorage.setItem(key, id);
+  return id;
+}
+
+// Lightweight HTTP RPC helper for pages that run before socket auth.
+// For authenticated pages with a socket, use socket.request() instead.
+async function rpc<T>(name: string, input: unknown): Promise<T> {
+  const res = await fetch(`/api/${name}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ input }),
+  });
+  const json = (await res.json()) as { result: T };
+  return json.result;
+}
+
+// CTA label per experiment branch — 'cta-test' must match the experiment id
+// declared in shared/experiments.ts.
+function getCtaLabel(branches: Record<string, string>): string {
+  if (branches['cta-test'] === 'treatment') return 'Try it free';
+  return 'Get started';
+}
+
 function openLogin(): void {
   window.open(
     `https://ugly.bot/oauth?origin=${encodeURIComponent(
@@ -68,6 +99,33 @@ function AuthDemoAuthenticated(): React.ReactElement {
 }
 
 function AuthDemoUnauthenticated(): React.ReactElement {
+  const sessionId = useRef(getSessionId());
+  const [branches, setBranches] = useState<Record<string, string>>({});
+
+  // initSession returns experiment branch assignments and captures SESSION_START.
+  // Analytics failures must not block the UI — degrade silently.
+  useEffect(() => {
+    rpc<{ branches: Record<string, string> }>('initSession', {
+      sessionId: sessionId.current,
+    })
+      .then(({ branches: b }) => { setBranches(b); })
+      .catch(() => {
+        // Default branch values stay in place
+      });
+  }, []);
+
+  function handleCtaClick(): void {
+    void rpc<{ eventId: string }>('captureEvent', {
+      eventName: 'CTA_CLICK',
+      sessionId: sessionId.current,
+      properties: { page: 'auth-demo' },
+    }).catch((_e: unknown) => undefined);
+
+    openLogin();
+  }
+
+  const ctaLabel = getCtaLabel(branches);
+
   return (
     <PageLayout
       header={
@@ -78,9 +136,18 @@ function AuthDemoUnauthenticated(): React.ReactElement {
     >
       <div>
         <h1>Auth Demo</h1>
+        <Text style={{ display: 'block', marginBottom: 12 }}>
+          Demonstrates ugly.bot OAuth login + session-scoped experiment
+          analytics. The button label is driven by the <code>cta-test</code>
+          {' '}experiment in <code>shared/experiments.ts</code>.
+        </Text>
         <Card>
           <Text>You are not logged in.</Text>
-          <Button onClick={openLogin}>Login with ugly.bot</Button>
+          <div style={{ marginTop: 12 }}>
+            <Button variant="primary" onClick={handleCtaClick}>
+              {ctaLabel}
+            </Button>
+          </div>
         </Card>
       </div>
     </PageLayout>

package/templates/client/pages/HomePage.tsx

@@ -1,184 +1,20 @@
-import { nanoid } from 'nanoid';
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, Card, PageLayout, Text, useApp } from 'ugly-app/client';
+import React from 'react';
+import { Card, PageLayout, Text } from 'ugly-app/client';
 
-// ─── Session helpers ──────────────────────────────────────────────────────────
-
-function getSessionId(): string {
-  const key = 'sessionId';
-  const existing = sessionStorage.getItem(key);
-  if (existing) return existing;
-  const id = nanoid();
-  sessionStorage.setItem(key, id);
-  return id;
-}
-
-// Lightweight HTTP RPC helper for pages that run before socket auth.
-// For authenticated pages with a socket, use socket.request() instead.
-async function rpc<T>(name: string, input: unknown): Promise<T> {
-  const res = await fetch(`/api/${name}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ input }),
-  });
-  const json = (await res.json()) as { result: T };
-  return json.result;
-}
-
-// ─── CTA label per experiment branch ─────────────────────────────────────────
-
-function getCtaLabel(branches: Record<string, string>): string {
-  // Add more experiment-driven labels here as you add experiments.
-  // 'cta-test' must match the experiment id in shared/experiments.ts.
-  if (branches['cta-test'] === 'treatment') return 'Try it free';
-  return 'Get started'; // control branch (or default while loading)
-}
-
-// ─── Page components ──────────────────────────────────────────────────────────
-
-const UGLY_BOT_URL = (window as unknown as Record<string, string>).__UGLY_BOT_URL__ ?? 'https://ugly.bot';
-
-function openLogin(): void {
-  window.open(
-    `${UGLY_BOT_URL}/oauth?origin=${encodeURIComponent(
-      window.location.origin,
-    )}`,
-    'ugly-bot-login',
-    `width=480,height=640,left=${Math.round(
-      window.screenX + (window.outerWidth - 480) / 2,
-    )},top=${Math.round(window.screenY + (window.outerHeight - 640) / 2)}`,
-  );
-
-  function onMessage(event: MessageEvent): void {
-    if (event.origin !== UGLY_BOT_URL) return;
-    const data = event.data as { type?: string; code?: string } | null;
-    if (!data?.type || data.type !== 'ugly-bot-oauth' || !data.code) return;
-    window.removeEventListener('message', onMessage);
-    void fetch('/auth/verify', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ code: data.code }),
-    }).then((res) => {
-      if (res.ok) window.location.reload();
-    });
-  }
-  window.addEventListener('message', onMessage);
-}
-
-function HomePageAuthenticated(): React.ReactElement {
-  const app = useApp();
-
-  async function handleLogout(): Promise<void> {
-    await fetch('/auth/logout', { method: 'POST' });
-    window.location.reload();
-  }
-
-  return (
-    <PageLayout
-      header={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 24px' }}>
-          <Text size="lg" weight="bold">My App</Text>
-          <Button variant="secondary" onClick={() => { void handleLogout(); }}>
-            Logout
-          </Button>
-        </div>
-      }
-    >
-      <HomePageBody userId={app.userId} />
-    </PageLayout>
-  );
-}
-
-function HomePageUnauthenticated(): React.ReactElement {
+// This is your app's home page. Replace the body below with the UI for
+// whatever you're building. The `''` route in shared/pages.ts maps here.
+export default function HomePage(): React.ReactElement {
   return (
-    <PageLayout
-      header={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 24px' }}>
-          <Text size="lg" weight="bold">My App</Text>
-          <Button variant="primary" onClick={openLogin}>
-            Login
-          </Button>
-        </div>
-      }
-    >
-      <HomePageBody userId={null} />
+    <PageLayout>
+      <div style={{ maxWidth: 640, margin: '0 auto', padding: 24 }}>
+        <Card>
+          <Text size="xl" weight="bold">Welcome</Text>
+          <Text style={{ marginTop: 8 }}>
+            This is the home page. Edit <code>client/pages/HomePage.tsx</code>
+            {' '}to build your app.
+          </Text>
+        </Card>
+      </div>
     </PageLayout>
   );
 }
-
-// Rendered for both authenticated and unauthenticated users.
-// The experiment CTA is intentionally shown only when userId is null.
-function HomePageBody({
-  userId,
-}: {
-  userId: string | null;
-}): React.ReactElement {
-  const sessionId = useRef(getSessionId());
-  const [branches, setBranches] = useState<Record<string, string>>({});
-
-  // Initialise session: captures SESSION_START and returns experiment branches.
-  // Failures are silently swallowed so analytics never block the UI.
-  useEffect(() => {
-    rpc<{ branches: Record<string, string> }>('initSession', {
-      sessionId: sessionId.current,
-    })
-      .then(({ branches: b }) => { setBranches(b); })
-      .catch(() => {
-        // Degrade gracefully — UI uses default branch values
-      });
-  }, []);
-
-  function handleCtaClick(): void {
-    // Fire-and-forget — do not await or block on analytics
-    void rpc<{ eventId: string }>('captureEvent', {
-      eventName: 'CTA_CLICK',
-      sessionId: sessionId.current,
-      properties: { page: 'home' },
-    }).catch((_e: unknown) => undefined);
-
-    openLogin();
-  }
-
-  const ctaLabel = getCtaLabel(branches);
-
-  return (
-    <div style={{ maxWidth: 640, margin: '0 auto', padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Card>
-        <Text size="xl" weight="bold">
-          Welcome
-        </Text>
-        <Text style={{ marginTop: 4 }}>
-          {userId
-            ? `Logged in as: ${userId}`
-            : 'This app was built with ugly-app.'}
-        </Text>
-        {!userId && (
-          <div style={{ marginTop: 12 }}>
-            {/* CTA label is experiment-driven — see shared/experiments.ts */}
-            <Button variant="primary" onClick={handleCtaClick}>
-              {ctaLabel}
-            </Button>
-          </div>
-        )}
-      </Card>
-    </div>
-  );
-}
-
-export default function HomePage(): React.ReactElement {
-  // Check both that a token exists AND that AppProvider is available.
-  // When the token is present but invalid (e.g. expired), the socket
-  // connection fails and we render without AppProvider — so we must
-  // fall back to the unauthenticated view to avoid a useApp() crash
-  // that causes an infinite reload loop.
-  let isLoggedIn = false;
-  try {
-    // useApp throws if there is no AppProvider ancestor
-    useApp();
-    isLoggedIn = true;
-  } catch {
-    isLoggedIn = false;
-  }
-  if (isLoggedIn) return <HomePageAuthenticated />;
-  return <HomePageUnauthenticated />;
-}