@drawnagency/primitives 0.1.78 → 0.1.80

package/src/components/primitives/useEditableCollection.ts

@@ -16,6 +16,7 @@ interface UseEditableCollectionReturn<T> {
   onReorder: (fromIndex: number, toIndex: number) => void;
   onAdd: () => void;
   onInsert: (index: number) => void;
+  onInsertItem: (index: number, data: T) => void;
   onRemove: (id: string) => void;
 }
 
@@ -89,6 +90,20 @@ export function useEditableCollection<T>({
     [createItem, onChange],
   );
 
+  // Insert an externally-provided item (e.g. one dragged in from another grid)
+  // at a specific index. Distinct from onInsert, which creates a blank item.
+  const onInsertItem = useCallback(
+    (index: number, data: T) => {
+      setWrappedItems((prev) => {
+        const next = [...prev];
+        next.splice(index, 0, { id: uid(), data });
+        onChange(next.map((w) => w.data));
+        return next;
+      });
+    },
+    [onChange]
+  );
+
   const onRemove = useCallback(
     (id: string) => {
       setWrappedItems((prev) => {
@@ -100,5 +115,5 @@ export function useEditableCollection<T>({
     [onChange]
   );
 
-  return { wrappedItems, onReorder, onAdd, onInsert, onRemove };
+  return { wrappedItems, onReorder, onAdd, onInsert, onInsertItem, onRemove };
 }

package/src/components/sections/Button/CTAButton.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 export default function Button({ text, link, download, onChange }: Props) {
-  const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
+  const base = "inline-block rounded-outer px-6 py-3 font-bold transition-colors";
   const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
 
   if (onChange) {

package/src/components/sections/Colors/index.tsx

@@ -30,7 +30,7 @@ export default defineSection({
   schema,
   authoringNote:
     "A brand color palette. Each color may carry hex/rgb/cmyk/pantone values. Use to document brand colors with swatches.",
-  component: ({ content, options, onChange, openModal }) => (
+  component: ({ content, options, onChange, openModal, onDelete }) => (
     <Colors
       colors={content.content.colors}
       columns={options?.columns as number}
@@ -39,6 +39,7 @@ export default defineSection({
       showLabel={options?.showLabel as boolean}
       onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
       openModal={openModal}
+      onDelete={onDelete}
     />
   ),
   defaults: () => ({

package/src/components/sections/Media/MediaBlock.tsx

@@ -77,7 +77,7 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
       <div
         data-testid="media-open-surface"
         className={cn(
-          "overflow-hidden rounded-md",
+          "overflow-hidden rounded-outer",
           showBorder && "border border-base-200",
           options.square && "aspect-square",
           onImageClick && "cursor-pointer",

package/src/components/shared/Navigation.tsx

@@ -89,7 +89,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
           <li key={pid}>
             <button
               onClick={() => handleHeadingNav(parent.href)}
-              className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+              className={cn("cursor-pointer w-full rounded-inner px-2 py-1 text-left text-sm transition-colors",
                 activeParentId === pid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
                 !isEditMode && parent.status && parent.status !== "live" && "opacity-50")}
             >
@@ -102,7 +102,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
                   return (
                     <li key={cid}>
                       <button onClick={() => handleHeadingNav(child.href)}
-                        className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                        className={cn("cursor-pointer w-full rounded-inner px-2 py-1 text-left text-sm transition-colors",
                           activeChildId === cid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
                           !isEditMode && child.status && child.status !== "live" && "opacity-50")}>
                         {child.label}
@@ -150,7 +150,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       {asButton ? (
         <button
           onClick={() => handlePageClick(page.id)}
-          className={cn("cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+          className={cn("cursor-pointer w-full rounded-inner px-3 py-2 text-left text-sm font-bold transition-colors",
             page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
         >
           {page.title}
@@ -158,7 +158,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
       ) : (
         <a
           href={page.href}
-          className={cn("block w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+          className={cn("block w-full rounded-inner px-3 py-2 text-left text-sm font-bold transition-colors",
             page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
         >
           {page.title}
@@ -179,7 +179,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
           type="button"
           aria-expanded={isOpen}
           onClick={() => setOpenGroups((g) => ({ ...g, [label]: !isOpen }))}
-          className="flex w-full cursor-pointer items-center justify-between rounded px-3 py-1 text-xs font-semibold uppercase tracking-wide text-base-contrast/70 transition-colors hover:text-primary"
+          className="flex w-full cursor-pointer items-center justify-between rounded-inner px-3 py-1 text-xs font-semibold uppercase tracking-wide text-base-contrast/70 transition-colors hover:text-primary"
         >
           <span>{`${label} (${pages.length})`}</span>
           <ChevronRight size={14} aria-hidden="true" className={cn("transition-transform", isOpen && "rotate-90")} />

package/src/components/shell/EditorContext.tsx

@@ -16,10 +16,12 @@ interface EditorContextValue {
   showAllChrome: boolean;
   viewBranch: "saved" | "live";
   historyState: HistoryState;
+  historyPageId: string | null;
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
   setViewBranch: (branch: "saved" | "live") => void;
   setHistoryState: (state: HistoryState) => void;
+  setHistoryPageId: (pageId: string | null) => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -33,7 +35,10 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const [showAllChrome, setShowAllChrome] = useState(false);
   const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
   const [historyState, setHistoryStateRaw] = useState<HistoryState>(null);
+  const [historyPageId, setHistoryPageId] = useState<string | null>(null);
   const setHistoryState = useCallback((state: HistoryState) => {
+    // null = "auto": resolved to the current page (or home) at render time
+    setHistoryPageId(null);
     setHistoryStateRaw(state);
   }, []);
 
@@ -49,7 +54,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, historyPageId, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState, setHistoryPageId }}>
       {children}
     </EditorContext.Provider>
   );

package/src/components/shell/EditorModal.tsx

@@ -59,15 +59,15 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
         aria-modal="true"
         aria-labelledby={titleId}
         className={cn(
-          "mx-4 w-full rounded-lg bg-base shadow-lg",
+          "mx-4 flex w-full flex-col rounded-lg bg-base shadow-lg",
           size === "large"
-            ? "max-w-[1400px] max-h-[900px] h-[90vh] flex flex-col"
+            ? "max-w-[1400px] max-h-[900px] h-[90vh]"
             : size === "settings"
-              ? "max-w-lg flex flex-col min-h-[32rem] max-h-[calc(100vh-4rem)]"
-              : "max-w-md",
+              ? "max-w-lg min-h-[min(32rem,calc(100vh-4rem))] max-h-[calc(100vh-4rem)]"
+              : "max-w-md max-h-[calc(100vh-4rem)]",
         )}
       >
-        <div className="flex items-center justify-between border-b border-base-200 px-6 py-4">
+        <div className="flex shrink-0 items-center justify-between border-b border-base-200 px-6 py-4">
           <h3 id={titleId} className="text-lg font-semibold text-base-contrast">{title}</h3>
           {!blocking && (
             <IconButton
@@ -81,8 +81,8 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
         </div>
         <div className={cn(
           !noPadding && "px-6 py-4",
-          size === "large" && "flex-1 overflow-y-auto",
-          size === "settings" && "flex-1 flex flex-col overflow-hidden",
+          "flex-1 overflow-y-auto",
+          size === "settings" && "flex flex-col",
         )}>
           {children}
         </div>

package/src/components/shell/EditorShell.tsx

@@ -12,7 +12,7 @@ import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
 import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
-import { EditorProvider, useEditorContext } from "./EditorContext";
+import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
 import { makeBlockMoveDispatch } from "./blockMoveDispatch";
 import { ROOT_CONTAINER_ID, resolveDropIndex } from "../../lib/block-dnd";
 import type { BlockMove } from "../../lib/block-move";
@@ -28,6 +28,7 @@ import { SectionSkeleton } from "./SectionSkeleton";
 import { SectionTypePicker } from "./SectionTypePicker";
 import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections, getSchema } from "../../lib/registry";
+import { cornerRadiusValue } from "../../lib/corner-radius";
 import { childInsertableTypes, insertChildAt } from "../../lib/container-ops";
 import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert-menu";
 
@@ -825,6 +826,7 @@ export default function EditorShell({
     root.style.setProperty("--heading-text-transform", config.uppercaseHeadings ? "uppercase" : "none");
     root.style.setProperty("--subheading-text-transform", config.uppercaseSubheadings ? "uppercase" : "none");
     root.style.setProperty("--nav-text-transform", config.uppercaseNavHeadings ? "uppercase" : "none");
+    root.style.setProperty("--radius-outer", cornerRadiusValue(config.cornerRadius));
 
     if (config.googleFontsUrl) {
       if (fontLinkRef.current?.href !== config.googleFontsUrl) {
@@ -853,6 +855,7 @@ export default function EditorShell({
     localStorage.setItem("portal-dark-mode", config.darkMode);
     localStorage.setItem("portal-primary-color", config.primaryColor);
     localStorage.setItem("portal-primary-contrast", config.primaryContrast);
+    localStorage.setItem("portal-corner-radius", cornerRadiusValue(config.cornerRadius));
     darkModeEvent.dispatch(config.darkMode);
     // The nav title lives in a separate island that mounts with a build-time
     // siteName prop. Push the live (possibly draft) name so editing it in Site
@@ -1451,6 +1454,7 @@ export default function EditorShell({
               onSectionChange={onSectionChange}
               onAddSection={onAddSection}
               onDeleteSection={setPendingDeleteSectionId}
+              onDeleteSectionImmediate={performDeleteSection}
               onReorderSections={onReorderSections}
               onBlockMove={onBlockMove}
               onMoveSection={siteIndex.pages.length > 1 ? setMovingSectionId : undefined}
@@ -1690,6 +1694,18 @@ function HistoryWatcher() {
   return null;
 }
 
+/** Resolve which historical page to show: explicit selection → the page the
+ *  editor is currently on (if it existed at that version) → home → first. */
+export function resolveHistoryPage(
+  historyState: NonNullable<HistoryState>,
+  historyPageId: string | null,
+  preferredPageId: string | null,
+) {
+  const pages = historyState.index.pages;
+  const byId = (id: string | null) => (id ? pages.find((p) => p.id === id) : undefined);
+  return byId(historyPageId) ?? byId(preferredPageId) ?? pages.find((p) => p.isHome) ?? pages[0];
+}
+
 function HistoryOrEditorContent({
   children,
   index,
@@ -1701,9 +1717,11 @@ function HistoryOrEditorContent({
   activeSections: LoadedSection[];
   activePageId: string | null;
 }) {
-  const { historyState } = useEditorContext();
+  const { historyState, historyPageId, setHistoryPageId } = useEditorContext();
   const wasInHistory = useRef(false);
 
+  const historyPage = historyState ? resolveHistoryPage(historyState, historyPageId, activePageId) : null;
+
   useEffect(() => {
     if (historyState) {
       wasInHistory.current = true;
@@ -1717,8 +1735,22 @@ function HistoryOrEditorContent({
     }
   }, [historyState, index, activeSections, activePageId]);
 
-  if (historyState) {
-    return <ViewRenderer sections={historyState.sections} />;
+  // Pin the auto-resolved page into context so the toolbar selector agrees,
+  // and keep the nav highlighting in sync with the page being viewed.
+  useEffect(() => {
+    if (!historyState || !historyPage) return;
+    if (!historyPageId) setHistoryPageId(historyPage.id);
+    siteNavChangeEvent.dispatch(
+      generateSiteNav({ index: historyState.index, activeSections: [], activePageId: historyPage.id, mode: "editor", audience: null }),
+    );
+  }, [historyState, historyPage?.id]);
+
+  if (historyState && historyPage) {
+    const position = new Map(historyPage.order.map((id, i) => [id, i]));
+    const pageSections = historyState.sections
+      .filter((s) => position.has(s.section.id))
+      .sort((a, b) => (position.get(a.section.id) ?? 0) - (position.get(b.section.id) ?? 0));
+    return <ViewRenderer sections={pageSections} />;
   }
   return <>{children}</>;
 }
@@ -1761,6 +1793,7 @@ function EditorContent({
   onSectionChange,
   onAddSection,
   onDeleteSection,
+  onDeleteSectionImmediate,
   onReorderSections,
   onBlockMove,
   onMoveSection,
@@ -1781,6 +1814,7 @@ function EditorContent({
   onSectionChange: (sectionId: string, content: SectionContent) => void;
   onAddSection: (insertIndex: number, selection: string) => void;
   onDeleteSection: (sectionId: string) => void;
+  onDeleteSectionImmediate: (sectionId: string) => void;
   onReorderSections: (fromIndex: number, toIndex: number) => void;
   onBlockMove: (move: BlockMove) => void;
   onMoveSection?: (sectionId: string) => void;
@@ -1975,6 +2009,9 @@ function EditorContent({
                     onChange={editingEnabled ? (newContent) => onSectionChange(section.id, newContent as SectionContent) : undefined}
                     isEditMode={isEditMode}
                     openModal={editingEnabled ? openModal : undefined}
+                    // Immediate (no confirm modal): used when a colors section's
+                    // last swatch is dragged out, auto-removing the empty section.
+                    onDelete={editingEnabled ? () => onDeleteSectionImmediate(section.id) : undefined}
                   />
                 </SectionWrapper>
               </SectionLayout>
@@ -2147,12 +2184,16 @@ function EditorToolbar({
   collabSelfId: string | null;
   collabStatus: CollabStatus;
 }) {
-  const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
+  const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState, historyPageId, setHistoryPageId } = useEditorContext();
 
   if (historyState) {
+    const page = resolveHistoryPage(historyState, historyPageId, null);
     return (
       <HistoryToolbar
         date={historyState.date}
+        pages={historyState.index.pages.map((p) => ({ id: p.id, title: p.title }))}
+        activePageId={page?.id ?? ""}
+        onPageChange={setHistoryPageId}
         onBackToCurrent={() => setHistoryState(null)}
         onRestore={onRestoreClick}
       />

package/src/components/shell/HistoryToolbar.tsx

@@ -1,13 +1,21 @@
 import { formatDateTime } from "../../lib/timestamp";
 import { Button } from "../shared/Button";
 
+interface HistoryPageOption {
+  id: string;
+  title: string;
+}
+
 interface HistoryToolbarProps {
   date: string;
+  pages: HistoryPageOption[];
+  activePageId: string;
+  onPageChange: (pageId: string) => void;
   onBackToCurrent: () => void;
   onRestore: () => void;
 }
 
-export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryToolbarProps) {
+export function HistoryToolbar({ date, pages, activePageId, onPageChange, onBackToCurrent, onRestore }: HistoryToolbarProps) {
   return (
     <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
       <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
@@ -16,10 +24,24 @@ export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryTool
             Back to current
           </Button>
         </div>
-        <div className="flex items-center justify-center">
+        <div className="flex items-center justify-center gap-2">
           <span className="text-xs font-medium text-base-contrast-light">
             Viewing {formatDateTime(date)}
           </span>
+          {pages.length > 1 && (
+            <select
+              value={activePageId}
+              onChange={(e) => onPageChange(e.target.value)}
+              className="rounded border border-base-200 bg-base px-1.5 py-0.5 text-xs font-medium text-base-contrast"
+              aria-label="Page at this version"
+            >
+              {pages.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.title}
+                </option>
+              ))}
+            </select>
+          )}
         </div>
         <div className="flex items-center justify-end">
           <Button variant="primary" size="sm" onClick={onRestore}>

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -21,6 +21,13 @@ const darkModeOptions = [
   { label: "Optional (viewer toggle)", value: "optional" },
 ];
 
+const cornerRadiusOptions = [
+  { label: "None (square)", value: "none" },
+  { label: "Small", value: "small" },
+  { label: "Medium", value: "medium" },
+  { label: "Large", value: "large" },
+];
+
 const FAVICON_TYPES = ["image/svg+xml", "image/png"];
 const FAVICON_MAX_BYTES = 100 * 1024;
 
@@ -154,6 +161,18 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         options={darkModeOptions}
       />
 
+      <div>
+        <Select
+          label="Corner radius"
+          value={siteConfig.cornerRadius}
+          onChange={(value) => update({ cornerRadius: value as SiteConfig["cornerRadius"] })}
+          options={cornerRadiusOptions}
+        />
+        <p className="mt-1 text-xs text-base-contrast/70">
+          Rounding of cards, media frames, buttons, and panels across the site.
+        </p>
+      </div>
+
       <FontPicker
         label="Heading font"
         value={siteConfig.headingFont}

package/src/lib/corner-radius.ts

@@ -0,0 +1,22 @@
+// Corner-radius design token. The site-level `cornerRadius` setting maps to a
+// CSS length for `--radius-outer`; `--radius-inner` derives from it in
+// core/styles/base.css (concentric rule: outer minus the standard 0.25rem
+// gap, floored at 0). Browser-safe: no node imports, no env access.
+
+export const CORNER_RADIUS_OPTIONS = ["none", "small", "medium", "large"] as const;
+
+export type CornerRadius = (typeof CORNER_RADIUS_OPTIONS)[number];
+
+// "medium" matches the pre-token look (Tailwind's rounded-md), so existing
+// sites render unchanged when they take this update.
+export const CORNER_RADIUS_VALUES: Record<CornerRadius, string> = {
+  none: "0px",
+  small: "0.25rem",
+  medium: "0.375rem",
+  large: "0.75rem",
+};
+
+/** CSS length for `--radius-outer`; unknown/missing values fall back to medium. */
+export function cornerRadiusValue(radius?: string | null): string {
+  return CORNER_RADIUS_VALUES[radius as CornerRadius] ?? CORNER_RADIUS_VALUES.medium;
+}

package/src/lib/registry.ts

@@ -83,6 +83,9 @@ export interface SectionProps<T = unknown> {
   onChange?: (content: T) => void;
   isEditMode: boolean;
   openModal?: (title: string, content: ReactNode) => void;
+  /** Delete this whole section. Used e.g. when a colors section's last swatch
+   *  is dragged into another section, leaving it empty. */
+  onDelete?: () => void;
 }
 
 export interface WrapperProps {

package/src/schemas/site-config.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { MediaConfigSchema } from "./media";
 import { HexColorSchema, FontNameSchema } from "./shared";
+import { CORNER_RADIUS_OPTIONS } from "../lib/corner-radius";
 
 const StatusSchema = z.enum(["draft", "live", "archived", "published"]).transform(
   (val) => val === "published" ? "live" as const : val,
@@ -177,6 +178,9 @@ export const SiteConfigSchema = z.object({
   primaryColor: HexColorSchema.default("#009ca6"),
   primaryContrast: HexColorSchema.default("#f0f0f0"),
   darkMode: z.enum(["light", "dark", "optional"]).default("light"),
+  // Maps to the --radius-outer design token (see lib/corner-radius.ts);
+  // defaults so pre-existing site-config.json files keep parsing.
+  cornerRadius: z.enum(CORNER_RADIUS_OPTIONS).default("medium"),
   headingFont: FontNameSchema.default("system-ui"),
   bodyFont: FontNameSchema.default("system-ui"),
   uppercaseHeadings: z.boolean().default(true),