smoodly 0.0.12 → 0.0.13

package/README.md

@@ -205,8 +205,9 @@ Implemented:
   `AdminLayout` for the app's `[[...segments]]` route group;
   `createAdminOpHandler` is the one server action the client ops call),
   and `smoodly/bridge` (`EditorBridge`, the only piece that ships to the
-  SITE side — runs inside the draft-route iframe, reports node/zone
-  geometry, forwards select/hover, executes refresh/scroll). Shell
+  SITE side — runs inside the draft-route iframe, reports node, zone and
+  marked-field geometry, forwards select/hover with the field under the
+  pointer, executes refresh/scroll, reports each committed render). Shell
   (registry-derived nav, list views, its own client-side router —
   `shell/router.ts`, `RouteLink`, a leave guard for dirty forms; the
   shell mounts from the layout and the catch-all page only makes the
@@ -217,8 +218,9 @@ Implemented:
   canvas — the iframe is the site's own draft route, pixel-identical by
   construction; every gesture mutates client tree state through pure
   ops, a debounced `saveDraft` persists, and the bridge refreshes the
-  iframe on the save ack — refresh-on-change preview, not a live DOM
-  sync) are all real, in-house. The autosave itself is a framework-free
+  iframe on the save ack — refresh-on-change preview for structure; text
+  and richtext are edited in place in the canvas and inspector text edits
+  land there the same tick, spec 2026-09-10) are all real, in-house. The autosave itself is a framework-free
   controller (`createDraftAutosave`: debounce, doubling capped retry,
   pre-publish `flush`) wrapped by `useDraftAutosave`; the controller is
   unit-tested with fake timers, the hook only for its initial snapshot. Proven end-to-end in
@@ -247,8 +249,10 @@ Implemented:
   derived path as the Path column, and per row its kind, status, sibling
   position and whether it may take children), rendered by
   `admin/shell/PagesList.tsx` with a row menu over the tree ops (New
-  subpage, New subfolder, Add page here, Rename…, Move up / Move down,
-  Delete, and Edit index page on a mount a fixed page claims). The editor
+  subpage, New subpath, Add page here, Rename…, Move up / Move down,
+  Delete); a mount a fixed page claims opens that index page's editor
+  on click like any page row (2026-09-09), a bare mount opens the
+  collection list. The editor
   is keyed by id, with a locale switcher loading that locale's own tree
   and pointing the canvas at `urls[locale]` and, while no block is
   selected, page settings (`admin/editor/PageSettings.tsx`: the title and
@@ -320,6 +324,10 @@ Implemented:
   because Next loads `next.config.ts` in plain Node, where anything that
   reaches `next/image` fails to resolve (next@16 has no `exports` map);
   `smoodly/image` still re-exports the helper for code the bundler sees.
+- `smoodly/richtext` — the bound richtext renderer, `createRichText({
+  elements, sizes })`: the root `RichText` with the project's elements and
+  body images through `<SmoodlyImage>`. Its own entry for the same reason
+  as `smoodly/image`: it reaches `next/image`.
 
 - Locked zones are usable: `fillLockedZones` (a pure tree op) materializes
   the one node of every empty locked zone from the component's `sample`
@@ -362,11 +370,20 @@ Implemented:
   a toolset forbids survives every round trip. Links carry `href` only. An
   empty document is missing for a required field. The widget emits plain
   JSON: ProseMirror's node attrs have a null prototype, which a server
-  action cannot serialize.
+  action cannot serialize. Block nodes (spec 2026-09-08 block nodes): an
+  `image` node (media library, caption, alt override) and one generic
+  `element` node for every registered Element, always in the schema,
+  inserted through the toolbar's "+" or a `/` menu, edited as cards (the
+  element card renders its fields through `FieldWidget`, nested richtext
+  included). `RichText` takes `elements` and an `image` render prop;
+  `smoodly/richtext` exports `createRichText` bound over `<SmoodlyImage>`.
+  The media and refs walks descend into documents against the element
+  schemas (`elements` beside `sections` in the store, resolve and site
+  options).
 
