@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/toolbar/config.js

@@ -0,0 +1,206 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+import { TelemetryProvider, ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html } from 'lit';
+import { createWardleyLegend } from '../legend';
+import { wardleyLegendIcon } from './icons';
+const ResizeIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+/** Gradient swatch — show/hide the variant gradient. */
+const GradientIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <linearGradient id="wardleyToolbarGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="currentColor" stop-opacity="0.85" />
+      <stop offset="1" stop-color="currentColor" stop-opacity="0.1" />
+    </linearGradient>
+  </defs>
+  <rect
+    x="4"
+    y="5"
+    width="16"
+    height="14"
+    rx="2"
+    fill="url(#wardleyToolbarGrad)"
+    stroke="currentColor"
+    stroke-width="1.4"
+  />
+</svg>`;
+/** Horizontal axis with a right-pointing arrow (Evolution / X). */
+const XAxisIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 17h15" />
+  <path d="M15 14l3 3-3 3" />
+</svg>`;
+/** Vertical axis with an up-pointing arrow (Value Chain / Y). */
+const YAxisIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M7 21V6" />
+  <path d="M4 9l3-3 3 3" />
+</svg>`;
+/** Dashed vertical column dividers. */
+const ColumnsIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-dasharray="3 3"
+>
+  <path d="M9 4v16M15 4v16" />
+</svg>`;
+/** Column labels (short bars under the columns). */
+const ColumnLabelsIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  stroke="none"
+>
+  <rect x="3" y="15" width="4.5" height="3" rx="1" />
+  <rect x="9.75" y="15" width="4.5" height="3" rx="1" />
+  <rect x="16.5" y="15" width="4.5" height="3" rx="1" />
+</svg>`;
+/** Corner labels (Uncharted / Industrialized, top corners). */
+const CornerLabelsIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  stroke="none"
+>
+  <rect x="3" y="5" width="6" height="3" rx="1" />
+  <rect x="15" y="5" width="6" height="3" rx="1" />
+</svg>`;
+/** Visibility labels (Visible / Invisible) — an eye. */
+const VisibilityIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z" />
+  <circle cx="12" cy="12" r="2.4" />
+</svg>`;
+/**
+ * Build a toolbar toggle that flips a boolean flag on every selected Wardley
+ * background: `active` reflects the current state, `run` flips it (with an
+ * undo checkpoint). An optional `when` predicate hides the button.
+ */
+function booleanToggle(id, tooltip, icon, prop, when) {
+    return {
+        id,
+        tooltip,
+        icon,
+        when: when ?? true,
+        active(ctx) {
+            const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+            return models.length > 0 && models.every(model => model[prop]);
+        },
+        run(ctx) {
+            const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+            if (!models.length)
+                return;
+            const enable = !models.every(model => model[prop]);
+            ctx.std.store.captureSync();
+            const crud = ctx.std.get(EdgelessCRUDIdentifier);
+            for (const model of models) {
+                crud.updateElement(model.id, { [prop]: enable });
+            }
+        },
+    };
+}
+export const wardleyToolbarConfig = {
+    actions: [
+        booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+        // Group 1 — evolution (X) side: axis, phase labels, columns, corner
+        // labels, and the gradient toggle.
+        {
+            id: 'b.evolution',
+            actions: [
+                booleanToggle('b.1-axis-x', 'Evolution axis (X)', XAxisIcon, 'showXAxis'),
+                booleanToggle('b.2-column-labels', 'Evolution phase labels', ColumnLabelsIcon, 'showColumnLabels'),
+                booleanToggle('b.3-columns', 'Columns (dividers)', ColumnsIcon, 'showColumnDividers'),
+                booleanToggle('b.4-corner-labels', 'Labels Uncharted / Industrialized', CornerLabelsIcon, 'showCornerLabels'),
+                // Only relevant when the selection has a gradient variant.
+                booleanToggle('b.5-gradient', 'Show / hide the gradient', GradientIcon, 'showGradient', ctx => ctx
+                    .getSurfaceModelsByType(WardleyBackgroundElementModel)
+                    .some(model => model.variant !== 'classic')),
+            ],
+        },
+        // Group 2 — value-chain (Y) side: axis and Visible/Invisible labels.
+        {
+            id: 'c.value-chain',
+            actions: [
+                booleanToggle('c.1-axis-y', 'Value Chain axis (Y)', YAxisIcon, 'showYAxis'),
+                booleanToggle('c.2-visibility-labels', 'Labels Visible / Invisible', VisibilityIcon, 'showVisibilityLabels'),
+            ],
+        },
+        // Generate the auto-legend from the components present inside this
+        // background's perimeter (+ a gradient-meaning block for gradient variants).
+        {
+            id: 'd.legend',
+            tooltip: 'Generate the legend (components present)',
+            icon: wardleyLegendIcon,
+            run(ctx) {
+                const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+                const bg = models[0];
+                if (!bg)
+                    return;
+                createWardleyLegend(ctx.std, bg);
+                ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
+                    framework: 'wardley',
+                    element: 'legend',
+                    page: 'whiteboard editor',
+                    segment: 'element toolbar',
+                    module: 'wardley toolbar',
+                });
+            },
+        },
+    ],
+    when: ctx => ctx.getSurfaceModelsByType(WardleyBackgroundElementModel).length > 0,
+};
+export const wardleyToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:wardley'),
+    config: wardleyToolbarConfig,
+});
+//# sourceMappingURL=config.js.map

package/dist/toolbar/icons.d.ts

@@ -0,0 +1,31 @@
+/** Colored Wardley glyph (mockup proposal B) for the main toolbar button. */
+export declare const wardleyToolbarIcon: import("lit-html").TemplateResult<2>;
+/** Monochrome glyph for the "create background" menu item (uses currentColor). */
+export declare const wardleyBackgroundIcon: import("lit-html").TemplateResult<2>;
+/** Component node (validated COMP-C2): single circle. */
+export declare const wardleyComponentIcon: import("lit-html").TemplateResult<2>;
+/** Anchor (validated ANCH-B): person glyph inscribed in a circle. */
+export declare const wardleyAnchorIcon: import("lit-html").TemplateResult<2>;
+/** Dependency link (validated LINK-A3): two outline nodes joined by a line. */
+export declare const wardleyLinkIcon: import("lit-html").TemplateResult<2>;
+/** Evolution arrow (validated ARR-B): red dashed arrow. */
+export declare const wardleyArrowIcon: import("lit-html").TemplateResult<2>;
+/** Inertia (validated INER): black bar barring the red dashed arrow. */
+export declare const wardleyInertiaIcon: import("lit-html").TemplateResult<2>;
+/** Pipeline (validated PIPE-D): wide thin rect + square handle astride the top edge, thin borders. */
+export declare const wardleyPipelineIcon: import("lit-html").TemplateResult<2>;
+/** Market (validated MKT-B): thin outer circle + 3 thick-bordered nodes wired in a triangle. */
+export declare const wardleyMarketIcon: import("lit-html").TemplateResult<2>;
+/** Ecosystem (validated ECO-A): double border at the rim + hatching confined to the inner donut + hollow center. */
+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>;
+/** 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. */
+export declare const wardleyOpportunityIcon: import("lit-html").TemplateResult<2>;
+/** Benefit/Investment gradient background: axes + zero line + green J-curve. */
+export declare const wardleyBenefitIcon: import("lit-html").TemplateResult<2>;
+/** Evolution-gradient background (Wardley's S-curve presentation): grey at both edges fading to white center. */
+export declare const wardleyEvolutionGradientIcon: import("lit-html").TemplateResult<2>;
+//# sourceMappingURL=icons.d.ts.map

package/{src/toolbar/icons.ts → dist/toolbar/icons.js}

@@ -1,7 +1,6 @@
-import { svg } from 'lit';
-
-/** Colored Wardley glyph (mockup proposal B) for the main toolbar button. */
-export const wardleyToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { svg } from 'lit';
+/** Colored Wardley glyph (mockup proposal B) for the main toolbar button. */
+export const wardleyToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="wardley-evo" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
@@ -22,71 +21,61 @@ export const wardleyToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0
     <circle cx="27" cy="16.5" r="2.6" fill="#e2a32b"/>
     <circle cx="24" cy="26" r="2.6" fill="#d6455d"/>
   </svg>
-</svg>`;
-
-/** Monochrome glyph for the "create background" menu item (uses currentColor). */
-export const wardleyBackgroundIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Monochrome glyph for the "create background" menu item (uses currentColor). */
+export const wardleyBackgroundIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M6 4 V19 H21" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M6 2.6 L3.8 6 H8.2 Z" fill="currentColor"/>
   <path d="M22.4 19 L19 16.8 V21.2 Z" fill="currentColor"/>
   <line x1="11" y1="6" x2="11" y2="19" stroke="currentColor" stroke-width="0.9" stroke-dasharray="1.8 1.8" opacity="0.6"/>
   <line x1="16" y1="6" x2="16" y2="19" stroke="currentColor" stroke-width="0.9" stroke-dasharray="1.8 1.8" opacity="0.6"/>
