@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.263

package/components/elements/addons/search/phrase/word/WordSuggester.js

@@ -0,0 +1,11 @@
+class WordSuggestor {
+  constructor(suggestions) {
+    this.suggestions = suggestions;
+  }
+  suggest(phrase) {
+    return this.suggestions.filter((s) => s.indexOf(phrase.suggest.value) > -1);
+  }
+}
+export {
+  WordSuggestor as default
+};

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.d.ts

@@ -0,0 +1,7 @@
+import { PhraseToken } from '../..';
+import { default as PhraseConsumer } from '../../PhraseConsumer';
+import { default as PhraseLexer } from '../../PhraseLexer';
+export default class WhitespaceConsumer extends PhraseConsumer<PhraseLexer> {
+    lock(lexer: PhraseLexer): boolean;
+    consume(lexer: PhraseLexer): PhraseToken;
+}

package/components/elements/addons/search/phrase/word/consumers/WhitespaceConsumer.js

@@ -0,0 +1,20 @@
+import PhraseConsumer from "../../PhraseConsumer.js";
+class WhitespaceConsumer extends PhraseConsumer {
+  lock(lexer) {
+    return lexer.bufferValue().match(/\s/) && lexer.ahead(1) !== " ";
+  }
+  consume(lexer) {
+    if (lexer.ahead(1) !== " ") {
+      return {
+        type: "whitespace",
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join("")
+      };
+    }
+    return null;
+  }
+}
+export {
+  WhitespaceConsumer as default
+};

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.d.ts

@@ -0,0 +1,7 @@
+import { PhraseToken } from '../..';
+import { default as PhraseConsumer } from '../../PhraseConsumer';
+import { default as PhraseLexer } from '../../PhraseLexer';
+export default class WordConsumer extends PhraseConsumer<PhraseLexer> {
+    lock(lexer: PhraseLexer): boolean;
+    consume(lexer: PhraseLexer): PhraseToken;
+}

package/components/elements/addons/search/phrase/word/consumers/WordConsumer.js

@@ -0,0 +1,20 @@
+import PhraseConsumer from "../../PhraseConsumer.js";
+class WordConsumer extends PhraseConsumer {
+  lock(lexer) {
+    return !lexer.bufferValue().match(/\s/) && (lexer.ahead(1) === " " || lexer.ahead(1) === "");
+  }
+  consume(lexer) {
+    if (lexer.ahead(1) === " " || lexer.aheadIsEmpty(true)) {
+      return {
+        type: "word",
+        startIndex: lexer.start(),
+        endIndex: lexer.end(),
+        value: this._buffer.join("")
+      };
+    }
+    return null;
+  }
+}
+export {
+  WordConsumer as default
+};

package/components/elements/display/ActionButton.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@mui/material';
+import { FC } from 'react';
+declare const ActionButton: FC<{
+    actionId: string;
+    hitId: string;
+    label: string;
+} & ButtonProps>;
+export default ActionButton;

package/components/elements/display/ActionButton.js

@@ -0,0 +1,36 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Button } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import useMyActionFunctions from "../../routes/action/useMyActionFunctions.js";
+import { useState, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const ActionButton = ({
+  actionId,
+  hitId,
+  label,
+  ...otherProps
+}) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { executeAction } = useMyActionFunctions();
+  const [action, setAction] = useState(null);
+  useEffect(() => {
+    dispatchApi(api.search.action.post({ query: `action_id:${actionId}`, rows: 1 })).then(
+      (result) => setAction(result.items[0])
+    );
+  }, [actionId, dispatchApi]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: otherProps.variant ?? "outlined",
+      disabled: !action,
+      onClick: () => executeAction(actionId, `howler.id:${hitId}`),
+      color: otherProps.color ?? "primary",
+      children: label ?? (action == null ? void 0 : action.name) ?? t("loading")
+    }
+  );
+};
+export {
+  ActionButton as default
+};

package/components/elements/display/Classification.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const Classification: FC;
+export default Classification;

package/components/elements/display/Classification.js

