FlowWrite Platform: Complete Guide

┌─────────────────────────────────────────────────────────────┐
│                    BROWSER WINDOW                           │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │           LAYER 4 — AI SYSTEM (silent)               │  │
│  │   3s debounce → paragraph detection → API call       │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                             │
│  ┌───────────┐  ┌────────────────────────────────────────┐ │
│  │  LAYER 3  │  │     LAYER 1 — TRANSPARENT TEXTAREA     │ │
│  │   GUTTER  │  │  (handles all keyboard input & cursor) │ │
│  │  Numbers  │  ├────────────────────────────────────────┤ │
│  │  ▸ Fold   │  │   LAYER 2 — RICH RENDERING OVERLAY     │ │
│  │  buttons  │  │  (bold, italic, color, code blocks)    │ │
│  └───────────┘  └────────────────────────────────────────┘ │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐  │
│  │           FOOTER STATS BAR (fades in/out)            │  │
│  │    Title · Saved · 4m · 812w · 23p · 187L · 4391C   │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

T+0ms      You type: "The quick brown fox"
T+1ms      localStorage: draft saved instantly (browser storage)
T+700ms    Debounce timer fires — auto-save triggered
T+701ms    PATCH /api/documents/42 sent to server
T+850ms    Server: SQLite database updated
T+851ms    Server: data/backups/doc_42.json written (JSON backup)
T+852ms    Server: data/backups/markdown/My_Doc_42.md written
T+860ms    Footer: ✓ Saved (green check appears)
T+860ms    localStorage draft deleted (server save confirmed)

// Layer 1: localStorage (instant, every keystroke)
// Layer 2: 700ms debounce server auto-save
// Layer 3: Ctrl+S manual immediate save
// Layer 4: navigator.sendBeacon() on tab close (beforeunload)

// If DB is lost: server startup runs syncAndRestoreDiskBackups()
// Reads all JSON backups → re-inserts missing documents
// ZERO DATA LOSS — disk always mirrors the database

User types: "consciousness"

Step 1: 300ms debounce fires
Step 2: GET /api/search?q=consciousness
Step 3: SQL LIKE query across title AND content of ALL documents
Step 4: Returns up to 10 results with:
        - documentTitle, matchIndex, lineNumber
        - matchCount (total occurrences in doc)
        - snippet (120 chars around the match)
        - relevance (1.0 title match, 0.7 content match)

Step 5: User clicks a result →
        Switch to that document
        Scroll to exact character position of match
        Highlight the matching text
        SearchNavHeader shows "1 of 14 matches"
        ← → arrows jump between all occurrences
        Escape closes the search navigation bar

Original document: 1,200 words · Max chunk size: 450 words

STEP 1: Split at paragraph boundaries (2+ newlines)
        Store exact separator strings for lossless reassembly

STEP 2: Group paragraphs into chunks ≤ 450 words each
        Never split mid-paragraph (would break sentence context)
        Result: 3 chunks of 440, 447, 313 words

STEP 3: Build overlap tails — last 30 words of each chunk
        Passed as context to the next chunk's AI prompt
        Prevents continuity breaks at chunk boundaries

STEP 4: Process in parallel (Gemini/Groq: 4 at a time)
        [Chunk 1 + Chunk 2] → sent simultaneously → ~800ms
        [Chunk 3] → sent after → ~400ms
        If a chunk fails: original text used as fallback

STEP 5: Reassemble with exact original separators
        chunk1_result + sep1 + chunk2_result + sep2 + chunk3_result
        Total time for 1,200 words: ~1.2 seconds

// RAW AI OUTPUT (before sanitizer):
"Here is the corrected version of your text:

The quick brown fox jumped over the lazy dog."

// STAGE 1: Strip ChatGPT <start>...<end> markers
// STAGE 2: Strip XML wrapper tags (<output>, <corrected_text>, etc.)
// STAGE 3: Strip markdown code fences (``` ... ```)
// STAGE 4: Strip conversational preambles
//          "Here is the corrected version:" → REMOVED
//          "Sure! Here's the improved text:" → REMOVED
//          "Certainly, here is the revised passage:" → REMOVED
// STAGE 5: Strip outer wrapping quotes ("..." or '...')

// CLEAN OUTPUT (after sanitizer):
The quick brown fox jumped over the lazy dog.

