From b47ff6146c7b32c7fdd1e2c38d3e5bbdb4aac0b8 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 23:52:37 +0200
Subject: [PATCH] web/bones: move the skeleton rigs under a Bones category

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoCreationForm.svelte    |  8 +++++---
 web/src/lib/components/repo/RepoHeader.svelte          |  4 ++--
 web/src/lib/components/repo/StarButton.svelte          |  4 ++--
 ...t.stories.svelte => StarredBy.bones.stories.svelte} |  3 +--
 ...ew.stories.svelte => TreeView.bones.stories.svelte} |  2 +-
 .../repo/pipelines/PipelineCardContent.svelte          |  4 ++--
 .../components/repo/pipelines/PipelineToolbar.svelte   |  7 +++++--
 web/src/lib/components/settings/tabs/EmailsTab.svelte  | 10 +++++-----
 ...s.svelte => LoadingPrimitives.bones.stories.svelte} |  2 +-
 .../Radio.bones.stories.svelte}                        |  4 ++--
 web/src/lib/components/ui/Tabs.svelte                  |  4 ++--
 .../[handle]/[repo]/tree/[ref]/[...path]/+page.svelte  |  4 ++--
 12 files changed, 30 insertions(+), 26 deletions(-)
 rename web/src/lib/components/repo/{StarredByList.stories.svelte => StarredBy.bones.stories.svelte} (84%)
 rename web/src/lib/components/repo/{TreeView.stories.svelte => TreeView.bones.stories.svelte} (96%)
 rename web/src/lib/components/ui/{LoadingPrimitives.stories.svelte => LoadingPrimitives.bones.stories.svelte} (91%)
 rename web/src/lib/components/{repo/RepoCreationOptions.stories.svelte => ui/Radio.bones.stories.svelte} (76%)

diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index ef83a5811..d347f10b5 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -30,12 +30,14 @@
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import Plus from "$icon/plus";
 	import { createAction } from "$lib/action.svelte";
-	import repoCreationoptionsLoadingRow from "$lib/bones/repo-repocreationoptions--loading-row.bones.json";
+	import bonesRadioLoadingRow from "$lib/bones/bones-radio--loading-row.bones.json";
 	import { getAuth } from "$lib/auth.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
 	import Radio from "$lib/components/ui/Radio.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 
