@mnstry/atelier 0.2.0-alpha.13 → 0.2.0-alpha.15

package/src/graph-workspace/browser/constellation.mjs

@@ -0,0 +1,369 @@
+// Renderer dependencies are injected so Atelier carries no graph-drawing package:
+//   deps = { Sigma, Graph, EdgeArrowProgram, FA2Layout? }  (sigma 3, graphology,
+//   sigma/rendering's EdgeArrowProgram, graphology-layout-forceatlas2/worker).
+//
+// The constellation: every readable record, alive. Sigma (WebGL) draws nodes and
+// edges; two canvases around it draw zone glows (behind) and labels (in front).
+// Labels are placed by priority with collision checks, faded by zoom, and drawn
+// with a halo instead of a box. Hovering lights a neighbourhood; selecting keeps it.
+// Selecting never moves the camera. "Show on map" and "Open" are explicit.
+import { zoneGeometry, LAYOUT_WEIGHTS } from '../geometry.mjs'
+import { placeLabels, labelThreshold, labelBudget } from '../labels.mjs'
+
+const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches
+const hexToRgba = (hex, a) => { const n = parseInt(hex.slice(1, 7), 16); return `rgba(${n >> 16},${(n >> 8) & 255},${n & 255},${a})` }
+const mix = (a, b, t) => { const p = parseInt(a.slice(1, 7), 16), q = parseInt(b.slice(1, 7), 16); const c = s => Math.round(((p >> s) & 255) * (1 - t) + ((q >> s) & 255) * t); return '#' + [16, 8, 0].map(s => c(s).toString(16).padStart(2, '0')).join('') }
+
+export function createConstellation({ container, model, palette, font = 'system-ui, sans-serif', deps, reserveSelector = '[data-graph-reserve]', onSelect = () => {}, onHover = () => {}, onOpen = () => {} }) {
+  const { Sigma, Graph, EdgeArrowProgram, FA2Layout = null } = deps ?? {}
+  if (typeof Sigma !== 'function' || typeof Graph !== 'function' || typeof EdgeArrowProgram !== 'function') throw new TypeError('Inject sigma 3 (Sigma, EdgeArrowProgram) and graphology (Graph)')
+  if (model.nodes.some(n => !Number.isFinite(n.x) || !Number.isFinite(n.y))) throw new TypeError('Lay the model out first (layoutWorkspace or stored positions)')
+  const zones = new Map(model.zones.map(z => [z.id, z]))
+  const zoneColor = id => palette.zones[(zones.get(id)?.index ?? 0) % palette.zones.length]
+  const graph = new Graph({ type: 'directed', multi: true })
+  const byId = new Map(model.nodes.map(n => [n.id, n]))
+  // Label importance is the record's connection rank (0..1), so it adapts to any degree spread.
+  const ranked = [...model.nodes].sort((a, b) => b.degree - a.degree || (a.title < b.title ? -1 : 1))
+  const rank = new Map(ranked.map((n, i) => [n.id, 1 - i / Math.max(1, ranked.length - 1)]))
+  const widthCache = new Map()
+  for (const n of model.nodes) {
+    graph.addNode(n.id, { x: n.x, y: n.y, finalX: n.x, finalY: n.y, size: Math.min(10, 1.3 + 0.95 * Math.log2(1 + n.degree)), color: zoneColor(n.zone), label: n.title, zone: n.zone })
+  }
+  for (const e of model.edges) graph.addEdgeWithKey(e.id, e.source, e.target, { structural: e.kind === 'relation', kind: e.kind, type: 'line' })
+
+  const zoneCanvas = document.createElement('canvas')
+  const labelCanvas = document.createElement('canvas')
+  zoneCanvas.className = 'layer-zones'
+  labelCanvas.className = 'layer-labels'
+  zoneCanvas.setAttribute('aria-hidden', 'true')
+  labelCanvas.setAttribute('aria-hidden', 'true')
+  const sigmaHost = document.createElement('div')
+  sigmaHost.className = 'layer-sigma'
+  container.replaceChildren(zoneCanvas, sigmaHost, labelCanvas)
+
+  // Node sizes are in screen pixels; a small viewport needs proportionally smaller dots.
+  const sizeScale = () => Math.max(0.45, Math.min(1, Math.min(container.clientWidth, container.clientHeight) / 820))
+  const state = { hovered: null, selected: null, lens: null, dimAll: false, neighbours: new Set(), lit: null, zonesOn: true, linksOn: true, labelBoost: 1, focusZone: null }
+  let geometry = model.zoneGeometry ?? zoneGeometry(model)
+  let placedLabels = []
+  let frameTimes = []
+  const overlayTimes = []
+
+  function neighbourhood(id) {
+    const set = new Set([id])
+    if (id && graph.hasNode(id)) graph.forEachNeighbor(id, n => set.add(n))
+    return set
+  }
+  function activeSet() {
+    if (state.hovered) return neighbourhood(state.hovered)
+    if (state.selected) return neighbourhood(state.selected)
+    return null
+  }
+
+  let renderer = null
+  renderer = new Sigma(graph, sigmaHost, {
+    renderLabels: false,
+    renderEdgeLabels: false,
+    defaultEdgeType: 'line',
+    edgeProgramClasses: { arrow: EdgeArrowProgram },
+    zIndex: true,
+    minCameraRatio: 0.035,
+    maxCameraRatio: 1.6,
+    stagePadding: 40,
+    hideEdgesOnMove: false,
+    defaultDrawNodeHover: () => {},
+    nodeReducer(node, data) {
+      const set = activeSet()
+      const lit = state.lit
+      const res = { ...data, size: data.size * sizeScale() }
+      if (set) {
+        if (!set.has(node)) { res.color = mix(data.color, palette.dim, 0.82); res.zIndex = 0 }
+        else { res.zIndex = 2; if (node === state.hovered || node === state.selected) { res.size = data.size * 1.35; res.color = data.color } }
+      } else if (lit) {
+        if (!lit.has(node)) { res.color = mix(data.color, palette.dim, 0.86); res.zIndex = 0 } else res.zIndex = 2
+      } else if (state.focusZone && data.zone !== state.focusZone) {
+        res.color = mix(data.color, palette.dim, 0.7)
+      }
+      return res
+    },
+    edgeReducer(edge, data) {
+      const res = { ...data }
+      const [s, t] = graph.extremities(edge)
+      const set = activeSet()
+      if (set) {
+        const focus = state.hovered ?? state.selected
+        if (s !== focus && t !== focus) { res.hidden = true; return res }
+        res.color = data.structural ? palette.edgeStructural : mix(palette.edge, palette.canvas, 0.15)
+        res.size = data.structural ? 1.8 : 1
+        if (data.structural) res.type = 'arrow'
+        res.zIndex = 2
+        return res
+      }
+      if (state.lit) {
+        if (!(state.lit.has(s) && state.lit.has(t))) { res.hidden = true; return res }
+        res.color = mix(palette.edgeStructural, palette.canvas, 0.35); res.size = 1; return res
+      }
+      // Close in, link-only edges become long strands across the view; keep declared ones.
+      if (data.kind === 'link' && (!state.linksOn || state.near)) { res.hidden = true; return res }
+      // Solid colours pre-mixed with the canvas: no alpha accumulation into white.
+      res.color = data.structural ? mix(palette.edgeStructural, palette.canvas, 0.45) : data.kind === 'containment' ? mix(palette.edge, palette.canvas, 0.86) : mix(palette.edge, palette.canvas, 0.8)
+      res.size = data.structural ? 1.1 : 0.45
+      return res
+    },
+  })
+  const camera = renderer.getCamera()
+  state.near = false
+  camera.on('updated', s => { const near = s.ratio < 0.3; if (near !== state.near) { state.near = near; renderer.refresh({ skipIndexation: true }) } })
+
+  // ── Layers ──
+  function sizeCanvas(canvas) {
+    const dpr = Math.min(2, window.devicePixelRatio || 1)
+    const w = container.clientWidth, h = container.clientHeight
+    if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
+      canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr)
+      canvas.style.width = w + 'px'; canvas.style.height = h + 'px'
+    }
+    const ctx = canvas.getContext('2d')
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, w, h)
+    return { ctx, w, h }
+  }
+  function unitPixels() {
+    const a = renderer.graphToViewport({ x: 0, y: 0 }), b = renderer.graphToViewport({ x: 100, y: 0 })
+    return Math.hypot(b.x - a.x, b.y - a.y) / 100
+  }
+  let glow = null
+  function buildGlow() {
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity
+    for (const z of geometry) for (const b of z.blobs) { const r = 34 + 11 * Math.sqrt(b.weight); minX = Math.min(minX, b.x - r); maxX = Math.max(maxX, b.x + r); minY = Math.min(minY, b.y - r); maxY = Math.max(maxY, b.y + r) }
+    const size = 1400, scale = size / Math.max(maxX - minX, maxY - minY, 1)
+    const canvas = document.createElement('canvas')
+    canvas.width = Number.isFinite(minX) ? Math.ceil((maxX - minX) * scale) : 0; canvas.height = Number.isFinite(minY) ? Math.ceil((maxY - minY) * scale) : 0
+    const ctx = canvas.getContext('2d')
+    ctx.globalCompositeOperation = palette.mode === 'dark' ? 'lighter' : 'multiply'
+    for (const zone of geometry) {
+      const color = zoneColor(zone.id)
+      for (const blob of zone.blobs) {
+        const x = (blob.x - minX) * scale, y = (blob.y - minY) * scale, r = (34 + 11 * Math.sqrt(blob.weight)) * scale
+        const g = ctx.createRadialGradient(x, y, 0, x, y, r)
+        const a = (palette.mode === 'dark' ? 0.085 : 0.06) * Math.min(2.2, Math.sqrt(blob.weight))
+        g.addColorStop(0, hexToRgba(color, a)); g.addColorStop(1, hexToRgba(color, 0))
+        ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill()
+      }
+    }
+    glow = { canvas, minX, minY, maxX, maxY }
+  }
+  function drawZones() {
+    const { ctx } = sizeCanvas(zoneCanvas)
+    if (!state.zonesOn) return
+    if (!glow) buildGlow()
+    // An empty or single-point readable set has no area to glow.
+    if (!glow.canvas.width || !glow.canvas.height || !Number.isFinite(glow.minX)) return
+    const a = renderer.graphToViewport({ x: glow.minX, y: glow.minY }), b = renderer.graphToViewport({ x: glow.maxX, y: glow.maxY })
+    ctx.globalAlpha = (activeSet() || state.lit || state.focusZone) ? 0.45 : 1
+    // The viewport flips the graph's y axis; mirror the glow image to match.
+    const left = Math.min(a.x, b.x), width = Math.abs(b.x - a.x), height = Math.abs(b.y - a.y)
+    if (a.y > b.y) { ctx.save(); ctx.translate(left, a.y); ctx.scale(1, -1); ctx.drawImage(glow.canvas, 0, 0, width, height); ctx.restore() }
+    else ctx.drawImage(glow.canvas, left, a.y, width, height)
+    ctx.globalAlpha = 1
+  }
+  let zoneLabelRects = []
+  function reservedRects() {
+    const host = container.getBoundingClientRect()
+    return [...document.querySelectorAll(reserveSelector)].filter(el => !el.hidden).map(el => { const r = el.getBoundingClientRect(); return { left: r.left - host.left, top: r.top - host.top, right: r.right - host.left, bottom: r.bottom - host.top } }).filter(r => r.right > r.left)
+  }
+  function drawZoneNames(ctx, chrome) {
+    const ratio = camera.ratio
+    const dim = !!(activeSet() || state.lit)
+    // Zone names: strongest when zoomed out, gone when close.
+    const alpha = Math.max(0, Math.min(1, (ratio - 0.32) / 0.4)) * (dim ? 0.35 : 1)
+    zoneLabelRects = []
+    if (alpha <= 0.02 || !state.zonesOn) return
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    for (const zone of [...geometry].sort((a, b) => b.count - a.count)) {
+      const p = renderer.graphToViewport(zone.anchor)
+      const size = Math.round(Math.min(19, 11 + Math.sqrt(zone.count) / 3))
+      ctx.font = `600 ${size}px ${font}`
+      ctx.letterSpacing = '0.14em'
+      const text = zone.label.toUpperCase()
+      const width = ctx.measureText(text).width
+      const vw = container.clientWidth, vh = container.clientHeight
+      p.x = Math.max(width / 2 + 10, Math.min(vw - width / 2 - 10, p.x))
+      if (p.y < 70 || p.y > vh - 20) continue
+      const rect = { left: p.x - width / 2 - 6, right: p.x + width / 2 + 6, top: p.y - size, bottom: p.y + size }
+      if (zoneLabelRects.some(r => overlaps(r, rect, 4))) continue
+      if (chrome.some(r => overlaps(r, rect, 4))) continue
+      zoneLabelRects.push({ ...rect, zone: zone.id })
+      ctx.letterSpacing = '0.14em'
+      ctx.lineWidth = 5
+      ctx.strokeStyle = hexToRgba(palette.labelHalo, 0.75 * alpha)
+      ctx.strokeText(text, p.x, p.y)
+      ctx.fillStyle = hexToRgba(zoneColor(zone.id), Math.min(1, 0.95 * alpha))
+      ctx.fillText(text, p.x, p.y)
+      ctx.letterSpacing = '0px'
+    }
+  }
+  const overlaps = (a, b, gap = 0) => a.left < b.right + gap && a.right + gap > b.left && a.top < b.bottom + gap && a.bottom + gap > b.top
+
+  function drawLabels() {
+    const { ctx, w, h } = sizeCanvas(labelCanvas)
+    const ratio = camera.ratio
+    // Chrome claims its space first: no zone name or label under the host's controls.
+    const chrome = reservedRects()
+    drawZoneNames(ctx, chrome)
+    ctx.letterSpacing = '0px'
+    ctx.textAlign = 'left'
+    const set = activeSet()
+    const focus = state.hovered ?? state.selected
+    const candidates = []
+    // Importance first; zoom decides how deep into the list we go.
+    // Bounded work per frame: the neighbourhood when one is active, otherwise the
+    // highest-ranked records the current zoom could show.
+    const pool = set ? [...set] : state.lit ? [...state.lit] : ranked.slice(0, Math.min(ranked.length, Math.round(ranked.length * Math.min(1, 1.15 - 0.8 * ratio) + 60))).map(n => n.id)
+    if (state.selected && !pool.includes(state.selected)) pool.push(state.selected)
+    for (const id of pool) {
+      const node = byId.get(id)
+      const display = renderer.getNodeDisplayData(id)
+      if (!display || display.hidden) continue
+      const p = renderer.framedGraphToViewport(display)
+      if (p.x < -50 || p.y < -20 || p.x > w + 50 || p.y > h + 20) continue
+      let priority = rank.get(id)
+      let threshold = labelThreshold(ratio, state.labelBoost)
+      if (set) { priority += id === focus ? 10 : 2; threshold = 0 }
+      else if (state.lit) { priority += 1.5; threshold = Math.min(threshold, 0.25) }
+      if (id === state.selected) { priority += 20; threshold = 0 }
+      if (priority < threshold) continue
+      candidates.push({ id, node, p, priority, r: renderer.scaleSize(display.size) })
+    }
+    const style = c => { const emphasis = c.id === focus || c.id === state.selected; return { emphasis, size: emphasis ? 14 : c.priority > 0.75 || set ? 12.5 : 11.5, weight: emphasis ? 650 : c.priority > 0.6 ? 560 : 450 } }
+    const prepared = candidates.map(c => { const st = style(c); let text = c.node.title; if (text.length > 42 && !st.emphasis) text = text.slice(0, 40).trimEnd() + '\u2026'; return { id: c.id, x: c.p.x, y: c.p.y, r: c.r, priority: c.priority, text, size: st.size, emphasis: st.emphasis, weight: st.weight } })
+    const weightOf = new Map(prepared.map(c => [c.id, c]))
+    const measure = (text, size, emphasis) => {
+      const c = prepared.find(x => x.text === text && x.size === size) ?? { weight: emphasis ? 650 : 450 }
+      ctx.font = `${c.weight} ${size}px ${font}`
+      const key = ctx.font + '|' + text
+      let width = widthCache.get(key)
+      if (width === undefined) { width = ctx.measureText(text).width; widthCache.set(key, width) }
+      return width
+    }
+    const budget = set ? 60 : labelBudget(w, h, ratio, state.labelBoost)
+    placedLabels = placeLabels({ candidates: prepared, measure, width: w, height: h, reserved: [...zoneLabelRects, ...chrome], budget })
+    ctx.lineJoin = 'round'
+    ctx.textBaseline = 'middle'
+    for (const label of placedLabels) {
+      const c = weightOf.get(label.id)
+      ctx.font = `${c.weight} ${label.size}px ${font}`
+      ctx.lineWidth = 3
+      ctx.strokeStyle = hexToRgba(palette.labelHalo, 0.85)
+      ctx.strokeText(label.text, label.x, label.y)
+      ctx.fillStyle = c.emphasis ? palette.label : hexToRgba(palette.label, set && !c.emphasis ? 0.92 : Math.min(1, 0.62 + c.priority * 0.5))
+      ctx.fillText(label.text, label.x, label.y)
+    }
+    // A selection ring, drawn here so it stays crisp at any zoom.
+    if (state.selected && graph.hasNode(state.selected)) {
+      const d = renderer.getNodeDisplayData(state.selected)
+      if (d) {
+        const p = renderer.framedGraphToViewport(d), r = renderer.scaleSize(d.size) + 5
+        ctx.lineWidth = 2; ctx.strokeStyle = palette.selection
+        ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); ctx.stroke()
+      }
+    }
+  }
+
+  let last = performance.now()
+  renderer.on('afterRender', () => {
+    const now = performance.now()
+    frameTimes.push(now - last); last = now
+    if (frameTimes.length > 120) frameTimes.shift()
+    const t0 = performance.now()
+    drawZones()
+    const t1 = performance.now()
+    drawLabels()
+    overlayTimes.push({ zones: t1 - t0, labels: performance.now() - t1 })
+    if (overlayTimes.length > 120) overlayTimes.shift()
+  })
+
+  // ── Interaction ──
+  let dragged = null, dragMoved = false
+  renderer.on('enterNode', ({ node }) => { state.hovered = node; container.style.cursor = 'pointer'; onHover(node); renderer.refresh({ skipIndexation: true }) })
+  renderer.on('leaveNode', () => { state.hovered = null; container.style.cursor = ''; onHover(null); renderer.refresh({ skipIndexation: true }) })
+  renderer.on('clickNode', ({ node }) => { if (!dragMoved) onSelect(node) })
+  renderer.on('doubleClickNode', ({ node, event }) => { event.preventSigmaDefault(); onOpen(node) })
+  renderer.on('clickStage', () => { if (!dragMoved) onSelect(null) })
+  renderer.on('downNode', ({ node }) => { dragged = node; dragMoved = false; graph.setNodeAttribute(node, 'fixed', true) })
+  renderer.getMouseCaptor().on('mousemovebody', event => {
+    if (!dragged) return
+    dragMoved = true
+    const p = renderer.viewportToGraph(event)
+    graph.mergeNodeAttributes(dragged, { x: p.x, y: p.y })
+    event.preventSigmaDefault(); event.original.preventDefault(); event.original.stopPropagation()
+  })
+  renderer.getMouseCaptor().on('mouseup', () => {
+    if (dragged) { if (!physics) graph.removeNodeAttribute(dragged, 'fixed'); if (dragMoved) refreshGeometry() }
+    dragged = null
+    setTimeout(() => { dragMoved = false }, 0)
+  })
+
+  // ── Physics (play) ──
+  let physics = null, geometryTimer = null
+  function refreshGeometry() {
+    const moved = { ...model, nodes: model.nodes.map(n => ({ ...n, x: graph.getNodeAttribute(n.id, 'x'), y: graph.getNodeAttribute(n.id, 'y') })) }
+    geometry = zoneGeometry(moved)
+    glow = null
+  }
+  function setPhysics(on) {
+    if (on && !physics && !reduced() && FA2Layout) {
+      graph.forEachEdge((e, a) => graph.setEdgeAttribute(e, 'weight', LAYOUT_WEIGHTS[a.kind] ?? 0.22))
+      physics = new FA2Layout(graph, { settings: { linLogMode: true, outboundAttractionDistribution: true, gravity: 0.12, scalingRatio: 14, barnesHutOptimize: graph.order > 600, slowDown: 6 }, getEdgeWeight: 'weight' })
+      physics.start()
+      geometryTimer = setInterval(refreshGeometry, 400)
+    } else if (!on && physics) {
+      physics.kill(); physics = null; clearInterval(geometryTimer); refreshGeometry()
+    }
+    return !!physics
+  }
+
+  // ── Intro: the camera settles onto the whole while zones and labels fade in.
+  // Camera-only, so no graph reindexing; skipped entirely under reduced motion.
+  function intro() {
+    if (reduced()) return Promise.resolve()
+    camera.setState({ x: 0.5, y: 0.5, ratio: 1.55, angle: 0 })
+    container.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 700, easing: 'ease-out' })
+    return camera.animate({ ratio: 1 }, { duration: 1100, easing: 'cubicOut' })
+  }
+
+  const api = {
+    renderer, graph, camera,
+    intro,
+    get hovered() { return state.hovered },
+    select(id) { state.selected = id; renderer.refresh({ skipIndexation: true }) },
+    setLens(ids) { state.lit = ids ? new Set(ids) : null; renderer.refresh({ skipIndexation: true }) },
+    setFocusZone(zone) { state.focusZone = zone; renderer.refresh({ skipIndexation: true }) },
+    setOption(key, value) { state[key] = value; renderer.refresh({ skipIndexation: true }) },
+    setPhysics,
+    get physics() { return !!physics },
+    showNode(id, { ratio = 0.22, duration = 600 } = {}) {
+      const d = renderer.getNodeDisplayData(id)
+      if (!d) return Promise.resolve()
+      return camera.animate({ x: d.x, y: d.y, ratio: Math.min(camera.ratio, ratio) }, { duration: reduced() ? 0 : duration })
+    },
+    dive(id) {
+      const d = renderer.getNodeDisplayData(id)
+      if (!d) return Promise.resolve(null)
+      const before = camera.getState()
+      return camera.animate({ x: d.x, y: d.y, ratio: 0.08 }, { duration: reduced() ? 0 : 520 }).then(() => ({ before }))
+    },
+    restore(cameraState) { return camera.animate(cameraState, { duration: reduced() ? 0 : 480 }) },
+    fit() { return camera.animate({ x: 0.5, y: 0.5, ratio: 1, angle: 0 }, { duration: reduced() ? 0 : 450 }) },
+    zoom(factor) { return camera.animate({ ratio: Math.max(0.035, Math.min(1.6, camera.ratio / factor)) }, { duration: reduced() ? 0 : 220 }) },
+    nodeViewport(id) { const d = renderer.getNodeDisplayData(id); return d ? renderer.framedGraphToViewport(d) : null },
+    labels: () => placedLabels.map(l => ({ ...l })),
+    zoneLabels: () => zoneLabelRects.map(r => ({ ...r })),
+    frameStats() { const s = [...frameTimes].sort((a, b) => a - b); const med = k => { const v = overlayTimes.map(o => o[k]).sort((a, b) => a - b); return v[Math.floor(v.length / 2)] ?? null }; return { samples: s.length, medianMs: s[Math.floor(s.length / 2)] ?? null, p90Ms: s[Math.floor(s.length * 0.9)] ?? null, overlayZonesMs: med('zones'), overlayLabelsMs: med('labels') } },
+    setPalette(next) { Object.assign(palette, next); glow = null; graph.updateEachNodeAttributes((id, a) => ({ ...a, color: zoneColor(a.zone) }), { attributes: ['color'] }); renderer.refresh() },
+    refresh() { renderer.refresh({ skipIndexation: true }) },
+    kill() { setPhysics(false); renderer.kill(); container.replaceChildren() },
+  }
+  return api
+}

