@thewhateverapp/tile-sdk 0.18.2 → 0.18.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/bridge/TileBridge.d.ts +45 -0
  2. package/dist/bridge/TileBridge.d.ts.map +1 -1
  3. package/dist/bridge/TileBridge.js +80 -0
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/react/useViewport.d.ts +4 -6
  7. package/dist/react/useViewport.d.ts.map +1 -1
  8. package/dist/react/useViewport.js +63 -6
  9. package/dist/spec/schema.d.ts +50 -50
  10. package/package.json +1 -1
package/dist/bridge/TileBridge.d.ts CHANGED
@@ -33,6 +33,15 @@ export interface KeyboardState {
33
33
  visible: boolean;
34
34
  height: number;
35
35
  }
36
+ /**
37
+ * Safe area insets from parent (for iframes that don't have access to env() values)
38
+ */
39
+ export interface SafeAreaInsets {
40
+ top: number;
41
+ right: number;
42
+ bottom: number;
43
+ left: number;
44
+ }
36
45
  /**
37
46
  * Visibility state from parent (for TikTok-style feeds where tiles are preloaded)
38
47
  * Includes muted state for atomic updates to prevent race conditions
@@ -61,6 +70,8 @@ export declare class TileBridge {
61
70
  private lastParentKeyboardAt;
62
71
  private hasVisualViewport;
63
72
  private visibilityState;
73
+ private safeAreaInsets;
74
+ private receivedSafeAreaMessage;
64
75
  private receivedVisibilityMessage;
65
76
  private mediaOriginalMutedState;
66
77
  private trackedAudioContexts;
@@ -109,6 +120,18 @@ export declare class TileBridge {
109
120
  * Handle keyboard state message from parent (mobile app)
110
121
  */
111
122
  private handleKeyboard;
123
+ /**
124
+ * Handle safe area insets message from parent
125
+ * Iframes don't have access to CSS env(safe-area-inset-*) values,
126
+ * so the parent reads them and sends them to us
127
+ */
128
+ private handleSafeAreaInsets;
129
+ /**
130
+ * Inject safe area insets as CSS custom properties on :root
131
+ * This allows tiles to use var(--safe-area-inset-top) etc. in CSS
132
+ * without needing to use the useViewport() hook
133
+ */
134
+ private injectSafeAreaCSSVariables;
112
135
  /**
113
136
  * Update keyboard state from internal detection (VisualViewport/focus) as a fallback
114
137
  * Only applies in React Native WebView contexts and if parent hasn't sent recent updates
@@ -373,6 +396,28 @@ export declare class TileBridge {
373
396
  * @returns Unsubscribe function
374
397
  */
375
398
  onVisibilityChange(handler: (state: VisibilityState) => void): () => void;
