@scrawl-board/board 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/styles.css

@@ -125,11 +125,73 @@
   overflow-x: auto;
   transform: translateX(-50%);
 }
+/* `anchor` supplied (DefaultBoardChrome's own toolbar): follow the active
+   tool button's own position (set inline as left/top) instead of centring
+   over the whole toolbar — inset-block-end must yield explicitly, since an
+   inline `top` alongside a stylesheet `bottom` would otherwise stretch the
+   box rather than let `top` alone govern its position. */
+[data-scrawl-root] .scrawl-board__style-shelf[data-anchored="true"] {
+  inset-block-end: auto;
+  transform: translate(-50%, calc(-100% - 12px));
+}
 [data-scrawl-root] .scrawl-board__style-group { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
 [data-scrawl-root] .scrawl-board__style-group > span:first-child { color: var(--scrawl-color-text-muted); font-size: 0.75rem; font-weight: var(--scrawl-font-weight-strong); text-transform: uppercase; }
 [data-scrawl-root] .scrawl-board__style-group button { align-items: center; display: flex; justify-content: center; padding: 6px 10px; }
 [data-scrawl-root] .scrawl-board__style-group button span[aria-hidden] { block-size: 18px; border-radius: 50%; inline-size: 18px; }
 
+/*
+ * Fixed, not absolute: `screenPosition` (BoardSnapshot.focusedItem) is
+ * computed from the canvas's own getBoundingClientRect, i.e. viewport
+ * coordinates — matching `position: fixed` is what keeps this toolbar
+ * glued to the focused object regardless of where [data-scrawl-root] sits
+ * on the page, the same contract every other consumer of `boardToScreen`
+ * already relies on.
+ */
+[data-scrawl-root] .scrawl-board__focus-toolbar {
+  align-items: center;
+  background: var(--scrawl-color-surface-raised);
+  border: 1px solid color-mix(in srgb, var(--scrawl-color-surface-raised), var(--scrawl-color-text) 12%);
+  border-radius: var(--scrawl-radius-panel);
+  box-shadow: var(--scrawl-elevation-low);
+  display: flex;
+  gap: 12px;
+  max-inline-size: calc(100vw - 24px);
+  overflow-x: auto;
+  padding: 4px;
+  pointer-events: auto;
+  position: fixed;
+  transform: translate(-50%, calc(-100% - 12px));
+  z-index: 15;
+}
+
+/* Notes have no gizmo of their own (it's ink-stroke/shape-only) — this is
+   that capability's default-ui-owned equivalent, visually matching the
+   gizmo's own restyle (spaced outline, circular handles, GAP_PX outset). */
+[data-scrawl-root] .scrawl-board__focus-outline {
+  border: 2px solid var(--scrawl-color-focus);
+  border-radius: var(--scrawl-radius-control);
+  pointer-events: none;
+  position: fixed;
+  z-index: 12;
+}
+[data-scrawl-root] .scrawl-board__focus-outline[data-locked="true"] { border-color: var(--scrawl-color-warning); }
+
+[data-scrawl-root] .scrawl-board__focus-handle {
+  background: var(--scrawl-color-focus);
+  block-size: 14px;
+  border: 2px solid var(--scrawl-color-surface);
+  border-radius: 50%;
+  box-shadow: var(--scrawl-elevation-low);
+  inline-size: 14px;
+  pointer-events: auto;
+  position: fixed;
+  touch-action: none;
+  transform: translate(-50%, -50%);
+  z-index: 16;
+}
+[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nwse"] { cursor: nwse-resize; }
+[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nesw"] { cursor: nesw-resize; }
+
 [data-scrawl-root] [data-scrawl-default-ui] button,
 [data-scrawl-root] [data-scrawl-default-ui] select,
 [data-scrawl-portal] .scrawl-board__panel button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrawl-board/board",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.6",
   "description": "The Scrawl Board SDK: an embeddable, collaborative infinite-canvas whiteboard for React and vanilla JS/TS apps.",
   "license": "Apache-2.0",
   "repository": {