@uploadcare/file-uploader 1.9.0 → 1.11.0-alpha.0

package/blocks/CameraSource/CameraSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraSource.d.ts","sourceRoot":"","sources":["CameraSource.js"],"names":[],"mappings":"AAMA;IAEE,uBAA+C;IAE/C,eAAe;IACf,0BAAyB;IAEzB,WA0BE;IAbE,qBAAqB;IACrB,sCAAuC;IAc3C,eAAe;IACf,oBAKE;IAEF,eAAe;IACf,sBAME;IAEF,eAAe;IACf,iCAEE;IAEF;;;OAGG;IACH,6BA2BQ;IAER,eAAe;IACf,8BASC;IAED,eAAe;IACf,iBAuCC;IAnBC,eAAe;IACf,gBAA+C;IAC/C,eAAe;IACf,aAAyC;IASvC,eAAe;IACf,mBAAsB;IAQ1B,eAAe;IACf,qBAMC;IAED,eAAe;IACf,cAkBC;IAED,8BAgCC;CACF;;;;8BArN6B,iCAAiC"}
+{"version":3,"file":"CameraSource.d.ts","sourceRoot":"","sources":["CameraSource.js"],"names":[],"mappings":"AAMA;IAEE,uBAA+C;IAE/C,eAAe;IACf,0BAAyB;IAEzB,WA0BE;IAbE,qBAAqB;IACrB,sCAAuC;IAc3C,eAAe;IACf,oBAKE;IAEF,eAAe;IACf,sBAME;IAEF,eAAe;IACf,iCAEE;IAEF;;;OAGG;IACH,6BAyBQ;IAER,eAAe;IACf,8BASC;IAED,eAAe;IACf,iBAuCC;IAnBC,eAAe;IACf,gBAA+C;IAC/C,eAAe;IACf,aAAyC;IASvC,eAAe;IACf,mBAAsB;IAQ1B,eAAe;IACf,qBAMC;IAED,eAAe;IACf,cAkBC;IAED,8BAgCC;CACF;;;;8BAnN6B,iCAAiC"}

package/blocks/CameraSource/CameraSource.js

