@drawnagency/primitives 0.1.0

package/src/components/primitives/EditableGrid.tsx

@@ -0,0 +1,260 @@
+import { useRef, useEffect, useState, type ReactNode } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { ImageIcon } from "lucide-react";
+import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { cn } from "../../lib/cn";
+import { gridColsClass } from "../../lib/grid";
+import { useEditableCollection } from "./useEditableCollection";
+
+interface EditableGridProps<T> {
+  items: T[];
+  columns: number;
+  onChange: (items: T[]) => void;
+  createItem: () => T;
+  isEditMode: boolean;
+  renderItem: (item: T, props: { isEditMode: boolean; index: number }) => ReactNode;
+  onItemSettings?: (index: number) => void;
+  onItemImageClick?: (index: number) => void;
+  chromeTopClass?: string;
+  className?: string;
+}
+
+export function EditableGrid<T>({
+  items,
+  columns,
+  onChange,
+  createItem,
+  isEditMode,
+  renderItem,
+  onItemSettings,
+  onItemImageClick,
+  chromeTopClass,
+  className,
+}: EditableGridProps<T>) {
+  const { wrappedItems, onReorder, onAdd, onInsert, onRemove } = useEditableCollection({
+    items,
+    onChange,
+    createItem,
+  });
+
+  const [dragState, setDragState] = useState<{
+    sourceId: string | null;
+    closestEdge: { id: string; edge: "left" | "right" } | null;
+  }>({ sourceId: null, closestEdge: null });
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    return monitorForElements({
+      onDragStart: ({ source }) => {
+        if (source.data.dragType === "grid-cell") setIsDragging(true);
+      },
+      onDrop: ({ source }) => {
+        if (source.data.dragType === "grid-cell") setIsDragging(false);
+      },
+    });
+  }, []);
+
+  if (!isEditMode) {
+    return (
+      <div className={cn("grid gap-4", gridColsClass[columns] || "grid-cols-1", className)}>
+        {wrappedItems.map((wrapped, index) => (
+          <div key={wrapped.id}>
+            {renderItem(wrapped.data, { isEditMode: false, index })}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("group/grid relative grid gap-4", gridColsClass[columns] || "grid-cols-1", className)}>
+      {wrappedItems.map((wrapped, index) => (
+        <GridCell
+          key={wrapped.id}
+          id={wrapped.id}
+          index={index}
+          isLast={index === wrappedItems.length - 1}
+          isDragging={isDragging}
+          onReorder={onReorder}
+          onRemove={onRemove}
+          onInsert={onInsert}
+          onSettings={onItemSettings ? () => onItemSettings(index) : undefined}
+          onImageClick={onItemImageClick ? () => onItemImageClick(index) : undefined}
+          chromeTopClass={chromeTopClass}
+          dragState={dragState}
+          setDragState={setDragState}
+        >
+          {renderItem(wrapped.data, { isEditMode: true, index })}
+        </GridCell>
+      ))}
+
+      {/* Add button — absolute, centered below the grid */}
+      <IconButton
+        icon={<AddIcon size={16} />}
+        label="Add item"
+        size="lg"
+        intent="primary"
+        onClick={onAdd}
+        className="absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/grid:opacity-100"
+      />
+    </div>
+  );
+}
+
+function GridCell({
+  id,
+  index,
+  isLast,
+  isDragging,
+  onReorder,
+  onRemove,
+  onInsert,
+  onSettings,
+  onImageClick,
+  chromeTopClass,
+  dragState,
+  setDragState,
+  children,
+}: {
+  id: string;
+  index: number;
+  isLast: boolean;
+  isDragging: boolean;
+  onReorder: (from: number, to: number) => void;
+  onRemove: (id: string) => void;
+  onInsert: (index: number) => void;
+  onSettings?: () => void;
+  onImageClick?: () => void;
+  chromeTopClass?: string;
+  dragState: { sourceId: string | null; closestEdge: { id: string; edge: "left" | "right" } | null };
+  setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; closestEdge: { id: string; edge: "left" | "right" } | null }>>;
+  children: ReactNode;
+}) {
+  const cellRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const cell = cellRef.current;
+    const handle = handleRef.current;
+    if (!cell || !handle) return;
+
+    const cleanupDraggable = draggable({
+      element: handle,
+      getInitialData: () => ({ dragType: "grid-cell", id, index }),
+      onDragStart: () => setDragState({ sourceId: id, closestEdge: null }),
+      onDrop: () => setDragState({ sourceId: null, closestEdge: null }),
+    });
+
+    const cleanupDropTarget = dropTargetForElements({
+      element: cell,
+      canDrop: ({ source }) => source.data.dragType === "grid-cell",
+      getData: ({ input, element }) =>
+        attachClosestEdge(
+          { id, index },
+          { input, element, allowedEdges: ["left", "right"] },
+        ),
+      onDragEnter: ({ self }) => {
+        const edge = extractClosestEdge(self.data);
+        if (edge) setDragState((prev) => ({ ...prev, closestEdge: { id, edge: edge as "left" | "right" } }));
+      },
+      onDrag: ({ self }) => {
+        const edge = extractClosestEdge(self.data);
+        if (edge) setDragState((prev) => ({ ...prev, closestEdge: { id, edge: edge as "left" | "right" } }));
+      },
+      onDragLeave: () => {
+        setDragState((prev) => prev.closestEdge?.id === id ? { ...prev, closestEdge: null } : prev);
+      },
+      onDrop: ({ source, self }) => {
+        const fromIndex = source.data.index as number;
+        const edge = extractClosestEdge(self.data);
+        let toIndex = index;
+        if (edge === "right") toIndex = index + 1;
+        if (fromIndex < toIndex) toIndex--;
+        if (fromIndex !== toIndex) {
+          onReorder(fromIndex, toIndex);
+        }
+      },
+    });
+
+    return () => {
+      cleanupDraggable();
+      cleanupDropTarget();
+    };
+  }, [id, index, onReorder, setDragState]);
+
+  const isCellDragging = dragState.sourceId === id;
+  const showLeftEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "left" && dragState.sourceId !== id;
+  const showRightEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "right" && dragState.sourceId !== id;
+
+  return (
+    <div
+      ref={cellRef}
+      className={cn(
+        "group/cell relative",
+        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" />
+      )}
+
+      {/* Insert button — centered in the gap between cells */}
+      {!isDragging && !isLast && (
+        <IconButton
+          icon={<AddIcon size={12} />}
+          label="Insert item"
+          size="sm"
+          intent="primary"
+          onClick={() => onInsert(index + 1)}
+          className="absolute top-1/2 -right-2 z-20 -translate-y-1/2 translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 group-hover/cell:opacity-100"
+        />
+      )}
+
+      {/* Drag handle — top-left, visible on hover */}
+      <IconButton
+        ref={handleRef}
+        icon={<DragHandle size={16} />}
+        label="Drag to reorder"
+        className={cn("absolute left-1.5 z-10 cursor-grab bg-base/80 opacity-0 shadow-sm group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5")}
+        tabIndex={-1}
+      />
+
+      {/* Actions — top-right, visible on hover */}
+      <div className={cn("absolute right-1.5 z-10 flex items-center gap-1 opacity-0 group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5")}>
+        {onImageClick && (
+          <IconButton
+            icon={<ImageIcon size={16} />}
+            label="Change image"
+            onClick={onImageClick}
+            className="bg-base/80 shadow-sm"
+          />
+        )}
+        {onSettings && (
+          <IconButton
+            icon={<SettingsIcon size={16} />}
+            label="Item settings"
+            onClick={onSettings}
+            className="bg-base/80 shadow-sm"
+          />
+        )}
+        <IconButton
+          icon={<DeleteIcon size={16} />}
+          label="Delete item"
+          intent="destructive"
+          onClick={() => onRemove(id)}
+          className="bg-base/80 shadow-sm"
+        />
+      </div>
+
+      {children}
+    </div>
+  );
+}

