@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/consts.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Visual constants for the Wardley map background.
+ *
+ * Mirrors the relevant subset of
+ * `../wardley-map-renderer/src/blocks/wardley-map/wardley-map-consts.ts`
+ * and the validated mockup `../wardley-mockups/C-edgeless.html`.
+ *
+ * IMPORTANT: every size below is in **model units and FIXED** — fonts, margins,
+ * offsets and stroke widths do NOT scale with the element size. Only the plot
+ * interior (axis/divider positions, band rects) scales with the element's
+ * width/height. This keeps the labels readable at a constant size (18) no
+ * matter how large the background is enlarged.
+ */
+/** Reference / fallback element width (16:9 — the height is derived). */
+export declare const REF_WIDTH = 1600;
+/** Fixed inner margins (sized to hold the fixed-size labels). */
+export declare const MARGIN: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/** Fixed font sizes (the prominent labels are 18). */
+export declare const FONTS: {
+    phase: number;
+    axis: number;
+    direction: number;
+    visibility: number;
+};
+/** Fixed label offsets relative to the plot edges. */
+export declare const OFFSETS: {
+    phaseBaseline: number;
+    phasePad: number;
+    yHug: number;
+    directionTop: number;
+    directionPadLeft: number;
+    directionPadRight: number;
+    evolutionPadRight: number;
+    visibleTop: number;
+    invisibleBottom: number;
+};
+/** Fixed stroke widths + decorations. */
+export declare const LINE: {
+    axis: number;
+    divider: number;
+    card: number;
+};
+export declare const ARROW = 11;
+export declare const CARD_RADIUS = 10;
+/** Evolution phase boundary ratios (interior dividers). */
+export declare const EVOLUTION_BOUNDARIES: readonly [0.175, 0.4, 0.7];
+/** Ordered phases: [label, startRatio]. */
+export declare const EVOLUTION_PHASES: ReadonlyArray<readonly [string, number]>;
+export declare const AXIS_LABELS: {
+    xAxis: string;
+    yAxis: string;
+    evolutionStart: string;
+    evolutionEnd: string;
+    visibilityHigh: string;
+    visibilityLow: string;
+};
+/** Colors (light theme, faithful to the reference renderer / mockup C). */
+export declare const COLORS: {
+    card: string;
+    cardBorder: string;
+    axis: string;
+    divider: string;
+    label: string;
+    band: readonly ["#f7faff", "#eef4fb", "#e6eef8", "#dde8f4"];
+};
+export declare const FONT_FAMILY = "Inter, sans-serif";
+//# sourceMappingURL=consts.d.ts.map

package/{src/consts.ts → dist/consts.js}

