@safe-ugc-ui/react 0.6.0 → 1.1.0

package/dist/index.js

@@ -1,7 +1,10 @@
 // src/UGCRenderer.tsx
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 import { validate, validateRaw } from "@safe-ugc-ui/validator";
-import { COMPACT_BREAKPOINT_MAX_WIDTH } from "@safe-ugc-ui/types";
+import {
+  COMPACT_BREAKPOINT_MAX_WIDTH,
+  MEDIUM_BREAKPOINT_MAX_WIDTH
+} from "@safe-ugc-ui/types";
 
 // src/UGCContainer.tsx
 import { forwardRef } from "react";
@@ -29,7 +32,9 @@ import {
 } from "@safe-ugc-ui/types";
 
 // src/state-resolver.ts
-import { PROTOTYPE_POLLUTION_SEGMENTS } from "@safe-ugc-ui/types";
+import {
+  PROTOTYPE_POLLUTION_SEGMENTS
+} from "@safe-ugc-ui/types";
 function parseRefSegments(path) {
   const segments = [];
   const dotParts = path.split(".");
@@ -89,6 +94,111 @@ function resolveValue(value, state, locals) {
   }
   return value;
 }
+function stringifyTextScalar(value) {
+  if (value === void 0) return "";
+  if (value === null) return "null";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return "";
+}
+function isTemplateObject(value) {
+  return typeof value === "object" && value !== null && "$template" in value && Array.isArray(value.$template);
+}
+function resolveTemplate(value, state, locals) {
+  if (!isTemplateObject(value)) {
+    return void 0;
+  }
+  return value.$template.map((part) => stringifyTextScalar(resolveValue(part, state, locals))).join("");
+}
+function resolveTextValue(value, state, locals) {
+  const template = resolveTemplate(value, state, locals);
+  if (template !== void 0) {
+    return template;
+  }
+  return stringifyTextScalar(resolveValue(value, state, locals));
+}
+
+// src/condition-resolver.ts
+import { MAX_CONDITION_DEPTH, isRef } from "@safe-ugc-ui/types";
+function resolveOperand(operand, state, locals) {
+  if (isRef(operand)) {
+    const resolved = resolveRef(operand.$ref, state, locals);
+    if (resolved === null || typeof resolved === "string" || typeof resolved === "number" || typeof resolved === "boolean") {
+      return resolved;
+    }
+    return void 0;
+  }
+  return operand;
+}
+function compareValues(op, left, right) {
+  if (left === void 0 || right === void 0) {
+    return false;
+  }
+  if (op === "eq") return left === right;
+  if (op === "ne") return left !== right;
+  if (left === null || right === null) {
+    return false;
+  }
+  if (typeof left !== typeof right) {
+    return false;
+  }
+  if (typeof left !== "number" && typeof left !== "string" || typeof right !== "number" && typeof right !== "string") {
+    return false;
+  }
+  switch (op) {
+    case "gt":
+      return left > right;
+    case "gte":
+      return left >= right;
+    case "lt":
+      return left < right;
+    case "lte":
+      return left <= right;
+    default:
+      return false;
+  }
+}
+function evaluateCondition(condition, state, locals, depth = 1) {
+  if (depth > MAX_CONDITION_DEPTH) {
+    return false;
+  }
+  if (typeof condition === "boolean") {
+    return condition;
+  }
+  if (isRef(condition)) {
+    return resolveRef(condition.$ref, state, locals) === true;
+  }
+  if (typeof condition !== "object" || condition === null || Array.isArray(condition)) {
+    return false;
+  }
+  const conditionObj = condition;
+  switch (conditionObj.op) {
+    case "not":
+      return !evaluateCondition(conditionObj.value, state, locals, depth + 1);
+    case "and":
+      return Array.isArray(conditionObj.values) && conditionObj.values.every(
+        (value) => evaluateCondition(value, state, locals, depth + 1)
+      );
+    case "or":
+      return Array.isArray(conditionObj.values) && conditionObj.values.some(
+        (value) => evaluateCondition(value, state, locals, depth + 1)
+      );
+    case "eq":
+    case "ne":
+    case "gt":
+    case "gte":
+    case "lt":
+    case "lte":
+      return compareValues(
+        conditionObj.op,
+        resolveOperand(conditionObj.left, state, locals),
+        resolveOperand(conditionObj.right, state, locals)
+      );
+    default:
+      return false;
+  }
+}
 
 // src/style-mapper.ts
 import { ALLOWED_TRANSITION_PROPERTIES } from "@safe-ugc-ui/types";