-Not yet: Elements in richtext, drag-and-drop
-reordering (move-up/move-down buttons in the editor, Move up / Move down
-in the Pages list's row menu), undo/redo, sample/placeholder content
+Not yet: canvas drag-and-drop (list fields, the outline, manual
+collections and the pages tree drag since 2026-09-09 — spec
+`docs/superpowers/specs/2026-09-09-drag-and-drop-design.md`), undo/redo, sample/placeholder content
 marking, per-locale section visibility conditions (OQ #3 — each locale
 now has its own tree, so a section's fields are already per locale; what
 is open is hiding a section by a locale-dependent condition).
@@ -390,6 +407,114 @@ after both are on the registry. From the repo root:
 `prepublishOnly` rebuilds each package. The Claude Code skill
 `.claude/skills/releasing-smoodly` carries the same order with its checks.
 
+## Follow-ups (logged 2026-09-10, inline editing spec)
+
+- Shared placements ignore field clicks: their fields live in the shared
+  item under Globals, which the page editor cannot patch. The starter's
+  Header and Footer carry marks already; inline editing of shared content
+  needs the shared form's ops behind the canvas.
+- Richtext instant write from the inspector: the pure `RichText` render
+  swapped into the container while the widget is typed in.
+- Item-level chrome in the canvas ("Key points · 3 of 4" on hover, add,
+  remove, reorder in place, later drag within a list): the item marks are
+  the hook.
+- Placeholder and validation marks on the page (the sample-sourced
+  placeholder treatment, "required, empty" outlines) wait for the tree's
+  placeholder marking.
+- A coverage hint for developers: the admin knows a section's text fields
+  and could list the ones without a mark.
+- AI verbs ("rewrite this heading") need a field under the cursor, which
+  a mark is.
+- A cross-origin admin needs the bridge-side editing variant (spec §3).
+- Direct-child spacing rules on a richtext container (Tailwind `space-y-*`,
+  `.prose > p`) do not reach the canvas editor's blocks during a session;
+  flex and grid gaps are copied (onto the ProseMirror root since the
+  walk, 69aecc6). Documented, not fixed.
+- The text session's Enter commits: a plain text field has no line breaks.
+  A multi-line text control would be its own descriptor.
+- The floating toolbar flips below the caret only near the top of the
+  DOCUMENT (where the page box clips it); it scrolls with the content, so
+  a caret at the top of the scrolled canvas has its toolbar out of view
+  until the editor scrolls. A flip keyed to the scroller's viewport would
+  fix it.
+- No starter section gives the canvas a richtext with blocks: the Image
+  and text body is marks-only, and the article body (the `article`
+  toolset) is edited in the entry form. The walk borrowed the article
+  toolset for the block steps; a starter section with a long-form body
+  would let the canvas show them.
+- The caret placed right after an existing `/` reopens the slash menu
+  (TipTap's suggestion re-triggers on the character before the caret).
+  Harmless; a trigger keyed to typing only would be stricter.
+- Walk findings, all fixed the same day (69aecc6): the copied flex gap
+  landed on the editor root instead of the ProseMirror element that holds
+  the blocks, so paragraphs lost their spacing; a click on a marked image
+  revealed nothing because the reveal forced the Content tab while the
+  media projection puts the image on Media; Escape after a card's button
+  had taken the focus did not end the session.
+
+## Follow-ups (logged 2026-09-08, admin restyle)
+
+- Remove the temporary `technical` look once the warm restyle is decided:
+  the `TECHNICAL_*` strings (frozen tokens plus the `_SHAPE`/`_EXTRA`
+  additions), the second `cascade` call and the boot script's
+  `smoodly-look` branch in `src/admin/ui/theme.tsx`. The original look
+  stays at tag `look-technical`; restore the file from there if the
+  restyle is dropped instead.
+- The technical block is a token snapshot, not a pixel restore: shared
+  class rules moved with the warm look, so under `data-look="technical"`
+  the inspector is flush cards with a hairline instead of one column with
+  a sticky head, tabs are stretched, inputs have a 1px (not 1.5px)
+  border, rail tiles are 42×34, and a few weights and gaps drifted. Exact
+  comparison is the tag.
+- Signed-in walk of the warm look still pending: the sign-in screen was
+  checked in the browser pane (light and dark), the list, entry form and
+  visual editor were not — the magic-link sign-in carries a token in the
+  URL, which the pane's policy blocks. Walk them, then tune: inspector
+  width (320px here, the handoff says 296px; the field widgets need the
+  room), the canvas meta bar (the handoff has none; ours holds the locale
+  switcher), and the block-toolbar note.
+- The handoff's `Styles` tab in the inspector is not built: it exists
+  only where a section registers styles, which is the existing `tabsFor`.
+- Wordmark and app icon colour: the wordmark now takes `--logo-color`
+  (accent in the warm look); the rail's app icon is hidden in the warm
+  look and still brand blue in the technical one. A warm app icon is a
+  design question.
+
+## Follow-ups (logged 2026-09-08, block nodes spec)
+
+- Image sizing and float in a body (full width, wide, small, left/right):
+  a later additive `styles` on the image node; the site's CSS answers it.
+- Inline elements: `inline: true` on the registration; cursor, marks and
+  selection around an inline atom are a separate node-view effort.
+- The column context (`contexts: ["column"]`) waits for Phase 3 rows;
+  accepted and unused today.
+- A page or entry picker for `f.link()` inside an element — the link
+  picker spec.
+- Element copy between fields: a pasted element the target toolset
+  forbids is dropped silently; a notice would be kinder.
+- Placeholder marking for sample-populated element fields waits for the
+  tree's own placeholder marking.
+- An element's styles are not merged with the config's `styles.elements`
+  standard set (sections get `resolvedStyles`); add the merge when the
+  set is non-empty somewhere.
+- Element styles are not validated on publish (sections' aren't either).
+- `hasContent` treats an unresolved image node as content, so a body
+  whose only image was deleted from the library still passes "required".
+- Publishing a saved version of a versioned entry: the entry form's
+  status control returns early when the target equals the current status,
+  so a new version of a published entry goes live only by toggling Draft
+  then Published (seen in the block-nodes walk; pre-existing). A "Publish
+  changes" action when the draft version is ahead of the published one.
+- The insert position is recorded when the "+" menu opens and handed to
+  `insertContentAt`, because after the menu or the media picker takes
+  focus the refocused contenteditable placed its DOM caret at the first
+  card and the editor's selection followed it (the walk's first inserts
+  landed at the document top). The explicit position closes the hole;
+  the DOM-caret drift itself was not chased to its root.
+- The "+" menu and the slash menu share `RichtextInsertMenu` but keep
+  separate active-row state and key handling; one keyboard model would
+  be smaller.
+
 ## Follow-ups (logged 2026-09-08, tooling session)
 
 - **CI live job red since e09a632, 0.0.11 fresh install broken — fixed
@@ -436,8 +561,6 @@ after both are on the registry. From the repo root:
 - Video transcoding and adaptive streaming: a Mux or Cloudflare Stream
   loader behind the `media.loader` seam, if a site ever needs more than
   an MP4 over Storage's CDN.
-- Richtext images: the `image` node from the Phase 0 sketch, using the
-  media picker once it exists.
 - Sweeping abandoned `pending` asset rows (an upload that began and
   never called `finishUpload`); a periodic op or a cleanup on `list`.
 - A private bucket with signed reads, for sites that must not expose
@@ -503,18 +626,62 @@ after both are on the registry. From the repo root:
   generated (gitignored), so "templates rebuilt" is a build step, not a
   diff.
 
+## Follow-ups (logged 2026-09-09, admin tweaks)
+
+The 2026-09-09 tweak round: view titles sans 18px, the entry and
+Globals forms in one 680px column with a globe-off mark on fields that
+are not `.localized()` (the "Shared across languages" / "In <locale>"
+groups are gone), the image field on a 300px canvas, every locale
+switch a segmented pill (a dropdown past three locales), Media before
+Globals (née Shared) on the rail, richtext paragraph and card spacing,
+element cards collapsed unless blank, and the "+" menu floating under
+the toolbar instead of pushing the content.
+
+- `LocaleSwitcher` in pill form has no "+ add" affordance: an absent
+  locale reads subtle and switching to it lands on the form's or the
+  editor's "doesn't exist yet · Add" pane, which adds. The dropdown form
+  (four locales and up) still adds straight from its "Add locale" group,
+  so the two forms differ by one click; a "+" inside the pill would close
+  that gap.
+- The image field's canvas height (300px) lives twice: `CANVAS_H` in
+  `MediaWidget.tsx` sizes the frame, `.sm-media__canvas` /
+  `.sm-media__thumb` cap it in the stylesheet. One token would do.
+- `.sm-form>*{max-width:680px}` caps the banner too; if a wide
+  field type ever appears (a table), give it an opt-out class.
+- An element card decides "open" from its fields alone (blank = open);
+  an element whose fields are all optional and empty by design stays
+  open on every load. The richtext image card is never collapsible.
+- The "+" menu anchors to the toolbar's right end (`right:0` in
+  `.sm-richtext__head`), which is under the "+" only while the toolbar
+  fits on one line; in the 320px inspector the toolbar wraps and the
+  menu sits below the wrapped row's end.
+- The technical look's `TECHNICAL_SHAPE` tokens were not touched: its
+  title stays sans at `--text-xl`, its label has no mark styling beyond
+  the shared `.sm-label__mark` rule.
+- Browser-pane sign-in (2026-09-09): the magic-link hash on
+  `/admin/...` was NOT consumed by the admin's Supabase client in the
+  pane (the login form stayed); fetching `/auth/v1/user` with the
+  access token and writing the session object to `localStorage`
+  under `smoodly-auth`, then reloading, signed in. The pane was hidden
+  during the walk, so scrolling went through `.sm-form.scrollTop` and
+  clicks through `element.click()` in `javascript_tool`.
+
 ## Follow-ups (logged 2026-09-08, richtext widget spec)
 
