From b5b065c12c64b6924f4029d9d28cdde4c53f3f7f Mon Sep 17 00:00:00 2001
From: Tom Most <twm@freecog.net>
Date: Sat, 7 Sep 2024 16:52:55 -0700
Subject: [PATCH 1/5] Extract <FracRange />

---
 src/lib/Form.svelte      | 22 ++++++++++++++--------
 src/lib/FracRange.svelte | 30 ++++++++++++++++++++++++++++++
 src/lib/stores.ts        |  8 ++------
 3 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/FracRange.svelte

diff --git a/src/lib/Form.svelte b/src/lib/Form.svelte
index 7dfe14c..9a94677 100644
--- a/src/lib/Form.svelte
+++ b/src/lib/Form.svelte
@@ -13,6 +13,7 @@
         MATERIALS,
     } from "$lib/stores"
     import { frac } from "$lib/frac"
+    import FracRange from "$lib/FracRange.svelte"
 </script>
 
 <h2>Inputs</h2>
@@ -27,10 +28,11 @@
         <input type="number" bind:value={$artY} min="1" step="0.25" required />
     </label>
 
-    <label>
+    <label for="frame-width">
         Frame width
-        <input
-            type="number"
+
+        <FracRange
+            id="frame-width"
             bind:value={$frameWidth}
             max={$frameWidthMax}
             min={$frameWidthMin}
@@ -38,14 +40,15 @@
             required
         />
     </label>
-    <label>
+    <label for="rabbet-width">
         Rabbet width
-        <input
-            type="number"
+        <FracRange
+            id="rabbet-width"
             bind:value={$rabbetWidth}
             max={$rabbetWidthMax}
             min={$rabbetWidthMin}
             step="0.125"
+            required
         />
     </label>
 
@@ -69,7 +72,7 @@
     form,
     .outputs {
         display: grid;
-        grid-template-columns: 1fr 8rem;
+        grid-template-columns: 1fr 12rem;
         gap: 0.5rem;
     }
     label,
@@ -79,9 +82,12 @@
 
     input,
     select {
+        box-sizing: border-box;
+        width: 100%;
         background: inherit;
         color: inherit;
-        border: 1px solid currentColor;
+        border: none;
+        border-bottom: 1px solid currentColor;
         padding: 1px 4px;
         line-height: 1;
     }
diff --git a/src/lib/FracRange.svelte b/src/lib/FracRange.svelte
new file mode 100644
index 0000000..9e86480
--- /dev/null
+++ b/src/lib/FracRange.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { frac } from "$lib/frac"
+
+    export let id: string
+    export let value: number
+    export let min: number
+    export let max: number
+    export let step: number
+    export let required: boolean = false
+</script>
+
+<span class="range">
+    <output for={id}>{frac(value)}"</output>
+    <input type="range" {id} bind:value {min} {max} {step} {required} />
+</span>
+
+<style>
+    .range {
+        display: grid;
+        grid-template-columns: 3rem 1fr;
+    }
+
+    input {
+        width: 100%;
+        box-sizing: border-box;
+        background: inherit;
+        color: inherit;
+        border: none;
+    }
+</style>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index b2ca7a6..85a55e5 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -22,6 +22,8 @@ export const artPadding = readable(1 / 16)
  * Width of the frame material.
  */
 export const frameWidth = writable(1 + 1 / 2)
+export const frameWidthMax = readable(4)
+export const frameWidthMin = readable(1 / 2)
 
 /**
  * Size of the rabbet on the interior of the frame.
@@ -61,12 +63,6 @@ export const frameY = derived(
     }
 )
 
-export const frameWidthMax = readable(4.0)
-export const frameWidthMin = derived(
-    [rabbetWidth],
-    ([$rabbetWidth]) => $rabbetWidth + 1 / 4
-)
-
 /**
  * Absolute minimum length of stock required (no fudge factor).
  */

From fe12c371ca7cdb771acc582bc173e1f5724b6082 Mon Sep 17 00:00:00 2001
From: Tom Most <twm@freecog.net>
Date: Sat, 7 Sep 2024 20:59:25 -0700
Subject: [PATCH 2/5] Rework fraction rendering and add parsing

Rather than using Fraction.js to render fractions, do some
very simple math to denominators that match the power-of-two
denominators that appear on a ruler or measuring tape.

