@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/templates/index.js

@@ -0,0 +1,172 @@
+import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { REF_WIDTH } from '../consts';
+import { wardleyMaps } from './maps';
+import { ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_WIDTH, WARDLEY_RED, } from '../node/consts';
+const VARIANT_DEFAULTS = {
+    classic: {},
+    opportunity: {
+        yAxisTitle: 'Opportunity',
+        showVisibilityLabels: false,
+        showCornerLabels: false,
+    },
+    benefit: {
+        yAxisTitle: '',
+        visibilityHigh: 'Benefit',
+        visibilityLow: 'Investment',
+        showCornerLabels: false,
+    },
+    'evolution-gradient': {},
+};
+const bg = (variant, w = REF_WIDTH) => {
+    const h = Math.round((w * 9) / 16);
+    return { type: 'wardley', variant, ...VARIANT_DEFAULTS[variant], xywh: `[0,0,${w},${h}]` };
+};
+/** A wardley node ellipse positioned by top-left. */
+function node(kind, x, y, d = NODE_SIZE, fill = NODE_FILL, strokeWidth = NODE_STROKE_WIDTH) {
+    return {
+        type: 'wardleyNode',
+        kind,
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: fill,
+        strokeColor: NODE_STROKE,
+        strokeWidth,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${x},${y},${d},${d}]`,
+    };
+}
+function label(x, y, str, align = 'left') {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color: NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: LABEL_FONT_SIZE,
+        textAlign: align === 'center' ? TextAlign.Center : TextAlign.Left,
+        xywh: `[${x},${y},140,26]`,
+    };
+}
+function connect(source, target, opts = {}) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        stroke: opts.red ? WARDLEY_RED : LINK_GREY,
+        strokeStyle: opts.red ? StrokeStyle.Dash : StrokeStyle.Solid,
+        strokeWidth: LINK_STROKE_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: opts.red ? PointStyle.Triangle : PointStyle.None,
+        source,
+        target,
+    };
+}
+const inertia = (x = 0, y = 0) => ({
+    type: 'shape',
+    shapeType: 'rect',
+    filled: true,
+    fillColor: INERTIA_COLOR,
+    strokeColor: INERTIA_COLOR,
+    strokeWidth: 0,
+    shapeStyle: ShapeStyle.General,
+    roughness: 0,
+    radius: 0,
+    xywh: `[${x},${y},${INERTIA_SIZE.w},${INERTIA_SIZE.h}]`,
+});
+/** Pipeline composite: body rect + handle square (straddling top) + label. */
+function pipeline() {
+    return {
+        label: label(0, 0, 'Pipeline', 'center'),
+        body: {
+            type: 'wardleyNode',
+            kind: 'pipeline',
+            shapeType: 'rect',
+            filled: true,
+            fillColor: PIPELINE_FILL,
+            strokeColor: NODE_STROKE,
+            strokeWidth: NODE_STROKE_WIDTH,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            radius: 0,
+            xywh: `[0,39,${PIPELINE_WIDTH},${PIPELINE_HEIGHT}]`,
+        },
+        handle: {
+            type: 'wardleyNode',
+            kind: 'handle',
+            shapeType: 'rect',
+            filled: true,
+            fillColor: NODE_FILL,
+            strokeColor: NODE_STROKE,
+            strokeWidth: NODE_STROKE_WIDTH,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            radius: 0,
+            xywh: `[${PIPELINE_WIDTH / 2 - HANDLE_SIZE / 2},${39 - HANDLE_SIZE / 2},${HANDLE_SIZE},${HANDLE_SIZE}]`,
+        },
+    };
+}
+/** Market composite: outer circle + 3 inner dots wired in a triangle + label. */
+function market() {
+    const R = MARKET_SIZE / 2;
+    const c = R; // center within the [0,0,MARKET_SIZE,MARKET_SIZE] box
+    const rho = MARKET_DOT_RING;
+    const sin60 = Math.sqrt(3) / 2;
+    const verts = [
+        [0, -rho],
+        [rho * sin60, rho / 2],
+        [-rho * sin60, rho / 2],
+    ];
+    const dotAt = (vx, vy) => node('component', c + vx - MARKET_DOT_SIZE / 2, c + vy - MARKET_DOT_SIZE / 2, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH);
+    const tri = (a, b) => ({
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        stroke: MARKET_LINK_COLOR,
+        strokeStyle: StrokeStyle.Solid,
+        strokeWidth: MARKET_LINK_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.None,
+        source: { id: a },
+        target: { id: b },
+    });
+    return {
+        circle: node('market', 0, 0, MARKET_SIZE, NODE_FILL),
+        d0: dotAt(verts[0][0], verts[0][1]),
+        d1: dotAt(verts[1][0], verts[1][1]),
+        d2: dotAt(verts[2][0], verts[2][1]),
+        t0: tri('d0', 'd1'),
+        t1: tri('d1', 'd2'),
+        t2: tri('d2', 'd0'),
+        label: label(MARKET_SIZE + 8, 2, 'Market'),
+    };
+}
+const single = (el) => ({ a: el });
+const nodeWithLabel = (kind, d, fill, name) => ({
+    n: node(kind, 0, 0, d, fill),
+    l: label(d + 8, d / 2 - 13, name),
+});
+const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
+const bgPreview = (extra = '') => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/><path d="M44 12 V64 M68 12 V64 M94 12 V64" stroke="#9aa0a6" stroke-width="0.8"/>${extra}</svg>`;
+const dotPreview = (fill, sw = 2) => `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="#1f2328" stroke-width="${sw}"/></svg>`;
+function tpl(name, preview, elements) {
+    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+}
+export const wardleyTemplateCategory = {
+    name: 'Wardley',
+    templates: [
+        ...wardleyMaps,
+        tpl('Map background', bgPreview(), { bg: bg('classic') }),
+        tpl('Opportunity gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#eef4fb" opacity="0.6"/>'), { bg: bg('opportunity') }),
+        tpl('Benefit gradient', bgPreview('<rect x="22" y="12" width="98" height="26" fill="#e6eef8" opacity="0.6"/>'), { bg: bg('benefit') }),
+        tpl('Evolution gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#e3e2e4" opacity="0.5"/>'), { bg: bg('evolution-gradient') }),
+        tpl('Component', dotPreview('#ffffff', 1.5), nodeWithLabel('component', NODE_SIZE, NODE_FILL, 'Component')),
+        tpl('Anchor', `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="36" r="3.5" fill="#1f2328"/><path d="M59 48 q8 -9 16 0" stroke="#1f2328" stroke-width="1.5" fill="none"/></svg>`, nodeWithLabel('anchor', NODE_SIZE, NODE_FILL, 'Anchor')),
+        tpl('Ecosystem', `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="40" r="11" fill="none" stroke="#1f2328"/><circle cx="67" cy="40" r="5" fill="#fff" stroke="#1f2328"/></svg>`, nodeWithLabel('ecosystem', ECOSYSTEM_SIZE, NODE_FILL, 'Ecosystem')),
+        tpl('Method', `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#d9d9d9" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="40" r="7" fill="#fff" stroke="#1f2328"/></svg>`, nodeWithLabel('method', METHOD_SIZE, METHOD_FILL, 'Component')),
+        tpl('Pipeline', `<svg ${ATTRS} fill="none"><rect x="34" y="40" width="66" height="14" fill="#fff" stroke="#1f2328"/><rect x="60" y="33" width="14" height="14" fill="#fff" stroke="#1f2328"/></svg>`, pipeline()),
+        tpl('Market', `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="16" fill="#fff" stroke="#1f2328"/><circle cx="67" cy="30" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="75" cy="46" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="59" cy="46" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><path d="M67 30 L75 46 L59 46 Z" stroke="#1f2328" stroke-width="0.8" fill="none"/></svg>`, market()),
+        tpl('Inertia', `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="#1f2328"/></svg>`, single(inertia())),
+        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, single(connect({ position: [0, 0] }, { position: [160, 0] }))),
+        tpl('Evolution arrow', `<svg ${ATTRS} fill="none"><path d="M24 40 H100" stroke="#d6455d" stroke-width="2.4" stroke-dasharray="6 4"/><path d="M98 33 L112 40 L98 47 Z" fill="#d6455d"/></svg>`, single(connect({ position: [0, 0] }, { position: [160, 0] }, { red: true }))),
+    ],
+};
+//# sourceMappingURL=index.js.map

