Initial secure upload

.gitignore

@@ -1,23 +1,26 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kerim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,82 +1,76 @@
----
-title: MindSpark
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
-short_description: Ideas to professional workflows
----
-
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+# 🧠 MindSpark (AI Notebook)
 
-### `npm test`
+**MindSpark** is a next-generation AI-powered note-taking and project management platform that transforms your complex ideas into structured, actionable, and detailed project plans.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Powered by Google Gemini models (Gemini 2.5 Flash, Gemini 3 Flash Preview, and Image), this platform takes a simple idea and turns it into a professional workflow.
 
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+---
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## 🎯 Purpose of the Application
 
-### `npm run eject`
+Whether you want to write a novel, develop a new mobile app, start a business, or design an RPG game, you might not know "where to start." **The main goal of MindSpark is to eliminate this starting barrier and act as your "Board of Directors" while bringing your vision to life.**
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+You just express your idea (or tell it with your voice). MindSpark:
+1. **Breaks down** the steps needed to reach your goal.
+2. Assigns a **Virtual Agent** (e.g., Database Architect, Fiction Writer, UI/UX Designer) for each step as an expert in that task.
+3. Produces the **text, code, or vision image** you need through these agents in seconds.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+---
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+## ✨ Key Features
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+### 🕵️‍♂️ Dynamic Expert Agent Mechanism
+A virtual team of experts is automatically established based on your project type. Tasks don't just stay as a list; they are assigned to agents with roles like *System Architect*, *Content Strategist*, or *Art Director*. You can see which agent took on that job in each note.
 
-## Learn More
+### 🪄 Prompt Boost & Voice Input
+Struggling to express your idea?
+- **Voice to Text:** Just record your idea by speaking. AI transcribes it.
+- **Boost:** Transform a short sentence like "I want to make a game" into a rich, technical, and creative command with one click.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### 📦 Automatic Content and Asset Generation
+AI generates content planned for each step:
+- **Text:** Detailed tutorials, stories, strategies.
+- **Code:** Actionable software architectures and code blocks.
+- **Image:** High-quality AI-drawn concept art that Comic solidifies your idea.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+### ☁️ Cloud Sync and Offline Support
+- Log in with your Google account and sync all your projects to the cloud via **Firebase**.
+- Even when working offline, your browser memory (Local Storage) keeps your projects safe.
 
-### Code Splitting
+### 📋 Drag, Drop, and Manage
+Change the priorities of tasks (steps) with drag-and-drop, mark completed ones, add new tags, files, or audio recordings.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+### 📥 Export
+Download your massive project file as a highly readable **PDF** document or a developer-friendly **Markdown (.md)** file.
 
-### Analyzing the Bundle Size
+---
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+## 🚀 How It Works?
 
-### Making a Progressive Web App
+1. **Ignite Your Idea:** Type or speak "I want to design a sci-fi base desktop board game" in the box on the main screen.
+2. **AI Planning:** The intelligence behind it divides this huge idea into logical steps (e.g., Universe rules, Characters, Game mechanics, Design, etc.) and assigns them to agents.
+3. **Production:** MindSpark writes text, generates code, and draws images sequentially according to the content of each step.
+4. **Iteration:** Review the results, add your own notes, redraw images by giving feedback, or add new steps.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+---
 
-### Advanced Configuration
+## 🛠️ Tech Stack
+* **Frontend:** React 19, TypeScript, Vite
+* **Styling & UI:** Tailwind CSS, Framer Motion (Animations), Lucide React (Icons)
+* **AI:** `@google/genai` (Gemini 2.5 Flash, Gemini 3 Preview, Gemini 3 Flash Image)
+* **Backend / Database:** Firebase (Auth, Firestore)
+* **Desktop & File Capabilities:** Vite PWA, dnd-kit (Drag-and-Drop), html2pdf.js / jspdf (PDF Export)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+---
 
-### Deployment
+## ⚖️ License
+This project is licensed under the **Polyform Non-Commercial License 1.0.0**. 
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+**What does this mean?**
+- You can use and modify this project for **personal, non-commercial use**.
+- You **cannot** use this project or its code for commercial purposes, profit, or business activities without explicit permission from the owner.
+- Ownership and copyright belong to the original author.
 
-### `npm run build` fails to minify
+---
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+> *Big ideas deserve great starts. With MindSpark, none of your ideas will remain just a dream.*

