From ce88524a89088e5104301470ce917cdfc086a6f2 Mon Sep 17 00:00:00 2001
From: Brian Schlenker <bschlenk@umich.edu>
Date: Sat, 29 Nov 2025 22:20:53 -0500
Subject: [PATCH 1/3] reorganize files

---
 .../font-grid.module.css                      |  0
 .../font-list.components}/font-grid.tsx       | 14 +++++-----
 .../search-bar.module.css                     |  0
 .../font-list.components}/search-bar.tsx      |  0
 .../font-list.module.css}                     |  2 ++
 .../font-list.tsx}                            |  6 ++---
 .../font-view/components/head.module.css      |  3 ++-
 .../components/font-view/font-view.module.css | 26 ++++++++++++++-----
 .../src/components/font-view/font-view.tsx    | 20 +++-----------
 packages/otfjs-ui/src/routes/index.tsx        |  2 +-
 10 files changed, 37 insertions(+), 36 deletions(-)
 rename packages/otfjs-ui/src/components/{no-font-view => font-list/font-list.components}/font-grid.module.css (100%)
 rename packages/otfjs-ui/src/components/{no-font-view => font-list/font-list.components}/font-grid.tsx (94%)
 rename packages/otfjs-ui/src/components/{no-font-view/components => font-list/font-list.components}/search-bar.module.css (100%)
 rename packages/otfjs-ui/src/components/{no-font-view/components => font-list/font-list.components}/search-bar.tsx (100%)
 rename packages/otfjs-ui/src/components/{no-font-view/no-font-view.module.css => font-list/font-list.module.css} (93%)
 rename packages/otfjs-ui/src/components/{no-font-view/no-font-view.tsx => font-list/font-list.tsx} (69%)

diff --git a/packages/otfjs-ui/src/components/no-font-view/font-grid.module.css b/packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.module.css
similarity index 100%
rename from packages/otfjs-ui/src/components/no-font-view/font-grid.module.css
rename to packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.module.css
diff --git a/packages/otfjs-ui/src/components/no-font-view/font-grid.tsx b/packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.tsx
similarity index 94%
rename from packages/otfjs-ui/src/components/no-font-view/font-grid.tsx
rename to packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.tsx
index 0036a06..dc5ec6e 100644
--- a/packages/otfjs-ui/src/components/no-font-view/font-grid.tsx
+++ b/packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.tsx
@@ -1,13 +1,13 @@
 import { memo, useEffect, useMemo, useRef } from 'react'
 import { Link, useRouter } from '@tanstack/react-router'
 
-import { useTimeoutAfterSet } from '../../hooks/use-timeout-after-set'
-import { handle } from '../../shortcuts/shortcuts'
-import { Fonts } from '../../types/fonts'
-import { createElementWalkerFactory } from '../../utils/dom'
-import { addListener } from '../../utils/event'
-import { entriesFilterMap } from '../../utils/object'
-import { FontIcon } from '../font-icon/font-icon'
+import { useTimeoutAfterSet } from '../../../hooks/use-timeout-after-set'
+import { handle } from '../../../shortcuts/shortcuts'
+import { Fonts } from '../../../types/fonts'
+import { createElementWalkerFactory } from '../../../utils/dom'
+import { addListener } from '../../../utils/event'
+import { entriesFilterMap } from '../../../utils/object'
+import { FontIcon } from '../../font-icon/font-icon'
 
 import styles from './font-grid.module.css'
 
