@syntrologie/runtime-sdk 2.12.0 → 2.13.0

package/CAPABILITIES.md

@@ -331,29 +331,46 @@ Collapsible Q&A accordion with actions, rich content, feedback, and personalizat
 
 | Goal | Action |
 |------|--------|
-| Mount an FAQ accordion widget | `core:mountWidget` with `widget: "adaptive-faq:accordion"` |
+| Add an FAQ accordion widget | Add a **tile** in `tiles[]` with `widget: "adaptive-faq:accordion"` |
 | Scroll to and expand a specific FAQ item | `faq:scroll_to` |
 | Open, close, or toggle a FAQ item | `faq:toggle_item` |
 | Add, remove, reorder, or replace FAQ items | `faq:update` |
 
-## Actions
+## Mounting an FAQ Widget
+
+FAQ widgets are mounted via **tiles** (not actions). Add an entry to the `tiles[]` array in the config:
 
-### core:mountWidget (FAQ)
+```json
+{
+  "tiles": [
+    {
+      "id": "my-faq",
+      "title": "Frequently Asked Questions",
+      "content": {
+        "type": "custom",
+        "component": "adaptive-faq:accordion",
+        "props": {
+          "expandBehavior": "single",
+          "searchable": true,
+          "items": [ ... ]
+        }
+      }
+    }
+  ]
+}
+```
 
-Mounts an FAQ accordion widget to a surface slot.
+### Tile Props
 
 | Property                | Type                              | Required | Description                                                         |
 | ----------------------- | --------------------------------- | -------- | ------------------------------------------------------------------- |
-| `kind`                  | `"core:mountWidget"`                     | Yes      | Action type                                                         |
-| `slot`                  | string                            | Yes      | Target slot (e.g., `"drawer_right"`, `"overlay_center"`)            |
-| `config.title`          | string                            | No       | Widget title                                                        |
-| `config.expandBehavior` | `"single"` \| `"multiple"`        | No       | Whether one or many items can be open at once (default: `"single"`) |
-| `config.searchable`     | boolean                           | No       | Show a search/filter input (default: `false`)                       |
-| `config.theme`          | `"light"` \| `"dark"` \| `"auto"` | No       | Color theme (default: `"auto"`)                                     |
-| `config.items`          | array                             | Yes      | FAQ items (see below)                                               |
-| `config.feedback`       | boolean \| FeedbackConfig         | No       | Enable per-item feedback widget                                     |
-| `config.ordering`       | OrderingStrategy                  | No       | Item ordering strategy (default: `"static"`)                        |
-| `config.injections`     | InjectionRule[]                   | No       | Dynamic item injection rules                                        |
+| `expandBehavior`        | `"single"` \| `"multiple"`        | No       | Whether one or many items can be open at once (default: `"single"`) |
+| `searchable`            | boolean                           | No       | Show a search/filter input (default: `false`)                       |
+| `theme`                 | `"light"` \| `"dark"` \| `"auto"` | No       | Color theme (default: `"auto"`)                                     |
+| `items`                 | array                             | Yes      | FAQ items (see below)                                               |
+| `feedback`              | boolean \| FeedbackConfig         | No       | Enable per-item feedback widget                                     |
+| `ordering`              | OrderingStrategy                  | No       | Item ordering strategy (default: `"static"`)                        |
+| `injections`            | InjectionRule[]                   | No       | Dynamic item injection rules                                        |
 
 ### FAQ Item Schema
 
@@ -370,53 +387,51 @@ Each item in the `items` array:
 | `config.answerStrategy` | AnswerStrategy           | No       | AI-generated answer configuration               |
 | `triggerWhen`              | DecisionStrategy \| null | No       | Conditional visibility strategy                 |
 
