comark-ui 0.9.0 → 0.10.0

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 { 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-CNYr62nX.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 { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.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 { 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. */
@@ -107,6 +108,7 @@ var html_default = (options) => preset({
 	table,
 	tabs,
 	tests,
+	time,
 	typeset,
 	zoom
 }, options);

package/dist/{index-Cq3zytGw.d.mts → index-CNYr62nX.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 & {
@@ -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-CNYr62nX.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 { 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-BOtdXbMg.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-CNYr62nX.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 { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.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 { 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({
@@ -90,6 +91,7 @@ var react_default = (options) => preset({
 	table,
 	tabs,
 	tests,
+	time,
 	typeset,
 	zoom
 }, options);

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

@@ -1,6 +1,6 @@
 ---
 name: before-after-evidence
-description: Shows a visible change as two comparable screenshots, before and after, with marks measured from the source and checked in the rendered page. Use when a pull request, bug fix, or design change alters what people see, or when someone asks for before/after screenshots or visual evidence.
+description: Shows a visible change as two comparable screenshots, before and after, with marks measured from the source and checked in the rendered page, and a change in motion as a short recording. Use when a pull request, bug fix, or design change alters what people see or how it moves, or when someone asks for before/after screenshots, a recording, or visual evidence.
 license: MIT
 ---
 
@@ -10,9 +10,16 @@ A before/after is evidence when a reviewer can check every claim against the two
 
 This skill writes the document. Your host decides where it's published and who can open it.
 
+## When the change is motion
+
+An animation, a transition, a loading sequence, or feedback while dragging happens between frames, so record it. A still taken partway through a motion looks like a broken layout, and two of them can't show that anything moves. Follow [references/recording.md](references/recording.md) in place of steps 1 and 2, then write and check the document with steps 3 and 4, with the clip where the `::compare` goes.
+
+- When the old behavior jumped straight to its end state, the after clip alone is the evidence, and the document's first sentence says what happened before.
+- When the change retimes motion that already existed, such as its easing, its duration, or a stutter, record both sides with the same script.
+
 ## 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.
@@ -65,6 +72,7 @@ Image `src` must be a URL the renderer can reach: a path next to the document, o
    ```
 
    Without Vite+, use `pnpm exec` with the same arguments. Open `evidence-screenshots.html` and take a screenshot of it. This CLI renders annotate, carousel, and zoom only; check any `::diff` or other blocks in the host's full Comark UI preview.
-3. Check that each mark sits on its target and each note matches what its side shows. Measure a mark that misses again from the source; a box moved by eye stays a guess.
+
+3. Check that each mark sits on its target and each note matches what its side shows. A clip should start by itself and loop in the page. Measure a mark that misses again from the source; a box moved by eye stays a guess.
 
 Done when you've looked at the rendered page and every mark lands. Name any mark or block you couldn't check in your report.

package/dist/skills/before-after-evidence/agents/openai.yaml

@@ -1,3 +1,3 @@
 interface:
   display_name: "Before/after evidence"
-  short_description: "Show a visible change with comparable, measured screenshots"
+  short_description: "Show a visible change with measured screenshots, or motion with a clip"

package/dist/skills/before-after-evidence/references/recording.md

@@ -0,0 +1,130 @@
+# Recording motion
+
+A clip is evidence when the reviewer sees the motion at its real speed, starting and ending at rest, with nothing else on screen changing.
+
+## 1. Script the interaction
+
+Drive the page with a script, such as Playwright, so a retake repeats the same steps at the same pace.
+
+- Size the viewport to the component, the way you'd clip a still. The viewport is the frame.
+- Rest about 0.7 s before each action and longer than the animation after it, about 1.3 s, so every motion starts and ends on a still frame.
+- Show the motion two or three times, such as three tab switches, and keep the clip to a few seconds.
+- Draw a pointer. A headless browser draws none, and without one the reader sees things change with nothing pressing them. Move the mouse to its target in steps, not in one jump.
+
+## 2. Capture the frames
+
+Chrome's screencast sends a lossless PNG each time the page paints. Playwright's `recordVideo` is simpler, but it starts recording during page load and its VP8 encoding blurs small text.
+
+Both capture CSS pixels, whatever `deviceScaleFactor` says. For sharp text, lay the page out at double size: double the viewport, the root `font-size`, and any font sizes set in `px`. Keep CSS `zoom` and `transform` off the page. Motion code often measures boxes with `getBoundingClientRect`, and under either one it draws its moving parts in the wrong place. On a tab transition recorded with `zoom: 2`, the leaving tokens appeared below the code block.
+
+Save this as `record.mjs` in a workspace with `@playwright/test` and its Chromium browser installed, with ffmpeg on `PATH`. Adjust the viewport and tab names for the page, then run `node record.mjs <url>` with the page's URL.
+
+```js
+import { chromium } from "@playwright/test";
+import { execFileSync } from "node:child_process";
+import { mkdirSync, writeFileSync } from "node:fs";
+
+const url = process.argv[2];
+if (!url) throw new Error("Usage: node record.mjs <url>");
+
+const width = 1456,
+  height = 340,
+  dir = "clip"; // twice the component's CSS size
+mkdirSync(dir, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width, height } });
+await page.goto(url);
+await page.addStyleTag({ content: "html{font-size:32px}" }); // plus any px fonts, doubled
+
+// An arrow whose tip follows the mouse, so it leaves the label it points at readable.
+const arrow = encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20"><path d="M1 1v16l4-4 3 6 2-1-3-6h6z" fill="#111" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/></svg>',
+);
+await page.addStyleTag({
+  content: `#pointer{position:fixed;left:0;top:0;z-index:9;width:28px;height:40px;background:url("data:image/svg+xml,${arrow}");pointer-events:none}`,
+});
+await page.evaluate(() => {
+  const tip = document.body.appendChild(
+    Object.assign(document.createElement("div"), { id: "pointer" }),
+  );
+  addEventListener("mousemove", (e) => (tip.style.translate = `${e.clientX}px ${e.clientY}px`));
+});
+
+const cdp = await page.context().newCDPSession(page);
+const frames = [];
+cdp.on("Page.screencastFrame", ({ data, metadata, sessionId }) => {
+  frames.push({ data, at: metadata.timestamp });
+  cdp.send("Page.screencastFrameAck", { sessionId }).catch(() => {});
+});
+await cdp.send("Page.startScreencast", { format: "png", maxWidth: width, maxHeight: height });
+await page.mouse.move(width - 80, height - 60); // paints the first frame
+await page.waitForTimeout(700);
+for (const name of ["Second", "Third", "First"]) {
+  const box = await page.getByRole("tab", { name }).boundingBox();
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 14 });
+  await page.waitForTimeout(150); // lets the reader see where it presses
+  await page.mouse.down();
+  await page.mouse.up();
+  await page.waitForTimeout(1300);
+}
+const end = Date.now() / 1000;
+await cdp.send("Page.stopScreencast");
+await browser.close();
+
+// A frame arrives only when the page paints, so each one holds until the next.
+let list = "";
+frames.forEach((frame, i) => {
+  writeFileSync(`${dir}/${i}.png`, Buffer.from(frame.data, "base64"));
+  list += `file '${i}.png'\nduration ${((frames[i + 1]?.at ?? end) - frame.at).toFixed(4)}\n`;
+});
+writeFileSync(`${dir}/frames.txt`, `${list}file '${frames.length - 1}.png'\n`);
+execFileSync("ffmpeg", [
+  "-y",
+  "-f",
+  "concat",
+  "-i",
+  `${dir}/frames.txt`,
+  "-vf",
+  "fps=30,format=yuv420p",
+  "-c:v",
+  "libx264",
+  "-crf",
+  "18",
+  "-movflags",
+  "+faststart",
+  "-an",
+  `${dir}/clip.mp4`,
+]);
+```
+
+The mp4 is H.264, so every browser plays it. A few seconds at this size come to a few hundred KB.
+
+## 3. Look at the clip
+
+Pull frames from the middle of a motion and from a rest, and look at them:
+
+```sh
+for t in 0.5 1.1 1.25 1.4; do ffmpeg -y -loglevel error -ss $t -i clip/clip.mp4 -frames:v 1 clip/at-$t.png; done
+```
+
+A frame from the middle of a motion shows what reviewers can't see in a still: parts in between their two places, fading, or drawn where they don't belong.
+
+Done when a frame from the middle of each motion shows the motion your document describes, and the clip starts and ends at rest.
+
+## 4. Write the document
+
+Keep the shape of a before/after document, with the clip in place of the compare:
+
+```md
+Code groups with `magic` now slide the tokens their snippets share into place when you switch tabs. Before, the code swapped all at once.
+
+Open a `::code-group{magic}` and select **tinyjson5**, then **tinyini**.
+
+![Each tab switch slides import and from into place while the package names fade between them](magic-tabs.mp4){width=1456 height=340 autoplay loop muted}
+```
+
+- The first sentence says what moved before, so the after clip alone carries the comparison.
+- The alt text says what moves, for a reader whose browser can't play the file.
+- `autoplay loop muted` plays the clip like an animated screenshot. Browsers autoplay only muted video.
+- `width` and `height` are the clip's pixels, so the page keeps its room before the file loads. `ffprobe -v error -show_entries stream=width,height -of csv=p=0 clip.mp4` prints them.
+- When the change retimes motion that already existed, put the before clip first, recorded with the same script, and title each with a line above it.

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";
@@ -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/tabs.md

@@ -29,6 +29,7 @@ Press **Ctrl+K** to find the pigeon data.
 - `::tabs`: each `:::tabs-item` inside is one tab. Content outside every tab doesn't render, and is reported.
 - `:::tabs-item`: `label` is required and must differ from the other labels in its block, since `sync` matches tabs by label. `icon` draws an Iconify name, such as `lucide:apple`, or an image URL before the label.
 - `::code-group`: only code blocks go inside. Name each one's tab in brackets after its language, as in `sh [pnpm]`, with an optional icon after it, as in `sh [pnpm] icon=logos:pnpm`. The tab replaces the block's own title. `title="pnpm"` names no tab, so a block without brackets is reported.
+- A code group animates a switch between two snippets that share at least half their tokens, and swaps unlike ones at once. `magic` on `::code-group` forces the animation on, and `magic="false"` turns it off. Leave it out unless the default is wrong for that group.
 - `sync`, on either block, is a key shared by blocks that switch together. Picking a tab picks the tab with the same label in every block with that key, and the next page that uses the key remembers it.
 - A code block marked `pm`, as in `sh pm`, holds package manager commands in any manager (npm, npx, pnpm, pnpx, yarn, bun, bunx, or deno) and becomes a code group with a tab each for npm, pnpm, yarn, and bun, synced as `pm`. The manager it's written in keeps its commands as written. It reads install, frozen install (`npm ci`), add with `-D`, `-E`, `-O`, `--save-peer`, or `-g`, remove, run, `npx`/`dlx`, create, and init. An update or a `pnpm exec` stays only in its own manager's tab, and the others are left out and reported. Only commands at the start of a line or after `&&`, `||`, or `;` change. Inside a `::code-group`, `pm` does nothing.
 

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.