@jxsuite/studio 4.0.0 → 5.0.0

package/styles/shell.css

@@ -1,1276 +1,3 @@
-/* Jx Studio — app shell.
-   Load after tokens.css.
-
-   Owns the #app grid and the regions it lays out: the Command Bar, the pane's
-   tab strip and chrome layer, the Navigator and Inspector docks, the statusbar,
-   the collapsed-sidebar variants, the tab strip and the drag-to-resize
-   handles. */
-
-/* ─── Layout ─────────────────────────────────── */
-/* Four columns: rail | navigator | pane | inspector. The assistant's fifth column is gone —
-   it shares the inspector's cell, because folding it in costs zero additional width (spec §12
-   region ⑨). The rail is 56px, not 48px, because every button now carries a text label.
-
-   Five rows: command bar | pane tabs | stage | BOTTOM DOCK | status bar. The dock's row is a
-   full-width track but the dock occupies only the pane's COLUMN, which is the whole of §12
-   region ⑪'s claim — it sits under the pane grid, not under the window, so opening it never
-   narrows the Navigator or the Inspector. The two side docks span rows 2–4 across it. */
-/* The Bottom dock's track, declared on :root for the reason tokens.css gives for the two panel
-   widths: `src/shell.ts`'s applyDockLayout() writes it as an inline style on
-   document.documentElement, and a definition on any closer ancestor of #app would shadow that
-   override and freeze the dock. It must also be declared SOMEWHERE — an unset custom property
-   inside the grid-template-rows shorthand invalidates the whole declaration at computed-value
-   time, and the shell would paint one frame with no grid at all. */
-:root {
-  --dock-h-bottom: 220px;
-}
-/* FOUR rows, not five. The pane's tab strip used to own row 2 of the APPLICATION grid, which is
-   the one thing a per-pane surface can never be — so it is a row of the pane's own cell now and
-   this grid is one row shorter.
-
-   The columns are NAMED. Every rule below addressed them by index, so the four surfaces that left
-   this grid would have meant re-counting `grid-column: 4` at seven sites and getting it wrong at
-   one of them. A name survives an insertion; a number does not. */
-#app {
-  display: grid;
-  grid-template-rows: 36px minmax(0, 1fr) var(--dock-h-bottom) 24px;
-  grid-template-columns:
-    [rail] 56px
-    [nav] var(--panel-w-left)
-    [pane] 1fr
-    [insp] var(--panel-w-right);
-  height: 100%;
-}
-#toolbar {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 8px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  overflow: hidden;
-  min-width: 0;
-  /* Drive the responsive collapse below off the toolbar's own width. */
-  container-type: inline-size;
-  container-name: toolbar;
-}
-#toolbar > :not(.window-controls) {
-  min-width: 0;
-  flex-shrink: 1;
-  overflow: hidden;
-}
-#toolbar > .tb-spacer {
-  flex-shrink: 999;
-}
-#toolbar.electrobun-webkit-app-region-drag {
-  -webkit-app-region: drag;
-}
-#toolbar sp-action-group,
-#toolbar sp-action-button {
-  -webkit-app-region: no-drag;
-}
-/* An icon that means the same thing on the other side.
-   Spectrum's workflow set ships `rail-right-open`/`rail-right-close` and no left-hand pair, so the
-   Navigator's dock toggle reflects the Inspector's rather than inventing a third glyph — which is
-   also what keeps the two buttons reading as a pair. */
-.window-controls {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-/* ─── ①b Layout tabs ─────────────────────────── */
-/* Plain text, not a segmented control: a layout is a place you are, and the Command Bar says which
-   one the same way the tab strip says which document. Every panel stays reachable from every
-   layout — these tabs reconfigure, they never remove. */
-.tb-layouts {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
-.tb-layout,
-.tb-layout-add {
-  padding: 2px 8px;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--fg-dim);
-  font: inherit;
-  font-size: var(--spectrum-font-size-75, 12px);
-  cursor: pointer;
-  white-space: nowrap;
-}
-.tb-layout:hover,
-.tb-layout-add:hover {
-  background: var(--hover-bg);
-  color: var(--fg);
-}
-.tb-layout.active {
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-.tb-layout-add {
-  padding: 2px 6px;
-}
-.window-controls .csd-close:hover {
-  background: var(--spectrum-negative-background-color-default, #e34850);
-  color: white;
-}
-/* macOS traffic-light buttons */
-.window-controls.mac {
-  margin-left: 0;
-  margin-right: 8px;
-  order: -1;
-  gap: 8px;
-}
-.window-controls.mac sp-action-button {
-  /* explicit min/max needed: as a flex item the button's auto min-width
-     is the inner shadow-DOM button's min-content size (~28px), which
-     would override width and squash the circle into an oval */
-  --spectrum-actionbutton-min-width: 12px;
-  --mod-actionbutton-min-width: 12px;
-  --mod-actionbutton-height: 12px;
-  --mod-actionbutton-edge-to-text: 0px;
-  --mod-actionbutton-edge-to-visual-only: 0px;
-  width: 12px;
-  min-width: 12px;
-  max-width: 12px;
-  height: 12px;
-  min-height: 12px;
-  max-height: 12px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: none;
-  padding: 0;
-}
-.window-controls.mac .csd-close {
-  background: #ff5f57;
-}
-.window-controls.mac .csd-minimize {
-  background: #febc2e;
-}
-.window-controls.mac .csd-maximize {
-  background: #28c840;
-}
-.window-controls.mac sp-action-button:hover {
-  filter: brightness(0.85);
-}
-.window-controls.mac sp-action-button sp-icon-remove,
-.window-controls.mac sp-action-button sp-icon-rectangle,
-.window-controls.mac sp-action-button sp-icon-close {
-  display: none;
-}
-.window-controls.mac:hover sp-action-button sp-icon-remove,
-.window-controls.mac:hover sp-action-button sp-icon-rectangle,
-.window-controls.mac:hover sp-action-button sp-icon-close {
-  display: inline-flex;
-  color: rgba(0, 0, 0, 0.5);
-  width: 8px;
-  height: 8px;
-}
-/* Resize edge zones */
-.resize-edge {
-  position: fixed;
-  z-index: 9999;
-  -webkit-app-region: no-drag;
-}
-.resize-edge.top {
-  top: 0;
-  left: 6px;
-  right: 6px;
-  height: 4px;
-  cursor: ns-resize;
-}
-.resize-edge.bottom {
-  bottom: 0;
-  left: 6px;
-  right: 6px;
-  height: 4px;
-  cursor: ns-resize;
-}
-.resize-edge.left {
-  left: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 4px;
-  cursor: ew-resize;
-}
-.resize-edge.right {
-  right: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 4px;
-  cursor: ew-resize;
-}
-.resize-edge.top-left {
-  top: 0;
-  left: 0;
-  width: 6px;
-  height: 6px;
-  cursor: nwse-resize;
-}
-.resize-edge.top-right {
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 6px;
-  cursor: nesw-resize;
-}
-.resize-edge.bottom-left {
-  bottom: 0;
-  left: 0;
-  width: 6px;
-  height: 6px;
-  cursor: nesw-resize;
-}
-.resize-edge.bottom-right {
-  bottom: 0;
-  right: 0;
-  width: 6px;
-  height: 6px;
-  cursor: nwse-resize;
-}
-
-/* ─── The pane grid ──────────────────────────── */
-/* One track per pane, laid out by `panels/pane-grid.ts` — the reconciler writes
-   `grid-template-columns` because the track count depends on `workspace.panes.length`, which the
-   shell's own layout effect must not read. */
-#pane-grid {
-  grid-row: 2;
-  grid-column: pane;
-  display: grid;
-  grid-template-rows: 1fr;
-  min-width: 0;
-  min-height: 0;
-}
-/* One PANE. Its own two-row grid: the strip, then everything stacked in the cell below it.
-
-   ONE COLUMN, declared. Three children name `grid-row: 2` in order to share the lower cell, and
-   auto-placement answers that by inventing an implicit column each: the jump bar, the chrome layer
-   and the stage lined up side by side, the stage taking a third of the pane and pinning the
-   document to the right edge. `grid-template-columns` is what makes "share the cell" mean it, and
-   every row-2 child restates `grid-column: 1` so a future fourth one cannot re-open the same hole.
-
-   No unit test can see this: happy-dom does no layout, so every rect is zero and the grid the
-   assertions describe is the one they were written from. The screenshot lane is what caught it. */
-.pane {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto minmax(0, 1fr);
-  min-width: 0;
-  min-height: 0;
-}
-.pane-strip {
-  grid-row: 1;
-  grid-column: 1;
-  min-height: 0;
-  min-width: 0;
-}
-.pane-strip:empty {
-  display: none;
-}
-/* ⑥ The jump bar. Like `.pane-chrome` below it, this shares the pane's lower cell rather than
-   owning a row, so the two bars stack over the stage instead of pushing it down. `align-self:
-   start` is what keeps it the height of its own content instead of the height of the cell, so the
-   bar never covers the stage it sits above. */
-.pane-jump {
-  grid-row: 2;
-  grid-column: 1;
-  align-self: start;
-  position: relative;
-  z-index: 3;
-  min-width: 0;
-  max-width: 100%;
-}
-/* The pane's chrome layer — regions ⑦ and ⑩. It shares the stage's cell; the layer itself is
-   inert and only its two children take the pointer. `canvas.css` owns their looks.
-
-   Offset by `--jump-bar-h` for the same reason `.pane-stage` is: the jump bar is stacked over the
-   same cell, and one projection per bar is what keeps "no tab open" costing no dead band. */
-.pane-chrome {
-  grid-row: 2;
-  grid-column: 1;
-  margin-top: var(--jump-bar-h, 0px);
-  position: relative;
-  z-index: 2;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  pointer-events: none;
-}
-.pane-chrome > * {
-  pointer-events: auto;
-}
-/* The stage. Offset by the SUM of the two bars stacked over this cell — `--jump-bar-h` (written by
-   `panels/jump-bar.ts`) and `--pane-context-h` (by `panels/pane-context.ts`) — so neither ever
-   covers the document, and by zero when no tab is open, so the welcome screen does not sit under a
-   band nothing explains. Two variables rather than one total: each bar owns its own answer, and a
-   bar that renders nothing writes 0 without knowing the other exists. */
-.pane-stage {
-  grid-row: 2;
-  grid-column: 1;
-  margin-top: calc(var(--jump-bar-h, 0px) + var(--pane-context-h, 0px));
-  position: relative;
-  overflow: auto;
-  background: var(--bg-panel);
-  min-width: 0;
-}
-#activity-bar {
-  grid-row: 2 / 4;
-  grid-column: rail;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-  border-right: 1px solid var(--border);
-}
-#left-panel {
-  grid-row: 2 / 4;
-  grid-column: nav;
-  overflow-y: auto;
-  background: var(--bg-panel);
-  border-right: 1px solid var(--border);
-}
-/* The Inspector dock. A flex COLUMN, not a scroll box: the header and the four-tab strip are
-   fixed, and the selected tab's body is the only thing that scrolls — which is what lets the
-   Assistant tab (whose chat owns its own scrolling) share the dock at zero extra width. */
-#right-panel {
-  grid-row: 2 / 4;
-  grid-column: insp;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg);
-  border-left: 1px solid var(--border);
-}
-
-/* ─── ⑪ Bottom dock ───────────────────────────── */
-/* A flex COLUMN in the pane's own grid column: the tab strip is fixed and the selected tab's body
-   is the only thing that scrolls. It borders on the top only — the sides are the pane's, and a
-   box drawn inside the stage's column would read as a second panel rather than as the floor. */
-#bottom-dock {
-  grid-row: 3;
-  grid-column: pane;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--bg-panel);
-  border-top: 1px solid var(--border);
-}
-#bottom-dock:empty {
-  display: none;
-}
-.bd-strip {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  padding: 0 4px;
-  border-bottom: 1px solid var(--border);
-}
-.bd-tabs {
-  flex: 1;
-  min-width: 0;
-}
-.bd-close {
-  flex-shrink: 0;
-  padding: 2px 6px;
-  border: none;
-  border-radius: var(--spectrum-corner-radius-75, 2px);
-  background: none;
-  color: var(--fg-dim);
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-}
-.bd-close:hover {
-  background: var(--hover-bg);
-  color: var(--fg);
-}
-/* The one scrolling region. `min-height: 0` because a flex item's auto minimum is its content,
-   which would push the dock past its own track instead of scrolling inside it. */
-.bd-body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* ─── Collapsed sidebars ──────────────────────── */
-#app.left-collapsed {
-  --panel-w-left: 0px;
-}
-#app.left-collapsed #left-panel,
-#app.left-collapsed #resize-left {
-  display: none;
-}
-#app.right-collapsed {
-  --panel-w-right: 0px;
-}
-#app.right-collapsed #right-panel,
-#app.right-collapsed #resize-right {
-  display: none;
-}
-#app.bottom-collapsed {
-  --dock-h-bottom: 0px;
-}
-#app.bottom-collapsed #bottom-dock,
-#app.bottom-collapsed #resize-bottom {
-  display: none;
-}
-
-/* ─── AI Panel Chat UI ──────────────────────────── */
-.ai-tab-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.ai-chat-header {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 6px;
-  min-width: 0;
-  border-bottom: 1px solid var(--border);
-  font-size: var(--spectrum-font-size-75, 12px);
-}
-.ai-chat-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 600;
-}
-/* The conversation's share of the model's context. Quiet until it matters: past half the window
-   the assistant starts dropping the oldest turns, and this is the only thing that says so. */
-.ai-tokens {
-  font-size: 10px;
-  font-variant-numeric: tabular-nums;
-  color: var(--fg-dim);
-  padding: 0 4px;
-  border-radius: var(--radius);
-}
-.ai-tokens--warn {
-  color: var(--warning, #d98b28);
-  background: color-mix(in srgb, var(--warning, #d98b28) 14%, transparent);
-}
-.ai-header-spacer {
-  flex: 1;
-}
-/* THE chat scroller — bounded by min-height:0 at every flex level above. */
-.ai-chat-messages {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  font-size: var(--spectrum-font-size-75, 12px);
-  line-height: 1.5;
-}
-.ai-chat-empty {
-  color: var(--fg-dim);
-  text-align: center;
-  padding: 24px 12px;
-}
-.ai-msg-user {
-  align-self: flex-end;
-  max-width: 85%;
-  background: var(--accent-15);
-  border-radius: 8px 8px 2px 8px;
-  padding: 6px 10px;
-}
-.ai-msg-user-body {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.ai-msg-assistant {
-  align-self: stretch;
-  min-width: 0;
-}
-.ai-msg-md {
-  overflow-wrap: anywhere;
-}
-.ai-msg-md > *:first-child {
-  margin-top: 0;
-}
-.ai-msg-md > *:last-child {
-  margin-bottom: 0;
-}
-.ai-msg-md code {
-  background: rgba(0, 0, 0, 0.3);
-  padding: 1px 4px;
-  border-radius: var(--radius);
-  font-size: var(--spectrum-font-size-50, 11px);
-  font-family: var(--font-mono);
-}
-.ai-msg-md pre {
-  background: rgba(0, 0, 0, 0.3);
-  padding: 8px;
-  border-radius: var(--radius);
-  overflow-x: auto;
-  margin: 6px 0;
-}
-.ai-msg-md pre code {
-  background: none;
-  padding: 0;
-}
-.ai-msg-md table {
-  border-collapse: collapse;
-  margin: 6px 0;
-}
-.ai-msg-md th,
-.ai-msg-md td {
-  border: 1px solid var(--border);
-  padding: 2px 6px;
-}
-.ai-msg-streaming {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.ai-msg-streaming::after {
-  content: "▋";
-  color: var(--accent);
-  animation: ai-cursor-blink 1s steps(2) infinite;
-}
-@keyframes ai-cursor-blink {
-  50% {
-    opacity: 0;
-  }
-}
-.ai-msg-typing {
-  display: flex;
-  gap: 4px;
-  padding: 4px 2px;
-}
-.ai-msg-typing span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--fg-dim);
-  animation: ai-typing-bounce 1.2s infinite;
-}
-.ai-msg-typing span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.ai-msg-typing span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes ai-typing-bounce {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
-  }
-  30% {
-    opacity: 1;
-  }
-}
-.ai-msg-tools {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 6px;
-}
-.ai-tool-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  align-self: flex-start;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: var(--hover-bg);
-  border-left: 2px solid var(--accent);
-  border-radius: var(--radius);
-  padding: 3px 8px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  font-family: var(--font-mono);
-}
-/* A question the assistant is waiting on. Deliberately louder than a tool chip and quieter than
-   an error: it is the one thing in the transcript that will not proceed without the reader. */
-.ai-ask {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-self: stretch;
-  background: var(--hover-bg);
-  border-left: 2px solid var(--accent);
-  border-radius: var(--radius);
-  padding: 8px 10px;
-}
-.ai-ask[data-outcome="ok"],
-.ai-ask[data-outcome="unanswered"],
-.ai-ask[data-outcome="failed"] {
-  border-left-color: var(--border);
-}
-.ai-ask-question {
-  font-size: var(--spectrum-font-size-75, 12px);
-  color: var(--fg);
-  line-height: 1.5;
-}
-.ai-ask-context {
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  line-height: 1.5;
-}
-.ai-ask-options {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-}
-.ai-ask-skip {
-  margin-inline-start: auto;
-}
-.ai-ask-answer {
-  align-self: flex-start;
-  max-width: 100%;
-  background: var(--accent);
-  color: var(--accent-fg);
-  border-radius: var(--radius);
-  padding: 3px 8px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  overflow-wrap: anywhere;
-}
-.ai-ask-outcome {
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  line-height: 1.5;
-}
-/* An import, under the chip that started it. It reports for minutes and then stays: the summary
-   line is the run's outcome once it has one, and the log below is a scroller the reader owns —
-   it follows the newest line until they scroll away from it, and stops following while they read.
-   It was a fixed six-line tail that ellipsed every message and vanished the moment the run
-   finished, which is to say the account of a successful import was destroyed by its success. */
-.ai-import-progress {
-  align-self: stretch;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 6px 8px;
-}
-.ai-import-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg);
-  cursor: pointer;
-  list-style: none;
-}
-.ai-import-head::-webkit-details-marker {
-  display: none;
-}
-.ai-import-message {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* How many lines are folded away, so a collapsed run still says how much it has to show. */
-.ai-import-count {
-  flex: 0 0 auto;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--fg-dim);
-}
-.ai-import-phase {
-  color: var(--fg-dim);
-  font-family: var(--font-mono);
-  flex: 0 0 auto;
-  margin-right: 4px;
-}
-.ai-import-log {
-  margin-top: 4px;
-  max-height: 40vh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  line-height: 1.6;
-  color: var(--fg-dim);
-}
-/* Wraps rather than ellipses: a phase line names a page, a count or a file, and the end of it is
-   usually the part worth reading. */
-.ai-import-log-line {
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-.ai-msg-tool-error {
-  background: var(--hover-bg);
-  border-left: 2px solid var(--danger);
-  border-radius: var(--radius);
-  padding: 4px 8px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-}
-.ai-msg-error {
-  border-left: 2px solid var(--danger);
-  border-radius: var(--radius);
-  background: var(--hover-bg);
-  padding: 6px 8px;
-  color: var(--danger);
-}
-.ai-msg-error-advice {
-  margin-top: 4px;
-  color: var(--fg-dim);
-}
-.ai-msg-context-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 6px;
-}
-.ai-context-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1px 6px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-}
-/* Sticky composer */
-.ai-composer {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px;
-  border-top: 1px solid var(--border);
-}
-.ai-composer-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.ai-composer-input {
-  width: 100%;
-  box-sizing: border-box;
-  resize: none;
-  min-height: 30px;
-  max-height: 120px;
-  overflow-y: auto;
-  background: var(--bg-input);
-  color: var(--fg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 6px 8px;
-  font-size: var(--spectrum-font-size-75, 12px);
-  font-family: inherit;
-  line-height: 1.4;
-}
-/* Pointer focus gets the accent border only; keyboard focus additionally gets a real ring.
-   `outline: none` on plain `:focus` is what makes a control untraversable by keyboard, so the
-   suppression is scoped to `:focus:not(:focus-visible)` and never applies to the caret's own path. */
-.ai-composer-input:focus {
-  border-color: var(--accent);
-}
-.ai-composer-input:focus:not(:focus-visible) {
-  outline: none;
-}
-.ai-composer-input:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-.ai-composer-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-.ai-model-picker {
-  max-width: 140px;
-  min-width: 0;
-}
-/* Sessions list */
-.ai-sessions {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  font-size: var(--spectrum-font-size-75, 12px);
-}
-.ai-sessions-empty {
-  color: var(--fg-dim);
-  text-align: center;
-  padding: 24px 12px;
-}
-.ai-session-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  min-width: 0;
-}
-.ai-session-row:hover {
-  background: var(--hover-bg);
-}
-.ai-session-text {
-  flex: 1;
-  min-width: 0;
-}
-.ai-session-title {
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ai-session-meta {
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-}
-.ai-session-delete {
-  visibility: hidden;
-}
-.ai-session-row:hover .ai-session-delete {
-  visibility: visible;
-}
-/* The in-panel residue of the retired credentials gate: one sentence and the action that
-   fixes it, sitting between the transcript and the composer. */
-.ai-setup-notice {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 8px;
-  border-top: 1px solid var(--border);
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-}
-.ai-managed-connect {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-}
-/* The lede reads as the recommendation, so it carries weight the divider beneath it does not. */
-.ai-managed-connect-lede {
-  color: var(--fg);
-  font-size: var(--spectrum-font-size-75, 12px);
-  max-width: 280px;
-  text-align: center;
-}
-.ai-managed-connect-error {
-  color: var(--danger);
-  font-size: var(--spectrum-font-size-50, 11px);
-  max-width: 260px;
-}
-.ai-managed-connect-divider {
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-  margin-top: 6px;
-}
-
-/* ─── Assistant settings (ui/ai-credentials-form.ts) ──────── */
-/* The provider credentials form. Hosted by the `Assistant: Settings…` dialog and by the New
-   Project modal's Import/Agent gates, so it sizes itself and never assumes a column. */
-.prefs-assistant {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-.ai-creds-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  max-width: 320px;
-  text-align: left;
-}
-.ai-creds-title {
-  align-self: center;
-  font-weight: 600;
-}
-.ai-creds-note {
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-}
-.ai-creds-label {
-  margin-top: 4px;
-  font-weight: 500;
-  font-size: var(--spectrum-font-size-50, 11px);
-}
-.ai-creds-field {
-  width: 100%;
-}
-.ai-creds-models {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.ai-creds-error {
-  color: var(--danger);
-  font-size: var(--spectrum-font-size-50, 11px);
-}
-.ai-creds-actions {
-  display: flex;
-  align-self: flex-end;
-  gap: 8px;
-}
-/* ─── ⑫ Status bar ────────────────────────────────
-   Three fields in the shell's own level order, separated by a rule rather than by a run of "|"
-   characters: the boundary between PROJECT, DOCUMENT and SELECTION is structural, and the eye
-   should be able to find it without reading. */
-#statusbar {
-  /* Its OWN row, below the Bottom dock's, which collapses to 0px. Sharing that row put the whole
-     bar in a zero-height cell — it rendered its three fields into nothing while the 24px track
-     stood empty, so the app looked like it had lost its status bar the day it gained a dock. */
-  grid-row: 4;
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: stretch;
-  overflow: hidden;
-  padding: 0 4px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  background: var(--bg);
-  border-top: 1px solid var(--border);
-}
-#statusbar .sb-field {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
-  padding: 0 6px;
-}
-/* The SELECTION field is the one that grows without bound (a deep tree), so it is the one that
-   scrolls — the project name and the save state must never be pushed out of the window. */
-#statusbar .sb-field:last-child {
-  min-width: 0;
-  overflow: hidden;
-}
-#statusbar .sb-field + .sb-field {
-  border-left: 1px solid var(--border);
-}
-#statusbar .sb-item {
-  max-width: 32ch;
-  overflow: hidden;
-  padding: 0 4px;
-  border: none;
-  border-radius: var(--spectrum-corner-radius-75, 2px);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-#statusbar button.sb-item {
-  cursor: pointer;
-}
-#statusbar button.sb-item:hover:not(:disabled) {
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-#statusbar button.sb-item:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-/* A readout is state, not a control: no hover, no pointer, and no promise that clicking does
-   anything. The two are visually distinguishable only on hover, which is the correct amount. */
-#statusbar .sb-state {
-  cursor: default;
-}
-
-/* ─── ⑥ Jump bar ──────────────────────────────── */
-/* The pane's address: project › file › node › node, every step a command. It reads at a glance
-   because it is ONE line at the top of the pane — the two half-breadcrumbs it replaces were 28px of
-   pane chrome (only while a takeover editor was open) and 11px of status bar (only while something
-   was selected), and neither ever showed the whole chain.
-
-   It scrolls rather than wraps: a deep selection must not push the stage down by a second line, and
-   the LEAF is the part you are reading, so the overflow is taken at the start. */
-.jump-bar {
-  display: flex;
-  align-items: center;
-  gap: 1px;
-  height: 24px;
-  padding: 0 6px;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-  white-space: nowrap;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  background: var(--bg-panel);
-  border-bottom: 1px solid var(--border);
-}
-.jump-bar::-webkit-scrollbar {
-  display: none;
-}
-.jump-bar .jb-seg {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.jump-bar .jb-crumb {
-  max-width: 28ch;
-  overflow: hidden;
-  padding: 0 4px;
-  border: none;
-  border-radius: var(--spectrum-corner-radius-75, 2px);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.jump-bar button.jb-crumb {
-  cursor: pointer;
-}
-.jump-bar button.jb-crumb:hover:not(:disabled) {
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-.jump-bar button.jb-crumb:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-/* Where you ARE is stated by weight, not by removing the control: the leaf still selects, which is
-   how a stray click in the canvas is undone without leaving the bar. */
-.jump-bar .jb-crumb[aria-current] {
-  color: var(--fg);
-}
-/* A step with no command is a readout, not a dead button — an address with a hole in it would be a
-   lie about containment. No hover, no pointer, no promise. */
-.jump-bar .jb-crumb--static {
-  cursor: default;
-}
-.jump-bar .jb-alts {
-  padding: 0 2px;
-  border: none;
-  border-radius: var(--spectrum-corner-radius-75, 2px);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-}
-.jump-bar .jb-alts:hover {
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-.jump-bar .jb-sep {
-  flex-shrink: 0;
-  color: var(--fg-dim);
-  opacity: 0.6;
-}
-
-/* ─── Tab strip ───────────────────────────────── */
-/* The chevron sits OUTSIDE the scrolling strip, so it stays reachable at any scroll offset —
-   which is the whole point of it: the scrollbar is hidden and the wheel is a mouse affordance. */
-.tab-strip-row {
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-  background: var(--bg-panel);
-  border-bottom: 1px solid var(--border);
-}
-.tab-strip-row .tab-strip {
-  flex: 1 1 auto;
-  border-bottom: none;
-}
-.tab-strip-overflow {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  padding: 0;
-  border: none;
-  border-left: 1px solid var(--border);
-  background: none;
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-100, 14px);
-  line-height: 1;
-  cursor: pointer;
-}
-.tab-strip-overflow:hover {
-  background: var(--hover-bg);
-  color: var(--fg);
-}
-/* A LENS pane's strip: one chip naming the projection and the document it projects, where an
-   ordinary pane draws tab chips. It is not a tab and must not look like one — no close ✕ of its
-   own, because a lens owns no document to close. */
-.tab-derivation {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  min-width: 0;
-  /* A tab chip's VERTICAL box — `4px` top and bottom plus the 2px underline `.tab-strip-tab`
-     reserves — so the lens's one-chip row sits on the same baseline grid as the tab row in the
-     pane beside it. Horizontally it is 10px rather than a chip's 8px: this row is one chip wide
-     with nothing to sit beside, and a chip's tighter inset exists so several of them read as a
-     series.
-     The row's HEIGHT is set by its tallest child (the 12px `.tab-derivation-preset`, against a
-     chip's 11px), not by a font-size on this box — which is why the numbers above are the only
-     half of this comment a reader can check. The height itself was measured in a browser and
-     cannot be asserted here: happy-dom lays nothing out and returns 0 whether the rule is right
-     or wrong, and a 19px strip against a 28px one is the class of defect only a picture catches. */
-  padding: 4px 10px;
-  border-bottom: 2px solid transparent;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.tab-derivation-preset {
-  color: var(--fg);
-  font-size: var(--spectrum-font-size-75, 12px);
-}
-.tab-derivation-of {
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-/* Drill-in marker: this document was opened FROM another one. */
-.tab-strip-origin {
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-50, 11px);
-  line-height: 1;
-}
-.tab-strip {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  padding: 0 8px;
-  background: var(--bg-panel);
-  border-bottom: 1px solid var(--border);
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-.tab-strip::-webkit-scrollbar {
-  display: none;
-}
-.tab-strip-tab {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  cursor: pointer;
-  white-space: nowrap;
-  border-bottom: 2px solid transparent;
-  user-select: none;
-  flex-shrink: 0;
-}
-.tab-strip-tab:hover {
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-.tab-strip-tab.active {
-  color: var(--fg);
-  border-bottom-color: var(--accent);
-}
-.tab-strip-label {
-  max-width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.tab-strip-dirty {
-  color: var(--accent);
-  font-size: 8px;
-  line-height: 1;
-}
-.tab-strip-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-100, 14px);
-  line-height: 1;
-  border-radius: var(--radius);
-  cursor: pointer;
-  opacity: 0;
-}
-.tab-strip-tab:hover .tab-strip-close,
-.tab-strip-tab.active .tab-strip-close {
-  opacity: 1;
-}
-.tab-strip-close:hover {
-  background: var(--hover-bg);
-  color: var(--fg);
-}
-
-/* ─── Resize handles ─────────────────────────── */
-/* The two column handles span the stage AND the bottom dock, so the grab target is the dock's
-   full height rather than stopping at the floor of the canvas. */
-.resize-handle {
-  grid-row: 2 / 4;
-  width: 5px;
-  margin-left: -3px;
-  margin-right: -2px;
-  cursor: col-resize;
-  z-index: 10;
-  position: relative;
-}
-.resize-handle:hover,
-.resize-handle.dragging {
-  background: var(--accent, #3b82f6);
-  opacity: 0.5;
-}
-#resize-left {
-  grid-column: pane;
-  justify-self: start;
-}
-#resize-right {
-  grid-column: insp;
-  justify-self: start;
-}
-/* The Bottom dock's handle resizes on the other axis, so every dimension flips: it is a row in
-   the pane's column, full width, five px tall, and it drags up and down. */
-/* The pane splitter. A column handle like the two dock ones, but INSIDE the pane grid rather than
-   on `#app`'s grid — so it takes its own track (`panels/pane-grid.ts` writes the 5px column) and
-   spans the cell's full height rather than naming an application row. */
-/* The splitter between two cells.
-
-   `grid-row: auto`, and it has to be. It inherits `grid-row: 2 / 4` from `.resize-handle` — the
-   APP grid's placement, where the three dock handles live — and any definite row position, that
-   one or the `1 / -1` this rule used to carry, moves the item into an earlier step of CSS Grid's
-   auto-placement: definite-row items are placed before fully-auto ones, so the splitter claimed
-   column 1 and the two cells flowed around it into the 5px track and the second half. DOM order
-   was already correct; the placement algorithm was not reading it. Both axes auto is what makes
-   the DOM order decide. `#pane-grid` has one row, so an auto item still stretches its full height.
-
-   Like the row-1 column declaration above, this is invisible to every test in the package:
-   happy-dom does no layout. */
-.pane-splitter {
-  grid-row: auto;
-  grid-column: auto;
-  justify-self: stretch;
-  margin: 0;
-  width: auto;
-  background: var(--border);
-}
 .resize-handle-row {
   grid-row: 3;
   grid-column: pane;
@@ -1280,262 +7,3 @@
   margin: -3px 0 -2px;
   cursor: row-resize;
 }
-
-/* ─── Preferences (⌘,) ──────────────────────────
-   The application-preferences sheet: a section list beside one section's body.
-   Distinct from Project Settings, which is a project document (spec §9.3). */
-.prefs-sheet {
-  display: flex;
-  gap: 16px;
-  min-height: 320px;
-}
-.prefs-nav {
-  flex: 0 0 148px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  border-right: 1px solid var(--border);
-  padding-right: 8px;
-}
-.prefs-nav-item {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--fg-dim);
-  font: inherit;
-  text-align: left;
-  padding: 6px 8px;
-  border-radius: var(--radius);
-  cursor: pointer;
-}
-.prefs-nav-item:hover {
-  background: var(--bg-hover);
-  color: var(--fg);
-}
-.prefs-nav-item.active {
-  background: var(--bg-selected);
-  color: var(--fg);
-}
-.prefs-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-.prefs-title {
-  margin: 0;
-  font-size: var(--spectrum-font-size-100, 14px);
-  color: var(--fg);
-}
-.prefs-blurb {
-  margin: 0 0 4px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-}
-.prefs-empty {
-  margin: 0;
-  color: var(--fg-dim);
-}
-.prefs-field {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.prefs-field-label {
-  font-size: var(--spectrum-font-size-75, 12px);
-  color: var(--fg-dim);
-}
-.prefs-accounts {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.prefs-account {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-.prefs-account-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-.prefs-account-label {
-  color: var(--fg);
-}
-.prefs-account-detail {
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-}
-.prefs-keys {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.prefs-keys-scope {
-  margin: 10px 0 2px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--fg-dim);
-}
-.prefs-key {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  padding: 2px 0;
-}
-.prefs-key-chord {
-  flex: 0 0 96px;
-  font-family: var(--font-mono);
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg);
-}
-.prefs-key-title {
-  color: var(--fg-dim);
-  min-width: 0;
-}
-
-/* ─── Assistant honesty (§7.4) ──────────────────────────────────────────────
-   A tool chip renders its OUTCOME, a turn renders what it CHANGED, and an error
-   offers Retry. `ToolCallRecord.result` was populated by the loop and ignored by
-   the renderer, so a chip said exactly as much when the edit had been refused as
-   when it had landed. */
-.ai-tool-chip-name {
-  flex: 0 0 auto;
-}
-.ai-tool-chip-outcome {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--font);
-}
-.ai-tool-chip[data-outcome="ok"] {
-  border-left-color: var(--success, var(--accent));
-}
-.ai-tool-chip[data-outcome="failed"] {
-  border-left-color: var(--danger);
-  color: var(--danger);
-}
-/* The changed-files summary. Collapsed by default because the headline —
-   "Changed 4 files · 2 written to disk — undo cannot reach them" — is the part
-   that must never be missed; the list is for when it is. */
-.ai-msg-changes {
-  margin-top: 6px;
-  border-left: 2px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--hover-bg);
-  padding: 4px 8px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-}
-.ai-msg-changes > summary {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-.ai-msg-changes-list {
-  margin: 6px 0 2px;
-  padding-left: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.ai-msg-changes-list li {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: baseline;
-}
-.ai-msg-changes-list li[data-ok="false"] {
-  color: var(--danger);
-}
-/* The undo caveat, rendered to the person holding ⌘Z rather than appended to the
-   model-facing tool summary. */
-.ai-msg-changes-list li[data-disk="true"] em {
-  color: var(--warning);
-  font-style: normal;
-}
-.ai-msg-retry {
-  margin-top: 6px;
-}
-
-/* ─── Collaboration presence (§7.4) ─────────────────────────────────────────
-   `.jx-presence*` matched no stylesheet in the repo — the flagship affordance
-   shipped unstyled. The flags are the two states co-editing could not announce:
-   a read-only guest whose edits were dropped at the publish gate, and the
-   source-canonical freeze whose whole rendering was a three-second grey line,
-   which is exactly what a bug looks like. */
-.jx-presence {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-.jx-presence-status {
-  font-size: var(--spectrum-font-size-50, 11px);
-  color: var(--fg-dim);
-  white-space: nowrap;
-}
-.jx-presence-status[data-status="synced"] {
-  color: var(--success, var(--accent));
-}
-.jx-presence-status[data-status="connecting"] {
-  color: var(--fg-dim);
-}
-.jx-presence-status[data-status="offline"] {
-  color: var(--warning);
-}
-.jx-presence-status[data-status="failed"] {
-  color: var(--danger);
-}
-.jx-presence-flag {
-  border-radius: var(--radius);
-  padding: 1px 6px;
-  font-size: var(--spectrum-font-size-50, 11px);
-  white-space: nowrap;
-  border: 1px solid currentcolor;
-}
-.jx-presence-flag[data-flag="read-only"] {
-  color: var(--fg-dim);
-}
-.jx-presence-flag[data-flag="frozen"] {
-  color: var(--warning);
-}
-.jx-presence-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  overflow: hidden;
-  font-size: var(--spectrum-font-size-50, 11px);
-  font-weight: 600;
-  color: var(--spectrum-gray-50, #fff);
-  flex: none;
-}
-.jx-presence-chip img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-/* A standing statement, not an after-the-fact refusal: a guest without write
-   access used to watch their edits apply locally and vanish at the publish gate. */
-.jx-collab-banner {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--border);
-  background: var(--hover-bg);
-  color: var(--fg-dim);
-  font-size: var(--spectrum-font-size-75, 12px);
-}