dune-react 0.0.30 → 0.0.32

package/dist/components/puck-block/text-sections/prose-content/index.js

@@ -1,6 +1,6 @@
 import { ProseContent, ProseContentDefaults } from "./component.js";
 import { headingField } from "../../../puck-core/core/props/content.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -15,7 +15,7 @@ const conf = {
         value: { type: "text" }
       }
     },
-    mediaImage: imageField,
+    mediaImage: mediaField,
     video: { type: "text" },
     styles: {
       type: "object",

package/dist/components/puck-block/text-sections/prose-sidebar/component.d.ts

@@ -1,4 +1,4 @@
-import type { TextComponentProps, TextSectionBaseProps, BaseButton, BaseImage } from "../props";
+import type { TextComponentProps, TextSectionBaseProps, BaseButton, BaseMedia } from "../props";
 type SubscribeBlock = {
     title: string;
     description: string;
@@ -9,7 +9,7 @@ type SubscribeBlock = {
 type Contributor = {
     name: string;
     role: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
 };
 type SocialLink = {
     platform: string;

package/dist/components/puck-block/text-sections/prose-sidebar/index.d.ts

@@ -169,7 +169,7 @@ declare const conf: {
         contributors?: {
             name: string;
             role: string;
-            avatar: import("@/components/puck-core/core/props/media").BaseImage;
+            avatar: import("@/components/puck-core/core/props/media").BaseMedia;
         }[];
         socialLinks?: {
             platform: string;

package/dist/components/puck-block/text-sections/side-media-content/component.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
@@ -11,7 +11,7 @@ const SideMediaContent = (props) => {
   const {
     heading,
     prose,
-    image = { src: "", alt: "" },
+    media = { src: "", alt: "" },
     video,
     styles
   } = {
@@ -30,7 +30,7 @@ const SideMediaContent = (props) => {
     if (mediaType === "video") {
       return /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
-          /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
+          /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "size-full object-cover" }),
           /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" }),
           /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
         ] }) }),
@@ -52,7 +52,7 @@ const SideMediaContent = (props) => {
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "w-full object-cover", alt: image.alt });
+    return /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, className: "w-full object-cover", alt: media.alt });
   };
   const textContent = /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
