@lupinum/ginko-docs 0.4.0-rc.8 → 0.4.0

package/app/features/docs/components/DocsPageContent.vue

@@ -1,234 +0,0 @@
-<script setup lang="ts">
-import {
-  filterTocByDepth,
-  flattenTocLinks,
-  formatContentDate,
-  getMarkdownTocLinks,
-} from "#ginko-docs/utils/content";
-import ContentFeedback from "#ginko-docs/components/content/Feedback.vue";
-import DocsBreadcrumb from "./DocsBreadcrumb.vue";
-import DocsMobileToc from "./DocsMobileToc.vue";
-import DocsPageNav from "./DocsPageNav.vue";
-import DocsToc from "./DocsToc.vue";
-import DocsContributeLinks from "./DocsContributeLinks.vue";
-import { computed, provide, ref, watch } from "vue";
-import { docsTocKey } from "#ginko-docs/features/docs/toc-context";
-import {
-  createError,
-  useAppConfig,
-  useContentPage,
-  useHead,
-  useI18n,
-  useRoute,
-  useSeoMeta,
-} from "#imports";
-import { useCanonicalUrl } from "#ginko-docs/composables/useCanonicalUrl";
-import { useGinkoOgImage } from "#ginko-docs/composables/useGinkoOgImage";
-import { useScrollspy } from "#ginko-docs/features/docs/composables/useScrollspy";
-import { useRevealActive } from "#ginko-docs/features/docs/composables/useRevealActive";
-import PageMarkdownCopy from "#ginko-docs/components/content/PageMarkdownCopy.vue";
-import { Separator } from "#ginko-docs/components/ui/separator";
-import { getLocalizedSiteText } from "#ginko-docs/config/site.utils";
-import { useSchemaJsonLd } from "#ginko-docs/composables/useSchemaJsonLd";
-import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
-import { useDocsNavigation } from "#ginko-docs/features/docs/composables/useDocsNavigation";
-import { useContentRouteAlternates } from "#ginko-docs/composables/useContentRouteAlternates";
-
-type DocsNavLink = {
-  path: string;
-  title: string;
-};
-
-function toDocsNavLink(
-  item: { path?: string; title?: string } | null | undefined,
-): DocsNavLink | null {
-  return item?.path && item?.title ? { path: item.path, title: item.title } : null;
-}
-
-const { locale, t } = useI18n();
-const config = useAppConfig().ginkoDocs;
-const route = useRoute();
-const localizedPath = useLocalizedPath();
-const canonicalUrl = useCanonicalUrl();
-const { sync: syncContentRouteAlternates } = useContentRouteAlternates();
-const contentPageResult = useContentPage("docs", {
-  fallback: true,
-  surround: true,
-});
-const docsNavigationResult = useDocsNavigation();
-const [{ page, previous, next: nextContent, error }, { trail }] = await Promise.all([
-  contentPageResult,
-  docsNavigationResult,
-]);
-if (error.value) throw error.value;
-if (!page.value) throw createError({ statusCode: 404, statusMessage: "Not Found" });
-syncContentRouteAlternates(page);
-
-const siteName = computed(() => getLocalizedSiteText(config.site.name, locale.value));
-const pageTitle = computed(() => page.value?.title ?? t("docs.fallbackTitle"));
-const pageDescription = computed(() => page.value?.description ?? t("docs.fallbackDescription"));
-const tocItems = computed(() =>
-  filterTocByDepth(flattenTocLinks(getMarkdownTocLinks(page.value?.body)), config.toc?.depth ?? 3),
-);
-const prev = computed(() => toDocsNavLink(previous.value));
-const next = computed(() => toDocsNavLink(nextContent.value));
-const visibleTrail = computed(() => trail.value.slice(0, -1));
-const schemaBreadcrumbs = computed(() => [
-  { name: siteName.value, path: localizedPath("home") },
-  ...trail.value
-    .filter((item) => item.path)
-    .map((item) => ({ name: item.title, path: item.path! })),
-]);
-provide(docsTocKey, tocItems);
-const { activeIds, refresh } = useScrollspy(computed(() => tocItems.value.map((item) => item.id)));
-
-watch(tocItems, () => {
-  void refresh();
-});
-
-// Keep the active TOC region visible when a long TOC overflows the sticky
-// aside.
-const tocAside = ref<HTMLElement | null>(null);
-const { reveal: revealActiveTocLink } = useRevealActive(tocAside, "[data-toc-active]", {
-  topPad: 16,
-  bottomPad: 44,
-});
-watch(activeIds, () => {
-  requestAnimationFrame(revealActiveTocLink);
-});
-
-useSeoMeta({
-  title: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  description: pageDescription,
-  ogTitle: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  ogDescription: pageDescription,
-  ogUrl: canonicalUrl,
-  twitterCard: "summary_large_image",
-  twitterTitle: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  twitterDescription: pageDescription,
-});
-
-// Social card with the raw page title (no site-name suffix baked in).
-useGinkoOgImage({
-  title: pageTitle.value,
-  description: pageDescription.value,
-  locale: locale.value,
-});
-
-useSchemaJsonLd(() => [
-  {
-    "@type": "TechArticle",
-    headline: pageTitle.value,
-    description: pageDescription.value,
-    url: canonicalUrl.value,
-    inLanguage: locale.value,
-    dateModified: page.value?.updated,
-    isPartOf: { "@type": "WebSite", name: siteName.value, url: config.site.url },
-    publisher: { "@type": "Organization", name: siteName.value, url: config.site.url },
-  },
-  {
-    "@type": "BreadcrumbList",
-    itemListElement: schemaBreadcrumbs.value.map((item, index) => ({
-      "@type": "ListItem",
-      position: index + 1,
-      name: item.name,
-      item: new URL(item.path, config.site.url).toString(),
-    })),
-  },
-]);
-
-useHead(() => ({
-  link: [{ key: "canonical", rel: "canonical", href: canonicalUrl.value }],
-  meta: [{ property: "og:type", content: "article" }],
-}));
-
-function scrollToTop() {
-  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  window.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
-}
-</script>
-
-<template>
-  <div class="flex min-w-0 flex-1 flex-col xl:flex-row">
-    <div class="flex min-w-0 flex-1 flex-col">
-      <DocsMobileToc
-        class="order-1"
-        :items="tocItems"
-        :active-ids="activeIds"
-        :page-title="pageTitle"
-      />
-
-      <main
-        id="main-content"
-        class="order-2 mx-auto w-full max-w-[72ch] flex-1 px-4 py-8 md:px-6 xl:py-14"
-      >
-        <article v-if="page">
-          <div class="flex items-start justify-between gap-4 sm:gap-6">
-            <div class="min-w-0">
-              <DocsBreadcrumb class="mb-2" :items="visibleTrail" />
-              <h1
-                class="font-heading text-[27px] leading-[1.15] font-semibold tracking-[-0.02em] text-balance text-foreground"
-              >
-                {{ page.title }}
-              </h1>
-              <p
-                v-if="page.description"
-                class="mt-2 text-base leading-[1.55] text-muted-foreground"
-              >
-                {{ page.description }}
-              </p>
-            </div>
-            <PageMarkdownCopy />
-          </div>
-          <Separator class="my-8" />
-
-          <div class="content-prose content-prose-docs">
-            <ContentRenderer :value="page" />
-          </div>
-
-          <footer class="mt-12 border-t border-border pt-6">
-            <p v-if="page.updated" class="mb-4 text-sm text-muted-foreground">
-              {{ t("docs.lastUpdated") }}:
-              <time :datetime="page.updated">{{ formatContentDate(page.updated, locale) }}</time>
-            </p>
-            <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
-              <ContentFeedback :label="t('feedback.label')" />
-              <DocsContributeLinks
-                class="xl:hidden"
-                :stem="page.stem"
-                :extension="page.extension"
-                :title="pageTitle"
-              />
-            </div>
-            <DocsPageNav class="mt-8" :prev="prev" :next="next" />
-          </footer>
-        </article>
-      </main>
-    </div>
-
-    <aside
-      ref="tocAside"
-      class="sticky top-[var(--site-header-height)] hidden h-[calc(100dvh-var(--site-header-height)-var(--site-banner-height,0px))] w-[var(--docs-toc-width)] shrink-0 flex-col overflow-y-auto pt-10 pr-4 pb-6 xl:flex"
-      :aria-label="t('docs.toc')"
-    >
-      <DocsToc class="mb-6" :items="tocItems" :active-ids="activeIds" />
-
-      <div class="mt-auto flex flex-col gap-2.5 border-t border-border/70 pt-5">
-        <DocsContributeLinks
-          variant="rail"
-          :stem="page?.stem"
-          :extension="page?.extension"
-          :title="pageTitle"
-        />
-        <button
-          type="button"
-          class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
-          @click="scrollToTop"
-        >
-          <Icon name="lucide:arrow-up" class="size-4" aria-hidden="true" />
-          {{ t("docs.backToTop") }}
-        </button>
-      </div>
-    </aside>
-  </div>
-</template>

