@formicoidea/labre-framework-ddd-event-storming 0.31.0 → 0.33.0

package/dist/toolbar/board-config.js

@@ -0,0 +1,86 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { createAutoLegend, dddLegendIcon } from '@formicoidea/labre-ddd-shared';
+import { EventStormingBoardElementModel } from '@formicoidea/labre-core/model';
+import { TelemetryProvider, ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html } from 'lit';
+import { EVENT_STORMING_AUTO_LEGEND } from '../legend.js';
+const ResizeIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+/**
+ * The selected board's contextual toolbar: the resize toggle, and the automatic
+ * legend of the sticky kinds actually stuck to the board. Registered ALWAYS-ON
+ * (`DddEventStormingRenderViewExtension`) — a stored board must stay usable with
+ * the Event Storming button switched off (`docs/adr/0009`), legend included: a
+ * legend is real editable elements, so generating one is authoring a document,
+ * not tooling that a flag may take away.
+ *
+ * This is the module's ONLY legend gesture: the Event Storming palette never had
+ * a static Legend entry, and a wall of colour-coded stickies is exactly the
+ * board a reader needs one for.
+ */
+export const eventStormingBoardToolbarConfig = {
+    actions: [
+        {
+            id: 'a.toggle-resize',
+            tooltip: 'Enable / lock resizing',
+            icon: ResizeIcon,
+            active(ctx) {
+                const models = ctx.getSurfaceModelsByType(EventStormingBoardElementModel);
+                return models.length > 0 && models.every(model => model.resizeEnabled);
+            },
+            run(ctx) {
+                const models = ctx.getSurfaceModelsByType(EventStormingBoardElementModel);
+                if (!models.length)
+                    return;
+                const enable = !models.every(model => model.resizeEnabled);
+                ctx.std.store.captureSync();
+                const crud = ctx.std.get(EdgelessCRUDIdentifier);
+                for (const model of models) {
+                    crud.updateElement(model.id, { resizeEnabled: enable });
+                }
+            },
+        },
+        {
+            id: 'b.legend',
+            tooltip: 'Generate the legend (notation present)',
+            icon: dddLegendIcon,
+            run(ctx) {
+                const board = ctx.getSurfaceModelsByType(EventStormingBoardElementModel)[0];
+                if (!board)
+                    return;
+                createAutoLegend(ctx.std, board, EVENT_STORMING_AUTO_LEGEND);
+                ctx.std
+                    .getOptional(TelemetryProvider)
+                    ?.track('FrameworkLegendCreated', {
+                    // The WIRE value, which is not the module id: the framework is
+                    // `ddd-event-storming` in code and `event-storming` in PostHog
+                    // (`frameworks.ts` `telemetryKey`, and the only value
+                    // `FrameworkElementEvent` accepts). Same convention as Wardley's own
+                    // legend button, so the two are comparable.
+                    framework: 'event-storming',
+                    element: 'legend',
+                    page: 'whiteboard editor',
+                    segment: 'element toolbar',
+                    module: 'event-storming toolbar',
+                });
+            },
+        },
+    ],
+    when: (ctx) => ctx.getSurfaceModelsByType(EventStormingBoardElementModel).length > 0,
+};
+export const eventStormingBoardToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:eventStorming'),
+    config: eventStormingBoardToolbarConfig,
+});

package/dist/toolbar/event-storming-menu.d.ts

