@drawnagency/primitives 0.1.49 → 0.1.50

package/src/components/editor/PagesModal.tsx

@@ -0,0 +1,392 @@
+import { useState, useEffect, useRef } from "react";
+import { Check } from "lucide-react";
+import type { SiteIndex, Page } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+import { Button } from "../shared/Button";
+import { Input } from "../shared/Input";
+import { Checkbox } from "../shared/Checkbox";
+import { AudienceIndicator } from "./AudienceIndicator";
+import { DragHandle } from "./DragHandle";
+import { slugifyPageSlug, uniquePageSlug, pageDisplayTitle } from "../../lib/pages";
+import { RESERVED_SLUGS } from "../../schemas/site-config";
+import { cn } from "../../lib/cn";
+
+export interface PagesModalProps {
+  index: SiteIndex;
+  audiences: Audience[];
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  /** Creates the page and returns its id so the modal can expand the new row. */
+  onAddPage: () => string;
+  onSetHome: (pageId: string) => void;
+  onSetArchived: (pageId: string, archived: boolean) => void;
+  onSetFields: (pageId: string, patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
+  onSetAudience: (pageId: string, access: string[]) => void;
+  onConfirmDelete: (pageId: string) => void;
+  /** Navigate the editor to this page (the shell also closes the modal). */
+  onNavigate: (pageId: string) => void;
+}
+
+export function PagesModal(props: PagesModalProps) {
+  const { index, audiences } = props;
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  // The page created via "+ Add page" this session: its title gets auto-focus and
+  // its slug follows the title until the user edits the slug by hand.
+  const [newPageId, setNewPageId] = useState<string | null>(null);
+
+  if (deletingId) {
+    const page = index.pages.find((p) => p.id === deletingId);
+    if (page) return <DeleteConfirm page={page} onCancel={() => setDeletingId(null)} onConfirm={() => { props.onConfirmDelete(page.id); setDeletingId(null); }} />;
+  }
+
+  const live = index.pages.filter((p) => p.status === "live");
+  const archived = index.pages.filter((p) => p.status === "archived");
+
+  // Collapsing the new row — or expanding any other — ends its "new page"
+  // editing session (auto-focus + slug-follows-title).
+  const toggleExpand = (pageId: string) => {
+    const next = expandedId === pageId ? null : pageId;
+    setExpandedId(next);
+    if (newPageId !== null && next !== newPageId) setNewPageId(null);
+  };
+
+  const renderPage = (page: Page, dragIndex?: number) => (
+    <PageRow
+      key={page.id}
+      page={page}
+      audiences={audiences}
+      expanded={expandedId === page.id}
+      isNew={newPageId === page.id}
+      otherSlugs={index.pages.filter((p) => p.id !== page.id).map((p) => p.slug)}
+      dragIndex={dragIndex}
+      onReorder={props.onReorder}
+      onToggleExpand={() => toggleExpand(page.id)}
+      onNavigate={() => props.onNavigate(page.id)}
+      onSetHome={() => props.onSetHome(page.id)}
+      onSetArchived={(v) => {
+        // Archiving/restoring remounts the row in its new group, so end the
+        // "new page" session — its blank-draft state must not survive the move.
+        if (newPageId === page.id) setNewPageId(null);
+        props.onSetArchived(page.id, v);
+      }}
+      onSetFields={(patch) => props.onSetFields(page.id, patch)}
+      onSetAudience={(access) => props.onSetAudience(page.id, access)}
+      onRequestDelete={() =>
+        page.order.length === 0 ? props.onConfirmDelete(page.id) : setDeletingId(page.id)
+      }
+    />
+  );
+
+  return (
+    <div className="flex flex-col gap-2 overflow-y-auto">
+      <div className="flex flex-col gap-2">
+        {live.map((page) => renderPage(page, index.pages.indexOf(page)))}
+      </div>
+      <Button
+        variant="secondary"
+        size="md"
+        onClick={() => {
+          const id = props.onAddPage();
+          setNewPageId(id);
+          setExpandedId(id);
+        }}
+        className="mt-2 self-start"
+      >
+        + Add page
+      </Button>
+      {archived.length > 0 && (
+        <div className="mt-4 border-t border-base-200 pt-3">
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-base-contrast/70">Archive</p>
+          <div className="flex flex-col gap-2">{archived.map((page) => renderPage(page))}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PageRow({
+  page, audiences, expanded, isNew, otherSlugs, dragIndex, onReorder, onToggleExpand, onNavigate, onSetHome, onSetArchived, onSetFields, onSetAudience, onRequestDelete,
+}: {
+  page: Page; audiences: Audience[]; expanded: boolean;
+  isNew: boolean; otherSlugs: string[];
+  dragIndex?: number; onReorder: (fromIndex: number, toIndex: number) => void;
+  onToggleExpand: () => void; onNavigate: () => void; onSetHome: () => void; onSetArchived: (v: boolean) => void;
+  onSetFields: (patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>) => void;
+  onSetAudience: (access: string[]) => void; onRequestDelete: () => void;
+}) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<"top" | "bottom" | null>(null);
+  const draggable = dragIndex !== undefined;
+
+  // The slug input edits a local draft; only valid values commit to the index,
+  // which must always hold a non-empty, unique, non-reserved slug.
+  // Blank draft only while the new page has no title yet; once a slug has been
+  // committed it must survive row remounts (e.g. moving between nav groups).
+  const [slugDraft, setSlugDraft] = useState(isNew && !page.title ? "" : page.slug);
+  const [autoSlug, setAutoSlug] = useState(isNew);
+  const [titleDirty, setTitleDirty] = useState(false);
+  const [slugDirty, setSlugDirty] = useState(false);
+  const [showErrors, setShowErrors] = useState(false);
+
+  useEffect(() => {
+    if (!expanded) return;
+    setSlugDraft(isNew && !page.title ? "" : page.slug);
+    setAutoSlug(isNew);
+    setTitleDirty(false);
+    setSlugDirty(false);
+    setShowErrors(false);
+    // Reset editing state each time the row expands; page.slug is read at that moment.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expanded]);
+
+  const committedSlug = slugifyPageSlug(slugDraft);
+  const titleError = page.title.trim() === "" ? "Title is required." : null;
+  const slugError = page.isHome
+    ? null
+    : committedSlug === ""
+      ? "Slug is required."
+      : (RESERVED_SLUGS as readonly string[]).includes(committedSlug)
+        ? `"${committedSlug}" is a reserved URL.`
+        : otherSlugs.includes(committedSlug)
+          ? "Another page already uses this slug."
+          : null;
+
+  const handleTitleChange = (title: string) => {
+    setTitleDirty(true);
+    if (autoSlug && !page.isHome) {
+      const base = slugifyPageSlug(title);
+      if (base !== "") {
+        const slug = uniquePageSlug(base, otherSlugs);
+        setSlugDraft(slug);
+        onSetFields({ title, slug });
+        return;
+      }
+      setSlugDraft("");
+    }
+    onSetFields({ title });
+  };
+
+  const handleSlugChange = (raw: string) => {
+    setSlugDirty(true);
+    setAutoSlug(false);
+    // Normalize for typing but keep a trailing hyphen so "my-page" can be typed.
+    const draft = raw.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/-{2,}/g, "-").replace(/^-+/, "");
+    setSlugDraft(draft);
+    const slug = slugifyPageSlug(draft);
+    if (
+      slug !== "" &&
+      !(RESERVED_SLUGS as readonly string[]).includes(slug) &&
+      !otherSlugs.includes(slug)
+    ) {
+      onSetFields({ slug });
+    }
+  };
+
+  const handleHeaderClick = () => {
+    if (expanded && (titleError || slugError)) {
+      setShowErrors(true);
+      return;
+    }
+    onToggleExpand();
+  };
+
+  useEffect(() => {
+    if (dragIndex === undefined) return;
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+
+      const cleanupDraggable = draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ dragType: "page-ordering-row", index: dragIndex }),
+        onGenerateDragPreview: () => {
+          row.style.opacity = "0.4";
+          requestAnimationFrame(() => {
+            row.style.opacity = "";
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      });
+
+      const cleanupDropTarget = dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) => source.data.dragType === "page-ordering-row",
+        getData: ({ input, element }) =>
+          attachClosestEdge({ index: dragIndex }, { input, element, allowedEdges: ["top", "bottom"] }),
+        onDragEnter: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDrag: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const fromIndex = source.data.index as number;
+          const edge = extractClosestEdge(self.data);
+          let toIndex = dragIndex;
+          if (edge === "bottom") toIndex = dragIndex + 1;
+          if (fromIndex < toIndex) toIndex--;
+          if (fromIndex !== toIndex) {
+            onReorder(fromIndex, toIndex);
+          }
+        },
+      });
+
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [dragIndex, onReorder]);
+
+  return (
+    <div
+      ref={rowRef}
+      className={cn("relative rounded-md border border-base-200", isDragging && "opacity-50")}
+    >
+      {closestEdge === "top" && (
+        <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />
+      )}
+      {closestEdge === "bottom" && (
+        <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />
+      )}
+      <div className="flex items-center gap-2 px-3 py-2">
+        {draggable && (
+          <div className="shrink-0 [&_[role=tooltip]]:hidden">
+            <DragHandle ref={handleRef} />
+          </div>
+        )}
+        <button
+          type="button"
+          aria-label={`Go to ${pageDisplayTitle(page.title)}`}
+          onClick={onNavigate}
+          className="group min-w-0 flex-1 cursor-pointer text-left"
+        >
+          <div className="flex items-center gap-2">
+            <span className={cn("truncate text-sm font-medium text-base-contrast transition-colors group-hover:text-primary", !page.title && "italic text-base-contrast/60")}>
+              {pageDisplayTitle(page.title)}
+            </span>
+            {page.isHome && <span className="rounded bg-primary px-1.5 py-0.5 text-xs font-medium text-primary-contrast">Home page</span>}
+            {!page.showInNav && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Hidden</span>}
+            {page.status === "archived" && <span className="rounded bg-base-100 px-1.5 py-0.5 text-xs font-medium text-base-contrast">Archived</span>}
+          </div>
+          <div className="text-xs text-base-contrast/70 transition-colors group-hover:text-primary">{page.isHome ? "/" : `/${page.slug}`}</div>
+        </button>
+        <button
+          type="button"
+          aria-label={`Edit settings for ${pageDisplayTitle(page.title)}`}
+          onClick={handleHeaderClick}
+          className="cursor-pointer rounded px-2 py-1 text-sm text-base-contrast/70 hover:text-primary"
+        >
+          {expanded ? "Done" : "Edit"}
+        </button>
+      </div>
+
+      {expanded && (
+        <div className="flex flex-col gap-3 border-t border-base-200 px-3 py-3">
+          <Input
+            label="Title"
+            value={page.title}
+            placeholder="Page title"
+            autoFocus={isNew}
+            error={(titleDirty || showErrors) && titleError ? titleError : undefined}
+            onChange={handleTitleChange}
+          />
+          {!page.isHome && (
+            <Input
+              label="Slug"
+              value={slugDraft}
+              placeholder="page-url"
+              error={(slugDirty || showErrors) && slugError ? slugError : undefined}
+              onChange={handleSlugChange}
+            />
+          )}
+          <Checkbox label="Show in nav" align="center" checked={page.showInNav} onChange={(v) => onSetFields({ showInNav: v })} />
+          <div>
+            <label className="mb-1 block text-sm text-base-contrast">Audience</label>
+            <AudienceIndicator access={page.access} audiences={audiences} onChange={onSetAudience} />
+            {page.access.length === 0 && (
+              <p className="mt-1 text-xs text-base-contrast/70">
+                Viewers see this page; sections still apply their own audience rules.
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={page.isHome}
+              onClick={onSetHome}
+              className={cn(
+                page.isHome &&
+                  "cursor-default gap-1 border-primary bg-primary text-primary-contrast opacity-100 hover:bg-primary hover:opacity-90",
+              )}
+            >
+              {page.isHome && <Check size={12} strokeWidth={3} aria-hidden="true" />}
+              {page.isHome ? "Home page" : "Set as home"}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={page.isHome}
+              onClick={() => onSetArchived(page.status !== "archived")}
+              aria-label={page.status === "archived" ? "Restore" : "Archive"}
+            >
+              {page.status === "archived" ? "Restore" : "Archive"}
+            </Button>
+            <Button variant="destructive" size="sm" disabled={page.isHome} aria-label="Delete page" onClick={onRequestDelete} className="ml-auto">
+              Delete
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DeleteConfirm({ page, onCancel, onConfirm }: { page: Page; onCancel: () => void; onConfirm: () => void }) {
+  const [typed, setTyped] = useState("");
+  const n = page.order.length;
+  // Compare against the display title: a blank title must not leave the
+  // type-the-name guard pre-satisfied ("" === "").
+  const confirmName = pageDisplayTitle(page.title);
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sm text-base-contrast">
+        Deleting <strong>{confirmName}</strong> permanently removes the page and its{" "}
+        <strong>{n} section{n === 1 ? "" : "s"}</strong>. This is recoverable only via GitHub version history.
+      </p>
+      <Input
+        label={`Type the page name "${confirmName}" to confirm`}
+        value={typed}
+        onChange={setTyped}
+        placeholder={confirmName}
+      />
+      <div className="flex justify-end gap-3">
+        <Button variant="secondary" size="md" onClick={onCancel}>Cancel</Button>
+        <Button variant="destructive" size="md" disabled={typed !== confirmName} onClick={onConfirm}>Delete</Button>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/SectionWrapper.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from "react";
+import { ArrowRightLeft } from "lucide-react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { DragHandle } from "./DragHandle";
 import { InsertButton } from "./InsertButton";
@@ -29,6 +30,7 @@ export function SectionWrapper({
   onReorder,
   onRequestInsert,
   onDelete,
+  onMoveSection,
   mainStatus,
   contentDiffersFromMain,
   isLocalOnly,
@@ -286,6 +288,17 @@ export function SectionWrapper({
           <SettingsButton onClick={handleSettingsClick} />
         )}
 
+        {onMoveSection && (
+          <button
+            type="button"
+            onClick={onMoveSection}
+            aria-label="Move to page"
+            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
+          >
+            <ArrowRightLeft size={16} />
+          </button>
+        )}
+
         {onDelete && <DeleteButton onDelete={onDelete} />}
       </div>
 

package/src/components/editor/SettingsForm.tsx

@@ -4,6 +4,8 @@ import { Input } from "../shared/Input";
 import { Select } from "../shared/Select";
 import { Checkbox } from "../shared/Checkbox";
 import { FormLabel } from "../shared/FormLabel";
+import { LinkField } from "../shared/LinkField";
+import type { LinkValue } from "../../schemas/link";
 import { cn } from "../../lib/cn";
 
 export interface SettingsFormResult {
@@ -150,6 +152,16 @@ export function SettingsForm({ schema, values, onChange }: SettingsFormProps) {
               />
             );
 
+          case "link":
+            return (
+              <LinkField
+                key={key}
+                label={field.label}
+                value={(value as LinkValue) ?? field.default}
+                onChange={(v) => handleFieldChange(key, v)}
+              />
+            );
+
           default:
             return null;
         }

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

@@ -2,16 +2,16 @@ import { cn } from "../../../lib/cn";
 import { Download } from "lucide-react";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import type { SectionContent } from "../../../schemas/sections";
+import type { LinkValue } from "../../../schemas/link";
 
 interface Props {
   text: string;
-  href?: string;
-  target?: string;
+  link?: LinkValue;
   download?: boolean;
   onChange?: (content: SectionContent) => void;
 }
 
-export default function Button({ text, href, target, download, onChange }: Props) {
+export default function Button({ text, link, download, onChange }: Props) {
   const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
   const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
 
@@ -23,10 +23,7 @@ export default function Button({ text, href, target, download, onChange }: Props
           tag="span"
           value={text}
           onChange={(newText) =>
-            onChange({
-              type: "button",
-              content: { text: newText, href, target, download },
-            })
+            onChange({ type: "button", content: { text: newText, link, download } })
           }
           isEditMode={true}
           placeholder="Button text"
@@ -35,16 +32,18 @@ export default function Button({ text, href, target, download, onChange }: Props
     );
   }
 
+  // Viewer: links are resolved to { kind: "external", href, target } upstream.
+  const href = link && link.kind === "external" ? link.href : "";
+  const target = link?.target;
   if (href) {
     return (
-      <a href={href} target={target} download={download ? "" : undefined} className={cn(base, variant, download && "inline-flex items-center gap-2")}>
+      <a href={href} target={target} download={download ? "" : undefined}
+        className={cn(base, variant, download && "inline-flex items-center gap-2")}>
         {download && <Download size={16} className="shrink-0" />}
         {text}
       </a>
     );
   }
 
-  return (
-    <button className={cn("cursor-pointer", base, variant)}>{text}</button>
-  );
+  return <button className={cn("cursor-pointer", base, variant)}>{text}</button>;
 }

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

@@ -1,14 +1,14 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
 import { RectangleHorizontal } from "lucide-react";
+import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
 import CTAButton from "./CTAButton";
 
 const schema = z.object({
   type: z.literal("button"),
   content: z.object({
     text: z.string(),
-    href: z.string().optional(),
-    target: z.string().optional(),
+    link: LinkValueSchema.optional(),
     download: z.boolean().optional(),
   }),
 });
@@ -21,8 +21,7 @@ export default defineSection({
   component: ({ content, onChange }) => (
     <CTAButton
       text={content.content.text}
-      href={content.content.href}
-      target={content.content.target}
+      link={content.content.link}
       download={content.content.download}
       onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
     />
@@ -30,11 +29,7 @@ export default defineSection({
   defaults: () => ({ type: "button" as const, content: { text: "Button" } }),
   getLabel: (content) => content.content.text,
   settings: {
-    href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
-    target: {
-      type: "select", label: "Target", default: "_self", target: "content",
-      options: [{ label: "Same tab (_self)", value: "_self" }, { label: "New tab (_blank)", value: "_blank" }],
-    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
     download: { type: "checkbox", label: "Download link", default: false, target: "content" },
   },
 });

package/src/components/shared/Input.tsx

@@ -5,13 +5,15 @@ import { FormLabel } from "./FormLabel";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   label: string;
   onChange: (value: string) => void;
+  error?: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, value, onChange, type = "text", className, disabled, ...rest },
+  { label, value, onChange, type = "text", className, disabled, error, ...rest },
   ref,
 ) {
   const id = useId();
+  const errorId = `${id}-error`;
   return (
     <div className={className}>
       <FormLabel htmlFor={id}>{label}</FormLabel>
@@ -22,13 +24,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         value={value}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={error ? errorId : undefined}
         className={cn(
-          "w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast",
-          "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast",
+          "w-full rounded border bg-base px-3 py-2 text-sm text-base-contrast focus:outline-none focus:ring-1",
+          error
+            ? "border-red-600 focus:border-red-600 focus:ring-red-600"
+            : "border-base-200 focus:border-base-contrast focus:ring-base-contrast",
           disabled && "cursor-not-allowed opacity-50",
         )}
         {...rest}
       />
+      {error && (
+        <p id={errorId} className="mt-1 text-xs text-red-600">
+          {error}
+        </p>
+      )}
     </div>
   );
 });

package/src/components/shared/LinkField.tsx

@@ -0,0 +1,87 @@
+import { FormLabel } from "./FormLabel";
+import { Input } from "./Input";
+import { Select } from "./Select";
+import { usePages } from "./PagesContext";
+import type { LinkValue } from "../../schemas/link";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  label: string;
+  value: LinkValue;
+  onChange: (value: LinkValue) => void;
+}
+
+const TARGET_OPTIONS = [
+  { label: "Same tab (_self)", value: "_self" },
+  { label: "New tab (_blank)", value: "_blank" },
+];
+
+export function LinkField({ label, value, onChange }: Props) {
+  const { pages, getPageHeadings } = usePages();
+  const isInternal = value.kind === "internal";
+
+  function setMode(kind: "external" | "internal") {
+    if (kind === value.kind) return;
+    onChange(kind === "external"
+      ? { kind: "external", href: "", target: value.target }
+      : { kind: "internal", pageId: "", anchorSectionId: null, target: value.target });
+  }
+
+  const pageId = isInternal ? value.pageId : "";
+  const headings = pageId ? getPageHeadings(pageId) : [];
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FormLabel>{label}</FormLabel>
+      <div className="flex gap-2" role="tablist">
+        {(["external", "internal"] as const).map((kind) => (
+          <button
+            key={kind}
+            type="button"
+            role="tab"
+            aria-selected={value.kind === kind}
+            onClick={() => setMode(kind)}
+            className={cn(
+              "cursor-pointer rounded border px-3 py-1 text-sm capitalize",
+              value.kind === kind ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+            )}
+          >
+            {kind === "external" ? "External URL" : "Internal page"}
+          </button>
+        ))}
+      </div>
+
+      {value.kind === "external" ? (
+        <Input
+          label="URL"
+          value={value.href}
+          placeholder="https://..."
+          onChange={(href) => onChange({ kind: "external", href, target: value.target })}
+        />
+      ) : (
+        <>
+          <Select
+            label="Page"
+            value={value.pageId}
+            options={[{ label: "Select a page…", value: "" }, ...pages.map((p) => ({ label: p.title, value: p.id }))]}
+            onChange={(pid) => onChange({ kind: "internal", pageId: pid, anchorSectionId: null, target: value.target })}
+          />
+          <Select
+            label="Section"
+            value={value.anchorSectionId ?? ""}
+            disabled={!pageId}
+            options={[{ label: "None (top of page)", value: "" }, ...headings.map((h) => ({ label: h.label, value: h.id }))]}
+            onChange={(anchor) => onChange({ kind: "internal", pageId, anchorSectionId: anchor || null, target: value.target })}
+          />
+        </>
+      )}
+
+      <Select
+        label="Opens in"
+        value={value.target}
+        options={TARGET_OPTIONS}
+        onChange={(t) => onChange({ ...value, target: t as "_self" | "_blank" })}
+      />
+    </div>
+  );
+}