@atom.io/template-solid-lossless-numbers 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.0.1
+
+- Initial Solid rationality playground template

package/README.md

@@ -0,0 +1,18 @@
+# Solid Rationality Playground
+
+A Vite + Solid + `atom.io/solid` template for exploring exact rational arithmetic with the `rationality` package.
+
+## What it shows
+
+- editable `Rational` instances stored in `atom.io`
+- exact simplification and consolidation
+- chained multiplication and division across multiple rationals
+- comparison between rationals without floating-point drift
+- prime-factor inspection of the simplified numerator and denominator
+
+## Local development
+
+```bash
+bun install
+bun run dev
+```

package/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/dist/assets/index-CulqNJBq.css

@@ -0,0 +1 @@
+app-shell._class_b83uo_1{color:red}:root{--bg:#f6f1e8;--bg-deep:#efe3d0;--panel:#fffcf7db;--panel-strong:#fffaf2;--ink:#172433;--muted:#5d6670;--gold:#d88d1f;--gold-soft:#f5d8a5;--mint:#bfd7c2;--line:#17243324;--shadow:0 24px 80px #3721081f;--radius-xl:28px;--radius-lg:20px;--radius-md:14px;--radius-sm:10px;color:var(--ink);background:radial-gradient(circle at top left, #d88d1f29, transparent 28%), radial-gradient(circle at right center, #1724331f, transparent 30%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,serif}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-height:100vh}button,input,select{font:inherit}button,select,input{border:1px solid var(--line);border-radius:var(--radius-sm)}button{cursor:pointer;background:var(--ink);color:#fff;padding:.7rem 1rem;transition:transform .14s,box-shadow .14s,background .14s}button:hover{transform:translateY(-1px);box-shadow:0 12px 28px #17243324}button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none;transform:none}button.secondary,button.ghost-button{color:var(--ink);background:0 0}button.secondary{border-style:dashed}button.ghost-button{padding-inline:.85rem}input,select{background:#ffffffbf;width:100%;padding:.75rem .85rem}code{font-family:SFMono-Regular,Cascadia Code,Fira Code,Menlo,Consolas,monospace;font-size:.9em}

package/dist/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
+		<title>Rationality Playground</title>
+		<script type="module" crossorigin src="/assets/index-CX-h4DwZ.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-CulqNJBq.css">
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>

package/eslint.config.ts

@@ -0,0 +1,178 @@
+import { default as TypeScriptPlugin } from "@typescript-eslint/eslint-plugin"
+import * as parser from "@typescript-eslint/parser"
+import AtomIOPlugin from "atom.io/eslint-plugin"
+import type { Linter } from "eslint"
+import * as ImportPlugin from "eslint-plugin-import-x"
+import { default as SimpleImportSortPlugin } from "eslint-plugin-simple-import-sort"
+
+const ERROR = 2
+
+const parserOptions = {
+	project: [`./tsconfig.app.json`, `./tsconfig.node.json`],
+	sourceType: `module`,
+} satisfies parser.ParserOptions
+
+const commonRules = {
+	"@typescript-eslint/adjacent-overload-signatures": ERROR,
+	"@typescript-eslint/array-type": 0,
+	"@typescript-eslint/await-thenable": 0,
+	"@typescript-eslint/ban-ts-comment": ERROR,
+	"@typescript-eslint/ban-tslint-comment": 0,
+	"@typescript-eslint/class-literal-property-style": ERROR,
+	"@typescript-eslint/consistent-generic-constructors": 0,
+	"@typescript-eslint/consistent-indexed-object-style": 0,
+	"@typescript-eslint/consistent-return": 0,
+	"@typescript-eslint/consistent-type-assertions": 0,
+	"@typescript-eslint/consistent-type-definitions": 0,
+	"@typescript-eslint/consistent-type-exports": ERROR,
+	"@typescript-eslint/consistent-type-imports": [
+		ERROR,
+		{
+			fixStyle: `separate-type-imports`,
+			prefer: `type-imports`,
+		},
+	],
+	"@typescript-eslint/default-param-last": ERROR,
+	"@typescript-eslint/dot-notation": 0,
+	"@typescript-eslint/explicit-function-return-type": 0,
+	"@typescript-eslint/explicit-member-accessibility": ERROR,
+	"@typescript-eslint/explicit-module-boundary-types": ERROR,
+	"@typescript-eslint/init-declarations": 0,
+	"@typescript-eslint/max-params": 0,
+	"@typescript-eslint/member-ordering": 0,
+	"@typescript-eslint/method-signature-style": 0,
+	"@typescript-eslint/naming-convention": [
+		0,
+		{
+			selector: `variable`,
+			format: [`strictCamelCase`, `StrictPascalCase`, `UPPER_CASE`],
+			leadingUnderscore: `allow`,
+			trailingUnderscore: `allow`,
+		},
+	],
+	"@typescript-eslint/no-array-constructor": ERROR,
+	"@typescript-eslint/no-array-delete": ERROR,
+	"@typescript-eslint/no-base-to-string": ERROR,
+	"@typescript-eslint/no-confusing-non-null-assertion": ERROR,
+	"@typescript-eslint/no-confusing-void-expression": ERROR,
+	"@typescript-eslint/no-duplicate-enum-values": ERROR,
+	"@typescript-eslint/no-duplicate-type-constituents": ERROR,
+	"@typescript-eslint/no-dynamic-delete": ERROR,
+	"@typescript-eslint/no-empty-function": 0,
+	"@typescript-eslint/no-empty-interface": ERROR,
+	"@typescript-eslint/no-explicit-any": 0,
+	"@typescript-eslint/no-extra-non-null-assertion": ERROR,
+	"@typescript-eslint/no-extraneous-class": 0,
+	"@typescript-eslint/no-floating-promises": ERROR,
+	"@typescript-eslint/no-for-in-array": ERROR,
+	"@typescript-eslint/no-implied-eval": ERROR,
+	"@typescript-eslint/no-import-type-side-effects": ERROR,
+	"@typescript-eslint/no-inferrable-types": 0, // not compatible with isolatedDeclarations
+	"@typescript-eslint/no-invalid-void-type": 0, // void is good in unions sometimes?
+	"@typescript-eslint/no-loop-func": 0,
+	"@typescript-eslint/no-loss-of-precision": ERROR,
+	"@typescript-eslint/no-magic-numbers": 0,
+	"@typescript-eslint/no-meaningless-void-operator": ERROR,
+	"@typescript-eslint/no-misused-new": ERROR,
+	"@typescript-eslint/no-misused-promises": 0,
+	"@typescript-eslint/no-mixed-enums": ERROR,
+	"@typescript-eslint/no-namespace": 0,
+	"@typescript-eslint/no-non-null-asserted-nullish-coalescing": ERROR,
+	"@typescript-eslint/no-non-null-asserted-optional-chain": ERROR,
+	"@typescript-eslint/no-non-null-assertion": 0,
+	"@typescript-eslint/no-redundant-type-constituents": ERROR,
+	"@typescript-eslint/no-require-imports": ERROR,
+	"@typescript-eslint/no-restricted-imports": 0,
+	"@typescript-eslint/no-shadow": ERROR,
+	"@typescript-eslint/no-this-alias": ERROR,
+	"@typescript-eslint/no-throw-literal": 0,
+	"@typescript-eslint/no-unnecessary-boolean-literal-compare": 0,
+	"@typescript-eslint/no-unnecessary-condition": 0,
+	"@typescript-eslint/no-unnecessary-qualifier": 0,
+	"@typescript-eslint/no-unnecessary-type-arguments": 0,
+	"@typescript-eslint/no-unnecessary-type-assertion": ERROR,
+	"@typescript-eslint/no-unnecessary-type-constraint": ERROR,
+	"@typescript-eslint/no-unnecessary-type-conversion": ERROR,
+	"@typescript-eslint/no-unsafe-argument": 0,
+	"@typescript-eslint/no-unsafe-assignment": 0,
+	"@typescript-eslint/no-unsafe-call": 0,
+	"@typescript-eslint/no-unsafe-member-access": 0,
+	"@typescript-eslint/no-unsafe-return": 0,
+	"@typescript-eslint/no-unsafe-unary-minus": ERROR,
+	"@typescript-eslint/no-unused-expressions": 0,
+	"@typescript-eslint/no-unused-vars": 0,
+	"@typescript-eslint/no-use-before-define": 0,
+	"@typescript-eslint/no-useless-constructor": ERROR,
+	"@typescript-eslint/no-useless-empty-export": ERROR,
+	"@typescript-eslint/no-var-requires": ERROR,
+	"@typescript-eslint/non-nullable-type-assertion-style": 0,
+	"@typescript-eslint/only-throw-error": ERROR,
+	"@typescript-eslint/parameter-properties": 0,
+	"@typescript-eslint/prefer-as-const": ERROR,
+	"@typescript-eslint/prefer-destructuring": 0,
+	"@typescript-eslint/prefer-enum-initializers": ERROR,
+	"@typescript-eslint/prefer-find": ERROR,
+	"@typescript-eslint/prefer-for-of": ERROR,
+	"@typescript-eslint/prefer-function-type": ERROR,
+	"@typescript-eslint/prefer-includes": ERROR,
+	"@typescript-eslint/prefer-literal-enum-member": ERROR,
+	"@typescript-eslint/prefer-namespace-keyword": ERROR,
+	"@typescript-eslint/prefer-nullish-coalescing": ERROR,
+	"@typescript-eslint/prefer-optional-chain": ERROR,
+	"@typescript-eslint/prefer-promise-reject-errors": 0,
+	"@typescript-eslint/prefer-readonly": 0,
+	"@typescript-eslint/prefer-readonly-parameter-types": 0,
+	"@typescript-eslint/prefer-reduce-type-parameter": 0,
+	"@typescript-eslint/prefer-regexp-exec": 0,
+	"@typescript-eslint/prefer-return-this-type": ERROR,
+	"@typescript-eslint/prefer-string-starts-ends-with": ERROR,
+	"@typescript-eslint/prefer-ts-expect-error": ERROR,
+	"@typescript-eslint/promise-function-async": 0,
+	"@typescript-eslint/require-array-sort-compare": 0,
+	"@typescript-eslint/require-await": ERROR,
+	"@typescript-eslint/restrict-plus-operands": ERROR,
+	"@typescript-eslint/restrict-template-expressions": ERROR,
+	"@typescript-eslint/return-await": ERROR,
+	"@typescript-eslint/sort-type-constituents": ERROR,
+	"@typescript-eslint/strict-boolean-expressions": 0,
+	"@typescript-eslint/switch-exhaustiveness-check": [
+		ERROR,
+		{ requireDefaultForNonUnion: true },
+	],
+	"@typescript-eslint/triple-slash-reference": ERROR,
+	"@typescript-eslint/typedef": 0,
+	"@typescript-eslint/unbound-method": 0,
+	"@typescript-eslint/unified-signatures": ERROR,
+
+	"atom.io/exact-catch-types": ERROR,
+	"atom.io/explicit-state-types": ERROR,
+	"atom.io/naming-convention": ERROR,
+
+	"import/newline-after-import": ERROR,
+	"import/no-duplicates": ERROR,
+
+	"simple-import-sort/imports": ERROR,
+	"simple-import-sort/exports": ERROR,
+
+	"no-mixed-spaces-and-tabs": 0,
+	quotes: [ERROR, `backtick`],
+} satisfies Linter.Config[`rules`]
+
+const configs: Linter.Config[] = [
+	{
+		ignores: [`**/dist/**`, `**/gen/**`, `**/node_modules/**`],
+	},
+	{
+		languageOptions: { parser, parserOptions },
+		files: [`**/*.ts{,x}`, `eslint.config.ts`],
+		plugins: {
+			"@typescript-eslint": TypeScriptPlugin,
+			"atom.io": AtomIOPlugin,
+			import: ImportPlugin,
+			"simple-import-sort": SimpleImportSortPlugin,
+		},
+		rules: commonRules,
+	},
+]
+
+export default configs

package/eslint.d.ts

@@ -0,0 +1,31 @@
+// eslint-disable-next-line quotes
+declare module "eslint-plugin-import-x" {
+	import type { ESLint } from "eslint"
+
+	const plugin: ESLint.Plugin
+	export = plugin
+}
+
+// eslint-disable-next-line quotes
+declare module "eslint-plugin-simple-import-sort" {
+	import type { ESLint } from "eslint"
+
+	const plugin: ESLint.Plugin
+	export = plugin
+}
+
+// eslint-disable-next-line quotes
+declare module "@typescript-eslint/eslint-plugin" {
+	import type { ESLint } from "eslint"
+
+	const plugin: ESLint.Plugin
+	export = plugin
+}
+
+// eslint-disable-next-line quotes
+declare module "eslint-config-preact" {
+	import type { Linter } from "eslint"
+
+	const config: Linter.Config
+	export = config
+}

package/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
+		<title>Rationality Playground</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@atom.io/template-solid-lossless-numbers",
+	"version": "0.0.1",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/jeremybanka/wayforge.git",
+		"directory": "templates/solid-lossless-numbers"
+	},
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"atom.io": "workspace:*",
+		"rationality": "workspace:*",
+		"solid-js": "1.9.11"
+	},
+	"devDependencies": {
+		"eslint": "10.1.0",
+		"typescript": "5.9.3",
+		"vite": "8.0.1",
+		"vite-plugin-solid": "2.11.11"
+	}
+}

