tetrons 2.2.0 → 2.2.2

package/dist/app/layout.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Metadata } from "next";
 import "./globals.css";
 export declare const metadata: Metadata;

package/dist/app/page.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
+import "../styles/tetrons.css";
 export default function Home(): import("react").JSX.Element;

package/dist/app/page.jsx

@@ -1,4 +1,5 @@
 import EditorContent from "../components/tetrons/EditorContent";
+import "../styles/tetrons.css";
 export default function Home() {
     return (<main className="flex flex-col h-screen overflow-hidden">
       <div className="flex-1 overflow-auto flex flex-col">

package/dist/components/tetrons/EditorContent.jsx

@@ -133,28 +133,26 @@ export default function EditorContent() {
             setCurrentVersionIndex(index);
         }
     };
-    return (<div className="flex flex-col h-full">
-      <div className="p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3">
-        <button onClick={saveVersion} disabled={!editor} className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">
+    return (<div className="editor-container">
+      <div className="editor-toolbar">
+        <button type="button" onClick={saveVersion} disabled={!editor} className="editor-save-btn">
           Save Version
         </button>
 
-        <div className="flex items-center gap-2 overflow-x-auto max-w-full">
-          {versions.length === 0 && (<span className="text-gray-500 text-sm">No saved versions</span>)}
-          {versions.map((_, idx) => (<button key={idx} onClick={() => restoreVersion(idx)} className={`px-2 py-1 rounded border ${idx === currentVersionIndex
-                ? "border-blue-600 font-semibold text-blue-600"
-                : "border-gray-300 text-gray-700 hover:border-gray-600"}`} title={`Restore Version ${idx + 1}`}>
+        <div className="editor-versions-wrapper">
+          {versions.length === 0 && (<span className="editor-no-versions">No saved versions</span>)}
+          {versions.map((_, idx) => (<button type="button" key={idx} onClick={() => restoreVersion(idx)} className={`editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`} title={`Restore Version ${idx + 1}`}>
               {`V${idx + 1}`}
             </button>))}
         </div>
       </div>
 
       {editor && <TetronsToolbar editor={editor}/>}
-      <div ref={wrapperRef} className="flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative" onClick={handleEditorClick}>
+      <div ref={wrapperRef} className="editor-content-wrapper" onClick={handleEditorClick}>
         {editor ? (<>
             <TiptapEditorContent editor={editor}/>
             {editor && <TableContextMenu editor={editor}/>}
-          </>) : (<div className="text-gray-500">Loading editor...</div>)}
+          </>) : (<div className="editor-loading">Loading editor...</div>)}
       </div>
     </div>);
 }

package/dist/components/tetrons/toolbar/ActionGroup.jsx

@@ -25,17 +25,19 @@ export default function ActionGroup({ editor }) {
     const zoomIn = () => {
         const element = document.querySelector(".ProseMirror");
         if (element) {
-            const currentZoom = parseFloat(element.style.zoom || "1");
+            const style = element.style;
+            const currentZoom = parseFloat(style.zoom || "1");
             const next = Math.min(currentZoom + 0.1, 2);
-            element.style.zoom = next.toString();
+            style.zoom = next.toString();
         }
     };
     const zoomOut = () => {
         const element = document.querySelector(".ProseMirror");
         if (element) {
-            const currentZoom = parseFloat(element.style.zoom || "1");
+            const style = element.style;
+            const currentZoom = parseFloat(style.zoom || "1");
             const next = Math.max(currentZoom - 0.1, 0.5);
-            element.style.zoom = next.toString();
+            style.zoom = next.toString();
         }
     };
     const handlePrint = () => {
@@ -128,35 +130,35 @@ export default function ActionGroup({ editor }) {
         link.click();
         document.body.removeChild(link);
     };
-    return (<div className="relative flex items-center gap-1" role="group" aria-label="Editor actions">
+    return (<div className="action-group" role="group" aria-label="Editor actions">
       <ToolbarButton icon={MdZoomIn} onClick={zoomIn} title="Zoom In"/>
       <ToolbarButton icon={MdZoomOut} onClick={zoomOut} title="Zoom Out"/>
       <ToolbarButton icon={MdPrint} onClick={handlePrint} title="Print"/>
       <ToolbarButton icon={MdSave} onClick={handleSave} title="Save"/>
 
       <div className="relative" ref={dropdownRef}>
-        <button type="button" onClick={() => setDropdownOpen((open) => !open)} aria-haspopup="menu" aria-expanded={dropdownOpen ? "true" : "false"} className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 focus:outline-none" title="Export">
+        <button type="button" onClick={() => setDropdownOpen((open) => !open)} aria-haspopup="menu" aria-expanded={dropdownOpen ? "true" : "false"} className="export-button" title="Export">
           <MdDownload />
           <span className="text-sm"></span>
         </button>
 
-        {dropdownOpen && (<div className="absolute z-10 mt-2 w-40 bg-white border rounded shadow-md">
+        {dropdownOpen && (<div className="export-dropdown">
             <button type="button" onClick={() => {
                 setDropdownOpen(false);
                 handleDownloadPDF();
-            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+            }}>
               Export as PDF
             </button>
             <button type="button" onClick={() => {
                 setDropdownOpen(false);
                 handleDownloadHTML();
-            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+            }}>
               Export as HTML
             </button>
             <button type="button" onClick={() => {
                 setDropdownOpen(false);
                 handleDownloadDOCX();
-            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+            }}>
               Export as DOCX
             </button>
           </div>)}

package/dist/components/tetrons/toolbar/ClipboardGroup.jsx

@@ -2,7 +2,7 @@ import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "rea
 import React from "react";
 import ToolbarButton from "./ToolbarButton";
 export default function ClipboardGroup({ editor }) {
-    return (<div className="flex gap-1 border-r pr-3">
+    return (<div className="clipboard-group">
       <ToolbarButton icon={MdContentPaste} title="Paste" onClick={async () => {
             try {
                 const text = await navigator.clipboard.readText();

package/dist/components/tetrons/toolbar/FileGroup.jsx

@@ -32,7 +32,7 @@ export default function FileGroup({ editor }) {
             e.target.value = "";
         }
     };
-    return (<div className="flex items-center gap-1 border-r pr-3" role="group" aria-label="File actions">
+    return (<div className="file-group" role="group" aria-label="File actions">
       <input type="file" accept=".json" ref={fileInputRef} onChange={handleFileChange} className="hidden" aria-label="Open JSON file"/>
       <ToolbarButton icon={VscNewFile} onClick={handleNew} title="New"/>
       <ToolbarButton icon={FaRegFolderOpen} onClick={handleOpen} title="Open File"/>

package/dist/components/tetrons/toolbar/FontStyleGroup.jsx

@@ -31,8 +31,8 @@ export default function FontStyleGroup({ editor }) {
             editor.off("transaction", updateStates);
         };
     }, [editor]);
-    return (<div className="flex gap-1 border-r pr-3 items-center">
-      <select title="Font Family" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontFamily} onChange={(e) => {
+    return (<div className="font-style-group">
+      <select title="Font Family" value={fontFamily} onChange={(e) => {
             const value = e.target.value;
             setFontFamily(value);
             editor.chain().focus().setFontFamily(value).run();
@@ -44,7 +44,7 @@ export default function FontStyleGroup({ editor }) {
         <option value="Verdana">Verdana</option>
       </select>
 
-      <select title="Font Size" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontSize} onChange={(e) => {
+      <select title="Font Size" value={fontSize} onChange={(e) => {
             const value = e.target.value;
             setFontSize(value);
             editor.chain().focus().setFontSize(value).run();
@@ -67,24 +67,24 @@ export default function FontStyleGroup({ editor }) {
       <ToolbarButton icon={MdSubscript} label="Subscript" onClick={() => editor.chain().focus().toggleSubscript().run()} isActive={editor.isActive("subscript")}/>
       <ToolbarButton icon={MdSuperscript} label="Superscript" onClick={() => editor.chain().focus().toggleSuperscript().run()} isActive={editor.isActive("superscript")}/>
 
-      <label title="Font Color" aria-label="Font Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": textColor }}>
-        <ImTextColor size={20} className="text-gray-700"/>
+      <label title="Font Color" aria-label="Font Color" className="color-label" style={{ "--indicator-color": textColor }}>
+        <ImTextColor size={20}/>
         <div className="color-indicator"/>
         <input type="color" value={textColor} onChange={(e) => {
             const color = e.target.value;
             setTextColor(color);
             editor.chain().focus().setColor(color).run();
-        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
+        }}/>
       </label>
 
-      <label title="Highlight Color" aria-label="Highlight Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": highlightColor }}>
-        <BiSolidColorFill size={20} className="text-gray-700"/>
+      <label title="Highlight Color" aria-label="Highlight Color" className="color-label" style={{ "--indicator-color": highlightColor }}>
+        <BiSolidColorFill size={20}/>
         <div className="color-indicator"/>
         <input type="color" value={highlightColor} onChange={(e) => {
             const color = e.target.value;
             setHighlightColor(color);
             editor.chain().focus().setHighlight({ color }).run();
-        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
+        }}/>
       </label>
 
       <ToolbarButton icon={MdFormatClear} label="Clear Formatting" onClick={() => editor.chain().focus().unsetAllMarks().run()}/>

package/dist/components/tetrons/toolbar/InsertGroup.jsx

@@ -95,19 +95,19 @@ export default function InsertGroup({ editor }) {
             return url;
         }
     }
-    return (<div className="flex gap-1 border-r pr-3 relative">
-      <input type="file" accept="image/*" ref={imageInputRef} className="hidden" onChange={handleImageUpload} aria-label="Upload Image" title="Upload Image"/>
-      <input type="file" accept="video/*" ref={videoInputRef} className="hidden" onChange={handleVideoUpload} aria-label="Upload Video" title="Upload Video"/>
+    return (<div className="insert-group">
+      <input type="file" accept="image/*" ref={imageInputRef} className="hidden-input" onChange={handleImageUpload} aria-label="Upload Image" title="Upload Image"/>
+      <input type="file" accept="video/*" ref={videoInputRef} className="hidden-input" onChange={handleVideoUpload} aria-label="Upload Video" title="Upload Video"/>
 
       <ToolbarButton icon={MdTableChart} label="Insert Table" onClick={() => setShowTableGrid(!showTableGrid)}/>
-      {showTableGrid && (<div className="absolute top-10 left-0 bg-white border rounded shadow p-2 z-20" onMouseLeave={() => setShowTableGrid(false)}>
-          <div className="grid grid-cols-10 gap-[1px]">
+      {showTableGrid && (<div className="table-grid-popup" onMouseLeave={() => setShowTableGrid(false)}>
+          <div className="table-grid">
             {[...Array(10)].map((_, row) => [...Array(10)].map((_, col) => {
                 const isSelected = row < selectedRows && col < selectedCols;
-                return (<div key={`${row}-${col}`} className={`w-5 h-5 border cursor-pointer ${isSelected ? "bg-blue-500" : "bg-gray-100"}`} onMouseEnter={() => handleTableCellHover(row + 1, col + 1)} onClick={() => handleTableInsert(row + 1, col + 1)}/>);
+                return (<div key={`${row}-${col}`} className={`table-grid-cell ${isSelected ? "selected" : ""}`} onMouseEnter={() => handleTableCellHover(row + 1, col + 1)} onClick={() => handleTableInsert(row + 1, col + 1)}/>);
             }))}
           </div>
-          <div className="text-sm mt-2 text-center text-gray-600">
+          <div className="table-grid-label">
             {selectedRows} x {selectedCols}
           </div>
         </div>)}
@@ -116,13 +116,14 @@ export default function InsertGroup({ editor }) {
       <ToolbarButton icon={MdVideoLibrary} label="Insert Video" onClick={() => { var _a; return (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }}/>
       <ToolbarButton icon={MdInsertLink} label="Insert Link" onClick={() => {
             const url = prompt("Enter URL");
-            if (url)
+            if (url) {
                 editor
                     .chain()
                     .focus()
                     .extendMarkRange("link")
                     .setLink({ href: url })
                     .run();
+            }
         }}/>
       <ToolbarButton icon={MdInsertComment} label="Insert Comment" onClick={() => {
             const comment = prompt("Enter your comment");
@@ -136,7 +137,7 @@ export default function InsertGroup({ editor }) {
         }}/>
       <div className="relative">
         <ToolbarButton icon={MdInsertEmoticon} label="Emoji" onClick={() => setShowPicker(!showPicker)}/>
-        {showPicker && (<div className="absolute z-50 top-10 left-0">
+        {showPicker && (<div className="emoji-picker">
             <Picker onEmojiSelect={addEmoji} theme="auto" emoji="point_up" showPreview={false} showSkinTones={true} emojiTooltip={true}/>
           </div>)}
       </div>

package/dist/components/tetrons/toolbar/ListAlignGroup.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { MdFormatListBulleted, MdFormatListNumbered, MdFormatIndentDecrease, MdFormatIndentIncrease, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatAlignJustify, } from "react-icons/md";
 import ToolbarButton from "./ToolbarButton";
 export default function ListAlignGroup({ editor }) {
-    return (<div className="flex gap-1 border-r pr-3">
+    return (<div className="list-align-group">
       <ToolbarButton icon={MdFormatListBulleted} title="Bulleted List" onClick={() => editor.chain().focus().toggleBulletList().run()} disabled={!editor.can().toggleBulletList()}/>
       <ToolbarButton icon={MdFormatListNumbered} title="Numbered List" onClick={() => editor.chain().focus().toggleOrderedList().run()} disabled={!editor.can().toggleOrderedList()}/>
       <ToolbarButton icon={MdFormatIndentIncrease} title="Increase Indent" onClick={() => editor.chain().focus().sinkListItem("listItem").run()} disabled={!editor.can().sinkListItem("listItem")}/>

package/dist/components/tetrons/toolbar/MiscGroup.jsx

@@ -21,7 +21,7 @@ export default function MiscGroup({ editor }) {
             previewWindow.document.close();
         }
     };
-    return (<div className="flex gap-1 items-center border-r pr-3">
+    return (<div className="misc-group">
       <ToolbarButton icon={MdUndo} label="Undo" onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}/>
       <ToolbarButton icon={MdRedo} label="Redo" onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}/>
       <ToolbarButton icon={MdRefresh} label="Reset Formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}/>

package/dist/components/tetrons/toolbar/TetronsToolbar.jsx

@@ -27,12 +27,10 @@ export default function TetronsToolbar({ editor }) {
             editor.off("update", handleUpdate);
         };
     }, [autoSave, editor]);
-    return (<div className="flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10">
-      <div className="flex items-center gap-2 border-r pr-3">
-        <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} className="w-4 h-4"/>
-        <label htmlFor="autoSave" className="text-sm select-none">
-          Auto Save
-        </label>
+    return (<div className="tetrons-toolbar">
+      <div className="group">
+        <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)}/>
+        <label htmlFor="autoSave">Auto Save</label>
       </div>
 
       <FileGroup editor={editor}/>

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as EditorContent } from "./components/tetrons/EditorContent";
+import "./styles/tetrons.css";
 import EditorContent from "./components/tetrons/EditorContent";
 export default EditorContent;

package/dist/index.js

@@ -1,3 +1,4 @@
 export { default as EditorContent } from "./components/tetrons/EditorContent";
+import "./styles/tetrons.css";
 import EditorContent from "./components/tetrons/EditorContent";
 export default EditorContent;

package/dist/index.mjs

@@ -14504,64 +14504,49 @@ function ActionGroup({ editor }) {
     link.click();
     document.body.removeChild(link);
   };
-  return /* @__PURE__ */ React2.createElement(
-    "div",
+  return /* @__PURE__ */ React2.createElement("div", { className: "action-group", role: "group", "aria-label": "Editor actions" }, /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }), /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: dropdownRef }, /* @__PURE__ */ React2.createElement(
+    "button",
     {
-      className: "relative flex items-center gap-1",
-      role: "group",
-      "aria-label": "Editor actions"
+      type: "button",
+      onClick: () => setDropdownOpen((open) => !open),
+      "aria-haspopup": "menu",
+      "aria-expanded": dropdownOpen ? "true" : "false",
+      className: "export-button",
+      title: "Export"
     },
-    /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }),
-    /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }),
-    /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdPrint, onClick: handlePrint, title: "Print" }),
-    /* @__PURE__ */ React2.createElement(ToolbarButton_default, { icon: MdSave, onClick: handleSave, title: "Save" }),
-    /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: dropdownRef }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setDropdownOpen((open) => !open),
-        "aria-haspopup": "menu",
-        "aria-expanded": dropdownOpen ? "true" : "false",
-        className: "flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 focus:outline-none",
-        title: "Export"
-      },
-      /* @__PURE__ */ React2.createElement(MdDownload, null),
-      /* @__PURE__ */ React2.createElement("span", { className: "text-sm" })
-    ), dropdownOpen && /* @__PURE__ */ React2.createElement("div", { className: "absolute z-10 mt-2 w-40 bg-white border rounded shadow-md" }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadPDF();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as PDF"
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadHTML();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as HTML"
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDropdownOpen(false);
-          handleDownloadDOCX();
-        },
-        className: "w-full text-left px-4 py-2 hover:bg-gray-100"
-      },
-      "Export as DOCX"
-    )))
-  );
+    /* @__PURE__ */ React2.createElement(MdDownload, null),
+    /* @__PURE__ */ React2.createElement("span", { className: "text-sm" })
+  ), dropdownOpen && /* @__PURE__ */ React2.createElement("div", { className: "export-dropdown" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadPDF();
+      }
+    },
+    "Export as PDF"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadHTML();
+      }
+    },
+    "Export as HTML"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDropdownOpen(false);
+        handleDownloadDOCX();
+      }
+    },
+    "Export as DOCX"
+  ))));
 }
 
 // src/components/tetrons/toolbar/ClipboardGroup.tsx
@@ -14573,7 +14558,7 @@ import {
 } from "react-icons/md";
 import React3 from "react";
 function ClipboardGroup({ editor }) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "flex gap-1 border-r pr-3" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: "clipboard-group" }, /* @__PURE__ */ React3.createElement(
     ToolbarButton_default,
     {
       icon: MdContentPaste,
@@ -14665,11 +14650,10 @@ function FontStyleGroup({ editor }) {
       editor.off("transaction", updateStates);
     };
   }, [editor]);