@@ -66,8 +66,6 @@ export class CameraSource extends UploaderBlock {
    * @param {'granted' | 'denied' | 'prompt'} state
    */
   _setPermissionsState = debounce((state) => {
-    this.classList.toggle('uc-initialized', state === 'granted');
-
     if (state === 'granted') {
       this.set$({
         videoHidden: false,

package/blocks/CameraSource/camera-source.css

@@ -10,21 +10,9 @@ uc-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[uc-modal] uc-camera-source {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: 100vh;
-  max-height: var(--modal-max-content-height);
-}
-
-uc-camera-source.uc-initialized {
-  height: max-content;
-}
-
-@media only screen and (max-width: 430px) {
-  uc-camera-source {
-    width: calc(100vw - var(--uc-padding) * 2);
-    height: var(--modal-content-height-fill, 100%);
-  }
+[uc-modal] > dialog:has(uc-camera-source[active]) {
+  width: 100%;
+  height: 100%;
 }
 
 uc-camera-source video {
@@ -52,6 +40,7 @@ uc-camera-source .uc-content {
   flex: 1;
   justify-content: center;
   width: 100%;
+  height: 100%;
   padding: var(--uc-padding);
   padding-top: 0;
   overflow: hidden;

package/blocks/CloudImageEditorActivity/index.css

@@ -7,7 +7,7 @@ uc-cloud-image-editor-activity {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-cloud-image-editor-activity {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: var(--modal-content-height-fill, 100%);
+[uc-modal] > dialog:has(uc-cloud-image-editor-activity[active]) {
+  width: 100%;
+  height: 100%;
 }

package/blocks/Config/initialConfig.d.ts

@@ -1,6 +1,6 @@
 export const DEFAULT_CDN_CNAME: "https://ucarecdn.com";
 export const DEFAULT_BASE_URL: "https://upload.uploadcare.com";
-export const DEFAULT_SOCIAL_BASE_URL: "https://social.uploadcare.com";
+export const DEFAULT_SOCIAL_BASE_URL: "https://social.staging0.uploadcare.com";
 /** @type {import('../../types/exported').ConfigType} */
 export const initialConfig: import('../../types/exported').ConfigType;
 //# sourceMappingURL=initialConfig.d.ts.map

package/blocks/Config/initialConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CA2DlD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,+EAAgF;AAEhF,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CA2DlD"}

package/blocks/Config/initialConfig.js

@@ -5,7 +5,7 @@ import { serializeCsv } from '../utils/comma-separated.js';
 
 export const DEFAULT_CDN_CNAME = 'https://ucarecdn.com';
 export const DEFAULT_BASE_URL = 'https://upload.uploadcare.com';
-export const DEFAULT_SOCIAL_BASE_URL = 'https://social.uploadcare.com';
+export const DEFAULT_SOCIAL_BASE_URL = 'https://social.staging0.uploadcare.com';
 
 /** @type {import('../../types/exported').ConfigType} */
 export const initialConfig = {

package/blocks/ExternalSource/ExternalSource.d.ts

@@ -1,30 +1,21 @@
 /** @typedef {{ externalSourceType: string }} ActivityParams */
-/**
- * @typedef {{
- *   type: 'file-selected';
- *   obj_type: 'selected_file';
- *   filename: string;
- *   url: string;
- *   alternatives?: Record<string, string>;
- * }} SelectedFileMessage
- */
-/**
- * @typedef {{
- *   type: 'embed-css';
- *   style: string;
- * }} EmbedCssMessage
- */
-/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
 export class ExternalSource extends UploaderBlock {
     activityType: "external";
     init$: {
         activityIcon: string;
         activityCaption: string;
-        selectedList: never[];
-        counter: number;
-        multiple: boolean;
+        /** @type {import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']} */
+        selectedList: import('./types.js').InputMessageMap['selected-files-change']['selectedFiles'];
+        total: number;
+        isSelectionReady: boolean;
+        couldSelectAll: boolean;
+        couldDeselectAll: boolean;
+        showSelectionStatus: boolean;
+        counterText: string;
         onDone: () => void;
         onCancel: () => void;
+        onSelectAll: () => void;
+        onDeselectAll: () => void;
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
@@ -43,39 +34,30 @@ export class ExternalSource extends UploaderBlock {
     get activityParams(): ActivityParams;
     /**
      * @private
-     * @type {HTMLIFrameElement | null}
+     * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
      */
-    private _iframe;
+    private extractUrlFromSelectedFile;
     /**
      * @private
-     * @param {SelectedFileMessage} message
+     * @param {import('./types.js').InputMessageMap['selected-files-change']} message
      */
-    private extractUrlFromMessage;
-    /**
-     * @private
-     * @param {Message} message
-     */
-    private sendMessage;
-    /**
-     * @private
-     * @param {SelectedFileMessage} message
-     */
-    private handleFileSelected;
+    private handleSelectedFilesChange;
     /** @private */
     private handleIframeLoad;
-    /**
-     * @private
-     * @param {string} propName
-     */
-    private getCssValue;
     /** @private */
     private applyStyles;
     /** @private */
+    private setupL10n;
+    /** @private */
     private remoteUrl;
     /** @private */
     private mountIframe;
     /** @private */
+    private _messageBridge;
+    /** @private */
     private unmountIframe;
+    /** @private */
+    private resetSelectionStatus;
 }
 export namespace ExternalSource {
     let template: string;
@@ -83,17 +65,5 @@ export namespace ExternalSource {
 export type ActivityParams = {
     externalSourceType: string;
 };
-export type SelectedFileMessage = {
-    type: 'file-selected';
-    obj_type: 'selected_file';
-    filename: string;
-    url: string;
-    alternatives?: Record<string, string>;
-};
-export type EmbedCssMessage = {
-    type: 'embed-css';
-    style: string;
-};
-export type Message = SelectedFileMessage | EmbedCssMessage;
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 //# sourceMappingURL=ExternalSource.d.ts.map

package/blocks/ExternalSource/ExternalSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;;;;;;;;;;;;;;;;;;;MAoBC;IAGH,6BAA6B;IAC7B,qCAMC;IAED;;;OAGG;IACH,gBAAe;IA2Cf;;;OAGG;IACH,8BAcC;IAED;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,2BAUC;IAED,eAAe;IACf,yBAEC;IAED;;;OAGG;IACH,oBAGC;IAED,eAAe;IACf,oBAkBC;IAED,eAAe;IACf,kBAcC;IAED,eAAe;IACf,oBAsBC;IAED,eAAe;IACf,sBAMC;CACF;;;;6BA5Oa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;kCAG/B;IACZ,IAAQ,EAAE,eAAe,CAAC;IAC1B,QAAY,EAAE,eAAe,CAAC;IAC9B,QAAY,EAAE,MAAM,CAAC;IACrB,GAAO,EAAE,MAAM,CAAC;IAChB,YAAgB,CAAC,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;8BAIS;IACZ,IAAQ,EAAE,WAAW,CAAC;IACtB,KAAS,EAAE,MAAM,CAAC;CACf;sBAGU,mBAAmB,GAAG,eAAe;8BA1BrB,iCAAiC"}
+{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;QAKE,6FAA6F;sBAAlF,OAAO,YAAY,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;MA+B1F;IAGH,6BAA6B;IAC7B,qCAMC;IA4CD;;;OAGG;IACH,mCAcC;IAED;;;OAGG;IACH,kCAoBC;IAED,eAAe;IACf,yBAGC;IAED,eAAe;IACf,oBAKC;IAED,eAAe;IACf,kBAKC;IAED,eAAe;IACf,kBAeC;IAED,eAAe;IACf,oBA6BC;IALC,eAAe;IACf,uBAA6D;IAM/D,eAAe;IACf,sBAMC;IAED,eAAe;IACf,6BASC;CACF;;;;6BA7Oa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;8BAPd,iCAAiC"}

package/blocks/ExternalSource/ExternalSource.js

@@ -5,31 +5,12 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
 import { wildcardRegexp } from '../../utils/wildcardRegexp.js';
-import { buildStyles } from './buildStyles.js';
-import { registerMessage, unregisterMessage } from './messages.js';
+import { buildThemeDefinition } from './buildThemeDefinition.js';
+import { MessageBridge } from './MessageBridge.js';
 import { queryString } from './query-string.js';
 
 /** @typedef {{ externalSourceType: string }} ActivityParams */
 
-/**
- * @typedef {{
- *   type: 'file-selected';
- *   obj_type: 'selected_file';
- *   filename: string;
- *   url: string;
- *   alternatives?: Record<string, string>;
- * }} SelectedFileMessage
- */
-
-/**
- * @typedef {{
- *   type: 'embed-css';
- *   style: string;
- * }} EmbedCssMessage
- */
-
-/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
-
 export class ExternalSource extends UploaderBlock {
   couldBeCtxOwner = true;
   activityType = ActivityBlock.activities.EXTERNAL;
@@ -41,12 +22,20 @@ export class ExternalSource extends UploaderBlock {
       ...this.init$,
       activityIcon: '',
       activityCaption: '',
+
+      /** @type {import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']} */
       selectedList: [],
-      counter: 0,
-      multiple: false,
+      total: 0,
+
+      isSelectionReady: false,
+      couldSelectAll: false,
+      couldDeselectAll: false,
+      showSelectionStatus: false,
+      counterText: '',
+
       onDone: () => {
         for (const message of this.$.selectedList) {
-          const url = this.extractUrlFromMessage(message);
+          const url = this.extractUrlFromSelectedFile(message);
           const { filename } = message;
           const { externalSourceType } = this.activityParams;
           this.api.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
@@ -57,6 +46,14 @@ export class ExternalSource extends UploaderBlock {
       onCancel: () => {
         this.historyBack();
       },
+
+      onSelectAll: () => {
+        this._messageBridge?.send({ type: 'select-all' });
+      },
+
+      onDeselectAll: () => {
+        this._messageBridge?.send({ type: 'deselect-all' });
+      },
     };
   }
 
@@ -69,12 +66,6 @@ export class ExternalSource extends UploaderBlock {
     throw new Error(`External Source activity params not found`);
   }
 
-  /**
-   * @private
-   * @type {HTMLIFrameElement | null}
-   */
-  _iframe = null;
-
   initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
@@ -108,24 +99,25 @@ export class ExternalSource extends UploaderBlock {
         this.unmountIframe();
       }
     });
-    this.sub('selectedList', (list) => {
-      this.$.counter = list.length;
-    });
     this.subConfigValue('multiple', (multiple) => {
-      this.$.multiple = multiple;
+      this.$.showSelectionStatus = multiple;
+    });
+
+    this.subConfigValue('localeName', (val) => {
+      this.setupL10n();
     });
   }
 
   /**
    * @private
-   * @param {SelectedFileMessage} message
+   * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
    */
-  extractUrlFromMessage(message) {
-    if (message.alternatives) {
+  extractUrlFromSelectedFile(selectedFile) {
+    if (selectedFile.alternatives) {
       const preferredTypes = stringToArray(this.cfg.externalSourcesPreferredTypes);
       for (const preferredType of preferredTypes) {
         const regexp = wildcardRegexp(preferredType);
-        for (const [type, typeUrl] of Object.entries(message.alternatives)) {
+        for (const [type, typeUrl] of Object.entries(selectedFile.alternatives)) {
           if (regexp.test(type)) {
             return typeUrl;
           }
@@ -133,81 +125,71 @@ export class ExternalSource extends UploaderBlock {
       }
     }
 
-    return message.url;
+    return selectedFile.url;
   }
 
   /**
    * @private
-   * @param {Message} message
+   * @param {import('./types.js').InputMessageMap['selected-files-change']} message
    */
-  sendMessage(message) {
-    this._iframe?.contentWindow?.postMessage(JSON.stringify(message), '*');
-  }
-
-  /**
-   * @private
-   * @param {SelectedFileMessage} message
-   */
-  async handleFileSelected(message) {
-    if (!this.$.multiple && this.$.selectedList.length) {
+  async handleSelectedFilesChange(message) {
+    if (this.cfg.multiple !== message.isMultipleMode) {
+      console.error('Multiple mode mismatch');
       return;
     }
 
-    this.$.selectedList = [...this.$.selectedList, message];
-
-    if (!this.$.multiple) {
-      this.$.onDone();
-    }
+    this.bindL10n('counterText', () =>
+      this.l10n('selected-count', {
+        count: message.selectedCount,
+        total: message.total,
+      }),
+    );
+
+    this.set$({
+      isSelectionReady: message.isReady,
+      showSelectionStatus: message.isMultipleMode && message.total > 0,
+      couldSelectAll: message.selectedCount < message.total,
+      couldDeselectAll: message.selectedCount === message.total,
+      selectedList: message.selectedFiles,
+    });
   }
 
   /** @private */
   handleIframeLoad() {
     this.applyStyles();
-  }
-
-  /**
-   * @private
-   * @param {string} propName
-   */
-  getCssValue(propName) {
-    let style = window.getComputedStyle(this);
-    return style.getPropertyValue(propName).trim();
+    this.setupL10n();
   }
 
   /** @private */
   applyStyles() {
-    let colors = {
-      radius: this.getCssValue('--uc-radius'),
-      backgroundColor: this.getCssValue('--uc-background'),
-      textColor: this.getCssValue('--uc-foreground'),
-      secondaryColor: this.getCssValue('--uc-secondary'),
-      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
-      secondaryHover: this.getCssValue('--uc-secondary-hover'),
-      linkColor: this.getCssValue('--uc-primary'),
-      linkColorHover: this.getCssValue('--uc-primary-hover'),
-      fontFamily: this.getCssValue('--uc-font-family'),
-      fontSize: this.getCssValue('--uc-font-size'),
-    };
+    this._messageBridge?.send({
+      type: 'set-theme-definition',
+      theme: buildThemeDefinition(this),
+    });
+  }
 
-    this.sendMessage({
-      type: 'embed-css',
-      style: buildStyles(colors),
+  /** @private */
+  setupL10n() {
+    this._messageBridge?.send({
+      type: 'set-locale-definition',
+      localeDefinition: this.cfg.localeName,
     });
   }
 
   /** @private */
   remoteUrl() {
-    const { pubkey, remoteTabSessionKey, socialBaseUrl } = this.cfg;
+    const { pubkey, remoteTabSessionKey, socialBaseUrl, multiple } = this.cfg;
     const { externalSourceType } = this.activityParams;
     const lang = this.l10n('social-source-lang')?.split('-')?.[0] || 'en';
     const params = {
       lang,
       public_key: pubkey,
       images_only: false.toString(),
-      pass_window_open: false,
       session_key: remoteTabSessionKey,
+      wait_for_theme: true,
+      multiple: multiple.toString(),
     };
-    const url = new URL(`/window3/${externalSourceType}`, socialBaseUrl);
+    const url = new URL(`/window4/${externalSourceType}`, socialBaseUrl);
     url.search = queryString(params);
     return url.toString();
   }
@@ -231,31 +213,43 @@ export class ExternalSource extends UploaderBlock {
     this.ref.iframeWrapper.innerHTML = '';
     this.ref.iframeWrapper.appendChild(iframe);
 
-    registerMessage('file-selected', iframe.contentWindow, this.handleFileSelected.bind(this));
+    if (!iframe.contentWindow) {
+      return;
+    }
+
+    this._messageBridge?.destroy();
+
+    /** @private */
+    this._messageBridge = new MessageBridge(iframe.contentWindow);
+    this._messageBridge.on('selected-files-change', this.handleSelectedFilesChange.bind(this));
 
-    this._iframe = iframe;
-    this.$.selectedList = [];
+    this.resetSelectionStatus();
   }
 
   /** @private */
   unmountIframe() {
-    this._iframe && unregisterMessage('file-selected', this._iframe.contentWindow);
+    this._messageBridge?.destroy();
+    this._messageBridge = undefined;
     this.ref.iframeWrapper.innerHTML = '';
-    this._iframe = null;
-    this.$.selectedList = [];
-    this.$.counter = 0;
+
+    this.resetSelectionStatus();
+  }
+
+  /** @private */
+  resetSelectionStatus() {
+    this.set$({
+      selectedList: [],
+      total: 0,
+      isSelectionReady: false,
+      couldSelectAll: false,
+      couldDeselectAll: false,
+      showSelectionStatus: false,
+    });
   }
 }
 
 ExternalSource.template = /* HTML */ `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
-      <uc-icon name="back"></uc-icon>
-    </button>
-    <div>
-      <uc-icon set="@name: activityIcon"></uc-icon>
-      <span>{{activityCaption}}</span>
-    </div>
     <button
       type="button"
       class="uc-mini-btn uc-close-btn"
@@ -269,12 +263,15 @@ ExternalSource.template = /* HTML */ `
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">
       <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
-      <div></div>
-      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <div set="@hidden: !showSelectionStatus" class="uc-selection-status-box">
+        <span>{{counterText}}</span>
+        <button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
+        <button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
+      </div>
       <button
         type="button"
         class="uc-done-btn uc-primary-btn"
-        set="onclick: onDone; @disabled: !counter"
+        set="onclick: onDone; @disabled: !isSelectionReady"
         l10n="done"
       ></button>
     </div>

package/blocks/ExternalSource/MessageBridge.d.ts

@@ -0,0 +1,20 @@
+export class MessageBridge {
+    /** @param {Window} context */
+    constructor(context: Window);
+    /** @type {Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>} */
+    _handlerMap: Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>;
+    /** @type {Window} */
+    _context: Window;
+    /** @param {MessageEvent} e */
+    _handleMessage: (e: MessageEvent) => void;
+    /**
+     * @template {import('./types').InputMessageType} T
+     * @param {T} type
+     * @param {import('./types').InputMessageHandler<T>} handler
+     */
+    on<T extends "selected-files-change">(type: T, handler: import("./types").InputMessageHandler<T>): void;
+    /** @param {import('./types').OutputMessage} message */
+    send(message: import('./types').OutputMessage): void;
+    destroy(): void;
+}
+//# sourceMappingURL=MessageBridge.d.ts.map

package/blocks/ExternalSource/MessageBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBridge.d.ts","sourceRoot":"","sources":["MessageBridge.js"],"names":[],"mappings":"AAgBA;IAOE,8BAA8B;IAC9B,qBADY,MAAM,EAKjB;IAXD,0GAA0G;IAC1G,aADW,IAAI,MAAM,EAAE,IAAI,OAAO,SAAS,EAAE,mBAAmB,CAAC,OAAO,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAC9E;IAExB,qBAAqB;IACrB,UADW,MAAM,CACR;IAST,8BAA8B;IAC9B,oBADY,YAAY,UAgBtB;IAEF;;;;OAIG;IACH,wGAOC;IAED,uDAAuD;IACvD,cADY,OAAO,SAAS,EAAE,aAAa,QAG1C;IAED,gBAEC;CACF"}

package/blocks/ExternalSource/MessageBridge.js

@@ -0,0 +1,71 @@
+/** @type {import('./types').InputMessageType[]} */
+const MESSAGE_TYPE_WHITELIST = ['selected-files-change'];
+
+/**
+ * @param {unknown} message
+ * @returns {message is import("./types").InputMessageMap[import("./types").InputMessageType]}
+ */
+const isWhitelistedMessage = (message) => {
+  if (!message) return false;
+  if (typeof message !== 'object') return false;
+  return (
+    'type' in message &&
+    MESSAGE_TYPE_WHITELIST.includes(/** @type {import('./types').InputMessageType} */ (message.type))
+  );
+};
+
+export class MessageBridge {
+  /** @type {Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>} */
+  _handlerMap = new Map();
+
+  /** @type {Window} */
+  _context;
+
+  /** @param {Window} context */
+  constructor(context) {
+    this._context = context;
+
+    window.addEventListener('message', this._handleMessage);
+  }
+
+  /** @param {MessageEvent} e */
+  _handleMessage = (e) => {
+    if (e.source !== this._context) {
+      return;
+    }
+    const message = e.data;
+    if (!isWhitelistedMessage(message)) {
+      return;
+    }
+
+    const handlers = this._handlerMap.get(message.type);
+    if (handlers) {
+      for (const handler of handlers) {
+        handler(message);
+      }
+    }
+  };
+
+  /**
+   * @template {import('./types').InputMessageType} T
+   * @param {T} type
+   * @param {import('./types').InputMessageHandler<T>} handler
+   */
+  on(type, handler) {
+    const handlers = this._handlerMap.get(type) ?? new Set();
+    if (!this._handlerMap.has(type)) {
+      this._handlerMap.set(type, handlers);
+    }
+
+    handlers.add(/** @type {import('./types').InputMessageHandler<import('./types').InputMessageType>} */ (handler));
+  }
+
+  /** @param {import('./types').OutputMessage} message */
+  send(message) {
+    this._context.postMessage(message, '*');
+  }
+
+  destroy() {
+    window.removeEventListener('message', this._handleMessage);
+  }
+}

package/blocks/ExternalSource/buildThemeDefinition.d.ts

@@ -0,0 +1,3 @@
+/** @param {HTMLElement} element */
+export function buildThemeDefinition(element: HTMLElement): Record<keyof import("./types.js").ThemeDefinition, string>;
+//# sourceMappingURL=buildThemeDefinition.d.ts.map

package/blocks/ExternalSource/buildThemeDefinition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildThemeDefinition.d.ts","sourceRoot":"","sources":["buildThemeDefinition.js"],"names":[],"mappings":"AAqCA,mCAAmC;AACnC,8CADY,WAAW,8DAStB"}

package/blocks/ExternalSource/buildThemeDefinition.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} propName
+ */
+function getCssValue(element, propName) {
+  let style = window.getComputedStyle(element);
+  return style.getPropertyValue(propName).trim();
+}
+
+const ucCustomProperties = /** @type {(keyof import('./types.js').ThemeDefinition)[]} */ ([
+  '--uc-font-family',
+  '--uc-font-size',
+  '--uc-line-height',
+  '--uc-button-size',
+  '--uc-preview-size',
+  '--uc-input-size',
+  '--uc-padding',
+  '--uc-radius',
+  '--uc-transition',
+  '--uc-background',
+  '--uc-foreground',
+  '--uc-primary',
+  '--uc-primary-hover',
+  '--uc-primary-transparent',
+  '--uc-primary-foreground',
+  '--uc-secondary',
+  '--uc-secondary-hover',
+  '--uc-secondary-foreground',
+  '--uc-muted',
+  '--uc-muted-foreground',
+  '--uc-destructive',
+  '--uc-destructive-foreground',
+  '--uc-border',
+]);
+
+/** @param {HTMLElement} element */
+export function buildThemeDefinition(element) {
+  return ucCustomProperties.reduce((acc, prop) => {
+    const value = getCssValue(element, prop);
+    if (value) {
+      acc[prop] = value;
+    }
+    return acc;
+  }, /** @type {Record<keyof import('./types.js').ThemeDefinition, string>} */ ({}));
+}