diff --git a/package-lock.json b/package-lock.json
index 4fa86aaf..e596cb50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "harmonic-entropy": "^0.2.0",
         "isomorphic-qwerty": "^0.0.2",
-        "ji-lattice": "^0.0.3",
+        "ji-lattice": "^0.2.0",
         "jszip": "^3.10.1",
         "moment-of-symmetry": "^0.8.0",
         "pinia": "^2.1.7",
@@ -3802,9 +3802,9 @@
       }
     },
     "node_modules/ji-lattice": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/ji-lattice/-/ji-lattice-0.0.3.tgz",
-      "integrity": "sha512-LAO8u0aO4qpDr7WucJmWRpXocy1pnIYlvDNjXmS4/VUhMc4xxMjTzLf4TN0kL/bWTPIhAxRd+0amTEjN1Mnptg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ji-lattice/-/ji-lattice-0.2.0.tgz",
+      "integrity": "sha512-kX6Q598XiFTvEFuT+ySMC+YJcOC78aF04hT3VJGtHn6zGKjr6Mq8rFacjhkDgKV27c7vz1ma1x1C6geOT1QP6w==",
       "dependencies": {
         "xen-dev-utils": "^0.2.8"
       },
diff --git a/package.json b/package.json
index c3205ece..2470d3bb 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "harmonic-entropy": "^0.2.0",
     "isomorphic-qwerty": "^0.0.2",
-    "ji-lattice": "^0.0.3",
+    "ji-lattice": "^0.2.0",
     "jszip": "^3.10.1",
     "moment-of-symmetry": "^0.8.0",
     "pinia": "^2.1.7",
