@mbpockets/shared-ui 0.1.21 → 0.2.5

package/dist/TablePage/index.mjs

@@ -1,112 +1,156 @@
 "use client";
-import React, { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Typography, Card, CardContent, CardHeader, Grid as Grid$1, Box } from '@mui/material';
-import Image from 'next/image';
+import React3, { createContext, useState, useMemo, useContext, useRef, useEffect } from 'react';
+import { Box, Tooltip, Typography, Card, CardContent, CardHeader, Grid, Button } from '@mui/material';
+import TextField2 from '@mui/material/TextField';
+import CasinoIcon from '@mui/icons-material/Casino';
+import Grid2 from '@mui/material/Grid';
+import Autocomplete from '@mui/material/Autocomplete';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
 import Button2 from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import CardHeader2 from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Image from 'next/image';
 import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
+import EditIcon2 from '@mui/icons-material/Edit';
 import ListIcon from '@mui/icons-material/List';
 import SaveIcon from '@mui/icons-material/Save';
-import Autocomplete from '@mui/material/Autocomplete';
-import Card2 from '@mui/material/Card';
-import CardContent2 from '@mui/material/CardContent';
-import Popper from '@mui/material/Popper';
-import TextField from '@mui/material/TextField';
+import DialogTitle from '@mui/material/DialogTitle';
 
-// src/components/TablePage/GameTableProvider/GameTableContext.tsx
-var GameTableContext = React.createContext(void 0);
-function GameTableProvider(props) {
-  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
-}
-function useGameTableContext() {
-  const context = React.useContext(GameTableContext);
-  if (context) {
-    return context;
-  }
-  throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
-}
-var ModalContext = createContext({
-  showModal: (content) => {
-  },
-  hideModal: () => {
-  }
-});
-var useModal = () => useContext(ModalContext);
-var Modal = ({ onClose, children }) => {
-  const modalRef = useRef(null);
-  const previouslyFocusedElement = useRef(null);
-  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__ */ jsx(
-    "div",
-    {
-      className: "modal-overlay",
-      onKeyDown: handleKeyDown,
-      ref: modalRef,
-      role: "dialog",
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsxs("div", { className: "modal-container", children: [
-        /* @__PURE__ */ jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsx("button", { onClick: handleOnClose, children: "X" }) }),
-        /* @__PURE__ */ jsx("div", { className: "modal-content", children })
-      ] })
-    }
-  );
-};
-var Modal_default = Modal;
-var ModalProvider = ({ children }) => {
-  const [modalContent, setModalContent] = useState(null);
-  const showModal = (content) => setModalContent(content);
-  const hideModal = () => setModalContent(null);
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
-    children,
-    modalContent && /* @__PURE__ */ 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__ */ jsxs(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";
@@ -139,16 +183,196 @@ function Chip({ tag, removeCallback }) {
     tag.id
   ) });
 }
