@cccsaurora/clue-ui 1.2.1-patch.256 → 1.3.0-dev.255

package/components/enrichment/EnrichPopover.js

@@ -1,79 +1,87 @@
-import { jsxs as y, Fragment as C, jsx as e } from "react/jsx-runtime";
-import { useTheme as k, Tooltip as S, IconButton as E, CircularProgress as f, Button as z, Popover as I, Paper as j, Stack as c, Box as P, Typography as B, Divider as O } from "@mui/material";
-import { d as T, b as p, e as w } from "../../ActionForm-DlOXqMUx.js";
-import { useState as m, useRef as M, useCallback as D, useEffect as F } from "react";
-import g from "../display/icons/Iconified.js";
-const H = ({ show: t = !1, size: b = "small", selector: n }) => {
-  const { t: s } = T((i) => i.i18next), h = k(), a = p((i) => i.availableSources), u = p((i) => i.enrich), [x, o] = m(t), [r, d] = m(!1), l = M(null), v = D(
-    async (i) => {
-      d(!0);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTheme, Tooltip, IconButton, CircularProgress, Button, Popover, Paper, Stack, Box, Typography, Divider } from "@mui/material";
+import { d as useClueComponentSelector, b as useClueEnrichSelector, e as capitalize } from "../../ActionForm-C0aE9HUv.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import Iconified from "../display/icons/Iconified.js";
+const EnrichPopover = ({ show = false, size = "small", selector }) => {
+  const { t } = useClueComponentSelector((ctx) => ctx.i18next);
+  const theme = useTheme();
+  const availableSources = useClueEnrichSelector((ctx) => ctx.availableSources);
+  const _enrich = useClueEnrichSelector((ctx) => ctx.enrich);
+  const [showEnrichMenu, setShowEnrichMenu] = useState(show);
+  const [loading, setLoading] = useState(false);
+  const enrichEl = useRef(null);
+  const enrich = useCallback(
+    async (_source) => {
+      setLoading(true);
       try {
-        await u(n.type, n.value, {
-          classification: n.classification,
+        await _enrich(selector.type, selector.value, {
+          classification: selector.classification,
           timeout: 30,
-          force: !0,
-          noCache: !0,
-          sources: [i],
-          append: !0
+          force: true,
+          noCache: true,
+          sources: [_source],
+          append: true
         });
       } finally {
-        d(!1);
+        setLoading(false);
       }
     },
-    [u, n.classification, n.type, n.value]
+    [_enrich, selector.classification, selector.type, selector.value]
   );
-  return F(() => {
-    o(t);
-  }, [t]), /* @__PURE__ */ y(C, { children: [
-    b === "small" ? /* @__PURE__ */ e(S, { ref: l, title: s("enrich"), children: /* @__PURE__ */ e("span", { style: { alignSelf: "center" }, children: /* @__PURE__ */ e(
-      E,
+  useEffect(() => {
+    setShowEnrichMenu(show);
+  }, [show]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    size === "small" ? /* @__PURE__ */ jsx(Tooltip, { ref: enrichEl, title: t("enrich"), children: /* @__PURE__ */ jsx("span", { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx(
+      IconButton,
       {
-        onClick: () => o(!0),
-        disabled: Object.keys(a).length < 1 || r,
+        onClick: () => setShowEnrichMenu(true),
+        disabled: Object.keys(availableSources).length < 1 || loading,
         color: "info",
-        children: r ? /* @__PURE__ */ e(f, { color: "info", size: "24px" }) : /* @__PURE__ */ e(g, { icon: "ic:baseline-auto-fix-high" })
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "24px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" })
       }
-    ) }) }) : /* @__PURE__ */ e(
-      z,
+    ) }) }) : /* @__PURE__ */ jsx(
+      Button,
       {
-        ref: l,
+        ref: enrichEl,
         variant: "outlined",
         color: "info",
-        disabled: Object.keys(a).length < 1 || r,
-        startIcon: r ? /* @__PURE__ */ e(f, { color: "info", size: "20px" }) : /* @__PURE__ */ e(g, { icon: "ic:baseline-auto-fix-high" }),
+        disabled: Object.keys(availableSources).length < 1 || loading,
+        startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "20px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" }),
         sx: { alignSelf: "stretch" },
-        onClick: () => o(!0),
-        children: s("enrich")
+        onClick: () => setShowEnrichMenu(true),
+        children: t("enrich")
       }
     ),
-    /* @__PURE__ */ e(
-      I,
+    /* @__PURE__ */ jsx(
+      Popover,
       {
         sx: { zIndex: 2e3 },
-        open: x,
-        disablePortal: !0,
-        onClose: () => o(!1),
-        anchorEl: l.current,
+        open: showEnrichMenu,
+        disablePortal: true,
+        onClose: () => setShowEnrichMenu(false),
+        anchorEl: enrichEl.current,
         anchorOrigin: { horizontal: "left", vertical: "bottom" },
-        children: /* @__PURE__ */ e(j, { onClick: () => o(!1), children: /* @__PURE__ */ e(c, { divider: /* @__PURE__ */ e(O, { flexItem: !0, orientation: "horizontal" }), children: a.map((i) => /* @__PURE__ */ e(
-          P,
+        children: /* @__PURE__ */ jsx(Paper, { onClick: () => setShowEnrichMenu(false), children: /* @__PURE__ */ jsx(Stack, { divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }), children: availableSources.map((_source) => /* @__PURE__ */ jsx(
+          Box,
           {
             sx: {
               px: 3,
               py: 1,
               cursor: "pointer",
-              transition: h.transitions.create("background-color"),
-              "&:hover": { backgroundColor: h.palette.background.default }
+              transition: theme.transitions.create("background-color"),
+              "&:hover": { backgroundColor: theme.palette.background.default }
             },
-            onClick: () => v(i),
-            children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(c, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ e(B, { variant: "body1", children: i.split("-").map(w).join(" ") }) }) })
+            onClick: () => enrich(_source),
+            children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: _source.split("-").map(capitalize).join(" ") }) }) })
           },
-          i
+          _source
         )) }) })
       }
     )
   ] });
 };
 export {
-  H as default
+  EnrichPopover as default
 };