package/src/components/primitives/EditableList.tsx

@@ -0,0 +1,160 @@
+import { useRef, useEffect, useState, type ReactNode } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { DragHandle, DeleteIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { cn } from "../../lib/cn";
+import { useEditableCollection } from "./useEditableCollection";
+
+interface EditableListProps<T> {
+  items: T[];
+  onChange: (items: T[]) => void;
+  createItem: () => T;
+  isEditMode: boolean;
+  renderItem: (item: T, props: { isEditMode: boolean; index: number }) => ReactNode;
+  className?: string;
+}
+
+export function EditableList<T>({
+  items,
+  onChange,
+  createItem,
+  isEditMode,
+  renderItem,
+  className,
+}: EditableListProps<T>) {
+  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+    items,
+    onChange,
+    createItem,
+  });
+
+  const [dragState, setDragState] = useState<{
+    sourceId: string | null;
+    targetId: string | null;
+  }>({ sourceId: null, targetId: null });
+
+  if (!isEditMode) {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        {wrappedItems.map((wrapped, index) => (
+          <div key={wrapped.id}>
+            {renderItem(wrapped.data, { isEditMode: false, index })}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {wrappedItems.map((wrapped, index) => (
+        <ListRow
+          key={wrapped.id}
+          id={wrapped.id}
+          index={index}
+          onReorder={onReorder}
+          onRemove={onRemove}
+          dragState={dragState}
+          setDragState={setDragState}
+        >
+          {renderItem(wrapped.data, { isEditMode: true, index })}
+        </ListRow>
+      ))}
+      <button
+        onClick={onAdd}
+        className="cursor-pointer rounded border-2 border-dashed border-base-200 px-3 py-2 text-sm text-base-contrast-light hover:border-primary hover:text-primary"
+      >
+        Add row
+      </button>
+    </div>
+  );
+}
+
+function ListRow({
+  id,
+  index,
+  onReorder,
+  onRemove,
+  dragState,
+  setDragState,
+  children,
+}: {
+  id: string;
+  index: number;
+  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);
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) 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) {
+          onReorder(fromIndex, index);
+        }
+      },
+    });
+
+    return () => {
+      cleanupDraggable();
+      cleanupDropTarget();
+    };
+  }, [id, index, onReorder, setDragState]);
+
+  const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+
+  return (
+    <div
+      ref={rowRef}
+      className={cn(
+        "group/row relative flex items-center gap-2",
+        isDropTarget && "border-t-2 border-primary",
+      )}
+    >
+      {/* Drag handle — left edge, visible on hover or no-hover devices */}
+      <IconButton
+        ref={handleRef}
+        icon={<DragHandle size={14} />}
+        label="Drag to reorder"
+        size="sm"
+        className="shrink-0 cursor-grab opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
+        tabIndex={-1}
+      />
+
+      <div className="min-w-0 flex-1">
+        {children}
+      </div>
+
+      {/* Delete button — right edge, visible on hover or no-hover devices */}
+      <IconButton
+        icon={<DeleteIcon size={14} />}
+        label="Delete item"
+        size="sm"
+        intent="destructive"
+        onClick={() => onRemove(id)}
+        className="shrink-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
+      />
+    </div>
+  );
+}