diff --git a/packages/otfjs-ui/src/components/no-font-view/components/search-bar.module.css b/packages/otfjs-ui/src/components/font-list/font-list.components/search-bar.module.css
similarity index 100%
rename from packages/otfjs-ui/src/components/no-font-view/components/search-bar.module.css
rename to packages/otfjs-ui/src/components/font-list/font-list.components/search-bar.module.css
diff --git a/packages/otfjs-ui/src/components/no-font-view/components/search-bar.tsx b/packages/otfjs-ui/src/components/font-list/font-list.components/search-bar.tsx
similarity index 100%
rename from packages/otfjs-ui/src/components/no-font-view/components/search-bar.tsx
rename to packages/otfjs-ui/src/components/font-list/font-list.components/search-bar.tsx
diff --git a/packages/otfjs-ui/src/components/no-font-view/no-font-view.module.css b/packages/otfjs-ui/src/components/font-list/font-list.module.css
similarity index 93%
rename from packages/otfjs-ui/src/components/no-font-view/no-font-view.module.css
rename to packages/otfjs-ui/src/components/font-list/font-list.module.css
index 630bddd..e0420ad 100644
--- a/packages/otfjs-ui/src/components/no-font-view/no-font-view.module.css
+++ b/packages/otfjs-ui/src/components/font-list/font-list.module.css
@@ -1,4 +1,6 @@
 .root {
+  --gap: 26px;
+
   position: relative;
   display: grid;
   padding-top: 20px;
diff --git a/packages/otfjs-ui/src/components/no-font-view/no-font-view.tsx b/packages/otfjs-ui/src/components/font-list/font-list.tsx
similarity index 69%
rename from packages/otfjs-ui/src/components/no-font-view/no-font-view.tsx
rename to packages/otfjs-ui/src/components/font-list/font-list.tsx
index 1567afc..16c89bc 100644
--- a/packages/otfjs-ui/src/components/no-font-view/no-font-view.tsx
+++ b/packages/otfjs-ui/src/components/font-list/font-list.tsx
@@ -1,10 +1,10 @@
 import { useDeferredValue, useState } from 'react'
 
 import fonts from '../../fonts.json'
-import { SearchBar } from './components/search-bar'
-import { FontGrid } from './font-grid'
+import { FontGrid } from './font-list.components/font-grid'
+import { SearchBar } from './font-list.components/search-bar'
 
-import styles from './no-font-view.module.css'
+import styles from './font-list.module.css'
 
 export function NoFontView() {
   const [filter, setFilter] = useState('')
diff --git a/packages/otfjs-ui/src/components/font-view/components/head.module.css b/packages/otfjs-ui/src/components/font-view/components/head.module.css
index a8cc378..c5bd7eb 100644
--- a/packages/otfjs-ui/src/components/font-view/components/head.module.css
+++ b/packages/otfjs-ui/src/components/font-view/components/head.module.css
@@ -1,8 +1,9 @@
 .head {
+  grid-area: head;
   display: grid;
   grid-template-columns: auto 1fr;
   height: 97px;
   gap: 8px;
   padding: 8px;
-  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
 }
diff --git a/packages/otfjs-ui/src/components/font-view/font-view.module.css b/packages/otfjs-ui/src/components/font-view/font-view.module.css
index b2074b7..290dc0e 100644
--- a/packages/otfjs-ui/src/components/font-view/font-view.module.css
+++ b/packages/otfjs-ui/src/components/font-view/font-view.module.css
@@ -1,19 +1,30 @@
 .root {
   display: grid;
-  grid-template-columns: auto 1fr;
+  gap: 1px;
+  grid:
+    'head view' auto
+    'tabs view' 1fr / 240px 1fr;
   height: 100%;
   overflow: hidden;
+
+  background: var(--color-border);
+
+  :where(& > *) {
+    background: var(--color-bg);
+  }
+
+  @media screen and (max-width: 600px) {
+    grid:
+      'head head' auto
+      'tabs view' 1fr / 100px 1fr;
+  }
 }
 
-.sidebar {
+.tabs {
+  grid-area: tabs;
   overflow: scroll;
-  width: 240px;
-  box-sizing: content-box;
-  border-right: 1px solid var(--color-border);
   background: var(--color-bg-sidebar);
-}
 
-.tabs {
   & ul {
     list-style: none;
     padding: 0;
@@ -50,6 +61,7 @@
 }
 
 .tableView {
+  grid-area: view;
   position: relative;
   overflow: scroll;
 }
diff --git a/packages/otfjs-ui/src/components/font-view/font-view.tsx b/packages/otfjs-ui/src/components/font-view/font-view.tsx
index 1388874..4964ddf 100644
--- a/packages/otfjs-ui/src/components/font-view/font-view.tsx
+++ b/packages/otfjs-ui/src/components/font-view/font-view.tsx
@@ -19,33 +19,19 @@ export function FontView({ font }: FontViewProps) {
   return (
     <FontContext value={font}>
       <div className={styles.root}>
-        <Sidebar tab={tab} setTab={setTab} />
+        <Head />
+        <Tabs tab={tab} setTab={setTab} />
         <View tab={tab} />
       </div>
     </FontContext>
   )
 }
 
-function Sidebar({
-  tab,
-  setTab,
-}: {
-  tab: string
-  setTab: React.Dispatch<React.SetStateAction<string>>
-}) {
-  return (
-    <div className={styles.sidebar}>
-      <Head className="mb-2" />
-      <Tabs tab={tab} setTab={setTab} />
-    </div>
-  )
-}
-
 function Tabs({ tab, setTab }: { tab: string; setTab: (tab: string) => void }) {
   const font = useFont()
 
   return (
-    <div className={styles.tabs}>
+    <div className={`${styles.tabs} pt-2`}>
       <ul>
         <li>
           <button
diff --git a/packages/otfjs-ui/src/routes/index.tsx b/packages/otfjs-ui/src/routes/index.tsx
index 1b0af1e..734ca02 100644
--- a/packages/otfjs-ui/src/routes/index.tsx
+++ b/packages/otfjs-ui/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, useRouterState } from '@tanstack/react-router'
 
+import { NoFontView } from '../components/font-list/font-list'
 import { FontView } from '../components/font-view/font-view'
-import { NoFontView } from '../components/no-font-view/no-font-view'
 import { getFontById } from '../utils/fetch-font'
 
 export const Route = createFileRoute('/')({

From 5d4983894517a6a406487b86429490aa159a92eb Mon Sep 17 00:00:00 2001
From: Brian Schlenker <bschlenk@umich.edu>
Date: Fri, 2 Jan 2026 22:43:57 -0500
Subject: [PATCH 2/3] more things

---
 .../src/components/font-icon/font-icon.tsx         |  2 +-
 .../src/components/font-list/font-list.tsx         |  2 +-
 .../src/components/font-view/font-view.tsx         | 14 +++++++++++---
 packages/otfjs-ui/src/routes/index.tsx             |  4 ++--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/otfjs-ui/src/components/font-icon/font-icon.tsx b/packages/otfjs-ui/src/components/font-icon/font-icon.tsx
index 0244a13..1ca8a33 100644
--- a/packages/otfjs-ui/src/components/font-icon/font-icon.tsx
+++ b/packages/otfjs-ui/src/components/font-icon/font-icon.tsx
@@ -15,7 +15,7 @@ export function FontIcon({ name, size }: FontIconProps) {
   if (complexFonts.has(id)) {
     return (
       <img
-        src={`${id}.svg`}
+        src={`/${id}.svg`}
         width={size}
         height={size}
         className={styles.imgPreview}
diff --git a/packages/otfjs-ui/src/components/font-list/font-list.tsx b/packages/otfjs-ui/src/components/font-list/font-list.tsx
index 16c89bc..03dae09 100644
--- a/packages/otfjs-ui/src/components/font-list/font-list.tsx
+++ b/packages/otfjs-ui/src/components/font-list/font-list.tsx
@@ -6,7 +6,7 @@ import { SearchBar } from './font-list.components/search-bar'
 
 import styles from './font-list.module.css'
 
-export function NoFontView() {
+export function FontList() {
   const [filter, setFilter] = useState('')
   const deferredSearch = useDeferredValue(filter)
 
diff --git a/packages/otfjs-ui/src/components/font-view/font-view.tsx b/packages/otfjs-ui/src/components/font-view/font-view.tsx
index 4964ddf..86fb5e5 100644
--- a/packages/otfjs-ui/src/components/font-view/font-view.tsx
+++ b/packages/otfjs-ui/src/components/font-view/font-view.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { Font, NameId } from 'otfjs'
 
@@ -64,11 +64,19 @@ function Overview() {
   const font = useFont()
   const fontFamily = font.getName(NameId.FontFamilyName)
 
+  const value = `${fontFamily}\n\nThe quick brown fox jumps over the lazy dog.\n0123456789\n\n`
+
+  const ref = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return
+    el.focus()
+    el.setSelectionRange(el.value.length, el.value.length)
+  }, [])
+
   return (
     <div className={styles.tableView}>
       <textarea
-        autoFocus
-        defaultValue={fontFamily!}
+        ref={ref}
+        defaultValue={value}
         style={{ fontFamily: `"${fontFamily}"` }}
         className="block h-full w-full resize-none bg-[var(--color-bg)] p-2 text-2xl"
       />
diff --git a/packages/otfjs-ui/src/routes/index.tsx b/packages/otfjs-ui/src/routes/index.tsx
index 734ca02..edf8e12 100644
--- a/packages/otfjs-ui/src/routes/index.tsx
+++ b/packages/otfjs-ui/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, useRouterState } from '@tanstack/react-router'
 
-import { NoFontView } from '../components/font-list/font-list'
+import { FontList } from '../components/font-list/font-list'
 import { FontView } from '../components/font-view/font-view'
 import { getFontById } from '../utils/fetch-font'
 
@@ -17,5 +17,5 @@ function Index() {
     if (font) return <FontView font={font} />
   }
 
-  return <NoFontView />
+  return <FontList />
 }

From fc0fd75d0224aa1c6d6889598c46c49c5b45ea31 Mon Sep 17 00:00:00 2001
From: Brian Schlenker <bschlenk@umich.edu>
Date: Fri, 2 Jan 2026 22:50:55 -0500
Subject: [PATCH 3/3] fix replacements

---
 .../font-view/components/json-view.tsx        | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/otfjs-ui/src/components/font-view/components/json-view.tsx b/packages/otfjs-ui/src/components/font-view/components/json-view.tsx
index 1461350..a0c79e2 100644
--- a/packages/otfjs-ui/src/components/font-view/components/json-view.tsx
+++ b/packages/otfjs-ui/src/components/font-view/components/json-view.tsx
@@ -9,22 +9,20 @@ const theme: React.CSSProperties = {
 
 export function JsonView({
   data,
-  /* replacements, */
+  replacements,
 }: {
   data: object
   replacements?: Record<string, (value: unknown) => any>
 }) {
-  /*
-  const replacer = useMemo(() => {
-    if (!replacements) return undefined
-
-    return (key: string, value: any): any => {
-      const r = replacements[key]
-      if (r) return r(value)
-      return value
+  if (replacements) {
+    data = structuredClone(data)
+    for (const [key, replace] of Object.entries(replacements)) {
+      if (key in data) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        ;(data as any)[key] = replace((data as any)[key])
+      }
     }
-  }, [replacements])
-  */
+  }
 
   return <JsonViewPkg value={data} style={theme} displayDataTypes={false} />
 }