@@ -0,0 +1,31 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, useMediaQuery, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { useContext, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+const Classification = () => {
+  var _a, _b;
+  const { config } = useContext(ApiConfigContext);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const isSm = useMediaQuery(theme.breakpoints.down("md"));
+  const label = useMemo(() => {
+    var _a2, _b2, _c;
+    if (isSm) {
+      return ((_b2 = (_a2 = config.c12nDef) == null ? void 0 : _a2.UNRESTRICTED) == null ? void 0 : _b2.replace(/[a-z]/g, "").replace(/ /g, "")) ?? "???";
+    } else {
+      return ((_c = config.c12nDef) == null ? void 0 : _c.UNRESTRICTED) ?? "Unknown";
+    }
+  }, [(_a = config.c12nDef) == null ? void 0 : _a.UNRESTRICTED, isSm]);
+  const color = useMemo(
+    () => {
+      var _a2, _b2, _c;
+      return ((_c = (_b2 = (_a2 = config.c12nDef) == null ? void 0 : _a2.levels_styles_map) == null ? void 0 : _b2[label.replace(/\/\/.+/, "")]) == null ? void 0 : _c.color) ?? "default";
+    },
+    [(_b = config.c12nDef) == null ? void 0 : _b.levels_styles_map, label]
+  );
+  return /* @__PURE__ */ jsx(Chip, { label: t(label), color, sx: { mr: 1, fontSize: ".9rem", p: 2, textTransform: "uppercase" } });
+};
+export {
+  Classification as default
+};

package/components/elements/display/DocumentationButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const DocumentationButton: FC;
+export default DocumentationButton;

package/components/elements/display/DocumentationButton.js

@@ -0,0 +1,36 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Help } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Tooltip, IconButton } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useLocation, Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+const DocumentationButton = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [link, i18nKey] = useMemo(() => {
+    switch (location.pathname) {
+      case "/action": {
+        return ["/help/actions", "documentation.open.actions"];
+      }
+      case "/search":
+      case "/advanced": {
+        return ["/help/search", "documentation.open.search"];
+      }
+      case "/views":
+      case "/views/create": {
+        return ["/help/views", "documentation.open.views"];
+      }
+      case "/templates":
+      case "/templates/view": {
+        return ["/help/templates", "documentation.open.templates"];
+      }
+      default: {
+        return [null, null];
+      }
+    }
+  }, [location.pathname]);
+  return link && /* @__PURE__ */ jsx(Tooltip, { title: t(i18nKey), children: /* @__PURE__ */ jsx(IconButton, { size: "small", component: Link, to: link, sx: { ml: -2, color: "text.secondary", opacity: 0.8 }, children: /* @__PURE__ */ jsx(Help, { sx: { fontSize: "16px" } }) }) });
+};
+export {
+  DocumentationButton as default
+};

package/components/elements/display/DynamicTabs.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const DynamicTabs: React.FC<{
+    tabs: {
+        title: string;
+        children: React.ReactNode;
+    }[];
+}>;
+export default DynamicTabs;

package/components/elements/display/DynamicTabs.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Box, Tabs, Tab } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import * as React from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const CustomTabPanel = (props) => {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && /* @__PURE__ */ jsx(Box, { sx: { p: 1 }, children }) });
+};
+const a11yProps = (index) => {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+};
+const DynamicTabs = ({ tabs }) => {
+  const [value, setValue] = React.useState(0);
+  const handleChange = (_event, newValue) => {
+    setValue(newValue);
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Tabs, { value, onChange: handleChange, "aria-label": "dynamic tabs", children: tabs.map((t, index) => /* @__PURE__ */ jsx(Tab, { label: t.title, ...a11yProps(index) }, t.title)) }) }),
+    tabs.map((t, index) => /* @__PURE__ */ jsx(CustomTabPanel, { value, index, children: t.children }, t.title))
+  ] });
+};
+export {
+  DynamicTabs as default
+};

package/components/elements/display/HandlebarsMarkdown.d.ts

@@ -0,0 +1,9 @@
+import { MarkdownProps } from '../display/Markdown';
+interface HandlebarsMarkdownProps extends MarkdownProps {
+    object?: {
+        [index: string]: any;
+    };
+    disableLinks?: boolean;
+}
+declare const _default: import('react').NamedExoticComponent<HandlebarsMarkdownProps>;
+export default _default;

package/components/elements/display/HandlebarsMarkdown.js

