@eventop/sdk 1.2.12 → 1.2.14

package/dist/core.cjs

@@ -486,7 +486,13 @@ function buildSystemPrompt(config) {
     var _f$screen;
     return (_f$screen = f.screen) === null || _f$screen === void 0 ? void 0 : _f$screen.id;
   }).map(f => f.screen.id))];
-  const featureSummary = (config.features || []).map(f => {
+
+  // Split features into live (current page) and ghost (other pages).
+  // This lets the AI understand what's immediately available vs reachable
+  // via navigation, and craft the right message when something isn't found.
+  const liveFeatures = (config.features || []).filter(f => !f._ghost);
+  const ghostFeatures = (config.features || []).filter(f => f._ghost);
+  const summarise = f => {
     var _f$screen2, _f$flow;
     const entry = {
       id: f.id,
@@ -501,15 +507,18 @@ function buildSystemPrompt(config) {
       entry.note = `This feature has ${f.flow.length} sequential sub-steps. Include ONE step per flow entry.`;
     }
     return entry;
-  });
+  };
+  const liveSection = liveFeatures.length ? `CURRENT PAGE FEATURES (user is here now):\n${JSON.stringify(liveFeatures.map(summarise), null, 2)}` : `CURRENT PAGE FEATURES: none registered yet.`;
+  const ghostSection = ghostFeatures.length ? `OTHER PAGE FEATURES (reachable via navigation — SDK handles it automatically):\n${JSON.stringify(ghostFeatures.map(summarise), null, 2)}` : '';
   return `
 You are an in-app assistant called "${config.assistantName || 'AI Guide'}" for "${config.appName}".
 Your ONLY job: guide users step-by-step through tasks using the feature map below.
 
-${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. Features are screen-specific. The SDK handles navigation — just pick the right features.` : ''}
+${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. The SDK navigates automatically — just pick the right feature id.` : ''}
+
+${liveSection}
 
-FEATURE MAP (only reference IDs from this list):
-${JSON.stringify(featureSummary, null, 2)}
+${ghostSection}
 
 RESPOND ONLY with this exact JSON — no markdown, no extra text:
 {
@@ -526,16 +535,26 @@ RESPOND ONLY with this exact JSON — no markdown, no extra text:
 }
 
 RULES:
-1. The step "id" MUST match a feature id from the feature map.
+1. The step "id" MUST match a feature id from the current page or other page features above.
 2. Only use selectors and IDs from the feature map. Never invent them.
-3. No matching feature → steps: [], explain kindly in message.
-4. position values: top | bottom | left | right | auto only.
-5. Order steps logically. For multi-step flows, order as the user encounters them.
-6. For forms: ALWAYS include a step for the form section or first input BEFORE the
+3. position values: top | bottom | left | right | auto only.
+4. Order steps logically. For multi-step flows, order as the user encounters them.
+5. For forms: ALWAYS include a step for the form section or first input BEFORE the
    continue/submit button. The button step must always be LAST in its section.
-7. If a feature has a flow, include one step per flow entry using the same feature id —
+6. If a feature has a flow, include one step per flow entry using the same feature id —
    the SDK expands them automatically.
-8. Never skip features in a required sequence. Include every step end-to-end.
+7. Never skip features in a required sequence. Include every step end-to-end.
+
+WHEN THE USER'S REQUEST DOESN'T MATCH ANY FEATURE:
+- If it partially matches something (e.g. they said "create template" and there's a
+  "template-gallery" feature): guide them to the closest matching feature and explain
+  what it does. Don't say you can't help.
+- If it matches a feature on another page (ghost): include that feature's steps normally.
+  The SDK will navigate there automatically. Do NOT tell the user to navigate manually.
+- If there is genuinely no match anywhere in the feature map: set steps to [] and say
+  something like "That doesn't seem to be a feature in ${config.appName} yet. Here's
+  what I can help you with:" then list 2-3 relevant features from the map by name.
+  Never say you "can only guide through available features" — always offer alternatives.
 `.trim();
 }
 

package/dist/core.js

@@ -484,7 +484,13 @@ function buildSystemPrompt(config) {
     var _f$screen;
     return (_f$screen = f.screen) === null || _f$screen === void 0 ? void 0 : _f$screen.id;
   }).map(f => f.screen.id))];
