@plannotator/ui 0.55.0 → 0.56.0

package/theme.css

@@ -24,6 +24,7 @@
 @import "./themes/solar-dusk.css";
 @import "./themes/terminal.css";
 @import "./themes/tokyo-night.css";
+@import "./themes/tokyo-night-moon.css";
 @import "./themes/tinacious.css";
 @import "./themes/cursor.css";
 @import "./themes/cursor-hc.css";

package/themes/tokyo-night-moon.css

@@ -0,0 +1,34 @@
+/* Tokyo Night Moon — folke/tokyonight.nvim "moon" (dark only) */
+.theme-tokyo-night-moon,
+.theme-tokyo-night-moon.light {
+  --background: #222436;
+  --foreground: #c8d3f5;
+  --card: #1e2030;
+  --card-foreground: #c8d3f5;
+  --popover: #1e2030;
+  --popover-foreground: #c8d3f5;
+  --primary: #82aaff;
+  --primary-foreground: #1e2030;
+  --secondary: #444a73;
+  --secondary-foreground: #c8d3f5;
+  --muted: #2f334d;
+  --muted-foreground: #828bb8;
+  --accent: #86e1fc;
+  --accent-foreground: #1e2030;
+  --destructive: #ff757f;
+  --destructive-foreground: #1e2030;
+  --border: #444a73;
+  --input: #2f334d;
+  --ring: #82aaff;
+  --success: #c3e88d;
+  --success-foreground: #1e2030;
+  --warning: #ffc777;
+  --warning-foreground: #1e2030;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #191b29;
+  --focus-highlight: #86e1fc;
+}

package/utils/aiChatFormat.ts

@@ -13,8 +13,14 @@ export const CHAT_SANITIZE_CONFIG = {
     'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'a', 'blockquote',
     'table', 'thead', 'tbody', 'tr', 'th', 'td',
   ],
-  // `align` is what marked writes on th/td for aligned GFM columns.
-  ALLOWED_ATTR: ['href', 'rel', 'class', 'align'],
+  // `align` is what marked writes on th/td for aligned GFM columns. No `class`
+  // (an answer's raw HTML could style itself with the app's utility classes;
+  // nothing in `.ai-markdown` reads one) and no `rel` (marked never writes it
+  // and `target` is not allowed).
+  ALLOWED_ATTR: ['href', 'align'],
+  // DOMPurify keeps data-* and aria-* unless told not to.
+  ALLOW_DATA_ATTR: false,
+  ALLOW_ARIA_ATTR: false,
 };
 
 /** The markdown step of {@link renderChatMarkdown}, before sanitizing. */
@@ -22,16 +28,31 @@ export function chatMarkdownToHtml(text: string): string {
   return marked.parse(text, { async: false, breaks: true }) as string;
 }
 
+/**
+ * Never throws: deeply nested input can overflow the stack in marked, and a
+ * throw inside a render would unmount the whole page. On any failure the
+ * answer is shown as plain text, line breaks kept, as a React text child
+ * (React escapes it).
+ */
 export function renderChatMarkdown(text: string): ReactNode {
-  const clean = DOMPurify.sanitize(chatMarkdownToHtml(text), {
-    ALLOWED_TAGS: [...CHAT_SANITIZE_CONFIG.ALLOWED_TAGS],
-    ALLOWED_ATTR: [...CHAT_SANITIZE_CONFIG.ALLOWED_ATTR],
-  });
-
-  return createElement('div', {
-    className: 'ai-markdown',
-    dangerouslySetInnerHTML: { __html: clean },
-  });
+  try {
+    const clean = DOMPurify.sanitize(chatMarkdownToHtml(text), {
+      ALLOWED_TAGS: [...CHAT_SANITIZE_CONFIG.ALLOWED_TAGS],
+      ALLOWED_ATTR: [...CHAT_SANITIZE_CONFIG.ALLOWED_ATTR],
+      ALLOW_DATA_ATTR: CHAT_SANITIZE_CONFIG.ALLOW_DATA_ATTR,
+      ALLOW_ARIA_ATTR: CHAT_SANITIZE_CONFIG.ALLOW_ARIA_ATTR,
+    });
+    return createElement('div', {
+      className: 'ai-markdown',
+      dangerouslySetInnerHTML: { __html: clean },
+    });
+  } catch {
+    return createElement(
+      'div',
+      { className: 'ai-markdown', style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } },
+      String(text),
+    );
+  }
 }
 
 export function formatRelativeTime(ts: number): string {

package/utils/headingScrollSpy.ts

@@ -9,14 +9,24 @@
  * activation line is 80 px below the top (it was 52), plan review's
  * `TableOfContents` scroll offset, so a pick lands where plan review's does.
  *
- * Plan review's own list keeps `hooks/useActiveSection` (an
- * IntersectionObserver band). One mechanism per surface: the rail, and a
+ * Plan review's own list uses `hooks/useActiveSection` (live heading
+ * positions at the same activation line). One mechanism per surface: the rail, and a
  * Contents list on the rail's surface (`DocumentContents`), use this one.
  */
 
 /** How far below the scroll element's top a heading becomes the current one. */
 export const CONTENTS_ACTIVATION_OFFSET = 80;
 
