@ynput/ayon-frontend-shared 0.7.5 → 0.8.0

package/dist/chunks/Watchers.es.js

@@ -1,27 +1,26 @@
-import { jsx as g, jsxs as R, Fragment as ae } from "react/jsx-runtime";
-import { useMemo as I, useCallback as Y, useState as O, useEffect as q, useRef as ne, forwardRef as ee, useContext as Se } from "react";
-import { getMixedCounts as Te, BorderedSection as J, Button as _, applyMixedChange as je, StatusSelect as De, AssigneeSelect as Fe, TagsSelect as Ce, EnumDropdown as Ae, Icon as V, getMimeTypeIcon as Ne, theme as $e, getFileSizeString as Me, WatcherSelect as ze } from "@ynput/ayon-react-components";
-import { snakeCase as Re, upperFirst as Ue, intersectionBy as he } from "lodash";
+import { jsx as u, jsxs as z, Fragment as ne } from "react/jsx-runtime";
+import { useMemo as I, useCallback as ee, useState as O, useEffect as G, useRef as ie, forwardRef as te, useContext as Ae } from "react";
+import { getMixedCounts as je, BorderedSection as Z, Button as Q, applyMixedChange as De, StatusSelect as Ce, AssigneeSelect as Ne, TagsSelect as Ue, EnumDropdown as $e, Icon as V, getMimeTypeIcon as Me, theme as ze, getFileSizeString as Re, WatcherSelect as We } from "@ynput/ayon-react-components";
+import { snakeCase as Le, upperFirst as Pe, intersectionBy as fe } from "lodash";
 import "primereact/confirmdialog";
-import { toast as te } from "react-toastify";
-import { c as oe } from "./copyToClipboard.es.js";
+import { toast as oe } from "react-toastify";
+import { c as re } from "./copyToClipboard.es.js";
 import "uuid";
-import { aF as fe, b6 as Le, bs as ve, b9 as Pe, ba as We, bb as Oe, bB as Ie, by as Ve, bJ as Be, br as He, a as K, bz as _e } from "./searchTerms.es.js";
-import ye from "axios";
-import p, { keyframes as be, css as xe } from "styled-components";
-import U from "clsx";
-import { E as Qe, t as qe, M as Ge, T as Ke, D as Je, B as Ze, l as Xe } from "./MetaWidget.es.js";
-import "./PlayableIcon.es.js";
-import { dq as Ye, c0 as et, ce as we, bk as tt, as as ot, bz as rt, dd as at } from "./getUris.es.js";
+import { aF as ve, b6 as Be, br as ye, b9 as Oe, ba as Ie, bb as Ve, bB as _e, by as He, bJ as Qe, bq as qe, a as J, bz as Ge } from "./searchTerms.es.js";
+import be from "axios";
+import m, { keyframes as xe, css as we } from "styled-components";
+import W from "clsx";
+import { E as Ke, t as Je, M as Ze, T as Xe, D as Ye, B as et, l as tt } from "./MetaWidget.es.js";
+import { U as ot, F as ke } from "./FilmstripEntityCard.es.js";
+import { dr as rt, c1 as at, cf as Ee, bl as nt, cA as it, as as st, bA as lt, de as ct } from "./getUris.es.js";
 import "@module-federation/enhanced/runtime";
 import "@ynput/ayon-addon/host";
-import { v as re, d as nt, x as it, T as st } from "./TableExportContextInstance.es.js";
+import { m as ae, c as dt, q as pt, T as ut } from "./TableExportContextInstance.es.js";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
 import "react-dom";
-import "react-redux";
 import "react-router-dom";
-import { format as lt } from "date-fns";
+import { format as mt } from "date-fns";
 import "lexical";
 import "@lexical/markdown";
 import "match-sorter";
@@ -32,73 +31,74 @@ import "@lexical/selection";
 import "@lexical/utils";
 import "@lexical/react/LexicalBlockWithAlignableContents";
 import "@lexical/react/LexicalDecoratorBlockNode";
-import "@tanstack/react-table";
 import "@ynput/ayon-addon";
