@formicoidea/labre-framework-wardley 0.34.2 → 0.36.0

package/dist/toolbar/icons.d.ts

@@ -20,6 +20,42 @@ export declare const wardleyMarketIcon: import("lit-html").TemplateResult<2>;
 export declare const wardleyEcosystemIcon: import("lit-html").TemplateResult<2>;
 /** Component + method (validated METH-A): component inscribed in a colored outer circle (default grey). */
 export declare const wardleyMethodIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Porter's forces: a lettered circle pressed on from the four cardinal
+ * directions by short solid arrows.
+ *
+ * The arrows are RED like {@link wardleyArrowIcon}'s, because on this notation
+ * red is what "a force acting on the map" looks like; they are SOLID where the
+ * evolution arrow is dashed, which is the one thing that tells the two apart at
+ * 24 pixels. The circle keeps `currentColor` like every other artefact glyph.
+ */
+export declare const wardleyPorterIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Accelerator / decelerator: the same fat arrow the canvas draws, at 24 px.
+ *
+ * `currentColor` outline over a light fill, like the other artefact glyphs —
+ * the canvas's flat grey would fight the toolbar's own theming, and the
+ * DIRECTION is what tells the two apart anyway, which is exactly what the two
+ * icons differ on and nothing else. The seven points are the outline of
+ * `ACCELERATOR_VERTICES` scaled onto the 24-unit box (a 22 × 18 arrow centred
+ * on it), so the button and the shape it draws are the same drawing.
+ */
+export declare const wardleyAcceleratorIcon: import("lit-html").TemplateResult<2>;
+/** The mirror of {@link wardleyAcceleratorIcon}: the same arrow, pointing left. */
+export declare const wardleyDeceleratorIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Area (rectangle) and area (polygon): the zone, translucent, at 24 px.
+ *
+ * The pair differs on the OUTLINE and on nothing else, which is the whole of
+ * what the two commands differ on. A `currentColor` rim over a light fill like
+ * every other artefact glyph — the canvas draws the zone in Peace, but a
+ * coloured button would claim the colour is the notation, and it is a default
+ * the author changes from the toolbar. The pentagon is the editor's own default
+ * polygon, so the button is the shape the click produces.
+ */
+export declare const wardleyAreaRectIcon: import("lit-html").TemplateResult<2>;
+/** The same zone with corners you move: the editor's own default pentagon. */
+export declare const wardleyAreaPolygonIcon: import("lit-html").TemplateResult<2>;
 /** Legend: a bordered box with glyph + line rows. */
 export declare const wardleyLegendIcon: import("lit-html").TemplateResult<2>;
 /** Opportunity gradient background: axes + green differential hump + red operational bump. */

package/dist/toolbar/icons.js

@@ -98,6 +98,64 @@ export const wardleyMethodIcon = svg `<svg width="24" height="24" viewBox="0 0 2
   <circle cx="12" cy="12" r="9.6" fill="#d9d9d9" stroke="#1f2328" stroke-width="1.2"/>
   <circle cx="12" cy="12" r="4.6" fill="#fff" stroke="#1f2328" stroke-width="1.2"/>
 </svg>`;
