@formicoidea/labre-framework-ddd-core-domain 0.31.0 → 0.33.0

package/dist/actions.d.ts

@@ -0,0 +1,29 @@
+import type { BlockStdScope } from '@formicoidea/labre-core/std';
+import { type GfxController } from '@formicoidea/labre-core/std/gfx';
+type Surface = NonNullable<GfxController['surface']>;
+/**
+ * Post a Core Domain Chart background, centred on `(cx, cy)`.
+ *
+ * The size, the role and whether the handles are offered all come from the
+ * DECLARATION (`createWardleyBackground` is the pattern): the chart is a
+ * first-class role, so validation rules position artefacts against
+ * `core-domain:chart` and never against the `coreDomain` element type, and a
+ * chart posted from the sub-menu agrees with one posted from a template.
+ */
+export declare function createCoreDomainChart(surface: Surface, cx: number, cy: number): string;
+/**
+ * Activate the native connector tool, pre-styled for a movement over time
+ * (dashed, red, arrow at the far end) and TYPED with `core-domain:movement`.
+ *
+ * The gesture replaces the free arrow the sub-menu used to drop on the canvas,
+ * and the reason is `docs/adr/0010`: a movement is a sentence — "this context
+ * is moving to that position" — and its `source → target` pair only becomes a
+ * STATEMENT once the user drew it end to end, from the current position to the
+ * future one (the role's own gesture hint). `core-domain.malformed-movement`
+ * reads exactly that pair back.
+ *
+ * Arrows drawn before this change carry no role and stay neutral: they are
+ * drawings, and no rule will ever speak about them.
+ */
+export declare function activateMovement(std: BlockStdScope): void;
+export {};

package/dist/actions.js

@@ -0,0 +1,58 @@
+import { backgroundSize } from '@formicoidea/labre-core/blocks/surface';
+import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
+import { MOVEMENT_COLOR } from '@formicoidea/labre-ddd-shared';
+import { ConnectorMode, PointStyle, StrokeStyle } from '@formicoidea/labre-core/model';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { CORE_DOMAIN_BACKGROUND } from './core-domain/background.js';
+import { CORE_DOMAIN_ROLE } from './roles.js';
+/** The stroke width the movement arrow has always been drawn at. */
+const MOVEMENT_STROKE_WIDTH = 2;
+/**
+ * Post a Core Domain Chart background, centred on `(cx, cy)`.
+ *
+ * The size, the role and whether the handles are offered all come from the
+ * DECLARATION (`createWardleyBackground` is the pattern): the chart is a
+ * first-class role, so validation rules position artefacts against
+ * `core-domain:chart` and never against the `coreDomain` element type, and a
+ * chart posted from the sub-menu agrees with one posted from a template.
+ */
+export function createCoreDomainChart(surface, cx, cy) {
+    const { width, height } = backgroundSize(CORE_DOMAIN_BACKGROUND);
+    return surface.addElement({
+        type: CORE_DOMAIN_BACKGROUND.type,
+        role: CORE_DOMAIN_BACKGROUND.role,
+        resizeEnabled: CORE_DOMAIN_BACKGROUND.geometry.resizable,
+        xywh: new Bound(cx - width / 2, cy - height / 2, width, height).serialize(),
+    });
+}
+/**
+ * Activate the native connector tool, pre-styled for a movement over time
+ * (dashed, red, arrow at the far end) and TYPED with `core-domain:movement`.
+ *
+ * The gesture replaces the free arrow the sub-menu used to drop on the canvas,
+ * and the reason is `docs/adr/0010`: a movement is a sentence — "this context
+ * is moving to that position" — and its `source → target` pair only becomes a
+ * STATEMENT once the user drew it end to end, from the current position to the
+ * future one (the role's own gesture hint). `core-domain.malformed-movement`
+ * reads exactly that pair back.
+ *
+ * Arrows drawn before this change carry no role and stay neutral: they are
+ * drawings, and no rule will ever speak about them.
+ */
+export function activateMovement(std) {
+    const gfx = std.get(GfxControllerIdentifier);
+    gfx.tool.setTool(ConnectorTool, {
+        mode: ConnectorMode.Straight,
+        role: CORE_DOMAIN_ROLE.movement,
+        // The look rides on the activation, never through the last-props store:
+        // the plain connector tool must keep the user's own style (#144 M1).
+        style: {
+            stroke: MOVEMENT_COLOR,
+            strokeStyle: StrokeStyle.Dash,
+            strokeWidth: MOVEMENT_STROKE_WIDTH,
+            frontEndpointStyle: PointStyle.None,
+            rearEndpointStyle: PointStyle.Arrow,
+        },
+    });
+}