-</svg>`;
-
-/** Wardley red — matches the renderer presets (consts WARDLEY_RED). */
-const RED = '#d6455d';
-/** Gradient green — matches gradient.ts GRADIENT_GREEN. */
-const GREEN = '#1f9e4d';
-
-/** Component node (validated COMP-C2): single circle. */
-export const wardleyComponentIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Wardley red — matches the renderer presets (consts WARDLEY_RED). */
+const RED = '#d6455d';
+/** Gradient green — matches gradient.ts GRADIENT_GREEN. */
+const GREEN = '#1f9e4d';
+/** Component node (validated COMP-C2): single circle. */
+export const wardleyComponentIcon = 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="6.3" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
-</svg>`;
-
-/** Anchor (validated ANCH-B): person glyph inscribed in a circle. */
-export const wardleyAnchorIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Anchor (validated ANCH-B): person glyph inscribed in a circle. */
+export const wardleyAnchorIcon = 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="6" fill="#fff" stroke="currentColor" stroke-width="1.6"/>
   <circle cx="12" cy="9.4" r="1.8" fill="none" stroke="currentColor" stroke-width="1.3"/>
   <path d="M7.4 15.9 C 8.2 12.1, 15.8 12.1, 16.6 15.9" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
-</svg>`;
-
-/** Dependency link (validated LINK-A3): two outline nodes joined by a line. */
-export const wardleyLinkIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Dependency link (validated LINK-A3): two outline nodes joined by a line. */
+export const wardleyLinkIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <line x1="5.5" y1="16" x2="18.5" y2="8" stroke="currentColor" stroke-width="1.8"/>
   <circle cx="5.5" cy="16" r="2.2" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
   <circle cx="18.5" cy="8" r="2.2" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
-</svg>`;
-
-/** Evolution arrow (validated ARR-B): red dashed arrow. */
-export const wardleyArrowIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Evolution arrow (validated ARR-B): red dashed arrow. */
+export const wardleyArrowIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <line x1="4.5" y1="12" x2="16" y2="12" stroke="${RED}" stroke-width="1.7" stroke-dasharray="2.4 2.2" stroke-linecap="round"/>
   <path d="M14.5 7.8 L20 12 L14.5 16.2 Z" fill="${RED}"/>
