comark-file-tree 0.7.5 → 0.8.0

package/README.md

@@ -33,17 +33,17 @@ README.md
 
 Indent each level by two spaces, or paste what `tree` prints. A trailing `/` makes a folder; `+`, `-`, and `~` mark an entry added, removed, or changed; ` # ` starts a note; and `...` stands for entries left out. Pass `iconResolver` from comark-icon's `createIcons()` to draw each file's icon; without it, entries get plain glyphs and nothing is fetched.
 
-The plugin adds every problem to `meta.issues`, so a host can reject a document before publishing it: a Markdown list instead of a fence (a list turns `__init__.py` bold and drops `[id].vue`), content beside the fence, and an empty block. Each issue names its block and says how to fix it.
+The plugin adds every problem to `meta.issues`, so a host can reject a document before publishing it, such as a Markdown list instead of a fence (a list turns `__init__.py` bold and drops `[id].vue`), content beside the fence, and an empty block.
 
 ## Renderers
 
 | Renderer | Import |
 | --- | --- |
-| `@comark/html` | `comark-file-tree/html`: the styles are inlined once per document |
+| `@comark/html` | `comark-file-tree/html`: the styles are inlined |
 | `@comark/vue` | `comark-file-tree/vue` |
 | `@comark/react` | `comark-file-tree/react` |
 | `@comark/svelte` | `comark-file-tree/svelte` |
 
 Each entry exports the parse plugin as `default` and the renderer's `components`. The Vue, React, and Svelte components add the styles when they mount; import `comark-file-tree/style.css` with your styles so a server-rendered page doesn't shift.
 
-The styles follow shadcn/ui: they read its CSS variables, such as `--accent` and `--border`, when the page has them, and use its neutral theme otherwise. Set the shared `--comark-*` tokens to theme every plugin at once; the rules sit in a `comark` CSS layer, so any plain rule of your own wins, except the spacing that draws the tree: the margins, padding, and bullets of its lists, `details`, and `summary` are `!important`, because a page's own list styles are almost always unlayered and would push entries off their guide lines. Override those with `!important` too.
+The styles follow shadcn/ui: they read its CSS variables, such as `--accent` and `--border`, when the page has them, and use its neutral theme otherwise. Set the shared `--comark-*` tokens to theme every plugin at once; the rules sit in a `comark` CSS layer, so any plain rule of your own wins, except the spacing that draws the tree: the margins, padding, and bullets of its lists, `details`, and `summary` are `!important`. Override those with `!important` too.

package/dist/{client-Djg5meKD.mjs → client-DcAHu-LK.mjs}

