@collabchron/notiq 0.2.0

package/README.md

@@ -0,0 +1,71 @@
+# Notiq
+
+A modern, extensible note-taking and document editor built with Next.js, TypeScript, Tailwind CSS, and Lexical. Features include rich text editing, image and media embeds, equations, polls, and more.
+
+## Features
+
+- ⚡️ Fast, responsive editor powered by Lexical
+- 🖼️ Image, inline image, and media embeds (YouTube, Twitter, Figma, GIFs)
+- 🧮 Equation and math support (KaTeX)
+- 📊 Polls, tables, and code blocks
+- 🎨 Customizable themes with Tailwind CSS
+- 🗂️ Modular plugin architecture
+- 🌐 Next.js app with API routes
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18+ recommended)
+- pnpm (or npm/yarn)
+
+### Installation
+
+```bash
+pnpm install
+```
+
+### Development
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Build
+
+```bash
+pnpm build
+```
+
+## Project Structure
+
+- `src/app/` — Next.js app routes and layout
+- `src/components/editor/` — Editor core, plugins, nodes, and UI
+- `src/components/ui/` — Reusable UI components
+- `src/lib/` — Utility libraries (EdgeStore, Pinecone, etc.)
+- `public/` — Static assets
+
+## Editor Plugins & Nodes
+
+- **Plugins:** Toolbar, Floating Toolbar, AutoEmbed, Equations, Excalidraw, Inline Images, Polls, Tables, Code Actions, Slash Commands, etc.
+- **Nodes:** ImageNode, InlineImageNode, EquationNode, ExcalidrawNode, PollNode, etc.
+
+## Customization
+
+- Tailwind CSS config: `tailwind.config.ts`
+- ESLint config: `eslint.config.mjs`
+- Editor themes: `src/components/editor/themes/`
+
+## Contributing
+
+1. Fork the repo
+2. Create your feature branch (`git checkout -b feature/foo`)
+3. Commit your changes (`git commit -am 'Add feature'`)
+4. Push to the branch (`git push origin feature/foo`)
+5. Create a Pull Request
+
+## License
+
+MIT

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@collabchron/notiq",
+  "version": "0.2.0",
+  "private": false,
+  "description": "Notion AI + Figma + Excalidraw + 3D + Code Editor + Markdown Editor + Real-time Collaboration + Embeds + More = Notiq",
+  "author": "Chinonso Chikelue (fluantiX) <chinonsoneft@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chinonsochikelue/notiq.git"
+  },
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^2.0.30",
+    "@ai-sdk/react": "^2.0.44",
+    "@edgestore/react": "^0.5.4",
+    "@edgestore/server": "^0.5.4",
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@lexical/clipboard": "^0.35.0",
+    "@lexical/code": "^0.35.0",
+    "@lexical/code-shiki": "^0.35.0",
+    "@lexical/devtools-core": "^0.35.0",
+    "@lexical/dragon": "^0.35.0",
+    "@lexical/eslint-plugin": "^0.35.0",
+    "@lexical/file": "^0.35.0",
+    "@lexical/hashtag": "^0.35.0",
+    "@lexical/headless": "^0.35.0",
+    "@lexical/history": "^0.35.0",
+    "@lexical/html": "^0.35.0",
+    "@lexical/link": "^0.35.0",
+    "@lexical/list": "^0.35.0",
+    "@lexical/mark": "^0.35.0",
+    "@lexical/markdown": "^0.35.0",
+    "@lexical/offset": "^0.35.0",
+    "@lexical/overflow": "^0.35.0",
+    "@lexical/react": "^0.35.0",
+    "@lexical/rich-text": "^0.35.0",
+    "@lexical/selection": "^0.35.0",
+    "@lexical/table": "^0.35.0",
+    "@lexical/text": "^0.35.0",
+    "@lexical/utils": "^0.35.0",
+    "@lexical/yjs": "^0.35.0",
+    "@mantine/hooks": "^8.3.1",
+    "@pinecone-database/pinecone": "^6.1.2",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-three/fiber": "^9.3.0",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@tanstack/react-query": "^5.87.4",
+    "@uiw/react-color": "^2.8.0",
+    "ai": "^5.0.44",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "framer-motion": "^12.23.12",
+    "katex": "^0.16.22",
+    "lexical": "^0.35.0",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.544.0",
+    "motion": "^12.23.12",
+    "next-themes": "^0.4.6",
+    "openai": "^5.20.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-error-boundary": "^6.0.0",
+    "react-markdown": "^10.1.0",
+    "redis": "^5.8.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.180.0",
+    "tw-animate-css": "^1.3.8",
+    "zod": "^4.1.8",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/eslint-plugin-query": "^5.86.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.4.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@types/three": "^0.180.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.35.0",
+    "eslint-config-next": "15.5.3",
+    "next": "15.5.3",
+    "postcss": "^8.5.6",
+    "prettier": "3.6.2",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}