@@ -1,72 +1,63 @@
-/**
- * Visual constants for the Wardley map background.
- *
- * Mirrors the relevant subset of
- * `../wardley-map-renderer/src/blocks/wardley-map/wardley-map-consts.ts`
- * and the validated mockup `../wardley-mockups/C-edgeless.html`.
- *
- * IMPORTANT: every size below is in **model units and FIXED** — fonts, margins,
- * offsets and stroke widths do NOT scale with the element size. Only the plot
- * interior (axis/divider positions, band rects) scales with the element's
- * width/height. This keeps the labels readable at a constant size (18) no
- * matter how large the background is enlarged.
- */
-
-/** Reference / fallback element width (16:9 — the height is derived). */
-export const REF_WIDTH = 1600;
-
-/** Fixed inner margins (sized to hold the fixed-size labels). */
-export const MARGIN = { left: 40, right: 30, top: 30, bottom: 38 };
-
-/** Fixed font sizes (the prominent labels are 18). */
-export const FONTS = { phase: 18, axis: 18, direction: 13, visibility: 16 };
-
-/** Fixed label offsets relative to the plot edges. */
-export const OFFSETS = {
-  phaseBaseline: 22, // phase labels & "Evolution" baseline below the X axis
-  phasePad: 6, // gap from each zone start
-  yHug: 9, // rotated Y labels gap (matches the X labels' visual gap)
-  directionTop: 20, // Uncharted/Industrialized baseline below the top
-  directionPadLeft: 14,
-  directionPadRight: 6,
-  evolutionPadRight: 16,
-  visibleTop: 56, // "Visible" y below the top
-  invisibleBottom: 44, // "Invisible" y above the bottom
-};
-
-/** Fixed stroke widths + decorations. */
-export const LINE = { axis: 2, divider: 1.2, card: 1.5 };
-export const ARROW = 11;
-export const CARD_RADIUS = 10;
-
-/** Evolution phase boundary ratios (interior dividers). */
-export const EVOLUTION_BOUNDARIES = [0.175, 0.4, 0.7] as const;
-
-/** Ordered phases: [label, startRatio]. */
-export const EVOLUTION_PHASES: ReadonlyArray<readonly [string, number]> = [
-  ['Genesis', 0],
-  ['Custom-Built', 0.175],
-  ['Product (+Rental)', 0.4],
-  ['Commodity (+Utility)', 0.7],
-];
-
-export const AXIS_LABELS = {
-  xAxis: 'Evolution',
-  yAxis: 'Value Chain',
-  evolutionStart: 'Uncharted',
-  evolutionEnd: 'Industrialized',
-  visibilityHigh: 'Visible',
-  visibilityLow: 'Invisible',
-};
-
-/** Colors (light theme, faithful to the reference renderer / mockup C). */
-export const COLORS = {
-  card: '#ffffff',
-  cardBorder: '#e3e2e4',
-  axis: '#3b3d42',
-  divider: '#9aa0a6',
-  label: '#6b7280',
-  band: ['#f7faff', '#eef4fb', '#e6eef8', '#dde8f4'] as const,
-};
-
-export const FONT_FAMILY = 'Inter, sans-serif';
+/**
+ * Visual constants for the Wardley map background.
+ *
+ * Mirrors the relevant subset of
+ * `../wardley-map-renderer/src/blocks/wardley-map/wardley-map-consts.ts`
+ * and the validated mockup `../wardley-mockups/C-edgeless.html`.
+ *
+ * IMPORTANT: every size below is in **model units and FIXED** — fonts, margins,
+ * offsets and stroke widths do NOT scale with the element size. Only the plot
+ * interior (axis/divider positions, band rects) scales with the element's
+ * width/height. This keeps the labels readable at a constant size (18) no
+ * matter how large the background is enlarged.
+ */
+/** Reference / fallback element width (16:9 — the height is derived). */
+export const REF_WIDTH = 1600;
+/** Fixed inner margins (sized to hold the fixed-size labels). */
+export const MARGIN = { left: 40, right: 30, top: 30, bottom: 38 };
+/** Fixed font sizes (the prominent labels are 18). */
+export const FONTS = { phase: 18, axis: 18, direction: 13, visibility: 16 };
+/** Fixed label offsets relative to the plot edges. */
+export const OFFSETS = {
+    phaseBaseline: 22, // phase labels & "Evolution" baseline below the X axis
+    phasePad: 6, // gap from each zone start
+    yHug: 9, // rotated Y labels gap (matches the X labels' visual gap)
+    directionTop: 20, // Uncharted/Industrialized baseline below the top
+    directionPadLeft: 14,
+    directionPadRight: 6,
+    evolutionPadRight: 16,
+    visibleTop: 56, // "Visible" y below the top
+    invisibleBottom: 44, // "Invisible" y above the bottom
+};
+/** Fixed stroke widths + decorations. */
+export const LINE = { axis: 2, divider: 1.2, card: 1.5 };
+export const ARROW = 11;
+export const CARD_RADIUS = 10;
+/** Evolution phase boundary ratios (interior dividers). */
+export const EVOLUTION_BOUNDARIES = [0.175, 0.4, 0.7];
+/** Ordered phases: [label, startRatio]. */
+export const EVOLUTION_PHASES = [
+    ['Genesis', 0],
+    ['Custom-Built', 0.175],
+    ['Product (+Rental)', 0.4],
+    ['Commodity (+Utility)', 0.7],
+];
+export const AXIS_LABELS = {
+    xAxis: 'Evolution',
+    yAxis: 'Value Chain',
+    evolutionStart: 'Uncharted',
+    evolutionEnd: 'Industrialized',
+    visibilityHigh: 'Visible',
+    visibilityLow: 'Invisible',
+};
+/** Colors (light theme, faithful to the reference renderer / mockup C). */
+export const COLORS = {
+    card: '#ffffff',
+    cardBorder: '#e3e2e4',
+    axis: '#3b3d42',
+    divider: '#9aa0a6',
+    label: '#6b7280',
+    band: ['#f7faff', '#eef4fb', '#e6eef8', '#dde8f4'],
+};
+export const FONT_FAMILY = 'Inter, sans-serif';
+//# sourceMappingURL=consts.js.map

