flexium 0.12.13 → 0.12.17

package/README.md

@@ -11,9 +11,9 @@ Flexium is a next-generation UI framework that unifies state management, async d
 ## Key Features
 
 - **Unified State API** - No more `useState`, `useRecoil`, `useQuery` separation. Just `state()`.
-- **No Virtual DOM** - Direct DOM updates for maximum performance and minimal memory usage.
-- **Tiny Bundle** - ~8KB (min+gzip) including Router and Motion.
-- **Cross-Platform** - DOM, Canvas, and SSR renderers included.
+- **No Virtual DOM** - Direct DOM updates via Proxy-based fine-grained reactivity.
+- **Tiny Bundle** - Minimal footprint with tree-shaking support.
+- **Cross-Platform** - DOM, Canvas, Server (SSR) renderers included.
 - **TypeScript First** - Full type inference out of the box.
 - **Zero-Config JSX** - Works with standard tooling.
 
@@ -39,20 +39,20 @@ Flexium unifies all state concepts into one function.
 ### Local State
 
 ```tsx
-import { state } from 'flexium/core';
-import { render } from 'flexium/dom';
+import { state } from 'flexium/core'
+import { render } from 'flexium/dom'
 
 function Counter() {
-  const [count, setCount] = state(0);
+  const [count, setCount] = state(0)
 
   return (
     <button onclick={() => setCount(c => c + 1)}>
       Count: {count}
     </button>
-  );
+  )
 }
 
-render(<Counter />, document.getElementById('app'));
+render(Counter, document.getElementById('app'))
 ```
 
 ### Global State
@@ -61,16 +61,17 @@ Just add a `key` to share state across components. Keys can be strings or arrays
 
 ```tsx
 // Define global state with array key
-const [theme, setTheme] = state('light', { key: ['app', 'theme'] });
+const [theme, setTheme] = state('light', { key: ['app', 'theme'] })
 
 function ThemeToggle() {
-  const [theme, setTheme] = state(undefined, { key: ['app', 'theme'] });
+  // Access same state anywhere with the same key
+  const [theme, setTheme] = state('light', { key: ['app', 'theme'] })
 
   return (
     <button onclick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
       Theme: {theme}
     </button>
-  );
+  )
 }
 ```
 
@@ -81,55 +82,40 @@ Pass an async function to handle data fetching automatically.
 ```tsx
 function UserProfile({ id }) {
   const [user, control] = state(async () => {
-    const res = await fetch(`/api/users/${id}`);
-    return res.json();
-  });
+    const res = await fetch(`/api/users/${id}`)
+    return res.json()
+  })
 
-  if (control.loading) return <div>Loading...</div>;
-  if (control.error) return <div>Error!</div>;
+  if (control.loading) return <div>Loading...</div>
+  if (control.error) return <div>Error!</div>
 
   return (
     <div>
       <h1>{user.name}</h1>
       <button onclick={() => control.refetch()}>Reload</button>
     </div>
-  );
+  )
 }
 ```
 
-### Derived State
+### Computed/Derived State
 
 ```tsx
-const [count, setCount] = state(1);
-const [double] = state(() => count * 2, { deps: [count] });
-```
-
-### Array Keys & Params
-
-```tsx
-// Array keys for dynamic caching (like TanStack Query)
-const [user] = state(fetchUser, { key: ['user', userId] });
-
-// Explicit params for better DX
-const [data] = state(
-  async ({ userId, postId }) => fetchPost(userId, postId),
-  {
-    key: ['posts', userId, postId],
-    params: { userId, postId }
-  }
-);
+const [count, setCount] = state(1)
+const [doubled] = state(() => count * 2, { deps: [count] })
 ```
 
 ## Package Structure
 
 ```
 flexium
-├── /core       # Core reactivity: state(), effect(), batch()
-├── /dom        # DOM renderer: render(), Portal
-├── /canvas     # Canvas renderer: Canvas, Rect, Circle, Text
-├── /primitives # Cross-platform components: Row, Column, Stack
-├── /router     # SPA routing: Router, Route, Link
-└── /server     # SSR utilities
+├── /core         # Core reactivity: state(), effect(), sync(), context()
+├── /dom          # DOM renderer: render(), hydrate(), Portal, Suspense
+├── /ref          # Ref system: ref(), forwardRef()
+├── /router       # SPA routing: Routes, Route, Link, Outlet
+├── /server       # SSR: renderToString(), renderToStaticMarkup()
+├── /canvas       # Canvas 2D: Canvas, DrawRect, DrawCircle, DrawText
+└── /interactive  # Game loop: loop(), keyboard(), mouse()
 ```
 
 ## Control Flow
@@ -138,89 +124,160 @@ Use native JavaScript for control flow - no special components needed:
 
 ```tsx
 // Conditional rendering
-{isLoggedIn() ? <Dashboard /> : <Login />}
+{isLoggedIn ? <Dashboard /> : <Login />}
 
 // Short-circuit for simple conditions
-{isAdmin() && <AdminPanel />}
+{isAdmin && <AdminPanel />}
 
-// List rendering with optimized reconciliation
+// List rendering
 {items.map(item => <Item key={item.id} data={item} />)}
+```
+
+## Routing
+
+```tsx
+import { Routes, Route, Link, router } from 'flexium/router'
+
+function App() {
+  return (
+    <Routes>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+      </nav>
+      <Route path="/" component={Home} />
+      <Route path="/about" component={About} />
+      <Route path="/users/:id" component={UserProfile} />
+    </Routes>
+  )
+}
 
-// Pattern matching with ternary chains
-{status() === 'loading' ? <Loading /> :
- status() === 'error' ? <Error /> :
- status() === 'success' ? <Success /> :
- <Default />}
+function UserProfile({ params }) {
+  return <h1>User: {params.id}</h1>
+}
+
+// Or use the router hook
+function UserProfileHook() {
+  const r = router()
+  return <h1>User: {r.params.id}</h1>
+}
 ```
 
 ## Canvas Rendering
 
 ```tsx
-import { Canvas, Rect, Circle, Text } from 'flexium/canvas';
+import { Canvas, DrawRect, DrawCircle, DrawText } from 'flexium/canvas'
 
 function App() {
-  const [x, setX] = state(100);
+  const [x, setX] = state(100)
 
   return (
     <Canvas width={400} height={300}>
-      <Rect x={0} y={0} width={400} height={300} fill="#1a1a2e" />
-      <Circle x={x} y={150} radius={30} fill="#e94560" />
-      <Text x={200} y={50} text="Hello Canvas!" fill="white" />
+      <DrawRect x={0} y={0} width={400} height={300} fill="#1a1a2e" />
+      <DrawCircle x={x} y={150} radius={30} fill="#e94560" />
+      <DrawText x={200} y={50} text="Hello Canvas!" fill="white" />
     </Canvas>
-  );
+  )
 }
 ```
 
