@wordpress/media-editor 0.2.0

package/build-module/components/media-form/index.mjs

@@ -0,0 +1,50 @@
+// packages/media-editor/src/components/media-form/index.tsx
+import { DataForm } from "@wordpress/dataviews";
+import { Spinner, __experimentalVStack as VStack } from "@wordpress/components";
+import { useMediaEditorContext } from "../media-editor-provider/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MediaForm({
+  form: formOverrides,
+  header
+}) {
+  const { media, fields, onChange } = useMediaEditorContext();
+  if (!media || !onChange) {
+    return /* @__PURE__ */ jsx("div", { className: "media-editor-form media-editor-form--loading", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
+  const defaultForm = {
+    layout: {
+      type: "panel"
+    },
+    fields: fields.map((field) => {
+      if (["title", "alt_text", "caption", "description"].includes(
+        field.id
+      )) {
+        return {
+          id: field.id,
+          layout: {
+            type: "regular",
+            labelPosition: "top"
+          }
+        };
+      }
+      return field.id;
+    })
+  };
+  const form = formOverrides || defaultForm;
+  return /* @__PURE__ */ jsx("div", { className: "media-editor-form", children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+    header,
+    /* @__PURE__ */ jsx(
+      DataForm,
+      {
+        data: media,
+        fields,
+        form,
+        onChange
+      }
+    )
+  ] }) });
+}
+export {
+  MediaForm as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/media-form/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-form/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { DataForm } from '@wordpress/dataviews';\nimport type { Form, Field } from '@wordpress/dataviews';\nimport { Spinner, __experimentalVStack as VStack } from '@wordpress/components';\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { useMediaEditorContext } from '../media-editor-provider';\nimport type { Media } from '../media-editor-provider';\n\n/**\n * Props for MediaForm component.\n */\nexport interface MediaFormProps {\n\tform?: Form;\n\theader?: ReactNode;\n}\n\n/**\n * MediaForm component for editing media metadata.\n *\n * Renders a DataForm with fields for editing media properties like\n * title, alt text, caption, description, etc.\n *\n * @param props        - Component props.\n * @param props.form   - Optional form configuration.\n * @param props.header - Optional header content to display above the form.\n * @return The MediaForm component.\n */\nexport default function MediaForm( {\n\tform: formOverrides,\n\theader,\n}: MediaFormProps ) {\n\tconst { media, fields, onChange } = useMediaEditorContext();\n\n\tif ( ! media || ! onChange ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-form media-editor-form--loading\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Default form structure with panel layout\n\tconst defaultForm: Form = {\n\t\tlayout: {\n\t\t\ttype: 'panel',\n\t\t},\n\t\tfields: fields.map( ( field: Field< Media > ) => {\n\t\t\t// Use regular layout for main editable fields\n\t\t\tif (\n\t\t\t\t[ 'title', 'alt_text', 'caption', 'description' ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field.id,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\ttype: 'regular',\n\t\t\t\t\t\tlabelPosition: 'top',\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn field.id;\n\t\t} ),\n\t};\n\n\tconst form = formOverrides || defaultForm;\n\n\treturn (\n\t\t<div className=\"media-editor-form\">\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t{ header }\n\t\t\t\t<DataForm\n\t\t\t\t\tdata={ media }\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,gBAAgB;AAEzB,SAAS,SAAS,wBAAwB,cAAc;AAMxD,SAAS,6BAA6B;AA+BlC,cAiCD,YAjCC;AATW,SAAR,UAA4B;AAAA,EAClC,MAAM;AAAA,EACN;AACD,GAAoB;AACnB,QAAM,EAAE,OAAO,QAAQ,SAAS,IAAI,sBAAsB;AAE1D,MAAK,CAAE,SAAS,CAAE,UAAW;AAC5B,WACC,oBAAC,SAAI,WAAU,gDACd,8BAAC,WAAQ,GACV;AAAA,EAEF;AAGA,QAAM,cAAoB;AAAA,IACzB,QAAQ;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,QAAQ,OAAO,IAAK,CAAE,UAA2B;AAEhD,UACC,CAAE,SAAS,YAAY,WAAW,aAAc,EAAE;AAAA,QACjD,MAAM;AAAA,MACP,GACC;AACD,eAAO;AAAA,UACN,IAAI,MAAM;AAAA,UACV,QAAQ;AAAA,YACP,MAAM;AAAA,YACN,eAAe;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AACA,aAAO,MAAM;AAAA,IACd,CAAE;AAAA,EACH;AAEA,QAAM,OAAO,iBAAiB;AAE9B,SACC,oBAAC,SAAI,WAAU,qBACd,+BAAC,UAAO,SAAU,GACf;AAAA;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD,GACD;AAEF;",
+  "names": []
+}

package/build-module/components/media-preview/index.mjs

@@ -0,0 +1,98 @@
+// packages/media-editor/src/components/media-preview/index.tsx
+import { Spinner } from "@wordpress/components";
+import { useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { useMediaEditorContext } from "../media-editor-provider/index.mjs";
+import { getMediaTypeFromMimeType } from "../../utils/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MediaPreviewContent({
+  mediaType,
+  mediaUrl,
+  altText,
+  displayTitle,
+  mimeType,
+  onLoad,
+  onError,
+  loadingState
+}) {
+  switch (mediaType.type) {
+    case "image":
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: loadingState === "loaded" ? "loaded" : "",
+          src: mediaUrl,
+          alt: altText || "",
+          onLoad,
+          onError
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ jsx("video", { src: mediaUrl, controls: true, onError, children: displayTitle });
+    case "audio":
+      return /* @__PURE__ */ jsx("audio", { src: mediaUrl, controls: true, onError, children: displayTitle });
+    default:
+      return /* @__PURE__ */ jsxs("div", { className: "media-editor-preview__file-info", children: [
+        /* @__PURE__ */ jsx("p", { className: "media-editor-preview__file-name", children: displayTitle }),
+        /* @__PURE__ */ jsx("p", { className: "media-editor-preview__mime-type", children: mimeType }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: mediaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "media-editor-preview__download-link",
+            children: __("View file")
+          }
+        )
+      ] });
+  }
+}
+function MediaPreview(props) {
+  const [loadingState, setLoadingState] = useState("loading");
+  const { media } = useMediaEditorContext();
+  const {
+    source_url: mediaUrl,
+    mime_type: mimeType,
+    alt_text: altText,
+    title
+  } = media || {};
+  const mediaType = getMediaTypeFromMimeType(mimeType);
+  if (!mediaUrl) {
+    return /* @__PURE__ */ jsx("div", { className: "media-editor-preview media-editor-preview--empty", children: /* @__PURE__ */ jsx("p", { children: __("No media file available.") }) });
+  }
+  if (loadingState === "error") {
+    return /* @__PURE__ */ jsxs("div", { className: "media-editor-preview media-editor-preview--error", children: [
+      /* @__PURE__ */ jsx("p", { children: __("Failed to load media file.") }),
+      /* @__PURE__ */ jsx("p", { className: "media-editor-preview__url", children: mediaUrl })
+    ] });
+  }
+  const displayTitle = typeof title === "string" ? title : title?.rendered || title?.raw;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: `media-editor-preview media-editor-preview--${mediaType.type}`,
+      children: [
+        mediaType.type === "image" && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: "media-editor-preview__spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        /* @__PURE__ */ jsx(
+          MediaPreviewContent,
+          {
+            mediaType,
+            mediaUrl,
+            altText,
+            displayTitle,
+            mimeType,
+            onLoad: () => setLoadingState("loaded"),
+            onError: () => setLoadingState("error"),
+            loadingState
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MediaPreview as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/media-preview/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-preview/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useMediaEditorContext } from '../media-editor-provider';\nimport { getMediaTypeFromMimeType } from '../../utils';\n\n/**\n * Props for MediaPreview component.\n */\nexport interface MediaPreviewProps {\n\t[ key: string ]: any; // TODO: Define specific props as needed, this will likely be for click handlers, accessibility attributes, etc.\n}\n\n/**\n * Props for MediaPreviewContent component.\n */\ninterface MediaPreviewContentProps {\n\tmediaType: { type: string };\n\tmediaUrl: string;\n\taltText?: string;\n\tdisplayTitle?: string;\n\tmimeType?: string;\n\tonLoad: () => void;\n\tonError: () => void;\n\tloadingState: 'loading' | 'loaded' | 'error';\n}\n\nfunction MediaPreviewContent( {\n\tmediaType,\n\tmediaUrl,\n\taltText,\n\tdisplayTitle,\n\tmimeType,\n\tonLoad,\n\tonError,\n\tloadingState,\n}: MediaPreviewContentProps ) {\n\tswitch ( mediaType.type ) {\n\t\tcase 'image':\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName={ loadingState === 'loaded' ? 'loaded' : '' }\n\t\t\t\t\tsrc={ mediaUrl }\n\t\t\t\t\talt={ altText || '' }\n\t\t\t\t\tonLoad={ onLoad }\n\t\t\t\t\tonError={ onError }\n\t\t\t\t/>\n\t\t\t);\n\t\tcase 'video':\n\t\t\treturn (\n\t\t\t\t<video src={ mediaUrl } controls onError={ onError }>\n\t\t\t\t\t{ displayTitle }\n\t\t\t\t</video>\n\t\t\t);\n\t\tcase 'audio':\n\t\t\treturn (\n\t\t\t\t<audio src={ mediaUrl } controls onError={ onError }>\n\t\t\t\t\t{ displayTitle }\n\t\t\t\t</audio>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div className=\"media-editor-preview__file-info\">\n\t\t\t\t\t<p className=\"media-editor-preview__file-name\">\n\t\t\t\t\t\t{ displayTitle }\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"media-editor-preview__mime-type\">\n\t\t\t\t\t\t{ mimeType }\n\t\t\t\t\t</p>\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={ mediaUrl }\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"media-editor-preview__download-link\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'View file' ) }\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n}\n\n/**\n * MediaPreview component displays the media file in the editor canvas.\n * Supports images, videos, audio files, and generic file displays.\n *\n * @param props - Component props including click handlers and accessibility attributes.\n * @return The MediaPreview component.\n */\nexport default function MediaPreview( props: MediaPreviewProps ) {\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'loading' | 'loaded' | 'error'\n\t>( 'loading' );\n\tconst { media } = useMediaEditorContext();\n\n\tconst {\n\t\tsource_url: mediaUrl,\n\t\tmime_type: mimeType,\n\t\talt_text: altText,\n\t\ttitle,\n\t} = media || {};\n\n\tconst mediaType = getMediaTypeFromMimeType( mimeType );\n\n\tif ( ! mediaUrl ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-preview media-editor-preview--empty\">\n\t\t\t\t<p>{ __( 'No media file available.' ) }</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( loadingState === 'error' ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-preview media-editor-preview--error\">\n\t\t\t\t<p>{ __( 'Failed to load media file.' ) }</p>\n\t\t\t\t<p className=\"media-editor-preview__url\">{ mediaUrl }</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst displayTitle =\n\t\ttypeof title === 'string' ? title : title?.rendered || title?.raw;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...props }\n\t\t\tclassName={ `media-editor-preview media-editor-preview--${ mediaType.type }` }\n\t\t>\n\t\t\t{ mediaType.type === 'image' && loadingState === 'loading' && (\n\t\t\t\t<div className=\"media-editor-preview__spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<MediaPreviewContent\n\t\t\t\tmediaType={ mediaType }\n\t\t\t\tmediaUrl={ mediaUrl }\n\t\t\t\taltText={ altText }\n\t\t\t\tdisplayTitle={ displayTitle }\n\t\t\t\tmimeType={ mimeType }\n\t\t\t\tonLoad={ () => setLoadingState( 'loaded' ) }\n\t\t\t\tonError={ () => setLoadingState( 'error' ) }\n\t\t\t\tloadingState={ loadingState }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAKnB,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AAoCrC,cAsBA,YAtBA;AAbJ,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,UAAS,UAAU,MAAO;AAAA,IACzB,KAAK;AACJ,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,iBAAiB,WAAW,WAAW;AAAA,UACnD,KAAM;AAAA,UACN,KAAM,WAAW;AAAA,UACjB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,IAEF,KAAK;AACJ,aACC,oBAAC,WAAM,KAAM,UAAW,UAAQ,MAAC,SAC9B,wBACH;AAAA,IAEF,KAAK;AACJ,aACC,oBAAC,WAAM,KAAM,UAAW,UAAQ,MAAC,SAC9B,wBACH;AAAA,IAEF;AACC,aACC,qBAAC,SAAI,WAAU,mCACd;AAAA,4BAAC,OAAE,WAAU,mCACV,wBACH;AAAA,QACA,oBAAC,OAAE,WAAU,mCACV,oBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YAER,aAAI,WAAY;AAAA;AAAA,QACnB;AAAA,SACD;AAAA,EAEH;AACD;AASe,SAAR,aAA+B,OAA2B;AAChE,QAAM,CAAE,cAAc,eAAgB,IAAI,SAEvC,SAAU;AACb,QAAM,EAAE,MAAM,IAAI,sBAAsB;AAExC,QAAM;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACD,IAAI,SAAS,CAAC;AAEd,QAAM,YAAY,yBAA0B,QAAS;AAErD,MAAK,CAAE,UAAW;AACjB,WACC,oBAAC,SAAI,WAAU,oDACd,8BAAC,OAAI,aAAI,0BAA2B,GAAG,GACxC;AAAA,EAEF;AAEA,MAAK,iBAAiB,SAAU;AAC/B,WACC,qBAAC,SAAI,WAAU,oDACd;AAAA,0BAAC,OAAI,aAAI,4BAA6B,GAAG;AAAA,MACzC,oBAAC,OAAE,WAAU,6BAA8B,oBAAU;AAAA,OACtD;AAAA,EAEF;AAEA,QAAM,eACL,OAAO,UAAU,WAAW,QAAQ,OAAO,YAAY,OAAO;AAE/D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACL,WAAY,8CAA+C,UAAU,IAAK;AAAA,MAExE;AAAA,kBAAU,SAAS,WAAW,iBAAiB,aAChD,oBAAC,SAAI,WAAU,iCACd,8BAAC,WAAQ,GACV;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAS,MAAM,gBAAiB,QAAS;AAAA,YACzC,SAAU,MAAM,gBAAiB,OAAQ;AAAA,YACzC;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/index.mjs

@@ -0,0 +1,10 @@
+// packages/media-editor/src/index.ts
+import { MediaEditorProvider } from "./components/media-editor-provider/index.mjs";
+import { default as default2 } from "./components/media-preview/index.mjs";
+import { default as default3 } from "./components/media-form/index.mjs";
+export {
+  MediaEditorProvider,
+  default3 as MediaForm,
+  default2 as MediaPreview
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// Components\nexport { MediaEditorProvider } from './components/media-editor-provider';\nexport { default as MediaPreview } from './components/media-preview';\nexport { default as MediaForm } from './components/media-form';\n\n// Types\nexport type {\n\tMedia,\n\tMediaEditorProviderProps,\n} from './components/media-editor-provider';\nexport type { MediaPreviewProps } from './components/media-preview';\nexport type { MediaFormProps } from './components/media-form';\n\n// Re-export commonly used dataviews types for convenience\nexport type { Field, Form } from '@wordpress/dataviews';\n"],
+  "mappings": ";AACA,SAAS,2BAA2B;AACpC,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAA4B;",
+  "names": ["default"]
+}

package/build-module/utils/get-media-type.mjs

@@ -0,0 +1,20 @@
+// packages/media-editor/src/utils/get-media-type.ts
+function getMediaTypeFromMimeType(mimeType) {
+  if (!mimeType) {
+    return { type: "application" };
+  }
+  if (mimeType.startsWith("image/")) {
+    return { type: "image" };
+  }
+  if (mimeType.startsWith("video/")) {
+    return { type: "video" };
+  }
+  if (mimeType.startsWith("audio/")) {
+    return { type: "audio" };
+  }
+  return { type: "application" };
+}
+export {
+  getMediaTypeFromMimeType
+};
+//# sourceMappingURL=get-media-type.mjs.map

package/build-module/utils/get-media-type.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/get-media-type.ts"],
+  "sourcesContent": ["/**\n * Media type result.\n */\nexport interface MediaType {\n\ttype: 'image' | 'video' | 'audio' | 'application';\n}\n\n/**\n * Determines the media type from a MIME type string.\n *\n * @param mimeType - The MIME type to check.\n * @return Object with type property ('image', 'video', 'audio', or 'application').\n */\nexport function getMediaTypeFromMimeType( mimeType?: string ): MediaType {\n\tif ( ! mimeType ) {\n\t\treturn { type: 'application' };\n\t}\n\n\tif ( mimeType.startsWith( 'image/' ) ) {\n\t\treturn { type: 'image' };\n\t}\n\tif ( mimeType.startsWith( 'video/' ) ) {\n\t\treturn { type: 'video' };\n\t}\n\tif ( mimeType.startsWith( 'audio/' ) ) {\n\t\treturn { type: 'audio' };\n\t}\n\treturn { type: 'application' };\n}\n"],
+  "mappings": ";AAaO,SAAS,yBAA0B,UAA+B;AACxE,MAAK,CAAE,UAAW;AACjB,WAAO,EAAE,MAAM,cAAc;AAAA,EAC9B;AAEA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,SAAO,EAAE,MAAM,cAAc;AAC9B;",
+  "names": []
+}

package/build-module/utils/index.mjs

@@ -0,0 +1,6 @@
+// packages/media-editor/src/utils/index.ts
+import { getMediaTypeFromMimeType } from "./get-media-type.mjs";
+export {
+  getMediaTypeFromMimeType
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/utils/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/index.ts"],
+  "sourcesContent": ["export { getMediaTypeFromMimeType } from './get-media-type';\nexport type { MediaType } from './get-media-type';\n"],
+  "mappings": ";AAAA,SAAS,gCAAgC;",
+  "names": []
+}

package/build-style/style-rtl.css

@@ -0,0 +1,127 @@
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.media-editor-preview {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  padding: 32px;
+  position: relative;
+}
+.media-editor-preview__spinner {
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+.media-editor-preview--loading {
+  width: 100%;
+  height: 100%;
+}
+.media-editor-preview--image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  width: auto;
+  height: auto;
+  opacity: 0;
+}
+@keyframes __wp-base-styles-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .media-editor-preview--image img.loaded {
+    animation: __wp-base-styles-fade-in 0.08s linear 0s;
+    animation-fill-mode: forwards;
+  }
+}
+.media-editor-preview--video video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  width: auto;
+  height: auto;
+}
+.media-editor-preview--audio audio {
+  max-width: 100%;
+}
+.media-editor-preview--file {
+  text-align: center;
+}
+.media-editor-preview__file-info {
+  background: #f0f0f0;
+  padding: 24px;
+  border-radius: 2px;
+}
+.media-editor-preview__file-name {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.media-editor-preview__mime-type {
+  color: #757575;
+  font-size: 0.9em;
+  margin-bottom: 16px;
+}
+.media-editor-preview__download-link {
+  display: inline-block;
+  margin-top: 8px;
+}
+.media-editor-preview--error, .media-editor-preview--empty {
+  color: #757575;
+  text-align: center;
+}
+.media-editor-preview__url {
+  font-size: 0.9em;
+  color: #949494;
+  word-break: break-all;
+  margin-top: 8px;
+}

package/build-style/style.css

@@ -0,0 +1,127 @@
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.media-editor-preview {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  padding: 32px;
+  position: relative;
+}
+.media-editor-preview__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.media-editor-preview--loading {
+  width: 100%;
+  height: 100%;
+}
+.media-editor-preview--image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  width: auto;
+  height: auto;
+  opacity: 0;
+}
+@keyframes __wp-base-styles-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .media-editor-preview--image img.loaded {
+    animation: __wp-base-styles-fade-in 0.08s linear 0s;
+    animation-fill-mode: forwards;
+  }
+}
+.media-editor-preview--video video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  width: auto;
+  height: auto;
+}
+.media-editor-preview--audio audio {
+  max-width: 100%;
+}
+.media-editor-preview--file {
+  text-align: center;
+}
+.media-editor-preview__file-info {
+  background: #f0f0f0;
+  padding: 24px;
+  border-radius: 2px;
+}
+.media-editor-preview__file-name {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.media-editor-preview__mime-type {
+  color: #757575;
+  font-size: 0.9em;
+  margin-bottom: 16px;
+}
+.media-editor-preview__download-link {
+  display: inline-block;
+  margin-top: 8px;
+}
+.media-editor-preview--error, .media-editor-preview--empty {
+  color: #757575;
+  text-align: center;
+}
+.media-editor-preview__url {
+  font-size: 0.9em;
+  color: #949494;
+  word-break: break-all;
+  margin-top: 8px;
+}

package/build-types/components/media-editor-provider/index.d.ts

@@ -0,0 +1,62 @@
+import type { Field } from '@wordpress/dataviews';
+import type { ReactNode } from 'react';
+/**
+ * Media object from WordPress REST API.
+ */
+export interface Media {
+    id?: number;
+    source_url?: string;
+    mime_type?: string;
+    alt_text?: string;
+    title?: string | {
+        rendered?: string;
+        raw?: string;
+    };
+    caption?: string | {
+        rendered?: string;
+        raw?: string;
+    };
+    description?: string | {
+        rendered?: string;
+        raw?: string;
+    };
+    [key: string]: any;
+}
+/**
+ * Context value for MediaEditor.
+ */
+export interface MediaEditorContextValue {
+    media?: Media;
+    onChange?: (updates: Partial<Media>) => void;
+    fields: Field<Media>[];
+}
+/**
+ * Props for MediaEditorProvider.
+ */
+export interface MediaEditorProviderProps {
+    /** The media object to edit. */
+    value?: Media;
+    /**
+     * Callback when media is updated.
+     *
+     * Optional - if not provided, the MediaEditor can be used in a read-only mode,
+     * useful for preview-only scenarios.
+     */
+    onChange?: (updates: Partial<Media>) => void;
+    /** Configuration settings for the media editor. */
+    settings?: {
+        fields?: Field<Media>[];
+    };
+    /** Child components. */
+    children: ReactNode;
+}
+export declare function MediaEditorProvider({ value, onChange, settings, children, }: MediaEditorProviderProps): import("react").JSX.Element;
+/**
+ * Hook to access the MediaEditor context.
+ *
+ * Must be used within a MediaEditorProvider component.
+ *
+ * @return MediaEditorContextValue value with media, onChange, and fields, etc.
+ */
+export declare function useMediaEditorContext(): MediaEditorContextValue;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/media-editor-provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-editor-provider/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,KAAK;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,CAAE,OAAO,EAAE,OAAO,CAAE,KAAK,CAAE,KAAM,IAAI,CAAC;IACjD,MAAM,EAAE,KAAK,CAAE,KAAK,CAAE,EAAE,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACxC,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAE,OAAO,EAAE,OAAO,CAAE,KAAK,CAAE,KAAM,IAAI,CAAC;IACjD,mDAAmD;IACnD,QAAQ,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,KAAK,CAAE,KAAK,CAAE,EAAE,CAAC;KAC1B,CAAC;IACF,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACpB;AAMD,wBAAgB,mBAAmB,CAAE,EACpC,KAAK,EACL,QAAQ,EACR,QAAa,EACb,QAAQ,GACR,EAAE,wBAAwB,+BAY1B;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,IAAI,uBAAuB,CAQ/D"}

package/build-types/components/media-form/index.d.ts

@@ -0,0 +1,22 @@
+import type { Form } from '@wordpress/dataviews';
+import type { ReactNode } from 'react';
+/**
+ * Props for MediaForm component.
+ */
+export interface MediaFormProps {
+    form?: Form;
+    header?: ReactNode;
+}
+/**
+ * MediaForm component for editing media metadata.
+ *
+ * Renders a DataForm with fields for editing media properties like
+ * title, alt text, caption, description, etc.
+ *
+ * @param props        - Component props.
+ * @param props.form   - Optional form configuration.
+ * @param props.header - Optional header content to display above the form.
+ * @return The MediaForm component.
+ */
+export default function MediaForm({ form: formOverrides, header, }: MediaFormProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/media-form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-form/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAS,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,IAAI,EAAE,aAAa,EACnB,MAAM,GACN,EAAE,cAAc,+BAkDhB"}

package/build-types/components/media-preview/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Props for MediaPreview component.
+ */
+export interface MediaPreviewProps {
+    [key: string]: any;
+}
+/**
+ * MediaPreview component displays the media file in the editor canvas.
+ * Supports images, videos, audio files, and generic file displays.
+ *
+ * @param props - Component props including click handlers and accessibility attributes.
+ * @return The MediaPreview component.
+ */
+export default function MediaPreview(props: MediaPreviewProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/media-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-preview/index.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB;AAuED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,KAAK,EAAE,iBAAiB,+BAyD7D"}

package/build-types/index.d.ts

@@ -0,0 +1,8 @@
+export { MediaEditorProvider } from './components/media-editor-provider';
+export { default as MediaPreview } from './components/media-preview';
+export { default as MediaForm } from './components/media-form';
+export type { Media, MediaEditorProviderProps, } from './components/media-editor-provider';
+export type { MediaPreviewProps } from './components/media-preview';
+export type { MediaFormProps } from './components/media-form';
+export type { Field, Form } from '@wordpress/dataviews';
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAG/D,YAAY,EACX,KAAK,EACL,wBAAwB,GACxB,MAAM,oCAAoC,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC"}

package/build-types/utils/get-media-type.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Media type result.
+ */
+export interface MediaType {
+    type: 'image' | 'video' | 'audio' | 'application';
+}
+/**
+ * Determines the media type from a MIME type string.
+ *
+ * @param mimeType - The MIME type to check.
+ * @return Object with type property ('image', 'video', 'audio', or 'application').
+ */
+export declare function getMediaTypeFromMimeType(mimeType?: string): MediaType;
+//# sourceMappingURL=get-media-type.d.ts.map

package/build-types/utils/get-media-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-media-type.d.ts","sourceRoot":"","sources":["../../src/utils/get-media-type.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;CAClD;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,SAAS,CAevE"}

package/build-types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getMediaTypeFromMimeType } from './get-media-type';
+export type { MediaType } from './get-media-type';
+//# sourceMappingURL=index.d.ts.map

package/build-types/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}