399
+ /**
400
+ * Get the current safe area insets
401
+ * Returns { top: 0, right: 0, bottom: 0, left: 0 } if no insets have been received from parent
402
+ * In iframes, CSS env() values return 0, so parent must send these values via bridge
403
+ */
404
+ getSafeAreaInsets(): SafeAreaInsets;
405
+ /**
406
+ * Check if safe area insets have been received from parent
407
+ * Useful to know if you're running standalone (env() works) or in iframe (bridge provides values)
408
+ */
409
+ hasSafeAreaInsets(): boolean;
410
+ /**
411
+ * Subscribe to safe area insets updates
412
+ * Called when parent sends updated insets (e.g., on orientation change)
413
+ *
414
+ * IMPORTANT: If insets have already been received from the parent,
415
+ * the handler is immediately called with the current state.
416
+ *
417
+ * @param handler Callback receiving { top, right, bottom, left }
418
+ * @returns Unsubscribe function
419
+ */
420
+ onSafeAreaInsetsChange(handler: (insets: SafeAreaInsets) => void): () => void;
376
421
  /**
377
422
  * Register an AudioContext for mandatory muting when tile goes offscreen.
378
423
  *
package/dist/bridge/TileBridge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
package/dist/bridge/TileBridge.js CHANGED
@@ -23,6 +23,9 @@ export class TileBridge {
23
23
  // FAIL-SAFE: Default to muted=true until parent explicitly says otherwise
24
24
  // This prevents audio leakage if visibility message is delayed or never arrives
25
25
  this.visibilityState = { visible: true, muted: true };
26
+ // Safe area insets from parent (iframes don't have access to env() values)
27
+ this.safeAreaInsets = { top: 0, right: 0, bottom: 0, left: 0 };
28
+ this.receivedSafeAreaMessage = false;
26
29
  // Track whether we've received at least one visibility message from parent
27
30
  this.receivedVisibilityMessage = false;
28
31
  // Store original muted state of media elements to restore when unmuting
@@ -343,6 +346,9 @@ export class TileBridge {
343
346
  case 'parent:force-audio-sync':
344
347
  this.forceSyncAudioState();
345
348
  break;
349
+ case 'parent:safeAreaInsets':
350
+ this.handleSafeAreaInsets(message.payload);
351
+ break;
346
352
  case 'parent:navigateToPage':
347
353
  this.handleParentNavigate({ target: 'page' });
348
354
  break;
@@ -444,6 +450,45 @@ export class TileBridge {
444
450
  // Emit keyboard update event for listeners
445
451
  this.emitEvent('keyboard:update', this.keyboardState);
446
452
  }
453
+ /**
454
+ * Handle safe area insets message from parent
455
+ * Iframes don't have access to CSS env(safe-area-inset-*) values,
456
+ * so the parent reads them and sends them to us
457
+ */
458
+ handleSafeAreaInsets(payload) {
459
+ if (!payload || typeof payload.top !== 'number') {
460
+ console.warn('[TileBridge] Invalid safe area insets payload received');
461
+ return;
462
+ }
463
+ this.receivedSafeAreaMessage = true;
464
+ this.safeAreaInsets = {
465
+ top: payload.top || 0,
466
+ right: payload.right || 0,
467
+ bottom: payload.bottom || 0,
468
+ left: payload.left || 0,
469
+ };
470
+ if (this.isDevelopment() || this.isPreview()) {
471
+ console.log('[TileBridge] 📐 Received safe area insets', this.safeAreaInsets);
472
+ }
473
+ // Inject CSS custom properties so tiles can use var(--safe-area-inset-*)
474
+ this.injectSafeAreaCSSVariables(this.safeAreaInsets);
475
+ // Emit safe area update event for listeners
476
+ this.emitEvent('safeAreaInsets:update', this.safeAreaInsets);
477
+ }
478
+ /**
479
+ * Inject safe area insets as CSS custom properties on :root
480
+ * This allows tiles to use var(--safe-area-inset-top) etc. in CSS
481
+ * without needing to use the useViewport() hook
482
+ */
483
+ injectSafeAreaCSSVariables(insets) {
484
+ if (typeof document === 'undefined')
485
+ return;
486
+ const root = document.documentElement;
487
+ root.style.setProperty('--safe-area-inset-top', `${insets.top}px`);
488
+ root.style.setProperty('--safe-area-inset-right', `${insets.right}px`);
489
+ root.style.setProperty('--safe-area-inset-bottom', `${insets.bottom}px`);
490
+ root.style.setProperty('--safe-area-inset-left', `${insets.left}px`);
491
+ }
447
492
  /**
448
493
  * Update keyboard state from internal detection (VisualViewport/focus) as a fallback
449
494
  * Only applies in React Native WebView contexts and if parent hasn't sent recent updates
@@ -1550,6 +1595,41 @@ export class TileBridge {
1550
1595
  }
1551
1596
  return this.on('visibility:update', handler);
1552
1597
  }
1598
+ // ============= SAFE AREA INSETS API =============
1599
+ // For tiles in iframes that don't have access to CSS env(safe-area-inset-*) values
1600
+ /**
1601
+ * Get the current safe area insets
1602
+ * Returns { top: 0, right: 0, bottom: 0, left: 0 } if no insets have been received from parent
1603
+ * In iframes, CSS env() values return 0, so parent must send these values via bridge
1604
+ */
1605
+ getSafeAreaInsets() {
1606
+ return { ...this.safeAreaInsets };
1607
+ }
1608
+ /**
1609
+ * Check if safe area insets have been received from parent
1610
+ * Useful to know if you're running standalone (env() works) or in iframe (bridge provides values)
1611
+ */
1612
+ hasSafeAreaInsets() {
1613
+ return this.receivedSafeAreaMessage;
1614
+ }
1615
+ /**
1616
+ * Subscribe to safe area insets updates
1617
+ * Called when parent sends updated insets (e.g., on orientation change)
1618
+ *
1619
+ * IMPORTANT: If insets have already been received from the parent,
1620
+ * the handler is immediately called with the current state.
1621
+ *
1622
+ * @param handler Callback receiving { top, right, bottom, left }
1623
+ * @returns Unsubscribe function
1624
+ */
1625
+ onSafeAreaInsetsChange(handler) {
1626
+ // If we've already received insets from parent, immediately call handler
1627
+ if (this.receivedSafeAreaMessage) {
1628
+ console.log('[TileBridge] 📐 Replaying current safe area insets to new listener:', this.safeAreaInsets);
1629
+ setTimeout(() => handler(this.safeAreaInsets), 0);
1630
+ }
1631
+ return this.on('safeAreaInsets:update', handler);
1632
+ }
1553
1633
  // ============= AUDIOCONTEXT REGISTRATION API =============