-</svg>`;
-
-/** Inertia (validated INER): black bar barring the red dashed arrow. */
-export const wardleyInertiaIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Inertia (validated INER): black bar barring the red dashed arrow. */
+export const wardleyInertiaIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <line x1="3.5" y1="12" x2="16.5" y2="12" stroke="${RED}" stroke-width="1.7" stroke-dasharray="2.4 2.2" stroke-linecap="round"/>
   <path d="M15 7.8 L20.5 12 L15 16.2 Z" fill="${RED}"/>
   <rect x="9.6" y="5.4" width="2.9" height="13.2" rx="0.6" fill="currentColor"/>
-</svg>`;
-
-/** Pipeline (validated PIPE-D): wide thin rect + square handle astride the top edge, thin borders. */
-export const wardleyPipelineIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Pipeline (validated PIPE-D): wide thin rect + square handle astride the top edge, thin borders. */
+export const wardleyPipelineIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="11" width="17" height="7" rx="1" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
   <rect x="10" y="9" width="4" height="4" rx="0.6" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
-</svg>`;
-
-/** Market (validated MKT-B): thin outer circle + 3 thick-bordered nodes wired in a triangle. */
-export const wardleyMarketIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Market (validated MKT-B): thin outer circle + 3 thick-bordered nodes wired in a triangle. */
+export const wardleyMarketIcon = 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="9.6" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
   <path d="M12 6.6 L7.3 14.7 H16.7 Z" fill="none" stroke="currentColor" stroke-width="1.1"/>
   <circle cx="12" cy="6.6" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
   <circle cx="7.3" cy="14.7" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
   <circle cx="16.7" cy="14.7" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
-</svg>`;
-
-/** Ecosystem (validated ECO-A): double border at the rim + hatching confined to the inner donut + hollow center. */
-export const wardleyEcosystemIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Ecosystem (validated ECO-A): double border at the rim + hatching confined to the inner donut + hollow center. */
+export const wardleyEcosystemIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs><clipPath id="ecoHatch"><path d="M12 3.8 a8.2 8.2 0 1 0 0.001 0 Z M12 7.8 a4.2 4.2 0 1 1 -0.001 0 Z" clip-rule="evenodd"/></clipPath></defs>
   <circle cx="12" cy="12" r="9.8" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
   <g clip-path="url(#ecoHatch)" stroke="currentColor" stroke-width="0.6">