package/src/graph-workspace/browser/dom.mjs

@@ -0,0 +1,23 @@
+// Tiny DOM helpers. Text is always assigned as text; no HTML strings.
+export const $ = id => document.getElementById(id)
+export function h(tag, props = {}, ...children) {
+  const node = document.createElement(tag)
+  for (const [key, value] of Object.entries(props ?? {})) {
+    if (value === undefined || value === null || value === false) continue
+    if (key === 'class') node.className = value
+    else if (key === 'text') node.textContent = value
+    else if (key === 'style') node.setAttribute('style', value)
+    else if (key.startsWith('on') && typeof value === 'function') node.addEventListener(key.slice(2).toLowerCase(), value)
+    else if (key === 'dataset') Object.assign(node.dataset, value)
+    else if (key === 'checked' || key === 'disabled' || key === 'hidden' || key === 'open' || key === 'selected') node[key] = !!value
+    else if (value === true) node.setAttribute(key, '')
+    else node.setAttribute(key, String(value))
+  }
+  for (const child of children.flat(Infinity)) {
+    if (child === null || child === undefined || child === false) continue
+    node.append(child instanceof Node ? child : document.createTextNode(String(child)))
+  }
+  if (tag === 'textarea' && children.length) node.value = children.flat().filter(c => typeof c === 'string').join('')
+  return node
+}
+export const clear = node => { while (node.firstChild) node.firstChild.remove() }

