@wix/himalaya-cli 0.978.0 → 0.979.0

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

@@ -30,7 +30,6 @@ export interface AppearanceDirective {
     region?: string;
     colorScheme?: "light" | "dark";
     layoutDirection?: "ltr" | "rtl";
-    fontScale?: number;
 }
 export interface DeterminismDirective {
     freezeClock?: string;

package/dist/authoring-runtime/node_modules/@wix/himalaya/dist/core.mjs

@@ -9715,8 +9715,7 @@ var LAUNCH_MANIFEST_SCHEMA = {
           locale: { type: "string" },
           region: { type: "string" },
           colorScheme: { type: "string", enum: ["light", "dark"] },
-          layoutDirection: { type: "string", enum: ["ltr", "rtl"] },
-          fontScale: { type: "number" }
+          layoutDirection: { type: "string", enum: ["ltr", "rtl"] }
         }),
         determinism: directiveObject({
           freezeClock: { type: "string" },

package/dist/authoring-runtime/node_modules/@wix/himalaya/dist/sdui.mjs

@@ -7766,8 +7766,7 @@ var LAUNCH_MANIFEST_SCHEMA = {
           locale: { type: "string" },
           region: { type: "string" },
           colorScheme: { type: "string", enum: ["light", "dark"] },
-          layoutDirection: { type: "string", enum: ["ltr", "rtl"] },
-          fontScale: { type: "number" }
+          layoutDirection: { type: "string", enum: ["ltr", "rtl"] }
         }),
         determinism: directiveObject({
           freezeClock: { type: "string" },

package/dist/cli.mjs

@@ -5290,6 +5290,7 @@ function resolveTranslation(value, catalog, sourceCatalog) {
 var BINDING_SIGILS, BINDING_SIGIL_RE, TRANSLATION_PREFIX, TRANSLATION_KEY_RE;
 var init_bindings = __esm({
   "../../core/ts/src/bindings.ts"() {
+    "use strict";
     BINDING_SIGILS = ["service", "flag", "item", "t"];
     BINDING_SIGIL_RE = new RegExp(
       `^\\$(?:${BINDING_SIGILS.filter((s) => s !== "t").join("|")})\\b|^\\$t:`
@@ -17753,8 +17754,10 @@ function makeTokenResolvers(tokens, scheme) {
   };
   const font = (style = "body") => {
     const t = tokens.typography?.[style] ?? tokens.fonts?.[style] ?? tokens.typography?.body ?? tokens.fonts?.body;
+    const size = t?.size ?? 14;
     return {
-      size: t?.size ?? 14,
+      size,
+      remSize: pxToRem(size),
       weight: t?.weight ?? 400,
       line: t?.line ?? 1.4,
       family: t?.family,
@@ -17868,9 +17871,11 @@ function makeTokenResolvers(tokens, scheme) {
     scheme
   };
 }
-var DEFAULT_FONT_STACK, SERIF_FAMILY_RE;
+var REM_ROOT_PX, pxToRem, DEFAULT_FONT_STACK, SERIF_FAMILY_RE;
 var init_tokens2 = __esm({
   "../../core/web-renderer/src/tokens.ts"() {
+    REM_ROOT_PX = 16;
+    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;
   }
@@ -23788,7 +23793,7 @@ function renderInner(node, ctx) {
       return /* @__PURE__ */ jsx6("div", { style: { fontFamily: bodyFont(ctx), lineHeight: 1.5, overflowWrap: "break-word", color: C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e"), ...wrap }, children: runs.map((r, i) => {
         const marks = Array.isArray(r.marks) ? r.marks : [];
         const f = ctx.font(r.style);
-        return /* @__PURE__ */ jsx6("span", { style: { fontSize: f.size, fontWeight: marks.includes("bold") ? 700 : f.weight, fontStyle: marks.includes("italic") ? "italic" : void 0, textDecoration: marks.includes("underline") ? "underline" : void 0, ...f.family ? { fontFamily: fontStack(f.family) } : {}, ...r.color ? { color: C(r.color) } : {}, ...marks.includes("code") ? { fontFamily: "ui-monospace, monospace", background: C("surfaceTertiary", "#eee"), padding: "1px 5px", borderRadius: 4 } : {} }, children: txt(r.text, ctx) }, i);
+        return /* @__PURE__ */ jsx6("span", { style: { fontSize: f.remSize, fontWeight: marks.includes("bold") ? 700 : f.weight, fontStyle: marks.includes("italic") ? "italic" : void 0, textDecoration: marks.includes("underline") ? "underline" : void 0, ...f.family ? { fontFamily: fontStack(f.family) } : {}, ...r.color ? { color: C(r.color) } : {}, ...marks.includes("code") ? { fontFamily: "ui-monospace, monospace", background: C("surfaceTertiary", "#eee"), padding: "1px 5px", borderRadius: 4 } : {} }, children: txt(r.text, ctx) }, i);
       }) });
     }
     case "Image":
@@ -23829,8 +23834,8 @@ function renderInner(node, ctx) {
         props.leading && /* @__PURE__ */ jsx6("div", { style: { flex: "none", display: "flex" }, children: renderNode(props.leading, ctx) }),
         /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }, children: [
           props.overline != null && /* @__PURE__ */ jsx6("span", { style: { fontFamily: bodyFont(ctx), fontSize: 11, fontWeight: 600, letterSpacing: 0.4, textTransform: "uppercase", color: C(props.overlineColor ?? "textSecondary", "#888"), ...ell }, children: txt(props.overline, ctx) }),
-          /* @__PURE__ */ jsx6("span", { style: { fontFamily: fontStack(titleF.family), fontSize: titleF.size, fontWeight: titleF.weight, color: C(props.titleColor ?? "textPrimary", "#13171e"), ...ell }, children: txt(props.title, ctx) ?? (ctx.empty ? "" : "") }),
-          props.subtitle != null && /* @__PURE__ */ jsx6("span", { style: { fontFamily: fontStack(subF.family), fontSize: subF.size, color: C(props.subtitleColor ?? "textSecondary", "#888"), ...ell }, children: txt(props.subtitle, ctx) })
+          /* @__PURE__ */ jsx6("span", { style: { fontFamily: fontStack(titleF.family), fontSize: titleF.remSize, fontWeight: titleF.weight, color: C(props.titleColor ?? "textPrimary", "#13171e"), ...ell }, children: txt(props.title, ctx) ?? (ctx.empty ? "" : "") }),
+          props.subtitle != null && /* @__PURE__ */ jsx6("span", { style: { fontFamily: fontStack(subF.family), fontSize: subF.remSize, color: C(props.subtitleColor ?? "textSecondary", "#888"), ...ell }, children: txt(props.subtitle, ctx) })
         ] }),
         props.trailing ? (
           // #1010 — the row's `onTap` lives on the outer flex div, and the trailing
@@ -23896,7 +23901,7 @@ function renderInner(node, ctx) {
     case "Label": {
       const f = ctx.font(props.style ?? "body");
       const col = C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e");
-      return /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: fontStack(f.family), fontSize: f.size, fontWeight: f.weight, color: col, ...wrap }, children: [
+      return /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontFamily: fontStack(f.family), fontSize: f.remSize, fontWeight: f.weight, color: col, ...wrap }, children: [
         props.icon && /* @__PURE__ */ jsx6("span", { style: { display: "inline-grid", placeItems: "center", width: f.size, height: f.size }, children: iconSvg(props.icon, { size: f.size, color: col }) }),
         txt(props.text, ctx)
       ] });
@@ -23925,7 +23930,7 @@ function renderInner(node, ctx) {
       ensureMarqueeKeyframes();
       const f = ctx.font(props.style ?? "body");
       const dur = props.durationMs ?? 8e3;
-      return /* @__PURE__ */ jsx6("div", { style: { width: "100%", overflow: "hidden", whiteSpace: "nowrap", ...wrap }, children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", paddingLeft: "100%", fontFamily: fontStack(f.family), fontSize: f.size, color: C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e"), animation: ctx.empty ? void 0 : `himalaya-marquee ${dur}ms linear infinite` }, children: txt(props.text, ctx) }) });
+      return /* @__PURE__ */ jsx6("div", { style: { width: "100%", overflow: "hidden", whiteSpace: "nowrap", ...wrap }, children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-block", paddingLeft: "100%", fontFamily: fontStack(f.family), fontSize: f.remSize, color: C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e"), animation: ctx.empty ? void 0 : `himalaya-marquee ${dur}ms linear infinite` }, children: txt(props.text, ctx) }) });
     }
     case "Timeline":
       return /* @__PURE__ */ jsx6(TimelineNode, { props, ctx, wrap });
