tetrons 2.2.2 → 2.2.4

package/dist/app/api/register/route.d.ts

@@ -0,0 +1,6 @@
+import { NextRequest, NextResponse } from "next/server";
+export declare function POST(req: NextRequest): Promise<NextResponse<{
+    error: string;
+}> | NextResponse<{
+    apiKey: string;
+}>>;

package/dist/app/api/register/route.js

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { connectDB } from "../../../lib/db";
+import { ApiKey } from "../../../models/ApiKey";
+import { generateApiKey } from "../../../utils/apiKeyUtils";
+export async function POST(req) {
+    const { email, organization, version } = await req.json();
+    if (!email || !organization || !version)
+        return NextResponse.json({ error: "Missing fields" }, { status: 400 });
+    await connectDB();
+    if (version === "free") {
+        const expiresAt = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+        const apiKey = generateApiKey(48);
+        await ApiKey.deleteMany({ email, version });
+        await ApiKey.create({
+            email,
+            organization,
+            version,
+            apiKey,
+            expiresAt,
+        });
+        return NextResponse.json({ apiKey, expiresAt });
+    }
+    const apiKey = generateApiKey(48);
+    await ApiKey.create({ email, organization, version, apiKey });
+    return NextResponse.json({ apiKey });
+}

package/dist/app/api/validate/route.d.ts

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from "next/server";
+export declare function POST(req: NextRequest): Promise<NextResponse<{
+    error: string;
+}> | NextResponse<{
+    valid: boolean;
+    version: any;
+}>>;

package/dist/app/api/validate/route.js

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { connectDB } from "../../../lib/db";
+import { ApiKey } from "../../../models/ApiKey";
+export async function POST(req) {
+    const { apiKey } = await req.json();
+    if (!apiKey)
+        return NextResponse.json({ error: "API key required" }, { status: 400 });
+    await connectDB();
+    const keyEntry = await ApiKey.findOne({ apiKey });
+    if (!keyEntry)
+        return NextResponse.json({ error: "Invalid key" }, { status: 401 });
+    if (keyEntry.version === "free" &&
+        keyEntry.expiresAt &&
+        new Date() > new Date(keyEntry.expiresAt)) {
+        return NextResponse.json({ error: "Free trial expired" }, { status: 403 });
+    }
+    return NextResponse.json({ valid: true, version: keyEntry.version });
+}

package/dist/app/page.jsx

@@ -1,9 +1,55 @@
+"use client";
+import { useEffect, useState } from "react";
 import EditorContent from "../components/tetrons/EditorContent";
 import "../styles/tetrons.css";
 export default function Home() {
+    const [apiKey, setApiKey] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const fetchApiKey = async () => {
+            try {
+                const cachedKey = localStorage.getItem("my-api-key");
+                if (cachedKey) {
+                    setApiKey(cachedKey);
+                    setLoading(false);
+                    return;
+                }
+                const res = await fetch("/api/register", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        email: "mr.swastikjha@gmail.com",
+                        organization: "FCSPL",
+                        version: "free",
+                    }),
+                });
+                const data = await res.json();
+                if (!res.ok || !data.apiKey) {
+                    throw new Error(data.error || "Failed to fetch API key");
+                }
+                localStorage.setItem("my-api-key", data.apiKey);
+                setApiKey(data.apiKey);
+            }
+            catch (error) {
+                console.error("Error fetching API key:", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchApiKey();
+    }, []);
+    if (loading) {
+        return <div className="text-center p-4">⏳ Loading Editor...</div>;
+    }
+    if (!apiKey) {
+        return (<div className="text-center text-red-600">❌ Failed to load API key</div>);
+    }
     return (<main className="flex flex-col h-screen overflow-hidden">
       <div className="flex-1 overflow-auto flex flex-col">
-        <EditorContent />
+        <EditorContent apiKey={apiKey}/>
       </div>
     </main>);
 }

package/dist/components/tetrons/EditorContent.d.ts

@@ -1,2 +1,6 @@
 import React from "react";
-export default function EditorContent(): React.JSX.Element;
+type EditorContentProps = {
+    apiKey: string;
+};
+export default function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
+export {};

package/dist/components/tetrons/EditorContent.jsx

@@ -45,9 +45,38 @@ import ts from "highlight.js/lib/languages/typescript";
 const lowlight = createLowlight();
 lowlight.register("js", js);
 lowlight.register("ts", ts);