-  return /* @__PURE__ */ React4.createElement("div", { className: "flex gap-1 border-r pr-3 items-center" }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: "font-style-group" }, /* @__PURE__ */ React4.createElement(
     "select",
     {
       title: "Font Family",
-      className: "text-sm border rounded px-1 py-0.5 mr-2",
       value: fontFamily,
       onChange: (e) => {
         const value = e.target.value;
@@ -14686,7 +14670,6 @@ function FontStyleGroup({ editor }) {
     "select",
     {
       title: "Font Size",
-      className: "text-sm border rounded px-1 py-0.5 mr-2",
       value: fontSize,
       onChange: (e) => {
         const value = e.target.value;
@@ -14756,10 +14739,10 @@ function FontStyleGroup({ editor }) {
     {
       title: "Font Color",
       "aria-label": "Font Color",
-      className: "relative w-8 h-8 flex items-center justify-center cursor-pointer color-label",
+      className: "color-label",
       style: { "--indicator-color": textColor }
     },
-    /* @__PURE__ */ React4.createElement(ImTextColor, { size: 20, className: "text-gray-700" }),
+    /* @__PURE__ */ React4.createElement(ImTextColor, { size: 20 }),
     /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
     /* @__PURE__ */ React4.createElement(
       "input",
@@ -14770,8 +14753,7 @@ function FontStyleGroup({ editor }) {
           const color = e.target.value;
           setTextColor(color);
           editor.chain().focus().setColor(color).run();
-        },
-        className: "absolute inset-0 opacity-0 cursor-pointer"
+        }
       }
     )
   ), /* @__PURE__ */ React4.createElement(
@@ -14779,10 +14761,10 @@ function FontStyleGroup({ editor }) {
     {
       title: "Highlight Color",
       "aria-label": "Highlight Color",
-      className: "relative w-8 h-8 flex items-center justify-center cursor-pointer color-label",
+      className: "color-label",
       style: { "--indicator-color": highlightColor }
     },
-    /* @__PURE__ */ React4.createElement(BiSolidColorFill, { size: 20, className: "text-gray-700" }),
+    /* @__PURE__ */ React4.createElement(BiSolidColorFill, { size: 20 }),
     /* @__PURE__ */ React4.createElement("div", { className: "color-indicator" }),
     /* @__PURE__ */ React4.createElement(
       "input",
@@ -14793,8 +14775,7 @@ function FontStyleGroup({ editor }) {
           const color = e.target.value;
           setHighlightColor(color);
           editor.chain().focus().setHighlight({ color }).run();
-        },
-        className: "absolute inset-0 opacity-0 cursor-pointer"
+        }
       }
     )
   ), /* @__PURE__ */ React4.createElement(
@@ -14910,13 +14891,13 @@ function InsertGroup({ editor }) {
       return url;
     }
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: "flex gap-1 border-r pr-3 relative" }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: "insert-group" }, /* @__PURE__ */ React5.createElement(
     "input",
     {
       type: "file",
       accept: "image/*",
       ref: imageInputRef,
-      className: "hidden",
+      className: "hidden-input",
       onChange: handleImageUpload,
       "aria-label": "Upload Image",
       title: "Upload Image"
@@ -14927,7 +14908,7 @@ function InsertGroup({ editor }) {
       type: "file",
       accept: "video/*",
       ref: videoInputRef,
-      className: "hidden",
+      className: "hidden-input",
       onChange: handleVideoUpload,
       "aria-label": "Upload Video",
       title: "Upload Video"
@@ -14942,24 +14923,24 @@ function InsertGroup({ editor }) {
   ), showTableGrid && /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: "absolute top-10 left-0 bg-white border rounded shadow p-2 z-20",
+      className: "table-grid-popup",
       onMouseLeave: () => setShowTableGrid(false)
     },
-    /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-10 gap-[1px]" }, [...Array(10)].map(
+    /* @__PURE__ */ React5.createElement("div", { className: "table-grid" }, [...Array(10)].map(
       (_, row) => [...Array(10)].map((_2, col) => {
         const isSelected = row < selectedRows && col < selectedCols;
         return /* @__PURE__ */ React5.createElement(
           "div",
           {
             key: `${row}-${col}`,
-            className: `w-5 h-5 border cursor-pointer ${isSelected ? "bg-blue-500" : "bg-gray-100"}`,
+            className: `table-grid-cell ${isSelected ? "selected" : ""}`,
             onMouseEnter: () => handleTableCellHover(row + 1, col + 1),
             onClick: () => handleTableInsert(row + 1, col + 1)
           }
         );
       })
     )),
-    /* @__PURE__ */ React5.createElement("div", { className: "text-sm mt-2 text-center text-gray-600" }, selectedRows, " x ", selectedCols)
+    /* @__PURE__ */ React5.createElement("div", { className: "table-grid-label" }, selectedRows, " x ", selectedCols)
   ), /* @__PURE__ */ React5.createElement(
     ToolbarButton_default,
     {
@@ -14981,8 +14962,9 @@ function InsertGroup({ editor }) {
       label: "Insert Link",
       onClick: () => {
         const url = prompt("Enter URL");
-        if (url)
+        if (url) {
           editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+        }
       }
     }
   ), /* @__PURE__ */ React5.createElement(
@@ -15006,7 +14988,7 @@ function InsertGroup({ editor }) {
       label: "Emoji",
       onClick: () => setShowPicker(!showPicker)
     }
-  ), showPicker && /* @__PURE__ */ React5.createElement("div", { className: "absolute z-50 top-10 left-0" }, /* @__PURE__ */ React5.createElement(
+  ), showPicker && /* @__PURE__ */ React5.createElement("div", { className: "emoji-picker" }, /* @__PURE__ */ React5.createElement(
     Picker,
     {
       onEmojiSelect: addEmoji,
@@ -15059,7 +15041,7 @@ import {
   MdFormatAlignJustify
 } from "react-icons/md";
 function ListAlignGroup({ editor }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: "flex gap-1 border-r pr-3" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className: "list-align-group" }, /* @__PURE__ */ React6.createElement(
     ToolbarButton_default,
     {
       icon: MdFormatListBulleted,
@@ -15155,7 +15137,7 @@ function MiscGroup({ editor }) {
       previewWindow.document.close();
     }
   };
-  return /* @__PURE__ */ React7.createElement("div", { className: "flex gap-1 items-center border-r pr-3" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "misc-group" }, /* @__PURE__ */ React7.createElement(
     ToolbarButton_default,
     {
       icon: MdUndo,
@@ -15228,34 +15210,24 @@ function FileGroup({ editor }) {
       e.target.value = "";
     }
   };
-  return /* @__PURE__ */ React8.createElement(
-    "div",
+  return /* @__PURE__ */ React8.createElement("div", { className: "file-group", role: "group", "aria-label": "File actions" }, /* @__PURE__ */ React8.createElement(
+    "input",
     {
-      className: "flex items-center gap-1 border-r pr-3",
-      role: "group",
-      "aria-label": "File actions"
-    },
-    /* @__PURE__ */ React8.createElement(
-      "input",
-      {
-        type: "file",
-        accept: ".json",
-        ref: fileInputRef,
-        onChange: handleFileChange,
-        className: "hidden",
-        "aria-label": "Open JSON file"
-      }
-    ),
-    /* @__PURE__ */ React8.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }),
-    /* @__PURE__ */ React8.createElement(
-      ToolbarButton_default,
-      {
-        icon: FaRegFolderOpen,
-        onClick: handleOpen,
-        title: "Open File"
-      }
-    )
-  );
+      type: "file",
+      accept: ".json",
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      className: "hidden",
+      "aria-label": "Open JSON file"
+    }
+  ), /* @__PURE__ */ React8.createElement(ToolbarButton_default, { icon: VscNewFile, onClick: handleNew, title: "New" }), /* @__PURE__ */ React8.createElement(
+    ToolbarButton_default,
+    {
+      icon: FaRegFolderOpen,
+      onClick: handleOpen,
+      title: "Open File"
+    }
+  ));
 }
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
@@ -15277,16 +15249,15 @@ function TetronsToolbar({ editor }) {
       editor.off("update", handleUpdate);
     };
   }, [autoSave, editor]);
-  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-2 border-r pr-3" }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "tetrons-toolbar" }, /* @__PURE__ */ React9.createElement("div", { className: "group" }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "checkbox",
       id: "autoSave",
       checked: autoSave,
-      onChange: (e) => setAutoSave(e.target.checked),
-      className: "w-4 h-4"
+      onChange: (e) => setAutoSave(e.target.checked)
     }
-  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave", className: "text-sm select-none" }, "Auto Save")), /* @__PURE__ */ React9.createElement(FileGroup, { editor }), /* @__PURE__ */ React9.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React9.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React9.createElement(ListAlignGroup, { editor }), /* @__PURE__ */ React9.createElement(InsertGroup, { editor }), /* @__PURE__ */ React9.createElement(MiscGroup, { editor }), /* @__PURE__ */ React9.createElement(ActionGroup, { editor }));
+  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), /* @__PURE__ */ React9.createElement(FileGroup, { editor }), /* @__PURE__ */ React9.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React9.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React9.createElement(ListAlignGroup, { editor }), /* @__PURE__ */ React9.createElement(InsertGroup, { editor }), /* @__PURE__ */ React9.createElement(MiscGroup, { editor }), /* @__PURE__ */ React9.createElement(ActionGroup, { editor }));
 }
 
 // src/components/tetrons/ResizableImage.ts
@@ -17181,20 +17152,22 @@ function EditorContent() {
       setCurrentVersionIndex(index);
     }
   };