Also add a function for parsing mixed fraction strings.
---
 package-lock.json    | 16 --------
 package.json         |  5 +--
 src/index.test.ts    |  7 ----
 src/lib/frac.test.ts | 70 +++++++++++++++++++++++++++++++++++
 src/lib/frac.ts      | 87 +++++++++++++++++++++++++++++++++++++-------
 5 files changed, 145 insertions(+), 40 deletions(-)
 delete mode 100644 src/index.test.ts
 create mode 100644 src/lib/frac.test.ts

diff --git a/package-lock.json b/package-lock.json
index b93b6d0..52ba0e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,6 @@
         "": {
             "name": "halo",
             "version": "0.0.1",
-            "dependencies": {
-                "fraction.js": "^4.3.7"
-            },
             "devDependencies": {
                 "@playwright/test": "^1.28.1",
                 "@sveltejs/adapter-auto": "^3.0.0",
@@ -2246,19 +2243,6 @@
             "dev": true,
             "license": "ISC"
         },
-        "node_modules/fraction.js": {
-            "version": "4.3.7",
-            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-            "license": "MIT",
-            "engines": {
-                "node": "*"
-            },
-            "funding": {
-                "type": "patreon",
-                "url": "https://github.com/sponsors/rawify"
-            }
-        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 0c15aa0..f9a4d6e 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,5 @@
         "vite": "^5.0.3",
         "vitest": "^2.0.0"
     },
-    "type": "module",
-    "dependencies": {
-        "fraction.js": "^4.3.7"
-    }
+    "type": "module"
 }
