@mbpockets/shared-ui 0.2.0 → 0.2.6

package/dist/TablePage.cjs

@@ -1,131 +1,178 @@
 "use client";
 'use strict';
 
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+var React3 = require('react');
 var material = require('@mui/material');
-var Image = require('next/image');
+var TextField2 = require('@mui/material/TextField');
+var CasinoIcon = require('@mui/icons-material/Casino');
+var Grid2 = require('@mui/material/Grid');
+var Autocomplete = require('@mui/material/Autocomplete');
+var jsxRuntime = require('react/jsx-runtime');
+var Dialog = require('@mui/material/Dialog');
+var DialogContent = require('@mui/material/DialogContent');
+var DialogActions = require('@mui/material/DialogActions');
 var Button2 = require('@mui/material/Button');
-var Grid = require('@mui/material/Grid');
-var CardHeader2 = require('@mui/material/CardHeader');
+var IconButton = require('@mui/material/IconButton');
+var CloseIcon = require('@mui/icons-material/Close');
+var Image = require('next/image');
 var DeleteIcon = require('@mui/icons-material/Delete');
-var EditIcon = require('@mui/icons-material/Edit');
+var EditIcon2 = 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');
+var DialogTitle = require('@mui/material/DialogTitle');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var Image__default = /*#__PURE__*/_interopDefault(Image);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var TextField2__default = /*#__PURE__*/_interopDefault(TextField2);
+var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var Grid2__default = /*#__PURE__*/_interopDefault(Grid2);
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var Dialog__default = /*#__PURE__*/_interopDefault(Dialog);
+var DialogContent__default = /*#__PURE__*/_interopDefault(DialogContent);
+var DialogActions__default = /*#__PURE__*/_interopDefault(DialogActions);
 var Button2__default = /*#__PURE__*/_interopDefault(Button2);
-var Grid__default = /*#__PURE__*/_interopDefault(Grid);
-var CardHeader2__default = /*#__PURE__*/_interopDefault(CardHeader2);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var Image__default = /*#__PURE__*/_interopDefault(Image);
 var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
-var EditIcon__default = /*#__PURE__*/_interopDefault(EditIcon);
+var EditIcon2__default = /*#__PURE__*/_interopDefault(EditIcon2);
 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);
+var DialogTitle__default = /*#__PURE__*/_interopDefault(DialogTitle);
 
-// 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;
-var NextGameLabel = ({ nextGameTime }) => {
-  const date = typeof nextGameTime === "string" ? new Date(nextGameTime) : nextGameTime;
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
-    "Next Game: ",
-    date.toLocaleString()
-  ] });
+// src/components/TablePage/EditComponents/EditTableDetailsForm.tsx
+
+// src/components/shared/NameGenerator.ts
+var getRandomTitle = () => {
+  const randomPrefix = titlePrefixes[Math.random() * titlePrefixes.length | 0];
+  const randomMiddle = tileMiddle[Math.random() * tileMiddle.length | 0];
+  const randomSuffix = titleSuffixes[Math.random() * titleSuffixes.length | 0];
+  return `${randomPrefix} ${randomMiddle} ${randomSuffix}`;
 };
