@medicine-wheel/ui-components 0.4.13 → 0.5.1
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.
- package/dist/BeatTimeline.d.ts +1 -2
- package/dist/BeatTimeline.d.ts.map +1 -1
- package/dist/BeatTimeline.js +6 -5
- package/dist/BeatTimeline.js.map +1 -1
- package/dist/DirectionCard.d.ts +4 -2
- package/dist/DirectionCard.d.ts.map +1 -1
- package/dist/DirectionCard.js +11 -9
- package/dist/DirectionCard.js.map +1 -1
- package/dist/NodeInspector.d.ts +1 -2
- package/dist/NodeInspector.d.ts.map +1 -1
- package/dist/NodeInspector.js +12 -7
- package/dist/NodeInspector.js.map +1 -1
- package/dist/OcapBadge.d.ts +2 -2
- package/dist/OcapBadge.d.ts.map +1 -1
- package/dist/OcapBadge.js +31 -17
- package/dist/OcapBadge.js.map +1 -1
- package/dist/WilsonMeter.d.ts +1 -2
- package/dist/WilsonMeter.d.ts.map +1 -1
- package/dist/WilsonMeter.js +4 -4
- package/dist/WilsonMeter.js.map +1 -1
- package/package.json +2 -2
- package/src/tokens.css +137 -55
package/dist/BeatTimeline.d.ts
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* BeatTimeline — displays narrative beats along a horizontal timeline
|
|
3
3
|
* with direction-coded markers.
|
|
4
4
|
*/
|
|
5
|
-
import React from 'react';
|
|
6
5
|
import type { NarrativeBeat } from '@medicine-wheel/ontology-core';
|
|
7
6
|
export interface BeatTimelineProps {
|
|
8
7
|
beats: NarrativeBeat[];
|
|
@@ -15,5 +14,5 @@ export interface BeatTimelineProps {
|
|
|
15
14
|
/** Custom className */
|
|
16
15
|
className?: string;
|
|
17
16
|
}
|
|
18
|
-
export declare function BeatTimeline({ beats, selectedId, onBeatClick, height, className, }: BeatTimelineProps):
|
|
17
|
+
export declare function BeatTimeline({ beats, selectedId, onBeatClick, height, className, }: BeatTimelineProps): import("react").JSX.Element;
|
|
19
18
|
//# sourceMappingURL=BeatTimeline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BeatTimeline.d.ts","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"BeatTimeline.d.ts","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,+BAA+B,CAAC;AASlF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAY,EACZ,SAAc,GACf,EAAE,iBAAiB,+BAiGnB"}
|
package/dist/BeatTimeline.js
CHANGED
|
@@ -6,6 +6,7 @@ const ontology_core_1 = require("@medicine-wheel/ontology-core");
|
|
|
6
6
|
const DIR_ICONS = {
|
|
7
7
|
east: '🌅', south: '🔥', west: '🌊', north: '❄️',
|
|
8
8
|
};
|
|
9
|
+
const dirVar = (d) => `var(--mw-${d}, ${ontology_core_1.DIRECTION_COLORS[d]})`;
|
|
9
10
|
function BeatTimeline({ beats, selectedId, onBeatClick, height = 120, className = '', }) {
|
|
10
11
|
const sorted = [...beats].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
|
|
11
12
|
if (sorted.length === 0) {
|
|
@@ -20,11 +21,11 @@ function BeatTimeline({ beats, selectedId, onBeatClick, height = 120, className
|
|
|
20
21
|
background: 'currentColor',
|
|
21
22
|
opacity: 0.2,
|
|
22
23
|
} }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', height: '100%', padding: '0 16px', gap: '0' }, children: sorted.map((beat, i) => {
|
|
23
|
-
const color =
|
|
24
|
+
const color = dirVar(beat.direction);
|
|
24
25
|
const icon = DIR_ICONS[beat.direction];
|
|
25
26
|
const isSelected = beat.id === selectedId;
|
|
26
27
|
const leftPercent = sorted.length === 1 ? 50 : (i / (sorted.length - 1)) * 100;
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => onBeatClick?.(beat), role: onBeatClick ? 'button' : undefined, tabIndex: onBeatClick ? 0 : undefined, onKeyDown: (e) => { if (e.key === 'Enter' && onBeatClick)
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: onBeatClick ? 'mw-beat' : undefined, onClick: () => onBeatClick?.(beat), role: onBeatClick ? 'button' : undefined, tabIndex: onBeatClick ? 0 : undefined, onKeyDown: (e) => { if (e.key === 'Enter' && onBeatClick)
|
|
28
29
|
onBeatClick(beat); }, style: {
|
|
29
30
|
position: 'absolute',
|
|
30
31
|
left: `${leftPercent}%`,
|
|
@@ -34,18 +35,18 @@ function BeatTimeline({ beats, selectedId, onBeatClick, height = 120, className
|
|
|
34
35
|
flexDirection: 'column',
|
|
35
36
|
alignItems: 'center',
|
|
36
37
|
cursor: onBeatClick ? 'pointer' : 'default',
|
|
37
|
-
}, children: [(0, jsx_runtime_1.jsxs)("span", { style: { fontSize: '10px', opacity: 0.
|
|
38
|
+
}, children: [(0, jsx_runtime_1.jsxs)("span", { style: { fontSize: '10px', opacity: 0.65, marginBottom: '4px' }, children: ["Act ", beat.act] }), (0, jsx_runtime_1.jsx)("div", { className: "mw-beat-marker", style: {
|
|
38
39
|
width: isSelected ? '36px' : '28px',
|
|
39
40
|
height: isSelected ? '36px' : '28px',
|
|
40
41
|
borderRadius: '50%',
|
|
41
|
-
background:
|
|
42
|
+
background: `color-mix(in srgb, ${color} 19%, transparent)`,
|
|
42
43
|
border: `2px solid ${color}`,
|
|
43
44
|
display: 'flex',
|
|
44
45
|
alignItems: 'center',
|
|
45
46
|
justifyContent: 'center',
|
|
46
47
|
fontSize: isSelected ? '16px' : '14px',
|
|
47
48
|
transition: 'all 0.2s ease',
|
|
48
|
-
boxShadow: isSelected ? `0 0 12px ${color}
|
|
49
|
+
boxShadow: isSelected ? `0 0 12px color-mix(in srgb, ${color} 25%, transparent)` : 'none',
|
|
49
50
|
}, children: icon }), (0, jsx_runtime_1.jsx)("span", { style: {
|
|
50
51
|
fontSize: '11px',
|
|
51
52
|
marginTop: '4px',
|
package/dist/BeatTimeline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BeatTimeline.js","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"BeatTimeline.js","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":"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"}
|
package/dist/DirectionCard.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* DirectionCard — displays a direction with its associated metadata,
|
|
3
3
|
* color coding, and cultural context.
|
|
4
|
+
*
|
|
5
|
+
* Colors resolve through tokens.css presentation vars (--mw-<dir>) with the
|
|
6
|
+
* canonical ontology color as fallback for consumers without the stylesheet.
|
|
4
7
|
*/
|
|
5
|
-
import React from 'react';
|
|
6
8
|
import type { Direction, DirectionName } from '@medicine-wheel/ontology-core';
|
|
7
9
|
export interface DirectionCardProps {
|
|
8
10
|
direction: DirectionName;
|
|
@@ -17,5 +19,5 @@ export interface DirectionCardProps {
|
|
|
17
19
|
/** Custom className */
|
|
18
20
|
className?: string;
|
|
19
21
|
}
|
|
20
|
-
export declare function DirectionCard({ direction, data, showOjibwe, onClick, selected, className, }: DirectionCardProps):
|
|
22
|
+
export declare function DirectionCard({ direction, data, showOjibwe, onClick, selected, className, }: DirectionCardProps): import("react").JSX.Element | null;
|
|
21
23
|
//# sourceMappingURL=DirectionCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DirectionCard.d.ts","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"DirectionCard.d.ts","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAU9E,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,UAAiB,EACjB,OAAO,EACP,QAAgB,EAChB,SAAc,GACf,EAAE,kBAAkB,sCAyCpB"}
|
package/dist/DirectionCard.js
CHANGED
|
@@ -6,20 +6,22 @@ const ontology_core_1 = require("@medicine-wheel/ontology-core");
|
|
|
6
6
|
const DIR_ICONS = {
|
|
7
7
|
east: '🌅', south: '🔥', west: '🌊', north: '❄️',
|
|
8
8
|
};
|
|
9
|
+
const dirVar = (d) => `var(--mw-${d}, ${ontology_core_1.DIRECTION_COLORS[d]})`;
|
|
10
|
+
const dirInk = (d) => `var(--mw-${d}-ink, ${ontology_core_1.DIRECTION_COLORS[d]})`;
|
|
9
11
|
function DirectionCard({ direction, data, showOjibwe = true, onClick, selected = false, className = '', }) {
|
|
10
12
|
const dir = data ?? ontology_core_1.DIRECTIONS.find(d => d.name === direction);
|
|
11
13
|
if (!dir)
|
|
12
14
|
return null;
|
|
13
|
-
const color = ontology_core_1.DIRECTION_COLORS[direction];
|
|
14
15
|
const icon = DIR_ICONS[direction];
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => onClick?.(direction), role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: (e) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => onClick?.(direction), role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: (e) => {
|
|
17
|
+
if ((e.key === 'Enter' || e.key === ' ') && onClick) {
|
|
18
|
+
e.preventDefault();
|
|
19
|
+
onClick(direction);
|
|
20
|
+
}
|
|
21
|
+
}, className: `mw-dir-card${selected ? ' mw-dir-card--selected' : ''} ${className}`.trim(), style: {
|
|
22
|
+
['--dir']: dirVar(direction),
|
|
23
|
+
padding: 'var(--space-4, 16px)',
|
|
21
24
|
cursor: onClick ? 'pointer' : 'default',
|
|
22
|
-
|
|
23
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '24px' }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, color, textTransform: 'capitalize', fontSize: '16px', fontWeight: 600 }, children: dir.name }), showOjibwe && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px', opacity: 0.7, fontStyle: 'italic' }, children: dir.ojibwe }))] })] }), (0, jsx_runtime_1.jsx)("p", { style: { margin: '4px 0', fontSize: '13px', opacity: 0.8 }, children: dir.medicine.join(', ') }), (0, jsx_runtime_1.jsxs)("p", { style: { margin: '4px 0', fontSize: '12px', opacity: 0.6 }, children: [dir.season, " \u00B7 ", dir.lifeStage] })] }));
|
|
25
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-2, 8px)', marginBottom: 'var(--space-2, 8px)' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '24px' }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, color: dirInk(direction), textTransform: 'capitalize', fontSize: 'var(--text-base, 16px)', fontWeight: 600 }, children: dir.name }), showOjibwe && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 'var(--text-xs, 12px)', opacity: 0.75, fontStyle: 'italic' }, children: dir.ojibwe }))] })] }), (0, jsx_runtime_1.jsx)("p", { style: { margin: '4px 0', fontSize: '13px', opacity: 0.85 }, children: dir.medicine.join(' · ') }), (0, jsx_runtime_1.jsxs)("p", { style: { margin: '4px 0', fontSize: 'var(--text-xs, 12px)', opacity: 0.65 }, children: [dir.season, " \u00B7 ", dir.lifeStage] })] }));
|
|
24
26
|
}
|
|
25
27
|
//# sourceMappingURL=DirectionCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DirectionCard.js","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"DirectionCard.js","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":"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"}
|
package/dist/NodeInspector.d.ts
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* NodeInspector — detail panel for a RelationalNode showing
|
|
3
3
|
* type, direction, metadata, and connected edges.
|
|
4
4
|
*/
|
|
5
|
-
import React from 'react';
|
|
6
5
|
import type { RelationalNode, RelationalEdge } from '@medicine-wheel/ontology-core';
|
|
7
6
|
export interface NodeInspectorProps {
|
|
8
7
|
node: RelationalNode;
|
|
@@ -16,5 +15,5 @@ export interface NodeInspectorProps {
|
|
|
16
15
|
/** Custom className */
|
|
17
16
|
className?: string;
|
|
18
17
|
}
|
|
19
|
-
export declare function NodeInspector({ node, edges, allNodes, onClose, onNavigate, className, }: NodeInspectorProps):
|
|
18
|
+
export declare function NodeInspector({ node, edges, allNodes, onClose, onNavigate, className, }: NodeInspectorProps): import("react").JSX.Element;
|
|
20
19
|
//# sourceMappingURL=NodeInspector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeInspector.d.ts","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"NodeInspector.d.ts","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,+BAA+B,CAAC;AAUnG,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAU,EACV,QAAa,EACb,OAAO,EACP,UAAU,EACV,SAAc,GACf,EAAE,kBAAkB,+BAwHpB"}
|
package/dist/NodeInspector.js
CHANGED
|
@@ -6,18 +6,23 @@ const ontology_core_1 = require("@medicine-wheel/ontology-core");
|
|
|
6
6
|
const DIR_ICONS = {
|
|
7
7
|
east: '🌅', south: '🔥', west: '🌊', north: '❄️',
|
|
8
8
|
};
|
|
9
|
+
const dirVar = (d) => `var(--mw-${d}, ${ontology_core_1.DIRECTION_COLORS[d]})`;
|
|
10
|
+
const dirInk = (d) => `var(--mw-${d}-ink, ${ontology_core_1.DIRECTION_COLORS[d]})`;
|
|
9
11
|
function NodeInspector({ node, edges = [], allNodes = [], onClose, onNavigate, className = '', }) {
|
|
10
|
-
const color = node.direction ?
|
|
12
|
+
const color = node.direction ? dirVar(node.direction) : '#888';
|
|
13
|
+
const ink = node.direction ? dirInk(node.direction) : '#aaa';
|
|
11
14
|
const icon = node.direction ? DIR_ICONS[node.direction] : '◯';
|
|
12
|
-
const typeColor = ontology_core_1.NODE_TYPE_COLORS[node.type]
|
|
15
|
+
const typeColor = ontology_core_1.NODE_TYPE_COLORS[node.type]
|
|
16
|
+
? `var(--mw-node-${node.type}, ${ontology_core_1.NODE_TYPE_COLORS[node.type]})`
|
|
17
|
+
: '#888';
|
|
13
18
|
const nodeMap = new Map(allNodes.map(n => [n.id, n]));
|
|
14
19
|
// Find connected edges
|
|
15
20
|
const connectedEdges = edges.filter(e => e.from_id === node.id || e.to_id === node.id);
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { borderRadius: '12px', border: `1px solid ${color}
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { borderRadius: 'var(--radius-lg, 12px)', border: `1px solid color-mix(in srgb, ${color} 25%, transparent)`, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px', borderBottom: `1px solid color-mix(in srgb, ${color} 13%, transparent)`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '20px' }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, fontSize: '16px', fontWeight: 600 }, children: node.name }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', marginTop: '4px' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '11px', padding: '2px 8px', borderRadius: '4px', background: `color-mix(in srgb, ${typeColor} 13%, transparent)`, color: typeColor }, children: node.type }), node.direction && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '11px', padding: '2px 8px', borderRadius: '4px', background: `color-mix(in srgb, ${color} 13%, transparent)`, color: ink, textTransform: 'capitalize' }, children: node.direction }))] })] })] }), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "mw-row", style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', opacity: 0.65, color: 'inherit', padding: '2px 6px' }, "aria-label": "Close inspector", children: "\u2715" }))] }), node.metadata && Object.keys(node.metadata).length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '12px 16px', borderBottom: '1px solid rgba(128,128,128,0.1)' }, children: [(0, jsx_runtime_1.jsx)("h4", { style: { margin: '0 0 8px', fontSize: '12px', opacity: 0.65, textTransform: 'uppercase' }, children: "Metadata" }), Object.entries(node.metadata).map(([key, value]) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', justifyContent: 'space-between', fontSize: '13px', padding: '2px 0' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.6 }, children: key }), (0, jsx_runtime_1.jsx)("span", { children: String(value) })] }, key)))] })), connectedEdges.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '12px 16px' }, children: [(0, jsx_runtime_1.jsxs)("h4", { style: { margin: '0 0 8px', fontSize: '12px', opacity: 0.65, textTransform: 'uppercase' }, children: ["Relations (", connectedEdges.length, ")"] }), connectedEdges.map((edge, i) => {
|
|
17
22
|
const otherId = edge.from_id === node.id ? edge.to_id : edge.from_id;
|
|
18
23
|
const otherNode = nodeMap.get(otherId);
|
|
19
|
-
const
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => onNavigate?.(otherId), role: onNavigate ? 'button' : undefined, tabIndex: onNavigate ? 0 : undefined, onKeyDown: (e) => { if (e.key === 'Enter' && onNavigate)
|
|
24
|
+
const otherInk = otherNode?.direction ? dirInk(otherNode.direction) : '#aaa';
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: onNavigate ? 'mw-row' : undefined, onClick: () => onNavigate?.(otherId), role: onNavigate ? 'button' : undefined, tabIndex: onNavigate ? 0 : undefined, onKeyDown: (e) => { if (e.key === 'Enter' && onNavigate)
|
|
21
26
|
onNavigate(otherId); }, style: {
|
|
22
27
|
display: 'flex',
|
|
23
28
|
justifyContent: 'space-between',
|
|
@@ -28,7 +33,7 @@ function NodeInspector({ node, edges = [], allNodes = [], onClose, onNavigate, c
|
|
|
28
33
|
cursor: onNavigate ? 'pointer' : 'default',
|
|
29
34
|
marginBottom: '4px',
|
|
30
35
|
background: 'rgba(128,128,128,0.05)',
|
|
31
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.
|
|
32
|
-
})] })), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '8px 16px', fontSize: '11px', opacity: 0.
|
|
36
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.65, fontSize: '11px' }, children: edge.relationship_type }), (0, jsx_runtime_1.jsx)("span", { style: { margin: '0 6px' }, children: "\u2192" }), (0, jsx_runtime_1.jsx)("span", { style: { color: otherInk, fontWeight: 500 }, children: otherNode?.name ?? otherId })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '6px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { fontSize: '11px', opacity: 0.65 }, children: [(edge.strength * 100).toFixed(0), "%"] }), edge.ceremony_honored && ((0, jsx_runtime_1.jsx)("span", { title: "Ceremony honored", style: { fontSize: '10px', filter: 'drop-shadow(0 0 3px var(--mw-ceremony, #FFD700))' }, children: "\uD83D\uDD25" }))] })] }, i));
|
|
37
|
+
})] })), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '8px 16px', fontSize: '11px', opacity: 0.6, borderTop: '1px solid rgba(128,128,128,0.1)', fontFamily: 'var(--font-mono, ui-monospace)' }, children: ["ID: ", node.id, " \u00B7 Created: ", new Date(node.created_at).toLocaleDateString()] })] }));
|
|
33
38
|
}
|
|
34
39
|
//# sourceMappingURL=NodeInspector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeInspector.js","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"NodeInspector.js","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":"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"}
|
package/dist/OcapBadge.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* OcapBadge — compact indicator for OCAP® compliance status.
|
|
3
|
+
* Status colors resolve through tokens.css (--mw-wilson-*) with fallbacks.
|
|
3
4
|
*/
|
|
4
|
-
import React from 'react';
|
|
5
5
|
import type { OcapFlags } from '@medicine-wheel/ontology-core';
|
|
6
6
|
export interface OcapBadgeProps {
|
|
7
7
|
ocap?: OcapFlags;
|
|
@@ -10,5 +10,5 @@ export interface OcapBadgeProps {
|
|
|
10
10
|
/** Custom className */
|
|
11
11
|
className?: string;
|
|
12
12
|
}
|
|
13
|
-
export declare function OcapBadge({ ocap, detailed, className }: OcapBadgeProps):
|
|
13
|
+
export declare function OcapBadge({ ocap, detailed, className }: OcapBadgeProps): import("react").JSX.Element;
|
|
14
14
|
//# sourceMappingURL=OcapBadge.d.ts.map
|
package/dist/OcapBadge.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcapBadge.d.ts","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"OcapBadge.d.ts","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAM/D,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAgB,EAAE,SAAc,EAAE,EAAE,cAAc,+BA2EnF"}
|
package/dist/OcapBadge.js
CHANGED
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.OcapBadge = OcapBadge;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const OK = 'var(--mw-wilson-high, #22c55e)';
|
|
6
|
+
const BAD = 'var(--mw-wilson-low, #ef4444)';
|
|
7
|
+
const WARN = 'var(--mw-wilson-mid, #f59e0b)';
|
|
5
8
|
function OcapBadge({ ocap, detailed = false, className = '' }) {
|
|
6
9
|
if (!ocap) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("span", { className: className, style: {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)("span", { className: className, style: {
|
|
11
|
+
fontSize: 'var(--text-xs, 12px)',
|
|
12
|
+
padding: '2px 8px',
|
|
13
|
+
borderRadius: 'var(--radius-sm, 4px)',
|
|
14
|
+
background: `color-mix(in srgb, ${WARN} 14%, transparent)`,
|
|
15
|
+
color: WARN,
|
|
16
|
+
fontWeight: 500,
|
|
17
|
+
}, children: "No OCAP" }));
|
|
8
18
|
}
|
|
9
19
|
const flags = [
|
|
10
20
|
{ key: 'O', label: 'Ownership', value: ocap.ownership },
|
|
@@ -13,27 +23,31 @@ function OcapBadge({ ocap, detailed = false, className = '' }) {
|
|
|
13
23
|
{ key: 'P', label: 'Possession', value: ocap.possession },
|
|
14
24
|
];
|
|
15
25
|
const compliant = ocap.compliant;
|
|
26
|
+
const tone = compliant ? OK : BAD;
|
|
16
27
|
if (!detailed) {
|
|
17
28
|
return ((0, jsx_runtime_1.jsxs)("span", { className: className, title: flags.map(f => `${f.label}: ${f.value ? '✓' : '✗'}`).join(', '), style: {
|
|
18
|
-
fontSize: '12px',
|
|
29
|
+
fontSize: 'var(--text-xs, 12px)',
|
|
19
30
|
padding: '2px 8px',
|
|
20
|
-
borderRadius: '4px',
|
|
21
|
-
background:
|
|
22
|
-
color:
|
|
31
|
+
borderRadius: 'var(--radius-sm, 4px)',
|
|
32
|
+
background: `color-mix(in srgb, ${tone} 14%, transparent)`,
|
|
33
|
+
color: tone,
|
|
23
34
|
fontWeight: 500,
|
|
24
35
|
}, children: ["OCAP\u00AE ", compliant ? '✓' : '✗'] }));
|
|
25
36
|
}
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { display: 'flex', gap: '4px', alignItems: 'center' }, children: flags.map(f =>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { display: 'flex', gap: '4px', alignItems: 'center' }, children: flags.map(f => {
|
|
38
|
+
const flagTone = f.value ? OK : BAD;
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)("span", { title: f.label, style: {
|
|
40
|
+
width: '22px',
|
|
41
|
+
height: '22px',
|
|
42
|
+
borderRadius: 'var(--radius-sm, 4px)',
|
|
43
|
+
display: 'flex',
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
justifyContent: 'center',
|
|
46
|
+
fontSize: '11px',
|
|
47
|
+
fontWeight: 600,
|
|
48
|
+
background: `color-mix(in srgb, ${flagTone} 14%, transparent)`,
|
|
49
|
+
color: flagTone,
|
|
50
|
+
}, children: f.key }, f.key));
|
|
51
|
+
}) }));
|
|
38
52
|
}
|
|
39
53
|
//# sourceMappingURL=OcapBadge.js.map
|
package/dist/OcapBadge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OcapBadge.js","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"OcapBadge.js","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":"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"}
|
package/dist/WilsonMeter.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* WilsonMeter — visual gauge for Wilson relational alignment (0–1).
|
|
3
3
|
*/
|
|
4
|
-
import React from 'react';
|
|
5
4
|
export interface WilsonMeterProps {
|
|
6
5
|
/** Alignment value 0–1 */
|
|
7
6
|
alignment: number;
|
|
@@ -12,5 +11,5 @@ export interface WilsonMeterProps {
|
|
|
12
11
|
/** Custom className */
|
|
13
12
|
className?: string;
|
|
14
13
|
}
|
|
15
|
-
export declare function WilsonMeter({ alignment, size, showLabel, className, }: WilsonMeterProps):
|
|
14
|
+
export declare function WilsonMeter({ alignment, size, showLabel, className, }: WilsonMeterProps): import("react").JSX.Element;
|
|
16
15
|
//# sourceMappingURL=WilsonMeter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WilsonMeter.d.ts","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"WilsonMeter.d.ts","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAS,EACT,SAAgB,EAChB,SAAc,GACf,EAAE,gBAAgB,+BAyDlB"}
|
package/dist/WilsonMeter.js
CHANGED
|
@@ -4,10 +4,10 @@ exports.WilsonMeter = WilsonMeter;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
function alignmentColor(value) {
|
|
6
6
|
if (value >= 0.7)
|
|
7
|
-
return '#22c55e';
|
|
7
|
+
return 'var(--mw-wilson-high, #22c55e)';
|
|
8
8
|
if (value >= 0.4)
|
|
9
|
-
return '#f59e0b';
|
|
10
|
-
return '#ef4444';
|
|
9
|
+
return 'var(--mw-wilson-mid, #f59e0b)';
|
|
10
|
+
return 'var(--mw-wilson-low, #ef4444)';
|
|
11
11
|
}
|
|
12
12
|
function WilsonMeter({ alignment, size = 48, showLabel = true, className = '', }) {
|
|
13
13
|
const clamped = Math.max(0, Math.min(1, alignment));
|
|
@@ -16,6 +16,6 @@ function WilsonMeter({ alignment, size = 48, showLabel = true, className = '', }
|
|
|
16
16
|
const circumference = 2 * Math.PI * radius;
|
|
17
17
|
const offset = circumference * (1 - clamped);
|
|
18
18
|
const center = size / 2;
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }, title: `Wilson Alignment: ${(clamped * 100).toFixed(0)}%`, children: [(0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [(0, jsx_runtime_1.jsx)("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: 3, opacity: 0.1 }), (0, jsx_runtime_1.jsx)("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: 3, strokeDasharray: `${circumference}`, strokeDashoffset: `${offset}`, strokeLinecap: "round", transform: `rotate(-90 ${center} ${center})`, style: { transition: 'stroke-dashoffset 0.5s ease' } }), (0, jsx_runtime_1.jsx)("text", { x: center, y: center, textAnchor: "middle", dominantBaseline: "central", fontSize: size * 0.28, fontWeight: 600, fill: color, children: (clamped * 100).toFixed(0) })] }), showLabel && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '10px', opacity: 0.
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }, title: `Wilson Alignment: ${(clamped * 100).toFixed(0)}%`, children: [(0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [(0, jsx_runtime_1.jsx)("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: 3, opacity: 0.1 }), (0, jsx_runtime_1.jsx)("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: 3, strokeDasharray: `${circumference}`, strokeDashoffset: `${offset}`, strokeLinecap: "round", transform: `rotate(-90 ${center} ${center})`, style: { transition: 'stroke-dashoffset 0.5s ease' } }), (0, jsx_runtime_1.jsx)("text", { x: center, y: center, textAnchor: "middle", dominantBaseline: "central", fontSize: size * 0.28, fontWeight: 600, fill: color, children: (clamped * 100).toFixed(0) })] }), showLabel && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '10px', opacity: 0.65 }, children: "Wilson" }))] }));
|
|
20
20
|
}
|
|
21
21
|
//# sourceMappingURL=WilsonMeter.js.map
|
package/dist/WilsonMeter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WilsonMeter.js","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"WilsonMeter.js","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":";;AAoBA,kCA8DC;;AApED,SAAS,cAAc,CAAC,KAAa;IACnC,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,gCAAgC,CAAC;IAC1D,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,+BAA+B,CAAC;IACzD,OAAO,+BAA+B,CAAC;AACzC,CAAC;AAED,SAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,EAAE,GACG;IACjB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;IAExB,OAAO,CACL,iCACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAC5F,KAAK,EAAE,qBAAqB,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,aAEzD,iCAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,EAAE,aAE5D,mCACE,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,OAAO,EAAE,GAAG,GACZ,EAEF,mCACE,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,WAAW,EAAE,CAAC,EACd,eAAe,EAAE,GAAG,aAAa,EAAE,EACnC,gBAAgB,EAAE,GAAG,MAAM,EAAE,EAC7B,aAAa,EAAC,OAAO,EACrB,SAAS,EAAE,cAAc,MAAM,IAAI,MAAM,GAAG,EAC5C,KAAK,EAAE,EAAE,UAAU,EAAE,6BAA6B,EAAE,GACpD,EAEF,iCACE,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,UAAU,EAAC,QAAQ,EACnB,gBAAgB,EAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,GAAG,IAAI,EACrB,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,KAAK,YAEV,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GACtB,IACH,EACL,SAAS,IAAI,CACZ,iCAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAe,CAChE,IACG,CACP,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medicine-wheel/ui-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "React UI components for the Medicine Wheel Developer Suite — direction cards, beat timelines, node inspectors",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"author": "jgwill",
|
|
38
38
|
"license": "MIT",
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@medicine-wheel/ontology-core": "^0.
|
|
40
|
+
"@medicine-wheel/ontology-core": "^0.5.1"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": "^18.0.0 || ^19.0.0"
|
package/src/tokens.css
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* medicine-wheel-ui-components — Design Tokens
|
|
3
3
|
* Source of truth for Medicine Wheel colors, type, spacing, radius, motion.
|
|
4
|
-
* Mirror of Miadi Design System `colors_and_type.css`.
|
|
5
4
|
*
|
|
6
5
|
* Consume from an app with:
|
|
7
6
|
* @import "medicine-wheel-ui-components/tokens.css";
|
|
8
7
|
* Or a bundler path:
|
|
9
8
|
* @import "../../src/ui-components/src/tokens.css";
|
|
10
9
|
*
|
|
11
|
-
*
|
|
10
|
+
* Direction colors: canonical semantic colors live in
|
|
11
|
+
* @medicine-wheel/ontology-core (DIRECTION_COLORS). The tokens below are
|
|
12
|
+
* PRESENTATION colors tuned for the midnight-indigo ground — notably West,
|
|
13
|
+
* whose canonical #1a1a2e is invisible on dark and is presented as a
|
|
14
|
+
* slate-plum family instead. Use `--mw-<dir>` for fills/borders/dots and
|
|
15
|
+
* `--mw-<dir>-ink` for text (WCAG AA on the ground).
|
|
16
|
+
*
|
|
17
|
+
* Display/body/mono font families are provided by the app via next/font
|
|
18
|
+
* variables (--font-fraunces, --font-inter, --font-jbmono); the stacks
|
|
19
|
+
* below fall back gracefully when consumed outside the app.
|
|
12
20
|
*/
|
|
13
21
|
|
|
14
|
-
@font-face {
|
|
15
|
-
font-family: 'Stereohead';
|
|
16
|
-
src: url('/fonts/Stereohead.otf') format('opentype');
|
|
17
|
-
font-weight: normal;
|
|
18
|
-
font-style: normal;
|
|
19
|
-
font-display: swap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
22
|
:root {
|
|
23
|
-
/*
|
|
24
|
-
--mw-bg:
|
|
25
|
-
--mw-card:
|
|
26
|
-
--mw-card-2:
|
|
27
|
-
--mw-secondary:
|
|
28
|
-
--mw-border:
|
|
29
|
-
--mw-fg:
|
|
30
|
-
--mw-muted:
|
|
23
|
+
/* Ground — midnight indigo */
|
|
24
|
+
--mw-bg: #0A0A1A;
|
|
25
|
+
--mw-card: #12122A;
|
|
26
|
+
--mw-card-2: #181836;
|
|
27
|
+
--mw-secondary: #1E1E3E;
|
|
28
|
+
--mw-border: #2B2B4E;
|
|
29
|
+
--mw-fg: #F0EFF7;
|
|
30
|
+
--mw-muted: #A9A7C5;
|
|
31
31
|
--mw-primary: oklch(0.785 0.115 85);
|
|
32
|
-
--mw-primary-fg:
|
|
32
|
+
--mw-primary-fg: #0A0A1A;
|
|
33
33
|
--mw-ring: oklch(0.785 0.115 85);
|
|
34
34
|
--mw-destructive: oklch(0.396 0.141 25.723);
|
|
35
35
|
|
|
@@ -39,29 +39,47 @@
|
|
|
39
39
|
--mw-stc-accent: #0891b2;
|
|
40
40
|
--mw-stc-border: #374151;
|
|
41
41
|
|
|
42
|
-
/* Four Direction colors */
|
|
42
|
+
/* Four Direction presentation colors (fills, borders, dots) */
|
|
43
43
|
--mw-east: #FFD700;
|
|
44
|
-
--mw-south: #
|
|
45
|
-
--mw-west: #
|
|
46
|
-
--mw-north: #
|
|
44
|
+
--mw-south: #DC2626;
|
|
45
|
+
--mw-west: #6B7A99;
|
|
46
|
+
--mw-north: #F7F5F0;
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
--mw-
|
|
50
|
-
--mw-
|
|
51
|
-
--mw-
|
|
48
|
+
/* Direction ink — text-safe on the midnight ground (WCAG AA) */
|
|
49
|
+
--mw-east-ink: #FFD700;
|
|
50
|
+
--mw-south-ink: #FF7B72;
|
|
51
|
+
--mw-west-ink: #9FAEC9;
|
|
52
|
+
--mw-north-ink: #F7F5F0;
|
|
53
|
+
|
|
54
|
+
/* Direction surface tints (panel backgrounds that belong to a direction) */
|
|
55
|
+
--mw-east-tint: #FFD70014;
|
|
56
|
+
--mw-south-tint: #DC262617;
|
|
57
|
+
--mw-west-tint: #6B7A9920;
|
|
58
|
+
--mw-north-tint: #F7F5F00F;
|
|
59
|
+
|
|
60
|
+
/* Direction quadrant washes (large-area backdrops, e.g. wheel quadrants) */
|
|
61
|
+
--mw-east-quadrant: #FFD7000A;
|
|
62
|
+
--mw-south-quadrant: #DC26260D;
|
|
63
|
+
--mw-west-quadrant: #6B7A9914;
|
|
64
|
+
--mw-north-quadrant: #F7F5F008;
|
|
52
65
|
|
|
53
66
|
--mw-east-border: #FFD70060;
|
|
54
|
-
--mw-south-border: #
|
|
55
|
-
--mw-west-border: #
|
|
56
|
-
--mw-north-border: #
|
|
67
|
+
--mw-south-border: #DC262660;
|
|
68
|
+
--mw-west-border: #6B7A9970;
|
|
69
|
+
--mw-north-border: #F7F5F060;
|
|
70
|
+
|
|
71
|
+
/* Back-compat alias — prefer --mw-west-ink */
|
|
72
|
+
--mw-west-display: var(--mw-west-ink);
|
|
57
73
|
|
|
58
|
-
|
|
74
|
+
/* Ceremony gold — RESERVED. Only ceremony-honored elements may glow. */
|
|
75
|
+
--mw-ceremony: #FFD700;
|
|
76
|
+
--mw-ceremony-glow: 0 0 12px #FFD70055;
|
|
59
77
|
|
|
60
78
|
/* oklch direction tokens (for gradients) */
|
|
61
79
|
--color-east: oklch(0.85 0.15 85);
|
|
62
80
|
--color-south: oklch(0.55 0.22 25);
|
|
63
|
-
--color-west: oklch(0.
|
|
64
|
-
--color-north: oklch(0.
|
|
81
|
+
--color-west: oklch(0.6 0.05 270);
|
|
82
|
+
--color-north: oklch(0.96 0.005 90);
|
|
65
83
|
|
|
66
84
|
/* Node type colors — ancestor/knowledge retuned for contrast vs human */
|
|
67
85
|
--mw-node-human: #e8913a;
|
|
@@ -77,9 +95,16 @@
|
|
|
77
95
|
--mw-wilson-low: #ef4444;
|
|
78
96
|
|
|
79
97
|
/* Typography */
|
|
80
|
-
--font-display: '
|
|
81
|
-
--font-sans: '
|
|
82
|
-
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
98
|
+
--font-display: var(--font-fraunces, 'Fraunces'), 'Iowan Old Style', Georgia, serif;
|
|
99
|
+
--font-sans: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
|
|
100
|
+
--font-mono: var(--font-jbmono, 'JetBrains Mono'), ui-monospace, 'SF Mono', monospace;
|
|
101
|
+
|
|
102
|
+
/* Semantic type scale */
|
|
103
|
+
--text-display: clamp(2.5rem, 1.75rem + 3vw, 3.75rem); /* home hero only */
|
|
104
|
+
--text-title: 2rem; /* page titles */
|
|
105
|
+
--text-section: 1.25rem; /* section headings */
|
|
106
|
+
--text-body: 1rem;
|
|
107
|
+
--text-caption: 0.75rem;
|
|
83
108
|
|
|
84
109
|
--text-xs: 0.75rem;
|
|
85
110
|
--text-sm: 0.875rem;
|
|
@@ -119,12 +144,19 @@
|
|
|
119
144
|
--radius-lg: 0.75rem;
|
|
120
145
|
--radius-full: 9999px;
|
|
121
146
|
|
|
147
|
+
/* Focus */
|
|
148
|
+
--focus-ring-width: 2px;
|
|
149
|
+
--focus-ring-offset: 2px;
|
|
150
|
+
|
|
122
151
|
/* Motion */
|
|
123
152
|
--duration-fast: 150ms;
|
|
124
153
|
--duration-default: 200ms;
|
|
125
154
|
--duration-slow: 300ms;
|
|
126
155
|
--duration-pulse: 3s;
|
|
127
156
|
--duration-glow: 2s;
|
|
157
|
+
--duration-breathe: 7s;
|
|
158
|
+
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
159
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
128
160
|
|
|
129
161
|
/* Layout */
|
|
130
162
|
--max-w-content: 80rem;
|
|
@@ -132,24 +164,31 @@
|
|
|
132
164
|
--nav-height: 4rem;
|
|
133
165
|
}
|
|
134
166
|
|
|
167
|
+
/* Focus — one visible ring everywhere, keyboard only */
|
|
168
|
+
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
|
169
|
+
outline: var(--focus-ring-width) solid var(--mw-ring);
|
|
170
|
+
outline-offset: var(--focus-ring-offset);
|
|
171
|
+
}
|
|
172
|
+
|
|
135
173
|
/* Type classes */
|
|
136
174
|
.mw-display {
|
|
137
175
|
font-family: var(--font-display);
|
|
138
|
-
font-size: var(--text-
|
|
139
|
-
font-weight: var(--weight-
|
|
176
|
+
font-size: var(--text-display);
|
|
177
|
+
font-weight: var(--weight-medium);
|
|
140
178
|
line-height: var(--leading-tight);
|
|
141
|
-
letter-spacing: 0.
|
|
179
|
+
letter-spacing: -0.015em;
|
|
142
180
|
}
|
|
143
181
|
.mw-h1 {
|
|
144
182
|
font-family: var(--font-display);
|
|
145
|
-
font-size: var(--text-
|
|
146
|
-
font-weight: var(--weight-
|
|
183
|
+
font-size: var(--text-title);
|
|
184
|
+
font-weight: var(--weight-medium);
|
|
147
185
|
line-height: var(--leading-tight);
|
|
186
|
+
letter-spacing: -0.01em;
|
|
148
187
|
}
|
|
149
188
|
.mw-h2 {
|
|
150
|
-
font-family: var(--font-
|
|
151
|
-
font-size: var(--text-
|
|
152
|
-
font-weight: var(--weight-
|
|
189
|
+
font-family: var(--font-sans);
|
|
190
|
+
font-size: var(--text-section);
|
|
191
|
+
font-weight: var(--weight-semibold);
|
|
153
192
|
line-height: var(--leading-tight);
|
|
154
193
|
}
|
|
155
194
|
.mw-h3 {
|
|
@@ -181,6 +220,40 @@
|
|
|
181
220
|
.mw-card--west-left { border-left: 4px solid var(--mw-west); }
|
|
182
221
|
.mw-card--north-left { border-left: 4px solid var(--mw-north); }
|
|
183
222
|
|
|
223
|
+
/* Direction card recipe — set `--dir` (fill) and `--dir-ink` (text) inline */
|
|
224
|
+
.mw-dir-card {
|
|
225
|
+
border: 1px solid var(--mw-border);
|
|
226
|
+
border-radius: var(--radius-lg);
|
|
227
|
+
background: var(--mw-card);
|
|
228
|
+
transition: transform var(--duration-default) var(--ease-out),
|
|
229
|
+
border-color var(--duration-default) ease,
|
|
230
|
+
background var(--duration-default) ease;
|
|
231
|
+
}
|
|
232
|
+
.mw-dir-card:hover,
|
|
233
|
+
.mw-dir-card:focus-visible {
|
|
234
|
+
transform: translateY(-2px);
|
|
235
|
+
border-color: color-mix(in srgb, var(--dir, var(--mw-border)) 55%, transparent);
|
|
236
|
+
background: color-mix(in srgb, var(--dir, transparent) 7%, var(--mw-card));
|
|
237
|
+
}
|
|
238
|
+
.mw-dir-card--selected {
|
|
239
|
+
border-color: var(--dir, var(--mw-ring));
|
|
240
|
+
background: color-mix(in srgb, var(--dir, transparent) 10%, var(--mw-card));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Beat marker recipe (BeatTimeline) */
|
|
244
|
+
.mw-beat { cursor: pointer; }
|
|
245
|
+
.mw-beat-marker { transition: transform var(--duration-fast) var(--ease-out); }
|
|
246
|
+
.mw-beat:hover .mw-beat-marker,
|
|
247
|
+
.mw-beat:focus-visible .mw-beat-marker { transform: scale(1.1); }
|
|
248
|
+
|
|
249
|
+
/* Interactive row recipe (inspector relations, list rows) */
|
|
250
|
+
.mw-row {
|
|
251
|
+
border-radius: var(--radius-sm);
|
|
252
|
+
transition: background var(--duration-fast) ease;
|
|
253
|
+
}
|
|
254
|
+
.mw-row:hover,
|
|
255
|
+
.mw-row:focus-visible { background: var(--mw-secondary); }
|
|
256
|
+
|
|
184
257
|
/* Buttons */
|
|
185
258
|
.mw-btn {
|
|
186
259
|
display: inline-flex;
|
|
@@ -194,7 +267,6 @@
|
|
|
194
267
|
cursor: pointer;
|
|
195
268
|
transition: all var(--duration-default) ease;
|
|
196
269
|
border: none;
|
|
197
|
-
outline: none;
|
|
198
270
|
}
|
|
199
271
|
.mw-btn--primary { background: var(--mw-primary); color: var(--mw-primary-fg); }
|
|
200
272
|
.mw-btn--primary:hover { filter: brightness(0.9); }
|
|
@@ -217,10 +289,10 @@
|
|
|
217
289
|
background: var(--mw-secondary);
|
|
218
290
|
color: var(--mw-fg);
|
|
219
291
|
}
|
|
220
|
-
.mw-badge--east { background: var(--mw-east-tint);
|
|
221
|
-
.mw-badge--south { background:
|
|
222
|
-
.mw-badge--west { background: var(--mw-west-tint);
|
|
223
|
-
.mw-badge--north { background: var(--mw-north-tint); color: var(--mw-north); border: 1px solid var(--mw-north-border); }
|
|
292
|
+
.mw-badge--east { background: var(--mw-east-tint); color: var(--mw-east-ink); border: 1px solid var(--mw-east-border); }
|
|
293
|
+
.mw-badge--south { background: var(--mw-south-tint); color: var(--mw-south-ink); border: 1px solid var(--mw-south-border); }
|
|
294
|
+
.mw-badge--west { background: var(--mw-west-tint); color: var(--mw-west-ink); border: 1px solid var(--mw-west-border); }
|
|
295
|
+
.mw-badge--north { background: var(--mw-north-tint); color: var(--mw-north-ink); border: 1px solid var(--mw-north-border); }
|
|
224
296
|
.mw-badge--success { background: #14532d40; color: var(--mw-wilson-high); }
|
|
225
297
|
.mw-badge--warning { background: #78350f40; color: var(--mw-wilson-mid); }
|
|
226
298
|
.mw-badge--error { background: #7f1d1d40; color: var(--mw-wilson-low); }
|
|
@@ -235,7 +307,6 @@
|
|
|
235
307
|
color: var(--mw-fg);
|
|
236
308
|
font-family: var(--font-sans);
|
|
237
309
|
font-size: var(--text-sm);
|
|
238
|
-
outline: none;
|
|
239
310
|
transition: border-color var(--duration-fast);
|
|
240
311
|
}
|
|
241
312
|
.mw-input:focus { border-color: var(--mw-ring); }
|
|
@@ -255,7 +326,7 @@
|
|
|
255
326
|
transition: width var(--duration-slow);
|
|
256
327
|
}
|
|
257
328
|
.mw-progress-fill--directions {
|
|
258
|
-
background: linear-gradient(to right, var(--mw-east), var(--mw-south),
|
|
329
|
+
background: linear-gradient(to right, var(--mw-east), var(--mw-south), var(--mw-west), var(--mw-north));
|
|
259
330
|
}
|
|
260
331
|
|
|
261
332
|
/* Dots */
|
|
@@ -269,7 +340,7 @@
|
|
|
269
340
|
.mw-dot--inactive { background: var(--mw-muted); }
|
|
270
341
|
.mw-dot--east { background: var(--mw-east); }
|
|
271
342
|
.mw-dot--south { background: var(--mw-south); }
|
|
272
|
-
.mw-dot--west { background: var(--mw-west
|
|
343
|
+
.mw-dot--west { background: var(--mw-west); }
|
|
273
344
|
.mw-dot--north { background: var(--mw-north); }
|
|
274
345
|
|
|
275
346
|
/* Animations */
|
|
@@ -281,9 +352,20 @@
|
|
|
281
352
|
0%, 100% { filter: brightness(1); }
|
|
282
353
|
50% { filter: brightness(1.3); }
|
|
283
354
|
}
|
|
355
|
+
@keyframes mw-breathe {
|
|
356
|
+
0%, 100% { opacity: 0.85; transform: scale(1); }
|
|
357
|
+
50% { opacity: 1; transform: scale(1.015); }
|
|
358
|
+
}
|
|
284
359
|
@keyframes mw-spin {
|
|
285
360
|
to { transform: rotate(360deg); }
|
|
286
361
|
}
|
|
287
|
-
.mw-pulse
|
|
288
|
-
.mw-glow
|
|
289
|
-
.mw-
|
|
362
|
+
.mw-pulse { animation: mw-pulse-center var(--duration-pulse) ease-in-out infinite; }
|
|
363
|
+
.mw-glow { animation: mw-glow var(--duration-glow) ease-in-out infinite; }
|
|
364
|
+
.mw-breathe { animation: mw-breathe var(--duration-breathe) var(--ease-in-out) infinite; transform-origin: center; }
|
|
365
|
+
.mw-spin { animation: mw-spin 1s linear infinite; }
|
|
366
|
+
|
|
367
|
+
/* Reduced motion — decorative animation stops; spinners stay functional */
|
|
368
|
+
@media (prefers-reduced-motion: reduce) {
|
|
369
|
+
.mw-pulse, .mw-glow, .mw-breathe { animation: none; }
|
|
370
|
+
.mw-dir-card, .mw-dir-card:hover { transform: none; }
|
|
371
|
+
}
|