@drawnagency/primitives 0.1.73 → 0.1.75

package/dist/{chunk-N6AE6NBB.js → chunk-Q3T23HVW.js}

@@ -211,6 +211,11 @@ function LinkField({ label, value, onChange }) {
 // src/components/shared/VideoSourceField.tsx
 import { useState } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ASPECTS = [
+  { label: "9:16", width: 9, height: 16 },
+  { label: "4:5", width: 4, height: 5 },
+  { label: "1:1", width: 1, height: 1 }
+];
 function VideoSourceField({ value, onChange }) {
   const mediaLibrary = useMediaLibrary();
   const [mode, setMode] = useState(value?.type === "external" ? "embed" : "library");
@@ -238,6 +243,7 @@ function VideoSourceField({ value, onChange }) {
         type: "external",
         provider: body.provider,
         id: body.id,
+        ...body.kind ? { kind: body.kind } : {},
         url: body.url,
         width: body.width,
         height: body.height
@@ -300,7 +306,7 @@ function VideoSourceField({ value, onChange }) {
                 void submitEmbed();
               }
             },
-            placeholder: "Paste a YouTube or Vimeo URL\u2026",
+            placeholder: "Paste a YouTube, Vimeo, or Instagram URL\u2026",
             className: "flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
           }
         ),
@@ -317,7 +323,27 @@ function VideoSourceField({ value, onChange }) {
         )
       ] }),
       error ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-red-600", children: error }) : null,
-      !error && fallback ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-base-contrast-light/70", children: "Added \u2014 couldn't fetch exact dimensions, using 16:9." }) : null
+      !error && fallback ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-base-contrast-light/70", children: "Added \u2014 couldn't fetch exact dimensions, using 16:9." }) : null,
+      value?.type === "external" && value.provider === "instagram" ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7("span", { className: "text-xs text-base-contrast-light", children: "Aspect" }),
+        ASPECTS.map(({ label, width, height }) => {
+          const active = value.width === width && value.height === height;
+          return /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": active,
+              onClick: () => onChange({ ...value, width, height }),
+              className: cn(
+                "cursor-pointer rounded border px-2 py-0.5 text-xs",
+                active ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast"
+              ),
+              children: label
+            },
+            label
+          );
+        })
+      ] }) : null
     ] })
   ] });
 }
@@ -350,7 +376,7 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
       },
       tab.id
     )) }) }),
-    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn(fullBleedTabBar && "pt-4"), children: activeTab?.content })
+    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn("px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
   ] });
 }
 

