@glyphjs/components 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,4 +1,5 @@
 import { accordionSchema, annotateSchema, architectureSchema, calloutSchema, cardSchema, chartSchema, codediffSchema, comparisonSchema, equationSchema, filetreeSchema, flowchartSchema, formSchema, graphSchema, infographicSchema, kanbanSchema, kpiSchema, matrixSchema, mindmapSchema, pollSchema, quizSchema, rankerSchema, ratingSchema, relationSchema, sequenceSchema, sliderSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema } from '@glyphjs/schemas';
+import { RichText } from '@glyphjs/runtime';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as d32 from 'd3';
@@ -50,7 +51,7 @@ function Callout({ data }) {
     /* @__PURE__ */ jsx("span", { style: iconStyle, "aria-hidden": "true", children: CALLOUT_ICONS[type] }),
     /* @__PURE__ */ jsxs("div", { style: bodyStyle3, children: [
       title && /* @__PURE__ */ jsx("div", { style: titleStyle2, children: title }),
-      /* @__PURE__ */ jsx("div", { children: content })
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RichText, { content }) })
     ] })
   ] });
 }
@@ -528,7 +529,7 @@ function Steps({ data }) {
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: indicatorStyle(status), children: status === "completed" ? "\u2713" : "" }),
           /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
             /* @__PURE__ */ jsx("div", { style: titleStyle(status), children: step.title }),
-            /* @__PURE__ */ jsx("div", { style: contentStyle(status), children: step.content })
+            /* @__PURE__ */ jsx("div", { style: contentStyle(status), children: /* @__PURE__ */ jsx(RichText, { content: step.content }) })
           ] })
         ]
       },
@@ -1187,7 +1188,7 @@ function Timeline({ data }) {
                     fontWeight: 700,
                     marginTop: 2
                   },
-                  children: pe.event.title
+                  children: /* @__PURE__ */ jsx(RichText, { content: pe.event.title })
                 }
               ),
               pe.event.description && /* @__PURE__ */ jsx(
@@ -1198,7 +1199,7 @@ function Timeline({ data }) {
                     color: "var(--glyph-timeline-desc-color, #7a8599)",
                     marginTop: 2
                   },
-                  children: pe.event.description
+                  children: /* @__PURE__ */ jsx(RichText, { content: pe.event.description })
                 }
               )
             ] })
@@ -1216,12 +1217,16 @@ function Timeline({ data }) {
               clipPath: "inset(50%)",
               whiteSpace: "nowrap"
             },
-            children: sorted.map((e, idx) => /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsx("time", { dateTime: isoDate(e.date), children: formatDate(e.date) }),
-              " \u2014 ",
-              /* @__PURE__ */ jsx("strong", { children: e.title }),
-              e.description ? `: ${e.description}` : ""
-            ] }, idx))
+            children: sorted.map((e, idx) => {
+              const titleText = typeof e.title === "string" ? e.title : "Event";
+              const descText = typeof e.description === "string" ? e.description : "";
+              return /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("time", { dateTime: isoDate(e.date), children: formatDate(e.date) }),
+                " \u2014 ",
+                /* @__PURE__ */ jsx("strong", { children: titleText }),
+                descText ? `: ${descText}` : ""
+              ] }, idx);
+            })
           }
         )
       ]
@@ -1893,7 +1898,8 @@ function resolveSentiment(metric) {
   return "neutral";
 }
 function buildAriaLabel(metric) {
-  let label = `${metric.label}: ${metric.value}`;
+  const labelText = typeof metric.label === "string" ? metric.label : "Metric";
+  let label = `${labelText}: ${metric.value}`;
   if (metric.unit) label += ` ${metric.unit}`;
   if (metric.delta && metric.trend) {
     label += `, ${metric.trend} ${metric.delta}`;
@@ -1965,7 +1971,7 @@ function Kpi({ data, block, container }) {
         color: `var(--glyph-kpi-${sentiment}, inherit)`
       };
       return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": buildAriaLabel(metric), style: cardStyle2, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: metric.label }),
+        /* @__PURE__ */ jsx("div", { style: labelStyle4, children: /* @__PURE__ */ jsx(RichText, { content: metric.label }) }),
         /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
           metric.value,
           metric.unit && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", fontWeight: 400, marginLeft: "0.25rem" }, children: metric.unit })
@@ -2079,7 +2085,7 @@ function Accordion({
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: "0.75rem", width: "1rem", flexShrink: 0 }, children: "\u25B8" }),
                 section.title
               ] }),