package/dist/templates/maps.d.ts

@@ -0,0 +1,3 @@
+import { type Template } from '@formicoidea/labre-core/gfx/template';
+export declare const wardleyMaps: Template[];
+//# sourceMappingURL=maps.d.ts.map

package/dist/templates/maps.js

@@ -0,0 +1,247 @@
+import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { INERTIA_COLOR, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts';
+/**
+ * Authoring kit for canonical Wardley maps. Positions are given as
+ * (evolution 0..1, value 0..1) and mapped into the plot interior of a fixed
+ * 1600x900 background. Per the composition principle, every glyph reuses an
+ * existing shape: stakeholders/users are anchor (person) nodes, "needs" are
+ * thick-stroked component nodes, capabilities are component nodes, notes are
+ * native rects + text, inertia is the inertia bar, and the future / evolution
+ * arrow is the red dashed connector. Legends are produced by the editor's
+ * auto-legend action rather than baked into the template.
+ */
+const W = 1600;
+const H = 900;
+const PL = { x: 70, y: 56, w: 1470, h: 786 };
+const ex = (e) => PL.x + e * PL.w;
+const vy = (v) => PL.y + (1 - v) * PL.h;
+const D = NODE_SIZE; // 18
+const bg = (variant = 'classic') => ({ type: 'wardley', variant, xywh: `[0,0,${W},${H}]` });
+function dot(e, v, sw, stroke = NODE_STROKE, fill = NODE_FILL) {
+    const cx = ex(e);
+    const cy = vy(v);
+    return {
+        type: 'wardleyNode',
+        kind: 'component',
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: fill,
+        strokeColor: stroke,
+        strokeWidth: sw,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${cx - D / 2},${cy - D / 2},${D},${D}]`,
+    };
+}
+const comp = (e, v) => dot(e, v, 1);
+const future = (e, v) => dot(e, v, 2, WARDLEY_RED);
+function stake(e, v) {
+    const cx = ex(e);
+    const cy = vy(v);
+    const d = 24;
+    return {
+        type: 'wardleyNode',
+        kind: 'anchor',
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: NODE_FILL,
+        strokeColor: NODE_STROKE,
+        strokeWidth: 1,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${cx - d / 2},${cy - d / 2},${d},${d}]`,
+    };
+}
+function lbl(e, v, text, o = {}) {
+    const cx = ex(e);
+    const cy = vy(v);
+    const w = o.w ?? 200;
+    const dx = o.dx ?? 12;
+    const dy = o.dy ?? -10;
+    const align = o.align ?? 'left';
+    const x = align === 'right' ? cx - w - dx : align === 'center' ? cx - w / 2 : cx + dx;
+    return {
+        type: 'text',
+        text: surfaceText(text),
+        color: o.color ?? NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: o.size ?? LABEL_FONT_SIZE,
+        textAlign: align === 'right' ? TextAlign.Right : align === 'center' ? TextAlign.Center : TextAlign.Left,
+        xywh: `[${x},${cy + dy},${w},26]`,
+    };
+}
+function link(a, b, o = {}) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        stroke: o.red ? WARDLEY_RED : LINK_GREY,
+        strokeStyle: o.arrow ? StrokeStyle.Dash : StrokeStyle.Solid,
+        strokeWidth: LINK_STROKE_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: o.arrow ? PointStyle.Triangle : PointStyle.None,
+        source: { id: a },
+        target: { id: b },
+    };
+}
+function inertia(e, v) {
+    const cx = ex(e);
+    const cy = vy(v);
+    return {
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: INERTIA_COLOR,
+        strokeColor: INERTIA_COLOR,
+        strokeWidth: 0,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        xywh: `[${cx - 4},${cy - 22},8,44]`,
+    };
+}
+function panel(x, y, w, h) {
+    return {
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: '#ffffff',
+        strokeColor: NODE_STROKE,
+        strokeWidth: 1.2,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
+}
+function freeText(x, y, w, str, size = 16, color = NODE_STROKE) {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color,
+        fontFamily: FontFamily.Inter,
+        fontSize: size,
+        textAlign: TextAlign.Left,
+        xywh: `[${x},${y},${w},26]`,
+    };
+}
+/** Centred, enlarged map title spanning the plot width. */
+function title(str) {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color: NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: 28,
+        textAlign: TextAlign.Center,
+        xywh: `[${W / 2 - 500},12,1000,40]`,
+    };
+}
+const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
+const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
+function tpl(name, preview, elements) {
+    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+}
+function ann(e, v) {
+    const cx = ex(e);
+    const cy = vy(v);
+    return {
+        type: 'shape',
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: '#ffffff',
+        strokeColor: NODE_STROKE,
+        strokeWidth: 1.5,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${cx - 14},${cy - 14},28,28]`,
+    };
+}
+function annTxt(e, v, n) {
+    const cx = ex(e);
+    const cy = vy(v);
+    return {
+        type: 'text',
+        text: surfaceText(n),
+        color: NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: 14,
+        textAlign: TextAlign.Center,
+        xywh: `[${cx - 14},${cy - 9},28,20]`,
+    };
+}
+// ── Tea Shop (the canonical map) ──────────────────────────────────────
+function teaShop() {
+    return {
+        bg: bg(),
+        title: title('Tea Shop'),
+        annBox: panel(120, 200, 420, 64),
+        annText: freeText(132, 208, 400, 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known', 13),
+        business: stake(0.62, 0.93),
+        businessL: lbl(0.62, 0.93, 'Business', { align: 'center', dy: -28, w: 120 }),
+        public: stake(0.78, 0.93),
+        publicL: lbl(0.78, 0.93, 'Public', { align: 'center', dy: -28, w: 120 }),
+        cupOfTea: comp(0.62, 0.74),
+        cupOfTeaL: lbl(0.62, 0.74, 'Cup of Tea', { align: 'right' }),
+        cup: comp(0.8, 0.7),
+        cupL: lbl(0.8, 0.7, 'Cup'),
+        tea: comp(0.83, 0.6),
+        teaL: lbl(0.83, 0.6, 'Tea'),
+        hotWater: comp(0.8, 0.47),
+        hotWaterL: lbl(0.8, 0.47, 'Hot Water'),
+        water: comp(0.81, 0.34),
+        waterL: lbl(0.81, 0.34, 'Water'),
+        kettle: comp(0.36, 0.38),
+        kettleL: lbl(0.36, 0.38, 'Kettle', { align: 'right', dy: 6 }),
+        electric: future(0.56, 0.38),
+        electricL: lbl(0.56, 0.38, 'Electric Kettle'),
+        power: comp(0.7, 0.1),
+        powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
+        powerFut: future(0.88, 0.1),
+        powerFutL: lbl(0.88, 0.1, 'Power'),
+        limitedBy: lbl(0.56, 0.43, 'limited by', { align: 'center', w: 120, size: 13 }),
+        ann1a: ann(0.5, 0.385), ann1t: annTxt(0.5, 0.385, '1'),
+        ann2a: ann(0.84, 0.45), ann2t: annTxt(0.84, 0.45, '2'),
+        l1: link('business', 'cupOfTea'),
+        l2: link('public', 'cupOfTea'),
+        l3: link('cupOfTea', 'cup'),
+        l4: link('cupOfTea', 'tea'),
+        l5: link('cupOfTea', 'hotWater'),
+        l6: link('hotWater', 'water'),
+        l7: link('hotWater', 'kettle'),
+        l8: link('kettle', 'power'),
+        a1: link('kettle', 'electric', { red: true, arrow: true }),
+        a2: link('power', 'powerFut', { red: true, arrow: true }),
+    };
+}
+// ── Kodak inertia (2005) ──────────────────────────────────────────────
+function kodak() {
+    return {
+        bg: bg(),
+        title: title("Wardley map of Kodak's 2005 inertia to digital"),
+        user: stake(0.54, 0.92),
+        userL: lbl(0.54, 0.92, 'User'),
+        capture: dot(0.53, 0.8, 3),
+        captureL: lbl(0.53, 0.8, 'Capture a moment'),
+        film: comp(0.52, 0.62),
+        filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
+        digital: future(0.74, 0.62),
+        digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
+        roll: comp(0.52, 0.4),
+        rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
+        storage: future(0.84, 0.4),
+        storageL: lbl(0.84, 0.4, 'Digital storage', { color: WARDLEY_RED }),
+        inertiaBar: inertia(0.78, 0.4),
+        l1: link('user', 'capture'),
+        l2: link('capture', 'film'),
+        l3: link('film', 'roll'),
+        r1: link('capture', 'storage', { red: true }),
+        a1: link('film', 'digital', { red: true, arrow: true }),
+        a2: link('roll', 'storage', { red: true, arrow: true }),
+    };
+}
+export const wardleyMaps = [
+    tpl('Tea Shop', mapPreview('<circle cx="78" cy="24" r="3" fill="#fff" stroke="#1f2328"/><circle cx="50" cy="44" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="92" cy="58" r="3" fill="#fff" stroke="#1f2328"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="#666"/><path d="M50 44 h22" stroke="#d6455d" stroke-dasharray="3 2"/>'), teaShop()),
+    tpl('Kodak inertia', mapPreview('<circle cx="56" cy="22" r="3" fill="#fff" stroke="#1f2328"/><circle cx="54" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#d6455d"/><rect x="76" y="35" width="2.5" height="11" fill="#1f2328"/><path d="M57 40 h17" stroke="#d6455d" stroke-dasharray="3 2"/>'), kodak()),
+];
+//# sourceMappingURL=maps.js.map

package/dist/toolbar/config.d.ts

@@ -0,0 +1,75 @@
+import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type TemplateResult } from 'lit';
+export declare const wardleyToolbarConfig: {
+    readonly actions: [{
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        when: boolean | ((ctx: ToolbarContext) => boolean);
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
+    }, {
+        readonly id: "b.evolution";
+        readonly actions: [{
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }, {
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }, {
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }, {
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }, {
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }];
+    }, {
+        readonly id: "c.value-chain";
+        readonly actions: [{
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }, {
+            id: string;
+            tooltip: string;
+            icon: TemplateResult;
+            when: boolean | ((ctx: ToolbarContext) => boolean);
+            active(ctx: ToolbarContext): boolean;
+            run(ctx: ToolbarContext): void;
+        }];
+    }, {
+        readonly id: "d.legend";
+        readonly tooltip: "Generate the legend (components present)";
+        readonly icon: TemplateResult<2>;
+        readonly run: (ctx: ToolbarContext) => void;
+    }];
+    readonly when: (ctx: ToolbarContext) => boolean;
+};
+export declare const wardleyToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=config.d.ts.map