@urun-sh/react 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.6
+
+- Updated React development/test dependencies to React 19 and aligned React DOM.
+
 ## 0.1.5
 
 - Stripped declaration comments, hid internal transport exports from the root API, and added packed tarball leakage checks.

package/README.md

@@ -12,20 +12,20 @@ npm install @urun-sh/react @urun-sh/core
 
 ```tsx
 import '@urun-sh/react/styles.css'
-import { UrunProvider, useApp, useTrack } from '@urun-sh/react'
+import { UrunProvider, useApp } from '@urun-sh/react'
 import { useEffect, useRef } from 'react'
 
 function VideoPlayer() {
   const app = useApp()
   const session = app.generate({ prompt: 'A sunset' })
-  const track = useTrack('video')
+  const video = session.stream('video')
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
-    if (track && videoRef.current) {
-      videoRef.current.srcObject = new MediaStream([track])
+    if (video.track && videoRef.current) {
+      videoRef.current.srcObject = new MediaStream([video.track])
     }
-  }, [track])
+  }, [video.track])
 
   return (
     <button onClick={() => session.doc('control').set({ prompt: { text: 'A forest' } })}>
@@ -60,11 +60,11 @@ Do not pass server API keys or long-lived secrets to `UrunProvider`. Prefer `aut
 
 ## API
 
-- `UrunProvider` — configures the app proxy and session/compositor contexts.
+- `UrunProvider` — configures the app proxy.
 - `useApp()` — returns the deployed app proxy configured by `appId`.
-- `useTrack(name)` — returns a `MediaStreamTrack | null` for `ctx.stream(name)`.
-- `useSession()` — reads connection/session state.
-- `useScene()` / `useLayout()` — advanced compositor state hooks.
+- `app.<function>(args?)` — starts or reconnects a running function call and returns a render-safe session proxy.
+- `session.stream(name)` — returns a render-safe named stream with `.track`, `.attach(track)`, `.detach()`, `.seek(seconds | 'live')`, and lifecycle events.
+- `session.doc(name)` — returns a render-safe synced document with `.get()`, `.set(patch)`, and lifecycle events.
 - `registerComponent()` and built-in components — optional generative UI support.
 
 ## Styling

package/dist/index.d.mts

@@ -1,77 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, RefObject, Component, ErrorInfo, ComponentType } from 'react';
-import { Layer, LayoutConfig, TransportState, App } from '@urun-sh/core';
-import { TransportSession } from '@urun-sh/core/internal';
+import * as react from 'react';
+import { RefObject, ReactNode, Component, ErrorInfo, ComponentType } from 'react';
+import { SessionInterface, SessionDocument, SessionStream } from '@urun-sh/core';
+export { App as AppInterface, AppOptions, SessionDocument, Session as SessionInterface, SessionStream } from '@urun-sh/core';
 import { ZodSchema, z } from 'zod';
 
-interface SessionStoreState {
-    
-    state: TransportState;
-    
-    id: string | null;
-    
-    emit: (name: string, data?: unknown) => void;
-    
-    doc: (name: string) => {
-        set(data?: unknown): void;
-    };
-    
-    stream: (name: string, track?: MediaStreamTrack | null) => MediaStreamTrack | null;
-    
-    on: (name: string, handler: (data: unknown) => void) => () => void;
-    
-    disconnect: () => void;
-    
-    _transport: TransportSession | null;
-}
-
-interface SceneStoreState {
-    
-    layers: Layer[];
-    
-    layout: LayoutConfig;
-    
-    version: number;
-    
-    getLayer: (id: string) => Layer | undefined;
-}
-
-interface SessionProviderProps {
-    baseUrl: string;
-    orgId: string;
-    jwt?: string;
-    authProvider?: string;
-    sessionId?: string;
-    onConnected?: () => void;
-    onDisconnected?: () => void;
-    onError?: (error: Error) => void;
-    children: ReactNode;
-}
-declare function SessionProvider(props: SessionProviderProps): react_jsx_runtime.JSX.Element;
-
-interface CompositorProviderProps {
-    canvasRef?: RefObject<HTMLCanvasElement>;
-    renderMode?: 'canvas' | 'dom';
-    children: ReactNode;
-}
-declare function CompositorProvider({ canvasRef, renderMode, children }: CompositorProviderProps): react_jsx_runtime.JSX.Element;
-
 interface UrunProviderProps {
     baseUrl: string;
     orgId: string;
     appId?: string;
     jwt?: string;
     authProvider?: string;
+    
     sessionId?: string;
+    
     onConnected?: () => void;
+    
     onDisconnected?: () => void;
+    
     onError?: (error: Error) => void;
+    
     canvasRef?: RefObject<HTMLCanvasElement>;
+    
     renderMode?: 'canvas' | 'dom';
     fallback?: ReactNode | ((error: Error) => ReactNode);
     children: ReactNode;
 }
-declare function UrunProvider({ baseUrl, orgId, appId, jwt, authProvider, sessionId, onConnected, onDisconnected, onError, canvasRef, renderMode, fallback, children, }: UrunProviderProps): react_jsx_runtime.JSX.Element;
+declare function UrunProvider({ baseUrl, orgId, appId, jwt, authProvider, fallback, children, }: UrunProviderProps): react_jsx_runtime.JSX.Element;
 
 interface UrunErrorBoundaryProps {
     fallback?: ReactNode | ((error: Error) => ReactNode);
@@ -84,36 +39,24 @@ declare class UrunErrorBoundary extends Component<UrunErrorBoundaryProps, UrunEr
     constructor(props: UrunErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): UrunErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 }
 
