react-native-webrtc-kaleidoscope 2.7.7 → 2.7.8

package/README.md

@@ -284,6 +284,7 @@ The demo book's [`wolf-cave`](./demo/kaleidoscope.preset-book.ts) is a runnable
 - **Bundled images** ship as tree-shakeable `image` layers, filed by category and imported per image (`import { officeDark } from 'react-native-webrtc-kaleidoscope/images/office/office-dark'`). On web a `source` can also be any image URL or data URI; native resolves bundled ids only. See [`catalog/images/README.md`](./catalog/images/README.md).
 - **New shaders** drop a single `.frag` + typed `.ts` into `catalog/shaders/<name>/`; `bun run build:shaders` codegens the web and Android sources and transpiles the iOS Metal. The canonical upright frame and the mask stencil come for free; you write zero orientation code. See [`catalog/shaders/README.md`](./catalog/shaders/README.md).
 - **Packaged composites** (the Worlds) live in `catalog/composites/<name>/` behind a `./composites/<name>` subpath export; import and spread one into your book.
+- **Thumbnails** are a bundled-asset reference, not a URL string: pass a bare `require('./thumb.webp')` (what `bun run thumbs` emits), or an imported image module (`thumbnail: officeDark`). Both resolve on every platform; native loads the bundled asset, web the asset pipeline. Do **not** wrap the require in `Asset.fromModule(require('./thumb.webp')).uri` in a single-file book: the resolved string renders on web but is empty in a native release build.
 
 After adding a preset to the demo book, regenerate its thumbnail and this README's gallery: `bun run thumbs && bun run gen:waffle` (see [Authoring tooling](#authoring-tooling)).
 

package/catalog/composites/clouds/clouds.ts

@@ -2,12 +2,18 @@
 // procedural; no image layer.
 //
 // A packaged composite consumers can list by importing this module.