package/dist/descriptor.d.ts

@@ -0,0 +1,7 @@
+import { WardleyViewExtension } from './view.js';
+
+export declare const wardleyFramework: {
+  readonly flag: 'wardley';
+  readonly telemetry: 'wardley';
+  readonly viewExtension: typeof WardleyViewExtension;
+};

package/{src/descriptor.ts → dist/descriptor.js}

@@ -5,4 +5,4 @@ export const wardleyFramework = {
   flag: 'wardley',
   telemetry: 'wardley',
   viewExtension: WardleyViewExtension,
-} as const;
+};

package/dist/effects.d.ts

@@ -0,0 +1,10 @@
+import { EdgelessWardleyMenu } from './toolbar/wardley-menu';
+import { EdgelessWardleySeniorButton } from './toolbar/wardley-senior-button';
+export declare function effects(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'edgeless-wardley-menu': EdgelessWardleyMenu;
+        'edgeless-wardley-senior-button': EdgelessWardleySeniorButton;
+    }
+}
+//# sourceMappingURL=effects.d.ts.map

package/dist/effects.js

@@ -0,0 +1,7 @@
+import { EdgelessWardleyMenu } from './toolbar/wardley-menu';
+import { EdgelessWardleySeniorButton } from './toolbar/wardley-senior-button';
+export function effects() {
+    customElements.define('edgeless-wardley-menu', EdgelessWardleyMenu);
+    customElements.define('edgeless-wardley-senior-button', EdgelessWardleySeniorButton);
+}
+//# sourceMappingURL=effects.js.map

package/dist/element-renderer.d.ts

@@ -0,0 +1,15 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderer for the Wardley map background — reproduces mockup C:
+ * an L-shaped axes frame (no top/right border), dashed evolution dividers and
+ * the symmetric axis labels.
+ *
+ * All sizes (fonts, margins, offsets, strokes) are FIXED model units — they do
+ * not scale with the element size. Only the plot interior scales.
+ */
+export declare const wardley: ElementRenderer<WardleyBackgroundElementModel>;
+export declare const WardleyElementRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<WardleyBackgroundElementModel>>;
+};
+//# sourceMappingURL=element-renderer.d.ts.map

package/dist/element-renderer.js

