@wix/himalaya-cli 0.1567.0 → 0.1569.0

package/templates/community-club-owner/tier5-src/_shared/himi-copy.ts

@@ -1,8 +1,8 @@
 // Copy-as-configuration for WORKER-emitted strings (`himi docs designing-himi-screens`,
 // §"Copy is configuration"): a worker never hardcodes user-facing copy — the
 // descriptor bakes the provisioned copy-pack overrides relevant to this worker
-// into its onAppear action params as a `copy` JSON object (key → override
-// string, computed from the app contract at descriptor-build time), and the
+// into its onAppear action params as a `copy` JSON object (customer strings or
+// source-matched stock translations, computed at descriptor-build time), and the
 // worker reads every user-facing string through `copyParam(key, fallback)`.
 //
 // STASHED (the stashed appear-params idiom, himi-branded-lite-home): the
@@ -16,9 +16,13 @@
 // every worker that emits user-facing copy, and copied verbatim into the
 // generated templates' tier5-src/_shared/.
 
-let stashedCopy: Record<string, string> = {};
+/** Customer strings override every read; translated stock is valid only for its
+ * original English fallback. Some existing keys serve more than one message. */
+export type CopyPackValue = string | { source: string; translation: string };
 
-/** Absorb the `copy` onAppear param (a JSON object of key → override string)
+let stashedCopy: Record<string, CopyPackValue> = Object.create(null);
+
+/** Absorb the `copy` onAppear param (customer strings or stock translation records)
  *  from an action arg. Call first in every action that can receive onAppear
  *  params (load/refresh). Non-copy args and malformed packs are ignored — the
  *  stock fallbacks keep rendering. */