-var NextGameLabel_default = NextGameLabel;
+var getRandomTagline = () => taglines[Math.random() * taglines.length | 0];
+var titlePrefixes = [
+  "The Knights of The",
+  "The Fellowship of The",
+  "The Order of The",
+  "The Infamous",
+  "The Legendary",
+  "The Dubious",
+  "The Sworn Guardians of The",
+  "The Ancient Guild of The",
+  "The Unstoppable",
+  "The Misfit",
+  "The Chaotic",
+  "The Brave",
+  "The Forgotten",
+  "The Wandering",
+  "The Noble Council of The",
+  "The Dread Pirates of The",
+  "The Honorable Society of The",
+  "The Cursed",
+  "The Unlikely Heroes of The",
+  "The Elders of The",
+  "The Seekers of The",
+  "The Champions of The",
+  "The Heralds of The",
+  "The Disciples of The",
+  "The Ragtag Band of The",
+  "The Cult of The"
+];
+var tileMiddle = [
+  "Round",
+  "Kitchen",
+  "Deepest",
+  "Sorcery",
+  "Munchkin",
+  "Shenanigan",
+  "Secret",
+  "Dungeon",
+  "Fireside",
+  "Tabletop",
+  "Midnight",
+  "Tavern",
+  "Goblin",
+  "Dragon",
+  "Critical",
+  "Natural Twenty",
+  "Counterspell",
+  "Nat One",
+  "Cardboard",
+  "Dice Tower",
+  "Campaign",
+  "Lore",
+  "Awkward",
+  "Unhinged",
+  "Chaotic Neutral",
+  "Homebrew",
+  "Side Quest"
+];
+var titleSuffixes = [
+  "Table",
+  "Dungeon",
+  "Cave",
+  "Crew",
+  "Team",
+  "League",
+  "Horde",
+  "Party",
+  "Conclave",
+  "Collective",
+  "Alliance",
+  "Syndicate",
+  "Guild",
+  "Cabal",
+  "Council",
+  "Expedition",
+  "Enclave",
+  "Consortium",
+  "Troupe",
+  "Vanguard",
+  "Cohort",
+  "Brotherhood",
+  "Sisterhood",
+  "Pantheon",
+  "Assembly",
+  "Coven"
+];
+var taglines = [
+  "Everyone is welcome!",
+  "Looking for serious players.",
+  "Get in nerds, we're gaming!",
+  "If you aren't there, you're square.",
+  "It will be legendary!",
+  "Beginners welcome \u2014 we were all level 1 once.",
+  "No experience necessary. Snacks encouraged.",
+  "Roleplayers, board gamers, and chaos gremlins welcome.",
+  "We don't metagame. Much.",
+  "All alignments accepted. True Neutral gets the snacks.",
+  "Where every session is a one-shot... until it isn't.",
+  "Homebrew rules may apply.",
+  "Warning: may contain excessive lore.",
+  "Critical failures celebrated as much as critical hits.",
+  "No powergamers. Okay, maybe one powergamer.",
+  "We finish campaigns. (Eventually.)",
+  "Veteran players seeking worthy companions.",
+  "Casuals only \u2014 we're here for the vibes.",
+  "Serious about fun, not about rules.",
+  "Min-maxers need not apply.",
+  "For those who read the rulebook... and those who definitely didn't.",
+  "Roll for initiative. Arrive on time.",
+  "Side quests are the main quest here.",
+  "Chaotic good energy required.",
+  "If you bring snacks, you can name the first NPC.",
+  "We read the rulebook so you don't have to.",
+  "Wargamers only \u2014 no take-backs, no mercy.",
+  "Everyone welcome. Meeple provided.",
+  "We always play the longest game on the shelf.",
+  "Worker placement. Resource management. Existential dread.",
+  "No phones at the table! We're here for the game.",
+  "Someone always flips the table. Metaphorically. Usually.",
+  "We have a designated rules lawyer. It's fine.",
+  "Cooperative games only \u2014 we can't handle another Monopoly incident.",
+  "Teaching time is half the fun!"
+];
 function Chip({ tag, removeCallback }) {
   var _a;
   const color = (_a = tag.color) != null ? _a : "#bfbcbb";
@@ -158,16 +205,196 @@ function Chip({ tag, removeCallback }) {
     tag.id
   ) });
 }
