@drawnagency/primitives 0.1.113 → 0.1.114

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

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Check, X } from "lucide-react";
+import { Check, Hash, Shapes, X } from "lucide-react";
 import { Checkbox } from "../../shared/Checkbox";
 import { FormLabel } from "../../shared/FormLabel";
 import { IconPicker } from "../../primitives/IconPicker";
@@ -11,79 +11,117 @@ export function IconListSettings({
   showLabel: initialShowLabel,
   stackText: initialStackText,
   dodont: initialDodont,
+  marker: initialMarker,
   onChange,
 }: {
   icon: string | null;
   showLabel: boolean;
   stackText: boolean;
   dodont?: "do" | "dont";
+  marker?: "icon" | "number";
   onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
 }) {
   const [icon, setIcon] = useState(initialIcon);
   const [showLabel, setShowLabel] = useState(initialShowLabel);
   const [stackText, setStackText] = useState(initialStackText);
   const [dodont, setDodont] = useState<"do" | "dont" | undefined>(initialDodont);
+  // The Icon marker choice is stored as an absent key, matching every list saved
+  // before the option existed (an explicit "icon" normalises to absent on save).
+  const [marker, setMarker] = useState<"number" | undefined>(initialMarker === "number" ? "number" : undefined);
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const emit = (
-    overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean; dodont: "do" | "dont" | undefined }>,
-  ) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, ...overrides } });
+    overrides: Partial<{
+      icon: string | null;
+      showLabel: boolean;
+      stackText: boolean;
+      dodont: "do" | "dont" | undefined;
+      marker: "number" | undefined;
+    }>,
+  ) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, marker, ...overrides } });
 
   const iconEntry = icon ? getIcon(icon) : null;
   const dodontActive = dodont === "do" || dodont === "dont";
+  const numbered = marker === "number" && !dodontActive;
+  const iconDisabled = dodontActive || numbered;
 
