react-native-webrtc-kaleidoscope 2.3.0 → 2.5.0

package/ios/KaleidoscopeModule/shaders/GENERATIVE.txt

@@ -1,9 +1,13 @@
 anamorphic-lensflare
+aurora-silk
 clouds
 corporate-blobs
 fireflies
 godrays
+halftone-waves
+kaleidoscope
 light-beams-and-motes
 nebula
+neo-memphis
 plasma
 simianlights

package/ios/KaleidoscopeModule/shaders/SHADERS.txt

@@ -1,4 +1,5 @@
 anamorphic-lensflare.frag
+aurora-silk.frag
 clouds.frag
 composite-blit.frag
 composite-blur.frag
@@ -9,8 +10,11 @@ composite-subject.frag
 corporate-blobs.frag
 fireflies.frag
 godrays.frag
+halftone-waves.frag
+kaleidoscope.frag
 light-beams-and-motes.frag
 nebula.frag
+neo-memphis.frag
 passthrough.vert
 plasma.frag
 simianlights.frag

package/ios/KaleidoscopeModule/shaders/aurora-silk.metalsrc

@@ -0,0 +1,51 @@
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using namespace metal;
+
+struct main0_out
+{
+    float4 oColor [[color(0)]];
+};
+
+struct main0_in
+{
+    float2 vUv [[user(locn0)]];
+};
+
+fragment main0_out main0(main0_in in [[stage_in]], constant float2& uResolution [[buffer(0)]], constant float& uAngle [[buffer(1)]], constant float& uTime [[buffer(2)]], constant float& uSpeed [[buffer(3)]], constant float3& uColorLow [[buffer(4)]], constant float3& uColorHigh [[buffer(5)]], constant float& uRibbons [[buffer(6)]], constant float& uCalm [[buffer(7)]], constant float& uSoftness [[buffer(8)]], constant float3& uRibbonColor [[buffer(9)]], constant float& uStyle [[buffer(10)]])
+{
+    main0_out out = {};
+    float2 _80 = ((in.vUv * uResolution) - (uResolution * 0.5)) / float2(uResolution.y);
+    float _87 = cos(uAngle);
+    float _90 = sin(uAngle);
+    float2 _103 = float2x2(float2(_87, -_90), float2(_90, _87)) * _80;
+    float _109 = uTime * uSpeed;
+    float _112 = _103.y;
+    float _139 = fast::clamp(uRibbons, 0.0, 5.0);
+    float _149 = 1.0 - (uCalm * (1.0 - smoothstep(0.1500000059604644775390625, 0.62000000476837158203125, length(_80))));
+    float3 _364;
+    _364 = mix(uColorLow, uColorHigh, float3(fast::clamp(((_112 * 0.85000002384185791015625) + 0.5) + (0.039999999105930328369140625 * sin(_109 * 0.17000000178813934326171875)), 0.0, 1.0)));
+    float3 _298;
+    for (int _363 = 0; _363 < 5; _364 = _298, _363++)
+    {
+        float _165 = float(_363);
+        if (_165 >= _139)
+        {
+            break;
+        }
+        float _195 = _103.x;
+        float _204 = (_195 * 1.39999997615814208984375) + (_109 * (0.100000001490116119384765625 + (0.039999999105930328369140625 * _165)));
+        float _207 = _165 * 17.0;
+        float _319 = floor(_204);
+        float _321 = fract(_204);
+        float _247 = mix(0.0599999986588954925537109375, 0.1500000059604644775390625, fract(sin((_165 * 7.30000019073486328125) + 1.0) * 43758.546875));
+        float _255 = mix(0.008000000379979610443115234375, _247 * 1.60000002384185791015625, uSoftness);
+        float _267 = (1.0 - smoothstep(_247 - _255, _247 + _255, abs(_112 - ((((-0.4199999868869781494140625) + ((0.839999973773956298828125 * (_165 + 0.5)) / _139)) + (0.070000000298023223876953125 * sin((_109 * 0.189999997615814208984375) + (_165 * 1.7000000476837158203125)))) + (((mix(fract(sin(_319 + _207) * 43758.546875), fract(sin((_319 + 1.0) + _207) * 43758.546875), (_321 * _321) * (3.0 - (2.0 * _321))) - 0.5) * 0.5) + (0.100000001490116119384765625 * sin(((_195 * 2.2999999523162841796875) + (_109 * (0.2599999904632568359375 + (0.0599999986588954925537109375 * _165)))) + (_165 * 2.099999904632568359375)))))))) * _149;
+        float3 _277 = mix(uRibbonColor, uColorHigh, float3(_165 * 0.12000000476837158203125));
+        _298 = mix(mix(_364, _277, float3(_267 * 0.85000002384185791015625)), _364 + ((_277 * _267) * 0.4000000059604644775390625), float3(uStyle));
+    }
+    out.oColor = float4(_364, 1.0);
+    return out;
+}
+