+function TagSelector({ initialTagIDs, allTags, onTagChange }) {
+  const [tagList, updateTagList] = React3.useState(initialTagIDs);
+  const [inputValue, setInputValue] = React3.useState("");
+  const toggleTag = (id) => tagList.find((t) => t === id) ? removeTag(id) : addTag(id);
+  const addTag = (id) => {
+    const newList = [...tagList, id];
+    updateTagList(newList);
+    onTagChange(newList);
+  };
+  const removeTag = (id) => {
+    const newList = tagList.filter((t) => t !== id);
+    updateTagList(newList);
+    onTagChange(newList);
+  };
+  const selectedTags = React3.useMemo(() => allTags.filter((tag) => tagList.includes(tag.id)), [allTags, tagList]);
+  const options = React3.useMemo(
+    () => allTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [allTags]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+      Chip,
+      {
+        tag,
+        removeCallback: () => toggleTag(tag.id)
+      },
+      tag.id
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { sx: { marginTop: 3, width: "100%", minWidth: "550px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Autocomplete__default.default,
+      {
+        options,
+        filterOptions: (availableOptions, state) => availableOptions.filter(
+          (option) => !tagList.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+        ),
+        value: null,
+        inputValue,
+        onInputChange: (event, newInputValue) => {
+          if (event && event.type === "change") {
+            setInputValue(newInputValue);
+          }
+        },
+        onChange: (event, newValue) => {
+          if (newValue) {
+            toggleTag(newValue.value);
+          }
+          setInputValue("");
+        },
+        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField2__default.default, { ...params, label: "Select Tags" })
+      },
+      tagList.join("-")
+    ) }) })
+  ] });
+}
+function EditTableDetailsForm({ initialTitle, initialSubtitle, onTitleChange, onSubtitleChange, allowEditingTitles, initialTagIDs, allTags, onTagChange }) {
+  const [title, setTitle] = React3.useState(initialTitle);
+  const [subtitle, setSubtitle] = React3.useState(initialSubtitle);
+  const handleTitleChange = (newTitle) => {
+    setTitle(newTitle);
+    onTitleChange(newTitle);
+  };
+  const handleSubtitleChange = (newSubtitle) => {
+    setSubtitle(newSubtitle);
+    onSubtitleChange(newSubtitle);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    allowEditingTitles && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-col gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "inline-flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField2__default.default,
+          {
+            sx: { minWidth: "400px" },
+            label: "Title",
+            onChange: (e) => handleTitleChange(e.target.value),
+            variant: "filled",
+            value: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CasinoIcon__default.default,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleTitleChange(getRandomTitle())
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "inline-flex min-w-96", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField2__default.default,
+          {
+            sx: { minWidth: "400px" },
+            label: "Short Description or Tagline",
+            onChange: (e) => handleSubtitleChange(e.target.value),
+            variant: "filled",
+            value: subtitle
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CasinoIcon__default.default,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleSubtitleChange(getRandomTagline())
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TagSelector, { initialTagIDs, allTags, onTagChange })
+  ] });
+}
+var GameTableContext = React3__default.default.createContext(void 0);
+function GameTableProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+}
+function useGameTableContext() {
+  const context = React3__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 = React3.createContext({
+  showModal: () => {
+  },
+  hideModal: () => {
+  }
+});
+var useModal = () => React3.useContext(ModalContext);
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
-function renderTagsFromIds(ids, legalTags) {
+function renderTagsFromIds(ids, legalTags, options = {}) {
   if (!ids || !legalTags || legalTags.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
+  const { showEventTag = false, eventTagId } = options;
   const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
-  return validTags.map((tag) => generateTagsDisplay(tag));
+  const sortedTags = [...validTags].sort((a, b) => {
+    if (showEventTag && eventTagId !== void 0) {
+      if (a.id === eventTagId && b.id === eventTagId) return 0;
+      if (a.id === eventTagId) return -1;
+      if (b.id === eventTagId) return 1;
+    }
+    const priorityOrder = ["Organizer Run", "Display Only"];
+    const aIndex = priorityOrder.indexOf(a.label);
+    const bIndex = priorityOrder.indexOf(b.label);
+    if (aIndex !== -1 && bIndex !== -1) {
+      return aIndex - bIndex;
+    }
+    if (aIndex !== -1) return -1;
+    if (bIndex !== -1) return 1;
+    return 0;
+  });
+  return sortedTags.map((tag) => generateTagsDisplay(tag));
 }
+
+// src/data/values.tsx
+var DEFAULT_PROFILE_PIC = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MDY1OTM0MDY1OTM0MDE2IDEuNDA2NTkzNDA2NTkzNDAxNikgc2NhbGUoMi44MSAyLjgxKSI+Cgk8cGF0aCBkPSJNIDQ1IDg4IGMgLTExLjA0OSAwIC0yMS4xOCAtMi4wMDMgLTI5LjAyMSAtOC42MzQgQyA2LjIxMiA3MS4xMDUgMCA1OC43NjQgMCA0NSBDIDAgMjAuMTg3IDIwLjE4NyAwIDQ1IDAgYyAyNC44MTMgMCA0NSAyMC4xODcgNDUgNDUgYyAwIDEzLjc2NSAtNi4yMTIgMjYuMTA1IC0xNS45NzkgMzQuMzY2IEMgNjYuMTgxIDg1Ljk5OCA1Ni4wNDkgODggNDUgODggeiIgc3R5bGU9InN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBmaWxsOiByZ2IoMjE0LDIxNCwyMTQpOyBmaWxsLXJ1bGU6IG5vbnplcm87IG9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09IiBtYXRyaXgoMSAwIDAgMSAwIDApICIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cgk8cGF0aCBkPSJNIDQ1IDYwLjcxIGMgLTExLjQ3OSAwIC0yMC44MTggLTkuMzM5IC0yMC44MTggLTIwLjgxNyBjIDAgLTExLjQ3OSA5LjMzOSAtMjAuODE4IDIwLjgxOCAtMjAuODE4IGMgMTEuNDc5IDAgMjAuODE3IDkuMzM5IDIwLjgxNyAyMC44MTggQyA2NS44MTcgNTEuMzcxIDU2LjQ3OSA2MC43MSA0NSA2MC43MSB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KCTxwYXRoIGQ9Ik0gNDUgOTAgYyAtMTAuNjEzIDAgLTIwLjkyMiAtMy43NzMgLTI5LjAyOCAtMTAuNjI1IGMgLTAuNjQ4IC0wLjU0OCAtMC44OCAtMS40NDQgLTAuNTc5IC0yLjIzNyBDIDIwLjAzNCA2NC45MTkgMzEuOTMzIDU2LjcxIDQ1IDU2LjcxIHMgMjQuOTY2IDguMjA5IDI5LjYwNyAyMC40MjggYyAwLjMwMSAwLjc5MyAwLjA2OSAxLjY4OSAtMC41NzkgMi4yMzcgQyA2NS45MjIgODYuMjI3IDU1LjYxMyA5MCA0NSA5MCB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4=";
+var NextGameLabel = ({ nextGameTime }) => {
+  const date = typeof nextGameTime === "string" ? new Date(nextGameTime) : nextGameTime;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
+    "Next Game: ",
+    date.toLocaleString()
+  ] });
+};
+var NextGameLabel_default = NextGameLabel;
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
+  React3.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;
 var PlayerHighlightsCard = function(props) {
   const {
     allTags,
@@ -179,14 +406,14 @@ var PlayerHighlightsCard = function(props) {
     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.jsxs(Grid2__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image__default.default, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || DEFAULT_PROFILE_PIC, width: 64 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { children: [
+    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid2__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);
@@ -198,11 +425,11 @@ var PlayerHighlightsCard = function(props) {
 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.CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image__default.default, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl || DEFAULT_PROFILE_PIC, width: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid2__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: player.description })
       ] })
     ] }) })
