@formicoidea/labre-framework-cynefin 0.23.0 → 0.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/package.json +2 -2
  2. package/src/cynefin/consts.ts +188 -188
  3. package/src/cynefin/element-renderer.ts +156 -156
  4. package/src/cynefin/element-view.ts +32 -32
  5. package/src/cynefin/toolbar/config.ts +60 -60
  6. package/src/estuarine/consts.ts +69 -69
  7. package/src/estuarine/element-renderer.ts +122 -122
  8. package/src/estuarine/element-view.ts +32 -32
  9. package/src/estuarine/toolbar/config.ts +65 -65
  10. package/src/toolbar/menu.ts +156 -156
  11. package/src/toolbar/senior-button.ts +95 -95
  12. package/src/toolbar/senior-tool.ts +15 -15
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@formicoidea/labre-framework-cynefin",
3
3
  "description": "Labre cynefin-estuarine framework for @formicoidea/labre-core.",
4
- "version": "0.23.0",
4
+ "version": "0.23.2",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "author": "lajola",
@@ -18,7 +18,7 @@
18
18
  "src"
19
19
  ],
20
20
  "dependencies": {
21
- "@formicoidea/labre-core": "0.23.0",
21
+ "@formicoidea/labre-core": "0.23.2",
22
22
  "lit": "^3.2.0"
23
23
  }
24
24
  }