package/src/graph-workspace/browser/index.mjs

@@ -0,0 +1,6 @@
+// Browser rooms for the graph workspace. Renderer packages are injected by the host.
+export { mountGraphWorkspace, applyTheme } from './workspace.mjs'
+export { createConstellation } from './constellation.mjs'
+export { createWorkbench } from './workbench.mjs'
+export { renderReview } from './review.mjs'
+export { GRAPH_WORKSPACE_CSS, injectGraphWorkspaceStyles } from './styles.mjs'

package/src/graph-workspace/browser/review.mjs

@@ -0,0 +1,55 @@
+// The review: before and proposed, evidence state, who decides. Nothing else.
+// Local and simulated: it shows the intent a host would receive and sends nothing.
+import { h, clear } from './dom.mjs'
+import { readiness } from '../authoring.mjs'
+
+const STATUS = {
+  'nothing-drafted': ['Nothing drafted yet', 'Shape a concept or explain a relation first.'],
+  'needs-attention': ['Needs attention', 'Some steps are incomplete; the step rail shows which.'],
+  'ready-for-human-review': ['Ready for a person to review', 'Complete and grounded in records you can read. Not a judgment that it is true; a person decides that.'],
+}
+
+export function renderReview(root, { model, store, onBack, onOpen, backLabel = '← Back to the workbench' }) {
+  const plan = model.plan
+  const visible = new Set(model.nodes.map(n => n.id))
+  const byId = new Map(model.nodes.map(n => [n.id, n]))
+  const r = readiness(plan, store, visible)
+  const [label, explain] = STATUS[r.status]
+  clear(root)
+  root.hidden = false
+  const panel = h('section', { class: 'review', 'aria-labelledby': 'review-title' })
+  panel.append(h('header', { class: 'review-head' }, h('button', { class: 'back', type: 'button', id: 'review-back', onclick: onBack }, backLabel),
+    h('h2', { id: 'review-title', tabindex: '-1', text: 'Your proposed change' }),
+    h('p', { class: 'review-status', id: 'review-status', dataset: { status: r.status } }, h('b', { text: label }), ' ', explain)))
+  for (const item of r.items) {
+    const card = h('article', { class: 'change' })
+    if (item.kind === 'concept') {
+      const c = plan.concepts.find(x => x.id === item.id), d = store.conceptDraft(item.id)
+      card.append(h('h3', {}, h('button', { class: 'link', type: 'button', onclick: () => onOpen({ kind: 'concept', id: c.id }) }, c.title)))
+      card.append(pair('Meaning', c.definition, d.definition), pair('Same one?', c.identityRule, d.identityRule))
+      for (const [k, v] of [['Example', d.example], ['Must stay separate', d.nearMiss], ['Would prove it wrong', d.disconfirming]]) if (v) card.append(h('p', { class: 'line' }, h('span', { class: 'label', text: k + ' ' }), v))
+      card.append(h('p', { class: 'label', text: `Evidence · ${d.evidence.length}` }), h('ul', { class: 'cited' }, d.evidence.map(b => h('li', { text: visible.has(b.id) ? byId.get(b.id).title : 'A record outside what you can read' }))))
+    } else {
+      const rel = plan.relations.find(x => x.id === item.id), d = store.relationDraft(item.id)
+      const t = id => plan.concepts.find(c => c.id === id)?.title ?? id
+      card.append(h('h3', { text: `${t(rel.from)} → ${t(rel.to)}` }), pair('Meaning', rel.meaning, d.meaning))
+      for (const [k, v] of [['Forward', d.forward], ['Reverse', d.reverse], ['Would prove it wrong', d.disconfirming]]) if (v) card.append(h('p', { class: 'line' }, h('span', { class: 'label', text: k + ' ' }), v))
+      card.append(h('p', { class: 'label', text: `Evidence · ${d.evidence.length}` }), h('ul', { class: 'cited' }, d.evidence.map(b => h('li', { text: visible.has(b.id) ? byId.get(b.id).title : 'A record outside what you can read' }))))
+      card.append(h('p', { class: 'step-help', text: 'One directed relation. The reverse reading is explanation, not a second relation.' }))
+    }
+    if (item.guide.errors) card.append(h('p', { class: 'guide-error', text: `${item.guide.errors} step(s) still need attention.` }))
+    if (item.guide.warnings) card.append(h('p', { class: 'guide-warn', text: `${item.guide.warnings} suggestion(s) remain.` }))
+    panel.append(card)
+  }
+  panel.append(h('div', { class: 'decide' },
+    h('p', {}, h('b', { text: 'A person decides. ' }), `Nothing has been saved to the source, applied to the plan or sent anywhere. Drafts stay where this workspace keeps them (${({ tab: 'this tab', browser: 'this browser', host: 'the workspace host' })[store.persistence] ?? 'this tab'}).`),
+    h('details', {}, h('summary', { text: 'The intent a host would receive (not sent)' }), h('pre', { text: JSON.stringify({ type: 'proposeModelChange', draftRef: `local-browser-draft:${model.systemId}`, items: r.items.map(i => `${i.kind}:${i.id}`) }, null, 2) }))))
+  root.replaceChildren(panel)
+  root.querySelector('#review-title').focus()
+  return r
+}
+
+function pair(label, before, after) {
+  if ((before ?? '') === (after ?? '')) return h('div', { class: 'pair same' }, h('p', { class: 'label', text: label }), h('p', { text: before || '—' }), h('small', { text: 'Unchanged' }))
+  return h('div', { class: 'pair' }, h('p', { class: 'label', text: label }), h('div', { class: 'pair-grid' }, h('div', {}, h('small', { text: 'Now' }), h('p', { text: before || '—' })), h('div', {}, h('small', { text: 'Proposed' }), h('blockquote', { text: after || '—' }))))
+}

