@medicine-wheel/ui-components 0.2.2

package/README.md

@@ -0,0 +1,66 @@
+# @medicine-wheel/ui-components
+
+React UI components for the Medicine Wheel Developer Suite — direction cards, beat timelines, node inspectors, OCAP® badges, and Wilson alignment gauges.
+
+## Install
+
+```bash
+npm install @medicine-wheel/ui-components
+```
+
+## Components
+
+### DirectionCard
+Displays a direction with color coding, Ojibwe name, season, and teachings.
+
+```tsx
+import { DirectionCard } from '@medicine-wheel/ui-components';
+
+<DirectionCard direction="east" showOjibwe onClick={handleClick} />
+```
+
+### BeatTimeline
+Horizontal timeline of narrative beats with direction-coded markers.
+
+```tsx
+import { BeatTimeline } from '@medicine-wheel/ui-components';
+
+<BeatTimeline beats={beats} onBeatClick={handleSelect} selectedId="b1" />
+```
+
+### NodeInspector
+Detail panel for a RelationalNode showing type, direction, metadata, and connections.
+
+```tsx
+import { NodeInspector } from '@medicine-wheel/ui-components';
+
+<NodeInspector node={node} edges={edges} allNodes={allNodes} onNavigate={goToNode} />
+```
+
+### OcapBadge
+Compact OCAP® compliance indicator.
+
+```tsx
+import { OcapBadge } from '@medicine-wheel/ui-components';
+
+<OcapBadge ocap={relation.ocap} detailed />
+```
+
+### WilsonMeter
+SVG gauge for Wilson relational alignment (0–1).
+
+```tsx
+import { WilsonMeter } from '@medicine-wheel/ui-components';
+
+<WilsonMeter alignment={0.73} size={48} />
+```
+
+## Peer dependencies
+
+- `react` ^18.0.0 || ^19.0.0
+- `@medicine-wheel/ontology-core` ^0.1.0
+
+## License
+
+MIT
+

package/dist/BeatTimeline.d.ts

@@ -0,0 +1,14 @@
+import type { NarrativeBeat } from '@medicine-wheel/ontology-core';
+export interface BeatTimelineProps {
+    beats: NarrativeBeat[];
+    /** Selected beat ID */
+    selectedId?: string;
+    /** Click handler */
+    onBeatClick?: (beat: NarrativeBeat) => void;
+    /** Timeline height in px */
+    height?: number;
+    /** Custom className */
+    className?: string;
+}
+export declare function BeatTimeline({ beats, selectedId, onBeatClick, height, className, }: BeatTimelineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BeatTimeline.d.ts.map

package/dist/BeatTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BeatTimeline.d.ts","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,+BAA+B,CAAC;AAOlF,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,2CAgGnB"}

package/dist/BeatTimeline.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BeatTimeline = BeatTimeline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ontology_core_1 = require("@medicine-wheel/ontology-core");
+const DIR_ICONS = {
+    east: '🌅', south: '🔥', west: '🌊', north: '❄️',
+};
+function BeatTimeline({ beats, selectedId, onBeatClick, height = 120, className = '', }) {
+    const sorted = [...beats].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    if (sorted.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { height, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.5, fontSize: '14px' }, children: "No beats yet" }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { height, position: 'relative', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '24px',
+                    right: '24px',
+                    height: '2px',
+                    background: 'currentColor',
+                    opacity: 0.2,
+                } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', height: '100%', padding: '0 16px', gap: '0' }, children: sorted.map((beat, i) => {
+                    const color = ontology_core_1.DIRECTION_COLORS[beat.direction];
+                    const icon = DIR_ICONS[beat.direction];
+                    const isSelected = beat.id === selectedId;
+                    const leftPercent = sorted.length === 1 ? 50 : (i / (sorted.length - 1)) * 100;
+                    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)
+                            onBeatClick(beat); }, style: {
+                            position: 'absolute',
+                            left: `${leftPercent}%`,
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            cursor: onBeatClick ? 'pointer' : 'default',
+                        }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { fontSize: '10px', opacity: 0.5, marginBottom: '4px' }, children: ["Act ", beat.act] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    width: isSelected ? '36px' : '28px',
+                                    height: isSelected ? '36px' : '28px',
+                                    borderRadius: '50%',
+                                    background: `${color}30`,
+                                    border: `2px solid ${color}`,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: isSelected ? '16px' : '14px',
+                                    transition: 'all 0.2s ease',
+                                    boxShadow: isSelected ? `0 0 12px ${color}40` : 'none',
+                                }, children: icon }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                    fontSize: '11px',
+                                    marginTop: '4px',
+                                    maxWidth: '80px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    textAlign: 'center',
+                                    fontWeight: isSelected ? 600 : 400,
+                                }, children: beat.title }), beat.ceremonies.length > 0 && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '8px', marginTop: '2px' }, children: "\uD83D\uDD25" }))] }, beat.id));
+                }) })] }));
+}
+//# sourceMappingURL=BeatTimeline.js.map