diff --git a/src/components/EdoCycles.vue b/src/components/EdoCycles.vue
index 45132a1d..aae015a5 100644
--- a/src/components/EdoCycles.vue
+++ b/src/components/EdoCycles.vue
@@ -108,7 +108,6 @@ const viewBox = computed(
           :y="v.y + store.size * store.labelOffset * labelY(j, v.indices.length)"
           :font-size="`${1.1 * store.size}px`"
           :stroke-width="store.size * 0.01"
-          dominant-baseline="middle"
         >
           {{ labels[idx] }}
         </text>
diff --git a/src/components/Faux3DLattice.vue b/src/components/Faux3DLattice.vue
new file mode 100644
index 00000000..22be0375
--- /dev/null
+++ b/src/components/Faux3DLattice.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+/**
+ * Just intonation lattice visualization with a 3D look.
+ * Not as convincing as OpenGL, but much less bloated than three.js.
+ */
+import { useJiLatticeStore } from '@/stores/ji-lattice'
+import { spanLattice3D } from 'ji-lattice'
+import { TimeMonzo, type Interval } from 'sonic-weave'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+
+const EPSILON = 1e-6
+
+/** Near field z-index cutoff */
+const NEAR_PLANE = 0.5
+
+const store = useJiLatticeStore()
+
+const props = defineProps<{
+  relativeIntervals: Interval[]
+  labels: string[]
+  colors: string[]
+  heldNotes: Set<number>
+}>()
+
+const svgElement = ref<SVGSVGElement | null>(null)
+
+const viewBox = reactive([-1, -1, 2, 2])
+
+const monzos = computed(() => {
+  const numComponents = store.horizontalCoordinates.length
+  const result: number[][] = []
+  for (const interval of props.relativeIntervals) {
+    const value = interval.value.clone()
+    if (value instanceof TimeMonzo) {
+      value.numberOfComponents = numComponents
+      const monzo = value.primeExponents.map((pe) => pe.valueOf())
+      result.push(monzo)
+    } else {
+      result.push(Array(numComponents).fill(0))
+    }
+  }
+  return result
+})
+
+const lattice = computed(() => {
+  const result = spanLattice3D(monzos.value, store.latticeOptions3D)
+  // Center everything so that the vanishing point is at the center of the view box
+  const inorm = 1 / result.vertices.length
+  const avgX = result.vertices.reduce((s, v) => s + v.x, 0) * inorm
+  const avgY = result.vertices.reduce((s, v) => s + v.y, 0) * inorm
+  const avgZ = result.vertices.reduce((s, v) => s + v.z, 0) * inorm
+  result.vertices = result.vertices.map((v) => ({
+    ...v,
+    x: v.x - avgX,
+    y: v.y - avgY,
+    z: v.z - avgZ
+  }))
+  result.edges = result.edges.map((e) => ({
+    ...e,
+    x1: e.x1 - avgX,
+    y1: e.y1 - avgY,
+    z1: e.z1 - avgZ,
+    x2: e.x2 - avgX,
+    y2: e.y2 - avgY,
+    z2: e.z2 - avgZ
+  }))
+  return result
+})
+
+watch(
+  () => [
+    svgElement.value,
+    lattice.value,
+    props.labels,
+    store.labelOffset,
+    store.size,
+    store.showLabels
+  ],
+  (dependencies) => {
+    const element = dependencies[0] as unknown as SVGSVGElement
+    if (!element) {
+      return
+    }
+    // Must wait for Vue to render elements before calculating bounding boxes
+    nextTick(() => {
+      viewBox[0] = Infinity
+      viewBox[1] = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const el of element.children as unknown as SVGCircleElement[]) {
+        const { x, y, width, height } = el.getBBox({
+          stroke: true,
+          fill: true
+        })
+        viewBox[0] = Math.min(viewBox[0], x)
+        viewBox[1] = Math.min(viewBox[1], y)
+        maxX = Math.max(maxX, x + width)
+        maxY = Math.max(maxY, y + height)
+      }
+      viewBox[2] = maxX - viewBox[0]
+      viewBox[3] = maxY - viewBox[1]
+      viewBox[0] -= store.size * 0.5
+      viewBox[1] -= store.size * 0.5
+      viewBox[2] += store.size
+      viewBox[3] += store.size
+    })
+  }
+)
+
+const elements = computed(() => {
+  const result = []
+  for (const vertex of lattice.value.vertices) {
+    const z = vertex.z + store.depth
+    if (z < NEAR_PLANE) {
+      continue
+    }
+    const s = store.depth / z
+    const cx = vertex.x * s
+    const cy = vertex.y * s
+    const r = store.size * s
+    const node: any = {
+      tag: 'circle',
+      cx,
+      cy,
+      r,
+      'stroke-width': 0.1 * r,
+      class: { node: true, held: props.heldNotes.has(vertex.index!) },
+      z
+    }
+    if (vertex.index === undefined) {
+      node.class.auxiliary = true
+      node.r *= 0.4
+    } else {
+      node.fill = props.colors[vertex.index]
+    }
+    result.push(node)
+    if (store.showLabels && vertex.index !== undefined) {
+      result.push({
+        tag: 'text',
+        x: cx,
+        y: cy - store.labelOffset * r,
+        'font-size': `${3 * r}px`,
+        'stroke-width': 0.08 * r,
+        class: { 'node-label': true },
+        body: props.labels[vertex.index],
+        z: z - EPSILON
+      })
+    }
+  }
+  for (const edge of lattice.value.edges) {
+    const z1 = edge.z1 + store.depth
+    const z2 = edge.z2 + store.depth
+    if (z1 < NEAR_PLANE || z2 < NEAR_PLANE) {
+      continue
+    }
+    const s1 = store.depth / z1
+    const x1 = edge.x1 * s1
+    const y1 = edge.y1 * s1
+    const s2 = store.depth / z2
+    const x2 = edge.x2 * s2
+    const y2 = edge.y2 * s2
+    let u = x2 - x1
+    let v = y2 - y1
+    const r = Math.hypot(u, v)
+    if (r < EPSILON) {
+      continue
+    }
+    u /= r
+    v /= r
+    if (edge.type === 'auxiliary') {
+      u *= 0.1
+      v *= 0.1
+    } else {
+      u *= 0.5
+      v *= 0.5
+    }
+    const points = `${x1 + v * s1},${y1 - u * s1} ${x1 - v * s1},${y1 + u * s1} ${x2 - v * s2},${y2 + u * s2} ${x2 + v * s2},${y2 - u * s2}`
+    if (store.grayExtras && edge.type === 'custom') {
+      ;(edge as any).type = 'border'
+    }
+    result.push({
+      tag: 'polygon',
+      points,
+      class: `edge ${edge.type}`,
+      z: Math.max(z1, z2) + EPSILON
+    })
+  }
+  result.sort((a, b) => b.z - a.z)
+  return result
+})
+</script>
+
+<template>
+  <svg
+    ref="svgElement"
+    class="lattice"
+    xmlns="http://www.w3.org/2000/svg"
+    :viewBox="viewBox.join(' ')"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <template v-for="(element, i) of elements" :key="i">
+      <circle v-if="element.tag === 'circle'" v-bind="element" />
+      <polygon v-if="element.tag === 'polygon'" v-bind="element" />
+      <text v-if="element.tag === 'text'" v-bind="element">{{ element.body }}</text>
+    </template>
+  </svg>
+</template>
diff --git a/src/components/GridLattice.vue b/src/components/GridLattice.vue
index 7f050b44..b4062946 100644
--- a/src/components/GridLattice.vue
+++ b/src/components/GridLattice.vue
@@ -126,7 +126,6 @@ watch(
           :y="v.y + store.size * store.labelOffset * labelY(j, v.indices.length)"
           :font-size="`${2.5 * store.size}px`"
           :stroke-width="store.size * 0.05"
-          dominant-baseline="middle"
         >
           {{ labels[idx] }}
         </text>
diff --git a/src/components/JustIntonationLattice.vue b/src/components/JustIntonationLattice.vue
index 8b4767bc..05750a7c 100644
--- a/src/components/JustIntonationLattice.vue
+++ b/src/components/JustIntonationLattice.vue
@@ -192,7 +192,6 @@ watch(
         v-for="(v, i) of lattice.vertices"
         :key="i"
         class="node-label"
-        dominant-baseline="middle"
         :x="v.x"
         :y="v.y - store.labelOffset * store.size"
         :font-size="`${3 * store.size}px`"
diff --git a/src/stores/ji-lattice.ts b/src/stores/ji-lattice.ts
index 34e9fab0..73f95f1e 100644
--- a/src/stores/ji-lattice.ts
+++ b/src/stores/ji-lattice.ts
@@ -1,6 +1,15 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { kraigGrady9, type LatticeOptions, scottDakota24, primeRing72, align } from 'ji-lattice'
+import {
+  kraigGrady9,
+  type LatticeOptions,
+  scottDakota24,
+  primeRing72,
+  align,
+  type LatticeOptions3D,
+  WGP9,
+  primeSphere
+} from 'ji-lattice'
 import { LOG_PRIMES, mmod } from 'xen-dev-utils'
 import { computedAndError } from '@/utils'
 import { TimeMonzo, parseChord } from 'sonic-weave'
@@ -52,6 +61,48 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
       )
     }
   })
