@wix/auto-patterns 1.48.0 → 1.49.0

package/dist/cjs/cms-fields/components/media-control/paste-url-modal.js

@@ -0,0 +1,94 @@
+"use strict";
+
+exports.__esModule = true;
+exports.PasteURLModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/media-control/paste-url-modal.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PasteURLModal = ({
+  show,
+  onClose,
+  onSave,
+  value = '',
+  title = 'Insert Link',
+  inputPlaceholder = 'Enter URL',
+  primaryButtonText = 'Save',
+  secondaryButtonText = 'Cancel',
+  dataHook = 'paste-url-modal',
+  validator,
+  errorStatusMessage
+}) => {
+  const [url, setUrl] = (0, _react.useState)(value);
+  const [touched, setTouched] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setUrl(value);
+    setTouched(false);
+  }, [value, show]);
+  const isValid = (0, _react.useMemo)(() => {
+    if (!validator) {
+      return true;
+    }
+    return validator(url || undefined);
+  }, [url, validator]);
+  const showError = touched && !isValid && url !== '';
+  const handleConfirm = () => {
+    if (!isValid) {
+      setTouched(true);
+      return;
+    }
+    onSave(url);
+    onClose();
+  };
+  const handleChange = e => {
+    setUrl(e.target.value);
+    setTouched(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
+    isOpen: show,
+    onRequestClose: onClose,
+    screen: "desktop",
+    dataHook: dataHook,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 64,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
+    dataHook: `${dataHook}.layout`,
+    title: title,
+    closeButtonProps: {
+      onClick: onClose
+    },
+    primaryButtonOnClick: handleConfirm,
+    secondaryButtonOnClick: onClose,
+    primaryButtonText: primaryButtonText,
+    secondaryButtonText: secondaryButtonText,
+    overflowY: "none",
+    width: "600px",
+    content: /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+      dataHook: `${dataHook}.urlInput`,
+      placeholder: inputPlaceholder,
+      value: url,
+      onChange: handleChange,
+      autoFocus: true,
+      status: showError ? 'error' : undefined,
+      statusMessage: showError ? errorStatusMessage : undefined,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 81,
+        columnNumber: 11
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 70,
+      columnNumber: 7
+    }
+  }));
+};
+exports.PasteURLModal = PasteURLModal;
+//# sourceMappingURL=paste-url-modal.js.map

