@wix/himalaya-cli 0.993.0 → 0.994.0

package/dist/authoring-runtime/node_modules/@wix/himalaya/dist/_types/core/ts/src/tokens.d.ts

@@ -210,10 +210,25 @@ export interface SidebarStyle {
     motion?: string;
 }
 /** RFC 0020 — a motion curve. `duration` in ms; `easing` is one of
- *  "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring". */
+ *  "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | "emphasized". */
 export interface MotionToken {
     duration: number;
-    easing?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring";
+    /** `emphasized` (#2930) is Material 3's emphasized easing, cubic-bezier(0.2, 0, 0, 1) — the
+     *  curve an Android idiom overlay reaches for where iOS would spring. */
+    easing?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | "emphasized";
+    /** RFC 0059 / #2930 — a DECLARED spring, honoured by iOS, Android and the web when `easing` is
+     *  `"spring"` (React Native keeps its one entrance curve). SwiftUI's two parameters: `response`
+     *  is the period in seconds; `dampingFraction` 1 settles without overshoot, below 1 overshoots,
+     *  above 1 settles more slowly. Every renderer holds them to `response` 0.05–10 and
+     *  `dampingFraction` 0.1–4 — a value outside is clamped, never an error. Either may be omitted:
+     *  `response` then defaults to `duration`, `dampingFraction` to 0.8. Absent altogether ⇒ each
+     *  renderer's own legacy spring, unchanged — so an app that declares none animates as before. */
+    spring?: SpringParams;
+}
+/** See `MotionToken.spring`. */
+export interface SpringParams {
+    response?: number;
+    dampingFraction?: number;
 }
 /** RFC 0021 — a surface material. `style` is "flat" | "glass" | "frosted"
  *  (unknown ⇒ treated as flat by renderers); `tint` names a color token;

package/dist/cli.mjs

@@ -17806,6 +17806,44 @@ function rgba(color, alpha2) {
   const rgb = hexToRgb2(color);
   return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp2(alpha2)})` : color;
 }
+function normalizeSpring(spring, durationMs) {
+  return {
+    response: clampTo(finite(spring.response) ?? durationMs / 1e3, SPRING_MIN_RESPONSE, SPRING_MAX_RESPONSE),
+    dampingFraction: clampTo(finite(spring.dampingFraction) ?? 0.8, SPRING_MIN_DAMPING, SPRING_MAX_DAMPING)
+  };
+}
+function springStep(response, zeta) {
+  const w0 = 2 * Math.PI / response;
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    return (t) => 1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + zeta * w0 / wd * Math.sin(wd * t));
+  }
+  if (zeta === 1) return (t) => 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  const root = Math.sqrt(zeta * zeta - 1);
+  const r1 = -w0 * (zeta - root), r2 = -w0 * (zeta + root);
+  return (t) => 1 - (r2 * Math.exp(r1 * t) - r1 * Math.exp(r2 * t)) / (r2 - r1);
+}
+function springCurve(spring, durationMs) {
+  const { response, dampingFraction: zeta } = normalizeSpring(spring, durationMs);
+  const key2 = `${response}|${zeta}`;
+  const cached3 = springCurves.get(key2);
+  if (cached3) return cached3;
+  const x = springStep(response, zeta);
+  const step = response / 64;
+  let settle = 0;
+  for (let t = 0; t <= SPRING_MAX_SECS; t += step) if (Math.abs(1 - x(t)) > SPRING_SETTLE_TOLERANCE) settle = t;
+  const secs = Math.min(settle + step, SPRING_MAX_SECS);
+  const samples = Math.min(200, Math.max(24, Math.ceil(12 * secs / response)));
+  const points = [];
+  for (let i = 0; i <= samples; i++) points.push(i === 0 ? 0 : i === samples ? 1 : Number(x(secs * i / samples).toFixed(3)));
+  const curve = { durationMs: Math.round(secs * 1e3), easing: `linear(${points.join(", ")})` };
+  springCurves.set(key2, curve);
+  return curve;
+}
+function linearEasingSupported() {
+  const css = globalThis.CSS;
+  return typeof css?.supports === "function" && css.supports("animation-timing-function", "linear(0, 1)");
+}
 function easingCss(e) {
   switch (e) {
     case "linear":
@@ -17816,10 +17854,17 @@ function easingCss(e) {
       return "cubic-bezier(0,0,0.2,1)";
     case "spring":
       return "cubic-bezier(0.34,1.56,0.64,1)";
+    // Material 3's emphasized easing (#2930).
+    case "emphasized":
+      return "cubic-bezier(0.2,0,0,1)";
     default:
       return "cubic-bezier(0.4,0,0.2,1)";
   }
 }
+function motionCss(m) {
+  if (m.easing === "spring" && m.spring && linearEasingSupported()) return springCurve(m.spring, m.duration);
+  return { durationMs: m.duration, easing: easingCss(m.easing) };
+}
 function hexToHsl(hex2) {
   const m = /^#?([\da-f]{6})$/i.exec(hex2.trim());
   if (!m) return null;
@@ -18022,7 +18067,7 @@ function makeTokenResolvers(source, scheme, idiom = WEB_IDIOM_CONTEXT) {
     if (!name) return void 0;
     const m = tokens.motions?.[name];
     if (!m) return void 0;
-    return { durationMs: m.duration, easing: easingCss(m.easing) };
+    return motionCss(m);
   };
   const reduceMotion = () => {
     const policy = tokens.kit?.reduceMotion ?? "system";
@@ -18048,7 +18093,7 @@ function makeTokenResolvers(source, scheme, idiom = WEB_IDIOM_CONTEXT) {
     scheme
   };
 }
-var REM_ROOT_PX, pxToRem, DEFAULT_FONT_STACK, SERIF_FAMILY_RE, WEB_IDIOM_CONTEXT;
+var REM_ROOT_PX, pxToRem, DEFAULT_FONT_STACK, SERIF_FAMILY_RE, SPRING_MIN_RESPONSE, SPRING_MAX_RESPONSE, SPRING_MIN_DAMPING, SPRING_MAX_DAMPING, clampTo, finite, SPRING_SETTLE_TOLERANCE, SPRING_MAX_SECS, springCurves, WEB_IDIOM_CONTEXT;
 var init_tokens2 = __esm({
   "../../core/web-renderer/src/tokens.ts"() {
     init_idiom();
@@ -18056,6 +18101,15 @@ var init_tokens2 = __esm({
     pxToRem = (px) => `${px / REM_ROOT_PX}rem`;
     DEFAULT_FONT_STACK = '"Wix Madefor Text", system-ui';
     SERIF_FAMILY_RE = /\b(georgia|times|garamond|palatino|baskerville|didot|charter|bodoni|caslon|cambria|constantia|rockwell|playfair|merriweather|lora|literata|spectral|serif)\b/i;
+    SPRING_MIN_RESPONSE = 0.05;
+    SPRING_MAX_RESPONSE = 10;
+    SPRING_MIN_DAMPING = 0.1;
+    SPRING_MAX_DAMPING = 4;
+    clampTo = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    finite = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+    SPRING_SETTLE_TOLERANCE = 1e-3;
+    SPRING_MAX_SECS = 10;
+    springCurves = /* @__PURE__ */ new Map();
     WEB_IDIOM_CONTEXT = { surface: "desktop" };
   }
 });