package/components/fetchers/Fetcher.js

@@ -1,104 +1,141 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import { I as H } from "../../iconify-BBckr5AQ.js";
-import { useTheme as V, Skeleton as I, Chip as q, Tooltip as J, Stack as u, Typography as K, LinearProgress as Q, Paper as U, Box as X, IconButton as Y } from "@mui/material";
-import { F as L } from "../../FlexOne-BXWFOd1T.js";
-import S from "../display/icons/Iconified.js";
-import { J as Z } from "../../index-BK-zfYhR.js";
-import { ClueComponentContext as $ } from "../../hooks/ClueComponentContext.js";
-import { c as h } from "../../ActionForm-DlOXqMUx.js";
-import p, { useState as b, useRef as k, useMemo as P, useEffect as N, memo as ee } from "react";
-import { u as ie } from "../../index-Dj5C04IX.js";
-import ne from "../display/graph/index.js";
-import te from "../display/markdown/index.js";
-import re from "./PreviewModal.js";
-import oe from "./StatusChip.js";
-const ae = p.memo(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Skeleton, Chip, Tooltip, Stack, Typography, LinearProgress, Paper, Box, IconButton } from "@mui/material";
+import { F as FlexOne } from "../../FlexOne-BSYAhhtG.js";
+import Iconified from "../display/icons/Iconified.js";
+import { J as JSONViewer } from "../../index-UkW8Sur3.js";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { c as useClueFetcherSelector } from "../../ActionForm-C0aE9HUv.js";
+import React__default, { useState, useRef, useMemo, useEffect, memo } from "react";
+import { u as useContextSelector } from "../../index-AMfoEg_6.js";
+import Graph from "../display/graph/index.js";
+import Markdown from "../display/markdown/index.js";
+import PreviewModal from "./PreviewModal.js";
+import StatusChip from "./StatusChip.js";
+const Fetcher = React__default.memo(
   ({
-    type: s,
-    value: x,
-    classification: g,
-    fetcherId: a,
+    type,
+    value,
+    classification,
+    fetcherId,
     slotProps: {
-      paper: r = {},
-      preview: O = {},
-      stack: o = {},
-      image: W = {},
-      chip: v = {},
-      skeleton: t = {}
+      paper: paperProps = {},
+      preview: previewProps = {},
+      stack: stackProps = {},
+      image: imageProps = {},
+      chip: chipProps = {},
+      skeleton: skeletonProps = {}
     } = {}
   }) => {
-    var z, M, T, j;
-    const d = V(), w = h((n) => n.fetchers), F = h((n) => n.fetchSelector), R = h((n) => n.getFetcherStatus), D = h((n) => n.fetchCompleted), { t: l } = ie($, (n) => n == null ? void 0 : n.i18next), [e, f] = b(null), [E, A] = b(!0), [G, _] = b(!1), y = k(null), C = P(() => e == null ? void 0 : e.task_id, [e == null ? void 0 : e.task_id]);
-    if (N(() => {
-      if ((e == null ? void 0 : e.outcome) !== "pending" || !C) return;
-      let n = !1;
-      const B = async () => {
-        const c = await R(a, C);
-        if (!c)
-          f({ outcome: "failure", done: !0, error: "Missing result", link: "" });
-        else if (c.outcome === "success" || c.outcome === "failure")
-          f({ ...c, done: !0 });
-        else {
-          if (n) return;
-          f({ ...c }), y.current = setTimeout(B, 2e3);
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const fetchers = useClueFetcherSelector((ctx) => ctx.fetchers);
+    const fetchSelector = useClueFetcherSelector((ctx) => ctx.fetchSelector);
+    const getFetcherStatus = useClueFetcherSelector((ctx) => ctx.getFetcherStatus);
+    const fetchCompleted = useClueFetcherSelector((ctx) => ctx.fetchCompleted);
+    const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.i18next);
+    const [result, setResult] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [showPreview, setShowPreview] = useState(false);
+    const timeoutRef = useRef(null);
+    const taskId = useMemo(() => result == null ? void 0 : result.task_id, [result == null ? void 0 : result.task_id]);
+    useEffect(() => {
+      if ((result == null ? void 0 : result.outcome) !== "pending" || !taskId) return;
+      let cancelled = false;
+      const poll = async () => {
+        const res = await getFetcherStatus(fetcherId, taskId);
+        if (!res) {
+          setResult({ outcome: "failure", done: true, error: "Missing result", link: "" });
+        } else if (res.outcome === "success" || res.outcome === "failure") {
+          setResult({ ...res, done: true });
+        } else {
+          if (cancelled) return;
+          setResult({ ...res });
+          timeoutRef.current = setTimeout(poll, 2e3);
         }
       };
-      return B(), () => {
-        n = !0, y.current && clearTimeout(y.current);
+      poll();
+      return () => {
+        cancelled = true;
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
       };
-    }, [a, R, e == null ? void 0 : e.outcome, C]), N(() => {
+    }, [fetcherId, getFetcherStatus, result == null ? void 0 : result.outcome, taskId]);
+    useEffect(() => {
       (async () => {
         try {
-          A(!0), f(await F(a, { type: s, value: x, classification: g }));
+          setLoading(true);
+          setResult(await fetchSelector(fetcherId, { type, value, classification }));
         } catch {
-          A(!1);
+          setLoading(false);
         }
       })();
-    }, [g, F, a, s, x]), D)
-      if (a)
-        if (a.includes(".")) {
-          if (!(a in w))
-            return console.warn("Fetcher ID does not correspond to a registered fetcher. Component will not render."), null;
-        } else return console.warn(
+    }, [classification, fetchSelector, fetcherId, type, value]);
+    if (fetchCompleted) {
+      if (!fetcherId) {
+        console.warn("Missing fetcher Id. Component will not render.");
+        return null;
+      } else if (!fetcherId.includes(".")) {
+        console.warn(
           "Invalid fetcher id. Must be in the format '<plugin_id>.<fetcher_id>'. Component will not render."
-        ), null;
-      else return console.warn("Missing fetcher Id. Component will not render."), null;
-    else
-      return null;
-    return E ? ((z = w[a]) == null ? void 0 : z.format) === "status" ? /* @__PURE__ */ i(
-      I,
-      {
-        variant: "rounded",
-        height: "32px",
-        width: "150px",
-        ...t,
-        sx: [
-          { borderRadius: "16px" },
-          ...Array.isArray(t == null ? void 0 : t.sx) ? t == null ? void 0 : t.sx : [t == null ? void 0 : t.sx]
-        ]
+        );
+        return null;
+      } else if (!(fetcherId in fetchers)) {
+        console.warn("Fetcher ID does not correspond to a registered fetcher. Component will not render.");
+        return null;
       }
-    ) : /* @__PURE__ */ i(I, { variant: "rounded", height: "325px", width: "300px", ...t }) : (e == null ? void 0 : e.outcome) === "failure" && w[a].format === "status" ? /* @__PURE__ */ i(
-      q,
-      {
-        icon: /* @__PURE__ */ i(J, { title: e.error, children: /* @__PURE__ */ i(H, { icon: "mdi:information-outline", fontSize: "1.25rem" }) }),
-        label: l("error"),
-        color: "error",
-        ...v
+    } else {
+      return null;
+    }
+    if (loading) {
+      if (((_a = fetchers[fetcherId]) == null ? void 0 : _a.format) === "status") {
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            height: "32px",
+            width: "150px",
+            ...skeletonProps,
+            sx: [
+              { borderRadius: "16px" },
+              ...Array.isArray(skeletonProps == null ? void 0 : skeletonProps.sx) ? skeletonProps == null ? void 0 : skeletonProps.sx : [skeletonProps == null ? void 0 : skeletonProps.sx]
+            ]
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "325px", width: "300px", ...skeletonProps });
       }
-    ) : e.outcome === "pending" ? /* @__PURE__ */ m(u, { flex: 1, sx: { pt: 2, alignItems: "center" }, spacing: 1, children: [
-      ((M = e.data) == null ? void 0 : M.summary) && /* @__PURE__ */ i(K, { variant: "caption", children: e.data.summary }),
-      /* @__PURE__ */ i(
-        Q,
+    }
+    if ((result == null ? void 0 : result.outcome) === "failure" && fetchers[fetcherId].format === "status") {
+      return /* @__PURE__ */ jsx(
+        Chip,
         {
-          variant: (T = e.data) != null && T.progress ? "determinate" : "indeterminate",
-          value: ((j = e.data) == null ? void 0 : j.progress) * 100,
-          sx: { maxWidth: 500, width: "100%", borderRadius: d.shape.borderRadius }
+          icon: /* @__PURE__ */ jsx(Tooltip, { title: result.error, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:information-outline", fontSize: "1.25rem" }) }),
+          label: t("error"),
+          color: "error",
+          ...chipProps
         }
-      )
-    ] }) : (e == null ? void 0 : e.format) === "status" ? /* @__PURE__ */ i(oe, { data: e.data, ...v }) : /* @__PURE__ */ i(
-      U,
+      );
+    }
+    if (result.outcome === "pending") {
+      return /* @__PURE__ */ jsxs(Stack, { flex: 1, sx: { pt: 2, alignItems: "center" }, spacing: 1, children: [
+        ((_b = result.data) == null ? void 0 : _b.summary) && /* @__PURE__ */ jsx(Typography, { variant: "caption", children: result.data.summary }),
+        /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            variant: ((_c = result.data) == null ? void 0 : _c.progress) ? "determinate" : "indeterminate",
+            value: ((_d = result.data) == null ? void 0 : _d.progress) * 100,
+            sx: { maxWidth: 500, width: "100%", borderRadius: theme.shape.borderRadius }
+          }
+        )
+      ] });
+    }
+    if ((result == null ? void 0 : result.format) === "status") {
+      return /* @__PURE__ */ jsx(StatusChip, { data: result.data, ...chipProps });
+    }
+    return /* @__PURE__ */ jsx(
+      Paper,
       {
-        ...r,
+        ...paperProps,
         sx: [
           {
             p: 1,
@@ -107,16 +144,16 @@ const ae = p.memo(
             width: "100%",
             minWidth: "300px"
           },
-          ...Array.isArray(r == null ? void 0 : r.sx) ? r == null ? void 0 : r.sx : [r == null ? void 0 : r.sx]
+          ...Array.isArray(paperProps == null ? void 0 : paperProps.sx) ? paperProps == null ? void 0 : paperProps.sx : [paperProps == null ? void 0 : paperProps.sx]
         ],
-        children: /* @__PURE__ */ m(
-          u,
+        children: /* @__PURE__ */ jsxs(
+          Stack,
           {
             sx: {
               "& > img": {
                 borderRadius: "3px",
                 cursor: "zoom-in",
-                transition: d.transitions.create("border-color", { duration: d.transitions.duration.shortest }),
+                transition: theme.transitions.create("border-color", { duration: theme.transitions.duration.shortest }),
                 border: "3px solid transparent",
                 "&:hover": {
                   borderColor: "primary.main"
@@ -124,64 +161,65 @@ const ae = p.memo(
               }
             },
             children: [
-              (e == null ? void 0 : e.outcome) === "failure" && /* @__PURE__ */ i("code", { style: { color: d.palette.error.main }, children: /* @__PURE__ */ i("pre", { style: { marginTop: 0, marginBottom: 0 }, children: e.error }) }),
-              (e == null ? void 0 : e.format) === "markdown" && /* @__PURE__ */ i(te, { md: e.data }),
-              (e == null ? void 0 : e.format) === "image" && /* @__PURE__ */ i("img", { src: e.data.image, alt: e.data.alt, ...W, onClick: () => _(!0) }),
-              (e == null ? void 0 : e.format) === "json" && /* @__PURE__ */ i(X, { sx: { ".react-json-view": { backgroundColor: "transparent !important" } }, children: /* @__PURE__ */ i(Z, { data: e.data }) }),
-              (e == null ? void 0 : e.format) === "graph" && /* @__PURE__ */ i(ne, { graph: e.data, sx: { minHeight: "600px" } }),
-              /* @__PURE__ */ i(L, {}),
-              /* @__PURE__ */ m(
-                u,
+              (result == null ? void 0 : result.outcome) === "failure" && /* @__PURE__ */ jsx("code", { style: { color: theme.palette.error.main }, children: /* @__PURE__ */ jsx("pre", { style: { marginTop: 0, marginBottom: 0 }, children: result.error }) }),
+              (result == null ? void 0 : result.format) === "markdown" && /* @__PURE__ */ jsx(Markdown, { md: result.data }),
+              (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, ...imageProps, onClick: () => setShowPreview(true) }),
+              (result == null ? void 0 : result.format) === "json" && /* @__PURE__ */ jsx(Box, { sx: { ".react-json-view": { backgroundColor: "transparent !important" } }, children: /* @__PURE__ */ jsx(JSONViewer, { data: result.data }) }),
+              (result == null ? void 0 : result.format) === "graph" && /* @__PURE__ */ jsx(Graph, { graph: result.data, sx: { minHeight: "600px" } }),
+              /* @__PURE__ */ jsx(FlexOne, {}),
+              /* @__PURE__ */ jsxs(
+                Stack,
                 {
                   direction: "row",
                   spacing: 1,
-                  ...o,
+                  ...stackProps,
                   sx: [
                     {
-                      py: d.spacing(0.5),
+                      py: theme.spacing(0.5),
                       display: "flex",
                       alignItems: "center"
                     },
-                    ...Array.isArray(o == null ? void 0 : o.sx) ? o == null ? void 0 : o.sx : [o == null ? void 0 : o.sx]
+                    ...Array.isArray(stackProps == null ? void 0 : stackProps.sx) ? stackProps == null ? void 0 : stackProps.sx : [stackProps == null ? void 0 : stackProps.sx]
                   ],
                   children: [
-                    /* @__PURE__ */ i(S, { icon: "ic:baseline-landscape", color: "primary", fontSize: "small" }),
-                    /* @__PURE__ */ i(
-                      J,
+                    /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-landscape", color: "primary", fontSize: "small" }),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
                       {
-                        title: /* @__PURE__ */ m(u, { spacing: 0.5, children: [
-                          /* @__PURE__ */ m("span", { children: [
-                            l("type"),
+                        title: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("type"),
                             ": ",
-                            s
+                            type
                           ] }),
-                          /* @__PURE__ */ m("span", { children: [
-                            l("value"),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("value"),
                             ": ",
-                            x
+                            value
                           ] }),
-                          /* @__PURE__ */ m("span", { children: [
-                            l("classification"),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("classification"),
                             ": ",
-                            g ?? "N/A"
+                            classification ?? "N/A"
                           ] })
                         ] }),
-                        children: /* @__PURE__ */ i(S, { icon: "ic:outline-info", fontSize: "small" })
+                        children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info", fontSize: "small" })
                       }
                     ),
-                    /* @__PURE__ */ i(L, {}),
-                    (e == null ? void 0 : e.link) && /* @__PURE__ */ i(Y, { size: "small", component: "a", href: e.link, children: /* @__PURE__ */ i(S, { icon: "ic:baseline-open-in-new", fontSize: "small" }) })
+                    /* @__PURE__ */ jsx(FlexOne, {}),
+                    (result == null ? void 0 : result.link) && /* @__PURE__ */ jsx(IconButton, { size: "small", component: "a", href: result.link, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-open-in-new", fontSize: "small" }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ i(re, { ...O, open: G, result: e, onClose: () => _(!1) })
+              /* @__PURE__ */ jsx(PreviewModal, { ...previewProps, open: showPreview, result, onClose: () => setShowPreview(false) })
             ]
           }
         )
       }
     );
   }
-), be = ee(ae);
+);
+const Fetcher_default = memo(Fetcher);
 export {
-  be as default
+  Fetcher_default as default
 };

package/components/fetchers/PreviewModal.js

@@ -1,19 +1,22 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Modal as n, Paper as f } from "@mui/material";
-import { memo as l } from "react";
-const c = ({ result: i, onClose: d, open: x = !1, ...a }) => /* @__PURE__ */ m(
-  n,
-  {
-    open: x,
-    sx: [
-      { display: "flex", alignItems: "center", justifyContent: "center" },
-      ...Array.isArray(a == null ? void 0 : a.sx) ? a == null ? void 0 : a.sx : [a == null ? void 0 : a.sx]
-    ],
-    onClose: d,
-    ...a,
-    children: /* @__PURE__ */ m(f, { sx: { maxHeight: "90%", maxWidth: "90%", p: 2, overflow: "auto" }, children: (i == null ? void 0 : i.format) === "image" && /* @__PURE__ */ m("img", { src: i.data.image, alt: i.data.alt, style: { maxWidth: "100%" } }) })
-  }
-), t = l(c);
+import { jsx } from "react/jsx-runtime";
+import { Modal, Paper } from "@mui/material";
+import { memo } from "react";
+const PreviewModal = ({ result, onClose, open = false, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      sx: [
+        { display: "flex", alignItems: "center", justifyContent: "center" },
+        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
+      ],
+      onClose,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "90%", maxWidth: "90%", p: 2, overflow: "auto" }, children: (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, style: { maxWidth: "100%" } }) })
+    }
+  );
+};
+const PreviewModal$1 = memo(PreviewModal);
 export {
-  t as default
+  PreviewModal$1 as default
 };

package/components/fetchers/StatusChip.js

@@ -1,25 +1,29 @@
-import { jsx as l } from "react/jsx-runtime";
-import { I as r } from "../../iconify-BBckr5AQ.js";
-import { useTheme as i, Chip as x } from "@mui/material";
-import { ClueComponentContext as g } from "../../hooks/ClueComponentContext.js";
-import { u as C } from "../../index-Dj5C04IX.js";
-const S = ({ data: e, ...n }) => {
-  var t;
-  const m = i(), { i18n: f, t: u } = C(g, (o) => o.i18next);
-  return e != null && e.empty ? null : /* @__PURE__ */ l(
-    x,
+import { jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Chip } from "@mui/material";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { u as useContextSelector } from "../../index-AMfoEg_6.js";
+const StatusChip = ({ data, ...chipProps }) => {
+  var _a;
+  const theme = useTheme();
+  const { i18n, t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  if (data == null ? void 0 : data.empty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Chip,
     {
-      icon: e.icon && /* @__PURE__ */ l(r, { icon: e.icon, fontSize: "1.25rem" }),
-      deleteIcon: /* @__PURE__ */ l("a", { href: e.link, rel: "noreferrer", target: "_blank", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ l(r, { icon: "mdi:open-in-new", color: m.palette.text.primary, fontSize: "1.25rem" }) }),
-      ...n,
-      label: ((t = e.labels.find((o) => o.language === f.language) ?? e.labels[0]) == null ? void 0 : t.label) ?? u("unknown"),
+      icon: data.icon && /* @__PURE__ */ jsx(Icon, { icon: data.icon, fontSize: "1.25rem" }),
+      deleteIcon: /* @__PURE__ */ jsx("a", { href: data.link, rel: "noreferrer", target: "_blank", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:open-in-new", color: theme.palette.text.primary, fontSize: "1.25rem" }) }),
+      ...chipProps,
+      label: ((_a = data.labels.find((label) => label.language === i18n.language) ?? data.labels[0]) == null ? void 0 : _a.label) ?? t("unknown"),
       sx: [
-        ...Array.isArray(n == null ? void 0 : n.sx) ? n == null ? void 0 : n.sx : [n == null ? void 0 : n.sx],
-        e.color && { backgroundColor: e.color }
+        ...Array.isArray(chipProps == null ? void 0 : chipProps.sx) ? chipProps == null ? void 0 : chipProps.sx : [chipProps == null ? void 0 : chipProps.sx],
+        data.color && { backgroundColor: data.color }
       ]
     }
   );
 };
 export {
-  S as default
+  StatusChip as default
 };

package/components/group/Entry.js

@@ -1,13 +1,15 @@
-import { ClueGroupContext as s } from "../../hooks/ClueGroupContext.js";
-import { i as u } from "../../utils-DmwSUrum.js";
-import { memo as a, useEffect as i } from "react";
-import { u as l } from "../../index-Dj5C04IX.js";
-const n = ({ children: f, entry: t, selected: e = !1 }) => {
-  const r = l(s, (o) => o == null ? void 0 : o.setValues);
-  return i(() => {
-    r == null || r((o) => [...o.filter((m) => !u(m, t)), ...e ? [t] : []]);
-  }, [t, e, r]), f;
-}, q = a(n);
+import { ClueGroupContext } from "../../hooks/ClueGroupContext.js";
+import { i as isEqual } from "../../utils-71DpzFrA.js";
+import { memo, useEffect } from "react";
+import { u as useContextSelector } from "../../index-AMfoEg_6.js";
+const Entry = ({ children, entry, selected = false }) => {
+  const setValues = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.setValues);
+  useEffect(() => {
+    setValues == null ? void 0 : setValues((_values) => [..._values.filter((value) => !isEqual(value, entry)), ...selected ? [entry] : []]);
+  }, [entry, selected, setValues]);
+  return children;
+};
+const Entry_default = memo(Entry);
 export {
-  q as default
+  Entry_default as default
 };

package/components/group/Group.js

@@ -1,12 +1,15 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { Stack as u } from "@mui/material";
-import { ClueGroupProvider as c } from "../../hooks/ClueGroupContext.js";
-import { memo as f } from "react";
-import n from "./GroupControl.js";
-const a = ({ children: o, showHeader: m = !0, slotProps: r, ...e }) => /* @__PURE__ */ t(c, { ...e, children: m ? /* @__PURE__ */ i(u, { direction: "column", alignSelf: "stretch", ...(r == null ? void 0 : r.stack) ?? {}, children: [
-  /* @__PURE__ */ t(n, {}),
-  o
-] }) : o }), h = f(a);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
+import { ClueGroupProvider } from "../../hooks/ClueGroupContext.js";
+import { memo } from "react";
+import GroupControl from "./GroupControl.js";
+const Group = ({ children, showHeader = true, slotProps, ...groupProps }) => {
+  return /* @__PURE__ */ jsx(ClueGroupProvider, { ...groupProps, children: showHeader ? /* @__PURE__ */ jsxs(Stack, { direction: "column", alignSelf: "stretch", ...(slotProps == null ? void 0 : slotProps.stack) ?? {}, children: [
+    /* @__PURE__ */ jsx(GroupControl, {}),
+    children
+  ] }) : children });
+};
+const Group_default = memo(Group);
 export {
-  h as default
+  Group_default as default
 };