@formicoidea/labre-framework-edgy 0.39.1 → 0.40.0

package/dist/board-renderer.js

@@ -1,6 +1,8 @@
 import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-const BOARD_FILL = '#ffffff';
-const BOARD_BORDER = '#e0e0e0';
+import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
+/** The shared notation scale's card: painted at render time, so every board. */
+const BOARD_FILL = NOTATION_NEUTRALS.cardFill;
+const BOARD_BORDER = NOTATION_NEUTRALS.cardBorder;
 const BOARD_RADIUS = 16;
 const BOARD_BORDER_WIDTH = 2;
 /**

package/dist/node/consts.d.ts

@@ -4,9 +4,19 @@ import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
  * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
  * editable via the shape toolbar; these are just the pre-formatted defaults at
  * creation.
+ *
+ * The fill is the shared notation scale's card. The stroke is NOT the scale's
+ * ink: it is the official EDGY stencil ink, sourced from the pictograms this
+ * package ships (`pictograms/Shape-Activity.svg`, `Shape-Object.svg`,
+ * `Shape-Outcome.svg`, every `Small-Shape-*.svg`, `Icon-People.svg`,
+ * `Tag-Black.svg` all draw `stroke:#262626` at `stroke-width:2`). A neutral a
+ * notation borrows from its official source is content of the notation, like
+ * the C4 stencil's `#444444`, and stays a literal.
  */
-export declare const NODE_FILL = "#ffffff";
+export declare const NODE_FILL: string;
+/** The EDGY stencil ink (`stroke:#262626` in the official pictograms). */
 export declare const NODE_STROKE = "#262626";
+/** The EDGY stencil stroke weight (`stroke-width:2` in the pictograms). */
 export declare const NODE_STROKE_WIDTH = 2;
 /** Outcome corner radius (absolute px — a lightly rounded rectangle). */
 export declare const OUTCOME_RADIUS = 6;

package/dist/node/consts.js

@@ -1,11 +1,22 @@
+import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
 /**
  * Visual constants for the four EDGY base-element nodes. Each node is a NATIVE
  * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
  * editable via the shape toolbar; these are just the pre-formatted defaults at
  * creation.
+ *
+ * The fill is the shared notation scale's card. The stroke is NOT the scale's
+ * ink: it is the official EDGY stencil ink, sourced from the pictograms this
+ * package ships (`pictograms/Shape-Activity.svg`, `Shape-Object.svg`,
+ * `Shape-Outcome.svg`, every `Small-Shape-*.svg`, `Icon-People.svg`,
+ * `Tag-Black.svg` all draw `stroke:#262626` at `stroke-width:2`). A neutral a
+ * notation borrows from its official source is content of the notation, like
+ * the C4 stencil's `#444444`, and stays a literal.
  */
-export const NODE_FILL = '#ffffff';
+export const NODE_FILL = NOTATION_NEUTRALS.cardFill;
+/** The EDGY stencil ink (`stroke:#262626` in the official pictograms). */
 export const NODE_STROKE = '#262626';
+/** The EDGY stencil stroke weight (`stroke-width:2` in the pictograms). */
 export const NODE_STROKE_WIDTH = 2;
 /** Outcome corner radius (absolute px — a lightly rounded rectangle). */
 export const OUTCOME_RADIUS = 6;

package/dist/templates/index.js