+**Full tile example with FAQ items:**
+
 ```json
 {
-  "kind": "core:mountWidget",
-  "slot": "drawer_right",
-  "config": {
-    "title": "Frequently Asked Questions",
-    "expandBehavior": "single",
-    "searchable": true,
-    "theme": "auto",
-    "feedback": {
-      "style": "thumbs",
-      "prompt": "Was this helpful?"
-    },
-    "ordering": "priority",
-    "items": [
-      {
-        "kind": "faq:question",
-        "config": {
-          "id": "getting-started",
-          "question": "How do I get started?",
-          "answer": "Sign up for a free account and follow our quickstart guide.",
-          "category": "General",
-          "priority": 10
-        }
-      },
-      {
-        "kind": "faq:question",
-        "config": {
-          "id": "payment-methods",
-          "question": "What payment methods do you accept?",
-          "answer": "We accept all major credit cards and PayPal.",
-          "category": "Billing",
-          "priority": 5
-        },
-        "triggerWhen": {
-          "type": "rules",
-          "rules": [
+  "tiles": [
+    {
+      "id": "help-faq",
+      "title": "Frequently Asked Questions",
+      "content": {
+        "type": "custom",
+        "component": "adaptive-faq:accordion",
+        "props": {
+          "expandBehavior": "single",
+          "searchable": true,
+          "feedback": {
+            "style": "thumbs",
+            "prompt": "Was this helpful?"
+          },
+          "ordering": "priority",
+          "items": [
             {
-              "conditions": [{ "type": "page_url", "pattern": "/pricing*" }],
-              "value": true
+              "kind": "faq:question",
+              "config": {
+                "id": "getting-started",
+                "question": "How do I get started?",
+                "answer": "Sign up for a free account and follow our quickstart guide.",
+                "category": "General",
+                "priority": 10
+              }
+            },
+            {
+              "kind": "faq:question",
+              "config": {
+                "id": "payment-methods",
+                "question": "What payment methods do you accept?",
+                "answer": "We accept all major credit cards and PayPal.",
+                "category": "Billing",
+                "priority": 5
+              }
             }
-          ],
-          "default": false
+          ]
         }
       }
-    ]
-  }
+    }
+  ]
 }
 ```
 
@@ -698,7 +713,7 @@ Gamification capabilities including badges, points, and leaderboards.
 |------|--------|
 | Award a badge to a user | `gamification:awardBadge` |
 | Add points to a user's score | `gamification:addPoints` |
-| Mount a gamification widget (leaderboard, progress) | `core:mountWidget` |
+| Mount a gamification widget (leaderboard, progress) | Add a **tile** with `component: "adaptive-gamification:leaderboard"` |
 
 ## Actions
 
