npm - @drawnagency/primitives - Versions diffs - 0.1.89 → 0.1.91 - Mend

@drawnagency/primitives 0.1.89 → 0.1.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/src/components/chat/ChatWidget.tsx CHANGED Viewed

@@ -1,17 +1,22 @@
 // Chat launcher + shell chooser. Browser-safe: no node imports, no process.env.
 //
-// Placements:
-// - "viewer" (default): >=768px the conversation docks as a full-height right
-//   sidebar (html.bp-chat-docked shifts the page band left — see base.css);
-//   below 768px it opens as a bottom sheet. The FAB shows only while closed.
-//   Docked-open is the default and the preference persists per tab
-//   (sessionStorage, mirrored by Layout.astro's pre-paint script so the
-//   column is reserved before hydration).
-// - "editor": unchanged floating panel at the BOTTOM of the /edit route's FAB
-//   column (edit-mode toggle at bottom-16, bug report at bottom-28 above it),
-//   aligned to the content edge via fab-container-right like its neighbors.
+// Both variants share the same conversation experience: >=768px it docks as a
+// full-height right sidebar (html.bp-chat-docked shifts the page band left —
+// see base.css); below 768px it opens as a bottom sheet. Open/close is
+// animated (sidebar slides in as the band shifts, sheet slides up, and ALL
+// page FABs shrink/fade away); prefers-reduced-motion keeps everything
+// instant. FABs show only while closed. Docked-open is the default and the
+// preference persists per tab (sessionStorage, mirrored by Layout.astro's
+// pre-paint script so the column is reserved before hydration) — shared
+// across viewer pages and /edit.
+//
+// The variants differ only in the launcher's placement:
+// - "viewer" (default): viewport corner (viewer-fab tracks the sidebar edge).
+// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
+//   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 { cn } from "../../lib/cn";
+import Fab from "../shared/Fab";
 const ChatPanel = lazy(() => import("./ChatPanel"));
@@ -34,19 +39,79 @@ export interface ChatWidgetProps {
   audience?: string | null;
 }
+/** Matches the 300ms slide transitions in base.css / ChatPanel. */
+const CLOSE_MS = 300;
+/** How long html.bp-chat-animating stays on: the 300ms glide plus a timer-
+ *  jitter buffer. The class gates the band/nav FLIP transforms in base.css —
+ *  it must outlive the transition (or the glide would cut off early) but
+ *  MUST come off afterwards, because a resting transform re-anchors
+ *  position:fixed descendants. */
+const ANIM_MS = 350;
 export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant = "viewer", audience }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
   const [docked, setDocked] = useState(false);
   const [userOpened, setUserOpened] = useState(false);