@@ -0,0 +1,77 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import Handlebars from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/handlebars@4.7.8/node_modules/handlebars/dist/cjs/handlebars.js";
+import asyncHelpers from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/handlebars-async-helpers@1.0.6_handlebars@4.7.8/node_modules/handlebars-async-helpers/index.js";
+import { memo, useState, useMemo, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import Throttler from "../../../utils/Throttler.js";
+import { hashCode } from "../../../utils/utils.js";
+import Markdown from "./Markdown.js";
+import { useHelpers } from "./handlebars/helpers.js";
+const THROTTLER = new Throttler(500);
+const HandlebarsMarkdown = ({ md, object = {}, disableLinks = false }) => {
+  const { t } = useTranslation();
+  const helpers = useHelpers();
+  const [rendered, setRendered] = useState("");
+  const [mdComponents, setMdComponents] = useState({});
+  const handlebars = useMemo(() => {
+    const instance = asyncHelpers(Handlebars);
+    instance.registerHelper("img", async (context) => {
+      const hash = Object.fromEntries(
+        await Promise.all(Object.entries(context.hash).map(async ([key, val]) => [key, await val]))
+      );
+      if (!hash.src) {
+        return "";
+      }
+      const props = Object.entries(hash).map(([key, val]) => `${key}="${val}"`).join(" ");
+      return new Handlebars.SafeString(`<img ${props} >`);
+    });
+    return instance;
+  }, []);
+  useEffect(() => {
+    helpers.forEach((helper) => {
+      if (handlebars.helpers[helper.keyword] && !helper.componentCallback) {
+        return;
+      }
+      handlebars.registerHelper(helper.keyword, (...args) => {
+        console.debug(`Running helper ${helper.keyword}`);
+        if (helper.componentCallback) {
+          const id = hashCode(JSON.stringify([helper.keyword, ...args])).toString();
+          if (!mdComponents[id]) {
+            const result = helper.componentCallback(...args);
+            if (result instanceof Promise) {
+              result.then((_result) => setMdComponents((_components) => ({ ..._components, [id]: _result })));
+            } else {
+              setMdComponents((_components) => ({ ..._components, [id]: result }));
+            }
+          }
+          return new Handlebars.SafeString(`\`${id}\``);
+        }
+        return helper.callback(...args);
+      });
+    });
+  }, [handlebars, helpers, mdComponents]);
+  useEffect(() => {
+    THROTTLER.debounce(async () => {
+      try {
+        const compiled = handlebars.compile(md || "");
+        setRendered(await compiled(object));
+      } catch (err) {
+        console.error(err);
+        setRendered(`
+<h2 style="color: red">${t("markdown.error")}</h2>
+
+**\`${err.toString()}\`**
+
+<code style="font-size: 0.8rem"><pre>
+${err.stack}
+</pre></code>
+        `);
+      }
+    });
+  }, [md, handlebars, object, t]);
+  return /* @__PURE__ */ jsx(Markdown, { md: rendered, disableLinks, components: mdComponents });
+};
+const HandlebarsMarkdown$1 = memo(HandlebarsMarkdown);
+export {
+  HandlebarsMarkdown$1 as default
+};

package/components/elements/display/HowlerAvatar.d.ts

@@ -0,0 +1,6 @@
+import { AvatarProps } from '@mui/material';
+type HowlerAvatarProps = AvatarProps & {
+    userId: string;
+};
+declare const _default: import('react').NamedExoticComponent<HowlerAvatarProps>;
+export default _default;

package/components/elements/display/HowlerAvatar.js

@@ -0,0 +1,53 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, Tooltip, Avatar } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { AvatarContext } from "../../app/providers/AvatarProvider.js";
+import { memo, useContext, useState, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { nameToInitials } from "../../../utils/stringUtils.js";
+import { stringToColor } from "../../../utils/utils.js";
+const HowlerAvatar = ({ userId, ...avatarProps }) => {
+  const { getAvatar } = useContext(AvatarContext);
+  const theme = useTheme();
+  const [props, setProps] = useState();
+  const stringAvatar = useCallback(
+    (name) => {
+      return {
+        sx: {
+          bgcolor: stringToColor(name),
+          color: theme.palette.getContrastText(stringToColor(name))
+        },
+        children: nameToInitials(name)
+      };
+    },
+    [theme.palette]
+  );
+  useEffect(() => {
+    if (!userId || userId.toLowerCase() === "unassigned") {
+      setProps({});
+    } else {
+      getAvatar(userId).then(
+        (av) => av && !av.startsWith("http") && !av.startsWith("data:") ? setProps(stringAvatar(av)) : setProps({ src: av })
+      ).catch((e) => {
+        console.debug(e);
+        setProps({
+          src: null
+        });
+      });
+    }
+  }, [userId]);
+  if (userId) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: userId, children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        ...avatarProps,
+        ...props,
+        sx: { ...(avatarProps == null ? void 0 : avatarProps.sx) || {}, ...(props == null ? void 0 : props.sx) || {} }
+      }
+    ) });
+  } else {
+    return /* @__PURE__ */ jsx(Avatar, { ...avatarProps, ...props, sx: { ...(avatarProps == null ? void 0 : avatarProps.sx) || {}, ...(props == null ? void 0 : props.sx) || {} } });
+  }
+};
+const HowlerAvatar$1 = memo(HowlerAvatar);
+export {
+  HowlerAvatar$1 as default
+};

