@davincidreams/dynamic-canvas-react 0.1.0

package/README.md

@@ -0,0 +1,399 @@
+# @dynamic-canvas/react
+
+A modular, reusable dynamic canvas component for React that renders conversation-driven visuals alongside 3D avatars in chat applications.
+
+## Features
+
+- **Multiple Content Types**: Support for charts, timelines, code, documents, and custom components
+- **Theme System**: Built-in light/dark themes with full customization options
+- **Content Analysis**: Automatic content type detection from text
+- **Extensible**: Easy to add new renderers and themes
+- **Type Safe**: Full TypeScript support
+- **Responsive**: Works on all screen sizes
+
+## Installation
+
+```bash
+npm install @dynamic-canvas/react
+# or
+yarn add @dynamic-canvas/react
+# or
+pnpm add @dynamic-canvas/react
+```
+
+## Quick Start
+
+```tsx
+import { CanvasProvider, useCanvas, themes } from '@dynamic-canvas/react';
+
+function App() {
+  const { content, setContent } = useCanvas();
+
+  return (
+    <CanvasProvider theme={themes.dark}>
+      <div className="flex h-screen">
+        <div className="w-3/4">
+          {/* Your main app content */}
+        </div>
+        <CanvasContainer theme={themes.dark}>
+          {content && (
+            <ContentRenderer content={content} theme={themes.dark} />
+          )}
+        </CanvasContainer>
+      </div>
+    </CanvasProvider>
+  );
+}
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { CanvasProvider, useCanvas, themes, ChartRenderer } from '@dynamic-canvas/react';
+
+function App() {
+  const { content, setContent } = useCanvas();
+
+  const handleResponse = (response: string) => {
+    const analyzed = ContentAnalyzer.analyze(response);
+    setContent(analyzed);
+  };
+
+  return (
+    <CanvasProvider theme={themes.dark}>
+      <div className="flex h-screen">
+        <div className="w-3/4">
+          {/* Chat interface */}
+        </div>
+        <div className="w-1/3">
+          {content && (
+            <ChartRenderer content={content} theme={themes.dark} />
+          )}
+        </div>
+      </div>
+    </CanvasProvider>
+  );
+}
+```
+
+### Chart Content
+
+```tsx
+const chartContent = {
+  type: 'chart',
+  chartType: 'bar',
+  data: {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    values: [10, 25, 18, 30, 22]
+  },
+  options: {
+    colors: ['#0ea5e9', '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e']
+  }
+};
+
+setContent(chartContent);
+```
+
+### Timeline Content
+
+```tsx
+const timelineContent = {
+  type: 'timeline',
+  events: [
+    {
+      date: '2024-01-15',
+      title: 'Project Started',
+      description: 'Initial planning and requirements gathering'
+    },
+    {
+      date: '2024-02-01',
+      title: 'Development Phase',
+      description: 'Core features implementation'
+    }
+  ]
+};
+```
+
+### Code Content
+
+```tsx
+const codeContent = {
+  type: 'code',
+  code: 'console.log("Hello, World!");',
+  language: 'javascript',
+  filename: 'app.js'
+};
+```
+
+### Document Content
+
+```tsx
+const documentContent = {
+  type: 'document',
+  content: '# Welcome\n\nThis is a document rendered in the canvas.',
+  format: 'markdown'
+};
+```
+
+## API Reference
+
+### CanvasProvider
+
+Provides context for the canvas component.
+
+```tsx
+<CanvasProvider
+  initialTheme={themes.dark}
+  initialThemeMode="dark"
+  initialContent={initialContent}
+>
+  {children}
+</CanvasProvider>
+```
+
+**Props:**
+- `initialTheme`: Initial theme object (default: `defaultTheme`)
+- `initialThemeMode`: Initial theme mode ('light' | 'dark' | 'system')
+- `initialContent`: Initial canvas content
+
+### useCanvas
+
+Hook for accessing canvas state.
+
+```tsx
+const { content, setContent, theme, setTheme } = useCanvas();
+```
+
+**Returns:**
+- `content`: Current canvas content
+- `setContent`: Function to set content
+- `theme`: Current theme
+- `setTheme`: Function to set theme
+
+### useCanvasContent
+
+Hook specifically for content management.
+
+```tsx
+const { content, setContent } = useCanvasContent();
+```
+
+### useCanvasLayout
+
+Hook for layout management.
+
+```tsx
+const { layout, widthRatio, setLayout, setWidthRatio } = useCanvasLayout();
+```
+
+### Renderers
+
+#### ChartRenderer
+
+```tsx
+<ChartRenderer
+  content={chartContent}
+  theme={themes.dark}
+/>
+```
+
+#### TimelineRenderer
+
+```tsx
+<TimelineRenderer
+  content={timelineContent}
+  theme={themes.dark}
+/>
+```
+
+#### CodeRenderer
+
+```tsx
+<CodeRenderer
+  content={codeContent}
+  theme={themes.dark}
+/>
+```
+
+#### DocumentRenderer
+
+```tsx
+<DocumentRenderer
+  content={documentContent}
+  theme={themes.dark}
+/>
+```
+
+#### CustomRenderer
+
+```tsx
+const CustomComponent = ({ data }) => <div>{data}</div>;
+
+const customContent = {
+  type: 'custom',
+  component: CustomComponent,
+  props: { data: 'Hello' }
+};
+
+<CustomRenderer content={customContent} theme={themes.dark} />
+```
+
+## Theming
+
+### Default Themes
+
+```tsx
+import { themes } from '@dynamic-canvas/react';
+
+// Use built-in themes
+<CanvasProvider theme={themes.light}>
+  {/* Light theme */}
+</CanvasProvider>
+
+<CanvasProvider theme={themes.dark}>
+  {/* Dark theme */}
+</CanvasProvider>
+```
+
+### Custom Theme
+
+```tsx
+const customTheme = {
+  colors: {
+    background: '#ffffff',
+    surface: '#f8fafc',
+    primary: '#0ea5e9',
+    secondary: '#6366f1',
+    text: '#0f172a',
+    muted: '#64748b',
+    border: '#e2e8f0',
+    highlight: '#f1f5f9'
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px'
+  },
+  typography: {
+    font: 'Inter, sans-serif',
+    sizes: {
+      xs: '12px',
+      sm: '14px',
+      md: '16px',
+      lg: '18px',
+      xl: '20px'
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    }
+  },
+  borderRadius: {
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px'
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(0,0,0,0.05)',
+    md: '0 4px 6px rgba(0,0,0,0.1)',
+    lg: '0 10px 15px rgba(0,0,0,0.1)'
+  }
+};
+
+<CanvasProvider theme={customTheme}>
+  {/* Custom theme */}
+</CanvasProvider>
+```
+
+## Content Analysis
+
+The `ContentAnalyzer` class automatically detects content types:
+
+```tsx
+import { ContentAnalyzer } from '@dynamic-canvas/react';
+
+const response = "Sales: 50%, Growth: 25%";
+const analyzed = ContentAnalyzer.analyze(response);
+// Returns: { type: 'chart', data: { labels: ['50', '25'], values: [] } }
+```
+
+## Content Types
+
+| Type | Description | Renderer |
+|------|-------------|----------|
+| `chart` | Data visualizations | `ChartRenderer` |
+| `timeline` | Timeline events | `TimelineRenderer` |
+| `code` | Code snippets | `CodeRenderer` |
+| `document` | Documents | `DocumentRenderer` |
+| `custom` | Custom components | `CustomRenderer` |
+
+## Dependencies
+
+**Core Dependencies:**
+- `react`: ^18.0.0
+- `react-dom`: ^18.0.0
+- `framer-motion`: ^11.0.0
+- `lucide-react`: ^0.400.0
+- `zustand`: ^5.0.0
+
+**Optional Dependencies:**
+- `d3`: ^7.9.0 (for enhanced charts)
+- `react-syntax-highlighter`: ^15.5.0 (for code highlighting)
+- `react-pdf`: ^7.7.0 (for PDF rendering)
+- `markdown-it`: ^14.0.0 (for markdown rendering)
+
+## Extending
+
+### Adding a New Renderer
+
+```tsx
+// src/renderers/VideoRenderer.tsx
+import React from 'react';
+import type { Theme } from '../types';
+
+interface VideoRendererProps {
+  content: any;
+  theme: Theme;
+}
+
+export const VideoRenderer: React.FC<VideoRendererProps> = ({ content, theme }) => {
+  return (
+    <div style={{ color: theme.colors.text }}>
+      <video src={content.url} controls />
+    </div>
+  );
+};
+
+// Export and register
+export { VideoRenderer };
+```
+
+### Adding a New Theme
+
+```tsx
+// src/themes/customTheme.ts
+import type { Theme } from '../types';
+import { defaultTheme } from './defaultTheme';
+
+export const customTheme: Theme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    primary: '#ff6b6b'
+  }
+};
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/dynamic-canvas.cjs.js

@@ -0,0 +1,65 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),Oe=require("lucide-react");var te={exports:{}},V={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Pe;function pr(){if(Pe)return V;Pe=1;var i=j,n=Symbol.for("react.element"),o=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,f=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,g={key:!0,ref:!0,__self:!0,__source:!0};function x(y,h,T){var p,R={},O=null,N=null;T!==void 0&&(O=""+T),h.key!==void 0&&(O=""+h.key),h.ref!==void 0&&(N=h.ref);for(p in h)s.call(h,p)&&!g.hasOwnProperty(p)&&(R[p]=h[p]);if(y&&y.defaultProps)for(p in h=y.defaultProps,h)R[p]===void 0&&(R[p]=h[p]);return{$$typeof:n,type:y,key:O,ref:N,props:R,_owner:f.current}}return V.Fragment=o,V.jsx=x,V.jsxs=x,V}var U={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ke;function hr(){return ke||(ke=1,process.env.NODE_ENV!=="production"&&function(){var i=j,n=Symbol.for("react.element"),o=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),x=Symbol.for("react.provider"),y=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),T=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),N=Symbol.for("react.offscreen"),D=Symbol.iterator,A="@@iterator";function P(e){if(e===null||typeof e!="object")return null;var r=D&&e[D]||e[A];return typeof r=="function"?r:null}var w=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function E(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),a=1;a<r;a++)t[a-1]=arguments[a];De("error",e,t)}}function De(e,r,t){{var a=w.ReactDebugCurrentFrame,d=a.getStackAddendum();d!==""&&(r+="%s",t=t.concat([d]));var v=t.map(function(u){return String(u)});v.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,v)}}var $e=!1,Ae=!1,Fe=!1,Ie=!1,We=!1,ae;ae=Symbol.for("react.module.reference");function Me(e){return!!(typeof e=="string"||typeof e=="function"||e===s||e===g||We||e===f||e===T||e===p||Ie||e===N||$e||Ae||Fe||typeof e=="object"&&e!==null&&(e.$$typeof===O||e.$$typeof===R||e.$$typeof===x||e.$$typeof===y||e.$$typeof===h||e.$$typeof===ae||e.getModuleId!==void 0))}function Le(e,r,t){var a=e.displayName;if(a)return a;var d=r.displayName||r.name||"";return d!==""?t+"("+d+")":t}function oe(e){return e.displayName||"Context"}function $(e){if(e==null)return null;if(typeof e.tag=="number"&&E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case s:return"Fragment";case o:return"Portal";case g:return"Profiler";case f:return"StrictMode";case T:return"Suspense";case p:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case y:var r=e;return oe(r)+".Consumer";case x:var t=e;return oe(t._context)+".Provider";case h:return Le(e,e.render,"ForwardRef");case R:var a=e.displayName||null;return a!==null?a:$(e.type)||"Memo";case O:{var d=e,v=d._payload,u=d._init;try{return $(u(v))}catch{return null}}}return null}var F=Object.assign,L=0,se,ie,ce,le,ue,fe,de;function ve(){}ve.__reactDisabledLog=!0;function Ye(){{if(L===0){se=console.log,ie=console.info,ce=console.warn,le=console.error,ue=console.group,fe=console.groupCollapsed,de=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ve,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}L++}}function Ve(){{if(L--,L===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:se}),info:F({},e,{value:ie}),warn:F({},e,{value:ce}),error:F({},e,{value:le}),group:F({},e,{value:ue}),groupCollapsed:F({},e,{value:fe}),groupEnd:F({},e,{value:de})})}L<0&&E("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var K=w.ReactCurrentDispatcher,H;function z(e,r,t){{if(H===void 0)try{throw Error()}catch(d){var a=d.stack.trim().match(/\n( *(at )?)/);H=a&&a[1]||""}return`
+`+H+e}}var G=!1,q;{var Ue=typeof WeakMap=="function"?WeakMap:Map;q=new Ue}function pe(e,r){if(!e||G)return"";{var t=q.get(e);if(t!==void 0)return t}var a;G=!0;var d=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var v;v=K.current,K.current=null,Ye();try{if(r){var u=function(){throw Error()};if(Object.defineProperty(u.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(u,[])}catch(_){a=_}Reflect.construct(e,[],u)}else{try{u.call()}catch(_){a=_}e.call(u.prototype)}}else{try{throw Error()}catch(_){a=_}e()}}catch(_){if(_&&a&&typeof _.stack=="string"){for(var c=_.stack.split(`
+`),C=a.stack.split(`
+`),m=c.length-1,b=C.length-1;m>=1&&b>=0&&c[m]!==C[b];)b--;for(;m>=1&&b>=0;m--,b--)if(c[m]!==C[b]){if(m!==1||b!==1)do if(m--,b--,b<0||c[m]!==C[b]){var S=`
+`+c[m].replace(" at new "," at ");return e.displayName&&S.includes("<anonymous>")&&(S=S.replace("<anonymous>",e.displayName)),typeof e=="function"&&q.set(e,S),S}while(m>=1&&b>=0);break}}}finally{G=!1,K.current=v,Ve(),Error.prepareStackTrace=d}var M=e?e.displayName||e.name:"",I=M?z(M):"";return typeof e=="function"&&q.set(e,I),I}function ze(e,r,t){return pe(e,!1)}function qe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function B(e,r,t){if(e==null)return"";if(typeof e=="function")return pe(e,qe(e));if(typeof e=="string")return z(e);switch(e){case T:return z("Suspense");case p:return z("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case h:return ze(e.render);case R:return B(e.type,r,t);case O:{var a=e,d=a._payload,v=a._init;try{return B(v(d),r,t)}catch{}}}return""}var Y=Object.prototype.hasOwnProperty,he={},me=w.ReactDebugCurrentFrame;function J(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);me.setExtraStackFrame(t)}else me.setExtraStackFrame(null)}function Be(e,r,t,a,d){{var v=Function.call.bind(Y);for(var u in e)if(v(e,u)){var c=void 0;try{if(typeof e[u]!="function"){var C=Error((a||"React class")+": "+t+" type `"+u+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[u]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw C.name="Invariant Violation",C}c=e[u](r,u,a,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(m){c=m}c&&!(c instanceof Error)&&(J(d),E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",a||"React class",t,u,typeof c),J(null)),c instanceof Error&&!(c.message in he)&&(he[c.message]=!0,J(d),E("Failed %s type: %s",t,c.message),J(null))}}}var Je=Array.isArray;function X(e){return Je(e)}function Ke(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function He(e){try{return be(e),!1}catch{return!0}}function be(e){return""+e}function ge(e){if(He(e))return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ke(e)),be(e)}var ye=w.ReactCurrentOwner,Ge={key:!0,ref:!0,__self:!0,__source:!0},xe,Re;function Xe(e){if(Y.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Qe(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Ze(e,r){typeof e.ref=="string"&&ye.current}function er(e,r){{var t=function(){xe||(xe=!0,E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function rr(e,r){{var t=function(){Re||(Re=!0,E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var tr=function(e,r,t,a,d,v,u){var c={$$typeof:n,type:e,key:r,ref:t,props:u,_owner:v};return c._store={},Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:d}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function nr(e,r,t,a,d){{var v,u={},c=null,C=null;t!==void 0&&(ge(t),c=""+t),Qe(r)&&(ge(r.key),c=""+r.key),Xe(r)&&(C=r.ref,Ze(r,d));for(v in r)Y.call(r,v)&&!Ge.hasOwnProperty(v)&&(u[v]=r[v]);if(e&&e.defaultProps){var m=e.defaultProps;for(v in m)u[v]===void 0&&(u[v]=m[v])}if(c||C){var b=typeof e=="function"?e.displayName||e.name||"Unknown":e;c&&er(u,b),C&&rr(u,b)}return tr(e,c,C,d,a,ye.current,u)}}var Q=w.ReactCurrentOwner,Ee=w.ReactDebugCurrentFrame;function W(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);Ee.setExtraStackFrame(t)}else Ee.setExtraStackFrame(null)}var Z;Z=!1;function ee(e){return typeof e=="object"&&e!==null&&e.$$typeof===n}function Ce(){{if(Q.current){var e=$(Q.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function ar(e){return""}var _e={};function or(e){{var r=Ce();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function Te(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=or(r);if(_e[t])return;_e[t]=!0;var a="";e&&e._owner&&e._owner!==Q.current&&(a=" It was passed a child from "+$(e._owner.type)+"."),W(e),E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,a),W(null)}}function je(e,r){{if(typeof e!="object")return;if(X(e))for(var t=0;t<e.length;t++){var a=e[t];ee(a)&&Te(a,r)}else if(ee(e))e._store&&(e._store.validated=!0);else if(e){var d=P(e);if(typeof d=="function"&&d!==e.entries)for(var v=d.call(e),u;!(u=v.next()).done;)ee(u.value)&&Te(u.value,r)}}}function sr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===h||r.$$typeof===R))t=r.propTypes;else return;if(t){var a=$(r);Be(t,e.props,"prop",a,e)}else if(r.PropTypes!==void 0&&!Z){Z=!0;var d=$(r);E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",d||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ir(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var a=r[t];if(a!=="children"&&a!=="key"){W(e),E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),W(null);break}}e.ref!==null&&(W(e),E("Invalid attribute `ref` supplied to `React.Fragment`."),W(null))}}var we={};function Se(e,r,t,a,d,v){{var u=Me(e);if(!u){var c="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(c+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var C=ar();C?c+=C:c+=Ce();var m;e===null?m="null":X(e)?m="array":e!==void 0&&e.$$typeof===n?(m="<"+($(e.type)||"Unknown")+" />",c=" Did you accidentally export a JSX literal instead of a component?"):m=typeof e,E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",m,c)}var b=nr(e,r,t,d,v);if(b==null)return b;if(u){var S=r.children;if(S!==void 0)if(a)if(X(S)){for(var M=0;M<S.length;M++)je(S[M],e);Object.freeze&&Object.freeze(S)}else E("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else je(S,e)}if(Y.call(r,"key")){var I=$(e),_=Object.keys(r).filter(function(vr){return vr!=="key"}),re=_.length>0?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}";if(!we[I+re]){var dr=_.length>0?"{"+_.join(": ..., ")+": ...}":"{}";E(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,re,I,dr,I),we[I+re]=!0}}return e===s?ir(b):sr(b),b}}function cr(e,r,t){return Se(e,r,t,!0)}function lr(e,r,t){return Se(e,r,t,!1)}var ur=lr,fr=cr;U.Fragment=s,U.jsx=ur,U.jsxs=fr}()),U}process.env.NODE_ENV==="production"?te.exports=pr():te.exports=hr();var l=te.exports;const k={colors:{background:"#ffffff",surface:"#f8fafc",primary:"#0ea5e9",secondary:"#6366f1",text:"#0f172a",muted:"#64748b",border:"#e2e8f0",highlight:"#f1f5f9"},spacing:{xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px"},typography:{font:"Inter, system-ui, -apple-system, sans-serif",sizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px"},weights:{normal:400,medium:500,bold:700}},borderRadius:{sm:"4px",md:"8px",lg:"12px",xl:"16px"},shadows:{sm:"0 1px 2px rgba(0, 0, 0, 0.05)",md:"0 4px 6px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px rgba(0, 0, 0, 0.1)"}},mr={...k,colors:{...k.colors,background:"#ffffff",surface:"#f8fafc",text:"#0f172a",muted:"#64748b",border:"#e2e8f0",highlight:"#f1f5f9"}},br={...k,colors:{...k.colors,background:"#0f172a",surface:"#1e293b",text:"#f8fafc",muted:"#94a3b8",border:"#334155",highlight:"#1e293b"}},Ne=j.createContext(void 0),gr=({children:i,initialTheme:n=k,initialThemeMode:o="light",initialContent:s})=>{const[f,g]=j.useState(n),[x,y]=j.useState(o),[h,T]=j.useState(s),[p,R]=j.useState("side-by-side"),[O,N]=j.useState(.4);j.useEffect(()=>{const A=()=>{const P=x==="dark"||x==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches;g(P?{...k,colors:{...k.colors,background:"#0f172a",surface:"#1e293b",text:"#f8fafc",muted:"#94a3b8",border:"#334155",highlight:"#1e293b"}}:{...k,colors:{...k.colors,background:"#ffffff",surface:"#f8fafc",text:"#0f172a",muted:"#64748b",border:"#e2e8f0",highlight:"#f1f5f9"}})};if(A(),x==="system"){const P=window.matchMedia("(prefers-color-scheme: dark)"),w=()=>A();return P.addEventListener("change",w),()=>P.removeEventListener("change",w)}},[x]);const D={theme:f,setTheme:g,themeMode:x,setThemeMode:y};return l.jsx(Ne.Provider,{value:D,children:i})},ne=()=>{const i=j.useContext(Ne);if(i===void 0)throw new Error("useCanvas must be used within a CanvasProvider");return i},yr=()=>{const{content:i,setCanvasContent:n}=ne();return{content:i,setContent:n}},xr=()=>{const{layout:i,widthRatio:n,setCanvasLayout:o,setCanvasWidthRatio:s}=ne();return{layout:i,widthRatio:n,setLayout:o,setWidthRatio:s}},Rr=({children:i,theme:n,className:o=""})=>{const s={container:`
+      w-full h-full
+      bg-[${n.colors.background}]
+      border-[${n.colors.border}]
+      rounded-xl
+      overflow-hidden
+      ${o}
+    `,header:`
+      px-6 py-4
+      border-b-[1px]
+      border-[${n.colors.border}]
+      bg-[${n.colors.surface}]
+    `,toolbar:`
+      flex items-center justify-between
+      px-6 py-3
+      border-b-[1px]
+      border-[${n.colors.border}]
+      bg-[${n.colors.surface}]
+    `};return l.jsx("div",{className:s.container,children:i})},Er=({title:i,description:n,theme:o})=>l.jsxs("div",{className:`
+      px-6 py-4
+      border-b-[1px]
+      border-[${o.colors.border}]
+      bg-[${o.colors.surface}]
+    `,children:[i&&l.jsx("h2",{className:`text-xl font-bold text-[${o.colors.text}] mb-1`,children:i}),n&&l.jsx("p",{className:`text-sm text-[${o.colors.muted}]`,children:n})]}),Cr=({children:i,theme:n})=>l.jsx("div",{className:`
+      flex-1
+      overflow-y-auto
+      p-6
+      bg-[${n.colors.background}]
+    `,children:i}),_r=({children:i,theme:n})=>l.jsx("div",{className:`
+      flex items-center justify-between
+      px-6 py-3
+      border-b-[1px]
+      border-[${n.colors.border}]
+      bg-[${n.colors.surface}]
+    `,children:i}),Tr=({content:i,theme:n})=>{const o=j.useRef(null);return j.useEffect(()=>{if(!o.current)return;const s=o.current,f=s.getContext("2d");if(!f)return;const{data:g,options:x={}}=i,{colors:y=[]}=x,h=s.width,T=s.height,p=40,R=(h-p*2)/g.labels.length-10,O=Math.max(...g.values,1);g.values.forEach((N,D)=>{const A=N/O*(T-p*2),P=p+D*(R+10),w=T-p-A;f.fillStyle=y[D%y.length]||n.colors.primary,f.fillRect(P,w,R,A),f.fillStyle=n.colors.text,f.font="12px sans-serif",f.textAlign="center",f.fillText(g.labels[D],P+R/2,T-p+20),f.fillStyle=n.colors.muted,f.fillText(N.toString(),P+R/2,w-10)}),f.strokeStyle=n.colors.border,f.lineWidth=1,f.beginPath(),f.moveTo(p,p),f.lineTo(p,T-p),f.lineTo(h-p,T-p),f.stroke()},[i,n]),l.jsx("div",{className:"chart-renderer",children:l.jsx("canvas",{ref:o,width:600,height:300,style:{width:"100%",height:"auto"}})})},jr=({content:i,theme:n})=>{const{events:o,options:s={}}=i,{orientation:f="horizontal",compact:g=!1}=s,x=f==="horizontal";return l.jsx("div",{className:"timeline-renderer",children:l.jsx("div",{className:`timeline ${x?"timeline-horizontal":"timeline-vertical"}`,children:o.map((y,h)=>l.jsxs("div",{className:"timeline-item",children:[l.jsx("div",{className:"timeline-marker",children:l.jsx("div",{className:"marker-dot"})}),l.jsxs("div",{className:"timeline-content",children:[l.jsx("div",{className:"timeline-date",children:y.date}),l.jsx("div",{className:"timeline-title",children:y.title}),y.description&&l.jsx("div",{className:"timeline-description",children:y.description})]})]},h))})})},wr=({content:i,theme:n})=>{const[o,s]=j.useState(!1),f=()=>{navigator.clipboard.writeText(i.code),s(!0),setTimeout(()=>s(!1),2e3)};return l.jsxs("div",{className:"code-renderer",children:[l.jsxs("div",{className:"code-header",children:[l.jsx("span",{className:"code-language",children:i.language}),i.filename&&l.jsx("span",{className:"code-filename",children:i.filename}),l.jsx("button",{onClick:f,className:"code-copy-button",style:{color:n.colors.primary},children:o?l.jsx(Oe.Check,{size:16}):l.jsx(Oe.Copy,{size:16})})]}),l.jsx("pre",{className:"code-content",children:l.jsx("code",{children:i.code})})]})},Sr=({content:i,theme:n})=>l.jsx("div",{className:"document-renderer",children:l.jsxs("div",{className:"document-content",children:[l.jsx("h3",{className:"document-title",style:{color:n.colors.text},children:i.title}),l.jsx("div",{className:"document-body",style:{color:n.colors.text},children:i.content})]})}),Or=({content:i,theme:n})=>{const{component:o,props:s={}}=i;return o?l.jsx("div",{className:"custom-renderer",style:{color:n.colors.text},children:l.jsx(o,{...s})}):l.jsx("div",{className:"custom-renderer",style:{color:n.colors.text},children:l.jsx("p",{children:"No custom component provided"})})};class Pr{static detectType(n){const o=n.trim();return o.includes("```")||/[\n\s]*\w+\s*=\s*\{/.test(o)?"code":o.includes("#")||o.includes("##")?"document":/\d{4}-\d{2}-\d{2}/.test(o)?"timeline":/\d+\s*%|\[\s*\d+\s*,\s*\d+\s*\]/.test(o)?"chart":"custom"}static extractChartData(n){const o=n.match(/-?\d+(\.\d+)?/g);if(!o)return null;const s=o.map(Number),f=s.slice(0,Math.ceil(s.length/2)),g=s.slice(Math.ceil(s.length/2));return{labels:f,values:g}}static extractTimelineEvents(n){const o=n.split(`
+`),s=[];return o.forEach(f=>{const g=f.match(/(\d{4}-\d{2}-\d{2})/);g&&s.push({date:g[1],title:f.replace(g[0],"").trim(),description:""})}),s.length>0?s:null}static extractCode(n){const o=n.match(/```(\w+)?\n([\s\S]*?)```/);return o?{code:o[2],language:o[1]||"text"}:null}static analyze(n){switch(this.detectType(n)){case"chart":return{type:"chart",data:this.extractChartData(n)||{labels:[],values:[]}};case"timeline":return{type:"timeline",events:this.extractTimelineEvents(n)||[]};case"code":{const s=this.extractCode(n);return{type:"code",code:(s==null?void 0:s.code)||n,language:(s==null?void 0:s.language)||"text"}}case"document":return{type:"document",content:n};default:return{type:"custom",data:n}}}}exports.CanvasContainer=Rr;exports.CanvasContent=Cr;exports.CanvasHeader=Er;exports.CanvasProvider=gr;exports.CanvasToolbar=_r;exports.ChartRenderer=Tr;exports.CodeRenderer=wr;exports.ContentAnalyzer=Pr;exports.CustomRenderer=Or;exports.DocumentRenderer=Sr;exports.TimelineRenderer=jr;exports.darkTheme=br;exports.defaultTheme=k;exports.lightTheme=mr;exports.useCanvas=ne;exports.useCanvasContent=yr;exports.useCanvasLayout=xr;