+/**
+ * Porter's forces: a lettered circle pressed on from the four cardinal
+ * directions by short solid arrows.
+ *
+ * The arrows are RED like {@link wardleyArrowIcon}'s, because on this notation
+ * red is what "a force acting on the map" looks like; they are SOLID where the
+ * evolution arrow is dashed, which is the one thing that tells the two apart at
+ * 24 pixels. The circle keeps `currentColor` like every other artefact glyph.
+ */
+export const wardleyPorterIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="5.4" fill="#fff" stroke="currentColor" stroke-width="1.3"/>
+  <g stroke="${RED}" stroke-width="1.4" stroke-linecap="round">
+    <line x1="12" y1="6" x2="12" y2="3.4"/>
+    <line x1="18" y1="12" x2="20.6" y2="12"/>
+    <line x1="12" y1="18" x2="12" y2="20.6"/>
+    <line x1="6" y1="12" x2="3.4" y2="12"/>
+  </g>
+  <g fill="${RED}">
+    <path d="M12 1.4 L14 4.4 H10 Z"/>
+    <path d="M22.6 12 L19.6 14 V10 Z"/>
+    <path d="M12 22.6 L10 19.6 H14 Z"/>
+    <path d="M1.4 12 L4.4 10 V14 Z"/>
+  </g>
+</svg>`;
+/**
+ * Accelerator / decelerator: the same fat arrow the canvas draws, at 24 px.
+ *
+ * `currentColor` outline over a light fill, like the other artefact glyphs —
+ * the canvas's flat grey would fight the toolbar's own theming, and the
+ * DIRECTION is what tells the two apart anyway, which is exactly what the two
+ * icons differ on and nothing else. The seven points are the outline of
+ * `ACCELERATOR_VERTICES` scaled onto the 24-unit box (a 22 × 18 arrow centred
+ * on it), so the button and the shape it draws are the same drawing.
+ */
+export const wardleyAcceleratorIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 8.0 H13.1 V3 L23 12 L13.1 21 V16 H1 Z" fill="#f0f0f0" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>`;
+/** The mirror of {@link wardleyAcceleratorIcon}: the same arrow, pointing left. */
+export const wardleyDeceleratorIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M23 8.0 H10.9 V3 L1 12 L10.9 21 V16 H23 Z" fill="#f0f0f0" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>`;
+/**
+ * Area (rectangle) and area (polygon): the zone, translucent, at 24 px.
+ *
+ * The pair differs on the OUTLINE and on nothing else, which is the whole of
+ * what the two commands differ on. A `currentColor` rim over a light fill like
+ * every other artefact glyph — the canvas draws the zone in Peace, but a
+ * coloured button would claim the colour is the notation, and it is a default
+ * the author changes from the toolbar. The pentagon is the editor's own default
+ * polygon, so the button is the shape the click produces.
+ */
+export const wardleyAreaRectIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.6" y="5" width="18.8" height="14" rx="1" fill="#f0f0f0" fill-opacity="0.8" stroke="currentColor" stroke-width="1.4"/>
+</svg>`;
+/** The same zone with corners you move: the editor's own default pentagon. */
+export const wardleyAreaPolygonIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2.8 L21.4 9.6 L17.8 20.8 H6.2 L2.6 9.6 Z" fill="#f0f0f0" fill-opacity="0.8" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
+</svg>`;
 /** Legend: a bordered box with glyph + line rows. */
 export const wardleyLegendIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/>

package/dist/toolbar/node-config.d.ts

@@ -1 +1,21 @@
+import { type Color, type Palette, type ShapeElementModel } from '@formicoidea/labre-core/model';
+/**
+ * What a picked swatch WRITES on a Wardley node.
+ *
+ * The identity on every artefact but one. A zone is drawn over the components
+ * it groups, so its fill is a WASH — `#c6dbfc40`, the alpha being the whole of
+ * what keeps the map readable underneath — and a picker that wrote the swatch
+ * as-is would replace it with an opaque hue and hide the map the zone annotates
+ * (recette of #213). So a swatch picked for an area keeps the zone's alpha.
+ *
+ * Only a bare 6-digit hex is touched: a value that already carries alpha is
+ * somebody's deliberate choice from the custom picker, and a theme token
+ * (`--affine-…`) is not a hex at all and must reach the document intact.
+ */
+export declare function wardleyFillColor(model: ShapeElementModel, value: Color): Color;
+/**
+ * From the default editor palette we keep ONLY the neutrals — the historical
+ * colours are dropped in favour of the Wardley swatches above.
+ */
+export declare const WARDLEY_PALETTE_LIST: Palette[];
 export declare const wardleyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;

package/dist/toolbar/node-config.js

@@ -1,17 +1,110 @@
-import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
+import { neutralPalettes, paletteColorAction, shapeToolbarConfig, } from '@formicoidea/labre-core/gfx/shape';
+import { WardleyNodeElementModel, } from '@formicoidea/labre-core/model';
 import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { AREA_FILL, INERTIA_COLOR, METHOD_FILL, WARDLEY_RED, } from '../node/consts.js';