+function TagSelector({ initialTagIDs, allTags, onTagChange }) {
+  const [tagList, updateTagList] = useState(initialTagIDs);
+  const [inputValue, setInputValue] = 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 = useMemo(() => allTags.filter((tag) => tagList.includes(tag.id)), [allTags, tagList]);
+  const options = useMemo(
+    () => allTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [allTags]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        tag,
+        removeCallback: () => toggleTag(tag.id)
+      },
+      tag.id
+    )) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid2, { sx: { marginTop: 3, width: "100%", minWidth: "550px" }, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        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__ */ jsx(TextField2, { ...params, label: "Select Tags" })
+      },
+      tagList.join("-")
+    ) }) })
+  ] });
+}
+function EditTableDetailsForm({ initialTitle, initialSubtitle, onTitleChange, onSubtitleChange, allowEditingTitles, initialTagIDs, allTags, onTagChange }) {
+  const [title, setTitle] = useState(initialTitle);
+  const [subtitle, setSubtitle] = useState(initialSubtitle);
+  const handleTitleChange = (newTitle) => {
+    setTitle(newTitle);
+    onTitleChange(newTitle);
+  };
+  const handleSubtitleChange = (newSubtitle) => {
+    setSubtitle(newSubtitle);
+    onSubtitleChange(newSubtitle);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    allowEditingTitles && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxs(Box, { className: "inline-flex", children: [
+        /* @__PURE__ */ jsx(
+          TextField2,
+          {
+            sx: { minWidth: "400px" },
+            label: "Title",
+            onChange: (e) => handleTitleChange(e.target.value),
+            variant: "filled",
+            value: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsx(
+          CasinoIcon,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleTitleChange(getRandomTitle())
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { className: "inline-flex min-w-96", children: [
+        /* @__PURE__ */ jsx(
+          TextField2,
+          {
+            sx: { minWidth: "400px" },
+            label: "Short Description or Tagline",
+            onChange: (e) => handleSubtitleChange(e.target.value),
+            variant: "filled",
+            value: subtitle
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsx(
+          CasinoIcon,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleSubtitleChange(getRandomTagline())
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TagSelector, { initialTagIDs, allTags, onTagChange })
+  ] });
+}
+var GameTableContext = React3.createContext(void 0);
+function GameTableProvider(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+function useGameTableContext() {
+  const context = React3.useContext(GameTableContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
+}
+var ModalContext = createContext({
+  showModal: () => {
+  },
+  hideModal: () => {
+  }
+});
+var useModal = () => useContext(ModalContext);
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
-function renderTagsFromIds(ids, legalTags) {
+function renderTagsFromIds(ids, legalTags, options = {}) {
   if (!ids || !legalTags || legalTags.length === 0) {
     return /* @__PURE__ */ jsx(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__ */ jsxs(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;
+  useEffect(() => {
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [isInEditMode, textareaRef, value]);
+  return /* @__PURE__ */ 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,
@@ -160,14 +384,14 @@ var PlayerHighlightsCard = function(props) {
     removeFromTable
   } = props;
   return /* @__PURE__ */ jsx(Card, { elevation: 3, sx: { backgroundColor: canEdit ? "#fffbea" : "#f5f9fa", marginBottom: "6px" }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Image, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
-        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) })
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Image, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || DEFAULT_PROFILE_PIC, width: 64 }) }),
+        /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) })
       ] }),
-      /* @__PURE__ */ jsx(Grid, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsx(Grid2, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxs(Grid, { children: [
+    canEdit && /* @__PURE__ */ jsxs(Grid2, { children: [
       /* @__PURE__ */ jsx(Button2, { onClick: () => removeFromTable(player), children: isWaitList ? /* @__PURE__ */ jsx("p", { children: "Deny Player" }) : /* @__PURE__ */ jsx("p", { children: "Remove Player" }) }),
       canChangeDungeonMaster && /* @__PURE__ */ jsx(Button2, { onClick: () => {
         handleAssignToDungeonMaster(player);
@@ -179,11 +403,11 @@ var PlayerHighlightsCard = function(props) {
 var DMHighlightsCard = function({ canEdit, player, allTags }) {
   return /* @__PURE__ */ jsxs(Card, { elevation: 3, sx: { backgroundColor: "#f5f9fa", marginBottom: "6px" }, children: [
     /* @__PURE__ */ jsx(CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Game Master" }),
-    /* @__PURE__ */ jsx(CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Image, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
-        /* @__PURE__ */ jsx(Grid, { children: renderTagsFromIds(player.tags, allTags) }),
+    /* @__PURE__ */ jsx(CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Image, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl || DEFAULT_PROFILE_PIC, width: 256 }) }),
+        /* @__PURE__ */ jsx(Grid2, { children: renderTagsFromIds(player.tags, allTags) }),
         /* @__PURE__ */ jsx(Typography, { children: player.description })
       ] })
     ] }) })
@@ -212,12 +436,11 @@ function TableActionsBar(props) {
     if (waitlistPlayers.length === 0) {
       return /* @__PURE__ */ jsx("p", { children: "Waitlist is empty!" });
     }
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx(CardHeader2, { slotProps: { title: { variant: "h4" } }, title: "Waitlist Players: " }),
-      /* @__PURE__ */ jsx("ul", { className: "gap-8", children: waitlistPlayers.map((player) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("ul", { className: "gap-8 px-6", children: waitlistPlayers.map((player) => /* @__PURE__ */ 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: [
@@ -226,7 +449,7 @@ function TableActionsBar(props) {
               {
                 alt: player.username + "'s profile pic",
                 height: 64,
-                src: player.miniPic || "",
+                src: player.miniPic || DEFAULT_PROFILE_PIC,
                 width: 64
               }
             ),
@@ -235,26 +458,26 @@ function TableActionsBar(props) {
         },
         player.id
       )) }),
-      /* @__PURE__ */ jsx("button", { onClick: () => hideModal(), children: "close modal" })
+      /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button2, { onClick: () => hideModal(), children: "Close" }) })
     ] });
   };
-  return /* @__PURE__ */ jsxs(Grid$1, { container: true, direction: "column", spacing: 1, children: [
-    /* @__PURE__ */ jsx(Grid$1, { container: true, direction: "row", children: /* @__PURE__ */ jsxs(Typography, { color: "white", sx: { textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)" }, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { container: true, direction: "row", children: /* @__PURE__ */ jsxs(Typography, { color: "white", sx: { textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)" }, children: [
       "Players: ",
       numPlayers,
       " / ",
       slots
     ] }) }),
-    /* @__PURE__ */ jsxs(Grid$1, { container: true, direction: "row", children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
       !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsx(Button2, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
       !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsx(Button2, { onClick: () => onLeaveTable == null ? void 0 : onLeaveTable(), sx: buttonStyle, children: onWaitlist ? "Leave Waitlist" : "Leave Table" }),
       canEditTable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button2, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(EditIcon, {}), children: "Edit" }),
+        /* @__PURE__ */ jsx(Button2, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(EditIcon2, {}), children: "Edit" }),
         canViewWaitlist ? /* @__PURE__ */ jsx(
           Button2,
           {
             endIcon: /* @__PURE__ */ jsx(ListIcon, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false), "Waitlist Players:"),
             sx: buttonStyle,
             children: "View Waitlist"
           }
@@ -266,13 +489,25 @@ function TableActionsBar(props) {
           Button2,
           {
             endIcon: /* @__PURE__ */ jsx(ListIcon, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true), "Waitlist Players:"),
             sx: buttonStyle,
             children: "Edit Waitlist"
           }
         )
       ] }) : null,
-      isOwner && /* @__PURE__ */ jsx(Button2, { onClick: () => onDeleteTable == null ? void 0 : onDeleteTable(), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(DeleteIcon, {}), children: "Delete Table" })
+      isOwner && /* @__PURE__ */ jsx(
+        Button2,
+        {
+          onClick: () => showModal(
+            /* @__PURE__ */ jsx(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__ */ jsx(DeleteIcon, {}),
+          children: "Delete Table"
+        }
+      )
     ] })
   ] });
 }
@@ -282,135 +517,82 @@ var buttonStyle = {
   color: "white",
   borderRadius: "5px"
 };
-var AutoResizingTextarea = (props) => {
-  const { isInEditMode, onChange, textareaRef, value } = props;
-  useEffect(() => {
-    if (isInEditMode && textareaRef.current) {
-      const textarea = textareaRef.current;
-      textarea.style.height = "auto";
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    }
-  }, [isInEditMode, textareaRef, value]);
-  return /* @__PURE__ */ 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] = useState("");
-  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
-  const options = useMemo(
-    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
-    [possibleTags]
-  );
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card2, { children: [
-    /* @__PURE__ */ jsx(
-      CardHeader2,
-      {
-        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__ */ jsxs(CardContent2, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
-        Chip,
-        {
-          tag,
-          removeCallback: () => onToggleTag(tag.id)
-        },
-        tag.id
-      )) }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          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__ */ jsx(TextField, { ...params, label: "Select Tags" })
-        },
-        selectedIds.join("-")
-      ) }) })
-    ] })
-  ] }) }) });
-}
-var CustomPopper = (props) => {
-  return /* @__PURE__ */ jsx(
-    Popper,
-    {
-      ...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 { hideModal, showModal } = useModal();
+  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers, startWithEditTitle, eventTagId } = props;
+  const canEdit = tableStatus.isOwner;
   const textAreaRef = useRef(null);
   const [isTableInEditMode, setIsTableInEditMode] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState(table.title);
+  const [currentSubtitle, setCurrentSubtitle] = useState(table.shortDescription);
   const [currentDescription, setCurrentDescription] = useState(table.description);
   const [currentDungeonMaster, setCurrentDungeonMaster] = useState(dungeonMaster);
   const [currentPlayers, setCurrentPlayers] = useState(players);
-  const [currentShortDescription, setCurrentShortDescription] = useState(table.shortDescription);
-  const [currentTitle, setCurrentTitle] = useState(table.title);
   const [currentWaitlistPlayers, setCurrentWaitlistPlayers] = useState(waitlistPlayers);
   const [currentTagIds, setCurrentTagIds] = useState((_a = table.tags) != null ? _a : []);
+  const pendingEdits = 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"
+  );
+  const editTableDetails = () => {
+    if (!canEdit) {
+      return;
+    }
+    pendingEdits.current = {
+      title: currentTitle,
+      subtitle: currentSubtitle,
+      tags: currentTagIds
+    };
+    const editContent = /* @__PURE__ */ jsx(
+      EditTableDetailsForm,
+      {
+        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
+      }
+    );
+    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
+        });
+      }
+    });
+  };
   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 = useMemo(
+    if (startWithEditTitle) {
+      editTableDetails();
+    }
+  });
+  useMemo(
     () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
     [allTags, currentTagIds]
   );