package/dist/BeatTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BeatTimeline.js","sourceRoot":"","sources":["../src/BeatTimeline.tsx"],"names":[],"mappings":"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"}

package/dist/DirectionCard.d.ts

@@ -0,0 +1,16 @@
+import type { Direction, DirectionName } from '@medicine-wheel/ontology-core';
+export interface DirectionCardProps {
+    direction: DirectionName;
+    /** Optional override data (defaults to DIRECTIONS constant) */
+    data?: Direction;
+    /** Show the Ojibwe name */
+    showOjibwe?: boolean;
+    /** Click handler */
+    onClick?: (direction: DirectionName) => void;
+    /** Whether this card is selected */
+    selected?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function DirectionCard({ direction, data, showOjibwe, onClick, selected, className, }: DirectionCardProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DirectionCard.d.ts.map

package/dist/DirectionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionCard.d.ts","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAO9E,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,kDAwCpB"}

package/dist/DirectionCard.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionCard = DirectionCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ontology_core_1 = require("@medicine-wheel/ontology-core");
+const DIR_ICONS = {
+    east: '🌅', south: '🔥', west: '🌊', north: '❄️',
+};
+function DirectionCard({ direction, data, showOjibwe = true, onClick, selected = false, className = '', }) {
+    const dir = data ?? ontology_core_1.DIRECTIONS.find(d => d.name === direction);
+    if (!dir)
+        return null;
+    const color = ontology_core_1.DIRECTION_COLORS[direction];
+    const icon = DIR_ICONS[direction];
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => onClick?.(direction), role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: (e) => { if (e.key === 'Enter' && onClick)
+            onClick(direction); }, className: className, style: {
+            border: `2px solid ${selected ? color : 'transparent'}`,
+            borderRadius: '12px',
+            padding: '16px',
+            background: selected ? `${color}15` : 'transparent',
+            cursor: onClick ? 'pointer' : 'default',
+            transition: 'all 0.2s ease',
+        }, 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] })] }));
+}
+//# sourceMappingURL=DirectionCard.js.map

package/dist/DirectionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionCard.js","sourceRoot":"","sources":["../src/DirectionCard.tsx"],"names":[],"mappings":";;AA0BA,sCA+CC;;AAnED,iEAA2F;AAE3F,MAAM,SAAS,GAAkC;IAC/C,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI;CACjD,CAAC;AAgBF,SAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACK;IACnB,MAAM,GAAG,GAAG,IAAI,IAAI,0BAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;IAC/D,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IAEtB,MAAM,KAAK,GAAG,gCAAgB,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAElC,OAAO,CACL,iCACE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,EACnC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO;YAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAC3E,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,aAAa,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE;YACvD,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa;YACnD,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACvC,UAAU,EAAE,eAAe;SAC5B,aAED,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,aACpF,iCAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,IAAI,GAAQ,EAChD,4CACE,+BAAI,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,YAC5F,GAAG,CAAC,IAAI,GACN,EACJ,UAAU,IAAI,CACb,iCAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjE,GAAG,CAAC,MAAM,GACN,CACR,IACG,IACF,EACN,8BAAG,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,YAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAK,EAC5F,+BAAG,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,aAAG,GAAG,CAAC,MAAM,cAAK,GAAG,CAAC,SAAS,IAAK,IAC7F,CACP,CAAC;AACJ,CAAC"}

