@collabchron/notiq 0.2.0 → 1.0.0

package/dist/chunk-XLER2DHM.mjs

@@ -0,0 +1,357 @@
+import {
+  InlineImageNode
+} from "./chunk-WJRHXI2C.mjs";
+import {
+  FigmaNode,
+  LayoutContainerNode,
+  LayoutItemNode,
+  TweetNode,
+  YouTubeNode
+} from "./chunk-AMMKBSST.mjs";
+import {
+  DynamicBlockNode
+} from "./chunk-5BAKY5KN.mjs";
+import {
+  StepperNode
+} from "./chunk-6RNZQOH2.mjs";
+import {
+  CollapsibleContainerNode,
+  CollapsibleContentNode,
+  CollapsibleTitleNode
+} from "./chunk-GXYD4VZM.mjs";
+import {
+  ImageNode
+} from "./chunk-N3WN46VL.mjs";
+import {
+  PollNode
+} from "./chunk-GZPNVR7L.mjs";
+import {
+  Hint
+} from "./chunk-G53GLEAY.mjs";
+import {
+  ExcalidrawNode
+} from "./chunk-KJV3FAZ7.mjs";
+import {
+  EquationNode
+} from "./chunk-3JVFG7ER.mjs";
+import {
+  StoryBuilderNode
+} from "./chunk-4MEDW3T6.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  init_react_shim
+} from "./chunk-77KXU36M.mjs";
+
+// src/components/editor/plugins/LinkWithMetaData/index.tsx
+init_react_shim();
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  ElementNode
+} from "lexical";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { useEffect } from "react";
+async function fetchMetadata(url) {
+  var _a;
+  try {
+    const proxyUrl = "https://api.allorigins.win/get?url=";
+    const response = await fetch(`${proxyUrl}${encodeURIComponent(url)}`);
+    const data = await response.json();
+    const html = data.contents;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const getMetaTagContent = (property) => {
+      const element = doc.querySelector(`meta[property="${property}"]`) || doc.querySelector(`meta[name="${property}"]`);
+      return element ? element.getAttribute("content") : null;
+    };
+    const metadata = {
+      title: ((_a = doc.querySelector("title")) == null ? void 0 : _a.textContent) || getMetaTagContent("og:title") || "No title",
+      description: getMetaTagContent("og:description") || getMetaTagContent("description") || "No description",
+      image: getMetaTagContent("og:image") || void 0,
+      // Use a valid fallback image URL
+      website: getMetaTagContent("og:site_name") || new URL(url).hostname
+      // Use hostname as fallback
+    };
+    return metadata;
+  } catch (error) {
+    return {
+      title: "No title",
+      description: "No description",
+      image: void 0,
+      website: new URL(url).hostname
+    };
+  }
+}
+var LinkWithMetaDataNode = class _LinkWithMetaDataNode extends ElementNode {
+  constructor(url, editor, key) {
+    super(key);
+    this.__metadata = null;
+    this.__url = url;
+    this.__editor = editor;
+  }
+  static clone(node) {
+    return new _LinkWithMetaDataNode(node.__url, node.__editor, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createLinkNode(serializedNode.url, serializedNode.__editor);
+    node.__metadata = serializedNode.metadata;
+    node.__url = serializedNode.url;
+    return node;
+  }
+  exportJSON() {
+    return __spreadProps(__spreadValues({}, super.exportJSON()), {
+      url: this.__url,
+      metadata: this.__metadata,
+      type: "link-with-metadata",
+      version: 1
+    });
+  }
+  static getType() {
+    return "link-with-metadata";
+  }
+  // Method to update metadata
+  setMetadata(metadata) {
+    const writable = this.getWritable();
+    writable.__metadata = metadata;
+  }
+  createDOM() {
+    var _a, _b, _c;
+    const elementDIV = document.createElement("div");
+    elementDIV.className = "dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-50 border border-zinc-200 bg-white/90   text-zinc-950 shadow-md  w-full  cursor-pointer p-3 rounded-sm border flex flex-row items-center justify-between";
+    elementDIV.setAttribute("contenteditable", "false");
+    const container = document.createElement("div");
+    container.className = "flex flex-row w-full max-sm:flex-col max-sm:gap-y-2 justify-between items-start gap-x-2";
+    if ((_a = this.__metadata) == null ? void 0 : _a.image) {
+      const leftContainer = document.createElement("div");
+      leftContainer.className = "flex  w-full h-full max-w-[250px]  max-h-[100px] min-h-[100px] order-6";
+      const image = document.createElement("img");
+      image.src = this.__metadata.image;
+      image.alt = `image for ${this.__metadata.title}`;
+      image.className = "w-full h-[100px] rounded-lg object-cover";
+      leftContainer.appendChild(image);
+      container.appendChild(leftContainer);
+    }
+    const rightContainer = document.createElement("div");
+    rightContainer.className = "flex flex-col flex-1 w-full flex-wrap items-start space-y-4";
+    const titleLink = document.createElement("a");
+    titleLink.className = "font-bold break-words hover:underline";
+    titleLink.href = this.__url || "#";
+    titleLink.textContent = this.__url || "No URL provided";
+    titleLink.target = "_blank";
+    rightContainer.appendChild(titleLink);
+    const descriptionSmall = document.createElement("small");
+    descriptionSmall.className = "font-[400] dark:text-gray-200 text-gray-500";
+    descriptionSmall.textContent = ((_b = this.__metadata) == null ? void 0 : _b.description) || "Loading metadata...";
+    rightContainer.appendChild(descriptionSmall);
+    const sourceSmall = document.createElement("small");
+    sourceSmall.className = "text-sm mt-4 font-[400] dark:text-gray-300 text-gray-500/50";
+    sourceSmall.textContent = ((_c = this.__metadata) == null ? void 0 : _c.website) || "";
+    rightContainer.appendChild(sourceSmall);
+    container.appendChild(rightContainer);
+    elementDIV.appendChild(container);
+    if (this.__url && !this.__metadata) {
+      fetchMetadata(this.__url).then((metadata) => {
+        this.__editor.update(() => {
+          this.setMetadata(metadata);
+        });
+      }).catch((error) => {
+        console.error("Error fetching metadata:", error);
+      });
+    }
+    return elementDIV;
+  }
+  updateDOM(prevNode, dom) {
+    var _a, _b, _c, _d;
+    if (this.__metadata !== prevNode.__metadata) {
+      const container = dom.querySelector("div");
+      const image = dom.querySelector("img");
+      const titleLink = dom.querySelector("a");
+      const descriptionSmall = dom.querySelector("small:nth-of-type(1)");
+      const sourceSmall = dom.querySelector("small:nth-of-type(2)");
+      if (titleLink && descriptionSmall && sourceSmall) {
+        titleLink.href = this.__url || "#";
+        titleLink.textContent = ((_a = this.__metadata) == null ? void 0 : _a.title) || this.__url || "No URL provided";
+        descriptionSmall.textContent = ((_b = this.__metadata) == null ? void 0 : _b.description) || "Loading metadata...";
+        sourceSmall.textContent = ((_c = this.__metadata) == null ? void 0 : _c.website) || "";
+      }
+      if ((_d = this.__metadata) == null ? void 0 : _d.image) {
+        if (!image) {
+          const leftContainer = document.createElement("div");
+          leftContainer.className = "flex h-full flex-shrink-0 order-6";
+          const newImage = document.createElement("img");
+          newImage.src = this.__metadata.image;
+          newImage.alt = "Custom Image";
+          newImage.className = "w-24 min-h-24 max-[250px] h-[200px] rounded-lg object-fill";
+          leftContainer.appendChild(newImage);
+          container == null ? void 0 : container.insertBefore(leftContainer, container.firstChild);
+        } else {
+          image.src = this.__metadata.image;
+        }
+      } else if (image) {
+        image.remove();
+      }
+      return true;
+    }
+    return false;
+  }
+};
+function $createLinkNode(url, editor) {
+  return new LinkWithMetaDataNode(url, editor);
+}
+var TOGGLE_LINK_COMMAND_LinkWithMetaDataNode = createCommand("toggleLink");
+function LinkWithMetaDataPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([LinkWithMetaDataNode])) {
+      throw new Error("LinkWithMetaDataPlugin: LinkWithMetaDataNode not registered on editor");
+    }
+  }, [editor]);
+  editor.registerCommand(
+    TOGGLE_LINK_COMMAND_LinkWithMetaDataNode,
+    (url) => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const linkNode = $createLinkNode(url, editor);
+        $insertNodeToNearestRoot(linkNode);
+      }
+      return true;
+    },
+    COMMAND_PRIORITY_LOW
+  );
+  return null;
+}
+
+// src/components/editor/plugins/AutoLinkPlugin/index.tsx
+init_react_shim();
+import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
+import { useEffect as useEffect2 } from "react";
+import { $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2 } from "lexical";
+import { $isCodeHighlightNode } from "@lexical/code";
+var URL_REGEX = new RegExp("((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])");
+function LexicalAutoLinkPlugin() {
+  const [editor] = useLexicalComposerContext2();
+  useEffect2(() => {
+    const handlePaste = (event) => {
+      var _a;
+      const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
+      if (pastedText && URL_REGEX.test(pastedText)) {
+        event.preventDefault();
+        pastedText.split(" ").map((TEXT) => {
+          if (URL_REGEX.test(TEXT)) {
+            editor.update(() => {
+              const selection = $getSelection2();
+              if ($isRangeSelection2(selection)) {
+                const node = selection.anchor.getNode();
+                if (!$isCodeHighlightNode(node)) {
+                  if (node && node.getTextContent() === TEXT) {
+                    node.remove();
+                  }
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND_LinkWithMetaDataNode, TEXT);
+                }
+              }
+            });
+          }
+        });
+      }
+    };
+    const rootElement = editor.getRootElement();
+    if (rootElement) {
+      rootElement.addEventListener("paste", handlePaste);
+    }
+    return () => {
+      if (rootElement) {
+        rootElement.removeEventListener("paste", handlePaste);
+      }
+    };
+  }, [editor]);
+  return null;
+}
+
+// src/components/editor/plugins/CodeHighlightPlugin/index.ts
+init_react_shim();
+import { registerCodeHighlighting } from "@lexical/code";
+import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
+import { useEffect as useEffect3 } from "react";
+function CodeHighlightPlugin() {
+  const [editor] = useLexicalComposerContext3();
+  useEffect3(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+}
+
+// src/components/editor/nodes/index.ts
+init_react_shim();
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { MarkNode } from "@lexical/mark";
+import { OverflowNode } from "@lexical/overflow";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+var nodes = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  CodeHighlightNode,
+  StepperNode,
+  AutoLinkNode,
+  YouTubeNode,
+  Hint,
+  TweetNode,
+  LinkNode,
+  OverflowNode,
+  HorizontalRuleNode,
+  MarkNode,
+  ImageNode,
+  PollNode,
+  LayoutItemNode,
+  LayoutContainerNode,
+  CollapsibleContainerNode,
+  CollapsibleContentNode,
+  CollapsibleTitleNode,
+  LinkWithMetaDataNode,
+  InlineImageNode,
+  ExcalidrawNode,
+  FigmaNode,
+  EquationNode,
+  StoryBuilderNode,
+  DynamicBlockNode
+];
+var nestedNodes = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  LinkNode,
+  CodeHighlightNode,
+  QuoteNode,
+  CodeNode,
+  StepperNode,
+  LinkWithMetaDataNode,
+  ImageNode,
+  InlineImageNode,
+  ExcalidrawNode,
+  FigmaNode,
+  EquationNode,
+  StoryBuilderNode,
+  DynamicBlockNode
+];
+var nodes_default = nodes;
+
+export {
+  LinkWithMetaDataPlugin,
+  LexicalAutoLinkPlugin,
+  CodeHighlightPlugin,
+  nestedNodes,
+  nodes_default
+};