diff --git a/src/index.test.ts b/src/index.test.ts
deleted file mode 100644
index 831dbb4..0000000
--- a/src/index.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { describe, it, expect } from "vitest"
-
-describe("sum test", () => {
-    it("adds 1 + 2 to equal 3", () => {
-        expect(1 + 2).toBe(3)
-    })
-})
diff --git a/src/lib/frac.test.ts b/src/lib/frac.test.ts
new file mode 100644
index 0000000..a96b19d
--- /dev/null
+++ b/src/lib/frac.test.ts
@@ -0,0 +1,70 @@
+import { describe, test, expect } from "vitest"
+import { frac, parseFrac } from "$lib/frac"
+
+describe("frac renders numbers as mixed fractions", () => {
+    const cases: [number, string][] = [
+        [-1 - 3 / 8, "-1\u20093⁄8"],
+        [-1, "-1"],
+        [0, "0"],
+        [1, "1"],
+        [1.5, "1\u20091⁄2"],
+        [12.25, "12\u20091⁄4"],
+        [-6.125, "-6\u20091⁄8"],
+        [1 / 4, "1⁄4"],
+        [7 / 8, "7⁄8"],
+        [15 / 16, "15⁄16"],
+        [1 + 17 / 32, "1\u200917⁄32"],
+        [23 / 32, "23⁄32"],
+        [3 + 61.5 / 64, "3\u200931⁄32"],
+    ]
+    test.for(cases)("renders %d as %s", ([n, s]) => {
+        expect(frac(n)).toEqual(s)
+    })
+})
+
+describe("parseFrac converts strings to numbers", () => {
+    const cases: [string, number][] = [
+        // Whole numbers
+        ["1", 1],
+        ["1.", 1],
+        ["0", 0],
+        ["-1", -1],
+        ["-1.", -1],
+        ["-1.0", -1],
+        // Decimal numbers
+        ["1.25", 1.25],
+        ["+1.25", 1.25],
+        ["+12.25", 12.25],
+        // Vulgar fractions
+        ["1/64", 1 / 64],
+        ["5/32", 5 / 32],
+        ["-1/4", -0.25],
+        ["+6/32", 6 / 32],
+        // Mixed fractions
+        ["1 3/4", 1.75],
+        ["-1 1/2", -1.5],
+        // Basic expressions
+        ["6+1/2", 6.5],
+        ["4.5-4.5", 0],
+        ["4.0/2-2+3/5", 3 / 5],
+        ["8 1/2 1/4 1/8 -3/4", 8 + 7 / 8 - 3 / 4],
+        ["8 1/2 + 1/4 +1/8 - 3/4", 8 + 7 / 8 - 3 / 4],
+        // Invalid input
+        ["", NaN],
+        ["abc", NaN],
+        ["12abc", NaN],
+        ["abc123", NaN],
+        [" 123", NaN],
+        ["123 ", NaN],
+    ]
+    test.for(cases)("parses %j as %d", ([s, n]) => {
+        expect(parseFrac(s)).toEqual(n)
+    })
+})
+
+describe('parseFrac(frac(n)) round-trips within 1/32"', () => {
+    test.for([1, 1.5, 23 / 32, 9000, -128 + 3 / 32])("%d", (n) => {
+        const s = frac(n)
+        expect(parseFrac(s)).toEqual(n)
+    })
+})
diff --git a/src/lib/frac.ts b/src/lib/frac.ts
index 15d0ecd..5a98d4e 100644
--- a/src/lib/frac.ts
+++ b/src/lib/frac.ts
@@ -1,21 +1,82 @@
-import Fraction from "fraction.js"
-
 /**
- * Present a number as a fraction.
+ * Present a number as a mixed fraction.
+ *
+ * The value is rounded to the nearest 1⁄32nd, and the
+ * denominator is one of 32, 16, 8, or 4, as on a measuring tape.
  */
 export function frac(n: number): string {
-    const f = new Fraction(n).simplify(1 / 64)
-    const s = f.toFraction(true)
-
-    const m = / (\d+)\/(\d+)$/.exec(s)
-    if (m) {
-        const whole = s.substring(0, m.index)
-        const num = m[1]
-        const denom = m[2]
-        // U+2009 is the thin space
+    const abs = Math.abs(n)
+    const whole = Math.floor(abs)
+    const frac = abs % 1.0
+    const hasFraction = frac !== 0.0
+
+    let s = n < 0 ? "-" : ""
+
+    if (whole != 0 || !hasFraction) {
+        s += whole
+    }
+
+    if (hasFraction) {
+        if (s.length) {
+            // U+2009 is the thin space
+            s += "\u2009"
+        }
+        let denom = 32
+        let num = Math.round(frac * denom)
+
+        // Simplify the fraction
+        while (num % 2 === 0) {
+            denom /= 2
+            num /= 2
+        }
+
         // U+2044 is the fraction slash, which in capable fonts
         // triggers proper fractional presentation.
-        return `${whole}\u2009${num}\u2044${denom}`
+        s += `${num}\u2044${denom}`
     }
+
     return s
 }
+
+/**
+ * Parse a string containing fractions as a number.
+ */
+export function parseFrac(s: string): number {
+    const matches = [
+        ...s.matchAll(
+            /((?:[+-]\s*)?)(\.\d+|\d+(?:\.\d*)?)(?:[\/\u2044](\d+))?(\s+|$|(?=[.+-]))/dg
+        ),
+    ]
+    if (matches.length === 0 || matches[0].index !== 0) {
+        // No match, or leading whitespace.
+        return NaN
+    }
+
+    let n = 0
+    let lastSign: "+" | "-" = "+"
+    for (const m of matches) {
+        let sign = m[1].substring(0, 1)
+        let v = parseFloat(m[2])
+        const denom = m[3]
+        if (denom) {
+            v /= parseFloat(denom)
+        }
+        if (!sign) {
+            sign = lastSign
+        }
+        if (sign === "+") {
+            n += v
+            lastSign = "+"
+        } else {
+            n -= v
+            lastSign = "-"
+        }
+    }
+
+    const [lastStart, _] = matches[matches.length - 1].indices![4]
+    if (lastStart !== s.length) {
+        // Failure to match, or trailing whitespace or other gunk.
+        return NaN
+    }
+    return n
+}

From 9c4a4c59c962a0b1aab3db8840e0c7a7589c53dd Mon Sep 17 00:00:00 2001
From: Tom Most <twm@freecog.net>
Date: Sat, 7 Sep 2024 21:47:34 -0700
Subject: [PATCH 3/5] Create <FracInput /> component

It allows you to type fractions.
---
 src/lib/Form.svelte      | 75 +++++++++++++++--------------------
 src/lib/FracInput.svelte | 85 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/FracInput.svelte

diff --git a/src/lib/Form.svelte b/src/lib/Form.svelte
index 9a94677..34db728 100644
--- a/src/lib/Form.svelte
+++ b/src/lib/Form.svelte
@@ -13,59 +13,51 @@
         MATERIALS,
     } from "$lib/stores"
     import { frac } from "$lib/frac"