package/dist/NodeInspector.d.ts

@@ -0,0 +1,15 @@
+import type { RelationalNode, RelationalEdge } from '@medicine-wheel/ontology-core';
+export interface NodeInspectorProps {
+    node: RelationalNode;
+    edges?: RelationalEdge[];
+    /** All nodes for resolving edge endpoints */
+    allNodes?: RelationalNode[];
+    /** Close handler */
+    onClose?: () => void;
+    /** Navigate to connected node */
+    onNavigate?: (nodeId: string) => void;
+    /** Custom className */
+    className?: string;
+}
+export declare function NodeInspector({ node, edges, allNodes, onClose, onNavigate, className, }: NodeInspectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodeInspector.d.ts.map

package/dist/NodeInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeInspector.d.ts","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,+BAA+B,CAAC;AAOnG,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,2CA4GpB"}

package/dist/NodeInspector.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeInspector = NodeInspector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ontology_core_1 = require("@medicine-wheel/ontology-core");
+const DIR_ICONS = {
+    east: '🌅', south: '🔥', west: '🌊', north: '❄️',
+};
+function NodeInspector({ node, edges = [], allNodes = [], onClose, onNavigate, className = '', }) {
+    const color = node.direction ? ontology_core_1.DIRECTION_COLORS[node.direction] : '#888';
+    const icon = node.direction ? DIR_ICONS[node.direction] : '◯';
+    const typeColor = ontology_core_1.NODE_TYPE_COLORS[node.type] ?? '#888';
+    const nodeMap = new Map(allNodes.map(n => [n.id, n]));
+    // Find connected edges
+    const connectedEdges = edges.filter(e => e.from_id === node.id || e.to_id === node.id);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { borderRadius: '12px', border: `1px solid ${color}40`, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px', borderBottom: `1px solid ${color}20`, 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: `${typeColor}20`, color: typeColor }, children: node.type }), node.direction && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '11px', padding: '2px 8px', borderRadius: '4px', background: `${color}20`, color, textTransform: 'capitalize' }, children: node.direction }))] })] })] }), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', opacity: 0.5, color: 'inherit' }, "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.5, 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.5, textTransform: 'uppercase' }, children: ["Relations (", connectedEdges.length, ")"] }), connectedEdges.map((edge, i) => {
+                        const otherId = edge.from_id === node.id ? edge.to_id : edge.from_id;
+                        const otherNode = nodeMap.get(otherId);
+                        const otherColor = otherNode?.direction ? ontology_core_1.DIRECTION_COLORS[otherNode.direction] : '#888';
+                        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)
+                                onNavigate(otherId); }, style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                padding: '6px 8px',
+                                borderRadius: '6px',
+                                fontSize: '13px',
+                                cursor: onNavigate ? 'pointer' : 'default',
+                                marginBottom: '4px',
+                                background: 'rgba(128,128,128,0.05)',
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.5, 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: otherColor, 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.5 }, children: [(edge.strength * 100).toFixed(0), "%"] }), edge.ceremony_honored && (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '10px' }, children: "\uD83D\uDD25" })] })] }, i));
+                    })] })), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '8px 16px', fontSize: '11px', opacity: 0.4, borderTop: '1px solid rgba(128,128,128,0.1)' }, children: ["ID: ", node.id, " \u00B7 Created: ", new Date(node.created_at).toLocaleDateString()] })] }));
+}
+//# sourceMappingURL=NodeInspector.js.map

