@formicoidea/labre-framework-wardley 0.23.2 → 0.23.3

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,4 @@ 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>`;

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

@@ -0,0 +1 @@
+export declare const wardleyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;

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

@@ -1,28 +1,20 @@
-import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type ToolbarModuleConfig,
-  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
- * 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.
- */
-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;
-
-export const wardleyNodeToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
-  config: wardleyNodeToolbarConfig,
-});
+import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
+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
+ * 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.
+ */
+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,
+};
+export const wardleyNodeToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
+    config: wardleyNodeToolbarConfig,
+});

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

@@ -0,0 +1 @@
+export declare const wardleySeniorTool: import("@formicoidea/labre-core/store").ExtensionType;

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

@@ -1,11 +1,10 @@
-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
+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
       .edgeless=${block}
-    ></edgeless-wardley-senior-button>`,
-  };
-});
+    ></edgeless-wardley-senior-button>`,
+    };
+});

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

@@ -0,0 +1,52 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessWardleyMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-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 {};