figfoundry 0.2.1__tar.gz → 0.3.1__tar.gz

{figfoundry-0.2.1 → figfoundry-0.3.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: figfoundry
-Version: 0.2.1
+Version: 0.3.1
 Summary: WYSIWYG matplotlib figure composer: load data (.npz/.pkl), drag signals onto a canvas to build plots, and export clean reproducible code.
 Project-URL: Homepage, https://github.com/ductai199x/figfoundry
 Project-URL: Repository, https://github.com/ductai199x/figfoundry

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/canvas.py

@@ -73,22 +73,34 @@ def dataset_loader_code(filename):
     if filename.endswith(".npz"):
         return [
             "import numpy as np",
-            f"_ds = np.load({path!r}, allow_pickle=False)",
-            "data = {k: _ds[k] for k in _ds.files}",
+            f"DATA_DEFAULT = {path!r}",
+            "def _load_data(p):",
+            "    _ds = np.load(p, allow_pickle=False)",
+            "    return {k: _ds[k] for k in _ds.files}",
+            'if __name__ == "__main__":',
+            "    data = None  # loaded in the __main__ block below (via --data)",
+            "else:",
+            "    data = _load_data(DATA_DEFAULT)",
         ]
     if filename.endswith(".csv"):
         return [
             "import numpy as np, csv",
-            f"_f = open({path!r}, newline='', encoding='utf-8-sig'); _rows = [r for r in csv.reader(_f) if any(c.strip() for c in r)]; _f.close()",
-            "_data = {}",
-            "for _i, _c in enumerate(_rows[0] if _rows else []):",
-            "    _v = []",
-            "    for _r in _rows[1:]:",
-            "        if _i < len(_r):",
-            "            try: _v.append(float(_r[_i]))",
-            "            except ValueError: pass",
-            "    if _v: _data[_c.strip() or f'col{_i}'] = np.array(_v)",
-            "data = _data",
+            f"DATA_DEFAULT = {path!r}",
+            "def _load_data(p):",
+            "    _f = open(p, newline='', encoding='utf-8-sig'); _rows = [r for r in csv.reader(_f) if any(c.strip() for c in r)]; _f.close()",
+            "    _data = {}",
+            "    for _i, _c in enumerate(_rows[0] if _rows else []):",
+            "        _v = []",
+            "        for _r in _rows[1:]:",
+            "            if _i < len(_r):",
+            "                try: _v.append(float(_r[_i]))",
+            "                except ValueError: pass",
+            "        if _v: _data[_c.strip() or f'col{_i}'] = np.array(_v)",
+            "    return _data",
+            'if __name__ == "__main__":',
+            "    data = None  # loaded in the __main__ block below (via --data)",
+            "else:",
+            "    data = _load_data(DATA_DEFAULT)",
         ]
     # .pkl -- embedded whitelist unpickler (numpy + plain containers; blocks
     # os/subprocess/socket/ctypes and non-container builtins). The numpy
@@ -109,9 +121,15 @@ def dataset_loader_code(filename):
         '        raise pickle.UnpicklingError("blocked " + m + "." + n)',
         "def _safe_load(p):",
         '    with open(p, "rb") as f: return _SafeUnpickler(f).load()',
-        f"_obj = _safe_load({path!r})",
-        "_items = _obj.items() if isinstance(_obj, dict) else [('data', _obj)]",
-        "data = {str(k): np.asarray(v) for k, v in _items if np.asarray(v).dtype != object}",
+        f"DATA_DEFAULT = {path!r}",
+        "def _load_data(p):",
+        "    _obj = _safe_load(p)",
+        "    _items = _obj.items() if isinstance(_obj, dict) else [('data', _obj)]",
+        "    return {str(k): np.asarray(v) for k, v in _items if np.asarray(v).dtype != object}",
+        'if __name__ == "__main__":',
+        "    data = None  # loaded in the __main__ block below (via --data)",
+        "else:",
+        "    data = _load_data(DATA_DEFAULT)",
     ]
 
 
@@ -286,6 +304,9 @@ def codegen_canvas(spec, detail=True):
                     w = tt.get("weight", "normal")
                     w = w if w in ("normal", "bold", "light", "medium", "heavy", "semibold", "black") else "normal"
                     s.append(f'    ax.set_title({tt.get("text", "")!r}, x={_num(tt.get("x"), 0.0)!r}, y={_num(tt.get("y"), 1.0)!r}, pad={_num(tt.get("pad"), 1.0)!r}, fontsize={_num(tt.get("fontsize"), 11)!r}, fontweight={w!r}, color={tt.get("color", "#000000")!r})')
+                    _trot = _num(tt.get("rotation"), 0)
+                    if _trot:
+                        s.append(f"    ax.title.set_rotation({_trot!r})")
         except (KeyError, TypeError, ValueError, IndexError, AttributeError):
             # One malformed plot blanks itself out; it must not sink the whole render.
             pid = p.get("id", "?") if isinstance(p, dict) else "?"
@@ -306,7 +327,12 @@ def codegen_canvas(spec, detail=True):
     s.append('    ap = argparse.ArgumentParser(description=__doc__)')
     s.append('    ap.add_argument("--format", default="png", choices=["png", "svg", "pdf"])')
     s.append(f"    ap.add_argument(\"--dpi\", type=int, default={dpi})")
+    if ds:
+        s.append('    ap.add_argument("--data", default=DATA_DEFAULT, help="path to the dataset file (default is where this figure was made)")')
     s.append("    a = ap.parse_args()")
+    if ds:
+        s.append("    try: data = _load_data(a.data)")
+        s.append('    except FileNotFoundError as _e: raise SystemExit(f"dataset not found: {_e}; pass --data /path/to/your/dataset")')
     s.append('    fig = build(); fig.savefig(f"fig.{a.format}", dpi=a.dpi)')
     return "\n".join(s) + "\n"
 
@@ -508,7 +534,7 @@ def _codegen_artist(art):
         base = f'ax.text({float(art["x"])!r}, {float(art["y"])!r}, {art.get("text", "")!r}'
         if art.get("axes_frac"):
             base += ", transform=ax.transAxes"
-        base += f', ha={art.get("ha", "left")!r}, va={art.get("va", "bottom")!r}, fontsize={_num(art.get("fontsize"), 10)!r}, color={art.get("color", "#000000")!r})'
+        base += f', ha={art.get("ha", "left")!r}, va={art.get("va", "bottom")!r}, fontsize={_num(art.get("fontsize"), 10)!r}, color={art.get("color", "#000000")!r}, rotation={_num(art.get("rotation"), 0)!r})'
         return base
     if t == "legend":
         h = ", ".join(f'Line2D([], [], color={x.get("color", "#000")!r}, ls={x.get("ls", "-")!r}, lw={_num(x.get("lw"), 1.5)!r}, marker={x.get("marker", "")!r}, ms={_num(x.get("ms"), 0)!r})' for x in art.get("handles", []) if isinstance(x, dict))