+  const xs = computed({
+    get() {
+      return xCoords.map((x) => x.toFixed(2)).join(' ')
+    },
+    set(value: string) {
+      xCoords.length = 0
+      xCoords.push(
+        ...value.split(' ').map((v) => {
+          const c = parseFloat(v)
+          return isNaN(c) ? 0 : c
+        })
+      )
+    }
+  })
+  const ys = computed({
+    get() {
+      return yCoords.map((y) => y.toFixed(2)).join(' ')
+    },
+    set(value: string) {
+      yCoords.length = 0
+      yCoords.push(
+        ...value.split(' ').map((v) => {
+          const c = parseFloat(v)
+          return isNaN(c) ? 0 : c
+        })
+      )
+    }
+  })
+  const zs = computed({
+    get() {
+      return zCoords.map((z) => z.toFixed(2)).join(' ')
+    },
+    set(value: string) {
+      zCoords.length = 0
+      zCoords.push(
+        ...value.split(' ').map((v) => {
+          const c = parseFloat(v)
+          return isNaN(c) ? 0 : c
+        })
+      )
+    }
+  })
 
   const edgeMonzos = computed(() => {
     const numComponents = horizontalCoordinates.length
@@ -79,12 +130,31 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
     }
   })
 
+  const opts3D = WGP9(0)
+  const xCoords = reactive(opts3D.horizontalCoordinates)
+  const yCoords = reactive(opts3D.verticalCoordinates)
+  const zCoords = reactive(opts3D.depthwiseCoordinates)
+  const depth = ref(100)
+
+  const latticeOptions3D = computed<LatticeOptions3D>(() => {
+    return {
+      horizontalCoordinates: xCoords,
+      verticalCoordinates: yCoords,
+      depthwiseCoordinates: zCoords,
+      maxDistance: maxDistance.value,
+      edgeMonzos: edgeMonzos.value,
+      mergeEdges: false
+    }
+  })
+
   watch(rotation, (newValue) => {
     if (newValue < 0 || newValue >= 360) {
       rotation.value = mmod(newValue, 360)
     }
   })
 
