comark-comments 0.7.5 → 0.8.0

package/dist/html.mjs

@@ -1,4 +1,4 @@
-import { a as hash, c as transform, i as childrenOf, l as wrapParagraphs, n as DEFERRED, o as isElement, r as ROOT, s as nativeAttributes, t as src_default } from "./src-CCwYg7qg.mjs";
+import { a as transform, c as isElement, i as nativeAttributes, l as hash, n as DEFERRED, o as wrapParagraphs, r as ROOT, s as childrenOf, t as src_default, u as rawText } from "./src-BmHLb9Qo.mjs";
 import { resolveAttributes } from "comark/render";
 import { escapeHtml } from "comark/utils";
 //#region ../annotate/dist/font-Bq-VpE6W.mjs
@@ -49,16 +49,66 @@ const tokens = [
 		"#737373"
 	]
 ];
-const resolve = (scheme) => tokens.map((token) => `--_comark-${token[0]}:var(--comark-${token[0]},var(--${token[1]},var(--${token[2]},${token[scheme]})))`).join(";");
+const groups = {
+	status: Object.values({
+		success: [
+			"success",
+			"ui-success",
+			"success",
+			"#259f56",
+			"#59d38c"
+		],
+		danger: [
+			"danger",
+			"ui-error",
+			"destructive",
+			"#ee3533",
+			"#fd736d"
+		],
+		warning: [
+			"warning",
+			"ui-warning",
+			"",
+			"#d97706",
+			"#fbbf24"
+		],
+		info: [
+			"info",
+			"ui-info",
+			"",
+			"#2563eb",
+			"#60a5fa"
+		]
+	}),
+	shadow: [[
+		"shadow",
+		"",
+		"",
+		"0 4px 12px rgb(0 0 0/.12)",
+		"0 4px 12px rgb(0 0 0/.5)"
+	]]
+};
+const chain = (token, scheme) => {
+	const shadcn = token[2] ? `var(--${token[2]},${token[scheme]})` : token[scheme];
+	const nuxt = token[1] ? `var(--${token[1]},${shadcn})` : shadcn;
+	return `var(--comark-${token[0]},${nuxt})`;
+};
+const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${chain(token, scheme)}`).join(";");
 /**
 * Resolves the `--comark-*` tokens on `selector`, falling back to Nuxt UI's variables, then shadcn/ui's, then shadcn's
 * neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back.
 * They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
 * `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
+*
+* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`, and
+* `"shadow"` for `--comark-shadow`, so a block that never draws them doesn't carry them.
 */
-function theme(selector) {
+function theme(selector, ...extras) {
 	const where = `:where(${selector})`;
-	return `${where}{${resolve(3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(4)}}}`;
+	const added = extras.flatMap((name) => groups[name]);
+	const list = [...tokens, ...added];
+	const classes = added.length ? `:where(.light,.light *)${where}{${resolve(added, 3)}}:where(.dark,.dark *)${where}{${resolve(added, 4)}}` : "";
+	return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(list, 4)}}}` + classes;
 }
 //#endregion
 //#region src/styles.ts