-import { g as ct, h as ie } from "./humanizeFieldName.es.js";
-import { a as dt, A as pt } from "./ThumbnailSimple.es.js";
-import { p as Q } from "./parseFilename.es.js";
-import { classNames as ut } from "primereact/utils";
-import { u as mt } from "./useCreateContextMenu.es.js";
-import { g as gt } from "./getThumbnailUrl.es.js";
-const se = [], ht = (e) => {
-  const { data: t, isError: r } = Oe(void 0, { skip: !e });
+import "@tanstack/react-table";
+import "react-redux";
+import { g as gt, h as se } from "./humanizeFieldName.es.js";
+import { a as ht, A as ft } from "./ThumbnailSimple.es.js";
+import { b as vt, g as yt, a as bt } from "./getThumbnailUrl.es.js";
+import { p as q } from "./parseFilename.es.js";
+import { classNames as xt } from "primereact/utils";
+import { u as wt } from "./useCreateContextMenu.es.js";
+const le = [], kt = (e) => {
+  const { data: t, isError: o } = Ve(void 0, { skip: !e });
   return I(
     () => ({
       // a failed registry is settled too: every param is sent, same fallback as the batch
-      isRegistryLoaded: !!t || r,
-      acceptedParams: t?.find(({ name: o }) => o === e)?.acceptedParams
+      isRegistryLoaded: !!t || o,
+      acceptedParams: t?.find(({ name: r }) => r === e)?.acceptedParams
     }),
-    [t, r, e]
+    [t, o, e]
   );
-}, Jo = () => {
-  const [e] = Pe(), [t] = We();
-  return Y(
-    async (r, o) => {
-      const n = (await t(void 0, !0).unwrap().catch(() => {
-      }))?.find(({ name: a }) => a === r.enumResolver)?.acceptedParams;
+}, rr = () => {
+  const [e] = Oe(), [t] = Ie();
+  return ee(
+    async (o, r) => {
+      const c = (await t(void 0, !0).unwrap().catch(() => {
+      }))?.find(({ name: a }) => a === o.enumResolver)?.acceptedParams;
       try {
         const a = await e(
-          fe(r, { projectName: o }, n),
+          ve(o, { projectName: r }, c),
           !0
         ).unwrap();
         if (a.error) throw new Error(a.error);
-        return ve(a.items);
+        return ye(a.items);
       } catch (a) {
-        throw ft(a);
+        throw Et(a);
       }
     },
     [e, t]
   );
-}, ft = (e) => {
+}, Et = (e) => {
   if (e instanceof Error) return e;
   const {
     message: t,
-    data: r,
-    status: o,
-    error: c
+    data: o,
+    status: r,
+    error: g
   } = e || {};
-  return typeof r?.detail == "string" ? new Error(r.detail) : typeof c == "string" ? new Error(c) : typeof t == "string" ? new Error(t) : new Error(o ? `Request failed (${o})` : "Request failed");
-}, vt = (e, { projectName: t, skip: r } = {}) => {
-  const o = e?.enumResolver, { acceptedParams: c, isRegistryLoaded: n } = ht(o), a = I(
-    () => fe(e, { projectName: t }, c),
+  return typeof o?.detail == "string" ? new Error(o.detail) : typeof g == "string" ? new Error(g) : typeof t == "string" ? new Error(t) : new Error(r ? `Request failed (${r})` : "Request failed");
+}, St = (e, { projectName: t, skip: o } = {}) => {
+  const r = e?.enumResolver, { acceptedParams: g, isRegistryLoaded: c } = kt(r), a = I(
+    () => ve(e, { projectName: t }, g),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o, e?.enumResolverSettings, t, c]
+    [r, e?.enumResolverSettings, t, g]
   ), {
     currentData: d,
-    isFetching: h,
+    isFetching: p,
     isError: i
-  } = Le(a, {
+  } = Be(a, {
     // waiting for the registry keeps the cache key final: no request is sent with params that get dropped
-    skip: !o || !!r || !n
-  }), u = I(() => o ? d ? ve(d.items) : se : e?.enum || se, [o, d, e?.enum]), f = !!o && !h && (i || !!d?.error);
+    skip: !r || !!o || !c
+  }), f = I(() => r ? d ? ye(d.items) : le : e?.enum || le, [r, d, e?.enum]), s = !!r && !p && (i || !!d?.error);
   return {
-    options: u,
+    options: f,
     // a background refetch (tag invalidation) keeps the cached options, so it is not a load
-    isLoading: !!o && !r && (!n || h && !d),
-    isError: f,
-    errorMessage: f ? d?.error : void 0
+    isLoading: !!r && !o && (!c || p && !d),
+    isError: s,
+    errorMessage: s ? d?.error : void 0
   };
-}, yt = [
+}, Tt = [
   "id",
   "name",
   "label",
@@ -109,18 +109,22 @@ const se = [], ht = (e) => {
   "tags",
   "status",
   "updatedAt",
+  "updatedBy",
   "createdAt",
+  "createdBy",
   "projectName",
   "path",
   "description"
-], le = [
+], ce = [
   "id",
   "entityType",
   "projectName",
   "path",
   "createdAt",
-  "updatedAt"
-], bt = [
+  "createdBy",
+  "updatedAt",
+  "updatedBy"
+], Ft = [
   "name",
   "label",
   "taskType",
@@ -128,68 +132,70 @@ const se = [], ht = (e) => {
   "productType",
   "tags",
   "status"
-], xt = (e, t) => {
-  const [r, o] = O([]), [c, n] = O(null), a = () => {
-    const i = {}, u = /* @__PURE__ */ new Set();
-    e.forEach((s) => {
+], At = (e, t) => {
+  const [o, r] = O([]), [g, c] = O(null), a = () => {
+    const i = {}, f = /* @__PURE__ */ new Set();
+    e.forEach((n) => {
       const v = {
-        id: s.id,
-        name: s.name,
-        label: s.label,
-        entityType: s.entityType,
-        createdAt: s.createdAt,
-        updatedAt: s.updatedAt,
-        projectName: s.projectName,
-        status: s.status,
-        tags: s.tags || [],
-        path: s.path,
-        folderType: s.folder?.folderType,
-        productType: s.product?.productType,
-        taskType: s.task?.taskType,
-        description: s.attrib?.description?.toString() ?? ""
+        id: n.id,
+        name: n.name,
+        label: n.label,
+        entityType: n.entityType,
+        createdAt: n.createdAt,
+        createdBy: n.createdBy,
+        updatedAt: n.updatedAt,
+        updatedBy: n.updatedBy,
+        projectName: n.projectName,
+        status: n.status,
+        tags: n.tags || [],
+        path: n.path,
+        folderType: n.folder?.folderType,
+        productType: n.product?.productType,
+        taskType: n.task?.taskType,
+        description: n.attrib?.description?.toString() ?? ""
       };
-      Object.keys(v).forEach((m) => {
-        yt.includes(m) && (i[m] = i[m] || [], i[m].push(v[m]));
-      }), s.attrib && Object.keys(s.attrib).forEach((m) => {
-        if (m !== "description") {
-          const w = `attrib.${m}`;
-          i[w] = i[w] || [], i[w].push(s.attrib?.[m]);
+      Object.keys(v).forEach((h) => {
+        Tt.includes(h) && (i[h] = i[h] || [], i[h].push(v[h]));
+      }), n.attrib && Object.keys(n.attrib).forEach((h) => {
+        if (h !== "description") {
+          const x = `attrib.${h}`;
+          i[x] = i[x] || [], i[x].push(n.attrib?.[h]);
         }
       });
     });
-    const f = Object.entries(i).reduce((s, [v, m]) => {
-      const { value: w, isMixed: T } = ct(m);
-      return s[v] = w, T && u.add(v), s;
+    const s = Object.entries(i).reduce((n, [v, h]) => {
+      const { value: x, isMixed: E } = gt(h);
+      return n[v] = x, E && f.add(v), n;
     }, {});
-    n(f), o(Array.from(u));
+    c(s), r(Array.from(f));
   };
-  return q(() => {
+  return G(() => {
     t || e.length === 0 || a();
   }, [e, t]), {
-    formData: c,
-    mixedFields: r,
-    updateFormData: (i, u) => {
-      n((f) => f && {
-        ...f,
-        [i]: u
+    formData: g,
+    mixedFields: o,
+    updateFormData: (i, f) => {
+      c((s) => s && {
+        ...s,
+        [i]: f
       });
     },
     clearMixedField: (i) => {
-      o((u) => u.filter((f) => f !== i));
+      r((f) => f.filter((s) => s !== i));
     }
   };
-}, wt = ({
+}, jt = ({
   attributes: e,
   folderTypes: t,
-  taskTypes: r,
-  statuses: o,
-  tags: c,
-  entityType: n,
+  taskTypes: o,
+  statuses: r,
+  tags: g,
+  entityType: c,
   folderHasVersions: a,
   attribAccess: d
 }) => {
-  const h = I(() => {
-    const { readableAttributes: f, writableAttributes: s, writableFields: v } = d || {}, w = [
+  const p = I(() => {
+    const { readableAttributes: s, writableAttributes: n, writableFields: v } = d || {}, x = [
       {
         name: "name",
         data: {
@@ -208,7 +214,7 @@ const se = [], ht = (e) => {
       },
       {
         name: "folderType",
-        hidden: n !== "folder",
+        hidden: c !== "folder",
         data: {
           type: "string",
           title: "Folder Type",
@@ -222,12 +228,12 @@ const se = [], ht = (e) => {
       },
       {
         name: "taskType",
-        hidden: n !== "task",
+        hidden: c !== "task",
         data: {
           type: "string",
           title: "Task Type",
           description: "Type of the task",
-          enum: r.map((l) => ({
+          enum: o.map((l) => ({
             value: l.name,
             label: l.name,
             icon: l.icon
@@ -240,7 +246,7 @@ const se = [], ht = (e) => {
           type: "string",
           title: "Status",
           description: "The state the entity is in, is it approved or in progress etc.",
-          enum: o.map((l) => ({
+          enum: r.map((l) => ({
             value: l.name,
             label: l.name,
             icon: l.icon,
@@ -254,7 +260,7 @@ const se = [], ht = (e) => {
           type: "list_of_strings",
           title: "Tags",
           widget: "tags",
-          enum: c.map((l) => ({
+          enum: g.map((l) => ({
             value: l.name,
             label: l.name,
             color: l.color
@@ -262,7 +268,7 @@ const se = [], ht = (e) => {
         }
       }
     ].map(
-      (l) => l.name === "folderType" && n === "folder" && a ? {
+      (l) => l.name === "folderType" && c === "folder" && a ? {
         ...l,
         readonly: !0,
         data: {
@@ -270,95 +276,100 @@ const se = [], ht = (e) => {
           description: "Folder type is locked because the folder has published versions."
         }
       } : l
-    ), T = n === "version" ? [
-      ...w.map(
+    ), E = c === "version" ? [
+      ...x.map(
         (l) => ["tags", "status"].includes(l.name) ? l : { ...l, readonly: !0 }
       )
-    ] : w, S = v ? T.map(
-      (l) => v.includes(l.name) || v.includes(Re(l.name)) ? l : { ...l, readonly: !0 }
-    ) : T, b = n ? e.filter((l) => l.scope?.includes(n) && l.name !== "description").filter((l) => !f || f.includes(l.name)).map((l) => ({
+    ] : x, S = v ? E.map(
+      (l) => v.includes(l.name) || v.includes(Le(l.name)) ? l : { ...l, readonly: !0 }
+    ) : E, y = c ? e.filter((l) => l.scope?.includes(c) && l.name !== "description").filter((l) => !s || s.includes(l.name)).map((l) => ({
       name: "attrib." + l.name,
       data: l.data,
-      ...n === "version" && l.builtin ? { readonly: !0 } : {},
-      ...s && !s.includes(l.name) ? { readonly: !0 } : {}
-    })) : [], k = le.map((l) => ({
+      ...c === "version" && l.builtin ? { readonly: !0 } : {},
+      ...n && !n.includes(l.name) ? { readonly: !0 } : {}
+    })) : [], k = ce.map((l) => ({
       name: l,
       readonly: !0,
       data: {
         type: "string",
-        title: Ue(l)
+        title: {
+          createdAt: "Created at",
+          createdBy: "Created by",
+          updatedAt: "Updated at",
+          updatedBy: "Updated by"
+        }[l] || Pe(l)
       }
-    })), C = [
+    })), j = [
       ...S,
-      ...b,
+      ...y,
       ...k
-    ], E = ["path", "name"];
-    return [...C].sort((l, N) => {
-      const $ = E.indexOf(l.name), z = E.indexOf(N.name);
-      return $ === -1 && z === -1 ? 0 : $ === -1 ? 1 : z === -1 ? -1 : $ - z;
+    ], w = ["path", "name"];
+    return [...j].sort((l, $) => {
+      const N = w.indexOf(l.name), R = w.indexOf($.name);
+      return N === -1 && R === -1 ? 0 : N === -1 ? 1 : R === -1 ? -1 : N - R;
     });
   }, [
     e,
     t,
-    r,
     o,
+    r,
+    g,
     c,
-    n,
     a,
     d
-  ]), i = h.filter(
-    (f) => bt.includes(f.name) || f.name.startsWith("attrib.")
-  ), u = h.filter(
-    (f) => le.includes(f.name)
+  ]), i = p.filter(
+    (s) => Ft.includes(s.name) || s.name.startsWith("attrib.")
+  ), f = p.filter(
+    (s) => ce.includes(s.name)
   );
   return {
-    fields: h,
+    fields: p,
     editableFields: i,
-    readOnlyFieldsData: u
+    readOnlyFieldsData: f
   };
-}, kt = ({ entities: e, entityType: t }) => {
-  const [r] = Ye(), { onUpdateEntity: o } = re();
-  return { updateEntity: async (n, a) => {
+}, Dt = ({ entities: e, entityType: t }) => {
+  const [o] = rt(), { onUpdateEntity: r } = ae();
+  return { updateEntity: async (c, a) => {
     if (a == null) {
       console.error("value is null or undefined");
       return;
     }
     try {
-      const d = e.map((h) => ({
-        id: h.id,
-        projectName: h.projectName,
+      const d = e.map((p) => ({
+        id: p.id,
+        projectName: p.projectName,
         data: {
-          [n]: typeof a == "function" ? a(h.id) : a
+          [c]: typeof a == "function" ? a(p.id) : a
         },
-        currentAssignees: h.users,
+        currentAssignees: p.users,
         meta: {
-          folderId: h.folderId
+          folderId: p.folderId
         }
       }));
-      await r({ operations: d, entityType: t }), o?.({ operations: d, entityType: t });
+      await o({ operations: d, entityType: t }), r?.({ operations: d, entityType: t });
     } catch {
-      te.error(`Error updating ${t}`);
+      oe.error(`Error updating ${t}`);
     }
   } };
-}, X = (e) => e.reduce(
-  (t, r) => r ? t ? t.filter((o) => r.includes(o)) : r : t,
+}, Y = (e) => e.reduce(
+  (t, o) => o ? t ? t.filter((r) => o.includes(r)) : o : t,
   void 0
-), Et = ({ entities: e, entityType: t }) => {
-  const { data: o } = et(), c = I(() => {
-    if (!o?.projects) return {};
+), Ct = ({ entities: e, entityType: t }) => {
+  const { data: r } = at(), g = I(() => {
+    if (!r?.projects) return {};
     const a = [...new Set(e.map((i) => i.projectName))].map(
-      (i) => o.projects?.[i] || {}
-    ), d = a.map((i) => i.attrib_read), h = a.map((i) => i.attrib_write);
+      (i) => r.projects?.[i] || {}
+    ), d = a.map((i) => i.attrib_read), p = a.map((i) => i.attrib_write);
     return {
-      readableAttributes: X(
+      readableAttributes: Y(
         d.map((i) => i?.enabled ? i.attributes ?? [] : void 0)
       ),
-      writableAttributes: X(
-        h.map((i) => i?.enabled ? i.attributes ?? [] : void 0)
+      writableAttributes: Y(
+        p.map((i) => i?.enabled ? i.attributes ?? [] : void 0)
       ),
-      writableFields: X(h.map((i) => i?.enabled ? i.fields ?? [] : void 0))
+      writableFields: Y(p.map((i) => i?.enabled ? i.fields ?? [] : void 0))
     };
-  }, [o, e]), { updateEntity: n } = kt({
+  }, [r, e]), { updateEntity: c } = Dt({
     entities: e.map((a) => ({
       id: a.id,
       projectName: a.projectName || "",
@@ -370,45 +381,45 @@ const se = [], ht = (e) => {
   });
   return {
     enableEditing: !0,
-    attribAccess: c,
-    updateEntity: n
+    attribAccess: g,
+    updateEntity: c
   };
-}, St = (e, t) => {
-  const r = we({ projects: [...new Set(e).values()] });
-  if (!r || !r.data)
+}, Nt = (e, t) => {
+  const o = Ee({ projects: [...new Set(e).values()] });
+  if (!o || !o.data)
     return [];
-  let o;
-  for (const c of Object.values(r.data)) {
-    const n = c.statuses?.filter(
+  let r;
+  for (const g of Object.values(o.data)) {
+    const c = g.statuses?.filter(
       (a) => t.every((d) => !a.scope || a.scope?.includes(d))
     ) || [];
-    if (o === void 0) {
-      o = n;
+    if (r === void 0) {
+      r = c;
       continue;
     }
-    o = he(o, n, "name");
+    r = fe(r, c, "name");
   }
-  return o;
-}, Zo = (e, t) => {
-  let r = Object.values(e || {});
-  return r.length == 0 || r[0].scope === void 0 ? r : r.filter(
-    (o) => t.every((c) => o.scope === void 0 || o.scope.includes(c))
+  return r;
+}, ar = (e, t) => {
+  let o = Object.values(e || {});
+  return o.length == 0 || o[0].scope === void 0 ? o : o.filter(
+    (r) => t.every((g) => r.scope === void 0 || r.scope.includes(g))
   );
-}, Tt = (e, t) => {
-  const r = we({ projects: [...new Set(e).values()] });
-  if (!r || !r.data)
+}, Ut = (e, t) => {
+  const o = Ee({ projects: [...new Set(e).values()] });
+  if (!o || !o.data)
     return [];
-  let o;
-  for (const c of Object.values(r.data)) {
-    let n = [];
-    if (t === "task" ? n = c.taskTypes || [] : t === "folder" && (n = c.folderTypes || []), o === void 0) {
-      o = n;
+  let r;
+  for (const g of Object.values(o.data)) {
+    let c = [];
+    if (t === "task" ? c = g.taskTypes || [] : t === "folder" && (c = g.folderTypes || []), r === void 0) {
+      r = c;
       continue;
     }
-    o = he(o, n, "name");
+    r = fe(r, c, "name");
   }
-  return o || [];
-}, ce = p.div`
+  return r || [];
+}, de = m.div`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -418,7 +429,7 @@ const se = [], ht = (e) => {
   input {
     text-align: left;
   }
-`, jt = p(Qe)`
+`, $t = m(Ke)`
   .enum,
   .edit-trigger {
     &:hover {
@@ -428,179 +439,179 @@ const se = [], ht = (e) => {
   &:hover {
     background-color: unset;
   }
-`, Dt = p(qe)`
+`, Mt = m(Je)`
   &.enum:hover {
     background-color: unset;
   }
-`, Ft = ({
+`, zt = ({
   field: e,
   value: t,
-  isEditing: r,
-  isReadOnly: o,
-  isMixed: c,
-  onChange: n,
+  isEditing: o,
+  isReadOnly: r,
+  isMixed: g,
+  onChange: c,
   onMixedChange: a,
   onCancelEdit: d,
-  onExpand: h,
+  onExpand: p,
   entities: i = [],
-  entityType: u = "task",
-  projectName: f
+  entityType: f = "task",
+  projectName: s
 }) => {
-  const { type: s, widget: v } = e.data, m = {
-    isEditing: r && !o,
-    isReadOnly: o,
+  const { type: n, widget: v } = e.data, h = {
+    isEditing: o && !r,
+    isReadOnly: r,
     isInherited: !1,
-    onChange: (A) => n(e.name, A)
-  }, w = i.map((A) => A.projectName), T = St(w, [u]), S = Tt(w, u), b = f || w[0], {
+    onChange: (D) => c(e.name, D)
+  }, x = i.map((D) => D.projectName), E = Nt(x, [f]), S = Ut(x, f), y = s || x[0], {
     options: k,
-    isLoading: C,
-    isError: E,
-    errorMessage: D
-  } = vt(e.data, { projectName: b }), l = E ? He(D) : void 0, N = I(() => {
-    if (!(!a || i.length < 2 || s !== "list_of_strings"))
-      return Te(
-        i.map((A) => {
-          const L = e.name === "tags" ? A.tags : e.name.startsWith("attrib.") ? A.attrib?.[e.name.slice(7)] : void 0;
+    isLoading: j,
+    isError: w,
+    errorMessage: T
+  } = St(e.data, { projectName: y }), l = w ? qe(T) : void 0, $ = I(() => {
+    if (!(!a || i.length < 2 || n !== "list_of_strings"))
+      return je(
+        i.map((D) => {
+          const L = e.name === "tags" ? D.tags : e.name.startsWith("attrib.") ? D.attrib?.[e.name.slice(7)] : void 0;
           return Array.isArray(L) ? L.map(String) : [];
         })
       );
-  }, [a, i, s, e.name]), $ = N && {
-    mixedCounts: N,
+  }, [a, i, n, e.name]), N = $ && {
+    mixedCounts: $,
     mixedTotal: i.length,
-    mixedLabel: `${u}s`,
-    onMixedChange: (A) => a?.(e.name, A)
-  }, z = e.name === "attrib.endDate" && i.length > 0 && i.every((A) => A.data?.schedulerSyncData?.allDay === !0);
-  let F = t ?? "";
-  const y = e.data.title || e.name, j = t == null || t === "" || Array.isArray(t) && t.length === 0;
-  if (s !== "boolean" && o && !c && j)
-    return /* @__PURE__ */ g(ce, { children: "-" });
+    mixedLabel: `${f}s`,
+    onMixedChange: (D) => a?.(e.name, D)
+  }, R = e.name === "attrib.endDate" && i.length > 0 && i.every((D) => D.data?.schedulerSyncData?.allDay === !0);
+  let C = t ?? "";
+  const b = e.data.title || e.name, F = t == null || t === "" || Array.isArray(t) && t.length === 0;
+  if (n !== "boolean" && r && !g && F)
+    return /* @__PURE__ */ u(de, { children: "-" });
   switch (!0) {
-    case s === "boolean":
-      return /* @__PURE__ */ g(Ze, { value: !!F, ...m, style: { margin: 0 } });
-    case s === "datetime":
-      return /* @__PURE__ */ g(
-        Je,
+    case n === "boolean":
+      return /* @__PURE__ */ u(et, { value: !!C, ...h, style: { margin: 0 } });
+    case n === "datetime":
+      return /* @__PURE__ */ u(
+        Ye,
         {
-          value: F,
-          ...m,
+          value: C,
+          ...h,
           isEditing: !0,
           onCancelEdit: d,
           style: { width: "fit-content" },
           autoFocus: !1,
-          isMidnightExclusive: z
+          isMidnightExclusive: R
         }
       );
     case v === "tags":
-      return /* @__PURE__ */ g(
-        Dt,
+      return /* @__PURE__ */ u(
+        Mt,
         {
-          value: Array.isArray(F) ? F : [],
+          value: Array.isArray(C) ? C : [],
           options: k,
-          projectName: b,
-          isProjectTags: e.name === "tags" && new Set(w).size <= 1,
+          projectName: y,
+          isProjectTags: e.name === "tags" && new Set(x).size <= 1,
           pt: { template: { style: { height: 32 }, className: "enum" } },
-          placeholder: c ? `Mixed ${y}` : `Select ${y}...`,
-          ...$,
+          placeholder: g ? `Mixed ${b}` : `Select ${b}...`,
+          ...N,
           onCancelEdit: d,
           align: "right",
-          ...m
+          ...h
         }
       );
-    case Ie(e.data): {
-      const A = s?.includes("list");
+    case _e(e.data): {
+      const D = n?.includes("list");
       let L = [];
-      A ? L = Array.isArray(F) ? F : [] : c ? L = [] : L = [F];
-      let P = k.map((x) => ({
-        value: x.value,
-        label: x.label,
-        icon: Ve(x.icon),
-        color: x.color,
-        group: x.group,
-        hidden: x.hidden
+      D ? L = Array.isArray(C) ? C : [] : g ? L = [] : L = [C];
+      let P = k.map((U) => ({
+        value: U.value,
+        label: U.label,
+        icon: He(U.icon),
+        color: U.color,
+        group: U.group,
+        hidden: U.hidden
       }));
-      return e.name === "status" && i.length > 0 && T && T.length > 0 && (P = T.map((x) => ({
-        value: x.name,
-        label: x.name,
-        icon: x.icon,
-        color: x.color
-      }))), e.name === "taskType" && i.length > 0 && S && S.length > 0 && (P = S.map((x) => ({
-        value: x.name,
-        label: x.name,
-        icon: x.icon,
-        color: x.color
-      }))), e.allowNone && L.length && !A && F && F !== "" && (P = [
+      return e.name === "status" && i.length > 0 && E && E.length > 0 && (P = E.map((U) => ({
+        value: U.name,
+        label: U.name,
+        icon: U.icon,
+        color: U.color
+      }))), e.name === "taskType" && i.length > 0 && S && S.length > 0 && (P = S.map((U) => ({
+        value: U.name,
+        label: U.name,
+        icon: U.icon,
+        color: U.color
+      }))), e.allowNone && L.length && !D && C && C !== "" && (P = [
         { value: "", label: `No ${e.data.title || e.name}` },
         ...P
-      ]), /* @__PURE__ */ g(
-        jt,
+      ]), /* @__PURE__ */ u(
+        $t,
         {
           "data-tooltip": l,
           value: L,
           options: P,
-          type: s,
+          type: n,
           pt: {
             template: {
               style: { height: 32 },
               className: "enum"
             }
           },
-          placeholder: l ? `Could not load ${y}` : c ? `Mixed ${y}` : `Select ${y}...`,
-          error: Be(l),
+          placeholder: l ? `Could not load ${b}` : g ? `Mixed ${b}` : `Select ${b}...`,
+          error: Qe(l),
           onCancelEdit: d,
           align: "right",
           enableCustomValues: e.enableCustomValues,
-          isLoadingOptions: C,
+          isLoadingOptions: j,
           search: e.enableSearch ?? P.length >= 5,
           sortBySelected: !P,
-          ...$,
-          ...m
+          ...N,
+          ...h
         }
       );
     }
-    case (s === "string" || s === "integer" || s === "float"):
+    case (n === "string" || n === "integer" || n === "float"):
     default:
-      return v === "markdown" ? /* @__PURE__ */ g(
-        Ge,
+      return v === "markdown" ? /* @__PURE__ */ u(
+        Ze,
         {
-          value: F.toString(),
+          value: C.toString(),
           onCancelEdit: d,
-          onExpand: h,
-          showExpand: !!h,
-          ...m
+          onExpand: p,
+          showExpand: !!p,
+          ...h
         }
-      ) : /* @__PURE__ */ g(ce, { children: /* @__PURE__ */ g(
-        Ke,
+      ) : /* @__PURE__ */ u(de, { children: /* @__PURE__ */ u(
+        Xe,
         {
-          value: F.toString(),
+          value: C.toString(),
           onCancelEdit: d,
-          type: s,
-          ...m
+          type: n,
+          ...h
         }
       ) });
   }
-}, Ct = p.div`
+}, Rt = m.div`
   color: var(--md-sys-color-outline);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
-`, ke = ({
+`, Se = ({
   name: e,
   data: t,
-  showDetailedTooltip: r = !1,
-  ...o
+  showDetailedTooltip: o = !1,
+  ...r
 }) => {
-  const c = t.title ? ie(t.title) : ie(e), n = r ? `${c} (${e}) ${t.description ? "-" : ""} ${t.description || ""}` : t.description || c;
-  return /* @__PURE__ */ g(
-    Ct,
+  const g = t.title ? se(t.title) : se(e), c = o ? `${g} (${e}) ${t.description ? "-" : ""} ${t.description || ""}` : t.description || g;
+  return /* @__PURE__ */ u(
+    Rt,
     {
-      "data-tooltip": r ? n : void 0,
+      "data-tooltip": o ? c : void 0,
       "data-tooltip-delay": 700,
-      ...o,
-      children: c
+      ...r,
+      children: g
     }
   );
-}, Ee = p.div`
+}, Te = m.div`
   display: grid;
   grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) 32px;
   row-gap: 2px;
@@ -634,7 +645,7 @@ const se = [], ht = (e) => {
       margin-top: 6px;
     }
   }
-`, At = p.div`
+`, Wt = m.div`
   height: 32px;
   overflow: hidden;
   width: 100%;
@@ -670,7 +681,7 @@ const se = [], ht = (e) => {
   &.readonly {
     pointer-events: none;
   }
-`, Nt = p.div`
+`, Lt = m.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
@@ -680,7 +691,7 @@ const se = [], ht = (e) => {
     height: 32px;
     padding: 2px;
   }
-`, $t = p(Ee)`
+`, Pt = m(Te)`
   &.loading {
     width: 100%;
     height: 33px;
@@ -688,114 +699,114 @@ const se = [], ht = (e) => {
     border-radius: 4px;
     margin-bottom: 4px;
   }
-`, Mt = ({
+`, Bt = ({
   title: e,
   isLoading: t,
-  form: r,
-  fields: o,
-  enableEditing: c,
-  mixedFields: n,
+  form: o,
+  fields: r,
+  enableEditing: g,
+  mixedFields: c,
   onChange: a,
   onMixedChange: d,
-  entities: h = [],
+  entities: p = [],
   projectName: i,
-  entityType: u = "task"
+  entityType: f = "task"
 }) => {
-  const [f, s] = O(null), v = I(
-    () => h.map((b) => b?.id).join("|"),
-    [h]
+  const [s, n] = O(null), v = I(
+    () => p.map((y) => y?.id).join("|"),
+    [p]
   );
-  q(() => {
-    s(null);
+  G(() => {
+    n(null);
   }, [v]);
-  const m = (b) => {
-    c && !o.find((k) => k.name === b)?.readonly ? s(b) : console.log("Editing not allowed:", {
-      enableEditing: c,
-      fieldReadonly: o.find((k) => k.name === b)?.readonly
+  const h = (y) => {
+    g && !r.find((k) => k.name === y)?.readonly ? n(y) : console.log("Editing not allowed:", {
+      enableEditing: g,
+      fieldReadonly: r.find((k) => k.name === y)?.readonly
     });
-  }, w = (b, k) => {
-    s(null), a?.(b, k);
-  }, T = (b, k) => {
-    s(null), d?.(b, k);
+  }, x = (y, k) => {
+    n(null), a?.(y, k);
+  }, E = (y, k) => {
+    n(null), d?.(y, k);
   }, S = () => {
-    s(null);
+    n(null);
   };
-  return t ? /* @__PURE__ */ g(J, { title: "Attributes", withPadding: !0, children: Array.from({ length: 10 }).map((b, k) => /* @__PURE__ */ R($t, { children: [
-    /* @__PURE__ */ g("div", { className: "loading" }),
-    /* @__PURE__ */ g("div", { className: "loading" })
-  ] }, k)) }) : /* @__PURE__ */ g(
-    J,
+  return t ? /* @__PURE__ */ u(Z, { title: "Attributes", withPadding: !0, children: Array.from({ length: 10 }).map((y, k) => /* @__PURE__ */ z(Pt, { children: [
+    /* @__PURE__ */ u("div", { className: "loading" }),
+    /* @__PURE__ */ u("div", { className: "loading" })
+  ] }, k)) }) : /* @__PURE__ */ u(
+    Z,
     {
       title: "Attributes",
       autoHeight: !0,
       showHeader: !0,
       withPadding: !0,
       pt: { content: { style: { minHeight: "unset" } } },
-      children: o.filter((b) => !b.hidden).map((b) => {
-        const k = r[b.name], C = f === b.name, E = b.readonly || !c, D = n?.includes(b.name) || !1;
-        return /* @__PURE__ */ R(
-          Ee,
+      children: r.filter((y) => !y.hidden).map((y) => {
+        const k = o[y.name], j = s === y.name, w = y.readonly || !g, T = c?.includes(y.name) || !1;
+        return /* @__PURE__ */ z(
+          Te,
           {
-            className: U("field-row", { "multi-line": b.data.widget === "markdown" }),
+            className: W("field-row", { "multi-line": y.data.widget === "markdown" }),
             children: [
-              /* @__PURE__ */ g(
-                ke,
+              /* @__PURE__ */ u(
+                Se,
                 {
-                  name: b.name,
-                  data: b.data,
+                  name: y.name,
+                  data: y.data,
                   showDetailedTooltip: !0,
                   className: "field-label"
                 }
               ),
-              /* @__PURE__ */ g(
-                At,
+              /* @__PURE__ */ u(
+                Wt,
                 {
-                  className: U("field-value", {
-                    editing: C,
-                    readonly: E
+                  className: W("field-value", {
+                    editing: j,
+                    readonly: w
                   }),
                   onClick: (l) => {
-                    l.target.closest("a") || (l.preventDefault(), !C && !E && b.data.type !== "boolean" && m(b.name));
+                    l.target.closest("a") || (l.preventDefault(), !j && !w && y.data.type !== "boolean" && h(y.name));
                   },
-                  children: /* @__PURE__ */ g(
-                    Ft,
+                  children: /* @__PURE__ */ u(
+                    zt,
                     {
-                      field: b,
+                      field: y,
                       value: k,
-                      isEditing: C,
-                      isReadOnly: E,
-                      isMixed: D,
-                      onChange: w,
-                      onMixedChange: d && T,
+                      isEditing: j,
+                      isReadOnly: w,
+                      isMixed: T,
+                      onChange: x,
+                      onMixedChange: d && E,
                       onCancelEdit: S,
                       onExpand: () => {
                       },
-                      entities: h,
+                      entities: p,
                       projectName: i,
-                      entityType: u
+                      entityType: f
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ g(Nt, { className: "field-tools", children: /* @__PURE__ */ g(
-                _,
+              /* @__PURE__ */ u(Lt, { className: "field-tools", children: /* @__PURE__ */ u(
+                Q,
                 {
                   className: "tool",
                   variant: "text",
                   icon: "content_copy",
                   onClick: (l) => {
-                    l.preventDefault(), l.stopPropagation(), oe((k ?? "").toString(), !0);
+                    l.preventDefault(), l.stopPropagation(), re((k ?? "").toString(), !0);
                   }
                 }
               ) })
             ]
           },
-          b.name
+          y.name
         );
       })
     }
   );
-}, de = p.div`
+}, pe = m.div`
   display: grid;
   grid-template-columns: minmax(200px, 1fr) 1fr 32px;
   row-gap: 2px;
@@ -818,7 +829,7 @@ const se = [], ht = (e) => {
   &:hover .copy-icon {
     opacity: 1;
   }
-`, zt = p.div`
+`, Ot = m.div`
   text-align: left;
   color: var(--md-sys-color-on-surface);
   white-space: nowrap;
@@ -827,7 +838,13 @@ const se = [], ht = (e) => {
   justify-self: end;
   font-size: 14px;
   width: 100%;
-`, pe = p.div`
+
+  &:has(img) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+`, ue = m.div`
   height: 20px;
   background: var(--md-sys-color-surface-container-low);
   border-radius: 4px;
@@ -844,55 +861,59 @@ const se = [], ht = (e) => {
       opacity: 0.5;
     }
   }
-`, Rt = ({
+`, It = ({
   fields: e,
   form: t,
-  mixedFields: r = [],
-  isLoading: o
+  mixedFields: o = [],
+  isLoading: r,
+  users: g = []
 }) => {
-  const c = (n, a) => {
-    if (n == null)
+  const c = (a, d) => {
+    if (a == null)
       return "-";
-    if (a === "createdAt" || a === "updatedAt")
+    if (d === "createdAt" || d === "updatedAt")
       try {
-        return lt(new Date(n), "PPpp");
+        return mt(new Date(a), "PPpp");
       } catch {
-        return n.toString();
+        return a.toString();
       }
-    return n.toString();
+    return a.toString();
   };
-  return o ? /* @__PURE__ */ g(J, { title: "Details", withPadding: !0, children: Array.from({ length: 6 }).map((n, a) => /* @__PURE__ */ R(de, { children: [
-    /* @__PURE__ */ g(pe, { style: { width: "80px" } }),
-    /* @__PURE__ */ g(pe, { style: { width: "120px", justifySelf: "end" } }),
-    /* @__PURE__ */ g("div", { style: { width: "24px" } })
-  ] }, a)) }) : /* @__PURE__ */ g(J, { title: "Details", autoHeight: !0, showHeader: !0, withPadding: !0, children: e.filter((n) => !n.hidden).map((n) => {
-    const a = t[n.name], d = r.includes(n.name), h = d ? "Multiple values" : c(a, n.name);
-    return /* @__PURE__ */ R(de, { children: [
-      /* @__PURE__ */ g(ke, { name: n.name, data: n.data, showDetailedTooltip: !0 }),
-      /* @__PURE__ */ g(
-        zt,
+  return r ? /* @__PURE__ */ u(Z, { title: "Details", withPadding: !0, children: Array.from({ length: 6 }).map((a, d) => /* @__PURE__ */ z(pe, { children: [
+    /* @__PURE__ */ u(ue, { style: { width: "80px" } }),
+    /* @__PURE__ */ u(ue, { style: { width: "120px", justifySelf: "end" } }),
+    /* @__PURE__ */ u("div", { style: { width: "24px" } })
+  ] }, d)) }) : /* @__PURE__ */ u(Z, { title: "Details", autoHeight: !0, showHeader: !0, withPadding: !0, children: e.filter((a) => !a.hidden).map((a) => {
+    const d = t[a.name], p = o.includes(a.name), i = p ? "Multiple values" : c(d, a.name), s = ["createdBy", "updatedBy"].includes(a.name) && !p ? g.find((n) => n.name === d) : void 0;
+    return /* @__PURE__ */ z(pe, { children: [
+      /* @__PURE__ */ u(Se, { name: a.name, data: a.data, showDetailedTooltip: !0 }),
+      /* @__PURE__ */ z(
+        Ot,
         {
           style: {
-            color: d ? "var(--md-sys-color-on-surface-variant)" : "var(--md-sys-color-on-surface)",
-            fontStyle: d ? "italic" : "normal"
+            color: p ? "var(--md-sys-color-on-surface-variant)" : "var(--md-sys-color-on-surface)",
+            fontStyle: p ? "italic" : "normal"
           },
-          children: h
+          children: [
+            s && /* @__PURE__ */ u(ot, { name: s.name, fullName: s.fullName || void 0, size: 20 }),
+            s ? s.fullName || s.name : i
+          ]
         }
       ),
-      /* @__PURE__ */ g(
-        _,
+      /* @__PURE__ */ u(
+        Q,
         {
           className: "copy-icon",
           variant: "text",
           icon: "content_copy",
-          onClick: (i) => {
-            i.stopPropagation(), oe((a ?? "").toString(), !0);
+          onClick: (n) => {
+            n.stopPropagation(), re((d ?? "").toString(), !0);
           }
         }
       )
-    ] }, n.name);
+    ] }, a.name);
   }) });
-}, Ut = p.div`
+}, Vt = m.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -901,106 +922,112 @@ const se = [], ht = (e) => {
   padding-right: 8px;
   padding-left: 8px;
   margin-top: 16px;
-`, Xo = ({ entities: e = [], isLoading: t }) => {
-  const { formData: r, mixedFields: o, updateFormData: c, clearMixedField: n } = xt(
+`, nr = ({ entities: e = [], isLoading: t }) => {
+  const { formData: o, mixedFields: r, updateFormData: g, clearMixedField: c } = At(
     e,
     t
-  ), { attributes: a } = nt(), {
+  ), { attributes: a } = dt(), {
     folderTypes: d = [],
-    taskTypes: h = [],
+    taskTypes: p = [],
     statuses: i = [],
-    tags: u = [],
-    productTypes: f
-  } = it(), { openSlideOut: s } = re(), [, v] = dt(), m = (e || []).filter((x) => x.entityType === "folder"), { data: w } = tt(
+    tags: f = [],
+    productTypes: s
+  } = pt(), { openSlideOut: n } = ae(), [, v] = ht(), h = (e || []).filter((A) => A.entityType === "folder"), { data: x } = nt(
     {
-      entityIds: m.map((x) => x.id),
-      projectName: r?.projectName || "",
+      entityIds: h.map((A) => A.id),
+      projectName: o?.projectName || "",
       referenceTypes: ["origin", "mention", "relation"],
       activityTypes: ["version.publish"]
     },
     {
-      skip: !r?.projectName || m.length === 0
+      skip: !o?.projectName || h.length === 0
     }
-  ), T = !!w?.pages?.[0]?.activities?.length, S = r?.entityType || "task", { enableEditing: b, attribAccess: k, updateEntity: C } = Et({
+  ), E = !!x?.pages?.[0]?.activities?.length, S = o?.entityType || "task", { enableEditing: y, attribAccess: k, updateEntity: j } = Ct({
     entities: e,
     entityType: S
-  }), { editableFields: E, readOnlyFieldsData: D } = wt({
+  }), { editableFields: w, readOnlyFieldsData: T } = jt({
     attributes: a,
     folderTypes: d,
-    taskTypes: h,
+    taskTypes: p,
     statuses: i,
-    tags: u,
-    entityType: r?.entityType,
-    folderHasVersions: T,
+    tags: f,
+    entityType: o?.entityType,
+    folderHasVersions: E,
     attribAccess: k
-  }), { writableAttributes: l } = k, N = !l || l.includes("description"), $ = (x, M) => {
-    x === "tags" && (Array.isArray(M) || (M == null || M === "" ? M = [] : M = [String(M)])), x.startsWith("attrib.") && (M = {
-      [x.replace("attrib.", "")]: M
-    }, x = "attrib"), c(x, M), C(x, M);
-  }, z = (x, M) => {
-    const B = x.startsWith("attrib.") ? x.replace("attrib.", "") : void 0, Z = (W) => {
-      const H = B ? W.attrib?.[B] : W.tags;
+  }), l = [o?.createdBy, o?.updatedBy].filter(
+    (A) => typeof A == "string" && !!A
+  ), { data: $ = [] } = it(
+    { names: l, projectName: o?.projectName || "" },
+    { skip: !l.length || !o?.projectName }
+  ), { writableAttributes: N } = k, R = !N || N.includes("description"), C = (A, M) => {
+    A === "tags" && (Array.isArray(M) || (M == null || M === "" ? M = [] : M = [String(M)])), A.startsWith("attrib.") && (M = {
+      [A.replace("attrib.", "")]: M
+    }, A = "attrib"), g(A, M), j(A, M);
+  }, b = (A, M) => {
+    const _ = A.startsWith("attrib.") ? A.replace("attrib.", "") : void 0, X = (B) => {
+      const H = _ ? B.attrib?.[_] : B.tags;
       return Array.isArray(H) ? H.map(String) : [];
-    }, G = new Map(
-      e.map((W) => [W.id, je(Z(W), M)])
+    }, K = new Map(
+      e.map((B) => [B.id, De(X(B), M)])
     );
-    c(x, [...new Set([...G.values()].flat())]), C(B ? "attrib" : x, (W) => {
-      const H = G.get(W) || [];
-      return B ? { [B]: H } : H;
+    g(A, [...new Set([...K.values()].flat())]), j(_ ? "attrib" : A, (B) => {
+      const H = K.get(B) || [];
+      return _ ? { [_]: H } : H;
     });
-  }, F = r?.projectName || e[0]?.projectName, y = e[0]?.id, j = I(
-    () => F && y ? { projectName: F, entityType: S, entityId: y, productTypes: f, taskTypes: h } : void 0,
-    [F, S, y, f, h]
-  ), A = ({ type: x, id: M }) => {
-    x === "user" || x === "team" || !F || s({ entityId: M, entityType: x, projectName: F });
-  }, L = ({ type: x, id: M, label: B }, Z) => {
-    const { x: G, y: W, width: H } = Z.getBoundingClientRect();
-    v({ id: M, name: M, type: x, label: B, pos: { left: G + H / 2, top: W } });
-  }, P = (x) => {
-    c("description", x), n("description"), C("attrib", { description: x });
+  }, F = o?.projectName || e[0]?.projectName, D = e[0]?.id, L = I(
+    () => F && D ? { projectName: F, entityType: S, entityId: D, productTypes: s, taskTypes: p } : void 0,
+    [F, S, D, s, p]
+  ), P = ({ type: A, id: M }) => {
+    A === "user" || A === "team" || !F || n({ entityId: M, entityType: A, projectName: F });
+  }, U = ({ type: A, id: M, label: _ }, X) => {
+    const { x: K, y: B, width: H } = X.getBoundingClientRect();
+    v({ id: M, name: M, type: A, label: _, pos: { left: K + H / 2, top: B } });
+  }, Fe = (A) => {
+    g("description", A), c("description"), j("attrib", { description: A });
   };
-  return /* @__PURE__ */ R(Ut, { children: [
-    /* @__PURE__ */ g(
-      Xe,
+  return /* @__PURE__ */ z(Vt, { children: [
+    /* @__PURE__ */ u(
+      tt,
       {
-        description: r?.description || "",
-        isMixed: o.includes("description"),
-        enableEditing: N,
-        onChange: P,
+        description: o?.description || "",
+        isMixed: r.includes("description"),
+        enableEditing: R,
+        onChange: Fe,
         isLoading: t,
-        mentionsContext: j,
-        onMentionClick: A,
-        onMentionHover: L
+        mentionsContext: L,
+        onMentionClick: P,
+        onMentionHover: U
       }
     ),
-    /* @__PURE__ */ g(pt, {}),
-    /* @__PURE__ */ g(
-      Mt,
+    /* @__PURE__ */ u(ft, {}),
+    /* @__PURE__ */ u(
+      Bt,
       {
-        fields: E,
-        form: r || {},
-        mixedFields: o,
+        fields: w,
+        form: o || {},
+        mixedFields: r,
         isLoading: t,
-        enableEditing: b,
-        onChange: $,
-        onMixedChange: z,
+        enableEditing: y,
+        onChange: C,
+        onMixedChange: b,
         entities: e,
         entityType: S
       }
     ),
-    /* @__PURE__ */ g(
-      Rt,
+    /* @__PURE__ */ u(
+      It,
       {
-        fields: D,
-        form: r || {},
-        mixedFields: o,
-        isLoading: t
+        fields: T,
+        form: o || {},
+        mixedFields: r,
+        isLoading: t,
+        users: $
       }
     )
   ] });
-}, Yo = p.div`
+}, ir = m.div`
   position: relative;
-`, er = p.div`
+`, sr = m.div`
   position: relative;
   padding: 8px;
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
@@ -1032,13 +1059,13 @@ const se = [], ht = (e) => {
     /* align center */
     align-items: center;
   }
-`, tr = p(_)`
+`, lr = m(Q)`
   position: absolute;
   right: 4px;
   top: 4px;
   width: fit-content;
   z-index: 50;
-`, or = p.header`
+`, cr = m.header`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -1053,7 +1080,7 @@ const se = [], ht = (e) => {
       display: none;
     }
   }
-`, rr = p.div`
+`, dr = m.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -1061,7 +1088,7 @@ const se = [], ht = (e) => {
   h2 {
     min-width: fit-content;
   }
-`, ar = p.div`
+`, pr = m.div`
   position: relative;
   height: 100%;
 
@@ -1076,7 +1103,7 @@ const se = [], ht = (e) => {
     flex-direction: column;
     gap: var(--base-gap-small);
   }
-`, nr = p.div`
+`, ur = m.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1114,7 +1141,7 @@ const se = [], ht = (e) => {
     align-items: center;
     gap: var(--base-gap-medium);
   }
-`, ir = p.div`
+`, mr = m.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -1123,10 +1150,10 @@ const se = [], ht = (e) => {
   label {
     color: var(--md-sys-color-outline);
   }
-`, sr = p.div`
+`, gr = m.div`
   display: flex;
   flex-direction: column;
-`, lr = p(De)`
+`, hr = m(Ce)`
   width: fit-content;
   .status-field.value {
     position: relative;
@@ -1137,11 +1164,11 @@ const se = [], ht = (e) => {
     margin-bottom: 2px;
     color: ${(e) => e.$textColor};
   }
-`, cr = p(Fe)`
+`, fr = m(Ne)`
   width: fit-content;
   justify-self: end;
   max-width: 100%;
-`, dr = p(Ce)`
+`, vr = m(Ue)`
   height: 24px;
   .template-value {
     padding: 0 2px;
@@ -1155,7 +1182,7 @@ const se = [], ht = (e) => {
       display: none;
     }
   }
-`, pr = p.div`
+`, yr = m.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -1175,7 +1202,7 @@ const se = [], ht = (e) => {
     border-radius: 3px;
     padding: 0 4px;
   }
-`, ur = p(Ae)`
+`, br = m($e)`
   width: max-content;
   justify-self: end;
   /* remove text and dropdown icon */
@@ -1199,12 +1226,12 @@ const se = [], ht = (e) => {
       background-color: var(--md-sys-color-surface-container-low-hover);
     }
   }
-`, mr = p.footer`
+`, xr = m.footer`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
   justify-content: space-between;
-`, gr = p.div`
+`, wr = m.div`
   height: 100%;
 
   > input[type='file'] {
@@ -1215,7 +1242,7 @@ const se = [], ht = (e) => {
   input[type='file'] {
     display: none;
   }
-`, hr = p.div`
+`, kr = m.div`
   z-index: 100;
   position: absolute;
   inset: 0;
@@ -1227,7 +1254,7 @@ const se = [], ht = (e) => {
   display: flex;
   align-items: center;
   justify-content: center;
-`, fr = p.div`
+`, Er = m.div`
   flex: 1;
   height: 100%;
   border-radius: var(--border-radius-l);
@@ -1256,11 +1283,11 @@ const se = [], ht = (e) => {
     /* show children */
     opacity: 1;
   }
-`, vr = p(_)`
+`, Sr = m(Q)`
   position: absolute;
   top: 4px;
   right: 4px;
-`, yr = p.div`
+`, Tr = m.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1273,7 +1300,7 @@ const se = [], ht = (e) => {
     top: 12px;
     position: relative;
   }
-`, br = p.div`
+`, Fr = m.div`
   height: 8px;
   position: absolute;
   border-radius: 4px;
@@ -1282,14 +1309,14 @@ const se = [], ht = (e) => {
   background-color: var(--md-sys-color-primary);
 
   transition: right 0.2s;
-`, Lt = be`
+`, _t = xe`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-`, Pt = p.div`
+`, Ht = m.div`
   position: relative;
   display: flex;
   justify-content: center;
@@ -1298,10 +1325,15 @@ const se = [], ht = (e) => {
   overflow: hidden;
 
   background-color: var(--md-sys-color-surface-container-low);
-`, Wt = p(V)`
-  animation: ${Lt} 1s linear infinite;
+
+  /* the hover-scrub filmstrip replaces the static image */
+  &[data-filmstrip-active] > img {
+    visibility: hidden;
+  }
+`, Qt = m(V)`
+  animation: ${_t} 1s linear infinite;
   opacity: 0.6;
-`, Ot = p.img`
+`, qt = m.img`
   position: absolute;
   inset: 0;
   object-fit: cover;
@@ -1313,56 +1345,62 @@ const se = [], ht = (e) => {
   &.hidden {
     opacity: 0;
   }
-`, It = ({ mimetype: e = "", src: t, ...r }) => {
-  const [o, c] = O(!1), [n, a] = O(!1), d = ne(null), h = ne(0);
-  return q(() => {
-    const i = h.current + 1;
-    h.current = i, a(!1), c(!1);
-    const u = d.current;
-    let f = !1, s = 0, v = 0, m = 0;
-    const w = (k) => {
-      f || i !== h.current || (f = !0, cancelAnimationFrame(s), window.clearInterval(v), window.clearTimeout(m), k());
-    }, T = () => {
-      !u || i !== h.current || u.complete && u.naturalWidth > 0 && w(() => {
-        a(!0), c(!1);
+`, Gt = ({
+  mimetype: e = "",
+  src: t,
+  filmstripSrc: o,
+  ...r
+}) => {
+  const [g, c] = O(!1), [a, d] = O(!1), p = ie(null), i = ie(0);
+  return G(() => {
+    const f = i.current + 1;
+    i.current = f, d(!1), c(!1);
+    const s = p.current;
+    let n = !1, v = 0, h = 0, x = 0;
+    const E = (j) => {
+      n || f !== i.current || (n = !0, cancelAnimationFrame(v), window.clearInterval(h), window.clearTimeout(x), j());
+    }, S = () => {
+      !s || f !== i.current || s.complete && s.naturalWidth > 0 && E(() => {
+        d(!0), c(!1);
       });
-    }, S = () => w(() => {
-      a(!0), c(!1);
-    }), b = () => w(() => {
-      a(!0), c(!0);
+    }, y = () => E(() => {
+      d(!0), c(!1);
+    }), k = () => E(() => {
+      d(!0), c(!0);
     });
-    return u && (u.addEventListener("load", S), u.addEventListener("error", b), typeof u.decode == "function" && u.decode().then(
-      () => w(() => {
-        a(!0), c(!1);
+    return s && (s.addEventListener("load", y), s.addEventListener("error", k), typeof s.decode == "function" && s.decode().then(
+      () => E(() => {
+        d(!0), c(!1);
       })
     ).catch(() => {
-      T();
-    })), s = requestAnimationFrame(T), v = window.setInterval(T, 250), m = window.setTimeout(() => {
-      w(() => {
-        u && u.naturalWidth > 0 ? (a(!0), c(!1)) : a(!0);
+      S();
+    })), v = requestAnimationFrame(S), h = window.setInterval(S, 250), x = window.setTimeout(() => {
+      E(() => {
+        s && s.naturalWidth > 0 ? (d(!0), c(!1)) : d(!0);
       });
     }, 1e4), () => {
-      cancelAnimationFrame(s), window.clearInterval(v), window.clearTimeout(m), u && (u.removeEventListener("load", S), u.removeEventListener("error", b));
+      cancelAnimationFrame(v), window.clearInterval(h), window.clearTimeout(x), s && (s.removeEventListener("load", y), s.removeEventListener("error", k));
     };
-  }, [t]), /* @__PURE__ */ R(Pt, { ...r, className: U("file-thumbnail", r.className), children: [
-    n ? /* @__PURE__ */ g(V, { icon: Ne(e) }) : /* @__PURE__ */ g(Wt, { icon: "progress_activity" }),
-    /* @__PURE__ */ g(
-      Ot,
+  }, [t]), /* @__PURE__ */ z(Ht, { ...r, className: W("file-thumbnail", r.className), children: [
+    a ? /* @__PURE__ */ u(V, { icon: Me(e) }) : /* @__PURE__ */ u(Qt, { icon: "progress_activity" }),
+    /* @__PURE__ */ u(
+      qt,
       {
-        ref: d,
+        ref: p,
         src: t,
         ...r,
-        onError: (i) => {
-          i.currentTarget === d.current && (a(!0), c(!0));
+        onError: (f) => {
+          f.currentTarget === p.current && (d(!0), c(!0));
         },
-        onLoad: (i) => {
-          i.currentTarget === d.current && (a(!0), c(!1));
+        onLoad: (f) => {
+          f.currentTarget === p.current && (d(!0), c(!1));
         },
-        className: U({ hidden: !n || o })
+        className: W({ hidden: !a || g })
       }
-    )
+    ),
+    o && /* @__PURE__ */ u(ke, { src: o, fit: "cover" })
   ] });
-}, Vt = p.div`
+}, Kt = m.div`
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -1429,7 +1467,7 @@ const se = [], ht = (e) => {
       background-color: var(--md-sys-color-primary-container);
     }
   }
-`, Bt = p.div`
+`, Jt = m.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -1454,15 +1492,15 @@ const se = [], ht = (e) => {
   .name {
     color: var(--md-sys-color-outline);
   }
-`, Ht = p.div`
+`, Zt = m.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
 
   h4 {
-    ${$e.titleSmall}
+    ${ze.titleSmall}
   }
-`, _t = p(_)`
+`, Xt = m(Q)`
   /* hidden by default and show on card hover */
   display: none;
   .icon {
@@ -1474,78 +1512,79 @@ const se = [], ht = (e) => {
   }
 
   margin: -2px;
-`, Qt = p(It)`
+`, Yt = m(Gt)`
   width: 71px;
   height: 40px;
 
   border-radius: var(--border-radius-m);
 
   object-fit: cover;
-`, qt = p(V)`
+`, eo = m(V)`
   font-size: 25px;
 
   cursor: grab;
 
   /* default hidden */
   opacity: 0;
-`, xr = ee(
+`, Ar = te(
   ({
     availability: e,
     projectName: t,
-    fileId: r,
-    filename: o,
-    label: c,
-    processing: n,
+    fileId: o,
+    filename: r,
+    label: g,
+    processing: c,
     mimetype: a,
     isDragOverlay: d,
-    isDropPlaceholder: h,
+    isDropPlaceholder: p,
     isSelected: i,
-    isDragging: u,
-    dragProps: f = {},
-    sortingDisabled: s,
+    isDragging: f,
+    dragProps: s = {},
+    sortingDisabled: n,
     onEdit: v,
-    ...m
-  }, w) => {
-    const T = (f || d) && !s, S = e === "conversionRecommended", b = S && !!n;
-    let k = o;
-    S && (k = "Unoptimized - conversion recommended"), b && (k = "Unoptimized - queued for conversion");
-    let C = c;
-    return S && (C = o), /* @__PURE__ */ R(
-      Vt,
+    ...h
+  }, x) => {
+    const E = (s || d) && !n, S = e === "conversionRecommended", y = S && !!c;
+    let k = r;
+    S && (k = "Unoptimized - conversion recommended"), y && (k = "Unoptimized - queued for conversion");
+    let j = g;
+    return S && (j = r), /* @__PURE__ */ z(
+      Kt,
       {
-        id: r,
-        ref: w,
-        className: U({
-          draggable: T,
-          "drop-placeholder": h,
+        id: o,
+        ref: x,
+        className: W({
+          draggable: E,
+          "drop-placeholder": p,
           "drag-overlay": d,
-          dragging: u,
+          dragging: f,
           // is anything dragging
           selected: i,
           editable: !!v
         }),
-        ...m,
+        ...h,
         children: [
-          /* @__PURE__ */ g(
-            Qt,
+          /* @__PURE__ */ u(
+            Yt,
             {
-              src: `/api/projects/${t}/files/${r}/thumbnail`,
-              mimetype: a
+              src: `/api/projects/${t}/files/${o}/thumbnail`,
+              mimetype: a,
+              filmstripSrc: !f && a?.startsWith("video/") ? vt(t, o) : null
             }
           ),
-          /* @__PURE__ */ R(Bt, { children: [
-            /* @__PURE__ */ R(Ht, { children: [
-              /* @__PURE__ */ g("h4", { children: C }),
-              !!v && /* @__PURE__ */ g(_t, { icon: "edit", variant: "text", className: "edit", onClick: v })
+          /* @__PURE__ */ z(Jt, { children: [
+            /* @__PURE__ */ z(Zt, { children: [
+              /* @__PURE__ */ u("h4", { children: j }),
+              !!v && /* @__PURE__ */ u(Xt, { icon: "edit", variant: "text", className: "edit", onClick: v })
             ] }),
-            /* @__PURE__ */ g("span", { className: "name", children: k })
+            /* @__PURE__ */ u("span", { className: "name", children: k })
           ] }),
-          T && /* @__PURE__ */ g(qt, { className: "handle", ...f, icon: "drag_indicator" })
+          E && /* @__PURE__ */ u(eo, { className: "handle", ...s, icon: "drag_indicator" })
         ]
       }
     );
   }
-), Gt = be`
+), to = xe`
   from {
     transform: rotate(360deg);
   }
@@ -1554,7 +1593,7 @@ const se = [], ht = (e) => {
     transform: rotate(0deg);
   }
 
-`, Kt = p.div`
+`, oo = m.div`
   position: relative;
   width: 100%;
   min-height: 50px;
@@ -1620,13 +1659,13 @@ const se = [], ht = (e) => {
   & > * {
     z-index: 10;
   }
-`, Jt = p.div`
+`, ro = m.div`
   position: absolute;
   inset: 0;
   background-color: var(--md-sys-color-primary-container);
   z-index: 0;
   transition: right 0.2s;
-`, Zt = p.div`
+`, ao = m.div`
   position: relative;
   width: 71px;
   height: 40px;
@@ -1645,7 +1684,7 @@ const se = [], ht = (e) => {
 
     &.spinning {
       /* spin animation */
-      animation: ${Gt} 1s infinite linear;
+      animation: ${to} 1s infinite linear;
     }
   }
 
@@ -1657,84 +1696,84 @@ const se = [], ht = (e) => {
     object-fit: cover;
     opacity: 0.5;
   }
-`, ue = ({
+`, me = ({
   name: e,
   progress: t,
-  size: r,
-  type: o,
-  fileId: c,
-  src: n,
+  size: o,
+  type: r,
+  fileId: g,
+  src: c,
   error: a,
   tooltip: d,
-  onRemove: h,
+  onRemove: p,
   ...i
 }) => {
-  let u = "", f = !1, s = "";
-  switch (o) {
+  let f = "", s = !1, n = "";
+  switch (r) {
     case "processing":
-      u = "Transcoding", f = !0, s = "settings";
+      f = "Transcoding", s = !0, n = "settings";
       break;
     case "unsupported":
-      u = "Unsupported - conversion required", s = "visibility_off";
+      f = "Unsupported - conversion required", n = "visibility_off";
       break;
     case "upload":
-      u = "Uploading", f = !0, s = "sync";
+      f = "Uploading", s = !0, n = "sync";
       break;
     case "queued":
-      u = "Queued - waiting to be transcoded", s = "hourglass";
+      f = "Queued - waiting to be transcoded", n = "hourglass";
       break;
     case "waiting":
-      u = "Waiting for upload", s = "schedule";
+      f = "Waiting for upload", n = "schedule";
       break;
     case "importing":
-      u = "Importing", s = "upload_file";
+      f = "Importing", n = "upload_file";
       break;
     case "validating":
-      u = "Validating", s = "checklist";
+      f = "Validating", n = "checklist";
       break;
   }
-  a && (f = !1, s = "error");
+  a && (s = !1, n = "error");
   const v = t !== void 0 ? `- ${t}%` : "";
-  return /* @__PURE__ */ R(
-    Kt,
+  return /* @__PURE__ */ z(
+    oo,
     {
-      className: U({ finished: t === 100, error: !!a, [o]: !0 }),
-      id: c,
+      className: W({ finished: t === 100, error: !!a, [r]: !0 }),
+      id: g,
       ...i,
       children: [
-        /* @__PURE__ */ R(Zt, { children: [
-          n && /* @__PURE__ */ g("img", { src: n }),
-          s && /* @__PURE__ */ g(V, { icon: s, className: U({ spinning: f }) })
+        /* @__PURE__ */ z(ao, { children: [
+          c && /* @__PURE__ */ u("img", { src: c }),
+          n && /* @__PURE__ */ u(V, { icon: n, className: W({ spinning: s }) })
         ] }),
-        /* @__PURE__ */ R("span", { className: "content", children: [
-          /* @__PURE__ */ g("span", { className: "name", children: e }),
-          /* @__PURE__ */ g("span", { className: "message", children: a || `${u} ${v}` })
+        /* @__PURE__ */ z("span", { className: "content", children: [
+          /* @__PURE__ */ u("span", { className: "name", children: e }),
+          /* @__PURE__ */ u("span", { className: "message", children: a || `${f} ${v}` })
         ] }),
-        r && /* @__PURE__ */ g("span", { className: "size", children: Me(r) }),
-        d && /* @__PURE__ */ g(V, { icon: "info", className: "info", "data-tooltip": d, "data-tooltip-as": "markdown" }),
-        (a || o === "waiting") && /* @__PURE__ */ g(_, { icon: "close", variant: "text", onClick: h }),
-        /* @__PURE__ */ g(Jt, { className: "progress", style: { right: `${100 - (t ?? 0)}%` } })
+        o && /* @__PURE__ */ u("span", { className: "size", children: Re(o) }),
+        d && /* @__PURE__ */ u(V, { icon: "info", className: "info", "data-tooltip": d, "data-tooltip-as": "markdown" }),
+        (a || r === "waiting") && /* @__PURE__ */ u(Q, { icon: "close", variant: "text", onClick: p }),
+        /* @__PURE__ */ u(ro, { className: "progress", style: { right: `${100 - (t ?? 0)}%` } })
       ]
     },
     e
   );
 };
-p.div`
+m.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
   min-height: 100%;
   padding-bottom: var(--padding-m);
 `;
-const wr = p.div`
+const jr = m.div`
   position: relative;
   overflow: hidden;
   border-radius: var(--border-radius-m);
   width: 100%;
   min-height: 50px;
-`, kr = p.div`
+`, Dr = m.div`
   word-break: break-all;
-`, Xt = p.div`
+`, no = m.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
@@ -1751,7 +1790,7 @@ const wr = p.div`
   &.dragging {
     opacity: 0;
   }
-`, Yt = p.div`
+`, io = m.div`
   position: relative;
   min-height: 50px;
   display: flex;
@@ -1780,7 +1819,7 @@ const wr = p.div`
     opacity: 0;
     cursor: pointer;
   }
-`, eo = p.div`
+`, so = m.div`
   position: absolute;
   inset: var(--padding-s);
   background-color: var(--md-sys-color-surface-container-lowest);
@@ -1802,239 +1841,239 @@ const wr = p.div`
   .icon {
     font-size: 32px;
   }
-`, me = (e) => {
-  if (ye.isAxiosError(e)) {
+`, ge = (e) => {
+  if (be.isAxiosError(e)) {
     const t = e.response?.data;
     if (typeof t == "string" && t)
       return t;
     if (t && typeof t == "object" && "detail" in t) {
-      const r = t.detail;
-      if (typeof r == "string" && r)
-        return r;
+      const o = t.detail;
+      if (typeof o == "string" && o)
+        return o;
     }
     return e.message || e.response?.statusText || "Unknown upload error";
   }
   return e instanceof Error ? e.message : typeof e == "string" ? e : "Unknown upload error";
-}, to = ({
+}, lo = ({
   projectName: e,
   versionId: t,
-  taskId: r,
-  folderId: o,
-  productId: c,
-  dispatch: n,
+  taskId: o,
+  folderId: r,
+  productId: g,
+  dispatch: c,
   onUpload: a,
   onProgress: d
 }) => {
-  const [h, i] = O({}), u = Y(
-    (s) => {
+  const [p, i] = O({}), f = ee(
+    (n) => {
       t && i((v) => ({
         ...v,
-        [t]: v[t]?.filter((m) => m.name !== s) || []
+        [t]: v[t]?.filter((h) => h.name !== n) || []
       }));
     },
     [t]
   );
   return {
-    handleFileUpload: Y(
-      async (s, v) => {
-        const m = v || t;
-        if (!m || !e) return;
-        const w = Array.from(s), T = w.map((E) => ({
-          name: Q(E.name),
-          size: E.size,
+    handleFileUpload: ee(
+      async (n, v) => {
+        const h = v || t;
+        if (!h || !e) return;
+        const x = Array.from(n), E = x.map((w) => ({
+          name: q(w.name),
+          size: w.size,
           progress: 0
-        })), S = [...h[m] || [], ...T];
-        i({ ...h, [m]: S });
-        const b = (E) => (D) => {
-          if (!m) return;
-          console.log(`Upload successful for ${E.name}`);
-          const l = D.data;
-          e && (n(
+        })), S = [...p[h] || [], ...E];
+        i({ ...p, [h]: S });
+        const y = (w) => (T) => {
+          if (!h) return;
+          console.log(`Upload successful for ${w.name}`);
+          const l = T.data;
+          e && (c(
             // @ts-ignore
-            ot.util.updateQueryData(
+            st.util.updateQueryData(
               "getReviewablesForVersion",
-              { projectName: e, versionId: m },
-              (N) => {
-                N.reviewables || (N.reviewables = []), N.reviewables.push(l);
+              { projectName: e, versionId: h },
+              ($) => {
+                $.reviewables || ($.reviewables = []), $.reviewables.push(l);
               }
             )
-          ), c && n(K.util.invalidateTags([{ type: "viewer", id: c }])), n(K.util.invalidateTags([{ type: "viewer", id: m }])), o && n(K.util.invalidateTags([{ type: "viewer", id: o }])), r && n(K.util.invalidateTags([{ type: "viewer", id: r }])), u(Q(E.name)));
-        }, k = (E) => (D) => {
-          m && (console.error(`Upload failed for ${E.name}: ${D}`), i((l) => {
-            const $ = (l[m] || []).map((z) => z.name !== Q(E.name) ? z : {
-              ...z,
-              error: me(D)
+          ), g && c(J.util.invalidateTags([{ type: "viewer", id: g }])), c(J.util.invalidateTags([{ type: "viewer", id: h }])), r && c(J.util.invalidateTags([{ type: "viewer", id: r }])), o && c(J.util.invalidateTags([{ type: "viewer", id: o }])), f(q(w.name)));
+        }, k = (w) => (T) => {
+          h && (console.error(`Upload failed for ${w.name}: ${T}`), i((l) => {
+            const N = (l[h] || []).map((R) => R.name !== q(w.name) ? R : {
+              ...R,
+              error: ge(T)
             });
             return {
               ...l,
-              [m]: $
+              [h]: N
             };
           }));
-        }, C = (E) => m ? (D) => i((l) => {
-          const $ = (l[m] || []).map((y) => y.name !== Q(E.name) ? y : {
-            ...y,
-            progress: D.total ? Math.round(D.loaded / D.total * 100) : 0
-          }), z = $.reduce(
-            (y, j) => y + (j.progress || 0),
+        }, j = (w) => h ? (T) => i((l) => {
+          const N = (l[h] || []).map((b) => b.name !== q(w.name) ? b : {
+            ...b,
+            progress: T.total ? Math.round(T.loaded / T.total * 100) : 0
+          }), R = N.reduce(
+            (b, F) => b + (F.progress || 0),
             0
-          ), F = Math.round(z / $.length);
-          return d?.(F), {
+          ), C = Math.round(R / N.length);
+          return d?.(C), {
             ...l,
-            [m]: $
+            [h]: N
           };
         }) : () => {
         };
         try {
-          const E = w.map((D) => {
-            const l = Q(D.name), N = l.split(".").slice(0, -1).join(".") || "unnamed", $ = `/api/projects/${e}/versions/${m}/reviewables?label=${N}`, z = { "content-type": D.type, "x-file-name": l };
-            return ye.post($, D, { headers: z, onUploadProgress: C(D) }).then(b(D)).catch((F) => {
-              throw k(D)(F), F;
+          const w = x.map((T) => {
+            const l = q(T.name), $ = l.split(".").slice(0, -1).join(".") || "unnamed", N = `/api/projects/${e}/versions/${h}/reviewables?label=${$}`, R = { "content-type": T.type, "x-file-name": l };
+            return be.post(N, T, { headers: R, onUploadProgress: j(T) }).then(y(T)).catch((C) => {
+              throw k(T)(C), C;
             });
           });
-          await Promise.all(E), a && a();
-        } catch (E) {
-          throw console.error(E), te.error(`Failed to upload file/s: ${me(E)}`), E;
+          await Promise.all(w), a && a();
+        } catch (w) {
+          throw console.error(w), oe.error(`Failed to upload file/s: ${ge(w)}`), w;
         }
       },
       [
         t,
         e,
-        h,
-        n,
+        p,
         c,
-        o,
+        g,
         r,
-        u,
+        o,
+        f,
         a,
         d
       ]
     ),
-    handleRemoveUpload: u,
-    uploading: h
+    handleRemoveUpload: f,
+    uploading: p
   };
-}, Er = ({
+}, Cr = ({
   projectName: e,
   taskId: t,
-  folderId: r,
-  versionId: o,
-  productId: c,
-  onUpload: n,
+  folderId: o,
+  versionId: r,
+  productId: g,
+  onUpload: c,
   onFilesAdded: a,
   children: d,
-  dispatch: h,
+  dispatch: p,
   variant: i = "normal",
-  pendingFiles: u = [],
-  setPendingFiles: f,
-  className: s,
+  pendingFiles: f = [],
+  setPendingFiles: s,
+  className: n,
   readOnly: v = !1,
-  pt: m,
-  ...w
+  pt: h,
+  ...x
 }) => {
-  const [T, S] = O(!1), {
-    handleFileUpload: b,
+  const [E, S] = O(!1), {
+    handleFileUpload: y,
     handleRemoveUpload: k,
-    uploading: C
-  } = to({
+    uploading: j
+  } = lo({
     projectName: e,
-    versionId: o,
+    versionId: r,
     taskId: t,
-    folderId: r,
-    productId: c,
-    dispatch: h,
-    onUpload: n
-  }), E = !!o;
-  q(() => {
-    if (E && o && u.length > 0 && f) {
-      const y = u.map((j) => j.file);
-      u.forEach((j) => {
-        j.preview && URL.revokeObjectURL(j.preview);
-      }), f([]), b(y);
+    folderId: o,
+    productId: g,
+    dispatch: p,
+    onUpload: c
+  }), w = !!r;
+  G(() => {
+    if (w && r && f.length > 0 && s) {
+      const b = f.map((F) => F.file);
+      f.forEach((F) => {
+        F.preview && URL.revokeObjectURL(F.preview);
+      }), s([]), y(b);
     }
-  }, [E, o, u.length, b, f]);
-  const D = (y) => y.type.startsWith("image/"), l = (y) => y.map((j) => ({
-    file: j,
-    preview: D(j) ? URL.createObjectURL(j) : void 0
-  })), N = async (y) => {
-    const j = Array.from(y);
-    if (a?.(j), !E || !o) {
-      f && f((A) => [...A, ...l(j)]);
+  }, [w, r, f.length, y, s]);
+  const T = (b) => b.type.startsWith("image/"), l = (b) => b.map((F) => ({
+    file: F,
+    preview: T(F) ? URL.createObjectURL(F) : void 0
+  })), $ = async (b) => {
+    const F = Array.from(b);
+    if (a?.(F), !w || !r) {
+      s && s((D) => [...D, ...l(F)]);
       return;
     }
-    await b(y);
-  }, $ = (y) => {
-    const j = y.target.files;
-    j && N(j);
-  }, z = (y) => {
-    y.preventDefault(), S(!1);
-    const j = y.dataTransfer.files;
-    j && N(j);
-  }, F = i === "large" ? { minWidth: "360px", maxWidth: "480px", alignSelf: "center" } : {};
-  return /* @__PURE__ */ R(ae, { children: [
-    /* @__PURE__ */ g(
-      Xt,
+    await y(b);
+  }, N = (b) => {
+    const F = b.target.files;
+    F && $(F);
+  }, R = (b) => {
+    b.preventDefault(), S(!1);
+    const F = b.dataTransfer.files;
+    F && $(F);
+  }, C = i === "large" ? { minWidth: "360px", maxWidth: "480px", alignSelf: "center" } : {};
+  return /* @__PURE__ */ z(ne, { children: [
+    /* @__PURE__ */ u(
+      no,
       {
-        className: U(s, i, { dragging: T }),
-        ...w,
+        className: W(n, i, { dragging: E }),
+        ...x,
         onDragEnter: () => !v && S(!0),
-        onDragOver: (y) => y.preventDefault(),
-        onDrop: (y) => {
-          v && (y.preventDefault(), y.stopPropagation());
+        onDragOver: (b) => b.preventDefault(),
+        onDrop: (b) => {
+          v && (b.preventDefault(), b.stopPropagation());
         },
-        children: /* @__PURE__ */ R(ae, { children: [
+        children: /* @__PURE__ */ z(ne, { children: [
           d,
-          !E && u?.map((y) => /* @__PURE__ */ g(
-            ue,
+          !w && f?.map((b) => /* @__PURE__ */ u(
+            me,
             {
-              name: y.file.name,
-              size: y.file.size,
-              src: y.preview,
+              name: b.file.name,
+              size: b.file.size,
+              src: b.preview,
               type: "waiting",
               onRemove: () => {
-                f && f((j) => j.filter((A) => A.file.name !== y.file.name));
+                s && s((F) => F.filter((D) => D.file.name !== b.file.name));
               }
             },
-            y.file.name
+            b.file.name
           )),
-          o && C[o]?.map((y) => /* @__PURE__ */ g(
-            ue,
+          r && j[r]?.map((b) => /* @__PURE__ */ u(
+            me,
             {
-              ...y,
+              ...b,
               type: "upload",
-              onRemove: () => k(y.name)
+              onRemove: () => k(b.name)
             },
-            y.name
+            b.name
           )),
-          !v && /* @__PURE__ */ R(
-            Yt,
+          !v && /* @__PURE__ */ z(
+            io,
             {
               id: "upload",
-              className: U("upload", i),
-              style: F,
-              ...m?.upload,
+              className: W("upload", i),
+              style: C,
+              ...h?.upload,
               children: [
-                /* @__PURE__ */ g("span", { children: "Drop or click to upload" }),
-                /* @__PURE__ */ g("input", { type: "file", multiple: !0, onChange: $ })
+                /* @__PURE__ */ u("span", { children: "Drop or click to upload" }),
+                /* @__PURE__ */ u("input", { type: "file", multiple: !0, onChange: N })
               ]
             }
           )
         ] })
       }
     ),
-    T && !v && /* @__PURE__ */ R(
-      eo,
+    E && !v && /* @__PURE__ */ z(
+      so,
       {
-        onDragOver: (y) => y.preventDefault(),
+        onDragOver: (b) => b.preventDefault(),
         onDragLeave: () => S(!1),
-        onDrop: z,
-        ...m?.dropzone,
+        onDrop: R,
+        ...h?.dropzone,
         children: [
-          /* @__PURE__ */ g(V, { icon: "upload" }),
-          /* @__PURE__ */ g("span", { children: "Upload reviewable" })
+          /* @__PURE__ */ u(V, { icon: "upload" }),
+          /* @__PURE__ */ u("span", { children: "Upload reviewable" })
         ]
       }
     )
   ] });
-}, Sr = p.div`
+}, Nr = m.div`
   position: relative;
   border-radius: var(--border-radius-m);
   display: flex;
@@ -2049,9 +2088,9 @@ const wr = p.div`
   }
 
   flex: 1;
-`, Tr = p.div`
+`, Ur = m.div`
   position: relative;
-`, jr = p.span`
+`, $r = m.span`
   position: relative;
   padding: 0px 2px;
   border-radius: var(--border-radius-m);
@@ -2073,29 +2112,29 @@ const wr = p.div`
       color: var(--md-sys-color-on-surface);
     }
   }
-`, Dr = p.span`
+`, Mr = m.span`
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-block;
   white-space: nowrap;
-`, ge = xe`
+`, he = we`
   background-color: var(--md-sys-color-surface-container);
   &,
   .icon {
     color: var(--md-sys-color-on-surface);
   }
-`, oo = p.div`
+`, co = m.div`
   & > span,
   & > li {
     cursor: pointer;
     &:hover {
-      ${ge}
+      ${he}
     }
   }
 
   &.open {
     & > span {
-      ${ge}
+      ${he}
     }
   }
 
@@ -2107,7 +2146,7 @@ const wr = p.div`
       }
     }
   }
-`, Fr = p.div`
+`, zr = m.div`
   position: absolute;
   top: 100%;
   left: 0px;
@@ -2116,7 +2155,7 @@ const wr = p.div`
 
   z-index: 200;
   padding-top: 4px;
-`, Cr = p.ul`
+`, Rr = m.ul`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
@@ -2131,46 +2170,46 @@ const wr = p.div`
 
   max-height: 500px;
   overflow: auto;
-`, Ar = p.li`
+`, Wr = m.li`
   padding: var(--base-gap-small);
   border-radius: var(--border-radius-m);
   color: var(--md-sys-color-on-surface);
   min-width: max-content;
   width: 100%;
-`, Nr = ee(
-  ({ children: e, segment: t, isOpen: r, scope: o, projectName: c, ...n }, a) => {
-    const { openSlideOut: d } = re(), h = t?.type !== "product" && t?.type !== "project", i = () => {
-      if (!h) return;
-      const { type: v, id: m } = t || {};
-      !v || v === "project" || v === "product" || !m || d({
+`, Lr = te(
+  ({ children: e, segment: t, isOpen: o, scope: r, projectName: g, ...c }, a) => {
+    const { openSlideOut: d } = ae(), p = t?.type !== "product" && t?.type !== "project", i = () => {
+      if (!p) return;
+      const { type: v, id: h } = t || {};
+      !v || v === "project" || v === "product" || !h || d({
         entityType: v,
-        entityId: m,
-        projectName: c
+        entityId: h,
+        projectName: g
       });
-    }, u = (v) => [
+    }, f = (v) => [
       {
         label: `ID: ${v}`,
         icon: "content_copy",
-        command: () => oe(v)
+        command: () => re(v)
       }
-    ], [f] = mt();
-    return /* @__PURE__ */ g(
-      oo,
+    ], [s] = wt();
+    return /* @__PURE__ */ u(
+      co,
       {
         onClick: i,
         onContextMenu: (v) => {
           if (!t) return;
-          const m = u(t.id);
-          f(v, m);
+          const h = f(t.id);
+          s(v, h);
         },
-        className: ut({ link: h, open: r }),
-        ...n,
+        className: xt({ link: p, open: o }),
+        ...c,
         ref: a,
         children: e
       }
     );
   }
-), ro = p.div`
+), po = m.div`
   position: relative;
   width: 100%;
   height: 52px;
@@ -2260,7 +2299,15 @@ const wr = p.div`
     border: none;
     border-color: transparent;
   }
-`, ao = p.img`
+
+  /* the hover-scrub filmstrip replaces the static image */
+  &[data-filmstrip-active] {
+    img,
+    .icon {
+      visibility: hidden;
+    }
+  }
+`, uo = m.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -2272,63 +2319,71 @@ const wr = p.div`
   inset: 0;
 
   transition: scale 0.2s, opacity 0.2s;
-`, no = ({
+`, mo = ({
   projectName: e = "",
   entityType: t = "",
-  entityId: r = "",
-  icon: o,
-  color: c,
-  thumbnailHash: n,
+  entityId: o = "",
+  icon: r,
+  color: g,
+  thumbnailHash: c,
   isLoading: a,
   shimmer: d,
-  className: h,
+  className: p,
   disabled: i,
-  src: u,
-  hoverIcon: f,
-  showBorder: s = !0,
-  ...v
+  src: f,
+  hoverIcon: s,
+  showBorder: n = !0,
+  filmstrip: v,
+  ...h
 }) => {
-  const m = t === "project", w = ["product"].includes(t), T = m ? !!e : !!r;
-  let S = "";
-  t && (n || m) && T && (u ? S = u : S = gt({ projectName: e, entityType: t, entityId: r, thumbnailHash: n }) ?? "");
-  const [b, k] = O(!1), [C, E] = O(!1);
-  return q(() => {
-    if (S === "") {
-      E(!0), k(!0);
+  const x = t === "project", E = ["product"].includes(t), S = x ? !!e : !!o;
+  let y = "";
+  t && (c || x) && S && (f ? y = f : y = yt({ projectName: e, entityType: t, entityId: o, thumbnailHash: c }) ?? "");
+  const [k, j] = O(!1), [w, T] = O(!1);
+  return G(() => {
+    if (y === "") {
+      T(!0), j(!0);
       return;
     }
-    E(!1), k(!1);
-  }, [S]), /* @__PURE__ */ R(
-    ro,
+    T(!1), j(!1);
+  }, [y]), /* @__PURE__ */ z(
+    po,
     {
-      className: U(h, "thumbnail", {
-        loading: d && (a || !C),
-        loaded: C,
-        error: b,
-        clickable: !!v.onClick,
-        border: s
+      className: W(p, "thumbnail", {
+        loading: d && (a || !w),
+        loaded: w,
+        error: k,
+        clickable: !!h.onClick,
+        border: n
       }),
-      ...v,
+      ...h,
       children: [
-        (!a || !C) && !i && /* @__PURE__ */ g(V, { style: { color: c || void 0 }, icon: o || "image", className: "type-icon" }),
-        t && e && !w && T && /* @__PURE__ */ g(
-          ao,
+        (!a || !w) && !i && /* @__PURE__ */ u(V, { style: { color: g || void 0 }, icon: r || "image", className: "type-icon" }),
+        t && e && !E && S && /* @__PURE__ */ u(
+          uo,
           {
-            alt: `Entity thumbnail ${r || e}`,
-            src: S,
+            alt: `Entity thumbnail ${o || e}`,
+            src: y,
             onLoad: () => {
-              E(!0), k(!1);
+              T(!0), j(!1);
             },
             onError: () => {
-              E(!0), k(!0);
+              T(!0), j(!0);
             }
           }
         ),
-        f && /* @__PURE__ */ g(V, { icon: f, className: "hover-icon" })
+        s && /* @__PURE__ */ u(V, { icon: s, className: "hover-icon" }),
+        v && !a && !i && /* @__PURE__ */ u(
+          ke,
+          {
+            src: bt({ projectName: e, entityType: t, entityId: o, thumbnailHash: c }),
+            fit: "contain"
+          }
+        )
       ]
     }
   );
-}, io = p.div`
+}, go = m.div`
   display: flex;
   z-index: 10;
   height: 100%;
@@ -2349,7 +2404,7 @@ const wr = p.div`
         font-size: 24px;
       }
 
-      ${({ $length: e }) => e > 1 && xe`
+      ${({ $length: e }) => e > 1 && we`
           :not(:last-child) {
             box-shadow: 0 0 4px 0px black;
           }
@@ -2365,131 +2420,133 @@ const wr = p.div`
       object-fit: cover;
     }
   }
-`, $r = ({
+`, Pr = ({
   thumbnails: e = [],
   isLoading: t,
-  className: r,
-  style: o,
+  className: o,
+  style: r,
+  filmstrip: g,
   ...c
 }) => {
-  const { onContextMenu: n } = Se(st);
+  const { onContextMenu: a } = Ae(ut);
   e = e.slice(0, 5);
-  const a = e.length > 1;
-  return e.length ? /* @__PURE__ */ g(
-    io,
+  const d = e.length > 1;
+  return e.length ? /* @__PURE__ */ u(
+    go,
     {
       $length: e.length,
-      className: U("stacked-thumbnails", r, { stacking: a }),
+      className: W("stacked-thumbnails", o, { stacking: d }),
       children: e.map(
-        (d, h) => d ? /* @__PURE__ */ g(
-          no,
+        (p, i) => p ? /* @__PURE__ */ u(
+          mo,
           {
-            projectName: d.projectName,
-            entityType: d.type,
-            entityId: d.id,
-            icon: d.icon,
-            color: d.color,
-            style: { ...o, zIndex: -h },
-            thumbnailHash: d.thumbnailHash,
+            projectName: p.projectName,
+            entityType: p.type,
+            entityId: p.id,
+            icon: p.icon,
+            color: p.color,
+            style: { ...r, zIndex: -i },
+            thumbnailHash: p.thumbnailHash,
             isLoading: t,
-            src: d.src,
-            onContextMenu: n,
+            src: p.src,
+            filmstrip: g && !d,
+            onContextMenu: a,
             ...c
           },
-          d.id || d.src || h
+          p.id || p.src || i
         ) : null
       )
     }
   ) : null;
-}, Mr = ee(
-  ({ entities: e, entityType: t, onWatchersUpdate: r, userName: o, ...c }, n) => {
-    const a = e.map((f) => ({
-      entityId: f.id,
+}, Br = te(
+  ({ entities: e, entityType: t, onWatchersUpdate: o, userName: r, ...g }, c) => {
+    const a = e.map((s) => ({
+      entityId: s.id,
       entityType: t,
-      projectName: f.projectName
-    })), { data: d = [] } = rt(
+      projectName: s.projectName
+    })), { data: d = [] } = lt(
       {
         entities: a
       },
       { skip: !e.length }
-    ), h = Array.from(new Set(d.flatMap((f) => f.watchers))), [i] = at(), u = async (f) => {
-      const s = f.filter((w) => !h.includes(w)), v = h.filter((w) => !f.includes(w)), m = d.map((w) => {
-        const T = w.watchers.filter((S) => !v.includes(S));
-        return T.push(...s), {
-          ...w,
-          watchers: T
+    ), p = Array.from(new Set(d.flatMap((s) => s.watchers))), [i] = ct(), f = async (s) => {
+      const n = s.filter((x) => !p.includes(x)), v = p.filter((x) => !s.includes(x)), h = d.map((x) => {
+        const E = x.watchers.filter((S) => !v.includes(S));
+        return E.push(...n), {
+          ...x,
+          watchers: E
         };
       });
       try {
-        await i({ entities: m }).unwrap(), r && r(s, v);
+        await i({ entities: h }).unwrap(), o && o(n, v);
       } catch {
-        te.error("Failed to update watchers");
+        oe.error("Failed to update watchers");
       }
     };
-    return /* @__PURE__ */ g(
-      ze,
+    return /* @__PURE__ */ u(
+      We,
       {
         align: "right",
-        ...c,
-        options: _e(c.options, h),
-        value: h,
-        currentUser: o,
-        onChange: u,
-        ref: n,
+        ...g,
+        options: Ge(g.options, p),
+        value: p,
+        currentUser: r,
+        onChange: f,
+        ref: c,
         buttonProps: { "data-tooltip": "Watchers" }
       }
     );
   }
 );
 export {
-  nr as A,
-  rr as B,
-  vr as C,
-  fr as D,
-  dr as E,
-  Dr as F,
-  er as G,
-  Yo as H,
-  pr as I,
-  lr as J,
-  cr as K,
-  wr as L,
-  Fr as M,
-  ur as N,
-  tr as O,
-  br as P,
-  ir as Q,
-  xr as R,
-  jr as S,
-  ar as T,
-  yr as U,
-  mr as V,
-  Mr as W,
-  sr as X,
-  kt as a,
-  Jo as b,
-  St as c,
-  Tt as d,
+  ur as A,
+  dr as B,
+  Sr as C,
+  Er as D,
+  vr as E,
+  Mr as F,
+  sr as G,
+  ir as H,
+  yr as I,
+  hr as J,
+  fr as K,
+  jr as L,
+  zr as M,
+  br as N,
+  lr as O,
+  Fr as P,
+  mr as Q,
+  Ar as R,
+  $r as S,
+  pr as T,
+  Tr as U,
+  xr as V,
+  Br as W,
+  gr as X,
+  Dr as a,
+  Cr as b,
+  me as c,
+  wr as d,
   kr as e,
-  Zo as f,
-  Er as g,
-  ue as h,
-  to as i,
-  gr as j,
-  hr as k,
-  Sr as l,
-  Cr as m,
-  Nr as n,
-  Ar as o,
-  Tr as p,
-  Mt as q,
-  Rt as r,
-  Xo as s,
-  ke as t,
-  vt as u,
-  It as v,
-  $r as w,
-  no as x,
-  Et as y,
-  or as z
+  Nr as f,
+  Rr as g,
+  Lr as h,
+  Wr as i,
+  Ur as j,
+  ar as k,
+  St as l,
+  Dt as m,
+  rr as n,
+  Nt as o,
+  Ut as p,
+  Bt as q,
+  It as r,
+  nr as s,
+  Se as t,
+  lo as u,
+  Gt as v,
+  Pr as w,
+  mo as x,
+  Ct as y,
+  cr as z
 };