comark-ui 0.9.1 → 0.10.1

package/README.md

@@ -33,6 +33,14 @@ comarkUi({
 
 It also returns `tags` and `blocks`. `tags` is every element a parsed document can hold besides the components; with the components' names, it's the allowlist for Comark's `security` plugin. `blocks` are the blocks the plugins replace while parsing, such as `::code-group`, which a linter needs beside the components' names.
 
+If a server already parsed your document, import Vue's `components` directly. This keeps the chart parsers and the rest of the parse preset out of the renderer bundle:
+
+```ts
+import { components } from "comark-ui/vue";
+```
+
+The map includes every Vue renderer and the typeset styles. Use `comarkUi(options).components` when you need the map to follow plugin options.
+
 ## Renderers
 
 | Renderer | Import |
@@ -55,7 +63,7 @@ Vue, React, and Svelte leave out annotate and diff, which render only to HTML.
 | `ComarkKit` | The schema: StarterKit, task lists, inline images (drawn as players for video and audio), tables, footnotes, definition lists, CriticMarkup, and Comark's components, slots, and comments, each keeping the attributes it has no field for. |
 | `fromMarkdown`, `toMarkdown` | Convert between Markdown and the editor's JSON with Comark's own parser and writer. Front matter stays beside the document. |
 | `checkMarkdown(markdown, { plugins })` | Whether the editor can save the document without changing what readers see, judged with the plugins the page renders with. A document it can't keep opens read-only. |
-| `Upload` | Uploads pasted and dropped files. Each shows a placeholder with its progress until `upload(file, progress)` returns its URL. |
+| `Upload` | Uploads pasted and dropped files, and the files the `chooseFiles` command picks. Each shows a placeholder with its progress until `upload(file, progress)` returns its URL. |
 | `createEditorCodec({ plugins })` | `{ extensions, split, join, fromMarkdown, toMarkdown, verify }` for a collaborative room, such as ViteHub Realtime's `editor` option. A room keeps the body as the editor's document and the frontmatter as its fields, so a text edit never overwrites the metadata. |
 
 `comark-ui/editor/vue` binds the editor to a Markdown string with `useComarkEditor(markdown)` or `<ComarkEditor v-model="markdown" />`. Run `pnpm playground` in this package to try it.

package/dist/{client-kUEiRbtp.mjs → client-zWY8yhUx.mjs}

@@ -1,3 +1,4 @@
+import { t as addStyles } from "./styles-vZMqDkIY.mjs";
 import { theme } from "comark-zoom/theme";
 //#region src/script.ts
 /**
@@ -164,20 +165,6 @@ function start() {
 	window.__comarkMermaid = state;
 	return state.stop;
 }
-//#endregion
-//#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(name, css) {
-	const attribute = `data-comark-${name}`;
-	if (document.querySelector(`style[${attribute}],link[${attribute}]`)) return;
-	const style = document.createElement("style");
-	style.setAttribute(attribute, "");
-	style.textContent = css;
-	document.head.append(style);
-}
 /**
 * comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
 * `--pele-*` variables, so setting them on the wrapper themes every diagram, light and dark, without drawing it

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
-import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BqBoCTMG.mjs";
+import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-zWY8yhUx.mjs";
 export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss, typesetStylesheet };

package/dist/{editor-9IcfELjG.mjs → editor-CW05gHp7.mjs}

@@ -1,9 +1,11 @@
+import { t as addStyles } from "./styles-vZMqDkIY.mjs";
 import { n as scalar } from "./text-D8j9clg3.mjs";
 import cjk from "comark-cjk";
 import critic from "comark-critic";
 import deflist from "comark-deflist";
 import footnotes from "comark-footnotes";
 import { defineComarkPlugin, parseMarkdown } from "comark";
+import { theme } from "comark-zoom/theme";
 import { Extension, Mark, Node } from "@tiptap/core";
 import Image from "@tiptap/extension-image";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
@@ -654,6 +656,7 @@ const isTaskItem = (child) => isElement(child) && child[0] === "li" && classes(c
 const isCheckbox = (child) => isElement(child) && child[0] === "input" && child[1].type === "checkbox";
 function readList(tag, props, children, reading) {
 	const items = children.filter(isElement);
+	if (tag === "ol" && items.some(isTaskItem)) reading.lossy = true;
 	if (tag === "ul" && items.length && items.every(isTaskItem)) return node("taskList", withProps({}, rest(withoutClass(props, "contains-task-list"))), items.map((item) => readTaskItem(item, reading)));
 	const listItems = items.map((item) => {
 		const blocks = readBlocks(childrenOf(item), reading);
@@ -1167,7 +1170,18 @@ const acceptMedia = (file) => /^(?:image|video|audio)\//.test(file.type);
 function findUpload(state, id) {
 	return uploadKey.getState(state)?.find(void 0, void 0, (spec) => spec.id === id)[0]?.from;
 }
+/** The placeholder's styles, which the editor adds to the page with the first one. */
+const uploadCss = `@layer comark{${[
+	theme(".cue-upload", "primary"),
+	`.cue-upload{display:inline-grid;position:relative;min-width:12rem;max-width:15rem;overflow:hidden;vertical-align:middle;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-accent);color:var(--_comark-foreground);font:500 .75rem/1.4 var(--_comark-font)}`,
+	`.cue-upload>img,.cue-upload>video{grid-area:1/1;width:100%;max-height:10rem;object-fit:cover;opacity:.55}`,
+	`.cue-upload-label{grid-area:1/1;align-self:end;padding:.375rem .5rem .5rem;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`,
+	`.cue-upload>img~.cue-upload-label,.cue-upload>video~.cue-upload-label{background:color-mix(in srgb,var(--_comark-background) 80%,transparent)}`,
+	`.cue-upload::after{content:"";position:absolute;inset:auto 0 0;height:2px;width:var(--cue-upload);background:var(--_comark-primary);transition:width .2s ease-out}`,
+	`@media (prefers-reduced-motion:reduce){.cue-upload::after{transition:none}}`
+].join("")}}`;
 function placeholder(pending) {
+	addStyles("editor-upload", uploadCss);
 	const root = document.createElement("span");
 	root.className = "cue-upload";
 	root.contentEditable = "false";
@@ -1247,6 +1261,28 @@ function send(view, file, pos, upload, options, batch) {
 		options.onError?.(error, file);
 	});
 }
+/**
+* Opens the file picker and uploads what's picked at the cursor, with the same placeholders as a paste. Returns false
+* without an `upload` callback. A "/" menu's Image item calls it through the `chooseFiles` command.
+*/
+function chooseFiles(view, options) {
+	if (!options.upload) return false;
+	const input = document.createElement("input");
+	input.type = "file";
+	input.multiple = true;
+	input.accept = options.pick ?? "image/*,video/*,audio/*";
+	input.style.cssText = "position:fixed;left:-9999px";
+	input.tabIndex = -1;
+	input.addEventListener("change", () => {
+		const files = Array.from(input.files ?? []);
+		input.remove();
+		if (files.length) Promise.all(startUploads(view, files, view.state.selection.from, options));
+	}, { once: true });
+	input.addEventListener("cancel", () => input.remove(), { once: true });
+	document.body.append(input);
+	input.click();
+	return true;
+}
 function insertImage(tr, pos, image) {
 	if (tr.doc.resolve(pos).parent.inlineContent) tr.insert(pos, image);
 	else tr.insert(pos, tr.doc.type.schema.nodes.paragraph.create(null, image));
@@ -1321,17 +1357,21 @@ const Upload = Extension.create({
 	addOptions: () => ({
 		upload: void 0,
 		accept: acceptMedia,
+		pick: void 0,
 		onError: void 0
 	}),
 	addProseMirrorPlugins() {
 		return [uploadPlugin(this.options)];
 	},
 	addCommands() {
-		return { uploadFiles: (files) => ({ view }) => {
-			if (!this.options.upload) return false;
-			Promise.all(startUploads(view, files, view.state.selection.from, this.options));
-			return true;
-		} };
+		return {
+			uploadFiles: (files) => ({ view }) => {
+				if (!this.options.upload) return false;
+				Promise.all(startUploads(view, files, view.state.selection.from, this.options));
+				return true;
+			},
+			chooseFiles: () => ({ view, dispatch }) => dispatch ? chooseFiles(view, this.options) : Boolean(this.options.upload)
+		};
 	}
 });
 //#endregion
@@ -1378,4 +1418,4 @@ function createEditorCodec(options = {}) {
 	};
 }
 //#endregion
-export { FootnoteDefinition as C, DefinitionTerm as S, InlineFootnote as T, CriticDeletion as _, uploadKey as a, DefinitionDescription as b, fromMarkdown as c, ComarkComment as d, ComarkImage as f, CriticComment as g, ComarkSlot as h, startUploads as i, toMarkdown as l, ComarkKit as m, Upload as n, uploadPlugin as o, ComarkInline as p, findUpload as r, checkMarkdown as s, createEditorCodec as t, ComarkBlock as u, CriticHighlight as v, FootnoteReference as w, DefinitionList as x, CriticInsertion as y };
+export { DefinitionList as C, InlineFootnote as D, FootnoteReference as E, DefinitionDescription as S, FootnoteDefinition as T, ComarkSlot as _, startUploads as a, CriticHighlight as b, uploadPlugin as c, toMarkdown as d, ComarkBlock as f, ComarkKit as g, ComarkInline as h, findUpload as i, checkMarkdown as l, ComarkImage as m, Upload as n, uploadCss as o, ComarkComment as p, chooseFiles as r, uploadKey as s, createEditorCodec as t, fromMarkdown as u, CriticComment as v, DefinitionTerm as w, CriticInsertion as x, CriticDeletion as y };

package/dist/{editor-yoVL7Ajq.d.mts → editor-Dk8TRweM.d.mts}

@@ -88,8 +88,10 @@ interface UploadOptions {
    * bytes go; `fetch` can't report them, so use XMLHttpRequest's `upload.onprogress`. Without it, nothing uploads.
    */
   upload?: (file: File, progress: (fraction: number) => void) => Promise<string>;
-  /** Which files to take from a paste or a drop. Images, video, and audio by default. */
+  /** Which files to take from a paste, a drop, or the file picker. Images, video, and audio by default. */
   accept: (file: File) => boolean;
+  /** The file types `chooseFiles()` offers in the file picker, as an `<input accept>` value. Media by default. */
+  pick?: string;
   /** Called when `upload` rejects. The placeholder is gone by then. */
   onError?: (error: unknown, file: File) => void;
 }
@@ -110,12 +112,19 @@ interface View {
 declare const uploadKey: PluginKey<DecorationSet>;
 /** Where placeholder `id` sits now, after every edit since it was added. */
 declare function findUpload(state: EditorState, id: number): number | undefined;
+/** The placeholder's styles, which the editor adds to the page with the first one. */
+declare const uploadCss: string;
 /**
  * Uploads `files` into the document at `pos`. Each shows a placeholder there until its URL comes back, then becomes an
  * image node, which comark-media plays when its URL ends in a video or audio extension. The placeholder is a
  * decoration, so a collaborative room never sees a file that hasn't finished.
  */
 declare function startUploads(view: View, files: File[], pos: number, options: UploadOptions): Promise<string | undefined>[];
+/**
+ * Opens the file picker and uploads what's picked at the cursor, with the same placeholders as a paste. Returns false
+ * without an `upload` callback. A "/" menu's Image item calls it through the `chooseFiles` command.
+ */
+declare function chooseFiles(view: View, options: UploadOptions): boolean;
 /** The plugin alone, for a ProseMirror editor without Tiptap. */
 declare function uploadPlugin(options: UploadOptions): Plugin<DecorationSet>;
 declare module "@tiptap/core" {
@@ -123,6 +132,8 @@ declare module "@tiptap/core" {
     comarkUpload: {
       /** Uploads files at the cursor, as a paste would, such as the ones a file picker returns. */
       uploadFiles: (files: File[]) => ReturnType;
+      /** Opens the file picker and uploads the files picked at the cursor, as a "/" menu's Image item would. */
+      chooseFiles: () => ReturnType;
     };
   }
 }
@@ -170,4 +181,4 @@ interface EditorCodecOptions {
 }
 declare function createEditorCodec(options?: EditorCodecOptions): EditorCodec;
 //#endregion
-export { DefinitionTerm as A, ComarkSlot as C, CriticInsertion as D, CriticHighlight as E, FootnoteReference as M, InlineFootnote as N, DefinitionDescription as O, ComarkKitOptions as S, CriticDeletion as T, ComarkBlock as _, Upload as a, ComarkInline as b, startUploads as c, EditorDocument as d, MarkdownCheck as f, toMarkdown as g, fromMarkdown as h, PendingUpload as i, FootnoteDefinition as j, DefinitionList as k, uploadKey as l, checkMarkdown as m, EditorCodecOptions as n, UploadOptions as o, SplitMarkdown as p, createEditorCodec as r, findUpload as s, EditorCodec as t, uploadPlugin as u, ComarkComment as v, CriticComment as w, ComarkKit as x, ComarkImage as y };
+export { DefinitionDescription as A, ComarkKit as C, CriticDeletion as D, CriticComment as E, InlineFootnote as F, DefinitionTerm as M, FootnoteDefinition as N, CriticHighlight as O, FootnoteReference as P, ComarkInline as S, ComarkSlot as T, fromMarkdown as _, Upload as a, ComarkComment as b, findUpload as c, uploadKey as d, uploadPlugin as f, checkMarkdown as g, SplitMarkdown as h, PendingUpload as i, DefinitionList as j, CriticInsertion as k, startUploads as l, MarkdownCheck as m, EditorCodecOptions as n, UploadOptions as o, EditorDocument as p, createEditorCodec as r, chooseFiles as s, EditorCodec as t, uploadCss as u, toMarkdown as v, ComarkKitOptions as w, ComarkImage as x, ComarkBlock as y };

package/dist/editor-vue.d.mts

@@ -1,4 +1,4 @@
-import { S as ComarkKitOptions } from "./editor-yoVL7Ajq.mjs";
+import { w as ComarkKitOptions } from "./editor-Dk8TRweM.mjs";
 import { ComarkPlugin } from "comark";
 import { AnyExtension } from "@tiptap/core";
 import { Editor } from "@tiptap/vue-3";

package/dist/editor-vue.mjs

@@ -1,5 +1,5 @@
 import { n as isElement, t as childrenOf } from "./nodes-CwDBFXnO.mjs";
-import { c as fromMarkdown, l as toMarkdown, m as ComarkKit, s as checkMarkdown } from "./editor-9IcfELjG.mjs";
+import { d as toMarkdown, g as ComarkKit, l as checkMarkdown, u as fromMarkdown } from "./editor-CW05gHp7.mjs";
 import { Editor, EditorContent } from "@tiptap/vue-3";
 import { rowsOf } from "comark-properties";
 import { Properties } from "comark-properties/vue";

package/dist/editor.d.mts

@@ -1,2 +1,2 @@
-import { A as DefinitionTerm, C as ComarkSlot, D as CriticInsertion, E as CriticHighlight, M as FootnoteReference, N as InlineFootnote, O as DefinitionDescription, S as ComarkKitOptions, T as CriticDeletion, _ as ComarkBlock, a as Upload, b as ComarkInline, c as startUploads, d as EditorDocument, f as MarkdownCheck, g as toMarkdown, h as fromMarkdown, i as PendingUpload, j as FootnoteDefinition, k as DefinitionList, l as uploadKey, m as checkMarkdown, n as EditorCodecOptions, o as UploadOptions, p as SplitMarkdown, r as createEditorCodec, s as findUpload, t as EditorCodec, u as uploadPlugin, v as ComarkComment, w as CriticComment, x as ComarkKit, y as ComarkImage } from "./editor-yoVL7Ajq.mjs";
-export { ComarkBlock, ComarkComment, ComarkImage, ComarkInline, ComarkKit, type ComarkKitOptions, ComarkSlot, CriticComment, CriticDeletion, CriticHighlight, CriticInsertion, DefinitionDescription, DefinitionList, DefinitionTerm, type EditorCodec, type EditorCodecOptions, type EditorDocument, FootnoteDefinition, FootnoteReference, InlineFootnote, type MarkdownCheck, type PendingUpload, type SplitMarkdown, Upload, type UploadOptions, checkMarkdown, createEditorCodec, findUpload, fromMarkdown, startUploads, toMarkdown, uploadKey, uploadPlugin };
+import { A as DefinitionDescription, C as ComarkKit, D as CriticDeletion, E as CriticComment, F as InlineFootnote, M as DefinitionTerm, N as FootnoteDefinition, O as CriticHighlight, P as FootnoteReference, S as ComarkInline, T as ComarkSlot, _ as fromMarkdown, a as Upload, b as ComarkComment, c as findUpload, d as uploadKey, f as uploadPlugin, g as checkMarkdown, h as SplitMarkdown, i as PendingUpload, j as DefinitionList, k as CriticInsertion, l as startUploads, m as MarkdownCheck, n as EditorCodecOptions, o as UploadOptions, p as EditorDocument, r as createEditorCodec, s as chooseFiles, t as EditorCodec, u as uploadCss, v as toMarkdown, w as ComarkKitOptions, x as ComarkImage, y as ComarkBlock } from "./editor-Dk8TRweM.mjs";
+export { ComarkBlock, ComarkComment, ComarkImage, ComarkInline, ComarkKit, type ComarkKitOptions, ComarkSlot, CriticComment, CriticDeletion, CriticHighlight, CriticInsertion, DefinitionDescription, DefinitionList, DefinitionTerm, type EditorCodec, type EditorCodecOptions, type EditorDocument, FootnoteDefinition, FootnoteReference, InlineFootnote, type MarkdownCheck, type PendingUpload, type SplitMarkdown, Upload, type UploadOptions, checkMarkdown, chooseFiles, createEditorCodec, findUpload, fromMarkdown, startUploads, toMarkdown, uploadCss, uploadKey, uploadPlugin };

package/dist/editor.mjs

@@ -1 +1 @@
-export { u as ComarkBlock, d as ComarkComment, f as ComarkImage, p as ComarkInline, m as ComarkKit, h as ComarkSlot, g as CriticComment, _ as CriticDeletion, v as CriticHighlight, y as CriticInsertion, b as DefinitionDescription, x as DefinitionList, S as DefinitionTerm, C as FootnoteDefinition, w as FootnoteReference, T as InlineFootnote, n as Upload, s as checkMarkdown, t as createEditorCodec, r as findUpload, c as fromMarkdown, i as startUploads, l as toMarkdown, a as uploadKey, o as uploadPlugin } from "./editor-9IcfELjG.mjs";
+export { f as ComarkBlock, p as ComarkComment, m as ComarkImage, h as ComarkInline, g as ComarkKit, _ as ComarkSlot, v as CriticComment, y as CriticDeletion, b as CriticHighlight, x as CriticInsertion, S as DefinitionDescription, C as DefinitionList, w as DefinitionTerm, T as FootnoteDefinition, E as FootnoteReference, D as InlineFootnote, n as Upload, l as checkMarkdown, r as chooseFiles, t as createEditorCodec, i as findUpload, u as fromMarkdown, a as startUploads, d as toMarkdown, o as uploadCss, s as uploadKey, c as uploadPlugin } from "./editor-CW05gHp7.mjs";

package/dist/html.d.mts

@@ -1,4 +1,4 @@
-import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-Cq3zytGw.mjs";
+import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-7SBL13EQ.mjs";
 import { NodeHandler } from "comark";
 //#region src/html.d.ts
 /**

package/dist/html.mjs

@@ -1,6 +1,6 @@
-import { n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
-import { t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
-import { a as start, n as mermaidBar, r as mermaidCss } from "./client-kUEiRbtp.mjs";
+import { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.mjs";
+import { t as typesetCss } from "./typeset-css-BqBoCTMG.mjs";
+import { a as start, n as mermaidBar, r as mermaidCss } from "./client-zWY8yhUx.mjs";
 import { t as rawText } from "./text-D8j9clg3.mjs";
 import { escapeHtml } from "comark/utils";
 import * as annotate from "comark-annotate/html";
@@ -38,6 +38,7 @@ import * as steps from "comark-steps/html";
 import * as table from "comark-table/html";
 import * as tabs from "comark-tabs/html";
 import * as tests from "comark-tests/html";
+import * as time from "comark-time/html";
 import * as zoom from "comark-zoom/html";
 //#region ../../shared/html.ts
 /** A value as the inside of a double-quoted HTML attribute. */
@@ -66,7 +67,7 @@ const mermaid = (zooms) => ({
 		const width = /^<div[^>]*><svg[^>]* width="([\d.]+)"/.exec(card)?.[1];
 		const wide = width ? ` data-wide style="--cmm-svg:${Math.ceil(Number(width))}px"` : "";
 		const zoomed = zooms && width ? card.replace(/^<div/, "<div data-zoom tabindex=\"0\"") : card;
-		return (first ? `<style data-comark-mermaid>${mermaidCss}</style>` : "") + `<div class="cmm"${wide} data-source="${attr(source)}">${zoomed}<div class="cmm-bar">${mermaidBar()}</div>${first ? `<script>${mermaidScript}<\/script>` : ""}${zooms && width ? zoom.runtime(state) : ""}</div>`;
+		return (first ? `<style data-comark-mermaid>${mermaidCss}</style>` : "") + `<div class="cmm" data-comark-frame${wide} data-source="${attr(source)}">${zoomed}<div class="cmm-bar">${mermaidBar()}</div>${first ? `<script>${mermaidScript}<\/script>` : ""}${zooms && width ? zoom.runtime(state) : ""}</div>`;
 	}) }
 });
 const typeset = () => `<style data-comark-typeset>${typesetCss}</style>`;
