Notes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notes</title>
<style>
</style>
</head>
<body>
<div id="header">
  <div class="header-left">
    <button id="sidebar-toggle" class="icon-btn" title="Toggle sidebar">☰</button>
    <span class="app-title">Notes</span>
  </div>
  <div class="header-center">
    <input id="search-input" type="text" placeholder="Search notes..." class="search-input">
  </div>
  <div class="header-right">
    <button id="theme-toggle" class="icon-btn" title="Toggle dark theme">◐</button>
  </div>
</div>
<div id="layout">
  <div id="sidebar">
    <div id="sidebar-toolbar">
      <button id="new-notebook-btn" class="btn small-btn" title="New notebook">＋ Notebook</button>
    </div>
    <div id="notebook-tree"></div>
  </div>
  <div id="sidebar-resize-handle" class="resize-handle vertical"></div>
  <div id="note-list-pane">
    <div id="note-list-toolbar">
      <div class="note-list-title"></div>
      <div class="note-list-actions">
        <button id="sort-toggle" class="btn small-btn" title="Sort order">Sort ▾</button>
        <button id="new-note-btn" class="btn small-btn" title="New note">＋ Note</button>
      </div>
    </div>
    <div id="note-list"></div>
  </div>
  <div id="editor-resize-handle" class="resize-handle vertical"></div>
  <div id="editor-pane">
    <div id="editor-toolbar" class="toolbar hidden">
      <div class="toolbar-group">
        <button data-command="bold" class="toolbar-btn" title="Bold (Ctrl+B)"><b>B</b></button>
        <button data-command="italic" class="toolbar-btn" title="Italic (Ctrl+I)"><i>I</i></button>
        <button data-command="underline" class="toolbar-btn" title="Underline (Ctrl+U)">U̲</button>
        <button data-command="strikeThrough" class="toolbar-btn" title="Strikethrough">S̶</button>
      </div>
      <div class="toolbar-group">
        <button data-command="code" class="toolbar-btn" title="Inline code">&lt;&gt;</button>
        <button data-command="h1" class="toolbar-btn" title="Heading 1">H1</button>
        <button data-command="h2" class="toolbar-btn" title="Heading 2">H2</button>
        <button data-command="h3" class="toolbar-btn" title="Heading 3">H3</button>
      </div>
      <div class="toolbar-group">
        <button data-command="insertUnorderedList" class="toolbar-btn" title="Bullet list">•</button>
        <button data-command="insertOrderedList" class="toolbar-btn" title="Numbered list">1.</button>
        <button data-command="checklist" class="toolbar-btn" title="Checklist">☐</button>
        <button data-command="blockquote" class="toolbar-btn" title="Blockquote">❝</button>
        <button data-command="insertHorizontalRule" class="toolbar-btn" title="Horizontal rule">—</button>
      </div>
      <div class="toolbar-group">
        <button id="undo-btn" class="toolbar-btn" title="Undo (Ctrl+Z)">↩</button>
        <button id="redo-btn" class="toolbar-btn" title="Redo (Ctrl+Shift+Z)">↪</button>
      </div>
    </div>
    <div id="editor-meta" class="hidden">
      <input id="note-title-input" type="text" placeholder="Untitled" class="note-title-input">
      <div id="note-tags"></div>
      <div id="note-actions">
        <button id="pin-btn" class="icon-btn" title="Pin">📌</button>
        <button id="duplicate-btn" class="icon-btn" title="Duplicate">⧉</button>
        <button id="move-btn" class="icon-btn" title="Move">↗</button>
        <button id="delete-btn" class="icon-btn" title="Delete">🗑</button>
      </div>
    </div>
    <div id="editor-content" class="hidden"></div>
    <div id="editor-empty-state" class="empty-state">Select or create a note</div>
    <div id="move-notebook-menu" class="menu hidden"></div>
  </div>
</div>
<div id="save-indicator" class="save-indicator hidden">Saved</div>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
// Entry point. Runs after the DOM is parsed and after any classic
// <script> imports, so document queries and CDN globals are available.
// Import your other modules from here.
Object.defineProperty(exports, "__esModule", { value: true });
exports.start = start;
function start() {
    // Replace this with the real startup sequence.
}
start();
};