package/dist/NodeInspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeInspector.js","sourceRoot":"","sources":["../src/NodeInspector.tsx"],"names":[],"mappings":"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"}

package/dist/OcapBadge.d.ts

@@ -0,0 +1,10 @@
+import type { OcapFlags } from '@medicine-wheel/ontology-core';
+export interface OcapBadgeProps {
+    ocap?: OcapFlags;
+    /** Show detailed breakdown */
+    detailed?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function OcapBadge({ ocap, detailed, className }: OcapBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OcapBadge.d.ts.map

package/dist/OcapBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OcapBadge.d.ts","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/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,2CA6DnF"}

package/dist/OcapBadge.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OcapBadge = OcapBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function OcapBadge({ ocap, detailed = false, className = '' }) {
+    if (!ocap) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: '#ff880020', color: '#ff8800' }, children: "No OCAP" }));
+    }
+    const flags = [
+        { key: 'O', label: 'Ownership', value: ocap.ownership },
+        { key: 'C', label: 'Control', value: ocap.control },
+        { key: 'A', label: 'Access', value: ocap.access },
+        { key: 'P', label: 'Possession', value: ocap.possession },
+    ];
+    const compliant = ocap.compliant;
+    if (!detailed) {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: className, title: flags.map(f => `${f.label}: ${f.value ? '✓' : '✗'}`).join(', '), style: {
+                fontSize: '12px',
+                padding: '2px 8px',
+                borderRadius: '4px',
+                background: compliant ? '#22c55e20' : '#ef444420',
+                color: compliant ? '#22c55e' : '#ef4444',
+                fontWeight: 500,
+            }, children: ["OCAP\u00AE ", compliant ? '✓' : '✗'] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { display: 'flex', gap: '4px', alignItems: 'center' }, children: flags.map(f => ((0, jsx_runtime_1.jsx)("span", { title: f.label, style: {
+                width: '22px',
+                height: '22px',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '11px',
+                fontWeight: 600,
+                background: f.value ? '#22c55e20' : '#ef444420',
+                color: f.value ? '#22c55e' : '#ef4444',
+            }, children: f.key }, f.key))) }));
+}
+//# sourceMappingURL=OcapBadge.js.map

package/dist/OcapBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OcapBadge.js","sourceRoot":"","sources":["../src/OcapBadge.tsx"],"names":[],"mappings":";;AAcA,8BA6DC;;AA7DD,SAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,GAAG,EAAE,EAAkB;IAClF,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CACL,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,wBAEpI,CACR,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE;QACvD,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;QACnD,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;QACjD,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;KAC1D,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IAEjC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CACL,kCACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EACtE,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;gBAChB,OAAO,EAAE,SAAS;gBAClB,YAAY,EAAE,KAAK;gBACnB,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;gBACjD,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACxC,UAAU,EAAE,GAAG;aAChB,4BAEM,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IACvB,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpF,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACd,iCAEE,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,YAAY,EAAE,KAAK;gBACnB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,GAAG;gBACf,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;gBAC/C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACvC,YAEA,CAAC,CAAC,GAAG,IAfD,CAAC,CAAC,GAAG,CAgBL,CACR,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/WilsonMeter.d.ts

@@ -0,0 +1,12 @@
+export interface WilsonMeterProps {
+    /** Alignment value 0–1 */
+    alignment: number;
+    /** Size in px */
+    size?: number;
+    /** Show numeric label */
+    showLabel?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function WilsonMeter({ alignment, size, showLabel, className, }: WilsonMeterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WilsonMeter.d.ts.map

package/dist/WilsonMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WilsonMeter.d.ts","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":"AAKA,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,2CAyDlB"}

package/dist/WilsonMeter.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WilsonMeter = WilsonMeter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function alignmentColor(value) {
+    if (value >= 0.7)
+        return '#22c55e';
+    if (value >= 0.4)
+        return '#f59e0b';
+    return '#ef4444';
+}
+function WilsonMeter({ alignment, size = 48, showLabel = true, className = '', }) {
+    const clamped = Math.max(0, Math.min(1, alignment));
+    const color = alignmentColor(clamped);
+    const radius = (size - 8) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - clamped);
+    const center = size / 2;
+    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.5 }, children: "Wilson" }))] }));
+}
+//# sourceMappingURL=WilsonMeter.js.map