@@ -217,7 +219,7 @@
 					</div>
 					<div class="space-y-2">
 						{#if knotOptions === null}
-							<Bones capture={repoCreationoptionsLoadingRow} class="w-36.25" />
+							<Bones capture={bonesRadioLoadingRow} class="w-36.25" />
 						{:else}
 							{#each knotOptions as knot (knot)}
 								<div>
@@ -273,7 +275,7 @@
 						>
 					</div>
 					{#await spindles}
-						<Bones capture={repoCreationoptionsLoadingRow} class="w-36.25" />
+						<Bones capture={bonesRadioLoadingRow} class="w-36.25" />
 					{:then options}
 						{#each options as spindle (spindle)}
 							<div>
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 0ca2ea720..fb3b4df95 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -8,7 +8,7 @@
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
+	import bonesLoadingprimitivesCount from "$lib/bones/bones-loadingprimitives--count.bones.json";
 	import StarButton from "./StarButton.svelte";
 	import type { RepoCounts, RepoInfo, RepoSource } from "./types";
 	import SubscribeButton from "./SubscribeButton.svelte";
@@ -57,7 +57,7 @@
 					<Pending>
 						{#snippet skeleton()}
 							<Bones
-								capture={uiLoadingprimitivesCount}
+								capture={bonesLoadingprimitivesCount}
 								class="inline-block w-8 align-middle"
 							/>
 						{/snippet}
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 3931a9cfe..7327d67c2 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -15,7 +15,7 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import { CROSSFADE_DURATION, CROSSFADE_EASING } from "$lib/motion/spring";
 	import { prefersReducedMotion } from "svelte/motion";
-	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
+	import bonesLoadingprimitivesCount from "$lib/bones/bones-loadingprimitives--count.bones.json";
 	import type { StarChange } from "$lib/components/profile/types";
 	import type { RepoCounts } from "./types";
 
@@ -161,7 +161,7 @@
 			<Button href={starsHref} variant="ghost" size="small" title="Starred by">
 				{#if loadedCount === undefined}
 					<Bones
-						capture={uiLoadingprimitivesCount}
+						capture={bonesLoadingprimitivesCount}
 						class="inline-block w-8 align-middle"
 					/>
 				{:else}
diff --git a/web/src/lib/components/repo/StarredByList.stories.svelte b/web/src/lib/components/repo/StarredBy.bones.stories.svelte
similarity index 84%
rename from web/src/lib/components/repo/StarredByList.stories.svelte
rename to web/src/lib/components/repo/StarredBy.bones.stories.svelte
index 031870343..fb711cc6a 100644
--- a/web/src/lib/components/repo/StarredByList.stories.svelte
+++ b/web/src/lib/components/repo/StarredBy.bones.stories.svelte
@@ -2,7 +2,6 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import StarredBy from "./StarredBy.svelte";
 
-	// skeleton capture spreads short and long handles across the 50-row page
 	const handles = [
 		"joshka.net",
 		"byjp.me",
@@ -18,7 +17,7 @@
 		createdAt: new Date(Date.UTC(2026, 7, 19 - index, 9, 0, 0)).toISOString()
 	}));
 
-	const { Story } = defineMeta({ title: "Repo/StarredByList" });
+	const { Story } = defineMeta({ title: "Bones/StarredBy" });
 </script>
 
 <Story name="Skeleton fixture" asChild>
diff --git a/web/src/lib/components/repo/TreeView.stories.svelte b/web/src/lib/components/repo/TreeView.bones.stories.svelte
similarity index 96%
rename from web/src/lib/components/repo/TreeView.stories.svelte
rename to web/src/lib/components/repo/TreeView.bones.stories.svelte
index 9de105ea2..32432f3dc 100644
--- a/web/src/lib/components/repo/TreeView.stories.svelte
+++ b/web/src/lib/components/repo/TreeView.bones.stories.svelte
@@ -29,7 +29,7 @@
 		authorEmail: "dawn@example.test",
 		when: "2026-08-19T12:00:00Z"
 	};
-	const { Story } = defineMeta({ title: "Repo/TreeView" });
+	const { Story } = defineMeta({ title: "Bones/TreeView" });
 </script>
 
 <Story name="Skeleton fixture" asChild>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 96c42c952..ec52d024d 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -46,7 +46,7 @@
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import uiLoadingprimitivesShortText from "$lib/bones/ui-loadingprimitives--short-text.bones.json";
+	import bonesLoadingprimitivesShortText from "$lib/bones/bones-loadingprimitives--short-text.bones.json";
 	import Button from "$lib/components/ui/Button.svelte";
 
 	interface Props {
@@ -91,7 +91,7 @@
 			{@const sourceLabel = pipeline.trigger.sourceLabel}
 			<Pending>
 				{#snippet skeleton()}
-					<Bones capture={uiLoadingprimitivesShortText} class="w-28" />
+					<Bones capture={bonesLoadingprimitivesShortText} class="w-28" />
 				{/snippet}
 				{#snippet failed()}
 					<span class={classes.triggerRef()}>{sourceLabel}</span>
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
index 95f61327b..aaeacab0e 100644
--- a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -23,7 +23,7 @@
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
+	import bonesLoadingprimitivesCount from "$lib/bones/bones-loadingprimitives--count.bones.json";
 	import type { PipelineFilter } from "./pipeline";
 	import PipelineSearch from "./PipelineSearch.svelte";
 	import { formatCount } from "$lib/format";
@@ -89,7 +89,10 @@
 		{#snippet skeleton()}
 			<span class={classes.count()}>
 				<Play />
-				<Bones capture={uiLoadingprimitivesCount} class="inline-block w-5 align-middle" />
+				<Bones
+					capture={bonesLoadingprimitivesCount}
+					class="inline-block w-5 align-middle"
+				/>
 				pipeline runs
 			</span>
 		{/snippet}
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index bc91ac889..5e9792d06 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -13,7 +13,7 @@
 	} from "$lib/api/emails";
 	import { createAction, createLoad } from "$lib/action.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import uiLoadingprimitivesShortText from "$lib/bones/ui-loadingprimitives--short-text.bones.json";
+	import bonesLoadingprimitivesShortText from "$lib/bones/bones-loadingprimitives--short-text.bones.json";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
@@ -99,12 +99,12 @@
 			{#each [0, 1, 2] as _, i (i)}
 				<div class="flex w-full items-center justify-between gap-4">
 					<div class="flex min-w-0 flex-col gap-1.5">
-						<Bones capture={uiLoadingprimitivesShortText} class="w-48" />
-						<Bones capture={uiLoadingprimitivesShortText} class="w-24" />
+						<Bones capture={bonesLoadingprimitivesShortText} class="w-48" />
+						<Bones capture={bonesLoadingprimitivesShortText} class="w-24" />
 					</div>
 					<div class="flex shrink-0 items-center gap-2">
-						<Bones capture={uiLoadingprimitivesShortText} class="w-20" />
-						<Bones capture={uiLoadingprimitivesShortText} class="w-8" />
+						<Bones capture={bonesLoadingprimitivesShortText} class="w-20" />
+						<Bones capture={bonesLoadingprimitivesShortText} class="w-8" />
 					</div>
 				</div>
 			{/each}
diff --git a/web/src/lib/components/ui/LoadingPrimitives.stories.svelte b/web/src/lib/components/ui/LoadingPrimitives.bones.stories.svelte
similarity index 91%
rename from web/src/lib/components/ui/LoadingPrimitives.stories.svelte
rename to web/src/lib/components/ui/LoadingPrimitives.bones.stories.svelte
index cfb9c92fb..29e691f03 100644
--- a/web/src/lib/components/ui/LoadingPrimitives.stories.svelte
+++ b/web/src/lib/components/ui/LoadingPrimitives.bones.stories.svelte
@@ -2,7 +2,7 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 
 	const { Story } = defineMeta({
-		title: "UI/LoadingPrimitives",
+		title: "Bones/LoadingPrimitives",
 		parameters: { bones: { class: "w-fit" } }
 	});
 </script>
diff --git a/web/src/lib/components/repo/RepoCreationOptions.stories.svelte b/web/src/lib/components/ui/Radio.bones.stories.svelte
similarity index 76%
rename from web/src/lib/components/repo/RepoCreationOptions.stories.svelte
rename to web/src/lib/components/ui/Radio.bones.stories.svelte
index c689e699c..78a95f29a 100644
--- a/web/src/lib/components/repo/RepoCreationOptions.stories.svelte
+++ b/web/src/lib/components/ui/Radio.bones.stories.svelte
@@ -1,9 +1,9 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Radio from "$lib/components/ui/Radio.svelte";
+	import Radio from "./Radio.svelte";
 
 	const { Story } = defineMeta({
-		title: "Repo/RepoCreationOptions",
+		title: "Bones/Radio",
 		parameters: { bones: { class: "w-fit" } }
 	});
 </script>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 47c105fec..9d66e391c 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -96,7 +96,7 @@
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import { formatCount } from "$lib/format";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import uiLoadingprimitivesCount from "$lib/bones/ui-loadingprimitives--count.bones.json";
+	import bonesLoadingprimitivesCount from "$lib/bones/bones-loadingprimitives--count.bones.json";
 
 	interface Props {
 		tabs: TabDef[];
@@ -225,7 +225,7 @@
 					<Pending>
 						{#snippet skeleton()}
 							<Bones
-								capture={uiLoadingprimitivesCount}
+								capture={bonesLoadingprimitivesCount}
 								class="inline-block h-5 w-8 overflow-hidden {style.count({
 									selected: isSelected
 								})}"
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
index c5b7c085e..2f0668e51 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
@@ -4,7 +4,7 @@
 	import Readme from "$lib/components/repo/Readme.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import repoReadmeRenderedSanitizedHtml from "$lib/bones/repo-readme--rendered-sanitized-html.bones.json";
-	import repoTreeviewSkeletonFixture from "$lib/bones/repo-treeview--skeleton-fixture.bones.json";
+	import bonesTreeviewSkeletonFixture from "$lib/bones/bones-treeview--skeleton-fixture.bones.json";
 	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
@@ -15,7 +15,7 @@
 <!-- shared boundary avoids reserving a skeleton card for directories without a readme -->
 <Pending>
 	{#snippet skeleton()}
-		<Bones capture={repoTreeviewSkeletonFixture} />
+		<Bones capture={bonesTreeviewSkeletonFixture} />
 	{/snippet}
 
 	{@const repo = await data.repo}
-- 
2.51.2