@kitlangton/knobs 0.4.0-next.10 → 0.4.0-next.12

package/dist/ui-react.js

@@ -2965,13 +2965,17 @@ var css2 = `
 .knobs-tree-row[aria-expanded="true"]>.knobs-tree-caret{transform:rotate(90deg)}
 .knobs-tree-row:not([aria-expanded])>.knobs-tree-caret{visibility:hidden}
 .knobs-tree-icon{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-right:6px;color:var(--_k-fg-3);font-size:calc(var(--_k-font-size) - 1px)}
-.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;font-weight:var(--_k-weight)}
+/* The label wins the room: it keeps its width while the detail (which only takes what's left)
+   fades out at its end, and gives way only once the detail is gone. Each fades where it's cut. */
+.knobs-tree-label{position:relative;flex:0 1 auto;min-width:0;overflow:hidden;font-weight:var(--_k-weight)}
+.knobs-tree-row[data-editing]>.knobs-tree-label{flex-grow:1}
 .knobs-tree-row[data-ancestor] .knobs-tree-label{color:var(--_k-fg-2)}
 .knobs-tree-label .knobs-tree-mark{color:var(--_k-accent)}
 .knobs-tree-row[data-off~="visible"] :is(.knobs-tree-label,.knobs-tree-icon){opacity:.45}
 .knobs-tree-row[data-off~="locked"] .knobs-tree-label{color:var(--_k-fg-2)}
-.knobs-tree-detail{flex:none;margin-left:6px;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
-.knobs-tree-tools{flex:none;display:flex;align-items:center;gap:1px;margin-left:4px}
+.knobs-tree-detail{flex:1 1 0;min-width:0;overflow:hidden;padding-left:6px;text-align:right;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
+.knobs-tree-row[data-editing]>.knobs-tree-detail{flex-grow:0;visibility:hidden}
+.knobs-tree-tools{flex:none;display:flex;align-items:center;gap:1px;margin-left:auto;padding-left:4px}
 .knobs-ui .knobs-tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
 .knobs-ui .knobs-tree-toggle svg{width:12px;height:12px}
 .knobs-tree-row:is(:hover,[data-active],[aria-selected="true"]) .knobs-tree-toggle,.knobs-ui .knobs-tree-toggle[aria-pressed="false"]{opacity:1}
@@ -4576,13 +4580,13 @@ function orderHintGroups(groups) {
 }
 function pageHints(doc = document) {
   const holder = doc;
-  const registry = holder[KEY] ?? createRegistry(doc);
-  holder[KEY] = registry;
+  const registry = holder[KEY2] ?? createRegistry(doc);
+  holder[KEY2] = registry;
   return registry;
 }
 function claimsHintKey(doc, key) {
   const holder = doc;
-  return key === PAGE_HINT_KEY && Boolean(holder[KEY]?.listening);
+  return key === PAGE_HINT_KEY && Boolean(holder[KEY2]?.listening);
 }
 function activateElement(el) {
   const pressable = el.matches(PRESSABLE) || el.tabIndex < 0 && !el.matches("input,select,textarea");
@@ -4948,7 +4952,7 @@ function layerPainter(doc, groups) {
     }
   };
 }
-var HINT_LETTERS = "asdfghjkleruiowtyqpcvnmxzb", HOME_ROW = 9, COLUMN = 200, PAGE_HINT_KEY = "s", KEY, hints, isTyping, PRESSABLE = "button,a[href],summary,[role=button],[role=tab],[role=radio],[role=switch],[role=checkbox],[role=menuitem],[role=option]", labelOf = (el) => (el.dataset.hint || el.getAttribute("aria-label") || el.textContent || "").trim(), STYLE_ID = "knobs-page-hints-css", CSS = `
+var HINT_LETTERS = "asdfghjkleruiowtyqpcvnmxzb", HOME_ROW = 9, COLUMN = 200, PAGE_HINT_KEY = "s", KEY2, hints, isTyping, PRESSABLE = "button,a[href],summary,[role=button],[role=tab],[role=radio],[role=switch],[role=checkbox],[role=menuitem],[role=option]", labelOf = (el) => (el.dataset.hint || el.getAttribute("aria-label") || el.textContent || "").trim(), STYLE_ID = "knobs-page-hints-css", CSS = `
 .knobs-page-hints{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483000}
 .knobs-page-hint{position:fixed;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--kh-radius);background:var(--kh-accent);color:var(--kh-bg);
   box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--kh-lift)));font:700 var(--kh-size)/1 var(--kh-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
@@ -4962,7 +4966,7 @@ var HINT_LETTERS = "asdfghjkleruiowtyqpcvnmxzb", HOME_ROW = 9, COLUMN = 200, PAG
 var init_page_hints = __esm(() => {
   init_keys();
   init_hints();
-  KEY = Symbol.for("knobs.pageHints.v1");
+  KEY2 = Symbol.for("knobs.pageHints.v1");
   hints = {
     register(root, targets, options) {
       return pageHints(root.ownerDocument).register(root, targets, options);
@@ -5327,7 +5331,7 @@ function tree(container, options) {
     text.className = "knobs-tree-text";
     label.append(text);
     const detail = doc.createElement("span");
-    detail.className = "knobs-tree-detail";
+    detail.className = "knobs-tree-detail knobs-scroll-fade-x";
     const tools = doc.createElement("span");
     tools.className = "knobs-tree-tools";
     el.append(caret, icon, label, detail, tools);
@@ -7790,13 +7794,13 @@ function place(o) {
   if (vertical) {
     y = side === "bottom" ? a.y + a.h + offset : a.y - offset - size.h;
     x = align === "start" ? a.x : align === "end" ? a.x + a.w - size.w : a.x + (a.w - size.w) / 2;
-    x = clamp2(x, v.x + margin, v.x + v.w - margin - size.w);
+    x = clamp3(x, v.x + margin, v.x + v.w - margin - size.w);
   } else {
     x = side === "right" ? a.x + a.w + offset : a.x - offset - size.w;
     y = align === "start" ? a.y : align === "end" ? a.y + a.h - size.h : a.y + (a.h - size.h) / 2;
-    y = clamp2(y, v.y + margin, v.y + v.h - margin - size.h);
+    y = clamp3(y, v.y + margin, v.y + v.h - margin - size.h);
   }
-  const origin = vertical ? { x: clamp2(a.x + a.w / 2 - x, 0, size.w), y: side === "bottom" ? 0 : size.h } : { x: side === "right" ? 0 : size.w, y: clamp2(a.y + a.h / 2 - y, 0, size.h) };
+  const origin = vertical ? { x: clamp3(a.x + a.w / 2 - x, 0, size.w), y: side === "bottom" ? 0 : size.h } : { x: side === "right" ? 0 : size.w, y: clamp3(a.y + a.h / 2 - y, 0, size.h) };
   return {
     x: Math.round(x),
     y: Math.round(y),
@@ -7838,7 +7842,7 @@ function safeTriangle(from, sub) {
   const edge = right ? sub.x : sub.x + sub.w;
   return [from, { x: edge, y: sub.y - 4 }, { x: edge, y: sub.y + sub.h + 4 }];
 }
-var opposite, clamp2 = (v, lo, hi) => hi < lo ? lo : Math.max(lo, Math.min(hi, v));
+var opposite, clamp3 = (v, lo, hi) => hi < lo ? lo : Math.max(lo, Math.min(hi, v));
 var init_overlay_model = __esm(() => {
   opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
 });
@@ -11373,13 +11377,13 @@ function compare(container, options) {
   let renderer = "dom";
   let pending = false;
   let gpu = null;
-  const lay = new Spring(mode === "side" ? 0 : 1, LAYOUT2.omega, LAYOUT2.zeta, 0.0001);
+  const lay = new Spring(mode === "side" ? 0 : 1, LAYOUT3.omega, LAYOUT3.zeta, 0.0001);
   const fade = new Spring(1, FADE6.omega, FADE6.zeta, 0.001);
   let fromMode = mode;
   let toMode = mode;
   const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
   let wipeCatching = false;
-  const gripAt = new Spring(0.5, LAYOUT2.omega, LAYOUT2.zeta, 0.0001);
+  const gripAt = new Spring(0.5, LAYOUT3.omega, LAYOUT3.zeta, 0.0001);
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
@@ -12686,7 +12690,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, TAP_SLOP = 4, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
+var LAYOUT3, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, TAP_SLOP = 4, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -12700,7 +12704,7 @@ var init_compare = __esm(() => {
   init_selection_pill();
   init_timeline();
   init_timeline_model();
-  LAYOUT2 = springMotion(SPRINGS.default);
+  LAYOUT3 = springMotion(SPRINGS.default);
   FADE6 = springMotion(SPRINGS.snappy);
   FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
@@ -15744,6 +15748,977 @@ function bento(container, options) {
   };
 }
 
+// src/ui/canvas.ts
+init_glide();
+init_motion();
+
+// src/ui/canvas-css.ts
+var canvasCss = `
+.knobs-ui.knobs-canvas{--_kc-radius:var(--k-ui-canvas-radius,var(--_k-radius-panel));--_kc-fade:var(--k-ui-canvas-fade,16px);
+  position:relative;width:100%;height:100%;overflow:hidden;outline:none;background:var(--k-ui-canvas-bg,var(--_k-bg-page));contain:strict;
+  touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;cursor:default;
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+:where(.knobs-canvas-stage,.knobs-canvas-stage *,.knobs-canvas-zoom,.knobs-canvas-zoom *){box-sizing:border-box}
+/* No hard edges: what slides out of view fades over the last few px. */
+.knobs-canvas-stage{position:absolute;inset:0;overflow:hidden;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--_kc-fade),#000 calc(100% - var(--_kc-fade)),transparent),linear-gradient(to bottom,transparent,#000 var(--_kc-fade),#000 calc(100% - var(--_kc-fade)),transparent);
+  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--_kc-fade),#000 calc(100% - var(--_kc-fade)),transparent),linear-gradient(to bottom,transparent,#000 var(--_kc-fade),#000 calc(100% - var(--_kc-fade)),transparent);mask-composite:intersect}
+.knobs-canvas-dots{position:absolute;left:-128px;top:-128px;right:-128px;bottom:-128px;pointer-events:none;will-change:transform;
+  background-image:radial-gradient(circle,var(--k-ui-canvas-dot,color-mix(in srgb,var(--_k-fg) 22%,transparent)) 1px,transparent 1.25px)}
+.knobs-canvas-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
+.knobs-canvas[data-moving] .knobs-canvas-world{will-change:transform}
+.knobs-canvas:is([data-panning],[data-space]) .knobs-canvas-world{pointer-events:none}
+.knobs-canvas[data-space]{cursor:grab}
+.knobs-canvas[data-grabbing]{cursor:grabbing}
+.knobs-canvas-tile{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:max-content;transform-origin:50% 50%}
+.knobs-canvas-title{flex:none;contain:inline-size;height:24px;padding:0 2px 8px;overflow:hidden;white-space:nowrap;color:var(--_k-fg-2);
+  font-size:var(--_k-type-small,12px);line-height:16px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
+.knobs-canvas-card{position:relative;flex:none;padding:var(--k-ui-canvas-pad,16px);border-radius:var(--_kc-radius);background:var(--k-ui-canvas-card,var(--_k-bg));
+  overflow:hidden;user-select:text;-webkit-user-select:text}
+.knobs-canvas-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_k-border);pointer-events:none}
+/* The readout: how far, and the way back to the whole set or 100%. */
+.knobs-canvas-zoom{position:absolute;right:10px;bottom:10px;z-index:1;display:flex;align-items:center;gap:2px;height:28px;padding:0 4px;border-radius:999px;
+  background:var(--_k-bg);box-shadow:inset 0 0 0 1px var(--_k-border);color:var(--_k-fg-2);font-size:var(--_k-type-small,12px);
+  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
+:where(.knobs-ui) .knobs-canvas-btn{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
+  display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:20px;padding:0 6px;border-radius:999px;background:transparent;color:inherit;cursor:default;
+  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+:where(.knobs-ui) .knobs-canvas-btn:is(:hover,:focus-visible){background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:0ms}
+:where(.knobs-ui) .knobs-canvas-btn:focus-visible{box-shadow:0 0 0 1.5px var(--_k-accent)}
+.knobs-canvas-pct{min-width:46px}
+.knobs-canvas-btn svg{width:13px;height:13px}
+`;
+
+// src/ui/canvas-model.ts
+var clamp2 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function packRows(sizes, opts) {
+  const { gap, width } = opts;
+  const x0 = opts.x ?? 0;
+  let x = 0;
+  let y = opts.y ?? 0;
+  let rowH = 0;
+  return sizes.map((s) => {
+    if (x > 0 && x + s.w > width) {
+      x = 0;
+      y += rowH + gap;
+      rowH = 0;
+    }
+    const r = { x: Math.round(x0 + x), y: Math.round(y), w: s.w, h: s.h };
+    x += s.w + gap;
+    rowH = Math.max(rowH, s.h);
+    return r;
+  });
+}
+function rowWidth(sizes, gap, aspect) {
+  let widest = 0;
+  let total = 0;
+  for (const s of sizes) {
+    widest = Math.max(widest, s.w);
+    total += s.w + gap;
+  }
+  if (!sizes.length)
+    return 0;
+  const a = Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 10;
+  const shape = (width) => {
+    const b = boundsOf(packRows(sizes, { gap, width }));
+    return b.w / Math.max(1, b.h);
+  };
+  let lo = widest;
+  let hi = Math.max(widest, total);
+  for (let i = 0;i < 24 && hi - lo > 1; i++) {
+    const mid = (lo + hi) / 2;
+    if (shape(mid) < a)
+      lo = mid;
+    else
+      hi = mid;
+  }
+  return Math.abs(Math.log(shape(lo) / a)) <= Math.abs(Math.log(shape(hi) / a)) ? lo : hi;
+}
+function layoutCanvas(items, opts) {
+  const placed = items.flatMap((it) => it.x !== undefined && it.y !== undefined ? [{ x: it.x, y: it.y, w: it.w, h: it.h }] : []);
+  const free = items.filter((it) => it.x === undefined || it.y === undefined);
+  const width = opts.width ?? rowWidth(free, opts.gap, opts.aspect ?? 16 / 10);
+  const under = boundsOf(placed);
+  const packed = packRows(free, {
+    gap: opts.gap,
+    width,
+    x: under ? under.x : 0,
+    y: under ? under.y + under.h + opts.gap * 2 : 0
+  });
+  let i = 0;
+  const rects = items.map((it) => it.x !== undefined && it.y !== undefined ? { x: it.x, y: it.y, w: it.w, h: it.h } : packed[i++]);
+  return { rects, width };
+}
+function boundsOf(rects) {
+  if (!rects.length)
+    return null;
+  let x0 = Number.POSITIVE_INFINITY;
+  let y0 = Number.POSITIVE_INFINITY;
+  let x1 = Number.NEGATIVE_INFINITY;
+  let y1 = Number.NEGATIVE_INFINITY;
+  for (const r of rects) {
+    x0 = Math.min(x0, r.x);
+    y0 = Math.min(y0, r.y);
+    x1 = Math.max(x1, r.x + r.w);
+    y1 = Math.max(y1, r.y + r.h);
+  }
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+function zoomAround(v, scale, at, min = 0, max = Number.POSITIVE_INFINITY) {
+  const s = clamp2(scale, min, max);
+  const k = s / v.scale;
+  return { x: at.x - (at.x - v.x) * k, y: at.y - (at.y - v.y) * k, scale: s };
+}
+function pinchView(v, from, to, ratio, min = 0, max = Number.POSITIVE_INFINITY) {
+  const z = zoomAround(v, v.scale * ratio, from, min, max);
+  return { x: z.x + to.x - from.x, y: z.y + to.y - from.y, scale: z.scale };
+}
+var WHEEL_ZOOM_MAX = 1.25;
+function wheelZoom(deltaY, pinch) {
+  const f = Math.exp(-deltaY * (pinch ? 0.01 : 0.0025));
+  return clamp2(f, 1 / WHEEL_ZOOM_MAX, WHEEL_ZOOM_MAX);
+}
+function fitView(r, w, h, opts = {}) {
+  const pad = opts.pad ?? 0;
+  const room = (n) => Math.max(1, n - pad * 2);
+  const raw = Math.min(room(w) / Math.max(1, r.w), room(h) / Math.max(1, r.h));
+  const scale = clamp2(raw, opts.min ?? 0, opts.max ?? Number.POSITIVE_INFINITY);
+  return {
+    x: w / 2 - (r.x + r.w / 2) * scale,
+    y: h / 2 - (r.y + r.h / 2) * scale,
+    scale
+  };
+}
+function viewPath(from, to) {
+  const k = to.scale / from.scale;
+  if (!Number.isFinite(k) || Math.abs(Math.log(k)) < 0.0001)
+    return (t) => ({
+      x: from.x + (to.x - from.x) * t,
+      y: from.y + (to.y - from.y) * t,
+      scale: from.scale + (to.scale - from.scale) * t
+    });
+  const fx = (to.x - k * from.x) / (1 - k);
+  const fy = (to.y - k * from.y) / (1 - k);
+  const wx = (fx - from.x) / from.scale;
+  const wy = (fy - from.y) / from.scale;
+  return (t) => {
+    if (t >= 1)
+      return to;
+    const scale = from.scale * k ** t;
+    return { x: fx - wx * scale, y: fy - wy * scale, scale };
+  };
+}
+var snapView = (v, dpr) => {
+  const d = dpr > 0 ? dpr : 1;
+  return { x: Math.round(v.x * d) / d, y: Math.round(v.y * d) / d, scale: v.scale };
+};
+var smooth = (a, b, x) => {
+  const t = clamp2((x - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+function dotGrid(scale, step = 24) {
+  const size = step * scale;
+  const alpha = smooth(7, 14, size) * (1 - smooth(72, 128, size));
+  return { size, alpha };
+}
+function keyAction(e) {
+  if (e.altKey)
+    return null;
+  switch (e.key) {
+    case "0":
+      return "fit";
+    case "1":
+      return "actual";
+    case "=":
+    case "+":
+      return "in";
+    case "-":
+    case "_":
+      return "out";
+    default:
+      return null;
+  }
+}
+var KEY_ZOOM = 1.5;
+function releaseVelocity(samples, now, window2 = 80) {
+  const last = samples.at(-1);
+  if (!last || now - last.t > 60)
+    return { x: 0, y: 0 };
+  let first = last;
+  for (let i = samples.length - 1;i >= 0; i--) {
+    if (last.t - samples[i].t > window2)
+      break;
+    first = samples[i];
+  }
+  const dt = (last.t - first.t) / 1000;
+  if (dt <= 0)
+    return { x: 0, y: 0 };
+  return { x: (last.x - first.x) / dt, y: (last.y - first.y) / dt };
+}
+var COAST_TAU = -1 / (1000 * Math.log(0.998));
+
+// src/ui/canvas.ts
+init_look();
+var FIT = springMotion(SPRINGS.smooth);
+var KEY = springMotion(SPRINGS.default);
+var LAYOUT2 = springMotion(SPRINGS.calm);
+var FOCUS_MAX = 2;
+var MAX_FLING = 8000;
+var SETTLE_MS = 200;
+var INTERACTIVE = "a,button,input,select,textarea,label,summary,[contenteditable],[role=button],[role=slider],[role=switch],[role=checkbox],[role=tab],[role=option],[role=textbox]";
+var ICON_FIT = svg('<path d="M2.5 6V3.5a1 1 0 0 1 1-1H6M10 2.5h2.5a1 1 0 0 1 1 1V6M13.5 10v2.5a1 1 0 0 1-1 1H10M6 13.5H3.5a1 1 0 0 1-1-1V10"/>');
+var injectCanvasStyles = (doc) => {
+  if (doc.querySelector("style[data-knobs-canvas]"))
+    return;
+  const style = doc.createElement("style");
+  style.dataset.knobsCanvas = "";
+  style.textContent = aliased(canvasCss);
+  doc.head.append(style);
+};
+function canvas(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const gap = options.gap ?? 48;
+  const pad = options.padding ?? 48;
+  const minZoom = options.minZoom ?? 0.05;
+  const maxZoom = options.maxZoom ?? 8;
+  let items = options.items;
+  const root = doc.createElement("div");
+  root.className = "knobs-canvas";
+  root.tabIndex = 0;
+  root.setAttribute("role", "region");
+  root.setAttribute("aria-roledescription", "canvas");
+  root.setAttribute("aria-label", options.label ?? "Canvas");
+  applyLook2(root, options);
+  injectCanvasStyles(doc);
+  const stage = doc.createElement("div");
+  stage.className = "knobs-canvas-stage";
+  const dots = doc.createElement("div");
+  dots.className = "knobs-canvas-dots";
+  const world = doc.createElement("div");
+  world.className = "knobs-canvas-world";
+  stage.append(dots, world);
+  root.append(stage);
+  let pct = null;
+  if (options.readout !== false) {
+    const bar = doc.createElement("div");
+    bar.className = "knobs-canvas-zoom";
+    const fitBtn = doc.createElement("button");
+    fitBtn.type = "button";
+    fitBtn.className = "knobs-canvas-btn";
+    fitBtn.innerHTML = ICON_FIT;
+    fitBtn.title = "Fit (0)";
+    fitBtn.setAttribute("aria-label", "Fit");
+    fitBtn.addEventListener("click", () => api.fit());
+    pct = doc.createElement("button");
+    pct.type = "button";
+    pct.className = "knobs-canvas-btn knobs-canvas-pct";
+    pct.title = "100% (1)";
+    pct.setAttribute("aria-label", "Zoom to 100%");
+    pct.addEventListener("click", () => api.zoomTo(1));
+    bar.append(fitBtn, pct);
+    bar.addEventListener("dblclick", (e) => e.stopPropagation());
+    root.append(bar);
+  }
+  container.append(root);
+  const motionQuery = win.matchMedia?.("(prefers-reduced-motion: reduce)");
+  const reduced = () => motionQuery?.matches ?? reducedMotion(win);
+  let view = { x: 0, y: 0, scale: 1 };
+  let vw = 0;
+  let vh = 0;
+  let pristine = true;
+  let rowW;
+  let rects = new Map;
+  let jump = null;
+  let coast = null;
+  let frames = 0;
+  const times = [];
+  const tiles = new Map;
+  let drawnView = "";
+  let drawnDots = "";
+  let drawnPct = "";
+  const drawView = () => {
+    const v = view;
+    const key = `${v.x}|${v.y}|${v.scale}`;
+    if (key === drawnView)
+      return;
+    drawnView = key;
+    world.style.transform = `translate(${v.x}px,${v.y}px) scale(${v.scale})`;
+    const g = dotGrid(v.scale);
+    if (g.alpha <= 0.001) {
+      if (drawnDots !== "off")
+        dots.style.visibility = "hidden";
+      drawnDots = "off";
+    } else {
+      const ox = ((v.x + 128 - g.size / 2) % g.size + g.size) % g.size;
+      const oy = ((v.y + 128 - g.size / 2) % g.size + g.size) % g.size;
+      const size = `${g.size}px ${g.size}px`;
+      const a = String(Math.round(g.alpha * 1000) / 1000);
+      if (drawnDots === "off")
+        dots.style.visibility = "";
+      if (dots.style.backgroundSize !== size)
+        dots.style.backgroundSize = size;
+      if (dots.style.opacity !== a)
+        dots.style.opacity = a;
+      dots.style.transform = `translate(${ox}px,${oy}px)`;
+      drawnDots = "on";
+    }
+    if (pct) {
+      const label = `${Math.round(v.scale * 100)}%`;
+      if (label !== drawnPct)
+        pct.textContent = drawnPct = label;
+    }
+    options.onView?.(v);
+  };
+  let settleTimer = 0;
+  let held = false;
+  let layerScale = 0;
+  const settle = () => {
+    settleTimer = 0;
+    if (held)
+      return;
+    if (loop.running) {
+      settleTimer = win.setTimeout(settle, SETTLE_MS);
+      return;
+    }
+    view = snapView(view, win.devicePixelRatio || 1);
+    if (Math.abs(view.scale / layerScale - 1) > 0.000001) {
+      delete root.dataset.moving;
+      layerScale = 0;
+    }
+    drawView();
+  };
+  const moved = () => {
+    if (!layerScale) {
+      root.dataset.moving = "";
+      layerScale = view.scale;
+    }
+    win.clearTimeout(settleTimer);
+    settleTimer = win.setTimeout(settle, SETTLE_MS);
+  };
+  const setView = (v) => {
+    view = v;
+    moved();
+    drawView();
+  };
+  const drawTile = (t) => {
+    const key = `${t.x.x}|${t.y.x}`;
+    if (key === t.drawn)
+      return;
+    t.drawn = key;
+    t.el.style.translate = `${t.x.x}px ${t.y.x}px`;
+  };
+  const sizeCard = (t) => {
+    const { w, h } = t.item;
+    t.card.style.width = w === undefined ? "" : `${w}px`;
+    t.card.style.height = h === undefined ? "" : `${h}px`;
+  };
+  const setTitle = (t) => {
+    const text = t.item.title;
+    if (text && !t.title) {
+      t.title = doc.createElement("div");
+      t.title.className = "knobs-canvas-title";
+      t.el.prepend(t.title);
+    }
+    if (t.title) {
+      if (text)
+        t.title.textContent = text;
+      else {
+        t.title.remove();
+        t.title = null;
+      }
+    }
+  };
+  const mount = (it, enter) => {
+    const el = doc.createElement("div");
+    el.className = "knobs-canvas-tile";
+    el.dataset.id = it.id;
+    const card = doc.createElement("div");
+    card.className = "knobs-canvas-card";
+    el.append(card);
+    const t = {
+      id: it.id,
+      item: it,
+      el,
+      title: null,
+      card,
+      cleanup: undefined,
+      x: new Spring(0, LAYOUT2.omega, LAYOUT2.zeta, 0.05),
+      y: new Spring(0, LAYOUT2.omega, LAYOUT2.zeta, 0.05),
+      w: 0,
+      h: 0,
+      placed: false,
+      leaving: false,
+      gone: false,
+      drawn: ""
+    };
+    setTitle(t);
+    sizeCard(t);
+    world.append(el);
+    t.cleanup = it.render(card) || undefined;
+    tiles.set(it.id, t);
+    ro.observe(el);
+    if (enter) {
+      const r = reduced();
+      el.animate(r ? [{ opacity: 0 }, { opacity: 1 }] : [
+        { opacity: 0, scale: 0.96, filter: "blur(3px)" },
+        { opacity: 1, scale: 1, filter: "blur(0px)" }
+      ], { duration: r ? 160 : 260, easing: "cubic-bezier(.2,.8,.2,1)" });
+    }
+    return t;
+  };
+  const unmount = (t) => {
+    if (t.gone)
+      return;
+    t.gone = true;
+    ro.unobserve(t.el);
+    t.cleanup?.();
+    t.el.remove();
+    if (tiles.get(t.id) === t)
+      tiles.delete(t.id);
+  };
+  const leave = (t) => {
+    t.leaving = true;
+    tiles.delete(t.id);
+    t.el.style.pointerEvents = "none";
+    const r = reduced();
+    const a = t.el.animate(r ? [{ opacity: 1 }, { opacity: 0 }] : [
+      { opacity: 1, scale: 1, filter: "blur(0px)" },
+      { opacity: 0, scale: 0.96, filter: "blur(3px)" }
+    ], { duration: r ? 160 : 200, easing: "cubic-bezier(.4,0,1,1)", fill: "forwards" });
+    a.onfinish = () => {
+      leaving.delete(t);
+      unmount(t);
+    };
+    leaving.add(t);
+  };
+  const leaving = new Set;
+  const measure = () => {
+    for (const t of tiles.values()) {
+      t.w = t.el.offsetWidth;
+      t.h = t.el.offsetHeight;
+    }
+  };
+  const fitTarget = () => {
+    const b = boundsOf([...rects.values()]);
+    if (!b || !vw || !vh)
+      return null;
+    return fitView(b, vw, vh, { pad, min: minZoom, max: Math.min(maxZoom, 1) });
+  };
+  const relayout = (glide) => {
+    const live = items.map((it) => tiles.get(it.id)).filter(Boolean);
+    const sizes = live.map((t) => ({ x: t.item.x, y: t.item.y, w: t.w, h: t.h }));
+    if (pristine)
+      rowW = options.width;
+    const out = layoutCanvas(sizes, {
+      gap,
+      width: rowW,
+      aspect: vw && vh ? vw / vh : undefined
+    });
+    rowW = out.width;
+    const next = new Map;
+    const animate = glide && !pristine && !reduced();
+    let moving = false;
+    live.forEach((t, i) => {
+      const r = out.rects[i];
+      next.set(t.id, r);
+      if (!animate || !t.placed) {
+        t.x.snap(r.x);
+        t.y.snap(r.y);
+      } else {
+        tune(t.x, LAYOUT2).set(r.x);
+        tune(t.y, LAYOUT2).set(r.y);
+        moving ||= !t.x.resting || !t.y.resting;
+      }
+      t.placed = true;
+      drawTile(t);
+    });
+    rects = next;
+    if (pristine) {
+      const f = fitTarget();
+      if (f) {
+        view = snapView(f, win.devicePixelRatio || 1);
+        drawView();
+      }
+    }
+    if (moving)
+      loop.wake();
+  };
+  let relayoutQueued = 0;
+  const ro = new win.ResizeObserver((entries) => {
+    let changed = false;
+    for (const e of entries) {
+      const t = tiles.get(e.target.dataset.id ?? "");
+      if (!t || t.el !== e.target)
+        continue;
+      const w = t.el.offsetWidth;
+      const h = t.el.offsetHeight;
+      if (w !== t.w || h !== t.h) {
+        t.w = w;
+        t.h = h;
+        changed = true;
+      }
+    }
+    if (changed && !relayoutQueued)
+      relayoutQueued = win.requestAnimationFrame(() => {
+        relayoutQueued = 0;
+        relayout(true);
+      });
+  });
+  const rootRo = new win.ResizeObserver(() => {
+    const w = root.clientWidth;
+    const h = root.clientHeight;
+    if (w === vw && h === vh)
+      return;
+    const was = { w: vw, h: vh };
+    vw = w;
+    vh = h;
+    if (pristine)
+      return relayout(false);
+    if (was.w && was.h) {
+      const dx = (w - was.w) / 2;
+      const dy = (h - was.h) / 2;
+      if (jump)
+        startJump({ x: jump.to.x + dx, y: jump.to.y + dy, scale: jump.to.scale }, jump.t.omega === FIT.omega ? FIT : KEY);
+      view = { x: view.x + dx, y: view.y + dy, scale: view.scale };
+      drawView();
+    }
+  });
+  const frame = (dt) => {
+    const t0 = performance.now();
+    frames++;
+    let moving = false;
+    if (jump) {
+      jump.t.step(dt);
+      if (jump.t.resting) {
+        view = jump.to;
+        jump = null;
+      } else {
+        view = jump.path(Math.min(1, jump.t.x));
+        moving = true;
+      }
+      moved();
+    }
+    if (coast) {
+      const decay = Math.exp(-dt / COAST_TAU);
+      const travel = COAST_TAU * (1 - decay);
+      let v = {
+        x: view.x + coast.vx * travel,
+        y: view.y + coast.vy * travel,
+        scale: view.scale
+      };
+      if (coast.vs)
+        v = zoomAround(v, v.scale * Math.exp(coast.vs * travel), coast.at, minZoom, maxZoom);
+      view = v;
+      coast.vx *= decay;
+      coast.vy *= decay;
+      coast.vs *= decay;
+      if (Math.hypot(coast.vx, coast.vy) < 10 && Math.abs(coast.vs) < 0.02)
+        coast = null;
+      else
+        moving = true;
+      moved();
+    }
+    drawView();
+    for (const t of tiles.values())
+      if (!t.x.resting || !t.y.resting) {
+        t.x.step(dt);
+        t.y.step(dt);
+        drawTile(t);
+        moving = true;
+      }
+    times.push(performance.now() - t0);
+    if (times.length > 600)
+      times.splice(0, times.length - 600);
+    return moving;
+  };
+  const loop = frameLoop(win, frame);
+  const pathLength = (a, b) => Math.abs(Math.log(b.scale / a.scale)) + Math.hypot(b.x - a.x, b.y - a.y) / Math.max(1, vw, vh);
+  const startJump = (to, m) => {
+    pristine = false;
+    coast = null;
+    if (reduced()) {
+      jump = null;
+      setView(to);
+      return;
+    }
+    let v = 0;
+    if (jump) {
+      const len = pathLength(view, to);
+      if (len > 0.000001)
+        v = clamp2(jump.t.v * pathLength(jump.from, jump.to) / len, 0, 40);
+    }
+    const t = new Spring(0, m.omega, m.zeta, 0.0005).set(1);
+    t.v = v;
+    jump = { from: view, to, path: viewPath(view, to), t };
+    moved();
+    loop.wake();
+  };
+  const target = () => jump?.to ?? view;
+  const centre = () => ({ x: vw / 2, y: vh / 2 });
+  const grab = () => {
+    pristine = false;
+    jump = null;
+    coast = null;
+  };
+  const local = (e) => {
+    const r = root.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  };
+  let pointer = null;
+  let pinching = false;
+  const onWheel = (e) => {
+    e.preventDefault();
+    const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? vh : 1;
+    if (e.ctrlKey || e.metaKey) {
+      if (pinching)
+        return;
+      const dy = e.deltaY * k;
+      const at = local(e);
+      grab();
+      setView(zoomAround(view, view.scale * wheelZoom(dy, e.ctrlKey), at, minZoom, maxZoom));
+      return;
+    }
+    let dx = e.deltaX * k;
+    let dy = e.deltaY * k;
+    if (e.shiftKey && !dx) {
+      dx = dy;
+      dy = 0;
+    }
+    grab();
+    setView({ x: view.x - dx, y: view.y - dy, scale: view.scale });
+  };
+  let gestureScale = 1;
+  const onGesture = (e) => {
+    e.preventDefault();
+    const g = e;
+    if (e.type === "gesturestart") {
+      gestureScale = 1;
+      pinching = true;
+      grab();
+      return;
+    }
+    if (e.type === "gestureend") {
+      pinching = false;
+      return;
+    }
+    const at = g.clientX !== undefined ? local(g) : centre();
+    setView(zoomAround(view, view.scale * g.scale / gestureScale, at, minZoom, maxZoom));
+    gestureScale = g.scale;
+  };
+  let drag = null;
+  const touches = new Map;
+  let pinch = null;
+  let space = false;
+  let spaceDragged = false;
+  let hovering = false;
+  let pressed = null;
+  const capped = (v) => {
+    const speed = Math.hypot(v.x, v.y);
+    return speed > MAX_FLING ? { x: v.x / speed * MAX_FLING, y: v.y / speed * MAX_FLING } : v;
+  };
+  const onBackground = (target) => {
+    const el = target;
+    return !el?.closest?.(".knobs-canvas-card,.knobs-canvas-zoom");
+  };
+  const beginDrag = (e, grabbing) => {
+    grab();
+    held = true;
+    drag = { id: e.pointerId, last: local(e), samples: [] };
+    root.dataset.panning = "";
+    if (space)
+      spaceDragged = true;
+    if (grabbing)
+      root.dataset.grabbing = "";
+    try {
+      root.setPointerCapture(e.pointerId);
+    } catch {}
+    moved();
+  };
+  const endDrag = (coastOn) => {
+    const d = drag;
+    drag = null;
+    held = false;
+    delete root.dataset.panning;
+    delete root.dataset.grabbing;
+    if (!d)
+      return;
+    const v = coastOn ? capped(releaseVelocity(d.samples, performance.now())) : { x: 0, y: 0 };
+    if (Math.hypot(v.x, v.y) > 60) {
+      coast = { vx: v.x, vy: v.y, vs: 0, at: centre() };
+      loop.wake();
+    }
+    moved();
+  };
+  const spread = () => {
+    const [a, b] = [...touches.values()];
+    return a && b ? { d: Math.hypot(a.x - b.x, a.y - b.y), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } } : null;
+  };
+  const onPointerDown = (e) => {
+    pristine = false;
+    if (e.isPrimary)
+      pressed = e.target;
+    if (e.pointerType === "touch") {
+      touches.set(e.pointerId, local(e));
+      if (touches.size === 2) {
+        if (drag)
+          endDrag(false);
+        const s = spread();
+        grab();
+        held = true;
+        pinch = { d: s.d, mid: s.mid, samples: [] };
+        root.dataset.panning = "";
+        for (const id of touches.keys())
+          try {
+            root.setPointerCapture(id);
+          } catch {}
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (touches.size === 1 && onBackground(e.target))
+        beginDrag(e, false);
+      return;
+    }
+    const middle = e.button === 1;
+    if (!middle && e.button !== 0)
+      return;
+    if (!middle && !space && !onBackground(e.target))
+      return;
+    e.preventDefault();
+    if (!middle && onBackground(e.target))
+      root.focus({ preventScroll: true });
+    beginDrag(e, middle || space);
+  };
+  const onPointerMove = (e) => {
+    if (e.pointerType !== "touch")
+      pointer = local(e);
+    if (touches.has(e.pointerId))
+      touches.set(e.pointerId, local(e));
+    if (pinch) {
+      const s = spread();
+      if (!s)
+        return;
+      const v = pinchView(view, pinch.mid, s.mid, s.d / Math.max(1, pinch.d), minZoom, maxZoom);
+      pinch.d = s.d;
+      pinch.mid = s.mid;
+      pinch.samples.push({ x: s.mid.x, y: s.mid.y, t: performance.now(), s: Math.log(v.scale) });
+      if (pinch.samples.length > 12)
+        pinch.samples.shift();
+      setView(v);
+      return;
+    }
+    if (!drag || drag.id !== e.pointerId)
+      return;
+    const p = local(e);
+    const dx = p.x - drag.last.x;
+    const dy = p.y - drag.last.y;
+    drag.last = p;
+    drag.samples.push({ x: p.x, y: p.y, t: performance.now() });
+    if (drag.samples.length > 12)
+      drag.samples.shift();
+    setView({ x: view.x + dx, y: view.y + dy, scale: view.scale });
+  };
+  const onPointerUp = (e) => {
+    if (touches.delete(e.pointerId) && pinch) {
+      if (touches.size < 2) {
+        const p = pinch;
+        pinch = null;
+        held = false;
+        delete root.dataset.panning;
+        const now = performance.now();
+        const v = capped(releaseVelocity(p.samples, now));
+        const first = p.samples.find((s) => now - s.t <= 80) ?? p.samples[0];
+        const last = p.samples.at(-1);
+        const dt = first && last ? (last.t - first.t) / 1000 : 0;
+        const vs = dt > 0 && now - last.t < 60 ? clamp2((last.s - first.s) / dt, -4, 4) : 0;
+        if (Math.hypot(v.x, v.y) > 60 || Math.abs(vs) > 0.3) {
+          coast = { vx: v.x, vy: v.y, vs, at: p.mid };
+          loop.wake();
+        }
+        moved();
+      }
+      return;
+    }
+    if (drag && drag.id === e.pointerId)
+      endDrag(e.type === "pointerup");
+  };
+  const onDblClick = (e) => {
+    if (space)
+      return;
+    const el = e.target === root && pressed && root.contains(pressed) ? pressed : e.target;
+    const tileEl = el.closest?.(".knobs-canvas-tile");
+    if (tileEl) {
+      const card = el.closest(".knobs-canvas-card");
+      if (card && (el.closest(INTERACTIVE) || isTypingTarget(el)))
+        return;
+      const id = tileEl.dataset.id;
+      const f = focusTarget(id);
+      if (!f)
+        return;
+      const t = target();
+      const there = Math.abs(t.scale / f.scale - 1) < 0.02 && Math.abs(t.x - f.x) < 4 && Math.abs(t.y - f.y) < 4;
+      if (there)
+        api.fit();
+      else
+        startJump(f, FIT);
+      return;
+    }
+    if (onBackground(el))
+      api.fit();
+  };
+  const keyAnchor = () => hovering && pointer ? pointer : centre();
+  const onKey = (e) => {
+    if (isTypingTarget(e.target))
+      return;
+    const a = keyAction(e);
+    if (!a || a === "actual" && (e.metaKey || e.ctrlKey))
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (a === "fit")
+      return api.fit();
+    const from = target();
+    const scale = a === "actual" ? 1 : a === "in" ? from.scale * KEY_ZOOM : from.scale / KEY_ZOOM;
+    startJump(zoomAround(from, scale, keyAnchor(), minZoom, maxZoom), KEY);
+  };
+  const spaceOwner = (e) => e.key === " " && !e.metaKey && !e.ctrlKey && !e.altKey && !isTypingTarget(e.target) && (hovering || root.contains(doc.activeElement));
+  const onControl = () => {
+    const el = doc.activeElement;
+    return !!el && el !== root && root.contains(el) && !!el.closest(INTERACTIVE);
+  };
+  const onDocKeyDown = (e) => {
+    if (!spaceOwner(e))
+      return;
+    if (!onControl())
+      e.preventDefault();
+    if (space)
+      return;
+    space = true;
+    spaceDragged = false;
+    root.dataset.space = "";
+  };
+  const endSpace = () => {
+    space = false;
+    delete root.dataset.space;
+    if (!drag)
+      delete root.dataset.grabbing;
+  };
+  const onDocKeyUp = (e) => {
+    if (e.key !== " " || !space)
+      return;
+    if (spaceDragged || !onControl())
+      e.preventDefault();
+    endSpace();
+  };
+  root.addEventListener("wheel", onWheel, { passive: false });
+  root.addEventListener("gesturestart", onGesture);
+  root.addEventListener("gesturechange", onGesture);
+  root.addEventListener("gestureend", onGesture);
+  root.addEventListener("pointerdown", onPointerDown, { capture: true });
+  root.addEventListener("pointermove", onPointerMove);
+  root.addEventListener("pointerup", onPointerUp);
+  root.addEventListener("pointercancel", onPointerUp);
+  root.addEventListener("pointerenter", () => hovering = true);
+  root.addEventListener("pointerleave", () => {
+    hovering = false;
+  });
+  root.addEventListener("auxclick", (e) => e.button === 1 && e.preventDefault());
+  root.addEventListener("dblclick", onDblClick);
+  root.addEventListener("keydown", onKey);
+  doc.addEventListener("keydown", onDocKeyDown, { capture: true });
+  doc.addEventListener("keyup", onDocKeyUp, { capture: true });
+  win.addEventListener("blur", endSpace);
+  root.addEventListener("knobs-restyle", () => {
+    measure();
+    relayout(true);
+  });
+  const focusTarget = (id) => {
+    const r = rects.get(id);
+    if (!r || !vw || !vh)
+      return null;
+    return fitView(r, vw, vh, { pad, min: minZoom, max: Math.min(maxZoom, FOCUS_MAX) });
+  };
+  for (const it of items)
+    mount(it, false);
+  vw = root.clientWidth;
+  vh = root.clientHeight;
+  measure();
+  relayout(false);
+  rootRo.observe(root);
+  drawView();
+  const api = {
+    element: root,
+    get view() {
+      return view;
+    },
+    get rects() {
+      return rects;
+    },
+    fit() {
+      const f = fitTarget();
+      if (f)
+        startJump(f, FIT);
+    },
+    focus(id) {
+      const f = focusTarget(id);
+      if (f)
+        startJump(f, FIT);
+    },
+    zoomTo(scale, at) {
+      const from = target();
+      startJump(zoomAround(from, scale, at ?? centre(), minZoom, maxZoom), KEY);
+    },
+    update(next) {
+      const ids = new Set(next.map((it) => it.id));
+      for (const t of [...tiles.values()])
+        if (!ids.has(t.id))
+          leave(t);
+      for (const it of next) {
+        const t = tiles.get(it.id);
+        if (!t) {
+          mount(it, true);
+          continue;
+        }
+        if (t.item.render !== it.render) {
+          t.cleanup?.();
+          t.card.replaceChildren();
+          t.cleanup = it.render(t.card) || undefined;
+        }
+        t.item = it;
+        setTitle(t);
+        sizeCard(t);
+      }
+      items = next;
+      measure();
+      relayout(true);
+    },
+    get moving() {
+      return loop.running;
+    },
+    stats() {
+      const s = [...times].sort((a, b) => a - b);
+      const q = (p) => Math.round((s[Math.floor(p * (s.length - 1))] ?? 0) * 1000) / 1000;
+      return { frames, p50: q(0.5), p95: q(0.95), max: q(1) };
+    },
+    dispose() {
+      loop.stop();
+      ro.disconnect();
+      rootRo.disconnect();
+      win.clearTimeout(settleTimer);
+      if (relayoutQueued)
+        win.cancelAnimationFrame(relayoutQueued);
+      doc.removeEventListener("keydown", onDocKeyDown, { capture: true });
+      doc.removeEventListener("keyup", onDocKeyUp, { capture: true });
+      win.removeEventListener("blur", endSpace);
+      for (const t of [...tiles.values(), ...leaving])
+        unmount(t);
+      root.remove();
+    }
+  };
+  return api;
+}
+
 // src/ui/react.tsx
 init_diff();
 
@@ -23150,6 +24125,33 @@ function Bento(props) {
     style: { height: "100%", ...props.style }
   });
 }
+function Canvas(props) {
+  const ref = useRef(null);
+  const handle = useRef(null);
+  const latest = useRef(props);
+  latest.current = props;
+  useLayoutEffect(() => {
+    const c = canvas(ref.current, {
+      ...latest.current,
+      onView: (v) => latest.current.onView?.(v)
+    });
+    handle.current = c;
+    latest.current.onReady?.(c);
+    return () => {
+      c.dispose();
+      handle.current = null;
+    };
+  }, []);
+  useFollow({ items: props.items }, (c) => {
+    if (c.items)
+      handle.current?.update(c.items);
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: props.className,
+    style: { height: "100%", ...props.style }
+  });
+}
 function Activity(props) {
   const ref = useRef(null);
   const handle = useRef(null);
@@ -23299,6 +24301,7 @@ function MediaSlot(props) {
 export {
   Activity,
   Bento,
+  Canvas,
   CodeDiff,
   Compare,
   CompareStrip,