1554
1634
  // Tiles with custom audio (WASM/Emscripten) MUST register their AudioContexts
1555
1635
  // to be automatically suspended/resumed when the tile goes offscreen.
package/dist/index.d.ts CHANGED
@@ -13,7 +13,7 @@ export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, Cu
13
13
  export { confetti } from './react/confetti.js';
14
14
  export type { ConfettiOptions } from './react/confetti.js';
15
15
  export { getTileBridge, TileBridge } from './bridge/TileBridge.js';
16
- export type { TileMessage, TileConfig, TileTokenData, KeyboardState, VisibilityState } from './bridge/TileBridge.js';
16
+ export type { TileMessage, TileConfig, TileTokenData, KeyboardState, VisibilityState, SafeAreaInsets } from './bridge/TileBridge.js';
17
17
  export { StateClient } from './state/StateClient.js';
18
18
  export type { TileStats, ViewResponse } from './state/StateClient.js';
19
19
  export * from './tools/index.js';
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,OAAO,EAEL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0BAA0B;AACpC,WAAW,EACX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,iBAAiB,EACjB,YAAY,EAAE,8BAA8B;AAE5C,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EAER,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGrH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtE,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAG3B,cAAc,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,OAAO,EAEL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0BAA0B;AACpC,WAAW,EACX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,iBAAiB,EACjB,YAAY,EAAE,8BAA8B;AAE5C,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EAER,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGrI,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtE,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAG3B,cAAc,sBAAsB,CAAC"}
package/dist/react/useViewport.d.ts CHANGED
@@ -1,14 +1,12 @@
1
- export interface SafeAreaInsets {
2
- top: number;
3
- right: number;
4
- bottom: number;
5
- left: number;
6
- }
1
+ import { type SafeAreaInsets as BridgeSafeAreaInsets } from '../bridge/TileBridge.js';
2
+ export type SafeAreaInsets = BridgeSafeAreaInsets;
7
3
  export interface ViewportInfo {
8
4
  width: number;
9
5
  height: number;
10
6
  safeAreaInsets: SafeAreaInsets;
11
7
  isVisualViewport: boolean;
8
+ /** True if safe area insets came from parent via bridge (iframe mode) */
9
+ safeAreaFromBridge: boolean;
12
10
  }
13
11
  export declare function useViewport(): ViewportInfo;
14
12
  //# sourceMappingURL=useViewport.d.ts.map
package/dist/react/useViewport.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/react/useViewport.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAyDD,wBAAgB,WAAW,IAAI,YAAY,CAwB1C"}
1
+ {"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/react/useViewport.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,cAAc,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGrG,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAmGD,wBAAgB,WAAW,IAAI,YAAY,CAuC1C"}
package/dist/react/useViewport.js CHANGED
@@ -1,6 +1,25 @@
1
- import { useEffect, useState } from 'react';
1
+ import { useEffect, useState, useCallback } from 'react';
2
+ import { getTileBridge } from '../bridge/TileBridge.js';
2
3
  const defaultInsets = { top: 0, right: 0, bottom: 0, left: 0 };
