@formicoidea/labre-framework-edgy 0.40.0 → 0.42.0

package/dist/toolbar/node-config.js

@@ -1,31 +1,162 @@
 import { neutralPalettes, paletteColorAction, shapeToolbarConfig, } from '@formicoidea/labre-core/gfx/shape';
 import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+/**
+ * The twelve EDGY swatches' own names, resolved by `resolvePaletteLabel`
+ * (`@labre/affine-components/color-picker`) through each swatch's own
+ * {@link NamedPalette.labelWording} — see Wardley's own
+ * `WARDLEY_PALETTE_WORDINGS` (`../../wardley/src/toolbar/node-config.ts`)
+ * for the same mechanism applied to a sibling framework; the two never
+ * import each other.
+ *
+ * Exported so `../translations.ts` can list them in the manifest under
+ * source `chrome`.
+ */
+export const EDGY_PALETTE_WORDING_IDENTITY = [
+    'com.labre.edgy.palette.identity',
+    'Identity',
+];
+export const EDGY_PALETTE_WORDING_ARCHITECTURE = [
+    'com.labre.edgy.palette.architecture',
+    'Architecture',
+];
+export const EDGY_PALETTE_WORDING_EXPERIENCE = [
+    'com.labre.edgy.palette.experience',
+    'Experience',
+];
+export const EDGY_PALETTE_WORDING_ORGANISATION = [
+    'com.labre.edgy.palette.organisation',
+    'Organisation',
+];
+export const EDGY_PALETTE_WORDING_BRAND = [
+    'com.labre.edgy.palette.brand',
+    'Brand',
+];
+export const EDGY_PALETTE_WORDING_PRODUCT = [
+    'com.labre.edgy.palette.product',
+    'Product',
+];
+export const EDGY_PALETTE_WORDING_IDENTITY_LIGHT = [
+    'com.labre.edgy.palette.identity-light',
+    'Identity light',
+];
+export const EDGY_PALETTE_WORDING_ARCHITECTURE_LIGHT = [
+    'com.labre.edgy.palette.architecture-light',
+    'Architecture light',
+];
+export const EDGY_PALETTE_WORDING_EXPERIENCE_LIGHT = [
+    'com.labre.edgy.palette.experience-light',
+    'Experience light',
+];
+export const EDGY_PALETTE_WORDING_ORGANISATION_LIGHT = [
+    'com.labre.edgy.palette.organisation-light',
+    'Organisation light',
+];
+export const EDGY_PALETTE_WORDING_BRAND_LIGHT = [
+    'com.labre.edgy.palette.brand-light',
+    'Brand light',
+];
+export const EDGY_PALETTE_WORDING_PRODUCT_LIGHT = [
+    'com.labre.edgy.palette.product-light',
+    'Product light',
+];
+export const EDGY_PALETTE_WORDINGS = [
+    EDGY_PALETTE_WORDING_IDENTITY,
+    EDGY_PALETTE_WORDING_ARCHITECTURE,
+    EDGY_PALETTE_WORDING_EXPERIENCE,
+    EDGY_PALETTE_WORDING_ORGANISATION,
+    EDGY_PALETTE_WORDING_BRAND,
+    EDGY_PALETTE_WORDING_PRODUCT,
+    EDGY_PALETTE_WORDING_IDENTITY_LIGHT,
+    EDGY_PALETTE_WORDING_ARCHITECTURE_LIGHT,
+    EDGY_PALETTE_WORDING_EXPERIENCE_LIGHT,
+    EDGY_PALETTE_WORDING_ORGANISATION_LIGHT,
+    EDGY_PALETTE_WORDING_BRAND_LIGHT,
+    EDGY_PALETTE_WORDING_PRODUCT_LIGHT,
+];
 /**
  * The typical EDGY palette, surfaced as ready-made swatches in the EDGY node
  * color picker (facet + intersection colours, saturated then pastel), followed
  * by the default editor palette.
  */
 const EDGY_PALETTES = [
-    { key: 'Identity', value: '#00ea4e' },
-    { key: 'Architecture', value: '#034cee' },
-    { key: 'Experience', value: '#ff0056' },
-    { key: 'Organisation', value: '#00caf4' },
-    { key: 'Brand', value: '#ffa500' },
-    { key: 'Product', value: '#cf00ff' },
-    { key: 'Identity light', value: '#80ffb7' },
-    { key: 'Architecture light', value: '#a6c0ff' },
-    { key: 'Experience light', value: '#ff99bd' },
-    { key: 'Organisation light', value: '#80eaff' },
-    { key: 'Brand light', value: '#ffd580' },
-    { key: 'Product light', value: '#e599ff' },
+    {
+        key: 'Identity',
+        value: '#00ea4e',
+        labelWording: EDGY_PALETTE_WORDING_IDENTITY,
+    },
+    {
+        key: 'Architecture',
+        value: '#034cee',
+        labelWording: EDGY_PALETTE_WORDING_ARCHITECTURE,
+    },
+    {
+        key: 'Experience',
+        value: '#ff0056',
+        labelWording: EDGY_PALETTE_WORDING_EXPERIENCE,
+    },
+    {
+        key: 'Organisation',
+        value: '#00caf4',
+        labelWording: EDGY_PALETTE_WORDING_ORGANISATION,
+    },
+    { key: 'Brand', value: '#ffa500', labelWording: EDGY_PALETTE_WORDING_BRAND },
+    {
+        key: 'Product',
+        value: '#cf00ff',
+        labelWording: EDGY_PALETTE_WORDING_PRODUCT,
+    },
+    {
+        key: 'Identity light',
+        value: '#80ffb7',
+        labelWording: EDGY_PALETTE_WORDING_IDENTITY_LIGHT,
+    },
+    {
+        key: 'Architecture light',
+        value: '#a6c0ff',
+        labelWording: EDGY_PALETTE_WORDING_ARCHITECTURE_LIGHT,
+    },
+    {
+        key: 'Experience light',
+        value: '#ff99bd',
+        labelWording: EDGY_PALETTE_WORDING_EXPERIENCE_LIGHT,
+    },
+    {
+        key: 'Organisation light',
+        value: '#80eaff',
+        labelWording: EDGY_PALETTE_WORDING_ORGANISATION_LIGHT,
+    },
+    {
+        key: 'Brand light',
+        value: '#ffd580',
+        labelWording: EDGY_PALETTE_WORDING_BRAND_LIGHT,
+    },
+    {
+        key: 'Product light',
+        value: '#e599ff',
+        labelWording: EDGY_PALETTE_WORDING_PRODUCT_LIGHT,
+    },
 ];
 /**
  * From the default editor palette we keep ONLY the neutrals (greys, white,
  * black, transparent) — the historical colours are dropped in favour of the
  * EDGY swatches above.
  */