package/dist/WilsonMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WilsonMeter.js","sourceRoot":"","sources":["../src/WilsonMeter.tsx"],"names":[],"mappings":";;AAsBA,kCA8DC;;AApED,SAAS,cAAc,CAAC,KAAa;IACnC,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,SAAS,CAAC;IACnC,IAAI,KAAK,IAAI,GAAG;QAAE,OAAO,SAAS,CAAC;IACnC,OAAO,SAAS,CAAC;AACnB,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,GAAG,EAAE,uBAAe,CAC/D,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @medicine-wheel/ui-components
+ *
+ * React UI components for the Medicine Wheel Developer Suite.
+ */
+export { DirectionCard } from './DirectionCard.js';
+export type { DirectionCardProps } from './DirectionCard.js';
+export { BeatTimeline } from './BeatTimeline.js';
+export type { BeatTimelineProps } from './BeatTimeline.js';
+export { NodeInspector } from './NodeInspector.js';
+export type { NodeInspectorProps } from './NodeInspector.js';
+export { OcapBadge } from './OcapBadge.js';
+export type { OcapBadgeProps } from './OcapBadge.js';
+export { WilsonMeter } from './WilsonMeter.js';
+export type { WilsonMeterProps } from './WilsonMeter.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * @medicine-wheel/ui-components
+ *
+ * React UI components for the Medicine Wheel Developer Suite.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WilsonMeter = exports.OcapBadge = exports.NodeInspector = exports.BeatTimeline = exports.DirectionCard = void 0;
+var DirectionCard_js_1 = require("./DirectionCard.js");
+Object.defineProperty(exports, "DirectionCard", { enumerable: true, get: function () { return DirectionCard_js_1.DirectionCard; } });
+var BeatTimeline_js_1 = require("./BeatTimeline.js");
+Object.defineProperty(exports, "BeatTimeline", { enumerable: true, get: function () { return BeatTimeline_js_1.BeatTimeline; } });
+var NodeInspector_js_1 = require("./NodeInspector.js");
+Object.defineProperty(exports, "NodeInspector", { enumerable: true, get: function () { return NodeInspector_js_1.NodeInspector; } });
+var OcapBadge_js_1 = require("./OcapBadge.js");
+Object.defineProperty(exports, "OcapBadge", { enumerable: true, get: function () { return OcapBadge_js_1.OcapBadge; } });
+var WilsonMeter_js_1 = require("./WilsonMeter.js");
+Object.defineProperty(exports, "WilsonMeter", { enumerable: true, get: function () { return WilsonMeter_js_1.WilsonMeter; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAEH,uDAAmD;AAA1C,iHAAA,aAAa,OAAA;AAGtB,qDAAiD;AAAxC,+GAAA,YAAY,OAAA;AAGrB,uDAAmD;AAA1C,iHAAA,aAAa,OAAA;AAGtB,+CAA2C;AAAlC,yGAAA,SAAS,OAAA;AAGlB,mDAA+C;AAAtC,6GAAA,WAAW,OAAA"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@medicine-wheel/ui-components",
+  "version": "0.2.2",
+  "description": "React UI components for the Medicine Wheel Developer Suite — direction cards, beat timelines, node inspectors",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./src/tokens.css"
+  },
+  "sideEffects": [
+    "./src/tokens.css"
+  ],
+  "files": [
+    "dist",
+    "src/tokens.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "medicine-wheel",
+    "react",
+    "ui",
+    "indigenous",
+    "four-directions",
+    "visualization"
+  ],
+  "author": "jgwill",
+  "license": "MIT",
+  "dependencies": {
+    "@medicine-wheel/ontology-core": "^0.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/src/tokens.css

@@ -0,0 +1,289 @@
+/**
+ * medicine-wheel-ui-components — Design Tokens
+ * Source of truth for Medicine Wheel colors, type, spacing, radius, motion.
+ * Mirror of Miadi Design System `colors_and_type.css`.
+ *
+ * Consume from an app with:
+ *   @import "medicine-wheel-ui-components/tokens.css";
+ * Or a bundler path:
+ *   @import "../../src/ui-components/src/tokens.css";
+ *
+ * Assumes a webfont file at /fonts/Stereohead.otf (app serves it publicly).
+ */
+
+@font-face {
+  font-family: 'Stereohead';
+  src: url('/fonts/Stereohead.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* Base */
+  --mw-bg:          oklch(0.145 0 0);
+  --mw-card:        oklch(0.185 0 0);
+  --mw-card-2:      oklch(0.21 0 0);
+  --mw-secondary:   oklch(0.269 0 0);
+  --mw-border:      oklch(0.3 0 0);
+  --mw-fg:          oklch(0.985 0 0);
+  --mw-muted:       oklch(0.708 0 0);
+  --mw-primary:     oklch(0.785 0.115 85);
+  --mw-primary-fg:  oklch(0.145 0 0);
+  --mw-ring:        oklch(0.785 0.115 85);
+  --mw-destructive: oklch(0.396 0.141 25.723);
+
+  /* STC panel accent */
+  --mw-stc-bg:      #111827;
+  --mw-stc-card:    #1f2937;
+  --mw-stc-accent:  #0891b2;
+  --mw-stc-border:  #374151;
+
+  /* Four Direction colors */
+  --mw-east:        #FFD700;
+  --mw-south:       #DC143C;
+  --mw-west:        #1a1a2e;
+  --mw-north:       #E8E8E8;
+
+  --mw-east-tint:   #FFD70015;
+  --mw-south-tint:  #DC143C15;
+  --mw-west-tint:   #2a2a4a;
+  --mw-north-tint:  #E8E8E810;
+
+  --mw-east-border:  #FFD70060;
+  --mw-south-border: #DC143C60;
+  --mw-west-border:  #5a5a8060;
+  --mw-north-border: #E8E8E860;
+
+  --mw-west-display: #8888cc; /* legible stand-in for near-black west on dark bg */
+
+  /* oklch direction tokens (for gradients) */
+  --color-east:   oklch(0.85 0.15 85);
+  --color-south:  oklch(0.55 0.22 25);
+  --color-west:   oklch(0.25 0.05 270);
+  --color-north:  oklch(0.92 0.01 0);
+
+  /* Node type colors — ancestor/knowledge retuned for contrast vs human */
+  --mw-node-human:     #e8913a;
+  --mw-node-land:      #4a9e5c;
+  --mw-node-spirit:    #9a5cc6;
+  --mw-node-ancestor:  #8a5a2a;
+  --mw-node-future:    #5a9ec6;
+  --mw-node-knowledge: #c8d42a;
+
+  /* Wilson meter */
+  --mw-wilson-high:   #22c55e;
+  --mw-wilson-mid:    #f59e0b;
+  --mw-wilson-low:    #ef4444;
+
+  /* Typography */
+  --font-display: 'Stereohead', 'Nunito', system-ui, sans-serif;
+  --font-sans:    'Nunito', system-ui, -apple-system, sans-serif;
+  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
+
+  --text-xs:   0.75rem;
+  --text-sm:   0.875rem;
+  --text-base: 1rem;
+  --text-lg:   1.125rem;
+  --text-xl:   1.25rem;
+  --text-2xl:  1.5rem;
+  --text-3xl:  1.875rem;
+  --text-4xl:  2.25rem;
+
+  --weight-normal:    400;
+  --weight-medium:    500;
+  --weight-semibold:  600;
+  --weight-bold:      700;
+  --weight-extrabold: 800;
+
+  --leading-tight:  1.25;
+  --leading-snug:   1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed:1.625;
+
+  /* Spacing */
+  --space-1:  0.25rem;
+  --space-2:  0.5rem;
+  --space-3:  0.75rem;
+  --space-4:  1rem;
+  --space-5:  1.25rem;
+  --space-6:  1.5rem;
+  --space-8:  2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* Radius */
+  --radius-sm:   0.25rem;
+  --radius:      0.625rem;
+  --radius-lg:   0.75rem;
+  --radius-full: 9999px;
+
+  /* Motion */
+  --duration-fast:    150ms;
+  --duration-default: 200ms;
+  --duration-slow:    300ms;
+  --duration-pulse:   3s;
+  --duration-glow:    2s;
+
+  /* Layout */
+  --max-w-content: 80rem;
+  --max-w-focused: 64rem;
+  --nav-height:    4rem;
+}
+
+/* Type classes */
+.mw-display {
+  font-family: var(--font-display);
+  font-size:   var(--text-4xl);
+  font-weight: var(--weight-normal);
+  line-height: var(--leading-tight);
+  letter-spacing: 0.02em;
+}
+.mw-h1 {
+  font-family: var(--font-display);
+  font-size:   var(--text-3xl);
+  font-weight: var(--weight-normal);
+  line-height: var(--leading-tight);
+}
+.mw-h2 {
+  font-family: var(--font-display);
+  font-size:   var(--text-2xl);
+  font-weight: var(--weight-normal);
+  line-height: var(--leading-tight);
+}
+.mw-h3 {
+  font-size:   var(--text-lg);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+}
+.mw-body    { font-size: var(--text-base); line-height: var(--leading-relaxed); }
+.mw-body-sm { font-size: var(--text-sm);   line-height: var(--leading-normal); }
+.mw-label   { font-size: var(--text-sm);   font-weight: var(--weight-medium); }
+.mw-meta    { font-size: var(--text-xs);   color: var(--mw-muted); }
+.mw-ojibwe  { font-style: italic; font-size: var(--text-sm); opacity: 0.7; }
+.mw-quote   { font-style: italic; color: var(--mw-muted); border-left: 3px solid var(--mw-primary); padding-left: var(--space-4); }
+.mw-mono    { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--mw-secondary); padding: 2px 6px; border-radius: var(--radius-sm); }
+
+/* Cards */
+.mw-card {
+  background:    var(--mw-card);
+  border:        1px solid var(--mw-border);
+  border-radius: var(--radius);
+  padding:       var(--space-4) var(--space-6);
+}
+.mw-card--east  { border-top: 3px solid var(--mw-east); }
+.mw-card--south { border-top: 3px solid var(--mw-south); }
+.mw-card--west  { border-top: 3px solid var(--mw-west); }
+.mw-card--north { border-top: 3px solid var(--mw-north); }
+.mw-card--east-left  { border-left: 4px solid var(--mw-east); }
+.mw-card--south-left { border-left: 4px solid var(--mw-south); }
+.mw-card--west-left  { border-left: 4px solid var(--mw-west); }
+.mw-card--north-left { border-left: 4px solid var(--mw-north); }
+
+/* Buttons */
+.mw-btn {
+  display:       inline-flex;
+  align-items:   center;
+  gap:           var(--space-2);
+  padding:       var(--space-2) var(--space-4);
+  border-radius: var(--radius);
+  font-size:     var(--text-sm);
+  font-weight:   var(--weight-medium);
+  font-family:   var(--font-sans);
+  cursor:        pointer;
+  transition:    all var(--duration-default) ease;
+  border:        none;
+  outline:       none;
+}
+.mw-btn--primary   { background: var(--mw-primary); color: var(--mw-primary-fg); }
+.mw-btn--primary:hover { filter: brightness(0.9); }
+.mw-btn--secondary { background: var(--mw-secondary); color: var(--mw-fg); }
+.mw-btn--secondary:hover { background: var(--mw-border); }
+.mw-btn--ghost     { background: transparent; color: var(--mw-muted); border: 1px solid var(--mw-border); }
+.mw-btn--ghost:hover { color: var(--mw-fg); background: var(--mw-secondary); }
+.mw-btn--stc       { background: var(--mw-stc-accent); color: #fff; }
+.mw-btn--stc:hover { filter: brightness(0.9); }
+.mw-btn--danger    { background: transparent; color: var(--mw-destructive); font-weight: var(--weight-bold); }
+
+/* Badges */
+.mw-badge {
+  display:       inline-flex;
+  align-items:   center;
+  padding:       2px var(--space-2);
+  border-radius: var(--radius-full);
+  font-size:     var(--text-xs);
+  font-weight:   var(--weight-medium);
+  background:    var(--mw-secondary);
+  color:         var(--mw-fg);
+}
+.mw-badge--east    { background: var(--mw-east-tint); color: var(--mw-east); border: 1px solid var(--mw-east-border); }
+.mw-badge--south   { background: #DC143C25; color: #ff6b80; border: 1px solid #DC143C50; }
+.mw-badge--west    { background: var(--mw-west-tint); color: var(--mw-west-display); border: 1px solid var(--mw-west-border); }
+.mw-badge--north   { background: var(--mw-north-tint); color: var(--mw-north); border: 1px solid var(--mw-north-border); }
+.mw-badge--success { background: #14532d40; color: var(--mw-wilson-high); }
+.mw-badge--warning { background: #78350f40; color: var(--mw-wilson-mid); }
+.mw-badge--error   { background: #7f1d1d40; color: var(--mw-wilson-low); }
+
+/* Inputs */
+.mw-input {
+  width:         100%;
+  background:    var(--mw-secondary);
+  border:        1px solid var(--mw-border);
+  border-radius: var(--radius);
+  padding:       var(--space-2) var(--space-3);
+  color:         var(--mw-fg);
+  font-family:   var(--font-sans);
+  font-size:     var(--text-sm);
+  outline:       none;
+  transition:    border-color var(--duration-fast);
+}
+.mw-input:focus { border-color: var(--mw-ring); }
+.mw-input::placeholder { color: var(--mw-muted); }
+
+/* Progress */
+.mw-progress-track {
+  height:        0.5rem;
+  background:    var(--mw-secondary);
+  border-radius: var(--radius-full);
+  overflow:      hidden;
+}
+.mw-progress-fill {
+  height:    100%;
+  background: var(--mw-primary);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-slow);
+}
+.mw-progress-fill--directions {
+  background: linear-gradient(to right, var(--mw-east), var(--mw-south), #6060a0, var(--mw-north));
+}
+
+/* Dots */
+.mw-dot {
+  width:  0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  display: inline-block;
+}
+.mw-dot--active   { background: var(--mw-wilson-high); }
+.mw-dot--inactive { background: var(--mw-muted); }
+.mw-dot--east     { background: var(--mw-east); }
+.mw-dot--south    { background: var(--mw-south); }
+.mw-dot--west     { background: var(--mw-west-display); }
+.mw-dot--north    { background: var(--mw-north); }
+
+/* Animations */
+@keyframes mw-pulse-center {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50%       { opacity: 1;   transform: scale(1.08); }
+}
+@keyframes mw-glow {
+  0%, 100% { filter: brightness(1); }
+  50%       { filter: brightness(1.3); }
+}
+@keyframes mw-spin {
+  to { transform: rotate(360deg); }
+}
+.mw-pulse { animation: mw-pulse-center var(--duration-pulse) ease-in-out infinite; }
+.mw-glow  { animation: mw-glow var(--duration-glow) ease-in-out infinite; }
+.mw-spin  { animation: mw-spin 1s linear infinite; }