@@ -0,0 +1,160 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { ARROW, CARD_RADIUS, COLORS, EVOLUTION_BOUNDARIES, FONT_FAMILY, FONTS, LINE, MARGIN, OFFSETS, } from './consts';
+import { BENEFIT_ZERO_FRAC, paintGradientBackground } from './gradient';
+function roundRectPath(ctx, x, y, w, h, r) {
+    const rr = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + rr, y);
+    ctx.arcTo(x + w, y, x + w, y + h, rr);
+    ctx.arcTo(x + w, y + h, x, y + h, rr);
+    ctx.arcTo(x, y + h, x, y, rr);
+    ctx.arcTo(x, y, x + w, y, rr);
+    ctx.closePath();
+}
+/**
+ * Canvas renderer for the Wardley map background — reproduces mockup C:
+ * an L-shaped axes frame (no top/right border), dashed evolution dividers and
+ * the symmetric axis labels.
+ *
+ * All sizes (fonts, margins, offsets, strokes) are FIXED model units — they do
+ * not scale with the element size. Only the plot interior scales.
+ */
+export const wardley = (model, ctx, matrix) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
+    const px0 = MARGIN.left;
+    const px1 = w - MARGIN.right;
+    const py0 = MARGIN.top;
+    const py1 = h - MARGIN.bottom;
+    const pw = px1 - px0;
+    const ph = py1 - py0;
+    const ex = (r) => px0 + r * pw;
+    const line = (x1, y1, x2, y2) => {
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+    };
+    const vtext = (text, x, y, fontSize, color) => {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(-Math.PI / 2);
+        ctx.font = `${fontSize}px ${FONT_FAMILY}`;
+        ctx.fillStyle = color;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
+        ctx.fillText(text, 0, 0);
+        ctx.restore();
+    };
+    // ── Card (element bounds) ───────────────────────────────────────────
+    const inset = LINE.card / 2;
+    roundRectPath(ctx, inset, inset, w - inset * 2, h - inset * 2, CARD_RADIUS);
+    ctx.fillStyle = COLORS.card;
+    ctx.fill();
+    ctx.strokeStyle = COLORS.cardBorder;
+    ctx.lineWidth = LINE.card;
+    ctx.stroke();
+    // ── Curve-driven gradient variants (inscribed in the frame) ─────────
+    // Hidden when `showGradient` is false → plain white background.
+    if (model.variant !== 'classic' && model.showGradient) {
+        paintGradientBackground(ctx, model.variant, px0, px1, py0, py1);
+        if (model.variant === 'benefit') {
+            const zy = py1 - BENEFIT_ZERO_FRAC * ph;
+            ctx.strokeStyle = COLORS.axis;
+            ctx.lineWidth = 1.2;
+            ctx.beginPath();
+            ctx.moveTo(px0, zy);
+            ctx.lineTo(px1, zy);
+            ctx.stroke();
+        }
+    }
+    // ── Optional evolution band tints ───────────────────────────────────
+    if (model.banded) {
+        const starts = [0, 0.175, 0.4, 0.7];
+        const ends = [0.175, 0.4, 0.7, 1];
+        for (let i = 0; i < 4; i++) {
+            ctx.fillStyle = COLORS.band[i];
+            ctx.fillRect(ex(starts[i]), py0, ex(ends[i]) - ex(starts[i]), ph);
+        }
+    }
+    // ── Evolution phase dividers (dashed) ───────────────────────────────
+    if (model.showColumnDividers) {
+        ctx.strokeStyle = COLORS.divider;
+        ctx.lineWidth = LINE.divider;
+        ctx.setLineDash([5, 5]);
+        for (const r of EVOLUTION_BOUNDARIES) {
+            line(ex(r), py0, ex(r), py1);
+        }
+        ctx.setLineDash([]);
+    }
+    // ── Axes (L shape) + arrowheads ─────────────────────────────────────
+    // X and Y axes are independently toggleable. Each line stops at the base of
+    // its arrowhead (1px overlap, hidden under the triangle) so the line never
+    // pokes past the tip on zoom.
+    ctx.strokeStyle = COLORS.axis;
+    ctx.lineWidth = LINE.axis;
+    ctx.fillStyle = COLORS.axis;
+    if (model.showXAxis) {
+        line(px0, py1, px1 - ARROW + 1, py1); // X axis (arrow tip at px1)
+        ctx.beginPath(); // X arrow (points right)
+        ctx.moveTo(px1, py1);
+        ctx.lineTo(px1 - ARROW, py1 - ARROW / 2);
+        ctx.lineTo(px1 - ARROW, py1 + ARROW / 2);
+        ctx.closePath();
+        ctx.fill();
+    }
+    if (model.showYAxis) {
+        line(px0, py1, px0, py0 + ARROW - 1); // Y axis (arrow tip at py0)
+        ctx.beginPath(); // Y arrow (points up)
+        ctx.moveTo(px0, py0);
+        ctx.lineTo(px0 - ARROW / 2, py0 + ARROW);
+        ctx.lineTo(px0 + ARROW / 2, py0 + ARROW);
+        ctx.closePath();
+        ctx.fill();
+    }
+    // ── Horizontal labels ───────────────────────────────────────────────
+    ctx.textBaseline = 'alphabetic';
+    // Phase (column) labels (left-aligned at each zone start)
+    if (model.showColumnLabels) {
+        ctx.font = `${FONTS.phase}px ${FONT_FAMILY}`;
+        ctx.fillStyle = COLORS.label;
+        ctx.textAlign = 'left';
+        const phases = [
+            [model.phase0, 0],
+            [model.phase1, 0.175],
+            [model.phase2, 0.4],
+            [model.phase3, 0.7],
+        ];
+        for (const [label, start] of phases) {
+            ctx.fillText(label, ex(start) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline);
+        }
+    }
+    // "Evolution" title near the X arrow (tied to the X axis)
+    if (model.showXAxis) {
+        ctx.font = `${FONTS.axis}px ${FONT_FAMILY}`;
+        ctx.fillStyle = COLORS.axis;
+        ctx.textAlign = 'right';
+        ctx.fillText(model.xAxisTitle, px1 - OFFSETS.evolutionPadRight, py1 + OFFSETS.phaseBaseline);
+    }
+    // Direction indicators (Uncharted / Industrialized, top corners)
+    if (model.showCornerLabels) {
+        ctx.font = `${FONTS.direction}px ${FONT_FAMILY}`;
+        ctx.fillStyle = COLORS.label;
+        ctx.textAlign = 'left';
+        ctx.fillText(model.evolutionStart, px0 + OFFSETS.directionPadLeft, py0 + OFFSETS.directionTop);
+        ctx.textAlign = 'right';
+        ctx.fillText(model.evolutionEnd, px1 - OFFSETS.directionPadRight, py0 + OFFSETS.directionTop);
+    }
+    // ── Rotated Y labels (hugging the axis, symmetric with the X labels) ─
+    if (model.showYAxis) {
+        vtext(model.yAxisTitle, px0 - OFFSETS.yHug, (py0 + py1) / 2, FONTS.axis, COLORS.axis);
+    }
+    if (model.showVisibilityLabels) {
+        vtext(model.visibilityHigh, px0 - OFFSETS.yHug, py0 + OFFSETS.visibleTop, FONTS.visibility, COLORS.label);
+        vtext(model.visibilityLow, px0 - OFFSETS.yHug, py1 - OFFSETS.invisibleBottom, FONTS.visibility, COLORS.label);
+    }
+};
+export const WardleyElementRendererExtension = ElementRendererExtension('wardley', wardley);
+//# sourceMappingURL=element-renderer.js.map