-const EDGY_PALETTE_LIST = [...EDGY_PALETTES, ...neutralPalettes()];
+export const EDGY_PALETTE_LIST = [
+    ...EDGY_PALETTES,
+    ...neutralPalettes(),
+];
+/**
+ * EDGY's page of the colour pickers' carousel (`docs/adr/0027`) — the same
+ * list its node picker is seeded with, offered on every other picker too.
+ * Registered from the FLAG-GATED view extension: offering hues is tooling
+ * (`docs/adr/0009`).
+ */
+export const EDGY_FRAMEWORK_PALETTE = {
+    framework: 'edgy',
+    labelWording: ['com.labre.framework.edgy', 'EDGY'],
+    palettes: EDGY_PALETTE_LIST,
+};
 /**
  * EDGY fill / stroke colour picker — identical to the shape one but seeded with
  * the EDGY palette swatches (`.palettes`).

package/dist/translations.js

@@ -1,11 +1,83 @@
 import { collectTranslationKeys, commandCategoryTranslationEntries, commandTranslationEntries, mergeTranslationEntries, } from '@formicoidea/labre-core/std';
-import { edgyCommands } from './commands.js';
+import { edgyCommands, EDGY_LEGEND_CHROME_WORDINGS } from './commands.js';
+import { EDGY_DYNAMIC_NODES, EDGY_DYNAMIC_VERBS, EDGY_ZONES, edgyElementLabel, edgyElementLabelKey, edgyVerbSeedKey, } from './metamodel.js';
 import { NODE_LABEL, nodeLabelKey } from './node/consts.js';
 import { EDGY_NUDGES } from './nudges.js';
 import { EDGY_PROFILES } from './profiles.js';
 import { EDGY_READING } from './reading.js';
 import { EDGY_ROLES } from './roles.js';
 import { EDGY_RULES } from './rules.js';
+import { EDGY_TEMPLATE_NAME_CUSTOMER_JOURNEY, EDGY_TEMPLATE_NAME_FACETS_OVERVIEW, EDGY_TEMPLATE_NAME_ORGANISATION_CHART, EDGY_TEMPLATE_NAME_SERVICE_BLUEPRINT, EDGY_TEMPLATE_SEED, } from './templates/index.js';
+import { EDGY_TOOLBAR_WORDINGS } from './toolbar/config.js';
+import { EDGY_PALETTE_WORDINGS } from './toolbar/node-config.js';
+/**
+ * The name every one of the 12 official elements and the 6 Venn zones is
+ * seeded with — one key per distinct lowercase word (`organisation`, `brand`
+ * and `product` name BOTH an element and an intersection zone, so the same
+ * key covers both), reused verbatim by `templates/dynamic.ts`,
+ * `templates/index.ts` and the facets background's own creation site
+ * (`actions.ts`).
+ */
+const elementAndZoneSeedEntries = () => {
+    const names = new Set([
+        ...Object.keys(EDGY_DYNAMIC_NODES),
+        ...EDGY_ZONES.map(zone => zone.id),
+    ]);
+    return [...names].map(name => ({
+        key: edgyElementLabelKey(name),
+        fallback: edgyElementLabel(name),
+        source: 'seed',
+    }));
+};
+/** The legend's own section titles (see {@link EDGY_LEGEND_CHROME_WORDINGS}). */
+const legendChromeEntries = () => EDGY_LEGEND_CHROME_WORDINGS.map(([key, fallback]) => ({
+    key,
+    fallback,
+    source: 'chrome',
+}));
+/** The toolbar tooltips this framework used to hard-code as English literals. */
+const toolbarChromeEntries = () => EDGY_TOOLBAR_WORDINGS.map(([key, fallback]) => ({
+    key,
+    fallback,
+    source: 'chrome',
+}));
+/**
+ * The twelve node-colour-picker swatches' own names
+ * (`EDGY_PALETTE_WORDINGS`, `toolbar/node-config.ts`) — chrome, re-rendered
+ * on every locale switch, never seeded into a document.
+ */
+const paletteWordingEntries = () => EDGY_PALETTE_WORDINGS.map(([key, fallback]) => ({
+    key,
+    fallback,
+    source: 'chrome',
+}));
+/** The metamodel's 24 canonical verbs, drawn raw as a connector label. */
+const verbSeedEntries = () => EDGY_DYNAMIC_VERBS.map(verb => ({
+    key: edgyVerbSeedKey(verb),
+    fallback: verb,
+    source: 'seed',
+}));
+/**
+ * The seeds that belong to the four hand-composed scenes only (a lane title,
+ * a case name, a step counter…) — derived from `EDGY_TEMPLATE_SEED`, the very
+ * table the scenes read at placement.
+ */
+const sceneSeedEntries = () => Object.values(EDGY_TEMPLATE_SEED).map(({ key, fallback }) => ({
+    key,
+    fallback,
+    source: 'seed',
+}));
+/**
+ * The four hand-composed scenes' own tile names — chrome, not seeds: a
+ * `Template.nameKey`, re-resolved every time the panel opens, never written
+ * into a document. None of the four derives from a command.
+ */
+const templateNameEntries = () => [
+    EDGY_TEMPLATE_NAME_FACETS_OVERVIEW,
+    EDGY_TEMPLATE_NAME_CUSTOMER_JOURNEY,
+    EDGY_TEMPLATE_NAME_SERVICE_BLUEPRINT,
+    EDGY_TEMPLATE_NAME_ORGANISATION_CHART,
+].map(([key, fallback]) => ({ key, fallback, source: 'chrome' }));
 /**
  * THIS framework's contribution to the translation-key manifest — every
  * `com.labre.*` key EDGY can hand to `TranslationProvider.t`, derived from the
@@ -42,7 +114,7 @@ Object.entries(NODE_LABEL).map(([kind, label]) => ({
     key: nodeLabelKey(kind),
     fallback: label,
     source: 'seed',
-})), 
+})), elementAndZoneSeedEntries(), verbSeedEntries(), sceneSeedEntries(), templateNameEntries(), legendChromeEntries(), toolbarChromeEntries(), paletteWordingEntries(), 
 // LAST, and the order is load-bearing: a reading profile carries the
 // framework's own `roles`, so walking it reaches every role key the line
 // above already named. `mergeTranslationEntries` keeps the FIRST

package/dist/view.js

@@ -1,8 +1,8 @@
-import { QualityNudgeExtension, ReadingProfileExtension, SpotlightHostExtension, ValidationProfileExtension, ValidationRuleExtension, validationToolbarConfig, } from '@formicoidea/labre-core/blocks/surface';
-import { ToolbarModuleExtension } from '@formicoidea/labre-core/shared/services';
+import { QualityNudgeExtension, ReadingProfileExtension, SpotlightHostExtension, ValidationProfileExtension, ValidationRuleExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { FrameworkPaletteExtension } from '@formicoidea/labre-core/components/color-picker';
 import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
 import { TemplateCategoryExtension } from '@formicoidea/labre-core/gfx/template';
-import { BlockFlavourIdentifier, CommandExtension } from '@formicoidea/labre-core/std';
+import { CommandExtension } from '@formicoidea/labre-core/std';
 import { RoleVocabularyExtension } from '@formicoidea/labre-core/std/gfx';
 import { edgyCommandIcons, edgyCommands } from './commands.js';
 import { effects } from './effects.js';
@@ -19,8 +19,8 @@ import { EdgyFacetsRendererExtension } from './element-renderer.js';
 import { EdgyInteraction, EdgyView } from './element-view.js';
 import { EdgyNodeRendererExtension } from './node/node-renderer.js';
 import { EdgyNodeView } from './node/node-view.js';
-import { edgyBoardToolbarExtension, edgyToolbarExtension, } from './toolbar/config.js';
-import { edgyNodeToolbarExtension } from './toolbar/node-config.js';
+import { edgyBoardToolbarExtension, edgyBoardToolingToolbarExtension, edgyToolbarExtension, edgyToolingToolbarExtension, } from './toolbar/config.js';
+import { EDGY_FRAMEWORK_PALETTE, edgyNodeToolbarExtension, } from './toolbar/node-config.js';
 import { edgySeniorTool } from './toolbar/senior-tool.js';
 /**
  * EDGY rendering — ALWAYS registered, independent of any flag. Disabling `edgy`
@@ -88,22 +88,17 @@ export class EdgyViewExtension extends ViewExtensionProvider {
             // including the two the PO deliberately kept out of `rules.ts` on
             // 26/08/2026 (see `./nudges.ts`).
             context.register(QualityNudgeExtension(EDGY_NUDGES));
-            // The Validation dropdown on a selected background's contextual toolbar.
-            // A SECOND module on the same element, through the `custom:` flavour slot
-            // (the pattern `gfx/wardley` uses on its map): the rendering toolbars are
-            // registered always-on because a stored board must keep its toggles,
-            // while choosing how hard to check it is tooling and belongs here. The
-            // config itself names no framework — it reads roles and profiles — so
-            // BOTH EDGY frames register the very same object.
-            for (const flavour of [
-                'custom:affine:surface:edgy',
-                'custom:affine:surface:edgyBoard',
-            ]) {
-                context.register(ToolbarModuleExtension({
-                    id: BlockFlavourIdentifier(flavour),
-                    config: validationToolbarConfig,
-                }));
-            }
+            // The LEGEND button and the Validation dropdown on a selected
+            // background's contextual toolbar. A SECOND module on the same element,
+            // through the `custom:` flavour slot (the pattern `gfx/wardley` uses on
+            // its map): the rendering toolbars are registered always-on because a
+            // stored board must keep its appearance toggles, while asking the
+            // framework what its notation means, and choosing how hard to check the
+            // board, are both tooling and belong here (`docs/adr/0026`). One module
+            // per frame and not one shared object, because the button has to know
+            // WHICH background it is documenting.
+            context.register(edgyToolingToolbarExtension);
+            context.register(edgyBoardToolingToolbarExtension);
             // The resolver that turns a hand-drawn `edgy:relation` into the verb the
             // metamodel gives its two ends. It belongs HERE and not in the always-on
             // extension above, and the test is the one `docs/adr/0009` asks: does it
@@ -122,6 +117,11 @@ export class EdgyViewExtension extends ViewExtensionProvider {
             // profile, so it goes with the flag without either side naming the other.
             context.register(ReadingProfileExtension(EDGY_READING));
             context.register(edgySeniorTool);
+            // EDGY's page of the colour pickers' carousel (`docs/adr/0027`). Here,
+            // beside the senior tool, because offering hues is TOOLING — the colours
+            // already painted on a stored board are content and do not move
+            // (`docs/adr/0009`).
+            context.register(FrameworkPaletteExtension(EDGY_FRAMEWORK_PALETTE));
             // The Templates-panel category — tooling, so it goes with the flag (#244).
             context.register(TemplateCategoryExtension(edgyTemplateCategory));
             // The eight EDGY commands: the sub-menu renders them, Settings ›

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-edgy",
   "description": "Labre edgy framework for @formicoidea/labre-core.",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,8 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.40.0",
-    "@formicoidea/labre-ddd-shared": "0.40.0",
+    "@formicoidea/labre-core": "0.42.0",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0",
     "yjs": "^13.6.21"

package/dist/legend.d.ts

@@ -1,2 +0,0 @@
-import { type AutoLegendSpec } from '@formicoidea/labre-ddd-shared';
-export declare const EDGY_AUTO_LEGEND: AutoLegendSpec;

package/dist/legend.js

@@ -1,109 +0,0 @@
-import { roleLabel, } from '@formicoidea/labre-ddd-shared';
-import { EDGY_DYNAMIC_NODES, EDGY_ZONE_FILL, EDGY_ZONES, edgyElementLabel, } from './metamodel.js';
-import { NODE_FILL, NODE_STROKE } from './node/consts.js';
-import { EDGY_ROLE, EDGY_ROLES } from './roles.js';
-/**
- * What an EDGY background's automatic legend can say — a TABLE, and nothing
- * else: the scan, the placement and the box are `createAutoLegend`'s job, the
- * same generic the three DDD backgrounds were given
- * (`@labre/affine-gfx-ddd-shared`, `shared/legend-auto.ts`). EDGY takes a
- * dependency on that package for the generic and the box prefab alone; moving
- * them to a neutral home would be the tidier answer and is not worth the churn
- * of this fix.
- *
- * Every row is DERIVED — from the metamodel (`./metamodel.ts`: which elements
- * exist, which zone each belongs to, what colour that zone is drawn in) and
- * from the role vocabulary's own labels (`./roles.ts`). Nothing here is
- * restated: a thirteenth element added to the metamodel gets its legend row the
- * same way it gets its role, with no edit to this file.
- *
- * ## The order
- *
- * By ZONE, and the order of the table carries it: the three facets first
- * (Identity, Architecture, Experience), then the three intersections in one
- * section, then the four base elements, then the relations — which is the
- * reading order of {@link EDGY_ZONES} and, before it, of the Venn itself.
- */
-/** One row per official element of `zone`, in the metamodel's own order. */
-function zoneEntries(zone) {
-    return Object.entries(EDGY_DYNAMIC_NODES)
-        .filter(([, node]) => node.zone === zone)
-        .map(([name]) => ({
-        role: EDGY_ROLE[name],
-        row: {
-            swatch: 'square',
-            // The zone's fill, which IS what the diagram paints the element with.
-            color: EDGY_ZONE_FILL[zone],
-            label: roleLabel(EDGY_ROLES, EDGY_ROLE[name]),
-        },
-    }));
-}
-const FACET_SECTIONS = EDGY_ZONES.filter(zone => zone.group === 'facet').map(zone => ({
-    title: edgyElementLabel(zone.id),
-    entries: zoneEntries(zone.id),
-}));
-/**
- * The three intersection elements in ONE section: Organisation, Product and
- * Brand are not three facets, they are the three lenses between them, and the
- * diagram says so by drawing them in the overlaps. Each keeps its own colour.
- */
-const INTERSECTIONS_SECTION = {
-    title: 'Intersections',
-    entries: EDGY_ZONES.filter(zone => zone.group === 'intersection').flatMap(zone => zoneEntries(zone.id)),
-};
-/**
- * The four base elements, listed only when one is on the board BARE — an
- * element the user dropped from the toolbox and left as a People, an Outcome,
- * an Object or an Activity, without saying which of the twelve it is. White,
- * because that is the fill the palette gives them (`node/consts.ts`).
- *
- * `exact` is what makes "bare" true. Detection is otherwise an ancestor walk,
- * and the twelve official elements specialise these four — Content is an
- * object, Story an activity — so an "Object" row would appear on a board
- * carrying nothing but Contents, keyed to a white swatch that is drawn nowhere
- * on it. The relation entry below keeps the walk, because there the parent row
- * IS the fair summary: a board carrying `edgy:expresses` carries a relation.
- */
-const BASE_SECTION = {
-    title: 'Base elements',
-    entries: ['people', 'outcome', 'object', 'activity'].map(kind => ({
-        role: EDGY_ROLE[kind],
-        exact: true,
-        row: {
-            swatch: 'square',
-            color: NODE_FILL,
-            label: roleLabel(EDGY_ROLES, EDGY_ROLE[kind]),
-        },
-    })),
-};
-/**
- * ONE row for the whole relation family, keyed on the PARENT role: a board
- * carrying "content expresses purpose" carries `edgy:expresses`, which is a
- * relation, and that is all the legend has to say. Twenty-two rows naming the
- * verbs would restate the metamodel rather than document the drawing — and the
- * verb travels on the link itself, visible, where it belongs.
- */
-const RELATIONS_SECTION = {
-    title: 'Relations',
-    entries: [
-        {
-            role: EDGY_ROLE.relation,
-            row: {
-                swatch: 'line',
-                // The stroke `activateEdgyRelation` arms the connector tool with.
-                color: NODE_STROKE,
-                label: roleLabel(EDGY_ROLES, EDGY_ROLE.relation),
-            },
-        },
-    ],
-};
-export const EDGY_AUTO_LEGEND = {
-    title: 'Legend',
-    roles: EDGY_ROLES,
-    sections: [
-        ...FACET_SECTIONS,
-        INTERSECTIONS_SECTION,
-        BASE_SECTION,
-        RELATIONS_SECTION,
-    ],
-};