@syntrologie/runtime-sdk 2.4.0-canary.21 → 2.4.0-canary.23

package/dist/config/schema.js

@@ -2,6 +2,7 @@ import {
   CanvasConfigResponseZ,
   CanvasElementConfigZ,
   CanvasThemeConfigZ,
+  ContentElementConfigZ,
   LauncherConfigZ,
   LauncherElementConfigZ,
   NotificationDeepLinkZ,
@@ -11,12 +12,13 @@ import {
   TileNotificationRuleZ,
   TileZ,
   configSchemas
-} from "../chunk-2UYZ5DWI.js";
+} from "../chunk-5SKKLUOS.js";
 import "../chunk-P5G4KT2U.js";
 export {
   CanvasConfigResponseZ,
   CanvasElementConfigZ,
   CanvasThemeConfigZ,
+  ContentElementConfigZ,
   LauncherConfigZ,
   LauncherElementConfigZ,
   NotificationDeepLinkZ,

package/dist/hooks/useShadowCanvasConfig.d.ts

@@ -10,6 +10,8 @@ export interface UseShadowCanvasConfigOptions {
     /** Current page URL — triggers re-filter when URL changes (route-based activation).
      *  Full URL (not just pathname) so hash-based routing also triggers re-filter. */
     pageUrl?: string;
+    /** Polling interval in milliseconds. Set to 0 or omit to disable polling. */
+    pollIntervalMs?: number;
 }
 export interface ShadowCanvasConfigState {
     tiles: TileConfig[];
@@ -26,4 +28,4 @@ export interface ShadowCanvasConfigState {
     /** Launcher button configuration */
     launcher?: LauncherConfig;
 }
-export declare function useShadowCanvasConfig({ fetcher, experiments, runtime, pageUrl, }: UseShadowCanvasConfigOptions): ShadowCanvasConfigState;
+export declare function useShadowCanvasConfig({ fetcher, experiments, runtime, pageUrl, pollIntervalMs, }: UseShadowCanvasConfigOptions): ShadowCanvasConfigState;

package/dist/index.js

@@ -100,7 +100,7 @@ import {
   validateAction,
   validateActions,
   widgetRegistry
-} from "./chunk-IPU3WVPY.js";
+} from "./chunk-FFIHKDHW.js";
 import {
   AddClassZ,
   AnchorIdZ,
@@ -134,8 +134,8 @@ import {
   WaitZ,
   WidgetConfigZ,
   coreActionStepSchemas
-} from "./chunk-HF3D7YFQ.js";
-import "./chunk-2UYZ5DWI.js";
+} from "./chunk-MCX3AKSH.js";
+import "./chunk-5SKKLUOS.js";
 import {
   ActivationConfigZ,
   AnchorVisibleConditionZ,
@@ -664,7 +664,7 @@ var baseStyles = {
     margin: "0 auto"
   },
   searchWrapper: {
-    marginBottom: "16px"
+    marginBottom: "8px"
   },
   searchInput: {
     width: "100%",
@@ -677,22 +677,22 @@ var baseStyles = {
   accordion: {
     display: "flex",
     flexDirection: "column",
-    gap: "8px"
+    gap: "var(--sc-content-item-gap, 6px)"
   },
   item: {
-    borderRadius: "8px",
+    borderRadius: "var(--sc-content-border-radius, 8px)",
     overflow: "hidden",
     transition: "box-shadow 0.15s ease"
   },
   question: {
     width: "100%",
-    padding: "16px 20px",
+    padding: "var(--sc-content-item-padding, 12px 16px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     border: "none",
     cursor: "pointer",
-    fontSize: "15px",
+    fontSize: "var(--sc-content-item-font-size, 15px)",
     fontWeight: 500,
     textAlign: "left",
     transition: "background-color 0.15s ease"
@@ -702,8 +702,8 @@ var baseStyles = {
     transition: "transform 0.2s ease"
   },
   answer: {
-    padding: "0 20px 16px 20px",
-    fontSize: "14px",
+    padding: "var(--sc-content-body-padding, 0 16px 12px 16px)",
+    fontSize: "var(--sc-content-body-font-size, 14px)",
     lineHeight: 1.6,
     overflow: "hidden",
     transition: "max-height 0.2s ease, padding 0.2s ease"
@@ -719,12 +719,12 @@ var baseStyles = {
     marginBottom: "8px"
   },
   categoryHeader: {
-    fontSize: "13px",
+    fontSize: "var(--sc-content-category-font-size, 12px)",
     fontWeight: 700,
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    padding: "12px 4px 6px 4px",
-    marginTop: "8px"
+    padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)",
+    marginTop: "var(--sc-content-category-gap, 4px)"
   },
   feedback: {
     display: "flex",
@@ -762,8 +762,8 @@ var baseStyles = {
 var themeStyles = {
   light: {
     container: {
-      backgroundColor: base.white,
-      color: slateGrey[1]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     searchInput: {
       backgroundColor: slateGrey[12],
@@ -771,21 +771,21 @@ var themeStyles = {
       color: slateGrey[1]
     },
     item: {
-      backgroundColor: slateGrey[12],
-      border: `1px solid ${slateGrey[11]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
     },
     question: {
       backgroundColor: "transparent",
-      color: slateGrey[1]
+      color: "var(--sc-content-text-color)"
     },
     questionHover: {
-      backgroundColor: slateGrey[12]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     answer: {
-      color: slateGrey[6]
+      color: "var(--sc-content-text-secondary-color)"
     },
     category: {
       backgroundColor: purple[8],
@@ -803,8 +803,8 @@ var themeStyles = {
   },
   dark: {
     container: {
-      backgroundColor: slateGrey[1],
-      color: slateGrey[12]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     searchInput: {
       backgroundColor: slateGrey[3],
@@ -812,21 +812,21 @@ var themeStyles = {
       color: slateGrey[12]
     },
     item: {
-      backgroundColor: slateGrey[3],
-      border: `1px solid ${slateGrey[5]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
-      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
     },
     question: {
       backgroundColor: "transparent",
-      color: slateGrey[12]
+      color: "var(--sc-content-text-color)"
     },
     questionHover: {
-      backgroundColor: slateGrey[5]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     answer: {
-      color: slateGrey[8]
+      color: "var(--sc-content-text-secondary-color)"
     },
     category: {
       backgroundColor: purple[0],
@@ -1212,18 +1212,17 @@ function escapeHtml(str) {
 }
 var baseStyles2 = {
   container: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    padding: "8px",
+    fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)",
     maxWidth: "100%",
     overflow: "hidden"
   },
   accordion: {
     display: "flex",
     flexDirection: "column",
-    gap: "4px"
+    gap: "var(--sc-content-item-gap, 6px)"
   },
   item: {
-    borderRadius: "8px",
+    borderRadius: "var(--sc-content-border-radius, 8px)",
     overflow: "hidden",
     transition: "box-shadow 0.2s ease"
   },
@@ -1232,20 +1231,21 @@ var baseStyles2 = {
     alignItems: "center",
     gap: "8px",
     width: "100%",
-    padding: "12px 16px",
+    padding: "var(--sc-content-item-padding, 12px 16px)",
     border: "none",
     cursor: "pointer",
-    fontSize: "14px",
+    fontSize: "var(--sc-content-item-font-size, 15px)",
     fontWeight: 500,
     fontFamily: "inherit",
     textAlign: "left",
     transition: "background-color 0.15s ease"
   },
   chevron: {
-    fontSize: "10px",
+    fontSize: "20px",
     transition: "transform 0.2s ease",
     marginLeft: "auto",
-    flexShrink: 0
+    flexShrink: 0,
+    color: "var(--sc-content-chevron-color, currentColor)"
   },
   icon: {
     fontSize: "16px",
@@ -1254,10 +1254,10 @@ var baseStyles2 = {
   body: {
     overflow: "hidden",
     transition: "max-height 0.25s ease, padding-bottom 0.25s ease",
-    padding: "0 16px"
+    padding: "var(--sc-content-body-padding, 0 16px 12px 16px)"
   },
   description: {
-    fontSize: "13px",
+    fontSize: "var(--sc-content-body-font-size, 14px)",
     lineHeight: "1.5",
     margin: 0
   },
@@ -1276,11 +1276,11 @@ var baseStyles2 = {
     transition: "background-color 0.15s ease"
   },
   categoryHeader: {
-    fontSize: "11px",
+    fontSize: "var(--sc-content-category-font-size, 12px)",
     fontWeight: 600,
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    padding: "12px 4px 4px"
+    padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)"
   },
   emptyState: {
     fontSize: "13px",
@@ -1291,29 +1291,29 @@ var baseStyles2 = {
 var themeStyles2 = {
   light: {
     container: {
-      backgroundColor: base.white,
-      color: slateGrey[1]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     item: {
-      backgroundColor: slateGrey[12],
-      border: `1px solid ${slateGrey[11]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
     },
     header: {
       backgroundColor: "transparent",
-      color: slateGrey[1]
+      color: "var(--sc-content-text-color)"
     },
     headerHover: {
-      backgroundColor: slateGrey[12]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     body: {
-      color: slateGrey[6]
+      color: "var(--sc-content-text-secondary-color)"
     },
     linkButton: {
-      backgroundColor: purple[8],
-      color: purple[2]
+      backgroundColor: "var(--sc-color-primary, #6366f1)",
+      color: "#ffffff"
     },
     categoryHeader: {
       color: slateGrey[7]
@@ -1324,29 +1324,29 @@ var themeStyles2 = {
   },
   dark: {
     container: {
-      backgroundColor: slateGrey[1],
-      color: slateGrey[12]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     item: {
-      backgroundColor: slateGrey[3],
-      border: `1px solid ${slateGrey[5]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
-      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
     },
     header: {
       backgroundColor: "transparent",
-      color: slateGrey[12]
+      color: "var(--sc-content-text-color)"
     },
     headerHover: {
-      backgroundColor: slateGrey[5]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     body: {
-      color: slateGrey[8]
+      color: "var(--sc-content-text-secondary-color)"
     },
     linkButton: {
-      backgroundColor: purple[0],
-      color: purple[6]
+      backgroundColor: "var(--sc-color-primary, #6366f1)",
+      color: "#ffffff"
     },
     categoryHeader: {
       color: slateGrey[8]
@@ -1356,14 +1356,15 @@ var themeStyles2 = {
     }
   }
 };
-function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
+function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, theme }) {
   const [isHovered, setIsHovered] = useState3(false);
   const colors = themeStyles2[theme];
   const { title, description, href, icon, external } = item.config;
   const itemStyle = {
     ...baseStyles2.item,
     ...colors.item,
-    ...isExpanded ? colors.itemExpanded : {}
+    ...isExpanded ? colors.itemExpanded : {},
+    ...!isLast ? { borderBottom: "var(--sc-content-item-divider, none)" } : {}
   };
   const headerStyle = {
     ...baseStyles2.header,
@@ -1372,7 +1373,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
   };
   const chevronStyle = {
     ...baseStyles2.chevron,
-    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
   };
   const bodyStyle = {
     ...baseStyles2.body,
@@ -1387,7 +1388,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
       onNavigate(href, external != null ? external : false);
     }
   };
-  return _jsxs3("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs3("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx3("span", { style: baseStyles2.icon, children: icon }), _jsx3("span", { children: title }), _jsx3("span", { style: chevronStyle, children: "\u25BC" })] }), _jsxs3("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx3("p", { style: baseStyles2.description, children: description }), href && _jsxs3("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
+  return _jsxs3("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs3("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx3("span", { style: baseStyles2.icon, children: icon }), _jsx3("span", { children: title }), _jsx3("span", { style: chevronStyle, children: "\u203A" })] }), _jsxs3("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx3("p", { style: baseStyles2.description, children: description }), href && _jsxs3("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
 }
 function NavWidget({ config, runtime: runtime7, instanceId }) {
   const [renderTick, forceUpdate] = useReducer2((x) => x + 1, 0);
@@ -1501,7 +1502,7 @@ function NavWidget({ config, runtime: runtime7, instanceId }) {
     ...baseStyles2.emptyState,
     ...themeStyles2[resolvedTheme].emptyState
   };
-  const renderItems = (items) => items.map((tip) => _jsx3(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
+  const renderItems = (items) => items.map((tip, index) => _jsx3(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
   if (visibleTips.length === 0) {
     return _jsx3("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx3("div", { style: emptyStateStyle, children: "No navigation tips available." }) });
   }