package/app/features/docs/components/DocsPageNav.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "#imports";
-
-defineProps<{
-  prev?: { path?: string; title?: string } | null;
-  next?: { path?: string; title?: string } | null;
-}>();
-const { t } = useI18n();
-</script>
-
-<template>
-  <nav
-    v-if="prev || next"
-    class="grid grid-cols-1 gap-3 sm:grid-cols-2"
-    :aria-label="t('docs.pageNavigation')"
-  >
-    <!-- Previous -->
-    <NuxtLink
-      v-if="prev"
-      :to="prev.path"
-      class="group flex min-h-20 flex-col gap-1.5 rounded-xl border border-border bg-card px-5 py-4 transition-[border-color,background-color] duration-200 hover:border-foreground/20 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:col-start-1"
-    >
-      <span
-        class="flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors group-hover:text-foreground"
-      >
-        <Icon
-          name="lucide:chevron-left"
-          class="size-3.5 transition-transform group-hover:-translate-x-0.5"
-          aria-hidden="true"
-        />
-        {{ t("docs.previous") }}
-      </span>
-      <span class="text-sm leading-snug font-semibold text-foreground">{{ prev.title }}</span>
-    </NuxtLink>
-    <div v-else class="hidden sm:block" />
-
-    <!-- Next -->
-    <NuxtLink
-      v-if="next"
-      :to="next.path"
-      class="group flex min-h-20 flex-col items-end gap-1.5 rounded-xl border border-border bg-card px-5 py-4 text-right transition-[border-color,background-color] duration-200 hover:border-foreground/20 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:col-start-2"
-    >
-      <span
-        class="flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors group-hover:text-foreground"
-      >
-        {{ t("docs.next") }}
-        <Icon
-          name="lucide:chevron-right"
-          class="size-3.5 transition-transform group-hover:translate-x-0.5"
-          aria-hidden="true"
-        />
-      </span>
-      <span class="text-sm leading-snug font-semibold text-foreground">{{ next.title }}</span>
-    </NuxtLink>
-    <div v-else class="hidden sm:block" />
-  </nav>
-</template>

