@xyo-network/react-embed 2.64.0 → 2.64.1

package/dist/browser/components/embed-card/card/EmbedCardHeader.js

@@ -1,30 +1,81 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/embed-card/card/EmbedCardHeader.tsx
 import { Refresh as RefreshIcon } from "@mui/icons-material";
 import { Avatar, CardHeader, Chip } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
-import { useEmbedPluginState, useResolvePayload } from "../../../contexts";
-import { EmbedMenu } from "../menu";
-const EmbedCardHeader = () => {
+
+// src/contexts/EmbedPluginContext/Context.tsx
+import { createContextEx } from "@xyo-network/react-shared";
+var EmbedPluginContext = createContextEx();
+
+// src/contexts/EmbedPluginContext/use.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useEmbedPluginState = () => useContextEx(EmbedPluginContext, "EmbedPlugin", true);
+
+// src/contexts/ResolvePayloadContext/Context.ts
+import { createContextEx as createContextEx2 } from "@xyo-network/react-shared";
+var ResolvePayloadContext = createContextEx2();
+
+// src/contexts/ResolvePayloadContext/use.tsx
+import { useContextEx as useContextEx2 } from "@xyo-network/react-shared";
+var useResolvePayload = () => useContextEx2(ResolvePayloadContext, "ResolvePayload", true);
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { MoreVert as MoreVertIcon } from "@mui/icons-material";
+import { IconButton, Menu } from "@mui/material";
+import { useState } from "react";
+
+// src/components/embed-card/menu/JsonMenuItem.tsx
+import { OpenInNew as OpenInNewIcon } from "@mui/icons-material";
+import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var JsonMenuItem = (props) => {
+  const { huri } = useResolvePayload();
+  return /* @__PURE__ */ jsx(Fragment, { children: huri ? /* @__PURE__ */ jsxs(MenuItem, { title: "Source Payload JSON", onClick: () => window.open(huri, "_blank"), ...props, children: [
+    /* @__PURE__ */ jsx(ListItemText, { sx: { mr: 1 }, children: "JSON" }),
+    /* @__PURE__ */ jsx(ListItemIcon, { sx: { justifyContent: "end" }, children: /* @__PURE__ */ jsx(OpenInNewIcon, { fontSize: "small" }) })
+  ] }) : null });
+};
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EmbedMenu = (props) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(IconButton, { onClick: handleClick, ...props, children: /* @__PURE__ */ jsx2(MoreVertIcon, {}) }),
+    /* @__PURE__ */ jsx2(Menu, { anchorEl, open, onClose: handleClose, PaperProps: { variant: "elevation" }, MenuListProps: { dense: true }, children: /* @__PURE__ */ jsx2(JsonMenuItem, {}) })
+  ] });
+};
+
+// src/components/embed-card/card/EmbedCardHeader.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var EmbedCardHeader = () => {
   const { refreshHuri, huri } = useResolvePayload();
   const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState();
   const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {};
   const timestamp = Date.now();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     CardHeader,
     {
       sx: { flexWrap: "wrap", rowGap: 1 },
-      avatar: hideAvatar ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Avatar, { sx: { bgcolor: (theme) => theme.palette.primary.main }, "aria-label": activePlugin?.name, children: activePlugin?.name?.charAt(0) }),
-      action: /* @__PURE__ */ jsxs(FlexRow, { flexWrap: "wrap", columnGap: 0.5, children: [
-        timestamp ? hideTimestamp && hideRefreshButton ? "" : /* @__PURE__ */ jsx(
+      avatar: hideAvatar ? /* @__PURE__ */ jsx3(Fragment3, {}) : /* @__PURE__ */ jsx3(Avatar, { sx: { bgcolor: (theme) => theme.palette.primary.main }, "aria-label": activePlugin?.name, children: activePlugin?.name?.charAt(0) }),
+      action: /* @__PURE__ */ jsxs3(FlexRow, { flexWrap: "wrap", columnGap: 0.5, children: [
+        timestamp ? hideTimestamp && hideRefreshButton ? "" : /* @__PURE__ */ jsx3(
           Chip,
           {
-            avatar: hideRefreshButton ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RefreshIcon, {}),
+            avatar: hideRefreshButton ? /* @__PURE__ */ jsx3(Fragment3, {}) : /* @__PURE__ */ jsx3(RefreshIcon, {}),
             clickable: hideRefreshButton ? false : true,
             onClick: refreshHuri,
             label: hideTimestamp ? "" : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`
           }
         ) : null,
-        hideCardActions || huri === void 0 ? null : /* @__PURE__ */ jsx(EmbedMenu, {})
+        hideCardActions || huri === void 0 ? null : /* @__PURE__ */ jsx3(EmbedMenu, {})
       ] }),
       title: hideTitle ? "" : activePlugin?.name
     }

package/dist/browser/components/embed-card/card/EmbedCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/embed-card/card/EmbedCardHeader.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedMenu } from '../menu'\n\nexport const EmbedCardHeader: React.FC<CardHeaderProps> = () => {\n  const { refreshHuri, huri } = useResolvePayload()\n  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState()\n  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}\n  //this is temporary so that we can add the ability to get a timestamp via diviner later\n  const timestamp = Date.now()\n  return (\n    <CardHeader\n      sx={{ flexWrap: 'wrap', rowGap: 1 }}\n      avatar={\n        hideAvatar ? (\n          <></>\n        ) : (\n          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>\n            {activePlugin?.name?.charAt(0)}\n          </Avatar>\n        )\n      }\n      action={\n        <FlexRow flexWrap=\"wrap\" columnGap={0.5}>\n          {timestamp ? (\n            hideTimestamp && hideRefreshButton ? (\n              ''\n            ) : (\n              <Chip\n                avatar={hideRefreshButton ? <></> : <RefreshIcon />}\n                clickable={hideRefreshButton ? false : true}\n                onClick={refreshHuri}\n                label={hideTimestamp ? '' : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`}\n              />\n            )\n          ) : null}\n          {/* Huri case is valid as long as the only menu item is JSON */}\n          {hideCardActions || huri === undefined ? null : <EmbedMenu />}\n        </FlexRow>\n      }\n      title={hideTitle ? '' : activePlugin?.name}\n    />\n  )\n}\n"],"mappings":"AAkBU,wBAQF,YARE;AAlBV,SAAS,WAAW,mBAAmB;AACvC,SAAS,QAAQ,YAA6B,YAAmB;AACjE,SAAS,eAAe;AAExB,SAAS,qBAAqB,yBAAyB;AACvD,SAAS,iBAAiB;AAEnB,MAAM,kBAA6C,MAAM;AAC9D,QAAM,EAAE,aAAa,KAAK,IAAI,kBAAkB;AAChD,QAAM,EAAE,cAAc,gBAAgB,mBAAmB,IAAI,oBAAoB;AACjF,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe,gBAAgB,IAAI,sBAAsB,CAAC;AAE5G,QAAM,YAAY,KAAK,IAAI;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,EAAE,UAAU,QAAQ,QAAQ,EAAE;AAAA,MAClC,QACE,aACE,gCAAE,IAEF,oBAAC,UAAO,IAAI,EAAE,SAAS,CAAC,UAAiB,MAAM,QAAQ,QAAQ,KAAK,GAAG,cAAY,cAAc,MAC9F,wBAAc,MAAM,OAAO,CAAC,GAC/B;AAAA,MAGJ,QACE,qBAAC,WAAQ,UAAS,QAAO,WAAW,KACjC;AAAA,oBACC,iBAAiB,oBACf,KAEA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,oBAAoB,gCAAE,IAAM,oBAAC,eAAY;AAAA,YACjD,WAAW,oBAAoB,QAAQ;AAAA,YACvC,SAAS;AAAA,YACT,OAAO,gBAAgB,KAAK,GAAG,cAAc,IAAI,IAAI,KAAK,SAAS,EAAE,eAAe,CAAC;AAAA;AAAA,QACvF,IAEA;AAAA,QAEH,mBAAmB,SAAS,SAAY,OAAO,oBAAC,aAAU;AAAA,SAC7D;AAAA,MAEF,OAAO,YAAY,KAAK,cAAc;AAAA;AAAA,EACxC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/embed-card/card/EmbedCardHeader.tsx","../../../../../src/contexts/EmbedPluginContext/Context.tsx","../../../../../src/contexts/EmbedPluginContext/use.tsx","../../../../../src/contexts/ResolvePayloadContext/Context.ts","../../../../../src/contexts/ResolvePayloadContext/use.tsx","../../../../../src/components/embed-card/menu/EmbedMenu.tsx","../../../../../src/components/embed-card/menu/JsonMenuItem.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedMenu } from '../menu'\n\nexport const EmbedCardHeader: React.FC<CardHeaderProps> = () => {\n  const { refreshHuri, huri } = useResolvePayload()\n  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState()\n  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}\n  //this is temporary so that we can add the ability to get a timestamp via diviner later\n  const timestamp = Date.now()\n  return (\n    <CardHeader\n      sx={{ flexWrap: 'wrap', rowGap: 1 }}\n      avatar={\n        hideAvatar ? (\n          <></>\n        ) : (\n          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>\n            {activePlugin?.name?.charAt(0)}\n          </Avatar>\n        )\n      }\n      action={\n        <FlexRow flexWrap=\"wrap\" columnGap={0.5}>\n          {timestamp ? (\n            hideTimestamp && hideRefreshButton ? (\n              ''\n            ) : (\n              <Chip\n                avatar={hideRefreshButton ? <></> : <RefreshIcon />}\n                clickable={hideRefreshButton ? false : true}\n                onClick={refreshHuri}\n                label={hideTimestamp ? '' : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`}\n              />\n            )\n          ) : null}\n          {/* Huri case is valid as long as the only menu item is JSON */}\n          {hideCardActions || huri === undefined ? null : <EmbedMenu />}\n        </FlexRow>\n      }\n      title={hideTitle ? '' : activePlugin?.name}\n    />\n  )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginState } from './State'\n\nexport const EmbedPluginContext = createContextEx<EmbedPluginState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginContext } from './Context'\n\nexport const useEmbedPluginState = () => useContextEx(EmbedPluginContext, 'EmbedPlugin', true)\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadState } from './State'\n\nexport const ResolvePayloadContext = createContextEx<ResolvePayloadState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadContext } from './Context'\n\nexport const useResolvePayload = () => useContextEx(ResolvePayloadContext, 'ResolvePayload', true)\n","import { MoreVert as MoreVertIcon } from '@mui/icons-material'\nimport { IconButton, IconButtonProps, Menu } from '@mui/material'\nimport { useState } from 'react'\n\nimport { JsonMenuItem } from './JsonMenuItem'\n\nexport const EmbedMenu: React.FC<IconButtonProps> = (props) => {\n  // TODO - link to explore website\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <IconButton onClick={handleClick} {...props}>\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} PaperProps={{ variant: 'elevation' }} MenuListProps={{ dense: true }}>\n        <JsonMenuItem />\n      </Menu>\n    </>\n  )\n}\n","import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'\nimport { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'\n\nimport { useResolvePayload } from '../../../contexts'\n\nexport const JsonMenuItem: React.FC<MenuItemProps> = (props) => {\n  const { huri } = useResolvePayload()\n\n  return (\n    <>\n      {huri ? (\n        <MenuItem title=\"Source Payload JSON\" onClick={() => window.open(huri, '_blank')} {...props}>\n          <ListItemText sx={{ mr: 1 }}>JSON</ListItemText>\n          <ListItemIcon sx={{ justifyContent: 'end' }}>\n            <OpenInNewIcon fontSize=\"small\" />\n          </ListItemIcon>\n        </MenuItem>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":"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","names":["createContextEx","useContextEx","useContextEx","Fragment","jsx","jsxs","Fragment","jsx","jsxs"]}