-  const featureSummary = (config.features || []).map(f => {
+
+  // Split features into live (current page) and ghost (other pages).
+  // This lets the AI understand what's immediately available vs reachable
+  // via navigation, and craft the right message when something isn't found.
+  const liveFeatures = (config.features || []).filter(f => !f._ghost);
+  const ghostFeatures = (config.features || []).filter(f => f._ghost);
+  const summarise = f => {
     var _f$screen2, _f$flow;
     const entry = {
       id: f.id,
@@ -499,15 +505,18 @@ function buildSystemPrompt(config) {
       entry.note = `This feature has ${f.flow.length} sequential sub-steps. Include ONE step per flow entry.`;
     }
     return entry;
-  });
+  };
+  const liveSection = liveFeatures.length ? `CURRENT PAGE FEATURES (user is here now):\n${JSON.stringify(liveFeatures.map(summarise), null, 2)}` : `CURRENT PAGE FEATURES: none registered yet.`;
+  const ghostSection = ghostFeatures.length ? `OTHER PAGE FEATURES (reachable via navigation — SDK handles it automatically):\n${JSON.stringify(ghostFeatures.map(summarise), null, 2)}` : '';
   return `
 You are an in-app assistant called "${config.assistantName || 'AI Guide'}" for "${config.appName}".
 Your ONLY job: guide users step-by-step through tasks using the feature map below.
 
-${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. Features are screen-specific. The SDK handles navigation — just pick the right features.` : ''}
+${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. The SDK navigates automatically — just pick the right feature id.` : ''}
+
+${liveSection}
 
-FEATURE MAP (only reference IDs from this list):
-${JSON.stringify(featureSummary, null, 2)}
+${ghostSection}
 
 RESPOND ONLY with this exact JSON — no markdown, no extra text:
 {
@@ -524,16 +533,26 @@ RESPOND ONLY with this exact JSON — no markdown, no extra text:
 }
 
 RULES:
-1. The step "id" MUST match a feature id from the feature map.
+1. The step "id" MUST match a feature id from the current page or other page features above.
 2. Only use selectors and IDs from the feature map. Never invent them.
-3. No matching feature → steps: [], explain kindly in message.
-4. position values: top | bottom | left | right | auto only.
-5. Order steps logically. For multi-step flows, order as the user encounters them.
-6. For forms: ALWAYS include a step for the form section or first input BEFORE the
+3. position values: top | bottom | left | right | auto only.
+4. Order steps logically. For multi-step flows, order as the user encounters them.
+5. For forms: ALWAYS include a step for the form section or first input BEFORE the
    continue/submit button. The button step must always be LAST in its section.
-7. If a feature has a flow, include one step per flow entry using the same feature id —
+6. If a feature has a flow, include one step per flow entry using the same feature id —
    the SDK expands them automatically.
-8. Never skip features in a required sequence. Include every step end-to-end.
+7. Never skip features in a required sequence. Include every step end-to-end.
+
+WHEN THE USER'S REQUEST DOESN'T MATCH ANY FEATURE:
+- If it partially matches something (e.g. they said "create template" and there's a
+  "template-gallery" feature): guide them to the closest matching feature and explain
+  what it does. Don't say you can't help.
+- If it matches a feature on another page (ghost): include that feature's steps normally.
+  The SDK will navigate there automatically. Do NOT tell the user to navigate manually.
+- If there is genuinely no match anywhere in the feature map: set steps to [] and say
+  something like "That doesn't seem to be a feature in ${config.appName} yet. Here's
+  what I can help you with:" then list 2-3 relevant features from the map by name.
+  Never say you "can only guide through available features" — always offer alternatives.
 `.trim();
 }
 

package/dist/index.cjs