package/src/App.tsx

@@ -0,0 +1,298 @@
+import type { AtomToken } from "atom.io"
+import {
+	atom,
+	atomFamily,
+	findState,
+	getState,
+	mutableAtom,
+	resetState,
+	runTransaction,
+	selectorFamily,
+	setState,
+	transaction,
+} from "atom.io"
+import { useI, useO } from "atom.io/solid"
+import { OList } from "atom.io/transceivers/o-list"
+import { Rational } from "rationality"
+import type { JSX } from "solid-js"
+import { For, Show } from "solid-js"
+
+import css from "./App.tsx.module.css"
+
+type RationalKey = `rat::${string}`
+const arbitrary = () => Math.random().toString(36).slice(2)
+
+const newRationalNumeratorAtom = atom<bigint | undefined>({
+	key: `newRationalNumerator`,
+	default: undefined,
+})
+const newRationalDenominatorAtom = atom<bigint | undefined>({
+	key: `newRationalDenominator`,
+	default: undefined,
+})
+const newNumeratorAtoms = atomFamily<bigint | undefined, RationalKey>({
+	key: `newNumerator`,
+	default: undefined,
+})
+const newDenominatorAtoms = atomFamily<bigint | undefined, RationalKey>({
+	key: `newDenominator`,
+	default: undefined,
+})
+
+const rationalListAtom = mutableAtom<OList<RationalKey>>({
+	key: `rationalList`,
+	class: OList,
+})
+
+const rationalAtoms = atomFamily<Rational, RationalKey>({
+	key: `rational`,
+	default: () => new Rational(0n, 1n),
+})
+const simplifiedSelectors = selectorFamily<
+	[numerator: bigint, denominator: bigint],
+	RationalKey
+>({
+	key: `simplified`,
+	get:
+		(key) =>
+		({ get }) => {
+			const [numerator, denominator] = get(rationalAtoms, key).simplify()
+			return [numerator, denominator]
+		},
+})
+const floatSelectors = selectorFamily<number, RationalKey>({
+	key: `float`,
+	get:
+		(key) =>
+		({ get }) => {
+			const [numerator, denominator] = get(simplifiedSelectors, key)
+			return Number(numerator) / Number(denominator)
+		},
+})
+const numberBitsSelectors = selectorFamily<(`0` | `1`)[], RationalKey>({
+	key: `numberBits`,
+	get:
+		(key) =>
+		({ get }) => {
+			const [numerator, denominator] = get(simplifiedSelectors, key)
+			const value = Number(numerator) / Number(denominator)
+			const buffer = new ArrayBuffer(8)
+			const view = new DataView(buffer)
+			view.setFloat64(0, value, false) // big-endian
+			const bytes = new Uint8Array(buffer)
+			const bits = Array.from(bytes)
+				.map((b) => b.toString(2).padStart(8, `0`))
+				.join(``)
+			return [...bits].map((bit) => (bit === `1` ? `1` : `0`))
+		},
+})
+const isFloatPreciseSelectors = selectorFamily<boolean, RationalKey>({
+	key: `isFloatPrecise`,
+	get:
+		(key) =>
+		({ get }) => {
+			const [, den] = get(simplifiedSelectors, key)
+			if (den === 0n) return false
+			return den > 0n && (den & (den - 1n)) === 0n
+		},
+})
+const approximateValueSelectors = selectorFamily<string, RationalKey>({
+	key: `approximateValue`,
+	get:
+		(key) =>
+		({ get }) => {
+			const value = get(floatSelectors, key)
+			if (!Number.isFinite(value)) return value.toString()
+			const rounded = Number(value.toPrecision(5))
+			return rounded.toString()
+		},
+})
+
+const combineIntoRationalTx = transaction<
+	(key: RationalKey, operation: `add` | `div` | `mul` | `sub`) => void
+>({
+	key: `combineIntoRationalTx`,
+	do: ({ get, set, reset }, key, operation) => {
+		const num = get(newNumeratorAtoms, key) ?? 1n
+		const den = get(newDenominatorAtoms, key) ?? 1n
+		set(rationalAtoms, key, get(rationalAtoms, key)[operation](num, den))
+		reset(newNumeratorAtoms, key)
+		reset(newDenominatorAtoms, key)
+	},
+})
+
+export function App(): JSX.Element {
+	const rationals = useO(rationalListAtom)
+	return (
+		<app class={css.class}>
+			<header>
+				<h1>Rationality Playground</h1>
+			</header>
+			<main>
+				<For each={rationals()}>{(key) => <RationalBreakdown key={key} />}</For>
+				<new-rational>
+					<RationalFields
+						numeratorAtom={newRationalNumeratorAtom}
+						denominatorAtom={newRationalDenominatorAtom}
+					/>
+					<button
+						type="button"
+						onClick={() => {
+							const key: RationalKey = `rat::${arbitrary()}`
+							runTransaction(combineIntoRationalTx)(key, `add`)
+							const newNumerator = getState(newRationalNumeratorAtom) ?? 1n
+							const newDenominator = getState(newRationalDenominatorAtom) ?? 1n
+							const rational = new Rational(newNumerator, newDenominator)
+							setState(rationalAtoms, key, rational)
+							setState(rationalListAtom, (list) => (list.push(key), list))
+							resetState(newRationalNumeratorAtom)
+							resetState(newRationalDenominatorAtom)
+						}}
+					>
+						Add
+					</button>
+				</new-rational>
+			</main>
+		</app>
+	)
+}
+
+export function RationalBreakdown(props: { key: RationalKey }): JSX.Element {
+	const rational = useO(rationalAtoms, props.key)
+	const simplified = useO(simplifiedSelectors, props.key)
+	const float = useO(floatSelectors, props.key)
+	const isFloatPrecise = useO(isFloatPreciseSelectors, props.key)
+	const approximateValue = useO(approximateValueSelectors, props.key)
+	const bits = useO(numberBitsSelectors, props.key)
+	return (
+		<rational-breakdown>
+			<fraction-list>
+				<For each={[...rational().entries()]}>
+					{([denominator, numerator], index) => {
+						return (
+							<>
+								<Show when={index() !== 0}>
+									<plus>+</plus>
+								</Show>
+								<Fraction numerator={numerator} denominator={denominator} />
+							</>
+						)
+					}}
+				</For>
+				<infix-buttons>
+					<button
+						type="button"
+						onClick={() => {
+							runTransaction(combineIntoRationalTx)(props.key, `sub`)
+						}}
+					>
+						−
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							runTransaction(combineIntoRationalTx)(props.key, `add`)
+						}}
+					>
+						+
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							runTransaction(combineIntoRationalTx)(props.key, `div`)
+						}}
+					>
+						÷
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							runTransaction(combineIntoRationalTx)(props.key, `mul`)
+						}}
+					>
+						×
+					</button>
+				</infix-buttons>
+				<RationalCombineFields key={props.key} />
+			</fraction-list>
+
+			<equals>=</equals>
+			<Fraction numerator={simplified()[0]} denominator={simplified()[1]} />
+			<equals>{isFloatPrecise() ? `=` : `≈`}</equals>
+			<quotient>
+				<quotient-bits>
+					<For each={bits()}>
+						{(bit) => <bit data-css={bit === `1` ? `one` : undefined} />}
+					</For>
+				</quotient-bits>
+				<number>{isFloatPrecise() ? float() : approximateValue()}</number>
+			</quotient>
+		</rational-breakdown>
+	)
+}
+
+export function Fraction(props: {
+	numerator: bigint
+	denominator: bigint
+}): JSX.Element {
+	return (
+		<fraction>
+			<numerator data-css={props.numerator === 1n ? `one` : undefined}>
+				{Number(props.numerator)}
+			</numerator>
+			<solidus />
+			<denominator data-css={props.denominator === 1n ? `one` : undefined}>
+				{Number(props.denominator)}
+			</denominator>
+		</fraction>
+	)
+}
+
+export function RationalCombineFields({
+	key,
+}: {
+	key: RationalKey
+}): JSX.Element {
+	const numeratorAtom = findState(newNumeratorAtoms, key)
+	const denominatorAtom = findState(newDenominatorAtoms, key)
+	return (
+		<RationalFields
+			numeratorAtom={numeratorAtom}
+			denominatorAtom={denominatorAtom}
+		/>
+	)
+}
+
+export function RationalFields({
+	numeratorAtom,
+	denominatorAtom,
+}: {
+	numeratorAtom: AtomToken<bigint | undefined>
+	denominatorAtom: AtomToken<bigint | undefined>
+}): JSX.Element {
+	const numerator = useO(numeratorAtom)
+	const setNumerator = useI(numeratorAtom)
+	const denominator = useO(denominatorAtom)
+	const setDenominator = useI(denominatorAtom)
+	return (
+		<fieldset>
+			<input
+				type="number"
+				value={numerator()?.toString()}
+				onInput={(event) => {
+					setNumerator(BigInt(event.currentTarget.value))
+				}}
+				placeholder="1"
+			/>
+			<solidus />
+			<input
+				type="number"
+				value={denominator()?.toString()}
+				onInput={(event) => {
+					setDenominator(BigInt(event.currentTarget.value))
+				}}
+				placeholder="1"
+			/>
+		</fieldset>
+	)
+}