-              /* @__PURE__ */ jsx("div", { style: contentStyle2, children: section.content })
+              /* @__PURE__ */ jsx("div", { style: contentStyle2, children: /* @__PURE__ */ jsx(RichText, { content: section.content }) })
             ]
           },
           i
@@ -2098,6 +2104,7 @@ var accordionDefinition = {
 var YES_VALUES = /* @__PURE__ */ new Set(["yes", "true", "full"]);
 var NO_VALUES = /* @__PURE__ */ new Set(["no", "false", "none"]);
 function classifyValue(value) {
+  if (typeof value !== "string") return "text";
   const lower = value.toLowerCase().trim();
   if (YES_VALUES.has(lower)) return "yes";
   if (NO_VALUES.has(lower)) return "no";
@@ -2135,7 +2142,7 @@ function renderValue(value) {
         }
       );
     default:
-      return /* @__PURE__ */ jsx("span", { children: value });
+      return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: value }) });
   }
 }
 function Comparison({
@@ -2231,7 +2238,7 @@ function Comparison({
                     fontSize: "0.75rem",
                     color: "var(--glyph-text-muted, #6b7a94)"
                   },
-                  children: option.description
+                  children: /* @__PURE__ */ jsx(RichText, { content: option.description })
                 }
               )
             ]
@@ -2252,8 +2259,8 @@ function Comparison({
           }
         ),
         options.map((_, colIndex) => {
-          const value = feature.values[colIndex] ?? "";
-          return /* @__PURE__ */ jsx("td", { style: cellStyle2(rowIndex), children: value ? renderValue(value) : null }, colIndex);
+          const value = feature.values[colIndex];
+          return /* @__PURE__ */ jsx("td", { style: cellStyle2(rowIndex), children: value !== void 0 && value !== "" ? renderValue(value) : null }, colIndex);
         })
       ] }, rowIndex)) })
     ] }) })
@@ -4204,7 +4211,8 @@ function isCorrect(question, selected) {
 }
 function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
   const selected = typeof state.selected === "number" ? state.selected : null;
-  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": question.question, children: question.options.map((option, oIndex) => {
+  const ariaLabel = typeof question.question === "string" ? question.question : "Question";
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": ariaLabel, children: question.options.map((option, oIndex) => {
     const isSelected = selected === oIndex;
     const isCorrectOption = state.submitted && oIndex === question.answer;
     const isIncorrectSelection = state.submitted && isSelected && oIndex !== question.answer;
@@ -4230,7 +4238,7 @@ function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
               "aria-checked": isSelected
             }
           ),
-          option
+          /* @__PURE__ */ jsx(RichText, { content: option })
         ]
       },
       oIndex
@@ -4239,7 +4247,8 @@ function renderMultipleChoice(question, qIndex, state, updateState, baseId) {
 }
 function renderTrueFalse(question, qIndex, state, updateState, baseId) {
   const selected = typeof state.selected === "boolean" ? state.selected : null;
-  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": question.question, children: [true, false].map((value) => {
+  const ariaLabel = typeof question.question === "string" ? question.question : "Question";
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": ariaLabel, children: [true, false].map((value) => {
     const isSelected = selected === value;
     const isCorrectOption = state.submitted && value === question.answer;
     const isIncorrectSelection = state.submitted && isSelected && value !== question.answer;
@@ -4303,7 +4312,7 @@ function renderMultiSelect(question, qIndex, state, updateState) {
               "aria-checked": isSelected
             }
           ),
-          option
+          /* @__PURE__ */ jsx(RichText, { content: option })
         ]
       },
       oIndex