package/dist/browser/components/embed-card/card/EmbedPluginCard.js

@@ -1,23 +1,178 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/embed-card/card/EmbedPluginCard.tsx
 import { CardContent } from "@mui/material";
 import { FlexGrowRow } from "@xylabs/react-flexbox";
+import { useListMode as useListMode2 } from "@xyo-network/react-shared";
+
+// src/contexts/EmbedPluginContext/Context.tsx
+import { createContextEx } from "@xyo-network/react-shared";
+var EmbedPluginContext = createContextEx();
+
+// src/contexts/EmbedPluginContext/use.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useEmbedPluginState = () => useContextEx(EmbedPluginContext, "EmbedPlugin", true);
+
+// src/contexts/ResolvePayloadContext/Context.ts
+import { createContextEx as createContextEx2 } from "@xyo-network/react-shared";
+var ResolvePayloadContext = createContextEx2();
+
+// src/contexts/ResolvePayloadContext/use.tsx
+import { useContextEx as useContextEx2 } from "@xyo-network/react-shared";
+var useResolvePayload = () => useContextEx2(ResolvePayloadContext, "ResolvePayload", true);
+
+// src/components/controls/EmbedFormControl.tsx
+import { FormControl, InputLabel } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EmbedFormControl = ({ formId, formLabel, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(FormControl, { ...props, children: [
+    /* @__PURE__ */ jsx(InputLabel, { id: formId, children: formLabel }),
+    children
+  ] });
+};
+
+// src/components/controls/ListModeSelect.tsx
+import { MenuItem, Select } from "@mui/material";
 import { useListMode } from "@xyo-network/react-shared";
-import { useEmbedPluginState, useResolvePayload } from "../../../contexts";
-import { EmbedRenderSelect, ListModeSelectFormControl } from "../../controls";
-import { BusyCard } from "./BusyCard";
-import { EmbedCardHeader } from "./EmbedCardHeader";
-const EmbedPluginCard = ({ ...props }) => {
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var listModeSelectId = "listmode-select-id";
+var listModeSelectLabel = "List Mode";
+var ListModeSelect = (props) => {
+  const { listMode, setListMode } = useListMode();
+  return /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      value: listMode ?? "default",
+      onChange: (event) => {
+        setListMode?.(event.target.value);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(MenuItem, { value: "default", children: "Default" }, "default"),
+        /* @__PURE__ */ jsx2(MenuItem, { value: "table", children: "Table" }, "table"),
+        /* @__PURE__ */ jsx2(MenuItem, { value: "grid", children: "Grid" }, "grid")
+      ]
+    }
+  );
+};
+var ListModeSelectFormControl = (props) => {
+  return /* @__PURE__ */ jsx2(EmbedFormControl, { formId: listModeSelectId, formLabel: listModeSelectLabel, children: /* @__PURE__ */ jsx2(ListModeSelect, { size: "small", label: listModeSelectLabel, labelId: listModeSelectId, ...props }) });
+};
+
+// src/components/controls/RenderSelect.tsx
+import { MenuItem as MenuItem2, Select as Select2 } from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var renderSelectId = "render-select-id";
+var renderSelectLabel = "Renderer";
+var EmbedRenderSelect = (props) => {
+  const { activePlugin, setActivePlugin, plugins } = useEmbedPluginState();
+  return /* @__PURE__ */ jsx3(EmbedFormControl, { formId: renderSelectId, formLabel: renderSelectLabel, children: /* @__PURE__ */ jsx3(Select2, { size: "small", value: activePlugin?.name, ...props, children: plugins?.map((plugin) => /* @__PURE__ */ jsx3(MenuItem2, { value: plugin.name, onClick: () => setActivePlugin?.(plugin), children: plugin.name }, plugin.name)) }) });
+};
+
+// src/components/embed-card/card/BusyCard.tsx
+import { Card } from "@mui/material";
+import { useBusyTiming } from "@xylabs/react-flexbox";
+import {
+  BusyCircularProgress,
+  BusyLinearProgress
+} from "@xylabs/react-shared";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var BusyCard = ({
+  busy,
+  busyMinimum = 500,
+  busyVariant = "circular",
+  busyVariantProps,
+  children,
+  ...props
+}) => {
+  const internalBusy = useBusyTiming(busy, busyMinimum);
+  return /* @__PURE__ */ jsxs3(Card, { ...props, children: [
+    children,
+    busyVariant === "circular" && internalBusy ? /* @__PURE__ */ jsx4(BusyCircularProgress, { ...busyVariantProps }) : null,
+    busyVariant === "linear" && internalBusy ? /* @__PURE__ */ jsx4(BusyLinearProgress, { ...busyVariantProps }) : null
+  ] });
+};
+
+// src/components/embed-card/card/EmbedCardHeader.tsx
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { Avatar, CardHeader, Chip } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { MoreVert as MoreVertIcon } from "@mui/icons-material";
+import { IconButton, Menu } from "@mui/material";
+import { useState } from "react";
+
+// src/components/embed-card/menu/JsonMenuItem.tsx
+import { OpenInNew as OpenInNewIcon } from "@mui/icons-material";
+import { ListItemIcon, ListItemText, MenuItem as MenuItem3 } from "@mui/material";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var JsonMenuItem = (props) => {
+  const { huri } = useResolvePayload();
+  return /* @__PURE__ */ jsx5(Fragment, { children: huri ? /* @__PURE__ */ jsxs4(MenuItem3, { title: "Source Payload JSON", onClick: () => window.open(huri, "_blank"), ...props, children: [
+    /* @__PURE__ */ jsx5(ListItemText, { sx: { mr: 1 }, children: "JSON" }),
+    /* @__PURE__ */ jsx5(ListItemIcon, { sx: { justifyContent: "end" }, children: /* @__PURE__ */ jsx5(OpenInNewIcon, { fontSize: "small" }) })
+  ] }) : null });
+};
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var EmbedMenu = (props) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(IconButton, { onClick: handleClick, ...props, children: /* @__PURE__ */ jsx6(MoreVertIcon, {}) }),
+    /* @__PURE__ */ jsx6(Menu, { anchorEl, open, onClose: handleClose, PaperProps: { variant: "elevation" }, MenuListProps: { dense: true }, children: /* @__PURE__ */ jsx6(JsonMenuItem, {}) })
+  ] });
+};
+
+// src/components/embed-card/card/EmbedCardHeader.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var EmbedCardHeader = () => {
+  const { refreshHuri, huri } = useResolvePayload();
+  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState();
+  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {};
+  const timestamp = Date.now();
+  return /* @__PURE__ */ jsx7(
+    CardHeader,
+    {
+      sx: { flexWrap: "wrap", rowGap: 1 },
+      avatar: hideAvatar ? /* @__PURE__ */ jsx7(Fragment3, {}) : /* @__PURE__ */ jsx7(Avatar, { sx: { bgcolor: (theme) => theme.palette.primary.main }, "aria-label": activePlugin?.name, children: activePlugin?.name?.charAt(0) }),
+      action: /* @__PURE__ */ jsxs6(FlexRow, { flexWrap: "wrap", columnGap: 0.5, children: [
+        timestamp ? hideTimestamp && hideRefreshButton ? "" : /* @__PURE__ */ jsx7(
+          Chip,
+          {
+            avatar: hideRefreshButton ? /* @__PURE__ */ jsx7(Fragment3, {}) : /* @__PURE__ */ jsx7(RefreshIcon, {}),
+            clickable: hideRefreshButton ? false : true,
+            onClick: refreshHuri,
+            label: hideTimestamp ? "" : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`
+          }
+        ) : null,
+        hideCardActions || huri === void 0 ? null : /* @__PURE__ */ jsx7(EmbedMenu, {})
+      ] }),
+      title: hideTitle ? "" : activePlugin?.name
+    }
+  );
+};
+
+// src/components/embed-card/card/EmbedPluginCard.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var EmbedPluginCard = ({ ...props }) => {
   const { payload } = useResolvePayload();
   const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState();
-  const { listMode } = useListMode();
+  const { listMode } = useListMode2();
   const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1;
-  return /* @__PURE__ */ jsxs(BusyCard, { ...props, children: [
-    hideElementsConfig?.hideCardHeader ? null : /* @__PURE__ */ jsx(EmbedCardHeader, {}),
-    plugins && plugins.length || supportsListMode ? /* @__PURE__ */ jsxs(FlexGrowRow, { columnGap: 2, rowGap: 2, flexWrap: "wrap", pb: 1, children: [
-      plugins && plugins.length > 1 ? /* @__PURE__ */ jsx(EmbedRenderSelect, {}) : null,
-      supportsListMode ? /* @__PURE__ */ jsx(ListModeSelectFormControl, {}) : null
+  return /* @__PURE__ */ jsxs7(BusyCard, { ...props, children: [
+    hideElementsConfig?.hideCardHeader ? null : /* @__PURE__ */ jsx8(EmbedCardHeader, {}),
+    plugins && plugins.length || supportsListMode ? /* @__PURE__ */ jsxs7(FlexGrowRow, { columnGap: 2, rowGap: 2, flexWrap: "wrap", pb: 1, children: [
+      plugins && plugins.length > 1 ? /* @__PURE__ */ jsx8(EmbedRenderSelect, {}) : null,
+      supportsListMode ? /* @__PURE__ */ jsx8(ListModeSelectFormControl, {}) : null
     ] }) : null,
-    /* @__PURE__ */ jsx(CardContent, { sx: { height: "100%" }, children: ActivePlugin ? /* @__PURE__ */ jsx(ActivePlugin.components.box.detailsBox, { payload, ...supportsListMode && { listMode } }) : null })
+    /* @__PURE__ */ jsx8(CardContent, { sx: { height: "100%" }, children: ActivePlugin ? /* @__PURE__ */ jsx8(ActivePlugin.components.box.detailsBox, { payload, ...supportsListMode && { listMode } }) : null })
   ] });
 };
 export {

package/dist/browser/components/embed-card/card/EmbedPluginCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/embed-card/card/EmbedPluginCard.tsx"],"sourcesContent":["import { CardContent } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { useListMode } from '@xyo-network/react-shared'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedRenderSelect, ListModeSelectFormControl } from '../../controls'\nimport { BusyCard, BusyCardProps } from './BusyCard'\nimport { EmbedCardHeader } from './EmbedCardHeader'\n\nexport const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {\n  const { payload } = useResolvePayload()\n  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState()\n  const { listMode } = useListMode()\n  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1\n\n  return (\n    <BusyCard {...props}>\n      {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}\n      {/* Only show the row if the children are present */}\n      {(plugins && plugins.length) || supportsListMode ? (\n        <FlexGrowRow columnGap={2} rowGap={2} flexWrap=\"wrap\" pb={1}>\n          {plugins && plugins.length > 1 ? <EmbedRenderSelect /> : null}\n          {supportsListMode ? <ListModeSelectFormControl /> : null}\n        </FlexGrowRow>\n      ) : null}\n      <CardContent sx={{ height: '100%' }}>\n        {ActivePlugin ? <ActivePlugin.components.box.detailsBox payload={payload} {...(supportsListMode && { listMode })} /> : null}\n      </CardContent>\n    </BusyCard>\n  )\n}\n"],"mappings":"AAiBmD,cAG3C,YAH2C;AAjBnD,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB,yBAAyB;AACvD,SAAS,mBAAmB,iCAAiC;AAC7D,SAAS,gBAA+B;AACxC,SAAS,uBAAuB;AAEzB,MAAM,kBAA2C,CAAC,EAAE,GAAG,MAAM,MAAM;AACxE,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,EAAE,cAAc,cAAc,SAAS,mBAAmB,IAAI,oBAAoB;AACxF,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,mBAAmB,cAAc,YAAY,KAAK,WAAW,UAAU,IAAI;AAEjF,SACE,qBAAC,YAAU,GAAG,OACX;AAAA,wBAAoB,iBAAiB,OAAO,oBAAC,mBAAgB;AAAA,IAE5D,WAAW,QAAQ,UAAW,mBAC9B,qBAAC,eAAY,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAO,IAAI,GACvD;AAAA,iBAAW,QAAQ,SAAS,IAAI,oBAAC,qBAAkB,IAAK;AAAA,MACxD,mBAAmB,oBAAC,6BAA0B,IAAK;AAAA,OACtD,IACE;AAAA,IACJ,oBAAC,eAAY,IAAI,EAAE,QAAQ,OAAO,GAC/B,yBAAe,oBAAC,aAAa,WAAW,IAAI,YAA5B,EAAuC,SAAmB,GAAI,oBAAoB,EAAE,SAAS,GAAI,IAAK,MACzH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/embed-card/card/EmbedPluginCard.tsx","../../../../../src/contexts/EmbedPluginContext/Context.tsx","../../../../../src/contexts/EmbedPluginContext/use.tsx","../../../../../src/contexts/ResolvePayloadContext/Context.ts","../../../../../src/contexts/ResolvePayloadContext/use.tsx","../../../../../src/components/controls/EmbedFormControl.tsx","../../../../../src/components/controls/ListModeSelect.tsx","../../../../../src/components/controls/RenderSelect.tsx","../../../../../src/components/embed-card/card/BusyCard.tsx","../../../../../src/components/embed-card/card/EmbedCardHeader.tsx","../../../../../src/components/embed-card/menu/EmbedMenu.tsx","../../../../../src/components/embed-card/menu/JsonMenuItem.tsx"],"sourcesContent":["import { CardContent } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { useListMode } from '@xyo-network/react-shared'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedRenderSelect, ListModeSelectFormControl } from '../../controls'\nimport { BusyCard, BusyCardProps } from './BusyCard'\nimport { EmbedCardHeader } from './EmbedCardHeader'\n\nexport const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {\n  const { payload } = useResolvePayload()\n  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState()\n  const { listMode } = useListMode()\n  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1\n\n  return (\n    <BusyCard {...props}>\n      {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}\n      {/* Only show the row if the children are present */}\n      {(plugins && plugins.length) || supportsListMode ? (\n        <FlexGrowRow columnGap={2} rowGap={2} flexWrap=\"wrap\" pb={1}>\n          {plugins && plugins.length > 1 ? <EmbedRenderSelect /> : null}\n          {supportsListMode ? <ListModeSelectFormControl /> : null}\n        </FlexGrowRow>\n      ) : null}\n      <CardContent sx={{ height: '100%' }}>\n        {ActivePlugin ? <ActivePlugin.components.box.detailsBox payload={payload} {...(supportsListMode && { listMode })} /> : null}\n      </CardContent>\n    </BusyCard>\n  )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginState } from './State'\n\nexport const EmbedPluginContext = createContextEx<EmbedPluginState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginContext } from './Context'\n\nexport const useEmbedPluginState = () => useContextEx(EmbedPluginContext, 'EmbedPlugin', true)\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadState } from './State'\n\nexport const ResolvePayloadContext = createContextEx<ResolvePayloadState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadContext } from './Context'\n\nexport const useResolvePayload = () => useContextEx(ResolvePayloadContext, 'ResolvePayload', true)\n","import { FormControl, FormControlProps, InputLabel } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\ninterface EmbedFormControlProps extends FormControlProps {\n  formId?: string\n  formLabel?: string\n}\n\nexport const EmbedFormControl: React.FC<WithChildren<EmbedFormControlProps>> = ({ formId, formLabel, children, ...props }) => {\n  return (\n    <FormControl {...props}>\n      <InputLabel id={formId}>{formLabel}</InputLabel>\n      {children}\n    </FormControl>\n  )\n}\n","import { MenuItem, Select, SelectProps } from '@mui/material'\nimport { ListMode, useListMode } from '@xyo-network/react-shared'\n\nimport { EmbedFormControl } from './EmbedFormControl'\n\nconst listModeSelectId = 'listmode-select-id'\nconst listModeSelectLabel = 'List Mode'\n\nexport const ListModeSelect: React.FC<SelectProps<ListMode>> = (props) => {\n  const { listMode, setListMode } = useListMode()\n\n  return (\n    <Select<ListMode>\n      value={(listMode ?? 'default') as ListMode}\n      onChange={(event) => {\n        setListMode?.(event.target.value as ListMode)\n      }}\n      {...props}\n    >\n      <MenuItem key=\"default\" value=\"default\">\n        Default\n      </MenuItem>\n      <MenuItem key=\"table\" value=\"table\">\n        Table\n      </MenuItem>\n      <MenuItem key=\"grid\" value=\"grid\">\n        Grid\n      </MenuItem>\n    </Select>\n  )\n}\n\nexport const ListModeSelectFormControl: React.FC<SelectProps<ListMode>> = (props) => {\n  return (\n    <EmbedFormControl formId={listModeSelectId} formLabel={listModeSelectLabel}>\n      <ListModeSelect size=\"small\" label={listModeSelectLabel} labelId={listModeSelectId} {...props} />\n    </EmbedFormControl>\n  )\n}\n","import { MenuItem, Select, SelectProps } from '@mui/material'\n\nimport { useEmbedPluginState } from '../../contexts'\nimport { EmbedFormControl } from './EmbedFormControl'\n\nconst renderSelectId = 'render-select-id'\nconst renderSelectLabel = 'Renderer'\n\nexport const EmbedRenderSelect: React.FC<SelectProps> = (props) => {\n  const { activePlugin, setActivePlugin, plugins } = useEmbedPluginState()\n  return (\n    <EmbedFormControl formId={renderSelectId} formLabel={renderSelectLabel}>\n      <Select size=\"small\" value={activePlugin?.name} {...props}>\n        {plugins?.map((plugin) => (\n          <MenuItem value={plugin.name} key={plugin.name} onClick={() => setActivePlugin?.(plugin)}>\n            {plugin.name}\n          </MenuItem>\n        ))}\n      </Select>\n    </EmbedFormControl>\n  )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useBusyTiming } from '@xylabs/react-flexbox'\nimport {\n  BusyCircularProgress,\n  BusyCircularProgressProps,\n  BusyLinearProgress,\n  BusyLinearProgressProps,\n  BusyVariant,\n  WithChildren,\n} from '@xylabs/react-shared'\n\nexport interface BusyCardProps extends CardProps {\n  busy?: boolean\n  busyMinimum?: number\n  busyVariant?: BusyVariant\n  busyVariantProps?: BusyCircularProgressProps | BusyLinearProgressProps\n}\n\nexport const BusyCard: React.FC<WithChildren<BusyCardProps>> = ({\n  busy,\n  busyMinimum = 500,\n  busyVariant = 'circular',\n  busyVariantProps,\n  children,\n  ...props\n}) => {\n  const internalBusy = useBusyTiming(busy, busyMinimum)\n  return (\n    <Card {...props}>\n      {children}\n      {busyVariant === 'circular' && internalBusy ? <BusyCircularProgress {...(busyVariantProps as BusyCircularProgressProps)} /> : null}\n      {busyVariant === 'linear' && internalBusy ? <BusyLinearProgress {...(busyVariantProps as BusyLinearProgressProps)} /> : null}\n    </Card>\n  )\n}\n","import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedMenu } from '../menu'\n\nexport const EmbedCardHeader: React.FC<CardHeaderProps> = () => {\n  const { refreshHuri, huri } = useResolvePayload()\n  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState()\n  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}\n  //this is temporary so that we can add the ability to get a timestamp via diviner later\n  const timestamp = Date.now()\n  return (\n    <CardHeader\n      sx={{ flexWrap: 'wrap', rowGap: 1 }}\n      avatar={\n        hideAvatar ? (\n          <></>\n        ) : (\n          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>\n            {activePlugin?.name?.charAt(0)}\n          </Avatar>\n        )\n      }\n      action={\n        <FlexRow flexWrap=\"wrap\" columnGap={0.5}>\n          {timestamp ? (\n            hideTimestamp && hideRefreshButton ? (\n              ''\n            ) : (\n              <Chip\n                avatar={hideRefreshButton ? <></> : <RefreshIcon />}\n                clickable={hideRefreshButton ? false : true}\n                onClick={refreshHuri}\n                label={hideTimestamp ? '' : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`}\n              />\n            )\n          ) : null}\n          {/* Huri case is valid as long as the only menu item is JSON */}\n          {hideCardActions || huri === undefined ? null : <EmbedMenu />}\n        </FlexRow>\n      }\n      title={hideTitle ? '' : activePlugin?.name}\n    />\n  )\n}\n","import { MoreVert as MoreVertIcon } from '@mui/icons-material'\nimport { IconButton, IconButtonProps, Menu } from '@mui/material'\nimport { useState } from 'react'\n\nimport { JsonMenuItem } from './JsonMenuItem'\n\nexport const EmbedMenu: React.FC<IconButtonProps> = (props) => {\n  // TODO - link to explore website\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <IconButton onClick={handleClick} {...props}>\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} PaperProps={{ variant: 'elevation' }} MenuListProps={{ dense: true }}>\n        <JsonMenuItem />\n      </Menu>\n    </>\n  )\n}\n","import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'\nimport { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'\n\nimport { useResolvePayload } from '../../../contexts'\n\nexport const JsonMenuItem: React.FC<MenuItemProps> = (props) => {\n  const { huri } = useResolvePayload()\n\n  return (\n    <>\n      {huri ? (\n        <MenuItem title=\"Source Payload JSON\" onClick={() => window.open(huri, '_blank')} {...props}>\n          <ListItemText sx={{ mr: 1 }}>JSON</ListItemText>\n          <ListItemIcon sx={{ justifyContent: 'end' }}>\n            <OpenInNewIcon fontSize=\"small\" />\n          </ListItemIcon>\n        </MenuItem>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":"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","names":["useListMode","createContextEx","useContextEx","useContextEx","jsx","jsxs","MenuItem","Select","jsx","Select","MenuItem","jsx","jsxs","MenuItem","jsx","jsxs","MenuItem","Fragment","jsx","jsxs","Fragment","jsx","jsxs","jsx","jsxs","useListMode"]}

package/dist/browser/components/embed-card/card/index.js

@@ -1,4 +1,183 @@
-export * from "./BusyCard";
-export * from "./EmbedCardHeader";
-export * from "./EmbedPluginCard";
+// src/components/embed-card/card/BusyCard.tsx
+import { Card } from "@mui/material";
+import { useBusyTiming } from "@xylabs/react-flexbox";
+import {
+  BusyCircularProgress,
+  BusyLinearProgress
+} from "@xylabs/react-shared";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BusyCard = ({
+  busy,
+  busyMinimum = 500,
+  busyVariant = "circular",
+  busyVariantProps,
+  children,
+  ...props
+}) => {
+  const internalBusy = useBusyTiming(busy, busyMinimum);
+  return /* @__PURE__ */ jsxs(Card, { ...props, children: [
+    children,
+    busyVariant === "circular" && internalBusy ? /* @__PURE__ */ jsx(BusyCircularProgress, { ...busyVariantProps }) : null,
+    busyVariant === "linear" && internalBusy ? /* @__PURE__ */ jsx(BusyLinearProgress, { ...busyVariantProps }) : null
+  ] });
+};
+
+// src/components/embed-card/card/EmbedCardHeader.tsx
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { Avatar, CardHeader, Chip } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+
+// src/contexts/EmbedPluginContext/Context.tsx
+import { createContextEx } from "@xyo-network/react-shared";
+var EmbedPluginContext = createContextEx();
+
+// src/contexts/EmbedPluginContext/use.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useEmbedPluginState = () => useContextEx(EmbedPluginContext, "EmbedPlugin", true);
+
+// src/contexts/ResolvePayloadContext/Context.ts
+import { createContextEx as createContextEx2 } from "@xyo-network/react-shared";
+var ResolvePayloadContext = createContextEx2();
+
+// src/contexts/ResolvePayloadContext/use.tsx
+import { useContextEx as useContextEx2 } from "@xyo-network/react-shared";
+var useResolvePayload = () => useContextEx2(ResolvePayloadContext, "ResolvePayload", true);
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { MoreVert as MoreVertIcon } from "@mui/icons-material";
+import { IconButton, Menu } from "@mui/material";
+import { useState } from "react";
+
+// src/components/embed-card/menu/JsonMenuItem.tsx
+import { OpenInNew as OpenInNewIcon } from "@mui/icons-material";
+import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var JsonMenuItem = (props) => {
+  const { huri } = useResolvePayload();
+  return /* @__PURE__ */ jsx2(Fragment, { children: huri ? /* @__PURE__ */ jsxs2(MenuItem, { title: "Source Payload JSON", onClick: () => window.open(huri, "_blank"), ...props, children: [
+    /* @__PURE__ */ jsx2(ListItemText, { sx: { mr: 1 }, children: "JSON" }),
+    /* @__PURE__ */ jsx2(ListItemIcon, { sx: { justifyContent: "end" }, children: /* @__PURE__ */ jsx2(OpenInNewIcon, { fontSize: "small" }) })
+  ] }) : null });
+};
+
+// src/components/embed-card/menu/EmbedMenu.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var EmbedMenu = (props) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(IconButton, { onClick: handleClick, ...props, children: /* @__PURE__ */ jsx3(MoreVertIcon, {}) }),
+    /* @__PURE__ */ jsx3(Menu, { anchorEl, open, onClose: handleClose, PaperProps: { variant: "elevation" }, MenuListProps: { dense: true }, children: /* @__PURE__ */ jsx3(JsonMenuItem, {}) })
+  ] });
+};
+
+// src/components/embed-card/card/EmbedCardHeader.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var EmbedCardHeader = () => {
+  const { refreshHuri, huri } = useResolvePayload();
+  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState();
+  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {};
+  const timestamp = Date.now();
+  return /* @__PURE__ */ jsx4(
+    CardHeader,
+    {
+      sx: { flexWrap: "wrap", rowGap: 1 },
+      avatar: hideAvatar ? /* @__PURE__ */ jsx4(Fragment3, {}) : /* @__PURE__ */ jsx4(Avatar, { sx: { bgcolor: (theme) => theme.palette.primary.main }, "aria-label": activePlugin?.name, children: activePlugin?.name?.charAt(0) }),
+      action: /* @__PURE__ */ jsxs4(FlexRow, { flexWrap: "wrap", columnGap: 0.5, children: [
+        timestamp ? hideTimestamp && hideRefreshButton ? "" : /* @__PURE__ */ jsx4(
+          Chip,
+          {
+            avatar: hideRefreshButton ? /* @__PURE__ */ jsx4(Fragment3, {}) : /* @__PURE__ */ jsx4(RefreshIcon, {}),
+            clickable: hideRefreshButton ? false : true,
+            onClick: refreshHuri,
+            label: hideTimestamp ? "" : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`
+          }
+        ) : null,
+        hideCardActions || huri === void 0 ? null : /* @__PURE__ */ jsx4(EmbedMenu, {})
+      ] }),
+      title: hideTitle ? "" : activePlugin?.name
+    }
+  );
+};
+
+// src/components/embed-card/card/EmbedPluginCard.tsx
+import { CardContent } from "@mui/material";
+import { FlexGrowRow } from "@xylabs/react-flexbox";
+import { useListMode as useListMode2 } from "@xyo-network/react-shared";
+
+// src/components/controls/EmbedFormControl.tsx
+import { FormControl, InputLabel } from "@mui/material";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var EmbedFormControl = ({ formId, formLabel, children, ...props }) => {
+  return /* @__PURE__ */ jsxs5(FormControl, { ...props, children: [
+    /* @__PURE__ */ jsx5(InputLabel, { id: formId, children: formLabel }),
+    children
+  ] });
+};
+
+// src/components/controls/ListModeSelect.tsx
+import { MenuItem as MenuItem2, Select } from "@mui/material";
+import { useListMode } from "@xyo-network/react-shared";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var listModeSelectId = "listmode-select-id";
+var listModeSelectLabel = "List Mode";
+var ListModeSelect = (props) => {
+  const { listMode, setListMode } = useListMode();
+  return /* @__PURE__ */ jsxs6(
+    Select,
+    {
+      value: listMode ?? "default",
+      onChange: (event) => {
+        setListMode?.(event.target.value);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(MenuItem2, { value: "default", children: "Default" }, "default"),
+        /* @__PURE__ */ jsx6(MenuItem2, { value: "table", children: "Table" }, "table"),
+        /* @__PURE__ */ jsx6(MenuItem2, { value: "grid", children: "Grid" }, "grid")
+      ]
+    }
+  );
+};
+var ListModeSelectFormControl = (props) => {
+  return /* @__PURE__ */ jsx6(EmbedFormControl, { formId: listModeSelectId, formLabel: listModeSelectLabel, children: /* @__PURE__ */ jsx6(ListModeSelect, { size: "small", label: listModeSelectLabel, labelId: listModeSelectId, ...props }) });
+};
+
+// src/components/controls/RenderSelect.tsx
+import { MenuItem as MenuItem3, Select as Select2 } from "@mui/material";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var renderSelectId = "render-select-id";
+var renderSelectLabel = "Renderer";
+var EmbedRenderSelect = (props) => {
+  const { activePlugin, setActivePlugin, plugins } = useEmbedPluginState();
+  return /* @__PURE__ */ jsx7(EmbedFormControl, { formId: renderSelectId, formLabel: renderSelectLabel, children: /* @__PURE__ */ jsx7(Select2, { size: "small", value: activePlugin?.name, ...props, children: plugins?.map((plugin) => /* @__PURE__ */ jsx7(MenuItem3, { value: plugin.name, onClick: () => setActivePlugin?.(plugin), children: plugin.name }, plugin.name)) }) });
+};
+
+// src/components/embed-card/card/EmbedPluginCard.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var EmbedPluginCard = ({ ...props }) => {
+  const { payload } = useResolvePayload();
+  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState();
+  const { listMode } = useListMode2();
+  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1;
+  return /* @__PURE__ */ jsxs7(BusyCard, { ...props, children: [
+    hideElementsConfig?.hideCardHeader ? null : /* @__PURE__ */ jsx8(EmbedCardHeader, {}),
+    plugins && plugins.length || supportsListMode ? /* @__PURE__ */ jsxs7(FlexGrowRow, { columnGap: 2, rowGap: 2, flexWrap: "wrap", pb: 1, children: [
+      plugins && plugins.length > 1 ? /* @__PURE__ */ jsx8(EmbedRenderSelect, {}) : null,
+      supportsListMode ? /* @__PURE__ */ jsx8(ListModeSelectFormControl, {}) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx8(CardContent, { sx: { height: "100%" }, children: ActivePlugin ? /* @__PURE__ */ jsx8(ActivePlugin.components.box.detailsBox, { payload, ...supportsListMode && { listMode } }) : null })
+  ] });
+};
+export {
+  BusyCard,
+  EmbedCardHeader,
+  EmbedPluginCard
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/embed-card/card/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/embed-card/card/index.ts"],"sourcesContent":["export * from './BusyCard'\nexport * from './EmbedCardHeader'\nexport * from './EmbedPluginCard'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../../../src/components/embed-card/card/BusyCard.tsx","../../../../../src/components/embed-card/card/EmbedCardHeader.tsx","../../../../../src/contexts/EmbedPluginContext/Context.tsx","../../../../../src/contexts/EmbedPluginContext/use.tsx","../../../../../src/contexts/ResolvePayloadContext/Context.ts","../../../../../src/contexts/ResolvePayloadContext/use.tsx","../../../../../src/components/embed-card/menu/EmbedMenu.tsx","../../../../../src/components/embed-card/menu/JsonMenuItem.tsx","../../../../../src/components/embed-card/card/EmbedPluginCard.tsx","../../../../../src/components/controls/EmbedFormControl.tsx","../../../../../src/components/controls/ListModeSelect.tsx","../../../../../src/components/controls/RenderSelect.tsx"],"sourcesContent":["import { Card, CardProps } from '@mui/material'\nimport { useBusyTiming } from '@xylabs/react-flexbox'\nimport {\n  BusyCircularProgress,\n  BusyCircularProgressProps,\n  BusyLinearProgress,\n  BusyLinearProgressProps,\n  BusyVariant,\n  WithChildren,\n} from '@xylabs/react-shared'\n\nexport interface BusyCardProps extends CardProps {\n  busy?: boolean\n  busyMinimum?: number\n  busyVariant?: BusyVariant\n  busyVariantProps?: BusyCircularProgressProps | BusyLinearProgressProps\n}\n\nexport const BusyCard: React.FC<WithChildren<BusyCardProps>> = ({\n  busy,\n  busyMinimum = 500,\n  busyVariant = 'circular',\n  busyVariantProps,\n  children,\n  ...props\n}) => {\n  const internalBusy = useBusyTiming(busy, busyMinimum)\n  return (\n    <Card {...props}>\n      {children}\n      {busyVariant === 'circular' && internalBusy ? <BusyCircularProgress {...(busyVariantProps as BusyCircularProgressProps)} /> : null}\n      {busyVariant === 'linear' && internalBusy ? <BusyLinearProgress {...(busyVariantProps as BusyLinearProgressProps)} /> : null}\n    </Card>\n  )\n}\n","import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedMenu } from '../menu'\n\nexport const EmbedCardHeader: React.FC<CardHeaderProps> = () => {\n  const { refreshHuri, huri } = useResolvePayload()\n  const { activePlugin, timestampLabel, hideElementsConfig } = useEmbedPluginState()\n  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}\n  //this is temporary so that we can add the ability to get a timestamp via diviner later\n  const timestamp = Date.now()\n  return (\n    <CardHeader\n      sx={{ flexWrap: 'wrap', rowGap: 1 }}\n      avatar={\n        hideAvatar ? (\n          <></>\n        ) : (\n          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>\n            {activePlugin?.name?.charAt(0)}\n          </Avatar>\n        )\n      }\n      action={\n        <FlexRow flexWrap=\"wrap\" columnGap={0.5}>\n          {timestamp ? (\n            hideTimestamp && hideRefreshButton ? (\n              ''\n            ) : (\n              <Chip\n                avatar={hideRefreshButton ? <></> : <RefreshIcon />}\n                clickable={hideRefreshButton ? false : true}\n                onClick={refreshHuri}\n                label={hideTimestamp ? '' : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`}\n              />\n            )\n          ) : null}\n          {/* Huri case is valid as long as the only menu item is JSON */}\n          {hideCardActions || huri === undefined ? null : <EmbedMenu />}\n        </FlexRow>\n      }\n      title={hideTitle ? '' : activePlugin?.name}\n    />\n  )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginState } from './State'\n\nexport const EmbedPluginContext = createContextEx<EmbedPluginState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { EmbedPluginContext } from './Context'\n\nexport const useEmbedPluginState = () => useContextEx(EmbedPluginContext, 'EmbedPlugin', true)\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadState } from './State'\n\nexport const ResolvePayloadContext = createContextEx<ResolvePayloadState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { ResolvePayloadContext } from './Context'\n\nexport const useResolvePayload = () => useContextEx(ResolvePayloadContext, 'ResolvePayload', true)\n","import { MoreVert as MoreVertIcon } from '@mui/icons-material'\nimport { IconButton, IconButtonProps, Menu } from '@mui/material'\nimport { useState } from 'react'\n\nimport { JsonMenuItem } from './JsonMenuItem'\n\nexport const EmbedMenu: React.FC<IconButtonProps> = (props) => {\n  // TODO - link to explore website\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <IconButton onClick={handleClick} {...props}>\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} PaperProps={{ variant: 'elevation' }} MenuListProps={{ dense: true }}>\n        <JsonMenuItem />\n      </Menu>\n    </>\n  )\n}\n","import { OpenInNew as OpenInNewIcon } from '@mui/icons-material'\nimport { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'\n\nimport { useResolvePayload } from '../../../contexts'\n\nexport const JsonMenuItem: React.FC<MenuItemProps> = (props) => {\n  const { huri } = useResolvePayload()\n\n  return (\n    <>\n      {huri ? (\n        <MenuItem title=\"Source Payload JSON\" onClick={() => window.open(huri, '_blank')} {...props}>\n          <ListItemText sx={{ mr: 1 }}>JSON</ListItemText>\n          <ListItemIcon sx={{ justifyContent: 'end' }}>\n            <OpenInNewIcon fontSize=\"small\" />\n          </ListItemIcon>\n        </MenuItem>\n      ) : null}\n    </>\n  )\n}\n","import { CardContent } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { useListMode } from '@xyo-network/react-shared'\n\nimport { useEmbedPluginState, useResolvePayload } from '../../../contexts'\nimport { EmbedRenderSelect, ListModeSelectFormControl } from '../../controls'\nimport { BusyCard, BusyCardProps } from './BusyCard'\nimport { EmbedCardHeader } from './EmbedCardHeader'\n\nexport const EmbedPluginCard: React.FC<BusyCardProps> = ({ ...props }) => {\n  const { payload } = useResolvePayload()\n  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useEmbedPluginState()\n  const { listMode } = useListMode()\n  const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1\n\n  return (\n    <BusyCard {...props}>\n      {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}\n      {/* Only show the row if the children are present */}\n      {(plugins && plugins.length) || supportsListMode ? (\n        <FlexGrowRow columnGap={2} rowGap={2} flexWrap=\"wrap\" pb={1}>\n          {plugins && plugins.length > 1 ? <EmbedRenderSelect /> : null}\n          {supportsListMode ? <ListModeSelectFormControl /> : null}\n        </FlexGrowRow>\n      ) : null}\n      <CardContent sx={{ height: '100%' }}>\n        {ActivePlugin ? <ActivePlugin.components.box.detailsBox payload={payload} {...(supportsListMode && { listMode })} /> : null}\n      </CardContent>\n    </BusyCard>\n  )\n}\n","import { FormControl, FormControlProps, InputLabel } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\ninterface EmbedFormControlProps extends FormControlProps {\n  formId?: string\n  formLabel?: string\n}\n\nexport const EmbedFormControl: React.FC<WithChildren<EmbedFormControlProps>> = ({ formId, formLabel, children, ...props }) => {\n  return (\n    <FormControl {...props}>\n      <InputLabel id={formId}>{formLabel}</InputLabel>\n      {children}\n    </FormControl>\n  )\n}\n","import { MenuItem, Select, SelectProps } from '@mui/material'\nimport { ListMode, useListMode } from '@xyo-network/react-shared'\n\nimport { EmbedFormControl } from './EmbedFormControl'\n\nconst listModeSelectId = 'listmode-select-id'\nconst listModeSelectLabel = 'List Mode'\n\nexport const ListModeSelect: React.FC<SelectProps<ListMode>> = (props) => {\n  const { listMode, setListMode } = useListMode()\n\n  return (\n    <Select<ListMode>\n      value={(listMode ?? 'default') as ListMode}\n      onChange={(event) => {\n        setListMode?.(event.target.value as ListMode)\n      }}\n      {...props}\n    >\n      <MenuItem key=\"default\" value=\"default\">\n        Default\n      </MenuItem>\n      <MenuItem key=\"table\" value=\"table\">\n        Table\n      </MenuItem>\n      <MenuItem key=\"grid\" value=\"grid\">\n        Grid\n      </MenuItem>\n    </Select>\n  )\n}\n\nexport const ListModeSelectFormControl: React.FC<SelectProps<ListMode>> = (props) => {\n  return (\n    <EmbedFormControl formId={listModeSelectId} formLabel={listModeSelectLabel}>\n      <ListModeSelect size=\"small\" label={listModeSelectLabel} labelId={listModeSelectId} {...props} />\n    </EmbedFormControl>\n  )\n}\n","import { MenuItem, Select, SelectProps } from '@mui/material'\n\nimport { useEmbedPluginState } from '../../contexts'\nimport { EmbedFormControl } from './EmbedFormControl'\n\nconst renderSelectId = 'render-select-id'\nconst renderSelectLabel = 'Renderer'\n\nexport const EmbedRenderSelect: React.FC<SelectProps> = (props) => {\n  const { activePlugin, setActivePlugin, plugins } = useEmbedPluginState()\n  return (\n    <EmbedFormControl formId={renderSelectId} formLabel={renderSelectLabel}>\n      <Select size=\"small\" value={activePlugin?.name} {...props}>\n        {plugins?.map((plugin) => (\n          <MenuItem value={plugin.name} key={plugin.name} onClick={() => setActivePlugin?.(plugin)}>\n            {plugin.name}\n          </MenuItem>\n        ))}\n      </Select>\n    </EmbedFormControl>\n  )\n}\n"],"mappings":"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","names":["createContextEx","useContextEx","useContextEx","jsx","jsxs","Fragment","jsx","jsxs","Fragment","jsx","jsxs","useListMode","jsx","jsxs","MenuItem","jsx","jsxs","MenuItem","MenuItem","Select","jsx","Select","MenuItem","jsx","jsxs","useListMode"]}

package/dist/browser/components/embed-card/error-handling/EmbedCardApiErrorRenderer.js

@@ -1,11 +1,31 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/embed-card/error-handling/EmbedCardApiErrorRenderer.tsx
 import { ErrorAlert, ErrorRender } from "@xyo-network/react-error";
-import { EmbedErrorCard } from "./EmbedErrorCard";
-const EmbedCardApiErrorRenderer = ({ xyoError, children, ...props }) => {
-  return /* @__PURE__ */ jsx(ErrorRender, { error: xyoError, noReAuth: true, noErrorDisplay: true, customError: /* @__PURE__ */ jsx(CustomApiErrorCard, { xyoError, ...props }), children });
+
+// src/components/embed-card/error-handling/EmbedErrorCard.tsx
+import { Alert, AlertTitle, Card, CardContent, Typography } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EmbedErrorCard = (props) => {
+  const { alertProps, error, hideErrorDetails = true, children, ...cardProps } = props;
+  const errorProps = { alertProps, error, hideErrorDetails };
+  return /* @__PURE__ */ jsx(Card, { ...cardProps, children: /* @__PURE__ */ jsx(CardContent, { children: children ?? /* @__PURE__ */ jsx(DefaultErrorAlert, { ...errorProps }) }) });
 };
-const CustomApiErrorCard = ({ xyoError, ...props }) => {
-  return /* @__PURE__ */ jsx(EmbedErrorCard, { ...props, children: /* @__PURE__ */ jsx(ErrorAlert, { error: xyoError }) });
+var DefaultErrorAlert = ({ alertProps, hideErrorDetails, error }) => {
+  return /* @__PURE__ */ jsxs(Alert, { severity: "error", ...alertProps, children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: "Whoops! Something went wrong" }),
+    !hideErrorDetails && error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Error: " }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: error?.message })
+    ] }) : /* @__PURE__ */ jsx(Typography, { variant: "caption", fontSize: "small", children: "Error Loading Plugin" })
+  ] });
+};
+
+// src/components/embed-card/error-handling/EmbedCardApiErrorRenderer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var EmbedCardApiErrorRenderer = ({ xyoError, children, ...props }) => {
+  return /* @__PURE__ */ jsx2(ErrorRender, { error: xyoError, noReAuth: true, noErrorDisplay: true, customError: /* @__PURE__ */ jsx2(CustomApiErrorCard, { xyoError, ...props }), children });
+};
+var CustomApiErrorCard = ({ xyoError, ...props }) => {
+  return /* @__PURE__ */ jsx2(EmbedErrorCard, { ...props, children: /* @__PURE__ */ jsx2(ErrorAlert, { error: xyoError }) });
 };
 export {
   EmbedCardApiErrorRenderer