@davincidreams/dynamic-canvas-react 0.1.0

package/dist/dynamic-canvas.umd.js

@@ -0,0 +1,65 @@
+(function(p,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("react"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","lucide-react"],x):(p=typeof globalThis<"u"?globalThis:p||self,x(p.DynamicCanvas={},p.React,p.LucideReact))})(this,function(p,x,oe){"use strict";var G={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 se;function Ae(){if(se)return V;se=1;var i=x,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,y={key:!0,ref:!0,__self:!0,__source:!0};function C(R,m,w){var h,E={},k=null,N=null;w!==void 0&&(k=""+w),m.key!==void 0&&(k=""+m.key),m.ref!==void 0&&(N=m.ref);for(h in m)s.call(m,h)&&!y.hasOwnProperty(h)&&(E[h]=m[h]);if(R&&R.defaultProps)for(h in m=R.defaultProps,m)E[h]===void 0&&(E[h]=m[h]);return{$$typeof:n,type:R,key:k,ref:N,props:E,_owner:f.current}}return V.Fragment=o,V.jsx=C,V.jsxs=C,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 ie;function Fe(){return ie||(ie=1,process.env.NODE_ENV!=="production"&&function(){var i=x,n=Symbol.for("react.element"),o=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),R=Symbol.for("react.context"),m=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),h=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),N=Symbol.for("react.offscreen"),A=Symbol.iterator,I="@@iterator";function D(e){if(e===null||typeof e!="object")return null;var r=A&&e[A]||e[I];return typeof r=="function"?r:null}var S=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function _(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),a=1;a<r;a++)t[a-1]=arguments[a];Qe("error",e,t)}}function Qe(e,r,t){{var a=S.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 Ze=!1,qe=!1,er=!1,rr=!1,tr=!1,le;le=Symbol.for("react.module.reference");function nr(e){return!!(typeof e=="string"||typeof e=="function"||e===s||e===y||tr||e===f||e===w||e===h||rr||e===N||Ze||qe||er||typeof e=="object"&&e!==null&&(e.$$typeof===k||e.$$typeof===E||e.$$typeof===C||e.$$typeof===R||e.$$typeof===m||e.$$typeof===le||e.getModuleId!==void 0))}function ar(e,r,t){var a=e.displayName;if(a)return a;var d=r.displayName||r.name||"";return d!==""?t+"("+d+")":t}function ue(e){return e.displayName||"Context"}function F(e){if(e==null)return null;if(typeof e.tag=="number"&&_("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 y:return"Profiler";case f:return"StrictMode";case w:return"Suspense";case h:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case R:var r=e;return ue(r)+".Consumer";case C:var t=e;return ue(t._context)+".Provider";case m:return ar(e,e.render,"ForwardRef");case E:var a=e.displayName||null;return a!==null?a:F(e.type)||"Memo";case k:{var d=e,v=d._payload,u=d._init;try{return F(u(v))}catch{return null}}}return null}var W=Object.assign,z=0,fe,de,ve,he,pe,me,be;function ge(){}ge.__reactDisabledLog=!0;function or(){{if(z===0){fe=console.log,de=console.info,ve=console.warn,he=console.error,pe=console.group,me=console.groupCollapsed,be=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ge,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}z++}}function sr(){{if(z--,z===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:W({},e,{value:fe}),info:W({},e,{value:de}),warn:W({},e,{value:ve}),error:W({},e,{value:he}),group:W({},e,{value:pe}),groupCollapsed:W({},e,{value:me}),groupEnd:W({},e,{value:be})})}z<0&&_("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var Q=S.ReactCurrentDispatcher,Z;function B(e,r,t){{if(Z===void 0)try{throw Error()}catch(d){var a=d.stack.trim().match(/\n( *(at )?)/);Z=a&&a[1]||""}return`
+`+Z+e}}var q=!1,J;{var ir=typeof WeakMap=="function"?WeakMap:Map;J=new ir}function ye(e,r){if(!e||q)return"";{var t=J.get(e);if(t!==void 0)return t}var a;q=!0;var d=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var v;v=Q.current,Q.current=null,or();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(j){a=j}Reflect.construct(e,[],u)}else{try{u.call()}catch(j){a=j}e.call(u.prototype)}}else{try{throw Error()}catch(j){a=j}e()}}catch(j){if(j&&a&&typeof j.stack=="string"){for(var c=j.stack.split(`
+`),T=a.stack.split(`
+`),b=c.length-1,g=T.length-1;b>=1&&g>=0&&c[b]!==T[g];)g--;for(;b>=1&&g>=0;b--,g--)if(c[b]!==T[g]){if(b!==1||g!==1)do if(b--,g--,g<0||c[b]!==T[g]){var O=`
+`+c[b].replace(" at new "," at ");return e.displayName&&O.includes("<anonymous>")&&(O=O.replace("<anonymous>",e.displayName)),typeof e=="function"&&J.set(e,O),O}while(b>=1&&g>=0);break}}}finally{q=!1,Q.current=v,sr(),Error.prepareStackTrace=d}var Y=e?e.displayName||e.name:"",M=Y?B(Y):"";return typeof e=="function"&&J.set(e,M),M}function cr(e,r,t){return ye(e,!1)}function lr(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function K(e,r,t){if(e==null)return"";if(typeof e=="function")return ye(e,lr(e));if(typeof e=="string")return B(e);switch(e){case w:return B("Suspense");case h:return B("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case m:return cr(e.render);case E:return K(e.type,r,t);case k:{var a=e,d=a._payload,v=a._init;try{return K(v(d),r,t)}catch{}}}return""}var $=Object.prototype.hasOwnProperty,xe={},Re=S.ReactDebugCurrentFrame;function H(e){if(e){var r=e._owner,t=K(e.type,e._source,r?r.type:null);Re.setExtraStackFrame(t)}else Re.setExtraStackFrame(null)}function ur(e,r,t,a,d){{var v=Function.call.bind($);for(var u in e)if(v(e,u)){var c=void 0;try{if(typeof e[u]!="function"){var T=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 T.name="Invariant Violation",T}c=e[u](r,u,a,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(b){c=b}c&&!(c instanceof Error)&&(H(d),_("%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),H(null)),c instanceof Error&&!(c.message in xe)&&(xe[c.message]=!0,H(d),_("Failed %s type: %s",t,c.message),H(null))}}}var fr=Array.isArray;function ee(e){return fr(e)}function dr(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function vr(e){try{return Ce(e),!1}catch{return!0}}function Ce(e){return""+e}function Ee(e){if(vr(e))return _("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",dr(e)),Ce(e)}var _e=S.ReactCurrentOwner,hr={key:!0,ref:!0,__self:!0,__source:!0},Te,je;function pr(e){if($.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function mr(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function br(e,r){typeof e.ref=="string"&&_e.current}function gr(e,r){{var t=function(){Te||(Te=!0,_("%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 yr(e,r){{var t=function(){je||(je=!0,_("%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 xr=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 Rr(e,r,t,a,d){{var v,u={},c=null,T=null;t!==void 0&&(Ee(t),c=""+t),mr(r)&&(Ee(r.key),c=""+r.key),pr(r)&&(T=r.ref,br(r,d));for(v in r)$.call(r,v)&&!hr.hasOwnProperty(v)&&(u[v]=r[v]);if(e&&e.defaultProps){var b=e.defaultProps;for(v in b)u[v]===void 0&&(u[v]=b[v])}if(c||T){var g=typeof e=="function"?e.displayName||e.name||"Unknown":e;c&&gr(u,g),T&&yr(u,g)}return xr(e,c,T,d,a,_e.current,u)}}var re=S.ReactCurrentOwner,we=S.ReactDebugCurrentFrame;function L(e){if(e){var r=e._owner,t=K(e.type,e._source,r?r.type:null);we.setExtraStackFrame(t)}else we.setExtraStackFrame(null)}var te;te=!1;function ne(e){return typeof e=="object"&&e!==null&&e.$$typeof===n}function Se(){{if(re.current){var e=F(re.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function Cr(e){return""}var Oe={};function Er(e){{var r=Se();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 Pe(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=Er(r);if(Oe[t])return;Oe[t]=!0;var a="";e&&e._owner&&e._owner!==re.current&&(a=" It was passed a child from "+F(e._owner.type)+"."),L(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),L(null)}}function ke(e,r){{if(typeof e!="object")return;if(ee(e))for(var t=0;t<e.length;t++){var a=e[t];ne(a)&&Pe(a,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var d=D(e);if(typeof d=="function"&&d!==e.entries)for(var v=d.call(e),u;!(u=v.next()).done;)ne(u.value)&&Pe(u.value,r)}}}function _r(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===m||r.$$typeof===E))t=r.propTypes;else return;if(t){var a=F(r);ur(t,e.props,"prop",a,e)}else if(r.PropTypes!==void 0&&!te){te=!0;var d=F(r);_("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",d||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&_("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Tr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var a=r[t];if(a!=="children"&&a!=="key"){L(e),_("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),L(null);break}}e.ref!==null&&(L(e),_("Invalid attribute `ref` supplied to `React.Fragment`."),L(null))}}var De={};function Ne(e,r,t,a,d,v){{var u=nr(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 T=Cr();T?c+=T:c+=Se();var b;e===null?b="null":ee(e)?b="array":e!==void 0&&e.$$typeof===n?(b="<"+(F(e.type)||"Unknown")+" />",c=" Did you accidentally export a JSX literal instead of a component?"):b=typeof e,_("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",b,c)}var g=Rr(e,r,t,d,v);if(g==null)return g;if(u){var O=r.children;if(O!==void 0)if(a)if(ee(O)){for(var Y=0;Y<O.length;Y++)ke(O[Y],e);Object.freeze&&Object.freeze(O)}else _("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 ke(O,e)}if($.call(r,"key")){var M=F(e),j=Object.keys(r).filter(function(kr){return kr!=="key"}),ae=j.length>0?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}";if(!De[M+ae]){var Pr=j.length>0?"{"+j.join(": ..., ")+": ...}":"{}";_(`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} />`,ae,M,Pr,M),De[M+ae]=!0}}return e===s?Tr(g):_r(g),g}}function jr(e,r,t){return Ne(e,r,t,!0)}function wr(e,r,t){return Ne(e,r,t,!1)}var Sr=wr,Or=jr;U.Fragment=s,U.jsx=Sr,U.jsxs=Or}()),U}process.env.NODE_ENV==="production"?G.exports=Ae():G.exports=Fe();var l=G.exports;const P={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)"}},Ie={...P,colors:{...P.colors,background:"#ffffff",surface:"#f8fafc",text:"#0f172a",muted:"#64748b",border:"#e2e8f0",highlight:"#f1f5f9"}},We={...P,colors:{...P.colors,background:"#0f172a",surface:"#1e293b",text:"#f8fafc",muted:"#94a3b8",border:"#334155",highlight:"#1e293b"}},ce=x.createContext(void 0),Me=({children:i,initialTheme:n=P,initialThemeMode:o="light",initialContent:s})=>{const[f,y]=x.useState(n),[C,R]=x.useState(o),[m,w]=x.useState(s),[h,E]=x.useState("side-by-side"),[k,N]=x.useState(.4);x.useEffect(()=>{const I=()=>{const D=C==="dark"||C==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches;y(D?{...P,colors:{...P.colors,background:"#0f172a",surface:"#1e293b",text:"#f8fafc",muted:"#94a3b8",border:"#334155",highlight:"#1e293b"}}:{...P,colors:{...P.colors,background:"#ffffff",surface:"#f8fafc",text:"#0f172a",muted:"#64748b",border:"#e2e8f0",highlight:"#f1f5f9"}})};if(I(),C==="system"){const D=window.matchMedia("(prefers-color-scheme: dark)"),S=()=>I();return D.addEventListener("change",S),()=>D.removeEventListener("change",S)}},[C]);const A={theme:f,setTheme:y,themeMode:C,setThemeMode:R};return l.jsx(ce.Provider,{value:A,children:i})},X=()=>{const i=x.useContext(ce);if(i===void 0)throw new Error("useCanvas must be used within a CanvasProvider");return i},Le=()=>{const{content:i,setCanvasContent:n}=X();return{content:i,setContent:n}},Ye=()=>{const{layout:i,widthRatio:n,setCanvasLayout:o,setCanvasWidthRatio:s}=X();return{layout:i,widthRatio:n,setLayout:o,setWidthRatio:s}},Ve=({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})},Ue=({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})]}),ze=({children:i,theme:n})=>l.jsx("div",{className:`
+      flex-1
+      overflow-y-auto
+      p-6
+      bg-[${n.colors.background}]
+    `,children:i}),$e=({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}),Be=({content:i,theme:n})=>{const o=x.useRef(null);return x.useEffect(()=>{if(!o.current)return;const s=o.current,f=s.getContext("2d");if(!f)return;const{data:y,options:C={}}=i,{colors:R=[]}=C,m=s.width,w=s.height,h=40,E=(m-h*2)/y.labels.length-10,k=Math.max(...y.values,1);y.values.forEach((N,A)=>{const I=N/k*(w-h*2),D=h+A*(E+10),S=w-h-I;f.fillStyle=R[A%R.length]||n.colors.primary,f.fillRect(D,S,E,I),f.fillStyle=n.colors.text,f.font="12px sans-serif",f.textAlign="center",f.fillText(y.labels[A],D+E/2,w-h+20),f.fillStyle=n.colors.muted,f.fillText(N.toString(),D+E/2,S-10)}),f.strokeStyle=n.colors.border,f.lineWidth=1,f.beginPath(),f.moveTo(h,h),f.lineTo(h,w-h),f.lineTo(m-h,w-h),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"}})})},Je=({content:i,theme:n})=>{const{events:o,options:s={}}=i,{orientation:f="horizontal",compact:y=!1}=s,C=f==="horizontal";return l.jsx("div",{className:"timeline-renderer",children:l.jsx("div",{className:`timeline ${C?"timeline-horizontal":"timeline-vertical"}`,children:o.map((R,m)=>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:R.date}),l.jsx("div",{className:"timeline-title",children:R.title}),R.description&&l.jsx("div",{className:"timeline-description",children:R.description})]})]},m))})})},Ke=({content:i,theme:n})=>{const[o,s]=x.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})})]})},He=({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})]})}),Ge=({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 Xe{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)),y=s.slice(Math.ceil(s.length/2));return{labels:f,values:y}}static extractTimelineEvents(n){const o=n.split(`
+`),s=[];return o.forEach(f=>{const y=f.match(/(\d{4}-\d{2}-\d{2})/);y&&s.push({date:y[1],title:f.replace(y[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}}}}p.CanvasContainer=Ve,p.CanvasContent=ze,p.CanvasHeader=Ue,p.CanvasProvider=Me,p.CanvasToolbar=$e,p.ChartRenderer=Be,p.CodeRenderer=Ke,p.ContentAnalyzer=Xe,p.CustomRenderer=Ge,p.DocumentRenderer=He,p.TimelineRenderer=Je,p.darkTheme=We,p.defaultTheme=P,p.lightTheme=Ie,p.useCanvas=X,p.useCanvasContent=Le,p.useCanvasLayout=Ye,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,302 @@
+import { default as default_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare type ArtifactFormat = 'json' | 'csv' | 'txt' | 'html' | 'pdf';
+
+export declare interface CanvasConfig {
+    layout?: 'side-by-side' | 'stacked' | 'fullscreen';
+    widthRatio?: number;
+    theme?: Theme;
+    themeMode?: 'light' | 'dark' | 'system';
+    autoDetectType?: boolean;
+    onContentChange?: (content: CanvasContent_2) => void;
+    onDownload?: (content: CanvasContent_2, format: string) => void;
+    onRendererError?: (error: Error, type: string) => void;
+    rendererProps?: Record<string, any>;
+}
+
+export declare const CanvasContainer: default_2.FC<CanvasContainerProps>;
+
+declare interface CanvasContainerProps {
+    children: ReactNode;
+    theme: Theme;
+    className?: string;
+}
+
+export declare const CanvasContent: default_2.FC<{
+    children: ReactNode;
+    theme: Theme;
+}>;
+
+declare interface CanvasContent_2 {
+    type: CanvasContentType;
+    data: any;
+    title?: string;
+    description?: string;
+    metadata?: Record<string, any>;
+}
+
+/**
+ * Core type definitions for the Dynamic Canvas library
+ */
+export declare type CanvasContentType = 'chart' | 'timeline' | 'code' | 'document' | 'custom';
+
+export declare type CanvasContentUnion = ChartContent | TimelineContent | CodeContent | DocumentContent | CustomContent;
+
+export declare interface CanvasEvent {
+    type: 'contentChange' | 'download' | 'error';
+    content?: CanvasContent_2;
+    format?: string;
+    error?: Error;
+}
+
+export declare const CanvasHeader: default_2.FC<{
+    title?: string;
+    description?: string;
+    theme: Theme;
+}>;
+
+export declare const CanvasProvider: default_2.FC<CanvasProviderProps>;
+
+declare interface CanvasProviderProps {
+    children: ReactNode;
+    initialTheme?: Theme;
+    initialThemeMode?: 'light' | 'dark' | 'system';
+    initialContent?: CanvasContent_2;
+}
+
+export declare const CanvasToolbar: default_2.FC<{
+    children: ReactNode;
+    theme: Theme;
+}>;
+
+export declare interface ChartContent extends CanvasContent_2 {
+    type: 'chart';
+    chartType: ChartOptions['chartType'];
+    data: ChartData;
+    options?: ChartOptions;
+}
+
+export declare interface ChartData {
+    labels: string[];
+    values: number[];
+    series?: Array<{
+        name: string;
+        data: number[];
+    }>;
+}
+
+export declare interface ChartOptions {
+    chartType?: 'bar' | 'line' | 'scatter' | 'pie' | 'custom';
+    colors?: string[];
+    title?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showLegend?: boolean;
+}
+
+export declare const ChartRenderer: default_2.FC<ChartRendererProps>;
+
+declare interface ChartRendererProps {
+    content: ChartContent;
+    theme: Theme;
+}
+
+export declare interface CodeContent extends CanvasContent_2 {
+    type: 'code';
+    code: string;
+    language: string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+}
+
+export declare const CodeRenderer: default_2.FC<CodeRendererProps>;
+
+declare interface CodeRendererProps {
+    content: CodeContent;
+    theme: Theme;
+}
+
+export declare class ContentAnalyzer {
+    /**
+     * Detect the content type from a string
+     */
+    static detectType(content: string): CanvasContentType;
+    /**
+     * Extract chart data from content
+     */
+    static extractChartData(content: string): {
+        labels: number[];
+        values: number[];
+    } | null;
+    /**
+     * Extract timeline events from content
+     */
+    static extractTimelineEvents(content: string): any[] | null;
+    /**
+     * Extract code from content
+     */
+    static extractCode(content: string): {
+        code: string;
+        language: string;
+    } | null;
+    /**
+     * Analyze content and return appropriate content object
+     */
+    static analyze(content: string): any;
+}
+
+export declare interface CustomContent extends CanvasContent_2 {
+    type: 'custom';
+    component?: React.ComponentType<any>;
+    props?: Record<string, any>;
+}
+
+export declare const CustomRenderer: default_2.FC<CustomRendererProps>;
+
+declare interface CustomRendererProps {
+    content: CustomContent;
+    theme: Theme;
+}
+
+export declare const darkTheme: Theme;
+
+export declare const defaultTheme: Theme;
+
+export declare interface DocumentContent extends CanvasContent_2 {
+    type: 'document';
+    content: string;
+    format: 'markdown' | 'html' | 'pdf';
+    title?: string;
+}
+
+export declare const DocumentRenderer: default_2.FC<DocumentRendererProps>;
+
+declare interface DocumentRendererProps {
+    content: DocumentContent;
+    theme: Theme;
+}
+
+export declare interface DownloadOptions {
+    format: ArtifactFormat;
+    filename?: string;
+    includeMetadata?: boolean;
+}
+
+export declare interface LayoutConfig {
+    layout: 'side-by-side' | 'stacked' | 'fullscreen';
+    widthRatio: number;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+}
+
+export declare const lightTheme: Theme;
+
+export declare interface Theme {
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    borderRadius: ThemeBorderRadius;
+    shadows: ThemeShadows;
+}
+
+export declare interface ThemeBorderRadius {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+
+export declare interface ThemeColors {
+    background: string;
+    surface: string;
+    primary: string;
+    secondary: string;
+    text: string;
+    muted: string;
+    border: string;
+    highlight: string;
+}
+
+declare interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    themeMode: 'light' | 'dark' | 'system';
+    setThemeMode: (mode: 'light' | 'dark' | 'system') => void;
+}
+
+export declare interface ThemeShadows {
+    sm: string;
+    md: string;
+    lg: string;
+}
+
+export declare interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+
+export declare interface ThemeTypography {
+    font: string;
+    sizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    weights: {
+        normal: number;
+        medium: number;
+        bold: number;
+    };
+}
+
+export declare interface TimelineContent extends CanvasContent_2 {
+    type: 'timeline';
+    events: TimelineEvent[];
+    options?: TimelineOptions;
+}
+
+export declare interface TimelineEvent {
+    date: string;
+    title: string;
+    description?: string;
+    icon?: string;
+    link?: string;
+}
+
+export declare interface TimelineOptions {
+    orientation?: 'horizontal' | 'vertical';
+    showDate?: boolean;
+    showDescription?: boolean;
+    compact?: boolean;
+}
+
+export declare const TimelineRenderer: default_2.FC<TimelineRendererProps>;
+
+declare interface TimelineRendererProps {
+    content: TimelineContent;
+    theme: Theme;
+}
+
+export declare const useCanvas: () => ThemeContextType;
+
+export declare const useCanvasContent: () => {
+    content: any;
+    setContent: any;
+};
+
+export declare const useCanvasLayout: () => {
+    layout: any;
+    widthRatio: any;
+    setLayout: any;
+    setWidthRatio: any;
+};
+
+export { }

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@davincidreams/dynamic-canvas-react",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A modular, reusable dynamic canvas component for React",
+  "main": "dist/dynamic-canvas.umd.js",
+  "module": "dist/dynamic-canvas.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dynamic-canvas.es.js",
+      "require": "./dist/dynamic-canvas.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.400.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "react",
+    "canvas",
+    "visualization",
+    "d3",
+    "timeline",
+    "chart",
+    "component",
+    "ui",
+    "dynamic"
+  ],
+  "author": "",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ]
+}