package/src/components/primitives/EditablePlainText.tsx

@@ -0,0 +1,99 @@
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  createElement,
+  type ElementType,
+  type HTMLAttributes,
+} from "react";
+import { useEditablePlainText } from "./useEditablePlainText";
+
+interface EditablePlainTextProps
+  extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  tag: ElementType;
+  value: string;
+  onChange: (value: string) => void;
+  isEditMode: boolean;
+  multiline?: boolean;
+  placeholder?: string;
+}
+
+export function EditablePlainText({
+  tag,
+  value,
+  onChange,
+  isEditMode,
+  multiline = false,
+  placeholder,
+  className,
+  ...htmlAttrs
+}: EditablePlainTextProps) {
+  const ref = useRef<HTMLElement>(null);
+  const {
+    value: localValue,
+    handleInput,
+    handleBlur,
+    shouldPreventEnter,
+  } = useEditablePlainText({ value, onChange, multiline });
+
+  // Set textContent via ref (safe — plain text only, no HTML injection)
+  useEffect(() => {
+    if (ref.current && ref.current.textContent !== localValue) {
+      ref.current.textContent = localValue;
+    }
+  }, [localValue]);
+
+  const onInput = useCallback(() => {
+    if (ref.current) {
+      handleInput(ref.current.textContent || "");
+    }
+  }, [handleInput]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && shouldPreventEnter) {
+        e.preventDefault();
+      }
+    },
+    [shouldPreventEnter],
+  );
+
+  const onPaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(text));
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      if (ref.current) {
+        handleInput(ref.current.textContent || "");
+      }
+    },
+    [handleInput],
+  );
+
+  return createElement(
+    tag,
+    {
+      ref,
+      className: isEditMode && placeholder
+        ? `editable-placeholder ${className ?? ""}`
+        : className,
+      contentEditable: isEditMode ? "true" : undefined,
+      suppressContentEditableWarning: isEditMode || undefined,
+      onInput: isEditMode ? onInput : undefined,
+      onBlur: isEditMode ? handleBlur : undefined,
+      onKeyDown: isEditMode ? onKeyDown : undefined,
+      onPaste: isEditMode ? onPaste : undefined,
+      "data-placeholder": isEditMode && placeholder ? placeholder : undefined,
+      ...htmlAttrs,
+    },
+    value,
+  );
+}

