@nuasite/notes 0.1.0

package/src/overlay/styles.css

@@ -0,0 +1,526 @@
+/**
+ * @nuasite/notes overlay styles.
+ *
+ * Imported via Vite's `?inline` query and injected into a shadow root, so
+ * these styles never leak into the host page (and the host page can't
+ * accidentally style notes UI). Variables on `:host` are the only knobs.
+ */
+
+:host {
+	--notes-bg: #ffffff;
+	--notes-fg: #0f172a;
+	--notes-muted: #64748b;
+	--notes-border: #e2e8f0;
+	--notes-accent: #f59e0b;
+	--notes-accent-fg: #1f2937;
+	--notes-danger: #dc2626;
+	--notes-success: #16a34a;
+	--notes-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
+	--notes-radius: 10px;
+	--notes-sidebar-w: 360px;
+	--notes-z: 2147483600;
+
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	font-size: 14px;
+	line-height: 1.45;
+	color: var(--notes-fg);
+	-webkit-font-smoothing: antialiased;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+button {
+	font: inherit;
+	cursor: pointer;
+	border: none;
+	background: none;
+	color: inherit;
+	padding: 0;
+}
+
+input,
+textarea {
+	font: inherit;
+	color: inherit;
+}
+
+.notes-root {
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+	z-index: var(--notes-z);
+}
+
+/* Toolbar (top, full width) */
+.notes-toolbar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 44px;
+	background: var(--notes-bg);
+	border-bottom: 1px solid var(--notes-border);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 16px;
+	box-shadow: var(--notes-shadow);
+	pointer-events: auto;
+}
+
+.notes-toolbar__brand {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-weight: 600;
+}
+
+.notes-toolbar__dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--notes-accent);
+	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+}
+
+.notes-toolbar__page {
+	color: var(--notes-muted);
+	font-weight: 400;
+	margin-left: 12px;
+	font-size: 13px;
+}
+
+.notes-toolbar__actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.notes-btn {
+	padding: 6px 12px;
+	border-radius: 6px;
+	background: #f1f5f9;
+	color: var(--notes-fg);
+	font-size: 13px;
+	font-weight: 500;
+	transition: background 0.15s;
+}
+
+.notes-btn:hover {
+	background: #e2e8f0;
+}
+
+.notes-btn--primary {
+	background: var(--notes-accent);
+	color: var(--notes-accent-fg);
+}
+
+.notes-btn--primary:hover {
+	background: #d97706;
+	color: #ffffff;
+}
+
+.notes-btn--ghost {
+	background: transparent;
+	color: var(--notes-muted);
+}
+
+.notes-btn--ghost:hover {
+	color: var(--notes-fg);
+	background: #f1f5f9;
+}
+
+.notes-btn--danger {
+	color: var(--notes-danger);
+}
+
+/* Sidebar (right side) */
+.notes-sidebar {
+	position: fixed;
+	top: 44px;
+	right: 0;
+	bottom: 0;
+	width: var(--notes-sidebar-w);
+	background: var(--notes-bg);
+	border-left: 1px solid var(--notes-border);
+	box-shadow: var(--notes-shadow);
+	display: flex;
+	flex-direction: column;
+	pointer-events: auto;
+}
+
+.notes-sidebar__header {
+	padding: 16px 16px 12px;
+	border-bottom: 1px solid var(--notes-border);
+}
+
+.notes-sidebar__title {
+	font-size: 16px;
+	font-weight: 600;
+	margin: 0 0 4px;
+}
+
+.notes-sidebar__meta {
+	font-size: 12px;
+	color: var(--notes-muted);
+}
+
+.notes-sidebar__list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.notes-sidebar__empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--notes-muted);
+	font-size: 13px;
+	line-height: 1.5;
+}
+
+.notes-sidebar__hint {
+	font-size: 12px;
+	color: var(--notes-muted);
+	margin-top: 6px;
+}
+
+/* Item card */
+.notes-item {
+	border: 1px solid var(--notes-border);
+	border-radius: var(--notes-radius);
+	padding: 12px;
+	background: #ffffff;
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.notes-item:hover {
+	border-color: #cbd5e1;
+}
+
+.notes-item--active {
+	border-color: var(--notes-accent);
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
+}
+
+.notes-item--resolved {
+	opacity: 0.55;
+}
+
+.notes-item__head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 6px;
+}
+
+.notes-item__author {
+	font-weight: 600;
+	font-size: 13px;
+}
+
+.notes-item__time {
+	font-size: 11px;
+	color: var(--notes-muted);
+}
+
+.notes-item__snippet {
+	font-size: 12px;
+	color: var(--notes-muted);
+	background: #f8fafc;
+	border-left: 3px solid var(--notes-border);
+	padding: 6px 8px;
+	margin-bottom: 6px;
+	border-radius: 0 4px 4px 0;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.notes-item__body {
+	font-size: 13px;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.notes-item__actions {
+	display: flex;
+	gap: 6px;
+	margin-top: 10px;
+	padding-top: 10px;
+	border-top: 1px solid #f1f5f9;
+}
+
+.notes-item__badge {
+	display: inline-block;
+	font-size: 10px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 2px 6px;
+	border-radius: 4px;
+	margin-right: 6px;
+}
+
+.notes-item__badge--comment {
+	background: #dbeafe;
+	color: #1e40af;
+}
+
+.notes-item__badge--suggestion {
+	background: #fef3c7;
+	color: #92400e;
+}
+
+.notes-item__badge--resolved {
+	background: #dcfce7;
+	color: #166534;
+}
+
+/* Element highlight ring */
+.notes-highlight {
+	position: fixed;
+	pointer-events: none;
+	border: 2px solid var(--notes-accent);
+	border-radius: 4px;
+	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
+	transition: all 0.08s ease-out;
+}
+
+.notes-highlight--persistent {
+	border-color: rgba(245, 158, 11, 0.6);
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
+}
+
+/* Comment popover */
+.notes-popover {
+	position: fixed;
+	width: 320px;
+	background: var(--notes-bg);
+	border: 1px solid var(--notes-border);
+	border-radius: var(--notes-radius);
+	box-shadow: var(--notes-shadow);
+	padding: 14px;
+	pointer-events: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.notes-popover__title {
+	font-size: 13px;
+	font-weight: 600;
+	margin: 0;
+}
+
+.notes-popover__snippet {
+	font-size: 12px;
+	color: var(--notes-muted);
+	background: #f8fafc;
+	border-left: 3px solid var(--notes-border);
+	padding: 6px 8px;
+	border-radius: 0 4px 4px 0;
+	max-height: 60px;
+	overflow: hidden;
+}
+
+.notes-popover textarea {
+	width: 100%;
+	min-height: 80px;
+	resize: vertical;
+	border: 1px solid var(--notes-border);
+	border-radius: 6px;
+	padding: 8px 10px;
+	background: #ffffff;
+	outline: none;
+}
+
+.notes-popover textarea:focus {
+	border-color: var(--notes-accent);
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+}
+
+.notes-popover input[type='text'] {
+	border: 1px solid var(--notes-border);
+	border-radius: 6px;
+	padding: 6px 10px;
+	background: #ffffff;
+	outline: none;
+}
+
+.notes-popover input[type='text']:focus {
+	border-color: var(--notes-accent);
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+}
+
+.notes-popover__row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Selection tooltip */
+.notes-selection-tooltip {
+	position: fixed;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 6px;
+	background: #0f172a;
+	color: #ffffff;
+	border-radius: 8px;
+	box-shadow: var(--notes-shadow);
+	pointer-events: auto;
+	z-index: calc(var(--notes-z) + 5);
+}
+
+.notes-selection-tooltip .notes-btn {
+	background: rgba(255, 255, 255, 0.08);
+	color: #ffffff;
+	font-size: 12px;
+	padding: 4px 8px;
+}
+
+.notes-selection-tooltip .notes-btn--primary {
+	background: var(--notes-accent);
+	color: var(--notes-accent-fg);
+}
+
+.notes-selection-tooltip .notes-btn--ghost {
+	color: #e2e8f0;
+}
+
+.notes-selection-tooltip .notes-btn--ghost:hover {
+	background: rgba(255, 255, 255, 0.16);
+	color: #ffffff;
+}
+
+/* Suggest popover variations */
+.notes-popover--suggest {
+	width: 360px;
+}
+
+.notes-popover__label {
+	display: block;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--notes-muted);
+	margin-bottom: 4px;
+}
+
+.notes-popover__original {
+	background: #fef3c7;
+	border: 1px solid #fde68a;
+	border-radius: 6px;
+	padding: 8px 10px;
+	font-size: 13px;
+	color: #78350f;
+	max-height: 80px;
+	overflow-y: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.notes-strikethrough {
+	text-decoration: line-through;
+	text-decoration-color: rgba(220, 38, 38, 0.6);
+	text-decoration-thickness: 2px;
+}
+
+/* Diff preview in sidebar */
+.notes-diff {
+	font-size: 13px;
+	border-radius: 6px;
+	background: #f8fafc;
+	border: 1px solid var(--notes-border);
+	overflow: hidden;
+	margin-bottom: 8px;
+}
+
+.notes-diff__row {
+	padding: 6px 10px;
+	display: flex;
+	gap: 6px;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.notes-diff__row--del {
+	background: #fef2f2;
+	color: #7f1d1d;
+	border-bottom: 1px solid #fee2e2;
+}
+
+.notes-diff__row--ins {
+	background: #f0fdf4;
+	color: #14532d;
+}
+
+.notes-diff__marker {
+	font-weight: 700;
+	font-family: ui-monospace, SFMono-Regular, monospace;
+	width: 12px;
+	flex-shrink: 0;
+	text-align: center;
+}
+
+.notes-item__rationale {
+	font-size: 12px;
+	color: var(--notes-muted);
+	margin-bottom: 6px;
+	font-style: italic;
+}
+
+.notes-item__rationale-label {
+	font-style: normal;
+	font-weight: 600;
+	color: var(--notes-fg);
+	margin-right: 4px;
+}
+
+/* Stale warning */
+.notes-stale {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	background: #fef3c7;
+	border: 1px solid #fde68a;
+	color: #92400e;
+	font-size: 12px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	margin-bottom: 8px;
+}
+
+.notes-stale__icon {
+	font-size: 14px;
+}
+
+/* Persistent highlight variant for suggestion ranges */
+.notes-highlight--suggestion {
+	border-color: rgba(250, 204, 21, 0.9);
+	box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18);
+	background: rgba(254, 243, 199, 0.25);
+}
+
+/* Banner shown when notes API fails to load */
+.notes-banner {
+	position: fixed;
+	top: 56px;
+	left: 16px;
+	right: calc(var(--notes-sidebar-w) + 16px);
+	padding: 10px 14px;
+	background: #fef2f2;
+	border: 1px solid #fecaca;
+	color: #991b1b;
+	border-radius: var(--notes-radius);
+	font-size: 13px;
+	pointer-events: auto;
+}

package/src/overlay/types.ts

@@ -0,0 +1,66 @@
+/**
+ * Client-side types used by the Preact overlay.
+ *
+ * The overlay only knows what comes back from the dev API, so we duplicate
+ * the storage types here in their JSON-friendly form (no Date objects, no
+ * file handles). Keeping a separate copy lets the overlay bundle ship
+ * without pulling in node-only modules through `src/storage`.
+ */
+
+export type NoteType = 'comment' | 'suggestion'
+export type NoteStatus = 'open' | 'resolved' | 'applied' | 'rejected' | 'stale'
+
+export interface NoteRange {
+	anchorText: string
+	originalText: string
+	suggestedText: string
+	rationale?: string
+}
+
+export interface NoteReply {
+	id: string
+	author: string
+	body: string
+	createdAt: string
+}
+
+export interface NoteItem {
+	id: string
+	type: NoteType
+	targetCmsId: string
+	targetSourcePath?: string
+	targetSourceLine?: number
+	targetSnippet?: string
+	range: NoteRange | null
+	body: string
+	author: string
+	createdAt: string
+	updatedAt?: string
+	status: NoteStatus
+	replies: NoteReply[]
+}
+
+export interface NotesPageFile {
+	page: string
+	lastUpdated: string
+	items: NoteItem[]
+}
+
+/** Lightweight subset of the CMS manifest entry the overlay needs. */
+export interface CmsManifestEntry {
+	tag?: string
+	text?: string
+	sourcePath?: string
+	sourceLine?: number
+	sourceSnippet?: string
+}
+
+export interface CmsPageManifest {
+	page: string
+	entries?: Record<string, CmsManifestEntry>
+}
+
+/** Author info — Phase 2 reads it from localStorage with a default. */
+export interface NotesAuthor {
+	name: string
+}

package/src/storage/id-gen.ts

@@ -0,0 +1,32 @@
+/**
+ * ID generators for notes and replies.
+ *
+ * Format: `n-YYYY-MM-DD-xxxxxx` for items and `r-YYYY-MM-DD-xxxxxx` for replies.
+ * The date prefix makes JSON files trivially scannable in a text editor; the
+ * 6-character random suffix is enough for collision-free local-first usage.
+ */
+
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz0123456789'
+
+function todayIsoDate(now: Date = new Date()): string {
+	const y = now.getUTCFullYear()
+	const m = String(now.getUTCMonth() + 1).padStart(2, '0')
+	const d = String(now.getUTCDate()).padStart(2, '0')
+	return `${y}-${m}-${d}`
+}
+
+function randomSuffix(length = 6): string {
+	let out = ''
+	for (let i = 0; i < length; i++) {
+		out += ALPHABET[Math.floor(Math.random() * ALPHABET.length)]
+	}
+	return out
+}
+
+export function generateNoteId(now: Date = new Date()): string {
+	return `n-${todayIsoDate(now)}-${randomSuffix()}`
+}
+
+export function generateReplyId(now: Date = new Date()): string {
+	return `r-${todayIsoDate(now)}-${randomSuffix()}`
+}