@harmonia-core/ui 1.2.0 → 1.2.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.
- package/README.md +42 -42
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -70,6 +70,48 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|
|
70
70
|
|
|
71
71
|
`CapacityProvider` starts in **auto mode** — it polls six passive signal detectors every 2 seconds (time of day, session duration, scroll velocity, interaction rate, typing speed, system preferences) and writes inferred capacity values to the field manager. Any manual slider interaction disables auto mode.
|
|
72
72
|
|
|
73
|
+
### 3. Add CapacityControls and AmbientFieldMonitor for controls + debugging
|
|
74
|
+
|
|
75
|
+
Pre-built components are available via the `/components` entry point:
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
import { CapacityControls, CapacityDemoCard, AmbientFieldMonitor } from "@harmonia-core/ui/components"
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
| Component | Description |
|
|
82
|
+
|-----------|-------------|
|
|
83
|
+
| `CapacityControls` | Floating panel for manual capacity input — sliders, presets, live mode readout |
|
|
84
|
+
| `CapacityDemoCard` | Demo card that reacts to the current mode in real-time |
|
|
85
|
+
| `AmbientFieldMonitor` | Debug overlay showing live field values and derived tokens |
|
|
86
|
+
|
|
87
|
+
#### CapacityControls
|
|
88
|
+
|
|
89
|
+
A fixed-position floating control panel (bottom-right) that lets users set their capacity state manually. Includes four sliders (cognitive, temporal, emotional, valence), quick presets, auto/manual mode toggle, opt-in haptic/sonic feedback, and a live derived fields display.
|
|
90
|
+
|
|
91
|
+
Requires `motion` (`>=11.0.0`) as a peer dependency for animations.
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
// app/layout.tsx or your root providers file
|
|
95
|
+
import { CapacityControls } from "@harmonia-core/ui/components"
|
|
96
|
+
|
|
97
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
98
|
+
return (
|
|
99
|
+
<html lang="en">
|
|
100
|
+
<body>
|
|
101
|
+
{children}
|
|
102
|
+
<CapacityControls />
|
|
103
|
+
</body>
|
|
104
|
+
</html>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
`CapacityControls` must be rendered inside `CapacityProvider`. It reads and writes to the capacity context directly — no props required.
|
|
110
|
+
|
|
111
|
+
**Presets available:** Exhausted, Overwhelmed, Distracted, Neutral, Focused, Energized, Exploring.
|
|
112
|
+
|
|
113
|
+
See the [live demo](https://harmonia-ui.vercel.app) for all three components in action.
|
|
114
|
+
|
|
73
115
|
---
|
|
74
116
|
|
|
75
117
|
## Usage
|
|
@@ -245,48 +287,6 @@ Four human-readable labels derived from raw inputs, first match wins:
|
|
|
245
287
|
| `triggerHaptic` | `(pattern: HapticPatternName) => void` | Web Vibration API — opt-in haptic feedback |
|
|
246
288
|
| `playPacedSonic` | `(pace: ArousalMode) => void` | Web Audio API — opt-in sonic feedback |
|
|
247
289
|
|
|
248
|
-
### Components
|
|
249
|
-
|
|
250
|
-
Pre-built components are available via the `/components` entry point:
|
|
251
|
-
|
|
252
|
-
```ts
|
|
253
|
-
import { CapacityControls, CapacityDemoCard, AmbientFieldMonitor } from "@harmonia-core/ui/components"
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
| Component | Description |
|
|
257
|
-
|-----------|-------------|
|
|
258
|
-
| `CapacityControls` | Floating panel for manual capacity input — sliders, presets, live mode readout |
|
|
259
|
-
| `CapacityDemoCard` | Demo card that reacts to the current mode in real-time |
|
|
260
|
-
| `AmbientFieldMonitor` | Debug overlay showing live field values and derived tokens |
|
|
261
|
-
|
|
262
|
-
#### CapacityControls
|
|
263
|
-
|
|
264
|
-
A fixed-position floating control panel (bottom-right) that lets users set their capacity state manually. Includes four sliders (cognitive, temporal, emotional, valence), quick presets, auto/manual mode toggle, opt-in haptic/sonic feedback, and a live derived fields display.
|
|
265
|
-
|
|
266
|
-
Requires `motion` (`>=11.0.0`) as a peer dependency for animations.
|
|
267
|
-
|
|
268
|
-
```tsx
|
|
269
|
-
// app/layout.tsx or your root providers file
|
|
270
|
-
import { CapacityControls } from "@harmonia-core/ui/components"
|
|
271
|
-
|
|
272
|
-
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
273
|
-
return (
|
|
274
|
-
<html lang="en">
|
|
275
|
-
<body>
|
|
276
|
-
{children}
|
|
277
|
-
<CapacityControls />
|
|
278
|
-
</body>
|
|
279
|
-
</html>
|
|
280
|
-
)
|
|
281
|
-
}
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
`CapacityControls` must be rendered inside `CapacityProvider`. It reads and writes to the capacity context directly — no props required.
|
|
285
|
-
|
|
286
|
-
**Presets available:** Exhausted, Overwhelmed, Distracted, Neutral, Focused, Energized, Exploring.
|
|
287
|
-
|
|
288
|
-
See the [live demo](https://harmonia-ui.vercel.app) for all three components in action.
|
|
289
|
-
|
|
290
290
|
---
|
|
291
291
|
|
|
292
292
|
## Design principles
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@harmonia-core/ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A capacity-adaptive UI framework that treats human cognitive, temporal, and emotional state as first-class inputs. Derives interface modes (density, motion, contrast, focus) from explicit user state — no inference, no profiling.",
|
|
6
6
|
"keywords": [
|