package/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/public/images/icons/plus.svg

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  strokeWidth="2"
+  className="w-6 h-6"
+>
+  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+</svg>

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/src/app/actions.ts

@@ -0,0 +1,2 @@
+"use server"
+

package/src/app/api/ai/route.ts

@@ -0,0 +1,175 @@
+import {
+  AIAction,
+  autoCompleteInstruction,
+  FixSpellingGrammarInstruction,
+  improveMesgInstruction,
+  MakeLongInstruction,
+  MakeShortInstruction,
+  SimplifyLanguageInstruction,
+  StepsInstruction,
+} from "@/components/editor/hooks/instructions-messages";
+import { ExtractedBlock } from "@/components/editor/utils/extract-data";
+import { openai } from "@ai-sdk/openai";
+import { CoreMessage, streamText } from "ai";
+import { createClient } from "redis";
+
+
+
+const client = createClient({
+  username: "default",
+  password: process.env.REDIS_PASSWORD,
+  socket: {
+    host: process.env.REDIS_URL,
+    port: parseInt(process.env.REDIS_PORT!),
+  },
+});
+
+client.connect().catch((err) => console.error("Redis connection error:", err));
+
+export const maxDuration = 30;
+const MAX_TOKEN = 60000;
+
+function estimateTokenCount(text: string): number {
+  return Math.ceil(text.length / 4);
+}
+
+
+function computeHash(text: string): string {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash << 5) - hash + text.charCodeAt(i);
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash.toString();
+}
+
+function flattenBlocks(blocks: ExtractedBlock[]): string {
+  return blocks
+    .map((block) => {
+      let content = block.content;
+      if (block.children) {
+        content += `\n${flattenBlocks(block.children)}`;
+      }
+      return content;
+    })
+    .join("\n\n");
+}
+
+/**
+ * Asynchronously process the raw context JSON string.
+ * It checks Redis for a cached version (valid for 30 seconds),
+ * and if not found, processes the JSON into flat text, applies smart truncation,
+ * stores it in Redis, and returns the processed text.
+ */
+
+
+async function processContext(rawContext: string): Promise<string> {
+  const currentHash = computeHash(rawContext);
+  const cacheKey = `context:${currentHash}`;
+
+  try {
+    const cached = await client.get(cacheKey);    
+    if (cached) {
+      const cachedData = JSON.parse(cached);
+      if (Date.now() - cachedData.timestamp < 30000) {
+        console.log("Returning cached context from Redis");
+        return cachedData.processedText;
+      }
+    }
+  } catch (error) {
+    console.error("Redis error while fetching cache:", error);
+  }
+
+  try {
+    const blocks: ExtractedBlock[] = JSON.parse(rawContext);
+    let processedText = flattenBlocks(blocks);
+
+    // If processed text is too long, preserve important sections and truncate
+    if (estimateTokenCount(processedText) > MAX_TOKEN) {
+      const importantSections = blocks
+        .filter((b) =>
+          [
+            "heading",
+            "Collapsible",
+            "Table",
+            "text",
+            "paragraph",
+            "list",
+            "quote",
+            "code",
+            "CollapsibleContent",
+            "Collapsible",
+            "list-item",
+          ].includes(b.blockType)
+        )
+        .map((b) => b.content + (b.children ? `\n${flattenBlocks(b.children)}` : ""))
+        .join("\n\n");
+
+      processedText = `${importantSections}\n\n${
+        blocks
+          .filter((b) => !["heading", "quote", "Table","paragraph"].includes(b.blockType))
+          .map((b) => b.content)
+          .join("\n")
+      }`.slice(0, MAX_TOKEN * 4);
+    }
+
+    // Store in Redis with an expiration of 30 seconds
+    const cacheData = JSON.stringify({ processedText, timestamp: Date.now() });
+    try {
+      await client.set(cacheKey, cacheData, { EX: maxDuration });
+    } catch (error) {
+      console.error("Redis error while setting cache:", error);
+    }
+
+    return processedText;
+  } catch (error) {
+    console.error("Context processing failed:", error);
+    return rawContext.slice(0, MAX_TOKEN * 4);
+  }
+}
+
+function buildSystemMessage(action: AIAction, context: string): string {
+  const baseInstructions: any = {
+    autoComplete: autoCompleteInstruction,
+    FixSpellingGrammar: FixSpellingGrammarInstruction,
+    ImproveWriting: improveMesgInstruction,
+    MakeLongInstruction: MakeLongInstruction,
+    MakeShortInstruction: MakeShortInstruction,
+    SimplifyLanguage: SimplifyLanguageInstruction,
+    Steps: StepsInstruction,
+    ChatWithSelectedString: `You're an editor assistant. Use all the provided context from the document to answer the user's question directly in concise Markdown format. Answer ONLY the question without including additional suggestions or extra context. If the blog does not contain the necessary data, you may supplement your answer with external information.       
+    Context:
+    ${context}`,
+        GenerateAgain: `Improve the response based on the full content.
+    Context:
+    ${context}
+    Consider: 1. Phrasing  2. Details  3. Alternatives`,
+        default: "You are a professional writing assistant",
+  };
+
+  return baseInstructions[action] || baseInstructions.default!;
+}
+
+export async function POST(req: Request) {
+  const { prompt: userQuestion, action, context } = await req.json();
+  const processedContext = context ? await processContext(context) : "";
+  const systemMessage = buildSystemMessage(action, processedContext);
+  const messages: CoreMessage[] = [
+    { role: "system", content: systemMessage },
+    { role: "user", content: userQuestion },
+  ];
+  try {
+    const result = streamText({
+      model: openai("gpt-4o"),
+      messages,
+      temperature: 0.2,
+    });
+
+    return result.toDataStreamResponse();
+  } catch (error) {
+    console.error("Streaming failed:", error);
+    return new Response("Error generating response", { status: 500 });
+  }
+
+ 
+}

