@drawnagency/primitives 0.1.59 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -36,6 +36,10 @@
       "types": "./dist/lib/env.d.ts",
       "default": "./dist/lib/env.js"
     },
+    "./lib/platform-broker": {
+      "types": "./dist/lib/platform-broker.d.ts",
+      "default": "./dist/lib/platform-broker.js"
+    },
     "./lib/registry": {
       "types": "./dist/lib/registry.d.ts",
       "default": "./dist/lib/registry.js"
@@ -48,6 +52,14 @@
       "types": "./dist/components/sections/register-schemas.d.ts",
       "default": "./dist/components/sections/register-schemas.js"
     },
+    "./components/editor": {
+      "types": "./dist/components/editor/index.d.ts",
+      "default": "./dist/components/editor/index.js"
+    },
+    "./components/primitives": {
+      "types": "./dist/components/primitives/index.d.ts",
+      "default": "./dist/components/primitives/index.js"
+    },
     "./auth": {
       "types": "./dist/auth/index.d.ts",
       "default": "./dist/auth/index.js"
@@ -76,7 +88,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-link": "^3.20.4",
-    "@tiptap/extension-placeholder": "^3.22.4",
+    "@tiptap/extension-placeholder": "^3.20.4",
     "@tiptap/extension-underline": "^3.20.4",
     "@tiptap/pm": "^3.20.4",
     "@tiptap/react": "^3.20.4",

package/src/auth/capabilities.ts

@@ -0,0 +1,26 @@
+import type { AuthProvider } from "./types";
+
+export interface UiCapabilities {
+  oauth: boolean;
+  emailPassword: boolean;
+  passwordOnly: boolean;
+  userManagement: boolean;
+  audienceManagement: boolean;
+  passwordToggle: boolean;
+}
+
+/**
+ * The single mapping from an AuthProvider's structure to the booleans the editor
+ * UI gates on. Derived from sub-object / method presence so the UI and the API
+ * routes can never disagree about what a provider supports.
+ */
+export function deriveUiCapabilities(auth: AuthProvider): UiCapabilities {
+  return {
+    oauth: (auth.signInMethods.oauth?.length ?? 0) > 0,
+    emailPassword: auth.signInMethods.emailPassword ?? false,
+    passwordOnly: auth.signInMethods.passwordOnly ?? false,
+    userManagement: !!auth.userManagement,
+    audienceManagement: !!auth.audiences.manage,
+    passwordToggle: !!auth.passwordEnabled.set,
+  };
+}

package/src/auth/index.ts

@@ -12,6 +12,9 @@ export type {
   AuthContext,
 } from "./types";
 
+export type { UiCapabilities } from "./capabilities";
+export { deriveUiCapabilities } from "./capabilities";
+
 export { requireSessionSecret, isSameOriginRequest, safeNextPath } from "./security";
 export { signSessionToken, verifySessionToken, signAudienceToken, verifyAudienceToken, setSessionCookie, SESSION_COOKIE, AUDIENCE_COOKIE, SESSION_MAX_AGE_SECONDS, AUDIENCE_MAX_AGE_SECONDS } from "./cookies";
 export { LastOwnerError } from "./errors";

package/src/auth/types.ts

@@ -21,40 +21,50 @@ export type TokenExchangeResult =
   | { success: false; error: string };
 
 export interface AuthProvider {
-  capabilities: {
-    oauth: boolean;
-    emailPassword: boolean;
-    passwordOnly: boolean;
-    userManagement: boolean;
-    audienceManagement: boolean;
-    passwordToggle: boolean;
-  };
-  oauthProviders?: ("google" | "github")[];
-
+  // --- Required: every provider authenticates a session. ---
   resolveSession(ctx: AuthContext): Promise<Session | null>;
   signIn(method: SignInMethod, ctx: AuthContext): Promise<SignInResult>;
   signOut(ctx: AuthContext): Promise<void>;
 
-  listSiteUsers?(): Promise<SiteUser[]>;
-  inviteUser?(email: string, role: Role): Promise<void>;
-  revokeUser?(userId: string): Promise<void>;
-
-  listAudiences(): Promise<Audience[]>;
-  verifyAudiencePassword(name: string, password: string): Promise<boolean>;
+  // --- Declarative sign-in surface (drives the login UI only). ---
+  // signIn() is polymorphic and handles all of these; there is no backing method
+  // to derive presence from, so these stay declared rather than presence-derived.
+  signInMethods: {
+    oauth?: ("google" | "github")[]; // non-empty → render OAuth buttons
+    emailPassword?: boolean;         // render the email + password form
+    passwordOnly?: boolean;          // single shared-password mode
+  };
 
-  // Optional — single-row lookup (present when the adapter can efficiently query one audience).
-  getAudience?(name: string): Promise<Audience | null>;
+  // --- Viewer access control ("audiences"). Read required; manage optional. ---
+  audiences: {
+    list(): Promise<Audience[]>;
+    verify(name: string, password: string): Promise<boolean>;
+    get?(name: string): Promise<Audience | null>; // optional single-row optimization
+    // Presence of `manage` === the old capabilities.audienceManagement.
+    manage?: {
+      create(displayName: string, color: string | null, password: string): Promise<void>;
+      setPassword(name: string, password: string): Promise<void>;
+      setColor(name: string, color: string | null): Promise<void>;
+      setDisplayName(name: string, displayName: string): Promise<void>;
+      delete(name: string): Promise<void>;
+    };
+  };
 
-  // Optional — present only when capabilities.audienceManagement === true
-  createAudience?(displayName: string, color: string | null, password: string): Promise<void>;
-  setAudiencePassword?(name: string, password: string): Promise<void>;
-  setAudienceColor?(name: string, color: string | null): Promise<void>;
-  setAudienceDisplayName?(name: string, displayName: string): Promise<void>;
-  deleteAudience?(name: string): Promise<void>;
+  // --- Shared-password toggle. Read required; `set` optional. ---
+  // Presence of `set` === the old capabilities.passwordToggle.
+  passwordEnabled: {
+    get(): Promise<boolean>;
+    set?(enabled: boolean): Promise<void>;
+  };
 
-  getPasswordEnabled(): Promise<boolean>;
-  setPasswordEnabled?(enabled: boolean): Promise<void>;
+  // --- Site user management. Presence === the old capabilities.userManagement. ---
+  userManagement?: {
+    list(): Promise<SiteUser[]>;
+    invite(email: string, role: Role): Promise<void>;
+    revoke(userId: string): Promise<void>;
+  };
 
+  // --- Provider-specific auth flows (optional; shape unchanged). ---
   handleCallback?(request: Request, ctx: AuthContext): Promise<Response>;
   handleTokenExchange?(tokens: { accessToken: string; refreshToken: string }, type: TokenExchangeType, ctx: AuthContext): Promise<TokenExchangeResult>;
   updatePassword?(password: string, ctx: AuthContext): Promise<void>;

package/src/components/editor/DropEdgeIndicator.tsx

@@ -0,0 +1,13 @@
+/**
+ * The horizontal insertion line shown at the top or bottom edge of a row during
+ * a closest-edge drag-to-reorder, paired with `useSortableRow`'s `closestEdge`.
+ */
+export function DropEdgeIndicator({ edge }: { edge: "top" | "bottom" | null }) {
+  if (edge === "top") {
+    return <div className="absolute top-0 right-0 left-0 z-10 h-0.5 -translate-y-1/2 bg-primary" />;
+  }
+  if (edge === "bottom") {
+    return <div className="absolute right-0 bottom-0 left-0 z-10 h-0.5 translate-y-1/2 bg-primary" />;
+  }
+  return null;
+}

package/src/components/editor/PagesModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { Check } from "lucide-react";
 import type { SiteIndex, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -7,7 +7,10 @@ import { Input } from "../shared/Input";
 import { Checkbox } from "../shared/Checkbox";
 import { AudienceIndicator } from "./AudienceIndicator";
 import { DragHandle } from "./DragHandle";
+import { useSortableRow } from "../../hooks/useSortableRow";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
 import { slugifyPageSlug, uniquePageSlug, pageDisplayTitle } from "../../lib/pages";
+import { pluralize } from "../../lib/text";
 import { RESERVED_SLUGS } from "../../schemas/site-config";
 import { cn } from "../../lib/cn";
 
@@ -111,11 +114,13 @@ function PageRow({
   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;
+  const { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
+    index: dragIndex ?? 0,
+    dragType: "page-ordering-row",
+    onReorder,
+    enabled: draggable,
+  });
 
   // 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.
@@ -189,85 +194,12 @@ function PageRow({
     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" />
-      )}
+      <DropEdgeIndicator edge={closestEdge} />
       <div className="flex items-center gap-2 px-3 py-2">
         {draggable && (
           <div className="shrink-0 [&_[role=tooltip]]:hidden">
@@ -375,7 +307,7 @@ function DeleteConfirm({ page, onCancel, onConfirm }: { page: Page; onCancel: ()
     <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.
+        <strong>{pluralize(n, "section")}</strong>. This is recoverable only via GitHub version history.
       </p>
       <Input
         label={`Type the page name "${confirmName}" to confirm`}

package/src/components/editor/SectionOrderingModal.tsx

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef } from "react";
 import type { LoadedSection } from "../../lib/loader";
 import type { Thumbnail } from "../../lib/registry";
 import { getSection } from "../../lib/registry";
 import { getMediaProvider } from "../../media";
 import type { MediaManifest } from "../../media/types";
 import { DragHandle } from "./DragHandle";
+import { useSortableRow } from "../../hooks/useSortableRow";
+import { DropEdgeIndicator } from "./DropEdgeIndicator";
 import { cn } from "../../lib/cn";
 
 interface SectionOrderingModalProps {
@@ -34,10 +35,11 @@ function SectionRow({
   mediaManifest: MediaManifest;
   onReorder: (fromIndex: number, toIndex: number) => 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 { rowRef, handleRef, isDragging, closestEdge } = useSortableRow<HTMLDivElement, HTMLButtonElement>({
+    index,
+    dragType: "ordering-row",
+    onReorder,
+  });
 
   const definition = getSection(section.section.type);
   const label = definition?.getLabel?.(section.section) ?? definition?.label ?? section.section.type;
@@ -46,73 +48,6 @@ function SectionRow({
   const thumbnails = allThumbnails.slice(0, 3);
   const remainingCount = Math.max(0, allThumbnails.length - 3);
 
-  useEffect(() => {
-    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: "ordering-row", index }),
-        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 === "ordering-row",
-        getData: ({ input, element }) =>
-          attachClosestEdge({ index }, { 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 = index;
-          if (edge === "bottom") toIndex = index + 1;
-          if (fromIndex < toIndex) toIndex--;
-          if (fromIndex !== toIndex) {
-            onReorder(fromIndex, toIndex);
-          }
-        },
-      });
-
-      cleanup = () => {
-        cleanupDraggable();
-        cleanupDropTarget();
-      };
-    });
-
-    return () => {
-      cancelled = true;
-      cleanup?.();
-    };
-  }, [index, onReorder]);
-
   return (
     <div
       ref={rowRef}
@@ -121,12 +56,7 @@ function SectionRow({
         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" />
-      )}
+      <DropEdgeIndicator edge={closestEdge} />
 
       <div className="shrink-0 [&_[role=tooltip]]:hidden">
         <DragHandle ref={handleRef} />

package/src/components/primitives/defineHeadingSection.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { z } from "zod";
+import { defineSection } from "../../lib/registry";
+import { HeadingSection } from "./HeadingSection";
+
+interface HeadingSectionConfig<T extends string> {
+  type: T;
+  label: string;
+  icon: ReactNode;
+  /** Heading level reported to nav generation (one above the rendered tag by design). */
+  navRole: "h1" | "h2" | "h3";
+  /** The actual HTML tag rendered. */
+  tag: "h2" | "h3" | "h4";
+  placeholder: string;
+  defaultHeading: string;
+  /** When true, adds the `excludeFromNav` content field plus its settings toggle. */
+  navExclusion?: boolean;
+}
+
+/**
+ * Factory for the heading section family (link / sub / sub-sub). They differ only
+ * in their type tag, label, icon, nav level, rendered tag, placeholder, default
+ * text, and whether they expose the nav-exclusion toggle — all three render the
+ * shared HeadingSection primitive through the identical edit/view plumbing.
+ */
+export function defineHeadingSection<T extends string>(config: HeadingSectionConfig<T>) {
+  const content = config.navExclusion
+    ? z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() })
+    : z.object({ heading: z.string() });
+  const schema = z.object({ type: z.literal(config.type), content });
+
+  return defineSection({
+    type: config.type,
+    label: config.label,
+    icon: config.icon,
+    schema,
+    navRole: config.navRole,
+    component: ({ content, onChange }) => (
+      <HeadingSection
+        heading={content.content.heading}
+        tag={config.tag}
+        placeholder={config.placeholder}
+        onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
+      />
+    ),
+    defaults: () => ({ type: config.type, content: { heading: config.defaultHeading } }),
+    getLabel: (content) => content.content.heading,
+    ...(config.navExclusion
+      ? {
+          settings: {
+            excludeFromNav: { type: "checkbox" as const, label: "Exclude from navigation", default: false, target: "content" as const },
+          },
+        }
+      : {}),
+  });
+}

package/src/components/primitives/index.ts

@@ -0,0 +1,11 @@
+// Public authoring surface for custom-section authors: the editable primitives
+// and the heading-section factory. Browser-safe by construction (no node:* / Buffer).
+export { EditableRichText } from "./EditableRichText";
+export { EditablePlainText } from "./EditablePlainText";
+export { EditableList } from "./EditableList";
+export { EditableGrid } from "./EditableGrid";
+export { ImageDropZone } from "./ImageDropZone";
+export { ResolvedMedia } from "./ResolvedMedia";
+export { LinkPopover } from "./LinkPopover";
+export { defineHeadingSection } from "./defineHeadingSection";
+export { MediaBlock } from "../sections/Media/MediaBlock";

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

@@ -3,6 +3,7 @@ import { z } from "zod";
 import { Palette } from "lucide-react";
 import { ColorItemSchema } from "../../../schemas/shared";
 import Colors from "../../brandguide/Colors";
+import { pluralize } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("colors"),
@@ -35,10 +36,7 @@ export default defineSection({
     type: "colors" as const,
     content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
   }),
-  getLabel: (content) => {
-    const n = content.content.colors.length;
-    return `${n} color${n === 1 ? "" : "s"}`;
-  },
+  getLabel: (content) => pluralize(content.content.colors.length, "color"),
   getThumbnails: (content) =>
     content.content.colors
       .filter((c) => c.spaces[0]?.hex)

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

@@ -5,6 +5,7 @@ import { getSectionSchema } from "../../../schemas/sections";
 import { MAX_CONTAINER_COLUMNS } from "../../../lib/container-grid";
 import { Container } from "./Container";
 import { ContainerSettingsForm } from "./ContainerSettingsForm";
+import { pluralize } from "../../../lib/text";
 
 const schema = z.object({
   type: z.literal("container"),
@@ -43,9 +44,6 @@ export default defineSection({
     type: "container" as const,
     content: { columns: 1, flow: "row" as const, children: [] },
   }),
-  getLabel: (content) => {
-    const n = content.content.children.length;
-    return `Container (${n} item${n === 1 ? "" : "s"})`;
-  },
+  getLabel: (content) => `Container (${pluralize(content.content.children.length, "item")})`,
   settingsForm: ContainerSettingsForm,
 });

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

@@ -8,13 +8,7 @@ import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
 import { CopyPlus, Pencil } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
-
-interface IconListItem {
-  label: string;
-  text: string;
-  icon?: string;
-  dodont?: "do" | "dont";
-}
+import type { IconListItem } from "./index";
 
 interface Props {
   items: IconListItem[];

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

@@ -3,11 +3,20 @@ import { z } from "zod";
 import { List } from "lucide-react";
 import IconList from "./IconList";
 import { IconListSettings } from "./IconListSettings";
+import { pluralize } from "../../../lib/text";
+
+export const IconListItemSchema = z.object({
+  label: z.string(),
+  text: z.string(),
+  icon: z.string().optional(),
+  dodont: z.enum(["do", "dont"]).optional(),
+});
+export type IconListItem = z.infer<typeof IconListItemSchema>;
 
 const schema = z.object({
   type: z.literal("icon_list"),
   content: z.object({
-    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional(), dodont: z.enum(["do", "dont"]).optional() })),
+    items: z.array(IconListItemSchema),
   }),
   options: z.object({
     icon: z.string().nullable().optional(),
@@ -34,9 +43,6 @@ export default defineSection({
     type: "icon_list" as const,
     content: { items: [{ label: "", text: "" }] },
   }),
-  getLabel: (content) => {
-    const n = content.content.items.length;
-    return `${n} icon${n === 1 ? "" : "s"}`;
-  },
+  getLabel: (content) => pluralize(content.content.items.length, "icon"),
   settingsForm: IconListSettings,
 });

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

@@ -1,27 +1,12 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
 import { Heading1 } from "lucide-react";
-import { HeadingSection } from "../../primitives/HeadingSection";
+import { defineHeadingSection } from "../../primitives/defineHeadingSection";
 
-const schema = z.object({
-  type: z.literal("link_heading"),
-  content: z.object({ heading: z.string() }),
-});
-
-export default defineSection({
+export default defineHeadingSection({
   type: "link_heading",
   label: "Link Heading",
   icon: <Heading1 size={18} />,
-  schema,
   navRole: "h1",
-  component: ({ content, onChange }) => (
-    <HeadingSection
-      heading={content.content.heading}
-      tag="h2"
-      placeholder="Section heading"
-      onChange={onChange ? (heading: string) => onChange({ type: "link_heading", content: { heading } }) : undefined}
-    />
-  ),
-  defaults: () => ({ type: "link_heading" as const, content: { heading: "New Section" } }),
-  getLabel: (content) => content.content.heading,
+  tag: "h2",
+  placeholder: "Section heading",
+  defaultHeading: "New Section",
 });

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

@@ -1,30 +1,13 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
 import { Heading2 } from "lucide-react";
-import { HeadingSection } from "../../primitives/HeadingSection";
+import { defineHeadingSection } from "../../primitives/defineHeadingSection";
 
-const schema = z.object({
-  type: z.literal("sub_heading"),
-  content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
-});
-
-export default defineSection({
+export default defineHeadingSection({
   type: "sub_heading",
   label: "Sub Heading",
   icon: <Heading2 size={18} />,
-  schema,
   navRole: "h2",
-  component: ({ content, onChange }) => (
-    <HeadingSection
-      heading={content.content.heading}
-      tag="h3"
-      placeholder="Sub heading"
-      onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
-    />
-  ),
-  defaults: () => ({ type: "sub_heading" as const, content: { heading: "New Sub Heading" } }),
-  getLabel: (content) => content.content.heading,
-  settings: {
-    excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
-  },
+  tag: "h3",
+  placeholder: "Sub heading",
+  defaultHeading: "New Sub Heading",
+  navExclusion: true,
 });