@@ -430,37 +612,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__ */ jsx(
     Card,
     {
       sx: {
         backgroundColor: isTableInEditMode ? "lightsalmon" : "white",
-        borderRadius: "5%",
         p: 2,
         boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
       },
-      children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
+      children: /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxs(
-          Grid,
+          Grid2,
           {
             container: true,
             direction: "column",
@@ -473,39 +635,49 @@ function TablePageLayout(props) {
               textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)"
             },
             children: [
-              /* @__PURE__ */ jsx(Box, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
-                "input",
-                {
-                  onChange: (e) => setCurrentTitle(e.target.value),
-                  style: { backgroundColor: "#fffbea" },
-                  tabIndex: 0,
-                  type: "text",
-                  value: currentTitle
-                }
-              ) : /* @__PURE__ */ jsx(
-                CardHeader,
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+                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__ */ jsx(
+                      CardHeader,
+                      {
+                        title: currentTitle,
+                        sx: {
+                          p: 0,
+                          "& .MuiCardHeader-title": {
+                            color: "white",
+                            fontWeight: 700
+                          }
+                        }
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsx(EditIcon2, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s" } }) : ""
+                  ]
                 }
               ) }),
-              isTableInEditMode ? /* @__PURE__ */ jsx(
-                "input",
+              /* @__PURE__ */ jsxs(
+                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__ */ jsx(
+                      Typography,
+                      {
+                        sx: { color: "white", opacity: 0.95 },
+                        children: currentSubtitle
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsx(EditIcon2, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s", fontSize: "medium" } }) : ""
+                  ]
                 }
-              ) : /* @__PURE__ */ jsx(Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
-              /* @__PURE__ */ jsx(Grid, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              ),
+              /* @__PURE__ */ jsx(Grid2, { container: true, onClick: editTableDetails, className: `${canEdit ? "cursor-pointer" : ""}`, children: renderTags(currentTagIds, allTags, canEdit, table.eventTagId || eventTagId) }),
               /* @__PURE__ */ jsx(
                 TableActionsBar,
                 {
@@ -525,8 +697,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, sx: { mt: 2 }, children: [
-          /* @__PURE__ */ jsx(Grid, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsx(Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsx(Grid2, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsx(Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
             AutoResizingTextarea_default,
             {
               isInEditMode: isTableInEditMode,
@@ -535,7 +707,7 @@ function TablePageLayout(props) {
               value: currentDescription
             }
           ) : /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
-          /* @__PURE__ */ jsxs(Grid, { size: { xs: 12, md: 4 }, children: [
+          /* @__PURE__ */ jsxs(Grid2, { size: { xs: 12, md: 4 }, children: [
             /* @__PURE__ */ jsx(DMHighlightsCard, { canEdit: isTableInEditMode, player: currentDungeonMaster, allTags }),
             /* @__PURE__ */ jsxs(Card, { sx: { height: "100%" }, children: [
               /* @__PURE__ */ jsx(CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Players: " }),
@@ -558,31 +730,78 @@ function TablePageLayout(props) {
     }
   );
 }
-var renderTags = function(tags, allTags) {
+var renderTags = function(tags, allTags, canEdit, eventTagId) {
   if (!tags || !allTags) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Grid, { 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__ */ jsx(Fragment, {});
-  }) });
-};
-var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
-  return /* @__PURE__ */ jsx(Grid, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsx(
-    TagEditor,
-    {
-      title: "Table Tags",
-      possibleTags: allTags.filter((tag) => {
-        var _a;
-        return (_a = tag.appliesTo) == null ? void 0 : _a.tables;
-      }),
-      selectedTags,
-      onToggleTag
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, sx: { pb: 1.5 }, children: [
+    renderTagsFromIds(tags, allTags, { showEventTag: true, eventTagId }),
+    canEdit ? /* @__PURE__ */ jsx(
+      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] = useState(null);
+  const [displayModal, setDisplayModal] = useState(false);
+  const [title, setTitle] = useState("");
+  const [options, setOptions] = useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    /* @__PURE__ */ jsxs(Dialog, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DialogContent, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button2, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsx(Button2, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
 
-export { DMHighlightsCard, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameLabel_default as NextGameLabel, PlayerHighlightsCard, TableActionsBar, TablePageLayout_default as TablePageLayout, useGameTableContext, useModal };
+export { DMHighlightsCard, EditTableDetailsForm, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameLabel_default as NextGameLabel, PlayerHighlightsCard, TableActionsBar, TablePageLayout_default as TablePageLayout, TagSelector, useGameTableContext, useModal };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map