@mrsf/markdown-it-mrsf 0.2.0 → 0.4.0

package/dist/rules/renderer.d.ts

@@ -1,9 +1,9 @@
 /**
- * MRSF markdown-it plugin — renderer rules.
+ * MRSF markdown-it plugin — renderer rules (overlay gutter architecture).
  *
- * Adds custom renderer rules for MRSF tokens:
- *   - mrsf_badge: renders badge + tooltip HTML (gutter)
- *   - mrsf_highlight_open/close: renders <mark> wrappers with inline tooltips
+ * Adds a single custom renderer rule:
+ *   - mrsf_data_script: renders a <script type="application/mrsf+json">
+ *     containing serialized comment data for the MrsfController.
  */
 /**
  * Install MRSF renderer rules on a markdown-it instance.

package/dist/style.css

@@ -1,10 +1,15 @@
 /*
- * Sidemark — markdown-it plugin default styles
+ * Sidemark — MRSF plugin default styles (overlay gutter architecture).
  *
- * Include via: import "@mrsf/markdown-it-mrsf/style.css"
- * or <link rel="stylesheet" href=".../@mrsf/markdown-it-mrsf/dist/style.css">
+ * 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 ────────────────────────────── */
@@ -22,6 +27,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;
 }
 
@@ -33,29 +39,36 @@
   }
 }
 
-/* ── Gutter container (left gutter mode) ────────────────── */
+/* ── Overlay root (created by controller) ────────────────── */
 
-.mrsf-gutter-container {
-  --mrsf-gutter-width: 44px;
+.mrsf-overlay-root {
   position: relative;
-  padding-left: var(--mrsf-gutter-width);
 }
 
-/* In left gutter mode, line-highlight must be static so the badge's
-   position: absolute resolves against the gutter container — not the
-   individual line element, which may be deeply nested inside lists. */
-.mrsf-gutter-container .mrsf-line-highlight {
-  position: static;
+.mrsf-gutter {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--mrsf-gutter-width);
+  pointer-events: none;
+  z-index: 10;
 }
 
-/* ── Line highlight ─────────────────────────────────────── */
+.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;
-  position: relative;
   transition: background 0.15s ease;
 }
 
@@ -63,6 +76,18 @@
   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 {
@@ -74,11 +99,9 @@
   line-height: 1;
   padding: 2px 6px;
   border-radius: 10px;
-  cursor: default;
+  cursor: pointer;
   user-select: none;
   white-space: nowrap;
-  vertical-align: middle;
-  margin-left: 6px;
 
   color: var(--mrsf-badge-fg);
   background: var(--mrsf-badge-bg);
@@ -100,56 +123,36 @@
   border-left-color: var(--mrsf-severity-medium);
 }
 
-/* ── Tooltip container ──────────────────────────────────── */
+/* ── Add button (in gutter) ─────────────────────────────── */
 