3
- function readSafeAreaInsets() {
4
+ /**
5
+ * Check if we're running in an iframe
6
+ */
7
+ function isInIframe() {
8
+ if (typeof window === 'undefined')
9
+ return false;
10
+ // Traditional iframe check
11
+ if (window.self !== window.top)
12
+ return true;
13
+ // React Native WebView check
14
+ if (window.ReactNativeWebView)
15
+ return true;
16
+ return false;
17
+ }
18
+ /**
19
+ * Read safe area insets from CSS env() values
20
+ * NOTE: This only works in the top-level document, not in iframes
21
+ */
22
+ function readSafeAreaInsetsFromCSS() {
4
23
  if (typeof window === 'undefined' || typeof document === 'undefined') {
5
24
  return defaultInsets;
6
25
  }
@@ -32,38 +51,76 @@ function readSafeAreaInsets() {
32
51
  document.body.removeChild(probe);
33
52
  return insets;
34
53
  }
54
+ /**
55
+ * Get safe area insets - from bridge (iframe) or CSS (standalone)
56
+ */
57
+ function getSafeAreaInsets() {
58
+ if (typeof window === 'undefined') {
59
+ return { insets: defaultInsets, fromBridge: false };
60
+ }
61
+ // In iframe context, prefer bridge-provided values (CSS env() returns 0 in iframes)
62
+ if (isInIframe()) {
63
+ try {
64
+ const bridge = getTileBridge();
65
+ if (bridge.hasSafeAreaInsets()) {
66
+ return { insets: bridge.getSafeAreaInsets(), fromBridge: true };
67
+ }
68
+ }
69
+ catch (e) {
70
+ // Bridge not available, fall back to CSS
71
+ }
72
+ }
73
+ // Standalone mode or bridge hasn't received values yet - read from CSS
74
+ return { insets: readSafeAreaInsetsFromCSS(), fromBridge: false };
75
+ }
35
76
  function getViewportInfo() {
36
77
  if (typeof window === 'undefined') {
37
- return { width: 0, height: 0, safeAreaInsets: defaultInsets, isVisualViewport: false };
78
+ return { width: 0, height: 0, safeAreaInsets: defaultInsets, isVisualViewport: false, safeAreaFromBridge: false };
38
79
  }
39
80
  const visual = window.visualViewport;
40
81
  const width = visual?.width ?? window.innerWidth;
41
82
  const height = visual?.height ?? window.innerHeight;
83
+ const { insets, fromBridge } = getSafeAreaInsets();
42
84
  return {
43
85
  width,
44
86
  height,
45
- safeAreaInsets: readSafeAreaInsets(),
87
+ safeAreaInsets: insets,
46
88
  isVisualViewport: Boolean(visual),
89
+ safeAreaFromBridge: fromBridge,
47
90
  };
48
91
  }
49
92
  export function useViewport() {
50
93
  const [info, setInfo] = useState(() => getViewportInfo());
94
+ const update = useCallback(() => setInfo(getViewportInfo()), []);
51
95
  useEffect(() => {
52
96
  if (typeof window === 'undefined')
53
97
  return;
54
- const update = () => setInfo(getViewportInfo());
55
98
  const visual = window.visualViewport;
56
99
  update();
57
100
  window.addEventListener('resize', update);
58
101
  window.addEventListener('orientationchange', update);
59
102
  visual?.addEventListener('resize', update);
60
103
  visual?.addEventListener('scroll', update);
104
+ // Subscribe to bridge safe area updates (for iframes)
105
+ let unsubscribe;
106
+ if (isInIframe()) {
107
+ try {
108
+ const bridge = getTileBridge();
109
+ unsubscribe = bridge.onSafeAreaInsetsChange(() => {
110
+ update();
111
+ });
112
+ }
113
+ catch (e) {
114
+ // Bridge not available
115
+ }
116
+ }
61
117
  return () => {
62
118
  window.removeEventListener('resize', update);
63
119
  window.removeEventListener('orientationchange', update);
64
120
  visual?.removeEventListener('resize', update);
65
121
  visual?.removeEventListener('scroll', update);
122
+ unsubscribe?.();
66
123
  };
67
- }, []);
124
+ }, [update]);
68
125
  return info;
69
126
  }
package/dist/spec/schema.d.ts CHANGED
@@ -139,28 +139,28 @@ declare const PlacementSchema: z.ZodUnion<[z.ZodObject<{
139
139
  }>>;
140
140
  }, "strip", z.ZodTypeAny, {
141
141
  type: "inset" | "fullscreen" | "positioned";
142
- position?: {
143
- x: string | number;
144
- y: string | number;
145
- } | undefined;
146
142
  insets?: {
147
143
  left?: number | undefined;
148
144
  right?: number | undefined;
149
145
  bottom?: number | undefined;
150
146
  top?: number | undefined;
151
147
  } | undefined;
152
- }, {
153
- type: "inset" | "fullscreen" | "positioned";
154
148
  position?: {
155
149
  x: string | number;
156
150
  y: string | number;
157
151
  } | undefined;
152
+ }, {
153
+ type: "inset" | "fullscreen" | "positioned";
158
154
  insets?: {
159
155
  left?: number | undefined;
160
156
  right?: number | undefined;
161
157
  bottom?: number | undefined;
162
158
  top?: number | undefined;
163
159
  } | undefined;
160
+ position?: {
161
+ x: string | number;
162
+ y: string | number;
163
+ } | undefined;
164
164
  }>]>;