+  // Close is animated: the panel stays mounted while it slides out.
+  const [closing, setClosing] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const animTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fabRef = useRef<HTMLButtonElement>(null);
-  const isViewer = variant === "viewer";
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (animTimer.current) clearTimeout(animTimer.current);
+    document.documentElement.classList.remove("bp-chat-animating");
+  }, []);
+  function clearCloseTimer() {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }
+  function motionOk(): boolean {
+    return typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  /** Open the FLIP window for a docked toggle: while bp-chat-animating is on
+   *  <html>, base.css glides the band/nav via transform between the snapped
+   *  layouts (see the @property note there). User-driven toggles only — the
+   *  page-load restore must not replay the glide. */
+  function beginShiftWindow() {
+    if (!docked || !motionOk()) return;
+    document.documentElement.classList.add("bp-chat-animating");
+    if (animTimer.current) clearTimeout(animTimer.current);
+    animTimer.current = setTimeout(() => {
+      document.documentElement.classList.remove("bp-chat-animating");
+      animTimer.current = null;
+    }, ANIM_MS);
+  }
+  function openPanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setClosing(false);
+    setOpen(true);
+    setEverOpened(true);
+  }
+  function closePanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setOpen(false);
+    // Reduced motion unmounts immediately — the pre-animation behavior.
+    if (motionOk()) {
+      setClosing(true);
+      closeTimer.current = setTimeout(() => { setClosing(false); closeTimer.current = null; }, CLOSE_MS);
+    }
+  }
   // Post-hydration restore. The server renders only the FAB; Layout.astro's
   // pre-paint script has already reserved the docked column and CSS hides the
   // FAB under html.bp-chat-docked, so this state sync causes no layout jump.
   useEffect(() => {
-    if (!isViewer || typeof window.matchMedia !== "function") return;
+    if (typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia(DOCK_QUERY);
     const apply = () => setDocked(mq.matches);
     apply();
@@ -55,59 +120,56 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
     try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
     if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
     return () => mq.removeEventListener("change", apply);
-  }, [isViewer]);
+  }, []);
-  // Reflect docked-open on <html> (drives the band shift + FAB hiding) and
-  // persist the preference. Only the docked state persists — the phone sheet
-  // always starts closed.
+  // Reflect open state on <html>: bp-chat-docked drives the band shift (and
+  // the /edit toolbar/FAB-column shift), bp-chat-open (any mode) drives the
+  // document FAB's hide/handoff — both animated in base.css. Persist the
+  // preference; only the docked state persists — the phone sheet always
+  // starts closed.
   useEffect(() => {
-    if (!isViewer) return;
     document.documentElement.classList.toggle("bp-chat-docked", open && docked);
+    document.documentElement.classList.toggle("bp-chat-open", open);
     if (docked) {
       try { window.sessionStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch {}
     }
-    return () => document.documentElement.classList.remove("bp-chat-docked");
-  }, [open, docked, isViewer]);
+    return () => {
+      document.documentElement.classList.remove("bp-chat-docked");
+      document.documentElement.classList.remove("bp-chat-open");
+    };
+  }, [open, docked]);
   // Closing the sheet/sidebar returns focus to the launcher.
   useEffect(() => {
-    if (isViewer && !open && everOpened) fabRef.current?.focus();
-  }, [open, everOpened, isViewer]);
-  const showFab = !isViewer || !open;
+    if (!open && everOpened) fabRef.current?.focus();
+  }, [open, everOpened]);
+  // The launcher stays mounted while the chat is open so it can shrink and
+  // fade out (and reverse back in): base.css hides ALL FABs (.viewer-fab and
+  // the /edit .fab-container-right column, this button included) under
+  // html.bp-chat-open/.bp-chat-docked, with visibility dropped after the fade
+  // so no invisible button can take focus or clicks.
   return (
     <>
-      {showFab && (
-        <button
-          ref={fabRef}
-          type="button"
-          aria-label={open ? "Collapse chat" : `Chat with ${botName}`}
-          aria-expanded={open}
-          onClick={() => { setOpen((o) => !o); setEverOpened(true); setUserOpened(true); }}
-          className={cn(
-            "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
-            variant === "editor"
-              ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
-              : "bottom-4 h-12 w-12 viewer-fab bp-chat-fab",
-          )}
-        >
-          {open ? (
-            <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="m6 9 6 6 6-6" />
-            </svg>
-          ) : (
-            <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>
-          )}
-        </button>
-      )}
+      <Fab
+        ref={fabRef}
+        label={`Chat with ${botName}`}
+        column={variant === "editor" ? "editor" : "viewer"}
+        className="bottom-4"
+        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>
+      </Fab>
       {everOpened && (
         <Suspense fallback={null}>
           <ChatPanel
             open={open}
-            onClose={() => setOpen(false)}
+            closing={closing}
+            animateEnter={userOpened}
+            onClose={closePanel}
             siteName={siteName}
             botName={botName}
             thinkingPhrases={thinkingPhrases}
@@ -115,7 +177,7 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
             isEditor={isEditor}
             draftChatbot={draftChatbot}
             variant={variant}
-            mode={isViewer ? (docked ? "docked" : "sheet") : "floating"}
+            mode={docked ? "docked" : "sheet"}
             focusComposer={userOpened}
             audience={audience}
           />

package/src/components/editor/AudienceIndicator.tsx CHANGED Viewed

@@ -4,6 +4,55 @@ import { IndicatorPill } from "./IndicatorPill";
 import { PopoverItem } from "../shared/PopoverItem";
 import type { Audience } from "../../auth/types";
+interface AudienceChecklistProps {
+  access: string[];
+  audiences: Audience[];
+  onToggle: (name: string) => void;
+}
+export function AudienceChecklist({ access, audiences, onToggle }: AudienceChecklistProps) {
+  if (audiences.length === 0) {
+    return (
+      <div className="px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap">
+        No audiences configured. Add audiences in Site Settings → Viewer Access.
+      </div>
+    );
+  }
+  return (
+    <ul role="list" className="w-full overflow-hidden py-1">
+      {audiences.map((a) => {
+        const checked = access.includes(a.name);
+        return (
+          <li key={a.name}>
+            <PopoverItem
+              role="checkbox"
+              aria-checked={checked}
+              onClick={() => onToggle(a.name)}
+            >
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
+                  checked
+                    ? "border-primary bg-primary text-primary-contrast"
+                    : "border-base-300 bg-base",
+                )}
+              >
+                {checked && <Check size={14} strokeWidth={3} />}
+              </span>
+              <span
+                className="h-3 w-3 shrink-0 rounded-full border border-base-200"
+                style={{ backgroundColor: a.color ?? "#9ca3af" }}
+              />
+              <span className="font-medium text-base-contrast whitespace-nowrap">{a.displayName}</span>
+            </PopoverItem>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
 interface AudienceIndicatorProps {
   access: string[];
   audiences: Audience[];
@@ -39,43 +88,7 @@ export function AudienceIndicator({ access, audiences, onChange, disabled }: Aud
       buttonClassName={selected.length === 0 ? "text-base-contrast-light" : undefined}
       disabled={disabled}
       clickContent={
-        audiences.length === 0 ? (
-          <div className="px-3 py-2 text-xs text-base-contrast-light whitespace-nowrap">
-            No audiences configured. Add audiences in Site Settings → Viewer Access.
-          </div>
-        ) : (
-          <ul role="list" className="w-full overflow-hidden py-1">
-            {audiences.map((a) => {
-              const checked = access.includes(a.name);
-              return (
-                <li key={a.name}>
-                  <PopoverItem
-                    role="checkbox"
-                    aria-checked={checked}
-                    onClick={() => toggle(a.name)}
-                  >
-                    <span
-                      aria-hidden="true"
-                      className={cn(
-                        "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
-                        checked
-                          ? "border-primary bg-primary text-primary-contrast"
-                          : "border-base-300 bg-base",
-                      )}
-                    >
-                      {checked && <Check size={14} strokeWidth={3} />}
-                    </span>
-                    <span
-                      className="h-3 w-3 shrink-0 rounded-full border border-base-200"
-                      style={{ backgroundColor: a.color ?? "#9ca3af" }}
-                    />
-                    <span className="font-medium text-base-contrast">{a.displayName}</span>
-                  </PopoverItem>
-                </li>
-              );
-            })}
-          </ul>
-        )
+        <AudienceChecklist access={access} audiences={audiences} onToggle={toggle} />
       }
     />
   );

package/src/components/editor/ChildBlockWrapper.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import { DragHandle } from "./DragHandle";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
 import { ColSpanControl } from "./ColSpanControl";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { cn } from "../../lib/cn";
 export interface ChildBlockWrapperProps {
@@ -70,17 +71,17 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
         >
           <span className="sr-only">{label}</span>
           <div className="pointer-events-auto">
-            <DragHandle ref={dragHandleRef} />
+            <DragHandle ref={dragHandleRef} tooltipSide="right" />
           </div>
           <div className="pointer-events-auto">
             <ColSpanControl colSpan={colSpan} columns={columns} onChange={onColSpanChange} />
           </div>
           {hasSettings && onOpenSettings && (
-            <div className="pointer-events-auto">
+            <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Edit</Kbd> settings</>}>
               <SettingsButton onClick={onOpenSettings} />
-            </div>
+            </Tooltip>
           )}
-          <div className="pointer-events-auto">
+          <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Duplicate</Kbd> block</>}>
             <button
               type="button"
               aria-label="Duplicate block"
@@ -89,10 +90,10 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
             >
               <CopyPlus size={16} />
             </button>
-          </div>
-          <div className="pointer-events-auto">
+          </Tooltip>
+          <Tooltip side="right" className="pointer-events-auto" content={<><Kbd>Delete</Kbd> block</>}>
             <DeleteButton onDelete={onDelete} />
-          </div>
+          </Tooltip>
         </div>
         {/* Drop-edge indicators */}

package/src/components/editor/ColSpanControl.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
 import { Columns3 } from "lucide-react";
 import { Popover } from "../shared/Popover";
 import { PopoverItem } from "../shared/PopoverItem";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { cn } from "../../lib/cn";
 interface ColSpanControlProps {
@@ -21,17 +22,19 @@ export function ColSpanControl({ colSpan, columns, onChange }: ColSpanControlPro
   return (
     <div className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        aria-label="Column span"
-        aria-haspopup="true"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-        className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary"
-      >
-        <Columns3 size={14} />
-      </button>
+      <Tooltip side="right" content={<><Kbd>Set</Kbd> column span</>}>
+        <button
+          ref={buttonRef}
+          type="button"
+          aria-label="Column span"
+          aria-haspopup="true"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary"
+        >
+          <Columns3 size={14} />
+        </button>
+      </Tooltip>
       <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={buttonRef} className="min-w-28">
         <ul role="list" className="py-1">

package/src/components/editor/DragHandle.tsx CHANGED Viewed

@@ -3,9 +3,12 @@ import { DragHandle as DragHandleIcon } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
 import { Tooltip, Kbd } from "../shared/Tooltip";
-export const DragHandle = forwardRef<HTMLButtonElement>(function DragHandle(_, ref) {
+export const DragHandle = forwardRef<HTMLButtonElement, { tooltipSide?: "bottom" | "right" }>(function DragHandle(
+  { tooltipSide },
+  ref,
+) {
   return (
-    <Tooltip content={<><Kbd>Drag</Kbd> to move</>}>
+    <Tooltip side={tooltipSide} content={<><Kbd>Drag</Kbd> to move</>}>
       <IconButton
         ref={ref}
         icon={<DragHandleIcon size={18} />}

package/src/components/editor/PagesModal.tsx CHANGED Viewed

@@ -205,15 +205,15 @@ function PageRow({
   return (
     <div
       ref={rowRef}
-      className={cn("relative rounded-md border border-base-200", isDragging && "opacity-50")}
+      className={cn("relative flex items-start gap-1", isDragging && "opacity-50")}
     >
       <DropEdgeIndicator edge={closestEdge} />
-      <div className="flex items-stretch gap-2 pl-3">
-        {draggable && (
-          <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
-            <DragHandle ref={handleRef} />
-          </div>
-        )}
+      {draggable && (
+        <div className="flex shrink-0 items-center py-2 [&_[role=tooltip]]:hidden">
+          <DragHandle ref={handleRef} />
+        </div>
+      )}
+      <div className={cn("min-w-0 flex-1 rounded-md border border-base-200 bg-base", isDragging && "outline outline-2 outline-primary/50")}>
         <button
           type="button"
           aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}
@@ -238,9 +238,8 @@ function PageRow({
             className={cn("shrink-0 text-base-contrast/50 transition-transform", expanded && "rotate-180")}
           />
         </button>
-      </div>
-      {expanded && (
+        {expanded && (
         <div className="flex flex-col gap-3 border-t border-base-200 px-3 py-3">
           <Input
             label="Title"
@@ -314,7 +313,8 @@ function PageRow({
             </Button>
           </div>
         </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }

package/src/components/editor/SectionWrapper.tsx CHANGED Viewed

@@ -5,6 +5,8 @@ import { DragHandle } from "./DragHandle";
 import { InsertButton } from "./InsertButton";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
 import { StatusIndicator } from "./StatusIndicator";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { LockBadge } from "./LockBadge";
@@ -298,7 +300,10 @@ export function SectionWrapper({
       {/* Status + settings + delete — top-right, above content */}
       <div
         className={cn(
-          "pointer-events-none absolute right-0 bottom-full z-30 mb-1 flex items-center gap-2 transition-opacity",
+          // When a selector inside this cluster is open (Popover renders role="dialog"),
+          // lift the whole cluster above sibling sections' chrome (z-30, hover:z-[60]) and
+          // the inline type picker (z-50) so the open dropdown isn't overlapped.
+          "pointer-events-none absolute right-0 bottom-full z-30 has-[[role=dialog]]:z-[70] mb-1 flex items-center gap-2 transition-opacity",
           // A lock is important state — keep the cluster visible without hover.
           alwaysShow || isLocked ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
@@ -327,32 +332,38 @@ export function SectionWrapper({
         </div>
         {!isLocked && onAddChild && (
-          <button
-            type="button"
-            onClick={onAddChild}
-            aria-label="Add block"
-            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
-          >
-            <Plus size={16} />
-          </button>
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Add</Kbd> a block</>}>
+            <IconButton
+              icon={<Plus size={16} />}
+              label="Add block"
+              onClick={onAddChild}
+              className="pointer-events-auto hover:text-primary"
+            />
+          </Tooltip>
         )}
-        {!isLocked && hasSettings && (
-          <SettingsButton onClick={handleSettingsClick} />
+        {!isLocked && onMoveSection && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Move</Kbd> to page</>}>
+            <IconButton
+              icon={<ArrowRightLeft size={16} />}
+              label="Move to page"
+              onClick={onMoveSection}
+              className="pointer-events-auto hover:text-primary"
+            />
+          </Tooltip>
         )}
-        {!isLocked && onMoveSection && (
-          <button
-            type="button"
-            onClick={onMoveSection}
-            aria-label="Move to page"
-            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
-          >
-            <ArrowRightLeft size={16} />
-          </button>
+        {!isLocked && hasSettings && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Edit</Kbd> settings</>}>
+            <SettingsButton onClick={handleSettingsClick} />
+          </Tooltip>
         )}
-        {!isLocked && onDelete && <DeleteButton onDelete={onDelete} />}
+        {!isLocked && onDelete && (
+          <Tooltip className="pointer-events-auto" content={<><Kbd>Delete</Kbd> section</>}>
+            <DeleteButton onDelete={onDelete} />
+          </Tooltip>
+        )}
       </div>
       {/* Drop indicator — centered in the section's own padding-top */}

package/src/components/editor/StatusIndicator.tsx CHANGED Viewed

@@ -83,6 +83,42 @@ const dotColorClasses: Record<StatusColor, string> = {
 const STATUSES: Status[] = ["draft", "live", "archived"];
+interface StatusRadioListProps {
+  status: Status;
+  onChange: (status: Status) => void;
+  onClose?: () => void;
+  ariaLabel?: string;
+}
+export function StatusRadioList({ status, onChange, onClose, ariaLabel = "Section status" }: StatusRadioListProps) {
+  return (
+    <ul role="radiogroup" aria-label={ariaLabel} className="w-full overflow-hidden py-1">
+      {STATUSES.map((s) => {
+        const checked = s === status;
+        return (
+          <li key={s}>
+            <PopoverItem
+              role="radio"
+              aria-checked={checked}
+              onClick={() => {
+                if (s !== status) onChange(s);
+                onClose?.();
+              }}
+            >
+              <span
+                aria-hidden="true"
+                className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotColorClasses[s])}
+              />
+              <span className="flex-1 font-medium capitalize text-base-contrast">{s}</span>
+              {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
+            </PopoverItem>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
 interface StatusIndicatorProps {
   mainStatus: string | null;
   savedStatus: string;
@@ -122,30 +158,7 @@ export function StatusIndicator({
       buttonClassName="text-base-contrast-light"
       disabled={disabled}
       clickContent={(onClose) => (
-        <ul role="radiogroup" aria-label="Section status" className="w-full overflow-hidden py-1">
-          {STATUSES.map((s) => {
-            const checked = s === status;
-            return (
-              <li key={s}>
-                <PopoverItem
-                  role="radio"
-                  aria-checked={checked}
-                  onClick={() => {
-                    if (s !== status) onChange(s);
-                    onClose();
-                  }}
-                >
-                  <span
-                    aria-hidden="true"
-                    className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotColorClasses[s])}
-                  />
-                  <span className="flex-1 font-medium capitalize text-base-contrast">{s}</span>
-                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
-                </PopoverItem>
-              </li>
-            );
-          })}
-        </ul>
+        <StatusRadioList status={status} onChange={onChange} onClose={onClose} />
       )}
     />
   );