package/components/elements/display/HowlerAvatarHeader.d.ts

@@ -0,0 +1,6 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { FC } from 'react';
+declare const HowlerAvatarHeader: FC<{
+    user: HowlerUser;
+}>;
+export default HowlerAvatarHeader;

package/components/elements/display/HowlerAvatarHeader.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled, Grid, useTheme, Typography } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import HowlerAvatar from "./HowlerAvatar.js";
+const AvatarContainer = styled(Grid)(({ theme }) => ({
+  marginRight: theme.spacing(4)
+}));
+const HowlerAvatarHeader = ({ user }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(AvatarContainer, { item: true, sm: 12, md: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, justifyContent: "center", children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      HowlerAvatar,
+      {
+        userId: user == null ? void 0 : user.username,
+        sx: {
+          width: theme.spacing(16),
+          height: theme.spacing(16),
+          [theme.breakpoints.down("sm")]: {
+            width: theme.spacing(24),
+            height: theme.spacing(24)
+          },
+          margin: "0 1rem"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { textAlign: "center", children: (user == null ? void 0 : user.name) ?? "" }) })
+  ] }) });
+};
+export {
+  HowlerAvatarHeader as default
+};

package/components/elements/display/HowlerCard.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from '@mui/material';
+declare const _default: import('react').NamedExoticComponent<CardProps>;
+export default _default;

package/components/elements/display/HowlerCard.js

@@ -0,0 +1,8 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Card } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const HowlerCard = (props) => /* @__PURE__ */ jsx(Card, { style: { outline: "none" }, elevation: props.variant !== "outlined" ? 4 : 0, ...props });
+const HowlerCard$1 = memo(HowlerCard);
+export {
+  HowlerCard$1 as default
+};

package/components/elements/display/Image.d.ts

@@ -0,0 +1,3 @@
+import { DetailedHTMLProps, FC, ImgHTMLAttributes } from 'react';
+declare const Image: FC<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+export default Image;

package/components/elements/display/Image.js

@@ -0,0 +1,45 @@
+import { jsxs, Fragment, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Close } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Modal, Box, IconButton, lighten } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useState } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const Image = (props) => {
+  const [showModal, setShowModal] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("img", { ...props, style: { ...props.style ?? {}, cursor: "pointer" }, onClick: () => setShowModal(true) }),
+    /* @__PURE__ */ jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: () => setShowModal(false),
+        children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => setShowModal(false),
+              sx: (theme) => ({
+                position: "fixed",
+                top: "2rem",
+                right: "2rem",
+                backgroundColor: "background.paper",
+                "&:hover": {
+                  backgroundColor: lighten(theme.palette.background.paper, 0.1)
+                }
+              }),
+              children: /* @__PURE__ */ jsx(Close, {})
+            }
+          ),
+          /* @__PURE__ */ jsx("img", { ...props, style: { ...props.style ?? {}, maxWidth: "70vw", maxHeight: "70vh" } })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Image as default
+};

package/components/elements/display/ItemManager.d.ts