165
165
  declare const OverlayCueSchema: z.ZodObject<{
166
166
  id: z.ZodString;
@@ -217,28 +217,28 @@ declare const OverlayCueSchema: z.ZodObject<{
217
217
  }>>;
218
218
  }, "strip", z.ZodTypeAny, {
219
219
  type: "inset" | "fullscreen" | "positioned";
220
- position?: {
221
- x: string | number;
222
- y: string | number;
223
- } | undefined;
224
220
  insets?: {
225
221
  left?: number | undefined;
226
222
  right?: number | undefined;
227
223
  bottom?: number | undefined;
228
224
  top?: number | undefined;
229
225
  } | undefined;
230
- }, {
231
- type: "inset" | "fullscreen" | "positioned";
232
226
  position?: {
233
227
  x: string | number;
234
228
  y: string | number;
235
229
  } | undefined;
230
+ }, {
231
+ type: "inset" | "fullscreen" | "positioned";
236
232
  insets?: {
237
233
  left?: number | undefined;
238
234
  right?: number | undefined;
239
235
  bottom?: number | undefined;
240
236
  top?: number | undefined;
241
237
  } | undefined;
238
+ position?: {
239
+ x: string | number;
240
+ y: string | number;
241
+ } | undefined;
242
242
  }>]>;