onContentChange() → debounce(3000ms) → runDeltaFix()

runDeltaFix():
  if (!autoCorrect) return                  // Auto-fix disabled
  if (normCurrent === normLast) return      // No meaningful change
  if (charDelta < 5) return                 // Change too tiny

  paragraph = getParagraphAtCursor()        // Only the current para
  result = await POST("/api/ai/grammar-fix", { text: paragraph })

  if (content !== contentAtCallStart) return  // User typed → discard

  fixed = content.slice(0, para.start)
        + result.corrected
        + content.slice(para.end)

  setContent(fixed)    // Silent update — cursor preserved

// EXAMPLE:
// You write: "She walkd into the room and it were quiet."
// 3 seconds pass...
// AI receives just that paragraph
// AI returns: "She walked into the room and it was quiet."
// Document silently updated. Amber dot → Green dot → Gone.

// AUTOCOMPLETE PROMPT (actual prompt used in FlowWrite)

Task: Write a natural 1-2 sentence continuation.

Background context (style reference):
[Last 600 characters of document for tone/topic context]

Rules:
1. Continue DIRECTLY from the last word — no gap
2. Match tone, tense, vocabulary, writing style seamlessly
3. Do NOT repeat any text from the current writing
4. Return ONLY the continuation text — no wrappers

Current writing:
"The algorithm processes each node in the tree by visiting
 its left subtree first,"

// AI returns:
" then the root node, and finally the right subtree —
  following the standard in-order traversal pattern."

MODE A — FIX
  Sends selection to grammar pipeline
  Rules: fix errors, preserve every word's meaning
  Before: "She don't know what happen. Everyone confuse."
  After:  "She doesn't know what happened. Everyone was confused."

MODE B — REWRITE  (prompts for instruction)
  Instruction examples that work:
  · "make it more concise"       → tightens sentences
  · "formal academic tone"       → elevates vocabulary
  · "simplify for a 12-year-old" → removes jargon
  · "more dramatic and emotional"→ heightens tension
  · "convert to bullet points"   → restructures as list

  Before: "The implementation of the aforementioned algorithmic
           solution necessitates comprehensive understanding..."
  Instruction: "make it simple and direct"
  After:  "To implement this algorithm, you need to understand
           how it works."

MODE C — FORMAT
  Structural cleanup ONLY — zero word changes
  Fixes: irregular spacing, inconsistent indentation,
         excessive blank lines, mis-aligned lists
  Temperature: 0.0 (completely deterministic)

═══ FUNDAMENTAL THEOREM OF CALCULUS ════════════════════════

If F is the antiderivative of f on [a, b]:

  ∫[a to b] f(x) dx = F(b) - F(a)

Connects differentiation and integration as inverse operations.

═══ QUADRATIC FORMULA ══════════════════════════════════════

For ax² + bx + c = 0:

        -b ± √(b² - 4ac)
  x  =  ─────────────────
                2a

Discriminant:
  b² - 4ac > 0  →  Two distinct real roots
  b² - 4ac = 0  →  One repeated real root
  b² - 4ac < 0  →  Two complex conjugate roots

═══ EULER'S IDENTITY ═══════════════════════════════════════

  e^(iπ) + 1 = 0

Five fundamental constants in one equation:
  e = Euler's number ≈ 2.71828...
  i = imaginary unit (√-1)
  π = pi ≈ 3.14159...

═══ NORMAL DISTRIBUTION (Gaussian) ═════════════════════════

Probability density function:

         1              (x - μ)²
f(x) = ─────── · exp(- ─────────)
       σ√(2π)            2σ²

68-95-99.7 Rule:
  ±1σ covers 68.27% of all values
  ±2σ covers 95.45% of all values
  ±3σ covers 99.73% of all values

═══ BAYES' THEOREM ════════════════════════════════════════

        P(B|A) × P(A)
P(A|B) = ─────────────────
               P(B)

Real example: A medical test with 99% accuracy for a disease
with 1% prevalence. If you test positive → P(disease) ≈ 50%.
This is why Bayes matters in medicine — the prior matters.

═══ BIG-O NOTATION ════════════════════════════════════════