package/src/cynefin/consts.ts CHANGED
@@ -1,188 +1,188 @@
1
- /**
2
- * Visual constants for the Liminal Cynefin diagram, reproduced from the official
3
- * SVG (viewBox 0 0 1080 777). All geometry is authored in that fixed reference
4
- * space and scaled uniformly to the element bounds by the renderer.
5
- */
6
-
7
- export const REF_W = 1080;
8
- export const REF_H = 777;
9
-
10
- export const COLORS = {
11
- boundary: '#333333',
12
- teal: '#2a9d99',
13
- /** Domain headings + subheadings (h1 / h2). */
14
- heading: '#6d6e71',
15
- /** Body, small annotations and the big A / C glyphs. */
16
- body: '#231f20',
17
- } as const;
18
-
19
- /**
20
- * Dark boundary strokes drawn *behind* the teal "iterate" curve:
21
- * [svg path, lineWidth, miterJoin].
22
- */
23
- export const DARK_BACK_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
24
- // Main arc: top segment (Complex|Complicated) then left segment (Complex|Chaotic)
25
- ['M 550.1 17 A 296 296 0 0 1 338 328.5 A 448.7 448.7 0 0 1 26 331', 15.5, false],
26
- // Thin "Confusion" arc sweeping down towards the cliff
27
- ['M 649 294 C 644 382, 588 462, 440 506', 5, false],
28
- ];
29
-
30
- /** Teal "iterate" curve, drawn *over* the back arcs and the dashed paving. */
31
- export const TEAL_PATH =
32
- 'M 475.1 9.1 C 477.5 13.3, 484.4 26.1, 489.3 34.6 C 494.2 43.1, 499.7 51.7, 504.4 60.2 C 509.1 68.7, 513.4 77.2, 517.6 85.7 C 521.8 94.2, 525.7 102.7, 529.7 111.2 C 533.7 119.7, 538.1 128.3, 541.8 136.8 C 545.5 145.3, 549.0 153.8, 551.9 162.3 C 554.8 170.8, 557.1 179.3, 559.0 187.8 C 560.9 196.3, 562.0 204.8, 563.0 213.3 C 564.0 221.8, 564.8 230.4, 565.0 238.9 C 565.2 247.4, 565.0 255.9, 564.0 264.4 C 563.0 272.9, 561.2 281.4, 559.0 289.9 C 556.8 298.4, 554.6 307.0, 550.9 315.5 C 547.2 324.0, 542.3 332.5, 536.8 341.0 C 531.2 349.5, 524.9 358.3, 517.6 366.5 C 510.4 374.7, 501.6 383.0, 493.3 390.0 C 485.0 397.0, 476.4 403.1, 468.0 408.4 C 459.6 413.7, 451.2 418.0, 442.8 421.7 C 434.4 425.4, 425.9 427.4, 417.5 430.8 C 409.1 434.2, 400.3 437.5, 392.2 442.1 C 384.1 446.7, 377.1 455.5, 369.0 458.4 C 360.9 461.3, 352.1 459.4, 343.7 459.4 C 335.3 459.4, 326.9 459.1, 318.5 458.4 C 310.1 457.7, 301.6 456.8, 293.2 455.4 C 284.8 454.0, 276.4 452.2, 268.0 450.3 C 259.6 448.4, 251.1 446.2, 242.7 444.1 C 234.3 442.1, 225.8 440.0, 217.4 438.0 C 209.0 436.0, 200.6 434.4, 192.2 431.9 C 183.8 429.3, 175.3 426.1, 166.9 422.7 C 158.5 419.3, 150.0 415.5, 141.6 411.4 C 133.2 407.3, 124.8 403.3, 116.4 398.2 C 108.0 393.1, 99.5 386.9, 91.1 380.8 C 82.7 374.7, 74.3 368.7, 65.9 361.4 C 57.5 354.1, 45.7 342.8, 40.6 336.9 C 35.5 330.9, 36.4 327.6, 35.5 325.7';
33
- export const TEAL_WIDTH = 10.5;
34
-
35
- /**
36
- * Dark boundary strokes drawn *over* the teal curve:
37
- * [svg path, lineWidth, miterJoin].
38
- */
39
- export const DARK_FRONT_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
40
- // Thick descending branch with the bottom elbow (right edge of the cliff)
41
- ['M 340 332 C 390 440, 437 525, 472 632 Q 479 658, 453 700', 15.5, true],
42
- // Thin left line (left edge of the cliff)
43
- ['M 345 356 C 372 440, 408 540, 413 655 C 414 685, 412 710, 412 738', 4, false],
44
- ];
45
-
46
- /** Cliff hatching: [x1,y1,x2,y2], lineWidth 3. */
47
- export const HATCHES: ReadonlyArray<readonly [number, number, number, number]> = [
48
- [375, 420, 371, 431],
49
- [386, 443, 380, 461],
50
- [395, 462, 386, 483],
51
- [402, 477, 392, 506],
52
- [412, 497, 400, 539],
53
- [417, 511, 403, 558],
54
- [427, 533, 409, 591],
55
- [435, 551, 411, 612],
56
- [444, 573, 415, 659],
57
- [455, 603, 415, 700],
58
- ];
59
-
60
- /** Dashed Complicated↔Clear boundary, as oriented square pavings: [x,y,size,rotateDeg]. */
61
- export const DASH_RECTS: ReadonlyArray<readonly [number, number, number, number]> = [
62
- [511, 245, 13.8, 206.8], [530, 255.5, 13.7, 205.2], [549.5, 265.5, 13.6, 203.5],
63
- [569.5, 274.5, 13.5, 201.9], [590, 282.5, 13.5, 200.2], [610.5, 289.5, 13.4, 198.6],
64
- [631, 296, 13.3, 196.9], [673.5, 307, 13.2, 193.6], [695, 311.5, 13.1, 192.0],
65
- [716, 315.5, 13.0, 190.3], [738, 319, 12.9, 188.7], [759.5, 322, 12.8, 187.0],
66
- [781, 324.5, 12.8, 185.4], [803, 325.5, 12.7, 183.7], [824.5, 326.5, 12.6, 182.1],
67
- [846, 327.5, 12.5, 180.5], [868, 327.5, 12.4, 178.8], [889.5, 326.5, 12.3, 177.2],
68
- [912, 325.5, 12.2, 175.5], [933, 323.5, 12.1, 173.9], [954.5, 321.5, 12.1, 172.2],
69
- [976, 318, 12.0, 170.6], [998, 314, 11.9, 168.9], [1019, 310, 11.8, 167.3],
70
- ];
71
-
72
- /**
73
- * The four domain blocks. Each has a heading (h1) and, when descriptions are
74
- * shown, a subheading (h2) and three decision lines whose lead word is bold.
75
- * All three text levels share the block's left `x`.
76
- */
77
- export interface DomainBlock {
78
- heading: string;
79
- /** Left edge shared by heading, subheading and body lines. */
80
- x: number;
81
- /** Heading (h1) baseline. */
82
- hy: number;
83
- subheading: string;
84
- /** Subheading (h2) baseline. */
85
- sy: number;
86
- /** Decision lines: bold lead word + remainder, with their baseline. */
87
- lines: ReadonlyArray<{ lead: string; rest: string; y: number }>;
88
- }
89
-
90
- export const DOMAINS: ReadonlyArray<DomainBlock> = [
91
- {
92
- heading: 'Complex',
93
- x: 37,
94
- hy: 31,
95
- subheading: 'Adaptive system',
96
- sy: 53,
97
- lines: [
98
- { lead: 'Probe', rest: ' the context with parallel experiments', y: 71 },
99
- { lead: 'Sense', rest: ' how the context reacts', y: 90 },
100
- { lead: 'Respond', rest: ' by amplifying positive experiments', y: 109 },
101
- ],
102
- },
103
- {
104
- heading: 'Complicated',
105
- x: 779,
106
- hy: 31,
107
- subheading: 'Ordered system',
108
- sy: 53,
109
- lines: [
110
- { lead: 'Sense', rest: ' the context with analytical methods', y: 71 },
111
- { lead: 'Analyse', rest: ' observations', y: 90 },
112
- { lead: 'Respond', rest: ' by applying one of many good solutions', y: 109 },
113
- ],
114
- },
115
- {
116
- heading: 'Chaotic',
117
- x: 37,
118
- hy: 587,
119
- subheading: 'Un-ordered system',
120
- sy: 609,
121
- lines: [
122
- { lead: 'Act', rest: ' on the context to stabilize (it or yourself)', y: 627 },
123
- { lead: 'Sense', rest: ' how the context reacts', y: 646 },
124
- { lead: 'Respond', rest: ' by re-acting', y: 665 },
125
- ],
126
- },
127
- {
128
- heading: 'Clear',
129
- x: 779,
130
- hy: 587,
131
- subheading: 'Ordered system',
132
- sy: 609,
133
- lines: [
134
- { lead: 'Sense', rest: ' the context with analytical methods', y: 627 },
135
- { lead: 'Categorize', rest: ' observations', y: 646 },
136
- { lead: 'Respond', rest: ' by applying tried and true practices', y: 665 },
137
- ],
138
- },
139
- ];
140
-
141
- /** Teal annotation labels (centered): [text, x, y]. */
142
- export const TEAL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
143
- ['iterate', 510, 16],
144
- ['iterate', 533, 230],
145
- ['strategy by design', 257, 225],
146
- ['radical innovation', 268, 390],
147
- ['by design', 268, 406],
148
- ['extreme repurposing', 217, 496],
149
- ['good practice', 814, 196],
150
- ['best practice', 751, 459],
151
- ];
152
-
153
- /** Small exaptation sub-labels (centered): [text, x, y]. */
154
- export const SMALL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
155
- ['dispositional exaptation', 257, 239],
156
- ['stimulated exaptation', 268, 419],
157
- ['stress-based exaptation', 217, 510],
158
- ];
159
-
160
- /**
161
- * The two central markers — Aporia (A) and Confusion (C) — each a big glyph and
162
- * a name, with an optional teal note ("prepare to exit"). All centered.
163
- */
164
- export interface Marker {
165
- letter: string;
166
- /** Big glyph position. */
167
- lx: number;
168
- ly: number;
169
- name: string;
170
- /** Name (body) position. */
171
- nx: number;
172
- ny: number;
173
- /** Optional teal note position + text. */
174
- note?: { text: string; x: number; y: number };
175
- }
176
-
177
- export const MARKERS: ReadonlyArray<Marker> = [
178
- {
179
- letter: 'A',
180
- lx: 444,
181
- ly: 334,
182
- name: 'Aporia',
183
- nx: 447,
184
- ny: 349,
185
- note: { text: 'prepare to exit', x: 449, y: 366 },
186
- },
187
- { letter: 'C', lx: 531, ly: 419, name: 'Confusion', nx: 529, ny: 436 },
188
- ];
1
+ /**
2
+ * Visual constants for the Liminal Cynefin diagram, reproduced from the official
3
+ * SVG (viewBox 0 0 1080 777). All geometry is authored in that fixed reference
4
+ * space and scaled uniformly to the element bounds by the renderer.
5
+ */
6
+
7
+ export const REF_W = 1080;
8
+ export const REF_H = 777;
9
+
10
+ export const COLORS = {
11
+ boundary: '#333333',
12
+ teal: '#2a9d99',
13
+ /** Domain headings + subheadings (h1 / h2). */
14
+ heading: '#6d6e71',
15
+ /** Body, small annotations and the big A / C glyphs. */
16
+ body: '#231f20',
17
+ } as const;
18
+
19
+ /**
20
+ * Dark boundary strokes drawn *behind* the teal "iterate" curve:
21
+ * [svg path, lineWidth, miterJoin].
22
+ */
23
+ export const DARK_BACK_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
24
+ // Main arc: top segment (Complex|Complicated) then left segment (Complex|Chaotic)
25
+ ['M 550.1 17 A 296 296 0 0 1 338 328.5 A 448.7 448.7 0 0 1 26 331', 15.5, false],
26
+ // Thin "Confusion" arc sweeping down towards the cliff
27
+ ['M 649 294 C 644 382, 588 462, 440 506', 5, false],
28
+ ];
29
+
30
+ /** Teal "iterate" curve, drawn *over* the back arcs and the dashed paving. */
31
+ export const TEAL_PATH =
32
+ 'M 475.1 9.1 C 477.5 13.3, 484.4 26.1, 489.3 34.6 C 494.2 43.1, 499.7 51.7, 504.4 60.2 C 509.1 68.7, 513.4 77.2, 517.6 85.7 C 521.8 94.2, 525.7 102.7, 529.7 111.2 C 533.7 119.7, 538.1 128.3, 541.8 136.8 C 545.5 145.3, 549.0 153.8, 551.9 162.3 C 554.8 170.8, 557.1 179.3, 559.0 187.8 C 560.9 196.3, 562.0 204.8, 563.0 213.3 C 564.0 221.8, 564.8 230.4, 565.0 238.9 C 565.2 247.4, 565.0 255.9, 564.0 264.4 C 563.0 272.9, 561.2 281.4, 559.0 289.9 C 556.8 298.4, 554.6 307.0, 550.9 315.5 C 547.2 324.0, 542.3 332.5, 536.8 341.0 C 531.2 349.5, 524.9 358.3, 517.6 366.5 C 510.4 374.7, 501.6 383.0, 493.3 390.0 C 485.0 397.0, 476.4 403.1, 468.0 408.4 C 459.6 413.7, 451.2 418.0, 442.8 421.7 C 434.4 425.4, 425.9 427.4, 417.5 430.8 C 409.1 434.2, 400.3 437.5, 392.2 442.1 C 384.1 446.7, 377.1 455.5, 369.0 458.4 C 360.9 461.3, 352.1 459.4, 343.7 459.4 C 335.3 459.4, 326.9 459.1, 318.5 458.4 C 310.1 457.7, 301.6 456.8, 293.2 455.4 C 284.8 454.0, 276.4 452.2, 268.0 450.3 C 259.6 448.4, 251.1 446.2, 242.7 444.1 C 234.3 442.1, 225.8 440.0, 217.4 438.0 C 209.0 436.0, 200.6 434.4, 192.2 431.9 C 183.8 429.3, 175.3 426.1, 166.9 422.7 C 158.5 419.3, 150.0 415.5, 141.6 411.4 C 133.2 407.3, 124.8 403.3, 116.4 398.2 C 108.0 393.1, 99.5 386.9, 91.1 380.8 C 82.7 374.7, 74.3 368.7, 65.9 361.4 C 57.5 354.1, 45.7 342.8, 40.6 336.9 C 35.5 330.9, 36.4 327.6, 35.5 325.7';
33
+ export const TEAL_WIDTH = 10.5;
34
+
35
+ /**
36
+ * Dark boundary strokes drawn *over* the teal curve:
37
+ * [svg path, lineWidth, miterJoin].
38
+ */
39
+ export const DARK_FRONT_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
40
+ // Thick descending branch with the bottom elbow (right edge of the cliff)
41
+ ['M 340 332 C 390 440, 437 525, 472 632 Q 479 658, 453 700', 15.5, true],
42
+ // Thin left line (left edge of the cliff)
43
+ ['M 345 356 C 372 440, 408 540, 413 655 C 414 685, 412 710, 412 738', 4, false],
44
+ ];
45
+
46
+ /** Cliff hatching: [x1,y1,x2,y2], lineWidth 3. */
47
+ export const HATCHES: ReadonlyArray<readonly [number, number, number, number]> = [
48
+ [375, 420, 371, 431],
49
+ [386, 443, 380, 461],
50
+ [395, 462, 386, 483],
51
+ [402, 477, 392, 506],
52
+ [412, 497, 400, 539],
53
+ [417, 511, 403, 558],
54
+ [427, 533, 409, 591],
55
+ [435, 551, 411, 612],
56
+ [444, 573, 415, 659],
57
+ [455, 603, 415, 700],
58
+ ];
59
+
60
+ /** Dashed Complicated↔Clear boundary, as oriented square pavings: [x,y,size,rotateDeg]. */
61
+ export const DASH_RECTS: ReadonlyArray<readonly [number, number, number, number]> = [
62
+ [511, 245, 13.8, 206.8], [530, 255.5, 13.7, 205.2], [549.5, 265.5, 13.6, 203.5],
63
+ [569.5, 274.5, 13.5, 201.9], [590, 282.5, 13.5, 200.2], [610.5, 289.5, 13.4, 198.6],
64
+ [631, 296, 13.3, 196.9], [673.5, 307, 13.2, 193.6], [695, 311.5, 13.1, 192.0],
65
+ [716, 315.5, 13.0, 190.3], [738, 319, 12.9, 188.7], [759.5, 322, 12.8, 187.0],
66
+ [781, 324.5, 12.8, 185.4], [803, 325.5, 12.7, 183.7], [824.5, 326.5, 12.6, 182.1],
67
+ [846, 327.5, 12.5, 180.5], [868, 327.5, 12.4, 178.8], [889.5, 326.5, 12.3, 177.2],
68
+ [912, 325.5, 12.2, 175.5], [933, 323.5, 12.1, 173.9], [954.5, 321.5, 12.1, 172.2],
69
+ [976, 318, 12.0, 170.6], [998, 314, 11.9, 168.9], [1019, 310, 11.8, 167.3],
70
+ ];
71
+
72
+ /**
73
+ * The four domain blocks. Each has a heading (h1) and, when descriptions are
74
+ * shown, a subheading (h2) and three decision lines whose lead word is bold.
75
+ * All three text levels share the block's left `x`.
76
+ */
77
+ export interface DomainBlock {
78
+ heading: string;
79
+ /** Left edge shared by heading, subheading and body lines. */
80
+ x: number;
81
+ /** Heading (h1) baseline. */
82
+ hy: number;
83
+ subheading: string;
84
+ /** Subheading (h2) baseline. */
85
+ sy: number;
86
+ /** Decision lines: bold lead word + remainder, with their baseline. */
87
+ lines: ReadonlyArray<{ lead: string; rest: string; y: number }>;
88
+ }
89
+
90
+ export const DOMAINS: ReadonlyArray<DomainBlock> = [
91
+ {
92
+ heading: 'Complex',
93
+ x: 37,
94
+ hy: 31,
95
+ subheading: 'Adaptive system',
96
+ sy: 53,
97
+ lines: [
98
+ { lead: 'Probe', rest: ' the context with parallel experiments', y: 71 },
99
+ { lead: 'Sense', rest: ' how the context reacts', y: 90 },
100
+ { lead: 'Respond', rest: ' by amplifying positive experiments', y: 109 },
101
+ ],
102
+ },
103
+ {
104
+ heading: 'Complicated',
105
+ x: 779,
106
+ hy: 31,
107
+ subheading: 'Ordered system',
108
+ sy: 53,
109
+ lines: [
110
+ { lead: 'Sense', rest: ' the context with analytical methods', y: 71 },
111
+ { lead: 'Analyse', rest: ' observations', y: 90 },
112
+ { lead: 'Respond', rest: ' by applying one of many good solutions', y: 109 },
113
+ ],
114
+ },
115
+ {
116
+ heading: 'Chaotic',
117
+ x: 37,
118
+ hy: 587,
119
+ subheading: 'Un-ordered system',
120
+ sy: 609,
121
+ lines: [
122
+ { lead: 'Act', rest: ' on the context to stabilize (it or yourself)', y: 627 },
123
+ { lead: 'Sense', rest: ' how the context reacts', y: 646 },
124
+ { lead: 'Respond', rest: ' by re-acting', y: 665 },
125
+ ],
126
+ },
127
+ {
128
+ heading: 'Clear',
129
+ x: 779,
130
+ hy: 587,
131
+ subheading: 'Ordered system',
132
+ sy: 609,
133
+ lines: [
134
+ { lead: 'Sense', rest: ' the context with analytical methods', y: 627 },
135
+ { lead: 'Categorize', rest: ' observations', y: 646 },
136
+ { lead: 'Respond', rest: ' by applying tried and true practices', y: 665 },
137
+ ],
138
+ },
139
+ ];
140
+
141
+ /** Teal annotation labels (centered): [text, x, y]. */
142
+ export const TEAL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
143
+ ['iterate', 510, 16],
144
+ ['iterate', 533, 230],
145
+ ['strategy by design', 257, 225],
146
+ ['radical innovation', 268, 390],
147
+ ['by design', 268, 406],
148
+ ['extreme repurposing', 217, 496],
149
+ ['good practice', 814, 196],
150
+ ['best practice', 751, 459],
151
+ ];
152
+
153
+ /** Small exaptation sub-labels (centered): [text, x, y]. */
154
+ export const SMALL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
155
+ ['dispositional exaptation', 257, 239],
156
+ ['stimulated exaptation', 268, 419],
157
+ ['stress-based exaptation', 217, 510],
158
+ ];
159
+
160
+ /**
161
+ * The two central markers — Aporia (A) and Confusion (C) — each a big glyph and
162
+ * a name, with an optional teal note ("prepare to exit"). All centered.
163
+ */
164
+ export interface Marker {
165
+ letter: string;
166
+ /** Big glyph position. */
167
+ lx: number;
168
+ ly: number;
169
+ name: string;
170
+ /** Name (body) position. */
171
+ nx: number;
172
+ ny: number;
173
+ /** Optional teal note position + text. */
174
+ note?: { text: string; x: number; y: number };
175
+ }
176
+
177
+ export const MARKERS: ReadonlyArray<Marker> = [
178
+ {
179
+ letter: 'A',
180
+ lx: 444,
181
+ ly: 334,
182
+ name: 'Aporia',
183
+ nx: 447,
184
+ ny: 349,
185
+ note: { text: 'prepare to exit', x: 449, y: 366 },
186
+ },
187
+ { letter: 'C', lx: 531, ly: 419, name: 'Confusion', nx: 529, ny: 436 },
188
+ ];