@formicoidea/labre-framework-cynefin 0.53.0 → 0.55.0

package/dist/cynefin/element-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
+import { ElementRendererExtension, notationColor, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
 import { TranslationProvider, translateKey, } from '@formicoidea/labre-core/shared/services';
 import { FONT_FAMILY, refScale } from '../utils.js';
 import { COLORS, DARK_BACK_PATHS, DARK_FRONT_PATHS, DASH_RECTS, DOMAINS, HATCHES, HEADING_SIZE, MARKERS, REF_H, REF_W, SMALL_LABELS, TEAL_LABELS, TEAL_PATH, TEAL_WIDTH, } from './consts.js';
@@ -28,6 +28,9 @@ import { cynefinHeadingText } from './labels.js';
  * to split it would be inventing typography the translator never asked for.
  */
 export const cynefin = (model, ctx, matrix, renderer) => {
+    // The official SVG's inks, on whatever the canvas is: on a dark one they go
+    // through the dark notation table (ADR 0039).
+    const ink = (color) => notationColor(renderer, color);
     const tr = (wording) => renderer ? translateKey(renderer.std, ...wording) : wording[1];
     // The host's catalogue, or `null` with no host — used to decide whether a
     // decision line is drawn bold-lead/roman-rest (English, exactly as before)
@@ -45,7 +48,7 @@ export const cynefin = (model, ctx, matrix, renderer) => {
     ctx.scale(s, s);
     ctx.lineCap = 'butt';
     // ── Dark boundary strokes (behind the teal curve) ───────────────────
-    ctx.strokeStyle = COLORS.boundary;
+    ctx.strokeStyle = ink(COLORS.boundary);
     for (const [d, lw, miter] of DARK_BACK_PATHS) {
         ctx.lineJoin = miter ? 'miter' : 'round';
         ctx.lineWidth = lw;
@@ -53,7 +56,7 @@ export const cynefin = (model, ctx, matrix, renderer) => {
     }
     ctx.lineJoin = 'round';
     // ── Dashed boundary (oriented square pavings) ───────────────────────
-    ctx.fillStyle = COLORS.boundary;
+    ctx.fillStyle = ink(COLORS.boundary);
     for (const [x, y, sz, rot] of DASH_RECTS) {
         ctx.save();
         ctx.translate(x, y);
@@ -63,12 +66,12 @@ export const cynefin = (model, ctx, matrix, renderer) => {
     }
     // ── Teal "iterate" liminal curve ────────────────────────────────────
     if (model.showLiminalLine) {
-        ctx.strokeStyle = COLORS.teal;
+        ctx.strokeStyle = ink(COLORS.teal);
         ctx.lineWidth = TEAL_WIDTH;
         ctx.stroke(taggedPath2D(TEAL_PATH));
     }
     // ── Dark boundary strokes (over the teal curve) ─────────────────────
-    ctx.strokeStyle = COLORS.boundary;
+    ctx.strokeStyle = ink(COLORS.boundary);
     for (const [d, lw, miter] of DARK_FRONT_PATHS) {
         ctx.lineJoin = miter ? 'miter' : 'round';
         ctx.lineWidth = lw;
@@ -87,7 +90,7 @@ export const cynefin = (model, ctx, matrix, renderer) => {
     // ── Titles: domain headings + A / C marker glyphs and names ─────────
     if (model.showTitles) {
         ctx.textAlign = 'left';
-        ctx.fillStyle = COLORS.heading;
+        ctx.fillStyle = ink(COLORS.heading);
         ctx.font = `700 ${HEADING_SIZE}px ${FONT_FAMILY}`;
         // The user's own word when they have renamed this domain, the catalogue's
         // otherwise — the same precedence a declared background applies.
@@ -96,7 +99,7 @@ export const cynefin = (model, ctx, matrix, renderer) => {
         }
         ctx.textAlign = 'center';
         for (const m of MARKERS) {
-            ctx.fillStyle = COLORS.body;
+            ctx.fillStyle = ink(COLORS.body);
             ctx.font = `700 38px ${FONT_FAMILY}`;
             // The letter itself is notation, not a word — never translated.
             ctx.fillText(m.letter, m.lx, m.ly);
@@ -109,10 +112,10 @@ export const cynefin = (model, ctx, matrix, renderer) => {
         // Subheadings (h2) + decision lines
         ctx.textAlign = 'left';
         for (const d of DOMAINS) {
-            ctx.fillStyle = COLORS.heading;
+            ctx.fillStyle = ink(COLORS.heading);
             ctx.font = `700 15px ${FONT_FAMILY}`;
             ctx.fillText(tr(d.subheading), d.x, d.sy);
-            ctx.fillStyle = COLORS.body;
+            ctx.fillStyle = ink(COLORS.body);
             for (const { lead, rest, wording, y } of d.lines) {
                 if (hasHost) {
                     // A translated sentence: one run, no assumed bold-lead boundary.
@@ -132,18 +135,18 @@ export const cynefin = (model, ctx, matrix, renderer) => {
         }
         ctx.textAlign = 'center';
         // Teal annotation labels
-        ctx.fillStyle = COLORS.teal;
+        ctx.fillStyle = ink(COLORS.teal);
         ctx.font = `700 15px ${FONT_FAMILY}`;
         for (const [wording, x, y] of TEAL_LABELS)
             ctx.fillText(tr(wording), x, y);
         // Small exaptation sub-labels
-        ctx.fillStyle = COLORS.body;
+        ctx.fillStyle = ink(COLORS.body);
         ctx.font = `10.5px ${FONT_FAMILY}`;
         for (const [wording, x, y] of SMALL_LABELS) {
             ctx.fillText(tr(wording), x, y);
         }
         // Marker notes ("prepare to exit")
-        ctx.fillStyle = COLORS.teal;
+        ctx.fillStyle = ink(COLORS.teal);
         ctx.font = `700 15px ${FONT_FAMILY}`;
         for (const m of MARKERS) {
             if (m.note)

package/dist/dark-palette.d.ts

@@ -0,0 +1,7 @@
+import type { NotationDarkPalette } from '@formicoidea/labre-core/blocks/surface';
+/**
+ * Cynefin and Estuarine on a dark canvas (ADR 0039). The inks of the two
+ * reference drawings go light, keeping the contrast they have on white; the
+ * hues (the teal curve, the liminal green, the volatile red) stay as drawn.
+ */
+export declare const CYNEFIN_ESTUARINE_DARK_PALETTE: NotationDarkPalette;

package/dist/dark-palette.js

@@ -0,0 +1,20 @@
+import { COLORS as CYNEFIN } from './cynefin/consts.js';
+import { COLORS as ESTUARINE, HEX_STROKE } from './estuarine/consts.js';
+/**
+ * Cynefin and Estuarine on a dark canvas (ADR 0039). The inks of the two
+ * reference drawings go light, keeping the contrast they have on white; the
+ * hues (the teal curve, the liminal green, the volatile red) stay as drawn.
+ */
+export const CYNEFIN_ESTUARINE_DARK_PALETTE = {
+    framework: 'cynefin-estuarine',
+    colors: {
+        [CYNEFIN.boundary]: '#d6d6d6',
+        [CYNEFIN.heading]: '#86878a',
+        [CYNEFIN.body]: '#eaeaea',
+        [ESTUARINE.axis]: '#ff8cbe',
+        [ESTUARINE.axisLabel]: '#e95f4e',
+        [ESTUARINE.liminalLabel]: '#4a984c',
+        [ESTUARINE.label]: '#eaeaea',
+        [HEX_STROKE]: '#eaeaea',
+    },
+};

package/dist/estuarine/element-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
+import { ElementRendererExtension, notationColor, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
 import { translateKey, } from '@formicoidea/labre-core/shared/services';
 import { FONT_FAMILY } from '../utils.js';
 import { ARROWHEADS, AXIS_LABELS, AXIS_WIDTH, COLORS, COUNTERFACTUAL_PATH, COUNTERFACTUAL_WIDTH, E_AXIS, LABEL_LETTER_SPACING, LABELS, LIMINAL_PATH, LIMINAL_WIDTH, REF_H, REF_W, REF_X, REF_Y, T_AXIS, VOLATILE_PATH, VOLATILE_WIDTH, } from './consts.js';
@@ -114,6 +114,9 @@ export function applyEstuarineTransform(ctx, w, h) {
  */
 export const estuarine = (model, ctx, matrix, renderer) => {
     const tr = (wording) => renderer ? translateKey(renderer.std, ...wording) : wording[1];
+    // The official SVG's inks, through the dark notation table on a dark
+    // canvas (ADR 0039).
+    const ink = (color) => notationColor(renderer, color);
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
@@ -132,8 +135,8 @@ export const estuarine = (model, ctx, matrix, renderer) => {
     // Drawn in element coordinates so the e axis spans the real height and the
     // t axis the real width, while `lineWidth` stays one honest thickness
     // instead of being fattened in whichever direction the map was pulled.
-    ctx.strokeStyle = COLORS.axis;
-    ctx.fillStyle = COLORS.axis;
+    ctx.strokeStyle = ink(COLORS.axis);
+    ctx.fillStyle = ink(COLORS.axis);
     ctx.lineWidth = AXIS_WIDTH * fit.strokeScale;
     ctx.beginPath();
     ctx.moveTo(ax(E_AXIS.x), ay(E_AXIS.y1));
@@ -172,7 +175,7 @@ export const estuarine = (model, ctx, matrix, renderer) => {
     const hasSpacing = 'letterSpacing' in ctx;
     const legend = (key) => {
         const l = LABELS[key];
-        ctx.fillStyle = l.color;
+        ctx.fillStyle = ink(l.color);
         ctx.font = `600 ${l.size * fit.strokeScale}px ${FONT_FAMILY}`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'alphabetic';
@@ -194,7 +197,7 @@ export const estuarine = (model, ctx, matrix, renderer) => {
             continue;
         ctx.save();
         applyEstuarineTransform(ctx, w, h);
-        ctx.strokeStyle = curve.color;
+        ctx.strokeStyle = ink(curve.color);
         ctx.lineWidth = curve.width * fit.curveLineScale;
         ctx.globalAlpha = GHOST_ALPHA;
         ctx.setLineDash([...GHOST_DASH]);
@@ -208,7 +211,7 @@ export const estuarine = (model, ctx, matrix, renderer) => {
     // writes as `backgroundPoint`. The glyph and the gap then scale together, so
     // the letter sits the same distance from its axis at every ratio.
     if (model.showAxisLabels) {
-        ctx.fillStyle = COLORS.axisLabel;
+        ctx.fillStyle = ink(COLORS.axisLabel);
         ctx.font = `italic 700 ${AXIS_LABELS.size * k}px Georgia, serif`;
         ctx.textAlign = 'left';
         ctx.textBaseline = 'alphabetic';

package/dist/view.js

@@ -1,4 +1,4 @@
-import { QualityNudgeExtension, ReadingProfileExtension, ValidationFrameworkExtension, validationToolbarConfig, } from '@formicoidea/labre-core/blocks/surface';
+import { QualityNudgeExtension, ReadingProfileExtension, ValidationFrameworkExtension, validationToolbarConfig, NotationDarkPaletteExtension, } from '@formicoidea/labre-core/blocks/surface';
 import { FrameworkPaletteExtension } from '@formicoidea/labre-core/components/color-picker';
 import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
 import { TemplateCategoryExtension } from '@formicoidea/labre-core/gfx/template';
@@ -20,6 +20,7 @@ import { estuarineToolbarExtension } from './estuarine/toolbar/config.js';
 import { cynefinTemplateCategory, estuarineTemplateCategory, } from './templates/index.js';
 import { CYNEFIN_ESTUARINE_FRAMEWORK_PALETTE } from './toolbar/palette.js';
 import { cynefinEstuarineSeniorTool } from './toolbar/senior-tool.js';
+import { CYNEFIN_ESTUARINE_DARK_PALETTE } from './dark-palette.js';
 /**
  * Cynefin / Estuarine rendering — ALWAYS registered, independent of any flag.
  * Disabling `cynefin-estuarine` hides only the creation tooling (see
@@ -34,6 +35,7 @@ export class CynefinEstuarineRenderViewExtension extends ViewExtensionProvider {
     }
     setup(context) {
         super.setup(context);
+        context.register(NotationDarkPaletteExtension(CYNEFIN_ESTUARINE_DARK_PALETTE));
         context.register(CynefinView);
         context.register(CynefinRendererExtension);
         context.register(EstuarineView);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-cynefin",
   "description": "Labre cynefin-estuarine framework for @formicoidea/labre-core.",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.53.0",
+    "@formicoidea/labre-core": "0.55.0",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0"
   }