@walkeros/storybook-addon 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';//# sourceMappingURL=index.cjs.map
+'use strict';var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`};exports.EVENTS=r;exports.dataElbArgTypes=t;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
+{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"aA0BO,IAAMA,CAAAA,CAAkB,CAC7B,OAAA,CAAS,CACP,KAAM,eAAA,CACN,WAAA,CAAa,kCACb,OAAA,CAAS,CAAE,KAAM,QAAS,CAAA,CAC1B,MAAO,CACL,QAAA,CAAU,UACZ,CACF,CACF,ECnCO,IAAMC,CAAAA,CAAW,WAIjB,IAAMC,EAAS,CACpB,MAAA,CAAQ,GAAGD,CAAQ,CAAA,OAAA,CAAA,CACnB,QAAS,CAAA,EAAGA,CAAQ,WACpB,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,UAAA,CAAA,CACtB,UAAA,CAAY,CAAA,EAAGA,CAAQ,CAAA,WAAA,CACzB","file":"index.cjs","sourcesContent":["// Import WalkerOS Property types\nimport type { WalkerOS } from '@walkeros/core';\n\nexport interface WalkerOSAddon {\n  autoRefresh: boolean;\n  prefix?: string;\n  highlights?: {\n    context: boolean;\n    entity: boolean;\n    property: boolean;\n    action: boolean;\n  };\n}\n\n// walkerOS tracking interface for clean component APIs\nexport interface DataElb {\n  entity?: string;\n  trigger?: string;\n  action?: string;\n  data?: WalkerOS.Properties;\n  context?: WalkerOS.Properties;\n  globals?: WalkerOS.Properties;\n  link?: Record<string, string>;\n}\n\n// Storybook argTypes for DataElb interface\nexport const dataElbArgTypes = {\n  dataElb: {\n    name: 'walkerOS Data',\n    description: 'walkerOS tracking configuration',\n    control: { type: 'object' },\n    table: {\n      category: 'walkerOS',\n    },\n  },\n};\n","export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  HIGHLIGHT: `${ADDON_ID}/highlight`,\n  LIVE_EVENT: `${ADDON_ID}/live-event`,\n};\n"]}

package/dist/index.d.cts

@@ -3,6 +3,12 @@ import { WalkerOS } from '@walkeros/core';
 interface WalkerOSAddon {
     autoRefresh: boolean;
     prefix?: string;
+    highlights?: {
+        context: boolean;
+        entity: boolean;
+        property: boolean;
+        action: boolean;
+    };
 }
 interface DataElb {
     entity?: string;
@@ -13,5 +19,24 @@ interface DataElb {
     globals?: WalkerOS.Properties;
     link?: Record<string, string>;
 }
+declare const dataElbArgTypes: {
+    dataElb: {
+        name: string;
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+    };
+};
 
-export type { DataElb, WalkerOSAddon };
+declare const EVENTS: {
+    RESULT: string;
+    REQUEST: string;
+    HIGHLIGHT: string;
+    LIVE_EVENT: string;
+};
+
+export { type DataElb, EVENTS, type WalkerOSAddon, dataElbArgTypes };

package/dist/index.d.ts

@@ -3,6 +3,12 @@ import { WalkerOS } from '@walkeros/core';
 interface WalkerOSAddon {
     autoRefresh: boolean;
     prefix?: string;
+    highlights?: {
+        context: boolean;
+        entity: boolean;
+        property: boolean;
+        action: boolean;
+    };
 }
 interface DataElb {
     entity?: string;
@@ -13,5 +19,24 @@ interface DataElb {
     globals?: WalkerOS.Properties;
     link?: Record<string, string>;
 }
+declare const dataElbArgTypes: {
+    dataElb: {
+        name: string;
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+    };
+};
 
-export type { DataElb, WalkerOSAddon };
+declare const EVENTS: {
+    RESULT: string;
+    REQUEST: string;
+    HIGHLIGHT: string;
+    LIVE_EVENT: string;
+};
+
+export { type DataElb, EVENTS, type WalkerOSAddon, dataElbArgTypes };

package/dist/index.js

@@ -1,2 +1,2 @@
-//# sourceMappingURL=index.js.map
+var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`};export{r as EVENTS,t as dataElbArgTypes};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"AA0BO,IAAMA,CAAAA,CAAkB,CAC7B,OAAA,CAAS,CACP,KAAM,eAAA,CACN,WAAA,CAAa,kCACb,OAAA,CAAS,CAAE,KAAM,QAAS,CAAA,CAC1B,MAAO,CACL,QAAA,CAAU,UACZ,CACF,CACF,ECnCO,IAAMC,CAAAA,CAAW,WAIjB,IAAMC,EAAS,CACpB,MAAA,CAAQ,GAAGD,CAAQ,CAAA,OAAA,CAAA,CACnB,QAAS,CAAA,EAAGA,CAAQ,WACpB,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,UAAA,CAAA,CACtB,UAAA,CAAY,CAAA,EAAGA,CAAQ,CAAA,WAAA,CACzB","file":"index.js","sourcesContent":["// Import WalkerOS Property types\nimport type { WalkerOS } from '@walkeros/core';\n\nexport interface WalkerOSAddon {\n  autoRefresh: boolean;\n  prefix?: string;\n  highlights?: {\n    context: boolean;\n    entity: boolean;\n    property: boolean;\n    action: boolean;\n  };\n}\n\n// walkerOS tracking interface for clean component APIs\nexport interface DataElb {\n  entity?: string;\n  trigger?: string;\n  action?: string;\n  data?: WalkerOS.Properties;\n  context?: WalkerOS.Properties;\n  globals?: WalkerOS.Properties;\n  link?: Record<string, string>;\n}\n\n// Storybook argTypes for DataElb interface\nexport const dataElbArgTypes = {\n  dataElb: {\n    name: 'walkerOS Data',\n    description: 'walkerOS tracking configuration',\n    control: { type: 'object' },\n    table: {\n      category: 'walkerOS',\n    },\n  },\n};\n","export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  HIGHLIGHT: `${ADDON_ID}/highlight`,\n  LIVE_EVENT: `${ADDON_ID}/live-event`,\n};\n"]}

package/dist/manager.js

