{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/bRr44GkMon97cuFW7GWG/ESWld3hg4c2cWvhpuhZy/Sketchboard.js", "ssg:https://framerusercontent.com/modules/XwPu8bcZMt5VvUoltgT4/RqeqdCysM3H2WMz27HBs/zBgnT13kt.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";export default function Sketchboard(props){const{bgColor,penColor,penSize,style}=props;const canvasRef=React.useRef(null);const[isDrawing,setIsDrawing]=React.useState(false);React.useEffect(()=>{const canvas=canvasRef.current;const context=canvas.getContext(\"2d\");const ratio=window.devicePixelRatio||1;canvas.width=canvas.offsetWidth*ratio;canvas.height=canvas.offsetHeight*ratio;context.scale(ratio,ratio);context.lineJoin=\"round\";context.lineCap=\"round\";},[style.width,style.height]);const startDrawing=({nativeEvent})=>{const ctx=canvasRef.current.getContext(\"2d\");const rect=canvasRef.current.getBoundingClientRect();const x=nativeEvent.clientX-rect.left;const y=nativeEvent.clientY-rect.top;ctx.beginPath();ctx.moveTo(x,y);setIsDrawing(true);};const draw=({nativeEvent})=>{if(!isDrawing)return;const ctx=canvasRef.current.getContext(\"2d\");const rect=canvasRef.current.getBoundingClientRect();const x=nativeEvent.clientX-rect.left;const y=nativeEvent.clientY-rect.top;ctx.lineTo(x,y);ctx.strokeStyle=penColor;ctx.lineWidth=penSize;ctx.stroke();};const finishDrawing=({nativeEvent})=>{if(isDrawing){const ctx=canvasRef.current.getContext(\"2d\");ctx.closePath();setIsDrawing(false);}else{// Draw a dot\ndraw(nativeEvent);}};const clearCanvas=event=>{event.preventDefault();const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");ctx.clearRect(0,0,canvas.width,canvas.height);};return /*#__PURE__*/_jsx(motion.div,{style:{width:\"100%\",height:\"100%\",...style,backgroundColor:bgColor,cursor:\"crosshair\"},onContextMenu:clearCanvas,children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,onMouseDown:startDrawing,onMouseMove:draw,onMouseUp:finishDrawing,onMouseLeave:finishDrawing,style:{width:\"100%\",height:\"100%\"}})});}Sketchboard.defaultProps={bgColor:\"#111\",penColor:\"#fff\",penSize:2,style:{width:\"100%\",height:\"100%\",minWidth:200,minHeight:200}};addPropertyControls(Sketchboard,{penSize:{type:ControlType.Number,title:\"Pen Size\",defaultValue:Sketchboard.defaultProps.penSize,min:1,max:20,step:1},penColor:{type:ControlType.Color,title:\"Pen Color\",defaultValue:Sketchboard.defaultProps.penColor},bgColor:{type:ControlType.Color,title:\"BG Color\",defaultValue:Sketchboard.defaultProps.bgColor}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Sketchboard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Sketchboard.map", "// Generated by Framer (8857874)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addFonts,addPropertyControls,ControlType,cx,useComponentViewport,useLocaleInfo,useVariantState,withCSS}from\"framer\";import{LayoutGroup,motion,MotionConfigContext}from\"framer-motion\";import*as React from\"react\";const cycleOrder=[\"mDYVSAcMs\",\"xWE1JlPHQ\"];const serializationHash=\"framer-HTSdh\";const variantClassNames={mDYVSAcMs:\"framer-v-jvf5r6\",xWE1JlPHQ:\"framer-v-t76it\"};function addPropertyOverrides(overrides,...variants){const nextOverrides={};variants===null||variants===void 0?void 0:variants.forEach(variant=>variant&&Object.assign(nextOverrides,overrides[variant]));return nextOverrides;}const transition1={damping:60,delay:0,mass:1,stiffness:500,type:\"spring\"};const Transition=({value,children})=>{const config=React.useContext(MotionConfigContext);const transition=value!==null&&value!==void 0?value:config.transition;const contextValue=React.useMemo(()=>({...config,transition}),[JSON.stringify(transition)]);return /*#__PURE__*/_jsx(MotionConfigContext.Provider,{value:contextValue,children:children});};const Variants=motion(React.Fragment);const humanReadableVariantMap={orange:\"xWE1JlPHQ\",yellow:\"mDYVSAcMs\"};const getProps=({height,id,width,...props})=>{var _humanReadableVariantMap_props_variant,_ref;return{...props,variant:(_ref=(_humanReadableVariantMap_props_variant=humanReadableVariantMap[props.variant])!==null&&_humanReadableVariantMap_props_variant!==void 0?_humanReadableVariantMap_props_variant:props.variant)!==null&&_ref!==void 0?_ref:\"mDYVSAcMs\"};};const createLayoutDependency=(props,variants)=>{if(props.layoutDependency)return variants.join(\"-\")+props.layoutDependency;return variants.join(\"-\");};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{activeLocale,setLocale}=useLocaleInfo();const{style,className,layoutId,variant,...restProps}=getProps(props);const{baseVariant,classNames,clearLoadingGesture,gestureHandlers,gestureVariant,isLoading,setGestureState,setVariant,variants}=useVariantState({cycleOrder,defaultVariant:\"mDYVSAcMs\",variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const ref1=React.useRef(null);const defaultLayoutId=React.useId();const sharedStyleClassNames=[];const componentViewport=useComponentViewport();return /*#__PURE__*/_jsx(LayoutGroup,{id:layoutId!==null&&layoutId!==void 0?layoutId:defaultLayoutId,children:/*#__PURE__*/_jsx(Variants,{animate:variants,initial:false,children:/*#__PURE__*/_jsx(Transition,{value:transition1,children:/*#__PURE__*/_jsx(motion.div,{...restProps,...gestureHandlers,className:cx(serializationHash,...sharedStyleClassNames,\"framer-jvf5r6\",className,classNames),\"data-border\":true,\"data-framer-name\":\"yellow\",layoutDependency:layoutDependency,layoutId:\"mDYVSAcMs\",ref:ref!==null&&ref!==void 0?ref:ref1,style:{\"--border-bottom-width\":\"4px\",\"--border-color\":\"rgb(255, 255, 255)\",\"--border-left-width\":\"4px\",\"--border-right-width\":\"4px\",\"--border-style\":\"solid\",\"--border-top-width\":\"4px\",backgroundColor:\"rgb(255, 204, 2)\",borderBottomLeftRadius:20,borderBottomRightRadius:20,borderTopLeftRadius:20,borderTopRightRadius:20,...style},variants:{xWE1JlPHQ:{backgroundColor:\"rgb(255, 91, 0)\"}},...addPropertyOverrides({xWE1JlPHQ:{\"data-framer-name\":\"orange\"}},baseVariant,gestureVariant)})})})});});const css=[\"@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }\",\".framer-HTSdh.framer-17yuc4a, .framer-HTSdh .framer-17yuc4a { display: block; }\",\".framer-HTSdh.framer-jvf5r6 { height: 40px; overflow: hidden; position: relative; width: 40px; will-change: var(--framer-will-change-override, transform); }\",\".framer-HTSdh.framer-v-t76it.framer-jvf5r6 { aspect-ratio: 1 / 1; height: var(--framer-aspect-ratio-supported, 40px); }\",'.framer-HTSdh[data-border=\"true\"]::after, .framer-HTSdh [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none; }'];/**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 40\n * @framerIntrinsicWidth 40\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"fixed\",\"fixed\"]},\"xWE1JlPHQ\":{\"layout\":[\"fixed\",\"fixed\"]}}}\n * @framerImmutableVariables true\n * @framerDisplayContentsDiv false\n * @framerComponentViewportWidth true\n */const FramerzBgnT13kt=withCSS(Component,css,\"framer-HTSdh\");export default FramerzBgnT13kt;FramerzBgnT13kt.displayName=\"draw-cursor\";FramerzBgnT13kt.defaultProps={height:40,width:40};addPropertyControls(FramerzBgnT13kt,{variant:{options:[\"mDYVSAcMs\",\"xWE1JlPHQ\"],optionTitles:[\"yellow\",\"orange\"],title:\"Variant\",type:ControlType.Enum}});addFonts(FramerzBgnT13kt,[{explicitInter:true,fonts:[]}],{supportsExplicitInterCodegen:true});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FramerzBgnT13kt\",\"slots\":[],\"annotations\":{\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"fixed\\\"]},\\\"xWE1JlPHQ\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"fixed\\\"]}}}\",\"framerImmutableVariables\":\"true\",\"framerIntrinsicHeight\":\"40\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"40\",\"framerDisplayContentsDiv\":\"false\",\"framerComponentViewportWidth\":\"true\"}},\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./zBgnT13kt.map"],
  "mappings": "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",
  "names": ["Sketchboard", "props", "bgColor", "penColor", "penSize", "style", "canvasRef", "pe", "isDrawing", "setIsDrawing", "ye", "ue", "canvas", "context", "ratio", "window", "startDrawing", "nativeEvent", "ctx", "rect", "y", "draw", "finishDrawing", "clearCanvas", "event", "p", "motion", "addPropertyControls", "ControlType", "cycleOrder", "serializationHash", "variantClassNames", "addPropertyOverrides", "overrides", "variants", "nextOverrides", "variant", "transition1", "Transition", "value", "children", "config", "re", "MotionConfigContext", "transition", "contextValue", "se", "p", "Variants", "motion", "x", "humanReadableVariantMap", "getProps", "height", "id", "width", "props", "_humanReadableVariantMap_props_variant", "_ref", "createLayoutDependency", "Component", "Y", "ref", "activeLocale", "setLocale", "useLocaleInfo", "style", "className", "layoutId", "restProps", "baseVariant", "classNames", "clearLoadingGesture", "gestureHandlers", "gestureVariant", "isLoading", "setGestureState", "setVariant", "useVariantState", "layoutDependency", "ref1", "pe", "defaultLayoutId", "ae", "sharedStyleClassNames", "componentViewport", "useComponentViewport", "LayoutGroup", "cx", "css", "FramerzBgnT13kt", "withCSS", "zBgnT13kt_default", "addPropertyControls", "ControlType", "addFonts"]
}