@thewhateverapp/tile-sdk 0.17.12 → 0.17.14

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState
 useCuePoint, useCuePoints, useVideoProgress, Slideshow, useSlideshowState, useSlideshow, // Alias for useSlideshowState
 OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay/index.js';
 export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, CuePoint, SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, SlotPosition, OverlaySlotProps, FullOverlayProps, GradientOverlayProps, } from './react/overlay/index.js';
+export { confetti } from './react/confetti.js';
+export type { ConfettiOptions } from './react/confetti.js';
 export { getTileBridge, TileBridge } from './bridge/TileBridge.js';
 export type { TileMessage, TileConfig, TileTokenData, KeyboardState, VisibilityState } from './bridge/TileBridge.js';
 export { StateClient } from './state/StateClient.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,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"}

package/dist/index.js

@@ -15,6 +15,8 @@ useCuePoint, useCuePoints, useVideoProgress,
 Slideshow, useSlideshowState, useSlideshow, // Alias for useSlideshowState
 // Positioning components
 OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay/index.js';
+// Confetti - CSS-based, mobile WebView safe
+export { confetti } from './react/confetti.js';
 // Bridge for secure communication
 export { getTileBridge, TileBridge } from './bridge/TileBridge.js';
 // State API client

package/dist/react/confetti.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Canvas-confetti compatible options
+ * Maps to react-confetti-explosion props under the hood
+ */
+export interface ConfettiOptions {
+    /**
+     * Number of confetti particles (default: 100)
+     * Keep under 400 for optimal performance
+     */
+    particleCount?: number;
+    /**
+     * Spread angle in degrees (default: 70)
+     * Mapped to width: spread * 15 pixels
+     */
+    spread?: number;
+    /**
+     * Origin point for the confetti burst
+     * x: 0-1 (left to right), y: 0-1 (top to bottom)
+     * Default: { x: 0.5, y: 0.5 } (center)
+     */
+    origin?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * Initial velocity/force of particles (default: 0.5)
+     * Range: 0-1 (higher = more explosive)
+     */
+    startVelocity?: number;
+    /**
+     * Animation duration in milliseconds (default: 2200)
+     */
+    ticks?: number;
+    /**
+     * Size of particles in pixels (default: 12)
+     */
+    scalar?: number;
+    /**
+     * Array of CSS color strings
+     * Default: festive colors
+     */
+    colors?: string[];
+    /**
+     * Z-index for the confetti layer
+     */
+    zIndex?: number;
+    /**
+     * Callback when animation completes
+     */
+    onComplete?: () => void;
+}
+/**
+ * Launch confetti with canvas-confetti compatible API
+ *
+ * Uses CSS animations (react-confetti-explosion) under the hood,
+ * which is safe for mobile WebViews that may have issues with
+ * canvas-confetti's OffscreenCanvas/WebWorker approach.
+ *
+ * @example
+ * // Basic usage
+ * confetti();
+ *
+ * @example
+ * // Custom configuration
+ * confetti({
+ *   particleCount: 150,
+ *   spread: 90,
+ *   origin: { x: 0.5, y: 0.3 }
+ * });
+ *
+ * @example
+ * // Celebration burst from bottom
+ * confetti({
+ *   particleCount: 200,
+ *   spread: 120,
+ *   startVelocity: 0.8,
+ *   origin: { x: 0.5, y: 1 }
+ * });
+ */
+export declare function confetti(options?: ConfettiOptions): Promise<void>;
+export declare namespace confetti {
+    var reset: () => void;
+}
+export default confetti;
+//# sourceMappingURL=confetti.d.ts.map

package/dist/react/confetti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confetti.d.ts","sourceRoot":"","sources":["../../src/react/confetti.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA2ED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuDrE;yBAvDe,QAAQ;qBA4DK,IAAI;;AAWjC,eAAe,QAAQ,CAAC"}

package/dist/react/confetti.js

