@drawnagency/primitives 0.1.10 → 0.1.12

package/src/components/editor/StatusDots.tsx

@@ -0,0 +1,131 @@
+import { useRef, useState } from "react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+
+type StatusColor = "draft" | "live" | "archived" | "modified";
+
+interface DotDef {
+  color: StatusColor;
+}
+
+interface DeriveInput {
+  mainStatus: string | null;
+  savedStatus: string;
+  contentDiffers: boolean;
+  isLocalOnly: boolean;
+}
+
+interface DeriveResult {
+  dots: DotDef[];
+  label: "unsaved" | null;
+  description: string;
+}
+
+const dotColorClasses: Record<StatusColor, string> = {
+  live: "bg-green-500",
+  draft: "bg-gray-400",
+  archived: "bg-white border-gray-300",
+  modified: "bg-orange-400",
+};
+
+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,live": "Draft, will become live on publish",
+  "archived": "Archived",
+  "archived,live": "Archived, will become live on publish",
+  "modified": "Unpublished content edits",
+};
+
+export function deriveStatusDots({ mainStatus, savedStatus, contentDiffers, isLocalOnly }: DeriveInput): DeriveResult {
+  const label: "unsaved" | null = isLocalOnly ? "unsaved" : null;
+
+  // New section — no main status
+  if (!mainStatus) {
+    return {
+      dots: [{ color: savedStatus as StatusColor }],
+      label,
+      description: `${savedStatus} — new section`,
+    };
+  }
+
+  // Status changed between main and saved
+  if (mainStatus !== savedStatus) {
+    const key = `${mainStatus},${savedStatus}`;
+    return {
+      dots: [{ color: mainStatus as StatusColor }, { color: savedStatus as StatusColor }],
+      label,
+      description: descriptions[key] ?? `${mainStatus} → ${savedStatus}`,
+    };
+  }
+
+  // Same status — check content differences
+  if (contentDiffers) {
+    // Only show orange (modified) dot for live sections
+    if (mainStatus === "live") {
+      return {
+        dots: [{ color: "live" }, { color: "modified" }],
+        label,
+        description: descriptions["live,modified"]!,
+      };
+    }
+    // Draft/archived with content changes — no second dot
+    return {
+      dots: [{ color: mainStatus as StatusColor }],
+      label,
+      description: `${mainStatus} — with edits`,
+    };
+  }
+
+  // Fully synced
+  return {
+    dots: [{ color: mainStatus as StatusColor }],
+    label: null,
+    description: descriptions[mainStatus] ?? mainStatus,
+  };
+}
+
+interface StatusDotsProps {
+  mainStatus: string | null;
+  savedStatus: string;
+  contentDiffers: boolean;
+  isLocalOnly: boolean;
+}
+
+export function StatusDots(props: StatusDotsProps) {
+  const { dots, label, description } = deriveStatusDots(props);
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="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"
+        aria-label={description}
+      >
+        <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", dotColorClasses[dot.color])}
+            />
+          ))}
+        </span>
+        {label && <span className="opacity-70">(unsaved)</span>}
+      </button>
+
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={buttonRef} align="end" className="w-56">
+        <div className="px-3 py-2 text-xs text-base-contrast">
+          {description}
+        </div>
+      </Popover>
+    </div>
+  );
+}

package/src/components/editor/StatusPicker.tsx

@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn";
 import { Popover } from "../shared/Popover";
 import { PopoverItem } from "../shared/PopoverItem";
 