-  const tile = (value: "do" | "dont" | undefined, label: string, aria: string, glyph: React.ReactNode, tint: string) => (
+  // Numbering is for standard icon lists only, so turning on Do/Don't drops it.
+  const pickDodont = (value: "do" | "dont" | undefined) => {
+    setDodont(value);
+    if (value) {
+      setMarker(undefined);
+      emit({ dodont: value, marker: undefined });
+    } else {
+      emit({ dodont: value });
+    }
+  };
+
+  const tile = (pressed: boolean, onPick: () => void, label: string, aria: string, glyph: React.ReactNode, tint: string) => (
     <button
       type="button"
       aria-label={aria}
-      aria-pressed={dodont === value}
+      aria-pressed={pressed}
       className={cn(
         "cursor-pointer flex flex-col items-center gap-1 rounded border py-2 transition-colors",
         tint,
-        dodont === value ? "border-primary bg-base-accent" : "border-base-200",
+        pressed ? "border-primary bg-base-accent" : "border-base-200",
       )}
-      onClick={() => { setDodont(value); emit({ dodont: value }); }}
+      onClick={onPick}
     >
       {glyph}
       <span className="text-xs font-medium">{label}</span>
     </button>
   );
+  const dodontTile = (value: "do" | "dont" | undefined, label: string, aria: string, glyph: React.ReactNode, tint: string) =>
+    tile(dodont === value, () => pickDodont(value), label, aria, glyph, tint);
+  const markerTile = (value: "number" | undefined, label: string, aria: string, glyph: React.ReactNode) =>
+    tile(marker === value, () => { setMarker(value); emit({ marker: value }); }, label, aria, glyph, "text-base-contrast-light");
 
   return (
     <div className="space-y-4">
       <div>
         <FormLabel>Do / Don't list</FormLabel>
         <div className="grid grid-cols-3 gap-2">
-          {tile(
+          {dodontTile(
             undefined,
             "None",
             "No do/don't",
             <span className="flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />,
             "text-base-contrast-light",
           )}
-          {tile("do", "Do", "Do list", <Check size={20} />, "text-green-600")}
-          {tile("dont", "Don't", "Don't list", <X size={20} />, "text-red-600")}
+          {dodontTile("do", "Do", "Do list", <Check size={20} />, "text-success")}
+          {dodontTile("dont", "Don't", "Don't list", <X size={20} />, "text-danger")}
         </div>
       </div>
 
+      {!dodontActive && (
+        <div>
+          <FormLabel>Marker</FormLabel>
+          <div className="grid grid-cols-2 gap-2">
+            {markerTile(undefined, "Icon", "Icon markers", <Shapes size={20} />)}
+            {markerTile("number", "Number", "Number markers", <Hash size={20} />)}
+          </div>
+        </div>
+      )}
+
       <div className="relative">
         <FormLabel htmlFor="icon-picker-btn">Default Icon</FormLabel>
         <div className="flex items-center gap-2">
           <button
             id="icon-picker-btn"
-            disabled={dodontActive}
+            disabled={iconDisabled}
             className={cn(
               "flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light",
-              dodontActive
+              iconDisabled
                 ? "cursor-not-allowed opacity-50"
                 : "cursor-pointer hover:border-primary hover:text-primary",
             )}
-            onClick={() => { if (!dodontActive) setPickerOpen((prev) => !prev); }}
+            onClick={() => { if (!iconDisabled) setPickerOpen((prev) => !prev); }}
           >
             {iconEntry && <iconEntry.icon size={16} />}
             <span>{iconEntry?.label ?? "None"}</span>
           </button>
-          {icon && !dodontActive && (
+          {icon && !iconDisabled && (
             <button
               className="cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast"
               onClick={() => { setIcon(null); emit({ icon: null }); }}
@@ -92,12 +130,12 @@ export function IconListSettings({
             </button>
           )}
         </div>
-        {dodontActive && (
+        {iconDisabled && (
           <p className="mt-1 text-xs text-base-contrast-light/70">
-            Whole-list Do/Don't overrides the default icon.
+            {numbered ? "Numbered lists don't show icons." : "Whole-list Do/Don't overrides the default icon."}
           </p>
         )}
-        {pickerOpen && !dodontActive && (
+        {pickerOpen && !iconDisabled && (
           <div className="absolute top-full left-0 z-50 mt-1">
             <IconPicker
               selected={icon}

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

@@ -40,6 +40,12 @@ const schema = z.object({
         .enum(["do", "dont"])
         .describe("Whole-list do/don't mode: render every item with a green check (do) or red x (don't).")
         .optional(),
+      marker: z
+        .enum(["icon", "number"])
+        .describe(
+          "What marks each item: \"icon\" (default when absent) or \"number\" — bold numerals 1, 2, 3… in place of icons, ignoring item and default icons. Standard lists only: ignored when options.dodont is set.",
+        )
+        .optional(),
     })
     .optional(),
 });
@@ -72,7 +78,7 @@ export default defineSection({
   icon: <List size={18} />,
   schema,
   authoringNote:
-    "A list of labeled items, optionally with per-item icons and do/don't markers. Use for feature lists, guidelines, or do/don't guidance.",
+    "A list of labeled items, optionally with per-item icons and do/don't markers, or numbered instead (options.marker: \"number\"). Use for feature lists, guidelines, steps, or do/don't guidance.",
   component: ({ content, options, onChange }) => (
     <IconList
       items={content.content.items}
@@ -80,11 +86,12 @@ export default defineSection({
       showLabel={options?.showLabel as boolean}
       stackText={options?.stackText as boolean}
       dodont={options?.dodont as "do" | "dont" | undefined}
-      // IconList rebuilds its options from the four props above, which inside a
+      marker={options?.marker as "icon" | "number" | undefined}
+      // IconList rebuilds its options from the five props above, which inside a
       // container are childDefaults merged with the child's own options — writing
       // that back would materialise the container's defaults onto the child (it
       // then stops following later default changes) and drop any option key
-      // outside those four. Only items change here, so keep the stored options.
+      // outside those five. Only items change here, so keep the stored options.
       onChange={
         onChange ? (c) => onChange({ ...(c as typeof content), options: content.options }) : undefined
       }

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

@@ -1,5 +1,5 @@
 import { Heading1 } from "lucide-react";
-import { defineHeadingSection } from "../../primitives/defineHeadingSection";
+import { defineHeadingSection } from "../../primitives/define-heading-section";
 
 export default defineHeadingSection({
   type: "link_heading",

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

@@ -1,4 +1,4 @@
-import type { SingleMediaReference } from "../../../schemas/shared";
+import type { ImageBackground, SingleMediaReference } from "../../../schemas/shared";
 import type { LinkValue } from "../../../schemas/link";
 import { cn } from "../../../lib/cn";
 import { ResolvedMedia } from "../../primitives/ResolvedMedia";
@@ -6,10 +6,17 @@ import { ImageDropZone } from "../../primitives/ImageDropZone";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import { useMediaLibrary } from "../../shell/MediaLibraryContext";
 import { rebindImageRef } from "../../../media/resolve";
+import { imageBackdrop } from "../../../lib/image-background";
 
 export interface MediaBlockProps {
   refValue: SingleMediaReference;
-  options: { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" };
+  options: {
+    square?: boolean;
+    showCaption?: boolean;
+    border?: boolean;
+    objectFit?: "cover" | "contain";
+    background?: ImageBackground;
+  };
   /** Per-item link (viewer: already resolved to kind:"external" upstream). */
   link?: LinkValue;
   isEditMode: boolean;
@@ -22,6 +29,9 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
   const fit = refValue.objectFit ?? options.objectFit;
   const fitClass = fit === "cover" ? "object-cover" : "object-contain";
   const showBorder = refValue.border ?? options.border;
+  // Image-only: a backdrop behind a video would just frame its letterboxing.
+  // Per placement by design (#60): not inheritable, and no per-ref override.
+  const backdrop = refValue.type === "video" ? undefined : imageBackdrop(options.background);
   const captionStr = refValue.caption
     ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption
     : "";
@@ -49,6 +59,7 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
       className="h-full w-full"
       imgClassName={fitClass}
       invertFrom={refValue.invertFrom}
+      backdrop={backdrop}
     />
   );
 

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

@@ -1,9 +1,9 @@
 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 { MediaBlock } from "./MediaBlock";
+import { MediaBlock, type MediaBlockProps } from "./MediaBlock";
 
 const schema = z.object({
   type: z.literal("media"),
@@ -24,6 +24,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({}),
 });
@@ -38,7 +41,7 @@ export default defineSection({
   component: ({ content, options, onChange }) => (
     <MediaBlock
       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}
       isEditMode={!!onChange}
       onRefChange={
@@ -69,11 +72,16 @@ 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" },
   },
   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"] },
   ],
 });