@harmonia-core/ui 1.0.0 → 1.1.0
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 +46 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @harmonia-core
|
|
1
|
+
# @harmonia-core/ui
|
|
2
2
|
|
|
3
3
|
A capacity-adaptive UI framework that treats human cognitive, temporal, and emotional state as first-class inputs.
|
|
4
4
|
|
|
@@ -11,9 +11,9 @@ Instead of inferring or profiling users, Harmonia derives discrete interface mod
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
|
-
npm install @harmonia-core @renge-ui/tokens
|
|
14
|
+
npm install @harmonia-core/ui @renge-ui/tokens
|
|
15
15
|
# or
|
|
16
|
-
pnpm add @harmonia-core @renge-ui/tokens
|
|
16
|
+
pnpm add @harmonia-core/ui @renge-ui/tokens
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
`@renge-ui/tokens` is a required peer dependency. It provides the `createRengeTheme()` function and the `--renge-*` CSS custom properties that the capacity system's motion and spacing utilities reference.
|
|
@@ -60,7 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
60
60
|
// components/providers.tsx
|
|
61
61
|
"use client"
|
|
62
62
|
|
|
63
|
-
import { CapacityProvider } from "@harmonia-core"
|
|
63
|
+
import { CapacityProvider } from "@harmonia-core/ui"
|
|
64
64
|
|
|
65
65
|
export function Providers({ children }: { children: React.ReactNode }) {
|
|
66
66
|
return <CapacityProvider>{children}</CapacityProvider>
|
|
@@ -76,7 +76,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|
|
76
76
|
### Consuming mode tokens in a component
|
|
77
77
|
|
|
78
78
|
```tsx
|
|
79
|
-
import { useDerivedMode, deriveModeLabel } from "@harmonia-core"
|
|
79
|
+
import { useDerivedMode, deriveModeLabel } from "@harmonia-core/ui"
|
|
80
80
|
|
|
81
81
|
function AdaptiveCard() {
|
|
82
82
|
const { field, mode } = useDerivedMode()
|
|
@@ -114,7 +114,7 @@ function AdaptiveCard() {
|
|
|
114
114
|
### Applying motion classes
|
|
115
115
|
|
|
116
116
|
```tsx
|
|
117
|
-
import { useEffectiveMotion, entranceClass, hoverClass } from "@harmonia-core"
|
|
117
|
+
import { useEffectiveMotion, entranceClass, hoverClass } from "@harmonia-core/ui"
|
|
118
118
|
|
|
119
119
|
function AnimatedSection({ children }: { children: React.ReactNode }) {
|
|
120
120
|
const { mode } = useEffectiveMotion() // applies prefers-reduced-motion hard override
|
|
@@ -134,7 +134,7 @@ function AnimatedSection({ children }: { children: React.ReactNode }) {
|
|
|
134
134
|
### Adjusting grid layout by density
|
|
135
135
|
|
|
136
136
|
```tsx
|
|
137
|
-
import { useDerivedMode } from "@harmonia-core"
|
|
137
|
+
import { useDerivedMode } from "@harmonia-core/ui"
|
|
138
138
|
|
|
139
139
|
function EventGrid({ events }: { events: Event[] }) {
|
|
140
140
|
const { mode } = useDerivedMode()
|
|
@@ -246,7 +246,45 @@ Four human-readable labels derived from raw inputs, first match wins:
|
|
|
246
246
|
|
|
247
247
|
### Components
|
|
248
248
|
|
|
249
|
-
|
|
249
|
+
Pre-built components are available via the `/components` entry point:
|
|
250
|
+
|
|
251
|
+
```ts
|
|
252
|
+
import { CapacityControls, CapacityDemoCard, AmbientFieldMonitor } from "@harmonia-core/ui/components"
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
| Component | Description |
|
|
256
|
+
|-----------|-------------|
|
|
257
|
+
| `CapacityControls` | Floating panel for manual capacity input — sliders, presets, live mode readout |
|
|
258
|
+
| `CapacityDemoCard` | Demo card that reacts to the current mode in real-time |
|
|
259
|
+
| `AmbientFieldMonitor` | Debug overlay showing live field values and derived tokens |
|
|
260
|
+
|
|
261
|
+
#### CapacityControls
|
|
262
|
+
|
|
263
|
+
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.
|
|
264
|
+
|
|
265
|
+
Requires `motion` (`>=11.0.0`) as a peer dependency for animations.
|
|
266
|
+
|
|
267
|
+
```tsx
|
|
268
|
+
// app/layout.tsx or your root providers file
|
|
269
|
+
import { CapacityControls } from "@harmonia-core/ui/components"
|
|
270
|
+
|
|
271
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
272
|
+
return (
|
|
273
|
+
<html lang="en">
|
|
274
|
+
<body>
|
|
275
|
+
{children}
|
|
276
|
+
<CapacityControls />
|
|
277
|
+
</body>
|
|
278
|
+
</html>
|
|
279
|
+
)
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
`CapacityControls` must be rendered inside `CapacityProvider`. It reads and writes to the capacity context directly — no props required.
|
|
284
|
+
|
|
285
|
+
**Presets available:** Exhausted, Overwhelmed, Distracted, Neutral, Focused, Energized, Exploring.
|
|
286
|
+
|
|
287
|
+
See the [live demo](https://harmonia-ui.vercel.app) for all three components in action.
|
|
250
288
|
|
|
251
289
|
---
|
|
252
290
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@harmonia-core/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
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": [
|