+//
+// Native variant. The thumbnail is the string id the prebuild plugin
+// (app.plugin.js) bundles `clouds.thumb.webp` as into the native app target;
+// `resolveImageUri` looks it up in Bundle.main. The web sibling (clouds.web.ts)
+// keeps the `Asset.fromModule(...).uri` pattern; mirrors the other composites.
 
 import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
 
 export const clouds = {
   name: 'Daytime',
   taxonomy: ['Shaders', 'Sky'],
+  thumbnail: 'clouds-thumb',
   layers: [
     {
       id: 'sky',

package/catalog/composites/clouds/clouds.web.ts

@@ -0,0 +1,35 @@
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time;
+// safe on web (react-native-web has no Image.resolveAssetSource and `.uri` is
+// set synchronously by fromModule). Native is clouds.ts (a string-id thumbnail
+// the prebuild plugin bundles). Mirrors the other composites' {<id>.ts,<id>.web.ts}.
+
+import { Asset } from 'expo-asset';
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+import cloudsThumb from './clouds.thumb.webp';
+
+export const clouds = {
+  name: 'Daytime',
+  taxonomy: ['Shaders', 'Sky'],
+  thumbnail: Asset.fromModule(cloudsThumb).uri,
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.09, 0.63, 0.95],
+        uSkyHighColor: [0.04, 0.03, 0.86],
+        uCloudLightColor: [1.0, 0.91, 0.77],
+        uCloudDarkColor: [0.3, 0.3, 0.5],
+        uExposure: 1.27,
+        uStepSize: 0.16,
+        uCloudSpeed: 0.52,
+        uCloudScale: 1.08,
+        uDensity: 0.245,
+        uCoverage: 0.47,
+        uSoftness: 0.28,
+      },
+    },
+    // You, under the sky.
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/dist/catalog/composites/clouds/clouds.d.ts

@@ -1,6 +1,7 @@
 export declare const clouds: {
     readonly name: 'Daytime';
     readonly taxonomy: readonly ["Shaders", "Sky"];
+    readonly thumbnail: 'clouds-thumb';
     readonly layers: readonly [{
         readonly id: 'sky';
         readonly shader: 'clouds';

package/dist/catalog/composites/clouds/clouds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clouds.d.ts","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM;mBACX,SAAS;;;qBAIP,KAAK;yBACD,QAAQ;;qBAEd,YAAY;qBACZ,aAAa;qBACb,gBAAgB;qBAChB,eAAe;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;qBACf,WAAW,EAAE,IAAI;qBACjB,WAAW,EAAE,IAAI;qBACjB,QAAQ,EAAE,KAAK;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;;;qBAIb,KAAK;yBAAU,QAAQ;yBAAU,SAAS;;CAEb,CAAC"}
+{"version":3,"file":"clouds.d.ts","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;mBACX,SAAS;;wBAEJ,cAAc;;qBAGjB,KAAK;yBACD,QAAQ;;qBAEd,YAAY;qBACZ,aAAa;qBACb,gBAAgB;qBAChB,eAAe;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;qBACf,WAAW,EAAE,IAAI;qBACjB,WAAW,EAAE,IAAI;qBACjB,QAAQ,EAAE,KAAK;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;;;qBAIb,KAAK;yBAAU,QAAQ;yBAAU,SAAS;;CAEb,CAAC"}

package/dist/catalog/composites/clouds/clouds.js

@@ -3,11 +3,17 @@
 // procedural; no image layer.
 //
 // A packaged composite consumers can list by importing this module.
+//
+// Native variant. The thumbnail is the string id the prebuild plugin
+// (app.plugin.js) bundles `clouds.thumb.webp` as into the native app target;
+// `resolveImageUri` looks it up in Bundle.main. The web sibling (clouds.web.ts)
+// keeps the `Asset.fromModule(...).uri` pattern; mirrors the other composites.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clouds = void 0;
 exports.clouds = {
     name: 'Daytime',
     taxonomy: ['Shaders', 'Sky'],
+    thumbnail: 'clouds-thumb',
     layers: [
         {
             id: 'sky',

package/dist/catalog/composites/clouds/clouds.js.map

@@ -1 +1 @@
-{"version":3,"file":"clouds.js","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.ts"],"names":[],"mappings":";AAAA,sEAAsE;AACtE,8BAA8B;AAC9B,EAAE;AACF,oEAAoE;;;AAIvD,QAAA,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC;IAC5B,MAAM,EAAE;QACN;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE;gBACR,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBAChC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBACjC,gBAAgB,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;gBACnC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;gBAChC,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;aAChB;SACF;QACD,sBAAsB;QACtB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;KACnD;CACoC,CAAC","sourcesContent":["// Sky: raymarched daytime clouds with you composited over them. Fully\n// procedural; no image layer.\n//\n// A packaged composite consumers can list by importing this module.\n\nimport type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';\n\nexport const clouds = {\n  name: 'Daytime',\n  taxonomy: ['Shaders', 'Sky'],\n  layers: [\n    {\n      id: 'sky',\n      shader: 'clouds',\n      uniforms: {\n        uSkyLowColor: [0.09, 0.63, 0.95],\n        uSkyHighColor: [0.04, 0.03, 0.86],\n        uCloudLightColor: [1.0, 0.91, 0.77],\n        uCloudDarkColor: [0.3, 0.3, 0.5],\n        uExposure: 1.27,\n        uStepSize: 0.16,\n        uCloudSpeed: 0.52,\n        uCloudScale: 1.08,\n        uDensity: 0.245,\n        uCoverage: 0.47,\n        uSoftness: 0.28,\n      },\n    },\n    // You, under the sky.\n    { id: 'you', shader: 'direct', target: 'subject' },\n  ],\n} as const satisfies KaleidoscopePreset;\n"]}
+{"version":3,"file":"clouds.js","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.ts"],"names":[],"mappings":";AAAA,sEAAsE;AACtE,8BAA8B;AAC9B,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,qEAAqE;AACrE,6EAA6E;AAC7E,gFAAgF;AAChF,+EAA+E;;;AAIlE,QAAA,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC;IAC5B,SAAS,EAAE,cAAc;IACzB,MAAM,EAAE;QACN;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE;gBACR,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBAChC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBACjC,gBAAgB,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;gBACnC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;gBAChC,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;aAChB;SACF;QACD,sBAAsB;QACtB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;KACnD;CACoC,CAAC","sourcesContent":["// Sky: raymarched daytime clouds with you composited over them. Fully\n// procedural; no image layer.\n//\n// A packaged composite consumers can list by importing this module.\n//\n// Native variant. The thumbnail is the string id the prebuild plugin\n// (app.plugin.js) bundles `clouds.thumb.webp` as into the native app target;\n// `resolveImageUri` looks it up in Bundle.main. The web sibling (clouds.web.ts)\n// keeps the `Asset.fromModule(...).uri` pattern; mirrors the other composites.\n\nimport type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';\n\nexport const clouds = {\n  name: 'Daytime',\n  taxonomy: ['Shaders', 'Sky'],\n  thumbnail: 'clouds-thumb',\n  layers: [\n    {\n      id: 'sky',\n      shader: 'clouds',\n      uniforms: {\n        uSkyLowColor: [0.09, 0.63, 0.95],\n        uSkyHighColor: [0.04, 0.03, 0.86],\n        uCloudLightColor: [1.0, 0.91, 0.77],\n        uCloudDarkColor: [0.3, 0.3, 0.5],\n        uExposure: 1.27,\n        uStepSize: 0.16,\n        uCloudSpeed: 0.52,\n        uCloudScale: 1.08,\n        uDensity: 0.245,\n        uCoverage: 0.47,\n        uSoftness: 0.28,\n      },\n    },\n    // You, under the sky.\n    { id: 'you', shader: 'direct', target: 'subject' },\n  ],\n} as const satisfies KaleidoscopePreset;\n"]}

package/dist/catalog/composites/clouds/clouds.web.d.ts

@@ -0,0 +1,27 @@
+export declare const clouds: {
+    readonly name: 'Daytime';
+    readonly taxonomy: readonly ["Shaders", "Sky"];
+    readonly thumbnail: string;
+    readonly layers: readonly [{
+        readonly id: 'sky';
+        readonly shader: 'clouds';
+        readonly uniforms: {
+            readonly uSkyLowColor: readonly [0.09, 0.63, 0.95];
+            readonly uSkyHighColor: readonly [0.04, 0.03, 0.86];
+            readonly uCloudLightColor: readonly [1, 0.91, 0.77];
+            readonly uCloudDarkColor: readonly [0.3, 0.3, 0.5];
+            readonly uExposure: 1.27;
+            readonly uStepSize: 0.16;
+            readonly uCloudSpeed: 0.52;
+            readonly uCloudScale: 1.08;
+            readonly uDensity: 0.245;
+            readonly uCoverage: 0.47;
+            readonly uSoftness: 0.28;
+        };
+    }, {
+        readonly id: 'you';
+        readonly shader: 'direct';
+        readonly target: 'subject';
+    }];
+};
+//# sourceMappingURL=clouds.web.d.ts.map

package/dist/catalog/composites/clouds/clouds.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clouds.web.d.ts","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.web.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;mBACX,SAAS;;;;qBAKP,KAAK;yBACD,QAAQ;;qBAEd,YAAY;qBACZ,aAAa;qBACb,gBAAgB;qBAChB,eAAe;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;qBACf,WAAW,EAAE,IAAI;qBACjB,WAAW,EAAE,IAAI;qBACjB,QAAQ,EAAE,KAAK;qBACf,SAAS,EAAE,IAAI;qBACf,SAAS,EAAE,IAAI;;;qBAIb,KAAK;yBAAU,QAAQ;yBAAU,SAAS;;CAEb,CAAC"}

package/dist/catalog/composites/clouds/clouds.web.js

@@ -0,0 +1,39 @@
+"use strict";
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time;
+// safe on web (react-native-web has no Image.resolveAssetSource and `.uri` is
+// set synchronously by fromModule). Native is clouds.ts (a string-id thumbnail
+// the prebuild plugin bundles). Mirrors the other composites' {<id>.ts,<id>.web.ts}.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clouds = void 0;
+const expo_asset_1 = require("expo-asset");
+const clouds_thumb_webp_1 = __importDefault(require("./clouds.thumb.webp"));
+exports.clouds = {
+    name: 'Daytime',
+    taxonomy: ['Shaders', 'Sky'],
+    thumbnail: expo_asset_1.Asset.fromModule(clouds_thumb_webp_1.default).uri,
+    layers: [
+        {
+            id: 'sky',
+            shader: 'clouds',
+            uniforms: {
+                uSkyLowColor: [0.09, 0.63, 0.95],
+                uSkyHighColor: [0.04, 0.03, 0.86],
+                uCloudLightColor: [1.0, 0.91, 0.77],
+                uCloudDarkColor: [0.3, 0.3, 0.5],
+                uExposure: 1.27,
+                uStepSize: 0.16,
+                uCloudSpeed: 0.52,
+                uCloudScale: 1.08,
+                uDensity: 0.245,
+                uCoverage: 0.47,
+                uSoftness: 0.28,
+            },
+        },
+        // You, under the sky.
+        { id: 'you', shader: 'direct', target: 'subject' },
+    ],
+};
+//# sourceMappingURL=clouds.web.js.map

package/dist/catalog/composites/clouds/clouds.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clouds.web.js","sourceRoot":"","sources":["../../../../catalog/composites/clouds/clouds.web.ts"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,qFAAqF;;;;;;AAErF,2CAAmC;AAEnC,4EAA8C;AAEjC,QAAA,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC;IAC5B,SAAS,EAAE,kBAAK,CAAC,UAAU,CAAC,2BAAW,CAAC,CAAC,GAAG;IAC5C,MAAM,EAAE;QACN;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE;gBACR,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBAChC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBACjC,gBAAgB,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;gBACnC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;gBAChC,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI;aAChB;SACF;QACD,sBAAsB;QACtB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;KACnD;CACoC,CAAC","sourcesContent":["// Web variant. Resolves the thumbnail URI via expo-asset at module-load time;\n// safe on web (react-native-web has no Image.resolveAssetSource and `.uri` is\n// set synchronously by fromModule). Native is clouds.ts (a string-id thumbnail\n// the prebuild plugin bundles). Mirrors the other composites' {<id>.ts,<id>.web.ts}.\n\nimport { Asset } from 'expo-asset';\nimport type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';\nimport cloudsThumb from './clouds.thumb.webp';\n\nexport const clouds = {\n  name: 'Daytime',\n  taxonomy: ['Shaders', 'Sky'],\n  thumbnail: Asset.fromModule(cloudsThumb).uri,\n  layers: [\n    {\n      id: 'sky',\n      shader: 'clouds',\n      uniforms: {\n        uSkyLowColor: [0.09, 0.63, 0.95],\n        uSkyHighColor: [0.04, 0.03, 0.86],\n        uCloudLightColor: [1.0, 0.91, 0.77],\n        uCloudDarkColor: [0.3, 0.3, 0.5],\n        uExposure: 1.27,\n        uStepSize: 0.16,\n        uCloudSpeed: 0.52,\n        uCloudScale: 1.08,\n        uDensity: 0.245,\n        uCoverage: 0.47,\n        uSoftness: 0.28,\n      },\n    },\n    // You, under the sky.\n    { id: 'you', shader: 'direct', target: 'subject' },\n  ],\n} as const satisfies KaleidoscopePreset;\n"]}

package/llms.txt

@@ -484,7 +484,7 @@ Each book entry is a `KaleidoscopePreset`:
 
 - `name`: human label shown in the picker.
 - `taxonomy`: the picker's grouping path, root first: `[group]` or `[group, category]` (e.g. `['Backgrounds', 'Office']`). Group is the tab; category is the second-level menu. (This field is named `taxonomy`, NOT `category`.)
-- `thumbnail?`: optional preview source for the picker tile.
+- `thumbnail?`: optional preview source for the picker tile. Pass a bundled-asset reference: a bare `require('./thumb.webp')` (what `bun run thumbs` emits) or an imported image module (`thumbnail: officeDark`). Do NOT use `Asset.fromModule(require('./thumb.webp')).uri` in a single-file book; that string renders on web but is empty in a native release build.
 - `controls?`: optional editor component for the live-controls panel (see below).
 - `layers`: the painter's stack, rendered back to front. A layer is `{ id, shader, target?, blend? }` plus the shader's own fields:
   - `shader: 'image'` takes a `source` (a bundled image id on native; a URL/data-URI also allowed on web).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webrtc-kaleidoscope",
-  "version": "2.7.7",
+  "version": "2.7.8",
   "description": "Live video effects (blur, background replacement, generative backgrounds, flip/rotate) for react-native-webrtc, packaged as a managed-Expo-friendly Expo Module. Working on web, Android, and iOS. Active development.",
   "keywords": [
     "react-native",
@@ -331,6 +331,7 @@
     "./composites/clouds": {
       "types": "./dist/catalog/composites/clouds/clouds.d.ts",
       "react-native": "./catalog/composites/clouds/clouds.ts",
+      "browser": "./dist/catalog/composites/clouds/clouds.web.js",
       "import": "./dist/catalog/composites/clouds/clouds.js",
       "default": "./dist/catalog/composites/clouds/clouds.js"
     },
@@ -565,7 +566,8 @@
     "lint:fix": "biome check --write",
     "format": "biome format --write .",
     "test": "bun test",
-    "check": "bun run lint:fix && bun run typecheck && bun run typecheck:test && bun run typecheck:demo && bun run check:react-compiler && bun run check:plugin && bun run build && (cd demo && bun run build) && bun run test && bun run check:knip && bun run check:package && bun run check:kotlin && bun run check:swift",
+    "check": "bun run lint:fix && bun run typecheck && bun run typecheck:test && bun run typecheck:demo && bun run check:react-compiler && bun run check:assets && bun run check:plugin && bun run build && (cd demo && bun run build) && bun run test && bun run check:knip && bun run check:package && bun run check:kotlin && bun run check:swift",
+    "check:assets": "bun run scripts/check-book-assets.ts",
     "check:package": "publint --strict",
     "check:knip": "knip",
     "check:react-compiler": "eslint src/components 'catalog/composites/**/*.controls.tsx' 'catalog/shaders/**/*.form.tsx'",