@drawnagency/primitives 0.1.65 → 0.1.67

package/dist/{chunk-QYQ3DQHI.js → chunk-KM6HOW4H.js}

@@ -9,7 +9,7 @@ import {
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-VMDKWUMT.js";
+} from "./chunk-XNGG5AGI.js";
 import {
   AddIcon,
   DeleteIcon,
@@ -51,8 +51,8 @@ var ColorSpaceSchema = z.object({
   { message: "At least one color space must be defined" }
 );
 var ColorItemSchema = z.object({
-  name: z.string().optional(),
-  spaces: z.array(ColorSpaceSchema).min(1)
+  name: z.string().describe("Optional display name for this color (e.g. 'Brand Primary').").optional(),
+  spaces: z.array(ColorSpaceSchema).describe("One or more color-space definitions (hex/rgb/cmyk/pantone) for this color.").min(1)
 });
 
 // src/components/brandguide/Colors.tsx
@@ -329,12 +329,14 @@ function pluralize(n, word) {
 import { jsx as jsx3 } from "react/jsx-runtime";
 var schema = z2.object({
   type: z2.literal("colors"),
-  content: z2.object({ colors: z2.array(ColorItemSchema) }),
+  content: z2.object({
+    colors: z2.array(ColorItemSchema).describe("The list of brand colors, each with one or more color-space values (hex/rgb/cmyk/pantone).")
+  }),
   options: z2.object({
-    label: z2.string().optional(),
-    columns: z2.number().int().min(2).max(4).optional(),
-    collapsing: z2.boolean().optional(),
-    showLabel: z2.boolean().optional()
+    label: z2.string().describe("Optional heading shown above the palette.").optional(),
+    columns: z2.number().int().min(2).max(4).describe("Number of swatch columns (2\u20134).").optional(),
+    collapsing: z2.boolean().describe("When true, use the compact collapsing swatch layout.").optional(),
+    showLabel: z2.boolean().describe("When true, show the palette label.").optional()
   }).optional()
 });
 var Colors_default = defineSection({
@@ -343,6 +345,7 @@ var Colors_default = defineSection({
   label: "Colors",
   icon: /* @__PURE__ */ jsx3(Palette, { size: 18 }),
   schema,
+  authoringNote: "A brand color palette. Each color may carry hex/rgb/cmyk/pantone values. Use to document brand colors with swatches.",
   component: ({ content, options, onChange, openModal }) => /* @__PURE__ */ jsx3(
     Colors,
     {
@@ -377,7 +380,7 @@ var Colors_default = defineSection({
 
 // src/components/sections/IconList/index.tsx
 import { z as z3 } from "zod";
-import { List } from "lucide-react";
+import { List, Columns2 } from "lucide-react";
 
 // src/components/sections/IconList/IconList.tsx
 import { useRef as useRef3, useEffect as useEffect4, useState as useState3, useCallback } from "react";
@@ -514,6 +517,7 @@ function IconList({
   icon = null,
   showLabel = true,
   stackText = false,
+  dodont,
   labelClassName = "font-bold text-base-contrast",
   textClassName = "text-base-contrast-light",
   iconClassName = "text-primary",
@@ -526,11 +530,11 @@ function IconList({
       onChange?.({
         type: "icon_list",
         content: { items: newItems },
-        options: { icon, showLabel, stackText }
+        options: { icon, showLabel, stackText, dodont }
       });
       onItemsChange?.(newItems);
     },
-    [onChange, onItemsChange, icon, showLabel, stackText]
+    [onChange, onItemsChange, icon, showLabel, stackText, dodont]
   );
   if (!isEditMode) {
     return /* @__PURE__ */ jsx6(
@@ -540,6 +544,7 @@ function IconList({
         defaultIcon: icon,
         showLabel,
         stackText,
+        dodont,
         labelClassName,
         textClassName,
         iconClassName
@@ -553,6 +558,7 @@ function IconList({
       defaultIcon: icon,
       showLabel,
       stackText,
+      dodont,
       labelClassName,
       textClassName,
       iconClassName,
@@ -560,15 +566,20 @@ function IconList({
     }
   );
 }
-function resolveIcon(item, defaultIcon) {
+function resolveIcon(item, defaultIcon, sectionDodont) {
   if (item.dodont === "do") return getIcon("check") ?? null;
   if (item.dodont === "dont") return getIcon("x") ?? null;
-  const id = item.icon ?? defaultIcon;
-  return id ? getIcon(id) : null;
+  if (item.icon) return getIcon(item.icon) ?? null;
+  if (sectionDodont === "do") return getIcon("check") ?? null;
+  if (sectionDodont === "dont") return getIcon("x") ?? null;
+  return defaultIcon ? getIcon(defaultIcon) : null;
 }
-function resolveIconColor(item, iconClassName) {
+function resolveIconColor(item, iconClassName, sectionDodont) {
   if (item.dodont === "do") return "text-green-600";
   if (item.dodont === "dont") return "text-red-600";
+  if (item.icon) return iconClassName;
+  if (sectionDodont === "do") return "text-green-600";
+  if (sectionDodont === "dont") return "text-red-600";
   return iconClassName;
 }
 function ViewIconList({
@@ -576,14 +587,15 @@ function ViewIconList({
   defaultIcon,
   showLabel,
   stackText,
+  dodont,
   labelClassName,
   textClassName,
   iconClassName
 }) {
-  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon, dodont));
   return /* @__PURE__ */ jsx6("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
-    const iconEntry = resolveIcon(item, defaultIcon);
-    const iconColor = resolveIconColor(item, iconClassName);
+    const iconEntry = resolveIcon(item, defaultIcon, dodont);
+    const iconColor = resolveIconColor(item, iconClassName, dodont);
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -625,6 +637,7 @@ function EditIconList({
   defaultIcon,
   showLabel,
   stackText,
+  dodont,
   labelClassName,
   textClassName,
   iconClassName,
@@ -669,6 +682,7 @@ function EditIconList({
         hasAnyIcon,
         showLabel,
         stackText,
+        dodont,
         labelClassName,
         textClassName,
         iconClassName,
@@ -711,6 +725,7 @@ function EditableRow({
   hasAnyIcon,
   showLabel,
   stackText,
+  dodont,
   labelClassName,
   textClassName,
   iconClassName,
@@ -727,9 +742,9 @@ function EditableRow({
   const [pickerOpen, setPickerOpen] = useState3(false);
   const [dodontOpen, setDodontOpen] = useState3(false);
   const [editingSuppressed, setEditingSuppressed] = useState3(false);
-  const iconEntry = resolveIcon(item, defaultIcon);
+  const iconEntry = resolveIcon(item, defaultIcon, dodont);
   const effectiveIconId = item.icon ?? defaultIcon ?? null;
-  const iconColor = resolveIconColor(item, iconClassName);
+  const iconColor = resolveIconColor(item, iconClassName, dodont);
   useEffect4(() => {
     const row = rowRef.current;
     const handle = handleRef.current;
@@ -967,21 +982,59 @@ function TrailingDropZone({
 
 // src/components/sections/IconList/IconListSettings.tsx
 import { useState as useState4 } from "react";
+import { Check as Check3, X as X3 } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function IconListSettings({
   icon: initialIcon,
   showLabel: initialShowLabel,
   stackText: initialStackText,
+  dodont: initialDodont,
   onChange
 }) {
   const [icon, setIcon] = useState4(initialIcon);
   const [showLabel, setShowLabel] = useState4(initialShowLabel);
   const [stackText, setStackText] = useState4(initialStackText);
+  const [dodont, setDodont] = useState4(initialDodont);
   const [pickerOpen, setPickerOpen] = useState4(false);
-  const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, ...overrides } });
-  const showIcons = icon !== null;
+  const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, dodont, ...overrides } });
   const iconEntry = icon ? getIcon(icon) : null;
+  const dodontActive = dodont === "do" || dodont === "dont";
+  const tile = (value, label, aria, glyph, tint) => /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      "aria-label": aria,
+      "aria-pressed": dodont === value,
+      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"
+      ),
+      onClick: () => {
+        setDodont(value);
+        emit({ dodont: value });
+      },
+      children: [
+        glyph,
+        /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium", children: label })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx7(FormLabel, { children: "Do / Don't list" }),
+      /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-3 gap-2", children: [
+        tile(
+          void 0,
+          "None",
+          "No do/don't",
+          /* @__PURE__ */ jsx7("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__ */ jsx7(Check3, { size: 20 }), "text-green-600"),
+        tile("dont", "Don't", "Don't list", /* @__PURE__ */ jsx7(X3, { size: 20 }), "text-red-600")
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
       /* @__PURE__ */ jsx7(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }),
       /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
@@ -989,15 +1042,21 @@ function IconListSettings({
           "button",
           {
             id: "icon-picker-btn",
-            className: "cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary",
-            onClick: () => setPickerOpen((prev) => !prev),
+            disabled: dodontActive,
+            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"
+            ),
+            onClick: () => {
+              if (!dodontActive) setPickerOpen((prev) => !prev);
+            },
             children: [
               iconEntry && /* @__PURE__ */ jsx7(iconEntry.icon, { size: 16 }),
               /* @__PURE__ */ jsx7("span", { children: iconEntry?.label ?? "None" })
             ]
           }
         ),
-        icon && /* @__PURE__ */ jsx7(
+        icon && !dodontActive && /* @__PURE__ */ jsx7(
           "button",
           {
             className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast",
@@ -1009,7 +1068,8 @@ function IconListSettings({
           }
         )
       ] }),
-      pickerOpen && /* @__PURE__ */ jsx7("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx7(
+      dodontActive && /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-base-contrast-light/70", children: "Whole-list Do/Don't overrides the default icon." }),
+      pickerOpen && !dodontActive && /* @__PURE__ */ jsx7("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx7(
         IconPicker,
         {
           selected: icon,
@@ -1060,20 +1120,40 @@ var IconListItemSchema = z3.object({
 var schema2 = z3.object({
   type: z3.literal("icon_list"),
   content: z3.object({
-    items: z3.array(IconListItemSchema)
+    items: z3.array(IconListItemSchema).describe(
+      "The list entries. Each item has a label, descriptive text, an optional icon, and an optional do/don't marker."
+    )
   }),
   options: z3.object({
-    icon: z3.string().nullable().optional(),
-    showLabel: z3.boolean().optional(),
-    stackText: z3.boolean().optional()
+    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()
   }).optional()
 });
+var doDontListPreset = {
+  id: "do_dont_list",
+  label: "Do / Don't list",
+  icon: /* @__PURE__ */ jsx8(Columns2, { size: 18 }),
+  build: (newId) => ({
+    type: "container",
+    content: {
+      columns: 2,
+      flow: "row",
+      children: [
+        { id: newId(), type: "icon_list", content: { items: [{ label: "", text: "" }] }, options: { dodont: "do" } },
+        { id: newId(), type: "icon_list", content: { items: [{ label: "", text: "" }] }, options: { dodont: "dont" } }
+      ]
+    }
+  })
+};
 var IconList_default = defineSection({
   type: "icon_list",
   category: "brand-guide",
   label: "Icon List",
   icon: /* @__PURE__ */ jsx8(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.",
   component: ({ content, options, onChange }) => /* @__PURE__ */ jsx8(
     IconList,
     {
@@ -1081,6 +1161,7 @@ var IconList_default = defineSection({
       icon: options?.icon,
       showLabel: options?.showLabel,
       stackText: options?.stackText,
+      dodont: options?.dodont,
       onChange: onChange ? (c) => onChange(c) : void 0
     }
   ),
@@ -1089,7 +1170,8 @@ var IconList_default = defineSection({
     content: { items: [{ label: "", text: "" }] }
   }),
   getLabel: (content) => pluralize(content.content.items.length, "icon"),
-  settingsForm: IconListSettings
+  settingsForm: IconListSettings,
+  presets: [doDontListPreset]
 });
 
 // src/components/sections/DoDontMedia/index.tsx
@@ -1097,11 +1179,11 @@ import { z as z4 } from "zod";
 import { Image as ImageIcon } from "lucide-react";
 
 // src/components/sections/DoDontMedia/DoDontMediaBlock.tsx
-import { Check as Check3, X as X3 } from "lucide-react";
+import { Check as Check4, X as X4 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }) {
   return /* @__PURE__ */ jsxs7("div", { children: [
-    /* @__PURE__ */ jsx9("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx9(Check3, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx9(X3, { size: 28, className: "text-red-600" }) }),
+    /* @__PURE__ */ jsx9("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx9(Check4, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx9(X4, { size: 28, className: "text-red-600" }) }),
     /* @__PURE__ */ jsx9(
       MediaBlock,
       {
@@ -1120,15 +1202,19 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 var schema3 = z4.object({
   type: z4.literal("dodont_media"),
   content: z4.object({
-    ref: SingleMediaReferenceSchema,
-    link: LinkValueSchema.optional(),
-    dodont: z4.enum(["do", "dont"])
+    ref: SingleMediaReferenceSchema.describe(
+      "The image or video asset to display (a media reference by id). Required."
+    ),
+    link: LinkValueSchema.describe(
+      "Optional link wrapping the media \u2014 an internal page or a safe external URL."
+    ).optional(),
+    dodont: z4.enum(["do", "dont"]).describe("Whether this is a 'do' (correct) or 'dont' (incorrect) example.")
   }),
   options: z4.object({
-    square: z4.boolean().optional(),
-    showCaption: z4.boolean().optional(),
-    border: z4.boolean().optional(),
-    objectFit: z4.enum(["cover", "contain"]).optional()
+    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()
   }).default({})
 });
 var DoDontMedia_default = defineSection({
@@ -1137,6 +1223,7 @@ var DoDontMedia_default = defineSection({
   category: "brand-guide",
   icon: /* @__PURE__ */ jsx10(ImageIcon, { size: 18 }),
   schema: schema3,
+  authoringNote: "A single image or video tagged as a 'do' or 'don't' example. Use inside a Container to build side-by-side do/don't comparisons of visual usage.",
   component: ({ content, options, onChange }) => /* @__PURE__ */ jsx10(
     DoDontMediaBlock,
     {

package/dist/{chunk-CBWK3KPV.js → chunk-VU3XR362.js}

@@ -200,11 +200,15 @@ function resolveManifestReferences(content, manifest, sizes, provider) {
         if ("srcSet" in resolved && resolved.srcSet) {
           patch.srcset = resolved.srcSet;
         }
+        patch.width = resolved.width;
+        patch.height = resolved.height;
       } else if (resolved && resolved.tag === "video") {
         patch.src = resolved.src;
         if (resolved.poster) {
           patch.poster = resolved.poster;
         }
+        patch.width = resolved.width;
+        patch.height = resolved.height;
       }
       return { ...obj, ...patch };
     }

package/dist/{chunk-FECCYOPJ.js → chunk-WJ7RZ6CC.js}

@@ -1,6 +1,6 @@
 import {
   EditablePlainText
-} from "./chunk-VMDKWUMT.js";
+} from "./chunk-XNGG5AGI.js";
 import {
   usePages
 } from "./chunk-4E66N6UV.js";
@@ -39,7 +39,15 @@ function HeadingSection({ heading, tag, placeholder, className, onChange }) {
 // src/components/primitives/defineHeadingSection.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function defineHeadingSection(config) {
-  const content = config.navExclusion ? z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }) : z.object({ heading: z.string() });
+  const heading = z.string().describe(
+    "The heading text. Plain text, one line; keep concise \u2014 it appears verbatim in the on-page heading and (unless excluded) the navigation."
+  );
+  const content = config.navExclusion ? z.object({
+    heading,
+    excludeFromNav: z.boolean().describe(
+      "When true, this heading is omitted from the generated navigation tree while still rendering on the page."
+    ).optional()
+  }) : z.object({ heading });
   const schema = z.object({ type: z.literal(config.type), content });
   return defineSection({
     type: config.type,
@@ -47,13 +55,14 @@ function defineHeadingSection(config) {
     icon: config.icon,
     schema,
     navRole: config.navRole,
+    authoringNote: config.authoringNote,
     component: ({ content: content2, onChange }) => /* @__PURE__ */ jsx2(
       HeadingSection,
       {
         heading: content2.content.heading,
         tag: config.tag,
         placeholder: config.placeholder,
-        onChange: onChange ? (heading) => onChange({ ...content2, content: { ...content2.content, heading } }) : void 0
+        onChange: onChange ? (heading2) => onChange({ ...content2, content: { ...content2.content, heading: heading2 } }) : void 0
       }
     ),
     defaults: () => ({ type: config.type, content: { heading: config.defaultHeading } }),

package/dist/{chunk-VMDKWUMT.js → chunk-XNGG5AGI.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-I5737FJY.js";
 import {
   getMediaProvider
-} from "./chunk-CBWK3KPV.js";
+} from "./chunk-VU3XR362.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -126,6 +126,7 @@ function EditablePlainText({
 }
 
 // src/components/primitives/ResolvedMedia.tsx
+import { useState as useState2 } from "react";
 import { ImageIcon } from "lucide-react";
 
 // src/hooks/useResolvedMedia.ts
@@ -152,9 +153,11 @@ function useResolvedMedia(imageId) {
     const item = manifestItem ?? pendingItem;
     const alt = item?.alt ?? "";
     const kind = item?.kind ?? "image";
+    const width = item?.width;
+    const height = item?.height;
     const localUrl = pendingLocalUrls[imageId];
     if (localUrl) {
-      return { src: localUrl, srcset: void 0, poster: void 0, alt, kind };
+      return { src: localUrl, srcset: void 0, poster: void 0, alt, kind, width, height };
     }
     if (manifestItem) {
       const provider = getMediaProvider();
@@ -165,24 +168,28 @@ function useResolvedMedia(imageId) {
           srcset: "srcSet" in resolved ? resolved.srcSet : void 0,
           poster: void 0,
           alt,
-          kind
+          kind,
+          width: resolved.width,
+          height: resolved.height
         };
       }
       if (resolved && resolved.tag === "video") {
-        return { src: resolved.src, srcset: void 0, poster: resolved.poster, alt, kind };
+        return { src: resolved.src, srcset: void 0, poster: resolved.poster, alt, kind, width: resolved.width, height: resolved.height };
       }
     }
-    return { src: void 0, srcset: void 0, poster: void 0, alt, kind };
+    return { src: void 0, srcset: void 0, poster: void 0, alt, kind, width, height };
   }, [imageId, ctx]);
 }
 
 // src/components/primitives/ResolvedMedia.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ResolvedMedia({
   imageId,
   src: propSrc,
   srcset: propSrcset,
   alt: propAlt,
+  width: propWidth,
+  height: propHeight,
   className,
   imgClassName,
   invertFrom
@@ -193,22 +200,66 @@ function ResolvedMedia({
   const poster = resolved.poster;
   const alt = propAlt ?? resolved.alt;
   const kind = resolved.kind;
+  const width = propWidth ?? resolved.width;
+  const height = propHeight ?? resolved.height;
+  const [loaded, setLoaded] = useState2(false);
   const invertClass = invertFrom === "light" ? "invert dark:invert-0" : invertFrom === "dark" ? "dark:invert" : void 0;
-  const mediaClass = cn("h-full w-full", imgClassName, invertClass);
-  return /* @__PURE__ */ jsx("div", { className, children: src ? kind === "video" ? /* @__PURE__ */ jsx("video", { src, poster, muted: true, playsInline: true, loop: true, autoPlay: true, className: mediaClass }) : /* @__PURE__ */ jsx("img", { src, srcSet: srcset, alt, className: mediaClass }) : /* @__PURE__ */ jsxs("div", { className: "flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50", children: [
+  const mediaClass = cn("relative h-full w-full", imgClassName, invertClass);
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: src ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        "data-testid": "media-placeholder",
+        className: cn(
+          "pointer-events-none absolute inset-0 bg-base-accent transition-opacity duration-300",
+          loaded ? "opacity-0" : "opacity-100"
+        )
+      }
+    ),
+    kind === "video" ? /* @__PURE__ */ jsx(
+      "video",
+      {
+        src,
+        poster,
+        width,
+        height,
+        muted: true,
+        playsInline: true,
+        loop: true,
+        autoPlay: true,
+        className: mediaClass,
+        onLoadedData: () => setLoaded(true)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        srcSet: srcset,
+        alt,
+        width,
+        height,
+        loading: "lazy",
+        decoding: "async",
+        className: mediaClass,
+        onLoad: () => setLoaded(true),
+        onError: () => setLoaded(true)
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50", children: [
     /* @__PURE__ */ jsx(ImageIcon, { size: 24 }),
     /* @__PURE__ */ jsx("span", { className: "text-sm", children: "No Image" })
   ] }) });
 }
 
 // src/components/primitives/ImageDropZone.tsx
-import { useState as useState2 } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ACCEPTED = /^(image|video)\//;
 function ImageDropZone({ onImageSelected, className, children }) {
   const mediaLibrary = useMediaLibrary();
-  const [dragging, setDragging] = useState2(false);
-  if (!mediaLibrary) return /* @__PURE__ */ jsx2(Fragment, { children });
+  const [dragging, setDragging] = useState3(false);
+  if (!mediaLibrary) return /* @__PURE__ */ jsx2(Fragment2, { children });
   const maxFileSize = mediaLibrary.siteConfig?.media.maxFileSize;
   const hasFiles = (e) => e.dataTransfer.types.includes("Files");
   const handleDragOver = (e) => {
@@ -265,6 +316,9 @@ function MediaBlock({ refValue, options, link, isEditMode, onRefChange }) {
   const captionStr = refValue.caption ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption : "";
   const replace = onRefChange ? (imageId) => onRefChange({ ...refValue, imageId }) : void 0;
   const baked = refValue;
+  const bakedWidth = typeof baked.width === "number" ? baked.width : void 0;
+  const bakedHeight = typeof baked.height === "number" ? baked.height : void 0;
+  const aspectRatio = bakedWidth && bakedHeight && !options.square ? `${bakedWidth} / ${bakedHeight}` : void 0;
   const resolved = /* @__PURE__ */ jsx3(
     ResolvedMedia,
     {
@@ -272,6 +326,8 @@ function MediaBlock({ refValue, options, link, isEditMode, onRefChange }) {
       src: baked.src,
       srcset: baked.srcset,
       alt: baked.alt,
+      width: bakedWidth,
+      height: bakedHeight,
       className: "h-full w-full",
       imgClassName: fitClass,
       invertFrom: refValue.invertFrom
@@ -293,6 +349,7 @@ function MediaBlock({ refValue, options, link, isEditMode, onRefChange }) {
           options.square && "aspect-square",
           onImageClick && "cursor-pointer"
         ),
+        style: aspectRatio ? { aspectRatio } : void 0,
         onClick: onImageClick,
         onPointerDown: onImageClick ? (e) => e.stopPropagation() : void 0,
         children: media
@@ -313,7 +370,7 @@ function MediaBlock({ refValue, options, link, isEditMode, onRefChange }) {
 }
 
 // src/components/primitives/EditableGrid.tsx
-import { useRef as useRef4, useEffect as useEffect4, useState as useState4 } from "react";
+import { useRef as useRef4, useEffect as useEffect4, useState as useState5 } from "react";
 import { ImageIcon as ImageIcon2 } from "lucide-react";
 
 // src/lib/container-grid.ts
@@ -344,7 +401,7 @@ var spacerHiddenClass = {
 };
 
 // src/components/primitives/useEditableCollection.ts
-import { useState as useState3, useCallback as useCallback3, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback as useCallback3, useRef as useRef3, useEffect as useEffect3 } from "react";
 var nextId = 0;
 function uid() {
   return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `_id_${nextId++}_${Date.now()}`;
@@ -357,7 +414,7 @@ function useEditableCollection({
   onChange,
   createItem
 }) {
-  const [wrappedItems, setWrappedItems] = useState3(
+  const [wrappedItems, setWrappedItems] = useState4(
     () => wrapItems(items)
   );
   const prevItemsRef = useRef3(items);
@@ -437,8 +494,8 @@ function EditableGrid({
     onChange,
     createItem
   });
-  const [dragState, setDragState] = useState4({ sourceId: null, closestEdge: null });
-  const [isDragging, setIsDragging] = useState4(false);
+  const [dragState, setDragState] = useState5({ sourceId: null, closestEdge: null });
+  const [isDragging, setIsDragging] = useState5(false);
   useEffect4(() => {
     let cleanup;
     let cancelled = false;

package/dist/components/primitives/ResolvedMedia.d.ts

@@ -3,10 +3,12 @@ interface ResolvedMediaProps {
     src?: string;
     srcset?: string;
     alt?: string;
+    width?: number;
+    height?: number;
     className?: string;
     imgClassName?: string;
     invertFrom?: string;
 }
-export declare function ResolvedMedia({ imageId, src: propSrc, srcset: propSrcset, alt: propAlt, className, imgClassName, invertFrom, }: ResolvedMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResolvedMedia({ imageId, src: propSrc, srcset: propSrcset, alt: propAlt, width: propWidth, height: propHeight, className, imgClassName, invertFrom, }: ResolvedMediaProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ResolvedMedia.d.ts.map

package/dist/components/primitives/ResolvedMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResolvedMedia.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ResolvedMedia.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,SAAS,EACT,YAAY,EACZ,UAAU,GACX,EAAE,kBAAkB,2CA+BpB"}
+{"version":3,"file":"ResolvedMedia.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ResolvedMedia.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,YAAY,EACZ,UAAU,GACX,EAAE,kBAAkB,2CAsEpB"}

package/dist/components/primitives/defineHeadingSection.d.ts

@@ -11,6 +11,8 @@ interface HeadingSectionConfig<T extends string> {
     defaultHeading: string;
     /** When true, adds the `excludeFromNav` content field plus its settings toggle. */
     navExclusion?: boolean;
+    /** Per-type authoring note surfaced by get_section_schema. */
+    authoringNote: string;
 }
 /**
  * Factory for the heading section family (link / sub / sub-sub). They differ only