@@ -103,16 +92,14 @@ export const wardleyEcosystemIcon = svg`<svg width="24" height="24" viewBox="0 0
   </g>
   <circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="0.8"/>
   <circle cx="12" cy="12" r="4.2" fill="#fff" stroke="currentColor" stroke-width="1"/>
-</svg>`;
-
-/** Component + method (validated METH-A): component inscribed in a colored outer circle (default grey). */
-export const wardleyMethodIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Component + method (validated METH-A): component inscribed in a colored outer circle (default grey). */
+export const wardleyMethodIcon = 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="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>`;
-
-/** 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">
+</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"/>
   <circle cx="6.6" cy="8" r="1.4" fill="currentColor"/>
   <line x1="9.6" y1="8" x2="18" y2="8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
@@ -120,24 +107,21 @@ export const wardleyLegendIcon = svg`<svg width="24" height="24" viewBox="0 0 24
   <line x1="9.6" y1="12" x2="18" y2="12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
   <circle cx="6.6" cy="16" r="1.4" fill="currentColor"/>
   <line x1="9.6" y1="16" x2="15" y2="16" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-</svg>`;
-
-/** Opportunity gradient background: axes + green differential hump + red operational bump. */
-export const wardleyOpportunityIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Opportunity gradient background: axes + green differential hump + red operational bump. */
+export const wardleyOpportunityIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M4 20V4M4 20h16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
   <path d="M5 12 C6 7, 8.5 7, 9.5 11 C11 17, 14 19, 18 20" stroke="${GREEN}" stroke-width="1.7" fill="none" stroke-linecap="round"/>
   <path d="M14.5 19.5 C15.5 16.5, 17 16.5, 18 19" stroke="${RED}" stroke-width="1.7" fill="none" stroke-linecap="round"/>
