ImBenjiandClaude Opus 5.5
b5e5ed5b75
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the components are CSS on top of them, and the cards cover foundations, components and whole hub and Arcs & Angles screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
174 lines
13 KiB
HTML
174 lines
13 KiB
HTML
<!-- @dsCard group="Patterns" -->
|
|
<!doctype html>
|
|
<html lang="en" data-scheme="carbon" data-density="compact">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Editor shell</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
/* scaffolding - GarageShell: header, a chrome workspace with the canvas Panel and a
|
|
sidebar split top/bottom, footer. panelGap gutters, no gutter above or below */
|
|
html, body { background: var(--chrome); }
|
|
.screen { width: 1200px; height: 760px; display: flex; flex-direction: column; background: var(--chrome); }
|
|
.workspace { flex: 1; min-height: 0; display: flex; gap: var(--panel-gap); padding: 0 var(--panel-gap); }
|
|
.canvas { flex: 1; min-width: 0; }
|
|
.sidebar { width: 320px; flex: none; display: flex; flex-direction: column; gap: var(--panel-gap); }
|
|
.sidebar > .panel { flex: 1; min-height: 0; display: flex; }
|
|
|
|
/* header: menu words left, perf + file name right, toggles on the true centre */
|
|
.header { position: relative; }
|
|
.header .menus { display: flex; }
|
|
.header .spacer { flex: 1; }
|
|
.header .file { width: 150px; text-align: center; }
|
|
.header .centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: var(--gap-sm); }
|
|
|
|
/* a panel page: sunken body, PanelHeader, then the list */
|
|
.page { flex: 1; min-width: 0; background: var(--surface-sunken); display: flex; flex-direction: column; }
|
|
.page .body { flex: 1; min-height: 0; overflow: hidden; padding-top: var(--gap-md); }
|
|
|
|
/* properties tab strip - hand-rolled in the app too (see "Dont copy these") */
|
|
.tabs { width: 40px; flex: none; background: var(--chrome); border-right: 1px solid var(--divider);
|
|
padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-xs); display: flex; flex-direction: column; gap: var(--gap-xs); }
|
|
.tabs .tab { display: flex; justify-content: center; padding-right: var(--gap-xs); border: 1px solid transparent; }
|
|
.tabs .tab.on { background: var(--surface-sunken); border-color: var(--divider); border-right-color: transparent;
|
|
border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-right: -1px; }
|
|
.tabs .split { height: var(--gap-xl); }
|
|
|
|
/* footer: three blocks, muted mono */
|
|
.footer > div { flex: 1; display: flex; align-items: center; gap: var(--gap-md); }
|
|
.footer .mid { justify-content: center; }
|
|
.footer .end { justify-content: flex-end; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="screen">
|
|
|
|
<!-- header ChromeBar -->
|
|
<header class="chrome-bar header">
|
|
<div class="menus">
|
|
<button class="btn ghost">File</button>
|
|
<button class="btn ghost">Edit</button>
|
|
<button class="btn ghost">Tools</button>
|
|
<button class="btn ghost">Insert</button>
|
|
<button class="btn ghost">View</button>
|
|
<button class="btn ghost">Info</button>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<span class="mono muted">60 fps</span>
|
|
<span class="vr"></span>
|
|
<span class="file muted">Northern loop.ana</span>
|
|
|
|
<div class="centre">
|
|
<div class="btn-group">
|
|
<button class="btn primary icon-only" aria-label="Snapping, on"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 15 4 4" /> <path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z" /> <path d="m5 8 4 4" /></svg></button>
|
|
<button class="btn secondary icon-only" aria-label="Snap options"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg></button>
|
|
</div>
|
|
<button class="btn outline icon-only" aria-label="Continuous arcs, off"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="19" cy="5" r="2" /> <circle cx="5" cy="19" r="2" /> <path d="M5 17A12 12 0 0 1 17 5" /></svg></button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="workspace">
|
|
<!-- the canvas: an empty Panel, the app paints the map in it -->
|
|
<main class="panel canvas"></main>
|
|
|
|
<aside class="sidebar">
|
|
<!-- top: explorer -->
|
|
<section class="panel">
|
|
<div class="page">
|
|
<div class="panel-header"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" /> <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" /> <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" /></svg><span class="title">Explorer</span></div>
|
|
<div class="body">
|
|
<div class="explorer-row"><span class="slot"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></svg></span><span class="name">Northern loop</span></div>
|
|
<div class="explorer-row depth-1 is-hovered"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="19" r="3" /> <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" /> <circle cx="18" cy="5" r="3" /></svg></span><span class="name">Loop line</span></div>
|
|
<div class="explorer-row depth-1"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="19" r="3" /> <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" /> <circle cx="18" cy="5" r="3" /></svg></span><span class="name">Harbour branch</span></div>
|
|
<div class="explorer-row depth-1"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /> <circle cx="12" cy="10" r="3" /></svg></span><span class="name">Market Street</span></div>
|
|
<div class="explorer-row depth-1"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /> <circle cx="12" cy="10" r="3" /></svg></span><span class="name">Quayside</span></div>
|
|
<div class="explorer-row depth-1"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /> <circle cx="12" cy="10" r="3" /></svg></span><span class="name">Mill Lane</span></div>
|
|
<div class="explorer-row depth-1"><span class="slot"></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /> <circle cx="12" cy="10" r="3" /></svg></span><span class="name">Northgate</span></div>
|
|
<div class="explorer-row"><span class="slot"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></svg></span><span class="name">Labels</span></div>
|
|
<div class="explorer-row"><span class="slot"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg></span><span class="slot"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 12.5 8 15l2 2.5" /> <path d="m14 12.5 2 2.5-2 2.5" /></svg></span><span class="name">Scripts</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- bottom: properties tab strip + the selected panel page -->
|
|
<section class="panel active">
|
|
<div class="tabs">
|
|
<div class="tab on"><button class="btn ghost icon-only" aria-label="Canvas"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15h4" /> <path d="m14.817 10.995-.971-1.45 1.034-1.232a2 2 0 0 0-2.025-3.238l-1.82.364L9.91 3.885a2 2 0 0 0-3.625.748L6.141 6.55l-1.725.426a2 2 0 0 0-.19 3.756l.657.27" /> <path d="m18.822 10.995 2.26-5.38a1 1 0 0 0-.557-1.318L16.954 2.9a1 1 0 0 0-1.281.533l-.924 2.122" /> <path d="M4 12.006A1 1 0 0 1 4.994 11H19a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" /></svg></button></div>
|
|
<div class="tab"><button class="btn ghost icon-only" aria-label="Lines"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /> <path d="M9 8h7" /> <path d="M8 12h6" /> <path d="M11 16h5" /></svg></button></div>
|
|
<div class="split"></div>
|
|
<div class="tab"><button class="btn ghost icon-only" aria-label="Object Properties"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 5H3" /> <path d="M12 19H3" /> <path d="M14 3v4" /> <path d="M16 17v4" /> <path d="M21 12h-9" /> <path d="M21 19h-5" /> <path d="M21 5h-7" /> <path d="M8 10v4" /> <path d="M8 12H3" /></svg></button></div>
|
|
<div class="tab"><button class="btn ghost icon-only" aria-label="Script"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 12.5 8 15l2 2.5" /> <path d="m14 12.5 2 2.5-2 2.5" /></svg></button></div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="panel-header"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15h4" /> <path d="m14.817 10.995-.971-1.45 1.034-1.232a2 2 0 0 0-2.025-3.238l-1.82.364L9.91 3.885a2 2 0 0 0-3.625.748L6.141 6.55l-1.725.426a2 2 0 0 0-.19 3.756l.657.27" /> <path d="m18.822 10.995 2.26-5.38a1 1 0 0 0-.557-1.318L16.954 2.9a1 1 0 0 0-1.281.533l-.924 2.122" /> <path d="M4 12.006A1 1 0 0 1 4.994 11H19a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" /></svg><span class="title">Canvas</span></div>
|
|
<div class="body">
|
|
<section class="properties-section">
|
|
<div class="header"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>Grid</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Show grid</div>
|
|
<div class="value"><span class="checkbox checked"></span></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Grid Z-level</div>
|
|
<div class="value"><div class="field secondary center"><input value="0"></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Watermark</div>
|
|
<div class="value"><span class="checkbox"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="properties-section">
|
|
<div class="header"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>Bounds</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Unbounded</div>
|
|
<div class="value"><span class="checkbox"></span></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Size</div>
|
|
<div class="value">
|
|
<div class="btn-group vertical span">
|
|
<div class="field secondary center"><span class="unit">W</span><input value="120"></div>
|
|
<div class="field secondary center"><span class="unit">H</span><input value="80"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="properties-section">
|
|
<div class="header"><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>Stations</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Label size</div>
|
|
<div class="value"><div class="field secondary center"><input value="14"><span class="unit">px</span></div></div>
|
|
</div>
|
|
<div class="property-row">
|
|
<div class="label">Size subtitle by scale</div>
|
|
<div class="value"><span class="checkbox checked"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- footer ChromeBar: muted mono stats -->
|
|
<footer class="chrome-bar footer">
|
|
<div><span class="mono muted">© 2026 IMBENJI.NET LTD - ARCS & ANGLES</span></div>
|
|
<div class="mid"><span class="mono muted">X: 0 · Y: 0</span><span class="vr"></span><span class="mono muted">Zoom: 100%</span></div>
|
|
<div class="end">
|
|
<span class="mono muted">Segments: 48</span><span class="vr"></span>
|
|
<span class="mono muted">Nodes: 112</span><span class="vr"></span>
|
|
<span class="mono muted">Stations: 36</span><span class="vr"></span>
|
|
<span class="mono muted">v2.4.0</span>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|