-- Drag-to-resize the inspector: `--inspector-w` is one variable (380px
-  since the widget); a handle on the column edge writing it, persisted
-  per browser like the theme, is the follow-up.
+- ~~Drag-to-resize the inspector~~ — DONE 2026-09-10 (spec
+  `docs/superpowers/specs/2026-09-10-inspector-resize-design.md`):
+  `ui/ResizeHandle.tsx` writes `--inspector-w` inline on the wrapper,
+  clamped to 260px..half the row (`ui/resize.ts`), remembered under
+  `smoodly-inspector-w` and applied by the theme's boot script. Walk
+  finding: the desktop pane hides its tab on every `navigate`, and a
+  hidden tab lays out at zero width, so the handle treats a zero
+  measurement as unknown and re-measures on focus. Real drags through
+  the pane's `left_click_drag` worked (synthetic `PointerEvent`s cannot
+  satisfy `setPointerCapture`); coordinates are the screenshot frame,
+  0.625 × CSS px at the pane's 1280 width.
 - A page and entry picker in the link popover: a link inside a richtext
   document is a reference the refs index, the resolver and the localizer
   cannot see (they address refs by top-level key). Its own spec.
-- Elements in richtext: a registered Element as a TipTap node view with a
-  small form for its fields, rendered on the site by `RichText` through
-  the registry. The next spec.
-- Images in richtext: the Phase 0 sketch's `image` node; waits for media.
 - Escape inside any inspector control bubbles to the editor's window
   handler and clears the block selection — the link popover stops it, a
   textarea or the TipTap content does not. A `keydown` guard on
