@drawnagency/primitives 0.1.113 → 0.1.115

package/dist/{chunk-KR2MHTNJ.js → chunk-FHTKSELX.js}

@@ -1,21 +1,25 @@
-import {
-  Checkbox
-} from "./chunk-F2LYQPXV.js";
 import {
   EditableGrid,
+  EditableList,
   EditablePlainText,
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-DS4GCYV2.js";
+} from "./chunk-YV3YSZEB.js";
+import {
+  Checkbox,
+  Tabs
+} from "./chunk-JR24U7FJ.js";
 import {
-  AddIcon,
-  DeleteIcon,
   DragHandle,
+  DropEdgeIndicator,
   FormLabel,
   Input,
-  useMediaLibrary
-} from "./chunk-JH762VUH.js";
+  LinkField,
+  Select,
+  useMediaLibrary,
+  usePages
+} from "./chunk-RIITGTV3.js";
 import {
   IconButton
 } from "./chunk-IIDKW7AV.js";
@@ -25,7 +29,7 @@ import {
 } from "./chunk-WDSVHKAH.js";
 import {
   createEvent
-} from "./chunk-4RNF2DRG.js";
+} from "./chunk-XDEPXTBY.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -34,8 +38,9 @@ import {
 } from "./chunk-FTPETWXE.js";
 import {
   HexColorSchema,
+  ImageBackgroundSchema,
   SingleMediaReferenceSchema
-} from "./chunk-GGXZZ77Z.js";
+} from "./chunk-AASEGXNT.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema
@@ -211,7 +216,7 @@ function ColorSwatchSettings({ color, onChange }) {
       },
       key
     )),
-    !hasAnyValue(localColor) && /* @__PURE__ */ jsx2("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: "Enter at least one value \u2014 this color won\u2019t be saved until you do." })
+    !hasAnyValue(localColor) && /* @__PURE__ */ jsx2("p", { role: "alert", className: "mt-1 text-xs text-danger", children: "Enter at least one value \u2014 this color won\u2019t be saved until you do." })
   ] });
 }
 