@@ -231,12 +458,11 @@ function TableActionsBar(props) {
     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(
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-8 px-6", 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`,
+          className: `${canMovePlayersToTable ? "bg-amber-100 cursor-pointer" : "bg-gray-200"} mb-8 flex flex-row flex-start space-between items-center gap-3 p-2 rounded`,
           onClick: () => canMovePlayersToTable ? onPromoteWaitlistPlayer == null ? void 0 : onPromoteWaitlistPlayer(player.id) : void 0,
           tabIndex: 0,
           children: [
@@ -245,7 +471,7 @@ function TableActionsBar(props) {
               {
                 alt: player.username + "'s profile pic",
                 height: 64,
-                src: player.miniPic || "",
+                src: player.miniPic || DEFAULT_PROFILE_PIC,
                 width: 64
               }
             ),
@@ -254,7 +480,7 @@ function TableActionsBar(props) {
         },
         player.id
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => hideModal(), children: "close modal" })
+      /* @__PURE__ */ jsxRuntime.jsx(DialogActions__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => hideModal(), children: "Close" }) })
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "column", spacing: 1, children: [
@@ -268,12 +494,12 @@ function TableActionsBar(props) {
       !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" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(EditIcon2__default.default, {}), children: "Edit" }),
         canViewWaitlist ? /* @__PURE__ */ jsxRuntime.jsx(
           Button2__default.default,
           {
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false), "Waitlist Players:"),
             sx: buttonStyle,
             children: "View Waitlist"
           }
@@ -285,13 +511,25 @@ function TableActionsBar(props) {
           Button2__default.default,
           {
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true), "Waitlist Players:"),
             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" })
+      isOwner && /* @__PURE__ */ jsxRuntime.jsx(
+        Button2__default.default,
+        {
+          onClick: () => showModal(
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Are you sure you want to delete this table? This action cannot be undone." }),
+            "Delete Table",
+            { acceptText: "Delete", onAccept: () => onDeleteTable == null ? void 0 : onDeleteTable() }
+          ),
+          sx: buttonStyle,
+          endIcon: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {}),
+          children: "Delete Table"
+        }
+      )
     ] })
   ] });
 }