package/dist/commands.d.ts

@@ -0,0 +1,4 @@
+import type { CommandDescriptor } from '@formicoidea/labre-core/std';
+import { type TemplateResult } from 'lit';
+export declare const coreDomainCommands: CommandDescriptor[];
+export declare const coreDomainCommandIcons: Record<string, TemplateResult>;

package/dist/commands.js

@@ -0,0 +1,82 @@
+import { addDot, addMarker, CD_SUBDOMAINS, MOVEMENT_COLOR, placeDddElement, TEAM_TOPOLOGIES, } from '@formicoidea/labre-ddd-shared';
+import { svg } from 'lit';
+import { activateMovement, createCoreDomainChart } from './actions.js';
+import { markerRole, subdomainRole } from './roles.js';
+/**
+ * The Core Domain Chart palette as commands: the background, the five
+ * sub-domain dots, the three Team Topologies markers and the movement arrow.
+ * The notation legend stays in the map-background context menu (toolbar
+ * config) — the element toolbar is out of scope for `docs/adr/0008`.
+ */
+const chartSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="3" width="17" height="17" fill="#4d9900" fill-opacity="0.5"/><rect x="4" y="3" width="6" height="17" fill="#9933ff" fill-opacity="0.5"/><path d="M4 20 V3 M4 20 H21" stroke="currentColor" stroke-width="1.8"/></svg>`;
+const dotSwatch = (color) => svg `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="${color}" stroke="#1f2328" stroke-width="1.2"/></svg>`;
+const movementSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><path d="M3 18 L16 7" stroke="${MOVEMENT_COLOR}" stroke-width="2" stroke-dasharray="3 3"/><path d="M12 6 L18 5 L17 11" stroke="${MOVEMENT_COLOR}" stroke-width="2" fill="none"/></svg>`;
+const markerSwatch = (fill, letter) => svg `<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="${fill}" stroke="#1f2328" stroke-width="1.2"/><text x="12" y="16" text-anchor="middle" font-size="11" font-family="sans-serif" fill="#1f2328">${letter}</text></svg>`;
+const SPECS = [
+    {
+        id: 'addChart',
+        label: 'Core Domain Chart',
+        iconKey: 'ddd-core-domain.chart',
+        element: 'background',
+        icon: chartSwatch,
+        run: std => placeDddElement(std, (surface, cx, cy) => createCoreDomainChart(surface, cx, cy)),
+    },
+    ...CD_SUBDOMAINS.map((preset) => ({
+        id: `add${preset.kind[0].toUpperCase()}${preset.kind.slice(1)}`,
+        label: preset.label,
+        iconKey: `ddd-core-domain.subdomain.${preset.kind}`,
+        element: `subdomain:${preset.kind}`,
+        icon: dotSwatch(preset.fill),
+        run: std => placeDddElement(std, (surface, cx, cy) => addDot(surface, std, cx, cy, preset.fill, preset.label, 
+        // The dot IS the sub-domain: the role rides on the ellipse, so a
+        // rule about where a sub-domain sits measures the artefact and not
+        // the group that also holds its name.
+        subdomainRole(preset.kind))),
+    })),
+    ...TEAM_TOPOLOGIES.map((preset) => ({
+        id: `add${preset.kind[0].toUpperCase()}${preset.kind.slice(1)}`,
+        label: preset.label,
+        iconKey: `ddd-core-domain.team-topology.${preset.kind}`,
+        element: `team-topology:${preset.kind}`,
+        icon: markerSwatch(preset.fill, preset.letter),
+        run: std => placeDddElement(std, (surface, cx, cy) => addMarker(surface, std, cx, cy, {
+            fill: preset.fill,
+            letter: preset.letter,
+            label: preset.label,
+            // The square IS the marker, so the role rides on it and not on the
+            // group that also holds its caption — the same call as the dot.
+            // Without this the automatic legend, which detects by role and only
+            // by role, could not see the markers at all.
+            role: markerRole(preset.kind),
+        })),
+    })),
+    {
+        id: 'addMovement',
+        label: 'Movement over time',
+        iconKey: 'ddd-core-domain.movement',
+        // Historical telemetry value, unchanged by the gesture becoming a drag.
+        element: 'movement',
+        icon: movementSwatch,
+        // No longer a free arrow dropped at the viewport centre: the movement is a
+        // typed edge, so the user draws it from the current position to the future
+        // one and the pair they drew IS the statement (`docs/adr/0010`).
+        run: activateMovement,
+    },
+];
+export const coreDomainCommands = SPECS.map((spec, order) => ({
+    id: `ddd-core-domain.${spec.id}`,
+    owner: 'ddd-core-domain',
+    kind: 'artefact',
+    labelKey: `com.labre.commands.ddd-core-domain.${spec.id}`,
+    labelFallback: spec.label,
+    category: 'chart',
+    iconKey: spec.iconKey,
+    surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
+    order,
+    scope: 'edgeless',
+    defaultKeys: { mac: [], other: [] },
+    availability: 'always',
+    run: spec.run,
+    telemetry: { framework: 'ddd-core-domain', element: spec.element },
+}));
+export const coreDomainCommandIcons = Object.fromEntries(SPECS.map(spec => [spec.iconKey, spec.icon]));