+  // 2D presets
+
   function kraigGrady(equaveIndex = 0) {
     size.value = 2
     const kg = kraigGrady9(equaveIndex)
@@ -97,45 +167,112 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
 
   function scott24(equaveIndex = 0) {
     size.value = 2
-    const logs = LOG_PRIMES.slice(0, 24)
-    if (equaveIndex !== 0) {
-      logs.unshift(logs.splice(equaveIndex, 1)[0])
-    }
-    const sd = scottDakota24(logs)
+    const sd = scottDakota24(equaveIndex)
     horizontalCoordinates.length = 0
     horizontalCoordinates.push(...sd.horizontalCoordinates)
     verticalCoordinates.length = 0
     verticalCoordinates.push(...sd.verticalCoordinates)
-    edgesString.value = '6/5'
+    if (equaveIndex === 0) {
+      edgesString.value = '6/5'
+    } else {
+      edgesString.value = ''
+    }
   }
 
   function pr72(equaveIndex = 0) {
     size.value = 4
-    const logs = LOG_PRIMES.slice(0, 72)
-    if (equaveIndex !== 0) {
-      logs.unshift(logs.splice(equaveIndex, 1)[0])
-    }
-    const pr = primeRing72(logs)
+    const pr = primeRing72(equaveIndex)
     horizontalCoordinates.length = 0
     horizontalCoordinates.push(...pr.horizontalCoordinates)
     verticalCoordinates.length = 0
     verticalCoordinates.push(...pr.verticalCoordinates)
-    edgesString.value = '6/5'
+    if (equaveIndex === 0) {
+      edgesString.value = '6/5'
+    } else {
+      edgesString.value = ''
+    }
   }
 
   function pe72(equaveIndex = 0) {
     size.value = 4
-    const logs = LOG_PRIMES.slice(0, 72)
-    if (equaveIndex !== 0) {
-      logs.unshift(logs.splice(equaveIndex, 1)[0])
-    }
-    const pr = primeRing72(logs, false)
-    align(pr, 1, 2)
+    const pr = primeRing72(equaveIndex, undefined, false)
+    align(pr, equaveIndex + 1, equaveIndex + 2)
     horizontalCoordinates.length = 0
     horizontalCoordinates.push(...pr.horizontalCoordinates.map(Math.round))
     verticalCoordinates.length = 0
     verticalCoordinates.push(...pr.verticalCoordinates.map(Math.round))
-    edgesString.value = '6/5'
+    if (equaveIndex === 0) {
+      edgesString.value = '6/5'
+    } else {
+      edgesString.value = ''
+    }
+  }
+
+  // 3D presets
+  function WGP(equaveIndex = 0) {
+    size.value = 2
+    const w = WGP9(equaveIndex)
+    xCoords.length = 0
+    xCoords.push(...w.horizontalCoordinates)
+    yCoords.length = 0
+    yCoords.push(...w.verticalCoordinates)
+    zCoords.length = 0
+    zCoords.push(...w.depthwiseCoordinates)
+    edgesString.value = ''
+  }
+
+  function sphere(equaveIndex = 0, numberOfComponents = 24) {
+    size.value = 2
+    depth.value = 300
+    const ps = primeSphere(equaveIndex, LOG_PRIMES.slice(0, numberOfComponents))
+    const scale = 3000
+    xCoords.length = 0
+    xCoords.push(...ps.horizontalCoordinates.map((x) => Math.round(x * scale) / 100))
+    yCoords.length = 0
+    yCoords.push(...ps.verticalCoordinates.map((y) => Math.round(y * scale) / 100))
+    zCoords.length = 0
+    zCoords.push(...ps.depthwiseCoordinates.map((z) => Math.round(z * scale) / 100))
+    if (equaveIndex === 0) {
+      edgesString.value = '6/5'
+    } else {
+      edgesString.value = ''
+    }
+  }
+
+  function pitch(degrees: number) {
+    const theta = (degrees / 180) * Math.PI
+    const c = Math.cos(theta)
+    const s = Math.sin(theta)
+    for (let i = 0; i < Math.max(yCoords.length, zCoords.length); ++i) {
+      const y = yCoords[i] ?? 0
+      const z = zCoords[i] ?? 0
+      yCoords[i] = c * y + s * z
+      zCoords[i] = c * z - s * y
+    }
+  }
+
+  function yaw(degrees: number) {
+    const theta = (degrees / 180) * Math.PI
+    const c = Math.cos(theta)
+    const s = Math.sin(theta)
+    for (let i = 0; i < Math.max(xCoords.length, zCoords.length); ++i) {
+      const x = xCoords[i] ?? 0
+      const z = zCoords[i] ?? 0
+      xCoords[i] = c * x + s * z
+      zCoords[i] = c * z - s * x
+    }
+  }
+
+  function roll(degrees: number) {
+    const theta = (degrees / 180) * Math.PI
+    const c = Math.cos(theta)
+    const s = Math.sin(theta)
+    for (let i = 0; i < Math.max(xCoords.length, yCoords.length); ++i) {
+      const x = xCoords[i] ?? 0
+      const y = yCoords[i] ?? 0
+      xCoords[i] = c * x + s * y
+      yCoords[i] = c * y - s * x
+    }
   }
 
   return {
@@ -150,16 +287,29 @@ export const useJiLatticeStore = defineStore('ji-lattice', () => {
     rotation,
     drawArrows,
     grayExtras,
+    xCoords,
+    yCoords,
+    zCoords,
+    depth,
     // Computed state
     edgeMonzos,
     edgesError,
     horizontals,
     verticals,
     latticeOptions,
+    latticeOptions3D,
+    xs,
+    ys,
+    zs,
     // Methods
     kraigGrady,
     scott24,
     pr72,
-    pe72
+    pe72,
+    WGP,
+    sphere,
+    pitch,
+    yaw,
+    roll
   }
 })
diff --git a/src/stores/state.ts b/src/stores/state.ts
index 45d2cb4b..30f0fc71 100644
--- a/src/stores/state.ts
+++ b/src/stores/state.ts
@@ -8,7 +8,7 @@ export const useStateStore = defineStore('state', () => {
   const heldNotes = reactive(new Map<number, number>())
   const typingActive = ref(true)
 
-  const latticeType = ref<'ji' | 'et' | 'cycles' | 'auto'>('auto')
+  const latticeType = ref<'ji' | 'et' | 'cycles' | '3d' | 'auto'>('auto')
 
   // These user preferences are fetched from local storage.
   const storage = window.localStorage
diff --git a/src/views/LatticeView.vue b/src/views/LatticeView.vue
index f022b4ef..98bc075a 100644
--- a/src/views/LatticeView.vue
+++ b/src/views/LatticeView.vue
@@ -11,6 +11,7 @@ import { useJiLatticeStore } from '@/stores/ji-lattice'
 import { useGridStore } from '@/stores/grid'
 import { useCyclesStore } from '@/stores/edo-cycles'
 import { setAndReportValidity } from '@/utils'
+import Faux3DLattice from '@/components/Faux3DLattice.vue'
 
 const state = useStateStore()
 const scale = useScaleStore()
@@ -21,6 +22,7 @@ const cycles = useCyclesStore()
 const showConfig = ref(false)
 const jiPreset = ref<'nothing' | 'grady' | 'grady3' | 'dakota' | 'pr72' | 'pe72'>('nothing')
 const etPreset = ref<'nothing' | '12' | '53' | '311' | 'b13'>('nothing')
+const preset3D = ref<'nothing' | 'WGP' | 'sphere' | 'sphere3'>('nothing')
 
 const extraEdgesElement = ref<HTMLInputElement | null>(null)
 watch(extraEdgesElement, (newElement) => setAndReportValidity(newElement, jiLattice.edgesError), {
@@ -91,6 +93,20 @@ watch(etPreset, (newValue) => {
   }
 })
 
+watch(preset3D, (newValue) => {
+  switch (newValue) {
+    case 'WGP':
+      jiLattice.WGP()
+      return
+    case 'sphere':
+      jiLattice.sphere()
+      return
+    case 'sphere3':
+      jiLattice.sphere(1)
+      return
+  }
+})
+
 function inferConfig() {
   // Default to 12-TET even if it looks bad
   state.latticeType = 'et'
@@ -133,11 +149,15 @@ function inferConfig() {
     if (d === 1 && isPrime(n)) {
       equaveIndex = primeLimit(n, true) - 1
     }
+    // Set the config for 3D too, but use isometric by default
     if (limit <= 9) {
+      jiLattice.WGP(equaveIndex)
       jiLattice.kraigGrady(equaveIndex)
     } else if (limit <= 24) {
+      jiLattice.sphere(equaveIndex, 24)
       jiLattice.scott24(equaveIndex)
     } else if (equaveIndex < 72) {
+      jiLattice.sphere(equaveIndex, 72)
       jiLattice.pe72(equaveIndex)
     } else {
       return
@@ -223,6 +243,13 @@ onMounted(() => {
       :relativeIntervals="scale.latticeIntervals"
       :heldNotes="heldNotes"
     />
+    <Faux3DLattice
+      v-else-if="state.latticeType === '3d'"
+      :labels="scale.latticeLabels"
+      :colors="scale.latticeColors"
+      :relativeIntervals="scale.latticeIntervals"
+      :heldNotes="heldNotes"
+    />
     <template v-else>
       <h1>Selecting lattice...</h1>
     </template>
@@ -252,6 +279,10 @@ onMounted(() => {
               <input type="radio" id="cycles" value="cycles" v-model="state.latticeType" />
               <label for="cycles">Cycles</label>
             </span>
+            <span>
+              <input type="radio" id="3d" value="3d" v-model="state.latticeType" />
+              <label for="3d">3D</label>
+            </span>
           </div>
           <template v-if="state.latticeType === 'ji'">
             <div class="control">
@@ -417,7 +448,7 @@ onMounted(() => {
               <input id="view-y" type="number" step="0.1" v-model="grid.viewCenterY" />
             </div>
           </template>
-          <template v-if="state.latticeType === 'cycles'">
+          <template v-else-if="state.latticeType === 'cycles'">
             <div class="control">
               <label for="val">Val</label>
               <input type="text" id="val" placeholder="17c" v-model="cycles.valString" />
@@ -439,6 +470,85 @@ onMounted(() => {
               <label for="show-labels">Show labels</label>
             </div>
           </template>
+          <template v-else-if="state.latticeType === '3d'">
+            <div class="control">
+              <label for="preset">Preset</label>
+              <select id="preset" v-model="preset3D">
+                <option value="nothing">--Select preset--</option>
+                <option value="WGP">Wilson-Grady-Pakkanen</option>
+                <option value="sphere">Prime sphere</option>
+                <option value="sphere3">Tritave sphere</option>
+              </select>
+            </div>
+            <div class="control">
+              <label for="max-distance">Maximum connection distance</label>
+              <input
+                id="max-distance"
+                type="number"
+                min="0"
+                max="2"
+                v-model="jiLattice.maxDistance"
+              />
+            </div>
+            <div class="control">
+              <label for="size">Object depth</label>
+              <input id="size" type="number" step="1" v-model="jiLattice.depth" />
+            </div>
+            <div class="control">
+              <label for="size">Text size</label>
+              <input id="size" type="number" min="0.5" step="0.5" v-model="jiLattice.size" />
+            </div>
+            <div class="control">
+              <label for="label-offset">Text offset</label>
+              <input id="label-offset" type="number" step="0.1" v-model="jiLattice.labelOffset" />
+            </div>
+            <div class="control checkbox-container">
+              <input type="checkbox" id="show-labels" v-model="jiLattice.showLabels" />
+              <label for="show-labels">Show labels</label>
+            </div>
+            <div class="control checkbox-container">
+              <input type="checkbox" id="gray-extras" v-model="jiLattice.grayExtras" />
+              <label for="gray-extras">Gray extra edges</label>
+            </div>
+            <div class="control">
+              <label for="extra-edges">Extra edges</label>
+              <input
+                ref="extraEdgesElement"
+                id="extra-edges"
+                type="text"
+                class="control"
+                placeholder="6/5"
+                v-model="jiLattice.edgesString"
+              />
+            </div>
+            <div class="control">
+              <label>Pitch</label>
+              <button @click="jiLattice.pitch(5)">up</button>
+              <button @click="jiLattice.pitch(-5)">down</button>
+            </div>
+            <div class="control">
+              <label>Yaw</label>
+              <button @click="jiLattice.yaw(5)">left</button>
+              <button @click="jiLattice.yaw(-5)">right</button>
+            </div>
+            <div class="control">
+              <label>Roll</label>
+              <button @click="jiLattice.roll(-5)">clockwise</button>
+              <button @click="jiLattice.roll(5)">counterclockwise</button>
+            </div>
+            <div class="control">
+              <label for="horizontals">Horizontal coordinates</label>
+              <input id="horizontals" type="text" v-model="jiLattice.xs" />
+            </div>
+            <div class="control">
+              <label for="verticals">Vertical coordinates</label>
+              <input id="verticals" type="text" v-model="jiLattice.ys" />
+            </div>
+            <div class="control">
+              <label for="verticals">Depthwise coordinates</label>
+              <input id="verticals" type="text" v-model="jiLattice.zs" />
+            </div>
+          </template>
           <template v-else>
             <h2>Selecting lattice...</h2>
           </template>
@@ -486,6 +596,16 @@ line.edge.auxiliary {
   stroke-dasharray: 3 1;
 }
 
+polygon.edge.primary {
+  fill: var(--color-accent);
+}
+polygon.edge.custom {
+  fill: var(--color-accent-deeper);
+}
+polygon.edge.auxiliary {
+  fill: var(--color-accent-mute);
+}
+
 marker#arrow {
   fill: var(--color-indicator);
 }
@@ -512,5 +632,6 @@ text.node-label {
   fill: var(--color-text);
   text-anchor: middle;
   stroke: var(--color-background);
+  dominant-baseline: middle;
 }
 </style>