@drawnagency/primitives 0.1.49 → 0.1.51

package/src/components/editor/PagesModal.tsx

@@ -0,0 +1,400 @@
+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}
+            />
+          )}
+          <div className="flex items-start justify-between gap-4">
+            <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>
+            <Checkbox
+              label="Hide from Menu"
+              align="center"
+              checked={!page.showInNav}
+              onChange={(hidden) => onSetFields({ showInNav: !hidden })}
+              className="shrink-0"
+            />
+          </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/primitives/LinkPopover.tsx

@@ -1,27 +1,44 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import type { Editor } from "@tiptap/core";
 import { Button } from "../shared/Button";
+import { usePages } from "../shared/PagesContext";
+import { internalHref, parseInternalHref } from "../../lib/links";
+import { cn } from "../../lib/cn";
 
 interface LinkPopoverProps {
   editor: Editor;
   onClose: () => void;
 }
 
+const selectClasses =
+  "w-full rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:ring-1 focus:ring-primary";
+
 export function LinkPopover({ editor, onClose }: LinkPopoverProps) {
+  const { pages, getPageHeadings } = usePages();
   const existingAttrs = editor.getAttributes("link");
-  const [url, setUrl] = useState<string>(existingAttrs.href ?? "");
+  const existingInternal = parseInternalHref(existingAttrs.href ?? "");
+
+  const [mode, setMode] = useState<"external" | "internal">(existingInternal ? "internal" : "external");
+  const [url, setUrl] = useState<string>(existingInternal ? "" : existingAttrs.href ?? "");
+  const [pageId, setPageId] = useState<string>(existingInternal?.pageId ?? "");
+  const [anchorId, setAnchorId] = useState<string>(existingInternal?.anchorSectionId ?? "");
   const [openInNewTab, setOpenInNewTab] = useState<boolean>(
     existingAttrs.target === "_blank"
   );
-  const inputRef = useRef<HTMLInputElement>(null);
   const hasLink = Boolean(existingAttrs.href);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
+  const headings = pageId ? getPageHeadings(pageId) : [];
 
   const handleApply = () => {
-    if (url.trim()) {
+    if (mode === "internal") {
+      if (pageId) {
+        editor
+          .chain()
+          .focus()
+          .extendMarkRange("link")
+          .setLink({ href: internalHref(pageId, anchorId || null), target: null })
+          .run();
+      }
+    } else if (url.trim()) {
       editor
         .chain()
         .focus()
@@ -49,27 +66,82 @@ export function LinkPopover({ editor, onClose }: LinkPopoverProps) {
 
   return (
     <div
-      className="flex flex-col gap-2 rounded bg-base-accent p-3 shadow-lg"
+      className="flex w-64 flex-col gap-2 rounded bg-base-accent p-3 shadow-lg"
       onMouseDown={(e) => e.stopPropagation()}
+      onKeyDown={handleKeyDown}
     >
-      <input
-        ref={inputRef}
-        type="url"
-        value={url}
-        onChange={(e) => setUrl(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="https://example.com"
-        className="rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary"
-      />
-      <label className="flex cursor-pointer items-center gap-2 text-sm text-base-contrast">
-        <input
-          type="checkbox"
-          checked={openInNewTab}
-          onChange={(e) => setOpenInNewTab(e.target.checked)}
-          className="accent-primary"
-        />
-        Open in new tab
-      </label>
+      <div className="flex gap-2" role="tablist">
+        {(["external", "internal"] as const).map((kind) => (
+          <button
+            key={kind}
+            type="button"
+            role="tab"
+            aria-selected={mode === kind}
+            onClick={() => setMode(kind)}
+            className={cn(
+              "cursor-pointer rounded border px-2 py-0.5 text-xs",
+              mode === kind
+                ? "border-primary bg-primary text-primary-contrast"
+                : "border-base-200 text-base-contrast",
+            )}
+          >
+            {kind === "external" ? "External URL" : "Internal page"}
+          </button>
+        ))}
+      </div>
+
+      {mode === "external" ? (
+        <>
+          <input
+            autoFocus
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://example.com"
+            className="rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+          <label className="flex cursor-pointer items-center gap-2 text-sm text-base-contrast">
+            <input
+              type="checkbox"
+              checked={openInNewTab}
+              onChange={(e) => setOpenInNewTab(e.target.checked)}
+              className="accent-primary"
+            />
+            Open in new tab
+          </label>
+        </>
+      ) : (
+        <>
+          <select
+            autoFocus
+            aria-label="Page"
+            value={pageId}
+            onChange={(e) => {
+              setPageId(e.target.value);
+              setAnchorId("");
+            }}
+            className={selectClasses}
+          >
+            <option value="">Select a page…</option>
+            {pages.map((p) => (
+              <option key={p.id} value={p.id}>{p.title}</option>
+            ))}
+          </select>
+          <select
+            aria-label="Section"
+            value={anchorId}
+            disabled={!pageId}
+            onChange={(e) => setAnchorId(e.target.value)}
+            className={cn(selectClasses, !pageId && "cursor-not-allowed opacity-50")}
+          >
+            <option value="">None (top of page)</option>
+            {headings.map((h) => (
+              <option key={h.id} value={h.id}>{h.label}</option>
+            ))}
+          </select>
+        </>
+      )}
+
       <div className="flex gap-2">
         <Button
           variant="brand"

package/src/components/primitives/tiptap-presets.ts

@@ -42,7 +42,9 @@ const rich: Extensions = [
   }),
   CustomParagraph,
   Underline,
-  Link.configure({ openOnClick: false }),
+  // `page` protocol: stable internal-page hrefs (page://{pageId}#{sectionId})
+  // resolved to real routes at SSR — see lib/links.ts.
+  Link.configure({ openOnClick: false, protocols: ["page"] }),
 ];
 
 export type PresetName = "basic" | "rich";

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