latex-stickies 1.0.0

package/src/renderer/editor.js

@@ -0,0 +1,201 @@
+/**
+ * Editor conveniences for the note textarea: auto-indent, Tab handling,
+ * bracket pairing and list continuation.
+ *
+ * The behavior is context-aware. Inside a ``` fence the textarea acts like a
+ * code editor; outside one it acts like a notes field. That split matters --
+ * indenting after a trailing colon is right in Python and wrong after "Note:",
+ * and auto-closing a quote is right in code and infuriating in "don't".
+ *
+ * Every rule here is a pure function returning an edit descriptor
+ * ({ from, to, insert, selStart, selEnd }) rather than touching the DOM, so the
+ * logic is testable on its own. applyEdit() is the only part that writes, and
+ * it goes through execCommand('insertText') so Cmd+Z still walks back through
+ * the changes one at a time -- assigning to textarea.value would wipe the
+ * browser's native undo stack.
+ */
+
+const INDENT = '  '; // two spaces: notes are narrow
+
+const PAIRS = { '(': ')', '[': ']', '{': '}', '"': '"', "'": "'", '`': '`', $: '$' };
+// Quotes are excluded outside fences: apostrophes in ordinary prose are far
+// more common than quoted pairs. `$` stays, because math is the point here.
+const PROSE_PAIRS = new Set(['(', '[', '{', '$']);
+const CLOSERS = new Set(Object.values(PAIRS));
+
+const lineStart = (v, i) => v.lastIndexOf('\n', i - 1) + 1;
+const lineEnd = (v, i) => {
+  const n = v.indexOf('\n', i);
+  return n === -1 ? v.length : n;
+};
+const indentOf = (line) => (/^[ \t]*/.exec(line) || [''])[0];
+
+/** Is the caret inside a fenced code block? Odd number of fences above it. */
+function insideFence(value, pos) {
+  const before = value.slice(0, pos);
+  const fences = before.match(/^[ \t]*```/gm);
+  return !!fences && fences.length % 2 === 1;
+}
+
+/* ---------- Enter ---------- */
+
+const OPENS_BLOCK = /[:{[(]\s*$/;
+const LIST_ITEM = /^([ \t]*)([-*+] \[[ xX]\] |[-*+] |\d+[.)] )(.*)$/;
+
+function onEnter(value, start, end) {
+  const ls = lineStart(value, start);
+  const line = value.slice(ls, start);
+
+  if (insideFence(value, start)) {
+    const indent = indentOf(line);
+    const deeper = OPENS_BLOCK.test(line);
+    const inner = deeper ? indent + INDENT : indent;
+    const after = value.slice(end, end + 1);
+
+    // Caret sits between a just-opened pair: put the closer on its own line,
+    // the way an editor does for `{|}`.
+    if (deeper && CLOSERS.has(after)) {
+      return {
+        from: start, to: end,
+        insert: `\n${inner}\n${indent}`,
+        selStart: start + 1 + inner.length,
+      };
+    }
+    return { from: start, to: end, insert: `\n${inner}` };
+  }
+
+  // Outside a fence: carry markdown lists onward.
+  const item = LIST_ITEM.exec(value.slice(ls, lineEnd(value, start)));
+  if (!item) return null;
+
+  const [, indent, marker, content] = item;
+
+  // Enter on an empty item ends the list rather than making another bullet.
+  if (!content.trim()) {
+    return { from: ls, to: end, insert: indent };
+  }
+
+  let next = marker;
+  const ordered = /^(\d+)([.)] )$/.exec(marker);
+  if (ordered) next = `${Number(ordered[1]) + 1}${ordered[2]}`;
+  else if (/\[[xX]\]/.test(marker)) next = marker.replace(/\[[xX]\]/, '[ ]');
+
+  return { from: start, to: end, insert: `\n${indent}${next}` };
+}
+
+/* ---------- Tab ---------- */
+
+function onTab(value, start, end, shift) {
+  const ls = lineStart(value, start);
+  const le = lineEnd(value, end);
+
+  // A selection spanning lines shifts the whole block.
+  if (start !== end && value.slice(start, end).includes('\n')) {
+    const lines = value.slice(ls, le).split('\n');
+    const shifted = lines.map((l) =>
+      shift ? l.replace(new RegExp(`^( {1,${INDENT.length}}|\t)`), '') : INDENT + l);
+    const insert = shifted.join('\n');
+    return { from: ls, to: le, insert, selStart: ls, selEnd: ls + insert.length };
+  }
+
+  if (shift) {
+    const line = value.slice(ls, le);
+    const removed = /^( {1,2}|\t)/.exec(line);
+    if (!removed) return null;
+    const n = removed[0].length;
+    return {
+      from: ls, to: ls + n, insert: '',
+      selStart: Math.max(ls, start - n), selEnd: Math.max(ls, end - n),
+    };
+  }
+
+  return { from: start, to: end, insert: INDENT };
+}
+
+/* ---------- brackets and quotes ---------- */
+
+function onPair(value, start, end, ch) {
+  const close = PAIRS[ch];
+  if (!close) return null;
+
+  const inFence = insideFence(value, start);
+  if (!inFence && !PROSE_PAIRS.has(ch)) return null;
+
+  // Wrapping a selection always makes sense, in code or prose.
+  if (start !== end) {
+    const selected = value.slice(start, end);
+    return {
+      from: start, to: end,
+      insert: ch + selected + close,
+      selStart: start + 1, selEnd: end + 1,
+    };
+  }
+
+  // Don't auto-close when it would run into a word: `foo|bar` typing `(`.
+  const after = value.slice(end, end + 1);
+  if (after && !/[\s)\]}>,.;:]/.test(after)) return null;
+
+  // For symmetric marks, a closer is more likely than a new pair when one is
+  // already open on this line.
+  if (ch === close) {
+    const line = value.slice(lineStart(value, start), start);
+    const count = line.split(ch).length - 1;
+    if (count % 2 === 1) return null;
+  }
+
+  return { from: start, to: end, insert: ch + close, selStart: start + 1 };
+}
+
+/** Typing the closer that's already sitting there just steps over it. */
+function onCloser(value, start, end, ch) {
+  if (start !== end || !CLOSERS.has(ch)) return null;
+  if (value.slice(end, end + 1) !== ch) return null;
+  return { from: start, to: end, insert: '', selStart: start + 1 };
+}
+
+/** Backspace between an empty pair removes both halves. */
+function onBackspace(value, start, end) {
+  if (start !== end || start === 0) return null;
+  const before = value[start - 1];
+  const after = value[start];
+  if (PAIRS[before] && PAIRS[before] === after) {
+    return { from: start - 1, to: start + 1, insert: '', selStart: start - 1 };
+  }
+  return null;
+}
+
+/* ---------- dispatch ---------- */
+
+function computeEdit(e, value, start, end) {
+  if (e.metaKey || e.ctrlKey || e.altKey) return null;
+
+  if (e.key === 'Enter') return onEnter(value, start, end);
+  if (e.key === 'Tab') return onTab(value, start, end, e.shiftKey);
+  if (e.key === 'Backspace') return onBackspace(value, start, end);
+  if (e.key.length === 1) {
+    return onCloser(value, start, end, e.key) || onPair(value, start, end, e.key);
+  }
+  return null;
+}
+
+/* ---------- the one part that writes ---------- */
+
+function applyEdit(el, edit) {
+  el.setSelectionRange(edit.from, edit.to);
+  // Keeps the change on the native undo stack, unlike assigning to .value.
+  if (!document.execCommand('insertText', false, edit.insert)) {
+    el.setRangeText(edit.insert, edit.from, edit.to, 'end');
+  }
+  const selStart = edit.selStart ?? edit.from + edit.insert.length;
+  el.setSelectionRange(selStart, edit.selEnd ?? selStart);
+}
+
+function attachEditorBehaviors(el) {
+  el.addEventListener('keydown', (e) => {
+    const edit = computeEdit(e, el.value, el.selectionStart, el.selectionEnd);
+    if (!edit) return;
+    e.preventDefault();
+    applyEdit(el, edit);
+    el.dispatchEvent(new Event('input', { bubbles: true })); // triggers the save
+  });
+}

package/src/renderer/markdown.js

@@ -0,0 +1,154 @@
+/**
+ * Markdown + LaTeX rendering.
+ *
+ * Math is registered as marked extensions rather than pre-extracted with a
+ * regex, so marked's own tokenizer claims code spans and fences first and
+ * `$x$` inside `code` stays literal text.
+ *
+ * Each math token renders to a placeholder, not to KaTeX HTML directly. That
+ * lets DOMPurify run over the markdown output — which may contain raw HTML
+ * typed into the note — before the trusted KaTeX markup is spliced in. KaTeX's
+ * own output is deliberately not sanitized: it is complex MathML that a
+ * sanitizer would mangle, and it is generated locally with trust disabled.
+ */
+
+const mathChunks = [];
+
+const inlineMath = {
+  name: 'inlineMath',
+  level: 'inline',
+  start(src) {
+    return src.indexOf('$');
+  },
+  tokenizer(src) {
+    // A single `$`, no newline inside, `\$` escapes out.
+    //
+    // The delimiters must hug their content: no space after the opening `$`,
+    // none before the closing one. That is the usual CommonMark-math rule and
+    // it is what keeps prose like "costs $5 and $6 today" from being swallowed
+    // as a formula, since the closing candidate there sits after a space.
+    const match = /^\$(?!\s)((?:\\.|[^$\\\n])*?[^\s\\]|[^\s$\\])\$(?!\d)/.exec(src);
+    if (!match) return;
+    return { type: 'inlineMath', raw: match[0], tex: match[1] };
+  },
+  renderer(token) {
+    return placeholder(token.tex, false);
+  },
+};
+
+const blockMath = {
+  name: 'blockMath',
+  level: 'block',
+  start(src) {
+    return src.indexOf('$$');
+  },
+  tokenizer(src) {
+    const match = /^\s*\$\$([\s\S]+?)\$\$\s*(?:\n|$)/.exec(src);
+    if (!match) return;
+    return { type: 'blockMath', raw: match[0], tex: match[1].trim() };
+  },
+  renderer(token) {
+    return placeholder(token.tex, true);
+  },
+};
+
+function placeholder(tex, display) {
+  mathChunks.push({ tex, display });
+  const tag = display ? 'div' : 'span';
+  return `<${tag} data-math="${mathChunks.length - 1}"></${tag}>`;
+}
+
+const escapeHtml = (s) =>
+  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+// What people actually type on a fence, mapped to Prism's grammar names.
+const LANG_ALIASES = {
+  sh: 'bash', shell: 'bash', zsh: 'bash', console: 'bash',
+  py: 'python', js: 'javascript', ts: 'typescript', yml: 'yaml',
+  rb: 'ruby', 'c++': 'cpp', tex: 'latex', md: 'markdown',
+  html: 'markup', xml: 'markup', tsx: 'jsx',
+};
+
+function resolveLang(info) {
+  // marked hands over the whole info string, e.g. "python title=demo".
+  const raw = (info || '').trim().split(/\s+/)[0].toLowerCase();
+  if (!raw) return null;
+  const name = LANG_ALIASES[raw] || raw;
+  return Prism.languages[name] ? name : null;
+}
+
+/**
+ * Fenced code blocks. A recognised language gets highlighted; anything else --
+ * an unknown language, or a bare ``` with none -- falls back to escaped plain
+ * text. Bare fences are deliberately not auto-detected: guessing on a two-line
+ * snippet is wrong often enough to be worse than nothing.
+ */
+function renderCode(token) {
+  const lang = resolveLang(token.lang);
+  if (!lang) {
+    return `<pre><code>${escapeHtml(token.text)}</code></pre>\n`;
+  }
+  const body = Prism.highlight(token.text, Prism.languages[lang], lang);
+  return `<pre data-lang="${lang}"><code class="language-${lang}">${body}</code></pre>\n`;
+}
+
+marked.use({
+  gfm: true,
+  breaks: true, // single newlines are line breaks; notes are not prose documents
+  extensions: [inlineMath, blockMath],
+  renderer: { code: renderCode },
+});
+
+function renderMath(chunk) {
+  try {
+    return katex.renderToString(chunk.tex, {
+      displayMode: chunk.display,
+      throwOnError: true,
+      strict: false,
+      trust: false,
+    });
+  } catch (err) {
+    const label = escapeHtml(chunk.display ? `$$${chunk.tex}$$` : `$${chunk.tex}$`);
+    return `<span class="math-error" title="${escapeHtml(err.message)}">${label}</span>`;
+  }
+}
+
+/**
+ * Renders note text into `target`.
+ *
+ * Math is spliced in as a DOM operation, never by string replacement. An
+ * earlier version substituted `@@MATH0@@` markers in the sanitized HTML string
+ * and assigned the result to innerHTML -- but a note could put that marker
+ * inside an attribute (`<img title="@@MATH0@@">`), and the KaTeX markup, which
+ * carries its own quotes and angle brackets, then broke out of the attribute
+ * when the string was re-parsed. That produced live elements DOMPurify had
+ * never seen, including an <img> pointing anywhere the author liked. Filling
+ * placeholder *elements* after sanitizing keeps every insertion scoped to one
+ * node, so nothing can escape into the surrounding markup.
+ */
+function renderInto(target, src) {
+  mathChunks.length = 0;
+
+  target.innerHTML = DOMPurify.sanitize(marked.parse(src), {
+    ADD_ATTR: ['target'],
+    // `input` stays allowed so GFM task lists keep their checkboxes; DOMPurify
+    // strips event handlers and dangerous attributes from it regardless.
+    FORBID_TAGS: ['style', 'form', 'button', 'iframe', 'object', 'embed'],
+  });
+
+  target.querySelectorAll('[data-math]').forEach((slot) => {
+    const chunk = mathChunks[Number(slot.dataset.math)];
+    // KaTeX output is generated locally with trust disabled, and lands inside
+    // this one element -- it cannot alter the structure around it.
+    if (chunk) slot.innerHTML = renderMath(chunk);
+    else slot.remove();
+  });
+}
+
+/** Markdown source -> HTML string. Serialized from a real DOM, so attribute
+ *  values are escaped and re-parsing yields the same tree. */
+function renderMarkdown(src) {
+  const scratch = document.createElement('div');
+  renderInto(scratch, src);
+  return scratch.innerHTML;
+}

package/src/renderer/note.css

@@ -0,0 +1,288 @@
+:root {
+  --paper: #fdf3a8;
+  --paper-edge: #f2e07a;
+  --ink: #2b2a1f;
+  --radius: 10px;
+}
+body[data-color="blue"]   { --paper: #cfe6fb; --paper-edge: #b2d5f5; --ink: #1d2c3a; }
+body[data-color="green"]  { --paper: #d3f2c8; --paper-edge: #b8e5a8; --ink: #1f3319; }
+body[data-color="pink"]   { --paper: #fbd2e2; --paper-edge: #f4b6ce; --ink: #3a1f2b; }
+body[data-color="purple"] { --paper: #e2d6fb; --paper-edge: #cdbaf5; --ink: #2a1f3a; }
+body[data-color="gray"]   { --paper: #e6e6e6; --paper-edge: #d2d2d2; --ink: #262626; }
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+  color: var(--ink);
+  overflow: hidden;
+  user-select: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius);
+  background: var(--paper);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+#bar {
+  position: relative;
+  flex: 0 0 26px;
+  background: var(--paper-edge);
+  border-radius: var(--radius) var(--radius) 0 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+#drag {
+  position: absolute;
+  inset: 0;
+  -webkit-app-region: drag;
+}
+
+#tools {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+}
+
+/* Hidden with `visibility`, not `opacity`: a transparent button still takes
+   clicks, which meant clicking the title bar to drag a note could silently
+   toggle the pin underneath the cursor. */
+#tools > * { visibility: hidden; }
+
+/* Shown while the window is focused, not only while the body is hovered.
+   The title bar is a -webkit-app-region drag surface, which swallows mouse
+   events, so body:hover drops the moment the cursor reaches the bar -- the
+   controls would vanish exactly as you reached for them. Focus is unaffected
+   by the drag region. */
+body.focused #tools > *,
+body:hover #tools > *,
+body.editing #tools > * { visibility: visible; }
+
+/* A pinned note must advertise it even when the toolbar is otherwise hidden. */
+#pin.on { visibility: visible; }
+
+#tools button {
+  -webkit-app-region: no-drag;
+  border: 0;
+  background: transparent;
+  color: var(--ink);
+  opacity: 0.5;
+  font-size: 12px;
+  line-height: 1;
+  padding: 3px 4px;
+  border-radius: 4px;
+  cursor: default;
+}
+#tools button:hover { opacity: 1; background: rgba(0, 0, 0, 0.07); }
+#pin.on {
+  opacity: 1;
+  color: #b3402b;
+  background: rgba(179, 64, 43, 0.16);
+}
+
+#swatches { display: flex; gap: 4px; margin-left: auto; margin-right: auto; }
+#swatches span {
+  -webkit-app-region: no-drag;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  cursor: default;
+}
+#swatches span.active { outline: 1.5px solid rgba(0, 0, 0, 0.5); outline-offset: 1px; }
+
+#surface {
+  flex: 1;
+  position: relative;
+  overflow: auto;
+}
+
+#editor, #preview {
+  width: 100%;
+  min-height: 100%;
+  padding: 10px 13px 22px;
+  font-size: var(--fs, 15px);
+  line-height: 1.55;
+  user-select: text;
+}
+
+#editor {
+  position: absolute;
+  inset: 0;
+  display: none;
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: var(--ink);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: calc(var(--fs, 15px) - 1px);
+}
+
+body.editing #editor { display: block; }
+body.editing #preview { visibility: hidden; }
+
+#preview { word-break: break-word; }
+#preview > *:first-child { margin-top: 0; }
+#preview > *:last-child { margin-bottom: 0; }
+#preview p { margin: 0 0 0.55em; }
+#preview h1 { font-size: 1.35em; margin: 0.2em 0 0.3em; }
+#preview h2 { font-size: 1.18em; margin: 0.2em 0 0.3em; }
+#preview h3 { font-size: 1.05em; margin: 0.2em 0 0.3em; }
+#preview code {
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(0, 0, 0, 0.07);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+#preview a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+
+#preview h4, #preview h5, #preview h6 { font-size: 1em; margin: 0.2em 0 0.3em; }
+
+#preview blockquote {
+  margin: 0.4em 0;
+  padding-left: 0.7em;
+  border-left: 2px solid rgba(0, 0, 0, 0.22);
+  opacity: 0.85;
+}
+
+/* The wrapper anchors the label and copy button; the <pre> inside it scrolls,
+   so anything positioned against the <pre> would scroll out of view. */
+#preview .code-block { position: relative; margin: 0.5em 0; }
+
+#preview pre {
+  margin: 0;
+  padding: 7px 9px;
+  background: rgba(0, 0, 0, 0.07);
+  border-radius: 5px;
+  overflow-x: auto;
+}
+#preview pre code { background: none; padding: 0; font-size: 0.85em; }
+
+/* Label and button share the top-right slot and cross-fade, so reaching for
+   Copy doesn't shift anything. */
+#preview .code-lang,
+#preview .code-copy {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  transition: opacity 0.12s ease;
+}
+
+#preview .code-lang {
+  color: var(--ink);
+  opacity: 0.34;
+  pointer-events: none;
+}
+
+#preview .code-copy {
+  border: 0;
+  border-radius: 3px;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.1);
+  color: var(--ink);
+  opacity: 0;
+  cursor: default;
+}
+#preview .code-block:hover .code-lang { opacity: 0; }
+#preview .code-block:hover .code-copy { opacity: 0.62; }
+#preview .code-copy:hover { opacity: 1; background: rgba(0, 0, 0, 0.16); }
+#preview .code-copy.done { opacity: 1; background: rgba(47, 107, 74, 0.2); }
+
+/* Syntax colors.
+   Notes come in six pastel papers, so every token is dark and desaturated --
+   a stock editor theme assumes one fixed background and washes out on yellow
+   or pink. Contrast holds on all six. */
+#preview .token.comment,
+#preview .token.prolog,
+#preview .token.doctype,
+#preview .token.cdata { color: var(--ink); opacity: 0.5; font-style: italic; }
+
+#preview .token.punctuation { color: var(--ink); opacity: 0.62; }
+
+#preview .token.keyword,
+#preview .token.rule,
+#preview .token.important,
+#preview .token.atrule { color: #8a2f6b; font-weight: 500; }
+
+#preview .token.string,
+#preview .token.char,
+#preview .token.attr-value,
+#preview .token.regex { color: #1f6b3a; }
+
+#preview .token.number,
+#preview .token.boolean,
+#preview .token.constant,
+#preview .token.symbol { color: #a0522d; }
+
+#preview .token.function,
+#preview .token.class-name,
+#preview .token.tag { color: #1b3a6b; }
+
+#preview .token.property,
+#preview .token.attr-name,
+#preview .token.variable,
+#preview .token.parameter { color: #6b4a1f; }
+
+#preview .token.operator,
+#preview .token.entity,
+#preview .token.url { color: var(--ink); opacity: 0.78; }
+
+#preview .token.deleted { color: #a01f1f; }
+#preview .token.inserted { color: #1f6b3a; }
+#preview .token.italic { font-style: italic; }
+#preview .token.bold { font-weight: 600; }
+
+#preview ul, #preview ol { margin: 0.35em 0; padding-left: 1.35em; }
+#preview li { margin: 0.12em 0; }
+#preview li::marker { opacity: 0.55; }
+/* marked emits a bare <li> with a checkbox, no class, so match on content. */
+#preview li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.15em; }
+#preview li > input[type="checkbox"] { margin-right: 0.45em; vertical-align: baseline; }
+
+#preview hr {
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
+  margin: 0.7em 0;
+}
+
+#preview table {
+  border-collapse: collapse;
+  margin: 0.5em 0;
+  font-size: 0.93em;
+  display: block;
+  overflow-x: auto;
+}
+#preview th, #preview td {
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  padding: 3px 7px;
+  text-align: left;
+}
+#preview th { background: rgba(0, 0, 0, 0.05); }
+
+#preview del { opacity: 0.6; }
+#preview img { max-width: 100%; border-radius: 4px; }
+#preview .katex-display { margin: 0.5em 0; overflow-x: auto; overflow-y: hidden; }
+#preview .math-error {
+  color: #a01f1f;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.85em;
+  text-decoration: underline wavy rgba(160, 31, 31, 0.5);
+}
+#preview .placeholder { opacity: 0.4; }
+
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 4px; }

package/src/renderer/note.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Security-Policy"
+        content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https:;" />
+  <link rel="stylesheet" href="vendor/katex.min.css" />
+  <link rel="stylesheet" href="note.css" />
+  <title>Sticky</title>
+</head>
+<body>
+  <header id="bar">
+    <div id="drag"></div>
+    <div id="tools">
+      <button id="pin" title="Always on top (Cmd+T)">✛</button>
+      <div id="swatches"></div>
+      <button id="add" title="New note (Cmd+N)">＋</button>
+      <button id="close" title="Close (Cmd+W)">✕</button>
+    </div>
+  </header>
+  <main id="surface">
+    <div id="preview"></div>
+    <textarea id="editor" spellcheck="false"
+      placeholder="Markdown + LaTeX. Inline math $…$, display math $$…$$"></textarea>
+  </main>
+  <script src="vendor/katex.min.js"></script>
+  <script src="vendor/marked.js"></script>
+  <script src="vendor/purify.js"></script>
+  <script src="vendor/prism.js"></script>
+  <script src="markdown.js"></script>
+  <script src="editor.js"></script>
+  <script src="note.js"></script>
+</body>
+</html>