@@ -734,15 +749,25 @@ Adds points to the current user's score.
 }
 ```
 
-### core:mountWidget (Gamification)
+### Gamification Widget (via Tile)
 
-Mounts gamification UI elements (leaderboard, badge display, progress tracker).
+Mount gamification UI elements (leaderboard, badge display, progress tracker) via a **tile**:
 
-| Property | Type                   | Required | Description                |
-| -------- | ---------------------- | -------- | -------------------------- |
-| `kind`   | `"core:mountWidget"`   | Yes      | Action type                |
-| `slot`   | string                 | Yes      | Target slot                |
-| `config` | object                 | Yes      | Gamification configuration |
+```json
+{
+  "tiles": [
+    {
+      "id": "gamification",
+      "title": "Your Progress",
+      "content": {
+        "type": "custom",
+        "component": "adaptive-gamification:leaderboard",
+        "props": { ... }
+      }
+    }
+  ]
+}
+```
 
 ### Configuration Schema
 
@@ -767,9 +792,13 @@ Mounts gamification UI elements (leaderboard, badge display, progress tracker).
 
 ```json
 {
-  "kind": "core:mountWidget",
-  "slot": "overlay_corner_br",
-  "config": {
+  "tiles": [{
+    "id": "gamification-widget",
+    "title": "Achievements",
+    "content": {
+      "type": "custom",
+      "component": "adaptive-gamification:leaderboard",
+      "props": {
     "badges": [
       {
         "id": "first-purchase",
@@ -813,7 +842,7 @@ Navigation tips accordion widget with conditional item visibility and toast noti
 |------|--------|
 | Scroll to an element on the page | `navigation:scrollTo` |
 | Navigate to a different URL | `navigation:navigate` |
-| Show contextual navigation tips widget | `core:mountWidget` with `widget: "adaptive-nav:tips"` |
+| Show contextual navigation tips widget | Add a **tile** with `component: "adaptive-nav:tips"` |
 
 ## Widget: `adaptive-nav:tips`
 

package/dist/bootstrap.d.ts

@@ -18,6 +18,7 @@
  */
 import type { appRegistry } from './apps';
 import type { SmartCanvasRuntime } from './runtime';
+import type { InterventionTracker } from './telemetry/InterventionTracker';
 import { decodeToken, encodeToken } from './token';
 export { collectBrowserMetadata, fetchGeo } from './bootstrap-init';
 export type { SyntroInitOptions, SyntroInitResult } from './bootstrap-types';
@@ -63,6 +64,7 @@ declare global {
             appRegistry: typeof appRegistry;
             runtime: SmartCanvasRuntime;
             version: string;
+            interventionTracker?: InterventionTracker;
         };
     }
 }

package/dist/{chunk-J2LGX2PV.js → chunk-GF364MMB.js}

@@ -3456,7 +3456,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.12.0";
+var SDK_VERSION = "2.13.0";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -3611,9 +3611,8 @@ var resolveConfigUri = ({
 }) => {
   var _a2;
   if (configUri) return configUri;
-  if (experiments) {
-    const key = featureKey != null ? featureKey : "smart-canvas-config";
-    const fromFeature = (_a2 = experiments.getFeatureValue) == null ? void 0 : _a2.call(experiments, key, null);
+  if (experiments && featureKey) {
+    const fromFeature = (_a2 = experiments.getFeatureValue) == null ? void 0 : _a2.call(experiments, featureKey, null);
     if (fromFeature) return fromFeature;
   }
   return void 0;
@@ -3647,9 +3646,8 @@ var createCanvasConfigFetcher = ({
   sdkVersion
 }) => async () => {
   var _a2;
-  const effectiveConfigKey = configFeatureKey != null ? configFeatureKey : "smart-canvas-config";
-  if (experiments) {
-    const directConfig = (_a2 = experiments.getFeatureValue) == null ? void 0 : _a2.call(experiments, effectiveConfigKey, null);
+  if (experiments && configFeatureKey) {
+    const directConfig = (_a2 = experiments.getFeatureValue) == null ? void 0 : _a2.call(experiments, configFeatureKey, null);
     if (directConfig && typeof directConfig === "object") {
       debug("SmartCanvas Config", "Resolved config directly from feature flag", directConfig);
       return directConfig;
@@ -5075,6 +5073,19 @@ function WidgetMount({ widgetId, props }) {
   }
   return /* @__PURE__ */ jsx6("div", { ref: parentRef });
 }
+var INTERACTION_PATTERNS = [
+  ":toggled",
+  ":clicked",
+  ":feedback",
+  ":navigate",
+  ":expanded",
+  ":collapsed",
+  ":dismissed",
+  ":submitted",
+  ":interacted",
+  ":tip_clicked",
+  ":tip_focused"
+];
 function TileCard({
   config,
   surface: _surface,
@@ -5083,10 +5094,42 @@ function TileCard({
 }) {
   const { title, subtitle, widget, props, icon } = config;
   const [, setTick] = useState4(0);
+  const articleRef = useRef4(null);
   const runtime3 = useRuntime();
   useEffect5(() => {
     if (runtime3) setTick((t) => t + 1);
   }, [runtime3]);
+  useEffect5(() => {
+    var _a2;
+    const tracker = typeof window !== "undefined" ? (_a2 = window.SynOS) == null ? void 0 : _a2.interventionTracker : null;
+    if (!articleRef.current || !tracker) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        var _a3;
+        if (entry.isIntersecting) {
+          tracker.trackSeen(config.id, (_a3 = config.widget) != null ? _a3 : "unknown");
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(articleRef.current);
+    return () => observer.disconnect();
+  }, [config.id, config.widget]);
+  useEffect5(() => {
+    var _a2;
+    const tracker = typeof window !== "undefined" ? (_a2 = window.SynOS) == null ? void 0 : _a2.interventionTracker : null;
+    if (!(runtime3 == null ? void 0 : runtime3.events) || !tracker) return;
+    return runtime3.events.subscribe((event) => {
+      var _a3, _b;
+      if (!INTERACTION_PATTERNS.some((p) => {
+        var _a4;
+        return (_a4 = event.name) == null ? void 0 : _a4.includes(p);
+      })) return;
+      if (((_a3 = event.props) == null ? void 0 : _a3.instanceId) !== config.id) return;
+      tracker.trackInteracted(config.id, (_b = config.widget) != null ? _b : "unknown", event.name);
+    });
+  }, [runtime3 == null ? void 0 : runtime3.events, config.id, config.widget]);
   const registration = useMemo3(
     () => {
       var _a2, _b;
@@ -5140,6 +5183,7 @@ function TileCard({
   return /* @__PURE__ */ jsxs2(
     "article",
     {
+      ref: articleRef,
       "data-shadow-canvas-id": `tile-${config.id}`,
       style: cardStyle,
       onMouseEnter,
@@ -6162,6 +6206,14 @@ var sortTiles = (tiles) => [...tiles].sort((a, b) => {
   var _a2, _b;
   return ((_a2 = b.priority) != null ? _a2 : 0) - ((_b = a.priority) != null ? _b : 0);
 });
+function fireTriggeredForTiles(tiles) {
+  var _a2, _b;
+  const tracker = typeof window !== "undefined" ? (_a2 = window.SynOS) == null ? void 0 : _a2.interventionTracker : null;
+  if (!tracker) return;
+  for (const tile of tiles) {
+    tracker.trackTriggered(tile.id, (_b = tile.widget) != null ? _b : "unknown");
+  }
+}
 function useShadowCanvasConfig({
   fetcher,
   experiments,
@@ -6184,6 +6236,7 @@ function useShadowCanvasConfig({
     if (experiments) {
       tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
     }
+    fireTriggeredForTiles(tiles);
     setState((prev) => ({ ...prev, tiles: sortTiles(tiles) }));
   }, [runtime3, experiments]);
   const load = useCallback5(async () => {
@@ -6201,6 +6254,7 @@ function useShadowCanvasConfig({
       } else if (experiments) {
         tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
       }
+      fireTriggeredForTiles(tiles);
       debug("SmartCanvas Config", `Tile count after filtering: ${tiles.length}`);
       const newActions = response.actions || [];
       const newActionsJson = JSON.stringify(newActions);
@@ -7851,6 +7905,59 @@ function createPostHogClient(options = {}) {
   return new PostHogAdapter(options);
 }
 
+// src/telemetry/InterventionTracker.ts
+var InterventionTracker = class {
+  constructor(telemetry, variantId) {
+    __publicField(this, "telemetry");
+    __publicField(this, "variantId");
+    __publicField(this, "seenSet", /* @__PURE__ */ new Set());
+    __publicField(this, "triggeredSet", /* @__PURE__ */ new Set());
+    this.telemetry = telemetry;
+    this.variantId = variantId;
+  }
+  trackServed(tiles, actions) {
+    var _a2, _b;
+    (_b = (_a2 = this.telemetry).track) == null ? void 0 : _b.call(_a2, "syntro_config_served", {
+      variant_id: this.variantId,
+      tiles,
+      actions
+    });
+  }
+  trackSeen(interventionId, interventionKind) {
+    var _a2, _b;
+    if (this.seenSet.has(interventionId)) return;
+    this.seenSet.add(interventionId);
+    (_b = (_a2 = this.telemetry).track) == null ? void 0 : _b.call(_a2, "syntro_intervention_seen", {
+      variant_id: this.variantId,
+      intervention_id: interventionId,
+      intervention_kind: interventionKind
+    });
+  }
+  trackTriggered(interventionId, interventionKind) {
+    var _a2, _b;
+    if (this.triggeredSet.has(interventionId)) return;
+    this.triggeredSet.add(interventionId);
+    (_b = (_a2 = this.telemetry).track) == null ? void 0 : _b.call(_a2, "syntro_intervention_triggered", {
+      variant_id: this.variantId,
+      intervention_id: interventionId,
+      intervention_kind: interventionKind
+    });
+  }
+  trackInteracted(interventionId, interventionKind, interactionType) {
+    var _a2, _b;
+    (_b = (_a2 = this.telemetry).track) == null ? void 0 : _b.call(_a2, "syntro_intervention_interacted", {
+      variant_id: this.variantId,
+      intervention_id: interventionId,
+      intervention_kind: interventionKind,
+      interaction_type: interactionType
+    });
+  }
+  resetPage() {
+    this.seenSet.clear();
+    this.triggeredSet.clear();
+  }
+};
+
 // src/actions/executors/core-flow.ts
 var executeSequence = async (action, context) => {
   const handles = [];
@@ -12037,15 +12144,35 @@ async function _initCore(options) {
   }
   const warnedAppFailures = /* @__PURE__ */ new Set();
   const appLoadingFetcher = baseFetcher ? async () => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
     const config = await baseFetcher();
+    const tileCount = (_b2 = (_a3 = config.tiles) == null ? void 0 : _a3.length) != null ? _b2 : 0;
+    const actionCount = (_d2 = (_c2 = config.actions) == null ? void 0 : _c2.length) != null ? _d2 : 0;
+    const variantId = (_e2 = config.meta) == null ? void 0 : _e2.variant_id;
+    if (tileCount > 0 || actionCount > 0) {
+      if (!variantId) {
+        console.warn(
+          "[Syntro] Config has content but no meta.variant_id \u2014 intervention tracking disabled"
+        );
+      }
+    }
+    if (telemetry && variantId) {
+      const tracker = new InterventionTracker(telemetry, variantId);
+      tracker.trackServed(tileCount, actionCount);
+      if (typeof window !== "undefined") {
+        window.SynOS.interventionTracker = tracker;
+      }
+      runtime3.navigation.subscribe(() => {
+        tracker.resetPage();
+      });
+    }
     console.log(
       "[Syntro Bootstrap] Config fetched:",
-      `tiles=${(_b2 = (_a3 = config.tiles) == null ? void 0 : _a3.length) != null ? _b2 : 0},`,
-      `actions=${(_d2 = (_c2 = config.actions) == null ? void 0 : _c2.length) != null ? _d2 : 0},`,
-      `theme=${(_f2 = (_e2 = config.theme) == null ? void 0 : _e2.name) != null ? _f2 : "none"}`
+      `tiles=${(_g2 = (_f2 = config.tiles) == null ? void 0 : _f2.length) != null ? _g2 : 0},`,
+      `actions=${(_i = (_h = config.actions) == null ? void 0 : _h.length) != null ? _i : 0},`,
+      `theme=${(_k = (_j = config.theme) == null ? void 0 : _j.name) != null ? _k : "none"}`
     );
-    if (((_g2 = config.actions) == null ? void 0 : _g2.length) > 0) {
+    if (((_l = config.actions) == null ? void 0 : _l.length) > 0) {
       console.log(
         "[Syntro Bootstrap] Actions in config:",
         config.actions.map(
@@ -12200,6 +12327,7 @@ export {
   createSessionMetricTracker,
   createNoopClient,
   createPostHogClient,
+  InterventionTracker,
   ExecutorRegistry,
   executorRegistry,
   getExecutor,
@@ -12246,4 +12374,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-J2LGX2PV.js.map
+//# sourceMappingURL=chunk-GF364MMB.js.map