package/src/components/primitives/EditableRichText.tsx

@@ -0,0 +1,132 @@
+import { useRef, useCallback, useEffect } from "react";
+import { EditorContent } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { sanitizeHtml } from "../../lib/sanitize";
+import { useEditableRichText } from "./useEditableRichText";
+import { RichTextToolbar } from "./RichTextToolbar";
+import type { PresetName } from "./tiptap-presets";
+
+interface EditableRichTextProps {
+  value: string;
+  onChange: (html: string) => void;
+  isEditMode: boolean;
+  preset?: PresetName;
+  className?: string;
+}
+
+export function EditableRichText({
+  value,
+  onChange,
+  isEditMode,
+  preset = "rich",
+  className,
+}: EditableRichTextProps) {
+  const { isEditorActive, editor, activate, deactivate } =
+    useEditableRichText({ value, onChange, preset });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clickCoordsRef = useRef<{ left: number; top: number } | null>(null);
+
+  // Clear blur timeout on unmount to prevent stale callback execution
+  useEffect(() => {
+    return () => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Focus the editor and place cursor at click position after activation
+  useEffect(() => {
+    if (!isEditorActive || !editor) return;
+    requestAnimationFrame(() => {
+      if (editor.isDestroyed) return;
+      const coords = clickCoordsRef.current;
+      if (coords) {
+        try {
+          const pos = editor.view.posAtCoords(coords);
+          if (pos) {
+            editor.commands.focus();
+            editor.commands.setTextSelection(pos.pos);
+          } else {
+            editor.commands.focus('end');
+          }
+        } catch {
+          editor.commands.focus('end');
+        } finally {
+          clickCoordsRef.current = null;
+        }
+      } else {
+        editor.commands.focus('end');
+      }
+    });
+  }, [isEditorActive, editor]);
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    if (isEditMode && !isEditorActive) {
+      clickCoordsRef.current = { left: e.clientX, top: e.clientY };
+      activate();
+    }
+  }, [isEditMode, isEditorActive, activate]);
+
+  const handleFocus = useCallback(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    blurTimeoutRef.current = setTimeout(() => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(document.activeElement)
+      ) {
+        deactivate();
+      }
+    }, 150);
+  }, [deactivate]);
+
+  if (!isEditMode) {
+    // eslint-disable-next-line react/no-danger
+    return (
+      <div
+        className={className}
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }}
+      />
+    );
+  }
+
+  // Edit mode, not yet active: static HTML with click-to-activate
+  if (!isEditorActive || !editor) {
+    // eslint-disable-next-line react/no-danger
+    return (
+      <div
+        className={className}
+        onClick={handleClick}
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }}
+      />
+    );
+  }
+
+  // Edit mode, active: TipTap editor with bubble menu on text selection
+  return (
+    <div
+      ref={wrapperRef}
+      className={className}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      <BubbleMenu
+        editor={editor}
+        shouldShow={({ editor: ed, state }) => {
+          const { from, to } = state.selection;
+          return ed.isFocused && from !== to;
+        }}
+      >
+        <RichTextToolbar editor={editor} preset={preset} />
+      </BubbleMenu>
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

package/src/components/primitives/HeadingSection.tsx

@@ -0,0 +1,25 @@
+import { toSectionId } from "../../lib/nav";
+import { EditablePlainText } from "./EditablePlainText";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  heading: string;
+  tag: "h2" | "h3" | "h4";
+  placeholder: string;
+  className?: string;
+  onChange?: (heading: string) => void;
+}
+
+export function HeadingSection({ heading, tag, placeholder, className, onChange }: Props) {
+  return (
+    <EditablePlainText
+      tag={tag}
+      value={heading}
+      onChange={onChange ?? (() => {})}
+      isEditMode={!!onChange}
+      placeholder={placeholder}
+      id={toSectionId(heading)}
+      className={cn("scroll-mt-20", className)}
+    />
+  );
+}