+    import FracInput from "$lib/FracInput.svelte"
     import FracRange from "$lib/FracRange.svelte"
 </script>
 
 <h2>Inputs</h2>
 
 <form action="#" method="GET">
-    <label>
-        Art width
-        <input type="number" bind:value={$artX} min="1" step="0.25" required />
-    </label>
-    <label>
-        Art height
-        <input type="number" bind:value={$artY} min="1" step="0.25" required />
-    </label>
+    <label for="art-width"> Art width </label>
+    <FracInput id="art-width" bind:value={$artX} min={1} required />
+    <label for="art-height"> Art height </label>
+    <FracInput id="art-height" bind:value={$artY} min={1} required />
 
-    <label for="frame-width">
-        Frame width
+    <label for="frame-width"> Frame width </label>
 
-        <FracRange
-            id="frame-width"
-            bind:value={$frameWidth}
-            max={$frameWidthMax}
-            min={$frameWidthMin}
-            step="0.125"
-            required
-        />
-    </label>
-    <label for="rabbet-width">
-        Rabbet width
-        <FracRange
-            id="rabbet-width"
-            bind:value={$rabbetWidth}
-            max={$rabbetWidthMax}
-            min={$rabbetWidthMin}
-            step="0.125"
-            required
-        />
-    </label>
+    <FracRange
+        id="frame-width"
+        bind:value={$frameWidth}
+        max={$frameWidthMax}
+        min={$frameWidthMin}
+        step={0.125}
+        required
+    />
+    <label for="rabbet-width"> Rabbet width </label>
+    <FracRange
+        id="rabbet-width"
+        bind:value={$rabbetWidth}
+        max={$rabbetWidthMax}
+        min={$rabbetWidthMin}
+        step={0.125}
+        required
+    />
 