@@ -103,6 +213,7 @@ var DIRECT_MAP_PROPS = [
   "gap",
   "width",
   "height",
+  "aspectRatio",
   "minWidth",
   "maxWidth",
   "minHeight",
@@ -159,6 +270,19 @@ function containsForbiddenCssFunction(value) {
   const lower = value.toLowerCase();
   return FORBIDDEN_CSS_FUNCTIONS_LOWER.some((fn) => lower.includes(fn));
 }
+function isValidAspectRatio(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0;
+  }
+  if (typeof value !== "string" || containsForbiddenCssFunction(value)) {
+    return false;
+  }
+  const match = value.match(/^\s*([0-9]+(?:\.[0-9]+)?)\s*\/\s*([0-9]+(?:\.[0-9]+)?)\s*$/);
+  if (!match) {
+    return false;
+  }
+  return Number(match[1]) > 0 && Number(match[2]) > 0;
+}
 function resolveStyleValue(value, state, locals) {
   return resolveValue(value, state, locals);
 }
@@ -179,6 +303,19 @@ function resolveStructuredString(value, state, locals) {
   }
   return resolved;
 }
+function resolveStructuredLength(value, state, locals) {
+  const resolved = resolveStyleValue(value, state, locals);
+  if (typeof resolved === "number") {
+    return resolved;
+  }
+  if (typeof resolved === "string" && !containsForbiddenCssFunction(resolved)) {
+    return resolved;
+  }
+  return void 0;
+}
+function toCssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
 function transformToCss(transform) {
   const parts = [];
   if (transform.rotate !== void 0) {
@@ -347,6 +484,62 @@ function resolveBorderObject(border, state, locals) {
   if (color !== void 0) resolved.color = color;
   return resolved;
 }
+function clipPathToCss(clipPath) {
+  switch (clipPath.type) {
+    case "circle":
+      return `circle(${toCssLength(clipPath.radius)})`;
+    case "ellipse":
+      return `ellipse(${toCssLength(clipPath.rx)} ${toCssLength(clipPath.ry)})`;
+    case "inset": {
+      const base = [
+        toCssLength(clipPath.top),
+        toCssLength(clipPath.right),
+        toCssLength(clipPath.bottom),
+        toCssLength(clipPath.left)
+      ].join(" ");
+      const round = clipPath.round;
+      return round !== void 0 ? `inset(${base} round ${toCssLength(round)})` : `inset(${base})`;
+    }
+    default:
+      return "";
+  }
+}
+function resolveClipPathObject(clipPath, state, locals) {
+  if (!isRecord(clipPath) || typeof clipPath.type !== "string") {
+    return void 0;
+  }
+  switch (clipPath.type) {
+    case "circle": {
+      const radius = resolveStructuredLength(clipPath.radius, state, locals);
+      return radius !== void 0 ? { type: "circle", radius } : void 0;
+    }
+    case "ellipse": {
+      const rx = resolveStructuredLength(clipPath.rx, state, locals);
+      const ry = resolveStructuredLength(clipPath.ry, state, locals);
+      return rx !== void 0 && ry !== void 0 ? { type: "ellipse", rx, ry } : void 0;
+    }
+    case "inset": {
+      const top = resolveStructuredLength(clipPath.top, state, locals);
+      const right = resolveStructuredLength(clipPath.right, state, locals);
+      const bottom = resolveStructuredLength(clipPath.bottom, state, locals);
+      const left = resolveStructuredLength(clipPath.left, state, locals);
+      const round = resolveStructuredLength(clipPath.round, state, locals);
+      if (top === void 0 || right === void 0 || bottom === void 0 || left === void 0) {
+        return void 0;
+      }
+      return {
+        type: "inset",
+        top,
+        right,
+        bottom,
+        left,
+        ...round !== void 0 ? { round } : {}
+      };
+    }
+    default:
+      return void 0;
+  }
+}
 var FLEX_ALIGNMENT_MAP = {
   start: "flex-start",
   end: "flex-end"
@@ -369,6 +562,9 @@ function mapStyle(style, state, locals) {
         if (typeof resolved === "string" && containsForbiddenCssFunction(resolved)) {
           continue;
         }
+        if (prop === "aspectRatio" && !isValidAspectRatio(resolved)) {
+          continue;
+        }
         css[prop] = resolved;
       }
     }
@@ -421,6 +617,17 @@ function mapStyle(style, state, locals) {
       css.transition = transitionCss;
     }
   }
+  const resolvedBackdropBlur = resolveStructuredNumber(style.backdropBlur, state, locals);
+  if (resolvedBackdropBlur !== void 0 && Number.isFinite(resolvedBackdropBlur) && resolvedBackdropBlur >= 0) {
+    css.backdropFilter = `blur(${resolvedBackdropBlur}px)`;
+  }
+  const resolvedClipPath = resolveClipPathObject(style.clipPath, state, locals);
+  if (resolvedClipPath) {
+    const clipPathCss = clipPathToCss(resolvedClipPath);
+    if (clipPathCss) {
+      css.clipPath = clipPathCss;
+    }
+  }
   return css;
 }
 var CSS_PROPERTY_NAME_MAP = {
@@ -520,9 +727,40 @@ function Column({ style, hoverStyle, children }) {
 
 // src/components/Text.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-function Text({ content, style, hoverStyle }) {
+function getClampStyle(maxLines, truncate) {
+  if (!maxLines || maxLines < 1) {
+    return void 0;
+  }
+  if (maxLines === 1) {
+    return {
+      display: "inline-block",
+      maxWidth: "100%",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: truncate ?? "ellipsis"
+    };
+  }
+  return {
+    display: "-webkit-box",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: truncate ?? "ellipsis",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: maxLines
+  };
+}
+function Text({
+  content,
+  spans,
+  maxLines,
+  truncate,
+  style,
+  hoverStyle
+}) {
   const { style: resolvedStyle, onMouseEnter, onMouseLeave } = useHoverStyle(style, hoverStyle);
-  return /* @__PURE__ */ jsx5("span", { style: resolvedStyle, onMouseEnter, onMouseLeave, children: content });
+  const clampStyle = getClampStyle(maxLines, truncate);
+  const mergedStyle = clampStyle ? { ...resolvedStyle, ...clampStyle } : resolvedStyle;
+  return /* @__PURE__ */ jsx5("span", { style: mergedStyle, onMouseEnter, onMouseLeave, children: spans?.map((span, index) => /* @__PURE__ */ jsx5("span", { style: span.style, children: span.text }, index)) ?? content ?? "" });
 }
 
 // src/components/Image.tsx
@@ -755,13 +993,279 @@ function Toggle({ value, onToggle, onAction, disabled, style, hoverStyle }) {
   );
 }
 
+// src/components/Accordion.tsx
+import { useId, useState as useState2 } from "react";
+import { jsx as jsx18, jsxs } from "react/jsx-runtime";
+function getInitialExpandedIds(items, defaultExpanded, allowMultiple) {
+  const enabledIds = new Set(
+    items.filter((item) => item.disabled !== true).map((item) => item.id)
+  );
+  const initial = (defaultExpanded ?? []).filter((id) => enabledIds.has(id));
+  return allowMultiple ? initial : initial.slice(0, 1);
+}
+function Accordion({
+  items,
+  allowMultiple = false,
+  defaultExpanded,
+  style,
+  hoverStyle
+}) {
+  const { style: resolvedStyle, onMouseEnter, onMouseLeave } = useHoverStyle(style, hoverStyle);
+  const [expandedIds, setExpandedIds] = useState2(
+    () => getInitialExpandedIds(items, defaultExpanded, allowMultiple)
+  );
+  const baseId = useId();
+  const expandedSet = new Set(expandedIds);
+  const toggleItem = (itemId, disabled) => {
+    if (disabled) {
+      return;
+    }
+    setExpandedIds((current) => {
+      const currentSet = new Set(current);
+      if (allowMultiple) {
+        if (currentSet.has(itemId)) {
+          currentSet.delete(itemId);
+        } else {
+          currentSet.add(itemId);
+        }
+        return [...currentSet];
+      }
+      return currentSet.has(itemId) ? [] : [itemId];
+    });
+  };
+  return /* @__PURE__ */ jsx18("div", { style: resolvedStyle, onMouseEnter, onMouseLeave, children: items.map((item) => {
+    const expanded = expandedSet.has(item.id);
+    const buttonId = `${baseId}-${item.id}-button`;
+    const panelId = `${baseId}-${item.id}-panel`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(148, 163, 184, 0.25)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: buttonId,
+              type: "button",
+              "aria-expanded": expanded,
+              "aria-controls": panelId,
+              disabled: item.disabled,
+              onClick: () => toggleItem(item.id, item.disabled),
+              style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 0",
+                background: "transparent",
+                border: "none",
+                color: "inherit",
+                textAlign: "left",
+                cursor: item.disabled ? "default" : "pointer",
+                opacity: item.disabled ? 0.5 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx18("span", { children: item.label }),
+                /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: expanded ? "-" : "+" })
+              ]
+            }
+          ),
+          expanded ? /* @__PURE__ */ jsx18(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": buttonId,
+              style: { paddingBottom: 12 },
+              children: item.content
+            }
+          ) : null
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/components/Tabs.tsx
+import {
+  useEffect,
+  useId as useId2,
+  useRef,
+  useState as useState3
+} from "react";
+import { jsx as jsx19, jsxs as jsxs2 } from "react/jsx-runtime";
+function getEnabledTabIds(tabs) {
+  return tabs.filter((tab) => tab.disabled !== true).map((tab) => tab.id);
+}
+function getInitialSelectedTab(tabs, defaultTab) {
+  const enabledIds = getEnabledTabIds(tabs);
+  if (enabledIds.length === 0) {
+    return void 0;
+  }
+  if (defaultTab && enabledIds.includes(defaultTab)) {
+    return defaultTab;
+  }
+  return enabledIds[0];
+}
+function getNextEnabledIndex(tabs, startIndex, direction) {
+  for (let offset = 1; offset <= tabs.length; offset++) {
+    const nextIndex = (startIndex + direction * offset + tabs.length) % tabs.length;
+    if (tabs[nextIndex]?.disabled !== true) {
+      return nextIndex;
+    }
+  }
+  return startIndex;
+}
+function focusTab(buttonRefs, index) {
+  buttonRefs.current[index]?.focus();
+}
+function Tabs({
+  tabs,
+  defaultTab,
+  style,
+  hoverStyle
+}) {
+  const { style: resolvedStyle, onMouseEnter, onMouseLeave } = useHoverStyle(style, hoverStyle);
+  const [selectedTab, setSelectedTab] = useState3(
+    () => getInitialSelectedTab(tabs, defaultTab)
+  );
+  const baseId = useId2();
+  const buttonRefs = useRef([]);
+  useEffect(() => {
+    setSelectedTab((current) => {
+      const enabledIds = getEnabledTabIds(tabs);
+      if (enabledIds.length === 0) {
+        return void 0;
+      }
+      if (current && enabledIds.includes(current)) {
+        return current;
+      }
+      if (defaultTab && enabledIds.includes(defaultTab)) {
+        return defaultTab;
+      }
+      return enabledIds[0];
+    });
+  }, [tabs, defaultTab]);
+  const selectedItem = tabs.find((tab) => tab.id === selectedTab && tab.disabled !== true) ?? tabs.find((tab) => tab.disabled !== true);
+  const activateTab = (index, focus = false) => {
+    const tab = tabs[index];
+    if (!tab || tab.disabled) {
+      return;
+    }
+    setSelectedTab(tab.id);
+    if (focus) {
+      focusTab(buttonRefs, index);
+    }
+  };
+  const onTabKeyDown = (event, index) => {
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        event.preventDefault();
+        activateTab(getNextEnabledIndex(tabs, index, 1), true);
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        event.preventDefault();
+        activateTab(getNextEnabledIndex(tabs, index, -1), true);
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        const firstEnabledIndex = tabs.findIndex((tab) => tab.disabled !== true);
+        if (firstEnabledIndex >= 0) {
+          activateTab(firstEnabledIndex, true);
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const lastEnabledIndex = [...tabs].map((tab, currentIndex) => ({ tab, currentIndex })).reverse().find(({ tab }) => tab.disabled !== true);
+        if (lastEnabledIndex) {
+          activateTab(lastEnabledIndex.currentIndex, true);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: resolvedStyle, onMouseEnter, onMouseLeave, children: [
+    /* @__PURE__ */ jsx19(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        style: {
+          display: "flex",
+          gap: 8,
+          borderBottom: "1px solid rgba(148, 163, 184, 0.25)",
+          paddingBottom: 8
+        },
+        children: tabs.map((tab, index) => {
+          const selected = selectedItem?.id === tab.id;
+          const tabId = `${baseId}-${tab.id}-tab`;
+          const panelId = `${baseId}-${tab.id}-panel`;
+          return /* @__PURE__ */ jsx19(
+            "button",
+            {
+              ref: (element) => {
+                buttonRefs.current[index] = element;
+              },
+              id: tabId,
+              type: "button",
+              role: "tab",
+              "aria-selected": selected,
+              "aria-controls": panelId,
+              disabled: tab.disabled,
+              tabIndex: selected ? 0 : -1,
+              onClick: () => activateTab(index),
+              onKeyDown: (event) => onTabKeyDown(event, index),
+              style: {
+                padding: "8px 12px",
+                borderRadius: 8,
+                border: "none",
+                background: selected ? "rgba(148, 163, 184, 0.16)" : "transparent",
+                color: "inherit",
+                cursor: tab.disabled ? "default" : "pointer",
+                opacity: tab.disabled ? 0.5 : 1,
+                fontWeight: selected ? 600 : 400
+              },
+              children: tab.label
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    selectedItem ? /* @__PURE__ */ jsx19(
+      "div",
+      {
+        id: `${baseId}-${selectedItem.id}-panel`,
+        role: "tabpanel",
+        "aria-labelledby": `${baseId}-${selectedItem.id}-tab`,
+        style: { paddingTop: 12 },
+        children: selectedItem.content
+      }
+    ) : null
+  ] });
+}
+
 // src/node-renderer.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function isForLoop(obj) {
   if (obj == null || typeof obj !== "object" || Array.isArray(obj)) return false;
   const o = obj;
   return typeof o.for === "string" && typeof o.in === "string" && o.template != null;
 }
+function isFragmentUse(obj) {
+  if (obj == null || typeof obj !== "object" || Array.isArray(obj)) return false;
+  return typeof obj.$use === "string";
+}
 function utf8ByteLength(str) {
   let bytes = 0;
   for (let i = 0; i < str.length; i++) {
@@ -814,50 +1318,159 @@ function mergeStyleWithCardStyles(nodeStyle, cardStyles) {
     hoverStyle: mergedHoverStyle
   };
 }
-function getCompactResponsiveStyle(nodeResponsive) {
+function getResponsiveOverrideStyle(nodeResponsive, mode) {
   if (!nodeResponsive) return void 0;
-  const compact = nodeResponsive.compact;
-  if (compact == null || typeof compact !== "object" || Array.isArray(compact)) {
+  const override = nodeResponsive[mode];
+  if (override == null || typeof override !== "object" || Array.isArray(override)) {
     return void 0;
   }
-  return compact;
+  return override;
 }
 function mergeEffectiveNodeStyle(node, ctx) {
   const baseStyle = mergeStyleWithCardStyles(node.style, ctx.cardStyles);
-  if (!ctx.responsive.compact) {
-    return baseStyle;
-  }
+  const mediumOverride = mergeNamedStyle(
+    getResponsiveOverrideStyle(node.responsive, "medium"),
+    ctx.cardStyles
+  );
   const compactOverride = mergeNamedStyle(
-    getCompactResponsiveStyle(node.responsive),
+    getResponsiveOverrideStyle(node.responsive, "compact"),
     ctx.cardStyles
   );
-  if (!compactOverride) {
-    return baseStyle;
-  }
   const {
-    hoverStyle: _hoverStyle,
-    transition: _transition,
+    hoverStyle: _mediumHoverStyle,
+    transition: _mediumTransition,
+    ...mediumStyleWithoutInteractiveFields
+  } = mediumOverride ?? {};
+  const {
+    hoverStyle: _compactHoverStyle,
+    transition: _compactTransition,
     ...compactStyleWithoutInteractiveFields
-  } = compactOverride;
+  } = compactOverride ?? {};
   return {
     ...baseStyle ?? {},
-    ...compactStyleWithoutInteractiveFields
+    ...ctx.responsive.medium ? mediumStyleWithoutInteractiveFields : {},
+    ...ctx.responsive.compact ? compactStyleWithoutInteractiveFields : {}
   };
 }
+function resolveTextPayload(node, ctx) {
+  const rawSpans = Array.isArray(node.spans) ? node.spans : void 0;
+  if (rawSpans) {
+    const spans = rawSpans.map((span) => {
+      const rawSpan = span;
+      const spanStyle = rawSpan.style != null && typeof rawSpan.style === "object" && !Array.isArray(rawSpan.style) ? rawSpan.style : void 0;
+      return {
+        text: resolveTextValue(rawSpan.text, ctx.state, ctx.locals),
+        style: spanStyle ? mapStyle(spanStyle, ctx.state, ctx.locals) : void 0,
+        rawStyleBytes: spanStyle ? utf8ByteLength(JSON.stringify(spanStyle)) : 0
+      };
+    });
+    const combinedText = spans.map((span) => span.text).join("");
+    return {
+      spans: spans.map(({ rawStyleBytes: _rawStyleBytes, ...span }) => span),
+      textBytes: utf8ByteLength(combinedText),
+      styleBytes: spans.reduce((sum, span) => sum + span.rawStyleBytes, 0)
+    };
+  }
+  const content = resolveTextValue(node.content, ctx.state, ctx.locals);
+  return {
+    content,
+    textBytes: utf8ByteLength(content),
+    styleBytes: 0
+  };
+}
+function resolveAccordionItems(node, ctx, key) {
+  const rawItems = Array.isArray(node.items) ? node.items : [];
+  return rawItems.flatMap((item, index) => {
+    if (item == null || typeof item !== "object" || Array.isArray(item)) {
+      return [];
+    }
+    const rawItem = item;
+    const id = typeof rawItem.id === "string" ? rawItem.id : `item-${index}`;
+    const label = resolveTextValue(rawItem.label, ctx.state, ctx.locals);
+    const resolvedDisabled = resolveValue(rawItem.disabled, ctx.state, ctx.locals);
+    const disabled = typeof resolvedDisabled === "boolean" ? resolvedDisabled : void 0;
+    const content = renderNode(
+      rawItem.content,
+      ctx,
+      `${String(key)}.items[${index}].content`
+    );
+    return [{ id, label, content, disabled }];
+  });
+}
+function resolveTabsItems(node, ctx, key) {
+  const rawTabs = Array.isArray(node.tabs) ? node.tabs : [];
+  return rawTabs.flatMap((tab, index) => {
+    if (tab == null || typeof tab !== "object" || Array.isArray(tab)) {
+      return [];
+    }
+    const rawTab = tab;
+    const id = typeof rawTab.id === "string" ? rawTab.id : `tab-${index}`;
+    const label = resolveTextValue(rawTab.label, ctx.state, ctx.locals);
+    const resolvedDisabled = resolveValue(rawTab.disabled, ctx.state, ctx.locals);
+    const disabled = typeof resolvedDisabled === "boolean" ? resolvedDisabled : void 0;
+    const content = renderNode(
+      rawTab.content,
+      ctx,
+      `${String(key)}.tabs[${index}].content`
+    );
+    return [{ id, label, content, disabled }];
+  });
+}
 function renderNode(node, ctx, key) {
   if (node == null || typeof node !== "object") return null;
+  if (isFragmentUse(node)) {
+    if ("$if" in node && !evaluateCondition(node.$if, ctx.state, ctx.locals)) {
+      return null;
+    }
+    if ((ctx.fragmentStack?.length ?? 0) > 0) {
+      ctx.onError?.([{
+        code: "RUNTIME_FRAGMENT_NESTED_USE",
+        message: 'Fragments may not contain nested "$use" references',
+        path: String(key)
+      }]);
+      return null;
+    }
+    if (ctx.fragmentStack?.includes(node.$use)) {
+      ctx.onError?.([{
+        code: "RUNTIME_FRAGMENT_CYCLE",
+        message: `Fragment "${node.$use}" recursively references itself`,
+        path: String(key)
+      }]);
+      return null;
+    }
+    const fragment = ctx.fragments?.[node.$use];
+    if (fragment == null) {
+      ctx.onError?.([{
+        code: "RUNTIME_FRAGMENT_NOT_FOUND",
+        message: `Fragment "${node.$use}" was not found`,
+        path: String(key)
+      }]);
+      return null;
+    }
+    return renderNode(
+      fragment,
+      {
+        ...ctx,
+        fragmentStack: [...ctx.fragmentStack ?? [], node.$use]
+      },
+      key
+    );
+  }
   const n = node;
   if (!n.type) return null;
+  if ("$if" in n && !evaluateCondition(n.$if, ctx.state, ctx.locals)) {
+    return null;
+  }
   const mergedRawStyle = mergeEffectiveNodeStyle(n, ctx);
   const rv = (val) => resolveValue(val, ctx.state, ctx.locals);
-  const styleDelta = mergedRawStyle ? utf8ByteLength(JSON.stringify(mergedRawStyle)) : 0;
+  let styleDelta = mergedRawStyle ? utf8ByteLength(JSON.stringify(mergedRawStyle)) : 0;
   const overflowDelta = mergedRawStyle?.overflow === "auto" ? 1 : 0;
-  let resolvedTextContent;
+  let resolvedTextPayload;
   let textDelta = 0;
   if (n.type === "Text") {
-    const raw = rv(n.content);
-    resolvedTextContent = typeof raw === "string" ? raw : "";
-    textDelta = utf8ByteLength(resolvedTextContent);
+    resolvedTextPayload = resolveTextPayload(n, ctx);
+    textDelta = resolvedTextPayload.textBytes;
+    styleDelta += resolvedTextPayload.styleBytes;
   }
   if (ctx.limits.nodeCount + 1 > MAX_NODE_COUNT) {
     ctx.onError?.([{ code: "RUNTIME_NODE_LIMIT", message: `Node count exceeds maximum of ${MAX_NODE_COUNT}`, path: String(key) }]);
@@ -885,17 +1498,31 @@ function renderNode(node, ctx, key) {
   const childElements = renderChildren(n.children, ctx);
   switch (n.type) {
     case "Box":
-      return /* @__PURE__ */ jsx18(Box, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
+      return /* @__PURE__ */ jsx20(Box, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
     case "Row":
-      return /* @__PURE__ */ jsx18(Row, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
+      return /* @__PURE__ */ jsx20(Row, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
     case "Column":
-      return /* @__PURE__ */ jsx18(Column, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
+      return /* @__PURE__ */ jsx20(Column, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
     case "Stack":
-      return /* @__PURE__ */ jsx18(Stack, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
+      return /* @__PURE__ */ jsx20(Stack, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
     case "Grid":
-      return /* @__PURE__ */ jsx18(Grid, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
-    case "Text":
-      return /* @__PURE__ */ jsx18(Text, { content: resolvedTextContent, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Grid, { style: cssStyle, hoverStyle: cssHoverStyle, children: childElements }, key);
+    case "Text": {
+      const maxLines = typeof n.maxLines === "number" ? n.maxLines : void 0;
+      const truncate = n.truncate === "clip" || n.truncate === "ellipsis" ? n.truncate : void 0;
+      return /* @__PURE__ */ jsx20(
+        Text,
+        {
+          content: resolvedTextPayload?.content,
+          spans: resolvedTextPayload?.spans,
+          maxLines,
+          truncate,
+          style: cssStyle,
+          hoverStyle: cssHoverStyle
+        },
+        key
+      );
+    }
     case "Image": {
       let src = rv(n.src);
       if (typeof src !== "string" || !src) return null;
@@ -906,7 +1533,7 @@ function renderNode(node, ctx, key) {
       if (typeof resolved === "string" && resolved.trim().toLowerCase().startsWith("javascript:")) return null;
       const resolvedAlt = rv(n.alt);
       const alt = typeof resolvedAlt === "string" ? resolvedAlt : void 0;
-      return /* @__PURE__ */ jsx18(Image, { src: resolved, alt, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Image, { src: resolved, alt, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Avatar": {
       let src = rv(n.src);
@@ -918,7 +1545,7 @@ function renderNode(node, ctx, key) {
       if (typeof resolved === "string" && resolved.trim().toLowerCase().startsWith("javascript:")) return null;
       const resolvedSize = rv(n.size);
       const size = typeof resolvedSize === "number" || typeof resolvedSize === "string" ? resolvedSize : void 0;
-      return /* @__PURE__ */ jsx18(Avatar, { src: resolved, size, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Avatar, { src: resolved, size, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Icon": {
       const resolvedName = rv(n.name);
@@ -927,7 +1554,7 @@ function renderNode(node, ctx, key) {
       const size = typeof resolvedSize === "number" || typeof resolvedSize === "string" ? resolvedSize : void 0;
       const resolvedColor = rv(n.color);
       const color = typeof resolvedColor === "string" ? resolvedColor : void 0;
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx20(
         Icon,
         {
           name,
@@ -943,14 +1570,14 @@ function renderNode(node, ctx, key) {
     case "Spacer": {
       const resolvedSize = rv(n.size);
       const size = typeof resolvedSize === "number" || typeof resolvedSize === "string" ? resolvedSize : void 0;
-      return /* @__PURE__ */ jsx18(Spacer, { size, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Spacer, { size, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Divider": {
       const resolvedColor = rv(n.color);
       const color = typeof resolvedColor === "string" ? resolvedColor : void 0;
       const resolvedThickness = rv(n.thickness);
       const thickness = typeof resolvedThickness === "number" || typeof resolvedThickness === "string" ? resolvedThickness : void 0;
-      return /* @__PURE__ */ jsx18(Divider, { color, thickness, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Divider, { color, thickness, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "ProgressBar": {
       const resolvedValue = rv(n.value);
@@ -959,33 +1586,33 @@ function renderNode(node, ctx, key) {
       const max = typeof resolvedMax === "number" ? resolvedMax : 100;
       const resolvedColor = rv(n.color);
       const color = typeof resolvedColor === "string" ? resolvedColor : void 0;
-      return /* @__PURE__ */ jsx18(ProgressBar, { value, max, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(ProgressBar, { value, max, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Badge": {
-      const resolvedLabel = rv(n.label);
-      const label = typeof resolvedLabel === "string" ? resolvedLabel : "";
+      const label = resolveTextValue(n.label, ctx.state, ctx.locals);
       const resolvedColor = rv(n.color);
       const color = typeof resolvedColor === "string" ? resolvedColor : void 0;
-      return /* @__PURE__ */ jsx18(Badge, { label, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Badge, { label, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Chip": {
-      const resolvedLabel = rv(n.label);
-      const label = typeof resolvedLabel === "string" ? resolvedLabel : "";
+      const label = resolveTextValue(n.label, ctx.state, ctx.locals);
       const resolvedColor = rv(n.color);
       const color = typeof resolvedColor === "string" ? resolvedColor : void 0;
-      return /* @__PURE__ */ jsx18(Chip, { label, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
+      return /* @__PURE__ */ jsx20(Chip, { label, color, style: cssStyle, hoverStyle: cssHoverStyle }, key);
     }
     case "Button": {
-      const resolvedLabel = rv(n.label);
-      const label = typeof resolvedLabel === "string" ? resolvedLabel : "";
+      const label = resolveTextValue(n.label, ctx.state, ctx.locals);
       const actionVal = n.action;
       const action = typeof actionVal === "string" ? actionVal : "";
-      return /* @__PURE__ */ jsx18(
+      const resolvedDisabled = rv(n.disabled);
+      const disabled = typeof resolvedDisabled === "boolean" ? resolvedDisabled : void 0;
+      return /* @__PURE__ */ jsx20(
         Button,
         {
           label,
           action,
           onAction: ctx.onAction,
+          disabled,
           style: cssStyle,
           hoverStyle: cssHoverStyle
         },
@@ -997,12 +1624,47 @@ function renderNode(node, ctx, key) {
       const value = typeof resolvedValue === "boolean" ? resolvedValue : false;
       const onToggleVal = n.onToggle;
       const onToggle = typeof onToggleVal === "string" ? onToggleVal : "";
-      return /* @__PURE__ */ jsx18(
+      const resolvedDisabled = rv(n.disabled);
+      const disabled = typeof resolvedDisabled === "boolean" ? resolvedDisabled : void 0;
+      return /* @__PURE__ */ jsx20(
         Toggle,
         {
           value,
           onToggle,
           onAction: ctx.onAction,
+          disabled,
+          style: cssStyle,
+          hoverStyle: cssHoverStyle
+        },
+        key
+      );
+    }
+    case "Accordion": {
+      const items = resolveAccordionItems(n, ctx, key);
+      const allowMultiple = n.allowMultiple === true;
+      const defaultExpanded = Array.isArray(n.defaultExpanded) ? n.defaultExpanded.filter(
+        (value) => typeof value === "string"
+      ) : void 0;
+      return /* @__PURE__ */ jsx20(
+        Accordion,
+        {
+          items,
+          allowMultiple,
+          defaultExpanded,
+          style: cssStyle,
+          hoverStyle: cssHoverStyle
+        },
+        key
+      );
+    }
+    case "Tabs": {
+      const tabs = resolveTabsItems(n, ctx, key);
+      const defaultTab = typeof n.defaultTab === "string" ? n.defaultTab : void 0;
+      return /* @__PURE__ */ jsx20(
+        Tabs,
+        {
+          tabs,
+          defaultTab,
           style: cssStyle,
           hoverStyle: cssHoverStyle
         },
@@ -1050,7 +1712,7 @@ function renderForLoop(loop, ctx) {
   }
   return elements;
 }
-function renderTree(rootNode, state, assets, cardStyles, iconResolver, onAction, onError, responsive = { compact: false }) {
+function renderTree(rootNode, state, assets, cardStyles, iconResolver, onAction, onError, responsive = { compact: false, medium: false }, fragments) {
   const limits = {
     nodeCount: 0,
     textBytes: 0,
@@ -1061,17 +1723,22 @@ function renderTree(rootNode, state, assets, cardStyles, iconResolver, onAction,
     state,
     assets,
     cardStyles,
+    fragments,
+    fragmentStack: [],
     iconResolver,
     onAction,
     onError,
     limits,
-    responsive
+    responsive: {
+      compact: responsive.compact,
+      medium: responsive.medium ?? responsive.compact
+    }
   };
   return renderNode(rootNode, ctx, "root");
 }
 
 // src/UGCRenderer.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function UGCRenderer({
   card,
   viewName,
@@ -1082,8 +1749,8 @@ function UGCRenderer({
   iconResolver,
   onAction
 }) {
-  const [containerElement, setContainerElement] = useState2(null);
-  const [containerWidth, setContainerWidth] = useState2(
+  const [containerElement, setContainerElement] = useState4(null);
+  const [containerWidth, setContainerWidth] = useState4(
     typeof window === "undefined" ? null : window.innerWidth
   );
   const result = useMemo2(() => {
@@ -1103,14 +1770,16 @@ function UGCRenderer({
       ...stateOverride ?? {}
     };
     const cardStyles = cardObj.styles;
+    const fragments = cardObj.fragments;
     return {
       valid: true,
       rootNode: views[selectedView],
       state: mergedState,
-      cardStyles
+      cardStyles,
+      fragments
     };
   }, [card, viewName, stateOverride]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!containerElement) {
       return;
     }
@@ -1136,6 +1805,7 @@ function UGCRenderer({
   }, [containerElement]);
   const responsive = useMemo2(
     () => ({
+      medium: containerWidth != null && containerWidth <= MEDIUM_BREAKPOINT_MAX_WIDTH,
       compact: containerWidth != null && containerWidth <= COMPACT_BREAKPOINT_MAX_WIDTH
     }),
     [containerWidth]
@@ -1146,7 +1816,7 @@ function UGCRenderer({
     }
     return null;
   }
-  return /* @__PURE__ */ jsx19(UGCContainer, { ref: setContainerElement, style: containerStyle2, children: renderTree(
+  return /* @__PURE__ */ jsx21(UGCContainer, { ref: setContainerElement, style: containerStyle2, children: renderTree(
     result.rootNode,
     result.state,
     assets,
@@ -1154,10 +1824,12 @@ function UGCRenderer({
     iconResolver,
     onAction,
     onError,
-    responsive
+    responsive,
+    result.fragments
   ) });
 }
 export {
+  Accordion,
   Avatar,
   Badge,
   Box,
@@ -1172,6 +1844,7 @@ export {
   Row,
   Spacer,
   Stack,
+  Tabs,
   Text,
   Toggle,
   UGCContainer,