@drawnagency/primitives 0.1.0

package/src/components/editor/SectionWrapper.tsx

@@ -0,0 +1,279 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DragHandle } from "./DragHandle";
+import { InsertButton } from "./InsertButton";
+import { DeleteButton } from "./DeleteButton";
+import { SettingsButton } from "./SettingsButton";
+import { StatusBadge } from "./StatusBadge";
+import { StatusPicker } from "./StatusPicker";
+import { AudiencePicker } from "./AudiencePicker";
+import { SettingsForm } from "./SettingsForm";
+import { useEditorContext } from "../shell/EditorContext";
+import { useEditorModal } from "../shell/EditorModalContext";
+import type { WrapperProps } from "../../lib/registry";
+import { cn } from "../../lib/cn";
+
+export function SectionWrapper({
+  sectionId,
+  sectionType,
+  status,
+  dirty,
+  index,
+  isLast,
+  definition,
+  options,
+  audiences,
+  access,
+  onAccessChange,
+  onStatusChange,
+  onSectionChange,
+  onReorder,
+  onRequestInsert,
+  onDelete,
+  children,
+}: WrapperProps) {
+  const { isEditMode, showAllChrome } = useEditorContext();
+  const { openModal } = useEditorModal();
+  const [isActive, setIsActive] = useState(false);
+  const [chromeReady, setChromeReady] = useState(isEditMode);
+
+  useEffect(() => {
+    if (isEditMode) {
+      const id = requestAnimationFrame(() => setChromeReady(true));
+      return () => cancelAnimationFrame(id);
+    }
+    setChromeReady(false);
+  }, [isEditMode]);
+
+  const blockRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const hasSettings = !!(
+    (definition.settings || definition.settingsForm) &&
+    onSectionChange
+  );
+
+  useEffect(() => {
+    const block = blockRef.current;
+    if (!block) return;
+    const onFocusIn = () => setIsActive(true);
+    const onFocusOut = (e: FocusEvent) => {
+      if (!block.contains(e.relatedTarget as Node)) setIsActive(false);
+    };
+    block.addEventListener("focusin", onFocusIn);
+    block.addEventListener("focusout", onFocusOut);
+    return () => {
+      block.removeEventListener("focusin", onFocusIn);
+      block.removeEventListener("focusout", onFocusOut);
+    };
+  }, []);
+
+  useEffect(() => {
+    const block = blockRef.current;
+    const handle = handleRef.current;
+    if (!block || !handle || !onReorder) return;
+
+    // Use the parent .section-wrapper as the drop target so the hit area
+    // includes the padding (where the cursor actually is during drags)
+    const dropElement =
+      (block.closest(".section-wrapper") as HTMLElement) ?? block;
+
+    const cleanupDraggable = draggable({
+      element: dropElement,
+      dragHandle: handle,
+      getInitialData: () => ({ dragType: "section", sectionId, index }),
+      onGenerateDragPreview: () => {
+        dropElement.style.opacity = "0.4";
+        requestAnimationFrame(() => {
+          dropElement.style.opacity = "";
+        });
+      },
+      onDragStart: () => {
+        setIsDragging(true);
+        setIsActive(true);
+      },
+      onDrop: () => {
+        setIsDragging(false);
+        setIsActive(false);
+      },
+    });
+
+    const cleanupDropTarget = dropTargetForElements({
+      element: dropElement,
+      canDrop: ({ source }) => source.data.dragType === "section",
+      getData: ({ input, element }) =>
+        attachClosestEdge(
+          { sectionId, index },
+          { input, element, allowedEdges: ["top", "bottom"] },
+        ),
+      onDragEnter: ({ self }) => {
+        setClosestEdge(extractClosestEdge(self.data));
+      },
+      onDrag: ({ self }) => {
+        setClosestEdge(extractClosestEdge(self.data));
+      },
+      onDragLeave: () => {
+        setClosestEdge(null);
+      },
+      onDrop: ({ source, self }) => {
+        setClosestEdge(null);
+        const fromIndex = source.data.index as number;
+        const edge = extractClosestEdge(self.data);
+        let toIndex = index;
+        if (edge === "bottom") toIndex = index + 1;
+        if (fromIndex < toIndex) toIndex--;
+        if (fromIndex !== toIndex) {
+          onReorder(fromIndex, toIndex);
+        }
+      },
+    });
+
+    return () => {
+      cleanupDraggable();
+      cleanupDropTarget();
+    };
+  }, [sectionId, index, onReorder]);
+
+  function handleSettingsClick() {
+    if (!onSectionChange) return;
+
+    if (definition.settingsForm) {
+      const CustomForm = definition.settingsForm;
+      openModal(
+        `${definition.label} Settings`,
+        <CustomForm
+          {...(options ?? {})}
+          onChange={(values: Record<string, unknown>) => onSectionChange({ content: {}, options: values })}
+        />,
+      );
+    } else if (definition.settings) {
+      openModal(
+        `${definition.label} Settings`,
+        <SettingsForm
+          schema={definition.settings}
+          values={options ?? {}}
+          onChange={(result) => onSectionChange(result as unknown as Record<string, unknown>)}
+        />,
+      );
+    }
+  }
+
+  if (!isEditMode) {
+    if (status && status !== "published") {
+      return (
+        <div
+          className="relative"
+          data-section-id={sectionId}
+          data-section-type={sectionType}
+        >
+          <div className="pointer-events-none absolute right-0 bottom-full z-30 mb-1">
+            <StatusBadge status={status} dirty={dirty} />
+          </div>
+          {children}
+        </div>
+      );
+    }
+    return <>{children}</>;
+  }
+
+  // Chrome visible via: showAllChrome toggle, parent SectionLayout hover (group-hover), or focus within
+  const alwaysShow = showAllChrome || isActive;
+
+  return (
+    <div
+      ref={blockRef}
+      className={cn(
+        "relative",
+        isDragging && "opacity-50",
+        isActive && "outline outline-2 outline-primary/50 rounded-sm",
+        !isActive &&
+          showAllChrome &&
+          "outline outline-2 outline-primary/20 rounded-sm",
+        !alwaysShow &&
+          "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-sm",
+      )}
+      data-section-id={sectionId}
+      data-section-type={sectionType}
+    >
+      {/* Plus button — left padding gutter */}
+      {onRequestInsert && !isDragging && chromeReady && (
+        <div
+          className={cn(
+            "absolute -left-16 bottom-full z-30 mb-1 transition-opacity",
+            alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          )}
+        >
+          <InsertButton index={index} onInsert={onRequestInsert} />
+        </div>
+      )}
+
+      {/* Drag handle + section label — handle just left of section edge, label at edge */}
+      <div
+        className={cn(
+          "absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity",
+          alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+        )}
+      >
+        <DragHandle ref={handleRef} />
+        <span className="pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80">
+          {definition.label}
+        </span>
+      </div>
+
+      {/* Status + settings + delete — top-right, above content */}
+      <div
+        className={cn(
+          "pointer-events-none absolute right-0 bottom-full z-30 mb-1 flex items-center gap-2 transition-opacity",
+          alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+        )}
+      >
+        <div className="pointer-events-auto">
+          <AudiencePicker
+            access={access}
+            audiences={audiences}
+            onChange={(newAccess) => onAccessChange?.(newAccess)}
+          />
+        </div>
+        <div className="pointer-events-auto">
+          <StatusPicker
+            status={status as "draft" | "published" | "archived"}
+            dirty={dirty}
+            onChange={(s) => onStatusChange?.(s)}
+          />
+        </div>
+
+        {hasSettings && (
+          <SettingsButton onClick={handleSettingsClick} />
+        )}
+
+        {onDelete && <DeleteButton onDelete={onDelete} />}
+      </div>
+
+      {/* Drop indicator — centered in the section's own padding-top */}
+      {closestEdge === "top" && (
+        <div
+          className="absolute right-0 left-0 z-10 h-0.5 bg-primary"
+          style={{
+            top: "calc(var(--section-gap) / 2 * -1)",
+            transform: "translateY(-50%)",
+          }}
+        />
+      )}
+      {closestEdge === "bottom" && isLast && (
+        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-primary" />
+      )}
+
+      {children}
+    </div>
+  );
+}