@@ -301,135 +539,82 @@ var buttonStyle = {
   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]
+function TablePageLayout(props) {
+  var _a;
+  const { hideModal, showModal } = useModal();
+  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers, startWithEditTitle, eventTagId } = props;
+  const canEdit = tableStatus.isOwner;
+  const textAreaRef = React3.useRef(null);
+  const [isTableInEditMode, setIsTableInEditMode] = React3.useState(false);
+  const [currentTitle, setCurrentTitle] = React3.useState(table.title);
+  const [currentSubtitle, setCurrentSubtitle] = React3.useState(table.shortDescription);
+  const [currentDescription, setCurrentDescription] = React3.useState(table.description);
+  const [currentDungeonMaster, setCurrentDungeonMaster] = React3.useState(dungeonMaster);
+  const [currentPlayers, setCurrentPlayers] = React3.useState(players);
+  const [currentWaitlistPlayers, setCurrentWaitlistPlayers] = React3.useState(waitlistPlayers);
+  const [currentTagIds, setCurrentTagIds] = React3.useState((_a = table.tags) != null ? _a : []);
+  const pendingEdits = React3.useRef({ title: currentTitle, subtitle: currentSubtitle, tags: currentTagIds });
+  const handleSaveTable = (tableData = {}) => {
+    const nextDraft = {
+      ...table,
+      description: currentDescription,
+      dungeonMaster: String(currentDungeonMaster.id),
+      players: currentPlayers.map((player) => player.id),
+      shortDescription: currentSubtitle,
+      tags: currentTagIds,
+      title: currentTitle,
+      waitlist: currentWaitlistPlayers.map((player) => player.id),
+      ...tableData
+    };
+    void (onSaveDraft == null ? void 0 : onSaveDraft(nextDraft));
+    setIsTableInEditMode(false);
+  };
+  const clean = (text) => text.replaceAll(
+    /\b(n[i1!]g+(er|a|e)s?|f[a@]g|f[a@]g+[o0]ts?|k[i1!]k[e3]s?|ch[i1!]nks?|w[e3]tb[a@]cks?|r[a@]gh[e3][a@]ds?|t[o0]w[e3]lh[e3][a@]ds?|r[e3]t[a@]rd(ed|s)?|c[o0][o0]ns?|tr[a@]nn(y|i[e3]s?)|g[o0][o0]ks?)\b/gi,
+    "dudes"
   );
-  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,
+  const editTableDetails = () => {
+    if (!canEdit) {
+      return;
+    }
+    pendingEdits.current = {
+      title: currentTitle,
+      subtitle: currentSubtitle,
+      tags: currentTagIds
+    };
+    const editContent = /* @__PURE__ */ jsxRuntime.jsx(
+      EditTableDetailsForm,
       {
-        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)"
-        }
+        initialTitle: currentTitle,
+        initialSubtitle: currentSubtitle,
+        onTitleChange: (t) => pendingEdits.current.title = t,
+        onSubtitleChange: (s) => pendingEdits.current.subtitle = s,
+        onTagChange: (t) => pendingEdits.current.tags = t,
+        initialTagIDs: currentTagIds,
+        allTags: allTags.filter((t) => t.appliesTo.tables),
+        allowEditingTitles: true
       }