+/**
+ * How far below the activation line a heading still counts as reached. A pick
+ * scrolls to the heading's top less the offset, and that top is often
+ * fractional (1522.22 px); the browser snaps the scroll offset to a whole
+ * device pixel (1442, not 1442.22), so the picked heading can end up a fraction
+ * of a pixel below the line and the heading above it would be marked. One
+ * pixel covers the snap, as the document's end does below.
+ */
+export const CONTENTS_SNAP_TOLERANCE = 1;
+
 /** A heading drawn in the scroll element, with its top inside the scrolled content. */
 export interface HeadingBinding {
   /** The heading's index in the caller's own list. */
@@ -75,9 +85,9 @@ export function currentBinding(
 }
 
 /**
- * The heading being read: the last one at or above the activation line, or
- * the last heading once the document is scrolled to its end. `null` with no
- * bindings.
+ * The heading being read: the last one at or above the activation line (or
+ * within `CONTENTS_SNAP_TOLERANCE` below it), or the last heading once the
+ * document is scrolled to its end. `null` with no bindings.
  */
 export function activeHeadingBinding(
   bindings: readonly HeadingBinding[],
@@ -88,5 +98,8 @@ export function activeHeadingBinding(
   const atDocumentEnd = maxScrollTop > 0 && viewport.scrollTop >= maxScrollTop - 1;
   return atDocumentEnd
     ? bindings.at(-1)!
-    : currentBinding(bindings, viewport.scrollTop + CONTENTS_ACTIVATION_OFFSET);
+    : currentBinding(
+        bindings,
+        viewport.scrollTop + CONTENTS_ACTIVATION_OFFSET + CONTENTS_SNAP_TOLERANCE,
+      );
 }

package/utils/syntaxTheme.ts

@@ -50,6 +50,7 @@ export const SHIKI_THEME_MAP: Record<string, { dark: string | null; light: strin
   'solarized': { dark: 'solarized-dark', light: 'solarized-light' },
   'synthwave-84': { dark: 'synthwave-84', light: null },
   'tokyo-night': { dark: 'tokyo-night', light: null },
+  'tokyo-night-moon': { dark: 'tokyo-night', light: null },
   'vesper': { dark: 'vesper', light: null },
   'vitesse': { dark: 'vitesse-dark', light: 'vitesse-light' },
   'vitesse-black': { dark: 'vitesse-black', light: null },

package/utils/themeRegistry.ts

@@ -544,6 +544,17 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
       light: { primary: '#2e7de9', secondary: '#a1a6c5', accent: '#007197', background: '#e1e2e7', foreground: '#3760bf' },
     },
   },
+  {
+    id: 'tokyo-night-moon',
+    name: 'Tokyo Night Moon',
+    builtIn: true,
+    modeSupport: 'dark-only',
+    syntaxHighlighting: true,
+    colors: {
+      dark: { primary: '#82aaff', secondary: '#444a73', accent: '#86e1fc', background: '#222436', foreground: '#c8d3f5' },
+      light: { primary: '#82aaff', secondary: '#444a73', accent: '#86e1fc', background: '#222436', foreground: '#c8d3f5' },
+    },
+  },
   {
     id: 'vesper',
     name: 'Vesper',