@@ -4342,7 +4351,7 @@ function Quiz({ data, block, onInteraction }) {
         children: [
           /* @__PURE__ */ jsxs("div", { style: questionTextStyle, children: [
             questions.length > 1 ? `${String(qIndex + 1)}. ` : "",
-            question.question
+            /* @__PURE__ */ jsx(RichText, { content: question.question })
           ] }),
           question.type === "multiple-choice" && renderMultipleChoice(question, qIndex, state, updateState, baseId),
           question.type === "true-false" && renderTrueFalse(question, qIndex, state, updateState, baseId),
@@ -4366,15 +4375,24 @@ function Quiz({ data, block, onInteraction }) {
                   let selected;
                   switch (question.type) {
                     case "multiple-choice":
-                      selected = typeof state.selected === "number" ? [question.options[state.selected] ?? String(state.selected)] : [];
+                      if (typeof state.selected === "number") {
+                        const opt = question.options[state.selected];
+                        selected = [typeof opt === "string" ? opt : String(state.selected)];
+                      } else {
+                        selected = [];
+                      }
                       break;
                     case "true-false":
                       selected = typeof state.selected === "boolean" ? [state.selected ? "True" : "False"] : [];
                       break;
                     case "multi-select":
-                      selected = Array.isArray(state.selected) ? state.selected.map((idx) => question.options[idx] ?? String(idx)) : [];
+                      selected = Array.isArray(state.selected) ? state.selected.map((idx) => {
+                        const opt = question.options[idx];
+                        return typeof opt === "string" ? opt : String(idx);
+                      }) : [];
                       break;
                   }
+                  const questionText = typeof question.question === "string" ? question.question : "Question";
                   onInteraction({
                     kind: "quiz-submit",
                     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -4382,7 +4400,7 @@ function Quiz({ data, block, onInteraction }) {
                     blockType: block.type,
                     payload: {
                       questionIndex: qIndex,
-                      question: question.question,
+                      question: questionText,
                       selected,
                       correct: correct2,
                       score: { correct: newScore, total: questions.length }
@@ -4395,7 +4413,7 @@ function Quiz({ data, block, onInteraction }) {
           ),
           /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
             state.submitted && /* @__PURE__ */ jsx("div", { style: feedbackStyle(correct), children: correct ? "Correct!" : "Incorrect" }),
-            state.submitted && question.explanation && /* @__PURE__ */ jsx("div", { style: explanationStyle, children: question.explanation })
+            state.submitted && question.explanation && /* @__PURE__ */ jsx("div", { style: explanationStyle, children: /* @__PURE__ */ jsx(RichText, { content: question.explanation }) })
           ] })
         ]
       },
@@ -4533,8 +4551,8 @@ function Card({ data, block, container }) {
       /* @__PURE__ */ jsxs("div", { style: cardBodyStyle, children: [
         card.icon && /* @__PURE__ */ jsx("div", { style: iconStyle, children: card.icon }),
         /* @__PURE__ */ jsx("h3", { style: titleStyle2, children: card.title }),
-        card.subtitle && /* @__PURE__ */ jsx("div", { style: subtitleStyle, children: card.subtitle }),
-        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle3, children: card.body }),
+        card.subtitle && /* @__PURE__ */ jsx("div", { style: subtitleStyle, children: /* @__PURE__ */ jsx(RichText, { content: card.subtitle }) }),
+        card.body && /* @__PURE__ */ jsx("div", { style: bodyStyle3, children: /* @__PURE__ */ jsx(RichText, { content: card.body }) }),
         card.actions && card.actions.length > 0 && /* @__PURE__ */ jsx("div", { style: actionsStyle, children: card.actions.map((action, j) => /* @__PURE__ */ jsx(
           "a",
           {
@@ -4641,7 +4659,7 @@ function renderStatGroup(items, keyPrefix) {
   return /* @__PURE__ */ jsx("div", { style: rowStyle, "data-group": "stat", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
     /* @__PURE__ */ jsx("div", { style: valueStyle, children: item.value }),
     /* @__PURE__ */ jsx("div", { style: labelStyle4, children: item.label }),
-    item.description && /* @__PURE__ */ jsx("div", { style: descStyle, children: item.description })
+    item.description && /* @__PURE__ */ jsx("div", { style: descStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.description }) })
   ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
 }
 function renderProgressGroup(items, keyPrefix, colorOffset) {
@@ -4734,7 +4752,7 @@ function renderFactGroup(items, keyPrefix) {
         children: item.icon
       }
     ),
-    item.text
+    /* @__PURE__ */ jsx(RichText, { content: item.text })
   ] }, `${keyPrefix}-${String(i)}`)) }, keyPrefix);
 }
 function renderTextGroup(items, keyPrefix) {
@@ -5216,17 +5234,21 @@ function Poll({ data, block, onInteraction }) {
         blockId: block.id,
         blockType: block.type,
         payload: {
-          selectedOptions: selected.map((i) => options[i] ?? String(i)),
+          selectedOptions: selected.map((i) => {
+            const opt = options[i];
+            return typeof opt === "string" ? opt : String(i);
+          }),
           selectedIndices: [...selected]
         }
       });
     }
   };
   const totalVotes = votes.reduce((a, b) => a + b, 0);
