@drawnagency/primitives 0.1.113 → 0.1.115

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")}

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

@@ -4,8 +4,9 @@ import { cn } from "../../../lib/cn";
 import { getIcon } from "../../../lib/icons";
 import { useEditableCollection } from "../../primitives/useEditableCollection";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
-import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
-import { Check, CopyPlus, Pencil, X } from "lucide-react";
+import { DragHandle } from "../../shared/icons";
+import { DropEdgeIndicator } from "../../editor/DropEdgeIndicator";
+import { Check, CopyPlus, Pencil, Plus, Trash2, X } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
 import { DoDontToggle } from "./DoDontToggle";
@@ -17,6 +18,7 @@ interface Props {
   showLabel?: boolean;
   stackText?: boolean;
   dodont?: "do" | "dont";
+  marker?: "icon" | "number";
   labelClassName?: string;
   textClassName?: string;
   iconClassName?: string;
@@ -30,6 +32,7 @@ export default function IconList({
   showLabel = true,
   stackText = false,
   dodont,
+  marker,
   labelClassName = "font-bold text-base-contrast",
   textClassName = "text-base-contrast-light",
   iconClassName = "text-primary",
@@ -37,17 +40,20 @@ export default function IconList({
   onItemsChange,
 }: Props) {
   const isEditMode = !!onChange || !!onItemsChange;
+  // Numbering is for standard icon lists: a whole-list Do/Don't keeps its
+  // checks/x's even if a number marker was stored before it was switched on.
+  const numbered = marker === "number" && !dodont;
 
   const emitItems = useCallback(
     (newItems: IconListItem[]) => {
       onChange?.({
         type: "icon_list",
         content: { items: newItems },
-        options: { icon, showLabel, stackText, dodont },
+        options: { icon, showLabel, stackText, dodont, marker },
       });
       onItemsChange?.(newItems);
     },
-    [onChange, onItemsChange, icon, showLabel, stackText, dodont],
+    [onChange, onItemsChange, icon, showLabel, stackText, dodont, marker],
   );
 
   if (!isEditMode) {
@@ -58,6 +64,7 @@ export default function IconList({
         showLabel={showLabel}
         stackText={stackText}
         dodont={dodont}
+        numbered={numbered}
         labelClassName={labelClassName}
         textClassName={textClassName}
         iconClassName={iconClassName}
@@ -72,6 +79,7 @@ export default function IconList({
       showLabel={showLabel}
       stackText={stackText}
       dodont={dodont}
+      numbered={numbered}
       labelClassName={labelClassName}
       textClassName={textClassName}
       iconClassName={iconClassName}
@@ -105,14 +113,26 @@ function resolveIconColor(
   iconClassName: string,
   sectionDodont: "do" | "dont" | undefined,
 ) {
-  if (item.dodont === "do") return "text-green-600";
-  if (item.dodont === "dont") return "text-red-600";
+  if (item.dodont === "do") return "text-success";
+  if (item.dodont === "dont") return "text-danger";
   if (item.icon) return iconClassName;
-  if (sectionDodont === "do") return "text-green-600";
-  if (sectionDodont === "dont") return "text-red-600";
+  if (sectionDodont === "do") return "text-success";
+  if (sectionDodont === "dont") return "text-danger";
   return iconClassName;
 }
 
+// Bold numeral in the same 18px box as the lucide glyph, so a numbered list
+// lines up exactly with an icon list; it takes the cell's color like an icon.
+// Font size is spelled text-[1rem]: `text-base` is the --color-base background
+// color here, not a size, and would paint the numeral invisible.
+function NumberMarker({ n }: { n: number }) {
+  return (
+    <span className="flex h-[18px] min-w-[18px] items-center justify-center text-[1rem] leading-none font-bold tabular-nums">
+      {n}
+    </span>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // View mode
 // ---------------------------------------------------------------------------
@@ -123,6 +143,7 @@ function ViewIconList({
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName,
@@ -132,11 +153,12 @@ function ViewIconList({
   showLabel: boolean;
   stackText: boolean;
   dodont: "do" | "dont" | undefined;
+  numbered: boolean;
   labelClassName: string;
   textClassName: string;
   iconClassName: string;
 }) {
-  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon, dodont));
+  const hasAnyIcon = numbered || items.some((item) => resolveIcon(item, defaultIcon, dodont));
 
   return (
     <div className="grid gap-4 pb-4">
@@ -156,7 +178,7 @@ function ViewIconList({
                 data-testid="icon-list-icon"
                 className={cn("flex items-start pt-0.5", iconColor)}
               >
-                {iconEntry && <iconEntry.icon size={18} />}
+                {numbered ? <NumberMarker n={i + 1} /> : iconEntry ? <iconEntry.icon size={18} /> : null}
               </div>
             )}
             <div
@@ -185,6 +207,7 @@ function EditIconList({
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName,
@@ -195,6 +218,7 @@ function EditIconList({
   showLabel: boolean;
   stackText: boolean;
   dodont: "do" | "dont" | undefined;
+  numbered: boolean;
   labelClassName: string;
   textClassName: string;
   iconClassName: string;
@@ -287,7 +311,7 @@ function EditIconList({
   );
 
   // In edit mode the icon column always renders — even items with no icon need
-  // the always-present picker trigger (icon + Do/Don't tagging) in the icon cell.
+  // the always-present picker trigger in the icon cell (or, numbered, the numeral).
   const hasAnyIcon = true;
 
   return (
@@ -304,6 +328,7 @@ function EditIconList({
           showLabel={showLabel}
           stackText={stackText}
           dodont={dodont}
+          numbered={numbered}
           labelClassName={labelClassName}
           textClassName={textClassName}
           iconClassName={iconClassName}
@@ -324,7 +349,7 @@ function EditIconList({
 
       {/* Add button — centered below list, visible on list hover */}
       <IconButton
-        icon={<AddIcon size={16} />}
+        icon={<Plus size={16} />}
         label="Add item"
         size="lg"
         intent="primary"
@@ -345,6 +370,7 @@ function EditableRow({
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName,
@@ -363,6 +389,7 @@ function EditableRow({
   showLabel: boolean;
   stackText: boolean;
   dodont: "do" | "dont" | undefined;
+  numbered: boolean;
   labelClassName: string;
   textClassName: string;
   iconClassName: string;
@@ -446,40 +473,45 @@ function EditableRow({
       className={cn(
         "group/row relative grid gap-x-3",
         hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
-        isDropTarget && "border-t-2 border-primary",
       )}
       onFocusCapture={onEditableActivity}
       onInput={onEditableActivity}
       onMouseMove={() => setEditingSuppressed(false)}
     >
+      <DropEdgeIndicator edge={isDropTarget ? "top" : null} />
 
       {/* Icon cell — matches ViewIconList layout: 24px column, flex items-start
           pt-0.5. A single always-present trigger shows the current effective glyph
           (resolveIcon returns the forced check/x for tagged rows or a whole-list
           default) and opens the IconPicker (a pure icon grid). Per-item do/dont
-          tagging lives in the separate DoDontToggle in the row's hover toolbar. */}
+          tagging lives in the separate DoDontToggle in the row's hover toolbar.
+          A numbered list shows the static numeral instead — there is no icon to pick. */}
       {hasAnyIcon && (
         <div
           data-testid="icon-list-icon"
           className={cn("relative flex items-start pt-0.5", iconColor)}
-          onMouseEnter={() => setIconHover(true)}
-          onMouseLeave={() => setIconHover(false)}
+          onMouseEnter={numbered ? undefined : () => setIconHover(true)}
+          onMouseLeave={numbered ? undefined : () => setIconHover(false)}
         >
-          <button
-            className="cursor-pointer transition-opacity hover:opacity-70"
-            aria-label="Change icon"
-            onClick={() => { setPickerOpen((prev) => !prev); setDodontOpen(false); }}
-          >
-            {iconHover && !pickerOpen ? (
-              <Pencil size={18} className="text-base-contrast-light" />
-            ) : iconEntry ? (
-              <iconEntry.icon size={18} />
-            ) : (
-              <span className="flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />
-            )}
-          </button>
+          {numbered ? (
+            <NumberMarker n={index + 1} />
+          ) : (
+            <button
+              className="cursor-pointer transition-opacity hover:opacity-70"
+              aria-label="Change icon"
+              onClick={() => { setPickerOpen((prev) => !prev); setDodontOpen(false); }}
+            >
+              {iconHover && !pickerOpen ? (
+                <Pencil size={18} className="text-base-contrast-light" />
+              ) : iconEntry ? (
+                <iconEntry.icon size={18} />
+              ) : (
+                <span className="flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />
+              )}
+            </button>
+          )}
 
-          {pickerOpen && (
+          {pickerOpen && !numbered && (
             <div className="absolute top-full left-0 z-50 mt-1">
               <IconPicker
                 selected={effectiveIconId}
@@ -537,8 +569,8 @@ function EditableRow({
             onClick={() => { setDodontOpen((p) => !p); setPickerOpen(false); }}
             className="cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary"
           >
-            {item.dodont === "do" ? <Check size={14} className="text-green-600" />
-              : item.dodont === "dont" ? <X size={14} className="text-red-600" />
+            {item.dodont === "do" ? <Check size={14} className="text-success" />
+              : item.dodont === "dont" ? <X size={14} className="text-danger" />
               : <Pencil size={14} />}
           </button>
           {dodontOpen && (
@@ -567,7 +599,7 @@ function EditableRow({
           <CopyPlus size={14} />
         </button>
         <IconButton
-          icon={<DeleteIcon size={14} />}
+          icon={<Trash2 size={14} />}
           label="Delete item"
           size="sm"
           intent="destructive"
@@ -626,9 +658,10 @@ function TrailingDropZone({
   const isDropTarget = dragState.targetId === trailingId;
 
   return (
-    <div
-      ref={ref}
-      className={cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary")}
-    />
+    <div ref={ref} className="absolute bottom-0 left-0 right-0 h-4">
+      <div className="relative h-full">
+        <DropEdgeIndicator edge={isDropTarget ? "top" : null} />
+      </div>
+    </div>
   );
 }