@the-portland-company/canvas-editor 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.2 — tray fits the canvas column
+
+- The tile strip shrinks and scrolls horizontally so the Side | Center toggle,
+  labels, undo/redo and × never clip outside the canvas column.
+
+## 0.4.1 — tray always on screen
+
+- The block tray is fixed to the viewport over the canvas column (live-measured
+  left/width, 1rem above the bottom) instead of sticking to the canvas scroll
+  box, which could sit below the fold inside a host page. `BlockToolbar` takes
+  an `anchor` ref to the canvas element.
+
 ## 0.4.0 — V1-inspired chrome: floating block tray, dashed block outlines, settings on the left
 
 Per Spencer's 2026-09-11 direction that V2 (email.politogyvrm.com) take its

package/dist/canvas.css

@@ -174,19 +174,22 @@
 
 /* ---- block tray (floating palette) --------------------------------------- */
 
+/* Fixed to the viewport, spanning the canvas column (left/width set inline
+   from a live measurement) so it is always on screen; once dragged it keeps
+   the pointer-derived left/top instead. */
 .ce-tray-dock {
-  position: sticky; bottom: 0.25rem; z-index: 10;
+  position: fixed; bottom: 1rem; z-index: 40;
   display: flex; justify-content: center;
-  margin-top: auto;
+  padding: 0 0.5rem;
   pointer-events: none;
 }
 
-.ce-tray-dock.is-floating { position: fixed; bottom: auto; margin: 0; }
+.ce-tray-dock.is-floating { bottom: auto; width: auto; padding: 0; }
 
 .ce-tray {
   pointer-events: auto;
   display: flex; align-items: center; gap: 1rem;
-  width: fit-content; max-width: 100%;
+  width: fit-content; max-width: 100%; min-width: 0;
   padding: 9px 10px 4px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
@@ -196,12 +199,17 @@
 
 .dark .ce-tray { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); }
 
+/* min-width:0 lets the strip shrink and scroll so the controls after it
+   (Side | Center, labels, undo/redo, ×) stay inside the canvas column. */
 .ce-tray-tiles {
   display: flex; align-items: stretch; gap: 0.5rem;
+  flex: 0 1 auto; min-width: 0;
   overflow-x: auto; padding-bottom: 0.25rem;
   scrollbar-width: thin;
 }
 
