@drawnagency/primitives 0.1.113 → 0.1.114

package/dist/{chunk-Z7W3DQTR.js → chunk-7SAAJVDE.js}

@@ -1,9 +1,10 @@
 import {
+  SummaryAnchorsContext,
   brandGuideSectionDefs,
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "./chunk-KR2MHTNJ.js";
+} from "./chunk-N3G7DOU3.js";
 import {
   DeleteButton,
   DragHandle,
@@ -12,13 +13,19 @@ import {
   buildBlockDragData,
   buildBlockDropData,
   canDropBlock,
-  isBlockDragData
-} from "./chunk-6BZ2KNTP.js";
+  isBlockDragData,
+  useOptionalEditorContext
+} from "./chunk-PLANHXS7.js";
+import {
+  Checkbox,
+  CheckboxBox,
+  Tabs
+} from "./chunk-JR24U7FJ.js";
 import {
   EditableRichText,
   defineHeadingSection,
   useSanitizedHtml
-} from "./chunk-BDFTMGCL.js";
+} from "./chunk-PZPGJZRG.js";
 import {
   EditablePlainText,
   ImageDropZone,
@@ -28,20 +35,30 @@ import {
   containerGridClass,
   masonryColumnsClass,
   spacerHiddenClass
-} from "./chunk-DS4GCYV2.js";
+} from "./chunk-Y5QECJX7.js";
 import {
+  DropEdgeIndicator,
   useMediaLibrary,
   useResolvedMedia
-} from "./chunk-JH762VUH.js";
+} from "./chunk-5KSAS4VY.js";
 import {
   Kbd,
   Popover,
   PopoverItem,
   Tooltip
-} from "./chunk-IINIZBQB.js";
+} from "./chunk-JCDZAFX2.js";
+import {
+  Button
+} from "./chunk-GGYY3JQJ.js";
 import {
   embedUrl
 } from "./chunk-Y4JQGO6G.js";
+import {
+  getMediaProvider
+} from "./chunk-QHMKIODQ.js";
+import {
+  referenceItems
+} from "./chunk-VUYCRBJK.js";
 import {
   duplicateChildAt,
   isSpacer,
@@ -49,10 +66,22 @@ import {
   removeChildAt,
   setChildColSpan,
   trimTrailingSpacers
-} from "./chunk-CXZ5YJG4.js";
+} from "./chunk-L45X7DKX.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
+import {
+  siteTags,
+  tagDisplayLabel
+} from "./chunk-OAGJBCSH.js";
+import {
+  audiencePasses,
+  pageDisplayTitle,
+  pagesInNavOrder
+} from "./chunk-IP2SEBAJ.js";
+import {
+  REFERENCE_TYPE
+} from "./chunk-5GFACGSN.js";
 import {
   getSectionSchema
 } from "./chunk-DMCGN5AS.js";
@@ -61,8 +90,9 @@ import {
   getSection
 } from "./chunk-FTPETWXE.js";
 import {
+  ImageBackgroundSchema,
   SingleMediaReferenceSchema
-} from "./chunk-GGXZZ77Z.js";
+} from "./chunk-AASEGXNT.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema
@@ -181,7 +211,10 @@ var schema2 = z2.object({
     square: z2.boolean().describe("When true, crop the media to a 1:1 square aspect ratio.").optional(),
     showCaption: z2.boolean().describe("When true, render the asset's caption beneath it.").optional(),
     border: z2.boolean().describe("When true, draw a border around the media.").optional(),
-    objectFit: z2.enum(["cover", "contain"]).describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).").optional()
+    objectFit: z2.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 Media_default = defineSection({
@@ -220,11 +253,16 @@ var Media_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" }
   },
   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"] }
   ]
 });
