🎉 initiate project *astro_rewrite*

node_modules/shiki/samples/imba.sample

@@ -0,0 +1,55 @@
+global css body m:0 p:0 rd:lg bg:yellow1 of:hidden
+tag value-picker
+	css w:100px h:40px pos:rel
+		d:hgrid ji:center ai:center
+	css .item h:100% pos:rel tween:styles 0.1s ease-out
+
+	def update e
+		data = options[e.x]
+
+	<self @touch.stop.fit(0,options.length - 1,1)=update>
+		for item in options
+			<div.item[$value:{item}] .sel=(item==data)>
+
+tag stroke-picker < value-picker
+	css .item bg:black w:calc($value*1px) h:40% rd:sm
+		o:0.3 @hover:0.8 .sel:1
+
+tag color-picker < value-picker
+	css .item js:stretch rdt:lg bg:$value mx:2px scale-y.sel:1.5
+
+tag app-canvas
+	prop dpr = window.devicePixelRatio
+	prop state = {}
+
+	def draw e
+		let path = e.#path ||= new Path2D
+		let ctx = $canvas.getContext('2d')
+		path.lineTo(e.x * dpr,e.y * dpr)
+		ctx.lineWidth = state.stroke * dpr
+		ctx.strokeStyle = state.color
+		ctx.stroke(path)
+	
+	def resized e
+		$canvas.width = offsetWidth * dpr
+		$canvas.height = offsetHeight * dpr
+
+	<self @resize=resized @touch.prevent.moved.fit(self)=draw>
+		<canvas$canvas[pos:abs w:100% h:100%]>
+
+const strokes = [1,2,3,5,8,12]
+const colors = ['#F59E0B','#10B981','#3B82F6','#8B5CF6']
+const state = {stroke: 5, color: '#3B82F6'}
+
+tag App
+	<self>
+		<div[ta:center pt:20 o:0.2 fs:xl]> 'draw here'
+		<app-canvas[pos:abs inset:0] state=state>
+		<div.tools[pos:abs b:0 w:100% d:hgrid ja:center]>
+			<stroke-picker options=strokes bind=state.stroke>
+			<color-picker options=colors bind=state.color>
+
+imba.mount <App[pos:abs inset:0]>
+
+# from https://imba.io
+# run online at https://scrimba.com/scrim/cPPdD4Aq