comark-ui 0.7.1 → 0.7.4

package/dist/{src-DROB05U6.mjs → src-PkmYCSNu.mjs}

@@ -106,6 +106,7 @@ function preset(renderer, options = {}) {
 		...optionsOf(options.code)
 	});
 	add(renderer.codeNotes, options.codeNotes);
+	add(renderer.comments, options.comments);
 	if (on(options.typeset)) {
 		plugins.push(typeset());
 		components[TYPESET_TAG] = renderer.typeset;

package/dist/svelte/Mermaid.svelte

@@ -0,0 +1,16 @@
+<!-- Pele's card in `.cmm` with the bar of buttons, as `comark-ui/html` draws it. In the browser Pele's own `mount()`
+     zooms the diagram in place, so it doesn't zoom with comark-zoom. -->
+<script>
+  import { onMount } from "svelte";
+  import { createPeleComponent } from "comark-pele/svelte";
+  import { addMermaidStyles, mermaidBar, startMermaid } from "comark-ui/client";
+
+  const Pele = createPeleComponent({ onRender: addMermaidStyles, onError: addMermaidStyles });
+  let { content = "", ...rest } = $props();
+  onMount(() => startMermaid());
+</script>
+
+<div class="cmm" data-source={content}>
+  <Pele {content} {...rest} />
+  <div class="cmm-bar">{@html mermaidBar()}</div>
+</div>

package/dist/svelte/index.d.ts

@@ -4,6 +4,6 @@ import type { Preset, PresetOptions } from "comark-ui";
 export { criticCss } from "comark-ui";
 export type { PresetOptions } from "comark-ui";
 
-/** Every plugin with components for `@comark/svelte`, which leaves out annotate, diff, and quiz. */
+/** Every plugin with components for `@comark/svelte`, which leaves out annotate, comments, diff, and quiz. */
 declare const comarkUi: (options?: PresetOptions) => Preset<Component>;
 export default comarkUi;

package/dist/svelte/index.js

@@ -1,6 +1,5 @@
-// Every plugin with components for `@comark/svelte`, which leaves out annotate, diff, and quiz.
+// Every plugin with components for `@comark/svelte`, which leaves out annotate, comments, diff, and quiz.
 import { preset } from "comark-ui";
-import { addMermaidStyles } from "comark-ui/client";
 import * as badge from "comark-badge/svelte";
 import * as cards from "comark-cards/svelte";
 import * as carousel from "comark-carousel/svelte";
@@ -22,7 +21,7 @@ import * as magicMove from "comark-magic-move/svelte";
 import * as mark from "comark-mark/svelte";
 import * as math from "comark-mathml/svelte";
 import * as media from "comark-media/svelte";
-import pele, { createPeleComponent } from "comark-pele/svelte";
+import pele from "comark-pele/svelte";
 import * as metrics from "comark-metrics/svelte";
 import * as outline from "comark-outline/svelte";
 import * as properties from "comark-properties/svelte";
@@ -33,15 +32,12 @@ import * as table from "comark-table/svelte";
 import * as tabs from "comark-tabs/svelte";
 import * as tests from "comark-tests/svelte";
 import * as zoom from "comark-zoom/svelte";
+import Mermaid from "./Mermaid.svelte";
 import typeset from "./Typeset.svelte";
 
 export { criticCss } from "comark-ui";
 
-// Pele calls `onRender` only in the browser, after it draws, so the styles arrive like the other components' do.
-const mermaid = {
-  default: pele,
-  components: { pele: createPeleComponent({ onRender: addMermaidStyles }) },
-};
+const mermaid = { default: pele, components: { pele: Mermaid } };
 
 export default (options) =>
   preset(

package/dist/{typeset-css-DPB0S1bV.mjs → typeset-css-5aJ7cSmh.mjs}

@@ -181,6 +181,20 @@ const rules = `
   .shiki:not(:where(.light *)) span[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
 }
 
+/* A block marked data-wide, such as a before/after comparison or a diagram wider than the text, grows past the column
+   into the room the page gives it on each side, --comark-wide-start and --comark-wide-end, up to its own width
+   (--comark-wide-width) and --comark-wide-max. It stays centered on the column while both sides have room, and moves
+   toward the side that has more when one doesn't. Without room set, it keeps to the column. Only the document's own
+   blocks grow, not one inside a list or tabs. */
+:scope > [data-wide] {
+  /* Room a page works out from the window can come out negative on a phone, where the column fills it: none, then. */
+  --_ty-start: max(0px, var(--comark-wide-start, 0px));
+  --_ty-end: max(0px, var(--comark-wide-end, 0px));
+  --_ty-wide: max(100%, min(var(--comark-wide-width, 100vw), var(--comark-wide-max, 72rem), 100% + var(--_ty-start) + var(--_ty-end)));
+  width: var(--_ty-wide);
+  margin-inline: clamp(-1 * var(--_ty-start), (100% - var(--_ty-wide)) / 2, 100% + var(--_ty-end) - var(--_ty-wide)) 0;
+}
+
 /* The first child adds no space above. Last, so it wins ties. */
 :scope > :where(:first-child):not(${own}),
 :scope > :where(:first-child) > :where(:first-child):not(${own}),

package/dist/vue.d.mts

@@ -1,7 +1,7 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-B0YvApci.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-BUDHsvnm.mjs";
 import { Component } from "vue";
 //#region src/vue.d.ts
-/** Every plugin with components for `@comark/vue`, which leaves out annotate, diff, and quiz. */
+/** Every plugin with components for `@comark/vue`, which leaves out annotate, comments, diff, and quiz. */
 declare const _default: (options?: PresetOptions) => Preset<Component>;
 //#endregion
 export { type PresetOptions, criticCss, _default as default };

package/dist/vue.mjs

@@ -1,7 +1,7 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
-import { n as preset, t as criticCss } from "./src-DROB05U6.mjs";
-import { addMermaidStyles } from "./client.mjs";
-import { defineComponent, h } from "vue";
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
+import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
+import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+import { defineComponent, h, onBeforeUnmount, onMounted } from "vue";
 import * as badge from "comark-badge/vue";
 import * as cards from "comark-cards/vue";
 import * as carousel from "comark-carousel/vue";
@@ -35,9 +35,36 @@ import * as tabs from "comark-tabs/vue";
 import * as tests from "comark-tests/vue";
 import * as zoom from "comark-zoom/vue";
 //#region src/vue.ts
+const Pele = createPeleComponent({
+	onRender: addMermaidStyles,
+	onError: addMermaidStyles
+});
+const Mermaid = defineComponent({
+	name: "ComarkMermaid",
+	inheritAttrs: false,
+	props: { content: {
+		type: String,
+		default: ""
+	} },
+	setup(props, { attrs }) {
+		let stop = () => {};
+		onMounted(() => stop = startMermaid());
+		onBeforeUnmount(() => stop());
+		return () => h("div", {
+			class: "cmm",
+			"data-source": props.content
+		}, [h(Pele, {
+			...attrs,
+			content: props.content
+		}), h("div", {
+			class: "cmm-bar",
+			innerHTML: mermaidBar()
+		})]);
+	}
+});
 const mermaid = {
 	default: pele,
-	components: { pele: createPeleComponent({ onRender: addMermaidStyles }) }
+	components: { pele: Mermaid }
 };
 const typeset = defineComponent({
 	name: "ComarkTypeset",
@@ -46,7 +73,7 @@ const typeset = defineComponent({
 		innerHTML: typesetCss
 	})
 });
-/** Every plugin with components for `@comark/vue`, which leaves out annotate, diff, and quiz. */
+/** Every plugin with components for `@comark/vue`, which leaves out annotate, comments, diff, and quiz. */
 var vue_default = (options) => preset({
 	badge,
 	cards,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-ui",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "Every comark-ui block in one install: annotated screenshots, charts, diffs, tabs, zoom, and more, registered in the order they need with shared icons. Turn any of them off or pass its options.",
   "keywords": [
     "comark",
@@ -39,6 +39,7 @@
     },
     "./vue": "./dist/vue.mjs",
     "./package.json": "./package.json",
+    "./skills": "./dist/skills.mjs",
     "./skills/*": "./dist/skills/*"
   },
   "publishConfig": {
@@ -47,49 +48,50 @@
   },
   "dependencies": {
     "comark-pele": "^1.1.0",
-    "comark-badge": "^0.7.1",
-    "comark-annotate": "^0.7.1",
-    "comark-cards": "^0.7.1",
-    "comark-carousel": "^0.7.1",
-    "comark-cast": "^0.7.1",
-    "comark-charts": "^0.7.1",
-    "comark-chips": "^0.7.1",
-    "comark-cjk": "^0.7.1",
-    "comark-code": "^0.7.1",
-    "comark-code-notes": "^0.7.1",
-    "comark-colors": "^0.7.1",
-    "comark-critic": "^0.7.1",
-    "comark-deflist": "^0.7.1",
-    "comark-details": "^0.7.1",
-    "comark-diff": "^0.7.1",
-    "comark-diagrams": "^0.7.1",
-    "comark-fields": "^0.7.1",
-    "comark-figure": "^0.7.1",
-    "comark-file-tree": "^0.7.1",
-    "comark-footnotes": "^0.7.1",
-    "comark-embed": "^0.7.1",
-    "comark-icon": "^0.7.1",
-    "comark-include": "^0.7.1",
-    "comark-keys": "^0.7.1",
-    "comark-links": "^0.7.1",
-    "comark-mark": "^0.7.1",
-    "comark-magic-move": "^0.7.1",
-    "comark-github": "^0.7.1",
-    "comark-mathml": "^0.7.1",
-    "comark-media": "^0.7.1",
-    "comark-metrics": "^0.7.1",
-    "comark-qr": "^0.7.1",
-    "comark-properties": "^0.7.1",
-    "comark-outline": "^0.7.1",
-    "comark-quiz": "^0.7.1",
-    "comark-sources": "^0.7.1",
-    "comark-reading-time": "^0.7.1",
-    "comark-table": "^0.7.1",
-    "comark-steps": "^0.7.1",
-    "comark-tabs": "^0.7.1",
-    "comark-tests": "^0.7.1",
-    "comark-xref": "^0.7.1",
-    "comark-zoom": "^0.7.1"
+    "comark-annotate": "^0.7.4",
+    "comark-cards": "^0.7.4",
+    "comark-carousel": "^0.7.4",
+    "comark-badge": "^0.7.4",
+    "comark-cast": "^0.7.4",
+    "comark-charts": "^0.7.4",
+    "comark-chips": "^0.7.4",
+    "comark-cjk": "^0.7.4",
+    "comark-code": "^0.7.4",
+    "comark-colors": "^0.7.4",
+    "comark-code-notes": "^0.7.4",
+    "comark-deflist": "^0.7.4",
+    "comark-critic": "^0.7.4",
+    "comark-details": "^0.7.4",
+    "comark-comments": "^0.7.4",
+    "comark-diagrams": "^0.7.4",
+    "comark-embed": "^0.7.4",
+    "comark-fields": "^0.7.4",
+    "comark-figure": "^0.7.4",
+    "comark-diff": "^0.7.4",
+    "comark-file-tree": "^0.7.4",
+    "comark-footnotes": "^0.7.4",
+    "comark-github": "^0.7.4",
+    "comark-keys": "^0.7.4",
+    "comark-include": "^0.7.4",
+    "comark-icon": "^0.7.4",
+    "comark-mathml": "^0.7.4",
+    "comark-mark": "^0.7.4",
+    "comark-magic-move": "^0.7.4",
+    "comark-links": "^0.7.4",
+    "comark-media": "^0.7.4",
+    "comark-metrics": "^0.7.4",
+    "comark-outline": "^0.7.4",
+    "comark-properties": "^0.7.4",
+    "comark-sources": "^0.7.4",
+    "comark-quiz": "^0.7.4",
+    "comark-qr": "^0.7.4",
+    "comark-table": "^0.7.4",
+    "comark-steps": "^0.7.4",
+    "comark-reading-time": "^0.7.4",
+    "comark-tabs": "^0.7.4",
+    "comark-xref": "^0.7.4",
+    "comark-tests": "^0.7.4",
+    "comark-zoom": "^0.7.4"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",