@june-ai/june-ui 0.1.1 → 0.2.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/README.md +65 -65
- package/dist/index.cjs +0 -2
- package/dist/index.js +0 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
# @june-ai/june-ui
|
|
2
|
-
|
|
3
|
-
React Generative UI SDK built on [OpenUI](https://github.com/thesysdev/openui). June adds streaming
|
|
4
|
-
helpers, themes, safe actions, error recovery, and library validation. OpenUI does all parsing and
|
|
5
|
-
rendering.
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @june-ai/june-ui
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Import styles once in your app entry:
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
import "@openuidev/react-ui/components.css"; // OpenUI built-in components
|
|
17
|
-
import "@june-ai/june-ui/styles.css"; // June theme variables
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Usage
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
import { JuneUI } from "@june-ai/june-ui";
|
|
24
|
-
|
|
25
|
-
<JuneUI response={response} isStreaming={isStreaming} theme="system" onJuneError={console.error} />
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Streaming (works with any backend)
|
|
29
|
-
|
|
30
|
-
```tsx
|
|
31
|
-
const stream = useJuneStream();
|
|
32
|
-
stream.startFetch("/api/generate", { method: "POST", body, sse: false }); // sse: true for SSE
|
|
33
|
-
<JuneUI response={stream.response} isStreaming={stream.isStreaming} />
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Custom library
|
|
37
|
-
|
|
38
|
-
```tsx
|
|
39
|
-
import { createJuneLibrary } from "@june-ai/june-ui";
|
|
40
|
-
const library = createJuneLibrary({ root: "Stack", components: [Stack, Card] }); // module scope
|
|
41
|
-
<JuneUI library={library} response={response} />
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### Actions
|
|
45
|
-
|
|
46
|
-
```tsx
|
|
47
|
-
const actions = { submit: defineJuneAction({ schema, sensitive: true, handler }) };
|
|
48
|
-
<JuneUI actions={actions} confirmAction={({ name }) => window.confirm(name)} ... />
|
|
49
|
-
```
|
|
50
|
-
Model output never executes code. Only actions you registered by name can run, and sensitive
|
|
51
|
-
actions are denied unless confirmed.
|
|
52
|
-
|
|
53
|
-
### Lightweight entry
|
|
54
|
-
|
|
55
|
-
`@june-ai/june-ui/core` exports `JuneRenderer`, which requires your own `library` and does not
|
|
56
|
-
import OpenUI's built-in component library.
|
|
57
|
-
|
|
58
|
-
## OpenUI features
|
|
59
|
-
|
|
60
|
-
Tool providers, query loaders, state callbacks, and parse-result callbacks are forwarded to
|
|
61
|
-
OpenUI's `Renderer` as props. See OpenUI's docs for their behaviour. Never put API keys in the
|
|
62
|
-
browser; do tool/MCP calls in your backend.
|
|
63
|
-
|
|
64
|
-
## Requirements
|
|
65
|
-
|
|
1
|
+
# @june-ai/june-ui
|
|
2
|
+
|
|
3
|
+
React Generative UI SDK built on [OpenUI](https://github.com/thesysdev/openui). June adds streaming
|
|
4
|
+
helpers, themes, safe actions, error recovery, and library validation. OpenUI does all parsing and
|
|
5
|
+
rendering.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @june-ai/june-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Import styles once in your app entry:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import "@openuidev/react-ui/components.css"; // OpenUI built-in components
|
|
17
|
+
import "@june-ai/june-ui/styles.css"; // June theme variables
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { JuneUI } from "@june-ai/june-ui";
|
|
24
|
+
|
|
25
|
+
<JuneUI response={response} isStreaming={isStreaming} theme="system" onJuneError={console.error} />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Streaming (works with any backend)
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
const stream = useJuneStream();
|
|
32
|
+
stream.startFetch("/api/generate", { method: "POST", body, sse: false }); // sse: true for SSE
|
|
33
|
+
<JuneUI response={stream.response} isStreaming={stream.isStreaming} />
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Custom library
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { createJuneLibrary } from "@june-ai/june-ui";
|
|
40
|
+
const library = createJuneLibrary({ root: "Stack", components: [Stack, Card] }); // module scope
|
|
41
|
+
<JuneUI library={library} response={response} />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Actions
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
const actions = { submit: defineJuneAction({ schema, sensitive: true, handler }) };
|
|
48
|
+
<JuneUI actions={actions} confirmAction={({ name }) => window.confirm(name)} ... />
|
|
49
|
+
```
|
|
50
|
+
Model output never executes code. Only actions you registered by name can run, and sensitive
|
|
51
|
+
actions are denied unless confirmed.
|
|
52
|
+
|
|
53
|
+
### Lightweight entry
|
|
54
|
+
|
|
55
|
+
`@june-ai/june-ui/core` exports `JuneRenderer`, which requires your own `library` and does not
|
|
56
|
+
import OpenUI's built-in component library.
|
|
57
|
+
|
|
58
|
+
## OpenUI features
|
|
59
|
+
|
|
60
|
+
Tool providers, query loaders, state callbacks, and parse-result callbacks are forwarded to
|
|
61
|
+
OpenUI's `Renderer` as props. See OpenUI's docs for their behaviour. Never put API keys in the
|
|
62
|
+
browser; do tool/MCP calls in your backend.
|
|
63
|
+
|
|
64
|
+
## Requirements
|
|
65
|
+
|
|
66
66
|
React 18.3.1+ or 19, plus the OpenUI peer dependencies listed in package.json.
|
package/dist/index.cjs
CHANGED
|
@@ -148,7 +148,6 @@ function useJuneTheme() {
|
|
|
148
148
|
|
|
149
149
|
// src/themes/dark.ts
|
|
150
150
|
var darkTheme = {
|
|
151
|
-
"--june-background": "#0b0f19",
|
|
152
151
|
"--june-foreground": "#f3f4f6",
|
|
153
152
|
"--june-muted": "#9ca3af",
|
|
154
153
|
"--june-border": "#1f2937",
|
|
@@ -160,7 +159,6 @@ var darkTheme = {
|
|
|
160
159
|
|
|
161
160
|
// src/themes/light.ts
|
|
162
161
|
var lightTheme = {
|
|
163
|
-
"--june-background": "#ffffff",
|
|
164
162
|
"--june-foreground": "#111827",
|
|
165
163
|
"--june-muted": "#6b7280",
|
|
166
164
|
"--june-border": "#e5e7eb",
|
package/dist/index.js
CHANGED
|
@@ -109,7 +109,6 @@ function useJuneTheme() {
|
|
|
109
109
|
|
|
110
110
|
// src/themes/dark.ts
|
|
111
111
|
var darkTheme = {
|
|
112
|
-
"--june-background": "#0b0f19",
|
|
113
112
|
"--june-foreground": "#f3f4f6",
|
|
114
113
|
"--june-muted": "#9ca3af",
|
|
115
114
|
"--june-border": "#1f2937",
|
|
@@ -121,7 +120,6 @@ var darkTheme = {
|
|
|
121
120
|
|
|
122
121
|
// src/themes/light.ts
|
|
123
122
|
var lightTheme = {
|
|
124
|
-
"--june-background": "#ffffff",
|
|
125
123
|
"--june-foreground": "#111827",
|
|
126
124
|
"--june-muted": "#6b7280",
|
|
127
125
|
"--june-border": "#e5e7eb",
|