package/ios/KaleidoscopeModule/shaders/halftone-waves.metalsrc

@@ -0,0 +1,41 @@
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using namespace metal;
+
+struct main0_out
+{
+    float4 oColor [[color(0)]];
+};
+
+struct main0_in
+{
+    float2 vUv [[user(locn0)]];
+};
+
+fragment main0_out main0(main0_in in [[stage_in]], constant float2& uResolution [[buffer(0)]], constant float& uPitch [[buffer(1)]], constant float& uTime [[buffer(2)]], constant float& uSpeed [[buffer(3)]], constant float& uAngle [[buffer(4)]], constant float& uCalm [[buffer(5)]], constant float& uDotSize [[buffer(6)]], constant float& uWaveAmp [[buffer(7)]], constant float& uShape [[buffer(8)]], constant float3& uPaper [[buffer(9)]], constant float3& uInk [[buffer(10)]])
+{
+    main0_out out = {};
+    float2 _29 = ((in.vUv * uResolution) - (uResolution * 0.5)) / float2(uResolution.y);
+    float2 _38 = _29 * uPitch;
+    float2 _53 = (floor(_38) + float2(0.5)) / float2(uPitch);
+    float _59 = uTime * uSpeed;
+    float _70 = uAngle + 2.2000000476837158203125;
+    float _123 = uDotSize * mix(1.0 - uWaveAmp, 1.0 + uWaveAmp, mix((0.5 + (0.25 * sin((dot(_53, float2(cos(uAngle), sin(uAngle))) * 3.099999904632568359375) + _59))) + (0.25 * sin((dot(_53, float2(cos(_70), sin(_70))) * 4.69999980926513671875) - (_59 * 0.769999980926513671875))), 0.5, uCalm * (1.0 - smoothstep(0.1500000059604644775390625, 0.62000000476837158203125, length(_29)))));
+    float2 _126 = abs(fract(_38) - float2(0.5));
+    float _130 = _126.x;
+    float _132 = _126.y;
+    float _138 = length(_126);
+    float _198;
+    if (uShape < 1.0)
+    {
+        _198 = mix((_130 + _132) * 0.707099974155426025390625, _138, fast::clamp(uShape, 0.0, 1.0));
+    }
+    else
+    {
+        _198 = mix(_138, fast::max(_130, _132), fast::clamp(uShape - 1.0, 0.0, 1.0));
+    }
+    out.oColor = float4(mix(uPaper, uInk, float3(smoothstep(_123 + 0.0599999986588954925537109375, _123 - 0.0599999986588954925537109375, _198))), 1.0);
+    return out;
+}
+

package/ios/KaleidoscopeModule/shaders/kaleidoscope.metalsrc