@@ -607,7 +774,7 @@ after both are on the registry. From the repo root:
   the header nav rows read `/`, `/posts` — where the label would identify
   the row; `itemSummary` could prefer a `label`/`title`/`heading` key
   (walk, 2026-09-07).
-- New page / New folder ask for the slug through `window.prompt`, which
+- New page / New path (a folder, "path" in the UI since 2026-09-09) ask for the slug through `window.prompt`, which
   browser automation blocks and which cannot validate as you type; an
   inline field would do both (walk, 2026-09-07).
 
@@ -719,11 +886,40 @@ after both are on the registry. From the repo root:
   `node:crypto`, etc. from a module reachable through the root would
   regress it silently.
 
+## Follow-ups (logged 2026-09-09)
+
+- Cross-zone drag in the outline: each zone is its own sortable list;
+  moving a block between zones is still insert-and-remove.
+- Nested manual collections show no grip (`canReorder` requires
+  `depth === 1`) until the entry tree UI exists — a flat index is not a
+  sibling index there.
+- Canvas drag: the overlay should reuse `ui/sortable.ts` across the
+  iframe boundary; `useSortable` measures container children, which the
+  overlay's ghost rows can be.
+- The Pages row menu's Move up / Move down could retire once the grip's
+  arrow keys are familiar; they stay for now as the discoverable path.
+- The grip's arrow keys in the pages tree step one VISIBLE slot with the
+  depth clamped — among siblings in a flat run, but across a depth change
+  the step follows the clamp. Documented as is.
+- A dragged subtree stays collapsed after the drop (`onDragStart`
+  collapses it through `toggle` and nothing re-expands it).
+- Walk findings (2026-09-09, every surface walked signed-in; the pointer
+  path with synthetic pointer events, autoscroll in Playwright because
+  the desktop pane pauses animation frames while hidden):
+  - FIXED: the lifted row's transform grew the scroller's overflow, so
+    the bottom-edge autoscroll chased it forever and the list scrolled
+    away under the pointer; `clampOffset` now holds the transform inside
+    the rows' extent while the slot keeps following the pointer.
+  - A depth-1 row dragged to the very end of the tree with no drift
+    projects onto the last root row's child slot, which a mount or the
+    home page refuses (muted row); the editor must drift left 20px to
+    land at the root. By spec §4 (depth = own depth + drift), noted as a
+    discoverability question for the canvas-drag round.
+  - The rows are held in place until the reload lands (checked with a
+    1.2 s fetch delay): no flicker on a fast stack either.
+
 ## Follow-ups (logged 2026-09-06)
 
