ryanatkn · ryanatkn · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git a/.changeset/tasty-files-jump.md b/.changeset/tasty-files-jump.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+rename `Tome_Content` from `Tome_Content`
diff --git a/package.json b/package.json
@@ -367,10 +367,10 @@
       "svelte": "./dist/Themed.svelte",
       "default": "./dist/Themed.svelte"
     },
-    "./Tome_Detail.svelte": {
-      "types": "./dist/Tome_Detail.svelte.d.ts",
-      "svelte": "./dist/Tome_Detail.svelte",
-      "default": "./dist/Tome_Detail.svelte"
+    "./Tome_Content.svelte": {
+      "types": "./dist/Tome_Content.svelte.d.ts",
+      "svelte": "./dist/Tome_Content.svelte",
+      "default": "./dist/Tome_Content.svelte"
     },
     "./Tome_Link.svelte": {
       "types": "./dist/Tome_Link.svelte.d.ts",

diff --git a/src/lib/Tome_Detail.svelte → src/lib/Tome_Content.svelte b/src/lib/Tome_Detail.svelte → src/lib/Tome_Content.svelte
diff --git a/src/routes/library/Alert/+page.svelte b/src/routes/library/Alert/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Alert from '$lib/Alert.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Alert';
@@ -16,7 +16,7 @@
 	// TODO add examples for colored buttons - visually they're broken because they look like selected buttons
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<!-- TODO make this a generic data-driven helper -->
 		<Code content={`import Alert from '@ryanatkn/fuz/Alert.svelte';`} lang="ts" />
@@ -91,4 +91,4 @@ export type Alert_Status = 'inform' | 'help' | 'error';"
 			>the <code>color</code> prop overrides the status color</Alert
 		>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Breadcrumb/+page.svelte b/src/routes/library/Breadcrumb/+page.svelte
@@ -5,15 +5,15 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Breadcrumb_Example from '$routes/library/Breadcrumb/Breadcrumb_Example.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Breadcrumb';
 	const tome = get_tome(LIBRARY_ITEM_NAME);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<!-- TODO make this a generic data-driven helper -->
 		<Code content={`import Breadcrumb from '@ryanatkn/fuz/Breadcrumb.svelte';`} lang="ts" />
@@ -38,4 +38,4 @@
 		<Tome_Subheading text="With custom paths" slug="custom-paths" />
 		<Breadcrumb_Example selected_path="/a/b" />
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Breadcrumb/a/+layout.svelte b/src/routes/library/Breadcrumb/a/+layout.svelte
@@ -2,7 +2,7 @@
 	import type {Snippet} from 'svelte';
 
 	import {get_tome} from '$lib/tome.js';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 
 	interface Props {
 		children: Snippet;
@@ -15,6 +15,6 @@
 	const tome = get_tome(LIBRARY_ITEM_NAME);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	{@render children()}
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Card/+page.svelte b/src/routes/library/Card/+page.svelte
@@ -6,7 +6,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Card from '$lib/Card.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Card';
@@ -15,7 +15,7 @@
 	const href = `${base}/library`;
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<!-- TODO make this a generic data-driven helper -->
 		<Code content={`import Card from '@ryanatkn/fuz/Card.svelte';`} lang="ts" />
@@ -121,4 +121,4 @@
 			icon below
 		</Card>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Contextmenu/+page.svelte b/src/routes/library/Contextmenu/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import {get_tome} from '$lib/tome.js';
 	import Contextmenu_Discussion from '$routes/library/Contextmenu/Discussion.svelte';
 	import Example_Full from '$routes/library/Contextmenu/Example_Full.svelte';
@@ -16,7 +16,7 @@
 </script>
 
 <!-- TODO demonstrate usage of a custom `link_snippet` and `linkProps`  -->
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<aside>
 			<p>
@@ -33,4 +33,4 @@
 	<section><Example_Select_Text /></section>
 	<section><Example_Full /></section>
 	<section><Contextmenu_Discussion /></section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Details/+page.svelte b/src/routes/library/Details/+page.svelte
@@ -3,7 +3,7 @@
 	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Details from '$lib/Details.svelte';
 	import {get_tome} from '$lib/tome.js';
 	import Mdn_Link from '$lib/Mdn_Link.svelte';
@@ -14,7 +14,7 @@
 	const tome = get_tome(LIBRARY_ITEM_NAME);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			The <code>Details</code> component is an alternative to the <Mdn_Link
@@ -78,4 +78,4 @@
 			the plain details
 		</details>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Dialog/+page.svelte b/src/routes/library/Dialog/+page.svelte
@@ -5,7 +5,7 @@
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Alert from '$lib/Alert.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import {get_tome} from '$lib/tome.js';
 	import Dialog from '$lib/Dialog.svelte';
 	import Tome_Link from '$lib/Tome_Link.svelte';
@@ -56,7 +56,7 @@
 	};
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			A modal that overlays the entire page. Uses <Tome_Link name="Teleport" /> to allow usage from any
@@ -100,7 +100,7 @@
 		>
 		<button type="button" class="mb_lg" onclick={() => add_dialogs(5)}>open many dialogs</button>
 	</section>
-</Tome_Detail>
+</Tome_Content>
 {#if opened}
 	<Dialog onclose={() => (opened = false)}>
 		{#snippet children(close)}

diff --git a/src/routes/library/Hue_Input/+page.svelte b/src/routes/library/Hue_Input/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Hue_Input from '$lib/Hue_Input.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Hue_Input';
@@ -15,7 +15,7 @@
 	let value_from_oninput: number | undefined = $state();
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<Code content={`import Hue_Input from '@ryanatkn/fuz/Hue_Input.svelte';`} lang="ts" />
 	</section>
@@ -54,4 +54,4 @@
 		/>
 		<Hue_Input>Some colorful hue input</Hue_Input>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Package_Detail/+page.svelte b/src/routes/library/Package_Detail/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Package_Detail from '$lib/Package_Detail.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import {get_pkg} from '$routes/pkg.js';
 
 	const LIBRARY_ITEM_NAME = 'Package_Detail';
@@ -14,7 +14,7 @@
 	const pkg = get_pkg();
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			This is a component related to <a
@@ -28,4 +28,4 @@
 	<section>
 		<Package_Detail {pkg} />
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Package_Summary/+page.svelte b/src/routes/library/Package_Summary/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Package_Summary from '$lib/Package_Summary.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import {get_pkg} from '$routes/pkg.js';
 
 	const LIBRARY_ITEM_NAME = 'Package_Summary';
@@ -14,7 +14,7 @@
 	const pkg = get_pkg();
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			This is a component related to <a
@@ -31,4 +31,4 @@
 	<section>
 		<Package_Summary {pkg} />
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Pending_Animation/+page.svelte b/src/routes/library/Pending_Animation/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Pending_Animation from '$lib/Pending_Animation.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Pending_Animation';
@@ -19,7 +19,7 @@
 	let pendingAnimation1Running = $state(false);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<!-- TODO make this a generic data-driven helper -->
 		<Code
@@ -115,7 +115,7 @@
 			{/snippet}
 		</Pending_Animation>
 	</section>
-</Tome_Detail>
+</Tome_Content>
 
 <style>
 	.index {

diff --git a/src/routes/library/Pending_Button/+page.svelte b/src/routes/library/Pending_Button/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Pending_Button from '$lib/Pending_Button.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Pending_Button';
 	const tome = get_tome(LIBRARY_ITEM_NAME);
@@ -18,7 +18,7 @@
 		Extract a common thing to make arbitrary things not change width.
 	-->
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>Preserves a button's normal width while animating.</p>
 		<aside>
@@ -60,4 +60,4 @@
 			do another
 		</Pending_Button>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Redirect/+page.svelte b/src/routes/library/Redirect/+page.svelte
@@ -6,13 +6,13 @@
 	import {get_tome} from '$lib/tome.js';
 	import Redirect from '$lib/Redirect.svelte';
 	import Mdn_Link from '$lib/Mdn_Link.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Redirect';
 	const tome = get_tome(LIBRARY_ITEM_NAME);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			Adds a redirect for a page using <Mdn_Link path="Web/HTTP/Redirections#html_redirections"
@@ -49,4 +49,4 @@
 			{/snippet}
 		</Redirect>
 	</section>
-</Tome_Detail>
+</Tome_Content>
diff --git a/src/routes/library/Teleport/+page.svelte b/src/routes/library/Teleport/+page.svelte
@@ -5,7 +5,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Teleport from '$lib/Teleport.svelte';
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Tome_Link from '$lib/Tome_Link.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Teleport';
@@ -16,7 +16,7 @@
 	let teleport_2: HTMLElement | undefined = $state();
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section>
 		<p>
 			Relocates elements in the DOM, in the rare cases that's useful and the best solution. The <Tome_Link
@@ -54,7 +54,7 @@
 		</div>
 		<button type="button" onclick={() => (swap = !swap)}> teleport the bunny </button>
 	</section>
-</Tome_Detail>
+</Tome_Content>
 
 <style>
 	.teleports {

diff --git a/src/routes/library/Themed/+page.svelte b/src/routes/library/Themed/+page.svelte
@@ -5,7 +5,7 @@
 	import type {Theme} from '@ryanatkn/moss/theme.js';
 	import {default_themes} from '@ryanatkn/moss/themes.js';
 
-	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import Tome_Content from '$lib/Tome_Content.svelte';
 	import Details from '$lib/Details.svelte';
 	import Dialog from '$lib/Dialog.svelte';
 	import {get_tome} from '$lib/tome.js';
@@ -29,7 +29,7 @@
 	let editing_theme: null | Theme = $state(null);
 </script>
 
-<Tome_Detail {tome}>
+<Tome_Content {tome}>
 	<section class="theme">
 		<p>
 			Fuz provides UI components that use <a href="https://moss.ryanatkn.com/library/themes"
@@ -325,7 +325,7 @@ themer.color_scheme; // '${themer.color_scheme}'`}
 			loading. We'll try to fix this when the system stabilizes.
 		</p>
 	</section>
-</Tome_Detail>
+</Tome_Content>
 
 <!-- TODO enable creating themes -->
 <!-- {#if show_create_theme_dialog}