O(1)      Constant     Array index access
O(log n)  Logarithmic  Binary search
O(n)      Linear       Linear scan, array sum
O(n log n) Linearithmic Merge sort, heap sort
O(n²)     Quadratic    Bubble sort, naive nested loops
O(2ⁿ)     Exponential  Recursive Fibonacci (naive)
O(n!)     Factorial    Brute-force travelling salesman

═══ MATRIX MULTIPLICATION (2×2) ════════════════════════════

  [a  b]   [e  f]   [ae+bg  af+bh]
  [c  d] × [g  h] = [ce+dg  cf+dh]

Determinant:  |a  b|  =  ad - bc
              |c  d|

Inverse (2×2):
       1    [ d  -b]
  A⁻¹ = ─── [-c   a]    (only if det ≠ 0)
           ad-bc

═══ EIGENVALUES ════════════════════════════════════════════

  A·v = λ·v  where v ≠ 0

Find λ: det(A - λI) = 0

Example: A = [3  1]
             [0  2]

det([3-λ  1 ]) = (3-λ)(2-λ) = 0
    [0   2-λ])

Eigenvalues: λ = 3 or λ = 2

═══ DOT AND CROSS PRODUCT ══════════════════════════════════

Dot: u·v = |u||v|cos(θ) = a₁b₁ + a₂b₂ + a₃b₃
Cross: u × v = [u_y·v_z - u_z·v_y,
                u_z·v_x - u_x·v_z,
                u_x·v_y - u_y·v_x]

interface Document {
  id: number;
  title: string;
  content: string;
  wordCount: number;
  createdAt: string;
  updatedAt: string;
}

async function fetchDocument(id: number): Promise<Document> {
  const response = await fetch(`/api/documents/${id}`);
  if (!response.ok) {
    throw new Error(`Failed: ${response.statusText}`);
  }
  return response.json();
}

const doc = await fetchDocument(42);
console.log(`Loaded: ${doc.title} (${doc.wordCount} words)`);

def chunk_text(text: str, max_words: int = 450) -> list[str]:
    """Split text at paragraph boundaries into chunks."""
    paragraphs = text.split('\n\n')
    chunks = []
    current_chunk = []
    current_word_count = 0

    for paragraph in paragraphs:
        words = len(paragraph.split())
        if current_word_count + words > max_words and current_chunk:
            chunks.append('\n\n'.join(current_chunk))
            current_chunk = [paragraph]
            current_word_count = words
        else:
            current_chunk.append(paragraph)
            current_word_count += words

    if current_chunk:
        chunks.append('\n\n'.join(current_chunk))
    return chunks

-- Get all documents with version count and last snapshot time
SELECT
    d.id,
    d.title,
    d.word_count,
    d.updated_at,
    COUNT(v.id) AS version_count,
    MAX(v.created_at) AS last_snapshot_at
FROM documents d
LEFT JOIN document_versions v ON v.document_id = d.id
GROUP BY d.id, d.title, d.word_count, d.updated_at
ORDER BY d.updated_at DESC
LIMIT 20;

:root {
  --bg: #080808;
  --surface: #111111;
  --accent: #d4a853;
  --text: #e6e6e6;
}

.editor-canvas {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 24px;
  line-height: 1.625;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  caret-color: var(--accent);
}