-- Drag-and-drop in the Pages list — the ops it needs exist
-  (`pages.move(id, { parentId, index })`); the row menu's Move up / Move
-  down is the interim.
 - Nested entries have no admin UI beyond `entries.move`: nothing creates
   a child entry or shows the entry tree, and the entry form's slug prefix
   is the collection's mount base only, not the parent chain.
@@ -817,8 +1013,6 @@ after both are on the registry. From the repo root:
 - `EditorView.tsx` is ~850 lines now that it also holds the locale switch,
   add and remove flows — see the 2026-09-03 follow-up below for the seams
   (that entry is the one to act on).
-- The `LocaleSwitcher` is a native `<select>`; a `Segmented` with an
-  "+ add" affordance would match the Pages list.
 - `i18n/request.ts` returns `{ locale, messages: {} }`. next-intl 4.14.2
   throws `No messages found` when the provider inherits none, and the
   example has no UI strings of its own, so the object is empty; a

package/dist/admin/editor/CanvasOverlay.d.ts

@@ -1,6 +1,6 @@
 import type { TreeNode } from "../../render.tsx";
 import type { PlusButton } from "./overlay-geometry.ts";
-import type { BridgeRect, ZoneRect } from "./protocol.ts";
+import type { BridgeRect, FieldRect, ZoneRect } from "./protocol.ts";
 export type OverlaySelection = {
     node: TreeNode;
     rect: BridgeRect;
@@ -8,11 +8,15 @@ export type OverlaySelection = {
     shared: boolean;
     locked: boolean;
 };
-export declare function CanvasOverlay({ emptyZones, hoverRect, selection, plusButtons, onPlus, onMove, onDuplicate, onRemove, }: {
+export declare function CanvasOverlay({ emptyZones, hoverRect, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }: {
     emptyZones: ZoneRect[];
     hoverRect: BridgeRect | undefined;
     selection: OverlaySelection | null;
     plusButtons: PlusButton[];
+    /** The marked field under the pointer, inside the selected section (spec 2026-09-10 §2). */
+    fieldHover?: FieldRect;
+    /** The field with an active inline session. */
+    editing?: FieldRect;
     /** A "+" was clicked, at these viewport coordinates. */
     onPlus(button: PlusButton, clientX: number, clientY: number): void;
     onMove(id: string, dir: -1 | 1): void;

package/dist/admin/editor/CanvasOverlay.js

@@ -7,33 +7,31 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // itself never touches the iframe.
 import { useState } from "react";
 import { IconButton } from "../ui/primitives.js";
-export function CanvasOverlay({ emptyZones, hoverRect, selection, plusButtons, onPlus, onMove, onDuplicate, onRemove, }) {
+export function CanvasOverlay({ emptyZones, hoverRect, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }) {
     const [hoverPlus, setHoverPlus] = useState(null);
-    return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed sm-mono", style: {
+    return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
                     position: "absolute", left: z.x + 12, top: z.y, width: Math.max(0, z.w - 24),
-                    height: Math.max(56, z.h), fontSize: "var(--text-xs)",
-                    letterSpacing: ".04em", textTransform: "uppercase", color: "var(--gray-500)",
-                    borderColor: "var(--gray-300)",
+                    height: Math.max(56, z.h),
                 }, children: [z.zone, " \u00B7 empty"] }, `empty-${z.zone}`))), hoverRect && (_jsx("div", { style: {
                     position: "absolute", left: hoverRect.x, top: hoverRect.y,
                     width: hoverRect.w, height: hoverRect.h,
                     outline: "1.5px solid color-mix(in srgb, var(--selection) 45%, transparent)",
-                    outlineOffset: -1.5, borderRadius: "var(--radius-sm)",
-                } })), selection && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    outlineOffset: -1.5, borderRadius: "var(--selection-radius)",
+                } })), fieldHover && !(editing && editing.node === fieldHover.node && editing.path === fieldHover.path) && (_jsx("div", { className: "sm-fieldhover", style: { position: "absolute", left: fieldHover.x, top: fieldHover.y, width: fieldHover.w, height: fieldHover.h } })), editing && (_jsx("div", { className: "sm-fieldedit", style: { position: "absolute", left: editing.x, top: editing.y, width: editing.w, height: editing.h } })), selection && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                             position: "absolute", left: selection.rect.x, top: selection.rect.y,
                             width: selection.rect.w, height: selection.rect.h,
                             outline: "var(--outline-selection)", outlineOffset: -1.5,