-type SessionHandle = ReturnType<ReturnType<typeof App>[string]>;
-type AppHandle = Record<string, (args?: Record<string, unknown>) => SessionHandle>;
-
-declare function useApp(): AppHandle;
-
-type PublicSessionState = Omit<SessionStoreState, '_transport'>;
-
-declare function useSession(): PublicSessionState;
-declare function useSession<T>(selector: (state: PublicSessionState) => T): T;
-
-declare function useTrack(name: string): MediaStreamTrack | null;
-
-declare function useScene(): SceneStoreState;
-declare function useScene<T>(selector: (state: SceneStoreState) => T): T;
-
-declare function useLayout(): {
-    mode: "grid" | "absolute";
-    canvas: {
-        width: number;
-        height: number;
-    };
-    setMode: (mode: "grid" | "absolute") => void;
-    setCanvas: (size: {
-        width: number;
-        height: number;
-    }) => void;
+type Unsubscribe = () => void;
+type ReactSessionDocument<T = Record<string, unknown>> = Omit<SessionDocument, 'get' | 'set' | 'on'> & {
+    get(): T;
+    get(path: string, defaultValue?: unknown): unknown;
+    set(patch: Partial<T> & Record<string, unknown>): void;
+    on(event: 'change', handler: (snapshot: T) => void): Unsubscribe;
 };
+type ReactSessionStream = SessionStream;
+interface ReactSession extends Omit<SessionInterface, 'doc' | 'stream'> {
+    doc<T = Record<string, unknown>>(name: string): ReactSessionDocument<T>;
+    stream(name: string): ReactSessionStream;
+}
+type ReactApp = Record<string, (args?: Record<string, unknown>) => ReactSession>;
+
+declare function useApp(): ReactApp;
 
 interface RegisteredComponent {
     component: ComponentType<any>;
@@ -251,4 +194,4 @@ declare function useMetricsPanel(props: MetricsPanelProps): {
 };
 declare function MetricsPanel(props: MetricsPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ComponentRenderer, CompositorProvider, ImageFrame, ImageFrameSchema, MetricsPanel, MetricsPanelSchema, ProgressCard, ProgressCardSchema, type RegisteredComponent, type SceneStoreState, SessionProvider, type SessionStoreState, StatusBadge, StatusBadgeSchema, TextStream, TextStreamSchema, UrunErrorBoundary, UrunProvider, registerComponent, useApp, useImageFrame, useLayout, useMetricsPanel, useProgressCard, useScene, useSession, useStatusBadge, useTextStream, useTrack };
+export { ComponentRenderer, ImageFrame, ImageFrameSchema, MetricsPanel, MetricsPanelSchema, ProgressCard, ProgressCardSchema, type ReactApp, type ReactSession, type ReactSessionDocument, type ReactSessionStream, type RegisteredComponent, StatusBadge, StatusBadgeSchema, TextStream, TextStreamSchema, UrunErrorBoundary, UrunProvider, registerComponent, useApp, useImageFrame, useMetricsPanel, useProgressCard, useStatusBadge, useTextStream };

package/dist/index.d.ts

@@ -1,77 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, RefObject, Component, ErrorInfo, ComponentType } from 'react';
-import { Layer, LayoutConfig, TransportState, App } from '@urun-sh/core';
-import { TransportSession } from '@urun-sh/core/internal';
+import * as react from 'react';
+import { RefObject, ReactNode, Component, ErrorInfo, ComponentType } from 'react';
+import { SessionInterface, SessionDocument, SessionStream } from '@urun-sh/core';
+export { App as AppInterface, AppOptions, SessionDocument, Session as SessionInterface, SessionStream } from '@urun-sh/core';
 import { ZodSchema, z } from 'zod';
 
-interface SessionStoreState {
-    
-    state: TransportState;
-    
-    id: string | null;
-    
-    emit: (name: string, data?: unknown) => void;
-    
-    doc: (name: string) => {
-        set(data?: unknown): void;
-    };
-    
-    stream: (name: string, track?: MediaStreamTrack | null) => MediaStreamTrack | null;
-    
-    on: (name: string, handler: (data: unknown) => void) => () => void;
-    
-    disconnect: () => void;
-    
-    _transport: TransportSession | null;
-}
-
-interface SceneStoreState {
-    
-    layers: Layer[];
-    
-    layout: LayoutConfig;
-    
-    version: number;
-    
-    getLayer: (id: string) => Layer | undefined;
-}
-
-interface SessionProviderProps {
-    baseUrl: string;
-    orgId: string;
-    jwt?: string;
-    authProvider?: string;
-    sessionId?: string;
-    onConnected?: () => void;
-    onDisconnected?: () => void;
-    onError?: (error: Error) => void;
-    children: ReactNode;
-}
-declare function SessionProvider(props: SessionProviderProps): react_jsx_runtime.JSX.Element;
-
-interface CompositorProviderProps {
-    canvasRef?: RefObject<HTMLCanvasElement>;
-    renderMode?: 'canvas' | 'dom';
-    children: ReactNode;
-}
-declare function CompositorProvider({ canvasRef, renderMode, children }: CompositorProviderProps): react_jsx_runtime.JSX.Element;
-
 interface UrunProviderProps {
     baseUrl: string;
     orgId: string;
     appId?: string;
     jwt?: string;
     authProvider?: string;
+    
     sessionId?: string;
+    
     onConnected?: () => void;
+    
     onDisconnected?: () => void;
+    
     onError?: (error: Error) => void;
+    
     canvasRef?: RefObject<HTMLCanvasElement>;
+    
     renderMode?: 'canvas' | 'dom';
     fallback?: ReactNode | ((error: Error) => ReactNode);
     children: ReactNode;
 }
-declare function UrunProvider({ baseUrl, orgId, appId, jwt, authProvider, sessionId, onConnected, onDisconnected, onError, canvasRef, renderMode, fallback, children, }: UrunProviderProps): react_jsx_runtime.JSX.Element;
+declare function UrunProvider({ baseUrl, orgId, appId, jwt, authProvider, fallback, children, }: UrunProviderProps): react_jsx_runtime.JSX.Element;
 
 interface UrunErrorBoundaryProps {
     fallback?: ReactNode | ((error: Error) => ReactNode);
@@ -84,36 +39,24 @@ declare class UrunErrorBoundary extends Component<UrunErrorBoundaryProps, UrunEr
     constructor(props: UrunErrorBoundaryProps);
     static getDerivedStateFromError(error: Error): UrunErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 }
 
-type SessionHandle = ReturnType<ReturnType<typeof App>[string]>;
-type AppHandle = Record<string, (args?: Record<string, unknown>) => SessionHandle>;
-
-declare function useApp(): AppHandle;
-
-type PublicSessionState = Omit<SessionStoreState, '_transport'>;
-
-declare function useSession(): PublicSessionState;
-declare function useSession<T>(selector: (state: PublicSessionState) => T): T;
-
-declare function useTrack(name: string): MediaStreamTrack | null;
-
-declare function useScene(): SceneStoreState;
-declare function useScene<T>(selector: (state: SceneStoreState) => T): T;
-
-declare function useLayout(): {
-    mode: "grid" | "absolute";
-    canvas: {
-        width: number;
-        height: number;
-    };
-    setMode: (mode: "grid" | "absolute") => void;
-    setCanvas: (size: {
-        width: number;
-        height: number;
-    }) => void;
+type Unsubscribe = () => void;
+type ReactSessionDocument<T = Record<string, unknown>> = Omit<SessionDocument, 'get' | 'set' | 'on'> & {
+    get(): T;
+    get(path: string, defaultValue?: unknown): unknown;
+    set(patch: Partial<T> & Record<string, unknown>): void;
+    on(event: 'change', handler: (snapshot: T) => void): Unsubscribe;
 };
+type ReactSessionStream = SessionStream;
+interface ReactSession extends Omit<SessionInterface, 'doc' | 'stream'> {
+    doc<T = Record<string, unknown>>(name: string): ReactSessionDocument<T>;
+    stream(name: string): ReactSessionStream;
+}
+type ReactApp = Record<string, (args?: Record<string, unknown>) => ReactSession>;
+
+declare function useApp(): ReactApp;
 
 interface RegisteredComponent {
     component: ComponentType<any>;
@@ -251,4 +194,4 @@ declare function useMetricsPanel(props: MetricsPanelProps): {
 };
 declare function MetricsPanel(props: MetricsPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ComponentRenderer, CompositorProvider, ImageFrame, ImageFrameSchema, MetricsPanel, MetricsPanelSchema, ProgressCard, ProgressCardSchema, type RegisteredComponent, type SceneStoreState, SessionProvider, type SessionStoreState, StatusBadge, StatusBadgeSchema, TextStream, TextStreamSchema, UrunErrorBoundary, UrunProvider, registerComponent, useApp, useImageFrame, useLayout, useMetricsPanel, useProgressCard, useScene, useSession, useStatusBadge, useTextStream, useTrack };
+export { ComponentRenderer, ImageFrame, ImageFrameSchema, MetricsPanel, MetricsPanelSchema, ProgressCard, ProgressCardSchema, type ReactApp, type ReactSession, type ReactSessionDocument, type ReactSessionStream, type RegisteredComponent, StatusBadge, StatusBadgeSchema, TextStream, TextStreamSchema, UrunErrorBoundary, UrunProvider, registerComponent, useApp, useImageFrame, useMetricsPanel, useProgressCard, useStatusBadge, useTextStream };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var $e=Object.create;var z=Object.defineProperty;var je=Object.getOwnPropertyDescriptor;var Je=Object.getOwnPropertyNames;var Ve=Object.getPrototypeOf,Ze=Object.prototype.hasOwnProperty;var qe=(r,e)=>{for(var t in e)z(r,t,{get:e[t],enumerable:!0})},de=(r,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Je(e))!Ze.call(r,n)&&n!==t&&z(r,n,{get:()=>e[n],enumerable:!(o=je(e,n))||o.enumerable});return r};var le=(r,e,t)=>(t=r!=null?$e(Ve(r)):{},de(e||!r||!r.__esModule?z(t,"default",{value:r,enumerable:!0}):t,r)),Ge=r=>de(z({},"__esModule",{value:!0}),r);var tt={};qe(tt,{ComponentRenderer:()=>We,CompositorProvider:()=>ee,ImageFrame:()=>K,ImageFrameSchema:()=>G,MetricsPanel:()=>X,MetricsPanelSchema:()=>Q,ProgressCard:()=>W,ProgressCardSchema:()=>H,SessionProvider:()=>D,StatusBadge:()=>J,StatusBadgeSchema:()=>j,TextStream:()=>q,TextStreamSchema:()=>Z,UrunErrorBoundary:()=>w,UrunProvider:()=>Ee,registerComponent:()=>y,useApp:()=>Ie,useImageFrame:()=>ce,useLayout:()=>He,useMetricsPanel:()=>ue,useProgressCard:()=>se,useScene:()=>De,useSession:()=>Be,useStatusBadge:()=>ae,useTextStream:()=>ie,useTrack:()=>Ue});module.exports=Ge(tt);var l=require("react"),Se=require("@urun-sh/core/internal");var me=require("zustand/vanilla");function fe(r){return(0,me.createStore)()((e,t)=>({state:"connecting",id:null,emit:(o,n)=>{let a=t()._transport?.multiplexer;a&&a.emit("events",{type:o,data:n})},doc:o=>({set:n=>{let s=t()._transport;if(s){let a=s.multiplexer;a&&a.emit("doc",{name:o,data:n})}}}),stream:(o,n)=>{let s=t()._transport;return s?n!==void 0?(n?s.addTrack(n):s.removeTrack(),null):s.getTrackByName(o)??null:null},on:(o,n)=>{let s=t()._transport;if(!s)return()=>{};let a=s.multiplexer;return a?a.on("events",i=>{i.type===o&&n(i.data)}):()=>{}},disconnect:()=>{let o=t()._transport;o&&o.disconnect()},_transport:r}))}var ge=require("react/jsx-runtime"),m=(0,l.createContext)(null);function D(r){let{baseUrl:e,orgId:t,jwt:o,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,children:u}=r,[p]=(0,l.useState)(()=>{let d=new Se.TransportSession({url:e,orgId:t,jwt:o,authProvider:n,sessionId:s});return fe(d)}),g=(0,l.useRef)(a),Y=(0,l.useRef)(i),M=(0,l.useRef)(c);return g.current=a,Y.current=i,M.current=c,(0,l.useEffect)(()=>{p.getState()._transport?.setAuth({orgId:t,jwt:o,authProvider:n})},[n,o,t,p]),(0,l.useEffect)(()=>{let d=p.getState()._transport;if(!d)return;d.connect().then(()=>{p.setState({state:"connected",id:d.sessionId}),g.current?.()}).catch(A=>{p.setState({state:"failed"}),M.current?.(A instanceof Error?A:new Error(String(A)))});let R=d.on("disconnected",()=>{p.setState({state:"disconnected"}),Y.current?.()}),ne=d.on("error",A=>{M.current?.(A)});return()=>{R(),ne(),d.disconnect()}},[p]),(0,ge.jsx)(m.Provider,{value:p,children:u})}var S=require("react");var E=le(require("yjs")),ve=require("zustand/vanilla");function F(r,e){for(let t=0;t<r.length;t++)if(r.get(t).get("id")===e)return t;return-1}function ye(r){let e=new E.Map;return e.set("id",r.id),e.set("name",r.name),e.set("visible",r.visible),e.set("position",r.position),e.set("size",r.size),e.set("opacity",r.opacity),e.set("trackId",r.trackId),e}function Ke(r,e){let t=r.toArray().map(n=>n.toJSON()),o={mode:e.get("mode")??"grid",canvas:e.get("canvas")??{width:1280,height:720}};return{layers:t,layout:o}}function xe(){let r=new E.Doc,e=r.getArray("layers"),t=r.getMap("layout");t.set("mode","grid"),t.set("canvas",{width:1280,height:720});let o=(0,ve.createStore)()(()=>({layers:[],layout:{mode:"grid",canvas:{width:1280,height:720}},version:0,getLayer:n=>o.getState().layers.find(s=>s.id===n)}));return r.on("update",()=>{let{layers:n,layout:s}=Ke(e,t);o.setState(a=>({layers:n,layout:s,version:a.version+1}))}),{store:o,ydoc:r,ylayers:e,ylayout:t}}function he(r,e){let{ydoc:t,ylayers:o,ylayout:n}=r;if(e.type==="snapshot"){t.transact(()=>{o.delete(0,o.length);for(let s of e.state.layers)o.push([ye(s)]);e.state.layout&&(n.set("mode",e.state.layout.mode),n.set("canvas",e.state.layout.canvas))});return}e.type==="delta"&&t.transact(()=>{for(let s of e.ops)switch(s.op){case"add_layer":{o.push([ye(s.layer)]);break}case"remove_layer":{let a=F(o,s.id);a!==-1&&o.delete(a,1);break}case"update_layer":{let a=F(o,s.id);if(a!==-1){let i=o.get(a);for(let[c,u]of Object.entries(s.fields))i.set(c,u)}break}case"reorder_layers":{let a=new Map;for(let i=0;i<o.length;i++){let c=o.get(i);a.set(c.get("id"),c.toJSON())}o.delete(0,o.length);for(let i of s.order){let c=a.get(i);if(c){let u=new E.Map;for(let[p,g]of Object.entries(c))u.set(p,g);o.push([u])}}break}case"set_layout":{s.layout.mode!==void 0&&n.set("mode",s.layout.mode),s.layout.canvas!==void 0&&n.set("canvas",s.layout.canvas);break}case"show_layer":{let a=F(o,s.id);a!==-1&&o.get(a).set("visible",!0);break}case"hide_layer":{let a=F(o,s.id);a!==-1&&o.get(a).set("visible",!1);break}}})}var Pe=new Map;function y(r,e,t){if(!t||typeof t.safeParse!="function")throw new Error(`registerComponent("${r}"): schema must be a valid Zod schema`);Pe.set(r,{component:e,schema:t})}function Ce(r,e){let t=Pe.get(r);if(!t)return{error:`Unknown component: "${r}"`};let o=t.schema.safeParse(e);return o.success?{Component:t.component,validatedProps:o.data}:{error:`Validation failed for "${r}": ${o.error.message}`}}var C=require("zod"),v=require("react/jsx-runtime"),H=C.z.object({step:C.z.number().min(0),total:C.z.number().min(1),label:C.z.string().optional(),variant:C.z.enum(["default","success","error"]).default("default")});function se(r){let{step:e,total:t,label:o,variant:n="default"}=r,s=Math.min(e/t*100,100),a=e>=t;return{step:e,total:t,label:o,variant:n,percentage:s,isComplete:a}}function W(r){let{step:e,total:t,label:o,variant:n,percentage:s}=se(r);return(0,v.jsxs)("div",{className:"urun-progress-card","data-variant":n,children:[o&&(0,v.jsx)("div",{className:"urun-progress-label",children:o}),(0,v.jsx)("div",{className:"urun-progress-bar",children:(0,v.jsx)("div",{className:"urun-progress-fill",style:{width:`${s}%`}})}),(0,v.jsxs)("div",{className:"urun-progress-text",children:[e,"/",t]})]})}var $=require("zod"),L=require("react/jsx-runtime"),j=$.z.object({state:$.z.enum(["thinking","generating","idle","error"]),message:$.z.string().optional()}),Qe={thinking:"Thinking...",generating:"Generating...",idle:"Idle",error:"Error"};function ae(r){let{state:e,message:t}=r,o=e==="thinking"||e==="generating",n=t??Qe[e]??e;return{state:e,message:n,isActive:o}}function J(r){let{state:e,message:t,isActive:o}=ae(r);return(0,L.jsxs)("span",{className:"urun-status-badge","data-state":e,children:[(0,L.jsx)("span",{className:`urun-status-indicator${o?" urun-status-pulse":""}`}),(0,L.jsx)("span",{className:"urun-status-message",children:t})]})}var I=require("react"),V=require("zod"),N=require("react/jsx-runtime"),Z=V.z.object({text:V.z.string(),streaming:V.z.boolean().default(!1)});function ie(r){let{text:e,streaming:t=!1}=r,o=e.length===0;return{text:e,streaming:t,isEmpty:o}}function q(r){let{text:e,streaming:t}=ie(r),o=(0,I.useRef)(null),n=(0,I.useRef)(0);return(0,I.useEffect)(()=>{let s=o.current;s&&e.length!==n.current&&(s.textContent=e,n.current=e.length)},[e]),(0,N.jsxs)("div",{className:"urun-text-stream",children:[(0,N.jsx)("span",{ref:o,className:"urun-text-content"}),t&&(0,N.jsx)("span",{className:"urun-text-cursor"})]})}var O=require("zod"),_=require("react/jsx-runtime"),G=O.z.object({src:O.z.string().url(),alt:O.z.string().optional(),caption:O.z.string().optional()});function ce(r){let{src:e,alt:t,caption:o}=r;return{src:e,alt:t??"",caption:o}}function K(r){let{src:e,alt:t,caption:o}=ce(r);return(0,_.jsxs)("figure",{className:"urun-image-frame",children:[(0,_.jsx)("img",{className:"urun-image",src:e,alt:t}),o&&(0,_.jsx)("figcaption",{className:"urun-image-caption",children:o})]})}var f=require("zod"),k=require("react/jsx-runtime"),Q=f.z.object({metrics:f.z.array(f.z.object({label:f.z.string(),value:f.z.union([f.z.string(),f.z.number()]),unit:f.z.string().optional()}))});function ue(r){return{metrics:r.metrics.map(t=>({...t,displayValue:t.unit?`${t.value} ${t.unit}`:String(t.value)}))}}function X(r){let{metrics:e}=ue(r);return(0,k.jsx)("div",{className:"urun-metrics-panel",children:e.map((t,o)=>(0,k.jsxs)("div",{className:"urun-metric-card",children:[(0,k.jsx)("div",{className:"urun-metric-label",children:t.label}),(0,k.jsx)("div",{className:"urun-metric-value",children:t.displayValue})]},o))})}var ke=!1;function we(){ke||(y("ProgressCard",W,H),y("StatusBadge",J,j),y("TextStream",q,Z),y("ImageFrame",K,G),y("MetricsPanel",X,Q),ke=!0)}var be=require("react/jsx-runtime"),B=(0,S.createContext)(null);function ee({canvasRef:r,renderMode:e,children:t}){let o=(0,S.useContext)(m);if(!o)throw new Error("CompositorProvider must be used within <SessionProvider>");let n=o,[s]=(0,S.useState)(()=>xe());return(0,S.useEffect)(()=>{we()},[]),(0,S.useEffect)(()=>{let a=null,i=null;function c(){let u=n.getState()._transport;if(!u)return!1;let p=u.multiplexer;return p?(a=p.on("scene_graph",g=>{he(s,g)}),!0):!1}return c()||(i=n.subscribe(u=>{u.state==="connected"&&c()&&(i?.(),i=null)})),()=>{a?.(),i?.(),s.ydoc.destroy()}},[n,s]),(0,be.jsx)(B.Provider,{value:s.store,children:t})}var oe=require("react");var Te=require("react"),te=require("react/jsx-runtime"),w=class extends Te.Component{constructor(e){super(e),this.state={error:null}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){console.error("[urun] Error caught by UrunErrorBoundary:",e,t)}render(){if(this.state.error){let{fallback:e}=this.props;return typeof e=="function"?e(this.state.error):e||(0,te.jsx)("div",{role:"alert",style:{padding:"16px",color:"#ef4444"},children:(0,te.jsxs)("p",{children:["Connection error: ",this.state.error.message]})})}return this.props.children}};var Me=require("react"),re=(0,Me.createContext)(null);var U=require("react"),Ae=require("react/jsx-runtime");function Xe({module:r,onToken:e}){let t=r.useAuth();return(0,U.useEffect)(()=>{let o=!1;async function n(){if(!(t.loading||t.isLoading))try{let a=t.getAccessToken?await t.getAccessToken():t.accessToken;o||e(a??void 0)}catch{o||e(void 0)}}n();let s=window.setInterval(()=>{n()},6e4);return()=>{o=!0,window.clearInterval(s)}},[t,t.accessToken,t.getAccessToken,t.isAuthenticated,t.isLoading,t.loading,t.user,e]),null}function Re({onToken:r}){let[e,t]=(0,U.useState)(null);return(0,U.useEffect)(()=>{let o=!1;return import("@workos-inc/authkit-react").then(n=>{!o&&typeof n.useAuth=="function"&&t({useAuth:n.useAuth})}).catch(()=>{o||t(null)}),()=>{o=!0}},[]),e?(0,Ae.jsx)(Xe,{module:e,onToken:r}):null}var x=require("react/jsx-runtime");function Ee({baseUrl:r,orgId:e,appId:t,jwt:o,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,canvasRef:u,renderMode:p,fallback:g,children:Y}){let[M,d]=(0,oe.useState)(),R=o??M,ne=(0,oe.useMemo)(()=>({appId:t,baseUrl:r,orgId:e,jwt:R,authProvider:n}),[t,n,r,R,e]);return(0,x.jsxs)(w,{fallback:g,children:[n==="workos"&&!o?(0,x.jsx)(Re,{onToken:d}):null,(0,x.jsx)(re.Provider,{value:ne,children:(0,x.jsx)(D,{baseUrl:r,orgId:e,jwt:R,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,children:(0,x.jsx)(ee,{canvasRef:u,renderMode:p,children:Y})})})]})}var h=require("react"),Le=require("@urun-sh/core");function et(r,e){return`${r}:${JSON.stringify(e??{})}`}function Ie(){let r=(0,h.useContext)(re);if(!r)throw new Error("useApp must be used within <UrunProvider>");if(!r.appId)throw new Error('useApp requires <UrunProvider appId="...">');let e=(0,h.useRef)(new Map),t=(0,h.useMemo)(()=>(0,Le.App)(r.appId,{baseUrl:r.baseUrl,orgId:r.orgId,jwt:r.jwt,authProvider:r.authProvider}),[r.appId,r.baseUrl,r.orgId,r.jwt,r.authProvider]);return(0,h.useMemo)(()=>new Proxy({},{get(o,n){if(typeof n=="string")return s=>{let a=et(n,s),i=e.current.get(a);if(i)return i;let c=t[n](s);return e.current.set(a,c),c}}}),[t])}var Oe=require("react"),pe=require("zustand"),_e=require("zustand/react/shallow");function Ne(r){let{_transport:e,...t}=r;return t}function Be(r){let e=(0,Oe.useContext)(m);if(!e)throw new Error("useSession must be used within <SessionProvider> or <UrunProvider>");return r?(0,pe.useStore)(e,t=>r(Ne(t))):(0,pe.useStore)(e,(0,_e.useShallow)(t=>Ne(t)))}var b=require("react");function Ue(r){let e=(0,b.useContext)(m);if(!e)throw new Error("useTrack must be used within <SessionProvider> or <UrunProvider>");let[t,o]=(0,b.useState)(null);return(0,b.useEffect)(()=>{let n=e.getState()._transport;if(!n)return;let s=n.getTrackByName?.bind(n),a=s?.(r);a&&a.readyState!=="ended"&&o(a);let i=n.on("track",c=>{let u=s?.(r);u&&u.id!==c.id||(o(c),c.addEventListener("ended",()=>{o(null)}))});return()=>{i()}},[r,e]),t}var Ye=require("react"),ze=require("zustand");function De(r){let e=(0,Ye.useContext)(B);if(!e)throw new Error("useScene must be used within <CompositorProvider> or <UrunProvider>");return(0,ze.useStore)(e,r??(t=>t))}var T=require("react"),Fe=require("zustand");function He(){let r=(0,T.useContext)(B),e=(0,T.useContext)(m);if(!r)throw new Error("useLayout must be used within <CompositorProvider> or <UrunProvider>");let t=(0,Fe.useStore)(r,s=>s.layout),o=(0,T.useCallback)(s=>{if(e){let a=e.getState()._transport;if(a){let i=a.multiplexer;i&&i.emit("scene_graph",{type:"delta",ops:[{op:"set_layout",layout:{mode:s}}]})}}},[e]),n=(0,T.useCallback)(s=>{if(e){let a=e.getState()._transport;if(a){let i=a.multiplexer;i&&i.emit("scene_graph",{type:"delta",ops:[{op:"set_layout",layout:{canvas:s}}]})}}},[e]);return{mode:t.mode,canvas:t.canvas,setMode:o,setCanvas:n}}var P=require("react/jsx-runtime");function We({name:r,props:e,fallback:t}){let o=Ce(r,e);if(o.error)return console.warn(`[urun] ComponentRenderer: ${o.error}`),t?(0,P.jsx)(P.Fragment,{children:t}):(0,P.jsx)("div",{className:"urun-component-error",role:"alert",children:(0,P.jsx)("span",{className:"urun-component-error-text",children:o.error})});let n=o.Component;return(0,P.jsx)(n,{...o.validatedProps})}0&&(module.exports={ComponentRenderer,CompositorProvider,ImageFrame,ImageFrameSchema,MetricsPanel,MetricsPanelSchema,ProgressCard,ProgressCardSchema,SessionProvider,StatusBadge,StatusBadgeSchema,TextStream,TextStreamSchema,UrunErrorBoundary,UrunProvider,registerComponent,useApp,useImageFrame,useLayout,useMetricsPanel,useProgressCard,useScene,useSession,useStatusBadge,useTextStream,useTrack});
+"use strict";var ie=Object.create;var R=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var me=(t,e)=>{for(var r in e)R(t,r,{get:e[r],enumerable:!0})},W=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ue(e))!de.call(t,o)&&o!==r&&R(t,o,{get:()=>e[o],enumerable:!(n=ce(e,o))||n.enumerable});return t};var le=(t,e,r)=>(r=t!=null?ie(pe(t)):{},W(e||!t||!t.__esModule?R(r,"default",{value:t,enumerable:!0}):r,t)),ge=t=>W(R({},"__esModule",{value:!0}),t);var Se={};me(Se,{ComponentRenderer:()=>H,ImageFrame:()=>ne,ImageFrameSchema:()=>te,MetricsPanel:()=>se,MetricsPanelSchema:()=>oe,ProgressCard:()=>Q,ProgressCardSchema:()=>K,StatusBadge:()=>Y,StatusBadgeSchema:()=>X,TextStream:()=>re,TextStreamSchema:()=>ee,UrunErrorBoundary:()=>d,UrunProvider:()=>V,registerComponent:()=>q,useApp:()=>J,useImageFrame:()=>O,useMetricsPanel:()=>D,useProgressCard:()=>N,useStatusBadge:()=>U,useTextStream:()=>B});module.exports=ge(Se);var T=require("react");var z=require("react"),b=require("react/jsx-runtime"),d=class extends z.Component{constructor(e){super(e),this.state={error:null}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,r){console.error("[urun] Error caught by UrunErrorBoundary:",e,r)}render(){if(this.state.error){let{fallback:e}=this.props;return typeof e=="function"?e(this.state.error):e||(0,b.jsx)("div",{role:"alert",style:{padding:"16px",color:"#ef4444"},children:(0,b.jsxs)("p",{children:["Connection error: ",this.state.error.message]})})}return this.props.children}};var F=require("react"),w=(0,F.createContext)(null);var f=require("react"),L=require("react/jsx-runtime");function fe({module:t,onToken:e}){let r=t.useAuth();return(0,f.useEffect)(()=>{let n=!1;async function o(){if(!(r.loading||r.isLoading))try{let c=r.getAccessToken?await r.getAccessToken():r.accessToken;n||e(c??void 0)}catch{n||e(void 0)}}o();let s=window.setInterval(()=>{o()},6e4);return()=>{n=!0,window.clearInterval(s)}},[r,r.accessToken,r.getAccessToken,r.isAuthenticated,r.isLoading,r.loading,r.user,e]),null}function $({onToken:t}){let[e,r]=(0,f.useState)(null);return(0,f.useEffect)(()=>{let n=!1;return import("@workos-inc/authkit-react").then(o=>{!n&&typeof o.useAuth=="function"&&r({useAuth:o.useAuth})}).catch(()=>{n||r(null)}),()=>{n=!0}},[]),e?(0,L.jsx)(fe,{module:e,onToken:t}):null}var h=require("react/jsx-runtime");function V({baseUrl:t,orgId:e,appId:r,jwt:n,authProvider:o,fallback:s,children:c}){let[P,C]=(0,T.useState)(),g=n??P,ae=(0,T.useMemo)(()=>({appId:r,baseUrl:t,orgId:e,jwt:g,authProvider:o}),[r,o,t,g,e]);return(0,h.jsxs)(d,{fallback:s,children:[o==="workos"&&!n?(0,h.jsx)($,{onToken:C}):null,(0,h.jsx)(w.Provider,{value:ae,children:c})]})}var a=require("react"),j=require("@urun-sh/core");function he(t,e){return`${t}:${JSON.stringify(e??{})}`}var M=class{constructor(e,r){this._doc=e;this._notify=r;this._unsubscribeChange=this._doc.on("change",()=>this._notify())}_doc;_notify;_unsubscribeChange;get(e,r){return this._doc.get(e,r)}set(e){this._doc.set(e),this._notify()}on(e,r){return this._doc.on(e,n=>r(n))}dispose(){this._unsubscribeChange()}},E=class{constructor(e,r){this._stream=e;this._notify=r;this._unsubscribeTrack=this._stream.on("track",()=>this._notify())}_stream;_notify;_unsubscribeTrack;get track(){return this._stream.track}attach(e){return this._stream.attach(e)}detach(){return this._stream.detach()}seek(e){return this._stream.seek(e)}on(e,r){return this._stream.on(e,r)}dispose(){this._unsubscribeTrack()}},I=class{constructor(e,r){this._session=e;this._notify=r}_session;_notify;_docs=new Map;_streams=new Map;get id(){return this._session.id}doc(e){let r=this._docs.get(e);return r||(r=new M(this._session.doc(e),this._notify),this._docs.set(e,r)),r}stream(e){let r=this._streams.get(e);return r||(r=new E(this._session.stream(e),this._notify),this._streams.set(e,r)),r}disconnect(){for(let e of this._docs.values())e.dispose();for(let e of this._streams.values())e.dispose();this._docs.clear(),this._streams.clear(),this._session.disconnect(),this._notify()}};function J(){let t=(0,a.useContext)(w);if(!t)throw new Error("useApp must be used within <UrunProvider>");if(!t.appId)throw new Error('useApp requires <UrunProvider appId="...">');let[,e]=(0,a.useReducer)(o=>o+1,0),r=(0,a.useRef)(new Map),n=(0,a.useMemo)(()=>(0,j.App)(t.appId,{baseUrl:t.baseUrl,orgId:t.orgId,jwt:t.jwt,authProvider:t.authProvider}),[t.appId,t.baseUrl,t.orgId,t.jwt,t.authProvider]);return(0,a.useMemo)(()=>new Proxy({},{get(o,s){if(typeof s=="string")return c=>{let P=he(s,c),C=r.current.get(P);if(C)return C;let g=new I(n[s](c),e);return r.current.set(P,g),g}}}),[n])}var Z=new Map;function q(t,e,r){if(!r||typeof r.safeParse!="function")throw new Error(`registerComponent("${t}"): schema must be a valid Zod schema`);Z.set(t,{component:e,schema:r})}function G(t,e){let r=Z.get(t);if(!r)return{error:`Unknown component: "${t}"`};let n=r.schema.safeParse(e);return n.success?{Component:r.component,validatedProps:n.data}:{error:`Validation failed for "${t}": ${n.error.message}`}}var u=require("react/jsx-runtime");function H({name:t,props:e,fallback:r}){let n=G(t,e);if(n.error)return console.warn(`[urun] ComponentRenderer: ${n.error}`),r?(0,u.jsx)(u.Fragment,{children:r}):(0,u.jsx)("div",{className:"urun-component-error",role:"alert",children:(0,u.jsx)("span",{className:"urun-component-error-text",children:n.error})});let o=n.Component;return(0,u.jsx)(o,{...n.validatedProps})}var m=require("zod"),p=require("react/jsx-runtime"),K=m.z.object({step:m.z.number().min(0),total:m.z.number().min(1),label:m.z.string().optional(),variant:m.z.enum(["default","success","error"]).default("default")});function N(t){let{step:e,total:r,label:n,variant:o="default"}=t,s=Math.min(e/r*100,100),c=e>=r;return{step:e,total:r,label:n,variant:o,percentage:s,isComplete:c}}function Q(t){let{step:e,total:r,label:n,variant:o,percentage:s}=N(t);return(0,p.jsxs)("div",{className:"urun-progress-card","data-variant":o,children:[n&&(0,p.jsx)("div",{className:"urun-progress-label",children:n}),(0,p.jsx)("div",{className:"urun-progress-bar",children:(0,p.jsx)("div",{className:"urun-progress-fill",style:{width:`${s}%`}})}),(0,p.jsxs)("div",{className:"urun-progress-text",children:[e,"/",r]})]})}var _=require("zod"),v=require("react/jsx-runtime"),X=_.z.object({state:_.z.enum(["thinking","generating","idle","error"]),message:_.z.string().optional()}),ve={thinking:"Thinking...",generating:"Generating...",idle:"Idle",error:"Error"};function U(t){let{state:e,message:r}=t,n=e==="thinking"||e==="generating",o=r??ve[e]??e;return{state:e,message:o,isActive:n}}function Y(t){let{state:e,message:r,isActive:n}=U(t);return(0,v.jsxs)("span",{className:"urun-status-badge","data-state":e,children:[(0,v.jsx)("span",{className:`urun-status-indicator${n?" urun-status-pulse":""}`}),(0,v.jsx)("span",{className:"urun-status-message",children:r})]})}var S=require("react"),A=require("zod"),y=require("react/jsx-runtime"),ee=A.z.object({text:A.z.string(),streaming:A.z.boolean().default(!1)});function B(t){let{text:e,streaming:r=!1}=t,n=e.length===0;return{text:e,streaming:r,isEmpty:n}}function re(t){let{text:e,streaming:r}=B(t),n=(0,S.useRef)(null),o=(0,S.useRef)(0);return(0,S.useEffect)(()=>{let s=n.current;s&&e.length!==o.current&&(s.textContent=e,o.current=e.length)},[e]),(0,y.jsxs)("div",{className:"urun-text-stream",children:[(0,y.jsx)("span",{ref:n,className:"urun-text-content"}),r&&(0,y.jsx)("span",{className:"urun-text-cursor"})]})}var k=require("zod"),x=require("react/jsx-runtime"),te=k.z.object({src:k.z.string().url(),alt:k.z.string().optional(),caption:k.z.string().optional()});function O(t){let{src:e,alt:r,caption:n}=t;return{src:e,alt:r??"",caption:n}}function ne(t){let{src:e,alt:r,caption:n}=O(t);return(0,x.jsxs)("figure",{className:"urun-image-frame",children:[(0,x.jsx)("img",{className:"urun-image",src:e,alt:r}),n&&(0,x.jsx)("figcaption",{className:"urun-image-caption",children:n})]})}var i=require("zod"),l=require("react/jsx-runtime"),oe=i.z.object({metrics:i.z.array(i.z.object({label:i.z.string(),value:i.z.union([i.z.string(),i.z.number()]),unit:i.z.string().optional()}))});function D(t){return{metrics:t.metrics.map(r=>({...r,displayValue:r.unit?`${r.value} ${r.unit}`:String(r.value)}))}}function se(t){let{metrics:e}=D(t);return(0,l.jsx)("div",{className:"urun-metrics-panel",children:e.map((r,n)=>(0,l.jsxs)("div",{className:"urun-metric-card",children:[(0,l.jsx)("div",{className:"urun-metric-label",children:r.label}),(0,l.jsx)("div",{className:"urun-metric-value",children:r.displayValue})]},n))})}0&&(module.exports={ComponentRenderer,ImageFrame,ImageFrameSchema,MetricsPanel,MetricsPanelSchema,ProgressCard,ProgressCardSchema,StatusBadge,StatusBadgeSchema,TextStream,TextStreamSchema,UrunErrorBoundary,UrunProvider,registerComponent,useApp,useImageFrame,useMetricsPanel,useProgressCard,useStatusBadge,useTextStream});

