diff --git a/.changeset/famous-kangaroos-sin.md b/.changeset/famous-kangaroos-sin.md
new file mode 100644
index 000000000..dd6e48fa2
--- /dev/null
+++ b/.changeset/famous-kangaroos-sin.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+republish
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c580a0fca..acf7a19e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @fuz.dev/fuz
+# @ryanatkn/fuz
 
 ## 0.81.0
 
@@ -152,7 +152,7 @@
 
 ### Patch Changes
 
-- 0d033d3: remove `@grogarden/util` dependency
+- 0d033d3: remove `@ryanatkn/belt` dependency
 
 ## 0.70.1
 
@@ -165,8 +165,8 @@
 ### Minor Changes
 
 - ddb3bf1: extract contextmenu
-- e802137: upgrade to @grogarden/gro from @feltjs/gro
-- ddb3bf1: upgrade `@grogarden/util@0.15.0` from `0.13.1`
+- e802137: upgrade to @ryanatkn/gro from @feltjs/gro
+- ddb3bf1: upgrade `@ryanatkn/belt@0.15.0` from `0.13.1`
 
 ### Patch Changes
 
@@ -176,7 +176,7 @@
 
 ### Patch Changes
 
-- 017ebe6: upgrade @grogarden/util
+- 017ebe6: upgrade @ryanatkn/belt
 
 ## 0.69.0
 
@@ -195,156 +195,156 @@
 ### Minor Changes
 
 - 861180a: www.fuz.dev
-- 0287a9b: rename to `@fuz.dev/fuz`
+- 0287a9b: rename to `@ryanatkn/fuz`
 
 ## 0.66.2
 
 ### Patch Changes
 
