@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/editor/StatusIndicator.tsx

@@ -74,10 +74,10 @@ export function deriveStatusDisplay({ mainStatus, savedStatus, contentDiffers, i
 }
 
 const dotColorClasses: Record<StatusColor, string> = {
-  live: "bg-green-500",
-  draft: "bg-gray-400",
-  archived: "bg-white border-gray-300",
-  modified: "bg-orange-400",
+  live: "bg-status-live-text",
+  draft: "bg-status-draft-text",
+  archived: "bg-white border-status-draft-text",
+  modified: "bg-status-modified-text",
 };
 
 

package/src/components/editor/TagIndicator.tsx

@@ -0,0 +1,80 @@
+import { useState, type FormEvent } from "react";
+import { Plus } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { tagDisplayLabel } from "../../lib/tags";
+import type { TagEntry } from "../../schemas/tags";
+import { IndicatorPill } from "./IndicatorPill";
+import { PopoverItem } from "../shared/PopoverItem";
+import { IconButton } from "../shared/IconButton";
+import { CheckboxBox } from "../shared/Checkbox";
+
+interface TagIndicatorProps {
+  /** The site's tag registry, already reconciled (siteTags). */
+  tags: TagEntry[];
+  /** The ids of the tags on this section. */
+  assignedIds: string[];
+  onToggle: (tagId: string, tagged: boolean) => void;
+  /** Create a tag from a typed name and put it on this section. */
+  onCreate: (label: string) => void;
+  /** Display-only mode — the pill still summarizes, but the picker never opens. */
+  disabled?: boolean;
+}
+
+export function TagIndicator({ tags, assignedIds, onToggle, onCreate, disabled }: TagIndicatorProps) {
+  const [draft, setDraft] = useState("");
+  const assigned = tags.filter((t) => assignedIds.includes(t.id));
+
+  const labelText = assigned.length === 0
+    ? "No tags"
+    : assigned.length === 1 ? tagDisplayLabel(assigned[0].label) : `${assigned.length} tags`;
+  const ariaSummary = assigned.length === 0 ? "none" : assigned.map((t) => tagDisplayLabel(t.label)).join(", ");
+
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    const label = draft.trim();
+    if (!label) return;
+    onCreate(label);
+    setDraft("");
+  }
+
+  return (
+    <IndicatorPill
+      dots={[]}
+      label={labelText}
+      ariaLabel={`Tags: ${ariaSummary}`}
+      buttonClassName={assigned.length === 0 ? "text-base-contrast-light" : undefined}
+      disabled={disabled}
+      clickContent={
+        <div className="w-56 py-1">
+          {tags.length > 0 && (
+            <ul role="list" className="max-h-64 overflow-y-auto">
+              {tags.map((t) => {
+                const checked = assignedIds.includes(t.id);
+                return (
+                  <li key={t.id}>
+                    <PopoverItem role="checkbox" aria-checked={checked} onClick={() => onToggle(t.id, !checked)}>
+                      <CheckboxBox checked={checked} />
+                      <span className={cn("truncate font-medium text-base-contrast", !t.label && "italic text-base-contrast/60")}>
+                        {tagDisplayLabel(t.label)}
+                      </span>
+                    </PopoverItem>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          <form onSubmit={submit} className={cn("flex items-center gap-1 px-3 py-1.5", tags.length > 0 && "border-t border-base-200")}>
+            <input
+              aria-label="New tag"
+              value={draft}
+              placeholder={tags.length > 0 ? "New tag" : "Create the first tag"}
+              onChange={(e) => setDraft(e.target.value)}
+              className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-xs text-base-contrast focus:border-base-contrast focus:outline-none"
+            />
+            <IconButton icon={<Plus size={14} />} label="Create tag" size="sm" type="submit" />
+          </form>
+        </div>
+      }
+    />
+  );
+}

package/src/components/primitives/DocumentDropZone.tsx

@@ -19,7 +19,7 @@ const isDocumentFile = (file: File) => file.type in DOCUMENT_MIME_TO_EXT;
  *
  * Deliberately thin on validation: every rejection (wrong type, too large, no
  * documents store) belongs to `uploadDocument`, which already routes typed copy
- * through the pipeline's `onUploadError` → `UploadRejectionAlert` channel. The
+ * through the pipeline's `onUploadError` → `InlineAlert` channel. The
  * one judgement made here is WHICH file of a multi-file drop to hand over.
  */
 export function DocumentDropZone({ onDocumentSelected, className }: DocumentDropZoneProps) {

package/src/components/primitives/EditableGrid.tsx

@@ -1,11 +1,12 @@
 import { useRef, useEffect, useState, useId, type ReactNode } from "react";
-import { ImageIcon } from "lucide-react";
-import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
+import { ImageIcon, Plus, Trash2, Settings } from "lucide-react";
+import { DragHandle } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
+import { DropEdgeIndicator } from "../editor/DropEdgeIndicator";
 import { cn } from "../../lib/cn";
 import { containerGridClass } from "../../lib/container-grid";
 import { useEditableCollection } from "./useEditableCollection";
-import { resolveDropIndex } from "./gridDrop";
+import { resolveDropIndex } from "./grid-drop";
 
 interface EditableGridProps<T> {
   items: T[];
@@ -166,7 +167,7 @@ export function EditableGrid<T>({
 
         {/* Add button — absolute, centered below the grid */}
         <IconButton
-          icon={<AddIcon size={16} />}
+          icon={<Plus size={16} />}
           label="Add item"
           size="lg"
           intent="primary"
@@ -287,18 +288,18 @@ function GridCell<T>({
         isCellDragging && "opacity-50",
       )}
     >
-      {/* Drop indicator — centered in the gap between cells */}
-      {showLeftEdge && (
-        <div className="absolute top-0 bottom-0 left-0 z-10 w-0.5 -translate-x-2 bg-primary" />
-      )}
-      {showRightEdge && (
-        <div className="absolute top-0 right-0 bottom-0 z-10 w-0.5 translate-x-2 bg-primary" />
-      )}
+      {/* Drop indicator — centered in the gap between cells. The gap is wider
+          here than DropEdgeIndicator's default gutter, so the offset goes
+          through `style`. */}
+      <DropEdgeIndicator
+        edge={showLeftEdge ? "left" : showRightEdge ? "right" : null}
+        style={{ transform: showLeftEdge ? "translateX(-0.5rem)" : "translateX(0.5rem)" }}
+      />
 
       {/* Insert button — centered in the gap between cells */}
       {!isDragging && !isLast && (
         <IconButton
-          icon={<AddIcon size={12} />}
+          icon={<Plus size={12} />}
           label="Insert item"
           size="sm"
           intent="primary"
@@ -328,14 +329,14 @@ function GridCell<T>({
         )}
         {onSettings && (
           <IconButton
-            icon={<SettingsIcon size={16} />}
+            icon={<Settings size={16} />}
             label="Item settings"
             onClick={onSettings}
             className="bg-base/80 shadow-sm"
           />
         )}
         <IconButton
-          icon={<DeleteIcon size={16} />}
+          icon={<Trash2 size={16} />}
           label="Delete item"
           intent="destructive"
           onClick={() => onRemove(id)}

package/src/components/primitives/EditableList.tsx

@@ -1,8 +1,11 @@
-import { useRef, useEffect, useState, type ReactNode } from "react";
-import { DragHandle, DeleteIcon } from "../shared/icons";
+import { useId, type ReactNode } from "react";
+import { DragHandle } from "../shared/icons";
+import { Trash2 } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
+import { DropEdgeIndicator } from "../editor/DropEdgeIndicator";
 import { cn } from "../../lib/cn";
 import { useEditableCollection } from "./useEditableCollection";
+import { useSortableRow } from "../../hooks/useSortableRow";
 
 interface EditableListProps<T> {
   items: T[];
@@ -26,11 +29,11 @@ export function EditableList<T>({
     onChange,
     createItem,
   });
-
-  const [dragState, setDragState] = useState<{
-    sourceId: string | null;
-    targetId: string | null;
-  }>({ sourceId: null, targetId: null });
+  // One shared dragType per EditableList instance — a bare "list-row" let a
+  // row dragged out of one list reorder a DIFFERENT list it was hovered over,
+  // since useSortableRow's DnD matching keys off dragType alone.
+  const listId = useId();
+  const dragType = `list-row-${listId}`;
 
   if (!isEditMode) {
     return (
@@ -51,10 +54,9 @@ export function EditableList<T>({
           key={wrapped.id}
           id={wrapped.id}
           index={index}
+          dragType={dragType}
           onReorder={onReorder}
           onRemove={onRemove}
-          dragState={dragState}
-          setDragState={setDragState}
         >
           {renderItem(wrapped.data, { isEditMode: true, index })}
         </ListRow>
@@ -72,85 +74,36 @@ export function EditableList<T>({
 function ListRow({
   id,
   index,
+  dragType,
   onReorder,
   onRemove,
-  dragState,
-  setDragState,
   children,
 }: {
   id: string;
   index: number;
+  dragType: string;
   onReorder: (from: number, to: number) => void;
   onRemove: (id: string) => void;
-  dragState: { sourceId: string | null; targetId: string | null };
-  setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
   children: ReactNode;
 }) {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const handleRef = useRef<HTMLButtonElement>(null);
-
-  // onReorder's identity chains back to the editor shell's inline onChange, so it
-  // changes on every editor render. Listing it in the deps below re-registered the
-  // draggable — re-awaiting the dynamic import — on every one of those, and a
-  // re-registration landing mid-drag cancels the drag. Read it through a ref, as
-  // IconList's monitor and EditableGrid already do.
-  const onReorderRef = useRef(onReorder);
-  onReorderRef.current = onReorder;
-
-  useEffect(() => {
-    const row = rowRef.current;
-    const handle = handleRef.current;
-    if (!row || !handle) return;
-
-    let cleanup: (() => void) | undefined;
-    let cancelled = false;
-
-    import("@atlaskit/pragmatic-drag-and-drop/element/adapter").then(({ draggable, dropTargetForElements }) => {
-      if (cancelled) return;
-
-      const cleanupDraggable = draggable({
-        element: handle,
-        getInitialData: () => ({ dragType: "list-row", id, index }),
-        onDragStart: () => setDragState({ sourceId: id, targetId: null }),
-        onDrop: () => setDragState({ sourceId: null, targetId: null }),
-      });
-
-      const cleanupDropTarget = dropTargetForElements({
-        element: row,
-        canDrop: ({ source }) => source.data.dragType === "list-row",
-        getData: () => ({ id, index }),
-        onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
-        onDragLeave: () => setDragState((prev) => prev.targetId === id ? { ...prev, targetId: null } : prev),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index as number;
-          if (fromIndex !== index) {
-            onReorderRef.current(fromIndex, index);
-          }
-        },
-      });
-
-      cleanup = () => {
-        cleanupDraggable();
-        cleanupDropTarget();
-      };
-    });
-
-    return () => {
-      cancelled = true;
-      cleanup?.();
-    };
-  }, [id, index, setDragState]);
-
-  const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+  // The row itself is the draggable (handle stays the visual grab affordance
+  // and drag-initiation target); drop-feedback is the closest-edge line, and a
+  // drop lands before/after by pointer half — useSortableRow reads onReorder
+  // through a ref internally, so a fresh arrow every render (as EditorShell's
+  // callers pass) doesn't re-register the drag mid-gesture.
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
+    index,
+    dragType,
+    onReorder,
+  });
 
   return (
     <div
       ref={rowRef}
-      className={cn(
-        "group/row relative flex items-center gap-2",
-        isDropTarget && "border-t-2 border-primary",
-      )}
+      className={cn("group/row relative flex items-center gap-2", isDragging && "opacity-50")}
     >
+      <DropEdgeIndicator edge={closestEdge} />
+
       {/* Drag handle — left edge, visible on hover or no-hover devices */}
       <IconButton
         ref={handleRef}
@@ -167,7 +120,7 @@ function ListRow({
 
       {/* Delete button — right edge, visible on hover or no-hover devices */}
       <IconButton
-        icon={<DeleteIcon size={14} />}
+        icon={<Trash2 size={14} />}
         label="Delete item"
         size="sm"
         intent="destructive"

package/src/components/primitives/HeadingSection.tsx

@@ -7,10 +7,13 @@ interface Props {
   tag: "h2" | "h3" | "h4";
   placeholder: string;
   className?: string;
+  /** Overrides the heading-derived id — the `<heading>-<reference id>` anchor stamped on a copy a
+   *  Reference pulled in (withNavAnchors). */
+  anchor?: string;
   onChange?: (heading: string) => void;
 }
 
-export function HeadingSection({ heading, tag, placeholder, className, onChange }: Props) {
+export function HeadingSection({ heading, tag, placeholder, className, anchor, onChange }: Props) {
   return (
     <EditablePlainText
       tag={tag}
@@ -18,7 +21,7 @@ export function HeadingSection({ heading, tag, placeholder, className, onChange
       onChange={onChange ?? (() => {})}
       isEditMode={!!onChange}
       placeholder={placeholder}
-      id={toSectionId(heading)}
+      id={anchor ?? toSectionId(heading)}
       className={cn("scroll-mt-20", className)}
     />
   );

package/src/components/primitives/ResolvedMedia.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { cn } from "../../lib/cn";
 import { ImageIcon } from "lucide-react";
 import { useResolvedMedia } from "../../hooks/useResolvedMedia";
+import type { ImageBackdrop } from "../../lib/image-background";
 
 interface ResolvedMediaProps {
   imageId: string | undefined;
@@ -13,6 +14,9 @@ interface ResolvedMediaProps {
   className?: string;
   imgClassName?: string;
   invertFrom?: string;
+  /** Painted above the loading placeholder and below the media, so it holds in
+   *  the zero-JS viewer (where the placeholder never fades) and after load. */
+  backdrop?: ImageBackdrop;
 }
 
 export function ResolvedMedia({
@@ -25,6 +29,7 @@ export function ResolvedMedia({
   className,
   imgClassName,
   invertFrom,
+  backdrop,
 }: ResolvedMediaProps) {
   const resolved = useResolvedMedia(imageId);
   // A successful live resolution is always fresher than baked props (the ref
@@ -64,6 +69,14 @@ export function ResolvedMedia({
               loaded ? "opacity-0" : "opacity-100",
             )}
           />
+          {backdrop && (
+            <div
+              aria-hidden="true"
+              data-testid="media-backdrop"
+              className={cn("pointer-events-none absolute inset-0", backdrop.className)}
+              style={backdrop.style}
+            />
+          )}
           {kind === "video" ? (
             <video
               src={src}

package/src/components/primitives/{defineHeadingSection.tsx → define-heading-section.tsx}

@@ -56,6 +56,7 @@ export function defineHeadingSection<T extends string>(config: HeadingSectionCon
         heading={content.content.heading}
         tag={config.tag}
         placeholder={config.placeholder}
+        anchor={(content as { navAnchor?: string }).navAnchor}
         onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
       />
     ),

package/src/components/primitives/index.ts

@@ -7,7 +7,7 @@ export { EditableGrid } from "./EditableGrid";
 export { ImageDropZone } from "./ImageDropZone";
 export { ResolvedMedia } from "./ResolvedMedia";
 export { LinkPopover } from "./LinkPopover";
-export { defineHeadingSection } from "./defineHeadingSection";
+export { defineHeadingSection } from "./define-heading-section";
 export { MediaBlock } from "../sections/Media/MediaBlock";
 // Link selector (external URL / internal page + section) plus the pages context
 // that feeds its dropdowns, so custom sections can reuse the same link picker the

package/src/components/primitives/useEditablePlainText.ts

@@ -37,11 +37,11 @@ export function useEditablePlainText({
   }, [onChange]);
 
   // Commit on every input, not only on blur — the same contract
-  // useEditableRichText adopted, and for the same reason: pressing ⌘S (or any
-  // keyboard save/publish, or an autosave flush) without leaving the field
-  // flushes persistence before blur ever fires, so a blur-only commit silently
-  // drops the in-progress edit. Deliberately NOT debounced: any debounce window
-  // is the same bug, just narrower.
+  // useEditableRichText adopted, and for the same reason: clicking Save (or an
+  // autosave flush) while the field is still focused flushes persistence before
+  // blur ever fires, so a blur-only commit silently drops the in-progress edit.
+  // Deliberately NOT debounced: any debounce window is the same bug, just
+  // narrower.
   const handleInput = useCallback((text: string) => {
     setValue(text);
     if (text !== lastPropValue.current) {

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

@@ -45,5 +45,7 @@ export default function Button({ text, link, download, onChange }: Props) {
     );
   }
 
-  return <button className={cn("cursor-pointer", base, variant)}>{text}</button>;
+  // No link configured: not an interactive control, so render inert markup
+  // rather than a focusable button that does nothing on activation.
+  return <span className={cn(base, variant)}>{text}</span>;
 }

package/src/components/sections/DoDontMedia/DoDontMediaBlock.tsx

@@ -1,11 +1,11 @@
 import { Check, X } from "lucide-react";
 import type { SingleMediaReference } from "../../../schemas/shared";
 import type { LinkValue } from "../../../schemas/link";
-import { MediaBlock } from "../Media/MediaBlock";
+import { MediaBlock, type MediaBlockProps } from "../Media/MediaBlock";
 
 export interface DoDontMediaBlockProps {
   refValue: SingleMediaReference;
-  options: { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" };
+  options: MediaBlockProps["options"];
   link?: LinkValue;
   dodont: "do" | "dont";
   isEditMode: boolean;
@@ -20,8 +20,8 @@ export function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode,
     <div>
       <div className="flex h-10 items-center justify-center pb-1">
         {dodont === "do"
-          ? <Check size={28} className="text-green-600" />
-          : <X size={28} className="text-red-600" />}
+          ? <Check size={28} className="text-success" />
+          : <X size={28} className="text-danger" />}
       </div>
       <MediaBlock
         refValue={refValue}

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

@@ -1,9 +1,10 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
 import { Image as ImageIcon } from "lucide-react";
-import { SingleMediaReferenceSchema } from "../../../schemas/shared";
+import { SingleMediaReferenceSchema, ImageBackgroundSchema } from "../../../schemas/shared";
 import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
 import { DoDontMediaBlock } from "./DoDontMediaBlock";
+import type { MediaBlockProps } from "../Media/MediaBlock";
 
 const schema = z.object({
   type: z.literal("dodont_media"),
@@ -27,6 +28,9 @@ const schema = z.object({
         .enum(["cover", "contain"])
         .describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).")
         .optional(),
+      background: ImageBackgroundSchema.describe(
+        "Optional backdrop filling the image box, for images that need contrast (e.g. a white transparent logo). 'theme' picks the site's light or dark surface separately for light and dark mode; 'custom' uses one hex for both. Images only — ignored for video. Omit for none.",
+      ).optional(),
     })
     .default({}),
 });
@@ -42,7 +46,7 @@ export default defineSection({
   component: ({ content, options, onChange }) => (
     <DoDontMediaBlock
       refValue={content.content.ref}
-      options={(options ?? {}) as { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" }}
+      options={(options ?? {}) as MediaBlockProps["options"]}
       link={content.content.link}
       dodont={content.content.dodont}
       isEditMode={!!onChange}
@@ -74,6 +78,11 @@ export default defineSection({
         { label: "Cover", value: "cover" },
       ],
     },
+    background: {
+      type: "image-background",
+      label: "Image background",
+      hidden: (values) => (values.ref as { type?: string } | undefined)?.type === "video",
+    },
     link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
     dodont: {
       type: "select",
@@ -88,7 +97,7 @@ export default defineSection({
   },
   inheritableSettings: ["square", "showCaption", "border", "objectFit"],
   settingsTabs: [
-    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit", "background"] },
     { label: "Link", fields: ["link"] },
     { label: "Do / Don't", fields: ["dodont"] },
   ],

package/src/components/sections/IconList/DoDontToggle.tsx

@@ -49,7 +49,7 @@ export function DoDontToggle({ value, onSelect, onClose }: DoDontToggleProps) {
           aria-label="Do"
           className={cn(
             "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
-            "text-green-600 hover:bg-base-accent",
+            "text-success hover:bg-base-accent",
             value === "do" && "ring-2 ring-primary bg-base-accent",
           )}
           onClick={() => onSelect("do")}
@@ -62,7 +62,7 @@ export function DoDontToggle({ value, onSelect, onClose }: DoDontToggleProps) {
           aria-label="Don't"
           className={cn(
             "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
-            "text-red-600 hover:bg-base-accent",
+            "text-danger hover:bg-base-accent",
             value === "dont" && "ring-2 ring-primary bg-base-accent",
           )}
           onClick={() => onSelect("dont")}