+.ce-tray-tiles > .ce-tile { flex: 0 0 auto; }
+
 .ce-tile {
   display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
   min-width: 2.75rem; height: 2.75rem; padding: 0.5rem;

package/dist/editor.cjs

@@ -3937,6 +3937,7 @@ function trayItems() {
   return [...visible].sort((a, b) => rank(a) - rank(b));
 }
 function BlockToolbar({
+  anchor,
   insertMode,
   onInsertModeChange,
   showLabels,
@@ -3950,6 +3951,25 @@ function BlockToolbar({
   const [pos, setPos] = react.useState(null);
   const offset = react.useRef(null);
   const pillRef = react.useRef(null);
+  const [bounds, setBounds] = react.useState(null);
+  react.useEffect(() => {
+    const el = anchor.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      setBounds({ left: Math.round(r.left), width: Math.round(r.width) });
+    };
+    measure();
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+    ro?.observe(el);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+    };
+  }, [anchor]);
   const onHandlePointerDown = react.useCallback((e) => {
     const rect = pillRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -3972,29 +3992,36 @@ function BlockToolbar({
     window.addEventListener("pointerup", up);
     return up;
   }, [pos !== null]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ce-tray-dock${pos ? " is-floating" : ""}`, style: pos ? { left: pos.x, top: pos.y } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pillRef, className: "ce-tray", role: "toolbar", "aria-label": "Blocks", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "ce-tray-btn is-grab",
-        onPointerDown: onHandlePointerDown,
-        onDoubleClick: () => setPos(null),
-        title: "Move toolbar (double-click to dock)",
-        "aria-label": "Move toolbar",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "move", size: 18 })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ce-tray-tiles", children: trayItems().map((def) => /* @__PURE__ */ jsxRuntime.jsx(TrayTile, { def, showLabel: showLabels }, def.type)) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ce-seg", role: "radiogroup", "aria-label": "Insert control placement", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": insertMode === "side", className: `ce-seg-btn${insertMode === "side" ? " is-active" : ""}`, onClick: () => onInsertModeChange("side"), children: "Side" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": insertMode === "center", className: `ce-seg-btn${insertMode === "center" ? " is-active" : ""}`, onClick: () => onInsertModeChange("center"), children: "Center" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: `ce-tray-btn${showLabels ? " is-active" : ""}`, onClick: onToggleLabels, title: showLabels ? "Hide labels" : "Show labels", "aria-pressed": showLabels, "aria-label": "Toggle tile labels", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "type", size: 18 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onUndo, disabled: !canUndo, title: "Undo (\u2318Z)", "aria-label": "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "rotate-ccw", size: 18 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onRedo, disabled: !canRedo, title: "Redo (\u2318\u21E7Z)", "aria-label": "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "rotate-cw", size: 18 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onClose, title: "Close blocks toolbar", "aria-label": "Close blocks toolbar", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", size: 18 }) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `ce-tray-dock${pos ? " is-floating" : ""}`,
+      style: pos ? { left: pos.x, top: pos.y } : bounds ? { left: bounds.left, width: bounds.width } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pillRef, className: "ce-tray", role: "toolbar", "aria-label": "Blocks", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ce-tray-btn is-grab",
+            onPointerDown: onHandlePointerDown,
+            onDoubleClick: () => setPos(null),
+            title: "Move toolbar (double-click to dock)",
+            "aria-label": "Move toolbar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "move", size: 18 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ce-tray-tiles", children: trayItems().map((def) => /* @__PURE__ */ jsxRuntime.jsx(TrayTile, { def, showLabel: showLabels }, def.type)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ce-seg", role: "radiogroup", "aria-label": "Insert control placement", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": insertMode === "side", className: `ce-seg-btn${insertMode === "side" ? " is-active" : ""}`, onClick: () => onInsertModeChange("side"), children: "Side" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": insertMode === "center", className: `ce-seg-btn${insertMode === "center" ? " is-active" : ""}`, onClick: () => onInsertModeChange("center"), children: "Center" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: `ce-tray-btn${showLabels ? " is-active" : ""}`, onClick: onToggleLabels, title: showLabels ? "Hide labels" : "Show labels", "aria-pressed": showLabels, "aria-label": "Toggle tile labels", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "type", size: 18 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onUndo, disabled: !canUndo, title: "Undo (\u2318Z)", "aria-label": "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "rotate-ccw", size: 18 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onRedo, disabled: !canRedo, title: "Redo (\u2318\u21E7Z)", "aria-label": "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "rotate-cw", size: 18 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ce-tray-btn", onClick: onClose, title: "Close blocks toolbar", "aria-label": "Close blocks toolbar", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", size: 18 }) })
+      ] })
+    }
+  );
 }
 function TrayTile({ def, showLabel }) {
   const { attributes, listeners, setNodeRef, isDragging } = core$1.useDraggable({
@@ -4196,6 +4223,7 @@ function CanvasEditor({
     writePref(TRAY_OPEN_KEY, open ? "1" : "0");
   };
   const [trayLabels, setTrayLabelsState] = react.useState(() => readPref(TRAY_LABELS_KEY) === "1");
+  const canvasRef = react.useRef(null);
   const toggleTrayLabels = () => setTrayLabelsState((v) => {
     writePref(TRAY_LABELS_KEY, v ? "0" : "1");
     return !v;
@@ -4581,7 +4609,7 @@ function CanvasEditor({
           metaPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", style: { borderColor: "var(--color-border)" }, children: metaPanel({ doc: currentDoc(), setMeta }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "ce-canvas", style: { background: settings?.outerBackground || void 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { ref: canvasRef, className: "ce-canvas", style: { background: settings?.outerBackground || void 0 }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ce-canvas-body", children: /* @__PURE__ */ jsxRuntime.jsx(
           CanvasArea,
           {
@@ -4601,6 +4629,7 @@ function CanvasEditor({
         trayOpen && /* @__PURE__ */ jsxRuntime.jsx(
           BlockToolbar,
           {
+            anchor: canvasRef,
             insertMode,
             onInsertModeChange: setInsertMode,
             showLabels: trayLabels,