@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/modes/material.css

@@ -0,0 +1,1201 @@
+/* The material nodes: the graph and the object's hole in the canvas cell, the Project's graphs in the left column, the way back and the graph's verbs in the canvas bar, then the node cards, the source view and the setup screen. */
+
+/* ---- the material nodes -------------------------------------------------- */
+/* A SHADER IS THE WORK, FOR AS LONG AS YOU ARE DOING IT, so the graph takes
+ * the canvas. It lives in the docked frame like every mode (cellSlots.tsx):
+ * the Project's graphs in the left column's mode slot, the graph and the
+ * object in the canvas cell, the way back and the graph's verbs in the canvas
+ * bar. The inspector shows the material's own rows and the timeline stays
+ * under the graph, so an exposed control can be keyed and scrubbed against.
+ * Nothing here hides a cell and nothing here floats.
+ *
+ * ── HOW THE OBJECT IS STILL THE REAL ONE ────────────────────────────────
+ *
+ * The preview is not a picture of the mesh, it IS the mesh: the stage iframe
+ * is pinned `inset: 0` behind the shell and keeps rendering the isolated
+ * layer, which is what makes "preview === export" hold here as everywhere
+ * else. So the right of the canvas cell is a HOLE (`.stage-window`,
+ * shell.css): it paints nothing and takes no pointer, and `measureInset` hands
+ * the stage its rect as the box to frame into. */
+
+/* ---- the canvas cell ------------------------------------------------------- */
+/* The cell's one row: the graph, then the hole. TRANSPARENT and pointer-less,
+   the canvas cell's own recipe, because its box spans the hole: hit testing
+   follows the box, so a press over the object would land here and the drag
+   that orbits it (StageApp's `orbits`) would never reach the stage. The graph
+   opts back in; the hole stays out.
+
+   THE HOLE'S WIDTH is the stored preview width (`--material-col-w`, which App
+   writes from `materialColumnWidth`), never more than half the cell. The hole
+   and the seam's handle read the one variable, and both resolve its 50%
+   against this box (the hole's containing block, and the handle's), so the
+   edge the author grabs and the edge they see cannot part. */
+.material-workspace {
+  --material-preview-w: min(var(--material-col-w, 560px), 50%);
+  --material-grid-dot: var(--line);
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+/* The graph paints its own ground and takes the pointer. Its right border is
+   the seam, one hairline against the hole. */
+.material-graph-region {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  background: var(--surface-app);
+  border-right: 1px solid var(--line);
+  pointer-events: auto;
+}
+
+/* The compile error strip (`.code-studio-strip`, modes/code.css) over the top
+   of the graph, which fills the region absolutely. Above React Flow's own
+   panels, below the node palette. */
+.material-graph-region > .code-studio-strip {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 6;
+  overflow-wrap: anywhere;
+}
+
+/* THE HOLE. No background, no backdrop, nothing: anything opaque here,
+   including a "subtle" tint, is a lid on the only live thing on screen. The
+   material's own fields are inspector rows, so the hole is the whole right of
+   the cell: a shader editor shows the shader and the thing it is on. */
+.material-preview-hole {
+  flex: none;
+  width: var(--material-preview-w);
+  min-width: 0;
+}
+
+/* THE SEAM'S HANDLE: 8px centred on the hole's left edge, which is the
+   graph's border, from the right like the hole. It paints only on hover and
+   is the one thing over the hole's edge that takes a pointer. A local order
+   inside the canvas cell: over the graph, under the node palette (8). */
+.material-workspace-resize {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: var(--material-preview-w);
+  z-index: 3;
+  width: 8px;
+  margin-right: calc(-1 * var(--space-2));
+  cursor: col-resize;
+  touch-action: none;
+  pointer-events: auto;
+  background: transparent;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.material-workspace-resize:hover {
+  background: var(--accent-soft);
+}
+
+/* ---- the canvas bar ---------------------------------------------------------- */
+/* The bar slot's whole row, laid out like the canvas bar: the way out, the
+   trail, the slot and the compile status lead, and the TSL toggle, the graph's
+   zoom and Recenter are pushed right. The trail is the part that gives; no
+   control shrinks. */
+.material-bar {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--canvas-bar-gap);
+  min-width: 0;
+  height: 100%;
+}
+
+/* The back chip's look with only its chevron, so the inset is even on both
+   sides. Two classes, so it outranks `.back-chip` on specificity. */
+.back-chip.material-back {
+  flex: none;
+  padding: 0 var(--space-2);
+}
+
+/* The trail: Project › Shot › Mesh › Material › functions. The last crumb is
+   where you are, the ones before it are one click away. One line that
+   ellipsizes each rung. */
+.material-workspace-crumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: var(--type-sm);
+}
+
+.material-bar > .material-workspace-crumbs {
+  flex: 0 1 auto;
+}
+
+.material-workspace-crumbs .crumb {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 180px;
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--ink-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.material-workspace-crumbs .crumb + .crumb::before {
+  content: "›";
+  margin-right: var(--space-2);
+  color: var(--ink-3);
+}
+
+.material-workspace-crumbs .crumb:hover {
+  color: var(--ink-1);
+}
+
+.material-workspace-crumbs .crumb.is-current {
+  color: var(--ink-1);
+  cursor: default;
+}
+
+.material-slot-picker {
+  flex: none;
+  min-width: 132px;
+}
+
+.material-compile-status,
+.material-add-parameter {
+  display: flex;
+  align-items: center;
+}
+
+.material-compile-status {
+  flex: none;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  white-space: nowrap;
+}
+
+.material-compile-status > span {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--ink-3);
+}
+
+.material-compile-status.is-error {
+  color: var(--danger-ink);
+}
+
+.material-compile-status.is-error > span {
+  background: var(--danger);
+}
+
+.material-compile-status.is-compiling > span {
+  background: var(--accent);
+}
+
+.material-bar-end {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--canvas-bar-gap);
+  margin-left: auto;
+}
+
+/* The graph canvas portals its zoom in here (MaterialGraphCanvas.tsx). The
+   slot is no box of its own, so while the graph is off screen (the TSL view,
+   the canvas still loading) it costs the bar no gap. */
+.material-zoom-slot {
+  display: contents;
+}
+
+/* ---- the library, in the left column ---------------------------------------- */
+/* The slot's one flexible row (left-column.css), bounded down to the list's
+   `.rail-scroll` so the list scrolls inside the column. */
+.material-library {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* THE COLUMN HEAD, one panel head tall with its hairline, so its bottom edge
+   runs on with the canvas bar's and the right column head's. */
+.material-library-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: var(--panel-head-h);
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.material-library-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A group's name: caps micro in the third ink, inset like the rows. */
+.material-library-group {
+  margin: 0;
+  padding: var(--space-5) var(--space-6) var(--space-2);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  line-height: var(--leading-tight);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+/* The inspector's one empty state, inset like every row of the column. */
+.material-library .insp-empty {
+  padding: var(--space-1) var(--space-6) var(--space-3);
+}
+
+.material-library-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* FULL-BLEED ROWS, the column's: hover one fill step, the graph on the canvas
+   the accent band with its name in accent ink. The current row carries a
+   `:hover` twin so it outranks the hover by a class. */
+.material-saved-row {
+  display: flex;
+  align-items: stretch;
+}
+
+.material-saved-row:hover {
+  background: var(--fill-hover);
+}
+
+.material-saved-row.is-current,
+.material-saved-row.is-current:hover {
+  background: var(--accent-soft);
+}
+
+.material-saved-row.is-current strong {
+  color: var(--accent-ink);
+}
+
+.material-saved-apply {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--row-h);
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* A row a press would not change (MaterialLibrary.tsx): the graph on the
+   canvas, or the one the whole model already wears. It stays focusable, so
+   its name and title still read; it just offers no press. */
+.material-saved-apply[aria-disabled="true"] {
+  cursor: default;
+}
+
+/* Inset, because the rows run edge to edge in a column that clips. */
+.material-saved-apply:focus-visible,
+.material-saved-delete:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
+}
+
+.material-saved-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.material-saved-text strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+}
+
+.material-saved-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-tight);
+}
+
+/* The mark or the orb sits centred in the row's 18px icon column; the orb is
+   drawn for a card and comes down to the icon size here. */
+.material-saved-apply > .material-model-mark,
+.material-saved-apply > .material-starter-orb {
+  justify-self: center;
+}
+
+.material-saved-apply > .material-starter-orb {
+  width: 16px;
+  height: 16px;
+}
+
+.material-saved-delete {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h);
+  margin-right: var(--space-2);
+  color: var(--ink-3);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.material-saved-delete:hover {
+  color: var(--danger-ink);
+}
+
+/* ---- the material's rows, in the inspector (MaterialSection.tsx) ------------ */
+.material-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  min-width: 0;
+  margin-bottom: var(--space-4);
+}
+
+.material-eyebrow {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  line-height: var(--leading-tight);
+  text-transform: uppercase;
+}
+
+.material-empty-copy,
+.material-legacy-note {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+}
+
+.material-add-parameter {
+  flex: 0 0 auto;
+  gap: var(--space-2);
+}
+
+.material-add-parameter .material-parameter-type {
+  height: var(--control-h);
+  max-width: 82px;
+  min-width: 82px;
+  padding-left: var(--space-3);
+}
+
+/* The per-mesh rows and each definition's fields are PropRows, 6px apart: the
+   inspector's row rhythm. */
+.material-parameter-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.material-parameter-definitions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+
+.material-parameter-definition {
+  overflow: hidden;
+  background: var(--surface-secondary);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-md);
+}
+
+.material-parameter-definition summary {
+  min-height: var(--control-h);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  cursor: pointer;
+  list-style: none;
+}
+
+.material-parameter-definition summary::-webkit-details-marker {
+  display: none;
+}
+
+.material-parameter-definition summary::before {
+  content: "›";
+  color: var(--ink-3);
+}
+
+.material-parameter-definition[open] summary::before {
+  content: "⌄";
+}
+
+.material-parameter-definition summary > span {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-sm);
+}
+
+.material-parameter-definition summary small {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.material-parameter-definition-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-top: 1px solid var(--line-soft);
+}
+
+/* The card's one destructive verb, on the house row of buttons
+   (`.insp-buttons`, widgets.css); this places the row only. */
+.material-delete-parameter {
+  margin-top: var(--space-2);
+}
+
+/* The clamp offer's two answers, under its sentence. The row itself is the
+   house row of buttons (`.insp-buttons`, widgets.css); this places it only. */
+.material-parameter-clamp-actions {
+  margin-top: var(--space-2);
+}
+
+.material-problem-list {
+  padding: var(--space-5);
+  color: var(--danger-ink);
+  font-size: var(--type-micro);
+}
+
+.material-problem-list p {
+  margin: 0 0 var(--space-3);
+  line-height: var(--leading-body);
+}
+
+.material-problem-list code {
+  color: inherit;
+}
+
+/* Graph canvas furniture. React Flow owns pan/zoom; the cards and sockets use
+   the same border/surface ladder as the rest of the editor. */
+.material-graph-canvas {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  outline: none;
+}
+
+.material-graph-canvas.is-loading {
+  display: grid;
+  place-items: center;
+}
+
+.material-graph-canvas:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+/* AT THE CURSOR. `left`/`top` are written inline by the palette from the point
+   the request carried, so the only thing left here is the box it draws. The
+   translate keeps it from opening directly under the pointer, where its first
+   row would be armed by the release of the click that opened it. */
+.material-node-palette {
+  position: absolute;
+  z-index: 8;
+  transform: translate(6px, 6px);
+  width: 228px;
+  max-height: min(480px, calc(100% - 54px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-float);
+}
+
+.material-node-search {
+  flex: 0 0 34px;
+  width: 100%;
+  padding: 0 var(--space-5);
+  font: inherit;
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  outline: 0;
+}
+
+.material-node-palette-scroll {
+  overflow: auto;
+  padding: var(--space-3);
+}
+
+.material-node-category h3 {
+  margin: var(--space-4) 0 var(--space-1);
+  padding: 0 var(--space-2);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.material-node-category:first-child h3 {
+  margin-top: 0;
+}
+
+/* The keyboard's row and the pointer's row are ONE state, so ArrowDown and a
+   hover cannot both look current at the same time. */
+.material-node-category button.is-active {
+  background: var(--fill-rest);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.material-node-category button {
+  width: 100%;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-3);
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.material-node-category button:hover:not(:disabled) {
+  background: var(--fill-rest);
+}
+
+.material-node-category button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.material-node-category button small {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.material-node {
+  min-width: 168px;
+  overflow: hidden;
+  color: var(--ink-1);
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--surface-app) 65%, transparent);
+  font-family: var(--font-sans);
+  font-size: var(--type-micro);
+}
+
+.material-node.is-selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+.material-node-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  height: 30px;
+  padding: 0 var(--space-4);
+  background: var(--fill-rest);
+  border-bottom: 1px solid var(--line);
+  font-weight: 600;
+}
+
+.material-node-title small {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+/* The validator's one sentence, on the card it is about. The panel below the
+   canvas still lists them all; this is the half that says WHICH card. */
+.material-node.is-problem {
+  border-color: var(--danger);
+}
+
+.material-node-problem {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  color: var(--danger-ink);
+  border-bottom: 1px solid var(--line);
+  line-height: var(--leading-tight);
+}
+
+/* The inline widgets. `nodrag nowheel` are on the element in TSX, not here:
+   React Flow reads them as class names off the event target. The card's
+   inset is the socket rows' 8px, so a field, a title and a socket label
+   start on one edge. */
+.material-node-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4) var(--space-1);
+}
+
+.material-node-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.material-node-field > * {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.material-node-field.is-vector {
+  gap: var(--space-1);
+}
+
+.material-node-preview {
+  display: grid;
+  place-items: center;
+  padding: var(--space-3) var(--space-4) var(--space-1);
+}
+
+.material-node-preview-canvas {
+  width: 96px;
+  height: 96px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--fill-rest);
+}
+
+/* A thumbnail that has been asked for and not yet answered reads as a plate
+   rather than as a hole — the request is one GPU readback away, and a card
+   that blinked empty for it would be worse than one that waits quietly. */
+.material-node-preview-canvas.is-waiting {
+  opacity: 0.4;
+}
+
+.material-node-preview-message {
+  max-width: 150px;
+  color: var(--danger-ink);
+  font-size: var(--type-micro);
+  line-height: var(--leading-tight);
+  text-align: center;
+}
+
+.material-node-sockets {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-5);
+  padding: var(--space-3) 0 var(--space-4);
+}
+
+.material-node-inputs:empty,
+.material-node-outputs:empty {
+  display: none;
+}
+
+.material-socket-row {
+  position: relative;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  white-space: nowrap;
+}
+
+.material-socket-row.is-output {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* ── the three non-card node kinds ─────────────────────────────────────────
+   A group is a React Flow SUBFLOW, so its box is sized by the inline style
+   `flowModel.ts` writes and this only paints it. `pointer-events` stays on so
+   the box itself can be grabbed; its members sit above it in the subflow's own
+   stacking, which is what makes dragging the box carry them and dragging a
+   member move only that one. */
+.material-group {
+  width: 100%;
+  height: 100%;
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-panel);
+}
+
+.material-group-title {
+  padding: var(--space-2) var(--space-3);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+}
+
+.material-comment {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-left: 2px solid var(--ink-3);
+  border-radius: var(--radius-md);
+}
+
+.material-comment-body {
+  width: 100%;
+  height: 100%;
+  padding: var(--space-3);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+}
+
+.material-comment-body textarea {
+  width: 100%;
+  height: 100%;
+  resize: none;
+}
+
+/* PUNCTUATION, not a card: 14px, no title bar, nothing to look inside. */
+.material-reroute {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+}
+
+/* ── SOCKETS: SHAPE IS THE TYPE, INK IS THE STATE ──────────────────────────
+   The per-type COLOURS that used to live here are gone, and deliberately: this
+   design system is monochrome plus one blue, and nine socket types would be
+   nine hues none of which is a studio colour. `socketGlyph.ts` carries the
+   argument in full and `materialSocketGlyph.test.ts` holds this file to it —
+   every class below paints from `--text*`, `--border*` or `--accent*` and
+   nothing else.
+
+   Scoped under the canvas rather than doubled with `.react-flow__handle`,
+   which is a shorter way to win the same specificity. */
+.material-graph-canvas .material-socket {
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  color: var(--ink-2);
+  background: currentColor;
+  border: 0;
+}
+
+.material-graph-canvas .material-socket.is-connected {
+  color: var(--ink-1);
+}
+
+.material-graph-canvas .material-socket-circle {
+  border-radius: var(--radius-full);
+}
+
+.material-graph-canvas .material-socket-circle-dotted {
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: 1.5px dotted currentColor;
+}
+
+.material-graph-canvas .material-socket-triangle {
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+.material-graph-canvas .material-socket-diamond {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+.material-graph-canvas .material-socket-square {
+  border-radius: var(--radius-2xs);
+}
+
+.material-graph-canvas .material-socket-square-round {
+  border-radius: var(--radius-2xs);
+}
+
+.material-graph-canvas .material-socket-ring {
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: 2px solid currentColor;
+}
+
+/* The second ring is an `outline`, not an inset shadow: a shadow would need the
+   card's surface colour to draw the gap, and a surface token is not one of the
+   three families a socket may paint from. */
+.material-graph-canvas .material-socket-ring-double {
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: 1.5px solid currentColor;
+  outline: 1.5px solid currentColor;
+  outline-offset: 1px;
+}
+
+.material-graph-canvas .material-socket-circle-dashed {
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: 1.5px dashed currentColor;
+}
+
+/* The two live-drag answers. Ringed means "let go here"; dimmed means the type
+   index already refused it, said before the drop rather than after. */
+.material-graph-canvas .material-socket.is-droppable {
+  color: var(--accent-ink);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.material-graph-canvas .material-socket.is-blocked {
+  opacity: 0.45;
+}
+
+/* HOVER, BEFORE ANY DRAG. The two rules above answer a wire already in hand;
+   this one answers the pointer merely resting on a socket, which is where an
+   author asks "can I grab this". Ink and a ring, no hue: the drag-time answers
+   own `--accent`, and a socket that lit up blue on hover would say "droppable"
+   to an author holding nothing. The cursor is the other half of the sentence. */
+.material-graph-canvas .material-socket:hover {
+  color: var(--ink-1);
+  box-shadow: 0 0 0 3px var(--line);
+  cursor: crosshair;
+}
+
+.material-graph-canvas .react-flow__edge-path {
+  stroke: var(--ink-3);
+  stroke-width: 1.5;
+}
+
+/* A WIRE UNDER THE POINTER. React Flow already draws a 20px invisible
+   interaction path down every edge, so the target was never the problem — the
+   answer was. One ink step and half a pixel is enough to say "this one", and
+   leaves `--accent` to mean selected. */
+.material-graph-canvas .react-flow__edge.material-edge:hover .react-flow__edge-path {
+  stroke: var(--ink-2);
+  stroke-width: 2;
+}
+
+/* A wire reached by KEYBOARD gets the hover's step. React Flow's own focus
+   grey used to paint it, and that rule now ranks below the chrome (vendor
+   layer), so without this a tabbed-to wire showed no cue at all. */
+.material-graph-canvas .react-flow__edge.material-edge:focus-visible .react-flow__edge-path {
+  stroke: var(--ink-2);
+  stroke-width: 2;
+}
+
+/* The wire a dragged card would SPLICE INTO if it were dropped now. Full ink
+   and visibly thicker, because this one predicts an edit rather than reporting
+   a hover, and the author is looking at the card they are dragging. */
+.material-graph-canvas .react-flow__edge.material-edge.is-splice-target .react-flow__edge-path {
+  stroke: var(--ink-1);
+  stroke-width: 2.5;
+}
+
+.material-graph-canvas .react-flow__edge.selected .react-flow__edge-path,
+.material-graph-canvas .react-flow__edge.material-edge.is-selected .react-flow__edge-path {
+  stroke: var(--accent);
+}
+
+/* The box a dragged card would JOIN. Its border is dashed at rest, so going
+   solid is the whole signal — no fill, because a group box tinting under a
+   card the author is still holding reads as a drop that already happened. */
+.material-graph-canvas .react-flow__node.is-drop-target .material-group {
+  border-style: solid;
+  border-color: var(--ink-2);
+}
+
+/* The one resize corner on a selected box or note. Deliberately small and
+   quiet: it is a grip, not a control, and there is exactly one of it. */
+.material-graph-canvas .material-resize-handle {
+  width: 9px;
+  height: 9px;
+  background: var(--surface-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-2xs);
+}
+
+/* The overview. Furniture under a graph being read, so it is the same panel
+   surface as everything else and its cards are ink rather than colour: a
+   minimap in a second palette is a second thing competing for the eye. Docked
+   furniture, not a floating island: a hairline and a small radius, no shadow,
+   inset from the corner by the cell's own 12px. */
+.material-graph-canvas .react-flow__minimap {
+  margin: var(--space-6);
+  overflow: hidden;
+  background: var(--surface-panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  box-shadow: none;
+}
+
+.material-graph-canvas .react-flow__minimap-node {
+  fill: var(--ink-3);
+  stroke: none;
+}
+
+.material-graph-canvas .react-flow__minimap-node.selected {
+  fill: var(--accent);
+}
+
+.material-graph-canvas .react-flow__minimap-mask {
+  fill: var(--surface-app);
+  fill-opacity: 0.55;
+}
+
+/* React Flow's own selection rectangle, in the one signal colour. */
+.material-graph-canvas .react-flow__selection {
+  background: var(--accent-quiet);
+  border: 1px solid var(--accent);
+}
+
+.material-source-view {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.material-source-heading {
+  flex: 0 0 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: 0 var(--space-5) 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-panel);
+}
+
+.material-source-heading > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.material-source-heading strong {
+  font-size: var(--type-md);
+}
+
+.material-source-heading span {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.material-source-view pre {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: var(--space-7);
+  overflow: auto;
+  color: var(--ink-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  line-height: var(--leading-body);
+  tab-size: 2;
+  white-space: pre;
+  background: var(--surface-app);
+}
+
+.material-source-error {
+  margin: var(--space-6);
+  padding: var(--space-5);
+  color: var(--danger-ink);
+  background: color-mix(in srgb, var(--danger) 8%, var(--surface-panel));
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
+  border-radius: var(--radius-md);
+}
+
+/* ---- the setup screen ------------------------------------------------------ */
+/* The canvas cell while the mesh has no graph: a focused decision surface
+   with its own ground, taking the pointer back from the cell. There is no
+   hole yet, because there is no material to preview. A size container, so
+   the starters stack by the cell's width rather than the window's. */
+.material-setup {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-8);
+  background: var(--surface-app);
+  pointer-events: auto;
+  container-type: inline-size;
+}
+
+.material-setup-intro {
+  max-width: 620px;
+}
+
+.material-setup-intro h2 {
+  margin: var(--space-3) 0 var(--space-3);
+  font-size: var(--type-xl);
+  line-height: var(--leading-tight);
+  font-weight: 600;
+}
+
+.material-setup-intro > p:not(.material-legacy-note) {
+  margin: 0;
+  max-width: 580px;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
+}
+
+/* Two classes, so its air outranks the shared `margin: 0` above on
+   specificity rather than on position. */
+.material-setup-intro > .material-legacy-note {
+  margin-top: var(--space-6);
+  padding: var(--space-4) var(--space-5);
+  border-left: 2px solid var(--warn);
+  background: var(--surface-panel);
+}
+
+.material-starters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-4);
+  max-width: 760px;
+  margin-top: var(--space-8);
+}
+
+.material-starter-card {
+  min-height: 136px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-6);
+  padding: var(--space-6);
+  color: var(--ink-1);
+  background: var(--surface-panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.material-starter-card:hover {
+  background: var(--surface-secondary);
+  border-color: var(--line-strong);
+}
+
+.material-starter-card > span:last-child {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.material-starter-card strong {
+  font-size: var(--type-md);
+  font-weight: 600;
+}
+
+.material-starter-card small {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-body);
+}
+
+.material-starter-orb {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-full);
+  background: var(--ink-2);
+  box-shadow: inset -7px -8px 12px color-mix(in srgb, var(--surface-app) 48%, transparent);
+}
+
+.material-starter-orb.is-standard {
+  background: var(--ink-3);
+}
+
+.material-starter-orb.is-glass {
+  background: var(--surface-secondary);
+  border: 1px solid var(--ink-2);
+}
+
+.material-model-mark {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: var(--ink-3);
+}
+
+.material-model-mark.is-standard {
+  background: var(--ink-2);
+}
+
+.material-model-mark.is-physical {
+  border: 1px solid var(--ink-2);
+  background: var(--surface-secondary);
+}
+
+@container (max-width: 560px) {
+  .material-starters {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* The model's triangle count, on its outline row. Muted until the scene as a
+   whole crosses the soft budget, at which point every measured row tints — the
+   claim is about the SCENE, so highlighting one row would name the wrong
+   subject. */
+.layer-tris {
+  flex: 0 0 auto;
+  padding: 0 var(--space-2);
+  font-size: var(--type-micro);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+}
+
+.layer-tris.is-over-budget {
+  color: var(--warn);
+}
+
+.material-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 1px var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--warn);
+  color: var(--surface-app);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+}