+/** The two hex digits `AREA_FILL` carries — the zone's ~25 % opacity. */
+const AREA_ALPHA = AREA_FILL.slice(-2);
+/** A plain 6-digit hex, the only shape a swatch value takes. */
+const SIX_DIGIT_HEX = /^#[0-9a-f]{6}$/i;
+/**
+ * What a picked swatch WRITES on a Wardley node.
+ *
+ * The identity on every artefact but one. A zone is drawn over the components
+ * it groups, so its fill is a WASH — `#c6dbfc40`, the alpha being the whole of
+ * what keeps the map readable underneath — and a picker that wrote the swatch
+ * as-is would replace it with an opaque hue and hide the map the zone annotates
+ * (recette of #213). So a swatch picked for an area keeps the zone's alpha.
+ *
+ * Only a bare 6-digit hex is touched: a value that already carries alpha is
+ * somebody's deliberate choice from the custom picker, and a theme token
+ * (`--affine-…`) is not a hex at all and must reach the document intact.
+ */
+export function wardleyFillColor(model, value) {
+    if (!(model instanceof WardleyNodeElementModel))
+        return value;
+    if (model.kind !== 'area')
+        return value;
+    if (typeof value !== 'string' || !SIX_DIGIT_HEX.test(value))
+        return value;
+    return `${value}${AREA_ALPHA}`;
+}
+/**
+ * The Wardley **evolution cycle**, surfaced as ready-made swatches in the node
+ * colour picker: Wonder / Peace / War, the three climatic phases a component
+ * travels through in Simon Wardley's pattern — saturated first, then the light
+ * shades for a fill under a label — followed by the three colours the notation
+ * itself already uses (the evolution arrow's red, the inertia bar, a method's
+ * neutral fill).
+ *
+ * They are SHORTCUTS, never constraints: nothing in the map reads a colour, so
+ * an author is free to ignore them, and the custom picker stays one click away.
+ */
+const WARDLEY_PALETTES = [
+    { key: 'Wonder', value: '#3ec9f2' },
+    { key: 'Peace', value: '#5b9cf6' },
+    { key: 'War', value: '#9d6df0' },
+    { key: 'Wonder light', value: '#b9e9fa' },
+    { key: 'Peace light', value: '#c6dbfc' },
+    { key: 'War light', value: '#d9c9fa' },
+    { key: 'Wardley red', value: WARDLEY_RED },
+    { key: 'Inertia', value: INERTIA_COLOR },
+    { key: 'Method grey', value: METHOD_FILL },
+];
+/**
+ * From the default editor palette we keep ONLY the neutrals — the historical
+ * colours are dropped in favour of the Wardley swatches above.
+ */
+export const WARDLEY_PALETTE_LIST = [
+    ...WARDLEY_PALETTES,
+    ...neutralPalettes(),
+];
 /**
  * Wardley nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
  * actions (which target `getSurfaceModelsByType(ShapeElementModel)`) operate on
- * them directly. We re-register only the color / line-style actions under the
- * `wardleyNode` flavour so the circle's fill / stroke color / stroke width are
- * editable — while excluding the shape-only actions (switch type, add inner
- * text, edit vertices) that don't make sense for a Wardley node.
+ * them directly. We re-register only the line-style action plus a colour picker
+ * seeded with the Wardley swatches, so the circle's fill / stroke color / stroke
+ * width stay editable — while excluding the shape-only actions (switch type, add
+ * inner text) that don't make sense for a Wardley node.
+ */
+const KEEP_ACTION_IDS = new Set(['d.style']);
+/**
+ * The shape toolbar's vertex editor, kept for ONE artefact: an area drawn as a
+ * polygon.
+ *
+ * Every other polygon on a Wardley map has an outline that IS the notation — an
+ * accelerator points right and a decelerator points left, and dragging a barb
+ * would turn a statement about the climate into a grey blob. A zone is the
+ * opposite: its whole job is to follow the components it groups, so moving its
+ * corners is the point of choosing the polygon over the rectangle.
+ *
+ * The shape action's own `when` already asks for a single ungrouped polygon —
+ * which excludes the two climate arrows, since both are grouped with their name
+ * — but it is narrowed HERE to `kind === 'area'` rather than left to rely on
+ * that: an arrow selected from inside its group, or one an author ungrouped,
+ * would otherwise offer a gesture that can only damage it.
  */