@@ -266,6 +271,7 @@ function ColorsEditable({
         "button",
         {
           onClick: () => setExpanded(!expanded),
+          "aria-expanded": expanded,
           className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast",
           children: [
             /* @__PURE__ */ jsx3("span", { children: expanded ? "Hide Details" : "Show Details" }),
@@ -430,7 +436,7 @@ import { List, Columns2 } from "lucide-react";
 
 // src/components/sections/IconList/IconList.tsx
 import { useRef as useRef4, useEffect as useEffect5, useState as useState4, useCallback, useId } from "react";
-import { Check as Check2, CopyPlus, Pencil, X as X2 } from "lucide-react";
+import { Check as Check2, CopyPlus, Pencil, Plus, Trash2, X as X2 } from "lucide-react";
 
 // src/components/primitives/IconPicker.tsx
 import { useEffect as useEffect3, useRef as useRef2 } from "react";
@@ -524,7 +530,7 @@ function DoDontToggle({ value, onSelect, onClose }) {
             "aria-label": "Do",
             className: cn(
               "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
-              "text-green-600 hover:bg-base-accent",
+              "text-success hover:bg-base-accent",
               value === "do" && "ring-2 ring-primary bg-base-accent"
             ),
             onClick: () => onSelect("do"),
@@ -541,7 +547,7 @@ function DoDontToggle({ value, onSelect, onClose }) {
             "aria-label": "Don't",
             className: cn(
               "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
-              "text-red-600 hover:bg-base-accent",
+              "text-danger hover:bg-base-accent",
               value === "dont" && "ring-2 ring-primary bg-base-accent"
             ),
             onClick: () => onSelect("dont"),
@@ -564,6 +570,7 @@ function IconList({
   showLabel = true,
   stackText = false,
   dodont,
+  marker,
   labelClassName = "font-bold text-base-contrast",
   textClassName = "text-base-contrast-light",
   iconClassName = "text-primary",
@@ -571,16 +578,17 @@ function IconList({
   onItemsChange
 }) {
   const isEditMode = !!onChange || !!onItemsChange;
+  const numbered = marker === "number" && !dodont;
   const emitItems = useCallback(
     (newItems) => {
       onChange?.({
         type: "icon_list",
         content: { items: newItems },
-        options: { icon, showLabel, stackText, dodont }
+        options: { icon, showLabel, stackText, dodont, marker }
       });
       onItemsChange?.(newItems);
     },
-    [onChange, onItemsChange, icon, showLabel, stackText, dodont]
+    [onChange, onItemsChange, icon, showLabel, stackText, dodont, marker]
   );
   if (!isEditMode) {
     return /* @__PURE__ */ jsx8(
@@ -591,6 +599,7 @@ function IconList({
         showLabel,
         stackText,
         dodont,
+        numbered,
         labelClassName,
         textClassName,
         iconClassName
@@ -605,6 +614,7 @@ function IconList({
       showLabel,
       stackText,
       dodont,
+      numbered,
       labelClassName,
       textClassName,
       iconClassName,
@@ -621,24 +631,28 @@ function resolveIcon(item, defaultIcon, sectionDodont) {
   return defaultIcon ? getIcon(defaultIcon) : null;
 }
 function resolveIconColor(item, iconClassName, sectionDodont) {
-  if (item.dodont === "do") return "text-green-600";
-  if (item.dodont === "dont") return "text-red-600";
+  if (item.dodont === "do") return "text-success";
+  if (item.dodont === "dont") return "text-danger";
   if (item.icon) return iconClassName;
-  if (sectionDodont === "do") return "text-green-600";
-  if (sectionDodont === "dont") return "text-red-600";
+  if (sectionDodont === "do") return "text-success";
+  if (sectionDodont === "dont") return "text-danger";
   return iconClassName;
 }
+function NumberMarker({ n }) {
+  return /* @__PURE__ */ jsx8("span", { className: "flex h-[18px] min-w-[18px] items-center justify-center text-[1rem] leading-none font-bold tabular-nums", children: n });
+}
 function ViewIconList({
   items,
   defaultIcon,
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName
 }) {
-  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon, dodont));
+  const hasAnyIcon = numbered || items.some((item) => resolveIcon(item, defaultIcon, dodont));
   return /* @__PURE__ */ jsx8("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
     const iconEntry = resolveIcon(item, defaultIcon, dodont);
     const iconColor = resolveIconColor(item, iconClassName, dodont);
@@ -655,7 +669,7 @@ function ViewIconList({
             {
               "data-testid": "icon-list-icon",
               className: cn("flex items-start pt-0.5", iconColor),
-              children: iconEntry && /* @__PURE__ */ jsx8(iconEntry.icon, { size: 18 })
+              children: numbered ? /* @__PURE__ */ jsx8(NumberMarker, { n: i + 1 }) : iconEntry ? /* @__PURE__ */ jsx8(iconEntry.icon, { size: 18 }) : null
             }
           ),
           /* @__PURE__ */ jsxs6(
@@ -684,6 +698,7 @@ function EditIconList({
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName,
@@ -765,6 +780,7 @@ function EditIconList({
         showLabel,
         stackText,
         dodont,
+        numbered,
         labelClassName,
         textClassName,
         iconClassName,
@@ -788,7 +804,7 @@ function EditIconList({
     /* @__PURE__ */ jsx8(
       IconButton,
       {
-        icon: /* @__PURE__ */ jsx8(AddIcon, { size: 16 }),
+        icon: /* @__PURE__ */ jsx8(Plus, { size: 16 }),
         label: "Add item",
         size: "lg",
         intent: "primary",
@@ -808,6 +824,7 @@ function EditableRow({
   showLabel,
   stackText,
   dodont,
+  numbered,
   labelClassName,
   textClassName,
   iconClassName,
@@ -877,22 +894,22 @@ function EditableRow({
       ref: rowRef,
       className: cn(
         "group/row relative grid gap-x-3",
-        hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
-        isDropTarget && "border-t-2 border-primary"
+        hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1"
       ),
       onFocusCapture: onEditableActivity,
       onInput: onEditableActivity,
       onMouseMove: () => setEditingSuppressed(false),
       children: [
+        /* @__PURE__ */ jsx8(DropEdgeIndicator, { edge: isDropTarget ? "top" : null }),
         hasAnyIcon && /* @__PURE__ */ jsxs6(
           "div",
           {
             "data-testid": "icon-list-icon",
             className: cn("relative flex items-start pt-0.5", iconColor),
-            onMouseEnter: () => setIconHover(true),
-            onMouseLeave: () => setIconHover(false),
+            onMouseEnter: numbered ? void 0 : () => setIconHover(true),
+            onMouseLeave: numbered ? void 0 : () => setIconHover(false),
             children: [
-              /* @__PURE__ */ jsx8(
+              numbered ? /* @__PURE__ */ jsx8(NumberMarker, { n: index + 1 }) : /* @__PURE__ */ jsx8(
                 "button",
                 {
                   className: "cursor-pointer transition-opacity hover:opacity-70",
@@ -904,7 +921,7 @@ function EditableRow({
                   children: iconHover && !pickerOpen ? /* @__PURE__ */ jsx8(Pencil, { size: 18, className: "text-base-contrast-light" }) : iconEntry ? /* @__PURE__ */ jsx8(iconEntry.icon, { size: 18 }) : /* @__PURE__ */ jsx8("span", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" })
                 }
               ),
-              pickerOpen && /* @__PURE__ */ jsx8("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx8(
+              pickerOpen && !numbered && /* @__PURE__ */ jsx8("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx8(
                 IconPicker,
                 {
                   selected: effectiveIconId,
@@ -965,7 +982,7 @@ function EditableRow({
                       setPickerOpen(false);
                     },
                     className: "cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary",
-                    children: item.dodont === "do" ? /* @__PURE__ */ jsx8(Check2, { size: 14, className: "text-green-600" }) : item.dodont === "dont" ? /* @__PURE__ */ jsx8(X2, { size: 14, className: "text-red-600" }) : /* @__PURE__ */ jsx8(Pencil, { size: 14 })
+                    children: item.dodont === "do" ? /* @__PURE__ */ jsx8(Check2, { size: 14, className: "text-success" }) : item.dodont === "dont" ? /* @__PURE__ */ jsx8(X2, { size: 14, className: "text-danger" }) : /* @__PURE__ */ jsx8(Pencil, { size: 14 })
                   }
                 ),
                 dodontOpen && /* @__PURE__ */ jsx8("div", { className: "absolute top-full right-0 z-50 mt-1", children: /* @__PURE__ */ jsx8(
@@ -1003,7 +1020,7 @@ function EditableRow({
               /* @__PURE__ */ jsx8(
                 IconButton,
                 {
-                  icon: /* @__PURE__ */ jsx8(DeleteIcon, { size: 14 }),
+                  icon: /* @__PURE__ */ jsx8(Trash2, { size: 14 }),
                   label: "Delete item",
                   size: "sm",
                   intent: "destructive",
@@ -1049,68 +1066,84 @@ function TrailingDropZone({
     };
   }, [index, listId, setDragState]);
   const isDropTarget = dragState.targetId === trailingId;
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      ref,
-      className: cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary")
-    }
-  );
+  return /* @__PURE__ */ jsx8("div", { ref, className: "absolute bottom-0 left-0 right-0 h-4", children: /* @__PURE__ */ jsx8("div", { className: "relative h-full", children: /* @__PURE__ */ jsx8(DropEdgeIndicator, { edge: isDropTarget ? "top" : null }) }) });
 }
 
 // src/components/sections/IconList/IconListSettings.tsx
 import { useState as useState5 } from "react";
-import { Check as Check3, X as X3 } from "lucide-react";
+import { Check as Check3, Hash, Shapes, X as X3 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function IconListSettings({
   icon: initialIcon,
   showLabel: initialShowLabel,
   stackText: initialStackText,
   dodont: initialDodont,
+  marker: initialMarker,
   onChange
 }) {
   const [icon, setIcon] = useState5(initialIcon);
   const [showLabel, setShowLabel] = useState5(initialShowLabel);
   const [stackText, setStackText] = useState5(initialStackText);
   const [dodont, setDodont] = useState5(initialDodont);
+  const [marker, setMarker] = useState5(initialMarker === "number" ? "number" : void 0);
   const [pickerOpen, setPickerOpen] = useState5(false);
-  const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, ...overrides } });
+  const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, marker, ...overrides } });
   const iconEntry = icon ? getIcon(icon) : null;
   const dodontActive = dodont === "do" || dodont === "dont";
-  const tile = (value, label, aria, glyph, tint) => /* @__PURE__ */ jsxs7(
+  const numbered = marker === "number" && !dodontActive;
+  const iconDisabled = dodontActive || numbered;
+  const pickDodont = (value) => {
+    setDodont(value);
+    if (value) {
+      setMarker(void 0);
+      emit({ dodont: value, marker: void 0 });
+    } else {
+      emit({ dodont: value });
+    }
+  };
+  const tile = (pressed, onPick, label, aria, glyph, tint) => /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
       "aria-label": aria,
-      "aria-pressed": dodont === value,
+      "aria-pressed": pressed,
       className: cn(
         "cursor-pointer flex flex-col items-center gap-1 rounded border py-2 transition-colors",
         tint,
-        dodont === value ? "border-primary bg-base-accent" : "border-base-200"
+        pressed ? "border-primary bg-base-accent" : "border-base-200"
       ),
-      onClick: () => {
-        setDodont(value);
-        emit({ dodont: value });
-      },
+      onClick: onPick,
       children: [
         glyph,
         /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium", children: label })
       ]
     }
   );
+  const dodontTile = (value, label, aria, glyph, tint) => tile(dodont === value, () => pickDodont(value), label, aria, glyph, tint);
+  const markerTile = (value, label, aria, glyph) => tile(marker === value, () => {
+    setMarker(value);
+    emit({ marker: value });
+  }, label, aria, glyph, "text-base-contrast-light");
   return /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs7("div", { children: [
       /* @__PURE__ */ jsx9(FormLabel, { children: "Do / Don't list" }),
       /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 gap-2", children: [
-        tile(
+        dodontTile(
           void 0,
           "None",
           "No do/don't",
           /* @__PURE__ */ jsx9("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
           "text-base-contrast-light"
         ),
-        tile("do", "Do", "Do list", /* @__PURE__ */ jsx9(Check3, { size: 20 }), "text-green-600"),
-        tile("dont", "Don't", "Don't list", /* @__PURE__ */ jsx9(X3, { size: 20 }), "text-red-600")
+        dodontTile("do", "Do", "Do list", /* @__PURE__ */ jsx9(Check3, { size: 20 }), "text-success"),
+        dodontTile("dont", "Don't", "Don't list", /* @__PURE__ */ jsx9(X3, { size: 20 }), "text-danger")
+      ] })
+    ] }),
+    !dodontActive && /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx9(FormLabel, { children: "Marker" }),
+      /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-2", children: [
+        markerTile(void 0, "Icon", "Icon markers", /* @__PURE__ */ jsx9(Shapes, { size: 20 })),
+        markerTile("number", "Number", "Number markers", /* @__PURE__ */ jsx9(Hash, { size: 20 }))
       ] })
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
@@ -1120,13 +1153,13 @@ function IconListSettings({
           "button",
           {
             id: "icon-picker-btn",
-            disabled: dodontActive,
+            disabled: iconDisabled,
             className: cn(
               "flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light",
-              dodontActive ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:border-primary hover:text-primary"
+              iconDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:border-primary hover:text-primary"
             ),
             onClick: () => {
-              if (!dodontActive) setPickerOpen((prev) => !prev);
+              if (!iconDisabled) setPickerOpen((prev) => !prev);
             },
             children: [
               iconEntry && /* @__PURE__ */ jsx9(iconEntry.icon, { size: 16 }),
@@ -1134,7 +1167,7 @@ function IconListSettings({
             ]
           }
         ),
-        icon && !dodontActive && /* @__PURE__ */ jsx9(
+        icon && !iconDisabled && /* @__PURE__ */ jsx9(
           "button",
           {
             className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast",
@@ -1146,8 +1179,8 @@ function IconListSettings({
           }
         )
       ] }),
-      dodontActive && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-base-contrast-light/70", children: "Whole-list Do/Don't overrides the default icon." }),
-      pickerOpen && !dodontActive && /* @__PURE__ */ jsx9("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx9(
+      iconDisabled && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-base-contrast-light/70", children: numbered ? "Numbered lists don't show icons." : "Whole-list Do/Don't overrides the default icon." }),
+      pickerOpen && !iconDisabled && /* @__PURE__ */ jsx9("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx9(
         IconPicker,
         {
           selected: icon,
@@ -1206,7 +1239,10 @@ var schema2 = z3.object({
     icon: z3.string().nullable().describe("Default icon name applied to items that don't specify their own; null for no icon.").optional(),
     showLabel: z3.boolean().describe("When true, render each item's label.").optional(),
     stackText: z3.boolean().describe("When true, stack the label and text vertically instead of inline.").optional(),
-    dodont: z3.enum(["do", "dont"]).describe("Whole-list do/don't mode: render every item with a green check (do) or red x (don't).").optional()
+    dodont: z3.enum(["do", "dont"]).describe("Whole-list do/don't mode: render every item with a green check (do) or red x (don't).").optional(),
+    marker: z3.enum(["icon", "number"]).describe(
+      'What marks each item: "icon" (default when absent) or "number" \u2014 bold numerals 1, 2, 3\u2026 in place of icons, ignoring item and default icons. Standard lists only: ignored when options.dodont is set.'
+    ).optional()
   }).optional()
 });
 var doDontListPreset = {
@@ -1231,7 +1267,7 @@ var IconList_default = defineSection({
   label: "Icon List",
   icon: /* @__PURE__ */ jsx10(List, { size: 18 }),
   schema: schema2,
-  authoringNote: "A list of labeled items, optionally with per-item icons and do/don't markers. Use for feature lists, guidelines, or do/don't guidance.",
+  authoringNote: `A list of labeled items, optionally with per-item icons and do/don't markers, or numbered instead (options.marker: "number"). Use for feature lists, guidelines, steps, or do/don't guidance.`,
   component: ({ content, options, onChange }) => /* @__PURE__ */ jsx10(
     IconList,
     {
@@ -1240,6 +1276,7 @@ var IconList_default = defineSection({
       showLabel: options?.showLabel,
       stackText: options?.stackText,
       dodont: options?.dodont,
+      marker: options?.marker,
       onChange: onChange ? (c) => onChange({ ...c, options: content.options }) : void 0
     }
   ),
@@ -1261,7 +1298,7 @@ import { Check as Check4, X as X4 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }) {
   return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx11(Check4, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx11(X4, { size: 28, className: "text-red-600" }) }),
+    /* @__PURE__ */ jsx11("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx11(Check4, { size: 28, className: "text-success" }) : /* @__PURE__ */ jsx11(X4, { size: 28, className: "text-danger" }) }),
     /* @__PURE__ */ jsx11(
       MediaBlock,
       {
@@ -1292,7 +1329,10 @@ var schema3 = z4.object({
     square: z4.boolean().describe("When true, crop the media to a 1:1 square aspect ratio.").optional(),
     showCaption: z4.boolean().describe("When true, render the asset's caption beneath it.").optional(),
     border: z4.boolean().describe("When true, draw a border around the media.").optional(),
-    objectFit: z4.enum(["cover", "contain"]).describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).").optional()
+    objectFit: z4.enum(["cover", "contain"]).describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).").optional(),
+    background: ImageBackgroundSchema.describe(
+      "Optional backdrop filling the image box, for images that need contrast (e.g. a white transparent logo). 'theme' picks the site's light or dark surface separately for light and dark mode; 'custom' uses one hex for both. Images only \u2014 ignored for video. Omit for none."
+    ).optional()
   }).default({})
 });
 var DoDontMedia_default = defineSection({
@@ -1333,6 +1373,11 @@ var DoDontMedia_default = defineSection({
         { label: "Cover", value: "cover" }
       ]
     },
+    background: {
+      type: "image-background",
+      label: "Image background",
+      hidden: (values) => values.ref?.type === "video"
+    },
     link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
     dodont: {
       type: "select",
@@ -1347,7 +1392,7 @@ var DoDontMedia_default = defineSection({
   },
   inheritableSettings: ["square", "showCaption", "border", "objectFit"],
   settingsTabs: [
-    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit", "background"] },
     { label: "Link", fields: ["link"] },
     { label: "Do / Don't", fields: ["dodont"] }
   ]
@@ -1606,13 +1651,516 @@ var Document_default = defineSection({
   ]
 });
 
+// src/components/sections/SectionSummary/index.tsx
+import { useContext } from "react";
+import { z as z6 } from "zod";
+import { ListChecks } from "lucide-react";
+
+// src/components/shared/SummaryAnchorsContext.ts
+import { createContext } from "react";
+var SummaryAnchorsContext = createContext({});
+
+// src/components/sections/SectionSummary/SectionSummaryBlock.tsx
+import { useId as useId2, useState as useState8 } from "react";
+import { Fragment, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var LABEL_FONT = "var(--font-label, var(--font-heading, system-ui))";
+var ACCENT_FONT = "var(--font-accent, var(--font-heading, cursive))";
+var INK_SOFT = "color-mix(in srgb, var(--color-on-primary, #fff) 70%, var(--color-primary))";
+var PLATE_LINE = "color-mix(in srgb, var(--color-on-primary, #fff) 25%, var(--color-primary))";
+var sanitizeIdPart = (s) => s.toLowerCase().replace(/[^a-z0-9-]/g, "");
+function linkIsSet(link) {
+  return link.kind === "external" ? link.href.trim() !== "" : link.pageId !== "";
+}
+function linkHref(link) {
+  if (link.kind === "external") return { href: link.href.trim(), target: link.target };
+  return { href: "" };
+}
+function displayLabel(item) {
+  if (item.linkLabel.trim() !== "") return item.linkLabel.trim();
+  if (item.link.kind === "external") return item.link.href.trim();
+  return "";
+}
+function JumpLinkModalBody({
+  initialLink,
+  onApply,
+  onRemove
+}) {
+  const { pages, getPageHeadings } = usePages();
+  const [link, setLink] = useState8(initialLink);
+  const deriveLabel = (l) => {
+    if (l.kind !== "internal" || !l.pageId) return "";
+    if (l.anchorSectionId) {
+      const h = getPageHeadings(l.pageId).find((x) => x.id === l.anchorSectionId);
+      if (h) return h.label;
+    }
+    return pages.find((pg) => pg.id === l.pageId)?.title ?? "";
+  };
+  const handle = (l) => {
+    setLink(l);
+    onApply(l, l.kind === "internal" ? deriveLabel(l) : "");
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx15(LinkField, { label: "Jump-link target", value: link, onChange: handle }),
+    linkIsSet(link) && /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        className: "cursor-pointer self-start text-sm text-base-contrast-light underline hover:text-base-contrast",
+        onClick: () => {
+          setLink(DEFAULT_LINK);
+          onRemove();
+        },
+        children: "Remove jump link"
+      }
+    )
+  ] });
+}
+function buildCss(p, numbered) {
+  return [
+    `#${p}{background:var(--color-primary);border-radius:var(--radius-outer, 18px);padding:1.4rem 1.4rem 1.1rem;color:var(--color-on-primary, #fff);}`,
+    `#${p} .ss-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;}`,
+    `#${p} .ss-kicker{font-family:${LABEL_FONT};font-weight:700;letter-spacing:.18em;font-size:.78rem;color:var(--color-primary-contrast);text-transform:uppercase;}`,
+    `#${p} .ss-accent{font-family:${ACCENT_FONT};font-size:1.45rem;color:var(--color-on-primary, #fff);opacity:.92;text-align:right;}`,
+    // The list: neutralize EditableList's utility gap so rhythm comes from item
+    // padding + rules (id-scoped, so it wins in both view and edit mode).
+    `#${p} .ss-list{margin-top:.5rem;gap:0;}`,
+    `#${p} .ss-item{display:grid;grid-template-columns:${numbered ? "max-content 1fr" : "1fr"};column-gap:.9rem;align-items:baseline;padding:.95rem 0;border-top:1px solid ${PLATE_LINE};}`,
+    `#${p} .ss-list > div:first-child .ss-item{border-top:0;padding-top:.6rem;}`,
+    `#${p} .ss-num{font-family:${LABEL_FONT};font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--color-primary-contrast);}`,
+    `#${p} .ss-h{font-weight:700;font-size:1.22rem;line-height:1.3;}`,
+    `#${p} .ss-x{color:${INK_SOFT};font-size:.98rem;line-height:1.45;margin-top:.25rem;}`,
+    // Jump-link trails each item on its own line. When no link is set the element
+    // is kept (visibility:hidden) so toggling a link never shifts the layout.
+    `#${p} .ss-jumprow{margin-top:.4rem;}`,
+    `#${p} .ss-arrow{margin-right:.4em;}`,
+    `#${p} .ss-jump{display:inline-block;font-family:${LABEL_FONT};font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};text-decoration:none;white-space:nowrap;border-bottom:1px solid ${PLATE_LINE};transition:color .15s,border-color .15s;}`,
+    `#${p} a.ss-jump:hover{color:var(--color-primary-contrast);border-color:var(--color-primary-contrast);}`,
+    `#${p} .ss-foot{margin-top:.4rem;padding-top:.9rem;border-top:1px solid ${PLATE_LINE};display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:${LABEL_FONT};font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};}`,
+    `#${p} .ss-copy{background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:${INK_SOFT};border-bottom:1px solid ${PLATE_LINE};transition:color .15s,border-color .15s;}`,
+    `#${p} .ss-copy:hover,#${p} .ss-copy.ss-copied{color:var(--color-primary-contrast);border-color:var(--color-primary-contrast);}`,
+    // Editor-only: the jump-link trigger (opens the picker modal) and the
+    // EditableList "Add row" button, both branded with --color-primary-contrast.
+    `#${p} .ss-jumpedit{display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;font-family:${LABEL_FONT};font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${INK_SOFT};transition:color .15s;}`,
+    `#${p} .ss-jumpedit:hover{color:var(--color-primary-contrast);}`,
+    `#${p} .ss-jumpedit.is-set{border-bottom:1px solid ${PLATE_LINE};}`,
+    `#${p} .ss-jumpedit-ic{margin-left:.4em;opacity:.7;}`,
+    `#${p} .ss-list > button{border-color:var(--color-primary-contrast);color:var(--color-primary-contrast);}`,
+    `#${p} .ss-list > button:hover{background:color-mix(in srgb, var(--color-primary-contrast) 12%, transparent);}`,
+    // EditableList's drag/drop chrome renders inside the primary-filled plate, so
+    // tint the drag handle and the drop-target indicator (a border-primary top
+    // rule that would otherwise vanish into the plate) to the same soft on-primary
+    // ink as the jump-link trigger.
+    `#${p} .ss-list button.cursor-grab{color:${INK_SOFT};}`,
+    `#${p} .ss-list .border-primary{border-color:${INK_SOFT};}`,
+    `#${p} [contenteditable]{outline:none;caret-color:var(--color-primary-contrast);}`,
+    `#${p} [contenteditable]:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary-contrast) 55%, transparent);border-radius:var(--radius-inner, 6px);}`
+  ].join("\n");
+}
+function copyScript(p) {
+  return `(function(){var bind=function(){var c=document.getElementById("${p}");if(!c||c.dataset.ssBound)return;c.dataset.ssBound="1";c.addEventListener("click",function(e){var t=e.target&&e.target.closest?e.target.closest(".ss-copy"):null;if(!t||!c.contains(t)||t.classList.contains("ss-copied")||!(navigator.clipboard&&navigator.clipboard.writeText))return;var lines=[];var k=c.querySelector(".ss-kicker");if(k&&k.textContent&&k.textContent.trim())lines.push(k.textContent.trim().toUpperCase());var items=c.querySelectorAll(".ss-item");for(var i=0;i<items.length;i++){var h=items[i].querySelector(".ss-h");var x=items[i].querySelector(".ss-x");var xt="";if(x){var cl=x.cloneNode(true);var j=cl.querySelector(".ss-jump");if(j)j.remove();xt=(cl.textContent||"").trim();}var ht=((h&&h.textContent)||"").trim();if(ht||xt)lines.push("\\u2022 "+ht+(xt?" \\u2014 "+xt:""));}navigator.clipboard.writeText(lines.join("\\n")).then(function(){var o=t.textContent;t.classList.add("ss-copied");t.textContent="\\u2713 Copied";setTimeout(function(){t.classList.remove("ss-copied");t.textContent=o;},1400);},function(){});});};bind();if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",bind);}})();`;
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+function SectionSummaryBlock({
+  sectionId,
+  kicker,
+  accent,
+  footNote,
+  items,
+  options,
+  isEditMode,
+  openModal,
+  onKickerChange,
+  onAccentChange,
+  onFootNoteChange,
+  onItemsChange,
+  navAnchor,
+  navHint
+}) {
+  const reactId = useId2();
+  const p = `ss-${sanitizeIdPart(sectionId ?? "") || sanitizeIdPart(reactId) || "x"}`;
+  const edit = !!isEditMode;
+  const numbered = options.numbered ?? true;
+  const visibleItems = items.filter(
+    (item) => item.headline.trim() !== "" || item.explainer.trim() !== "" || linkIsSet(item.link)
+  );
+  const rowCount = edit ? items.length : visibleItems.length;
+  const showFooter = (options.showFooter ?? true) && (edit || footNote.trim() !== "" || rowCount > 0);
+  const showCopyButton = showFooter && (options.showCopy ?? true) && rowCount > 0;
+  const showAccent = (options.showAccent ?? true) && (edit ? !!onAccentChange : accent.trim() !== "");
+  const showKicker = edit ? !!onKickerChange : kicker.trim() !== "";
+  const css = buildCss(p, numbered);
+  const [copied, setCopied] = useState8(false);
+  const onCopyClick = () => {
+    if (copied || !navigator.clipboard?.writeText) return;
+    const lines = [];
+    if (kicker.trim()) lines.push(kicker.trim().toUpperCase());
+    for (const item of items) {
+      const h = item.headline.trim();
+      const x = item.explainer.trim();
+      if (h || x) lines.push(`\u2022 ${h}${x ? ` \u2014 ${x}` : ""}`);
+    }
+    navigator.clipboard.writeText(lines.join("\n")).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+      }
+    );
+  };
+  const renderViewItem = (item, index) => {
+    const { href, target } = linkHref(item.link);
+    const hasLink = href !== "";
+    const label = displayLabel(item);
+    return /* @__PURE__ */ jsxs11("div", { className: "ss-item", children: [
+      numbered && /* @__PURE__ */ jsx15("span", { className: "ss-num", "aria-hidden": "true", children: pad2(index + 1) }),
+      /* @__PURE__ */ jsxs11("div", { className: "ss-body", children: [
+        /* @__PURE__ */ jsx15("div", { className: "ss-h", children: item.headline }),
+        item.explainer.trim() !== "" && /* @__PURE__ */ jsx15("div", { className: "ss-x", children: item.explainer }),
+        /* @__PURE__ */ jsx15("div", { className: "ss-jumprow", children: hasLink ? /* @__PURE__ */ jsxs11("a", { className: "ss-jump", href, target, children: [
+          /* @__PURE__ */ jsx15("span", { className: "ss-arrow", "aria-hidden": "true", children: "\u21A9" }),
+          label
+        ] }) : (
+          // Reserve the line so a row with/without a link keeps the same height.
+          /* @__PURE__ */ jsx15("span", { className: "ss-jump", style: { visibility: "hidden" }, "aria-hidden": "true", children: "\u21A9 Link" })
+        ) })
+      ] })
+    ] });
+  };
+  const renderEditItem = (item, index) => {
+    const set = (patch) => {
+      const next = items.slice();
+      next[index] = { ...next[index], ...patch };
+      onItemsChange?.(next);
+    };
+    const label = displayLabel(item);
+    const isSet = linkIsSet(item.link);
+    const openLinkModal = () => openModal?.(
+      "Jump link",
+      /* @__PURE__ */ jsx15(
+        JumpLinkModalBody,
+        {
+          initialLink: item.link,
+          onApply: (link, linkLabel) => set({ link, linkLabel }),
+          onRemove: () => set({ link: DEFAULT_LINK, linkLabel: "" })
+        }
+      )
+    );
+    return /* @__PURE__ */ jsxs11("div", { className: "ss-item", children: [
+      numbered && /* @__PURE__ */ jsx15("span", { className: "ss-num", children: pad2(index + 1) }),
+      /* @__PURE__ */ jsxs11("div", { className: "ss-body", children: [
+        /* @__PURE__ */ jsx15(
+          EditablePlainText,
+          {
+            tag: "div",
+            className: "ss-h",
+            value: item.headline,
+            onChange: (headline) => set({ headline }),
+            isEditMode: true,
+            placeholder: "Headline"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          EditablePlainText,
+          {
+            tag: "div",
+            className: "ss-x",
+            value: item.explainer,
+            onChange: (explainer) => set({ explainer }),
+            isEditMode: true,
+            placeholder: "One-sentence explainer (optional)"
+          }
+        ),
+        /* @__PURE__ */ jsx15("div", { className: "ss-jumprow", children: /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            className: isSet ? "ss-jumpedit is-set" : "ss-jumpedit",
+            onClick: openLinkModal,
+            children: isSet ? /* @__PURE__ */ jsxs11(Fragment, { children: [
+              /* @__PURE__ */ jsx15("span", { className: "ss-arrow", "aria-hidden": "true", children: "\u21A9" }),
+              label || "Edit jump link",
+              /* @__PURE__ */ jsx15("span", { className: "ss-jumpedit-ic", "aria-hidden": "true", children: " \u270E" })
+            ] }) : "+ Add jump link"
+          }
+        ) })
+      ] })
+    ] });
+  };
+  const autoNote = rowCount > 0 ? `${pad2(rowCount)} ${rowCount === 1 ? "principle" : "principles"}` : "";
+  const plate = /* @__PURE__ */ jsxs11("div", { id: p, children: [
+    /* @__PURE__ */ jsx15("style", { dangerouslySetInnerHTML: { __html: css } }),
+    (showKicker || showAccent) && /* @__PURE__ */ jsxs11("div", { className: "ss-head", children: [
+      showKicker && (edit && onKickerChange ? /* @__PURE__ */ jsx15(
+        EditablePlainText,
+        {
+          tag: "span",
+          className: "ss-kicker",
+          value: kicker,
+          onChange: onKickerChange,
+          isEditMode: true,
+          placeholder: "Section \u2014 Summary"
+        }
+      ) : /* @__PURE__ */ jsx15("span", { className: "ss-kicker", children: kicker })),
+      showAccent && (edit && onAccentChange ? /* @__PURE__ */ jsx15(
+        EditablePlainText,
+        {
+          tag: "span",
+          className: "ss-accent",
+          value: accent,
+          onChange: onAccentChange,
+          isEditMode: true,
+          placeholder: "tl;dr",
+          style: { marginLeft: "auto" }
+        }
+      ) : /* @__PURE__ */ jsx15("span", { className: "ss-accent", style: { marginLeft: "auto" }, children: accent }))
+    ] }),
+    edit && onItemsChange ? /* @__PURE__ */ jsx15(
+      EditableList,
+      {
+        className: "ss-list",
+        items,
+        onChange: onItemsChange,
+        createItem: () => ({ headline: "", explainer: "", link: DEFAULT_LINK, linkLabel: "" }),
+        isEditMode: true,
+        renderItem: (item, { index }) => renderEditItem(item, index)
+      }
+    ) : visibleItems.length > 0 && /* @__PURE__ */ jsx15("div", { className: "ss-list", style: { display: "flex", flexDirection: "column" }, children: visibleItems.map((item, index) => /* @__PURE__ */ jsx15("div", { children: renderViewItem(item, index) }, index)) }),
+    showFooter && /* @__PURE__ */ jsxs11("div", { className: "ss-foot", children: [
+      edit && onFootNoteChange ? /* @__PURE__ */ jsx15(
+        EditablePlainText,
+        {
+          tag: "span",
+          value: footNote,
+          onChange: onFootNoteChange,
+          isEditMode: true,
+          placeholder: autoNote || "Footer note"
+        }
+      ) : /* @__PURE__ */ jsx15("span", { children: footNote.trim() || autoNote }),
+      showCopyButton && /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          className: copied ? "ss-copy ss-copied" : "ss-copy",
+          "aria-live": "polite",
+          onClick: edit ? onCopyClick : void 0,
+          children: copied ? "\u2713 Copied" : "\u29C9 Copy summary"
+        }
+      )
+    ] }),
+    !edit && showCopyButton && /* @__PURE__ */ jsx15("script", { dangerouslySetInnerHTML: { __html: copyScript(p) } })
+  ] });
+  const hint = edit && navHint ? /* @__PURE__ */ jsx15("p", { className: "mt-2 text-xs text-warning", children: navHint }) : null;
+  if (!navAnchor && !hint) return plate;
+  return (
+    // The nav anchor sits on a wrapper: the plate's own id is the CSS/script scope.
+    /* @__PURE__ */ jsxs11("div", { id: navAnchor, className: navAnchor ? "scroll-mt-20" : void 0, children: [
+      plate,
+      hint
+    ] })
+  );
+}
+
+// src/components/sections/SectionSummary/SectionSummarySettings.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var navOptions = [
+  { label: "Off", value: "off" },
+  { label: "Heading", value: "heading" },
+  { label: "Subheading", value: "subheading" }
+];
+function SectionSummarySettings({
+  kicker = "",
+  accent = "",
+  footNote = "",
+  showAccent = true,
+  showFooter = true,
+  showCopy = true,
+  numbered = true,
+  nav = "off",
+  navLabel = "",
+  onChange
+}) {
+  const [v, setV] = useState9({ kicker, accent, footNote, showAccent, showFooter, showCopy, numbered, nav, navLabel });
+  const update = (patch) => {
+    const next = { ...v, ...patch };
+    setV(next);
+    onChange({
+      content: { kicker: next.kicker, accent: next.accent, footNote: next.footNote },
+      options: {
+        showAccent: next.showAccent,
+        showFooter: next.showFooter,
+        showCopy: next.showCopy,
+        numbered: next.numbered,
+        // Off is stored as an absent key; the label is kept so turning nav back
+        // on restores it.
+        nav: next.nav === "off" ? void 0 : next.nav,
+        navLabel: next.navLabel
+      }
+    });
+  };
+  const navOn = v.nav !== "off";
+  const panel = "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-px";
+  return /* @__PURE__ */ jsx16(
+    Tabs,
+    {
+      fullBleedTabBar: true,
+      tabs: [
+        {
+          id: "text",
+          label: "Text",
+          content: /* @__PURE__ */ jsxs12("div", { className: panel, children: [
+            /* @__PURE__ */ jsx16(Input, { label: "Kicker", value: v.kicker, placeholder: "Brand Color \u2014 Summary", onChange: (kicker2) => update({ kicker: kicker2 }) }),
+            /* @__PURE__ */ jsx16(Input, { label: "Accent flourish", value: v.accent, placeholder: "tl;dr", onChange: (accent2) => update({ accent: accent2 }) }),
+            /* @__PURE__ */ jsx16(Input, { label: "Footer note", value: v.footNote, placeholder: "Brand Color \xB7 06 principles", onChange: (footNote2) => update({ footNote: footNote2 }) })
+          ] })
+        },
+        {
+          id: "display",
+          label: "Display",
+          content: /* @__PURE__ */ jsxs12("div", { className: panel, children: [
+            /* @__PURE__ */ jsx16(Checkbox, { label: "Show accent", checked: v.showAccent, onChange: (showAccent2) => update({ showAccent: showAccent2 }) }),
+            /* @__PURE__ */ jsx16(Checkbox, { label: "Show footer", checked: v.showFooter, onChange: (showFooter2) => update({ showFooter: showFooter2 }) }),
+            /* @__PURE__ */ jsx16(Checkbox, { label: "Show copy action", checked: v.showCopy, onChange: (showCopy2) => update({ showCopy: showCopy2 }) }),
+            /* @__PURE__ */ jsx16(Checkbox, { label: "Number the items", checked: v.numbered, onChange: (numbered2) => update({ numbered: numbered2 }) })
+          ] })
+        },
+        {
+          id: "nav",
+          label: "Navigation",
+          content: /* @__PURE__ */ jsxs12("div", { className: panel, children: [
+            /* @__PURE__ */ jsx16(
+              Select,
+              {
+                label: "Nav",
+                value: v.nav,
+                options: navOptions,
+                onChange: (value) => {
+                  const level = value;
+                  const prefill = level !== "off" && !v.navLabel.trim();
+                  update(prefill ? { nav: level, navLabel: v.kicker } : { nav: level });
+                }
+              }
+            ),
+            v.nav === "subheading" && /* @__PURE__ */ jsx16("p", { className: "-mt-2 text-xs text-base-contrast-light", children: "Nests under the nearest Link Heading above this plate; with none above it, it is left out of the nav." }),
+            navOn && /* @__PURE__ */ jsx16(
+              Input,
+              {
+                label: "Nav label",
+                value: v.navLabel,
+                onChange: (label) => update({ navLabel: label }),
+                error: v.navLabel.trim() ? void 0 : "Required while this plate is in the nav."
+              }
+            )
+          ] })
+        }
+      ]
+    }
+  );
+}
+
+// src/components/sections/SectionSummary/index.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var itemSchema = z6.object({
+  headline: z6.string().default("").describe('The principle, short and bold, e.g. "Saturation > Subtlety".'),
+  explainer: z6.string().default("").describe("Optional one-sentence explainer rendered softly beneath the headline."),
+  link: LinkValueSchema.default(DEFAULT_LINK).describe(
+    "Optional jump-link trailing the principle, back to the sub-section it distills. Set with the link picker: an internal page/section (label auto-derived from the page or section name) or an external URL. An empty link renders nothing, but its space is reserved so the layout stays stable."
+  ),
+  linkLabel: z6.string().default("").describe(
+    "The jump-link label. Auto-derived from the linked page or section name for internal links (kept in sync as you edit); for external links it falls back to the URL."
+  )
+});
+var schema5 = z6.object({
+  type: z6.literal("section_summary"),
+  content: z6.object({
+    kicker: z6.string().default("").describe(`Uppercase label in the plate's top-left, e.g. "Brand Color \u2014 Summary".`),
+    accent: z6.string().default("").describe(`Script flourish in the plate's top-right, e.g. "tl;dr".`),
+    items: z6.array(itemSchema).default([]).describe("The summary principles, in display order (numbered automatically)."),
+    footNote: z6.string().default("").describe(
+      `Contextual note in the footer's bottom-left, e.g. "Brand Color \xB7 06 principles". Empty = auto "<count> principles".`
+    )
+  }),
+  options: z6.object({
+    showAccent: z6.boolean().describe("Show the script accent (default true).").optional(),
+    showFooter: z6.boolean().describe("Show the footer row (default true).").optional(),
+    showCopy: z6.boolean().describe("Show the copy-summary action in the footer (default true).").optional(),
+    numbered: z6.boolean().describe("Show the accent-colored item numerals (default true).").optional(),
+    nav: z6.enum(["off", "heading", "subheading"]).describe(
+      'Put this plate in the page nav: "heading" = top level (like a Link Heading), "subheading" = nested under the preceding Link Heading (dropped from the nav if there is none, like a Sub Heading). Absent or "off" = not in the nav.'
+    ).optional(),
+    navLabel: z6.string().describe(
+      "The plate's nav entry text; REQUIRED while nav is on (no label = no entry). Its anchor is derived from it, suffixed -2, -3\u2026 if another anchor on the page already has it."
+    ).optional()
+  }).default({})
+});
+var SectionSummary_default = defineSection({
+  type: "section_summary",
+  category: "brand-guide",
+  label: "TL;DR / Summary",
+  icon: /* @__PURE__ */ jsx17(ListChecks, { size: 18 }),
+  schema: schema5,
+  authoringNote: `An end-of-section TL;DR plate: numbered principles (bold headline + optional one-sentence explainer) with an optional jump-link trailing each explainer back to the sub-section it distills. Place it as the LAST block of a major section. Each principle's jump-link is set with the link picker \u2014 an internal page/section (its label auto-derived from the page or section name) or an external URL; an empty link renders nothing. The footer shows footNote (or an auto "<count> principles" note) plus a copy action that puts the whole summary on the clipboard as plain text (kicker + "\u2022 headline \u2014 explainer" lines). Fully functional on the logged-out viewer \u2014 no hydration. Optionally appears in the page nav (options.nav heading/subheading with a required options.navLabel). Headlines/explainers are composed from truths in the section above; never introduce facts here that the section itself does not state.`,
+  component: function SectionSummarySection({ content, options, onChange, openModal }) {
+    const c = content.content;
+    const set = (patch) => onChange?.({ ...content, content: { ...c, ...patch } });
+    const id = content.id;
+    const opts = options ?? {};
+    const editorAnchor = useContext(SummaryAnchorsContext)[id ?? ""];
+    const navAnchor = editorAnchor?.anchor ?? content.navAnchor;
+    const navOn = opts.nav === "heading" || opts.nav === "subheading";
+    const navHint = !navOn ? void 0 : !opts.navLabel?.trim() ? "Not in the nav: add a nav label in Settings." : editorAnchor && !editorAnchor.inNav ? "Not in the nav: a Subheading needs a Link Heading above it." : void 0;
+    return /* @__PURE__ */ jsx17(
+      SectionSummaryBlock,
+      {
+        sectionId: id,
+        kicker: c.kicker,
+        accent: c.accent,
+        footNote: c.footNote,
+        items: c.items,
+        options: opts,
+        isEditMode: !!onChange,
+        openModal,
+        onKickerChange: onChange ? (kicker) => set({ kicker }) : void 0,
+        onAccentChange: onChange ? (accent) => set({ accent }) : void 0,
+        onFootNoteChange: onChange ? (footNote) => set({ footNote }) : void 0,
+        onItemsChange: onChange ? (items) => set({ items }) : void 0,
+        navAnchor,
+        navHint
+      }
+    );
+  },
+  // Inserts ready-to-use with one starter row to overwrite — no empty state to
+  // climb out of.
+  defaults: () => ({
+    type: "section_summary",
+    content: {
+      kicker: "Summary",
+      accent: "tl;dr",
+      items: [
+        {
+          headline: "First principle",
+          explainer: "One sentence on why it matters.",
+          link: DEFAULT_LINK,
+          linkLabel: ""
+        }
+      ],
+      footNote: ""
+    },
+    options: {}
+  }),
+  getLabel: (content) => content.content.kicker || "TL;DR / Summary",
+  settingsForm: SectionSummarySettings
+});
+
 // src/components/sections/brand-guide.ts
-var brandGuideSectionDefs = [Colors_default, IconList_default, DoDontMedia_default, Document_default];
+var brandGuideSectionDefs = [Colors_default, IconList_default, DoDontMedia_default, Document_default, SectionSummary_default];
 
 export {
   stripHtmlToPlainText,
   truncate,
   pluralize,
+  SummaryAnchorsContext,
   ColorSpaceSchema,
   ColorItemSchema,
   brandGuideSectionDefs