Editor: composition structure wireframe (read-only)

2026-08-08 02:02:33 +00:00 · 2026-06-29 12:39:59 +03:00
parent 345ecef5a3
commit 57604a80a6
13 changed files with 774 additions and 17 deletions
@@ -0,0 +1,130 @@
+.wrap {
+  display: inline-flex;
+}
+
+/* Disclosure panel — portaled to body, positioned `fixed` by usePopover. The shared
+   disclosure-popover surface (arch 10): elevated --layer-01, hairline border, --radius. */
+.pop {
+  position: fixed;
+  z-index: 1000;
+  width: 264px;
+  max-height: 60vh;
+  overflow: auto;
+  padding: var(--space-4);
+  background: var(--layer-01);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.title {
+  margin: 0 0 var(--space-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+}
+
+.tree {
+  font-size: 12px;
+}
+
+/* Bare wireframe: a crisp box, fill only the canvas. Passive structure, so the
+   boxes carry the function (drop targets, later) — `--border-strong`, no chrome. */
+.node {
+  border: 1px solid var(--border-strong);
+  background: var(--bg);
+}
+.container {
+  padding: var(--space-2);
+  cursor: pointer;
+}
+.leaf {
+  min-height: 48px;
+  cursor: pointer;
+}
+.node:hover {
+  border-color: var(--text-secondary);
+}
+/* Selection mirrors the library's active-row language (arch 09 §4). */
+.node.selected {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.leaf.selected {
+  background: var(--accent-soft);
+}
+.node:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+}
+
+.children {
+  gap: var(--space-2);
+}
+.row {
+  display: flex;
+  flex-direction: row;
+}
+.row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.col {
+  display: flex;
+  flex-direction: column;
+}
+/* General concat wraps into a grid (honors `columns`). */
+.grid {
+  display: flex;
+  flex-flow: row wrap;
+}
+.grid > * {
+  flex: 1 1 84px;
+}
+/* Layer: children share one plotting area — overlap them in a single grid cell so
+   the stack reads as depth, not as siblings. */
+.layered {
+  display: grid;
+  padding: 0 14px 14px 0;
+}
+.layered > * {
+  grid-area: 1 / 1;
+}
+.layered > *:nth-child(2) {
+  transform: translate(7px, 7px);
+}
+.layered > *:nth-child(3) {
+  transform: translate(14px, 14px);
+}
+.layered > *:nth-child(n + 4) {
+  transform: translate(21px, 21px);
+}
+
+/* Facet / repeat: one authored child stands for many generated cells — a card
+   peeking out behind hints at the multiples. */
+.generated {
+  position: relative;
+}
+.generated::before {
+  content: '';
+  position: absolute;
+  inset: 5px -5px -5px 5px;
+  border: 1px solid var(--border);
+  z-index: -1;
+}
+
+.caption {
+  margin: var(--space-3) 0 0;
+  min-height: 1.4em;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.caption code {
+  font-family: var(--font-mono);
+  color: var(--text);
+}
+.muted {
+  color: var(--text-placeholder);
+}