Files
clide/docs/design/wireframes/hud/pane-collapse-toggles.json
T
2026-06-09 17:31:46 +02:00

151 lines
5.5 KiB
JSON

{
"name": "Pane Collapse Toggles",
"shapes": {
"titleA": {
"type": "Text",
"left": 40, "top": 50,
"text": "STATE A — both panes open: toggles fixed at the far ends of the bottom status bar",
"fontColor": "#c8d8f0", "fontSize": 15
},
"a-sidebar": {
"type": "Rectangle",
"left": 40, "top": 86, "width": 200, "height": 200,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
},
"a-sidebar-lbl": {
"type": "Text", "parent": "a-sidebar",
"left": 60, "top": 100, "text": "Sidebar\n(ticket list)",
"fontColor": "#c8d0e0", "fontSize": 13
},
"a-center": {
"type": "Rectangle",
"left": 250, "top": 86, "width": 480, "height": 200,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
},
"a-center-lbl": {
"type": "Text", "parent": "a-center",
"left": 270, "top": 100, "text": "Claude conversation (center)",
"fontColor": "#c8d0e0", "fontSize": 13
},
"a-context": {
"type": "Rectangle",
"left": 740, "top": 86, "width": 200, "height": 200,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
},
"a-context-lbl": {
"type": "Text", "parent": "a-context",
"left": 760, "top": 100, "text": "Context\npane",
"fontColor": "#c8d0e0", "fontSize": 13
},
"a-statusbar": {
"type": "Rectangle",
"left": 40, "top": 292, "width": 900, "height": 28,
"fillColor": "#15181d", "strokeColor": "#333340", "corners": [0, 0, 0, 0]
},
"a-status-left": {
"type": "Text", "parent": "a-statusbar",
"left": 84, "top": 299, "text": "main 13 skills",
"fontColor": "#8a92a6", "fontSize": 11
},
"a-status-right": {
"type": "Text", "parent": "a-statusbar",
"left": 770, "top": 299, "text": "Output terminal",
"fontColor": "#8a92a6", "fontSize": 11
},
"a-toggle-left": {
"type": "Rectangle",
"left": 44, "top": 294, "width": 24, "height": 24,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
},
"a-toggle-left-icon": {
"type": "Text", "parent": "a-toggle-left",
"left": 52, "top": 299, "text": "<", "fontColor": "#c8d8f0", "fontSize": 14
},
"a-toggle-right": {
"type": "Rectangle",
"left": 912, "top": 294, "width": 24, "height": 24,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
},
"a-toggle-right-icon": {
"type": "Text", "parent": "a-toggle-right",
"left": 920, "top": 299, "text": ">", "fontColor": "#c8d8f0", "fontSize": 14
},
"a-note-left": {
"type": "Text",
"left": 44, "top": 328, "text": "far-left -> collapse sidebar",
"fontColor": "#8a92a6", "fontSize": 11
},
"a-note-right": {
"type": "Text",
"left": 740, "top": 328, "text": "far-right -> collapse context",
"fontColor": "#8a92a6", "fontSize": 11
},
"titleB": {
"type": "Text",
"left": 40, "top": 388,
"text": "STATE B — both collapsed: toggles stay put at the same status-bar ends, only the chevron flips",
"fontColor": "#c8d8f0", "fontSize": 15
},
"b-center": {
"type": "Rectangle",
"left": 40, "top": 424, "width": 900, "height": 200,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
},
"b-center-lbl": {
"type": "Text", "parent": "b-center",
"left": 380, "top": 438, "text": "Claude conversation — full width",
"fontColor": "#c8d0e0", "fontSize": 13
},
"b-statusbar": {
"type": "Rectangle",
"left": 40, "top": 630, "width": 900, "height": 28,
"fillColor": "#15181d", "strokeColor": "#333340", "corners": [0, 0, 0, 0]
},
"b-status-left": {
"type": "Text", "parent": "b-statusbar",
"left": 84, "top": 637, "text": "main 13 skills",
"fontColor": "#8a92a6", "fontSize": 11
},
"b-status-right": {
"type": "Text", "parent": "b-statusbar",
"left": 770, "top": 637, "text": "Output terminal",
"fontColor": "#8a92a6", "fontSize": 11
},
"b-toggle-left": {
"type": "Rectangle",
"left": 44, "top": 632, "width": 24, "height": 24,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
},
"b-toggle-left-icon": {
"type": "Text", "parent": "b-toggle-left",
"left": 52, "top": 637, "text": ">", "fontColor": "#c8d8f0", "fontSize": 14
},
"b-toggle-right": {
"type": "Rectangle",
"left": 912, "top": 632, "width": 24, "height": 24,
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
},
"b-toggle-right-icon": {
"type": "Text", "parent": "b-toggle-right",
"left": 920, "top": 637, "text": "<", "fontColor": "#c8d8f0", "fontSize": 14
},
"b-note-left": {
"type": "Text",
"left": 44, "top": 666, "text": "same spot -> re-open sidebar",
"fontColor": "#8a92a6", "fontSize": 11
},
"b-note-right": {
"type": "Text",
"left": 730, "top": 666, "text": "same spot -> re-open context pane",
"fontColor": "#8a92a6", "fontSize": 11
},
"footer": {
"type": "Text",
"left": 40, "top": 700,
"text": "Toggles sit at fixed far-left / far-right ends of the bottom status bar in every state — muscle memory, always where the reference arrows pointed. Only the chevron flips per isCollapsed. Mirrored for parity. Buttons call the existing sidebar.collapse / context.collapse commands.",
"fontColor": "#8a92a6", "fontSize": 11
}
}
}