@@ -0,0 +1,134 @@
+'use client';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ConfettiExplosion from 'react-confetti-explosion';
+// Container for mounting confetti explosions
+let confettiContainer = null;
+let confettiRoot = null;
+let activeExplosions = new Set();
+let explosionCounter = 0;
+function getConfettiContainer() {
+    if (!confettiContainer) {
+        confettiContainer = document.createElement('div');
+        confettiContainer.id = 'tile-sdk-confetti-container';
+        confettiContainer.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+      overflow: hidden;
+    `;
+        document.body.appendChild(confettiContainer);
+        confettiRoot = createRoot(confettiContainer);
+    }
+    return confettiContainer;
+}
+function renderExplosions() {
+    if (!confettiRoot)
+        return;
+    // Get all active explosion data
+    const explosionData = Array.from(activeExplosions).map(id => {
+        return window.__confettiExplosions?.[id];
+    }).filter(Boolean);
+    if (explosionData.length === 0) {
+        confettiRoot.render(null);
+        return;
+    }
+    confettiRoot.render(React.createElement(React.Fragment, null, explosionData.map((data) => (React.createElement("div", { key: data.id, style: {
+            position: 'absolute',
+            left: `${data.origin.x * 100}%`,
+            top: `${data.origin.y * 100}%`,
+            transform: 'translate(-50%, -50%)',
+        } },
+        React.createElement(ConfettiExplosion, { particleCount: data.particleCount, force: data.force, duration: data.duration, particleSize: data.particleSize, width: data.width, colors: data.colors, zIndex: data.zIndex, onComplete: () => {
+                // Cleanup this explosion
+                activeExplosions.delete(data.id);
+                delete window.__confettiExplosions?.[data.id];
+                data.onComplete?.();
+                renderExplosions();
+            } }))))));
+}
+/**
+ * Launch confetti with canvas-confetti compatible API
+ *
+ * Uses CSS animations (react-confetti-explosion) under the hood,
+ * which is safe for mobile WebViews that may have issues with
+ * canvas-confetti's OffscreenCanvas/WebWorker approach.
+ *
+ * @example
+ * // Basic usage
+ * confetti();
+ *
+ * @example
+ * // Custom configuration
+ * confetti({
+ *   particleCount: 150,
+ *   spread: 90,
+ *   origin: { x: 0.5, y: 0.3 }
+ * });
+ *
+ * @example
+ * // Celebration burst from bottom
+ * confetti({
+ *   particleCount: 200,
+ *   spread: 120,
+ *   startVelocity: 0.8,
+ *   origin: { x: 0.5, y: 1 }
+ * });
+ */
+export function confetti(options = {}) {
+    const { particleCount = 100, spread = 70, origin = {}, startVelocity = 0.5, ticks = 2200, scalar = 12, colors, zIndex = 9999, onComplete, } = options;
+    // Ensure container exists
+    getConfettiContainer();
+    // Initialize explosion storage
+    if (!window.__confettiExplosions) {
+        window.__confettiExplosions = {};
+    }
+    // Create unique ID for this explosion
+    const id = `explosion_${++explosionCounter}`;
+    // Map canvas-confetti options to react-confetti-explosion props
+    const explosionData = {
+        id,
+        particleCount: Math.min(particleCount, 400), // Cap for performance
+        force: Math.max(0, Math.min(1, startVelocity)), // Clamp 0-1
+        duration: ticks,
+        particleSize: scalar,
+        width: spread * 15, // Approximate spread-to-width conversion
+        origin: {
+            x: origin.x ?? 0.5,
+            y: origin.y ?? 0.5,
+        },
+        colors: colors || ['#FFC700', '#FF0000', '#2E3191', '#41BBC7', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'],
+        zIndex,
+        onComplete,
+    };
+    // Store explosion data
+    window.__confettiExplosions[id] = explosionData;
+    activeExplosions.add(id);
+    // Render all active explosions
+    renderExplosions();
+    // Return promise that resolves when animation completes
+    return new Promise((resolve) => {
+        explosionData.onComplete = () => {
+            onComplete?.();
+            resolve();
+        };
+    });
+}
+/**
+ * Reset/clear all active confetti
+ */
+confetti.reset = function () {
+    activeExplosions.clear();
+    if (window.__confettiExplosions) {
+        window.__confettiExplosions = {};
+    }
+    if (confettiRoot) {
+        confettiRoot.render(null);
+    }
+};
+// Default export for drop-in replacement
+export default confetti;

package/dist/react/index.d.ts

@@ -6,4 +6,6 @@ export { useViewport } from './useViewport.js';
 export { TileContainer } from './TileContainer.js';
 export { withTile } from './withTile.js';
 export * from './overlay/index.js';
+export { confetti } from './confetti.js';
+export type { ConfettiOptions } from './confetti.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,cAAc,oBAAoB,CAAC;AAGnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/react/index.js

@@ -11,3 +11,5 @@ export { withTile } from './withTile.js';
 // import { ExcaliburGame, useEngine, useGameLoop, ... } from '@thewhateverapp/tile-sdk/excalibur'
 // Overlay components for hybrid tiles (video/image with interactive overlays)
 export * from './overlay/index.js';
+// Confetti - CSS-based, mobile WebView safe
+export { confetti } from './confetti.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.17.12",
+  "version": "0.17.14",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -69,6 +69,7 @@
     "@thewhateverapp/scene-sdk": "^0.1.1",
     "embla-carousel-react": "^8.5.1",
     "matter-js": "^0.19.0",
+    "react-confetti-explosion": "^2.1.2",
     "zod": "^3.22.0"
   },
   "peerDependencies": {
@@ -85,6 +86,7 @@
     "@types/matter-js": "^0.19.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "eslint": "^9.39.1",
     "excalibur": "^0.29.3",
     "next": "^14.2.0",