[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"cycle-doc-qnative-c10-review-3.md":3},{"cycle":4,"project":7,"path":10,"title":11,"toc":12,"ast":17},{"id":5,"title":6},"c10","Guide Walk",{"id":8,"label":9},"qnative","Qnative (provisional)","review-3.md","c10 · Review stop 3",[13,14,15,16],"Whether it predates c10","What changed","Tests","For Mark",{"type":18,"children":19},"root",[20,46,52,65,70,85,98,103,136,227,232,296,301,306],{"type":21,"tag":22,"props":23,"children":24},"element","p",{},[25,28,35,37,44],{"type":26,"value":27},"text","Branch ",{"type":21,"tag":29,"props":30,"children":32},"code",{"className":31},[],[33],{"type":26,"value":34},"claude\u002Fguide-walk-fixes-f9dd48",{"type":26,"value":36},", the commit after 2045243. Not pushed, not merged. This answers Mark's capture of the tour picker on 2045243 running live (",{"type":21,"tag":38,"props":39,"children":41},"a",{"href":40},"captures\u002Ftour-menu-broken-mark.png",[42],{"type":26,"value":43},"his capture",{"type":26,"value":45},"), sent by the walk session.",{"type":21,"tag":47,"props":48,"children":50},"h2",{"id":49},"whether-it-predates-c10",[51],{"type":26,"value":13},{"type":21,"tag":22,"props":53,"children":54},{},[55,57,63],{"type":26,"value":56},"It does. The menu (",{"type":21,"tag":29,"props":58,"children":60},{"className":59},[],[61],{"type":26,"value":62},"view::menu",{"type":26,"value":64},") has been unchanged since c2's Tour stretch (9d37433, 2026-11-11). It was always a fixed 320 px wide, its words never wrapped, and it had the panel's own ground with no edge.",{"type":21,"tag":22,"props":66,"children":67},{},[68],{"type":26,"value":69},"Two later changes made the flaws show:",{"type":21,"tag":71,"props":72,"children":73},"ul",{},[74,80],{"type":21,"tag":75,"props":76,"children":77},"li",{},[78],{"type":26,"value":79},"e4fc308's undocked panel is 380 px wide, so the overflowing words now land on the page.",{"type":21,"tag":75,"props":81,"children":82},{},[83],{"type":26,"value":84},"c10's synthetic note sits right under the menu.",{"type":21,"tag":22,"props":86,"children":87},{},[88,90,96],{"type":26,"value":89},"The note didn't really show ",{"type":21,"tag":91,"props":92,"children":93},"em",{},[94],{"type":26,"value":95},"through",{"type":26,"value":97}," the menu. The menu was narrower than the panel and had no edge, so the note's corner and last lines sat just outside it and read as if under it.",{"type":21,"tag":47,"props":99,"children":101},{"id":100},"what-changed",[102],{"type":26,"value":14},{"type":21,"tag":22,"props":104,"children":105},{},[106,112,114,120,121,127,128,134],{"type":21,"tag":38,"props":107,"children":109},{"href":108},"captures\u002Fapp-tour-menu-light.png",[110],{"type":26,"value":111},"Docked, light",{"type":26,"value":113}," · ",{"type":21,"tag":38,"props":115,"children":117},{"href":116},"captures\u002Fapp-tour-menu-dark.png",[118],{"type":26,"value":119},"docked, dark",{"type":26,"value":113},{"type":21,"tag":38,"props":122,"children":124},{"href":123},"captures\u002Fapp-tour-menu-undocked-light.png",[125],{"type":26,"value":126},"undocked, light",{"type":26,"value":113},{"type":21,"tag":38,"props":129,"children":131},{"href":130},"captures\u002Fapp-tour-menu-undocked-dark.png",[132],{"type":26,"value":133},"undocked, dark",{"type":26,"value":135},".",{"type":21,"tag":71,"props":137,"children":138},{},[139,161,171,181,191],{"type":21,"tag":75,"props":140,"children":141},{},[142,148],{"type":21,"tag":143,"props":144,"children":145},"strong",{},[146],{"type":26,"value":147},"One surface.",{"type":21,"tag":71,"props":149,"children":150},{},[151,156],{"type":21,"tag":75,"props":152,"children":153},{},[154],{"type":26,"value":155},"The menu is the kit's raised surface (white in light, #111 in dark) with the panel's hairline, a deeper shadow and radius 10 from the token scale.",{"type":21,"tag":75,"props":157,"children":158},{},[159],{"type":26,"value":160},"It's the panel's last child, so it paints over the body and footer, and it keeps clicks and the wheel to itself.",{"type":21,"tag":75,"props":162,"children":163},{},[164,169],{"type":21,"tag":143,"props":165,"children":166},{},[167],{"type":26,"value":168},"As wide as the panel.",{"type":26,"value":170}," It runs 16 px in from each edge, docked or undocked.",{"type":21,"tag":75,"props":172,"children":173},{},[174,179],{"type":21,"tag":143,"props":175,"children":176},{},[177],{"type":26,"value":178},"Words wrapped inside it.",{"type":26,"value":180}," Each item's name and line wrap within the item. The longest lines take a second line at the undocked width.",{"type":21,"tag":75,"props":182,"children":183},{},[184,189],{"type":21,"tag":143,"props":185,"children":186},{},[187],{"type":26,"value":188},"The highlight is the whole item",{"type":26,"value":190},", edge to edge.",{"type":21,"tag":75,"props":192,"children":193},{},[194,199,201,207,209],{"type":21,"tag":143,"props":195,"children":196},{},[197],{"type":26,"value":198},"No repeated name.",{"type":26,"value":200}," The line under each name is the title without the name it repeats (",{"type":21,"tag":29,"props":202,"children":204},{"className":203},[],[205],{"type":26,"value":206},"view::menu_line",{"type":26,"value":208},"):\n",{"type":21,"tag":71,"props":210,"children":211},{},[212,217,222],{"type":21,"tag":75,"props":213,"children":214},{},[215],{"type":26,"value":216},"\"What it does on your machine, what it records, and how it reaches you\"",{"type":21,"tag":75,"props":218,"children":219},{},[220],{"type":26,"value":221},"\"The AI tools here, what they use and where they work\"",{"type":21,"tag":75,"props":223,"children":224},{},[225],{"type":26,"value":226},"\"Played as a simulation\"",{"type":21,"tag":47,"props":228,"children":230},{"id":229},"tests",[231],{"type":26,"value":15},{"type":21,"tag":71,"props":233,"children":234},{},[235,275],{"type":21,"tag":75,"props":236,"children":237},{},[238,244,246],{"type":21,"tag":29,"props":239,"children":241},{"className":240},[],[242],{"type":26,"value":243},"the_tour_menu_keeps_its_words_inside_the_panel",{"type":26,"value":245},", docked and undocked:\n",{"type":21,"tag":71,"props":247,"children":248},{},[249,254,259,264],{"type":21,"tag":75,"props":250,"children":251},{},[252],{"type":26,"value":253},"an item per tour, each inside the panel's bounds;",{"type":21,"tag":75,"props":255,"children":256},{},[257],{"type":26,"value":258},"no line repeating its name;",{"type":21,"tag":75,"props":260,"children":261},{},[262],{"type":26,"value":263},"wrapping at the undocked width;",{"type":21,"tag":75,"props":265,"children":266},{},[267,273],{"type":21,"tag":29,"props":268,"children":270},{"className":269},[],[271],{"type":26,"value":272},"menu_line",{"type":26,"value":274},"'s three cases.",{"type":21,"tag":75,"props":276,"children":277},{},[278,280,286,288,294],{"type":26,"value":279},"Stories ",{"type":21,"tag":29,"props":281,"children":283},{"className":282},[],[284],{"type":26,"value":285},"app-tour-menu",{"type":26,"value":287}," and ",{"type":21,"tag":29,"props":289,"children":291},{"className":290},[],[292],{"type":26,"value":293},"app-tour-menu-undocked",{"type":26,"value":295},", light and dark.",{"type":21,"tag":22,"props":297,"children":298},{},[299],{"type":26,"value":300},"The test reads the items' boxes, not the pixels. A first try that deferred the menu's paint recorded the boxes but drew nothing, and only the capture caught it, so the captures are the check for paint.",{"type":21,"tag":47,"props":302,"children":304},{"id":303},"for-mark",[305],{"type":26,"value":16},{"type":21,"tag":71,"props":307,"children":308},{},[309],{"type":21,"tag":75,"props":310,"children":311},{},[312],{"type":26,"value":313},"Under \"Simulation · Phishing for financial records\", the line now reads only \"Played as a simulation\". The alternative is the tour's stop questions, which run to four or six per tour; I kept the shorter line.",1794599464647]