create-atom.io 0.0.0

package/templates/base/src/BezierPlayground.tsx

@@ -0,0 +1,448 @@
+import {
+	atom,
+	atomFamily,
+	getState,
+	Loadable,
+	resetState,
+	selectorFamily,
+	setState,
+} from "atom.io"
+import { type RegularAtomToken } from "atom.io"
+import { useO } from "atom.io/react"
+import { PointerEventHandler, TargetedPointerEvent } from "preact"
+import { useRef, useCallback, useEffect, MutableRef } from "preact/hooks"
+
+type PointXY = { x: number; y: number }
+type EdgeXY = { c?: PointXY; s: PointXY }
+
+const pathKeysAtom = atom<string[]>({
+	key: "pathKeys",
+	default: [],
+})
+const subpathKeysAtoms = atomFamily<string[], string>({
+	key: "subpathKeys",
+	default: [],
+})
+const nodeAtoms = atomFamily<PointXY | null, string>({
+	key: "nodeAtoms",
+	default: null,
+})
+const edgeAtoms = atomFamily<boolean | EdgeXY, string>({
+	key: "edgeAtoms",
+	default: true,
+})
+const pathDrawSelectors = selectorFamily<string, string>({
+	key: "pathDrawSelectors",
+	get:
+		(pathKey) =>
+		({ get }) => {
+			const subpathKeys = get(subpathKeysAtoms, pathKey)
+			return subpathKeys
+				.map((subpathKey, idx) => {
+					const node = get(nodeAtoms, subpathKey)
+					const edge = get(edgeAtoms, subpathKey)
+
+					if (node === null) {
+						return "Z"
+					}
+					if (idx === 0) {
+						return `M ${node.x} ${node.y}`
+					}
+					if (edge === false) {
+						return `M ${node.x} ${node.y}`
+					}
+					if (edge === true) {
+						return `L ${node.x} ${node.y}`
+					}
+					if (`c` in edge) {
+						return `C ${edge.c.x} ${edge.c.y} ${edge.s.x} ${edge.s.y} ${node.x} ${node.y}`
+					}
+					return `S ${edge.s.x} ${edge.s.y} ${node.x} ${node.y}`
+				})
+				.join(" ")
+		},
+})
+
+export function useAtomicRef<T>(
+	token: RegularAtomToken<T | null>,
+): MutableRef<T | null> {
+	const ref = useRef<T | null>(null)
+	useEffect(() => {
+		setState(token, ref.current)
+	}, [token])
+	return ref
+}
+
+function clamp(n: number, min: number, max: number) {
+	return Math.max(min, Math.min(max, n))
+}
+
+function Bezier({
+	at,
+	subpathKey,
+	prevSubpathKey,
+	node: maybeNode,
+}: {
+	at: PointXY
+	subpathKey: string
+	prevSubpathKey: string
+	node?: PointXY
+}) {
+	let node: PointXY | null
+	switch (typeof maybeNode) {
+		case "undefined":
+			node = useO(nodeAtoms, prevSubpathKey)
+			break
+		default:
+			node = maybeNode
+	}
+	return node === null ? null : (
+		<>
+			<line
+				class="bezier"
+				x1={node.x}
+				y1={node.y}
+				x2={at.x}
+				y2={at.y}
+				stroke="#777"
+				stroke-width={1}
+			/>
+			<circle
+				class="bezier"
+				fill="#777"
+				stroke="#aaa"
+				stroke-width={1}
+				cx={at.x}
+				cy={at.y}
+				r={2}
+			/>
+			<circle
+				class="bezier-draggable"
+				fill="transparent"
+				cx={at.x}
+				cy={at.y}
+				r={6}
+				onPointerDown={(evt) => {
+					evt.currentTarget.setPointerCapture(evt.pointerId)
+					setState(currentlyDraggingAtom, {
+						key: subpathKey,
+						by: !maybeNode ? `c` : `s`,
+					})
+				}}
+			/>
+		</>
+	)
+}
+
+function Node({
+	subpathKey,
+	nextSubpathKey,
+}: {
+	subpathKey: string
+	nextSubpathKey: string
+}) {
+	const node = useO(nodeAtoms, subpathKey)
+	const edge = useO(edgeAtoms, subpathKey)
+	return node === null ? null : (
+		<>
+			{typeof edge === "boolean" ? (
+				<rect class="node" x={node.x - 3} y={node.y - 3} width={6} height={6} />
+			) : (
+				<>
+					<Bezier
+						at={edge.s}
+						node={node}
+						subpathKey={subpathKey}
+						prevSubpathKey={nextSubpathKey}
+					/>
+					{edge.c ? (
+						<Bezier
+							at={edge.c}
+							subpathKey={subpathKey}
+							prevSubpathKey={nextSubpathKey}
+						/>
+					) : null}
+					<circle class="node" cx={node.x} cy={node.y} r={3} />
+				</>
+			)}
+			<circle
+				class="node-draggable"
+				fill="transparent"
+				cx={node.x}
+				cy={node.y}
+				r={10}
+				onPointerDown={(evt) => {
+					evt.currentTarget.setPointerCapture(evt.pointerId)
+					setState(currentlyDraggingAtom, { key: subpathKey })
+				}}
+			/>
+		</>
+	)
+}
+
+function RenderedPath({ pathKey }: { pathKey: string }) {
+	const draw = useO(pathDrawSelectors, pathKey)
+	return <path d={`${draw} Z`} class="path" style={{ pointerEvents: "none" }} />
+}
+
+function Path({ pathKey }: { pathKey: string }) {
+	const subpathKeys = useO(subpathKeysAtoms, pathKey)
+	console.log(console.log(`render path`, subpathKeys))
+	return (
+		<>
+			<RenderedPath pathKey={pathKey} />
+			{subpathKeys.toReversed().map((spk, idx, arr) => (
+				<Node subpathKey={spk} nextSubpathKey={arr[idx + 1] ?? arr[0]} />
+			))}
+		</>
+	)
+}
+
+function PathsDemo() {
+	const pathKeys = useO(pathKeysAtom)
+	return (
+		<>
+			{pathKeys.map((pathKey) => {
+				return <Path pathKey={pathKey} />
+			})}
+		</>
+	)
+}
+
+const svgRefAtom = atom<SVGSVGElement | null>({
+	key: "svgRef",
+	default: null,
+})
+const currentlyDraggingAtom = atom<null | { key: string; by?: `c` | `s` }>({
+	key: "currentlyDragging",
+	default: null,
+})
+
+function onPointerMove(evt: TargetedPointerEvent<SVGSVGElement>): void {
+	evt.preventDefault()
+	const { key: currentlyDragging, by: draggingBy } =
+		getState(currentlyDraggingAtom) ?? {}
+	const svg = getState(svgRefAtom)
+	if (!svg || !currentlyDragging) {
+		return
+	}
+	const pt = svg.createSVGPoint()
+	pt.x = evt.clientX
+	pt.y = evt.clientY
+	const ctm = svg.getScreenCTM()?.inverse()
+	const { x, y } = pt.matrixTransform(ctm)
+
+	switch (draggingBy) {
+		case undefined:
+			setState(nodeAtoms, currentlyDragging, {
+				x: clamp(x, -185, WIDTH + 185),
+				y: clamp(y, -10, HEIGHT + 10),
+			})
+			break
+		case `s`:
+			setState(edgeAtoms, currentlyDragging, (prev) => ({
+				...(prev as EdgeXY),
+				s: { x: clamp(x, -185, WIDTH + 185), y: clamp(y, -10, HEIGHT + 10) },
+			}))
+			break
+		case `c`:
+			setState(edgeAtoms, currentlyDragging, (prev) => ({
+				...(prev as EdgeXY),
+				c: { x: clamp(x, -185, WIDTH + 185), y: clamp(y, -10, HEIGHT + 10) },
+			}))
+			break
+	}
+}
+
+const CODES = [`m`, `M`, `l`, `L`, `c`, `C`, `v`, `V`, `z`, `Z`] as const
+
+const preactLogoAtom = atom<Loadable<string>>({
+	key: "preactLogo",
+	default: () => fetch("preact.svg").then((res) => res.text()),
+})
+
+async function reset() {
+	const logo = await getState(preactLogoAtom)
+	for (const pathKey of getState(pathKeysAtom)) {
+		resetState(subpathKeysAtoms, pathKey)
+	}
+	resetState(pathKeysAtom)
+
+	const shapes = logo
+		.split("\n")
+		.filter((l) => l.startsWith("\t<path"))
+		.map((logo) => {
+			const raw = logo.split(`d="`)[1].slice(0, -9)
+
+			type Letter = (typeof CODES)[number]
+			let letter: Letter | undefined
+			let number = ``
+			let numbers: number[] = []
+
+			const instructions: { letter: Letter; numbers: number[] }[] = []
+			for (let i = 0; i < raw.length; i++) {
+				const c = raw[i]
+				if (CODES.includes(c as Letter)) {
+					if (number) {
+						numbers.push(Number.parseFloat(number))
+						number = ``
+					}
+					if (letter) {
+						instructions.push({ letter, numbers })
+					}
+					letter = c as Letter
+					numbers = []
+					continue
+				}
+				if (c === ` `) {
+					numbers.push(Number.parseFloat(number))
+					number = ``
+					continue
+				}
+				if (c === `-` && number) {
+					numbers.push(Number.parseFloat(number))
+					number = `-`
+					continue
+				}
+
+				number += c
+			}
+
+			let prev: PointXY = { x: 0, y: 0 }
+			const edgeNodes = instructions.map<{
+				node: null | PointXY
+				edge: boolean | { c?: PointXY; s: PointXY }
+			}>(({ letter, numbers }) => {
+				let node: null | PointXY
+				let edge: boolean | { c?: PointXY; s: PointXY }
+				switch (letter) {
+					case `m`:
+						node = { x: prev.x + numbers[0], y: prev.y + numbers[1] }
+						edge = false
+						break
+					case `M`:
+						node = { x: numbers[0], y: numbers[1] }
+						edge = false
+						break
+					case `l`:
+						node = { x: prev.x + numbers[0], y: prev.y + numbers[1] }
+						edge = true
+						break
+					case `L`:
+						node = { x: numbers[0], y: numbers[1] }
+						edge = true
+						break
+					case `c`:
+						node = { x: prev.x + numbers[4], y: prev.y + numbers[5] }
+						edge = {
+							c: { x: prev.x + numbers[0], y: prev.y + numbers[1] },
+							s: { x: prev.x + numbers[2], y: prev.y + numbers[3] },
+						}
+						break
+					case `C`:
+						node = { x: numbers[4], y: numbers[5] }
+						edge = {
+							c: { x: numbers[0], y: numbers[1] },
+							s: { x: numbers[2], y: numbers[3] },
+						}
+						break
+					case `v`:
+						node = { x: prev.x, y: prev.y + numbers[0] }
+						edge = true
+						break
+					case `V`:
+						node = { x: prev.x, y: numbers[0] }
+						edge = true
+						break
+					case `z`:
+					case `Z`:
+						node = null
+						edge = true
+				}
+				if (node) {
+					prev = node
+				}
+
+				return { node, edge }
+			})
+
+			return edgeNodes
+		})
+
+	let i = 0
+	let j = 0
+	for (const shape of shapes) {
+		const jj = j
+		for (const { node, edge } of shape) {
+			setState(edgeAtoms, `subpath${j}`, edge)
+			setState(nodeAtoms, `subpath${j}`, node)
+			j++
+		}
+		const numberOfNodes = j - jj
+		setState(
+			subpathKeysAtoms,
+			`path${i}`,
+			Array.from(
+				{ length: numberOfNodes },
+				(_, nodeNum) => `subpath${jj + nodeNum}`,
+			),
+		)
+		setState(pathKeysAtom, (prev) => [...prev, `path${i}`])
+		i++
+	}
+}
+
+const WIDTH = 256
+const HEIGHT = 296
+export default function BezierPlayground() {
+	const svgRef = useAtomicRef(svgRefAtom)
+	const onPointerUp: PointerEventHandler<SVGSVGElement> = useCallback((evt) => {
+		evt.currentTarget.releasePointerCapture(evt.pointerId)
+		setState(currentlyDraggingAtom, null)
+	}, [])
+
+	useEffect(() => void reset(), [])
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				flexFlow: "column",
+				position: "relative",
+				overflow: "hidden",
+				maxWidth: "1280px",
+				width: "100vw",
+				alignItems: "center",
+			}}
+		>
+			<svg
+				ref={svgRef}
+				viewBox={`-185 -15 ${WIDTH + 370} ${HEIGHT + 30}`}
+				width={1000}
+				height={500}
+				onPointerMove={onPointerMove}
+				onPointerUp={onPointerUp}
+				onPointerCancel={onPointerUp}
+			>
+				<title>Bezier Playground</title>
+				<defs>
+					<pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse">
+						<rect x="0" y="0" width=".5" height=".5" fill="none" stroke="#aaa" />
+					</pattern>
+				</defs>
+				<rect x={0} y={0} width={WIDTH} height={HEIGHT} fill="#aaa3" />
+				<rect
+					x={-185}
+					y={-10}
+					width={WIDTH + 370}
+					height={HEIGHT + 20}
+					fill="url(#grid)"
+				/>
+				<PathsDemo />
+			</svg>
+			<button type="button" class="flat" onClick={reset}>
+				Reset
+			</button>
+		</div>
+	)
+}

