@drawnagency/primitives 0.1.64 → 0.1.66

package/dist/auth/errors.d.ts

@@ -5,4 +5,16 @@
 export declare class LastOwnerError extends Error {
     constructor(message?: string);
 }
+/**
+ * Thrown when an authenticated operation cannot proceed because the underlying
+ * Supabase session is missing, expired, or its refresh token is stale/used.
+ * This is distinct from a never-authenticated request: the caller passed the
+ * middleware gate (e.g. via a still-valid app session cookie) but the Supabase
+ * session needed for the operation is dead. API routes should translate this to
+ * HTTP 401 so the UI prompts the user to request a fresh link, rather than
+ * surfacing an opaque 500.
+ */
+export declare class SessionExpiredError extends Error {
+    constructor(message?: string);
+}
 //# sourceMappingURL=errors.d.ts.map

package/dist/auth/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/auth/errors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK;gBAC3B,OAAO,SAAiC;CAIrD"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/auth/errors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK;gBAC3B,OAAO,SAAiC;CAIrD;AAED;;;;;;;;GAQG;AACH,qBAAa,mBAAoB,SAAQ,KAAK;gBAChC,OAAO,SAAyD;CAI7E"}

package/dist/auth/index.d.ts

@@ -3,5 +3,5 @@ export type { UiCapabilities } from "./capabilities";
 export { deriveUiCapabilities } from "./capabilities";
 export { requireSessionSecret, isSameOriginRequest, safeNextPath } from "./security";
 export { signSessionToken, verifySessionToken, signAudienceToken, verifyAudienceToken, setSessionCookie, SESSION_COOKIE, AUDIENCE_COOKIE, SESSION_MAX_AGE_SECONDS, AUDIENCE_MAX_AGE_SECONDS } from "./cookies";
-export { LastOwnerError } from "./errors";
+export { LastOwnerError, SessionExpiredError } from "./errors";
 //# sourceMappingURL=index.d.ts.map

package/dist/auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAC/M,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAC/M,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC"}

package/dist/auth/index.js

@@ -4,13 +4,14 @@ import {
   LastOwnerError,
   SESSION_COOKIE,
   SESSION_MAX_AGE_SECONDS,
+  SessionExpiredError,
   deriveUiCapabilities,
   setSessionCookie,
   signAudienceToken,
   signSessionToken,
   verifyAudienceToken,
   verifySessionToken
-} from "../chunk-UNWNT52N.js";
+} from "../chunk-EM5DFHDZ.js";
 import {
   isSameOriginRequest,
   requireSessionSecret,
@@ -24,6 +25,7 @@ export {
   LastOwnerError,
   SESSION_COOKIE,
   SESSION_MAX_AGE_SECONDS,
+  SessionExpiredError,
   deriveUiCapabilities,
   isSameOriginRequest,
   requireSessionSecret,

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

@@ -1,6 +1,6 @@
 import {
   EditablePlainText
-} from "./chunk-VMDKWUMT.js";
+} from "./chunk-XNGG5AGI.js";
 import {
   usePages
 } from "./chunk-4E66N6UV.js";

package/dist/{chunk-UNWNT52N.js → chunk-EM5DFHDZ.js}

@@ -74,6 +74,12 @@ var LastOwnerError = class extends Error {
     this.name = "LastOwnerError";
   }
 };