package/dist/index.mjs

@@ -1 +1 @@
-import{createContext as Pe,useState as Ce,useEffect as Z,useRef as E}from"react";import{TransportSession as ke}from"@urun-sh/core/internal";import{createStore as he}from"zustand/vanilla";function V(r){return he()((e,t)=>({state:"connecting",id:null,emit:(o,n)=>{let a=t()._transport?.multiplexer;a&&a.emit("events",{type:o,data:n})},doc:o=>({set:n=>{let s=t()._transport;if(s){let a=s.multiplexer;a&&a.emit("doc",{name:o,data:n})}}}),stream:(o,n)=>{let s=t()._transport;return s?n!==void 0?(n?s.addTrack(n):s.removeTrack(),null):s.getTrackByName(o)??null:null},on:(o,n)=>{let s=t()._transport;if(!s)return()=>{};let a=s.multiplexer;return a?a.on("events",i=>{i.type===o&&n(i.data)}):()=>{}},disconnect:()=>{let o=t()._transport;o&&o.disconnect()},_transport:r}))}import{jsx as we}from"react/jsx-runtime";var l=Pe(null);function L(r){let{baseUrl:e,orgId:t,jwt:o,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,children:u}=r,[p]=Ce(()=>{let d=new ke({url:e,orgId:t,jwt:o,authProvider:n,sessionId:s});return V(d)}),m=E(a),k=E(i),g=E(c);return m.current=a,k.current=i,g.current=c,Z(()=>{p.getState()._transport?.setAuth({orgId:t,jwt:o,authProvider:n})},[n,o,t,p]),Z(()=>{let d=p.getState()._transport;if(!d)return;d.connect().then(()=>{p.setState({state:"connected",id:d.sessionId}),m.current?.()}).catch(v=>{p.setState({state:"failed"}),g.current?.(v instanceof Error?v:new Error(String(v)))});let y=d.on("disconnected",()=>{p.setState({state:"disconnected"}),k.current?.()}),A=d.on("error",v=>{g.current?.(v)});return()=>{y(),A(),d.disconnect()}},[p]),we(l.Provider,{value:p,children:u})}import{createContext as Ne,useContext as Oe,useState as _e,useEffect as le}from"react";import*as x from"yjs";import{createStore as be}from"zustand/vanilla";function w(r,e){for(let t=0;t<r.length;t++)if(r.get(t).get("id")===e)return t;return-1}function q(r){let e=new x.Map;return e.set("id",r.id),e.set("name",r.name),e.set("visible",r.visible),e.set("position",r.position),e.set("size",r.size),e.set("opacity",r.opacity),e.set("trackId",r.trackId),e}function Te(r,e){let t=r.toArray().map(n=>n.toJSON()),o={mode:e.get("mode")??"grid",canvas:e.get("canvas")??{width:1280,height:720}};return{layers:t,layout:o}}function G(){let r=new x.Doc,e=r.getArray("layers"),t=r.getMap("layout");t.set("mode","grid"),t.set("canvas",{width:1280,height:720});let o=be()(()=>({layers:[],layout:{mode:"grid",canvas:{width:1280,height:720}},version:0,getLayer:n=>o.getState().layers.find(s=>s.id===n)}));return r.on("update",()=>{let{layers:n,layout:s}=Te(e,t);o.setState(a=>({layers:n,layout:s,version:a.version+1}))}),{store:o,ydoc:r,ylayers:e,ylayout:t}}function K(r,e){let{ydoc:t,ylayers:o,ylayout:n}=r;if(e.type==="snapshot"){t.transact(()=>{o.delete(0,o.length);for(let s of e.state.layers)o.push([q(s)]);e.state.layout&&(n.set("mode",e.state.layout.mode),n.set("canvas",e.state.layout.canvas))});return}e.type==="delta"&&t.transact(()=>{for(let s of e.ops)switch(s.op){case"add_layer":{o.push([q(s.layer)]);break}case"remove_layer":{let a=w(o,s.id);a!==-1&&o.delete(a,1);break}case"update_layer":{let a=w(o,s.id);if(a!==-1){let i=o.get(a);for(let[c,u]of Object.entries(s.fields))i.set(c,u)}break}case"reorder_layers":{let a=new Map;for(let i=0;i<o.length;i++){let c=o.get(i);a.set(c.get("id"),c.toJSON())}o.delete(0,o.length);for(let i of s.order){let c=a.get(i);if(c){let u=new x.Map;for(let[p,m]of Object.entries(c))u.set(p,m);o.push([u])}}break}case"set_layout":{s.layout.mode!==void 0&&n.set("mode",s.layout.mode),s.layout.canvas!==void 0&&n.set("canvas",s.layout.canvas);break}case"show_layer":{let a=w(o,s.id);a!==-1&&o.get(a).set("visible",!0);break}case"hide_layer":{let a=w(o,s.id);a!==-1&&o.get(a).set("visible",!1);break}}})}var Q=new Map;function S(r,e,t){if(!t||typeof t.safeParse!="function")throw new Error(`registerComponent("${r}"): schema must be a valid Zod schema`);Q.set(r,{component:e,schema:t})}function X(r,e){let t=Q.get(r);if(!t)return{error:`Unknown component: "${r}"`};let o=t.schema.safeParse(e);return o.success?{Component:t.component,validatedProps:o.data}:{error:`Validation failed for "${r}": ${o.error.message}`}}import{z as h}from"zod";import{jsx as I,jsxs as ee}from"react/jsx-runtime";var N=h.object({step:h.number().min(0),total:h.number().min(1),label:h.string().optional(),variant:h.enum(["default","success","error"]).default("default")});function te(r){let{step:e,total:t,label:o,variant:n="default"}=r,s=Math.min(e/t*100,100),a=e>=t;return{step:e,total:t,label:o,variant:n,percentage:s,isComplete:a}}function O(r){let{step:e,total:t,label:o,variant:n,percentage:s}=te(r);return ee("div",{className:"urun-progress-card","data-variant":n,children:[o&&I("div",{className:"urun-progress-label",children:o}),I("div",{className:"urun-progress-bar",children:I("div",{className:"urun-progress-fill",style:{width:`${s}%`}})}),ee("div",{className:"urun-progress-text",children:[e,"/",t]})]})}import{z as _}from"zod";import{jsx as re,jsxs as Re}from"react/jsx-runtime";var B=_.object({state:_.enum(["thinking","generating","idle","error"]),message:_.string().optional()}),Me={thinking:"Thinking...",generating:"Generating...",idle:"Idle",error:"Error"};function oe(r){let{state:e,message:t}=r,o=e==="thinking"||e==="generating",n=t??Me[e]??e;return{state:e,message:n,isActive:o}}function U(r){let{state:e,message:t,isActive:o}=oe(r);return Re("span",{className:"urun-status-badge","data-state":e,children:[re("span",{className:`urun-status-indicator${o?" urun-status-pulse":""}`}),re("span",{className:"urun-status-message",children:t})]})}import{useRef as ne,useEffect as Ae}from"react";import{z as Y}from"zod";import{jsx as se,jsxs as Ee}from"react/jsx-runtime";var z=Y.object({text:Y.string(),streaming:Y.boolean().default(!1)});function ae(r){let{text:e,streaming:t=!1}=r,o=e.length===0;return{text:e,streaming:t,isEmpty:o}}function D(r){let{text:e,streaming:t}=ae(r),o=ne(null),n=ne(0);return Ae(()=>{let s=o.current;s&&e.length!==n.current&&(s.textContent=e,n.current=e.length)},[e]),Ee("div",{className:"urun-text-stream",children:[se("span",{ref:o,className:"urun-text-content"}),t&&se("span",{className:"urun-text-cursor"})]})}import{z as b}from"zod";import{jsx as ie,jsxs as Le}from"react/jsx-runtime";var F=b.object({src:b.string().url(),alt:b.string().optional(),caption:b.string().optional()});function ce(r){let{src:e,alt:t,caption:o}=r;return{src:e,alt:t??"",caption:o}}function H(r){let{src:e,alt:t,caption:o}=ce(r);return Le("figure",{className:"urun-image-frame",children:[ie("img",{className:"urun-image",src:e,alt:t}),o&&ie("figcaption",{className:"urun-image-caption",children:o})]})}import{z as f}from"zod";import{jsx as W,jsxs as Ie}from"react/jsx-runtime";var $=f.object({metrics:f.array(f.object({label:f.string(),value:f.union([f.string(),f.number()]),unit:f.string().optional()}))});function ue(r){return{metrics:r.metrics.map(t=>({...t,displayValue:t.unit?`${t.value} ${t.unit}`:String(t.value)}))}}function j(r){let{metrics:e}=ue(r);return W("div",{className:"urun-metrics-panel",children:e.map((t,o)=>Ie("div",{className:"urun-metric-card",children:[W("div",{className:"urun-metric-label",children:t.label}),W("div",{className:"urun-metric-value",children:t.displayValue})]},o))})}var pe=!1;function de(){pe||(S("ProgressCard",O,N),S("StatusBadge",U,B),S("TextStream",D,z),S("ImageFrame",H,F),S("MetricsPanel",j,$),pe=!0)}import{jsx as Be}from"react/jsx-runtime";var P=Ne(null);function J({canvasRef:r,renderMode:e,children:t}){let o=Oe(l);if(!o)throw new Error("CompositorProvider must be used within <SessionProvider>");let n=o,[s]=_e(()=>G());return le(()=>{de()},[]),le(()=>{let a=null,i=null;function c(){let u=n.getState()._transport;if(!u)return!1;let p=u.multiplexer;return p?(a=p.on("scene_graph",m=>{K(s,m)}),!0):!1}return c()||(i=n.subscribe(u=>{u.state==="connected"&&c()&&(i?.(),i=null)})),()=>{a?.(),i?.(),s.ydoc.destroy()}},[n,s]),Be(P.Provider,{value:s.store,children:t})}import{useMemo as $e,useState as je}from"react";import{Component as Ue}from"react";import{jsx as ze,jsxs as Ye}from"react/jsx-runtime";var C=class extends Ue{constructor(e){super(e),this.state={error:null}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,t){console.error("[urun] Error caught by UrunErrorBoundary:",e,t)}render(){if(this.state.error){let{fallback:e}=this.props;return typeof e=="function"?e(this.state.error):e||ze("div",{role:"alert",style:{padding:"16px",color:"#ef4444"},children:Ye("p",{children:["Connection error: ",this.state.error.message]})})}return this.props.children}};import{createContext as De}from"react";var T=De(null);import{useEffect as me,useState as Fe}from"react";import{jsx as We}from"react/jsx-runtime";function He({module:r,onToken:e}){let t=r.useAuth();return me(()=>{let o=!1;async function n(){if(!(t.loading||t.isLoading))try{let a=t.getAccessToken?await t.getAccessToken():t.accessToken;o||e(a??void 0)}catch{o||e(void 0)}}n();let s=window.setInterval(()=>{n()},6e4);return()=>{o=!0,window.clearInterval(s)}},[t,t.accessToken,t.getAccessToken,t.isAuthenticated,t.isLoading,t.loading,t.user,e]),null}function fe({onToken:r}){let[e,t]=Fe(null);return me(()=>{let o=!1;return import("@workos-inc/authkit-react").then(n=>{!o&&typeof n.useAuth=="function"&&t({useAuth:n.useAuth})}).catch(()=>{o||t(null)}),()=>{o=!0}},[]),e?We(He,{module:e,onToken:r}):null}import{jsx as M,jsxs as Ve}from"react/jsx-runtime";function Je({baseUrl:r,orgId:e,appId:t,jwt:o,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,canvasRef:u,renderMode:p,fallback:m,children:k}){let[g,d]=je(),y=o??g,A=$e(()=>({appId:t,baseUrl:r,orgId:e,jwt:y,authProvider:n}),[t,n,r,y,e]);return Ve(C,{fallback:m,children:[n==="workos"&&!o?M(fe,{onToken:d}):null,M(T.Provider,{value:A,children:M(L,{baseUrl:r,orgId:e,jwt:y,authProvider:n,sessionId:s,onConnected:a,onDisconnected:i,onError:c,children:M(J,{canvasRef:u,renderMode:p,children:k})})})]})}import{useContext as Ze,useMemo as Se,useRef as qe}from"react";import{App as Ge}from"@urun-sh/core";function Ke(r,e){return`${r}:${JSON.stringify(e??{})}`}function Qe(){let r=Ze(T);if(!r)throw new Error("useApp must be used within <UrunProvider>");if(!r.appId)throw new Error('useApp requires <UrunProvider appId="...">');let e=qe(new Map),t=Se(()=>Ge(r.appId,{baseUrl:r.baseUrl,orgId:r.orgId,jwt:r.jwt,authProvider:r.authProvider}),[r.appId,r.baseUrl,r.orgId,r.jwt,r.authProvider]);return Se(()=>new Proxy({},{get(o,n){if(typeof n=="string")return s=>{let a=Ke(n,s),i=e.current.get(a);if(i)return i;let c=t[n](s);return e.current.set(a,c),c}}}),[t])}import{useContext as Xe}from"react";import{useStore as ge}from"zustand";import{useShallow as et}from"zustand/react/shallow";function ye(r){let{_transport:e,...t}=r;return t}function tt(r){let e=Xe(l);if(!e)throw new Error("useSession must be used within <SessionProvider> or <UrunProvider>");return r?ge(e,t=>r(ye(t))):ge(e,et(t=>ye(t)))}import{useContext as rt,useState as ot,useEffect as nt}from"react";function st(r){let e=rt(l);if(!e)throw new Error("useTrack must be used within <SessionProvider> or <UrunProvider>");let[t,o]=ot(null);return nt(()=>{let n=e.getState()._transport;if(!n)return;let s=n.getTrackByName?.bind(n),a=s?.(r);a&&a.readyState!=="ended"&&o(a);let i=n.on("track",c=>{let u=s?.(r);u&&u.id!==c.id||(o(c),c.addEventListener("ended",()=>{o(null)}))});return()=>{i()}},[r,e]),t}import{useContext as at}from"react";import{useStore as it}from"zustand";function ct(r){let e=at(P);if(!e)throw new Error("useScene must be used within <CompositorProvider> or <UrunProvider>");return it(e,r??(t=>t))}import{useContext as ve,useCallback as xe}from"react";import{useStore as ut}from"zustand";function pt(){let r=ve(P),e=ve(l);if(!r)throw new Error("useLayout must be used within <CompositorProvider> or <UrunProvider>");let t=ut(r,s=>s.layout),o=xe(s=>{if(e){let a=e.getState()._transport;if(a){let i=a.multiplexer;i&&i.emit("scene_graph",{type:"delta",ops:[{op:"set_layout",layout:{mode:s}}]})}}},[e]),n=xe(s=>{if(e){let a=e.getState()._transport;if(a){let i=a.multiplexer;i&&i.emit("scene_graph",{type:"delta",ops:[{op:"set_layout",layout:{canvas:s}}]})}}},[e]);return{mode:t.mode,canvas:t.canvas,setMode:o,setCanvas:n}}import{Fragment as lt,jsx as R}from"react/jsx-runtime";function dt({name:r,props:e,fallback:t}){let o=X(r,e);if(o.error)return console.warn(`[urun] ComponentRenderer: ${o.error}`),t?R(lt,{children:t}):R("div",{className:"urun-component-error",role:"alert",children:R("span",{className:"urun-component-error-text",children:o.error})});let n=o.Component;return R(n,{...o.validatedProps})}export{dt as ComponentRenderer,J as CompositorProvider,H as ImageFrame,F as ImageFrameSchema,j as MetricsPanel,$ as MetricsPanelSchema,O as ProgressCard,N as ProgressCardSchema,L as SessionProvider,U as StatusBadge,B as StatusBadgeSchema,D as TextStream,z as TextStreamSchema,C as UrunErrorBoundary,Je as UrunProvider,S as registerComponent,Qe as useApp,ce as useImageFrame,pt as useLayout,ue as useMetricsPanel,te as useProgressCard,ct as useScene,tt as useSession,oe as useStatusBadge,ae as useTextStream,st as useTrack};
+import{useMemo as q,useState as G}from"react";import{Component as F}from"react";import{jsx as L,jsxs as $}from"react/jsx-runtime";var u=class extends F{constructor(e){super(e),this.state={error:null}}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,r){console.error("[urun] Error caught by UrunErrorBoundary:",e,r)}render(){if(this.state.error){let{fallback:e}=this.props;return typeof e=="function"?e(this.state.error):e||L("div",{role:"alert",style:{padding:"16px",color:"#ef4444"},children:$("p",{children:["Connection error: ",this.state.error.message]})})}return this.props.children}};import{createContext as V}from"react";var l=V(null);import{useEffect as C,useState as j}from"react";import{jsx as Z}from"react/jsx-runtime";function J({module:t,onToken:e}){let r=t.useAuth();return C(()=>{let n=!1;async function o(){if(!(r.loading||r.isLoading))try{let a=r.getAccessToken?await r.getAccessToken():r.accessToken;n||e(a??void 0)}catch{n||e(void 0)}}o();let s=window.setInterval(()=>{o()},6e4);return()=>{n=!0,window.clearInterval(s)}},[r,r.accessToken,r.getAccessToken,r.isAuthenticated,r.isLoading,r.loading,r.user,e]),null}function R({onToken:t}){let[e,r]=j(null);return C(()=>{let n=!1;return import("@workos-inc/authkit-react").then(o=>{!n&&typeof o.useAuth=="function"&&r({useAuth:o.useAuth})}).catch(()=>{n||r(null)}),()=>{n=!0}},[]),e?Z(J,{module:e,onToken:t}):null}import{jsx as b,jsxs as K}from"react/jsx-runtime";function H({baseUrl:t,orgId:e,appId:r,jwt:n,authProvider:o,fallback:s,children:a}){let[d,m]=G(),c=n??d,z=q(()=>({appId:r,baseUrl:t,orgId:e,jwt:c,authProvider:o}),[r,o,t,c,e]);return K(u,{fallback:s,children:[o==="workos"&&!n?b(R,{onToken:m}):null,b(l.Provider,{value:z,children:a})]})}import{useContext as Q,useMemo as w,useReducer as X,useRef as Y}from"react";import{App as ee}from"@urun-sh/core";function re(t,e){return`${t}:${JSON.stringify(e??{})}`}var h=class{constructor(e,r){this._doc=e;this._notify=r;this._unsubscribeChange=this._doc.on("change",()=>this._notify())}_doc;_notify;_unsubscribeChange;get(e,r){return this._doc.get(e,r)}set(e){this._doc.set(e),this._notify()}on(e,r){return this._doc.on(e,n=>r(n))}dispose(){this._unsubscribeChange()}},v=class{constructor(e,r){this._stream=e;this._notify=r;this._unsubscribeTrack=this._stream.on("track",()=>this._notify())}_stream;_notify;_unsubscribeTrack;get track(){return this._stream.track}attach(e){return this._stream.attach(e)}detach(){return this._stream.detach()}seek(e){return this._stream.seek(e)}on(e,r){return this._stream.on(e,r)}dispose(){this._unsubscribeTrack()}},S=class{constructor(e,r){this._session=e;this._notify=r}_session;_notify;_docs=new Map;_streams=new Map;get id(){return this._session.id}doc(e){let r=this._docs.get(e);return r||(r=new h(this._session.doc(e),this._notify),this._docs.set(e,r)),r}stream(e){let r=this._streams.get(e);return r||(r=new v(this._session.stream(e),this._notify),this._streams.set(e,r)),r}disconnect(){for(let e of this._docs.values())e.dispose();for(let e of this._streams.values())e.dispose();this._docs.clear(),this._streams.clear(),this._session.disconnect(),this._notify()}};function te(){let t=Q(l);if(!t)throw new Error("useApp must be used within <UrunProvider>");if(!t.appId)throw new Error('useApp requires <UrunProvider appId="...">');let[,e]=X(o=>o+1,0),r=Y(new Map),n=w(()=>ee(t.appId,{baseUrl:t.baseUrl,orgId:t.orgId,jwt:t.jwt,authProvider:t.authProvider}),[t.appId,t.baseUrl,t.orgId,t.jwt,t.authProvider]);return w(()=>new Proxy({},{get(o,s){if(typeof s=="string")return a=>{let d=re(s,a),m=r.current.get(d);if(m)return m;let c=new S(n[s](a),e);return r.current.set(d,c),c}}}),[n])}var T=new Map;function ne(t,e,r){if(!r||typeof r.safeParse!="function")throw new Error(`registerComponent("${t}"): schema must be a valid Zod schema`);T.set(t,{component:e,schema:r})}function _(t,e){let r=T.get(t);if(!r)return{error:`Unknown component: "${t}"`};let n=r.schema.safeParse(e);return n.success?{Component:r.component,validatedProps:n.data}:{error:`Validation failed for "${t}": ${n.error.message}`}}import{Fragment as se,jsx as g}from"react/jsx-runtime";function oe({name:t,props:e,fallback:r}){let n=_(t,e);if(n.error)return console.warn(`[urun] ComponentRenderer: ${n.error}`),r?g(se,{children:r}):g("div",{className:"urun-component-error",role:"alert",children:g("span",{className:"urun-component-error-text",children:n.error})});let o=n.Component;return g(o,{...n.validatedProps})}import{z as p}from"zod";import{jsx as y,jsxs as A}from"react/jsx-runtime";var ae=p.object({step:p.number().min(0),total:p.number().min(1),label:p.string().optional(),variant:p.enum(["default","success","error"]).default("default")});function M(t){let{step:e,total:r,label:n,variant:o="default"}=t,s=Math.min(e/r*100,100),a=e>=r;return{step:e,total:r,label:n,variant:o,percentage:s,isComplete:a}}function ie(t){let{step:e,total:r,label:n,variant:o,percentage:s}=M(t);return A("div",{className:"urun-progress-card","data-variant":o,children:[n&&y("div",{className:"urun-progress-label",children:n}),y("div",{className:"urun-progress-bar",children:y("div",{className:"urun-progress-fill",style:{width:`${s}%`}})}),A("div",{className:"urun-progress-text",children:[e,"/",r]})]})}import{z as k}from"zod";import{jsx as E,jsxs as de}from"react/jsx-runtime";var ce=k.object({state:k.enum(["thinking","generating","idle","error"]),message:k.string().optional()}),ue={thinking:"Thinking...",generating:"Generating...",idle:"Idle",error:"Error"};function I(t){let{state:e,message:r}=t,n=e==="thinking"||e==="generating",o=r??ue[e]??e;return{state:e,message:o,isActive:n}}function pe(t){let{state:e,message:r,isActive:n}=I(t);return de("span",{className:"urun-status-badge","data-state":e,children:[E("span",{className:`urun-status-indicator${n?" urun-status-pulse":""}`}),E("span",{className:"urun-status-message",children:r})]})}import{useRef as N,useEffect as me}from"react";import{z as x}from"zod";import{jsx as U,jsxs as fe}from"react/jsx-runtime";var le=x.object({text:x.string(),streaming:x.boolean().default(!1)});function B(t){let{text:e,streaming:r=!1}=t,n=e.length===0;return{text:e,streaming:r,isEmpty:n}}function ge(t){let{text:e,streaming:r}=B(t),n=N(null),o=N(0);return me(()=>{let s=n.current;s&&e.length!==o.current&&(s.textContent=e,o.current=e.length)},[e]),fe("div",{className:"urun-text-stream",children:[U("span",{ref:n,className:"urun-text-content"}),r&&U("span",{className:"urun-text-cursor"})]})}import{z as f}from"zod";import{jsx as O,jsxs as Se}from"react/jsx-runtime";var he=f.object({src:f.string().url(),alt:f.string().optional(),caption:f.string().optional()});function D(t){let{src:e,alt:r,caption:n}=t;return{src:e,alt:r??"",caption:n}}function ve(t){let{src:e,alt:r,caption:n}=D(t);return Se("figure",{className:"urun-image-frame",children:[O("img",{className:"urun-image",src:e,alt:r}),n&&O("figcaption",{className:"urun-image-caption",children:n})]})}import{z as i}from"zod";import{jsx as P,jsxs as xe}from"react/jsx-runtime";var ye=i.object({metrics:i.array(i.object({label:i.string(),value:i.union([i.string(),i.number()]),unit:i.string().optional()}))});function W(t){return{metrics:t.metrics.map(r=>({...r,displayValue:r.unit?`${r.value} ${r.unit}`:String(r.value)}))}}function ke(t){let{metrics:e}=W(t);return P("div",{className:"urun-metrics-panel",children:e.map((r,n)=>xe("div",{className:"urun-metric-card",children:[P("div",{className:"urun-metric-label",children:r.label}),P("div",{className:"urun-metric-value",children:r.displayValue})]},n))})}export{oe as ComponentRenderer,ve as ImageFrame,he as ImageFrameSchema,ke as MetricsPanel,ye as MetricsPanelSchema,ie as ProgressCard,ae as ProgressCardSchema,pe as StatusBadge,ce as StatusBadgeSchema,ge as TextStream,le as TextStreamSchema,u as UrunErrorBoundary,H as UrunProvider,ne as registerComponent,te as useApp,D as useImageFrame,W as useMetricsPanel,M as useProgressCard,I as useStatusBadge,B as useTextStream};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urun-sh/react",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "React bindings for the urun TypeScript SDK",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "@urun-sh/core": "^0.1.5",
+    "@urun-sh/core": "^0.1.7",
     "@workos-inc/authkit-react": "^0.15.0"
   },
   "dependencies": {
@@ -45,9 +45,9 @@
     "happy-dom": "^20.9.0",
     "typescript": "^5.3.0",
     "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react": "^19.2.15",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "@urun-sh/core": "workspace:*",
     "@workos-inc/authkit-react": "^0.15.0"
   },