@formicoidea/labre-framework-wardley 0.23.1 → 0.23.2

package/src/view.ts

@@ -0,0 +1,39 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+
+import { effects } from './effects';
+import { wardleyTemplateCategory } from './templates';
+import { WardleyElementRendererExtension } from './element-renderer';
+import { WardleyInteraction, WardleyView } from './element-view';
+import { WardleyNodeRendererExtension } from './node/node-renderer';
+import { WardleyNodeView } from './node/node-view';
+import { wardleyNodeToolbarExtension } from './toolbar/node-config';
+import { wardleyToolbarExtension } from './toolbar/config';
+import { wardleySeniorTool } from './toolbar/senior-tool';
+
+export class WardleyViewExtension extends ViewExtensionProvider {
+  override name = 'affine-wardley-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+    extendTemplateCategory(wardleyTemplateCategory);
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(WardleyView);
+    context.register(WardleyElementRendererExtension);
+    context.register(WardleyNodeView);
+    context.register(WardleyNodeRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(WardleyInteraction);
+      context.register(wardleySeniorTool);
+      context.register(wardleyToolbarExtension);
+      context.register(wardleyNodeToolbarExtension);
+    }
+  }
+}

package/dist/consts.d.ts

@@ -1,72 +0,0 @@
-/**
- * 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/dist/descriptor.d.ts

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

package/dist/effects.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/**
- * 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

package/dist/gradient.js

@@ -1,112 +0,0 @@
-/**
- * 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`.
- */
-const bell = (x, mu, s) => Math.exp(-0.5 * ((x - mu) / s) ** 2);
-const asym = (x, mu, sL, sR) => Math.exp(-0.5 * ((x - mu) / (x < mu ? sL : sR)) ** 2);
-// Opportunity — differential value (green): early peak + long decay.
-const fDiff = (x) => asym(x, 0.175, 0.24, 0.36);
-const DIFF_DOM = [0, 0.86];
-// Opportunity — operational value (red): bump centred on commodity.
-const fOper = (x) => asym(x, 0.85, 0.1, 0.075);
-const OPER_DOM = [0.62, 1];
-// Benefit / investment (signed): big positive bell − small negative bell.
-const fBen = (x) => asym(x, 0.49, 0.17, 0.24) - 0.42 * bell(x, 0.1, 0.075);
-// Evolution-gradient — Simon Wardley's classic evolution presentation: a
-// symmetric grey "U", strong at both evolution extremes (uncharted /
-// industrialised), fading to white through the build middle.
-const fGrey = (x) => {
-    const left = Math.max(0, (0.26 - x) / 0.26);
-    const right = Math.max(0, (x - 0.64) / 0.36);
-    return Math.max(left, right);
-};
-function rangeOf(fn, x0, x1) {
-    let lo = Infinity;
-    let hi = -Infinity;
-    for (let i = 0; i <= 240; i++) {
-        const v = fn(x0 + ((x1 - x0) * i) / 240);
-        if (v < lo)
-            lo = v;
-        if (v > hi)
-            hi = v;
-    }
-    return { lo, hi };
-}
-const RG = rangeOf(fDiff, DIFF_DOM[0], DIFF_DOM[1]);
-const RR = rangeOf(fOper, OPER_DOM[0], OPER_DOM[1]);
-const RB = rangeOf(fBen, 0, 1);
-const clamp01 = (v) => Math.max(0, Math.min(1, v));
-const norm = (v, lo, hi) => (hi > lo ? (v - lo) / (hi - lo) : 0);
-export const GRADIENT_GREEN = '#1f9e4d';
-export const GRADIENT_RED = '#d6455d';
-const GRADIENT_GREY = '#7c8389';
-/** Validated peak opacity for the green/red variants. */
-const GRADIENT_MAX_OPACITY = 0.45;
-/** Peak opacity for the grey evolution-gradient variant. */
-const GREY_MAX_OPACITY = 0.38;
-/** Benefit/investment zero-line height (fraction of plot height from bottom). */
-export const BENEFIT_ZERO_FRAC = 0.3;
-function rgba(hex, alpha) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-}
-/**
- * Add stops to a horizontal gradient (offset 0..1 spanning the plot width) for
- * a function-driven opacity profile within [x0, x1] (zero outside).
- */
-function addStops(grad, hex, opacityFn, x0, x1, maxOp = GRADIENT_MAX_OPACITY) {
-    const eps = 0.001;
-    if (x0 > eps)
-        grad.addColorStop(Math.max(0, x0 - eps), rgba(hex, 0));
-    const N = 48;
-    for (let i = 0; i <= N; i++) {
-        const x = x0 + ((x1 - x0) * i) / N;
-        grad.addColorStop(clamp01(x), rgba(hex, clamp01(opacityFn(x)) * maxOp));
-    }
-    if (x1 < 1 - eps)
-        grad.addColorStop(Math.min(1, x1 + eps), rgba(hex, 0));
-}
-/**
- * Paint the curve-driven gradient over the plot rectangle [px0,px1]×[py0,py1]
- * in element-local coordinates. `classic` paints nothing.
- */
-export function paintGradientBackground(ctx, variant, px0, px1, py0, py1) {
-    const w = px1 - px0;
-    const h = py1 - py0;
-    if (variant === 'evolution-gradient') {
-        const grey = ctx.createLinearGradient(px0, 0, px1, 0);
-        addStops(grey, GRADIENT_GREY, fGrey, 0, 1, GREY_MAX_OPACITY);
-        ctx.fillStyle = grey;
-        ctx.fillRect(px0, py0, w, h);
-        return;
-    }
-    if (variant === 'opportunity') {
-        const green = ctx.createLinearGradient(px0, 0, px1, 0);
-        addStops(green, GRADIENT_GREEN, x => norm(fDiff(x), RG.lo, RG.hi), DIFF_DOM[0], DIFF_DOM[1]);
-        ctx.fillStyle = green;
-        ctx.fillRect(px0, py0, w, h);
-        const red = ctx.createLinearGradient(px0, 0, px1, 0);
-        addStops(red, GRADIENT_RED, x => norm(fOper(x), RR.lo, RR.hi), OPER_DOM[0], OPER_DOM[1]);
-        ctx.fillStyle = red;
-        ctx.fillRect(px0, py0, w, h);
-        return;
-    }
-    // benefit: green where the curve is positive, red where negative.
-    const maxPos = RB.hi;
-    const maxNeg = -RB.lo;
-    const green = ctx.createLinearGradient(px0, 0, px1, 0);
-    addStops(green, GRADIENT_GREEN, x => Math.max(0, fBen(x)) / maxPos, 0, 1);
-    ctx.fillStyle = green;
-    ctx.fillRect(px0, py0, w, h);
-    const red = ctx.createLinearGradient(px0, 0, px1, 0);
-    addStops(red, GRADIENT_RED, x => Math.max(0, -fBen(x)) / maxNeg, 0, 1);
-    ctx.fillStyle = red;
-    ctx.fillRect(px0, py0, w, h);
-}
-//# sourceMappingURL=gradient.js.map

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.js.map

package/dist/label-layout.d.ts

@@ -1,21 +0,0 @@
-import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
-/** The editable label fields of a Wardley background. */
-export type WardleyLabelField = 'xAxisTitle' | 'yAxisTitle' | 'evolutionStart' | 'evolutionEnd' | 'visibilityHigh' | 'visibilityLow' | 'phase0' | 'phase1' | 'phase2' | 'phase3';
-/** A label's hit box in element-local coordinates (axis-aligned, padded). */
-export interface WardleyLabelHit {
-    field: WardleyLabelField;
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
-}
-/**
- * Compute the clickable boxes of every *visible* Wardley label, in the
- * element's local space. Positions are derived from the SAME constants the
- * renderer uses (`MARGIN` / `OFFSETS` / `FONTS`), so the hit boxes track the
- * drawn text. Boxes are padded so double-clicking is forgiving.
- */
-export declare function getWardleyLabelHits(model: WardleyBackgroundElementModel, w: number, h: number): WardleyLabelHit[];
-/** First label whose (padded) box contains the local point, or null. */
-export declare function hitTestWardleyLabel(hits: WardleyLabelHit[], lx: number, ly: number): WardleyLabelHit | null;
-//# sourceMappingURL=label-layout.d.ts.map