[{"data":1,"prerenderedAt":582},["ShallowReactive",2],{"$fR0A5uDt5ddlMfDmdDUhe3xw3nvZxcxTB_Fw9DmuyimA":3},{"newThing":4,"project":5,"cycle":9,"sections":22,"threads":537,"otherDocs":538,"documents":539,"images":540,"archiveItems":579,"links":580},"Label system — position, color, and background controls (first DevControls build)",{"id":6,"label":7,"liveBase":8},"qflow","Qflow",null,{"id":10,"num":11,"dir":12,"name":13,"title":14,"focus":8,"status":15,"statusNote":8,"created":16,"completed":8,"mode":8,"report":8,"recordless":17,"thumbnail":18,"imageCount":19,"artifactCount":20,"lastActivity":21,"hasPickup":17,"hasInitialPrompt":17},"c8",8,"c8.label-controls","label-controls","label controls","active","2026-03-23",false,"\u002Fcycles\u002Fqflow\u002Fc8-bottom-warm.png",9,0,"2026-08-15",[23,520],{"key":24,"title":25,"empty":17,"ast":26},"extra","What changed",{"type":27,"children":28},"root",[29,38,44,50,72,78,83,164,201,207,220,226,231,415,504,509,515],{"type":30,"tag":31,"props":32,"children":34},"element","h3",{"id":33},"_1-label-position-offset",[35],{"type":36,"value":37},"text","1. Label position & offset",{"type":30,"tag":39,"props":40,"children":41},"p",{},[42],{"type":36,"value":43},"Direction selector (top\u002Fbottom\u002Fleft\u002Fright) + offset slider (0–40px). At offset 0, label sits at exact center of the node. Dragging the slider moves it outward in the selected direction.",{"type":30,"tag":31,"props":45,"children":47},{"id":46},"_2-label-color",[48],{"type":36,"value":49},"2. Label color",{"type":30,"tag":39,"props":51,"children":52},{},[53,55,62,64,70],{"type":36,"value":54},"Hex color text input (default ",{"type":30,"tag":56,"props":57,"children":59},"code",{"className":58},[],[60],{"type":36,"value":61},"ffffff",{"type":36,"value":63},") replaces the hardcoded ",{"type":30,"tag":56,"props":65,"children":67},{"className":66},[],[68],{"type":36,"value":69},"0x9aa8c0",{"type":36,"value":71}," gray-blue.",{"type":30,"tag":31,"props":73,"children":75},{"id":74},"_3-label-background",[76],{"type":36,"value":77},"3. Label background",{"type":30,"tag":39,"props":79,"children":80},{},[81],{"type":36,"value":82},"Rounded rect behind each label with full control over:",{"type":30,"tag":84,"props":85,"children":86},"ul",{},[87,107,123,138,148],{"type":30,"tag":88,"props":89,"children":90},"li",{},[91,97,99,105],{"type":30,"tag":92,"props":93,"children":94},"strong",{},[95],{"type":36,"value":96},"Bg color",{"type":36,"value":98}," (default ",{"type":30,"tag":56,"props":100,"children":102},{"className":101},[],[103],{"type":36,"value":104},"0b1c36",{"type":36,"value":106},")",{"type":30,"tag":88,"props":108,"children":109},{},[110,115,116,122],{"type":30,"tag":92,"props":111,"children":112},{},[113],{"type":36,"value":114},"Bg opacity",{"type":36,"value":98},{"type":30,"tag":56,"props":117,"children":119},{"className":118},[],[120],{"type":36,"value":121},"0.95",{"type":36,"value":106},{"type":30,"tag":88,"props":124,"children":125},{},[126,131,133],{"type":30,"tag":92,"props":127,"children":128},{},[129],{"type":36,"value":130},"Stroke width",{"type":36,"value":132}," and ",{"type":30,"tag":92,"props":134,"children":135},{},[136],{"type":36,"value":137},"stroke color",{"type":30,"tag":88,"props":139,"children":140},{},[141,146],{"type":30,"tag":92,"props":142,"children":143},{},[144],{"type":36,"value":145},"Pad X \u002F Pad Y",{"type":36,"value":147}," — separate horizontal\u002Fvertical padding (defaults 3px \u002F 1px)",{"type":30,"tag":88,"props":149,"children":150},{},[151,156,157,163],{"type":30,"tag":92,"props":152,"children":153},{},[154],{"type":36,"value":155},"Corner radius",{"type":36,"value":98},{"type":30,"tag":56,"props":158,"children":160},{"className":159},[],[161],{"type":36,"value":162},"2px",{"type":36,"value":106},{"type":30,"tag":39,"props":165,"children":166},{},[167,169,175,177,183,185,191,193,199],{"type":36,"value":168},"Labels are now a ",{"type":30,"tag":56,"props":170,"children":172},{"className":171},[],[173],{"type":36,"value":174},"PIXI.Container",{"type":36,"value":176}," wrapper (",{"type":30,"tag":56,"props":178,"children":180},{"className":179},[],[181],{"type":36,"value":182},"_bg",{"type":36,"value":184}," Graphics + ",{"type":30,"tag":56,"props":186,"children":188},{"className":187},[],[189],{"type":36,"value":190},"_text",{"type":36,"value":192}," Text) rather than a bare ",{"type":30,"tag":56,"props":194,"children":196},{"className":195},[],[197],{"type":36,"value":198},"PIXI.Text",{"type":36,"value":200},". Background redraws on any parameter change.",{"type":30,"tag":31,"props":202,"children":204},{"id":203},"_4-positionlabel-helper",[205],{"type":36,"value":206},"4. positionLabel() helper",{"type":30,"tag":39,"props":208,"children":209},{},[210,212,218],{"type":36,"value":211},"Extracted duplicated label positioning logic (4 call sites) into a single ",{"type":30,"tag":56,"props":213,"children":215},{"className":214},[],[216],{"type":36,"value":217},"positionLabel(wrapper, radius)",{"type":36,"value":219}," function.",{"type":30,"tag":31,"props":221,"children":223},{"id":222},"_5-reusable-dev-controls-components",[224],{"type":36,"value":225},"5. Reusable dev-controls components",{"type":30,"tag":39,"props":227,"children":228},{},[229],{"type":36,"value":230},"Extracted repeated toolbar patterns into standalone Vue components:",{"type":30,"tag":232,"props":233,"children":234},"table",{},[235,259],{"type":30,"tag":236,"props":237,"children":238},"thead",{},[239],{"type":30,"tag":240,"props":241,"children":242},"tr",{},[243,249,254],{"type":30,"tag":244,"props":245,"children":246},"th",{},[247],{"type":36,"value":248},"Component",{"type":30,"tag":244,"props":250,"children":251},{},[252],{"type":36,"value":253},"Replaces",{"type":30,"tag":244,"props":255,"children":256},{},[257],{"type":36,"value":258},"Count",{"type":30,"tag":260,"props":261,"children":262},"tbody",{},[263,292,320,354,389],{"type":30,"tag":240,"props":264,"children":265},{},[266,276,287],{"type":30,"tag":267,"props":268,"children":269},"td",{},[270],{"type":30,"tag":56,"props":271,"children":273},{"className":272},[],[274],{"type":36,"value":275},"ControlSlider.vue",{"type":30,"tag":267,"props":277,"children":278},{},[279,285],{"type":30,"tag":56,"props":280,"children":282},{"className":281},[],[283],{"type":36,"value":284},"\u003Clabel class=\"slider-row\">",{"type":36,"value":286}," + range input + value display",{"type":30,"tag":267,"props":288,"children":289},{},[290],{"type":36,"value":291},"29 instances",{"type":30,"tag":240,"props":293,"children":294},{},[295,304,315],{"type":30,"tag":267,"props":296,"children":297},{},[298],{"type":30,"tag":56,"props":299,"children":301},{"className":300},[],[302],{"type":36,"value":303},"ControlColor.vue",{"type":30,"tag":267,"props":305,"children":306},{},[307,313],{"type":30,"tag":56,"props":308,"children":310},{"className":309},[],[311],{"type":36,"value":312},"\u003Clabel>",{"type":36,"value":314}," + hex text input",{"type":30,"tag":267,"props":316,"children":317},{},[318],{"type":36,"value":319},"5 instances",{"type":30,"tag":240,"props":321,"children":322},{},[323,332,350],{"type":30,"tag":267,"props":324,"children":325},{},[326],{"type":30,"tag":56,"props":327,"children":329},{"className":328},[],[330],{"type":36,"value":331},"ControlSelect.vue",{"type":30,"tag":267,"props":333,"children":334},{},[335,340,342,348],{"type":30,"tag":56,"props":336,"children":338},{"className":337},[],[339],{"type":36,"value":312},{"type":36,"value":341}," + ",{"type":30,"tag":56,"props":343,"children":345},{"className":344},[],[346],{"type":36,"value":347},"\u003Cselect>",{"type":36,"value":349}," dropdown",{"type":30,"tag":267,"props":351,"children":352},{},[353],{"type":36,"value":319},{"type":30,"tag":240,"props":355,"children":356},{},[357,366,384],{"type":30,"tag":267,"props":358,"children":359},{},[360],{"type":30,"tag":56,"props":361,"children":363},{"className":362},[],[364],{"type":36,"value":365},"ControlSection.vue",{"type":30,"tag":267,"props":367,"children":368},{},[369,375,376,382],{"type":30,"tag":56,"props":370,"children":372},{"className":371},[],[373],{"type":36,"value":374},"\u003Cdiv class=\"control-group\">",{"type":36,"value":341},{"type":30,"tag":56,"props":377,"children":379},{"className":378},[],[380],{"type":36,"value":381},"\u003Ch3>",{"type":36,"value":383}," header",{"type":30,"tag":267,"props":385,"children":386},{},[387],{"type":36,"value":388},"8 sections",{"type":30,"tag":240,"props":390,"children":391},{},[392,401,410],{"type":30,"tag":267,"props":393,"children":394},{},[395],{"type":30,"tag":56,"props":396,"children":398},{"className":397},[],[399],{"type":36,"value":400},"DevControls.vue",{"type":30,"tag":267,"props":402,"children":403},{},[404],{"type":30,"tag":56,"props":405,"children":407},{"className":406},[],[408],{"type":36,"value":409},"\u003Cfooter class=\"experiment-toolbar\">",{"type":30,"tag":267,"props":411,"children":412},{},[413],{"type":36,"value":414},"1 wrapper",{"type":30,"tag":84,"props":416,"children":417},{},[418,436,452,476,494],{"type":30,"tag":88,"props":419,"children":420},{},[421,426,428,434],{"type":30,"tag":92,"props":422,"children":423},{},[424],{"type":36,"value":425},"ControlSlider",{"type":36,"value":427}," — ",{"type":30,"tag":56,"props":429,"children":431},{"className":430},[],[432],{"type":36,"value":433},"v-model",{"type":36,"value":435},", label, min\u002Fmax\u002Fstep, optional suffix",{"type":30,"tag":88,"props":437,"children":438},{},[439,444,445,450],{"type":30,"tag":92,"props":440,"children":441},{},[442],{"type":36,"value":443},"ControlColor",{"type":36,"value":427},{"type":30,"tag":56,"props":446,"children":448},{"className":447},[],[449],{"type":36,"value":433},{"type":36,"value":451},", label, placeholder",{"type":30,"tag":88,"props":453,"children":454},{},[455,460,461,466,468,474],{"type":30,"tag":92,"props":456,"children":457},{},[458],{"type":36,"value":459},"ControlSelect",{"type":36,"value":427},{"type":30,"tag":56,"props":462,"children":464},{"className":463},[],[465],{"type":36,"value":433},{"type":36,"value":467},", label, options (strings or ",{"type":30,"tag":56,"props":469,"children":471},{"className":470},[],[472],{"type":36,"value":473},"{value, label}",{"type":36,"value":475}," objects)",{"type":30,"tag":88,"props":477,"children":478},{},[479,484,486,492],{"type":30,"tag":92,"props":480,"children":481},{},[482],{"type":36,"value":483},"ControlSection",{"type":36,"value":485}," — collapsible section with title + show\u002Fhide toggle, ",{"type":30,"tag":56,"props":487,"children":489},{"className":488},[],[490],{"type":36,"value":491},"collapsed",{"type":36,"value":493}," prop for initial state",{"type":30,"tag":88,"props":495,"children":496},{},[497,502],{"type":30,"tag":92,"props":498,"children":499},{},[500],{"type":36,"value":501},"DevControls",{"type":36,"value":503}," — wrapper panel with a toggle button to show\u002Fhide the entire toolbar",{"type":30,"tag":39,"props":505,"children":506},{},[507],{"type":36,"value":508},"All styles are scoped inside each component. App.vue toolbar markup reduced significantly.",{"type":30,"tag":31,"props":510,"children":512},{"id":511},"_6-preset-support",[513],{"type":36,"value":514},"6. Preset support",{"type":30,"tag":39,"props":516,"children":517},{},[518],{"type":36,"value":519},"All new label controls included in the preset save\u002Fload\u002Fcopy\u002Fpaste system.",{"key":24,"title":521,"empty":17,"ast":522},"Defaults",{"type":27,"children":523},[524],{"type":30,"tag":84,"props":525,"children":526},{},[527,532],{"type":30,"tag":88,"props":528,"children":529},{},[530],{"type":36,"value":531},"Max size: 28px, offset: 11px, position: bottom, color: ffffff",{"type":30,"tag":88,"props":533,"children":534},{},[535],{"type":36,"value":536},"Bg: 0b1c36, opacity: 0.95, pad X: 3px, pad Y: 1px, radius: 2px, stroke: 0",[],[],[],[541,547,551,555,559,563,567,571,575],{"src":18,"kind":542,"order":543,"caption":544,"capturedAt":545,"route":546},"hero",65,"Labels bottom (default) after ~9s of feed","2026-08-15T23:39:22.618Z","\u002Fexperiments\u002Fc8.label-controls\u002F",{"src":548,"kind":542,"order":549,"caption":550,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-top.png",66,"Labels above nodes",{"src":552,"kind":542,"order":553,"caption":554,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-left.png",67,"Labels left — list-like reading",{"src":556,"kind":542,"order":557,"caption":558,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-right.png",68,"Labels right",{"src":560,"kind":542,"order":561,"caption":562,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-transparent-bg.png",69,"Background opacity 0 — floating text",{"src":564,"kind":542,"order":565,"caption":566,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-pill-labels.png",70,"Opaque pills: radius 10, padding up",{"src":568,"kind":542,"order":569,"caption":570,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-large-labels.png",71,"Max label size 32 — dashboard-legible",{"src":572,"kind":542,"order":573,"caption":574,"capturedAt":545,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-stroked.png",72,"Stroked label backgrounds",{"src":576,"kind":542,"order":577,"capturedAt":578,"route":546},"\u002Fcycles\u002Fqflow\u002Fc8-label-controls.png",4999,"2026-08-15T19:12:18.900Z",[],[581],{"route":546,"href":8},1794599362056]