adds design
This commit is contained in:
873
docs/design/Helder IDE.dc.html
Normal file
873
docs/design/Helder IDE.dc.html
Normal file
@@ -0,0 +1,873 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/fonts.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/colors.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/typography.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/spacing.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/radius.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/elevation.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/motion.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/tokens/base.css">
|
||||
<link rel="stylesheet" href="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/styles.css">
|
||||
<script src="_ds/blijnder-e2fd6583-1c87-4e16-bc91-117f035adbbc/_ds_bundle.js"></script>
|
||||
<style>
|
||||
body { margin: 0; background: #EFF0EE; }
|
||||
a { color: #C4741F; text-decoration: none; }
|
||||
a:hover { color: #171C22; }
|
||||
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<section style="background:#EFF0EE;padding:64px 56px 96px;display:flex;flex-direction:column;gap:72px;font-family:'IBM Plex Sans',sans-serif;color:#171C22">
|
||||
|
||||
<header style="display:flex;flex-direction:column;gap:20px;max-width:1140px">
|
||||
<div style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">[ 00 ] design canvas · helder</div>
|
||||
<h1 style="margin:0;font:700 58px/1.02 'IBM Plex Mono',monospace;letter-spacing:-.04em;color:#171C22">helder<span style="color:#E8913A;animation:blink 1.1s steps(1,end) infinite">.</span></h1>
|
||||
<p style="margin:0;max-width:68ch;font:400 17px/1.6 'IBM Plex Sans',sans-serif;color:#3A424C;text-wrap:pretty">An editor for working with Claude Code. One slate shell, one amber accent, IBM Plex Mono for everything that is code or label. Every layer below uses the same four surfaces, the same 24px row height and the same selection marker: 2px amber on the left, fill one step deeper.</p>
|
||||
<div style="display:flex;gap:10px;flex-wrap:wrap;padding-top:4px">
|
||||
<span style="font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#171C22;background:rgba(232,145,58,.10);border:1px solid #CDD1CD;border-radius:2px;padding:7px 10px">workspace</span>
|
||||
<span style="font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#3A424C;border:1px solid #CDD1CD;border-radius:2px;padding:7px 10px">overlays</span>
|
||||
<span style="font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#3A424C;border:1px solid #CDD1CD;border-radius:2px;padding:7px 10px">menus</span>
|
||||
<span style="font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#3A424C;border:1px solid #CDD1CD;border-radius:2px;padding:7px 10px">foundations</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ===================== 01 · WORKSPACE ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 01 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Workspace</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">Four columns: source control · explorer · editor · agent. 1760 × 1000</span>
|
||||
</div>
|
||||
|
||||
<div data-screen-label="01 Workspace" style="width:1760px;height:1000px;background:#101720;border:1px solid #CDD1CD;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;color:#E4E7E6">
|
||||
|
||||
<!-- titlebar -->
|
||||
<div style="height:44px;flex:none;background:#18202B;border-bottom:1px solid #232C39;display:flex;align-items:center;gap:18px;padding:0 14px">
|
||||
<div style="display:flex;gap:8px;flex:none">
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#E8913A"></span>
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#6C7783"></span>
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#3A424C"></span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:baseline;gap:10px;flex:none">
|
||||
<span style="font:700 13px/1 'IBM Plex Mono',monospace;letter-spacing:.02em;color:#F4F5F4">helder<span style="color:#E8913A;animation:blink 1.1s steps(1,end) infinite">.</span></span>
|
||||
<span style="font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783">odynt</span>
|
||||
<span style="font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783">·</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#E8913A">main</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783;flex:1;min-width:0">
|
||||
<span>resources</span><span>›</span><span>views</span><span>›</span><span>admin</span><span>›</span><span>vaults</span><span>›</span>
|
||||
<span style="color:#F4F5F4;font-weight:600">form.blade.php</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:4px;flex:none">
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Search <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘F</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;background:rgba(232,145,58,.10);font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Auto-fit <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid rgba(232,145,58,.35);border-radius:2px;padding:4px 6px">⌘A</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#6C7783">Hidden <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘.</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Note <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘N</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;background:rgba(232,145,58,.10);font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Git <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid rgba(232,145,58,.35);border-radius:2px;padding:4px 6px">⌘G</span></span>
|
||||
<span style="width:26px;height:26px;margin-left:6px;border:1px solid #232C39;border-radius:2px;display:flex;align-items:center;justify-content:center;font:600 12px/1 'IBM Plex Mono',monospace;color:#6C7783">?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-height:0;display:flex">
|
||||
|
||||
<!-- source control -->
|
||||
<div style="width:236px;flex:none;background:#18202B;border-right:1px solid #232C39;display:flex;flex-direction:column">
|
||||
<div style="padding:12px;display:flex;gap:8px;align-items:stretch;border-bottom:1px solid #232C39">
|
||||
<div style="flex:1;min-width:0;height:52px;background:#101720;border:1px solid #232C39;border-radius:2px;padding:8px 9px;font:400 12px/1.5 'IBM Plex Sans',sans-serif;color:#6C7783">Shift+Enter to commit</div>
|
||||
<div style="width:34px;flex:none;border:1px solid #232C39;border-radius:2px;display:flex;align-items:center;justify-content:center;font:400 15px/1 'IBM Plex Mono',monospace;color:#BAC0C0">↑</div>
|
||||
</div>
|
||||
<div style="padding:14px 12px 6px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783;display:flex;justify-content:space-between">
|
||||
<span>staged changes</span><span style="color:#E8913A">4</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column">
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">category.blade.php</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;background:#232C39;border-left:2px solid #E8913A"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">form.blade.php</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">subcategory.blade.php</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">declined-names.blade.php</span></div>
|
||||
</div>
|
||||
<div style="margin:16px 12px 0;border-top:1px solid #232C39"></div>
|
||||
<div style="padding:14px 12px 6px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783;display:flex;justify-content:space-between">
|
||||
<span>changes</span><span style="color:#E8913A">1</span>
|
||||
</div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#F0B476;width:12px">M</span><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">declined-names.blade.php</span></div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="padding:12px;border-top:1px solid #232C39;font:400 11px/1.5 'IBM Plex Mono',monospace;color:#6C7783">4 staged · 1 unstaged</div>
|
||||
</div>
|
||||
|
||||
<!-- explorer -->
|
||||
<div style="width:288px;flex:none;background:#18202B;border-right:1px solid #232C39;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:30px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #232C39;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783"><span>explorer</span><span>odynt</span></div>
|
||||
<div style="flex:1;min-height:0;padding:6px 0;display:flex;flex-direction:column;font:400 13px/1 'IBM Plex Sans',sans-serif">
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>app</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>blueprints</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>bootstrap</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>config</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>database</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>docs</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>lang</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>public</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#6C7783">▤</span>resources</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>css</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>js</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>markdown</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#6C7783">▤</span>views</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#6C7783">▤</span>admin</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#6C7783">▤</span>vaults</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 76px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>_partials</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 76px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>category.blade.php<span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 74px;color:#F4F5F4;background:#232C39;border-left:2px solid #E8913A"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font-weight:500">form.blade.php</span><span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 76px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>index.blade.php</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 76px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>subcategory.blade.php<span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>components</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>conversation</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>help</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>settings</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>routes</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#6C7783">▤</span>tests</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:3px 4px">md</span>AGENTS.md</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:3px 4px">md</span>CLAUDE.md</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#BAC0C0"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#F0B476;border-radius:2px;padding:3px 4px">js</span>vite.config.js</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- editor -->
|
||||
<div style="flex:1;min-width:0;background:#101720;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid #232C39">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">modified</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#8FBFB4">+1</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#C4741F">−1</span>
|
||||
<span style="flex:1"></span>
|
||||
<div style="display:flex;border:1px solid #232C39;border-radius:2px;overflow:hidden">
|
||||
<span style="padding:5px 12px;font:500 11px/1 'IBM Plex Sans',sans-serif;color:#171720;background:#E8913A;color:#171C22">Actual</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Original</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Diff</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Split</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:56px 1fr;align-content:start;font:400 13px/20px 'IBM Plex Mono',monospace;padding-top:10px">
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">1</span><span style="color:#6C7783">{{--</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">2</span><span style="padding-left:31.3px;color:#6C7783">4B — the Vault editor. `$vault === null` means create.</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">3</span><span style="color:#6C7783">--}}</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">4</span><span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">5</span><span style="color:#C3A6CE">@php</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">6</span><span style="padding-left:31.3px"><span style="color:#BAC0C0">$isCreate</span> <span style="color:#6C7783">=</span> <span style="color:#BAC0C0">$vault</span> <span style="color:#C3A6CE">===</span> <span style="color:#F0B476">null</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">7</span><span style="padding-left:31.3px"><span style="color:#BAC0C0">$teamClass</span> <span style="color:#6C7783">=</span> <span style="color:#8FBFB4">\App\Models\Team::class</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">8</span><span style="padding-left:31.3px"><span style="color:#BAC0C0">$userClass</span> <span style="color:#6C7783">=</span> <span style="color:#8FBFB4">\App\Models\User::class</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">9</span><span style="color:#C3A6CE">@endphp</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">10</span><span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">11</span><span><span style="color:#6C7783"><</span><span style="color:#F0B476">x-layouts.app</span> <span style="color:#BAC0C0">:title</span>=<span style="color:#8FBFB4">"$vault?->name"</span><span style="color:#6C7783">></span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">12</span><span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">13</span><span style="padding-left:31.3px"><span style="color:#6C7783"><</span><span style="color:#F0B476">style</span><span style="color:#6C7783">></span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">14</span><span style="padding-left:62.6px"><span style="color:#E4E7E6">.vlt-head</span> {</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">15</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">display</span>: <span style="color:#8FBFB4">flex</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">16</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">align-items</span>: <span style="color:#8FBFB4">flex-end</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">17</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">gap</span>: <span style="color:#F0B476">20</span>px;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">18</span><span style="padding-left:62.6px">}</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">19</span><span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">20</span><span style="padding-left:62.6px"><span style="color:#E4E7E6">.vlt-card</span> {</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">21</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">background</span>: <span style="color:#F0B476">var</span>(<span style="color:#8FBFB4">--color-surface-raised</span>);</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">22</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">border</span>: <span style="color:#F0B476">1</span>px <span style="color:#8FBFB4">solid</span> <span style="color:#F0B476">var</span>(<span style="color:#8FBFB4">--color-border-default</span>);</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">23</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">border-radius</span>: <span style="color:#F0B476">4</span>px;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">24</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">padding</span>: <span style="color:#F0B476">22</span>px <span style="color:#F0B476">24</span>px;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">25</span><span style="padding-left:62.6px">}</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">26</span><span></span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">27</span><span style="padding-left:62.6px"><span style="color:#E4E7E6">.vlt-group-label</span> {</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">28</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">font-family</span>: <span style="color:#8FBFB4">'IBM Plex Mono'</span>, monospace;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">29</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">letter-spacing</span>: <span style="color:#F0B476">.14</span>em;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">30</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">text-transform</span>: <span style="color:#8FBFB4">uppercase</span>;</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">31</span><span style="padding-left:62.6px">}</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">32</span><span style="padding-left:31.3px"><span style="color:#6C7783"></</span><span style="color:#F0B476">style</span><span style="color:#6C7783">></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- agent -->
|
||||
<div style="width:480px;flex:none;background:#18202B;border-left:1px solid #232C39;display:flex;flex-direction:column">
|
||||
<div style="padding:16px;border-bottom:1px solid #232C39;display:flex;gap:14px">
|
||||
<div style="width:60px;height:60px;flex:none;background:#232C39;border-radius:2px;display:flex;align-items:center;justify-content:center;font:700 20px/1 'IBM Plex Mono',monospace;color:#E8913A">◆</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px;min-width:0">
|
||||
<span style="font:700 14px/1.2 'IBM Plex Mono',monospace;color:#F4F5F4">Claude Code <span style="color:#6C7783;font-weight:400">v2.1.259</span></span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Sans',sans-serif;color:#BAC0C0">Opus 5 (1M context) · Claude Max</span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Mono',monospace;color:#6C7783">~/code/odynt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:12px 16px;display:flex;gap:10px;align-items:center;background:rgba(232,145,58,.10);border-bottom:1px solid #232C39">
|
||||
<span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A">[ ! ]</span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Sans',sans-serif;color:#E4E7E6">1 MCP server needs authentication — run <span style="font-family:'IBM Plex Mono',monospace;color:#F0B476">/mcp</span></span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:14px;overflow:hidden">
|
||||
<div style="display:flex;gap:10px">
|
||||
<span style="font:400 13px/1.6 'IBM Plex Mono',monospace;color:#E8913A">›</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#E4E7E6">Implement the vault admin screens from docs/design_handoff_vaults/README.md.</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<span style="font:400 13px/1.6 'IBM Plex Mono',monospace;color:#6C7783">◆</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#BAC0C0">I read the handoff and the existing policies. Then I write the tests first.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;padding:12px;background:#101720;border:1px solid #232C39;border-radius:2px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span><span style="color:#8FBFB4">Read</span> docs/design_handoff_vaults/README.md <span style="color:#6C7783">· 412 lines</span></span>
|
||||
<span><span style="color:#8FBFB4">Grep</span> "VaultPolicy" <span style="color:#6C7783">· 7 hits</span></span>
|
||||
<span><span style="color:#F0B476">Edit</span> app/Policies/VaultPolicy.php</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:0 16px;height:44px;flex:none;background:#101720;border:2px solid #E8913A;box-shadow:0 0 0 2px rgba(232,145,58,.22);border-radius:2px;display:flex;align-items:center;gap:8px;padding:0 12px">
|
||||
<span style="font:400 13px/1 'IBM Plex Mono',monospace;color:#E8913A">›</span>
|
||||
<span style="font:400 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">test the round trip with Playwright</span>
|
||||
<span style="width:1px;height:16px;background:#E8913A;animation:blink 1.1s steps(1,end) infinite"></span>
|
||||
</div>
|
||||
<div style="padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span>[Opus 5 · 1M]</span>
|
||||
<span style="color:#171C22;background:#E8913A;border-radius:2px;padding:3px 6px;font-weight:600">odynt</span>
|
||||
<span>main</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="color:#E8913A">▸▸ auto mode</span>
|
||||
<span>/rc</span>
|
||||
</div>
|
||||
<div style="height:190px;flex:none;background:#101720;border-top:1px solid #232C39;padding:12px 16px;font:400 12px/1.7 'IBM Plex Mono',monospace;color:#BAC0C0">
|
||||
<div><span style="color:#8FBFB4">[main]</span><span style="color:#6C7783">[~/code/odynt]$</span> php artisan test --filter=Vault</div>
|
||||
<div style="color:#6C7783">PASS Tests\Feature\VaultAdminTest · 14 assertions</div>
|
||||
<div><span style="color:#8FBFB4">[main]</span><span style="color:#6C7783">[~/code/odynt]$</span> <span style="display:inline-block;width:7px;height:14px;background:#E8913A;vertical-align:-2px;animation:blink 1.1s steps(1,end) infinite"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- status bar -->
|
||||
<div style="height:28px;flex:none;background:#18202B;border-top:1px solid #232C39;display:flex;align-items:center;gap:16px;padding:0 14px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span style="color:#E8913A">⑂ main</span>
|
||||
<span style="color:#8FBFB4">+16</span><span style="color:#C4741F">−12</span>
|
||||
<span style="flex:1"></span>
|
||||
<span>resources/views/admin/vaults/form.blade.php</span>
|
||||
<span>·</span><span>Ln 20, Col 12</span><span>·</span><span>UTF-8</span><span>·</span><span>LF</span><span>·</span><span style="color:#BAC0C0">Blade</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 02 · OVERLAYS ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 02 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Overlays</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">One rule: ink scrim, panel on slate-2, 8px radius, esc top right.</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start">
|
||||
|
||||
<!-- search -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">2a · search ⌘f</div>
|
||||
<div data-screen-label="02a Search" style="width:1180px;height:700px;background:rgba(16,23,32,.72);border:1px solid #CDD1CD;border-radius:4px;padding:34px;overflow:hidden">
|
||||
<div style="height:100%;background:#18202B;border:1px solid #232C39;border-radius:8px;box-shadow:0 16px 48px rgba(23,28,34,.18);display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:54px;flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #232C39">
|
||||
<span style="font:400 14px/1 'IBM Plex Mono',monospace;color:#E8913A">⌕</span>
|
||||
<span style="font:500 16px/1 'IBM Plex Mono',monospace;color:#F4F5F4">config(</span>
|
||||
<span style="width:1px;height:18px;background:#E8913A;animation:blink 1.1s steps(1,end) infinite"></span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#171C22;background:#E8913A;border-radius:2px;padding:4px 6px">php</span>
|
||||
<span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#BAC0C0;border:1px solid #232C39;border-radius:2px;padding:4px 6px">md</span>
|
||||
<span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#BAC0C0;border:1px solid #232C39;border-radius:2px;padding:4px 6px">js</span>
|
||||
<span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;border-left:1px solid #232C39;padding-left:12px">0 here · 226 hits · 0 files</span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;display:flex">
|
||||
<div style="width:230px;flex:none;border-right:1px solid #232C39;padding:12px 0;display:flex;flex-direction:column">
|
||||
<div style="padding:0 14px 10px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">this file</div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 14px"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">ConfigSyncCommand.php</span></div>
|
||||
<div style="padding:12px 14px;font:400 12px/1.6 'IBM Plex Sans',sans-serif;color:#6C7783">No matches in this file.</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;padding:12px 0;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="padding:0 16px 10px;display:flex;gap:10px;align-items:center"><span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#E8913A">project</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#171C22;background:#E8913A;border-radius:2px;padding:3px 6px">226</span></div>
|
||||
<div style="padding:6px 16px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#BAC0C0;display:flex;gap:8px;align-items:center"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>cypress/e2e/Conversation/ConversationWelcome.php<span style="flex:1"></span><span style="color:#6C7783">4</span></div>
|
||||
<div style="display:grid;grid-template-columns:64px 1fr;font:400 12px/24px 'IBM Plex Mono',monospace">
|
||||
<span style="text-align:right;padding-right:14px;color:#E8913A;background:#232C39;border-left:2px solid #E8913A">80</span><span style="color:#E4E7E6;background:#232C39">function conversationSeed<span style="color:#171C22;background:#E8913A">Config</span>(): void</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">99</span><span style="color:#BAC0C0">conversationSeed<span style="color:#F0B476">Config</span>();</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">163</span><span style="color:#BAC0C0">conversationSeed<span style="color:#F0B476">Config</span>();</span>
|
||||
</div>
|
||||
<div style="padding:14px 16px 6px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#BAC0C0;display:flex;gap:8px;align-items:center"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>database/seeders/DatabaseSeeder.php<span style="flex:1"></span><span style="color:#6C7783">3</span></div>
|
||||
<div style="display:grid;grid-template-columns:64px 1fr;font:400 12px/24px 'IBM Plex Mono',monospace">
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">230</span><span style="color:#6C7783">* This row is consumed by AppData::resolveDefaultTheme<span style="color:#F0B476">Config</span>()</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">245</span><span style="color:#BAC0C0">'config' => self::guestTheme<span style="color:#F0B476">Config</span>(),</span>
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">257</span><span style="color:#BAC0C0">private static function guestTheme<span style="color:#F0B476">Config</span>(): array</span>
|
||||
</div>
|
||||
<div style="padding:14px 16px 6px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#BAC0C0;display:flex;gap:8px;align-items:center"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#F0B476;border-radius:2px;padding:3px 4px">js</span>cypress/e2e/blueprint-038-conversation-menu.cy.js<span style="flex:1"></span><span style="color:#6C7783">1</span></div>
|
||||
<div style="display:grid;grid-template-columns:64px 1fr;font:400 12px/24px 'IBM Plex Mono',monospace">
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">163</span><span style="color:#BAC0C0">cy.url().should('eq', Cypress.<span style="color:#F0B476">config</span>('baseUrl') + '/conversation');</span>
|
||||
</div>
|
||||
<div style="padding:14px 16px 6px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#BAC0C0;display:flex;gap:8px;align-items:center"><span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:3px 4px">md</span>blueprints/done/012-dialog-page/blueprint.md<span style="flex:1"></span><span style="color:#6C7783">1</span></div>
|
||||
<div style="display:grid;grid-template-columns:64px 1fr;font:400 12px/24px 'IBM Plex Mono',monospace">
|
||||
<span style="text-align:right;padding-right:14px;color:#3A424C">162</span><span style="color:#BAC0C0">— `<span style="color:#8FBFB4">config/ai.php</span>` — providers.anthropic.api_key</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:250px;flex:none;border-left:1px solid #232C39;padding:12px 0">
|
||||
<div style="padding:0 14px 10px;display:flex;gap:10px;align-items:center"><span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">files</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#6C7783">0</span></div>
|
||||
<div style="padding:0 14px;font:400 12px/1.6 'IBM Plex Sans',sans-serif;color:#6C7783">No file names match.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:38px;flex:none;border-top:1px solid #232C39;display:flex;align-items:center;gap:14px;padding:0 18px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span><span style="color:#E8913A">⌘←</span> / <span style="color:#E8913A">⌘→</span> column</span>
|
||||
<span><span style="color:#E8913A">⌘↑</span> / <span style="color:#E8913A">⌘↓</span> row</span>
|
||||
<span><span style="color:#E8913A">↵</span> open</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="border:1px solid #232C39;border-radius:2px;padding:4px 6px">esc</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- shortcuts -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">2b · shortcuts ?</div>
|
||||
<div data-screen-label="02b Shortcuts" style="width:600px;height:700px;background:rgba(16,23,32,.72);border:1px solid #CDD1CD;border-radius:4px;padding:34px;overflow:hidden">
|
||||
<div style="height:100%;background:#18202B;border:1px solid #232C39;border-radius:8px;box-shadow:0 16px 48px rgba(23,28,34,.18);display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:50px;flex:none;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid #232C39">
|
||||
<span style="font:400 13px/1 'IBM Plex Mono',monospace;color:#E8913A">◇</span>
|
||||
<span style="font:700 14px/1 'IBM Plex Mono',monospace;color:#F4F5F4">Keyboard shortcuts</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:400 10px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">esc</span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;padding:8px 0;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="padding:10px 18px 8px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">navigate</div>
|
||||
<div style="display:grid;grid-template-columns:92px 1fr;row-gap:2px;align-items:center;font:400 13px/1.4 'IBM Plex Sans',sans-serif;padding:0 18px">
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">F</span></span><span style="color:#E4E7E6;padding:6px 0">Search contents and names</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">↑↓</span></span><span style="color:#E4E7E6;padding:6px 0">Move through a list</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">↵</span></span><span style="color:#E4E7E6;padding:6px 0">Open the selected item</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">←→</span></span><span style="color:#E4E7E6;padding:6px 0">Column left or right</span>
|
||||
</div>
|
||||
<div style="padding:16px 18px 8px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">agent</div>
|
||||
<div style="display:grid;grid-template-columns:92px 1fr;row-gap:2px;align-items:center;font:400 13px/1.4 'IBM Plex Sans',sans-serif;padding:0 18px">
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">→</span></span><span style="color:#E4E7E6;padding:6px 0">Pass the selection to the agent</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">N</span></span><span style="color:#E4E7E6;padding:6px 0">Open the project note</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">P</span></span><span style="color:#E4E7E6;padding:6px 0">Pass on the whole note</span>
|
||||
</div>
|
||||
<div style="padding:16px 18px 8px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">git</div>
|
||||
<div style="display:grid;grid-template-columns:92px 1fr;row-gap:2px;align-items:center;font:400 13px/1.4 'IBM Plex Sans',sans-serif;padding:0 18px">
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">C</span></span><span style="color:#E4E7E6;padding:6px 0">Focus the commit message</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">↵</span></span><span style="color:#E4E7E6;padding:6px 0">Commit the staged files</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">G</span></span><span style="color:#E4E7E6;padding:6px 0">Source Control column on or off</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">M</span></span><span style="color:#E4E7E6;padding:6px 0">Cycle Actual · Original · Diff · Split</span>
|
||||
</div>
|
||||
<div style="padding:16px 18px 8px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">file</div>
|
||||
<div style="display:grid;grid-template-columns:92px 1fr;row-gap:2px;align-items:center;font:400 13px/1.4 'IBM Plex Sans',sans-serif;padding:0 18px">
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">S</span></span><span style="color:#E4E7E6;padding:6px 0">Save this file</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">W</span></span><span style="color:#E4E7E6;padding:6px 0">Close this file</span>
|
||||
<span style="display:flex;gap:4px"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">⌘</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:5px 6px">.</span></span><span style="color:#E4E7E6;padding:6px 0">Hidden files on or off</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- note -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">2c · project note ⌘n</div>
|
||||
<div data-screen-label="02c Note" style="width:1180px;height:620px;background:rgba(16,23,32,.72);border:1px solid #CDD1CD;border-radius:4px;padding:34px;overflow:hidden">
|
||||
<div style="height:100%;background:#18202B;border:1px solid #232C39;border-radius:8px;box-shadow:0 16px 48px rgba(23,28,34,.18);display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:50px;flex:none;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid #232C39">
|
||||
<span style="font:400 13px/1 'IBM Plex Mono',monospace;color:#E8913A">▤</span>
|
||||
<span style="font:700 14px/1 'IBM Plex Mono',monospace;color:#F4F5F4">Note</span>
|
||||
<span style="font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783">.notes.txt</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;background:#E8913A;border-radius:2px;padding:6px 10px;font:500 12px/1 'IBM Plex Sans',sans-serif;color:#171C22">To the agent <span style="font:600 11px/1 'IBM Plex Mono',monospace">⌘P</span></span>
|
||||
<span style="font:400 10px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">esc</span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;padding:24px 28px;display:flex;flex-direction:column;gap:18px;font:400 14px/1.7 'IBM Plex Mono',monospace;color:#E4E7E6;max-width:68ch">
|
||||
<p style="margin:0">I've created a design for the admin screens that manage the vaults, vault_categories and the vault_subcategories.</p>
|
||||
<p style="margin:0">Implement them. Let them respect the admin policies just like agents, teams and companies have their own policies.</p>
|
||||
<p style="margin:0">The design can be found here: docs/design_handoff_vaults/README.md</p>
|
||||
<p style="margin:0">The vaults index page replaces /crud/vaults. Remove that code and place this feature on /admin/vaults.<span style="display:inline-block;width:8px;height:16px;background:#E8913A;vertical-align:-3px;margin-left:2px;animation:blink 1.1s steps(1,end) infinite"></span></p>
|
||||
</div>
|
||||
<div style="height:34px;flex:none;border-top:1px solid #232C39;display:flex;align-items:center;gap:12px;padding:0 18px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span>saved on focus loss</span><span>·</span><span>412 characters</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- launcher -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">2d · open a project</div>
|
||||
<div data-screen-label="02d Launcher" style="width:600px;height:620px;background:#101720;border:1px solid #CDD1CD;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px">
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#E8913A"></span>
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#6C7783"></span>
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#3A424C"></span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:20px 40px 40px">
|
||||
<div style="width:100%;background:#18202B;border:1px solid #232C39;border-radius:8px;box-shadow:0 16px 48px rgba(23,28,34,.18);display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="padding:16px 18px;border-bottom:1px solid #232C39;display:flex;gap:12px;align-items:center">
|
||||
<span style="font:700 18px/1 'IBM Plex Mono',monospace;color:#E8913A">◆</span>
|
||||
<span style="display:flex;flex-direction:column;gap:4px">
|
||||
<span style="font:700 15px/1 'IBM Plex Mono',monospace;color:#F4F5F4">helder<span style="color:#E8913A;animation:blink 1.1s steps(1,end) infinite">.</span></span>
|
||||
<span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#6C7783">Open a project to begin</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:46px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid #232C39">
|
||||
<span style="font:400 14px/1 'IBM Plex Mono',monospace;color:#E8913A">+</span>
|
||||
<span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Open new project…</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">↵</span>
|
||||
</div>
|
||||
<div style="padding:14px 18px 8px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">recent</div>
|
||||
<div style="display:flex;flex-direction:column;padding-bottom:8px">
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">odynt</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/odynt</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">stedt</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/stedt</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#232C39;border-left:2px solid #E8913A"><span style="color:#E8913A">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">loopt</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#BAC0C0">~/code/loopt</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">doen-r</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/doen-r</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">vakwerk</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/vakwerk</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">diagram</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/diagram</span></div>
|
||||
<div style="height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-left:2px solid transparent"><span style="color:#6C7783">▤</span><span style="font:500 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">marketingtools</span><span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">~/code/marketingtools</span></div>
|
||||
</div>
|
||||
<div style="height:36px;border-top:1px solid #232C39;display:flex;align-items:center;gap:12px;padding:0 18px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span><span style="color:#E8913A">⌘↑↓</span> navigate</span><span><span style="color:#E8913A">↵</span> open</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 03 · DIFF ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 03 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Diff</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">Added is teal, removed is amber-deep. No green, no red.</span>
|
||||
</div>
|
||||
|
||||
<div data-screen-label="03 Diff" style="width:1760px;height:620px;background:#101720;border:1px solid #CDD1CD;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:42px;flex:none;background:#18202B;border-bottom:1px solid #232C39;display:flex;align-items:center;gap:14px;padding:0 14px">
|
||||
<div style="display:flex;gap:7px;flex:none">
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#E8913A"></span>
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#6C7783"></span>
|
||||
<span style="width:11px;height:11px;border-radius:9999px;background:#3A424C"></span>
|
||||
</div>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#F4F5F4">resources/views/help/vault/declined-names.blade.php</span>
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">modified</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#8FBFB4">+1</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#C4741F">−1</span>
|
||||
<span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">staged → actual</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;border:1px solid #232C39;border-radius:2px;padding:6px 10px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Collapse <span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#E8913A">esc</span></span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;display:flex">
|
||||
<div style="flex:1;min-width:0;border-right:1px solid #232C39;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:30px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #232C39;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783"><span>original</span><span style="letter-spacing:0;text-transform:none;font-weight:400;color:#3A424C">before</span></div>
|
||||
<div style="display:grid;grid-template-columns:52px 1fr;align-content:start;font:400 13px/22px 'IBM Plex Mono',monospace;padding-top:8px">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">18</span><span style="padding-left:62.6px;color:#BAC0C0">{<span>{</span> __('A merge writes a declined row…') }<span>}</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">19</span><span style="padding-left:46.9px;color:#6C7783"></p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">20</span><span style="padding-left:31.3px;color:#6C7783"></section></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">21</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#C4741F;background:rgba(196,116,31,.14);border-left:2px solid #C4741F">22</span><span style="padding-left:31.3px;color:#E4E7E6;background:rgba(196,116,31,.14)"><span style="color:#6C7783"><</span>section <span style="color:#BAC0C0">class</span>=<span style="color:#8FBFB4">"odynt-help__section"</span><span style="color:#6C7783">></span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">23</span><span style="padding-left:46.9px;color:#BAC0C0"><h2>{<span>{</span> __('The reason a row can carry') }<span>}</span></h2></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">24</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">25</span><span style="padding-left:46.9px;color:#6C7783"><p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">26</span><span style="padding-left:62.6px;color:#BAC0C0">{<span>{</span> __('A row can carry one of eleven reason codes…') }<span>}</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">27</span><span style="padding-left:46.9px;color:#6C7783"></p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">28</span><span style="padding-left:31.3px;color:#6C7783"></section></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:30px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #232C39;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783"><span style="color:#E8913A">updated</span><span style="letter-spacing:0;text-transform:none;font-weight:400;color:#3A424C">after</span></div>
|
||||
<div style="display:grid;grid-template-columns:52px 1fr;align-content:start;font:400 13px/22px 'IBM Plex Mono',monospace;padding-top:8px">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">18</span><span style="padding-left:62.6px;color:#BAC0C0">{<span>{</span> __('A merge writes a declined row…') }<span>}</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">19</span><span style="padding-left:46.9px;color:#6C7783"></p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">20</span><span style="padding-left:31.3px;color:#6C7783"></section></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">21</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#8FBFB4;background:rgba(143,191,180,.12);border-left:2px solid #8FBFB4">22</span><span style="padding-left:31.3px;color:#F4F5F4;background:rgba(143,191,180,.12)"><span style="color:#6C7783"><</span>section <span style="color:#BAC0C0">class</span>=<span style="color:#8FBFB4">"odynt-help__section is-reasons"</span><span style="color:#6C7783">></span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">23</span><span style="padding-left:46.9px;color:#BAC0C0"><h2>{<span>{</span> __('The reason a row can carry') }<span>}</span></h2></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">24</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">25</span><span style="padding-left:46.9px;color:#6C7783"><p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">26</span><span style="padding-left:62.6px;color:#BAC0C0">{<span>{</span> __('A row can carry one of eleven reason codes…') }<span>}</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">27</span><span style="padding-left:46.9px;color:#6C7783"></p></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">28</span><span style="padding-left:31.3px;color:#6C7783"></section></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 04 · DETAILS ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 04 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Details</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">Menus, prompts, tooltips and the markdown switch. All on 24px rows.</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start">
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">4a · explorer menu</div>
|
||||
<div style="width:320px;background:#18202B;border:1px solid #232C39;border-radius:4px;box-shadow:0 4px 16px rgba(23,28,34,.10);padding:8px 0;display:flex;flex-direction:column">
|
||||
<div style="padding:6px 14px 10px;font:400 11px/1.4 'IBM Plex Mono',monospace;color:#6C7783;border-bottom:1px solid #232C39;margin-bottom:6px">tests/Unit/ExampleTest.php</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 12px;margin:0 2px;background:#232C39;border-left:2px solid #E8913A;font:500 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4"><span style="color:#E8913A">◇</span>Pass on reference</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">⧉</span>Copy reference</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">◇</span>Pass on file name</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">⧉</span>Copy file name</div>
|
||||
<div style="margin:6px 0;border-top:1px solid #232C39"></div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">✎</span>Rename file</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">▤</span>Show in Finder</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#C4741F"><span>⌫</span>Delete file</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">4b · source control menu</div>
|
||||
<div style="width:320px;background:#18202B;border:1px solid #232C39;border-radius:4px;box-shadow:0 4px 16px rgba(23,28,34,.10);padding:8px 0;display:flex;flex-direction:column">
|
||||
<div style="padding:6px 14px 10px;font:400 11px/1.4 'IBM Plex Mono',monospace;color:#6C7783;border-bottom:1px solid #232C39;margin-bottom:6px">resources/views/help/vault/declined-names.blade.php</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 12px;margin:0 2px;background:#232C39;border-left:2px solid #E8913A;font:500 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4"><span style="color:#E8913A">◇</span>Pass on reference</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">⧉</span>Copy reference</div>
|
||||
<div style="margin:6px 0;border-top:1px solid #232C39"></div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#8FBFB4">+</span>Stage changes</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0"><span style="color:#6C7783">⇄</span>Open diff</div>
|
||||
<div style="height:30px;display:flex;align-items:center;gap:10px;padding:0 14px;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#C4741F"><span>↺</span>Discard changes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">4c · pass on to agent</div>
|
||||
<div style="width:460px;background:#18202B;border:1px solid #232C39;border-radius:4px;box-shadow:0 4px 16px rgba(23,28,34,.10);padding:14px;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span style="font:400 13px/1 'IBM Plex Mono',monospace;color:#E8913A">◇</span>
|
||||
<span style="font:700 13px/1 'IBM Plex Mono',monospace;color:#F4F5F4">Pass on to agent</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:400 10px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">esc</span>
|
||||
</div>
|
||||
<div style="height:38px;background:#101720;border:2px solid #E8913A;box-shadow:0 0 0 2px rgba(232,145,58,.22);border-radius:2px;display:flex;align-items:center;gap:2px;padding:0 10px;font:400 13px/1 'IBM Plex Mono',monospace;color:#F4F5F4">
|
||||
<span>write the test for this</span>
|
||||
<span style="width:1px;height:16px;background:#E8913A;animation:blink 1.1s steps(1,end) infinite"></span>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783;flex:none">inserts</span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Mono',monospace;color:#171C22;background:#E8913A;border-radius:2px;padding:5px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">write the test for this ⇒ tests/Unit/ExampleTest.php</span>
|
||||
</div>
|
||||
<div style="font:400 11px/1.5 'IBM Plex Mono',monospace;color:#6C7783"><span style="color:#E8913A">↵</span> insert into agent · <span style="color:#E8913A">esc</span> cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">4d · toolbar + tooltip</div>
|
||||
<div style="width:640px;background:#18202B;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:44px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Search <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘F</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;background:rgba(232,145,58,.10);font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Auto-fit <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid rgba(232,145,58,.35);border-radius:2px;padding:4px 6px">⌘A</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#6C7783">Hidden <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘.</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Note <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘N</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;background:rgba(232,145,58,.10);font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Git <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid rgba(232,145,58,.35);border-radius:2px;padding:4px 6px">⌘G</span></span>
|
||||
</div>
|
||||
<sc-if value="{{ showTooltips }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="padding:14px 12px;display:flex;flex-direction:column;gap:10px;align-items:flex-end">
|
||||
<div style="max-width:300px;background:#232C39;border:1px solid #3A424C;border-radius:2px;padding:8px 10px;font:400 12px/1.5 'IBM Plex Sans',sans-serif;color:#E4E7E6">Hidden files: <span style="color:#E8913A">hidden</span> — dotfiles excluded from the tree and the search. Click to show.</div>
|
||||
<div style="max-width:300px;background:#232C39;border:1px solid #3A424C;border-radius:2px;padding:8px 10px;font:400 12px/1.5 'IBM Plex Sans',sans-serif;color:#E4E7E6">Auto-fit panels: <span style="color:#E8913A">on</span> — columns re-fit on resize and focus. Click to lock the current sizes.</div>
|
||||
<div style="max-width:300px;background:#232C39;border:1px solid #3A424C;border-radius:2px;padding:8px 10px;font:400 12px/1.5 'IBM Plex Sans',sans-serif;color:#E4E7E6">Project note (.notes.txt) — kept next to this project.</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="padding:12px;border-top:1px solid #232C39;font:400 11px/1.5 'IBM Plex Mono',monospace;color:#6C7783">Tooltip: slate-3 surface, 1px border, no arrow, no shadow. The state is amber inside the sentence.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">4e · markdown actual · preview</div>
|
||||
<div style="width:760px;height:360px;background:#101720;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex">
|
||||
<div style="flex:1;min-width:0;border-right:1px solid #232C39;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">markdown</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="display:flex;border:1px solid #232C39;border-radius:2px;overflow:hidden">
|
||||
<span style="padding:5px 10px;font:500 11px/1 'IBM Plex Sans',sans-serif;color:#171C22;background:#E8913A">Actual</span>
|
||||
<span style="padding:5px 10px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Preview</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:44px 1fr;align-content:start;font:400 12px/20px 'IBM Plex Mono',monospace;padding-top:8px">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">1</span><span style="color:#BAC0C0">You write the handover record for a</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">2</span><span style="color:#BAC0C0">conversation that is about to be cut.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">3</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">4</span><span style="color:#BAC0C0">The reader is a model with no access to</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">5</span><span style="color:#BAC0C0">the original messages.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">6</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">7</span><span style="color:#F0B476">## Sources</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">8</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">9</span><span style="color:#BAC0C0">Use only the messages, the tool results</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">10</span><span style="color:#BAC0C0">and the previous summary.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">markdown</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="display:flex;border:1px solid #232C39;border-radius:2px;overflow:hidden">
|
||||
<span style="padding:5px 10px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Actual</span>
|
||||
<span style="padding:5px 10px;font:500 11px/1 'IBM Plex Sans',sans-serif;color:#171C22;background:#E8913A;border-left:1px solid #232C39">Preview</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="padding:18px 20px;display:flex;flex-direction:column;gap:14px;max-width:68ch">
|
||||
<p style="margin:0;font:400 13px/1.7 'IBM Plex Sans',sans-serif;color:#E4E7E6">You write the handover record for a conversation that is about to be cut.</p>
|
||||
<p style="margin:0;font:400 13px/1.7 'IBM Plex Sans',sans-serif;color:#E4E7E6">The reader is a model with no access to the original messages. Your record is the only input it gets.</p>
|
||||
<h3 style="margin:0;padding-bottom:8px;border-bottom:1px solid #232C39;font:700 16px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em;color:#F4F5F4">Sources</h3>
|
||||
<p style="margin:0;font:400 13px/1.7 'IBM Plex Sans',sans-serif;color:#BAC0C0">Use only the messages, the tool results and the previous summary. If you cannot point to that source, delete the line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 05 · FOUNDATIONS ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 05 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Foundations</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">Four surfaces, one accent, six syntax colours.</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start">
|
||||
|
||||
<div style="width:520px;background:#E5E7E4;border:1px solid #CDD1CD;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:16px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">surfaces and accent</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="width:44px;height:44px;background:#101720;border:1px solid #CDD1CD;border-radius:2px"></span><span style="display:flex;flex-direction:column;gap:2px"><span style="font:600 12px/1.3 'IBM Plex Mono',monospace">#101720</span><span style="font:400 11px/1.3 'IBM Plex Sans',sans-serif;color:#6B7480">editor · terminal</span></span></div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="width:44px;height:44px;background:#18202B;border:1px solid #CDD1CD;border-radius:2px"></span><span style="display:flex;flex-direction:column;gap:2px"><span style="font:600 12px/1.3 'IBM Plex Mono',monospace">#18202B</span><span style="font:400 11px/1.3 'IBM Plex Sans',sans-serif;color:#6B7480">panels · chrome</span></span></div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="width:44px;height:44px;background:#232C39;border:1px solid #CDD1CD;border-radius:2px"></span><span style="display:flex;flex-direction:column;gap:2px"><span style="font:600 12px/1.3 'IBM Plex Mono',monospace">#232C39</span><span style="font:400 11px/1.3 'IBM Plex Sans',sans-serif;color:#6B7480">selection · border</span></span></div>
|
||||
<div style="display:flex;gap:12px;align-items:center"><span style="width:44px;height:44px;background:#E8913A;border:1px solid #CDD1CD;border-radius:2px"></span><span style="display:flex;flex-direction:column;gap:2px"><span style="font:600 12px/1.3 'IBM Plex Mono',monospace">#E8913A</span><span style="font:400 11px/1.3 'IBM Plex Sans',sans-serif;color:#6B7480">action · state · cursor</span></span></div>
|
||||
</div>
|
||||
<p style="margin:0;font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#3A424C;text-wrap:pretty">Amber is a reservation: active toggle, selection marker, cursor, the blinking period and the counts in the status bar. Never an amber surface as decoration.</p>
|
||||
</div>
|
||||
|
||||
<div style="width:520px;background:#101720;border:1px solid #CDD1CD;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:16px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">syntax</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;font:400 12px/1.4 'IBM Plex Mono',monospace">
|
||||
<span style="color:#E4E7E6">text · #E4E7E6</span>
|
||||
<span style="color:#BAC0C0">variable · #BAC0C0</span>
|
||||
<span style="color:#6C7783">comment · #6C7783</span>
|
||||
<span style="color:#C3A6CE">keyword · #C3A6CE</span>
|
||||
<span style="color:#8FBFB4">string · #8FBFB4</span>
|
||||
<span style="color:#F0B476">number · tag · #F0B476</span>
|
||||
</div>
|
||||
<div style="border-top:1px solid #232C39;padding-top:14px;display:flex;flex-direction:column;gap:8px;font:400 12px/1.6 'IBM Plex Mono',monospace">
|
||||
<span style="color:#8FBFB4">+ added — #8FBFB4 op rgba(143,191,180,.12)</span>
|
||||
<span style="color:#C4741F">− removed — #C4741F op rgba(196,116,31,.14)</span>
|
||||
</div>
|
||||
<p style="margin:0;font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#BAC0C0;text-wrap:pretty">Six colours, all muted. No green for good and no red for bad — the diff reads on shape and on the 2px rule, not on alarm.</p>
|
||||
</div>
|
||||
|
||||
<div style="width:520px;background:#E5E7E4;border:1px solid #CDD1CD;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:14px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">type and rhythm</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<span style="font:700 24px/1.1 'IBM Plex Mono',monospace;letter-spacing:-.03em">IBM Plex Mono 700</span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Sans',sans-serif;color:#6B7480">titles, labels, paths, code, shortcuts</span>
|
||||
<span style="font:400 20px/1.3 'IBM Plex Sans',sans-serif">IBM Plex Sans 400 · 500</span>
|
||||
<span style="font:400 12px/1.4 'IBM Plex Sans',sans-serif;color:#6B7480">rows, menu items, tooltips, running text</span>
|
||||
</div>
|
||||
<div style="border-top:1px solid #CDD1CD;padding-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;font:400 12px/1.6 'IBM Plex Mono',monospace;color:#3A424C">
|
||||
<span>row height · 24px</span><span>chrome · 44px</span>
|
||||
<span>code line · 20px</span><span>status bar · 28px</span>
|
||||
<span>radius control · 2px</span><span>radius overlay · 8px</span>
|
||||
<span>border · 1px</span><span>marker · 2px amber</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:520px;background:#E5E7E4;border:1px solid #CDD1CD;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:14px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">row states</div>
|
||||
<div style="background:#18202B;border:1px solid #232C39;border-radius:2px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:28px;display:flex;align-items:center;gap:10px;padding:0 12px;border-left:2px solid transparent;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">rest</div>
|
||||
<div style="height:28px;display:flex;align-items:center;gap:10px;padding:0 12px;border-left:2px solid transparent;background:#1E2733;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">hover — fill one step deeper</div>
|
||||
<div style="height:28px;display:flex;align-items:center;gap:10px;padding:0 10px;border-left:2px solid #E8913A;background:#232C39;font:500 13px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">selected — 2px amber on the left</div>
|
||||
<div style="height:28px;display:flex;align-items:center;gap:10px;padding:0 12px;border-left:2px solid transparent;font:400 13px/1 'IBM Plex Sans',sans-serif;color:#6C7783;opacity:.4">not available — 40%</div>
|
||||
</div>
|
||||
<p style="margin:0;font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#3A424C;text-wrap:pretty">No movement, no shadow, no scale. Colour only, 160ms. The only animation in the whole editor is the blinking cursor and the period in the mark.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== 06 · SYNTAX ===================== -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #CDD1CD;padding-bottom:12px">
|
||||
<span style="font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">[ 06 ]</span>
|
||||
<span style="font:700 20px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em">Code colours</span>
|
||||
<span style="font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#6B7480">The same six colours across every language. Nothing bold, nothing italic — weight stays 400 so the column reads flat.</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start">
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">6a · javascript</div>
|
||||
<div style="width:620px;background:#101720;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#F0B476;border-radius:2px;padding:3px 4px">js</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#F4F5F4">resources/js/symbols-service.js</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">javascript</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:48px 1fr;align-content:start;font:400 13px/20px 'IBM Plex Mono',monospace;padding:10px 0">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">1</span><span style="color:#6C7783">// One request per file. The tree keeps the last answer.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">2</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">3</span><span><span style="color:#C3A6CE">import</span> { <span style="color:#BAC0C0">cache</span> } <span style="color:#C3A6CE">from</span> <span style="color:#8FBFB4">'./cache.js'</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">4</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">5</span><span><span style="color:#C3A6CE">const</span> <span style="color:#BAC0C0">ENDPOINT</span> = <span style="color:#8FBFB4">'/api/symbols'</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">6</span><span><span style="color:#C3A6CE">const</span> <span style="color:#BAC0C0">TIMEOUT</span> = <span style="color:#F0B476">2500</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">7</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">8</span><span><span style="color:#C3A6CE">export async function</span> <span style="color:#E4E7E6">readSymbols</span>(<span style="color:#BAC0C0">path</span>, <span style="color:#BAC0C0">signal</span>) {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">9</span><span style="padding-left:15.6px"><span style="color:#C3A6CE">if</span> (<span style="color:#BAC0C0">cache</span>.<span style="color:#E4E7E6">has</span>(<span style="color:#BAC0C0">path</span>)) <span style="color:#C3A6CE">return</span> <span style="color:#BAC0C0">cache</span>.<span style="color:#E4E7E6">get</span>(<span style="color:#BAC0C0">path</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">10</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">11</span><span style="padding-left:15.6px"><span style="color:#C3A6CE">const</span> <span style="color:#BAC0C0">res</span> = <span style="color:#C3A6CE">await</span> <span style="color:#E4E7E6">fetch</span>(<span style="color:#8FBFB4">`${ENDPOINT}?p=${path}`</span>, { <span style="color:#BAC0C0">signal</span> });</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">12</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">13</span><span style="padding-left:15.6px"><span style="color:#C3A6CE">if</span> (!<span style="color:#BAC0C0">res</span>.<span style="color:#BAC0C0">ok</span>) {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">14</span><span style="padding-left:31.3px"><span style="color:#C3A6CE">throw new</span> <span style="color:#E4E7E6">Error</span>(<span style="color:#8FBFB4">`symbols: ${res.status}`</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">15</span><span style="padding-left:15.6px">}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">16</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">17</span><span style="padding-left:15.6px"><span style="color:#C3A6CE">const</span> <span style="color:#BAC0C0">rows</span> = <span style="color:#C3A6CE">await</span> <span style="color:#BAC0C0">res</span>.<span style="color:#E4E7E6">json</span>();</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">18</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">cache</span>.<span style="color:#E4E7E6">set</span>(<span style="color:#BAC0C0">path</span>, <span style="color:#BAC0C0">rows</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">19</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">20</span><span style="padding-left:15.6px"><span style="color:#C3A6CE">return</span> <span style="color:#BAC0C0">rows</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">21</span><span>}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">6b · php</div>
|
||||
<div style="width:620px;background:#101720;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:3px 4px">php</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#F4F5F4">app/Console/Commands/ConfigSyncCommand.php</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">php</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:48px 1fr;align-content:start;font:400 13px/20px 'IBM Plex Mono',monospace;padding:10px 0">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">1</span><span><span style="color:#6C7783"><?php</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">2</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">3</span><span><span style="color:#C3A6CE">declare</span>(<span style="color:#BAC0C0">strict_types</span>=<span style="color:#F0B476">1</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">4</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">5</span><span><span style="color:#C3A6CE">namespace</span> <span style="color:#8FBFB4">App\Console\Commands</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">6</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">7</span><span><span style="color:#C3A6CE">use</span> <span style="color:#8FBFB4">App\Models\Config</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">8</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">9</span><span><span style="color:#6C7783">/** Writes one row per config group. */</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">10</span><span><span style="color:#C3A6CE">final class</span> <span style="color:#E4E7E6">ConfigSyncCommand</span> <span style="color:#C3A6CE">extends</span> <span style="color:#E4E7E6">Command</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">11</span><span>{</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">12</span><span style="padding-left:31.3px"><span style="color:#C3A6CE">protected</span> <span style="color:#BAC0C0">$signature</span> = <span style="color:#8FBFB4">'config:sync'</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">13</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">14</span><span style="padding-left:31.3px"><span style="color:#C3A6CE">public function</span> <span style="color:#E4E7E6">handle</span>(): <span style="color:#C3A6CE">int</span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">15</span><span style="padding-left:31.3px">{</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">16</span><span style="padding-left:62.6px"><span style="color:#BAC0C0">$created</span> = <span style="color:#F0B476">0</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">17</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">18</span><span style="padding-left:62.6px"><span style="color:#C3A6CE">foreach</span> (<span style="color:#BAC0C0">$this</span>-><span style="color:#E4E7E6">registry</span>() <span style="color:#C3A6CE">as</span> <span style="color:#BAC0C0">$key</span> => <span style="color:#BAC0C0">$class</span>) {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">19</span><span style="padding-left:93.8px"><span style="color:#BAC0C0">$row</span> = <span style="color:#E4E7E6">Config</span>::<span style="color:#E4E7E6">query</span>()-><span style="color:#E4E7E6">find</span>(<span style="color:#BAC0C0">$key</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">20</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">21</span><span style="padding-left:93.8px"><span style="color:#C3A6CE">if</span> (<span style="color:#BAC0C0">$row</span> === <span style="color:#F0B476">null</span>) {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">22</span><span style="padding-left:125.1px"><span style="color:#BAC0C0">$created</span>++;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">23</span><span style="padding-left:93.8px">}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">24</span><span style="padding-left:62.6px">}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">25</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">26</span><span style="padding-left:62.6px"><span style="color:#C3A6CE">return</span> <span style="color:#E4E7E6">self</span>::<span style="color:#BAC0C0">SUCCESS</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">27</span><span style="padding-left:31.3px">}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">28</span><span>}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">6c · css</div>
|
||||
<div style="width:620px;background:#101720;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#8FBFB4;border-radius:2px;padding:3px 4px">css</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#F4F5F4">resources/css/panels.css</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">css</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:48px 1fr;align-content:start;font:400 13px/20px 'IBM Plex Mono',monospace;padding:10px 0">
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">1</span><span style="color:#6C7783">/* Four surfaces, one accent. Nothing else. */</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">2</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">3</span><span><span style="color:#E4E7E6">:root</span> {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">4</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">--editor</span>: <span style="color:#F0B476">#101720</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">5</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">--panel</span>: <span style="color:#F0B476">#18202B</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">6</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">--accent</span>: <span style="color:#F0B476">#E8913A</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">7</span><span>}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">8</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">9</span><span><span style="color:#E4E7E6">.row</span> {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">10</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">display</span>: <span style="color:#8FBFB4">flex</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">11</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">gap</span>: <span style="color:#F0B476">8</span>px;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">12</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">height</span>: <span style="color:#F0B476">24</span>px;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">13</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">border-left</span>: <span style="color:#F0B476">2</span>px <span style="color:#8FBFB4">solid</span> <span style="color:#8FBFB4">transparent</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">14</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">transition</span>: <span style="color:#BAC0C0">background</span> <span style="color:#F0B476">160</span>ms <span style="color:#8FBFB4">ease-out</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">15</span><span>}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">16</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">17</span><span><span style="color:#E4E7E6">.row</span><span style="color:#C3A6CE">:hover</span> {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">18</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">background</span>: <span style="color:#F0B476">#1E2733</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">19</span><span>}</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">20</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">21</span><span><span style="color:#E4E7E6">.row</span><span style="color:#C3A6CE">[aria-selected='true']</span> {</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">22</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">background</span>: <span style="color:#F0B476">#232C39</span>;</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">23</span><span style="padding-left:15.6px"><span style="color:#BAC0C0">border-left-color</span>: <span style="color:#F0B476">var</span>(<span style="color:#8FBFB4">--accent</span>);</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#3A424C">24</span><span>}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6B7480">6d · markdown preview</div>
|
||||
<div style="width:620px;background:#101720;border:1px solid #232C39;border-radius:4px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="height:34px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #232C39">
|
||||
<span style="font:600 8px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:3px 4px">md</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#F4F5F4">blueprints/046-symbols/blueprint.md</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="display:flex;border:1px solid #232C39;border-radius:2px;overflow:hidden">
|
||||
<span style="padding:5px 10px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Actual</span>
|
||||
<span style="padding:5px 10px;font:500 11px/1 'IBM Plex Sans',sans-serif;color:#171C22;background:#E8913A;border-left:1px solid #232C39">Preview</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="padding:26px 30px 30px;display:flex;flex-direction:column;gap:18px;max-width:68ch">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">blueprint · 046</span>
|
||||
<h2 style="margin:0;font:700 24px/1.1 'IBM Plex Mono',monospace;letter-spacing:-.03em;color:#F4F5F4">Symbols in the tree</h2>
|
||||
<p style="margin:0;font:400 14px/1.7 'IBM Plex Sans',sans-serif;color:#E4E7E6;text-wrap:pretty">The explorer shows classes and functions under a file once the file is open. The list comes from one request per file and it is cached for the session.</p>
|
||||
<h3 style="margin:0;padding-bottom:8px;border-bottom:1px solid #232C39;font:700 17px/1.2 'IBM Plex Mono',monospace;letter-spacing:-.02em;color:#F4F5F4">What it changes</h3>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;font:400 14px/1.7 'IBM Plex Sans',sans-serif;color:#BAC0C0">
|
||||
<div style="display:flex;gap:10px"><span style="color:#E8913A;flex:none">—</span><span>A row gains one child level. Nothing else in the tree moves.</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:#E8913A;flex:none">—</span><span>The endpoint answers in under <span style="font:400 13px/1.5 'IBM Plex Mono',monospace;color:#F0B476;background:#18202B;border:1px solid #232C39;border-radius:2px;padding:1px 5px">250ms</span> for a file of 2000 lines.</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:#E8913A;flex:none">—</span><span>A parse error leaves the file row untouched and logs once.</span></div>
|
||||
</div>
|
||||
<div style="border-left:2px solid #E8913A;padding:2px 0 2px 16px;font:italic 400 15px/1.6 'IBM Plex Sans',sans-serif;color:#F0B476">A symbol list nobody asked for is a symbol list nobody reads. Open the file first.</div>
|
||||
<div style="background:#18202B;border:1px solid #232C39;border-radius:2px;padding:14px 16px;display:grid;grid-template-columns:1fr;gap:0;font:400 13px/20px 'IBM Plex Mono',monospace">
|
||||
<span style="color:#6C7783">// the shape one row returns</span>
|
||||
<span style="color:#E4E7E6">{ <span style="color:#BAC0C0">rel</span>: <span style="color:#8FBFB4">'class'</span>, <span style="color:#BAC0C0">line</span>: <span style="color:#F0B476">42</span>, <span style="color:#BAC0C0">kind</span>: <span style="color:#8FBFB4">'php'</span> }</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:0;border:1px solid #232C39;border-radius:2px;overflow:hidden;font:400 13px/1 'IBM Plex Sans',sans-serif">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 90px;background:#18202B;border-bottom:1px solid #232C39;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">
|
||||
<span style="padding:10px 14px">step</span><span style="padding:10px 14px">file</span><span style="padding:10px 14px">state</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 90px;color:#BAC0C0;border-bottom:1px solid #232C39">
|
||||
<span style="padding:10px 14px">Endpoint</span><span style="padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px">routes/api.php</span><span style="padding:10px 14px;color:#8FBFB4">done</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 90px;color:#BAC0C0">
|
||||
<span style="padding:10px 14px">Tree level</span><span style="padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px">explorer.js</span><span style="padding:10px 14px;color:#E8913A">open</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin:0;font:400 14px/1.7 'IBM Plex Sans',sans-serif;color:#BAC0C0">Full contract in <a href="#" style="color:#E8913A;border-bottom:1px solid #232C39">docs/symbols.md</a> →</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"showTooltips":{"editor":"boolean","default":true,"tsType":"boolean","section":"Details"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return { showTooltips: this.props.showTooltips ?? true };
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
386
docs/design/README.md
Normal file
386
docs/design/README.md
Normal file
@@ -0,0 +1,386 @@
|
||||
# Handoff: Helder — editor for working with Claude Code
|
||||
|
||||
## Overview
|
||||
|
||||
Helder is a desktop code editor built around one job: work on a codebase together with
|
||||
Claude Code. It replaces a general IDE with four columns — source control, explorer,
|
||||
editor, agent — plus five overlays (search, keyboard shortcuts, project note, project
|
||||
launcher, expanded diff) and a set of small surfaces (context menus, a pass-on-to-agent
|
||||
prompt, tooltips, a markdown preview).
|
||||
|
||||
This handoff describes one consistent visual system for all of those screens.
|
||||
|
||||
## About the design files
|
||||
|
||||
The files in this bundle are **design references written in HTML**. They show the
|
||||
intended look, spacing and states. They are not production code to copy.
|
||||
|
||||
The task is to **recreate these screens in the target codebase's own environment**
|
||||
(Electron + React, Tauri + Svelte, SwiftUI, whatever the app already uses) with its
|
||||
established patterns. If no environment exists yet, pick the framework that fits a
|
||||
desktop editor and implement the design there.
|
||||
|
||||
`Helder IDE.dc.html` is a single-canvas board: every screen sits on one page, side by
|
||||
side, at real pixel sizes. Open it in a browser to inspect any value with devtools.
|
||||
|
||||
## Fidelity
|
||||
|
||||
**High fidelity.** Colours, type, row heights, paddings, radii and states are final and
|
||||
exact. Recreate them pixel-for-pixel. Everything is authored with inline styles so any
|
||||
element's computed value can be read directly from the file.
|
||||
|
||||
Two things are deliberately *not* final:
|
||||
- The code shown inside the editor panes is sample content, not a spec.
|
||||
- Icons are Unicode stand-ins (`⌕ ▤ ◇ ⧉ ✎ ↺ ⇄ ⑂ ◆ →`). Ship them as Lucide glyphs at
|
||||
stroke width 1.75, 16px inline / 18px standalone.
|
||||
|
||||
---
|
||||
|
||||
## Design tokens
|
||||
|
||||
### Surfaces (four, no more)
|
||||
|
||||
| Token | Hex | Use |
|
||||
|---|---|---|
|
||||
| `editor` | `#101720` | Editor canvas, terminal, launcher backdrop, code blocks |
|
||||
| `panel` | `#18202B` | Title bar, side panels, status bar, overlays, menus, tooltip host |
|
||||
| `raised` | `#232C39` | Selected row, hairline borders, tooltip surface, keycap borders |
|
||||
| `hover` | `#1E2733` | Row hover fill only |
|
||||
|
||||
### Text on dark
|
||||
|
||||
| Token | Hex | Use |
|
||||
|---|---|---|
|
||||
| `text-1` | `#F4F5F4` | Active file, dialog titles, selected row |
|
||||
| `text-2` | `#E4E7E6` | Body copy, code plain text |
|
||||
| `text-3` | `#BAC0C0` | Inactive rows, identifiers, secondary copy |
|
||||
| `text-4` | `#6C7783` | Labels, paths, meta, comments |
|
||||
| `text-5` | `#3A424C` | Line numbers, disabled |
|
||||
|
||||
### Accent — amber, reserved
|
||||
|
||||
`#E8913A` primary · `#C4741F` deep · `#F0B476` soft · `rgba(232,145,58,.10)` tint ·
|
||||
`rgba(232,145,58,.22)` focus ring.
|
||||
|
||||
Amber is allowed **only** for: the active toolbar toggle (tint fill), the 2px selection
|
||||
rule, the caret, keycap glyphs, the blinking period in the wordmark, the primary button
|
||||
fill (ink text on amber, never white), the search-hit highlight, section markers, list
|
||||
markers, links, and counts in the status bar. Never an amber panel, never an amber
|
||||
heading.
|
||||
|
||||
### Light canvas (this board only)
|
||||
|
||||
`#EFF0EE` page · `#E5E7E4` spec card · `#CDD1CD` hairline · `#171C22` ink ·
|
||||
`#3A424C` ink muted · `#6B7480` ink dim. The application itself is dark only.
|
||||
|
||||
### Syntax — six colours, all muted
|
||||
|
||||
| Role | Hex |
|
||||
|---|---|
|
||||
| plain / function name | `#E4E7E6` |
|
||||
| variable / property | `#BAC0C0` |
|
||||
| comment | `#6C7783` |
|
||||
| keyword / operator / pseudo-class | `#C3A6CE` |
|
||||
| string / value / type path | `#8FBFB4` |
|
||||
| number / tag / hex literal | `#F0B476` |
|
||||
|
||||
No bold, no italic in code. Weight stays 400 so the column reads flat.
|
||||
|
||||
### Diff
|
||||
|
||||
- added: text `#8FBFB4`, fill `rgba(143,191,180,.12)`, 2px left rule `#8FBFB4`
|
||||
- removed: text `#C4741F`, fill `rgba(196,116,31,.14)`, 2px left rule `#C4741F`
|
||||
- counts in headers: `+1` in `#8FBFB4`, `−1` in `#C4741F` (real minus sign U+2212)
|
||||
|
||||
No green, no red anywhere. The diff reads on shape and on the 2px rule.
|
||||
|
||||
### Type
|
||||
|
||||
- `IBM Plex Mono` — 400/500/600/700. All labels, paths, code, keycaps, titles, numbers.
|
||||
- `IBM Plex Sans` — 400/500. Rows, menu items, tooltips, buttons, running text.
|
||||
|
||||
| Role | Spec |
|
||||
|---|---|
|
||||
| Board display | Mono 700, 58px/1.02, `-0.04em` |
|
||||
| Section title | Mono 700, 20px/1.2, `-0.02em` |
|
||||
| Dialog title | Mono 700, 14px/1 |
|
||||
| Section/panel label | Mono 700, 10px, `0.14em`, uppercase, `#6C7783` |
|
||||
| Board label | Mono 700, 10–11px, `0.14em`, uppercase, `#6B7480` |
|
||||
| Code | Mono 400, 13px / 20px line box |
|
||||
| Search hit line | Mono 400, 12px / 24px line box |
|
||||
| Path / meta / status bar | Mono 400, 11–12px |
|
||||
| Keycap | Mono 600, 12px, padding 4px 6px, 1px `#232C39`, radius 2px, glyph `#E8913A` |
|
||||
| Row label | Sans 400 13px (500 when selected) |
|
||||
| Body copy | Sans 400, 14px/1.7, max 68ch |
|
||||
| Tooltip | Sans 400, 12px/1.5 |
|
||||
|
||||
### Geometry
|
||||
|
||||
| Value | Where |
|
||||
|---|---|
|
||||
| 24px | Explorer / launcher-adjacent row height |
|
||||
| 26px | Source-control row height |
|
||||
| 28px | Status bar, state-specimen rows |
|
||||
| 30px | Context-menu item height |
|
||||
| 34px | Editor tab strip, markdown/code panel header |
|
||||
| 44px | Title bar and toolbar |
|
||||
| 20px | Code line box (13px type) |
|
||||
| 2px | Radius: buttons, inputs, tags, keycaps, menus' inner rows, code blocks |
|
||||
| 4px | Radius: panels, cards, menus |
|
||||
| 8px | Radius: overlays (modals) only |
|
||||
| 1px | Every hairline (`#232C39` on dark, `#CDD1CD` on light) |
|
||||
| 2px | Accent rule: selection, focus border, pull-quote |
|
||||
| 9999px | Traffic-light dots and avatars only |
|
||||
|
||||
Column widths in the workspace: source control 236 · explorer 288 · editor flex ·
|
||||
agent 480. Agent terminal block 190px tall. Full frame 1760 × 1000.
|
||||
|
||||
### Elevation
|
||||
|
||||
Only two shadows exist:
|
||||
- dropdown / context menu: `0 4px 16px rgba(23,28,34,.10)`
|
||||
- overlay: `0 16px 48px rgba(23,28,34,.18)`
|
||||
|
||||
No ambient card shadow, no glow.
|
||||
|
||||
### Motion
|
||||
|
||||
Colour transitions only, 160ms `cubic-bezier(0.22,1,0.36,1)` (120ms on small controls).
|
||||
The single exception is `blink`: a stepped 1.1s on/off (no fade) used for the caret, the
|
||||
terminal block cursor and the amber period in the wordmark. No entrance animation, no
|
||||
lift, no scale, no parallax.
|
||||
|
||||
---
|
||||
|
||||
## Screens
|
||||
|
||||
### 01 · Workspace (1760 × 1000)
|
||||
|
||||
Vertical stack: title bar 44px → body (flex row) → status bar 28px.
|
||||
|
||||
**Title bar** (`#18202B`, 1px bottom `#232C39`, padding 0 14px, gap 18px)
|
||||
Traffic lights 12px (`#E8913A`, `#6C7783`, `#3A424C`, gap 8px) · wordmark
|
||||
`helder` Mono 700 13px `#F4F5F4` with a blinking `.` in `#E8913A` · project `odynt`
|
||||
Mono 12px `#6C7783` · `·` · branch `main` Mono 500 12px `#E8913A` · breadcrumb of the
|
||||
open path in Mono 12px `#6C7783`, last segment `#F4F5F4` 600, `›` separators · then the
|
||||
toolbar, right-aligned, gap 4px.
|
||||
|
||||
Toolbar toggle: label Sans 12px + keycap. Off = label `#BAC0C0`, no fill. On = fill
|
||||
`rgba(232,145,58,.10)`, label `#F4F5F4` 500, keycap border `rgba(232,145,58,.35)`.
|
||||
Hidden-files-off is the muted case: label and keycap both `#6C7783`. Toggles:
|
||||
Search ⌘F · Auto-fit ⌘A · Hidden ⌘. · Note ⌘N · Git ⌘G · `?` (26px square, 1px border).
|
||||
|
||||
**Source control column** (236px, `#18202B`, 1px right border)
|
||||
Commit box: 52px `#101720` field, 1px `#232C39`, radius 2, placeholder
|
||||
"Shift+Enter to commit" `#6C7783`; 34px push button `↑` beside it, same border.
|
||||
Group header: Mono 700 10px `0.14em` uppercase `#6C7783`, count right in `#E8913A`
|
||||
("STAGED CHANGES 4", "CHANGES 1"). Rows 26px: status letter (Mono 600 10px — staged
|
||||
`#8FBFB4`, unstaged `#F0B476`) · 8px type badge · file name Sans 12px, ellipsised.
|
||||
Footer line "4 staged · 1 unstaged" Mono 11px `#6C7783`.
|
||||
|
||||
**Explorer** (288px, `#18202B`) — 30px header ("EXPLORER" / project name), then 24px
|
||||
rows. Indent 16px per level (12 · 28 · 44 · 60 · 76 padding-left). Collapsed `›`
|
||||
`#6C7783`; expanded `⌄` `#E8913A`, its label `#F4F5F4`. File rows carry an 8px type
|
||||
badge and, when dirty, a trailing `M` in `#8FBFB4`.
|
||||
|
||||
Type badge: Mono 600 8px, ink text `#101720` on a per-extension fill, radius 2,
|
||||
padding 3px 4px — php `#C3A6CE` · md `#BAC0C0` · js `#F0B476` · css `#8FBFB4`.
|
||||
|
||||
**Editor** (flex, `#101720`) — 34px strip: "MODIFIED" label, `+1` / `−1` counts, then a
|
||||
right-aligned segmented control (1px `#232C39`, radius 2, dividers 1px): Actual ·
|
||||
Original · Diff · Split. Active segment = amber fill with `#171C22` text.
|
||||
Code area: CSS grid `56px 1fr`, line box 20px, numbers right-aligned `#3A424C` with
|
||||
14px right padding. **Indentation is padding-left on the code cell** (7.82px per space:
|
||||
31.3 / 62.6 / 93.8 / 125.1) — do not ship non-breaking spaces.
|
||||
|
||||
**Agent panel** (480px, `#18202B`, 1px left border)
|
||||
Header: 60px `#232C39` square (mark), then `Claude Code` Mono 700 14px + version in
|
||||
`#6C7783`, model line Sans 12px `#BAC0C0`, cwd Mono 12px `#6C7783`.
|
||||
Notice strip: fill `rgba(232,145,58,.10)`, `[ ! ]` Mono 600 12px `#E8913A`, sentence
|
||||
Sans 12px, inline command in Mono `#F0B476`.
|
||||
Transcript: user turn prefixed `›` in `#E8913A`, agent turn `◆` in `#6C7783`, text
|
||||
Sans 13px/1.6. Tool calls sit in a `#101720` block, 1px `#232C39`: verb in `#8FBFB4`
|
||||
(read) or `#F0B476` (write), target and counts `#6C7783`.
|
||||
Prompt field: 44px, `#101720`, **2px `#E8913A` border + `0 0 0 2px rgba(232,145,58,.22)`
|
||||
ring** (this is the focus treatment everywhere), `›` prefix, blinking 1px caret.
|
||||
Status line: Mono 11px `#6C7783`; project chip = amber fill with `#171C22` text;
|
||||
`▸▸ auto mode` in `#E8913A`; slash hint right.
|
||||
Terminal: 190px, `#101720`, Mono 12px/1.7 — `[main]` `#8FBFB4`, `[~/path]$` `#6C7783`,
|
||||
output `#6C7783`, 7×14px blinking amber block cursor.
|
||||
|
||||
**Status bar** (28px, `#18202B`) — `⑂ main` in `#E8913A`, `+16` `#8FBFB4`, `−12`
|
||||
`#C4741F`, then right-aligned path · Ln/Col · UTF-8 · LF · language (`#BAC0C0`).
|
||||
|
||||
### 02a · Search (⌘F)
|
||||
|
||||
Overlay: flat ink scrim `rgba(16,23,32,.72)` (no blur), 34px inset, panel `#18202B`,
|
||||
1px `#232C39`, radius 8, overlay shadow.
|
||||
|
||||
- Query bar 54px: `⌕` `#E8913A`, query Mono 500 16px `#F4F5F4`, blinking caret; right
|
||||
side = extension filters (active = amber fill + ink text; inactive = 1px border,
|
||||
`#BAC0C0`) and a Mono 11px result summary `#6C7783` behind a 1px left divider.
|
||||
- Three columns: **this file** (230px) · **project** (flex) · **files** (250px), split by
|
||||
1px borders. Column headers are the standard 10px mono labels; the focused column's
|
||||
header is `#E8913A` with a count chip (amber fill, ink text).
|
||||
- Result group header: type badge + path Mono 12px `#BAC0C0`, hit count right `#6C7783`.
|
||||
- Hit lines: grid `64px 1fr`, line box 24px. Match run = amber fill with `#171C22` text
|
||||
on the selected row, `#F0B476` text elsewhere. Selected row: `#232C39` fill, 2px amber
|
||||
left rule, and the line number lifts to `#E8913A` (never leave it at `#3A424C`).
|
||||
- Empty column state: one plain sentence, Sans 12px `#6C7783` ("No matches in this
|
||||
file." / "No file names match."). No illustration.
|
||||
- Footer 38px: key hints (`⌘←`/`⌘→` column, `⌘↑`/`⌘↓` row, `↵` open) with amber glyphs,
|
||||
`esc` chip right.
|
||||
|
||||
### 02b · Keyboard shortcuts (`?`)
|
||||
|
||||
Same overlay shell. 50px header with `◇` `#E8913A` + "Keyboard shortcuts" + `esc` chip.
|
||||
Body groups (`NAVIGATE`, `AGENT`, `GIT`, `FILE`) each a 10px mono label, then a
|
||||
`92px 1fr` grid: keycap cluster left (gap 4px), description Sans 13px `#E4E7E6` right,
|
||||
6px vertical padding per row.
|
||||
|
||||
### 02c · Project note (⌘N)
|
||||
|
||||
Same shell. Header: `▤` amber, "Note", filename `.notes.txt` Mono 12px `#6C7783`, then
|
||||
the primary button — amber fill, `#171C22` text, Sans 500 12px, radius 2, padding
|
||||
6px 10px, with a `⌘P` keycap at Mono 600 11px — then the `esc` chip.
|
||||
Body: Mono 400 14px/1.7 `#E4E7E6`, max 68ch, 18px between paragraphs, blinking caret at
|
||||
the end of the text. Footer 34px: "saved on focus loss · 412 characters".
|
||||
|
||||
The note is plain text and it is the agent's input: ⌘P sends the whole note.
|
||||
|
||||
### 02d · Project launcher
|
||||
|
||||
Window `#101720` with only traffic lights (34px), no title bar. Centred panel on
|
||||
`#18202B`, radius 8, overlay shadow, top-aligned with 20px/40px padding.
|
||||
Header: `◆` amber + wordmark with blinking period + "Open a project to begin" Sans 12px
|
||||
`#6C7783`. Then a 46px "Open new project…" row with `+` amber and an `↵` chip.
|
||||
`RECENT` label, then 38px rows: `▤` icon, name Sans 500 13px, path Mono 11px `#6C7783`.
|
||||
Selected row: `#232C39`, 2px amber left rule, icon and path lift one step.
|
||||
Footer 36px: `⌘↑↓ navigate · ↵ open`.
|
||||
|
||||
### 03 · Expanded diff (1760 × 620)
|
||||
|
||||
Own window: 42px title bar (traffic lights, path Mono 500 12px `#F4F5F4`, "MODIFIED",
|
||||
`+1` / `−1`, "staged → actual" Mono 11px `#6C7783`, and a right-aligned
|
||||
"Collapse `esc`" button with 1px border).
|
||||
Two panes split by a 1px border; each has a 30px header — left `ORIGINAL` + "before"
|
||||
`#3A424C`, right `UPDATED` in `#E8913A` + "after".
|
||||
Panes are grids `52px 1fr`, line box 22px, indentation as padding-left, and **identical
|
||||
line numbering in both panes** so the eye can travel across. Changed row gets the fill,
|
||||
the 2px left rule and a lifted number colour.
|
||||
|
||||
### 04 · Small surfaces
|
||||
|
||||
**Context menu** (explorer and source control) — 320px, `#18202B`, 1px `#232C39`,
|
||||
radius 4, dropdown shadow, 8px vertical padding. First a path header (Mono 11px
|
||||
`#6C7783`, 1px bottom border). Items 30px, Sans 13px `#BAC0C0`, icon `#6C7783`.
|
||||
Highlighted item: `#232C39` fill, 2px amber left rule, label `#F4F5F4` 500, icon amber.
|
||||
Destructive item ("Delete file", "Discard changes"): `#C4741F` label. Groups separated
|
||||
by a 1px rule with 6px margins.
|
||||
|
||||
Explorer items: Pass on reference · Copy reference · Pass on file name · Copy file name
|
||||
| Rename file · Show in Finder · Delete file.
|
||||
Source-control items: Pass on reference · Copy reference | Stage changes · Open diff ·
|
||||
Discard changes.
|
||||
|
||||
**Pass on to agent** — 460px panel, 14px padding, gap 12. Title row (`◇` amber +
|
||||
Mono 700 13px + `esc` chip), a focused 38px input (2px amber border + ring, blinking
|
||||
caret), then an INSERTS preview: 10px mono label + the composed string on an amber fill
|
||||
with `#171C22` text, radius 2, ellipsised. Footer hint `↵ insert into agent · esc cancel`
|
||||
with amber glyphs.
|
||||
|
||||
**Tooltip** — `#232C39` surface, 1px `#3A424C`, radius 2, padding 8px 10px, max 300px,
|
||||
Sans 12px/1.5 `#E4E7E6`. No arrow, no shadow. The current state is named inside the
|
||||
sentence in amber ("Hidden files: *hidden* — …", "Auto-fit panels: *on* — …"), then one
|
||||
sentence saying what a click does.
|
||||
|
||||
**Markdown Actual / Preview** — same 34px header on both halves; the segmented control's
|
||||
active side is the amber fill. Actual = the code grid (`44px 1fr`, line box 20px) with
|
||||
`##` headings in `#F0B476`. Preview: 18px/20px padding, max 68ch, Sans 13px/1.7 body,
|
||||
Mono 700 headings with a 1px `#232C39` underline.
|
||||
|
||||
### 06 · Code colours and markdown preview
|
||||
|
||||
Four specimens at 620px: a JS module, a PHP class, a CSS file and the full markdown
|
||||
preview. Each panel: 34px header with type badge, path Mono 500 12px, and a right
|
||||
language label (or the Actual/Preview control).
|
||||
|
||||
The markdown preview is the reading surface, so it is the one place where Sans body copy
|
||||
gets room:
|
||||
- eyebrow: 10px mono label `#6C7783`
|
||||
- h2: Mono 700 24px/1.1, `-0.03em`, `#F4F5F4`
|
||||
- h3: Mono 700 17px/1.2 with a 1px `#232C39` underline, 8px below the text
|
||||
- paragraph: Sans 14px/1.7 `#E4E7E6`, max 68ch, `text-wrap: pretty`
|
||||
- list: flex rows, gap 10, `—` marker in `#E8913A` (never a bullet, never an emoji)
|
||||
- inline code: Mono 13px `#F0B476` on `#18202B`, 1px `#232C39`, radius 2, padding 1px 5px
|
||||
- block quote: 2px amber left rule, 16px left padding, Sans *italic* 15px `#F0B476`
|
||||
- code block: `#18202B`, 1px `#232C39`, radius 2, padding 14px 16px, Mono 13px/20px,
|
||||
syntax palette as above
|
||||
- table: 1px `#232C39` container, radius 2; header row on `#18202B` with 10px mono
|
||||
labels; body rows Sans 13px `#BAC0C0`, cells 10px 14px, 1px row rules; state words use
|
||||
`#8FBFB4` (done) and `#E8913A` (open)
|
||||
- link: `#E8913A` with a 1px `#232C39` bottom border; hover lifts the text to `#F4F5F4`
|
||||
and the border to `#E8913A`. `→` marks forward action.
|
||||
|
||||
---
|
||||
|
||||
## Interactions and behaviour
|
||||
|
||||
| Trigger | Result |
|
||||
|---|---|
|
||||
| `⌘F` | Search overlay, query seeded from the editor selection |
|
||||
| `⌘↑` / `⌘↓` | Move the row cursor in the focused list |
|
||||
| `⌘←` / `⌘→` | Move focus between search columns |
|
||||
| `↵` | Open the selected row (search hit, file, recent project) |
|
||||
| `⌘→` (editor) | Pass the current selection to the agent |
|
||||
| `⌘M` | Cycle Actual · Original · Diff · Split |
|
||||
| `⌘C` / `⌘↵` / `⌘P` (git) | Focus commit message / commit staged / push branch |
|
||||
| `⌘A` | Toggle auto-fit panels (columns re-fit on resize and focus) |
|
||||
| `⌘.` | Toggle hidden dotfiles in tree and search |
|
||||
| `⌘G` | Show or hide the source-control column |
|
||||
| `⌘S` / `⌘W` / `⌘D` | Save / close / delete (confirm) the current file |
|
||||
| `⌘N` | Open the project note; it saves on focus loss |
|
||||
| `⌘P` (note open) | Send the whole note to the agent |
|
||||
| right-click a row | Context menu, anchored to the pointer, first item pre-highlighted |
|
||||
| `esc` | Close the top overlay, menu or prompt; never more than one |
|
||||
|
||||
Rules that hold everywhere:
|
||||
- Exactly one overlay at a time, on a flat ink scrim. Overlays never stack.
|
||||
- Hover changes fill one step and nothing else. No lift, no scale, no shadow, no opacity.
|
||||
- Press holds the hover colour. Nothing shrinks.
|
||||
- Focus is always the 2px amber border plus the 2px 22% ring. Never remove it.
|
||||
- Disabled is 40% opacity plus `cursor: not-allowed`, no recolouring.
|
||||
- Empty and error states are one plain sentence starting with an em dash. No icon, no
|
||||
apology, no exclamation mark.
|
||||
|
||||
## State
|
||||
|
||||
- `project` — path, branch, recent list (persisted)
|
||||
- `openFile` — path, language, dirty flag, cursor line/col, view mode
|
||||
(`actual|original|diff|split`)
|
||||
- `tree` — expanded paths, selected path, `showHidden`
|
||||
- `git` — staged[], unstaged[], commit message draft, ahead/behind counts
|
||||
- `agent` — model, session, transcript, prompt draft, pending tool calls, auth notices
|
||||
- `overlay` — `null | search | shortcuts | note | diff | launcher | menu | passOn`
|
||||
- `panels` — column widths, `autoFit`, `gitVisible`
|
||||
- `note` — text, dirty flag (write on blur)
|
||||
|
||||
Search runs per keystroke against three indexes (open file, project contents, file
|
||||
names) and reports counts per column; a query with no hits leaves the columns in their
|
||||
empty state rather than collapsing them.
|
||||
|
||||
## Assets
|
||||
|
||||
None. No images, no illustrations, no photography. Icons come from Lucide
|
||||
(`lucide@0.544.0`, stroke width 1.75); the Unicode glyphs in the mock are placeholders.
|
||||
Fonts are IBM Plex Mono and IBM Plex Sans (currently from Google Fonts — swap in local
|
||||
woff2 for a desktop build).
|
||||
|
||||
## Files
|
||||
|
||||
- `Helder IDE.dc.html` — the design board: all screens, one canvas, real sizes
|
||||
- `tokens/*.css` — the Kade token files the board is built on (colour, type, spacing,
|
||||
radius, elevation, motion, fonts)
|
||||
- `styles.css` — the token entry point
|
||||
|
||||
Open `Helder IDE.dc.html` in a browser; the board is inert (no interaction) by design.
|
||||
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.16.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.21.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.26.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.26.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.30.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.30.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.36.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.41.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.41.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.45.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.45.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.49.png
Normal file
BIN
docs/design/screenshots/Screenshot 2026-09-03 at 09.34.49.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
8
docs/design/styles.css
Normal file
8
docs/design/styles.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@import url("tokens/fonts.css");
|
||||
@import url("tokens/colors.css");
|
||||
@import url("tokens/typography.css");
|
||||
@import url("tokens/spacing.css");
|
||||
@import url("tokens/radius.css");
|
||||
@import url("tokens/elevation.css");
|
||||
@import url("tokens/motion.css");
|
||||
@import url("tokens/base.css");
|
||||
23
docs/design/tokens/base.css
Normal file
23
docs/design/tokens/base.css
Normal file
@@ -0,0 +1,23 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-stone);
|
||||
color: var(--color-ink-body);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-body);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: var(--color-amber-deep); text-decoration-color: var(--color-stone-rule); text-underline-offset: 3px; transition: var(--transition-color); }
|
||||
a:hover { color: var(--color-ink-body); text-decoration-color: var(--color-ink-dim); }
|
||||
[data-surface="slate"] a { color: var(--color-amber); }
|
||||
[data-surface="slate"] a:hover { color: var(--color-neutral-1); }
|
||||
|
||||
::selection { background: var(--color-amber-ring); color: var(--color-ink-body); }
|
||||
|
||||
:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }
|
||||
66
docs/design/tokens/colors.css
Normal file
66
docs/design/tokens/colors.css
Normal file
@@ -0,0 +1,66 @@
|
||||
/* Kade palette — cool stone paper, slate-ink dark punctuation, amber as the only accent. */
|
||||
:root {
|
||||
/* Stone — the default canvas. Cool, quarried, never white. */
|
||||
--color-stone: #EFF0EE;
|
||||
--color-stone-2: #E5E7E4;
|
||||
--color-stone-3: #D8DBD7;
|
||||
--color-stone-rule: #CDD1CD;
|
||||
|
||||
/* Ink ramp — text on stone. */
|
||||
--color-ink-body: #171C22;
|
||||
--color-ink-muted: #3A424C;
|
||||
--color-ink-dim: #6B7480;
|
||||
|
||||
/* Slate — the sparing dark surface. One or two blocks per page. */
|
||||
--color-slate: #101720;
|
||||
--color-slate-2: #18202B;
|
||||
--color-slate-3: #232C39;
|
||||
|
||||
/* Neutral ramp — text on slate. Pure white does not exist in this system. */
|
||||
--color-neutral-1: #F4F5F4;
|
||||
--color-neutral-2: #E4E7E6;
|
||||
--color-neutral-3: #BAC0C0;
|
||||
--color-neutral-4: #6C7783;
|
||||
|
||||
/* Amber — the single accent. Reserved for action, state and signal. */
|
||||
--color-amber: #E8913A;
|
||||
--color-amber-deep: #C4741F;
|
||||
--color-amber-soft: #F0B476;
|
||||
--color-amber-tint: rgba(232, 145, 58, 0.10);
|
||||
--color-amber-ring: rgba(232, 145, 58, 0.22);
|
||||
|
||||
/* Semantic aliases — prefer these in component code. */
|
||||
--surface-page: var(--color-stone);
|
||||
--surface-card: var(--color-stone-2);
|
||||
--surface-card-hover: var(--color-stone-3);
|
||||
--surface-dark: var(--color-slate);
|
||||
--surface-dark-card: var(--color-slate-2);
|
||||
|
||||
--text-body: var(--color-ink-body);
|
||||
--text-muted: var(--color-ink-muted);
|
||||
--text-dim: var(--color-ink-dim);
|
||||
--text-accent: var(--color-amber-deep);
|
||||
--text-on-accent: var(--color-ink-body);
|
||||
|
||||
--border-hairline: var(--color-stone-rule);
|
||||
--border-strong: var(--color-ink-muted);
|
||||
|
||||
--action-fill: var(--color-amber);
|
||||
--action-fill-hover: var(--color-amber-deep);
|
||||
--focus-ring: var(--color-amber-ring);
|
||||
--focus-border: var(--color-amber);
|
||||
--signal-error: var(--color-amber-deep);
|
||||
}
|
||||
|
||||
/* Slate scope — inside a dark block the ramps invert. Apply to the block, not the page. */
|
||||
[data-surface="slate"] {
|
||||
--surface-page: var(--color-slate);
|
||||
--surface-card: var(--color-slate-2);
|
||||
--surface-card-hover: var(--color-slate-3);
|
||||
--text-body: var(--color-neutral-1);
|
||||
--text-muted: var(--color-neutral-2);
|
||||
--text-dim: var(--color-neutral-4);
|
||||
--text-accent: var(--color-amber);
|
||||
--border-hairline: var(--color-slate-3);
|
||||
--border-strong: var(--color-neutral-3);
|
||||
}
|
||||
8
docs/design/tokens/elevation.css
Normal file
8
docs/design/tokens/elevation.css
Normal file
@@ -0,0 +1,8 @@
|
||||
/* Elevation is carried by the stone ramp, not by shadow. Shadows exist only for layers that
|
||||
cross the page plane (dropdown, modal) and for the amber focus ring. */
|
||||
:root {
|
||||
--shadow-none: none;
|
||||
--shadow-dropdown: 0 4px 16px rgba(23, 28, 34, 0.10);
|
||||
--shadow-modal: 0 16px 48px rgba(23, 28, 34, 0.18);
|
||||
--ring-focus: 0 0 0 2px var(--color-amber-ring);
|
||||
}
|
||||
10
docs/design/tokens/fonts.css
Normal file
10
docs/design/tokens/fonts.css
Normal file
@@ -0,0 +1,10 @@
|
||||
/* Kade type stack — IBM Plex Mono (display + labels) and IBM Plex Sans (body + UI).
|
||||
No licensed binaries shipped with the source skills, so the families load from Google Fonts.
|
||||
Replace this @import with local @font-face rules once real woff2 files are supplied. */
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");
|
||||
|
||||
:root {
|
||||
--font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
--font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
10
docs/design/tokens/motion.css
Normal file
10
docs/design/tokens/motion.css
Normal file
@@ -0,0 +1,10 @@
|
||||
/* Colour shifts only. Kade never translates, lifts, or scales on hover. */
|
||||
:root {
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
|
||||
--duration-fast: 120ms; /* @kind other */
|
||||
--duration-base: 160ms; /* @kind other */
|
||||
--duration-slow: 260ms; /* @kind other */
|
||||
--transition-color: color var(--duration-base) var(--ease-out),
|
||||
background-color var(--duration-base) var(--ease-out),
|
||||
border-color var(--duration-base) var(--ease-out);
|
||||
}
|
||||
11
docs/design/tokens/radius.css
Normal file
11
docs/design/tokens/radius.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/* Kade is rectangular. A rounded card is an antipattern. */
|
||||
:root {
|
||||
--radius-none: 0px;
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-width-accent: 2px;
|
||||
}
|
||||
21
docs/design/tokens/spacing.css
Normal file
21
docs/design/tokens/spacing.css
Normal file
@@ -0,0 +1,21 @@
|
||||
/* 4px base step. Section rhythm is deliberately generous; the calm comes from air, not decoration. */
|
||||
:root {
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-20: 80px;
|
||||
--space-24: 96px;
|
||||
|
||||
--gutter: var(--space-6);
|
||||
--section-y: var(--space-24);
|
||||
--section-y-tight: var(--space-16);
|
||||
--container: 1140px;
|
||||
--measure: 68ch;
|
||||
}
|
||||
31
docs/design/tokens/typography.css
Normal file
31
docs/design/tokens/typography.css
Normal file
@@ -0,0 +1,31 @@
|
||||
/* One scale for display (Plex Mono 700) and body (Plex Sans). Line-height tightens as size grows. */
|
||||
:root {
|
||||
--text-2xs: 10px;
|
||||
--text-xs: 11px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 15px;
|
||||
--text-md: 17px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-4xl: 44px;
|
||||
--text-6xl: 58px;
|
||||
--text-7xl: 76px;
|
||||
|
||||
--leading-display: 1.02;
|
||||
--leading-tight: 1.15;
|
||||
--leading-snug: 1.3;
|
||||
--leading-normal: 1.6;
|
||||
--leading-loose: 1.7;
|
||||
|
||||
/* Plex Mono display tracking is negative; label tracking is wide. */
|
||||
--tracking-display: -0.04em;
|
||||
--tracking-heading: -0.02em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-label: 0.14em;
|
||||
|
||||
--weight-body: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-display: 700;
|
||||
}
|
||||
Reference in New Issue
Block a user