@mohamedatia/fly-design-system 2.7.3 → 2.8.0

package/fesm2022/mohamedatia-fly-design-system.mjs

@@ -296,7 +296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 /** Single source of truth for persisted / API theme strings. */
-const FLY_THEME_MODE_IDS = ['light', 'spatial', 'dark'];
+const FLY_THEME_MODE_IDS = ['light', 'dark'];
 /** Factory default: `dark` (opaque dark / `html.dark-theme`); shell i18n `settings.theme.dark`. Keep in sync with `UserSettings` defaults. */
 const DEFAULT_FLY_THEME_MODE = 'dark';
 /** Coerce unknown values (localStorage, API) to a valid theme mode. */
@@ -307,7 +307,7 @@ function normalizeFlyTheme(value) {
     return DEFAULT_FLY_THEME_MODE;
 }
 /**
- * Applies `html.light-theme` / `html.spatial-theme` / `html.dark-theme` for DS SCSS.
+ * Applies `html.light-theme` / `html.dark-theme` for DS SCSS.
  * Shell and standalone Business Apps use the same service (federation singleton when shared).
  */
 class FlyThemeService {
@@ -319,11 +319,8 @@ class FlyThemeService {
             return;
         }
         const html = document.documentElement;
-        html.classList.remove('light-theme', 'spatial-theme', 'dark-theme');
-        if (mode === 'spatial') {
-            html.classList.add('spatial-theme');
-        }
-        else if (mode === 'dark') {
+        html.classList.remove('light-theme', 'dark-theme');
+        if (mode === 'dark') {
             html.classList.add('dark-theme');
         }
         else {
@@ -745,15 +742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * On first mount of each remote, the shell calls `loadRemoteStyles(appId,
  * remoteBaseUrl)`. This function:
  *   1. Derives the remote's `index.html` URL from `remoteBaseUrl`.
- *   2. Fetches it (one network round-trip per remote, browser-cached thereafter).
+ *   2. Fetches it (one network round-trip per remote; browser-cached thereafter).
  *   3. Parses the HTML with DOMParser to extract the first
  *      `<link rel="stylesheet">` — the hashed production stylesheet
  *      (e.g. `styles-ABC123.css`). This is Strategy (b): index.html discovery.
- *   4. Injects an inline `<style data-fly-app="<appId>">` block containing
- *      `@layer remote { @import url("..."); }` into `document.head`.
- *      Idempotent: if a `<style data-fly-app="appId">` with the same href
- *      is already present, the call is a no-op. If the href differs (hot
- *      upgrade), the existing element is replaced.
+ *   4. Injects the stylesheet into `document.head` using one of two approaches
+ *      (see Injection approach below).
  *
  * Why strategy (b)?
  * -----------------
@@ -763,33 +757,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * (c) `stylesUrl` in manifest/remoteEntry.json — cleanest long-term; requires
  *     protocol change to every remote's CI pipeline (out of scope for Wave A1).
  *
- * CSS Cascade Layer — Option A (`@import` inside inline `<style>`)
- * ----------------------------------------------------------------
- * Remote stylesheets are injected inside `@layer remote { @import url("..."); }`
- * rather than as bare `<link rel="stylesheet">`. This keeps remote styles in a
- * named cascade layer so the shell can reliably override them via `@layer overrides`.
+ * Injection approach
+ * ------------------
+ * Preferred (Firefox 134+, Chrome 99+, Safari 17.2+):
+ *   `<link rel="stylesheet" href="…" crossorigin="anonymous" layer="remote">`
+ *
+ * The `layer` attribute on `<link>` is feature-detected once at module init via:
+ *   `'layer' in HTMLLinkElement.prototype`
+ * If the attribute is supported, the shell injects a non-render-blocking `<link>`
+ * element. The browser gets proper preload semantics and CORS headers flow through
+ * the normal stylesheet pipeline.
+ *
+ * Fallback (browsers without `link[layer]` support):
+ *   `<style>@import url("…") layer(remote);</style>`
  *
- * Option A was chosen over:
- *   - Option B (fetch+inline): relative `url(...)` paths inside the remote CSS
- *     would resolve against the shell origin instead of the remote origin,
- *     breaking fonts and images. Dealbreaker without a full URL-rewrite pass.
- *   - Option C (`<link layer="remote">`): the `layer` attribute on `<link>` is
- *     not yet shipped in Firefox (as of 2025-05). Chromium 99+ and Safari 16.4+
- *     support it, but Firefox is still behind, making it non-portable today.
+ * CSS Cascade Level 5: `@import url("…") layer(remote)` is the ONLY valid way to
+ * place an @import inside a named cascade layer when using the `<style>` approach.
+ * The block-form `@layer remote { @import url("…"); }` is INVALID CSS — the spec
+ * forbids `@import` inside any block at-rule. Browsers silently drop such rules.
  *
- * Trade-off of Option A: `@import` inside `@layer` delays style application until
- * the remote stylesheet is fetched (same as a plain `<link>`, effectively). Modern
- * engines schedule it as a discoverable resource from the inline `<style>` element.
- * The performance characteristic is equivalent to the old `<link>` approach.
+ * Both code paths attach `data-fly-app` and `data-fly-href` attributes to the
+ * injected element so idempotency checks work uniformly.
  *
  * Layer order declaration
  * -----------------------
- * A one-time `<style data-fly-layers>` element is prepended to `<head>` the first
- * time any remote style is loaded. It establishes the canonical layer order:
+ * A one-time `<style data-fly-layers>` element is prepended to `<head>` at module
+ * init. It establishes the canonical layer order:
  *   reset → designsystem → shell → remote → overrides
  * This guarantees that even if individual `@layer` blocks are injected in any
  * order at runtime, the cascade priority is always deterministic.
  *
+ * CSP nonce propagation
+ * ---------------------
+ * If a `<meta name="csp-nonce">` element is present, its content is read once at
+ * module init and applied to every injected `<style>` or `<link>` element. If no
+ * nonce meta is present, nothing is set (graceful degradation).
+ *
+ * URL validation
+ * --------------
+ * Discovered hrefs must be `http://`-, `https://`-, or `//`-prefixed. `javascript:`,
+ * `data:`, and `blob:` are rejected outright. The href's origin must also match the
+ * origin of `remoteBaseUrl` (same-origin as the remote), preventing a compromised
+ * `index.html` from pointing at an attacker domain.
+ *
  * Unload decision
  * ---------------
  * `unloadRemoteStyles` is exported for symmetry but should NOT be called on
@@ -800,63 +810,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * Caveats
  * -------
- * - CORS: the remote's dev/prod server must serve `index.html` with a
- *   permissive `Access-Control-Allow-Origin` header (or be same-origin via
- *   the YARP gateway). The fetch uses `credentials: 'omit'` to avoid
- *   credential-carrying preflights. The CSS file itself must also be CORS-
- *   accessible since `@import` inside a `<style>` is subject to CORS checks.
- * - Race on rapid mount/unmount: if `loadRemoteStyles` is called a second time
- *   for the same appId while the first fetch is still in-flight, the second
- *   call joins the same in-flight Promise (idempotency guard at fetch level).
+ * - CORS: the remote's dev/prod server must serve `index.html` with a permissive
+ *   `Access-Control-Allow-Origin` header (or be same-origin via the YARP gateway).
+ *   The fetch uses `credentials: 'omit'` to avoid credential-carrying preflights.
+ * - Fetch timeout: the index.html fetch is capped at 5 seconds. On timeout the
+ *   in-flight entry is cleared so a retry is possible on the next call.
+ * - Race on rapid mount/unmount: if `loadRemoteStyles` is called a second time for
+ *   the same appId while the first fetch is still in-flight, the second call joins
+ *   the same in-flight Promise.
  * - Angular hashing: Angular's production build hashes the stylesheet filename.
- *   DOMParser picks the first `<link rel="stylesheet">` in `<head>`, which is
- *   the single global stylesheet Angular emits. If a remote emits multiple
- *   stylesheets, only the first is loaded — acceptable for Wave A1.
+ *   DOMParser picks the first `<link rel="stylesheet">` in `<head>`, which is the
+ *   single global stylesheet Angular emits. If a remote emits multiple stylesheets,
+ *   only the first is loaded — acceptable for Wave A1.
  */
-/** Per-appId cache of the resolved stylesheet href (or `null` if not found). */
-const _resolvedHref = new Map();
-/** In-flight fetch promises keyed by appId — prevents duplicate fetches. */
-const _inFlight = new Map();
 /**
- * Whether the canonical layer-order declaration has already been injected.
- * Module-level so it survives across multiple `loadRemoteStyles` calls within
- * the same shell session but is reset on a full page reload.
+ * Feature detection: does the browser support the `layer` attribute on
+ * `<link>` elements? Probed once at module init.
+ * Firefox 134+, Chrome 99+, Safari 17.2+ all ship this.
  */
-let _layersDeclared = false;
+const _linkLayerSupported = typeof HTMLLinkElement !== 'undefined' && 'layer' in HTMLLinkElement.prototype;
 /**
- * Injects a single `<style data-fly-layers>` element at the top of `<head>`
- * that establishes the canonical cascade-layer priority order for the shell:
- *
- *   reset → designsystem → shell → remote → overrides
- *
- * Any subsequent `@layer X { … }` block lands in the already-established slot
- * regardless of injection order, so late-arriving remote stylesheets never
- * "win" over shell or override rules. Idempotent — runs at most once per page.
+ * CSP nonce, read once from `<meta name="csp-nonce">` at module init.
+ * Applied to every injected `<style>` / `<link>` element. Null when absent.
  */
-function _ensureLayerOrder() {
-    if (_layersDeclared)
-        return;
-    _layersDeclared = true;
-    // Guard against duplicate elements in the DOM (e.g. hot-module-reload edge cases).
+const _cspNonce = typeof document !== 'undefined'
+    ? (document.querySelector('meta[name="csp-nonce"]')?.content ?? null)
+    : null;
+/** In-flight fetch promises keyed by appId — prevents duplicate fetches. */
+const _inFlight = new Map();
+// ---------------------------------------------------------------------------
+// Layer order — injected immediately at module init (synchronous, runs once).
+// ---------------------------------------------------------------------------
+(function _ensureLayerOrder() {
+    if (typeof document === 'undefined')
+        return; // SSR guard
     if (document.head.querySelector('style[data-fly-layers]'))
         return;
     const style = document.createElement('style');
     style.setAttribute('data-fly-layers', '');
     style.textContent = '@layer reset, designsystem, shell, remote, overrides;';
+    if (_cspNonce)
+        style.nonce = _cspNonce;
     // Prepend so this always precedes any other layer-bearing <style> blocks.
     document.head.insertBefore(style, document.head.firstChild);
-}
+})();
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
 /**
  * Discovers the hashed stylesheet href from the remote's `index.html`.
- * Returns `null` if no stylesheet `<link>` is found or the fetch fails.
+ * Applies a 5-second AbortController timeout. Clears `_inFlight` on abort so
+ * a retry is possible. Returns `null` on any failure.
  */
-async function _discoverStylesheetHref(remoteBaseUrl) {
+async function _discoverStylesheetHref(appId, remoteBaseUrl) {
     const indexUrl = remoteBaseUrl.replace(/\/$/, '') + '/index.html';
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 5000);
     try {
         const res = await fetch(indexUrl, {
             credentials: 'omit',
             cache: 'default',
+            signal: controller.signal,
         });
+        clearTimeout(timeoutId);
         if (!res.ok)
             return null;
         const html = await res.text();
@@ -865,85 +881,163 @@ async function _discoverStylesheetHref(remoteBaseUrl) {
         const link = doc.head.querySelector('link[rel="stylesheet"]');
         if (!link?.href)
             return null;
-        // `link.href` from DOMParser is resolved relative to the parser's base,
-        // which defaults to `about:blank`. We get the raw `href` attribute instead.
+        // `link.href` from DOMParser resolves against `about:blank`. Use raw attribute.
         const rawHref = link.getAttribute('href') ?? '';
         if (!rawHref)
             return null;
-        // If the remote emits an absolute URL, use it as-is; otherwise resolve
-        // against remoteBaseUrl.
+        // Early-reject dangerous schemes before any URL resolution.
+        // Without this guard, `javascript:alert(1)` would be rewritten to
+        // `remoteBaseUrl/javascript:alert(1)` and silently pass origin validation.
+        const rawLower = rawHref.toLowerCase();
+        if (rawLower.startsWith('javascript:') ||
+            rawLower.startsWith('data:') ||
+            rawLower.startsWith('blob:')) {
+            console.warn(`[FlyOS] loadRemoteStyles: rejected unsafe stylesheet href "${rawHref}"`);
+            return null;
+        }
+        // Resolve to absolute URL for origin validation.
+        let resolvedHref;
         if (rawHref.startsWith('http://') || rawHref.startsWith('https://') || rawHref.startsWith('//')) {
-            return rawHref;
+            resolvedHref = rawHref;
+        }
+        else {
+            resolvedHref = remoteBaseUrl.replace(/\/$/, '') + '/' + rawHref.replace(/^\//, '');
+        }
+        return _validateHref(resolvedHref, remoteBaseUrl);
+    }
+    catch {
+        clearTimeout(timeoutId);
+        // On abort or network error, clear in-flight so a retry is possible.
+        _inFlight.delete(appId);
+        return null;
+    }
+}
+/**
+ * Validates that a discovered href is safe to inject:
+ * - Must be `http://`, `https://`, or `//`-prefixed (no `javascript:`, `data:`, `blob:`).
+ * - Must share the same origin as `remoteBaseUrl`.
+ *
+ * Returns the href on success; logs a warning and returns `null` on failure.
+ */
+function _validateHref(href, remoteBaseUrl) {
+    // Block dangerous schemes.
+    const lower = href.toLowerCase();
+    if (lower.startsWith('javascript:') ||
+        lower.startsWith('data:') ||
+        lower.startsWith('blob:')) {
+        console.warn(`[FlyOS] loadRemoteStyles: rejected unsafe stylesheet href "${href}"`);
+        return null;
+    }
+    // Must be absolute (http/https/protocol-relative).
+    if (!lower.startsWith('http://') &&
+        !lower.startsWith('https://') &&
+        !lower.startsWith('//')) {
+        console.warn(`[FlyOS] loadRemoteStyles: rejected non-absolute stylesheet href "${href}"`);
+        return null;
+    }
+    // Origin must match remoteBaseUrl — prevents a compromised index.html from
+    // redirecting styles at an attacker-controlled domain.
+    try {
+        const hrefOrigin = new URL(href.startsWith('//') ? 'https:' + href : href).origin;
+        const remoteOrigin = new URL(remoteBaseUrl).origin;
+        if (hrefOrigin !== remoteOrigin) {
+            console.warn(`[FlyOS] loadRemoteStyles: rejected cross-origin stylesheet href "${href}" ` +
+                `(expected origin "${remoteOrigin}", got "${hrefOrigin}")`);
+            return null;
         }
-        return remoteBaseUrl.replace(/\/$/, '') + '/' + rawHref.replace(/^\//, '');
     }
     catch {
+        console.warn(`[FlyOS] loadRemoteStyles: could not parse href origin for "${href}"`);
         return null;
     }
+    return href;
 }
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
 /**
  * Injects the remote's stylesheet into `document.head`.
  *
- * @param appId       - Stable identifier for the remote app (matches `DesktopApp.id`).
+ * @param appId         - Stable identifier for the remote app (matches `DesktopApp.id`).
  * @param remoteBaseUrl - Base URL of the remote, e.g. `https://circles.example.com`
  *                        or `http://localhost:7202`. Must NOT include `/remoteEntry.json`.
  *
  * The call is idempotent:
- *  - If a `<style data-fly-app="appId">` whose content references the same href
- *    already exists → no-op.
+ *  - If an element with `data-fly-app="appId"` whose `data-fly-href` matches the
+ *    discovered href already exists → no-op.
  *  - If the href differs (hot upgrade) → existing element is replaced.
  *  - If no stylesheet is found in `index.html` → no-op (logged as a warning).
  *
- * Injection shape:
+ * Injection shape (preferred — `link[layer]` supported):
+ *   <link rel="stylesheet" data-fly-app="<appId>" data-fly-href="<href>"
+ *         href="<href>" crossorigin="anonymous" layer="remote">
+ *
+ * Injection shape (fallback — `link[layer]` unsupported):
  *   <style data-fly-app="<appId>" data-fly-href="<href>">
- *     @layer remote { @import url("<href>"); }
+ *     @import url("<href>") layer(remote);
  *   </style>
  *
  * The `data-fly-href` attribute stores the discovered href separately from the
- * style content so idempotency checks can compare the URL without parsing CSS.
+ * element content so idempotency checks can compare the URL without parsing CSS.
  */
 async function loadRemoteStyles(appId, remoteBaseUrl) {
     if (typeof document === 'undefined')
         return; // SSR guard
-    // Ensure the canonical layer order is declared before any remote layer is injected.
-    _ensureLayerOrder();
     // Kick off or join an in-flight fetch for this appId.
+    // Note: _resolvedHref cache is intentionally absent — always re-discover so
+    // the browser's HTTP cache handles cost (index.html is tiny) and hot-deploys
+    // are picked up without a page reload.
     let fetchPromise = _inFlight.get(appId);
     if (!fetchPromise) {
-        if (_resolvedHref.has(appId)) {
-            // Already resolved in a previous call — skip the fetch.
-            fetchPromise = Promise.resolve(_resolvedHref.get(appId) ?? null);
-        }
-        else {
-            fetchPromise = _discoverStylesheetHref(remoteBaseUrl);
-            _inFlight.set(appId, fetchPromise);
-        }
+        fetchPromise = _discoverStylesheetHref(appId, remoteBaseUrl);
+        _inFlight.set(appId, fetchPromise);
     }
     const href = await fetchPromise;
     _inFlight.delete(appId);
-    _resolvedHref.set(appId, href);
     if (!href) {
         console.warn(`[FlyOS] loadRemoteStyles: no stylesheet found in ${remoteBaseUrl}/index.html for appId="${appId}"`);
         return;
     }
-    const selector = `style[data-fly-app="${CSS.escape(appId)}"]`;
-    const existing = document.head.querySelector(selector);
+    // Check both <link> and <style> selectors — handle upgrades from the old fallback path.
+    const escapedId = CSS.escape(appId);
+    const existing = document.head.querySelector(`link[data-fly-app="${escapedId}"], style[data-fly-app="${escapedId}"]`);
     if (existing) {
         if (existing.getAttribute('data-fly-href') === href)
             return; // identical — no-op
-        // Hot upgrade: replace the entire element so the @import URL updates atomically.
+        // Hot upgrade: remove old element (could be <link> or <style>) atomically.
         existing.remove();
     }
-    // Option A: inline <style> with @layer remote { @import url("..."); }.
-    // See module JSDoc for the rationale over Options B and C.
-    const style = document.createElement('style');
-    style.setAttribute('data-fly-app', appId);
-    style.setAttribute('data-fly-href', href);
-    style.textContent = `@layer remote { @import url("${href}"); }`;
-    document.head.appendChild(style);
+    if (_linkLayerSupported) {
+        // Preferred path: non-render-blocking <link> with native layer= attribute.
+        // Firefox 134+, Chrome 99+, Safari 17.2+ all support this.
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.setAttribute('data-fly-app', appId);
+        link.setAttribute('data-fly-href', href);
+        link.href = href;
+        link.crossOrigin = 'anonymous';
+        link['layer'] = 'remote';
+        if (_cspNonce)
+            link.nonce = _cspNonce;
+        document.head.appendChild(link);
+    }
+    else {
+        // Fallback path: <style> with @import layer(remote) for older browsers.
+        // CSS Cascade Level 5: `@import url("…") layer(remote)` is the only valid
+        // way to place an @import inside a named cascade layer. Block-form
+        // `@layer remote { @import … }` is invalid and silently dropped by browsers.
+        const style = document.createElement('style');
+        style.setAttribute('data-fly-app', appId);
+        style.setAttribute('data-fly-href', href);
+        style.textContent = `@import url("${href}") layer(remote);`;
+        if (_cspNonce)
+            style.nonce = _cspNonce;
+        document.head.appendChild(style);
+    }
 }
 /**
- * Removes the injected stylesheet for `appId` from `document.head`.
+ * Removes the injected stylesheet element (either `<link>` or `<style>`) for
+ * `appId` from `document.head` and clears all internal state for this appId.
  *
  * NOTE: Prefer NOT calling this on normal window close — keeping styles loaded
  * prevents FOUC flicker when the user reopens the same app. Call only if you
@@ -952,9 +1046,17 @@ async function loadRemoteStyles(appId, remoteBaseUrl) {
 function unloadRemoteStyles(appId) {
     if (typeof document === 'undefined')
         return; // SSR guard
-    const style = document.head.querySelector(`style[data-fly-app="${CSS.escape(appId)}"]`);
-    style?.parentNode?.removeChild(style);
-    _resolvedHref.delete(appId);
+    const escapedId = CSS.escape(appId);
+    // Remove <link> element (preferred path) if present.
+    document.head
+        .querySelector(`link[data-fly-app="${escapedId}"]`)
+        ?.remove();
+    // Remove <style> element (fallback path) if present.
+    document.head
+        .querySelector(`style[data-fly-app="${escapedId}"]`)
+        ?.remove();
+    // Clear in-flight so a future call can retry.
+    _inFlight.delete(appId);
 }
 
 /**
@@ -2767,7 +2869,7 @@ class FlyImageUploadComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, decorators: [{
             type: Component,
@@ -2821,7 +2923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         </div>
       }
     </div>
-  `, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"] }]
+  `, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeBytes", required: false }] }], currentImageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentImageId", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], uploaded: [{ type: i0.Output, args: ["uploaded"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], cropImage: [{ type: i0.ViewChild, args: ['cropImage', { isSignal: true }] }] } });
 
 const FILE_ICONS = {