@@ -25777,8 +25782,8 @@ var init_renderNode = __esm({
       const content = countContent != null ? countContent : icuPattern != null ? /* @__PURE__ */ jsx6(InterpolatedTextView, { pattern: icuPattern, params: props.template?.params ?? {}, ctx }) : mdSource != null ? /* @__PURE__ */ jsx6("span", { dangerouslySetInnerHTML: mdInline(mdSource) }) : txt(props.text, ctx);
       const tAlign = props.textAlign === "center" ? "center" : props.textAlign === "trailing" ? "right" : props.textAlign === "justify" ? "justify" : props.textAlign === "leading" ? "left" : void 0;
       const tDecor = props.decoration === "strikethrough" ? "line-through" : props.decoration === "underline" ? "underline" : void 0;
-      const ln = typeof props.lineSpacing === "number" ? `${(f.line ?? 1.4) * f.size + props.lineSpacing}px` : f.line;
-      return /* @__PURE__ */ jsx6("div", { ...countAttrs, style: { fontFamily: fontStack(f.family), fontSize: f.size, fontWeight: f.weight, lineHeight: ln, letterSpacing: f.letterSpacing, color: C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e"), whiteSpace: "pre-wrap", overflowWrap: "anywhere", wordBreak: "break-word", minWidth: 0, ...tAlign ? { textAlign: tAlign } : {}, ...tDecor ? { textDecoration: tDecor } : {}, ...props.maxLines ? { display: "-webkit-box", WebkitLineClamp: props.maxLines, WebkitBoxOrient: "vertical", overflow: "hidden" } : {}, ...wrap }, children: content == null || content === "" ? collapse ? null : "\xA0" : content });
+      const ln = typeof props.lineSpacing === "number" ? pxToRem((f.line ?? 1.4) * f.size + props.lineSpacing) : f.line;
+      return /* @__PURE__ */ jsx6("div", { ...countAttrs, style: { fontFamily: fontStack(f.family), fontSize: f.remSize, fontWeight: f.weight, lineHeight: ln, letterSpacing: f.letterSpacing, color: C(resolveScalarStatic(props.color, ctx) ?? "textPrimary", "#13171e"), whiteSpace: "pre-wrap", overflowWrap: "anywhere", wordBreak: "break-word", minWidth: 0, ...tAlign ? { textAlign: tAlign } : {}, ...tDecor ? { textDecoration: tDecor } : {}, ...props.maxLines ? { display: "-webkit-box", WebkitLineClamp: props.maxLines, WebkitBoxOrient: "vertical", overflow: "hidden" } : {}, ...wrap }, children: content == null || content === "" ? collapse ? null : "\xA0" : content });
     });
     ImageNode = withExtras("ImageNode", ({ props, ctx, wrap }) => {
       const C = ctx.color;
@@ -25922,7 +25927,7 @@ var init_renderNode = __esm({
             borderRadius: props.iconOnly ? "50%" : pillRadius,
             fontFamily: fontStack(f.family),
             fontWeight: f.weight,
-            fontSize: f.size,
+            fontSize: f.remSize,
             background: primary ? accent : "transparent",
             color: fg,
             border: outlined ? `1px solid ${accent}` : "none",
@@ -26072,7 +26077,7 @@ var init_renderNode = __esm({
       const capF = ctx.font("caption");
       return /* @__PURE__ */ jsx6("div", { style: { display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 4, ...wrap }, children: /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: 72, height: 72 }, children: [
         /* @__PURE__ */ jsx6("div", { style: { width: 72, height: 72, borderRadius: "50%", background: `conic-gradient(${tint} ${pct * 360}deg, ${track} 0deg)`, WebkitMask: ringMask, mask: ringMask, ...gaugeAnim } }),
-        /* @__PURE__ */ jsx6("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center", fontFamily: fontStack(capF.family), fontSize: capF.size, fontWeight: capF.weight, color: C("textPrimary", "#13171e") }, children: txt(props.label, ctx) || `${Math.round(pct * 100)}%` })
+        /* @__PURE__ */ jsx6("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center", fontFamily: fontStack(capF.family), fontSize: capF.remSize, fontWeight: capF.weight, color: C("textPrimary", "#13171e") }, children: txt(props.label, ctx) || `${Math.round(pct * 100)}%` })
       ] }) });
     });
     RatingNode = withExtras("RatingNode", ({ props, ctx, wrap }) => {
@@ -28800,8 +28805,7 @@ var init_launch_manifest = __esm({
               locale: { type: "string" },
               region: { type: "string" },
               colorScheme: { type: "string", enum: ["light", "dark"] },
-              layoutDirection: { type: "string", enum: ["ltr", "rtl"] },
-              fontScale: { type: "number" }
+              layoutDirection: { type: "string", enum: ["ltr", "rtl"] }
             }),
             determinism: directiveObject({
               freezeClock: { type: "string" },
@@ -43619,19 +43623,19 @@ var init_preview_assets_generated = __esm({
   "../../packages/serve/src/preview-assets.generated.ts"() {
     init_preview_assets_format();
     PREVIEW_ASSET_MANIFEST = [
-      { key: "assets/index-QajXLF48.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 987074, sha256: "46a30017dbf3793f00e3ad24c865ca7708174a0c676a87257fb37f3f6a4179fa" },
-      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 987082, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
-      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 1078006, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
-      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 1168990, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
-      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 1259970, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
-      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 1350842, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
-      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 1441822, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
-      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 1550458, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
-      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 1659542, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
-      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 1768590, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
-      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 1876290, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
-      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 1964398, length: 4448, sha256: "e2f66c98bc1767a88a1d28cf5af1078a100e4505d14370f06066534651ea5912" },
-      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 1968846, length: 13784, sha256: "cfb9465254fab84f0e084bb4542c282758ea29774b5f172840cc0b9e4194ef89" }
+      { key: "assets/index-EUz_f6yu.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 987137, sha256: "7b526f22885a0dfed16aa63cc802e4d17c3565e78ba5a8a873bcb111ffe1a076" },
+      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 987145, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
+      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 1078069, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
+      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 1169053, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
+      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 1260033, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
+      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 1350905, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
+      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 1441885, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
+      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 1550521, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
+      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 1659605, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
+      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 1768653, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
+      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 1876353, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
+      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 1964461, length: 4448, sha256: "78be80518ed0f28fbf085b806c0d4ef5ec796da109a3f2f257f4ee31e1c01214" },
+      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 1968909, length: 13784, sha256: "cfb9465254fab84f0e084bb4542c282758ea29774b5f172840cc0b9e4194ef89" }
     ];
   }
 });

package/guides/designing-himi-screens.md

@@ -363,7 +363,10 @@ nicety. Don't animate everything: if every element moves, nothing reads as impor
 - **Contrast** comes from the token roles — pair `textPrimary`/`textSecondary` with the right surface,
   and provide the `highContrast` scheme value for load-bearing colors.
 - **Reduced motion** — §6.
-- **Dynamic type** — size text via typography tokens (which scale) rather than fixed sizes.
+- **Dynamic type** — size text via typography tokens rather than fixed sizes. Every token path now
+  honours the OS text-size setting: iOS scales through `UIFontMetrics` (system and variable-font arms
+  included, not only branded `Font.custom`), Android emits `sp`, and web emits `rem`. A raw pixel size
+  bypasses all three and will not grow when the user enlarges text.
 - **RTL** — §2.
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/himalaya-cli",
-  "version": "0.978.0",
+  "version": "0.979.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": [
@@ -64,5 +64,5 @@
       "artifactId": "himalaya-cli"
     }
   },
-  "falconPackageHash": "88b2cfb0f2d75cce7fa6a3681bfbfd1b227e95d24d266ba8ca8e722a"
+  "falconPackageHash": "16761478845899a9ba0931eb0a135cf4d6e5d8909a3ad2899152b122"
 }