.fw-code-block {
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="format" content="prash/1.0">
  <title>My Document – FlowWrite</title>
  <!-- Google Fonts: EB Garamond + Inter + JetBrains Mono -->
  <style>
    /* Full dark luxury CSS: 200+ lines */
    /* Variables, layout, typography, tables, code blocks */
  </style>

  <!-- ★ THE KEY: Embedded JSON for perfect re-import ★ -->
  <script type="application/json" id="prash-data">
  {
    "flowwrite": true,
    "version": "1.0.0",
    "metadata": {
      "title": "My Document",
      "wordCount": 3421,
      "exportedAt": "2024-01-15T14:32:00Z",
      "format": "prash/1.0"
    },
    "content": "Full raw document text here...",
    "formattingMap": [
      { "start": 0, "end": 18, "bold": true, "color": "#fbbf24" },
      { "start": 120, "end": 180, "italic": true }
    ]
  }
  </script>
</head>
<body>
  <header> sticky header: brand + stats + export date </header>
  <main>
    <h1 class="doc-title">My Document</h1>
    <div class="doc-body">
      <!-- Plain text → div.line elements -->
      <!-- Code blocks → div.fw-code-block -->
      <!-- HTML blocks → div.fw-html-block -->
      <!-- Tables → div.fw-table-container -->
    </div>
  </main>
  <footer> title · FlowWrite badge </footer>
  <script> fwCopyCode() function </script>
</body>
</html>

function exportAsPdf(title, content, formattingMap, foldStorage) {

  // Step 1: Expand all collapsed code blocks
  const expanded = expandFoldPlaceholders(content, foldStorage);

  // Step 2: Generate exact same HTML as .html export
  let html = generateDocumentHtml(title, expanded, formattingMap);

  // Step 3: Inject A4 print CSS before </style>
  const printCss = `
    @page { size: A4; margin: 18mm 22mm }
    * { print-color-adjust: exact !important }
    @media print {
      body { background: var(--bg) !important }  /* Keep dark! */
      .doc-body .line { page-break-inside: avoid }
      .fw-code-block { page-break-inside: avoid }
      thead { display: table-header-group }       /* Repeat on pages */
      img, figure { page-break-inside: avoid }
    }
  `;
  html = html.replace('</style>', printCss + '\n</style>');

  // Step 4: Inject PDF bar (screen-only) before </body>
  // [✦ FlowWrite — PDF Preview] [? How to save] [⬇ Download] [⌘ Print]

  // Step 5: Build Blob + open in new tab
  const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
  const win = window.open(URL.createObjecturl(blob), '_blank');

  // Step 6: Auto-trigger window.print() after fonts load
  // document.fonts.ready.then(() => setTimeout(window.print, 700))

  // Step 7: If popup blocked → direct .html file download fallback
  if (!win || win.closed) { /* trigger <a> download instead */ }
}

function parseUploadedFile(rawText, filename) {
  const fallbackTitle = filename.replace(/\.(prash|txt|html)$/i, '');

  // Step 1: Find embedded JSON in .prash / .html
  const match = rawText.match(
    /<script[^>]+id="prash-data"[^>]*>([\s\S]*?)<\/script>/i
  );

  if (match) {
    const data = JSON.parse(match[1].trim());
    if (data?.flowwrite && data.content !== undefined) {
      return {
        title:         data.metadata?.title || fallbackTitle,
        content:       data.content,      // ← full raw document text
        formattingMap: data.formattingMap  // ← all formatting spans
      };
      // ROUND-TRIP FIDELITY: content + formattingMap preserved
      // Export → Import = byte-for-byte identical to original
    }
  }

  // Step 2: Legacy raw JSON format
  // Step 3: Plain text fallback (no formattingMap)
  return { title: fallbackTitle, content: rawText, formattingMap: [] };
}

/* ── COLOR PALETTE ─────────────────────────────────── */
--bg:         #080808   /* near-black, not pure black */
--surface:    #111111   /* panels, code block backgrounds */
--surface-2:  #161616   /* table headers, code headers */
--border:     #1e1e1e   /* primary — very subtle */
--border-2:   #2c2c2c   /* secondary — slightly visible */
--text:       #e6e6e6   /* warm off-white (not harsh white) */
--text-muted: #888888   /* secondary text */
--accent:     #d4a853   /* gold — the FlowWrite signature */
--green:      #4ade80   /* success, saved, AI fixed */

/* ── TYPOGRAPHY ────────────────────────────────────── */
Body font:    EB Garamond, 24px, line-height 1.625 (editor)
              EB Garamond, 22px, line-height 1.9   (export)
Title font:   EB Garamond, 2.8rem, weight 500
UI font:      Inter, 10-14px, weight 400/500/600/700
Mono font:    JetBrains Mono — code, stats, labels

/* ── LAYOUT ────────────────────────────────────────── */
Editor content:  max-width 760px, centered
Export content:  max-width 820px, padding 72px 40px
Panel:           width 340px, slides from left
Line length:     ~65-70 chars (optimal for reading)

/* ── ANIMATIONS ────────────────────────────────────── */
Panel slide-in:     Spring, damping 28, stiffness 240
Selection bar:      Spring, damping 24, stiffness 300
AI badge pulse:     keyframes, 1.4s ease-in-out infinite
Footer fade:        opacity 1.0 ↔ 0.2 based on mouse idle
Transition speed:   400ms ease (most UI transitions)