@@ -1,7 +1,8 @@
 import { makeTemplateSnapshot, surfaceText, surfaceYMap, templateFromCommand, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
 import { edgyCommands } from '../commands.js';
-import { NODE_STROKE, NODE_STROKE_WIDTH } from '../node/consts.js';
+import { NODE_FILL, NODE_STROKE, NODE_STROKE_WIDTH } from '../node/consts.js';
 import { edgyNodeProps, edgyNodeTextProps } from '../presets.js';
 import { edgyDynamicTemplate } from './dynamic.js';
 /**
@@ -51,7 +52,7 @@ function rect(x, y, w, h, opts = {}) {
         type: 'shape',
         shapeType: 'rect',
         filled: true,
-        fillColor: opts.fill ?? '#ffffff',
+        fillColor: opts.fill ?? NODE_FILL,
         strokeColor: opts.stroke ?? NODE_STROKE,
         strokeWidth: opts.sw ?? NODE_STROKE_WIDTH,
         shapeStyle: ShapeStyle.General,
@@ -230,7 +231,7 @@ function journey() {
         fontSize: 16,
     });
     return {
-        cust: enode('people', 40, 120, 64, 64, { fill: '#ffffff' }),
+        cust: enode('people', 40, 120, 64, 64, { fill: NODE_FILL }),
         custL: label(20, 192, 104, 24, 'Customer', { fontSize: 14 }),
         // The person and its name travel together, as `createEdgyPeople` writes
         // them. A group is placed AFTER its members: the id middleware remaps
@@ -274,19 +275,28 @@ function journey() {
         t3: tk(786, 'C'),
         trav1: label(258, 350, 184, 20, 'traverses', {
             fontSize: 13,
-            color: '#5f6368',
+            color: NOTATION_NEUTRALS.label,
         }),
         trav2: label(518, 350, 184, 20, 'traverses', {
             fontSize: 13,
-            color: '#5f6368',
+            color: NOTATION_NEUTRALS.label,
         }),
         trav3: label(778, 350, 184, 20, 'traverses', {
             fontSize: 13,
-            color: '#5f6368',
+            color: NOTATION_NEUTRALS.label,
+        }),
+        use1: label(258, 504, 184, 20, 'uses', {
+            fontSize: 13,
+            color: NOTATION_NEUTRALS.label,
+        }),
+        use2: label(518, 504, 184, 20, 'uses', {
+            fontSize: 13,
+            color: NOTATION_NEUTRALS.label,
+        }),
+        use3: label(778, 504, 184, 20, 'uses', {
+            fontSize: 13,
+            color: NOTATION_NEUTRALS.label,
         }),
-        use1: label(258, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
-        use2: label(518, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
-        use3: label(778, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
         l1: attach('s1', 'c1'),
         l2: attach('s2', 'c2'),
         l3: attach('s3', 'c3'),
@@ -402,15 +412,15 @@ export const edgyTemplateCategory = {
         tpl('Facets overview', `<svg ${ATTRS} fill="none"><rect x="6" y="20" width="18" height="46" rx="3" fill="#1ec873"/><rect x="46" y="20" width="18" height="46" rx="3" fill="#2f6ff0"/><rect x="86" y="20" width="18" height="46" rx="3" fill="#f5246e"/><rect x="26" y="30" width="18" height="40" rx="3" fill="#4fd0ea"/><rect x="66" y="30" width="18" height="40" rx="3" fill="#cf8cff"/><rect x="106" y="30" width="18" height="40" rx="3" fill="#eeba51"/></svg>`, facetsOverview()),
         tpl('Customer journey', `<svg ${ATTRS} fill="none"><path d="M20 24 H110 L122 40 L110 56 H20 Z" fill="#f3a3c0"/><rect x="26" y="30" width="22" height="20" fill="none" stroke="#fff"/><rect x="54" y="30" width="22" height="20" fill="none" stroke="#fff"/><rect x="82" y="30" width="22" height="20" fill="none" stroke="#fff"/></svg>`, journey()),
         tpl('Service blueprint', `<svg ${ATTRS} fill="none"><rect x="8" y="14" width="119" height="16" fill="#fbd5e0"/><rect x="8" y="32" width="119" height="34" fill="#d4e9f8"/><rect x="20" y="18" width="22" height="9" fill="#f5246e" opacity="0.5"/><rect x="20" y="40" width="22" height="9" fill="#2f6ff0" opacity="0.4"/><rect x="60" y="40" width="22" height="9" fill="#2f6ff0" opacity="0.4"/></svg>`, blueprint()),
-        tpl('Organisation chart', `<svg ${ATTRS} fill="none"><rect x="52" y="12" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="14" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="52" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="90" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><path d="M68 26 V32 M30 32 H106 M30 32 V38 M68 32 V38 M106 32 V38" stroke="#262626"/></svg>`, orgChart()),
+        tpl('Organisation chart', `<svg ${ATTRS} fill="none"><rect x="52" y="12" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="14" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="52" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="90" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><path d="M68 26 V32 M30 32 H106 M30 32 V38 M68 32 V38 M106 32 V38" stroke="${NODE_STROKE}"/></svg>`, orgChart()),
         templateFromCommand(byId('edgy.addFacets'), `<svg ${ATTRS}><circle cx="55" cy="34" r="18" fill="#00ea4e" opacity="0.9"/><circle cx="80" cy="34" r="18" fill="#034cee" opacity="0.9"/><circle cx="67" cy="54" r="18" fill="#ff0056" opacity="0.9"/></svg>`, 'Facets diagram'),
         edgyDynamicTemplate,
         // The blank board had no template at all until the palette was derived —
         // the coverage test is what said so.
-        templateFromCommand(byId('edgy.addBoard'), `<svg ${ATTRS} fill="none"><rect x="8" y="9" width="119" height="62" rx="8" fill="#ffffff" stroke="#e0e0e0" stroke-width="2"/><path d="M52 30 H84 M53 31 L66 58 M83 31 L70 58" stroke="#262626" stroke-width="1.4"/><rect x="48" y="26" width="9" height="9" fill="#00ea4e"/><circle cx="84" cy="30" r="4.5" fill="#034cee"/><path d="M61 54 h8 l4 4 -4 4 h-8 z" fill="#ff0056"/></svg>`, 'EDGY board'),
-        templateFromCommand(byId('edgy.addPeople'), `<svg ${ATTRS} fill="#262626"><circle cx="67" cy="32" r="9" fill="none" stroke="#262626" stroke-width="2.4"/><path d="M50 60 a17 17 0 0 1 34 0" fill="none" stroke="#262626" stroke-width="2.4"/></svg>`),
-        templateFromCommand(byId('edgy.addOutcome'), `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" rx="6" stroke="#262626" stroke-width="2"/></svg>`),
-        templateFromCommand(byId('edgy.addObject'), `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" stroke="#262626" stroke-width="2"/></svg>`),
-        templateFromCommand(byId('edgy.addActivity'), `<svg ${ATTRS} fill="none"><path d="M20 24 H98 L116 41 H116 L98 58 H20 Z" stroke="#262626" stroke-width="2" stroke-linejoin="round"/></svg>`),
+        templateFromCommand(byId('edgy.addBoard'), `<svg ${ATTRS} fill="none"><rect x="8" y="9" width="119" height="62" rx="8" fill="${NOTATION_NEUTRALS.cardFill}" stroke="${NOTATION_NEUTRALS.cardBorder}" stroke-width="2"/><path d="M52 30 H84 M53 31 L66 58 M83 31 L70 58" stroke="${NODE_STROKE}" stroke-width="1.4"/><rect x="48" y="26" width="9" height="9" fill="#00ea4e"/><circle cx="84" cy="30" r="4.5" fill="#034cee"/><path d="M61 54 h8 l4 4 -4 4 h-8 z" fill="#ff0056"/></svg>`, 'EDGY board'),
+        templateFromCommand(byId('edgy.addPeople'), `<svg ${ATTRS} fill="${NODE_STROKE}"><circle cx="67" cy="32" r="9" fill="none" stroke="${NODE_STROKE}" stroke-width="2.4"/><path d="M50 60 a17 17 0 0 1 34 0" fill="none" stroke="${NODE_STROKE}" stroke-width="2.4"/></svg>`),
+        templateFromCommand(byId('edgy.addOutcome'), `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" rx="6" stroke="${NODE_STROKE}" stroke-width="2"/></svg>`),
+        templateFromCommand(byId('edgy.addObject'), `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" stroke="${NODE_STROKE}" stroke-width="2"/></svg>`),
+        templateFromCommand(byId('edgy.addActivity'), `<svg ${ATTRS} fill="none"><path d="M20 24 H98 L116 41 H116 L98 58 H20 Z" stroke="${NODE_STROKE}" stroke-width="2" stroke-linejoin="round"/></svg>`),
     ],
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-edgy",
   "description": "Labre edgy framework for @formicoidea/labre-core.",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,8 +31,8 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.39.1",
-    "@formicoidea/labre-ddd-shared": "0.39.1",
+    "@formicoidea/labre-core": "0.40.0",
+    "@formicoidea/labre-ddd-shared": "0.40.0",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0",
     "yjs": "^13.6.21"