+var SessionExpiredError = class extends Error {
+  constructor(message = "Your session has expired. Please request a new link.") {
+    super(message);
+    this.name = "SessionExpiredError";
+  }
+};
 
 export {
   deriveUiCapabilities,
@@ -86,5 +92,6 @@ export {
   signAudienceToken,
   verifyAudienceToken,
   setSessionCookie,
-  LastOwnerError
+  LastOwnerError,
+  SessionExpiredError
 };

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

@@ -9,7 +9,7 @@ import {
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-VMDKWUMT.js";
+} from "./chunk-XNGG5AGI.js";
 import {
   AddIcon,
   DeleteIcon,

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-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/index.js

@@ -2,7 +2,7 @@ import {
   EditableRichText,
   LinkPopover,
   defineHeadingSection
-} from "../../chunk-FECCYOPJ.js";
+} from "../../chunk-DQTKWKSK.js";
 import {
   EditableGrid,
   EditablePlainText,
@@ -10,14 +10,14 @@ import {
   MediaBlock,
   ResolvedMedia,
   useEditableCollection
-} from "../../chunk-VMDKWUMT.js";
+} from "../../chunk-XNGG5AGI.js";
 import "../../chunk-4E66N6UV.js";
 import {
   DeleteIcon,
   DragHandle,
   IconButton
 } from "../../chunk-I5737FJY.js";
-import "../../chunk-CBWK3KPV.js";
+import "../../chunk-VU3XR362.js";
 import "../../chunk-53DKVAB6.js";
 import "../../chunk-ZGFAYZWB.js";
 import {

package/dist/components/sections/Media/MediaBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Media/MediaBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IACxG,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,eAAe,2CAoF/F"}
+{"version":3,"file":"MediaBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Media/MediaBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IACxG,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,eAAe,2CA2F/F"}

package/dist/components/sections/brand-guide.js

@@ -2,11 +2,11 @@ import {
   ColorItemSchema,
   ColorSpaceSchema,
   brandGuideSectionDefs
-} from "../../chunk-QYQ3DQHI.js";
+} from "../../chunk-VEIDANEU.js";
 import "../../chunk-5THS4K5D.js";
-import "../../chunk-VMDKWUMT.js";
+import "../../chunk-XNGG5AGI.js";
 import "../../chunk-I5737FJY.js";
-import "../../chunk-CBWK3KPV.js";
+import "../../chunk-VU3XR362.js";
 import "../../chunk-3DCG4DNU.js";
 import "../../chunk-WDSVHKAH.js";
 import "../../chunk-ZGFAYZWB.js";

package/dist/components/sections/register-schemas.js

@@ -3,7 +3,7 @@ import {
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "../../chunk-QYQ3DQHI.js";
+} from "../../chunk-VEIDANEU.js";
 import {
   DeleteButton,
   DragHandle,
@@ -20,7 +20,7 @@ import "../../chunk-5THS4K5D.js";
 import {
   EditableRichText,
   defineHeadingSection
-} from "../../chunk-FECCYOPJ.js";
+} from "../../chunk-DQTKWKSK.js";
 import {
   EditablePlainText,
   MAX_CONTAINER_COLUMNS,
@@ -28,10 +28,10 @@ import {
   colSpanClass,
   containerGridClass,
   spacerHiddenClass
-} from "../../chunk-VMDKWUMT.js";
+} from "../../chunk-XNGG5AGI.js";
 import "../../chunk-4E66N6UV.js";
 import "../../chunk-I5737FJY.js";
-import "../../chunk-CBWK3KPV.js";
+import "../../chunk-VU3XR362.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema

package/dist/components/shell/EditorLoading.d.ts

@@ -0,0 +1,13 @@
+interface EditorLoadingProps {
+    /** Delay before the spinner appears, to avoid a flash on instant cache hits. */
+    delayMs?: number;
+}
+/**
+ * Full-screen loading state shown while EditorShell hydrates and loads content.
+ * Keeps the existing aria-busy contract on the wrapper at all times; the visible
+ * spinner is delayed so a fast Dexie cache hit doesn't flash it. SSR-safe: the
+ * initial render shows the wrapper with no spinner, matching the server output.
+ */
+export declare function EditorLoading({ delayMs }: EditorLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorLoading.d.ts.map

package/dist/components/shell/EditorLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLoading.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorLoading.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAa,EAAE,EAAE,kBAAkB,2CAsBlE"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAsEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAo6BP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAo6BP"}

package/dist/components/shell/SiteSettingsDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteSettingsDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsDisplay.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAWD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAuIlE"}
+{"version":3,"file":"SiteSettingsDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsDisplay.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAWD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAiKlE"}

package/dist/hooks/useResolvedMedia.d.ts

@@ -4,6 +4,8 @@ export interface ResolvedMediaResult {
     poster: string | undefined;
     alt: string;
     kind: "image" | "animated" | "video";
+    width?: number;
+    height?: number;
 }
 export declare function useResolvedMedia(imageId: string | undefined): ResolvedMediaResult;
 //# sourceMappingURL=useResolvedMedia.d.ts.map

package/dist/hooks/useResolvedMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResolvedMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useResolvedMedia.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;CACtC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,CAyCjF"}
+{"version":3,"file":"useResolvedMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useResolvedMedia.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,CA6CjF"}

package/dist/index.js

@@ -13,20 +13,21 @@ import {
   resolveMedia,
   sanitizeMediaName,
   setMediaProvider
-} from "./chunk-CBWK3KPV.js";
+} from "./chunk-VU3XR362.js";
 import {
   AUDIENCE_COOKIE,
   AUDIENCE_MAX_AGE_SECONDS,
   LastOwnerError,
   SESSION_COOKIE,
   SESSION_MAX_AGE_SECONDS,
+  SessionExpiredError,
   deriveUiCapabilities,
   setSessionCookie,
   signAudienceToken,
   signSessionToken,
   verifyAudienceToken,
   verifySessionToken
-} from "./chunk-UNWNT52N.js";
+} from "./chunk-EM5DFHDZ.js";
 import {
   AudienceColorSchema,
   AudienceNameSchema,
@@ -157,6 +158,7 @@ export {
   SESSION_COOKIE,
   SESSION_MAX_AGE_SECONDS,
   SectionMetaSchema,
+  SessionExpiredError,
   SessionSchema,
   SingleMediaReferenceSchema,
   SiteConfigSchema,

package/dist/media/index.js

@@ -13,7 +13,7 @@ import {
   resolveMedia,
   sanitizeMediaName,
   setMediaProvider
-} from "../chunk-CBWK3KPV.js";
+} from "../chunk-VU3XR362.js";
 import "../chunk-ZGFAYZWB.js";
 import {
   ImageManifestSchema,

package/dist/media/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/media/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,YAAY,CAC1B,IAAI,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,EACxC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,OAAO,CAsCT"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/media/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,YAAY,CAC1B,IAAI,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,EACxC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,OAAO,CA0CT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/auth/errors.ts

@@ -8,3 +8,19 @@ export class LastOwnerError extends Error {
     this.name = "LastOwnerError";
   }
 }
+
+/**
+ * Thrown when an authenticated operation cannot proceed because the underlying
+ * Supabase session is missing, expired, or its refresh token is stale/used.
+ * This is distinct from a never-authenticated request: the caller passed the
+ * middleware gate (e.g. via a still-valid app session cookie) but the Supabase
+ * session needed for the operation is dead. API routes should translate this to
+ * HTTP 401 so the UI prompts the user to request a fresh link, rather than
+ * surfacing an opaque 500.
+ */
+export class SessionExpiredError extends Error {
+  constructor(message = "Your session has expired. Please request a new link.") {
+    super(message);
+    this.name = "SessionExpiredError";
+  }
+}

package/src/auth/index.ts

@@ -17,4 +17,4 @@ export { deriveUiCapabilities } from "./capabilities";
 
 export { requireSessionSecret, isSameOriginRequest, safeNextPath } from "./security";
 export { signSessionToken, verifySessionToken, signAudienceToken, verifyAudienceToken, setSessionCookie, SESSION_COOKIE, AUDIENCE_COOKIE, SESSION_MAX_AGE_SECONDS, AUDIENCE_MAX_AGE_SECONDS } from "./cookies";
-export { LastOwnerError } from "./errors";
+export { LastOwnerError, SessionExpiredError } from "./errors";

package/src/components/primitives/ResolvedMedia.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { cn } from "../../lib/cn";
 import { ImageIcon } from "lucide-react";
 import { useResolvedMedia } from "../../hooks/useResolvedMedia";
@@ -7,6 +8,8 @@ interface ResolvedMediaProps {
   src?: string;
   srcset?: string;
   alt?: string;
+  width?: number;
+  height?: number;
   className?: string;
   imgClassName?: string;
   invertFrom?: string;
@@ -17,6 +20,8 @@ export function ResolvedMedia({
   src: propSrc,
   srcset: propSrcset,
   alt: propAlt,
+  width: propWidth,
+  height: propHeight,
   className,
   imgClassName,
   invertFrom,
@@ -27,22 +32,61 @@ export 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;
+
+  // `loaded` fades the placeholder out via onLoad in the hydrated editor. In the
+  // zero-JS viewer this stays false (no JS), so the placeholder remains painted
+  // behind the opaque loaded image — correct, no flash, no layout shift.
+  const [loaded, setLoaded] = useState(false);
 
   const invertClass =
     invertFrom === "light" ? "invert dark:invert-0" :
     invertFrom === "dark" ? "dark:invert" :
     undefined;
 
-  const mediaClass = cn("h-full w-full", imgClassName, invertClass);
+  const mediaClass = cn("relative h-full w-full", imgClassName, invertClass);
 
   return (
-    <div className={className}>
+    <div className={cn("relative", className)}>
       {src ? (
-        kind === "video" ? (
-          <video src={src} poster={poster} muted playsInline loop autoPlay className={mediaClass} />
-        ) : (
-          <img src={src} srcSet={srcset} alt={alt} className={mediaClass} />
-        )
+        <>
+          <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" ? (
+            <video
+              src={src}
+              poster={poster}
+              width={width}
+              height={height}
+              muted
+              playsInline
+              loop
+              autoPlay
+              className={mediaClass}
+              onLoadedData={() => setLoaded(true)}
+            />
+          ) : (
+            <img
+              src={src}
+              srcSet={srcset}
+              alt={alt}
+              width={width}
+              height={height}
+              loading="lazy"
+              decoding="async"
+              className={mediaClass}
+              onLoad={() => setLoaded(true)}
+              onError={() => setLoaded(true)}
+            />
+          )}
+        </>
       ) : (
         <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">
           <ImageIcon size={24} />

package/src/components/sections/Media/MediaBlock.tsx

@@ -33,12 +33,18 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
   // placeholder. In edit mode these are absent and ResolvedMedia falls back to the
   // live manifest via context. (Mirrors a3e8913, which did this for MediaGrid/SplitContent.)
   const baked = refValue as Record<string, unknown>;
+  const bakedWidth = typeof baked.width === "number" ? baked.width : undefined;
+  const bakedHeight = typeof baked.height === "number" ? baked.height : undefined;
+  const aspectRatio =
+    bakedWidth && bakedHeight && !options.square ? `${bakedWidth} / ${bakedHeight}` : undefined;
   const resolved = (
     <ResolvedMedia
       imageId={refValue.imageId || undefined}
       src={baked.src as string | undefined}
       srcset={baked.srcset as string | undefined}
       alt={baked.alt as string | undefined}
+      width={bakedWidth}
+      height={bakedHeight}
       className="h-full w-full"
       imgClassName={fitClass}
       invertFrom={refValue.invertFrom}
@@ -75,6 +81,7 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
           options.square && "aspect-square",
           onImageClick && "cursor-pointer",
         )}
+        style={aspectRatio ? { aspectRatio } : undefined}
         onClick={onImageClick}
         onPointerDown={onImageClick ? (e) => e.stopPropagation() : undefined}
       >

package/src/components/shared/PasswordInput.tsx

@@ -43,15 +43,15 @@ export function PasswordInput({
           className={cn(
             "w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast",
             "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast",
-            showToggle && "pr-9",
+            showToggle && "pr-10",
             disabled && "cursor-not-allowed opacity-50",
           )}
         />
         {showToggle && (
           <IconButton
-            icon={revealed ? <EyeOff size={16} /> : <Eye size={16} />}
+            icon={revealed ? <EyeOff size={20} /> : <Eye size={20} />}
             label={revealed ? "Hide password" : "Show password"}
-            size="sm"
+            size="md"
             aria-pressed={revealed}
             disabled={disabled}
             onClick={() => setRevealed((v) => !v)}

package/src/components/shell/EditorLoading.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+interface EditorLoadingProps {
+  /** Delay before the spinner appears, to avoid a flash on instant cache hits. */
+  delayMs?: number;
+}
+
+/**
+ * Full-screen loading state shown while EditorShell hydrates and loads content.
+ * Keeps the existing aria-busy contract on the wrapper at all times; the visible
+ * spinner is delayed so a fast Dexie cache hit doesn't flash it. SSR-safe: the
+ * initial render shows the wrapper with no spinner, matching the server output.
+ */
+export function EditorLoading({ delayMs = 200 }: EditorLoadingProps) {
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSpinner(true), delayMs);
+    return () => clearTimeout(timer);
+  }, [delayMs]);
+
+  return (
+    <div
+      className="flex min-h-screen items-center justify-center"
+      aria-busy="true"
+      aria-label="Loading content"
+    >
+      {showSpinner && (
+        <Loader2
+          className="size-8 animate-spin text-primary"
+          data-testid="editor-loading-spinner"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -75,6 +75,7 @@ import { ImageIcon, ListOrderedIcon, FilesIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
+import { EditorLoading } from "./EditorLoading";
 import ViewRenderer from "../sections/ViewRenderer";
 
 export { useMediaLibrary } from "./MediaLibraryContext";
@@ -808,7 +809,7 @@ export default function EditorShell({
   // --- Render ---
 
   if (shellState.phase === "loading-content") {
-    return <div className="min-h-screen" aria-busy="true" aria-label="Loading content" />;
+    return <EditorLoading />;
   }
 
   if (shellState.phase === "error") {

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -48,8 +48,15 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
   }
 
   function handleColorChange(color: string) {
-    const contrast = deriveContrast(color);
-    onChange({ ...siteConfig, primaryColor: color, primaryContrast: contrast });
+    update({ primaryColor: color });
+  }
+
+  function handleContrastChange(color: string) {
+    update({ primaryContrast: color });
+  }
+
+  function resetContrastToAuto() {
+    update({ primaryContrast: deriveContrast(siteConfig.primaryColor) });
   }
 
   function handleFontChange(field: "headingFont" | "bodyFont", family: string) {
@@ -79,6 +86,25 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         </div>
       </div>
 
+      <div>
+        <FormLabel>Accent (button &amp; highlight text)</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryContrast}
+            onChange={handleContrastChange}
+            label="Accent color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrast}</span>
+          <Button type="button" variant="ghost" size="sm" onClick={resetContrastToAuto}>
+            Reset to auto
+          </Button>
+        </div>
+        <p className="mt-1 text-xs text-base-contrast/70">
+          Shown as text on primary-colored buttons and as the text-selection color. "Reset to auto" derives a
+          legible light or dark value from your primary brand color.
+        </p>
+      </div>
+
       <div>
         <FormLabel>Favicon</FormLabel>
         <div className="flex items-center gap-3">

package/src/hooks/useResolvedMedia.ts

@@ -8,6 +8,8 @@ export interface ResolvedMediaResult {
   poster: string | undefined;
   alt: string;
   kind: "image" | "animated" | "video";
+  width?: number;
+  height?: number;
 }
 
 export function useResolvedMedia(imageId: string | undefined): ResolvedMediaResult {
@@ -26,10 +28,12 @@ export function useResolvedMedia(imageId: string | undefined): ResolvedMediaResu
     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: undefined, poster: undefined, alt, kind };
+      return { src: localUrl, srcset: undefined, poster: undefined, alt, kind, width, height };
     }
 
     if (manifestItem) {
@@ -42,13 +46,15 @@ export function useResolvedMedia(imageId: string | undefined): ResolvedMediaResu
           poster: undefined,
           alt,
           kind,
+          width: resolved.width,
+          height: resolved.height,
         };
       }
       if (resolved && resolved.tag === "video") {
-        return { src: resolved.src, srcset: undefined, poster: resolved.poster, alt, kind };
+        return { src: resolved.src, srcset: undefined, poster: resolved.poster, alt, kind, width: resolved.width, height: resolved.height };
       }
     }
 
-    return { src: undefined, srcset: undefined, poster: undefined, alt, kind };
+    return { src: undefined, srcset: undefined, poster: undefined, alt, kind, width, height };
   }, [imageId, ctx]);
 }

package/src/media/resolve.ts

@@ -45,11 +45,15 @@ export function resolveManifestReferences(
         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 };
     }