-type Status = "draft" | "published" | "archived";
+type Status = "draft" | "live" | "archived";
 
 interface Props {
   status: Status;
@@ -12,18 +12,18 @@ interface Props {
   onChange: (status: Status) => void;
 }
 
-const STATUSES: Status[] = ["draft", "published", "archived"];
+const STATUSES: Status[] = ["draft", "live", "archived"];
 
 const statusClasses: Record<Status, string> = {
-  published: "bg-status-published-bg text-status-published-text",
+  live: "bg-status-live-bg text-status-live-text",
   draft: "bg-status-draft-bg text-status-draft-text",
   archived: "bg-status-archived-bg text-status-archived-text",
 };
 
 const dotClasses: Record<Status, string> = {
-  published: "bg-status-published-bg",
-  draft: "bg-status-draft-bg",
-  archived: "bg-status-archived-bg",
+  live: "bg-green-500",
+  draft: "bg-gray-400",
+  archived: "bg-white",
 };
 
 export function StatusPicker({ status, dirty, onChange }: Props) {

package/src/components/editor/index.ts

@@ -5,3 +5,4 @@ export { SettingsButton } from "./SettingsButton";
 export { SettingsForm } from "./SettingsForm";
 export { StatusBadge } from "./StatusBadge";
 export { SectionWrapper } from "./SectionWrapper";
+export { StatusDots, deriveStatusDots } from "./StatusDots";

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

package/src/components/shared/SplitButton.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "./Popover";
+import { PopoverItem } from "./PopoverItem";
+
+export interface SplitButtonOption {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+interface SplitButtonProps {
+  label: string;
+  onClick: () => void;
+  options: SplitButtonOption[];
+  disabled?: boolean;
+  isLoading?: boolean;
+  loadingLabel?: string;
+  className?: string;
+}
+
+export function SplitButton({
+  label,
+  onClick,
+  options,
+  disabled = false,
+  isLoading = false,
+  loadingLabel,
+  className,
+}: SplitButtonProps) {
+  const [open, setOpen] = useState(false);
+  const chevronRef = useRef<HTMLButtonElement>(null);
+  const resolvedDisabled = disabled || isLoading;
+  const displayLabel = isLoading && loadingLabel ? loadingLabel : label;
+  const hasOptions = options.length > 0 && !resolvedDisabled;
+
+  return (
+    <div className={cn("relative inline-flex", className)}>
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={resolvedDisabled}
+        className={cn(
+          "inline-flex items-center px-4 py-1.5 text-xs font-medium transition-colors",
+          "bg-base-contrast text-base-accent",
+          hasOptions ? "rounded-l" : "rounded",
+          resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
+        )}
+        aria-label={displayLabel}
+      >
+        {displayLabel}
+      </button>
+      {hasOptions && (
+        <>
+          <button
+            ref={chevronRef}
+            type="button"
+            onClick={() => setOpen((v) => !v)}
+            disabled={resolvedDisabled}
+            className={cn(
+              "inline-flex items-center border-l border-base-accent/20 px-2 py-1.5 transition-colors",
+              "bg-base-contrast text-base-accent rounded-r",
+              resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
+            )}
+            aria-label="More actions"
+            aria-haspopup="true"
+            aria-expanded={open}
+          >
+            <ChevronDown size={14} />
+          </button>
+          <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={chevronRef} align="end" className="w-44">
+            <ul role="menu" className="py-1">
+              {options.map((option) => (
+                <li key={option.label}>
+                  <PopoverItem
+                    role="menuitem"
+                    aria-disabled={option.disabled}
+                    onClick={() => {
+                      if (!option.disabled) {
+                        option.onClick();
+                        setOpen(false);
+                      }
+                    }}
+                    className={cn(option.disabled && "opacity-50 cursor-not-allowed")}
+                  >
+                    <span className="text-sm font-medium text-base-contrast">{option.label}</span>
+                  </PopoverItem>
+                </li>
+              ))}
+            </ul>
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/shell/EditorContext.tsx

@@ -4,8 +4,10 @@ import { editModeEvent } from "../../lib/events";
 interface EditorContextValue {
   isEditMode: boolean;
   showAllChrome: boolean;
+  viewBranch: "saved" | "live";
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
+  setViewBranch: (branch: "saved" | "live") => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -17,6 +19,7 @@ interface EditorProviderProps {
 export function EditorProvider({ children }: EditorProviderProps) {
   const [isEditMode, setIsEditMode] = useState(true);
   const [showAllChrome, setShowAllChrome] = useState(false);
+  const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
 
   const toggleEditMode = useCallback(() => {
     setIsEditMode((prev) => {
@@ -27,9 +30,10 @@ export function EditorProvider({ children }: EditorProviderProps) {
   }, []);
 
   const toggleShowAllChrome = useCallback(() => setShowAllChrome((prev) => !prev), []);
+  const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, toggleEditMode, toggleShowAllChrome }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, toggleEditMode, toggleShowAllChrome, setViewBranch }}>
       {children}
     </EditorContext.Provider>
   );