@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/editor/DropEdgeIndicator.tsx

@@ -1,20 +1,46 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../lib/cn";
+
 /**
- * The horizontal insertion line shown at the top or bottom edge of a row during
- * a closest-edge drag-to-reorder, paired with `useSortableRow`'s `closestEdge`.
+ * The insertion line shown at an edge of a row/cell during a closest-edge
+ * drag-to-reorder, paired with `useSortableRow`'s (or `useSortableNavRow`'s)
+ * `closestEdge`. `top`/`bottom` render a horizontal line spanning the row;
+ * `left`/`right` render a vertical one spanning its height.
  *
- * `inset` starts the line at the nested-row indent, which is the ONLY thing
- * distinguishing "drop inside this group" from "drop before this group" — and
+ * `inset` starts a horizontal line at the nested-row indent — the ONLY thing
+ * distinguishing "drop inside this group" from "drop before this group", and
  * a group's last member slot from the top-level slot that follows it.
+ *
+ * `style` is the escape hatch for a caller whose perpendicular offset differs
+ * from the default (a wider cell gutter, a caller-specific `top`) — it wins
+ * over the default Tailwind transform/position via normal inline-style
+ * precedence, so callers only need to override the property that differs.
  */
-export function DropEdgeIndicator({ edge, inset = false }: { edge: "top" | "bottom" | null; inset?: boolean }) {
+export function DropEdgeIndicator({
+  edge,
+  inset = false,
+  style,
+}: {
+  edge: "top" | "bottom" | "left" | "right" | null;
+  inset?: boolean;
+  style?: CSSProperties;
+}) {
   if (!edge) return null;
+  const horizontal = edge === "top" || edge === "bottom";
   return (
     <div
-      className={[
-        "absolute right-0 z-10 h-0.5 bg-primary",
-        inset ? "left-6" : "left-0",
-        edge === "top" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
-      ].join(" ")}
+      data-drop-edge={edge}
+      className={cn(
+        "absolute z-10 bg-primary",
+        horizontal
+          ? cn("right-0 h-0.5", inset ? "left-6" : "left-0")
+          : "top-0 bottom-0 w-0.5",
+        edge === "top" && "top-0 -translate-y-1/2",
+        edge === "bottom" && "bottom-0 translate-y-1/2",
+        edge === "left" && "left-0 -translate-x-1",
+        edge === "right" && "right-0 translate-x-1",
+      )}
+      style={style}
     />
   );
 }

package/src/components/editor/InsertButton.tsx

@@ -1,4 +1,4 @@
-import { AddIcon } from "../shared/icons";
+import { Plus } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
 import { Tooltip, Kbd } from "../shared/Tooltip";
 
@@ -11,7 +11,7 @@ export function InsertButton({ index, onInsert }: InsertButtonProps) {
   return (
     <Tooltip content={<><Kbd>Click</Kbd> to add below<br /><Kbd>Alt+Click</Kbd> to add above</>}>
       <IconButton
-        icon={<AddIcon size={18} />}
+        icon={<Plus size={18} />}
         label="Add section"
         className="pointer-events-auto rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast"
         tabIndex={-1}

package/src/components/editor/NavGroupRow.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useState } from "react";
-import { ChevronDown } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import type { NavGroupEntry } from "../../schemas/nav";
 import type { NavLocation } from "../../lib/nav-tree";
 import { groupDisplayLabel } from "../../lib/nav-tree";
 import { pluralize } from "../../lib/text";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
+import { ConfirmInline } from "../shared/ConfirmInline";
+import { IconButton } from "../shared/IconButton";
 import { Input } from "../shared/Input";
 import { Toggle } from "../shared/Toggle";
 import { DragHandle } from "./DragHandle";
@@ -15,6 +17,9 @@ import { useSortableNavRow } from "../../hooks/useSortableNavRow";
 interface Props {
   group: NavGroupEntry;
   entryIndex: number;
+  /** Total top-level entries — groups move among these only (never into a
+   *  group, unlike a page). */
+  entryCount: number;
   memberCount: number;
   /** Opens the settings panel on mount. The `+ Add group` flow sets this so a
    *  brand-new group lands with its label input focused. */
@@ -35,17 +40,21 @@ interface Props {
 }
 
 export function NavGroupRow({
-  group, entryIndex, memberCount, autoOpenSettings = false,
+  group, entryIndex, entryCount, memberCount, autoOpenSettings = false,
   onRename, onSetStartCollapsed, onDelete, onMove, onDragStateChange,
 }: Props) {
   const [settingsOpen, setSettingsOpen] = useState(autoOpenSettings);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [showError, setShowError] = useState(false);
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   const { rowRef, handleRef, isDragging, closestEdge } = useSortableNavRow<HTMLDivElement, HTMLButtonElement>({
     row: { kind: "group", groupId: group.id, index: entryIndex },
     entryIndex, kind: "group", onMove,
   });
+  const dragHintId = useId();
+  const moveTo = (delta: 1 | -1) =>
+    onMove({ groupId: null, index: entryIndex }, { groupId: null, index: entryIndex + delta });
 
   // Surface the hook's drag state upward so the modal can collapse this group
   // while it is the one being dragged.
@@ -65,8 +74,27 @@ export function NavGroupRow({
   return (
     <div ref={rowRef} data-testid={`nav-row-group-${group.id}`} className={cn("relative flex items-start gap-1", isDragging && "opacity-50")}>
       <DropEdgeIndicator edge={closestEdge} />
-      <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
-        <DragHandle ref={handleRef} />
+      <div className="flex shrink-0 items-center gap-1 py-2 [&_[role=tooltip]]:hidden">
+        <DragHandle ref={handleRef} tabIndex={0} aria-describedby={dragHintId} />
+        <div className="flex flex-col">
+          <IconButton
+            icon={<ChevronUp size={12} />}
+            label="Move up"
+            size="sm"
+            disabled={entryIndex === 0}
+            onClick={() => moveTo(-1)}
+          />
+          <IconButton
+            icon={<ChevronDown size={12} />}
+            label="Move down"
+            size="sm"
+            disabled={entryIndex === entryCount - 1}
+            onClick={() => moveTo(1)}
+          />
+        </div>
+        <span id={dragHintId} className="sr-only">
+          Use Move up / Move down to reorder with the keyboard.
+        </span>
       </div>
       <div className="min-w-0 flex-1 rounded-md border border-base-200 bg-base">
         <div className="flex items-center">
@@ -106,17 +134,18 @@ export function NavGroupRow({
             </div>
 
             {confirmingDelete ? (
-              <div className="flex flex-col gap-2 rounded-inner border border-base-200 p-3">
-                <p className="text-sm text-base-contrast">
-                  Delete this group? {pluralize(memberCount, "page")} will move to the top level.
-                </p>
-                <div className="flex justify-end gap-2">
-                  <Button variant="secondary" size="sm" onClick={() => setConfirmingDelete(false)}>Cancel</Button>
-                  <Button variant="destructive" size="sm" aria-label="Confirm delete" onClick={onDelete}>Delete</Button>
-                </div>
-              </div>
+              <ConfirmInline
+                message={`Delete this group? ${pluralize(memberCount, "page")} will move to the top level.`}
+                confirmLabel="Delete"
+                confirmAriaLabel="Confirm delete"
+                tone="neutral"
+                onConfirm={onDelete}
+                onCancel={() => setConfirmingDelete(false)}
+                returnFocusTo={deleteButtonRef}
+              />
             ) : (
               <Button
+                ref={deleteButtonRef}
                 variant="destructive" size="sm" aria-label="Delete group" className="self-start"
                 onClick={() => (memberCount === 0 ? onDelete() : setConfirmingDelete(true))}
               >

package/src/components/editor/PagesModal.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useState, useEffect } from "react";
-import { Check, ChevronDown, Home } from "lucide-react";
+import { useCallback, useState, useEffect, useId } from "react";
+import { Check, ChevronDown, ChevronUp, Home } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 // Sanctioned outside->inside import: document/ is a sealed subtree, but the
@@ -7,6 +7,8 @@ import type { Audience } from "../../auth/types";
 // sanctioned import in schemas/site-config.ts and lib/pages.ts).
 import type { DocumentOptions } from "../../document/engine/settings";
 import { Button } from "../shared/Button";
+import { ConfirmDialog } from "../shared/ConfirmDialog";
+import { IconButton } from "../shared/IconButton";
 import { Input } from "../shared/Input";
 import { Toggle } from "../shared/Toggle";
 import { AudienceIndicator } from "./AudienceIndicator";
@@ -80,7 +82,17 @@ export function PagesModal(props: PagesModalProps) {
 
   // `location` is optional: the archived flat block renders inert rows with no
   // nav position, exactly as it did when draggability keyed off `dragIndex`.
-  const renderPage = (page: Page, location?: NavLocation, entryIndex?: number) => (
+  // `liveSiblingRawIndexes` is the ordered list of RAW positions (within the
+  // group's `pageIds`, or within the top-level `entries`) that Move up/down
+  // may cross into — i.e. every LIVE sibling's raw slot, archived ones
+  // excluded. `location.index` is itself a raw position (drag needs it to
+  // splice correctly — see the ORIGINAL pageIds index comment below), so
+  // comparing it against a raw-space list (not a live COUNT) is what keeps an
+  // archived page sitting between two live ones from producing a wrongly
+  // disabled button or a click that silently swaps past the archived page
+  // with no visible reorder (drag can cross a group boundary; the keyboard
+  // pair deliberately cannot).
+  const renderPage = (page: Page, location?: NavLocation, entryIndex?: number, liveSiblingRawIndexes?: number[]) => (
     <PageRow
       key={page.id}
       page={page}
@@ -90,6 +102,7 @@ export function PagesModal(props: PagesModalProps) {
       otherSlugs={index.pages.filter((p) => p.id !== page.id).map((p) => p.slug)}
       location={location}
       entryIndex={entryIndex}
+      liveSiblingRawIndexes={liveSiblingRawIndexes}
       onMove={props.onMoveNavEntry}
       onToggleExpand={() => toggleExpand(page.id)}
       onSetHome={() => props.onSetHome(page.id)}
@@ -108,14 +121,28 @@ export function PagesModal(props: PagesModalProps) {
     />
   );
 
+  const entries = navEntries(index);
+  const entryCount = entries.length;
+  // Raw top-level positions that are "live" for Move up/down purposes: every
+  // group (always visible) plus every non-archived page — mirrors
+  // isLiveTopEntry in lib/nav-tree.ts, which describeNavMove's "N of M" uses.
+  const liveTopIndexes = entries
+    .map((entry, i) => ({ entry, i }))
+    .filter(({ entry }) => {
+      if (entry.kind === "group") return true;
+      const page = index.pages.find((p) => p.id === entry.pageId);
+      return page?.status === "live";
+    })
+    .map(({ i }) => i);
+
   return (
     <div className="flex flex-col gap-2 overflow-y-auto">
       <div className="flex flex-col gap-2">
-        {navEntries(index).map((entry, entryIndex) => {
+        {entries.map((entry, entryIndex) => {
           if (entry.kind === "page") {
             const page = index.pages.find((p) => p.id === entry.pageId);
             if (!page || page.status !== "live") return null;
-            return renderPage(page, { groupId: null, index: entryIndex }, entryIndex);
+            return renderPage(page, { groupId: null, index: entryIndex }, entryIndex, liveTopIndexes);
           }
 
           // CRITICAL: carry the ORIGINAL pageIds index (`pi`) through the filter.
@@ -134,6 +161,7 @@ export function PagesModal(props: PagesModalProps) {
               <NavGroupRow
                 group={entry}
                 entryIndex={entryIndex}
+                entryCount={entryCount}
                 memberCount={members.length}
                 autoOpenSettings={newGroupId === entry.id}
                 onRename={(label) => props.onRenameGroup(entry.id, label)}
@@ -146,7 +174,7 @@ export function PagesModal(props: PagesModalProps) {
                 <div data-testid={`nav-group-members-${entry.id}`} className="ml-6 flex flex-col gap-2">
                   {members.length === 0
                     ? <EmptyGroupDropzone groupId={entry.id} onMove={props.onMoveNavEntry} />
-                    : members.map(({ page, pi }) => renderPage(page, { groupId: entry.id, index: pi }, entryIndex))}
+                    : members.map(({ page, pi }) => renderPage(page, { groupId: entry.id, index: pi }, entryIndex, members.map((m) => m.pi)))}
                 </div>
               )}
             </div>
@@ -156,7 +184,7 @@ export function PagesModal(props: PagesModalProps) {
 
       {/* The only target for "after the last entry" when that entry is a group:
           every edge of a trailing group resolves to a position inside it. */}
-      <TailDropzone entryCount={navEntries(index).length} onMove={props.onMoveNavEntry} />
+      <TailDropzone entryCount={entryCount} onMove={props.onMoveNavEntry} />
 
       <div className="mt-2 flex gap-2">
         <Button
@@ -194,11 +222,16 @@ export function PagesModal(props: PagesModalProps) {
 }
 
 function PageRow({
-  page, audiences, expanded, isNew, otherSlugs, location, entryIndex, onMove, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onSetDocument, onRequestDelete,
+  page, audiences, expanded, isNew, otherSlugs, location, entryIndex, liveSiblingRawIndexes, onMove, onToggleExpand, onSetHome, onSetArchived, onSetFields, onSetAudience, onSetDocument, onRequestDelete,
 }: {
   page: Page; audiences: Audience[]; expanded: boolean;
   isNew: boolean; otherSlugs: string[];
   location?: NavLocation; entryIndex?: number;
+  /** Ordered RAW positions of every LIVE sibling (the enclosing group's
+   *  `pageIds`, or the top-level `entries`, whichever `location.groupId`
+   *  selects) — see the comment on `renderPage` in PagesModal. Drag can cross
+   *  a group boundary; the keyboard pair deliberately cannot. */
+  liveSiblingRawIndexes?: number[];
   onMove: (from: NavLocation, to: NavLocation) => void;
   onToggleExpand: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
   onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
@@ -211,6 +244,19 @@ function PageRow({
     row: { kind: "page", pageId: page.id, groupId: location?.groupId ?? null, index: location?.index ?? 0 },
     entryIndex: entryIndex ?? 0, kind: "page", onMove, enabled: draggable,
   });
+  const dragHintId = useId();
+  // Neighbours are resolved among LIVE siblings only, then translated back to
+  // the neighbour's own raw index — never `location.index + delta`, which
+  // would step into an archived page's raw slot instead of the next visible
+  // row (see the `liveSiblingRawIndexes` comment on PagesModal's renderPage).
+  const liveIndex = liveSiblingRawIndexes?.indexOf(location?.index ?? -1) ?? -1;
+  const canMoveUp = draggable && liveIndex > 0;
+  const canMoveDown = draggable && liveSiblingRawIndexes !== undefined && liveIndex !== -1 && liveIndex < liveSiblingRawIndexes.length - 1;
+  const moveTo = (delta: 1 | -1) => {
+    const neighbourRawIndex = liveSiblingRawIndexes?.[liveIndex + delta];
+    if (neighbourRawIndex === undefined) return;
+    onMove(location!, { groupId: location!.groupId, index: neighbourRawIndex });
+  };
 
   // The slug input edits a local draft; only valid values commit to the index,
   // which must always hold a non-empty, unique, non-reserved slug.
@@ -297,8 +343,27 @@ function PageRow({
     >
       <DropEdgeIndicator edge={closestEdge} inset={location?.groupId != null} />
       {draggable && (
-        <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
-          <DragHandle ref={handleRef} />
+        <div className="flex shrink-0 items-center gap-1 py-2 [&_[role=tooltip]]:hidden">
+          <DragHandle ref={handleRef} tabIndex={0} aria-describedby={dragHintId} />
+          <div className="flex flex-col">
+            <IconButton
+              icon={<ChevronUp size={12} />}
+              label="Move up"
+              size="sm"
+              disabled={!canMoveUp}
+              onClick={() => moveTo(-1)}
+            />
+            <IconButton
+              icon={<ChevronDown size={12} />}
+              label="Move down"
+              size="sm"
+              disabled={!canMoveDown}
+              onClick={() => moveTo(1)}
+            />
+          </div>
+          <span id={dragHintId} className="sr-only">
+            Use Move up / Move down to reorder with the keyboard.
+          </span>
         </div>
       )}
       <div className={cn("min-w-0 flex-1 rounded-md border border-base-200 bg-base", isDragging && "outline outline-2 outline-primary/50")}>
@@ -455,21 +520,29 @@ function DeleteConfirm({ page, onCancel, onConfirm }: { page: Page; onCancel: ()
   // type-the-name guard pre-satisfied ("" === "").
   const confirmName = pageDisplayTitle(page.title);
   return (
-    <div className="flex flex-col gap-3">
-      <p className="text-sm text-base-contrast">
-        Deleting <strong>{confirmName}</strong> permanently removes the page and its{" "}
-        <strong>{pluralize(n, "section")}</strong>. This is recoverable only via GitHub version history.
-      </p>
-      <Input
-        label={`Type the page name "${confirmName}" to confirm`}
-        value={typed}
-        onChange={setTyped}
-        placeholder={confirmName}
-      />
-      <div className="flex justify-end gap-3">
-        <Button variant="secondary" size="md" onClick={onCancel}>Cancel</Button>
-        <Button variant="destructive" size="md" disabled={typed !== confirmName} onClick={onConfirm}>Delete</Button>
-      </div>
-    </div>
+    <ConfirmDialog
+      isOpen
+      embedded
+      title="Delete this page?"
+      body={
+        <div className="flex flex-col gap-3">
+          <p className="text-sm text-base-contrast">
+            Deleting <strong>{confirmName}</strong> permanently removes the page and its{" "}
+            <strong>{pluralize(n, "section")}</strong>. This is recoverable only via GitHub version history.
+          </p>
+          <Input
+            label={`Type the page name "${confirmName}" to confirm`}
+            value={typed}
+            onChange={setTyped}
+            placeholder={confirmName}
+          />
+        </div>
+      }
+      confirmLabel="Delete"
+      tone="destructive"
+      confirmDisabled={typed !== confirmName}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
   );
 }

package/src/components/editor/SectionWrapper.tsx

@@ -1,14 +1,16 @@
-import { useState, useRef, useEffect } from "react";
-import { ArrowRightLeft, Plus } from "lucide-react";
+import { useState, useRef, useEffect, useId } from "react";
+import { ArrowRightLeft, Plus, ChevronUp, ChevronDown } from "lucide-react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { DragHandle } from "./DragHandle";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
 import { InsertButton } from "./InsertButton";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
 import { IconButton } from "../shared/IconButton";
-import { Tooltip, Kbd } from "../shared/Tooltip";
+import { Tooltip } from "../shared/Tooltip";
 import { StatusIndicator } from "./StatusIndicator";
 import { AudienceIndicator } from "./AudienceIndicator";
+import { TagIndicator } from "./TagIndicator";
 import { LockBadge } from "./LockBadge";
 import { SettingsForm } from "./SettingsForm";
 import { useEditorContext } from "../shell/EditorContext";
@@ -16,6 +18,7 @@ import { useEditorModal } from "../shell/EditorModalContext";
 import type { WrapperProps } from "../../lib/registry";
 import { buildBlockDragData, buildBlockDropData, isBlockDragData, canDropBlock } from "../../lib/block-dnd";
 import { cn } from "../../lib/cn";
+import { REFERENCE_TYPE } from "../../lib/reference-type";
 
 export function SectionWrapper({
   sectionId,
@@ -24,6 +27,7 @@ export function SectionWrapper({
   dirty,
   index,
   isLast,
+  sectionCount,
   containerId,
   isContainerBlock,
   definition,
@@ -31,6 +35,7 @@ export function SectionWrapper({
   audiences,
   access,
   onAccessChange,
+  tagging,
   onStatusChange,
   onSectionChange,
   onReorder,
@@ -64,6 +69,7 @@ export function SectionWrapper({
   const handleRef = useRef<HTMLButtonElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+  const dragHintId = useId();
 
   const hasSettings = !!(
     (definition.settings || definition.settingsForm) &&
@@ -120,6 +126,7 @@ export function SectionWrapper({
             containerId,
             index,
             isContainer: isContainerBlock,
+            isReference: sectionType === REFERENCE_TYPE,
           }),
         onGenerateDragPreview: () => {
           dropElement.style.opacity = "0.4";
@@ -182,7 +189,7 @@ export function SectionWrapper({
     // be torn down on lock-acquire (cleanup above) and re-run against the fresh
     // handle node on lock-release — without it, a locked-then-released section's
     // registration stays bound to the old unmounted handle and reorder breaks.
-  }, [sectionId, index, containerId, isContainerBlock, isEditMode, isLocked]);
+  }, [sectionId, sectionType, index, containerId, isContainerBlock, isEditMode, isLocked]);
 
   function handleSettingsClick() {
     if (!onSectionChange) return;
@@ -278,11 +285,14 @@ export function SectionWrapper({
         <div
           className={cn(
             "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
-            alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+            // group-focus-within: this cluster's own tab stops (DragHandle,
+            // Move up/down) would otherwise be focusable but invisible —
+            // hover alone doesn't cover keyboard navigation.
+            alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
           )}
         >
           <div className="relative -ml-[34px] flex flex-col items-center">
-            <DragHandle ref={handleRef} />
+            <DragHandle ref={handleRef} tabIndex={0} aria-describedby={dragHintId} />
             {onRequestInsert && !isDragging && chromeReady && (
               // Below xl the gutter can't fit the plus beside the handle, so it
               // hangs below it (absolute → no row-height contribution: the handle
@@ -295,6 +305,27 @@ export function SectionWrapper({
           <span className="pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80">
             {definition.label}
           </span>
+          {onReorder && (
+            <div className="pointer-events-auto flex items-center">
+              <IconButton
+                icon={<ChevronUp size={14} />}
+                label={sectionCount ? `Move up (position ${index + 1} of ${sectionCount})` : "Move up"}
+                size="sm"
+                disabled={index === 0}
+                onClick={() => onReorder(index, index - 1)}
+              />
+              <IconButton
+                icon={<ChevronDown size={14} />}
+                label={sectionCount ? `Move down (position ${index + 1} of ${sectionCount})` : "Move down"}
+                size="sm"
+                disabled={isLast}
+                onClick={() => onReorder(index, index + 1)}
+              />
+            </div>
+          )}
+          <span id={dragHintId} className="sr-only">
+            Use Move up / Move down to reorder with the keyboard.
+          </span>
         </div>
       )}
 
@@ -331,9 +362,18 @@ export function SectionWrapper({
             onChange={(newAccess) => onAccessChange?.(newAccess)}
           />
         </div>
+        <div className="pointer-events-auto">
+          <TagIndicator
+            tags={tagging.tags}
+            assignedIds={tagging.assignedIds}
+            disabled={isLocked || !tagging.onToggle || !tagging.onCreate}
+            onToggle={(tagId, tagged) => tagging.onToggle?.(tagId, tagged)}
+            onCreate={(label) => tagging.onCreate?.(label)}
+          />
+        </div>
 
         {!isLocked && onAddChild && (
-          <Tooltip className="pointer-events-auto" content={<><Kbd>Add</Kbd> a block</>}>
+          <Tooltip className="pointer-events-auto" content="Add a block">
             <IconButton
               icon={<Plus size={16} />}
               label="Add block"
@@ -344,7 +384,7 @@ export function SectionWrapper({
         )}
 
         {!isLocked && onMoveSection && (
-          <Tooltip className="pointer-events-auto" content={<><Kbd>Move</Kbd> to page</>}>
+          <Tooltip className="pointer-events-auto" content="Move to page">
             <IconButton
               icon={<ArrowRightLeft size={16} />}
               label="Move to page"
@@ -355,31 +395,32 @@ export function SectionWrapper({
         )}
 
         {!isLocked && hasSettings && (
-          <Tooltip className="pointer-events-auto" content={<><Kbd>Edit</Kbd> settings</>}>
+          <Tooltip className="pointer-events-auto" content="Edit settings">
             <SettingsButton onClick={handleSettingsClick} />
           </Tooltip>
         )}
 
         {!isLocked && onDelete && (
-          <Tooltip className="pointer-events-auto" content={<><Kbd>Delete</Kbd> section</>}>
+          <Tooltip className="pointer-events-auto" content="Delete section">
             <DeleteButton onDelete={onDelete} />
           </Tooltip>
         )}
       </div>
 
-      {/* Drop indicator — centered in the section's own padding-top */}
-      {closestEdge === "top" && (
-        <div
-          className="absolute right-0 left-0 z-10 h-0.5 bg-primary"
-          style={{
-            top: "calc(var(--section-gap) / 2 * -1)",
-            transform: "translateY(-50%)",
-          }}
-        />
-      )}
-      {closestEdge === "bottom" && isLast && (
-        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-primary" />
-      )}
+      {/* Drop indicator — centered in the section's own padding-top. Bottom
+          only ever shows on the last section: every other slot's "insert
+          after me" is the next section's own "top" line, so showing both
+          would double the line. */}
+      <DropEdgeIndicator
+        edge={closestEdge === "bottom" && !isLast ? null : closestEdge}
+        style={
+          closestEdge === "top"
+            ? { top: "calc(var(--section-gap) / 2 * -1)" }
+            : closestEdge === "bottom"
+              ? { transform: "none" }
+              : undefined
+        }
+      />
 
       {isLocked ? (
         // React 19 supports the boolean `inert` prop — blocks focus, pointer,

package/src/components/editor/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { SettingsIcon } from "../shared/icons";
+import { Settings } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
 
 interface SettingsButtonProps {
@@ -8,7 +8,7 @@ interface SettingsButtonProps {
 export function SettingsButton({ onClick }: SettingsButtonProps) {
   return (
     <IconButton
-      icon={<SettingsIcon size={16} />}
+      icon={<Settings size={16} />}
       label="Section settings"
       onClick={onClick}
       className="pointer-events-auto"

package/src/components/editor/SettingsForm.tsx

@@ -7,8 +7,10 @@ import { FormLabel } from "../shared/FormLabel";
 import { LinkField } from "../shared/LinkField";
 import { VideoSourceField } from "../shared/VideoSourceField";
 import { DocumentSourceField, type DocumentRef } from "../shared/DocumentSourceField";
+import { ImageBackgroundField } from "../shared/ImageBackgroundField";
 import { Tabs } from "../shared/Tabs";
 import type { LinkValue } from "../../schemas/link";
+import type { ImageBackground } from "../../schemas/shared";
 import type { VideoSource } from "../sections/Video/VideoBlock";
 import { cn } from "../../lib/cn";
 
@@ -101,6 +103,7 @@ function renderField(
   field: SettingsFieldDef,
   value: unknown,
   handleFieldChange: (key: string, newValue: unknown) => void,
+  values: Record<string, unknown>,
 ) {
   switch (field.type) {
     case "text":
@@ -184,6 +187,17 @@ function renderField(
         />
       );
 
+    case "image-background":
+      if (field.hidden?.(values)) return null;
+      return (
+        <ImageBackgroundField
+          key={key}
+          label={field.label}
+          value={value as ImageBackground | undefined}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
     default:
       return null;
   }
@@ -192,6 +206,9 @@ function renderField(
 export function SettingsForm({ schema, values, onChange, tabs }: SettingsFormProps) {
   const [local, setLocal] = useState(() => resolveValues(schema, values));
 
+  // `local` holds only schema keys; `hidden` predicates may read others (e.g. `ref`).
+  const allValues = { ...values, ...local };
+
   function handleFieldChange(key: string, newValue: unknown) {
     const next = { ...local, [key]: newValue };
     setLocal(next);
@@ -200,7 +217,7 @@ export function SettingsForm({ schema, values, onChange, tabs }: SettingsFormPro
 
   if (tabs) {
     const fields = (keys: string[]) =>
-      keys.filter((key) => key in schema).map((key) => renderField(key, schema[key], local[key], handleFieldChange));
+      keys.filter((key) => key in schema).map((key) => renderField(key, schema[key], local[key], handleFieldChange, allValues));
 
     const listed = new Set(tabs.flatMap((t) => t.fields));
     const otherKeys = Object.keys(schema).filter((key) => !listed.has(key));
@@ -216,7 +233,7 @@ export function SettingsForm({ schema, values, onChange, tabs }: SettingsFormPro
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange))}
+      {Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange, allValues))}
     </div>
   );
 }