tw4: better state and fix sidebar docs

sites/docs/src/content/components/sidebar.md

@@ -39,28 +39,26 @@ We now have a solid foundation to build on top of. Composable. Themeable. Custom
 We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
 
 ```css title="src/app.css"
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 
@@ -82,28 +80,26 @@ Copy and paste the component source files linked at the top of this page into yo
 We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
 
 ```css title="src/app.css"
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 
@@ -943,28 +939,26 @@ Use Svelte's [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bin
 We use the following CSS variables to theme the sidebar.
 
 ```css
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 0 0% 98%;
-    --sidebar-primary-foreground: 240 5.9% 10%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 ```
 

sites/docs/src/lib/components/docs/block-preview.svelte

@@ -49,7 +49,7 @@
 				class="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none data-[block=sidebar-10]:left-auto data-[block=sidebar-10]:right-0 data-[block=sidebar-11]:-top-1/3 data-[block=sidebar-14]:left-auto data-[block=sidebar-14]:right-0 data-[block=login-01]:max-w-full data-[block=sidebar-13]:max-w-full data-[block=sidebar-15]:max-w-full sm:w-[1280px] md:hidden dark:block md:dark:hidden"
 			/>
 			<iframe
-				src={`/blocks/${block.name}`}
+				src="/blocks/{block.name}"
 				height={block.container?.height}
 				class="chunk-mode bg-background relative z-20 hidden w-full md:block"
 				onload={() => {

sites/docs/src/lib/components/docs/block-toolbar.svelte

@@ -11,15 +11,15 @@
 	import type { Block } from "$lib/blocks.js";
 	import type { ResizablePane } from "$lib/registry/ui/resizable/index.js";
 	import { CopyToClipboard } from "$lib/utils/copy-to-clipboard.svelte.js";
-	import { getCommand, getPackageManager } from "$lib/stores/package-manager.js";
+	import { PackageManagerContext, getCommand } from "$lib/package-manager.js";
 
 	let { block, resizablePaneRef }: { block: Block; resizablePaneRef: ResizablePane } = $props();
 
 	const copier = new CopyToClipboard();
-	const selectedPackageManager = getPackageManager();
+	const pm = PackageManagerContext.get();
 
 	const addCommand = $derived(
-		getCommand($selectedPackageManager, "execute", `shadcn-svelte@next add ${block.name}`)
+		getCommand(pm.current, "execute", `shadcn-svelte@next add ${block.name}`)
 	);
 
 	const command = $derived(addCommand.command + " " + addCommand.args.join(" "));
@@ -30,7 +30,7 @@
 </script>
 
 <div class="flex items-center gap-2 md:gap-4">
-	<Button href={`#${block.name}`} variant="link" class="whitespace-normal px-1 md:px-2">
+	<Button href="#{block.name}" variant="link" class="whitespace-normal px-1 md:px-2">
 		{block.description}
 	</Button>
 	<div class="ml-auto hidden items-center gap-2 md:flex md:pr-[14px]">
@@ -87,7 +87,7 @@
 					variant="ghost"
 					class="h-[22px] w-[22px] rounded-sm p-0"
 					title="Open in New Tab"
-					href={`/blocks/${block.name}`}
+					href="/blocks/{block.name}"
 					target="_blank"
 				>
 					<span class="sr-only">Open in New Tab</span>

sites/docs/src/lib/components/docs/block-viewer-toolbar.svelte

@@ -11,16 +11,16 @@
 	import FullscreenIcon from "@lucide/svelte/icons/fullscreen";
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import TerminalIcon from "@lucide/svelte/icons/terminal";
-	import { getCommand, getPackageManager } from "$lib/stores/package-manager.js";
+	import { getCommand, PackageManagerContext } from "$lib/package-manager.js";
 
 	const ctx = BlockViewerContext.get();
 
 	const clipboard = new UseClipboard();
 
-	const agent = getPackageManager();
+	const pm = PackageManagerContext.get();
 
 	const addCommand = $derived(
-		getCommand($agent, "execute", `shadcn-svelte@next add ${ctx.item.name}`)
+		getCommand(pm.current, "execute", `shadcn-svelte@next add ${ctx.item.name}`)
 	);
 
 	const command = $derived(addCommand.command + " " + addCommand.args.join(" "));
@@ -40,7 +40,7 @@
 		</Tabs.List>
 	</Tabs.Root>
 	<Separator orientation="vertical" class="mx-2 hidden !h-4 lg:flex" />
-	<a href={`#${ctx.item.name}`} class="text-sm font-medium underline-offset-2 hover:underline">
+	<a href="#{ctx.item.name}" class="text-sm font-medium underline-offset-2 hover:underline">
 		{ctx.item.description}
 	</a>
 	<div class="ml-auto hidden items-center gap-2 md:flex">

sites/docs/src/lib/components/docs/component-preview-manual.svelte

@@ -21,21 +21,21 @@
 {#if type === "block"}
 	<div class="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
 		<img
-			src={`/images/blocks/${name}.png`}
+			src="/images/blocks/{name}.png"
 			alt={name}
 			width={1440}
 			height={900}
 			class="bg-background absolute left-0 top-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
 		/>
 		<img
-			src={`/images/blocks/${name}-dark.png`}
+			src="/images/blocks/{name}-dark.png"
 			alt={name}
 			width={1440}
 			height={900}
 			class="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
 		/>
 		<div class="bg-background absolute inset-0 hidden w-[1600px] md:block">
-			<iframe {title} src={`/blocks/${name}`} class="size-full"></iframe>
+			<iframe {title} src="/view/{name}" class="size-full"></iframe>
 		</div>
 	</div>
 {:else}

sites/docs/src/lib/components/docs/nav/main-nav.svelte

@@ -28,7 +28,7 @@
 			href="/docs/components"
 			class={cn(
 				"hover:text-foreground/80 transition-colors",
-				page.url.pathname?.startsWith("/docs/components") &&
+				page.url.pathname?.startsWith("/docs/components/") &&
 					!page.url.pathname?.startsWith("/docs/component/chart")
 					? "text-foreground"
 					: "text-foreground/80"

sites/docs/src/lib/components/docs/pm-block.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-	import {
-		getCommand,
-		getPackageManager,
-		PACKAGE_MANAGERS,
-	} from "$lib/stores/package-manager.js";
 	import type { Command } from "package-manager-detector";
 	import ClipboardIcon from "@lucide/svelte/icons/clipboard";
 	import CopyButton from "./copy-button.svelte";
+	import { getCommand, PACKAGE_MANAGERS, PackageManagerContext } from "$lib/package-manager.js";
 
 	const {
 		type,
@@ -16,9 +12,9 @@
 		command: string | string[];
 	} = $props();
 
-	const agent = getPackageManager();
+	const pm = PackageManagerContext.get();
 
-	const cmd = $derived(getCommand($agent, type, command));
+	const cmd = $derived(getCommand(pm.current, type, command));
 
 	const commandText = $derived(`${cmd.command} ${cmd.args.join(" ")}`);
 </script>
@@ -29,17 +25,17 @@
 			class="flex place-items-end justify-between rounded-lg border-b border-zinc-800 bg-zinc-900 p-2 pb-0"
 		>
 			<div class="flex place-items-center gap-1">
-				{#each PACKAGE_MANAGERS as pm (pm)}
+				{#each PACKAGE_MANAGERS as packageManager (packageManager)}
 					<button
 						type="button"
 						class={{
 							"-mb-0.5 border-b p-1 font-mono text-sm": true,
-							"border-b-zinc-50 text-zinc-50": $agent === pm,
-							"border-transparent text-zinc-400": $agent !== pm,
+							"border-b-zinc-50 text-zinc-50": pm.current === packageManager,
+							"border-transparent text-zinc-400": pm.current !== packageManager,
 						}}
-						onclick={() => ($agent = pm)}
+						onclick={() => (pm.current = packageManager)}
 					>
-						{pm}
+						{packageManager}
 					</button>
 				{/each}
 			</div>

sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte

@@ -26,17 +26,19 @@
 </script>
 
 <script lang="ts">
-	import { config } from "$lib/stores/index.js";
+	import { ConfigContext } from "$lib/config-state.js";
 	import ThemeWrapper from "$lib/components/docs/theme-wrapper.svelte";
 	import { UseClipboard } from "$lib/hooks/use-clipboard.svelte.js";
 	import { baseColorsOKLCH } from "$lib/registry/registry-base-colors.js";
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import ClipboardIcon from "@lucide/svelte/icons/clipboard";
 	import { Button } from "$lib/registry/ui/button/index.js";
 
+	const config = ConfigContext.get();
+
 	const clipboard = new UseClipboard();
 	const activeThemeOKLCH = $derived(
-		baseColorsOKLCH[$config.theme as keyof typeof baseColorsOKLCH]
+		baseColorsOKLCH[config.current.theme as keyof typeof baseColorsOKLCH]
 	);
 </script>
 
@@ -45,7 +47,7 @@
 		size="sm"
 		variant="outline"
 		onclick={() => {
-			clipboard.copy(getThemeCodeOKLCH(activeThemeOKLCH, $config.radius));
+			clipboard.copy(getThemeCodeOKLCH(activeThemeOKLCH, config.current.radius));
 		}}
 		class="absolute right-0 top-0 shadow-none"
 	>
@@ -61,7 +63,7 @@
 			class="flex max-h-[450px] flex-col overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
 			<code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
 			  <span class="line text-white">&nbsp;:root &#123;</span>
-			  <span class="line text-white">&nbsp;&nbsp;&nbsp;--radius: {$config.radius}rem;</span>
+			  <span class="line text-white">&nbsp;&nbsp;&nbsp;--radius: {config.current.radius}rem;</span>
 			  {#each Object.entries(activeThemeOKLCH?.light) as [key, value] (key)}
 					<span class="line text-white">&nbsp;&nbsp;&nbsp;--{key}: {value};</span>
 				{/each}

sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { mode } from "mode-watcher";
-	import { config } from "$lib/stores/index.js";
+	import { ConfigContext } from "$lib/config-state.js";
 	import { Button } from "$lib/registry/ui/button/index.js";
 	import ThemeWrapper from "$lib/components/docs/theme-wrapper.svelte";
 	import { Label } from "$lib/registry/ui/label/index.js";
@@ -12,6 +12,7 @@
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import { Skeleton } from "$lib/registry/ui/skeleton/index.js";
 
+	const config = ConfigContext.get();
 	const isMounted = new IsMounted();
 </script>
 
@@ -23,13 +24,13 @@
 			<Label class="sr-only text-xs">Color</Label>
 			<div class="flex flex-wrap gap-1 md:gap-2">
 				{#each baseColors.filter((theme) => !["slate", "stone", "gray", "neutral"].includes(theme.name)) as theme (theme.name)}
-					{@const isActive = $config.theme === theme.name}
+					{@const isActive = config.current.theme === theme.name}
 					{#if isMounted.current}
 						<Button
 							variant="outline"
 							size="sm"
 							onclick={() => {
-								config.update((c) => ({ ...c, theme: theme.name }));
+								config.current.theme = theme.name;
 							}}
 							class={cn(
 								"w-[32px] rounded-lg lg:px-2.5 xl:w-[86px]",
@@ -67,11 +68,11 @@
 						variant="outline"
 						size="sm"
 						onclick={() => {
-							config.update((c) => ({ ...c, radius: parseFloat(value) }));
+							config.current.radius = parseFloat(value);
 						}}
 						class={cn(
 							"w-[40px] rounded-lg",
-							$config.radius === parseFloat(value) &&
+							config.current.radius === parseFloat(value) &&
 								"border-primary/50 ring-primary/30 ring-[2px]"
 						)}
 					>