npm - @wix/himalaya-cli - Versions diffs - 0.1028.0 → 0.1029.0 - Mend

@wix/himalaya-cli 0.1028.0 → 0.1029.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/templates/podcast-creator-owner/dev/index.ts CHANGED Viewed

@@ -55191,7 +55191,7 @@ const SCREENS = runtimeSetting({
                           "spacing": 3,
                           "children": [
                             {
-                              "id": "himi_owner_lite_aria.msg_$item.id.who",
+                              "id": "himi_owner_lite_aria.msg_$item.id.content",
                               "body": {
                                 "package": "himalaya",
                                 "type": "HStack",
@@ -55210,43 +55210,34 @@ const SCREENS = runtimeSetting({
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.bubble",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
                                         "props": {
-                                          "text": "$item.who",
-                                          "style": "footnote",
-                                          "color": "textSecondary",
-                                          "maxLines": 1
+                                          "text": "$item.content",
+                                          "style": "body",
+                                          "maxLines": 50
                                         }
-                                      }
-                                    }
-                                  ]
-                                }
-                              }
-                            },
-                            {
-                              "id": "himi_owner_lite_aria.msg_$item.id.content",
-                              "body": {
-                                "package": "himalaya",
-                                "type": "HStack",
-                                "props": {
-                                  "spacing": 0,
-                                  "children": [
-                                    {
-                                      "id": "",
-                                      "body": {
-                                        "package": "himalaya",
-                                        "type": "Spacer",
-                                        "props": {}
                                       },
                                       "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "padding": {
+                                          "leading": 16,
+                                          "trailing": 16,
+                                          "top": 8,
+                                          "bottom": 8
+                                        },
+                                        "background": {
+                                          "token": "surfaceSecondary"
+                                        },
+                                        "cornerRadius": 20,
+                                        "maxWidth": 300,
                                         "hiddenPath": "$item.notUser"
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.text",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
@@ -55255,6 +55246,10 @@ const SCREENS = runtimeSetting({
                                           "style": "body",
                                           "maxLines": 50
                                         }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "hiddenPath": "$item.notAria"
                                       }
                                     }
                                   ]

package/templates/podcast-creator-owner/tier5-src/_shared/aria-chat.ts CHANGED Viewed

@@ -83,6 +83,11 @@ export interface AriaBubble {
    *  that right-aligns the owner renders two templates and collapses one. */
   notUser: boolean;
   notAria: boolean;
+  /** What a screen reader says for the row: the author, then the words. A
+   *  screen that draws the speaker only as a bubble and a side of the screen
+   *  (`messageStyle: 'userBubble'`) has no visible author line to read, and
+   *  without this the owner's question and Aria's reply sound the same. */
+  spoken: string;
   link1Label: string; link1Url: string; link1Hidden: boolean;
   link2Label: string; link2Url: string; link2Hidden: boolean;
   link3Label: string; link3Url: string; link3Hidden: boolean;
@@ -561,9 +566,23 @@ export function disclosedLabel(link: { label: string; url: string }): string {
  *  machinery dies. (Measured: 20 tests, every one of them about polling.) */
 export { stripMarkdown };
+/** The screen-reader line for a bubble — see `AriaBubble.spoken`. */
+export function spokenOf(who: string, content: string): string {
+  return who ? `${who}: ${content}` : content;
+}
+/** A persisted transcript from before `spoken` existed, made whole. A `$item.`
+ *  path missing on a row does not substitute, so a row without the field would
+ *  announce the literal binding until the next rebuild replaced it. */
+export function withSpoken(bubbles: AriaBubble[]): AriaBubble[] {
+  return bubbles.every((b) => typeof b.spoken === "string")
+    ? bubbles
+    : bubbles.map((b) => (typeof b.spoken === "string" ? b : { ...b, spoken: spokenOf(b.who, b.content) }));
+}
 /** A greeting or optimistic bubble: no links, all slots defaulted. */
 export function plainBubble(id: string, role: string, who: string, content: string): AriaBubble {
-  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", ...linkFieldsOf("", role) };
+  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", spoken: spokenOf(who, content), ...linkFieldsOf("", role) };
 }
 /** Server transcript → bubbles. USER text is literal; ASSISTANT replies are
@@ -644,6 +663,7 @@ function bubbleOf(id: string, role: string, who: string, raw: string, writing: b
     content,
     notUser: role !== "USER",
     notAria: role === "USER",
+    spoken: spokenOf(who, content),
     ...linkFieldsOf(prose, role),
   };
 }
@@ -2004,7 +2024,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // a rehydrated turn there was no ladder at all, leaving "Aria is
         // typing…" on screen with nothing ever fetching the answer.
         if (s._pending || s.status === "sending") {
-          const held: AriaChatState = { ...s, status: "sending", prompts: [] };
+          const held: AriaChatState = { ...s, status: "sending", prompts: [], messages: withSpoken(s.messages) };
           return cadence(held, o.poll ? o.poll.fastMs : null, null);
         }
         // …but the self-kick pass runs BEFORE the pack is stashed, so the
@@ -2013,7 +2033,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // still the only thing on screen — `prompts` is already recomputed
         // here, and a chip pack that localizes beside a greeting that does not
         // is the visible half of the same bug.
-        const messages = isGreetingOnly(s.messages) ? greetingOnly() : s.messages;
+        const messages = isGreetingOnly(s.messages) ? greetingOnly() : withSpoken(s.messages);
         return { ...s, status: "ready", messages, prompts: promptsFor(messages, promptList()) };
       }
       try {

package/templates/portfolio-creative-owner/dev/index.ts CHANGED Viewed

@@ -55191,7 +55191,7 @@ const SCREENS = runtimeSetting({
                           "spacing": 3,
                           "children": [
                             {
-                              "id": "himi_owner_lite_aria.msg_$item.id.who",
+                              "id": "himi_owner_lite_aria.msg_$item.id.content",
                               "body": {
                                 "package": "himalaya",
                                 "type": "HStack",
@@ -55210,43 +55210,34 @@ const SCREENS = runtimeSetting({
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.bubble",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
                                         "props": {
-                                          "text": "$item.who",
-                                          "style": "footnote",
-                                          "color": "textSecondary",
-                                          "maxLines": 1
+                                          "text": "$item.content",
+                                          "style": "body",
+                                          "maxLines": 50
                                         }
-                                      }
-                                    }
-                                  ]
-                                }
-                              }
-                            },
-                            {
-                              "id": "himi_owner_lite_aria.msg_$item.id.content",
-                              "body": {
-                                "package": "himalaya",
-                                "type": "HStack",
-                                "props": {
-                                  "spacing": 0,
-                                  "children": [
-                                    {
-                                      "id": "",
-                                      "body": {
-                                        "package": "himalaya",
-                                        "type": "Spacer",
-                                        "props": {}
                                       },
                                       "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "padding": {
+                                          "leading": 16,
+                                          "trailing": 16,
+                                          "top": 8,
+                                          "bottom": 8
+                                        },
+                                        "background": {
+                                          "token": "surfaceSecondary"
+                                        },
+                                        "cornerRadius": 20,
+                                        "maxWidth": 300,
                                         "hiddenPath": "$item.notUser"
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.text",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
@@ -55255,6 +55246,10 @@ const SCREENS = runtimeSetting({
                                           "style": "body",
                                           "maxLines": 50
                                         }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "hiddenPath": "$item.notAria"
                                       }
                                     }
                                   ]

package/templates/portfolio-creative-owner/tier5-src/_shared/aria-chat.ts CHANGED Viewed

@@ -83,6 +83,11 @@ export interface AriaBubble {
    *  that right-aligns the owner renders two templates and collapses one. */
   notUser: boolean;
   notAria: boolean;
+  /** What a screen reader says for the row: the author, then the words. A
+   *  screen that draws the speaker only as a bubble and a side of the screen
+   *  (`messageStyle: 'userBubble'`) has no visible author line to read, and
+   *  without this the owner's question and Aria's reply sound the same. */
+  spoken: string;
   link1Label: string; link1Url: string; link1Hidden: boolean;
   link2Label: string; link2Url: string; link2Hidden: boolean;
   link3Label: string; link3Url: string; link3Hidden: boolean;
@@ -561,9 +566,23 @@ export function disclosedLabel(link: { label: string; url: string }): string {
  *  machinery dies. (Measured: 20 tests, every one of them about polling.) */
 export { stripMarkdown };
+/** The screen-reader line for a bubble — see `AriaBubble.spoken`. */
+export function spokenOf(who: string, content: string): string {
+  return who ? `${who}: ${content}` : content;
+}
+/** A persisted transcript from before `spoken` existed, made whole. A `$item.`
+ *  path missing on a row does not substitute, so a row without the field would
+ *  announce the literal binding until the next rebuild replaced it. */
+export function withSpoken(bubbles: AriaBubble[]): AriaBubble[] {
+  return bubbles.every((b) => typeof b.spoken === "string")
+    ? bubbles
+    : bubbles.map((b) => (typeof b.spoken === "string" ? b : { ...b, spoken: spokenOf(b.who, b.content) }));
+}
 /** A greeting or optimistic bubble: no links, all slots defaulted. */
 export function plainBubble(id: string, role: string, who: string, content: string): AriaBubble {
-  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", ...linkFieldsOf("", role) };
+  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", spoken: spokenOf(who, content), ...linkFieldsOf("", role) };
 }
 /** Server transcript → bubbles. USER text is literal; ASSISTANT replies are
@@ -644,6 +663,7 @@ function bubbleOf(id: string, role: string, who: string, raw: string, writing: b
     content,
     notUser: role !== "USER",
     notAria: role === "USER",
+    spoken: spokenOf(who, content),
     ...linkFieldsOf(prose, role),
   };
 }
@@ -2004,7 +2024,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // a rehydrated turn there was no ladder at all, leaving "Aria is
         // typing…" on screen with nothing ever fetching the answer.
         if (s._pending || s.status === "sending") {
-          const held: AriaChatState = { ...s, status: "sending", prompts: [] };
+          const held: AriaChatState = { ...s, status: "sending", prompts: [], messages: withSpoken(s.messages) };
           return cadence(held, o.poll ? o.poll.fastMs : null, null);
         }
         // …but the self-kick pass runs BEFORE the pack is stashed, so the
@@ -2013,7 +2033,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // still the only thing on screen — `prompts` is already recomputed
         // here, and a chip pack that localizes beside a greeting that does not
         // is the visible half of the same bug.
-        const messages = isGreetingOnly(s.messages) ? greetingOnly() : s.messages;
+        const messages = isGreetingOnly(s.messages) ? greetingOnly() : withSpoken(s.messages);
         return { ...s, status: "ready", messages, prompts: promptsFor(messages, promptList()) };
       }
       try {

package/templates/restaurant-owner/dev/index.ts CHANGED Viewed

@@ -55262,7 +55262,7 @@ const SCREENS = runtimeSetting({
                           "spacing": 3,
                           "children": [
                             {
-                              "id": "himi_owner_lite_aria.msg_$item.id.who",
+                              "id": "himi_owner_lite_aria.msg_$item.id.content",
                               "body": {
                                 "package": "himalaya",
                                 "type": "HStack",
@@ -55281,43 +55281,34 @@ const SCREENS = runtimeSetting({
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.bubble",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
                                         "props": {
-                                          "text": "$item.who",
-                                          "style": "footnote",
-                                          "color": "textSecondary",
-                                          "maxLines": 1
+                                          "text": "$item.content",
+                                          "style": "body",
+                                          "maxLines": 50
                                         }
-                                      }
-                                    }
-                                  ]
-                                }
-                              }
-                            },
-                            {
-                              "id": "himi_owner_lite_aria.msg_$item.id.content",
-                              "body": {
-                                "package": "himalaya",
-                                "type": "HStack",
-                                "props": {
-                                  "spacing": 0,
-                                  "children": [
-                                    {
-                                      "id": "",
-                                      "body": {
-                                        "package": "himalaya",
-                                        "type": "Spacer",
-                                        "props": {}
                                       },
                                       "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "padding": {
+                                          "leading": 16,
+                                          "trailing": 16,
+                                          "top": 8,
+                                          "bottom": 8
+                                        },
+                                        "background": {
+                                          "token": "surfaceSecondary"
+                                        },
+                                        "cornerRadius": 20,
+                                        "maxWidth": 300,
                                         "hiddenPath": "$item.notUser"
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.text",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
@@ -55326,6 +55317,10 @@ const SCREENS = runtimeSetting({
                                           "style": "body",
                                           "maxLines": 50
                                         }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "hiddenPath": "$item.notAria"
                                       }
                                     }
                                   ]

package/templates/restaurant-owner/tier5-src/_shared/aria-chat.ts CHANGED Viewed

@@ -83,6 +83,11 @@ export interface AriaBubble {
    *  that right-aligns the owner renders two templates and collapses one. */
   notUser: boolean;
   notAria: boolean;
+  /** What a screen reader says for the row: the author, then the words. A
+   *  screen that draws the speaker only as a bubble and a side of the screen
+   *  (`messageStyle: 'userBubble'`) has no visible author line to read, and
+   *  without this the owner's question and Aria's reply sound the same. */
+  spoken: string;
   link1Label: string; link1Url: string; link1Hidden: boolean;
   link2Label: string; link2Url: string; link2Hidden: boolean;
   link3Label: string; link3Url: string; link3Hidden: boolean;
@@ -561,9 +566,23 @@ export function disclosedLabel(link: { label: string; url: string }): string {
  *  machinery dies. (Measured: 20 tests, every one of them about polling.) */
 export { stripMarkdown };
+/** The screen-reader line for a bubble — see `AriaBubble.spoken`. */
+export function spokenOf(who: string, content: string): string {
+  return who ? `${who}: ${content}` : content;
+}
+/** A persisted transcript from before `spoken` existed, made whole. A `$item.`
+ *  path missing on a row does not substitute, so a row without the field would
+ *  announce the literal binding until the next rebuild replaced it. */
+export function withSpoken(bubbles: AriaBubble[]): AriaBubble[] {
+  return bubbles.every((b) => typeof b.spoken === "string")
+    ? bubbles
+    : bubbles.map((b) => (typeof b.spoken === "string" ? b : { ...b, spoken: spokenOf(b.who, b.content) }));
+}
 /** A greeting or optimistic bubble: no links, all slots defaulted. */
 export function plainBubble(id: string, role: string, who: string, content: string): AriaBubble {
-  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", ...linkFieldsOf("", role) };
+  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", spoken: spokenOf(who, content), ...linkFieldsOf("", role) };
 }
 /** Server transcript → bubbles. USER text is literal; ASSISTANT replies are
@@ -644,6 +663,7 @@ function bubbleOf(id: string, role: string, who: string, raw: string, writing: b
     content,
     notUser: role !== "USER",
     notAria: role === "USER",
+    spoken: spokenOf(who, content),
     ...linkFieldsOf(prose, role),
   };
 }
@@ -2004,7 +2024,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // a rehydrated turn there was no ladder at all, leaving "Aria is
         // typing…" on screen with nothing ever fetching the answer.
         if (s._pending || s.status === "sending") {
-          const held: AriaChatState = { ...s, status: "sending", prompts: [] };
+          const held: AriaChatState = { ...s, status: "sending", prompts: [], messages: withSpoken(s.messages) };
           return cadence(held, o.poll ? o.poll.fastMs : null, null);
         }
         // …but the self-kick pass runs BEFORE the pack is stashed, so the
@@ -2013,7 +2033,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // still the only thing on screen — `prompts` is already recomputed
         // here, and a chip pack that localizes beside a greeting that does not
         // is the visible half of the same bug.
-        const messages = isGreetingOnly(s.messages) ? greetingOnly() : s.messages;
+        const messages = isGreetingOnly(s.messages) ? greetingOnly() : withSpoken(s.messages);
         return { ...s, status: "ready", messages, prompts: promptsFor(messages, promptList()) };
       }
       try {

package/templates/retail-store-owner/dev/index.ts CHANGED Viewed

@@ -55108,7 +55108,7 @@ const SCREENS = runtimeSetting({
                           "spacing": 3,
                           "children": [
                             {
-                              "id": "himi_owner_lite_aria.msg_$item.id.who",
+                              "id": "himi_owner_lite_aria.msg_$item.id.content",
                               "body": {
                                 "package": "himalaya",
                                 "type": "HStack",
@@ -55127,43 +55127,34 @@ const SCREENS = runtimeSetting({
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.bubble",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
                                         "props": {
-                                          "text": "$item.who",
-                                          "style": "footnote",
-                                          "color": "textSecondary",
-                                          "maxLines": 1
+                                          "text": "$item.content",
+                                          "style": "body",
+                                          "maxLines": 50
                                         }
-                                      }
-                                    }
-                                  ]
-                                }
-                              }
-                            },
-                            {
-                              "id": "himi_owner_lite_aria.msg_$item.id.content",
-                              "body": {
-                                "package": "himalaya",
-                                "type": "HStack",
-                                "props": {
-                                  "spacing": 0,
-                                  "children": [
-                                    {
-                                      "id": "",
-                                      "body": {
-                                        "package": "himalaya",
-                                        "type": "Spacer",
-                                        "props": {}
                                       },
                                       "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "padding": {
+                                          "leading": 16,
+                                          "trailing": 16,
+                                          "top": 8,
+                                          "bottom": 8
+                                        },
+                                        "background": {
+                                          "token": "surfaceSecondary"
+                                        },
+                                        "cornerRadius": 20,
+                                        "maxWidth": 300,
                                         "hiddenPath": "$item.notUser"
                                       }
                                     },
                                     {
-                                      "id": "",
+                                      "id": "himi_owner_lite_aria.msg_$item.id.text",
                                       "body": {
                                         "package": "himalaya",
                                         "type": "Text",
@@ -55172,6 +55163,10 @@ const SCREENS = runtimeSetting({
                                           "style": "body",
                                           "maxLines": 50
                                         }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityLabel": "$item.spoken",
+                                        "hiddenPath": "$item.notAria"
                                       }
                                     }
                                   ]

package/templates/retail-store-owner/tier5-src/_shared/aria-chat.ts CHANGED Viewed

@@ -83,6 +83,11 @@ export interface AriaBubble {
    *  that right-aligns the owner renders two templates and collapses one. */
   notUser: boolean;
   notAria: boolean;
+  /** What a screen reader says for the row: the author, then the words. A
+   *  screen that draws the speaker only as a bubble and a side of the screen
+   *  (`messageStyle: 'userBubble'`) has no visible author line to read, and
+   *  without this the owner's question and Aria's reply sound the same. */
+  spoken: string;
   link1Label: string; link1Url: string; link1Hidden: boolean;
   link2Label: string; link2Url: string; link2Hidden: boolean;
   link3Label: string; link3Url: string; link3Hidden: boolean;
@@ -561,9 +566,23 @@ export function disclosedLabel(link: { label: string; url: string }): string {
  *  machinery dies. (Measured: 20 tests, every one of them about polling.) */
 export { stripMarkdown };
+/** The screen-reader line for a bubble — see `AriaBubble.spoken`. */
+export function spokenOf(who: string, content: string): string {
+  return who ? `${who}: ${content}` : content;
+}
+/** A persisted transcript from before `spoken` existed, made whole. A `$item.`
+ *  path missing on a row does not substitute, so a row without the field would
+ *  announce the literal binding until the next rebuild replaced it. */
+export function withSpoken(bubbles: AriaBubble[]): AriaBubble[] {
+  return bubbles.every((b) => typeof b.spoken === "string")
+    ? bubbles
+    : bubbles.map((b) => (typeof b.spoken === "string" ? b : { ...b, spoken: spokenOf(b.who, b.content) }));
+}
 /** A greeting or optimistic bubble: no links, all slots defaulted. */
 export function plainBubble(id: string, role: string, who: string, content: string): AriaBubble {
-  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", ...linkFieldsOf("", role) };
+  return { id, role, who, content, notUser: role !== "USER", notAria: role === "USER", spoken: spokenOf(who, content), ...linkFieldsOf("", role) };
 }
 /** Server transcript → bubbles. USER text is literal; ASSISTANT replies are
@@ -644,6 +663,7 @@ function bubbleOf(id: string, role: string, who: string, raw: string, writing: b
     content,
     notUser: role !== "USER",
     notAria: role === "USER",
+    spoken: spokenOf(who, content),
     ...linkFieldsOf(prose, role),
   };
 }
@@ -2004,7 +2024,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // a rehydrated turn there was no ladder at all, leaving "Aria is
         // typing…" on screen with nothing ever fetching the answer.
         if (s._pending || s.status === "sending") {
-          const held: AriaChatState = { ...s, status: "sending", prompts: [] };
+          const held: AriaChatState = { ...s, status: "sending", prompts: [], messages: withSpoken(s.messages) };
           return cadence(held, o.poll ? o.poll.fastMs : null, null);
         }
         // …but the self-kick pass runs BEFORE the pack is stashed, so the
@@ -2013,7 +2033,7 @@ export function createAriaChat(o: AriaChatOptions): AriaChatCore {
         // still the only thing on screen — `prompts` is already recomputed
         // here, and a chip pack that localizes beside a greeting that does not
         // is the visible half of the same bug.
-        const messages = isGreetingOnly(s.messages) ? greetingOnly() : s.messages;
+        const messages = isGreetingOnly(s.messages) ? greetingOnly() : withSpoken(s.messages);
         return { ...s, status: "ready", messages, prompts: promptsFor(messages, promptList()) };
       }
       try {

package/templates/yoga-studio/dev/index.ts CHANGED Viewed

@@ -265,11 +265,25 @@ const SCREENS = runtimeSetting({
                           "leading": 20,
                           "trailing": 20,
                           "top": 24,
-                          "bottom": 16
+                          "bottom": 24
                         },
                         "fillMaxWidth": true
                       }
                     },
+                    {
+                      "id": ".gap",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "VStack",
+                        "props": {
+                          "children": []
+                        }
+                      },
+                      "modifiers": {
+                        "height": 16,
+                        "fillMaxWidth": true
+                      }
+                    },
                     {
                       "id": "",
                       "body": {