-.mrsf-tooltip-anchor {
-  position: relative;
-  display: inline-block;
-  vertical-align: baseline;
-}
-
-/* Gutter position: right (default) — float the badge to the right */
-.mrsf-tooltip-anchor.mrsf-gutter-right {
-  float: right;
-  margin-left: 8px;
-}
-
-.mrsf-tooltip-anchor.mrsf-gutter-right .mrsf-badge {
-  margin-left: 0;
-}
-
-/* Gutter position: tight — badge inline immediately before text */
-.mrsf-tooltip-anchor.mrsf-gutter-tight .mrsf-badge {
-  margin-right: 6px;
-  margin-left: 0;
-}
-
-/* Gutter position: left — badge in the left margin gutter.
-   Positioned against the gutter container (not the line element). */
-.mrsf-tooltip-anchor.mrsf-gutter-left {
-  position: absolute;
-  left: 4px;
+.mrsf-gutter-add {
+  opacity: 0;
+  pointer-events: none;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: var(--mrsf-tooltip-bg);
+  color: var(--mrsf-tooltip-fg);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.12s ease;
 }
 
-.mrsf-tooltip-anchor.mrsf-gutter-left .mrsf-badge {
-  margin-left: 0;
+/* Show add button on line hover (detected by controller via data attr) */
+[data-mrsf-line]:hover ~ .mrsf-gutter .mrsf-gutter-add,
+.mrsf-gutter-item:hover .mrsf-gutter-add {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-/* Tooltip for left-gutter badges */
-.mrsf-tooltip-anchor.mrsf-gutter-left > .mrsf-tooltip {
-  left: 0;
-  right: auto;
-}
-
-/* Inline highlight tooltip anchor */
-.mrsf-inline-anchor {
-  /* inherit inline-block from .mrsf-tooltip-anchor */
-}
+/* ── Tooltip (positioned by JS, appended to gutter item) ── */
 
 .mrsf-tooltip {
   display: none;
   position: absolute;
-  left: 0;
   top: 100%;
   z-index: 1000;
   min-width: 300px;
@@ -170,20 +173,19 @@
   color: var(--mrsf-tooltip-fg);
 }
 
-/* Right-aligned gutter: anchor tooltip to the right edge */
-.mrsf-tooltip-anchor.mrsf-gutter-right > .mrsf-tooltip {
-  left: auto;
-  right: 0;
+/* Left gutter: tooltip opens to the right */
+.mrsf-gutter-left .mrsf-tooltip {
+  left: 0;
+  right: auto;
 }
 
-/* Inline tooltip: smaller and anchored to the left of the highlight */
-.mrsf-inline-tooltip {
-  min-width: 260px;
+/* Right gutter: tooltip opens to the left */
+.mrsf-gutter-right .mrsf-tooltip {
+  left: auto;
+  right: 0;
 }
 
-/* Show tooltip on hover or focus-within (keyboard accessible) */
-.mrsf-tooltip-anchor:hover > .mrsf-tooltip,
-.mrsf-tooltip-anchor:focus-within > .mrsf-tooltip {
+.mrsf-tooltip.mrsf-tooltip-visible {
   display: block;
   animation: mrsf-fade-in 0.15s ease;
 }
@@ -194,11 +196,8 @@
 }
 
 /* ── Thread / Comment ───────────────────────────────────── */
-/* All inner elements use <span> for valid HTML inside <p>/<h> elements,
-   with display: block to maintain block layout. */
 
 .mrsf-thread {
-  display: block;
   padding: 4px 0;
 }
 
@@ -209,7 +208,6 @@
 }
 
 .mrsf-comment {
-  display: block;
   padding: 4px 0;
 }
 
@@ -221,7 +219,6 @@
 /* ── Replies ────────────────────────────────────────────── */
 
 .mrsf-replies {
-  display: block;
   margin-left: 16px;
   padding-left: 8px;
   border-left: 2px solid var(--mrsf-tooltip-border);
@@ -291,7 +288,6 @@
 /* ── Comment body ───────────────────────────────────────── */
 
 .mrsf-comment-body {
-  display: block;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -299,30 +295,92 @@
 /* ── Selected text quote in tooltip ─────────────────────── */
 
 .mrsf-selected-text {
-  display: block;
   font-family: monospace;
   font-size: 0.85em;
   background: rgba(127, 127, 127, 0.1);
   border-left: 3px solid rgba(127, 127, 127, 0.3);
-  padding: 4px 8px;
   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 ──────────────────────────────── */
+/* ── 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-highlight {
+.mrsf-inline-highlight {
   background: var(--mrsf-highlight-bg);
   border-bottom: 2px solid var(--mrsf-highlight-border);
   border-radius: 2px;
-  padding: 0 1px;
+  cursor: pointer;
   transition: background 0.15s ease;
 }
 
-.mrsf-highlight:hover {
-  background: rgba(255, 213, 79, 0.45);
+.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 ─────────────────────────── */
@@ -339,6 +397,15 @@
   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;
@@ -351,6 +418,63 @@
   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

@@ -55,6 +55,12 @@ export interface MrsfPluginOptions {
      * 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()). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrsf/markdown-it-mrsf",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "markdown-it plugin for rendering Sidemark/MRSF (Markdown Review Sidecar Format) review comments",
   "type": "module",
   "main": "./dist/index.js",