+  const questionAriaLabel = typeof question === "string" ? question : "Poll question";
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Poll", style: containerStyle3, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle2, children: title }),
-    /* @__PURE__ */ jsx("div", { style: questionStyle, children: question }),
-    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": question, style: optionsStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs("label", { style: optionLabelStyle2(selected.includes(index)), children: [
+    /* @__PURE__ */ jsx("div", { style: questionStyle, children: /* @__PURE__ */ jsx(RichText, { content: question }) }),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": questionAriaLabel, style: optionsStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs("label", { style: optionLabelStyle2(selected.includes(index)), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5238,7 +5260,7 @@ function Poll({ data, block, onInteraction }) {
           "aria-checked": selected.includes(index)
         }
       ),
-      option
+      /* @__PURE__ */ jsx(RichText, { content: option })
     ] }, index)) }),
     !hasVoted && /* @__PURE__ */ jsx(
       "button",
@@ -5257,9 +5279,10 @@ function Poll({ data, block, onInteraction }) {
     showResults && hasVoted && /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", style: resultsStyle, children: options.map((option, index) => {
       const count = votes[index] ?? 0;
       const percentage = totalVotes > 0 ? count / totalVotes * 100 : 0;
+      const optionLabel = typeof option === "string" ? option : "Option";
       return /* @__PURE__ */ jsxs("div", { style: resultRowStyle, children: [
         /* @__PURE__ */ jsxs("div", { style: resultLabelStyle, children: [
-          /* @__PURE__ */ jsx("span", { children: option }),
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RichText, { content: option }) }),
           /* @__PURE__ */ jsxs("span", { children: [
             String(count),
             " vote",
@@ -5277,7 +5300,7 @@ function Poll({ data, block, onInteraction }) {
             "aria-valuenow": percentage,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-label": `${option}: ${String(Math.round(percentage))}%`,
+            "aria-label": `${optionLabel}: ${String(Math.round(percentage))}%`,
             children: /* @__PURE__ */ jsx("div", { style: barFillStyle(percentage) })
           }
         )
@@ -5379,6 +5402,8 @@ function Rating({
     newRatings[itemIndex] = value;
     setRatings(newRatings);
     if (onInteraction) {
+      const item = items[itemIndex];
+      const itemLabel = item ? typeof item.label === "string" ? item.label : "Item" : "";
       onInteraction({
         kind: "rating-change",
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -5386,10 +5411,10 @@ function Rating({
         blockType: block.type,
         payload: {
           itemIndex,
-          itemLabel: items[itemIndex]?.label ?? "",
+          itemLabel,
           value,
-          allRatings: items.map((item, i) => ({
-            label: item.label,
+          allRatings: items.map((item2, i) => ({
+            label: typeof item2.label === "string" ? item2.label : "Item",
             value: i === itemIndex ? value : newRatings[i] ?? null
           }))
         }
@@ -5401,10 +5426,11 @@ function Rating({
     items.map((item, itemIndex) => {
       const currentRating = ratings[itemIndex] ?? null;
       const isLast = itemIndex === items.length - 1;
+      const itemLabelText = typeof item.label === "string" ? item.label : "Item";
       return /* @__PURE__ */ jsxs("div", { style: itemStyle2(isLast), children: [
-        /* @__PURE__ */ jsx("div", { style: itemLabelStyle, children: item.label }),
-        item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle, children: item.description }),
-        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": `Rate ${item.label}`, style: starsContainerStyle, children: Array.from({ length: scale }, (_, starIndex) => {
+        /* @__PURE__ */ jsx("div", { style: itemLabelStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.label }) }),
+        item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle, children: /* @__PURE__ */ jsx(RichText, { content: item.description }) }),
+        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": `Rate ${itemLabelText}`, style: starsContainerStyle, children: Array.from({ length: scale }, (_, starIndex) => {
           const value = starIndex + 1;
           const isHovered = hoveredStar !== null && hoveredStar.itemIndex === itemIndex && value <= hoveredStar.value;
           const isFilled = currentRating !== null && value <= currentRating;
@@ -5458,7 +5484,7 @@ function Rating({
               whiteSpace: "nowrap",
               border: 0
             },
-            children: currentRating !== null && `${item.label} rated ${String(currentRating)} out of ${String(scale)}`
+            children: currentRating !== null && `${itemLabelText} rated ${String(currentRating)} out of ${String(scale)}`
           }
         )
       ] }, itemIndex);
@@ -5565,12 +5591,12 @@ function Ranker({
             payload: {
               orderedItems: newItems.map((item, i) => ({
                 id: item.id,
-                label: item.label,
+                label: typeof item.label === "string" ? item.label : "Item",
                 rank: i + 1
               })),
               movedItem: {
                 id: moved.id,
-                label: moved.label,
+                label: typeof moved.label === "string" ? moved.label : "Item",
                 fromRank: fromIndex + 1,
                 toRank: toIndex + 1
               }
@@ -5608,26 +5634,29 @@ function Ranker({
   };
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Ranker", style: containerStyle5, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle4, children: title }),
-    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": title ?? "Rank items", style: listStyle, children: items.map((item, index) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        role: "listitem",
-        "aria-grabbed": grabbedIndex === index,
-        "aria-label": `${item.label}, rank ${String(index + 1)}`,
-        tabIndex: 0,
-        style: itemStyle3(false, grabbedIndex === index),
-        onKeyDown: (e) => handleKeyDown(e, index),
-        children: [
-          /* @__PURE__ */ jsx("span", { style: gripStyle, "aria-hidden": "true", children: "\u283F" }),
-          /* @__PURE__ */ jsx("span", { style: rankBadgeStyle, children: String(index + 1) }),
-          /* @__PURE__ */ jsxs("div", { style: itemContentStyle, children: [
-            /* @__PURE__ */ jsx("div", { style: itemLabelStyle2, children: item.label }),
-            item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle2, children: item.description })
-          ] })
-        ]
-      },
-      item.id
-    )) }),
+    /* @__PURE__ */ jsx("ul", { role: "list", "aria-label": title ?? "Rank items", style: listStyle, children: items.map((item, index) => {
+      const itemLabelText = typeof item.label === "string" ? item.label : "Item";
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "listitem",
+          "aria-grabbed": grabbedIndex === index,
+          "aria-label": `${itemLabelText}, rank ${String(index + 1)}`,
+          tabIndex: 0,
+          style: itemStyle3(false, grabbedIndex === index),
+          onKeyDown: (e) => handleKeyDown(e, index),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: gripStyle, "aria-hidden": "true", children: "\u283F" }),
+            /* @__PURE__ */ jsx("span", { style: rankBadgeStyle, children: String(index + 1) }),
+            /* @__PURE__ */ jsxs("div", { style: itemContentStyle, children: [
+              /* @__PURE__ */ jsx("div", { style: itemLabelStyle2, children: /* @__PURE__ */ jsx(RichText, { content: item.label }) }),
+              item.description && /* @__PURE__ */ jsx("div", { style: itemDescriptionStyle2, children: item.description })
+            ] })
+          ]
+        },
+        item.id
+      );
+    }) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5643,7 +5672,7 @@ function Ranker({
           whiteSpace: "nowrap",
           border: 0
         },
-        children: grabbedIndex !== null && `${items[grabbedIndex]?.label ?? ""} grabbed, rank ${String(grabbedIndex + 1)} of ${String(items.length)}. Use arrow keys to move.`
+        children: grabbedIndex !== null && items[grabbedIndex] !== void 0 ? `${typeof items[grabbedIndex].label === "string" ? items[grabbedIndex].label : "Item"} grabbed, rank ${String(grabbedIndex + 1)} of ${String(items.length)}. Use arrow keys to move.` : ""
       }
     )
   ] });
@@ -5729,11 +5758,11 @@ function Slider({
         blockType: block.type,
         payload: {
           parameterId: param.id,
-          parameterLabel: param.label,
+          parameterLabel: typeof param.label === "string" ? param.label : "Parameter",
           value: newValue,
           allValues: parameters.map((p, i) => ({
             id: p.id,
-            label: p.label,
+            label: typeof p.label === "string" ? p.label : "Parameter",
             value: i === paramIndex ? newValue : newValues[i] ?? 0
           }))
         }
@@ -5753,7 +5782,7 @@ function Slider({
       const isLast = index === parameters.length - 1;
       return /* @__PURE__ */ jsxs("div", { style: parameterStyle(isLast), children: [
         /* @__PURE__ */ jsxs("div", { style: parameterHeaderStyle, children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-${param.id}`, style: parameterLabelStyle, children: param.label }),
+          /* @__PURE__ */ jsx("label", { htmlFor: `${baseId}-${param.id}`, style: parameterLabelStyle, children: /* @__PURE__ */ jsx(RichText, { content: param.label }) }),
           /* @__PURE__ */ jsx("span", { style: parameterValueStyle, "aria-live": "polite", children: formatValue(currentValue, param.unit) })
         ] }),
         /* @__PURE__ */ jsx(
@@ -5866,7 +5895,8 @@ function computeWeightedTotals(rows, columns, values) {
       const weight = col.weight ?? 1;
       total += score * weight;
     }
-    return { rowId: row.id, rowLabel: row.label, total: Math.round(total * 100) / 100 };
+    const rowLabel = typeof row.label === "string" ? row.label : "Row";
+    return { rowId: row.id, rowLabel, total: Math.round(total * 100) / 100 };
   });
 }
 function Matrix({
@@ -5909,9 +5939,9 @@ function Matrix({
             blockType: block.type,
             payload: {
               rowId,
-              rowLabel: row.label,
+              rowLabel: typeof row.label === "string" ? row.label : "Row",
               columnId,
-              columnLabel: col.label,
+              columnLabel: typeof col.label === "string" ? col.label : "Column",
               value: clamped,
               allValues: payloadValues,
               weightedTotals: computeWeightedTotals(rows, columns, newValues)
@@ -5930,7 +5960,7 @@ function Matrix({
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { style: thStyle }),
         columns.map((col) => /* @__PURE__ */ jsxs("th", { style: thStyle, children: [
-          col.label,
+          /* @__PURE__ */ jsx(RichText, { content: col.label }),
           (col.weight ?? 1) !== 1 && /* @__PURE__ */ jsxs("div", { style: weightStyle, children: [
             "\xD7",
             String(col.weight)
@@ -5940,10 +5970,12 @@ function Matrix({
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
         const rowTotal = totals.find((t) => t.rowId === row.id)?.total ?? 0;
+        const rowLabelText = typeof row.label === "string" ? row.label : "Row";
         return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { scope: "row", style: rowHeaderStyle, children: row.label }),
+          /* @__PURE__ */ jsx("th", { scope: "row", style: rowHeaderStyle, children: /* @__PURE__ */ jsx(RichText, { content: row.label }) }),
           columns.map((col) => {
             const cellValue = values[row.id]?.[col.id] ?? 0;
+            const colLabelText = typeof col.label === "string" ? col.label : "Column";
             return /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(
               "input",
               {
@@ -5952,7 +5984,7 @@ function Matrix({
                 max: scale,
                 value: cellValue,
                 onChange: (e) => handleChange(row.id, col.id, Number(e.target.value)),
-                "aria-label": `Score for ${row.label} on ${col.label}`,
+                "aria-label": `Score for ${rowLabelText} on ${colLabelText}`,
                 style: inputStyle
               }
             ) }, col.id);
@@ -6246,7 +6278,7 @@ function Form({ data, block, onInteraction }) {
   };
   return /* @__PURE__ */ jsxs("div", { id: baseId, role: "region", "aria-label": title ?? "Form", style: containerStyle8, children: [
     title && /* @__PURE__ */ jsx("div", { style: headerStyle7, children: title }),
-    description && /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: description }),
+    description && /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: /* @__PURE__ */ jsx(RichText, { content: description }) }),
     /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: formStyle, noValidate: true, children: [
       fields.map(
         (field) => renderField({ field, baseId, values, validation, submitted, updateValue })
@@ -6633,6 +6665,9 @@ var annotationNoteStyle = {
   marginTop: "0.125rem"
 };
 function computeSegments(text, annotations) {
+  if (typeof text !== "string") {
+    return [{ text: "", start: 0, annotation: null }];
+  }
   if (annotations.length === 0) {
     return [{ text, start: 0, annotation: null }];
   }
@@ -6712,7 +6747,7 @@ function Annotate({
           allAnnotations: newAnnotations.map((a) => ({
             start: a.start,
             end: a.end,
-            text: text.slice(a.start, a.end),
+            text: typeof text === "string" ? text.slice(a.start, a.end) : "",
             label: a.label
           }))
         }
@@ -6738,7 +6773,7 @@ function Annotate({
         title && /* @__PURE__ */ jsx("div", { style: headerStyle9, children: title }),
         /* @__PURE__ */ jsxs("div", { style: bodyStyle2, children: [
           /* @__PURE__ */ jsxs("div", { ref: textRef, role: "document", style: textPaneStyle, onMouseUp: handleMouseUp, children: [
-            segments.map((seg, i) => {
+            typeof text === "string" ? segments.map((seg, i) => {
               if (seg.annotation) {
                 const color3 = labelColorMap.get(seg.annotation.label) ?? "#888";
                 return /* @__PURE__ */ jsx(
@@ -6756,7 +6791,7 @@ function Annotate({
                 );
               }
               return /* @__PURE__ */ jsx("span", { children: seg.text }, i);
-            }),
+            }) : /* @__PURE__ */ jsx(RichText, { content: text }),
             pickerPos && /* @__PURE__ */ jsx(
               "div",
               {
@@ -6795,12 +6830,13 @@ function Annotate({
             /* @__PURE__ */ jsxs("div", { role: "list", children: [
               annotations.map((ann, i) => {
                 const color3 = labelColorMap.get(ann.label) ?? "#888";
+                const annotatedText = typeof text === "string" ? text.slice(ann.start, ann.end) : "";
                 return /* @__PURE__ */ jsxs("div", { role: "listitem", style: annotationItemStyle(color3), children: [
                   /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsx("span", { style: colorDotStyle(color3) }),
                     /* @__PURE__ */ jsx("strong", { style: { fontSize: "0.75rem" }, children: ann.label })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { style: annotationTextStyle, children: text.slice(ann.start, ann.end) }),
+                  /* @__PURE__ */ jsx("div", { style: annotationTextStyle, children: annotatedText }),
                   ann.note && /* @__PURE__ */ jsx("div", { style: annotationNoteStyle, children: ann.note })
                 ] }, i);
               }),