@@ -29,9 +33,15 @@ export function stashCopy(arg: unknown): void {
   try {
     const parsed = JSON.parse(raw) as unknown;
     if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return;
-    const next: Record<string, string> = {};
+    const next: Record<string, CopyPackValue> = Object.create(null);
     for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
       if (typeof value === "string") next[key] = value;
+      else if (value && typeof value === "object" && !Array.isArray(value)) {
+        const row = value as Record<string, unknown>;
+        if (typeof row.source === "string" && typeof row.translation === "string") {
+          next[key] = { source: row.source, translation: row.translation };
+        }
+      }
     }
     stashedCopy = next;
   } catch {
@@ -43,7 +53,8 @@ export function stashCopy(arg: unknown): void {
  *  pack / no such key reached this worker. */
 export function copyParam(key: string, fallback: string): string {
   const value = stashedCopy[key];
-  return typeof value === "string" && value !== "" ? value : fallback;
+  if (typeof value === "string") return value !== "" ? value : fallback;
+  return value?.source === fallback && value.translation !== "" ? value.translation : fallback;
 }
 
 /** Interpolate `{name}` placeholders in a (possibly overridden) template:

package/templates/community-club-owner/tier5-src/_shared/rich-body.ts

@@ -32,3 +32,47 @@ export function richBody(richContent: unknown, fallback = "", imageWidth = 1400)
   const text = rejected === "too_deep" ? "" : ricosToPlainText(doc);
   return { bodyJson: json, bodyText: text || fallback };
 }
+
+/** A Wix description may be Ricos (including serialized JSON), HTML or ordinary text.
+ * Keep rich documents on the existing bounded encoder path. Non-document JSON and
+ * clearly malformed serialization use an independent fallback. Ambiguous bracketed
+ * prose stays readable; this does not attempt to repair arbitrary JSON syntax. */
+export function descriptionBody(value: unknown, fallback = "", imageWidth = 1400): RichBody {
+  if (typeof value !== "string") return richBody(value, fallback, imageWidth);
+  const text = value.trim();
+  if (/^[{[]/.test(text)) {
+    try {
+      const parsed: unknown = JSON.parse(text);
+      // Passing the parsed value avoids parsing a valid Ricos document twice; a
+      // different JSON structure is rejected by the same existing document check.
+      if (parsed && typeof parsed === "object") return richBody(parsed, fallback, imageWidth);
+    } catch {
+      const objectLike = /^\{\s*(?:["'}]|nodes\b)/.test(text);
+      // Only reject scalar-looking malformed arrays when their syntax is clearly
+      // unfinished (or contains JS's non-JSON `undefined`). Balanced bracketed
+      // prose such as "[1,000]" and "[12:30, 13:30]" is not JSON and stays readable.
+      const arrayTokens = text.replace(/"(?:\\.|[^"\\])*"/g, "")
+        .replace(/\b(?:true|false|null|undefined)\b/g, "")
+        .replace(/-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/g, "");
+      const arrayLike = /^\[\s*[{"]/.test(text)
+        || (text.startsWith("[") && /^[\s[\]{},:]*$/.test(arrayTokens)
+          && (/,\s*]?$/.test(text) || /\bundefined\b/.test(text) || !text.endsWith("]")));
+      if (objectLike || arrayLike) return { bodyJson: "", bodyText: fallback };
+    }
+  }
+  // Legacy HTML descriptions stay text. Preserve paragraph breaks and ordinary prose's
+  // bare '<' (e.g. "ages < 8"), without relying on browser-only DOM APIs in workers.
+  const plain = text
+    .replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "")
+    .replace(/<br\s*\/?\s*>/gi, "\n")
+    .replace(/<\/(?:p|div|h[1-6]|li)\s*>/gi, "\n\n")
+    .replace(/<\/?[a-z][^>]*>/gi, "")
+    .replace(/&(?:nbsp|amp|lt|gt|quot|apos|#39);/gi, (entity) => ({
+      "&nbsp;": " ", "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&apos;": "'", "&#39;": "'",
+    })[entity.toLowerCase()] ?? entity)
+    .replace(/[\t\r ]+/g, " ")
+    .replace(/ *\n */g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+  return { bodyJson: "", bodyText: plain || fallback };
+}

package/templates/events-meetups/config.ts

@@ -52,6 +52,16 @@ export default defineApp({
     ]
   },
   designTokensPath: "./tokens.json",
+  // Native fallback; the T5 splash descriptor owns the editable launch appearance.
+  splash: {
+    "enabled": true,
+    "backgroundColor": "accentPrimary",
+    "logoAsset": "branded_lite_app_icon",
+    "logoWidth": 192,
+    "layout": "logoOnly",
+    "minVisibleMs": 0,
+    "maxHoldMs": 5000
+  },
   navigation: {
     "navKind": "responsive",
     "scheme": "himalaya-__HIMI_APP_SLUG__",
@@ -220,7 +230,8 @@ export default defineApp({
           "contextName",
           "returnScreenId",
           "returnId",
-          "returnChannelId"
+          "returnChannelId",
+          "authContinuation"
         ],
         "parentScreenId": "himi_account",
         "tabId": "profile"

package/templates/events-meetups/dev/index.ts

@@ -2,6 +2,7 @@
 // Raw-descriptor dialect (see `himi docs tier-5-add-a-screen`); templated routes
 // fill __HIMI_ID__ sentinels per request.
 import config from "../config.js";
+import splashIcon from "../splash.json" with { type: "json" };
 
 const runtimeSetting = (value: unknown): unknown => {
   if (value === "__HIMI_PODCAST_FEED_URL__") return process.env.PODCAST_FEED_URL?.trim() || "";
@@ -13,6 +14,227 @@ const runtimeSetting = (value: unknown): unknown => {
 };
 
 const SCREENS = runtimeSetting({
+  "himi_branded_splash": {
+    "screenId": "himi_branded_splash",
+    "renderer": "sdui_intent",
+    "title": "",
+    "schemaVersion": 1,
+    "cacheControl": {
+      "maxAge": 0,
+      "staleWhileRevalidate": 0
+    },
+    "input": {
+      "showIcon": true,
+      "title": "",
+      "caption": ""
+    },
+    "logicBundle": {
+      "url": "http://localhost:8190/v1/bundles/himi-branded-lite-splash?integrity=",
+      "integrity": "",
+      "contentType": "application/javascript+ts-bundle",
+      "declaredCapabilities": [],
+      "minBinaryVersion": "0.1.0",
+      "bundleVersion": "0.0.1"
+    },
+    "payload": {
+      "id": "splash_t5",
+      "body": {
+        "package": "himalaya",
+        "type": "ZStack",
+        "props": {
+          "alignment": "center",
+          "children": [
+            {
+              "id": "splash_t5_gradient",
+              "body": {
+                "package": "himalaya",
+                "type": "VStack",
+                "props": {
+                  "children": [
+                    {
+                      "id": "splash_t5_gradient_fill",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "Spacer",
+                        "props": {}
+                      }
+                    }
+                  ]
+                }
+              },
+              "modifiers": {
+                "fillMaxWidth": true,
+                "backgroundGradient": {
+                  "token": "brand"
+                },
+                "transition": {
+                  "enter": "fade",
+                  "motion": {
+                    "token": "appearSoft"
+                  }
+                },
+                "respectReducedMotion": true
+              }
+            },
+            {
+              "id": "splash_t5_icon",
+              "body": {
+                "package": "himalaya",
+                "type": "ZStack",
+                "props": {
+                  "alignment": "center",
+                  "children": [
+                    {
+                      "id": "splash_t5_icon_image",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "Image",
+                        "props": {
+                          "asset": "branded_lite_app_icon",
+                          "width": 192,
+                          "height": 192,
+                          "contentMode": "fit"
+                        }
+                      },
+                      "modifiers": {
+                        "accessibilityRole": "decorative",
+                        "scale": 1.5
+                      }
+                    }
+                  ]
+                }
+              },
+              "modifiers": {
+                "width": 192,
+                "height": 192,
+                "clipShape": "circle",
+                "accessibilityRole": "decorative",
+                "hiddenPath": "$service:splash.iconHidden",
+                "transition": {
+                  "enter": "none",
+                  "exit": "fade",
+                  "motion": {
+                    "token": "appearSoft"
+                  }
+                },
+                "respectReducedMotion": true
+              }
+            },
+            {
+              "id": "",
+              "body": {
+                "package": "himalaya",
+                "type": "VStack",
+                "props": {
+                  "alignment": "center",
+                  "spacing": 0,
+                  "children": [
+                    {
+                      "id": "splash_t5_top",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "Spacer",
+                        "props": {}
+                      },
+                      "modifiers": {
+                        "weight": 1
+                      }
+                    },
+                    {
+                      "id": "splash_t5_copy",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "VStack",
+                        "props": {
+                          "alignment": "center",
+                          "spacing": 16,
+                          "children": [
+                            {
+                              "id": "splash_t5_title",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "Text",
+                                "props": {
+                                  "text": "$service:splash.title",
+                                  "style": "title1",
+                                  "color": "textOnAccent",
+                                  "textAlign": "center"
+                                }
+                              }
+                            },
+                            {
+                              "id": "splash_t5_caption",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "Text",
+                                "props": {
+                                  "text": "$service:splash.caption",
+                                  "style": "body",
+                                  "color": "textOnAccent",
+                                  "collapseWhenEmpty": true,
+                                  "textAlign": "center"
+                                }
+                              }
+                            },
+                            {
+                              "id": "splash_t5_bottom",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "Spacer",
+                                "props": {}
+                              }
+                            }
+                          ]
+                        }
+                      },
+                      "modifiers": {
+                        "weight": 1,
+                        "fillMaxWidth": true,
+                        "padding": {
+                          "top": 120,
+                          "bottom": 24,
+                          "leading": 24,
+                          "trailing": 24
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "id": "splash_t5_presented",
+              "body": {
+                "package": "himalaya",
+                "type": "Spacer",
+                "props": {}
+              },
+              "modifiers": {
+                "width": 0,
+                "height": 0,
+                "hiddenPath": "$service:splash.presentationPending",
+                "onAppear": {
+                  "actionId": "splash.presented",
+                  "params": {
+                    "motion": "appearSoft"
+                  }
+                }
+              }
+            }
+          ]
+        }
+      },
+      "modifiers": {
+        "fillMaxWidth": true,
+        "onAppear": {
+          "actionId": "tier5.splash.present"
+        },
+        "background": {
+          "token": "accentPrimary"
+        }
+      }
+    }
+  },
   "himi_branded_home": {
     "screenId": "himi_branded_home",
     "renderer": "sdui_intent",
@@ -17088,6 +17310,21 @@ const SCREENS = runtimeSetting({
   },
 }) as Record<string, unknown>;
 
+// The hosted app icon is content: updating splash.json needs an OTA publish, not a native build.
+// Without a hosted image, preserve the bundled icon and its native handoff crop.
+if (splashIcon.iconUrl) {
+  const url = new URL(splashIcon.iconUrl);
+  if (url.protocol !== "https:" || url.username || url.password) throw new Error("Splash images require a public HTTPS URL");
+  interface IconNode { id?: string; body: { package: string; type: string; props: { children?: IconNode[]; asset?: string; url?: string } } }
+  const splash = SCREENS.himi_branded_splash as { input?: { customLogo?: boolean }; payload?: { body?: { props?: { children?: IconNode[] } } } };
+  const icon = splash.payload?.body?.props?.children?.find((node) => node.id === "splash_t5_icon");
+  const image = icon?.body.type === "ZStack" ? icon.body.props.children?.find((node) => node.id === "splash_t5_icon_image") : icon;
+  if (image && !splash.input?.customLogo) {
+    delete image.body.props.asset;
+    image.body.props.url = splashIcon.iconUrl;
+  }
+}
+
 // The language destination stays registered for deep links and future translations. Keep its
 // account entry out of a single-language app; adding a locale to config.locale.translations
 // makes the same entry visible after the app config reloads.
@@ -21618,6 +21855,31 @@ const TEMPLATED: { pattern: string; display: string; liveSeed?: LiveSeed; static
                         }
                       }
                     },
+                    {
+                      "id": "himi_group.description_rich",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "RichContent",
+                        "props": {
+                          "documentJsonPath": "$service:himiBrandedGroup.descriptionJson",
+                          "onLink": {
+                            "actionId": "tier5.himiBrandedGroup.openLink"
+                          },
+                          "fallback": {
+                            "id": "",
+                            "body": {
+                              "package": "himalaya",
+                              "type": "Text",
+                              "props": {
+                                "text": "$service:himiBrandedGroup.description",
+                                "style": "body",
+                                "color": "textSecondary"
+                              }
+                            }
+                          }
+                        }
+                      }
+                    },
                     {
                       "id": "",
                       "body": {
@@ -21629,6 +21891,9 @@ const TEMPLATED: { pattern: string; display: string; liveSeed?: LiveSeed; static
                           "color": "textSecondary",
                           "collapseWhenEmpty": true
                         }
+                      },
+                      "modifiers": {
+                        "hiddenPath": "$service:himiBrandedGroup.hasDescriptionJson"
                       }
                     },
                     {
@@ -21771,7 +22036,8 @@ const TEMPLATED: { pattern: string; display: string; liveSeed?: LiveSeed; static
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
         "wix_api",
-        "local_database"
+        "local_database",
+        "open_url"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"

package/templates/events-meetups/himalaya.content.json

@@ -25,6 +25,9 @@
     "himi_branded_home": {
       "displayName": "Home"
     },
+    "himi_branded_splash": {
+      "displayName": "Splash"
+    },
     "himi_create_post": {
       "displayName": "Create Post"
     },

package/templates/events-meetups/splash.json

@@ -0,0 +1,3 @@
+{
+  "iconUrl": ""
+}

package/templates/events-meetups/tier5-src/_shared/himi-copy.ts

@@ -1,8 +1,8 @@
 // Copy-as-configuration for WORKER-emitted strings (`himi docs designing-himi-screens`,
 // §"Copy is configuration"): a worker never hardcodes user-facing copy — the
 // descriptor bakes the provisioned copy-pack overrides relevant to this worker
-// into its onAppear action params as a `copy` JSON object (key → override
-// string, computed from the app contract at descriptor-build time), and the
+// into its onAppear action params as a `copy` JSON object (customer strings or
+// source-matched stock translations, computed at descriptor-build time), and the
 // worker reads every user-facing string through `copyParam(key, fallback)`.
 //
 // STASHED (the stashed appear-params idiom, himi-branded-lite-home): the
@@ -16,9 +16,13 @@
 // every worker that emits user-facing copy, and copied verbatim into the
 // generated templates' tier5-src/_shared/.
 
-let stashedCopy: Record<string, string> = {};
+/** Customer strings override every read; translated stock is valid only for its
+ * original English fallback. Some existing keys serve more than one message. */
+export type CopyPackValue = string | { source: string; translation: string };
 
-/** Absorb the `copy` onAppear param (a JSON object of key → override string)
+let stashedCopy: Record<string, CopyPackValue> = Object.create(null);
+
+/** Absorb the `copy` onAppear param (customer strings or stock translation records)
  *  from an action arg. Call first in every action that can receive onAppear
  *  params (load/refresh). Non-copy args and malformed packs are ignored — the
  *  stock fallbacks keep rendering. */
@@ -29,9 +33,15 @@ export function stashCopy(arg: unknown): void {
   try {
     const parsed = JSON.parse(raw) as unknown;
     if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return;
-    const next: Record<string, string> = {};
+    const next: Record<string, CopyPackValue> = Object.create(null);
     for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
       if (typeof value === "string") next[key] = value;
+      else if (value && typeof value === "object" && !Array.isArray(value)) {
+        const row = value as Record<string, unknown>;
+        if (typeof row.source === "string" && typeof row.translation === "string") {
+          next[key] = { source: row.source, translation: row.translation };
+        }
+      }
     }
     stashedCopy = next;
   } catch {
@@ -43,7 +53,8 @@ export function stashCopy(arg: unknown): void {
  *  pack / no such key reached this worker. */
 export function copyParam(key: string, fallback: string): string {
   const value = stashedCopy[key];
-  return typeof value === "string" && value !== "" ? value : fallback;
+  if (typeof value === "string") return value !== "" ? value : fallback;
+  return value?.source === fallback && value.translation !== "" ? value.translation : fallback;
 }
 
 /** Interpolate `{name}` placeholders in a (possibly overridden) template:

package/templates/events-meetups/tier5-src/_shared/rich-body.ts

@@ -32,3 +32,47 @@ export function richBody(richContent: unknown, fallback = "", imageWidth = 1400)
   const text = rejected === "too_deep" ? "" : ricosToPlainText(doc);
   return { bodyJson: json, bodyText: text || fallback };
 }
+
+/** A Wix description may be Ricos (including serialized JSON), HTML or ordinary text.
+ * Keep rich documents on the existing bounded encoder path. Non-document JSON and
+ * clearly malformed serialization use an independent fallback. Ambiguous bracketed
+ * prose stays readable; this does not attempt to repair arbitrary JSON syntax. */
+export function descriptionBody(value: unknown, fallback = "", imageWidth = 1400): RichBody {
+  if (typeof value !== "string") return richBody(value, fallback, imageWidth);
+  const text = value.trim();
+  if (/^[{[]/.test(text)) {
+    try {
+      const parsed: unknown = JSON.parse(text);
+      // Passing the parsed value avoids parsing a valid Ricos document twice; a
+      // different JSON structure is rejected by the same existing document check.
+      if (parsed && typeof parsed === "object") return richBody(parsed, fallback, imageWidth);
+    } catch {
+      const objectLike = /^\{\s*(?:["'}]|nodes\b)/.test(text);
+      // Only reject scalar-looking malformed arrays when their syntax is clearly
+      // unfinished (or contains JS's non-JSON `undefined`). Balanced bracketed
+      // prose such as "[1,000]" and "[12:30, 13:30]" is not JSON and stays readable.
+      const arrayTokens = text.replace(/"(?:\\.|[^"\\])*"/g, "")
+        .replace(/\b(?:true|false|null|undefined)\b/g, "")
+        .replace(/-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/g, "");
+      const arrayLike = /^\[\s*[{"]/.test(text)
+        || (text.startsWith("[") && /^[\s[\]{},:]*$/.test(arrayTokens)
+          && (/,\s*]?$/.test(text) || /\bundefined\b/.test(text) || !text.endsWith("]")));
+      if (objectLike || arrayLike) return { bodyJson: "", bodyText: fallback };
+    }
+  }
+  // Legacy HTML descriptions stay text. Preserve paragraph breaks and ordinary prose's
+  // bare '<' (e.g. "ages < 8"), without relying on browser-only DOM APIs in workers.
+  const plain = text
+    .replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "")
+    .replace(/<br\s*\/?\s*>/gi, "\n")
+    .replace(/<\/(?:p|div|h[1-6]|li)\s*>/gi, "\n\n")
+    .replace(/<\/?[a-z][^>]*>/gi, "")
+    .replace(/&(?:nbsp|amp|lt|gt|quot|apos|#39);/gi, (entity) => ({
+      "&nbsp;": " ", "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&apos;": "'", "&#39;": "'",
+    })[entity.toLowerCase()] ?? entity)
+    .replace(/[\t\r ]+/g, " ")
+    .replace(/ *\n */g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+  return { bodyJson: "", bodyText: plain || fallback };
+}

package/templates/events-meetups/tier5-src/himi-branded-lite-group/index.ts

@@ -9,6 +9,8 @@ import { WIX_DETAIL_IMAGE } from "@himalaya/wix-media";
 import { copyParam, stashCopy } from "../_shared/himi-copy.js";
 import { get as dbGet, upsert as dbUpsert, type DbEntity } from "@himalaya/local-db";
 import { isOfflineFailure, writeMayHaveLanded } from "../_shared/owner-load-error";
+import { descriptionBody } from "../_shared/rich-body.js";
+import { openRichLink } from "../_shared/rich-content-link.js";
 
 interface MemberAvatar {
   initials: string;
@@ -42,7 +44,8 @@ async function cachePutMembership(state: State, joined: boolean): Promise<void>
       noImage: state.noImage,
       detailScreenId: "himi_group",
     };
-    await dbUpsert(ENTITY, { ...existing, id: state.id, joined: joined ? "true" : "false" });
+    await dbUpsert(ENTITY, { ...existing, id: state.id, description: state.description,
+      descriptionJson: state.descriptionJson, joined: joined ? "true" : "false" });
   } catch { /* capability not granted */ }
 }
 
@@ -51,6 +54,8 @@ interface State {
   id: string;
   name: string;
   description: string;
+  descriptionJson: string;
+  hasDescriptionJson: boolean;
   privacy: string;
   memberCount: string;
   /** Member avatar strip (photo or initials per member) — best-effort: the
@@ -132,6 +137,8 @@ const initial: State = {
   id: "",
   name: "",
   description: "",
+  descriptionJson: "",
+  hasDescriptionJson: false,
   privacy: "",
   memberCount: "",
   memberAvatars: [],
@@ -162,6 +169,7 @@ const svc = defineService<State, {
   load: (state: State, arg?: unknown) => Promise<State>;
   join: (state: State) => Promise<State>;
   leave: (state: State) => Promise<State>;
+  openLink: (state: State, arg?: unknown) => Promise<undefined>;
 }>("himiBrandedGroup", {
   state: initial,
   actions: {
@@ -179,12 +187,16 @@ const svc = defineService<State, {
         const privacyLabel = privacy[0].toUpperCase() + privacy.slice(1);
         const signedIn = Boolean(await signedInEmail());
         const memberAvatars = await memberAvatarsOf(id);
+        const body = descriptionBody(group.description, descriptionBody(group.teaser,
+          copyParam("group.descriptionFallback", "Join this group to connect with other members.")).bodyText);
         const loaded: State = {
           ...state,
           status: "ready",
           id,
           name,
-          description: group.description || group.teaser || copyParam("group.descriptionFallback", "Join this group to connect with other members."),
+          description: body.bodyText,
+          descriptionJson: body.bodyJson,
+          hasDescriptionJson: body.bodyJson !== "",
           privacy: privacyLabel,
           memberCount: count == null ? "" : `${count} ${count === 1 ? "member" : "members"}`,
           memberAvatars,
@@ -209,12 +221,16 @@ const svc = defineService<State, {
           const name = (String(cached.title ?? cached.name ?? "Group")).trim() || "Group";
           const image = String(cached.image ?? "");
           const signedIn = Boolean(await signedInEmail());
+          const body = descriptionBody(cached.descriptionJson || cached.description || cached.subtitle,
+            copyParam("group.descriptionFallback", "Join this group to connect with other members."));
           const loaded: State = {
             ...state,
             status: "ready",
             id,
             name,
-            description: String(cached.subtitle ?? cached.description ?? "Join this group to connect with other members."),
+            description: body.bodyText,
+            descriptionJson: body.bodyJson,
+            hasDescriptionJson: body.bodyJson !== "",
             privacy: "Unknown",
             memberCount: String(cached.meta ?? ""),
             image,
@@ -233,6 +249,7 @@ const svc = defineService<State, {
         return { ...state, id, status: "error", isLoading: false, notLoading: true, isErrored: true, notErrored: false, hideContent: true };
       }
     },
+    openLink: async (_state, arg) => { await openRichLink(arg); return undefined; },
     join: async (state) => {
       const signedIn = Boolean(await signedInEmail());
       if (!signedIn) return membershipState({ ...state, message: copyParam("group.joinSignInMessage", "Sign in from Profile to join groups.") }, false, false);