package/dist/core-domain/background.d.ts

@@ -0,0 +1,4 @@
+import type { FrameworkBackgroundDef } from '@formicoidea/labre-core/blocks/surface';
+/** The palette entries the notation is made of — the tone convention's reference. */
+export declare const CORE_DOMAIN_LEGEND_TONES: readonly string[];
+export declare const CORE_DOMAIN_BACKGROUND: FrameworkBackgroundDef;

package/dist/core-domain/background.js

@@ -0,0 +1,370 @@
+import { CD_SUBDOMAINS, FONT_FAMILY } from '@formicoidea/labre-ddd-shared';
+import { CORE_DOMAIN_ROLE } from '../roles.js';
+/**
+ * The Core Domain Chart background, DECLARED.
+ *
+ * This file is the whole of what makes a Core Domain Chart look like a Core
+ * Domain Chart. There is no chart-specific rendering code left: the primitive
+ * (`FrameworkBackgroundDef` / `createFrameworkBackgroundRenderer` in
+ * `@labre/affine-block-surface`) paints this declaration, and would paint any
+ * other framework's the same way.
+ *
+ * Nothing here changes the DOCUMENT. The persisted element type is still
+ * `coreDomain` and its props are untouched — `showZones`, `showLabels`,
+ * `resizeEnabled` — they are simply named by the declaration instead of being
+ * read by hand-written drawing code. A chart authored before this file existed
+ * opens with the same geometry, the same bands and the same words: every
+ * coordinate below is the old `consts.ts` value converted, once, into a ratio of
+ * the plot, and `__tests__/background.unit.spec.ts` pins the conversion against
+ * the absolute numbers it came from.
+ *
+ * ## Two readings of one frame
+ *
+ * `variantProp: 'variant'` (see `CoreDomainChartElementModel.variant`) selects
+ * between the CLASSIC chart — Generic / Supporting / Core — and the MIGRATION
+ * one, whose four quadrants name the migration conversation instead. Same axes,
+ * same geometry, same element: only the regions and the vertical axis' title
+ * change, which is precisely what a variant is for. No validation rule cites a
+ * migration zone.
+ */
+/**
+ * The authoring reference space, kept as documentation of where every ratio
+ * below comes from: the chart was drawn at 900 × 820 with its plot inset by the
+ * margins declared in {@link CORE_DOMAIN_BACKGROUND}, so the plot is 786 × 746
+ * and `(absolute - origin) / span` is the conversion.
+ */
+const PLOT = { x0: 60, y0: 24, width: 786, height: 746 };
+/** An absolute X of the reference drawing, as a ratio of the plot. */
+const rx = (x) => (x - PLOT.x0) / PLOT.width;
+/** An absolute Y of the reference drawing, as a ratio of the plot. */
+const ry = (y) => (y - PLOT.y0) / PLOT.height;
+/** An absolute width, as a ratio of the plot width. */
+const rw = (w) => w / PLOT.width;
+/** An absolute height, as a ratio of the plot height. */
+const rh = (h) => h / PLOT.height;
+/**
+ * The colour code: every colour is named, never repeated as a hex.
+ *
+ * The last five entries are the **legend**, and they are palette entries for a
+ * reason: `core-domain.off-legend-colour` names them
+ * (`ToneConventionDef.palette`) instead of restating a colour, so the notation
+ * and the chart are restyled together, in one place. They are read straight off
+ * `CD_SUBDOMAINS`, the very table the sub-menu builds its five dots from — the
+ * convention and the swatches can therefore never drift apart.
+ *
+ * The zone tints carry their alpha BAKED INTO THE HEX (`…99` is the 0.6 the
+ * old renderer set with `globalAlpha`): a zone fill is handed to `fillStyle`
+ * verbatim, so eight-digit hex is how a translucent band is declared.
+ */
+const PALETTE = {
+    axis: '#000000',
+    title: '#000000',
+    tick: '#777777',
+    /** Zone names of the classic reading: white, over saturated bands. */
+    zoneLabel: '#ffffff',
+    /** Zone names of the migration reading: ink, over pale tints. */
+    zoneLabelDark: '#1f2328',
+    zoneGeneric: '#b3b3b399',
+    zoneSupporting: '#9933ff99',
+    zoneCore: '#4d990099',
+    zoneLowHangingFruit: '#4d990026',
+    zoneRiskSeeking: '#9933ff26',
+    zoneRiskAverse: '#b3b3b326',
+    zoneLastToothpaste: '#ff333326',
+    ...Object.fromEntries(CD_SUBDOMAINS.map(preset => [preset.kind, preset.fill])),
+};
+/** The palette entries the notation is made of — the tone convention's reference. */
+export const CORE_DOMAIN_LEGEND_TONES = CD_SUBDOMAINS.map(preset => preset.kind);
+const AXIS_TEXT = {
+    size: 14,
+    weight: 600,
+    color: '@title',
+};
+const TICK_TEXT = { size: 12, color: '@tick' };
+const ZONE_TEXT = {
+    size: 20,
+    weight: 700,
+    color: '@zoneLabel',
+};
+const CORE_TEXT = { ...ZONE_TEXT, size: 26 };
+const MIGRATION_TEXT = {
+    size: 20,
+    weight: 700,
+    color: '@zoneLabelDark',
+};
+/** A centred zone name, gated by `showLabels` like every other word on the chart. */
+function zoneLabel(id, key, fallback, x, y, style) {
+    return {
+        id,
+        labelKey: `com.labre.core-domain.background.zone.${key}`,
+        fallback,
+        anchor: { x: rx(x), y: ry(y) },
+        style,
+        align: 'center',
+        visibleProp: 'showLabels',
+    };
+}
+/**
+ * The classic reading: the three named bands of the DDD Crew chart, plus the
+ * fourth (unnamed) quadrant the template tints without ever writing on.
+ *
+ * `variants: ['classic']` is what makes them a READING rather than the chart:
+ * turn the frame to `migration` and these regions are not there — which is also
+ * why `core-domain.outsourced-core` falls silent on a migration chart instead of
+ * measuring against a quadrant nobody can see.
+ *
+ * NOTE on the ids: `supporting-low-complexity` names the bottom-right quadrant
+ * — high differentiation, LOW complexity, since the complexity axis runs
+ * upwards. (The plan first named it `supporting-high-complexity`, factually
+ * inverted; corrected at the merge recette of 26/08/2026 — no rule cites it.)
+ */
+const CLASSIC_ZONES = [
+    {
+        id: 'generic',
+        variants: ['classic'],
+        rect: { x: rx(70), y: ry(30), w: rw(150), h: rh(720) },
+        fill: '@zoneGeneric',
+        fillVisibleProp: 'showZones',
+        label: zoneLabel('generic', 'generic', 'Generic', 150, 474, ZONE_TEXT),
+    },
+    {
+        id: 'supporting-low-diff',
+        variants: ['classic'],
+        rect: { x: rx(220), y: ry(30), w: rw(220), h: rh(720) },
+        fill: '@zoneSupporting',
+        fillVisibleProp: 'showZones',
+        label: zoneLabel('supporting', 'supporting', 'Supporting', 340, 474, ZONE_TEXT),
+    },
+    {
+        id: 'core',
+        variants: ['classic'],
+        rect: { x: rx(440), y: ry(30), w: rw(400), h: rh(360) },
+        fill: '@zoneCore',
+        fillVisibleProp: 'showZones',
+        label: zoneLabel('core', 'core', 'Core', 640, 214, CORE_TEXT),
+    },
+    {
+        // The template tints this one and writes nothing on it, so neither does the
+        // declaration: an invented name would be prose nobody asked for.
+        id: 'supporting-low-complexity',
+        variants: ['classic'],
+        rect: { x: rx(440), y: ry(390), w: rw(400), h: rh(360) },
+        fill: '@zoneSupporting',
+        fillVisibleProp: 'showZones',
+    },
+];
+/**
+ * The migration reading: the same frame, four quadrants, and the vocabulary of
+ * a modernisation conversation.
+ *
+ * Regions of READING only — deliberately not cited by any rule. What counts as
+ * a low-hanging fruit is a judgement about cost and appetite that no coordinate
+ * decides, and a rule reading it off a dot's position would be inventing a
+ * verdict the chart never claimed.
+ */
+const MIGRATION_ZONES = [
+    {
+        id: 'last-toothpaste',
+        variants: ['migration'],
+        rect: { x: 0, y: 0, w: 0.5, h: 0.5 },
+        fill: '@zoneLastToothpaste',
+        fillVisibleProp: 'showZones',
+        label: {
+            id: 'lastToothpaste',
+            labelKey: 'com.labre.core-domain.background.zone.last-toothpaste',
+            fallback: 'Last toothpaste',
+            anchor: { x: 0.25, y: 0.25 },
+            style: MIGRATION_TEXT,
+            align: 'center',
+            visibleProp: 'showLabels',
+        },
+    },
+    {
+        id: 'risk-seeking',
+        variants: ['migration'],
+        rect: { x: 0.5, y: 0, w: 0.5, h: 0.5 },
+        fill: '@zoneRiskSeeking',
+        fillVisibleProp: 'showZones',
+        label: {
+            id: 'riskSeeking',
+            labelKey: 'com.labre.core-domain.background.zone.risk-seeking',
+            fallback: 'Risk-seeking',
+            anchor: { x: 0.75, y: 0.25 },
+            style: MIGRATION_TEXT,
+            align: 'center',
+            visibleProp: 'showLabels',
+        },
+    },
+    {
+        id: 'risk-averse',
+        variants: ['migration'],
+        rect: { x: 0, y: 0.5, w: 0.5, h: 0.5 },
+        fill: '@zoneRiskAverse',
+        fillVisibleProp: 'showZones',
+        label: {
+            id: 'riskAverse',
+            labelKey: 'com.labre.core-domain.background.zone.risk-averse',
+            fallback: 'Risk-averse',
+            anchor: { x: 0.25, y: 0.75 },
+            style: MIGRATION_TEXT,
+            align: 'center',
+            visibleProp: 'showLabels',
+        },
+    },
+    {
+        id: 'lhf',
+        variants: ['migration'],
+        rect: { x: 0.5, y: 0.5, w: 0.5, h: 0.5 },
+        fill: '@zoneLowHangingFruit',
+        fillVisibleProp: 'showZones',
+        label: {
+            id: 'lowHangingFruit',
+            labelKey: 'com.labre.core-domain.background.zone.lhf',
+            fallback: 'Low-hanging fruit',
+            anchor: { x: 0.75, y: 0.75 },
+            style: MIGRATION_TEXT,
+            align: 'center',
+            visibleProp: 'showLabels',
+        },
+    },
+];
+/**
+ * The two axes. Complexity runs up the left edge, Business differentiation
+ * along the bottom; both arrows point "forward", i.e. towards MORE.
+ *
+ * Neither axis carries a `visibleProp`: the frame of reference is the chart, and
+ * the template has never offered to hide it. `showLabels` gates the WORDS — the
+ * titles and the four Low/High ticks — which is the toggle the toolbar has
+ * always had (and which the `showLabels` prop has always claimed to cover, zone
+ * names included).
+ *
+ * `arrowSize: 9` reproduces the reference arrowhead's LENGTH exactly; the
+ * primitive draws it 9 wide against the template's 10, a half-unit either side
+ * of a nine-unit triangle.
+ */
+const CORE_DOMAIN_AXES = [
+    {
+        id: 'complexity',
+        orientation: 'vertical',
+        at: 0,
+        arrow: 'forward',
+        arrowSize: 9,
+        stroke: { color: '@axis', width: 2 },
+        title: {
+            id: 'complexityTitle',
+            // The classic reading's vertical axis. The migration one relabels it —
+            // see `MIGRATION_AXIS_TITLE` below, and why it rides in `endLabels`.
+            variants: ['classic'],
+            labelKey: 'com.labre.core-domain.background.axis.complexity',
+            fallback: 'Complexity',
+            anchor: { x: 0, y: ry(400), dx: -32 },
+            style: AXIS_TEXT,
+            vertical: true,
+            visibleProp: 'showLabels',
+        },
+        endLabels: [
+            {
+                id: 'complexityLow',
+                labelKey: 'com.labre.core-domain.background.complexity.low',
+                fallback: 'Low',
+                anchor: { x: 0, y: ry(758), dx: -12 },
+                style: TICK_TEXT,
+                vertical: true,
+                visibleProp: 'showLabels',
+            },
+            {
+                id: 'complexityHigh',
+                labelKey: 'com.labre.core-domain.background.complexity.high',
+                fallback: 'High',
+                anchor: { x: 0, y: ry(44), dx: -22 },
+                style: TICK_TEXT,
+                vertical: true,
+                visibleProp: 'showLabels',
+            },
+            /**
+             * The migration reading's vertical axis title, at the very position and
+             * in the very style the classic one occupies.
+             *
+             * It rides in `endLabels` because an axis declares ONE `title`, and the
+             * two are alternatives selected by the variant rather than two things
+             * drawn together. `endLabels` is the only list of free texts an axis
+             * owns; the alternative would have been a second declaration of the whole
+             * background, which is exactly what a variant exists to avoid.
+             */
+            {
+                id: 'complexityTitleMigration',
+                variants: ['migration'],
+                labelKey: 'com.labre.core-domain.background.axis.migration-cost',
+                fallback: 'Cost of migration',
+                anchor: { x: 0, y: ry(400), dx: -32 },
+                style: AXIS_TEXT,
+                vertical: true,
+                visibleProp: 'showLabels',
+            },
+        ],
+    },
+    {
+        id: 'differentiation',
+        orientation: 'horizontal',
+        at: 1,
+        arrow: 'forward',
+        arrowSize: 9,
+        stroke: { color: '@axis', width: 2 },
+        title: {
+            id: 'differentiationTitle',
+            labelKey: 'com.labre.core-domain.background.axis.differentiation',
+            fallback: 'Business differentiation',
+            anchor: { x: rx(450), y: 1, dy: 30 },
+            style: AXIS_TEXT,
+            align: 'center',
+            visibleProp: 'showLabels',
+        },
+        endLabels: [
+            {
+                id: 'differentiationLow',
+                labelKey: 'com.labre.core-domain.background.differentiation.low',
+                fallback: 'Low',
+                anchor: { x: rx(84), y: 1, dy: 22 },
+                style: TICK_TEXT,
+                align: 'center',
+                visibleProp: 'showLabels',
+            },
+            {
+                id: 'differentiationHigh',
+                labelKey: 'com.labre.core-domain.background.differentiation.high',
+                fallback: 'High',
+                anchor: { x: rx(838), y: 1, dy: 22 },
+                style: TICK_TEXT,
+                align: 'center',
+                visibleProp: 'showLabels',
+            },
+        ],
+    },
+];
+export const CORE_DOMAIN_BACKGROUND = {
+    type: 'coreDomain',
+    // The chart is a first-class role: validation rules position artefacts
+    // against `core-domain:chart`, never against the `coreDomain` element type.
+    role: CORE_DOMAIN_ROLE.chart,
+    variantProp: 'variant',
+    geometry: {
+        width: 900,
+        height: 820,
+        lockAspectRatio: true,
+        // The chart has always offered its handles (`resizeEnabled` defaults to
+        // true on the model); the declaration says so, and the toolbar toggle takes
+        // over from there.
+        resizable: true,
+        margin: { top: 24, right: 54, bottom: 50, left: 60 },
+    },
+    chrome: {
+        fontFamily: FONT_FAMILY,
+        palette: PALETTE,
+        // No card, on purpose: the template draws its translucent bands straight
+        // onto the canvas, and painting a white rectangle under them would be a
+        // visual change dressed up as a refactor.
+        surface: {},
+    },
+    zones: [...CLASSIC_ZONES, ...MIGRATION_ZONES],
+    axes: CORE_DOMAIN_AXES,
+};

