@andorra-labs/code 0.0.0-stage → 0.1.5

package/dist/src/graph-ui/style.css

@@ -0,0 +1,477 @@
+/*
+ * The Graph Studio's chrome: the library rail, the canvas, the node inspector and the status
+ * strip. Every colour, measurement and type size comes from `tokens.css`, which carries the same
+ * register as the desktop client, so the editor embedded in the desktop window is the same
+ * surface rather than a lookalike. Sizes sit on the shared type scale (`--type-xs` … `--type-lg`)
+ * and spacing on the 4px scale (`--space-1` … `--space-6`), per ADR 0022.
+ */
+
+* { box-sizing: border-box; }
+
+html, body { height: 100%; margin: 0; }
+
+body {
+  display: flex; height: 100dvh; overflow: hidden;
+  background: var(--bg-surface); color: var(--text);
+  font-family: var(--font-ui); font-size: var(--type-row); line-height: 1.45;
+  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  /* A desktop application, not a page: the arrow is the resting cursor. */
+  cursor: default;
+}
+
+button, input, select, textarea { font: inherit; color: inherit; }
+button, [role="button"] { cursor: pointer; }
+button:disabled { cursor: default; }
+input, textarea { caret-color: var(--accent); }
+
+code, pre, .mono { font-family: var(--font-mono); font-size: var(--type-xs); }
+
+/* The `hidden` attribute hides a control whatever display the sheet gives it. The user-agent rule
+   that carries the attribute is not `!important` on every engine, so an author-level display —
+   the button below sets one — would otherwise keep the control on screen. */
+[hidden] { display: none !important; }
+
+svg.icon { flex: none; display: block; }
+
+/* Buttons ---------------------------------------------------------------- */
+
+/* One button system (ADR 0022): a rounded rectangle on the 8px radius at 32px, or 28px for the
+   small size, told apart by fill. The secondary kind is the resting one: card fill, no outline.
+   The height is a floor rather than a fixed size, because a button may carry more than one line. */
+button {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  min-height: var(--btn-height); padding: var(--space-1) var(--space-3); border-radius: var(--btn-radius);
+  border: 1px solid transparent; background: var(--bg-card); color: var(--text);
+  font-size: var(--type-sm); font-weight: var(--weight-regular); white-space: nowrap;
+  user-select: none; -webkit-user-select: none;
+  transition: background-color var(--dur-1) var(--ease-standard),
+    border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
+}
+button:hover:not(:disabled) { background: var(--border); }
+button:active:not(:disabled) { transform: scale(.99); }
+button:disabled { opacity: .55; }
+.btn-small { min-height: var(--control-height); padding: 0 var(--space-2); font-size: var(--type-xs); }
+
+/* The primary action is the accent fill. */
+.primary {
+  border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: var(--weight-strong);
+}
+.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
+.primary:disabled { background: var(--accent-soft); border-color: transparent; color: var(--text-2); }
+
+/* Ghost: a bare label or icon that fills only under the pointer. */
+.ghost, .icon-button { background: transparent; color: var(--text-2); }
+.ghost:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: var(--bg-card); color: var(--text); }
+.icon-button { min-width: var(--btn-height); padding: 0; }
+.icon-button[aria-pressed="true"], .icon-button[aria-expanded="true"] { color: var(--text); background: var(--accent-soft); }
+
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Chips: a compact status label. The warning kind names a problem with the configuration. */
+.chip {
+  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 22px; padding: 0 var(--space-2);
+  border-radius: 999px; background: var(--bg-card); color: var(--text-2); font-size: var(--type-xs); white-space: nowrap;
+}
+.chip-accent { background: var(--accent-soft); color: var(--text); }
+.chip-warning { background: var(--bg-card); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn); }
+.chip .link-button { margin: 0; color: inherit; font-size: var(--type-xs); }
+
+/* Fields ----------------------------------------------------------------- */
+
+input, select, textarea {
+  width: 100%; min-width: 0; min-height: var(--input-height); padding: var(--space-1) 10px;
+  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--input-radius);
+  transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
+}
+input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
+input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+input::placeholder, textarea::placeholder { color: var(--text-3); }
+/* A field carries prose unless it is marked as code, so the mono face is opt-in. */
+textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
+
+/* The library rail -------------------------------------------------------- */
+
+.rail {
+  position: relative; isolation: isolate;
+  width: var(--rail-width, 238px); min-width: 0; flex-shrink: 0;
+  display: flex; flex-direction: column; min-height: 0;
+  background: var(--bg-rail); border-right: 1px solid var(--border);
+  /* Sidebar rows are controls, not prose. */
+  user-select: none; -webkit-user-select: none;
+}
+/* The rail's own ground: two static luminance glows and a fine monochrome grain over it. The glow
+   is part of the surface, not a state, and it never moves. */
+.rail::before {
+  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
+  background: radial-gradient(var(--glow-size) at 22% 10%, var(--glow-1), transparent 68%),
+              radial-gradient(520px 520px at 95% 100%, var(--glow-2), transparent 70%);
+}
+.rail::after {
+  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
+  background-size: 160px 160px;
+}
+.rail > * { position: relative; z-index: 1; }
+
+.rail-footer span { display: block; font-size: var(--type-xs); font-weight: var(--weight-regular); color: var(--text-3); margin-top: var(--space-1); }
+
+/* The window title already names the product, so the rail opens straight onto the graphs. */
+.rail-body { padding: var(--space-3) var(--space-2) var(--space-4); overflow: auto; flex: 1; min-height: 0; }
+
+.section-label {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: var(--type-xs); color: var(--text-3); margin: var(--space-2) 2px var(--space-2); padding: 0 var(--space-2);
+}
+.section-label button {
+  border: 0; background: transparent; padding: 0; width: 24px; min-height: 24px; height: 24px;
+  color: var(--text-2);
+}
+.section-label button:hover:not(:disabled) { background: var(--rail-wash); color: var(--text); }
+
+#search, #node-search { margin-bottom: var(--space-3); }
+
+/* Rows: one anatomy, everywhere. */
+#graphs { display: grid; gap: 1px; }
+.graph-row {
+  display: flex; align-items: center; justify-content: space-between; width: 100%;
+  min-height: var(--row-height); padding: 0 var(--space-2); gap: var(--space-2);
+  border: 0; background: transparent; color: var(--text-2); text-align: left;
+  border-radius: var(--row-radius); font-size: var(--type-row);
+}
+.graph-row:hover { background: var(--rail-wash); color: var(--text); }
+.graph-row.active { background: var(--rail-wash); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
+.graph-row span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.graph-row small { color: var(--text-3); font-size: var(--type-xs); flex-shrink: 0; }
+
+.library-label { margin-top: var(--space-5); }
+.library-group { margin: var(--space-2) 0; }
+.library-group > summary { font-size: var(--type-xs); font-weight: var(--weight-strong); color: var(--text-2); padding: var(--space-2); cursor: pointer; }
+.library-group .help { font-size: var(--type-xs); padding: 0 var(--space-2); }
+
+/* A library item is something you pick up: an icon in its type's colour, the name, and a short
+   description. It drags onto the canvas, and a click or Enter adds it at the viewport's corner. */
+.library-item {
+  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--space-2); row-gap: 2px; align-items: start;
+  width: 100%; min-height: 0; text-align: left; border: 0; background: transparent;
+  padding: 6px var(--space-2); border-radius: var(--row-radius); color: var(--text-2); cursor: grab;
+}
+.library-item:active:not(:disabled) { cursor: grabbing; }
+.library-item:hover:not(:disabled) { background: var(--rail-wash); color: var(--text); }
+.library-item > svg.icon { grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; color: var(--type-colour, var(--text-3)); }
+.library-item b { grid-column: 2; grid-row: 1; display: block; font-weight: var(--weight-strong); font-size: var(--type-sm); white-space: normal; overflow-wrap: anywhere; }
+.library-item span { grid-column: 2; grid-row: 2; display: block; color: var(--text-3); font-size: var(--type-xs); white-space: normal; line-height: 1.35; }
+
+.hint { color: var(--text-3); line-height: 1.5; font-size: var(--type-xs); margin: var(--space-3) var(--space-2); }
+
+.rail-footer { padding: 10px var(--space-3); border-top: 1px solid var(--border); font-size: var(--type-row); color: var(--text-2); }
+
+/* The workspace ----------------------------------------------------------- */
+
+main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
+
+/* One toolbar row: the way back (when embedded), the graph's name and revision, then the two
+   secondary actions, the inspector toggle, the overflow menu and the one primary action. */
+.chrome {
+  min-height: calc(var(--chrome-height) + var(--space-2)); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--border); background: var(--bg-surface);
+}
+.graph-heading { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; }
+.graph-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-strong); font-size: var(--type-md); }
+.graph-heading span { font-size: var(--type-xs); color: var(--text-3); white-space: nowrap; }
+.graph-heading .chip { align-self: center; }
+.chrome-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
+.chrome-actions > .primary { margin-left: var(--space-1); }
+.host-chrome { display: flex; align-items: center; gap: var(--space-1); flex: none; padding-right: var(--space-2); border-right: 1px solid var(--border); }
+
+/* The overflow menu. */
+.menu { position: relative; }
+.menu-list {
+  position: absolute; z-index: 20; top: calc(100% + var(--space-1)); right: 0; min-width: 210px;
+  display: flex; flex-direction: column; padding: var(--space-1);
+  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--btn-radius); box-shadow: var(--shadow-menu);
+}
+.menu-list > button {
+  justify-content: flex-start; width: 100%; min-height: var(--control-height); padding: 0 var(--space-2);
+  background: transparent; color: var(--text); border-radius: var(--row-radius);
+}
+.menu-list > button:hover:not(:disabled), .menu-list > button:focus-visible { background: var(--bg-card); outline: none; }
+.menu-list > button > svg.icon { color: var(--text-2); }
+/* A destructive item (an Agent's Delete) reads as one, icon included. */
+.menu-list > button.danger, .menu-list > button.danger > svg.icon { color: var(--err-text); }
+.menu-list > hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: var(--space-1) 0; }
+/* The graph-row context menu floats at the pointer instead of anchoring to a parent. */
+.graph-context { position: fixed; top: auto; left: 0; right: auto; }
+
+.workspace { flex: 1; display: flex; min-height: 0; position: relative; }
+
+/* The canvas ground carries a fine dot grid that pans with nothing: it is texture, not a ruler. */
+#canvas {
+  flex: 1; position: relative; overflow: hidden; min-width: 0; touch-action: none;
+  background-color: var(--canvas-bg);
+  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1.2px);
+  background-size: 20px 20px;
+}
+#scene { position: absolute; transform-origin: 0 0; }
+#edges { position: absolute; overflow: visible; width: 1px; height: 1px; pointer-events: none; }
+#nodes { position: absolute; }
+
+/* A node is a card: a surface with the register's radius and contact shadow, a coloured stripe on
+   its left edge naming its kind, and the type's icon beside its name. */
+.node {
+  --type-colour: var(--node-agent);
+  position: absolute; width: 210px; min-height: 94px; padding: var(--space-3) var(--space-3) 0 18px;
+  border: 1px solid var(--border); border-radius: var(--card-radius);
+  background: var(--bg-input); box-shadow: var(--lift-2);
+  text-align: left; cursor: grab; user-select: none; touch-action: none;
+  background-image: linear-gradient(var(--type-colour), var(--type-colour));
+  background-size: 4px 100%; background-repeat: no-repeat; background-position: left top;
+}
+.node.join, .node.loop, .node.condition, .node.parallel, .node.approval { --type-colour: var(--node-control); }
+.node.action { --type-colour: var(--node-action); }
+.node.end { --type-colour: var(--node-end); }
+.node.selected { border-color: var(--accent); box-shadow: var(--lift-3), 0 0 0 1px var(--accent); }
+/* A node carrying a validation error wears a slight red aura so it reads as needing attention
+   before the graph can save; a refused Save pulses the aura to point the eye at the cards. */
+.node.node-error { border-color: var(--err); box-shadow: 0 0 0 2px var(--err), 0 0 10px 0 var(--err); }
+.node.node-error-pulse { animation: node-error-pulse 0.6s ease-in-out 2; }
+@keyframes node-error-pulse { 50% { box-shadow: 0 0 0 4px var(--err), 0 0 18px 2px var(--err); } }
+.node-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.node-title > svg.icon { color: var(--type-colour); }
+.node b { display: block; min-width: 0; flex: 1; font-weight: var(--weight-strong); font-size: var(--type-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.node small { display: block; color: var(--text-3); font-size: var(--type-xs); margin-top: 6px; padding-left: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.node .node-start { flex: none; min-height: 18px; padding: 0 6px; }
+.node > small:last-of-type { margin-bottom: var(--space-3); }
+.node.end { padding-bottom: var(--space-3); }
+/* The node's left edge is its input port. The outcome ports on the right belong to the outcomes
+   themselves, so the node carries no generic right-hand circle of its own. */
+.node:before {
+  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--bg-input); border: 1px solid var(--border-strong); top: 44px; left: -5px;
+}
+.node:after { display: none; }
+
+/* An outcome's row is its connection handle. Once an outcome is connected its name moves onto the
+   connection as a pill, so the row keeps only the handle; an unconnected outcome keeps its name
+   here, since there is no line yet to carry it. */
+.output-port {
+  height: 25px; display: block; position: relative; width: calc(100% + 30px); margin-left: -18px;
+  text-align: right; border: 0; border-top: 1px solid var(--border); border-radius: 0;
+  padding: var(--space-1) 15px; background: transparent; font-size: var(--type-xs); line-height: 16px; color: var(--text-3); min-height: 0;
+  overflow: hidden; text-overflow: ellipsis;
+}
+.output-port[data-connected] { color: transparent; }
+.output-port[data-connected]:hover, .output-port[data-connected]:focus-visible { color: var(--text-2); }
+.output-port:last-child { border-radius: 0 0 var(--card-radius) var(--card-radius); }
+.output-port:after {
+  content: ''; position: absolute; right: -4px; top: 9px; width: 8px; height: 8px;
+  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 50%;
+}
+.output-port[data-connected]:after { background: var(--text-3); border-color: var(--text-3); }
+.node .output-port:hover { background: var(--bg-card); }
+
+/* Canvas controls: one pill of icon buttons at the bottom centre, beside the minimap. */
+.canvas-toolbar {
+  position: absolute; z-index: 4; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
+  display: flex; gap: 2px; align-items: center;
+  padding: var(--space-1); background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: 999px; box-shadow: var(--shadow-menu);
+}
+.canvas-toolbar button {
+  border: 0; background: transparent; width: var(--control-height); height: var(--control-height); min-height: 0;
+  padding: 0; border-radius: 999px; color: var(--text-2);
+}
+.canvas-toolbar button:hover:not(:disabled) { background: var(--bg-card); color: var(--text); }
+.canvas-toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); }
+.canvas-toolbar .toolbar-divider { height: 16px; border-left: 1px solid var(--border); margin: 0 var(--space-1); }
+#zoom { font-size: var(--type-xs); min-width: 40px; text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums; }
+
+/* The canvas tips show until the reader dismisses them once; picking a destination always shows
+   its own instruction here. */
+.canvas-hint {
+  position: absolute; z-index: 3; top: var(--space-3); left: var(--space-3); max-width: calc(100% - 2 * var(--space-3));
+  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
+  color: var(--text-2); font-size: var(--type-xs); background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: 999px; box-shadow: var(--shadow-menu);
+}
+.canvas-hint .icon-button { min-width: 22px; width: 22px; min-height: 22px; height: 22px; border-radius: 999px; }
+#empty { position: absolute; inset: 45% 20px auto; text-align: center; color: var(--text-3); }
+
+/* The node inspector ----------------------------------------------------- */
+
+#inspector {
+  width: var(--panel); flex-shrink: 0; border-left: 1px solid var(--border);
+  background: var(--bg-surface); display: flex; flex-direction: column; position: relative; z-index: 3;
+}
+#inspector.hidden { display: none; }
+.panel-header {
+  height: var(--chrome-height); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+  padding: 0 var(--space-4); border-bottom: 1px solid var(--border);
+}
+.panel-header strong { font-weight: var(--weight-strong); font-size: var(--type-md); }
+#inspector-body { padding: var(--space-4); overflow: auto; flex: 1; }
+#resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
+
+/* The inspector's tabs split a node's settings into General, Model, Behavior and Advanced. */
+.inspector-tabs {
+  display: flex; gap: 2px; margin: calc(-1 * var(--space-2)) 0 var(--space-4); padding: 2px;
+  background: var(--bg-card); border-radius: var(--btn-radius);
+}
+.inspector-tabs button {
+  flex: 1; min-height: 26px; padding: 0 var(--space-2); border-radius: var(--row-radius);
+  background: transparent; color: var(--text-2); font-size: var(--type-xs);
+}
+.inspector-tabs button:hover:not(:disabled) { background: transparent; color: var(--text); }
+.inspector-tabs button[aria-selected="true"] { background: var(--bg-input); color: var(--text); box-shadow: var(--lift-2); }
+.inspector-panel > .section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
+
+.field { display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: center; column-gap: var(--space-1); margin-bottom: var(--space-3); }
+.field > span { grid-column: 1; grid-row: 1; display: block; font-size: var(--type-row); margin-bottom: 6px; color: var(--text-2); }
+.field > input, .field > select, .field > textarea { grid-column: 1 / -1; grid-row: 2; }
+.field > .info-tip { grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 6px; }
+.field textarea { min-height: 95px; }
+.two-fields { display: flex; gap: var(--space-3); }
+.two-fields > * { flex: 1; min-width: 0; }
+.tool-label { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; }
+.tool-label input { width: auto; min-height: 0; }
+
+/* The prompt editor grows with its text up to a ceiling, and opens full screen for long prompts.
+   The expand button sits inside the field's top-right corner. */
+.prompt-field > textarea { min-height: 120px; max-height: 60vh; resize: none; overflow-y: auto; padding-right: 40px; }
+.prompt-field > .prompt-expand { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; z-index: 1; margin: var(--space-1); min-width: var(--control-height); }
+.prompt-field.fullscreen {
+  position: fixed; z-index: 50; inset: var(--space-5); margin: 0; grid-template-rows: auto 1fr;
+  padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border);
+  border-radius: var(--card-radius); box-shadow: var(--shadow-menu);
+}
+.prompt-field.fullscreen > textarea { height: 100%; max-height: none; font-size: var(--type-sm); }
+/* The inspector is its own stacking context, so it rises above the canvas while a prompt is full screen. */
+body.prompt-fullscreen #inspector { z-index: 60; }
+.prompt-backdrop { position: fixed; inset: 0; z-index: 49; background: var(--overlay); }
+
+/* A "?" beside a label keeps a long explanation one hover or focus away (ADR 0022). The text
+   stays in the document as the trigger's description. */
+/* The tooltip spans its label's full width, so it never runs past the inspector's edge. */
+.field, .tool-label, .section h3 { position: relative; }
+.info-tip { position: static; display: inline-flex; vertical-align: middle; }
+.info-tip > button {
+  width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 999px;
+  background: transparent; color: var(--text-3);
+}
+.info-tip > button:hover:not(:disabled), .info-tip > button:focus-visible, .info-tip.open > button { color: var(--text); background: var(--bg-card); }
+.info-tip-text {
+  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-width: 360px;
+  padding: var(--space-2) var(--space-3); border-radius: var(--btn-radius); border: 1px solid var(--border);
+  background: var(--bg-input); color: var(--text-2); box-shadow: var(--shadow-menu);
+  font-size: var(--type-xs); line-height: 1.5; font-weight: var(--weight-regular); white-space: normal;
+  opacity: 0; visibility: hidden; pointer-events: none;
+  transition: opacity var(--dur-1) var(--ease-standard), visibility var(--dur-1);
+}
+.field > .info-tip > .info-tip-text { top: 28px; }
+.info-tip:hover > .info-tip-text, .info-tip:focus-within > .info-tip-text, .info-tip.open > .info-tip-text { opacity: 1; visibility: visible; pointer-events: auto; }
+.section h3 .info-tip { margin-left: var(--space-1); }
+
+.section { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-4); }
+.section h3 { display: flex; align-items: center; font-size: var(--type-xs); font-weight: var(--weight-strong); margin: 0 0 var(--space-4); color: var(--text-2); }
+.section > button + button { margin-left: var(--space-1); }
+.section > .primary { max-width: 100%; white-space: normal; }
+
+.disclosure > summary { font-size: var(--type-xs); cursor: pointer; color: var(--text-2); font-weight: var(--weight-strong); margin-bottom: var(--space-4); }
+/* A closed group keeps the gap an open one gets from its last field, so the heading does not sit
+   on the field that follows it. */
+.disclosure:not([open]) > summary { margin-bottom: 0; }
+.disclosure:not([open]) { margin-bottom: var(--space-4); }
+.disclosure > div > .section:first-child { margin-top: 0; }
+#inspector-body .disclosure > div { min-width: 0; margin-inline-start: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--border); }
+#inspector-body .disclosure > div > .section:first-child { border-top: 0; padding-top: 0; }
+
+.help { font-size: var(--type-xs); line-height: 1.5; color: var(--text-2); }
+.link-button { font-size: var(--type-xs); margin-left: var(--space-5); border: 0; background: transparent; text-decoration: underline; color: var(--text-2); min-height: 0; padding: 0; }
+.link-button:hover:not(:disabled) { background: transparent; color: var(--text); }
+.provider-warning { margin: 0 0 var(--space-3); }
+
+/* A validation problem is an error, and errors are the one colour the chrome allows. */
+.validation { font-size: var(--type-xs); line-height: 1.5; padding-left: 18px; color: var(--err-text); }
+.valid { color: var(--text-2); font-size: var(--type-xs); }
+.danger { color: var(--err-text); }
+
+.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.model-context { font-size: var(--type-xs); }
+.modifier-badge {
+  display: inline-block; font-size: var(--type-xs); border-radius: var(--space-1); background: var(--bg-card);
+  color: var(--text-2); padding: 2px 6px; margin: 2px 2px 6px 0;
+}
+.cycle-help { padding: var(--space-3); border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--btn-radius); margin-bottom: var(--space-3); }
+.cycle-help p { font-size: var(--type-xs); line-height: 1.5; }
+
+/* The status strip -------------------------------------------------------- */
+
+.status {
+  height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+  gap: var(--space-4); border-top: 1px solid var(--border); padding: 0 var(--space-3); font-size: var(--type-xs);
+  color: var(--text-2); background: var(--bg-surface);
+}
+.status button {
+  border: 0; background: transparent; font-size: var(--type-xs); height: 24px; min-height: 0; padding: 0 var(--space-2);
+  border-radius: var(--row-radius); color: var(--text-2);
+}
+.status button:hover:not(:disabled) { background: var(--bg-card); color: var(--text); }
+.status.error { color: var(--err-text); }
+#status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.status-actions { display: flex; gap: var(--space-1); align-items: center; }
+
+/* Connections ------------------------------------------------------------- */
+
+/* The caption's halo is the canvas ground, so a crossing connection stays legible. */
+.edge-caption { font-size: var(--type-xs); font-weight: var(--weight-strong); paint-order: stroke; stroke: var(--canvas-bg); stroke-width: 5px; stroke-linejoin: round; }
+/* An outcome's pill rides its connection. */
+.edge-pill text { font-family: var(--font-ui); font-size: var(--type-xs); font-weight: var(--weight-strong); }
+#edges [role="button"]:focus { outline: none; }
+/* Focus is shown by the traced path, caption and endpoint outlines. */
+.node.edge-source { outline: 1px solid var(--accent); outline-offset: 3px; }
+.node.edge-target { outline: 2px solid var(--accent); outline-offset: 3px; }
+.node.route-target { outline: 1px dashed var(--text-3); outline-offset: 4px; cursor: crosshair; }
+.node.route-target:hover { outline-style: solid; }
+.picking-destination .canvas-hint { color: var(--text); border-color: var(--accent); }
+
+/* The rail's own scrolling and resizing ---------------------------------- */
+
+/* Keep sidebar resizing outside its scrolling content. */
+#rail-resize { position: absolute; z-index: 5; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
+#rail-resize:hover, #rail-resize:focus-visible, .rail.is-resizing #rail-resize { background: var(--accent-soft); }
+.rail.is-resizing { user-select: none; }
+.rail-body, #graphs { min-height: 0; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
+.rail-body.is-scrolling, #graphs.is-scrolling, .rail-body:focus-visible, #graphs:focus-visible { scrollbar-color: var(--text-3) transparent; }
+.rail-body::-webkit-scrollbar, #graphs::-webkit-scrollbar { width: 6px; height: 0; }
+.rail-body::-webkit-scrollbar-track, #graphs::-webkit-scrollbar-track { background: transparent; }
+.rail-body::-webkit-scrollbar-thumb, #graphs::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
+.rail-body.is-scrolling::-webkit-scrollbar-thumb, #graphs.is-scrolling::-webkit-scrollbar-thumb,
+.rail-body:focus-visible::-webkit-scrollbar-thumb, #graphs:focus-visible::-webkit-scrollbar-thumb { background: var(--text-3); }
+.rail-body::-webkit-scrollbar-button, #graphs::-webkit-scrollbar-button { display: none; }
+#graphs { max-height: 150px; overflow: auto; }
+@media (forced-colors: active) { .rail-body, #graphs { scrollbar-color: auto; } }
+
+/* Narrow windows --------------------------------------------------------- */
+
+@media (max-width: 1180px) {
+  #inspector {
+    position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--panel), calc(100% - 24px));
+    box-shadow: var(--shadow-panel);
+  }
+  .graph-heading > span:not(.chip) { display: none; }
+}
+@media (min-width: 1181px) { #inspector { width: var(--panel); } }
+
+@media (max-width: 760px) {
+  .rail { width: 180px; }
+  .chrome { padding: 0 var(--space-2); }
+  .chrome-actions .studio-secondary { padding: 0 var(--space-2); }
+  .chrome-actions .studio-secondary > span { display: none; }
+  .graph-heading { font-size: var(--type-xs); }
+  .canvas-toolbar { bottom: var(--space-2); left: var(--space-2); transform: none; gap: 0; }
+  .rail-body { padding: var(--space-2) 6px; }
+  .rail-footer { padding: 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { scroll-behavior: auto !important; transition-duration: var(--dur-1) !important; animation: none !important; }
+}

package/dist/src/graph-ui/theme.js

@@ -0,0 +1,92 @@
+/*
+ * The Graph Studio's appearance.
+ *
+ * The editor is a surface of the same product as the desktop client, and the client follows the
+ * operating system's appearance unless its user picks one, so the editor does the same: it paints
+ * the system's appearance from the first frame and follows it while it is open. The reader of a
+ * standalone editor can pin the other appearance from the status bar for as long as the editor is
+ * open.
+ *
+ * The desktop client owns the appearance when the editor is framed inside it: the host sends the
+ * theme it wants, and the editor applies it. Nothing but the theme name crosses the frame.
+ */
+(() => {
+  'use strict';
+  const STORAGE = 'andorra.graph.theme';
+  const root = document.documentElement;
+  const embedded = typeof window !== 'undefined' && !!window.parent && window.parent !== window;
+
+  // A pinned choice survives the editor's own reloads. The server binds a random port per launch,
+  // so web storage is per launch: the choice is a session's preference, not a machine's.
+  const readChoice = () => {
+    try {
+      const value = localStorage.getItem(STORAGE);
+      return value === 'dark' || value === 'light' ? value : undefined;
+    } catch { return undefined; }
+  };
+  const writeChoice = value => {
+    try { localStorage.setItem(STORAGE, value); } catch { /* A blocked store still changes this page. */ }
+  };
+
+  // A framed editor belongs to the desktop client, which names the appearance. A choice stored by
+  // a standalone session is therefore not its choice. Until the host's message arrives it paints
+  // the system's appearance: the client sets its window's appearance to the one it resolved, so the
+  // frame's media query already answers with the client's choice.
+  let choice = embedded ? undefined : readChoice();
+  const media = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : undefined;
+  const system = () => (media && !media.matches ? 'light' : 'dark');
+  const resolved = () => choice ?? system();
+
+  const paint = theme => {
+    if (root.dataset.theme !== theme) root.dataset.theme = theme;
+    const toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+      // The button names the appearance it switches to, and it is hidden when the desktop client
+      // owns the appearance.
+      toggle.hidden = embedded;
+      toggle.textContent = theme === 'dark' ? 'Light' : 'Dark';
+      toggle.setAttribute('aria-label', theme === 'dark'
+        ? 'Switch the graph editor to the light appearance'
+        : 'Switch the graph editor to the dark appearance');
+    }
+    // The canvas draws its connection colours from the tokens, so a change repaints them.
+    document.dispatchEvent(new CustomEvent('andorra:themechange', { detail: theme }));
+  };
+
+  // The theme is set before the first paint, so the editor never flashes another surface first.
+  paint(resolved());
+
+  const wire = () => {
+    const toggle = document.getElementById('theme-toggle');
+    if (!toggle) return;
+    toggle.onclick = () => {
+      const next = resolved() === 'dark' ? 'light' : 'dark';
+      choice = next;
+      writeChoice(next);
+      paint(next);
+    };
+    paint(resolved());
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire);
+  else wire();
+
+  // An unpinned editor follows the system while it is open.
+  const followSystem = () => { if (choice === undefined) paint(resolved()); };
+  if (media && typeof media.addEventListener === 'function') media.addEventListener('change', followSystem);
+  else if (media && typeof media.addListener === 'function') media.addListener(followSystem);
+
+  // The host's theme wins over a pinned choice: the editor framed in the desktop client must match
+  // the window around it.
+  window.AndorraTheme = {
+    set: theme => {
+      if (theme !== 'dark' && theme !== 'light') return;
+      choice = theme;
+      writeChoice(theme);
+      paint(theme);
+    },
+    resolved,
+    choice: () => choice,
+    embedded,
+  };
+})();