-## Cross-Platform Primitives
+## Game Development
 
 ```tsx
-import { Row, Column, Text, Pressable } from 'flexium/primitives';
+import { state, effect } from 'flexium/core'
+import { Canvas, DrawRect } from 'flexium/canvas'
+import { loop, keyboard, Keys } from 'flexium/interactive'
+
+function Game() {
+  const [x, setX] = state(100)
+  const kb = keyboard()
+
+  const gameLoop = loop({
+    fixedFps: 60,
+    onUpdate: (delta) => {
+      if (kb.isPressed(Keys.ArrowRight)) setX(x => x + 200 * delta)
+      if (kb.isPressed(Keys.ArrowLeft)) setX(x => x - 200 * delta)
+    }
+  })
+
+  effect(() => {
+    gameLoop.start()
+    return () => gameLoop.stop()
+  }, [])
 
-function App() {
   return (
-    <Column gap={16} padding={20}>
-      <Text size="xl" weight="bold">Welcome</Text>
-      <Row gap={8}>
-        <Pressable onPress={() => console.log('clicked')}>
-          <Text>Click me</Text>
-        </Pressable>
-      </Row>
-    </Column>
-  );
+    <Canvas width={800} height={600}>
+      <DrawRect x={x} y={300} width={50} height={50} fill="red" />
+    </Canvas>
+  )
 }
 ```
 
-## Routing
+## Server-Side Rendering
 
 ```tsx
-import { Routes, Route, Link } from 'flexium/router';
+import { renderToString } from 'flexium/server'
+import { hydrate } from 'flexium/dom'
+
+// Server
+const { html, state } = renderToString(App, { hydrate: true })
+
+// Client
+hydrate(App, document.getElementById('root'), { state })
+```
+
+## Built-in Components
+
+### Portal
+
+```tsx
+import { Portal } from 'flexium/dom'
+
+<Portal target={document.body}>
+  <Modal />
+</Portal>
+```
+
+### Suspense
+
+```tsx
+import { Suspense, lazy } from 'flexium/dom'
+
+const LazyComponent = lazy(() => import('./Heavy'))
+
+<Suspense fallback={<Loading />}>
+  <LazyComponent />
+</Suspense>
+```
+
+### ErrorBoundary
+
+```tsx
+import { ErrorBoundary } from 'flexium/dom'
+
+<ErrorBoundary fallback={(error) => <Error message={error.message} />}>
+  <App />
+</ErrorBoundary>
+```
+
+## Context API
+
+```tsx
+import { createContext, context } from 'flexium/core'
+
+const ThemeCtx = createContext('light')
 
 function App() {
   return (
-    <Routes>
-      <nav>
-        <Link to="/">Home</Link>
-        <Link to="/about">About</Link>
-      </nav>
-      <Route path="/" component={Home} />
-      <Route path="/about" component={About} />
-      <Route path="/users/:id" component={UserProfile} />
-    </Routes>
-  );
-}
-
-function UserProfile({ params }) {
-  // Params are passed as props to the component
-  return <h1>User: {params.id}</h1>;
+    <ThemeCtx.Provider value="dark">
+      <Child />
+    </ThemeCtx.Provider>
+  )
 }
 
-// Or use the router hook
-import { router } from 'flexium/router';
-
-function UserProfileHook() {
-  const r = router();
-  // Access params directly from router context
-  return <h1>User: {r.params.id}</h1>;
+function Child() {
+  const theme = context(ThemeCtx)
+  return <div>Theme: {theme}</div>
 }
 ```
 

package/dist/canvas.d.cts

@@ -1,5 +1,5 @@
 import { JSX } from './jsx-runtime.cjs';