@@ -71,13 +121,13 @@ const fontCss = `@font-face{font-family:comark-caveat;src:url(data:font/woff2;ba
 * `--cr-comment`. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
 */
 const css = `@layer comark{${[
-	theme(parts),
-	`:where(${parts}){--_cr-ins:var(--cr-ins,#259f56);--_cr-del:var(--cr-del,var(--destructive,#ee3533));--_cr-comment:var(--cr-comment,#f5a524);--_cr-icon:var(--cr-icon,${icon})}`,
-	`@media (prefers-color-scheme:dark){:where(${parts}){--_cr-ins:var(--cr-ins,#59d38c);--_cr-del:var(--cr-del,var(--destructive,#fd736d));--_cr-comment:var(--cr-comment,#fbbf24)}}`,
+	theme(parts, "status", "shadow"),
+	`:where(${parts}){--_cr-ins:var(--cr-ins,var(--_comark-success));--_cr-del:var(--cr-del,var(--_comark-danger));--_cr-comment:var(--cr-comment,#f5a524);--_cr-icon:var(--cr-icon,${icon})}`,
+	`@media (prefers-color-scheme:dark){:where(${parts}){--_cr-comment:var(--cr-comment,#fbbf24)}}`,
 	".cr-sg :is(del,ins)::before,.cr-sg :is(del,ins)::after{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}",
 	".cr-sg del::before{content:\" [removed: \"}.cr-sg ins::before{content:\" [added: \"}.cr-sg :is(del,ins)::after{content:\"] \"}",
-	".cr-sg,.cr-cm{border-radius:.25rem;transition:box-shadow .12s}",
-	".cr-sg :is(del,ins){padding:.0625rem .1875rem;border-radius:.25rem;-webkit-box-decoration-break:clone;box-decoration-break:clone}",
+	".cr-sg,.cr-cm{border-radius:calc(var(--_comark-radius) - 6px);transition:box-shadow .12s}",
+	".cr-sg :is(del,ins){padding:.0625rem .1875rem;border-radius:calc(var(--_comark-radius) - 6px);-webkit-box-decoration-break:clone;box-decoration-break:clone}",
 	".cr-sg del{color:color-mix(in oklab,var(--_cr-del) 70%,var(--_comark-foreground));background:color-mix(in srgb,var(--_cr-del) 11%,transparent);text-decoration:line-through 1.5px color-mix(in srgb,var(--_cr-del) 75%,transparent)}",
 	".cr-sg ins{color:color-mix(in oklab,var(--_cr-ins) 60%,var(--_comark-foreground));background:color-mix(in srgb,var(--_cr-ins) 13%,transparent);text-decoration:none}",
 	".cr-sg del+ins{margin-left:.125rem}",
@@ -90,8 +140,8 @@ const css = `@layer comark{${[
 	`${pen}[data-kind="insert"] ins{transform:translateX(-50%) rotate(-2.5deg);transform-origin:center}`,
 	`${pen} .cr-caret{display:inline-block;position:relative;width:0}`,
 	`${pen} .cr-caret svg{position:absolute;left:-.32em;top:.18em;width:.64em;height:.5em;overflow:visible;fill:none;stroke:var(--_cr-del);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}`,
-	".cr-cm{color:inherit;background:color-mix(in srgb,var(--_cr-comment) 22%,transparent);border-bottom:2px solid color-mix(in srgb,var(--_cr-comment) 80%,transparent);border-radius:.125rem;padding:0 .0625rem}",
-	".cr-bub{display:inline;margin-left:.25em;padding:.25em .5em .25em 1.75em;vertical-align:.1em;border:1px solid var(--_comark-border);border-radius:999px;background:var(--_comark-background) var(--_cr-icon) no-repeat .42em 50%/1em;color:var(--_comark-muted);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:0 1px 2px rgb(0 0 0/.05);transition:color .12s,border-color .12s}",
+	".cr-cm{color:inherit;background:color-mix(in srgb,var(--_cr-comment) 22%,transparent);border-bottom:2px solid color-mix(in srgb,var(--_cr-comment) 80%,transparent);border-radius:calc(var(--_comark-radius) - 8px);padding:0 .0625rem}",
+	".cr-bub{display:inline;margin-left:.25em;padding:.25em .5em .25em 1.75em;vertical-align:.1em;border:1px solid var(--_comark-border);border-radius:9999px;background:var(--_comark-background) var(--_cr-icon) no-repeat .42em 50%/1em;color:var(--_comark-muted);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;cursor:pointer;transition:color .12s,border-color .12s}",
 	".cr-bub:empty{padding-right:.3em}",
 	".cr-tg{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}",
 	".cr-tg:focus-visible+.cr-bub{outline:2px solid var(--_comark-ring);outline-offset:2px}",
@@ -100,14 +150,18 @@ const css = `@layer comark{${[
 	".cr-card{display:none;box-sizing:border-box;padding:.5rem .75rem;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.5 var(--_comark-font);text-align:left;text-indent:0;white-space:normal;transition:border-color .12s,box-shadow .12s}",
 	".cr-entry{display:block}.cr-entry+.cr-entry{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--_comark-border)}",
 	".cr-entry b{margin-right:.375rem;font-weight:600}",
-	".cr-av{display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;margin-right:.375rem;border-radius:999px;background:var(--cr-av);color:#fff;font:600 .5625rem/1 var(--_comark-font);vertical-align:calc(.722cap - .5625rem)}",
+	".cr-av{display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;margin-right:.375rem;border-radius:9999px;background:color-mix(in oklab,oklch(.7 .12 var(--cr-hue)) 30%,var(--_comark-background));color:color-mix(in oklab,oklch(.55 .14 var(--cr-hue)) 60%,var(--_comark-foreground));font:600 .5625rem/1 var(--_comark-font);vertical-align:calc(.722cap - .5625rem)}",
 	"img.cr-av{display:inline-block;background:#fff;object-fit:cover;outline:1px solid color-mix(in srgb,var(--_comark-foreground) 12%,transparent);outline-offset:-1px}",
 	".cr-tg:checked+.cr-bub+.cr-card{display:block;float:left;clear:both;width:100%;margin:.5rem 0}",
 	".cr{container:cr/inline-size;display:flow-root}",
-	"@container cr (min-width:50rem){.cr>*{margin-right:19.5rem!important}.cr-card,.cr-tg:checked+.cr-bub+.cr-card{display:block;position:relative;float:right;clear:right;width:17.5rem;margin:0 -19.5rem .5rem 0}.cr-tg:checked+.cr-bub+.cr-card,.cr-bub:hover+.cr-card,.cr-card:hover{border-color:var(--_comark-ring);box-shadow:0 4px 16px rgb(0 0 0/.08)}}",
+	"@container cr (min-width:50rem){.cr>*{margin-right:19.5rem!important}.cr-card,.cr-tg:checked+.cr-bub+.cr-card{display:block;position:relative;float:right;clear:right;width:17.5rem;margin:0 -19.5rem .5rem 0}.cr-tg:checked+.cr-bub+.cr-card,.cr-bub:hover+.cr-card,.cr-card:hover{border-color:var(--_comark-ring);box-shadow:var(--_comark-shadow)}}",
 	"@media print{.cr>*{margin-right:12.5rem!important}.cr-card{display:block!important;float:right!important;clear:right;width:11.5rem!important;margin:0 -12.5rem .375rem 0!important;font-size:.6875rem;box-shadow:none!important}.cr-bub{display:none}}"
 ].join("")}}`;
 //#endregion
+//#region ../../shared/html.ts
+/** A value as the inside of a double-quoted HTML attribute. */
+const attr = (value) => escapeHtml(rawText(value), { "\"": """ });
+//#endregion
 //#region src/html.ts
 const styled = /* @__PURE__ */ new WeakSet();
 const fonted = /* @__PURE__ */ new WeakSet();
@@ -117,7 +171,6 @@ function once(set, state, html) {
 	return html;
 }
 const styles = (state) => once(styled, state, `<style data-comark-comments>${css}</style>`);
-const attr = (value) => escapeHtml(value, { "\"": "&quot;" });
 const valueOf = (value) => value === void 0 || value === null ? "" : value instanceof Object ? JSON.stringify(value) : String(value);
 const classOf = (name, attrs) => attr([name, valueOf(attrs.class)].filter(Boolean).join(" "));
 const attributes = (attrs, omit = []) => Object.entries(nativeAttributes(attrs)).filter(([key, value]) => /^[a-zA-Z_][a-zA-Z0-9:._-]*$/.test(key) && !omit.includes(key.toLowerCase()) && value !== void 0 && value !== null).map(([key, value]) => ` ${key}="${attr(valueOf(value))}"`).join("");
@@ -137,22 +190,22 @@ const STROKES = [
 	"M1 5.9C33 3.8 70 6.6 99 4.4"
 ];
 const CARET = "<span class=\"cr-caret\" aria-hidden=\"true\"><svg viewBox=\"0 0 10 8\"><path d=\"M1 7.4L5.2 1.2 9.1 7\"/></svg></span>";
-const COLORS = [
-	"#d97757",
-	"#2563eb",
-	"#7c3aed",
-	"#059669",
-	"#db2777",
-	"#0891b2",
-	"#ca8a04",
-	"#4f46e5"
+const HUES = [
+	25,
+	55,
+	85,
+	145,
+	175,
+	205,
+	235,
+	345
 ];
 function who(by, avatar) {
 	const name = by.replace(/^@/, "");
 	if (!name) return "";
 	if (avatar) return `<img class="cr-av" src="${attr(avatar)}" alt="" width="18" height="18"><b>${escapeHtml(name)}</b>`;
 	const initial = [...new Intl.Segmenter().segment(name)][0]?.segment.toUpperCase() ?? "";
-	return `<span class="cr-av" style="--cr-av:${COLORS[Number.parseInt(hash(name.toLowerCase()), 36) % COLORS.length]}" aria-hidden="true">${escapeHtml(initial)}</span><b>${escapeHtml(name)}</b>`;
+	return `<span class="cr-av" style="--cr-hue:${HUES[Number.parseInt(hash(name.toLowerCase()), 36) % HUES.length]}" aria-hidden="true">${escapeHtml(initial)}</span><b>${escapeHtml(name)}</b>`;
 }
 function thread(attrs, state) {
 	const base = read(attrs, "uid");

package/dist/index.mjs

@@ -1 +1 @@
-export { t as default } from "./src-CCwYg7qg.mjs";
+export { t as default } from "./src-BmHLb9Qo.mjs";

package/dist/{src-CCwYg7qg.mjs → src-BmHLb9Qo.mjs}

@@ -1,6 +1,36 @@
 import { defineComarkPlugin } from "comark";
 import { resolveAttributes } from "comark/render";
 import { textContent } from "comark/utils";
+//#region ../../shared/text.ts
+/**
+* A prop value as text. Comark writes strings, numbers, and booleans, so an object, array, function, or missing value
+* is no text. The `typeof` check, unlike `instanceof`, can't throw on a revoked proxy.
+*/
+function scalar(value) {
+	switch (typeof value) {
+		case "string": return value;
+		case "number":
+		case "boolean":
+		case "bigint":
+		case "symbol": return String(value);
+		default: return;
+	}
+}
+/** A prop value as text, without its surrounding whitespace, or empty when it has none. */
+const text = (value) => scalar(value)?.trim() ?? "";
+/** A prop value as text exactly as written, or empty when it has none. */
+const rawText = (value) => scalar(value) ?? "";
+/** FNV-1a, in base 36: short, and the same every time the same text is hashed, so ids derived from it are stable. */
+function hash(source) {
+	let value = 2166136261;
+	for (let at = 0; at < source.length; at++) value = Math.imul(value ^ source.charCodeAt(at), 16777619);
+	return (value >>> 0).toString(36);
+}
+//#endregion
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
 //#region src/read.ts
 /** The root node the plugin wraps a document's blocks in when any card goes in the margin. */
 const ROOT = "comments";
@@ -46,9 +76,6 @@ const HINTS = /* @__PURE__ */ new Map([
 ]);
 const PEN_MAX = 24;
 const HEADING = /^h[1-6]$/;
-const isElement = (node) => Array.isArray(node) && node[0] !== null;
-const childrenOf = (node) => node.slice(2);
-const text = (value) => value === void 0 || value === null || value instanceof Object ? "" : String(value).trim();
 const later = (path) => /^(?:data|props)(?:\.|$)/.test(text(path));
 const pending = (raw, key) => later(raw[`:${key}`]);
 const hasRenderBindings = (nodes) => nodes.some((node) => isElement(node) && ((node[0] === "comment" || node[0] === "suggestion") && Object.entries(node[1]).some(([key, value]) => key.startsWith(":") && later(value)) || hasRenderBindings(childrenOf(node))));
@@ -58,12 +85,6 @@ const clip = (value) => value.length > 40 ? `${value.slice(0, 39)}…` : value;
 const quote = (value) => JSON.stringify(clip(value));
 const list = (names) => names.map((name) => name === "id" ? "`#id`" : `\`${name}\``).join(", ");
 const graphemes = (value) => [...new Intl.Segmenter().segment(value)].length;
-/** FNV-1a, in base 36: short, and the same every time the same text is hashed. */
-function hash(source) {
-	let value = 2166136261;
-	for (let at = 0; at < source.length; at++) value = Math.imul(value ^ source.charCodeAt(at), 16777619);
-	return (value >>> 0).toString(36);
-}
 function distance(a, b) {
 	const row = Array.from({ length: b.length + 1 }, (_, index) => index);
 	for (let i = 1; i <= a.length; i++) {
@@ -391,4 +412,4 @@ var src_default = defineComarkPlugin((options = {}) => {
 	};
 });
 //#endregion
-export { hash as a, transform as c, childrenOf as i, wrapParagraphs as l, DEFERRED as n, isElement as o, ROOT as r, nativeAttributes as s, src_default as t };
+export { transform as a, isElement as c, nativeAttributes as i, hash as l, DEFERRED as n, wrapParagraphs as o, ROOT as r, childrenOf as s, src_default as t, rawText as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-comments",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "Suggested edits and comment threads in Markdown, drawn as redlines or a hand-drawn pen with notes in the margin, and no script. A Comark plugin.",
   "keywords": [
     "comark",
@@ -38,8 +38,8 @@
   "devDependencies": {
     "@comark/html": "^0.8.1",
     "comark": "^0.8.1",
-    "comark-zoom": "0.7.5",
-    "comark-annotate": "0.7.5"
+    "comark-annotate": "0.8.0",
+    "comark-zoom": "0.8.0"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",