8282 if ( ! elements || ! Array . isArray ( elements ) ) return ;
8383 removeOverlay ( ) ;
8484 const host = document . createElement ( "div" ) ;
85- host . id = OVERLAY_HOST_ID , host . style . cssText = "\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n pointer-events: none !important;\n z-index: 2147483647 !important;\n margin: 0 !important;\n padding: 0 !important;\n " ,
85+ host . id = OVERLAY_HOST_ID , host . style . cssText = "\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n pointer-events: none !important;\n z-index: 2147483647 !important;\n margin: 0 !important;\n padding: 0 !important;\n " ,
8686 document . body . appendChild ( host ) ;
8787 const shadow = host . attachShadow ( {
8888 mode : "closed"
9494 let color ;
9595 color = isTarget ? "#FF0000" : isPrimary ? "#0066FF" : "#00FF00" ;
9696 const importanceRatio = maxImportance > 0 ? importance / maxImportance : .5 , borderOpacity = isTarget ? 1 : isPrimary ? .9 : Math . max ( .4 , .5 + .5 * importanceRatio ) , fillOpacity = .2 * borderOpacity , borderWidth = isTarget ? 2 : isPrimary ? 1.5 : Math . max ( .5 , Math . round ( 2 * importanceRatio ) ) , hexOpacity = Math . round ( 255 * fillOpacity ) . toString ( 16 ) . padStart ( 2 , "0" ) , box = document . createElement ( "div" ) ;
97- if ( box . style . cssText = `\n position: absolute;\n left: ${ bbox . x } px;\n top: ${ bbox . y } px;\n width: ${ bbox . width } px;\n height: ${ bbox . height } px;\n border: ${ borderWidth } px solid ${ color } ;\n background-color: ${ color } ${ hexOpacity } ;\n box-sizing: border-box;\n opacity: ${ borderOpacity } ;\n pointer-events: none;\n ` ,
97+ if ( box . style . cssText = `\n position: absolute;\n left: ${ bbox . x } px;\n top: ${ bbox . y } px;\n width: ${ bbox . width } px;\n height: ${ bbox . height } px;\n border: ${ borderWidth } px solid ${ color } ;\n background-color: ${ color } ${ hexOpacity } ;\n box-sizing: border-box;\n opacity: ${ borderOpacity } ;\n pointer-events: none;\n ` ,
9898 importance > 0 || isPrimary ) {
9999 const badge = document . createElement ( "span" ) ;
100- badge . textContent = isPrimary ? `⭐${ importance } ` : `${ importance } ` , badge . style . cssText = `\n position: absolute;\n top: -18px;\n left: 0;\n background: ${ color } ;\n color: white;\n font-size: 11px;\n font-weight: bold;\n padding: 2px 6px;\n font-family: Arial, sans-serif;\n border-radius: 3px;\n opacity: 0.95;\n white-space: nowrap;\n pointer-events: none;\n ` ,
100+ badge . textContent = isPrimary ? `⭐${ importance } ` : `${ importance } ` , badge . style . cssText = `\n position: absolute;\n top: -18px;\n left: 0;\n background: ${ color } ;\n color: white;\n font-size: 11px;\n font-weight: bold;\n padding: 2px 6px;\n font-family: Arial, sans-serif;\n border-radius: 3px;\n opacity: 0.95;\n white-space: nowrap;\n pointer-events: none;\n ` ,
101101 box . appendChild ( badge ) ;
102102 }
103103 if ( isTarget ) {
104104 const targetIndicator = document . createElement ( "span" ) ;
105- targetIndicator . textContent = "🎯" , targetIndicator . style . cssText = "\n position: absolute;\n top: -18px;\n right: 0;\n font-size: 16px;\n pointer-events: none;\n " ,
105+ targetIndicator . textContent = "🎯" , targetIndicator . style . cssText = "\n position: absolute;\n top: -18px;\n right: 0;\n font-size: 16px;\n pointer-events: none;\n " ,
106106 box . appendChild ( targetIndicator ) ;
107107 }
108108 shadow . appendChild ( box ) ;
114114
115115 case "SENTIENCE_CLEAR_OVERLAY" :
116116 removeOverlay ( ) ;
117+ break ;
118+
119+ case "SENTIENCE_SHOW_GRID_OVERLAY" :
120+ ! function ( data ) {
121+ const { grids : grids , targetGridId : targetGridId } = data ;
122+ if ( ! grids || ! Array . isArray ( grids ) ) return ;
123+ removeOverlay ( ) ;
124+ const host = document . createElement ( "div" ) ;
125+ host . id = OVERLAY_HOST_ID , host . style . cssText = "\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100vw !important;\n height: 100vh !important;\n pointer-events: none !important;\n z-index: 2147483647 !important;\n margin: 0 !important;\n padding: 0 !important;\n " ,
126+ document . body . appendChild ( host ) ;
127+ const shadow = host . attachShadow ( {
128+ mode : "closed"
129+ } ) ;
130+ grids . forEach ( grid => {
131+ const bbox = grid . bbox ;
132+ if ( ! bbox ) return ;
133+ const isTarget = grid . grid_id === targetGridId , isDominant = ! 0 === grid . is_dominant ;
134+ let color = "#9B59B6" ;
135+ isTarget ? color = "#FF0000" : isDominant && ( color = "#FF8C00" ) ;
136+ const borderStyle = isTarget ? "solid" : "dashed" , borderWidth = isTarget ? 3 : isDominant ? 2.5 : 2 , opacity = isTarget ? 1 : isDominant ? .9 : .8 , fillOpacity = .1 * opacity , hexOpacity = Math . round ( 255 * fillOpacity ) . toString ( 16 ) . padStart ( 2 , "0" ) , box = document . createElement ( "div" ) ;
137+ box . style . cssText = `\n position: absolute;\n left: ${ bbox . x } px;\n top: ${ bbox . y } px;\n width: ${ bbox . width } px;\n height: ${ bbox . height } px;\n border: ${ borderWidth } px ${ borderStyle } ${ color } ;\n background-color: ${ color } ${ hexOpacity } ;\n box-sizing: border-box;\n opacity: ${ opacity } ;\n pointer-events: none;\n ` ;
138+ let labelText = grid . label ? `Grid ${ grid . grid_id } : ${ grid . label } ` : `Grid ${ grid . grid_id } ` ;
139+ grid . is_dominant && ( labelText = `⭐ ${ labelText } (dominant)` ) ;
140+ const badge = document . createElement ( "span" ) ;
141+ if ( badge . textContent = labelText , badge . style . cssText = `\n position: absolute;\n top: -18px;\n left: 0;\n background: ${ color } ;\n color: white;\n font-size: 11px;\n font-weight: bold;\n padding: 2px 6px;\n font-family: Arial, sans-serif;\n border-radius: 3px;\n opacity: 0.95;\n white-space: nowrap;\n pointer-events: none;\n ` ,
142+ box . appendChild ( badge ) , isTarget ) {
143+ const targetIndicator = document . createElement ( "span" ) ;
144+ targetIndicator . textContent = "🎯" , targetIndicator . style . cssText = "\n position: absolute;\n top: -18px;\n right: 0;\n font-size: 16px;\n pointer-events: none;\n " ,
145+ box . appendChild ( targetIndicator ) ;
146+ }
147+ shadow . appendChild ( box ) ;
148+ } ) , overlayTimeout = setTimeout ( ( ) => {
149+ removeOverlay ( ) ;
150+ } , 5e3 ) ;
151+ } ( event . data ) ;
117152 }
118153 } ) ;
119154 const OVERLAY_HOST_ID = "sentience-overlay-host" ;
120155 let overlayTimeout = null ;
121156 function removeOverlay ( ) {
122157 const existing = document . getElementById ( OVERLAY_HOST_ID ) ;
123- existing && existing . remove ( ) , overlayTimeout && ( clearTimeout ( overlayTimeout ) ,
158+ existing && existing . remove ( ) , overlayTimeout && ( clearTimeout ( overlayTimeout ) ,
124159 overlayTimeout = null ) ;
125160 }
126- } ( ) ;
161+ } ( ) ;
0 commit comments