[{"data":1,"prerenderedAt":1342},["ShallowReactive",2],{"$f40Gb_0p-h8-wJfcOETs_hcNNqOGN3V7_eh56sxXbrEk":3},{"newThing":4,"project":5,"cycle":9,"sections":24,"threads":1269,"otherDocs":1270,"documents":1272,"images":1278,"archiveItems":1325,"links":1338},"One sticky band: the global Filter and NavJumpPills stay sticky where they sit and register with useStickyBand, which publishes --q-sticky-top; UxStickyBand backs them once pinned, table headers pin directly under the band, pill jumps land below it, and UxOverflowX lets only a too-wide table scroll sideways",{"id":6,"label":7,"liveBase":8},"design","Design",null,{"id":10,"num":11,"dir":12,"name":13,"title":14,"focus":15,"status":16,"statusNote":8,"created":17,"completed":8,"mode":18,"report":8,"recordless":19,"thumbnail":20,"imageCount":21,"artifactCount":22,"lastActivity":17,"hasPickup":19,"hasInitialPrompt":23},"c104",104,"c104.sticky-band","sticky-band","Sticky Band","One sticky band for qdash detail pages: `NavJumpPills` and the global filter pin together, and table headers pin directly under them","archived","2026-10-01","evolution, with archaeology (app.qpoint.io's page-level sideways scroll was considered and rejected)",false,"\u002Fcycles\u002Fdesign\u002Fc104-band-before.png",8,3,true,[25,62,93,262,1061],{"key":26,"title":27,"empty":19,"ast":28},"why","Why",{"type":29,"children":30},"root",[31],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36,44,46,52,54,60],{"type":32,"tag":37,"props":38,"children":40},"code",{"className":39},[],[41],{"type":42,"value":43},"text","DataTable",{"type":42,"value":45},"'s always-on ",{"type":32,"tag":37,"props":47,"children":49},{"className":48},[],[50],{"type":42,"value":51},"overflow-x-auto",{"type":42,"value":53}," wrapper stopped every ",{"type":32,"tag":37,"props":55,"children":57},{"className":56},[],[58],{"type":42,"value":59},"UxTableList",{"type":42,"value":61}," header from pinning. Fixing it exposed what that bug had been hiding: three independent stickies (the filter at z-40, the pills at z-30, the table header at z-2), each with its own hard-coded offset, and nothing that knows how they stack. Long ledgers on detail pages now pin their header under the pills, which cover the first two or three column labels.",{"key":63,"title":64,"empty":19,"ast":65},"objective","Objective",{"type":29,"children":66},[67],{"type":32,"tag":33,"props":68,"children":69},{},[70,72,78,80,91],{"type":42,"value":71},"Detail pages pin one band: pills on the left, filter on the right, a solid backing only once pinned. The band publishes its height as ",{"type":32,"tag":37,"props":73,"children":75},{"className":74},[],[76],{"type":42,"value":77},"--q-sticky-top",{"type":42,"value":79},", and table headers, jump targets and the scroll-spy all read it. Tables fit by default; the rare one that doesn't scrolls sideways through one layer primitive. Done = ",{"type":32,"tag":81,"props":82,"children":84},"a",{"href":83},"\u002Fcycles\u002Fdesign\u002Fc104\u002Fdoc\u002Fplan",[85],{"type":32,"tag":37,"props":86,"children":88},{"className":87},[],[89],{"type":42,"value":90},"plan.md",{"type":42,"value":92}," §Done means.",{"key":94,"title":95,"empty":19,"ast":96},"scope","Scope",{"type":29,"children":97},[98],{"type":32,"tag":99,"props":100,"children":101},"ul",{},[102,185,198,234],{"type":32,"tag":103,"props":104,"children":105},"li",{},[106,108,114,116,122,123,129,131,137,139,145,147,153,155,161,163,168,170,175,177,183],{"type":42,"value":107},"Layer: ",{"type":32,"tag":37,"props":109,"children":111},{"className":110},[],[112],{"type":42,"value":113},"useStickyBand",{"type":42,"value":115},", ",{"type":32,"tag":37,"props":117,"children":119},{"className":118},[],[120],{"type":42,"value":121},"UxStickyBand",{"type":42,"value":115},{"type":32,"tag":37,"props":124,"children":126},{"className":125},[],[127],{"type":42,"value":128},"UxOverflowX",{"type":42,"value":130},"; ",{"type":32,"tag":37,"props":132,"children":134},{"className":133},[],[135],{"type":42,"value":136},"NavJumpPills",{"type":42,"value":138}," (",{"type":32,"tag":37,"props":140,"children":142},{"className":141},[],[143],{"type":42,"value":144},"sticky",{"type":42,"value":146}," prop, var-driven offset and scroll-margin); ",{"type":32,"tag":37,"props":148,"children":150},{"className":149},[],[151],{"type":42,"value":152},"Filter",{"type":42,"value":154}," (registers with the band); ",{"type":32,"tag":37,"props":156,"children":158},{"className":157},[],[159],{"type":42,"value":160},"UxTableListHeader",{"type":42,"value":162}," (var top); ",{"type":32,"tag":37,"props":164,"children":166},{"className":165},[],[167],{"type":42,"value":43},{"type":42,"value":169}," (onto ",{"type":32,"tag":37,"props":171,"children":173},{"className":172},[],[174],{"type":42,"value":128},{"type":42,"value":176},"); ",{"type":32,"tag":37,"props":178,"children":180},{"className":179},[],[181],{"type":42,"value":182},"UxModal",{"type":42,"value":184}," (resets the band offset).",{"type":32,"tag":103,"props":186,"children":187},{},[188,190,196],{"type":42,"value":189},"Design site: ",{"type":32,"tag":37,"props":191,"children":193},{"className":192},[],[194],{"type":42,"value":195},"\u002Fpages\u002Fsticky-band",{"type":42,"value":197}," mock + registry entry; component docs; replica table wrappers.",{"type":32,"tag":103,"props":199,"children":200},{},[201,203,209,211,217,218,224,226,232],{"type":42,"value":202},"Fable app: ",{"type":32,"tag":37,"props":204,"children":206},{"className":205},[],[207],{"type":42,"value":208},"layouts\u002Fdefault.vue",{"type":42,"value":210},"; 11 detail pages with pills; pill-target ",{"type":32,"tag":37,"props":212,"children":214},{"className":213},[],[215],{"type":42,"value":216},"scroll-mt-20",{"type":42,"value":130},{"type":32,"tag":37,"props":219,"children":221},{"className":220},[],[222],{"type":42,"value":223},"UsersRoster.vue",{"type":42,"value":225}," (+ ",{"type":32,"tag":37,"props":227,"children":229},{"className":228},[],[230],{"type":42,"value":231},"DeviceCard.vue",{"type":42,"value":233}," if it wraps a table).",{"type":32,"tag":103,"props":235,"children":236},{},[237,239,245,247,253,255,260],{"type":42,"value":238},"Out: a stuck chip (evaluation option C); qcontrol ",{"type":32,"tag":37,"props":240,"children":242},{"className":241},[],[243],{"type":42,"value":244},"ui\u002F",{"type":42,"value":246}," ",{"type":32,"tag":37,"props":248,"children":250},{"className":249},[],[251],{"type":42,"value":252},":3030",{"type":42,"value":254},"; non-table ",{"type":32,"tag":37,"props":256,"children":258},{"className":257},[],[259],{"type":42,"value":51},{"type":42,"value":261}," boxes.",{"key":263,"title":264,"empty":19,"ast":265},"key-changes","Key Changes",{"type":29,"children":266},[267,344,391,606,674,828,1014],{"type":32,"tag":33,"props":268,"children":269},{},[270,276,278,288,290,295,297,303,305,311,313,318,320,328,330,335,337,342],{"type":32,"tag":271,"props":272,"children":273},"strong",{},[274],{"type":42,"value":275},"kick-off (2026-10-01):",{"type":42,"value":277}," the six evaluation §7 decisions answered → ",{"type":32,"tag":81,"props":279,"children":281},{"href":280},"\u002Fcycles\u002Fdesign\u002Fc104\u002Fdoc\u002Fevaluation",[282],{"type":32,"tag":37,"props":283,"children":285},{"className":284},[],[286],{"type":42,"value":287},"evaluation.md",{"type":42,"value":289}," §8. Band only when pinned; backing only when pinned; no stopgap, the header fix waits for the band's release; tables fit by default + one overflow primitive (built as ",{"type":32,"tag":37,"props":291,"children":293},{"className":292},[],[294],{"type":42,"value":128},{"type":42,"value":296},") (app.qpoint.io's ",{"type":32,"tag":37,"props":298,"children":300},{"className":299},[],[301],{"type":42,"value":302},"#page-scroll-window",{"type":42,"value":304}," approach rejected: the whole page slides sideways and every offset must target the custom scroller); c104 owns the fix and the 0.9.24 release; design mock first, then the Fable app ",{"type":32,"tag":37,"props":306,"children":308},{"className":307},[],[309],{"type":42,"value":310},":3032",{"type":42,"value":312}," (Mark, correcting ",{"type":32,"tag":37,"props":314,"children":316},{"className":315},[],[317],{"type":42,"value":252},{"type":42,"value":319},"). Since both controls already pin at 8px, \"only when pinned\" makes the band a coordinator over stickies that stay in place, not one container they move into (",{"type":32,"tag":81,"props":321,"children":322},{"href":83},[323],{"type":32,"tag":37,"props":324,"children":326},{"className":325},[],[327],{"type":42,"value":90},{"type":42,"value":329}," §Architecture). Plan decisions P1–P6 confirmed by Mark as drafted (2026-10-01): var on the document root, ",{"type":32,"tag":37,"props":331,"children":333},{"className":332},[],[334],{"type":42,"value":136},{"type":42,"value":336}," owns its pinning, band height counts every band control on the page, background over the content column only, ",{"type":32,"tag":37,"props":338,"children":340},{"className":339},[],[341],{"type":42,"value":136},{"type":42,"value":343}," sets its targets' scroll-margin, stuck chip out.",{"type":32,"tag":33,"props":345,"children":346},{},[347,352,354,360,361,366,368,374,376,381,383,389],{"type":32,"tag":271,"props":348,"children":349},{},[350],{"type":42,"value":351},"header fix committed (2026-10-01):",{"type":42,"value":353}," layer ",{"type":32,"tag":37,"props":355,"children":357},{"className":356},[],[358],{"type":42,"value":359},"11e80a9",{"type":42,"value":246},{"type":32,"tag":37,"props":362,"children":364},{"className":363},[],[365],{"type":42,"value":43},{"type":42,"value":367},": arm ",{"type":32,"tag":37,"props":369,"children":371},{"className":370},[],[372],{"type":42,"value":373},"overflow-x",{"type":42,"value":375}," only while the table overflows, so the thead pins. Local and unpushed. The Fable app resolves the sibling layer checkout, so it is already live on ",{"type":32,"tag":37,"props":377,"children":379},{"className":378},[],[380],{"type":42,"value":310},{"type":42,"value":382}," in dev, collision included; its package fallback is layer ",{"type":32,"tag":37,"props":384,"children":386},{"className":385},[],[387],{"type":42,"value":388},"main",{"type":42,"value":390},", so layer main stays unpushed until 0.9.24.",{"type":32,"tag":33,"props":392,"children":393},{},[394,399,400,406,408,413,415,421,422,427,429,435,436,442,444,449,451,456,458,464,466,471,473,478,480,486,487,492,494,499,501,506,507,512,513,519,520,525,526,531,533,538,539,545,547,552,554,560,562,567,569,588,590,596,598,604],{"type":32,"tag":271,"props":395,"children":396},{},[397],{"type":42,"value":398},"Phase 1 layer pieces + Phase 2 mock (2026-10-01):",{"type":42,"value":353},{"type":32,"tag":37,"props":401,"children":403},{"className":402},[],[404],{"type":42,"value":405},"37ec2c8",{"type":42,"value":407}," (local, unpushed, on ",{"type":32,"tag":37,"props":409,"children":411},{"className":410},[],[412],{"type":42,"value":359},{"type":42,"value":414},"), alongside another session's uncommitted HistoryGraph\u002FDataMachine work in the same tree (not staged). New ",{"type":32,"tag":37,"props":416,"children":418},{"className":417},[],[419],{"type":42,"value":420},"composables\u002FuseStickyBand.ts",{"type":42,"value":138},{"type":32,"tag":37,"props":423,"children":425},{"className":424},[],[426],{"type":42,"value":113},{"type":42,"value":428}," → ",{"type":32,"tag":37,"props":430,"children":432},{"className":431},[],[433],{"type":42,"value":434},"{ stuck }",{"type":42,"value":115},{"type":32,"tag":37,"props":437,"children":439},{"className":438},[],[440],{"type":42,"value":441},"useStickyBandMember",{"type":42,"value":443},"), ",{"type":32,"tag":37,"props":445,"children":447},{"className":446},[],[448],{"type":42,"value":121},{"type":42,"value":450}," (backing), ",{"type":32,"tag":37,"props":452,"children":454},{"className":453},[],[455],{"type":42,"value":128},{"type":42,"value":457}," (a wrapper component, not the planned composable: consumers swap their div for it; measures ",{"type":32,"tag":37,"props":459,"children":461},{"className":460},[],[462],{"type":42,"value":463},"scrollWidth",{"type":42,"value":465}," because ",{"type":32,"tag":37,"props":467,"children":469},{"className":468},[],[470],{"type":42,"value":59},{"type":42,"value":472}," puts a full-width div between box and table, the first try missed it). ",{"type":32,"tag":37,"props":474,"children":476},{"className":475},[],[477],{"type":42,"value":160},{"type":42,"value":479}," pins at ",{"type":32,"tag":37,"props":481,"children":483},{"className":482},[],[484],{"type":42,"value":485},"var(--q-sticky-top, 0px)",{"type":42,"value":130},{"type":32,"tag":37,"props":488,"children":490},{"className":489},[],[491],{"type":42,"value":182},{"type":42,"value":493}," and an armed ",{"type":32,"tag":37,"props":495,"children":497},{"className":496},[],[498],{"type":42,"value":128},{"type":42,"value":500}," reset the var to 0, since a header inside a scroll box would otherwise be pushed down by the band height. ",{"type":32,"tag":271,"props":502,"children":503},{},[504],{"type":42,"value":505},"Both memberships opt-in",{"type":42,"value":138},{"type":32,"tag":37,"props":508,"children":510},{"className":509},[],[511],{"type":42,"value":152},{"type":42,"value":246},{"type":32,"tag":37,"props":514,"children":516},{"className":515},[],[517],{"type":42,"value":518},"band",{"type":42,"value":115},{"type":32,"tag":37,"props":521,"children":523},{"className":522},[],[524],{"type":42,"value":136},{"type":42,"value":246},{"type":32,"tag":37,"props":527,"children":529},{"className":528},[],[530],{"type":42,"value":144},{"type":42,"value":532},"): the Fable app reads the sibling layer live while c103 runs, so nothing joins a band there until Phase 4. Layer CLAUDE.md: catalog rows + \"unreleased, ships as v0.9.24\" migration notes. Mock: design ",{"type":32,"tag":37,"props":534,"children":536},{"className":535},[],[537],{"type":42,"value":195},{"type":42,"value":138},{"type":32,"tag":37,"props":540,"children":542},{"className":541},[],[543],{"type":42,"value":544},"qcontrol",{"type":42,"value":546}," layout, Fable shell replica; Band\u002FBefore switch, Filter\u002FPills toggles, 14-column wide ledger, live ",{"type":32,"tag":37,"props":548,"children":550},{"className":549},[],[551],{"type":42,"value":77},{"type":42,"value":553}," readout) + ",{"type":32,"tag":37,"props":555,"children":557},{"className":556},[],[558],{"type":42,"value":559},"page-registry.ts",{"type":42,"value":561}," entry. Verified in the pane at 1440×900: band height 81px with the filter (8 + 65 + 8), 58px pills only, unset with neither; band backing at opacity 1 once pinned; ledger headers pin at 81 and the second pushes the first off; every pill jump lands at 97 (band + 16) with its pill lit (Notes, last, lights by the bottom rule); Before mode reproduces the collision (header at 0 under the pills and filter). Wide-table arming checked on ",{"type":32,"tag":37,"props":563,"children":565},{"className":564},[],[566],{"type":42,"value":310},{"type":42,"value":568}," instead (Activity at 1024: 1132 in 748 → armed, var 0px inside; at 1700 disarmed, header pins at 0) because ",{"type":32,"tag":271,"props":570,"children":571},{},[572,574,580,582],{"type":42,"value":573},"the design dev server (",{"type":32,"tag":37,"props":575,"children":577},{"className":576},[],[578],{"type":42,"value":579},":3000",{"type":42,"value":581},", another session's) kept serving the first ",{"type":32,"tag":37,"props":583,"children":585},{"className":584},[],[586],{"type":42,"value":587},"OverflowX.vue",{"type":42,"value":589}," — its watcher missed every later edit to that one file; restart it to see the wide ledger arm in the mock. Fable ",{"type":32,"tag":37,"props":591,"children":593},{"className":592},[],[594],{"type":42,"value":595},"\u002Finventory\u002Fskills\u002Fdetail",{"type":42,"value":597}," unchanged (old wrapper pins at 8, no console errors). Not done yet: ",{"type":32,"tag":37,"props":599,"children":601},{"className":600},[],[602],{"type":42,"value":603},"\u002Fdocument-components",{"type":42,"value":605}," docs for the new pieces.",{"type":32,"tag":33,"props":607,"children":608},{},[609,614,616,621,622,628,630,635,637,642,644,650,652,657,658,664,666,672],{"type":32,"tag":271,"props":610,"children":611},{},[612],{"type":42,"value":613},"release (2026-10-01, by the c103 session):",{"type":42,"value":615}," while Phase 2 was being checked, c103's close released ",{"type":32,"tag":271,"props":617,"children":618},{},[619],{"type":42,"value":620},"layer 0.9.24",{"type":42,"value":138},{"type":32,"tag":37,"props":623,"children":625},{"className":624},[],[626],{"type":42,"value":627},"1bea0a7",{"type":42,"value":629},", tag pushed), which includes c104's ",{"type":32,"tag":37,"props":631,"children":633},{"className":632},[],[634],{"type":42,"value":359},{"type":42,"value":636}," + ",{"type":32,"tag":37,"props":638,"children":640},{"className":639},[],[641],{"type":42,"value":405},{"type":42,"value":643},". So decision 8.3 (hold the release) was overtaken: the header fix and the opt-in band shipped before the Fable port. Lockfiles were refreshed in design (",{"type":32,"tag":37,"props":645,"children":647},{"className":646},[],[648],{"type":42,"value":649},"af1c7512",{"type":42,"value":651},"), qcontrol ",{"type":32,"tag":37,"props":653,"children":655},{"className":654},[],[656],{"type":42,"value":244},{"type":42,"value":138},{"type":32,"tag":37,"props":659,"children":661},{"className":660},[],[662],{"type":42,"value":663},"c5fb5520",{"type":42,"value":665},") and Fable (",{"type":32,"tag":37,"props":667,"children":669},{"className":668},[],[670],{"type":42,"value":671},"3d557e53",{"type":42,"value":673},"). Layer CLAUDE.md's \"unreleased\" migration-notes heading relabelled to v0.9.24.",{"type":32,"tag":33,"props":675,"children":676},{},[677,682,684,690,692,698,700,705,707,713,715,721,723,728,730,735,737,743,745,751,753,758,760,766,768,774,776,782,784,789,790,796,797,803,805,810,812,818,820,826],{"type":32,"tag":271,"props":678,"children":679},{},[680],{"type":42,"value":681},"Phase 4, Fable port (2026-10-01):",{"type":42,"value":683}," Fable ",{"type":32,"tag":37,"props":685,"children":687},{"className":686},[],[688],{"type":42,"value":689},"579b512c",{"type":42,"value":691}," on ",{"type":32,"tag":37,"props":693,"children":695},{"className":694},[],[696],{"type":42,"value":697},"c99\u002Fclaude-code-fable-5.1",{"type":42,"value":699}," (local, unpushed; c103 was closed and the tree clean). ",{"type":32,"tag":37,"props":701,"children":703},{"className":702},[],[704],{"type":42,"value":208},{"type":42,"value":706}," mounts ",{"type":32,"tag":37,"props":708,"children":710},{"className":709},[],[711],{"type":42,"value":712},"\u003CUxStickyBand class=\"-mx-8\">",{"type":42,"value":714}," in the relative wrapper ahead of ",{"type":32,"tag":37,"props":716,"children":718},{"className":717},[],[719],{"type":42,"value":720},"GlobalFilterBar",{"type":42,"value":722},", whose ",{"type":32,"tag":37,"props":724,"children":726},{"className":725},[],[727],{"type":42,"value":152},{"type":42,"value":729}," gains ",{"type":32,"tag":37,"props":731,"children":733},{"className":732},[],[734],{"type":42,"value":518},{"type":42,"value":736},". 11 detail pages swap ",{"type":32,"tag":37,"props":738,"children":740},{"className":739},[],[741],{"type":42,"value":742},"\u003Cdiv class=\"sticky top-2 z-30 mb-6\">\u003CNavJumpPills>",{"type":42,"value":744}," for ",{"type":32,"tag":37,"props":746,"children":748},{"className":747},[],[749],{"type":42,"value":750},"\u003CNavJumpPills sticky class=\"mb-6\">",{"type":42,"value":752},"; 28 components drop ",{"type":32,"tag":37,"props":754,"children":756},{"className":755},[],[757],{"type":42,"value":216},{"type":42,"value":759}," from their ",{"type":32,"tag":37,"props":761,"children":763},{"className":762},[],[764],{"type":42,"value":765},"sec-*",{"type":42,"value":767}," pill targets (",{"type":32,"tag":37,"props":769,"children":771},{"className":770},[],[772],{"type":42,"value":773},"SessionReading",{"type":42,"value":775},"'s transcript\u002Fraw\u002Fsurface anchors kept: not pill targets). ",{"type":32,"tag":37,"props":777,"children":779},{"className":778},[],[780],{"type":42,"value":781},"UsersRoster",{"type":42,"value":783}," onto ",{"type":32,"tag":37,"props":785,"children":787},{"className":786},[],[788],{"type":42,"value":128},{"type":42,"value":138},{"type":32,"tag":37,"props":791,"children":793},{"className":792},[],[794],{"type":42,"value":795},"tableEl.$el",{"type":42,"value":176},{"type":32,"tag":37,"props":798,"children":800},{"className":799},[],[801],{"type":42,"value":802},"DeviceCard",{"type":42,"value":804},"'s ",{"type":32,"tag":37,"props":806,"children":808},{"className":807},[],[809],{"type":42,"value":51},{"type":42,"value":811}," is a grid, not a table, left alone. ",{"type":32,"tag":37,"props":813,"children":815},{"className":814},[],[816],{"type":42,"value":817},"npm test",{"type":42,"value":819}," 553 passed + bible-check clean. Checked on ",{"type":32,"tag":37,"props":821,"children":823},{"className":822},[],[824],{"type":42,"value":825},"\u002Finventory\u002Fproviders\u002Fdetail?provider=anthropic",{"type":42,"value":827},": band 81px, jumps land at 97, the Harnesses header pins at 81. The pane was hidden for part of this (no rAF, smooth scroll stalls), so jumps were checked with instant scrolls.",{"type":32,"tag":33,"props":829,"children":830},{},[831,836,838,844,846,851,853,858,859,864,866,871,872,878,879,885,886,892,893,899,901,907,909,914,916,921,922,927,929,934,935,940,942,948,950,955,956,961,962,967,969,975,977,983,985,990,992,998,1000,1005,1007,1012],{"type":32,"tag":271,"props":832,"children":833},{},[834],{"type":42,"value":835},"Phase 3 + docs (2026-10-01):",{"type":42,"value":837}," design ",{"type":32,"tag":37,"props":839,"children":841},{"className":840},[],[842],{"type":42,"value":843},"b9f4c633",{"type":42,"value":845},". Six hand-rolled ",{"type":32,"tag":37,"props":847,"children":849},{"className":848},[],[850],{"type":42,"value":51},{"type":42,"value":852}," wrappers around ",{"type":32,"tag":37,"props":854,"children":856},{"className":855},[],[857],{"type":42,"value":59},{"type":42,"value":783},{"type":32,"tag":37,"props":860,"children":862},{"className":861},[],[863],{"type":42,"value":128},{"type":42,"value":865}," (replica ",{"type":32,"tag":37,"props":867,"children":869},{"className":868},[],[870],{"type":42,"value":43},{"type":42,"value":115},{"type":32,"tag":37,"props":873,"children":875},{"className":874},[],[876],{"type":42,"value":877},"qcontrol\u002Fteams",{"type":42,"value":115},{"type":32,"tag":37,"props":880,"children":882},{"className":881},[],[883],{"type":42,"value":884},"pages\u002Fcontrol-center",{"type":42,"value":115},{"type":32,"tag":37,"props":887,"children":889},{"className":888},[],[890],{"type":42,"value":891},"phase1\u002F{tools,files,plugins}",{"type":42,"value":130},{"type":32,"tag":37,"props":894,"children":896},{"className":895},[],[897],{"type":42,"value":898},"tableEl",{"type":42,"value":900}," refs read ",{"type":32,"tag":37,"props":902,"children":904},{"className":903},[],[905],{"type":42,"value":906},"$el",{"type":42,"value":908},"). ",{"type":32,"tag":37,"props":910,"children":912},{"className":911},[],[913],{"type":42,"value":603},{"type":42,"value":915},": ",{"type":32,"tag":37,"props":917,"children":919},{"className":918},[],[920],{"type":42,"value":128},{"type":42,"value":636},{"type":32,"tag":37,"props":923,"children":925},{"className":924},[],[926],{"type":42,"value":121},{"type":42,"value":928}," registry entries (layout group) and demos; ",{"type":32,"tag":37,"props":930,"children":932},{"className":931},[],[933],{"type":42,"value":136},{"type":42,"value":246},{"type":32,"tag":37,"props":936,"children":938},{"className":937},[],[939],{"type":42,"value":144},{"type":42,"value":941},"\u002F",{"type":32,"tag":37,"props":943,"children":945},{"className":944},[],[946],{"type":42,"value":947},"stickyTop",{"type":42,"value":949}," (demo exposes them), ",{"type":32,"tag":37,"props":951,"children":953},{"className":952},[],[954],{"type":42,"value":152},{"type":42,"value":246},{"type":32,"tag":37,"props":957,"children":959},{"className":958},[],[960],{"type":42,"value":518},{"type":42,"value":115},{"type":32,"tag":37,"props":963,"children":965},{"className":964},[],[966],{"type":42,"value":160},{"type":42,"value":968}," description. Layer ",{"type":32,"tag":37,"props":970,"children":972},{"className":971},[],[973],{"type":42,"value":974},"49e90f0",{"type":42,"value":976}," (pushed): the template comment above each new root moved inside it, because in dev a root-level comment makes the component a fragment and ",{"type":32,"tag":37,"props":978,"children":980},{"className":979},[],[981],{"type":42,"value":982},"ref.$el",{"type":42,"value":984}," becomes the comment node (the ",{"type":32,"tag":37,"props":986,"children":988},{"className":987},[],[989],{"type":42,"value":128},{"type":42,"value":991}," docs demo 500'd on ",{"type":32,"tag":37,"props":993,"children":995},{"className":994},[],[996],{"type":42,"value":997},"$el.classList",{"type":42,"value":999},"); production strips comments, so 0.9.24 builds are unaffected. The design dev server's stale ",{"type":32,"tag":37,"props":1001,"children":1003},{"className":1002},[],[1004],{"type":42,"value":587},{"type":42,"value":1006}," caught up by itself; the mock's wide ledger now arms on ",{"type":32,"tag":37,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":42,"value":579},{"type":42,"value":1013},".",{"type":32,"tag":33,"props":1015,"children":1016},{},[1017,1022,1023,1029,1031,1037,1039,1045,1047,1052,1054,1059],{"type":32,"tag":271,"props":1018,"children":1019},{},[1020],{"type":42,"value":1021},"Captures (2026-10-01):",{"type":42,"value":837},{"type":32,"tag":37,"props":1024,"children":1026},{"className":1025},[],[1027],{"type":42,"value":1028},"54b769d6",{"type":42,"value":1030},". Shot programs ",{"type":32,"tag":37,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":42,"value":1036},"c104-sticky-band.json",{"type":42,"value":1038}," (6 mock states: rest, pinned, jump, wide, filter only, before) and ",{"type":32,"tag":37,"props":1040,"children":1042},{"className":1041},[],[1043],{"type":42,"value":1044},"c104-sticky-band-fable.json",{"type":42,"value":1046}," (provider + skill detail on ",{"type":32,"tag":37,"props":1048,"children":1050},{"className":1049},[],[1051],{"type":42,"value":310},{"type":42,"value":1053},"), thread ",{"type":32,"tag":37,"props":1055,"children":1057},{"className":1056},[],[1058],{"type":42,"value":518},{"type":42,"value":1060},"; only the c104 manifest entries staged (the c100 session's manifest edits left in the tree).",{"key":1062,"title":1063,"empty":19,"ast":1064},"outcome","Outcome",{"type":29,"children":1065},[1066,1120,1128,1179,1187],{"type":32,"tag":33,"props":1067,"children":1068},{},[1069,1071,1076,1078,1084,1085,1091,1093,1098,1100,1105,1107,1112,1114,1119],{"type":42,"value":1070},"The filter and the jump pills now pin as one band, and table headers pin directly under it instead of disappearing (the original bug) or sliding under the pills (the bug the fix exposed). ",{"type":32,"tag":37,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":42,"value":113},{"type":42,"value":1077}," coordinates controls that stay sticky where they sit, rather than moving them into one container, because both already pinned at 8px. Membership is opt-in (",{"type":32,"tag":37,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":42,"value":1083},"Filter band",{"type":42,"value":115},{"type":32,"tag":37,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":42,"value":1090},"NavJumpPills sticky",{"type":42,"value":1092},"), the band publishes ",{"type":32,"tag":37,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":42,"value":77},{"type":42,"value":1099},", and ",{"type":32,"tag":37,"props":1101,"children":1103},{"className":1102},[],[1104],{"type":42,"value":121},{"type":42,"value":1106}," backs it only when pinned. Tables are meant to fit; ",{"type":32,"tag":37,"props":1108,"children":1110},{"className":1109},[],[1111],{"type":42,"value":128},{"type":42,"value":1113}," lets the rare one that doesn't scroll sideways and gives up its pinned header only then. Shipped in layer 0.9.24, ported to all 11 Fable detail pages, with a before\u002Fafter mock at ",{"type":32,"tag":37,"props":1115,"children":1117},{"className":1116},[],[1118],{"type":42,"value":195},{"type":42,"value":1013},{"type":32,"tag":33,"props":1121,"children":1122},{},[1123],{"type":32,"tag":271,"props":1124,"children":1125},{},[1126],{"type":42,"value":1127},"Learnings:",{"type":32,"tag":99,"props":1129,"children":1130},{},[1131,1136,1154,1166],{"type":32,"tag":103,"props":1132,"children":1133},{},[1134],{"type":42,"value":1135},"A fix that makes something work can expose a collision it was hiding. The header fix was right, but it needed the band before it could ship cleanly.",{"type":32,"tag":103,"props":1137,"children":1138},{},[1139,1141,1146,1147,1152],{"type":42,"value":1140},"Hold-the-release decisions don't survive a shared layer with parallel sessions. c103 released our unreleased commits. Opt-in membership is what kept that safe; the header fix itself did reach apps that use pills and haven't ported (",{"type":32,"tag":37,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":42,"value":244},{"type":42,"value":246},{"type":32,"tag":37,"props":1148,"children":1150},{"className":1149},[],[1151],{"type":42,"value":252},{"type":42,"value":1153},").",{"type":32,"tag":103,"props":1155,"children":1156},{},[1157,1159,1164],{"type":42,"value":1158},"In dev, a root-level template comment turns a component into a fragment, so ",{"type":32,"tag":37,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":42,"value":906},{"type":42,"value":1165}," becomes the comment node. Keep comments inside the root element.",{"type":32,"tag":103,"props":1167,"children":1168},{},[1169,1171,1177],{"type":42,"value":1170},"A hidden Browser pane has no ",{"type":32,"tag":37,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":42,"value":1176},"requestAnimationFrame",{"type":42,"value":1178},": smooth scrolling and rAF-driven state stall. Verify geometry with instant scrolls, or capture headless.",{"type":32,"tag":33,"props":1180,"children":1181},{},[1182],{"type":32,"tag":271,"props":1183,"children":1184},{},[1185],{"type":42,"value":1186},"Follow-ons:",{"type":32,"tag":99,"props":1188,"children":1189},{},[1190,1235,1253,1258],{"type":32,"tag":103,"props":1191,"children":1192},{},[1193,1212,1214,1219,1221,1226,1228,1234],{"type":32,"tag":1194,"props":1195,"children":1196},"del",{},[1197,1199,1204,1205,1210],{"type":42,"value":1198},"Port qcontrol ",{"type":32,"tag":37,"props":1200,"children":1202},{"className":1201},[],[1203],{"type":42,"value":244},{"type":42,"value":138},{"type":32,"tag":37,"props":1206,"children":1208},{"className":1207},[],[1209],{"type":42,"value":252},{"type":42,"value":1211},")",{"type":42,"value":1213}," Dropped 2026-10-01 (Mark): the Fable branch is the active app and ",{"type":32,"tag":37,"props":1215,"children":1217},{"className":1216},[],[1218],{"type":42,"value":252},{"type":42,"value":1220}," is deprecated. The Fable branch is pushed with the port (",{"type":32,"tag":37,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":42,"value":689},{"type":42,"value":1227},", origin at ",{"type":32,"tag":37,"props":1229,"children":1231},{"className":1230},[],[1232],{"type":42,"value":1233},"97d59f8d",{"type":42,"value":1153},{"type":32,"tag":103,"props":1236,"children":1237},{},[1238,1243,1245,1251],{"type":32,"tag":37,"props":1239,"children":1241},{"className":1240},[],[1242],{"type":42,"value":773},{"type":42,"value":1244},"'s Transcript ⇄ Surface switch is a third ",{"type":32,"tag":37,"props":1246,"children":1248},{"className":1247},[],[1249],{"type":42,"value":1250},"sticky top-2 z-30",{"type":42,"value":1252}," control and isn't a band member.",{"type":32,"tag":103,"props":1254,"children":1255},{},[1256],{"type":42,"value":1257},"The stuck chip (evaluation option C) is still open.",{"type":32,"tag":103,"props":1259,"children":1260},{},[1261,1263,1268],{"type":42,"value":1262},"Any other vertical scroll box that holds a non-compact table must reset ",{"type":32,"tag":37,"props":1264,"children":1266},{"className":1265},[],[1267],{"type":42,"value":77},{"type":42,"value":1013},[],[287,1271,90],"initial-prompt.md",[1273,1275,1276],{"file":287,"title":1274},"— Sticky band: evaluation so far (2026-10-01)",{"file":1271,"title":14},{"file":90,"title":1277},"— Sticky band: build plan (2026-10-01)",[1279,1288,1296,1301,1309,1314,1318,1322],{"src":1280,"kind":1281,"order":1282,"caption":1283,"thread":1284,"capturedAt":1286,"subject":1287,"route":195},"\u002Fcycles\u002Fdesign\u002Fc104-band-rest.png","hero",0,"At rest: filter on the title row, pills below the tiles, no backing; the readout shows --q-sticky-top 81px (8 + 65px filter + 8)",{"id":518,"label":1285,"date":17},"Sticky band","2026-10-01T17:11:16.807Z","page\u002Fsticky-band",{"src":1289,"kind":1281,"order":1282,"caption":1290,"thread":1291,"capturedAt":1292,"subject":1293,"route":825,"evolution":1294},"\u002Fcycles\u002Fdesign\u002Fc104-fable-provider-pinned.png","Fable \u002Finventory\u002Fproviders\u002Fdetail (Anthropic): pills and filter pinned as one band, the Harnesses ledger header pinned under it",{"id":518,"label":1285,"date":17},"2026-10-01T17:11:39.059Z","page\u002Fprovider-detail",{"subject":1293,"moments":1295},4,{"src":1297,"kind":1281,"order":1298,"caption":1299,"thread":1300,"capturedAt":1286,"subject":1287,"route":195},"\u002Fcycles\u002Fdesign\u002Fc104-band-pinned.png",1,"Pinned: filter and pills side by side at 8px over the band backing; the Installs ledger header pins directly under it at 81px",{"id":518,"label":1285,"date":17},{"src":1302,"kind":1281,"order":1298,"caption":1303,"thread":1304,"capturedAt":1292,"subject":1305,"route":1306,"evolution":1307},"\u002Fcycles\u002Fdesign\u002Fc104-fable-skill-pinned.png","Fable \u002Finventory\u002Fskills\u002Fdetail (deploy): the band over the Installs and Sessions ledgers, header pinned under it",{"id":518,"label":1285,"date":17},"page\u002Fskill-detail","\u002Finventory\u002Fskills\u002Fdetail?skill=deploy",{"subject":1305,"moments":1308},5,{"src":1310,"kind":1281,"order":1311,"caption":1312,"thread":1313,"capturedAt":1286,"subject":1287,"route":195},"\u002Fcycles\u002Fdesign\u002Fc104-band-jump.png",2,"Pill jump to Sessions: the heading lands 16px below the band (97px) and its pill lights",{"id":518,"label":1285,"date":17},{"src":1315,"kind":1281,"order":22,"caption":1316,"thread":1317,"capturedAt":1286,"subject":1287,"route":195},"\u002Fcycles\u002Fdesign\u002Fc104-band-wide.png","Wide ledger (14 columns): UxOverflowX arms horizontal scroll, so this header gives up pinning while the ledgers that fit keep it",{"id":518,"label":1285,"date":17},{"src":1319,"kind":1281,"order":1295,"caption":1320,"thread":1321,"capturedAt":1286,"subject":1287,"route":195},"\u002Fcycles\u002Fdesign\u002Fc104-band-filter-only.png","Filter only (pills off): the band is still 81px, the filter's height; the header pins under it",{"id":518,"label":1285,"date":17},{"src":20,"kind":1281,"order":1308,"caption":1323,"thread":1324,"capturedAt":1286,"subject":1287,"route":195},"Before c104 (today's per-page wrapper, header at top-0): the pinned header slides under the pills and filter, which cover its first and last columns",{"id":518,"label":1285,"date":17},[1326],{"path":1327,"title":1328,"image":1297,"gallery":1329},"archive\u002F2026-q3\u002F2026-10-01-c104-sticky-band","Sticky Band — Filter and Jump Pills Pin as One, Table Headers Pin Under Them",[1330,1332,1334,1336],{"src":1297,"alt":1331},"Band pinned: pills and filter side by side at 8px over the backing; the ledger header pinned at 81px.",{"src":20,"alt":1333},"Before c104: the pinned header slides under the pills and filter, which cover its first and last columns.",{"src":1315,"alt":1335},"A 14-column ledger: UxOverflowX arms horizontal scroll, so only this header gives up pinning.",{"src":1289,"alt":1337},"The band ported to the Fable app: provider detail with the Harnesses header pinned under the pills and filter.",[1339,1340,1341],{"route":195,"href":195},{"route":825,"href":8},{"route":1306,"href":8},1794599335538]