package/dist/cjs/cms-fields/components/media-control/paste-url-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PasteURLModal","show","onClose","onSave","value","title","inputPlaceholder","primaryButtonText","secondaryButtonText","dataHook","validator","errorStatusMessage","url","setUrl","useState","touched","setTouched","useEffect","isValid","useMemo","undefined","showError","handleConfirm","handleChange","target","createElement","Modal","isOpen","onRequestClose","screen","__self","__source","fileName","lineNumber","columnNumber","CustomModalLayout","closeButtonProps","onClick","primaryButtonOnClick","secondaryButtonOnClick","overflowY","width","content","Input","placeholder","onChange","autoFocus","status","statusMessage","exports"],"sources":["../../../../../src/cms-fields/components/media-control/paste-url-modal.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { Modal, CustomModalLayout, Input } from '@wix/design-system';\n\nexport interface PasteURLModalProps {\n  show: boolean;\n  onClose: () => void;\n  onSave: (url?: string) => void;\n  value?: string;\n  title?: string;\n  inputPlaceholder?: string;\n  primaryButtonText?: string;\n  secondaryButtonText?: string;\n  keepMounted?: boolean;\n  dataHook?: string;\n  validator?: (value?: string) => boolean;\n  errorStatusMessage?: string;\n}\n\nexport const PasteURLModal: React.FC<PasteURLModalProps> = ({\n  show,\n  onClose,\n  onSave,\n  value = '',\n  title = 'Insert Link',\n  inputPlaceholder = 'Enter URL',\n  primaryButtonText = 'Save',\n  secondaryButtonText = 'Cancel',\n  dataHook = 'paste-url-modal',\n  validator,\n  errorStatusMessage,\n}) => {\n  const [url, setUrl] = useState(value);\n  const [touched, setTouched] = useState(false);\n\n  useEffect(() => {\n    setUrl(value);\n    setTouched(false);\n  }, [value, show]);\n\n  const isValid = useMemo(() => {\n    if (!validator) {\n      return true;\n    }\n    return validator(url || undefined);\n  }, [url, validator]);\n\n  const showError = touched && !isValid && url !== '';\n\n  const handleConfirm = () => {\n    if (!isValid) {\n      setTouched(true);\n      return;\n    }\n    onSave(url);\n    onClose();\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setUrl(e.target.value);\n    setTouched(true);\n  };\n\n  return (\n    <Modal\n      isOpen={show}\n      onRequestClose={onClose}\n      screen=\"desktop\"\n      dataHook={dataHook}\n    >\n      <CustomModalLayout\n        dataHook={`${dataHook}.layout`}\n        title={title}\n        closeButtonProps={{ onClick: onClose }}\n        primaryButtonOnClick={handleConfirm}\n        secondaryButtonOnClick={onClose}\n        primaryButtonText={primaryButtonText}\n        secondaryButtonText={secondaryButtonText}\n        overflowY=\"none\"\n        width=\"600px\"\n        content={\n          <Input\n            dataHook={`${dataHook}.urlInput`}\n            placeholder={inputPlaceholder}\n            value={url}\n            onChange={handleChange}\n            autoFocus\n            status={showError ? 'error' : undefined}\n            statusMessage={showError ? errorStatusMessage : undefined}\n          />\n        }\n      />\n    </Modal>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-control/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

package/dist/cjs/cms-fields/components/media-control/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/cms-fields/components/media-control/types.ts"],"sourcesContent":["import type { FormInputProps } from '../../types';\n\ntype WithPreviewCallbacks = {\n  previewCallbacks?: { onOpen: () => void; onClose: () => void };\n};\n\nexport type FormMediaControlProps<T = string> = Omit<\n  FormInputProps<T>,\n  'field'\n> &\n  WithPreviewCallbacks;\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-control/use-document-delete.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useDocumentDelete = void 0;
+var _react = require("react");
+var _hooks = require("../../hooks");
+var _mediaUtils = require("../../utils/media-utils");
+const useDocumentDelete = ({
+  data = [],
+  onChange
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const [indexToDelete, setIndexToDelete] = (0, _react.useState)(null);
+  const onDelete = (0, _react.useCallback)(index => () => setIndexToDelete(index), []);
+  const onDeleteCancel = (0, _react.useCallback)(() => setIndexToDelete(null), []);
+  const onDeleteConfirm = (0, _react.useCallback)(() => {
+    if (indexToDelete === null) {
+      return;
+    }
+    const updatedData = [...(data ?? [])];
+    updatedData.splice(indexToDelete, 1);
+    onChange(updatedData);
+    setIndexToDelete(null);
+  }, [indexToDelete, onChange, data]);
+  const filename = indexToDelete !== null ? (0, _mediaUtils.getMediaTitle)(data[indexToDelete]) : '';
+  return {
+    isOpen: indexToDelete !== null,
+    onDelete,
+    onDeleteCancel,
+    onDeleteConfirm,
+    title: t('CMS.document.delete.title', {
+      filename
+    }),
+    text: t('CMS.document.delete.message', {
+      filename
+    })
+  };
+};
+exports.useDocumentDelete = useDocumentDelete;
+//# sourceMappingURL=use-document-delete.js.map

package/dist/cjs/cms-fields/components/media-control/use-document-delete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_hooks","_mediaUtils","useDocumentDelete","data","onChange","t","useTranslations","indexToDelete","setIndexToDelete","useState","onDelete","useCallback","index","onDeleteCancel","onDeleteConfirm","updatedData","splice","filename","getMediaTitle","isOpen","title","text","exports"],"sources":["../../../../../src/cms-fields/components/media-control/use-document-delete.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { useTranslations } from '../../hooks';\nimport { getMediaTitle } from '../../utils/media-utils';\n\nexport interface UseDocumentDeleteParams {\n  data?: string[];\n  onChange: (value: string[]) => void;\n}\n\nexport const useDocumentDelete = ({\n  data = [],\n  onChange,\n}: UseDocumentDeleteParams) => {\n  const { t } = useTranslations();\n  const [indexToDelete, setIndexToDelete] = useState<number | null>(null);\n\n  const onDelete = useCallback(\n    (index: number) => () => setIndexToDelete(index),\n    [],\n  );\n\n  const onDeleteCancel = useCallback(() => setIndexToDelete(null), []);\n\n  const onDeleteConfirm = useCallback(() => {\n    if (indexToDelete === null) {\n      return;\n    }\n\n    const updatedData = [...(data ?? [])];\n    updatedData.splice(indexToDelete, 1);\n    onChange(updatedData);\n\n    setIndexToDelete(null);\n  }, [indexToDelete, onChange, data]);\n\n  const filename =\n    indexToDelete !== null ? getMediaTitle(data[indexToDelete]) : '';\n\n  return {\n    isOpen: indexToDelete !== null,\n    onDelete,\n    onDeleteCancel,\n    onDeleteConfirm,\n    title: t('CMS.document.delete.title', { filename }),\n    text: t('CMS.document.delete.message', { filename }),\n  };\n};\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAOO,MAAMG,iBAAiB,GAAGA,CAAC;EAChCC,IAAI,GAAG,EAAE;EACTC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,sBAAe,EAAC,CAAC;EAC/B,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAgB,IAAI,CAAC;EAEvE,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EACzBC,KAAa,IAAK,MAAMJ,gBAAgB,CAACI,KAAK,CAAC,EAChD,EACF,CAAC;EAED,MAAMC,cAAc,GAAG,IAAAF,kBAAW,EAAC,MAAMH,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEpE,MAAMM,eAAe,GAAG,IAAAH,kBAAW,EAAC,MAAM;IACxC,IAAIJ,aAAa,KAAK,IAAI,EAAE;MAC1B;IACF;IAEA,MAAMQ,WAAW,GAAG,CAAC,IAAIZ,IAAI,IAAI,EAAE,CAAC,CAAC;IACrCY,WAAW,CAACC,MAAM,CAACT,aAAa,EAAE,CAAC,CAAC;IACpCH,QAAQ,CAACW,WAAW,CAAC;IAErBP,gBAAgB,CAAC,IAAI,CAAC;EACxB,CAAC,EAAE,CAACD,aAAa,EAAEH,QAAQ,EAAED,IAAI,CAAC,CAAC;EAEnC,MAAMc,QAAQ,GACZV,aAAa,KAAK,IAAI,GAAG,IAAAW,yBAAa,EAACf,IAAI,CAACI,aAAa,CAAC,CAAC,GAAG,EAAE;EAElE,OAAO;IACLY,MAAM,EAAEZ,aAAa,KAAK,IAAI;IAC9BG,QAAQ;IACRG,cAAc;IACdC,eAAe;IACfM,KAAK,EAAEf,CAAC,CAAC,2BAA2B,EAAE;MAAEY;IAAS,CAAC,CAAC;IACnDI,IAAI,EAAEhB,CAAC,CAAC,6BAA6B,EAAE;MAAEY;IAAS,CAAC;EACrD,CAAC;AACH,CAAC;AAACK,OAAA,CAAApB,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-control/use-media-control.js

@@ -0,0 +1,169 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useMediaControl = useMediaControl;
+var _react = require("react");
+var _dashboard = require("@wix/dashboard");
+var _media = require("@wix/media");
+var _mediaUtils = require("../../utils/media-utils");
+var _autoCmsFieldTypes = require("../../auto-cms-field-types");
+const MEDIA_TYPE_TO_CATEGORY = {
+  IMAGE: 'IMAGE',
+  VIDEO: 'VIDEO',
+  MUSIC: 'MUSIC',
+  // MEDIA_TYPES.AUDIO = 'MUSIC'
+  DOCUMENT: 'DOCUMENT',
+  ALL_MEDIA: undefined
+};
+
+/**
+ * Extracts a playable URL from media.audio, which may be:
+ *   - a string (wix:audio:// URI or direct URL)
+ *   - an object with { audio: string } (nested URI)
+ *   - an object with { assets: [{ url }] } or { assets: [string] }
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const extractAudioUrl = audio => {
+  if (audio) {
+    var _audio$assets;
+    if (typeof audio === 'string') {
+      return audio;
+    }
+    if (typeof audio.audio === 'string') {
+      return audio.audio;
+    }
+    const firstAsset = (_audio$assets = audio.assets) == null ? void 0 : _audio$assets[0];
+    if (typeof firstAsset === 'string') {
+      return firstAsset;
+    }
+    if (typeof (firstAsset == null ? void 0 : firstAsset.url) === 'string') {
+      return firstAsset.url;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Extracts the Wix media URI from media manager result.
+ * Media manager returns different structures for different media types.
+ */
+const extractMediaUri = mediaItem => {
+  const {
+    media
+  } = mediaItem || {};
+  if (media) {
+    var _media$image, _media$video, _media$document;
+    return (
+      // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values
+      ((_media$image = media.image) == null ? void 0 : _media$image.image) || typeof media.image === 'string' && media.image || ((_media$video = media.video) == null ? void 0 : _media$video.video) || typeof media.video === 'string' && media.video || ((_media$document = media.document) == null ? void 0 : _media$document.document) || typeof media.document === 'string' && media.document || extractAudioUrl(media.audio) || ''
+    );
+  }
+  return '';
+};
+function useMediaControl({
+  mediaType,
+  readOnly,
+  autoFocus,
+  initialLoading,
+  inputRef,
+  viewRef,
+  onFocus,
+  onBlur,
+  ...params
+}) {
+  const {
+    value,
+    multiSelect
+  } = params;
+  const [loading, setLoading] = (0, _react.useState)(Boolean(initialLoading && value));
+  const mediaRequested = (0, _react.useRef)(false);
+  const setActive = (0, _react.useCallback)(() => {
+    if (!autoFocus) {
+      return;
+    }
+    if (value) {
+      var _viewRef$current, _inputRef$current;
+      viewRef && (viewRef == null || (_viewRef$current = viewRef.current) == null ? void 0 : _viewRef$current.focus());
+      !viewRef && (inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus());
+    } else {
+      var _inputRef$current2;
+      inputRef == null || (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
+    }
+  }, [autoFocus, value, inputRef, viewRef]);
+  (0, _react.useEffect)(() => setActive(), [setActive]);
+  const onMediaLoad = (0, _react.useCallback)(() => setLoading(false), []);
+  const callMedia = (0, _react.useCallback)(async index => {
+    if (mediaRequested.current || readOnly) {
+      return;
+    }
+    if (!params.onChange) {
+      return;
+    }
+    mediaRequested.current = true;
+    onFocus == null || onFocus();
+    setLoading(true);
+    try {
+      const category = MEDIA_TYPE_TO_CATEGORY[mediaType];
+      const mediaManagerData = await _dashboard.dashboard.openMediaManager({
+        multiSelect: Boolean(multiSelect),
+        ...(category && {
+          category
+        })
+      });
+      onBlur == null || onBlur();
+      setLoading(false);
+      setActive();
+      mediaRequested.current = false;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const items = (mediaManagerData == null ? void 0 : mediaManagerData.items) || (mediaManagerData == null ? void 0 : mediaManagerData.files);
+      if (!(items != null && items.length)) {
+        return;
+      }
+      if (params.multiSelect) {
+        const newURIs = items.map(extractMediaUri);
+        if (!newURIs.length) {
+          throw new Error(`Media Control Error: Media Manager returns not-covered Multi-Document data.`);
+        }
+        if (typeof index === 'number') {
+          const newValue = value ? [...value] : [];
+          newValue.splice(index, 1, ...newURIs);
+          params.onChange(newValue);
+        } else {
+          params.onChange([...(value ?? []), ...newURIs]);
+        }
+      } else {
+        params.onChange(extractMediaUri(items[0]));
+      }
+    } catch (e) {
+      setLoading(false);
+      mediaRequested.current = false;
+      console.error(`Media Control Error:`, e);
+    }
+  }, [mediaType, multiSelect, onBlur, onFocus, params, readOnly, setActive, value]);
+  const downloadMedia = (0, _react.useCallback)(async mediaUri => {
+    if (!mediaUri) {
+      return;
+    }
+    try {
+      var _result$downloadUrls;
+      const result = await _media.files.generateFileDownloadUrl(mediaUri);
+      const downloadUrl = (_result$downloadUrls = result.downloadUrls) == null || (_result$downloadUrls = _result$downloadUrls[0]) == null ? void 0 : _result$downloadUrls.url;
+      if (!downloadUrl) {
+        throw new Error('No download URL returned');
+      }
+      return (0, _mediaUtils.executeDownloading)(downloadUrl);
+    } catch (error) {
+      // Fallback: open the static URL in a new tab
+      console.error('Media download error, falling back to static URL:', error);
+      return (0, _mediaUtils.executeDownloading)((0, _autoCmsFieldTypes.getMediaURL)(mediaUri));
+    }
+  }, []);
+  return {
+    loading,
+    callMedia,
+    downloadMedia,
+    onMediaLoad
+  };
+}
+//# sourceMappingURL=use-media-control.js.map

package/dist/cjs/cms-fields/components/media-control/use-media-control.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_dashboard","_media","_mediaUtils","_autoCmsFieldTypes","MEDIA_TYPE_TO_CATEGORY","IMAGE","VIDEO","MUSIC","DOCUMENT","ALL_MEDIA","undefined","extractAudioUrl","audio","_audio$assets","firstAsset","assets","url","extractMediaUri","mediaItem","media","_media$image","_media$video","_media$document","image","video","document","useMediaControl","mediaType","readOnly","autoFocus","initialLoading","inputRef","viewRef","onFocus","onBlur","params","value","multiSelect","loading","setLoading","useState","Boolean","mediaRequested","useRef","setActive","useCallback","_viewRef$current","_inputRef$current","current","focus","_inputRef$current2","useEffect","onMediaLoad","callMedia","index","onChange","category","mediaManagerData","dashboard","openMediaManager","items","files","length","newURIs","map","Error","newValue","splice","e","console","error","downloadMedia","mediaUri","_result$downloadUrls","result","generateFileDownloadUrl","downloadUrl","downloadUrls","executeDownloading","getMediaURL"],"sources":["../../../../../src/cms-fields/components/media-control/use-media-control.ts"],"sourcesContent":["import { useRef, useState, useEffect, useCallback } from 'react';\nimport { dashboard } from '@wix/dashboard';\nimport { files } from '@wix/media';\n\nimport type { MEDIA_TYPES } from '../../utils/media-utils';\nimport { executeDownloading } from '../../utils/media-utils';\nimport { getMediaURL } from '../../auto-cms-field-types';\n\ntype Focusable = { focus: () => void };\ntype FocusableRef =\n  | React.RefObject<Focusable | undefined>\n  | React.MutableRefObject<Focusable | undefined>;\n\ninterface UseMediaControlBaseParams {\n  mediaType: MEDIA_TYPES;\n  autoFocus?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  readOnly?: boolean;\n  initialLoading?: boolean;\n  inputRef?: FocusableRef;\n  viewRef?: FocusableRef;\n}\n\ninterface UseSingleMediaControlParams extends UseMediaControlBaseParams {\n  value?: string;\n  onChange?: (value: string) => void;\n  multiSelect?: false;\n}\n\ninterface UseMultiMediaControlParams extends UseMediaControlBaseParams {\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  multiSelect: true;\n}\n\nexport type UseMediaControlParams =\n  | UseSingleMediaControlParams\n  | UseMultiMediaControlParams;\n\ninterface UseMediaControlBaseReturnType {\n  loading: boolean;\n  onMediaLoad: () => void;\n}\n\ninterface UseSingleMediaControlReturnType\n  extends UseMediaControlBaseReturnType {\n  callMedia(): Promise<void>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\ninterface UseMultiMediaControlReturnType extends UseMediaControlBaseReturnType {\n  callMedia(index?: number): Promise<void>;\n  downloadMedia(mediaUri?: string): Promise<void>;\n}\n\nexport type UseMediaControlReturnType =\n  | UseSingleMediaControlReturnType\n  | UseMultiMediaControlReturnType;\n\nconst MEDIA_TYPE_TO_CATEGORY: Record<string, string | undefined> = {\n  IMAGE: 'IMAGE',\n  VIDEO: 'VIDEO',\n  MUSIC: 'MUSIC', // MEDIA_TYPES.AUDIO = 'MUSIC'\n  DOCUMENT: 'DOCUMENT',\n  ALL_MEDIA: undefined,\n};\n\n/**\n * Extracts a playable URL from media.audio, which may be:\n *   - a string (wix:audio:// URI or direct URL)\n *   - an object with { audio: string } (nested URI)\n *   - an object with { assets: [{ url }] } or { assets: [string] }\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst extractAudioUrl = (audio: any): string | undefined => {\n  if (audio) {\n    if (typeof audio === 'string') {\n      return audio;\n    }\n    if (typeof audio.audio === 'string') {\n      return audio.audio;\n    }\n    const firstAsset = audio.assets?.[0];\n    if (typeof firstAsset === 'string') {\n      return firstAsset;\n    }\n    if (typeof firstAsset?.url === 'string') {\n      return firstAsset.url;\n    }\n  }\n  return undefined;\n};\n\n/**\n * Extracts the Wix media URI from media manager result.\n * Media manager returns different structures for different media types.\n */\nconst extractMediaUri = (mediaItem: any): string => {\n  const { media } = mediaItem || {};\n  if (media) {\n    return (\n      // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values\n      media.image?.image ||\n      (typeof media.image === 'string' && media.image) ||\n      media.video?.video ||\n      (typeof media.video === 'string' && media.video) ||\n      media.document?.document ||\n      (typeof media.document === 'string' && media.document) ||\n      extractAudioUrl(media.audio) ||\n      ''\n    );\n  }\n\n  return '';\n};\n\nexport function useMediaControl(\n  params: UseSingleMediaControlParams,\n): UseSingleMediaControlReturnType;\n\nexport function useMediaControl(\n  params: UseMultiMediaControlParams,\n): UseMultiMediaControlReturnType;\n\nexport function useMediaControl({\n  mediaType,\n  readOnly,\n  autoFocus,\n  initialLoading,\n  inputRef,\n  viewRef,\n  onFocus,\n  onBlur,\n  ...params\n}: UseMediaControlParams): UseMediaControlReturnType {\n  const { value, multiSelect } = params;\n\n  const [loading, setLoading] = useState(Boolean(initialLoading && value));\n  const mediaRequested = useRef(false);\n\n  const setActive = useCallback(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    if (value) {\n      viewRef && viewRef?.current?.focus();\n      !viewRef && inputRef?.current?.focus();\n    } else {\n      inputRef?.current?.focus();\n    }\n  }, [autoFocus, value, inputRef, viewRef]);\n\n  useEffect(() => setActive(), [setActive]);\n\n  const onMediaLoad = useCallback(() => setLoading(false), []);\n\n  const callMedia = useCallback(\n    async (index?: number) => {\n      if (mediaRequested.current || readOnly) {\n        return;\n      }\n\n      if (!params.onChange) {\n        return;\n      }\n\n      mediaRequested.current = true;\n\n      onFocus?.();\n      setLoading(true);\n\n      try {\n        const category = MEDIA_TYPE_TO_CATEGORY[mediaType];\n        const mediaManagerData = await dashboard.openMediaManager({\n          multiSelect: Boolean(multiSelect),\n          ...(category && { category }),\n        });\n\n        onBlur?.();\n        setLoading(false);\n\n        setActive();\n\n        mediaRequested.current = false;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const items =\n          mediaManagerData?.items || (mediaManagerData as any)?.files;\n\n        if (!items?.length) {\n          return;\n        }\n\n        if (params.multiSelect) {\n          const newURIs = items.map(extractMediaUri);\n\n          if (!newURIs.length) {\n            throw new Error(\n              `Media Control Error: Media Manager returns not-covered Multi-Document data.`,\n            );\n          }\n\n          if (typeof index === 'number') {\n            const newValue = value ? [...value] : [];\n            newValue.splice(index, 1, ...newURIs);\n            params.onChange(newValue);\n          } else {\n            params.onChange([...((value as string[]) ?? []), ...newURIs]);\n          }\n        } else {\n          params.onChange(extractMediaUri(items[0]));\n        }\n      } catch (e) {\n        setLoading(false);\n        mediaRequested.current = false;\n        console.error(`Media Control Error:`, e);\n      }\n    },\n    [\n      mediaType,\n      multiSelect,\n      onBlur,\n      onFocus,\n      params,\n      readOnly,\n      setActive,\n      value,\n    ],\n  );\n\n  const downloadMedia = useCallback(async (mediaUri?: string) => {\n    if (!mediaUri) {\n      return;\n    }\n\n    try {\n      const result = await files.generateFileDownloadUrl(mediaUri);\n      const downloadUrl = result.downloadUrls?.[0]?.url;\n      if (!downloadUrl) {\n        throw new Error('No download URL returned');\n      }\n      return executeDownloading(downloadUrl);\n    } catch (error) {\n      // Fallback: open the static URL in a new tab\n      console.error('Media download error, falling back to static URL:', error);\n      return executeDownloading(getMediaURL(mediaUri));\n    }\n  }, []);\n\n  return {\n    loading,\n    callMedia,\n    downloadMedia,\n    onMediaLoad,\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-control/use-paste-url-form.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.usePasteURLForm = void 0;
+var _react = require("react");
+var _hooks = require("../../hooks");
+const usePasteURLForm = ({
+  onChange
+}) => {
+  const {
+    isOpen,
+    onOpen: onOpenModal,
+    onClose
+  } = (0, _hooks.useOpenState)(false);
+  const [title, setTitle] = (0, _react.useState)('');
+  const [value, setValue] = (0, _react.useState)('');
+  const [indexToReplace, setIndexToReplace] = (0, _react.useState)(undefined);
+  const onOpen = (0, _react.useCallback)(({
+    title,
+    value,
+    index
+  }) => () => {
+    setTitle(title);
+    setValue(value ?? '');
+    onOpenModal();
+    setIndexToReplace(index);
+  }, [onOpenModal]);
+  const onSave = (0, _react.useCallback)(value => {
+    onChange(value, indexToReplace);
+  }, [onChange, indexToReplace]);
+  return {
+    isOpen,
+    title,
+    onOpen,
+    onClose,
+    onSave,
+    value
+  };
+};
+exports.usePasteURLForm = usePasteURLForm;
+//# sourceMappingURL=use-paste-url-form.js.map

package/dist/cjs/cms-fields/components/media-control/use-paste-url-form.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_hooks","usePasteURLForm","onChange","isOpen","onOpen","onOpenModal","onClose","useOpenState","title","setTitle","useState","value","setValue","indexToReplace","setIndexToReplace","undefined","useCallback","index","onSave","exports"],"sources":["../../../../../src/cms-fields/components/media-control/use-paste-url-form.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { useOpenState } from '../../hooks';\n\nexport interface UsePasteURLFormParams {\n  onChange: (value: string, indexToReplace?: number) => void;\n}\n\nexport interface OpenPasteURLFormParams {\n  title: string;\n  value?: string;\n  index?: number;\n}\n\nexport type UsePasteURLFormHook = (params: UsePasteURLFormParams) => {\n  isOpen: boolean;\n  title: string;\n  onOpen: (params: OpenPasteURLFormParams) => () => void;\n  onClose: () => void;\n  onSave: (value: string) => void;\n  value?: string;\n};\n\nexport const usePasteURLForm: UsePasteURLFormHook = ({ onChange }) => {\n  const { isOpen, onOpen: onOpenModal, onClose } = useOpenState(false);\n  const [title, setTitle] = useState('');\n  const [value, setValue] = useState('');\n  const [indexToReplace, setIndexToReplace] = useState<number | undefined>(\n    undefined,\n  );\n\n  const onOpen = useCallback(\n    ({ title, value, index }: OpenPasteURLFormParams) =>\n      () => {\n        setTitle(title);\n        setValue(value ?? '');\n        onOpenModal();\n        setIndexToReplace(index);\n      },\n    [onOpenModal],\n  );\n\n  const onSave = useCallback(\n    (value: string) => {\n      onChange(value, indexToReplace);\n    },\n    [onChange, indexToReplace],\n  );\n\n  return {\n    isOpen,\n    title,\n    onOpen,\n    onClose,\n    onSave,\n    value,\n  };\n};\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAqBO,MAAME,eAAoC,GAAGA,CAAC;EAAEC;AAAS,CAAC,KAAK;EACpE,MAAM;IAAEC,MAAM;IAAEC,MAAM,EAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAG,IAAAC,mBAAY,EAAC,KAAK,CAAC;EACpE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACtC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EACtC,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAJ,eAAQ,EAClDK,SACF,CAAC;EAED,MAAMX,MAAM,GAAG,IAAAY,kBAAW,EACxB,CAAC;IAAER,KAAK;IAAEG,KAAK;IAAEM;EAA8B,CAAC,KAC9C,MAAM;IACJR,QAAQ,CAACD,KAAK,CAAC;IACfI,QAAQ,CAACD,KAAK,IAAI,EAAE,CAAC;IACrBN,WAAW,CAAC,CAAC;IACbS,iBAAiB,CAACG,KAAK,CAAC;EAC1B,CAAC,EACH,CAACZ,WAAW,CACd,CAAC;EAED,MAAMa,MAAM,GAAG,IAAAF,kBAAW,EACvBL,KAAa,IAAK;IACjBT,QAAQ,CAACS,KAAK,EAAEE,cAAc,CAAC;EACjC,CAAC,EACD,CAACX,QAAQ,EAAEW,cAAc,CAC3B,CAAC;EAED,OAAO;IACLV,MAAM;IACNK,KAAK;IACLJ,MAAM;IACNE,OAAO;IACPY,MAAM;IACNP;EACF,CAAC;AACH,CAAC;AAACQ,OAAA,CAAAlB,eAAA,GAAAA,eAAA","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-gallery/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _mediaGalleryView = require("./media-gallery-view");
+Object.keys(_mediaGalleryView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mediaGalleryView[key]) return;
+  exports[key] = _mediaGalleryView[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/cms-fields/components/media-gallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mediaGalleryView","require","Object","keys","forEach","key","exports"],"sources":["../../../../../src/cms-fields/components/media-gallery/index.ts"],"sourcesContent":["export * from './media-gallery-view';\n"],"mappings":";;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,iBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,iBAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,iBAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-gallery/media-gallery-item-thumbnail.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MediaGalleryItemThumbnail = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _autoCmsFieldTypes = require("../../auto-cms-field-types");
+var _mediaImage = require("../media-image");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/media-gallery/media-gallery-item-thumbnail.tsx";
+const MediaGalleryItemThumbnail = ({
+  width,
+  height = 30,
+  ...props
+}) => {
+  const dimensions = (() => {
+    try {
+      return (0, _autoCmsFieldTypes.getImageDimensions)(props.src);
+    } catch (e) {
+      console.error(e);
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+  })();
+  const actualHeight = parseInt(height.toString(), 10);
+  const actualWidth = Math.ceil(dimensions.width * actualHeight / dimensions.height);
+  return /*#__PURE__*/_react.default.createElement(_mediaImage.MediaImage, (0, _extends2.default)({
+    suspended: true,
+    transparent: true,
+    borderRadius: 1,
+    width: `${actualWidth}px`,
+    height: `${actualHeight}px`,
+    size: _mediaImage.MediaImage.Size.S
+  }, props, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 5
+    }
+  }));
+};
+exports.MediaGalleryItemThumbnail = MediaGalleryItemThumbnail;
+//# sourceMappingURL=media-gallery-item-thumbnail.js.map

package/dist/cjs/cms-fields/components/media-gallery/media-gallery-item-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_autoCmsFieldTypes","_mediaImage","_jsxFileName","MediaGalleryItemThumbnail","width","height","props","dimensions","getImageDimensions","src","e","console","error","actualHeight","parseInt","toString","actualWidth","Math","ceil","default","createElement","MediaImage","_extends2","suspended","transparent","borderRadius","size","Size","S","__self","__source","fileName","lineNumber","columnNumber","exports"],"sources":["../../../../../src/cms-fields/components/media-gallery/media-gallery-item-thumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getImageDimensions } from '../../auto-cms-field-types';\n\nimport type { MediaImageProps } from '../media-image';\nimport { MediaImage } from '../media-image';\n\nexport interface MediaGalleryItemThumbnailProps extends MediaImageProps {\n  src: string;\n}\n\nexport const MediaGalleryItemThumbnail: React.FC<\n  MediaGalleryItemThumbnailProps\n> = ({ width, height = 30, ...props }) => {\n  const dimensions = (() => {\n    try {\n      return getImageDimensions(props.src);\n    } catch (e) {\n      console.error(e);\n      return { width: 0, height: 0 };\n    }\n  })();\n\n  const actualHeight = parseInt(height.toString(), 10);\n  const actualWidth = Math.ceil(\n    (dimensions.width * actualHeight) / dimensions.height,\n  );\n\n  return (\n    <MediaImage\n      suspended\n      transparent\n      borderRadius={1}\n      width={`${actualWidth}px`}\n      height={`${actualHeight}px`}\n      size={MediaImage.Size.S}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAGA,IAAAE,WAAA,GAAAF,OAAA;AAA4C,IAAAG,YAAA;AAMrC,MAAMC,yBAEZ,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM,GAAG,EAAE;EAAE,GAAGC;AAAM,CAAC,KAAK;EACxC,MAAMC,UAAU,GAAG,CAAC,MAAM;IACxB,IAAI;MACF,OAAO,IAAAC,qCAAkB,EAACF,KAAK,CAACG,GAAG,CAAC;IACtC,CAAC,CAAC,OAAOC,CAAC,EAAE;MACVC,OAAO,CAACC,KAAK,CAACF,CAAC,CAAC;MAChB,OAAO;QAAEN,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;IAChC;EACF,CAAC,EAAE,CAAC;EAEJ,MAAMQ,YAAY,GAAGC,QAAQ,CAACT,MAAM,CAACU,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC;EACpD,MAAMC,WAAW,GAAGC,IAAI,CAACC,IAAI,CAC1BX,UAAU,CAACH,KAAK,GAAGS,YAAY,GAAIN,UAAU,CAACF,MACjD,CAAC;EAED,oBACER,MAAA,CAAAsB,OAAA,CAAAC,aAAA,CAACnB,WAAA,CAAAoB,UAAU,MAAAC,SAAA,CAAAH,OAAA;IACTI,SAAS;IACTC,WAAW;IACXC,YAAY,EAAE,CAAE;IAChBrB,KAAK,EAAE,GAAGY,WAAW,IAAK;IAC1BX,MAAM,EAAE,GAAGQ,YAAY,IAAK;IAC5Ba,IAAI,EAAEL,sBAAU,CAACM,IAAI,CAACC;EAAE,GACpBtB,KAAK;IAAAuB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7B,YAAA;MAAA8B,UAAA;MAAAC,YAAA;IAAA;EAAA,EACV,CAAC;AAEN,CAAC;AAACC,OAAA,CAAA/B,yBAAA,GAAAA,yBAAA","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-gallery/media-gallery-view.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MediaGalleryView = MediaGalleryView;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _mediaGalleryItemThumbnail = require("./media-gallery-item-thumbnail");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/media-gallery/media-gallery-view.tsx";
+function MediaGalleryView({
+  data
+}) {
+  const items = data ?? [];
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP1",
+    maxWidth: "100%",
+    overflow: "hidden",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 15,
+      columnNumber: 5
+    }
+  }, items.map(({
+    src
+  }, index) => /*#__PURE__*/_react.default.createElement(_mediaGalleryItemThumbnail.MediaGalleryItemThumbnail, {
+    key: `${src}:${index}`,
+    src: src,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 9
+    }
+  })));
+}
+MediaGalleryView.displayName = 'MediaGalleryView';
+//# sourceMappingURL=media-gallery-view.js.map

package/dist/cjs/cms-fields/components/media-gallery/media-gallery-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mediaGalleryItemThumbnail","_jsxFileName","MediaGalleryView","data","items","default","createElement","Box","gap","maxWidth","overflow","__self","__source","fileName","lineNumber","columnNumber","map","src","index","MediaGalleryItemThumbnail","key","displayName"],"sources":["../../../../../src/cms-fields/components/media-gallery/media-gallery-view.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { WixCodeGalleryItem } from '../../auto-cms-field-types';\nimport { Box } from '@wix/design-system';\n\nimport { MediaGalleryItemThumbnail } from './media-gallery-item-thumbnail';\n\nexport interface MediaGalleryViewProps {\n  data?: WixCodeGalleryItem[];\n}\n\nexport function MediaGalleryView({ data }: MediaGalleryViewProps) {\n  const items: WixCodeGalleryItem[] = data ?? [];\n  return (\n    <Box gap=\"SP1\" maxWidth=\"100%\" overflow=\"hidden\">\n      {items.map(({ src }, index) => (\n        <MediaGalleryItemThumbnail key={`${src}:${index}`} src={src} />\n      ))}\n    </Box>\n  );\n}\n\nMediaGalleryView.displayName = 'MediaGalleryView';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,aAAA,GAAAD,OAAA;AAEA,IAAAE,0BAAA,GAAAF,OAAA;AAA2E,IAAAG,YAAA;AAMpE,SAASC,gBAAgBA,CAAC;EAAEC;AAA4B,CAAC,EAAE;EAChE,MAAMC,KAA2B,GAAGD,IAAI,IAAI,EAAE;EAC9C,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;IAACC,GAAG,EAAC,KAAK;IAACC,QAAQ,EAAC,MAAM;IAACC,QAAQ,EAAC,QAAQ;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC7CX,KAAK,CAACY,GAAG,CAAC,CAAC;IAAEC;EAAI,CAAC,EAAEC,KAAK,kBACxBtB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,0BAAA,CAAAmB,yBAAyB;IAACC,GAAG,EAAE,GAAGH,GAAG,IAAIC,KAAK,EAAG;IAACD,GAAG,EAAEA,GAAI;IAAAN,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CACE,CAAC;AAEV;AAEAb,gBAAgB,CAACmB,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-image/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _mediaImage = require("./media-image");
+Object.keys(_mediaImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mediaImage[key]) return;
+  exports[key] = _mediaImage[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/cms-fields/components/media-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mediaImage","require","Object","keys","forEach","key","exports"],"sources":["../../../../../src/cms-fields/components/media-image/index.ts"],"sourcesContent":["export * from './media-image';\n"],"mappings":";;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,WAAA,CAAAK,GAAA;AAAA","ignoreList":[]}