-  return /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React13.createElement("div", { className: "p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement("div", { className: "editor-container" }, /* @__PURE__ */ React13.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React13.createElement(
     "button",
     {
+      type: "button",
       onClick: saveVersion,
       disabled: !editor,
-      className: "px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+      className: "editor-save-btn"
     },
     "Save Version"
-  ), /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2 overflow-x-auto max-w-full" }, versions.length === 0 && /* @__PURE__ */ React13.createElement("span", { className: "text-gray-500 text-sm" }, "No saved versions"), versions.map((_, idx) => /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React13.createElement("div", { className: "editor-versions-wrapper" }, versions.length === 0 && /* @__PURE__ */ React13.createElement("span", { className: "editor-no-versions" }, "No saved versions"), versions.map((_, idx) => /* @__PURE__ */ React13.createElement(
     "button",
     {
+      type: "button",
       key: idx,
       onClick: () => restoreVersion(idx),
-      className: `px-2 py-1 rounded border ${idx === currentVersionIndex ? "border-blue-600 font-semibold text-blue-600" : "border-gray-300 text-gray-700 hover:border-gray-600"}`,
+      className: `editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`,
       title: `Restore Version ${idx + 1}`
     },
     `V${idx + 1}`
@@ -17202,10 +17175,10 @@ function EditorContent() {
     "div",
     {
       ref: wrapperRef,
-      className: "flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative",
+      className: "editor-content-wrapper",
       onClick: handleEditorClick
     },
-    editor ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(TiptapEditorContent, { editor }), editor && /* @__PURE__ */ React13.createElement(TableContextMenu, { editor })) : /* @__PURE__ */ React13.createElement("div", { className: "text-gray-500" }, "Loading editor...")
+    editor ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(TiptapEditorContent, { editor }), editor && /* @__PURE__ */ React13.createElement(TableContextMenu, { editor })) : /* @__PURE__ */ React13.createElement("div", { className: "editor-loading" }, "Loading editor...")
   ));
 }
 