-    ),
-    /* @__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.jsx(
-        Chip,
-        {
-          tag,
-          removeCallback: () => onToggleTag(tag.id)
-        },
-        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"
+    );
+    showModal(editContent, "Edit Table Details", {
+      acceptText: "Save",
+      onAccept: () => {
+        setCurrentTitle(clean(pendingEdits.current.title));
+        setCurrentSubtitle(clean(pendingEdits.current.subtitle));
+        setCurrentTagIds(pendingEdits.current.tags);
+        handleSaveTable({
+          title: clean(pendingEdits.current.title),
+          shortDescription: clean(pendingEdits.current.subtitle),
+          tags: pendingEdits.current.tags
+        });
+      }
+    });
+  };
+  React3.useEffect(() => {
+    if (startWithEditTitle) {
+      editTableDetails();
     }
-  );
-};
-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(
+  });
+  React3.useMemo(
     () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
     [allTags, currentTagIds]
   );
@@ -449,37 +634,17 @@ function TablePageLayout(props) {
       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: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          Grid__default.default,
+          Grid2__default.default,
           {
             container: true,
             direction: "column",
@@ -492,39 +657,49 @@ function TablePageLayout(props) {
               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,
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
                 {
-                  title: currentTitle,
-                  sx: {
-                    p: 0,
-                    "& .MuiCardHeader-title": {
-                      color: "white",
-                      fontWeight: 700
-                    }
-                  }
+                  className: `flex items-center gap-1 ${canEdit ? "cursor-pointer" : ""}`,
+                  sx: { "&:hover .edit-icon": { opacity: 1 } },
+                  onClick: editTableDetails,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.CardHeader,
+                      {
+                        title: currentTitle,
+                        sx: {
+                          p: 0,
+                          "& .MuiCardHeader-title": {
+                            color: "white",
+                            fontWeight: 700
+                          }
+                        }
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(EditIcon2__default.default, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s" } }) : ""
+                  ]
                 }
               ) }),
-              isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
                 {
-                  onChange: (e) => setCurrentShortDescription(e.target.value),
-                  style: { backgroundColor: "#fffbea" },
-                  tabIndex: 0,
-                  type: "text",
-                  value: currentShortDescription
+                  className: `flex items-center gap-1 ${canEdit ? "cursor-pointer" : ""}`,
+                  sx: { "&:hover .edit-icon": { opacity: 1 } },
+                  onClick: editTableDetails,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        sx: { color: "white", opacity: 0.95 },
+                        children: currentSubtitle
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(EditIcon2__default.default, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s", fontSize: "medium" } }) : ""
+                  ]
                 }
-              ) : /* @__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(Grid2__default.default, { container: true, onClick: editTableDetails, className: `${canEdit ? "cursor-pointer" : ""}`, children: renderTags(currentTagIds, allTags, canEdit, table.eventTagId || eventTagId) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 TableActionsBar,
                 {
@@ -544,8 +719,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__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(
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid2__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,
@@ -554,7 +729,7 @@ function TablePageLayout(props) {
               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.jsxs(Grid2__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: " }),
@@ -577,32 +752,80 @@ function TablePageLayout(props) {
     }
   );
 }
-var renderTags = function(tags, allTags) {
+var renderTags = function(tags, allTags, canEdit, eventTagId) {
   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
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Grid2__default.default, { container: true, spacing: 1, sx: { pb: 1.5 }, children: [
+    renderTagsFromIds(tags, allTags, { showEventTag: true, eventTagId }),
+    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(
+      material.Button,
+      {
+        variant: "text",
+        className: "inline-block text-sm px-3 py-1font-outlined m-0.5 font-stretch-105% font-sans",
+        sx: {
+          color: "white",
+          textShadow: "black 1.5px 1px 1.5px",
+          "&:hover": {
+            background: "#889"
+          }
+        },
+        children: "Edit Tags..."
+      }
+    ) : ""
+  ] });
 };
 var TablePageLayout_default = TablePageLayout;
+var ModalProvider = ({ children }) => {
+  var _a;
+  const [modalContent, setModalContent] = React3.useState(null);
+  const [displayModal, setDisplayModal] = React3.useState(false);
+  const [title, setTitle] = React3.useState("");
+  const [options, setOptions] = React3.useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog__default.default, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle__default.default, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton__default.default,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxRuntime.jsxs(DialogActions__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button2__default.default, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
 
 exports.DMHighlightsCard = DMHighlightsCard;
+exports.EditTableDetailsForm = EditTableDetailsForm;
 exports.GameTableProvider = GameTableProvider;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider_default;
@@ -610,6 +833,7 @@ exports.NextGameLabel = NextGameLabel_default;
 exports.PlayerHighlightsCard = PlayerHighlightsCard;
 exports.TableActionsBar = TableActionsBar;
 exports.TablePageLayout = TablePageLayout_default;
+exports.TagSelector = TagSelector;
 exports.useGameTableContext = useGameTableContext;
 exports.useModal = useModal;
 //# sourceMappingURL=TablePage.cjs.map