@drawnagency/primitives 0.1.73 → 0.1.74

package/dist/{chunk-N6AE6NBB.js → chunk-RIVBCL6U.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
     ] })
   ] });
 }

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/{chunk-XTRTK26E.js → chunk-YYDQGA2N.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-RIVBCL6U.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,
     {

package/dist/components/editor/index.js

@@ -11,7 +11,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "../../chunk-N6AE6NBB.js";
+} from "../../chunk-RIVBCL6U.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import {

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-YYDQGA2N.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-RIVBCL6U.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-YYDQGA2N.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-RIVBCL6U.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-IFHRHV7S.js";

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/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.74",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

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/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/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}`;
 }