package/dist/styles/tetrons.css

@@ -0,0 +1,329 @@
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor-toolbar {
+  padding: 0.5rem;
+  border-bottom: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.editor-save-btn {
+  padding: 0.25rem 0.75rem;
+  background-color: #2563eb;
+  color: white;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+.editor-save-btn:hover {
+  background-color: #1d4ed8;
+}
+
+.editor-save-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.editor-version-btn {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #d1d5db;
+  color: #374151;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+  background: none;
+}
+
+.editor-version-btn:hover {
+  border-color: #4b5563;
+}
+
+.editor-version-btn.active {
+  border-color: #2563eb;
+  color: #2563eb;
+  font-weight: 600;
+}
+
+.editor-content-wrapper {
+  flex-grow: 1;
+  padding: 1.5rem;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  overflow: auto;
+  position: relative;
+  min-height: 0;
+}
+
+.editor-loading {
+  color: #6b7280;
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.editor-content-wrapper .ProseMirror {
+  outline: none;
+  min-height: 300px;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.editor-content-wrapper .ProseMirror[data-placeholder]:empty::before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.ProseMirror pre {
+  background: #f3f4f6;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+.editor-versions-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.editor-no-versions {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.tetrons-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 10;
+}
+
+.tetrons-toolbar .group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.tetrons-toolbar input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tetrons-toolbar label {
+  font-size: 0.875rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.misc-group {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.list-align-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  align-items: center;
+}
+
+.insert-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  position: relative;
+  align-items: center;
+}
+
+.table-grid-popup {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  z-index: 20;
+}
+
+.table-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 1px;
+}
+
+.table-grid-cell {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1px solid #d1d5db;
+  background-color: #f3f4f6;
+  cursor: pointer;
+}
+
+.table-grid-cell.selected {
+  background-color: #3b82f6;
+}
+
+.table-grid-label {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: #6b7280;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.emoji-picker {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  z-index: 50;
+}
+
+.font-style-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  align-items: center;
+}
+
+.font-style-group select {
+  font-size: 0.875rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+}
+
+.color-label {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.color-indicator {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 4px;
+  background-color: var(--indicator-color, #000000);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.color-label input[type="color"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.file-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.file-group input[type="file"] {
+  display: none;
+}
+
+.clipboard-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.action-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.export-button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+}
+
+.export-button:hover {
+  background-color: #f3f4f6;
+}
+
+.export-button:focus {
+  outline: none;
+}
+
+.export-dropdown {
+  position: absolute;
+  z-index: 10;
+  margin-top: 0.5rem;
+  width: 10rem;
+  background-color: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.export-dropdown button {
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.export-dropdown button:hover {
+  background-color: #f3f4f6;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tetrons",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -68,7 +68,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/styles/tetrons.css"
   ],
   "bugs": {
     "url": "https://github.com/your-repo/tetrons/issues"