package/dist/{chunk-XTRTK26E.js → chunk-U4E6S4PX.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-NKVZGPR6.js";
 import {
   embedUrl
-} from "./chunk-RBTSUR5V.js";
+} from "./chunk-Y4JQGO6G.js";
 import {
   brandGuideSectionDefs,
   pluralize,
@@ -31,7 +31,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-N6AE6NBB.js";
+} from "./chunk-Q3T23HVW.js";
 import {
   useMediaLibrary,
   useResolvedMedia
@@ -322,16 +322,17 @@ var LibrarySource = z3.object({
 });
 var ExternalSource = z3.object({
   type: z3.literal("external"),
-  provider: z3.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
-  id: z3.string().describe("Provider video id parsed from the pasted URL."),
+  provider: z3.enum(["youtube", "vimeo", "instagram"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z3.string().describe("Provider video id parsed from the pasted URL (Instagram: the post/reel shortcode)."),
+  kind: z3.enum(["post", "reel", "tv"]).optional().describe("Instagram only: which embed path the shortcode came from ('p' \u2192 post). Omitted for other providers."),
   url: z3.string().describe("The original video page URL as pasted."),
-  width: z3.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
-  height: z3.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown).")
+  width: z3.number().positive().describe("Aspect-ratio width (from oEmbed; Instagram: 9 for reels/tv, 4 for posts; editors can override)."),
+  height: z3.number().positive().describe("Aspect-ratio height (from oEmbed; Instagram: 16 for reels/tv, 5 for posts; editors can override).")
 });
 var schema3 = z3.object({
   type: z3.literal("video"),
   content: z3.object({
-    source: z3.discriminatedUnion("type", [LibrarySource, ExternalSource]).describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+    source: z3.discriminatedUnion("type", [LibrarySource, ExternalSource]).describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo/Instagram URL."),
     caption: z3.string().optional().describe("Optional caption rendered beneath the player when Show caption is on.")
   }),
   options: z3.object({
@@ -344,7 +345,7 @@ var Video_default = defineSection({
   label: "Video",
   icon: /* @__PURE__ */ jsx8(Clapperboard, { size: 18 }),
   schema: schema3,
-  authoringNote: "A watchable video player \u2014 self-hosted from the media library or embedded from YouTube/Vimeo. Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
+  authoringNote: "A watchable video player \u2014 self-hosted from the media library or embedded from YouTube/Vimeo/Instagram. Instagram embeds render the post card at a kind-derived aspect ratio (reels 9:16, posts 4:5) that editors can override. Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
   component: ({ content, options, onChange }) => /* @__PURE__ */ jsx8(
     VideoBlock,
     {
@@ -857,7 +858,12 @@ function Container({ content, isEditMode, onChange, openModal }) {
   };
   const emit = (nextSection) => onChange?.({ ...content, content: nextSection.content });
   const updateChild = (index, childContent) => {
-    const next = children.map((c, i) => i === index ? childContent : c);
+    const next = children.map((c, i) => {
+      if (i !== index) return c;
+      const merged = { ...childContent, id: c.id ?? newId() };
+      if (c.layout !== void 0) merged.layout = c.layout;
+      return merged;
+    });
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
   const gridClass = cn(
@@ -963,7 +969,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
   }
   const occupied = occupiedColumns(children, columns);
   const emptyCols = occupied < columns ? columns - occupied : 0;
-  return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { className: gridClass, children: [
+  return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { className: cn(gridClass, "pt-8 xl:pt-0"), children: [
     children.map(renderEditChild),
     Array.from({ length: emptyCols }, (_, i) => /* @__PURE__ */ jsx13(
       EmptyColumnCell,

package/dist/{chunk-RBTSUR5V.js → chunk-Y4JQGO6G.js}

@@ -25,10 +25,19 @@ function parseVideoUrl(raw) {
     const m = url.pathname.match(/\/(\d{6,12})$/);
     return m ? { provider: "vimeo", id: m[1] } : null;
   }
+  if (host === "instagram.com" || host === "m.instagram.com") {
+    const m = url.pathname.match(/^(?:\/([\w.]+))?\/(p|reel|reels|tv)\/([\w-]{5,20})\/?$/);
+    if (!m || m[1] === "share") return null;
+    const kind = m[2] === "p" ? "post" : m[2] === "tv" ? "tv" : "reel";
+    return { provider: "instagram", id: m[3], kind };
+  }
   return null;
 }
+var IG_PATH = { post: "p", reel: "reel", tv: "tv" };
 function embedUrl(p) {
-  return p.provider === "youtube" ? `https://www.youtube-nocookie.com/embed/${p.id}` : `https://player.vimeo.com/video/${p.id}`;
+  if (p.provider === "youtube") return `https://www.youtube-nocookie.com/embed/${p.id}`;
+  if (p.provider === "instagram") return `https://www.instagram.com/${IG_PATH[p.kind ?? "post"]}/${p.id}/embed/`;
+  return `https://player.vimeo.com/video/${p.id}`;
 }
 
 export {

package/dist/components/editor/SectionWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionWrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,cAAc,EACd,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,YAAY,2CAgTd"}
+{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionWrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,cAAc,EACd,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,YAAY,2CAqTd"}

package/dist/components/editor/index.js

@@ -11,7 +11,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "../../chunk-N6AE6NBB.js";
+} from "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import {
@@ -540,7 +540,7 @@ function SectionWrapper({
           "div",
           {
             className: cn(
-              "absolute -left-16 bottom-full z-30 mb-1 hidden xl:block transition-opacity",
+              "absolute -left-16 bottom-full z-30 hover:z-[60] mb-1 hidden xl:block transition-opacity",
               alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"
             ),
             children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert })
@@ -550,13 +550,16 @@ function SectionWrapper({
           "div",
           {
             className: cn(
-              "absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity",
+              "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
               alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"
             ),
             children: [
-              /* @__PURE__ */ jsxs5("div", { className: "-ml-[34px] flex flex-col items-center", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "relative -ml-[34px] flex flex-col items-center", children: [
                 /* @__PURE__ */ jsx7(DragHandle, { ref: handleRef }),
-                onRequestInsert && !isDragging && chromeReady && /* @__PURE__ */ jsx7("div", { className: "xl:hidden -mt-1", children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert }) })
+                onRequestInsert && !isDragging && chromeReady && // Below xl the gutter can't fit the plus beside the handle, so it
+                // hangs below it (absolute → no row-height contribution: the handle
+                // stays put and the pair stacks DOWN instead of centering).
+                /* @__PURE__ */ jsx7("div", { className: "absolute top-full xl:hidden", children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert }) })
               ] }),
               /* @__PURE__ */ jsx7("span", { className: "pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80", children: definition.label })
             ]

package/dist/components/sections/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAqGzD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,gBAAgB,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAkDD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CA8KrF"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAqGzD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,gBAAgB,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAkDD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CA2LrF"}

package/dist/components/sections/Video/VideoBlock.d.ts

@@ -9,8 +9,9 @@ export type VideoSource = {
     };
 } | {
     type: "external";
-    provider: "youtube" | "vimeo";
+    provider: "youtube" | "vimeo" | "instagram";
     id: string;
+    kind?: "post" | "reel" | "tv";
     url: string;
     width: number;
     height: number;

package/dist/components/sections/Video/VideoBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Video/VideoBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GACzF;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhH,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,eAAe,2CAgIpH"}
+{"version":3,"file":"VideoBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Video/VideoBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GACzF;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEN,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,eAAe,2CAgIpH"}

package/dist/components/sections/Video/index.d.ts

@@ -11,11 +11,12 @@ declare const _default: import("../../..").SectionDefinition<{
             } | undefined;
         } | {
             type: "external";
-            provider: "youtube" | "vimeo";
+            provider: "youtube" | "vimeo" | "instagram";
             id: string;
             url: string;
             width: number;
             height: number;
+            kind?: "post" | "reel" | "tv" | undefined;
         };
         caption?: string | undefined;
     };

package/dist/components/sections/Video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Video/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,wBA0DG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Video/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,wBA2DG"}

package/dist/components/sections/all-sections.d.ts

@@ -80,11 +80,12 @@ export declare const allSectionDefs: (import("../..").SectionDefinition<{
             } | undefined;
         } | {
             type: "external";
-            provider: "youtube" | "vimeo";
+            provider: "youtube" | "vimeo" | "instagram";
             id: string;
             url: string;
             width: number;
             height: number;
+            kind?: "post" | "reel" | "tv" | undefined;
         };
         caption?: string | undefined;
     };

package/dist/components/sections/all-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-sections.d.ts","sourceRoot":"","sources":["../../../src/components/sections/all-sections.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAiD,CAAC"}
+{"version":3,"file":"all-sections.d.ts","sourceRoot":"","sources":["../../../src/components/sections/all-sections.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAiD,CAAC"}

package/dist/components/sections/core-sections.d.ts

@@ -75,11 +75,12 @@ export declare const coreSectionDefs: (import("../..").SectionDefinition<{
             } | undefined;
         } | {
             type: "external";
-            provider: "youtube" | "vimeo";
+            provider: "youtube" | "vimeo" | "instagram";
             id: string;
             url: string;
             width: number;
             height: number;
+            kind?: "post" | "reel" | "tv" | undefined;
         };
         caption?: string | undefined;
     };

package/dist/components/sections/core-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-sections.d.ts","sourceRoot":"","sources":["../../../src/components/sections/core-sections.ts"],"names":[],"mappings":"AAUA;;+BAE+B;AAK/B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAU3B,CAAC"}
+{"version":3,"file":"core-sections.d.ts","sourceRoot":"","sources":["../../../src/components/sections/core-sections.ts"],"names":[],"mappings":"AAUA;;+BAE+B;AAK/B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAU3B,CAAC"}

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

@@ -1,11 +1,11 @@
 import {
   allSectionDefs
-} from "../../chunk-XTRTK26E.js";
+} from "../../chunk-U4E6S4PX.js";
 import "../../chunk-NKVZGPR6.js";
-import "../../chunk-RBTSUR5V.js";
+import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";
 import "../../chunk-T7MP7ANP.js";
-import "../../chunk-N6AE6NBB.js";
+import "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-IFHRHV7S.js";

package/dist/components/sections/register.js

@@ -1,11 +1,11 @@
 import {
   allSectionDefs
-} from "../../chunk-XTRTK26E.js";
+} from "../../chunk-U4E6S4PX.js";
 import "../../chunk-NKVZGPR6.js";
-import "../../chunk-RBTSUR5V.js";
+import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";
 import "../../chunk-T7MP7ANP.js";
-import "../../chunk-N6AE6NBB.js";
+import "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-IFHRHV7S.js";

package/dist/components/shared/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,SAAS,2CAqChG"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,SAAS,2CAwChG"}

package/dist/components/shared/VideoSourceField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoSourceField.d.ts","sourceRoot":"","sources":["../../../src/components/shared/VideoSourceField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,UAAU,KAAK;IACb,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAID,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAgI1D"}
+{"version":3,"file":"VideoSourceField.d.ts","sourceRoot":"","sources":["../../../src/components/shared/VideoSourceField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,UAAU,KAAK;IACb,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAYD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAuJ1D"}

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

@@ -1 +1 @@
-{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA6C/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAI/B,cAAc,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACpC,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,WAAW;;;;;;;EAoXb"}
+{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgD/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAI/B,cAAc,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACpC,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,WAAW;;;;;;;EAoXb"}

package/dist/lib/video-url.d.ts

@@ -1,7 +1,16 @@
+export type InstagramKind = "post" | "reel" | "tv";
 export type ParsedVideoUrl = {
     provider: "youtube" | "vimeo";
     id: string;
+} | {
+    provider: "instagram";
+    id: string;
+    kind: InstagramKind;
 };
 export declare function parseVideoUrl(raw: string): ParsedVideoUrl | null;
-export declare function embedUrl(p: ParsedVideoUrl): string;
+export declare function embedUrl(p: {
+    provider: "youtube" | "vimeo" | "instagram";
+    id: string;
+    kind?: InstagramKind;
+}): string;
 //# sourceMappingURL=video-url.d.ts.map

package/dist/lib/video-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-url.d.ts","sourceRoot":"","sources":["../../src/lib/video-url.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAI3E,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CA4BhE;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,cAAc,GAAG,MAAM,CAIlD"}
+{"version":3,"file":"video-url.d.ts","sourceRoot":"","sources":["../../src/lib/video-url.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,cAAc,GACtB;IAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC7C;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AAI/D,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAoChE;AAID,wBAAgB,QAAQ,CAAC,CAAC,EAAE;IAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,MAAM,CAIrH"}

package/dist/lib/video-url.js

@@ -1,7 +1,7 @@
 import {
   embedUrl,
   parseVideoUrl
-} from "../chunk-RBTSUR5V.js";
+} from "../chunk-Y4JQGO6G.js";
 import "../chunk-JSBRDJBE.js";
 export {
   embedUrl,

package/package.json

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

package/src/components/editor/SectionWrapper.tsx

@@ -239,11 +239,13 @@ export function SectionWrapper({
       data-section-id={sectionId}
       data-section-type={sectionType}
     >
-      {/* Plus button — left gutter on xl+, hidden below */}
+      {/* Plus button — left gutter on xl+, hidden below. hover:z-[60] lifts the
+          whole slot (a z-30 stacking context the tooltip can't escape) above the
+          inline section-type picker (z-50) while the tooltip is showing. */}
       {onRequestInsert && !isDragging && chromeReady && (
         <div
           className={cn(
-            "absolute -left-16 bottom-full z-30 mb-1 hidden xl:block transition-opacity",
+            "absolute -left-16 bottom-full z-30 hover:z-[60] mb-1 hidden xl:block transition-opacity",
             alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
           )}
         >
@@ -254,14 +256,17 @@ export function SectionWrapper({
       {/* Drag handle + section label */}
       <div
         className={cn(
-          "absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity",
+          "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
           alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
       >
-        <div className="-ml-[34px] flex flex-col items-center">
+        <div className="relative -ml-[34px] flex flex-col items-center">
           <DragHandle ref={handleRef} />
           {onRequestInsert && !isDragging && chromeReady && (
-            <div className="xl:hidden -mt-1">
+            // Below xl the gutter can't fit the plus beside the handle, so it
+            // hangs below it (absolute → no row-height contribution: the handle
+            // stays put and the pair stacks DOWN instead of centering).
+            <div className="absolute top-full xl:hidden">
               <InsertButton index={index} onInsert={onRequestInsert} />
             </div>
           )}

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

@@ -192,8 +192,18 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
     onChange?.({ ...content, content: nextSection.content });
 
   // Per-child inline content edits (e.g. prose/media bubble their own onChange).
+  // Section components emit id-less SectionContent (EditorShell re-attaches the id
+  // at the root) and know nothing of the layout envelope, so preserve both from
+  // the existing child — an id-less child fails save validation for the whole
+  // container. Minting when the existing child has no id self-heals drafts saved
+  // by the pre-fix path.
   const updateChild = (index: number, childContent: unknown) => {
-    const next = children.map((c, i) => (i === index ? (childContent as Section) : c));
+    const next = children.map((c, i) => {
+      if (i !== index) return c;
+      const merged = { ...(childContent as Section), id: c.id ?? newId() };
+      if (c.layout !== undefined) merged.layout = c.layout;
+      return merged;
+    });
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
 
@@ -338,7 +348,10 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
   const emptyCols = occupied < columns ? columns - occupied : 0;
   return (
     <div className="@container">
-      <div className={gridClass}>
+      {/* Below xl the section's "+" stacks under the drag handle and hangs down
+          into the left gutter, where the first child's control rail would collide
+          with it — push children down until the gutter is side-by-side again. */}
+      <div className={cn(gridClass, "pt-8 xl:pt-0")}>
         {children.map(renderEditChild)}
         {Array.from({ length: emptyCols }, (_, i) => (
           <EmptyColumnCell

package/src/components/sections/Video/VideoBlock.tsx

@@ -7,7 +7,15 @@ import { EditablePlainText } from "../../primitives/EditablePlainText";
 
 export type VideoSource =
   | { type: "library"; ref: { imageId: string }; poster?: { imageId: string; src?: string } }
-  | { type: "external"; provider: "youtube" | "vimeo"; id: string; url: string; width: number; height: number };
+  | {
+      type: "external";
+      provider: "youtube" | "vimeo" | "instagram";
+      id: string;
+      kind?: "post" | "reel" | "tv";
+      url: string;
+      width: number;
+      height: number;
+    };
 
 interface VideoBlockProps {
   source: VideoSource;

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

@@ -24,11 +24,15 @@ const LibrarySource = z.object({
 
 const ExternalSource = z.object({
   type: z.literal("external"),
-  provider: z.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
-  id: z.string().describe("Provider video id parsed from the pasted URL."),
+  provider: z.enum(["youtube", "vimeo", "instagram"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z.string().describe("Provider video id parsed from the pasted URL (Instagram: the post/reel shortcode)."),
+  kind: z
+    .enum(["post", "reel", "tv"])
+    .optional()
+    .describe("Instagram only: which embed path the shortcode came from ('p' → post). Omitted for other providers."),
   url: z.string().describe("The original video page URL as pasted."),
-  width: z.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
-  height: z.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown)."),
+  width: z.number().positive().describe("Aspect-ratio width (from oEmbed; Instagram: 9 for reels/tv, 4 for posts; editors can override)."),
+  height: z.number().positive().describe("Aspect-ratio height (from oEmbed; Instagram: 16 for reels/tv, 5 for posts; editors can override)."),
 });
 
 const schema = z.object({
@@ -36,7 +40,7 @@ const schema = z.object({
   content: z.object({
     source: z
       .discriminatedUnion("type", [LibrarySource, ExternalSource])
-      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo/Instagram URL."),
     caption: z.string().optional().describe("Optional caption rendered beneath the player when Show caption is on."),
   }),
   options: z
@@ -56,7 +60,8 @@ export default defineSection({
   icon: <Clapperboard size={18} />,
   schema,
   authoringNote:
-    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo. " +
+    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo/Instagram. " +
+    "Instagram embeds render the post card at a kind-derived aspect ratio (reels 9:16, posts 4:5) that editors can override. " +
     "Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. " +
     "For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
   component: ({ content, options, onChange }) => (

package/src/components/shared/Tabs.tsx

@@ -57,7 +57,10 @@ export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTa
           ))}
         </div>
       </div>
-      <div role="tabpanel" className={cn(fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
+      {/* px-px: the root's overflow-hidden would clip the 1px focus ring of
+          inputs that span the full panel width (rings are box-shadows drawn
+          outside the border box) — give them 1px to paint into. */}
+      <div role="tabpanel" className={cn("px-px", fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
     </div>
   );
 }

package/src/components/shared/VideoSourceField.tsx

@@ -13,6 +13,14 @@ interface Props {
 
 type Mode = "library" | "embed";
 
+// Instagram embeds only: the URL kind picks the initial ratio (reels 9:16,
+// posts 4:5), but /p/ shortcodes are ambiguous so editors can correct it.
+const ASPECTS = [
+  { label: "9:16", width: 9, height: 16 },
+  { label: "4:5", width: 4, height: 5 },
+  { label: "1:1", width: 1, height: 1 },
+] as const;
+
 export function VideoSourceField({ value, onChange }: Props) {
   const mediaLibrary = useMediaLibrary();
   const [mode, setMode] = useState<Mode>(value?.type === "external" ? "embed" : "library");
@@ -42,6 +50,7 @@ export function VideoSourceField({ value, onChange }: Props) {
         type: "external",
         provider: body.provider,
         id: body.id,
+        ...(body.kind ? { kind: body.kind } : {}),
         url: body.url,
         width: body.width,
         height: body.height,
@@ -118,7 +127,7 @@ export function VideoSourceField({ value, onChange }: Props) {
                   void submitEmbed();
                 }
               }}
-              placeholder="Paste a YouTube or Vimeo URL…"
+              placeholder="Paste a YouTube, Vimeo, or Instagram URL…"
               className="flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
             />
             <Button
@@ -137,6 +146,28 @@ export function VideoSourceField({ value, onChange }: Props) {
               Added — couldn't fetch exact dimensions, using 16:9.
             </p>
           ) : null}
+          {value?.type === "external" && value.provider === "instagram" ? (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-base-contrast-light">Aspect</span>
+              {ASPECTS.map(({ label, width, height }) => {
+                const active = value.width === width && value.height === height;
+                return (
+                  <button
+                    key={label}
+                    type="button"
+                    aria-pressed={active}
+                    onClick={() => onChange({ ...value, width, height })}
+                    className={cn(
+                      "cursor-pointer rounded border px-2 py-0.5 text-xs",
+                      active ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+                    )}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          ) : null}
         </div>
       )}
     </div>

package/src/hooks/useEditorPublish.ts

@@ -34,8 +34,11 @@ async function postSave(payload: object): Promise<{ sha: string }> {
     throw new Error("Network error while saving — check your connection and try again.");
   }
   if (!response.ok) {
-    const errorBody = await response.json().catch(() => null) as { message?: string; error?: string } | null;
-    const serverMessage = errorBody?.message || errorBody?.error;
+    const errorBody = await response.json().catch(() => null) as { message?: string; error?: string; details?: string } | null;
+    // `details` carries the field-level cause (e.g. the Zod path inside a failing
+    // container child) — without it a validation failure only names the section.
+    const baseMessage = errorBody?.message || errorBody?.error;
+    const serverMessage = baseMessage && errorBody?.details ? `${baseMessage} — ${errorBody.details}` : baseMessage;
     const fallback = !errorBody && body.length > 5_500_000
       ? "This save is too large to send in one request — remove some images from the media library and try again."
       : `Save failed (HTTP ${response.status})`;

package/src/lib/video-url.ts

@@ -1,4 +1,7 @@
-export type ParsedVideoUrl = { provider: "youtube" | "vimeo"; id: string };
+export type InstagramKind = "post" | "reel" | "tv";
+export type ParsedVideoUrl =
+  | { provider: "youtube" | "vimeo"; id: string }
+  | { provider: "instagram"; id: string; kind: InstagramKind };
 
 const YT_ID = /^[\w-]{6,20}$/;
 
@@ -29,11 +32,21 @@ export function parseVideoUrl(raw: string): ParsedVideoUrl | null {
     const m = url.pathname.match(/\/(\d{6,12})$/);
     return m ? { provider: "vimeo", id: m[1] } : null;
   }
+  if (host === "instagram.com" || host === "m.instagram.com") {
+    // Canonical (/reel/{code}) or username-prefixed (/{user}/p/{code}) URLs.
+    // NOT /share/ links — their ids are opaque redirect tokens, not shortcodes.
+    const m = url.pathname.match(/^(?:\/([\w.]+))?\/(p|reel|reels|tv)\/([\w-]{5,20})\/?$/);
+    if (!m || m[1] === "share") return null;
+    const kind: InstagramKind = m[2] === "p" ? "post" : m[2] === "tv" ? "tv" : "reel";
+    return { provider: "instagram", id: m[3], kind };
+  }
   return null;
 }
 
-export function embedUrl(p: ParsedVideoUrl): string {
-  return p.provider === "youtube"
-    ? `https://www.youtube-nocookie.com/embed/${p.id}`
-    : `https://player.vimeo.com/video/${p.id}`;
+const IG_PATH: Record<InstagramKind, string> = { post: "p", reel: "reel", tv: "tv" };
+
+export function embedUrl(p: { provider: "youtube" | "vimeo" | "instagram"; id: string; kind?: InstagramKind }): string {
+  if (p.provider === "youtube") return `https://www.youtube-nocookie.com/embed/${p.id}`;
+  if (p.provider === "instagram") return `https://www.instagram.com/${IG_PATH[p.kind ?? "post"]}/${p.id}/embed/`;
+  return `https://player.vimeo.com/video/${p.id}`;
 }