package/src/graph-workspace/browser/styles.mjs

@@ -0,0 +1,11 @@
+// Scoped styles for the default graph workspace shell (CSS nesting under .atelier-gw).
+// Colours, type and motion come from the theme's custom properties.
+export const GRAPH_WORKSPACE_CSS = ".atelier-gw{container:atelier-gw / inline-size;position:relative;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;\n/* V6: minimal chrome around a full-bleed constellation; quiet, focused rooms. */\n*{box-sizing:border-box}\n[hidden]{display:none!important}\n\nbutton,input,select,textarea{font:inherit;color:inherit}\nbutton{cursor:pointer;background:none;border:0}\nbutton:disabled{opacity:.45;cursor:default}\n:focus-visible{outline:2px solid var(--focus);outline-offset:2px}\nh2,h3,p{margin:0}\n.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n.skip{position:absolute;z-index:100;left:12px;top:10px;transform:translateY(-200%);background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:var(--radius)}\n.skip:focus{transform:none}\n.eyebrow{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:6px}\n.label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:14px 0 6px}\n.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}\n.dot-concept{display:inline-block;width:9px;height:9px;transform:rotate(45deg);background:var(--accent);flex:none;margin-right:2px}\n.primary{background:var(--accent);color:var(--accent-ink);font-weight:600;padding:9px 16px;border-radius:999px;min-height:38px}\n.secondary{border:1px solid var(--line-strong);padding:7px 14px;border-radius:999px;min-height:36px}\n.secondary.small{min-height:30px;padding:3px 11px;font-size:12.5px}\n.quiet{color:var(--ink-2);padding:8px 12px;border-radius:999px;min-height:36px}\n.quiet:hover,.secondary:hover{background:var(--surface-2)}\n.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:2px 0}\n\n.stage{position:relative;width:100%;height:100%;overflow:hidden}\n.constellation{position:absolute;inset:0}\n.constellation>*{position:absolute;inset:0}\n.layer-zones{z-index:0}\n.layer-sigma{z-index:1}\n.layer-labels{z-index:2;pointer-events:none}\n&.text-mode .constellation,&.text-mode .zoom{visibility:hidden}\n\n/* chrome */\n.top{position:absolute;z-index:10;top:14px;left:14px;right:14px;display:grid;grid-template-columns:1fr minmax(240px,560px) 1fr;gap:10px;align-items:start;pointer-events:none}\n.top>*{pointer-events:auto}\n.top-right{display:flex;gap:8px;justify-self:end}\n.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-glass);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:38px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-weight:500}\n.pill.icon{width:40px;justify-content:center;padding:0;font-size:16px}\n.pill[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}\n.emblem{color:var(--accent);font-size:16px}\n.caret{color:var(--ink-3);font-size:11px}\n.menu-wrap{position:relative}\n.menu{position:absolute;top:46px;left:0;z-index:30;min-width:300px;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:6px}\n.top-right .menu{left:auto;right:0}\n.menu-item{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius)}\n.menu-item small{color:var(--ink-3);font-size:12px}\n.menu-item:hover,.menu-item[aria-checked=true]{background:var(--surface-2)}\n.menu-item[aria-checked=true] span::after{content:'  ✓';color:var(--accent)}\n.menu-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 4px}\n.menu-note{font-size:12px;color:var(--ink-3);padding:4px 12px}\n.display .row{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13.5px}\n.display .row.col{flex-direction:column;align-items:stretch;gap:4px}\n.display input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}\n.display input[type=range]{accent-color:var(--accent)}\n.command-wrap{position:relative;justify-self:center;width:100%}\n.command-wrap input{width:100%;background:var(--surface-glass);border:1px solid var(--line);border-radius:999px;padding:9px 52px 9px 18px;min-height:40px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}\n.command-wrap input::placeholder{color:var(--ink-3)}\n.command-wrap kbd{position:absolute;right:14px;top:11px;font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:0 6px;font-family:inherit}\n.command-results{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);max-height:60vh;overflow:auto}\n.cmd{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:8px 12px;border-radius:var(--radius)}\n.cmd:hover,.cmd:focus-visible,[aria-selected=true]>.cmd{background:var(--surface-2)}\n.cmd-hint{font-size:12px;color:var(--ink-3)}\n.corner{position:absolute;z-index:5;left:18px;bottom:16px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-3);max-width:min(520px,60vw);pointer-events:none}\n.corner strong{color:var(--ink-2);font-weight:600;font-size:13px}\n.provenance{color:var(--warn)}\n&[data-private=false] .provenance{color:var(--ink-3)}\n.zoom{position:absolute;z-index:5;right:16px;bottom:16px;display:flex;flex-direction:column;background:var(--surface-glass);border:1px solid var(--line);border-radius:12px;overflow:hidden;backdrop-filter:blur(14px)}\n.zoom button{width:38px;height:36px;font-size:17px;color:var(--ink-2)}\n.zoom button+button{border-top:1px solid var(--line)}\n.zoom button:hover{background:var(--surface-2)}\n.toast{position:absolute;z-index:40;left:50%;top:70px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:999px;box-shadow:var(--shadow);font-size:13px}\n\n/* selection card */\n.card{position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100vw - 140px));background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px 18px 14px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:rise var(--motion) var(--ease)}\n@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}\n.card h2{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em;padding-right:28px}\n.card-summary{color:var(--ink-2);margin-top:4px}\n.card-meta{color:var(--ink-3);font-size:12.5px;margin-top:6px}\n.card-actions{display:flex;gap:8px;margin-top:12px;align-items:center}\n.card-close{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:50%;color:var(--ink-3);font-size:18px}\n.card-close:hover{background:var(--surface-2)}\n.card-neighbours{margin-top:10px;font-size:13px}\n.card-neighbours summary{cursor:pointer;color:var(--ink-2)}\n.card-neighbours ul{list-style:none;margin:6px 0 0;padding:0;max-height:150px;overflow:auto;columns:2;column-gap:12px}\n.link-row{display:flex;gap:8px;text-align:left;width:100%;padding:4px 6px;border-radius:8px;color:var(--ink-2)}\n.link-row:hover{background:var(--surface-2);color:var(--ink)}\n.dir{color:var(--accent);width:14px;flex:none}\n.question-card{position:absolute;z-index:8;top:66px;left:14px;width:min(360px,calc(100vw - 28px));background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px 16px;backdrop-filter:blur(18px)}\n.question-card select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px}\n.q-lit{font-weight:600}\n.q-note{font-size:12.5px;color:var(--ink-3);margin:6px 0 10px}\n&.diving .top,&.diving .corner,&.diving .zoom,&.diving .card,&.diving .question-card{opacity:0;transition:opacity 200ms}\n\n/* text view */\n.text-view{position:absolute;inset:0;z-index:3;overflow:auto;padding:76px max(20px,calc(50vw - 520px)) 40px;background:var(--canvas);display:none}\n&.text-mode .text-view{display:block}\n.tv-title{font-family:var(--font-display);font-size:22px;margin-bottom:10px}\n.text-view input[type=search]{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin-bottom:10px}\n.text-view h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}\n.tv-zone{margin:6px 0;border-top:1px solid var(--line);padding-top:6px}\n.tv-zone summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;padding:6px 0}\n.tv-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 12px}\n.tv-item{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;width:100%;text-align:left;padding:6px 8px;border-radius:8px}\n.tv-item small{flex-basis:100%;color:var(--ink-3);font-size:12px}\n.tv-item:hover,.tv-item[aria-pressed=true]{background:var(--surface-2)}\n\n/* workbench */\n.workbench{position:absolute;inset:0;z-index:20;display:grid;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(ellipse at 35% 50%,var(--surface-2),var(--canvas) 70%);animation:fade var(--motion) var(--ease)}\n@keyframes fade{from{opacity:0}to{opacity:1}}\n.wb-head{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);min-height:56px}\n.back{color:var(--ink-2);padding:6px 10px;border-radius:999px}\n.back:hover{background:var(--surface-2)}\n.trail{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden;font-size:13px;color:var(--ink-3)}\n.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;color:var(--ink-2)}\nbutton.crumb{text-decoration:underline;text-underline-offset:3px}\n.crumb.current{color:var(--ink);font-weight:600}\n.save-status{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;white-space:nowrap}\n.save-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink-3)}\n.save-status[data-state=saved]::before,.save-status[data-state=restored]::before{background:var(--ok)}\n.save-status[data-state=saving]::before{background:var(--warn)}\n.wb-body{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:minmax(0,1fr);min-height:0}\n.wb-graph{position:relative;overflow:hidden}\n.wb-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}\n.wb-cards{position:absolute;inset:0}\n.wb-edge line{stroke:var(--line-strong);stroke-width:1.4}\n.wb-edge path{fill:var(--line-strong)}\n.wb-edge.is-declared line{stroke:var(--ink-3);stroke-width:1.6}\n.wb-edge.is-declared path{fill:var(--ink-3)}\n.wb-edge.is-link line{stroke-dasharray:2 5}\n.wb-edge.is-challenge line{stroke:var(--danger);stroke-dasharray:7 4}\n.wb-edge.is-challenge path{fill:var(--danger)}\n.wb-edge.is-declares line{stroke:var(--accent);stroke-dasharray:4 4;opacity:.8}\n.wb-edge.is-declares path{fill:var(--accent)}\n.wb-card{position:absolute;left:0;top:0;width:224px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;box-shadow:0 4px 18px rgba(0,0,0,.18);transition:border-color var(--motion)}\n.wb-card:hover{border-color:var(--line-strong)}\n.wb-center{width:280px;border:1.5px solid var(--accent);padding:14px 16px;cursor:default}\n.wb-kind{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}\n.wb-title{font-weight:600;font-size:14.5px;line-height:1.3}\n.wb-center .wb-title{font-family:var(--font-display);font-size:18px}\n.wb-summary{font-size:12.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n.wb-meta{font-size:11.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}\n.tag{font-weight:600;font-size:10.5px;padding:0 6px;border-radius:999px;border:1px solid var(--line-strong)}\n.tag-cited{border-color:var(--ok);color:var(--ok)}\n.tag-proposed{border-color:var(--warn);color:var(--warn);border-style:dashed}\n.wb-pill{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--canvas);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}\n.wb-pill-arrow{display:inline-block;color:var(--ink)}\n.wb-more{position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--ink-3)}\n.wb-graph.is-list{overflow:auto}\n.wb-graph.is-list .wb-cards{position:relative;min-height:100%}\n.wb-sheet{background:var(--surface);border-left:1px solid var(--line);overflow:auto;padding:22px 26px 30px}\n.wb-sheet h2{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-bottom:4px}\n.wb-sheet h2:focus{outline:none}\n.sheet-count{font-size:12.5px;color:var(--ink-3)}\n.step-rail{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}\n.step{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 6px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}\n.step[aria-current=step]{border-color:var(--accent);color:var(--ink);background:var(--surface-2)}\n.step-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--surface-2);color:var(--ink-2)}\n.step-answered .step-n{background:var(--ok);color:var(--canvas)}\n.step-deferred .step-n{background:transparent;border:1px dashed var(--ink-3)}\n.step-attention .step-n{background:var(--warn);color:var(--canvas)}\n.step-body h3{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3}\n.step-help{color:var(--ink-3);font-size:13px;margin:4px 0 10px}\n.step-body textarea{width:100%;min-height:150px;resize:vertical;background:var(--canvas);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.55}\n.plan-wording{margin-top:8px;font-size:13px;color:var(--ink-2)}\n.plan-wording summary{cursor:pointer;color:var(--ink-3)}\n.guide{list-style:none;margin:8px 0 0;padding:0;font-size:13px}\n.guide li{padding-left:16px;position:relative;margin-top:3px}\n.guide li::before{position:absolute;left:0;font-weight:700}\n.guide-error{color:var(--danger)}.guide-error::before{content:'!'}\n.guide-warn{color:var(--warn)}.guide-warn::before{content:'•'}\n.guide-info{color:var(--ink-3)}.guide-info::before{content:'i'}\n.defer{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:12px}\n.defer input{width:16px;height:16px;accent-color:var(--accent)}\n.sheet-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}\n.sheet-actions.left{justify-content:flex-start;border-top:0;padding-top:0}\n.sheet-actions select{background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:7px 10px;max-width:180px}\n.sheet-note{font-size:12px;color:var(--ink-3);margin-top:12px}\n.lede{color:var(--ink-2);font-size:15px;margin:6px 0 12px}\n.facts{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;font-size:13px;margin:0 0 16px}\n.facts dt{color:var(--ink-3)}.facts dd{margin:0;word-break:break-word}\n.sheet-h{font-size:13px;margin:12px 0 6px}\n.link-list,.cited,.suggest{list-style:none;margin:0;padding:0}\n.cited li,.suggest li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}\n.suggest-title,.cited li span{flex:1;min-width:0}\n.find{width:100%;background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:7px 12px;margin-top:12px}\n\n/* review */\n.review-room{position:absolute;inset:0;z-index:30;background:var(--canvas);overflow:auto;animation:fade var(--motion) var(--ease)}\n.review{max-width:860px;margin:0 auto;padding:28px 24px 60px}\n.review-head h2{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em;margin:12px 0 6px}\n.review-head h2:focus{outline:none}\n.review-status{color:var(--ink-2)}\n.review-status b{color:var(--ink)}\n.review-status[data-status=ready-for-human-review] b{color:var(--ok)}\n.review-status[data-status=needs-attention] b{color:var(--warn)}\n.change{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-top:16px}\n.change h3{font-size:18px;margin-bottom:8px}\n.pair{margin-top:10px}.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.pair small{color:var(--ink-3)}\n.pair blockquote{margin:2px 0 0;padding-left:12px;border-left:3px solid var(--accent)}\n.pair.same small{display:block}\n.line{margin-top:6px}\n.decide{margin-top:22px;padding:16px 20px;border-radius:var(--radius-lg);border:1px solid var(--line-strong)}\n.decide pre{font-size:12px;white-space:pre-wrap;color:var(--ink-2)}\n.decide summary{cursor:pointer;color:var(--ink-3);margin-top:8px}\n\n@container atelier-gw (max-width:860px){\n  .wb-body{grid-template-columns:1fr;grid-template-rows:minmax(300px,48dvh) auto;overflow:auto}\n  .wb-sheet{border-left:0;border-top:1px solid var(--line)}\n  .workbench{overflow:auto}\n}\n@container atelier-gw (max-width:720px){\n  .top{grid-template-columns:auto 1fr;top:10px;left:10px;right:10px}\n  .command-wrap{grid-column:1/-1;grid-row:2}\n  .top-right{grid-column:2;grid-row:1}\n  .menu{min-width:min(320px,calc(100vw - 20px))}\n  .card{width:calc(100vw - 20px);bottom:10px;padding:14px}\n  .card-neighbours ul{columns:1}\n  .corner{bottom:auto;top:112px;left:12px;max-width:calc(100vw - 24px)}\n  .corner span:not(.provenance){display:none}\n  .zoom{bottom:auto;top:104px;right:10px}\n  .question-card{top:150px}\n  .text-view{padding:120px 14px 30px}\n  .wb-head{flex-wrap:wrap;gap:8px}\n  .save-status{flex-basis:100%}\n  .wb-sheet{padding:18px 16px 30px}\n  .pair-grid{grid-template-columns:1fr}\n}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\n.step-plan .step-n{background:transparent;border:1px solid var(--accent);color:var(--accent)}\n.top>.menu-wrap{display:flex;gap:8px;align-items:flex-start}\n.primary-action{border-color:var(--accent)}\n\n}\n"
+
+export function injectGraphWorkspaceStyles(doc = document) {
+  if (doc.getElementById('atelier-gw-styles')) return
+  const style = doc.createElement('style')
+  style.id = 'atelier-gw-styles'
+  style.textContent = GRAPH_WORKSPACE_CSS
+  doc.head.append(style)
+}