@baybreezy/docd 0.0.1

package/app/components/docs/DocsNav.vue

@@ -0,0 +1,161 @@
+<template>
+  <nav class="flex flex-col gap-4 sm:text-sm">
+    <!-- Non-nested: group consecutive flat items so each group gets a shared vertical line -->
+    <template v-if="!nested">
+      <template v-for="(group, gi) in groups" :key="gi">
+        <!-- Flat group: vertical line + curves -->
+        <div
+          v-if="group.type === 'flat'"
+          class="relative flex flex-col gap-4 pt-1 pl-8 before:absolute before:left-2 before:h-[calc(100%-23px)] before:w-px before:bg-border dark:before:bg-accent"
+        >
+          <div
+            v-for="(item, i) in group.items"
+            :key="i"
+            class="relative flex items-center gap-4 first:mt-2"
+          >
+            <NuxtLink
+              class="group line-clamp-1 flex shrink-0 items-center gap-2 text-base text-ellipsis text-muted-foreground sm:text-sm"
+              :class="[
+                'before:absolute before:-left-6 before:-mt-4 before:size-4 before:rounded-bl-md before:border-b before:border-l before:border-border dark:before:border-accent',
+              ]"
+              exact-active-class="text-primary"
+              :to="item.path"
+              :title="item.title"
+              :target="item.target ? (item.target as string) : '_self'"
+            >
+              <Icon
+                v-if="item.icon && typeof item.icon === 'string'"
+                :name="item.icon"
+                class="size-4"
+              />
+              <div class="relative">
+                {{ item.title }}
+                <div
+                  class="absolute bottom-0 left-0 h-px w-full bg-linear-to-r from-transparent via-primary to-transparent group-hover:scale-x-100"
+                  :class="[
+                    'transition-all duration-300',
+                    route.path === item.path ? 'scale-x-100' : 'scale-x-0',
+                  ]"
+                ></div>
+              </div>
+            </NuxtLink>
+            <UiBadge
+              v-if="item.label"
+              class="rounded-sm text-xs md:text-[10px] dark:bg-lime-600 dark:text-white"
+              >{{ item.label }}</UiBadge
+            >
+          </div>
+        </div>
+
+        <!-- Collapsible item -->
+        <UiCollapsible
+          v-else
+          :default-open="route.path.includes(group.item.path)"
+          class="flex flex-col border-b pb-4"
+          :class="[
+            isDashed ? 'border-dashed' : '',
+            gi > 0 && groups[gi - 1]?.type === 'flat' ? 'border-t pt-4' : '',
+          ]"
+        >
+          <UiCollapsibleTrigger
+            class="group inline-flex items-center gap-2 rounded-sm p-2 pl-2.5 text-foreground/70 transition-all duration-300 hover:bg-accent/50 hover:text-foreground/90 data-[state=open]:text-foreground/90"
+          >
+            <Icon
+              v-if="group.item.icon && typeof group.item.icon === 'string'"
+              :name="group.item.icon"
+              class="size-4"
+            />
+            <p class="text-sm font-semibold">{{ group.item.title }}</p>
+            <Icon
+              name="lucide:chevron-down"
+              class="ms-auto size-4 text-muted-foreground/50 transition-transform group-data-[state=open]:rotate-180"
+            />
+          </UiCollapsibleTrigger>
+
+          <UiCollapsibleContent class="flex flex-col gap-1 pl-2">
+            <div
+              class="relative pt-1 pl-8 before:absolute before:left-2 before:h-[calc(100%-23px)] before:w-px before:bg-border dark:before:bg-accent"
+            >
+              <DocsNav class="gap-4 first:mt-2" :items="group.item.children!" :nested="true" />
+            </div>
+          </UiCollapsibleContent>
+        </UiCollapsible>
+      </template>
+    </template>
+
+    <!-- Nested (inside a collapsible): parent already provides the vertical line, just render links -->
+    <template v-for="(item, i) in items" v-else :key="i">
+      <div class="relative flex items-center gap-4">
+        <NuxtLink
+          class="group line-clamp-1 flex shrink-0 items-center gap-2 text-base text-ellipsis text-muted-foreground sm:text-sm"
+          :class="[
+            'before:absolute before:-left-6 before:-mt-4 before:size-4 before:rounded-bl-md before:border-b before:border-l before:border-border dark:before:border-accent',
+          ]"
+          exact-active-class="text-primary"
+          :to="item.path"
+          :title="item.title"
+          :target="item.target ? (item.target as string) : '_self'"
+        >
+          <Icon
+            v-if="item.icon && typeof item.icon === 'string'"
+            :name="item.icon"
+            class="size-4"
+          />
+          <div class="relative">
+            {{ item.title }}
+            <div
+              class="absolute bottom-0 left-0 h-px w-full bg-linear-to-r from-transparent via-primary to-transparent group-hover:scale-x-100"
+              :class="[
+                'transition-all duration-300',
+                route.path === item.path ? 'scale-x-100' : 'scale-x-0',
+              ]"
+            ></div>
+          </div>
+        </NuxtLink>
+        <UiBadge
+          v-if="item.label"
+          class="rounded-sm text-xs md:text-[10px] dark:bg-lime-600 dark:text-white"
+          >{{ item.label }}</UiBadge
+        >
+      </div>
+    </template>
+  </nav>
+</template>
+<script lang="ts" setup>
+  import type { ContentNavigationItem } from "@nuxt/content";
+
+  const props = defineProps<{
+    items: ContentNavigationItem[];
+    nested?: boolean;
+  }>();
+
+  const route = useRoute();
+  const { isDashed } = useDocd();
+
+  type Group =
+    | { type: "flat"; items: ContentNavigationItem[] }
+    | { type: "collapsible"; item: ContentNavigationItem };
+
+  // Group consecutive flat items together so they share one vertical line container.
+  // Collapsible items (folders) stay as individual entries in their original order.
+  const groups = computed<Group[]>(() => {
+    const result: Group[] = [];
+    let currentFlat: ContentNavigationItem[] = [];
+
+    for (const item of props.items) {
+      if (item.children) {
+        if (currentFlat.length > 0) {
+          result.push({ type: "flat", items: currentFlat });
+          currentFlat = [];
+        }
+        result.push({ type: "collapsible", item });
+      } else {
+        currentFlat.push(item);
+      }
+    }
+    if (currentFlat.length > 0) {
+      result.push({ type: "flat", items: currentFlat });
+    }
+    return result;
+  });
+</script>