-const KEEP_ACTION_IDS = new Set(['e.color', 'd.style']);
+const VERTEX_ACTION_ID = 'f1.edit-vertices';
+function isAreaSelection(ctx) {
+    const models = ctx.getSurfaceModelsByType(WardleyNodeElementModel);
+    return models.length > 0 && models.every(model => model.kind === 'area');
+}
+const areaVertexActions = shapeToolbarConfig.actions
+    .filter(action => action.id === VERTEX_ACTION_ID)
+    .map(action => {
+    const when = action.when;
+    return {
+        ...action,
+        when: (ctx) => isAreaSelection(ctx) &&
+            (typeof when === 'function' ? when(ctx) : when !== false),
+    };
+});
 const wardleyNodeToolbarConfig = {
-    actions: shapeToolbarConfig.actions.filter(action => KEEP_ACTION_IDS.has(action.id)),
+    actions: [
+        ...shapeToolbarConfig.actions.filter(action => KEEP_ACTION_IDS.has(action.id)),
+        ...areaVertexActions,
+        paletteColorAction('e.color', WARDLEY_PALETTE_LIST, wardleyFillColor),
+    ],
     when: shapeToolbarConfig.when,
 };
 export const wardleyNodeToolbarExtension = ToolbarModuleExtension({

package/dist/view.js

@@ -1,5 +1,5 @@
-import { InterchangeExtension, ReadingProfileExtension, tagsToolbarConfig, validationToolbarConfig, QualityNudgeExtension, ValidationProfileExtension, ValidationRuleExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { AuditCriterionExtension, ToolbarModuleExtension, UniverseTagDefsExtension, } from '@formicoidea/labre-core/shared/services';
+import { InterchangeExtension, morphToolbarConfig, ReadingProfileExtension, tagsToolbarConfig, validationToolbarConfig, QualityNudgeExtension, ValidationProfileExtension, ValidationRuleExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { AuditCriterionExtension, ToolbarModuleExtension, toolbarModuleKey, UniverseTagDefsExtension, } from '@formicoidea/labre-core/shared/services';
 import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
 import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
 import { BlockFlavourIdentifier, CommandExtension } from '@formicoidea/labre-core/std';
@@ -8,6 +8,7 @@ import { WARDLEY_AUDIT_CRITERIA } from './audit-criteria.js';
 import { wardleyCommandIcons, wardleyCommands } from './commands.js';
 import { effects } from './effects.js';
 import { WARDLEY_INTERCHANGE } from './interchange.js';
+import { WARDLEY_MORPH_SPEC } from './morph.js';
 import { WARDLEY_TAG_DEFS } from './natures.js';
 import { WARDLEY_PROFILES } from './profiles.js';
 import { WARDLEY_NUDGES } from './nudges.js';
@@ -19,6 +20,7 @@ import { WardleyElementRendererExtension } from './element-renderer.js';
 import { WardleyInteraction, WardleyView } from './element-view.js';
 import { WardleyNodeRendererExtension } from './node/node-renderer.js';
 import { WardleyNodeView } from './node/node-view.js';
+import { WardleyPorterWatcher } from './node/porter-watcher.js';
 import { wardleyNodeToolbarExtension } from './toolbar/node-config.js';
 import { wardleyToolbarExtension } from './toolbar/config.js';
 import { wardleySeniorTool } from './toolbar/senior-tool.js';
@@ -50,6 +52,15 @@ export class WardleyRenderViewExtension extends ViewExtensionProvider {
             context.register(WardleyInteraction);
             context.register(wardleyToolbarExtension);
             context.register(wardleyNodeToolbarExtension);
+            // A Porter's-forces glyph says the same thing twice — the letter in the
+            // circle and the `wardley:competition` tag on it — and this keeps the two
+            // spellings equal in both directions. HERE, in the always-on half, for
+            // `docs/adr/0009`'s reason: it authors nothing. It creates no element,
+            // offers no button, adds no artefact; it keeps an element ALREADY in the
+            // document coherent with itself, which a force drawn while the Wardley
+            // button was on must stay when the button goes off. Edgeless-only because
+            // a selection, a canvas text editor and a surface are all edgeless.
+            context.register(WardleyPorterWatcher);
         }
     }
 }
@@ -133,6 +144,33 @@ export class WardleyViewExtension extends ViewExtensionProvider {
                     config: tagsToolbarConfig(WARDLEY_ROLES),
                 }));
             }
+            // The "Change type" dropdown on a selected COMPONENT's contextual
+            // toolbar — the generic module, parameterized by Wardley's own family.
+            //
+            // ## Why the key carries an owner
+            //
+            // A Wardley artefact is a native `group`, so the row the toolbar draws
+            // for it is the GROUP's row — and both plain group keys are already
+            // claimed: `affine:surface:group` by the native group operations, and
+            // `custom:affine:surface:group` by the qualification dropdown twenty
+            // lines above, which is on the group for the very same reason this is.
+            // Registering a second module on either would throw
+            // `DuplicateServiceDefinitionError` before the editor finished setting
+            // up. `toolbarModuleKey` is what lifts that ceiling — C4's morph already
+            // uses it on this flavour — so the module is registered under the
+            // DISTINCT variant `custom:affine:surface:group#wardley-morph` and the
+            // registry hands it to the same row.
+            //
+            // ## Why here
+            //
+            // In the flag-gated half, because a morph is TOOLING: a market drawn
+            // while the flag was on keeps its circle, its dots, its role and its
+            // place in every rule when the flag goes off — it just stops being
+            // something the toolbar offers to say differently (`docs/adr/0009`).
+            context.register(ToolbarModuleExtension({
+                id: BlockFlavourIdentifier(toolbarModuleKey('custom:affine:surface:group', 'wardley-morph')),
+                config: morphToolbarConfig(WARDLEY_MORPH_SPEC),
+            }));
             // The reversed reading (MF3): what the map says about a component, on
             // demand. One declaration — the roles, the nature tag, the dependency
             // edge and the map's own zones, all of them already stated elsewhere in

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-wardley",
   "description": "Labre wardley framework for @formicoidea/labre-core.",
-  "version": "0.34.2",
+  "version": "0.36.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.34.2",
+    "@formicoidea/labre-core": "0.36.0",
     "lit": "^3.2.0"
   }
 }