components/CalendarView.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Note, Project } from '../types';
+import { motion } from 'motion/react';
+
+interface CalendarViewProps {
+  notes: Record<string, Note>;
+  projects: Project[];
+  onNavigateToNote: (noteId: string) => void;
+  onFilterDate?: (dateStr: string) => void;
+}
+
+export const CalendarView: React.FC<CalendarViewProps> = ({ notes, projects, onNavigateToNote, onFilterDate }) => {
+  const [currentDate, setCurrentDate] = React.useState(new Date());
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    return new Date(year, month, 1).getDay();
+  };
+
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfMonth(year, month);
+
+  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+  const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, i) => i); // Adjust for Monday start
+
+  const notesByDate: Record<string, Note[]> = {};
+  Object.values(notes).forEach(note => {
+    const date = new Date(note.timestamp).toDateString();
+    if (!notesByDate[date]) notesByDate[date] = [];
+    notesByDate[date].push(note);
+  });
+
+  const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));
+  const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
+
+  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+  return (
+    <div className="bg-[#0F1117] border border-white/10 rounded-[2.5rem] p-8 shadow-2xl">
+      <div className="flex justify-between items-center mb-8">
+        <h3 className="text-2xl font-black text-white tracking-tight">
+          {monthNames[month]} {year}
+        </h3>
+        <div className="flex gap-2">
+          <button onClick={prevMonth} className="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-slate-400 transition-all">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+            </svg>
+          </button>
+          <button onClick={nextMonth} className="p-2 bg-white/5 hover:bg-white/10 rounded-xl text-slate-400 transition-all">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-7 gap-4">
+        {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(day => (
+          <div key={day} className="text-center text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] pb-4">
+            {day}
+          </div>
+        ))}
+        
+        {padding.map(i => <div key={`pad-${i}`} className="aspect-square"></div>)}
+        
+        {days.map(day => {
+          const date = new Date(year, month, day).toDateString();
+          const dayNotes = notesByDate[date] || [];
+          const isToday = new Date().toDateString() === date;
+
+          return (
+            <div 
+              key={day} 
+              onClick={() => {
+                  const dateStr = new Date(year, month, day).toLocaleDateString('en-US', { day: 'numeric', month: 'short' }).toUpperCase();
+                  onFilterDate && onFilterDate(dateStr);
+              }}
+              className={`aspect-square rounded-2xl border p-2 flex flex-col gap-1 transition-all cursor-pointer ${
+                isToday ? 'bg-indigo-500/10 border-indigo-500/40 hover:bg-indigo-500/20' : 'bg-white/[0.02] border-white/5 hover:border-white/10 hover:bg-white/[0.05]'
+              }`}
+            >
+              <span className={`text-xs font-bold ${isToday ? 'text-indigo-400' : 'text-slate-500'}`}>{day}</span>
+              <div className="flex-1 overflow-y-auto custom-scrollbar space-y-1">
+                {dayNotes.map(note => (
+                  <button
+                    key={note.id}
+                    onClick={() => onNavigateToNote(note.id)}
+                    className="w-full text-left text-[9px] p-1.5 rounded-lg bg-indigo-500/20 text-indigo-300 truncate hover:bg-indigo-500 hover:text-white transition-all"
+                    title={note.title}
+                  >
+                    {note.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

components/LoadingSpinner.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const LoadingSpinner: React.FC = () => (
+  <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+);

components/NoteCard.tsx

@@ -0,0 +1,716 @@
+import React, { useRef } from 'react';
+import { Note, NoteType, GenerationStatus, Attachment } from '../types';
+import { LoadingSpinner } from './LoadingSpinner';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface NoteCardProps {
+  note: Note;
+  isRoot?: boolean;
+  onRetry?: (noteId: string) => void;
+  onExport?: () => void;
+  isExporting?: boolean;
+  onUpdate?: (noteId: string, updates: Partial<Note> | string) => void;
+  onDelete?: (noteId: string) => void;
+  onRegenerateImage?: (noteId: string, feedback: string) => void;
+  onAddAttachment?: (noteId: string, attachment: Attachment) => void;
+  onRemoveAttachment?: (noteId: string, attachmentId: string) => void;
+  onAddTag?: (noteId: string, tag: string) => void;
+  onRemoveTag?: (noteId: string, tag: string) => void;
+  getNoteTitle?: (noteId: string) => string;
+  onNavigateToNote?: (noteId: string) => void;
+  dragHandleProps?: any;
+}
+
+const NoteCard: React.FC<NoteCardProps> = ({ 
+  note, 
+  isRoot = false, 
+  onRetry, 
+  onExport,
+  isExporting = false,
+  onUpdate,
+  onDelete,
+  onRegenerateImage,
+  onAddAttachment,
+  onRemoveAttachment,
+  onAddTag,
+  onRemoveTag,
+  getNoteTitle,
+  onNavigateToNote,
+  dragHandleProps
+}) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editContent, setEditContent] = React.useState(note.content);
+  const [feedback, setFeedback] = React.useState('');
+  const [showFeedback, setShowFeedback] = React.useState(false);
+  const [useFeedback, setUseFeedback] = React.useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const isImage = note.type === NoteType.IMAGE;
+  const isLoading = note.status === GenerationStatus.GENERATING;
+  const isIdle = note.status === GenerationStatus.IDLE;
+  const isError = note.status === GenerationStatus.ERROR;
+
+  const handleSave = () => {
+    if (onUpdate) {
+      onUpdate(note.id, { content: editContent });
+    }
+    setIsEditing(false);
+    setShowSuccess(true);
+    setTimeout(() => setShowSuccess(false), 2500);
+  };
+
+  const toggleTask = () => {
+    if (onUpdate) {
+        onUpdate(note.id, { isTask: !note.isTask });
+    }
+  };
+
+  const toggleTaskStatus = () => {
+    if (onUpdate) {
+        onUpdate(note.id, { isCompleted: !note.isCompleted });
+    }
+  };
+
+  const handleCancel = () => {
+    setEditContent(note.content);
+    setIsEditing(false);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !onAddAttachment) return;
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const base64String = reader.result as string;
+      let type: 'image' | 'audio' | 'file' = 'file';
+      if (file.type.startsWith('image/')) type = 'image';
+      else if (file.type.startsWith('audio/')) type = 'audio';
+
+      const newAttachment: Attachment = {
+        id: Date.now().toString(),
+        type,
+        url: base64String,
+        name: file.name
+      };
+      onAddAttachment(note.id, newAttachment);
+    };
+    reader.readAsDataURL(file);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const renderAttachments = () => {
+    if (!note.attachments || note.attachments.length === 0) return null;
+
+    return (
+      <div className="mt-4 space-y-2 border-t border-slate-700/50 pt-4">
+        <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Attachments</h4>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          {note.attachments.map(attachment => (
+            <div key={attachment.id} className="relative group/attach bg-slate-900/50 border border-slate-700 rounded-lg p-3 flex items-center gap-3">
+              {attachment.type === 'image' && (
+                <div className="w-10 h-10 rounded overflow-hidden shrink-0 bg-slate-800">
+                  <img src={attachment.url} alt={attachment.name} className="w-full h-full object-cover" />
+                </div>
+              )}
+              {attachment.type === 'audio' && (
+                <div className="w-10 h-10 rounded shrink-0 bg-indigo-900/30 text-indigo-400 flex items-center justify-center">
+                  🎵
+                </div>
+              )}
+              {attachment.type === 'file' && (
+                <div className="w-10 h-10 rounded shrink-0 bg-slate-800 text-slate-400 flex items-center justify-center">
+                  📄
+                </div>
+              )}
+              
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-slate-300 truncate" title={attachment.name}>{attachment.name}</p>
+                {attachment.type === 'audio' && (
+                  <audio src={attachment.url} controls className="w-full h-6 mt-1" />
+                )}
+                {attachment.type === 'file' && (
+                  <a href={attachment.url} download={attachment.name} className="text-xs text-indigo-400 hover:underline">Download</a>
+                )}
+              </div>
+
+              {onRemoveAttachment && (
+                <button 
+                  onClick={() => onRemoveAttachment(note.id, attachment.id)}
+                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover/attach:opacity-100 transition-opacity shadow-lg hide-in-pdf"
+                  title="Remove Attachment"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex flex-col items-center justify-center p-12 space-y-4 text-slate-400 bg-slate-900/30 rounded-lg border border-dashed border-slate-700">
+          <LoadingSpinner />
+          <span className="text-sm animate-pulse text-indigo-400 font-medium">Preparing content...</span>
+          <p className="text-xs max-w-xs text-center opacity-60">AI is detailing this step, please wait.</p>
+        </div>
+      );
+    }
+
+    if (isIdle) {
+         return (
+             <div className="p-6 bg-slate-900/20 rounded-lg border border-dashed border-slate-700 text-slate-500 italic text-sm">
+                 {note.content || "Content will be generated when it's time for this step..."}
+             </div>
+         )
+    }
+
+    if (isError) {
+      return (
+        <div className="flex flex-col items-center justify-center p-6 gap-3 border border-red-900/50 bg-red-900/10 rounded-lg text-center">
+            <p className="text-red-400">An error occurred while generating content.</p>
+            {onRetry && (
+                <button 
+                    onClick={() => onRetry(note.id)}
+                    className="px-4 py-2 bg-red-800/50 hover:bg-red-700/50 text-red-200 text-sm rounded-md transition-colors border border-red-700/50 flex items-center gap-2"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v3.292a1 1 0 01-2 0V12.899a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+                    </svg>
+                    Retry
+                </button>
+            )}
+        </div>
+      );
+    }
+
+    if (isEditing) {
+      return (
+        <div className="flex flex-col gap-4 bg-slate-900/50 p-4 rounded-xl border border-indigo-500/30">
+          <textarea
+            value={editContent}
+            onChange={(e) => setEditContent(e.target.value)}
+            className="w-full bg-slate-950 text-slate-200 p-5 rounded-lg border border-slate-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none min-h-[250px] font-mono text-sm leading-relaxed shadow-inner"
+            placeholder="Write note content here..."
+          />
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={handleCancel}
+              className="px-5 py-2.5 text-sm font-medium text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors border border-slate-600"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors shadow-lg shadow-indigo-500/20 flex items-center gap-2"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              Save
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    if (isImage) {
+        if (note.content && note.content.startsWith('data:image')) {
+            return (
+                <div className="flex flex-col items-center p-4 bg-slate-950 rounded-lg border border-slate-800">
+                    <img src={note.content} alt={note.title} className="max-w-full h-auto rounded shadow-2xl border border-slate-700" />
+                    <p className="text-xs text-slate-500 mt-2 italic">Generated by Gemini Image</p>
+                    
+                    <div className="w-full mt-6 pt-6 border-t border-slate-800">
+        <div className="flex gap-4 max-w-md mx-auto">
+                            <label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer hover:text-white transition-colors">
+                                <input 
+                                    type="checkbox" 
+                                    checked={useFeedback}
+                                    onChange={(e) => setUseFeedback(e.target.checked)}
+                                    className="rounded border-slate-600 text-indigo-500 focus:ring-indigo-500 bg-slate-800"
+                                />
+                                Revise image with feedback
+                            </label>
+                            
+                            {useFeedback && (
+                                <textarea 
+                                    value={feedback}
+                                    onChange={(e) => setFeedback(e.target.value)}
+                                    placeholder="Ex: Darker atmosphere, make the character's hair blue..."
+                                    className="w-full bg-slate-900 text-slate-300 p-3 rounded-lg border border-slate-700 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
+                                    rows={3}
+                                />
+                            )}
+                            
+                            <button 
+                                onClick={() => {
+                                    if (onRegenerateImage) onRegenerateImage(note.id, useFeedback ? feedback : '');
+                                    setFeedback('');
+                                    setUseFeedback(false);
+                                }}
+                                className="w-full bg-indigo-600/20 hover:bg-indigo-600/30 text-indigo-300 border border-indigo-500/30 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v3.292a1 1 0 01-2 0V12.899a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+                                </svg>
+                                Regenerate
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="p-10 bg-[#0B0F19]/40 rounded-[2rem] border border-dashed border-white/10 text-center space-y-6">
+                <div className="w-20 h-20 bg-orange-500/10 rounded-[1.5rem] flex items-center justify-center mx-auto text-orange-400">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                </div>
+                <div className="space-y-2">
+                    <h4 className="text-white font-black text-xs uppercase tracking-[0.2em]">Image Generation Failed</h4>
+                    <p className="text-slate-500 text-xs leading-relaxed max-w-sm mx-auto">
+                        {note.content || "An unknown error occurred."}
+                    </p>
+                </div>
+                {onRetry && (
+                    <button 
+                        onClick={() => onRetry(note.id)}
+                        className="bg-white/5 border border-white/10 hover:border-white/20 text-indigo-400 hover:text-white px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
+                    >
+                        Retry
+                    </button>
+                )}
+            </div>
+        );
+    }
+
+    // Advanced Markdown-like rendering
+    return (
+      <div 
+        className="prose prose-invert prose-slate max-w-none group/content relative"
+      >
+        {!isRoot && note.type !== NoteType.IMAGE && (
+          <button 
+            onClick={() => setIsEditing(true)}
+            className="absolute -right-2 -top-2 opacity-0 group-hover/content:opacity-100 transition-opacity bg-indigo-600 text-white text-[10px] px-2 py-1 rounded shadow-lg z-10 hide-in-pdf"
+          >
+            Click to edit
+          </button>
+        )}
+        <div className="text-slate-300 leading-7 font-light markdown-body">
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              code({node, inline, className, children, ...props}: any) {
+                const match = /language-(\w+)/.exec(className || '')
+                return !inline && match ? (
+                  <SyntaxHighlighter
+                    {...props}
+                    children={String(children).replace(/\n$/, '')}
+                    style={vscDarkPlus}
+                    language={match[1]}
+                    PreTag="div"
+                    className="rounded-xl border border-white/10 my-6 text-sm shadow-lg shadow-black/20"
+                  />
+                ) : (
+                  <code {...props} className={`${className} bg-white/5 text-indigo-300 px-1.5 py-0.5 rounded-md text-sm border border-white/5`}>
+                    {children}
+                  </code>
+                )
+              },
+              img({node, ...props}: any) {
+                if (!props.src) return null;
+                return (
+                  <span className="my-8 flex justify-center">
+                    <img {...props} src={props.src} className="max-w-full h-auto rounded-xl shadow-2xl shadow-black/40 border border-white/10" />
+                  </span>
+                )
+              },
+              h1: ({node, ...props}: any) => <h1 {...props} className="text-2xl md:text-3xl font-bold text-white mt-8 mb-6 tracking-tight" />,
+              h2: ({node, ...props}: any) => <h2 {...props} className="text-xl md:text-2xl font-bold text-indigo-200 mt-8 mb-4 tracking-tight" />,
+              h3: ({node, ...props}: any) => <h3 {...props} className="text-lg md:text-xl font-bold text-indigo-300 mt-6 mb-3 pb-2 border-b border-white/5" />,
+              hr: ({node, ...props}: any) => <hr {...props} className="my-8 border-white/5" />,
+              blockquote: ({node, ...props}: any) => <blockquote {...props} className="border-l-4 border-indigo-500/50 pl-5 italic text-slate-400 my-6 bg-white/[0.02] py-3 rounded-r-lg" />,
+              a: ({node, ...props}: any) => <a {...props} className="text-indigo-400 hover:text-indigo-300 hover:underline decoration-indigo-500/30 underline-offset-4 transition-colors" target="_blank" rel="noopener noreferrer" />,
+              ul: ({node, ...props}: any) => <ul {...props} className="list-disc pl-6 mb-6 space-y-2 marker:text-indigo-500/50" />,
+              ol: ({node, ...props}: any) => <ol {...props} className="list-decimal pl-6 mb-6 space-y-2 marker:text-indigo-500/50" />,
+              li: ({node, ...props}: any) => <li {...props} className="text-slate-300 pl-1" />,
+              p: ({node, children, ...props}: any) => {
+                const hasImage = node?.children?.some((child: any) => child.tagName === 'img');
+                if (hasImage) {
+                  return <div {...props} className="mb-4">{children}</div>;
+                }
+                return <p {...props} className="mb-4">{children}</p>;
+              }
+            }}
+          >
+            {note.content}
+          </ReactMarkdown>
+        </div>
+      </div>
+    );
+  };
+
+  const [showTagInput, setShowTagInput] = React.useState(false);
+  const [newTagText, setNewTagText] = React.useState('');
+
+  const handleAddTagSubmit = () => {
+    if (newTagText.trim() && onAddTag) {
+      onAddTag(note.id, newTagText.trim());
+      setNewTagText('');
+      setShowTagInput(false);
+    }
+  };
+
+  const renderTags = () => {
+    return (
+      <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-slate-700/50 pt-4">
+        <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider mr-2">Tags:</span>
+        {(note.tags || []).map(tag => (
+          <span key={tag} className="bg-indigo-900/40 text-indigo-300 text-xs px-2 py-1 rounded-md flex items-center gap-1 border border-indigo-500/30">
+            #{tag}
+            {onRemoveTag && (
+              <button onClick={() => onRemoveTag(note.id, tag)} className="hover:text-red-400 ml-1 hide-in-pdf">×</button>
+            )}
+          </span>
+        ))}
+        {onAddTag && (
+          <div className="flex items-center gap-2">
+            {showTagInput ? (
+                <div className="flex items-center gap-2 animate-fadeIn">
+                    <input 
+                        type="text"
+                        autoFocus
+                        value={newTagText}
+                        onChange={(e) => setNewTagText(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') handleAddTagSubmit();
+                            if (e.key === 'Escape') { setShowTagInput(false); setNewTagText(''); }
+                        }}
+                        placeholder="Tag name..."
+                        className="bg-slate-900 border border-indigo-500/50 rounded-md px-2 py-1 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    />
+                    <button onClick={handleAddTagSubmit} className="text-emerald-400 hover:text-emerald-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                    </button>
+                    <button onClick={() => setShowTagInput(false)} className="text-slate-500 hover:text-slate-300">×</button>
+                </div>
+            ) : (
+                <button 
+                    onClick={() => setShowTagInput(true)}
+                    className="text-xs text-slate-500 hover:text-indigo-400 border border-dashed border-slate-600 rounded-md px-2 py-1 hide-in-pdf"
+                >
+                    + Tag
+                </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const [linkedNotesSearch, setLinkedNotesSearch] = React.useState('');
+
+  const renderLinkedNotes = () => {
+    if (!note.linkedNoteIds || note.linkedNoteIds.length === 0 || !getNoteTitle) return null;
+    
+    const filteredLinkedNotes = note.linkedNoteIds.filter(id => {
+        const title = getNoteTitle(id);
+        return title && title.toLowerCase().includes(linkedNotesSearch.toLowerCase());
+    });
+
+    return (
+      <div className="mt-4 space-y-3 border-t border-slate-700/50 pt-4">
+        <div className="flex items-center justify-between">
+            <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Linked Notes</h4>
+            {note.linkedNoteIds.length > 3 && (
+                <div className="relative w-48">
+                    <input 
+                        type="text" 
+                        placeholder="Search links..." 
+                        value={linkedNotesSearch}
+                        onChange={(e) => setLinkedNotesSearch(e.target.value)}
+                        className="w-full bg-slate-900 text-slate-300 text-[10px] rounded pl-6 pr-2 py-1 border border-slate-700 focus:border-indigo-500 focus:outline-none"
+                    />
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 absolute left-2 top-1.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </div>
+            )}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {filteredLinkedNotes.length > 0 ? filteredLinkedNotes.map(linkedNoteId => {
+            const title = getNoteTitle(linkedNoteId);
+            if (!title) return null;
+            return (
+            <button 
+              key={linkedNoteId} 
+              onClick={() => onNavigateToNote && onNavigateToNote(linkedNoteId)}
+              className="bg-slate-800 border border-slate-700 rounded-md px-3 py-1.5 text-sm text-indigo-300 flex items-center gap-2 hover:bg-slate-700 hover:border-indigo-500 transition-colors cursor-pointer"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clipRule="evenodd" />
+              </svg>
+              {title}
+            </button>
+            );
+          }) : (
+            <p className="text-xs text-slate-500 italic">No matching links found.</p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const getIcon = () => {
+    switch (note.type) {
+      case NoteType.IMAGE: return '🎨';
+      case NoteType.CODE: return '💻';
+      case NoteType.ROOT: return '📁';
+      default: return '📝';
+    }
+  };
+
+  const handleCopy = () => {
+      if(note.type === NoteType.IMAGE) return; 
+      navigator.clipboard.writeText(note.content);
+  };
+
+  const handleExportNoteMD = () => {
+      if (note.type === NoteType.IMAGE) return;
+      const blob = new Blob([note.content], { type: 'text/markdown' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${note.title.replace(/\s+/g, '_')}.md`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={`
+        relative group transition-all duration-700 break-inside-avoid
+        ${isRoot 
+            ? 'bg-gradient-to-br from-[#1A1D26] to-[#0F1117] border-indigo-500/40 border-2 rounded-[2.5rem] shadow-2xl shadow-black/60' 
+            : 'bg-[#161B26]/30 backdrop-blur-xl border border-white/5 rounded-[2rem] hover:border-indigo-500/30 hover:bg-[#161B26]/50 shadow-xl shadow-black/30 transition-all duration-500'
+        }
+    `}>
+      {/* Header */}
+      <div 
+        className={`flex flex-col sm:flex-row sm:items-center justify-between px-6 py-5 md:px-8 md:py-6 border-b ${isRoot ? 'border-white/10' : 'border-white/5'} gap-4`}
+      >
+        <div className="flex items-center gap-5 min-w-0">
+          {dragHandleProps && (
+            <div 
+              {...dragHandleProps} 
+              className="cursor-grab active:cursor-grabbing text-slate-600 hover:text-slate-300 p-2.5 -ml-3 rounded-2xl hover:bg-white/5 hide-in-pdf transition-all duration-300"
+              title="Drag"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+              </svg>
+            </div>
+          )}
+          <div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-500 group-hover:scale-105 ${isRoot ? 'bg-indigo-500 text-white shadow-xl shadow-indigo-500/30' : 'bg-[#1F2937]/50 text-slate-400 border border-white/5'}`}>
+             <span className="text-2xl">{getIcon()}</span>
+          </div>
+          <div className="min-w-0">
+            <div className="flex items-center gap-4">
+              {note.isTask && (
+                  <button 
+                    onClick={(e) => { e.stopPropagation(); toggleTaskStatus(); }}
+                    className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-all shrink-0 ${note.isCompleted ? 'bg-indigo-500 border-indigo-500 text-white' : 'border-slate-700 hover:border-indigo-500'}`}
+                  >
+                      {note.isCompleted && (
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                          </svg>
+                      )}
+                  </button>
+              )}
+              <h3 
+                title={note.title}
+                className={`font-black tracking-tight truncate ${isRoot ? 'text-2xl md:text-3xl text-white' : 'text-lg md:text-xl text-slate-100'} ${note.isCompleted ? 'line-through opacity-50' : ''}`}
+              >
+                  {note.title}
+              </h3>
+              {showSuccess && (
+                  <span className="px-3 py-1 bg-emerald-500/10 text-emerald-400 text-[10px] font-black rounded-full uppercase tracking-[0.2em] animate-pulse border border-emerald-500/20">
+                      Saved
+                  </span>
+              )}
+            </div>
+            <div className="flex items-center gap-3 mt-1.5">
+                {isRoot && <span className="text-[10px] text-indigo-400 font-black tracking-[0.3em] uppercase">Master Project</span>}
+                {!isRoot && <span className="text-[10px] text-slate-500 font-black tracking-[0.3em] uppercase">Step {note.status === GenerationStatus.COMPLETED ? 'Complete' : 'Pending'}</span>}
+                <span className="w-1.5 h-1.5 rounded-full bg-slate-800"></span>
+                <span className="text-[10px] text-slate-600 font-black uppercase tracking-[0.2em]">{new Date(note.timestamp).toLocaleDateString('en-US', { day: 'numeric', month: 'short' })}</span>
+                {note.assignedAgent && (
+                    <>
+                        <span className="w-1.5 h-1.5 rounded-full bg-indigo-500/50"></span>
+                        <div className="flex items-center gap-1.5 px-2 py-0.5 bg-indigo-500/10 border border-indigo-500/20 rounded-md">
+                            <span className="text-[9px] text-indigo-400 font-black uppercase tracking-wider">Agent: {note.assignedAgent}</span>
+                            {note.agentRole && (
+                                <span className="text-[9px] text-slate-500 font-medium italic">({note.agentRole})</span>
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex flex-wrap gap-2 items-center justify-start sm:justify-end hide-in-pdf sm:ml-auto shrink-0">
+           {isRoot && onExport && !isLoading && (
+               <button 
+                onClick={onExport} 
+                disabled={isExporting}
+                className={`flex items-center gap-2 px-4 py-2 md:px-6 md:py-3 rounded-xl md:rounded-2xl text-[10px] md:text-[11px] font-black uppercase tracking-[0.1em] md:tracking-[0.2em] transition-all shadow-xl ${isExporting ? 'bg-indigo-800 text-indigo-300 cursor-not-allowed shadow-none' : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-indigo-600/30 hover:-translate-y-0.5 active:translate-y-0'}`}
+                title="Download Project"
+               >
+                  {isExporting ? (
+                    <svg className="animate-spin h-4 w-4 md:h-5 md:w-5 text-indigo-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                  ) : (
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  )}
+                  <span className="hidden xs:inline">{isExporting ? '...' : 'Export'}</span>
+                  {!isExporting && <span className="xs:hidden">EXP</span>}
+               </button>
+           )}
+
+           {note.type !== NoteType.IMAGE && note.content && !isLoading && !isIdle && !isError && (
+               <>
+                   <button onClick={handleCopy} className="opacity-0 group-hover:opacity-100 transition-all text-[10px] uppercase tracking-[0.2em] bg-white/5 hover:bg-indigo-600 text-slate-400 hover:text-white px-4 py-2.5 rounded-2xl font-black border border-white/5 shadow-lg">
+                       Copy
+                   </button>
+                   <button onClick={handleExportNoteMD} className="opacity-0 group-hover:opacity-100 transition-all text-[10px] uppercase tracking-[0.2em] bg-white/5 hover:bg-indigo-600 text-slate-400 hover:text-white px-4 py-2.5 rounded-2xl font-black border border-white/5 shadow-lg">
+                       MD
+                   </button>
+               </>
+           )}
+
+           {!isRoot && onDelete && (
+               <div className="relative opacity-0 group-hover:opacity-100 transition-all flex items-center">
+                   {showDeleteConfirm ? (
+                       <div className="flex items-center gap-2 bg-red-500/10 border border-red-500/20 rounded-2xl p-1.5">
+                           <button onClick={(e) => { e.stopPropagation(); onDelete(note.id); }} className="text-[10px] uppercase tracking-[0.2em] bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-xl font-black transition-all shadow-lg">Delete</button>
+                           <button onClick={(e) => { e.stopPropagation(); setShowDeleteConfirm(false); }} className="text-[10px] uppercase tracking-[0.2em] bg-slate-800 hover:bg-slate-700 text-slate-300 px-4 py-2 rounded-xl font-black transition-all">Cancel</button>
+                       </div>
+                   ) : (
+                       <button 
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onClick={(e) => { e.stopPropagation(); setShowDeleteConfirm(true); }} 
+                        className="p-3 text-slate-600 hover:text-red-400 hover:bg-red-500/10 rounded-2xl transition-all duration-300"
+                        title="Delete Step"
+                       >
+                           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                               <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+                           </svg>
+                       </button>
+                   )}
+               </div>
+           )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className={`px-6 py-6 md:px-10 md:py-8 ${isRoot ? 'bg-white/[0.01]' : ''}`}>
+        {renderContent()}
+        {renderAttachments()}
+        {renderTags()}
+        {renderLinkedNotes()}
+      </div>
+      
+      {/* Footer Actions */}
+      <div className="px-6 py-4 md:px-8 md:py-5 border-t border-white/5 bg-black/40 flex justify-between items-center hide-in-pdf rounded-b-[2rem]">
+        <div className="flex items-center gap-6">
+            {!isRoot && onUpdate && (
+                <button 
+                    onClick={toggleTask}
+                    className={`text-[11px] font-black uppercase tracking-[0.2em] flex items-center gap-3 transition-all group/footer ${note.isTask ? 'text-indigo-400' : 'text-slate-500 hover:text-indigo-400'}`}
+                >
+                    <div className={`w-8 h-8 rounded-xl flex items-center justify-center transition-all duration-300 ${note.isTask ? 'bg-indigo-500/20' : 'bg-white/5 group-hover/footer:bg-indigo-500/10'}`}>
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                            <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                        </svg>
+                    </div>
+                    {note.isTask ? 'Task' : 'Convert to Task'}
+                </button>
+            )}
+            {onAddAttachment && (
+            <div>
+                <input 
+                type="file" 
+                ref={fileInputRef} 
+                onChange={handleFileChange} 
+                className="hidden" 
+                accept="image/*,audio/*,.pdf,.doc,.docx,.txt"
+                />
+                <button 
+                onClick={() => fileInputRef.current?.click()}
+                className="text-[11px] font-black uppercase tracking-[0.2em] flex items-center gap-3 text-slate-500 hover:text-indigo-400 transition-all group/footer"
+                >
+                <div className="w-8 h-8 rounded-xl bg-white/5 flex items-center justify-center group-hover/footer:bg-indigo-500/10 transition-all duration-300">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clipRule="evenodd" />
+                    </svg>
+                </div>
+                Add File
+                </button>
+            </div>
+            )}
+            {onAddTag && (
+                <button 
+                    onClick={() => {
+                        setShowTagInput(true);
+                        setTimeout(() => {
+                            const noteEl = document.getElementById(`note-${note.id}`);
+                            if (noteEl) noteEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        }, 100);
+                    }}
+                    className="text-[11px] font-black uppercase tracking-[0.2em] flex items-center gap-3 text-slate-500 hover:text-indigo-400 transition-all group/footer"
+                >
+                    <div className="w-8 h-8 rounded-xl bg-white/5 flex items-center justify-center group-hover/footer:bg-indigo-500/10 transition-all duration-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                            <path fillRule="evenodd" d="M17.707 9.293l-5-5a1 1 0 00-1.414 0l-8 8a1 1 0 000 1.414l5 5a1 1 0 001.414 0l8-8a1 1 0 000-1.414zM9 14a1 1 0 11-2 0 1 1 0 012 0z" clipRule="evenodd" />
+                        </svg>
+                    </div>
+                    Tag
+                </button>
+            )}
+        </div>
+        
+        <div className="flex items-center gap-4">
+            <div className="text-[10px] text-slate-700 font-black uppercase tracking-[0.2em]">
+                ID: {note.id.split('-')[0]}
+            </div>
+        </div>
+      </div>
+
+      {/* Decorative footer for root */}
+      {isRoot && (
+          <div className="h-2 bg-gradient-to-r from-indigo-500 via-purple-600 to-indigo-500 w-full rounded-b-3xl opacity-30 blur-[1px]"></div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(NoteCard);

components/VoiceRecorder.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+
+interface VoiceRecorderProps {
+  onTranscription: (text: string) => void;
+  isProcessing: boolean;
+}
+
+export const VoiceRecorder: React.FC<VoiceRecorderProps> = ({ onTranscription, isProcessing }) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (isRecording) {
+      timerRef.current = setInterval(() => {
+        setRecordingTime(prev => prev + 1);
+      }, 1000);
+    } else {
+      if (timerRef.current) clearInterval(timerRef.current);
+      setRecordingTime(0);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [isRecording]);
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mediaRecorder = new MediaRecorder(stream);
+      mediaRecorderRef.current = mediaRecorder;
+      chunksRef.current = [];
+
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+
+      mediaRecorder.onstop = async () => {
+        const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64Audio = (reader.result as string).split(',')[1];
+          handleTranscription(base64Audio);
+        };
+        reader.readAsDataURL(audioBlob);
+        
+        // Stop all tracks
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      mediaRecorder.start();
+      setIsRecording(true);
+    } catch (err) {
+      console.error("Microphone access denied:", err);
+      alert("Mikrofon erişimi reddedildi.");
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+    }
+  };
+
+  const handleTranscription = async (base64Audio: string) => {
+    // We'll use Gemini to transcribe. 
+    // Since we don't have a direct transcription API here, 
+    // we'll send it as a prompt with audio data.
+    try {
+        // This will be handled in App.tsx or a service
+        onTranscription(base64Audio);
+    } catch (error) {
+        console.error("Transcription failed:", error);
+    }
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <AnimatePresence>
+        {isRecording && (
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            className="flex items-center gap-3 bg-red-500/10 border border-red-500/20 px-4 py-2 rounded-2xl"
+          >
+            <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
+            <span className="text-xs font-black text-red-400 font-mono">{formatTime(recordingTime)}</span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <button
+        onClick={isRecording ? stopRecording : startRecording}
+        disabled={isProcessing}
+        className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-500 shadow-lg ${
+          isRecording 
+            ? 'bg-red-500 text-white animate-pulse shadow-red-500/30' 
+            : 'bg-white/5 text-slate-400 hover:bg-indigo-600 hover:text-white border border-white/5'
+        } ${isProcessing ? 'opacity-50 cursor-not-allowed' : ''}`}
+        title={isRecording ? "Kaydı Durdur" : "Sesli Not Al"}
+      >
+        {isProcessing ? (
+          <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
+        ) : isRecording ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clipRule="evenodd" />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clipRule="evenodd" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+};

firebase-blueprint.json

@@ -0,0 +1,173 @@
+{
+  "entities": {
+    "User": {
+      "title": "User",
+      "description": "A user of the application.",
+      "type": "object",
+      "properties": {
+        "email": {
+          "type": "string",
+          "format": "email",
+          "description": "The user's email address."
+        },
+        "createdAt": {
+          "type": "number",
+          "description": "Timestamp when the user was created."
+        }
+      },
+      "required": ["email", "createdAt"]
+    },
+    "Project": {
+      "title": "Project",
+      "description": "A project containing notes.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "The project ID."
+        },
+        "userId": {
+          "type": "string",
+          "description": "The ID of the user who owns the project."
+        },
+        "title": {
+          "type": "string",
+          "description": "The title of the project."
+        },
+        "rootNoteId": {
+          "type": "string",
+          "description": "The ID of the root note for this project."
+        },
+        "createdAt": {
+          "type": "number",
+          "description": "Timestamp when the project was created."
+        },
+        "categoryId": {
+          "type": "string",
+          "description": "Optional ID of the category this project belongs to."
+        },
+        "creatorId": {
+          "type": "string",
+          "description": "The ID of the user who created the project."
+        },
+        "creatorEmail": {
+          "type": "string",
+          "description": "The email of the user who created the project."
+        },
+        "collaborators": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "List of user IDs who are collaborators on this project."
+        }
+      },
+      "required": ["id", "userId", "title", "rootNoteId", "createdAt", "creatorId"]
+    },
+    "Note": {
+      "title": "Note",
+      "description": "A note within a project.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "The note ID."
+        },
+        "userId": {
+          "type": "string",
+          "description": "The ID of the user who owns the note."
+        },
+        "projectId": {
+          "type": "string",
+          "description": "The ID of the project this note belongs to."
+        },
+        "parentId": {
+          "type": ["string", "null"],
+          "description": "The ID of the parent note, or null if it's the root note."
+        },
+        "title": {
+          "type": "string",
+          "description": "The title of the note."
+        },
+        "content": {
+          "type": "string",
+          "description": "The content of the note (Markdown or Image URL)."
+        },
+        "type": {
+          "type": "string",
+          "enum": ["ROOT", "TEXT", "CODE", "IMAGE"],
+          "description": "The type of the note."
+        },
+        "status": {
+          "type": "string",
+          "enum": ["IDLE", "PLANNING", "GENERATING", "COMPLETED", "ERROR"],
+          "description": "The generation status of the note."
+        },
+        "children": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "IDs of child notes."
+        },
+        "timestamp": {
+          "type": "number",
+          "description": "Timestamp when the note was created or last updated."
+        },
+        "attachments": {
+          "type": "string",
+          "description": "JSON stringified array of attachments."
+        },
+        "tags": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "Tags associated with the note."
+        },
+        "linkedNoteIds": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "IDs of linked notes."
+        }
+      },
+      "required": ["id", "userId", "projectId", "title", "content", "type", "status", "children", "timestamp"]
+    },
+    "Category": {
+      "title": "Category",
+      "description": "A category for organizing projects.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "The category ID."
+        },
+        "userId": {
+          "type": "string",
+          "description": "The ID of the user who owns the category."
+        },
+        "name": {
+          "type": "string",
+          "description": "The name of the category."
+        },
+        "color": {
+          "type": "string",
+          "description": "The color associated with the category."
+        }
+      },
+      "required": ["id", "userId", "name", "color"]
+    }
+  },
+  "firestore": {
+    "/users/{userId}": {
+      "schema": { "$ref": "#/entities/User" },
+      "description": "User profiles."
+    },
+    "/projects/{projectId}": {
+      "schema": { "$ref": "#/entities/Project" },
+      "description": "Projects created by users."
+    },
+    "/notes/{noteId}": {
+      "schema": { "$ref": "#/entities/Note" },
+      "description": "Notes created by users."
+    },
+    "/categories/{categoryId}": {
+      "schema": { "$ref": "#/entities/Category" },
+      "description": "Categories created by users."
+    }
+  }
+}

firebase.ts

@@ -0,0 +1,54 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
+import { getFirestore, doc, getDocFromServer } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
+};
+
+// Check if Firebase config is complete to avoid "invalid-api-key" error
+if (!firebaseConfig.apiKey) {
+  console.warn("Firebase API Key is missing. Please check your .env file or environment variables.");
+}
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getFirestore(app, import.meta.env.VITE_FIREBASE_FIRESTORE_DATABASE_ID || '(default)');
+export const googleProvider = new GoogleAuthProvider();
+
+export const signInWithGoogle = async () => {
+  try {
+    const result = await signInWithPopup(auth, googleProvider);
+    return result.user;
+  } catch (error) {
+    console.error("Error signing in with Google", error);
+    throw error;
+  }
+};
+
+export const logOut = async () => {
+  try {
+    await signOut(auth);
+  } catch (error) {
+    console.error("Error signing out", error);
+    throw error;
+  }
+};
+
+// Test connection
+async function testConnection() {
+  try {
+    await getDocFromServer(doc(db, 'test', 'connection'));
+  } catch (error) {
+    if(error instanceof Error && error.message.includes('the client is offline')) {
+      console.error("Please check your Firebase configuration. ");
+    }
+  }
+}
+testConnection();

firestore.rules

@@ -0,0 +1,89 @@
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+
+    // Default deny
+    match /{document=**} {
+      allow read, write: if false;
+    }
+
+    // Helper functions
+    function isSignedIn() {
+      return request.auth != null;
+    }
+
+    function isOwner(userId) {
+      return isSignedIn() && request.auth.uid == userId;
+    }
+
+    function isValidId(id) {
+      return id is string && id.size() <= 128 && id.matches('^[a-zA-Z0-9_\\-]+$');
+    }
+
+    function incoming() {
+      return request.resource.data;
+    }
+
+    function existing() {
+      return resource.data;
+    }
+
+    // Helper for checking project collaboration
+    function isProjectCollaborator(projectId) {
+      let project = get(/databases/$(database)/documents/projects/$(projectId)).data;
+      return isOwner(project.creatorId) || (isSignedIn() && ('collaborators' in project) && (project.collaborators is list) && (request.auth.uid in project.collaborators));
+    }
+
+    // --- Users ---
+    match /users/{userId} {
+      // Allow reading user profiles if signed in (needed for collaborator lookup and sharing)
+      allow read: if isSignedIn();
+      allow create: if isOwner(userId);
+      allow update: if isOwner(userId) && (!('email' in incoming()) || incoming().email == existing().email);
+    }
+
+    // --- Projects ---
+    match /projects/{projectId} {
+      function canReadProject() {
+        return isOwner(resource.data.creatorId) || (request.auth.uid in resource.data.collaborators);
+      }
+
+      function canUpdateProject() {
+        // Owners can update everything. Collaborators can mostly update nothing except status/etc if we had any.
+        // For now, let's allow collaborators to update if they are in the list.
+        return isOwner(resource.data.creatorId) || (request.auth.uid in resource.data.collaborators);
+      }
+
+      allow read: if canReadProject();
+      allow create: if isSignedIn() && incoming().creatorId == request.auth.uid;
+      allow update: if canUpdateProject();
+      allow delete: if isOwner(resource.data.creatorId);
+    }
+
+    // --- Notes ---
+    match /notes/{noteId} {
+      function canReadNote() {
+        return isOwner(resource.data.userId) || isProjectCollaborator(resource.data.projectId);
+      }
+
+      function canWriteNote() {
+        let projectId = request.method == 'create' ? incoming().projectId : existing().projectId;
+        return isOwner(request.auth.uid) || isProjectCollaborator(projectId);
+      }
+
+      allow read: if canReadNote();
+      allow create: if isSignedIn() && incoming().userId == request.auth.uid && isProjectCollaborator(incoming().projectId);
+      allow update: if isSignedIn() && isProjectCollaborator(existing().projectId);
+      allow delete: if isSignedIn() && (isOwner(resource.data.userId) || isProjectCollaborator(resource.data.projectId));
+    }
+
+    // --- Categories ---
+    match /categories/{categoryId} {
+      allow read: if isOwner(resource.data.userId);
+      allow create: if isSignedIn() && incoming().userId == request.auth.uid;
+      allow update: if isOwner(resource.data.userId);
+      allow delete: if isOwner(resource.data.userId);
+    }
+  }
+}

index.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MindSpark - AI Notebook</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#6366f1',
+              secondary: '#4f46e5',
+              dark: '#1e293b',
+              surface: '#334155',
+            },
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+            },
+          },
+        },
+      }
+    </script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+      
+      :root {
+        --bg-deep: #0B0F19;
+        --bg-surface: #0F1117;
+        --accent: #6366f1;
+      }
+
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: var(--bg-deep);
+        color: #f8fafc;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      /* Fluid Typography */
+      html {
+        font-size: 14px;
+      }
+      @media (min-width: 768px) {
+        html { font-size: 15px; }
+      }
+      @media (min-width: 1280px) {
+        html { font-size: 16px; }
+      }
+
+      /* Custom scrollbar */
+      ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent; 
+      }
+      ::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.1); 
+        border-radius: 10px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.2); 
+      }
+
+      /* Animations */
+      @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      .animate-fadeIn {
+        animation: fadeIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+      }
+
+      /* Glassmorphism utilities */
+      .glass {
+        background: rgba(255, 255, 255, 0.03);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+
+      .glass-dark {
+        background: rgba(15, 17, 23, 0.6);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+
+      /* Custom scrollbar for specific elements */
+      .custom-scrollbar::-webkit-scrollbar {
+        width: 4px;
+      }
+      .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: rgba(99, 102, 241, 0.2);
+      }
+      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: rgba(99, 102, 241, 0.4);
+      }
+
+      /* Mermaid Styles */
+      .mermaid-container {
+        width: 100%;
+        overflow-x: auto;
+        background: rgba(255, 255, 255, 0.02);
+        padding: 2rem;
+        border-radius: 1.5rem;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+      .mermaid-container svg {
+        max-width: 100% !important;
+        height: auto !important;
+      }
+      .mermaid-container .node rect, 
+      .mermaid-container .node circle {
+        transition: all 0.3s ease;
+      }
+      .mermaid-container .node:hover rect,
+      .mermaid-container .node:hover circle {
+        filter: brightness(1.2);
+        stroke-width: 3px;
+        stroke: #6366f1;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "MindSpark",
+  "description": "AI-powered smart notebook that transforms your ideas into structured step-by-step guides.",
+  "requestFramePermissions": ["microphone"]
+}

package.json

@@ -1,39 +1,41 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "akıl-defteri",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "tsc --noEmit"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@google/genai": "^1.30.0",
+    "@google/generative-ai": "^0.24.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "firebase": "^12.11.0",
+    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.14.0",
+    "jspdf": "^4.2.0",
+    "lucide-react": "^1.7.0",
+    "mermaid": "^11.14.0",
+    "motion": "^12.38.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "react-zoom-pan-pinch": "^4.0.3",
+    "remark-gfm": "^4.0.1",
+    "vite-plugin-pwa": "^1.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
   }
 }

services/geminiService.ts

@@ -0,0 +1,359 @@
+import { GoogleGenAI, Type, Schema } from "@google/genai";
+import { ProjectPlan, NoteType, StyleMemory } from "../types";
+
+const getAI = () => {
+    const userKey = localStorage.getItem('user_gemini_api_key');
+    const apiKey = userKey || process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+        console.warn("Gemini API Key is missing. Please set it in Settings.");
+    }
+    return new GoogleGenAI({ apiKey: apiKey || 'dummy-key' });
+};
+
+// Helper to compress base64 images to avoid Firestore 1MB limit
+const resizeBase64Image = (base64Str: string, maxWidth = 800, maxHeight = 800): Promise<string> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = base64Str;
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      let width = img.width;
+      let height = img.height;
+
+      if (width > height) {
+        if (width > maxWidth) {
+          height *= maxWidth / width;
+          width = maxWidth;
+        }
+      } else {
+        if (height > maxHeight) {
+          width *= maxHeight / height;
+          height = maxHeight;
+        }
+      }
+
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/jpeg', 0.7));
+      } else {
+        resolve(base64Str);
+      }
+    };
+    img.onerror = () => resolve(base64Str);
+  });
+};
+
+// System instruction for the planner
+const PLANNER_SYSTEM_INSTRUCTION = `
+You are the chief architect of the "MindSpark" system.
+Analyze the user's complex request and plan it like a task distribution for an expert team.
+
+YOUR TASK:
+1. Determine 4-8 steps required for the project.
+2. Assign an "Expert Agent" (assignedAgent) and their "Role" (agentRole) for each step. 
+3. Steps should follow each other and be in a logical flow.
+
+STYLE GUIDE (MEMORY):
+If any past styles or preferences are provided to you, keep this tone and approach in your planning.
+
+AGENT ASSIGNMENT RULES:
+- Determine specific experts based on the project type (Software Developer, Designer, Writer, Analyst, Strategist, etc.).
+- Determine the 'type' property of each step based on the content: 'text', 'code', 'image'.
+- Provide the answer strictly in JSON format. Use English language.
+`;
+
+// Schema for structured JSON output
+const planSchema: Schema = {
+  type: Type.OBJECT,
+  properties: {
+    title: { type: Type.STRING, description: "A creative and engaging main title for the project" },
+    summary: { type: Type.STRING, description: "A short, motivating summary of what this notebook is about." },
+    steps: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          title: { type: Type.STRING, description: "Title of the step" },
+          description: { type: Type.STRING, description: "A short summary of what will be done in this step." },
+          type: { type: Type.STRING, enum: ["text", "code", "image"], description: "Content type" },
+          assignedAgent: { type: Type.STRING, description: "Name of the expert agent taking the task (e.g., 'Code Architect')" },
+          agentRole: { type: Type.STRING, description: "Specific role and responsibility assigned to the agent in this step." },
+        },
+        required: ["title", "description", "type", "assignedAgent", "agentRole"],
+      },
+    },
+  },
+  required: ["title", "summary", "steps"],
+};
+
+const isQuotaError = (error: any): boolean => {
+  const errorStr = JSON.stringify(error).toLowerCase();
+  return (
+    error?.status === 'RESOURCE_EXHAUSTED' ||
+    error?.code === 429 ||
+    errorStr.includes('429') ||
+    errorStr.includes('resource_exhausted') ||
+    errorStr.includes('quota exceeded') ||
+    errorStr.includes('limit reached')
+  );
+};
+
+export const boostPrompt = async (prompt: string): Promise<string> => {
+  try {
+    const response = await getAI().models.generateContent({
+      model: 'gemini-3-flash-preview',
+      contents: `Rewrite and enrich the following text to be a perfect command (prompt) or a great project idea to be given to an AI assistant.
+- If it's a short and simple idea, detail it and add depth.
+- If it's complex and messy, structure and clarify it.
+- Use a professional, inspiring, and highly effective language.
+- Provide only the improved text, do not add any explanations before or after like "Here is the text:".
+
+Original Text:
+${prompt}`,
+    });
+    return response.text ? response.text.trim() : prompt;
+  } catch (error) {
+    console.error("Prompt boost error:", error);
+    if (isQuotaError(error)) {
+        return prompt; // Fallback to original prompt if quota hit
+    }
+    throw error;
+  }
+};
+
+export const transcribeAudio = async (base64Audio: string): Promise<string> => {
+  try {
+    const response = await getAI().models.generateContent({
+      model: 'gemini-2.5-flash',
+      contents: [
+        "Transcribe this audio recording into text. Return only the text, do not provide any other explanation. If the audio is not understandable, leave it blank.",
+        {
+          inlineData: {
+            mimeType: "audio/webm",
+            data: base64Audio
+          }
+        }
+      ]
+    });
+    return response.text ? response.text.trim() : "";
+  } catch (error) {
+    console.error("Transcription error:", error);
+    if (isQuotaError(error)) {
+        throw new Error("AI system is very busy (Quota reached). Please try typing your input as text.");
+    }
+    throw error;
+  }
+};
+
+export const createProjectPlan = async (userPrompt: string, memories: StyleMemory[] = []): Promise<ProjectPlan> => {
+  try {
+    const memoryContext = memories.length > 0 
+      ? `\n\nPAST PREFERENCES AND MEMORY:\n${memories.map(m => `- Project: ${m.projectName}, Style: ${m.styleKeywords.join(', ')}, Summary: ${m.summary}`).join('\n')}\n\nPlease take these styles and tone into account.`
+      : "";
+
+    const response = await getAI().models.generateContent({
+      model: 'gemini-3.1-pro-preview',
+      contents: userPrompt + memoryContext,
+      config: {
+        systemInstruction: PLANNER_SYSTEM_INSTRUCTION,
+        responseMimeType: "application/json",
+        responseSchema: planSchema
+      },
+    });
+
+    if (!response.text) throw new Error("Plan could not be created.");
+    return JSON.parse(response.text) as ProjectPlan;
+  } catch (error) {
+    console.error("Plan Error:", error);
+    if (isQuotaError(error)) {
+        throw new Error("System is very busy right now (Quota limit exceeded). Please try again in a few minutes or use a shorter description.");
+    }
+    throw error;
+  }
+};
+
+export const generateStepContent = async (
+  projectTitle: string,
+  stepTitle: string,
+  stepDescription: string,
+  stepType: NoteType,
+  memories: StyleMemory[] = []
+): Promise<string> => {
+  const memoryContext = memories.length > 0
+    ? `\nPAST STYLE AND TONE:\n${memories.map(m => `- ${m.styleKeywords.join(', ')}`).join(', ')}\nPlease reflect this style and tone in this content as well.`
+    : "";
+
+  const contextPrompt = `
+CONTEXT: We are working on a project named "${projectTitle}".
+CURRENT TASK: "${stepTitle}"
+TASK DETAIL: ${stepDescription}
+${memoryContext}
+
+YOUR MISSION:
+Prepare a detailed, educational, and directly applicable content for this step in the "MindSpark" format.
+When the user reads this page, they should have everything they need to complete this step.
+
+If Type is 'TEXT':
+- Explain the subject in depth.
+- Increase readability using bullet points, lists, and bold text.
+- Speak like a professional mentor.
+
+If Type is 'CODE':
+- Write the necessary code blocks.
+- Explain what the codes do with comment lines or explanations.
+
+Use Markdown format.
+  `;
+
+  try {
+    if (stepType === NoteType.IMAGE) {
+      const imagePrompt = `
+        High quality concept art illustration of: ${stepTitle}.
+        Context: ${stepDescription}.
+        Project Theme: ${projectTitle}.
+        Style: Digital art, highly detailed, cinematic lighting, intricate textures, atmospheric, professional composition, masterpiece, 8k resolution, concept art style.
+        No text, no labels, no watermarks, high quality.
+      `;
+      
+      try {
+          const response = await getAI().models.generateContent({
+            model: 'gemini-2.5-flash-image',
+            contents: { parts: [{ text: imagePrompt }] },
+            config: {
+              imageConfig: {
+                aspectRatio: '16:9',
+              },
+            },
+          });
+          
+          const parts = response.candidates?.[0]?.content?.parts || [];
+          for (const part of parts) {
+            if (part.inlineData) {
+              const base64 = `data:${part.inlineData.mimeType || 'image/jpeg'};base64,${part.inlineData.data}`;
+              return await resizeBase64Image(base64);
+            }
+          }
+      } catch (innerError) {
+          console.error("Image generation failed:", innerError);
+          if (isQuotaError(innerError)) {
+              return "--- Image could not be generated (System Busy / Quota Limit) ---\n" + stepDescription;
+          }
+      }
+      
+      return "--- Image could not be generated ---\n" + stepDescription;
+    } else if (stepType === NoteType.TEXT) {
+      const textPromise = getAI().models.generateContent({
+        model: 'gemini-3-flash-preview',
+        contents: contextPrompt,
+      }).catch(e => {
+          console.error("Text content generation error:", e);
+          if (isQuotaError(e)) {
+              return { text: "Content could not be generated because the system is busy (Quota reached). Please try the 'Regenerate' option later." };
+          }
+          throw e;
+      });
+
+      const imagePrompt = `
+        High quality concept art illustration of: ${stepTitle}.
+        Context: ${stepDescription}.
+        Project Theme: ${projectTitle}.
+        Style: Digital art, highly detailed, cinematic lighting, concept art style, clean composition.
+        No text, no labels, no watermarks, high quality.
+      `;
+
+      const imagePromise = getAI().models.generateContent({
+        model: 'gemini-2.5-flash-image',
+        contents: { parts: [{ text: imagePrompt }] },
+        config: {
+          imageConfig: {
+            aspectRatio: '16:9',
+          },
+        },
+      }).catch(e => {
+        console.error("Image generation failed for text note:", e);
+        return null;
+      });
+
+      const [textResponse, imageResponse] = await Promise.all([textPromise, imagePromise]);
+      let content = (textResponse as any).text || "Content could not be generated.";
+
+      if (imageResponse) {
+          const parts = imageResponse.candidates?.[0]?.content?.parts || [];
+          for (const part of parts) {
+              if (part.inlineData) {
+                  const base64 = `data:${part.inlineData.mimeType || 'image/jpeg'};base64,${part.inlineData.data}`;
+                  const resizedBase64 = await resizeBase64Image(base64);
+                  content = `![${stepTitle}](${resizedBase64})\n\n` + content;
+                  break;
+              }
+          }
+      }
+      return content;
+    } else {
+      // Code generation
+      try {
+          const response = await getAI().models.generateContent({
+            model: 'gemini-3-flash-preview',
+            contents: contextPrompt,
+          });
+          return response.text || "Content could not be generated.";
+      } catch (e) {
+          if (isQuotaError(e)) {
+              return "```\n// Code could not be generated due to system busy.\n// Please try again later.\n```";
+          }
+          throw e;
+      }
+    }
+  } catch (error) {
+    console.error("Content Gen Error:", error);
+    if (isQuotaError(error)) {
+        return "System is very busy right now. Please try this step again later by clicking 'Regenerate'.";
+    }
+    throw error;
+  }
+};
+
+export const chatWithStep = async (
+  projectTitle: string,
+  noteTitle: string,
+  noteContent: string,
+  userQuestion: string,
+  history: any[] = []
+): Promise<string> => {
+  try {
+    const contents = [
+        ...history.map(h => ({
+            role: h.role === 'model' ? 'model' : 'user',
+            parts: h.parts
+        })),
+        { role: 'user', parts: [{ text: userQuestion }] }
+    ];
+
+    const response = await getAI().models.generateContent({
+        model: 'gemini-3-flash-preview',
+        contents: contents,
+        config: {
+            systemInstruction: `You are an expert in the "MindSpark" project. 
+            CONTEXT: We are in the "${noteTitle}" step within the "${projectTitle}" project.
+            CONTENT OF THIS STEP:
+            ${noteContent.substring(0, 1000)}...
+
+            YOUR MISSION: To answer the user's questions about this step, deepen the content, or offer alternative suggestions. 
+            - Provide short, concise, and technically deep answers. 
+            - Be helpful, show the way. 
+            - Use Markdown.`
+        }
+    });
+
+    return response.text || "Sorry, an answer could not be generated.";
+  } catch (error) {
+    console.error("Step Chat Error:", error);
+    if (isQuotaError(error)) {
+        return "Sorry, the system is currently busy (Quota reached). Please ask again in a few minutes.";
+    }
+    throw error;
+  }
+};

src/components/FlowchartView.tsx

@@ -0,0 +1,315 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import mermaid from 'mermaid';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import { Note, NoteType } from '../../types';
+import { chatWithStep } from '../../services/geminiService';
+import ReactMarkdown from 'react-markdown';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface FlowchartViewProps {
+  notes: Record<string, Note>;
+  projectTitle: string;
+  rootNoteId: string;
+}
+
+interface ChatMessage {
+  role: 'user' | 'model';
+  content: string;
+}
+
+const FlowchartView: React.FC<FlowchartViewProps> = ({ notes, projectTitle, rootNoteId }) => {
+  const [svgContent, setSvgContent] = useState<string>('');
+  const [isRendering, setIsRendering] = useState(false);
+  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);
+  const [chatHistories, setChatHistories] = useState<Record<string, ChatMessage[]>>({});
+  const [userInput, setUserInput] = useState('');
+  const [isAsking, setIsAsking] = useState(false);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'dark',
+      securityLevel: 'loose',
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis'
+      }
+    });
+  }, []);
+
+  const generateMermaidCode = useCallback(() => {
+    if (!notes[rootNoteId]) return "";
+
+    let code = "graph TD\n";
+    
+    // Styling
+    code += "classDef root fill:#4f46e5,stroke:#fff,stroke-width:2px,color:#fff,cursor:pointer;\n";
+    code += "classDef text fill:#1e293b,stroke:#475569,stroke-width:1px,color:#cbd5e1,cursor:pointer;\n";
+    code += "classDef code fill:#0f172a,stroke:#3b82f6,stroke-width:1px,color:#60a5fa,cursor:pointer;\n";
+    code += "classDef image fill:#1e293b,stroke:#8b5cf6,stroke-width:1px,color:#a78bfa,cursor:pointer;\n";
+    code += "classDef selected fill:#fbbf24,stroke:#fff,stroke-width:3px,color:#000,cursor:pointer;\n";
+
+    const visited = new Set<string>();
+
+    const processNote = (noteId: string) => {
+      if (visited.has(noteId)) return "";
+      visited.add(noteId);
+
+      const note = notes[noteId];
+      if (!note) return "";
+      
+      let nodeCode = "";
+      const id = note.id.replace(/-/g, '');
+      const title = note.title.replace(/[()"[\]{}]/g, "'"); 
+      
+      // Node definition
+      const isSelected = selectedNoteId === note.id;
+      const styleClass = isSelected ? 'selected' : (
+          note.type === NoteType.ROOT ? 'root' : 
+          note.type === NoteType.CODE ? 'code' : 
+          note.type === NoteType.IMAGE ? 'image' : 'text'
+      );
+
+      if (note.type === NoteType.ROOT) {
+        nodeCode += `  ${id}("${title}"):::${styleClass}\n`;
+      } else {
+        nodeCode += `  ${id}["${title}"]:::${styleClass}\n`;
+      }
+
+      // Connections
+      if (note.children && note.children.length > 0) {
+        note.children.forEach(childId => {
+          const child = notes[childId];
+          if (child) {
+            const childCleanId = child.id.replace(/-/g, '');
+            nodeCode += `  ${id} --> ${childCleanId}\n`;
+            nodeCode += processNote(childId);
+          }
+        });
+      }
+      
+      return nodeCode;
+    };
+
+    code += processNote(rootNoteId);
+    return code;
+  }, [notes, rootNoteId, selectedNoteId]);
+
+  useEffect(() => {
+    const code = generateMermaidCode();
+    if (!code) return;
+
+    let isMounted = true;
+    const renderDiagram = async () => {
+      setIsRendering(true);
+      try {
+        const id = `mermaid-render-${Date.now()}`;
+        const { svg } = await mermaid.render(id, code);
+        if (isMounted) {
+          setSvgContent(svg);
+        }
+      } catch (error) {
+        console.error("Mermaid render error:", error);
+      } finally {
+        if (isMounted) setIsRendering(false);
+      }
+    };
+
+    renderDiagram();
+    return () => { isMounted = false; };
+  }, [generateMermaidCode]);
+
+  // Handle node clicks
+  const handleSvgClick = (e: React.MouseEvent) => {
+    const target = e.target as SVGElement;
+    const node = target.closest('.node');
+    if (node) {
+      const nodeIdClean = node.id.split('-')[0]; // Mermaid nodes have IDs
+      // Map back to our IDs
+      const foundId = Object.keys(notes).find(id => id.replace(/-/g, '') === nodeIdClean);
+      if (foundId) {
+        setSelectedNoteId(foundId);
+      }
+    }
+  };
+
+  const handleSendMessage = async () => {
+    if (!selectedNoteId || !userInput.trim() || isAsking) return;
+
+    const note = notes[selectedNoteId];
+    const currentHistory = chatHistories[selectedNoteId] || [];
+    const newHistory: ChatMessage[] = [...currentHistory, { role: 'user', content: userInput }];
+    
+    setChatHistories(prev => ({ ...prev, [selectedNoteId]: newHistory }));
+    setUserInput('');
+    setIsAsking(true);
+
+    try {
+      const response = await chatWithStep(
+        projectTitle,
+        note.title,
+        note.content,
+        userInput,
+        currentHistory.map(m => ({ role: m.role, parts: [{ text: m.content }] }))
+      );
+
+      setChatHistories(prev => ({
+        ...prev,
+        [selectedNoteId]: [...newHistory, { role: 'model', content: response }]
+      }));
+    } catch (error) {
+      console.error("Chat error:", error);
+    } finally {
+      setIsAsking(false);
+    }
+  };
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistories, selectedNoteId]);
+
+  const selectedNote = selectedNoteId ? notes[selectedNoteId] : null;
+
+  return (
+    <div className="w-full h-full min-h-[600px] bg-slate-900/50 backdrop-blur-xl rounded-[2.5rem] border border-white/5 flex flex-col overflow-hidden relative">
+      <div className="flex items-center justify-between p-8 border-b border-white/5 bg-white/5">
+        <div>
+          <h3 className="text-xl font-black text-white tracking-tight flex items-center gap-3">
+             <div className="w-8 h-8 bg-indigo-500 rounded-xl flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
+                </svg>
+             </div>
+             Akıl Haritası Tuvali
+          </h3>
+          <p className="text-sm text-slate-400 mt-1">"{projectTitle}" projesinin etkileşimli haritası</p>
+        </div>
+        <div className="flex items-center gap-4">
+            {isRendering && (
+                <div className="text-[10px] text-indigo-400 font-black tracking-widest animate-pulse uppercase">Modelleniyor...</div>
+            )}
+            <div className="flex bg-black/20 p-1 rounded-xl border border-white/5">
+                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-500/20">
+                    <div className="w-2 h-2 rounded-full bg-indigo-400"></div>
+                    <span className="text-[10px] text-indigo-300 font-black uppercase tracking-wider">Kök Bilgi</span>
+                </div>
+            </div>
+        </div>
+      </div>
+      
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Canvas Area */}
+        <div className="flex-1 bg-[#0F1117] relative cursor-grab active:cursor-grabbing" onClick={handleSvgClick}>
+            <TransformWrapper
+                initialScale={1}
+                minScale={0.5}
+                maxScale={3}
+                centerOnInit
+            >
+                {({ zoomIn, zoomOut, resetTransform }) => (
+                    <>
+                        <div className="absolute top-4 left-4 z-10 flex flex-col gap-2">
+                            <button onClick={() => zoomIn()} className="p-3 bg-white/5 hover:bg-white/10 text-white rounded-2xl border border-white/5 transition-all"><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" /></svg></button>
+                            <button onClick={() => zoomOut()} className="p-3 bg-white/5 hover:bg-white/10 text-white rounded-2xl border border-white/5 transition-all"><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" /></svg></button>
+                            <button onClick={() => resetTransform()} className="p-3 bg-white/5 hover:bg-white/10 text-white rounded-2xl border border-white/10 transition-all font-black text-[10px] uppercase">Sıfırla</button>
+                        </div>
+                        <TransformComponent wrapperClass="!w-full !h-full" contentClass="!w-full !h-full flex items-center justify-center">
+                            <div 
+                                className="mermaid-container p-20"
+                                dangerouslySetInnerHTML={{ __html: svgContent }}
+                            ></div>
+                        </TransformComponent>
+                    </>
+                )}
+            </TransformWrapper>
+        </div>
+
+        {/* AI Chat Assistant Sidebar */}
+        <AnimatePresence>
+            {selectedNote && (
+                <motion.div 
+                    initial={{ x: 400 }}
+                    animate={{ x: 0 }}
+                    exit={{ x: 400 }}
+                    className="w-96 bg-[#161B22] border-l border-white/5 flex flex-col shadow-2xl z-20"
+                >
+                    <div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-indigo-500/10 text-indigo-400 rounded-2xl flex items-center justify-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clipRule="evenodd" /></svg>
+                            </div>
+                            <div className="min-w-0">
+                                <h4 className="text-white font-black text-sm truncate">{selectedNote.title}</h4>
+                                <p className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Adım Asistanı</p>
+                            </div>
+                        </div>
+                        <button onClick={() => setSelectedNoteId(null)} className="p-2 text-slate-500 hover:text-white transition-colors">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" /></svg>
+                        </button>
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar bg-[#0D1117]">
+                        {(!chatHistories[selectedNoteId || ''] || chatHistories[selectedNoteId || ''].length === 0) && (
+                            <div className="h-full flex flex-col items-center justify-center text-center opacity-40">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                                </svg>
+                                <p className="text-sm font-medium">Bu adım hakkında<br/>AI asistanına soru sor.</p>
+                            </div>
+                        )}
+                        {chatHistories[selectedNoteId || '']?.map((msg, idx) => (
+                            <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                                <div className={`max-w-[85%] px-4 py-3 rounded-2xl text-sm ${msg.role === 'user' ? 'bg-indigo-600 text-white font-medium' : 'bg-white/5 text-slate-200 border border-white/5'}`}>
+                                    <div className="markdown-body text-xs prose-invert leading-relaxed">
+                                        <ReactMarkdown>
+                                            {msg.content}
+                                        </ReactMarkdown>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                        {isAsking && (
+                            <div className="flex justify-start">
+                                <div className="bg-white/5 px-4 py-3 rounded-2xl flex items-center gap-2">
+                                    <div className="flex gap-1">
+                                        <div className="w-1 h-1 bg-slate-500 rounded-full animate-bounce"></div>
+                                        <div className="w-1 h-1 bg-slate-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
+                                        <div className="w-1 h-1 bg-slate-500 rounded-full animate-bounce [animation-delay:0.4s]"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        <div ref={chatEndRef} />
+                    </div>
+
+                    <div className="p-4 border-t border-white/5 bg-[#0F1117]">
+                        <div className="relative group">
+                            <input 
+                                type="text"
+                                value={userInput}
+                                onChange={(e) => setUserInput(e.target.value)}
+                                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+                                placeholder="Bir şey sor..."
+                                className="w-full bg-white/5 border border-white/10 rounded-2xl px-5 py-4 text-sm text-white focus:outline-none focus:border-indigo-500 transition-all pr-12"
+                            />
+                            <button 
+                                onClick={handleSendMessage}
+                                disabled={isAsking || !userInput.trim()}
+                                className="absolute right-2 top-1/2 -translate-y-1/2 p-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:hover:bg-indigo-600 rounded-xl text-white transition-all shadow-lg shadow-indigo-600/20"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" /></svg>
+                            </button>
+                        </div>
+                        <p className="text-[10px] text-center text-slate-600 mt-3 font-bold uppercase tracking-widest">Gemini 3 Flash Pro</p>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default FlowchartView;

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "vite/client"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,92 @@
+export enum NoteType {
+  ROOT = 'ROOT',
+  TEXT = 'TEXT',
+  CODE = 'CODE',
+  IMAGE = 'IMAGE',
+}
+
+export enum GenerationStatus {
+  IDLE = 'IDLE',
+  PLANNING = 'PLANNING',
+  GENERATING = 'GENERATING',
+  COMPLETED = 'COMPLETED',
+  ERROR = 'ERROR',
+}
+
+export interface NoteStep {
+  title: string;
+  description: string;
+  type: 'text' | 'code' | 'image';
+  agentRole?: string;
+  assignedAgent?: string;
+}
+
+export interface ProjectPlan {
+  title: string;
+  summary: string;
+  steps: NoteStep[];
+}
+
+export interface Category {
+  id: string;
+  name: string;
+  color: string;
+}
+
+export interface Attachment {
+  id: string;
+  type: 'image' | 'audio' | 'file';
+  url: string; // Base64 data URL
+  name: string;
+}
+
+export interface Note {
+  id: string;
+  projectId: string;
+  parentId: string | null;
+  title: string;
+  content: string; // Markdown or Image URL
+  type: NoteType;
+  status: GenerationStatus;
+  children: string[]; // IDs of children
+  timestamp: number;
+  attachments?: Attachment[];
+  tags?: string[];
+  linkedNoteIds?: string[];
+  isTask?: boolean;
+  isCompleted?: boolean;
+  dueDate?: number;
+  agentRole?: string;
+  assignedAgent?: string;
+  lastEditedBy?: string;
+  lastEditedAt?: number;
+}
+
+export interface StyleMemory {
+  id: string;
+  userId: string;
+  projectName: string;
+  styleKeywords: string[];
+  summary: string;
+  timestamp: number;
+}
+
+export interface AITemplate {
+  id: string;
+  name: string;
+  prompt: string;
+  icon: string;
+}
+
+export interface Project {
+  id: string;
+  title: string;
+  summary?: string;
+  originalPrompt?: string;
+  rootNoteId: string;
+  createdAt: number;
+  categoryId?: string;
+  creatorId: string;
+  creatorEmail?: string;
+  collaborators?: string[]; // Array of user IDs
+}

utils/sanitize.ts

@@ -0,0 +1,42 @@
+import { Note, Project, NoteType, GenerationStatus } from '../types';
+
+export const sanitizeProject = (p: any, userId: string): Project & { userId: string } => ({
+    id: String(p.id || crypto.randomUUID()),
+    userId: String(userId),
+    title: String(p.title || 'İsimsiz Proje').substring(0, 100),
+    rootNoteId: String(p.rootNoteId || crypto.randomUUID()),
+    createdAt: typeof p.createdAt === 'number' ? p.createdAt : Date.now(),
+    creatorId: String(p.creatorId || userId),
+    creatorEmail: String(p.creatorEmail || ''),
+    collaborators: Array.isArray(p.collaborators) ? p.collaborators.map(String) : [],
+    ...(p.summary ? { summary: String(p.summary).substring(0, 1000) } : {}),
+    ...(p.originalPrompt ? { originalPrompt: String(p.originalPrompt).substring(0, 5000) } : {}),
+    ...(p.categoryId ? { categoryId: String(p.categoryId) } : {})
+});
+
+export const sanitizeNote = (n: any, userId: string): Note & { userId: string } => ({
+    id: String(n.id || crypto.randomUUID()),
+    userId: String(userId),
+    projectId: String(n.projectId || crypto.randomUUID()),
+    ...(n.parentId ? { parentId: String(n.parentId) } : { parentId: null }),
+    title: String(n.title || 'İsimsiz Not').substring(0, 200),
+    content: String(n.content || '').substring(0, 1000000),
+    type: ['ROOT', 'TEXT', 'CODE', 'IMAGE'].includes(n.type) ? n.type : NoteType.TEXT,
+    status: ['IDLE', 'PLANNING', 'GENERATING', 'COMPLETED', 'ERROR'].includes(n.status) ? n.status : GenerationStatus.IDLE,
+    children: Array.isArray(n.children) ? n.children.map(String).slice(0, 1000) : [],
+    timestamp: typeof n.timestamp === 'number' ? n.timestamp : Date.now(),
+    lastEditedBy: String(n.lastEditedBy || userId),
+    lastEditedAt: typeof n.lastEditedAt === 'number' ? n.lastEditedAt : Date.now(),
+    ...(Array.isArray(n.attachments) ? { attachments: n.attachments.slice(0, 100) } : {}),
+    ...(Array.isArray(n.tags) ? { tags: n.tags.map(String).slice(0, 50) } : {}),
+    ...(Array.isArray(n.linkedNoteIds) ? { linkedNoteIds: n.linkedNoteIds.map(String).slice(0, 100) } : {}),
+    ...(n.agentRole ? { agentRole: String(n.agentRole).substring(0, 100) } : {}),
+    ...(n.assignedAgent ? { assignedAgent: String(n.assignedAgent).substring(0, 50) } : {})
+});
+
+export const sanitizeCategory = (c: any, userId: string) => ({
+    id: String(c.id || crypto.randomUUID()),
+    userId: String(userId),
+    name: String(c.name || 'İsimsiz Kategori').substring(0, 50),
+    color: String(c.color || '#6366f1').substring(0, 20)
+});

vite.config.ts

@@ -0,0 +1,51 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [
+        react(),
+        VitePWA({
+          registerType: 'autoUpdate',
+          includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
+          workbox: {
+            maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+          },
+          manifest: {
+            name: 'MindSpark',
+            short_name: 'MindSpark',
+            description: 'AI-powered smart notebook',
+            theme_color: '#0B0F19',
+            icons: [
+              {
+                src: 'pwa-192x192.png',
+                sizes: '192x192',
+                type: 'image/png'
+              },
+              {
+                src: 'pwa-512x512.png',
+                sizes: '512x512',
+                type: 'image/png'
+              }
+            ]
+          }
+        })
+      ],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});