@@ -23686,7 +23740,8 @@ function renderInner(node, ctx) {
     if (wp != null) wrap.width = wp;
     Object.assign(wrap, boundPaddingInsets(modifiers, ctx));
   }
-  const appear = ctx.appearMotion(modifiers?.appear);
+  const ap = modifiers?.appear;
+  const appear = ctx.appearMotion(typeof ap === "string" ? ap : ap?.token ?? ap?.name);
   if (appear && !ctx.reduceMotion()) {
     ensureAppearKeyframes();
     wrap.animation = `himalaya-appear ${appear.durationMs}ms ${appear.easing} both`;
@@ -43850,19 +43905,19 @@ var init_preview_assets_generated = __esm({
   "../../packages/serve/src/preview-assets.generated.ts"() {
     init_preview_assets_format();
     PREVIEW_ASSET_MANIFEST = [
-      { key: "assets/index-DKlP06hp.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 997374, sha256: "9dd7ca28e467c7715af80eb404682bcd75804fee6941c8ae30cacdb542385854" },
-      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 997382, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
-      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 1088306, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
-      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 1179290, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
-      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 1270270, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
-      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 1361142, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
-      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 1452122, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
-      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 1560758, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
-      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 1669842, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
-      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 1778890, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
-      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 1886590, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
-      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 1974698, length: 4448, sha256: "a21d7d8d7acdce79ccd442b4137814a17739998360e5b11fc74958c55b77ce30" },
-      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 1979146, length: 13784, sha256: "cfb9465254fab84f0e084bb4542c282758ea29774b5f172840cc0b9e4194ef89" }
+      { key: "assets/index-CeKHbRna.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 998645, sha256: "4e1a78d6443c5e1ccf0a16a87b5ca4ab1a62fb5b989182a5faa3f31b43932c47" },
+      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 998653, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
+      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 1089577, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
+      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 1180561, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
+      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 1271541, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
+      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 1362413, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
+      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 1453393, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
+      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 1562029, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
+      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 1671113, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
+      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 1780161, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
+      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 1887861, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
+      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 1975969, length: 4448, sha256: "79979ee36bb97117452963ece8b9816095ddcec8cc95fa1798448d0c9fc6402b" },
+      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 1980417, length: 13784, sha256: "cfb9465254fab84f0e084bb4542c282758ea29774b5f172840cc0b9e4194ef89" }
     ];
   }
 });