@@ -0,0 +1,25 @@
+import { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import { TuiListItemOnSelect, TuiListItemRenderer } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { FC, ReactNode } from 'react';
+interface ItemManagerProps {
+    aboveSearch?: ReactNode;
+    afterSearch?: ReactNode;
+    belowSearch?: ReactNode;
+    searchFilters?: ReactNode;
+    hasError: boolean;
+    onPageChange: (nextOffset: number) => void;
+    onSearch: () => void;
+    onCreate?: () => void;
+    onSelect?: TuiListItemOnSelect<unknown>;
+    phrase: string;
+    renderer: TuiListItemRenderer<unknown>;
+    response: HowlerSearchResponse<unknown>;
+    searchAdornment?: ReactNode;
+    searching: boolean;
+    createPrompt?: string;
+    searchPrompt: string;
+    setPhrase: (value: string) => void;
+    createIcon?: ReactNode;
+}
+declare const ItemManager: FC<ItemManagerProps>;
+export default ItemManager;

package/components/elements/display/ItemManager.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMediaQuery, Stack, Tooltip, IconButton, LinearProgress, Box, Fab, Typography } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { Search, Add } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { T as TuiList } from "../../../TuiList-D7-CH2oS.js";
+import "../addons/lists/TuiListProvider.js";
+import SearchPagination from "../addons/search/SearchPagination.js";
+import SearchTotal from "../addons/search/SearchTotal.js";
+import ErrorBoundary from "../../routes/ErrorBoundary.js";
+import Phrase from "../addons/search/phrase/Phrase.js";
+const ItemManager = ({
+  aboveSearch,
+  afterSearch,
+  belowSearch,
+  searchFilters,
+  hasError,
+  onPageChange,
+  onSearch,
+  onSelect,
+  onCreate,
+  phrase,
+  renderer,
+  response,
+  searchAdornment,
+  searching,
+  createPrompt,
+  searchPrompt,
+  setPhrase,
+  createIcon
+}) => {
+  const { t } = useTranslation();
+  const isNarrow = useMediaQuery("(max-width: 1800px)");
+  return /* @__PURE__ */ jsx(PageCenter, { maxWidth: "1200px", textAlign: "left", height: "100%", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { position: "relative" }, children: [
+    aboveSearch,
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsxs(Stack, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Phrase,
+          {
+            value: phrase,
+            onChange: setPhrase,
+            onKeyDown: ({ isEnter }) => {
+              if (isEnter) {
+                onSearch();
+              }
+            },
+            error: hasError,
+            InputProps: {
+              sx: {
+                pr: 1
+              }
+            },
+            startAdornment: /* @__PURE__ */ jsx(Tooltip, { title: t(searchPrompt), children: /* @__PURE__ */ jsx(IconButton, { onClick: () => onSearch(), children: /* @__PURE__ */ jsx(Search, {}) }) }),
+            endAdornment: /* @__PURE__ */ jsx(Fragment, { children: searchAdornment })
+          }
+        ),
+        searching && /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            sx: (theme) => ({
+              mt: -0.5,
+              borderBottomLeftRadius: theme.shape.borderRadius,
+              borderBottomRightRadius: theme.shape.borderRadius
+            })
+          }
+        )
+      ] }),
+      afterSearch
+    ] }),
+    searchFilters,
+    response && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [
+      /* @__PURE__ */ jsx(
+        SearchTotal,
+        {
+          total: response.total,
+          pageLength: response.items.length,
+          offset: response.offset,
+          sx: (theme) => ({ color: theme.palette.text.secondary, fontSize: "0.9em", fontStyle: "italic" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { flex: 1 }),
+      /* @__PURE__ */ jsx(
+        SearchPagination,
+        {
+          total: response.total,
+          limit: response.rows,
+          offset: response.offset,
+          onChange: onPageChange
+        }
+      )
+    ] }),
+    belowSearch,
+    /* @__PURE__ */ jsx(TuiList, { onSelection: onSelect, children: renderer }),
+    onCreate && /* @__PURE__ */ jsxs(
+      Fab,
+      {
+        variant: "extended",
+        size: "large",
+        color: "primary",
+        sx: (theme) => ({
+          textTransform: "none",
+          position: isNarrow ? "fixed" : "absolute",
+          right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+          whiteSpace: "nowrap",
+          ...isNarrow ? { bottom: theme.spacing(1) } : { top: 0 }
+        }),
+        onClick: onCreate,
+        children: [
+          createIcon ?? /* @__PURE__ */ jsx(Add, { sx: { mr: 1 } }),
+          /* @__PURE__ */ jsx(Typography, { children: t(createPrompt ?? "create") })
+        ]
+      }
+    )
+  ] }) }) });
+};
+export {
+  ItemManager as default
+};

package/components/elements/display/Markdown.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export interface MarkdownProps {
+    md: string;
+    components?: {
+        [index: string]: ReactElement;
+    };
+    disableLinks?: boolean;
+}
+declare const _default: import('react').NamedExoticComponent<MarkdownProps>;
+export default _default;