package/src/components/editor/SettingsButton.tsx

@@ -0,0 +1,17 @@
+import { SettingsIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+
+interface SettingsButtonProps {
+  onClick: () => void;
+}
+
+export function SettingsButton({ onClick }: SettingsButtonProps) {
+  return (
+    <IconButton
+      icon={<SettingsIcon size={16} />}
+      label="Section settings"
+      onClick={onClick}
+      className="pointer-events-auto"
+    />
+  );
+}

package/src/components/editor/SettingsForm.tsx

@@ -0,0 +1,159 @@
+import { useId, useState } from "react";
+import type { SettingsSchema, SettingsFieldDef } from "../../lib/registry";
+import { Input } from "../shared/Input";
+import { Select } from "../shared/Select";
+import { Checkbox } from "../shared/Checkbox";
+import { FormLabel } from "../shared/FormLabel";
+import { cn } from "../../lib/cn";
+
+export interface SettingsFormResult {
+  content: Record<string, unknown>;
+  options: Record<string, unknown>;
+}
+
+interface SettingsFormProps {
+  schema: SettingsSchema;
+  values: Record<string, unknown>;
+  onChange: (result: SettingsFormResult) => void;
+}
+
+function resolveValues(
+  schema: SettingsSchema,
+  values: Record<string, unknown>,
+): Record<string, unknown> {
+  const resolved: Record<string, unknown> = {};
+  for (const [key, field] of Object.entries(schema)) {
+    resolved[key] = values[key] ?? field.default;
+  }
+  return resolved;
+}
+
+function coerceValue(field: SettingsFieldDef, value: unknown): unknown {
+  if (field.type === "select" && "coerce" in field && field.coerce === "number") {
+    return Number(value);
+  }
+  return value;
+}
+
+function splitByTarget(
+  schema: SettingsSchema,
+  allValues: Record<string, unknown>,
+): SettingsFormResult {
+  const content: Record<string, unknown> = {};
+  const options: Record<string, unknown> = {};
+  for (const [key, field] of Object.entries(schema)) {
+    const value = coerceValue(field, allValues[key]);
+    const target = field.target ?? "options";
+    if (target === "content") {
+      content[key] = value;
+    } else {
+      options[key] = value;
+    }
+  }
+  return { content, options };
+}
+
+function RangeField({
+  field,
+  value,
+  onChange,
+}: {
+  field: Extract<SettingsFieldDef, { type: "range" }>;
+  value: number;
+  onChange: (value: number) => void;
+}) {
+  const id = useId();
+  return (
+    <div>
+      <FormLabel htmlFor={id}>{field.label}</FormLabel>
+      <input
+        id={id}
+        type="range"
+        min={field.min}
+        max={field.max}
+        step={field.step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className={cn(
+          "w-full accent-primary",
+        )}
+      />
+    </div>
+  );
+}
+
+export function SettingsForm({ schema, values, onChange }: SettingsFormProps) {
+  const [local, setLocal] = useState(() => resolveValues(schema, values));
+
+  function handleFieldChange(key: string, newValue: unknown) {
+    const next = { ...local, [key]: newValue };
+    setLocal(next);
+    onChange(splitByTarget(schema, next));
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {Object.entries(schema).map(([key, field]) => {
+        const value = local[key];
+
+        switch (field.type) {
+          case "text":
+            return (
+              <Input
+                key={key}
+                label={field.label}
+                value={String(value ?? "")}
+                placeholder={field.placeholder}
+                onChange={(v) => handleFieldChange(key, v)}
+              />
+            );
+
+          case "number":
+            return (
+              <Input
+                key={key}
+                label={field.label}
+                type="number"
+                value={String(value ?? "")}
+                onChange={(v) => handleFieldChange(key, v === "" ? "" : Number(v))}
+              />
+            );
+
+          case "checkbox":
+            return (
+              <Checkbox
+                key={key}
+                label={field.label}
+                checked={Boolean(value)}
+                onChange={(checked) => handleFieldChange(key, checked)}
+              />
+            );
+
+          case "select":
+            return (
+              <Select
+                key={key}
+                label={field.label}
+                value={String(value ?? "")}
+                options={field.options}
+                onChange={(v) => handleFieldChange(key, v)}
+              />
+            );
+
+          case "range":
+            return (
+              <RangeField
+                key={key}
+                field={field}
+                value={Number(value ?? field.min)}
+                onChange={(v) => handleFieldChange(key, v)}
+              />
+            );
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

package/src/components/editor/StatusBadge.tsx

@@ -0,0 +1,30 @@
+import { cn } from "../../lib/cn";
+
+type Status = "published" | "draft" | "archived";
+
+interface StatusBadgeProps {
+  status: string;
+  dirty?: boolean;
+}
+
+const statusClasses: Record<Status, string> = {
+  published: "bg-status-published-bg text-status-published-text",
+  draft: "bg-status-draft-bg text-status-draft-text",
+  archived: "bg-status-archived-bg text-status-archived-text",
+};
+
+export function StatusBadge({ status, dirty }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "rounded-full px-2 py-0.5 text-xs font-medium",
+        statusClasses[status as Status] ?? statusClasses.archived,
+      )}
+    >
+      {status}
+      {dirty && (
+        <span className="ml-1 opacity-70">· Unsaved</span>
+      )}
+    </span>
+  );
+}

package/src/components/editor/StatusPicker.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+
+type Status = "draft" | "published" | "archived";
+
+interface Props {
+  status: Status;
+  dirty?: boolean;
+  onChange: (status: Status) => void;
+}
+
+const STATUSES: Status[] = ["draft", "published", "archived"];
+
+const statusClasses: Record<Status, string> = {
+  published: "bg-status-published-bg text-status-published-text",
+  draft: "bg-status-draft-bg text-status-draft-text",
+  archived: "bg-status-archived-bg text-status-archived-text",
+};
+
+const dotClasses: Record<Status, string> = {
+  published: "bg-status-published-bg",
+  draft: "bg-status-draft-bg",
+  archived: "bg-status-archived-bg",
+};
+
+export function StatusPicker({ status, dirty, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  function handleSelect(next: Status) {
+    if (next !== status) onChange(next);
+    setOpen(false);
+  }
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="true"
+        aria-expanded={open}
+        className={cn(
+          "cursor-pointer rounded-full px-2 py-0.5 text-xs font-medium",
+          statusClasses[status] ?? statusClasses.archived,
+        )}
+      >
+        {status}
+        {dirty && <span className="ml-1 opacity-70">· Unsaved</span>}
+      </button>
+
+      <Popover
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        anchorRef={buttonRef}
+        align="end"
+        className="w-44"
+      >
+        <ul role="radiogroup" aria-label="Section status" className="py-1">
+          {STATUSES.map((s) => {
+            const checked = s === status;
+            return (
+              <li key={s}>
+                <PopoverItem
+                  role="radio"
+                  aria-checked={checked}
+                  onClick={() => handleSelect(s)}
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotClasses[s])}
+                  />
+                  <span className="flex-1 text-sm font-medium capitalize text-base-contrast">{s}</span>
+                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
+                </PopoverItem>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    </div>
+  );
+}

package/src/components/editor/index.ts

@@ -0,0 +1,7 @@
+export { DragHandle } from "./DragHandle";
+export { InsertButton } from "./InsertButton";
+export { DeleteButton } from "./DeleteButton";
+export { SettingsButton } from "./SettingsButton";
+export { SettingsForm } from "./SettingsForm";
+export { StatusBadge } from "./StatusBadge";
+export { SectionWrapper } from "./SectionWrapper";

package/src/components/primitives/CustomParagraph.ts

@@ -0,0 +1,25 @@
+import Paragraph from "@tiptap/extension-paragraph";
+
+const ALLOWED_CLASSES = ["large", "lead-in"] as const;
+
+export const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      class: {
+        default: null,
+        parseHTML: (element: HTMLElement) => {
+          const cls = element.getAttribute("class");
+          if (cls && (ALLOWED_CLASSES as readonly string[]).includes(cls)) {
+            return cls;
+          }
+          return null;
+        },
+        renderHTML: (attributes: Record<string, unknown>) => {
+          if (!attributes.class) return {};
+          return { class: attributes.class };
+        },
+      },
+    };
+  },
+});