@june-ai/june-ui 0.1.1 → 0.2.2

package/README.md

@@ -1,66 +1,66 @@
-# @june-ai/june-ui
-
-React Generative UI SDK built on [OpenUI](https://github.com/thesysdev/openui). June adds streaming
-helpers, themes, safe actions, error recovery, and library validation. OpenUI does all parsing and
-rendering.
-
-## Install
-
-```bash
-npm install @june-ai/june-ui
-```
-
-Import styles once in your app entry:
-
-```ts
-import "@openuidev/react-ui/components.css"; // OpenUI built-in components
-import "@june-ai/june-ui/styles.css";        // June theme variables
-```
-
-## Usage
-
-```tsx
-import { JuneUI } from "@june-ai/june-ui";
-
-<JuneUI response={response} isStreaming={isStreaming} theme="system" onJuneError={console.error} />
-```
-
-### Streaming (works with any backend)
-
-```tsx
-const stream = useJuneStream();
-stream.startFetch("/api/generate", { method: "POST", body, sse: false }); // sse: true for SSE
-<JuneUI response={stream.response} isStreaming={stream.isStreaming} />
-```
-
-### Custom library
-
-```tsx
-import { createJuneLibrary } from "@june-ai/june-ui";
-const library = createJuneLibrary({ root: "Stack", components: [Stack, Card] }); // module scope
-<JuneUI library={library} response={response} />
-```
-
-### Actions
-
-```tsx
-const actions = { submit: defineJuneAction({ schema, sensitive: true, handler }) };
-<JuneUI actions={actions} confirmAction={({ name }) => window.confirm(name)} ... />
-```
-Model output never executes code. Only actions you registered by name can run, and sensitive
-actions are denied unless confirmed.
-
-### Lightweight entry
-
-`@june-ai/june-ui/core` exports `JuneRenderer`, which requires your own `library` and does not
-import OpenUI's built-in component library.
-
-## OpenUI features
-
-Tool providers, query loaders, state callbacks, and parse-result callbacks are forwarded to
-OpenUI's `Renderer` as props. See OpenUI's docs for their behaviour. Never put API keys in the
-browser; do tool/MCP calls in your backend.
-
-## Requirements
-
+# @june-ai/june-ui
+
+React Generative UI SDK built on [OpenUI](https://github.com/thesysdev/openui). June adds streaming
+helpers, themes, safe actions, error recovery, and library validation. OpenUI does all parsing and
+rendering.
+
+## Install
+
+```bash
+npm install @june-ai/june-ui
+```
+
+Import styles once in your app entry:
+
+```ts
+import "@openuidev/react-ui/components.css"; // OpenUI built-in components
+import "@june-ai/june-ui/styles.css";        // June theme variables
+```
+
+## Usage
+
+```tsx
+import { JuneUI } from "@june-ai/june-ui";
+
+<JuneUI response={response} isStreaming={isStreaming} theme="system" onJuneError={console.error} />
+```
+
+### Streaming (works with any backend)
+
+```tsx
+const stream = useJuneStream();
+stream.startFetch("/api/generate", { method: "POST", body, sse: false }); // sse: true for SSE
+<JuneUI response={stream.response} isStreaming={stream.isStreaming} />
+```
+
+### Custom library
+
+```tsx
+import { createJuneLibrary } from "@june-ai/june-ui";
+const library = createJuneLibrary({ root: "Stack", components: [Stack, Card] }); // module scope
+<JuneUI library={library} response={response} />
+```
+
+### Actions
+
+```tsx
+const actions = { submit: defineJuneAction({ schema, sensitive: true, handler }) };
+<JuneUI actions={actions} confirmAction={({ name }) => window.confirm(name)} ... />
+```
+Model output never executes code. Only actions you registered by name can run, and sensitive
+actions are denied unless confirmed.
+
+### Lightweight entry
+
+`@june-ai/june-ui/core` exports `JuneRenderer`, which requires your own `library` and does not
+import OpenUI's built-in component library.
+
+## OpenUI features
+
+Tool providers, query loaders, state callbacks, and parse-result callbacks are forwarded to
+OpenUI's `Renderer` as props. See OpenUI's docs for their behaviour. Never put API keys in the
+browser; do tool/MCP calls in your backend.
+
+## Requirements
+
 React 18.3.1+ or 19, plus the OpenUI peer dependencies listed in package.json.

package/dist/index.cjs

@@ -148,26 +148,20 @@ function useJuneTheme() {
 
 // src/themes/dark.ts
 var darkTheme = {
-  "--june-background": "#0b0f19",
   "--june-foreground": "#f3f4f6",
   "--june-muted": "#9ca3af",
   "--june-border": "#1f2937",
   "--june-accent": "#818cf8",
-  "--june-danger": "#f87171",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#f87171"
 };
 
 // src/themes/light.ts
 var lightTheme = {
-  "--june-background": "#ffffff",
   "--june-foreground": "#111827",
   "--june-muted": "#6b7280",
   "--june-border": "#e5e7eb",
   "--june-accent": "#4f46e5",
-  "--june-danger": "#b91c1c",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#b91c1c"
 };
 
 // src/themes/theme-provider.tsx
@@ -192,23 +186,33 @@ function useResolvedTheme(mode) {
   return mode === "system" ? system : mode;
 }
 function JuneThemeProvider({
-  mode = "light",
+  mode,
   vars,
   className,
   style,
   children
 }) {
-  const resolved = useResolvedTheme(mode);
+  const explicit = mode !== void 0;
+  const resolved = useResolvedTheme(mode ?? "system");
   const mergedStyle = (0, import_react2.useMemo)(() => {
-    const base = resolved === "dark" ? darkTheme : lightTheme;
-    return { ...base, ...vars, colorScheme: resolved, ...style };
-  }, [resolved, vars, style]);
-  const context = (0, import_react2.useMemo)(() => ({ mode, theme: resolved }), [mode, resolved]);
+    if (!explicit && !vars && !style) return void 0;
+    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
+    return {
+      ...base,
+      ...vars,
+      ...explicit ? { colorScheme: resolved } : {},
+      ...style
+    };
+  }, [explicit, resolved, vars, style]);
+  const context = (0, import_react2.useMemo)(
+    () => ({ mode: mode ?? "system", theme: resolved }),
+    [mode, resolved]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JuneContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: className ? `june-ui-root ${className}` : "june-ui-root",
-      "data-june-theme": resolved,
+      "data-june-theme": explicit ? resolved : void 0,
       style: mergedStyle,
       children
     }
@@ -667,7 +671,7 @@ function JuneRenderer(props) {
     isStreaming = false,
     mixedContent = true,
     renderText,
-    theme = "light",
+    theme,
     themeVars,
     className,
     style,

package/dist/index.d.cts

@@ -89,6 +89,7 @@ declare function runAction(event: OpenUIActionEvent, options: RunActionOptions):
 declare function createActionHandler(options: RunActionOptions): (event: OpenUIActionEvent) => void;
 
 type JuneThemeVars = Record<string, string>;
+/** Colors only. June never sets fonts, radii or backgrounds. */
 declare const lightTheme: JuneThemeVars;
 
 interface FallbackArgs {
@@ -149,6 +150,10 @@ declare function JuneRenderer(props: JuneRendererProps): react.JSX.Element;
 
 declare function useResolvedTheme(mode: JuneThemeMode): JuneResolvedTheme;
 interface JuneThemeProviderProps {
+    /**
+     * Omit to inherit the host app's look: no colors, fonts or color-scheme are applied.
+     * "light" | "dark" | "system" opt in to June's text colors.
+     */
     mode?: JuneThemeMode;
     /** CSS variable overrides, e.g. { "--june-accent": "#0ea5e9" }. */
     vars?: JuneThemeVars;

package/dist/index.d.ts

@@ -89,6 +89,7 @@ declare function runAction(event: OpenUIActionEvent, options: RunActionOptions):
 declare function createActionHandler(options: RunActionOptions): (event: OpenUIActionEvent) => void;
 
 type JuneThemeVars = Record<string, string>;
+/** Colors only. June never sets fonts, radii or backgrounds. */
 declare const lightTheme: JuneThemeVars;
 
 interface FallbackArgs {
@@ -149,6 +150,10 @@ declare function JuneRenderer(props: JuneRendererProps): react.JSX.Element;
 
 declare function useResolvedTheme(mode: JuneThemeMode): JuneResolvedTheme;
 interface JuneThemeProviderProps {
+    /**
+     * Omit to inherit the host app's look: no colors, fonts or color-scheme are applied.
+     * "light" | "dark" | "system" opt in to June's text colors.
+     */
     mode?: JuneThemeMode;
     /** CSS variable overrides, e.g. { "--june-accent": "#0ea5e9" }. */
     vars?: JuneThemeVars;

package/dist/index.js

@@ -109,26 +109,20 @@ function useJuneTheme() {
 
 // src/themes/dark.ts
 var darkTheme = {
-  "--june-background": "#0b0f19",
   "--june-foreground": "#f3f4f6",
   "--june-muted": "#9ca3af",
   "--june-border": "#1f2937",
   "--june-accent": "#818cf8",
-  "--june-danger": "#f87171",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#f87171"
 };
 
 // src/themes/light.ts
 var lightTheme = {
-  "--june-background": "#ffffff",
   "--june-foreground": "#111827",
   "--june-muted": "#6b7280",
   "--june-border": "#e5e7eb",
   "--june-accent": "#4f46e5",
-  "--june-danger": "#b91c1c",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#b91c1c"
 };
 
 // src/themes/theme-provider.tsx
@@ -153,23 +147,33 @@ function useResolvedTheme(mode) {
   return mode === "system" ? system : mode;
 }
 function JuneThemeProvider({
-  mode = "light",
+  mode,
   vars,
   className,
   style,
   children
 }) {
-  const resolved = useResolvedTheme(mode);
+  const explicit = mode !== void 0;
+  const resolved = useResolvedTheme(mode ?? "system");
   const mergedStyle = useMemo(() => {
-    const base = resolved === "dark" ? darkTheme : lightTheme;
-    return { ...base, ...vars, colorScheme: resolved, ...style };
-  }, [resolved, vars, style]);
-  const context = useMemo(() => ({ mode, theme: resolved }), [mode, resolved]);
+    if (!explicit && !vars && !style) return void 0;
+    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
+    return {
+      ...base,
+      ...vars,
+      ...explicit ? { colorScheme: resolved } : {},
+      ...style
+    };
+  }, [explicit, resolved, vars, style]);
+  const context = useMemo(
+    () => ({ mode: mode ?? "system", theme: resolved }),
+    [mode, resolved]
+  );
   return /* @__PURE__ */ jsx(JuneContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: className ? `june-ui-root ${className}` : "june-ui-root",
-      "data-june-theme": resolved,
+      "data-june-theme": explicit ? resolved : void 0,
       style: mergedStyle,
       children
     }
@@ -628,7 +632,7 @@ function JuneRenderer(props) {
     isStreaming = false,
     mixedContent = true,
     renderText,
-    theme = "light",
+    theme,
     themeVars,
     className,
     style,

package/dist/june.css

@@ -1,21 +1,30 @@
 .june-ui-root {
-    box-sizing: border-box;
-    max-width: 100%;
-    color: var(--june-foreground);
-    background: var(--june-background);
-    font-family: var(--june-font-family);
-    border-radius: var(--june-radius);
-  }
-  
-  .june-ui-root img,
-  .june-ui-root video {
-    max-width: 100%;
-    height: auto;
-  }
-  
-  [data-june-error] {
-    padding: 12px 16px;
-    border: 1px solid var(--june-danger);
-    border-radius: var(--june-radius);
-    color: var(--june-danger);
-  }
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Colors apply only when a theme is explicitly chosen. */
+.june-ui-root[data-june-theme] {
+  color: var(--june-foreground);
+}
+
+.june-ui-root img,
+.june-ui-root video {
+  max-width: 100%;
+  height: auto;
+}
+
+.june-text {
+  margin: 0 0 8px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+[data-june-error] {
+  padding: 12px 16px;
+  border: 1px solid var(--june-danger, #b91c1c);
+  border-radius: 8px;
+  color: var(--june-danger, #b91c1c);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@june-ai/june-ui",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "description": "A React Generative UI SDK powered by OpenUI",
   "license": "MIT",
   "type": "module",