@drawnagency/primitives 0.1.113 → 0.1.115

package/src/components/brandguide/ColorSwatchSettings.tsx

@@ -66,7 +66,7 @@ export default function ColorSwatchSettings({ color, onChange }: Props) {
         />
       ))}
       {!hasAnyValue(localColor) && (
-        <p role="alert" className="mt-1 text-xs text-red-600">
+        <p role="alert" className="mt-1 text-xs text-danger">
           Enter at least one value — this color won&rsquo;t be saved until you do.
         </p>
       )}

package/src/components/brandguide/ColorsEditable.tsx

@@ -71,6 +71,7 @@ export default function ColorsEditable({
           {collapsing && (
             <button
               onClick={() => setExpanded(!expanded)}
+              aria-expanded={expanded}
               className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
             >
               <span>{expanded ? "Hide Details" : "Show Details"}</span>

package/src/components/chat/ChatPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type MouseEvent } from "react";
-import { ArrowDown, ChevronDown, ChevronRight, History, Pin, PinOff, SquarePen, Trash2 } from "lucide-react";
+import { ArrowDown, ChevronDown, ChevronRight, History, Pin, PinOff, SquarePen, Trash2, X } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { ensureSanitizer } from "../../lib/sanitize";
 import { assistantHtml, MD_STYLES, USER_BUBBLE_CLASS } from "./markdown";
@@ -9,7 +9,6 @@ import { lockBodyScroll } from "../../lib/scroll-lock";
 import { loadHistory, upsertConversation, setConversationPinned, removeConversation, type StoredConversation } from "./chat-history";
 import { Select } from "../shared/Select";
 import { IconButton } from "../shared/IconButton";
-import { RemoveIcon } from "../shared/icons";
 
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
@@ -506,7 +505,7 @@ export default function ChatPanel({ open, closing, animateEnter, onClose, siteNa
               <IconButton icon={<SquarePen size={16} />} label="New conversation" onClick={clearConversation} className="rounded-inner hover:bg-base-accent" />
             )}
             <IconButton
-              icon={mode === "docked" ? <ChevronRight size={18} /> : mode === "sheet" ? <ChevronDown size={18} /> : <RemoveIcon size={18} />}
+              icon={mode === "docked" ? <ChevronRight size={18} /> : mode === "sheet" ? <ChevronDown size={18} /> : <X size={18} />}
               label={mode === "docked" ? "Hide chat" : "Close chat"}
               onClick={onClose}
               className="rounded-inner hover:bg-base-accent"

package/src/components/chat/ChatWidget.tsx

@@ -17,6 +17,7 @@
 //   bottom-16, bug report at bottom-28 above it), aligned to the content edge
 //   via fab-container-right like its neighbors.
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import { MessageCircle } from "lucide-react";
 import Fab from "../shared/Fab";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
@@ -163,9 +164,7 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
         aria-expanded={open}
         onClick={() => { setUserOpened(true); if (open) closePanel(); else openPanel(); }}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-        </svg>
+        <MessageCircle className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} aria-hidden="true" />
       </Fab>
       {everOpened && (
         <Suspense fallback={null}>

package/src/components/docfile/DocFilePane.tsx

@@ -9,6 +9,7 @@ import {
   ZoomOut,
 } from "lucide-react";
 import { useInitialFocus } from "../../hooks/useFocusTrap";
+import { useStackedEscape } from "../../hooks/useStackedEscape";
 import type { SiteDocument } from "../../lib/documents";
 import { documentFileUrl } from "../../schemas/documents";
 import { lockBodyScroll } from "../../lib/scroll-lock";
@@ -59,18 +60,9 @@ export default function DocFilePane({
   // initial focus only, not a trap.
   useInitialFocus(paneRef, true);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Escape") return;
-      // A modal opened on top of the pane owns Escape. Without this one keypress
-      // dismissed both — the same stacking rule Popover applies.
-      if (document.querySelector("[data-modal-layer]")) return;
-      e.preventDefault();
-      onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  // A modal opened on top of the pane owns Escape. Without this one keypress
+  // dismissed both — the same stacking rule Popover applies.
+  useStackedEscape(onClose, { enabled: true });
 
   useEffect(() => {
     setState("loading");

package/src/components/editor/ChildBlockWrapper.tsx

@@ -3,6 +3,7 @@ import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge
 import { CopyPlus } from "lucide-react";
 import { DragHandle } from "./DragHandle";
 import { DeleteButton } from "./DeleteButton";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
 import { SettingsButton } from "./SettingsButton";
 import { ColSpanControl } from "./ColSpanControl";
 import { Tooltip, Kbd } from "../shared/Tooltip";
@@ -96,25 +97,18 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
           </Tooltip>
         </div>
 
-        {/* Drop-edge indicators */}
-        {closestEdge === "left" && (
-          <div
-            data-drop-edge="left"
-            className="absolute bottom-0 left-0 top-0 z-10 w-0.5 -translate-x-1 bg-primary"
-          />
-        )}
-        {closestEdge === "right" && (
-          <div
-            data-drop-edge="right"
-            className="absolute bottom-0 right-0 top-0 z-10 w-0.5 translate-x-1 bg-primary"
-          />
-        )}
-        {closestEdge === "top" && (
-          <div data-drop-edge="top" className="absolute left-0 right-0 top-0 z-10 h-0.5 -translate-y-1 bg-primary" />
-        )}
-        {closestEdge === "bottom" && (
-          <div data-drop-edge="bottom" className="absolute left-0 right-0 bottom-0 z-10 h-0.5 translate-y-1 bg-primary" />
-        )}
+        {/* Drop-edge indicators. Left/right match DropEdgeIndicator's default
+            gutter (translate-x-1); top/bottom need a wider one (translate-y-1
+            vs the default's 50%-of-line-height), so those two go through the
+            `style` escape hatch. */}
+        <DropEdgeIndicator
+          edge={closestEdge}
+          style={
+            closestEdge === "top" ? { transform: "translateY(-0.25rem)" }
+              : closestEdge === "bottom" ? { transform: "translateY(0.25rem)" }
+              : undefined
+          }
+        />
 
         {children}
       </div>

package/src/components/editor/ConflictDialog.tsx

@@ -1,6 +1,7 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Button } from "../shared/Button";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { SegmentedControl } from "../shared/SegmentedControl";
+import { EditorModal } from "../shell/EditorModal";
 
 export interface ConflictItem {
   sectionId: string;
@@ -22,40 +23,31 @@ export function ConflictDialog({
   const [choices, setChoices] = useState<Record<string, "mine" | "theirs">>(
     Object.fromEntries(conflicts.map((c) => [c.sectionId, "mine" as const])),
   );
-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" role="dialog" aria-modal="true">
-      <div ref={panelRef} className="max-w-md rounded-lg bg-base p-6 shadow-xl">
-        <h2 className="mb-2 text-lg font-semibold text-base-contrast">Section changed by someone else</h2>
-        <p className="mb-4 text-sm text-base-contrast-light">
-          These sections were changed remotely while you edited them. Choose which version to keep — the other is safely stored locally.
-        </p>
-        <ul className="mb-4 space-y-2">
-          {conflicts.map((c) => (
-            <li key={c.sectionId} className="flex items-center justify-between gap-4 text-sm">
-              <span className="font-medium text-base-contrast">{c.label}</span>
-              <span className="flex gap-1">
-                {(["mine", "theirs"] as const).map((side) => (
-                  <button
-                    key={side}
-                    type="button"
-                    onClick={() => setChoices((prev) => ({ ...prev, [c.sectionId]: side }))}
-                    className={choices[c.sectionId] === side
-                      ? "rounded bg-primary px-2 py-1 text-primary-contrast"
-                      : "rounded border border-base-200 px-2 py-1 text-base-contrast hover:bg-base-accent"}
-                  >
-                    {side === "mine" ? "Keep mine" : "Take theirs"}
-                  </button>
-                ))}
-              </span>
-            </li>
-          ))}
-        </ul>
-        <div className="flex justify-end">
-          <Button variant="primary" size="md" onClick={() => onResolve(choices)}>Continue</Button>
-        </div>
+    <EditorModal isOpen onClose={() => {}} blocking size="standard" title="Section changed by someone else">
+      <p className="mb-4 text-sm text-base-contrast-light">
+        These sections were changed remotely while you edited them. Choose which version to keep — the other is safely stored locally.
+      </p>
+      <ul className="mb-4 space-y-2">
+        {conflicts.map((c) => (
+          <li key={c.sectionId} className="flex items-center justify-between gap-4 text-sm">
+            <span className="font-medium text-base-contrast">{c.label}</span>
+            <SegmentedControl
+              options={[
+                { value: "mine", label: "Keep mine" },
+                { value: "theirs", label: "Take theirs" },
+              ]}
+              value={choices[c.sectionId]}
+              onChange={(value) =>
+                setChoices((prev) => ({ ...prev, [c.sectionId]: value as "mine" | "theirs" }))
+              }
+            />
+          </li>
+        ))}
+      </ul>
+      <div className="flex justify-end">
+        <Button variant="primary" size="md" onClick={() => onResolve(choices)}>Continue</Button>
       </div>
-    </div>
+    </EditorModal>
   );
 }

package/src/components/editor/DeleteButton.tsx

@@ -1,4 +1,4 @@
-import { DeleteIcon } from "../shared/icons";
+import { Trash2 } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
 
 interface DeleteButtonProps {
@@ -8,7 +8,7 @@ interface DeleteButtonProps {
 export function DeleteButton({ onDelete }: DeleteButtonProps) {
   return (
     <IconButton
-      icon={<DeleteIcon size={16} />}
+      icon={<Trash2 size={16} />}
       label="Delete section"
       intent="destructive"
       onClick={onDelete}

package/src/components/editor/DragHandle.tsx

@@ -3,8 +3,20 @@ import { DragHandle as DragHandleIcon } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
 import { Tooltip, Kbd } from "../shared/Tooltip";
 
-export const DragHandle = forwardRef<HTMLButtonElement, { tooltipSide?: "bottom" | "right" }>(function DragHandle(
-  { tooltipSide },
+interface DragHandleProps {
+  tooltipSide?: "bottom" | "right";
+  /**
+   * Set by callers offering a keyboard alternative (SectionWrapper's Move
+   * up/down buttons) so the handle itself is reachable by keyboard and its
+   * `aria-describedby` hint announces the alternative. Callers with no
+   * keyboard alternative leave this at the default -1 (drag-only, mouse/touch).
+   */
+  tabIndex?: number;
+  "aria-describedby"?: string;
+}
+
+export const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(function DragHandle(
+  { tooltipSide, tabIndex = -1, "aria-describedby": ariaDescribedBy },
   ref,
 ) {
   return (
@@ -14,7 +26,8 @@ export const DragHandle = forwardRef<HTMLButtonElement, { tooltipSide?: "bottom"
         icon={<DragHandleIcon size={18} />}
         label="Drag to reorder section"
         className="pointer-events-auto cursor-grab active:cursor-grabbing rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast"
-        tabIndex={-1}
+        tabIndex={tabIndex}
+        aria-describedby={ariaDescribedBy}
       />
     </Tooltip>
   );

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