package/src/app/api/edgestore/[...edgestore]/route.ts

@@ -0,0 +1,28 @@
+import { initEdgeStore } from '@edgestore/server';
+import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/app';
+
+// Initialize the EdgeStore
+const es = initEdgeStore.create();
+
+/**
+ * This is the main router for the Edge Store buckets.
+ * We're configuring a file bucket that allows all file types and limits size to 1GB.
+ */
+const edgeStoreRouter = es.router({
+  publicFiles: es.fileBucket({
+    // Set file size limit to 1 GB (1 GB = 1,073,741,824 bytes)
+    maxSize: 1_073_741_824,
+  }),
+});
+
+// Create the handler for the GET and POST routes
+const handler = createEdgeStoreNextHandler({
+  router: edgeStoreRouter,
+});
+
+export { handler as GET, handler as POST };
+
+/**
+ * This type is used to create the type-safe client for the frontend.
+ */
+export type EdgeStoreRouter = typeof edgeStoreRouter;

package/src/app/globals.css

@@ -0,0 +1,205 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Monomakh&display=swap'); */
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.select-none {
+  user-select: none;
+}
+
+#toolbar {
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+#toolbar::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari, Edge */
+}
+
+.code {
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.code::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari, Edge */
+}
+
+@layer base {
+  :root {
+    --font-gray: #9B9A97;
+    --font-brown: #64473A;
+    --font-orange: #D9730D;
+    --font-yellow: #DFAB01;
+    --font-green: #0F7B6C;
+    --font-blue: #0B6E99;
+    --font-purple: #6940A5;
+    --font-pink: #AD1A72;
+    --font-red: #E03E3E;
+
+
+    --background-gray: #EBECED;
+    --background-brown: #E9E5E3;
+    --background-orange: #FAEBDD;
+    --background-yellow: #FBF3DB;
+    --background-green: #DDEDEA;
+    --background-blue: #DDEDEA;
+    --background-purple: #EAE4F2;
+    --background-pink: #F4DFEB;
+    --background-red: #FBE4E4;
+
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+
+    --font-gray: #9B9A97;
+    --font-brown: #937264;
+    --font-orange: #FFA344;
+    --font-yellow: #FFDC49;
+    --font-green: #4DAB9A;
+    --font-blue: #529CCA;
+    --font-purple: #9A6DD7;
+    --font-pink: #E255A1;
+    --font-red: #FF7369;
+
+
+    --background-gray: #454B4E;
+    --background-brown: #434040;
+    --background-orange: #594A3A;
+    --background-yellow: #59563B;
+    --background-green: #354C4B;
+    --background-blue: #364954;
+    --background-purple: #443F57;
+    --background-pink: #533B4C;
+    --background-red: #594141;
+
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.editor-shell .editor-image .image-edit-button {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-image: url(/src/images/icons/pencil-fill.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  height: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.editor-shell .editor-image .image-edit-button:hover {
+  background-color: rgba(60, 132, 244, 0.1);
+}
+
+.editor-shell .inline-editor-image .image-edit-button {
+  display: block;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px 8px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  min-width: 60px;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.editor-shell .inline-editor-image .image-edit-button:hover {
+  background-color: rgba(60, 132, 244, 0.5);
+}
+
+
+/* @layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} */
+
+
+
+/* @layer base {
+  * {
+    @apply border border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+} */