package/src/App.tsx.module.css

@@ -0,0 +1,101 @@
+/** biome-ignore-all lint/correctness/noUnknownTypeSelector: <explanation> */
+app.class {
+	--line: rgba(23, 36, 51, 0.14);
+
+	& /* local globals */,
+	* {
+		display: flex;
+	}
+
+	flex-direction: column;
+
+	fraction,
+	fieldset {
+		flex-flow: column;
+		font-size: 24px;
+		border: none;
+		padding: 0;
+		> numerator,
+		> denominator,
+		> input {
+			margin: 0;
+			height: 36px;
+			flex-grow: 1;
+			align-items: center;
+			justify-content: center;
+			&[data-css="one"] {
+				color: #0002;
+			}
+		}
+		> solidus {
+			height: 2px;
+			background: #000;
+		}
+	}
+
+	> header {
+		align-items: center;
+		justify-content: space-between;
+		padding: 12px;
+		> h1 {
+		}
+		> button {
+			align-items: center;
+			justify-content: center;
+		}
+	}
+	> main {
+		padding: 2px;
+		gap: 2px;
+		flex-flow: column;
+		> rational-breakdown {
+			border: 1px solid #0002;
+			padding: 2px 12px;
+			> fraction-list {
+				flex-grow: 1;
+				> plus {
+					font-size: 30px;
+					color: #0002;
+					align-items: center;
+				}
+				> infix-buttons {
+					flex-flow: column;
+				}
+			}
+			> equals {
+				font-size: 48px;
+				align-items: center;
+				color: #0002;
+			}
+			> fraction {
+			}
+			> quotient {
+				align-items: center;
+				font-size: 48px;
+				position: relative;
+				> quotient-bits {
+					width: 40px;
+					position: absolute;
+					top: 0;
+					right: 0;
+					flex-wrap: wrap;
+					align-items: flex-start;
+					justify-content: flex-start;
+					justify-items: flex-start;
+					align-content: flex-start;
+					> bit {
+						flex-shrink: 0;
+						flex-grow: 0;
+						height: 5px;
+						width: 5px;
+						background: none;
+						border: 1px solid #0002;
+						&[data-css="one"] {
+							background: #0002;
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/src/globals.css

@@ -0,0 +1,99 @@
+:root {
+	--bg: #f6f1e8;
+	--bg-deep: #efe3d0;
+	--panel: rgba(255, 252, 247, 0.86);
+	--panel-strong: #fffaf2;
+	--ink: #172433;
+	--muted: #5d6670;
+	--gold: #d88d1f;
+	--gold-soft: #f5d8a5;
+	--mint: #bfd7c2;
+	--line: rgba(23, 36, 51, 0.14);
+	--shadow: 0 24px 80px rgba(55, 33, 8, 0.12);
+	--radius-xl: 28px;
+	--radius-lg: 20px;
+	--radius-md: 14px;
+	--radius-sm: 10px;
+	font-family:
+		"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
+	color: var(--ink);
+	background:
+		radial-gradient(
+			circle at top left,
+			rgba(216, 141, 31, 0.16),
+			transparent 28%
+		),
+		radial-gradient(
+			circle at right center,
+			rgba(23, 36, 51, 0.12),
+			transparent 30%
+		),
+		linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+	margin: 0;
+	min-height: 100%;
+}
+
+body {
+	min-height: 100vh;
+}
+
+button,
+input,
+select {
+	font: inherit;
+}
+
+button,
+select,
+input {
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+}
+
+button:hover {
+	transform: translateY(-1px);
+	box-shadow: 0 12px 28px rgba(23, 36, 51, 0.14);
+}
+
+button:disabled {
+	cursor: not-allowed;
+	opacity: 0.45;
+	transform: none;
+	box-shadow: none;
+}
+
+button.secondary,
+button.ghost-button {
+	background: transparent;
+	color: var(--ink);
+}
+
+button.secondary {
+	border-style: dashed;
+}
+
+button.ghost-button {
+	padding-inline: 0.85rem;
+}
+
+input,
+select {
+	width: 100%;
+	padding: 0.75rem 0.85rem;
+	background: rgba(255, 255, 255, 0.75);
+}
+
+code {
+	font-family:
+		"SFMono-Regular", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
+	font-size: 0.9em;
+}

package/src/jsx-intrinsic-elements.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable quotes */
+import type * as SolidJs from "solid-js"
+
+declare module "solid-js" {
+	namespace JSX {
+		interface IntrinsicElements {
+			[tagname: string]: SolidJs.JSX.HTMLAttributes<HTMLDivElement>
+		}
+	}
+}

package/src/main.tsx

@@ -0,0 +1,14 @@
+import { StoreProvider } from "atom.io/solid"
+import { render } from "solid-js/web"
+
+import { App } from "./App"
+import "./globals.css"
+
+render(
+	() => (
+		<StoreProvider>
+			<App />
+		</StoreProvider>
+	),
+	document.getElementById(`app`)!,
+)

package/src/tsx.module.css.d.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line quotes
+declare module "*.tsx.module.css" {
+	const maintainableModule: { class: string }
+	export default maintainableModule
+}

package/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+	"compilerOptions": {
+		"target": "ES2024",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"noEmit": true,
+		"strict": true,
+		"allowImportingTsExtensions": true,
+		"exactOptionalPropertyTypes": true,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js",
+		"types": ["vite/client"]
+	},
+	"include": ["src", "vite.config.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" }
+	]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2023",
+		"lib": ["ESNext"],
+		"module": "ESNext",
+		"types": ["node"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts", "eslint.config.ts", "eslint.d.ts", "node"]
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import solid from "vite-plugin-solid"
+import type { UserConfig } from "vite"
+import { defineConfig } from "vite"
+
+const config: UserConfig = defineConfig({
+	plugins: [solid()],
+})
+
+export default config