-import './dom.cjs';
+import './types-y2GGaXXk.cjs';
 
 interface CanvasProps {
     width: number;
@@ -8,8 +8,6 @@ interface CanvasProps {
     style?: any;
     ref?: (el: HTMLCanvasElement) => void;
 }
-declare function Canvas(props: CanvasProps): JSX.Element;
-
 interface DrawRectProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -20,8 +18,6 @@ interface DrawRectProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawRect(props: DrawRectProps): null;
-
 interface DrawCircleProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -31,8 +27,6 @@ interface DrawCircleProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawCircle(props: DrawCircleProps): null;
-
 interface DrawArcProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -45,8 +39,6 @@ interface DrawArcProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawArc(props: DrawArcProps): null;
-
 interface DrawLineProps {
     x1: number | (() => number);
     y1: number | (() => number);
@@ -56,8 +48,6 @@ interface DrawLineProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawLine(props: DrawLineProps): null;
-
 interface DrawTextProps {
     text: string | (() => string);
     x: number | (() => number);
@@ -69,8 +59,6 @@ interface DrawTextProps {
     textAlign?: 'left' | 'center' | 'right';
     opacity?: number | (() => number);
 }
-declare function DrawText(props: DrawTextProps): null;
-
 interface DrawPathProps {
     d: string | (() => string);
     fill?: string | (() => string);
@@ -78,6 +66,19 @@ interface DrawPathProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
+
+declare function Canvas(props: CanvasProps): JSX.Element;
+
+declare function DrawRect(props: DrawRectProps): null;
+
+declare function DrawCircle(props: DrawCircleProps): null;
+
+declare function DrawArc(props: DrawArcProps): null;
+
+declare function DrawLine(props: DrawLineProps): null;
+
+declare function DrawText(props: DrawTextProps): null;
+
 declare function DrawPath(props: DrawPathProps): null;
 
 export { Canvas, type CanvasProps, DrawArc, type DrawArcProps, DrawCircle, type DrawCircleProps, DrawLine, type DrawLineProps, DrawPath, type DrawPathProps, DrawRect, type DrawRectProps, DrawText, type DrawTextProps };

package/dist/canvas.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from './jsx-runtime.js';
-import './dom.js';
+import './types-y2GGaXXk.js';
 
 interface CanvasProps {
     width: number;
@@ -8,8 +8,6 @@ interface CanvasProps {
     style?: any;
     ref?: (el: HTMLCanvasElement) => void;
 }
-declare function Canvas(props: CanvasProps): JSX.Element;
-
 interface DrawRectProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -20,8 +18,6 @@ interface DrawRectProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawRect(props: DrawRectProps): null;
-
 interface DrawCircleProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -31,8 +27,6 @@ interface DrawCircleProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawCircle(props: DrawCircleProps): null;
-
 interface DrawArcProps {
     x: number | (() => number);
     y: number | (() => number);
@@ -45,8 +39,6 @@ interface DrawArcProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawArc(props: DrawArcProps): null;
-
 interface DrawLineProps {
     x1: number | (() => number);
     y1: number | (() => number);
@@ -56,8 +48,6 @@ interface DrawLineProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
-declare function DrawLine(props: DrawLineProps): null;
-
 interface DrawTextProps {
     text: string | (() => string);
     x: number | (() => number);
@@ -69,8 +59,6 @@ interface DrawTextProps {
     textAlign?: 'left' | 'center' | 'right';
     opacity?: number | (() => number);
 }
-declare function DrawText(props: DrawTextProps): null;
-
 interface DrawPathProps {
     d: string | (() => string);
     fill?: string | (() => string);
@@ -78,6 +66,19 @@ interface DrawPathProps {
     strokeWidth?: number | (() => number);
     opacity?: number | (() => number);
 }
+
+declare function Canvas(props: CanvasProps): JSX.Element;
+
+declare function DrawRect(props: DrawRectProps): null;
+
+declare function DrawCircle(props: DrawCircleProps): null;
+
+declare function DrawArc(props: DrawArcProps): null;
+
+declare function DrawLine(props: DrawLineProps): null;
+
+declare function DrawText(props: DrawTextProps): null;
+
 declare function DrawPath(props: DrawPathProps): null;
 
 export { Canvas, type CanvasProps, DrawArc, type DrawArcProps, DrawCircle, type DrawCircleProps, DrawLine, type DrawLineProps, DrawPath, type DrawPathProps, DrawRect, type DrawRectProps, DrawText, type DrawTextProps };

package/dist/canvas.js

@@ -1,2 +1,2 @@
-'use strict';var chunkIA4FEBFE_js=require('./chunk-IA4FEBFE.js'),chunk7BXR4ZFD_js=require('./chunk-7BXR4ZFD.js');require('./chunk-ENWGYQNU.js');var chunkEXLNKYSH_js=require('./chunk-EXLNKYSH.js');var h=[];function u(e){h.push(e);}function D(e){let{width:p,height:b,children:r,style:m,ref:a}=e,i,o=null,s=()=>{!i||!o||(o.clearRect(0,0,p,b),h.length=0,Array.isArray(r)?r.forEach(n=>{typeof n=="function"&&n();}):typeof r=="function"&&r(),h.forEach(n=>{P(o,n);}),null);};return chunkIA4FEBFE_js.a(()=>{i&&s();}),chunkEXLNKYSH_js.a("canvas",{ref:n=>{i=n,o=n.getContext("2d"),a&&a(n),s();},width:p,height:b,style:m})}function t(e){return chunk7BXR4ZFD_js.b(e)?e.valueOf?.()??e:e}function P(e,p){let{type:b,props:r}=p,m=t(r.opacity);switch(m!==void 0&&(e.globalAlpha=m),b){case "rect":{let a=t(r.x),i=t(r.y),o=t(r.width),s=t(r.height),n=t(r.fill),f=t(r.stroke),c=t(r.strokeWidth);n&&(e.fillStyle=n,e.fillRect(a,i,o,s)),f&&(e.strokeStyle=f,c&&(e.lineWidth=c),e.strokeRect(a,i,o,s));break}case "circle":{let a=t(r.x),i=t(r.y),o=t(r.radius),s=t(r.fill),n=t(r.stroke),f=t(r.strokeWidth);e.beginPath(),e.arc(a,i,o,0,Math.PI*2),s&&(e.fillStyle=s,e.fill()),n&&(e.strokeStyle=n,f&&(e.lineWidth=f),e.stroke());break}case "arc":{let a=t(r.x),i=t(r.y),o=t(r.radius),s=t(r.startAngle),n=t(r.endAngle),f=t(r.counterclockwise)||false,c=t(r.fill),y=t(r.stroke),g=t(r.strokeWidth);e.beginPath(),e.arc(a,i,o,s,n,f),c&&(e.fillStyle=c,e.fill()),y&&(e.strokeStyle=y,g&&(e.lineWidth=g),e.stroke());break}case "line":{let a=t(r.x1),i=t(r.y1),o=t(r.x2),s=t(r.y2),n=t(r.stroke)||"black",f=t(r.strokeWidth)||1;e.beginPath(),e.moveTo(a,i),e.lineTo(o,s),e.strokeStyle=n,e.lineWidth=f,e.stroke();break}case "text":{let a=t(r.x),i=t(r.y),o=t(r.text),s=t(r.fill)||"black",n=t(r.fontSize)||16,f=t(r.fontFamily)||"sans-serif",c=t(r.fontWeight)||"normal",y=t(r.textAlign)||"left";e.font=`${c} ${n}px ${f}`,e.textAlign=y,e.fillStyle=s,e.fillText(o,a,i);break}case "path":{let a=t(r.d),i=t(r.fill),o=t(r.stroke),s=t(r.strokeWidth),n=new Path2D(a);i&&(e.fillStyle=i,e.fill(n)),o&&(e.strokeStyle=o,s&&(e.lineWidth=s),e.stroke(n));break}}m!==void 0&&(e.globalAlpha=1);}function x(e){return chunkIA4FEBFE_js.a(()=>{u({type:"rect",props:e});}),null}function C(e){return chunkIA4FEBFE_js.a(()=>{u({type:"circle",props:e});}),null}function W(e){return chunkIA4FEBFE_js.a(()=>{u({type:"arc",props:e});}),null}function v(e){return chunkIA4FEBFE_js.a(()=>{u({type:"line",props:e});}),null}function A(e){return chunkIA4FEBFE_js.a(()=>{u({type:"text",props:e});}),null}function S(e){return chunkIA4FEBFE_js.a(()=>{u({type:"path",props:e});}),null}exports.Canvas=D;exports.DrawArc=W;exports.DrawCircle=C;exports.DrawLine=v;exports.DrawPath=S;exports.DrawRect=x;exports.DrawText=A;//# sourceMappingURL=canvas.js.map
+'use strict';var chunk6VIRXD2Y_js=require('./chunk-6VIRXD2Y.js'),chunkYWTD32NA_js=require('./chunk-YWTD32NA.js');require('./chunk-UWFVCKRU.js');var chunkEXLNKYSH_js=require('./chunk-EXLNKYSH.js');var D=[];function l(t){D.push(t);}function C(t){let{width:u,height:w,children:e,style:y,ref:a}=t,s,n=null,i=()=>{!s||!n||(n.clearRect(0,0,u,w),D.length=0,Array.isArray(e)?e.forEach(o=>{typeof o=="function"&&o();}):typeof e=="function"&&e(),D.forEach(o=>{g(n,o);}),null);};return chunkYWTD32NA_js.e(()=>{s&&i();}),chunkEXLNKYSH_js.a("canvas",{ref:o=>{s=o,n=o.getContext("2d"),a&&a(o),i();},width:u,height:w,style:y})}function r(t){return chunk6VIRXD2Y_js.b(t)?t.valueOf?.()??t:t}function g(t,u){let{type:w,props:e}=u,y=r(e.opacity);switch(y!==void 0&&(t.globalAlpha=y),w){case "rect":{let a=r(e.x),s=r(e.y),n=r(e.width),i=r(e.height),o=r(e.fill),f=r(e.stroke),c=r(e.strokeWidth);o&&(t.fillStyle=o,t.fillRect(a,s,n,i)),f&&(t.strokeStyle=f,c&&(t.lineWidth=c),t.strokeRect(a,s,n,i));break}case "circle":{let a=r(e.x),s=r(e.y),n=r(e.radius),i=r(e.fill),o=r(e.stroke),f=r(e.strokeWidth);t.beginPath(),t.arc(a,s,n,0,Math.PI*2),i&&(t.fillStyle=i,t.fill()),o&&(t.strokeStyle=o,f&&(t.lineWidth=f),t.stroke());break}case "arc":{let a=r(e.x),s=r(e.y),n=r(e.radius),i=r(e.startAngle),o=r(e.endAngle),f=r(e.counterclockwise)||false,c=r(e.fill),m=r(e.stroke),h=r(e.strokeWidth);t.beginPath(),t.arc(a,s,n,i,o,f),c&&(t.fillStyle=c,t.fill()),m&&(t.strokeStyle=m,h&&(t.lineWidth=h),t.stroke());break}case "line":{let a=r(e.x1),s=r(e.y1),n=r(e.x2),i=r(e.y2),o=r(e.stroke)||"black",f=r(e.strokeWidth)||1;t.beginPath(),t.moveTo(a,s),t.lineTo(n,i),t.strokeStyle=o,t.lineWidth=f,t.stroke();break}case "text":{let a=r(e.x),s=r(e.y),n=r(e.text),i=r(e.fill)||"black",o=r(e.fontSize)||16,f=r(e.fontFamily)||"sans-serif",c=r(e.fontWeight)||"normal",m=r(e.textAlign)||"left";t.font=`${c} ${o}px ${f}`,t.textAlign=m,t.fillStyle=i,t.fillText(n,a,s);break}case "path":{let a=r(e.d),s=r(e.fill),n=r(e.stroke),i=r(e.strokeWidth),o=new Path2D(a);s&&(t.fillStyle=s,t.fill(o)),n&&(t.strokeStyle=n,i&&(t.lineWidth=i),t.stroke(o));break}}y!==void 0&&(t.globalAlpha=1);}function x(t){return chunkYWTD32NA_js.e(()=>{l({type:"rect",props:t});}),null}function v(t){return chunkYWTD32NA_js.e(()=>{l({type:"circle",props:t});}),null}function A(t){return chunkYWTD32NA_js.e(()=>{l({type:"arc",props:t});}),null}function W(t){return chunkYWTD32NA_js.e(()=>{l({type:"line",props:t});}),null}function b(t){return chunkYWTD32NA_js.e(()=>{l({type:"text",props:t});}),null}function R(t){return chunkYWTD32NA_js.e(()=>{l({type:"path",props:t});}),null}exports.Canvas=C;exports.DrawArc=A;exports.DrawCircle=v;exports.DrawLine=W;exports.DrawPath=R;exports.DrawRect=x;exports.DrawText=b;//# sourceMappingURL=canvas.js.map
 //# sourceMappingURL=canvas.js.map

package/dist/canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/canvas/Canvas.tsx","../src/canvas/dom/DrawRect.tsx","../src/canvas/dom/DrawCircle.tsx","../src/canvas/dom/DrawArc.tsx","../src/canvas/dom/DrawLine.tsx","../src/canvas/dom/DrawText.tsx","../src/canvas/dom/DrawPath.tsx"],"names":["drawQueue","queueDraw","node","Canvas","props","width","height","children","style","ref","canvas","ctx","render","child","drawNode","effect","jsx","el","getValue","val","isReactive","type","opacity","x","y","w","h","fill","stroke","strokeWidth","radius","startAngle","endAngle","counterclockwise","x1","y1","x2","y2","text","fontSize","fontFamily","fontWeight","textAlign","d","path","DrawRect","DrawCircle","DrawArc","DrawLine","DrawText","DrawPath"],"mappings":"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","file":"canvas.js","sourcesContent":["import { effect } from '../core/lifecycle'\nimport { isReactive } from '../core/reactive'\n\nexport interface CanvasProps {\n  width: number\n  height: number\n  children?: any\n  style?: any\n  ref?: (el: HTMLCanvasElement) => void\n}\n\ninterface CanvasDrawNode {\n  type: 'rect' | 'circle' | 'arc' | 'line' | 'text' | 'path'\n  props: any\n}\n\n// Canvas context for children to access\nlet currentCanvasContext: CanvasRenderingContext2D | null = null\nconst drawQueue: CanvasDrawNode[] = []\n\nexport function getCanvasContext() {\n  return currentCanvasContext\n}\n\nexport function queueDraw(node: CanvasDrawNode) {\n  drawQueue.push(node)\n}\n\nexport function Canvas(props: CanvasProps) {\n  const { width, height, children, style, ref } = props\n\n  let canvas: HTMLCanvasElement | undefined\n  let ctx: CanvasRenderingContext2D | null = null\n\n  const render = () => {\n    if (!canvas || !ctx) return\n\n    // Clear canvas\n    ctx.clearRect(0, 0, width, height)\n\n    // Clear draw queue\n    drawQueue.length = 0\n\n    // Set current context for children\n    currentCanvasContext = ctx\n\n    // Render children (they will queue draw commands)\n    if (Array.isArray(children)) {\n      children.forEach(child => {\n        if (typeof child === 'function') {\n          child()\n        }\n      })\n    } else if (typeof children === 'function') {\n      children()\n    }\n\n    // Execute draw queue\n    drawQueue.forEach(node => {\n      drawNode(ctx!, node)\n    })\n\n    // Clear context\n    currentCanvasContext = null\n  }\n\n  effect(() => {\n    if (canvas) {\n      render()\n    }\n  })\n\n  return (\n    <canvas\n      ref={(el: HTMLCanvasElement) => {\n        canvas = el\n        ctx = el.getContext('2d')\n        if (ref) ref(el)\n        render()\n      }}\n      width={width}\n      height={height}\n      style={style}\n    />\n  )\n}\n\nfunction getValue(val: any): any {\n  if (isReactive(val)) {\n    return val.valueOf?.() ?? val\n  }\n  return val\n}\n\nfunction drawNode(ctx: CanvasRenderingContext2D, node: CanvasDrawNode) {\n  const { type, props } = node\n\n  // Apply opacity\n  const opacity = getValue(props.opacity)\n  if (opacity !== undefined) {\n    ctx.globalAlpha = opacity\n  }\n\n  switch (type) {\n    case 'rect': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const w = getValue(props.width)\n      const h = getValue(props.height)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fillRect(x, y, w, h)\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.strokeRect(x, y, w, h)\n      }\n      break\n    }\n\n    case 'circle': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const radius = getValue(props.radius)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      ctx.beginPath()\n      ctx.arc(x, y, radius, 0, Math.PI * 2)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill()\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke()\n      }\n      break\n    }\n\n    case 'arc': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const radius = getValue(props.radius)\n      const startAngle = getValue(props.startAngle)\n      const endAngle = getValue(props.endAngle)\n      const counterclockwise = getValue(props.counterclockwise) || false\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      ctx.beginPath()\n      ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill()\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke()\n      }\n      break\n    }\n\n    case 'line': {\n      const x1 = getValue(props.x1)\n      const y1 = getValue(props.y1)\n      const x2 = getValue(props.x2)\n      const y2 = getValue(props.y2)\n      const stroke = getValue(props.stroke) || 'black'\n      const strokeWidth = getValue(props.strokeWidth) || 1\n\n      ctx.beginPath()\n      ctx.moveTo(x1, y1)\n      ctx.lineTo(x2, y2)\n      ctx.strokeStyle = stroke\n      ctx.lineWidth = strokeWidth\n      ctx.stroke()\n      break\n    }\n\n    case 'text': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const text = getValue(props.text)\n      const fill = getValue(props.fill) || 'black'\n      const fontSize = getValue(props.fontSize) || 16\n      const fontFamily = getValue(props.fontFamily) || 'sans-serif'\n      const fontWeight = getValue(props.fontWeight) || 'normal'\n      const textAlign = getValue(props.textAlign) || 'left'\n\n      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`\n      ctx.textAlign = textAlign as CanvasTextAlign\n      ctx.fillStyle = fill\n      ctx.fillText(text, x, y)\n      break\n    }\n\n    case 'path': {\n      const d = getValue(props.d)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      // Parse SVG path data\n      const path = new Path2D(d)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill(path)\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke(path)\n      }\n      break\n    }\n  }\n\n  // Reset opacity\n  if (opacity !== undefined) {\n    ctx.globalAlpha = 1\n  }\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawRectProps {\n  x: number | (() => number)\n  y: number | (() => number)\n  width: number | (() => number)\n  height: number | (() => number)\n  fill?: string | (() => string)\n  stroke?: string | (() => string)\n  strokeWidth?: number | (() => number)\n  opacity?: number | (() => number)\n}\n\nexport function DrawRect(props: DrawRectProps) {\n  effect(() => {\n    queueDraw({\n      type: 'rect',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawCircleProps {\n  x: number | (() => number)\n  y: number | (() => number)\n  radius: number | (() => number)\n  fill?: string | (() => string)\n  stroke?: string | (() => string)\n  strokeWidth?: number | (() => number)\n  opacity?: number | (() => number)\n}\n\nexport function DrawCircle(props: DrawCircleProps) {\n  effect(() => {\n    queueDraw({\n      type: 'circle',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawArcProps {\n  x: number | (() => number)\n  y: number | (() => number)\n  radius: number | (() => number)\n  startAngle: number | (() => number)\n  endAngle: number | (() => number)\n  counterclockwise?: boolean\n  fill?: string | (() => string)\n  stroke?: string | (() => string)\n  strokeWidth?: number | (() => number)\n  opacity?: number | (() => number)\n}\n\nexport function DrawArc(props: DrawArcProps) {\n  effect(() => {\n    queueDraw({\n      type: 'arc',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawLineProps {\n  x1: number | (() => number)\n  y1: number | (() => number)\n  x2: number | (() => number)\n  y2: number | (() => number)\n  stroke?: string | (() => string)\n  strokeWidth?: number | (() => number)\n  opacity?: number | (() => number)\n}\n\nexport function DrawLine(props: DrawLineProps) {\n  effect(() => {\n    queueDraw({\n      type: 'line',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawTextProps {\n  text: string | (() => string)\n  x: number | (() => number)\n  y: number | (() => number)\n  fill?: string | (() => string)\n  fontSize?: number | (() => number)\n  fontFamily?: string | (() => string)\n  fontWeight?: string | (() => string)\n  textAlign?: 'left' | 'center' | 'right'\n  opacity?: number | (() => number)\n}\n\nexport function DrawText(props: DrawTextProps) {\n  effect(() => {\n    queueDraw({\n      type: 'text',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\n\nexport interface DrawPathProps {\n  d: string | (() => string)\n  fill?: string | (() => string)\n  stroke?: string | (() => string)\n  strokeWidth?: number | (() => number)\n  opacity?: number | (() => number)\n}\n\nexport function DrawPath(props: DrawPathProps) {\n  effect(() => {\n    queueDraw({\n      type: 'path',\n      props\n    })\n  })\n\n  return null\n}\n"]}
+{"version":3,"sources":["../src/canvas/Canvas.tsx","../src/canvas/dom/DrawRect.tsx","../src/canvas/dom/DrawCircle.tsx","../src/canvas/dom/DrawArc.tsx","../src/canvas/dom/DrawLine.tsx","../src/canvas/dom/DrawText.tsx","../src/canvas/dom/DrawPath.tsx"],"names":["drawQueue","queueDraw","node","Canvas","props","width","height","children","style","ref","canvas","ctx","render","child","drawNode","effect","jsx","el","getValue","val","isReactive","type","opacity","x","y","w","h","fill","stroke","strokeWidth","radius","startAngle","endAngle","counterclockwise","x1","y1","x2","y2","text","fontSize","fontFamily","fontWeight","textAlign","d","path","DrawRect","DrawCircle","DrawArc","DrawLine","DrawText","DrawPath"],"mappings":"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","file":"canvas.js","sourcesContent":["import { effect } from '../core/lifecycle'\nimport { isReactive } from '../core/reactive'\nimport type { CanvasProps, CanvasDrawNode } from './types'\n\nexport type { CanvasProps }\n\n// Canvas context for children to access\nlet currentCanvasContext: CanvasRenderingContext2D | null = null\nconst drawQueue: CanvasDrawNode[] = []\n\nexport function getCanvasContext() {\n  return currentCanvasContext\n}\n\nexport function queueDraw(node: CanvasDrawNode) {\n  drawQueue.push(node)\n}\n\nexport function Canvas(props: CanvasProps) {\n  const { width, height, children, style, ref } = props\n\n  let canvas: HTMLCanvasElement | undefined\n  let ctx: CanvasRenderingContext2D | null = null\n\n  const render = () => {\n    if (!canvas || !ctx) return\n\n    // Clear canvas\n    ctx.clearRect(0, 0, width, height)\n\n    // Clear draw queue\n    drawQueue.length = 0\n\n    // Set current context for children\n    currentCanvasContext = ctx\n\n    // Render children (they will queue draw commands)\n    if (Array.isArray(children)) {\n      children.forEach(child => {\n        if (typeof child === 'function') {\n          child()\n        }\n      })\n    } else if (typeof children === 'function') {\n      children()\n    }\n\n    // Execute draw queue\n    drawQueue.forEach(node => {\n      drawNode(ctx!, node)\n    })\n\n    // Clear context\n    currentCanvasContext = null\n  }\n\n  effect(() => {\n    if (canvas) {\n      render()\n    }\n  })\n\n  return (\n    <canvas\n      ref={(el: HTMLCanvasElement) => {\n        canvas = el\n        ctx = el.getContext('2d')\n        if (ref) ref(el)\n        render()\n      }}\n      width={width}\n      height={height}\n      style={style}\n    />\n  )\n}\n\nfunction getValue(val: any): any {\n  if (isReactive(val)) {\n    return val.valueOf?.() ?? val\n  }\n  return val\n}\n\nfunction drawNode(ctx: CanvasRenderingContext2D, node: CanvasDrawNode) {\n  const { type, props } = node\n\n  // Apply opacity\n  const opacity = getValue(props.opacity)\n  if (opacity !== undefined) {\n    ctx.globalAlpha = opacity\n  }\n\n  switch (type) {\n    case 'rect': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const w = getValue(props.width)\n      const h = getValue(props.height)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fillRect(x, y, w, h)\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.strokeRect(x, y, w, h)\n      }\n      break\n    }\n\n    case 'circle': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const radius = getValue(props.radius)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      ctx.beginPath()\n      ctx.arc(x, y, radius, 0, Math.PI * 2)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill()\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke()\n      }\n      break\n    }\n\n    case 'arc': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const radius = getValue(props.radius)\n      const startAngle = getValue(props.startAngle)\n      const endAngle = getValue(props.endAngle)\n      const counterclockwise = getValue(props.counterclockwise) || false\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      ctx.beginPath()\n      ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill()\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke()\n      }\n      break\n    }\n\n    case 'line': {\n      const x1 = getValue(props.x1)\n      const y1 = getValue(props.y1)\n      const x2 = getValue(props.x2)\n      const y2 = getValue(props.y2)\n      const stroke = getValue(props.stroke) || 'black'\n      const strokeWidth = getValue(props.strokeWidth) || 1\n\n      ctx.beginPath()\n      ctx.moveTo(x1, y1)\n      ctx.lineTo(x2, y2)\n      ctx.strokeStyle = stroke\n      ctx.lineWidth = strokeWidth\n      ctx.stroke()\n      break\n    }\n\n    case 'text': {\n      const x = getValue(props.x)\n      const y = getValue(props.y)\n      const text = getValue(props.text)\n      const fill = getValue(props.fill) || 'black'\n      const fontSize = getValue(props.fontSize) || 16\n      const fontFamily = getValue(props.fontFamily) || 'sans-serif'\n      const fontWeight = getValue(props.fontWeight) || 'normal'\n      const textAlign = getValue(props.textAlign) || 'left'\n\n      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`\n      ctx.textAlign = textAlign as CanvasTextAlign\n      ctx.fillStyle = fill\n      ctx.fillText(text, x, y)\n      break\n    }\n\n    case 'path': {\n      const d = getValue(props.d)\n      const fill = getValue(props.fill)\n      const stroke = getValue(props.stroke)\n      const strokeWidth = getValue(props.strokeWidth)\n\n      // Parse SVG path data\n      const path = new Path2D(d)\n\n      if (fill) {\n        ctx.fillStyle = fill\n        ctx.fill(path)\n      }\n\n      if (stroke) {\n        ctx.strokeStyle = stroke\n        if (strokeWidth) ctx.lineWidth = strokeWidth\n        ctx.stroke(path)\n      }\n      break\n    }\n  }\n\n  // Reset opacity\n  if (opacity !== undefined) {\n    ctx.globalAlpha = 1\n  }\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawRectProps } from '../types'\n\nexport type { DrawRectProps }\n\nexport function DrawRect(props: DrawRectProps) {\n  effect(() => {\n    queueDraw({\n      type: 'rect',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawCircleProps } from '../types'\n\nexport type { DrawCircleProps }\n\nexport function DrawCircle(props: DrawCircleProps) {\n  effect(() => {\n    queueDraw({\n      type: 'circle',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawArcProps } from '../types'\n\nexport type { DrawArcProps }\n\nexport function DrawArc(props: DrawArcProps) {\n  effect(() => {\n    queueDraw({\n      type: 'arc',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawLineProps } from '../types'\n\nexport type { DrawLineProps }\n\nexport function DrawLine(props: DrawLineProps) {\n  effect(() => {\n    queueDraw({\n      type: 'line',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawTextProps } from '../types'\n\nexport type { DrawTextProps }\n\nexport function DrawText(props: DrawTextProps) {\n  effect(() => {\n    queueDraw({\n      type: 'text',\n      props\n    })\n  })\n\n  return null\n}\n","import { effect } from '../../core/lifecycle'\nimport { queueDraw } from '../Canvas'\nimport type { DrawPathProps } from '../types'\n\nexport type { DrawPathProps }\n\nexport function DrawPath(props: DrawPathProps) {\n  effect(() => {\n    queueDraw({\n      type: 'path',\n      props\n    })\n  })\n\n  return null\n}\n"]}

package/dist/canvas.mjs

@@ -1,2 +1,2 @@
-import {a as a$1}from'./chunk-S6WF3XNF.mjs';import {b}from'./chunk-CPJRQL2C.mjs';import'./chunk-44RZHCII.mjs';import {a}from'./chunk-ZCO4NIGC.mjs';var h=[];function u(e){h.push(e);}function D(e){let{width:p,height:b,children:r,style:m,ref:a$2}=e,i,o=null,s=()=>{!i||!o||(o.clearRect(0,0,p,b),h.length=0,Array.isArray(r)?r.forEach(n=>{typeof n=="function"&&n();}):typeof r=="function"&&r(),h.forEach(n=>{P(o,n);}),null);};return a$1(()=>{i&&s();}),a("canvas",{ref:n=>{i=n,o=n.getContext("2d"),a$2&&a$2(n),s();},width:p,height:b,style:m})}function t(e){return b(e)?e.valueOf?.()??e:e}function P(e,p){let{type:b,props:r}=p,m=t(r.opacity);switch(m!==void 0&&(e.globalAlpha=m),b){case "rect":{let a=t(r.x),i=t(r.y),o=t(r.width),s=t(r.height),n=t(r.fill),f=t(r.stroke),c=t(r.strokeWidth);n&&(e.fillStyle=n,e.fillRect(a,i,o,s)),f&&(e.strokeStyle=f,c&&(e.lineWidth=c),e.strokeRect(a,i,o,s));break}case "circle":{let a=t(r.x),i=t(r.y),o=t(r.radius),s=t(r.fill),n=t(r.stroke),f=t(r.strokeWidth);e.beginPath(),e.arc(a,i,o,0,Math.PI*2),s&&(e.fillStyle=s,e.fill()),n&&(e.strokeStyle=n,f&&(e.lineWidth=f),e.stroke());break}case "arc":{let a=t(r.x),i=t(r.y),o=t(r.radius),s=t(r.startAngle),n=t(r.endAngle),f=t(r.counterclockwise)||false,c=t(r.fill),y=t(r.stroke),g=t(r.strokeWidth);e.beginPath(),e.arc(a,i,o,s,n,f),c&&(e.fillStyle=c,e.fill()),y&&(e.strokeStyle=y,g&&(e.lineWidth=g),e.stroke());break}case "line":{let a=t(r.x1),i=t(r.y1),o=t(r.x2),s=t(r.y2),n=t(r.stroke)||"black",f=t(r.strokeWidth)||1;e.beginPath(),e.moveTo(a,i),e.lineTo(o,s),e.strokeStyle=n,e.lineWidth=f,e.stroke();break}case "text":{let a=t(r.x),i=t(r.y),o=t(r.text),s=t(r.fill)||"black",n=t(r.fontSize)||16,f=t(r.fontFamily)||"sans-serif",c=t(r.fontWeight)||"normal",y=t(r.textAlign)||"left";e.font=`${c} ${n}px ${f}`,e.textAlign=y,e.fillStyle=s,e.fillText(o,a,i);break}case "path":{let a=t(r.d),i=t(r.fill),o=t(r.stroke),s=t(r.strokeWidth),n=new Path2D(a);i&&(e.fillStyle=i,e.fill(n)),o&&(e.strokeStyle=o,s&&(e.lineWidth=s),e.stroke(n));break}}m!==void 0&&(e.globalAlpha=1);}function x(e){return a$1(()=>{u({type:"rect",props:e});}),null}function C(e){return a$1(()=>{u({type:"circle",props:e});}),null}function W(e){return a$1(()=>{u({type:"arc",props:e});}),null}function v(e){return a$1(()=>{u({type:"line",props:e});}),null}function A(e){return a$1(()=>{u({type:"text",props:e});}),null}function S(e){return a$1(()=>{u({type:"path",props:e});}),null}export{D as Canvas,W as DrawArc,C as DrawCircle,v as DrawLine,S as DrawPath,x as DrawRect,A as DrawText};//# sourceMappingURL=canvas.mjs.map
+import {b as b$1}from'./chunk-JY6CE6RN.mjs';import {e}from'./chunk-IWFEXW4F.mjs';import'./chunk-5PNH2ARD.mjs';import {a}from'./chunk-ZCO4NIGC.mjs';var D=[];function l(t){D.push(t);}function C(t){let{width:u,height:w,children:e$1,style:y,ref:a$1}=t,s,n=null,i=()=>{!s||!n||(n.clearRect(0,0,u,w),D.length=0,Array.isArray(e$1)?e$1.forEach(o=>{typeof o=="function"&&o();}):typeof e$1=="function"&&e$1(),D.forEach(o=>{g(n,o);}),null);};return e(()=>{s&&i();}),a("canvas",{ref:o=>{s=o,n=o.getContext("2d"),a$1&&a$1(o),i();},width:u,height:w,style:y})}function r(t){return b$1(t)?t.valueOf?.()??t:t}function g(t,u){let{type:w,props:e}=u,y=r(e.opacity);switch(y!==void 0&&(t.globalAlpha=y),w){case "rect":{let a=r(e.x),s=r(e.y),n=r(e.width),i=r(e.height),o=r(e.fill),f=r(e.stroke),c=r(e.strokeWidth);o&&(t.fillStyle=o,t.fillRect(a,s,n,i)),f&&(t.strokeStyle=f,c&&(t.lineWidth=c),t.strokeRect(a,s,n,i));break}case "circle":{let a=r(e.x),s=r(e.y),n=r(e.radius),i=r(e.fill),o=r(e.stroke),f=r(e.strokeWidth);t.beginPath(),t.arc(a,s,n,0,Math.PI*2),i&&(t.fillStyle=i,t.fill()),o&&(t.strokeStyle=o,f&&(t.lineWidth=f),t.stroke());break}case "arc":{let a=r(e.x),s=r(e.y),n=r(e.radius),i=r(e.startAngle),o=r(e.endAngle),f=r(e.counterclockwise)||false,c=r(e.fill),m=r(e.stroke),h=r(e.strokeWidth);t.beginPath(),t.arc(a,s,n,i,o,f),c&&(t.fillStyle=c,t.fill()),m&&(t.strokeStyle=m,h&&(t.lineWidth=h),t.stroke());break}case "line":{let a=r(e.x1),s=r(e.y1),n=r(e.x2),i=r(e.y2),o=r(e.stroke)||"black",f=r(e.strokeWidth)||1;t.beginPath(),t.moveTo(a,s),t.lineTo(n,i),t.strokeStyle=o,t.lineWidth=f,t.stroke();break}case "text":{let a=r(e.x),s=r(e.y),n=r(e.text),i=r(e.fill)||"black",o=r(e.fontSize)||16,f=r(e.fontFamily)||"sans-serif",c=r(e.fontWeight)||"normal",m=r(e.textAlign)||"left";t.font=`${c} ${o}px ${f}`,t.textAlign=m,t.fillStyle=i,t.fillText(n,a,s);break}case "path":{let a=r(e.d),s=r(e.fill),n=r(e.stroke),i=r(e.strokeWidth),o=new Path2D(a);s&&(t.fillStyle=s,t.fill(o)),n&&(t.strokeStyle=n,i&&(t.lineWidth=i),t.stroke(o));break}}y!==void 0&&(t.globalAlpha=1);}function x(t){return e(()=>{l({type:"rect",props:t});}),null}function v(t){return e(()=>{l({type:"circle",props:t});}),null}function A(t){return e(()=>{l({type:"arc",props:t});}),null}function W(t){return e(()=>{l({type:"line",props:t});}),null}function b(t){return e(()=>{l({type:"text",props:t});}),null}function R(t){return e(()=>{l({type:"path",props:t});}),null}export{C as Canvas,A as DrawArc,v as DrawCircle,W as DrawLine,R as DrawPath,x as DrawRect,b as DrawText};//# sourceMappingURL=canvas.mjs.map
 //# sourceMappingURL=canvas.mjs.map