@@ -1,9 +1,16 @@
-import { DddMenuBase } from '@formicoidea/labre-ddd-shared';
-/** Event Storming palette: the colour-coded stickies, the hotspot, a flow arrow. */
-export declare class EdgelessDddEventStormingMenu extends DddMenuBase {
-    protected framework: "event-storming";
-    private _createSticky;
-    private _createHotspot;
-    private _createFlow;
-    render(): import("lit-html").TemplateResult<1>;
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+/**
+ * Event Storming palette. Since PF3 it declares nothing:
+ * {@link EdgelessCommandMenu} renders `eventStormingCommands` for the
+ * `senior-menu` surface, and `DddMenuBase` — shell, finish helper and `track`
+ * helper — is gone with the duplication it carried (`docs/adr/0008`).
+ *
+ * The DDD palettes keep their tighter gap: they carry more buttons than the
+ * other frameworks (Event Storming: 11, Context Map: 13).
+ */
+export declare class EdgelessDddEventStormingMenu extends EdgelessCommandMenu {
+    static styles: import("lit").CSSResultGroup[];
+    protected owner: "ddd-event-storming";
+    type: typeof EmptyTool;
 }

package/dist/toolbar/event-storming-menu.js

@@ -1,76 +1,27 @@
-import { addConnector, addSticky, DddMenuBase, ES_HOTSPOT, ES_STICKIES, } from '@formicoidea/labre-ddd-shared';
-import { html, svg } from 'lit';
-const squareSwatch = (color) => svg `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3" fill="${color}"/></svg>`;
-const diamondSwatch = (color) => svg `<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" transform="rotate(45 12 12)" fill="${color}"/></svg>`;
-const flowSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><path d="M4 12 H18" stroke="currentColor" stroke-width="2"/><path d="M16 8 L20 12 L16 16" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
-/** Event Storming palette: the colour-coded stickies, the hotspot, a flow arrow. */
-export class EdgelessDddEventStormingMenu extends DddMenuBase {
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { css } from 'lit';
+/**
+ * Event Storming palette. Since PF3 it declares nothing:
+ * {@link EdgelessCommandMenu} renders `eventStormingCommands` for the
+ * `senior-menu` surface, and `DddMenuBase` — shell, finish helper and `track`
+ * helper — is gone with the duplication it carried (`docs/adr/0008`).
+ *
+ * The DDD palettes keep their tighter gap: they carry more buttons than the
+ * other frameworks (Event Storming: 11, Context Map: 13).
+ */
+export class EdgelessDddEventStormingMenu extends EdgelessCommandMenu {
     constructor() {
         super(...arguments);
-        this.framework = 'event-storming';
-    }
-    _createSticky(preset) {
-        const surface = this.surface;
-        if (!surface)
-            return;
-        const { cx, cy } = this.center;
-        const id = addSticky(surface, this.edgeless.std, cx, cy, {
-            fill: preset.fill,
-            text: preset.text,
-            label: preset.label,
-        });
-        this.track('FrameworkElementAdded', `sticky:${preset.kind}`);
-        this.finish(id);
-    }
-    _createHotspot() {
-        const surface = this.surface;
-        if (!surface)
-            return;
-        const { cx, cy } = this.center;
-        const id = addSticky(surface, this.edgeless.std, cx, cy, {
-            fill: ES_HOTSPOT.fill,
-            text: ES_HOTSPOT.text,
-            label: ES_HOTSPOT.label,
-            shapeType: 'diamond',
-        });
-        this.track('FrameworkElementAdded', 'sticky:hotspot');
-        this.finish(id);
-    }
-    _createFlow() {
-        const surface = this.surface;
-        if (!surface)
-            return;
-        const { cx, cy } = this.center;
-        const id = addConnector(surface, cx - 110, cy, cx + 110, cy, { rearArrow: true });
-        this.track('FrameworkElementAdded', 'flow');
-        this.finish(id);
-    }
-    render() {
-        return html `
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="button-group-container">
-            ${ES_STICKIES.map(preset => html `<edgeless-tool-icon-button
-                .tooltip=${preset.label}
-                @click=${() => this._createSticky(preset)}
-              >
-                ${squareSwatch(preset.fill)}
-              </edgeless-tool-icon-button>`)}
-            <edgeless-tool-icon-button
-              .tooltip=${ES_HOTSPOT.label}
-              @click=${() => this._createHotspot()}
-            >
-              ${diamondSwatch(ES_HOTSPOT.fill)}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Flow'}
-              @click=${() => this._createFlow()}
-            >
-              ${flowSwatch}
-            </edgeless-tool-icon-button>
-          </div>
-        </div>
-      </edgeless-slide-menu>
-    `;
+        this.owner = 'ddd-event-storming';
+        this.type = EmptyTool;
     }
+    static { this.styles = [
+        EdgelessCommandMenu.styles,
+        css `
+      :host {
+        --labre-command-menu-gap: 10px;
+      }
+    `,
+    ]; }
 }

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

@@ -2,5 +2,6 @@ import { DddSeniorButtonBase } from '@formicoidea/labre-ddd-shared';
 export declare class EdgelessDddEventStormingSeniorButton extends DddSeniorButtonBase {
     protected menuTag: "edgeless-ddd-event-storming-menu";
     protected label: string;
+    protected labelKey: string;
     protected icon: import("lit-html").TemplateResult<2>;
 }

package/dist/toolbar/senior-button.js

@@ -4,6 +4,7 @@ export class EdgelessDddEventStormingSeniorButton extends DddSeniorButtonBase {
         super(...arguments);
         this.menuTag = 'edgeless-ddd-event-storming-menu';
         this.label = 'Event Storming';
+        this.labelKey = 'com.labre.framework.ddd-event-storming';
         this.icon = eventStormingToolbarIcon;
     }
 }

package/dist/toolbar/senior-tool.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 /** Independent senior tool — Event Storming. */
 export const eventStormingSeniorTool = SeniorToolExtension('ddd-event-storming', ({ block }) => ({
     name: 'Event Storming',
+    labelKey: 'com.labre.framework.ddd-event-storming',
     content: html `<edgeless-ddd-event-storming-senior-button
       .edgeless=${block}
     ></edgeless-ddd-event-storming-senior-button>`,

package/dist/translations.d.ts

@@ -0,0 +1,16 @@
+import { type TranslationKeyManifestEntry } from '@formicoidea/labre-core/std';
+/**
+ * THIS framework's contribution to the translation-key manifest — every
+ * `com.labre.*` key Event Storming can hand to `TranslationProvider.t`,
+ * derived from the very declarations the editor registers (never restated).
+ *
+ * Its command labels and descriptions are built from a TEMPLATE, so the
+ * concrete keys exist nowhere but in the declarations themselves and the core
+ * manifest could not restate them even if it wanted to. The contribution
+ * therefore ships WITH the framework: in the bundled distribution
+ * `@formicoidea/labre-framework-ddd-event-storming` carries it, and a host
+ * composes it into its catalogue exactly as it already composes
+ * `eventStormingCommands` into the command registry. See
+ * `packages/affine/all/src/translations.ts`.
+ */
+export declare const eventStormingTranslationEntries: TranslationKeyManifestEntry[];

package/dist/translations.js

@@ -0,0 +1,22 @@
+import { collectTranslationKeys, commandTranslationEntries, mergeTranslationEntries, } from '@formicoidea/labre-core/std';
+import { EVENT_STORMING_BACKGROUND } from './background.js';
+import { eventStormingCommands } from './commands.js';
+import { EVENT_STORMING_NUDGES } from './nudges.js';
+import { EVENT_STORMING_PROFILES } from './profiles.js';
+import { EVENT_STORMING_ROLES } from './roles.js';
+import { EVENT_STORMING_RULES } from './rules.js';
+/**
+ * THIS framework's contribution to the translation-key manifest — every
+ * `com.labre.*` key Event Storming can hand to `TranslationProvider.t`,
+ * derived from the very declarations the editor registers (never restated).
+ *
+ * Its command labels and descriptions are built from a TEMPLATE, so the
+ * concrete keys exist nowhere but in the declarations themselves and the core
+ * manifest could not restate them even if it wanted to. The contribution
+ * therefore ships WITH the framework: in the bundled distribution
+ * `@formicoidea/labre-framework-ddd-event-storming` carries it, and a host
+ * composes it into its catalogue exactly as it already composes
+ * `eventStormingCommands` into the command registry. See
+ * `packages/affine/all/src/translations.ts`.
+ */
+export const eventStormingTranslationEntries = mergeTranslationEntries(commandTranslationEntries(eventStormingCommands), collectTranslationKeys('role', EVENT_STORMING_ROLES), collectTranslationKeys('background', EVENT_STORMING_BACKGROUND), collectTranslationKeys('rule', EVENT_STORMING_RULES), collectTranslationKeys('nudge', EVENT_STORMING_NUDGES), collectTranslationKeys('profile', EVENT_STORMING_PROFILES));

package/dist/view.d.ts

@@ -1,6 +1,22 @@
 import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
 /**
- * Event Storming — independently flag-gated (`ddd-event-storming`).
+ * Event Storming rendering — ALWAYS registered, independent of any flag.
+ * Disabling `ddd-event-storming` hides only the creation tooling (see
+ * {@link DddEventStormingViewExtension}); boards already stormed must still
+ * paint, stay selectable, stay movable and keep their contextual toolbar. See
+ * `docs/adr/0009`.
+ */
+export declare class DddEventStormingRenderViewExtension extends ViewExtensionProvider {
+    name: string;
+    setup(context: ViewExtensionContext): void;
+}
+/**
+ * Event Storming creation tooling — independently flag-gated
+ * (`ddd-event-storming`): the senior toolbar button, its palette and the
+ * validation rules, profiles and quality nudges. Both halves are tooling: a
+ * board stormed while the flag was on keeps rendering when it goes off, it just
+ * stops being checked — and the profile it was put on stays written, unread,
+ * until the flag comes back.
  *
  * Note: its Templates-panel category is registered by the aggregate package's
  * {@link DddTemplatesViewExtension} (gated by `ddd-templates`), so templates

package/dist/view.js

@@ -1,8 +1,54 @@
+import { QualityNudgeExtension, validationToolbarConfig, ValidationProfileExtension, ValidationRuleExtension, } from '@formicoidea/labre-core/blocks/surface';
 import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
+import { ToolbarModuleExtension } from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier, CommandExtension } from '@formicoidea/labre-core/std';
+import { RoleVocabularyExtension } from '@formicoidea/labre-core/std/gfx';
+import { eventStormingCommandIcons, eventStormingCommands } from './commands.js';
 import { eventStormingEffects } from './effects.js';
+import { EventStormingRendererExtension } from './element-renderer.js';
+import { EventStormingInteraction, EventStormingView } from './element-view.js';
+import { EVENT_STORMING_NUDGES } from './nudges.js';
+import { EVENT_STORMING_PROFILES } from './profiles.js';
+import { EVENT_STORMING_ROLES } from './roles.js';
+import { EVENT_STORMING_RULES } from './rules.js';
+import { eventStormingBoardToolbarExtension } from './toolbar/board-config.js';
 import { eventStormingSeniorTool } from './toolbar/senior-tool.js';
 /**
- * Event Storming — independently flag-gated (`ddd-event-storming`).
+ * Event Storming rendering — ALWAYS registered, independent of any flag.
+ * Disabling `ddd-event-storming` hides only the creation tooling (see
+ * {@link DddEventStormingViewExtension}); boards already stormed must still
+ * paint, stay selectable, stay movable and keep their contextual toolbar. See
+ * `docs/adr/0009`.
+ */
+export class DddEventStormingRenderViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-event-storming-render-gfx';
+    }
+    setup(context) {
+        super.setup(context);
+        context.register(EventStormingView);
+        context.register(EventStormingRendererExtension);
+        // The role VOCABULARY, always on. A role is written in the DOCUMENT, not in
+        // the tooling: the direction reveal of a typed flow, the inversion command
+        // and the toolbar entry that must not lie about one all read this, and they
+        // have to keep working on a board stormed while the flag was on and opened
+        // while it is off (`docs/adr/0009`, `docs/adr/0010`). The rules that JUDGE
+        // those roles stay in the flag-gated extension below.
+        context.register(RoleVocabularyExtension(EVENT_STORMING_ROLES));
+        if (this.isEdgeless(context.scope)) {
+            context.register(EventStormingInteraction);
+            context.register(eventStormingBoardToolbarExtension);
+        }
+    }
+}
+/**
+ * Event Storming creation tooling — independently flag-gated
+ * (`ddd-event-storming`): the senior toolbar button, its palette and the
+ * validation rules, profiles and quality nudges. Both halves are tooling: a
+ * board stormed while the flag was on keeps rendering when it goes off, it just
+ * stops being checked — and the profile it was put on stays written, unread,
+ * until the flag comes back.
  *
  * Note: its Templates-panel category is registered by the aggregate package's
  * {@link DddTemplatesViewExtension} (gated by `ddd-templates`), so templates
@@ -20,7 +66,22 @@ export class DddEventStormingViewExtension extends ViewExtensionProvider {
     setup(context) {
         super.setup(context);
         if (this.isEdgeless(context.scope)) {
+            context.register(ValidationRuleExtension(EVENT_STORMING_RULES));
+            context.register(ValidationProfileExtension(EVENT_STORMING_PROFILES));
+            context.register(QualityNudgeExtension(EVENT_STORMING_NUDGES));
+            // The Validation dropdown on a selected board's contextual toolbar. A
+            // SECOND module on the same element, through the `custom:` flavour slot:
+            // `eventStormingBoardToolbarExtension` is registered always-on because a
+            // stored board must keep its resize toggle, while choosing how hard to
+            // check it is tooling and belongs here. The config names no framework —
+            // it reads roles and profiles — so it is the very same object Wardley
+            // registers on its own flavour.
+            context.register(ToolbarModuleExtension({
+                id: BlockFlavourIdentifier('custom:affine:surface:eventStorming'),
+                config: validationToolbarConfig,
+            }));
             context.register(eventStormingSeniorTool);
+            context.register(CommandExtension(eventStormingCommands, eventStormingCommandIcons));
         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-ddd-event-storming",
   "description": "Labre ddd-event-storming framework for @formicoidea/labre-core.",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -27,8 +27,8 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.31.0",
-    "@formicoidea/labre-ddd-shared": "0.31.0",
+    "@formicoidea/labre-core": "0.33.0",
+    "@formicoidea/labre-ddd-shared": "0.33.0",
     "lit": "^3.2.0"
   }
 }