@mrsf/marked-mrsf 0.4.7

package/dist/style.css

@@ -0,0 +1,496 @@
+/*
+ * Sidemark — MRSF plugin default styles (overlay gutter architecture).
+ *
+ * Include via: import "@mrsf/plugin-shared/style.css"
+ * or <link rel="stylesheet" href=".../@mrsf/plugin-shared/dist/style.css">
+ *
+ * Customise with CSS custom properties (--mrsf-*).
+ *
+ * Layout:  The controller wraps the rendered markdown in an overlay root
+ * with position:relative, and creates absolute-positioned gutter columns
+ * on the left and/or right.  The plugins only add data-mrsf-line
+ * attributes — no visual DOM injection.
+ */
+
+/* ── Custom property defaults ────────────────────────────── */
+
+:root {
+  --mrsf-accent: #3794ff;
+  --mrsf-badge-bg: #007acc;
+  --mrsf-badge-fg: #fff;
+  --mrsf-badge-resolved-bg: #388a34;
+  --mrsf-add-bg: rgba(0, 122, 204, 0.12);
+  --mrsf-add-fg: #007acc;
+  --mrsf-add-border: rgba(0, 122, 204, 0.28);
+  --mrsf-tooltip-bg: #252526;
+  --mrsf-tooltip-fg: #cccccc;
+  --mrsf-tooltip-border: #454545;
+  --mrsf-highlight-bg: rgba(255, 213, 79, 0.25);
+  --mrsf-highlight-border: rgba(255, 213, 79, 0.7);
+  --mrsf-severity-high: #e74c3c;
+  --mrsf-severity-medium: #f39c12;
+  --mrsf-severity-low: #3498db;
+  --mrsf-gutter-width: 36px;
+  --mrsf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --mrsf-tooltip-bg: #f3f3f3;
+    --mrsf-tooltip-fg: #333333;
+    --mrsf-tooltip-border: #cccccc;
+  }
+}
+
+/* ── Overlay root (created by controller) ────────────────── */
+
+.mrsf-overlay-root {
+  position: relative;
+}
+
+.mrsf-gutter {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--mrsf-gutter-width);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.mrsf-gutter-left {
+  left: calc(-1 * var(--mrsf-gutter-width) - 8px);
+}
+
+.mrsf-gutter-right {
+  right: calc(-1 * var(--mrsf-gutter-width) - 8px);
+}
+
+/* ── Line highlight (CSS-only tinting for commented lines) ── */
+
+.mrsf-line-highlight {
+  border-left: 3px solid var(--mrsf-accent);
+  padding-left: 8px;
+  background: rgba(55, 148, 255, 0.06);
+  border-radius: 2px;
+  transition: background 0.15s ease;
+}
+
+.mrsf-line-highlight:hover {
+  background: rgba(55, 148, 255, 0.12);
+}
+
+/* ── Gutter items (badges & add buttons, positioned by JS) ── */
+
+.mrsf-gutter-item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+/* ── Badge ──────────────────────────────────────────────── */
+
+.mrsf-badge,
+.mrsf-gutter-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  min-height: 20px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  user-select: none;
+  white-space: nowrap;
+  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.mrsf-badge {
+  cursor: pointer;
+  color: var(--mrsf-badge-fg);
+  background: var(--mrsf-badge-bg);
+  border: 1px solid transparent;
+  border-left: 3px solid transparent;
+}
+
+.mrsf-badge-resolved {
+  background: var(--mrsf-badge-resolved-bg);
+  opacity: 0.7;
+}
+
+.mrsf-badge-severity-high {
+  border-left-color: var(--mrsf-severity-high);
+}
+
+.mrsf-badge-severity-medium {
+  border-left-color: var(--mrsf-severity-medium);
+}
+
+/* ── Add button (in gutter) ─────────────────────────────── */
+
+.mrsf-gutter-add {
+  appearance: none;
+  opacity: 0.38;
+  pointer-events: auto;
+  border: 1px solid var(--mrsf-add-border);
+  background: var(--mrsf-add-bg);
+  color: var(--mrsf-add-fg);
+  cursor: pointer;
+  font-family: var(--mrsf-font-family);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --mrsf-add-bg: rgba(0, 122, 204, 0.08);
+    --mrsf-add-border: rgba(0, 122, 204, 0.18);
+  }
+}
+
+.mrsf-gutter-add:hover,
+.mrsf-gutter-add:focus-visible {
+  opacity: 1;
+  background: rgba(0, 122, 204, 0.18);
+  border-color: rgba(0, 122, 204, 0.38);
+}
+
+.mrsf-gutter-add:focus-visible,
+.mrsf-badge:focus-visible {
+  outline: 2px solid var(--mrsf-accent);
+  outline-offset: 2px;
+}
+
+/* ── Tooltip (positioned by JS, appended to gutter item) ── */
+
+.mrsf-tooltip {
+  display: none;
+  position: absolute;
+  top: 100%;
+  z-index: 1000;
+  min-width: 300px;
+  max-width: 480px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px;
+  margin-top: 4px;
+  border-radius: 6px;
+
+  background: var(--mrsf-tooltip-bg);
+  border: 1px solid var(--mrsf-tooltip-border);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+
+  font-family: var(--mrsf-font-family);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--mrsf-tooltip-fg);
+}
+
+/* Left gutter: tooltip opens to the right */
+.mrsf-gutter-left .mrsf-tooltip {
+  left: 0;
+  right: auto;
+}
+
+/* Right gutter: tooltip opens to the left */
+.mrsf-gutter-right .mrsf-tooltip {
+  left: auto;
+  right: 0;
+}
+
+.mrsf-tooltip.mrsf-tooltip-visible {
+  display: block;
+  animation: mrsf-fade-in 0.15s ease;
+}
+
+@keyframes mrsf-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Thread / Comment ───────────────────────────────────── */
+
+.mrsf-thread {
+  padding: 4px 0;
+}
+
+.mrsf-thread + .mrsf-thread {
+  border-top: 1px solid var(--mrsf-tooltip-border);
+  margin-top: 4px;
+  padding-top: 8px;
+}
+
+.mrsf-comment {
+  padding: 4px 0;
+}
+
+.mrsf-comment.mrsf-resolved {
+  border-left: 2px solid var(--mrsf-badge-resolved-bg);
+  padding-left: 6px;
+}
+
+/* ── Replies ────────────────────────────────────────────── */
+
+.mrsf-replies {
+  margin-left: 16px;
+  padding-left: 8px;
+  border-left: 2px solid var(--mrsf-tooltip-border);
+}
+
+.mrsf-reply {
+  font-size: 12px;
+}
+
+/* ── Comment header ─────────────────────────────────────── */
+
+.mrsf-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 2px;
+}
+
+.mrsf-author {
+  font-weight: 600;
+}
+
+.mrsf-date {
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.mrsf-severity {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.mrsf-severity-high {
+  background: rgba(231, 76, 60, 0.2);
+  color: var(--mrsf-severity-high);
+}
+
+.mrsf-severity-medium {
+  background: rgba(243, 156, 18, 0.2);
+  color: var(--mrsf-severity-medium);
+}
+
+.mrsf-severity-low {
+  background: rgba(52, 152, 219, 0.2);
+  color: var(--mrsf-severity-low);
+}
+
+.mrsf-type {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  background: rgba(127, 127, 127, 0.15);
+  opacity: 0.8;
+}
+
+.mrsf-resolved-badge {
+  font-size: 10px;
+  color: var(--mrsf-badge-resolved-bg);
+  font-weight: 600;
+}
+
+/* ── Comment body ───────────────────────────────────────── */
+
+.mrsf-comment-body {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Selected text quote in tooltip ─────────────────────── */
+
+.mrsf-selected-text {
+  font-family: monospace;
+  font-size: 0.85em;
+  background: rgba(127, 127, 127, 0.1);
+  border-left: 3px solid rgba(127, 127, 127, 0.3);
+  margin: 4px 0;
+  border-radius: 2px;
+}
+
+.mrsf-selected-text-summary {
+  padding: 4px 8px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  list-style: none;
+  color: var(--mrsf-fg, inherit);
+  opacity: 0.7;
+}
+
+.mrsf-selected-text-summary::-webkit-details-marker {
+  display: none;
+}
+
+.mrsf-selected-text-summary::before {
+  content: "▶ ";
+  font-size: 0.7em;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+
+.mrsf-selected-text[open] > .mrsf-selected-text-summary {
+  display: none;
+}
+
+.mrsf-selected-text-full {
+  display: block;
+  padding: 4px 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Inline text highlight (overlay positioned by JS) ───── */
+
+.mrsf-highlight-overlay {
+  position: absolute;
+  background: var(--mrsf-highlight-bg);
+  border-bottom: 2px solid var(--mrsf-highlight-border);
+  border-radius: 2px;
+  pointer-events: none;
+  transition: background 0.15s ease;
+}
+
+/* ── Inline comment text highlight (<mark> by controller) ── */
+
+.mrsf-inline-highlight {
+  background: var(--mrsf-highlight-bg);
+  border-bottom: 2px solid var(--mrsf-highlight-border);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.mrsf-inline-highlight:hover {
+  background: rgba(255, 213, 79, 0.4);
+}
+
+/* Inline tooltip (appended to document.body, positioned by JS) */
+.mrsf-inline-tooltip {
+  position: fixed;
+  z-index: 1100;
+  min-width: 300px;
+  max-width: 480px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--mrsf-tooltip-bg);
+  border: 1px solid var(--mrsf-tooltip-border);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  font-family: var(--mrsf-font-family);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--mrsf-tooltip-fg);
+  white-space: normal;
+  animation: mrsf-fade-in 0.15s ease;
+}
+
+/* ── Interactive action buttons ─────────────────────────── */
+
+.mrsf-actions {
+  display: none;
+  gap: 4px;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--mrsf-tooltip-border);
+}
+
+.mrsf-interactive .mrsf-actions {
+  display: flex;
+}
+
+.mrsf-tooltip-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--mrsf-tooltip-border);
+}
+
+.mrsf-action-btn {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: transparent;
+  color: var(--mrsf-tooltip-fg);
+  cursor: pointer;
+  font-family: var(--mrsf-font-family);
+  transition: background 0.15s ease;
+}
+
+.mrsf-action-btn.mrsf-action-danger {
+  color: #d13438;
+  border-color: rgba(209, 52, 56, 0.7);
+}
+
+.mrsf-action-btn:hover {
+  background: rgba(127, 127, 127, 0.2);
+}
+
+/* ── Floating "Add comment" button (selection-based) ────── */
+
+/* ── Orphaned comments section (bottom of container) ────── */
+
+.mrsf-orphaned-section {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 2px dashed var(--mrsf-tooltip-border);
+}
+
+.mrsf-orphaned-heading {
+  font-family: var(--mrsf-font-family);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #999;
+  margin-bottom: 8px;
+}
+
+.mrsf-orphaned-thread {
+  padding: 8px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: rgba(127, 127, 127, 0.06);
+  opacity: 0.7;
+  font-family: var(--mrsf-font-family);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--mrsf-tooltip-fg);
+}
+
+.mrsf-add-inline-button {
+  position: absolute;
+  z-index: 1200;
+  display: none;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: var(--mrsf-tooltip-bg);
+  color: var(--mrsf-tooltip-fg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  font-family: var(--mrsf-font-family);
+}
+
+.mrsf-add-inline-button:hover {
+  background: rgba(127, 127, 127, 0.2);
+}

package/dist/types.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Shared type definitions for MRSF rendering plugins.
+ *
+ * These types are used by both @mrsf/markdown-it-mrsf and @mrsf/rehype-mrsf.
+ */
+import type { MrsfDocument } from "@mrsf/cli";
+/** Base options shared by all MRSF rendering plugins. */
+export interface MrsfPluginOptions {
+    /**
+     * Path to the Markdown document on disk.
+     * Used for auto-discovery of the sidecar file via `@mrsf/cli`.
+     */
+    documentPath?: string;
+    /**
+     * Explicit path to the `.review.yaml` or `.review.json` sidecar file.
+     * Takes precedence over auto-discovery.
+     */
+    sidecarPath?: string;
+    /**
+     * Pre-loaded MRSF sidecar data.
+     * Takes precedence over `loader`, `sidecarPath`, and `documentPath`.
+     * Enables browser use, custom pipelines, and testing.
+     */
+    comments?: MrsfDocument;
+    /**
+     * Custom loader function that returns sidecar data.
+     * Takes precedence over `sidecarPath` and `documentPath`.
+     * Useful for integrations that manage their own sidecar state.
+     */
+    loader?: (options: MrsfPluginOptions, env?: unknown) => MrsfDocument | null;
+    /** Whether to show resolved comments (default: true). */
+    showResolved?: boolean;
+    /**
+     * How serialized review data should be embedded into rendered HTML.
+     * - `script`: emits `<script type="application/mrsf+json">` (default)
+     * - `element`: emits a hidden element with JSON in a data attribute
+     */
+    dataContainer?: "script" | "element";
+    /**
+     * Element id used when `dataContainer` is set to `element`.
+     * Default: `mrsf-comment-data`.
+     */
+    dataElementId?: string;
+    /**
+     * Enable interactive mode — adds action buttons with `data-mrsf-action`
+     * attributes for host applications to hook into (default: false).
+     */
+    interactive?: boolean;
+    /**
+     * Position of the gutter badge relative to the line content.
+     * - `'left'`: badge in a left margin gutter, outside the content area
+     * - `'right'`: badge floated to the right of the content (default)
+     */
+    gutterPosition?: "left" | "right";
+    /**
+     * Whether to show the gutter badge on lines that have inline-highlighted
+     * comments (i.e. comments with `selected_text`). When false, lines where
+     * ALL comments have inline highlights will not get a gutter badge — the
+     * inline tooltip is the only way to view the comment. Default: true.
+     */
+    gutterForInline?: boolean;
+    /**
+     * Whether to render inline text highlights for comments that have
+     * `selected_text`. When false, only gutter badges are shown.
+     * Default: true.
+     */
+    inlineHighlights?: boolean;
+    /**
+     * Whether to add a `mrsf-line-highlight` CSS class on block elements
+     * that have comments. Provides a subtle visual tint on commented lines.
+     * Default: false.
+     */
+    lineHighlight?: boolean;
+    /** Color scheme hint (default: 'auto'). */
+    theme?: "light" | "dark" | "auto";
+    /** Working directory for sidecar discovery (default: process.cwd()). */
+    cwd?: string;
+}
+/** Slim comment shape used internally after loading. */
+export interface SlimComment {
+    id: string;
+    author: string;
+    text: string;
+    line: number | null;
+    end_line: number | null;
+    start_column: number | null;
+    end_column: number | null;
+    selected_text: string | null;
+    resolved: boolean;
+    reply_to: string | null;
+    severity: string | null;
+    type: string | null;
+    timestamp: string | null;
+}
+/** A root comment with its threaded replies. */
+export interface CommentThread {
+    comment: SlimComment;
+    replies: SlimComment[];
+}
+/** Comments grouped by their anchored source line. */
+export type LineMap = Map<number, CommentThread[]>;
+/** A function that loads sidecar data from plugin options and render context. */
+export type CommentLoader = (options: MrsfPluginOptions, env?: unknown) => MrsfDocument | null;
+//# sourceMappingURL=types.d.ts.map

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@mrsf/marked-mrsf",
+  "version": "0.4.7",
+  "description": "Marked plugin for rendering Sidemark/MRSF review comments",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": {
+        "import": "./dist/browser.js",
+        "types": "./dist/browser.d.ts"
+      },
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./browser": {
+      "import": "./dist/browser.js",
+      "types": "./dist/browser.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./controller": {
+      "import": "./dist/controller.js",
+      "types": "./dist/controller.d.ts"
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "node ../sync-types.mjs && node esbuild.config.mjs",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "cp ../../LICENSE . && npm run build && npm test",
+    "postpublish": "rm -f LICENSE"
+  },
+  "keywords": [
+    "marked",
+    "marked-plugin",
+    "markdown",
+    "review",
+    "sidecar",
+    "mrsf",
+    "sidemark",
+    "comments",
+    "annotation",
+    "rendering"
+  ],
+  "license": "MIT",
+  "author": "Wictor Wilén (https://github.com/wictorwilen)",
+  "homepage": "https://github.com/wictorwilen/MRSF/tree/main/plugins/marked#readme",
+  "bugs": {
+    "url": "https://github.com/wictorwilen/MRSF/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wictorwilen/MRSF.git",
+    "directory": "plugins/marked"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.js.map",
+    "dist/**/*.d.ts",
+    "dist/style.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@mrsf/cli": "^0.3.0",
+    "marked": "^16.4.2"
+  },
+  "devDependencies": {
+    "@mrsf/plugin-shared": "file:../shared",
+    "@types/node": "^22.13.10",
+    "esbuild": "^0.27.3",
+    "typescript": "^5.8.2",
+    "vitest": "^3.0.9"
+  }
+}