@@ -43,20 +43,72 @@ 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 ../../shared/disclosure.ts
-const disclosureMotion = (selector) => `@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){${selector}{interpolate-size:allow-keywords}${selector}::details-content{display:flow-root;block-size:0;overflow-y:clip;transition:block-size .25s cubic-bezier(.23,1,.32,1),content-visibility .25s allow-discrete}${selector}[open]::details-content{block-size:auto}}}`;
+const opening = ".25s cubic-bezier(.23,1,.32,1)";
+const closing = ".18s cubic-bezier(.23,1,.32,1)";
+const disclosureMotion = (selector, rules = "") => `@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){${selector}{interpolate-size:allow-keywords}${selector}::details-content{display:flow-root;block-size:0;opacity:0;overflow-y:clip;transition:block-size ${closing},opacity .12s ease-in,content-visibility .18s allow-discrete}${selector}[open]::details-content{block-size:auto;opacity:1;transition:block-size ${opening},opacity ${opening},content-visibility .25s allow-discrete}${rules}}}`;
 //#endregion
 //#region src/styles.ts
 /**
@@ -66,9 +118,8 @@ const disclosureMotion = (selector) => `@supports (interpolate-size:allow-keywor
 */
 const css = `@layer comark{${[
 	disclosureMotion(".cft details"),
-	theme(".cft"),
-	":where(.cft){--cft-added:#16a34a;--cft-removed:var(--destructive,#dc2626);--cft-changed:#d97706}",
-	"@media (prefers-color-scheme:dark){:where(.cft){--cft-added:#4ade80;--cft-removed:var(--destructive,#f87171);--cft-changed:#fbbf24}}",
+	theme(".cft", "status"),
+	":where(.cft){--cft-added:var(--_comark-success);--cft-removed:var(--_comark-danger);--cft-changed:var(--_comark-warning)}",
 	".cft{margin:1.5rem 0;padding:.75rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}",
 	".cft ul{margin:0!important;padding:0!important;list-style:none!important}",
 	".cft ul ul{margin-inline-start:calc(.5rem - .5px)!important;padding-inline-start:.75rem!important;border-inline-start:1px solid var(--_comark-border)}",
@@ -90,15 +141,23 @@ const css = `@layer comark{${[
 	".cft [data-type='more']{padding:0 .25rem;color:var(--_comark-muted)}"
 ].join("")}}`;
 //#endregion
-//#region src/client.ts
-/** Adds the file tree styles to the page once. The Vue, React, and Svelte components call it when they mount. */
-function addStyles() {
-	if (document.querySelector("style[data-comark-file-tree]")) 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.comarkFileTree = "";
+	style.setAttribute(attribute, "");
 	style.textContent = css;
 	document.head.append(style);
 }
+//#endregion
+//#region src/client.ts
+/** Adds the file tree styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+const addStyles = () => addStyles$1("file-tree", css);
 /**
 * Lucide's folder and file (ISC), each as one path, for entries without an icon. Every renderer draws them in the
 * same `<svg>`, sized for a page without the styles.

package/dist/client.d.mts

@@ -8,7 +8,7 @@ export declare const css: string;
 //#endregion
 //#region src/client.d.ts
 /** Adds the file tree 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 folder and file (ISC), each as one path, for entries without an icon. Every renderer draws them in the
  * same `<svg>`, sized for a page without the styles.

package/dist/client.mjs

@@ -1 +1 @@
-export { t as addStyles, i as css, n as glyphs, r as marks } from "./client-Djg5meKD.mjs";
+export { t as addStyles, i as css, n as glyphs, r as marks } from "./client-DcAHu-LK.mjs";

package/dist/html.mjs

@@ -1,10 +1,28 @@
-import src_default from "./index.mjs";
-import { i as css, n as glyphs, r as marks } from "./client-Djg5meKD.mjs";
+import { t as src_default } from "./src-PLku93wQ.mjs";
+import { i as css, n as glyphs, r as marks } from "./client-DcAHu-LK.mjs";
 import { escapeHtml } from "comark/utils";
 import { iconHtml, iconStyles } from "comark-icon/html";
+//#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 exactly as written, or empty when it has none. */
+const rawText = (value) => scalar(value) ?? "";
+//#endregion
 //#region src/html.ts
 const styled = /* @__PURE__ */ new WeakSet();
-const text = (value) => value === void 0 ? "" : escapeHtml(String(value));
+const text = (value) => escapeHtml(rawText(value));
 const glyph = (d) => `<svg class="cft-glyph" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${d}"></path></svg>`;
 const hasIcon = (node) => Array.isArray(node) && (Boolean(node[1]?.icon) || node.slice(2).some(hasIcon));
 const fileTree = async (node, state) => {

package/dist/index.mjs

@@ -1,209 +1 @@
-import { defineComarkPlugin } from "comark";
-import { textContent } from "comark/utils";
-//#region src/index.ts
-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 clip = (value) => {
-	const words = value.trim().replace(/\s+/g, " ");
-	return words.length > 40 ? `${words.slice(0, 39)}…` : words;
-};
-const ICONS = {
-	folder: "vscode-icons:default-folder-opened",
-	file: "vscode-icons:default-file",
-	".ts": "vscode-icons:file-type-typescript-official",
-	".mts": "vscode-icons:file-type-typescript-official",
-	".cts": "vscode-icons:file-type-typescript-official",
-	".tsx": "vscode-icons:file-type-reactts",
-	".js": "vscode-icons:file-type-js-official",
-	".mjs": "vscode-icons:file-type-js-official",
-	".cjs": "vscode-icons:file-type-js-official",
-	".jsx": "vscode-icons:file-type-reactjs",
-	".json": "vscode-icons:file-type-json",
-	".md": "vscode-icons:file-type-markdown",
-	".mdx": "vscode-icons:file-type-mdx",
-	".vue": "vscode-icons:file-type-vue",
-	".svelte": "vscode-icons:file-type-svelte",
-	".astro": "vscode-icons:file-type-astro",
-	".css": "vscode-icons:file-type-css",
-	".scss": "vscode-icons:file-type-scss",
-	".html": "vscode-icons:file-type-html",
-	".yaml": "vscode-icons:file-type-yaml",
-	".yml": "vscode-icons:file-type-yaml",
-	".toml": "vscode-icons:file-type-toml",
-	".py": "vscode-icons:file-type-python",
-	".rs": "vscode-icons:file-type-rust",
-	".go": "vscode-icons:file-type-go",
-	".sh": "vscode-icons:file-type-shell",
-	".svg": "vscode-icons:file-type-svg",
-	".png": "vscode-icons:file-type-image",
-	".jpg": "vscode-icons:file-type-image",
-	".jpeg": "vscode-icons:file-type-image",
-	".gif": "vscode-icons:file-type-image",
-	".webp": "vscode-icons:file-type-image",
-	".txt": "vscode-icons:file-type-text",
-	".env": "vscode-icons:file-type-dotenv",
-	".gitignore": "vscode-icons:file-type-git",
-	"package.json": "vscode-icons:file-type-npm",
-	"tsconfig.json": "vscode-icons:file-type-tsconfig",
-	"pnpm-lock.yaml": "vscode-icons:file-type-pnpm",
-	"pnpm-workspace.yaml": "vscode-icons:file-type-pnpm",
-	dockerfile: "vscode-icons:file-type-docker",
-	license: "vscode-icons:file-type-license"
-};
-const STATES = /* @__PURE__ */ new Map([
-	["+", "added"],
-	["-", "removed"],
-	["~", "changed"]
-]);
-const BRANCHES = /^(?:[│|][\s ]{2,3}|[\s ])*(?:[├└|`+\\](?:──|--)[─-]*[\s ]?)?/u;
-const NOTE = /\s+#\s+(.*)$/;
-const SUMMARY = /^\d+ director(?:y|ies)(?:, \d+ files?)?$/;
-function entry(source) {
-	let rest = source;
-	const note = NOTE.exec(rest);
-	if (note) rest = rest.slice(0, note.index);
-	rest = rest.trim();
-	const marker = /^([+~-])\s+/.exec(rest);
-	if (marker) rest = rest.slice(marker[0].length);
-	if (!rest) return void 0;
-	const attrs = {};
-	if (rest === "..." || rest === "…") attrs.type = "more";
-	else if (rest.endsWith("/")) {
-		attrs.type = "folder";
-		attrs.name = rest.replace(/\/+$/, "");
-	} else {
-		attrs.type = "file";
-		attrs.name = rest;
-	}
-	const state = STATES.get(marker?.[1] ?? "");
-	if (state) attrs.state = state;
-	if (note?.[1]?.trim()) attrs.note = note[1].trim();
-	return ["file-tree-item", attrs];
-}
-function readTree(source) {
-	const roots = [];
-	const open = [];
-	for (const raw of source.split("\n")) {
-		const line = raw.replace(/\s+$/, "");
-		const column = BRANCHES.exec(line)?.[0].length ?? 0;
-		if (SUMMARY.test(line.slice(column))) continue;
-		const item = entry(line.slice(column));
-		if (!item) continue;
-		while (open.length && (open.at(-1)?.column ?? 0) >= column) open.pop();
-		const parent = open.at(-1)?.item;
-		if (parent) {
-			if (parent[1].type === "file") parent[1].type = "folder";
-			parent.push(item);
-		} else roots.push(item);
-		if (item[1].type !== "more") open.push({
-			column,
-			item
-		});
-	}
-	const [only] = roots;
-	if (roots.length === 1 && only?.[1].name === ".") return childrenOf(only).filter(isElement);
-	return roots;
-}
-function iconKey(item, icons) {
-	const name = (item[1].name ?? "").toLowerCase();
-	if (item[1].type === "folder") return icons[`${name}/`] ?? icons.folder;
-	const dot = name.lastIndexOf(".");
-	return icons[name] ?? (dot >= 0 ? icons[name.slice(dot)] : void 0) ?? icons.file;
-}
-function* items(nodes) {
-	for (const node of nodes) {
-		if (!isElement(node)) continue;
-		if (node[0] === "file-tree-item") yield node;
-		yield* items(childrenOf(node));
-	}
-}
-const KINDS = /* @__PURE__ */ new Map([
-	["p", "paragraph"],
-	["ul", "list"],
-	["ol", "list"],
-	["blockquote", "quote"],
-	["table", "table"]
-]);
-function describe(node) {
-	if (!Array.isArray(node)) return `the text "${clip(node)}"`;
-	if (!isElement(node)) return "a comment";
-	const kind = KINDS.get(node[0]) ?? `\`${node[0]}\``;
-	const words = clip(textContent(node));
-	return `the ${kind}${words ? ` "${words}"` : ""}`;
-}
-function fileTree(node, name, issues) {
-	for (const key of Object.keys(node[1])) {
-		const prop = key.replace(/^:/, "");
-		if (prop !== "id" && prop !== "class") issues.push({
-			rule: "comark/file-tree/unknown-prop",
-			message: `${name}: \`${prop}\` isn't a prop of \`::file-tree\`, which takes none, so it's ignored. Remove it.`
-		});
-	}
-	const content = childrenOf(node).filter(isContent);
-	const [block] = content.filter((child) => isElement(child) && child[0] === "pre");
-	if (!isElement(block)) {
-		const list = content.find((child) => isElement(child) && /^[ou]l$/.test(child[0]));
-		issues.push(list ? {
-			rule: "comark/file-tree/list-instead-of-fence",
-			message: `${name} holds a Markdown list, which turns names like \`__init__.py\` bold and drops \`[id].vue\`. Write the tree in a fenced block.`
-		} : {
-			rule: "comark/file-tree/empty-tree",
-			message: `${name} has no tree. Write the tree in a fenced block inside it, one entry per line.`
-		});
-		return content;
-	}
-	for (const child of content) if (child !== block) issues.push({
-		rule: "comark/file-tree/content-dropped",
-		message: `${name}: only one fenced block goes inside, so ${describe(child)} doesn't render. Move it out of the block.`
-	});
-	const tree = readTree(textContent(block));
-	if (!tree.length) issues.push({
-		rule: "comark/file-tree/empty-tree",
-		message: `${name}'s fenced block is empty. Write one entry per line.`
-	});
-	node.splice(1, node.length - 1, {}, ...tree);
-	return [node];
-}
-/**
-* Turns `::file-tree` around a fenced block, one entry per line indented by two spaces or pasted from `tree`, into a
-* tree of folders and files. A trailing `/` makes a folder, `+`, `-`, and `~` mark an entry added, removed, or
-* changed, `# note` ends a line with a note, and `...` stands for entries left out. Problems are added to `meta.issues`.
-*/
-var src_default = defineComarkPlugin((options = {}) => {
-	const icons = Object.fromEntries(Object.entries({
-		...ICONS,
-		...options.icons
-	}).map(([key, icon]) => [key.toLowerCase(), icon]));
-	return {
-		name: "comark-file-tree",
-		async post(state) {
-			const { tree } = state;
-			const issues = [];
-			let count = 0;
-			const transform = (nodes) => nodes.flatMap((node) => {
-				if (!isElement(node)) return [node];
-				if (node[0] === "file-tree") return fileTree(node, `\`::file-tree\` ${++count}`, issues);
-				node.splice(2, node.length - 2, ...transform(childrenOf(node)));
-				return [node];
-			});
-			tree.nodes = transform(tree.nodes);
-			if (options.iconResolver) {
-				const all = [...items(tree.nodes)].filter((item) => item[1].type !== "more");
-				const keys = all.map((item) => iconKey(item, icons));
-				const resolved = await options.iconResolver.resolve(keys.filter((key) => Boolean(key)));
-				for (const [at, item] of all.entries()) {
-					const icon = resolved.get(keys[at] ?? "");
-					if (icon && "src" in icon) item[1].icon = icon;
-				}
-			}
-			tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map((issue) => issue.message)];
-			tree.meta.issueRules = {
-				...tree.meta.issueRules,
-				...Object.fromEntries(issues.map((issue) => [issue.message, issue.rule]))
-			};
-		}
-	};
-});
-//#endregion
-export { src_default as default };
+export { t as default } from "./src-PLku93wQ.mjs";

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import src_default from "./index.mjs";
-import { n as glyphs, r as marks, t as addStyles } from "./client-Djg5meKD.mjs";
+import { t as src_default } from "./src-PLku93wQ.mjs";
+import { n as glyphs, r as marks, t as addStyles } from "./client-DcAHu-LK.mjs";
 import { Icon } from "comark-icon/react";
 import { createElement, useEffect } from "react";
 //#region src/react.ts

package/dist/src-PLku93wQ.mjs

@@ -0,0 +1,211 @@
+import { defineComarkPlugin } from "comark";
+import { textContent } from "comark/utils";
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
+//#region src/index.ts
+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 ICONS = {
+	folder: "vscode-icons:default-folder-opened",
+	file: "vscode-icons:default-file",
+	".ts": "vscode-icons:file-type-typescript-official",
+	".mts": "vscode-icons:file-type-typescript-official",
+	".cts": "vscode-icons:file-type-typescript-official",
+	".tsx": "vscode-icons:file-type-reactts",
+	".js": "vscode-icons:file-type-js-official",
+	".mjs": "vscode-icons:file-type-js-official",
+	".cjs": "vscode-icons:file-type-js-official",
+	".jsx": "vscode-icons:file-type-reactjs",
+	".json": "vscode-icons:file-type-json",
+	".md": "vscode-icons:file-type-markdown",
+	".mdx": "vscode-icons:file-type-mdx",
+	".vue": "vscode-icons:file-type-vue",
+	".svelte": "vscode-icons:file-type-svelte",
+	".astro": "vscode-icons:file-type-astro",
+	".css": "vscode-icons:file-type-css",
+	".scss": "vscode-icons:file-type-scss",
+	".html": "vscode-icons:file-type-html",
+	".yaml": "vscode-icons:file-type-yaml",
+	".yml": "vscode-icons:file-type-yaml",
+	".toml": "vscode-icons:file-type-toml",
+	".py": "vscode-icons:file-type-python",
+	".rs": "vscode-icons:file-type-rust",
+	".go": "vscode-icons:file-type-go",
+	".sh": "vscode-icons:file-type-shell",
+	".svg": "vscode-icons:file-type-svg",
+	".png": "vscode-icons:file-type-image",
+	".jpg": "vscode-icons:file-type-image",
+	".jpeg": "vscode-icons:file-type-image",
+	".gif": "vscode-icons:file-type-image",
+	".webp": "vscode-icons:file-type-image",
+	".txt": "vscode-icons:file-type-text",
+	".env": "vscode-icons:file-type-dotenv",
+	".gitignore": "vscode-icons:file-type-git",
+	"package.json": "vscode-icons:file-type-npm",
+	"tsconfig.json": "vscode-icons:file-type-tsconfig",
+	"pnpm-lock.yaml": "vscode-icons:file-type-pnpm",
+	"pnpm-workspace.yaml": "vscode-icons:file-type-pnpm",
+	dockerfile: "vscode-icons:file-type-docker",
+	license: "vscode-icons:file-type-license"
+};
+const STATES = /* @__PURE__ */ new Map([
+	["+", "added"],
+	["-", "removed"],
+	["~", "changed"]
+]);
+const BRANCHES = /^(?:[│|][\s ]{2,3}|[\s ])*(?:[├└|`+\\](?:──|--)[─-]*[\s ]?)?/u;
+const NOTE = /\s+#\s+(.*)$/;
+const SUMMARY = /^\d+ director(?:y|ies)(?:, \d+ files?)?$/;
+function entry(source) {
+	let rest = source;
+	const note = NOTE.exec(rest);
+	if (note) rest = rest.slice(0, note.index);
+	rest = rest.trim();
+	const marker = /^([+~-])\s+/.exec(rest);
+	if (marker) rest = rest.slice(marker[0].length);
+	if (!rest) return void 0;
+	const attrs = {};
+	if (rest === "..." || rest === "…") attrs.type = "more";
+	else if (rest.endsWith("/")) {
+		attrs.type = "folder";
+		attrs.name = rest.replace(/\/+$/, "");
+	} else {
+		attrs.type = "file";
+		attrs.name = rest;
+	}
+	const state = STATES.get(marker?.[1] ?? "");
+	if (state) attrs.state = state;
+	if (note?.[1]?.trim()) attrs.note = note[1].trim();
+	return ["file-tree-item", attrs];
+}
+function readTree(source) {
+	const roots = [];
+	const open = [];
+	for (const raw of source.split("\n")) {
+		const line = raw.replace(/\s+$/, "");
+		const column = BRANCHES.exec(line)?.[0].length ?? 0;
+		if (SUMMARY.test(line.slice(column))) continue;
+		const item = entry(line.slice(column));
+		if (!item) continue;
+		while (open.length && (open.at(-1)?.column ?? 0) >= column) open.pop();
+		const parent = open.at(-1)?.item;
+		if (parent) {
+			if (parent[1].type === "file") parent[1].type = "folder";
+			parent.push(item);
+		} else roots.push(item);
+		if (item[1].type !== "more") open.push({
+			column,
+			item
+		});
+	}
+	const [only] = roots;
+	if (roots.length === 1 && only?.[1].name === ".") return childrenOf(only).filter(isElement);
+	return roots;
+}
+function iconKey(item, icons) {
+	const name = (item[1].name ?? "").toLowerCase();
+	if (item[1].type === "folder") return icons[`${name}/`] ?? icons.folder;
+	const dot = name.lastIndexOf(".");
+	return icons[name] ?? (dot >= 0 ? icons[name.slice(dot)] : void 0) ?? icons.file;
+}
+function* items(nodes) {
+	for (const node of nodes) {
+		if (!isElement(node)) continue;
+		if (node[0] === "file-tree-item") yield node;
+		yield* items(childrenOf(node));
+	}
+}
+const KINDS = /* @__PURE__ */ new Map([
+	["p", "paragraph"],
+	["ul", "list"],
+	["ol", "list"],
+	["blockquote", "quote"],
+	["table", "table"]
+]);
+function describe(node) {
+	if (!Array.isArray(node)) return `the text "${clip(node)}"`;
+	if (!isElement(node)) return "a comment";
+	const kind = KINDS.get(node[0]) ?? `\`${node[0]}\``;
+	const words = clip(textContent(node));
+	return `the ${kind}${words ? ` "${words}"` : ""}`;
+}
+function fileTree(node, name, issues) {
+	for (const key of Object.keys(node[1])) {
+		const prop = key.replace(/^:/, "");
+		if (prop !== "id" && prop !== "class") issues.push({
+			rule: "comark/file-tree/unknown-prop",
+			message: `${name}: \`${prop}\` isn't a prop of \`::file-tree\`, which takes none, so it's ignored. Remove it.`
+		});
+	}
+	const content = childrenOf(node).filter(isContent);
+	const [block] = content.filter((child) => isElement(child) && child[0] === "pre");
+	if (!isElement(block)) {
+		const list = content.find((child) => isElement(child) && /^[ou]l$/.test(child[0]));
+		issues.push(list ? {
+			rule: "comark/file-tree/list-instead-of-fence",
+			message: `${name} holds a Markdown list, which turns names like \`__init__.py\` bold and drops \`[id].vue\`. Write the tree in a fenced block.`
+		} : {
+			rule: "comark/file-tree/empty-tree",
+			message: `${name} has no tree. Write the tree in a fenced block inside it, one entry per line.`
+		});
+		return content;
+	}
+	for (const child of content) if (child !== block) issues.push({
+		rule: "comark/file-tree/content-dropped",
+		message: `${name}: only one fenced block goes inside, so ${describe(child)} doesn't render. Move it out of the block.`
+	});
+	const tree = readTree(textContent(block));
+	if (!tree.length) issues.push({
+		rule: "comark/file-tree/empty-tree",
+		message: `${name}'s fenced block is empty. Write one entry per line.`
+	});
+	node.splice(1, node.length - 1, {}, ...tree);
+	return [node];
+}
+/**
+* Turns `::file-tree` around a fenced block, one entry per line indented by two spaces or pasted from `tree`, into a
+* tree of folders and files. A trailing `/` makes a folder, `+`, `-`, and `~` mark an entry added, removed, or
+* changed, `# note` ends a line with a note, and `...` stands for entries left out. Problems are added to `meta.issues`.
+*/
+var src_default = defineComarkPlugin((options = {}) => {
+	const icons = Object.fromEntries(Object.entries({
+		...ICONS,
+		...options.icons
+	}).map(([key, icon]) => [key.toLowerCase(), icon]));
+	return {
+		name: "comark-file-tree",
+		async post(state) {
+			const { tree } = state;
+			const issues = [];
+			let count = 0;
+			const transform = (nodes) => nodes.flatMap((node) => {
+				if (!isElement(node)) return [node];
+				if (node[0] === "file-tree") return fileTree(node, `\`::file-tree\` ${++count}`, issues);
+				node.splice(2, node.length - 2, ...transform(childrenOf(node)));
+				return [node];
+			});
+			tree.nodes = transform(tree.nodes);
+			if (options.iconResolver) {
+				const all = [...items(tree.nodes)].filter((item) => item[1].type !== "more");
+				const keys = all.map((item) => iconKey(item, icons));
+				const resolved = await options.iconResolver.resolve(keys.filter((key) => Boolean(key)));
+				for (const [at, item] of all.entries()) {
+					const icon = resolved.get(keys[at] ?? "");
+					if (icon && "src" in icon) item[1].icon = icon;
+				}
+			}
+			tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map((issue) => issue.message)];
+			tree.meta.issueRules = {
+				...tree.meta.issueRules,
+				...Object.fromEntries(issues.map((issue) => [issue.message, issue.rule]))
+			};
+		}
+	};
+});
+//#endregion
+export { src_default as t };

package/dist/style.css

@@ -1 +1 @@
-@layer comark{@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){.cft details{interpolate-size:allow-keywords}.cft details::details-content{display:flow-root;block-size:0;overflow-y:clip;transition:block-size .25s cubic-bezier(.23,1,.32,1),content-visibility .25s allow-discrete}.cft details[open]::details-content{block-size:auto}}}:where(.cft){--_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(.cft){--_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(.cft){--cft-added:#16a34a;--cft-removed:var(--destructive,#dc2626);--cft-changed:#d97706}@media (prefers-color-scheme:dark){:where(.cft){--cft-added:#4ade80;--cft-removed:var(--destructive,#f87171);--cft-changed:#fbbf24}}.cft{margin:1.5rem 0;padding:.75rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cft ul{margin:0!important;padding:0!important;list-style:none!important}.cft ul ul{margin-inline-start:calc(.5rem - .5px)!important;padding-inline-start:.75rem!important;border-inline-start:1px solid var(--_comark-border)}.cft li{margin:0!important;padding:0!important}.cft details{margin:0!important;padding:0!important}.cft summary{display:block;margin:0!important;padding:0!important;list-style:none;border-radius:calc(var(--_comark-radius) - 4px);cursor:pointer}.cft summary::-webkit-details-marker{display:none}.cft summary:hover{background:var(--_comark-accent)}.cft summary:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cft-entry{display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem;white-space:nowrap}.cft-glyph{flex:none;width:1rem;height:1rem;color:var(--_comark-muted)}.cft-entry .ci{flex:none;font-size:1rem}.cft-note{margin-inline-start:.75rem;color:var(--_comark-muted);font-family:var(--_comark-font);white-space:normal}.cft-mark{font-weight:600}.cft [data-state='added']>.cft-entry,.cft [data-state='added']>details>summary>.cft-entry{color:var(--cft-added)}.cft [data-state='removed']>.cft-entry,.cft [data-state='removed']>details>summary>.cft-entry{color:var(--cft-removed)}.cft [data-state='removed'] .cft-name{text-decoration:line-through}.cft [data-state='changed']>.cft-entry,.cft [data-state='changed']>details>summary>.cft-entry{color:var(--cft-changed)}.cft [data-type='more']{padding:0 .25rem;color:var(--_comark-muted)}}
+@layer comark{@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){.cft details{interpolate-size:allow-keywords}.cft details::details-content{display:flow-root;block-size:0;opacity:0;overflow-y:clip;transition:block-size .18s cubic-bezier(.23,1,.32,1),opacity .12s ease-in,content-visibility .18s allow-discrete}.cft details[open]::details-content{block-size:auto;opacity:1;transition:block-size .25s cubic-bezier(.23,1,.32,1),opacity .25s cubic-bezier(.23,1,.32,1),content-visibility .25s allow-discrete}}}:where(.cft){--_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(.cft){--_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(.cft){--_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(.cft){--_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(.cft){--cft-added:var(--_comark-success);--cft-removed:var(--_comark-danger);--cft-changed:var(--_comark-warning)}.cft{margin:1.5rem 0;padding:.75rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cft ul{margin:0!important;padding:0!important;list-style:none!important}.cft ul ul{margin-inline-start:calc(.5rem - .5px)!important;padding-inline-start:.75rem!important;border-inline-start:1px solid var(--_comark-border)}.cft li{margin:0!important;padding:0!important}.cft details{margin:0!important;padding:0!important}.cft summary{display:block;margin:0!important;padding:0!important;list-style:none;border-radius:calc(var(--_comark-radius) - 4px);cursor:pointer}.cft summary::-webkit-details-marker{display:none}.cft summary:hover{background:var(--_comark-accent)}.cft summary:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cft-entry{display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem;white-space:nowrap}.cft-glyph{flex:none;width:1rem;height:1rem;color:var(--_comark-muted)}.cft-entry .ci{flex:none;font-size:1rem}.cft-note{margin-inline-start:.75rem;color:var(--_comark-muted);font-family:var(--_comark-font);white-space:normal}.cft-mark{font-weight:600}.cft [data-state='added']>.cft-entry,.cft [data-state='added']>details>summary>.cft-entry{color:var(--cft-added)}.cft [data-state='removed']>.cft-entry,.cft [data-state='removed']>details>summary>.cft-entry{color:var(--cft-removed)}.cft [data-state='removed'] .cft-name{text-decoration:line-through}.cft [data-state='changed']>.cft-entry,.cft [data-state='changed']>details>summary>.cft-entry{color:var(--cft-changed)}.cft [data-type='more']{padding:0 .25rem;color:var(--_comark-muted)}}

package/dist/vue.mjs

@@ -1,5 +1,5 @@
-import src_default from "./index.mjs";
-import { n as glyphs, r as marks, t as addStyles } from "./client-Djg5meKD.mjs";
+import { t as src_default } from "./src-PLku93wQ.mjs";
+import { n as glyphs, r as marks, t as addStyles } from "./client-DcAHu-LK.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-file-tree",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "A project's folders and files from an indented list or pasted tree output, with added, removed, and changed entries marked. A Comark plugin.",
   "keywords": [
     "comark",
@@ -45,7 +45,7 @@
     "provenance": true
   },
   "dependencies": {
-    "comark-icon": "^0.7.5"
+    "comark-icon": "^0.8.0"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",
@@ -58,7 +58,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",