-- e49ce5d2: upgrade gro and felt-mural ([#348](https://github.com/fuz-dev/fuz/pull/348))
+- e49ce5d2: upgrade gro and felt-mural ([#348](https://github.com/ryanatkn/fuz/pull/348))
 
 ## 0.66.1
 
 - remove a SvelteKit import as a workaround to tests failing
-  ([commit](https://github.com/fuz-dev/fuz/commit/ee1c3739c99b2054b8f07014fa68977827fb592a))
+  ([commit](https://github.com/ryanatkn/fuz/commit/ee1c3739c99b2054b8f07014fa68977827fb592a))
 
 ## 0.66.0
 
 - **break**: fix contextmenu for iOS
-  ([#314](https://github.com/fuz-dev/fuz/pull/314),
-  [#319](https://github.com/fuz-dev/fuz/pull/319))
+  ([#314](https://github.com/ryanatkn/fuz/pull/314),
+  [#319](https://github.com/ryanatkn/fuz/pull/319))
 
 ## 0.65.4
 
 - improve `Color_Scheme_Input`
-  ([commit](https://github.com/fuz-dev/fuz/commit/028a62992cfee8375c0597247b7f74b78cd37727))
+  ([commit](https://github.com/ryanatkn/fuz/commit/028a62992cfee8375c0597247b7f74b78cd37727))
 
 ## 0.65.3
 
 - fix `aside:hover` style
-  ([commit](https://github.com/fuz-dev/fuz/commit/2d21458c3198522af6e520630941f21d5ca4edfd))
+  ([commit](https://github.com/ryanatkn/fuz/commit/2d21458c3198522af6e520630941f21d5ca4edfd))
 
 ## 0.65.2
 
 - tweak `.selectable.selected` style
-  ([commit](https://github.com/fuz-dev/fuz/commit/f6167c678d4f1438a29d0ef4b3939382ef0d573a))
+  ([commit](https://github.com/ryanatkn/fuz/commit/f6167c678d4f1438a29d0ef4b3939382ef0d573a))
 
 ## 0.65.1
 
 - fix `.chip` `font-weight`
-  ([#346](https://github.com/fuz-dev/fuz/pull/346))
+  ([#346](https://github.com/ryanatkn/fuz/pull/346))
 
 ## 0.65.0
 
 - **break**: remove the `highlighted` prop of `Code`, use `lang={null}` instead
-  ([#337](https://github.com/fuz-dev/fuz/pull/337))
+  ([#337](https://github.com/ryanatkn/fuz/pull/337))
 - **break**: rename `Alert` from `Message`
-  ([#339](https://github.com/fuz-dev/fuz/pull/339))
+  ([#339](https://github.com/ryanatkn/fuz/pull/339))
 - add `inline` prop to `Code`
-  ([#337](https://github.com/fuz-dev/fuz/pull/337))
+  ([#337](https://github.com/ryanatkn/fuz/pull/337))
 - add classes `.inline`, `.inline_block`, `.block`, `.flex`, and `.flex_1`
-  ([#337](https://github.com/fuz-dev/fuz/pull/337))
+  ([#337](https://github.com/ryanatkn/fuz/pull/337))
 - add `--border_radius_xs2`
-  ([#342](https://github.com/fuz-dev/fuz/pull/342))
+  ([#342](https://github.com/ryanatkn/fuz/pull/342))
 
 ## 0.64.0
 
 - **break**: rename `PendingButton` prop `buttonAttrs` to `attrs`
-  ([#336](https://github.com/fuz-dev/fuz/pull/336))
+  ([#336](https://github.com/ryanatkn/fuz/pull/336))
 - add props `title` and `disabled` to `PendingButton`
-  ([#336](https://github.com/fuz-dev/fuz/pull/336))
+  ([#336](https://github.com/ryanatkn/fuz/pull/336))
 
 ## 0.63.0
 
-- **break**: upgrade dep `@grogarden/util@0.9.0`
-  ([#326](https://github.com/fuz-dev/fuz/pull/326))
+- **break**: upgrade dep `@ryanatkn/belt@0.9.0`
+  ([#326](https://github.com/ryanatkn/fuz/pull/326))
 - **break**: remove the keyboard shortcut that opens the contextmenu
-  ([#315](https://github.com/fuz-dev/fuz/pull/315))
+  ([#315](https://github.com/ryanatkn/fuz/pull/315))
 - **break**: remove the helper classes for colors and background colors:
   `.color_bg`, `.color_fg`, `.color_N`, `.bg_color_N`,
   `.bg`, `.fg`, `.bg_N`, `.fg_N`, `.darken_N`, and `.lighten_N`
-  ([#324](https://github.com/fuz-dev/fuz/pull/324))
+  ([#324](https://github.com/ryanatkn/fuz/pull/324))
 - **break**: change the `.icon_button` size to match `--input_height`
-  ([#318](https://github.com/fuz-dev/fuz/pull/318))
+  ([#318](https://github.com/ryanatkn/fuz/pull/318))
 - **break**: replace `scoped` behavior of `Themed` with `Themed_Scope`, publish it,
   and revamp the API of `Themed`
-  ([#317](https://github.com/fuz-dev/fuz/pull/317),
-  [#318](https://github.com/fuz-dev/fuz/pull/318))
+  ([#317](https://github.com/ryanatkn/fuz/pull/317),
+  [#318](https://github.com/ryanatkn/fuz/pull/318))
 - **break**: remove `PendingButton` usage of `$$restProps`, use `buttonAttrs` prop instead
-  ([#330](https://github.com/fuz-dev/fuz/pull/330))
+  ([#330](https://github.com/ryanatkn/fuz/pull/330))
 - fix theme when SSR is disabled
-  ([#317](https://github.com/fuz-dev/fuz/pull/317))
-- add and publish `@fuz.dev/fuz_library/Copy_To_Clipboard.svelte`
-  ([#318](https://github.com/fuz-dev/fuz/pull/318))
+  ([#317](https://github.com/ryanatkn/fuz/pull/317))
+- add and publish `@ryanatkn/fuz_library/Copy_To_Clipboard.svelte`
+  ([#318](https://github.com/ryanatkn/fuz/pull/318))
 - publish `$lib/prism.css`
-  ([#318](https://github.com/fuz-dev/fuz/pull/318))
+  ([#318](https://github.com/ryanatkn/fuz/pull/318))
 - add more readable dark mode text colors
-  ([#327](https://github.com/fuz-dev/fuz/pull/327))
+  ([#327](https://github.com/ryanatkn/fuz/pull/327))
 - add `attrs` prop to `PendingAnimation`
-  ([#327](https://github.com/fuz-dev/fuz/pull/327))
+  ([#327](https://github.com/ryanatkn/fuz/pull/327))
 - improve `HueInput` a11y
-  ([#334](https://github.com/fuz-dev/fuz/pull/334))
+  ([#334](https://github.com/ryanatkn/fuz/pull/334))
 - add and publish `$lib/Card.svelte`
-  ([#332](https://github.com/fuz-dev/fuz/pull/332))
-- publish `@fuz.dev/fuz_code/Code.svelte` and `$lib/prism.css`
-  ([#331](https://github.com/fuz-dev/fuz/pull/331))
+  ([#332](https://github.com/ryanatkn/fuz/pull/332))
+- publish `@ryanatkn/fuz_code/Code.svelte` and `$lib/prism.css`
+  ([#331](https://github.com/ryanatkn/fuz/pull/331))
 
 ## 0.62.0
 
 - **break**: remove `Whiteboard`, use `@feltjs/felt-mural` instead
-  ([#312](https://github.com/fuz-dev/fuz/pull/312))
+  ([#312](https://github.com/ryanatkn/fuz/pull/312))
 - improve prose styles for `ul`, `ol`, and `menu`
-  ([#313](https://github.com/fuz-dev/fuz/pull/313))
+  ([#313](https://github.com/ryanatkn/fuz/pull/313))
 
 ## 0.61.0
 
 - **break**: rename the `Theme_Input` prop `theme` to `selected_theme`
   and make it and `themes` optional
-  ([#310](https://github.com/fuz-dev/fuz/pull/310))
+  ([#310](https://github.com/ryanatkn/fuz/pull/310))
 
 ## 0.60.2
 
 - improve defaults of `Color_Scheme_Input` and `Theme_Input`
-  ([commit](https://github.com/fuz-dev/fuz/commit/3b1d6fb03f25ce0eec4046c2cac993c6dc475d41))
+  ([commit](https://github.com/ryanatkn/fuz/commit/3b1d6fb03f25ce0eec4046c2cac993c6dc475d41))
 
 ## 0.60.1
 
 - add store defaults for `Color_Scheme_Input` and `Theme_Input`
-  ([commit](https://github.com/fuz-dev/fuz/commit/5fcf82ae333a5a34e734f190d5050ab760d79729))
+  ([commit](https://github.com/ryanatkn/fuz/commit/5fcf82ae333a5a34e734f190d5050ab760d79729))
 
 ## 0.60.0
 
 - **break**: change `Themed` to initialize the color scheme from `localStorage`
   and add helpers `get_color_scheme` and `set_color_scheme`,
   and rename its `sync` prop to `sync_color_scheme`
-  ([#308](https://github.com/fuz-dev/fuz/pull/308))
+  ([#308](https://github.com/ryanatkn/fuz/pull/308))
 - **break**: rename the `Color_Scheme_Input` prop `color_scheme` to `selected_color_scheme`
   to match `Theme_Input`
-  ([#308](https://github.com/fuz-dev/fuz/pull/308))
+  ([#308](https://github.com/ryanatkn/fuz/pull/308))
 
 ## 0.59.0
 
 - **break**: remove `Dialog` `.pane` wrapper
-  ([#307](https://github.com/fuz-dev/fuz/pull/307))
+  ([#307](https://github.com/ryanatkn/fuz/pull/307))
 - **break**: remove the `max-width` of `.pane`
-  ([#307](https://github.com/fuz-dev/fuz/pull/307))
+  ([#307](https://github.com/ryanatkn/fuz/pull/307))
 - fix dialog and contextmenu stacking
-  ([#307](https://github.com/fuz-dev/fuz/pull/307))
+  ([#307](https://github.com/ryanatkn/fuz/pull/307))
 
 ## 0.58.1
 
 - fix the `.chip` background
-  ([commit](https://github.com/fuz-dev/fuz/commit/4c82f4f7fa8b7687ee304b5ac45fb1dfbdd0a957))
+  ([commit](https://github.com/ryanatkn/fuz/commit/4c82f4f7fa8b7687ee304b5ac45fb1dfbdd0a957))
 
 ## 0.58.0
 
 - **break**: remove root exports, change to supporting only full paths
-  ([commit](https://github.com/fuz-dev/fuz/commit/299ceae2dd08393f2e75038638593ea7547da7df))
+  ([commit](https://github.com/ryanatkn/fuz/commit/299ceae2dd08393f2e75038638593ea7547da7df))
 
 ## 0.57.0
 
 - **break**: tweak some styles and components
-  ([#306](https://github.com/fuz-dev/fuz/pull/306))
+  ([#306](https://github.com/ryanatkn/fuz/pull/306))
   - make `Color_Scheme_Input` sync by default
   - rename `--button_color` to `--button_bg`, `--button_hover` to `--button_bg_hover`,
     `--button_active` to `--button_bg_active`, and `--button_disabled` to `--button_bg_disabled`
@@ -357,7 +357,7 @@
 ## 0.56.0
 
 - **break**: add support for dark mode and systems for color-scheme and theme
-  ([#247](https://github.com/fuz-dev/fuz/pull/247))
+  ([#247](https://github.com/ryanatkn/fuz/pull/247))
   - add and publish `$lib/theme.css` - default usage imports it alongside `$lib/style.css`
   - add and publish `$lib/theme.ts` with `create_theme_setup_script` for setting up the color scheme
   - add and publish `$lib/themes.ts` with the default theme data,
@@ -410,7 +410,7 @@
   - add `.text_align_right`
   - add `--outline_width_1` to accompany 2 and 3
 - **break**: more style changes
-  ([#304](https://github.com/fuz-dev/fuz/pull/304))
+  ([#304](https://github.com/ryanatkn/fuz/pull/304))
   - publish `$lib/Theme_Input.svelte`
   - rename `--font_X` to `--size_X`
   - rename `--input_padding_v` to `--input_padding_y` and
@@ -421,214 +421,214 @@
 ## 0.55.1
 
 - fix root exports
-  ([commit](https://github.com/fuz-dev/fuz/commit/62da32e4e48e2d51d95ee413d2585e87a8146036))
+  ([commit](https://github.com/ryanatkn/fuz/commit/62da32e4e48e2d51d95ee413d2585e87a8146036))
 
 ## 0.55.0
 
 - **break**: change root exports to include no Svelte files,
   requiring the restructuring of `contextmenu` component dependencies
-  ([#302](https://github.com/fuz-dev/fuz/pull/302))
+  ([#302](https://github.com/ryanatkn/fuz/pull/302))
 - **break**: rename `ContextmenuLink.svelte` to `ContextmenuLinkEntry.svelte`
-  ([#302](https://github.com/fuz-dev/fuz/pull/302))
+  ([#302](https://github.com/ryanatkn/fuz/pull/302))
 
 ## 0.54.2
 
 - add `--whiteboard_bg` to replace the `Whiteboard`'s usage of `--bg`
-  ([#300](https://github.com/fuz-dev/fuz/pull/300))
+  ([#300](https://github.com/ryanatkn/fuz/pull/300))
 - fix contextmenu reactivity, support contextmenu component duplicates, and add `.chevron`
-  ([#299](https://github.com/fuz-dev/fuz/pull/299))
+  ([#299](https://github.com/ryanatkn/fuz/pull/299))
 - add and export `ContextmenuActionParams` type
-  ([#298](https://github.com/fuz-dev/fuz/pull/298))
+  ([#298](https://github.com/ryanatkn/fuz/pull/298))
 
 ## 0.54.1
 
 - add contextmenu and `.menu-item`
-  ([#293](https://github.com/fuz-dev/fuz/pull/293))
+  ([#293](https://github.com/ryanatkn/fuz/pull/293))
 - relax the type of `Dialog`'s `close` from `MouseEvent` to `Event`
-  ([#295](https://github.com/fuz-dev/fuz/pull/295))
+  ([#295](https://github.com/ryanatkn/fuz/pull/295))
 
 ## 0.54.0
 
 - **break**: improve dialog types, remove the dialog schema, and add the type-safe `toDialogData`
-  ([#294](https://github.com/fuz-dev/fuz/pull/294))
+  ([#294](https://github.com/ryanatkn/fuz/pull/294))
 - upgrade deps
-  ([#294](https://github.com/fuz-dev/fuz/pull/294))
+  ([#294](https://github.com/ryanatkn/fuz/pull/294))
 
 ## 0.53.0
 
 - **break**: upgrade deps
-  ([#291](https://github.com/fuz-dev/fuz/pull/291))
+  ([#291](https://github.com/ryanatkn/fuz/pull/291))
 
 ## 0.52.2
 
 - change the `Dialog` `close` event param to be optional
-  ([commit](https://github.com/fuz-dev/fuz/commit/0e1902c162e3da6730c86e68c6d2987118f50691))
+  ([commit](https://github.com/ryanatkn/fuz/commit/0e1902c162e3da6730c86e68c6d2987118f50691))
 
 ## 0.52.1
 
 - add `close` to `Dialog` slot
-  ([commit](https://github.com/fuz-dev/fuz/commit/4de4ef0ab766dd2104817a68ab9fd21842378862))
+  ([commit](https://github.com/ryanatkn/fuz/commit/4de4ef0ab766dd2104817a68ab9fd21842378862))
 
 ## 0.52.0
 
 - **break**: rename `purple` CSS variables from `violet`, because of the overlap with `pink`
-  ([#289](https://github.com/fuz-dev/fuz/pull/289))
+  ([#289](https://github.com/ryanatkn/fuz/pull/289))
 - add syntax highlighting to the library on the website
-  ([#288](https://github.com/fuz-dev/fuz/pull/288))
+  ([#288](https://github.com/ryanatkn/fuz/pull/288))
 
 ## 0.51.1
 
 - style the `option` element
-  ([commit](https://github.com/fuz-dev/fuz/commit/8bf30d8d54982d711480f3ab9222d0825368aaac))
+  ([commit](https://github.com/ryanatkn/fuz/commit/8bf30d8d54982d711480f3ab9222d0825368aaac))
 
 ## 0.51.0
 
 - **break**: upgrade to Node 18.14
-  ([#287](https://github.com/fuz-dev/fuz/pull/287))
+  ([#287](https://github.com/ryanatkn/fuz/pull/287))
 - **break**: change `Surface` to default `cancelOnLeave` to `true`
-  ([commit](https://github.com/fuz-dev/fuz/commit/9fac84fec3aeb91b74a8a20f08af8dd00cc064b0))
+  ([commit](https://github.com/ryanatkn/fuz/commit/9fac84fec3aeb91b74a8a20f08af8dd00cc064b0))
 
 ## 0.50.2
 
-- upgrade `@grogarden/util@0.7.5`
-  ([commit](https://github.com/fuz-dev/fuz/commit/96bd481228618e07ad206e0148687c320bb9a132))
+- upgrade `@ryanatkn/belt@0.7.5`
+  ([commit](https://github.com/ryanatkn/fuz/commit/96bd481228618e07ad206e0148687c320bb9a132))
 
 ## 0.50.1
 
-- upgrade `@grogarden/util@0.7.4`
-  ([commit](https://github.com/fuz-dev/fuz/commit/c78755d867acb0e0d372afda8be80b7c18904d5a))
+- upgrade `@ryanatkn/belt@0.7.4`
+  ([commit](https://github.com/ryanatkn/fuz/commit/c78755d867acb0e0d372afda8be80b7c18904d5a))
 
 ## 0.50.0
 
-- **break**: upgrade `@grogarden/util@0.7.3`
+- **break**: upgrade `@ryanatkn/belt@0.7.3`
 
 ## 0.49.1
 
 - add `pointing` to `Surface`
-  ([commit](https://github.com/fuz-dev/fuz/commit/9fe2722d153c7084d0e0d668463c5a263bbdff1f))
+  ([commit](https://github.com/ryanatkn/fuz/commit/9fe2722d153c7084d0e0d668463c5a263bbdff1f))
 - change `Surface` to not block the contextmenu;
   might need to revert and fix mobile some other way
-  ([commit](https://github.com/fuz-dev/fuz/commit/9fe2722d153c7084d0e0d668463c5a263bbdff1f))
+  ([commit](https://github.com/ryanatkn/fuz/commit/9fe2722d153c7084d0e0d668463c5a263bbdff1f))
 
 ## 0.49.0
 
-- **break**: upgrade `@grogarden/util@0.6.0`
-  ([commit](https://github.com/fuz-dev/fuz/commit/14bf20c5f642588797f1611021899e480632ae9a))
+- **break**: upgrade `@ryanatkn/belt@0.6.0`
+  ([commit](https://github.com/ryanatkn/fuz/commit/14bf20c5f642588797f1611021899e480632ae9a))
 - add pen brush to whiteboard
-  ([#286](https://github.com/fuz-dev/fuz/pull/286))
+  ([#286](https://github.com/ryanatkn/fuz/pull/286))
 
 ## 0.48.2
 
 - fix radio button style
-  ([#285](https://github.com/fuz-dev/fuz/pull/285))
+  ([#285](https://github.com/ryanatkn/fuz/pull/285))
 
 ## 0.48.1
 
 - add and publish component `Redirect.svelte`
-  ([#284](https://github.com/fuz-dev/fuz/pull/284))
+  ([#284](https://github.com/ryanatkn/fuz/pull/284))
 
 ## 0.48.0
 
 - **break**: change `.markup` to apply no `display` property and remove its `width: 100%`
-  ([#281](https://github.com/fuz-dev/fuz/pull/281))
+  ([#281](https://github.com/ryanatkn/fuz/pull/281))
 - add utility classes `.width_full` and `.height_full`
-  ([#281](https://github.com/fuz-dev/fuz/pull/281))
+  ([#281](https://github.com/ryanatkn/fuz/pull/281))
 
 ## 0.47.1
 
 - add [the whiteboard sketch](https://www.felt.dev/sketch/whiteboard)
   with the published components `Whiteboard.svelte`, `Surface.svelte`, and `Scaled.svelte`
-  ([#269](https://github.com/fuz-dev/fuz/pull/269),
-  [#274](https://github.com/fuz-dev/fuz/pull/274))
+  ([#269](https://github.com/ryanatkn/fuz/pull/269),
+  [#274](https://github.com/ryanatkn/fuz/pull/274))
 - style the `aside` element
-  ([#275](https://github.com/fuz-dev/fuz/pull/275))
+  ([#275](https://github.com/ryanatkn/fuz/pull/275))
 - delete GOVERNANCE.md for the meta-project `@feltjs/felt`'s
   [GOVERNANCE.md](https://github.com/feltjs/felt/blob/main/GOVERNANCE.md)
-  ([#278](https://github.com/fuz-dev/fuz/pull/278))
+  ([#278](https://github.com/ryanatkn/fuz/pull/278))
 
 ## 0.47.0
 
-- **break**: rename to `@fuz.dev/fuz` and upgrade deps
-  ([#271](https://github.com/fuz-dev/fuz/pull/271))
+- **break**: rename to `@ryanatkn/fuz` and upgrade deps
+  ([#271](https://github.com/ryanatkn/fuz/pull/271))
 
 ## 0.46.0
 
 - **break**: upgrade deps
-  ([#270](https://github.com/fuz-dev/fuz/pull/270))
+  ([#270](https://github.com/ryanatkn/fuz/pull/270))
 
 ## 0.45.1
 
 - support stacking dialogs
-  ([#268](https://github.com/fuz-dev/fuz/pull/268))
+  ([#268](https://github.com/ryanatkn/fuz/pull/268))
 - add `.ellipsis` CSS utility class
-  ([#267](https://github.com/fuz-dev/fuz/pull/267))
+  ([#267](https://github.com/ryanatkn/fuz/pull/267))
 
 ## 0.45.0
 
 - **break**: move `lib/dialog/` stuff to `lib/`
-  ([#264](https://github.com/fuz-dev/fuz/pull/264))
+  ([#264](https://github.com/ryanatkn/fuz/pull/264))
 
 ## 0.44.0
 
 - **break**: remove peer dependencies
-  ([#263](https://github.com/fuz-dev/fuz/pull/263))
+  ([#263](https://github.com/ryanatkn/fuz/pull/263))
 
 ## 0.43.0
 
 - **break**: move all of `ui/` into the base directory
-  ([#261](https://github.com/fuz-dev/fuz/pull/261))
+  ([#261](https://github.com/ryanatkn/fuz/pull/261))
 - **break**: remove `util/` directory;
-  use [`@grogarden/util`](https://github.com/grogarden/util) instead
-  ([#260](https://github.com/fuz-dev/fuz/pull/260))
+  use [`@ryanatkn/belt`](https://github.com/ryanatkn/belt) instead
+  ([#260](https://github.com/ryanatkn/fuz/pull/260))
 - uncenter the `legend` element
-  ([#259](https://github.com/fuz-dev/fuz/pull/259))
+  ([#259](https://github.com/ryanatkn/fuz/pull/259))
 - export everything from the root (we can because it's all browser-and-SSR-friendly)
 
 ## 0.42.0
 
 - **break**: remove export `util/async.ts` from `index.ts`
-  ([#256](https://github.com/fuz-dev/fuz/pull/256))
+  ([#256](https://github.com/ryanatkn/fuz/pull/256))
 - **break**: remove `Falsy` from `util/types.ts`
-  ([#256](https://github.com/fuz-dev/fuz/pull/256))
+  ([#256](https://github.com/ryanatkn/fuz/pull/256))
 - stop truncating unhandled error messages
-  ([#258](https://github.com/fuz-dev/fuz/pull/258))
+  ([#258](https://github.com/ryanatkn/fuz/pull/258))
 
 ## 0.41.5
 
 - improve default form spacing
-  ([#255](https://github.com/fuz-dev/fuz/pull/255))
+  ([#255](https://github.com/ryanatkn/fuz/pull/255))
 
 ## 0.41.4
 
 - add default styles for the `legend` element and tweak form layouts
-  ([#254](https://github.com/fuz-dev/fuz/pull/254))
+  ([#254](https://github.com/ryanatkn/fuz/pull/254))
 
 ## 0.41.3
 
 - add `line-height` to fix `input`, `textarea`, and `select`
-  ([#253](https://github.com/fuz-dev/fuz/pull/253))
+  ([#253](https://github.com/ryanatkn/fuz/pull/253))
 
 ## 0.41.2
 
 - change `unwrap` to throw a `ResultError` instead of a plain `Error`, forwarding the `result`
-  ([#252](https://github.com/fuz-dev/fuz/pull/252))
+  ([#252](https://github.com/ryanatkn/fuz/pull/252))
 
 ## 0.41.1
 
 - fix type of log prefixes and suffixes
-  ([#246](https://github.com/fuz-dev/fuz/pull/246))
+  ([#246](https://github.com/ryanatkn/fuz/pull/246))
 
 ## 0.41.0
 
 - **break**: rename `DevLogger` to `BaseLogger`
-  ([#244](https://github.com/fuz-dev/fuz/pull/244))
+  ([#244](https://github.com/ryanatkn/fuz/pull/244))
 - **break**: share prefix/suffix state between `Logger` and `SystemLogger` by default
-  ([#244](https://github.com/fuz-dev/fuz/pull/244))
+  ([#244](https://github.com/ryanatkn/fuz/pull/244))
 - add `Logger.prefixes`, `Logger.suffixes`, `SystemLogger.prefixes`,
   and `SystemLogger.suffixes` for simpler global configuration
-  ([#244](https://github.com/fuz-dev/fuz/pull/244))
+  ([#244](https://github.com/ryanatkn/fuz/pull/244))
 - tweak styles for `label.row` and `button.inline`
-  ([#245](https://github.com/fuz-dev/fuz/pull/245))
+  ([#245](https://github.com/ryanatkn/fuz/pull/245))
 
 ## 0.40.1
 
@@ -637,45 +637,45 @@
 ## 0.40.0
 
 - **break**: change `Logger` prefixes and suffixes to print the return value of functions
-  ([#243](https://github.com/fuz-dev/fuz/pull/243))
+  ([#243](https://github.com/ryanatkn/fuz/pull/243))
 - fix scrollbar for `Dialog.svelte`
-  ([#242](https://github.com/fuz-dev/fuz/pull/242))
+  ([#242](https://github.com/ryanatkn/fuz/pull/242))
 
 ## 0.39.1
 
 - add `null` to the type of the `FeltWindowHost.svelte` `tenant` prop
-  ([#241](https://github.com/fuz-dev/fuz/pull/241))
+  ([#241](https://github.com/ryanatkn/fuz/pull/241))
 
 ## 0.39.0
 
 - **break**: upgrade SvelteKit peer dep to `>=1.0.0-next.454`
-  ([#239](https://github.com/fuz-dev/fuz/pull/239),
-  [#237](https://github.com/fuz-dev/fuz/pull/237))
+  ([#239](https://github.com/ryanatkn/fuz/pull/239),
+  [#237](https://github.com/ryanatkn/fuz/pull/237))
 - **break**: require the `tenant` prop for `FeltWindowHost.svelte` instead of autodetecting
-  ([#238](https://github.com/fuz-dev/fuz/pull/238))
+  ([#238](https://github.com/ryanatkn/fuz/pull/238))
 - add the `target_origin` prop to `FeltWindowHost.svelte`
-  ([#238](https://github.com/fuz-dev/fuz/pull/238))
+  ([#238](https://github.com/ryanatkn/fuz/pull/238))
 - fix timeout bug in `FeltWindowTenant.svelte`
-  ([#238](https://github.com/fuz-dev/fuz/pull/238))
+  ([#238](https://github.com/ryanatkn/fuz/pull/238))
 - add `removeUnordered` helper to `util/array.ts`
-  ([#240](https://github.com/fuz-dev/fuz/pull/240))
+  ([#240](https://github.com/ryanatkn/fuz/pull/240))
 
 ## 0.38.0
 
 - **break**: remove `key` from `FeltWindowHost.svelte` and `FeltWindowTenant.svelte`
-  ([#236](https://github.com/fuz-dev/fuz/pull/236))
+  ([#236](https://github.com/ryanatkn/fuz/pull/236))
 
 ## 0.37.0
 
 - **break**: implement the basic window host and tenant system
   in `FeltWindowHost.svelte` and
   rename `FeltWindowTenant.svelte` from `FeltWindowGuest.svelte`
-  ([#235](https://github.com/fuz-dev/fuz/pull/235))
+  ([#235](https://github.com/ryanatkn/fuz/pull/235))
 
 ## 0.36.0
 
 - **break**: overhaul styles
-  ([#224](https://github.com/fuz-dev/fuz/pull/224))
+  ([#224](https://github.com/ryanatkn/fuz/pull/224))
   - remove `--input_border_width` - use `--border_width` instead
   - remove `--border` - use each variable directly instead so they can be overidden
   - remove `--icon_max` - use `--icon_size_4` instead
@@ -695,108 +695,108 @@
   - add `--input_height_sm`
   - add styles for radio inputs
 - bake the golden ratio constants in `util/maths.ts`
-  ([#223](https://github.com/fuz-dev/fuz/pull/223))
+  ([#223](https://github.com/ryanatkn/fuz/pull/223))
 - bold the `.title` elements in `label` elements
-  ([#231](https://github.com/fuz-dev/fuz/pull/231))
+  ([#231](https://github.com/ryanatkn/fuz/pull/231))
 - close dialog on mousedown instead of click
-  ([#230](https://github.com/fuz-dev/fuz/pull/230))
+  ([#230](https://github.com/ryanatkn/fuz/pull/230))
 
 ## 0.35.2
 
 - fix dialog close event to ignore events from elements not in the DOM
-  ([#222](https://github.com/fuz-dev/fuz/pull/222))
+  ([#222](https://github.com/ryanatkn/fuz/pull/222))
 
 ## 0.35.1
 
 - fix dialog click event propagation
-  ([#221](https://github.com/fuz-dev/fuz/pull/221))
+  ([#221](https://github.com/ryanatkn/fuz/pull/221))
 
 ## 0.35.0
 
 - **break**: upgrade to Node 18.6 and `@sveltejs/kit@1.0.0-next.382`
-  ([#219](https://github.com/fuz-dev/fuz/pull/219),
-  [#220](https://github.com/fuz-dev/fuz/pull/220))
+  ([#219](https://github.com/ryanatkn/fuz/pull/219),
+  [#220](https://github.com/ryanatkn/fuz/pull/220))
 
 ## 0.34.0
 
 - **break**: change devmode hotkey to `ctrl+Backtick` and add the `should_toggle` function as a prop
-  ([#218](https://github.com/fuz-dev/fuz/pull/218))
+  ([#218](https://github.com/ryanatkn/fuz/pull/218))
 
 ## 0.33.0
 
 - **break**: default `a` styles to `display: flex` and `display: inline` inside `.markup`
-  ([#216](https://github.com/fuz-dev/fuz/pull/216))
+  ([#216](https://github.com/ryanatkn/fuz/pull/216))
 - loosen the type of `Teleport` prop `to` to accept `null`
-  ([#217](https://github.com/fuz-dev/fuz/pull/217))
+  ([#217](https://github.com/ryanatkn/fuz/pull/217))
 
 ## 0.32.0
 
 - **break**: rename `Breadcrumb.svelte` from `LinkPath.svelte`
-  ([#214](https://github.com/fuz-dev/fuz/pull/214))
+  ([#214](https://github.com/ryanatkn/fuz/pull/214))
 - **break**: unpublish `Github_Logo.svelte` and `TwitterLogo.svelte`
-  ([#213](https://github.com/fuz-dev/fuz/pull/213))
+  ([#213](https://github.com/ryanatkn/fuz/pull/213))
 - add `"separator"` slot to `Breadcrumb.svelte`
-  ([#214](https://github.com/fuz-dev/fuz/pull/214))
+  ([#214](https://github.com/ryanatkn/fuz/pull/214))
 
 ## 0.31.0
 
 - **break**: unset `img` stlye `display` back to the default `inline-block`
-  ([#210](https://github.com/fuz-dev/fuz/pull/210))
+  ([#210](https://github.com/ryanatkn/fuz/pull/210))
 - **break**: remove padding from `.markup` and add `.padded-md` and `.padded-xl`
-  ([#212](https://github.com/fuz-dev/fuz/pull/212))
+  ([#212](https://github.com/ryanatkn/fuz/pull/212))
 - update focus styles to use the accent color and a solid border
-  ([#209](https://github.com/fuz-dev/fuz/pull/209),
-  [#211](https://github.com/fuz-dev/fuz/pull/211))
+  ([#209](https://github.com/ryanatkn/fuz/pull/209),
+  [#211](https://github.com/ryanatkn/fuz/pull/211))
 
 ## 0.30.1
 
 - fix golden ratio values in `util/maths.ts`
-  ([#206](https://github.com/fuz-dev/fuz/pull/206))
+  ([#206](https://github.com/ryanatkn/fuz/pull/206))
 - add `util/dom.ts` helper `swallow` for stopping events concisely
-  ([#208](https://github.com/fuz-dev/fuz/pull/208))
+  ([#208](https://github.com/ryanatkn/fuz/pull/208))
 - fix `.centered-hz` to explicitly set row direction
-  ([#207](https://github.com/fuz-dev/fuz/pull/207))
+  ([#207](https://github.com/ryanatkn/fuz/pull/207))
 
 ## 0.30.0
 
 - **break**: replace `--border_radius_1` and `--border_radius_5` with `--border_radius_2` to 5,
   and rename `--border_radius_2` and `border_radius_3` to 2 and 3, respectively
-  ([#204](https://github.com/fuz-dev/fuz/pull/204))
+  ([#204](https://github.com/ryanatkn/fuz/pull/204))
 - add `fade-in` animation
-  ([#205](https://github.com/fuz-dev/fuz/pull/205))
+  ([#205](https://github.com/ryanatkn/fuz/pull/205))
 
 ## 0.29.0
 
 - **break**: change `--icon_size` CSS variables a few pixels to match common standards
-  ([#202](https://github.com/fuz-dev/fuz/pull/202))
+  ([#202](https://github.com/ryanatkn/fuz/pull/202))
 - remove fixed button font size and inherit instead
-  ([#201](https://github.com/fuz-dev/fuz/pull/201))
+  ([#201](https://github.com/ryanatkn/fuz/pull/201))
 
 ## 0.28.1
 
 - fix `is_editable` to return `false` for checkbox, radio, and range input types
-  ([#198](https://github.com/fuz-dev/fuz/pull/198))
+  ([#198](https://github.com/ryanatkn/fuz/pull/198))
 
 ## 0.28.0
 
 - **break**: remove `last` from `util/array.ts`
-  ([#195](https://github.com/fuz-dev/fuz/pull/195))
+  ([#195](https://github.com/ryanatkn/fuz/pull/195))
 - add `--icon_size` which defaults to `--icon_size_md`
-  ([#195](https://github.com/fuz-dev/fuz/pull/195))
+  ([#195](https://github.com/ryanatkn/fuz/pull/195))
 
 ## 0.27.1
 
 - add `unwrapError` `Result` helper
-  ([#194](https://github.com/fuz-dev/fuz/pull/194))
+  ([#194](https://github.com/ryanatkn/fuz/pull/194))
 - fix type of `OK` and `NOT_OK`
-  ([#194](https://github.com/fuz-dev/fuz/pull/194))
+  ([#194](https://github.com/ryanatkn/fuz/pull/194))
 
 ## 0.27.0
 
 - **break**: remove `icons` module exports from root API
-  ([#192](https://github.com/fuz-dev/fuz/pull/192))
+  ([#192](https://github.com/ryanatkn/fuz/pull/192))
 - add `OK` and `NOT_OK` to `util/result.ts`
-  ([#193](https://github.com/fuz-dev/fuz/pull/193))
+  ([#193](https://github.com/ryanatkn/fuz/pull/193))
 
 ## 0.26.0
 
@@ -804,363 +804,363 @@
   `--border_style_disabled`, `--button_border_style`,
   `--button_border_v_style_disabled`, `--button_border_h_style_disabled`,
   and `--input_border_style`
-  ([#191](https://github.com/fuz-dev/fuz/pull/191))
+  ([#191](https://github.com/ryanatkn/fuz/pull/191))
 - make `PendingButton.svelte` type `"button"` and disable when pending
-  ([#190](https://github.com/fuz-dev/fuz/pull/190))
+  ([#190](https://github.com/ryanatkn/fuz/pull/190))
 - improve styles of disabled buttons and inputs
-  ([#190](https://github.com/fuz-dev/fuz/pull/190))
+  ([#190](https://github.com/ryanatkn/fuz/pull/190))
 
 ## 0.25.1
 
 - add `toGraphemeCount` to `util/string.ts`
-  ([#189](https://github.com/fuz-dev/fuz/pull/189))
+  ([#189](https://github.com/ryanatkn/fuz/pull/189))
 
 ## 0.25.0
 
 - **break**: remove the `ok` `Result` helper
-  ([#188](https://github.com/fuz-dev/fuz/pull/188))
+  ([#188](https://github.com/ryanatkn/fuz/pull/188))
 - change the `unwrap` `Result` helper to make `value` optional
-  ([#188](https://github.com/fuz-dev/fuz/pull/188))
+  ([#188](https://github.com/ryanatkn/fuz/pull/188))
 
 ## 0.24.0
 
 - **break**: rename `--duration_N` CSS variables from `--transition_duration_N` and add `--duration_6`
-  ([#186](https://github.com/fuz-dev/fuz/pull/186))
+  ([#186](https://github.com/ryanatkn/fuz/pull/186))
 - add `--animation_duration` API to `PendingAnimation.svelte`
-  ([#186](https://github.com/fuz-dev/fuz/pull/186))
+  ([#186](https://github.com/ryanatkn/fuz/pull/186))
 - relax `is_editable` type in `util/dom.js`
-  ([#187](https://github.com/fuz-dev/fuz/pull/187))
+  ([#187](https://github.com/ryanatkn/fuz/pull/187))
 
 ## 0.23.0
 
 - **break**: remove all `Promise` behavior from `toObtainable` because it's too error prone
-  ([#185](https://github.com/fuz-dev/fuz/pull/185))
+  ([#185](https://github.com/ryanatkn/fuz/pull/185))
 - style `summary` elements
-  ([#183](https://github.com/fuz-dev/fuz/pull/183))
+  ([#183](https://github.com/ryanatkn/fuz/pull/183))
 
 ## 0.22.1
 
 - add `Dialog` `layout` option
-  ([#179](https://github.com/fuz-dev/fuz/pull/179))
+  ([#179](https://github.com/ryanatkn/fuz/pull/179))
 - add `dialog_props` to `DialogData`
-  ([#179](https://github.com/fuz-dev/fuz/pull/179))
+  ([#179](https://github.com/ryanatkn/fuz/pull/179))
 - add new module `util/result.js` and move `Result` and `unwrap` from `util/types.js` to it,
   and add the new `ok` `Result` helper
-  ([#178](https://github.com/fuz-dev/fuz/pull/178))
+  ([#178](https://github.com/ryanatkn/fuz/pull/178))
 - add optional `random` arg that defaults to `Math.random` to each function in `util/random.js`
-  ([#178](https://github.com/fuz-dev/fuz/pull/178))
+  ([#178](https://github.com/ryanatkn/fuz/pull/178))
 - add optional `"icon"` slot to `Message.svelte`
-  ([#178](https://github.com/fuz-dev/fuz/pull/178))
+  ([#178](https://github.com/ryanatkn/fuz/pull/178))
 - improve env handling for log level
-  ([#180](https://github.com/fuz-dev/fuz/pull/180))
+  ([#180](https://github.com/ryanatkn/fuz/pull/180))
 - add `index` to `PendingAnimation` slot props
-  ([#181](https://github.com/fuz-dev/fuz/pull/181))
+  ([#181](https://github.com/ryanatkn/fuz/pull/181))
 
 ## 0.22.0
 
 - **break**: remove `font_weight` CSS variables
-  ([#175](https://github.com/fuz-dev/fuz/pull/175))
+  ([#175](https://github.com/ryanatkn/fuz/pull/175))
 - **break**: rename `util/print.ts` `printString` from `printStr`
-  ([#174](https://github.com/fuz-dev/fuz/pull/174))
+  ([#174](https://github.com/ryanatkn/fuz/pull/174))
 - improve value formatting in `util/print.ts`
-  ([#174](https://github.com/fuz-dev/fuz/pull/174))
+  ([#174](https://github.com/ryanatkn/fuz/pull/174))
 - add `traverse` helper to `util/object.ts`
-  ([#173](https://github.com/fuz-dev/fuz/pull/173))
+  ([#173](https://github.com/ryanatkn/fuz/pull/173))
 
 ## 0.21.0
 
 - **break**: change `DialogDataSchema` path to absolute
-  ([#172](https://github.com/fuz-dev/fuz/pull/172))
+  ([#172](https://github.com/ryanatkn/fuz/pull/172))
 
 ## 0.20.0
 
 - **break**: rename schema export `DialogDataSchema` from `DialogState`
-  ([#170](https://github.com/fuz-dev/fuz/pull/170))
+  ([#170](https://github.com/ryanatkn/fuz/pull/170))
 
 ## 0.19.0
 
 - **break**: move `dialog/Dialog.svelte` from `Dialog.svelte`
-  ([#169](https://github.com/fuz-dev/fuz/pull/169))
+  ([#169](https://github.com/ryanatkn/fuz/pull/169))
 - add and publish `dialog/Dialogs.svelte` and `dialog/dialog.ts`
-  ([#169](https://github.com/fuz-dev/fuz/pull/169))
+  ([#169](https://github.com/ryanatkn/fuz/pull/169))
 
 ## 0.18.0
 
 - **break**: remove `util/terminal.js` because it evolved into
   just re-exporting `kleur` with one additional helper
-  ([#167](https://github.com/fuz-dev/fuz/pull/167))
+  ([#167](https://github.com/ryanatkn/fuz/pull/167))
 - **break**: remove `util/equal.js` and the `dequal` dependency
-  ([#167](https://github.com/fuz-dev/fuz/pull/167))
+  ([#167](https://github.com/ryanatkn/fuz/pull/167))
 - **break**: rename `util/maths.js` from `util/math.js` and `mix` to `lerp`
-  ([#168](https://github.com/fuz-dev/fuz/pull/168))
+  ([#168](https://github.com/ryanatkn/fuz/pull/168))
 - add `clamp` to `util/maths.js`
-  ([#168](https://github.com/fuz-dev/fuz/pull/168))
+  ([#168](https://github.com/ryanatkn/fuz/pull/168))
 
 ## 0.17.0
 
 - **break**: rename `.column-min` to `.column-sm` and `--column_width_min` to `--column_width_sm`
   and remove `min-width` of `.column`/`.column-sm`
-  ([#164](https://github.com/fuz-dev/fuz/pull/164))
+  ([#164](https://github.com/ryanatkn/fuz/pull/164))
 - **break**: remove `util/lock.js`
-  ([#165](https://github.com/fuz-dev/fuz/pull/165))
+  ([#165](https://github.com/ryanatkn/fuz/pull/165))
 
 ## 0.16.0
 
 - **break**: rename `Devmode_Controls.svelte` from `Devmode.svelte` and remove toggle button
-  ([#159](https://github.com/fuz-dev/fuz/pull/159))
+  ([#159](https://github.com/ryanatkn/fuz/pull/159))
 - **break**: remove opinionated layout CSS on the `html` and `body` elements
-  ([#155](https://github.com/fuz-dev/fuz/pull/155))
+  ([#155](https://github.com/ryanatkn/fuz/pull/155))
 - **break**: replace `--pane_box_shadow` with `--drop_shadow` and `--drop_shadow_dark`
-  ([#161](https://github.com/fuz-dev/fuz/pull/161))
+  ([#161](https://github.com/ryanatkn/fuz/pull/161))
 - add CSS variables `--transition_duration_1` to `--transition_duration_5`
   that get disabled with `prefers-reduced-motion`
-  ([#163](https://github.com/fuz-dev/fuz/pull/163))
+  ([#163](https://github.com/ryanatkn/fuz/pull/163))
 
 ## 0.15.2
 
 - add and publish `HueInput.svelte`
-  ([#156](https://github.com/fuz-dev/fuz/pull/156))
+  ([#156](https://github.com/ryanatkn/fuz/pull/156))
 
 ## 0.15.1
 
 - remove scrollbar padding hack that caused a visual error on some browsers
-  ([#153](https://github.com/fuz-dev/fuz/pull/153))
+  ([#153](https://github.com/ryanatkn/fuz/pull/153))
 
 ## 0.15.0
 
 - **break**: remove most of `icons.ts`
-  ([#148](https://github.com/fuz-dev/fuz/pull/148))
+  ([#148](https://github.com/ryanatkn/fuz/pull/148))
 - export `Github_Logo.svelte` and `TwitterLogo.svelte`
-  ([#150](https://github.com/fuz-dev/fuz/pull/150))
+  ([#150](https://github.com/ryanatkn/fuz/pull/150))
 - add reusable `.pane` CSS class
-  ([#152](https://github.com/fuz-dev/fuz/pull/152))
+  ([#152](https://github.com/ryanatkn/fuz/pull/152))
 
 ## 0.14.1
 
 - fix `LinkPath.svelte` to account for base path and make its props optional
-  ([#145](https://github.com/fuz-dev/fuz/pull/145))
+  ([#145](https://github.com/ryanatkn/fuz/pull/145))
 - add `.pixelated` utility class to `style.css`
-  ([#146](https://github.com/fuz-dev/fuz/pull/146))
+  ([#146](https://github.com/ryanatkn/fuz/pull/146))
 
 ## 0.14.0
 
 - **break**: unset `overflow` global styles and remove `main` element styles
-  ([#141](https://github.com/fuz-dev/fuz/pull/141))
+  ([#141](https://github.com/ryanatkn/fuz/pull/141))
 - **break**: remove `wrap` from `util/async.ts`
-  ([#139](https://github.com/fuz-dev/fuz/pull/139))
+  ([#139](https://github.com/ryanatkn/fuz/pull/139))
 - publish `LinkPath.svelte`
-  ([#143](https://github.com/fuz-dev/fuz/pull/143))
+  ([#143](https://github.com/ryanatkn/fuz/pull/143))
 - add `--text_color` to `body` element style
-  ([#142](https://github.com/fuz-dev/fuz/pull/142))
+  ([#142](https://github.com/ryanatkn/fuz/pull/142))
 - prefer `system-ui` font family
-  ([#142](https://github.com/fuz-dev/fuz/pull/142))
+  ([#142](https://github.com/ryanatkn/fuz/pull/142))
 
 ## 0.13.0
 
 - **break**: replace `Markup.svelte` component with class `.markup` in `style.css`
-  ([#138](https://github.com/fuz-dev/fuz/pull/138))
+  ([#138](https://github.com/ryanatkn/fuz/pull/138))
 - add `.column-min` css class for half-width layouts
-  ([#137](https://github.com/fuz-dev/fuz/pull/137))
+  ([#137](https://github.com/ryanatkn/fuz/pull/137))
 
 ## 0.12.0
 
 - **break**: rename `Teleport.svelte` from `Portal.svelte`
-  ([#136](https://github.com/fuz-dev/fuz/pull/136))
+  ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - **break**: update styles
-  ([#136](https://github.com/fuz-dev/fuz/pull/136))
+  ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - **break**: change `PendingAnimation` property `paused` to `running`
-  ([#136](https://github.com/fuz-dev/fuz/pull/136))
+  ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - add optional `separator` arg to `toToClientId`
-  ([#136](https://github.com/fuz-dev/fuz/pull/136))
+  ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - graduate to pre-alpha status
-  ([#136](https://github.com/fuz-dev/fuz/pull/136))
+  ([#136](https://github.com/ryanatkn/fuz/pull/136))
 
 ## 0.11.0
 
 - **break**: upgrade deps
-  ([#133](https://github.com/fuz-dev/fuz/pull/133))
+  ([#133](https://github.com/ryanatkn/fuz/pull/133))
 - **break**: update styles
-  ([#133](https://github.com/fuz-dev/fuz/pull/133))
+  ([#133](https://github.com/ryanatkn/fuz/pull/133))
 - **break**: change `kleur` exports to match original signatures now that we dropped `snake_case`
-  ([#133](https://github.com/fuz-dev/fuz/pull/133))
+  ([#133](https://github.com/ryanatkn/fuz/pull/133))
 - fix `unwrap` type
-  ([#135](https://github.com/fuz-dev/fuz/pull/135))
+  ([#135](https://github.com/ryanatkn/fuz/pull/135))
 
 ## 0.10.0
 
 - **break**: rename `Dialog` from `Modal`
-  ([#134](https://github.com/fuz-dev/fuz/pull/134))
+  ([#134](https://github.com/ryanatkn/fuz/pull/134))
 
 ## 0.9.0
 
 - **break**: rename to `camelCase` from `snake_case`
-  ([#131](https://github.com/fuz-dev/fuz/pull/131))
+  ([#131](https://github.com/ryanatkn/fuz/pull/131))
 - add and publish `Dialog.svelte` and `Teleport.svelte`
-  ([#127](https://github.com/fuz-dev/fuz/pull/127))
+  ([#127](https://github.com/ryanatkn/fuz/pull/127))
 - add and publish `FeltWindowHost.svelte` and `FeltWindowGuest.svelte`
-  ([#128](https://github.com/fuz-dev/fuz/pull/128))
+  ([#128](https://github.com/ryanatkn/fuz/pull/128))
 
 ## 0.8.1
 
 - add and publish `PendingButton.svelte`
-  ([#125](https://github.com/fuz-dev/fuz/pull/125))
+  ([#125](https://github.com/ryanatkn/fuz/pull/125))
 
 ## 0.8.0
 
 - **break**: rename to `PascalCase` from `Proper_Snake_Case`
-  ([#120](https://github.com/fuz-dev/fuz/pull/120))
+  ([#120](https://github.com/ryanatkn/fuz/pull/120))
 
 ## 0.7.0
 
 - **break**: require Node >=16.6.0
-  ([#116](https://github.com/fuz-dev/fuz/pull/116))
+  ([#116](https://github.com/ryanatkn/fuz/pull/116))
 - update styles
-  ([#115](https://github.com/fuz-dev/fuz/pull/115))
+  ([#115](https://github.com/ryanatkn/fuz/pull/115))
 
 ## 0.6.0
 
 - **break**: rename and add exports in `icons.ts`
-  ([#108](https://github.com/fuz-dev/fuz/pull/108))
+  ([#108](https://github.com/ryanatkn/fuz/pull/108))
 - **break**: add peer deps `svelte` and `@sveltejs/kit`
-  ([#112](https://github.com/fuz-dev/fuz/pull/112))
+  ([#112](https://github.com/ryanatkn/fuz/pull/112))
 - update `PendingAnimation.svelte` with slot content and `running` prop
-  ([#108](https://github.com/fuz-dev/fuz/pull/108))
+  ([#108](https://github.com/ryanatkn/fuz/pull/108))
 - replace `Message.svelte` prop `text` with a slot
-  ([#108](https://github.com/fuz-dev/fuz/pull/108))
+  ([#108](https://github.com/ryanatkn/fuz/pull/108))
 - publish `Message.svelte`
-  ([#108](https://github.com/fuz-dev/fuz/pull/108))
+  ([#108](https://github.com/ryanatkn/fuz/pull/108))
 
 ## 0.5.5
 
 - update `style.css`
-  ([#102](https://github.com/fuz-dev/fuz/pull/102))
+  ([#102](https://github.com/ryanatkn/fuz/pull/102))
 
 ## 0.5.4
 
 - publish `util/randomSeeded.ts`
-  ([#106](https://github.com/fuz-dev/fuz/pull/106))
+  ([#106](https://github.com/ryanatkn/fuz/pull/106))
 
 ## 0.5.3
 
 - add `util/randomSeeded.ts` using
   [code from Johannes Baagøe'](https://github.com/nquinlan/better-random-numbers-for-javascript-mirror)
-  ([#103](https://github.com/fuz-dev/fuz/pull/103))
+  ([#103](https://github.com/ryanatkn/fuz/pull/103))
 
 ## 0.5.2
 
 - update `style.css`
-  ([#101](https://github.com/fuz-dev/fuz/pull/101))
+  ([#101](https://github.com/ryanatkn/fuz/pull/101))
 
 ## 0.5.1
 
 - publish `util/dom.ts` and `util/regexp.ts`
-  ([#99](https://github.com/fuz-dev/fuz/pull/99))
+  ([#99](https://github.com/ryanatkn/fuz/pull/99))
 - update `style.css`
-  ([#100](https://github.com/fuz-dev/fuz/pull/100))
+  ([#100](https://github.com/ryanatkn/fuz/pull/100))
 
 ## 0.5.0
 
 - **break**: merge `util/uuid.ts` into `util/id.ts`
-  ([#96](https://github.com/fuz-dev/fuz/pull/96))
+  ([#96](https://github.com/ryanatkn/fuz/pull/96))
 - add `util/id.ts` and `util/counter.ts`
-  ([#96](https://github.com/fuz-dev/fuz/pull/96))
+  ([#96](https://github.com/ryanatkn/fuz/pull/96))
 - update `style.css`
-  ([#95](https://github.com/fuz-dev/fuz/pull/95))
+  ([#95](https://github.com/ryanatkn/fuz/pull/95))
 - publish `devmode.ts` and `Devmode.svelte`
-  ([#98](https://github.com/fuz-dev/fuz/pull/98))
+  ([#98](https://github.com/ryanatkn/fuz/pull/98))
 
 ## 0.4.5
 
 - update `style.css`
-  ([#94](https://github.com/fuz-dev/fuz/pull/94))
+  ([#94](https://github.com/ryanatkn/fuz/pull/94))
 
 ## 0.4.4
 
 - publish `style.css` and `Markup.svelte`
-  ([#93](https://github.com/fuz-dev/fuz/pull/93))
+  ([#93](https://github.com/ryanatkn/fuz/pull/93))
 
 ## 0.4.3
 
 - fix published types
-  ([#92](https://github.com/fuz-dev/fuz/pull/92))
+  ([#92](https://github.com/ryanatkn/fuz/pull/92))
 
 ## 0.4.2
 
 - publish component `PendingAnimation.svelte`
-  ([#91](https://github.com/fuz-dev/fuz/pull/91))
+  ([#91](https://github.com/ryanatkn/fuz/pull/91))
 
 ## 0.4.1
 
 - export `AsyncStatus` and `wait` from root
-  ([#89](https://github.com/fuz-dev/fuz/pull/89))
+  ([#89](https://github.com/ryanatkn/fuz/pull/89))
 
 ## 0.4.0
 
 - **break**: remove camelCase terminal color exports and rename `color_bg` from `bg_color`
-  ([#88](https://github.com/fuz-dev/fuz/pull/88))
+  ([#88](https://github.com/ryanatkn/fuz/pull/88))
 - **break**: rename `avocado` from `avacado` 🥑
-  ([#88](https://github.com/fuz-dev/fuz/pull/88))
+  ([#88](https://github.com/ryanatkn/fuz/pull/88))
 - add `randomBool` to `util/random.ts`
-  ([#88](https://github.com/fuz-dev/fuz/pull/88))
+  ([#88](https://github.com/ryanatkn/fuz/pull/88))
 - change `randomItem` return type to exclude `undefined`
-  ([#88](https://github.com/fuz-dev/fuz/pull/88))
+  ([#88](https://github.com/ryanatkn/fuz/pull/88))
 - upgrade Gro to 0.28.2
-  ([#87](https://github.com/fuz-dev/fuz/pull/87))
+  ([#87](https://github.com/ryanatkn/fuz/pull/87))
 
 ## 0.3.0
 
 - **break**: swap the names of `spawn` and `spawnProcess`
-  ([#63](https://github.com/fuz-dev/fuz/pull/63))
+  ([#63](https://github.com/ryanatkn/fuz/pull/63))
 - **break**: rename `spawnRestartableProcess` from `createRestartableProcess`
   and remove its `delay` arg
-  ([#63](https://github.com/fuz-dev/fuz/pull/63))
+  ([#63](https://github.com/ryanatkn/fuz/pull/63))
 - **break**: rename `util/timings.ts` from `util/time.ts`
-  ([#63](https://github.com/fuz-dev/fuz/pull/63))
+  ([#63](https://github.com/ryanatkn/fuz/pull/63))
 - **break**: rename `Timings.get_all` from `Timings.getAll`
-  ([#63](https://github.com/fuz-dev/fuz/pull/63))
+  ([#63](https://github.com/ryanatkn/fuz/pull/63))
 - upgrade Gro to 0.28.1
-  ([#63](https://github.com/fuz-dev/fuz/pull/63))
+  ([#63](https://github.com/ryanatkn/fuz/pull/63))
 
 ## 0.2.2
 
 - fix another issue with published types
-  ([#86](https://github.com/fuz-dev/fuz/pull/86))
+  ([#86](https://github.com/ryanatkn/fuz/pull/86))
 
 ## 0.2.1
 
 - fix published types
-  ([#86](https://github.com/fuz-dev/fuz/pull/86))
+  ([#86](https://github.com/ryanatkn/fuz/pull/86))
 
 ## 0.2.0
 
 - **break**: convert to `snake_case` from `camelCase`
-  ([#50](https://github.com/fuz-dev/fuz/pull/50))
+  ([#50](https://github.com/ryanatkn/fuz/pull/50))
 - **break**: rename `src/util` from `src/utils`
-  ([#56](https://github.com/fuz-dev/fuz/pull/56))
+  ([#56](https://github.com/ryanatkn/fuz/pull/56))
 - add first pass at onboarding sketch
-  ([#32](https://github.com/fuz-dev/fuz/pull/32))
+  ([#32](https://github.com/ryanatkn/fuz/pull/32))
 
 ## 0.1.4
 
 - update Gro and publish with its new strategy
-  ([#31](https://github.com/fuz-dev/fuz/pull/31))
+  ([#31](https://github.com/ryanatkn/fuz/pull/31))
 
 ## 0.1.3
 
-- move utils from `@grogarden/gro`
-  ([#30](https://github.com/fuz-dev/fuz/pull/30))
+- move utils from `@ryanatkn/gro`
+  ([#30](https://github.com/ryanatkn/fuz/pull/30))
 
 ## 0.1.2
 
 - remove remaining Svelte components from public API until the full process is ready
-  ([#29](https://github.com/fuz-dev/fuz/pull/29))
+  ([#29](https://github.com/ryanatkn/fuz/pull/29))
 
 ## 0.1.1
 
 - remove `Nav.svelte` from the public API
-  ([#27](https://github.com/fuz-dev/fuz/pull/27))
+  ([#27](https://github.com/ryanatkn/fuz/pull/27))
 
 ## 0.1.0
 
 - publish
-  ([#19](https://github.com/fuz-dev/fuz/pull/19))
+  ([#19](https://github.com/ryanatkn/fuz/pull/19))
diff --git a/README.md b/README.md
index e5f359166..14f133f1c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# `@fuz.dev/fuz`
+# `@ryanatkn/fuz`
 
 > friendly user zystem 🧶 [fuz.dev](https://www.fuz.dev/)
 
@@ -14,24 +14,24 @@ and <a href="https://kit.svelte.dev/">SvelteKit</a>:
   unless the gains are substantial
 - has a small set of utility classes with plans for a lot more -
   currently includes a single global importable `style.css`,
-  see [this issue about optimization](https://github.com/fuz-dev/fuz/issues/277)
+  see [this issue about optimization](https://github.com/ryanatkn/fuz/issues/277)
 
 ## usage
 
 ```bash
-npm i -D @fuz.dev/fuz
+npm i -D @ryanatkn/fuz
 ```
 
 Import modules at their full paths:
 
 ```ts
 // plain CSS stylesheets:
-import '@fuz.dev/fuz/style.css';
-import '@fuz.dev/fuz/theme.css'; // or bring your own
+import '@ryanatkn/fuz/style.css';
+import '@ryanatkn/fuz/theme.css'; // or bring your own
 // Svelte components:
-import Themed from '@fuz.dev/fuz/Themed.svelte';
+import Themed from '@ryanatkn/fuz/Themed.svelte';
 // TypeScript modules:
-import {type Theme, get_theme} from '@fuz.dev/fuz/theme.js';
+import {type Theme, get_theme} from '@ryanatkn/fuz/theme.js';
 ```
 
 See [the library](https://www.fuz.dev/library) and
diff --git a/package-lock.json b/package-lock.json
index 1f16eed01..e9a193304 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,21 +1,20 @@
 {
-  "name": "@fuz.dev/fuz",
+  "name": "@ryanatkn/fuz",
   "version": "0.81.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@fuz.dev/fuz",
+      "name": "@ryanatkn/fuz",
       "version": "0.81.0",
       "license": "MIT",
       "devDependencies": {
         "@changesets/changelog-git": "^0.2.0",
-        "@feltjs/eslint-config": "^0.4.1",
-        "@fuz.dev/fuz_code": "^0.5.0",
-        "@fuz.dev/fuz_dialog": "^0.6.0",
-        "@fuz.dev/fuz_library": "^0.23.0",
-        "@grogarden/gro": "^0.108.0",
-        "@ryanatkn/orc": "^0.17.0",
+        "@ryanatkn/belt": "^0.20.3",
+        "@ryanatkn/eslint-config": "^0.1.0",
+        "@ryanatkn/fuz_code": "^0.6.0",
+        "@ryanatkn/gro": "^0.112.0",
+        "@ryanatkn/orc": "^0.18.0",
         "@sveltejs/adapter-static": "^3.0.1",
         "@sveltejs/kit": "^2.0.6",
         "@sveltejs/package": "^2.2.5",
@@ -64,18 +63,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@apidevtools/json-schema-ref-parser": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz",
-      "integrity": "sha512-GBD2Le9w2+lVFoc4vswGI/TjkNIZSVp7+9xPf+X3uidBfWnAeUWmquteSyt0+VCrhNMWj/FTABISQrD3Z/YA+w==",
-      "dev": true,
-      "dependencies": {
-        "@jsdevtools/ono": "^7.1.3",
-        "@types/json-schema": "^7.0.6",
-        "call-me-maybe": "^1.0.1",
-        "js-yaml": "^4.1.0"
-      }
-    },
     "node_modules/@changesets/changelog-git": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.2.0.tgz",
@@ -538,106 +525,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@feltjs/eslint-config": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@feltjs/eslint-config/-/eslint-config-0.4.1.tgz",
-      "integrity": "sha512-kRedj6NXl9AD9NFKAGnxfVuyauJAMEkRYHOuWKdOzohtTWlRiK+9OWj17DpHLlNEy11qVSJSOm8N733P0yDWOg==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.6"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": ">=6",
-        "@typescript-eslint/parser": ">=6",
-        "eslint": ">=8",
-        "eslint-plugin-svelte": ">=2",
-        "svelte": ">=4",
-        "typescript": ">=5"
-      }
-    },
-    "node_modules/@fuz.dev/fuz_code": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@fuz.dev/fuz_code/-/fuz_code-0.5.0.tgz",
-      "integrity": "sha512-pvovlUb70qyo2XvMNxWUSmrSI2TBD0qPZsFQ0wdy8Zv5l/tS8dBbi5+tyLOz/QHWc8Y2NMMsNzd0gADPsXMP2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=20.10"
-      },
-      "peerDependencies": {
-        "svelte": "*"
-      }
-    },
-    "node_modules/@fuz.dev/fuz_dialog": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@fuz.dev/fuz_dialog/-/fuz_dialog-0.6.0.tgz",
-      "integrity": "sha512-YVViGv5hRzBRQZ2eEV4VqOdQtSrFarJ4FM8LCvO29JYojdJORw3nfdReisjb2k9lesMeJm7WMuXTrBNVaZZ8rA==",
-      "dev": true,
-      "engines": {
-        "node": ">=20.10"
-      },
-      "peerDependencies": {
-        "@fuz.dev/fuz_library": "*",
-        "@grogarden/util": "*",
-        "svelte": "*"
-      }
-    },
-    "node_modules/@fuz.dev/fuz_library": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/@fuz.dev/fuz_library/-/fuz_library-0.23.0.tgz",
-      "integrity": "sha512-3c4GOZiHX5lkDhdWLrqoUjpZVgU9tbShKa801jj9gmqVMPgJqTMhi25orHQoY0LBe2VPToPYqc27/4A8LAUqdg==",
-      "dev": true,
-      "engines": {
-        "node": ">=20.7"
-      },
-      "peerDependencies": {
-        "@grogarden/util": "*",
-        "@sveltejs/kit": "*",
-        "svelte": "*"
-      }
-    },
-    "node_modules/@grogarden/gro": {
-      "version": "0.108.0",
-      "resolved": "https://registry.npmjs.org/@grogarden/gro/-/gro-0.108.0.tgz",
-      "integrity": "sha512-SQNwvOTAmufyLCUNaMIDnb/ANe4iE0NrOpplEcbMNxzdob16LL5KHzUvW7rOC7Ia0En0bouIkwSZ/jLVgEBYKw==",
-      "dev": true,
-      "dependencies": {
-        "@grogarden/util": "^0.18.3",
-        "@ryanatkn/json-schema-to-typescript": "^11.1.5",
-        "chokidar": "^3.5.3",
-        "dotenv": "^16.3.1",
-        "es-module-lexer": "^1.4.1",
-        "kleur": "^4.1.5",
-        "mri": "^1.2.0",
-        "prettier": "^3.1.1",
-        "prettier-plugin-svelte": "^3.1.2",
-        "tiny-glob": "^0.2.9",
-        "ts-morph": "^21.0.1",
-        "tslib": "^2.6.2",
-        "zod": "^3.22.4"
-      },
-      "bin": {
-        "gro": "dist/gro.js"
-      },
-      "engines": {
-        "node": ">=20.10"
-      },
-      "peerDependencies": {
-        "esbuild": "^0.19",
-        "svelte": "*"
-      }
-    },
-    "node_modules/@grogarden/util": {
-      "version": "0.18.3",
-      "resolved": "https://registry.npmjs.org/@grogarden/util/-/util-0.18.3.tgz",
-      "integrity": "sha512-SjWgm3xAv7/J2Xjy61Yn34QrhMilMJJXwW4ywhNy3JS3If18abc8ewThlLVfTUSxdzdSxoAmRVAY+TyylkENgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=20.10"
-      },
-      "peerDependencies": {
-        "kleur": "^4.0.0"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -719,12 +606,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@jsdevtools/ono": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
-      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
-      "dev": true
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -948,29 +829,86 @@
       ],
       "peer": true
     },
-    "node_modules/@ryanatkn/json-schema-to-typescript": {
-      "version": "11.1.5",
-      "resolved": "https://registry.npmjs.org/@ryanatkn/json-schema-to-typescript/-/json-schema-to-typescript-11.1.5.tgz",
-      "integrity": "sha512-meUWQJW+duixeAGizv/dcQ7Xp/RUvCUJQ68ChLqMp8kS+yshpDtr9OhSu+LVnnCz7C57WoU5kuJK0qEtYGqtXg==",
+    "node_modules/@ryanatkn/belt": {
+      "version": "0.20.3",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.20.3.tgz",
+      "integrity": "sha512-8zj/s500HzW3Yh+/OaZOvm8zF/PBd0h0drPqV5nueBcSgJGPaaUUefXLE6vkrTB13AMG8yCVF0ZJvZlJA8yHFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=20.10"
+      },
+      "peerDependencies": {
+        "kleur": "^4.0.0"
+      }
+    },
+    "node_modules/@ryanatkn/eslint-config": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/eslint-config/-/eslint-config-0.1.0.tgz",
+      "integrity": "sha512-5DwEtUpsth+NJilm56OLEQ/YxjkN5xtxf2I5FejMrCw/3B8Osp9uiM6BVWXbRMAud9fLAHO/Vw8EQmcipHAbLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=20.10"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">=6",
+        "@typescript-eslint/parser": ">=6",
+        "eslint": ">=8",
+        "eslint-plugin-svelte": ">=2",
+        "svelte": ">=4",
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/@ryanatkn/fuz_code": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/fuz_code/-/fuz_code-0.6.0.tgz",
+      "integrity": "sha512-SNITnq++Ys3rM3VUNAPO+t57BuSt4SGFYn9n/MmCO+rnPQZt3HNshWPuF5knNZVLOdzqu6uglY//IX3Ge2aZTg==",
+      "dev": true,
+      "engines": {
+        "node": ">=20.10"
+      },
+      "peerDependencies": {
+        "prism-svelte": "*",
+        "prismjs": "*",
+        "svelte": "*"
+      }
+    },
+    "node_modules/@ryanatkn/gro": {
+      "version": "0.112.0",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.112.0.tgz",
+      "integrity": "sha512-xReYQlRqWyjgBDKWdoe4WSwRLN4HJfyTXFgFKuCn3Wjn9M65/WUcwdkksBeFqK/EHPqg5VTvJT/GO2uFv8Jq7Q==",
       "dev": true,
       "dependencies": {
-        "@types/json-schema": "^7.0.6",
-        "@types/lodash": "^4.14.168",
-        "json-schema-ref-parser": "^9.0.6",
-        "json-stringify-safe": "^5.0.1",
-        "lodash": "^4.17.20"
+        "@ryanatkn/belt": "^0.20.1",
+        "chokidar": "^3.5.3",
+        "dotenv": "^16.3.1",
+        "es-module-lexer": "^1.4.1",
+        "kleur": "^4.1.5",
+        "mri": "^1.2.0",
+        "prettier": "^3.1.1",
+        "prettier-plugin-svelte": "^3.1.2",
+        "tiny-glob": "^0.2.9",
+        "ts-morph": "^21.0.1",
+        "tslib": "^2.6.2",
+        "zod": "^3.22.4"
+      },
+      "bin": {
+        "gro": "dist/gro.js"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=20.10"
+      },
+      "peerDependencies": {
+        "esbuild": "^0.19",
+        "svelte": "*"
       }
     },
     "node_modules/@ryanatkn/orc": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@ryanatkn/orc/-/orc-0.17.0.tgz",
-      "integrity": "sha512-cnf8AwZQCucWBG273I3e7D6M8ylUmffPZ1+GeQVP5gUMFxJcadib6K/gzACUFFqxzY0nUoGA6Vp0HdGG4UMhyg==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/orc/-/orc-0.18.0.tgz",
+      "integrity": "sha512-jABm0LCuDyeZLG9vXF3WmXxRwrkKq8dpOlzlCZkT5ujECshdPaXcKvtOnBGtMagnfn0b+IIaqYDlwMlDVwAxRQ==",
       "dev": true,
       "engines": {
-        "node": ">=20.7"
+        "node": ">=20.10"
       },
       "peerDependencies": {
         "@sveltejs/kit": "*",
@@ -1148,12 +1086,6 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
-    "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
-      "dev": true
-    },
     "node_modules/@types/prismjs": {
       "version": "1.26.3",
       "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz",
@@ -1545,12 +1477,6 @@
         "node": "*"
       }
     },
-    "node_modules/call-me-maybe": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
-      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
-      "dev": true
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1790,15 +1716,15 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "version": "16.4.4",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz",
+      "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==",
       "dev": true,
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+        "url": "https://dotenvx.com"
       }
     },
     "node_modules/es-module-lexer": {
@@ -2437,19 +2363,6 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
-    "node_modules/json-schema-ref-parser": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz",
-      "integrity": "sha512-qcP2lmGy+JUoQJ4DOQeLaZDqH9qSkeGCK3suKWxJXS82dg728Mn3j97azDMaOUmJAN4uCq91LdPx4K7E8F1a7Q==",
-      "deprecated": "Please switch to @apidevtools/json-schema-ref-parser",
-      "dev": true,
-      "dependencies": {
-        "@apidevtools/json-schema-ref-parser": "9.0.9"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2462,12 +2375,6 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2535,12 +2442,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 5a6c97c7c..3cbe99629 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@fuz.dev/fuz",
+  "name": "@ryanatkn/fuz",
   "version": "0.81.0",
-  "description": "design system for CSS, Svelte, and SvelteKit",
+  "description": "UI library for Svelte and SvelteKit",
   "icon": "🧶",
   "public": true,
   "license": "MIT",
@@ -13,10 +13,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fuz-dev/fuz.git"
+    "url": "git+https://github.com/ryanatkn/fuz.git"
   },
   "bugs": {
-    "url": "https://github.com/fuz-dev/fuz/issues",
+    "url": "https://github.com/ryanatkn/fuz/issues",
     "email": "mail@ryanatkn.com"
   },
   "type": "module",
@@ -38,12 +38,11 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.0",
-    "@feltjs/eslint-config": "^0.4.1",
-    "@fuz.dev/fuz_code": "^0.5.0",
-    "@fuz.dev/fuz_dialog": "^0.6.0",
-    "@fuz.dev/fuz_library": "^0.23.0",
-    "@grogarden/gro": "^0.108.0",
-    "@ryanatkn/orc": "^0.17.0",
+    "@ryanatkn/belt": "^0.20.3",
+    "@ryanatkn/eslint-config": "^0.1.0",
+    "@ryanatkn/fuz_code": "^0.6.0",
+    "@ryanatkn/gro": "^0.112.0",
+    "@ryanatkn/orc": "^0.18.0",
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.0.6",
     "@sveltejs/package": "^2.2.5",
@@ -65,7 +64,7 @@
   },
   "eslintConfig": {
     "root": true,
-    "extends": "@feltjs",
+    "extends": "@ryanatkn",
     "rules": {
       "no-console": 1
     }
@@ -88,11 +87,64 @@
     ]
   },
   "exports": {
+    "./Alert.svelte": {
+      "svelte": "./dist/Alert.svelte",
+      "default": "./dist/Alert.svelte",
+      "types": "./dist/Alert.svelte.d.ts"
+    },
+    "./alert.js": {
+      "default": "./dist/alert.js",
+      "types": "./dist/alert.d.ts"
+    },
+    "./Breadcrumb.svelte": {
+      "svelte": "./dist/Breadcrumb.svelte",
+      "default": "./dist/Breadcrumb.svelte",
+      "types": "./dist/Breadcrumb.svelte.d.ts"
+    },
+    "./Card.svelte": {
+      "svelte": "./dist/Card.svelte",
+      "default": "./dist/Card.svelte",
+      "types": "./dist/Card.svelte.d.ts"
+    },
     "./Color_Scheme_Input.svelte": {
       "svelte": "./dist/Color_Scheme_Input.svelte",
       "default": "./dist/Color_Scheme_Input.svelte",
       "types": "./dist/Color_Scheme_Input.svelte.d.ts"
     },
+    "./Contextmenu_Entry.svelte": {
+      "svelte": "./dist/Contextmenu_Entry.svelte",
+      "default": "./dist/Contextmenu_Entry.svelte",
+      "types": "./dist/Contextmenu_Entry.svelte.d.ts"
+    },
+    "./Contextmenu_Link_Entry.svelte": {
+      "svelte": "./dist/Contextmenu_Link_Entry.svelte",
+      "default": "./dist/Contextmenu_Link_Entry.svelte",
+      "types": "./dist/Contextmenu_Link_Entry.svelte.d.ts"
+    },
+    "./Contextmenu_Submenu.svelte": {
+      "svelte": "./dist/Contextmenu_Submenu.svelte",
+      "default": "./dist/Contextmenu_Submenu.svelte",
+      "types": "./dist/Contextmenu_Submenu.svelte.d.ts"
+    },
+    "./Contextmenu_Text_Entry.svelte": {
+      "svelte": "./dist/Contextmenu_Text_Entry.svelte",
+      "default": "./dist/Contextmenu_Text_Entry.svelte",
+      "types": "./dist/Contextmenu_Text_Entry.svelte.d.ts"
+    },
+    "./Contextmenu.svelte": {
+      "svelte": "./dist/Contextmenu.svelte",
+      "default": "./dist/Contextmenu.svelte",
+      "types": "./dist/Contextmenu.svelte.d.ts"
+    },
+    "./contextmenu.js": {
+      "default": "./dist/contextmenu.js",
+      "types": "./dist/contextmenu.d.ts"
+    },
+    "./Copy_To_Clipboard.svelte": {
+      "svelte": "./dist/Copy_To_Clipboard.svelte",
+      "default": "./dist/Copy_To_Clipboard.svelte",
+      "types": "./dist/Copy_To_Clipboard.svelte.d.ts"
+    },
     "./deployments.json": {
       "default": "./dist/deployments.json",
       "types": "./dist/deployments.json.d.ts"
@@ -101,10 +153,111 @@
       "default": "./dist/deployments.task.js",
       "types": "./dist/deployments.task.d.ts"
     },
+    "./Devmode_Controls.svelte": {
+      "svelte": "./dist/Devmode_Controls.svelte",
+      "default": "./dist/Devmode_Controls.svelte",
+      "types": "./dist/Devmode_Controls.svelte.d.ts"
+    },
+    "./devmode.js": {
+      "default": "./dist/devmode.js",
+      "types": "./dist/devmode.d.ts"
+    },
+    "./Dialog.svelte": {
+      "svelte": "./dist/Dialog.svelte",
+      "default": "./dist/Dialog.svelte",
+      "types": "./dist/Dialog.svelte.d.ts"
+    },
+    "./dialog.js": {
+      "default": "./dist/dialog.js",
+      "types": "./dist/dialog.d.ts"
+    },
+    "./Dialogs.svelte": {
+      "svelte": "./dist/Dialogs.svelte",
+      "default": "./dist/Dialogs.svelte",
+      "types": "./dist/Dialogs.svelte.d.ts"
+    },
+    "./Github_Logo.svelte": {
+      "svelte": "./dist/Github_Logo.svelte",
+      "default": "./dist/Github_Logo.svelte",
+      "types": "./dist/Github_Logo.svelte.d.ts"
+    },
+    "./helpers.js": {
+      "default": "./dist/helpers.js",
+      "types": "./dist/helpers.d.ts"
+    },
+    "./Hue_Input.svelte": {
+      "svelte": "./dist/Hue_Input.svelte",
+      "default": "./dist/Hue_Input.svelte",
+      "types": "./dist/Hue_Input.svelte.d.ts"
+    },
+    "./Library_Footer.svelte": {
+      "svelte": "./dist/Library_Footer.svelte",
+      "default": "./dist/Library_Footer.svelte",
+      "types": "./dist/Library_Footer.svelte.d.ts"
+    },
+    "./Library_Header.svelte": {
+      "svelte": "./dist/Library_Header.svelte",
+      "default": "./dist/Library_Header.svelte",
+      "types": "./dist/Library_Header.svelte.d.ts"
+    },
+    "./Library_Menu.svelte": {
+      "svelte": "./dist/Library_Menu.svelte",
+      "default": "./dist/Library_Menu.svelte",
+      "types": "./dist/Library_Menu.svelte.d.ts"
+    },
+    "./Library_Nav.svelte": {
+      "svelte": "./dist/Library_Nav.svelte",
+      "default": "./dist/Library_Nav.svelte",
+      "types": "./dist/Library_Nav.svelte.d.ts"
+    },
+    "./Library_Panel.svelte": {
+      "svelte": "./dist/Library_Panel.svelte",
+      "default": "./dist/Library_Panel.svelte",
+      "types": "./dist/Library_Panel.svelte.d.ts"
+    },
+    "./Library_Vocab.svelte": {
+      "svelte": "./dist/Library_Vocab.svelte",
+      "default": "./dist/Library_Vocab.svelte",
+      "types": "./dist/Library_Vocab.svelte.d.ts"
+    },
+    "./Library.svelte": {
+      "svelte": "./dist/Library.svelte",
+      "default": "./dist/Library.svelte",
+      "types": "./dist/Library.svelte.d.ts"
+    },
     "./orc.task.js": {
       "default": "./dist/orc.task.js",
       "types": "./dist/orc.task.d.ts"
     },
+    "./Package_Detail.svelte": {
+      "svelte": "./dist/Package_Detail.svelte",
+      "default": "./dist/Package_Detail.svelte",
+      "types": "./dist/Package_Detail.svelte.d.ts"
+    },
+    "./package_meta.js": {
+      "default": "./dist/package_meta.js",
+      "types": "./dist/package_meta.d.ts"
+    },
+    "./Package_Summary.svelte": {
+      "svelte": "./dist/Package_Summary.svelte",
+      "default": "./dist/Package_Summary.svelte",
+      "types": "./dist/Package_Summary.svelte.d.ts"
+    },
+    "./Pending_Animation.svelte": {
+      "svelte": "./dist/Pending_Animation.svelte",
+      "default": "./dist/Pending_Animation.svelte",
+      "types": "./dist/Pending_Animation.svelte.d.ts"
+    },
+    "./Pending_Button.svelte": {
+      "svelte": "./dist/Pending_Button.svelte",
+      "default": "./dist/Pending_Button.svelte",
+      "types": "./dist/Pending_Button.svelte.d.ts"
+    },
+    "./Redirect.svelte": {
+      "svelte": "./dist/Redirect.svelte",
+      "default": "./dist/Redirect.svelte",
+      "types": "./dist/Redirect.svelte.d.ts"
+    },
     "./style.css": {
       "default": "./dist/style.css"
     },
@@ -112,6 +265,11 @@
       "default": "./dist/swallow.js",
       "types": "./dist/swallow.d.ts"
     },
+    "./Teleport.svelte": {
+      "svelte": "./dist/Teleport.svelte",
+      "default": "./dist/Teleport.svelte",
+      "types": "./dist/Teleport.svelte.d.ts"
+    },
     "./Theme_Input.svelte": {
       "svelte": "./dist/Theme_Input.svelte",
       "default": "./dist/Theme_Input.svelte",
@@ -142,6 +300,20 @@
       "default": "./dist/themes.js",
       "types": "./dist/themes.d.ts"
     },
+    "./Tome_Detail.svelte": {
+      "svelte": "./dist/Tome_Detail.svelte",
+      "default": "./dist/Tome_Detail.svelte",
+      "types": "./dist/Tome_Detail.svelte.d.ts"
+    },
+    "./Tome_Title.svelte": {
+      "svelte": "./dist/Tome_Title.svelte",
+      "default": "./dist/Tome_Title.svelte",
+      "types": "./dist/Tome_Title.svelte.d.ts"
+    },
+    "./tome.js": {
+      "default": "./dist/tome.js",
+      "types": "./dist/tome.d.ts"
+    },
     "./variables.js": {
       "default": "./dist/variables.js",
       "types": "./dist/variables.d.ts"
diff --git a/src/lib/Alert.svelte b/src/lib/Alert.svelte
new file mode 100644
index 000000000..73155ea8a
--- /dev/null
+++ b/src/lib/Alert.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type {Alert_Status} from '$lib/alert.js';
+	import {alert_status_options} from '$lib/alert.js';
+
+	export let status: Alert_Status = 'inform';
+	export let icon: string | null | undefined = undefined;
+	export let button: boolean | undefined = undefined;
+
+	$: options = alert_status_options[status];
+	$: final_icon = icon === undefined ? options.icon : icon;
+	// TODO change this to use the hue and put transparency on the borders, or add a borderColor option
+	$: color = options.color;
+</script>
+
+{#if button}
+	<button class="message" type="button" style:--color={color} on:click
+		>{#if icon !== null}<div class="icon">
+				<slot name="icon" icon={final_icon}>{final_icon}</slot>
+			</div>{/if}<slot /></button
+	>
+{:else}
+	<div class="message panel" style:--color={color}>
+		{#if icon !== null}<div class="icon">
+				<slot name="icon" icon={final_icon}>{final_icon}</slot>
+			</div>{/if}<slot />
+	</div>
+{/if}
+
+<style>
+	.message {
+		min-height: var(--message_min_height);
+		width: 100%;
+		color: var(--color);
+		font-weight: 700;
+		font-size: var(--size_md);
+		border-width: var(--border_width_1);
+		border-style: var(--border_style);
+		border-color: var(--color);
+		display: flex;
+		justify-content: flex-start; /* override button horizontal centering */
+		align-items: center;
+		padding: var(--spacing_xs2) var(--spacing_lg) var(--spacing_xs2) var(--spacing_xs);
+		margin-bottom: var(--spacing_lg);
+	}
+	.message:last-child {
+		margin-bottom: 0;
+	}
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-right: var(--spacing_md);
+		font-size: var(--size_2);
+	}
+</style>
diff --git a/src/lib/Breadcrumb.svelte b/src/lib/Breadcrumb.svelte
new file mode 100644
index 000000000..acaef70da
--- /dev/null
+++ b/src/lib/Breadcrumb.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import {parse_path_pieces} from '@ryanatkn/belt/path.js';
+	import {base} from '$app/paths';
+	import {page} from '$app/stores';
+
+	export let path: string | undefined = undefined;
+	export let selected_path: string | null | undefined = undefined; // `null` means none
+	export let base_path: string | undefined = undefined;
+
+	$: final_path = path ?? $page.url.pathname;
+	$: final_selected_path =
+		selected_path === null ? null : selected_path === undefined ? final_path : selected_path;
+	$: final_base_path = base_path ?? base;
+
+	$: path_pieces = parse_path_pieces(final_path);
+
+	$: root_path = final_base_path || '/';
+</script>
+
+<div class="breadcrumb">
+	<!-- The default/only slot is the content for the root "/" link. -->
+	<a href={root_path} class:selected={root_path === final_selected_path}><slot>•</slot></a
+	>{#each path_pieces as pathPiece}{#if pathPiece.type === 'piece'}<a
+				href={final_base_path + pathPiece.path}
+				class:selected={pathPiece.path === final_selected_path}>{pathPiece.name}</a
+			>{:else}<span class="separator"><slot name="separator">/</slot></span>{/if}{/each}
+</div>
+
+<style>
+	.breadcrumb {
+		text-align: center;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: stretch;
+		padding: var(--spacing_md) 0;
+	}
+	a {
+		position: relative;
+		z-index: 1;
+		padding: 0 var(--spacing_sm);
+		display: flex;
+		align-items: center;
+	}
+	.separator {
+		position: relative;
+		z-index: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 0;
+	}
+</style>
diff --git a/src/lib/Card.svelte b/src/lib/Card.svelte
new file mode 100644
index 000000000..007dc0a4b
--- /dev/null
+++ b/src/lib/Card.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+
+	export let tag: string | undefined = undefined;
+	export let href: string | undefined = undefined;
+	export let align: 'left' | 'right' | 'above' | 'below' = 'left';
+	export let attrs: any = undefined;
+
+	$: link = !!href;
+	$: selected = link && $page.url.pathname === href;
+	$: final_tag = tag || (link ? 'a' : 'div');
+	$: inferred_attrs = link ? {href} : undefined;
+
+	$: left = align === 'left';
+	$: right = align === 'right';
+	$: above = align === 'above';
+	$: below = align === 'below';
+
+	$: icon = link ? '🔗' : '🪧';
+</script>
+
+<svelte:element
+	this={final_tag}
+	class="card"
+	{...attrs}
+	{...inferred_attrs}
+	class:link
+	class:selected
+	class:left
+	class:right
+	class:above
+	class:below
+>
+	{#if align === 'left' || align === 'above'}<div class="icon">
+			<slot name="icon">{icon}</slot>
+		</div>{/if}
+	<div class="content"><slot /></div>
+	{#if align === 'right' || align === 'below'}<div class="icon">
+			<slot name="icon">{icon}</slot>
+		</div>{/if}</svelte:element
+>
+
+<style>
+	.card {
+		--icon_size: var(--icon_size_lg);
+		--icon_margin: var(--spacing_lg);
+		display: flex;
+		font-size: var(--size_2);
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing_lg);
+		width: var(--card_width);
+		background-color: var(--fg_1);
+		border-radius: var(--border_radius);
+		text-decoration: none;
+		text-align: left;
+	}
+	.above,
+	.below {
+		flex-direction: column;
+		text-align: center;
+	}
+	.link.selected .content,
+	.link:hover .content {
+		text-decoration: underline;
+	}
+	.left .content {
+		padding-right: var(--spacing_sm);
+	}
+	.right .content {
+		text-align: right;
+		padding-left: var(--spacing_sm);
+	}
+	.icon {
+		font-size: var(--icon_size);
+		text-align: center;
+		display: flex;
+		justify-content: center;
+	}
+	.left .icon {
+		margin-right: var(--icon_margin);
+	}
+	.right .icon {
+		margin-left: var(--icon_margin);
+	}
+	.above .icon {
+		margin-bottom: var(--icon_margin);
+	}
+	.below .icon {
+		margin-top: var(--icon_margin);
+	}
+	@media (max-width: 460px) {
+		.card {
+			font-size: var(--size_1);
+		}
+	}
+	@media (max-width: 380px) {
+		.card {
+			--icon_size: var(--icon_size_md);
+			--icon_margin: var(--spacing_sm);
+			font-size: var(--size_lg);
+		}
+		.icon {
+			font-size: var(--icon_size_md);
+			margin-right: var(--spacing_sm);
+		}
+		.right .icon {
+			margin-right: 0;
+			margin-left: var(--spacing_sm);
+		}
+	}
+</style>
diff --git a/src/lib/Contextmenu.svelte b/src/lib/Contextmenu.svelte
new file mode 100644
index 000000000..87923ece3
--- /dev/null
+++ b/src/lib/Contextmenu.svelte
@@ -0,0 +1,302 @@
+<script lang="ts">
+	import {is_editable, swallow} from '@ryanatkn/belt/dom.js';
+
+	import {
+		set_contextmenu,
+		set_contextmenu_dimensions,
+		type Contextmenu_Store,
+		open_contextmenu,
+	} from '$lib/contextmenu.js';
+
+	// TODO this is full of hacks to implement "longpress"
+	// to work around iOS not firing the `'contextmenu'` event:
+	// https://github.com/ryanatkn/fuz/pull/319
+
+	/**
+	 * The `contextmenu` prop is not reactive because that's a rare corner case and
+	 * it's easier to put the `contextmenu` directly in the context rather than wrapping with a store.
+	 * If you need to change the contextmenu prop for some reason, use a `{#key contextmenu}` block:
+	 * https://svelte.dev/docs#template-syntax-key
+	 * @nonreactive
+	 */
+	export let contextmenu: Contextmenu_Store;
+	set_contextmenu(contextmenu);
+
+	/**
+	 * The number of pixels the pointer can be moved without canceling `longpress`.
+	 * Defaults to half the default `--input_height`.
+	 */
+	export let longpress_move_tolerance = 21;
+
+	/**
+	 * The number of milliseconds after a touch starts before a `longpress` is detected.
+	 * This value needs to be lower than iOS's ~500 so we can intercept its behavior.
+	 */
+	export let longpress_duration = 633;
+
+	/**
+	 * Whether to detect tap-then-longpress to bypass `longpress`.
+	 * Setting to `false` disables the gesture.
+	 */
+	export let bypass_with_tap_then_longpress = true;
+
+	/**
+	 * The number of milliseconds between taps to detect a gesture that bypasses a `longpress`.
+	 * Used only when `bypass_with_tap_then_longpress` is true.
+	 * If the duration is too long, it'll detect more false positives and interrupt normal usage,
+	 * but too short and some people will have difficulty performing the gesture.
+	 */
+	export let tap_then_longpress_duration = 660;
+
+	/**
+	 * The number of pixels the pointer can be moved between taps to detect a tap-then-longpress.
+	 * Used only when `bypass_with_tap_then_longpress` is true.
+	 */
+	export let tap_then_longpress_move_tolerance = 7;
+
+	/**
+	 * The number of pixels to offset from the pointer X position when opened.
+	 * Useful to ensure the first menu item is immediately under the pointer.
+	 */
+	export let open_offset_x = -2;
+
+	/**
+	 * The number of pixels to offset from the pointer Y position when opened.
+	 * Useful to ensure the first menu item is immediately under the pointer.
+	 */
+	export let open_offset_y = -2;
+
+	let el: HTMLElement | undefined;
+
+	$: ({layout, initial_layout} = contextmenu);
+
+	// Update the layout unless it's custom.
+	// Custom layouts are when `contextmenu.initial_layout` is the same as `contextmenu.layout`.
+	$: custom_layout = layout === initial_layout;
+	let clientWidth: number | undefined = undefined;
+	let clientHeight: number | undefined = undefined;
+	$: if (!custom_layout && clientWidth !== undefined && clientHeight !== undefined) {
+		$layout = {width: clientWidth, height: clientHeight};
+	}
+
+	$: ({open, x: contextmenu_x, y: contextmenu_y} = $contextmenu);
+	const dimensions = set_contextmenu_dimensions();
+	$: if (el) {
+		const rect = el.getBoundingClientRect();
+		$dimensions = {width: rect.width, height: rect.height};
+	}
+	$: x = contextmenu_x + Math.min(0, $layout.width - (contextmenu_x + $dimensions.width));
+	$: y = contextmenu_y + Math.min(0, $layout.height - (contextmenu_y + $dimensions.height));
+
+	// TODO maybe show an indicator fade in at these coordinates
+
+	// These values are `undefined` when unused, and `null` after being reset.
+	let touch_x: number | undefined | null;
+	let touch_y: number | undefined | null;
+	let longpress_start_time: number | undefined | null;
+	let longpress_timeout: number | undefined | null;
+	let longpress_opened: boolean | undefined;
+	let longpress_bypass: boolean | undefined;
+
+	const reset_longpress = (): void => {
+		if (longpress_opened) longpress_opened = false;
+		if (longpress_timeout == null) return;
+		clearTimeout(longpress_timeout);
+		longpress_timeout = null;
+	};
+
+	const on_window_contextmenu = (e: MouseEvent) => {
+		// handle the tap-then-longpress bypass gesture
+		if (longpress_bypass) {
+			longpress_bypass = false;
+			return;
+		}
+		// handle touch devices that trigger `'contextmenu'` slower than our longpress
+		if (longpress_opened) {
+			reset_longpress();
+			swallow(e);
+			return;
+		}
+		const {target} = e;
+		if (
+			e.shiftKey ||
+			!(target instanceof HTMLElement || target instanceof SVGElement) ||
+			el?.contains(target) ||
+			is_editable(target)
+		) {
+			return;
+		}
+		if (
+			open_contextmenu(target, e.clientX + open_offset_x, e.clientY + open_offset_y, contextmenu)
+		) {
+			swallow(e);
+			reset_longpress(); // handle touch devices that trigger `'contextmenu'` faster than our longpress
+		}
+	};
+
+	// Needed for the iOS workaround, is passive.
+	const touchstart = (e: TouchEvent): void => {
+		if (longpress_opened) longpress_opened = false;
+		const {touches, target} = e;
+		if (
+			open ||
+			touches.length !== 1 ||
+			e.shiftKey ||
+			!(target instanceof HTMLElement || target instanceof SVGElement) ||
+			is_editable(target)
+		) {
+			return;
+		}
+
+		const {clientX, clientY} = touches[0];
+
+		// Bypass the contextmenu behavior in certain conditions including a tap-and-longpress gesture.
+		// To handle double-tap-and-hold we need to see if `longpress_start_time`
+		// is less than `tap_then_longpress_duration`, and also allow a small amount
+		// of movement of pointer movement, `tap_then_longpress_move_tolerance`.
+		// The builtin `'contextmenu'` event will still fire for non-iOS browsers,
+		// so `longpress_bypass` is used to tell the handler `on_window_contextmenu` to exit early.
+		if (bypass_with_tap_then_longpress) {
+			if (
+				longpress_start_time != null &&
+				performance.now() - longpress_start_time < tap_then_longpress_duration &&
+				Math.hypot(clientX - touch_x!, clientY - touch_y!) < tap_then_longpress_move_tolerance
+			) {
+				longpress_bypass = true;
+				longpress_start_time = null;
+				return;
+			}
+			longpress_start_time = performance.now();
+		}
+
+		touch_x = clientX;
+		touch_y = clientY;
+
+		if (longpress_timeout != null) reset_longpress();
+		longpress_timeout = setTimeout(() => {
+			longpress_opened = true;
+			open_contextmenu(target, touch_x! + open_offset_x, touch_y! + open_offset_y, contextmenu);
+		}, longpress_duration);
+	};
+
+	// Needed for the iOS workaround, is passive.
+	const touchmove = (e: TouchEvent): void => {
+		if (longpress_timeout == null) return;
+		const {touches} = e;
+		if (touches.length !== 1) return;
+		const {clientX, clientY} = touches[0];
+		const distance = Math.hypot(clientX - touch_x!, clientY - touch_y!);
+		if (distance > longpress_move_tolerance) {
+			if (open) contextmenu.close();
+			reset_longpress();
+		}
+	};
+	// Needed for the iOS workaround, can't be passive.
+	const touchend = (e: TouchEvent): void => {
+		if (longpress_timeout == null) return;
+		// This stops triggering the first item on open, and is the reason the handler is `nonpassive`.
+		// Hopefully we can find a workaround, maybe by delaying the mounting of the contextmenu to the DOM.
+		if (longpress_opened) swallow(e);
+		reset_longpress();
+	};
+
+	// Passive listener that runs during the event's `capture` phase
+	// so that things like the Dialog don't eat the events and prevent the contextmenu from closing.
+	const mousedown = (e: MouseEvent) => {
+		if (el && !el.contains(e.target as any)) {
+			contextmenu.close();
+		}
+	};
+
+	// TODO customize
+	const keyboard_handlers: Map<string, () => void> = new Map([
+		['Escape', contextmenu.close],
+		['ArrowLeft', contextmenu.collapse_selected],
+		['ArrowRight', contextmenu.expand_selected],
+		['ArrowDown', contextmenu.select_next],
+		['PageDown', contextmenu.select_next],
+		['ArrowUp', contextmenu.select_previous],
+		['PageUp', contextmenu.select_previous],
+		['Home', contextmenu.select_first],
+		['End', contextmenu.select_last],
+		[' ', contextmenu.activate_selected],
+		['Enter', contextmenu.activate_selected],
+	]);
+	const keydown = (e: KeyboardEvent): void => {
+		const handler = keyboard_handlers.get(e.key);
+		if (!handler || is_editable(e.target)) return;
+		swallow(e);
+		handler();
+	};
+</script>
+
+<!--
+	Some of these modifiers may be unnecessary, but some browsers need some of them.
+	We use `nonpassive` only to swallow an event.
+-->
+<!-- Capture keydown so it can handle the event before any dialogs. -->
+<svelte:window
+	on:contextmenu|capture|nonpassive={on_window_contextmenu}
+	on:touchstart|capture|passive={touchstart}
+	on:touchmove|capture|passive={touchmove}
+	on:touchend|capture|nonpassive={touchend}
+	on:touchcancel|capture|nonpassive={touchend}
+	on:mousedown|capture|passive={open ? mousedown : undefined}
+	on:keydown|capture|nonpassive={open ? keydown : undefined}
+/>
+
+{#if !custom_layout}
+	<div class="contextmenu_layout" bind:clientHeight bind:clientWidth />
+{/if}
+<!-- TODO Maybe animate a subtle highlight around the contextmenu as it appears? -->
+{#if open}
+	<menu
+		class="contextmenu pane"
+		role="dialog"
+		tabindex="-1"
+		bind:this={el}
+		style:transform="translate3d({x}px, {y}px, 0)"
+	>
+		{#each $contextmenu.params as p (p)}
+			<svelte:component this={p.component} {...p.props} />
+		{/each}
+	</menu>
+{/if}
+
+<style>
+	.contextmenu {
+		--icon_size: var(--icon_size_xs);
+		/* TODO maybe make this responsive or a max of the page width
+		minus some space to tap items covered by the menu on the side,
+		or consider a totally different design for small screens (more dialog-like)  */
+		--contextmenu_width: 320px;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: var(--contextmenu_z_index, 200);
+		max-width: var(--contextmenu_width);
+		width: 100%;
+		/* TODO fix for iOS */
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		user-select: none;
+	}
+	/* TODO hacky */
+	.contextmenu,
+	.contextmenu :global(menu.pane) {
+		border: var(--contextmenu_border_width, var(--border_width))
+			var(--contextmenu_border_style, var(--border_style))
+			var(--contextmenu_border_color, var(--border_color));
+		border-radius: var(--contextmenu_border_radius, var(--border_radius_xs));
+	}
+
+	/* TODO better way to do this? */
+	.contextmenu_layout {
+		z-index: -200;
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+</style>
diff --git a/src/lib/Contextmenu_Entry.svelte b/src/lib/Contextmenu_Entry.svelte
new file mode 100644
index 000000000..c88778260
--- /dev/null
+++ b/src/lib/Contextmenu_Entry.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import {writable} from 'svelte/store';
+
+	import Pending_Animation from '$lib/Pending_Animation.svelte';
+	import {get_contextmenu, type Contextmenu_Run} from '$lib/contextmenu.js';
+
+	export let run: Contextmenu_Run;
+
+	// This store makes `run` reactive
+	// because it's a param to `contextmenu.add_entry` which @initializes.
+	const runStore = writable(run);
+	$: if ($runStore !== run) $runStore = run;
+
+	const contextmenu = get_contextmenu();
+
+	const entry = contextmenu.add_entry(runStore);
+
+	const click = (_e: MouseEvent) => {
+		// This timeout lets event handlers react to the current DOM
+		// before the item's changes are applied.
+		setTimeout(() => contextmenu.activate(entry));
+	};
+	const mouseenter = (e: MouseEvent) => {
+		e.stopImmediatePropagation();
+		contextmenu.select(entry);
+	};
+
+	// the `$contextmenu` is needed because `entry` is not reactive
+	$: ({selected, pending, error_message} = $contextmenu && entry);
+</script>
+
+<!-- disabling the a11y warning because a parent element handles keyboard events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<li
+	class="menu_item plain selectable deselectable"
+	class:selected
+	role="menuitem"
+	aria-label="contextmenu entry"
+	tabindex="-1"
+	title={error_message ? `Error: ${error_message}` : undefined}
+	on:click={click}
+	on:mouseenter={mouseenter}
+>
+	<div class="content">
+		<div class="icon"><slot name="icon" /></div>
+		<div class="title"><slot /></div>
+		{#if pending}<Pending_Animation />{:else if error_message}⚠️{/if}
+	</div>
+</li>
+
+<style>
+	/* TODO hacky, needed because the base `.menu_item` added z-index */
+	.menu_item {
+		z-index: unset;
+	}
+</style>
diff --git a/src/lib/Contextmenu_Link_Entry.svelte b/src/lib/Contextmenu_Link_Entry.svelte
new file mode 100644
index 000000000..723213a6c
--- /dev/null
+++ b/src/lib/Contextmenu_Link_Entry.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import {strip_start} from '@ryanatkn/belt/string.js';
+
+	import {get_contextmenu} from '$lib/contextmenu.js';
+
+	export let href: string;
+
+	const contextmenu = get_contextmenu();
+
+	// TODO move or upstream? rename? `print_url`?
+	const format_url = (url: string, host: string = location.host): string => {
+		const formatted = strip_start(strip_start(url, 'https://'), 'http://');
+		return formatted.startsWith(host + '/') ? strip_start(formatted, host) : formatted;
+	};
+
+	$: text = format_url(href);
+	$: external = !(text[0] === '.' || (text[0] === '/' && text[1] !== '/'));
+	$: rel = external ? 'noreferrer' : undefined;
+</script>
+
+<!-- TODO this doesn't work with the keyboard controls, need to use `menuitem` -->
+<!-- TODO could do more if we had the original `target` element (but it might go stale on $contextmenu?) -->
+<li role="none">
+	<a class="menu_item plain" role="menuitem" {href} {rel} on:click={() => contextmenu.close()}>
+		<div class="content">
+			<div class="icon">🔗</div>
+			<div class="title">
+				<span class="text">{text}</span>
+			</div>
+		</div>
+	</a>
+</li>
+
+<style>
+	/* Underline only the link text, not the icon. */
+	a:hover {
+		text-decoration: none;
+	}
+	a:hover .text {
+		text-decoration: underline;
+	}
+	/* TODO hacky, needed because the base `.menu_item` added z-index */
+	.menu_item {
+		z-index: unset;
+	}
+</style>
diff --git a/src/lib/Contextmenu_Submenu.svelte b/src/lib/Contextmenu_Submenu.svelte
new file mode 100644
index 000000000..81eeac1fa
--- /dev/null
+++ b/src/lib/Contextmenu_Submenu.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import {
+		get_contextmenu,
+		get_contextmenu_dimensions,
+		set_contextmenu_dimensions,
+	} from '$lib/contextmenu.js';
+
+	const contextmenu = get_contextmenu();
+
+	const submenu = contextmenu.add_submenu();
+
+	const mouseenter = (e: MouseEvent) => {
+		e.stopImmediatePropagation();
+		// This timeout fixes a bug on mobile where the mouseenter event
+		// fires immediately when the contextmenu appears,
+		// and then the newly mounted selected entry immediately receives a click event.
+		// The timeout ensures the click event is not passed through.
+		setTimeout(() => contextmenu.select(submenu));
+	};
+
+	const {layout} = contextmenu;
+
+	// the `$contextmenu` is needed because `submenu` is not reactive
+	$: ({selected} = $contextmenu && submenu);
+
+	let el: HTMLElement;
+
+	const parent_dimensions = get_contextmenu_dimensions();
+	const dimensions = set_contextmenu_dimensions();
+
+	let translate_x = 0;
+	let translate_y = 0;
+	$: if (el) update_position(el, $layout, $parent_dimensions);
+	const update_position = (
+		el: HTMLElement,
+		$layout: {width: number; height: number},
+		$parent_dimensions: {width: number; height: number},
+	) => {
+		const {x, y, width, height} = el.getBoundingClientRect();
+		$dimensions = {width, height};
+		const base_x = x - translate_x;
+		const base_y = y - translate_y;
+		const overflow_right = base_x + width + $parent_dimensions.width - $layout.width;
+		if (overflow_right <= 0) {
+			translate_x = $parent_dimensions.width;
+		} else {
+			const overflow_left = width - base_x;
+			if (overflow_left <= 0) {
+				translate_x = -width;
+			} else if (overflow_left > overflow_right) {
+				translate_x = $parent_dimensions.width - overflow_right;
+			} else {
+				translate_x = overflow_left - width;
+			}
+		}
+		translate_y = Math.min(0, $layout.height - (base_y + height));
+	};
+</script>
+
+<li role="none" style:--contextmenu_depth={submenu.depth}>
+	<!-- disabling the a11y warning because a parent element handles keyboard events -->
+	<div
+		class="menu_item plain selectable"
+		class:selected
+		role="menuitem"
+		aria-label="contextmenu submenmu"
+		tabindex="-1"
+		on:mouseenter={mouseenter}
+		aria-expanded={selected}
+	>
+		<div class="content">
+			<div class="icon"><slot name="icon" /></div>
+			<div class="title"><slot /></div>
+		</div>
+		<div class="chevron" />
+	</div>
+	{#if selected}
+		<menu
+			bind:this={el}
+			class="pane"
+			style:transform="translate3d({translate_x}px, {translate_y}px, 0)"
+			style:max-height="{$layout.height}px"
+		>
+			<slot name="menu" />
+		</menu>
+	{/if}
+</li>
+
+<style>
+	li {
+		position: relative;
+	}
+	.chevron {
+		padding-left: 5px;
+	}
+	menu {
+		z-index: var(--contextmenu_depth);
+		position: absolute;
+		/* TODO this is a hack to avoid the pixel gap, probably change to 0 after adding transparent bg hitbox */
+		left: -1px;
+		top: 0;
+		max-width: var(--contextmenu_width);
+		width: 100%;
+	}
+	/* TODO hacky, needed because the base `.menu_item` added z-index */
+	.menu_item {
+		z-index: unset;
+	}
+</style>
diff --git a/src/lib/Contextmenu_Text_Entry.svelte b/src/lib/Contextmenu_Text_Entry.svelte
new file mode 100644
index 000000000..f2a6642a7
--- /dev/null
+++ b/src/lib/Contextmenu_Text_Entry.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Contextmenu_Entry from '$lib/Contextmenu_Entry.svelte';
+	import type {Contextmenu_Run} from '$lib/contextmenu.js';
+
+	// TODO consider making this the implicit default entry, so consumers can simply declare `{run, content}`
+
+	export let content: string;
+	export let icon: string;
+	export let run: Contextmenu_Run;
+</script>
+
+<Contextmenu_Entry {run}>
+	<svelte:fragment slot="icon">{icon}</svelte:fragment>
+	{content}
+</Contextmenu_Entry>
diff --git a/src/lib/Copy_To_Clipboard.svelte b/src/lib/Copy_To_Clipboard.svelte
new file mode 100644
index 000000000..84eb67468
--- /dev/null
+++ b/src/lib/Copy_To_Clipboard.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let text: string;
+
+	let copied = false;
+	let failed = false;
+
+	const copy = async () => {
+		copied = false;
+		failed = false;
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (err) {
+			failed = true;
+			return;
+		}
+		copied = true;
+	};
+</script>
+
+<div class="copy_to_clipboard">
+	<button type="button" class="icon_button" style:font-size="var(--size_lg)" on:click={() => copy()}
+		>📋</button
+	>
+	{#if copied}<small style:color="var(--color_2)">copied!</small>{/if}
+	{#if failed}<small style:color="var(--color_5)">failed</small>{/if}
+</div>
+
+<style>
+	.copy_to_clipboard {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	small {
+		font-weight: 700;
+		margin-top: var(--spacing_xs);
+		opacity: 0;
+		animation: fade-in 1.5s ease-in reverse;
+	}
+</style>
diff --git a/src/lib/Devmode_Controls.svelte b/src/lib/Devmode_Controls.svelte
new file mode 100644
index 000000000..c0d479ce2
--- /dev/null
+++ b/src/lib/Devmode_Controls.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type {Writable} from 'svelte/store';
+	import {is_editable} from '@ryanatkn/belt/dom.js';
+
+	// TODO  this is experimental
+
+	export let devmode: Writable<boolean>;
+	export let should_toggle = (e: KeyboardEvent): boolean =>
+		e.key === '`' && e.ctrlKey && !e.shiftKey;
+
+	const on_window_keydown = (e: KeyboardEvent) => {
+		if (!is_editable(e.target) && should_toggle(e)) {
+			$devmode = !$devmode;
+		}
+	};
+</script>
+
+<svelte:window on:keydown={on_window_keydown} />
diff --git a/src/lib/Dialog.svelte b/src/lib/Dialog.svelte
new file mode 100644
index 000000000..991cd9b78
--- /dev/null
+++ b/src/lib/Dialog.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+	import {createEventDispatcher, onDestroy} from 'svelte';
+	import {is_editable, swallow} from '@ryanatkn/belt/dom.js';
+
+	import Teleport from '$lib/Teleport.svelte';
+	import type {Dialog_Layout} from '$lib/dialog.js';
+
+	/*
+
+	This component is a singleton that mounts to a #dialog container element added to the body,
+	using a `Teleport` component to avoid ancestor-caused style issues like overflow and z-index.
+	It adds `.dialog` to the body when mounted to fix scrolling behavior,
+	and adds padding to the body to adjust for any scrollbars.
+	It uses a CSS custom property for this to avoid the high complexity of trying to
+	correctly revert any preexisting values for overflow and padding on the body.
+	We don't want to add restrictions to what users can do to the body on their own!
+	For more on these quirks see: https://github.com/ryanatkn/fuz/pull/162
+
+	*/
+
+	const ROOT_SELECTOR = 'body'; // TODO make configurable
+	const ROOT_DIALOG_OPEN_CLASS = 'dialog_open';
+	const ROOT_DIALOG_PADDING_PROPERTY = '--dialog_open_padding_right';
+	const CONTAINER_ID = 'dialog';
+
+	const dispatch = createEventDispatcher<{close: undefined}>();
+
+	export let container: HTMLElement | undefined = undefined;
+	export let layout: Dialog_Layout = 'centered';
+	export let index = 0; // index 0 is under 1 is under 2 etc -- the topmost dialog is the last in the array
+	export let active = true;
+
+	let container_el: HTMLElement | undefined;
+	$: !import.meta.env.SSR && update_container_el(container); // TODO guard some other way
+
+	const update_container_el = (container: HTMLElement | undefined): void => {
+		if (container) {
+			container_el = container;
+		} else {
+			const found = document.getElementById(CONTAINER_ID);
+			if (found) {
+				container_el = found;
+			} else {
+				const root_el = document.querySelector(ROOT_SELECTOR);
+				if (!root_el) {
+					throw Error(`Cannot find dialog root element with selector '${ROOT_SELECTOR}'`);
+				}
+				container_el = document.createElement('div');
+				container_el.id = CONTAINER_ID;
+				container_el.style.display = 'contents';
+				root_el.appendChild(container_el);
+			}
+		}
+	};
+
+	let dialog_el: HTMLElement;
+	let pane_wrapper_el: HTMLElement;
+
+	const close = (e?: Event) => {
+		if (e) swallow(e);
+		dispatch('close');
+	};
+
+	// TODO hook into a ui input system
+	const on_window_keydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape' && !is_editable(e.target)) {
+			// apply hotkey only for the top-most dialog
+			const parent_el = dialog_el.parentElement;
+			const parents = parent_el?.parentElement?.children;
+			const index = Array.prototype.indexOf.call(parents, parent_el);
+			if (!parents || index === parents.length - 1 || index === -1) {
+				close(e);
+			}
+		}
+	};
+
+	// The dialog isn't "ready" until the teleport moves it.
+	// Rendering the the dialog's slot only once it's ready fixes things like `autofocus`.
+	let ready = false;
+
+	onDestroy(() => {
+		if (index === 0) {
+			document.body.classList.remove(ROOT_DIALOG_OPEN_CLASS);
+			document.body.style.setProperty(ROOT_DIALOG_PADDING_PROPERTY, null);
+		}
+	});
+</script>
+
+<svelte:window on:keydown={active ? on_window_keydown : undefined} />
+
+<!--
+	The `tabindex` and `el.focus()` fix scrolling with the keyboard,
+	needed because SvelteKit puts `tabindex` on the body,
+	but there's more that needs to be done for accessibility, like focus capture.
+	For more see: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
+	and https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+-->
+<Teleport
+	to={container_el}
+	on:move={() => {
+		// Measure `padding-right` before adding the class that changes it,
+		// so we can set the body padding to offset any scrollbar width changes.
+		const computed_padding_right =
+			Number(
+				window.getComputedStyle(document.body).getPropertyValue('padding-right').slice(0, -2),
+			) || 0; // just in case the parsed value is NaN
+		const width_before = document.body.clientWidth;
+		document.body.classList.add(ROOT_DIALOG_OPEN_CLASS);
+		const width_after = document.body.clientWidth;
+		const width_diff = width_after - width_before;
+		if (width_diff > 0) {
+			// Offset scrollbar width changes.
+			document.body.style.setProperty(
+				ROOT_DIALOG_PADDING_PROPERTY,
+				width_diff + computed_padding_right + 'px',
+			);
+		}
+		ready = true;
+		dialog_el.focus(); // TODO make this more declarative? probably want to focus only after moving though, not on mount, which makes an action trickier
+	}}
+>
+	<div
+		class="dialog"
+		class:ready
+		class:layout-page={layout === 'page'}
+		role="dialog"
+		aria-modal
+		bind:this={dialog_el}
+		tabindex="-1"
+		style:z-index={100 + index}
+	>
+		<div class="dialog_layout">
+			<div class="dialog_wrapper">
+				<div class="dialog_bg" role="none" class:ready on:mousedown={close} />
+				<div
+					class="dialog_content"
+					bind:this={pane_wrapper_el}
+					role="none"
+					on:mousedown={(e) => {
+						if (e.target === pane_wrapper_el) close(e);
+					}}
+				>
+					<!-- mount the content only after teleporting to avoid issues -->
+					{#if ready}
+						<slot {close} />
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</Teleport>
+
+<style>
+	.dialog {
+		--drop_shadow: var(--drop_shadow_lg);
+		overflow: auto;
+		position: fixed;
+		inset: 0;
+	}
+	.dialog_bg {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		opacity: 0;
+		transition: opacity var(--duration_3) ease;
+		background-color: var(--dialog_bg, var(--darken_6));
+	}
+	.dialog_bg.ready {
+		opacity: 1;
+	}
+	.dialog_layout {
+		width: 100%;
+		height: 100%;
+		/* makes the content overflow downwards instead of upwards+downwards because it's centered */
+		max-height: 100%;
+	}
+	.dialog_wrapper {
+		position: relative;
+		width: 100%;
+		min-height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.layout-page .dialog_wrapper {
+		justify-content: flex-start;
+	}
+	.dialog_content {
+		transform: scale3d(0.96, 0.96, 0.96);
+		transition: transform var(--duration_2) ease;
+		padding: 40px;
+	}
+	.ready .dialog_content {
+		transform: scale3d(1, 1, 1);
+	}
+	/* need to sync with `ROOT_DIALOG_OPEN_CLASS` and `ROOT_DIALOG_PADDING_PROPERTY` */
+	:global(body.dialog_open) {
+		overflow: hidden !important;
+		padding-right: var(--dialog_open_padding_right, 0) !important;
+	}
+</style>
diff --git a/src/lib/Dialogs.svelte b/src/lib/Dialogs.svelte
new file mode 100644
index 000000000..0c77d3873
--- /dev/null
+++ b/src/lib/Dialogs.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type {Readable} from 'svelte/store';
+
+	import type {Dialog_Params} from '$lib/dialog.js';
+	import Dialog from '$lib/Dialog.svelte';
+
+	// TODO this is experimental
+
+	export let dialogs: Readable<Dialog_Params[]>;
+</script>
+
+{#each $dialogs as dialog, index (dialog)}
+	<Dialog on:close {...dialog.dialog_props} {index} active={index === $dialogs.length - 1}>
+		<slot {dialog}>
+			<svelte:component this={dialog.Component} {...dialog.props} />
+		</slot>
+	</Dialog>
+{/each}
diff --git a/src/lib/Github_Logo.svelte b/src/lib/Github_Logo.svelte
new file mode 100644
index 000000000..7bab45e8d
--- /dev/null
+++ b/src/lib/Github_Logo.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let size = 'var(--spacing_7, 64px)';
+	export let fill = 'var(--color, #000)';
+	export let label = 'GitHub icon';
+	export let attrs: any = undefined;
+
+	// TODO do something more optimal
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-label={label}
+	viewBox="0 0 1024 1024"
+	style:width={size}
+	style:height={size}
+	fill="none"
+	{...attrs}
+>
+	<path
+		{fill}
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02
+		15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32
+		12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12
+		11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33
+		11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74
+		5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95
+		7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31
+		12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12
+		7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01
+		13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71
+		14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+		transform="scale(64)"
+	/>
+</svg>
diff --git a/src/lib/Hue_Input.svelte b/src/lib/Hue_Input.svelte
new file mode 100644
index 000000000..4997df98a
--- /dev/null
+++ b/src/lib/Hue_Input.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import {createEventDispatcher} from 'svelte';
+
+	export let hue = 180;
+	export let title = 'hue';
+
+	const parse_hue = (value: any): number | null => {
+		const t = typeof value;
+		if (t === 'number') return value;
+		if (t !== 'string') return null;
+		const parsed = Number(value);
+		if (Number.isNaN(parsed)) return null;
+		return parsed;
+	};
+
+	// Binding to `hue` externally works for simple things,
+	// but the `input` event makes reacting to actual changes easier.
+	const dispatch = createEventDispatcher<{input: number}>();
+	const update_hue = (value: number) => {
+		hue = value;
+		dispatch('input', hue);
+	};
+
+	const onInput = (e: Event & {currentTarget: EventTarget & HTMLInputElement}) => {
+		const parsed = parse_hue(e.currentTarget.value);
+		if (parsed === null) return;
+		update_hue(parsed);
+	};
+
+	let el: HTMLInputElement;
+
+	const set_hue_from_minimap = (e: MouseEvent & {currentTarget: EventTarget & HTMLElement}) => {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const pct = (e.clientX - rect.x) / rect.width;
+		update_hue(Math.floor(360 * pct));
+		el.focus();
+	};
+</script>
+
+<!-- TODO consider making this a text input or otherwise editable directly -->
+<div class="hue_input">
+	<label class="indicator" style:--hue={hue}>
+		<div class="spaced_hz">{title}</div>
+		<input class="hue" value={hue} on:input={onInput} />
+	</label>
+	<div class="minimap_wrapper">
+		<div class="minimap" on:click={set_hue_from_minimap} aria-hidden />
+	</div>
+	<input
+		bind:this={el}
+		type="range"
+		aria-label={title}
+		value={hue}
+		on:input={onInput}
+		min="0"
+		max="359"
+	/>
+</div>
+
+<style>
+	.hue_input .indicator {
+		background-color: hsl(var(--hue) 50% 50%);
+		height: var(--spacing_5);
+		margin: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-weight: 700;
+		color: var(--bg);
+		border-top-left-radius: var(--border_radius);
+		border-top-right-radius: var(--border_radius);
+	}
+	.minimap_wrapper {
+		padding: 0 var(--input_padding_x);
+		background: hsl(0, 50%, 50%) 0%;
+	}
+	.minimap {
+		background: linear-gradient(
+			90deg,
+			hsl(0, 50%, 50%) 0%,
+			hsl(36, 50%, 50%) 10%,
+			hsl(72, 50%, 50%) 20%,
+			hsl(108, 50%, 50%) 30%,
+			hsl(144, 50%, 50%) 40%,
+			hsl(180, 50%, 50%) 50%,
+			hsl(216, 50%, 50%) 60%,
+			hsl(252, 50%, 50%) 70%,
+			hsl(288, 50%, 50%) 80%,
+			hsl(324, 50%, 50%) 90%,
+			hsl(360, 50%, 50%) 100%
+		);
+		height: var(--spacing_lg);
+	}
+	/* TODO generic way to make this seamless? */
+	input {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	.hue {
+		width: 7rem;
+		min-width: 7rem;
+		font-size: var(--size_lg);
+		text-align: center;
+		background-color: transparent;
+		border: none;
+		border-radius: var(--border_radius);
+		/* TODO why is this necessary? */
+		height: var(--input_height);
+		color: var(--bg);
+	}
+</style>
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
new file mode 100644
index 000000000..51c725d96
--- /dev/null
+++ b/src/lib/Library.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type {Tome} from '$lib/tome.js';
+
+	export let tomes: Tome[];
+</script>
+
+<div class="tomes">
+	{#each tomes as tome (tome)}
+		<svelte:component this={tome.component} />
+	{/each}
+</div>
+
+<style>
+	.tomes {
+		width: 100%;
+	}
+	/* TODO hacky */
+	.tomes :global(.tome) {
+		margin-bottom: var(--spacing_9) !important;
+	}
+</style>
diff --git a/src/lib/Library_Footer.svelte b/src/lib/Library_Footer.svelte
new file mode 100644
index 000000000..9bc3f8060
--- /dev/null
+++ b/src/lib/Library_Footer.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type {Url} from '@ryanatkn/gro/paths.js';
+
+	import Github_Logo from '$lib/Github_Logo.svelte';
+	import {format_host, type Package_Meta} from '$lib/package_meta.js';
+
+	export let pkg: Package_Meta;
+	export let root_url: Url | null = null;
+
+	$: ({repo_url} = pkg);
+</script>
+
+<footer class="panel padded_lg">
+	<slot />
+	<div class="logo">
+		<a href={repo_url} rel="me"><slot name="logo"><Github_Logo /></slot></a>
+	</div>
+	{#if root_url}
+		<div class="root_url">
+			<a href={root_url} rel="me">{format_host(root_url)}</a>
+		</div>
+	{/if}
+</footer>
+
+<style>
+	footer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+	.logo {
+		display: flex;
+	}
+	.logo a {
+		--border_width: var(--border_width_4);
+		--border_color: transparent;
+		text-decoration: none;
+		display: flex;
+		border-radius: 50%;
+		border: var(--border_width) double var(--border_color);
+	}
+	.logo a:hover {
+		--border_color: var(--color_1);
+	}
+	.root_url {
+		/* TODO messy */
+		margin-top: var(--spacing_md);
+	}
+</style>
diff --git a/src/lib/Library_Header.svelte b/src/lib/Library_Header.svelte
new file mode 100644
index 000000000..f66583d12
--- /dev/null
+++ b/src/lib/Library_Header.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Library_Panel from '$lib/Library_Panel.svelte';
+	import type {Package_Meta} from '$lib/package_meta.js';
+	import Package_Summary from '$lib/Package_Summary.svelte';
+
+	export let pkg: Package_Meta;
+</script>
+
+<Library_Panel><slot><Package_Summary {pkg} /></slot></Library_Panel>
diff --git a/src/lib/Library_Menu.svelte b/src/lib/Library_Menu.svelte
new file mode 100644
index 000000000..e8eed06a7
--- /dev/null
+++ b/src/lib/Library_Menu.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+	import {slide} from 'svelte/transition';
+	import {base} from '$app/paths';
+
+	import type {Tome} from '$lib/tome.js';
+	import Library_Panel from '$lib/Library_Panel.svelte';
+
+	// Library_Menu floats alongside the docs, showing scrolled item as selected
+	export let tomes: Tome[];
+
+	let tomes_by_category: Record<string, Tome[]>;
+	$: tomes_by_category = tomes.reduce(
+		(result, c) => {
+			if (!(c.category in result)) result[c.category] = [];
+			result[c.category].push(c);
+			return result;
+		},
+		{} as Record<string, Tome[]>,
+	);
+</script>
+
+{#each Object.entries(tomes_by_category) as [category, tomes] (category)}
+	<div transition:slide>
+		<Library_Panel>
+			<div class="library_menu">
+				<slot {category}>
+					<h6>{category}</h6>
+				</slot>
+				<menu>
+					{#each tomes as item (item.slug)}
+						<li role="none" transition:slide>
+							<a
+								class="menu_item"
+								href="{base}/library/{item.slug}"
+								class:selected={item.pathname === $page.url.pathname}>{item.name}</a
+							>
+						</li>
+					{/each}
+				</menu>
+			</div>
+		</Library_Panel>
+	</div>
+{/each}
+
+<style>
+	.library_menu,
+	menu {
+		width: 100%;
+	}
+	h6 {
+		padding-bottom: var(--spacing_sm);
+	}
+	h6:not(:first-child) {
+		margin-top: var(--spacing_1);
+	}
+	li {
+		width: 100%;
+	}
+	/* TODO should be a CSS class or variable, maybe should be the default?
+	problem is it doesn't work on .bg, maybe needs a variant/modifier in the name? */
+	menu a:hover {
+		background-color: var(--bg_5);
+	}
+	menu a:is(:active, .selected) {
+		background-color: var(--bg_7);
+	}
+</style>
diff --git a/src/lib/Library_Nav.svelte b/src/lib/Library_Nav.svelte
new file mode 100644
index 000000000..ab6c80fa8
--- /dev/null
+++ b/src/lib/Library_Nav.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+	import {is_iframed} from '@ryanatkn/belt/dom.js';
+
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+
+	// TODO this could be a prop passed by `Breadcrumb`, is commonly needed
+	$: ({pathname} = $page.url);
+	$: root = pathname === '/';
+
+	const iframed = is_iframed();
+	const enabled = !iframed;
+</script>
+
+{#if enabled}
+	<nav class:root>
+		<Breadcrumb>
+			{#if root}
+				<span>fuz</span>
+			{:else}
+				<span class="icon">🧶</span>
+			{/if}
+		</Breadcrumb>
+	</nav>
+{/if}
+
+<style>
+	nav {
+		font-size: var(--size_1);
+	}
+	.root {
+		--text_decoration_selected: none;
+	}
+	.icon {
+		font-size: var(--size_md);
+	}
+</style>
diff --git a/src/lib/Library_Panel.svelte b/src/lib/Library_Panel.svelte
new file mode 100644
index 000000000..95075e4b4
--- /dev/null
+++ b/src/lib/Library_Panel.svelte
@@ -0,0 +1,17 @@
+<div class="library_panel panel">
+	<slot />
+</div>
+
+<style>
+	.library_panel {
+		overflow: hidden;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: var(--library_panel_padding, var(--spacing_lg));
+		/* This margin matches the padding between the library menu and main content. */
+		margin-bottom: calc(var(--spacing_md) + var(--spacing_sm));
+	}
+</style>
diff --git a/src/lib/Library_Vocab.svelte b/src/lib/Library_Vocab.svelte
new file mode 100644
index 000000000..358cdab3e
--- /dev/null
+++ b/src/lib/Library_Vocab.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import {base} from '$app/paths';
+
+	// TODO add contextmenu behavior
+
+	export let name: string; // TODO type, generate from `tomes`?
+
+	// TODO runes!
+</script>
+
+<code {...$$restProps}><a href="{base}/library/{name}"><slot>{name}</slot></a></code>
diff --git a/src/lib/Package_Detail.svelte b/src/lib/Package_Detail.svelte
new file mode 100644
index 000000000..f6436c4b1
--- /dev/null
+++ b/src/lib/Package_Detail.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+	import {ensure_end, strip_end, strip_start} from '@ryanatkn/belt/string.js';
+
+	import {format_host, type Package_Meta} from '$lib/package_meta.js';
+
+	export let pkg: Package_Meta; // TODO normalized version with cached primitives?
+
+	// TODO show other data (lines of code)
+
+	$: ({package_json, src_json, npm_url, repo_name, repo_url, changelog_url, homepage_url} = pkg);
+	$: ({name, version, description, icon, license, repository, exports: pkg_exports} = package_json);
+	$: ({modules: pkg_modules} = src_json);
+
+	// TODO helper (zod parser?)
+	$: repository_url = repository
+		? strip_start(
+				strip_end(
+					strip_end(typeof repository === 'string' ? repository : repository.url, '.git'),
+					'/',
+				),
+				'git+',
+			)
+		: null;
+	$: license_url = license && repository_url ? repository_url + '/blob/main/LICENSE' : null;
+
+	// TODO refactor
+	const to_source_url = (repo_url: string, module_name: string): string =>
+		repo_url +
+		'/blob/main/src/lib/' +
+		(module_name.endsWith('.js') ? module_name.slice(0, -3) + '.ts' : module_name);
+
+	$: pkg_exports_keys = pkg_exports && Object.keys(pkg_exports); // TODO hacky, see usage
+
+	// TODO helper, look at existing code
+	$: modules = pkg_exports
+		? Object.keys(pkg_exports).map((k) => {
+				const v = strip_start(k, './');
+				return v === '.' ? 'index.js' : v;
+			})
+		: null;
+</script>
+
+<div class="package_detail">
+	<!-- TODO maybe continue this slot pattern, or maybe simplify? -->
+	<header class="spaced">
+		<slot name="repo_name" {repo_name}
+			><div class="repo_name">
+				{repo_name}{#if icon}{' '}{icon}{/if}
+			</div></slot
+		>
+	</header>
+	<slot />
+	{#if description}
+		<slot name="description" {description}><div class="spaced">{description}</div></slot>
+	{/if}
+	{#if npm_url}
+		<slot name="npm_url" {npm_url}
+			><blockquote class="npm_url spaced">npm i -D {name}</blockquote></slot
+		>
+	{/if}
+	<section class="properties width_full spaced">
+		{#if homepage_url}
+			<slot name="homepage_url" {homepage_url}>
+				<div class="row">
+					homepage:
+					<a class="chip row" class:selected={homepage_url === $page.url.href} href={homepage_url}>
+						<img
+							src="{ensure_end(homepage_url, '/')}favicon.png"
+							alt="favicon to homepage at {homepage_url}"
+							style:width="16px"
+							style:height="16px"
+							style:margin-right="var(--spacing_xs)"
+						/>
+						{format_host(homepage_url)}
+					</a>
+				</div>
+			</slot>
+		{/if}
+		{#if repo_url}
+			<div class="row">
+				repo: <a class="chip" title="repo" href={repo_url}>{repo_name}</a>
+			</div>
+		{/if}
+		{#if npm_url}
+			<div class="row">npm: <a class="chip" title="npm" href={npm_url}>{name}</a></div>
+		{/if}
+		{#if changelog_url}
+			<div class="row">
+				version: <a class="chip" title="version" href={changelog_url}>{version}</a>
+			</div>
+		{/if}
+		{#if license_url}
+			<div class="row">
+				license: <a class="chip" title="license" href={license_url}>{license}</a>
+			</div>
+		{/if}
+		{#if homepage_url}
+			<section class="row spaced">
+				data:
+				<a class="chip" title="data" href="{ensure_end(homepage_url, '/')}.well-known/package.json"
+					>package.json</a
+				>
+				<a class="chip" title="data" href="{ensure_end(homepage_url, '/')}.well-known/src.json"
+					>src.json</a
+				>
+			</section>
+		{/if}
+	</section>
+	{#if modules && repo_url}
+		<section class="width_full spaced">
+			<menu>
+				{#each modules as module_name, i (module_name)}
+					{@const source_url = to_source_url(repo_url, module_name)}
+					{@const exports_key = pkg_exports_keys?.[i]}
+					{@const pkg_module = exports_key && pkg_modules?.[exports_key]}
+					<li
+						class="module"
+						class:ts={module_name.endsWith('.js')}
+						class:svelte={module_name.endsWith('.svelte')}
+						class:css={module_name.endsWith('.css')}
+						class:json={module_name.endsWith('.json')}
+					>
+						<div>
+							<a class="chip" href={source_url}>{module_name}</a>
+						</div>
+						{#if pkg_module}
+							<ul class="declarations">
+								{#each pkg_module.declarations as { name, kind }}
+									<li class="declaration chip {kind}_declaration">
+										{name}
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</li>
+				{/each}
+			</menu>
+		</section>
+	{/if}
+
+	<section class="width_full spaced">
+		<details>
+			<summary>raw data for <code>pkg: Package_Meta</code></summary>
+			<pre><code>{JSON.stringify(pkg, null, '\t')}</code></pre>
+		</details>
+	</section>
+
+	<!-- TODO more details behind a `<details>`, including author -->
+	<!-- TODO render exports, then link to source, then tomes -->
+</div>
+
+<!-- TODO better rendering, also show author, etc -->
+
+<style>
+	.package_detail {
+		padding: var(--spacing_lg);
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		width: 100%;
+		max-width: var(--max_width, var(--width_md));
+	}
+	.repo_name {
+		font-size: var(--size_2);
+		font-weight: 400;
+		text-align: center;
+	}
+	.npm_url {
+		font-family: var(--font_family_mono);
+		text-align: center;
+	}
+	.chip {
+		margin-left: var(--spacing_xs2);
+		margin-right: var(--spacing_xs2);
+	}
+	pre {
+		display: flex;
+		overflow: auto;
+		width: 100%;
+	}
+	.properties .row {
+		margin-bottom: var(--spacing_xs);
+	}
+	.module {
+		margin-bottom: var(--spacing_xs);
+		--link_color: var(--text_2);
+	}
+	.ts {
+		--link_color: var(--color_1);
+	}
+	.svelte {
+		--link_color: var(--color_4);
+	}
+	.css {
+		--link_color: var(--color_2);
+	}
+	.json {
+		--link_color: var(--color_6);
+	}
+	/* TODO extract */
+	.declarations {
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: var(--spacing_xs) 0;
+	}
+	.declaration {
+		font-family: var(--font_family_mono);
+		font-size: var(--size_sm);
+	}
+	.variable_declaration {
+		color: var(--color_3);
+	}
+	.function_declaration {
+		color: var(--color_5);
+	}
+	.type_declaration {
+		color: var(--color_7);
+	}
+	.class_declaration {
+		color: var(--color_6);
+	}
+</style>
diff --git a/src/lib/Package_Summary.svelte b/src/lib/Package_Summary.svelte
new file mode 100644
index 000000000..21ec51d36
--- /dev/null
+++ b/src/lib/Package_Summary.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+	import {format_host, type Package_Meta} from '$lib/package_meta.js';
+
+	export let pkg: Package_Meta; // TODO normalized version with cached primitives?
+
+	$: ({package_json, npm_url, repo_name, repo_url, changelog_url, homepage_url} = pkg);
+	$: ({name, version, description} = package_json);
+</script>
+
+<div class="package_summary">
+	<!-- TODO maybe continue this slot pattern, or maybe simplify? -->
+	<header class="spaced">
+		<slot name="repo_name" {repo_name}><div class="repo_name">{repo_name}</div></slot>
+	</header>
+	{#if description}
+		<slot name="description" {description}
+			><blockquote class="spaced text_align_center">{description}</blockquote></slot
+		>
+	{/if}
+	{#if homepage_url}
+		<slot name="homepage_url" {homepage_url}
+			><div class="spaced">
+				<a class="chip" class:selected={homepage_url === $page.url.href} href={homepage_url}
+					>{format_host(homepage_url)}</a
+				>
+			</div></slot
+		>
+	{/if}
+	<div class="box row spaced">
+		{#if repo_url}
+			<a class="chip" href={repo_url}>repo</a>
+		{/if}
+		{#if changelog_url}
+			<a class="chip" title="version" href={changelog_url}>{version}</a>
+		{/if}
+		{#if npm_url}
+			<a class="chip" href={npm_url}>npm</a>
+		{/if}
+	</div>
+	{#if npm_url}
+		<slot name="npm_url" {npm_url}><blockquote class="npm_url">npm i -D {name}</blockquote></slot>
+	{/if}
+	<!-- TODO more details behind a `<details>`, including author -->
+</div>
+
+<!-- TODO better rendering, also show author, etc -->
+
+<style>
+	.package_summary {
+		padding: var(--spacing_lg);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: var(--max_width, var(--width_sm));
+	}
+	.repo_name {
+		font-size: var(--size_2);
+		font-weight: 400;
+		text-align: center;
+	}
+	.npm_url {
+		font-family: var(--font_family_mono);
+		text-align: center;
+	}
+	.chip {
+		margin-left: var(--spacing_xs2);
+		margin-right: var(--spacing_xs2);
+	}
+</style>
diff --git a/src/lib/Pending_Animation.svelte b/src/lib/Pending_Animation.svelte
new file mode 100644
index 000000000..5c1f97d99
--- /dev/null
+++ b/src/lib/Pending_Animation.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	// TODO what if this comment here appeared as a description
+	// on mouseover of the property `running` from within the app?
+	export let running = true;
+	export let attrs: any = undefined;
+
+	// TODO support a `count` prop that defaults to 3 -- is tricky because of handcrafted animation delays
+</script>
+
+<!-- using `class:` directive to avoid collision with `class` attribute -->
+<div {...attrs} class="pending_animation">
+	<span class:running style="animation-delay: 0s"><slot index={0}>•</slot></span>
+	<span class:running style="animation-delay: 0.09s"><slot index={1}>•</slot></span>
+	<span class:running style="animation-delay: 0.3s"><slot index={2}>•</slot></span>
+</div>
+
+<style>
+	.pending_animation {
+		/* TODO upstream to style.css? or maybe delete and manually put them as fallbacks below? */
+		--scale_x: 0.42;
+		--scale_y: 0.42;
+		--scale_z: 0.42;
+		display: flex;
+	}
+	span {
+		transform: scale3d(var(--scale_x), var(--scale_y), var(--scale_z));
+		animation: dot var(--animation_duration, var(--duration_5, 1.5s)) infinite paused;
+	}
+	.running {
+		animation-play-state: running;
+	}
+	@keyframes dot {
+		0% {
+			transform: scale3d(var(--scale_x), var(--scale_y), var(--scale_z));
+		}
+		71% {
+			transform: scale3d(1, 1, 1);
+		}
+		100% {
+			transform: scale3d(var(--scale_x), var(--scale_y), var(--scale_z));
+		}
+	}
+</style>
diff --git a/src/lib/Pending_Button.svelte b/src/lib/Pending_Button.svelte
new file mode 100644
index 000000000..f37b471fd
--- /dev/null
+++ b/src/lib/Pending_Button.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import Pending_Animation from '$lib/Pending_Animation.svelte';
+
+	export let pending: boolean;
+	export let running: boolean | undefined = undefined;
+	export let el: HTMLButtonElement | undefined = undefined;
+	export let title: string | undefined = undefined;
+	export let disabled: boolean | undefined = undefined;
+	export let attrs: any = undefined;
+</script>
+
+<button
+	type="button"
+	{...attrs}
+	disabled={disabled ?? pending}
+	{title}
+	class:pending
+	bind:this={el}
+	on:click
+>
+	<div class="content">
+		<slot />
+	</div>
+	{#if pending}
+		<div class="animation">
+			<Pending_Animation {running} />
+		</div>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+	}
+	.content {
+		display: contents;
+	}
+	.pending .content {
+		visibility: hidden;
+	}
+	.animation {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
diff --git a/src/lib/Redirect.svelte b/src/lib/Redirect.svelte
new file mode 100644
index 000000000..952db8811
--- /dev/null
+++ b/src/lib/Redirect.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import {browser} from '$app/environment';
+	import {page} from '$app/stores';
+	import {strip_start} from '@ryanatkn/belt/string.js';
+	import {goto} from '$app/navigation';
+
+	/**
+	 * The target host to redirect to. Defaults to the current `location.host`.
+	 * @nonreactive
+	 */
+	export let host = '';
+
+	/**
+	 * The target path to redirect to. Defaults to the current `location.pathname`.
+	 * @nonreactive
+	 */
+	export let path = $page.url.pathname;
+
+	/**
+	 * Should the redirect happen automatically without user input? Defaults to `true`.
+	 * @nonreactive
+	 */
+	export let auto = true;
+
+	const url = host + path;
+
+	if (auto && browser) void goto(url, {replaceState: true});
+</script>
+
+<svelte:head>
+	{#if auto}<meta http-equiv="refresh" content="0; URL={url}" />{/if}
+</svelte:head>
+
+<slot {url}>
+	<main class="row box prose">
+		<p>redirect to <a href={url}>{strip_start(url, 'https://')}</a></p>
+	</main>
+</slot>
diff --git a/src/lib/Teleport.svelte b/src/lib/Teleport.svelte
new file mode 100644
index 000000000..5391ed18f
--- /dev/null
+++ b/src/lib/Teleport.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {onDestroy, createEventDispatcher} from 'svelte';
+
+	const dispatch = createEventDispatcher<{move: {el: HTMLElement; to: HTMLElement}}>();
+
+	// Defaults to `undefined` to lessen friction with SSR.
+	// We may want to change this to optionally accept a string selector,
+	// but that didn't seem to be the best API for the `Dialog`.
+	export let to: HTMLElement | undefined | null;
+
+	let el: HTMLElement | undefined | null;
+
+	$: el && to && move(el, to);
+
+	let moved = false;
+
+	const move = (el: HTMLElement, to: HTMLElement): void => {
+		moved = true;
+		to.appendChild(el);
+		dispatch('move', {el, to});
+	};
+
+	onDestroy(() => {
+		el?.parentNode?.removeChild(el);
+	});
+</script>
+
+<div class="teleport" bind:this={el} hidden={!moved}>
+	<slot />
+</div>
+
+<style>
+	.teleport {
+		display: contents;
+	}
+</style>
diff --git a/src/lib/Tome_Detail.svelte b/src/lib/Tome_Detail.svelte
new file mode 100644
index 000000000..07990260d
--- /dev/null
+++ b/src/lib/Tome_Detail.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Tome_Title from '$lib/Tome_Title.svelte';
+	import Library_Panel from '$lib/Library_Panel.svelte';
+	import type {Tome} from '$lib/tome.js';
+
+	// TODO component name?
+
+	export let tome: Tome;
+</script>
+
+<Library_Panel>
+	<header>
+		<slot name="header">
+			<Tome_Title {tome} />
+		</slot>
+	</header>
+	<slot />
+</Library_Panel>
+
+<style>
+	header {
+		margin-bottom: var(--spacing_3);
+	}
+</style>
diff --git a/src/lib/Tome_Title.svelte b/src/lib/Tome_Title.svelte
new file mode 100644
index 000000000..fe4bd939b
--- /dev/null
+++ b/src/lib/Tome_Title.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import {page} from '$app/stores';
+
+	import type {Tome} from '$lib/tome.js';
+	import {to_library_path_info} from '$lib/helpers.js';
+
+	export let tome: Tome;
+
+	$: ({path, path_is_selected} = to_library_path_info(tome.slug, $page.url.pathname));
+</script>
+
+<h2 class="box" id={tome.name}>
+	{#if path_is_selected}{tome.name}{:else}<a href={path}>{tome.name}</a>{/if}
+</h2>
diff --git a/src/lib/alert.ts b/src/lib/alert.ts
new file mode 100644
index 000000000..011b13988
--- /dev/null
+++ b/src/lib/alert.ts
@@ -0,0 +1,14 @@
+// TODO move to module context
+
+export type Alert_Status = 'inform' | 'help' | 'error';
+
+export interface Alert_Status_Options {
+	color: string;
+	icon: string | null;
+}
+
+export const alert_status_options: Record<Alert_Status, Alert_Status_Options> = {
+	inform: {color: 'var(--text_2)', icon: '🗨️'},
+	help: {color: 'var(--color_2)', icon: '🍀'},
+	error: {color: 'var(--color_5)', icon: '⁉'},
+};
diff --git a/src/lib/contextmenu.ts b/src/lib/contextmenu.ts
new file mode 100644
index 000000000..f628b7bb9
--- /dev/null
+++ b/src/lib/contextmenu.ts
@@ -0,0 +1,460 @@
+import {
+	getContext,
+	onDestroy,
+	setContext,
+	type ComponentProps,
+	type ComponentType,
+	type SvelteComponent,
+} from 'svelte';
+import {writable, type Readable, type Writable, get} from 'svelte/store';
+import type {Result} from '@ryanatkn/belt/result.js';
+import {to_array} from '@ryanatkn/belt/array.js';
+
+import Contextmenu_Link_Entry from '$lib/Contextmenu_Link_Entry.svelte';
+import Contextmenu_Text_Entry from '$lib/Contextmenu_Text_Entry.svelte';
+
+// TODO rewrite with runes!!!!
+
+// TODO @multiple added this hack with Svelte 4, didn't see an open issue about it
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+
+export type Contextmenu_Params<T extends SvelteComponent = SvelteComponent> = {
+	component: ComponentType<T>;
+	props: ComponentProps<T>;
+};
+
+export type Contextmenu_Action_Params =
+	| Contextmenu_Params
+	| Array<Contextmenu_Params | ComponentProps<Contextmenu_Text_Entry> | null | undefined>
+	| ComponentProps<Contextmenu_Text_Entry>;
+
+/**
+ * This helper function is needed to construct `Contextmenu_Params` with type safety.
+ * It uses TypeScript's inferred generics for functions,
+ * which do not work for plain objects as of v5.0.4.
+ * `DialogParams` uses a similar strategy.
+ */
+export const to_contextmenu_params = <T extends SvelteComponent>(
+	component: ComponentType<T>,
+	props: ComponentProps<T>,
+): Contextmenu_Params<T> => ({component, props});
+
+type Activate_Result = Result<any, {message?: string}> | any;
+
+export type Item_State = Submenu_State | Entry_State;
+export interface Entry_State {
+	is_menu: false; // TODO rename to `type`?
+	menu: Submenu_State | Root_Menu_State;
+	selected: boolean;
+	run: Writable<Contextmenu_Run>;
+	pending: boolean;
+	error_message: string | null;
+	promise: Promise<any> | null;
+}
+export interface Submenu_State {
+	is_menu: true;
+	menu: Submenu_State | Root_Menu_State;
+	depth: number;
+	selected: boolean;
+	items: Item_State[];
+}
+export interface Root_Menu_State {
+	is_menu: true;
+	menu: null;
+	depth: 1;
+	items: Item_State[];
+}
+export interface Contextmenu_Run {
+	(): void | Promise<Activate_Result>;
+}
+
+export interface Contextmenu {
+	open: boolean;
+	params: Contextmenu_Params[];
+	x: number;
+	y: number;
+}
+
+export interface Contextmenu_Store extends Readable<Contextmenu> {
+	layout: Readable<{width: number; height: number}>;
+	initial_layout: Readable<{width: number; height: number}> | undefined;
+	link_component: ComponentType<Contextmenu_Link_Entry>;
+	text_component: ComponentType<Contextmenu_Text_Entry>;
+	action: ReturnType<typeof create_contextmenu_action>;
+	error: Writable<string | undefined>;
+	open: (params: Contextmenu_Params[], x: number, y: number) => void;
+	close: () => void;
+	activate: (item: Item_State) => boolean | Promise<Activate_Result>;
+	/**
+	 * Activates the selected entry, or if none, selects the first.
+	 */
+	activate_selected: () => void | boolean | Promise<Activate_Result>;
+	select: (item: Item_State) => void;
+	collapse_selected: () => void;
+	expand_selected: () => void; // opens the selected submenu
+	select_next: () => void;
+	select_previous: () => void;
+	select_first: () => void;
+	select_last: () => void;
+	/**
+	 * Used by `Contextmenu_Entry` and custom entry components
+	 * @initializes
+	 */
+	add_entry: (run: Writable<Contextmenu_Run>) => Entry_State;
+	/**
+	 * @initializes
+	 */
+	add_submenu: () => Submenu_State;
+	// These two properties are mutated internally.
+	// If you need reactivity, use `$contextmenu` in a reactive statement to react to all changes, and
+	// then access the mutable non-reactive  `contextmenu.root_menu` and `contextmenu.selections`.
+	// See `Contextmenu_Entry.svelte` and `Contextmenu_Submenu.svelte` for reactive usage examples.
+	root_menu: Root_Menu_State;
+	selections: Item_State[];
+}
+
+export interface Contextmenu_Store_Options {
+	link_component?: ComponentType<Contextmenu_Link_Entry>;
+	text_component?: ComponentType<Contextmenu_Text_Entry>;
+	layout?: Readable<{width: number; height: number}>; // TODO consider making this a prop on `Contextmenu`, and being assigned here
+}
+
+/**
+ * Creates a `contextmenu` store.
+ * For external usage see `use:contextmenu.run` scattered throughout the app,
+ * and for internal usage see `Contextmenu.svelte`.
+ */
+export const create_contextmenu = (options?: Contextmenu_Store_Options): Contextmenu_Store => {
+	const link_component = options?.link_component ?? Contextmenu_Link_Entry;
+	const text_component = options?.text_component ?? Contextmenu_Text_Entry;
+	const initial_layout = options?.layout;
+
+	const layout: Contextmenu_Store['layout'] = initial_layout || writable({width: 0, height: 0});
+	const root_menu: Contextmenu_Store['root_menu'] = {
+		is_menu: true,
+		menu: null,
+		depth: 1,
+		items: [],
+	};
+	const selections: Contextmenu_Store['selections'] = [];
+
+	const {update, set: _set, ...rest} = writable<Contextmenu>({open: false, params: [], x: 0, y: 0});
+
+	// TODO instead of this, use a store per entry probably
+	const force_update = () => update(($) => ({...$}));
+
+	// TODO not mutation, probably
+	const reset_items = (items: Item_State[]): void => {
+		for (const item of items) {
+			if (item.is_menu) {
+				reset_items(item.items);
+			} else {
+				if (item.promise !== null) item.promise = null;
+				if (item.error_message !== null) item.error_message = null;
+			}
+		}
+	};
+
+	const error: Contextmenu_Store['error'] = writable(undefined);
+
+	const store: Contextmenu_Store = {
+		...rest,
+		root_menu,
+		selections,
+		layout,
+		initial_layout,
+		link_component,
+		text_component,
+		action: create_contextmenu_action(text_component),
+		error,
+		open: (params, x, y) => {
+			selections.length = 0;
+			update(($state) => ({...$state, open: true, params, x, y}));
+		},
+		close: () =>
+			update(($state) => {
+				if (!$state.open) return $state;
+				reset_items(root_menu.items);
+				return {...$state, open: false};
+			}),
+		activate: (item) => {
+			if (item.is_menu) {
+				store.expand_selected();
+			} else {
+				let returned;
+				try {
+					returned = get(item.run)();
+				} catch (err) {
+					const message = typeof err?.message === 'string' ? err.message : undefined;
+					item.error_message = message ?? 'unknown error';
+					error.set(message);
+				}
+				if (returned?.then) {
+					item.pending = true;
+					item.error_message = null;
+					const promise = (item.promise = returned
+						.then(
+							(result) => {
+								if (promise !== item.promise) return;
+								if (typeof result?.ok === 'boolean') {
+									if (result.ok) {
+										store.close();
+									} else {
+										const message = typeof result.message === 'string' ? result.message : undefined;
+										item.error_message = message ?? 'unknown error';
+										error.set(message);
+									}
+								} else {
+									store.close();
+								}
+								return result;
+							},
+							(err) => {
+								if (promise !== item.promise) return;
+								const message = typeof err?.message === 'string' ? err.message : undefined;
+								item.error_message = message ?? 'unknown error';
+								error.set(message);
+							},
+						)
+						.finally(() => {
+							if (promise !== item.promise) return;
+							item.pending = false;
+							item.promise = null;
+							force_update();
+						}));
+					force_update();
+					return item.promise; // async path
+				}
+				store.close(); // synchronous path only
+			}
+			return true;
+		},
+		activate_selected: () => {
+			const selected = selections[selections.length - 1];
+			return selected ? store.activate(selected) : store.select_first();
+		},
+		// Instead of diffing, this does the simple thing and
+		// deselects everything and then re-creates the list of selections.
+		// Could be improved but it's fine because we're using mutation and the N is very small,
+		// and it allows us to have a single code path for the various selection methods.
+		select: (item) => {
+			if (selections[selections.length - 1] === item) return;
+			for (const s of selections) s.selected = false;
+			selections.length = 0;
+			let i: Item_State | Root_Menu_State = item;
+			do {
+				i.selected = true;
+				selections.unshift(i);
+			} while ((i = i.menu) && i.menu);
+			force_update();
+		},
+		collapse_selected: () => {
+			if (selections.length <= 1) return;
+			const deselected = selections.pop()!;
+			deselected.selected = false;
+			force_update();
+		},
+		expand_selected: () => {
+			const parent = selections[selections.length - 1];
+			if (!parent?.is_menu) return;
+			const selected = parent.items[0];
+			selected.selected = true;
+			selections.push(selected);
+			force_update();
+		},
+		select_next: () => {
+			if (!selections.length) return store.select_first();
+			const item = selections[selections.length - 1];
+			const index = item.menu.items.indexOf(item);
+			store.select(item.menu.items[index === item.menu.items.length - 1 ? 0 : index + 1]);
+		},
+		select_previous: () => {
+			if (!selections.length) return store.select_last();
+			const item = selections[selections.length - 1];
+			const index = item.menu.items.indexOf(item);
+			store.select(item.menu.items[index === 0 ? item.menu.items.length - 1 : index - 1]);
+		},
+		select_first: () =>
+			store.select((selections[selections.length - 1]?.menu || root_menu).items[0]),
+		select_last: () => {
+			const {items} = selections[selections.length - 1]?.menu || root_menu;
+			return store.select(items[items.length - 1]);
+		},
+		add_entry: (run) => {
+			const menu = get_contextmenu_submenu() || root_menu;
+			const entry: Entry_State = {
+				is_menu: false,
+				menu,
+				selected: false,
+				run,
+				pending: false,
+				error_message: null,
+				promise: null,
+			};
+			menu.items.push(entry);
+			onDestroy(() => {
+				menu.items.length = 0;
+			});
+			return entry;
+		},
+		add_submenu: () => {
+			const menu = get_contextmenu_submenu() || root_menu;
+			const submenu: Submenu_State = {
+				is_menu: true,
+				menu,
+				depth: menu.depth + 1,
+				selected: false,
+				items: [],
+			};
+			menu.items.push(submenu);
+			set_contextmenu_submenu(submenu);
+			onDestroy(() => {
+				menu.items.length = 0;
+			});
+			return submenu;
+		},
+	};
+	return store;
+};
+
+// The dataset key must not have capital letters or dashes or it'll differ between JS and DOM:
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
+const CONTEXTMENU_DATASET_KEY = 'contextmenu';
+const CONTEXTMENU_DOM_QUERY = `a,[data-${CONTEXTMENU_DATASET_KEY}]`;
+const contextmenu_cache = new Map<string, Contextmenu_Params[]>();
+let cache_key_counter = 0;
+
+const create_contextmenu_action =
+	(text_component: ComponentType<Contextmenu_Text_Entry>) =>
+	(el: HTMLElement | SVGElement, params: Contextmenu_Action_Params | null | undefined) => {
+		const key = cache_key_counter++ + '';
+		el.dataset[CONTEXTMENU_DATASET_KEY] = key;
+		contextmenu_cache.set(key, resolve_contextmenu_params(params, text_component));
+		return {
+			update: (p: Contextmenu_Action_Params | null | undefined) => {
+				contextmenu_cache.set(key, resolve_contextmenu_params(p, text_component));
+			},
+			destroy: () => {
+				contextmenu_cache.delete(key);
+			},
+		};
+	};
+
+const resolve_contextmenu_params = (
+	params: Contextmenu_Action_Params | null | undefined,
+	text_component: ComponentType<Contextmenu_Text_Entry>,
+): Contextmenu_Params[] =>
+	to_array(params)
+		.filter(Boolean)
+		.map((p: any) =>
+			'component' in p && 'props' in p ? p : {component: text_component, props: p},
+		);
+
+const CONTEXTMENU_OPEN_VIBRATE_DURATION = 17;
+
+/**
+ * Opens the contextmenu, if appropriate,
+ * querying the menu items from the DOM starting at the event target.
+ * @param target - the leaf element from which to open the contextmenu
+ * @param x - the page X coordinate at which to open the contextmenu, typically the mouse `pageX`
+ * @param y - the page Y coordinate at which to open the contextmenu, typically the mouse `pageY`
+ * @param contextmenu - the contextmenu store
+ * @returns a boolean indicating if the menu was opened or not
+ */
+export const open_contextmenu = (
+	target: HTMLElement | SVGElement,
+	x: number,
+	y: number,
+	contextmenu: Contextmenu_Store,
+): boolean => {
+	const params = query_contextmenu_params(target, contextmenu);
+	if (!params?.length) return false;
+	contextmenu.open(params, x, y);
+	// Unfortunately `vibrate` this gets blocked by some browsers the way we're doing it
+	// outside of a user interaction in a custom `longpress` gesture that triggers on a timeout,
+	// which exists only because iOS doesn't support the contextmenu event:
+	// https://github.com/ryanatkn/fuz/pull/319
+	navigator.vibrate?.(CONTEXTMENU_OPEN_VIBRATE_DURATION);
+	return true;
+};
+
+const query_contextmenu_params = (
+	target: HTMLElement | SVGElement,
+	contextmenu: Contextmenu_Store,
+): null | Contextmenu_Params[] => {
+	const {link_component, text_component} = contextmenu;
+	let params: null | Contextmenu_Params[] = null;
+	// crawl DOM for contextmenu entries
+	let el: HTMLElement | SVGElement | null | undefined = target;
+	let cache_key: string, cached: Contextmenu_Params[] | undefined;
+	while ((el = el?.closest(CONTEXTMENU_DOM_QUERY))) {
+		if ((cache_key = el.dataset[CONTEXTMENU_DATASET_KEY]!)) {
+			if (!params) params = [];
+			cached = contextmenu_cache.get(cache_key);
+			if (cached === undefined) {
+				continue;
+			}
+			for (const item of cached) {
+				const {props} = item;
+				// preserve bubbling order
+				// TODO probably should use `deepEqual`, but we don't have that dependency yet
+				if (!params?.some((i) => i.component === item.component && shallow_equal(i.props, props))) {
+					(params || (params = [])).push(item);
+				}
+			}
+		}
+		if (link_component && el.tagName === 'A') {
+			(params || (params = [])).push({
+				component: link_component,
+				props: {href: (el as HTMLAnchorElement).href},
+			});
+		}
+		el = el.parentElement;
+	}
+	// add "Copy text" entry if anything is selected and we have any other entries
+	if (params) {
+		const text = window.getSelection()?.toString();
+		if (text) {
+			params.unshift({
+				component: text_component,
+				props: {
+					content: 'Copy text',
+					icon: '📋',
+					run: () => void navigator.clipboard.writeText(text),
+				},
+			});
+		}
+	}
+	return params;
+};
+
+const CONTEXTMENU_STORE_KEY = Symbol();
+export const set_contextmenu = (contextmenu: Contextmenu_Store): Contextmenu_Store =>
+	setContext(CONTEXTMENU_STORE_KEY, contextmenu);
+export const get_contextmenu = (): Contextmenu_Store => getContext(CONTEXTMENU_STORE_KEY);
+
+const CONTEXTMENU_STATE_KEY = Symbol();
+export const set_contextmenu_submenu = (submenu: Submenu_State): Submenu_State =>
+	setContext(CONTEXTMENU_STATE_KEY, submenu);
+export const get_contextmenu_submenu = (): Submenu_State | undefined =>
+	getContext(CONTEXTMENU_STATE_KEY);
+
+const CONTEXTMENU_DIMENSIONS_STORE_KEY = Symbol();
+export const set_contextmenu_dimensions = (): Writable<{width: number; height: number}> => {
+	const dimensions = writable({width: 0, height: 0});
+	setContext(CONTEXTMENU_DIMENSIONS_STORE_KEY, dimensions);
+	return dimensions;
+};
+export const get_contextmenu_dimensions = (): Writable<{width: number; height: number}> =>
+	getContext(CONTEXTMENU_DIMENSIONS_STORE_KEY);
+
+// TODO quick and hacky, probably delete, see usage
+const shallow_equal = (a: any, b: any): boolean => {
+	if (!a || !b) return a === b;
+	let i = 0;
+	for (const k in a) {
+		if (a[k] !== b[k]) return false;
+		i++;
+	}
+	return i === Object.keys(b).length;
+};
diff --git a/src/lib/deployments.json b/src/lib/deployments.json
index 0bdbfa816..8639bfb27 100644
--- a/src/lib/deployments.json
+++ b/src/lib/deployments.json
@@ -2,9 +2,9 @@
 	{
 		"url": "https://www.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz",
+			"name": "@ryanatkn/fuz",
 			"version": "0.81.0",
-			"description": "design system for CSS, Svelte, and SvelteKit",
+			"description": "UI library for Svelte and SvelteKit",
 			"icon": "🧶",
 			"public": true,
 			"license": "MIT",
@@ -14,8 +14,8 @@
 				"email": "mail@ryanatkn.com",
 				"url": "https://www.ryanatkn.com/"
 			},
-			"repository": {"type": "git", "url": "git+https://github.com/fuz-dev/fuz.git"},
-			"bugs": {"url": "https://github.com/fuz-dev/fuz/issues", "email": "mail@ryanatkn.com"},
+			"repository": {"type": "git", "url": "git+https://github.com/ryanatkn/fuz.git"},
+			"bugs": {"url": "https://github.com/ryanatkn/fuz/issues", "email": "mail@ryanatkn.com"},
 			"type": "module",
 			"engines": {"node": ">=20.10"},
 			"scripts": {
@@ -30,9 +30,9 @@
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz_code": "^0.5.0",
-				"@fuz.dev/fuz_dialog": "^0.6.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz_code": "^0.5.0",
+				"@ryanatkn/fuz_dialog": "^0.6.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@grogarden/gro": "^0.108.0",
 				"@ryanatkn/orc": "^0.17.0",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -106,7 +106,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz",
+			"name": "@ryanatkn/fuz",
 			"version": "0.81.0",
 			"modules": {
 				"./Color_Scheme_Input.svelte": {"path": "Color_Scheme_Input.svelte", "declarations": []},
@@ -165,13 +165,13 @@
 				}
 			}
 		},
-		"name": "@fuz.dev/fuz",
+		"name": "@ryanatkn/fuz",
 		"repo_name": "fuz",
-		"repo_url": "https://github.com/fuz-dev/fuz",
+		"repo_url": "https://github.com/ryanatkn/fuz",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://www.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz",
-		"changelog_url": "https://github.com/fuz-dev/fuz/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz",
+		"changelog_url": "https://github.com/ryanatkn/fuz/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": [
@@ -181,13 +181,13 @@
 	{
 		"url": "https://template.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_template",
+			"name": "@ryanatkn/fuz_template",
 			"version": "0.0.1",
 			"description": "a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Fuz, and Gro",
 			"icon": "❄",
 			"public": true,
 			"homepage": "https://template.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_template",
+			"repository": "https://github.com/ryanatkn/fuz_template",
 			"type": "module",
 			"engines": {"node": ">=20.10"},
 			"scripts": {
@@ -200,10 +200,10 @@
 			"files": ["dist"],
 			"devDependencies": {
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_contextmenu": "^0.7.0",
-				"@fuz.dev/fuz_dialog": "^0.6.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_contextmenu": "^0.7.0",
+				"@ryanatkn/fuz_dialog": "^0.6.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@grogarden/gro": "^0.108.0",
 				"@grogarden/util": "^0.18.3",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -231,10 +231,10 @@
 				"overrides": [{"files": "package.json", "options": {"useTabs": false}}]
 			}
 		},
-		"src_json": {"name": "@fuz.dev/fuz_template", "version": "0.0.1"},
-		"name": "@fuz.dev/fuz_template",
+		"src_json": {"name": "@ryanatkn/fuz_template", "version": "0.0.1"},
+		"name": "@ryanatkn/fuz_template",
 		"repo_name": "fuz_template",
-		"repo_url": "https://github.com/fuz-dev/fuz_template",
+		"repo_url": "https://github.com/ryanatkn/fuz_template",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://template.fuz.dev/",
 		"npm_url": null,
@@ -246,14 +246,14 @@
 	{
 		"url": "https://library.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_library",
+			"name": "@ryanatkn/fuz_library",
 			"version": "0.23.0",
 			"description": "components and helpers for Svelte, SvelteKit, and Fuz",
 			"icon": "🧶",
 			"public": true,
 			"license": "MIT",
 			"homepage": "https://library.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_library",
+			"repository": "https://github.com/ryanatkn/fuz",
 			"author": {
 				"name": "Ryan Atkinson",
 				"email": "mail@ryanatkn.com",
@@ -273,8 +273,8 @@
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_code": "^0.5.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_code": "^0.5.0",
 				"@grogarden/gro": "^0.107.0",
 				"@grogarden/util": "^0.18.1",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -428,7 +428,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz_library",
+			"name": "@ryanatkn/fuz_library",
 			"version": "0.23.0",
 			"modules": {
 				"./Alert.svelte": {"path": "Alert.svelte", "declarations": []},
@@ -498,13 +498,13 @@
 				}
 			}
 		},
-		"name": "@fuz.dev/fuz_library",
+		"name": "@ryanatkn/fuz_library",
 		"repo_name": "fuz_library",
-		"repo_url": "https://github.com/fuz-dev/fuz_library",
+		"repo_url": "https://github.com/ryanatkn/fuz",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://library.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz_library",
-		"changelog_url": "https://github.com/fuz-dev/fuz_library/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz_library",
+		"changelog_url": "https://github.com/ryanatkn/fuz/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": [
@@ -519,14 +519,14 @@
 	{
 		"url": "https://contextmenu.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_contextmenu",
+			"name": "@ryanatkn/fuz_contextmenu",
 			"description": "contextmenu for Svelte and Fuz",
 			"version": "0.7.0",
 			"public": true,
 			"type": "module",
 			"license": "MIT",
 			"homepage": "https://contextmenu.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_contextmenu",
+			"repository": "https://github.com/ryanatkn/fuz",
 			"author": {
 				"name": "Ryan Atkinson",
 				"email": "mail@ryanatkn.com",
@@ -541,14 +541,14 @@
 				"deploy": "gro deploy"
 			},
 			"files": ["dist"],
-			"peerDependencies": {"@fuz.dev/fuz_library": "*", "@grogarden/util": "*", "svelte": "*"},
+			"peerDependencies": {"@ryanatkn/fuz_library": "*", "@grogarden/util": "*", "svelte": "*"},
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_code": "^0.5.0",
-				"@fuz.dev/fuz_dialog": "^0.6.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_code": "^0.5.0",
+				"@ryanatkn/fuz_dialog": "^0.6.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@grogarden/gro": "^0.107.0",
 				"@grogarden/util": "^0.18.1",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -609,7 +609,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz_contextmenu",
+			"name": "@ryanatkn/fuz_contextmenu",
 			"version": "0.7.0",
 			"modules": {
 				"./Contextmenu_Entry.svelte": {"path": "Contextmenu_Entry.svelte", "declarations": []},
@@ -649,13 +649,13 @@
 				}
 			}
 		},
-		"name": "@fuz.dev/fuz_contextmenu",
+		"name": "@ryanatkn/fuz_contextmenu",
 		"repo_name": "fuz_contextmenu",
-		"repo_url": "https://github.com/fuz-dev/fuz_contextmenu",
+		"repo_url": "https://github.com/ryanatkn/fuz",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://contextmenu.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz_contextmenu",
-		"changelog_url": "https://github.com/fuz-dev/fuz_contextmenu/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz_contextmenu",
+		"changelog_url": "https://github.com/ryanatkn/fuz/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": []
@@ -663,13 +663,13 @@
 	{
 		"url": "https://dialog.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_dialog",
+			"name": "@ryanatkn/fuz_dialog",
 			"description": "dialog component for Svelte with Fuz",
 			"version": "0.6.0",
 			"public": true,
 			"license": "MIT",
 			"homepage": "https://dialog.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_dialog",
+			"repository": "https://github.com/ryanatkn/fuz",
 			"author": {
 				"name": "Ryan Atkinson",
 				"email": "mail@ryanatkn.com",
@@ -685,13 +685,13 @@
 				"deploy": "gro deploy"
 			},
 			"files": ["dist"],
-			"peerDependencies": {"@fuz.dev/fuz_library": "*", "@grogarden/util": "*", "svelte": "*"},
+			"peerDependencies": {"@ryanatkn/fuz_library": "*", "@grogarden/util": "*", "svelte": "*"},
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_code": "^0.5.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_code": "^0.5.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@grogarden/gro": "^0.107.0",
 				"@grogarden/util": "^0.18.1",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -736,7 +736,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz_dialog",
+			"name": "@ryanatkn/fuz_dialog",
 			"version": "0.6.0",
 			"modules": {
 				"./Dialog.svelte": {"path": "Dialog.svelte", "declarations": []},
@@ -752,13 +752,13 @@
 				"./Dialogs.svelte": {"path": "Dialogs.svelte", "declarations": []}
 			}
 		},
-		"name": "@fuz.dev/fuz_dialog",
+		"name": "@ryanatkn/fuz_dialog",
 		"repo_name": "fuz_dialog",
-		"repo_url": "https://github.com/fuz-dev/fuz_dialog",
+		"repo_url": "https://github.com/ryanatkn/fuz",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://dialog.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz_dialog",
-		"changelog_url": "https://github.com/fuz-dev/fuz_dialog/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz_dialog",
+		"changelog_url": "https://github.com/ryanatkn/fuz/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": []
@@ -766,14 +766,14 @@
 	{
 		"url": "https://code.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_code",
+			"name": "@ryanatkn/fuz_code",
 			"description": "syntax highlighting using prismjs for Svelte, SvelteKit, TypeScript, and Fuz",
 			"version": "0.5.0",
 			"public": true,
 			"license": "MIT",
 			"type": "module",
 			"homepage": "https://code.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_code",
+			"repository": "https://github.com/ryanatkn/fuz_code",
 			"author": {
 				"name": "Ryan Atkinson",
 				"email": "mail@ryanatkn.com",
@@ -792,8 +792,8 @@
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@grogarden/gro": "^0.107.0",
 				"@grogarden/util": "^0.18.1",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -838,7 +838,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz_code",
+			"name": "@ryanatkn/fuz_code",
 			"version": "0.5.0",
 			"modules": {
 				"./Code.svelte": {"path": "Code.svelte", "declarations": []},
@@ -849,13 +849,13 @@
 				}
 			}
 		},
-		"name": "@fuz.dev/fuz_code",
+		"name": "@ryanatkn/fuz_code",
 		"repo_name": "fuz_code",
-		"repo_url": "https://github.com/fuz-dev/fuz_code",
+		"repo_url": "https://github.com/ryanatkn/fuz_code",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://code.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz_code",
-		"changelog_url": "https://github.com/fuz-dev/fuz_code/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz_code",
+		"changelog_url": "https://github.com/ryanatkn/fuz_code/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": []
@@ -863,14 +863,14 @@
 	{
 		"url": "https://mastodon.fuz.dev/",
 		"package_json": {
-			"name": "@fuz.dev/fuz_mastodon",
+			"name": "@ryanatkn/fuz_mastodon",
 			"description": "Mastodon components and helpers for Svelte, SvelteKit, and Fuz",
 			"version": "0.5.0",
 			"public": true,
 			"icon": "🦣",
 			"license": "MIT",
 			"homepage": "https://mastodon.fuz.dev/",
-			"repository": "https://github.com/fuz-dev/fuz_mastodon",
+			"repository": "https://github.com/ryanatkn/fuz_mastodon",
 			"author": {
 				"name": "Ryan Atkinson",
 				"email": "mail@ryanatkn.com",
@@ -887,7 +887,7 @@
 			},
 			"files": ["dist"],
 			"peerDependencies": {
-				"@fuz.dev/fuz_library": "*",
+				"@ryanatkn/fuz_library": "*",
 				"@fuz.dev/svelte_intersect": "*",
 				"@grogarden/util": "*",
 				"@sveltejs/kit": "*",
@@ -896,11 +896,11 @@
 			"devDependencies": {
 				"@changesets/changelog-git": "^0.2.0",
 				"@feltjs/eslint-config": "^0.4.1",
-				"@fuz.dev/fuz": "^0.81.0",
-				"@fuz.dev/fuz_code": "^0.5.0",
-				"@fuz.dev/fuz_contextmenu": "^0.7.0",
-				"@fuz.dev/fuz_dialog": "^0.6.0",
-				"@fuz.dev/fuz_library": "^0.23.0",
+				"@ryanatkn/fuz": "^0.81.0",
+				"@ryanatkn/fuz_code": "^0.5.0",
+				"@ryanatkn/fuz_contextmenu": "^0.7.0",
+				"@ryanatkn/fuz_dialog": "^0.6.0",
+				"@ryanatkn/fuz_library": "^0.23.0",
 				"@fuz.dev/svelte_intersect": "^0.8.0",
 				"@grogarden/gro": "^0.107.0",
 				"@grogarden/util": "^0.18.1",
@@ -963,7 +963,7 @@
 			}
 		},
 		"src_json": {
-			"name": "@fuz.dev/fuz_mastodon",
+			"name": "@ryanatkn/fuz_mastodon",
 			"version": "0.5.0",
 			"modules": {
 				"./Mastodon_Status_Item.svelte": {
@@ -1005,13 +1005,13 @@
 				"./Toot.svelte": {"path": "Toot.svelte", "declarations": []}
 			}
 		},
-		"name": "@fuz.dev/fuz_mastodon",
+		"name": "@ryanatkn/fuz_mastodon",
 		"repo_name": "fuz_mastodon",
-		"repo_url": "https://github.com/fuz-dev/fuz_mastodon",
+		"repo_url": "https://github.com/ryanatkn/fuz_mastodon",
 		"owner_name": "fuz-dev",
 		"homepage_url": "https://mastodon.fuz.dev/",
-		"npm_url": "https://www.npmjs.com/package/@fuz.dev/fuz_mastodon",
-		"changelog_url": "https://github.com/fuz-dev/fuz_mastodon/blob/main/CHANGELOG.md",
+		"npm_url": "https://www.npmjs.com/package/@ryanatkn/fuz_mastodon",
+		"changelog_url": "https://github.com/ryanatkn/fuz_mastodon/blob/main/CHANGELOG.md",
 		"published": true,
 		"check_runs": {"status": "completed", "conclusion": "success"},
 		"pull_requests": []
diff --git a/src/lib/devmode.ts b/src/lib/devmode.ts
new file mode 100644
index 000000000..e63535500
--- /dev/null
+++ b/src/lib/devmode.ts
@@ -0,0 +1,13 @@
+import {getContext, setContext} from 'svelte';
+import {writable} from 'svelte/store';
+import type {Writable} from 'svelte/store';
+
+const KEY = Symbol();
+
+export const get_devmode = (): Writable<boolean> => getContext(KEY);
+
+export const set_devmode = (value: boolean | Writable<boolean> = false): Writable<boolean> => {
+	const store = typeof value === 'boolean' ? writable(value) : value;
+	setContext(KEY, store);
+	return store;
+};
diff --git a/src/lib/dialog.ts b/src/lib/dialog.ts
new file mode 100644
index 000000000..5c9987738
--- /dev/null
+++ b/src/lib/dialog.ts
@@ -0,0 +1,38 @@
+import type {ComponentProps, ComponentType, SvelteComponent} from 'svelte';
+
+import type Dialog from '$lib/Dialog.svelte';
+
+// TODO @multiple added this hack with Svelte 4, didn't see an open issue about it
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+
+/**
+ * This helper function is needed to construct `Dialog_Params` with type safety.
+ * It uses TypeScript's inferred generics for functions,
+ * which do not work for plain objects as of v5.0.4.
+ * * `ContextmenuParams` uses a similar strategy.
+ */
+export const to_dialog_params = <T extends SvelteComponent>(
+	Component: ComponentType<T>,
+	props: ComponentProps<T>,
+	dialog_props?: ComponentProps<Dialog>,
+): Dialog_Params<T> => ({
+	Component,
+	props,
+	dialog_props,
+});
+
+/**
+ * This pattern is based on:
+ * https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/src/01-props/09-svelte-component/Component.svelte
+ * The main limitation is that the generic cannot be inferred automatically,
+ * so we use `to_dialog_params` to construct instances in most cases.
+ * Definining `Dialog_Params` with no concrete `T` lacks typechecking for `props`.
+ */
+export interface Dialog_Params<T extends SvelteComponent = SvelteComponent> {
+	Component: ComponentType<T>;
+	props: ComponentProps<T>;
+	dialog_props?: ComponentProps<Dialog> | undefined;
+}
+
+export type Dialog_Layout = 'centered' | 'page';
+export const dialog_layouts: Dialog_Layout[] = ['centered', 'page'];
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
new file mode 100644
index 000000000..80caba84e
--- /dev/null
+++ b/src/lib/helpers.ts
@@ -0,0 +1,17 @@
+import {base} from '$app/paths';
+
+export const LIBRARY_PATH = '/library/';
+
+export const to_library_path_info = (
+	name: string,
+	pathname: string,
+): {path: string; path_is_selected: boolean; path_segment: string | undefined} => {
+	const path_segment = pathname.split('/').at(-1);
+	const path = base + LIBRARY_PATH + name;
+	const path_is_selected = path_segment === name; // messy but works
+	return {
+		path,
+		path_is_selected,
+		path_segment,
+	};
+};
diff --git a/src/lib/package_meta.ts b/src/lib/package_meta.ts
new file mode 100644
index 000000000..bbc16caf2
--- /dev/null
+++ b/src/lib/package_meta.ts
@@ -0,0 +1,93 @@
+import type {Package_Json} from '@ryanatkn/gro/package_json.js';
+import type {Src_Json} from '@ryanatkn/gro/src_json.js';
+import type {Url} from '@ryanatkn/gro/paths.js';
+import {strip_start, strip_end} from '@ryanatkn/belt/string.js';
+
+// TODO refactor/rethink
+export interface Package {
+	url: Url;
+	package_json: Package_Json;
+	src_json: Src_Json;
+}
+
+export interface Package_Meta extends Package {
+	name: string; // '@ryanatkn/fuz_library';
+	repo_name: string; // fuz_library
+	repo_url: Url | null; // 'https://github.com/ryanatkn/fuz';
+	/**
+	 * the is the github user/org, not npm
+	 */
+	owner_name: string | null; // 'fuz-dev';
+	homepage_url: Url | null; // 'https://www.fuz.dev/';
+	npm_url: Url | null; // 'https://npmjs.com/package/@ryanatkn/fuz_library';
+	changelog_url: Url | null;
+	published: boolean;
+}
+
+export const parse_package_meta = (
+	url: Url,
+	package_json: Package_Json,
+	src_json: Src_Json,
+): Package_Meta => {
+	const {name} = package_json;
+
+	// TODO think through with other presentations - Details, Summary, Card
+
+	// TODO hacky
+	const parse_repo = (r: string | null | undefined) => {
+		if (!r) return null;
+		return strip_end(strip_start(strip_end(r, '.git'), 'git+'), '/');
+	};
+
+	const repo_url = parse_repo(
+		package_json.repository
+			? typeof package_json.repository === 'string'
+				? package_json.repository
+				: package_json.repository.url
+			: null,
+	);
+
+	const homepage_url = package_json.homepage ?? null;
+
+	const published =
+		!package_json.private && !!package_json.exports && package_json.version !== '0.0.1';
+
+	// TODO generic registries
+	const npm_url = published ? 'https://www.npmjs.com/package/' + package_json.name : null;
+
+	const changelog_url = published && repo_url ? repo_url + '/blob/main/CHANGELOG.md' : null;
+
+	const repo_name = parse_repo_name(name);
+
+	const owner_name = repo_url ? strip_start(repo_url, 'https://github.com/').split('/')[0] : null;
+
+	return {
+		url,
+		package_json,
+		src_json,
+		name,
+		repo_name,
+		repo_url,
+		owner_name,
+		homepage_url,
+		npm_url,
+		changelog_url,
+		published,
+	};
+};
+
+// TODO proper parsing
+export const parse_repo_name = (name: string): string =>
+	name[0] === '@' ? name.split('/')[1] : name;
+
+export const format_host = (url: string): string => strip_start(new URL(url).host, 'www.');
+
+export const parse_org_url = (pkg: Package_Meta): string | null => {
+	const {repo_name, repo_url} = pkg;
+	if (!repo_url) return null;
+	const suffix = '/' + repo_name;
+	if (repo_url.endsWith(suffix)) {
+		return strip_end(repo_url, suffix);
+	}
+	return null;
+};
diff --git a/src/lib/style.css b/src/lib/style.css
index 29bfe5040..4cd444421 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -1,10 +1,10 @@
 /*
 
-A CSS Fuz theme file like `@fuz.dev/fuz/theme.css`
+A CSS Fuz theme file like `@ryanatkn/fuz/theme.css`
 is expected to be imported alongside this one
 containing the base variable declarations.
 By default that's the `'base'` theme's variables,
-which is generated from the default values in `@fuz.dev/fuz/variables.js`.
+which is generated from the default values in `@ryanatkn/fuz/variables.js`.
 
 */
 
diff --git a/src/lib/theme.gen.css.ts b/src/lib/theme.gen.css.ts
index 4a51827ba..f5ef169d3 100644
--- a/src/lib/theme.gen.css.ts
+++ b/src/lib/theme.gen.css.ts
@@ -1,5 +1,5 @@
-import type {Gen} from '@grogarden/gro';
-import {to_root_path} from '@grogarden/gro/paths.js';
+import type {Gen} from '@ryanatkn/gro';
+import {to_root_path} from '@ryanatkn/gro/paths.js';
 
 import {default_themes} from '$lib/themes.js';
 import {render_theme_style} from '$lib/theme.js';
diff --git a/src/lib/tome.ts b/src/lib/tome.ts
new file mode 100644
index 000000000..5826b4f71
--- /dev/null
+++ b/src/lib/tome.ts
@@ -0,0 +1,33 @@
+import {getContext, setContext} from 'svelte';
+import {z} from 'zod';
+
+export const Tome = z.object({
+	slug: z.string(),
+	pathname: z.string(),
+	name: z.string(),
+	// TODO ? summary: z.string(),
+	category: z.string(),
+	component: z.any(), // TODO type
+	related: z.array(z.string()),
+});
+export type Tome = z.infer<typeof Tome>;
+
+export const init_tome = <T extends Tome>(item: T): T => {
+	if (!item.pathname) {
+		item.pathname = `/library/${item.slug}`;
+	}
+	return item;
+};
+
+const TOMES_KEY = Symbol();
+
+export const get_tomes = (): Map<string, Tome> => getContext(TOMES_KEY);
+export const set_tomes = (tomes: Map<string, Tome>): Map<string, Tome> =>
+	setContext(TOMES_KEY, tomes);
+
+export const get_tome = (name: string): Tome => {
+	const tomes = get_tomes();
+	const tome = tomes.get(name);
+	if (!tome) throw Error('unable to find tome ' + name);
+	return tome;
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7be2fa877..a90d11aff 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import '$lib/style.css';
 	import '$lib/theme.css';
-	import '@fuz.dev/fuz_code/prism.css';
+	import '@ryanatkn/fuz_code/prism.css';
 
-	import {set_devmode} from '@fuz.dev/fuz_library/devmode.js';
-	import Devmode_Controls from '@fuz.dev/fuz_library/Devmode_Controls.svelte';
+	import {set_devmode} from '$lib/devmode.js';
+	import Devmode_Controls from '$lib/Devmode_Controls.svelte';
 
 	import Themed from '$lib/Themed.svelte';
 
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 189f71e2e..5d6148091 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1 +1,2 @@
 export const prerender = true;
+export const ssr = false; // fixes whitespace pop-in, see https://github.com/sveltejs/svelte/issues/8615
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ddd4d7b0b..6fca00bed 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import {base} from '$app/paths';
-	import Library_Footer from '@fuz.dev/fuz_library/Library_Footer.svelte';
-	import Card from '@fuz.dev/fuz_library/Card.svelte';
-	import {parse_package_meta} from '@fuz.dev/fuz_library/package_meta.js';
 
+	import Library_Footer from '$lib/Library_Footer.svelte';
+	import Card from '$lib/Card.svelte';
+	import {parse_package_meta} from '$lib/package_meta.js';
 	import Page_Menu from '$routes/Page_Menu.svelte';
 	import {package_json, src_json} from '$routes/package.js';
 
@@ -20,9 +20,7 @@
 			</section>
 		</div>
 		<section>
-			<Card href="{base}/library"
-				>design<br />system<br /><svelte:fragment slot="icon">🧶</svelte:fragment></Card
-			>
+			<Card href="{base}/library">library<svelte:fragment slot="icon">🧶</svelte:fragment></Card>
 		</section>
 		<section class="panel padded_lg">
 			<h2 class="spaced">packages</h2>
diff --git a/src/routes/Page_Footer.svelte b/src/routes/Page_Footer.svelte
index b29d5d1f1..55dc5e54f 100644
--- a/src/routes/Page_Footer.svelte
+++ b/src/routes/Page_Footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Breadcrumb from '@fuz.dev/fuz_library/Breadcrumb.svelte';
-	import Library_Footer from '@fuz.dev/fuz_library/Library_Footer.svelte';
-	import type {Package_Meta} from '@fuz.dev/fuz_library/package_meta.js';
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+	import Library_Footer from '$lib/Library_Footer.svelte';
+	import type {Package_Meta} from '$lib/package_meta.js';
 
 	export let pkg: Package_Meta | {url: string; package_json: null};
 </script>
diff --git a/src/routes/Page_Header.svelte b/src/routes/Page_Header.svelte
index 63cd00021..c1ac55b06 100644
--- a/src/routes/Page_Header.svelte
+++ b/src/routes/Page_Header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Breadcrumb from '@fuz.dev/fuz_library/Breadcrumb.svelte';
-	import type {Package_Meta} from '@fuz.dev/fuz_library/package_meta.js';
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+	import type {Package_Meta} from '$lib/package_meta.js';
 
 	export let pkg: Package_Meta | {url: string; package_json: null};
 </script>
diff --git a/src/routes/Theme_Form.svelte b/src/routes/Theme_Form.svelte
index f7f99d500..185421444 100644
--- a/src/routes/Theme_Form.svelte
+++ b/src/routes/Theme_Form.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import {createEventDispatcher} from 'svelte';
-	import {swallow} from '$lib/swallow.js';
-	import Dialog from '@fuz.dev/fuz_dialog/Dialog.svelte';
-	import Copy_To_Clipboard from '@fuz.dev/fuz_library/Copy_To_Clipboard.svelte';
 	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
 	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
+	import {swallow} from '$lib/swallow.js';
+	import Copy_To_Clipboard from '$lib/Copy_To_Clipboard.svelte';
+	import Dialog from '$lib/Dialog.svelte';
 	import {render_theme_style, type Theme_Variable, type Theme} from '$lib/theme.js';
 	import Theme_Variable_Detail from '$routes/Theme_Variable_Detail.svelte';
 
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 69bbe05fd..577122e16 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Package_Detail from '@fuz.dev/fuz_library/Package_Detail.svelte';
-	import {parse_package_meta} from '@fuz.dev/fuz_library/package_meta.js';
-	import Library_Footer from '@fuz.dev/fuz_library/Library_Footer.svelte';
-	import Breadcrumb from '@fuz.dev/fuz_library/Breadcrumb.svelte';
+	import Package_Detail from '$lib/Package_Detail.svelte';
+	import {parse_package_meta} from '$lib/package_meta.js';
+	import Library_Footer from '$lib/Library_Footer.svelte';
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
 
 	import {package_json, src_json} from '$routes/package.js';
 
diff --git a/src/routes/help/+page.svelte b/src/routes/help/+page.svelte
index 3f1fb8ba2..0c49c3d22 100644
--- a/src/routes/help/+page.svelte
+++ b/src/routes/help/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import Alert from '@fuz.dev/fuz_library/Alert.svelte';
+	import Alert from '$lib/Alert.svelte';
 </script>
 
 <div class="width_md">
 	<Alert status="help">todo</Alert>
 	<div>
-		<a href="https://github.com/fuz-dev/fuz/issues">github.com/fuz-dev/fuz/issues</a>
+		<a href="https://github.com/ryanatkn/fuz/issues">github.com/ryanatkn/fuz/issues</a>
 	</div>
 </div>
 
diff --git a/src/routes/library/+layout.svelte b/src/routes/library/+layout.svelte
index fc830c817..3b4779bd2 100644
--- a/src/routes/library/+layout.svelte
+++ b/src/routes/library/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import {page} from '$app/stores';
-	import Library_Menu from '@fuz.dev/fuz_library/Library_Menu.svelte';
-	import Library_Panel from '@fuz.dev/fuz_library/Library_Panel.svelte';
-	import Breadcrumb from '@fuz.dev/fuz_library/Breadcrumb.svelte';
-	import {set_tomes} from '@fuz.dev/fuz_library/tome.js';
-	import Library_Footer from '@fuz.dev/fuz_library/Library_Footer.svelte';
-	import Package_Summary from '@fuz.dev/fuz_library/Package_Summary.svelte';
-	import Library_Nav from '@fuz.dev/fuz_library/Library_Nav.svelte';
-	import {parse_package_meta} from '@fuz.dev/fuz_library/package_meta.js';
+	import Library_Menu from '$lib/Library_Menu.svelte';
+	import Library_Panel from '$lib/Library_Panel.svelte';
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+	import {set_tomes} from '$lib/tome.js';
+	import Library_Footer from '$lib/Library_Footer.svelte';
+	import Package_Summary from '$lib/Package_Summary.svelte';
+	import Library_Nav from '$lib/Library_Nav.svelte';
+	import {parse_package_meta} from '$lib/package_meta.js';
 
 	import {tomes} from '$routes/library/tomes.js';
 	import {package_json, src_json} from '$routes/package.js';
diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte
index 56e059d70..e1b5d5f9c 100644
--- a/src/routes/library/+page.svelte
+++ b/src/routes/library/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Library from '@fuz.dev/fuz_library/Library.svelte';
-	import {get_tomes} from '@fuz.dev/fuz_library/tome.js';
+	import Library from '$lib/Library.svelte';
+	import {get_tomes} from '$lib/tome.js';
 
 	const tomes_by_name = get_tomes();
 
diff --git a/src/routes/library/Alert/+page.svelte b/src/routes/library/Alert/+page.svelte
new file mode 100644
index 000000000..aa867481f
--- /dev/null
+++ b/src/routes/library/Alert/+page.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Alert from '$lib/Alert.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Alert';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let clicks = 0;
+	$: dots = Array.from({length: clicks}).reduce((r, _) => r + '.', '');
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose">
+		<section>
+			<!-- TODO make this a generic data-driven helper -->
+			<Code content={`import Alert from '@ryanatkn/fuz/Alert.svelte';`} lang="ts" />
+			<Code content={`<Alert>info</Alert>`} />
+			<Alert>info</Alert>
+		</section>
+		<section>
+			<Code
+				content={`<Alert
+	icon="😑"
+	button={true}
+	on:click={() => clicks++}
+>
+	alerts can be buttons{dots}
+</Alert>`}
+			/>
+			<Alert icon="😑" button={true} on:click={() => clicks++}>
+				alerts can be buttons{dots}
+			</Alert>
+			<aside>⚠️ this API will probably change</aside>
+		</section>
+		<section>
+			<Code
+				content={`<Alert status="error">
+	the computer is mistaken
+</Alert>`}
+			/>
+			<Alert status="error">the computer is mistaken</Alert>
+		</section>
+		<section>
+			<Code
+				content={`<Alert status="error" button={true}>
+	<div slot="icon">
+		<div style:font-size="var(--size_3)">🔥</div>
+		😊
+	</div>
+	remain calm it's only on fire
+</Alert>`}
+			/>
+			<Alert
+				status="error"
+				button={true}
+				on:click={() => {
+					alert('the button it does nothing'); // eslint-disable-line no-alert
+				}}
+			>
+				<div slot="icon" style:line-height="1">
+					<div style:font-size="var(--size_3)">🔥</div>
+					😊
+				</div>
+				remain calm it's only on fire
+			</Alert>
+		</section>
+		<section>
+			<Code
+				content={`<Alert status="help">
+	here's how to fix it
+</Alert>`}
+			/>
+			<Alert status="help">here's how to fix it</Alert>
+		</section>
+		<section>
+			<Code
+				content={`<Alert status="help" icon="🗝" button={true}>
+	here take this
+</Alert>`}
+			/>
+			<Alert
+				status="help"
+				icon="🗝"
+				button={true}
+				on:click={() => {
+					alert('you receive: 🗝'); // eslint-disable-line no-alert
+				}}
+			>
+				here take this
+			</Alert>
+		</section>
+		<section>
+			<Code
+				content={`<Alert icon="🪄">
+	<div slot="icon" let:icon style:font-size="var(--icon_size_lg)">
+		{icon}
+	</div>
+	<code>icon</code> is a prop, slot, and slot prop
+</Alert>`}
+			/>
+			<Alert icon="🪄">
+				<div slot="icon" let:icon style:font-size="var(--icon_size_lg)">
+					{icon}
+				</div>
+				<code>icon</code> is a prop, slot, and slot prop
+			</Alert>
+		</section>
+	</div>
+</Tome_Detail>
diff --git a/src/routes/library/Breadcrumb/+page.svelte b/src/routes/library/Breadcrumb/+page.svelte
new file mode 100644
index 000000000..a4d2f6747
--- /dev/null
+++ b/src/routes/library/Breadcrumb/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Breadcrumb_Example from '$routes/library/Breadcrumb/Breadcrumb_Example.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Breadcrumb';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose box">
+		<section>
+			<!-- TODO make this a generic data-driven helper -->
+			<Code content={`import Breadcrumb from\n\t'@ryanatkn/fuz/Breadcrumb.svelte';`} lang="ts" />
+			<Code content={`<Breadcrumb />`} />
+			<Breadcrumb />
+		</section>
+		<section>
+			<Code content={`<Breadcrumb>🏠</Breadcrumb>`} />
+			<Breadcrumb>🏠</Breadcrumb>
+		</section>
+		<section>
+			<Code
+				content={`<Breadcrumb\n\tpath="/a/b/c"\n\tselected_path="/a/b"\n\tbase_path="/library/Breadcrumb"\n>\n\t🔡\n\t<div slot="separator">.</div>\n</Breadcrumb>`}
+			/>
+			<Breadcrumb_Example selected_path="/a/b" />
+		</section>
+	</div>
+</Tome_Detail>
+
+<style>
+	section {
+		/* TODO not sure about this -- maybe make it a util class? or a component? */
+		padding: var(--spacing_2);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+</style>
diff --git a/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte b/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte
new file mode 100644
index 000000000..4e77c8f1a
--- /dev/null
+++ b/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Breadcrumb from '$lib/Breadcrumb.svelte';
+
+	export let selected_path: string;
+</script>
+
+<Breadcrumb path="/a/b/c" {selected_path} base_path="/library/Breadcrumb">
+	🔡
+	<div slot="separator">.</div>
+</Breadcrumb>
diff --git a/src/routes/library/Breadcrumb/a/+page.svelte b/src/routes/library/Breadcrumb/a/+page.svelte
new file mode 100644
index 000000000..802ab8eaa
--- /dev/null
+++ b/src/routes/library/Breadcrumb/a/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Breadcrumb_Example from '$routes/library/Breadcrumb/Breadcrumb_Example.svelte';
+</script>
+
+<Breadcrumb_Example selected_path="/a" />
diff --git a/src/routes/library/Breadcrumb/a/b/+page.svelte b/src/routes/library/Breadcrumb/a/b/+page.svelte
new file mode 100644
index 000000000..1fe9f9e15
--- /dev/null
+++ b/src/routes/library/Breadcrumb/a/b/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Breadcrumb_Example from '$routes/library/Breadcrumb/Breadcrumb_Example.svelte';
+</script>
+
+<Breadcrumb_Example selected_path="/a/b" />
diff --git a/src/routes/library/Breadcrumb/a/b/c/+page.svelte b/src/routes/library/Breadcrumb/a/b/c/+page.svelte
new file mode 100644
index 000000000..05e71ac1b
--- /dev/null
+++ b/src/routes/library/Breadcrumb/a/b/c/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Breadcrumb_Example from '$routes/library/Breadcrumb/Breadcrumb_Example.svelte';
+</script>
+
+<Breadcrumb_Example selected_path="/a/b/c" />
diff --git a/src/routes/library/Card/+page.svelte b/src/routes/library/Card/+page.svelte
new file mode 100644
index 000000000..245a2b6c4
--- /dev/null
+++ b/src/routes/library/Card/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import {base} from '$app/paths';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Card from '$lib/Card.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Card';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	const href = `${base}/library`;
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose box">
+		<section>
+			<!-- TODO make this a generic data-driven helper -->
+			<Code content={`import Card from\n\t'@ryanatkn/fuz/Card.svelte';`} lang="ts" />
+			<Code
+				content={`<Card>
+  <div>just</div>
+  <div>a card</div>
+</Card>`}
+			/>
+			<Card>
+				<div>just</div>
+				<div>a card</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card href="${base}/">
+  <div>a</div>
+  <div>link</div>
+</Card>`}
+			/>
+			<Card href="{base}/">
+				<div>a</div>
+				<div>link</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card>
+  <div>custom</div>
+  <div>icon</div>
+  <div slot="icon">📖</div>
+</Card>`}
+			/>
+			<Card>
+				<div>custom</div>
+				<div>icon</div>
+				<div slot="icon">📖</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card tag="button">
+  <div>custom</div>
+  <div>tag</div>
+</Card>`}
+			/>
+			<Card tag="button">
+				<div>custom</div>
+				<div>tag</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card href="${base}/library/Card">
+  <div>href is</div>
+  <div>selected</div>
+</Card>`}
+			/>
+			<Card href="{href}/Card">
+				<div>href is</div>
+				<div>selected</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card align="right">
+  <div>align</div>
+  <div>icon right</div>
+</Card>`}
+			/>
+			<Card align="right">
+				<div>align</div>
+				<div>icon right</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card align="above">
+  <div>align</div>
+  <div>icon above</div>
+</Card>`}
+			/>
+			<Card align="above">
+				<div>align</div>
+				<div>icon above</div>
+			</Card>
+		</section>
+		<section>
+			<Code
+				content={`<Card align="below">
+  <div>align</div>
+  <div>icon below</div>
+</Card>`}
+			/>
+			<Card align="below">
+				<div>align</div>
+				<div>icon below</div>
+			</Card>
+		</section>
+	</div>
+</Tome_Detail>
+
+<style>
+	section {
+		/* TODO not sure about this -- maybe make it a util class? or a component? */
+		padding: var(--spacing_2);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+</style>
diff --git a/src/routes/library/Contextmenu/+page.svelte b/src/routes/library/Contextmenu/+page.svelte
new file mode 100644
index 000000000..7d0f40d15
--- /dev/null
+++ b/src/routes/library/Contextmenu/+page.svelte
@@ -0,0 +1,338 @@
+<script lang="ts">
+	import {flip} from 'svelte/animate';
+	import {crossfade} from 'svelte/transition';
+	import {quintOut} from 'svelte/easing';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
+
+	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
+	import Theme_Input from '$lib/Theme_Input.svelte';
+	import Dialog from '$lib/Dialog.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
+	import Contextmenu from '$lib/Contextmenu.svelte';
+	import {create_contextmenu, set_contextmenu, to_contextmenu_params} from '$lib/contextmenu.js';
+	import Cat_Contextmenu from '$routes/library/Contextmenu/Cat_Contextmenu.svelte';
+	import App_Contextmenu from '$routes/library/Contextmenu/App_Contextmenu.svelte';
+	import Home_Contextmenu from '$routes/library/Contextmenu/Home_Contextmenu.svelte';
+	import Adventure_Contextmenu from '$routes/library/Contextmenu/Adventure_Contextmenu.svelte';
+	import Cat_View from '$routes/library/Contextmenu/Cat_View.svelte';
+	import type {Cat, Cat_Position, History_Item} from '$routes/library/Contextmenu/helpers.js';
+
+	const LIBRARY_ITEM_NAME = 'Contextmenu';
+
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	// TODO should we make this optional, created by `Contextmenu`?
+	// TODO demonstrate custom layout
+	const contextmenu = create_contextmenu();
+	set_contextmenu(contextmenu);
+
+	// TODO maybe this again
+	// const contextmenuError = contextmenu.error;
+	// $: if ($contextmenuError) {
+	// 	act({type: 'speak', content: '❌ error detected: ' + $contextmenuError});
+
+	const alyssa = 'Alyssa';
+	const ben = 'Ben';
+
+	const INITIAL_POSITION: Cat_Position = 'home';
+	let alyssa_position: Cat_Position = INITIAL_POSITION;
+	let ben_position: Cat_Position = INITIAL_POSITION;
+
+	$: alyssa_icon = alyssa_position === ben_position ? '😺' : '😾';
+	$: ben_icon = alyssa_position === ben_position ? '😸' : '😿';
+
+	let alyssa_cat: Cat;
+	let ben_cat: Cat;
+	$: alyssa_cat = {name: alyssa, icon: alyssa_icon, position: alyssa_position};
+	$: ben_cat = {name: ben, icon: ben_icon, position: ben_position};
+
+	let swapped = false;
+
+	// TODO this is weird but `animate:` needs an `each`?
+	$: ({home_cats, adventure_cats} = locate_cats([alyssa_cat, ben_cat], swapped));
+	const locate_cats = (
+		cats: Cat[],
+		swapped: boolean,
+	): {home_cats: Cat[]; adventure_cats: Cat[]} => {
+		const home_cats: Cat[] = [];
+		const adventure_cats: Cat[] = [];
+		for (const cat of cats) {
+			const list = cat.position === 'home' ? home_cats : adventure_cats;
+			if (swapped) {
+				list.unshift(cat);
+			} else {
+				list.push(cat);
+			}
+		}
+		return {home_cats, adventure_cats};
+	};
+
+	// const cats = [alyssa, ben];
+	// TODO use these
+	// const catMoods = ['😼', '😾', '😺', '😸', '😻'];
+
+	$: can_reset = alyssa_position !== INITIAL_POSITION || ben_position !== INITIAL_POSITION;
+
+	// reset the tome's state
+	const reset = () => {
+		alyssa_position = INITIAL_POSITION;
+		ben_position = INITIAL_POSITION;
+	};
+
+	let show_about_dialog = false;
+	const toggle_about_dialog = () => {
+		show_about_dialog = !show_about_dialog;
+	};
+
+	const act = (item: History_Item): void => {
+		switch (item.type) {
+			case 'call_cats_adventure': {
+				alyssa_position = 'adventure';
+				ben_position = 'adventure';
+				break;
+			}
+			case 'call_cats_home': {
+				alyssa_position = 'home';
+				ben_position = 'home';
+				break;
+			}
+			case 'cat_go_adventure': {
+				if (item.name === alyssa) {
+					alyssa_position = 'adventure';
+				} else if (item.name === ben) {
+					ben_position = 'adventure';
+				}
+				break;
+			}
+			case 'cat_go_home': {
+				if (item.name === alyssa) {
+					alyssa_position = 'home';
+				} else if (item.name === ben) {
+					ben_position = 'home';
+				}
+				break;
+			}
+			case 'cat_be_or_do': {
+				swapped = !swapped;
+				break;
+			}
+		}
+	};
+
+	const [send, receive] = crossfade({
+		fallback: (node, _params) => {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 1500,
+				easing: quintOut,
+				css: (t) => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`,
+			};
+		},
+	});
+</script>
+
+<!-- TODO demonstrate usage of a custom `link_component` and `linkProps`  -->
+<Contextmenu {contextmenu} />
+
+<Tome_Detail {tome} --library_panel_padding="var(--spacing_lg) 0 0 0">
+	<div slot="header"><h2>{tome.name}</h2></div>
+	<div
+		class="width_full box"
+		use:contextmenu.action={[
+			// params type of the action is `Contextmenu_Action_Params`
+			can_reset ? {run: reset, content: 'Reset', icon: '↻'} : null,
+			// you can pass multiple items in an array or a single object:
+			// simple text action with with a `run` callback and `icon`:
+			to_contextmenu_params(App_Contextmenu, {toggle_about_dialog}),
+			// you can pass `null` or `undefined` for convenience:
+			null,
+			undefined,
+		]}
+	>
+		<section>
+			<div class="spaced">
+				<Code lang="ts" content={`const contextmenu = create_contextmenu();`} />
+			</div>
+			<Code content={`<Contextmenu {contextmenu} />`} />
+		</section>
+		<section>
+			<div
+				class="position home"
+				use:contextmenu.action={to_contextmenu_params(Home_Contextmenu, {
+					act,
+					home_cats,
+					adventure_cats,
+				})}
+			>
+				<div class="icon">🏠</div>
+				<div class="cats">
+					{#each home_cats as { name, icon, position } (name)}
+						<div
+							class="cat_wrapper"
+							in:receive={{key: name}}
+							out:send={{key: name}}
+							animate:flip
+							use:contextmenu.action={to_contextmenu_params(Cat_Contextmenu, {
+								act,
+								name,
+								icon,
+								position,
+							})}
+						>
+							<Cat_View {name} {icon} />
+						</div>
+					{/each}
+				</div>
+			</div>
+			<div
+				class="position adventure"
+				use:contextmenu.action={to_contextmenu_params(Adventure_Contextmenu, {
+					act,
+					home_cats,
+					adventure_cats,
+				})}
+			>
+				<div class="icon">🌄</div>
+				<div class="cats">
+					{#each adventure_cats as { name, icon, position } (name)}
+						<div
+							class="cat_wrapper"
+							in:receive={{key: name}}
+							out:send={{key: name}}
+							animate:flip
+							use:contextmenu.action={to_contextmenu_params(Cat_Contextmenu, {
+								act,
+								name,
+								icon,
+								position,
+							})}
+						>
+							<Cat_View {name} {icon} />
+						</div>
+					{/each}
+				</div>
+			</div>
+		</section>
+	</div>
+	<div class="width_md padded_md">
+		<div class="prose padded_md panel">
+			<h3>Expected behaviors</h3>
+			<p>
+				The <code>Contextmenu</code> overrides the system contextmenu to provide capabilities
+				specific to your app.
+				<a href="https://www.felt.dev/docs/guide/user/known-issues">These docs</a> explain why Fuz breaks
+				web platform expectations.
+			</p>
+			<p>
+				On touch devices, we detect tap-and-hold (aka longpress) instead of simply overriding the
+				web's
+				<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event"
+					><code>'contextmenu'</code> event</a
+				>
+				because iOS does not support this web standard as of July 2023 as described in
+				<a href="https://bugs.webkit.org/show_bug.cgi?id=213953">this WebKit bug report</a>. The Fuz
+				implementation therefore has hacks that may cause corner case bugs on various devices and
+				browsers - for more see
+				<a href="https://github.com/ryanatkn/fuz/pull/319">this PR</a>.
+			</p>
+			<p>
+				When you rightclick or longpress, we search for behaviors defined with <code
+					>use:contextmenu.action</code
+				> starting from the target element up to the root of the DOM tree. If any behaviors are found,
+				the Fuz contextmenu opens, with the caveats below. The contextmenu displays the available behaviors
+				which you can then activate. If no behaviors are found, the system contextmenu opens.
+			</p>
+			<h4>Devices with a mouse</h4>
+			<ul>
+				<li>rightclick opens the Fuz contextmenu and not the system contextmenu</li>
+				<li>rightclick on the Fuz contextmenu opens the system contextmenu</li>
+				<li>rightclick while holding Shift opens the system contextmenu</li>
+				<li>
+					keyboard navigation and activation should work similarly to the W3C <a
+						href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/">APG menubar pattern</a
+					>
+				</li>
+			</ul>
+			<h4>Touch devices</h4>
+			<ul>
+				<li>longpress opens the Fuz contextmenu and not the system contextmenu</li>
+				<li>longpress on the Fuz contextmenu (two longpresses) opens the system contextmenu</li>
+				<li>
+					double-tap-and-hold (aka tap-then-longpress) opens the system contextmenu or performs
+					other default behavior like selecting text - does not work for cases where the first tap
+					performs some action on an element, like links - use two longpresses for those cases (this
+					may need more design work, possibly adding a different gesture or a contextmenu entry for
+					touch devices that triggers the system conextmenu on the next longpress)
+				</li>
+				<li>a longpress is canceled if you move the touch past a threshold before it triggers</li>
+				<li>
+					the contextmenu closes if you move past a threshold without lifting the longpress touch
+					that opened it
+				</li>
+				<li>
+					gives haptic feedback on open with <a
+						href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate"
+						><code>navigator.vibrate</code></a
+					>
+					(may remain broken due to the iOS longpress workaround, see
+					<a href="https://github.com/ryanatkn/fuz/pull/319">this PR</a>)
+				</li>
+			</ul>
+		</div>
+	</div>
+</Tome_Detail>
+
+{#if show_about_dialog}
+	<Dialog on:close={() => (show_about_dialog = false)}>
+		<div class="pane prose padded_1 box text_align_center">
+			<h1>About</h1>
+			<blockquote>
+				free and open source at<br /><a href="https://github.com/ryanatkn/fuz"
+					>github.com/ryanatkn/fuz</a
+				>
+			</blockquote>
+			<code class="padded_md spaced"
+				>npm i -D <a href="https://www.npmjs.com/package/@fuz.dev/fuz_contextmenu"
+					>@fuz.dev/fuz_contextmenu</a
+				></code
+			>
+			<div class="prose padded_1 box">
+				<h2>Color Scheme</h2>
+				<Color_Scheme_Input />
+				<h2>Theme</h2>
+				<Theme_Input />
+			</div>
+		</div>
+	</Dialog>
+{/if}
+
+<style>
+	section {
+		margin-bottom: var(--spacing_4);
+	}
+	.position {
+		border-radius: var(--border_radius);
+		background-color: var(--bg);
+		display: flex;
+	}
+	.position .icon {
+		font-size: var(--icon_size_1);
+	}
+	.cats {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+	.cat_wrapper {
+		display: flex;
+		flex-direction: column;
+		width: 120px;
+	}
+</style>
diff --git a/src/routes/library/Contextmenu/Adventure_Contextmenu.svelte b/src/routes/library/Contextmenu/Adventure_Contextmenu.svelte
new file mode 100644
index 000000000..311af9a41
--- /dev/null
+++ b/src/routes/library/Contextmenu/Adventure_Contextmenu.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Contextmenu_Entry from '$lib/Contextmenu_Entry.svelte';
+	import Contextmenu_Submenu from '$lib/Contextmenu_Submenu.svelte';
+	import {type History_Item, type Cat, to_cats_label} from '$routes/library/Contextmenu/helpers.js';
+	import Cat_Contextmenu from '$routes/library/Contextmenu/Cat_Contextmenu.svelte';
+
+	export let home_cats: Cat[];
+	export let adventure_cats: Cat[];
+	export let act: (item: History_Item) => void;
+
+	$: cat_to_call_to_adventure = to_cats_label(home_cats);
+</script>
+
+<Contextmenu_Submenu>
+	<svelte:fragment slot="icon">🌄</svelte:fragment>
+	adventure
+	<svelte:fragment slot="menu">
+		{#if cat_to_call_to_adventure}
+			<Contextmenu_Entry run={() => act({type: 'call_cats_adventure'})}>
+				<svelte:fragment slot="icon">🦋</svelte:fragment>
+				call
+			</Contextmenu_Entry>
+		{/if}
+		{#each adventure_cats as cat (cat.name)}
+			<Cat_Contextmenu name={cat.name} icon={cat.icon} position={cat.position} {act} />
+		{/each}
+		{#if !cat_to_call_to_adventure}
+			<Contextmenu_Entry run={() => act({type: 'call_cats_home'})}>
+				<svelte:fragment slot="icon">🐈‍⬛</svelte:fragment>
+				leave
+			</Contextmenu_Entry>
+		{/if}
+	</svelte:fragment>
+</Contextmenu_Submenu>
diff --git a/src/routes/library/Contextmenu/App_Contextmenu.svelte b/src/routes/library/Contextmenu/App_Contextmenu.svelte
new file mode 100644
index 000000000..3f52ee293
--- /dev/null
+++ b/src/routes/library/Contextmenu/App_Contextmenu.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Contextmenu_Entry from '$lib/Contextmenu_Entry.svelte';
+
+	export let toggle_about_dialog: () => void;
+</script>
+
+<Contextmenu_Entry run={toggle_about_dialog}>
+	<svelte:fragment slot="icon">?</svelte:fragment>
+	About
+</Contextmenu_Entry>
diff --git a/src/routes/library/Contextmenu/Cat_Contextmenu.svelte b/src/routes/library/Contextmenu/Cat_Contextmenu.svelte
new file mode 100644
index 000000000..61ae0c739
--- /dev/null
+++ b/src/routes/library/Contextmenu/Cat_Contextmenu.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Contextmenu_Entry from '$lib/Contextmenu_Entry.svelte';
+	import Contextmenu_Submenu from '$lib/Contextmenu_Submenu.svelte';
+	import type {Cat_Position, History_Item} from '$routes/library/Contextmenu/helpers.js';
+
+	export let name = 'Cat';
+	export let icon: string | null = '😺';
+	export let position: Cat_Position;
+	export let act: (item: History_Item) => void;
+</script>
+
+<Contextmenu_Submenu>
+	<svelte:fragment slot="icon">{icon}</svelte:fragment>
+	{name}
+	<svelte:fragment slot="menu">
+		<Contextmenu_Entry
+			run={() => act({type: position === 'adventure' ? 'cat_go_home' : 'cat_go_adventure', name})}
+		>
+			<svelte:fragment slot="icon"
+				>{#if position === 'adventure'}🏠{:else}🌄{/if}</svelte:fragment
+			>
+			{#if position === 'adventure'}go home{:else}go adventure{/if}
+		</Contextmenu_Entry>
+		<Contextmenu_Entry run={() => act({type: 'cat_be_or_do', name, position})}>
+			<svelte:fragment slot="icon"
+				>{#if position === 'adventure'}🌄{:else}🏠{/if}</svelte:fragment
+			>
+			{#if position === 'adventure'}do adventure{:else}be home{/if}
+		</Contextmenu_Entry>
+	</svelte:fragment>
+</Contextmenu_Submenu>
diff --git a/src/routes/library/Contextmenu/Cat_View.svelte b/src/routes/library/Contextmenu/Cat_View.svelte
new file mode 100644
index 000000000..39f2d0a60
--- /dev/null
+++ b/src/routes/library/Contextmenu/Cat_View.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import {get_contextmenu, type Contextmenu_Params} from '$lib/contextmenu.js';
+
+	export let name = 'Cat';
+	export let icon: string | null = '😺';
+	export let show_name = true;
+	export let show_icon = true;
+	export let contextmenu_action: Contextmenu_Params | Contextmenu_Params[] | null = null;
+
+	const contextmenu = get_contextmenu();
+</script>
+
+<!-- TODO add link option? -->
+
+<span class="cat" class:has-icon={show_icon} use:contextmenu.action={contextmenu_action}>
+	{#if show_icon}<span class="icon">{icon}</span>{/if}{#if show_name}<span class="name"
+			><slot />{name}</span
+		>{/if}
+</span>
+
+<style>
+	.cat {
+		display: flex;
+		align-items: center;
+	}
+	.name {
+		font-weight: 700;
+	}
+	.cat.has-icon .name {
+		padding: 0 var(--spacing_xs3);
+	}
+	.icon {
+		font-size: var(--icon_size_md);
+	}
+</style>
diff --git a/src/routes/library/Contextmenu/Home_Contextmenu.svelte b/src/routes/library/Contextmenu/Home_Contextmenu.svelte
new file mode 100644
index 000000000..bdba80029
--- /dev/null
+++ b/src/routes/library/Contextmenu/Home_Contextmenu.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Contextmenu_Entry from '$lib/Contextmenu_Entry.svelte';
+	import Contextmenu_Submenu from '$lib/Contextmenu_Submenu.svelte';
+	import {to_cats_label, type Cat, type History_Item} from '$routes/library/Contextmenu/helpers.js';
+	import Cat_Contextmenu from '$routes/library/Contextmenu/Cat_Contextmenu.svelte';
+
+	export let home_cats: Cat[];
+	export let adventure_cats: Cat[];
+	export let act: (item: History_Item) => void;
+
+	$: cat_to_call_home = to_cats_label(adventure_cats);
+</script>
+
+<Contextmenu_Submenu>
+	<svelte:fragment slot="icon">🏠</svelte:fragment>
+	home
+	<svelte:fragment slot="menu">
+		{#if cat_to_call_home}
+			<Contextmenu_Entry run={() => act({type: 'call_cats_home'})}>
+				<svelte:fragment slot="icon">🐈‍⬛</svelte:fragment>
+				call
+			</Contextmenu_Entry>
+		{/if}
+		{#each home_cats as cat (cat.name)}
+			<Cat_Contextmenu name={cat.name} icon={cat.icon} position={cat.position} {act} />
+		{/each}
+		{#if !cat_to_call_home}
+			<Contextmenu_Entry run={() => act({type: 'call_cats_adventure'})}>
+				<svelte:fragment slot="icon">🦋</svelte:fragment>
+				leave
+			</Contextmenu_Entry>
+		{/if}
+	</svelte:fragment>
+</Contextmenu_Submenu>
diff --git a/src/routes/library/Contextmenu/helpers.ts b/src/routes/library/Contextmenu/helpers.ts
new file mode 100644
index 000000000..fb5660394
--- /dev/null
+++ b/src/routes/library/Contextmenu/helpers.ts
@@ -0,0 +1,41 @@
+export type History_Item =
+	| Cat_Go_Home_History_Item
+	| Cat_Be_Or_Do_History_Item
+	| Cat_Go_Adventure_History_Item
+	| Home_Call_Cats_History_Item
+	| Adventure_Call_Cats_History_Item;
+export interface Cat_Go_Home_History_Item {
+	type: 'cat_go_home';
+	name: string;
+}
+export interface Cat_Be_Or_Do_History_Item {
+	type: 'cat_be_or_do';
+	name: string;
+	position: Cat_Position;
+}
+export interface Cat_Go_Adventure_History_Item {
+	type: 'cat_go_adventure';
+	name: string;
+}
+export interface Home_Call_Cats_History_Item {
+	type: 'call_cats_home';
+}
+export interface Adventure_Call_Cats_History_Item {
+	type: 'call_cats_adventure';
+}
+
+export type Cat_Position = 'home' | 'adventure';
+
+export interface Cat {
+	name: string;
+	icon: string;
+	position: Cat_Position;
+}
+
+export const to_cats_label = (cats: Cat[]): string | null => {
+	const count = cats.length;
+	if (count === 2) return 'cats';
+	if (count === 0) return null;
+	const cat = cats[0];
+	return cat.icon + cat.name;
+};
diff --git a/src/routes/library/Dialog/+page.svelte b/src/routes/library/Dialog/+page.svelte
new file mode 100644
index 000000000..f93d9f143
--- /dev/null
+++ b/src/routes/library/Dialog/+page.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+	import {slide} from 'svelte/transition';
+	import {writable} from 'svelte/store';
+	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import Alert from '$lib/Alert.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
+	import Dialog from '$lib/Dialog.svelte';
+	import Dialogs from '$lib/Dialogs.svelte';
+	import {
+		dialog_layouts,
+		type Dialog_Params,
+		type Dialog_Layout,
+		to_dialog_params,
+	} from '$lib/dialog.js';
+	import Text from '$routes/library/Dialog/Text.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Dialog';
+
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let opened = false;
+	let dialog_overflowing_opened = false;
+	let dialog_layout_page_opened = false;
+	let dialog_nested_1_opened = false;
+	let dialog_nested_2_opened = false;
+	let dialog_nested_3_opened = false;
+
+	let selected_layout: Dialog_Layout = 'page';
+	const layouts: Dialog_Layout[] = ['centered', 'page'];
+
+	let items: object[] = [];
+	const remove_item = (item: object) => {
+		items = items.filter((i) => i !== item);
+	};
+	const add_item = () => {
+		items = items.concat({});
+	};
+	const reset_items = () => {
+		items = [];
+	};
+
+	const dialogs = writable([] as Dialog_Params[]);
+	const add_dialogs = (count: number) => {
+		const to_text = (index: number) => '!'.repeat(count * 3 - index * 3);
+		$dialogs = Array.from({length: count}, (_, i) =>
+			to_dialog_params(Text, {
+				text: to_text(i),
+				font_size: 'var(--size_4)',
+				padding: 'var(--spacing_sm) var(--spacing_lg)',
+			}),
+		);
+	};
+</script>
+
+<Tome_Detail {tome}>
+	<div slot="header"><h2>{tome.name}</h2></div>
+	<div class="prose box width_full">
+		<Code
+			content={`<button on:click={() => (opened = true)}>
+	open a dialog
+</button>
+{#if opened}
+	<Dialog
+		let:close
+		on:close={() => (opened = false)}
+	>
+		<div class="pane prose padded_1 box">
+			<h1>attention</h1>
+			<p>this is a dialog</p>
+			<button on:click={close}> ok </button>
+		</div>
+	</Dialog>
+{/if}`}
+		/>
+		<button on:click={() => (opened = true)}> open a dialog </button>
+		<hr />
+		<button on:click={() => (dialog_overflowing_opened = true)}
+			>open a dialog that overflows vertically</button
+		>
+		<hr />
+		<button on:click={() => (dialog_layout_page_opened = true)}
+			>open a dialog with <code>layout="page"</code> instead of the default
+			<code>layout='centered'</code></button
+		>
+		<hr />
+		<button on:click={() => (dialog_nested_1_opened = true)}
+			>open a dialog containing another dialog</button
+		>
+		<hr />
+		<button on:click={() => add_dialogs(5)}>open many dialogs</button>
+		<hr />
+	</div>
+</Tome_Detail>
+{#if opened}
+	<Dialog let:close on:close={() => (opened = false)}>
+		<div class="pane prose padded_1 box">
+			<h1>attention</h1>
+			<p>this is a dialog</p>
+			<button on:click={close}> ok </button>
+		</div>
+	</Dialog>
+{/if}
+{#if dialog_overflowing_opened}
+	<Dialog let:close on:close={() => (dialog_overflowing_opened = false)}>
+		<div class="pane prose padded_1">
+			<h1>attention</h1>
+			{#each {length: 120} as _}
+				<p>this is a dialog that overflows vertically</p>
+			{/each}
+			<button on:click={close}> close </button>
+		</div>
+	</Dialog>
+{/if}
+{#if dialog_layout_page_opened}
+	<Dialog
+		on:close={() => ((dialog_layout_page_opened = false), reset_items())}
+		let:close
+		layout={selected_layout}
+	>
+		<div class="pane prose padded_1 width_md">
+			<h1>attention</h1>
+			{#if selected_layout === 'page'}
+				<p>
+					This is a <code>Dialog</code> with
+					<code
+						>layout="<select class="inline" bind:value={selected_layout}
+							>{#each dialog_layouts as layout}
+								<option value={layout}>{layout}</option>
+							{/each}
+						</select>"</code
+					>.
+				</p>
+				<p>
+					Instead of being centered by default, the dialog's contents are aligned to the top of the
+					page and grow downward. It's useful when the dialog's contents change in height.
+				</p>
+			{:else if selected_layout === 'centered'}
+				<p>
+					This is a <code>Dialog</code> with
+					<code
+						>layout="<select class="inline" bind:value={selected_layout}
+							>{#each dialog_layouts as layout}
+								<option value={layout}>{layout}</option>
+							{/each}
+						</select>"</code
+					>, the default value.
+				</p>
+				<p>
+					It's often the best choice, but it can be undesirable in some situations, like when the
+					height of the content changes as the user does things, leading to a janky experience.
+				</p>
+			{:else}
+				<Alert status="error">eek a bug! unknown layout "{selected_layout}"</Alert>
+			{/if}
+			<p>
+				<button class="inline" on:click={() => add_item()}>add item</button>
+				<button class="inline" disabled={!items.length} on:click={() => reset_items()}
+					>remove all</button
+				>
+			</p>
+			{#each items as item (item)}
+				<p transition:slide>
+					<button class="inline" on:click={() => remove_item(item)}>✕</button>
+					new stuff appears {#if selected_layout === 'page'}gracefully{:else if selected_layout === 'centered'}ungracefully{/if}
+				</p>
+			{/each}
+			<hr />
+			<form class="box">
+				<div class="spaced">
+					{#each layouts as layout}
+						<label class="row">
+							<input type="radio" bind:group={selected_layout} value={layout} />
+							{layout}
+						</label>
+					{/each}
+				</div>
+				<button type="button" on:click={close}> close </button>
+			</form>
+		</div>
+	</Dialog>
+{/if}
+{#if dialog_nested_1_opened}
+	<Dialog on:close={() => (dialog_nested_1_opened = false)}>
+		<div class="pane prose padded_1">
+			<h1>dialog 1</h1>
+			<p>dialogs can open more dialogs</p>
+			<button on:click={() => (dialog_nested_2_opened = true)}>open another dialog</button>
+		</div>
+	</Dialog>
+{/if}
+{#if dialog_nested_2_opened}
+	<Dialog on:close={() => (dialog_nested_2_opened = false)}>
+		<div class="pane prose padded_1">
+			<h1>dialog 2</h1>
+			<p>this dialog can open more dialogs</p>
+			<p>this is the second dialog</p>
+			<button on:click={() => (dialog_nested_3_opened = true)}>open another dialog</button>
+		</div>
+	</Dialog>
+{/if}
+{#if dialog_nested_3_opened}
+	<Dialog on:close={() => (dialog_nested_3_opened = false)}>
+		<div class="pane prose padded_1" style:margin-bottom="var(--spacing_3)">
+			<h1>3 dialogs!</h1>
+			<button on:click={() => (dialog_nested_3_opened = false)}>close dialog</button>
+		</div>
+		<div class="pane prose padded_1">
+			<h1>and another <code>.pane</code></h1>
+			<button
+				on:click={() => {
+					dialog_nested_1_opened = dialog_nested_2_opened = dialog_nested_3_opened = false;
+				}}>close all dialogs</button
+			>
+		</div>
+	</Dialog>
+{/if}
+<Dialogs
+	{dialogs}
+	on:close={() => {
+		$dialogs = $dialogs.slice(0, -1);
+	}}
+	let:dialog
+	><div class="pane">
+		<svelte:component this={dialog.Component} {...dialog.props} />
+	</div>
+</Dialogs>
diff --git a/src/routes/library/Dialog/Text.svelte b/src/routes/library/Dialog/Text.svelte
new file mode 100644
index 000000000..79789256c
--- /dev/null
+++ b/src/routes/library/Dialog/Text.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	// TODO delete?
+
+	export let text: string;
+	export let tag = 'span';
+	export let font_size: string | undefined = undefined;
+	export let padding: string | undefined = undefined;
+</script>
+
+<svelte:element this={tag} style:font-size={font_size} style:padding>{text}</svelte:element>
diff --git a/src/routes/library/Hue_Input/+page.svelte b/src/routes/library/Hue_Input/+page.svelte
new file mode 100644
index 000000000..f5f3bb968
--- /dev/null
+++ b/src/routes/library/Hue_Input/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Hue_Input from '$lib/Hue_Input.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Hue_Input';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let hue: number;
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose" style:--color="hsl({hue} 62% 31%)">
+		<!-- TODO make this a generic data-driven helper -->
+		<Code content={`import Hue_Input from\n\t'@ryanatkn/fuz/Hue_Input.svelte';`} lang="ts" />
+		<Code
+			content={`<Hue_Input
+	bind:hue
+	on:input={(e) => {
+		// hue === e.detail
+		// === ${hue}
+	}}
+/>`}
+		/>
+		<Hue_Input
+			bind:hue
+			on:input={(e) => {
+				if (hue !== e.detail) throw Error();
+			}}
+		/>
+	</div>
+</Tome_Detail>
diff --git a/src/routes/library/Library/+page.svelte b/src/routes/library/Library/+page.svelte
new file mode 100644
index 000000000..680d21159
--- /dev/null
+++ b/src/routes/library/Library/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	// can't import because recursion
+	// import Library from '$lib/Library.svelte';
+</script>
+
+The <code>Library</code> docs is a work in progress.
+<!-- <Library /> -->
diff --git a/src/routes/library/Package_Detail/+page.svelte b/src/routes/library/Package_Detail/+page.svelte
new file mode 100644
index 000000000..1a371b7c3
--- /dev/null
+++ b/src/routes/library/Package_Detail/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Package_Detail from '$lib/Package_Detail.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {parse_package_meta} from '$lib/package_meta.js';
+	import {package_json, src_json} from '$routes/package.js';
+
+	const LIBRARY_ITEM_NAME = 'Package_Detail';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	const pkg = parse_package_meta(package_json.homepage, package_json, src_json);
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose">
+		<section>
+			<Code
+				content={`import Package_Detail from\n\t'@ryanatkn/fuz/Package_Detail.svelte';`}
+				lang="ts"
+			/>
+			<Code content={`<Package_Detail {pkg} />`} />
+		</section>
+	</div>
+	<section class="width_full">
+		<div class="box panel padded_md">
+			<Package_Detail {pkg} />
+		</div>
+	</section>
+</Tome_Detail>
diff --git a/src/routes/library/Package_Summary/+page.svelte b/src/routes/library/Package_Summary/+page.svelte
new file mode 100644
index 000000000..baffe3108
--- /dev/null
+++ b/src/routes/library/Package_Summary/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Package_Summary from '$lib/Package_Summary.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {parse_package_meta} from '$lib/package_meta.js';
+	import {package_json, src_json} from '$routes/package.js';
+
+	const LIBRARY_ITEM_NAME = 'Package_Summary';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	const pkg = parse_package_meta(package_json.homepage, package_json, src_json);
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose">
+		<section>
+			<Code
+				content={`import Package_Summary from\n\t'@ryanatkn/fuz/Package_Summary.svelte';`}
+				lang="ts"
+			/>
+			<Code content={`<Package_Summary {pkg} />`} />
+		</section>
+	</div>
+	<section>
+		<Package_Summary {pkg} />
+	</section>
+</Tome_Detail>
diff --git a/src/routes/library/Pending_Animation/+page.svelte b/src/routes/library/Pending_Animation/+page.svelte
new file mode 100644
index 000000000..67862c9e2
--- /dev/null
+++ b/src/routes/library/Pending_Animation/+page.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Pending_Animation from '$lib/Pending_Animation.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Pending_Animation';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let turtleSlot = '🐢';
+	let turtleSlot2a = '🐸';
+	let turtleSlot2b = '⏳';
+	let frogsRunning = false;
+	let pendingAnimation0Running = true;
+	let pendingAnimation1Running = false;
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose box">
+		<section>
+			<!-- TODO make this a generic data-driven helper -->
+			<Code
+				content={`import Pending_Animation from\n\t'@ryanatkn/fuz/Pending_Animation.svelte';`}
+				lang="ts"
+			/>
+			<Code content={`<Pending_Animation running={${pendingAnimation0Running}} />`} />
+			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+			<div on:click={() => (pendingAnimation0Running = !pendingAnimation0Running)}>
+				<Pending_Animation running={pendingAnimation0Running} />
+			</div>
+			<button on:click={() => (pendingAnimation0Running = !pendingAnimation0Running)}
+				>{#if pendingAnimation0Running}pause animation{:else}play animation{/if}</button
+			>
+			<Code
+				content={`<Pending_Animation\n\tattrs={{class: 'height_full'}}\n\trunning={${pendingAnimation0Running}}\n/>`}
+			/>
+			<div
+				class="box"
+				style:height="19rem"
+				style:align-items="flex-start"
+				on:click={() => (pendingAnimation0Running = !pendingAnimation0Running)}
+				role="none"
+			>
+				<Pending_Animation attrs={{class: 'height_full'}} running={pendingAnimation0Running} />
+			</div>
+		</section>
+		<section>
+			<h3>custom slot</h3>
+			<Code
+				content={`<div
+	style:font-size="var(--size_6)"
+	style:--animation_duration="var(--duration_6)"
+>
+	<Pending_Animation running={${pendingAnimation1Running}}>
+		{${turtleSlot}}
+	</Pending_Animation>
+</div>`}
+			/>
+			<p>
+				with slot <input class="inline" bind:value={turtleSlot} />
+				<button on:click={() => (turtleSlot = '🐢🐢🐢')} class="inline">🐢🐢🐢</button>
+				<button
+					on:click={() => (turtleSlot = (turtleSlot + turtleSlot).substring(0, 24))}
+					class="inline">* 2</button
+				>
+			</p>
+			<button on:click={() => (pendingAnimation1Running = !pendingAnimation1Running)}>
+				{#if pendingAnimation1Running}pause animation{:else}play animation{/if}
+			</button>
+			<div
+				style:font-size="var(--size_6)"
+				style:--animation_duration="var(--duration_6)"
+				style:text-align="center"
+			>
+				<Pending_Animation running={pendingAnimation1Running}>
+					{turtleSlot}
+				</Pending_Animation>
+			</div>
+		</section>
+		<section>
+			<h3>slot <code>index</code> prop</h3>
+			<Code
+				content={`<Pending_Animation running={${frogsRunning}} let:index>
+	<div class="row box">
+		{${turtleSlot2a}}
+		{index}
+		<span style="font-size: var(--size_5)">
+			{${turtleSlot2b}}
+		</span>}
+	</div>
+</Pending_Animation>`}
+			/>
+			<p>
+				with
+				<code
+					>running={'{'}<button class="inline" on:click={() => (frogsRunning = !frogsRunning)}
+						>{frogsRunning}</button
+					>{'}'}</code
+				>
+				<br />
+				and slots <input class="inline" bind:value={turtleSlot2a} />
+				<input class="inline" bind:value={turtleSlot2b} />
+			</p>
+			<Pending_Animation running={frogsRunning} let:index>
+				<div class="row box">
+					<span style="font-size: var(--size_5)">{turtleSlot2a}</span>
+					<span class="index">{index}</span>
+					{turtleSlot2b}
+				</div>
+			</Pending_Animation>
+		</section>
+	</div>
+</Tome_Detail>
+
+<style>
+	code button.inline {
+		margin: 0;
+	}
+	section {
+		/* TODO not sure about this -- maybe make it a util class? or a component? */
+		padding: var(--spacing_2);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.index {
+		font-size: var(--size_3);
+		font-weight: 300;
+	}
+</style>
diff --git a/src/routes/library/Pending_Button/+page.svelte b/src/routes/library/Pending_Button/+page.svelte
new file mode 100644
index 000000000..d3348b07c
--- /dev/null
+++ b/src/routes/library/Pending_Button/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Pending_Button from '$lib/Pending_Button.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Pending_Button';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let pending_1 = false;
+	let pending_2 = true;
+</script>
+
+<!-- TODO maybe Pending_Button shouldn't be a component? action? Or renderless maybe?
+		Extract a common thing to make arbitrary things not change width.
+	-->
+
+<Tome_Detail {tome}>
+	<div class="prose box">
+		<section class="box">
+			<p class="width_sm">Preserves a button's normal width while animating.</p>
+			<aside class="width_sm">
+				<p>This component may be replaced with an action in the future or otherwise change.</p>
+			</aside>
+			<!-- TODO make this a generic data-driven helper -->
+			<Code
+				content={`import Pending_Button from\n\t'@ryanatkn/fuz/Pending_Button.svelte';`}
+				lang="ts"
+			/>
+			<button
+				on:click={() => {
+					pending_1 = !pending_1;
+					pending_2 = !pending_2;
+				}}>toggle the pending status of the buttons below</button
+			>
+
+			<Code
+				content={`<Pending_Button
+	pending={${pending_1}}
+	on:click={() => (pending_1 = !pending_1)}
+>
+	do something async
+</Pending_Button>`}
+			/>
+			<Pending_Button pending={pending_1} on:click={() => (pending_1 = !pending_1)}>
+				do something async
+			</Pending_Button>
+			<Code
+				content={`<Pending_Button
+	pending={${pending_2}}
+	on:click={() => (pending_2 = !pending_2)}
+>
+	do another
+</Pending_Button>`}
+			/>
+			<Pending_Button pending={pending_2} on:click={() => (pending_2 = !pending_2)}>
+				do another
+			</Pending_Button>
+		</section>
+	</div>
+</Tome_Detail>
diff --git a/src/routes/library/Redirect/+page.svelte b/src/routes/library/Redirect/+page.svelte
new file mode 100644
index 000000000..b733edba6
--- /dev/null
+++ b/src/routes/library/Redirect/+page.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Redirect from '$lib/Redirect.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Redirect';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+</script>
+
+<Tome_Detail {tome}>
+	<div class="box prose">
+		<p class="width_sm">
+			Adds a redirect for a page using <a
+				href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#html_redirections"
+				>a meta tag</a
+			>
+			with
+			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv"
+				>the <code>refresh</code> header</a
+			>. Includes a rendered link and JS navigation fallback.
+		</p>
+		<!-- TODO make this a generic data-driven helper -->
+		<Code content={`import Redirect from\n\t'@ryanatkn/fuz/Redirect.svelte';`} lang="ts" />
+		<aside class="width_sm">
+			Please note: <code>auto={'{'}false}</code> is only used here to prevent the page from redirecting!
+			Normally you wouldn't include it as a prop.
+		</aside>
+		<section>
+			<Code content={`<Redirect auto={false} />`} />
+			<Redirect auto={false} />
+		</section>
+		<section>
+			<Code
+				content={`<Redirect
+	host="https://www.felt.dev"
+	path="/library"
+	let:url
+	auto={false}
+>
+	the redirect url is {url}
+</Redirect>`}
+			/>
+			<Redirect host="https://www.felt.dev" path="/library" let:url auto={false}>
+				the redirect url is {url}
+			</Redirect>
+		</section>
+	</div>
+</Tome_Detail>
+
+<style>
+	section {
+		/* TODO make standard across library pages */
+		padding: var(--spacing_2);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+</style>
diff --git a/src/routes/library/Teleport/+page.svelte b/src/routes/library/Teleport/+page.svelte
new file mode 100644
index 000000000..838a79342
--- /dev/null
+++ b/src/routes/library/Teleport/+page.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Teleport from '$lib/Teleport.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'Teleport';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let swap = true;
+	let teleport_1: HTMLElement | undefined = undefined;
+	let teleport_2: HTMLElement | undefined = undefined;
+</script>
+
+<Tome_Detail {tome}>
+	<section class="prose width_sm">
+		<p>Relocates elements in the DOM, in the rare cases that's useful and the best solution.</p>
+		<aside>
+			<p>Use only when necessary or fun.</p>
+		</aside>
+	</section>
+	<section>
+		<div class="spaced">
+			<!-- TODO make this a generic data-driven helper -->
+			<Code content={`import Teleport from\n\t'@ryanatkn/fuz/Teleport.svelte';`} lang="ts" />
+		</div>
+		<Code
+			content={`<Teleport to={swap ? teleport_1 : teleport_2}>
+	🐰
+</Teleport>
+<div class="teleports">
+	<div class="panel" bind:this={teleport_1} />
+	<div class="panel" bind:this={teleport_2} />
+</div>
+<button on:click={() => (swap = !swap)}>
+	teleport the bunny
+</button>`}
+		/>
+	</section>
+	<section>
+		<!-- TODO how to do this with the `state` API? the `bind` in particular -- maybe make them stores? -->
+		<Teleport to={swap ? teleport_1 : teleport_2}>🐰</Teleport>
+		<div class="teleports">
+			<div class="panel" bind:this={teleport_1} />
+			<div class="panel" bind:this={teleport_2} />
+		</div>
+		<button on:click={() => (swap = !swap)}> teleport the bunny </button>
+	</section>
+</Tome_Detail>
+
+<style>
+	.teleports {
+		display: flex;
+	}
+	.teleports > div {
+		width: var(--spacing_8);
+		height: var(--spacing_8);
+		font-size: var(--size_3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	/* TODO standardize this */
+	section {
+		margin-bottom: var(--spacing_3);
+	}
+</style>
diff --git a/src/routes/library/elements/+page.svelte b/src/routes/library/elements/+page.svelte
index 180c86b1a..45ef8fd1c 100644
--- a/src/routes/library/elements/+page.svelte
+++ b/src/routes/library/elements/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
 	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
 	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	const LIBRARY_ITEM_NAME = 'elements';
 
diff --git a/src/routes/library/forms/+page.svelte b/src/routes/library/forms/+page.svelte
index 181b608a5..a15b14e94 100644
--- a/src/routes/library/forms/+page.svelte
+++ b/src/routes/library/forms/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import {fly} from 'svelte/transition';
-	import Alert from '@fuz.dev/fuz_library/Alert.svelte';
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import Alert from '$lib/Alert.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
 	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
 	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	const LIBRARY_ITEM_NAME = 'forms';
 
diff --git a/src/routes/library/icon_sizes/+page.svelte b/src/routes/library/icon_sizes/+page.svelte
index aa036d908..b789106b2 100644
--- a/src/routes/library/icon_sizes/+page.svelte
+++ b/src/routes/library/icon_sizes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
 
 	const LIBRARY_ITEM_NAME = 'icon sizes';
 
diff --git a/src/routes/library/menu_item/+page.svelte b/src/routes/library/menu_item/+page.svelte
new file mode 100644
index 000000000..8206a6422
--- /dev/null
+++ b/src/routes/library/menu_item/+page.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import {swallow} from '@ryanatkn/belt/dom.js';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import {get_tome} from '$lib/tome.js';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+
+	const LIBRARY_ITEM_NAME = 'menu item';
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	// TODO `role="menuitem"` ?
+
+	let clicked = 'c';
+
+	const handled = (e: any): boolean => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			swallow(e);
+			return true;
+		}
+		return false;
+	};
+</script>
+
+<Tome_Detail {tome}>
+	<section class="prose box">
+		<h3>
+			<code>.menu_item</code> CSS class
+		</h3>
+		<blockquote>This is experimental and may change or be removed.</blockquote>
+	</section>
+	<section>
+		<ul>
+			<li role="none">
+				<div class="menu_item">
+					<div class="content">
+						<div class="icon">1</div>
+						<div class="title">
+							<span class="text"><Code content={`<div class="menu_item">`} /></span>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li role="none">
+				<div class="menu_item">
+					<div class="content">
+						<div class="icon">2</div>
+						<div class="title">
+							<span class="text"><Code content={`<div class="menu_item">`} /></span>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li role="none">
+				<div class="menu_item selected">
+					<div class="content">
+						<div class="icon">3</div>
+						<div class="title">
+							<span class="text"><Code content={`<div class="menu_item selected">`} /></span>
+						</div>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</section>
+	<section>
+		<ul>
+			<li role="none">
+				<div
+					class="menu_item selectable"
+					class:selected={clicked === 'a'}
+					tabindex="0"
+					role="menuitem"
+					on:click={() => (clicked = 'a')}
+					on:keypress={(e) => handled(e) && (clicked = 'a')}
+				>
+					<div class="content">
+						<div class="icon">a</div>
+						<div class="title">
+							<span class="text"
+								><Code
+									content={`<div class="menu_item selectable${
+										clicked === 'a' ? ' selected' : ''
+									}">`}
+								/></span
+							>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li role="none">
+				<div
+					class="menu_item selectable"
+					class:selected={clicked === 'b'}
+					tabindex="0"
+					role="menuitem"
+					on:click={() => (clicked = 'b')}
+					on:keypress={(e) => handled(e) && (clicked = 'b')}
+				>
+					<div class="content">
+						<div class="icon">b</div>
+						<div class="title">
+							<span class="text"
+								><Code
+									content={`<div class="menu_item selectable${
+										clicked === 'b' ? ' selected' : ''
+									}">`}
+								/></span
+							>
+						</div>
+					</div>
+				</div>
+			</li>
+			<li role="none">
+				<div
+					class="menu_item selectable"
+					class:selected={clicked === 'c'}
+					tabindex="0"
+					role="menuitem"
+					on:click={() => (clicked = 'c')}
+					on:keypress={(e) => handled(e) && (clicked = 'c')}
+				>
+					<div class="content">
+						<div class="icon">c</div>
+						<div class="title">
+							<span class="text"
+								><Code
+									content={`<div class="menu_item selectable${
+										clicked === 'c' ? ' selected' : ''
+									}">`}
+								/></span
+							>
+						</div>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</section>
+</Tome_Detail>
+
+<style>
+	section {
+		margin-bottom: var(--spacing_5);
+	}
+</style>
diff --git a/src/routes/library/prose/+page.svelte b/src/routes/library/prose/+page.svelte
index 6c09630c8..dc8fb0efe 100644
--- a/src/routes/library/prose/+page.svelte
+++ b/src/routes/library/prose/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
 
 	const LIBRARY_ITEM_NAME = 'prose';
 
diff --git a/src/routes/library/theme/+page.svelte b/src/routes/library/theme/+page.svelte
index 8c58cdb8b..aaa95726d 100644
--- a/src/routes/library/theme/+page.svelte
+++ b/src/routes/library/theme/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import {writable} from 'svelte/store';
 
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import Dialog from '@fuz.dev/fuz_dialog/Dialog.svelte';
-	import Library_Vocab from '@fuz.dev/fuz_library/Library_Vocab.svelte';
 	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
 	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Dialog from '$lib/Dialog.svelte';
+	import {get_tome} from '$lib/tome.js';
 	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
+	import Library_Vocab from '$lib/Library_Vocab.svelte';
 	import {type Theme, save_theme, get_theme, get_color_scheme} from '$lib/theme.js';
 	import {default_themes} from '$lib/themes.js';
 	import Theme_Input from '$lib/Theme_Input.svelte';
@@ -53,7 +53,7 @@
 					>CSS variables</a
 				>. <code>Themed</code> is a singleton component that's mounted at the top-level of the page:
 			</p>
-			<Code content={`import Themed from\n\t'@fuz.dev/fuz/Themed.svelte';`} lang="ts" />
+			<Code content={`import Themed from\n\t'@ryanatkn/fuz/Themed.svelte';`} lang="ts" />
 			<Code content={`<!-- +layout.svelte -->\n<Themed>\n\t<slot />\n</Themed>`} />
 			<details>
 				<summary>why the singleton?</summary>
@@ -117,7 +117,7 @@
 			</p>
 			<Color_Scheme_Input />
 			<Code
-				content={`import Color_Scheme_Input from\n\t'@fuz.dev/fuz/Color_Scheme_Input.svelte';`}
+				content={`import Color_Scheme_Input from\n\t'@ryanatkn/fuz/Color_Scheme_Input.svelte';`}
 				lang="ts"
 			/>
 			<Code content="<Color_Scheme_Input />" />
@@ -182,7 +182,7 @@
 			<div class="spaced prose width_sm">
 				<p>Scope a theme to one branch of the DOM tree with <code>Themed_Scope</code>:</p>
 				<Code
-					content={`import Themed_Scope from\n\t'@fuz.dev/fuz/Themed_Scope.svelte';`}
+					content={`import Themed_Scope from\n\t'@ryanatkn/fuz/Themed_Scope.svelte';`}
 					lang="ts"
 				/>
 				<Code content={`<Themed_Scope {selected_theme}>\n\t\t...\n</Themed_Scope>`} />
@@ -243,9 +243,9 @@
 		<Code
 			content={`<!-- +layout.svelte -->
 <script>
-	import '@fuz.dev/fuz/style.css';
-	import '@fuz.dev/fuz/theme.css';
-	import Themed from '@fuz.dev/fuz/Themed.svelte';
+	import '@ryanatkn/fuz/style.css';
+	import '@ryanatkn/fuz/theme.css';
+	import Themed from '@ryanatkn/fuz/Themed.svelte';
 <script>
 
 <!-- enable theme and color-scheme support -->
@@ -272,11 +272,11 @@
 				content={`// get values from the Svelte context provided by
 // the nearest \`Themed\` or \`Themed_Scope\` ancestor:
 
-import {get_theme} from '@fuz.dev/fuz/theme.js';
+import {get_theme} from '@ryanatkn/fuz/theme.js';
 const selected_theme = get_theme();
 $selected_theme.name; // '${$selected_theme.name}'
 
-import {get_color_scheme} from '@fuz.dev/fuz/theme.js';
+import {get_color_scheme} from '@ryanatkn/fuz/theme.js';
 const selected_color_scheme = get_color_scheme();
 $selected_color_scheme; // '${$selected_color_scheme}'`}
 				lang="js"
diff --git a/src/routes/library/tomes.ts b/src/routes/library/tomes.ts
index 8bca152bf..553beba0f 100644
--- a/src/routes/library/tomes.ts
+++ b/src/routes/library/tomes.ts
@@ -1,5 +1,4 @@
-import {init_tome, type Tome} from '@fuz.dev/fuz_library/tome.js';
-
+import {init_tome, type Tome} from '$lib/tome.js';
 import elements from '$routes/library/elements/+page.svelte';
 import forms from '$routes/library/forms/+page.svelte';
 import typography from '$routes/library/typography/+page.svelte';
@@ -7,6 +6,20 @@ import theme from '$routes/library/theme/+page.svelte';
 import variables from '$routes/library/variables/+page.svelte';
 import prose from '$routes/library/prose/+page.svelte';
 import icon_sizes from '$routes/library/icon_sizes/+page.svelte';
+import Pending_Animation from '$routes/library/Pending_Animation/+page.svelte';
+import Pending_Button from '$routes/library/Pending_Button/+page.svelte';
+import Package_Summary from '$routes/library/Package_Summary/+page.svelte';
+import Package_Detail from '$routes/library/Package_Detail/+page.svelte';
+import Dialog from '$routes/library/Dialog/+page.svelte';
+import Teleport from '$routes/library/Teleport/+page.svelte';
+import Alert from '$routes/library/Alert/+page.svelte';
+// import Library from '$routes/library/Library/+page.svelte';
+// import menu_item from '$routes/library/menu_item/+page.svelte';
+import Contextmenu from '$routes/library/Contextmenu/+page.svelte';
+import Redirect from '$routes/library/Redirect/+page.svelte';
+import Hue_Input from '$routes/library/Hue_Input/+page.svelte';
+import Breadcrumb from '$routes/library/Breadcrumb/+page.svelte';
+import Card from '$routes/library/Card/+page.svelte';
 
 export const tomes: Tome[] = [
 	{
@@ -31,7 +44,7 @@ export const tomes: Tome[] = [
 		pathname: '',
 		category: 'styles',
 		component: forms,
-		related: ['elements', 'prose'],
+		related: ['elements', 'prose', 'Hue_Input'],
 	},
 	{
 		name: 'icon sizes',
@@ -65,6 +78,120 @@ export const tomes: Tome[] = [
 		component: variables,
 		related: ['theme', 'icon sizes', 'typography'],
 	},
+	// TODO maybe? or do styles like this belong elsewhere?
+	// {
+	// 	name: 'menu item',
+	// 	slug: 'menu_item',
+	// 	pathname: '',
+	// 	category: 'styles',
+	// 	component: menu_item,
+	// 	related: [],
+	// },
+	{
+		name: 'Alert',
+		slug: 'Alert',
+		pathname: '',
+		category: 'components',
+		component: Alert,
+		related: ['Card'],
+	},
+	{
+		name: 'Breadcrumb',
+		slug: 'Breadcrumb',
+		pathname: '',
+		category: 'components',
+		component: Breadcrumb,
+		related: ['Redirect'],
+	},
+	{
+		name: 'Card',
+		slug: 'Card',
+		pathname: '',
+		category: 'components',
+		component: Card,
+		related: ['Alert'],
+	},
+	{
+		name: 'Contextmenu',
+		slug: 'Contextmenu',
+		pathname: '',
+		category: 'components',
+		component: Contextmenu,
+		related: [],
+	},
+	{
+		name: 'Dialog',
+		slug: 'Dialog',
+		pathname: '',
+		category: 'components',
+		component: Dialog,
+		related: [],
+	},
+	{
+		name: 'Hue_Input',
+		slug: 'Hue_Input',
+		pathname: '',
+		category: 'components',
+		component: Hue_Input,
+		related: ['forms'], // TODO externals?
+	},
+	// TODO implement
+	// {
+	// 	name: 'Library',
+	// 	slug: 'Library',
+	// 	pathname: '',
+	// 	category: 'components',
+	// 	component: Library,
+	// 	related: [],
+	// },
+	{
+		name: 'Package_Detail',
+		slug: 'Package_Detail',
+		pathname: '',
+		category: 'components',
+		component: Package_Detail,
+		related: ['Package_Summary'],
+	},
+	{
+		name: 'Package_Summary',
+		slug: 'Package_Summary',
+		pathname: '',
+		category: 'components',
+		component: Package_Summary,
+		related: ['Package_Detail'],
+	},
+	{
+		name: 'Pending_Animation',
+		slug: 'Pending_Animation',
+		pathname: '',
+		category: 'components',
+		component: Pending_Animation,
+		related: ['Pending_Button'],
+	},
+	{
+		name: 'Pending_Button',
+		slug: 'Pending_Button',
+		pathname: '',
+		category: 'components',
+		component: Pending_Button,
+		related: ['Pending_Animation'],
+	},
+	{
+		name: 'Redirect',
+		slug: 'Redirect',
+		pathname: '',
+		category: 'components',
+		component: Redirect,
+		related: ['Breadcrumb'],
+	},
+	{
+		name: 'Teleport',
+		slug: 'Teleport',
+		pathname: '',
+		category: 'components',
+		component: Teleport,
+		related: [],
+	},
 ];
 
 for (const t of tomes) init_tome(t);
diff --git a/src/routes/library/typography/+page.svelte b/src/routes/library/typography/+page.svelte
index 1d1936b03..35b1a20a3 100644
--- a/src/routes/library/typography/+page.svelte
+++ b/src/routes/library/typography/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
 
 	import {default_variables} from '$lib/variables.js';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import {get_tome} from '$lib/tome.js';
 
 	const LIBRARY_ITEM_NAME = 'typography';
 
diff --git a/src/routes/library/variables/+page.svelte b/src/routes/library/variables/+page.svelte
index 710b96ab3..1c53bfb87 100644
--- a/src/routes/library/variables/+page.svelte
+++ b/src/routes/library/variables/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import {swallow} from '$lib/swallow.js';
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import Library_Vocab from '@fuz.dev/fuz_library/Library_Vocab.svelte';
-	import Dialog from '@fuz.dev/fuz_dialog/Dialog.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
 	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
 	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
-	import Alert from '@fuz.dev/fuz_library/Alert.svelte';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
+	import {swallow} from '$lib/swallow.js';
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Library_Vocab from '$lib/Library_Vocab.svelte';
+	import Dialog from '$lib/Dialog.svelte';
+	import {get_tome} from '$lib/tome.js';
+	import Alert from '$lib/Alert.svelte';
 	import {default_variables} from '$lib/variables.js';
 	import type {Theme_Variable} from '$lib/theme.js';
 	import Theme_Variable_Detail from '$routes/Theme_Variable_Detail.svelte';
diff --git a/src/routes/package.gen.ts b/src/routes/package.gen.ts
index c20ed5cfd..9b0365d51 100644
--- a/src/routes/package.gen.ts
+++ b/src/routes/package.gen.ts
@@ -1 +1 @@
-export * from '@grogarden/gro/package.gen.js';
+export * from '@ryanatkn/gro/package.gen.js';
diff --git a/src/routes/package.ts b/src/routes/package.ts
index 27452726e..006ba417b 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -1,19 +1,19 @@
 // generated by src/routes/package.gen.ts
 
-import type {Package_Json} from '@grogarden/gro/package_json.js';
-import type {Src_Json} from '@grogarden/gro/src_json.js';
+import type {Package_Json} from '@ryanatkn/gro/package_json.js';
+import type {Src_Json} from '@ryanatkn/gro/src_json.js';
 
 export const package_json = {
-	name: '@fuz.dev/fuz',
+	name: '@ryanatkn/fuz',
 	version: '0.81.0',
-	description: 'design system for CSS, Svelte, and SvelteKit',
+	description: 'UI library for Svelte and SvelteKit',
 	icon: '🧶',
 	public: true,
 	license: 'MIT',
 	homepage: 'https://www.fuz.dev/',
 	author: {name: 'Ryan Atkinson', email: 'mail@ryanatkn.com', url: 'https://www.ryanatkn.com/'},
-	repository: {type: 'git', url: 'git+https://github.com/fuz-dev/fuz.git'},
-	bugs: {url: 'https://github.com/fuz-dev/fuz/issues', email: 'mail@ryanatkn.com'},
+	repository: {type: 'git', url: 'git+https://github.com/ryanatkn/fuz.git'},
+	bugs: {url: 'https://github.com/ryanatkn/fuz/issues', email: 'mail@ryanatkn.com'},
 	type: 'module',
 	engines: {node: '>=20.10'},
 	scripts: {
@@ -27,12 +27,11 @@ export const package_json = {
 	peerDependencies: {svelte: '*'},
 	devDependencies: {
 		'@changesets/changelog-git': '^0.2.0',
-		'@feltjs/eslint-config': '^0.4.1',
-		'@fuz.dev/fuz_code': '^0.5.0',
-		'@fuz.dev/fuz_dialog': '^0.6.0',
-		'@fuz.dev/fuz_library': '^0.23.0',
-		'@grogarden/gro': '^0.108.0',
-		'@ryanatkn/orc': '^0.17.0',
+		'@ryanatkn/belt': '^0.20.3',
+		'@ryanatkn/eslint-config': '^0.1.0',
+		'@ryanatkn/fuz_code': '^0.6.0',
+		'@ryanatkn/gro': '^0.112.0',
+		'@ryanatkn/orc': '^0.18.0',
 		'@sveltejs/adapter-static': '^3.0.1',
 		'@sveltejs/kit': '^2.0.6',
 		'@sveltejs/package': '^2.2.5',
@@ -52,7 +51,7 @@ export const package_json = {
 		typescript: '^5.3.3',
 		uvu: '^0.5.6',
 	},
-	eslintConfig: {root: true, extends: '@feltjs', rules: {'no-console': 1}},
+	eslintConfig: {root: true, extends: '@ryanatkn', rules: {'no-console': 1}},
 	prettier: {
 		plugins: ['prettier-plugin-svelte'],
 		useTabs: true,
@@ -62,11 +61,58 @@ export const package_json = {
 		overrides: [{files: 'package.json', options: {useTabs: false}}],
 	},
 	exports: {
+		'./Alert.svelte': {
+			svelte: './dist/Alert.svelte',
+			default: './dist/Alert.svelte',
+			types: './dist/Alert.svelte.d.ts',
+		},
+		'./alert.js': {default: './dist/alert.js', types: './dist/alert.d.ts'},
+		'./Breadcrumb.svelte': {
+			svelte: './dist/Breadcrumb.svelte',
+			default: './dist/Breadcrumb.svelte',
+			types: './dist/Breadcrumb.svelte.d.ts',
+		},
+		'./Card.svelte': {
+			svelte: './dist/Card.svelte',
+			default: './dist/Card.svelte',
+			types: './dist/Card.svelte.d.ts',
+		},
 		'./Color_Scheme_Input.svelte': {
 			svelte: './dist/Color_Scheme_Input.svelte',
 			default: './dist/Color_Scheme_Input.svelte',
 			types: './dist/Color_Scheme_Input.svelte.d.ts',
 		},
+		'./Contextmenu_Entry.svelte': {
+			svelte: './dist/Contextmenu_Entry.svelte',
+			default: './dist/Contextmenu_Entry.svelte',
+			types: './dist/Contextmenu_Entry.svelte.d.ts',
+		},
+		'./Contextmenu_Link_Entry.svelte': {
+			svelte: './dist/Contextmenu_Link_Entry.svelte',
+			default: './dist/Contextmenu_Link_Entry.svelte',
+			types: './dist/Contextmenu_Link_Entry.svelte.d.ts',
+		},
+		'./Contextmenu_Submenu.svelte': {
+			svelte: './dist/Contextmenu_Submenu.svelte',
+			default: './dist/Contextmenu_Submenu.svelte',
+			types: './dist/Contextmenu_Submenu.svelte.d.ts',
+		},
+		'./Contextmenu_Text_Entry.svelte': {
+			svelte: './dist/Contextmenu_Text_Entry.svelte',
+			default: './dist/Contextmenu_Text_Entry.svelte',
+			types: './dist/Contextmenu_Text_Entry.svelte.d.ts',
+		},
+		'./Contextmenu.svelte': {
+			svelte: './dist/Contextmenu.svelte',
+			default: './dist/Contextmenu.svelte',
+			types: './dist/Contextmenu.svelte.d.ts',
+		},
+		'./contextmenu.js': {default: './dist/contextmenu.js', types: './dist/contextmenu.d.ts'},
+		'./Copy_To_Clipboard.svelte': {
+			svelte: './dist/Copy_To_Clipboard.svelte',
+			default: './dist/Copy_To_Clipboard.svelte',
+			types: './dist/Copy_To_Clipboard.svelte.d.ts',
+		},
 		'./deployments.json': {
 			default: './dist/deployments.json',
 			types: './dist/deployments.json.d.ts',
@@ -75,9 +121,103 @@ export const package_json = {
 			default: './dist/deployments.task.js',
 			types: './dist/deployments.task.d.ts',
 		},
+		'./Devmode_Controls.svelte': {
+			svelte: './dist/Devmode_Controls.svelte',
+			default: './dist/Devmode_Controls.svelte',
+			types: './dist/Devmode_Controls.svelte.d.ts',
+		},
+		'./devmode.js': {default: './dist/devmode.js', types: './dist/devmode.d.ts'},
+		'./Dialog.svelte': {
+			svelte: './dist/Dialog.svelte',
+			default: './dist/Dialog.svelte',
+			types: './dist/Dialog.svelte.d.ts',
+		},
+		'./dialog.js': {default: './dist/dialog.js', types: './dist/dialog.d.ts'},
+		'./Dialogs.svelte': {
+			svelte: './dist/Dialogs.svelte',
+			default: './dist/Dialogs.svelte',
+			types: './dist/Dialogs.svelte.d.ts',
+		},
+		'./Github_Logo.svelte': {
+			svelte: './dist/Github_Logo.svelte',
+			default: './dist/Github_Logo.svelte',
+			types: './dist/Github_Logo.svelte.d.ts',
+		},
+		'./helpers.js': {default: './dist/helpers.js', types: './dist/helpers.d.ts'},
+		'./Hue_Input.svelte': {
+			svelte: './dist/Hue_Input.svelte',
+			default: './dist/Hue_Input.svelte',
+			types: './dist/Hue_Input.svelte.d.ts',
+		},
+		'./Library_Footer.svelte': {
+			svelte: './dist/Library_Footer.svelte',
+			default: './dist/Library_Footer.svelte',
+			types: './dist/Library_Footer.svelte.d.ts',
+		},
+		'./Library_Header.svelte': {
+			svelte: './dist/Library_Header.svelte',
+			default: './dist/Library_Header.svelte',
+			types: './dist/Library_Header.svelte.d.ts',
+		},
+		'./Library_Menu.svelte': {
+			svelte: './dist/Library_Menu.svelte',
+			default: './dist/Library_Menu.svelte',
+			types: './dist/Library_Menu.svelte.d.ts',
+		},
+		'./Library_Nav.svelte': {
+			svelte: './dist/Library_Nav.svelte',
+			default: './dist/Library_Nav.svelte',
+			types: './dist/Library_Nav.svelte.d.ts',
+		},
+		'./Library_Panel.svelte': {
+			svelte: './dist/Library_Panel.svelte',
+			default: './dist/Library_Panel.svelte',
+			types: './dist/Library_Panel.svelte.d.ts',
+		},
+		'./Library_Vocab.svelte': {
+			svelte: './dist/Library_Vocab.svelte',
+			default: './dist/Library_Vocab.svelte',
+			types: './dist/Library_Vocab.svelte.d.ts',
+		},
+		'./Library.svelte': {
+			svelte: './dist/Library.svelte',
+			default: './dist/Library.svelte',
+			types: './dist/Library.svelte.d.ts',
+		},
 		'./orc.task.js': {default: './dist/orc.task.js', types: './dist/orc.task.d.ts'},
+		'./Package_Detail.svelte': {
+			svelte: './dist/Package_Detail.svelte',
+			default: './dist/Package_Detail.svelte',
+			types: './dist/Package_Detail.svelte.d.ts',
+		},
+		'./package_meta.js': {default: './dist/package_meta.js', types: './dist/package_meta.d.ts'},
+		'./Package_Summary.svelte': {
+			svelte: './dist/Package_Summary.svelte',
+			default: './dist/Package_Summary.svelte',
+			types: './dist/Package_Summary.svelte.d.ts',
+		},
+		'./Pending_Animation.svelte': {
+			svelte: './dist/Pending_Animation.svelte',
+			default: './dist/Pending_Animation.svelte',
+			types: './dist/Pending_Animation.svelte.d.ts',
+		},
+		'./Pending_Button.svelte': {
+			svelte: './dist/Pending_Button.svelte',
+			default: './dist/Pending_Button.svelte',
+			types: './dist/Pending_Button.svelte.d.ts',
+		},
+		'./Redirect.svelte': {
+			svelte: './dist/Redirect.svelte',
+			default: './dist/Redirect.svelte',
+			types: './dist/Redirect.svelte.d.ts',
+		},
 		'./style.css': {default: './dist/style.css'},
 		'./swallow.js': {default: './dist/swallow.js', types: './dist/swallow.d.ts'},
+		'./Teleport.svelte': {
+			svelte: './dist/Teleport.svelte',
+			default: './dist/Teleport.svelte',
+			types: './dist/Teleport.svelte.d.ts',
+		},
 		'./Theme_Input.svelte': {
 			svelte: './dist/Theme_Input.svelte',
 			default: './dist/Theme_Input.svelte',
@@ -97,20 +237,124 @@ export const package_json = {
 			types: './dist/Themed.svelte.d.ts',
 		},
 		'./themes.js': {default: './dist/themes.js', types: './dist/themes.d.ts'},
+		'./Tome_Detail.svelte': {
+			svelte: './dist/Tome_Detail.svelte',
+			default: './dist/Tome_Detail.svelte',
+			types: './dist/Tome_Detail.svelte.d.ts',
+		},
+		'./Tome_Title.svelte': {
+			svelte: './dist/Tome_Title.svelte',
+			default: './dist/Tome_Title.svelte',
+			types: './dist/Tome_Title.svelte.d.ts',
+		},
+		'./tome.js': {default: './dist/tome.js', types: './dist/tome.d.ts'},
 		'./variables.js': {default: './dist/variables.js', types: './dist/variables.d.ts'},
 	},
 } satisfies Package_Json;
 
 export const src_json = {
-	name: '@fuz.dev/fuz',
+	name: '@ryanatkn/fuz',
 	version: '0.81.0',
 	modules: {
+		'./Alert.svelte': {path: 'Alert.svelte', declarations: []},
+		'./alert.js': {
+			path: 'alert.ts',
+			declarations: [
+				{name: 'Alert_Status', kind: 'type'},
+				{name: 'Alert_Status_Options', kind: 'type'},
+				{name: 'alert_status_options', kind: 'variable'},
+			],
+		},
+		'./Breadcrumb.svelte': {path: 'Breadcrumb.svelte', declarations: []},
+		'./Card.svelte': {path: 'Card.svelte', declarations: []},
 		'./Color_Scheme_Input.svelte': {path: 'Color_Scheme_Input.svelte', declarations: []},
+		'./Contextmenu_Entry.svelte': {path: 'Contextmenu_Entry.svelte', declarations: []},
+		'./Contextmenu_Link_Entry.svelte': {path: 'Contextmenu_Link_Entry.svelte', declarations: []},
+		'./Contextmenu_Submenu.svelte': {path: 'Contextmenu_Submenu.svelte', declarations: []},
+		'./Contextmenu_Text_Entry.svelte': {path: 'Contextmenu_Text_Entry.svelte', declarations: []},
+		'./Contextmenu.svelte': {path: 'Contextmenu.svelte', declarations: []},
+		'./contextmenu.js': {
+			path: 'contextmenu.ts',
+			declarations: [
+				{name: 'Contextmenu_Params', kind: 'type'},
+				{name: 'Contextmenu_Action_Params', kind: 'type'},
+				{name: 'to_contextmenu_params', kind: 'function'},
+				{name: 'Item_State', kind: 'type'},
+				{name: 'Entry_State', kind: 'type'},
+				{name: 'Submenu_State', kind: 'type'},
+				{name: 'Root_Menu_State', kind: 'type'},
+				{name: 'Contextmenu_Run', kind: 'type'},
+				{name: 'Contextmenu', kind: 'type'},
+				{name: 'Contextmenu_Store', kind: 'type'},
+				{name: 'Contextmenu_Store_Options', kind: 'type'},
+				{name: 'create_contextmenu', kind: 'function'},
+				{name: 'open_contextmenu', kind: 'function'},
+				{name: 'set_contextmenu', kind: 'function'},
+				{name: 'get_contextmenu', kind: 'function'},
+				{name: 'set_contextmenu_submenu', kind: 'function'},
+				{name: 'get_contextmenu_submenu', kind: 'function'},
+				{name: 'set_contextmenu_dimensions', kind: 'function'},
+				{name: 'get_contextmenu_dimensions', kind: 'function'},
+			],
+		},
+		'./Copy_To_Clipboard.svelte': {path: 'Copy_To_Clipboard.svelte', declarations: []},
 		'./deployments.json': {path: 'deployments.json', declarations: []},
 		'./deployments.task.js': {path: 'deployments.task.ts', declarations: []},
+		'./Devmode_Controls.svelte': {path: 'Devmode_Controls.svelte', declarations: []},
+		'./devmode.js': {
+			path: 'devmode.ts',
+			declarations: [
+				{name: 'get_devmode', kind: 'function'},
+				{name: 'set_devmode', kind: 'function'},
+			],
+		},
+		'./Dialog.svelte': {path: 'Dialog.svelte', declarations: []},
+		'./dialog.js': {
+			path: 'dialog.ts',
+			declarations: [
+				{name: 'to_dialog_params', kind: 'function'},
+				{name: 'Dialog_Params', kind: 'type'},
+				{name: 'Dialog_Layout', kind: 'type'},
+				{name: 'dialog_layouts', kind: 'variable'},
+			],
+		},
+		'./Dialogs.svelte': {path: 'Dialogs.svelte', declarations: []},
+		'./Github_Logo.svelte': {path: 'Github_Logo.svelte', declarations: []},
+		'./helpers.js': {
+			path: 'helpers.ts',
+			declarations: [
+				{name: 'LIBRARY_PATH', kind: 'variable'},
+				{name: 'to_library_path_info', kind: 'function'},
+			],
+		},
+		'./Hue_Input.svelte': {path: 'Hue_Input.svelte', declarations: []},
+		'./Library_Footer.svelte': {path: 'Library_Footer.svelte', declarations: []},
+		'./Library_Header.svelte': {path: 'Library_Header.svelte', declarations: []},
+		'./Library_Menu.svelte': {path: 'Library_Menu.svelte', declarations: []},
+		'./Library_Nav.svelte': {path: 'Library_Nav.svelte', declarations: []},
+		'./Library_Panel.svelte': {path: 'Library_Panel.svelte', declarations: []},
+		'./Library_Vocab.svelte': {path: 'Library_Vocab.svelte', declarations: []},
+		'./Library.svelte': {path: 'Library.svelte', declarations: []},
 		'./orc.task.js': {path: 'orc.task.ts', declarations: []},
+		'./Package_Detail.svelte': {path: 'Package_Detail.svelte', declarations: []},
+		'./package_meta.js': {
+			path: 'package_meta.ts',
+			declarations: [
+				{name: 'Package', kind: 'type'},
+				{name: 'Package_Meta', kind: 'type'},
+				{name: 'parse_package_meta', kind: 'function'},
+				{name: 'parse_repo_name', kind: 'function'},
+				{name: 'format_host', kind: 'function'},
+				{name: 'parse_org_url', kind: 'function'},
+			],
+		},
+		'./Package_Summary.svelte': {path: 'Package_Summary.svelte', declarations: []},
+		'./Pending_Animation.svelte': {path: 'Pending_Animation.svelte', declarations: []},
+		'./Pending_Button.svelte': {path: 'Pending_Button.svelte', declarations: []},
+		'./Redirect.svelte': {path: 'Redirect.svelte', declarations: []},
 		'./style.css': {path: 'style.css', declarations: []},
 		'./swallow.js': {path: 'swallow.ts', declarations: [{name: 'swallow', kind: 'function'}]},
+		'./Teleport.svelte': {path: 'Teleport.svelte', declarations: []},
 		'./Theme_Input.svelte': {path: 'Theme_Input.svelte', declarations: []},
 		'./theme.css': {path: 'theme.css', declarations: []},
 		'./theme.gen.css.js': {
@@ -152,6 +396,18 @@ export const src_json = {
 				{name: 'default_themes', kind: 'variable'},
 			],
 		},
+		'./Tome_Detail.svelte': {path: 'Tome_Detail.svelte', declarations: []},
+		'./Tome_Title.svelte': {path: 'Tome_Title.svelte', declarations: []},
+		'./tome.js': {
+			path: 'tome.ts',
+			declarations: [
+				{name: 'Tome', kind: 'variable'},
+				{name: 'init_tome', kind: 'function'},
+				{name: 'get_tomes', kind: 'function'},
+				{name: 'set_tomes', kind: 'function'},
+				{name: 'get_tome', kind: 'function'},
+			],
+		},
 		'./variables.js': {
 			path: 'variables.ts',
 			declarations: [{name: 'default_variables', kind: 'variable'}],
diff --git a/src/routes/tree/[slug]/+page.ts b/src/routes/tree/[slug]/+page.ts
index 24694126d..1828cd7f4 100644
--- a/src/routes/tree/[slug]/+page.ts
+++ b/src/routes/tree/[slug]/+page.ts
@@ -1,5 +1,5 @@
 import type {EntryGenerator} from './$types';
-import {parse_package_meta} from '@fuz.dev/fuz_library/package_meta.js';
+import {parse_package_meta} from '$lib/package_meta.js';
 
 import maybe_deployments from '$lib/deployments.json';
 
diff --git a/vite.config.ts b/vite.config.ts
index 408710214..4cb63d5fd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 import type {UserConfig} from 'vite';
 import {sveltekit} from '@sveltejs/kit/vite';
-import {remove_prism_css} from '@fuz.dev/fuz_code/remove_prism_css_vite_plugin.js';
+import {remove_prism_css} from '@ryanatkn/fuz_code/remove_prism_css_vite_plugin.js';
 
 const config: UserConfig = {
 	plugins: [sveltekit(), remove_prism_css()],