package/dist/chunk-XWC4TK2N.mjs

@@ -0,0 +1,315 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-WDG7J2DY.mjs";
+import {
+  Button
+} from "./chunk-BIU7WTLX.mjs";
+import {
+  init_react_shim
+} from "./chunk-77KXU36M.mjs";
+
+// src/components/ui/excalidraw/ExcalidrawModal.tsx
+init_react_shim();
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { isDOMNode } from "lexical";
+import * as React from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { Save, X, Trash2, AlertTriangle, Palette } from "lucide-react";
+var modalVariants = {
+  initial: {
+    opacity: 0,
+    scale: 0.95,
+    y: 20
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    y: 20,
+    transition: {
+      duration: 0.2
+    }
+  }
+};
+var backdropVariants = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.3 }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.2 }
+  }
+};
+var actionsVariants = {
+  initial: { opacity: 0, y: 10 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { delay: 0.2, duration: 0.3 }
+  }
+};
+function ExcalidrawModal({
+  closeOnClickOutside = false,
+  onSave,
+  initialElements,
+  initialAppState,
+  initialFiles,
+  isShown = false,
+  onDelete,
+  onClose
+}) {
+  const excaliDrawModelRef = useRef(null);
+  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+  const [discardModalOpen, setDiscardModalOpen] = useState(false);
+  const [elements, setElements] = useState(initialElements);
+  const [files, setFiles] = useState(initialFiles);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  useEffect(() => {
+    var _a;
+    (_a = excaliDrawModelRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    var _a;
+    let modalOverlayElement = null;
+    const clickOutsideHandler = (event) => {
+      const target = event.target;
+      if (excaliDrawModelRef.current !== null && isDOMNode(target) && !excaliDrawModelRef.current.contains(target) && closeOnClickOutside) {
+        if (hasUnsavedChanges) {
+          setDiscardModalOpen(true);
+        } else {
+          onDelete();
+        }
+      }
+    };
+    if (excaliDrawModelRef.current !== null) {
+      modalOverlayElement = (_a = excaliDrawModelRef.current) == null ? void 0 : _a.parentElement;
+      modalOverlayElement == null ? void 0 : modalOverlayElement.addEventListener("click", clickOutsideHandler);
+    }
+    return () => {
+      modalOverlayElement == null ? void 0 : modalOverlayElement.removeEventListener("click", clickOutsideHandler);
+    };
+  }, [closeOnClickOutside, onDelete, hasUnsavedChanges]);
+  useLayoutEffect(() => {
+    const currentModalRef = excaliDrawModelRef.current;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        if (hasUnsavedChanges) {
+          setDiscardModalOpen(true);
+        } else {
+          onDelete();
+        }
+      }
+      if (event.ctrlKey || event.metaKey) {
+        if (event.key === "s") {
+          event.preventDefault();
+          save();
+        }
+      }
+    };
+    currentModalRef == null ? void 0 : currentModalRef.addEventListener("keydown", onKeyDown);
+    return () => {
+      currentModalRef == null ? void 0 : currentModalRef.removeEventListener("keydown", onKeyDown);
+    };
+  }, [elements, files, onDelete, hasUnsavedChanges]);
+  const save = () => {
+    if (elements == null ? void 0 : elements.some((el) => !el.isDeleted)) {
+      const appState = excalidrawAPI == null ? void 0 : excalidrawAPI.getAppState();
+      const partialState = {
+        exportBackground: appState == null ? void 0 : appState.exportBackground,
+        exportScale: appState == null ? void 0 : appState.exportScale,
+        exportWithDarkMode: (appState == null ? void 0 : appState.theme) === "dark",
+        isBindingEnabled: appState == null ? void 0 : appState.isBindingEnabled,
+        isLoading: appState == null ? void 0 : appState.isLoading,
+        name: appState == null ? void 0 : appState.name,
+        theme: appState == null ? void 0 : appState.theme,
+        viewBackgroundColor: appState == null ? void 0 : appState.viewBackgroundColor,
+        viewModeEnabled: appState == null ? void 0 : appState.viewModeEnabled,
+        zenModeEnabled: appState == null ? void 0 : appState.zenModeEnabled,
+        zoom: appState == null ? void 0 : appState.zoom
+      };
+      onSave(elements, partialState, files);
+      setHasUnsavedChanges(false);
+    } else {
+      onDelete();
+    }
+  };
+  const discard = () => {
+    if (hasUnsavedChanges) {
+      setDiscardModalOpen(true);
+    } else {
+      onClose();
+    }
+  };
+  const handleConfirmDiscard = () => {
+    setDiscardModalOpen(false);
+    setHasUnsavedChanges(false);
+    onClose();
+  };
+  function DiscardConfirmationDialog() {
+    return /* @__PURE__ */ React.createElement(Dialog, { open: discardModalOpen, onOpenChange: setDiscardModalOpen }, /* @__PURE__ */ React.createElement(DialogContent, { className: "sm:max-w-md" }, /* @__PURE__ */ React.createElement(DialogHeader, { className: "text-center sm:text-center" }, /* @__PURE__ */ React.createElement("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-6 w-6 text-red-600 dark:text-red-400" })), /* @__PURE__ */ React.createElement(DialogTitle, { className: "text-lg font-semibold text-gray-900 dark:text-gray-100" }, "Discard Changes?"), /* @__PURE__ */ React.createElement(DialogDescription, { className: "text-sm text-gray-500 dark:text-gray-400" }, "You have unsaved changes in your drawing. Are you sure you want to discard them? This action cannot be undone.")), /* @__PURE__ */ React.createElement(DialogFooter, { className: "gap-3 pt-6" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "outline",
+        onClick: () => setDiscardModalOpen(false),
+        className: "flex-1 sm:flex-none"
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "destructive",
+        onClick: handleConfirmDiscard,
+        className: "flex-1 sm:flex-none"
+      },
+      /* @__PURE__ */ React.createElement(Trash2, { className: "mr-2 h-4 w-4" }),
+      "Discard"
+    ))));
+  }
+  if (isShown === false) {
+    return null;
+  }
+  const onChange = (els, _, fls) => {
+    setElements(els);
+    setFiles(fls);
+    const hasChanges = els && initialElements ? els.length !== initialElements.length || els.some((el, idx) => JSON.stringify(el) !== JSON.stringify(initialElements[idx])) : els !== initialElements;
+    setHasUnsavedChanges(hasChanges);
+  };
+  const hasContent = elements == null ? void 0 : elements.some((el) => !el.isDeleted);
+  return createPortal(
+    /* @__PURE__ */ React.createElement(AnimatePresence, { mode: "wait" }, /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[250] flex items-center justify-center",
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: backdropVariants
+      },
+      /* @__PURE__ */ React.createElement(
+        motion.div,
+        {
+          className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+          onClick: () => {
+            if (closeOnClickOutside) {
+              if (hasUnsavedChanges) {
+                setDiscardModalOpen(true);
+              } else {
+                onDelete();
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        motion.div,
+        {
+          className: "relative z-10 mx-4 flex h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900",
+          ref: excaliDrawModelRef,
+          tabIndex: -1,
+          variants: modalVariants,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "excalidraw-title",
+          "aria-describedby": "excalidraw-description"
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-800 dark:bg-gray-800/50" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/20" }, /* @__PURE__ */ React.createElement(Palette, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+          "h2",
+          {
+            id: "excalidraw-title",
+            className: "text-lg font-semibold text-gray-900 dark:text-gray-100"
+          },
+          "Drawing Editor"
+        ), /* @__PURE__ */ React.createElement(
+          "p",
+          {
+            id: "excalidraw-description",
+            className: "text-sm text-gray-500 dark:text-gray-400"
+          },
+          "Create and edit your drawings with Excalidraw",
+          hasUnsavedChanges && /* @__PURE__ */ React.createElement("span", { className: "ml-2 inline-flex items-center rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800 dark:bg-amber-900/20 dark:text-amber-400" }, "Unsaved changes")
+        ))), /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => {
+              if (hasUnsavedChanges) {
+                setDiscardModalOpen(true);
+              } else {
+                onDelete();
+              }
+            },
+            className: "h-8 w-8",
+            "aria-label": "Close drawing editor"
+          },
+          /* @__PURE__ */ React.createElement(X, { className: "h-4 w-4" })
+        )),
+        /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "h-full w-full" }, /* @__PURE__ */ React.createElement(
+          Excalidraw,
+          {
+            onChange,
+            excalidrawAPI: setExcalidrawAPI,
+            initialData: {
+              appState: initialAppState || { isLoading: false },
+              elements: initialElements,
+              files: initialFiles
+            },
+            theme: "light"
+          }
+        ))),
+        /* @__PURE__ */ React.createElement(
+          motion.div,
+          {
+            className: "flex items-center justify-between border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-800 dark:bg-gray-800/50",
+            variants: actionsVariants
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-1" }, /* @__PURE__ */ React.createElement("kbd", { className: "rounded bg-gray-200 px-2 py-1 text-xs font-mono dark:bg-gray-700" }, "Ctrl"), /* @__PURE__ */ React.createElement("span", null, "+"), /* @__PURE__ */ React.createElement("kbd", { className: "rounded bg-gray-200 px-2 py-1 text-xs font-mono dark:bg-gray-700" }, "S"), /* @__PURE__ */ React.createElement("span", { className: "ml-1" }, "to save")), /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 dark:text-gray-600" }, "\u2022"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-1" }, /* @__PURE__ */ React.createElement("kbd", { className: "rounded bg-gray-200 px-2 py-1 text-xs font-mono dark:bg-gray-700" }, "Esc"), /* @__PURE__ */ React.createElement("span", { className: "ml-1" }, "to close"))),
+          /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-3" }, /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              variant: "outline",
+              onClick: discard,
+              className: "min-w-[100px]"
+            },
+            /* @__PURE__ */ React.createElement(X, { className: "mr-2 h-4 w-4" }),
+            hasUnsavedChanges ? "Discard" : "Close"
+          ), /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              onClick: save,
+              disabled: !hasContent,
+              className: "min-w-[100px]"
+            },
+            /* @__PURE__ */ React.createElement(Save, { className: "mr-2 h-4 w-4" }),
+            "Save Drawing"
+          ))
+        )
+      ),
+      discardModalOpen && /* @__PURE__ */ React.createElement(DiscardConfirmationDialog, null)
+    )),
+    document.body
+  );
+}
+
+export {
+  ExcalidrawModal
+};

package/dist/chunk-YHPNOWFH.mjs

@@ -0,0 +1,15 @@
+import {
+  init_react_shim
+} from "./chunk-77KXU36M.mjs";
+
+// src/lib/utils.ts
+init_react_shim();
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};