243
243
  dismiss: z.ZodOptional<z.ZodObject<{
244
244
  on: z.ZodArray<z.ZodEnum<["tap-outside", "swipe-down", "timeout", "action", "time-window-end"]>, "many">;
@@ -268,16 +268,16 @@ declare const OverlayCueSchema: z.ZodObject<{
268
268
  inset?: number | undefined;
269
269
  } | {
270
270
  type: "inset" | "fullscreen" | "positioned";
271
- position?: {
272
- x: string | number;
273
- y: string | number;
274
- } | undefined;
275
271
  insets?: {
276
272
  left?: number | undefined;
277
273
  right?: number | undefined;
278
274
  bottom?: number | undefined;
279
275
  top?: number | undefined;
280
276
  } | undefined;
277
+ position?: {
278
+ x: string | number;
279
+ y: string | number;
280
+ } | undefined;
281
281
  };
282
282
  zIndex?: number | undefined;
283
283
  dismiss?: {
@@ -299,16 +299,16 @@ declare const OverlayCueSchema: z.ZodObject<{
299
299
  inset?: number | undefined;
300
300
  } | {
301
301
  type: "inset" | "fullscreen" | "positioned";
302
- position?: {
303
- x: string | number;
304
- y: string | number;
305
- } | undefined;
306
302
  insets?: {
307
303
  left?: number | undefined;
308
304
  right?: number | undefined;
309
305
  bottom?: number | undefined;
310
306
  top?: number | undefined;
311
307
  } | undefined;
308
+ position?: {
309
+ x: string | number;
310
+ y: string | number;
311
+ } | undefined;
312
312
  };
313
313
  zIndex?: number | undefined;
314
314
  dismiss?: {
@@ -498,28 +498,28 @@ export declare const OverlaySpecSchema: z.ZodObject<{
498
498
  }>>;
499
499
  }, "strip", z.ZodTypeAny, {
500
500
  type: "inset" | "fullscreen" | "positioned";
501
- position?: {
502
- x: string | number;
503
- y: string | number;
504
- } | undefined;
505
501
  insets?: {
506
502
  left?: number | undefined;
507
503
  right?: number | undefined;
508
504
  bottom?: number | undefined;
509
505
  top?: number | undefined;
510
506
  } | undefined;
511
- }, {
512
- type: "inset" | "fullscreen" | "positioned";
513
507
  position?: {
514
508
  x: string | number;
515
509
  y: string | number;
516
510
  } | undefined;
511
+ }, {
512
+ type: "inset" | "fullscreen" | "positioned";
517
513
  insets?: {
518
514
  left?: number | undefined;
519
515
  right?: number | undefined;
520
516
  bottom?: number | undefined;
521
517
  top?: number | undefined;
522
518
  } | undefined;
519
+ position?: {
520
+ x: string | number;
521
+ y: string | number;
522
+ } | undefined;
523
523
  }>]>;
524
524
  dismiss: z.ZodOptional<z.ZodObject<{
525
525
  on: z.ZodArray<z.ZodEnum<["tap-outside", "swipe-down", "timeout", "action", "time-window-end"]>, "many">;
@@ -549,16 +549,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
549
549
  inset?: number | undefined;
550
550
  } | {
551
551
  type: "inset" | "fullscreen" | "positioned";
552
- position?: {
553
- x: string | number;
554
- y: string | number;
555
- } | undefined;
556
552
  insets?: {
557
553
  left?: number | undefined;
558
554
  right?: number | undefined;
559
555
  bottom?: number | undefined;
560
556
  top?: number | undefined;
561
557
  } | undefined;
558
+ position?: {
559
+ x: string | number;
560
+ y: string | number;
561
+ } | undefined;
562
562
  };
563
563
  zIndex?: number | undefined;
564
564
  dismiss?: {
@@ -580,16 +580,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
580
580
  inset?: number | undefined;
581
581
  } | {
582
582
  type: "inset" | "fullscreen" | "positioned";
583
- position?: {
584
- x: string | number;
585
- y: string | number;
586
- } | undefined;
587
583
  insets?: {
588
584
  left?: number | undefined;
589
585
  right?: number | undefined;
590
586
  bottom?: number | undefined;
591
587
  top?: number | undefined;
592
588
  } | undefined;
589
+ position?: {
590
+ x: string | number;
591
+ y: string | number;
592
+ } | undefined;
593
593
  };
594
594
  zIndex?: number | undefined;
595
595
  dismiss?: {
@@ -613,16 +613,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
613
613
  inset?: number | undefined;
614
614
  } | {
615
615
  type: "inset" | "fullscreen" | "positioned";
616
- position?: {
617
- x: string | number;
618
- y: string | number;
619
- } | undefined;
620
616
  insets?: {
621
617
  left?: number | undefined;
622
618
  right?: number | undefined;
623
619
  bottom?: number | undefined;
624
620
  top?: number | undefined;
625
621
  } | undefined;
622
+ position?: {
623
+ x: string | number;
624
+ y: string | number;
625
+ } | undefined;
626
626
  };
627
627
  zIndex?: number | undefined;
628
628
  dismiss?: {
@@ -660,16 +660,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
660
660
  inset?: number | undefined;
661
661
  } | {
662
662
  type: "inset" | "fullscreen" | "positioned";
663
- position?: {
664
- x: string | number;
665
- y: string | number;
666
- } | undefined;
667
663
  insets?: {
668
664
  left?: number | undefined;
669
665
  right?: number | undefined;
670
666
  bottom?: number | undefined;
671
667
  top?: number | undefined;
672
668
  } | undefined;
669
+ position?: {
670
+ x: string | number;
671
+ y: string | number;
672
+ } | undefined;
673
673
  };
674
674
  zIndex?: number | undefined;
675
675
  dismiss?: {
@@ -745,16 +745,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
745
745
  inset?: number | undefined;
746
746
  } | {
747
747
  type: "inset" | "fullscreen" | "positioned";
748
- position?: {
749
- x: string | number;
750
- y: string | number;
751
- } | undefined;
752
748
  insets?: {
753
749
  left?: number | undefined;
754
750
  right?: number | undefined;
755
751
  bottom?: number | undefined;
756
752
  top?: number | undefined;
757
753
  } | undefined;
754
+ position?: {
755
+ x: string | number;
756
+ y: string | number;
757
+ } | undefined;
758
758
  };
759
759
  zIndex?: number | undefined;
760
760
  dismiss?: {
@@ -824,16 +824,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
824
824
  inset?: number | undefined;
825
825
  } | {
826
826
  type: "inset" | "fullscreen" | "positioned";
827
- position?: {
828
- x: string | number;
829
- y: string | number;
830
- } | undefined;
831
827
  insets?: {
832
828
  left?: number | undefined;
833
829
  right?: number | undefined;
834
830
  bottom?: number | undefined;
835
831
  top?: number | undefined;
836
832
  } | undefined;
833
+ position?: {
834
+ x: string | number;
835
+ y: string | number;
836
+ } | undefined;
837
837
  };
838
838
  zIndex?: number | undefined;
839
839
  dismiss?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thewhateverapp/tile-sdk",
3
- "version": "0.18.2",
3
+ "version": "0.18.4",
4
4
  "description": "SDK for building interactive tiles on The Whatever App platform",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",