package/app/features/docs/components/DocsSidebar.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { cn } from "#ginko-docs/utils";
-import { useDocsNavigation } from "#ginko-docs/features/docs/composables/useDocsNavigation";
-import {
-  docsNavigationSectionContainsPath,
-  getDocsNavigationGroups,
-  resolveDocsSectionTargetPath,
-  type DocsNavigationSection,
-} from "#ginko-docs/features/docs/docs-navigation";
-import { ScrollArea } from "#ginko-docs/components/ui/scroll-area";
-import { useRevealActive } from "#ginko-docs/features/docs/composables/useRevealActive";
-import DocsSidebarItem from "./DocsSidebarItem.vue";
-import DocsSidebarDropdown from "./DocsSidebarDropdown.vue";
-import DocsSidebarList from "./DocsSidebarList.vue";
-import DocsSidebarTabs from "./DocsSidebarTabs.vue";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import { navigateTo, useAppConfig, useI18n, useRoute } from "#imports";
-
-const props = withDefaults(
-  defineProps<{
-    variant?: "desktop" | "drawer";
-  }>(),
-  {
-    variant: "desktop",
-  },
-);
-
-const { t } = useI18n();
-const route = useRoute();
-const sidebarSwitcher = useAppConfig().ginkoDocs.site.docsSidebarSwitcher;
-const { sections } = await useDocsNavigation();
-const switcherSections = computed(() =>
-  sections.value.filter((section): section is DocsNavigationSection & { title: string } =>
-    Boolean(section.title),
-  ),
-);
-const selectedSectionId = ref("");
-const routeSection = computed(() =>
-  sections.value.find((section) => docsNavigationSectionContainsPath(section, route.path)),
-);
-const activeSectionId = computed(
-  () => selectedSectionId.value || routeSection.value?.id || sections.value[0]?.id || "",
-);
-const activeSection = computed(
-  () => sections.value.find((section) => section.id === activeSectionId.value) ?? sections.value[0],
-);
-const groups = computed(() =>
-  activeSection.value ? getDocsNavigationGroups(activeSection.value) : [],
-);
-
-watch(
-  () => route.path,
-  () => {
-    selectedSectionId.value = "";
-  },
-);
-
-function setActiveSection(id: string) {
-  // Re-selecting the active section must not navigate away from the current page.
-  if (id === activeSectionId.value) return;
-  selectedSectionId.value = id;
-  const section = sections.value.find((entry) => entry.id === id);
-  const path = section ? resolveDocsSectionTargetPath(section) : undefined;
-  if (path) void navigateTo(path);
-}
-
-// The reduced top padding only applies under the section switcher; without it
-// the scroll mask would fade into the first group label.
-const scrollViewportClass = computed(() =>
-  cn(
-    "size-full rounded-[inherit] p-4 overscroll-contain [mask-image:linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]",
-    switcherSections.value.length > 1 && "pt-2",
-  ),
-);
-
-// Deep links can land on an item far outside the visible band — center it
-// once on mount and on section switches.
-const scrollArea = ref<{ $el?: HTMLElement } | null>(null);
-
-const { reveal: revealActiveItem } = useRevealActive(
-  () => scrollArea.value?.$el?.querySelector<HTMLElement>("[data-slot='scroll-area-viewport']"),
-  "[data-active='true']",
-);
-
-onMounted(() => {
-  void nextTick(revealActiveItem);
-});
-watch(activeSectionId, () => {
-  void nextTick(revealActiveItem);
-});
-
-const asideClass = computed(() =>
-  cn(
-    "flex h-full w-full flex-col text-sm transition-[border-color] duration-[250ms] ease-out *:w-full",
-    props.variant === "desktop"
-      ? "absolute inset-y-0 start-0 items-end border-e border-border"
-      : "relative min-h-0 items-stretch border-e-0",
-  ),
-);
-</script>
-
-<template>
-  <aside :data-variant="variant" :aria-label="t('docs.label')" :class="asideClass">
-    <div v-if="switcherSections.length > 1" class="flex flex-col gap-3 p-4 pb-2">
-      <DocsSidebarTabs
-        v-if="sidebarSwitcher === 'tabs'"
-        :sections="switcherSections"
-        :active-id="activeSectionId"
-        @update:active-id="setActiveSection"
-      />
-      <DocsSidebarDropdown
-        v-else-if="sidebarSwitcher === 'dropdown'"
-        :sections="switcherSections"
-        :active-id="activeSectionId"
-        @update:active-id="setActiveSection"
-      />
-      <DocsSidebarList
-        v-else
-        :sections="switcherSections"
-        :active-id="activeSectionId"
-        @update:active-id="setActiveSection"
-      />
-    </div>
-
-    <ScrollArea ref="scrollArea" class="min-h-0 flex-1" :viewport-class="scrollViewportClass">
-      <div class="flex min-w-full flex-col gap-0.5">
-        <template v-for="group in groups" :key="group.id">
-          <p
-            v-if="group.title"
-            data-slot="docs-sidebar-group-title"
-            class="mt-5 mb-1.5 inline-flex items-center gap-2 px-2 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase first:mt-0"
-          >
-            {{ group.title }}
-          </p>
-          <DocsSidebarItem
-            v-for="item in group.items"
-            :key="item.path ?? item.title"
-            :item="item"
-            :depth="0"
-          />
-        </template>
-      </div>
-    </ScrollArea>
-  </aside>
-</template>