-export default function EditorContent() {
+export default function EditorContent({ apiKey }) {
+    const [isValid, setIsValid] = React.useState(null);
+    const [error, setError] = React.useState(null);
     const [versions, setVersions] = React.useState([]);
     const [currentVersionIndex, setCurrentVersionIndex] = React.useState(null);
+    useEffect(() => {
+        const validateKey = async () => {
+            try {
+                const res = await fetch("/api/validate", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ apiKey }),
+                });
+                const data = await res.json();
+                if (!res.ok)
+                    throw new Error(data.error || "Invalid API Key");
+                setIsValid(true);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setError(err.message || "Invalid API Key");
+                }
+                else {
+                    setError("Invalid API Key");
+                }
+                setIsValid(false);
+            }
+        };
+        validateKey();
+    }, [apiKey]);
     const editor = useEditor({
         extensions: [
             Document,
@@ -133,6 +162,12 @@ export default function EditorContent() {
             setCurrentVersionIndex(index);
         }
     };
+    if (isValid === false) {
+        return <div className="editor-error">⚠️ {error}</div>;
+    }
+    if (isValid === null) {
+        return <div className="editor-loading">🔍 Validating license...</div>;
+    }
     return (<div className="editor-container">
       <div className="editor-toolbar">
         <button type="button" onClick={saveVersion} disabled={!editor} className="editor-save-btn">

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

@@ -1,6 +1,6 @@
 import React from "react";
 const ToolbarButton = React.forwardRef(({ icon: Icon, onClick, disabled = false, title, label, isActive = false }, ref) => {
-    return (<button type="button" ref={ref} onClick={onClick} disabled={disabled} title={title !== null && title !== void 0 ? title : label} aria-label={title !== null && title !== void 0 ? title : label} className={`p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${isActive ? "bg-gray-300" : ""}`}>
+    return (<button type="button" ref={ref} onClick={onClick} disabled={disabled} title={title !== null && title !== void 0 ? title : label} aria-label={title !== null && title !== void 0 ? title : label} className={`toolbar-button ${isActive ? "active" : ""}`}>
         <Icon size={20}/>
       </button>);
 });

package/dist/index.d.mts

@@ -1,5 +1,8 @@
 import React from 'react';
 
-declare function EditorContent(): React.JSX.Element;
+type EditorContentProps = {
+    apiKey: string;
+};
+declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
 
 export { EditorContent, EditorContent as default };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 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,4 +1,4 @@
 export { default as EditorContent } from "./components/tetrons/EditorContent";
-import "./styles/tetrons.css";
+// import "./styles/tetrons.css";
 import EditorContent from "./components/tetrons/EditorContent";
 export default EditorContent;

package/dist/index.mjs

@@ -14370,7 +14370,7 @@ var ToolbarButton = React.forwardRef(
         disabled,
         title: title ?? label,
         "aria-label": title ?? label,
-        className: `p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${isActive ? "bg-gray-300" : ""}`
+        className: `toolbar-button ${isActive ? "active" : ""}`
       },
       /* @__PURE__ */ React.createElement(Icon, { size: 20 })
     );
@@ -14403,9 +14403,10 @@ function ActionGroup({ editor }) {
       ".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 = () => {
@@ -14413,9 +14414,10 @@ function ActionGroup({ editor }) {
       ".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 = () => {
@@ -17066,9 +17068,35 @@ function typescript(hljs) {
 var lowlight = createLowlight();
 lowlight.register("js", javascript);
 lowlight.register("ts", typescript);
-function EditorContent() {
+function EditorContent({ apiKey }) {
+  const [isValid, setIsValid] = React13.useState(null);
+  const [error, setError] = React13.useState(null);
   const [versions, setVersions] = React13.useState([]);
   const [currentVersionIndex, setCurrentVersionIndex] = React13.useState(null);
+  useEffect7(() => {
+    const validateKey = async () => {
+      try {
+        const res = await fetch("/api/validate", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ apiKey })
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Invalid API Key");
+        setIsValid(true);
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message || "Invalid API Key");
+        } else {
+          setError("Invalid API Key");
+        }
+        setIsValid(false);
+      }
+    };
+    validateKey();
+  }, [apiKey]);
   const editor = useEditor({
     extensions: [
       Document,
@@ -17152,6 +17180,12 @@ function EditorContent() {
       setCurrentVersionIndex(index);
     }
   };
+  if (isValid === false) {
+    return /* @__PURE__ */ React13.createElement("div", { className: "editor-error" }, "\u26A0\uFE0F ", error);
+  }
+  if (isValid === null) {
+    return /* @__PURE__ */ React13.createElement("div", { className: "editor-loading" }, "\u{1F50D} Validating license...");
+  }
   return /* @__PURE__ */ React13.createElement("div", { className: "editor-container" }, /* @__PURE__ */ React13.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React13.createElement(
     "button",
     {

package/dist/lib/db.d.ts

@@ -0,0 +1 @@
+export function connectDB(): Promise<void>;

package/dist/lib/db.js

@@ -0,0 +1,15 @@
+import mongoose from "mongoose";
+const MONGO_URL = process.env.MONGO_URL;
+export const connectDB = async () => {
+    if (mongoose.connection.readyState >= 1) {
+        return;
+    }
+    try {
+        await mongoose.connect(MONGO_URL);
+        console.log("Connected to MongoDB 👍");
+    }
+    catch (error) {
+        console.error("MongoDB connection failed ❌", error);
+        process.exit(1);
+    }
+};

package/dist/models/ApiKey.d.ts

@@ -0,0 +1,2 @@
+import mongoose from "mongoose";
+export declare const ApiKey: mongoose.Model<any, {}, {}, {}, any, any>;

package/dist/models/ApiKey.js

@@ -0,0 +1,14 @@
+import mongoose from "mongoose";
+const ApiKeySchema = new mongoose.Schema({
+    email: { type: String, required: true },
+    organization: { type: String, required: true },
+    version: {
+        type: String,
+        enum: ["free", "pro", "premium", "platinum"],
+        required: true,
+    },
+    apiKey: { type: String, required: true, unique: true },
+    createdAt: { type: Date, default: Date.now },
+    expiresAt: { type: Date },
+});
+export const ApiKey = mongoose.models.ApiKey || mongoose.model("ApiKey", ApiKeySchema);

package/dist/styles/styles/tetrons.css

@@ -0,0 +1,371 @@
+.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;
+}
+
+.toolbar-button {
+  padding: 0.5rem;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.toolbar-button:hover {
+  background-color: #e5e7eb;
+}
+
+.toolbar-button.active {
+  background-color: #d1d5db;
+}
+
+.toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tableWrapper table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableWrapper th,
+.tableWrapper td {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+  text-align: left;
+}

package/dist/styles/tetrons.css

@@ -327,3 +327,45 @@
 .export-dropdown button:hover {
   background-color: #f3f4f6;
 }
+
+.toolbar-button {
+  padding: 0.5rem;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.toolbar-button:hover {
+  background-color: #e5e7eb;
+}
+
+.toolbar-button.active {
+  background-color: #d1d5db;
+}
+
+.toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tableWrapper table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableWrapper th,
+.tableWrapper td {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+  text-align: left;
+}

package/dist/utils/apiKeyUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates a secure random API key
+ * @param length Length of the key (default 48 characters)
+ * @returns Hex string API key
+ */
+export declare function generateApiKey(length?: number): string;
+/**
+ * Generates a unique key with optional prefix (e.g., for versioning or branding)
+ * @param prefix Optional prefix like 'PRO-', 'PREMIUM-', etc.
+ */
+export declare function generateVersionedKey(prefix?: string): string;

package/dist/utils/apiKeyUtils.js

@@ -0,0 +1,17 @@
+import crypto from "crypto";
+/**
+ * Generates a secure random API key
+ * @param length Length of the key (default 48 characters)
+ * @returns Hex string API key
+ */
+export function generateApiKey(length = 48) {
+    return crypto.randomBytes(length / 2).toString("hex"); // length must be even
+}
+/**
+ * Generates a unique key with optional prefix (e.g., for versioning or branding)
+ * @param prefix Optional prefix like 'PRO-', 'PREMIUM-', etc.
+ */
+export function generateVersionedKey(prefix = "") {
+    const key = generateApiKey(48);
+    return `${prefix}${key}`;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tetrons",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "next dev --turbo",
-    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist",
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist && copyfiles -u 1 src/styles/*.css dist/styles",
     "start": "next start",
     "lint": "next lint"
   },
@@ -29,6 +29,7 @@
     "dom-to-pdf": "^0.3.2",
     "html2pdf.js": "^0.10.3",
     "lowlight": "^3.3.0",
+    "mongoose": "^8.16.0",
     "react-icons": "^5.5.0"
   },
   "peerDependencies": {
@@ -42,6 +43,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "copyfiles": "^2.4.1",
     "eslint": "^9",
     "eslint-config-next": "^15.3.2",
     "tailwindcss": "^4",
@@ -65,7 +67,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/styles/tetrons.css"
   },
   "files": [
     "dist",