[{"data":1,"prerenderedAt":1441},["ShallowReactive",2],{"cycle-doc-design-c132-process.md":3},{"cycle":4,"project":7,"path":10,"title":11,"toc":12,"ast":17},{"id":5,"title":6},"c132","Native Design Prototyping",{"id":8,"label":9},"design","Design","process.md","The loop for native screens (c132 Phase 3, 2026-11-11)",[13,14,15,16],"Who does which step, with what","The media, exactly","The review stop, as a page","What is not in the loop yet",{"type":18,"children":19},"root",[20,50,70,139,151,157,566,571,578,968,974,1174,1180,1251,1257,1337,1342,1376,1381],{"type":21,"tag":22,"props":23,"children":24},"element","p",{},[25,32,34,39,41,48],{"type":21,"tag":26,"props":27,"children":28},"strong",{},[29],{"type":30,"value":31},"text","Reader:",{"type":30,"value":33}," whoever mocks, reviews or pushes a screen of the native app: Mark, a designer, c131's executor and the cycles after it. ",{"type":21,"tag":26,"props":35,"children":36},{},[37],{"type":30,"value":38},"Rests on:",{"type":30,"value":40}," Mark's rulings of 2026-11-11 (D1, D6–D8), c131 R6 (the demo is the test) and D14\u002FD18 (Inter; our layer drawn with our tokens, the kit for the shell), c130 D5. Drawn as ",{"type":21,"tag":42,"props":43,"children":45},"a",{"href":44},"\u002Fcycles\u002Fdesign\u002Fsketches\u002Fc132-loop",[46],{"type":30,"value":47},"The design loop for native screens",{"type":30,"value":49},".",{"type":21,"tag":22,"props":51,"children":52},{},[53,55,60,62,68],{"type":30,"value":54},"The five steps design has always used stay: ",{"type":21,"tag":26,"props":56,"children":57},{},[58],{"type":30,"value":59},"brief → mock → experiment → refine → push.",{"type":30,"value":61}," What changed is the medium under each, because the native app has no DOM to draw in, no Tailwind class to transcribe and no URL to capture. Two media carry the loop, ruled from the bake-off (",{"type":21,"tag":42,"props":63,"children":65},{"href":64},"\u002Fcycles\u002Fdesign\u002Fc132\u002Fdoc\u002Freview",[66],{"type":30,"value":67},"review.md",{"type":30,"value":69},"):",{"type":21,"tag":71,"props":72,"children":73},"ul",{},[74,109],{"type":21,"tag":75,"props":76,"children":77},"li",{},[78,83,85,92,94,100,102,107],{"type":21,"tag":26,"props":79,"children":80},{},[81],{"type":30,"value":82},"A, the native skin on the design site",{"type":30,"value":84}," (",{"type":21,"tag":86,"props":87,"children":89},"code",{"className":88},[],[90],{"type":30,"value":91},"\u002Fpages\u002Fnative\u002F",{"type":30,"value":93},"): Vue pages composed from the layer inside an imitation of the kit's chrome, rows from the app's own worlds. The medium to ",{"type":21,"tag":95,"props":96,"children":97},"em",{},[98],{"type":30,"value":99},"sketch",{"type":30,"value":101}," and to ",{"type":21,"tag":95,"props":103,"children":104},{},[105],{"type":30,"value":106},"review",{"type":30,"value":108},": a person without a toolchain, or an agent sketching before Rust. Not shipped; never the record.",{"type":21,"tag":75,"props":110,"children":111},{},[112,123,124,130,132,137],{"type":21,"tag":26,"props":113,"children":114},{},[115,117],{"type":30,"value":116},"B, the stories crate in ",{"type":21,"tag":86,"props":118,"children":120},{"className":119},[],[121],{"type":30,"value":122},"..\u002Fqnative",{"type":30,"value":84},{"type":21,"tag":86,"props":125,"children":127},{"className":126},[],[128],{"type":30,"value":129},"crates\u002Fstories",{"type":30,"value":131},"): the real app at a route, in a world, rendered off-screen. The medium ",{"type":21,"tag":95,"props":133,"children":134},{},[135],{"type":30,"value":136},"of record",{"type":30,"value":138},": what a story draws is what ships, and the story is the page's test.",{"type":21,"tag":22,"props":140,"children":141},{},[142,144,149],{"type":30,"value":143},"One rule binds them (D6): ",{"type":21,"tag":26,"props":145,"children":146},{},[147],{"type":30,"value":148},"no mock invents a row.",{"type":30,"value":150}," A mock and a story name the same world, so a capture of each can be wiped over the other and must agree to the digit. The token bridge keeps them one colour; the world keeps them one truth.",{"type":21,"tag":152,"props":153,"children":155},"h2",{"id":154},"who-does-which-step-with-what",[156],{"type":30,"value":13},{"type":21,"tag":158,"props":159,"children":160},"table",{},[161,190],{"type":21,"tag":162,"props":163,"children":164},"thead",{},[165],{"type":21,"tag":166,"props":167,"children":168},"tr",{},[169,175,180,185],{"type":21,"tag":170,"props":171,"children":172},"th",{},[173],{"type":30,"value":174},"Step",{"type":21,"tag":170,"props":176,"children":177},{},[178],{"type":30,"value":179},"What it produces",{"type":21,"tag":170,"props":181,"children":182},{},[183],{"type":30,"value":184},"A person does it with",{"type":21,"tag":170,"props":186,"children":187},{},[188],{"type":30,"value":189},"An agent does it with",{"type":21,"tag":191,"props":192,"children":193},"tbody",{},[194,261,373,469,518],{"type":21,"tag":166,"props":195,"children":196},{},[197,206,211,232],{"type":21,"tag":198,"props":199,"children":200},"td",{},[201],{"type":21,"tag":26,"props":202,"children":203},{},[204],{"type":30,"value":205},"1 · Brief",{"type":21,"tag":198,"props":207,"children":208},{},[209],{"type":30,"value":210},"the page, its states and the world each state lives in; the kit's design guides as the brief every mock is held to",{"type":21,"tag":198,"props":212,"children":213},{},[214,216,222,224,230],{"type":30,"value":215},"the cycle's ",{"type":21,"tag":86,"props":217,"children":219},{"className":218},[],[220],{"type":30,"value":221},"initial-prompt.md",{"type":30,"value":223}," and plan; ",{"type":21,"tag":86,"props":225,"children":227},{"className":226},[],[228],{"type":30,"value":229},"cycles\u002Fc131.native-app-v1\u002Fsynthetic-data.md",{"type":30,"value":231}," for the worlds and the states ladder (empty · minimal · typical · overflow · error)",{"type":21,"tag":198,"props":233,"children":234},{},[235,237,243,245,251,253,259],{"type":30,"value":236},"the same, plus the kit's guides (",{"type":21,"tag":86,"props":238,"children":240},{"className":239},[],[241],{"type":30,"value":242},"agent-tooling.md",{"type":30,"value":244}," in the c130 primer: ",{"type":21,"tag":86,"props":246,"children":248},{"className":247},[],[249],{"type":30,"value":250},"llms-full.txt",{"type":30,"value":252},", ",{"type":21,"tag":86,"props":254,"children":256},{"className":255},[],[257],{"type":30,"value":258},"\u002Fdocs\u002F\u003Cname>.md",{"type":30,"value":260},")",{"type":21,"tag":166,"props":262,"children":263},{},[264,272,277,333],{"type":21,"tag":198,"props":265,"children":266},{},[267],{"type":21,"tag":26,"props":268,"children":269},{},[270],{"type":30,"value":271},"2 · Mock",{"type":21,"tag":198,"props":273,"children":274},{},[275],{"type":30,"value":276},"a drawing of the screen in each state",{"type":21,"tag":198,"props":278,"children":279},{},[280,285,287,293,295,301,303,309,311,317,319,325,327],{"type":21,"tag":26,"props":281,"children":282},{},[283],{"type":30,"value":284},"A:",{"type":30,"value":286}," a page under ",{"type":21,"tag":86,"props":288,"children":290},{"className":289},[],[291],{"type":30,"value":292},"app\u002Fpages\u002Fpages\u002Fnative\u002F",{"type":30,"value":294}," in the skin (",{"type":21,"tag":86,"props":296,"children":298},{"className":297},[],[299],{"type":30,"value":300},"app\u002Fcomponents\u002Fnative\u002F",{"type":30,"value":302},"), rows through ",{"type":21,"tag":86,"props":304,"children":306},{"className":305},[],[307],{"type":30,"value":308},"useNativeWorld(name)",{"type":30,"value":310},", registered in ",{"type":21,"tag":86,"props":312,"children":314},{"className":313},[],[315],{"type":30,"value":316},"page-registry.ts",{"type":30,"value":318}," as phase ",{"type":21,"tag":86,"props":320,"children":322},{"className":321},[],[323],{"type":30,"value":324},"native",{"type":30,"value":326},"; a world picked by ",{"type":21,"tag":86,"props":328,"children":330},{"className":329},[],[331],{"type":30,"value":332},"?world=",{"type":21,"tag":198,"props":334,"children":335},{},[336,341,343,348,350,356,358,364,366,372],{"type":21,"tag":26,"props":337,"children":338},{},[339],{"type":30,"value":340},"A",{"type":30,"value":342}," the same way, or ",{"type":21,"tag":26,"props":344,"children":345},{},[346],{"type":30,"value":347},"B",{"type":30,"value":349}," straight away: the page in ",{"type":21,"tag":86,"props":351,"children":353},{"className":352},[],[354],{"type":30,"value":355},"crates\u002Fapp\u002Fsrc\u002Fpages\u002F",{"type":30,"value":357}," from the layer in Rust, a ",{"type":21,"tag":86,"props":359,"children":361},{"className":360},[],[362],{"type":30,"value":363},"Story",{"type":30,"value":365}," per state (",{"type":21,"tag":86,"props":367,"children":369},{"className":368},[],[370],{"type":30,"value":371},"\u002Fgpui-story",{"type":30,"value":260},{"type":21,"tag":166,"props":374,"children":375},{},[376,384,396,429],{"type":21,"tag":198,"props":377,"children":378},{},[379],{"type":21,"tag":26,"props":380,"children":381},{},[382],{"type":30,"value":383},"3 · Experiment",{"type":21,"tag":198,"props":385,"children":386},{},[387,389,394],{"type":30,"value":388},"every state, every world, as a captured artifact. A state is a world: a state no world carries is a world to cut, and until it exists a lab knob may stand in for the ",{"type":21,"tag":95,"props":390,"children":391},{},[392],{"type":30,"value":393},"state",{"type":30,"value":395}," only, marked as chrome, never for a row (Phase 4's Status)",{"type":21,"tag":198,"props":397,"children":398},{},[399,403,405,411,413,419,421,427],{"type":21,"tag":26,"props":400,"children":401},{},[402],{"type":30,"value":284},{"type":30,"value":404}," ",{"type":21,"tag":86,"props":406,"children":408},{"className":407},[],[409],{"type":30,"value":410},"npm run shots -- --program \u003Cprogram.json>",{"type":30,"value":412}," with ",{"type":21,"tag":86,"props":414,"children":416},{"className":415},[],[417],{"type":30,"value":418},"scale: 2",{"type":30,"value":420}," and ",{"type":21,"tag":86,"props":422,"children":424},{"className":423},[],[425],{"type":30,"value":426},"clip: \".native-window\"",{"type":30,"value":428}," (the window as the window, at the app's 2×); one shot per world",{"type":21,"tag":198,"props":430,"children":431},{},[432,437,438,444,446,452,453,459,461,467],{"type":21,"tag":26,"props":433,"children":434},{},[435],{"type":30,"value":436},"B:",{"type":30,"value":404},{"type":21,"tag":86,"props":439,"children":441},{"className":440},[],[442],{"type":30,"value":443},"npm run shots -- --native \u003Cprogram.json>",{"type":30,"value":445}," (the native capture mode): the stories binary per world, PNGs into ",{"type":21,"tag":86,"props":447,"children":449},{"className":448},[],[450],{"type":30,"value":451},"public\u002Fcycles\u002Fqnative\u002F",{"type":30,"value":412},{"type":21,"tag":86,"props":454,"children":456},{"className":455},[],[457],{"type":30,"value":458},"surface: native",{"type":30,"value":460},"; ",{"type":21,"tag":86,"props":462,"children":464},{"className":463},[],[465],{"type":30,"value":466},"cargo test",{"type":30,"value":468}," for the headless tests",{"type":21,"tag":166,"props":470,"children":471},{},[472,480,485,506],{"type":21,"tag":198,"props":473,"children":474},{},[475],{"type":21,"tag":26,"props":476,"children":477},{},[478],{"type":30,"value":479},"4 · Refine",{"type":21,"tag":198,"props":481,"children":482},{},[483],{"type":30,"value":484},"the review stop: what changed, what is open, the pick",{"type":21,"tag":198,"props":486,"children":487},{},[488,490,496,498,504],{"type":30,"value":489},"the cycle's review page: A beside B with ",{"type":21,"tag":86,"props":491,"children":493},{"className":492},[],[494],{"type":30,"value":495},"UxImageCompare",{"type":30,"value":497}," (wipe) on the same world, as ",{"type":21,"tag":86,"props":499,"children":501},{"className":500},[],[502],{"type":30,"value":503},"\u002Fpages\u002Fnative\u002Fbake-off",{"type":30,"value":505},"; the skin's chrome wiped against a real shell capture at every stop (D7); Illustrator from a capture if hand work is wanted (D5, raster only)",{"type":21,"tag":198,"props":507,"children":508},{},[509,511,517],{"type":30,"value":510},"the same page, built and captured; the review note in the cycle (",{"type":21,"tag":86,"props":512,"children":514},{"className":513},[],[515],{"type":30,"value":516},"review*.md",{"type":30,"value":260},{"type":21,"tag":166,"props":519,"children":520},{},[521,529,534,546],{"type":21,"tag":198,"props":522,"children":523},{},[524],{"type":21,"tag":26,"props":525,"children":526},{},[527],{"type":30,"value":528},"5 · Push",{"type":21,"tag":198,"props":530,"children":531},{},[532],{"type":30,"value":533},"the screen in the app, its story as its test, the record",{"type":21,"tag":198,"props":535,"children":536},{},[537,539,545],{"type":30,"value":538},"the pick and its reasons in the cycle's CYCLE.md; the pattern for the engineers (c131 D11, qnative ",{"type":21,"tag":86,"props":540,"children":542},{"className":541},[],[543],{"type":30,"value":544},"PATTERNS.md",{"type":30,"value":260},{"type":21,"tag":198,"props":547,"children":548},{},[549,551,557,559,564],{"type":30,"value":550},"the port into ",{"type":21,"tag":86,"props":552,"children":554},{"className":553},[],[555],{"type":30,"value":556},"crates\u002Fapp",{"type":30,"value":558}," (A → B through ",{"type":21,"tag":86,"props":560,"children":562},{"className":561},[],[563],{"type":30,"value":371},{"type":30,"value":565},"); the story's capture into the atlas; the mock stays as the person's medium, naming its world (D8)",{"type":21,"tag":152,"props":567,"children":569},{"id":568},"the-media-exactly",[570],{"type":30,"value":14},{"type":21,"tag":572,"props":573,"children":575},"h3",{"id":574},"a-the-native-skin",[576],{"type":30,"value":577},"A · the native skin",{"type":21,"tag":71,"props":579,"children":580},{},[581,726,795,829,855,873,891],{"type":21,"tag":75,"props":582,"children":583},{},[584,589,590,596,598,603,604,610,612,618,619,625,626,632,633,639,640,646,647,653,655,661,663,669,670,676,677,683,684,690,691,697,698,704,705,711,712,718,719,725],{"type":21,"tag":26,"props":585,"children":586},{},[587],{"type":30,"value":588},"Where:",{"type":30,"value":404},{"type":21,"tag":86,"props":591,"children":593},{"className":592},[],[594],{"type":30,"value":595},"app\u002Fpages\u002Fpages\u002Fnative\u002F\u003Cpage>.vue",{"type":30,"value":597},", the skin in ",{"type":21,"tag":86,"props":599,"children":601},{"className":600},[],[602],{"type":30,"value":300},{"type":30,"value":84},{"type":21,"tag":86,"props":605,"children":607},{"className":606},[],[608],{"type":30,"value":609},"NativeWindow",{"type":30,"value":611}," with the title bar, the 212 px rail and the footer ",{"type":21,"tag":86,"props":613,"children":615},{"className":614},[],[616],{"type":30,"value":617},"data: \u003Csource>",{"type":30,"value":460},{"type":21,"tag":86,"props":620,"children":622},{"className":621},[],[623],{"type":30,"value":624},"NativePageHeader",{"type":30,"value":252},{"type":21,"tag":86,"props":627,"children":629},{"className":628},[],[630],{"type":30,"value":631},"NativePeriod",{"type":30,"value":252},{"type":21,"tag":86,"props":634,"children":636},{"className":635},[],[637],{"type":30,"value":638},"NativeLabBar",{"type":30,"value":252},{"type":21,"tag":86,"props":641,"children":643},{"className":642},[],[644],{"type":30,"value":645},"NativeSkeleton",{"type":30,"value":252},{"type":21,"tag":86,"props":648,"children":650},{"className":649},[],[651],{"type":30,"value":652},"NativeIcon",{"type":30,"value":654},"). The page sits inside ",{"type":21,"tag":86,"props":656,"children":658},{"className":657},[],[659],{"type":30,"value":660},"\u003CNativeWindow>",{"type":30,"value":662}," and composes the layer: ",{"type":21,"tag":86,"props":664,"children":666},{"className":665},[],[667],{"type":30,"value":668},"DataIndexSection",{"type":30,"value":252},{"type":21,"tag":86,"props":671,"children":673},{"className":672},[],[674],{"type":30,"value":675},"DataMachine*",{"type":30,"value":252},{"type":21,"tag":86,"props":678,"children":680},{"className":679},[],[681],{"type":30,"value":682},"DataTable",{"type":30,"value":252},{"type":21,"tag":86,"props":685,"children":687},{"className":686},[],[688],{"type":30,"value":689},"DataListingBar",{"type":30,"value":252},{"type":21,"tag":86,"props":692,"children":694},{"className":693},[],[695],{"type":30,"value":696},"ActorHeader",{"type":30,"value":252},{"type":21,"tag":86,"props":699,"children":701},{"className":700},[],[702],{"type":30,"value":703},"NavJumpPills",{"type":30,"value":252},{"type":21,"tag":86,"props":706,"children":708},{"className":707},[],[709],{"type":30,"value":710},"DataSurfaceSection",{"type":30,"value":252},{"type":21,"tag":86,"props":713,"children":715},{"className":714},[],[716],{"type":30,"value":717},"UxPill",{"type":30,"value":252},{"type":21,"tag":86,"props":720,"children":722},{"className":721},[],[723],{"type":30,"value":724},"AgentAvatar",{"type":30,"value":49},{"type":21,"tag":75,"props":727,"children":728},{},[729,734,735,741,742,748,750,756,758,764,766,772,774,779,780,786,788,794],{"type":21,"tag":26,"props":730,"children":731},{},[732],{"type":30,"value":733},"Rows:",{"type":30,"value":404},{"type":21,"tag":86,"props":736,"children":738},{"className":737},[],[739],{"type":30,"value":740},"useNativeWorld(world)",{"type":30,"value":84},{"type":21,"tag":86,"props":743,"children":745},{"className":744},[],[746],{"type":30,"value":747},"app\u002Fcomposables\u002FuseNativeWorld.ts",{"type":30,"value":749},"): ",{"type":21,"tag":86,"props":751,"children":753},{"className":752},[],[754],{"type":30,"value":755},"get(route, params)",{"type":30,"value":757}," by the nozzle's request key; ",{"type":21,"tag":86,"props":759,"children":761},{"className":760},[],[762],{"type":30,"value":763},"list()",{"type":30,"value":765}," for a listing; the manifest for the footer. The rollups a page computes live in ",{"type":21,"tag":86,"props":767,"children":769},{"className":768},[],[770],{"type":30,"value":771},"app\u002Fdata\u002Fnative-\u003Csection>.ts",{"type":30,"value":773},", ported from the Rust page they mirror. The knobs (",{"type":21,"tag":86,"props":775,"children":777},{"className":776},[],[778],{"type":30,"value":332},{"type":30,"value":252},{"type":21,"tag":86,"props":781,"children":783},{"className":782},[],[784],{"type":30,"value":785},"?period=",{"type":30,"value":787},", ids) are ",{"type":21,"tag":86,"props":789,"children":791},{"className":790},[],[792],{"type":30,"value":793},"useNativeMock()",{"type":30,"value":49},{"type":21,"tag":75,"props":796,"children":797},{},[798,803,805,811,813,819,821,827],{"type":21,"tag":26,"props":799,"children":800},{},[801],{"type":30,"value":802},"Worlds:",{"type":30,"value":804}," copies of ",{"type":21,"tag":86,"props":806,"children":808},{"className":807},[],[809],{"type":30,"value":810},"..\u002Fqnative\u002Fcrates\u002Ffixtures\u002Fworld\u002F",{"type":30,"value":812}," in ",{"type":21,"tag":86,"props":814,"children":816},{"className":815},[],[817],{"type":30,"value":818},"app\u002Fdata\u002Fworlds\u002F",{"type":30,"value":820},", refreshed by ",{"type":21,"tag":86,"props":822,"children":824},{"className":823},[],[825],{"type":30,"value":826},"scripts\u002Fsync-worlds.sh",{"type":30,"value":828}," after a recut; never edited here.",{"type":21,"tag":75,"props":830,"children":831},{},[832,837,839,845,847,853],{"type":21,"tag":26,"props":833,"children":834},{},[835],{"type":30,"value":836},"The clock:",{"type":30,"value":838}," the running app shifts a synthetic world's dates to today at load and says ",{"type":21,"tag":86,"props":840,"children":842},{"className":841},[],[843],{"type":30,"value":844},"· clock +Nd",{"type":30,"value":846}," in its footer (c131 synthetic-data.md §Time, qnative c5); its stories freeze the clock, so every capture reads the world's own dates. The lab reads the world's own dates too (no shift in ",{"type":21,"tag":86,"props":848,"children":850},{"className":849},[],[851],{"type":30,"value":852},"useNativeWorld",{"type":30,"value":854},"), because a mock is wiped against captures, not against the running app; the one place the lab uses the wall clock is \"last active … ago\" on the harness page, as the app does.",{"type":21,"tag":75,"props":856,"children":857},{},[858,863,865,871],{"type":21,"tag":26,"props":859,"children":860},{},[861],{"type":30,"value":862},"The honesty rule (D6, D10, confirmed 2026-11-11):",{"type":30,"value":864}," the page never fakes a fact and always says where one came from. A row is the world's, or the bridge's (and the footer says ",{"type":21,"tag":86,"props":866,"children":868},{"className":867},[],[869],{"type":30,"value":870},"sensor: bridge",{"type":30,"value":872},"), or it says \"not served yet\" and names the route that will serve it (a local qcontrol before c131 D17's routes). A state no world carries is a knob marked as chrome in A and a story parameter in B, until a world is cut for it.",{"type":21,"tag":75,"props":874,"children":875},{},[876,881,883,889],{"type":21,"tag":26,"props":877,"children":878},{},[879],{"type":30,"value":880},"Chrome (D7):",{"type":30,"value":882}," an imitation, re-checked at each review stop by a wipe against a capture of the real shell (",{"type":21,"tag":86,"props":884,"children":886},{"className":885},[],[887],{"type":30,"value":888},"\u002Fcycles\u002Fqnative\u002Fc2-app-landing-light.png",{"type":30,"value":890}," and its successors). No Vue port of the kit's Shell; no compositing of mocks into shell PNGs.",{"type":21,"tag":75,"props":892,"children":893},{},[894,899,901,907,909,914,915,920,922,928,929,935,936,942,944,950,952,958,960,966],{"type":21,"tag":26,"props":895,"children":896},{},[897],{"type":30,"value":898},"Captures:",{"type":30,"value":900}," a shot program per cycle (",{"type":21,"tag":86,"props":902,"children":904},{"className":903},[],[905],{"type":30,"value":906},"scripts\u002Fshot-programs\u002Fc132-bake-off.json",{"type":30,"value":908}," is the model): ",{"type":21,"tag":86,"props":910,"children":912},{"className":911},[],[913],{"type":30,"value":418},{"type":30,"value":252},{"type":21,"tag":86,"props":916,"children":918},{"className":917},[],[919],{"type":30,"value":426},{"type":30,"value":921},", one page entry per world with ",{"type":21,"tag":86,"props":923,"children":925},{"className":924},[],[926],{"type":30,"value":927},"subject: page\u002Fnative-\u003Cpage>",{"type":30,"value":420},{"type":21,"tag":86,"props":930,"children":932},{"className":931},[],[933],{"type":30,"value":934},"variant: world=\u003Cname>",{"type":30,"value":460},{"type":21,"tag":86,"props":937,"children":939},{"className":938},[],[940],{"type":30,"value":941},"hideCss",{"type":30,"value":943}," hides the site's nav, footer and ",{"type":21,"tag":86,"props":945,"children":947},{"className":946},[],[948],{"type":30,"value":949},"[data-lab-chrome]",{"type":30,"value":951},". The rail is an ",{"type":21,"tag":86,"props":953,"children":955},{"className":954},[],[956],{"type":30,"value":957},"\u003Caside>",{"type":30,"value":959}," because the capture system treats every ",{"type":21,"tag":86,"props":961,"children":963},{"className":962},[],[964],{"type":30,"value":965},"\u003Cnav>",{"type":30,"value":967}," as site chrome.",{"type":21,"tag":572,"props":969,"children":971},{"id":970},"b-the-stories-crate",[972],{"type":30,"value":973},"B · the stories crate",{"type":21,"tag":71,"props":975,"children":976},{},[977,1038,1095,1135],{"type":21,"tag":75,"props":978,"children":979},{},[980,984,985,991,992,998,1000,1006,1008,1014,1015,1021,1022,1028,1030,1036],{"type":21,"tag":26,"props":981,"children":982},{},[983],{"type":30,"value":588},{"type":30,"value":404},{"type":21,"tag":86,"props":986,"children":988},{"className":987},[],[989],{"type":30,"value":990},"..\u002Fqnative\u002Fcrates\u002Fstories\u002Fsrc\u002Fmain.rs",{"type":30,"value":252},{"type":21,"tag":86,"props":993,"children":995},{"className":994},[],[996],{"type":30,"value":997},"stories()",{"type":30,"value":999},": one ",{"type":21,"tag":86,"props":1001,"children":1003},{"className":1002},[],[1004],{"type":30,"value":1005},"Story { name, size, build }",{"type":30,"value":1007}," per page state; ",{"type":21,"tag":86,"props":1009,"children":1011},{"className":1010},[],[1012],{"type":30,"value":1013},"app_page(route)",{"type":30,"value":252},{"type":21,"tag":86,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":30,"value":1020},"app_page_at(route, Some(\"section\"))",{"type":30,"value":252},{"type":21,"tag":86,"props":1023,"children":1025},{"className":1024},[],[1026],{"type":30,"value":1027},"app_shell(route, Dev::…)",{"type":30,"value":1029},". Doc pages of ",{"type":21,"tag":86,"props":1031,"children":1033},{"className":1032},[],[1034],{"type":30,"value":1035},"layer::demos",{"type":30,"value":1037}," register themselves.",{"type":21,"tag":75,"props":1039,"children":1040},{},[1041,1046,1047,1053,1055,1061,1063,1069,1071,1077,1079,1085,1087,1093],{"type":21,"tag":26,"props":1042,"children":1043},{},[1044],{"type":30,"value":1045},"The world:",{"type":30,"value":404},{"type":21,"tag":86,"props":1048,"children":1050},{"className":1049},[],[1051],{"type":30,"value":1052},"QPOINT_WORLD",{"type":30,"value":1054}," (one line in ",{"type":21,"tag":86,"props":1056,"children":1058},{"className":1057},[],[1059],{"type":30,"value":1060},"app_shell_at",{"type":30,"value":1062},", qnative ",{"type":21,"tag":86,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":30,"value":1068},"b4cbc23",{"type":30,"value":1070},"); ",{"type":21,"tag":86,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":30,"value":1076},"fixtures::DEFAULT_WORLD",{"type":30,"value":1078}," otherwise (nina-mbp since the recut; ",{"type":21,"tag":86,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":30,"value":1084},"pilot",{"type":30,"value":1086}," is priya-x1). A state the bundled worlds do not carry is a world to cut (",{"type":21,"tag":86,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":30,"value":1092},"scripts\u002Fcut-world.py --host \u003Chost> --name \u003Cworld>",{"type":30,"value":1094},"), not a prop.",{"type":21,"tag":75,"props":1096,"children":1097},{},[1098,1103,1105,1111,1112,1118,1119,1125,1127,1133],{"type":21,"tag":26,"props":1099,"children":1100},{},[1101],{"type":30,"value":1102},"The test:",{"type":30,"value":1104}," a story is the visual test; a headless test proves behaviour (",{"type":21,"tag":86,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":30,"value":1110},"cargo test -p app",{"type":30,"value":252},{"type":21,"tag":86,"props":1113,"children":1115},{"className":1114},[],[1116],{"type":30,"value":1117},"-p layer",{"type":30,"value":460},{"type":21,"tag":86,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":30,"value":1124},"crates\u002Ffixtures",{"type":30,"value":1126},"' contract test over every world with ",{"type":21,"tag":86,"props":1128,"children":1130},{"className":1129},[],[1131],{"type":30,"value":1132},"--features types\u002Fstrict",{"type":30,"value":1134},").",{"type":21,"tag":75,"props":1136,"children":1137},{},[1138,1142,1143,1149,1151,1157,1158,1164,1166,1172],{"type":21,"tag":26,"props":1139,"children":1140},{},[1141],{"type":30,"value":898},{"type":30,"value":404},{"type":21,"tag":86,"props":1144,"children":1146},{"className":1145},[],[1147],{"type":30,"value":1148},"Window::render_to_image",{"type":30,"value":1150}," off-screen at the display's 2×, no Screen Recording; ",{"type":21,"tag":86,"props":1152,"children":1154},{"className":1153},[],[1155],{"type":30,"value":1156},"target\u002Fdebug\u002Fstories --only \u003Cstory> --mode light|dark|both --out \u003Cdir>",{"type":30,"value":460},{"type":21,"tag":86,"props":1159,"children":1161},{"className":1160},[],[1162],{"type":30,"value":1163},"--show",{"type":30,"value":1165}," to look. Into the atlas through design's native mode (below), which replaced qnative's ",{"type":21,"tag":86,"props":1167,"children":1169},{"className":1168},[],[1170],{"type":30,"value":1171},"scripts\u002Fpublish-stories.py",{"type":30,"value":1173}," for per-world runs.",{"type":21,"tag":572,"props":1175,"children":1177},{"id":1176},"the-native-capture-mode-d3",[1178],{"type":30,"value":1179},"The native capture mode (D3)",{"type":21,"tag":22,"props":1181,"children":1182},{},[1183,1189,1191,1197,1199,1205,1207,1212,1213,1219,1220,1226,1227,1233,1235,1241,1243,1249],{"type":21,"tag":86,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":30,"value":1188},"npm run shots -- --native \u003Cprogram.json> [--build] [--repo ..\u002Fqnative] [--bin \u003Cbinary>]",{"type":30,"value":1190}," in design: for each shot, runs the stories binary with ",{"type":21,"tag":86,"props":1192,"children":1194},{"className":1193},[],[1195],{"type":30,"value":1196},"QPOINT_WORLD=\u003Cworld>",{"type":30,"value":1198}," into a scratch dir, copies the PNG to ",{"type":21,"tag":86,"props":1200,"children":1202},{"className":1201},[],[1203],{"type":30,"value":1204},"public\u002Fcycles\u002F\u003Cproject>\u002F\u003Cname>.png",{"type":30,"value":1206}," and merges a manifest entry with ",{"type":21,"tag":86,"props":1208,"children":1210},{"className":1209},[],[1211],{"type":30,"value":458},{"type":30,"value":252},{"type":21,"tag":86,"props":1214,"children":1216},{"className":1215},[],[1217],{"type":30,"value":1218},"subject: native\u002F\u003Cstory>",{"type":30,"value":252},{"type":21,"tag":86,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":30,"value":1225},"variant: world=\u003Cname>[&mode=dark]",{"type":30,"value":252},{"type":21,"tag":86,"props":1228,"children":1230},{"className":1229},[],[1231],{"type":30,"value":1232},"world",{"type":30,"value":1234},", the thread. Nothing is written in the native checkout. The worked program is ",{"type":21,"tag":86,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":30,"value":1240},"scripts\u002Fshot-programs\u002Fc132-native-worlds.json",{"type":30,"value":1242}," (five stories × three worlds, 13 captures). Web captures and native captures share the manifest, the atlas, the evolution view (",{"type":21,"tag":86,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":30,"value":1248},"\u002Fcycles\u002Fevolution\u002Fnative\u002F\u003Cstory>",{"type":30,"value":1250},") and the thread grouping of a cycle's Visual record.",{"type":21,"tag":572,"props":1252,"children":1254},{"id":1253},"the-token-bridge-d2",[1255],{"type":30,"value":1256},"The token bridge (D2)",{"type":21,"tag":22,"props":1258,"children":1259},{},[1260,1266,1268,1274,1275,1281,1282,1288,1290,1296,1298,1304,1306,1312,1314,1320,1321,1327,1329,1335],{"type":21,"tag":86,"props":1261,"children":1263},{"className":1262},[],[1264],{"type":30,"value":1265},"scripts\u002Ftokens-to-kit.mjs",{"type":30,"value":1267}," (built in qnative c2 for this deliverable) reads the layer's ",{"type":21,"tag":86,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":30,"value":1273},"tokens\u002Fsemantic.mjs",{"type":30,"value":252},{"type":21,"tag":86,"props":1276,"children":1278},{"className":1277},[],[1279],{"type":30,"value":1280},"tokens\u002Ftokens.json",{"type":30,"value":420},{"type":21,"tag":86,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":30,"value":1287},"components\u002Fdata\u002Fpalette.js",{"type":30,"value":1289}," (the same sources ",{"type":21,"tag":86,"props":1291,"children":1293},{"className":1292},[],[1294],{"type":30,"value":1295},"brand\u002Fdesign_tokens.md",{"type":30,"value":1297}," documents) and writes ",{"type":21,"tag":86,"props":1299,"children":1301},{"className":1300},[],[1302],{"type":30,"value":1303},"..\u002Fqnative\u002Fcrates\u002Flayer\u002Fthemes\u002Fqpoint.json",{"type":30,"value":1305}," (\"Qpoint Light\" and \"Qpoint Dark\", our roles on the kit's 134 slots) and ",{"type":21,"tag":86,"props":1307,"children":1309},{"className":1308},[],[1310],{"type":30,"value":1311},"..\u002Fqnative\u002Fcrates\u002Flayer\u002Fsrc\u002Ftokens.rs",{"type":30,"value":1313}," (every role, light and dark, plus what the kit has no slot for: ",{"type":21,"tag":86,"props":1315,"children":1317},{"className":1316},[],[1318],{"type":30,"value":1319},"content-subtler",{"type":30,"value":252},{"type":21,"tag":86,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":30,"value":1326},"surface-sunken-deeper",{"type":30,"value":1328},", the severity pairs, the chart ramps, the type and radius scales). Run it after a token change (",{"type":21,"tag":86,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":30,"value":1334},"node scripts\u002Ftokens-to-kit.mjs",{"type":30,"value":1336},"), commit both outputs in qnative; never hand-edit them. The skin on the design site reads the same tokens as Tailwind classes, so A and B cannot drift on colour or type; the type is Inter, bundled as five static faces (c131 D14; variable Inter drew every weight regular on GPUI).",{"type":21,"tag":152,"props":1338,"children":1340},{"id":1339},"the-review-stop-as-a-page",[1341],{"type":30,"value":15},{"type":21,"tag":22,"props":1343,"children":1344},{},[1345,1347,1352,1354,1359,1361,1367,1369,1374],{"type":30,"value":1346},"A cycle that mocks native screens ends each phase with a page like ",{"type":21,"tag":86,"props":1348,"children":1350},{"className":1349},[],[1351],{"type":30,"value":503},{"type":30,"value":1353},": per view and world, A's capture beside B's in ",{"type":21,"tag":86,"props":1355,"children":1357},{"className":1356},[],[1358],{"type":30,"value":495},{"type":30,"value":1360}," (wipe · onion · side), the figures (time, friction, states, who can mock), and what the evidence suggests, with the pick left to Mark. The captures are the record: the design atlas for A (",{"type":21,"tag":86,"props":1362,"children":1364},{"className":1363},[],[1365],{"type":30,"value":1366},"public\u002Fcycles\u002Fdesign\u002F",{"type":30,"value":1368},"), the qnative atlas for B (",{"type":21,"tag":86,"props":1370,"children":1372},{"className":1371},[],[1373],{"type":30,"value":451},{"type":30,"value":1375},"), both with the cycle's thread.",{"type":21,"tag":152,"props":1377,"children":1379},{"id":1378},"what-is-not-in-the-loop-yet",[1380],{"type":30,"value":16},{"type":21,"tag":71,"props":1382,"children":1383},{},[1384,1412,1425,1430],{"type":21,"tag":75,"props":1385,"children":1386},{},[1387,1389,1395,1397,1403,1405,1410],{"type":30,"value":1388},"The kit's own skills (",{"type":21,"tag":86,"props":1390,"children":1392},{"className":1391},[],[1393],{"type":30,"value":1394},"npx skills add longbridge\u002Fgpui-kit",{"type":30,"value":1396},") are not installed in design's ",{"type":21,"tag":86,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":30,"value":1402},".claude\u002Fskills",{"type":30,"value":1404},"; the primer's ",{"type":21,"tag":86,"props":1406,"children":1408},{"className":1407},[],[1409],{"type":30,"value":242},{"type":30,"value":1411}," says where they live and that they lag the kit. Install from the repo at the pinned tag when a cycle needs them.",{"type":21,"tag":75,"props":1413,"children":1414},{},[1415,1417,1423],{"type":30,"value":1416},"A dark variant per world for A (B has ",{"type":21,"tag":86,"props":1418,"children":1420},{"className":1419},[],[1421],{"type":30,"value":1422},"--mode dark",{"type":30,"value":1424},"; the skin follows the site's theme, so a dark program would set the theme first).",{"type":21,"tag":75,"props":1426,"children":1427},{},[1428],{"type":30,"value":1429},"Illustrator from a native capture is raster only (D5); the DOM export works on A alone.",{"type":21,"tag":75,"props":1431,"children":1432},{},[1433,1439],{"type":21,"tag":86,"props":1434,"children":1436},{"className":1435},[],[1437],{"type":30,"value":1438},"\u002Ffigma-to-gpui",{"type":30,"value":1440}," does not exist (Q2 is open).",1794599287640]