@vscode/markdown-editor 0.0.2-12 → 0.0.2-13

package/dist/markdown-editor.css

@@ -0,0 +1 @@
+.vscode-comments-light,.vscode-comments-dark{--vscode-cornerRadius-small: 4px;--vscode-cornerRadius-medium: 6px;--vscode-cornerRadius-large: 8px;--vscode-strokeThickness: 1px;--vscode-shadow-lg: 0 0 12px rgba(0, 0, 0, .14);--monaco-monospace-font: "SF Mono", Monaco, Menlo, Courier, monospace;font-family:var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);font-size:13px;color:var(--vscode-foreground);background:var(--vscode-editor-background)}.vscode-comments-light{--vscode-agentFeedbackEditorWidget-background: #eeeeee;--vscode-agentFeedbackEditorWidget-border: rgba(59, 59, 59, .35);--vscode-editorWidget-background: #f8f8f8;--vscode-editorWidget-border: rgba(59, 59, 59, .2);--vscode-widget-border: #e5e5e5;--vscode-foreground: #3b3b3b;--vscode-descriptionForeground: #3b3b3b;--vscode-list-hoverBackground: #f2f2f2;--vscode-list-activeSelectionBackground: #e8e8e8;--vscode-list-activeSelectionForeground: #000000;--vscode-toolbar-hoverBackground: rgba(184, 184, 184, .31);--vscode-charts-purple: #652d90;--vscode-input-background: #ffffff;--vscode-input-foreground: #3b3b3b;--vscode-input-placeholderForeground: #767676;--vscode-focusBorder: #005fb8;--vscode-editorGutter-modifiedBackground: #1b81a8;--vscode-button-background: #005fb8;--vscode-button-foreground: #ffffff;--vscode-button-hoverBackground: #0258a8;--vscode-button-border: rgba(0, 0, 0, .1);--vscode-button-secondaryBackground: #e5e5e5;--vscode-button-secondaryForeground: #3b3b3b;--vscode-button-secondaryHoverBackground: #cccccc;--vscode-editor-background: #ffffff;--vscode-editor-foreground: #3b3b3b}.vscode-comments-dark{--vscode-agentFeedbackEditorWidget-background: #222222;--vscode-agentFeedbackEditorWidget-border: rgba(204, 204, 204, .35);--vscode-editorWidget-background: #202020;--vscode-editorWidget-border: rgba(204, 204, 204, .2);--vscode-widget-border: #313131;--vscode-foreground: #cccccc;--vscode-descriptionForeground: #9d9d9d;--vscode-list-hoverBackground: #2a2d2e;--vscode-list-activeSelectionBackground: #04395e;--vscode-list-activeSelectionForeground: #ffffff;--vscode-toolbar-hoverBackground: rgba(90, 93, 94, .31);--vscode-charts-purple: #b180d7;--vscode-input-background: #313131;--vscode-input-foreground: #cccccc;--vscode-input-placeholderForeground: #989898;--vscode-focusBorder: #0078d4;--vscode-editorGutter-modifiedBackground: #1b81a8;--vscode-button-background: #0078d4;--vscode-button-foreground: #ffffff;--vscode-button-hoverBackground: #026ec1;--vscode-button-border: rgba(255, 255, 255, .1);--vscode-button-secondaryBackground: transparent;--vscode-button-secondaryForeground: #cccccc;--vscode-button-secondaryHoverBackground: #2b2b2b;--vscode-editor-background: #1f1f1f;--vscode-editor-foreground: #cccccc}.agent-feedback-widget .codicon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto}.agent-feedback-widget .codicon svg{display:block;width:16px;height:16px}.agent-feedback-widget .monaco-action-bar .actions-container{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}.agent-feedback-widget .monaco-action-bar .action-item{display:flex}.agent-feedback-widget .monaco-action-bar .action-label{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--vscode-cornerRadius-small);color:var(--vscode-foreground);cursor:pointer;text-decoration:none}.agent-feedback-widget .monaco-action-bar .action-label:hover{background-color:var(--vscode-toolbar-hoverBackground)}.agent-feedback-widget{position:absolute;max-width:280px;min-width:180px;background-color:var(--vscode-agentFeedbackEditorWidget-background, var(--vscode-editorWidget-background));border:var(--vscode-strokeThickness) solid var(--vscode-agentFeedbackEditorWidget-border, var(--vscode-editorWidget-border, var(--vscode-contrastBorder)));border-radius:var(--vscode-cornerRadius-large);box-shadow:var(--vscode-shadow-lg);font-size:var(--vscode-agents-fontSize-label1);line-height:1.4;opacity:0;transition:opacity .2s ease-in-out;z-index:10}.hc-black .agent-feedback-widget,.hc-light .agent-feedback-widget{box-shadow:none}.agent-feedback-widget.visible{opacity:1}.agent-feedback-widget:focus{outline:none}.agent-feedback-widget.fadeOut{animation:agentFeedbackFadeOut .15s ease-out forwards}@keyframes agentFeedbackFadeOut{0%{opacity:1}to{opacity:0}}.agent-feedback-widget-arrow{position:absolute;left:-6px;top:11px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--vscode-agentFeedbackEditorWidget-border, var(--vscode-editorWidget-border, var(--vscode-contrastBorder)));display:none}.agent-feedback-widget.collapsed .agent-feedback-widget-arrow{display:none}.agent-feedback-widget-arrow:after{content:"";position:absolute;left:2px;top:-5px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid var(--vscode-agentFeedbackEditorWidget-background, var(--vscode-editorWidget-background))}.agent-feedback-widget-header{display:flex;align-items:center;padding:4px 4px 4px 8px;border-bottom:1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border));border-radius:var(--vscode-cornerRadius-large) var(--vscode-cornerRadius-large) 0 0;overflow:hidden;cursor:pointer;gap:6px}.agent-feedback-widget.collapsed .agent-feedback-widget-header{border-bottom:none;border-radius:var(--vscode-cornerRadius-large)}.agent-feedback-widget-header:hover{background-color:var(--vscode-list-hoverBackground)}.agent-feedback-widget-title{font-weight:var(--vscode-agents-fontWeight-semiBold);line-height:16px;color:var(--vscode-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.agent-feedback-widget-spacer{flex:1}.agent-feedback-widget-toggle{display:flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:var(--vscode-cornerRadius-medium);cursor:pointer;color:var(--vscode-foreground);opacity:.7;transition:opacity .1s}.agent-feedback-widget-toggle:hover{opacity:1;background-color:var(--vscode-toolbar-hoverBackground)}.agent-feedback-widget-body{transition:max-height .2s ease-in-out,padding .2s ease-in-out;border-radius:0 0 var(--vscode-cornerRadius-large) var(--vscode-cornerRadius-large);overflow:hidden}.agent-feedback-widget-body.collapsed{max-height:0;overflow:hidden;padding:0}.agent-feedback-widget-item{display:flex;flex-direction:column;padding:4px 4px 8px 8px;border-bottom:1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border));cursor:pointer;position:relative;gap:6px}.agent-feedback-widget-item:last-child{border-bottom:none}.agent-feedback-widget-item:hover{background-color:var(--vscode-list-hoverBackground)}.agent-feedback-widget-item.focused{background-color:var(--vscode-list-activeSelectionBackground);color:var(--vscode-list-activeSelectionForeground)}.agent-feedback-widget-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.agent-feedback-widget-item-meta{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.agent-feedback-widget-item-actions{margin-left:auto;flex:0 0 auto;opacity:0;visibility:hidden;pointer-events:none}.agent-feedback-widget-item:hover .agent-feedback-widget-item-actions{opacity:1;visibility:visible;pointer-events:auto}.agent-feedback-widget-item-type{display:inline-flex;align-items:center;padding:2px 6px;border-radius:var(--vscode-cornerRadius-small);font-size:var(--vscode-agents-fontSize-label3);font-weight:var(--vscode-agents-fontWeight-semiBold);letter-spacing:.2px;background:color-mix(in srgb,var(--vscode-editorWidget-border, var(--vscode-widget-border)) 25%,transparent);color:var(--vscode-descriptionForeground)}.agent-feedback-widget-item-prReview .agent-feedback-widget-item-type,.agent-feedback-widget-item-agentFeedback .agent-feedback-widget-item-type{background:color-mix(in srgb,var(--vscode-charts-purple) 22%,var(--vscode-editorWidget-background));color:var(--vscode-charts-purple)}.agent-feedback-widget-line-info{font-size:var(--vscode-agents-fontSize-label3);font-weight:var(--vscode-agents-fontWeight-semiBold);color:var(--vscode-descriptionForeground);text-transform:uppercase;letter-spacing:.5px}.agent-feedback-widget-text{color:var(--vscode-foreground);word-wrap:break-word;user-select:text;-webkit-user-select:text;cursor:text}.agent-feedback-widget-text .rendered-markdown p{margin:0}.agent-feedback-widget-text .rendered-markdown code{font-family:var(--monaco-monospace-font);font-size:var(--vscode-agents-fontSize-label3);padding:1px 4px;border-radius:var(--vscode-cornerRadius-small);background:color-mix(in srgb,var(--vscode-editorWidget-border, var(--vscode-widget-border)) 25%,transparent)}.agent-feedback-widget-suggestion{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:0 8px 4px 12px}.agent-feedback-widget-item-prReview .agent-feedback-widget-suggestion{border-left:1px solid color-mix(in srgb,var(--vscode-charts-purple) 50%,transparent)}.agent-feedback-widget-suggestion-header{font-size:var(--vscode-agents-fontSize-label3);font-weight:var(--vscode-agents-fontWeight-semiBold);text-transform:uppercase;letter-spacing:.4px;color:var(--vscode-descriptionForeground)}.agent-feedback-widget-suggestion-edit{display:flex;flex-direction:column;gap:4px}.agent-feedback-widget-suggestion-text{margin:0;padding:6px 8px;border-radius:var(--vscode-cornerRadius-small);overflow-x:auto;white-space:pre-wrap;font-family:var(--monaco-monospace-font);font-size:var(--vscode-agents-fontSize-label3);line-height:1.45;background:var(--vscode-editorWidget-background);user-select:text;-webkit-user-select:text;cursor:text}.agent-feedback-widget-range-glyph{margin-left:8px;z-index:5;border-left:2px solid var(--vscode-editorGutter-modifiedBackground)}.agent-feedback-widget-text.editing{padding:0 4px 0 0}.agent-feedback-widget-edit-textarea{width:100%;min-height:22px;padding:4px 6px;border:1px solid var(--vscode-focusBorder);border-radius:var(--vscode-cornerRadius-small);background:var(--vscode-input-background);color:var(--vscode-input-foreground);font:inherit;font-size:12px;line-height:1.4;resize:none;overflow:hidden;box-sizing:border-box}.agent-feedback-widget-edit-textarea:focus{outline:none;border-color:var(--vscode-focusBorder)}.agent-feedback-widget-replies{display:flex;flex-direction:column;gap:4px}.agent-feedback-widget-reply{padding-top:4px;border-top:1px dashed color-mix(in srgb,var(--vscode-editorWidget-border, var(--vscode-widget-border)) 60%,transparent)}.agent-feedback-widget-reply-text{color:var(--vscode-foreground);word-wrap:break-word;user-select:text;-webkit-user-select:text;cursor:text}.agent-feedback-widget-reply-text .rendered-markdown p{margin:0}.agent-feedback-widget-reply-text .rendered-markdown code{font-family:var(--monaco-monospace-font);font-size:var(--vscode-agents-fontSize-label3);padding:2px 4px;border-radius:var(--vscode-cornerRadius-small);background:color-mix(in srgb,var(--vscode-editorWidget-border, var(--vscode-widget-border)) 25%,transparent)}.agent-feedback-widget-add-reply{padding-top:4px;border-top:1px dashed color-mix(in srgb,var(--vscode-editorWidget-border, var(--vscode-widget-border)) 60%,transparent)}.agent-feedback-widget-add-reply .agent-feedback-widget-edit-textarea::placeholder{color:var(--vscode-input-placeholderForeground);opacity:1}.agent-feedback-widget-actions-bar{display:flex;gap:6px;margin-top:4px}.agent-feedback-widget-actions-bar .monaco-button{flex:1;padding:2px 10px;width:auto;font-size:var(--vscode-agents-fontSize-label2);line-height:18px}.vscode-comments-light{--vscode-icon-foreground: #616161;--vscode-textLink-foreground: #005fb8}.vscode-comments-dark{--vscode-icon-foreground: #cccccc;--vscode-textLink-foreground: #4daafc}.vscode-comment-widget-v2{box-sizing:border-box;width:320px;display:flex;flex-direction:column;gap:12px;padding:8px;background:var(--vscode-editorWidget-background, #202122);border:1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border, #2a2b2c));border-radius:var(--vscode-cornerRadius-large, 8px);box-shadow:0 8px 8px #00000040;font-family:var(--vscode-font-family, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif)}.vscode-comment-widget-v2 *,.vscode-comment-widget-v2 *:before,.vscode-comment-widget-v2 *:after{box-sizing:border-box}.vscode-comment-widget-v2-header{display:flex;align-items:center;justify-content:space-between;width:100%}.vscode-comment-widget-v2-title-group{display:flex;align-items:center;gap:6px;flex:1 0 0;min-width:0}.vscode-comment-widget-v2-username{flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;line-height:normal;color:var(--vscode-foreground, #bfbfbf)}.vscode-comment-widget-v2-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.vscode-comment-widget-v2-action{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin:0;border:none;background:transparent;color:var(--vscode-icon-foreground, #8c8c8c);cursor:pointer}.vscode-comment-widget-v2-action:hover{color:var(--vscode-foreground, #bfbfbf)}.vscode-comment-widget-v2-action svg{display:block;width:16px;height:16px}.vscode-comment-widget-v2-body{display:flex;flex-direction:column;gap:6px;width:100%}.vscode-comment-widget-v2-text{margin:0;width:100%;font-size:13px;font-weight:400;line-height:normal;color:var(--vscode-foreground, #bfbfbf);opacity:.9;white-space:pre-wrap;word-break:break-word}.vscode-comment-widget-v2--collapsed .vscode-comment-widget-v2-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}.vscode-comment-widget-v2-toggle{align-self:flex-start;padding:0;margin:0;border:none;background:none;cursor:pointer;text-align:left;font-family:inherit;font-size:12px;font-weight:400;line-height:normal;color:var(--vscode-textLink-foreground, #48a0c7)}.vscode-comment-widget-v2-toggle:hover{text-decoration:underline}.md-comment-shapes{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}.md-comment-group{opacity:var(--md-comment-opacity, .16);transition:opacity .1s ease}.md-comment-group-hovered{opacity:var(--md-comment-opacity-hover, .3)}.md-comment-shape-path{fill:var(--md-comment-color, rgb(64, 120, 240));stroke:none}.md-comment-leader-path{fill:none;stroke:var(--md-comment-color, rgb(64, 120, 240));stroke-width:2;stroke-linecap:butt;stroke-linejoin:round}.md-comment-card{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--vscode-editorWidget-background, #fff);color:var(--vscode-editorWidget-foreground, #1f1f1f);border:1px solid var(--vscode-editorWidget-border, #e0e0e0);border-radius:8px;box-shadow:0 2px 8px #0000001a;font-family:var(--vscode-font-family, system-ui, sans-serif);font-size:13px;transition:box-shadow .1s ease,border-color .1s ease,top .12s ease}.md-comment-card-hovered{border-color:var(--md-comment-leader-hover, rgba(64, 120, 240, 1));box-shadow:0 3px 12px #00000029}.md-comment-card-header{display:flex;align-items:center;gap:8px}.md-comment-avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--md-comment-avatar-bg, #d6e2fb);color:var(--md-comment-avatar-fg, #25408f);font-size:10px;font-weight:600;letter-spacing:.3px}.md-comment-author{font-weight:600}.md-comment-time{color:var(--vscode-descriptionForeground, #767676);font-size:12px}.md-comment-menu{margin-left:auto;color:var(--vscode-descriptionForeground, #767676);cursor:default;user-select:none}.md-comment-body{line-height:1.45;white-space:pre-wrap;word-break:break-word}.md-comment-reply{align-self:flex-start;margin:0;padding:0;border:none;background:transparent;color:var(--vscode-textLink-foreground, #2563c9);font:inherit;font-weight:600;cursor:pointer}.md-comment-reply:hover{text-decoration:underline}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-12",
+  "version": "0.0.2-13",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,11 @@
     "src/view/editor.css",
     "src/view/themes/default.css",
     "src/view/themes/github.css",
-    "src/view/themes/vscode.css"
+    "src/view/themes/vscode-github.css",
+    "src/view/themes/vscode-default.css",
+    "src/contrib/comments/comments.css",
+    "src/contrib/comments/commentInput.css",
+    "src/contrib/commentsVscode/vscodeCommentWidgetV2.css"
   ],
   "exports": {
     ".": {
@@ -33,7 +37,11 @@
     "./editor.css": "./src/view/editor.css",
     "./themes/default.css": "./src/view/themes/default.css",
     "./themes/github.css": "./src/view/themes/github.css",
-    "./themes/vscode.css": "./src/view/themes/vscode.css"
+    "./themes/vscode-github.css": "./src/view/themes/vscode-github.css",
+    "./themes/vscode-default.css": "./src/view/themes/vscode-default.css",
+    "./comments.css": "./src/contrib/comments/comments.css",
+    "./commentInput.css": "./src/contrib/comments/commentInput.css",
+    "./vscodeCommentWidgetV2.css": "./src/contrib/commentsVscode/vscodeCommentWidgetV2.css"
   },
   "scripts": {
     "build": "vite build",
@@ -45,6 +53,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@vscode/diff": "0.0.2-0",
     "katex": "^0.16.33",
     "micromark": "^4.0.1",
     "micromark-extension-gfm": "^3.0.0",

package/src/contrib/comments/commentInput.css

@@ -0,0 +1,131 @@
+/*
+ * Styling for the comment input box (CommentInputWidget). Mirrors VS Code's
+ * agent-feedback input widget (`.agent-feedback-input-widget` in
+ * agentFeedbackEditorInput.css): a soft rounded panel on the panel background,
+ * wrapping a *borderless* auto-growing textarea that blends into the panel, with
+ * a small "plus" action on the right. The whole box is the bubble — there is no
+ * separate inner input field. Uses --vscode-* variables so it matches the host
+ * theme, with neutral fallbacks for standalone fixtures.
+ */
+
+.md-comment-input {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	/*
+	 * Hug the content: the bubble is as wide as its (auto-sized) textarea, up to
+	 * the textarea's max-width, and no wider than the available space. In the
+	 * editor the widget is `position: absolute` (already shrink-to-fit); this also
+	 * makes it hug content when placed in normal flow (e.g. in fixtures).
+	 */
+	width: fit-content;
+	padding: 4px;
+	background-color: var(--vscode-panel-background, var(--vscode-editor-background, #fff));
+	color: var(--vscode-input-foreground, var(--vscode-foreground, #1f1f1f));
+	border: 1px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder, rgba(59, 59, 59, 0.2)));
+	border-radius: 8px;
+	box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
+	font-family: var(--vscode-font-family, system-ui, sans-serif);
+	font-size: 13px;
+}
+
+.md-comment-input-textarea {
+	flex: 1 1 auto;
+	min-width: 150px;
+	max-width: 400px;
+	margin: 0;
+	padding: 0 0 0 6px;
+	border: none;
+	border-radius: 4px;
+	outline: none;
+	resize: none;
+	overflow-y: hidden;
+	max-height: 160px;
+	box-sizing: border-box;
+	background-color: var(--vscode-panel-background, var(--vscode-editor-background, #fff));
+	color: var(--vscode-input-foreground, inherit);
+	font: inherit;
+	line-height: 22px;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	/*
+	 * The box lives inside `.md-editor`, which sets `caret-color: transparent`
+	 * to hide the native caret (it paints its own). Restore a visible blinking
+	 * caret here so the focused comment input shows one.
+	 */
+	caret-color: var(--vscode-editorCursor-foreground, currentColor);
+}
+
+.md-comment-input-textarea:focus {
+	border-color: var(--vscode-focusBorder, #0078d4);
+	outline: none !important;
+}
+
+.md-comment-input-textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground, #767676);
+	opacity: 1;
+}
+
+/* Hidden element used to measure text width for auto-growing (mirrors the
+ * reference''s `.agent-feedback-input-measure`). */
+.md-comment-input-measure {
+	position: absolute;
+	visibility: hidden;
+	height: 0;
+	overflow: hidden;
+	white-space: pre;
+	font: inherit;
+}
+
+.md-comment-input-actions {
+	display: flex;
+	align-items: center;
+	/*
+	 * Match the textarea's single line box (line-height) so the centered icon
+	 * lines up with the text's vertical center. The panel is `align-items:
+	 * flex-end`, so on a multi-line textarea this box stays pinned to the bottom
+	 * line — mirroring the reference agent-feedback widget.
+	 */
+	height: 22px;
+	margin-left: 2px;
+	flex-shrink: 0;
+}
+
+.md-comment-input-submit {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: content-box;
+	/*
+	 * 16px glyph inside a 22x22 hit-area (16 + 3px padding each side), matching
+	 * the reference ActionBar action-label so the icon's spacing and hover target
+	 * line up with the agent-feedback widget.
+	 */
+	width: 16px;
+	height: 16px;
+	padding: 3px;
+	border: none;
+	border-radius: 5px;
+	background: transparent;
+	color: var(--vscode-foreground, #1f1f1f);
+	cursor: pointer;
+}
+
+.md-comment-input-submit:hover:not(:disabled) {
+	background-color: var(--vscode-toolbar-hoverBackground, rgba(0, 0, 0, 0.08));
+}
+
+.md-comment-input-submit:disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+/*
+ * While the comment box is shown, hide the editor''s painted caret (.md-cursor).
+ * Focus — and the blinking caret — belong to the comment input, not the
+ * document. The selection highlight stays visible (it shows what''s commented).
+ */
+.md-comment-active .md-cursor {
+	display: none;
+}

package/src/contrib/comments/comments.css

@@ -0,0 +1,129 @@
+/*
+ * Persistent comments: range highlights, leader lines, and the side rail of
+ * comment cards (CommentsView). Uses --vscode-* variables with neutral
+ * fallbacks so it works in standalone fixtures too.
+ */
+
+/* --- Overlay layers ------------------------------------------------------ */
+
+.md-comment-shapes {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	/* The tail extends past the content into the rail; never clip it. */
+	overflow: visible;
+	/* Never block the document; hover is driven from the cards. */
+	pointer-events: none;
+}
+
+/* Highlight fill and leader stroke share one solid color inside a single
+ * opacity group, so their overlap never darkens and the seam is invisible.
+ * The leader starts inside the highlight (hidden under the fill) and its bottom
+ * edge aligns with the selection bottom; the highlight's exit corner is squared
+ * (see buildConnectedPath) so there is no notch. */
+.md-comment-group {
+	opacity: var(--md-comment-opacity, 0.16);
+	transition: opacity 0.1s ease;
+}
+
+.md-comment-group-hovered {
+	opacity: var(--md-comment-opacity-hover, 0.3);
+}
+
+.md-comment-shape-path {
+	fill: var(--md-comment-color, rgb(64, 120, 240));
+	stroke: none;
+}
+
+.md-comment-leader-path {
+	fill: none;
+	stroke: var(--md-comment-color, rgb(64, 120, 240));
+	stroke-width: 2;
+	stroke-linecap: butt;
+	stroke-linejoin: round;
+}
+
+/* --- Cards (the right rail) ---------------------------------------------- */
+
+.md-comment-card {
+	position: absolute;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px 14px;
+	background: var(--vscode-editorWidget-background, #fff);
+	color: var(--vscode-editorWidget-foreground, #1f1f1f);
+	border: 1px solid var(--vscode-editorWidget-border, #e0e0e0);
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	font-family: var(--vscode-font-family, system-ui, sans-serif);
+	font-size: 13px;
+	transition: box-shadow 0.1s ease, border-color 0.1s ease, top 0.12s ease;
+}
+
+.md-comment-card-hovered {
+	border-color: var(--md-comment-leader-hover, rgba(64, 120, 240, 1));
+	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
+}
+
+.md-comment-card-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.md-comment-avatar {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: var(--md-comment-avatar-bg, #d6e2fb);
+	color: var(--md-comment-avatar-fg, #25408f);
+	font-size: 10px;
+	font-weight: 600;
+	letter-spacing: 0.3px;
+}
+
+.md-comment-author {
+	font-weight: 600;
+}
+
+.md-comment-time {
+	color: var(--vscode-descriptionForeground, #767676);
+	font-size: 12px;
+}
+
+.md-comment-menu {
+	margin-left: auto;
+	color: var(--vscode-descriptionForeground, #767676);
+	cursor: default;
+	user-select: none;
+}
+
+.md-comment-body {
+	line-height: 1.45;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.md-comment-reply {
+	align-self: flex-start;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: var(--vscode-textLink-foreground, #2563c9);
+	font: inherit;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.md-comment-reply:hover {
+	text-decoration: underline;
+}

package/src/contrib/commentsVscode/vscodeCommentWidgetV2.css

@@ -0,0 +1,166 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/*
+ * Styling for VsCodeCommentWidgetV2 — a replica of the Figma "Markdown comment"
+ * frames. It is theme-aware: every colour is driven by a VS Code `--vscode-*`
+ * design token, with the original Figma dark values kept only as literal
+ * fallbacks (so the card still renders when no theme provider is present). Wrap
+ * the widget in `.vscode-comments-light` / `.vscode-comments-dark` (from
+ * vscodeCommentTokens.css) to supply those tokens.
+ *
+ * Figma token  ->  VS Code token (fallback)
+ *   editorWidget/background   --vscode-editorWidget-background   (#202122)
+ *   editorHoverWidget/border  --vscode-editorHoverWidget-border  (#2a2b2c)
+ *   foreground                --vscode-foreground                (#bfbfbf)
+ *   icon/foreground           --vscode-icon-foreground           (#8c8c8c)
+ *   textLink/foreground       --vscode-textLink-foreground       (#48a0c7)
+ */
+
+/* Supplemental tokens not provided by vscodeCommentTokens.css. */
+.vscode-comments-light {
+    --vscode-icon-foreground: #616161;
+    --vscode-textLink-foreground: #005fb8;
+}
+
+.vscode-comments-dark {
+    --vscode-icon-foreground: #cccccc;
+    --vscode-textLink-foreground: #4daafc;
+}
+
+.vscode-comment-widget-v2 {
+    box-sizing: border-box;
+    width: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 8px;
+    /* size80 */
+    background: var(--vscode-editorWidget-background, #202122);
+    border: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border, #2a2b2c));
+    border-radius: var(--vscode-cornerRadius-large, 8px);
+    /* Outer radius */
+    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+    font-family: var(--vscode-font-family, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
+}
+
+.vscode-comment-widget-v2 *,
+.vscode-comment-widget-v2 *::before,
+.vscode-comment-widget-v2 *::after {
+    box-sizing: border-box;
+}
+
+/* Header row: username on the left, edit/trash actions on the right. */
+.vscode-comment-widget-v2-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.vscode-comment-widget-v2-title-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    /* size60 */
+    flex: 1 0 0;
+    min-width: 0;
+}
+
+.vscode-comment-widget-v2-username {
+    flex: 1 0 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    /* Font ramp/Heading 3: SF Pro Text Semibold 13 */
+    font-size: 13px;
+    font-weight: 600;
+    line-height: normal;
+    color: var(--vscode-foreground, #bfbfbf);
+}
+
+.vscode-comment-widget-v2-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    /* size40 */
+    flex-shrink: 0;
+}
+
+.vscode-comment-widget-v2-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    color: var(--vscode-icon-foreground, #8c8c8c);
+    cursor: pointer;
+}
+
+.vscode-comment-widget-v2-action:hover {
+    color: var(--vscode-foreground, #bfbfbf);
+}
+
+.vscode-comment-widget-v2-action svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+}
+
+/* Body: comment text + optional "See more" / "See less" toggle. */
+.vscode-comment-widget-v2-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    /* size60 */
+    width: 100%;
+}
+
+.vscode-comment-widget-v2-text {
+    margin: 0;
+    width: 100%;
+    /* Font ramp/Body 1: SF Pro Text Regular 13 */
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    color: var(--vscode-foreground, #bfbfbf);
+    opacity: 0.9;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Collapsed bodies clamp to three lines (matches the Figma "See more" frame). */
+.vscode-comment-widget-v2--collapsed .vscode-comment-widget-v2-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+}
+
+.vscode-comment-widget-v2-toggle {
+    align-self: flex-start;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    /* Font ramp/Label 1: SF Pro Text Regular 12 */
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: normal;
+    color: var(--vscode-textLink-foreground, #48a0c7);
+}
+
+.vscode-comment-widget-v2-toggle:hover {
+    text-decoration: underline;
+}

package/src/view/editor.css

@@ -17,8 +17,8 @@
  * theme-agnostic and know nothing about VS Code. Where a value needs to vary
  * per theme, expose a local `--md-*` custom property WITH a sensible literal
  * fallback (e.g. `var(--md-cursor-background, #000)`) and let a theme file set
- * it. Only `themes/vscode.css` is permitted to read `--vscode-*` variables and
- * map them onto these `--md-*` properties.
+ * it. Only the `themes/vscode-*.css` themes are permitted to read `--vscode-*`
+ * variables and map them onto these `--md-*` properties.
  */
 
 .md-editor {
@@ -47,7 +47,7 @@
 .md-editor-content {
 	position: relative;
 	margin-inline: auto;
-	padding: 48px;
+	padding: 0 48px;
 }
 
 .md-block-active {
@@ -641,4 +641,86 @@
 	50% {
 		opacity: 0;
 	}
+}
+
+/*
+ * Edit / read-only lock toggle.
+ *
+ * The host is a zero-height sticky strip pinned to the top of the scroll
+ * viewport, so the lock stays in the top-right corner as the document scrolls.
+ * Being height-0 it never participates in the document's vertical flow. Colors
+ * use local `--md-readonly-*` custom properties with literal fallbacks so this
+ * base file stays theme-agnostic (themes may override them).
+ */
+.md-readonly-toggle-host {
+	position: sticky;
+	top: 0;
+	height: 0;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.md-readonly-toggle {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 26px;
+	padding: 0 10px;
+	border-radius: 13px;
+	border: 1px solid var(--md-readonly-border, #d4d4d4);
+	background: var(--md-readonly-background, #ffffff);
+	color: var(--md-readonly-foreground, #444);
+	font: 600 11px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
+	letter-spacing: 0.02em;
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.md-readonly-toggle:hover {
+	border-color: var(--md-readonly-border-hover, #b8b8b8);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
+}
+
+.md-readonly-toggle:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-readonly-toggle .md-readonly-toggle-icon {
+	display: inline-flex;
+	align-items: center;
+}
+
+.md-readonly-toggle .md-readonly-toggle-label {
+	white-space: nowrap;
+}
+
+/* Show the open padlock while editing, the closed one while locked. */
+.md-readonly-toggle .md-readonly-toggle-icon-locked {
+	display: none;
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-unlocked {
+	display: none;
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+	display: inline-flex;
+}
+
+/* Locked (read-only) state: filled accent so the engaged lock reads clearly. */
+.md-readonly-toggle.md-readonly-toggle-locked {
+	border-color: var(--md-readonly-accent, #4c8bf5);
+	background: var(--md-readonly-accent, #4c8bf5);
+	color: var(--md-readonly-accent-foreground, #ffffff);
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked:hover {
+	border-color: var(--md-readonly-accent-hover, #3a73d4);
+	background: var(--md-readonly-accent-hover, #3a73d4);
 }