package/app/components/docs/DocsPageTransition.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="w-full min-w-0 overflow-x-clip"
+    :class="[isAnimating && 'pointer-events-none overflow-clip']"
+  >
+    <AnimatePresence mode="wait" @exit-complete="isAnimating = false">
+      <Motion
+        :key="route.path"
+        :initial="preset.initial"
+        :animate="animate"
+        :exit="preset.exit"
+        :transition="{ duration, ease: easing }"
+        style="width: 100%; min-width: 0"
+      >
+        <slot />
+      </Motion>
+    </AnimatePresence>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const route = useRoute();
+  const { preset, animate, duration, easing } = useDocd();
+
+  const isAnimating = ref(false);
+  watch(
+    () => route.path,
+    () => {
+      isAnimating.value = true;
+    }
+  );
+</script>

package/app/components/docs/DocsSearch.vue

@@ -0,0 +1,220 @@
+<template>
+  <UiCommandDialog :key="dialogKey" v-model:open="searchModal" show-close-button highlight-on-hover>
+    <UiDialogTitle class="sr-only">Documentation search modal</UiDialogTitle>
+    <UiDialogDescription class="sr-only">
+      Search the documentation for components, utilities, and more.
+    </UiDialogDescription>
+
+    <UiCommandInput placeholder="Search..." @update:model-value="updateSearchTerm" />
+
+    <UiCommandList>
+      <UiCommandEmpty>No results found.</UiCommandEmpty>
+      <UiCommandGroup v-if="contentResults.length" heading="Content">
+        <UiCommandItem
+          v-for="section in contentResults"
+          :key="section.id"
+          class="items-start px-3 py-2"
+          :value="section.id"
+          @select="
+            $event.preventDefault();
+            navigateTo(section.id);
+            searchModal = false;
+          "
+        >
+          <Icon
+            :name="section.id.includes('#') ? 'lucide:heading' : 'lucide:file-text'"
+            class="mt-0.5 size-4 shrink-0 text-muted-foreground/70"
+          />
+          <div class="min-w-0 flex-1">
+            <p class="truncate font-medium text-foreground">{{ section.title }}</p>
+            <p v-if="getSectionContext(section)" class="truncate text-xs text-muted-foreground">
+              {{ getSectionContext(section) }}
+            </p>
+            <p v-if="section.content" class="line-clamp-2 text-xs text-muted-foreground">
+              {{ getSectionSnippet(section.content) }}
+            </p>
+            <span class="sr-only">
+              {{ section.title }} {{ section.titles.join(" ") }} {{ section.content }}
+              {{ section.id }}
+            </span>
+          </div>
+        </UiCommandItem>
+      </UiCommandGroup>
+
+      <UiCommandSeparator v-if="contentResults.length" />
+
+      <template v-for="(nav, i) in navigation" :key="i">
+        <!-- Nav item with children → group -->
+        <UiCommandGroup v-if="nav.children?.length" :heading="nav.title">
+          <UiCommandItem
+            v-for="(child, k) in nav.children"
+            :key="k"
+            class="px-3 py-2"
+            :value="child.title"
+            @select="
+              $event.preventDefault();
+              navigateTo(child.path);
+              searchModal = false;
+            "
+          >
+            <Icon
+              :name="(child.icon as string) || (nav.icon as string) || 'lucide:file-text'"
+              class="size-4 shrink-0 text-muted-foreground/70"
+            />
+            <span class="flex-1 truncate">{{ child.title }}</span>
+            <UiBadge
+              v-if="(child as any).label"
+              variant="outline"
+              class="ml-2 shrink-0 px-1.5 py-0 text-[10px] dark:bg-lime-500/20 dark:text-lime-400"
+              >{{ (child as any).label }}</UiBadge
+            >
+          </UiCommandItem>
+        </UiCommandGroup>
+
+        <!-- Nav item without children → flat link -->
+        <UiCommandGroup v-else class="py-0">
+          <UiCommandItem
+            class="px-3 py-2"
+            :value="nav.title"
+            @select="
+              $event.preventDefault();
+              navigateTo(nav.path);
+              searchModal = false;
+            "
+          >
+            <Icon name="lucide:link" class="size-4 shrink-0 text-muted-foreground/70" />
+            <span class="flex-1 truncate">{{ nav.title }}</span>
+            <UiBadge
+              v-if="(nav as any).label"
+              variant="outline"
+              class="ml-2 shrink-0 px-1.5 py-0 text-[10px] dark:bg-lime-500/20 dark:text-lime-400"
+              >{{ (nav as any).label }}</UiBadge
+            >
+          </UiCommandItem>
+        </UiCommandGroup>
+      </template>
+
+      <UiCommandSeparator />
+
+      <UiCommandGroup heading="Theme">
+        <UiCommandItem
+          v-for="(mode, i) in modes"
+          :key="i"
+          class="px-3 py-2"
+          :value="mode.value"
+          @select="setTheme($event, mode.value)"
+        >
+          <Icon :name="mode.icon" class="size-4 shrink-0 text-muted-foreground/70" />
+          <span>{{ mode.title }}</span>
+        </UiCommandItem>
+      </UiCommandGroup>
+    </UiCommandList>
+
+    <UiCommandFooter />
+  </UiCommandDialog>
+</template>
+
+<script lang="ts" setup>
+  import type { DocSearchSection } from "../../composables/useDocSearch";
+
+  const modes = [
+    { icon: "lucide:sun", title: "Light", value: "light" },
+    { icon: "lucide:moon", title: "Dark", value: "dark" },
+    { icon: "lucide:laptop", title: "System", value: "system" },
+  ];
+
+  const { navigation } = await useDocPage();
+  const { data: searchSections } = useDocSearchSections();
+  const searchModal = useSearchModal();
+  const colorMode = useColorMode();
+  const searchTerm = ref("");
+  const dialogKey = ref(0);
+
+  const setTheme = (e: Event, val: string) => {
+    e.preventDefault();
+    colorMode.preference = val;
+    searchModal.value = false;
+  };
+
+  const updateSearchTerm = (value: string | number | undefined) => {
+    searchTerm.value = `${value ?? ""}`;
+  };
+
+  const searchTokens = computed(() =>
+    searchTerm.value
+      .trim()
+      .toLowerCase()
+      .split(/\s+/)
+      .map((token) => token.trim())
+      .filter(Boolean)
+  );
+
+  function scoreSection(section: DocSearchSection, tokens: string[]) {
+    if (!tokens.length) return 0;
+
+    const title = section.title.toLowerCase();
+    const headings = section.titles.join(" ").toLowerCase();
+    const content = section.content.toLowerCase();
+    const id = section.id.toLowerCase();
+
+    let score = 0;
+    for (const token of tokens) {
+      let tokenScore = 0;
+
+      if (title.includes(token)) tokenScore = Math.max(tokenScore, 6);
+      if (headings.includes(token)) tokenScore = Math.max(tokenScore, 4);
+      if (id.includes(token)) tokenScore = Math.max(tokenScore, 3);
+      if (content.includes(token)) tokenScore = Math.max(tokenScore, 2);
+
+      if (!tokenScore) return 0;
+      score += tokenScore;
+    }
+
+    if (!section.id.includes("#")) score += 1;
+    return score;
+  }
+
+  const contentResults = computed(() => {
+    if (!searchTokens.value.length) return [];
+
+    return [...(searchSections.value ?? [])]
+      .map((section) => ({ section, score: scoreSection(section, searchTokens.value) }))
+      .filter((entry) => entry.score > 0)
+      .sort(
+        (a, b) =>
+          b.score - a.score ||
+          a.section.level - b.section.level ||
+          a.section.title.localeCompare(b.section.title)
+      )
+      .slice(0, 30)
+      .map((entry) => entry.section);
+  });
+
+  function getSectionContext(section: DocSearchSection) {
+    if (section.titles.length) return section.titles.join(" / ");
+    const path = section.id.split("#")[0] || "";
+    return path.replace(/^\//, "").replace(/\//g, " / ");
+  }
+
+  function getSectionSnippet(content: string) {
+    const cleaned = content.replace(/\s+/g, " ").trim();
+    return cleaned.length > 160 ? `${cleaned.slice(0, 157)}...` : cleaned;
+  }
+
+  const { meta_k } = useMagicKeys();
+  watch(
+    () => meta_k?.value,
+    (val) => {
+      if (val) {
+        searchModal.value = !searchModal.value;
+      }
+    }
+  );
+
+  watch(searchModal, (open) => {
+    if (!open) {
+      searchTerm.value = "";
+      dialogKey.value += 1;
+    }
+  });
+</script>

package/app/components/docs/DocsSearchButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <UiTooltip>
+    <UiTooltipTrigger as-child>
+      <UiButton
+        size="icon-sm"
+        variant="ghost"
+        class="size-7"
+        @click="searchModal = true"
+        title="Search documentation"
+      >
+        <Icon name="lucide:search" />
+      </UiButton>
+    </UiTooltipTrigger>
+    <UiTooltipContent> Click to search </UiTooltipContent>
+  </UiTooltip>
+</template>
+
+<script lang="ts" setup>
+  const searchModal = useSearchModal();
+</script>

package/app/components/docs/DocsThemeCustomizer.vue

@@ -0,0 +1,229 @@
+<template>
+  <UiPopover>
+    <UiTooltip>
+      <UiTooltipTrigger as-child>
+        <UiPopoverTrigger as-child>
+          <UiButton size="icon-sm" variant="ghost">
+            <Icon name="lucide:palette" />
+          </UiButton>
+        </UiPopoverTrigger>
+      </UiTooltipTrigger>
+      <UiPopoverContent
+        translucent
+        class="w-auto overflow-y-auto p-4"
+        side="right"
+        align="end"
+        :side-offset="8"
+      >
+        <DefineBgActive v-slot="{ active }">
+          <AnimatePresence>
+            <Motion
+              v-if="active"
+              class="absolute inset-0 rounded-md bg-linear-to-b from-foreground/10 via-foreground/5"
+              :initial="{ opacity: 0, scaleY: 0, transformOrigin: 'top left', scaleX: 0 }"
+              :animate="{ opacity: 1, scaleY: 1, scaleX: 1 }"
+              :exit="{ opacity: 0, scaleY: 0, scaleX: 0 }"
+              :transition="{ duration: 0.2, ease: 'easeOut' }"
+            />
+          </AnimatePresence>
+        </DefineBgActive>
+
+        <!-- Header -->
+        <div class="grid space-y-1">
+          <h1 class="text-base font-semibold text-foreground">Customize</h1>
+          <p class="text-sm text-muted-foreground">Pick a style and color for your components.</p>
+        </div>
+
+        <!-- Color -->
+        <div class="space-y-1.5 pt-6">
+          <UiLabel class="text-sm font-semibold">Color</UiLabel>
+          <RovingFocusGroup loop class="grid grid-cols-3 gap-2 py-1.5">
+            <RovingFocusItem v-for="t in themes" :key="t.value" as-child>
+              <UiButton
+                variant="outline"
+                size="sm"
+                class="group relative justify-start overflow-hidden bg-transparent px-3 transition-all duration-200"
+                :style="{
+                  borderColor: activeTheme === t.value ? 'var(--primary)' : 'var(--border)',
+                }"
+                @click="setTheme(t.value)"
+              >
+                <BgActive :active="activeTheme === t.value" />
+                <span class="relative flex items-center gap-2">
+                  <span
+                    class="flex size-5 shrink-0 items-center justify-center rounded-full ring-1 ring-border/60 transition-transform duration-200"
+                    :class="
+                      activeTheme === t.value ? 'scale-110' : 'scale-100 group-hover:scale-105'
+                    "
+                    :style="{ backgroundColor: t.color }"
+                  >
+                    <AnimatePresence>
+                      <Motion
+                        v-if="activeTheme === t.value"
+                        :initial="{ scale: 0, opacity: 0 }"
+                        :animate="{ scale: 1, opacity: 1 }"
+                        :exit="{ scale: 0, opacity: 0 }"
+                        :transition="{ duration: 0.2, delay: 0.1, ease: 'backOut' }"
+                      >
+                        <Icon name="lucide:check" class="size-3 text-white" />
+                      </Motion>
+                    </AnimatePresence>
+                  </span>
+                  <span class="text-xs capitalize">{{ t.label }}</span>
+                </span>
+              </UiButton>
+            </RovingFocusItem>
+          </RovingFocusGroup>
+        </div>
+
+        <!-- Radius -->
+        <div class="space-y-1.5 pt-4">
+          <UiLabel class="text-sm font-semibold">Radius</UiLabel>
+          <RovingFocusGroup loop class="grid grid-cols-5 gap-2 py-1.5">
+            <RovingFocusItem v-for="r in radii" :key="r.value" as-child>
+              <UiButton
+                variant="outline"
+                size="sm"
+                class="group relative justify-start overflow-hidden bg-transparent px-3 transition-all duration-200"
+                :style="{
+                  borderColor: activeRadius === r.value ? 'var(--primary)' : 'var(--border)',
+                }"
+                @click="setRadius(r.value)"
+              >
+                <BgActive :active="activeRadius === r.value" />
+                <Motion
+                  class="relative text-xs"
+                  :initial="false"
+                  :animate="{ scale: activeRadius === r.value ? 1.05 : 1 }"
+                  :transition="{ duration: 0.2, ease: 'easeOut' }"
+                >
+                  {{ r.label }}
+                </Motion>
+              </UiButton>
+            </RovingFocusItem>
+          </RovingFocusGroup>
+        </div>
+
+        <!-- Theme / Mode -->
+        <div class="space-y-1.5 pt-4">
+          <UiLabel class="text-sm font-semibold">Theme</UiLabel>
+          <RovingFocusGroup loop class="flex space-x-2 py-1.5">
+            <RovingFocusItem as-child>
+              <UiButton
+                variant="outline"
+                size="sm"
+                class="group relative justify-start overflow-hidden bg-transparent px-3 transition-all duration-200"
+                :style="{
+                  borderColor: colorMode.value === 'light' ? 'var(--primary)' : 'var(--border)',
+                }"
+                @click="setMode('light')"
+              >
+                <BgActive :active="colorMode.value === 'light'" />
+                <span class="relative flex items-center justify-center">
+                  <Icon name="lucide:sun" class="mr-2 size-4" />
+                  <span class="text-xs">Light</span>
+                </span>
+              </UiButton>
+            </RovingFocusItem>
+            <RovingFocusItem as-child>
+              <UiButton
+                variant="outline"
+                size="sm"
+                class="group relative justify-start overflow-hidden bg-transparent px-3 transition-all duration-200"
+                :style="{
+                  borderColor: colorMode.value === 'dark' ? 'var(--primary)' : 'var(--border)',
+                }"
+                @click="setMode('dark')"
+              >
+                <BgActive :active="colorMode.value === 'dark'" />
+                <span class="relative flex items-center justify-center">
+                  <Icon name="lucide:moon" class="mr-2 size-4" />
+                  <span class="text-xs">Dark</span>
+                </span>
+              </UiButton>
+            </RovingFocusItem>
+          </RovingFocusGroup>
+        </div>
+      </UiPopoverContent>
+      <UiTooltipContent> Customize theme </UiTooltipContent>
+    </UiTooltip>
+  </UiPopover>
+</template>
+
+<script lang="ts" setup>
+  import { RovingFocusGroup, RovingFocusItem } from "reka-ui";
+
+  const [DefineBgActive, BgActive] = createReusableTemplate<{ active: boolean }>({
+    inheritAttrs: false,
+  });
+
+  const colorMode = useColorMode();
+
+  const themes = [
+    { label: "Stone", value: "theme-stone", color: "oklch(0.216 0.006 56.043)" },
+    { label: "Zinc", value: "theme-zinc", color: "oklch(0.21 0.006 285.885)" },
+    { label: "Neutral", value: "theme-neutral", color: "oklch(0.205 0 0)" },
+    { label: "Gray", value: "theme-gray", color: "oklch(0.21 0.034 264.665)" },
+    { label: "Slate", value: "theme-slate", color: "oklch(0.208 0.042 265.755)" },
+    { label: "Red", value: "theme-red", color: "oklch(0.637 0.237 25.331)" },
+    { label: "Rose", value: "theme-rose", color: "oklch(0.645 0.246 16.439)" },
+    { label: "Orange", value: "theme-orange", color: "oklch(0.705 0.213 47.604)" },
+    { label: "Green", value: "theme-green", color: "oklch(0.723 0.219 149.579)" },
+    { label: "Blue", value: "theme-blue", color: "oklch(0.623 0.214 259.815)" },
+    { label: "Yellow", value: "theme-yellow", color: "oklch(0.795 0.184 86.047)" },
+    { label: "Violet", value: "theme-violet", color: "oklch(0.606 0.25 292.717)" },
+    { label: "Nuxt", value: "theme-nuxt", color: "oklch(0.79 0.19 155.63)" },
+    { label: "Mauve", value: "theme-mauve", color: "oklch(0.212 0.019 322.12)" },
+    { label: "Olive", value: "theme-olive", color: "oklch(0.228 0.013 107.4)" },
+    { label: "Mist", value: "theme-mist", color: "oklch(0.218 0.008 223.9)" },
+    { label: "Taupe", value: "theme-taupe", color: "oklch(0.214 0.009 43.1)" },
+  ];
+
+  const radii = [
+    { label: "0", value: "0rem" },
+    { label: "0.25", value: "0.25rem" },
+    { label: "0.5", value: "0.5rem" },
+    { label: "0.625", value: "0.625rem" },
+    { label: "0.75", value: "0.75rem" },
+    { label: "1", value: "1rem" },
+  ];
+
+  const THEME_KEY = "docs-color-theme";
+  const RADIUS_KEY = "docs-radius";
+
+  const activeTheme = ref("theme-zinc");
+  const activeRadius = ref("0.625rem");
+
+  onMounted(() => {
+    const savedTheme = localStorage.getItem(THEME_KEY);
+    const savedRadius = localStorage.getItem(RADIUS_KEY);
+    if (savedTheme) applyTheme(savedTheme, false);
+    if (savedRadius) applyRadius(savedRadius, false);
+  });
+
+  function applyTheme(value: string, save = true) {
+    themes.forEach((t) => document.documentElement.classList.remove(t.value));
+    document.documentElement.classList.add(value);
+    activeTheme.value = value;
+    if (save) localStorage.setItem(THEME_KEY, value);
+  }
+
+  function applyRadius(value: string, save = true) {
+    document.documentElement.style.setProperty("--radius", value);
+    activeRadius.value = value;
+    if (save) localStorage.setItem(RADIUS_KEY, value);
+  }
+
+  function setTheme(value: string) {
+    applyTheme(value);
+  }
+
+  function setRadius(value: string) {
+    applyRadius(value);
+  }
+
+  function setMode(value: string) {
+    document.documentElement.classList.toggle("dark", value === "dark");
+    colorMode.preference = value;
+  }
+</script>