@drawnagency/primitives 0.1.12 → 0.1.14

package/src/components/editor/SectionWrapper.tsx

@@ -4,10 +4,8 @@ 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 { StatusDots } from "./StatusDots";
+import { StatusIndicator } from "./StatusIndicator";
+import { AudienceIndicator } from "./AudienceIndicator";
 import { SettingsForm } from "./SettingsForm";
 import { useEditorContext } from "../shell/EditorContext";
 import { useEditorModal } from "../shell/EditorModalContext";
@@ -218,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>
@@ -279,27 +287,23 @@ export function SectionWrapper({
         )}
       >
         <div className="pointer-events-auto">
-          <StatusDots
+          <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">
-          <AudiencePicker
+          <AudienceIndicator
             access={access}
             audiences={audiences}
             onChange={(newAccess) => onAccessChange?.(newAccess)}
           />
         </div>
-        <div className="pointer-events-auto">
-          <StatusPicker
-            status={status as "draft" | "live" | "archived"}
-            dirty={dirty}
-            onChange={(s) => onStatusChange?.(s)}
-          />
-        </div>
 
         {hasSettings && (
           <SettingsButton onClick={handleSettingsClick} />

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,6 +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";
-export { StatusDots, deriveStatusDots } from "./StatusDots";

package/src/components/sections/register-schemas.ts

@@ -14,6 +14,12 @@ import iconList from "./IconList";
 const allDefs = [linkHeading, subHeading, subSubHeading, prose, mediaGrid,
  splitContent, button, colors, doDontList, doDontImageGrid, iconList,
 ];
-allDefs.forEach((def) => registerSchema(def.type, def.schema));
 
-export const schemaCount = allDefs.length;
+let registered = false;
+
+export function ensureSchemasRegistered(): number {
+  if (registered) return allDefs.length;
+  allDefs.forEach((def) => registerSchema(def.type, def.schema));
+  registered = true;
+  return allDefs.length;
+}

package/src/components/sections/register.ts

@@ -14,6 +14,12 @@ import iconList from "./IconList";
 const allDefs = [linkHeading, subHeading, subSubHeading, prose, mediaGrid,
  splitContent, button, colors, doDontList, doDontImageGrid, iconList,
 ];
-allDefs.forEach(registerSection);
 
-export const sectionCount = allDefs.length;
+let registered = false;
+
+export function ensureSectionsRegistered(): number {
+  if (registered) return allDefs.length;
+  allDefs.forEach(registerSection);
+  registered = true;
+  return allDefs.length;
+}

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/SplitButton.tsx

@@ -69,7 +69,7 @@ export function SplitButton({
           >
             <ChevronDown size={14} />
           </button>
-          <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={chevronRef} align="end" className="w-44">
+          <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={chevronRef} className="w-full">
             <ul role="menu" className="py-1">
               {options.map((option) => (
                 <li key={option.label}>
@@ -84,7 +84,7 @@ export function SplitButton({
                     }}
                     className={cn(option.disabled && "opacity-50 cursor-not-allowed")}
                   >
-                    <span className="text-sm font-medium text-base-contrast">{option.label}</span>
+                    <span className="font-medium text-base-contrast">{option.label}</span>
                   </PopoverItem>
                 </li>
               ))}

package/src/components/shell/BuildStatusIndicator.tsx

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn";
+import { X } from "lucide-react";
+
+interface BuildStatusIndicatorProps {
+  state: "idle" | "building" | "ready" | "error";
+  deployUrl: string | null;
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+const stateConfig = {
+  building: {
+    label: "Deploying...",
+    className: "border-orange-500 text-orange-600 hover:bg-orange-50",
+    dotClassName: "bg-orange-500 animate-pulse",
+  },
+  ready: {
+    label: "Live",
+    className: "border-green-600 text-green-600 hover:bg-green-50",
+    dotClassName: "bg-green-600",
+  },
+  error: {
+    label: "Deploy failed",
+    className: "border-red-600 text-red-600 hover:bg-red-50",
+    dotClassName: "bg-red-600",
+  },
+} as const;
+
+export function BuildStatusIndicator({
+  state,
+  deployUrl,
+  visible,
+  onDismiss,
+}: BuildStatusIndicatorProps) {
+  if (!visible || state === "idle") return null;
+
+  const config = stateConfig[state];
+
+  return (
+    <span className="inline-flex items-center gap-0">
+      <a
+        href={deployUrl ?? "#"}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={config.label}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-l px-3 py-1.5 text-xs font-medium border transition-colors",
+          config.className,
+        )}
+      >
+        <span className={cn("h-1.5 w-1.5 rounded-full", config.dotClassName)} />
+        {config.label}
+      </a>
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label="Dismiss build status"
+        className={cn(
+          "inline-flex items-center rounded-r border border-l-0 px-1.5 py-1.5 transition-colors cursor-pointer",
+          config.className,
+        )}
+      >
+        <X size={12} />
+      </button>
+    </span>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -36,6 +36,8 @@ import {
 import { useEditorPersistence } from "../../hooks/useEditorPersistence";
 import { useEditorPublish } from "../../hooks/useEditorPublish";
 import { useContentLifecycle } from "../../hooks/useContentLifecycle";
+import { useBuildStatus } from "../../hooks/useBuildStatus";
+import { BuildStatusIndicator } from "./BuildStatusIndicator";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
 import { generateNavLinks } from "../../lib/nav";
@@ -123,6 +125,8 @@ export default function EditorShell({
     markSectionDirty: persistence.markSectionDirty,
   });
 
+  const buildStatus = useBuildStatus();
+
   const { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
@@ -159,6 +163,7 @@ export default function EditorShell({
       setSavedSha(newSavedSha);
       setMainSha((prev) => newMainSha ?? prev);
     },
+    onPublishComplete: buildStatus.startTracking,
   });
 
   const { buttonState } = useContentLifecycle({
@@ -581,6 +586,10 @@ export default function EditorShell({
               setShowMediaLibrary(true);
             }}
             processingItems={mediaPipeline.processingItems}
+            buildState={buildStatus.state}
+            buildDeployUrl={buildStatus.deployUrl}
+            buildVisible={buildStatus.visible}
+            onBuildDismiss={buildStatus.dismiss}
           />
 
           <EditorContent
@@ -879,6 +888,10 @@ function EditorToolbar({
   onSettingsClick,
   onMediaClick,
   processingItems,
+  buildState,
+  buildDeployUrl,
+  buildVisible,
+  onBuildDismiss,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -891,6 +904,10 @@ function EditorToolbar({
   onSettingsClick: () => void;
   onMediaClick: () => void;
   processingItems: QueueItem[];
+  buildState: "idle" | "building" | "ready" | "error";
+  buildDeployUrl: string | null;
+  buildVisible: boolean;
+  onBuildDismiss: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
@@ -945,6 +962,12 @@ function EditorToolbar({
                 Discard Changes
               </Button>
             )}
+            <BuildStatusIndicator
+              state={buildState}
+              deployUrl={buildDeployUrl}
+              visible={buildVisible}
+              onDismiss={onBuildDismiss}
+            />
           </div>
           <div className="flex items-center gap-2">
             <ProcessingIndicator items={processingItems} />

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useActiveHeadings } from "./useActiveHeadings";
+export { useBuildStatus } from "./useBuildStatus";
 export { useContentLifecycle } from "./useContentLifecycle";
 export { useEditorPersistence } from "./useEditorPersistence";
 export { useEditorPublish } from "./useEditorPublish";

package/src/hooks/useBuildStatus.ts

@@ -0,0 +1,139 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+
+type BuildState = "idle" | "building" | "ready" | "error";
+
+interface BuildStatusResponse {
+  state: "building" | "ready" | "error";
+  deployUrl: string;
+  commitSha: string | null;
+  updatedAt: string;
+}
+
+interface BuildStatusResult {
+  state: BuildState;
+  deployUrl: string | null;
+  visible: boolean;
+  dismiss: () => void;
+  startTracking: () => void;
+}
+
+const POLL_INTERVAL = 5000;
+const AUTO_DISMISS_DELAY = 10000;
+
+export function useBuildStatus(): BuildStatusResult {
+  const [state, setState] = useState<BuildState>("idle");
+  const [deployUrl, setDeployUrl] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const dismissRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isPolling = useRef(false);
+
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    isPolling.current = false;
+  }, []);
+
+  const fetchStatus = useCallback(async (): Promise<BuildStatusResponse | null> => {
+    try {
+      const res = await fetch("/api/build-status");
+      if (!res.ok) return null;
+      const data = await res.json();
+      const validStates = ["building", "ready", "error"];
+      if (!data || !validStates.includes(data.state)) return null;
+      return data as BuildStatusResponse;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const handleStatusUpdate = useCallback(
+    (data: BuildStatusResponse | null, isInitialLoad: boolean) => {
+      if (!data) {
+        if (isInitialLoad) {
+          setState("idle");
+        }
+        return;
+      }
+
+      if (isInitialLoad && data.state === "ready") {
+        setState("idle");
+        return;
+      }
+
+      setState(data.state);
+      setDeployUrl(data.deployUrl);
+      setDismissed(false);
+
+      if (data.state === "ready" || data.state === "error") {
+        stopPolling();
+
+        if (data.state === "ready") {
+          dismissRef.current = setTimeout(() => {
+            setDismissed(true);
+          }, AUTO_DISMISS_DELAY);
+        }
+      }
+    },
+    [stopPolling],
+  );
+
+  const startPolling = useCallback(() => {
+    if (isPolling.current) return;
+    isPolling.current = true;
+
+    pollRef.current = setInterval(async () => {
+      const data = await fetchStatus();
+      handleStatusUpdate(data, false);
+    }, POLL_INTERVAL);
+  }, [fetchStatus, handleStatusUpdate]);
+
+  // Initial fetch on mount
+  useEffect(() => {
+    let cancelled = false;
+
+    async function check() {
+      const data = await fetchStatus();
+      if (cancelled) return;
+      handleStatusUpdate(data, true);
+
+      if (data && data.state === "building") {
+        startPolling();
+      }
+    }
+
+    check();
+
+    return () => {
+      cancelled = true;
+      stopPolling();
+      if (dismissRef.current) clearTimeout(dismissRef.current);
+    };
+  }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
+
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    stopPolling();
+    if (dismissRef.current) {
+      clearTimeout(dismissRef.current);
+      dismissRef.current = null;
+    }
+  }, [stopPolling]);
+
+  const startTracking = useCallback(() => {
+    setState("building");
+    setDeployUrl(null);
+    setDismissed(false);
+    if (dismissRef.current) {
+      clearTimeout(dismissRef.current);
+      dismissRef.current = null;
+    }
+    startPolling();
+  }, [startPolling]);
+
+  const visible = state !== "idle" && !dismissed;
+
+  return { state, deployUrl, visible, dismiss, startTracking };
+}

package/src/hooks/useEditorPublish.ts

@@ -31,6 +31,7 @@ interface PublishDeps {
   pendingMediaDeletions: string[];
   onMediaPublished: (publishedItems: MediaItem[], publishedDeletions: string[]) => void;
   onShasUpdated: (savedSha: string | null, mainSha: string | null) => void;
+  onPublishComplete?: () => void;
 }
 
 interface GatheredMedia {
@@ -55,6 +56,7 @@ export function useEditorPublish({
   pendingMediaDeletions,
   onMediaPublished,
   onShasUpdated,
+  onPublishComplete,
 }: PublishDeps) {
   const [isPublishing, setIsPublishing] = useState(false);
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
@@ -237,13 +239,14 @@ export function useEditorPublish({
 
       onShasUpdated(null, sha);
       showFeedback("Published", 3000);
+      onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
       showFeedback("Publish failed", 5000);
     } finally {
       setIsPublishing(false);
     }
-  }, [onShasUpdated, showFeedback]);
+  }, [onShasUpdated, showFeedback, onPublishComplete]);
 
   const handleSaveAndPublish = useCallback(async () => {
     if (!siteConfig) return;
@@ -339,13 +342,14 @@ export function useEditorPublish({
 
       onShasUpdated(null, sha);
       showFeedback("Published", 3000);
+      onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
       showFeedback("Publish failed", 5000);
     } finally {
       setIsPublishing(false);
     }
-  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete]);
 
   return { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish };
 }