@@ -517,7 +543,7 @@ def _codegen_artist(art):
         return (f'ax.annotate({art.get("text", "")!r}, xy=({float(art["xy"][0])!r}, {float(art["xy"][1])!r}), '
                 f'xytext=({float(art["xytext"][0])!r}, {float(art["xytext"][1])!r}), textcoords="axes fraction", '
                 f'arrowprops=dict(arrowstyle="->", color={art.get("color", "#000000")!r}, lw={_num(art.get("lw"), 1.2)!r}), '
-                f'color={art.get("color", "#000000")!r}, fontsize={_num(art.get("fontsize"), 10)!r})')
+                f'color={art.get("color", "#000000")!r}, fontsize={_num(art.get("fontsize"), 10)!r}, rotation={_num(art.get("rotation"), 0)!r})')
     if t == "box":
         return (f'ax.add_patch(Rectangle(({float(art["x0"])!r}, {float(art["y0"])!r}), {float(art["w"])!r}, {float(art["h"])!r}, '
                 f'transform=ax.transAxes, fc={art.get("fc", "none")!r}, alpha={_num(art.get("alpha"), 0.15)!r}, '
@@ -547,7 +573,11 @@ def _codegen_figartist(fa):
     if t == "text":
         return f'fig.text({float(fa["x"])!r}, {float(fa["y"])!r}, {fa.get("text", "")!r}, ha={fa.get("ha", "left")!r}, va={fa.get("va", "bottom")!r}, fontsize={_num(fa.get("fontsize"), 12)!r}, color={fa.get("color", "#000000")!r}, rotation={_num(fa.get("rotation"), 0)!r})'
     if t == "suptitle":
-        return f'fig.suptitle({fa.get("text", "")!r}, x={_num(fa.get("x"), 0.5)!r}, y={_num(fa.get("y"), 1.0)!r}, fontsize={_num(fa.get("fontsize"), 14)!r}, color={fa.get("color", "#000000")!r})'
+        _srot = _num(fa.get("rotation"), 0)
+        _st = f'fig.suptitle({fa.get("text", "")!r}, x={_num(fa.get("x"), 0.5)!r}, y={_num(fa.get("y"), 1.0)!r}, fontsize={_num(fa.get("fontsize"), 14)!r}, color={fa.get("color", "#000000")!r})'
+        if _srot:
+            _st = "_st = " + _st + f"; _st.set_rotation({_srot!r})"
+        return _st
     return f"pass  # figure artist type {t!r} not emitted"
 
 
@@ -617,6 +647,13 @@ def hotspots_from_fig(fig, spec):
         add(f"plot:{pid}", ax)
         if (p.get("title") or {}).get("visible"):
             add(f"title:{pid}", ax.title)
+        # Per-plot TEXT artists: ax.texts holds exactly these, in spec order (tick
+        # labels and the title are not in ax.texts), so they get canvas overlays
+        # (draggable / rotatable / snappable) keyed by their spec index j.
+        titer = iter(ax.texts)
+        for j, art in enumerate(p.get("artists") or []):
+            if isinstance(art, dict) and art.get("type") == "text":
+                add(f"artist:{pid}:{j}", next(titer, None))
     # per-plot artists / overlaid lines are selected from the Layers list (robust),
     # not by canvas hit-testing (ax.lines is polluted by extra lines + error bars).
     # fig.texts also holds the suptitle (Figure.suptitle appends to it), so exclude it

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/static/canvas.css

@@ -46,6 +46,18 @@
 .mov:hover { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
 .mov.selected { outline: 2px solid var(--accent); }
 .mov.inspect-only { cursor: default; }
+/* rotation handle: a circle above the element (shows on hover / when selected) */
+.mov .rot-handle { display: none; position: absolute; top: -20px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: grab; z-index: 6; }
+.mov .rot-handle::after { content: ""; position: absolute; top: 13px; left: 50%; width: 1.5px; height: 9px; background: var(--accent); transform: translateX(-50%); }
+.mov .rot-handle:active { cursor: grabbing; }
+.mov:hover .rot-handle, .mov.selected .rot-handle { display: block; }
+.marquee { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; z-index: 20; display: none; }
+.render-busy { position: absolute; top: 10px; right: 12px; z-index: 30; display: none; font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; box-shadow: var(--shadow-sm); pointer-events: none; }
+.confirm-msg { color: var(--muted); margin: 10px 0 18px; line-height: 1.5; }
+.help-list { margin: 14px 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; }
+.help-list .k { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
+.help-list .d { color: var(--muted); }
+#groupBox { position: absolute; border: 1.5px dashed var(--accent); pointer-events: none; z-index: 4; display: none; }
 
 /* ---- snap guides ---- */
 .guides { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/static/canvas.html

@@ -16,6 +16,7 @@
     })();
   </script>
   <title>Fig Foundry — Canvas</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='2' y='2' width='60' height='60' rx='15' fill='%232f6690'/%3E%3Cpolyline points='16,45 27,31 35,39 49,20' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="/static/canvas.css">
 </head>
@@ -40,6 +41,7 @@
         <button id="zoomFit" class="textbtn">Fit</button>
       </div>
       <button id="themeBtn" class="iconbtn" title="Theme (light / dark / system)" aria-label="Toggle theme">&#9790;</button>
+      <button id="helpBtn" class="iconbtn" title="Help &amp; shortcuts" aria-label="Help and shortcuts">?</button>
       <button id="exportBtn" class="primary">Export code</button>
     </header>
 
@@ -137,6 +139,14 @@
     </div>
   </div>
 
+  <div id="helpModal" class="modal hidden" role="dialog" aria-modal="true" aria-label="Help and shortcuts">
+    <div class="modal-card" style="max-width:540px">
+      <div class="modal-head"><h3>Help &amp; shortcuts</h3><button id="helpClose" class="iconbtn" title="Close" aria-label="Close">&#10005;</button></div>
+      <div class="help-list" id="helpList"></div>
+      <div class="modal-actions modal-actions-right"><button id="helpOk" class="primary">Got it</button></div>
+    </div>
+  </div>
+
   <div id="toast" class="toast hidden" role="status"></div>
 
   <script src="/static/canvas.js"></script>

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/static/canvas.js

@@ -10,7 +10,7 @@ const $ = (s) => document.querySelector(s);
 const figImg = $("#figImg"), overlay = $("#overlay"), guides = $("#guides"), stage = $("#stage"), stageInner = $("#stageInner");
 const SNAP_PX = 8;
 
-const state = { slug: null, name: null, spec: null, render: null, signals: [], selected: null, selection: new Set(), zoom: 1, pan: { x: 0, y: 0 }, gridCols: 3, nudging: false, history: [], future: [], sliderSnapshot: null, signalSel: new Set() };
+const state = { slug: null, name: null, spec: null, render: null, signals: [], selected: null, selection: new Set(), zoom: 1, pan: { x: 0, y: 0 }, gridCols: 3, nudging: false, history: [], future: [], sliderSnapshot: null, signalSel: new Set(), clipboard: null };
 
 /* ---------------- api ---------------- */
 async function api(path, opts) {
@@ -86,15 +86,23 @@ async function doRender(draft) {
   if (renderInFlight) { renderPending = true; renderPendingDraft = draft; return; }
   renderInFlight = true;
   const seq = ++renderSeq;
+  setRenderBusy(true);
   try {
     const r = await post(`/api/canvases/${state.slug}/render`, { spec: state.spec, draft });
     if (seq === renderSeq) { state.render = r; applyRender(); }
   } catch (e) { if (seq === renderSeq) toast("Render failed: " + e.message, true); }
   finally {
     renderInFlight = false;
+    setRenderBusy(false);
     if (renderPending) { const d = renderPendingDraft; renderPending = false; doRender(d); }
   }
 }
+// A subtle "Rendering…" pill in the stage corner while a render is in flight.
+function setRenderBusy(b) {
+  let el = document.getElementById("renderBusy");
+  if (b) { if (!el) { el = document.createElement("div"); el.id = "renderBusy"; el.className = "render-busy"; el.textContent = "Rendering…"; stage.appendChild(el); } el.style.display = "block"; }
+  else if (el) el.style.display = "none";
+}
 // fast low-res render during interaction; full-res when things settle
 function scheduleDraft() { clearTimeout(fullTimer); fullTimer = null; if (draftTimer) return; draftTimer = setTimeout(() => { draftTimer = null; doRender(true); }, 50); }
 function scheduleFull() { clearTimeout(draftTimer); draftTimer = null; if (fullTimer) return; fullTimer = setTimeout(() => { fullTimer = null; doRender(false); }, 250); }
@@ -115,7 +123,7 @@ function applyRender() {
       ? `<b style="color:var(--danger)">${oc} element${oc > 1 ? "s" : ""} off the canvas</b> &mdash; select it in Layers and drag it back, or enlarge the canvas`
       : "Drag a signal to add a plot &nbsp;&middot;&nbsp; Drag to move, handles to resize (snaps) &nbsp;&middot;&nbsp; Shift+click to multi-select &nbsp;&middot;&nbsp; Arrows to nudge (Shift = bigger) &nbsp;&middot;&nbsp; Drag empty space / space+drag to pan";
     const ae = document.activeElement;
-    const editing = ae && (ae.tagName === "INPUT" && ae.type === "text") || ae && ae.tagName === "SELECT";
+    const editing = ae && (ae.tagName === "TEXTAREA" || ae.tagName === "SELECT" || (ae.tagName === "INPUT" && /text|number|search|email|tel|url|password/.test(ae.type)));
     if (!editing) buildInspector();
   } catch (err) {
     console.error("applyRender:", err);
@@ -158,6 +166,32 @@ function drawGuides(gs) {
     guides.appendChild(el);
   }
 }
+// Unified snap model: every element's bbox in figure fractions. Plots come from the
+// spec (they have a rect); titles/labels/legends come from the server hotspots. This is
+// what lets guides work on text, not just plots.
+function snapModel(excludeId) {
+  const boxes = []; const r = state.render; if (!r) return boxes;
+  for (const p of state.spec.plots) boxes.push(p.rect.slice());
+  for (const h of r.hotspots) {
+    if (h.id === excludeId || h.id.startsWith("plot:")) continue;
+    boxes.push([h.x / r.img_w, 1 - (h.top + h.h) / r.img_h, h.w / r.img_w, h.h / r.img_h]);
+  }
+  return boxes;
+}
+// Position-only snap (unlike snapRect, it never changes a box's size, and it lets
+// labels sit slightly off-canvas). Mutates box[0]/box[1] and returns the guide lines.
+function snapBoxPos(box, others, imgW, imgH) {
+  const thrX = SNAP_PX / imgW, thrY = SNAP_PX / imgH;
+  const tx = [0, 0.25, 0.5, 0.75, 1], ty = [0, 0.25, 0.5, 0.75, 1];
+  for (const o of others) { tx.push(o[0], o[0] + o[2] / 2, o[0] + o[2]); ty.push(o[1], o[1] + o[3] / 2, o[1] + o[3]); }
+  const g = [];
+  const xE = [[v => box[0] = v, box[0]], [v => box[0] = v - box[2] / 2, box[0] + box[2] / 2], [v => box[0] = v - box[2], box[0] + box[2]]];
+  for (const [set, val] of xE) { for (const t of tx) { if (Math.abs(val - t) < thrX) { set(t); g.push({ axis: "v", f: t }); break; } } }
+  const yE = [[v => box[1] = v, box[1]], [v => box[1] = v - box[3] / 2, box[1] + box[3] / 2], [v => box[1] = v - box[3], box[1] + box[3]]];
+  for (const [set, val] of yE) { for (const t of ty) { if (Math.abs(val - t) < thrY) { set(t); g.push({ axis: "h", f: t }); break; } } }
+  box[0] = clamp(box[0], -0.2, 1.2); box[1] = clamp(box[1], -0.2, 1.2);
+  return g;
+}
 
 /* ---------------- overlays ---------------- */
 function buildOverlays() {
@@ -181,6 +215,7 @@ function buildOverlays() {
     div.style.left = (h.x / r.img_w * 100) + "%"; div.style.top = (h.top / r.img_h * 100) + "%";
     div.style.width = (h.w / r.img_w * 100) + "%"; div.style.height = (h.h / r.img_h * 100) + "%";
     makeMovable(div, h.id, "mov");
+    if (isCanvasMovable(h.id) && rotTarget(h.id)) addRotHandle(div, h.id);
     overlay.appendChild(div);
   }
   refreshSelection();
@@ -196,11 +231,78 @@ function isCanvasMovable(id) {
   }
   return false;
 }
+// The spec field an element's rotation lives in (text-family only; matplotlib
+// cannot rotate a whole axes panel, so plots get no rotation).
+function rotTarget(id) {
+  if (id.startsWith("figartist:")) { const fa = state.spec.figure_artists[+id.slice(10)]; if (fa && ["text", "suptitle"].includes(fa.type)) return { get: () => fa.rotation ?? 0, set: (d) => { fa.rotation = d; } }; return null; }
+  if (id.startsWith("title:")) { const p = state.spec.plots.find((x) => x.id === id.slice(6)); if (p) return { get: () => p.title.rotation ?? 0, set: (d) => { p.title.rotation = d; } }; return null; }
+  if (id.startsWith("artist:")) { const [, pid, j] = id.split(":"); const p = state.spec.plots.find((x) => x.id === pid); const a = p && p.artists[+j]; if (a && ["text", "annotation"].includes(a.type)) return { get: () => a.rotation ?? 0, set: (d) => { a.rotation = d; } }; return null; }
+  return null;
+}
+// Wix/PowerPoint-style rotation handle: a circle above the element; drag around
+// its center to rotate (Shift snaps to 15°). The overlay box is rotated live as
+// a preview; the real rotation comes from the draft render.
+function addRotHandle(movDiv, id) {
+  const h = document.createElement("div"); h.className = "rot-handle"; h.title = "Drag to rotate (Shift snaps to 15°)";
+  h.addEventListener("pointerdown", (e) => {
+    e.preventDefault(); e.stopPropagation();
+    h.setPointerCapture(e.pointerId);
+    const rect0 = movDiv.getBoundingClientRect();
+    const cx0 = rect0.left + rect0.width / 2, cy0 = rect0.top + rect0.height / 2;
+    const startAng = Math.atan2(e.clientY - cy0, e.clientX - cx0);
+    const tgt = rotTarget(id); const rot0 = tgt.get();
+    if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec);
+    // CSS rotate() is clockwise-positive (screen), matplotlib rotation is
+    // counterclockwise-positive, so the box preview is rotate(-spec).
+    movDiv.style.transform = `rotate(${-rot0}deg)`;
+    const onMove = (ev) => {
+      let d = (Math.atan2(ev.clientY - cy0, ev.clientX - cx0) - startAng) * 180 / Math.PI;  // CW-positive on screen
+      if (ev.shiftKey) d = Math.round(d / 15) * 15;
+      let S = Math.round(rot0 - d); S = ((S % 360) + 360) % 360; if (S > 180) S -= 360;  // spec (CCW+), normalized
+      tgt.set(S); movDiv.style.transform = `rotate(${-S}deg)`; scheduleDraft();
+    };
+    const onUp = (ev) => { try { h.releasePointerCapture(ev.pointerId); } catch (_) {} document.removeEventListener("pointermove", onMove); document.removeEventListener("pointerup", onUp); movDiv.style.transform = ""; commitSnapshot(); commit(); };
+    document.addEventListener("pointermove", onMove); document.addEventListener("pointerup", onUp);
+  });
+  movDiv.appendChild(h);
+}
 
 function refreshSelection() {
   overlay.querySelectorAll(".plotbox").forEach((d) => d.classList.toggle("selected", state.selection.has("plot:" + d.dataset.pid)));
   overlay.querySelectorAll(".mov").forEach((d) => d.classList.toggle("selected", state.selection.has(d.dataset.id)));
   document.querySelectorAll(".layer").forEach((l) => l.classList.toggle("active", l.dataset.id && state.selection.has(l.dataset.id)));
+  drawGroupBox();
+}
+// Dashed outline around a multi-selection so the group's extent is visible.
+function drawGroupBox() {
+  let gb = document.getElementById("groupBox");
+  if (state.selection.size < 2) { if (gb) gb.remove(); return; }
+  const r = state.render; if (!r) return;
+  let l = 1, b = 1, rr = 0, tt = 0, any = false;
+  const absorb = (box) => { if (!box) return; any = true; l = Math.min(l, box[0]); b = Math.min(b, box[1]); rr = Math.max(rr, box[0] + box[2]); tt = Math.max(tt, box[1] + box[3]); };
+  for (const id of state.selection) {
+    if (id.startsWith("plot:")) { const p = state.spec.plots.find((x) => x.id === id.slice(5)); if (p) absorb(p.rect); }
+    else { const h = r.hotspots.find((x) => x.id === id); if (h) absorb([h.x / r.img_w, 1 - (h.top + h.h) / r.img_h, h.w / r.img_w, h.h / r.img_h]); }
+  }
+  if (!any) return;
+  if (!gb) { gb = document.createElement("div"); gb.id = "groupBox"; overlay.appendChild(gb); }
+  gb.style.left = (l * 100) + "%"; gb.style.top = ((1 - tt) * 100) + "%";
+  gb.style.width = ((rr - l) * 100) + "%"; gb.style.height = ((tt - b) * 100) + "%";
+  gb.style.display = "block";
+}
+// Rubber-band select: everything whose bbox intersects the drag rect (in figure
+// fractions). Shift adds to the current selection.
+function marqueeSelect(x0, y0, x1, y1, base) {
+  const a = toFig(x0, y0), b = toFig(x1, y1);
+  const L = Math.min(a.fx, b.fx), R = Math.max(a.fx, b.fx);
+  const T = 1 - Math.min(a.fyTop, b.fyTop), B = 1 - Math.max(a.fyTop, b.fyTop);
+  const hit = (box) => box[0] < R && box[0] + box[2] > L && box[1] < T && box[1] + box[3] > B;
+  const sel = new Set(base);
+  for (const p of state.spec.plots) if (hit(p.rect)) sel.add("plot:" + p.id);
+  const r = state.render;
+  if (r) for (const h of r.hotspots) { if (h.id.startsWith("plot:")) continue; if (hit([h.x / r.img_w, 1 - (h.top + h.h) / r.img_h, h.w / r.img_w, h.h / r.img_h])) sel.add(h.id); }
+  state.selection = sel; state.selected = sel.size ? [...sel].pop() : null;
+  refreshSelection(); buildInspector();
 }
 
 /* ---------------- move / resize / drag ---------------- */
@@ -212,7 +314,7 @@ function makeMovable(el, id, mode) {
     const shift = e.shiftKey;
     const handle = (e.target.dataset && e.target.dataset.h) || null;
     const startF = toFig(e.clientX, e.clientY);
-    let moved = false, onMove, onUp, sx = 0, sy = 0;
+    let moved = false, onMove, onUp, sx = 0, sy = 0, lastDxF = 0, lastDyF = 0, isGroup = false, groupDivs = [el];
     if (mode === "box") {
       const p = state.spec.plots.find((x) => x.id === id.slice(5));
       const rect0 = p.rect.slice();
@@ -224,6 +326,9 @@ function makeMovable(el, id, mode) {
       onMove = (ev) => {
         const F = toFig(ev.clientX, ev.clientY);
         const dxF = F.fx - startF.fx, dyBF = startF.fyTop - F.fyTop;
+        if (!moved && Math.abs(dxF) * r.img_w * state.zoom < 3 && Math.abs(dyBF) * r.img_h * state.zoom < 3) return;  // sub-3px = a click, not a drag
+        if (!moved) pushHist();  // capture pre-drag state so a move/resize is undoable
+        moved = true;
         if (handle === null) {
           const rect = rect0.slice(); rect[0] += dxF; rect[1] += dyBF;
           const guides = snapRect(rect, others, r.img_w, r.img_h);
@@ -244,14 +349,31 @@ function makeMovable(el, id, mode) {
           Object.assign(el.style, rectToCss(rect));
         }
         scheduleDraft();
-        moved = true;
       };
     } else {
       sx = e.clientX; sy = e.clientY;
+      const r0 = state.render;
+      const imgWpx = r0 ? r0.img_w * state.zoom : 1, imgHpx = r0 ? r0.img_h * state.zoom : 1;
+      const hs0 = r0 && r0.hotspots.find((h) => h.id === id);
+      const startBox = hs0 ? [hs0.x / r0.img_w, 1 - (hs0.top + hs0.h) / r0.img_h, hs0.w / r0.img_w, hs0.h / r0.img_h] : null;
+      const others = startBox ? snapModel(id) : [];
+      isGroup = state.selection.size > 1 && state.selection.has(id);
+      groupDivs = isGroup ? [...overlay.querySelectorAll(".mov")].filter((d) => state.selection.has(d.dataset.id)) : [el];
       onMove = (ev) => {
         const dx = ev.clientX - sx, dy = ev.clientY - sy;
-        // el sits inside the zoomed stageInner, so its local px are screen px / zoom
-        if (dx || dy) { moved = true; el.style.transform = `translate(${dx / state.zoom}px,${dy / state.zoom}px)`; scheduleDraft(); }
+        if (!moved && Math.abs(dx) < 3 && Math.abs(dy) < 3) return;  // sub-3px = a click, not a drag
+        if (!moved) pushHist();  // capture pre-drag state so a move is undoable
+        moved = true;
+        let dxF = dx / imgWpx, dyF = -dy / imgHpx;
+        if (startBox) {
+          const box = startBox.slice(); box[0] += dxF; box[1] += dyF;
+          drawGuides(snapBoxPos(box, others, r0.img_w, r0.img_h));
+          lastDxF = box[0] - startBox[0]; lastDyF = box[1] - startBox[1];  // the snapped delta
+        } else { lastDxF = dxF; lastDyF = dyF; }
+        // el sits inside the zoomed stageInner, so its local px are screen px / zoom;
+        // a group drag moves every selected label by the same (snapped) delta.
+        groupDivs.forEach((d) => { d.style.transform = `translate(${lastDxF * imgWpx / state.zoom}px, ${-lastDyF * imgHpx / state.zoom}px)`; });
+        scheduleDraft();
       };
     }
     onUp = (ev) => {
@@ -259,9 +381,9 @@ function makeMovable(el, id, mode) {
       document.removeEventListener("pointerup", onUp);
       document.removeEventListener("pointercancel", onUp);
       drawGuides([]);
-      el.style.transform = "";
+      groupDivs.forEach((d) => { d.style.transform = ""; });
       if (!moved) { select(id, shift); return; }
-      if (mode !== "box") commitArtDrag(id, ev.clientX - sx, ev.clientY - sy);
+      if (mode !== "box") { const ids = isGroup ? [...state.selection] : [id]; for (const eid of ids) commitArtDrag(eid, lastDxF, lastDyF); }
       commit();
     };
     document.addEventListener("pointermove", onMove);
@@ -270,11 +392,9 @@ function makeMovable(el, id, mode) {
   });
 }
 
-function commitArtDrag(id, dxPx, dyPx) {
-  // Apply the drag DELTA (in figure fractions) to the element's own coordinates, so the
-  // element lands exactly where the user dropped it (the grab offset is preserved).
-  const rect = figImg.getBoundingClientRect();
-  const dxF = dxPx / rect.width, dyF = -dyPx / rect.height;
+function commitArtDrag(id, dxF, dyF) {
+  // Apply the drag DELTA (in figure fractions, already snapped) to the element's own
+  // coordinates, so the element lands exactly where the user dropped it.
   const r = state.spec;
   if (id.startsWith("title:")) {
     const pid = id.slice(6); const p = r.plots.find((x) => x.id === pid);
@@ -320,6 +440,47 @@ async function commit() {
   await doRender(false);
 }
 
+/* ---------------- clipboard (copy / paste / cut / duplicate) ----------------
+   Copies top-level elements: plots (with their artists/lines) and figure_artists.
+   Signal refs are name-based, so a same-figure paste is always valid. */
+function copySelection() {
+  const ids = state.selection.size ? [...state.selection] : (state.selected ? [state.selected] : []);
+  if (!ids.length) return;
+  const plotIds = new Set(ids.filter((i) => i.startsWith("plot:")).map((i) => i.slice(5)));
+  const figIdxs = ids.filter((i) => i.startsWith("figartist:")).map((i) => +i.slice(10));
+  const plots = state.spec.plots.filter((p) => plotIds.has(p.id)).map((p) => clone(p));
+  const figs = figIdxs.map((j) => clone(state.spec.figure_artists[j]));
+  if (!plots.length && !figs.length) return;
+  state.clipboard = { plots, figs };
+  toast("Copied " + (plots.length + figs.length) + " element" + (plots.length + figs.length > 1 ? "s" : ""));
+}
+function pasteClipboard() {
+  const cb = state.clipboard; if (!cb || (!cb.plots.length && !cb.figs.length)) return;
+  pushHist();
+  for (const p of cb.plots) { const c = clone(p); c.id = nextPlotId(); c.rect = [r4(clamp(c.rect[0] + 0.05, 0, 1)), r4(clamp(c.rect[1] + 0.05, 0, 1)), c.rect[2], c.rect[3]]; state.spec.plots.push(c); }
+  for (const f of cb.figs) { const c = clone(f); if (c.loc) c.loc = [r4(c.loc[0] + 0.05), r4(c.loc[1] + 0.05)]; else { c.x = r4((c.x || 0) + 0.05); c.y = r4((c.y || 0) + 0.05); } state.spec.figure_artists.push(c); }
+  select(null); commit();
+}
+function deleteSelection() {
+  if (!state.selected && !state.selection.size) return;
+  pushHist();
+  const ids = state.selection.size ? [...state.selection] : [state.selected];
+  const plotIds = new Set(ids.filter((id) => id.startsWith("plot:")).map((id) => id.slice(5)));
+  if (plotIds.size) state.spec.plots = state.spec.plots.filter((p) => !plotIds.has(p.id));
+  const artDel = new Map(), lineDel = new Map(), figDel = [];
+  for (const id of ids) {
+    if (id.startsWith("artist:")) { const [, pid, j] = id.split(":"); if (!artDel.has(pid)) artDel.set(pid, []); artDel.get(pid).push(+j); }
+    else if (id.startsWith("line:")) { const [, pid, j] = id.split(":"); if (!lineDel.has(pid)) lineDel.set(pid, []); lineDel.get(pid).push(+j); }
+    else if (id.startsWith("figartist:")) figDel.push(+id.slice(10));
+    else if (id.startsWith("title:")) { const p = state.spec.plots.find((x) => x.id === id.slice(6)); if (p) p.title.visible = false; }
+  }
+  // splice high-to-low so deleting several items at once doesn't shift the other indices
+  for (const [pid, js] of artDel) { const p = state.spec.plots.find((x) => x.id === pid); if (p) js.sort((a, b) => b - a).forEach((j) => p.artists.splice(j, 1)); }
+  for (const [pid, js] of lineDel) { const p = state.spec.plots.find((x) => x.id === pid); if (p && p.extra_lines) js.sort((a, b) => b - a).forEach((j) => p.extra_lines.splice(j, 1)); }
+  figDel.sort((a, b) => b - a).forEach((j) => state.spec.figure_artists.splice(j, 1));
+  select(null); commit();
+}
+
 let nudgePushed = false, nudgeTimer = null;
 function nudgeSelected(dx, dy) {
   const ids = state.selection.size ? [...state.selection] : (state.selected ? [state.selected] : []);
@@ -336,7 +497,16 @@ function nudgeOne(id, dx, dy) {
   if (kind === "plot") { const p = state.spec.plots.find((x) => x.id === pid); if (p) { p.rect[0] = clamp(r4(p.rect[0] + dx), 0, 1); p.rect[1] = clamp(r4(p.rect[1] + dy), 0, 1); } }
   else if (kind === "title") { const p = state.spec.plots.find((x) => x.id === pid); const t = p && p.title; if (t) { t.x = r4(clamp(t.x + dx / p.rect[2], -0.6, 1.6)); t.y = r4(clamp(t.y + dy / p.rect[3], -0.6, 1.6)); t.visible = true; } }
   else if (kind === "figartist") { const fa = state.spec.figure_artists[+pid]; if (fa) { if (fa.loc) { fa.loc[0] = r4(clamp(fa.loc[0] + dx, 0, 1.2)); fa.loc[1] = r4(clamp(fa.loc[1] + dy, -0.2, 1.2)); } else { fa.x = r4(clamp((fa.x || 0) + dx, -0.1, 1.1)); fa.y = r4(clamp((fa.y || 0) + dy, -0.1, 1.1)); } } }
-  else if (kind === "artist") { const p = state.spec.plots.find((x) => x.id === pid); const a = p && p.artists[j]; if (a) { if (a.type === "text" && a.axes_frac) { a.x = r4(clamp(a.x + dx / p.rect[2], -0.6, 1.6)); a.y = r4(clamp(a.y + dy / p.rect[3], -0.6, 1.6)); } else if (a.type === "vline") a.x = r4(a.x + dx * 8); else if (a.type === "hline") a.y = r4(a.y + dy * 8); else if (a.type === "circle" || a.type === "ellipse") { a.x = r4(a.x + dx * 8); a.y = r4(a.y + dy * 8); } } }
+  else if (kind === "artist") { const p = state.spec.plots.find((x) => x.id === pid); const a = p && p.artists[j]; if (a) {
+    if (a.type === "text" && a.axes_frac) { a.x = r4(clamp(a.x + dx / p.rect[2], -0.6, 1.6)); a.y = r4(clamp(a.y + dy / p.rect[3], -0.6, 1.6)); }
+    else if (a.type === "vline") a.x = r4(a.x + dx * 8);
+    else if (a.type === "hline") a.y = r4(a.y + dy * 8);
+    else if (a.type === "circle" || a.type === "ellipse") { a.x = r4(a.x + dx * 8); a.y = r4(a.y + dy * 8); }
+    else if (a.type === "box") { a.x0 = r4(clamp(a.x0 + dx, -0.2, 1.2)); a.y0 = r4(clamp(a.y0 + dy, -0.2, 1.2)); }
+    else if (a.type === "vspan") { a.x0 = r4(a.x0 + dx * 8); a.x1 = r4(a.x1 + dx * 8); }
+    else if (a.type === "annotation") { a.xytext = [r4(a.xytext[0] + dx), r4(a.xytext[1] + dy)]; }
+    else if (a.type === "arrow") { a.x0 = r4(a.x0 + dx * 8); a.y0 = r4(a.y0 + dy * 8); a.x1 = r4(a.x1 + dx * 8); a.y1 = r4(a.y1 + dy * 8); }
+  } }
 }
 
 /* ---------------- signal drag -> create plot ---------------- */
@@ -520,6 +690,8 @@ function addPlotAt(fx, fyB, signal) {
   pushHist();
   const w = 0.3, h = 0.3;
   const rect = [r4(clamp(fx - w / 2, 0, 1 - w)), r4(clamp(fyB - h / 2, 0, 1 - h)), w, h];
+  const r = state.render || { img_w: 1000, img_h: 1000 };
+  snapRect(rect, state.spec.plots.map((p) => p.rect), r.img_w, r.img_h);  // snap the new plot on drop
   const p = plotForSignal(signal, rect);
   state.spec.plots.push(p);
   select("plot:" + p.id);
@@ -701,7 +873,13 @@ function buildFigureElementsSection() {
 }
 
 function layoutAll(op, param) {
-  const plots = state.spec.plots; if (!plots.length) return;
+  // Act on the selected plots when a multi-selection is active, else all plots.
+  let plots = state.spec.plots;
+  if (state.selection.size > 1) {
+    const selIds = new Set([...state.selection].filter((i) => i.startsWith("plot:")).map((i) => i.slice(5)));
+    if (selIds.size > 1) plots = plots.filter((p) => selIds.has(p.id));
+  }
+  if (!plots.length) return;
   const L = state.spec.layout || { margin: 0.05, gap: 0.04 };
   const rects = plots.map((p) => p.rect);
   pushHist();
@@ -788,7 +966,7 @@ function plotTypeSelect(pid) {
   const p = state.spec.plots[idx(pid)];
   const w = document.createElement("div"); w.className = "ctl";
   const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = "Plot type"; head.appendChild(lab); w.appendChild(head);
-  const sel = document.createElement("select"); sel.className = "ctl-sel";
+  const sel = document.createElement("select"); sel.className = "ctl-sel"; sel.setAttribute("aria-label", "Plot type");
   const groups = {};
   for (const [k, v] of Object.entries(PLOT_TYPES)) (groups[v.group] = groups[v.group] || []).push([k, v.label]);
   for (const gname of Object.keys(groups)) {
@@ -835,9 +1013,11 @@ function buildPlotInspector(body, pid) {
   body.appendChild(ctlHead("Axes"));
   body.appendChild(ticksText("X ticks (blank = auto)", ["plots", idx(pid), "axes", "xticks"], p.axes.xticks));
   body.appendChild(ticksText("Y ticks (blank = auto)", ["plots", idx(pid), "axes", "yticks"], p.axes.yticks));
-  body.appendChild(text("X label", ["plots", idx(pid), "axes", "xlabel"], p.axes.xlabel));
+  body.appendChild(labelsText("X tick labels (blank = auto)", ["plots", idx(pid), "axes", "xticklabels"], p.axes.xticklabels));
+  body.appendChild(labelsText("Y tick labels (blank = auto)", ["plots", idx(pid), "axes", "yticklabels"], p.axes.yticklabels));
+  body.appendChild(text("X label", ["plots", idx(pid), "axes", "xlabel"], p.axes.xlabel, true));
   body.appendChild(check("Show X label", ["plots", idx(pid), "axes", "xlabel_visible"], p.axes.xlabel_visible));
-  body.appendChild(text("Y label", ["plots", idx(pid), "axes", "ylabel"], p.axes.ylabel));
+  body.appendChild(text("Y label", ["plots", idx(pid), "axes", "ylabel"], p.axes.ylabel, true));
   body.appendChild(check("Show Y label", ["plots", idx(pid), "axes", "ylabel_visible"], p.axes.ylabel_visible));
   body.appendChild(hint("Labels and titles support LaTeX mathtext, e.g. <code>$x_0$</code>."));
   body.appendChild(num2("X range (blank = auto)", ["plots", idx(pid), "axes", "xlim"], p.axes.xlim));
@@ -855,7 +1035,7 @@ function buildPlotInspector(body, pid) {
   body.appendChild(check("Show y tick labels", ["plots", idx(pid), "axes", "labelleft"], p.axes.labelleft));
   body.appendChild(ctlHead("Title"));
   body.appendChild(check("Show title", ["plots", idx(pid), "title", "visible"], p.title.visible));
-  body.appendChild(text("Title text", ["plots", idx(pid), "title", "text"], p.title.text));
+  body.appendChild(text("Title text", ["plots", idx(pid), "title", "text"], p.title.text, true));
   body.appendChild(slider("Title size", ["plots", idx(pid), "title", "fontsize"], p.title.fontsize, 6, 24, 0.5));
   body.appendChild(selControl("Title weight", ["plots", idx(pid), "title", "weight"], p.title.weight, [["normal", "Normal"], ["bold", "Bold"]]));
   body.appendChild(ctlHead("Artists"));
@@ -869,10 +1049,11 @@ const idx = (pid) => state.spec.plots.findIndex((p) => p.id === pid);
 
 function buildTitleInspector(body, pid) {
   const t = state.spec.plots.find((x) => x.id === pid).title;
-  body.appendChild(text("Title text", ["plots", idx(pid), "title", "text"], t.text));
+  body.appendChild(text("Title text", ["plots", idx(pid), "title", "text"], t.text, true));
   body.appendChild(slider("X (of panel)", ["plots", idx(pid), "title", "x"], t.x, -0.6, 1.6, 0.02));
   body.appendChild(slider("Y (of panel)", ["plots", idx(pid), "title", "y"], t.y, -0.6, 1.6, 0.02));
   body.appendChild(slider("Size (pt)", ["plots", idx(pid), "title", "fontsize"], t.fontsize, 6, 24, 0.5));
+  body.appendChild(slider("Rotation (deg)", ["plots", idx(pid), "title", "rotation"], t.rotation ?? 0, -180, 180, 1));
   body.appendChild(selControl("Weight", ["plots", idx(pid), "title", "weight"], t.weight, [["normal", "Normal"], ["bold", "Bold"]]));
   body.appendChild(color("Color", ["plots", idx(pid), "title", "color"], t.color));
   body.appendChild(hint("Drag the title on the canvas to reposition it freely."));
@@ -881,14 +1062,15 @@ function buildTitleInspector(body, pid) {
 function buildArtistInspector(body, pid, j) {
   const a = state.spec.plots.find((x) => x.id === pid).artists[j];
   const P = (k, v, mn, mx, st) => ["plots", idx(pid), "artists", j, k];
-  if (a.type === "vline") { body.appendChild(slider("X value", P("x", a.x), 0, 20, 0.5)); body.appendChild(color("Color", P("color"), a.color)); body.appendChild(selControl("Style", P("ls"), a.ls || "-", [["-", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"], ["dashdot", "Dash dot"]])); body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1)); body.appendChild(slider("Opacity", P("alpha"), a.alpha ?? 1, 0, 1, 0.05)); }
-  else if (a.type === "hline") { body.appendChild(slider("Y value", P("y", a.y), -1, 1, 0.05)); body.appendChild(color("Color", P("color"), a.color)); body.appendChild(selControl("Style", P("ls"), a.ls || "-", [["-", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"]])); body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1)); }
-  else if (a.type === "text") { body.appendChild(text("Text", P("text"), a.text)); body.appendChild(slider("X", P("x"), a.x, -1, 2, 0.02)); body.appendChild(slider("Y", P("y"), a.y, -1, 2, 0.02)); body.appendChild(check("Use panel fraction", P("axes_frac"), !!a.axes_frac)); body.appendChild(slider("Size", P("fontsize"), a.fontsize ?? 10, 6, 24, 0.5)); body.appendChild(color("Color", P("color"), a.color || "#000")); }
+  if (a.type === "vline") { body.appendChild(slider("X value", P("x", a.x), 0, 20, 0.5, null, true)); body.appendChild(color("Color", P("color"), a.color)); body.appendChild(selControl("Style", P("ls"), a.ls || "-", [["-", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"], ["dashdot", "Dash dot"]])); body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1)); body.appendChild(slider("Opacity", P("alpha"), a.alpha ?? 1, 0, 1, 0.05)); }
+  else if (a.type === "hline") { body.appendChild(slider("Y value", P("y", a.y), -1, 1, 0.05, null, true)); body.appendChild(color("Color", P("color"), a.color)); body.appendChild(selControl("Style", P("ls"), a.ls || "-", [["-", "Solid"], ["dotted", "Dotted"], ["dashed", "Dashed"]])); body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1)); }
+  else if (a.type === "text") { body.appendChild(text("Text", P("text"), a.text, true)); body.appendChild(slider("X", P("x"), a.x, -1, 2, 0.02)); body.appendChild(slider("Y", P("y"), a.y, -1, 2, 0.02)); body.appendChild(check("Use panel fraction", P("axes_frac"), !!a.axes_frac)); body.appendChild(slider("Size", P("fontsize"), a.fontsize ?? 10, 6, 24, 0.5)); body.appendChild(slider("Rotation (deg)", P("rotation"), a.rotation ?? 0, -180, 180, 1)); body.appendChild(color("Color", P("color"), a.color || "#000")); }
   else if (a.type === "annotation") {
-    body.appendChild(text("Text", P("text"), a.text));
+    body.appendChild(text("Text", P("text"), a.text, true));
     body.appendChild(num2("Arrow points to (data x, y)", P("xy"), a.xy));
     body.appendChild(num2("Label at (panel x, y)", P("xytext"), a.xytext));
     body.appendChild(slider("Label size", P("fontsize"), a.fontsize ?? 10, 6, 20, 0.5));
+    body.appendChild(slider("Rotation (deg)", P("rotation"), a.rotation ?? 0, -180, 180, 1));
     body.appendChild(slider("Arrow width", P("lw"), a.lw ?? 1.2, 0.3, 4, 0.1));
     body.appendChild(color("Color", P("color"), a.color || "#000"));
   }
@@ -903,22 +1085,22 @@ function buildArtistInspector(body, pid, j) {
     body.appendChild(slider("Edge width", P("lw"), a.lw ?? 1, 0, 4, 0.1));
   }
   else if (a.type === "vspan") {
-    body.appendChild(slider("X start (data)", P("x0"), a.x0, 0, 20, 0.5));
-    body.appendChild(slider("X end (data)", P("x1"), a.x1, 0, 20, 0.5));
+    body.appendChild(slider("X start (data)", P("x0"), a.x0, 0, 20, 0.5, null, true));
+    body.appendChild(slider("X end (data)", P("x1"), a.x1, 0, 20, 0.5, null, true));
     body.appendChild(color("Color", P("color"), a.color || "#b03a2e"));
     body.appendChild(slider("Opacity", P("alpha"), a.alpha ?? 0.12, 0, 0.6, 0.01));
   }
   else if (a.type === "circle") {
-    body.appendChild(slider("Center X (data)", P("x"), a.x, -10, 20, 0.2));
-    body.appendChild(slider("Center Y (data)", P("y"), a.y, -10, 10, 0.2));
+    body.appendChild(slider("Center X (data)", P("x"), a.x, -10, 20, 0.2, null, true));
+    body.appendChild(slider("Center Y (data)", P("y"), a.y, -10, 10, 0.2, null, true));
     body.appendChild(slider("Radius", P("r"), a.r ?? 1, 0.05, 10, 0.1));
     body.appendChild(check("Filled", P("fill"), !!a.fill));
     body.appendChild(color("Color", P("color"), a.color || "#000"));
     body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1));
   }
   else if (a.type === "ellipse") {
-    body.appendChild(slider("Center X (data)", P("x"), a.x, -10, 20, 0.2));
-    body.appendChild(slider("Center Y (data)", P("y"), a.y, -10, 10, 0.2));
+    body.appendChild(slider("Center X (data)", P("x"), a.x, -10, 20, 0.2, null, true));
+    body.appendChild(slider("Center Y (data)", P("y"), a.y, -10, 10, 0.2, null, true));
     body.appendChild(slider("Width", P("w"), a.w ?? 2, 0.1, 10, 0.1));
     body.appendChild(slider("Height", P("h"), a.h ?? 1, 0.1, 10, 0.1));
     body.appendChild(slider("Angle (deg)", P("angle"), a.angle ?? 0, -180, 180, 5));
@@ -930,13 +1112,29 @@ function buildArtistInspector(body, pid, j) {
     body.appendChild(check("Filled", P("fill"), !!a.fill));
     body.appendChild(color("Color", P("color"), a.color || "#000"));
     body.appendChild(slider("Width", P("lw"), a.lw ?? 1, 0.2, 4, 0.1));
-    body.appendChild(hint("Default 3-point triangle; edit points in the spec for custom shapes."));
+    const pts = (a.points && a.points.length) ? a.points.slice() : [[4, 0], [6, 0], [5, 1]];
+    body.appendChild(ctlHead("Points (data coords)"));
+    const plist = document.createElement("div"); plist.className = "art-list";
+    pts.forEach((pt, vi) => {
+      const r2 = document.createElement("div"); r2.className = "num-row";
+      const nx = document.createElement("input"), ny = document.createElement("input"), sep = document.createElement("span");
+      sep.className = "sep"; sep.textContent = ","; nx.type = ny.type = "text"; nx.value = pt[0]; ny.value = pt[1];
+      const up = () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); a.points = pts.map((q, i) => (i === vi ? [parseFloat(nx.value) || 0, parseFloat(ny.value) || 0] : q)); scheduleDraft(); };
+      nx.addEventListener("input", up); ny.addEventListener("input", up);
+      nx.addEventListener("change", () => { commitSnapshot(); commit(); }); ny.addEventListener("change", () => { commitSnapshot(); commit(); });
+      const rmv = document.createElement("span"); rmv.textContent = "×"; rmv.style.cssText = "cursor:pointer;color:var(--faint);padding:0 6px";
+      rmv.onclick = () => { pushHist(); pts.splice(vi, 1); a.points = pts.slice(); select("artist:" + pid + ":" + j); commit(); };
+      r2.append(nx, sep, ny, rmv); plist.appendChild(r2);
+    });
+    const addPt = document.createElement("button"); addPt.className = "pill"; addPt.textContent = "+ Point";
+    addPt.onclick = () => { pushHist(); pts.push([5, 5]); a.points = pts.slice(); select("artist:" + pid + ":" + j); commit(); };
+    body.appendChild(plist); body.appendChild(addPt);
   }
   else if (a.type === "arrow") {
-    body.appendChild(slider("From X", P("x0"), a.x0, -10, 20, 0.2));
-    body.appendChild(slider("From Y", P("y0"), a.y0, -10, 10, 0.2));
-    body.appendChild(slider("To X", P("x1"), a.x1, -10, 20, 0.2));
-    body.appendChild(slider("To Y", P("y1"), a.y1, -10, 10, 0.2));
+    body.appendChild(slider("From X", P("x0"), a.x0, -10, 20, 0.2, null, true));
+    body.appendChild(slider("From Y", P("y0"), a.y0, -10, 10, 0.2, null, true));
+    body.appendChild(slider("To X", P("x1"), a.x1, -10, 20, 0.2, null, true));
+    body.appendChild(slider("To Y", P("y1"), a.y1, -10, 10, 0.2, null, true));
     body.appendChild(color("Color", P("color"), a.color || "#000"));
     body.appendChild(slider("Width", P("lw"), a.lw ?? 1.5, 0.3, 4, 0.1));
   }
@@ -950,10 +1148,11 @@ function buildFigartistInspector(body, j) {
   const fa = state.spec.figure_artists[j];
   const P = (...k) => ["figure_artists", j, ...k];
   if (fa.type === "text") {
-    body.appendChild(text("Text", P("text"), fa.text));
+    body.appendChild(text("Text", P("text"), fa.text, true));
     body.appendChild(slider("X", P("x"), fa.x, 0, 1, 0.01));
     body.appendChild(slider("Y", P("y"), fa.y, 0, 1, 0.01));
     body.appendChild(slider("Size (pt)", P("fontsize"), fa.fontsize ?? 12, 6, 26, 0.5));
+    body.appendChild(slider("Rotation (deg)", P("rotation"), fa.rotation ?? 0, -180, 180, 1));
     body.appendChild(color("Color", P("color"), fa.color || "#000"));
   } else if (fa.type === "legend") {
     body.appendChild(slider("Size (pt)", P("fontsize"), fa.fontsize ?? 10, 6, 20, 0.5));
@@ -967,25 +1166,29 @@ function buildFigartistInspector(body, j) {
       const tin = document.createElement("input"); tin.type = "text"; tin.value = lb; tin.style.flex = "2";
       tin.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); fa.labels[i] = tin.value; scheduleDraft(); });
       tin.addEventListener("change", () => { commitSnapshot(); commit(); });
-      const mk = document.createElement("select"); mk.className = "ctl-sel"; mk.style.cssText = "width:auto;flex:0 0 auto;padding:4px 6px";
+      const mk = document.createElement("select"); mk.className = "ctl-sel"; mk.setAttribute("aria-label", "Entry marker"); mk.style.cssText = "width:auto;flex:0 0 auto;padding:4px 6px";
       for (const [v, l] of [["", "— line"], ["o", "o dot"], ["^", "^ tri"], ["s", "s sq"], ["D", "D dia"]]) { const o = document.createElement("option"); o.value = v; o.textContent = l; mk.appendChild(o); }
       mk.value = (fa.handles[i] && fa.handles[i].marker) || "";
       mk.addEventListener("change", () => { pushHist(); fa.handles = fa.handles || []; fa.handles[i] = fa.handles[i] || {}; fa.handles[i].marker = mk.value; fa.handles[i].ms = mk.value ? 3 : 0; commit(); });
-      const ls = document.createElement("select"); ls.className = "ctl-sel"; ls.style.cssText = "width:auto;flex:0 0 auto;padding:4px 6px";
+      const ls = document.createElement("select"); ls.className = "ctl-sel"; ls.setAttribute("aria-label", "Entry line style"); ls.style.cssText = "width:auto;flex:0 0 auto;padding:4px 6px";
       for (const [v, l] of [["-", "solid"], ["dotted", "dotted"], ["dashed", "dashed"]]) { const o = document.createElement("option"); o.value = v; o.textContent = l; ls.appendChild(o); }
       ls.value = (fa.handles[i] && fa.handles[i].ls) || "-";
       ls.addEventListener("change", () => { pushHist(); fa.handles = fa.handles || []; fa.handles[i] = fa.handles[i] || {}; fa.handles[i].ls = ls.value; commit(); });
+      const ci = document.createElement("input"); ci.type = "color"; ci.title = "Entry color"; const _hc = (fa.handles[i] && fa.handles[i].color) || ""; ci.value = /^#[0-9a-f]{6}$/i.test(_hc) ? _hc : "#b03a2e"; ci.style.cssText = "width:26px;height:22px;padding:1px;border:1px solid var(--line);border-radius:5px;background:var(--input-bg);flex:0 0 auto";
+      ci.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); fa.handles[i] = fa.handles[i] || {}; fa.handles[i].color = ci.value; scheduleDraft(); });
+      ci.addEventListener("change", () => { commitSnapshot(); commit(); });
       const rm = document.createElement("span"); rm.textContent = "×"; rm.style.cssText = "cursor:pointer;color:var(--faint);padding:0 6px;font-size:15px";
       rm.onclick = () => { pushHist(); fa.labels.splice(i, 1); (fa.handles || []).splice(i, 1); select("figartist:" + j); commit(); };
-      row.append(tin, mk, ls, rm); elist.appendChild(row);
+      row.append(tin, ci, mk, ls, rm); elist.appendChild(row);
     });
     body.appendChild(elist);
     const addE = document.createElement("button"); addE.className = "pill"; addE.textContent = "+ Entry";
     addE.onclick = () => { pushHist(); fa.labels = fa.labels || []; fa.handles = fa.handles || []; fa.labels.push("entry"); fa.handles.push({ color: "#b03a2e", lw: 1.5 }); select("figartist:" + j); commit(); };
     body.appendChild(addE);
   } else if (fa.type === "suptitle") {
-    body.appendChild(text("Text", P("text"), fa.text));
+    body.appendChild(text("Text", P("text"), fa.text, true));
     body.appendChild(slider("Size (pt)", P("fontsize"), fa.fontsize ?? 14, 6, 26, 0.5));
+    body.appendChild(slider("Rotation (deg)", P("rotation"), fa.rotation ?? 0, -180, 180, 1));
     body.appendChild(color("Color", P("color"), fa.color || "#000"));
   }
   body.appendChild(ctlHead(""));
@@ -996,7 +1199,7 @@ function buildFigartistInspector(body, j) {
 
 function errorbarSelect(p) {
   const w = document.createElement("div"); w.className = "ctl"; w.appendChild(ctlHead("Error bars (±)"));
-  const sel = document.createElement("select"); sel.className = "ctl-sel";
+  const sel = document.createElement("select"); sel.className = "ctl-sel"; sel.setAttribute("aria-label", "Error bars");
   const none = document.createElement("option"); none.value = ""; none.textContent = "(none)"; sel.appendChild(none);
   for (const s of state.signals) { const o = document.createElement("option"); o.value = s.ref; o.textContent = s.label; sel.appendChild(o); }
   sel.value = p.data.errorbar ? p.data.errorbar.ref : "";
@@ -1060,7 +1263,7 @@ function buildArtistList(body, pid) {
 /* ---------------- control builders ---------------- */
 function ctlHead(t) { const h = document.createElement("div"); h.className = "section"; h.textContent = t; return h; }
 function hint(t) { const h = document.createElement("div"); h.className = "hint"; h.innerHTML = t; return h; }
-function slider(label, path, val, min, max, step, afterChange) {
+function slider(label, path, val, min, max, step, afterChange, noClamp) {
   const w = document.createElement("div"); w.className = "ctl";
   const head = document.createElement("div"); head.className = "ctl-head";
   const lab = document.createElement("label"); lab.textContent = label;
@@ -1071,7 +1274,7 @@ function slider(label, path, val, min, max, step, afterChange) {
   const vv = document.createElement("input"); vv.type = "text"; vv.className = "val num-in";
   vv.inputMode = "decimal"; vv.spellcheck = false; vv.setAttribute("aria-label", label + " value");
   head.append(lab, vv); w.appendChild(head);
-  const inp = document.createElement("input"); inp.type = "range"; inp.min = min; inp.max = max; inp.step = step;
+  const inp = document.createElement("input"); inp.type = "range"; inp.min = min; inp.max = max; inp.step = step; inp.setAttribute("aria-label", label + " (slider)");
   let cur = val;
   const paint = () => { if (document.activeElement !== vv) vv.value = fmt(cur, step); inp.value = cur; };
   paint();
@@ -1085,7 +1288,9 @@ function slider(label, path, val, min, max, step, afterChange) {
   function commitVal() {
     const v = parseFloat(vv.value);
     if (isNaN(v)) { paint(); return; }               // not a number: keep the last good value
-    const cv = Math.max(min, Math.min(max, v));      // clamp to the slider's range
+    // Data-coordinate fields (noClamp) take the typed value as authoritative; the
+    // range only bounds coarse dragging. Everything else clamps to the slider range.
+    const cv = noClamp ? v : Math.max(min, Math.min(max, v));
     if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec);
     cur = cv; setPath(state.spec, path, cv); inp.value = cv; vv.value = fmt(cv, step);
     commitSnapshot(); if (afterChange) afterChange(); commit();
@@ -1097,38 +1302,67 @@ function slider(label, path, val, min, max, step, afterChange) {
   });
   w.appendChild(inp); return w;
 }
-function text(label, path, val) {
+// Esc in a half-edited text field reverts to the pre-edit snapshot (not a commit).
+function wireEscRevert(el) {
+  el.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && state.sliderSnapshot) {
+      e.preventDefault(); e.stopPropagation();
+      state.spec = state.sliderSnapshot; state.sliderSnapshot = null; updateHist(); commit();
+    }
+  });
+}
+function text(label, path, val, multiline) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
-  const inp = document.createElement("input"); inp.type = "text"; inp.value = val == null ? "" : val;
+  const inp = document.createElement(multiline ? "textarea" : "input");
+  if (multiline) { inp.rows = 2; inp.className = "ctl-area"; } else { inp.type = "text"; }
+  inp.value = val == null ? "" : val; inp.placeholder = "Text… (LaTeX like $x_0$ works)"; inp.spellcheck = false; inp.setAttribute("aria-label", label);
   inp.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, inp.value); scheduleDraft(); });
   inp.addEventListener("change", () => { commitSnapshot(); commit(); });
+  wireEscRevert(inp);
   w.appendChild(inp); return w;
 }
 function ticksText(label, path, val) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
-  const inp = document.createElement("input"); inp.type = "text"; inp.value = Array.isArray(val) ? val.join(", ") : "";
+  const inp = document.createElement("input"); inp.type = "text"; inp.value = Array.isArray(val) ? val.join(", ") : ""; inp.placeholder = "e.g. 0, 5, 10";
   const parse = () => { const t = inp.value.trim(); return t ? t.split(",").map((s) => parseFloat(s.trim())).filter((n) => !isNaN(n)) : "auto"; };
   inp.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, parse()); scheduleDraft(); });
   inp.addEventListener("change", () => { commitSnapshot(); commit(); });
+  wireEscRevert(inp);
+  w.appendChild(inp); return w;
+}
+// Comma-separated STRING list (custom tick labels; LaTeX allowed, blank = none).
+function labelsText(label, path, val) {
+  const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
+  const inp = document.createElement("input"); inp.type = "text"; inp.value = Array.isArray(val) ? val.join(", ") : ""; inp.placeholder = "e.g. a, b, c (LaTeX ok)"; inp.spellcheck = false;
+  const parse = () => { const t = inp.value.trim(); return t ? t.split(",").map((s) => s.trim()) : null; };
+  inp.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, parse()); scheduleDraft(); });
+  inp.addEventListener("change", () => { commitSnapshot(); commit(); });
+  wireEscRevert(inp);
   w.appendChild(inp); return w;
 }
 function num2(label, path, val) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
   const row = document.createElement("div"); row.className = "num-row";
-  const a = document.createElement("input"), b = document.createElement("input"), sep = document.createElement("span"); sep.className = "sep"; sep.textContent = "–"; a.type = b.type = "text";
+  const a = document.createElement("input"), b = document.createElement("input"), sep = document.createElement("span"); sep.className = "sep"; sep.textContent = "–"; a.type = b.type = "text"; a.placeholder = "min"; b.placeholder = "max";
   a.value = val ? val[0] : ""; b.value = val ? val[1] : "";
   const parse = () => { const x = parseFloat(a.value), y = parseFloat(b.value); return (a.value && b.value && !isNaN(x) && !isNaN(y)) ? [x, y] : null; };
   a.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, parse()); scheduleDraft(); }); b.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, parse()); scheduleDraft(); });
   a.addEventListener("change", () => { commitSnapshot(); commit(); }); b.addEventListener("change", () => { commitSnapshot(); commit(); });
+  wireEscRevert(a); wireEscRevert(b);
   row.append(a, sep, b); w.appendChild(row); return w;
 }
 function color(label, path, val) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
   const row = document.createElement("div"); row.className = "color-row";
-  const inp = document.createElement("input"); inp.type = "color"; inp.value = val || "#000000";
-  const hex = document.createElement("span"); hex.className = "color-hex"; hex.textContent = val || "#000000";
-  inp.addEventListener("input", () => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, inp.value); hex.textContent = inp.value; scheduleDraft(); });
+  const isHex = (v) => /^#[0-9a-f]{6}$/i.test(v || "");
+  const inp = document.createElement("input"); inp.type = "color"; inp.value = isHex(val) ? val : "#000000"; inp.setAttribute("aria-label", label + " (color picker)");
+  const hex = document.createElement("input"); hex.type = "text"; hex.className = "color-hex"; hex.value = val || "#000000"; hex.spellcheck = false; hex.placeholder = "#rrggbb or tab:red"; hex.setAttribute("aria-label", label + " (hex or name)");
+  const apply = (v) => { if (state.sliderSnapshot === null) state.sliderSnapshot = clone(state.spec); setPath(state.spec, path, v); if (isHex(v)) inp.value = v; scheduleDraft(); };
+  inp.addEventListener("input", () => { apply(inp.value); hex.value = inp.value; });
   inp.addEventListener("change", () => { commitSnapshot(); commit(); });
+  hex.addEventListener("input", () => { apply(hex.value); });
+  hex.addEventListener("change", () => { commitSnapshot(); commit(); });
+  wireEscRevert(hex);
   row.append(inp, hex); w.appendChild(row); return w;
 }
 function check(label, path, val) {
@@ -1145,20 +1379,20 @@ function checkInline(label, path, val) {
 }
 function selControl(label, path, val, options) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
-  const sel = document.createElement("select"); sel.className = "ctl-sel";
+  const sel = document.createElement("select"); sel.className = "ctl-sel"; sel.setAttribute("aria-label", label);
   for (const [v, l] of options) { const o = document.createElement("option"); o.value = v; o.textContent = l; if (v === val) o.selected = true; sel.appendChild(o); }
   sel.addEventListener("change", () => { pushHist(); setPath(state.spec, path, sel.value); commit(); });
   w.appendChild(sel); return w;
 }
 function sigSelect(label, path, val, allowNone) {
   const w = document.createElement("div"); w.className = "ctl"; const head = document.createElement("div"); head.className = "ctl-head"; const lab = document.createElement("label"); lab.textContent = label; head.appendChild(lab); w.appendChild(head);
-  const sel = document.createElement("select"); sel.className = "ctl-sel";
+  const sel = document.createElement("select"); sel.className = "ctl-sel"; sel.setAttribute("aria-label", label);
   if (allowNone) { const o = document.createElement("option"); o.value = ""; o.textContent = "(none)"; if (!val) o.selected = true; sel.appendChild(o); }
   for (const s of state.signals) { const o = document.createElement("option"); o.value = s.ref; o.textContent = s.label + (s.ndim > 1 ? " (" + s.shape.join("×") + ")" : ""); if (s.ref === val) o.selected = true; sel.appendChild(o); }
   sel.addEventListener("change", () => { pushHist(); setPath(state.spec, path, sel.value || null); commit(); });
   w.appendChild(sel); return w;
 }
-function fmt(v, step) { if (v == null) return "(default)"; return step < 1 ? String(Math.round(v * 100) / 100) : String(Math.round(v)); }
+function fmt(v, step) { if (v == null) return "(default)"; const dp = step >= 1 ? 0 : Math.min(6, Math.ceil(-Math.log10(step) + 1e-9)); return String(Number(v.toFixed(dp))); }
 
 /* ---------------- zoom ---------------- */
 function applyTransform() {
@@ -1195,7 +1429,7 @@ function fitZoom() {
 async function openExport() {
   const { code } = await get(`/api/canvases/${state.slug}/code`);
   $("#codeBody").textContent = code; $("#codePath").textContent = (state.name || "canvas") + ".py";
-  $("#exportModal").classList.remove("hidden");
+  openModal($("#exportModal"));
 }
 
 /* ---------------- 3-D view finder (double-click a 3-D plot) ---------------- */
@@ -1223,7 +1457,7 @@ async function openView3D(pid) {
   $("#v3e").value = v3d.elev; $("#v3a").value = v3d.azim; $("#v3d").value = v3d.dist;
   $("#v3invR").checked = v3d.invertR; $("#v3invZ").checked = v3d.invertZ;
   v3dVals();
-  $("#view3dModal").classList.remove("hidden");
+  openModal($("#view3dModal"));
   v3dRender();
 }
 function v3dRender() {
@@ -1267,17 +1501,45 @@ function v3dWire() {
     pushHist();
     const p = state.spec.plots.find((x) => x.id === v3d.pid);
     p.style.elev = v3d.elev; p.style.azim = v3d.azim; p.style.dist = v3d.dist;
-    $("#view3dModal").classList.add("hidden");
+    closeModal($("#view3dModal"));
     commit();
   };
-  const close = () => $("#view3dModal").classList.add("hidden");
+  const close = () => closeModal($("#view3dModal"));
   $("#v3dCancel").onclick = close; $("#view3dClose").onclick = close;
   $("#view3dModal").onclick = (e) => { if (e.target === $("#view3dModal")) close(); };
 }
 
 /* ---------------- toast ---------------- */
 let toastTimer;
-function toast(msg, isErr) { const t = $("#toast"); t.textContent = msg; t.style.background = isErr ? "var(--danger)" : "#1c2026"; t.classList.remove("hidden"); requestAnimationFrame(() => t.classList.add("show")); clearTimeout(toastTimer); toastTimer = setTimeout(() => { t.classList.remove("show"); setTimeout(() => t.classList.add("hidden"), 200); }, 2200); }
+function toast(msg, isErr) { const t = $("#toast"); t.textContent = msg; t.style.background = isErr ? "var(--danger)" : "var(--toast-bg)"; t.classList.remove("hidden"); requestAnimationFrame(() => t.classList.add("show")); clearTimeout(toastTimer); toastTimer = setTimeout(() => { t.classList.remove("show"); setTimeout(() => t.classList.add("hidden"), 200); }, isErr ? 4000 : 2200); }
+
+/* ---------------- modal focus management ----------------
+   Move focus into the dialog on open, trap Tab within it, and restore focus to
+   the trigger on close (a11y: aria-modal="true" without a trap lets Tab escape). */
+let modalLastFocus = null;
+function _focusables(el) { return [...el.querySelectorAll("button, input, select, textarea")].filter((n) => !n.disabled && n.offsetParent !== null); }
+function openModal(el) { modalLastFocus = document.activeElement; el.classList.remove("hidden"); el._onTrap = (e) => { if (e.key !== "Tab") return; const f = _focusables(el); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; el.addEventListener("keydown", el._onTrap); const f = _focusables(el); if (f.length) f[0].focus(); }
+function closeModal(el) { el.classList.add("hidden"); if (el._onTrap) { el.removeEventListener("keydown", el._onTrap); el._onTrap = null; } if (modalLastFocus && modalLastFocus.focus) { try { modalLastFocus.focus(); } catch (_) {} } }
+// Styled confirm (replaces the native window.confirm) — resolves true/false.
+function confirmDialog(message, okLabel) {
+  return new Promise((resolve) => {
+    let box = document.getElementById("confirmModal");
+    if (!box) {
+      box = document.createElement("div"); box.id = "confirmModal"; box.className = "modal hidden"; box.setAttribute("role", "dialog"); box.setAttribute("aria-modal", "true");
+      box.innerHTML = `<div class="modal-card"><h3>Confirm</h3><p class="confirm-msg"></p><div class="modal-actions modal-actions-right"><button class="textbtn confirm-cancel">Cancel</button><button class="primary confirm-ok"></button></div></div>`;
+      document.body.appendChild(box);
+    }
+    box.querySelector(".confirm-msg").textContent = message;
+    const ok = box.querySelector(".confirm-ok"), cancel = box.querySelector(".confirm-cancel");
+    ok.textContent = okLabel || "Confirm";
+    let settled = false;
+    const done = (v) => { if (settled) return; settled = true; box.classList.add("hidden"); box.onclick = null; ok.onclick = cancel.onclick = null; resolve(v); };
+    ok.onclick = () => done(true);
+    cancel.onclick = () => done(false);
+    box.onclick = (e) => { if (e.target === box) done(false); };
+    openModal(box);
+  });
+}
 
 /* ---------------- boot ---------------- */
 async function boot() {
@@ -1289,6 +1551,7 @@ async function boot() {
     doc = await get(`/api/canvases/${slug}`);
   } catch (e) { return showLoadError(e); }
   state.name = doc.name;
+  document.title = "Fig Foundry — " + state.name;
   state.spec = doc.spec;
   state.dataset = doc.spec.dataset || null;
   let sigRes;
@@ -1311,11 +1574,32 @@ function showLoadError(e) {
 }
 function wireChrome() {
   v3dWire();
+  // The key handler accepts ⌘ on macOS (metaKey); make the visible labels match.
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  const MOD = isMac ? "⌘" : "Ctrl";
+  $("#undoBtn").title = "Undo (" + MOD + "+Z)";
+  $("#redoBtn").title = "Redo (" + MOD + "Shift+Z)";
   $("#themeBtn").onclick = cycleTheme;
+  // Help / shortcuts modal
+  const helpRows = [
+    [MOD + "+Z", "Undo"], [MOD + "+Shift+Z", "Redo"],
+    [MOD + "+A", "Select all"], [MOD + "+C / V / X", "Copy / paste / cut"], [MOD + "+D", "Duplicate"],
+    ["Delete / Backspace", "Delete selection"], ["Esc", "Deselect / close dialog"],
+    ["Arrow keys", "Nudge (Shift = bigger)"], ["Shift+click", "Add to / remove from selection"],
+    ["Drag empty space", "Marquee select"], ["Space+drag / middle-drag", "Pan"],
+    ["Scroll", "Zoom"], ["Double-click a 3-D plot", "Open the viewfinder"],
+  ];
+  $("#helpList").innerHTML = helpRows.map(([k, d]) => `<span class="k">${k}</span><span class="d">${d}</span>`).join("");
+  const helpModal = $("#helpModal");
+  $("#helpBtn").onclick = () => openModal(helpModal);
+  $("#helpClose").onclick = () => closeModal(helpModal);
+  $("#helpOk").onclick = () => closeModal(helpModal);
+  helpModal.onclick = (e) => { if (e.target === helpModal) closeModal(helpModal); };
   $("#backBtn").onclick = () => { location.href = "/"; };
   $("#figName").addEventListener("change", async () => {
     state.name = $("#figName").value.trim() || "Untitled";
     $("#figName").value = state.name;
+    document.title = "Fig Foundry — " + state.name;
     await api(`/api/canvases/${state.slug}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: state.name }) });
     toast("Renamed to " + state.name);
   });
@@ -1325,7 +1609,7 @@ function wireChrome() {
     location.href = "/canvas?slug=" + r.slug;
   };
   $("#deleteBtn").onclick = async () => {
-    if (!confirm('Delete "' + state.name + '"? This cannot be undone.')) return;
+    if (!(await confirmDialog('Delete "' + state.name + '"? This cannot be undone.', "Delete"))) return;
     await api(`/api/canvases/${state.slug}`, { method: "DELETE" });
     location.href = "/";
   };
@@ -1334,58 +1618,78 @@ function wireChrome() {
   $("#addPlotBtn").onclick = () => { pushHist(); const sg = state.signals.filter((s) => s.ndim === 1); const x = sg.find((s) => s.name === "x") || sg[0]; const y = sg.find((s) => s !== x) || sg[0]; const p = _blankPlot(nextPlotId(), [0.35, 0.35, 0.3, 0.3], x ? x.ref : null, y ? y.ref : null); p.type = "line"; state.spec.plots.push(p); select("plot:" + p.id); commit(); };
   $("#loadDataBtn").onclick = (e) => { e.stopPropagation(); loadDataMenu(e.clientX, e.clientY); };
   $("#exportBtn").onclick = openExport;
-  $("#modalClose").onclick = () => $("#exportModal").classList.add("hidden");
-  $("#exportModal").onclick = (e) => { if (e.target === $("#exportModal")) $("#exportModal").classList.add("hidden"); };
+  $("#modalClose").onclick = () => closeModal($("#exportModal"));
+  $("#exportModal").onclick = (e) => { if (e.target === $("#exportModal")) closeModal($("#exportModal")); };
   $("#copyCode").onclick = async () => { try { await navigator.clipboard.writeText($("#codeBody").textContent); toast("Code copied"); } catch (e) { toast("Copy failed", true); } };
   $("#downloadCode").onclick = () => { location.href = `/api/canvases/${state.slug}/download`; toast("Downloading " + (state.name || "canvas") + ".py"); };
   $("#dlPng").onclick = () => { location.href = `/api/canvases/${state.slug}/figure?format=png`; };
   $("#dlSvg").onclick = () => { location.href = `/api/canvases/${state.slug}/figure?format=svg`; };
   $("#dlPdf").onclick = () => { location.href = `/api/canvases/${state.slug}/figure?format=pdf`; };
-  let pan = null, spaceDown = false;
+  let pan = null, spaceDown = false, marquee = null, marqueeEl = null;
   stage.addEventListener("wheel", (e) => { if (!state.render) return; e.preventDefault(); setZoom(state.zoom * (e.deltaY < 0 ? 1.12 : 1 / 1.12), e.clientX, e.clientY); }, { passive: false });
   stage.addEventListener("pointerdown", (e) => {
     const empty = e.target === stage || e.target === stageInner || e.target === figImg || e.target === overlay;
-    if (e.button === 1 || (e.button === 0 && (empty || spaceDown))) {
+    if (e.button === 1 || (e.button === 0 && spaceDown)) {
       e.preventDefault();
       stage.setPointerCapture(e.pointerId);  // pointerup is delivered even if released outside the window
-      pan = { x: e.clientX, y: e.clientY, px: state.pan.x, py: state.pan.y, clickEmpty: e.button === 0 && empty && !spaceDown };
+      pan = { x: e.clientX, y: e.clientY, px: state.pan.x, py: state.pan.y };
+    } else if (e.button === 0 && empty && !spaceDown) {
+      e.preventDefault();
+      stage.setPointerCapture(e.pointerId);
+      marquee = { x0: e.clientX, y0: e.clientY, x1: e.clientX, y1: e.clientY, base: e.shiftKey ? new Set(state.selection) : new Set() };
+      if (!marqueeEl) { marqueeEl = document.createElement("div"); marqueeEl.className = "marquee"; stage.appendChild(marqueeEl); }
+      marqueeEl.style.display = "block";
+    }
+  });
+  window.addEventListener("pointermove", (e) => {
+    if (pan) { state.pan.x = pan.px + (e.clientX - pan.x); state.pan.y = pan.py + (e.clientY - pan.y); applyTransform(); }
+    if (marquee) {
+      marquee.x1 = e.clientX; marquee.y1 = e.clientY;
+      const sr = stage.getBoundingClientRect();
+      marqueeEl.style.left = (Math.min(marquee.x0, marquee.x1) - sr.left) + "px";
+      marqueeEl.style.top = (Math.min(marquee.y0, marquee.y1) - sr.top) + "px";
+      marqueeEl.style.width = Math.abs(marquee.x1 - marquee.x0) + "px";
+      marqueeEl.style.height = Math.abs(marquee.y1 - marquee.y0) + "px";
     }
   });
-  window.addEventListener("pointermove", (e) => { if (!pan) return; state.pan.x = pan.px + (e.clientX - pan.x); state.pan.y = pan.py + (e.clientY - pan.y); applyTransform(); });
-  window.addEventListener("pointerup", (e) => { if (pan && pan.clickEmpty && Math.abs(e.clientX - pan.x) < 3 && Math.abs(e.clientY - pan.y) < 3) select(null); pan = null; });
-  window.addEventListener("pointercancel", () => { pan = null; });
+  window.addEventListener("pointerup", (e) => {
+    if (pan) pan = null;
+    if (marquee) {
+      const small = Math.abs(e.clientX - marquee.x0) < 3 && Math.abs(e.clientY - marquee.y0) < 3;
+      if (small) { if (!marquee.base.size) select(null); }
+      else marqueeSelect(marquee.x0, marquee.y0, e.clientX, e.clientY, marquee.base);
+      if (marqueeEl) marqueeEl.style.display = "none";
+      marquee = null;
+    }
+  });
+  window.addEventListener("pointercancel", () => { pan = null; if (marqueeEl) marqueeEl.style.display = "none"; marquee = null; });
   window.addEventListener("keydown", (e) => { if (e.code === "Space" && !/INPUT|SELECT|TEXTAREA/.test(e.target.tagName || "")) { spaceDown = true; stage.style.cursor = "grab"; } });
   window.addEventListener("keyup", (e) => { if (e.code === "Space") { spaceDown = false; stage.style.cursor = ""; } });
   document.addEventListener("keydown", (e) => {
     const exportOpen = !$("#exportModal").classList.contains("hidden");
     const v3dOpen = !$("#view3dModal").classList.contains("hidden");
+    const helpOpen = !$("#helpModal").classList.contains("hidden");
     // Escape closes a modal first (works even when a slider inside it has focus)
-    if (e.key === "Escape" && (exportOpen || v3dOpen)) { if (exportOpen) $("#exportModal").classList.add("hidden"); else $("#view3dModal").classList.add("hidden"); return; }
+    if (e.key === "Escape" && (exportOpen || v3dOpen || helpOpen)) { if (exportOpen) closeModal($("#exportModal")); else if (v3dOpen) closeModal($("#view3dModal")); else closeModal($("#helpModal")); return; }
     const tgt = e.target;
-    if (tgt.isContentEditable || tgt.tagName === "INPUT" || tgt.tagName === "SELECT" || tgt.tagName === "TEXTAREA") { if (tgt.tagName === "INPUT" && tgt.type === "text" && e.key === "Escape") tgt.blur(); return; }
+    // Only text-like fields own their keys (typing, native Ctrl+C, Esc-revert). A focused
+    // range/checkbox/color/select must still let modifier chords, Delete and Escape through
+    // to the global handlers (previously every INPUT swallowed Ctrl+Z).
+    const textLike = tgt.isContentEditable || tgt.tagName === "TEXTAREA" || (tgt.tagName === "INPUT" && /text|number|search|email|tel|url|password/.test(tgt.type));
+    if (textLike) return;
+    if ((tgt.tagName === "INPUT" || tgt.tagName === "SELECT") && !e.ctrlKey && !e.metaKey && !["Delete", "Backspace", "Escape"].includes(e.key)) return;  // plain keys (arrows) stay native on a focused control
     if (e.key === "Escape") { select(null); return; }
     if (exportOpen || v3dOpen) return;  // a modal is up: global shortcuts must not edit the figure behind it
-    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") { e.preventDefault(); e.shiftKey ? redo() : undo(); }
-    else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y") { e.preventDefault(); redo(); }
+    const mod = e.ctrlKey || e.metaKey, k = e.key.toLowerCase();
+    if (mod && k === "z") { e.preventDefault(); e.shiftKey ? redo() : undo(); }
+    else if (mod && k === "y") { e.preventDefault(); redo(); }
+    else if (mod && k === "a") { e.preventDefault(); state.selection = new Set([...state.spec.plots.map((p) => "plot:" + p.id), ...state.spec.figure_artists.map((_, j) => "figartist:" + j)]); state.selected = state.selection.size ? [...state.selection].pop() : null; refreshSelection(); buildInspector(); }
+    else if (mod && k === "c") { e.preventDefault(); copySelection(); }
+    else if (mod && k === "v") { e.preventDefault(); pasteClipboard(); }
+    else if (mod && k === "x") { e.preventDefault(); copySelection(); deleteSelection(); }
+    else if (mod && k === "d") { e.preventDefault(); copySelection(); pasteClipboard(); }
     else if (e.key.startsWith("Arrow") && state.selected) { e.preventDefault(); const s = e.shiftKey ? 0.05 : 0.005; if (e.key === "ArrowLeft") nudgeSelected(-s, 0); else if (e.key === "ArrowRight") nudgeSelected(s, 0); else if (e.key === "ArrowUp") nudgeSelected(0, s); else if (e.key === "ArrowDown") nudgeSelected(0, -s); }
-    else if ((e.key === "Delete" || e.key === "Backspace") && state.selected) {
-      e.preventDefault(); pushHist();
-      const ids = state.selection.size ? [...state.selection] : [state.selected];
-      const plotIds = new Set(ids.filter((id) => id.startsWith("plot:")).map((id) => id.slice(5)));
-      if (plotIds.size) state.spec.plots = state.spec.plots.filter((p) => !plotIds.has(p.id));
-      const artDel = new Map(), lineDel = new Map(), figDel = [];
-      for (const id of ids) {
-        if (id.startsWith("artist:")) { const [, pid, j] = id.split(":"); if (!artDel.has(pid)) artDel.set(pid, []); artDel.get(pid).push(+j); }
-        else if (id.startsWith("line:")) { const [, pid, j] = id.split(":"); if (!lineDel.has(pid)) lineDel.set(pid, []); lineDel.get(pid).push(+j); }
-        else if (id.startsWith("figartist:")) figDel.push(+id.slice(10));
-        else if (id.startsWith("title:")) { const p = state.spec.plots.find((x) => x.id === id.slice(6)); if (p) p.title.visible = false; }
-      }
-      // splice high-to-low so deleting several items at once doesn't shift the other indices
-      for (const [pid, js] of artDel) { const p = state.spec.plots.find((x) => x.id === pid); if (p) js.sort((a, b) => b - a).forEach((j) => p.artists.splice(j, 1)); }
-      for (const [pid, js] of lineDel) { const p = state.spec.plots.find((x) => x.id === pid); if (p && p.extra_lines) js.sort((a, b) => b - a).forEach((j) => p.extra_lines.splice(j, 1)); }
-      figDel.sort((a, b) => b - a).forEach((j) => state.spec.figure_artists.splice(j, 1));
-      select(null); commit();
-    }
+    else if ((e.key === "Delete" || e.key === "Backspace") && (state.selected || state.selection.size)) { e.preventDefault(); deleteSelection(); }
   });
   // settle (full-quality render + save) the instant an arrow key is released
   document.addEventListener("keyup", (e) => {

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/static/index.html

@@ -16,6 +16,7 @@
     })();
   </script>
   <title>Fig Foundry</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='2' y='2' width='60' height='60' rx='15' fill='%232f6690'/%3E%3Cpolyline points='16,45 27,31 35,39 49,20' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="/static/canvas.css">
 </head>

{figfoundry-0.2.1 → figfoundry-0.3.1}/figfoundry/static/style.css

@@ -7,6 +7,7 @@
    artwork stays publication-clean no matter what the UI chrome looks like.
    ========================================================================== */
 :root {
+  color-scheme: light;
   /* surfaces */
   --bg: #eef0f3;
   --panel: #ffffff;
@@ -17,7 +18,7 @@
   /* text */
   --ink: #1c2026;
   --muted: #58616d;
-  --faint: #79828e;
+  --faint: #5d6673;
   /* lines */
   --line: #e6e8ec;
   --line-strong: #d3d8de;
@@ -50,6 +51,7 @@
 }
 
 [data-theme="dark"] {
+  color-scheme: dark;
   --bg: #0f1115;
   --panel: #171a21;
   --panel-2: #1d212a;
@@ -285,6 +287,13 @@ input[type="text"] {
   transition: border-color .12s, box-shadow .12s;
 }
 input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
+textarea.ctl-area {
+  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
+  font-size: 13px; line-height: 1.35; color: var(--ink); background: var(--input-bg); outline: none;
+  font-family: inherit; resize: vertical; min-height: 42px;
+  transition: border-color .12s, box-shadow .12s;
+}
+textarea.ctl-area:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
 .color-row { display: flex; align-items: center; gap: 10px; }
 input[type="color"] {
   width: 38px; height: 30px; border: 1px solid var(--line); border-radius: 7px;
@@ -347,3 +356,10 @@ input[type="color"] {
 ::-webkit-scrollbar { width: 11px; height: 11px; }
 ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
 ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); border: 3px solid transparent; background-clip: content-box; }
+
+/* responsive topbar: wrap + compact below ~1100px so the Export button never clips */
+@media (max-width: 1100px) {
+  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; row-gap: 8px; }
+  .fig-name { flex: 1 1 120px; max-width: 170px; }
+  #zoomLabel { display: none; }
+}

{figfoundry-0.2.1 → figfoundry-0.3.1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "figfoundry"
-version = "0.2.1"
+version = "0.3.1"
 description = "WYSIWYG matplotlib figure composer: load data (.npz/.pkl), drag signals onto a canvas to build plots, and export clean reproducible code."
 readme = "README.md"
 requires-python = ">=3.10"

{figfoundry-0.2.1 → figfoundry-0.3.1}/uv.lock

@@ -336,7 +336,7 @@ wheels = [
 
 [[package]]
 name = "figfoundry"
-version = "0.1.0"
+version = "0.2.1"
 source = { editable = "." }
 dependencies = [
     { name = "fastapi" },