@@ -0,0 +1,45 @@
+#pragma clang diagnostic ignored "-Wmissing-prototypes"
+
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using namespace metal;
+
+struct main0_out
+{
+    float4 oColor [[color(0)]];
+};
+
+struct main0_in
+{
+    float2 vUv [[user(locn0)]];
+};
+
+// Implementation of the GLSL mod() function, which is slightly different than Metal fmod()
+template<typename Tx, typename Ty>
+inline Tx mod(Tx x, Ty y)
+{
+    return x - y * floor(x / y);
+}
+
+fragment main0_out main0(main0_in in [[stage_in]], constant float2& uResolution [[buffer(0)]], constant float& uTime [[buffer(1)]], constant float& uRotate [[buffer(2)]], constant float& uZoom [[buffer(3)]], constant float& uSegments [[buffer(4)]], constant float& uSpeed [[buffer(5)]], constant float3& uColorA [[buffer(6)]], constant float3& uColorB [[buffer(7)]], constant float3& uColorC [[buffer(8)]], constant float& uCalm [[buffer(9)]])
+{
+    main0_out out = {};
+    float2 _29 = ((in.vUv * uResolution) - (uResolution * 0.5)) / float2(uResolution.y);
+    float _33 = length(_29);
+    float _39 = uTime * uRotate;
+    float _42 = cos(_39);
+    float _45 = sin(_39);
+    float2 _58 = float2x2(float2(_42, -_45), float2(_45, _42)) * _29;
+    float _78 = fast::max(3.0, floor(uSegments));
+    float _94 = 3.1415927410125732421875 / _78;
+    float _96 = abs(mod(atan2(_58.y, _58.x + 9.9999997473787516355514526367188e-06), 6.283185482025146484375 / _78) - _94);
+    float2 _104 = float2(cos(_96), sin(_96)) * ((_33 * uZoom) * (1.0 + (0.0599999986588954925537109375 * sin(uTime * 0.23000000417232513427734375))));
+    float _109 = uTime * uSpeed;
+    float _112 = _104.x;
+    float _121 = _104.y;
+    float _150 = (sin((_112 * 6.0) + _109) + sin(((_112 + _121) * 4.19999980926513671875) - (_109 * 0.699999988079071044921875))) + sin((length(_104 - float2(0.89999997615814208984375 + (0.25 * sin(_109 * 0.310000002384185791015625)), 0.0)) * 7.0) + (_109 * 1.10000002384185791015625));
+    out.oColor = float4(mix(mix(mix(uColorA, uColorB, float3(0.5 + (0.5 * sin(_150)))), uColorC, float3(smoothstep(0.25, 0.89999997615814208984375, 0.5 + (0.5 * sin(sin(((_121 * 5.0) - (_109 * 0.89999997615814208984375)) + sin((_112 * 3.099999904632568359375) + (_109 * 0.4000000059604644775390625))) + (_150 * 0.5)))) * 0.64999997615814208984375)) * (1.0 - (0.180000007152557373046875 * (smoothstep(0.0350000001490116119384765625, 0.0, abs(_96 - _94)) + smoothstep(0.0350000001490116119384765625, 0.0, _96)))), (uColorA + uColorB) * 0.5, float3((uCalm * (1.0 - smoothstep(0.1500000059604644775390625, 0.62000000476837158203125, _33))) * 0.60000002384185791015625)), 1.0);
+    return out;
+}
+

package/ios/KaleidoscopeModule/shaders/neo-memphis.metalsrc