@@ -315,18 +315,28 @@ function EventopTarget({
   navigate,
   navigateWaitFor,
   advanceOn,
-  waitFor,
-  ...rest
+  waitFor
 }) {
   const registry = useRegistry();
-  const ref = react.useRef(null);
+  const wrapperRef = react.useRef(null);
   const dataAttr = `data-evtp-${id}`;
   const selector = `[${dataAttr}]`;
   react.useEffect(() => {
+    var _wrapperRef$current;
     if (!id || !name) {
       console.warn('[Eventop] <EventopTarget> requires id and name props.');
       return;
     }
+
+    // Set the attribute directly on the first real child DOM element.
+    // This bypasses React's prop system entirely — works regardless of whether
+    // the wrapped component forwards unknown props.
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    } else {
+      console.warn(`[Eventop] <EventopTarget id="${id}"> could not find a child DOM element to attach to. ` + `Make sure the wrapped component renders at least one DOM element.`);
+    }
     registry.registerFeature({
       id,
       name,
@@ -341,32 +351,24 @@ function EventopTarget({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterFeature(id);
-  }, [id, name, description, route]);
-  const child = react.Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/react.cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsxRuntime.jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
+    return () => {
+      var _wrapperRef$current2;
+      // Clean up the injected attribute on unmount
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterFeature(id);
+    };
+  }, [id, name, description, route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsxRuntime.jsx(EventopFeatureScopeContext.Provider, {
+    value: id,
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: wrapperRef,
       style: {
         display: 'contents'
       },
-      children: child
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(EventopFeatureScopeContext.Provider, {
-    value: id,
-    children: wrapped
+      children: react.Children.only(children)
+    })
   });
 }
 
@@ -381,7 +383,7 @@ function EventopStep({
   const registry = useRegistry();
   const featureScope = useFeatureScope();
   const featureId = feature || featureScope;
-  const ref = react.useRef(null);
+  const wrapperRef = react.useRef(null);
   if (!featureId) {
     console.warn('[Eventop] <EventopStep> needs either a feature prop or an <EventopTarget> ancestor.');
   }
@@ -391,7 +393,14 @@ function EventopStep({
   const dataAttr = `data-evtp-step-${featureId}-${parentStep != null ? `${parentStep}-` : ''}${index}`;
   const selector = `[${dataAttr}]`;
   react.useEffect(() => {
+    var _wrapperRef$current;
     if (!featureId || index == null) return;
+
+    // Inject attribute directly onto the first real child DOM element
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    }
     registry.registerStep(featureId, index, parentStep ?? null, {
       selector,
       waitFor: waitFor || null,
@@ -400,30 +409,21 @@ function EventopStep({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterStep(featureId, index, parentStep ?? null);
-  }, [featureId, index, parentStep]);
-  const child = react.Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/react.cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsxRuntime.jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
-      style: {
-        display: 'contents'
-      },
-      children: child
-    });
-  }
-  return wrapped;
+    return () => {
+      var _wrapperRef$current2;
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterStep(featureId, index, parentStep ?? null);
+    };
+  }, [featureId, index, parentStep]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: wrapperRef,
+    style: {
+      display: 'contents'
+    },
+    children: react.Children.only(children)
+  });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, useCallback, useEffect, Children, cloneElement, useState } from 'react';
+import { createContext, useContext, useRef, useCallback, useEffect, Children, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -313,18 +313,28 @@ function EventopTarget({
   navigate,
   navigateWaitFor,
   advanceOn,
-  waitFor,
-  ...rest
+  waitFor
 }) {
   const registry = useRegistry();
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
   const dataAttr = `data-evtp-${id}`;
   const selector = `[${dataAttr}]`;
   useEffect(() => {
+    var _wrapperRef$current;
     if (!id || !name) {
       console.warn('[Eventop] <EventopTarget> requires id and name props.');
       return;
     }
+
+    // Set the attribute directly on the first real child DOM element.
+    // This bypasses React's prop system entirely — works regardless of whether
+    // the wrapped component forwards unknown props.
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    } else {
+      console.warn(`[Eventop] <EventopTarget id="${id}"> could not find a child DOM element to attach to. ` + `Make sure the wrapped component renders at least one DOM element.`);
+    }
     registry.registerFeature({
       id,
       name,
@@ -339,32 +349,24 @@ function EventopTarget({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterFeature(id);
-  }, [id, name, description, route]);
-  const child = Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
+    return () => {
+      var _wrapperRef$current2;
+      // Clean up the injected attribute on unmount
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterFeature(id);
+    };
+  }, [id, name, description, route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsx(EventopFeatureScopeContext.Provider, {
+    value: id,
+    children: /*#__PURE__*/jsx("span", {
+      ref: wrapperRef,
       style: {
         display: 'contents'
       },
-      children: child
-    });
-  }
-  return /*#__PURE__*/jsx(EventopFeatureScopeContext.Provider, {
-    value: id,
-    children: wrapped
+      children: Children.only(children)
+    })
   });
 }
 
@@ -379,7 +381,7 @@ function EventopStep({
   const registry = useRegistry();
   const featureScope = useFeatureScope();
   const featureId = feature || featureScope;
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
   if (!featureId) {
     console.warn('[Eventop] <EventopStep> needs either a feature prop or an <EventopTarget> ancestor.');
   }
@@ -389,7 +391,14 @@ function EventopStep({
   const dataAttr = `data-evtp-step-${featureId}-${parentStep != null ? `${parentStep}-` : ''}${index}`;
   const selector = `[${dataAttr}]`;
   useEffect(() => {
+    var _wrapperRef$current;
     if (!featureId || index == null) return;
+
+    // Inject attribute directly onto the first real child DOM element
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    }
     registry.registerStep(featureId, index, parentStep ?? null, {
       selector,
       waitFor: waitFor || null,
@@ -398,30 +407,21 @@ function EventopStep({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterStep(featureId, index, parentStep ?? null);
-  }, [featureId, index, parentStep]);
-  const child = Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
-      style: {
-        display: 'contents'
-      },
-      children: child
-    });
-  }
-  return wrapped;
+    return () => {
+      var _wrapperRef$current2;
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterStep(featureId, index, parentStep ?? null);
+    };
+  }, [featureId, index, parentStep]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsx("span", {
+    ref: wrapperRef,
+    style: {
+      display: 'contents'
+    },
+    children: Children.only(children)
+  });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════

package/dist/react/core.cjs

@@ -486,7 +486,13 @@ function buildSystemPrompt(config) {
     var _f$screen;
     return (_f$screen = f.screen) === null || _f$screen === void 0 ? void 0 : _f$screen.id;
   }).map(f => f.screen.id))];
-  const featureSummary = (config.features || []).map(f => {
+
+  // Split features into live (current page) and ghost (other pages).
+  // This lets the AI understand what's immediately available vs reachable
+  // via navigation, and craft the right message when something isn't found.
+  const liveFeatures = (config.features || []).filter(f => !f._ghost);
+  const ghostFeatures = (config.features || []).filter(f => f._ghost);
+  const summarise = f => {
     var _f$screen2, _f$flow;
     const entry = {
       id: f.id,
@@ -501,15 +507,18 @@ function buildSystemPrompt(config) {
       entry.note = `This feature has ${f.flow.length} sequential sub-steps. Include ONE step per flow entry.`;
     }
     return entry;
-  });
+  };
+  const liveSection = liveFeatures.length ? `CURRENT PAGE FEATURES (user is here now):\n${JSON.stringify(liveFeatures.map(summarise), null, 2)}` : `CURRENT PAGE FEATURES: none registered yet.`;
+  const ghostSection = ghostFeatures.length ? `OTHER PAGE FEATURES (reachable via navigation — SDK handles it automatically):\n${JSON.stringify(ghostFeatures.map(summarise), null, 2)}` : '';
   return `
 You are an in-app assistant called "${config.assistantName || 'AI Guide'}" for "${config.appName}".
 Your ONLY job: guide users step-by-step through tasks using the feature map below.
 
-${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. Features are screen-specific. The SDK handles navigation — just pick the right features.` : ''}
+${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. The SDK navigates automatically — just pick the right feature id.` : ''}
+
+${liveSection}
 
-FEATURE MAP (only reference IDs from this list):
-${JSON.stringify(featureSummary, null, 2)}
+${ghostSection}
 
 RESPOND ONLY with this exact JSON — no markdown, no extra text:
 {
@@ -526,16 +535,26 @@ RESPOND ONLY with this exact JSON — no markdown, no extra text:
 }
 
 RULES:
-1. The step "id" MUST match a feature id from the feature map.
+1. The step "id" MUST match a feature id from the current page or other page features above.
 2. Only use selectors and IDs from the feature map. Never invent them.
-3. No matching feature → steps: [], explain kindly in message.
-4. position values: top | bottom | left | right | auto only.
-5. Order steps logically. For multi-step flows, order as the user encounters them.
-6. For forms: ALWAYS include a step for the form section or first input BEFORE the
+3. position values: top | bottom | left | right | auto only.
+4. Order steps logically. For multi-step flows, order as the user encounters them.
+5. For forms: ALWAYS include a step for the form section or first input BEFORE the
    continue/submit button. The button step must always be LAST in its section.
-7. If a feature has a flow, include one step per flow entry using the same feature id —
+6. If a feature has a flow, include one step per flow entry using the same feature id —
    the SDK expands them automatically.
-8. Never skip features in a required sequence. Include every step end-to-end.
+7. Never skip features in a required sequence. Include every step end-to-end.
+
+WHEN THE USER'S REQUEST DOESN'T MATCH ANY FEATURE:
+- If it partially matches something (e.g. they said "create template" and there's a
+  "template-gallery" feature): guide them to the closest matching feature and explain
+  what it does. Don't say you can't help.
+- If it matches a feature on another page (ghost): include that feature's steps normally.
+  The SDK will navigate there automatically. Do NOT tell the user to navigate manually.
+- If there is genuinely no match anywhere in the feature map: set steps to [] and say
+  something like "That doesn't seem to be a feature in ${config.appName} yet. Here's
+  what I can help you with:" then list 2-3 relevant features from the map by name.
+  Never say you "can only guide through available features" — always offer alternatives.
 `.trim();
 }
 

package/dist/react/core.js

@@ -484,7 +484,13 @@ function buildSystemPrompt(config) {
     var _f$screen;
     return (_f$screen = f.screen) === null || _f$screen === void 0 ? void 0 : _f$screen.id;
   }).map(f => f.screen.id))];
-  const featureSummary = (config.features || []).map(f => {
+
+  // Split features into live (current page) and ghost (other pages).
+  // This lets the AI understand what's immediately available vs reachable
+  // via navigation, and craft the right message when something isn't found.
+  const liveFeatures = (config.features || []).filter(f => !f._ghost);
+  const ghostFeatures = (config.features || []).filter(f => f._ghost);
+  const summarise = f => {
     var _f$screen2, _f$flow;
     const entry = {
       id: f.id,
@@ -499,15 +505,18 @@ function buildSystemPrompt(config) {
       entry.note = `This feature has ${f.flow.length} sequential sub-steps. Include ONE step per flow entry.`;
     }
     return entry;
-  });
+  };
+  const liveSection = liveFeatures.length ? `CURRENT PAGE FEATURES (user is here now):\n${JSON.stringify(liveFeatures.map(summarise), null, 2)}` : `CURRENT PAGE FEATURES: none registered yet.`;
+  const ghostSection = ghostFeatures.length ? `OTHER PAGE FEATURES (reachable via navigation — SDK handles it automatically):\n${JSON.stringify(ghostFeatures.map(summarise), null, 2)}` : '';
   return `
 You are an in-app assistant called "${config.assistantName || 'AI Guide'}" for "${config.appName}".
 Your ONLY job: guide users step-by-step through tasks using the feature map below.
 
-${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. Features are screen-specific. The SDK handles navigation — just pick the right features.` : ''}
+${screens.length > 1 ? `SCREENS: This app has multiple screens: ${screens.join(', ')}. The SDK navigates automatically — just pick the right feature id.` : ''}
+
+${liveSection}
 
-FEATURE MAP (only reference IDs from this list):
-${JSON.stringify(featureSummary, null, 2)}
+${ghostSection}
 
 RESPOND ONLY with this exact JSON — no markdown, no extra text:
 {
@@ -524,16 +533,26 @@ RESPOND ONLY with this exact JSON — no markdown, no extra text:
 }
 
 RULES:
-1. The step "id" MUST match a feature id from the feature map.
+1. The step "id" MUST match a feature id from the current page or other page features above.
 2. Only use selectors and IDs from the feature map. Never invent them.
-3. No matching feature → steps: [], explain kindly in message.
-4. position values: top | bottom | left | right | auto only.
-5. Order steps logically. For multi-step flows, order as the user encounters them.
-6. For forms: ALWAYS include a step for the form section or first input BEFORE the
+3. position values: top | bottom | left | right | auto only.
+4. Order steps logically. For multi-step flows, order as the user encounters them.
+5. For forms: ALWAYS include a step for the form section or first input BEFORE the
    continue/submit button. The button step must always be LAST in its section.
-7. If a feature has a flow, include one step per flow entry using the same feature id —
+6. If a feature has a flow, include one step per flow entry using the same feature id —
    the SDK expands them automatically.
-8. Never skip features in a required sequence. Include every step end-to-end.
+7. Never skip features in a required sequence. Include every step end-to-end.
+
+WHEN THE USER'S REQUEST DOESN'T MATCH ANY FEATURE:
+- If it partially matches something (e.g. they said "create template" and there's a
+  "template-gallery" feature): guide them to the closest matching feature and explain
+  what it does. Don't say you can't help.
+- If it matches a feature on another page (ghost): include that feature's steps normally.
+  The SDK will navigate there automatically. Do NOT tell the user to navigate manually.
+- If there is genuinely no match anywhere in the feature map: set steps to [] and say
+  something like "That doesn't seem to be a feature in ${config.appName} yet. Here's
+  what I can help you with:" then list 2-3 relevant features from the map by name.
+  Never say you "can only guide through available features" — always offer alternatives.
 `.trim();
 }
 

package/dist/react/index.cjs

@@ -315,18 +315,28 @@ function EventopTarget({
   navigate,
   navigateWaitFor,
   advanceOn,
-  waitFor,
-  ...rest
+  waitFor
 }) {
   const registry = useRegistry();
-  const ref = react.useRef(null);
+  const wrapperRef = react.useRef(null);
   const dataAttr = `data-evtp-${id}`;
   const selector = `[${dataAttr}]`;
   react.useEffect(() => {
+    var _wrapperRef$current;
     if (!id || !name) {
       console.warn('[Eventop] <EventopTarget> requires id and name props.');
       return;
     }
+
+    // Set the attribute directly on the first real child DOM element.
+    // This bypasses React's prop system entirely — works regardless of whether
+    // the wrapped component forwards unknown props.
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    } else {
+      console.warn(`[Eventop] <EventopTarget id="${id}"> could not find a child DOM element to attach to. ` + `Make sure the wrapped component renders at least one DOM element.`);
+    }
     registry.registerFeature({
       id,
       name,
@@ -341,32 +351,24 @@ function EventopTarget({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterFeature(id);
-  }, [id, name, description, route]);
-  const child = react.Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/react.cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsxRuntime.jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
+    return () => {
+      var _wrapperRef$current2;
+      // Clean up the injected attribute on unmount
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterFeature(id);
+    };
+  }, [id, name, description, route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsxRuntime.jsx(EventopFeatureScopeContext.Provider, {
+    value: id,
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: wrapperRef,
       style: {
         display: 'contents'
       },
-      children: child
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(EventopFeatureScopeContext.Provider, {
-    value: id,
-    children: wrapped
+      children: react.Children.only(children)
+    })
   });
 }
 
@@ -381,7 +383,7 @@ function EventopStep({
   const registry = useRegistry();
   const featureScope = useFeatureScope();
   const featureId = feature || featureScope;
-  const ref = react.useRef(null);
+  const wrapperRef = react.useRef(null);
   if (!featureId) {
     console.warn('[Eventop] <EventopStep> needs either a feature prop or an <EventopTarget> ancestor.');
   }
@@ -391,7 +393,14 @@ function EventopStep({
   const dataAttr = `data-evtp-step-${featureId}-${parentStep != null ? `${parentStep}-` : ''}${index}`;
   const selector = `[${dataAttr}]`;
   react.useEffect(() => {
+    var _wrapperRef$current;
     if (!featureId || index == null) return;
+
+    // Inject attribute directly onto the first real child DOM element
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    }
     registry.registerStep(featureId, index, parentStep ?? null, {
       selector,
       waitFor: waitFor || null,
@@ -400,30 +409,21 @@ function EventopStep({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterStep(featureId, index, parentStep ?? null);
-  }, [featureId, index, parentStep]);
-  const child = react.Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/react.cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsxRuntime.jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
-      style: {
-        display: 'contents'
-      },
-      children: child
-    });
-  }
-  return wrapped;
+    return () => {
+      var _wrapperRef$current2;
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterStep(featureId, index, parentStep ?? null);
+    };
+  }, [featureId, index, parentStep]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: wrapperRef,
+    style: {
+      display: 'contents'
+    },
+    children: react.Children.only(children)
+  });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, useCallback, useEffect, Children, cloneElement, useState } from 'react';
+import { createContext, useContext, useRef, useCallback, useEffect, Children, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -313,18 +313,28 @@ function EventopTarget({
   navigate,
   navigateWaitFor,
   advanceOn,
-  waitFor,
-  ...rest
+  waitFor
 }) {
   const registry = useRegistry();
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
   const dataAttr = `data-evtp-${id}`;
   const selector = `[${dataAttr}]`;
   useEffect(() => {
+    var _wrapperRef$current;
     if (!id || !name) {
       console.warn('[Eventop] <EventopTarget> requires id and name props.');
       return;
     }
+
+    // Set the attribute directly on the first real child DOM element.
+    // This bypasses React's prop system entirely — works regardless of whether
+    // the wrapped component forwards unknown props.
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    } else {
+      console.warn(`[Eventop] <EventopTarget id="${id}"> could not find a child DOM element to attach to. ` + `Make sure the wrapped component renders at least one DOM element.`);
+    }
     registry.registerFeature({
       id,
       name,
@@ -339,32 +349,24 @@ function EventopTarget({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterFeature(id);
-  }, [id, name, description, route]);
-  const child = Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
+    return () => {
+      var _wrapperRef$current2;
+      // Clean up the injected attribute on unmount
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterFeature(id);
+    };
+  }, [id, name, description, route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsx(EventopFeatureScopeContext.Provider, {
+    value: id,
+    children: /*#__PURE__*/jsx("span", {
+      ref: wrapperRef,
       style: {
         display: 'contents'
       },
-      children: child
-    });
-  }
-  return /*#__PURE__*/jsx(EventopFeatureScopeContext.Provider, {
-    value: id,
-    children: wrapped
+      children: Children.only(children)
+    })
   });
 }
 
@@ -379,7 +381,7 @@ function EventopStep({
   const registry = useRegistry();
   const featureScope = useFeatureScope();
   const featureId = feature || featureScope;
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
   if (!featureId) {
     console.warn('[Eventop] <EventopStep> needs either a feature prop or an <EventopTarget> ancestor.');
   }
@@ -389,7 +391,14 @@ function EventopStep({
   const dataAttr = `data-evtp-step-${featureId}-${parentStep != null ? `${parentStep}-` : ''}${index}`;
   const selector = `[${dataAttr}]`;
   useEffect(() => {
+    var _wrapperRef$current;
     if (!featureId || index == null) return;
+
+    // Inject attribute directly onto the first real child DOM element
+    const firstChild = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.firstElementChild;
+    if (firstChild) {
+      firstChild.setAttribute(dataAttr, '');
+    }
     registry.registerStep(featureId, index, parentStep ?? null, {
       selector,
       waitFor: waitFor || null,
@@ -398,30 +407,21 @@ function EventopStep({
         ...advanceOn
       } : null
     });
-    return () => registry.unregisterStep(featureId, index, parentStep ?? null);
-  }, [featureId, index, parentStep]);
-  const child = Children.only(children);
-  let wrapped;
-  try {
-    wrapped = /*#__PURE__*/cloneElement(child, {
-      [dataAttr]: '',
-      ref: node => {
-        ref.current = node;
-        const originalRef = child.ref;
-        if (typeof originalRef === 'function') originalRef(node);else if (originalRef && 'current' in originalRef) originalRef.current = node;
-      }
-    });
-  } catch {
-    wrapped = /*#__PURE__*/jsx("span", {
-      [dataAttr]: '',
-      ref: ref,
-      style: {
-        display: 'contents'
-      },
-      children: child
-    });
-  }
-  return wrapped;
+    return () => {
+      var _wrapperRef$current2;
+      const el = (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.firstElementChild;
+      if (el) el.removeAttribute(dataAttr);
+      registry.unregisterStep(featureId, index, parentStep ?? null);
+    };
+  }, [featureId, index, parentStep]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/jsx("span", {
+    ref: wrapperRef,
+    style: {
+      display: 'contents'
+    },
+    children: Children.only(children)
+  });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventop/sdk",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "AI-powered guided tours for any web app. Drop-in, themeable, provider-agnostic.",
   "keywords": [
     "onboarding",