@@ -69,7 +69,7 @@ const SideMediaContent = (props) => {
 const SideMediaContentDefaults = {
   heading: "Short heading goes here",
   prose: `<p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.</p><p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.</p>`,
-  image: {
+  media: {
     src: "https://picsum.photos/seed/side-media/800/600",
     alt: "Placeholder image"
   },

package/dist/components/puck-block/text-sections/side-media-content/index.d.ts

@@ -11,7 +11,7 @@ declare const conf: {
         prose: {
             type: string;
         };
-        image: {
+        media: {
             type: "object";
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;

package/dist/components/puck-block/text-sections/side-media-content/index.js

@@ -1,13 +1,13 @@
 import { SideMediaContent, SideMediaContentDefaults } from "./component.js";
 import { headingField } from "../../../puck-core/core/props/content.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
     prose: { type: "textarea" },
-    image: imageField,
+    media: mediaField,
     video: { type: "text" },
     styles: {
       type: "object",

package/dist/components/puck-block/text-sections/sticky-text-multi-image/component.d.ts

@@ -1,7 +1,7 @@
-import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
+import type { TextComponentProps, TextSectionBaseProps, BaseMedia } from "../props";
 type StickyTextMultiImageExtra = {
     prose: string;
-    images: BaseImage[];
+    medias: BaseMedia[];
 };
 export type StickyTextMultiImageProps = TextComponentProps<StickyTextMultiImageExtra>;
 export declare const StickyTextMultiImage: (props: StickyTextMultiImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/sticky-text-multi-image/component.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
 const StickyTextMultiImage = (props) => {
   const {
     heading,
     prose,
-    images = [],
+    medias = [],
     styles
   } = {
     ...StickyTextMultiImageDefaults,
@@ -22,7 +22,7 @@ const StickyTextMultiImage = (props) => {
     /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
     /* @__PURE__ */ jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: prose } })
   ] });
-  const imagesContent = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:gap-8", children: images.map((img, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundImage, { src: img.src, alt: img.alt, className: "w-full object-cover" }) }, index)) });
+  const imagesContent = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:gap-8", children: medias.map((img, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundMedia, { src: img.src, alt: img.alt, className: "w-full object-cover" }) }, index)) });
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 items-start gap-x-12 gap-y-16 md:gap-y-20 lg:grid-cols-[1fr_1.5fr] lg:gap-x-20", children: contentPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     textContent,
     imagesContent
@@ -34,7 +34,7 @@ const StickyTextMultiImage = (props) => {
 const StickyTextMultiImageDefaults = {
   heading: "Short heading goes here",
   prose: `<p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.</p><p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus.</p>`,
-  images: [
+  medias: [
     { src: "https://picsum.photos/seed/sticky-img1/800/600", alt: "Placeholder image 1" },
     { src: "https://picsum.photos/seed/sticky-img2/800/600", alt: "Placeholder image 2" },
     { src: "https://picsum.photos/seed/sticky-img3/800/600", alt: "Placeholder image 3" }

package/dist/components/puck-block/text-sections/sticky-text-multi-image/index.d.ts

@@ -11,7 +11,7 @@ declare const conf: {
         prose: {
             type: string;
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {
@@ -70,7 +70,7 @@ declare const conf: {
     };
     defaultProps: Partial<import("../props").TextSectionBaseProps> & {
         prose: string;
-        images: import("@/components/puck-core/core/props/media").BaseImage[];
+        medias: import("@/components/puck-core/core/props/media").BaseMedia[];
     };
     render: (props: StickyTextMultiImageProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/puck-block/text-sections/sticky-text-multi-image/index.js

@@ -1,13 +1,13 @@
 import { StickyTextMultiImage, StickyTextMultiImageDefaults } from "./component.js";
 import { headingField } from "../../../puck-core/core/props/content.js";
-import { imagesField } from "../../../puck-core/core/props/media.js";
+import { mediasField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
     prose: { type: "textarea" },
-    images: imagesField,
+    medias: mediasField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/text-sections/text-header/component.d.ts

@@ -1,6 +1,6 @@
-import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
+import type { TextComponentProps, TextSectionBaseProps, BaseMedia } from "../props";
 type TextHeaderExtra = {
-    bgImage?: BaseImage;
+    bgImage?: BaseMedia;
     bgVideo?: string;
 };
 export type TextHeaderProps = TextComponentProps<TextHeaderExtra>;

package/dist/components/puck-block/text-sections/text-header/index.d.ts

@@ -256,7 +256,7 @@ declare const conf: {
         };
     };
     defaultProps: Partial<import("../props").TextSectionBaseProps> & {
-        bgImage?: import("@/components/puck-core/core/props/media").BaseImage;
+        bgImage?: import("@/components/puck-core/core/props/media").BaseMedia;
         bgVideo?: string;
     };
     render: (props: TextHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-core/core/context/editor-context.d.ts

@@ -19,6 +19,8 @@ type EditorContextValue = {
     sitePages?: SitePage[];
     /** Google Maps API Key，用于 LocationField 地址搜索 */
     googleMapsApiKey?: string;
+    /** 品牌 ID，用于资产库归属 */
+    brandId?: string;
 };
 export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
 export declare const useEditorContext: () => EditorContextValue;

package/dist/components/puck-core/core/fields.d.ts

@@ -7,13 +7,13 @@
  * 迁移对照：
  *   interactive.ts  → action / button / badge / icon / link
  *   content.ts      → heading / description / feature / card
- *   media.ts        → image / gallery
+ *   media.ts        → media / medias
  *   form.ts         → form / field / location
  *   section.ts      → padding / sectionStyle
  */
 export { iconField as icon, actionField as action, actionDefaults, buttonField as button, buttonDefaults, buttonsField as buttons, badgeField as badge, } from "./props/interactive";
 export { headingField as heading, descriptionField as description, featuresField as features, contentFields, contentFieldsWithFeatures, cardField as card, cardsField as cards, } from "./props";
-export { imageField as image, imagesField as images, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, } from "./props/media";
+export { mediaField as media, mediasField as medias, getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, } from "./props/media";
 export { formFieldField as field, formFieldDefaults as fieldDefaults, formField as form, formDefaults, } from "./props/form";
 export { type MapLocation, getMapEmbedUrl, getDirectionsUrl, locationDefaults, locationField as location, } from "./props/form";
 export * from "./styles";

package/dist/components/puck-core/core/props/content.d.ts

@@ -5,7 +5,7 @@
  * 每个 prop 按 Type → Field → Defaults 顺序排列
  */
 import type { IconName } from "./interactive";
-import type { BaseImage } from "./media";
+import type { BaseMedia } from "./media";
 export declare const headingField: {
     readonly type: "text";
     readonly contentEditable: true;
@@ -19,8 +19,8 @@ export interface BaseFeatureItem {
     name?: string;
     description?: string;
 }
-export interface FeatureItemWithImage extends BaseFeatureItem {
-    image?: BaseImage;
+export interface FeatureItemWithMedia extends BaseFeatureItem {
+    media?: BaseMedia;
 }
 export type Feature = {
     icon?: IconName;

package/dist/components/puck-core/core/props/index.d.ts

@@ -5,8 +5,8 @@
  * 使用方：import { BaseButton, buttonField, ... } from "@/components/puck-core/core/props"
  */
 export { type IconName, iconField, type ActionType, type Action, resolveActionUrl, actionField, actionDefaults, type ButtonVariant, type ButtonSize, type BaseButton, buttonField, buttonDefaults, buttonsField, type BadgeVariant, type BaseBadge, badgeField, type BaseLink, type BaseSocialLink, } from "./interactive";
-export { headingField, descriptionField, type BaseFeatureItem, type FeatureItemWithImage, type Feature, featuresField, cardField, cardsField, } from "./content";
-export { type BaseImage, imageField, imagesField, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, } from "./media";
+export { headingField, descriptionField, type BaseFeatureItem, type FeatureItemWithMedia, type Feature, featuresField, cardField, cardsField, } from "./content";
+export { type BaseMedia, mediaField, mediasField, getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, } from "./media";
 export { fieldTypes, type FieldTypes, type CompoundFieldProps, formMethods, type FormMethods, type CompoundFormProps, type BaseFormFieldType, type BaseFormField, formFieldField, formFieldDefaults, formField, formDefaults, type MapLocation, getMapEmbedUrl, getDirectionsUrl, locationDefaults, locationField, } from "./form";
 export { type PaddingLevel, type SectionPadding, type BaseSectionStyle, type BaseSectionStyles, } from "./section";
 /** heading + description + badge + buttons */

package/dist/components/puck-core/core/props/index.js

@@ -2,6 +2,7 @@ import { buttonsField, badgeField } from "./interactive.js";
 import { actionDefaults, actionField, buttonDefaults, buttonField, iconField, resolveActionUrl } from "./interactive.js";
 import { descriptionField, headingField, featuresField } from "./content.js";
 import { cardField, cardsField } from "./content.js";
+import { getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, mediaField, mediasField } from "./media.js";
 const contentFields = {
   heading: headingField,
   description: descriptionField,
@@ -28,7 +29,13 @@ export {
   contentFieldsWithFeatures,
   descriptionField,
   featuresField,
+  getPlaceholderMediaUrl,
   headingField,
   iconField,
+  media16x9Placeholder,
+  media1x1Placeholder,
+  media9x16Placeholder,
+  mediaField,
+  mediasField,
   resolveActionUrl
 };

package/dist/components/puck-core/core/props/interactive.d.ts

@@ -238,7 +238,50 @@ export interface BaseLink {
     label: string;
     action?: Action;
 }
+export type SocialPlatform = "twitter" | "facebook" | "instagram" | "linkedin" | "youtube" | "github" | "tiktok" | "discord";
 export interface BaseSocialLink {
-    platform: string;
+    platform: SocialPlatform;
     url: string;
 }
+export declare const socialLinksField: {
+    readonly type: "array";
+    readonly label: "Social Links";
+    readonly getItemSummary: (item: {
+        platform?: string;
+    }, i?: number) => string;
+    readonly arrayFields: {
+        readonly platform: {
+            readonly type: "select";
+            readonly label: "Platform";
+            readonly options: readonly [{
+                readonly label: "Twitter / X";
+                readonly value: "twitter";
+            }, {
+                readonly label: "Facebook";
+                readonly value: "facebook";
+            }, {
+                readonly label: "Instagram";
+                readonly value: "instagram";
+            }, {
+                readonly label: "LinkedIn";
+                readonly value: "linkedin";
+            }, {
+                readonly label: "YouTube";
+                readonly value: "youtube";
+            }, {
+                readonly label: "GitHub";
+                readonly value: "github";
+            }, {
+                readonly label: "TikTok";
+                readonly value: "tiktok";
+            }, {
+                readonly label: "Discord";
+                readonly value: "discord";
+            }];
+        };
+        readonly url: {
+            readonly type: "text";
+            readonly label: "URL";
+        };
+    };
+};

package/dist/components/puck-core/core/props/interactive.js

@@ -106,6 +106,28 @@ const badgeField = {
     }
   }
 };
+const socialLinksField = {
+  type: "array",
+  label: "Social Links",
+  getItemSummary: (item, i = 0) => item.platform || `Social ${i + 1}`,
+  arrayFields: {
+    platform: {
+      type: "select",
+      label: "Platform",
+      options: [
+        { label: "Twitter / X", value: "twitter" },
+        { label: "Facebook", value: "facebook" },
+        { label: "Instagram", value: "instagram" },
+        { label: "LinkedIn", value: "linkedin" },
+        { label: "YouTube", value: "youtube" },
+        { label: "GitHub", value: "github" },
+        { label: "TikTok", value: "tiktok" },
+        { label: "Discord", value: "discord" }
+      ]
+    },
+    url: { type: "text", label: "URL" }
+  }
+};
 export {
   actionDefaults,
   actionField,
@@ -114,5 +136,6 @@ export {
   buttonField,
   buttonsField,
   iconField,
-  resolveActionUrl
+  resolveActionUrl,
+  socialLinksField
 };

package/dist/components/puck-core/core/props/media.d.ts

@@ -1,16 +1,16 @@
 /**
- * 媒体类 Props — 图片 / 视频 / 图库
+ * 媒体类 Props — 图片 / 视频 / Embed
  *
  * 每个 prop 按 Type → Field → Defaults 顺序排列
  */
 import type { Field } from "@puckeditor/core";
-export interface BaseImage {
+export interface BaseMedia {
     src: string;
     alt?: string;
     aspectRatio?: "16x9" | "1x1" | "9x16" | "4x3" | "auto";
     className?: string;
 }
-export declare const imageField: {
+export declare const mediaField: {
     type: "object";
     objectFields: {
         src: Field<string>;
@@ -19,20 +19,20 @@ export declare const imageField: {
         };
     };
 };
-export declare const getPlaceholderImageUrl: (size: string, text?: string) => string;
-export declare const image16x9Placeholder: {
+export declare const getPlaceholderMediaUrl: (size: string, text?: string) => string;
+export declare const media16x9Placeholder: {
     alt: string;
     src: string;
 };
-export declare const image1x1Placeholder: {
+export declare const media1x1Placeholder: {
     alt: string;
     src: string;
 };
-export declare const image9x16Placeholder: {
+export declare const media9x16Placeholder: {
     alt: string;
     src: string;
 };
-export declare const imagesField: {
+export declare const mediasField: {
     readonly type: "array";
     readonly max: 10;
     readonly getItemSummary: (item: {

package/dist/components/puck-core/core/props/media.js

@@ -1,50 +1,50 @@
-import { ImageUploadField } from "../../fields/image-upload-field.js";
-const imageField = {
+import { MediaUploadField } from "../../fields/media-upload-field.js";
+const mediaField = {
   type: "object",
   objectFields: {
     src: {
       type: "custom",
-      label: "Image",
-      render: ImageUploadField
+      label: "Media",
+      render: MediaUploadField
     },
     alt: { type: "text" }
   }
 };
-const getPlaceholderImageUrl = (size, text = "Placeholder Image") => {
+const getPlaceholderMediaUrl = (size, text = "Placeholder Image") => {
   const [w, h] = size.split("x");
   return `https://picsum.photos/seed/${encodeURIComponent(text)}/${w}/${h}`;
 };
-const image16x9Placeholder = {
+const media16x9Placeholder = {
   alt: "16/9 aspect ratio accessible description of the image",
-  src: getPlaceholderImageUrl("1920x1080")
+  src: getPlaceholderMediaUrl("1920x1080")
 };
-const image1x1Placeholder = {
+const media1x1Placeholder = {
   alt: "1/1 aspect ratio An accessible description of the image",
-  src: getPlaceholderImageUrl("1000x1000")
+  src: getPlaceholderMediaUrl("1000x1000")
 };
-const image9x16Placeholder = {
+const media9x16Placeholder = {
   alt: "9/16 accessible description of the image",
-  src: getPlaceholderImageUrl("1080x1920")
+  src: getPlaceholderMediaUrl("1080x1920")
 };
-const imagesField = {
+const mediasField = {
   type: "array",
   max: 10,
   getItemSummary: (item, index = 0) => {
     if (item.alt) {
       return `${item.alt.slice(0, 12)}${item.alt.length > 12 ? "..." : ""}`;
     }
-    return `Image ${index + 1}`;
+    return `Media ${index + 1}`;
   },
   arrayFields: {
-    ...imageField.objectFields
+    ...mediaField.objectFields
   },
-  defaultItemProps: image16x9Placeholder
+  defaultItemProps: media16x9Placeholder
 };
 export {
-  getPlaceholderImageUrl,
-  image16x9Placeholder,
-  image1x1Placeholder,
-  image9x16Placeholder,
-  imageField,
-  imagesField
+  getPlaceholderMediaUrl,
+  media16x9Placeholder,
+  media1x1Placeholder,
+  media9x16Placeholder,
+  mediaField,
+  mediasField
 };

package/dist/components/puck-core/core/social-icons.d.ts

@@ -0,0 +1,5 @@
+import type { SocialPlatform } from "./props/interactive";
+export declare function SocialIcon({ platform, className, }: {
+    platform: SocialPlatform;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/puck-core/core/social-icons.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/css-utils.js";
+function InstagramIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9S287.7 141 224.1 141m0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7s74.7 33.5 74.7 74.7s-33.6 74.7-74.7 74.7m146.4-194.3c0 14.9-12 26.8-26.8 26.8c-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8s26.8 12 26.8 26.8m76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9c-26.2-26.2-58-34.4-93.9-36.2c-37-2.1-147.9-2.1-184.9 0c-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9c1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0c35.9-1.7 67.7-9.9 93.9-36.2c26.2-26.2 34.4-58 36.2-93.9c2.1-37 2.1-147.8 0-184.8M398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6c-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6c-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6c29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6c11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1" }) });
+}
+function FacebookIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256c0 120 82.7 220.8 194.2 248.5V334.2h-52.8V256h52.8v-33.7c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287v175.9C413.8 494.8 512 386.9 512 256" }) });
+}
+function XTwitterIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z" }) });
+}
+function YouTubeIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149C1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5c58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5c2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9M207 353.89v-196.5l145 98.2Z" }) });
+}
+function LinkedInIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z" }) });
+}
+function TikTokIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121 121 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z" }) });
+}
+function GitHubIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 496 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2" }) });
+}
+function DiscordIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485 485 0 0 0 404.081 32.03a1.82 1.82 0 0 0-1.923.91a338 338 0 0 0-14.9 30.6a447.9 447.9 0 0 0-134.426 0a310 310 0 0 0-15.135-30.6a1.89 1.89 0 0 0-1.924-.91a483.7 483.7 0 0 0-119.688 37.107a1.7 1.7 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.02 2.02 0 0 0 .765 1.375a487.7 487.7 0 0 0 146.825 74.189a1.9 1.9 0 0 0 2.063-.676A348 348 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588a321 321 0 0 1-45.868-21.853a1.885 1.885 0 0 1-.185-3.126a251 251 0 0 0 9.109-7.137a1.82 1.82 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.81 1.81 0 0 1 1.924.233a235 235 0 0 0 9.132 7.16a1.884 1.884 0 0 1-.162 3.126a301.4 301.4 0 0 1-45.89 21.83a1.875 1.875 0 0 0-1 2.611a391 391 0 0 0 30.014 48.815a1.86 1.86 0 0 0 2.063.7A486 486 0 0 0 610.7 405.729a1.88 1.88 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541M222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239c0 32.654-23.41 59.241-52.843 59.241m195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239c0 32.654-23.177 59.241-52.844 59.241" }) });
+}
+const platformConfig = {
+  twitter: { icon: XTwitterIcon, color: "#000000" },
+  facebook: { icon: FacebookIcon, color: "#1877F2" },
+  instagram: { icon: InstagramIcon, color: "#E4405F" },
+  linkedin: { icon: LinkedInIcon, color: "#0A66C2" },
+  youtube: { icon: YouTubeIcon, color: "#FF0000" },
+  github: { icon: GitHubIcon, color: "#181717" },
+  tiktok: { icon: TikTokIcon, color: "#000000" },
+  discord: { icon: DiscordIcon, color: "#5865F2" }
+};
+function SocialIcon({
+  platform,
+  className = "size-6"
+}) {
+  const config = platformConfig[platform];
+  if (!config) return null;
+  const { icon: Icon, color } = config;
+  return /* @__PURE__ */ jsx(Icon, { className: cn(className), style: { color } });
+}
+export {
+  SocialIcon
+};

package/dist/components/puck-core/core/with-editable.js

@@ -6,7 +6,7 @@ import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
 import { useEditorContext } from "./context/editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
-const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
+const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image", "media"]);
 function getComponentIdFromDOM(el) {
   if (!el) return null;
   const puckEl = el.closest("[data-puck-component]");
@@ -26,16 +26,20 @@ function withEditable(Component, config) {
     }, [isBlock]);
     const getLocation = useCallback(() => {
       const componentId = getComponentIdFromDOM(wrapperRef.current);
+      console.log("[withEditable] getLocation — componentId:", componentId, "hasData:", !!(appState == null ? void 0 : appState.data));
       if (!componentId || !(appState == null ? void 0 : appState.data)) return null;
       const component = findComponentById(appState.data, componentId);
+      console.log("[withEditable] getLocation — component found:", !!component);
       if (!component) return null;
       const propPath = findPropPath(component.props, props, config.fields);
+      console.log("[withEditable] getLocation — propPath:", propPath, "fieldKeys:", Object.keys(config.fields), "targetProps:", { src: props.src, alt: props.alt });
       if (propPath === null) return null;
       return { componentId, propPath };
     }, [appState == null ? void 0 : appState.data, props]);
     const handleSave = useCallback(
       (updated) => {
         const location = getLocation();
+        console.log("[withEditable] handleSave — location:", location, "updated:", updated);
         if (!location) return;
         dispatch({
           type: "setData",
@@ -86,7 +90,10 @@ function withEditable(Component, config) {
           {
             ref: portalRef,
             onClick: handleEdit,
-            style: { transform: `scale(${inverseScale})`, transformOrigin: "center center" },
+            style: {
+              transform: `scale(${inverseScale})`,
+              transformOrigin: "center center"
+            },
             className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 shadow-md backdrop-blur-sm",
             children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-white" })
           }

package/dist/components/puck-core/fields/media-upload-field.d.ts

@@ -0,0 +1,7 @@
+interface MediaUploadFieldProps {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare function MediaUploadField({ name, value, onChange, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};