feat(grid): v3b/c — resizable splitters + saved layout presets

Resizable splitters: draggable gutters between grid tracks adjust per-layout
column/row fractions (fr units), applied as an inline grid-template and persisted
(web-terminal:grid-splits). The fraction math (adjustSplit — trades delta between
adjacent tracks, clamps to a minimum, conserves the total) is a pure, unit-tested
helper in grid-layout.ts; the drag translates pixel motion into an fr delta.

Saved presets: public/grid-presets.ts — a toolbar dropdown to save the current
layout + its split under a name, re-apply it in one click, or delete it
(web-terminal:grid-presets). Desktop-only, like the layout toggle.

- grid-layout.ts: layoutTracks, defaultSplit, adjustSplit, tracksToTemplate,
  load/saveGridSplits, splitForLayout (validates stored shape).
- tabs.ts: renderGutters/beginGutterDrag/setSplit; applyLayout sets the inline
  template; gridArrangement()/applyGridPreset() hooks.
- main.ts: mount the presets dropdown. style.css: gutters + presets menu.
- tests: splitter math + persistence + a stubbed drag repro (1.2fr/0.8fr); presets
  persistence + dropdown (save/apply/delete/close). typecheck+build clean, 1612 pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

public/style.css

@@ -371,6 +371,54 @@ body {
   outline: 2px dashed var(--accent);
   outline-offset: -3px;
 }
+
+/* Draggable splitter handles overlaying the track boundaries (v3). */
+.grid-gutter {
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+}
+.grid-gutter::after {
+  content: '';
+  position: absolute;
+  background: var(--border-strong);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.grid-gutter:hover::after,
+.grid-gutter:active::after {
+  opacity: 1;
+  background: var(--accent);
+}
+.grid-gutter-col {
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  transform: translateX(-50%);
+  cursor: col-resize;
+}
+.grid-gutter-col::after {
+  top: 15%;
+  bottom: 15%;
+  left: 50%;
+  width: 3px;
+  transform: translateX(-50%);
+}
+.grid-gutter-row {
+  left: 0;
+  right: 0;
+  height: 12px;
+  transform: translateY(-50%);
+  cursor: row-resize;
+}
+.grid-gutter-row::after {
+  left: 15%;
+  right: 15%;
+  top: 50%;
+  height: 3px;
+  transform: translateY(-50%);
+}
 #term.grid .cell-head {
   display: flex;
   align-items: center;
@@ -2008,3 +2056,129 @@ body.home-open #term {
 .push-toggle-btn[data-tip]:hover::after {
   opacity: 1;
 }
+
+/* ── Saved layout presets dropdown (v3) ──────────────────────────────── */
+.grid-presets {
+  position: relative;
+  display: inline-flex;
+  margin-left: 2px;
+}
+.grid-presets-btn {
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-dim);
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.grid-presets-btn:hover {
+  color: var(--text);
+  background: var(--surface-3);
+}
+.grid-presets-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  background: var(--surface-1);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  padding: 6px;
+  z-index: 40;
+}
+.grid-presets-menu[hidden] {
+  display: none;
+}
+.gp-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.gp-empty {
+  color: var(--text-faint);
+  font-size: 12px;
+  padding: 8px;
+  text-align: center;
+}
+.gp-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.gp-apply {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12.5px;
+  text-align: left;
+}
+.gp-apply:hover {
+  background: var(--surface-2);
+}
+.gp-apply-layout {
+  color: var(--text-faint);
+  font-size: 11px;
+}
+.gp-del {
+  border: 0;
+  background: transparent;
+  color: var(--text-faint);
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+}
+.gp-del:hover {
+  color: var(--red);
+  background: var(--surface-2);
+}
+.gp-save {
+  display: flex;
+  gap: 4px;
+  margin-top: 6px;
+  border-top: 1px solid var(--border);
+  padding-top: 6px;
+}
+.gp-name {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  padding: 5px 8px;
+  font-size: 12px;
+  font-family: var(--ui-font);
+}
+.gp-name:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.gp-save-btn {
+  border: 0;
+  background: var(--accent);
+  color: var(--on-accent);
+  border-radius: 6px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+}
+.gp-save-btn:hover {
+  filter: brightness(1.05);
+}