comark-ui 0.10.0 → 0.10.1

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.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/html.d.mts

@@ -1,4 +1,4 @@
-import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-CNYr62nX.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,5 +1,5 @@
 import { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.mjs";
-import { t as typesetCss } from "./typeset-css-BOtdXbMg.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";
@@ -67,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>`;

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

@@ -63,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;

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-CNYr62nX.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-C3nMECXA.mjs";
-import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.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-CNYr62nX.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,5 +1,5 @@
 import { n as criticCss, r as preset, t as commentsCss } from "./src-C3nMECXA.mjs";
-import { t as typesetCss } from "./typeset-css-BOtdXbMg.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";
@@ -44,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",

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

@@ -53,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
 

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"

package/dist/skills/report/references/blocks.md

@@ -0,0 +1,199 @@
+# Blocks for a report
+
+Each block below renders with the full `comark-ui` preset. The `comark-ui` skill documents every block in full; read its reference for a block before you change more than the values here.
+
+## The answer: callouts
+
+```md
+> [!IMPORTANT]
+> **Your calls:**
+>
+> 1. Hold `@nuxtjs/i18n` until #3564 has URL routing?
+> 2. Ship the Env and Resend codemods before Auth's SSR gap closes?
+
+> [!WARNING]
+> Every row needs Nuxt 5, and the codemods don't upgrade Nuxt.
+```
+
+Frontmatter `status`, `date`, and `tags` render as a properties box at the top with no extra markup.
+
+## Bubble chart: two scores and a size
+
+````md
+::chart{title="Shortlist: value and difficulty (1 to 5), bubble size = npm downloads a week"}
+| module | difficulty | value | downloads |
+| --- | --: | --: | --: |
+| nuxt-auth-utils | 4 | 5 | 177926 |
+| Resend | 2 | 4 | 1251 |
+| t3-env | 2 | 3 | 6072 |
+| nuxt-cron | 2 | 3 | 3123 |
+
+```vega-lite
+{
+  "width": 620,
+  "height": 320,
+  "encoding": {
+    "x": { "field": "difficulty", "type": "quantitative", "scale": { "domain": [1.5, 5] }, "title": "Difficulty (5 = hardest)" },
+    "y": { "field": "value", "type": "quantitative", "scale": { "domain": [2.5, 5.5] }, "title": "Value (5 = most)" }
+  },
+  "layer": [
+    {
+      "mark": { "type": "circle", "opacity": 0.55 },
+      "encoding": { "size": { "field": "downloads", "type": "quantitative", "scale": { "range": [80, 3000] }, "legend": null } }
+    },
+    {
+      "transform": [{ "filter": "indexof(['Resend', 't3-env', 'nuxt-cron'], datum.module) < 0" }],
+      "mark": { "type": "text", "dy": -26, "fontSize": 12 },
+      "encoding": { "text": { "field": "module" } }
+    },
+    {
+      "transform": [{ "filter": "indexof(['Resend', 't3-env'], datum.module) >= 0" }],
+      "mark": { "type": "text", "align": "right", "dx": -12, "fontSize": 12 },
+      "encoding": { "text": { "field": "module" } }
+    },
+    {
+      "transform": [{ "filter": "datum.module === 'nuxt-cron'" }],
+      "mark": { "type": "text", "dy": 16, "fontSize": 12 },
+      "encoding": { "text": { "field": "module" } }
+    }
+  ]
+}
+```
+::
+````
+
+- With a `vega-lite` spec, `::chart` takes only `title`; `type`, `x`, and `y` are lint errors. Name the columns in `encoding`.
+- Set `width` in pixels. `"container"` renders about 230px wide.
+- Labels overlap when two points share a spot or sit close. Give each label layer a `filter` and move those points' labels left (`align: right`, `dx: -12`) or below (`dy: 16`). Look at the render; the lint can't see overlap.
+- Write a range such as 4–5 as its middle, 4.5, and say so in the item's detail.
+
+## Bar chart: sizes, with one mark
+
+```md
+::chart{type="bar" horizontal labels title="Left out: npm downloads a week (10k and up)"}
+| module | downloads |
+| --- | --: |
+| @nuxtjs/i18n | 977490 |
+| nuxt-csurf | 223523 |
+:::annotation{at="@nuxtjs/i18n" mark="box" color="amber" side="right"}
+Your call: hold until #3564 has URL routing.
+:::
+::
+```
+
+Rows draw in table order, so sort them largest first. Mark the bar a decision is about, at most one; a chart no decision points at gets no mark.
+
+For sizes that split into parts, use `type="stacked"`, one column per part:
+
+```md
+::chart{type="stacked" horizontal title="Description characters per skill"}
+| skill | sentence | trigger list |
+| --- | --: | --: |
+| emil-mobile-native | 760 | 551 |
+| emil-prep-for-prod | 865 | 386 |
+::
+```
+
+Each chart scales its own axis. When two charts compare the same unit, put the rows in one chart, or write both in `vega-lite` with the same `"scale": { "domain": [0, 1400] }` on the value axis, so equal values draw equal bars.
+
+## Order and blockers: a flowchart
+
+````md
+```mermaid
+flowchart LR
+  shell["1 · Wizard shell + Env"]
+  shell --> resend["2 · Resend"]
+  shell --> auth["3 · Auth"]
+  ssr{{"SSR session + page middleware"}} --> auth
+  upstash{{"Upstash driver"}} -.-> rl["5 · Rate limit"]
+```
+````
+
+Use `LR` for up to about five steps side by side and `TB` for a longer chain or long labels; the diagram scales down to fit the page width, so a wide one renders small. Boxes are steps, numbered in the order the reader acts. Hexagons are work that has to land first; a dashed arrow means it should land first but doesn't have to. Say both in the sentence above the diagram.
+
+## The decision table: past three decisions
+
+```md
+| # | Decision | Opus | Sol | Recommend |
+| --- | --- | --- | --- | --- |
+| D1 | Import family for apps | `vite-hub/*` | `@vite-hub/*` | :badge[vite-hub/*]{color="success"} |
+| D2 | Sandbox Task option key | `sandboxTask` | `sandbox.tasks` | :badge[sandboxTask]{color="success"} |
+```
+
+Each cell is the position, not the argument. The arguments go in the decision's accordion item, labeled with its number.
+
+## The table: at most five columns
+
+```md
+| Step | Module → primitive | npm/week | Fit |
+| --- | --- | --: | --- |
+| 1 | `@t3-oss/env-nuxt` → Env | 6,072 | :badge[High]{color="success"} |
+| 3 | `nuxt-auth-utils` → Auth | 177,926 | :badge[Partial]{color="warning"} |
+```
+
+Badge colors: `success` good, `warning` partial or at risk, `error` blocked, `neutral` unknown. Scores that are already in a chart stay out of the table. A cell holds a value, a badge, or a few words; a column of sentences turns the table into a wall of text, so move it into the accordion.
+
+Write file names and domains in backticks, such as `AGENTS.md` and `devtools.fm`. Bare, they render as link chips with an icon.
+
+## Each item: an accordion
+
+````md
+::accordion
+:::accordion-item{label="2 · Resend → Email"}
+| Resend | ViteHub Email |
+| --- | --- |
+| `new Resend(key).emails.send(msg)` | `email.send(msg)` |
+
+- **Manual:** batch, contacts, audiences, broadcasts.
+- **First:** nothing.
+- **Gain:** a dev outbox and Console preview.
+:::
+::
+````
+
+Every item has the same parts in the same order, with bold labels, a line or two each. A part that needs more becomes a table inside the item. The label starts with the item's step number from the table. Icons come from `lucide:`; pick one per kind of item.
+
+## Before and after: stats and delta
+
+```md
+::stats{better="lower"}
+| Measure | Before | After |
+| --- | --: | --: |
+| Description characters loaded | 23,515 | 10,981 |
+| Model-invoked skills | 49 | 41 |
+::
+
+Trimming the lists saves :delta{from=23515 to=10981 unit="chars" better="lower"} every session.
+```
+
+`::stats` holds one table of exactly three columns: a name, before, after. Each cell is a number with an optional unit, the same unit in both cells, and the block adds the percent itself. A value with a qualifier, such as "about 65" or "6 of 11", belongs in a plain table, or keeps its number in the cell and moves the qualifier into the row's name. `better` applies to every row, so rows that are better higher go in a second block.
+
+## A share: progress
+
+```md
+:progress{value=293 max=785 label="nuxt-security configs that mention rateLimiter"}
+```
+
+## How I checked
+
+````md
+> [!CAUTION]
+> **Not verified:** any source module on Nuxt 5; the Docus count (one npm call).
+
+::details{summary="Sources and method"}
+- **Downloads:** `api.npmjs.org/downloads/point/last-week`, 2026-10-30 to 2026-11-05.
+::
+````
+
+## Render it locally
+
+A host renders the report only after you publish it, and a private page may need the user's sign-in, so check the render before you hand it over. Copy this skill's [scripts/render.mjs](../scripts/render.mjs) next to the report, then:
+
+```sh
+mkdir -p tmp/report-render && cd tmp/report-render
+echo '{ "private": true, "type": "module" }' > package.json
+pnpm add --ignore-workspace comark @comark/html comark-ui playwright
+node ../../render.mjs ../../report.md out
+```
+
+Without its own `package.json`, pnpm walks up to the repository's and can fail on its catalog. The script writes `out/report.html` and screenshots at 900px wide, 1600px tall each: `report-closed-*.png` as the reader first sees it, and `report-open-*.png` with every fold open. When Playwright has no browser downloaded, it uses the newest Chromium in `~/.cache/ms-playwright`.