package/app/features/docs/components/DocsSidebarDropdown.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import type { DocsNavigationSection } from "#ginko-docs/features/docs/docs-navigation";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "#ginko-docs/components/ui/dropdown-menu";
-
-const defaultIcon = "lucide:book-open";
-
-const props = defineProps<{
-  sections: Array<DocsNavigationSection & { title: string }>;
-  activeId: string;
-}>();
-
-const emit = defineEmits<{
-  "update:activeId": [id: string];
-}>();
-
-const activeSection = computed(
-  () => props.sections.find((section) => section.id === props.activeId) ?? props.sections[0],
-);
-
-function selectSection(value: unknown) {
-  if (typeof value === "string") emit("update:activeId", value);
-}
-</script>
-
-<template>
-  <DropdownMenu v-if="activeSection">
-    <DropdownMenuTrigger as-child>
-      <button
-        type="button"
-        class="flex h-10 w-full items-center gap-2 rounded-lg border border-border bg-background px-3 text-start text-foreground transition-colors outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
-        data-slot="docs-sidebar-dropdown"
-      >
-        <Icon
-          :name="activeSection.icon ?? defaultIcon"
-          class="size-4 shrink-0"
-          aria-hidden="true"
-        />
-        <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ activeSection.title }}</span>
-        <Icon
-          name="lucide:chevrons-up-down"
-          class="size-4 shrink-0 text-muted-foreground"
-          aria-hidden="true"
-        />
-      </button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="start" class="w-(--reka-dropdown-menu-trigger-width)">
-      <DropdownMenuRadioGroup :model-value="activeId" @update:model-value="selectSection">
-        <DropdownMenuRadioItem
-          v-for="section in sections"
-          :key="section.id"
-          :value="section.id"
-          class="gap-2"
-        >
-          <template #indicator-icon>
-            <Icon name="lucide:check" class="size-4" aria-hidden="true" />
-          </template>
-          <Icon :name="section.icon ?? defaultIcon" class="size-4 shrink-0" aria-hidden="true" />
-          <span class="truncate">{{ section.title }}</span>
-        </DropdownMenuRadioItem>
-      </DropdownMenuRadioGroup>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