package/dist/core-domain/element-renderer.d.ts

@@ -1,10 +1,13 @@
 import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
 import type { CoreDomainChartElementModel } from '@formicoidea/labre-core/model';
 /**
- * Canvas renderer for the Core Domain Chart background — the translucent
- * Generic / Supporting / Core zone bands, the two axes with arrow heads and the
- * Low/High ticks + zone names. Drawn in the fixed reference space and scaled
- * uniformly to the element bounds.
+ * The Core Domain Chart background renderer — the framework-background
+ * primitive, driven by {@link CORE_DOMAIN_BACKGROUND}.
+ *
+ * There is no chart-specific drawing code any more: the bands, the two axes with
+ * their arrowheads, the zone names and the Low/High ticks are all declared, and
+ * `__tests__/background.unit.spec.ts` pins the picture against the absolute
+ * constants the deleted imperative renderer drew from.
  */
 export declare const coreDomain: ElementRenderer<CoreDomainChartElementModel>;
 export declare const CoreDomainRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {

package/dist/core-domain/element-renderer.js

@@ -1,93 +1,13 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { FONT_FAMILY, refScale } from '@formicoidea/labre-ddd-shared';
-import { AXIS, COLORS, REF_H, REF_W, ZONE_LABELS, ZONES } from './consts.js';
+import { createFrameworkBackgroundRenderer, ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { CORE_DOMAIN_BACKGROUND } from './background.js';
 /**
- * Canvas renderer for the Core Domain Chart background — the translucent
- * Generic / Supporting / Core zone bands, the two axes with arrow heads and the
- * Low/High ticks + zone names. Drawn in the fixed reference space and scaled
- * uniformly to the element bounds.
+ * The Core Domain Chart background renderer — the framework-background
+ * primitive, driven by {@link CORE_DOMAIN_BACKGROUND}.
+ *
+ * There is no chart-specific drawing code any more: the bands, the two axes with
+ * their arrowheads, the zone names and the Low/High ticks are all declared, and
+ * `__tests__/background.unit.spec.ts` pins the picture against the absolute
+ * constants the deleted imperative renderer drew from.
  */
-export const coreDomain = (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 { s, ox, oy } = refScale(w, h, REF_W, REF_H);
-    ctx.translate(ox, oy);
-    ctx.scale(s, s);
-    // ── Translucent zone bands ──────────────────────────────────────────
-    if (model.showZones) {
-        ctx.globalAlpha = 0.6;
-        for (const z of ZONES) {
-            ctx.fillStyle = z.fill;
-            ctx.fillRect(z.x, z.y, z.w, z.h);
-        }
-        ctx.globalAlpha = 1;
-    }
-    // ── Axes with arrow heads ───────────────────────────────────────────
-    ctx.strokeStyle = COLORS.axis;
-    ctx.fillStyle = COLORS.axis;
-    ctx.lineWidth = 2;
-    ctx.lineJoin = 'round';
-    // Y axis (up)
-    ctx.beginPath();
-    ctx.moveTo(AXIS.ox, AXIS.oy);
-    ctx.lineTo(AXIS.ox, AXIS.top + 6);
-    ctx.stroke();
-    arrow(ctx, AXIS.ox, AXIS.top, 0);
-    // X axis (right)
-    ctx.beginPath();
-    ctx.moveTo(AXIS.ox, AXIS.oy);
-    ctx.lineTo(AXIS.right - 6, AXIS.oy);
-    ctx.stroke();
-    arrow(ctx, AXIS.right, AXIS.oy, 90);
-    ctx.textBaseline = 'alphabetic';
-    // ── Zone names ──────────────────────────────────────────────────────
-    ctx.textAlign = 'center';
-    for (const [text, x, y, size] of ZONE_LABELS) {
-        ctx.fillStyle = COLORS.zoneLabel;
-        ctx.font = `700 ${size}px ${FONT_FAMILY}`;
-        ctx.fillText(text, x, y);
-    }
-    // ── Axis titles + Low/High ticks ────────────────────────────────────
-    if (model.showLabels) {
-        ctx.fillStyle = COLORS.title;
-        ctx.font = `600 14px ${FONT_FAMILY}`;
-        ctx.save();
-        ctx.translate(28, 400);
-        ctx.rotate(-Math.PI / 2);
-        ctx.fillText('Complexity', 0, 0);
-        ctx.restore();
-        ctx.fillText('Business differentiation', 450, 800);
-        ctx.fillStyle = COLORS.tick;
-        ctx.font = `12px ${FONT_FAMILY}`;
-        // X ticks
-        ctx.fillText('Low', 84, 792);
-        ctx.fillText('High', 838, 792);
-        // Y ticks
-        ctx.save();
-        ctx.translate(48, 758);
-        ctx.rotate(-Math.PI / 2);
-        ctx.fillText('Low', 0, 0);
-        ctx.restore();
-        ctx.save();
-        ctx.translate(38, 44);
-        ctx.rotate(-Math.PI / 2);
-        ctx.fillText('High', 0, 0);
-        ctx.restore();
-    }
-};
-/** Filled triangular arrow head at (x, y); `deg` rotates it (0 = pointing up). */
-function arrow(ctx, x, y, deg) {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate((deg * Math.PI) / 180);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(-5, 9);
-    ctx.lineTo(5, 9);
-    ctx.closePath();
-    ctx.fill();
-    ctx.restore();
-}
+export const coreDomain = createFrameworkBackgroundRenderer(CORE_DOMAIN_BACKGROUND);
 export const CoreDomainRendererExtension = ElementRendererExtension('coreDomain', coreDomain);