create-catalyst-app 1.2.0-canary.2 → 1.2.0-canary.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app",
     "bin": "scripts/cli.cjs",
-    "version": "1.2.0-canary.2",
+    "version": "1.2.0-canary.3",
     "engines": {
         "node": ">=20.12.0"
     },

package/templates/common/public/splashscreen.html

@@ -5,7 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <title>Catalyst</title>
 <style>
-  /* Must equal WEBVIEW_CONFIG.splashScreen.backgroundColor so the native layer and this page are one surface */
+  /* Must equal the native splash colour so the native layer and this page are one surface. The native build
+     injects WEBVIEW_CONFIG.splashScreen.backgroundColor as window.__CATALYST_SPLASH__ and the script sets --ink
+     from it; this value is the fallback for a page opened on its own. */
   :root {
     --ink: #0b0a14;
     --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
@@ -162,8 +164,12 @@ const RAYS=[{"g":[0,89.75,85.3,89.75,0,1,0],"p":[0,1794,3,1754,14,1716,30,1680,5
 (function () {
   var still = /still/.test(location.hash);
   if (still) document.documentElement.className = 'still';
+  var cfg = window.__CATALYST_SPLASH__;
+  if (cfg && cfg.backgroundColor) document.documentElement.style.setProperty('--ink', cfg.backgroundColor);
 
   var DPR = window.devicePixelRatio || 1;
+  /* The composition is tuned for a 144px mark: keep WEBVIEW_CONFIG.splashScreen.imageHeight (and imageWidth)
+     at 144 so the native image and frame 0 of this page line up */
   var S = 0.8;                 /* css px per logo unit: 180 units -> 144px, the native imageHeight */
   var K = S * DPR;             /* device px per unit */
   var CX = 79, CY = 90;        /* logo centre in units */
@@ -172,6 +178,11 @@ const RAYS=[{"g":[0,89.75,85.3,89.75,0,1,0],"p":[0,1794,3,1754,14,1716,30,1680,5
   var SLICES = 26;
   var HERO = 1.7;              /* the mark ends at this scale, so 3D layers are drawn this sharp */
   var WALL_RES = 1.3;
+  /* The silhouette, the 26 wall slices and the shade hold most of the canvas memory (~34 MB of ~51 MB on a
+     3x phone), so cap them at 2.6 backing px per css px: unchanged up to 2x, 0.87x device px on 3x screens.
+     They share one resolution because the slices and shade copy the silhouette 1:1.
+     If memory is still tight, SLICES is the next lever. */
+  var wallRes = Math.min(WALL_RES, 2.6 / DPR);
   var PURPLE = '#7171ff';
   var Q = function (v) { return v.toFixed(2); };
 
@@ -230,7 +241,7 @@ const RAYS=[{"g":[0,89.75,85.3,89.75,0,1,0],"p":[0,1794,3,1754,14,1716,30,1680,5
     base.appendChild(depth); ray.appendChild(base);
 
     /* Silhouette eroded by 1.6 device px so the side walls never fringe the front face's anti-aliased edge */
-    var sil = layer(0, WALL_RES), sc = sil.ctx;
+    var sil = layer(0, wallRes), sc = sil.ctx;
     trace(sc, pts, dx, dy); sc.fillStyle = '#fff'; sc.fill();
     sc.globalCompositeOperation = 'destination-out'; sc.lineWidth = 3.2; sc.stroke();
 
@@ -240,8 +251,8 @@ const RAYS=[{"g":[0,89.75,85.3,89.75,0,1,0],"p":[0,1794,3,1754,14,1716,30,1680,5
     for (var k = 0; k < SLICES; k++) {
       var f = k / (SLICES - 1);
       var z = -HD + 2 * HD * f * (SLICES - 1) / SLICES;
-      var L = layer(z, WALL_RES), ctx = L.ctx;
-      ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(sil.c, 0, 0); ctx.setTransform(WALL_RES, 0, 0, WALL_RES, 0, 0);
+      var L = layer(z, wallRes), ctx = L.ctx;
+      ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(sil.c, 0, 0); ctx.setTransform(wallRes, 0, 0, wallRes, 0, 0);
       ctx.globalCompositeOperation = 'source-in';
       if (k === 0) {
         ctx.fillStyle = brand(ctx, r, dx, dy, 0.55);
@@ -288,7 +299,7 @@ const RAYS=[{"g":[0,89.75,85.3,89.75,0,1,0],"p":[0,1794,3,1754,14,1716,30,1680,5
     depth.appendChild(lit);
 
     /* Depth shade: darkens the ray while it is on the far side of the turbine */
-    var sd = layer(HD + 0.3, WALL_RES);
+    var sd = layer(HD + 0.3, wallRes);
     sd.ctx.setTransform(1, 0, 0, 1, 0, 0); sd.ctx.drawImage(sil.c, 0, 0);
     sd.ctx.globalCompositeOperation = 'source-in'; sd.ctx.fillStyle = '#05040c'; sd.ctx.fillRect(0, 0, sd.c.width, sd.c.height);
     sd.c.className = 'shade s' + i;

package/templates/common/server/index.js

@@ -22,7 +22,8 @@ export const onRouteMatch = () => {}
 export const onAppServerSideSuccess = () => {}
 export const onAppServerSideError = () => {}
 
-// Run after the matched route's serverFetcher resolves or fails. On failure the
+// onFetcherSuccess runs after the matched route's data has loaded. onFetcherError
+// runs when loading that data or preparing the page (metadata, assets) fails; the
 // page still renders, with the error's status_code (404 by default).
 // Receive { req, res, store }, plus `error` on failure.
 export const onFetcherSuccess = () => {}

package/templates/common/src/js/containers/Home/Home.js

@@ -49,8 +49,6 @@ function Home() {
 
     return (
         <div className={css.page} data-hydrated={hydratedIn !== null}>
-            <title>Your app is running | Catalyst</title>
-
             <nav className={css.nav}>
                 <span className={css.brand}>Catalyst</span>
                 <span className={css.navLinks}>
@@ -125,4 +123,7 @@ function Home() {
     )
 }
 
+// Tags returned here go into the page's <head>, on the server and after navigation.
+Home.setMetaData = () => [<title key="title">Your app is running | Catalyst</title>]
+
 export default Home

package/templates/none-js/package.json

@@ -27,7 +27,7 @@
         "@routes": "src/js/routes/"
     },
     "dependencies": {
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2"

package/templates/none-ts/package.json

@@ -28,7 +28,7 @@
         "@routes": "src/js/routes/"
     },
     "dependencies": {
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2"

package/templates/redux-js/package.json

@@ -30,7 +30,7 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.9.0",
         "react-redux": "^9.2.0",
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2",

package/templates/redux-ts/package.json

@@ -31,7 +31,7 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.9.0",
         "react-redux": "^9.2.0",
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2",

package/templates/rtk-js/package.json

@@ -30,7 +30,7 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.9.0",
         "react-redux": "^9.2.0",
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2",

package/templates/rtk-ts/package.json

@@ -31,7 +31,7 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.9.0",
         "react-redux": "^9.2.0",
-        "catalyst-core": "1.2.0-canary.2",
+        "catalyst-core": "1.2.0-canary.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-router": "^7.18.2",