@drawnagency/primitives 0.1.113 → 0.1.115

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>
   );
 }

package/src/components/editor/StatusIndicator.tsx

@@ -74,10 +74,10 @@ export function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, i
 }
 
 const dotColorClasses: Record<StatusColor, string> = {
-  live: "bg-green-500",
-  draft: "bg-gray-400",
-  archived: "bg-white border-gray-300",
-  modified: "bg-orange-400",
+  live: "bg-status-live-text",
+  draft: "bg-status-draft-text",
+  archived: "bg-white border-status-draft-text",
+  modified: "bg-status-modified-text",
 };
 
 

package/src/components/editor/TagIndicator.tsx

@@ -0,0 +1,80 @@
+import { useState, type FormEvent } from "react";
+import { Plus } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { tagDisplayLabel } from "../../lib/tags";
+import type { TagEntry } from "../../schemas/tags";
+import { IndicatorPill } from "./IndicatorPill";
+import { PopoverItem } from "../shared/PopoverItem";
+import { IconButton } from "../shared/IconButton";
+import { CheckboxBox } from "../shared/Checkbox";
+
+interface TagIndicatorProps {
+  /** The site's tag registry, already reconciled (siteTags). */
+  tags: TagEntry[];
+  /** The ids of the tags on this section. */
+  assignedIds: string[];
+  onToggle: (tagId: string, tagged: boolean) => void;
+  /** Create a tag from a typed name and put it on this section. */
+  onCreate: (label: string) => void;
+  /** Display-only mode — the pill still summarizes, but the picker never opens. */
+  disabled?: boolean;
+}
+
+export function TagIndicator({ tags, assignedIds, onToggle, onCreate, disabled }: TagIndicatorProps) {
+  const [draft, setDraft] = useState("");
+  const assigned = tags.filter((t) => assignedIds.includes(t.id));
+
+  const labelText = assigned.length === 0
+    ? "No tags"
+    : assigned.length === 1 ? tagDisplayLabel(assigned[0].label) : `${assigned.length} tags`;
+  const ariaSummary = assigned.length === 0 ? "none" : assigned.map((t) => tagDisplayLabel(t.label)).join(", ");
+
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    const label = draft.trim();
+    if (!label) return;
+    onCreate(label);
+    setDraft("");
+  }
+
+  return (
+    <IndicatorPill
+      dots={[]}
+      label={labelText}
+      ariaLabel={`Tags: ${ariaSummary}`}
+      buttonClassName={assigned.length === 0 ? "text-base-contrast-light" : undefined}
+      disabled={disabled}
+      clickContent={
+        <div className="w-56 py-1">
+          {tags.length > 0 && (
+            <ul role="list" className="max-h-64 overflow-y-auto">
+              {tags.map((t) => {
+                const checked = assignedIds.includes(t.id);
+                return (
+                  <li key={t.id}>
+                    <PopoverItem role="checkbox" aria-checked={checked} onClick={() => onToggle(t.id, !checked)}>
+                      <CheckboxBox checked={checked} />
+                      <span className={cn("truncate font-medium text-base-contrast", !t.label && "italic text-base-contrast/60")}>
+                        {tagDisplayLabel(t.label)}
+                      </span>
+                    </PopoverItem>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          <form onSubmit={submit} className={cn("flex items-center gap-1 px-3 py-1.5", tags.length > 0 && "border-t border-base-200")}>
+            <input
+              aria-label="New tag"
+              value={draft}
+              placeholder={tags.length > 0 ? "New tag" : "Create the first tag"}
+              onChange={(e) => setDraft(e.target.value)}
+              className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-xs text-base-contrast focus:border-base-contrast focus:outline-none"
+            />
+            <IconButton icon={<Plus size={14} />} label="Create tag" size="sm" type="submit" />
+          </form>
+        </div>
+      }
+    />
+  );
+}

package/src/components/primitives/DocumentDropZone.tsx

@@ -19,7 +19,7 @@ const isDocumentFile = (file: File) => file.type in DOCUMENT_MIME_TO_EXT;
  *
  * Deliberately thin on validation: every rejection (wrong type, too large, no
  * documents store) belongs to `uploadDocument`, which already routes typed copy
- * through the pipeline's `onUploadError` → `UploadRejectionAlert` channel. The
+ * through the pipeline's `onUploadError` → `InlineAlert` channel. The
  * one judgement made here is WHICH file of a multi-file drop to hand over.
  */
 export function DocumentDropZone({ onDocumentSelected, className }: DocumentDropZoneProps) {

package/src/components/primitives/EditableGrid.tsx

@@ -1,11 +1,12 @@
 import { useRef, useEffect, useState, useId, type ReactNode } from "react";
-import { ImageIcon } from "lucide-react";
-import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
+import { ImageIcon, Plus, Trash2, Settings } from "lucide-react";
+import { DragHandle } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
+import { DropEdgeIndicator } from "../editor/DropEdgeIndicator";
 import { cn } from "../../lib/cn";
 import { containerGridClass } from "../../lib/container-grid";
 import { useEditableCollection } from "./useEditableCollection";
-import { resolveDropIndex } from "./gridDrop";
+import { resolveDropIndex } from "./grid-drop";
 
 interface EditableGridProps<T> {
   items: T[];
@@ -166,7 +167,7 @@ export function EditableGrid<T>({
 
         {/* Add button — absolute, centered below the grid */}
         <IconButton
-          icon={<AddIcon size={16} />}
+          icon={<Plus size={16} />}
           label="Add item"
           size="lg"
           intent="primary"
@@ -287,18 +288,18 @@ function GridCell<T>({
         isCellDragging && "opacity-50",
       )}
     >
-      {/* Drop indicator — centered in the gap between cells */}
-      {showLeftEdge && (
-        <div className="absolute top-0 bottom-0 left-0 z-10 w-0.5 -translate-x-2 bg-primary" />
-      )}
-      {showRightEdge && (
-        <div className="absolute top-0 right-0 bottom-0 z-10 w-0.5 translate-x-2 bg-primary" />
-      )}
+      {/* Drop indicator — centered in the gap between cells. The gap is wider
+          here than DropEdgeIndicator's default gutter, so the offset goes
+          through `style`. */}
+      <DropEdgeIndicator
+        edge={showLeftEdge ? "left" : showRightEdge ? "right" : null}
+        style={{ transform: showLeftEdge ? "translateX(-0.5rem)" : "translateX(0.5rem)" }}
+      />
 
       {/* Insert button — centered in the gap between cells */}
       {!isDragging && !isLast && (
         <IconButton
-          icon={<AddIcon size={12} />}
+          icon={<Plus size={12} />}
           label="Insert item"
           size="sm"
           intent="primary"
@@ -328,14 +329,14 @@ function GridCell<T>({
         )}
         {onSettings && (
           <IconButton
-            icon={<SettingsIcon size={16} />}
+            icon={<Settings size={16} />}
             label="Item settings"
             onClick={onSettings}
             className="bg-base/80 shadow-sm"
           />
         )}
         <IconButton
-          icon={<DeleteIcon size={16} />}
+          icon={<Trash2 size={16} />}
           label="Delete item"
           intent="destructive"
           onClick={() => onRemove(id)}