package/app/features/docs/components/DocsSidebarItem.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import {
-  navigationItemContainsPath,
-  normalizeNavigationPath,
-} from "@lupinum/ginko-content/navigation";
-import type { DocsNavigationItem } from "#ginko-docs/features/docs/docs-navigation";
-import { Button } from "#ginko-docs/components/ui/button";
-import DocsSidebarRow from "./DocsSidebarRow.vue";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "#ginko-docs/components/ui/collapsible";
-import { cn } from "#ginko-docs/utils";
-
-defineOptions({
-  name: "DocsSidebarItem",
-});
-
-const props = defineProps<{
-  item: DocsNavigationItem;
-  depth: number;
-}>();
-
-const route = useRoute();
-
-function itemIsExactActive(path: string, item: DocsNavigationItem): boolean {
-  return Boolean(item.path && normalizeNavigationPath(path) === normalizeNavigationPath(item.path));
-}
-
-function folderShouldBeOpen(path: string, item: DocsNavigationItem): boolean {
-  return item.children.length > 0 && navigationItemContainsPath(item, path);
-}
-
-const isExactActive = computed(() => itemIsExactActive(route.path, props.item));
-
-const paddingClass = computed(() => {
-  const steps = ["ps-[13px]", "ps-[25px]", "ps-[37px]"] as const;
-  return steps[Math.min(Math.max(props.depth - 1, 0), steps.length - 1)]!;
-});
-
-// Depth 0: compact pill rows. Depth > 0: each row carries the rail as its own
-// start border so the active segment recolors it — aligned by construction.
-const linkRowClass = computed(() =>
-  cn(
-    "group relative flex w-full flex-row items-center gap-2 text-start [overflow-wrap:anywhere] text-muted-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
-    "[&_svg]:size-4 [&_svg]:shrink-0",
-    "hover:bg-accent/50 hover:text-accent-foreground/80 hover:transition-none",
-    "data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-medium data-[active=true]:hover:bg-muted data-[active=true]:hover:transition-colors",
-    props.depth === 0
-      ? "rounded-[7px] px-2 py-[5.5px] text-[13px]"
-      : cn(
-          "rounded-e-[7px] border-s border-border py-[5px] pe-2 text-[12.5px]",
-          "hover:border-s-muted-foreground/40",
-          "data-[active=true]:border-s-brand",
-          paddingClass.value,
-        ),
-  ),
-);
-
-const folderOpen = ref(folderShouldBeOpen(route.path, props.item));
-
-watch(
-  () => route.path,
-  () => {
-    if (folderShouldBeOpen(route.path, props.item)) {
-      folderOpen.value = true;
-    }
-  },
-);
-
-// No gap between child rows: their start borders stack into one continuous
-// rail. Deeper levels indent via padding only, sharing the same rail.
-const contentRailClass = computed(() =>
-  props.depth === 0 ? "ms-[15.5px] mt-0.5 mb-1 flex flex-col" : "flex flex-col",
-);
-</script>
-
-<template>
-  <Collapsible v-if="item.children.length > 0" v-model:open="folderOpen" :unmount-on-hide="false">
-    <CollapsibleTrigger v-if="item.path" as-child>
-      <NuxtLink
-        :to="item.path"
-        :class="linkRowClass"
-        :aria-current="isExactActive ? 'page' : undefined"
-        :data-active="isExactActive ? 'true' : 'false'"
-      >
-        <DocsSidebarRow :item="item" show-chevron />
-      </NuxtLink>
-    </CollapsibleTrigger>
-    <CollapsibleTrigger v-else as-child>
-      <Button
-        variant="ghost"
-        :class="linkRowClass"
-        class="h-auto justify-start"
-        :data-active="isExactActive ? 'true' : 'false'"
-      >
-        <DocsSidebarRow :item="item" show-chevron />
-      </Button>
-    </CollapsibleTrigger>
-
-    <CollapsibleContent :class="contentRailClass">
-      <DocsSidebarItem
-        v-for="child in item.children"
-        :key="child.path ?? child.title"
-        :item="child"
-        :depth="depth + 1"
-      />
-    </CollapsibleContent>
-  </Collapsible>
-  <NuxtLink
-    v-else-if="item.path"
-    :to="item.path"
-    :aria-current="isExactActive ? 'page' : undefined"
-    :class="linkRowClass"
-    :data-active="isExactActive ? 'true' : 'false'"
-  >
-    <DocsSidebarRow :item="item" />
-  </NuxtLink>
-</template>

package/app/features/docs/components/DocsSidebarList.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { DocsNavigationSection } from "#ginko-docs/features/docs/docs-navigation";
-
-const defaultIcon = "lucide:book-open";
-
-defineProps<{
-  sections: Array<DocsNavigationSection & { title: string }>;
-  activeId: string;
-}>();
-
-const emit = defineEmits<{
-  "update:activeId": [id: string];
-}>();
-</script>
-
-<template>
-  <ul class="flex flex-col gap-0.5" data-slot="docs-sidebar-list">
-    <li v-for="section in sections" :key="section.id">
-      <button
-        type="button"
-        class="flex min-h-9 w-full items-center gap-2 rounded-lg px-2 text-start text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        :class="
-          activeId === section.id
-            ? 'bg-muted font-medium text-foreground'
-            : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-        "
-        :aria-pressed="activeId === section.id"
-        @click="emit('update:activeId', section.id)"
-      >
-        <Icon :name="section.icon ?? defaultIcon" class="size-4 shrink-0" aria-hidden="true" />
-        <span class="truncate">{{ section.title }}</span>
-      </button>
-    </li>
-  </ul>
-</template>