@@ -408,7 +446,7 @@ import { RectangleHorizontal } from "lucide-react";
 // src/components/sections/Button/CTAButton.tsx
 import { Download } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-function Button({ text, link, download, onChange }) {
+function Button2({ text, link, download, onChange }) {
   const base = "inline-block rounded-outer px-6 py-3 font-bold transition-colors";
   const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
   if (onChange) {
@@ -443,7 +481,7 @@ function Button({ text, link, download, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx9("button", { className: cn("cursor-pointer", base, variant), children: text });
+  return /* @__PURE__ */ jsx9("span", { className: cn(base, variant), children: text });
 }
 
 // src/components/sections/Button/index.tsx
@@ -465,7 +503,7 @@ var Button_default = defineSection({
   schema: schema4,
   authoringNote: "A call-to-action button linking to an internal page or external URL, optionally as a file download. Use for a single prominent action.",
   component: ({ content, onChange }) => /* @__PURE__ */ jsx10(
-    Button,
+    Button2,
     {
       text: content.content.text,
       link: content.content.link,
@@ -600,22 +638,13 @@ var ChildBlockWrapper = forwardRef(
               ]
             }
           ),
-          closestEdge === "left" && /* @__PURE__ */ jsx12(
-            "div",
-            {
-              "data-drop-edge": "left",
-              className: "absolute bottom-0 left-0 top-0 z-10 w-0.5 -translate-x-1 bg-primary"
-            }
-          ),
-          closestEdge === "right" && /* @__PURE__ */ jsx12(
-            "div",
+          /* @__PURE__ */ jsx12(
+            DropEdgeIndicator,
             {
-              "data-drop-edge": "right",
-              className: "absolute bottom-0 right-0 top-0 z-10 w-0.5 translate-x-1 bg-primary"
+              edge: closestEdge,
+              style: closestEdge === "top" ? { transform: "translateY(-0.25rem)" } : closestEdge === "bottom" ? { transform: "translateY(0.25rem)" } : void 0
             }
           ),
-          closestEdge === "top" && /* @__PURE__ */ jsx12("div", { "data-drop-edge": "top", className: "absolute left-0 right-0 top-0 z-10 h-0.5 -translate-y-1 bg-primary" }),
-          closestEdge === "bottom" && /* @__PURE__ */ jsx12("div", { "data-drop-edge": "bottom", className: "absolute left-0 right-0 bottom-0 z-10 h-0.5 translate-y-1 bg-primary" }),
           children
         ]
       }
@@ -1261,6 +1290,356 @@ var Spacer_default = defineSection({
   defaults: () => ({ type: "spacer", content: {} })
 });
 
+// src/components/sections/Reference/index.tsx
+import { z as z7 } from "zod";
+import { Copy } from "lucide-react";
+
+// src/components/sections/Reference/ReferenceList.tsx
+import { useContext, useMemo } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+// src/components/shared/ReferenceSourcesContext.ts
+import { createContext } from "react";
+var ReferenceSourcesContext = createContext(null);
+
+// src/components/sections/Reference/ReferenceList.tsx
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var EXCLUSIONS = {
+  missing: {
+    reason: (i) => `Not found \u2014 deleted, unreadable, or not a top-level section (${i.sectionId})`,
+    renders: false,
+    inPreview: () => false
+  },
+  reference: { reason: () => "Another Reference \u2014 never shown", renders: false, inPreview: () => false },
+  "archived-page": { reason: () => "On an archived page", renders: true, inPreview: () => false },
+  "not-live": {
+    reason: (i) => i.source?.meta.status === "archived" ? "Archived section" : "Draft \u2014 publish it to show it here",
+    renders: true,
+    // The Unpublished preview dims drafts and hides archived sections.
+    inPreview: (i, viewBranch) => viewBranch === "saved" && i.source?.meta.status === "draft"
+  }
+};
+var shownInPreview = (item, viewBranch) => item.excluded === null || EXCLUSIONS[item.excluded].inPreview(item, viewBranch);
+var NO_SUMMARY_ANCHORS = {};
+function ReferenceList({ referenceId, content, isEditMode }) {
+  const sources = useContext(ReferenceSourcesContext);
+  const editor = useOptionalEditorContext();
+  const viewBranch = editor?.viewBranch ?? "saved";
+  const previewAudience = editor?.previewAudience ?? null;
+  const model = useMemo(() => {
+    if (!sources) return null;
+    const { index, sections, audiences } = sources;
+    const page = index.pages.find((p) => p.order.includes(referenceId));
+    const access = index.sections[referenceId]?.access ?? [];
+    const viewers = audiences.filter((a) => audiencePasses(page?.access ?? [], a.name) && audiencePasses(access, a.name));
+    const items = referenceItems({
+      referenceId,
+      content,
+      index,
+      allSections: sections,
+      audiences: viewers.map((a) => a.name)
+    });
+    return {
+      items,
+      // Copies carry the page-wide anchors the editor nav links to, so no
+      // heading here duplicates its source's DOM id or another Reference's.
+      copyById: sources.copies[referenceId] ?? {},
+      displayName: new Map(viewers.map((a) => [a.name, a.displayName])),
+      viewerCount: viewers.length,
+      // The site has audiences, yet none passes both the page's access and the
+      // Reference's own: no one can ever see a copy here. (Empty access is
+      // "everyone", so an unrestricted page or Reference never lands here.)
+      noViewers: audiences.length > 0 && viewers.length === 0,
+      // Absent `tags` is "not loaded": tagged sections can't be listed yet.
+      tagsUnloaded: index.tags === void 0 && content.tagIds.length > 0
+    };
+  }, [sources, referenceId, content]);
+  if (!sources || !model) {
+    return isEditMode ? /* @__PURE__ */ jsx18(Placeholder, { children: "Reference: shown as live copies on the published site." }) : null;
+  }
+  const shown = isEditMode ? model.items : model.items.filter((item) => shownInPreview(item, viewBranch));
+  const notes = [
+    model.tagsUnloaded && "Tags haven't loaded, so tagged sections aren't listed yet.",
+    model.noViewers && "No audience can see this Reference on this page"
+  ].filter((n) => !!n);
+  if (shown.length === 0) {
+    if (!isEditMode) return null;
+    if (notes.length === 0) return /* @__PURE__ */ jsx18(Placeholder, { children: "Reference: no tags or sections chosen yet." });
+    return /* @__PURE__ */ jsx18(Placeholder, { children: ["Reference: nothing to show.", ...notes].join(" ") });
+  }
+  return (
+    // The page's summary anchors are keyed by section id, so a copy of a
+    // summary also on this page would take its native anchor; emptying the
+    // context leaves every copy on the anchor stamped for it.
+    /* @__PURE__ */ jsx18(SummaryAnchorsContext.Provider, { value: NO_SUMMARY_ANCHORS, children: shown.map((item, n) => {
+      const { source } = item;
+      const exclusion = item.excluded ? EXCLUSIONS[item.excluded] : null;
+      const drawn = source && (!exclusion || exclusion.renders) ? source : null;
+      const definition = source ? getSection(source.section.type) : void 0;
+      const copy = drawn ? model.copyById[item.sectionId] ?? drawn.section : null;
+      const Component = definition?.component;
+      const reason = exclusion?.reason(item) ?? null;
+      const hiddenForAll = model.noViewers || model.viewerCount > 0 && item.hiddenFrom.length === model.viewerCount;
+      const previewHidden = previewAudience !== null && !!source && (!audiencePasses(item.page?.access ?? [], previewAudience) || !audiencePasses(source.meta.access, previewAudience));
+      const typeLabel = definition?.label ?? source?.section.type ?? "Section";
+      const label = source && definition?.getLabel?.(source.section) || typeLabel;
+      return /* @__PURE__ */ jsx18("div", { className: cn(n > 0 && "pt-9"), children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          "data-reference-item": item.sectionId,
+          className: cn(
+            // `group` mirrors the viewer's per-section wrapper for the copy's
+            // own hover styles; `group/copy` scopes Edit source to this copy,
+            // since the Reference's wrapper is a `group` too.
+            "group group/copy relative",
+            isEditMode && "rounded-outer hover:outline hover:outline-1 hover:outline-dashed hover:outline-primary/40",
+            previewHidden ? "opacity-15 transition-opacity duration-200 hover:opacity-100" : (isEditMode ? reason || hiddenForAll : item.excluded) && "opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs7("div", { inert: isEditMode, children: [
+              !copy && /* @__PURE__ */ jsx18("div", { className: "min-h-20 rounded-md border-2 border-dashed" }),
+              copy && Component && /* @__PURE__ */ jsx18(
+                Component,
+                {
+                  content: copy,
+                  options: "options" in copy ? copy.options : void 0,
+                  isEditMode: false
+                }
+              )
+            ] }),
+            isEditMode && /* @__PURE__ */ jsxs7("div", { className: "absolute right-2 top-2 z-20 flex max-w-[calc(100%-1rem)] flex-wrap items-center justify-end gap-1", children: [
+              n === 0 && notes.map((note) => /* @__PURE__ */ jsx18(Badge, { children: note }, note)),
+              reason && /* @__PURE__ */ jsx18(Badge, { children: reason }),
+              !reason && hiddenForAll && !model.noViewers && /* @__PURE__ */ jsx18(Badge, { children: "Hidden for all of this page's audiences" }),
+              !reason && !hiddenForAll && item.hiddenFrom.length > 0 && /* @__PURE__ */ jsx18(Badge, { children: `Hidden from ${item.hiddenFrom.map((a) => model.displayName.get(a) ?? a).join(", ")}` }),
+              source && /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2 rounded-full border border-base-200 bg-base px-2 py-0.5 text-xs opacity-0 shadow-sm transition-opacity focus-within:opacity-100 group-hover/copy:opacity-100", children: [
+                /* @__PURE__ */ jsxs7("span", { className: "max-w-56 truncate text-base-contrast-light", children: [
+                  item.page ? `${pageDisplayTitle(item.page.title)} \xB7 ` : "",
+                  label
+                ] }),
+                /* @__PURE__ */ jsxs7(Button, { variant: "ghost", className: "inline-flex items-center gap-0.5", onClick: () => sources.jumpToSection(item.sectionId), children: [
+                  "Edit source ",
+                  /* @__PURE__ */ jsx18(ArrowUpRight, { size: 12, "aria-hidden": "true" })
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ) }, item.sectionId);
+    }) })
+  );
+}
+function Badge({ children }) {
+  return /* @__PURE__ */ jsx18("span", { className: "rounded-full border border-warning bg-warning-bg px-2 py-0.5 text-xs text-warning shadow-sm", children });
+}
+function Placeholder({ children }) {
+  return /* @__PURE__ */ jsx18("div", { className: "flex min-h-20 items-center justify-center rounded-md border-2 border-dashed px-4 text-center text-xs text-base-contrast-light/50", children });
+}
+
+// src/components/sections/Reference/ReferenceSettings.tsx
+import { useContext as useContext2, useState as useState4 } from "react";
+
+// src/lib/thumb-views.ts
+function resolveThumbnailSrc(thumb, manifest) {
+  const item = manifest.images[thumb.src];
+  if (!item) return null;
+  const resolved = getMediaProvider().resolve(item, [200]);
+  if (!resolved) return null;
+  return resolved.tag === "img" || resolved.tag === "video" ? resolved.src : null;
+}
+function toThumbViews(thumbnails, manifest) {
+  return thumbnails.map(
+    (thumb) => thumb.type === "color" ? { kind: "color", value: thumb.value } : { kind: "image", src: resolveThumbnailSrc(thumb, manifest), alt: thumb.alt ?? "" }
+  );
+}
+
+// src/components/shared/SectionSummaryRow.tsx
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var MAX_THUMBS = 3;
+function SectionSummaryRow({ label, typeLabel, thumbnails, muted, trailing, className }) {
+  const shown = thumbnails.slice(0, MAX_THUMBS);
+  const remaining = Math.max(0, thumbnails.length - MAX_THUMBS);
+  return /* @__PURE__ */ jsxs8("div", { className: cn(
+    "flex min-w-0 flex-1 items-center gap-3 rounded-md border border-base-200 bg-base px-3 py-2",
+    muted && "opacity-50",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx19("div", { className: "text-xs text-base-contrast-light", children: typeLabel }),
+      /* @__PURE__ */ jsx19("div", { className: "truncate text-sm font-medium text-base-contrast", children: label })
+    ] }),
+    trailing,
+    shown.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "flex items-center -space-x-2", children: [
+      shown.map(
+        (thumb, i) => thumb.kind === "color" ? /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "h-8 w-8 rounded border-2 border-base",
+            style: { backgroundColor: thumb.value }
+          },
+          i
+        ) : thumb.src ? /* @__PURE__ */ jsx19(
+          "img",
+          {
+            src: thumb.src,
+            alt: thumb.alt,
+            className: "h-8 w-8 rounded border-2 border-base object-cover"
+          },
+          i
+        ) : /* @__PURE__ */ jsx19("div", { className: "h-8 w-8 rounded border-2 border-base bg-base-accent" }, i)
+      ),
+      remaining > 0 && /* @__PURE__ */ jsxs8("div", { className: "ml-1 flex h-8 w-8 items-center justify-center rounded border-2 border-base bg-base-accent text-xs text-base-contrast-light", children: [
+        "+",
+        remaining
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/sections/Reference/ReferenceSettings.tsx
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var panel = "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-px";
+function ReferenceSettings({
+  tagIds = [],
+  sectionIds = [],
+  onChange
+}) {
+  const sources = useContext2(ReferenceSourcesContext);
+  const [v, setV] = useState4({ tagIds, sectionIds });
+  const update = (next) => {
+    setV(next);
+    onChange({ content: next });
+  };
+  const toggle = (list, id, on) => on ? [...list, id] : list.filter((x) => x !== id);
+  if (!sources) return null;
+  const { index, sections, mediaManifest } = sources;
+  const tagsLoaded = index.tags !== void 0;
+  const tags = siteTags(index);
+  const deletedTagIds = tagsLoaded ? v.tagIds.filter((id) => !tags.some((t) => t.id === id)) : [];
+  const byId = new Map(sections.map((s) => [s.section.id, s]));
+  const pageGroups = pagesInNavOrder(index).map((page) => ({
+    page,
+    rows: page.order.flatMap((id) => {
+      const s = byId.get(id);
+      return s && (s.section.type !== REFERENCE_TYPE || v.sectionIds.includes(id)) ? [s] : [];
+    })
+  })).filter((g) => g.rows.length > 0);
+  const onAPage = new Set(pageGroups.flatMap((g) => g.rows.map((s) => s.section.id)));
+  const deletedSectionIds = v.sectionIds.filter((id) => !onAPage.has(id));
+  const tagsTab = /* @__PURE__ */ jsxs9("div", { className: panel, children: [
+    !tagsLoaded && /* @__PURE__ */ jsx20("p", { className: "text-sm text-base-contrast-light", children: "Tags haven't loaded, so they can't be changed right now." }),
+    tagsLoaded && tags.length === 0 && deletedTagIds.length === 0 && /* @__PURE__ */ jsx20("p", { className: "text-sm text-base-contrast-light", children: "No tags yet. Add them from a section's Tags pill or under Site settings \u2192 Tags." }),
+    tags.map((t) => /* @__PURE__ */ jsx20(
+      Checkbox,
+      {
+        label: tagDisplayLabel(t.label),
+        description: pluralize(t.sectionIds.length, "section"),
+        checked: v.tagIds.includes(t.id),
+        onChange: (on) => update({ ...v, tagIds: toggle(v.tagIds, t.id, on) })
+      },
+      t.id
+    )),
+    deletedTagIds.map((id) => /* @__PURE__ */ jsx20(
+      Checkbox,
+      {
+        label: "Deleted tag",
+        description: "Shows nothing. Untick to remove it.",
+        checked: true,
+        onChange: () => update({ ...v, tagIds: toggle(v.tagIds, id, false) })
+      },
+      id
+    ))
+  ] });
+  const sectionRow = (id, label, typeLabel, thumbs, status) => {
+    const checked = v.sectionIds.includes(id);
+    return /* @__PURE__ */ jsx20(
+      "button",
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": checked,
+        "aria-label": `${typeLabel}: ${label}`,
+        onClick: () => update({ ...v, sectionIds: toggle(v.sectionIds, id, !checked) }),
+        className: "flex w-full cursor-pointer text-left",
+        children: /* @__PURE__ */ jsx20(
+          SectionSummaryRow,
+          {
+            label,
+            typeLabel,
+            thumbnails: thumbs,
+            className: cn(checked && "border-primary"),
+            trailing: /* @__PURE__ */ jsxs9(Fragment3, { children: [
+              status && status !== "live" && /* @__PURE__ */ jsx20("span", { className: "text-xs capitalize text-base-contrast-light", children: status }),
+              /* @__PURE__ */ jsx20(CheckboxBox, { checked })
+            ] })
+          }
+        )
+      },
+      id
+    );
+  };
+  const sectionsTab = /* @__PURE__ */ jsxs9("div", { className: panel, children: [
+    pageGroups.map(({ page, rows }) => /* @__PURE__ */ jsxs9("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs9("h3", { className: "text-xs font-medium uppercase tracking-wide text-base-contrast-light", children: [
+        pageDisplayTitle(page.title),
+        page.status === "archived" && " (archived)"
+      ] }),
+      rows.map((s) => {
+        const def = getSection(s.section.type);
+        const typeLabel = def?.label ?? s.section.type;
+        return sectionRow(
+          s.section.id,
+          def?.getLabel?.(s.section) ?? typeLabel,
+          typeLabel,
+          toThumbViews(def?.getThumbnails?.(s.section) ?? [], mediaManifest),
+          s.meta.status
+        );
+      })
+    ] }, page.id)),
+    deletedSectionIds.length > 0 && /* @__PURE__ */ jsxs9("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx20("h3", { className: "text-xs font-medium uppercase tracking-wide text-base-contrast-light", children: "Not found" }),
+      deletedSectionIds.map((id) => sectionRow(id, "Section not found", "Deleted or can't be read", []))
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx20(
+    Tabs,
+    {
+      fullBleedTabBar: true,
+      tabs: [
+        { id: "tags", label: `Tags${v.tagIds.length ? ` (${v.tagIds.length})` : ""}`, content: tagsTab },
+        { id: "sections", label: `Sections${v.sectionIds.length ? ` (${v.sectionIds.length})` : ""}`, content: sectionsTab }
+      ]
+    }
+  );
+}
+
+// src/components/sections/Reference/index.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var schema7 = z7.object({
+  type: z7.literal(REFERENCE_TYPE),
+  content: z7.object({
+    tagIds: z7.array(z7.string()).default([]).describe("Ids of tags from the site's tag registry (tags.json); every section carrying one of them is shown."),
+    sectionIds: z7.array(z7.string()).default([]).describe("Ids of individually picked sections to show, from any page. Combined with the tagged sections as a union.")
+  })
+});
+var Reference_default = defineSection({
+  type: REFERENCE_TYPE,
+  label: "Reference",
+  icon: /* @__PURE__ */ jsx21(Copy, { size: 18 }),
+  schema: schema7,
+  authoringNote: "Shows read-only, live copies of other sections: every section carrying one of tagIds, plus every id in sectionIds (overlaps listed once). Resolved at render time from the published site, so edits to a source show up wherever it is referenced \u2014 never copy content to reuse it. Items are listed in site order (pages in nav order, then position on the page), whatever order the ids are stored in. Only live sections on live pages appear (hidden pages count, archived pages do not); a viewer sees an item only if they could see it on its own page, so a Reference never widens who sees what. References in the source set are skipped, itself included; containers come whole. Headings inside the copies join this page's nav, anchored <heading>-<this Reference's id>. Unknown ids and deleted tags drop silently on the viewer, but the MCP connector rejects them on save \u2014 create a tag (save_sections `tags`) before naming it. Top level only \u2014 not inside a container.",
+  // Viewer paths never render this component: buildViewerPage replaces a
+  // Reference with the sections it resolves to. The editor canvas renders the
+  // same copies here, in edit mode and preview alike.
+  component: ({ content, isEditMode }) => {
+    const id = content.id ?? "";
+    return /* @__PURE__ */ jsx21(ReferenceList, { referenceId: id, content: content.content, isEditMode });
+  },
+  settingsForm: ReferenceSettings,
+  defaults: () => ({ type: REFERENCE_TYPE, content: { tagIds: [], sectionIds: [] } }),
+  getLabel: () => "Reference"
+});
+
 // src/components/sections/core-sections.ts
 var coreSectionDefs = [
   LinkHeading_default,
@@ -1271,7 +1650,8 @@ var coreSectionDefs = [
   Video_default,
   Button_default,
   Container_default,
-  Spacer_default
+  Spacer_default,
+  Reference_default
 ];
 
 // src/components/sections/all-sections.ts

package/dist/{chunk-S2L3BPLS.js → chunk-7SX42OP4.js}

@@ -1,6 +1,6 @@
 import {
   env
-} from "./chunk-WKZ7OENC.js";
+} from "./chunk-BQ5TZZUE.js";
 
 // src/auth/security.ts
 function requireSessionSecret() {

package/dist/{chunk-GGXZZ77Z.js → chunk-AASEGXNT.js}

@@ -26,7 +26,7 @@ var TextLineSchema = z.discriminatedUnion("type", [
 var BaseMediaRef = z.object({
   imageId: z.string().default("").describe("Media-library id of the image/video asset."),
   caption: z.union([z.string(), z.array(z.string())]).optional().describe("Optional caption: a single string, or multiple lines as an array of strings."),
-  background: z.string().optional().describe("Optional CSS background color/value shown behind a transparent image."),
+  background: z.string().optional().describe("Legacy; not rendered. For a backdrop behind a media section's image, use the section's options.background."),
   invertFrom: z.string().optional().describe("Optional CSS color; the image inverts when the page background matches it (e.g. for dark-mode logo swaps)."),
   border: z.boolean().optional().describe("When true, draw a border around the media."),
   objectFit: z.enum(["cover", "contain"]).optional().describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).")
@@ -59,6 +59,22 @@ var MediaReferenceSchema = z.discriminatedUnion("type", [
 ]);
 var SingleMediaReferenceSchema = z.discriminatedUnion("type", [ImageRef, VideoRef]);
 var HexColorSchema = z.string().regex(/^#[0-9a-fA-F]{6}$/, "must be a 6-digit hex color");
+var ImageBackgroundSurfaceSchema = z.enum(["none", "light", "dark"]);
+var ImageBackgroundSchema = z.discriminatedUnion("mode", [
+  z.object({
+    mode: z.literal("theme").describe("Pick a site surface separately for light and dark mode."),
+    light: ImageBackgroundSurfaceSchema.describe(
+      "Backdrop in light mode: 'none', the site's light surface, or its dark surface."
+    ),
+    dark: ImageBackgroundSurfaceSchema.describe(
+      "Backdrop in dark mode: 'none', the site's light surface, or its dark surface."
+    )
+  }),
+  z.object({
+    mode: z.literal("custom").describe("Use one custom color in both modes."),
+    color: HexColorSchema.describe("One backdrop color for both light and dark mode, as a 6-digit hex.")
+  })
+]);
 var FontNameSchema = z.string().max(120).regex(/^[a-zA-Z0-9 ,'"-]+$/, "contains invalid font-name characters");
 
 export {
@@ -66,5 +82,6 @@ export {
   MediaReferenceSchema,
   SingleMediaReferenceSchema,
   HexColorSchema,
+  ImageBackgroundSchema,
   FontNameSchema
 };

package/dist/{chunk-WKZ7OENC.js → chunk-BQ5TZZUE.js}

@@ -2,7 +2,11 @@
 function env(key) {
   return import.meta.env?.[key] ?? (typeof process !== "undefined" ? process.env?.[key] : void 0) ?? "";
 }
+function isProd() {
+  return import.meta.env?.PROD === true;
+}
 
 export {
-  env
+  env,
+  isProd
 };

package/dist/chunk-DIMDRBFK.js

@@ -0,0 +1,11 @@
+// src/lib/reorder.ts
+function computeReorderTarget(fromIndex, overIndex, edge) {
+  let toIndex = overIndex;
+  if (edge === "bottom") toIndex = overIndex + 1;
+  if (fromIndex < toIndex) toIndex--;
+  return fromIndex === toIndex ? null : toIndex;
+}
+
+export {
+  computeReorderTarget
+};