comark-cards 0.7.5 → 0.8.0

package/README.md

@@ -44,7 +44,7 @@ The plugin adds every problem to `meta.issues`, so a host can reject a document
 
 | Renderer | Import |
 | --- | --- |
-| `@comark/html` | `comark-cards/html`: the styles are inlined once per document |
+| `@comark/html` | `comark-cards/html`: the styles are inlined |
 | `@comark/vue` | `comark-cards/vue` |
 | `@comark/react` | `comark-cards/react` |
 | `@comark/svelte` | `comark-cards/svelte` |

package/dist/{client-C5acm8_C.mjs → client-DsO8I6Oo.mjs}

@@ -43,16 +43,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
@@ -65,9 +115,8 @@ function theme(selector) {
 * primary then to the foreground, so a card is neutral like the other plugins until the page has a brand color. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
 */
 const css = `@layer comark{${[
-	theme(".ccr,.ccr-group,.ccr-columns"),
-	":where(.ccr){--ccr-primary:var(--ui-primary,var(--primary,var(--_comark-foreground)));--ccr-secondary:var(--ui-secondary,#2563eb);--ccr-success:var(--ui-success,#16a34a);--ccr-info:var(--ui-info,#2563eb);--ccr-warning:var(--ui-warning,#ca8a04);--ccr-error:var(--ui-error,var(--destructive,#dc2626));--ccr-neutral:var(--_comark-foreground)}",
-	"@media (prefers-color-scheme:dark){:where(.ccr){--ccr-secondary:var(--ui-secondary,#60a5fa);--ccr-success:var(--ui-success,#4ade80);--ccr-info:var(--ui-info,#60a5fa);--ccr-warning:var(--ui-warning,#facc15);--ccr-error:var(--ui-error,var(--destructive,#f87171))}}",
+	theme(".ccr,.ccr-group,.ccr-columns", "status"),
+	":where(.ccr){--ccr-primary:var(--ui-primary,var(--primary,var(--_comark-foreground)));--ccr-secondary:var(--ui-secondary,var(--_comark-info));--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}",
 	".ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}",
 	".ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}",
 	...[
@@ -81,7 +130,7 @@ const css = `@layer comark{${[
 	".ccr-group>.ccr{margin:0}",
 	".ccr-column>:first-child{margin-top:0}",
 	".ccr-column>:last-child{margin-bottom:0}",
-	".ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);box-shadow:0 1px 2px rgb(0 0 0/.05);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}",
+	".ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}",
 	...[
 		"secondary",
 		"success",
@@ -109,15 +158,23 @@ const css = `@layer comark{${[
 	"@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}"
 ].join("")}}`;
 //#endregion
-//#region src/client.ts
-/** Adds the card styles to the page once. The Vue, React, and Svelte components call it when they mount. */
-function addStyles() {
-	if (document.querySelector("style[data-comark-cards]")) return;
+//#region ../../shared/styles.ts
+/**
+* Adds a package's styles to the page once, unless the page already carries them as a `style` or a `link` with
+* `data-comark-<name>`, which is how the HTML renderer inlines them and how an app that imports `style.css` marks them.
+*/
+function addStyles$1(name, css) {
+	const attribute = `data-comark-${name}`;
+	if (document.querySelector(`style[${attribute}],link[${attribute}]`)) return;
 	const style = document.createElement("style");
-	style.dataset.comarkCards = "";
+	style.setAttribute(attribute, "");
 	style.textContent = css;
 	document.head.append(style);
 }
+//#endregion
+//#region src/client.ts
+/** Adds the card styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+const addStyles = () => addStyles$1("cards", css);
 /** Lucide's arrow-up-right (ISC), drawn in the corner of a card that opens in a new tab. */
 const external = "M7 7h10v10M7 17 17 7";
 /** Returns whether a card URL is safe to place in an href. */

package/dist/client.d.mts

@@ -11,7 +11,7 @@ export declare const css: string;
 //#endregion
 //#region src/client.d.ts
 /** Adds the card styles to the page once. The Vue, React, and Svelte components call it when they mount. */
-export declare function addStyles(): void;
+export declare const addStyles: () => void;
 /** Lucide's arrow-up-right (ISC), drawn in the corner of a card that opens in a new tab. */
 export declare const external = "M7 7h10v10M7 17 17 7";
 /** Returns whether a card URL is safe to place in an href. */

package/dist/client.mjs

@@ -1 +1 @@
-export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-C5acm8_C.mjs";
+export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-DsO8I6Oo.mjs";

package/dist/html.mjs

@@ -1,10 +1,13 @@
-import { a as rel, n as external, o as css } from "./client-C5acm8_C.mjs";
-import src_default, { colors, variants } from "./index.mjs";
+import { a as rel, n as external, o as css } from "./client-DsO8I6Oo.mjs";
+import { i as rawText, n as src_default, r as variants, t as colors } from "./src-BsKBRfFx.mjs";
 import { escapeHtml } from "comark/utils";
 import { iconHtml, iconStyles } from "comark-icon/html";
+//#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 attr = (value) => escapeHtml(String(value), { "\"": """ });
 const styles = (state) => {
 	if (styled.has(state.context)) return "";
 	styled.add(state.context);

package/dist/index.mjs

@@ -1,211 +1 @@
-import { i as isSafeHref, r as isExternalHref } from "./client-C5acm8_C.mjs";
-import { defineComarkPlugin } from "comark";
-import { resolveAttributes } from "comark/render";
-import { textContent } from "comark/utils";
-import { createIcons, describeIconProblem, iconProblemRule } from "comark-icon";
-//#region src/index.ts
-/** Nuxt UI's colors, which tint a card's icon and border, and its background with a `variant`. */
-const colors = [
-	"primary",
-	"secondary",
-	"success",
-	"info",
-	"warning",
-	"error",
-	"neutral"
-];
-/**
-* Nuxt UI's card variants that a document block needs: `outline`, the default, keeps the plain card, `soft` washes it
-* in its color, and `subtle` washes it and draws its border in the color too.
-*/
-const variants = [
-	"outline",
-	"soft",
-	"subtle"
-];
-const isElement = (node) => Array.isArray(node) && node[0] !== null;
-const isContent = (node) => Array.isArray(node) ? node[0] !== null : node.trim() !== "";
-const childrenOf = (node) => node.slice(2);
-const text = (value) => value === void 0 || value === null || value instanceof Object ? "" : String(value).trim();
-const clip = (value) => {
-	const words = value.trim().replace(/\s+/g, " ");
-	return words.length > 40 ? `${words.slice(0, 39)}…` : words;
-};
-const isColor = (value) => colors.some((color) => color === value);
-const isVariant = (value) => variants.some((variant) => variant === value);
-const isTemplate = (node, name) => isElement(node) && node[0] === "template" && node[1].name === name;
-const unwrap = (nodes) => nodes.filter(isContent).flatMap((node) => isElement(node) && node[0] === "p" ? childrenOf(node) : [node]);
-const resolve = (node, walk) => resolveAttributes(node[1], walk.data, { parseJson: true });
-const CARD_PROPS = [
-	"title",
-	"description",
-	"icon",
-	"to",
-	"href",
-	"target",
-	"color",
-	"variant"
-];
-function unknownProps(node, name, block, props, walk) {
-	const known = props.flatMap((prop) => prop === "href" ? [] : [`\`${prop}\``]);
-	const list = known.length > 1 ? `${known.slice(0, -1).join(", ")}, or ${known.at(-1)}` : known[0];
-	for (const key of Object.keys(node[1])) {
-		const prop = key.replace(/^:/, "");
-		if (!props.includes(prop) && prop !== "id" && prop !== "class") walk.issues.push({
-			rule: "comark/cards/unknown-prop",
-			message: `${name}: \`${prop}\` isn't a prop of \`${block}\`, so it's ignored. Use ${list}.`
-		});
-	}
-}
-function card(node, walk) {
-	const attrs = resolve(node, walk);
-	const children = childrenOf(node);
-	const slot = children.find((child) => isTemplate(child, "title"));
-	const content = children.flatMap((child) => child === slot ? [] : isTemplate(child, "default") ? childrenOf(child) : [child]);
-	const title = slot ? unwrap(childrenOf(slot)) : text(attrs.title) ? [text(attrs.title)] : [];
-	const words = clip(textContent([
-		"p",
-		{},
-		...title
-	]));
-	const name = `\`::card\` ${++walk.cards}${words ? ` ("${words}")` : ""}`;
-	unknownProps(node, name, "::card", CARD_PROPS, walk);
-	const description = text(attrs.description);
-	if (!content.some(isContent) && description) content.push([
-		"p",
-		{},
-		description
-	]);
-	const written = text(attrs.color);
-	const result = {};
-	result.color = isColor(written) ? written : "primary";
-	if (written && !isColor(written)) walk.issues.push({
-		rule: "comark/cards/invalid-color",
-		message: `${name}: \`color\` is "${clip(written)}", so it shows as primary. Write one of ${colors.join(", ")}.`
-	});
-	const variant = text(attrs.variant);
-	if (isVariant(variant)) {
-		if (variant !== "outline") result.variant = variant;
-	} else if (variant) walk.issues.push({
-		rule: "comark/cards/invalid-variant",
-		message: `${name}: \`variant\` is "${clip(variant)}", so it shows as outline. Write one of ${variants.join(", ")}.`
-	});
-	let to = text(attrs.to);
-	const href = text(attrs.href);
-	if (href && !to) {
-		walk.issues.push({
-			rule: "comark/cards/href-instead-of-to",
-			message: `${name}: Nuxt UI links a card with \`to\`, so it ignores \`href\`. Write \`to="${clip(href)}"\` instead.`
-		});
-		to = href;
-	}
-	if (to && !isSafeHref(to)) {
-		walk.issues.push({
-			rule: "comark/cards/unsafe-link",
-			message: `${name}: \`to\` must be a page or a web address, so it isn't a link.`
-		});
-		to = "";
-	}
-	if (to) {
-		result.to = to;
-		const target = text(attrs.target) || (isExternalHref(to) ? "_blank" : "");
-		if (target) result.target = target;
-		if (target === "_blank") result.external = "true";
-		result.label = words || "Card link";
-	}
-	const icon = text(attrs.icon);
-	if (icon) walk.icons.push({
-		card: node,
-		value: icon,
-		name
-	});
-	node[1] = result;
-	const head = title.length ? [[
-		"card-title",
-		{},
-		...title
-	]] : [];
-	node.splice(2, node.length - 2, ...head, ...content);
-}
-function columns(node, walk) {
-	const name = `\`::columns\` ${++walk.columns}`;
-	unknownProps(node, name, "::columns", ["cols"], walk);
-	const written = text(resolve(node, walk).cols);
-	let cols = "2";
-	if (/^[1-6]$/.test(written)) cols = written;
-	else if (written) walk.issues.push({
-		rule: "comark/cards/invalid-cols",
-		message: `${name}: \`cols\` is "${clip(written)}", so it shows 2 columns. Write a number from 1 to 6.`
-	});
-	const cells = childrenOf(node).filter(isContent).map((child) => isElement(child) && child[0] === "column" ? [
-		"column",
-		{},
-		...childrenOf(child)
-	] : [
-		"column",
-		{},
-		child
-	]);
-	if (!cells.length) walk.issues.push({
-		rule: "comark/cards/empty-columns",
-		message: `${name} is empty. Put a block inside for each column, or remove it.`
-	});
-	node[1] = { cols };
-	node.splice(2, node.length - 2, ...cells);
-}
-function transform(nodes, walk) {
-	for (const node of nodes) {
-		if (!isElement(node)) continue;
-		if (node[0] === "card") card(node, walk);
-		else if (node[0] === "columns") columns(node, walk);
-		else if (node[0] === "card-group") node[1] = {};
-		transform(childrenOf(node), walk);
-	}
-}
-async function addIcons(walk, resolver) {
-	if (!walk.icons.length) return;
-	const resolved = await resolver.resolve(walk.icons.map(({ value }) => value));
-	for (const { card: node, value, name } of walk.icons) {
-		const icon = resolved.get(value);
-		if (!icon) continue;
-		if ("problem" in icon) walk.issues.push({
-			rule: iconProblemRule(icon),
-			message: `${name}, icon "${clip(value)}": ${describeIconProblem(value, icon)}`
-		});
-		else node[1].icon = icon;
-	}
-}
-/**
-* Turns `::card-group` and `::card{title description icon to target color variant}` into cards, link cards when they
-* have `to`, and `::columns{cols}` into a grid with a cell per block. Problems are added to `meta.issues`.
-*/
-var src_default = defineComarkPlugin((options = {}) => {
-	const resolver = options.iconResolver ?? createIcons();
-	return {
-		name: "comark-cards",
-		async post(state) {
-			const { tree } = state;
-			const walk = {
-				data: {
-					frontmatter: tree.frontmatter,
-					meta: tree.meta,
-					data: {},
-					props: {}
-				},
-				issues: [],
-				icons: [],
-				cards: 0,
-				columns: 0
-			};
-			transform(tree.nodes, walk);
-			await addIcons(walk, resolver);
-			tree.meta.issues = [...tree.meta.issues ?? [], ...walk.issues.map((issue) => issue.message)];
-			tree.meta.issueRules = {
-				...tree.meta.issueRules,
-				...Object.fromEntries(walk.issues.map((issue) => [issue.message, issue.rule]))
-			};
-		}
-	};
-});
-//#endregion
-export { colors, src_default as default, variants };
+export { t as colors, n as default, r as variants } from "./src-BsKBRfFx.mjs";

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-C5acm8_C.mjs";
-import src_default, { colors, variants } from "./index.mjs";
+import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DsO8I6Oo.mjs";
+import { n as src_default, r as variants, t as colors } from "./src-BsKBRfFx.mjs";
 import { Icon } from "comark-icon/react";
 import { createElement, useEffect } from "react";
 //#region src/react.ts

package/dist/src-BsKBRfFx.mjs

@@ -0,0 +1,232 @@
+import { i as isSafeHref, r as isExternalHref } from "./client-DsO8I6Oo.mjs";
+import { defineComarkPlugin } from "comark";
+import { resolveAttributes } from "comark/render";
+import { textContent } from "comark/utils";
+import { createIcons, describeIconProblem, iconProblemRule } from "comark-icon";
+//#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) ?? "";
+//#endregion
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
+//#region src/index.ts
+/** Nuxt UI's colors, which tint a card's icon and border, and its background with a `variant`. */
+const colors = [
+	"primary",
+	"secondary",
+	"success",
+	"info",
+	"warning",
+	"error",
+	"neutral"
+];
+/**
+* Nuxt UI's card variants that a document block needs: `outline`, the default, keeps the plain card, `soft` washes it
+* in its color, and `subtle` washes it and draws its border in the color too.
+*/
+const variants = [
+	"outline",
+	"soft",
+	"subtle"
+];
+const isContent = (node) => Array.isArray(node) ? node[0] !== null : node.trim() !== "";
+const clip = (value) => {
+	const words = value.trim().replace(/\s+/g, " ");
+	return words.length > 40 ? `${words.slice(0, 39)}…` : words;
+};
+const isColor = (value) => colors.some((color) => color === value);
+const isVariant = (value) => variants.some((variant) => variant === value);
+const isTemplate = (node, name) => isElement(node) && node[0] === "template" && node[1].name === name;
+const unwrap = (nodes) => nodes.filter(isContent).flatMap((node) => isElement(node) && node[0] === "p" ? childrenOf(node) : [node]);
+const resolve = (node, walk) => resolveAttributes(node[1], walk.data, { parseJson: true });
+const CARD_PROPS = [
+	"title",
+	"description",
+	"icon",
+	"to",
+	"href",
+	"target",
+	"color",
+	"variant"
+];
+function unknownProps(node, name, block, props, walk) {
+	const known = props.flatMap((prop) => prop === "href" ? [] : [`\`${prop}\``]);
+	const list = known.length > 1 ? `${known.slice(0, -1).join(", ")}, or ${known.at(-1)}` : known[0];
+	for (const key of Object.keys(node[1])) {
+		const prop = key.replace(/^:/, "");
+		if (!props.includes(prop) && prop !== "id" && prop !== "class") walk.issues.push({
+			rule: "comark/cards/unknown-prop",
+			message: `${name}: \`${prop}\` isn't a prop of \`${block}\`, so it's ignored. Use ${list}.`
+		});
+	}
+}
+function card(node, walk) {
+	const attrs = resolve(node, walk);
+	const children = childrenOf(node);
+	const slot = children.find((child) => isTemplate(child, "title"));
+	const content = children.flatMap((child) => child === slot ? [] : isTemplate(child, "default") ? childrenOf(child) : [child]);
+	const title = slot ? unwrap(childrenOf(slot)) : text(attrs.title) ? [text(attrs.title)] : [];
+	const words = clip(textContent([
+		"p",
+		{},
+		...title
+	]));
+	const name = `\`::card\` ${++walk.cards}${words ? ` ("${words}")` : ""}`;
+	unknownProps(node, name, "::card", CARD_PROPS, walk);
+	const description = text(attrs.description);
+	if (!content.some(isContent) && description) content.push([
+		"p",
+		{},
+		description
+	]);
+	const written = text(attrs.color);
+	const result = {};
+	result.color = isColor(written) ? written : "primary";
+	if (written && !isColor(written)) walk.issues.push({
+		rule: "comark/cards/invalid-color",
+		message: `${name}: \`color\` is "${clip(written)}", so it shows as primary. Write one of ${colors.join(", ")}.`
+	});
+	const variant = text(attrs.variant);
+	if (isVariant(variant)) {
+		if (variant !== "outline") result.variant = variant;
+	} else if (variant) walk.issues.push({
+		rule: "comark/cards/invalid-variant",
+		message: `${name}: \`variant\` is "${clip(variant)}", so it shows as outline. Write one of ${variants.join(", ")}.`
+	});
+	let to = text(attrs.to);
+	const href = text(attrs.href);
+	if (href && !to) {
+		walk.issues.push({
+			rule: "comark/cards/href-instead-of-to",
+			message: `${name}: Nuxt UI links a card with \`to\`, so it ignores \`href\`. Write \`to="${clip(href)}"\` instead.`
+		});
+		to = href;
+	}
+	if (to && !isSafeHref(to)) {
+		walk.issues.push({
+			rule: "comark/cards/unsafe-link",
+			message: `${name}: \`to\` must be a page or a web address, so it isn't a link.`
+		});
+		to = "";
+	}
+	if (to) {
+		result.to = to;
+		const target = text(attrs.target) || (isExternalHref(to) ? "_blank" : "");
+		if (target) result.target = target;
+		if (target === "_blank") result.external = "true";
+		result.label = words || "Card link";
+	}
+	const icon = text(attrs.icon);
+	if (icon) walk.icons.push({
+		card: node,
+		value: icon,
+		name
+	});
+	node[1] = result;
+	const head = title.length ? [[
+		"card-title",
+		{},
+		...title
+	]] : [];
+	node.splice(2, node.length - 2, ...head, ...content);
+}
+function columns(node, walk) {
+	const name = `\`::columns\` ${++walk.columns}`;
+	unknownProps(node, name, "::columns", ["cols"], walk);
+	const written = text(resolve(node, walk).cols);
+	let cols = "2";
+	if (/^[1-6]$/.test(written)) cols = written;
+	else if (written) walk.issues.push({
+		rule: "comark/cards/invalid-cols",
+		message: `${name}: \`cols\` is "${clip(written)}", so it shows 2 columns. Write a number from 1 to 6.`
+	});
+	const cells = childrenOf(node).filter(isContent).map((child) => isElement(child) && child[0] === "column" ? [
+		"column",
+		{},
+		...childrenOf(child)
+	] : [
+		"column",
+		{},
+		child
+	]);
+	if (!cells.length) walk.issues.push({
+		rule: "comark/cards/empty-columns",
+		message: `${name} is empty. Put a block inside for each column, or remove it.`
+	});
+	node[1] = { cols };
+	node.splice(2, node.length - 2, ...cells);
+}
+function transform(nodes, walk) {
+	for (const node of nodes) {
+		if (!isElement(node)) continue;
+		if (node[0] === "card") card(node, walk);
+		else if (node[0] === "columns") columns(node, walk);
+		else if (node[0] === "card-group") node[1] = {};
+		transform(childrenOf(node), walk);
+	}
+}
+async function addIcons(walk, resolver) {
+	if (!walk.icons.length) return;
+	const resolved = await resolver.resolve(walk.icons.map(({ value }) => value));
+	for (const { card: node, value, name } of walk.icons) {
+		const icon = resolved.get(value);
+		if (!icon) continue;
+		if ("problem" in icon) walk.issues.push({
+			rule: iconProblemRule(icon),
+			message: `${name}, icon "${clip(value)}": ${describeIconProblem(value, icon)}`
+		});
+		else node[1].icon = icon;
+	}
+}
+/**
+* Turns `::card-group` and `::card{title description icon to target color variant}` into cards, link cards when they
+* have `to`, and `::columns{cols}` into a grid with a cell per block. Problems are added to `meta.issues`.
+*/
+var src_default = defineComarkPlugin((options = {}) => {
+	const resolver = options.iconResolver ?? createIcons();
+	return {
+		name: "comark-cards",
+		async post(state) {
+			const { tree } = state;
+			const walk = {
+				data: {
+					frontmatter: tree.frontmatter,
+					meta: tree.meta,
+					data: {},
+					props: {}
+				},
+				issues: [],
+				icons: [],
+				cards: 0,
+				columns: 0
+			};
+			transform(tree.nodes, walk);
+			await addIcons(walk, resolver);
+			tree.meta.issues = [...tree.meta.issues ?? [], ...walk.issues.map((issue) => issue.message)];
+			tree.meta.issueRules = {
+				...tree.meta.issueRules,
+				...Object.fromEntries(walk.issues.map((issue) => [issue.message, issue.rule]))
+			};
+		}
+	};
+});
+//#endregion
+export { rawText as i, src_default as n, variants as r, colors as t };

package/dist/style.css

@@ -1 +1 @@
-@layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_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(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.ccr){--ccr-primary:var(--ui-primary,var(--primary,var(--_comark-foreground)));--ccr-secondary:var(--ui-secondary,#2563eb);--ccr-success:var(--ui-success,#16a34a);--ccr-info:var(--ui-info,#2563eb);--ccr-warning:var(--ui-warning,#ca8a04);--ccr-error:var(--ui-error,var(--destructive,#dc2626));--ccr-neutral:var(--_comark-foreground)}@media (prefers-color-scheme:dark){:where(.ccr){--ccr-secondary:var(--ui-secondary,#60a5fa);--ccr-success:var(--ui-success,#4ade80);--ccr-info:var(--ui-info,#60a5fa);--ccr-warning:var(--ui-warning,#facc15);--ccr-error:var(--ui-error,var(--destructive,#f87171))}}.ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}.ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.ccr-columns[data-cols='4']{grid-template-columns:repeat(4,minmax(0,1fr))}.ccr-columns[data-cols='5']{grid-template-columns:repeat(5,minmax(0,1fr))}.ccr-columns[data-cols='6']{grid-template-columns:repeat(6,minmax(0,1fr))}@container (width<36rem){.ccr-group>*,.ccr-columns>*{grid-column:1/-1}}.ccr-group>.ccr{margin:0}.ccr-column>:first-child{margin-top:0}.ccr-column>:last-child{margin-bottom:0}.ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);box-shadow:0 1px 2px rgb(0 0 0/.05);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}.ccr[data-color='secondary']{--ccr:var(--ccr-secondary)}.ccr[data-color='success']{--ccr:var(--ccr-success)}.ccr[data-color='info']{--ccr:var(--ccr-info)}.ccr[data-color='warning']{--ccr:var(--ccr-warning)}.ccr[data-color='error']{--ccr:var(--ccr-error)}.ccr[data-color='neutral']{--ccr:var(--ccr-neutral)}.ccr[data-variant='soft'],.ccr[data-variant='subtle']{background:color-mix(in srgb,var(--ccr) 10%,var(--_comark-background))}.ccr[data-variant='soft']{border-color:transparent}.ccr[data-variant='subtle']{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr>:last-child{margin-bottom:0}.ccr>.ci{--comark-icon-size:1.25rem;display:block;margin-bottom:.75rem;color:var(--ccr)}.ccr-title{margin:0 0 .25rem;color:var(--_comark-foreground);font-size:.9375rem;font-weight:600;line-height:1.375rem;text-wrap:balance}.ccr-title+*{margin-top:0}.ccr-link{position:absolute;inset:0;z-index:0;border-radius:inherit}.ccr-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.ccr :is(a,button):not(.ccr-link){position:relative;z-index:1}.ccr:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 50%,var(--_comark-border));background:color-mix(in srgb,var(--_comark-accent) 50%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover{border-color:transparent}.ccr[data-variant='subtle']:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover,.ccr[data-variant='subtle']:has(>.ccr-link):hover{background:color-mix(in srgb,var(--ccr) 16%,var(--_comark-background))}.ccr-external{position:absolute;top:1rem;inset-inline-end:1rem;width:1rem;height:1rem;color:var(--_comark-muted)}.ccr:dir(rtl) .ccr-external{scale:-1 1}@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}}
+@layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb));--_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(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa))}}:where(.light,.light *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb))}:where(.dark,.dark *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa))}:where(.ccr){--ccr-primary:var(--ui-primary,var(--primary,var(--_comark-foreground)));--ccr-secondary:var(--ui-secondary,var(--_comark-info));--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}.ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}.ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.ccr-columns[data-cols='4']{grid-template-columns:repeat(4,minmax(0,1fr))}.ccr-columns[data-cols='5']{grid-template-columns:repeat(5,minmax(0,1fr))}.ccr-columns[data-cols='6']{grid-template-columns:repeat(6,minmax(0,1fr))}@container (width<36rem){.ccr-group>*,.ccr-columns>*{grid-column:1/-1}}.ccr-group>.ccr{margin:0}.ccr-column>:first-child{margin-top:0}.ccr-column>:last-child{margin-bottom:0}.ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}.ccr[data-color='secondary']{--ccr:var(--ccr-secondary)}.ccr[data-color='success']{--ccr:var(--ccr-success)}.ccr[data-color='info']{--ccr:var(--ccr-info)}.ccr[data-color='warning']{--ccr:var(--ccr-warning)}.ccr[data-color='error']{--ccr:var(--ccr-error)}.ccr[data-color='neutral']{--ccr:var(--ccr-neutral)}.ccr[data-variant='soft'],.ccr[data-variant='subtle']{background:color-mix(in srgb,var(--ccr) 10%,var(--_comark-background))}.ccr[data-variant='soft']{border-color:transparent}.ccr[data-variant='subtle']{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr>:last-child{margin-bottom:0}.ccr>.ci{--comark-icon-size:1.25rem;display:block;margin-bottom:.75rem;color:var(--ccr)}.ccr-title{margin:0 0 .25rem;color:var(--_comark-foreground);font-size:.9375rem;font-weight:600;line-height:1.375rem;text-wrap:balance}.ccr-title+*{margin-top:0}.ccr-link{position:absolute;inset:0;z-index:0;border-radius:inherit}.ccr-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.ccr :is(a,button):not(.ccr-link){position:relative;z-index:1}.ccr:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 50%,var(--_comark-border));background:color-mix(in srgb,var(--_comark-accent) 50%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover{border-color:transparent}.ccr[data-variant='subtle']:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover,.ccr[data-variant='subtle']:has(>.ccr-link):hover{background:color-mix(in srgb,var(--ccr) 16%,var(--_comark-background))}.ccr-external{position:absolute;top:1rem;inset-inline-end:1rem;width:1rem;height:1rem;color:var(--_comark-muted)}.ccr:dir(rtl) .ccr-external{scale:-1 1}@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}}

package/dist/vue.mjs

@@ -1,5 +1,5 @@
-import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-C5acm8_C.mjs";
-import src_default, { colors, variants } from "./index.mjs";
+import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DsO8I6Oo.mjs";
+import { n as src_default, r as variants, t as colors } from "./src-BsKBRfFx.mjs";
 import { defineComponent, h, onMounted } from "vue";
 import { Icon } from "comark-icon/vue";
 //#region src/vue.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-cards",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "Cards, link cards, and columns in Nuxt UI's syntax, with no script. A Comark plugin.",
   "keywords": [
     "card",
@@ -46,7 +46,7 @@
     "provenance": true
   },
   "dependencies": {
-    "comark-icon": "^0.7.5"
+    "comark-icon": "^0.8.0"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",
@@ -59,7 +59,7 @@
     "react-dom": "^19.3.1",
     "svelte": "^5.57.2",
     "vue": "^3.5.44",
-    "comark-zoom": "0.7.5"
+    "comark-zoom": "0.8.0"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",