rapier-markdown-kit 1.1.2 → 1.1.4

package/dist/spec/md-layout.mjs

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
-export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate']);
+// `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
+export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.
 export const wraps = new Set(['around', 'box', 'behind', 'front']);
@@ -20,6 +21,7 @@ export function validLayout(value) {
     (!has(value, 'x') || percent(value.x) && (has(value, 'wrap') || has(value, 'width'))) &&
     (!has(value, 'y') || typeof value.y === 'number' && Number.isFinite(value.y) && value.y >= -50 && has(value, 'wrap')) &&
     (!has(value, 'rotate') || oneDecimalDegrees(value.rotate)) &&
+    (!has(value, 'opacity') || Number.isInteger(value.opacity) && value.opacity >= 5 && value.opacity <= 100) &&
     !(has(value, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 
@@ -51,6 +53,9 @@ export function parseLayout(comment) {
       const magnitude = Number(number[2] + (number[3] ? '.' + number[3] : ''));
       if (number[1] && magnitude === 0) return null;
       value.rotate = number[1] ? -magnitude : magnitude;
+    } else if (key === 'opacity') {
+      if (!/^[1-9]\d{0,2}%$/.test(raw)) return null;
+      value.opacity = Number(raw.slice(0, -1));
     } else value[key] = raw;
   }
   return validLayout(value) ? value : null;
@@ -64,12 +69,18 @@ export function decodeLayoutAttribute(value) {
 
 export const parseLayoutAttribute = value => parseLayout(decodeLayoutAttribute(value));
 
+// The picture's own CSS: its normal-flow width and x, and its fade.
 export function imageStyle(value) {
-  if (!validLayout(value) || value.width == null) return '';
-  const width = value.width;
-  const left = value.x == null ? '' : ';display:block;margin-left:' +
-    decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
-  return 'width:' + decimal(width) + '%;height:auto' + left;
+  if (!validLayout(value)) return '';
+  const parts = [];
+  if (value.width != null) {
+    const width = value.width;
+    const left = value.x == null ? '' : ';display:block;margin-left:' +
+      decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
+    parts.push('width:' + decimal(width) + '%;height:auto' + left);
+  }
+  if (value.opacity != null && value.opacity < 100) parts.push('opacity:' + decimal(value.opacity / 100));
+  return parts.join(';');
 }
 
 // The one wrap-owner rule (layout/browser.js, layout/interchange.js, editor/share.js): prose after, else before, skipping pictures,
@@ -109,8 +120,9 @@ export function formatLayout(value) {
   if (!validLayout(value)) throw new TypeError('invalid_markdown_layout');
   const pairs = [];
   for (const key of fields) {
-    if (has(value, key) && !(key === 'y' && value.y === 0) && !(key === 'rotate' && value.rotate === 0)) pairs.push(key + '=' +
-      (key === 'width' || key === 'x' ? decimal(value[key]) + '%' : key === 'y' ? decimal(value.y) + 'em' :
+    if (has(value, key) && !(key === 'y' && value.y === 0) && !(key === 'rotate' && value.rotate === 0) &&
+      !(key === 'opacity' && value.opacity === 100)) pairs.push(key + '=' +
+      (key === 'width' || key === 'x' || key === 'opacity' ? decimal(value[key]) + '%' : key === 'y' ? decimal(value.y) + 'em' :
         key === 'rotate' ? decimal(value.rotate) + 'deg' : value[key]));
   }
   return pairs.length ? '<!--md-layout:v1 ' + pairs.join(' ') + '-->' : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Read, write and style Self-contained Markdown: the universal stylesheet, picture layout, text marks, picture appendix, line planner and Will/1 markers. MIT, no dependencies.",
   "author": "Jack Skipworth",
   "license": "MIT",

package/style.css

@@ -49,22 +49,22 @@
 	--md-color-dark:var(--md-color);
 	--md-highlight-color:var(--md-color-accent);
 	--md-image-width:100%;
+	--md-drawing-width:0px;
 	--md-task-box:clamp(14px,.92em,24px);
 	--md-jump-gap:.9rem;
 	--md-jump-marker-inline-start:-1.18rem;
 	--md-jump-marker-center:1em;
 	--md-diagram-ink:light-dark(#121212,#fafafa);
-	--md-diagram-box:light-dark(#f2f1ef,#1d1d1d);
-	--md-diagram-decision:light-dark(#d5eeea,#0e302c);
+	--md-diagram-box:light-dark(#f0f0f0,#1d1d1d);
 	--md-diagram-accent:light-dark(#12a594,#12a594);
 	--md-diagram-on-accent:light-dark(#000000,#000000);
-	--md-diagram-step:light-dark(#0e8a7c,#12a594);
+	--md-diagram-step:light-dark(#666666,#999999);
 	--md-diagram-stroke:2px;
 	--md-diagram-hairline:1px;
 	--md-diagram-caption-size:10px;
 	--md-diagram-caption-track:.12em;
 	--md-diagram-title-track:.16em;
-	--md-diagram-step-scale:2.5;
+	--md-diagram-step-scale:.8;
 	--md-diagram-node-fill:var(--md-diagram-box);
 	--md-diagram-inner-line:color-mix(in srgb,var(--md-color-text) 12%,var(--md-color-bg));
 	--md-diagram-node-line:color-mix(in srgb,var(--md-color-text) 20%,var(--md-color-bg));
@@ -170,16 +170,15 @@
 }
 /* Rapier's diagram look, one for a figure an agent lays out in Draw and for the drawing Mermaid makes from the
    author's source (Draw writes the same pairs into its SVG; _diagram-cells holds the two copies equal). Swiss
-   editorial after the mid-century magazines: a box is a flat field of one grey with no outline, the words the page's
-   own type in its ink; the one accent is meaning only -- the decision is its pale, the outcome (a round node, where a
-   flow ends) the accent itself under black words. It keeps the corner the source asked for: a stadium, a diamond and
+   editorial after the mid-century magazines: nearly monochrome, a box or a decision a flat field of one grey with no
+   outline, the words the page's own type in its ink; the one accent is spent sparingly, on meaning only -- the outcome
+   (a round node, where a flow ends) under black words. It keeps the corner the source asked for: a stadium, a diamond and
    a parallelogram are what the author wrote; the roundings Mermaid adds to a plain box, an actor, a note and a
    cluster are not, and Rapier's boxes are square. An author's own style or classDef fill and stroke stay above all
    of it (they are materialised inline, and an inline declaration outranks this sheet). */
 :where(.md-render) svg.rapier-diagram .node :is(rect,circle,ellipse,polygon,path){
 	fill:var(--md-diagram-box)!important;stroke:none!important;
 }
-:where(.md-render) svg.rapier-diagram .node polygon{fill:var(--md-diagram-decision)!important}
 :where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] .node:has(>circle) :is(circle,path){fill:var(--md-diagram-accent)!important}
 :where(.md-render) svg.rapier-diagram[aria-roledescription^="flowchart"] .node:has(>circle) :is(text,tspan){fill:var(--md-diagram-on-accent)!important}
 :where(.md-render) svg.rapier-diagram g.classGroup rect,:where(.md-render) svg.rapier-diagram .actor,:where(.md-render) svg.rapier-diagram .labelBox,:where(.md-render) svg.rapier-diagram .activation0,:where(.md-render) svg.rapier-diagram .activation1,:where(.md-render) svg.rapier-diagram .activation2{
@@ -191,8 +190,8 @@
 :where(.md-render) svg.rapier-diagram :is(.cluster-label,.cluster .label) :is(text,tspan){
 	font-family:var(--md-font-mono)!important;font-size:var(--md-diagram-caption-size)!important;text-transform:uppercase;letter-spacing:var(--md-diagram-title-track)!important;
 }
-:where(.md-render) svg.rapier-diagram .nodeLabel,:where(.md-render) svg.rapier-diagram .classTitle,:where(.md-render) svg.rapier-diagram text.actor>tspan{font-weight:var(--md-fw-medium)!important}
-:where(.md-render) svg.rapier-diagram .node :is(text,tspan){font-weight:var(--md-fw-regular)!important}
+:where(.md-render) svg.rapier-diagram .classTitle,:where(.md-render) svg.rapier-diagram text.actor>tspan{font-weight:var(--md-fw-medium)!important}
+:where(.md-render) svg.rapier-diagram :is(.nodeLabel,.node text,.node tspan){font-weight:var(--md-fw-semibold)!important}
 :where(.md-render) svg.rapier-diagram rect.basic,:where(.md-render) svg.rapier-diagram rect.title-state,:where(.md-render) svg.rapier-diagram rect.outer,:where(.md-render) svg.rapier-diagram .actor,:where(.md-render) svg.rapier-diagram .note,:where(.md-render) svg.rapier-diagram .labelBox,:where(.md-render) svg.rapier-diagram .cluster rect,:where(.md-render) svg.rapier-diagram .statediagram-cluster rect{rx:0!important;ry:0!important}
 /* The line between two boxes is mid-ladder and one hairline weight everywhere: it is the road,
    not the destination. A lifeline and a divider are neither -- they are a box's own rule down
@@ -332,10 +331,12 @@
 :where(.md-render) svg.rapier-diagram .grid path{stroke:none!important}
 :where(.md-render) svg.rapier-diagram .grid .tick text{fill:var(--md-diagram-quiet)!important;font-size:var(--md-text-xs)!important}
 :where(.md-render) svg.rapier-diagram .today{stroke:var(--md-diagram-c6)!important}
-/* Paper cannot be scrolled sideways, so on paper a diagram goes back to fitting the page. */
+/* Paper cannot be scrolled sideways, so on paper a diagram, and a wide drawing, go back to fitting the page. */
 @media print{
 	:where(.md-render) .diagram-block{overflow:visible!important}
 	:where(.md-render) svg.rapier-diagram{width:auto!important;max-width:100%!important}
+	.md-render img[data-md-drawing]{min-width:0!important}
+	.md-render :has(>img[data-md-drawing],>a>img[data-md-drawing]){overflow:visible!important}
 }
 :where(.md-render) .diagram-reason {
 	margin: .4em 0 0;
@@ -704,6 +705,12 @@
 	vertical-align:middle;
 }
 .md-render img[data-rapier-image-size]{width:min(var(--md-image-width),100%);height:auto}
+/* A drawing (an SVG picture, as every Draw drawing is) shown at its own size carries that size, and shrinks to the column only
+   while its words stay legible: at 12/14 of it, Draw's default words (14 px) are 12 px, the smallest text a phone reads
+   (measured on a 390 px phone, the lane drawing-dark-wide). There it stops, and its block scrolls sideways, as a wide diagram
+   does; a drawing that fits, or shrinks less than that, is drawn as it always was. */
+.md-render img[data-md-drawing]{min-width:calc(var(--md-drawing-width) * 12 / 14)}
+.md-render :has(>img[data-md-drawing],>a>img[data-md-drawing]){overflow-x:auto}
 .md-render img:is([data-rapier-asset],[data-rapier-image-url]):not([data-rapier-asset-state="ready"]){background:color-mix(in srgb,var(--md-color-text) 5%,transparent)}
 
 .md-render dl{margin:0 0 var(--md-space-4)}