@@ -0,0 +1,181 @@
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using namespace metal;
+
+struct main0_out
+{
+    float4 oColor [[color(0)]];
+};
+
+struct main0_in
+{
+    float2 vUv [[user(locn0)]];
+};
+
+fragment main0_out main0(main0_in in [[stage_in]], constant float3& uBgColor [[buffer(0)]], constant float& uDensity [[buffer(1)]], constant float& uOutline [[buffer(2)]], constant float3& uColorA [[buffer(3)]], constant float3& uColorB [[buffer(4)]], constant float3& uColorC [[buffer(5)]], constant float2& uResolution [[buffer(6)]], constant float& uTime [[buffer(7)]], constant float& uDrift [[buffer(8)]], constant float& uScale [[buffer(9)]], constant float& uCalm [[buffer(10)]])
+{
+    main0_out out = {};
+    float _603;
+    float2 _448 = ((in.vUv * uResolution) - (uResolution * 0.5)) / float2(uResolution.y);
+    float _457 = uTime * uDrift;
+    float2 _464 = _448 * uScale;
+    float2 _477 = ((_464 * 2.2999999523162841796875) + float2(_457 * 0.04500000178813934326171875, _457 * (-0.02999999932944774627685546875))) + float2(51.700000762939453125);
+    float _1460;
+    float3 _1461;
+    do
+    {
+        float2 _817 = fract((floor(_477) + float2(7.0)) * float2(234.339996337890625, 435.345001220703125));
+        float2 _825 = _817 + float2(dot(_817, _817 + float2(34.229999542236328125)));
+        float _831 = fract(_825.x * _825.y);
+        _603 = uDensity;
+        if (_831 > _603)
+        {
+            _1461 = uBgColor;
+            _1460 = 0.0;
+            break;
+        }
+        float _612 = fract(_831 * 113.76999664306640625);
+        float _626 = (fract(_831 * 57.310001373291015625) * 6.283185482025146484375) + ((_457 * (_612 - 0.5)) * 0.800000011920928955078125);
+        float _628 = cos(_626);
+        float _630 = sin(_626);
+        float _634 = _831 * 6.283185482025146484375;
+        float2 _656 = float2x2(float2(_628, -_630), float2(_630, _628)) * ((fract(_477) - float2(0.5)) - (float2(sin((_457 * 0.60000002384185791015625) + _634), cos((_457 * 0.800000011920928955078125) + _634)) * 0.039999999105930328369140625));
+        float _658 = mix(0.14000000059604644775390625, 0.300000011920928955078125, _612);
+        float _661 = _658 * 0.60000002384185791015625;
+        float _1452;
+        if ((fract(_831 * 431.1300048828125) * 6.0) < 3.0)
+        {
+            _1452 = length(_656) - (_658 * 0.2700000107288360595703125);
+        }
+        else
+        {
+            float _678 = _658 * 0.1319999992847442626953125;
+            float2 _836 = abs(_656);
+            float2 _838 = _836 - float2(_661, _678);
+            float2 _855 = _836 - float2(_678, _661);
+            _1452 = fast::min(length(fast::max(_838, float2(0.0))) + fast::min(fast::max(_838.x, _838.y), 0.0), length(fast::max(_855, float2(0.0))) + fast::min(fast::max(_855.x, _855.y), 0.0));
+        }
+        float _796 = fract(_831 * 769.22998046875) * 3.0;
+        float3 _1459;
+        if (_796 < 1.0)
+        {
+            _1459 = uColorA;
+        }
+        else
+        {
+            _1459 = select(uColorC, uColorB, bool3(_796 < 2.0));
+        }
+        _1461 = _1459;
+        _1460 = (fract(_831 * 891.71002197265625) < uOutline) ? smoothstep(0.01200000010430812835693359375, -0.01200000010430812835693359375, abs(_1452 + (_658 * 0.0360000021755695343017578125)) - (_658 * 0.05400000512599945068359375)) : smoothstep(0.01200000010430812835693359375, -0.01200000010430812835693359375, _1452);
+        break;
+    } while(false);
+    float2 _509 = _464 + float2(_457 * (-0.0599999986588954925537109375), _457 * 0.039999999105930328369140625);
+    float _1481;
+    float3 _1482;
+    do
+    {
+        float2 _1234 = fract(floor(_509) * float2(234.339996337890625, 435.345001220703125));
+        float2 _1242 = _1234 + float2(dot(_1234, _1234 + float2(34.229999542236328125)));
+        float _1248 = fract(_1242.x * _1242.y);
+        if (_1248 > _603)
+        {
+            _1482 = uBgColor;
+            _1481 = 0.0;
+            break;
+        }
+        float _1029 = fract(_1248 * 113.76999664306640625);
+        float _1043 = (fract(_1248 * 57.310001373291015625) * 6.283185482025146484375) + ((_457 * (_1029 - 0.5)) * 0.800000011920928955078125);
+        float _1045 = cos(_1043);
+        float _1047 = sin(_1043);
+        float _1051 = _1248 * 6.283185482025146484375;
+        float2 _1073 = float2x2(float2(_1045, -_1047), float2(_1047, _1045)) * ((fract(_509) - float2(0.5)) - (float2(sin((_457 * 0.60000002384185791015625) + _1051), cos((_457 * 0.800000011920928955078125) + _1051)) * 0.039999999105930328369140625));
+        float _1075 = mix(0.14000000059604644775390625, 0.300000011920928955078125, _1029);
+        float _1080 = fract(_1248 * 431.1300048828125) * 6.0;
+        float _1475;
+        if (_1080 < 1.0)
+        {
+            _1475 = length(_1073) - _1075;
+        }
+        else
+        {
+            float _1476;
+            if (_1080 < 2.0)
+            {
+                _1476 = abs(length(_1073) - (_1075 * 0.800000011920928955078125)) - (_1075 * 0.180000007152557373046875);
+            }
+            else
+            {
+                float _1477;
+                if (_1080 < 3.0)
+                {
+                    float _1289 = abs(_1073.x) - _1075;
+                    float2 _1427 = _1073;
+                    _1427.x = _1289;
+                    float _1295 = _1073.y + (_1075 * 0.57735025882720947265625);
+                    float2 _1430 = _1427;
+                    _1430.y = _1295;
+                    float _1301 = 1.73205077648162841796875 * _1295;
+                    float2 _1472;
+                    if ((_1289 + _1301) > 0.0)
+                    {
+                        _1472 = float2(_1289 - _1301, ((-1.73205077648162841796875) * _1289) - _1295) * 0.5;
+                    }
+                    else
+                    {
+                        _1472 = _1430;
+                    }
+                    float2 _1440 = _1472;
+                    _1440.x = _1472.x - fast::clamp(_1472.x, (-2.0) * _1075, 0.0);
+                    _1477 = (-length(_1440)) * sign(_1472.y);
+                }
+                else
+                {
+                    float _1478;
+                    if (_1080 < 4.0)
+                    {
+                        float _1142 = _1075 * 0.23999999463558197021484375;
+                        float2 _1340 = abs(_1073);
+                        float2 _1342 = _1340 - float2(_1075, _1142);
+                        float2 _1359 = _1340 - float2(_1142, _1075);
+                        _1478 = fast::min(length(fast::max(_1342, float2(0.0))) + fast::min(fast::max(_1342.x, _1342.y), 0.0), length(fast::max(_1359, float2(0.0))) + fast::min(fast::max(_1359.x, _1359.y), 0.0));
+                    }
+                    else
+                    {
+                        float _1479;
+                        if (_1080 < 5.0)
+                        {
+                            float2 _1376 = abs(_1073) - float2(_1075 * 0.7799999713897705078125);
+                            _1479 = length(fast::max(_1376, float2(0.0))) + fast::min(fast::max(_1376.x, _1376.y), 0.0);
+                        }
+                        else
+                        {
+                            float _1170 = _1073.x;
+                            _1479 = fast::max(abs(_1073.y - ((0.4000000059604644775390625 * _1075) * sin((_1170 / _1075) * 6.5))) - (_1075 * 0.17000000178813934326171875), abs(_1170) - _1075);
+                        }
+                        _1478 = _1479;
+                    }
+                    _1477 = _1478;
+                }
+                _1476 = _1477;
+            }
+            _1475 = _1476;
+        }
+        float _1213 = fract(_1248 * 769.22998046875) * 3.0;
+        float3 _1480;
+        if (_1213 < 1.0)
+        {
+            _1480 = uColorA;
+        }
+        else
+        {
+            _1480 = select(uColorC, uColorB, bool3(_1213 < 2.0));
+        }
+        _1482 = _1480;
+        _1481 = (fract(_1248 * 891.71002197265625) < uOutline) ? smoothstep(0.01200000010430812835693359375, -0.01200000010430812835693359375, abs(_1475 + (_1075 * 0.0599999986588954925537109375)) - (_1075 * 0.0900000035762786865234375)) : smoothstep(0.01200000010430812835693359375, -0.01200000010430812835693359375, _1475);
+        break;
+    } while(false);
+    out.oColor = float4(mix(mix(uBgColor, mix(uBgColor, _1461, float3(0.550000011920928955078125)), float3(_1460)), _1482, float3(_1481 * (1.0 - (uCalm * (1.0 - smoothstep(0.1500000059604644775390625, 0.62000000476837158203125, length(_448))))))), 1.0);
+    return out;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webrtc-kaleidoscope",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "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",
@@ -18,7 +18,7 @@
   ],
   "author": "the-simian <info@simiancraft.com>",
   "license": "MIT",
