@harmonia-core/ui 1.0.0 → 1.1.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.
Files changed (2) hide show
  1. package/README.md +48 -9
  2. package/package.json +2 -6
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 motion
15
15
  # or
16
- pnpm add @harmonia-core @renge-ui/tokens
16
+ pnpm add @harmonia-core/ui @renge-ui/tokens motion
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.
@@ -24,7 +24,8 @@ pnpm add @harmonia-core @renge-ui/tokens
24
24
  {
25
25
  "react": ">=18.0.0",
26
26
  "react-dom": ">=18.0.0",
27
- "@renge-ui/tokens": "^1.0.0"
27
+ "@renge-ui/tokens": "^2.2.0",
28
+ "motion": ">=11.0.0"
28
29
  }
29
30
  ```
30
31
 
@@ -60,7 +61,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
60
61
  // components/providers.tsx
61
62
  "use client"
62
63
 
63
- import { CapacityProvider } from "@harmonia-core"
64
+ import { CapacityProvider } from "@harmonia-core/ui"
64
65
 
65
66
  export function Providers({ children }: { children: React.ReactNode }) {
66
67
  return <CapacityProvider>{children}</CapacityProvider>
@@ -76,7 +77,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
76
77
  ### Consuming mode tokens in a component
77
78
 
78
79
  ```tsx
79
- import { useDerivedMode, deriveModeLabel } from "@harmonia-core"
80
+ import { useDerivedMode, deriveModeLabel } from "@harmonia-core/ui"
80
81
 
81
82
  function AdaptiveCard() {
82
83
  const { field, mode } = useDerivedMode()
@@ -114,7 +115,7 @@ function AdaptiveCard() {
114
115
  ### Applying motion classes
115
116
 
116
117
  ```tsx
117
- import { useEffectiveMotion, entranceClass, hoverClass } from "@harmonia-core"
118
+ import { useEffectiveMotion, entranceClass, hoverClass } from "@harmonia-core/ui"
118
119
 
119
120
  function AnimatedSection({ children }: { children: React.ReactNode }) {
120
121
  const { mode } = useEffectiveMotion() // applies prefers-reduced-motion hard override
@@ -134,7 +135,7 @@ function AnimatedSection({ children }: { children: React.ReactNode }) {
134
135
  ### Adjusting grid layout by density
135
136
 
136
137
  ```tsx
137
- import { useDerivedMode } from "@harmonia-core"
138
+ import { useDerivedMode } from "@harmonia-core/ui"
138
139
 
139
140
  function EventGrid({ events }: { events: Event[] }) {
140
141
  const { mode } = useDerivedMode()
@@ -246,7 +247,45 @@ Four human-readable labels derived from raw inputs, first match wins:
246
247
 
247
248
  ### Components
248
249
 
249
- `@harmonia-core` exports the capacity system only — no opinionated UI components. See the [live demo](https://harmonia-ui.vercel.app) for reference implementations of `CapacityControls`, `CapacityDemoCard`, and `AmbientFieldMonitor`.
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.
250
289
 
251
290
  ---
252
291
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@harmonia-core/ui",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
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": [
@@ -47,11 +47,7 @@
47
47
  "react": ">=18.0.0",
48
48
  "react-dom": ">=18.0.0"
49
49
  },
50
- "peerDependenciesMeta": {
51
- "motion": {
52
- "optional": true
53
- }
54
- },
50
+ "peerDependenciesMeta": {},
55
51
  "dependencies": {},
56
52
  "devDependencies": {
57
53
  "@renge-ui/tokens": "^2.2.0",