@@ -107,6 +108,7 @@ var html_default = (options) => preset({
 	table,
 	tabs,
 	tests,
+	time,
 	typeset,
 	zoom
 }, options);

package/dist/{index-Cq3zytGw.d.mts → index-7SBL13EQ.d.mts}

@@ -28,6 +28,7 @@ import { QuizOptions } from "comark-quiz";
 import { TableOptions } from "comark-table";
 import { TabsOptions } from "comark-tabs";
 import { TestsOptions } from "comark-tests";
+import { TimeOptions } from "comark-time";
 import { ZoomOptions } from "comark-zoom";
 //#region src/mermaid-limits.d.ts
 type MermaidOptions = PeleConfig & {
@@ -62,7 +63,7 @@ type ShikiOptions = {
    * and report a limit issue without checking whether the language is supported.
    */
   highlighter: (language: string) => ShikiHighlighter | undefined | Promise<ShikiHighlighter | undefined>;
-  /** Theme names your highlighter has loaded. The dark one goes in `--shiki-dark`, which the typeset styles follow. */
+  /** Theme names your highlighter has loaded. The dark one goes in `--shiki-dark`, which typeset and comark-code's styles follow. */
   themes: {
     light: string;
     dark?: string;
@@ -154,6 +155,8 @@ type PresetOptions = {
   xref?: XrefOptions | boolean;
   /** Reads no JUnit reports unless you pass `{ root }` or `{ read }`; inline reports render either way. */
   tests?: TestsOptions | boolean;
+  /** `:time[2026-10-12]` as relative time: "3 days ago", a date past `threshold`, and the full date in a tooltip. */
+  time?: TimeOptions | boolean;
   zoom?: ZoomOptions | boolean;
   /**
    * Highlights fenced code with your own Shiki, before comark-code. Off unless you pass one, so the preset bundles no
@@ -220,6 +223,7 @@ type Renderer<C> = {
   tabs: Part<C, TabsOptions>;
   outline: Part<C, OutlineOptions>;
   tests: Part<C, TestsOptions>;
+  time: Part<C, TimeOptions>;
   zoom: Part<C, ZoomOptions>;
   code: Part<C, CodeOptions>;
   codeNotes: Part<C>;

package/dist/index.d.mts

@@ -1,3 +1,3 @@
 import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-DtOLAa1Z.mjs";
-import { a as commentsCss, c as TYPESET_TAG, d as ShikiOptions, f as MermaidOptions, i as Renderer, l as typeset, n as Preset, o as criticCss, r as PresetOptions, s as preset, t as AnyPlugin, u as ShikiHighlighter } from "./index-Cq3zytGw.mjs";
+import { a as commentsCss, c as TYPESET_TAG, d as ShikiOptions, f as MermaidOptions, i as Renderer, l as typeset, n as Preset, o as criticCss, r as PresetOptions, s as preset, t as AnyPlugin, u as ShikiHighlighter } from "./index-7SBL13EQ.mjs";
 export { AnyPlugin, type MermaidOptions, Preset, PresetOptions, Renderer, type ShikiHighlighter, type ShikiOptions, TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { a as typeset, i as TYPESET_TAG, n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
-import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
+import { a as typeset, i as TYPESET_TAG, n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.mjs";
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BqBoCTMG.mjs";
 export { TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };

package/dist/react.d.mts

@@ -1,4 +1,4 @@
-import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-Cq3zytGw.mjs";
+import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-7SBL13EQ.mjs";
 import { ComponentType } from "react";
 //#region src/react.d.ts
 type AnyComponent = ComponentType<any>;

package/dist/react.mjs

@@ -1,6 +1,6 @@
-import { n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
-import { t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
-import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
+import { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.mjs";
+import { t as typesetCss } from "./typeset-css-BqBoCTMG.mjs";
+import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-zWY8yhUx.mjs";
 import { createElement, useEffect } from "react";
 import * as badge from "comark-badge/react";
 import * as cards from "comark-cards/react";
@@ -33,6 +33,7 @@ import * as steps from "comark-steps/react";
 import * as table from "comark-table/react";
 import * as tabs from "comark-tabs/react";
 import * as tests from "comark-tests/react";
+import * as time from "comark-time/react";
 import * as zoom from "comark-zoom/react";
 //#region src/react.ts
 const Pele = createPeleComponent({
@@ -43,6 +44,7 @@ function Mermaid(props) {
 	useEffect(() => startMermaid(), []);
 	return createElement("div", {
 		className: "cmm",
+		"data-comark-frame": "",
 		"data-source": props.content
 	}, createElement(Pele, props), createElement("div", {
 		className: "cmm-bar",
@@ -90,6 +92,7 @@ var react_default = (options) => preset({
 	table,
 	tabs,
 	tests,
+	time,
 	typeset,
 	zoom
 }, options);

package/dist/skills/before-after-evidence/SKILL.md

@@ -19,7 +19,7 @@ An animation, a transition, a loading sequence, or feedback while dragging happe
 
 ## 1. Capture a comparable pair
 
-Take the after capture from the branch or its preview, and the before capture from a deployment or commit that still behaves the old way. Capture both with the same viewport, zoom, theme, data, scroll position, and open menus, so the change is the only difference.
+Take the after capture from the branch or its preview, and the before capture from a deployment, or from a separate worktree at the base commit, that still behaves the old way. Do not use `git stash` to switch between them: worktrees of one repository share the stash, so another session can pop your changes. Capture both with the same viewport, zoom, theme, data, scroll position, and open menus, so the change is the only difference.
 
 - Set up the state that shows the change before you capture: the long name that wrapped, the error that stayed hidden, the empty list.
 - Clip both captures to one region around the change, the same rectangle on each side. A `::compare` gives each image under half the page width, where a full-page capture's text is too small to read.

package/dist/skills/comark-ui/SKILL.md

@@ -17,6 +17,8 @@ pnpm add comark @comark/html comark-ui
 
 Run the comark CLIs with the [global Vite+ CLI](https://viteplus.dev/guide/global-cli): `vp dlx` for a package the project doesn't install, `vp exec` for one it does. Without Vite+, `pnpm dlx` and `pnpm exec` take the same arguments.
 
+If pnpm reports `ERR_PNPM_TRUST_DOWNGRADE`, read [pnpm trust errors](https://comark-ui.onmax.me/getting-started/#pnpm-trust-errors) for the publishing history and exact-version exceptions. Apply an exception only when the user's instructions authorize the policy change.
+
 ```ts
 import { createHtmlRenderer } from "@comark/html";
 import comarkUi from "comark-ui/html";
@@ -51,7 +53,7 @@ Problems land in `meta.issues` after `parseMarkdown`, one sentence each, and a h
 
 ## Shape the document
 
-This skill teaches the blocks. Four sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `visual-explanation`, and `teach-lesson`. When the user asks for one of those and it isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
+This skill teaches the blocks. Five sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `report`, `visual-explanation`, and `teach-lesson`. When the user asks for one of those and it isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
 
 ## Pick the blocks
 
@@ -77,6 +79,7 @@ Read the reference for each block you use before you write it. Mix the blocks fr
 | A test run's passed, failed, and skipped counts and its failures, from a JUnit report | `::tests` | [tests](references/tests.md) |
 | A note, tip, or warning box, or long output folded away, as on GitHub | `> [!NOTE]`, `<details>` | [github](references/github.md) |
 | The review's status, pull request, author, date, and tags in a box | frontmatter, `::properties` | [properties](references/properties.md) |
+| When something happened or is due, as "2 days ago" or a date, with the full date on hover | `:time[2026-11-02]` | [time](references/time.md) |
 | Claims backed by links, with numbered citations | `:cite`, `::sources` | [sources](references/sources.md) |
 | An icon in a sentence or a table cell, such as a logo or a status | `:icon` | [icon](references/icon.md) |
 | A preview link a reviewer can scan with a phone | `:qr` | [qr](references/qr.md) |

package/dist/skills/comark-ui/references/annotate.md

@@ -35,7 +35,7 @@ Moon phase and vibes don't fit, so the toolbar wraps and pushes the table down.
 
 - `::compare`: `title` is optional and names the comparison for screen readers. `mode` is `columns` (default, side by side) or `slider`. `ink` colors every annotation in both screenshots that doesn't set its own `color`. Its two screenshots are titled Before and After unless they set their own.
 - `::screenshot`: `src` and `alt` are required; `title` (the heading above the image), `href` (the captured page, linked by its host), `viewport` (like `1440x900`), and `ink` are optional. Other content becomes the caption.
-- `::annotation`: `x y w h` are required percentages of the image, numbers from 0 to 100 without `%`. `mark` is `box` (default), `circle`, `underline`, `line` (straight through the middle, along the longer side), `highlight`, `bracket`, `cross`, `check`, or `none`, which needs a `side`. `color` is `violet` (default) to point something out, `red` for a problem, `amber` for a warning, `green` for a fix, `blue` for a second voice, `gray` for neutral, or a 3- or 6-digit hex color. `side` is `top`, `bottom`, `left`, or `right`; keep top or bottom notes at least a quarter of the image apart and left or right notes an eighth apart.
+- `::annotation`: `x y w h` are required percentages of the image, numbers from 0 to 100 without `%`. `mark` is `box` (default), `circle`, `underline`, `line` (straight through the middle, along the longer side), `highlight`, `bracket` (down the side of a box at least twice as tall as it is wide, and across a wide one, whatever its `side`), `cross`, `check`, or `none`, which needs a `side`. `color` is `violet` (default) to point something out, `red` for a problem, `amber` for a warning, `green` for a fix, `blue` for a second voice, `gray` for neutral, or a 3- or 6-digit hex color. `side` is `top`, `bottom`, `left`, or `right`; keep top or bottom notes at least a quarter of the image apart and left or right notes an eighth apart.
 - `at` moves a side note along its margin, as a percentage of the image (across for top and bottom, down for left and right). A note set off from its point reads away from it, so put it on the side with room: a top note at `at=40` pointing left of 40 reads to the right. `to="x,y"` is the point the arrow lands on, measured like the box; without it the arrow meets the middle of the mark's facing edge. Both need a `side`.
 - Annotations must be direct children of a screenshot.
 

package/dist/skills/comark-ui/references/time.md

@@ -0,0 +1,28 @@
+# Dates as relative time
+
+comark-time draws `:time[2026-11-02]` as the words a reader would say, such as "2 days ago" or "in 3 weeks", and past a threshold as a date, such as "Sep 30". Hover or focus opens a tooltip with the full date and time. Use it where a document says when something happened or will: when a pull request opened, when a benchmark ran, when a deadline falls. Write the date in ISO form and leave the words to the plugin.
+
+## Syntax
+
+```md
+Opened :time[2026-11-02], last run :time[2026-11-04T11:59:56Z], due :time[2026-11-25].
+
+The first sighting was :time[2026-09-30]{threshold="8w"}.
+```
+
+- The date goes in the brackets: `2026-11-02`, or with a time of day, `2026-11-02T09:30:00Z`. A date alone counts whole days, so it reads "today", "yesterday", "2 days ago", or "in 3 days", never hours. A time with no offset is in the `timeZone` option's zone.
+- `threshold` sets how far from now it stops reading as relative: a number and `s`, `m`, `h`, `d`, `w`, `mo`, or `y`, such as `3w`. The default is `4w`. `none` keeps it relative at any distance.
+- Past the threshold the text is "Sep 30", or "Sep 30, 2025" in another year, and the tooltip shows how far away it is. Before it, the tooltip shows the full date, with the time and zone when the date has one.
+- No script runs. The words are worked out while parsing and are fixed in rendered HTML, so "2 days ago" stays that until the document is parsed again.
+
+## Write the dates
+
+- Write the exact date from the source: the pull request's `createdAt`, the report's timestamp. Never write "yesterday" or "last week" in prose for a date a reader may look up.
+- A zone-less date and time is read in the host's zone, which the reader can't see. Give a time an offset, such as `Z`, unless it is the author's local time.
+- A date the plugin can't read, such as `next friday` or `2026-02-31`, is shown as written and reported. Fix it to ISO.
+- Leave the threshold alone unless a date is better read as one or the other: `threshold="none"` for a date that must always read relative, a short one such as `1w` for a date that is better absolute within a month.
+
+## Register
+
+- In `comark-ui`: on. `comarkUi({ time: { now, threshold, locale, timeZone } })` passes its options; `now` pins the moment every date is measured from, which a host that caches rendered HTML should do. `time: false` turns it off.
+- Alone: `pnpm add comark @comark/html comark-time`, then `createHtmlRenderer({ plugins: [time()], components })` with both from `comark-time/html`. `comark-time/vue`, `/react`, and `/svelte` render it too. It has no script.

package/dist/skills/report/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: report
+description: Writes research, a ranked shortlist, a comparison, or a plan as one Markdown page someone decides from, with the answer and decisions first, the numbers in charts, and the detail folded. Use when the reader has to choose between options or approve a plan.
+license: MIT
+---
+
+# Report
+
+The reader scans a report before reading it. They want the answer, the decisions they have to make, and the numbers behind both, and they check the rest only when they doubt something. So the page has a fixed shape: the answer on top, one picture per section, short table cells, and detail folded underneath.
+
+For findings about something that already exists, such as a code review or an audit, use `review-document`. For how something works, use `visual-explanation`. This skill shapes a report you already have the material for; gathering the material is the research itself.
+
+## 1. Write the answer and the decisions
+
+Write the answer in two sentences: what you recommend and the main reason. For a plan, that's the first step and the goal it serves. Under it, write each decision the reader has to make as a question they can answer yes or no. Up to three go in the callout as a numbered list. Past three, ask one question ("Take my recommendation on all seven?") and give the decisions their own table right after the answer.
+
+Done when someone who reads only the answer and the callout knows what you recommend and what they have to decide.
+
+## 2. Give every fact one home
+
+List what the report holds: the items, their numbers, any order, the blockers, the findings, what you left out, how you checked. Give each one exactly one section. When the items have both a rank and an order to do them in, keep the order the reader acts on and put the rank's inputs, if it has any, in the picture. Another section refers to a fact by its name or number ("change 3", "D2") and leaves its value where it lives. Reuse the source's numbering; when you have to add IDs, give each kind a prefix no other kind starts with. A chart's table is already under it in a Data fold, so it gets no second copy.
+
+Done when no value, list, or order is written out in two sections.
+
+## 3. Pick one picture per section
+
+A section opens with one sentence that says what to look at, then its picture. A second picture fits only when it answers the question the first one raises, such as the table of steps under the flowchart of their order. Numbers live in charts and table columns, and a sentence names only the number that matters.
+
+| The section answers | Picture |
+| --- | --- |
+| Which items are worth it, by two scores and a size | Bubble chart: `::chart` with a `vega-lite` spec |
+| How big each item is, or what each blocker would unlock | `::chart{type="bar" horizontal labels}` |
+| How each item's size splits into parts | `::chart{type="stacked" horizontal}` |
+| In what order, and what has to land first | `mermaid` flowchart, blockers as `{{hexagons}}` |
+| How a mechanism moves between states | `mermaid` `stateDiagram-v2` |
+| A number before and after | `::stats` or `:delta` |
+| A share of a whole | `:progress` |
+| Findings, options, or decisions compared across the same columns | Table of at most five columns, `:badge` for categories and verdicts |
+| Detail per item | `::accordion`, one item per row, the same parts inside every item |
+| What you left out | Bar chart of the largest, then `::accordion` grouped by reason |
+| How you checked | `> [!CAUTION]` for what you didn't verify, kept open; sources in `::details` |
+
+A table cell holds a value, a badge, or a few words. The reasoning behind a cell goes in that item's accordion. A column whose cells are all the same says one thing, so say it in the section's sentence and drop the column. Two charts that compare the same unit share one scale, so draw them as one chart, or fix the axis domain in both.
+
+[references/blocks.md](references/blocks.md) has the syntax for each, with the gotchas the renderer doesn't report. The `comark-ui` skill documents every block in full.
+
+Done when every section opens with its sentence and its picture, every number the answer rests on sits in a chart or a table column, and no table cell runs past a line or two at reading width.
+
+## 4. Assemble the page
+
+The two ends are fixed, and the middle holds the sections your material has, in the order the reader acts on them:
+
+```text
+Frontmatter    title = the answer in under 70 characters; status, date, tags
+The answer     two sentences, the decisions in > [!IMPORTANT], at most one > [!WARNING]
+Decisions      the decision table, only when there are more than three
+  middle       from step 3, such as: the picture the answer rests on, findings,
+               the order, blockers, before and after, each item, left out
+How I checked  > [!CAUTION] open, sources folded
+```
+
+Keep open what the reader decides on, and fold what they would only check: each decision and your recommendation stay open in the callout or the decision table, and the arguments behind them fold. When each item fits one table row, the table is the item list and needs no accordion. Past about a dozen items, the table is the list, and only the items that need reasoning get an accordion item. Lists stay one level deep; a second level becomes a table. Cards are for links to the next pages only.
+
+[references/example.md](references/example.md) is a full report in this shape: the answer and decision on top, a bubble chart, one order shown as a flowchart and a table, blockers sized by what they unlock, one accordion item per module with the same parts, the left-out chart with its groups, and the open "Not verified" callout.
+
+Done when the page follows this order and nothing the reader decides on is folded.
+
+## 5. Check the render
+
+1. Lint it, and fix until it reports no problems:
+
+   ```sh
+   vp dlx --package comark-linter --package comark-ui comark-lint report.md
+   ```
+
+   These commands use the [global Vite+ CLI](https://viteplus.dev/guide/global-cli). Without it, `pnpm dlx` takes the same arguments.
+
+2. Render it as [references/blocks.md](references/blocks.md#render-it-locally) shows, and read every screenshot, closed and open. Labels must not overlap, each chart must say what its sentence says, table cells must stay short, and diagram text must read at the size of the body text. A wide flowchart renders small: switch it to `TB`, shorten its labels, or split it past about ten nodes.
+3. Hand it over where the task says. When it goes to a host such as Drop, publish it as the host's skill describes and give the link.
+
+Done when lint reports no problems and you've read every screenshot of the render.

package/dist/skills/report/agents/openai.yaml

@@ -0,0 +1,3 @@
+interface:
+  display_name: "Report"
+  short_description: "Answer and decisions first, numbers in charts, detail folded"