@mbpockets/shared-ui 0.1.18

package/dist/TablePage/index.cjs

@@ -0,0 +1,606 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Image = require('next/image');
+var Button2 = require('@mui/material/Button');
+var material = require('@mui/material');
+var Grid = require('@mui/material/Grid');
+var CardHeader2 = require('@mui/material/CardHeader');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var EditIcon = require('@mui/icons-material/Edit');
+var ListIcon = require('@mui/icons-material/List');
+var SaveIcon = require('@mui/icons-material/Save');
+var Autocomplete = require('@mui/material/Autocomplete');
+var Card2 = require('@mui/material/Card');
+var CardContent2 = require('@mui/material/CardContent');
+var Popper = require('@mui/material/Popper');
+var TextField = require('@mui/material/TextField');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Image__default = /*#__PURE__*/_interopDefault(Image);
+var Button2__default = /*#__PURE__*/_interopDefault(Button2);
+var Grid__default = /*#__PURE__*/_interopDefault(Grid);
+var CardHeader2__default = /*#__PURE__*/_interopDefault(CardHeader2);
+var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefault(EditIcon);
+var ListIcon__default = /*#__PURE__*/_interopDefault(ListIcon);
+var SaveIcon__default = /*#__PURE__*/_interopDefault(SaveIcon);
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var Card2__default = /*#__PURE__*/_interopDefault(Card2);
+var CardContent2__default = /*#__PURE__*/_interopDefault(CardContent2);
+var Popper__default = /*#__PURE__*/_interopDefault(Popper);
+var TextField__default = /*#__PURE__*/_interopDefault(TextField);
+
+// src/components/TablePage/GameTableProvider/GameTableContext.tsx
+var GameTableContext = React__default.default.createContext(void 0);
+function GameTableProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+}
+function useGameTableContext() {
+  const context = React__default.default.useContext(GameTableContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
+}
+var ModalContext = React.createContext({
+  showModal: (content) => {
+  },
+  hideModal: () => {
+  }
+});
+var useModal = () => React.useContext(ModalContext);
+var Modal = ({ onClose, children }) => {
+  const modalRef = React.useRef(null);
+  const previouslyFocusedElement = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+    if (children) {
+      previouslyFocusedElement.current = document.activeElement;
+      (_a = modalRef.current) == null ? void 0 : _a.focus();
+    }
+    return () => {
+      var _a2;
+      (_a2 = previouslyFocusedElement.current) == null ? void 0 : _a2.focus();
+    };
+  }, [children]);
+  const handleOnClose = () => {
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    if (e.key !== "Tab") return;
+    const focusableElements = (_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(
+      'button, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusableElements || focusableElements.length === 0) return;
+    const first = focusableElements[0];
+    const last = focusableElements[focusableElements.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "modal-overlay",
+      onKeyDown: handleKeyDown,
+      ref: modalRef,
+      role: "dialog",
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleOnClose, children: "X" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-content", children })
+      ] })
+    }
+  );
+};
+var Modal_default = Modal;
+var ModalProvider = ({ children }) => {
+  const [modalContent, setModalContent] = React.useState(null);
+  const showModal = (content) => setModalContent(content);
+  const hideModal = () => setModalContent(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    modalContent && /* @__PURE__ */ jsxRuntime.jsx(Modal_default, { onClose: hideModal, children: modalContent })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
+var PlayerHighlightsCard = function(props) {
+  const {
+    allTags,
+    canChangeDungeonMaster,
+    canEdit,
+    handleAssignToDungeonMaster,
+    isWaitList,
+    player,
+    removeFromTable
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { elevation: 3, sx: { backgroundColor: canEdit ? "#fffbea" : "#f5f9fa", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image__default.default, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: renderTagsFromIds(player.tags, allTags) })
+    ] }),
+    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => removeFromTable(player), children: isWaitList ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Deny Player" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Remove Player" }) }),
+      canChangeDungeonMaster && /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => {
+        handleAssignToDungeonMaster(player);
+        removeFromTable(player);
+      }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Assign to DungeonMaster" }) })
+    ] })
+  ] }) });
+};
+var DMHighlightsCard = function({ canEdit, player, allTags }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { elevation: 3, sx: { backgroundColor: "#f5f9fa", marginBottom: "6px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Game Master" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image__default.default, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: player.description })
+      ] })
+    ] }) })
+  ] });
+};
+function TableActionsBar(props) {
+  const { hideModal, showModal } = useModal();
+  const {
+    isInEditMode,
+    numPlayers,
+    onDeleteTable,
+    onEditModeChange,
+    onJoinWaitlist,
+    onLeaveTable,
+    onPromoteWaitlistPlayer,
+    onSave,
+    slots,
+    tableStatus,
+    waitlistPlayers
+  } = props;
+  const { isOwner, isPlayer, isDM, onWaitlist } = tableStatus;
+  const canEditTable = isOwner && !isInEditMode;
+  const canSaveTable = isOwner && isInEditMode;
+  const canViewWaitlist = isOwner || isDM || waitlistPlayers.length > 0;
+  const renderPlayerWaitlistModalContent = (canMovePlayersToTable) => {
+    if (waitlistPlayers.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Waitlist is empty!" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader2__default.default, { slotProps: { title: { variant: "h4" } }, title: "Waitlist Players: " }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-8", children: waitlistPlayers.map((player) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: `${canMovePlayersToTable ? "bg-amber-100 cursor-pointer" : "bg-gray-200"} mb-8 flex flex-row flex-start space-between justify-center items-center gap-3 p-2 rounded`,
+          onClick: () => canMovePlayersToTable ? onPromoteWaitlistPlayer == null ? void 0 : onPromoteWaitlistPlayer(player.id) : void 0,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Image__default.default,
+              {
+                alt: player.username + "'s profile pic",
+                height: 64,
+                src: player.miniPic || "",
+                width: 64
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: player.username })
+          ]
+        },
+        player.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => hideModal(), children: "close modal" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "column", spacing: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { container: true, direction: "row", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { color: "white", sx: { textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)" }, children: [
+      "Players: ",
+      numPlayers,
+      " / ",
+      slots
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "row", children: [
+      !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
+      !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onLeaveTable == null ? void 0 : onLeaveTable(), sx: buttonStyle, children: onWaitlist ? "Leave Waitlist" : "Leave Table" }),
+      canEditTable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default.default, {}), children: "Edit" }),
+        canViewWaitlist ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button2__default.default,
+          {
+            endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            sx: buttonStyle,
+            children: "View Waitlist"
+          }
+        ) : null
+      ] }) : canSaveTable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: onSave, sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(SaveIcon__default.default, {}), children: "Save" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onEditModeChange(false), sx: buttonStyle, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button2__default.default,
+          {
+            endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            sx: buttonStyle,
+            children: "Edit Waitlist"
+          }
+        )
+      ] }) : null,
+      isOwner && /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onDeleteTable == null ? void 0 : onDeleteTable(), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {}), children: "Delete Table" })
+    ] })
+  ] });
+}
+var buttonStyle = {
+  marginLeft: "3px",
+  backgroundColor: "blue",
+  color: "white",
+  borderRadius: "5px"
+};
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
+  React.useEffect(() => {
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [isInEditMode, textareaRef, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        backgroundColor: "#fffbea",
+        overflow: "hidden",
+        resize: "none",
+        width: "100%"
+      }
+    }
+  );
+};
+var AutoResizingTextarea_default = AutoResizingTextarea;
+function TagEditor({
+  title = "Tags",
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const [inputValue, setInputValue] = React.useState("");
+  const selectedIds = React.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const options = React.useMemo(
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [possibleTags]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card2__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CardHeader2__default.default,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent2__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+          style: {
+            background: tag.color || "#bfbcbb",
+            color: "white",
+            textShadow: "black 0.2em 0.2em 0.4em"
+          },
+          children: [
+            tag.label,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleTag(tag.id),
+                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        tag.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options,
+          filterOptions: (availableOptions, state) => availableOptions.filter(
+            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+          ).slice(0, 3),
+          value: null,
+          inputValue,
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValue(newInputValue);
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              onToggleTag(newValue.value);
+            }
+            setInputValue("");
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: "Select Tags" })
+        },
+        selectedIds.join("-")
+      ) }) })
+    ] })
+  ] }) }) });
+}
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: { boundary: "viewport" }
+        },
+        {
+          name: "offset",
+          options: { offset: [0, -10] }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+function TablePageLayout(props) {
+  var _a;
+  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers } = props;
+  const textAreaRef = React.useRef(null);
+  const [isTableInEditMode, setIsTableInEditMode] = React.useState(false);
+  const [currentDescription, setCurrentDescription] = React.useState(table.description);
+  const [currentDungeonMaster, setCurrentDungeonMaster] = React.useState(dungeonMaster);
+  const [currentPlayers, setCurrentPlayers] = React.useState(players);
+  const [currentShortDescription, setCurrentShortDescription] = React.useState(table.shortDescription);
+  const [currentTitle, setCurrentTitle] = React.useState(table.title);
+  const [currentWaitlistPlayers, setCurrentWaitlistPlayers] = React.useState(waitlistPlayers);
+  const [currentTagIds, setCurrentTagIds] = React.useState((_a = table.tags) != null ? _a : []);
+  React.useEffect(() => {
+    var _a2;
+    setCurrentDescription(table.description);
+    setCurrentDungeonMaster(dungeonMaster);
+    setCurrentPlayers(players);
+    setCurrentShortDescription(table.shortDescription);
+    setCurrentTitle(table.title);
+    setCurrentWaitlistPlayers(waitlistPlayers);
+    setCurrentTagIds((_a2 = table.tags) != null ? _a2 : []);
+  }, [dungeonMaster, players, table, waitlistPlayers]);
+  const currentTags = React.useMemo(
+    () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
+    [allTags, currentTagIds]
+  );
+  const handleAssignToDungeonMaster = (newDungeonMaster) => {
+    setCurrentDungeonMaster(newDungeonMaster);
+  };
+  const handleRemovePlayerFromTable = (playerToRemove) => {
+    setCurrentPlayers((prevState) => prevState.filter((player) => player.id !== playerToRemove.id));
+  };
+  const handlePromoteWaitlistPlayer = (playerIdToPromote) => {
+    setCurrentWaitlistPlayers((prevWaitlist) => {
+      const foundPlayer = prevWaitlist.find((player) => player.id === playerIdToPromote);
+      if (!foundPlayer) {
+        return prevWaitlist;
+      }
+      setCurrentPlayers((prevPlayers) => [...prevPlayers, foundPlayer]);
+      return prevWaitlist.filter((player) => player.id !== playerIdToPromote);
+    });
+  };
+  const handleToggleTag = (tagId) => {
+    setCurrentTagIds(
+      (prevState) => prevState.includes(tagId) ? prevState.filter((id) => id !== tagId) : [...prevState, tagId]
+    );
+  };
+  const handleSaveTable = () => {
+    const nextDraft = {
+      ...table,
+      description: currentDescription,
+      dungeonMaster: String(currentDungeonMaster.id),
+      players: currentPlayers.map((player) => player.id),
+      shortDescription: currentShortDescription,
+      tags: currentTagIds,
+      title: currentTitle,
+      waitlist: currentWaitlistPlayers.map((player) => player.id)
+    };
+    void (onSaveDraft == null ? void 0 : onSaveDraft(nextDraft));
+    setIsTableInEditMode(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Card,
+    {
+      sx: {
+        backgroundColor: isTableInEditMode ? "lightsalmon" : "white",
+        borderRadius: "5%",
+        p: 2,
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, direction: "column", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Grid__default.default,
+          {
+            container: true,
+            direction: "column",
+            spacing: 1,
+            sx: {
+              px: 2,
+              py: 1.5,
+              borderRadius: 2,
+              background: "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))",
+              textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  onChange: (e) => setCurrentTitle(e.target.value),
+                  style: { backgroundColor: "#fffbea" },
+                  tabIndex: 0,
+                  type: "text",
+                  value: currentTitle
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                material.CardHeader,
+                {
+                  title: currentTitle,
+                  sx: {
+                    p: 0,
+                    "& .MuiCardHeader-title": {
+                      color: "white",
+                      fontWeight: 700
+                    }
+                  }
+                }
+              ) }),
+              isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  onChange: (e) => setCurrentShortDescription(e.target.value),
+                  style: { backgroundColor: "#fffbea" },
+                  tabIndex: 0,
+                  type: "text",
+                  value: currentShortDescription
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TableActionsBar,
+                {
+                  isInEditMode: isTableInEditMode,
+                  numPlayers: currentPlayers.length,
+                  onDeleteTable,
+                  onEditModeChange: setIsTableInEditMode,
+                  onJoinWaitlist,
+                  onLeaveTable,
+                  onPromoteWaitlistPlayer: handlePromoteWaitlistPlayer,
+                  onSave: handleSaveTable,
+                  slots: table.capacity || 0,
+                  tableStatus,
+                  waitlistPlayers: currentWaitlistPlayers
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+            AutoResizingTextarea_default,
+            {
+              isInEditMode: isTableInEditMode,
+              onChange: setCurrentDescription,
+              textareaRef: textAreaRef,
+              value: currentDescription
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { size: { xs: 12, md: 4 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DMHighlightsCard, { canEdit: isTableInEditMode, player: currentDungeonMaster, allTags }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: { height: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Players: " }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: currentPlayers.map((player) => /* @__PURE__ */ jsxRuntime.jsx(
+                PlayerHighlightsCard,
+                {
+                  allTags,
+                  canChangeDungeonMaster: tableStatus.isOwner || tableStatus.isDM,
+                  canEdit: isTableInEditMode,
+                  handleAssignToDungeonMaster,
+                  player,
+                  removeFromTable: handleRemovePlayerFromTable
+                },
+                player.id
+              )) })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+var renderTags = function(tags, allTags) {
+  if (!tags || !allTags) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, spacing: 1, sx: { pb: 1.5 }, children: tags.map((tagId) => {
+    const tag = allTags.find((potentialTag) => tagId === potentialTag.id);
+    return tag ? generateTagsDisplay(tag) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }) });
+};
+var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TagEditor,
+    {
+      title: "Table Tags",
+      possibleTags: allTags.filter((tag) => {
+        var _a;
+        return (_a = tag.appliesTo) == null ? void 0 : _a.tables;
+      }),
+      selectedTags,
+      onToggleTag
+    }
+  ) });
+};
+var TablePageLayout_default = TablePageLayout;
+
+exports.DMHighlightsCard = DMHighlightsCard;
+exports.GameTableProvider = GameTableProvider;
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider_default;
+exports.PlayerHighlightsCard = PlayerHighlightsCard;
+exports.TableActionsBar = TableActionsBar;
+exports.TablePageLayout = TablePageLayout_default;
+exports.useGameTableContext = useGameTableContext;
+exports.useModal = useModal;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map