-    <label>
-        Material
-        <select bind:value={$material}>
-            {#each MATERIALS as material}
-                <option value={material}>{material.name}</option>
-            {/each}
-        </select>
-    </label>
+    <label for="material"> Material </label>
+    <select id="material" bind:value={$material}>
+        {#each MATERIALS as material}
+            <option value={material}>{material.name}</option>
+        {/each}
+    </select>
 </form>
 
 <h2>Outputs</h2>
 
 <div class="outputs">
-    <p class="label">Linear stock <span>{frac($stockLength)}"</span></p>
+    <label for="linear-stock">Linear stock </label>
+    <output id="linear-stock">{frac($stockLength)}"</output>
 </div>
 
 <style>
@@ -75,12 +67,7 @@
         grid-template-columns: 1fr 12rem;
         gap: 0.5rem;
     }
-    label,
-    .label {
-        display: contents;
-    }
 
-    input,
     select {
         box-sizing: border-box;
         width: 100%;
diff --git a/src/lib/FracInput.svelte b/src/lib/FracInput.svelte
new file mode 100644
index 0000000..3ead720
--- /dev/null
+++ b/src/lib/FracInput.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { frac, parseFrac } from "$lib/frac"
+
+    function validate(
+        input: HTMLInputElement,
+        v: number,
+        min: number | null,
+        max: number | null
+    ) {
+        if (isNaN(v)) {
+            input.setCustomValidity("Enter a mixed fraction or decimal number")
+            return false
+        }
+        if (min != null && v < min) {
+            input.setCustomValidity(`Must be at least ${frac(min)}`)
+            return false
+        }
+        if (max != null && v > max) {
+            input.setCustomValidity(`Must not exceed ${frac(max)}`)
+            return false
+        }
+        input.setCustomValidity("")
+        return true
+    }
+
+    export let id: string
+    export let value: number
+    export let min: number | null = null
+    export let max: number | null = null
+    export let required: boolean = false
+
+    let focused: boolean = false
+    let input: HTMLInputElement
+    let rawValue = frac(value)
+    let displayValue = frac(value) + '"'
+
+    $: {
+        // Round to the nearest 1⁄32nd to match the masked value.
+        let v = Math.round(parseFrac(rawValue) * 32) / 32
+
+        if (input) {
+            if (validate(input, v, min, max)) {
+                value = v
+                displayValue = frac(v) + '"'
+            } else {
+                displayValue = rawValue
+            }
+        }
+    }
+</script>
+
+<span class="range">
+    <input
+        type="text"
+        {id}
+        value={focused ? rawValue : displayValue}
+        bind:this={input}
+        {required}
+        on:input={() => {
+            rawValue = input.value
+        }}
+        on:focus={() => {
+            focused = true
+        }}
+        on:blur={() => {
+            focused = false
+        }}
+    />
+</span>
+
+<style>
+    input {
+        box-sizing: border-box;
+        width: 100%;
+        background: inherit;
+        color: inherit;
+        border: none;
+        border-bottom: 1px solid currentColor;
+        padding: 0;
+        line-height: 1;
+    }
+    :invalid {
+        border-bottom-color: red;
+    }
+</style>

From 9a1ad630666368fee2dacebe07bfbd1ef6757eee Mon Sep 17 00:00:00 2001
From: Tom Most <twm@freecog.net>
Date: Sat, 7 Sep 2024 21:57:00 -0700
Subject: [PATCH 4/5] Update screenshots

---
 tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png | 4 ++--
 tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png   | 4 ++--
 tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png
index d41f20b..a97f813 100644
--- a/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png
+++ b/tests/test.ts-snapshots/calculator-layout-1-Desktop-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dfd3f927329c13f04b21736d2f193076fddb12d7fab4efda8f331116ddc0847a
-size 267619
+oid sha256:baec87da52f1ca95b7ee03713c597ad8f3f0b2ef6dddd736372077705a469112
+size 269629
diff --git a/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png
index 8983beb..58c8947 100644
--- a/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png
+++ b/tests/test.ts-snapshots/calculator-layout-1-Phone-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6b887d0b03c4c6d6e297f22f96af4ad6cb19d36a4466f50d9a74ede44911eee4
-size 518370
+oid sha256:49cd414b6f94ae7258ef18581f31f082e83d6bb0301d5b00d35aea0b065eb6a3
+size 543009
diff --git a/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png b/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png
index 3c4eb63..d86bbc7 100644
--- a/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png
+++ b/tests/test.ts-snapshots/calculator-layout-1-Tablet-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:69da72f7d58bab09030fdf0f59c830f97e81f9f2598c5c0bf1262f21a926a220
-size 557752
+oid sha256:d304b822cfa92a9c8f5fcbf2eaa4e53f6266e1da41af5ea8f3f26a9e0006d7a9
+size 558511

From a57d13e28e94035944120070b30056f6a865eed7 Mon Sep 17 00:00:00 2001
From: Tom Most <twm@freecog.net>
Date: Sat, 7 Sep 2024 22:30:34 -0700
Subject: [PATCH 5/5] Disallow decimal denominators

---
 src/lib/frac.test.ts | 1 +
 src/lib/frac.ts      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/frac.test.ts b/src/lib/frac.test.ts
index a96b19d..9d4592f 100644
--- a/src/lib/frac.test.ts
+++ b/src/lib/frac.test.ts
@@ -56,6 +56,7 @@ describe("parseFrac converts strings to numbers", () => {
         ["abc123", NaN],
         [" 123", NaN],
         ["123 ", NaN],
+        ["1/2.3", NaN],
     ]
     test.for(cases)("parses %j as %d", ([s, n]) => {
         expect(parseFrac(s)).toEqual(n)
diff --git a/src/lib/frac.ts b/src/lib/frac.ts
index 5a98d4e..b25db95 100644
--- a/src/lib/frac.ts
+++ b/src/lib/frac.ts
@@ -44,7 +44,7 @@ export function frac(n: number): string {
 export function parseFrac(s: string): number {
     const matches = [
         ...s.matchAll(
-            /((?:[+-]\s*)?)(\.\d+|\d+(?:\.\d*)?)(?:[\/\u2044](\d+))?(\s+|$|(?=[.+-]))/dg
+            /((?:[+-]\s*)?)(\.\d+|\d+(?:\.\d*)?)(?:[/\u2044](\d+))?(\s+|$|(?=[+-]))/dg
         ),
     ]
     if (matches.length === 0 || matches[0].index !== 0) {
@@ -73,7 +73,7 @@ export function parseFrac(s: string): number {
         }
     }
 
-    const [lastStart, _] = matches[matches.length - 1].indices![4]
+    const [lastStart] = matches[matches.length - 1].indices![4]
     if (lastStart !== s.length) {
         // Failure to match, or trailing whitespace or other gunk.
         return NaN