ugly-app 0.1.479 → 0.1.480

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.480";
 //# 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.480";
 //# 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":"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"}

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.480",
   "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.480";

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;
+}