// ── module: src/state.ts ──
__mods["src/state.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VIRTUAL_IDS = exports.TRASH_ID = exports.ALL_NOTEBOOKS_ID = exports.TAG_COLORS = exports.NOTE_KEY = exports.NOTEBOOK_KEY = exports.STORAGE_KEY = exports.SNIPPET_LENGTH = exports.AUTO_SAVE_DEBOUNCE_MS = exports.FONTS = exports.COLORS = void 0;
exports.loadState = loadState;
exports.saveState = saveState;
exports.createNotebook = createNotebook;
exports.createNote = createNote;
exports.defaultState = defaultState;
exports.stripHtmlTags = stripHtmlTags;
exports.extractSnippet = extractSnippet;
exports.formatTimestamp = formatTimestamp;
exports.sanitizeHtml = sanitizeHtml;
exports.findNote = findNote;
exports.findNotebook = findNotebook;
exports.getNotesForView = getNotesForView;
exports.getAllTags = getAllTags;
exports.pushUndo = pushUndo;
exports.undoCurrentNote = undoCurrentNote;
exports.redoCurrentNote = redoCurrentNote;
// ===== TUNABLE CONSTANTS =====
exports.COLORS = {
    light: {
        bg: '#faf8f6',
        sidebarBg: '#f2efec',
        sidebarHover: '#e9e5e0',
        sidebarActive: '#e2ddd7',
        border: '#e5e0da',
        text: '#2c2a28',
        textSecondary: '#6b6660',
        accent: '#5b4f8b',
        accentHover: '#4a3f74',
        danger: '#d4574f',
        dangerHover: '#c24841',
        tagBg: '#e8e3dc',
        editorBg: '#ffffff',
        toolbarBg: '#f5f3f1',
        searchBg: '#ffffff',
        shadow: 'rgba(44,42,40,0.08)',
        checkboxChecked: '#5b4f8b',
        resizeHandle: '#d5d0c9',
        highlightBg: '#f7ec93',
    },
    dark: {
        bg: '#1e1e22',
        sidebarBg: '#252529',
        sidebarHover: '#2d2d33',
        sidebarActive: '#33333a',
        border: '#36363d',
        text: '#e6e2dc',
        textSecondary: '#8a8580',
        accent: '#8b7fc7',
        accentHover: '#a197e3',
        danger: '#e07068',
        dangerHover: '#f08880',
        tagBg: '#36363d',
        editorBg: '#222228',
        toolbarBg: '#2a2a30',
        searchBg: '#2a2a30',
        shadow: 'rgba(0,0,0,0.3)',
        checkboxChecked: '#8b7fc7',
        resizeHandle: '#404048',
        highlightBg: '#6b5f18',
    },
};
exports.FONTS = {
    ui: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    editor: '"Lora", "Palatino Linotype", Palatino, Georgia, serif',
    monospace: '"JetBrains Mono", "Fira Code", monospace',
};
exports.AUTO_SAVE_DEBOUNCE_MS = 400;
exports.SNIPPET_LENGTH = 80;
exports.STORAGE_KEY = 'notes-app-state';
exports.NOTEBOOK_KEY = 'notebook-key';
exports.NOTE_KEY = 'note-key';
exports.TAG_COLORS = ['#5b4f8b', '#4a8b6f', '#8b6f4a', '#8b4a6f', '#4a6f8b', '#6f8b4a', '#8b4a4a', '#4a8b8b'];
exports.ALL_NOTEBOOKS_ID = '__all__';
exports.TRASH_ID = '__trash__';
exports.VIRTUAL_IDS = [exports.ALL_NOTEBOOKS_ID, exports.TRASH_ID];
// ===== STORAGE =====
function loadState() {
    try {
        const raw = localStorage.getItem(exports.STORAGE_KEY);
        if (!raw)
            return defaultState();
        return JSON.parse(raw);
    }
    catch {
        return defaultState();
    }
}
function saveState(state) {
    localStorage.setItem(exports.STORAGE_KEY, JSON.stringify(state));
}
function nextKey(prefix) {
    return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
}
function createNotebook(title) {
    return { id: nextKey(exports.NOTEBOOK_KEY), title, collapsed: false };
}
function createNote(notebookId, title = 'Untitled', content = '') {
    const now = Date.now();
    return {
        id: nextKey(exports.NOTE_KEY),
        notebookId,
        title,
        content,
        tags: [],
        pinned: false,
        createdAt: now,
        updatedAt: now,
        trash: false,
        trashNotebookId: notebookId,
        undoStack: [content || '<p><br></p>'],
        undoIndex: 0,
    };
}
function defaultState() {
    const welcomeBook = createNotebook('Welcome');
    const welcomeNote = createNote(welcomeBook.id, 'Welcome to Notes', '<h1>Welcome to Notes</h1><p>This is a <b>polished notes application</b>. Create notebooks, write notes with rich formatting, pin favorites, search across everything.</p><p>Try the <u>toolbar</u> above for formatting. Type <code># Hello</code> at a line start and press space for a heading.</p><blockquote>This app saves everything to your browser.</blockquote>');
    return {
        notebooks: [welcomeBook],
        notes: [welcomeNote],
        selectedNotebookId: exports.ALL_NOTEBOOKS_ID,
        selectedNoteId: '',
        darkTheme: false,
        sidebarWidth: 240,
        noteListWidth: 280,
        sortMode: 'updated',
        searchQuery: '',
        activeTagFilter: null,
    };
}
// ===== PURE HELPERS =====
function stripHtmlTags(html) {
    const temp = document.createElement('div');
    temp.innerHTML = html;
    return temp.textContent || temp.innerText || '';
}
function extractSnippet(html, length = exports.SNIPPET_LENGTH) {
    const text = stripHtmlTags(html);
    if (text.length <= length)
        return text;
    let end = text.indexOf(' ', length);
    if (end === -1)
        end = length;
    return text.slice(0, end) + '…';
}
function formatTimestamp(ts) {
    const now = Date.now();
    const diff = now - ts;
    if (diff < 60000)
        return 'just now';
    if (diff < 3600000)
        return `${Math.floor(diff / 60000)}m ago`;
    if (diff < 86400000)
        return `${Math.floor(diff / 3600000)}h ago`;
    if (diff < 2592000000)
        return `${Math.floor(diff / 86400000)}d ago`;
    return new Date(ts).toLocaleDateString();
}
function sanitizeHtml(html) {
    const temp = document.createElement('div');
    temp.innerHTML = html;
    const allowed = new Set([
        'p', 'br', 'strong', 'b', 'em', 'i', 'u', 'strike', 's', 'del', 'code', 'pre', 'blockquote',
        'hr', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'a', 'span', 'div', 'sub', 'sup',
    ]);
    const allowedAttrs = new Set(['href', 'title', 'data-checked', 'data-checklist-item']);
    function walk(el) {
        if (!(el instanceof HTMLElement))
            return;
        const tagName = el.tagName.toLowerCase();
        if (!allowed.has(tagName) && tagName !== 'div') {
            while (el.firstChild)
                el.parentNode.insertBefore(el.firstChild, el);
            el.remove();
            return;
        }
        // Strip script, style, on*
        const attrs = Array.from(el.attributes);
        for (const attr of attrs) {
            if (attr.name.startsWith('on') || !allowedAttrs.has(attr.name.toLowerCase())) {
                el.removeAttribute(attr.name);
            }
        }
        // Walk children before this node is removed by script/style handling
        const children = Array.from(el.childNodes);
        for (const child of children) {
            if (child.nodeType === Node.TEXT_NODE)
                continue;
            walk(child);
        }
    }
    // Remove script/style at top level too
    const scripts = temp.querySelectorAll('script,style');
    for (const s of scripts) {
        while (s.firstChild)
            s.parentNode.insertBefore(s.firstChild, s);
        s.remove();
    }
    walk(temp);
    return temp.innerHTML;
}
function findNote(state, id) {
    return state.notes.find(n => n.id === id);
}
function findNotebook(state, id) {
    return state.notebooks.find(n => n.id === id);
}
function getNotesForView(state) {
    if (state.selectedNotebookId === exports.TRASH_ID) {
        return state.notes.filter(n => n.trash);
    }
    if (state.selectedNotebookId === exports.ALL_NOTEBOOKS_ID) {
        return state.notes.filter(n => !n.trash);
    }
    return state.notes.filter(n => n.notebookId === state.selectedNotebookId && !n.trash);
}
function getAllTags(state) {
    const tags = new Set();
    for (const note of state.notes) {
        for (const tag of note.tags) {
            tags.add(tag);
        }
    }
    return tags;
}
function pushUndo(note, content) {
    note.undoStack = note.undoStack.slice(0, note.undoIndex + 1);
    note.undoStack.push(content);
    if (note.undoStack.length > 50)
        note.undoStack.shift();
    note.undoIndex = note.undoStack.length - 1;
}
function undoCurrentNote(note) {
    if (note.undoIndex <= 0)
        return false;
    note.undoIndex--;
    return true;
}
function redoCurrentNote(note) {
    if (note.undoIndex >= note.undoStack.length - 1)
        return false;
    note.undoIndex++;
    return true;
}
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>