package/dist/element-view.d.ts

@@ -0,0 +1,21 @@
+import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+export declare class WardleyView extends GfxElementModelView<WardleyBackgroundElementModel> {
+    static type: string;
+    /** The in-place `<input>` used to edit a label, or null when idle. */
+    private _labelEditor;
+    onCreated(): void;
+    onDestroyed(): void;
+    /** Double-click on a label → edit its text in place. */
+    private _onDblClick;
+    private _openLabelEditor;
+    private _closeLabelEditor;
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true. `beforeResize` is re-evaluated every time the allowed handles are
+ * computed (manager.ts), so toggling the field from the toolbar updates the
+ * handles reactively. Moving/selecting stays available throughout.
+ */
+export declare const WardleyInteraction: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=element-view.d.ts.map

package/dist/element-view.js

@@ -0,0 +1,122 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
+import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+import { getWardleyLabelHits, hitTestWardleyLabel, } from './label-layout';
+export class WardleyView extends GfxElementModelView {
+    constructor() {
+        super(...arguments);
+        /** The in-place `<input>` used to edit a label, or null when idle. */
+        this._labelEditor = null;
+    }
+    static { this.type = 'wardley'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', e => this._onDblClick(e));
+    }
+    onDestroyed() {
+        this._closeLabelEditor();
+        super.onDestroyed();
+    }
+    /** Double-click on a label → edit its text in place. */
+    _onDblClick(e) {
+        if (this.model.isLocked())
+            return;
+        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
+        const [bx, by, w, h] = this.model.deserializedXYWH;
+        // Convert the model-space point into element-local coordinates, undoing the
+        // element rotation around its center.
+        let lx = mx - bx;
+        let ly = my - by;
+        const rot = this.model.rotate ?? 0;
+        if (rot) {
+            const center = [bx + w / 2, by + h / 2];
+            const [ux, uy] = rotatePoint([mx, my], center, -rot);
+            lx = ux - bx;
+            ly = uy - by;
+        }
+        const hit = hitTestWardleyLabel(getWardleyLabelHits(this.model, w, h), lx, ly);
+        if (!hit)
+            return;
+        this._openLabelEditor(hit.field, e);
+    }
+    _openLabelEditor(field, e) {
+        this._closeLabelEditor();
+        const input = document.createElement('input');
+        input.value = String(this.model[field] ?? '');
+        Object.assign(input.style, {
+            position: 'fixed',
+            left: `${e.raw.clientX}px`,
+            top: `${e.raw.clientY}px`,
+            transform: 'translate(-50%, -50%)',
+            zIndex: '10000',
+            minWidth: '140px',
+            padding: '3px 8px',
+            font: '14px Inter, sans-serif',
+            color: 'var(--affine-text-primary-color, #1f2328)',
+            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
+            border: '1px solid var(--affine-primary-color, #1e96eb)',
+            borderRadius: '6px',
+            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
+            outline: 'none',
+        });
+        document.body.append(input);
+        this._labelEditor = input;
+        // Mark the element as "editing" so the global edgeless key handlers
+        // (delete, escape, etc.) don't act on it while the user types.
+        this.gfx.selection.set({ elements: [this.model.id], editing: true });
+        input.focus();
+        input.select();
+        const commit = () => {
+            // Guard against re-entrancy: removing the input fires `blur`, which would
+            // otherwise call `commit` a second time.
+            if (this._labelEditor !== input)
+                return;
+            const value = input.value;
+            this._closeLabelEditor();
+            this.gfx.std.store.captureSync();
+            this.gfx.std
+                .get(EdgelessCRUDIdentifier)
+                .updateElement(this.model.id, { [field]: value });
+        };
+        input.addEventListener('keydown', ev => {
+            ev.stopPropagation();
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                commit();
+            }
+            else if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this._closeLabelEditor();
+            }
+        });
+        input.addEventListener('blur', commit);
+    }
+    _closeLabelEditor() {
+        if (!this._labelEditor)
+            return;
+        const input = this._labelEditor;
+        this._labelEditor = null;
+        input.remove();
+        if (this.isConnected) {
+            this.gfx.selection.set({ elements: [this.model.id], editing: false });
+        }
+    }
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true. `beforeResize` is re-evaluated every time the allowed handles are
+ * computed (manager.ts), so toggling the field from the toolbar updates the
+ * handles reactively. Moving/selecting stays available throughout.
+ */
+export const WardleyInteraction = GfxViewInteractionExtension(WardleyView.type, {
+    handleResize({ model }) {
+        return {
+            beforeResize({ set }) {
+                if (!model.resizeEnabled) {
+                    set({ allowedHandlers: [] });
+                }
+            },
+        };
+    },
+});
+//# sourceMappingURL=element-view.js.map

package/dist/gradient.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Curve-driven gradient backgrounds (Slice C). Each analytic background is a
+ * smooth mathematical curve (piecewise asymmetric Gaussian bells); the gradient
+ * opacity at each evolution position X follows that curve, normalised between
+ * its own min and max — i.e. the gradient is strongest where the curve peaks and
+ * fades to nothing at its minimum. Validated against the reference images at
+ * `../wardley-mockups/gradient-backgrounds.html`.
+ */
+export declare const GRADIENT_GREEN = "#1f9e4d";
+export declare const GRADIENT_RED = "#d6455d";
+/** Benefit/investment zero-line height (fraction of plot height from bottom). */
+export declare const BENEFIT_ZERO_FRAC = 0.3;
+/**
+ * Paint the curve-driven gradient over the plot rectangle [px0,px1]×[py0,py1]
+ * in element-local coordinates. `classic` paints nothing.
+ */
+export declare function paintGradientBackground(ctx: CanvasRenderingContext2D, variant: 'opportunity' | 'benefit' | 'evolution-gradient', px0: number, px1: number, py0: number, py1: number): void;
+//# sourceMappingURL=gradient.d.ts.map