-                            borderRadius: "var(--radius-sm)",
+                            borderRadius: "var(--selection-radius)",
                         } }), _jsxs("span", { className: "sm-blocktag", style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.shared && " · shared", selection.locked && " · locked"] }), _jsx("div", { className: "sm-blocktoolbar", style: {
                             position: "absolute", left: selection.rect.x + selection.rect.w - 8, top: selection.rect.y + 8,
                             transform: "translateX(-100%)", pointerEvents: "auto",
-                        }, children: selection.locked ? (_jsx("span", { className: "sm-mono", style: { fontSize: "var(--text-xs)", color: "#8C94A8", padding: "4px 8px" }, children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) })] })), plusButtons.map((p) => {
+                        }, children: selection.locked ? (_jsx("span", { className: "sm-blocktoolbar__note", children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) })] })), plusButtons.map((p) => {
                 const key = `${p.zone}-${p.index}`;
                 const hot = hoverPlus === key;
-                return (_jsxs("div", { style: { position: "absolute", left: 0, right: 0, top: p.y }, children: [hot && _jsx("div", { className: "sm-guide", style: { margin: "0 12px" } }), _jsxs("div", { style: {
+                return (_jsxs("div", { style: { position: "absolute", left: 0, right: 0, top: p.y }, children: [hot && _jsx("div", { className: "sm-guide", style: { margin: "0 12px" } }), _jsx("div", { style: {
                                 position: "absolute", left: "50%", top: 0, transform: "translate(-50%,-50%)",
                                 display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                                 pointerEvents: "auto",
-                            }, children: [_jsx("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => onPlus(p, e.clientX, e.clientY), children: "+" }), hot && _jsxs("span", { className: "sm-tooltip", children: ["Add to ", p.zone] })] })] }, key));
+                            }, children: _jsxs("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => onPlus(p, e.clientX, e.clientY), children: [_jsx("span", { className: "sm-plus__icon", children: "+" }), _jsx("span", { className: "sm-plus__label", children: "Add block" })] }) })] }, key));
             })] }));
 }