@scaleflex/asset-picker 0.2.4 → 0.2.6

package/dist/{asset-picker-Z_6-Ac0_.js → asset-picker-Cc1NFvo6.js}

@@ -1,5 +1,5 @@
-import { css as $, LitElement as k, html as n, nothing as f, svg as ce } from "lit";
-import { property as h, query as Se, customElement as S, state as y } from "lit/decorators.js";
+import { css as $, LitElement as S, html as n, nothing as f, svg as ce } from "lit";
+import { property as h, query as Se, customElement as C, state as y } from "lit/decorators.js";
 class Ma {
   constructor(e) {
     this.listeners = /* @__PURE__ */ new Set(), this._notifying = !1, this._pendingState = null, this.state = e;
@@ -160,7 +160,7 @@ class Ia {
 const Gt = 5, Te = 40, Yt = 15;
 class Da {
   constructor(e, a) {
-    this.startX = 0, this.startY = 0, this.startClientX = 0, this.startClientY = 0, this.preMarqueeSelection = /* @__PURE__ */ new Map(), this._dragging = !1, this._scrollRAF = null, this._lastMouseEvent = null, this.isActive = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 }, this.handleMouseDown = (s) => this.onMouseDown(s), this.handleMouseMove = (s) => this.onMouseMove(s), this.handleMouseUp = () => this.onMouseUp(), this.host = e, this.store = a, e.addController(this);
+    this.startX = 0, this.startY = 0, this.startClientX = 0, this.startClientY = 0, this.preMarqueeSelection = /* @__PURE__ */ new Map(), this._dragging = !1, this._scrollRAF = null, this._lastMouseEvent = null, this.isActive = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 }, this.handleMouseDown = (s) => this.onMouseDown(s), this.handleMouseMove = (s) => this.onMouseMove(s), this.handleMouseUp = () => this.onMouseUp(), this.preventSelect = (s) => s.preventDefault(), this.host = e, this.store = a, e.addController(this);
   }
   hostConnected() {
   }
@@ -171,7 +171,7 @@ class Da {
     this.detach(), this.container = e, e.addEventListener("mousedown", this.handleMouseDown);
   }
   detach() {
-    this.container && this.container.removeEventListener("mousedown", this.handleMouseDown), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.stopAutoScroll(), this._lastMouseEvent = null;
+    this.container && this.container.removeEventListener("mousedown", this.handleMouseDown), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), document.removeEventListener("selectstart", this.preventSelect), this.stopAutoScroll(), this._lastMouseEvent = null;
   }
   isInteractiveTarget(e) {
     return e.composedPath().some((s) => {
@@ -187,11 +187,12 @@ class Da {
     this.startX = e.clientX - a.left + this.container.scrollLeft, this.startY = e.clientY - a.top + this.container.scrollTop, this.startClientX = e.clientX, this.startClientY = e.clientY, this._dragging = !1, this.isActive = !1, document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("mouseup", this.handleMouseUp);
   }
   onMouseMove(e) {
+    var a;
     if (this.container) {
       if (!this._dragging) {
-        const a = Math.abs(e.clientX - this.startClientX), s = Math.abs(e.clientY - this.startClientY);
-        if (a < Gt && s < Gt) return;
-        this._dragging = !0, this.isActive = !0, this.preMarqueeSelection = new Map(this.store.getState().selectedAssets);
+        const s = Math.abs(e.clientX - this.startClientX), i = Math.abs(e.clientY - this.startClientY);
+        if (s < Gt && i < Gt) return;
+        this._dragging = !0, this.isActive = !0, document.addEventListener("selectstart", this.preventSelect), (a = window.getSelection()) == null || a.removeAllRanges(), this.preMarqueeSelection = new Map(this.store.getState().selectedAssets);
       }
       this._lastMouseEvent = e, this.updateMarqueeRect(e), this.startAutoScroll(e);
     }
@@ -221,7 +222,7 @@ class Da {
     this._scrollRAF && (cancelAnimationFrame(this._scrollRAF), this._scrollRAF = null);
   }
   onMouseUp() {
-    document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.stopAutoScroll(), this._lastMouseEvent = null, this._dragging && (this.isActive = !1, this._dragging = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 }, this.host.requestUpdate());
+    document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), document.removeEventListener("selectstart", this.preventSelect), this.stopAutoScroll(), this._lastMouseEvent = null, this._dragging && (this.isActive = !1, this._dragging = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 }, this.host.requestUpdate());
   }
   queryCards() {
     for (const e of Array.from(this.container.children))
@@ -379,10 +380,10 @@ async function ja(t, e) {
     { folders: e }
   )).folders || {};
 }
-async function Ba(t) {
+async function Ua(t) {
   return await t.request("/labels");
 }
-async function Ua(t) {
+async function Ba(t) {
   return ((await t.request("/tags")).tags || []).map((s) => ({
     ...s,
     label: s.names.en || Object.values(s.names)[0] || ""
@@ -407,7 +408,7 @@ const m = {
   PRODUCT_REF: "product_ref",
   FACES: "faces",
   COLOR: "color"
-}, U = {
+}, B = {
   STATUS: "approval_status",
   APPROVER: "task_approver",
   REQUESTOR: "task_requester",
@@ -455,7 +456,7 @@ const m = {
 Object.fromEntries(
   Object.entries(mt).map(([t, e]) => [e, t])
 );
-const ra = Object.values(mt), Be = {
+const ra = Object.values(mt), Ue = {
   PRESET: "preset",
   AFTER: "after",
   BEFORE: "before",
@@ -597,7 +598,7 @@ const ra = Object.values(mt), Be = {
   { label: "Is", value: w.IS_EXACT },
   { label: "Contains", value: w.IS },
   { label: "Does not contain", value: w.IS_NOT }
-], Ft = [
+], Et = [
   { label: "Is", value: w.IS },
   { label: "Greater than", value: w.GREATER_THAN_OR_EQUAL },
   { label: "Is not", value: w.IS_NOT },
@@ -617,7 +618,7 @@ const ra = Object.values(mt), Be = {
 ], ye = [
   { label: "Empty", value: K },
   { label: "Not empty", value: G }
-], Et = [
+], Ft = [
   ...ye,
   { label: "Specific", value: be }
 ], ss = [
@@ -655,7 +656,7 @@ const ra = Object.values(mt), Be = {
   [x.INTEGER_LIST]: "attachment"
 };
 async function rs(t) {
-  var b, E;
+  var b, k;
   const e = await t.request("/settings"), a = e.settings ?? e, s = (a == null ? void 0 : a.metadata) ?? e.metadata, r = ((s == null ? void 0 : s.model) ?? [])[Ha], o = s == null ? void 0 : s.store, c = ((o == null ? void 0 : o.regional_variants_groups) ?? []).map((_) => ({
     uuid: _.uuid,
     label: _.label ?? _.name ?? "",
@@ -667,13 +668,13 @@ async function rs(t) {
   })).filter((_) => _.variants.length > 1), p = {};
   for (const _ of c)
     p[_.uuid] = ((b = _.variants[0]) == null ? void 0 : b.api_value) ?? "";
-  const u = (a == null ? void 0 : a.project_branding) ?? ((E = e.settings) == null ? void 0 : E.project_branding), v = u == null ? void 0 : u.brandColor;
+  const u = (a == null ? void 0 : a.project_branding) ?? ((k = e.settings) == null ? void 0 : k.project_branding), v = u == null ? void 0 : u.brandColor;
   if (!r) return { fields: [], regionalVariantGroups: c, regionalFilters: p, brandColor: v };
   const d = r.groups ?? [], g = [];
   for (const _ of d) {
     const A = _.name || "Root fields";
     for (const F of _.fields ?? []) {
-      const I = F.possible_values, H = I == null ? void 0 : I.map((T) => ({
+      const P = F.possible_values, H = P == null ? void 0 : P.map((T) => ({
         api_value: T.api_value ?? T.value ?? "",
         internal_unique_value: T.internal_unique_value ?? T.api_value ?? "",
         label: T.label ?? T.name ?? T.api_value ?? ""
@@ -799,7 +800,7 @@ function ds(t, e) {
 }
 function ua(t, e) {
   const a = e.field || "created";
-  if (e.kind === Be.PRESET && e.preset) {
+  if (e.kind === Ue.PRESET && e.preset) {
     if (e.preset === Wt.EMPTY)
       return [`${a}:"empty"`];
     if (e.preset === Wt.NOT_EMPTY)
@@ -807,11 +808,11 @@ function ua(t, e) {
     const s = ha(e.preset);
     return s ? s.to === null ? [`${a}>"${s.from}"`] : [`${a}:"${s.from}..${s.to}"`] : [];
   }
-  if (e.kind === Be.AFTER && e.from)
+  if (e.kind === Ue.AFTER && e.from)
     return [`${a}:>"${e.from}"`];
-  if (e.kind === Be.BEFORE && e.to)
+  if (e.kind === Ue.BEFORE && e.to)
     return [`${a}:<"${e.to}"`];
-  if (e.kind === Be.BETWEEN) {
+  if (e.kind === Ue.BETWEEN) {
     if (e.from && e.to)
       return [`${a}:"${e.from}..${e.to}"`];
     if (e.from && !e.to)
@@ -819,7 +820,7 @@ function ua(t, e) {
     if (!e.from && e.to)
       return [`${a}:<"${e.to}"`];
   }
-  return e.kind === Be.SPECIFIC && e.from ? [`${a}:"${e.from}"`] : [];
+  return e.kind === Ue.SPECIFIC && e.from ? [`${a}:"${e.from}"`] : [];
 }
 function ps(t, e, a) {
   return e.length === 0 ? [] : [`${t}:"${e.join(a)}"`];
@@ -899,9 +900,9 @@ function ta(t) {
 const _s = /* @__PURE__ */ new Set([
   m.DATE,
   m.LICENSE_EXPIRY,
-  U.DUE_DATE
+  B.DUE_DATE
 ]);
-function Ue(t) {
+function Be(t) {
   if (!t) return {};
   const e = {};
   for (const [a, s] of Object.entries(t))
@@ -980,14 +981,14 @@ function Cs(t) {
   } catch {
   }
 }
-function Fs() {
+function Es() {
   try {
     return localStorage.getItem(ma);
   } catch {
     return null;
   }
 }
-function Es(t) {
+function Fs(t) {
   try {
     localStorage.setItem(ba, t);
   } catch {
@@ -1009,9 +1010,9 @@ function At(t) {
   return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
 }
 function Ms(t, e, a) {
-  const s = At(t), i = At(e), r = At(a), o = 0.4122214708 * s + 0.5363325363 * i + 0.0514459929 * r, l = 0.2119034982 * s + 0.6806995451 * i + 0.1073969566 * r, c = 0.0883024619 * s + 0.2817188376 * i + 0.6299787005 * r, p = Math.cbrt(o), u = Math.cbrt(l), v = Math.cbrt(c), d = 0.2104542553 * p + 0.793617785 * u - 0.0040720468 * v, g = 1.9779984951 * p - 2.428592205 * u + 0.4505937099 * v, b = 0.0259040371 * p + 0.7827717662 * u - 0.808675766 * v, E = Math.sqrt(g * g + b * b);
+  const s = At(t), i = At(e), r = At(a), o = 0.4122214708 * s + 0.5363325363 * i + 0.0514459929 * r, l = 0.2119034982 * s + 0.6806995451 * i + 0.1073969566 * r, c = 0.0883024619 * s + 0.2817188376 * i + 0.6299787005 * r, p = Math.cbrt(o), u = Math.cbrt(l), v = Math.cbrt(c), d = 0.2104542553 * p + 0.793617785 * u - 0.0040720468 * v, g = 1.9779984951 * p - 2.428592205 * u + 0.4505937099 * v, b = 0.0259040371 * p + 0.7827717662 * u - 0.808675766 * v, k = Math.sqrt(g * g + b * b);
   let _ = Math.atan2(b, g) * (180 / Math.PI);
-  return _ < 0 && (_ += 360), [d, E, _];
+  return _ < 0 && (_ += 360), [d, k, _];
 }
 function Os(t) {
   return t > 0.7;
@@ -1056,7 +1057,7 @@ var Ds = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, zt = (t, e
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ds(e, a, i), i;
 };
-let qe = class extends k {
+let qe = class extends S {
   constructor() {
     super(...arguments), this.open = !1;
   }
@@ -1184,7 +1185,7 @@ zt([
   Se("dialog")
 ], qe.prototype, "dialog", 2);
 qe = zt([
-  S("ap-modal")
+  C("ap-modal")
 ], qe);
 function Rs(t, e) {
   let a;
@@ -1203,7 +1204,7 @@ var Ns = Object.defineProperty, js = Object.getOwnPropertyDescriptor, bt = (t, e
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ns(e, a, i), i;
 };
-let Pe = class extends k {
+let Pe = class extends S {
   constructor() {
     super(...arguments), this.groups = [], this.selectedFilters = {}, this._open = !1, this._handleOutsideClick = (t) => {
       this._open && !t.composedPath().includes(this) && (this._open = !1);
@@ -1357,18 +1358,18 @@ bt([
   y()
 ], Pe.prototype, "_open", 2);
 Pe = bt([
-  S("ap-regional-settings")
+  C("ap-regional-settings")
 ], Pe);
-var Bs = Object.defineProperty, Us = Object.getOwnPropertyDescriptor, re = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? Us(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var Us = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, re = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? Bs(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
-  return s && i && Bs(e, a, i), i;
+  return s && i && Us(e, a, i), i;
 };
 const Vs = [
   { value: "assets", label: "Assets", icon: "gallery-vertical-end" },
   { value: "folders", label: "Folders", icon: "folder-open" }
 ];
-let W = class extends k {
+let W = class extends S {
   constructor() {
     super(...arguments), this.activeTab = "assets", this.tabs = ["assets", "folders"], this.viewMode = "grid", this.searchQuery = "", this.regionalGroups = [], this.regionalFilters = {}, this.hideClose = !1, this._localSearch = "", this._debouncedSearch = Rs((t) => {
       (t.length === 0 || t.length >= 3) && this.dispatchEvent(new CustomEvent("search-change", { detail: { value: t }, bubbles: !0, composed: !0 }));
@@ -1418,7 +1419,7 @@ let W = class extends k {
           <ap-icon class="search-icon" name="search" .size=${16}></ap-icon>
           <input
             type="text"
-            placeholder="Search assets..."
+            placeholder="Search assets"
             .value=${this.searchQuery}
             @input=${this._handleInput}
           />
@@ -1490,6 +1491,9 @@ W.styles = [ie, $`
       background: var(--ap-background, oklch(1 0 0));
       outline: none;
     }
+    input:hover {
+      border-color: var(--ap-secondary-foreground-50, oklch(53.03% 0.039 249.89 / 0.5));
+    }
     input:focus {
       border-color: var(--ap-ring, oklch(0.578 0.198 268.129 / 0.7));
       box-shadow: 0 0 0 2px var(--ap-primary-10, oklch(0.578 0.198 268.129 / 0.1));
@@ -1499,6 +1503,7 @@ W.styles = [ie, $`
     }
     input::placeholder {
       color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      font-weight: 400;
     }
     .clear-btn {
       position: absolute;
@@ -1585,14 +1590,14 @@ re([
   y()
 ], W.prototype, "_localSearch", 2);
 W = re([
-  S("ap-header")
+  C("ap-header")
 ], W);
 var qs = Object.defineProperty, Hs = Object.getOwnPropertyDescriptor, _a = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Hs(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && qs(e, a, i), i;
 };
-let nt = class extends k {
+let nt = class extends S {
   constructor() {
     super(...arguments), this.items = [];
   }
@@ -1616,7 +1621,7 @@ let nt = class extends k {
 nt.styles = $`
     :host {
       display: block;
-      padding: 8px 20px;
+      padding: 4px 20px 12px;
     }
     .breadcrumb {
       display: flex;
@@ -1634,6 +1639,9 @@ nt.styles = $`
       font-family: var(--ap-font-family, system-ui, sans-serif);
       font-size: var(--ap-font-size-sm, 0.875rem);
     }
+    button:first-child {
+      margin-left: -6px;
+    }
     button:hover {
       background: var(--ap-muted, oklch(0.974 0.006 239.819));
       color: var(--ap-foreground, oklch(0.37 0.022 248.413));
@@ -1651,14 +1659,14 @@ _a([
   h({ type: Array })
 ], nt.prototype, "items", 2);
 nt = _a([
-  S("ap-breadcrumb")
+  C("ap-breadcrumb")
 ], nt);
 var Ks = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, Rt = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Gs(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ks(e, a, i), i;
 };
-let He = class extends k {
+let He = class extends S {
   constructor() {
     super(...arguments), this.title = "", this.open = !1;
   }
@@ -1704,14 +1712,14 @@ Rt([
   h({ type: Boolean })
 ], He.prototype, "open", 2);
 He = Rt([
-  S("ap-filter-popover")
+  C("ap-filter-popover")
 ], He);
 var Ys = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, ya = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Xs(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ys(e, a, i), i;
 };
-let lt = class extends k {
+let lt = class extends S {
   constructor() {
     super(...arguments), this.selected = [];
   }
@@ -1803,7 +1811,7 @@ ya([
   h({ type: Array })
 ], lt.prototype, "selected", 2);
 lt = ya([
-  S("ap-filter-type")
+  C("ap-filter-type")
 ], lt);
 const oe = $`
   :host {
@@ -1922,6 +1930,7 @@ const oe = $`
   }
   .filter-input::placeholder {
     color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+    font-weight: 400;
   }
 
   /* ── Date input: Lucide calendar icon ── */
@@ -1942,10 +1951,6 @@ const oe = $`
     background-size: 16px 16px;
     padding-right: 32px;
   }
-  .input-label:has(+ .filter-input[type="date"]) {
-    font-weight: 400;
-    color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
-  }
 
   textarea.filter-input {
     min-height: 60px;
@@ -1955,9 +1960,9 @@ const oe = $`
   /* ── Input label ── */
   .input-label {
     display: block;
-    font-size: var(--ap-font-size-sm, 0.875rem);
-    font-weight: 500;
-    color: var(--ap-foreground, oklch(0.37 0.022 248.413));
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
     margin-bottom: 4px;
   }
   .input-label[aria-disabled="true"] {
@@ -2031,9 +2036,17 @@ const oe = $`
     background: var(--ap-card, oklch(1 0 0));
     margin: -10px -8px 10px;
   }
+  .search-wrapper .search-icon {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+    pointer-events: none;
+  }
   .search-input {
     width: 100%;
-    padding: 8px 32px 8px 10px;
+    padding: 8px 32px 8px 32px;
     border: none;
     border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
     border-radius: 0;
@@ -2045,6 +2058,7 @@ const oe = $`
   }
   .search-input::placeholder {
     color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+    font-weight: 400;
   }
   .search-clear {
     position: absolute;
@@ -2091,7 +2105,7 @@ var Ws = Object.defineProperty, Qs = Object.getOwnPropertyDescriptor, Ce = (t, e
 function Tt(t) {
   return t.toISOString().split("T")[0];
 }
-let te = class extends k {
+let te = class extends S {
   constructor() {
     super(...arguments), this.filterKey = m.DATE, this.field = "created", this.kind = null, this.preset = "", this.from = "", this.to = "";
   }
@@ -2287,14 +2301,14 @@ Ce([
   h()
 ], te.prototype, "to", 2);
 te = Ce([
-  S("ap-filter-date")
+  C("ap-filter-date")
 ], te);
 var Zs = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, ze = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Js(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Zs(e, a, i), i;
 };
-let de = class extends k {
+let de = class extends S {
   constructor() {
     super(...arguments), this.tags = [], this.selected = [], this.filterKey = m.TAGS, this._search = "";
   }
@@ -2386,10 +2400,11 @@ let de = class extends k {
     return n`
       <div class="filter-content">
         <div class="filter-header">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="tag-search"
             type="text"
-            placeholder="Search tags..."
+            placeholder="Search tags"
             .value=${this._search}
             @input=${this._onSearchInput}
           />
@@ -2545,9 +2560,18 @@ de.styles = [ie, oe, $`
       margin: -10px -8px 10px;
     }
 
+    .filter-header .search-icon {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      pointer-events: none;
+    }
+
     .tag-search {
       width: 100%;
-      padding: 8px 10px;
+      padding: 8px 32px 8px 32px;
       border: none;
       border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
       font-size: var(--ap-font-size-sm, 0.875rem);
@@ -2559,6 +2583,7 @@ de.styles = [ie, oe, $`
 
     .tag-search::placeholder {
       color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      font-weight: 400;
     }
 
     .search-clear {
@@ -2587,14 +2612,14 @@ ze([
   y()
 ], de.prototype, "_search", 2);
 de = ze([
-  S("ap-filter-tags")
+  C("ap-filter-tags")
 ], de);
 var ei = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, Qe = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? ti(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && ei(e, a, i), i;
 };
-let we = class extends k {
+let we = class extends S {
   constructor() {
     super(...arguments), this.labels = [], this.selected = [], this._search = "";
   }
@@ -2687,10 +2712,11 @@ let we = class extends k {
       <div class="filter-content">
         <!-- Search input -->
         <div class="search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="search-input"
             type="text"
-            placeholder="Search labels..."
+            placeholder="Search labels"
             .value=${this._search}
             @input=${this._onSearchInput}
           />
@@ -2812,7 +2838,7 @@ Qe([
   y()
 ], we.prototype, "_search", 2);
 we = Qe([
-  S("ap-filter-labels")
+  C("ap-filter-labels")
 ], we);
 var ai = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Re = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? si(e, a) : e, r = t.length - 1, o; r >= 0; r--)
@@ -2828,7 +2854,7 @@ function ii(t) {
     coverage: e[3] || it
   };
 }
-let pe = class extends k {
+let pe = class extends S {
   constructor() {
     super(...arguments), this.values = [], this._colors = [], this._advanced = !1, this._showPalette = !1, this._initialized = !1;
   }
@@ -3053,8 +3079,8 @@ pe.styles = [ie, oe, $`
     /* ── Palette ── */
     .palette {
       display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 8px;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 12px;
       justify-items: center;
     }
 
@@ -3202,16 +3228,21 @@ pe.styles = [ie, oe, $`
       display: grid;
       grid-template-columns: 1.4fr 1fr 1fr auto;
       align-items: end;
-      gap: 6px;
+      gap: 8px;
     }
 
     .adv-field {
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      gap: 6px;
       min-width: 0;
     }
 
+    .adv-field ap-dropdown {
+      display: block;
+      width: 100%;
+    }
+
     .adv-field-label {
       font-size: 0.6875rem;
       color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
@@ -3268,20 +3299,18 @@ pe.styles = [ie, oe, $`
       display: inline-flex;
       align-items: center;
       gap: 4px;
-      padding: 6px 12px;
-      border: 1px dashed var(--ap-border, oklch(92.86% 0.009 247.92));
-      border-radius: var(--ap-radius-sm, 6px);
+      padding: 6px 0;
+      border: none;
       background: none;
       font-size: var(--ap-font-size-sm, 0.875rem);
       font-family: inherit;
-      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      color: var(--ap-primary, oklch(0.578 0.198 268.129));
       cursor: pointer;
-      transition: border-color 150ms, color 150ms;
+      transition: opacity 150ms;
     }
 
     .add-color-btn:hover {
-      border-color: var(--ap-primary, oklch(0.578 0.198 268.129));
-      color: var(--ap-primary, oklch(0.578 0.198 268.129));
+      opacity: 0.8;
     }
   `];
 Re([
@@ -3300,9 +3329,9 @@ Re([
   y()
 ], pe.prototype, "_initialized", 2);
 pe = Re([
-  S("ap-filter-color")
+  C("ap-filter-color")
 ], pe);
-var ri = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, Fe = (t, e, a, s) => {
+var ri = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, Ee = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? oi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && ri(e, a, i), i;
@@ -3316,7 +3345,7 @@ const ni = {
   { value: "MB", label: "MB" },
   { value: "GB", label: "GB" }
 ];
-let ae = class extends k {
+let ae = class extends S {
   constructor() {
     super(...arguments), this.min = 0, this.max = 0, this._minVal = "", this._maxVal = "", this._unit = "MB", this._initialized = !1;
   }
@@ -3444,26 +3473,26 @@ ae.styles = [
       }
     `
 ];
-Fe([
+Ee([
   h({ type: Number })
 ], ae.prototype, "min", 2);
-Fe([
+Ee([
   h({ type: Number })
 ], ae.prototype, "max", 2);
-Fe([
+Ee([
   y()
 ], ae.prototype, "_minVal", 2);
-Fe([
+Ee([
   y()
 ], ae.prototype, "_maxVal", 2);
-Fe([
+Ee([
   y()
 ], ae.prototype, "_unit", 2);
-Fe([
+Ee([
   y()
 ], ae.prototype, "_initialized", 2);
-ae = Fe([
-  S("ap-filter-size")
+ae = Ee([
+  C("ap-filter-size")
 ], ae);
 var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, _t = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? di(e, a) : e, r = t.length - 1, o; r >= 0; r--)
@@ -3502,7 +3531,7 @@ const pi = ce`
   square: ui,
   panorama: gi
 };
-let Le = class extends k {
+let Le = class extends S {
   constructor() {
     super(...arguments), this.selectedResolution = [], this.selectedOrientation = [], this.selectedFaces = [];
   }
@@ -3615,6 +3644,9 @@ Le.styles = [oe, $`
       flex-direction: column;
       gap: 12px;
     }
+    .options-vertical ap-checkbox {
+      --ap-checkbox-gap: 12px;
+    }
     .orientation-label {
       display: inline-flex;
       align-items: center;
@@ -3634,17 +3666,17 @@ _t([
   h({ type: Array })
 ], Le.prototype, "selectedFaces", 2);
 Le = _t([
-  S("ap-filter-image")
+  C("ap-filter-image")
 ], Le);
-var vi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, L = (t, e, a, s) => {
+var vi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, I = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? mi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && vi(e, a, i), i;
 };
-function C(t) {
+function E(t) {
   return `${mt[t.type] || ""}${t.key}`;
 }
-let P = class extends k {
+let L = class extends S {
   constructor() {
     super(...arguments), this.fields = [], this.appliedFilters = {}, this.visibleFields = [], this.mode = "full", this.activeFieldKey = "", this.pinnedFields = [], this.appliedMetadata = {}, this._showFieldSelection = !1, this._fieldSearch = "", this._collapsedFields = /* @__PURE__ */ new Set(), this._tagInputs = {}, this._tagSuggestions = {}, this._tagLoading = {}, this._datePresets = {}, this._dateFroms = {}, this._dateTos = {}, this._specificModeFields = /* @__PURE__ */ new Set(), this._selectSearches = {}, this._tagDebounceTimers = {};
   }
@@ -3665,7 +3697,7 @@ let P = class extends k {
     return this.visibleFields.length >= at;
   }
   _getField(t) {
-    return this.fields.find((e) => C(e) === t);
+    return this.fields.find((e) => E(e) === t);
   }
   _getUIType(t) {
     return is[t.type];
@@ -3684,7 +3716,7 @@ let P = class extends k {
   }
   // ── Event dispatchers ────────────────────────────────────────────
   _emitFilterChange(t, e, a) {
-    const s = C(t);
+    const s = E(t);
     this.dispatchEvent(
       new CustomEvent("metadata-filter-change", {
         detail: {
@@ -3699,7 +3731,7 @@ let P = class extends k {
     );
   }
   _emitFieldToggle(t, e) {
-    const a = C(t);
+    const a = E(t);
     this.dispatchEvent(
       new CustomEvent("metadata-field-toggle", {
         detail: { fieldKey: a, visible: e },
@@ -3709,7 +3741,7 @@ let P = class extends k {
     );
   }
   _emitFieldSelect(t) {
-    const e = C(t);
+    const e = E(t);
     !this.visibleFields.includes(e) && this._atFieldLimit || (this.visibleFields.includes(e) || this._emitFieldToggle(t, !0), this.dispatchEvent(
       new CustomEvent("metadata-field-select", {
         detail: { fieldKey: e },
@@ -3736,7 +3768,7 @@ let P = class extends k {
   }
   _addField(t) {
     if (this._atFieldLimit) return;
-    const e = C(t);
+    const e = E(t);
     this.visibleFields.includes(e) || this._emitFieldToggle(t, !0);
   }
   _removeField(t) {
@@ -3748,12 +3780,12 @@ let P = class extends k {
   }
   // ── Operator change (via radio group) ─────────────────────────────
   _onOperatorChange(t, e) {
-    const s = this._getApplied(C(t)).values || [];
+    const s = this._getApplied(E(t)).values || [];
     this._emitFilterChange(t, e, s);
   }
   // ── Content mode change ─────────────────────────────────────────
   _onContentModeChange(t, e) {
-    const a = C(t);
+    const a = E(t);
     if (e === be) {
       const s = new Set(this._specificModeFields);
       s.add(a), this._specificModeFields = s;
@@ -3769,7 +3801,7 @@ let P = class extends k {
   }
   // ── Clear field filter ──────────────────────────────────────────
   _clearFieldFilter(t) {
-    const e = C(t);
+    const e = E(t);
     if (this._specificModeFields.has(e)) {
       const d = new Set(this._specificModeFields);
       d.delete(e), this._specificModeFields = d;
@@ -3787,12 +3819,12 @@ let P = class extends k {
   }
   // ── Text filter ──────────────────────────────────────────────────
   _onTextInput(t, e) {
-    const a = e.target.value, i = this._getApplied(C(t)).operator || St[0].value;
+    const a = e.target.value, i = this._getApplied(E(t)).operator || St[0].value;
     this._emitFilterChange(t, i, a ? [a] : []);
   }
   // ── Number filter ────────────────────────────────────────────────
   _onNumberInput(t, e, a) {
-    const s = e.target.value, i = C(t), r = this._getApplied(i), o = r.operator || Ft[0].value, l = [...r.values || []];
+    const s = e.target.value, i = E(t), r = this._getApplied(i), o = r.operator || Et[0].value, l = [...r.values || []];
     a === 0 ? l[0] = s : l[1] = s;
     const c = l.filter((p) => p !== "" && p !== void 0);
     if (c.length > 0) {
@@ -3806,22 +3838,22 @@ let P = class extends k {
   // ── Boolean filter ───────────────────────────────────────────────
   _onBooleanSelect(t, e) {
     var i;
-    const a = this._getApplied(C(t));
+    const a = this._getApplied(E(t));
     ((i = a.values) == null ? void 0 : i[0]) === e ? this._emitFilterChange(t, void 0, []) : this._emitFilterChange(t, a.operator, [e]);
   }
   // ── Select-one filter ────────────────────────────────────────────
   _onSelectOneToggle(t, e) {
-    const a = C(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
+    const a = E(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
     r.length === 1 && r[0] === e ? this._emitFilterChange(t, i, []) : this._emitFilterChange(t, i, [e]);
   }
   // ── Multi-select filter ──────────────────────────────────────────
   _onMultiSelectToggle(t, e) {
-    const a = C(t), s = this._getApplied(a), i = s.operator || Ct[0].value, r = s.values || [], o = r.includes(e) ? r.filter((l) => l !== e) : [...r, e];
+    const a = E(t), s = this._getApplied(a), i = s.operator || Ct[0].value, r = s.values || [], o = r.includes(e) ? r.filter((l) => l !== e) : [...r, e];
     this._emitFilterChange(t, i, o);
   }
   // ── Tags filter ──────────────────────────────────────────────────
   _onTagKeydown(t, e) {
-    const a = C(t);
+    const a = E(t);
     (e.key === "Enter" || e.key === ",") && (e.preventDefault(), this._commitTagInput(t, a));
   }
   _onTagInput(t, e, a) {
@@ -3834,7 +3866,7 @@ let P = class extends k {
     this._tagInputs = { ...this._tagInputs, [e]: s }, this._fetchTagSuggestions(t, e, s.trim());
   }
   _selectTagSuggestion(t, e) {
-    const a = C(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
+    const a = E(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
     r.includes(e) || this._emitFilterChange(t, i, [...r, e]), this._tagInputs = { ...this._tagInputs, [a]: "" }, this._tagSuggestions = { ...this._tagSuggestions, [a]: [] };
   }
   _fetchTagSuggestions(t, e, a) {
@@ -3867,7 +3899,7 @@ let P = class extends k {
     r.includes(a) || this._emitFilterChange(t, i, [...r, a]), this._tagInputs = { ...this._tagInputs, [e]: "" }, this._tagSuggestions = { ...this._tagSuggestions, [e]: [] };
   }
   _removeTag(t, e) {
-    const a = C(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
+    const a = E(t), s = this._getApplied(a), i = s.operator || ee[0].value, r = s.values || [];
     this._emitFilterChange(
       t,
       i,
@@ -3875,12 +3907,12 @@ let P = class extends k {
     );
   }
   _onTagOperatorChange(t, e) {
-    const a = C(t), i = this._getApplied(a).values || [];
+    const a = E(t), i = this._getApplied(a).values || [];
     this._emitFilterChange(t, e, i);
   }
   // ── Date filter ──────────────────────────────────────────────────
   _onDatePreset(t, e) {
-    const a = C(t);
+    const a = E(t);
     if (this._datePresets = { ...this._datePresets, [a]: e }, ["before", "after", "between"].includes(e)) {
       this._dateFroms = { ...this._dateFroms, [a]: "" }, this._dateTos = { ...this._dateTos, [a]: "" };
       return;
@@ -3918,7 +3950,7 @@ let P = class extends k {
     i && r && (this._dateFroms = { ...this._dateFroms, [a]: i }, this._dateTos = { ...this._dateTos, [a]: r }, this._emitFilterChange(t, "..", [i, r]));
   }
   _onDateInput(t, e, a) {
-    const s = a.target.value, i = C(t), r = this._datePresets[i] || "", o = s ? (/* @__PURE__ */ new Date(s + "T00:00:00")).toISOString() : "";
+    const s = a.target.value, i = E(t), r = this._datePresets[i] || "", o = s ? (/* @__PURE__ */ new Date(s + "T00:00:00")).toISOString() : "";
     e === "from" ? this._dateFroms = { ...this._dateFroms, [i]: o } : this._dateTos = { ...this._dateTos, [i]: o };
     let l = this._dateFroms[i] || "", c = this._dateTos[i] || "";
     r === "after" && l && (c = (/* @__PURE__ */ new Date()).toISOString(), this._dateTos = { ...this._dateTos, [i]: c }), r === "before" && c && (l = (/* @__PURE__ */ new Date(0)).toISOString(), this._dateFroms = { ...this._dateFroms, [i]: l }), l && c && this._emitFilterChange(t, "..", [l, c]);
@@ -3926,7 +3958,7 @@ let P = class extends k {
   // ── Geo filter ───────────────────────────────────────────────────
   _onGeoLocationInput(t, e) {
     var v;
-    const a = e.target.value.trim(), s = C(t), i = (v = this.shadowRoot) == null ? void 0 : v.querySelector(
+    const a = e.target.value.trim(), s = E(t), i = (v = this.shadowRoot) == null ? void 0 : v.querySelector(
       `[data-geo-radius="${s}"]`
     ), r = (i == null ? void 0 : i.value) || "";
     if (!a) {
@@ -3942,7 +3974,7 @@ let P = class extends k {
   }
   _onGeoRadiusInput(t, e) {
     var c;
-    const a = e.target.value, s = C(t), i = this._getApplied(s);
+    const a = e.target.value, s = E(t), i = this._getApplied(s);
     if (!((c = i.values) != null && c[0])) return;
     const r = i.values[0], [o] = r.split("..");
     let l = o;
@@ -3951,7 +3983,7 @@ let P = class extends k {
   // ── Empty/non-empty option click ─────────────────────────────────
   _onEmptyOption(t, e) {
     var i;
-    const a = this._getApplied(C(t));
+    const a = this._getApplied(E(t));
     ((i = a.values) == null ? void 0 : i[0]) === e ? this._emitFilterChange(t, a.operator, []) : this._emitFilterChange(t, a.operator, [e]);
   }
   // ── Render: Field selection panel ────────────────────────────────
@@ -3969,7 +4001,7 @@ let P = class extends k {
     ), a = this._getGroupedFields(e), s = (i, r) => r.length === 0 ? f : n`
         <div class="field-group-label">${i}</div>
         ${r.map((o) => {
-      const l = C(o), c = this.visibleFields.includes(l), p = !c && this._atFieldLimit;
+      const l = E(o), c = this.visibleFields.includes(l), p = !c && this._atFieldLimit;
       return n`
             <div
               class="field-item ${c ? "selected" : ""} ${p ? "disabled" : ""}"
@@ -3992,15 +4024,18 @@ let P = class extends k {
             <ap-icon name="close" .size=${16}></ap-icon>
           </button>
         </div>
-        <input
-          class="field-search"
-          type="text"
-          placeholder="Search fields..."
-          .value=${this._fieldSearch}
-          @input=${(i) => {
+        <div class="field-search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
+          <input
+            class="field-search"
+            type="text"
+            placeholder="Search fields"
+            .value=${this._fieldSearch}
+            @input=${(i) => {
       this._fieldSearch = i.target.value;
     }}
-        />
+          />
+        </div>
         <div class="field-list">
           ${e.length === 0 ? n`<div class="empty-msg">No fields found</div>` : n`${[...a.entries()].map(
       ([i, r]) => s(i, r)
@@ -4012,7 +4047,7 @@ let P = class extends k {
   // ── Render: Text filter ──────────────────────────────────────────
   _renderTextFilter(t) {
     var p, u;
-    const e = C(t), a = this._getApplied(e), i = this._isSpecialValue(a.values) ? "" : ((p = a.values) == null ? void 0 : p[0]) || "", r = this._getContentMode(e), o = r === K || r === G, l = a.operator || St[0].value, c = t.type === x.TEXT_AREA;
+    const e = E(t), a = this._getApplied(e), i = this._isSpecialValue(a.values) ? "" : ((p = a.values) == null ? void 0 : p[0]) || "", r = this._getContentMode(e), o = r === K || r === G, l = a.operator || St[0].value, c = t.type === x.TEXT_AREA;
     return n`
       <div class="filter-content" style="position: relative;">
         <button
@@ -4035,7 +4070,7 @@ let P = class extends k {
         <div class="filter-section">
           <span class="section-label">Content</span>
           <ap-radio-group
-            .options=${Et}
+            .options=${Ft}
             .value=${r}
             @ap-change=${(v) => this._onContentModeChange(t, v.detail.value)}
           ></ap-radio-group>
@@ -4047,7 +4082,7 @@ let P = class extends k {
                 ${c ? n`
                       <textarea
                         class="filter-input"
-                        placeholder="Enter value..."
+                        placeholder="Enter value"
                         .value=${i}
                         @change=${(v) => this._onTextInput(t, v)}
                       ></textarea>
@@ -4055,7 +4090,7 @@ let P = class extends k {
                       <input
                         class="filter-input"
                         type="text"
-                        placeholder="Enter value..."
+                        placeholder="Enter value"
                         .value=${i}
                         @change=${(v) => this._onTextInput(t, v)}
                         @keydown=${(v) => {
@@ -4070,8 +4105,8 @@ let P = class extends k {
   }
   // ── Render: Number filter ────────────────────────────────────────
   _renderNumberFilter(t) {
-    var F, I, H;
-    const e = C(t), a = this._getApplied(e), s = a.operator || Ft[0].value, i = this._isSpecialValue(a.values), r = this._getContentMode(e), o = r === K || r === G, l = s === w.RANGE, c = s === w.GREATER_THAN_OR_EQUAL, p = s === w.LESS_THAN_OR_EQUAL, u = t.type === x.DECIMAL2, v = u ? "0.01" : "1", d = u ? "0.00" : "0", g = i ? "" : ((F = a.values) == null ? void 0 : F[0]) || "", b = i ? "" : ((I = a.values) == null ? void 0 : I[1]) || "", E = l || c || p, _ = l || c || p ? "Min" : "Value";
+    var F, P, H;
+    const e = E(t), a = this._getApplied(e), s = a.operator || Et[0].value, i = this._isSpecialValue(a.values), r = this._getContentMode(e), o = r === K || r === G, l = s === w.RANGE, c = s === w.GREATER_THAN_OR_EQUAL, p = s === w.LESS_THAN_OR_EQUAL, u = t.type === x.DECIMAL2, v = u ? "0.01" : "1", d = u ? "0.00" : "0", g = i ? "" : ((F = a.values) == null ? void 0 : F[0]) || "", b = i ? "" : ((P = a.values) == null ? void 0 : P[1]) || "", k = l || c || p, _ = l || c || p ? "Min" : "Value";
     return n`
       <div class="filter-content" style="position: relative;">
         <button
@@ -4084,7 +4119,7 @@ let P = class extends k {
           <span class="section-label">Condition</span>
           <ap-radio-group
             columns="2"
-            .options=${Ft}
+            .options=${Et}
             .value=${s}
             ?disabled=${o}
             @ap-change=${(T) => this._onOperatorChange(t, T.detail.value)}
@@ -4094,7 +4129,7 @@ let P = class extends k {
         <div class="filter-section">
           <span class="section-label">Content</span>
           <ap-radio-group
-            .options=${Et}
+            .options=${Ft}
             .value=${r}
             @ap-change=${(T) => this._onContentModeChange(t, T.detail.value)}
           ></ap-radio-group>
@@ -4115,7 +4150,7 @@ let P = class extends k {
                       @change=${(T) => this._onNumberInput(t, T, 0)}
                     />
                   </div>
-                  ${E ? n`
+                  ${k ? n`
                         <div>
                           <span class="input-label" aria-disabled=${c ? "true" : f}>${"Max"}</span>
                           <input
@@ -4138,7 +4173,7 @@ let P = class extends k {
   // ── Render: Boolean filter ───────────────────────────────────────
   _renderBooleanFilter(t) {
     var s, i;
-    const e = this._getApplied(C(t)), a = ((s = e.values) == null ? void 0 : s[0]) || "";
+    const e = this._getApplied(E(t)), a = ((s = e.values) == null ? void 0 : s[0]) || "";
     return n`
       <div class="filter-content" style="position: relative;">
         <button
@@ -4160,15 +4195,16 @@ let P = class extends k {
   }
   // ── Render: Select-one filter ────────────────────────────────────
   _renderSelectOneFilter(t) {
-    const e = C(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = t.possible_values || [], o = a.operator || ee[0].value, l = (this._selectSearches[e] || "").toLowerCase(), c = l.length > 0, p = i.length > 0 || s, u = l ? r.filter((d) => d.label.toLowerCase().includes(l)) : r, v = i.length >= at;
+    const e = E(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = t.possible_values || [], o = a.operator || ee[0].value, l = (this._selectSearches[e] || "").toLowerCase(), c = l.length > 0, p = i.length > 0 || s, u = l ? r.filter((d) => d.label.toLowerCase().includes(l)) : r, v = i.length >= at;
     return n`
       <div class="filter-content">
         <!-- Search input -->
         <div class="search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="search-input"
             type="text"
-            placeholder="Search options..."
+            placeholder="Search options"
             .value=${this._selectSearches[e] || ""}
             @input=${(d) => {
       this._selectSearches = {
@@ -4279,15 +4315,16 @@ let P = class extends k {
   }
   // ── Render: Multi-select filter ──────────────────────────────────
   _renderMultiSelectFilter(t) {
-    const e = C(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = t.possible_values || [], o = a.operator || Ct[0].value, l = (this._selectSearches[e] || "").toLowerCase(), c = l.length > 0, p = i.length > 0 || s, u = l ? r.filter((d) => d.label.toLowerCase().includes(l)) : r, v = i.length >= at;
+    const e = E(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = t.possible_values || [], o = a.operator || Ct[0].value, l = (this._selectSearches[e] || "").toLowerCase(), c = l.length > 0, p = i.length > 0 || s, u = l ? r.filter((d) => d.label.toLowerCase().includes(l)) : r, v = i.length >= at;
     return n`
       <div class="filter-content">
         <!-- Search input -->
         <div class="search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="search-input"
             type="text"
-            placeholder="Search options..."
+            placeholder="Search options"
             .value=${this._selectSearches[e] || ""}
             @input=${(d) => {
       this._selectSearches = {
@@ -4398,15 +4435,16 @@ let P = class extends k {
   }
   // ── Render: Tags filter ──────────────────────────────────────────
   _renderTagsFilter(t) {
-    const e = C(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = this._tagInputs[e] || "", o = a.operator || ee[0].value, l = i.length > 0 || s, c = this._tagSuggestions[e] || [], p = this._tagLoading[e] || !1, u = r.trim().length > 0, v = i.length >= at;
+    const e = E(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = s ? [] : a.values || [], r = this._tagInputs[e] || "", o = a.operator || ee[0].value, l = i.length > 0 || s, c = this._tagSuggestions[e] || [], p = this._tagLoading[e] || !1, u = r.trim().length > 0, v = i.length >= at;
     return n`
       <div class="filter-content">
         <!-- Search input -->
         <div class="search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="search-input"
             type="text"
-            placeholder="Search tags..."
+            placeholder="Search tags"
             .value=${r}
             @input=${(d) => this._onTagInput(t, e, d)}
             @keydown=${(d) => this._onTagKeydown(t, d)}
@@ -4516,7 +4554,7 @@ let P = class extends k {
   // ── Render: Date filter ──────────────────────────────────────────
   _renderDateFilter(t) {
     var u, v;
-    const e = C(t), a = this._datePresets[e] || "", s = this._getApplied(e), r = this._isSpecialValue(s.values) ? ((u = s.values) == null ? void 0 : u[0]) || "" : a, o = [
+    const e = E(t), a = this._datePresets[e] || "", s = this._getApplied(e), r = this._isSpecialValue(s.values) ? ((u = s.values) == null ? void 0 : u[0]) || "" : a, o = [
       { value: "empty", label: "Empty" },
       { value: "non-empty", label: "Not empty" }
     ], l = this._dateFroms[e] ? new Date(this._dateFroms[e]).toISOString().split("T")[0] : "", c = this._dateTos[e] ? new Date(this._dateTos[e]).toISOString().split("T")[0] : "", p = ["before", "after", "between"].includes(r);
@@ -4597,7 +4635,7 @@ let P = class extends k {
   // ── Render: Geo filter ───────────────────────────────────────────
   _renderGeoFilter(t) {
     var u, v;
-    const e = C(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = this._getContentMode(e);
+    const e = E(t), a = this._getApplied(e), s = this._isSpecialValue(a.values), i = this._getContentMode(e);
     let r = "", o = "";
     if (!s && ((u = a.values) != null && u[0])) {
       const d = a.values[0], [g, b] = d.split("..");
@@ -4615,7 +4653,7 @@ let P = class extends k {
         <div class="filter-section">
           <span class="section-label">Content</span>
           <ap-radio-group
-            .options=${Et}
+            .options=${Ft}
             .value=${i}
             @ap-change=${(d) => this._onContentModeChange(t, d.detail.value)}
           ></ap-radio-group>
@@ -4655,7 +4693,7 @@ let P = class extends k {
   // ── Render: Attachment filter ────────────────────────────────────
   _renderAttachmentFilter(t) {
     var s, i;
-    const e = this._getApplied(C(t)), a = ((s = e.values) == null ? void 0 : s[0]) || "";
+    const e = this._getApplied(E(t)), a = ((s = e.values) == null ? void 0 : s[0]) || "";
     return n`
       <div class="filter-content" style="position: relative;">
         <button
@@ -4676,7 +4714,7 @@ let P = class extends k {
   }
   // ── Render: Face matcher (integer-list with slug face_matcher) ──
   _renderFaceMatcherFilter(t) {
-    const e = C(t), a = this._getApplied(e), s = a.values || [], i = a.operator || w.IS;
+    const e = E(t), a = this._getApplied(e), s = a.values || [], i = a.operator || w.IS;
     return n`
       <div class="filter-content" style="position: relative;">
         <button
@@ -4696,7 +4734,7 @@ let P = class extends k {
           <input
             class="filter-input"
             type="text"
-            placeholder="Search faces..."
+            placeholder="Search faces"
             .value=${s.join(", ")}
             @change=${(r) => {
       const l = r.target.value.split(",").map((c) => c.trim()).filter(Boolean);
@@ -4777,7 +4815,7 @@ let P = class extends k {
     ), a = this._getGroupedFields(e), s = (i, r) => r.length === 0 ? f : n`
         <div class="field-group-label">${i}</div>
         ${r.map((o) => {
-      const l = C(o), c = this.visibleFields.includes(l), p = !!this.appliedMetadata[l] || !!this.appliedFilters[l], u = this.pinnedFields.includes(l), v = !c && this._atFieldLimit;
+      const l = E(o), c = this.visibleFields.includes(l), p = !!this.appliedMetadata[l] || !!this.appliedFilters[l], u = this.pinnedFields.includes(l), v = !c && this._atFieldLimit;
       return n`
             <div
               class="field-item ${p ? "has-filter" : ""} ${v ? "disabled" : ""}"
@@ -4801,15 +4839,18 @@ let P = class extends k {
       `;
     return n`
       <div class="selector-wrap">
-        <input
-          class="field-search"
-          type="text"
-          placeholder="Search fields..."
-          .value=${this._fieldSearch}
-          @input=${(i) => {
+        <div class="field-search-wrapper">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
+          <input
+            class="field-search"
+            type="text"
+            placeholder="Search fields"
+            .value=${this._fieldSearch}
+            @input=${(i) => {
       this._fieldSearch = i.target.value;
     }}
-        />
+          />
+        </div>
         <div class="field-list">
           ${e.length === 0 ? n`<div class="empty-msg">No fields found</div>` : n`${[...a.entries()].map(
       ([i, r]) => s(i, r)
@@ -4852,7 +4893,7 @@ let P = class extends k {
     `;
   }
 };
-P.styles = [ie, oe, $`
+L.styles = [ie, oe, $`
     /* ── Field selection panel ─────────────────────────────── */
 
     .add-field-btn {
@@ -4915,13 +4956,25 @@ P.styles = [ie, oe, $`
       margin: 0;
     }
 
-    .field-search {
+    .field-search-wrapper {
       position: sticky;
       top: 0;
       z-index: 2;
+    }
+
+    .field-search-wrapper .search-icon {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      pointer-events: none;
+    }
+
+    .field-search {
       width: 100%;
       height: 34px;
-      padding: 0 20px;
+      padding: 0 20px 0 32px;
       box-sizing: border-box;
       border: none;
       border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
@@ -4934,6 +4987,7 @@ P.styles = [ie, oe, $`
 
     .field-search::placeholder {
       color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      font-weight: 400;
     }
 
     .field-list {
@@ -5217,72 +5271,72 @@ P.styles = [ie, oe, $`
       background: var(--ap-primary-10, oklch(0.578 0.198 268.129 / 0.1));
     }
   `];
-L([
+I([
   h({ type: Array })
-], P.prototype, "fields", 2);
-L([
+], L.prototype, "fields", 2);
+I([
   h({ type: Object })
-], P.prototype, "appliedFilters", 2);
-L([
+], L.prototype, "appliedFilters", 2);
+I([
   h({ type: Array })
-], P.prototype, "visibleFields", 2);
-L([
+], L.prototype, "visibleFields", 2);
+I([
   h()
-], P.prototype, "mode", 2);
-L([
+], L.prototype, "mode", 2);
+I([
   h()
-], P.prototype, "activeFieldKey", 2);
-L([
+], L.prototype, "activeFieldKey", 2);
+I([
   h({ type: Array })
-], P.prototype, "pinnedFields", 2);
-L([
+], L.prototype, "pinnedFields", 2);
+I([
   h({ type: Object })
-], P.prototype, "appliedMetadata", 2);
-L([
+], L.prototype, "appliedMetadata", 2);
+I([
   h({ attribute: !1 })
-], P.prototype, "apiClient", 2);
-L([
+], L.prototype, "apiClient", 2);
+I([
   y()
-], P.prototype, "_showFieldSelection", 2);
-L([
+], L.prototype, "_showFieldSelection", 2);
+I([
   y()
-], P.prototype, "_fieldSearch", 2);
-L([
+], L.prototype, "_fieldSearch", 2);
+I([
   y()
-], P.prototype, "_collapsedFields", 2);
-L([
+], L.prototype, "_collapsedFields", 2);
+I([
   y()
-], P.prototype, "_tagInputs", 2);
-L([
+], L.prototype, "_tagInputs", 2);
+I([
   y()
-], P.prototype, "_tagSuggestions", 2);
-L([
+], L.prototype, "_tagSuggestions", 2);
+I([
   y()
-], P.prototype, "_tagLoading", 2);
-L([
+], L.prototype, "_tagLoading", 2);
+I([
   y()
-], P.prototype, "_datePresets", 2);
-L([
+], L.prototype, "_datePresets", 2);
+I([
   y()
-], P.prototype, "_dateFroms", 2);
-L([
+], L.prototype, "_dateFroms", 2);
+I([
   y()
-], P.prototype, "_dateTos", 2);
-L([
+], L.prototype, "_dateTos", 2);
+I([
   y()
-], P.prototype, "_specificModeFields", 2);
-L([
+], L.prototype, "_specificModeFields", 2);
+I([
   y()
-], P.prototype, "_selectSearches", 2);
-P = L([
-  S("ap-filter-metadata")
-], P);
+], L.prototype, "_selectSearches", 2);
+L = I([
+  C("ap-filter-metadata")
+], L);
 var bi = Object.defineProperty, _i = Object.getOwnPropertyDescriptor, Z = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? _i(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && bi(e, a, i), i;
 };
-let Y = class extends k {
+let Y = class extends S {
   constructor() {
     super(...arguments), this.selectedStatus = [], this.statusOperator = ":=", this.approverValue = "", this.approverOperator = "~", this.requesterValue = "", this.requesterOperator = "~", this.dueDatePreset = "", this.dueDateFrom = "", this.dueDateTo = "";
   }
@@ -5304,43 +5358,43 @@ let Y = class extends k {
   // ── Status handlers ────────────────────────────────────────────────
   _toggleStatus(t) {
     const e = this.selectedStatus.includes(t) ? this.selectedStatus.filter((a) => a !== t) : [...this.selectedStatus, t];
-    this._emitChange(U.STATUS, e, this.statusOperator);
+    this._emitChange(B.STATUS, e, this.statusOperator);
   }
   _handleStatusOperator(t) {
     const e = t.detail.value;
-    this._emitChange(U.STATUS, this.selectedStatus, e);
+    this._emitChange(B.STATUS, this.selectedStatus, e);
   }
   _clearStatus() {
-    this._emitChange(U.STATUS, [], this.statusOperator);
+    this._emitChange(B.STATUS, [], this.statusOperator);
   }
   // ── Approver handlers ──────────────────────────────────────────────
   _handleApproverInput(t) {
     const e = t.target.value;
-    this._emitChange(U.APPROVER, e ? [e] : [], this.approverOperator);
+    this._emitChange(B.APPROVER, e ? [e] : [], this.approverOperator);
   }
   _handleApproverOperator(t) {
     const e = t.detail.value;
-    this._emitChange(U.APPROVER, this.approverValue ? [this.approverValue] : [], e);
+    this._emitChange(B.APPROVER, this.approverValue ? [this.approverValue] : [], e);
   }
   _clearApprover() {
-    this._emitChange(U.APPROVER, [], this.approverOperator);
+    this._emitChange(B.APPROVER, [], this.approverOperator);
   }
   // ── Requester handlers ─────────────────────────────────────────────
   _handleRequesterInput(t) {
     const e = t.target.value;
-    this._emitChange(U.REQUESTOR, e ? [e] : [], this.requesterOperator);
+    this._emitChange(B.REQUESTOR, e ? [e] : [], this.requesterOperator);
   }
   _handleRequesterOperator(t) {
     const e = t.detail.value;
-    this._emitChange(U.REQUESTOR, this.requesterValue ? [this.requesterValue] : [], e);
+    this._emitChange(B.REQUESTOR, this.requesterValue ? [this.requesterValue] : [], e);
   }
   _clearRequester() {
-    this._emitChange(U.REQUESTOR, [], this.requesterOperator);
+    this._emitChange(B.REQUESTOR, [], this.requesterOperator);
   }
   // ── Due Date handlers ──────────────────────────────────────────────
   _handleDueDatePreset(t) {
     const e = t.detail.value, a = this.dueDatePreset === e ? "" : e;
-    this._emitChange(U.DUE_DATE, a ? [a] : [], ":");
+    this._emitChange(B.DUE_DATE, a ? [a] : [], ":");
   }
   _handleDueDateFrom(t) {
     const e = t.target.value;
@@ -5353,7 +5407,7 @@ let Y = class extends k {
   _clearDueDate() {
     this.dispatchEvent(new CustomEvent("filter-change", {
       detail: {
-        key: U.DUE_DATE,
+        key: B.DUE_DATE,
         values: [],
         operator: ":"
       },
@@ -5365,7 +5419,7 @@ let Y = class extends k {
     const a = [];
     t && a.push(t), e && a.push(e), this.dispatchEvent(new CustomEvent("filter-change", {
       detail: {
-        key: U.DUE_DATE,
+        key: B.DUE_DATE,
         values: a,
         operator: t && e ? ".." : t ? ">=" : "<="
       },
@@ -5461,7 +5515,7 @@ let Y = class extends k {
         <input
           class="filter-input mt-12"
           type="text"
-          placeholder="Enter approver name..."
+          placeholder="Enter approver name"
           .value=${this.approverValue}
           @input=${this._handleApproverInput}
         />
@@ -5492,7 +5546,7 @@ let Y = class extends k {
         <input
           class="filter-input mt-12"
           type="text"
-          placeholder="Enter requester name..."
+          placeholder="Enter requester name"
           .value=${this.requesterValue}
           @input=${this._handleRequesterInput}
         />
@@ -5586,7 +5640,7 @@ Y.styles = [ie, oe, $`
     }
     .condition-label {
       font-weight: 500;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
     }
     .mt-12 {
       margin-top: 12px;
@@ -5620,7 +5674,7 @@ Z([
   h()
 ], Y.prototype, "dueDateTo", 2);
 Y = Z([
-  S("ap-filter-approval")
+  C("ap-filter-approval")
 ], Y);
 var yi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, J = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? xi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
@@ -5635,7 +5689,7 @@ function $i(t) {
     )
   );
 }
-let X = class extends k {
+let X = class extends S {
   constructor() {
     super(...arguments), this.selected = [], this._search = "", this._debouncedSearch = "", this._products = [], this._isLoading = !1, this._showAddList = !1, this._addListText = "";
   }
@@ -5739,6 +5793,7 @@ let X = class extends k {
     return n`
       <div class="filter-content">
         <div class="filter-header">
+          <ap-icon class="search-icon" name="search" .size=${14}></ap-icon>
           <input
             class="product-search"
             type="text"
@@ -5887,9 +5942,18 @@ X.styles = [ie, oe, $`
       margin: -10px -8px 10px;
     }
 
+    .filter-header .search-icon {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      pointer-events: none;
+    }
+
     .product-search {
       width: 100%;
-      padding: 8px 10px;
+      padding: 8px 32px 8px 32px;
       border: none;
       border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
       font-size: var(--ap-font-size-sm, 0.875rem);
@@ -5901,6 +5965,7 @@ X.styles = [ie, oe, $`
 
     .product-search::placeholder {
       color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      font-weight: 400;
     }
 
     .search-clear {
@@ -6111,14 +6176,14 @@ J([
   y()
 ], X.prototype, "_addListText", 2);
 X = J([
-  S("ap-filter-product-ref")
+  C("ap-filter-product-ref")
 ], X);
 var ki = Object.defineProperty, Si = Object.getOwnPropertyDescriptor, O = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Si(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && ki(e, a, i), i;
 };
-let M = class extends k {
+let M = class extends S {
   constructor() {
     super(...arguments), this.totalCount = 0, this.totalFolderCount = 0, this.isLoading = !1, this.showUpload = !1, this.sortBy = "created_at", this.sortDirection = "desc", this.sortOptions = Dt, this.filters = {
       metadata: { pinned: [], visible: [], applied: {} },
@@ -6562,7 +6627,7 @@ M.styles = $`
     .controls {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 0;
     }
 
     /* Filter dropdown trigger */
@@ -6929,14 +6994,14 @@ O([
   y()
 ], M.prototype, "_externalTop", 2);
 M = O([
-  S("ap-content-toolbar")
+  C("ap-content-toolbar")
 ], M);
-var Ci = Object.defineProperty, Fi = Object.getOwnPropertyDescriptor, V = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? Fi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var Ci = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, V = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? Ei(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ci(e, a, i), i;
 };
-let N = class extends k {
+let N = class extends S {
   constructor() {
     super(...arguments), this.appliedFilters = {}, this.appliedMetadata = {}, this.forcedFilters = {}, this.metadataFields = [], this.pinnedFilters = [], this.pinnedMetadataFields = [], this.tags = [], this.labels = [], this.activeFilter = null, this.activeMetadataField = null, this.pendingFilter = null, this.pendingMetadataField = null;
   }
@@ -7129,7 +7194,7 @@ let N = class extends k {
     `;
   }
   render() {
-    const t = Ue(this.forcedFilters), e = new Set(Object.keys(t)), a = Object.keys(this.appliedFilters).filter((g) => !e.has(g)), s = Object.keys(this.appliedMetadata), i = new Set(this.pinnedFilters), r = new Set(this.pinnedMetadataFields), o = this.pinnedFilters.filter((g) => !e.has(g)), l = a.filter((g) => !i.has(g)), c = s.filter((g) => !r.has(g)), p = this.pendingFilter && !i.has(this.pendingFilter) && !(this.pendingFilter in this.appliedFilters), u = this.pendingMetadataField && !r.has(this.pendingMetadataField) && !(this.pendingMetadataField in this.appliedMetadata), v = a.length + s.length > 0;
+    const t = Be(this.forcedFilters), e = new Set(Object.keys(t)), a = Object.keys(this.appliedFilters).filter((g) => !e.has(g)), s = Object.keys(this.appliedMetadata), i = new Set(this.pinnedFilters), r = new Set(this.pinnedMetadataFields), o = this.pinnedFilters.filter((g) => !e.has(g)), l = a.filter((g) => !i.has(g)), c = s.filter((g) => !r.has(g)), p = this.pendingFilter && !i.has(this.pendingFilter) && !(this.pendingFilter in this.appliedFilters), u = this.pendingMetadataField && !r.has(this.pendingMetadataField) && !(this.pendingMetadataField in this.appliedMetadata), v = a.length + s.length > 0;
     return e.size + o.length + this.pinnedMetadataFields.length + l.length + c.length + (p ? 1 : 0) + (u ? 1 : 0) === 0 ? f : n`
       <div class="chips-row">
         <div class="chips">
@@ -7184,7 +7249,7 @@ N.styles = $`
     .chips {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 12px;
       overflow-x: auto;
       scrollbar-width: none;
       min-width: 0;
@@ -7353,15 +7418,15 @@ V([
   h()
 ], N.prototype, "pendingMetadataField", 2);
 N = V([
-  S("ap-filters-bar")
+  C("ap-filters-bar")
 ], N);
-var Ei = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, Ee = (t, e, a, s) => {
+var Fi = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, Fe = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Ai(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
-  return s && i && Ei(e, a, i), i;
+  return s && i && Fi(e, a, i), i;
 };
 const Ti = 6;
-let se = class extends k {
+let se = class extends S {
   constructor() {
     super(...arguments), this.assets = [], this.folders = [], this.folderPreviews = {}, this.selectedIds = [], this.isLoading = !1, this.multiSelect = !0, this._prevCount = 0;
   }
@@ -7416,7 +7481,7 @@ se.styles = $`
     .grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 20px 24px;
+      gap: 24px;
     }
     .ghost-card {
       aspect-ratio: 6/4;
@@ -7438,26 +7503,26 @@ se.styles = $`
       .ghost-card { animation: none; }
     }
   `;
-Ee([
+Fe([
   h({ type: Array })
 ], se.prototype, "assets", 2);
-Ee([
+Fe([
   h({ type: Array })
 ], se.prototype, "folders", 2);
-Ee([
+Fe([
   h({ type: Object })
 ], se.prototype, "folderPreviews", 2);
-Ee([
+Fe([
   h({ type: Array })
 ], se.prototype, "selectedIds", 2);
-Ee([
+Fe([
   h({ type: Boolean })
 ], se.prototype, "isLoading", 2);
-Ee([
+Fe([
   h({ type: Boolean })
 ], se.prototype, "multiSelect", 2);
-se = Ee([
-  S("ap-grid-view")
+se = Fe([
+  C("ap-grid-view")
 ], se);
 var Mi = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, ge = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Oi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
@@ -7465,7 +7530,7 @@ var Mi = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, ge = (t, e
   return s && i && Mi(e, a, i), i;
 };
 const Pi = 5;
-let Q = class extends k {
+let Q = class extends S {
   constructor() {
     super(...arguments), this.assets = [], this.folders = [], this.selectedIds = [], this.isLoading = !1, this.multiSelect = !0, this.totalCount = 0, this.isSelectingAll = !1;
   }
@@ -7539,7 +7604,7 @@ Q.styles = $`
       padding: 8px 12px;
       font-size: 14px;
       font-weight: 400;
-      color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
+      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
       border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
     }
     .list-header:not(.has-checkbox) {
@@ -7625,7 +7690,7 @@ ge([
   h({ type: Boolean })
 ], Q.prototype, "isSelectingAll", 2);
 Q = ge([
-  S("ap-list-view")
+  C("ap-list-view")
 ], Q);
 function ct(t) {
   var s;
@@ -7794,7 +7859,7 @@ function Ot(t) {
   return e.length > 1 ? e[1] : e[0];
 }
 const zi = /* @__PURE__ */ new Set(["png", "svg", "webp", "gif", "avif"]);
-function Bt(t) {
+function Ut(t) {
   const e = (t == null ? void 0 : t.toLowerCase().replace(".", "")) || "";
   return zi.has(e);
 }
@@ -7803,7 +7868,7 @@ var Ri = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, Ze = (t, e
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ri(e, a, i), i;
 };
-let $e = class extends k {
+let $e = class extends S {
   constructor() {
     super(...arguments), this.index = 0, this.selected = !1, this.multiSelect = !0;
   }
@@ -7830,7 +7895,7 @@ let $e = class extends k {
   }
   _formatDuration(t) {
     const e = Math.floor(t / 3600), a = Math.floor(t % 3600 / 60), s = Math.floor(t % 60), i = (r) => String(r).padStart(2, "0");
-    return e > 0 ? `${e}:${i(a)}:${i(s)}` : `${a}:${i(s)}`;
+    return e > 0 ? `${e}:${i(a)}:${i(s)}` : `${i(a)}:${i(s)}`;
   }
   _handleQuickSelect(t) {
     t.stopPropagation(), this.dispatchEvent(new CustomEvent("asset-quick-select", {
@@ -7839,13 +7904,13 @@ let $e = class extends k {
     }));
   }
   render() {
-    var c, p, u, v;
+    var c, p, u, v, d;
     const t = this.asset;
     if (!t) return n``;
     const a = Oe(t.type) === "video", s = ((c = t.extension) == null ? void 0 : c.toLowerCase()) === "pdf", i = $a(t.extension || "");
     let r = "";
     a ? r = xa(t) : s ? r = Nt(t) : i && (r = ct(t));
-    const o = yt(t.extension || ""), l = Bt(t.extension || "");
+    const o = yt(t.extension || ""), l = Ut(t.extension || "");
     return n`
       <div class="card" @click=${this._handleSelect}>
         <div class="thumbnail ${l && r ? "chess" : ""}">
@@ -7854,20 +7919,20 @@ let $e = class extends k {
                 alt=${t.name}
                 loading="lazy"
                 class="thumb-img ${l ? "transparent-asset" : ""}"
-                @error=${(d) => {
-      const g = d.target, b = Ke();
-      g.src !== o && g.src !== b ? (g.src = o, g.classList.add("icon-fallback")) : g.src !== b && (g.src = b);
+                @error=${(g) => {
+      const b = g.target, k = Ke();
+      b.src !== o && b.src !== k ? (b.src = o, b.classList.add("icon-fallback")) : b.src !== k && (b.src = k);
     }}
               />` : n`<img
                 src=${o}
                 alt=${t.name}
                 class="thumb-img icon-fallback"
-                @error=${(d) => {
-      const g = d.target, b = Ke();
-      g.src !== b && (g.src = b);
+                @error=${(g) => {
+      const b = g.target, k = Ke();
+      b.src !== k && (b.src = k);
     }}
               />`}
-          ${a && ((p = t.info) != null && p.duration) ? n`<span class="duration">${this._formatDuration(t.info.duration)}</span>` : f}
+          ${a && (((p = t.info) == null ? void 0 : p.video_duration) ?? ((u = t.info) == null ? void 0 : u.duration)) != null ? n`<span class="duration">${this._formatDuration(t.info.video_duration ?? t.info.duration)}</span>` : f}
           <div class="overlay">
             <button class="overlay-btn" @click=${this._handlePreview} aria-label="Preview">
               <ap-icon name="preview" .size=${16}></ap-icon>
@@ -7890,11 +7955,11 @@ let $e = class extends k {
         </div>
         <div class="info">
           <div class="name" title=${t.name}>${t.name}</div>
-          <div class="meta">${(u = t.extension) == null ? void 0 : u.toUpperCase()}${(() => {
-      var E, _, A, F;
-      const d = ((E = t.info) == null ? void 0 : E.img_w) || ((_ = t.info) == null ? void 0 : _.video_w), g = ((A = t.info) == null ? void 0 : A.img_h) || ((F = t.info) == null ? void 0 : F.video_h), b = wa(d, g);
-      return b ? ` · ${b}` : "";
-    })()} · ${jt(((v = t.size) == null ? void 0 : v.bytes) || 0)}</div>
+          <div class="meta">${(v = t.extension) == null ? void 0 : v.toUpperCase()}${(() => {
+      var _, A, F, P;
+      const g = ((_ = t.info) == null ? void 0 : _.img_w) || ((A = t.info) == null ? void 0 : A.video_w), b = ((F = t.info) == null ? void 0 : F.img_h) || ((P = t.info) == null ? void 0 : P.video_h), k = wa(g, b);
+      return k ? ` · ${k}` : "";
+    })()} · ${jt(((d = t.size) == null ? void 0 : d.bytes) || 0)}</div>
         </div>
       </div>
     `;
@@ -8006,7 +8071,7 @@ $e.styles = $`
     }
     .name {
       font-size: var(--ap-font-size-sm, 0.875rem);
-      font-weight: 500;
+      font-weight: 400;
       color: var(--ap-foreground, oklch(0.37 0.022 248.413));
       white-space: nowrap;
       overflow: hidden;
@@ -8035,6 +8100,9 @@ $e.styles = $`
       transition: all 150ms;
       background: var(--ap-background, oklch(1 0 0));
     }
+    .check:hover .check-box {
+      border-color: var(--ap-secondary-foreground-50, oklch(53.03% 0.039 249.89 / 0.5));
+    }
     :host([selected]) .check-box {
       background: var(--ap-primary, oklch(0.578 0.198 268.129));
       border-color: var(--ap-primary, oklch(0.578 0.198 268.129));
@@ -8060,8 +8128,8 @@ $e.styles = $`
     }
     .duration {
       position: absolute;
-      bottom: 6px;
-      left: 6px;
+      bottom: 8px;
+      right: 12px;
       z-index: 1;
       padding: 2px 6px;
       border-radius: 4px;
@@ -8090,14 +8158,14 @@ Ze([
   h({ type: Boolean })
 ], $e.prototype, "multiSelect", 2);
 $e = Ze([
-  S("ap-asset-card")
+  C("ap-asset-card")
 ], $e);
-var ji = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, Je = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? Bi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var ji = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, Je = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? Ui(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && ji(e, a, i), i;
 };
-let ke = class extends k {
+let ke = class extends S {
   constructor() {
     super(...arguments), this.index = 0, this.selected = !1, this.multiSelect = !0;
   }
@@ -8129,7 +8197,7 @@ let ke = class extends k {
     const a = Oe(t.type) === "video", s = ((c = t.extension) == null ? void 0 : c.toLowerCase()) === "pdf", i = $a(t.extension || "");
     let r = "";
     a ? r = xa(t) : s ? r = Nt(t) : i && (r = ct(t));
-    const o = yt(t.extension || ""), l = Bt(t.extension || "");
+    const o = yt(t.extension || ""), l = Ut(t.extension || "");
     return n`
       <div class="row" @click=${this._handleSelect}>
         ${this.multiSelect ? n`
@@ -8221,7 +8289,7 @@ ke.styles = $`
     }
     .name {
       font-size: var(--ap-font-size-sm, 0.875rem);
-      font-weight: 500;
+      font-weight: 400;
       color: var(--ap-foreground, oklch(0.37 0.022 248.413));
       white-space: nowrap;
       overflow: hidden;
@@ -8229,14 +8297,14 @@ ke.styles = $`
     }
     .type {
       font-size: 0.8125rem;
-      color: var(--ap-foreground, oklch(0.37 0.022 248.413));
+      color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     .desc, .date {
       font-size: 0.8125rem;
-      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -8288,6 +8356,9 @@ ke.styles = $`
       transition: all 150ms;
       background: var(--ap-background, oklch(1 0 0));
     }
+    .check:hover .check-box {
+      border-color: var(--ap-secondary-foreground-50, oklch(53.03% 0.039 249.89 / 0.5));
+    }
     :host([selected]) .check-box {
       background: var(--ap-primary, oklch(0.578 0.198 268.129));
       border-color: var(--ap-primary, oklch(0.578 0.198 268.129));
@@ -8313,14 +8384,14 @@ Je([
   h({ type: Boolean })
 ], ke.prototype, "multiSelect", 2);
 ke = Je([
-  S("ap-asset-row")
+  C("ap-asset-row")
 ], ke);
-var Ui = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, Ut = (t, e, a, s) => {
+var Bi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, Bt = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Vi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
-  return s && i && Ui(e, a, i), i;
+  return s && i && Bi(e, a, i), i;
 };
-let Ge = class extends k {
+let Ge = class extends S {
   constructor() {
     super(...arguments), this.previews = [];
   }
@@ -8367,7 +8438,7 @@ let Ge = class extends k {
   }
   _renderPreviews() {
     if (this.previews.length === 0)
-      return n`<div class="empty-preview"><ap-icon name="folder" .size=${48}></ap-icon></div>`;
+      return n`<div class="empty-preview"><ap-icon name="inbox" .size=${64}></ap-icon></div>`;
     const t = this.previews.slice(0, 3);
     return t.length === 1 ? n`<div class="preview-left">${this._renderPreviewImg(t[0])}</div>` : n`
       <div class="preview-grid">
@@ -8391,14 +8462,10 @@ let Ge = class extends k {
           <path d="M 3,0 L 30,0 L 43.5,0 Q 45,0 46.5,3 L 51,12 L 97,12 Q 100,12 100,15 L 100,97 Q 100,100 97,100 L 3,100 Q 0,100 0,97 L 0,3 Q 0,0 3,0 Z"
                 fill="#E3E8ED" rx="3" ry="3" />
         </svg>
-        <!-- Hover overlay with same folder shape -->
-        <svg class="hover-overlay" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <path d="M 3,0 L 30,0 L 43.5,0 Q 45,0 46.5,3 L 51,12 L 97,12 Q 100,12 100,15 L 100,97 Q 100,100 97,100 L 3,100 Q 0,100 0,97 L 0,3 Q 0,0 3,0 Z"
-                fill="#F3F7FA" />
-        </svg>
         <div class="card-content">
           <!-- Preview images -->
           <div class="preview-container">
+            <div class="preview-overlay"></div>
             ${this._renderPreviews()}
           </div>
           <!-- Info section inside the card shape -->
@@ -8423,9 +8490,6 @@ Ge.styles = [ie, $`
       aspect-ratio: 4/3;
       cursor: pointer;
     }
-    .card:hover .hover-overlay {
-      opacity: 0.9;
-    }
     /* Folder shape SVG fills card */
     .folder-svg {
       position: absolute;
@@ -8433,27 +8497,32 @@ Ge.styles = [ie, $`
       width: 100%;
       height: 100%;
     }
-    .hover-overlay {
+    .preview-overlay {
       position: absolute;
       inset: 0;
-      width: 100%;
-      height: 100%;
       z-index: 2;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 4px;
       opacity: 0;
-      transition: opacity 200ms;
+      transition: opacity 150ms;
       pointer-events: none;
     }
+    .card:hover .preview-overlay {
+      opacity: 1;
+    }
     .card-content {
       position: absolute;
       top: 16%;
       left: 3.5%;
       width: 93%;
-      bottom: 3%;
+      bottom: 0;
       z-index: 1;
       display: flex;
       flex-direction: column;
+      padding-bottom: 12px;
     }
     .preview-container {
+      position: relative;
       flex: 1;
       min-height: 0;
       display: flex;
@@ -8519,7 +8588,9 @@ Ge.styles = [ie, $`
       justify-content: center;
       width: 100%;
       height: 100%;
-      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      background: var(--ap-muted, oklch(0.974 0.006 239.819));
+      border-radius: 4px;
+      color: var(--ap-input, oklch(0.871 0.016 241.798));
     }
     .info {
       flex-shrink: 0;
@@ -8537,25 +8608,25 @@ Ge.styles = [ie, $`
       display: flex;
       justify-content: space-between;
       font-size: 0.75rem;
-      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
-      margin-top: 2px;
+      color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
+      margin-top: 6px;
     }
   `];
-Ut([
+Bt([
   h({ type: Object })
 ], Ge.prototype, "folder", 2);
-Ut([
+Bt([
   h({ type: Array })
 ], Ge.prototype, "previews", 2);
-Ge = Ut([
-  S("ap-folder-card")
+Ge = Bt([
+  C("ap-folder-card")
 ], Ge);
 var qi = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, Sa = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Hi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && qi(e, a, i), i;
 };
-let pt = class extends k {
+let pt = class extends S {
   _handleOpen() {
     this.dispatchEvent(new CustomEvent("folder-open", {
       detail: { folder: this.folder },
@@ -8568,6 +8639,7 @@ let pt = class extends k {
     const t = this.folder;
     return t ? n`
       <div class="row" @click=${this._handleOpen}>
+        <div></div>
         <div class="icon"><ap-icon name="folder" .size=${22}></ap-icon></div>
         <div class="name">${t.name}</div>
         <div class="meta">Folder</div>
@@ -8584,7 +8656,7 @@ pt.styles = $`
     }
     .row {
       display: grid;
-      grid-template-columns: 48px 1fr 100px 200px 120px 60px;
+      grid-template-columns: 32px 48px 1fr 100px 200px 120px 60px;
       gap: 12px;
       padding: 8px 12px;
       align-items: center;
@@ -8596,33 +8668,33 @@ pt.styles = $`
       background: var(--ap-muted, oklch(0.974 0.006 239.819));
     }
     .icon {
-      color: var(--ap-primary, oklch(0.578 0.198 268.129));
+      color: var(--ap-input, oklch(0.871 0.016 241.798));
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .name {
       font-size: var(--ap-font-size-sm, 0.875rem);
-      font-weight: 500;
+      font-weight: 400;
       color: var(--ap-foreground, oklch(0.37 0.022 248.413));
     }
     .meta {
       font-size: 0.8125rem;
-      color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+      color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
     }
   `;
 Sa([
   h({ type: Object })
 ], pt.prototype, "folder", 2);
 pt = Sa([
-  S("ap-folder-row")
+  C("ap-folder-row")
 ], pt);
 var Ki = Object.defineProperty, Gi = Object.getOwnPropertyDescriptor, Ca = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Gi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Ki(e, a, i), i;
 };
-let ht = class extends k {
+let ht = class extends S {
   constructor() {
     super(...arguments), this.variant = "grid";
   }
@@ -8654,7 +8726,7 @@ ht.styles = $`
     .grid-skeleton {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 20px 24px;
+      gap: 24px;
     }
     .card-skel {
       aspect-ratio: 6/4;
@@ -8673,7 +8745,7 @@ Ca([
   h()
 ], ht.prototype, "variant", 2);
 ht = Ca([
-  S("ap-skeleton")
+  C("ap-skeleton")
 ], ht);
 function Yi(t) {
   var i, r;
@@ -8687,7 +8759,7 @@ var Xi = Object.defineProperty, Wi = Object.getOwnPropertyDescriptor, z = (t, e,
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Xi(e, a, i), i;
 };
-let D = class extends k {
+let D = class extends S {
   constructor() {
     super(...arguments), this.asset = null, this.assets = [], this.selectedIds = [], this.containerToken = "", this.showMetadata = !0, this.metadataFields = [], this.labels = [], this.regionalFilters = {}, this.multiSelect = !0, this._isFullscreen = !1, this._fsImageLoaded = !1, this._previewLoading = !1, this._openSections = /* @__PURE__ */ new Set(["file-info", "metadata"]), this._hls = null;
   }
@@ -8923,9 +8995,9 @@ let D = class extends k {
     `;
   }
   _getFileInfoRows(t) {
-    var a, s, i, r, o;
+    var a, s, i, r, o, l;
     const e = [];
-    return e.push({ label: "File name", value: t.name }), t.extension && e.push({ label: "Type", value: t.extension.toUpperCase() }), (a = t.size) != null && a.bytes && e.push({ label: "Size", value: jt(t.size.bytes) }), (s = t.info) != null && s.img_w && e.push({ label: "Dimensions", value: wa(t.info.img_w, t.info.img_h) }), (i = t.info) != null && i.video_w && e.push({ label: "Video resolution", value: `${t.info.video_w} x ${t.info.video_h}` }), (r = t.info) != null && r.duration && e.push({ label: "Duration", value: `${Math.round(t.info.duration)}s` }), (o = t.info) != null && o.color_space && e.push({ label: "Color space", value: t.info.color_space }), t.created_at && e.push({ label: "Created", value: dt(t.created_at) }), t.modified_at && e.push({ label: "Modified", value: dt(t.modified_at) }), e;
+    return e.push({ label: "File name", value: t.name }), t.extension && e.push({ label: "Type", value: t.extension.toUpperCase() }), (a = t.size) != null && a.bytes && e.push({ label: "Size", value: jt(t.size.bytes) }), (s = t.info) != null && s.img_w && e.push({ label: "Dimensions", value: wa(t.info.img_w, t.info.img_h) }), (i = t.info) != null && i.video_w && e.push({ label: "Video resolution", value: `${t.info.video_w} x ${t.info.video_h}` }), (((r = t.info) == null ? void 0 : r.video_duration) ?? ((o = t.info) == null ? void 0 : o.duration)) != null && e.push({ label: "Duration", value: `${Math.round(t.info.video_duration ?? t.info.duration)}s` }), (l = t.info) != null && l.color_space && e.push({ label: "Color space", value: t.info.color_space }), t.created_at && e.push({ label: "Created", value: dt(t.created_at) }), t.modified_at && e.push({ label: "Modified", value: dt(t.modified_at) }), e;
   }
   /**
    * Build a lookup map from metadata field key → field definition.
@@ -9048,7 +9120,7 @@ let D = class extends k {
   _renderTagsRow(t) {
     const e = this._getTagEntries(t.tags);
     return e.length === 0 ? f : n`
-      <div class="meta-row" style="flex-direction:column;gap:6px">
+      <div class="meta-row">
         <span class="meta-label">Tags</span>
         <div class="tags-list">
           ${e.map((a) => n`
@@ -9059,21 +9131,22 @@ let D = class extends k {
     `;
   }
   render() {
-    var H, T, R, B, ne, fe, Ae, et;
+    var H, T, R, U, ne, fe, Ae, et;
     const t = this.asset;
     if (!t) return f;
-    const e = Oe(t.type), a = e === "image", s = e === "video", i = e === "audio", r = ((H = t.extension) == null ? void 0 : H.toLowerCase()) === "pdf", o = yt(t.extension || ""), l = Bt(t.extension || ""), c = ((T = t.extension) == null ? void 0 : T.toLowerCase()) === "svg", p = ct(t), u = a ? c ? ((R = t.url) == null ? void 0 : R.cdn) || "" : p || Ie(((B = t.url) == null ? void 0 : B.cdn) || "", this.containerToken) : "", v = a ? this._getFullscreenImageUrl(t) : "", d = a && !c ? this._getBlurDimensions(t) : null, g = s && ((ne = t.url) == null ? void 0 : ne.cdn) || "", b = s && (((fe = t.info) == null ? void 0 : fe.video_thumbnail) || ((Ae = t.info) == null ? void 0 : Ae.preview)) || "", E = r && !a ? Nt(t) : "", _ = this._getCurrentIndex(), A = _ > 0 && this._findNavTarget(_, -1) >= 0, F = _ >= 0 && this._findNavTarget(_, 1) >= 0, I = this.assets.length > 1;
+    const e = Oe(t.type), a = e === "image", s = e === "video", i = e === "audio", r = ((H = t.extension) == null ? void 0 : H.toLowerCase()) === "pdf", o = yt(t.extension || ""), l = Ut(t.extension || ""), c = ((T = t.extension) == null ? void 0 : T.toLowerCase()) === "svg", p = ct(t), u = a ? c ? ((R = t.url) == null ? void 0 : R.cdn) || "" : p || Ie(((U = t.url) == null ? void 0 : U.cdn) || "", this.containerToken) : "", v = a ? this._getFullscreenImageUrl(t) : "", d = a && !c ? this._getBlurDimensions(t) : null, g = s && ((ne = t.url) == null ? void 0 : ne.cdn) || "", b = s && (((fe = t.info) == null ? void 0 : fe.video_thumbnail) || ((Ae = t.info) == null ? void 0 : Ae.preview)) || "", k = r && !a ? Nt(t) : "", _ = this._getCurrentIndex(), A = _ > 0 && this._findNavTarget(_, -1) >= 0, F = _ >= 0 && this._findNavTarget(_, 1) >= 0, P = this.assets.length > 1;
     return n`
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title" title=${t.name}>${t.name}</span>
           <div class="header-actions">
-            <button class="icon-btn" @click=${this._fullscreen} ?disabled=${!a && !s && !i && !r} aria-label="Fullscreen">
+            <button class="icon-btn" @click=${this._fullscreen} ?disabled=${!a && !s && !i && !r} aria-label="Fullscreen" title="Full screen">
               <ap-icon name="fullscreen" .size=${16}></ap-icon>
             </button>
-            <button class="icon-btn ${this.asset && this.selectedIds.includes(this.asset.uuid) ? "selected" : ""}" @click=${this._select} aria-label="Select">
+            <button class="icon-btn ${this.asset && this.selectedIds.includes(this.asset.uuid) ? "selected" : ""}" @click=${this._select} aria-label="Select" title="Select the asset">
               <ap-icon name="select" .size=${16}></ap-icon>
             </button>
+            <div class="header-divider"></div>
             <button class="icon-btn" @click=${this._close} aria-label="Close">
               <ap-icon name="close" .size=${16}></ap-icon>
             </button>
@@ -9081,7 +9154,7 @@ let D = class extends k {
         </div>
 
         <div class="preview-area ${a && l ? "chess" : ""}">
-          ${I ? n`
+          ${P ? n`
             <button class="nav-btn prev" @click=${this._prev} ?disabled=${!A} aria-label="Previous">
               <ap-icon name="chevron-left" .size=${16}></ap-icon>
             </button>
@@ -9125,7 +9198,7 @@ let D = class extends k {
               />
             </div>
           ` : f}
-          ${s ? n`<video src=${g} poster=${b || f} controls @loadeddata=${() => {
+          ${s ? n`<video src=${g} poster=${b || f} controls controlsList="nofullscreen" @loadeddata=${() => {
       this._previewLoading = !1;
     }} @error=${() => {
       this._previewLoading = !1;
@@ -9133,9 +9206,9 @@ let D = class extends k {
           ${i ? n`<audio src=${((et = t.url) == null ? void 0 : et.cdn) || ""} controls></audio>` : f}
           ${r && !a ? n`
             <img
-              src=${E || o}
+              src=${k || o}
               alt=${t.name}
-              class=${E ? "" : "icon-fallback"}
+              class=${k ? "" : "icon-fallback"}
               @error=${(ve) => {
       const me = ve.target;
       me.src !== o && (me.src = o, me.classList.add("icon-fallback"));
@@ -9178,11 +9251,13 @@ D.styles = $`
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 16px;
-      border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
+      gap: 12px;
+      height: 50px;
+      min-height: 50px;
+      padding: 0 16px;
     }
     .panel-title {
-      font-size: var(--ap-font-size-base, 1rem);
+      font-size: 14px;
       font-weight: 600;
       color: var(--ap-foreground, oklch(0.37 0.022 248.413));
       white-space: nowrap;
@@ -9192,8 +9267,15 @@ D.styles = $`
     }
     .header-actions {
       display: flex;
+      align-items: center;
       gap: 4px;
     }
+    .header-divider {
+      width: 1px;
+      height: 16px;
+      background: var(--ap-border, oklch(92.86% 0.009 247.92));
+      margin: 0 2px;
+    }
     .icon-btn {
       display: flex;
       align-items: center;
@@ -9388,7 +9470,7 @@ D.styles = $`
     .tags-list {
       display: flex;
       flex-wrap: wrap;
-      gap: 4px;
+      gap: 8px;
     }
     .tag-link {
       cursor: pointer;
@@ -9398,9 +9480,6 @@ D.styles = $`
       opacity: 0.75;
     }
     /* Accordion styles */
-    .accordion {
-      border-top: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
-    }
     .accordion-trigger {
       display: flex;
       align-items: center;
@@ -9437,10 +9516,6 @@ D.styles = $`
       display: flex;
       gap: 12px;
       padding: 6px 0;
-      border-bottom: 1px solid var(--ap-border, oklch(92.86% 0.009 247.92));
-    }
-    .meta-row:last-child {
-      border-bottom: none;
     }
     .meta-label {
       font-size: 0.8125rem;
@@ -9509,207 +9584,24 @@ z([
   y()
 ], D.prototype, "_openSections", 2);
 D = z([
-  S("ap-preview-panel")
+  C("ap-preview-panel")
 ], D);
-var Qi = Object.defineProperty, Zi = Object.getOwnPropertyDescriptor, Ne = (t, e, a, s) => {
+var Qi = Object.defineProperty, Zi = Object.getOwnPropertyDescriptor, Vt = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? Zi(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && Qi(e, a, i), i;
 };
-let he = class extends k {
-  constructor() {
-    super(...arguments), this.selectedAssets = [], this.totalCount = 0, this.isSelectingAll = !1, this.multiSelect = !0;
-  }
-  _confirm() {
-    this.dispatchEvent(new CustomEvent("selection-confirm", {
-      detail: { assets: this.selectedAssets },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  _clear() {
-    this.dispatchEvent(new CustomEvent("selection-clear", { bubbles: !0, composed: !0 }));
-  }
-  _selectAll() {
-    this.dispatchEvent(new CustomEvent("select-all", { bubbles: !0, composed: !0 }));
-  }
-  render() {
-    return this.selectedAssets.length === 0 ? f : n`
-      <div class="bar">
-        <span class="count">${this.selectedAssets.length} selected</span>
-        <span class="select-label">Select:</span>
-        ${this.multiSelect && this.selectedAssets.length < this.totalCount && (!this.maxSelections || this.selectedAssets.length < this.maxSelections) ? n`<button
-              class="bar-link"
-              ?disabled=${this.isSelectingAll}
-              @click=${this._selectAll}
-            >${this.isSelectingAll ? "Selecting..." : this.maxSelections && this.maxSelections < this.totalCount ? `First ${this.maxSelections}` : "All assets"}</button>` : f}
-        <button class="bar-link" @click=${this._clear}>None</button>
-        ${this.maxSelections && this.selectedAssets.length >= this.maxSelections ? n`<span class="limit-notice">Max ${this.maxSelections} allowed</span>` : f}
-        <div class="spacer"></div>
-        <div class="actions">
-          <button class="btn btn-primary" @click=${this._confirm}>Confirm</button>
-        </div>
-      </div>
-    `;
-  }
-};
-he.styles = $`
-    :host {
-      display: block;
-    }
-    .bar {
-      display: flex;
-      align-items: center;
-      padding: 12px 20px;
-      background: var(--ap-primary, oklch(0.578 0.198 268.129));
-      animation: ap-bar-in 250ms ease-out;
-    }
-    @keyframes ap-bar-in {
-      from { transform: translateY(100%); }
-      to { transform: translateY(0); }
-    }
-    .count {
-      font-size: var(--ap-font-size-sm, 0.875rem);
-      font-weight: 400;
-      color: var(--ap-primary-foreground, oklch(1 0 0));
-      white-space: nowrap;
-    }
-    .select-label {
-      font-size: var(--ap-font-size-sm, 0.875rem);
-      color: oklch(1 0 0 / 0.7);
-      margin-left: 24px;
-      white-space: nowrap;
-    }
-    .bar-link {
-      font-size: var(--ap-font-size-sm, 0.875rem);
-      color: var(--ap-primary-foreground, oklch(1 0 0));
-      background: none;
-      border: none;
-      cursor: pointer;
-      padding: 0;
-      margin-left: 8px;
-      font-weight: 600;
-      font-family: var(--ap-font-family, system-ui, sans-serif);
-      white-space: nowrap;
-    }
-    .bar-link:hover {
-      text-decoration: underline;
-    }
-    .bar-link:disabled {
-      opacity: 0.5;
-      cursor: default;
-      text-decoration: none;
-    }
-    .limit-notice {
-      font-size: var(--ap-font-size-xs, 0.75rem);
-      color: oklch(1 0 0 / 0.7);
-      margin-left: 8px;
-      white-space: nowrap;
-    }
-    .spacer {
-      flex: 1;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-    }
-    .btn {
-      padding: 8px 20px;
-      border: none;
-      border-radius: var(--ap-radius-sm, 6px);
-      font-size: var(--ap-font-size-sm, 0.875rem);
-      font-weight: 500;
-      cursor: pointer;
-      transition: opacity 100ms;
-      font-family: var(--ap-font-family, system-ui, sans-serif);
-    }
-    .btn:hover {
-      opacity: 0.9;
-    }
-    .btn-primary {
-      background: transparent;
-      color: var(--ap-primary-foreground, oklch(1 0 0));
-      border: 1px solid var(--ap-primary-foreground, oklch(1 0 0));
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .bar { animation: none; }
-    }
-  `;
-Ne([
-  h({ type: Array })
-], he.prototype, "selectedAssets", 2);
-Ne([
-  h({ type: Number })
-], he.prototype, "totalCount", 2);
-Ne([
-  h({ type: Boolean })
-], he.prototype, "isSelectingAll", 2);
-Ne([
-  h({ type: Boolean })
-], he.prototype, "multiSelect", 2);
-Ne([
-  h({ type: Number })
-], he.prototype, "maxSelections", 2);
-he = Ne([
-  S("ap-selection-bar")
-], he);
-var Ji = Object.defineProperty, er = Object.getOwnPropertyDescriptor, Vt = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? er(e, a) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
-  return s && i && Ji(e, a, i), i;
-};
-let Ye = class extends k {
-  constructor() {
-    super(...arguments), this.active = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 };
-  }
-  render() {
-    return !this.active || this.rect.width < 5 || this.rect.height < 5 ? f : n`
-      <div
-        class="marquee"
-        style="left:${this.rect.x}px;top:${this.rect.y}px;width:${this.rect.width}px;height:${this.rect.height}px"
-      ></div>
-    `;
-  }
-};
-Ye.styles = $`
-    :host {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      min-height: 100%;
-      pointer-events: none;
-      z-index: 10;
-    }
-    .marquee {
-      position: absolute;
-      border: 2px solid var(--ap-primary, oklch(0.578 0.198 268.129));
-      background: var(--ap-primary-10, oklch(0.578 0.198 268.129 / 0.1));
-      border-radius: 2px;
-    }
-  `;
-Vt([
-  h({ type: Boolean })
-], Ye.prototype, "active", 2);
-Vt([
-  h({ type: Object })
-], Ye.prototype, "rect", 2);
-Ye = Vt([
-  S("ap-marquee-overlay")
-], Ye);
-var tr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, qt = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? ar(e, a) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
-  return s && i && tr(e, a, i), i;
-};
-const sr = {
+const Ji = {
   // ── Navigation & Actions ────────────────────────────────────────────
   search: [
     { tag: "circle", attrs: { cx: "11", cy: "11", r: "8" } },
     { tag: "path", attrs: { d: "m21 21-4.3-4.3" } }
   ],
   check: "M20 6 9 17l-5-5",
+  "check-check": [
+    { tag: "path", attrs: { d: "M18 6 7 17l-5-5" } },
+    { tag: "path", attrs: { d: "m22 10-7.5 7.5L13 16" } }
+  ],
   close: [
     { tag: "path", attrs: { d: "M18 6 6 18" } },
     { tag: "path", attrs: { d: "m6 6 12 12" } }
@@ -9860,6 +9752,10 @@ const sr = {
   // ── Folders ─────────────────────────────────────────────────────────
   folder: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
   "folder-open": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+  inbox: [
+    { tag: "path", attrs: { d: "M22 12L16 12L14 15L10 15L8 12L2 12" } },
+    { tag: "path", attrs: { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" } }
+  ],
   // ── Labels & Tags ──────────────────────────────────────────────────
   tags: [
     { tag: "path", attrs: { d: "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z" } },
@@ -10026,6 +9922,11 @@ const sr = {
     { tag: "path", attrs: { d: "M4 9h2" } },
     { tag: "path", attrs: { d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02" } }
   ],
+  // ── Plus ───────────────────────────────────────────────────────────
+  plus: [
+    { tag: "path", attrs: { d: "M5 12h14" } },
+    { tag: "path", attrs: { d: "M12 5v14" } }
+  ],
   // ── Misc ────────────────────────────────────────────────────────────
   component: [
     { tag: "path", attrs: { d: "M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z" } },
@@ -10034,12 +9935,12 @@ const sr = {
     { tag: "path", attrs: { d: "M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z" } }
   ]
 };
-let Xe = class extends k {
+let Ye = class extends S {
   constructor() {
     super(...arguments), this.name = "", this.size = 20;
   }
   render() {
-    const t = sr[this.name];
+    const t = Ji[this.name];
     if (!t) return f;
     const e = typeof t == "string" ? ce`<path d=${t}></path>` : t.map((a) => {
       const { tag: s, attrs: i } = a;
@@ -10060,7 +9961,7 @@ let Xe = class extends k {
     `;
   }
 };
-Xe.styles = [
+Ye.styles = [
   $`
       :host {
         display: inline-flex;
@@ -10073,21 +9974,213 @@ Xe.styles = [
       }
     `
 ];
-qt([
+Vt([
   h()
-], Xe.prototype, "name", 2);
-qt([
+], Ye.prototype, "name", 2);
+Vt([
   h({ type: Number })
-], Xe.prototype, "size", 2);
+], Ye.prototype, "size", 2);
+Ye = Vt([
+  C("ap-icon")
+], Ye);
+var er = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, Ne = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? tr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
+  return s && i && er(e, a, i), i;
+};
+let he = class extends S {
+  constructor() {
+    super(...arguments), this.selectedAssets = [], this.totalCount = 0, this.isSelectingAll = !1, this.multiSelect = !0;
+  }
+  _confirm() {
+    this.dispatchEvent(new CustomEvent("selection-confirm", {
+      detail: { assets: this.selectedAssets },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _clear() {
+    this.dispatchEvent(new CustomEvent("selection-clear", { bubbles: !0, composed: !0 }));
+  }
+  _selectAll() {
+    this.dispatchEvent(new CustomEvent("select-all", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return this.selectedAssets.length === 0 ? f : n`
+      <div class="bar">
+        <span class="count">${this.selectedAssets.length} selected</span>
+        <span class="divider"></span>
+        <span class="select-label">Select:</span>
+        ${this.multiSelect && this.selectedAssets.length < this.totalCount && (!this.maxSelections || this.selectedAssets.length < this.maxSelections) ? n`<button
+              class="bar-btn"
+              ?disabled=${this.isSelectingAll}
+              @click=${this._selectAll}
+            ><ap-icon name="check-check" .size=${14}></ap-icon>${this.isSelectingAll ? "Selecting..." : this.maxSelections && this.maxSelections < this.totalCount ? `First ${this.maxSelections}` : "Select all"}</button>` : f}
+        <button class="bar-btn" @click=${this._clear}><ap-icon name="close" .size=${14}></ap-icon>Deselect all</button>
+        ${this.maxSelections && this.selectedAssets.length >= this.maxSelections ? n`<span class="limit-notice">Max ${this.maxSelections} allowed</span>` : f}
+        <div class="spacer"></div>
+        <button class="btn-confirm" @click=${this._confirm}>Confirm</button>
+      </div>
+    `;
+  }
+};
+he.styles = $`
+    :host {
+      display: block;
+      padding: 0 8px 8px;
+    }
+    .bar {
+      display: flex;
+      align-items: center;
+      padding: 12px 20px;
+      background: var(--ap-primary, oklch(0.578 0.198 268.129));
+      border-radius: var(--ap-radius-lg, 12px);
+      animation: ap-bar-in 250ms ease-out;
+    }
+    @keyframes ap-bar-in {
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    }
+    .count {
+      font-size: var(--ap-font-size-sm, 0.875rem);
+      font-weight: 400;
+      color: var(--ap-primary-foreground, oklch(1 0 0));
+      white-space: nowrap;
+    }
+    .divider {
+      width: 1px;
+      height: 20px;
+      background: oklch(1 0 0 / 0.3);
+      margin: 0 16px;
+      flex-shrink: 0;
+    }
+    .select-label {
+      font-size: var(--ap-font-size-sm, 0.875rem);
+      color: oklch(1 0 0 / 0.7);
+      white-space: nowrap;
+    }
+    .bar-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 32px;
+      font-size: var(--ap-font-size-sm, 0.875rem);
+      color: var(--ap-primary-foreground, oklch(1 0 0));
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0 14px;
+      margin-left: 8px;
+      font-weight: 500;
+      font-family: var(--ap-font-family, system-ui, sans-serif);
+      white-space: nowrap;
+      border-radius: var(--ap-radius-sm, 6px);
+      transition: background 100ms;
+    }
+    .bar-btn:hover {
+      background: oklch(1 0 0 / 0.1);
+    }
+    .bar-btn:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    .limit-notice {
+      font-size: var(--ap-font-size-xs, 0.75rem);
+      color: oklch(1 0 0 / 0.7);
+      margin-left: 8px;
+      white-space: nowrap;
+    }
+    .spacer {
+      flex: 1;
+    }
+    .btn-confirm {
+      padding: 8px 24px;
+      border: 1.5px solid var(--ap-primary-foreground, oklch(1 0 0));
+      border-radius: var(--ap-radius-sm, 6px);
+      font-size: var(--ap-font-size-sm, 0.875rem);
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 100ms;
+      font-family: var(--ap-font-family, system-ui, sans-serif);
+      background: transparent;
+      color: var(--ap-primary-foreground, oklch(1 0 0));
+    }
+    .btn-confirm:hover {
+      background: oklch(1 0 0 / 0.1);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .bar { animation: none; }
+    }
+  `;
+Ne([
+  h({ type: Array })
+], he.prototype, "selectedAssets", 2);
+Ne([
+  h({ type: Number })
+], he.prototype, "totalCount", 2);
+Ne([
+  h({ type: Boolean })
+], he.prototype, "isSelectingAll", 2);
+Ne([
+  h({ type: Boolean })
+], he.prototype, "multiSelect", 2);
+Ne([
+  h({ type: Number })
+], he.prototype, "maxSelections", 2);
+he = Ne([
+  C("ap-selection-bar")
+], he);
+var ar = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, qt = (t, e, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? sr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
+  return s && i && ar(e, a, i), i;
+};
+let Xe = class extends S {
+  constructor() {
+    super(...arguments), this.active = !1, this.rect = { x: 0, y: 0, width: 0, height: 0 };
+  }
+  render() {
+    return !this.active || this.rect.width < 5 || this.rect.height < 5 ? f : n`
+      <div
+        class="marquee"
+        style="left:${this.rect.x}px;top:${this.rect.y}px;width:${this.rect.width}px;height:${this.rect.height}px"
+      ></div>
+    `;
+  }
+};
+Xe.styles = $`
+    :host {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      min-height: 100%;
+      pointer-events: none;
+      z-index: 10;
+    }
+    .marquee {
+      position: absolute;
+      border: 2px solid var(--ap-primary, oklch(0.578 0.198 268.129));
+      background: var(--ap-primary-10, oklch(0.578 0.198 268.129 / 0.1));
+      border-radius: 2px;
+    }
+  `;
+qt([
+  h({ type: Boolean })
+], Xe.prototype, "active", 2);
+qt([
+  h({ type: Object })
+], Xe.prototype, "rect", 2);
 Xe = qt([
-  S("ap-icon")
+  C("ap-marquee-overlay")
 ], Xe);
-var ir = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Fa = (t, e, a, s) => {
+var ir = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Ea = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? rr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && ir(e, a, i), i;
 };
-let ut = class extends k {
+let ut = class extends S {
   constructor() {
     super(...arguments), this.size = 24;
   }
@@ -10111,18 +10204,18 @@ ut.styles = [
       }
     `
 ];
-Fa([
+Ea([
   h({ type: Number })
 ], ut.prototype, "size", 2);
-ut = Fa([
-  S("ap-spinner")
+ut = Ea([
+  C("ap-spinner")
 ], ut);
 var or = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, xt = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? nr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && or(e, a, i), i;
 };
-let De = class extends k {
+let De = class extends S {
   constructor() {
     super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this._hasLabel = !1, this._handleHostClick = () => {
       this.dispatchEvent(new CustomEvent("ap-toggle", {
@@ -10174,6 +10267,9 @@ De.styles = [
         transition: all 150ms;
         background: var(--ap-background, oklch(1 0 0));
       }
+      :host(:hover) .box {
+        border-color: var(--ap-secondary-foreground-50, oklch(53.03% 0.039 249.89 / 0.5));
+      }
       :host([checked]) .box {
         background: var(--ap-primary, oklch(0.578 0.198 268.129));
         border-color: var(--ap-primary, oklch(0.578 0.198 268.129));
@@ -10204,9 +10300,14 @@ De.styles = [
         pointer-events: none;
       }
       .label {
-        margin-left: 8px;
+        margin-left: var(--ap-checkbox-gap, 8px);
         font-size: var(--ap-font-size-sm, 0.875rem);
         color: var(--ap-foreground, oklch(0.37 0.022 248.413));
+        display: inline-flex;
+        align-items: center;
+      }
+      .label[hidden] {
+        display: none;
       }
     `
 ];
@@ -10220,14 +10321,14 @@ xt([
   h({ type: Boolean, reflect: !0 })
 ], De.prototype, "disabled", 2);
 De = xt([
-  S("ap-checkbox")
+  C("ap-checkbox")
 ], De);
-var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Ea = (t, e, a, s) => {
+var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Fa = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? cr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && lr(e, a, i), i;
 };
-let gt = class extends k {
+let gt = class extends S {
   constructor() {
     super(...arguments), this.open = !1, this._handleOutsideClick = (t) => {
       this.open && !t.composedPath().includes(this) && (this.open = !1);
@@ -10272,18 +10373,18 @@ gt.styles = [
       }
     `
 ];
-Ea([
+Fa([
   y()
 ], gt.prototype, "open", 2);
-gt = Ea([
-  S("ap-popover")
+gt = Fa([
+  C("ap-popover")
 ], gt);
 var dr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, q = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? pr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && dr(e, a, i), i;
 };
-let j = class extends k {
+let j = class extends S {
   constructor() {
     super(...arguments), this.value = "", this.label = "", this.variant = "default", this.options = [], this._open = !1, this._focusedIndex = -1, this._menuPosition = "below", this._menuAlign = "align-left", this._menuTop = 0, this._menuBottom = 0, this._menuLeft = 0, this._menuRight = 0, this._handleOutsideClick = (t) => {
       t.composedPath().includes(this) || (this._open = !1, document.removeEventListener("click", this._handleOutsideClick));
@@ -10401,8 +10502,10 @@ j.styles = [
         display: flex;
         align-items: center;
         gap: 8px;
+        width: 100%;
         height: 36px;
         padding: 0 12px;
+        box-sizing: border-box;
         border: 1px solid var(--ap-input, oklch(0.871 0.016 241.798));
         border-radius: var(--ap-radius-sm, 6px);
         background: var(--ap-background, oklch(1 0 0));
@@ -10509,14 +10612,14 @@ q([
   y()
 ], j.prototype, "_menuRight", 2);
 j = q([
-  S("ap-dropdown")
+  C("ap-dropdown")
 ], j);
 var hr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Aa = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? ur(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && hr(e, a, i), i;
 };
-let ft = class extends k {
+let ft = class extends S {
   constructor() {
     super(...arguments), this.variant = "default";
   }
@@ -10532,12 +10635,13 @@ ft.styles = [
       .badge {
         display: inline-flex;
         align-items: center;
-        padding: 2px 8px;
+        height: 24px;
+        padding: 0 8px;
         font-size: 0.75rem;
         font-weight: 500;
         border-radius: 9999px;
         background: var(--ap-muted, oklch(0.974 0.006 239.819));
-        color: var(--ap-muted-foreground, oklch(0.685 0.033 249.82));
+        color: var(--ap-secondary-foreground, oklch(53.03% 0.039 249.89));
       }
       :host([variant="primary"]) .badge {
         background: var(--ap-primary-10, oklch(0.578 0.198 268.129 / 0.1));
@@ -10549,14 +10653,14 @@ Aa([
   h({ reflect: !0 })
 ], ft.prototype, "variant", 2);
 ft = Aa([
-  S("ap-badge")
+  C("ap-badge")
 ], ft);
 var gr = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, Ta = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? fr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && gr(e, a, i), i;
 };
-let vt = class extends k {
+let vt = class extends S {
   constructor() {
     super(...arguments), this.text = "";
   }
@@ -10597,14 +10701,14 @@ Ta([
   h()
 ], vt.prototype, "text", 2);
 vt = Ta([
-  S("ap-tooltip")
+  C("ap-tooltip")
 ], vt);
 var vr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, je = (t, e, a, s) => {
   for (var i = s > 1 ? void 0 : s ? mr(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = (s ? o(e, a, i) : o(i)) || i);
   return s && i && vr(e, a, i), i;
 };
-let ue = class extends k {
+let ue = class extends S {
   constructor() {
     super(...arguments), this.value = "", this.options = [], this.disabled = !1, this.direction = "vertical", this._onKeydown = (t) => {
       const e = this.options.filter(
@@ -10715,6 +10819,9 @@ ue.styles = [
         background: transparent;
         transition: background 150ms;
       }
+      .option:hover .radio {
+        border-color: var(--ap-secondary-foreground-50, oklch(53.03% 0.039 249.89 / 0.5));
+      }
       .option[aria-checked="true"] .radio {
         border-color: var(--ap-primary, oklch(0.578 0.198 268.129));
       }
@@ -10745,14 +10852,14 @@ je([
   h({ reflect: !0 })
 ], ue.prototype, "columns", 2);
 ue = je([
-  S("ap-radio-group")
+  C("ap-radio-group")
 ], ue);
 var br = Object.defineProperty, Ht = (t, e, a, s) => {
   for (var i = void 0, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (i = o(e, a, i) || i);
   return i && br(e, a, i), i;
 };
-const Kt = class Kt extends k {
+const Kt = class Kt extends S {
   constructor() {
     super(), this._initFailed = !1, this._loadId = 0, this._loadMoreId = 0, this._loadDataTimer = null, this._pendingFilter = null, this._pendingMetadataField = null, this._uploaderEl = null, this._uploaderImportPromise = null, this._dragCounter = 0, this._isDragOver = !1, this._isUploaderOpen = !1, this._onDragEnter = (e) => {
       var a;
@@ -10802,7 +10909,7 @@ const Kt = class Kt extends k {
     this.store.setState({
       config: e,
       projectToken: e.auth.projectToken,
-      viewMode: e.rememberLastView && Fs() || e.defaultViewMode || "grid",
+      viewMode: e.rememberLastView && Es() || e.defaultViewMode || "grid",
       sortBy: s,
       sortDirection: i,
       currentFolder: null,
@@ -10815,16 +10922,16 @@ const Kt = class Kt extends k {
       }
       const [r, o, l] = await Promise.allSettled([
         rs(this.apiClient),
-        Ba(this.apiClient),
-        Ua(this.apiClient)
+        Ua(this.apiClient),
+        Ba(this.apiClient)
       ]);
       if (r.status === "fulfilled") {
-        const { fields: d, regionalVariantGroups: g, regionalFilters: b, brandColor: E } = r.value;
+        const { fields: d, regionalVariantGroups: g, regionalFilters: b, brandColor: k } = r.value;
         this.store.setState({
           metadataFields: d,
           regionalVariantGroups: g,
           regionalFilters: b,
-          ...E ? { brandColor: E } : {}
+          ...k ? { brandColor: k } : {}
         });
       }
       o.status === "fulfilled" && this.store.setState({ labels: o.value.labels || [] }), l.status === "fulfilled" && this.store.setState({ tags: l.value });
@@ -10932,8 +11039,8 @@ const Kt = class Kt extends k {
     return !!((s = (a = e.dataTransfer) == null ? void 0 : a.types) != null && s.includes("Files"));
   }
   async open() {
-    var u, v, d, g, b, E, _;
-    const e = this.store.getState(), a = Ue((u = this.config) == null ? void 0 : u.forcedFilters), s = new Set(Object.keys(a)), i = {}, r = Ue((v = this.config) == null ? void 0 : v.defaultFilters);
+    var u, v, d, g, b, k, _;
+    const e = this.store.getState(), a = Be((u = this.config) == null ? void 0 : u.forcedFilters), s = new Set(Object.keys(a)), i = {}, r = Be((v = this.config) == null ? void 0 : v.defaultFilters);
     for (const [A, F] of Object.entries(r))
       s.has(A) || (i[A] = F);
     const o = Object.keys(i), l = ((d = this.config) == null ? void 0 : d.tabs) ?? ["assets", "folders"], c = (g = this.config) != null && g.rememberLastTab ? As() : null, p = (c && l.includes(c) ? c : null) ?? ((b = this.config) != null && b.defaultTab && l.includes(this.config.defaultTab) ? this.config.defaultTab : null) ?? l[0] ?? "assets";
@@ -10955,7 +11062,7 @@ const Kt = class Kt extends k {
       assets: [],
       folders: [],
       currentFolder: null,
-      currentFolderPath: ((E = this.config) == null ? void 0 : E.rememberLastFolder) && Ss() || ((_ = this.config) == null ? void 0 : _.rootFolderPath) || "/",
+      currentFolderPath: ((k = this.config) == null ? void 0 : k.rememberLastFolder) && Ss() || ((_ = this.config) == null ? void 0 : _.rootFolderPath) || "/",
       breadcrumb: [],
       selectedAssets: /* @__PURE__ */ new Map(),
       folderPreviews: {},
@@ -10977,15 +11084,15 @@ const Kt = class Kt extends k {
     (e = this.renderRoot.querySelector(".main-content")) == null || e.scrollTo({ top: 0 });
   }
   async _loadData() {
-    var s, i, r, o, l, c, p, u, v, d, g, b, E, _;
+    var s, i, r, o, l, c, p, u, v, d, g, b, k, _;
     if (!this.apiClient) return;
     const e = ++this._loadId, a = this.store.getState();
     this._scrollToTop(), this.store.setState({ isLoading: !0 });
     try {
       const A = a.activeTab;
       if (A === "assets") {
-        const F = this._buildSearchNotation(), I = a.currentFolderPath || "/", H = tt(this.apiClient, {
-          folder: I,
+        const F = this._buildSearchNotation(), P = a.currentFolderPath || "/", H = tt(this.apiClient, {
+          folder: P,
           offset: 0,
           limit: a.limit,
           sort_by: a.sortBy,
@@ -10994,13 +11101,13 @@ const Kt = class Kt extends k {
           q: F || void 0,
           recursive: 1
         }), T = Xt(this.apiClient, {
-          folder: I,
+          folder: P,
           q: F || void 0,
           search: a.searchQuery || void 0,
           recursive: 1
-        }).catch(() => null), [R, B] = await Promise.all([H, T]);
+        }).catch(() => null), [R, U] = await Promise.all([H, T]);
         if (e !== this._loadId) return;
-        const ne = ((s = R.files) == null ? void 0 : s.length) ?? 0, fe = ne >= a.limit, Ae = ((i = B == null ? void 0 : B.stats) == null ? void 0 : i.approx_files_count) ?? ((r = B == null ? void 0 : B.info) == null ? void 0 : r.total_files_count) ?? ((o = R.info) == null ? void 0 : o.total_files_count) ?? ((c = (l = R.base) == null ? void 0 : l.count) == null ? void 0 : c.files_recursive) ?? ((u = (p = R.base) == null ? void 0 : p.count) == null ? void 0 : u.files_direct) ?? ne;
+        const ne = ((s = R.files) == null ? void 0 : s.length) ?? 0, fe = ne >= a.limit, Ae = ((i = U == null ? void 0 : U.stats) == null ? void 0 : i.approx_files_count) ?? ((r = U == null ? void 0 : U.info) == null ? void 0 : r.total_files_count) ?? ((o = R.info) == null ? void 0 : o.total_files_count) ?? ((c = (l = R.base) == null ? void 0 : l.count) == null ? void 0 : c.files_recursive) ?? ((u = (p = R.base) == null ? void 0 : p.count) == null ? void 0 : u.files_direct) ?? ne;
         this.store.setState({
           assets: R.files || [],
           folders: [],
@@ -11011,7 +11118,7 @@ const Kt = class Kt extends k {
           isLoading: !1
         });
       } else if (A === "folders") {
-        const F = this._buildSearchNotation(), I = a.currentFolderPath || "/", [H, T, R] = await Promise.all([
+        const F = this._buildSearchNotation(), P = a.currentFolderPath || "/", [H, T, R] = await Promise.all([
           Na(this.apiClient, {
             folderPath: a.currentFolderPath,
             q: a.searchQuery || void 0,
@@ -11020,7 +11127,7 @@ const Kt = class Kt extends k {
             sort_direction: a.sortDirection
           }),
           tt(this.apiClient, {
-            folder: I,
+            folder: P,
             offset: 0,
             limit: a.limit,
             sort_by: a.sortBy,
@@ -11030,28 +11137,28 @@ const Kt = class Kt extends k {
             recursive: 0
           }),
           Xt(this.apiClient, {
-            folder: I,
+            folder: P,
             q: F || void 0,
             search: a.searchQuery || void 0,
             recursive: 0
           }).catch(() => null)
         ]);
         if (e !== this._loadId) return;
-        const B = H.folders || [];
+        const U = H.folders || [];
         let ne = {};
-        if (B.length > 0)
+        if (U.length > 0)
           try {
-            ne = await ja(this.apiClient, B.map((ve) => ve.uuid));
+            ne = await ja(this.apiClient, U.map((ve) => ve.uuid));
           } catch {
           }
         if (e !== this._loadId) return;
-        const fe = ((v = T.files) == null ? void 0 : v.length) ?? 0, Ae = fe >= a.limit, et = ((d = R == null ? void 0 : R.stats) == null ? void 0 : d.approx_files_count) ?? ((g = R == null ? void 0 : R.info) == null ? void 0 : g.total_files_count) ?? ((b = T.info) == null ? void 0 : b.total_files_count) ?? ((_ = (E = T.base) == null ? void 0 : E.count) == null ? void 0 : _.files_direct) ?? fe;
+        const fe = ((v = T.files) == null ? void 0 : v.length) ?? 0, Ae = fe >= a.limit, et = ((d = R == null ? void 0 : R.stats) == null ? void 0 : d.approx_files_count) ?? ((g = R == null ? void 0 : R.info) == null ? void 0 : g.total_files_count) ?? ((b = T.info) == null ? void 0 : b.total_files_count) ?? ((_ = (k = T.base) == null ? void 0 : k.count) == null ? void 0 : _.files_direct) ?? fe;
         this.store.setState({
           assets: T.files || [],
-          folders: B,
+          folders: U,
           folderPreviews: ne,
           totalCount: et,
-          totalFolderCount: H.total ?? B.length,
+          totalFolderCount: H.total ?? U.length,
           offset: 0,
           hasMore: Ae,
           isLoading: !1
@@ -11143,7 +11250,7 @@ const Kt = class Kt extends k {
   _handleTabChange(e) {
     var s, i;
     const a = e.detail.tab;
-    (s = this.config) != null && s.rememberLastTab && Es(a), this.store.setState({
+    (s = this.config) != null && s.rememberLastTab && Fs(a), this.store.setState({
       activeTab: a,
       currentFolder: null,
       currentFolderPath: ((i = this.config) == null ? void 0 : i.rootFolderPath) ?? "/",
@@ -11228,9 +11335,9 @@ const Kt = class Kt extends k {
         for (let _ = 0; _ < u.length; _ += v) {
           const A = u.slice(_, _ + v), F = await Promise.all(
             A.map(
-              (I) => tt(this.apiClient, {
+              (P) => tt(this.apiClient, {
                 folder: r,
-                offset: I,
+                offset: P,
                 limit: o,
                 sort_by: e.sortBy,
                 sort_direction: e.sortDirection,
@@ -11240,16 +11347,16 @@ const Kt = class Kt extends k {
               })
             )
           );
-          for (const I of F)
-            I.files && d.push(...I.files);
+          for (const P of F)
+            P.files && d.push(...P.files);
         }
-        const g = new Set(l.map((_) => _.uuid)), b = d.filter((_) => g.has(_.uuid) ? !1 : (g.add(_.uuid), !0)), E = [...l, ...b];
+        const g = new Set(l.map((_) => _.uuid)), b = d.filter((_) => g.has(_.uuid) ? !1 : (g.add(_.uuid), !0)), k = [...l, ...b];
         this.store.setState({
-          assets: E,
-          offset: Math.max(0, E.length - o),
+          assets: k,
+          offset: Math.max(0, k.length - o),
           hasMore: !1,
           isSelectingAll: !1
-        }), this.selectionCtrl.selectAll(E);
+        }), this.selectionCtrl.selectAll(k);
       } catch (i) {
         this.store.setState({ isSelectingAll: !1 }), this.dispatchEvent(new CustomEvent("ap-error", {
           detail: { error: i, context: "selectAll" },
@@ -11268,7 +11375,7 @@ const Kt = class Kt extends k {
   }
   // ── Filter Handlers ──────────────────────────────────────────────────
   _isDateFilterKey(e) {
-    return e === m.DATE || e === m.LICENSE_EXPIRY || e === U.DUE_DATE;
+    return e === m.DATE || e === m.LICENSE_EXPIRY || e === B.DUE_DATE;
   }
   _handleFilterUpdate(e) {
     const { key: a, values: s, operator: i } = e.detail, o = { ...this.store.getState().filters };
@@ -11338,8 +11445,8 @@ const Kt = class Kt extends k {
     s ? (this._pendingMetadataField = s, i.pendingMetadataField = s) : a && (this._pendingFilter = a, i.pendingFilter = a), await i.updateComplete;
     let o = i.renderRoot.querySelector(".chip.pending");
     if (!o) {
-      const E = i.renderRoot.querySelectorAll(".chip.pinned-empty"), _ = s ? (d = i._getMetadataLabel) == null ? void 0 : d.call(i, s) : void 0;
-      for (const A of E) {
+      const k = i.renderRoot.querySelectorAll(".chip.pinned-empty"), _ = s ? (d = i._getMetadataLabel) == null ? void 0 : d.call(i, s) : void 0;
+      for (const A of k) {
         const F = (b = (g = A.querySelector(".chip-label")) == null ? void 0 : g.textContent) == null ? void 0 : b.trim();
         if (s && F === _) {
           o = A;
@@ -11448,11 +11555,11 @@ const Kt = class Kt extends k {
   // ── Search Notation Builder ──────────────────────────────────────────
   _buildSearchNotation() {
     var i;
-    const e = this.store.getState(), a = { ...Ue((i = this.config) == null ? void 0 : i.forcedFilters), ...e.filters.applied };
+    const e = this.store.getState(), a = { ...Be((i = this.config) == null ? void 0 : i.forcedFilters), ...e.filters.applied };
     return ls(a, e.filters.metadata.applied).join(" ");
   }
   render() {
-    var p, u, v, d, g, b, E, _;
+    var p, u, v, d, g, b, k, _;
     const e = this.storeCtrl.state, a = Array.from(e.selectedAssets.keys()), s = this.selectionCtrl.getSelectedAssets(), i = n`
       <ap-header
         .activeTab=${e.activeTab}
@@ -11484,11 +11591,6 @@ const Kt = class Kt extends k {
           </div>
         ` : f}
         <div class="main-content">
-          ${e.breadcrumb.length > 0 ? n`<ap-breadcrumb
-                .items=${e.breadcrumb}
-                @breadcrumb-navigate=${this._handleBreadcrumbNavigate}
-              ></ap-breadcrumb>` : f}
-
           <div class="toolbar-filters-wrapper">
             <ap-content-toolbar
               .isLoading=${e.isLoading}
@@ -11504,7 +11606,7 @@ const Kt = class Kt extends k {
               .metadataFields=${e.metadataFields}
               .pinnedFilters=${e.filters.pinned}
               .apiClient=${this.apiClient}
-              .forcedFilterKeys=${Object.keys(Ue((v = this.config) == null ? void 0 : v.forcedFilters))}
+              .forcedFilterKeys=${Object.keys(Be((v = this.config) == null ? void 0 : v.forcedFilters))}
               @sort-change=${this._handleSortChange}
               @sort-direction-change=${this._handleSortDirectionChange}
               @filter-update=${this._handleFilterUpdate}
@@ -11536,6 +11638,11 @@ const Kt = class Kt extends k {
               @filters-clear-all=${this._handleFiltersClearAll}
               @filters-set=${this._handleFiltersSet}
             ></ap-filters-bar>
+
+            ${e.breadcrumb.length > 0 ? n`<ap-breadcrumb
+                  .items=${e.breadcrumb}
+                  @breadcrumb-navigate=${this._handleBreadcrumbNavigate}
+                ></ap-breadcrumb>` : f}
           </div>
 
           ${e.isLoading && e.assets.length === 0 && e.folders.length === 0 ? n`<ap-skeleton .variant=${e.viewMode}></ap-skeleton>` : this._renderContent(e, a)}
@@ -11565,7 +11672,7 @@ const Kt = class Kt extends k {
         .selectedAssets=${s}
         .totalCount=${e.totalCount}
         .isSelectingAll=${e.isSelectingAll}
-        .multiSelect=${((E = this.config) == null ? void 0 : E.multiSelect) ?? !0}
+        .multiSelect=${((k = this.config) == null ? void 0 : k.multiSelect) ?? !0}
         .maxSelections=${(_ = this.config) == null ? void 0 : _.maxSelections}
         @selection-confirm=${this._handleSelectionConfirm}
         @selection-clear=${this._handleSelectionClear}