package/templates/base/src/index.tsx

@@ -0,0 +1,48 @@
+import { render } from "preact"
+
+import "./style.css"
+import BezierPlayground from "./BezierPlayground.tsx"
+
+export function App() {
+	return (
+		<>
+			<h1>Atom.io in Preact on Vite</h1>
+			<main>
+				<BezierPlayground />
+				<article>
+					<Resource
+						title="Learn Atom.io"
+						description="Atom.io is where data lives."
+						href="https://atom.io.fyi/docs/getting-started"
+					/>
+					<Resource
+						title="Learn Preact"
+						description="If you're new to Preact, try the interactive tutorial to learn important concepts"
+						href="https://preactjs.com/tutorial"
+					/>
+					<Resource
+						title="Learn Vite"
+						description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+						href="https://vitejs.dev"
+					/>
+				</article>
+			</main>
+		</>
+	)
+}
+
+type ResourceProps = {
+	title: string
+	description: string
+	href: string
+}
+function Resource(props: ResourceProps) {
+	return (
+		<a href={props.href} target="_blank" class="resource">
+			<h2>{props.title}</h2>
+			<p>{props.description}</p>
+		</a>
+	)
+}
+
+render(<App />, document.getElementById("app")!)

package/templates/base/src/msg.md

@@ -0,0 +1,105 @@
+Great question — the `d` attribute in an SVG `<path>` element is one of the most powerful but also most cryptic parts of SVG. It defines the shape of the path by listing a series of **commands** and **parameters**. Let’s break it down step by step so you can confidently read (and write) it.
+
+---
+
+## 🧭 1. What the `d` Attribute Is
+
+The `d` attribute contains **a mini language** consisting of:
+
+- Single-letter commands (e.g. `M`, `L`, `C`, `Z`)
+- A series of numbers following those commands (coordinates or parameters)
+- Optional spaces and commas
+
+For example:
+
+```svg
+<path d="M10 10 L50 50 L90 10 Z" />
+```
+
+This draws a triangle:
+
+1. Move to `(10,10)`
+2. Draw a line to `(50,50)`
+3. Draw a line to `(90,10)`
+4. Close the shape
+
+---
+
+## ✍️ 2. Absolute vs Relative Commands
+
+Each command can be:
+
+- **Uppercase** → Absolute coordinates
+- **Lowercase** → Relative coordinates (relative to the current point)
+
+Example:
+
+```svg
+M 100 100   // Move to (100,100)
+l 50 0      // Draw line relative +50 in x, +0 in y → ends at (150,100)
+```
+
+---
+
+## 🧱 3. Common Path Commands
+
+| Command   | Name                | Parameters                                          | What it does                                             |
+| --------- | ------------------- | --------------------------------------------------- | -------------------------------------------------------- |
+| `M` / `m` | moveto              | x y                                                 | Moves the “pen” to a new position without drawing        |
+| `L` / `l` | lineto              | x y                                                 | Draws a straight line from current point to new point    |
+| `H` / `h` | horizontal lineto   | x                                                   | Line horizontally (only x changes)                       |
+| `V` / `v` | vertical lineto     | y                                                   | Line vertically (only y changes)                         |
+| `C` / `c` | cubic Bézier curve  | x1 y1 x2 y2 x y                                     | Curve with 2 control points and an endpoint              |
+| `S` / `s` | smooth cubic Bézier | x2 y2 x y                                           | Like `C` but assumes first control point is a reflection |
+| `Q` / `q` | quadratic Bézier    | x1 y1 x y                                           | Curve with 1 control point and an endpoint               |
+| `T` / `t` | smooth quadratic    | x y                                                 | Like `Q` but auto-control point                          |
+| `A` / `a` | elliptical arc      | rx ry x-axis-rotation large-arc-flag sweep-flag x y | Draws an arc                                             |
+| `Z` / `z` | closepath           | _(none)_                                            | Closes the path (line back to start)                     |
+
+---
+
+## 🧮 4. How to Read a Complex Example
+
+Here’s a more complex example:
+
+```svg
+<path d="M 100 100 C 100 50, 200 50, 200 100 S 300 150, 300 100 Z" />
+```
+
+Let’s break it down:
+
+1. `M 100 100` — move to `(100,100)`
+2. `C 100 50, 200 50, 200 100` — draw cubic Bézier curve with control points `(100,50)` and `(200,50)`, endpoint `(200,100)`
+3. `S 300 150, 300 100` — smooth curve, auto control point from previous, second control `(300,150)`, endpoint `(300,100)`
+4. `Z` — close the path (draw a line back to `(100,100)`)
+
+---
+
+## 🧠 5. Tips for Reading
+
+- Think of the “pen” moving around.
+- Break the path at each command letter.
+- Translate relative commands (`l`, `c`, etc.) into absolute positions step by step if needed.
+- Visualization tools like [SVG Path Editor](https://yqnn.github.io/svg-path-editor/) can help you see what’s happening interactively.
+
+---
+
+## 🧰 6. Handy Shortcuts
+
+- Repeating commands can omit the command letter.
+
+  ```svg
+  M10 10 L20 20 30 10
+  ```
+
+  is equivalent to:
+
+  ```svg
+  M10 10 L20 20 L30 10
+  ```
+
+- For curves (`C`, `S`, `Q`, `T`), the number of coordinates tells you how many segments there are.
+
+---
+
+Would you like me to **deconstruct a specific `d` string** you have? (e.g. paste one and I’ll walk through it step by step.)

package/templates/base/src/style.css

@@ -0,0 +1,126 @@
+:root {
+	--fg: #ccc;
+	--bg-shd1: #0e0e0e;
+	--bg: #1a1a1a;
+	--bg-tnt1: #262626;
+	--bg-tnt2: #444;
+
+	font-family: Charter, serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color: var(--fg);
+	background: var(--bg);
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--fg: #222;
+		--bg-shd1: #e0e0e0;
+		--bg: #eee;
+		--bg-tnt1: #f3f3f3;
+		--bg-tnt2: #f6f6f6;
+	}
+}
+
+body {
+	margin: 0;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	width: 100vw;
+}
+
+#app {
+	text-align: center;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+}
+
+img {
+	margin-bottom: 1.5rem;
+}
+
+img:hover {
+	filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+main {
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+}
+
+article {
+	margin-top: 5rem;
+	padding: 0 2rem;
+	display: flex;
+	gap: 10px;
+	width: 100vw;
+	justify-content: center;
+	align-items: stretch;
+	max-width: 1280px;
+}
+
+.resource {
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	text-align: left;
+	text-decoration: none;
+	color: var(--fg);
+	background: var(--bg-tnt1);
+	border: 1px solid transparent;
+	flex: 1;
+	&:hover {
+		background: var(--bg-tnt2);
+		border: 1px solid var(--fg);
+		box-shadow: 0 25px 50px -12px #673ab888;
+	}
+}
+
+.node {
+	fill: #673ab8;
+	stroke: #aaa;
+}
+.path {
+	fill: #aaa1;
+	stroke: #aaa;
+}
+
+@media (max-width: 639px) {
+	article {
+		flex-flow: column;
+	}
+}
+
+button {
+	font-family: Verdana, sans-serif;
+}
+
+button.flat {
+	color: var(--fg);
+	background: var(--bg);
+	border: 1px solid var(--fg);
+	height: 40px;
+	font-size: 20px;
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	padding: 2px 10px 4px;
+	&:hover {
+		background: var(--bg-tnt1);
+	}
+	&:active {
+		background: var(--bg-shd1);
+		transform: scale(0.98);
+	}
+}