-</svg>`;
-
-/** Benefit/Investment gradient background: axes + zero line + green J-curve. */
-export const wardleyBenefitIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Benefit/Investment gradient background: axes + zero line + green J-curve. */
+export const wardleyBenefitIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M4 20V4M4 20h16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
   <line x1="4" y1="14" x2="20" y2="14" stroke="currentColor" stroke-width="0.9" opacity="0.45"/>
   <path d="M5 17 C6 18.5, 7 18.5, 8 15 C9.5 9, 12 5.5, 13.5 8 C16 12, 18 14, 20 14.5" stroke="${GREEN}" stroke-width="1.7" fill="none" stroke-linecap="round"/>
-</svg>`;
-
-/** Evolution-gradient background (Wardley's S-curve presentation): grey at both edges fading to white center. */
-export const wardleyEvolutionGradientIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Evolution-gradient background (Wardley's S-curve presentation): grey at both edges fading to white center. */
+export const wardleyEvolutionGradientIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="wardleyGreyU" x1="0" y1="0" x2="1" y2="0">
       <stop offset="0" stop-color="#9aa0a6"/>
@@ -147,4 +131,5 @@ export const wardleyEvolutionGradientIcon = svg`<svg width="24" height="24" view
     </linearGradient>
   </defs>
   <rect x="4" y="4.5" width="16" height="15" rx="2" fill="url(#wardleyGreyU)" stroke="currentColor" stroke-width="1.2"/>
-</svg>`;
+</svg>`;
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1,2 @@
+export declare const wardleyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=node-config.d.ts.map

package/{src/toolbar/node-config.ts → dist/toolbar/node-config.js}

@@ -1,10 +1,6 @@
 import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@formicoidea/labre-core/shared/services';
+import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-
 /**
  * Wardley nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
  * actions (which target `getSurfaceModelsByType(ShapeElementModel)`) operate on
@@ -14,15 +10,12 @@ import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
  * text, edit vertices) that don't make sense for a Wardley node.
  */
 const KEEP_ACTION_IDS = new Set(['e.color', 'd.style']);
-
 const wardleyNodeToolbarConfig = {
-  actions: shapeToolbarConfig.actions.filter(action =>
-    KEEP_ACTION_IDS.has(action.id)
-  ),
-  when: shapeToolbarConfig.when,
-} as ToolbarModuleConfig;
-
+    actions: shapeToolbarConfig.actions.filter(action => KEEP_ACTION_IDS.has(action.id)),
+    when: shapeToolbarConfig.when,
+};
 export const wardleyNodeToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
-  config: wardleyNodeToolbarConfig,
+    id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
+    config: wardleyNodeToolbarConfig,
 });
+//# sourceMappingURL=node-config.js.map

package/dist/toolbar/senior-tool.d.ts

@@ -0,0 +1,2 @@
+export declare const wardleySeniorTool: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=senior-tool.d.ts.map

package/{src/toolbar/senior-tool.ts → dist/toolbar/senior-tool.js}

@@ -1,11 +1,11 @@
 import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { html } from 'lit';
-
 export const wardleySeniorTool = SeniorToolExtension('wardley', ({ block }) => {
-  return {
-    name: 'Wardley map',
-    content: html`<edgeless-wardley-senior-button
+    return {
+        name: 'Wardley map',
+        content: html `<edgeless-wardley-senior-button
       .edgeless=${block}
     ></edgeless-wardley-senior-button>`,
-  };
+    };
 });
+//# sourceMappingURL=senior-tool.js.map

package/dist/toolbar/wardley-menu.d.ts

@@ -0,0 +1,53 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessWardleyMenu_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * The popover that opens above the toolbar for the Wardley toolbox. Each item
+ * creates a pre-formatted Wardley object. Nodes (component / anchor) are a
+ * native ellipse + a native text label, grouped together.
+ */
+export declare class EdgelessWardleyMenu extends EdgelessWardleyMenu_base {
+    static styles: import("lit").CSSResult;
+    type: typeof EmptyTool;
+    private _createBackground;
+    /** Add a native ellipse wardley node centred on (cx, cy). */
+    private _addEllipseNode;
+    /** Add a native free-text label (same Inter family as the axis labels). */
+    private _addLabel;
+    /** Group elements; returns the group id (or the first id if grouping failed). */
+    private _group;
+    /**
+     * Create a single-circle node (component / anchor / ecosystem / method):
+     * one connectable native ellipse + a label to its right, grouped so they
+     * move together (enter the group to reposition / edit the label).
+     */
+    private _createNode;
+    private _createInertia;
+    /**
+     * Create a pipeline: a wide thin native rect body (white semi-transparent,
+     * NON-connectable) + a node-sized square handle straddling its top edge (the
+     * only connection point, center anchor) + a native text label. The handle and
+     * label are grouped, then grouped again with the body so the whole pipeline
+     * moves as one. Pure composition of native elements — no custom type / view.
+     */
+    private _createPipeline;
+    /**
+     * Create a market: a large thin-bordered circle (the connectable market node)
+     * containing 3 small thick-bordered component nodes wired into a triangle by
+     * native attached connectors (thin, dark, no arrows — they auto-route between
+     * the node centers and follow on move/resize). A label sits to the right and
+     * everything is grouped into one object.
+     */
+    private _createMarket;
+    /**
+     * Activate the native connector tool, pre-styled for a Wardley link (grey,
+     * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
+     * user then draws from one node to another (endpoints attach to centers).
+     */
+    private _activateConnector;
+    private _finish;
+    private _track;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=wardley-menu.d.ts.map