package/guides/tokens.md

@@ -15,7 +15,7 @@ one registry, mirrored byte-for-byte by the iOS + Android decoders.
 | `radius` | name → number (px) | **required** |
 | `shadows` | name → { opacity, radius, color?, x?, y? } | optional |
 | `gradients` | name → { colors[], angle?, locations? } | optional (`colors` = token NAMES) |
-| `motions` | name → { duration, easing? } | optional |
+| `motions` | name → { duration, easing?, spring? } | optional |
 | `materials` | name → { style, tint?, opacity?, blur? } | optional |
 | `tabBar` / `drawer` / `sidebar` | nav-chrome style blocks | optional |
 | `kit` | { material?, variant?, density?, motion? } | optional — the active design kit |
@@ -34,6 +34,15 @@ the missing field), so the bug passes web review and only breaks on device. CI g
 A color is a hex string, OR a per-scheme object `{ light, dark?, highContrast? }`. In the
 object form **`light` is required**; `dark`/`highContrast` fall back to it.
 
+## Motion
+
+`easing` is `linear`, `easeIn`, `easeOut`, `easeInOut`, `spring` or `emphasized` (Material 3's
+emphasized curve). A `spring` may declare its physics as SwiftUI's two parameters —
+`"spring": { "response": 0.5, "dampingFraction": 0.6 }` (period in seconds; 1 = no overshoot) —
+and iOS, Android and the web then draw that same spring until it settles (`duration` no longer
+bounds it; React Native keeps its own fixed entrance curve). Values are held to `response` 0.05–10 and
+`dampingFraction` 0.1–4. Declare none and each keeps its own default spring.
+
 ## Baseline — copy this, then extend
 
 The starter set `himi init` writes (complete, valid, minimal):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/himalaya-cli",
-  "version": "0.993.0",
+  "version": "0.994.0",
   "type": "module",
   "description": "himi — the Himalaya authoring CLI. Build a Tier-5 content package on your own machine, push it to the production serve as a draft, preview it on web + Himi Player, and read worker logs back — the remote dev loop. Wraps @himalaya/serve-cli for transport.",
   "keywords": [
@@ -65,5 +65,5 @@
       "artifactId": "himalaya-cli"
     }
   },
-  "falconPackageHash": "65760e4588c44ee36e6538fcc1bf8802e544b4045157544b3f4d0d94"
+  "falconPackageHash": "77c7bb038c5bbcc5a5cc5e0542d7612e8dd1b55183ade401a587e064"
 }