@@ -1,2 +1,2 @@
-import o,{memo,useState,useCallback,useEffect,Fragment}from'react';import {useStorybookApi,useGlobals,useChannel,addons,types}from'storybook/manager-api';import {AddonPanel,TabsState,Placeholder,Button,SyntaxHighlighter,Form}from'storybook/internal/components';import {styled,useTheme}from'storybook/theming';import {CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED}from'storybook/internal/core-events';import {ArrowDownIcon}from'@storybook/icons';var a="walkerOS",E=`${a}/panel`;var c={RESULT:`${a}/result`,REQUEST:`${a}/request`};var I=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),w=styled.div(({theme:e})=>({display:"flex",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,"&:hover":{background:e.background.hoverable}})),N=styled(ArrowDownIcon)(({theme:e})=>({height:10,width:10,minWidth:10,color:e.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),_=styled.div(({theme:e})=>({padding:e.layoutMargin,paddingLeft:e.layoutMargin-3,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%","&:focus":{outline:"0 none",borderLeft:`3px solid ${e.color.secondary}`}})),W=styled.div(({theme:e})=>({padding:e.layoutMargin,background:e.background.content,fontFamily:e.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),$=({item:e})=>{let[r,l]=useState(true);return o.createElement(Fragment,null,o.createElement(w,null,o.createElement(_,{onClick:()=>l(!r),role:"button"},o.createElement(N,{style:{transform:`rotate(${r?0:-90}deg)`}}),e.title)),r?o.createElement(W,null,e.content):null)},S=({items:e})=>o.createElement(I,null,e.map((r,l)=>o.createElement($,{key:l,item:r})));var v=memo(function(r){let l=useTheme(),f=useStorybookApi(),[A,P]=useGlobals(),n={...{autoRefresh:true,prefix:"data-elb"},...A[a]},[m,L]=useState([]),g=(t,i)=>{let C={...n,[t]:i};P({[a]:C});},h=useChannel({[c.RESULT]:t=>{L(t);}}),d=useCallback(()=>{h(c.REQUEST,n);},[n,h]);useEffect(()=>{n.autoRefresh&&d();},[]),useEffect(()=>{if(!n.autoRefresh)return;let t=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED];return t.forEach(i=>f.on(i,d)),()=>t.forEach(i=>f.off(i,d))},[f,d,n.autoRefresh]);let T=t=>{let i=t.length==1?"Event":"Events";return `${t.length} ${i}`};return o.createElement(AddonPanel,{...r},o.createElement(TabsState,{initial:"events",backgroundColor:l.background.hoverable},o.createElement("div",{id:"events",title:T(m)},o.createElement(Placeholder,null,o.createElement(Fragment,null,o.createElement(Button,{onClick:d},"Update events")),m.length>0?o.createElement(S,{items:m.map((t,i)=>({title:`#${i+1} ${t.entity} ${t.action}`,content:o.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(t,null,2))}))}):o.createElement("p",null,"No events yet"))),o.createElement("div",{id:"config",title:"Config"},o.createElement(Placeholder,null,o.createElement(Fragment,null,o.createElement(Form.Field,{label:"Auto-refresh"},o.createElement("input",{type:"checkbox",id:"autoRefresh",checked:n.autoRefresh,onChange:t=>g("autoRefresh",t.target.checked)})),o.createElement(Form.Field,{label:"Prefix"},o.createElement(Form.Input,{name:"Prefix",value:n.prefix,placeholder:n.prefix,onChange:t=>g("prefix",t.target.value),size:"flex"})))))))});addons.register(a,e=>{addons.add(E,{type:types.PANEL,title:a,match:({viewMode:r})=>r==="story",render:({active:r})=>o.createElement(v,{active:!!r})});});//# sourceMappingURL=manager.js.map
+import e,{memo,useState,Fragment,useCallback,useEffect}from'react';import {useStorybookApi,useGlobals,useChannel,addons,types}from'storybook/manager-api';import {AddonPanel,TabsState,Placeholder,Button,SyntaxHighlighter,Form}from'storybook/internal/components';import {styled,useTheme}from'storybook/theming';import {CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED}from'storybook/internal/core-events';import {ArrowDownIcon}from'@storybook/icons';var a="walkerOS",F=`${a}/panel`;var S={RESULT:`${a}/result`,REQUEST:`${a}/request`,HIGHLIGHT:`${a}/highlight`,LIVE_EVENT:`${a}/live-event`};var K=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),X=styled.div(({theme:t})=>({display:"flex",width:"100%",borderBottom:`1px solid ${t.appBorderColor}`,"&:hover":{background:t.background.hoverable}})),Z=styled(ArrowDownIcon)(({theme:t})=>({height:10,width:10,minWidth:10,color:t.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),R=styled.div(({theme:t})=>({padding:"6px 12px",paddingLeft:9,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis","&:focus":{outline:"0 none",borderLeft:`3px solid ${t.color.secondary}`},"& .event-base":{color:"inherit",fontWeight:"500"},"& .event-separator":{color:t.color.mediumdark,fontWeight:"300"},"& .event-preview":{color:t.color.mediumdark,fontWeight:"400"}})),tt=styled.div(({theme:t})=>({padding:t.layoutMargin,background:t.background.content,fontFamily:t.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),et=memo(({item:t})=>{let[i,n]=useState(false);return e.createElement(Fragment,null,e.createElement(X,null,e.createElement(R,{onClick:()=>n(!i),role:"button"},e.createElement(Z,{style:{transform:`rotate(${i?0:-90}deg)`}}),t.title)),i?e.createElement(tt,null,t.content):null)}),W=memo(({items:t})=>e.createElement(K,null,t.map((i,n)=>e.createElement(et,{key:`${i.title}-${n}`,item:i}))));var L=({config:t,toggleHighlight:i})=>{var p,o,d,g,s,c,w,h,k,v,b,u,m,C,O,$;let n=useTheme();return e.createElement("div",{style:{display:"flex",gap:"4px",alignItems:"center"}},e.createElement("span",{style:{fontSize:"12px",color:n.color.mediumdark,marginRight:"8px"}},"Highlight:"),e.createElement(Button,{size:"small",variant:(p=t.highlights)!=null&&p.context?"solid":"outline",onClick:()=>i("context"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(o=t.highlights)!=null&&o.context?"#ffbd44cc":"transparent",color:(d=t.highlights)!=null&&d.context?"#000":n.color.mediumdark,border:`1px solid ${(g=t.highlights)!=null&&g.context?"#ffbd44":n.color.border}`}},"Context"),e.createElement(Button,{size:"small",variant:(s=t.highlights)!=null&&s.entity?"solid":"outline",onClick:()=>i("entity"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(c=t.highlights)!=null&&c.entity?"#00ca4ecc":"transparent",color:(w=t.highlights)!=null&&w.entity?"#fff":n.color.mediumdark,border:`1px solid ${(h=t.highlights)!=null&&h.entity?"#00ca4e":n.color.border}`}},"Entity"),e.createElement(Button,{size:"small",variant:(k=t.highlights)!=null&&k.property?"solid":"outline",onClick:()=>i("property"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(v=t.highlights)!=null&&v.property?"#ff605ccc":"transparent",color:(b=t.highlights)!=null&&b.property?"#fff":n.color.mediumdark,border:`1px solid ${(u=t.highlights)!=null&&u.property?"#ff605c":n.color.border}`}},"Property"),e.createElement(Button,{size:"small",variant:(m=t.highlights)!=null&&m.action?"solid":"outline",onClick:()=>i("action"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(C=t.highlights)!=null&&C.action?"#9900ffcc":"transparent",color:(O=t.highlights)!=null&&O.action?"#fff":n.color.mediumdark,border:`1px solid ${($=t.highlights)!=null&&$.action?"#9900ff":n.color.border}`}},"Action"))};function z(t){let i=[],n=o=>o==null?"null":typeof o=="string"?`"${o}"`:Array.isArray(o)?`[${o.map(g=>typeof g=="string"?`"${g}"`:String(g)).join(", ")}]`:typeof o=="object"?"{...}":String(o),p=(o,d)=>{if(!o||typeof o!="object"||o===null||Object.keys(o).length===0)return null;let g=Object.entries(o).map(([s,c])=>`${s}: ${n(c)}`).join(", ");return `${d}: { ${g} }`};if(t.data){let o=p(t.data,"data");o&&i.push(o);}if(t.context){let o=p(t.context,"context");o&&i.push(o);}return i.join("; ")}function P(t,i){let n=z(t),p=`#${i+1}`,o=`${t.entity} ${t.action}`,d=`${p} ${o}`;return n?e.createElement(e.Fragment,null,e.createElement("span",{className:"event-base"},d),e.createElement("span",{className:"event-separator"}," - "),e.createElement("span",{className:"event-preview"},n)):e.createElement("span",{className:"event-base"},d)}var Y=memo(function(i){var H;let n=useTheme(),p=useStorybookApi(),[o,d]=useGlobals(),g={autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}},s={...g,...o[a],highlights:{...g.highlights,...((H=o[a])==null?void 0:H.highlights)||{}}},[c,w]=useState([]),[h,k]=useState([]),v=(r,l)=>{let T={...s,[r]:l};d({[a]:T});},b=r=>{var B;let l={...s.highlights,[r]:!((B=s.highlights)!=null&&B[r])},T={...s,highlights:l};d({[a]:T}),u(S.HIGHLIGHT,T);},u=useChannel({[S.RESULT]:r=>{w(r);},[S.LIVE_EVENT]:r=>{k(l=>[{...r,timestamp:Date.now()}].concat(l).slice(0,50));}}),m=useCallback(()=>{u(S.REQUEST,s);},[s,u]);useEffect(()=>{s.autoRefresh&&m();},[]),useEffect(()=>{if(!s.autoRefresh)return;let r=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED];return r.forEach(l=>p.on(l,m)),()=>r.forEach(l=>p.off(l,m))},[p,m,s.autoRefresh]);let C=r=>{let l=r.length==1?"Event":"Events";return `${r.length} ${l}`},O=()=>{let r=h.length==1?"Event":"Events";return `${h.length} Live ${r}`},$=()=>{k([]);};return e.createElement(AddonPanel,{...i},e.createElement(TabsState,{initial:"live",backgroundColor:n.background.hoverable},e.createElement("div",{id:"events",title:C(c)},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:n.background.app,borderRadius:"4px",border:`1px solid ${n.color.border}`}},e.createElement(Button,{onClick:m},"Update events"),e.createElement(L,{config:s,toggleHighlight:b}))),c.length>0?e.createElement(W,{items:c.map((r,l)=>({title:P(r,l),content:e.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(r,null,2))}))}):e.createElement("p",null,"No events yet"))),e.createElement("div",{id:"live",title:O()},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:n.background.app,borderRadius:"4px",border:`1px solid ${n.color.border}`}},e.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center"}},e.createElement(Button,{size:"small",onClick:$},"Clear Events")),e.createElement(L,{config:s,toggleHighlight:b}))),h.length>0?e.createElement(W,{items:h.map((r,l)=>({title:P(r,h.length-l-1),content:e.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(r,null,2))}))}):e.createElement("p",{style:{textAlign:"center",color:n.color.mediumdark,padding:"20px"}},"Waiting for live events...",e.createElement("br",null),e.createElement("small",null,"Interact with components to see events appear here in real-time")))),e.createElement("div",{id:"config",title:"Config"},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement(Form.Field,{label:"Auto-refresh"},e.createElement("input",{type:"checkbox",id:"autoRefresh",checked:s.autoRefresh,onChange:r=>v("autoRefresh",r.target.checked)})),e.createElement(Form.Field,{label:"Prefix"},e.createElement(Form.Input,{name:"Prefix",value:s.prefix,placeholder:s.prefix,onChange:r=>v("prefix",r.target.value),size:"flex"})))))))});addons.register(a,t=>{addons.add(F,{type:types.PANEL,title:a,match:({viewMode:i})=>i==="story",render:({active:i})=>e.createElement(Y,{active:!!i})});});//# sourceMappingURL=manager.js.map
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/components/List.tsx","../src/components/Panel.tsx","../src/manager.tsx"],"names":["ADDON_ID","PANEL_ID","EVENTS","ListWrapper","styled","Wrapper","theme","Icon","ArrowDownIcon","HeaderBar","Description","ListItem","item","isOpen","onToggle","useState","React","Fragment","List","items","idx","Panel","memo","props","useTheme","api","useStorybookApi","globals","updateGlobals","useGlobals","config","events","setState","updateConfig","key","value","newConfig","emit","useChannel","newEvents","updateEvents","useCallback","useEffect","storyEvents","CURRENT_STORY_WAS_SET","SELECT_STORY","STORY_RENDERED","STORY_ARGS_UPDATED","event","getEventTitle","form","AddonPanel","TabsState","Placeholder","Button","index","SyntaxHighlighter","Form","e","addons","types","viewMode","active"],"mappings":"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","file":"manager.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n};\n","import { ArrowDownIcon } from '@storybook/icons';\nimport React, { Fragment, useState } from 'react';\nimport { styled } from 'storybook/theming';\n\ntype Item = {\n  title: string;\n  content: string | React.ReactNode;\n};\n\ninterface ListItemProps {\n  item: Item;\n}\n\ninterface ListProps {\n  items: Item[];\n}\n\nconst ListWrapper = styled.ul({\n  listStyle: 'none',\n  fontSize: 14,\n  padding: 0,\n  margin: 0,\n});\n\nconst Wrapper = styled.div(({ theme }) => ({\n  display: 'flex',\n  width: '100%',\n  borderBottom: `1px solid ${theme.appBorderColor}`,\n  '&:hover': {\n    background: theme.background.hoverable,\n  },\n}));\n\nconst Icon = styled(ArrowDownIcon)(({ theme }) => ({\n  height: 10,\n  width: 10,\n  minWidth: 10,\n  color: theme.color.mediumdark,\n  marginRight: 10,\n  transition: 'transform 0.1s ease-in-out',\n  alignSelf: 'center',\n  display: 'inline-flex',\n}));\n\nconst HeaderBar = styled.div(({ theme }) => ({\n  padding: theme.layoutMargin,\n  paddingLeft: theme.layoutMargin - 3,\n  background: 'none',\n  color: 'inherit',\n  textAlign: 'left',\n  cursor: 'pointer',\n  borderLeft: '3px solid transparent',\n  width: '100%',\n\n  '&:focus': {\n    outline: '0 none',\n    borderLeft: `3px solid ${theme.color.secondary}`,\n  },\n}));\n\nconst Description = styled.div(({ theme }) => ({\n  padding: theme.layoutMargin,\n  background: theme.background.content,\n  fontFamily: theme.typography.fonts.mono,\n  whiteSpace: 'pre-wrap',\n  textAlign: 'left',\n}));\n\nexport const ListItem: React.FC<ListItemProps> = ({ item }) => {\n  const [isOpen, onToggle] = useState(true);\n\n  return (\n    <Fragment>\n      <Wrapper>\n        <HeaderBar onClick={() => onToggle(!isOpen)} role=\"button\">\n          <Icon\n            style={{\n              transform: `rotate(${isOpen ? 0 : -90}deg)`,\n            }}\n          />\n          {item.title}\n        </HeaderBar>\n      </Wrapper>\n      {isOpen ? <Description>{item.content}</Description> : null}\n    </Fragment>\n  );\n};\n\nexport const List: React.FC<ListProps> = ({ items }) => (\n  <ListWrapper>\n    {items.map((item, idx) => (\n      <ListItem key={idx} item={item}></ListItem>\n    ))}\n  </ListWrapper>\n);\n","import type { WalkerOSAddon } from 'src/types';\nimport type { Events } from '@walkeros/web-source-browser';\nimport React, { Fragment, memo, useCallback, useEffect, useState } from 'react';\nimport {\n  AddonPanel,\n  Placeholder,\n  TabsState,\n  SyntaxHighlighter,\n  Button,\n  Form,\n} from 'storybook/internal/components';\nimport { useChannel, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport { useTheme } from 'storybook/theming';\nimport {\n  STORY_ARGS_UPDATED,\n  CURRENT_STORY_WAS_SET,\n  SELECT_STORY,\n  STORY_RENDERED,\n} from 'storybook/internal/core-events';\n\nimport { ADDON_ID, EVENTS } from '../constants';\nimport { List } from './List';\n\ninterface PanelProps {\n  active: boolean;\n  walkerOSAddon: WalkerOSAddon;\n}\n\nexport const Panel: React.FC<PanelProps> = memo(function MyPanel(props) {\n  const theme = useTheme();\n  const api = useStorybookApi();\n\n  const [globals, updateGlobals] = useGlobals();\n\n  const defaultConfig: WalkerOSAddon = {\n    autoRefresh: true,\n    prefix: 'data-elb',\n  };\n  const config = {\n    ...defaultConfig,\n    ...globals[ADDON_ID],\n  } as WalkerOSAddon;\n\n  const [events, setState] = useState<Events>([]);\n\n  const updateConfig = (key: keyof WalkerOSAddon, value: unknown) => {\n    const newConfig = { ...config, [key]: value };\n    updateGlobals({ [ADDON_ID]: newConfig });\n  };\n\n  // https://storybook.js.org/docs/react/addons/addons-api#usechannel\n  const emit = useChannel({\n    [EVENTS.RESULT]: (newEvents: Events) => {\n      setState(newEvents);\n    },\n  });\n\n  const updateEvents = useCallback(() => {\n    emit(EVENTS.REQUEST, config);\n  }, [config, emit]);\n\n  // Initial auto-refresh on page load\n  useEffect(() => {\n    if (config.autoRefresh) {\n      updateEvents();\n    }\n  }, []); // Only run once on mount\n\n  // Auto-refresh on story navigation and args updates\n  useEffect(() => {\n    if (!config.autoRefresh) return;\n\n    // Events to listen for\n    const storyEvents = [\n      CURRENT_STORY_WAS_SET,\n      SELECT_STORY,\n      STORY_RENDERED,\n      STORY_ARGS_UPDATED,\n    ];\n\n    // Listen for story navigation and control changes\n    storyEvents.forEach((event) => api.on(event, updateEvents));\n    // Cleanup listeners on unmount\n    return () => storyEvents.forEach((event) => api.off(event, updateEvents));\n  }, [api, updateEvents, config.autoRefresh]);\n\n  const getEventTitle = (events: Events) => {\n    const form = events.length == 1 ? 'Event' : 'Events';\n    return `${events.length} ${form}`;\n  };\n\n  return (\n    <AddonPanel {...props}>\n      <TabsState\n        initial=\"events\"\n        backgroundColor={theme.background.hoverable as string}\n      >\n        <div id=\"events\" title={getEventTitle(events)}>\n          <Placeholder>\n            <Fragment>\n              <Button onClick={updateEvents}>Update events</Button>\n            </Fragment>\n            {events.length > 0 ? (\n              <List\n                items={events.map((item, index) => ({\n                  title: `#${index + 1} ${item.entity} ${item.action}`,\n                  content: (\n                    <SyntaxHighlighter\n                      language=\"json\"\n                      copyable={true}\n                      bordered={true}\n                      padded={true}\n                    >\n                      {JSON.stringify(item, null, 2)}\n                    </SyntaxHighlighter>\n                  ),\n                }))}\n              />\n            ) : (\n              <p>No events yet</p>\n            )}\n          </Placeholder>\n        </div>\n        <div id=\"config\" title=\"Config\">\n          <Placeholder>\n            <Fragment>\n              <Form.Field label=\"Auto-refresh\">\n                <input\n                  type=\"checkbox\"\n                  id=\"autoRefresh\"\n                  checked={config.autoRefresh}\n                  onChange={(e) =>\n                    updateConfig('autoRefresh', e.target.checked)\n                  }\n                />\n              </Form.Field>\n              <Form.Field label=\"Prefix\">\n                <Form.Input\n                  name=\"Prefix\"\n                  value={config.prefix}\n                  placeholder={config.prefix}\n                  onChange={(e) =>\n                    updateConfig('prefix', (e.target as HTMLInputElement).value)\n                  }\n                  size=\"flex\"\n                />\n              </Form.Field>\n            </Fragment>\n          </Placeholder>\n        </div>\n      </TabsState>\n    </AddonPanel>\n  );\n});\n","import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\n\nimport { Panel } from './components/Panel';\nimport { ADDON_ID, PANEL_ID } from './constants';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `manager.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/manager.tsx\",\n */\n\naddons.register(ADDON_ID, (api) => {\n  addons.add(PANEL_ID, {\n    type: types.PANEL,\n    title: ADDON_ID,\n    match: ({ viewMode }) => viewMode === 'story',\n    render: ({ active }) => <Panel active={!!active} />,\n  });\n});\n"]}
+{"version":3,"sources":["../src/constants.ts","../src/components/List.tsx","../src/components/HighlightButtons.tsx","../src/utils/eventPreview.ts","../src/utils/formatEventTitle.tsx","../src/components/Panel.tsx","../src/manager.tsx"],"names":["ADDON_ID","PANEL_ID","EVENTS","ListWrapper","styled","Wrapper","theme","Icon","ArrowDownIcon","HeaderBar","Description","ListItem","memo","item","isOpen","onToggle","useState","React","Fragment","List","items","idx","HighlightButtons","config","toggleHighlight","_a","_b","_c","_d","_e","_f","_g","_h","_i","_j","_k","_l","_m","_n","_o","_p","useTheme","Button","createEventDataPreview","event","sections","formatValue","value","v","formatSection","obj","sectionName","entries","key","dataSection","contextSection","formatEventTitle","index","dataPreview","eventNumber","eventName","baseTitle","Panel","props","api","useStorybookApi","globals","updateGlobals","useGlobals","defaultConfig","events","setState","liveEvents","setLiveEvents","updateConfig","newConfig","type","newHighlights","emit","useChannel","newEvents","prev","updateEvents","useCallback","useEffect","storyEvents","CURRENT_STORY_WAS_SET","SELECT_STORY","STORY_RENDERED","STORY_ARGS_UPDATED","getEventTitle","form","getLiveEventTitle","clearLiveEvents","AddonPanel","TabsState","Placeholder","SyntaxHighlighter","Form","e","addons","types","viewMode","active"],"mappings":"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","file":"manager.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  HIGHLIGHT: `${ADDON_ID}/highlight`,\n  LIVE_EVENT: `${ADDON_ID}/live-event`,\n};\n","import { ArrowDownIcon } from '@storybook/icons';\nimport React, { Fragment, useState, memo } from 'react';\nimport { styled } from 'storybook/theming';\n\ntype Item = {\n  title: string | React.ReactNode;\n  content: string | React.ReactNode;\n};\n\ninterface ListItemProps {\n  item: Item;\n}\n\ninterface ListProps {\n  items: Item[];\n}\n\nconst ListWrapper = styled.ul({\n  listStyle: 'none',\n  fontSize: 14,\n  padding: 0,\n  margin: 0,\n});\n\nconst Wrapper = styled.div(({ theme }) => ({\n  display: 'flex',\n  width: '100%',\n  borderBottom: `1px solid ${theme.appBorderColor}`,\n  '&:hover': {\n    background: theme.background.hoverable,\n  },\n}));\n\nconst Icon = styled(ArrowDownIcon)(({ theme }) => ({\n  height: 10,\n  width: 10,\n  minWidth: 10,\n  color: theme.color.mediumdark,\n  marginRight: 10,\n  transition: 'transform 0.1s ease-in-out',\n  alignSelf: 'center',\n  display: 'inline-flex',\n}));\n\nconst HeaderBar = styled.div(({ theme }) => ({\n  padding: '6px 12px',\n  paddingLeft: 9,\n  background: 'none',\n  color: 'inherit',\n  textAlign: 'left',\n  cursor: 'pointer',\n  borderLeft: '3px solid transparent',\n  width: '100%',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n\n  '&:focus': {\n    outline: '0 none',\n    borderLeft: `3px solid ${theme.color.secondary}`,\n  },\n\n  '& .event-base': {\n    color: 'inherit',\n    fontWeight: '500',\n  },\n\n  '& .event-separator': {\n    color: theme.color.mediumdark,\n    fontWeight: '300',\n  },\n\n  '& .event-preview': {\n    color: theme.color.mediumdark,\n    fontWeight: '400',\n  },\n}));\n\nconst Description = styled.div(({ theme }) => ({\n  padding: theme.layoutMargin,\n  background: theme.background.content,\n  fontFamily: theme.typography.fonts.mono,\n  whiteSpace: 'pre-wrap',\n  textAlign: 'left',\n}));\n\nexport const ListItem: React.FC<ListItemProps> = memo(({ item }) => {\n  const [isOpen, onToggle] = useState(false);\n\n  return (\n    <Fragment>\n      <Wrapper>\n        <HeaderBar onClick={() => onToggle(!isOpen)} role=\"button\">\n          <Icon\n            style={{\n              transform: `rotate(${isOpen ? 0 : -90}deg)`,\n            }}\n          />\n          {item.title}\n        </HeaderBar>\n      </Wrapper>\n      {isOpen ? <Description>{item.content}</Description> : null}\n    </Fragment>\n  );\n});\n\nexport const List: React.FC<ListProps> = memo(({ items }) => (\n  <ListWrapper>\n    {items.map((item, idx) => (\n      <ListItem key={`${item.title}-${idx}`} item={item}></ListItem>\n    ))}\n  </ListWrapper>\n));\n","import type { WalkerOSAddon } from '../types';\nimport React from 'react';\nimport { Button } from 'storybook/internal/components';\nimport { useTheme } from 'storybook/theming';\n\ninterface HighlightButtonsProps {\n  config: WalkerOSAddon;\n  toggleHighlight: (type: keyof WalkerOSAddon['highlights']) => void;\n}\n\nexport const HighlightButtons: React.FC<HighlightButtonsProps> = ({\n  config,\n  toggleHighlight,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: '4px',\n        alignItems: 'center',\n      }}\n    >\n      <span\n        style={{\n          fontSize: '12px',\n          color: theme.color.mediumdark,\n          marginRight: '8px',\n        }}\n      >\n        Highlight:\n      </span>\n      <Button\n        size=\"small\"\n        variant={config.highlights?.context ? 'solid' : 'outline'}\n        onClick={() => toggleHighlight('context')}\n        style={{\n          fontSize: '11px',\n          padding: '4px 8px',\n          backgroundColor: config.highlights?.context\n            ? '#ffbd44cc'\n            : 'transparent',\n          color: config.highlights?.context ? '#000' : theme.color.mediumdark,\n          border: `1px solid ${config.highlights?.context ? '#ffbd44' : theme.color.border}`,\n        }}\n      >\n        Context\n      </Button>\n      <Button\n        size=\"small\"\n        variant={config.highlights?.entity ? 'solid' : 'outline'}\n        onClick={() => toggleHighlight('entity')}\n        style={{\n          fontSize: '11px',\n          padding: '4px 8px',\n          backgroundColor: config.highlights?.entity\n            ? '#00ca4ecc'\n            : 'transparent',\n          color: config.highlights?.entity ? '#fff' : theme.color.mediumdark,\n          border: `1px solid ${config.highlights?.entity ? '#00ca4e' : theme.color.border}`,\n        }}\n      >\n        Entity\n      </Button>\n      <Button\n        size=\"small\"\n        variant={config.highlights?.property ? 'solid' : 'outline'}\n        onClick={() => toggleHighlight('property')}\n        style={{\n          fontSize: '11px',\n          padding: '4px 8px',\n          backgroundColor: config.highlights?.property\n            ? '#ff605ccc'\n            : 'transparent',\n          color: config.highlights?.property ? '#fff' : theme.color.mediumdark,\n          border: `1px solid ${config.highlights?.property ? '#ff605c' : theme.color.border}`,\n        }}\n      >\n        Property\n      </Button>\n      <Button\n        size=\"small\"\n        variant={config.highlights?.action ? 'solid' : 'outline'}\n        onClick={() => toggleHighlight('action')}\n        style={{\n          fontSize: '11px',\n          padding: '4px 8px',\n          backgroundColor: config.highlights?.action\n            ? '#9900ffcc'\n            : 'transparent',\n          color: config.highlights?.action ? '#fff' : theme.color.mediumdark,\n          border: `1px solid ${config.highlights?.action ? '#9900ff' : theme.color.border}`,\n        }}\n      >\n        Action\n      </Button>\n    </div>\n  );\n};\n","import type { WalkerOS } from '@walkeros/core';\n\n/**\n * Creates a formatted data preview from a walkerOS event\n * Shows data and context properties in JSON-like syntax\n */\nexport function createEventDataPreview(event: WalkerOS.Event): string {\n  const sections: string[] = [];\n\n  // Helper to format value\n  const formatValue = (value: unknown): string => {\n    if (value === null || value === undefined) {\n      return 'null';\n    }\n    if (typeof value === 'string') {\n      return `\"${value}\"`;\n    }\n    if (Array.isArray(value)) {\n      const items = value\n        .map((v) => (typeof v === 'string' ? `\"${v}\"` : String(v)))\n        .join(', ');\n      return `[${items}]`;\n    }\n    if (typeof value === 'object') {\n      return '{...}';\n    }\n    return String(value);\n  };\n\n  // Helper to format a section (data or context)\n  const formatSection = (obj: unknown, sectionName: string): string | null => {\n    if (\n      !obj ||\n      typeof obj !== 'object' ||\n      obj === null ||\n      Object.keys(obj as Record<string, unknown>).length === 0\n    ) {\n      return null;\n    }\n\n    const entries = Object.entries(obj as Record<string, unknown>)\n      .map(([key, value]) => `${key}: ${formatValue(value)}`)\n      .join(', ');\n\n    return `${sectionName}: { ${entries} }`;\n  };\n\n  // Process data section first\n  if (event.data) {\n    const dataSection = formatSection(event.data, 'data');\n    if (dataSection) {\n      sections.push(dataSection);\n    }\n  }\n\n  // Process context section second\n  if (event.context) {\n    const contextSection = formatSection(event.context, 'context');\n    if (contextSection) {\n      sections.push(contextSection);\n    }\n  }\n\n  return sections.join('; ');\n}\n","import React from 'react';\nimport type { WalkerOS } from '@walkeros/core';\nimport { createEventDataPreview } from './eventPreview';\n\n/**\n * Formats an event title with consistent styling across Events and Live Events tabs\n */\nexport function formatEventTitle(\n  event: WalkerOS.Event,\n  index: number,\n): React.ReactNode {\n  const dataPreview = createEventDataPreview(event);\n\n  // Build base title components\n  const eventNumber = `#${index + 1}`;\n  const eventName = `${event.entity} ${event.action}`;\n\n  // Construct base title\n  const baseTitle = `${eventNumber} ${eventName}`;\n\n  // Return styled JSX\n  if (!dataPreview) {\n    return <span className=\"event-base\">{baseTitle}</span>;\n  }\n\n  return (\n    <>\n      <span className=\"event-base\">{baseTitle}</span>\n      <span className=\"event-separator\"> - </span>\n      <span className=\"event-preview\">{dataPreview}</span>\n    </>\n  );\n}\n","import type { WalkerOSAddon } from '../types';\nimport type { Walker } from '@walkeros/web-core';\nimport type { WalkerOS } from '@walkeros/core';\nimport React, { Fragment, memo, useCallback, useEffect, useState } from 'react';\nimport {\n  AddonPanel,\n  Placeholder,\n  TabsState,\n  SyntaxHighlighter,\n  Button,\n  Form,\n} from 'storybook/internal/components';\nimport { useChannel, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport { useTheme } from 'storybook/theming';\nimport {\n  STORY_ARGS_UPDATED,\n  CURRENT_STORY_WAS_SET,\n  SELECT_STORY,\n  STORY_RENDERED,\n} from 'storybook/internal/core-events';\n\nimport { ADDON_ID, EVENTS } from '../constants';\nimport { List } from './List';\nimport { HighlightButtons } from './HighlightButtons';\nimport { formatEventTitle } from '../utils/formatEventTitle';\n\ninterface PanelProps {\n  active: boolean;\n  walkerOSAddon: WalkerOSAddon;\n}\n\nexport const Panel: React.FC<PanelProps> = memo(function MyPanel(props) {\n  const theme = useTheme();\n  const api = useStorybookApi();\n\n  const [globals, updateGlobals] = useGlobals();\n\n  const defaultConfig: WalkerOSAddon = {\n    autoRefresh: true,\n    prefix: 'data-elb',\n    highlights: {\n      context: false,\n      entity: false,\n      property: false,\n      action: false,\n    },\n  };\n  const config = {\n    ...defaultConfig,\n    ...globals[ADDON_ID],\n    highlights: {\n      ...defaultConfig.highlights,\n      ...(globals[ADDON_ID]?.highlights || {}),\n    },\n  } as WalkerOSAddon;\n\n  const [events, setState] = useState<Walker.Events>([]);\n  const [liveEvents, setLiveEvents] = useState<WalkerOS.Event[]>([]);\n\n  const updateConfig = (key: keyof WalkerOSAddon, value: unknown) => {\n    const newConfig = { ...config, [key]: value };\n    updateGlobals({ [ADDON_ID]: newConfig });\n  };\n\n  const toggleHighlight = (type: keyof WalkerOSAddon['highlights']) => {\n    const newHighlights = {\n      ...config.highlights,\n      [type]: !config.highlights?.[type],\n    };\n    const newConfig = { ...config, highlights: newHighlights };\n    updateGlobals({ [ADDON_ID]: newConfig });\n\n    // Send highlighting update to preview\n    emit(EVENTS.HIGHLIGHT, newConfig);\n  };\n\n  // https://storybook.js.org/docs/react/addons/addons-api#usechannel\n  const emit = useChannel({\n    [EVENTS.RESULT]: (newEvents: Walker.Events) => {\n      setState(newEvents);\n    },\n    [EVENTS.LIVE_EVENT]: (event: WalkerOS.Event) => {\n      setLiveEvents((prev) =>\n        [{ ...event, timestamp: Date.now() }].concat(prev).slice(0, 50),\n      );\n    },\n  });\n\n  const updateEvents = useCallback(() => {\n    emit(EVENTS.REQUEST, config);\n  }, [config, emit]);\n\n  // Initial auto-refresh on page load\n  useEffect(() => {\n    if (config.autoRefresh) {\n      updateEvents();\n    }\n  }, []); // Only run once on mount\n\n  // Auto-refresh on story navigation and args updates\n  useEffect(() => {\n    if (!config.autoRefresh) return;\n\n    // Events to listen for\n    const storyEvents = [\n      CURRENT_STORY_WAS_SET,\n      SELECT_STORY,\n      STORY_RENDERED,\n      STORY_ARGS_UPDATED,\n    ];\n\n    // Listen for story navigation and control changes\n    storyEvents.forEach((event) => api.on(event, updateEvents));\n    // Cleanup listeners on unmount\n    return () => storyEvents.forEach((event) => api.off(event, updateEvents));\n  }, [api, updateEvents, config.autoRefresh]);\n\n  const getEventTitle = (events: Walker.Events) => {\n    const form = events.length == 1 ? 'Event' : 'Events';\n    return `${events.length} ${form}`;\n  };\n\n  const getLiveEventTitle = () => {\n    const form = liveEvents.length == 1 ? 'Event' : 'Events';\n    return `${liveEvents.length} Live ${form}`;\n  };\n\n  const clearLiveEvents = () => {\n    setLiveEvents([]);\n  };\n\n  const formatTime = (timestamp: number) => {\n    return new Date(timestamp).toLocaleTimeString();\n  };\n\n  return (\n    <AddonPanel {...props}>\n      <TabsState\n        initial=\"live\"\n        backgroundColor={theme.background.hoverable as string}\n      >\n        <div id=\"events\" title={getEventTitle(events)}>\n          <Placeholder>\n            <Fragment>\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  marginBottom: '12px',\n                  padding: '8px',\n                  backgroundColor: theme.background.app,\n                  borderRadius: '4px',\n                  border: `1px solid ${theme.color.border}`,\n                }}\n              >\n                <Button onClick={updateEvents}>Update events</Button>\n                <HighlightButtons\n                  config={config}\n                  toggleHighlight={toggleHighlight}\n                />\n              </div>\n            </Fragment>\n            {events.length > 0 ? (\n              <List\n                items={events.map((item, index) => {\n                  return {\n                    title: formatEventTitle(item, index),\n                    content: (\n                      <SyntaxHighlighter\n                        language=\"json\"\n                        copyable={true}\n                        bordered={true}\n                        padded={true}\n                      >\n                        {JSON.stringify(item, null, 2)}\n                      </SyntaxHighlighter>\n                    ),\n                  };\n                })}\n              />\n            ) : (\n              <p>No events yet</p>\n            )}\n          </Placeholder>\n        </div>\n        <div id=\"live\" title={getLiveEventTitle()}>\n          <Placeholder>\n            <Fragment>\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  marginBottom: '12px',\n                  padding: '8px',\n                  backgroundColor: theme.background.app,\n                  borderRadius: '4px',\n                  border: `1px solid ${theme.color.border}`,\n                }}\n              >\n                <div\n                  style={{ display: 'flex', gap: '8px', alignItems: 'center' }}\n                >\n                  <Button size=\"small\" onClick={clearLiveEvents}>\n                    Clear Events\n                  </Button>\n                </div>\n                <HighlightButtons\n                  config={config}\n                  toggleHighlight={toggleHighlight}\n                />\n              </div>\n            </Fragment>\n            {liveEvents.length > 0 ? (\n              <List\n                items={liveEvents.map((event, index) => {\n                  return {\n                    title: formatEventTitle(\n                      event,\n                      liveEvents.length - index - 1,\n                    ),\n                    content: (\n                      <SyntaxHighlighter\n                        language=\"json\"\n                        copyable={true}\n                        bordered={true}\n                        padded={true}\n                      >\n                        {JSON.stringify(event, null, 2)}\n                      </SyntaxHighlighter>\n                    ),\n                  };\n                })}\n              />\n            ) : (\n              <p\n                style={{\n                  textAlign: 'center',\n                  color: theme.color.mediumdark,\n                  padding: '20px',\n                }}\n              >\n                Waiting for live events...\n                <br />\n                <small>\n                  Interact with components to see events appear here in\n                  real-time\n                </small>\n              </p>\n            )}\n          </Placeholder>\n        </div>\n        <div id=\"config\" title=\"Config\">\n          <Placeholder>\n            <Fragment>\n              <Form.Field label=\"Auto-refresh\">\n                <input\n                  type=\"checkbox\"\n                  id=\"autoRefresh\"\n                  checked={config.autoRefresh}\n                  onChange={(e) =>\n                    updateConfig('autoRefresh', e.target.checked)\n                  }\n                />\n              </Form.Field>\n              <Form.Field label=\"Prefix\">\n                <Form.Input\n                  name=\"Prefix\"\n                  value={config.prefix}\n                  placeholder={config.prefix}\n                  onChange={(e) =>\n                    updateConfig('prefix', (e.target as HTMLInputElement).value)\n                  }\n                  size=\"flex\"\n                />\n              </Form.Field>\n            </Fragment>\n          </Placeholder>\n        </div>\n      </TabsState>\n    </AddonPanel>\n  );\n});\n","import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\n\nimport { Panel } from './components/Panel';\nimport { ADDON_ID, PANEL_ID } from './constants';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `manager.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/manager.tsx\",\n */\n\naddons.register(ADDON_ID, (api) => {\n  addons.add(PANEL_ID, {\n    type: types.PANEL,\n    title: ADDON_ID,\n    match: ({ viewMode }) => viewMode === 'story',\n    render: ({ active }) => <Panel active={!!active} />,\n  });\n});\n"]}

package/dist/preview.cjs

@@ -1,2 +1,116 @@
-'use strict';var previewApi=require('storybook/preview-api'),webSourceBrowser=require('@walkeros/web-source-browser');var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`};var n=previewApi.addons.getChannel(),a=null;n.addListener(r.REQUEST,t=>{let o=a||document.querySelector("#storybook-root")||document.body,s=webSourceBrowser.getAllEvents(o,t.prefix);n.emit(r.RESULT,s);});var l=(t,o)=>(a=o.canvasElement,t());var c={decorators:[l],globalTypes:{[e]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb"}}},initialGlobals:{[e]:{autoRefresh:true,prefix:"data-elb"}}},x=c;module.exports=x;//# sourceMappingURL=preview.cjs.map
+'use strict';var previewApi=require('storybook/preview-api'),webSourceBrowser=require('@walkeros/web-source-browser'),collector=require('@walkeros/collector');var r="walkerOS";var a={RESULT:`${r}/result`,REQUEST:`${r}/request`,HIGHLIGHT:`${r}/highlight`,LIVE_EVENT:`${r}/live-event`};var S={type:"console",push:(t,e)=>{console.log("Storybook Event:",t);},config:{}},k={type:"live",push:(t,e)=>{let o=previewApi.addons.getChannel();o&&o.emit(a.LIVE_EVENT,t);},config:{}};function D(){try{let t=parent.document.querySelector("#storybook-preview-iframe");if(t!=null&&t.contentDocument&&(t!=null&&t.contentWindow))return {document:t.contentDocument,window:t.contentWindow}}catch(t){}return {document,window}}async function y(){if(!window.walker)try{let{document:t,window:e}=D();if(!t){console.warn("Document not available, skipping walkerOS initialization");return}let o=await collector.createCollector({run:!0,consent:{functional:!0},sources:{browser:{code:webSourceBrowser.sourceBrowser,config:{settings:{pageview:!0,session:!1,elb:"elb",prefix:"data-elb",scope:t.body||t}},env:{window:e,document:t}}},destinations:{console:{code:S},live:{code:k}}}),{collector:i,elb:n}=o;if(!i)throw new Error("Collector creation failed - no collector returned");window.walker=i,window.elb=n;}catch(t){console.error("Failed to initialize walkerOS:",t);}}var g=previewApi.addons.getChannel(),c=null,m=null,b=()=>{let t=document.querySelector("#storybook-preview-iframe");return t!=null&&t.contentDocument?t.contentDocument:document},s=()=>{let t=b(),e=["#storybook-root","#root",'[data-testid="storybook-root"]',"body"];for(let o of e){let i=t.querySelector(o);if(i)return i}return t.body},x=()=>{let t=b(),e=t.querySelector("#walkeros-highlighting");e&&e.remove(),c=t.createElement("style"),c.id="walkeros-highlighting",c.textContent=`
+    /* Highlight colors - original from website */
+    :root {
+      --highlight-globals: #4fc3f7cc;
+      --highlight-context: #ffbd44cc;
+      --highlight-entity: #00ca4ecc;
+      --highlight-property: #ff605ccc;
+      --highlight-action: #9900ffcc;
+      --highlight-background: #1f2937;
+      --highlight-text: #9ca3af;
+      --highlight-hover: rgba(255, 255, 255, 0.05);
+      --highlight-separator: rgba(255, 255, 255, 0.05);
+    }
+
+    .highlight-globals [data-elbglobals] {
+      box-shadow: 0 0 0 2px var(--highlight-globals) !important;
+    }
+
+    .highlight-context [data-elbcontext] {
+      box-shadow: 0 0 0 2px var(--highlight-context) !important;
+    }
+
+    .highlight-entity [data-elb] {
+      box-shadow: 0 0 0 2px var(--highlight-entity) !important;
+    }
+
+    .highlight-property [data-elbproperty] {
+      box-shadow: 0 0 0 2px var(--highlight-property) !important;
+    }
+
+    .highlight-action [data-elbaction] {
+      box-shadow: 0 0 0 2px var(--highlight-action) !important;
+    }
+
+    /* Combined highlights with layered solid borders */
+    .highlight-entity.highlight-action [data-elb][data-elbaction] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity) !important;
+    }
+
+    .highlight-entity.highlight-context [data-elb][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-entity),
+        0 0 0 4px var(--highlight-context) !important;
+    }
+
+    .highlight-entity.highlight-property [data-elb][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-entity),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-context [data-elbaction][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-context) !important;
+    }
+
+    .highlight-context.highlight-property [data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-context),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-property [data-elbaction][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    /* Triple combinations with distinct layers */
+    .highlight-entity.highlight-action.highlight-context
+      [data-elb][data-elbaction][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-context) !important;
+    }
+
+    /* Triple combinations with property */
+    .highlight-entity.highlight-action.highlight-property
+      [data-elb][data-elbaction][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    .highlight-entity.highlight-context.highlight-property
+      [data-elb][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-context),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-context.highlight-property
+      [data-elbaction][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-context),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    /* Quadruple combination */
+    .highlight-entity.highlight-action.highlight-context.highlight-property
+      [data-elb][data-elbaction][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-context),
+        0 0 0 8px var(--highlight-property) !important;
+    }
+  `,t.head.appendChild(c);},p=(t="data-elb")=>{let e=s();if(!e)return;Array.from(e.querySelectorAll("*")).forEach(i=>{let n=Array.from(i.attributes),l=false;n.forEach(h=>{h.name.startsWith(`${t}-`)&&h.name!==`${t}action`&&h.name!==`${t}context`&&h.name!==`${t}globals`&&(l=true);}),l&&i.setAttribute("data-elbproperty","");});},C=t=>{let e=s();e&&(e.classList.remove("highlight-context"),e.classList.remove("highlight-entity"),e.classList.remove("highlight-property"),e.classList.remove("highlight-action"),t&&(p(),t.context&&e.classList.add("highlight-context"),t.entity&&e.classList.add("highlight-entity"),t.property&&e.classList.add("highlight-property"),t.action&&e.classList.add("highlight-action")));};g.addListener(a.REQUEST,t=>{let e=s();if(!e){g.emit(a.RESULT,[]);return}p(t.prefix||"data-elb");let o=webSourceBrowser.getAllEvents(e,t.prefix);g.emit(a.RESULT,o);});g.addListener(a.HIGHLIGHT,t=>{x(),C(t.highlights);});var u=(t,e)=>{var d;e.canvasElement;let o=e.id,i=m!==o,n=e.globals,l=(d=n==null?void 0:n.walkerOS)==null?void 0:d.autoRefresh;i&&(m=o);let h=t();return setTimeout(()=>{y().catch(f=>{console.error("Walker initialization failed:",f);}),x(),p(),i&&l&&window.elb&&window.elb("walker run");},200),h};var O={decorators:[u],globalTypes:{[r]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}}}},initialGlobals:{[r]:{autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}}}},j=O;module.exports=j;//# sourceMappingURL=preview.cjs.map
 //# sourceMappingURL=preview.cjs.map

package/dist/preview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"sHAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,iBAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,6BAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n  // Try to find the canvas element if we don't have it yet\n  const canvasElement =\n    currentCanvasElement ||\n    document.querySelector('#storybook-root') ||\n    document.body;\n\n  const events = getAllEvents(canvasElement as Element, config.prefix);\n\n  // Send the result back to the manager\n  channel.emit(EVENTS.RESULT, events);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n  // Update the current canvas element when a story renders\n  currentCanvasElement = context.canvasElement as Element;\n\n  return storyFn();\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withRoundTrip],\n  globalTypes: {\n    [ADDON_ID]: {\n      description: 'walkerOS addon configuration',\n      defaultValue: {\n        autoRefresh: true,\n        prefix: 'data-elb',\n      },\n    },\n  },\n  initialGlobals: {\n    [ADDON_ID]: {\n      autoRefresh: true,\n      prefix: 'data-elb',\n    },\n  },\n};\n\nexport default preview;\n"]}
+{"version":3,"sources":["../src/constants.ts","../src/walker.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","destinationConsole","event","context","destinationLive","channel","addons","getIframeContext","iframe","e","initializeWalker","iframeDoc","iframeWin","result","createCollector","sourceBrowser","collector","elb","error","highlightingStyleElement","currentStoryId","getStoryDocument","getStoryRootElement","storyDoc","selectors","selector","element","injectHighlightingCSS","existingStyle","enhanceProperties","prefix","storyRoot","el","attributes","hasProperties","attr","applyHighlighting","highlights","config","events","getAllEvents","withRoundTrip","storyFn","_a","storyId","hasStoryChanged","globals","autoRefresh","err","preview","preview_default"],"mappings":"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","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  HIGHLIGHT: `${ADDON_ID}/highlight`,\n  LIVE_EVENT: `${ADDON_ID}/live-event`,\n};\n","import type { Collector, WalkerOS, Destination } from '@walkeros/core';\nimport { createCollector } from '@walkeros/collector';\nimport { sourceBrowser } from '@walkeros/web-source-browser';\nimport { addons } from 'storybook/preview-api';\nimport { EVENTS } from './constants';\n\ndeclare global {\n  interface Window {\n    elb: WalkerOS.Elb;\n    walker: Collector.Instance;\n  }\n}\n\n// Simple console destination for Storybook\nconst destinationConsole = {\n  type: 'console',\n  push: (event: WalkerOS.Event, context: Destination.PushContext) => {\n    console.log('Storybook Event:', event);\n  },\n  config: {},\n};\n\n// Live destination for Storybook panel\nconst destinationLive = {\n  type: 'live',\n  push: (event: WalkerOS.Event, context: Destination.PushContext) => {\n    // Send event to Storybook panel for live display\n    const channel = addons.getChannel();\n    if (channel) {\n      channel.emit(EVENTS.LIVE_EVENT, event);\n    }\n  },\n  config: {},\n};\n\n// Function to get Storybook iframe context\nfunction getIframeContext() {\n  try {\n    // Try to get iframe from parent document (manager context)\n    const iframe = parent.document.querySelector(\n      '#storybook-preview-iframe',\n    ) as HTMLIFrameElement;\n    if (iframe?.contentDocument && iframe?.contentWindow) {\n      return {\n        document: iframe.contentDocument,\n        window: iframe.contentWindow,\n      };\n    }\n  } catch (e) {\n    // If we can't access parent, we're likely already in iframe context\n  }\n\n  // Fallback to current context\n  return { document, window };\n}\n\nexport async function initializeWalker(): Promise<void> {\n  // Skip initialization if already done\n  if (window.walker) return;\n\n  try {\n    // Get iframe context for proper event capture\n    const { document: iframeDoc, window: iframeWin } = getIframeContext();\n\n    if (!iframeDoc) {\n      console.warn('Document not available, skipping walkerOS initialization');\n      return;\n    }\n\n    // Create collector with browser source and destinations\n    const result = await createCollector({\n      run: true,\n      consent: { functional: true },\n      sources: {\n        browser: {\n          code: sourceBrowser,\n          config: {\n            settings: {\n              pageview: true,\n              session: false, // Disable session for Storybook\n              elb: 'elb',\n              prefix: 'data-elb',\n              scope: iframeDoc.body || iframeDoc, // Set scope to iframe document\n            },\n          },\n          env: {\n            window: iframeWin,\n            document: iframeDoc,\n          },\n        },\n      },\n      destinations: {\n        console: { code: destinationConsole },\n        live: { code: destinationLive },\n      },\n    });\n\n    const { collector, elb } = result;\n\n    // Verify collector was created successfully\n    if (!collector) {\n      throw new Error('Collector creation failed - no collector returned');\n    }\n\n    // Set global window objects\n    window.walker = collector;\n    window.elb = elb;\n  } catch (error) {\n    console.error('Failed to initialize walkerOS:', error);\n  }\n}\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\nimport { initializeWalker } from './walker';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\nlet highlightingStyleElement: HTMLStyleElement | null = null;\nlet currentStoryId: string | null = null;\n\n// Function to get the story document (either iframe or main document)\nconst getStoryDocument = (): Document => {\n  // Try to find story iframe\n  const iframe = document.querySelector(\n    '#storybook-preview-iframe',\n  ) as HTMLIFrameElement;\n  if (iframe?.contentDocument) {\n    return iframe.contentDocument;\n  }\n  // Fallback to main document\n  return document;\n};\n\n// Function to get the story root element\nconst getStoryRootElement = (): Element | null => {\n  const storyDoc = getStoryDocument();\n\n  // Try multiple selectors for story root\n  const selectors = [\n    '#storybook-root',\n    '#root',\n    '[data-testid=\"storybook-root\"]',\n    'body',\n  ];\n\n  for (const selector of selectors) {\n    const element = storyDoc.querySelector(selector);\n    if (element) {\n      return element;\n    }\n  }\n\n  return storyDoc.body;\n};\n\n// Function to inject highlighting CSS into story document\nconst injectHighlightingCSS = () => {\n  const storyDoc = getStoryDocument();\n\n  // Remove existing styles\n  const existingStyle = storyDoc.querySelector('#walkeros-highlighting');\n  if (existingStyle) {\n    existingStyle.remove();\n  }\n\n  highlightingStyleElement = storyDoc.createElement('style');\n  highlightingStyleElement.id = 'walkeros-highlighting';\n  highlightingStyleElement.textContent = `\n    /* Highlight colors - original from website */\n    :root {\n      --highlight-globals: #4fc3f7cc;\n      --highlight-context: #ffbd44cc;\n      --highlight-entity: #00ca4ecc;\n      --highlight-property: #ff605ccc;\n      --highlight-action: #9900ffcc;\n      --highlight-background: #1f2937;\n      --highlight-text: #9ca3af;\n      --highlight-hover: rgba(255, 255, 255, 0.05);\n      --highlight-separator: rgba(255, 255, 255, 0.05);\n    }\n\n    .highlight-globals [data-elbglobals] {\n      box-shadow: 0 0 0 2px var(--highlight-globals) !important;\n    }\n\n    .highlight-context [data-elbcontext] {\n      box-shadow: 0 0 0 2px var(--highlight-context) !important;\n    }\n\n    .highlight-entity [data-elb] {\n      box-shadow: 0 0 0 2px var(--highlight-entity) !important;\n    }\n\n    .highlight-property [data-elbproperty] {\n      box-shadow: 0 0 0 2px var(--highlight-property) !important;\n    }\n\n    .highlight-action [data-elbaction] {\n      box-shadow: 0 0 0 2px var(--highlight-action) !important;\n    }\n\n    /* Combined highlights with layered solid borders */\n    .highlight-entity.highlight-action [data-elb][data-elbaction] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity) !important;\n    }\n\n    .highlight-entity.highlight-context [data-elb][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-entity),\n        0 0 0 4px var(--highlight-context) !important;\n    }\n\n    .highlight-entity.highlight-property [data-elb][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-entity),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-context [data-elbaction][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-context) !important;\n    }\n\n    .highlight-context.highlight-property [data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-context),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-property [data-elbaction][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    /* Triple combinations with distinct layers */\n    .highlight-entity.highlight-action.highlight-context\n      [data-elb][data-elbaction][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-context) !important;\n    }\n\n    /* Triple combinations with property */\n    .highlight-entity.highlight-action.highlight-property\n      [data-elb][data-elbaction][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    .highlight-entity.highlight-context.highlight-property\n      [data-elb][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-context),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-context.highlight-property\n      [data-elbaction][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-context),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    /* Quadruple combination */\n    .highlight-entity.highlight-action.highlight-context.highlight-property\n      [data-elb][data-elbaction][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-context),\n        0 0 0 8px var(--highlight-property) !important;\n    }\n  `;\n\n  storyDoc.head.appendChild(highlightingStyleElement);\n};\n\n// Function to enhance DOM with property attributes\nconst enhanceProperties = (prefix: string = 'data-elb') => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) return;\n\n  // Find all elements with any attributes starting with prefix-\n  const allElements = Array.from(storyRoot.querySelectorAll('*'));\n\n  allElements.forEach((el) => {\n    const attributes = Array.from(el.attributes);\n    let hasProperties = false;\n\n    attributes.forEach((attr) => {\n      // Check if attribute starts with prefix- (e.g., data-elb-button, data-elb-product)\n      if (\n        attr.name.startsWith(`${prefix}-`) &&\n        attr.name !== `${prefix}action` &&\n        attr.name !== `${prefix}context` &&\n        attr.name !== `${prefix}globals`\n      ) {\n        hasProperties = true;\n      }\n    });\n\n    // Mark elements with property attributes\n    if (hasProperties) {\n      el.setAttribute('data-elbproperty', '');\n    }\n  });\n};\n\n// Function to apply highlighting to story root\nconst applyHighlighting = (highlights: WalkerOSAddon['highlights']) => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) return;\n\n  // Remove existing highlighting classes\n  storyRoot.classList.remove('highlight-context');\n  storyRoot.classList.remove('highlight-entity');\n  storyRoot.classList.remove('highlight-property');\n  storyRoot.classList.remove('highlight-action');\n\n  if (!highlights) return;\n\n  // Re-enhance properties FIRST to ensure they're marked\n  enhanceProperties();\n\n  // Then add specific highlighting classes\n  if (highlights.context) storyRoot.classList.add('highlight-context');\n  if (highlights.entity) storyRoot.classList.add('highlight-entity');\n  if (highlights.property) storyRoot.classList.add('highlight-property');\n  if (highlights.action) storyRoot.classList.add('highlight-action');\n};\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) {\n    channel.emit(EVENTS.RESULT, []);\n    return;\n  }\n\n  // Enhance DOM with property attributes\n  enhanceProperties(config.prefix || 'data-elb');\n\n  const events = getAllEvents(storyRoot as Element, config.prefix);\n\n  // Send the result back to the manager\n  channel.emit(EVENTS.RESULT, events);\n});\n\n// Global listener for highlighting events\nchannel.addListener(EVENTS.HIGHLIGHT, (config: WalkerOSAddon) => {\n  // Always inject CSS first\n  injectHighlightingCSS();\n\n  // Then apply highlighting\n  applyHighlighting(config.highlights);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n  // Update the current canvas element when a story renders\n  currentCanvasElement = context.canvasElement as Element;\n\n  // Check if story changed and auto-run is enabled\n  const storyId = context.id;\n  const hasStoryChanged = currentStoryId !== storyId;\n  const globals = context.globals;\n  const autoRefresh = globals?.walkerOS?.autoRefresh;\n\n  if (hasStoryChanged) {\n    currentStoryId = storyId;\n  }\n\n  const result = storyFn();\n\n  // Initialize walker and inject CSS after story renders\n  setTimeout(() => {\n    // Initialize walkerOS for live event capture\n    initializeWalker().catch((err) => {\n      console.error('Walker initialization failed:', err);\n    });\n\n    // Inject highlighting CSS and enhance properties\n    injectHighlightingCSS();\n    enhanceProperties();\n\n    // Auto-run walker if story changed and auto-refresh is enabled\n    if (hasStoryChanged && autoRefresh && window.elb) {\n      window.elb('walker run');\n    }\n  }, 200);\n\n  return result;\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withRoundTrip],\n  globalTypes: {\n    [ADDON_ID]: {\n      description: 'walkerOS addon configuration',\n      defaultValue: {\n        autoRefresh: true,\n        prefix: 'data-elb',\n        highlights: {\n          context: false,\n          entity: false,\n          property: false,\n          action: false,\n        },\n      },\n    },\n  },\n  initialGlobals: {\n    [ADDON_ID]: {\n      autoRefresh: true,\n      prefix: 'data-elb',\n      highlights: {\n        context: false,\n        entity: false,\n        property: false,\n        action: false,\n      },\n    },\n  },\n};\n\nexport default preview;\n"]}

package/dist/preview.js

@@ -1,2 +1,116 @@
-import {addons}from'storybook/preview-api';import {getAllEvents}from'@walkeros/web-source-browser';var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`};var n=addons.getChannel(),a=null;n.addListener(r.REQUEST,t=>{let o=a||document.querySelector("#storybook-root")||document.body,s=getAllEvents(o,t.prefix);n.emit(r.RESULT,s);});var l=(t,o)=>(a=o.canvasElement,t());var c={decorators:[l],globalTypes:{[e]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb"}}},initialGlobals:{[e]:{autoRefresh:true,prefix:"data-elb"}}},x=c;export{x as default};//# sourceMappingURL=preview.js.map
+import {addons}from'storybook/preview-api';import {getAllEvents,sourceBrowser}from'@walkeros/web-source-browser';import {createCollector}from'@walkeros/collector';var r="walkerOS";var a={RESULT:`${r}/result`,REQUEST:`${r}/request`,HIGHLIGHT:`${r}/highlight`,LIVE_EVENT:`${r}/live-event`};var S={type:"console",push:(t,e)=>{console.log("Storybook Event:",t);},config:{}},k={type:"live",push:(t,e)=>{let o=addons.getChannel();o&&o.emit(a.LIVE_EVENT,t);},config:{}};function D(){try{let t=parent.document.querySelector("#storybook-preview-iframe");if(t!=null&&t.contentDocument&&(t!=null&&t.contentWindow))return {document:t.contentDocument,window:t.contentWindow}}catch(t){}return {document,window}}async function y(){if(!window.walker)try{let{document:t,window:e}=D();if(!t){console.warn("Document not available, skipping walkerOS initialization");return}let o=await createCollector({run:!0,consent:{functional:!0},sources:{browser:{code:sourceBrowser,config:{settings:{pageview:!0,session:!1,elb:"elb",prefix:"data-elb",scope:t.body||t}},env:{window:e,document:t}}},destinations:{console:{code:S},live:{code:k}}}),{collector:i,elb:n}=o;if(!i)throw new Error("Collector creation failed - no collector returned");window.walker=i,window.elb=n;}catch(t){console.error("Failed to initialize walkerOS:",t);}}var g=addons.getChannel(),c=null,m=null,b=()=>{let t=document.querySelector("#storybook-preview-iframe");return t!=null&&t.contentDocument?t.contentDocument:document},s=()=>{let t=b(),e=["#storybook-root","#root",'[data-testid="storybook-root"]',"body"];for(let o of e){let i=t.querySelector(o);if(i)return i}return t.body},x=()=>{let t=b(),e=t.querySelector("#walkeros-highlighting");e&&e.remove(),c=t.createElement("style"),c.id="walkeros-highlighting",c.textContent=`
+    /* Highlight colors - original from website */
+    :root {
+      --highlight-globals: #4fc3f7cc;
+      --highlight-context: #ffbd44cc;
+      --highlight-entity: #00ca4ecc;
+      --highlight-property: #ff605ccc;
+      --highlight-action: #9900ffcc;
+      --highlight-background: #1f2937;
+      --highlight-text: #9ca3af;
+      --highlight-hover: rgba(255, 255, 255, 0.05);
+      --highlight-separator: rgba(255, 255, 255, 0.05);
+    }
+
+    .highlight-globals [data-elbglobals] {
+      box-shadow: 0 0 0 2px var(--highlight-globals) !important;
+    }
+
+    .highlight-context [data-elbcontext] {
+      box-shadow: 0 0 0 2px var(--highlight-context) !important;
+    }
+
+    .highlight-entity [data-elb] {
+      box-shadow: 0 0 0 2px var(--highlight-entity) !important;
+    }
+
+    .highlight-property [data-elbproperty] {
+      box-shadow: 0 0 0 2px var(--highlight-property) !important;
+    }
+
+    .highlight-action [data-elbaction] {
+      box-shadow: 0 0 0 2px var(--highlight-action) !important;
+    }
+
+    /* Combined highlights with layered solid borders */
+    .highlight-entity.highlight-action [data-elb][data-elbaction] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity) !important;
+    }
+
+    .highlight-entity.highlight-context [data-elb][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-entity),
+        0 0 0 4px var(--highlight-context) !important;
+    }
+
+    .highlight-entity.highlight-property [data-elb][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-entity),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-context [data-elbaction][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-context) !important;
+    }
+
+    .highlight-context.highlight-property [data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-context),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-property [data-elbaction][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-property) !important;
+    }
+
+    /* Triple combinations with distinct layers */
+    .highlight-entity.highlight-action.highlight-context
+      [data-elb][data-elbaction][data-elbcontext] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-context) !important;
+    }
+
+    /* Triple combinations with property */
+    .highlight-entity.highlight-action.highlight-property
+      [data-elb][data-elbaction][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    .highlight-entity.highlight-context.highlight-property
+      [data-elb][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-context),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    .highlight-action.highlight-context.highlight-property
+      [data-elbaction][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-context),
+        0 0 0 6px var(--highlight-property) !important;
+    }
+
+    /* Quadruple combination */
+    .highlight-entity.highlight-action.highlight-context.highlight-property
+      [data-elb][data-elbaction][data-elbcontext][data-elbproperty] {
+      box-shadow:
+        0 0 0 2px var(--highlight-action),
+        0 0 0 4px var(--highlight-entity),
+        0 0 0 6px var(--highlight-context),
+        0 0 0 8px var(--highlight-property) !important;
+    }
+  `,t.head.appendChild(c);},p=(t="data-elb")=>{let e=s();if(!e)return;Array.from(e.querySelectorAll("*")).forEach(i=>{let n=Array.from(i.attributes),l=false;n.forEach(h=>{h.name.startsWith(`${t}-`)&&h.name!==`${t}action`&&h.name!==`${t}context`&&h.name!==`${t}globals`&&(l=true);}),l&&i.setAttribute("data-elbproperty","");});},C=t=>{let e=s();e&&(e.classList.remove("highlight-context"),e.classList.remove("highlight-entity"),e.classList.remove("highlight-property"),e.classList.remove("highlight-action"),t&&(p(),t.context&&e.classList.add("highlight-context"),t.entity&&e.classList.add("highlight-entity"),t.property&&e.classList.add("highlight-property"),t.action&&e.classList.add("highlight-action")));};g.addListener(a.REQUEST,t=>{let e=s();if(!e){g.emit(a.RESULT,[]);return}p(t.prefix||"data-elb");let o=getAllEvents(e,t.prefix);g.emit(a.RESULT,o);});g.addListener(a.HIGHLIGHT,t=>{x(),C(t.highlights);});var u=(t,e)=>{var d;e.canvasElement;let o=e.id,i=m!==o,n=e.globals,l=(d=n==null?void 0:n.walkerOS)==null?void 0:d.autoRefresh;i&&(m=o);let h=t();return setTimeout(()=>{y().catch(f=>{console.error("Walker initialization failed:",f);}),x(),p(),i&&l&&window.elb&&window.elb("walker run");},200),h};var O={decorators:[u],globalTypes:{[r]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}}}},initialGlobals:{[r]:{autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}}}},j=O;export{j as default};//# sourceMappingURL=preview.js.map
 //# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"mGAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,MAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,YAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n  // Try to find the canvas element if we don't have it yet\n  const canvasElement =\n    currentCanvasElement ||\n    document.querySelector('#storybook-root') ||\n    document.body;\n\n  const events = getAllEvents(canvasElement as Element, config.prefix);\n\n  // Send the result back to the manager\n  channel.emit(EVENTS.RESULT, events);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n  // Update the current canvas element when a story renders\n  currentCanvasElement = context.canvasElement as Element;\n\n  return storyFn();\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withRoundTrip],\n  globalTypes: {\n    [ADDON_ID]: {\n      description: 'walkerOS addon configuration',\n      defaultValue: {\n        autoRefresh: true,\n        prefix: 'data-elb',\n      },\n    },\n  },\n  initialGlobals: {\n    [ADDON_ID]: {\n      autoRefresh: true,\n      prefix: 'data-elb',\n    },\n  },\n};\n\nexport default preview;\n"]}
+{"version":3,"sources":["../src/constants.ts","../src/walker.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","destinationConsole","event","context","destinationLive","channel","addons","getIframeContext","iframe","e","initializeWalker","iframeDoc","iframeWin","result","createCollector","sourceBrowser","collector","elb","error","highlightingStyleElement","currentStoryId","getStoryDocument","getStoryRootElement","storyDoc","selectors","selector","element","injectHighlightingCSS","existingStyle","enhanceProperties","prefix","storyRoot","el","attributes","hasProperties","attr","applyHighlighting","highlights","config","events","getAllEvents","withRoundTrip","storyFn","_a","storyId","hasStoryChanged","globals","autoRefresh","err","preview","preview_default"],"mappings":"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","file":"preview.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n  RESULT: `${ADDON_ID}/result`,\n  REQUEST: `${ADDON_ID}/request`,\n  HIGHLIGHT: `${ADDON_ID}/highlight`,\n  LIVE_EVENT: `${ADDON_ID}/live-event`,\n};\n","import type { Collector, WalkerOS, Destination } from '@walkeros/core';\nimport { createCollector } from '@walkeros/collector';\nimport { sourceBrowser } from '@walkeros/web-source-browser';\nimport { addons } from 'storybook/preview-api';\nimport { EVENTS } from './constants';\n\ndeclare global {\n  interface Window {\n    elb: WalkerOS.Elb;\n    walker: Collector.Instance;\n  }\n}\n\n// Simple console destination for Storybook\nconst destinationConsole = {\n  type: 'console',\n  push: (event: WalkerOS.Event, context: Destination.PushContext) => {\n    console.log('Storybook Event:', event);\n  },\n  config: {},\n};\n\n// Live destination for Storybook panel\nconst destinationLive = {\n  type: 'live',\n  push: (event: WalkerOS.Event, context: Destination.PushContext) => {\n    // Send event to Storybook panel for live display\n    const channel = addons.getChannel();\n    if (channel) {\n      channel.emit(EVENTS.LIVE_EVENT, event);\n    }\n  },\n  config: {},\n};\n\n// Function to get Storybook iframe context\nfunction getIframeContext() {\n  try {\n    // Try to get iframe from parent document (manager context)\n    const iframe = parent.document.querySelector(\n      '#storybook-preview-iframe',\n    ) as HTMLIFrameElement;\n    if (iframe?.contentDocument && iframe?.contentWindow) {\n      return {\n        document: iframe.contentDocument,\n        window: iframe.contentWindow,\n      };\n    }\n  } catch (e) {\n    // If we can't access parent, we're likely already in iframe context\n  }\n\n  // Fallback to current context\n  return { document, window };\n}\n\nexport async function initializeWalker(): Promise<void> {\n  // Skip initialization if already done\n  if (window.walker) return;\n\n  try {\n    // Get iframe context for proper event capture\n    const { document: iframeDoc, window: iframeWin } = getIframeContext();\n\n    if (!iframeDoc) {\n      console.warn('Document not available, skipping walkerOS initialization');\n      return;\n    }\n\n    // Create collector with browser source and destinations\n    const result = await createCollector({\n      run: true,\n      consent: { functional: true },\n      sources: {\n        browser: {\n          code: sourceBrowser,\n          config: {\n            settings: {\n              pageview: true,\n              session: false, // Disable session for Storybook\n              elb: 'elb',\n              prefix: 'data-elb',\n              scope: iframeDoc.body || iframeDoc, // Set scope to iframe document\n            },\n          },\n          env: {\n            window: iframeWin,\n            document: iframeDoc,\n          },\n        },\n      },\n      destinations: {\n        console: { code: destinationConsole },\n        live: { code: destinationLive },\n      },\n    });\n\n    const { collector, elb } = result;\n\n    // Verify collector was created successfully\n    if (!collector) {\n      throw new Error('Collector creation failed - no collector returned');\n    }\n\n    // Set global window objects\n    window.walker = collector;\n    window.elb = elb;\n  } catch (error) {\n    console.error('Failed to initialize walkerOS:', error);\n  }\n}\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\nimport { initializeWalker } from './walker';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\nlet highlightingStyleElement: HTMLStyleElement | null = null;\nlet currentStoryId: string | null = null;\n\n// Function to get the story document (either iframe or main document)\nconst getStoryDocument = (): Document => {\n  // Try to find story iframe\n  const iframe = document.querySelector(\n    '#storybook-preview-iframe',\n  ) as HTMLIFrameElement;\n  if (iframe?.contentDocument) {\n    return iframe.contentDocument;\n  }\n  // Fallback to main document\n  return document;\n};\n\n// Function to get the story root element\nconst getStoryRootElement = (): Element | null => {\n  const storyDoc = getStoryDocument();\n\n  // Try multiple selectors for story root\n  const selectors = [\n    '#storybook-root',\n    '#root',\n    '[data-testid=\"storybook-root\"]',\n    'body',\n  ];\n\n  for (const selector of selectors) {\n    const element = storyDoc.querySelector(selector);\n    if (element) {\n      return element;\n    }\n  }\n\n  return storyDoc.body;\n};\n\n// Function to inject highlighting CSS into story document\nconst injectHighlightingCSS = () => {\n  const storyDoc = getStoryDocument();\n\n  // Remove existing styles\n  const existingStyle = storyDoc.querySelector('#walkeros-highlighting');\n  if (existingStyle) {\n    existingStyle.remove();\n  }\n\n  highlightingStyleElement = storyDoc.createElement('style');\n  highlightingStyleElement.id = 'walkeros-highlighting';\n  highlightingStyleElement.textContent = `\n    /* Highlight colors - original from website */\n    :root {\n      --highlight-globals: #4fc3f7cc;\n      --highlight-context: #ffbd44cc;\n      --highlight-entity: #00ca4ecc;\n      --highlight-property: #ff605ccc;\n      --highlight-action: #9900ffcc;\n      --highlight-background: #1f2937;\n      --highlight-text: #9ca3af;\n      --highlight-hover: rgba(255, 255, 255, 0.05);\n      --highlight-separator: rgba(255, 255, 255, 0.05);\n    }\n\n    .highlight-globals [data-elbglobals] {\n      box-shadow: 0 0 0 2px var(--highlight-globals) !important;\n    }\n\n    .highlight-context [data-elbcontext] {\n      box-shadow: 0 0 0 2px var(--highlight-context) !important;\n    }\n\n    .highlight-entity [data-elb] {\n      box-shadow: 0 0 0 2px var(--highlight-entity) !important;\n    }\n\n    .highlight-property [data-elbproperty] {\n      box-shadow: 0 0 0 2px var(--highlight-property) !important;\n    }\n\n    .highlight-action [data-elbaction] {\n      box-shadow: 0 0 0 2px var(--highlight-action) !important;\n    }\n\n    /* Combined highlights with layered solid borders */\n    .highlight-entity.highlight-action [data-elb][data-elbaction] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity) !important;\n    }\n\n    .highlight-entity.highlight-context [data-elb][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-entity),\n        0 0 0 4px var(--highlight-context) !important;\n    }\n\n    .highlight-entity.highlight-property [data-elb][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-entity),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-context [data-elbaction][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-context) !important;\n    }\n\n    .highlight-context.highlight-property [data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-context),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-property [data-elbaction][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-property) !important;\n    }\n\n    /* Triple combinations with distinct layers */\n    .highlight-entity.highlight-action.highlight-context\n      [data-elb][data-elbaction][data-elbcontext] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-context) !important;\n    }\n\n    /* Triple combinations with property */\n    .highlight-entity.highlight-action.highlight-property\n      [data-elb][data-elbaction][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    .highlight-entity.highlight-context.highlight-property\n      [data-elb][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-context),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    .highlight-action.highlight-context.highlight-property\n      [data-elbaction][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-context),\n        0 0 0 6px var(--highlight-property) !important;\n    }\n\n    /* Quadruple combination */\n    .highlight-entity.highlight-action.highlight-context.highlight-property\n      [data-elb][data-elbaction][data-elbcontext][data-elbproperty] {\n      box-shadow:\n        0 0 0 2px var(--highlight-action),\n        0 0 0 4px var(--highlight-entity),\n        0 0 0 6px var(--highlight-context),\n        0 0 0 8px var(--highlight-property) !important;\n    }\n  `;\n\n  storyDoc.head.appendChild(highlightingStyleElement);\n};\n\n// Function to enhance DOM with property attributes\nconst enhanceProperties = (prefix: string = 'data-elb') => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) return;\n\n  // Find all elements with any attributes starting with prefix-\n  const allElements = Array.from(storyRoot.querySelectorAll('*'));\n\n  allElements.forEach((el) => {\n    const attributes = Array.from(el.attributes);\n    let hasProperties = false;\n\n    attributes.forEach((attr) => {\n      // Check if attribute starts with prefix- (e.g., data-elb-button, data-elb-product)\n      if (\n        attr.name.startsWith(`${prefix}-`) &&\n        attr.name !== `${prefix}action` &&\n        attr.name !== `${prefix}context` &&\n        attr.name !== `${prefix}globals`\n      ) {\n        hasProperties = true;\n      }\n    });\n\n    // Mark elements with property attributes\n    if (hasProperties) {\n      el.setAttribute('data-elbproperty', '');\n    }\n  });\n};\n\n// Function to apply highlighting to story root\nconst applyHighlighting = (highlights: WalkerOSAddon['highlights']) => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) return;\n\n  // Remove existing highlighting classes\n  storyRoot.classList.remove('highlight-context');\n  storyRoot.classList.remove('highlight-entity');\n  storyRoot.classList.remove('highlight-property');\n  storyRoot.classList.remove('highlight-action');\n\n  if (!highlights) return;\n\n  // Re-enhance properties FIRST to ensure they're marked\n  enhanceProperties();\n\n  // Then add specific highlighting classes\n  if (highlights.context) storyRoot.classList.add('highlight-context');\n  if (highlights.entity) storyRoot.classList.add('highlight-entity');\n  if (highlights.property) storyRoot.classList.add('highlight-property');\n  if (highlights.action) storyRoot.classList.add('highlight-action');\n};\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n  const storyRoot = getStoryRootElement();\n  if (!storyRoot) {\n    channel.emit(EVENTS.RESULT, []);\n    return;\n  }\n\n  // Enhance DOM with property attributes\n  enhanceProperties(config.prefix || 'data-elb');\n\n  const events = getAllEvents(storyRoot as Element, config.prefix);\n\n  // Send the result back to the manager\n  channel.emit(EVENTS.RESULT, events);\n});\n\n// Global listener for highlighting events\nchannel.addListener(EVENTS.HIGHLIGHT, (config: WalkerOSAddon) => {\n  // Always inject CSS first\n  injectHighlightingCSS();\n\n  // Then apply highlighting\n  applyHighlighting(config.highlights);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n  // Update the current canvas element when a story renders\n  currentCanvasElement = context.canvasElement as Element;\n\n  // Check if story changed and auto-run is enabled\n  const storyId = context.id;\n  const hasStoryChanged = currentStoryId !== storyId;\n  const globals = context.globals;\n  const autoRefresh = globals?.walkerOS?.autoRefresh;\n\n  if (hasStoryChanged) {\n    currentStoryId = storyId;\n  }\n\n  const result = storyFn();\n\n  // Initialize walker and inject CSS after story renders\n  setTimeout(() => {\n    // Initialize walkerOS for live event capture\n    initializeWalker().catch((err) => {\n      console.error('Walker initialization failed:', err);\n    });\n\n    // Inject highlighting CSS and enhance properties\n    injectHighlightingCSS();\n    enhanceProperties();\n\n    // Auto-run walker if story changed and auto-refresh is enabled\n    if (hasStoryChanged && autoRefresh && window.elb) {\n      window.elb('walker run');\n    }\n  }, 200);\n\n  return result;\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withRoundTrip],\n  globalTypes: {\n    [ADDON_ID]: {\n      description: 'walkerOS addon configuration',\n      defaultValue: {\n        autoRefresh: true,\n        prefix: 'data-elb',\n        highlights: {\n          context: false,\n          entity: false,\n          property: false,\n          action: false,\n        },\n      },\n    },\n  },\n  initialGlobals: {\n    [ADDON_ID]: {\n      autoRefresh: true,\n      prefix: 'data-elb',\n      highlights: {\n        context: false,\n        entity: false,\n        property: false,\n        action: false,\n      },\n    },\n  },\n};\n\nexport default preview;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walkeros/storybook-addon",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Integrate walkerOS tagging support for data collection",
   "keywords": [
     "tracking",
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@walkeros/core": "*",
+    "@walkeros/collector": "*",
     "@walkeros/web-core": "*",
     "@walkeros/web-source-browser": "*",
     "@storybook/icons": "^1.4.0"