-  "homepage": "https://github.com/simiancraft/react-native-webrtc-kaleidoscope#readme",
+  "homepage": "https://simiancraft.github.io/react-native-webrtc-kaleidoscope/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/simiancraft/react-native-webrtc-kaleidoscope.git"
@@ -432,6 +432,34 @@
       "import": "./dist/catalog/shaders/plasma/plasma.form.js",
       "default": "./dist/catalog/shaders/plasma/plasma.form.js"
     },
+    "./shaders/kaleidoscope/form": {
+      "types": "./dist/catalog/shaders/kaleidoscope/kaleidoscope.form.d.ts",
+      "react-native": "./catalog/shaders/kaleidoscope/kaleidoscope.form.tsx",
+      "browser": "./dist/catalog/shaders/kaleidoscope/kaleidoscope.form.js",
+      "import": "./dist/catalog/shaders/kaleidoscope/kaleidoscope.form.js",
+      "default": "./dist/catalog/shaders/kaleidoscope/kaleidoscope.form.js"
+    },
+    "./shaders/neo-memphis/form": {
+      "types": "./dist/catalog/shaders/neo-memphis/neo-memphis.form.d.ts",
+      "react-native": "./catalog/shaders/neo-memphis/neo-memphis.form.tsx",
+      "browser": "./dist/catalog/shaders/neo-memphis/neo-memphis.form.js",
+      "import": "./dist/catalog/shaders/neo-memphis/neo-memphis.form.js",
+      "default": "./dist/catalog/shaders/neo-memphis/neo-memphis.form.js"
+    },
+    "./shaders/halftone-waves/form": {
+      "types": "./dist/catalog/shaders/halftone-waves/halftone-waves.form.d.ts",
+      "react-native": "./catalog/shaders/halftone-waves/halftone-waves.form.tsx",
+      "browser": "./dist/catalog/shaders/halftone-waves/halftone-waves.form.js",
+      "import": "./dist/catalog/shaders/halftone-waves/halftone-waves.form.js",
+      "default": "./dist/catalog/shaders/halftone-waves/halftone-waves.form.js"
+    },
+    "./shaders/aurora-silk/form": {
+      "types": "./dist/catalog/shaders/aurora-silk/aurora-silk.form.d.ts",
+      "react-native": "./catalog/shaders/aurora-silk/aurora-silk.form.tsx",
+      "browser": "./dist/catalog/shaders/aurora-silk/aurora-silk.form.js",
+      "import": "./dist/catalog/shaders/aurora-silk/aurora-silk.form.js",
+      "default": "./dist/catalog/shaders/aurora-silk/aurora-silk.form.js"
+    },
     "./shaders/blur/form": {
       "types": "./dist/catalog/shaders/blur/blur.form.d.ts",
       "react-native": "./catalog/shaders/blur/blur.form.tsx",
@@ -496,10 +524,14 @@
     "./expo-module.config.json": "./expo-module.config.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "kaleidoscope-thumbnails": "./tools/thumbnails/make-thumbnails.ts"
+  },
   "files": [
     "src",
     "catalog",
     "dist",
+    "tools",
     "android/src",
     "android/build.gradle",
     "ios",
@@ -540,6 +572,7 @@
     "check:shaders": "bun run build:shaders && git diff --exit-code -- android/src/main/java/com/simiancraft/kaleidoscope/gpu/ShadersGenerated.kt web-driver/shaders.generated.ts",
     "bench:shader": "bun run scripts/shader-cost.ts",
     "shader:view": "bun run scripts/shader-view.ts",
+    "thumbs": "bun run build && bun tools/thumbnails/make-thumbnails.ts --book demo/kaleidoscope.preset-book.ts --out demo/assets/thumbnails --repo",
     "demo": "bun run build && cd demo && bun run start",
     "demo:wsl": "bun run build && cd demo && bun run start:wsl",
     "demo:ios": "bun run build && cd demo && bun run ios",
@@ -606,7 +639,7 @@
     "lefthook": "^2.1.9",
     "livekit-client": "^2.0.0",
     "nativewind": "4.2.x",
-    "playwright": "^1.60.0",
+    "playwright": "1.60.0",
     "publint": "^0.3.18",
     "react": "18.2.0",
     "react-native": "0.74.5",

package/tools/thumbnails/book-loader.ts

@@ -0,0 +1,104 @@
+// Loads a preset book as DATA by executing it under Bun with three shims
+// (issue #65). The book is real TypeScript that imports React control
+// components, expo-asset, and bundled images; none of those matter to a
+// thumbnail, so each is replaced with the smallest stand-in that keeps the
+// module graph executable:
+//
+//   - `expo-asset`: `Asset.fromModule(m).uri` returns the module value itself,
+//     which (via the asset shim below) is the file's absolute path.
+//   - control components (`*.form.*`, `*.controls.*`): a Proxy that satisfies
+//     any named import without pulling React in; presets reference these as
+//     values but thumbnails never render them.
+//   - bundled images (`.webp` / `.png` / `.jpg`): the file's absolute path as
+//     the default export, so an image layer's `source` resolves to something
+//     the CLI can read and embed.
+//
+// Executing (vs static parsing, which the prebuild plugin does for asset
+// collection) is what yields exact per-preset layer stacks and uniform values
+// with no fragile object-literal parsing. This is Bun-only by design; the
+// thumbnail maker is an opt-in dev command, not runtime code.
+
+import path from 'node:path';
+import { plugin } from 'bun';
+
+/** One layer as authored in a book (the subset thumbnails care about). */
+type LoadedLayer = {
+  readonly id?: string;
+  readonly shader: string;
+  readonly target?: string;
+  readonly blend?: string;
+  readonly source?: string;
+  readonly uniforms?: Record<string, number | readonly number[]>;
+};
+
+/** One preset as authored in a book. */
+export type LoadedPreset = {
+  readonly name: string;
+  readonly taxonomy: readonly string[];
+  readonly thumbnail?: string | number;
+  readonly layers: readonly LoadedLayer[];
+};
+
+plugin({
+  name: 'kaleidoscope-thumbnails-book-shims',
+  setup(build) {
+    // Path-based onLoad (not onResolve, which Bun's runtime plugins do not
+    // reliably fire): any file inside the expo-asset package becomes the
+    // shim, so its entry never executes and never drags React Native's
+    // Flow-typed asset registry in.
+    build.onLoad({ filter: /node_modules\/expo-asset\/.*\.[cm]?js$/ }, () => ({
+      contents: [
+        'function unwrap(m) {',
+        '  if (typeof m === "string") return m;',
+        '  try { if (m && typeof m.default === "string") return m.default; } catch {}',
+        '  try { if (m && typeof m.uri === "string") return m.uri; } catch {}',
+        '  try { return String(m); } catch { return ""; }',
+        '}',
+        'export const Asset = { fromModule: (m) => ({ uri: unwrap(m) }) };',
+      ].join('\n'),
+      loader: 'js',
+    }));
+    // Control components are imported by NAME, and ESM named imports need the
+    // name to exist; the name is convention-derived from the filename
+    // (`clouds.controls.js` -> CloudsControls, `plasma.form.tsx` -> PlasmaForm),
+    // so the stub synthesizes exactly that export.
+    build.onLoad({ filter: /\.(form|controls)\.(tsx|jsx|ts|js)$/ }, (args) => {
+      const base = path.basename(args.path);
+      const stem = base.split('.')[0] ?? 'stub';
+      const kind = base.includes('.controls.') ? 'Controls' : 'Form';
+      const pascal = stem
+        .split('-')
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+      const name = `${pascal}${kind}`;
+      return {
+        contents: `export const ${name} = () => null;\nexport default ${name};`,
+        loader: 'js',
+      };
+    });
+    // Bun materializes plugin modules as ESM namespaces even when authored as
+    // CJS, so the path rides the default export; `import x from './x.webp'`
+    // unwraps it natively and the Asset shim's unwrap() handles the
+    // `require('./x.webp')` namespace form.
+    build.onLoad({ filter: /\.(webp|png|jpe?g|gif)$/ }, (args) => ({
+      contents: `export default ${JSON.stringify(args.path)};`,
+      loader: 'js',
+    }));
+  },
+});
+
+/**
+ * Import the book and return its preset map. Accepts the conventional
+ * `export const presets` (the demo's shape) or a default export.
+ */
+export async function loadPresetBook(bookPath: string): Promise<Record<string, LoadedPreset>> {
+  const abs = path.resolve(bookPath);
+  const mod = (await import(abs)) as { presets?: unknown; default?: unknown };
+  const book = mod.presets ?? mod.default;
+  if (!book || typeof book !== 'object') {
+    throw new Error(
+      `${bookPath} did not export a preset book (expected \`export const presets = {...}\` or a default export).`,
+    );
+  }
+  return book as Record<string, LoadedPreset>;
+}