@drawnagency/primitives 0.1.11 → 0.1.13

package/src/components/editor/{AudiencePicker.tsx → AudienceIndicator.tsx}

@@ -1,22 +1,18 @@
-import { useRef, useState } from "react";
 import { Check } from "lucide-react";
 import { cn } from "../../lib/cn";
-import { Popover } from "../shared/Popover";
+import { IndicatorPill } from "./IndicatorPill";
 import { PopoverItem } from "../shared/PopoverItem";
 import type { Audience } from "../../auth/types";
 
-interface Props {
+interface AudienceIndicatorProps {
   access: string[];
   audiences: Audience[];
   onChange: (access: string[]) => void;
 }
 
-export function AudiencePicker({ access, audiences, onChange }: Props) {
-  const [open, setOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
+export function AudienceIndicator({ access, audiences, onChange }: AudienceIndicatorProps) {
   const selected = audiences.filter((a) => access.includes(a.name));
-  const visibleCircles = selected.slice(0, 3);
+  const visibleDots = selected.slice(0, 3);
 
   function toggle(name: string) {
     const next = access.includes(name)
@@ -25,47 +21,27 @@ export function AudiencePicker({ access, audiences, onChange }: Props) {
     onChange(next);
   }
 
-  return (
-    <div className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className={cn(
-          "cursor-pointer inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
-          "border border-base-200 hover:bg-base-accent",
-          selected.length === 0 && "text-base-contrast-light",
-        )}
-      >
-        {selected.length === 0 && <span>No audience</span>}
-        {selected.length >= 1 && (
-          <span className="flex -space-x-1.5">
-            {visibleCircles.map((a) => (
-              <span
-                key={a.name}
-                className="h-3 w-3 rounded-full border border-base"
-                style={{ backgroundColor: a.color ?? "#9ca3af" }}
-              />
-            ))}
-          </span>
-        )}
-        {selected.length === 1 && <span>{selected[0].displayName}</span>}
-        {selected.length >= 2 && <span>{selected.length} audiences</span>}
-      </button>
+  const pillDots = visibleDots.map((a) => ({
+    color: a.color ?? "#9ca3af",
+  }));
 
-      <Popover
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        anchorRef={buttonRef}
-        align="end"
-        className="w-56"
-      >
-        {audiences.length === 0 ? (
-          <div className="px-3 py-2 text-xs text-base-contrast-light">
+  let labelText: string;
+  if (selected.length === 0) labelText = "No audience";
+  else if (selected.length === 1) labelText = selected[0].displayName;
+  else labelText = `${selected.length} audiences`;
+
+  return (
+    <IndicatorPill
+      dots={pillDots}
+      label={labelText}
+      buttonClassName={selected.length === 0 ? "text-base-contrast-light" : undefined}
+      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="py-1">
+          <ul role="list" className="w-full overflow-hidden py-1">
             {audiences.map((a) => {
               const checked = access.includes(a.name);
               return (
@@ -90,14 +66,14 @@ export function AudiencePicker({ access, audiences, onChange }: Props) {
                       className="h-3 w-3 shrink-0 rounded-full border border-base-200"
                       style={{ backgroundColor: a.color ?? "#9ca3af" }}
                     />
-                    <span className="text-sm font-medium text-base-contrast">{a.displayName}</span>
+                    <span className="font-medium text-base-contrast">{a.displayName}</span>
                   </PopoverItem>
                 </li>
               );
             })}
           </ul>
-        )}
-      </Popover>
-    </div>
+        )
+      }
+    />
   );
 }

package/src/components/editor/IndicatorPill.tsx

@@ -0,0 +1,119 @@
+import { useRef, useState, useCallback, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+
+interface DotDef {
+  color?: string;
+  className?: string;
+}
+
+interface IndicatorPillProps {
+  dots: DotDef[];
+  label: string;
+  /** Shown on hover above the pill. Currently unused — kept for planned tooltip feature. */
+  hoverContent?: ReactNode;
+  clickContent?: ReactNode | ((onClose: () => void) => ReactNode);
+  className?: string;
+  buttonClassName?: string;
+  ariaLabel?: string;
+}
+
+export function IndicatorPill({
+  dots,
+  label,
+  hoverContent,
+  clickContent,
+  className,
+  buttonClassName,
+  ariaLabel,
+}: IndicatorPillProps) {
+  const [hoverOpen, setHoverOpen] = useState(false);
+  const [clickOpen, setClickOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const hoverTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearHoverTimeout = useCallback(() => {
+    if (hoverTimeout.current) {
+      clearTimeout(hoverTimeout.current);
+      hoverTimeout.current = null;
+    }
+  }, []);
+
+  function handleMouseEnter() {
+    clearHoverTimeout();
+    if (!clickOpen && hoverContent) {
+      setHoverOpen(true);
+    }
+  }
+
+  function handleMouseLeave() {
+    clearHoverTimeout();
+    hoverTimeout.current = setTimeout(() => {
+      setHoverOpen(false);
+    }, 150);
+  }
+
+  function handleClick() {
+    if (!clickContent) return;
+    setHoverOpen(false);
+    clearHoverTimeout();
+    setClickOpen((v) => !v);
+  }
+
+  function handleClickClose() {
+    setClickOpen(false);
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        aria-haspopup={clickContent ? "true" : undefined}
+        aria-expanded={clickContent ? clickOpen : undefined}
+        aria-label={ariaLabel}
+        className={cn(
+          "cursor-pointer inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
+          "border border-base-200 hover:bg-base-accent",
+          buttonClassName,
+        )}
+      >
+        {dots.length > 0 && (
+          <span className="flex -space-x-1">
+            {dots.map((dot, i) => (
+              <span
+                key={i}
+                aria-hidden="true"
+                className={cn("h-3 w-3 rounded-full border border-base", dot.className)}
+                style={dot.color ? { backgroundColor: dot.color } : undefined}
+              />
+            ))}
+          </span>
+        )}
+        <span>{label}</span>
+      </button>
+
+      {/* Hover tooltip — above the button */}
+      {hoverOpen && hoverContent && (
+        <div
+          className="absolute bottom-full right-0 z-50 mb-1 rounded-full bg-base-accent px-3 py-1 text-xs text-base-contrast-light whitespace-nowrap"
+        >
+          {hoverContent}
+        </div>
+      )}
+
+      {/* Click dropdown — below the button */}
+      <Popover
+        isOpen={clickOpen}
+        onClose={handleClickClose}
+        anchorRef={buttonRef}
+        className="min-w-full max-w-xs"
+      >
+        {typeof clickContent === "function" ? clickContent(handleClickClose) : clickContent}
+      </Popover>
+    </div>
+  );
+}

package/src/components/editor/SectionWrapper.tsx

@@ -4,14 +4,14 @@ import { DragHandle } from "./DragHandle";
 import { InsertButton } from "./InsertButton";
 import { DeleteButton } from "./DeleteButton";
 import { SettingsButton } from "./SettingsButton";
-import { StatusBadge } from "./StatusBadge";
-import { StatusPicker } from "./StatusPicker";
-import { AudiencePicker } from "./AudiencePicker";
+import { StatusIndicator } from "./StatusIndicator";
+import { AudienceIndicator } from "./AudienceIndicator";
 import { SettingsForm } from "./SettingsForm";
 import { useEditorContext } from "../shell/EditorContext";
 import { useEditorModal } from "../shell/EditorModalContext";
 import type { WrapperProps } from "../../lib/registry";
 import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
 
 export function SectionWrapper({
   sectionId,
@@ -30,6 +30,11 @@ export function SectionWrapper({
   onReorder,
   onRequestInsert,
   onDelete,
+  isDeleted,
+  onUndoDelete,
+  mainStatus,
+  contentDiffersFromMain,
+  isLocalOnly,
   children,
 }: WrapperProps) {
   const { isEditMode, showAllChrome } = useEditorContext();
@@ -175,8 +180,35 @@ export function SectionWrapper({
     }
   }
 
+  if (isDeleted && isEditMode) {
+    return (
+      <div
+        ref={blockRef}
+        className="relative opacity-30 pointer-events-none"
+        data-section-id={sectionId}
+        data-section-type={sectionType}
+      >
+        <div className="pointer-events-auto absolute right-0 bottom-full z-30 mb-1">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onUndoDelete}
+            className="pointer-events-auto"
+          >
+            Undo delete
+          </Button>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  if (isDeleted) {
+    return null;
+  }
+
   if (!isEditMode) {
-    if (status && status !== "published") {
+    if (status && status !== "live") {
       return (
         <div
           className="relative"
@@ -184,7 +216,17 @@ export function SectionWrapper({
           data-section-type={sectionType}
         >
           <div className="pointer-events-none absolute right-0 bottom-full z-30 mb-1">
-            <StatusBadge status={status} dirty={dirty} />
+            <span
+              className={cn(
+                "rounded-full px-2 py-0.5 text-xs font-medium",
+                status === "live" ? "bg-status-live-bg text-status-live-text"
+                  : status === "draft" ? "bg-status-draft-bg text-status-draft-text"
+                  : "bg-status-archived-bg text-status-archived-text",
+              )}
+            >
+              {status}
+              {dirty && <span className="ml-1 opacity-70">· Unsaved</span>}
+            </span>
           </div>
           {children}
         </div>
@@ -245,17 +287,21 @@ export function SectionWrapper({
         )}
       >
         <div className="pointer-events-auto">
-          <AudiencePicker
-            access={access}
-            audiences={audiences}
-            onChange={(newAccess) => onAccessChange?.(newAccess)}
+          <StatusIndicator
+            mainStatus={mainStatus ?? null}
+            savedStatus={status as string}
+            contentDiffers={contentDiffersFromMain ?? false}
+            isLocalOnly={isLocalOnly ?? false}
+            status={status as "draft" | "live" | "archived"}
+            dirty={dirty}
+            onChange={(s) => onStatusChange?.(s)}
           />
         </div>
         <div className="pointer-events-auto">
-          <StatusPicker
-            status={status as "draft" | "published" | "archived"}
-            dirty={dirty}
-            onChange={(s) => onStatusChange?.(s)}
+          <AudienceIndicator
+            access={access}
+            audiences={audiences}
+            onChange={(newAccess) => onAccessChange?.(newAccess)}
           />
         </div>
 

package/src/components/editor/StatusIndicator.tsx

@@ -0,0 +1,148 @@
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { IndicatorPill } from "./IndicatorPill";
+import { PopoverItem } from "../shared/PopoverItem";
+
+type StatusColor = "draft" | "live" | "archived" | "modified";
+type Status = "draft" | "live" | "archived";
+
+interface DotDef {
+  color: StatusColor;
+}
+
+interface DeriveInput {
+  mainStatus: string | null;
+  savedStatus: string;
+  contentDiffers: boolean;
+  isLocalOnly: boolean;
+}
+
+interface DeriveResult {
+  dots: DotDef[];
+  unsaved: boolean;
+  description: string;
+}
+
+const descriptions: Record<string, string> = {
+  "live": "Live — synced",
+  "live,modified": "Live — unpublished content edits",
+  "live,draft": "Live on site, changed to draft",
+  "live,archived": "Live on site, will be hidden on publish",
+  "draft": "Draft — editor only",
+  "draft,modified": "Draft — unpublished content edits",
+  "draft,live": "Draft, will become live on publish",
+  "archived": "Archived",
+  "archived,modified": "Archived — unpublished content edits",
+  "archived,live": "Archived, will become live on publish",
+  "modified": "Unpublished content edits",
+};
+
+export function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, isLocalOnly }: DeriveInput): DeriveResult {
+  const unsaved = isLocalOnly;
+
+  if (!mainStatus) {
+    return {
+      dots: [{ color: savedStatus as StatusColor }],
+      unsaved,
+      description: `${savedStatus} — new section`,
+    };
+  }
+
+  if (mainStatus !== savedStatus) {
+    const key = `${mainStatus},${savedStatus}`;
+    return {
+      dots: [{ color: mainStatus as StatusColor }, { color: savedStatus as StatusColor }],
+      unsaved,
+      description: descriptions[key] ?? `${mainStatus} → ${savedStatus}`,
+    };
+  }
+
+  if (contentDiffers) {
+    const key = `${mainStatus},modified`;
+    return {
+      dots: [{ color: mainStatus as StatusColor }, { color: "modified" }],
+      unsaved,
+      description: descriptions[key] ?? `${mainStatus} — with edits`,
+    };
+  }
+
+  return {
+    dots: [{ color: mainStatus as StatusColor }],
+    unsaved: false,
+    description: descriptions[mainStatus] ?? mainStatus,
+  };
+}
+
+const dotColorClasses: Record<StatusColor, string> = {
+  live: "bg-green-500",
+  draft: "bg-gray-400",
+  archived: "bg-white border-gray-300",
+  modified: "bg-orange-400",
+};
+
+
+const STATUSES: Status[] = ["draft", "live", "archived"];
+
+interface StatusIndicatorProps {
+  mainStatus: string | null;
+  savedStatus: string;
+  contentDiffers: boolean;
+  isLocalOnly: boolean;
+  status: Status;
+  dirty?: boolean;
+  onChange: (status: Status) => void;
+}
+
+export function StatusIndicator({
+  mainStatus,
+  savedStatus,
+  contentDiffers,
+  isLocalOnly,
+  status,
+  dirty,
+  onChange,
+}: StatusIndicatorProps) {
+  const display = deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, isLocalOnly });
+
+  const pillDots = display.dots.map((d) => ({
+    className: dotColorClasses[d.color],
+  }));
+
+  const unsavedFromDirtyOrLocal = dirty || display.unsaved;
+  const labelText = `${status.charAt(0).toUpperCase() + status.slice(1)}${unsavedFromDirtyOrLocal ? " (Unsaved)" : ""}`;
+
+  return (
+    <IndicatorPill
+      dots={pillDots}
+      label={labelText}
+      ariaLabel={display.description}
+      buttonClassName="text-base-contrast-light"
+      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>
+      )}
+    />
+  );
+}

package/src/components/editor/index.ts

@@ -3,5 +3,7 @@ export { InsertButton } from "./InsertButton";
 export { DeleteButton } from "./DeleteButton";
 export { SettingsButton } from "./SettingsButton";
 export { SettingsForm } from "./SettingsForm";
-export { StatusBadge } from "./StatusBadge";
+export { IndicatorPill } from "./IndicatorPill";
+export { StatusIndicator, deriveStatusDisplay } from "./StatusIndicator";
+export { AudienceIndicator } from "./AudienceIndicator";
 export { SectionWrapper } from "./SectionWrapper";

package/src/components/sections/SectionLayout.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export function SectionLayout({ type, status, dimNonPublished, children }: Props) {
-  const isDimmed = dimNonPublished && status && status !== "published";
+  const isDimmed = dimNonPublished && status && status !== "live";
 
   return (
     <div className={cn("section-wrapper group", getSectionCategory(type), isDimmed && "opacity-50")}>

package/src/components/shared/Navigation.tsx

@@ -121,7 +121,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                   className={cn(
                     "cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
                     isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary",
-                    !isEditMode && parent.status && parent.status !== "published" && "opacity-50",
+                    !isEditMode && parent.status && parent.status !== "live" && "opacity-50",
                   )}
                 >
                   {parent.label}
@@ -140,7 +140,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                             className={cn(
                               "cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
                               isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                              !isEditMode && child.status && child.status !== "published" && "opacity-50",
+                              !isEditMode && child.status && child.status !== "live" && "opacity-50",
                             )}
                           >
                             {child.label}
@@ -157,7 +157,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
                                       className={cn(
                                         "cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
                                         activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                                        !isEditMode && gc.status && gc.status !== "published" && "opacity-50",
+                                        !isEditMode && gc.status && gc.status !== "live" && "opacity-50",
                                       )}
                                     >
                                       {gc.label}

package/src/components/shared/Popover.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode, type RefObject } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { cn } from "../../lib/cn";
 
@@ -7,7 +7,7 @@ interface PopoverProps {
   onClose: () => void;
   anchorRef: RefObject<HTMLElement | null>;
   children: ReactNode;
-  align?: "start" | "end";
+  align?: "start" | "end" | "auto";
   className?: string;
 }
 
@@ -16,13 +16,33 @@ export function Popover({
   onClose,
   anchorRef,
   children,
-  align = "start",
+  align = "auto",
   className,
 }: PopoverProps) {
   const panelRef = useRef<HTMLDivElement>(null);
+  const [resolvedAlign, setResolvedAlign] = useState<"start" | "end">("start");
 
   useFocusTrap(panelRef, isOpen);
 
+  useLayoutEffect(() => {
+    if (!isOpen || align !== "auto") {
+      if (!isOpen) setResolvedAlign("start");
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.left = "0";
+    panel.style.right = "auto";
+    const rect = panel.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      setResolvedAlign("end");
+    } else {
+      setResolvedAlign("start");
+    }
+    panel.style.left = "";
+    panel.style.right = "";
+  }, [isOpen, align]);
+
   useEffect(() => {
     if (!isOpen) return;
     function onKeyDown(e: KeyboardEvent) {
@@ -44,6 +64,8 @@ export function Popover({
 
   if (!isOpen) return null;
 
+  const effectiveAlign = align === "auto" ? resolvedAlign : align;
+
   return (
     <div
       ref={panelRef}
@@ -51,7 +73,7 @@ export function Popover({
       aria-modal="false"
       className={cn(
         "absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg",
-        align === "end" ? "right-0" : "left-0",
+        effectiveAlign === "end" ? "right-0" : "left-0",
         className,
       )}
     >

package/src/components/shared/PopoverItem.tsx

@@ -12,7 +12,7 @@ export const PopoverItem = forwardRef<HTMLButtonElement, PopoverItemProps>(
         ref={ref}
         type="button"
         className={cn(
-          "flex w-full cursor-pointer items-center gap-3 px-3 py-1.5 text-left hover:bg-base-accent",
+          "flex w-full cursor-pointer items-center gap-3 px-3 py-1.5 text-left text-xs hover:bg-base-accent",
           className,
         )}
         {...rest}

package/src/components/shared/SegmentedControl.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/cn";
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+}
+
+interface SegmentedControlProps {
+  options: SegmentedOption[];
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps) {
+  return (
+    <div role="radiogroup" className={cn("inline-flex rounded border border-base-200 bg-base-accent", className)}>
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={option.label}
+            onClick={() => {
+              if (!selected) onChange(option.value);
+            }}
+            className={cn(
+              "cursor-pointer px-3 py-1 text-xs font-medium transition-colors first:rounded-l last:rounded-r",
+              selected
+                ? "bg-base-contrast text-base-accent"
+                : "text-base-contrast-light hover:text-base-contrast",
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}