[{"data":1,"prerenderedAt":721},["ShallowReactive",2],{"cycle-doc-design-c140-plan.md":3},{"cycle":4,"project":7,"path":10,"title":11,"toc":12,"ast":18},{"id":5,"title":6},"c140","Surface Evaluation",{"id":8,"label":9},"design","Design","plan.md","c140 plan: the QGUIkit surface, scored against our principles",[13,14,15,16,17],"What is being evaluated","The rubric","The principles","Method","Out of scope",{"type":19,"children":20},"root",[21,90,96,147,195,200,205,313,318,353,358,365,449,455,595,600,605,683,688],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,33,35,40,42,47,49,56,58,64,66,72,74,80,82,88],{"type":22,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":31,"value":32},"text","Written:",{"type":31,"value":34}," 2026-11-12, before the evidence came back, so the rubric is set before the scores. ",{"type":22,"tag":27,"props":36,"children":37},{},[38],{"type":31,"value":39},"Reader:",{"type":31,"value":41}," Mark first, then whoever ports the next page or component to the native app, then the engineers who will run both surfaces. ",{"type":22,"tag":27,"props":43,"children":44},{},[45],{"type":31,"value":46},"Rests on:",{"type":31,"value":48}," ",{"type":22,"tag":50,"props":51,"children":53},"code",{"className":52},[],[54],{"type":31,"value":55},"brand\u002Fcomponent_philosophy.md",{"type":31,"value":57}," (the eight principles, the pantry, documentation architecture, the design guidelines), ",{"type":22,"tag":50,"props":59,"children":61},{"className":60},[],[62],{"type":31,"value":63},"brand\u002Fdesign_methodology.md",{"type":31,"value":65}," (modularity = purpose + protocol, assemblage, the five questions), ",{"type":22,"tag":50,"props":67,"children":69},{"className":68},[],[70],{"type":31,"value":71},"brand\u002Fdesign_tokens.md",{"type":31,"value":73},", qnative's ",{"type":22,"tag":50,"props":75,"children":77},{"className":76},[],[78],{"type":31,"value":79},"CLAUDE.md",{"type":31,"value":81}," (R1–R8 from qdash's data-interface bible), c131 D18 (our layer drawn on GPUI, the kit for the shell), c132's two-media loop (",{"type":22,"tag":50,"props":83,"children":85},{"className":84},[],[86],{"type":31,"value":87},"process.md",{"type":31,"value":89},").",{"type":22,"tag":91,"props":92,"children":94},"h2",{"id":93},"what-is-being-evaluated",[95],{"type":31,"value":13},{"type":22,"tag":23,"props":97,"children":98},{},[99,101,106,108,114,116,122,124,130,132,137,139,145],{"type":31,"value":100},"The ",{"type":22,"tag":27,"props":102,"children":103},{},[104],{"type":31,"value":105},"QGUIkit surface",{"type":31,"value":107}," (called the GPUI surface when this plan was written; named by D1 the same day): our component system as drawn in Rust on GPUI, in ",{"type":22,"tag":50,"props":109,"children":111},{"className":110},[],[112],{"type":31,"value":113},"..\u002Fqnative",{"type":31,"value":115},". That means the ",{"type":22,"tag":50,"props":117,"children":119},{"className":118},[],[120],{"type":31,"value":121},"layer",{"type":31,"value":123}," crate (our vocabulary: Data Machine family, Surface family, DataTable, nav, editor, tour, pills, the token bridge's outputs) and the ",{"type":22,"tag":50,"props":125,"children":127},{"className":126},[],[128],{"type":31,"value":129},"app",{"type":31,"value":131}," crate's pages as consumers of it. The ",{"type":22,"tag":27,"props":133,"children":134},{},[135],{"type":31,"value":136},"Vue surface",{"type":31,"value":138}," (",{"type":22,"tag":50,"props":140,"children":142},{"className":141},[],[143],{"type":31,"value":144},"q-nuxt-layer",{"type":31,"value":146},", consumed by qdash and this site) is the reference. Its known weak spots are named where they explain a QGUIkit score; it is not re-audited here.",{"type":22,"tag":23,"props":148,"children":149},{},[150,152,158,159,164,166,171,172,177,179,185,187,193],{"type":31,"value":151},"Read at qnative ",{"type":22,"tag":50,"props":153,"children":155},{"className":154},[],[156],{"type":31,"value":157},"main",{"type":31,"value":48},{"type":22,"tag":27,"props":160,"children":161},{},[162],{"type":31,"value":163},"e609f42",{"type":31,"value":165}," (2026-11-12) and design ",{"type":22,"tag":50,"props":167,"children":169},{"className":168},[],[170],{"type":31,"value":157},{"type":31,"value":48},{"type":22,"tag":27,"props":173,"children":174},{},[175],{"type":31,"value":176},"4453a8c085",{"type":31,"value":178},". Another session is merging branches in both repos as this runs (qnative ",{"type":22,"tag":50,"props":180,"children":182},{"className":181},[],[183],{"type":31,"value":184},"c2\u002Frulings",{"type":31,"value":186},", ",{"type":22,"tag":50,"props":188,"children":190},{"className":189},[],[191],{"type":31,"value":192},"c3\u002Fphases",{"type":31,"value":194},", the c6 and c7 branches; design's c139 cloud branch). A finding that the merge changes gets re-read, not re-argued.",{"type":22,"tag":91,"props":196,"children":198},{"id":197},"the-rubric",[199],{"type":31,"value":14},{"type":22,"tag":23,"props":201,"children":202},{},[203],{"type":31,"value":204},"Each principle gets one score for the QGUIkit surface, 1 to 5, and the evidence behind it (file:line, counts, commits).",{"type":22,"tag":206,"props":207,"children":208},"table",{},[209,228],{"type":22,"tag":210,"props":211,"children":212},"thead",{},[213],{"type":22,"tag":214,"props":215,"children":216},"tr",{},[217,223],{"type":22,"tag":218,"props":219,"children":220},"th",{},[221],{"type":31,"value":222},"Score",{"type":22,"tag":218,"props":224,"children":225},{},[226],{"type":31,"value":227},"Meaning",{"type":22,"tag":229,"props":230,"children":231},"tbody",{},[232,249,265,281,297],{"type":22,"tag":214,"props":233,"children":234},{},[235,244],{"type":22,"tag":236,"props":237,"children":238},"td",{},[239],{"type":22,"tag":27,"props":240,"children":241},{},[242],{"type":31,"value":243},"5",{"type":22,"tag":236,"props":245,"children":246},{},[247],{"type":31,"value":248},"Holds by construction: the shape of the code makes the wrong thing hard, and a machine checks it",{"type":22,"tag":214,"props":250,"children":251},{},[252,260],{"type":22,"tag":236,"props":253,"children":254},{},[255],{"type":22,"tag":27,"props":256,"children":257},{},[258],{"type":31,"value":259},"4",{"type":22,"tag":236,"props":261,"children":262},{},[263],{"type":31,"value":264},"Holds in practice: every instance we read honours it, checked by a person's eye",{"type":22,"tag":214,"props":266,"children":267},{},[268,276],{"type":22,"tag":236,"props":269,"children":270},{},[271],{"type":22,"tag":27,"props":272,"children":273},{},[274],{"type":31,"value":275},"3",{"type":22,"tag":236,"props":277,"children":278},{},[279],{"type":31,"value":280},"Mostly holds, with named exceptions that have a known fix",{"type":22,"tag":214,"props":282,"children":283},{},[284,292],{"type":22,"tag":236,"props":285,"children":286},{},[287],{"type":22,"tag":27,"props":288,"children":289},{},[290],{"type":31,"value":291},"2",{"type":22,"tag":236,"props":293,"children":294},{},[295],{"type":31,"value":296},"Holds only where someone was careful; the structure does not help",{"type":22,"tag":214,"props":298,"children":299},{},[300,308],{"type":22,"tag":236,"props":301,"children":302},{},[303],{"type":22,"tag":27,"props":304,"children":305},{},[306],{"type":31,"value":307},"1",{"type":22,"tag":236,"props":309,"children":310},{},[311],{"type":31,"value":312},"Does not hold",{"type":22,"tag":23,"props":314,"children":315},{},[316],{"type":31,"value":317},"Each score also carries:",{"type":22,"tag":319,"props":320,"children":321},"ul",{},[322,333,343],{"type":22,"tag":323,"props":324,"children":325},"li",{},[326,331],{"type":22,"tag":27,"props":327,"children":328},{},[329],{"type":31,"value":330},"Trend:",{"type":31,"value":332}," better than, the same as, or worse than the Vue surface on the same principle, in a word.",{"type":22,"tag":323,"props":334,"children":335},{},[336,341],{"type":22,"tag":27,"props":337,"children":338},{},[339],{"type":31,"value":340},"Course correction:",{"type":31,"value":342}," the smallest change that would raise the score by one. If none is worth making, say so.",{"type":22,"tag":323,"props":344,"children":345},{},[346,351],{"type":22,"tag":27,"props":347,"children":348},{},[349],{"type":31,"value":350},"Divergence:",{"type":31,"value":352}," whether the gap is a flaw to fix, or a difference to welcome and write down for the operators (Mark's Surface entry: \"acknowledge and welcome the instances where they diverge\").",{"type":22,"tag":91,"props":354,"children":356},{"id":355},"the-principles",[357],{"type":31,"value":15},{"type":22,"tag":359,"props":360,"children":362},"h3",{"id":361},"the-eight-mark-named",[363],{"type":31,"value":364},"The eight Mark named",{"type":22,"tag":366,"props":367,"children":368},"ol",{},[369,379,389,399,409,419,429,439],{"type":22,"tag":323,"props":370,"children":371},{},[372,377],{"type":22,"tag":27,"props":373,"children":374},{},[375],{"type":31,"value":376},"Modularity.",{"type":31,"value":378}," One purpose per component, a clean interface, free internals.",{"type":22,"tag":323,"props":380,"children":381},{},[382,387],{"type":22,"tag":27,"props":383,"children":384},{},[385],{"type":31,"value":386},"Clean data boundaries.",{"type":31,"value":388}," The layer takes view data and knows no source; pages go page → repository → nozzle (R2).",{"type":22,"tag":323,"props":390,"children":391},{},[392,397],{"type":22,"tag":27,"props":393,"children":394},{},[395],{"type":31,"value":396},"Composition over configuration.",{"type":31,"value":398}," Children and slots before flags and enums.",{"type":22,"tag":323,"props":400,"children":401},{},[402,407],{"type":22,"tag":27,"props":403,"children":404},{},[405],{"type":31,"value":406},"View complexity contained.",{"type":31,"value":408}," Probes, scroll, sticky, measured heights and animation live inside the component; the caller holds nothing it should not.",{"type":22,"tag":323,"props":410,"children":411},{},[412,417],{"type":22,"tag":27,"props":413,"children":414},{},[415],{"type":31,"value":416},"Low knowledge of context.",{"type":31,"value":418}," A component does not assume its parent, the rail, the window size or the page.",{"type":22,"tag":323,"props":420,"children":421},{},[422,427],{"type":22,"tag":27,"props":423,"children":424},{},[425],{"type":31,"value":426},"Slots.",{"type":31,"value":428}," Is there a GPUI equivalent of default, named and scoped slots, and is it used?",{"type":22,"tag":323,"props":430,"children":431},{},[432,437],{"type":22,"tag":27,"props":433,"children":434},{},[435],{"type":31,"value":436},"Brand tokens.",{"type":31,"value":438}," How hard to change a colour, a type step, a theme (light, dark, a third).",{"type":22,"tag":323,"props":440,"children":441},{},[442,447],{"type":22,"tag":27,"props":443,"children":444},{},[445],{"type":31,"value":446},"Two surfaces.",{"type":31,"value":448}," What it costs to keep pages that are nearly identical on both: where one change lands, what is checked by a machine, what has drifted already.",{"type":22,"tag":359,"props":450,"children":452},{"id":451},"what-our-docs-add-the-ones-the-prompt-asked-us-to-find",[453],{"type":31,"value":454},"What our docs add (the ones the prompt asked us to find)",{"type":22,"tag":366,"props":456,"children":458},{"start":457},9,[459,469,487,497,507,517,527,537,547,557,567,585],{"type":22,"tag":323,"props":460,"children":461},{},[462,467],{"type":22,"tag":27,"props":463,"children":464},{},[465],{"type":31,"value":466},"Functional, not decorative; colour is semantic.",{"type":31,"value":468}," Variant names, not colour arguments.",{"type":22,"tag":323,"props":470,"children":471},{},[472,477,479,485],{"type":22,"tag":27,"props":473,"children":474},{},[475],{"type":31,"value":476},"Native to the medium.",{"type":31,"value":478}," The web rule is ",{"type":22,"tag":480,"props":481,"children":482},"em",{},[483],{"type":31,"value":484},"Tailwind-native",{"type":31,"value":486},"; its native reading is \"kit-native where the kit has it, GPUI-idiomatic where it does not\" (R8: a kit component before a drawn one).",{"type":22,"tag":323,"props":488,"children":489},{},[490,495],{"type":22,"tag":27,"props":491,"children":492},{},[493],{"type":31,"value":494},"Progressive enhancement, base + curated presets.",{"type":31,"value":496}," Simple bases; advanced behaviour composed by the consumer; presets copied, not configured.",{"type":22,"tag":323,"props":498,"children":499},{},[500,505],{"type":22,"tag":27,"props":501,"children":502},{},[503],{"type":31,"value":504},"Accessibility by default.",{"type":31,"value":506}," Keyboard, focus, the accessibility tree (AccessKit on GPUI).",{"type":22,"tag":323,"props":508,"children":509},{},[510,515],{"type":22,"tag":27,"props":511,"children":512},{},[513],{"type":31,"value":514},"States are explicit.",{"type":31,"value":516}," The interactive states table (default, hover, focus, active, disabled, loading) and the honest data states (R5: empty, minimal, typical, overflow, error).",{"type":22,"tag":323,"props":518,"children":519},{},[520,525],{"type":22,"tag":27,"props":521,"children":522},{},[523],{"type":31,"value":524},"Replicate first, optimize later.",{"type":31,"value":526}," The port matches the web before it improves on it, and each improvement is decided, not drifted into.",{"type":22,"tag":323,"props":528,"children":529},{},[530,535],{"type":22,"tag":27,"props":531,"children":532},{},[533],{"type":31,"value":534},"Consume during implementation; the demo is the test.",{"type":31,"value":536}," Doc pages with every scenario; stories as tests (R6).",{"type":22,"tag":323,"props":538,"children":539},{},[540,545],{"type":22,"tag":27,"props":541,"children":542},{},[543],{"type":31,"value":544},"Constrained size and consistent motion.",{"type":31,"value":546}," Named size steps, the 200 ms and 500 ms transitions.",{"type":22,"tag":323,"props":548,"children":549},{},[550,555],{"type":22,"tag":27,"props":551,"children":552},{},[553],{"type":31,"value":554},"The unified pantry.",{"type":31,"value":556}," Everything that renders without side effects belongs in the layer; nothing app-wired does.",{"type":22,"tag":323,"props":558,"children":559},{},[560,565],{"type":22,"tag":27,"props":561,"children":562},{},[563],{"type":31,"value":564},"Documentation architecture.",{"type":31,"value":566}," The library ships components; the docs live in a separate consumer (the design site).",{"type":22,"tag":323,"props":568,"children":569},{},[570,575,577,583],{"type":22,"tag":27,"props":571,"children":572},{},[573],{"type":31,"value":574},"Naming.",{"type":31,"value":576}," One vocabulary across surfaces, so ",{"type":22,"tag":50,"props":578,"children":580},{"className":579},[],[581],{"type":31,"value":582},"UxPill",{"type":31,"value":584}," means the same thing in both.",{"type":22,"tag":323,"props":586,"children":587},{},[588,593],{"type":22,"tag":27,"props":589,"children":590},{},[591],{"type":31,"value":592},"The budget",{"type":31,"value":594}," (new, native only). The medium adds a principle the web never needed: a component's cost in memory, binary and wakes is part of its interface (R7).",{"type":22,"tag":23,"props":596,"children":597},{},[598],{"type":31,"value":599},"The five questions (useful, clear, precise, necessary, beautiful) are the closing read over the whole, not a row.",{"type":22,"tag":91,"props":601,"children":603},{"id":602},"method",[604],{"type":31,"value":16},{"type":22,"tag":366,"props":606,"children":607},{},[608,618,628,638,648,673],{"type":22,"tag":323,"props":609,"children":610},{},[611,616],{"type":22,"tag":27,"props":612,"children":613},{},[614],{"type":31,"value":615},"Evidence, in parallel, read-only.",{"type":31,"value":617}," Four readers, each with a narrow brief and no scores: the layer's component APIs (1–6, 12, 13, 19); the token path (7, 9, 16); parity and drift across repos (8, 14, 18); the app's pages and the repeated manual work (2, 15, 17, and the tooling question).",{"type":22,"tag":323,"props":619,"children":620},{},[621,626],{"type":22,"tag":27,"props":622,"children":623},{},[624],{"type":31,"value":625},"Scoring, by one hand.",{"type":31,"value":627}," The scores are written here from the evidence, against the rubric above, so they are comparable across rows.",{"type":22,"tag":323,"props":629,"children":630},{},[631,636],{"type":22,"tag":27,"props":632,"children":633},{},[634],{"type":31,"value":635},"Course corrections.",{"type":31,"value":637}," Each row's smallest raise-by-one, then a ranked short list across rows: what to do this week, what to rule, what to leave.",{"type":22,"tag":323,"props":639,"children":640},{},[641,646],{"type":22,"tag":27,"props":642,"children":643},{},[644],{"type":31,"value":645},"Skills and tools.",{"type":31,"value":647}," Every step the records show done by hand more than twice becomes a candidate, with how often it recurred and where it went wrong.",{"type":22,"tag":323,"props":649,"children":650},{},[651,656,658,664,666,672],{"type":22,"tag":27,"props":652,"children":653},{},[654],{"type":31,"value":655},"The pages.",{"type":31,"value":657}," The findings on the design site as cycle reports linked from CYCLE.md's header (",{"type":22,"tag":50,"props":659,"children":661},{"className":660},[],[662],{"type":31,"value":663},"\u002Fcycles\u002Fdesign\u002Fc140\u002F…",{"type":31,"value":665},"), and the markdown behind them as cycle documents (",{"type":22,"tag":50,"props":667,"children":669},{"className":668},[],[670],{"type":31,"value":671},"\u002Fcycles\u002Fdesign\u002Fc140\u002Fdoc\u002F…",{"type":31,"value":89},{"type":22,"tag":323,"props":674,"children":675},{},[676,681],{"type":22,"tag":27,"props":677,"children":678},{},[679],{"type":31,"value":680},"Review stop.",{"type":31,"value":682}," Mark reads the scores and rules the course corrections and the open calls. Nothing is changed in qnative or the layer in this cycle without that ruling.",{"type":22,"tag":91,"props":684,"children":686},{"id":685},"out-of-scope",[687],{"type":31,"value":17},{"type":22,"tag":319,"props":689,"children":690},{},[691,711,716],{"type":22,"tag":323,"props":692,"children":693},{},[694,696,701,703,709],{"type":31,"value":695},"Changing any code in ",{"type":22,"tag":50,"props":697,"children":699},{"className":698},[],[700],{"type":31,"value":113},{"type":31,"value":702}," or ",{"type":22,"tag":50,"props":704,"children":706},{"className":705},[],[707],{"type":31,"value":708},"..\u002Fq-nuxt-layer",{"type":31,"value":710},". This cycle evaluates and proposes.",{"type":22,"tag":323,"props":712,"children":713},{},[714],{"type":31,"value":715},"Re-auditing the Vue surface. c135 (Component Cleanup) does that, and its five checks are used here where they apply.",{"type":22,"tag":323,"props":717,"children":718},{},[719],{"type":31,"value":720},"Building the dual-surface component docs. The Surface glossary entry asks for them; this cycle proposes their shape and leaves the build to a ruling.",1794599291851]