@plannotator/ui 0.22.0

package/hooks/useValidatedCodePaths.ts

@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from "react";
+import { extractCandidateCodePaths } from "@plannotator/core/extract-code-paths";
+
+export type ValidationEntry =
+	| { status: "found"; resolved: string }
+	| { status: "ambiguous"; matches: string[] }
+	| { status: "missing" }
+	| { status: "unavailable" };
+
+export type ValidatedMap = Map<string, ValidationEntry>;
+
+/**
+ * Extracts code-file path candidates from `markdown` and posts them to
+ * `/api/doc/exists` once per markdown change. The server has typically
+ * pre-warmed the file walk at plan/annotate load, so the response is fast.
+ *
+ * `validated` is empty until `ready` flips to true, at which point it holds
+ * an entry for every candidate (including missing/unavailable ones). The
+ * renderer dispatches on status — see InlineMarkdown.
+ *
+ * Empty candidate set short-circuits — no fetch, ready: true immediately.
+ *
+ * `baseDir` is the directory the active document lives in (linked-doc parent
+ * or the annotate source file's parent). When set, the server tries
+ * `<baseDir>/<input>` literal-resolve before its cwd walk so out-of-tree
+ * relative references (e.g. `../script.ts` in `~/notes/foo.md`) don't get
+ * demoted to plain text.
+ */
+export function useValidatedCodePaths(
+	markdown: string,
+	baseDir?: string,
+	disabled?: boolean,
+): { validated: ValidatedMap; ready: boolean } {
+	const [validated, setValidated] = useState<ValidatedMap>(new Map());
+	const [ready, setReady] = useState<boolean>(false);
+
+	useEffect(() => {
+		setValidated(new Map());
+		setReady(false);
+
+		// Host opt-out (e.g. a backend with no /api/doc/exists). Default undefined
+		// for Plannotator => unchanged. When disabled we never probe and leave
+		// ready=false, so gateCodePath's no-validation fallback renders code links
+		// optimistically (clickable) instead of demoting them to plain text.
+		if (disabled) {
+			return;
+		}
+
+		const candidates = extractCandidateCodePaths(markdown);
+		if (candidates.length === 0) {
+			setReady(true);
+			return;
+		}
+
+		let cancelled = false;
+		(async () => {
+			try {
+				const res = await fetch("/api/doc/exists", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(
+						baseDir ? { paths: candidates, base: baseDir } : { paths: candidates },
+					),
+				});
+				if (cancelled) return;
+				if (!res.ok) {
+					setReady(true);
+					return;
+				}
+				const data = (await res.json()) as {
+					results: Record<string, ValidationEntry>;
+				};
+				if (cancelled) return;
+				const next: ValidatedMap = new Map();
+				for (const [k, v] of Object.entries(data.results ?? {})) {
+					next.set(k, v);
+				}
+				setValidated(next);
+				setReady(true);
+			} catch {
+				if (!cancelled) setReady(true);
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [markdown, baseDir, disabled]);
+
+	// Stable reference: only changes when validated/ready actually change.
+	// Without memoization, the parent provider's value is a fresh object every
+	// render, forcing all context consumers (every InlineMarkdown) to re-render.
+	return useMemo(() => ({ validated, ready }), [validated, ready]);
+}

package/icons/GitUser.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export const GitUser: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    viewBox="0 0 97 104.44"
+    fill="currentColor"
+  >
+    {/* <!-- Git logo --> */}
+    <path d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z" />
+    {/* User badge — scaled 1.8x from center (74, 74) */}
+    <circle cx="74" cy="74" r="32" fill="var(--background, white)" />
+    <circle cx="74" cy="65" r="9.9" />
+    <path d="M53.3 93.1c0-11.432 9.268-20.7 20.7-20.7s20.7 9.268 20.7 20.7" />
+  </svg>
+);

package/lib/utils.ts

@@ -0,0 +1,11 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge class names with Tailwind-aware conflict resolution.
+ * `clsx` handles conditionals/arrays; `twMerge` dedupes conflicting utilities
+ * (so a later `bg-*` wins over an earlier one, etc.).
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@plannotator/ui",
+  "version": "0.22.0",
+  "type": "module",
+  "exports": {
+    "./components/*": "./components/*.tsx",
+    "./components/ui/*": "./components/ui/*.tsx",
+    "./components/ai/*": "./components/ai/*.tsx",
+    "./components/core/*": "./components/core/*.tsx",
+    "./components/goal-setup/*": "./components/goal-setup/*.tsx",
+    "./components/ImageAnnotator": "./components/ImageAnnotator/index.tsx",
+    "./components/html-viewer": "./components/html-viewer/index.ts",
+    "./components/sidebar/*": "./components/sidebar/*.tsx",
+    "./components/plan-diff/*": "./components/plan-diff/*.tsx",
+    "./utils/*": "./utils/*.ts",
+    "./lib/*": "./lib/*.ts",
+    "./hooks/*": "./hooks/*.ts",
+    "./shortcuts": "./shortcuts/index.ts",
+    "./config": "./config/index.ts",
+    "./configure": "./configure.ts",
+    "./types": "./types.ts",
+    "./theme": "./theme.css",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "components",
+    "config",
+    "hooks",
+    "icons",
+    "lib",
+    "shortcuts",
+    "utils",
+    "assets",
+    "themes",
+    "sprite_package_additional",
+    "sprite_package_new",
+    "sprite_package_pulluphang",
+    "globals.d.ts",
+    "configure.ts",
+    "types.ts",
+    "theme.css",
+    "print.css",
+    "styles.css",
+    "plannotator.webp",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!test-setup"
+  ],
+  "dependencies": {
+    "@plannotator/atomic-editor": "^0.5.0",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/search": "^6.7.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
+    "@fontsource-variable/geist-mono": "5.2.7",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@pierre/diffs": "1.2.8",
+    "@lezer/common": "^1.5.2",
+    "@lezer/highlight": "^1.2.3",
+    "@plannotator/core": "0.22.0",
+    "@plannotator/markdown-editor": "^0.2.0",
+    "@plannotator/web-highlighter": "^0.8.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@viz-js/viz": "^3.25.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "diff": "^8.0.4",
+    "dompurify": "^3.3.3",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.47",
+    "lucide-react": "^1.14.0",
+    "marked": "^17.0.6",
+    "mermaid": "^11.12.2",
+    "motion": "^12.38.0",
+    "perfect-freehand": "^1.2.2",
+    "tailwind-merge": "^3.6.0",
+    "unique-username-generator": "^1.5.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/bun": "^1.2.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build:css": "vite build --config vite.css.config.ts && rm -f styles.js",
+    "prepack": "bun run build:css"
+  }
+}

package/print.css

@@ -0,0 +1,427 @@
+/* Print Stylesheet — optimized for white paper output without annotations.
+ *
+ * Two-pronged approach:
+ *   1. @media print — standard print styles
+ *   2. .plannotator-print — class added via JS beforeprint/afterprint events
+ *      to guarantee overrides that @media print alone cannot achieve
+ *      (e.g. beating Tailwind layers + hljs github-dark theme).
+ */
+
+/* ============================================================
+ * CLASS-BASED OVERRIDES — applied via beforeprint/afterprint JS
+ * These use .plannotator-print on <html> for maximum specificity.
+ * ============================================================ */
+
+/* Code blocks: override github-dark.css .hljs{background:#0d1117} */
+.plannotator-print pre,
+.plannotator-print pre[class] {
+  background: #f5f5f5 !important;
+  background-color: #f5f5f5 !important;
+  color: #1a1a1a !important;
+  border: 1px solid #ccc !important;
+  border-left: 3px solid #888 !important;
+}
+
+.plannotator-print pre code,
+.plannotator-print code.hljs,
+.plannotator-print pre code.hljs,
+.plannotator-print .hljs {
+  background: transparent !important;
+  background-color: transparent !important;
+  color: #1a1a1a !important;
+}
+
+.plannotator-print pre span,
+.plannotator-print pre code span,
+.plannotator-print .hljs span,
+.plannotator-print [class*="hljs-"] {
+  color: #1a1a1a !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  text-decoration: none !important;
+  font-style: normal !important;
+}
+
+/* Inline code */
+.plannotator-print code {
+  background: #e8e8e8 !important;
+  background-color: #e8e8e8 !important;
+  color: #1a1a1a !important;
+  border: 1px solid #ccc !important;
+}
+
+/* Inline code inside pre should be transparent (not gray pill) */
+.plannotator-print pre code {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* ============================================================
+ * @media print — layout, visibility, typography
+ * ============================================================ */
+
+@media print {
+  /* ========== Reset & Page ========== */
+
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  @page {
+    size: A4;
+    margin: 0.75in;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: white !important;
+    color: #1a1a1a !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
+    font-size: 11pt;
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  /* ========== Hide UI Chrome ========== */
+
+  header {
+    display: none !important;
+  }
+
+  aside {
+    display: none !important;
+  }
+
+  .annotation-toolbar {
+    display: none !important;
+  }
+
+  .fixed {
+    display: none !important;
+  }
+
+  [data-resize-handle] {
+    display: none !important;
+  }
+
+  [data-print-hide] {
+    display: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .sidebar-tab-flag {
+    display: none !important;
+  }
+
+  pre .absolute,
+  .group > button.absolute {
+    display: none !important;
+  }
+
+  button[title="Settings"],
+  button[title="Toggle theme"],
+  button[title="Add global comment"],
+  button[title="Copy plan"],
+  button[title="Copy file"] {
+    display: none !important;
+  }
+
+  /* ========== Main Content Area ========== */
+
+  [data-print-region="root"] {
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  [data-print-region="content"] {
+    overflow: visible !important;
+  }
+
+  main, [data-print-region="document"] {
+    width: 100% !important;
+    overflow: visible !important;
+    background: white !important;
+    background-image: none !important;
+    padding: 0 !important;
+  }
+
+  main > div {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+
+  article, [data-print-region="article"] {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: white !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  /* Collapse first heading top margin for tight print layout */
+  article h1:first-of-type,
+  [data-print-region="article"] h1:first-of-type {
+    margin-top: 0 !important;
+  }
+
+  /* ========== Typography ========== */
+
+  body, div, span, p, li, td, th, label, strong, em, b, i {
+    color: #1a1a1a !important;
+  }
+
+  strong, b {
+    font-weight: bold !important;
+    color: #000 !important;
+  }
+
+  em, i {
+    font-style: italic !important;
+    color: #1a1a1a !important;
+  }
+
+  h1 {
+    font-size: 24pt;
+    font-weight: bold;
+    margin: 1.5em 0 0.5em 0;
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+
+  h2 {
+    font-size: 18pt;
+    font-weight: bold;
+    margin: 1.25em 0 0.4em 0;
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+
+  h3 {
+    font-size: 14pt;
+    font-weight: bold;
+    margin: 1em 0 0.3em 0;
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+
+  h4 {
+    font-size: 12pt;
+    font-weight: bold;
+    margin: 0.8em 0 0.25em 0;
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+
+  h5, h6 {
+    font-size: 11pt;
+    font-weight: bold;
+    margin: 0.6em 0 0.2em 0;
+    page-break-after: avoid;
+    color: #000 !important;
+  }
+
+  p {
+    margin: 0.5em 0;
+    color: #1a1a1a !important;
+  }
+
+  /* ========== Lists ========== */
+
+  ul, ol {
+    margin: 0.5em 0;
+    padding-left: 2em;
+  }
+
+  li {
+    margin: 0.25em 0;
+    color: #1a1a1a !important;
+  }
+
+  li p {
+    margin: 0.25em 0;
+  }
+
+  /* ========== Code & Preformatted ========== */
+
+  code,
+  code[class] {
+    font-family: 'Courier New', Monaco, Consolas, monospace !important;
+    font-size: 10pt !important;
+    background: #e8e8e8 !important;
+    background-color: #e8e8e8 !important;
+    color: #1a1a1a !important;
+    padding: 0.1em 0.4em !important;
+    border-radius: 3px !important;
+    border: 1px solid #ccc !important;
+  }
+
+  .group {
+    page-break-inside: avoid;
+  }
+
+  pre,
+  pre[class] {
+    margin: 1em 0 !important;
+    padding: 1em !important;
+    background: #f5f5f5 !important;
+    background-color: #f5f5f5 !important;
+    border: 1px solid #ccc !important;
+    border-left: 3px solid #888 !important;
+    border-radius: 4px !important;
+    page-break-inside: avoid;
+    overflow: visible !important;
+    color: #1a1a1a !important;
+  }
+
+  pre code,
+  pre code[class],
+  pre code.hljs,
+  code.hljs,
+  code[data-highlighted] {
+    font-size: 9pt !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    color: #1a1a1a !important;
+    padding: 0 !important;
+    border: none !important;
+    display: block !important;
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+  }
+
+  .hljs {
+    background: transparent !important;
+    background-color: transparent !important;
+    color: #1a1a1a !important;
+  }
+
+  pre span, pre code span, .hljs span, code span,
+  [class*="hljs-"] {
+    color: #1a1a1a !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    text-decoration: none !important;
+    font-style: normal !important;
+  }
+
+  /* ========== Tables ========== */
+
+  table {
+    margin: 1em 0;
+    border-collapse: collapse;
+    width: 100%;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    background: #e8e8e8 !important;
+    page-break-after: avoid;
+  }
+
+  th {
+    font-weight: bold;
+    text-align: left;
+    padding: 0.5em;
+    border: 1px solid #999;
+    color: #000 !important;
+    background: #e8e8e8 !important;
+  }
+
+  td {
+    padding: 0.5em;
+    border: 1px solid #ccc;
+    color: #1a1a1a !important;
+  }
+
+  tbody tr:nth-child(even) {
+    background: #f9f9f9 !important;
+  }
+
+  tbody tr:nth-child(odd) {
+    background: white !important;
+  }
+
+  /* ========== Blockquotes ========== */
+
+  blockquote {
+    margin: 1em 0;
+    padding: 0.5em 0 0.5em 1em;
+    border-left: 4px solid #999 !important;
+    background: #f7f7f7 !important;
+    color: #333 !important;
+  }
+
+  blockquote p {
+    margin: 0.5em 0;
+  }
+
+  /* ========== Horizontal Rules ========== */
+
+  hr {
+    margin: 1.5em 0;
+    border: none;
+    border-top: 1px solid #999;
+    page-break-after: avoid;
+  }
+
+  /* ========== Links ========== */
+
+  a {
+    color: #0066cc !important;
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 9pt;
+    color: #666 !important;
+    word-break: break-all;
+  }
+
+  a[href^="#"]::after {
+    content: "";
+  }
+
+  /* ========== Images ========== */
+
+  img {
+    max-width: 100%;
+    height: auto;
+    page-break-inside: avoid;
+    margin: 1em 0;
+  }
+
+  /* ========== Diagrams (Mermaid, Graphviz) ========== */
+
+  svg {
+    max-width: 100%;
+    height: auto !important;
+    page-break-inside: avoid;
+  }
+
+  /* ========== Page Break Hints ========== */
+
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  pre, blockquote, table, figure {
+    page-break-inside: avoid;
+  }
+
+  /* ========== Print colour control ========== */
+
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/shortcuts/code-review/ai.shortcuts.ts

@@ -0,0 +1,25 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewAiShortcuts = defineShortcutScope({
+  id: 'review-ai',
+  title: 'AI Assistant',
+  shortcuts: {
+    submit: {
+      description: 'Send message',
+      bindings: ['Mod+Enter'],
+      section: 'AI Assistant',
+      hint: 'Available in the AI tab and the Ask AI inline input.',
+      displayOrder: 10,
+    },
+    cancel: {
+      description: 'Cancel inline AI input',
+      bindings: ['Escape'],
+      section: 'AI Assistant',
+      hint: 'Available in the Ask AI inline input.',
+      displayOrder: 20,
+    },
+  },
+});
+
+export const useReviewAiShortcuts = createShortcutScopeHook(reviewAiShortcuts);