@baybreezy/docd 0.0.1

package/app/components/content/prose/ProseTabsInner.global.vue

@@ -0,0 +1,274 @@
+<template>
+  <UiTabs v-if="variant === 'separate'" v-model="activeTabIndex" class="not-first:mt-5">
+    <UiTabsList>
+      <UiTabsTrigger
+        v-for="(slot, i) in defaultSlots"
+        :key="slot.key"
+        :value="i"
+        class="items-center gap-2"
+      >
+        <ProseSmartIcon v-if="icon(slot)" :name="icon(slot)!" :size="14" class="self-center" />
+        {{ label(slot) }}
+      </UiTabsTrigger>
+    </UiTabsList>
+
+    <div
+      v-for="(slot, i) in defaultSlots"
+      v-show="activeTabIndex === i"
+      :key="slot.key"
+      class="mt-2"
+    >
+      <component :is="slot.vnode" class="[&>*:first-child]:mt-0" />
+    </div>
+  </UiTabs>
+
+  <UiTabs
+    v-else-if="variant === 'line'"
+    v-model="activeTabIndex"
+    class="relative mr-auto w-full not-first:mt-5"
+  >
+    <div class="flex items-center justify-between overflow-x-auto pb-3">
+      <UiTabsList :pill="false" class="relative h-9 w-full justify-start rounded-none border-b p-0">
+        <UiTabsTrigger
+          v-for="(slot, i) in defaultSlots"
+          :key="slot.key"
+          class="gap-2"
+          :pill="false"
+          :value="i"
+        >
+          <ProseSmartIcon v-if="icon(slot)" :name="icon(slot)!" :size="14" class="self-center" />
+          {{ label(slot) }}
+        </UiTabsTrigger>
+        <UiTabsIndicator />
+      </UiTabsList>
+    </div>
+
+    <div
+      v-for="(slot, i) in defaultSlots"
+      v-show="activeTabIndex === i"
+      :key="slot.key"
+      class="relative space-y-10"
+    >
+      <component :is="slot.vnode" class="mt-0 [&>*:first-child]:mt-0" />
+    </div>
+  </UiTabs>
+
+  <UiCard
+    v-else-if="variant === 'card'"
+    class="gap-0 rounded-lg py-0 not-first:mt-5"
+    :class="[inStack && 'mb-0 rounded-none border-none shadow-none']"
+  >
+    <TabsRoot v-model="activeTabIndex">
+      <UiScrollArea orientation="horizontal" class="**:data-[slot='scroll-area-scrollbar']:h-1.5">
+        <TabsList class="relative flex w-full p-1">
+          <TabsTrigger
+            v-for="(slot, i) in defaultSlots"
+            :key="slot.key"
+            :value="i"
+            class="relative z-20 flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all duration-75 hover:text-foreground focus-visible:outline-none data-active:text-foreground"
+          >
+            <ProseSmartIcon v-if="icon(slot)" :name="icon(slot)!" :size="14" class="shrink-0" />
+            <span class="truncate">{{ label(slot) }}</span>
+          </TabsTrigger>
+          <UiTabsIndicator class="inset-0 size-full px-0 py-1 [&>div]:bg-muted" />
+        </TabsList>
+      </UiScrollArea>
+
+      <div
+        v-for="(slot, i) in defaultSlots"
+        v-show="activeTabIndex === i"
+        :key="slot.key"
+        :value="label(slot)"
+        class="mt-0"
+        :class="[
+          padded && ($slots.default?.()[activeTabIndex]?.type as any).tag !== 'pre' && 'p-3',
+        ]"
+      >
+        <component
+          :is="slot.vnode"
+          :in-group="true"
+          class="mt-0 border-none [&>*:first-child]:mt-0"
+        />
+      </div>
+    </TabsRoot>
+  </UiCard>
+
+  <div v-else-if="variant === 'combobox'">
+    <UiPopover v-model:open="dropDownOpen">
+      <UiPopoverTrigger as-child>
+        <UiButton
+          variant="outline"
+          role="combobox"
+          :aria-expanded="dropDownOpen"
+          class="justify-between"
+          :class="[comboBoxFullWidth ? 'w-full' : 'w-62.5']"
+        >
+          <div class="flex items-center gap-2">
+            <ProseSmartIcon
+              v-if="icon(defaultSlots?.[activeTabIndex])"
+              :name="icon(defaultSlots?.[activeTabIndex])!"
+              :size="14"
+            />
+            <span>
+              {{ label(defaultSlots?.[activeTabIndex]) }}
+            </span>
+          </div>
+          <Icon class="text-muted-foreground" name="lucide:chevrons-up-down" />
+        </UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent class="w-(--reka-popover-trigger-width) p-0">
+        <UiCommand>
+          <UiCommandInput v-if="!disableSearch" class="h-9" :placeholder="searchPlaceholder" />
+          <UiCommandEmpty>{{ searchEmpty }}</UiCommandEmpty>
+          <UiCommandList>
+            <UiCommandGroup>
+              <UiCommandItem
+                v-for="(slot, i) in defaultSlots"
+                :key="slot.key"
+                :value="label(slot)"
+                @select="
+                  () => {
+                    activeTabIndex = i;
+                    dropDownOpen = false;
+                  }
+                "
+              >
+                <ProseSmartIcon
+                  v-if="icon(slot)"
+                  :name="icon(slot)!"
+                  :size="14"
+                  class="mr-2 self-center"
+                />
+                {{ label(slot) }}
+                <Icon
+                  name="lucide:check"
+                  :class="['ml-auto h-4 w-4', activeTabIndex === i ? 'opacity-100' : 'opacity-0']"
+                />
+              </UiCommandItem>
+            </UiCommandGroup>
+          </UiCommandList>
+        </UiCommand>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <div
+      v-for="(slot, i) in defaultSlots"
+      v-show="activeTabIndex === i"
+      :key="slot.key"
+      :value="label(slot)"
+      class="mt-4"
+    >
+      <component :is="slot.vnode" :in-group="true" class="[&>*:first-child]:mt-0" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";
+
+  import type { ProseTabsProps } from "./ProseTabs.global.vue";
+
+  export type ProseTabsInnerSlotData = {
+    label: string;
+    index: number;
+  };
+
+  export type ProseTabsInnerProps = ProseTabsProps & {
+    /**
+     * Data to be used for rendering tabs
+     */
+    slotsData: ProseTabsInnerSlotData[];
+  };
+</script>
+
+<script setup lang="ts">
+  const { sync } = defineProps<ProseTabsInnerProps>();
+
+  const syncState = useCookie<{ scope: string; value?: string }[]>("tabs-sync-state", {
+    default: () => [],
+  });
+
+  const syncScopeIndex = computed(() => syncState.value.findIndex((x) => x.scope === sync));
+
+  const activeTabIndexData = ref(0);
+
+  const { items: slotItems } = useDefaultSlotItems({
+    mapMeta: ({ props, index }) => {
+      const filename = props.filename as string | undefined;
+      const language = props.language as string | undefined;
+      const meta = props.meta as string | undefined;
+
+      const normalizedLabel = props.label ?? filename ?? `Tab ${index + 1}`;
+
+      // Extract icon from multiple sources:
+      // 1. Direct icon prop
+      // 2. Icon in meta string (e.g., icon="lucide:terminal")
+      // 3. Language-based icon
+      let normalizedIcon = props.icon as string | undefined;
+
+      if (!normalizedIcon && meta) {
+        const iconMatch = meta.match(/icon="?([a-zA-Z0-9-_:]+)"?/);
+        normalizedIcon = iconMatch ? iconMatch[1] : undefined;
+      }
+
+      if (!normalizedIcon && language) {
+        normalizedIcon = getMaterialFileIcon(language);
+      }
+
+      return {
+        label: normalizedLabel,
+        icon: normalizedIcon,
+      };
+    },
+  });
+
+  const tabItems = computed(() =>
+    slotItems.value.map((item) => ({
+      key: item.key ?? `${item.index}${item.meta.label}`,
+      index: item.index,
+      vnode: item.vnode,
+      props: item.props,
+      label: item.meta.label,
+      icon: item.meta.icon,
+    }))
+  );
+
+  const activeTabIndex = computed<number>({
+    get: () => {
+      if (sync === undefined || syncScopeIndex.value === -1) return activeTabIndexData.value;
+
+      return (
+        tabItems.value.find((item) => item.label === syncState.value[syncScopeIndex.value]?.value)
+          ?.index ?? activeTabIndexData.value
+      );
+    },
+    set(index: number) {
+      if (sync === undefined) {
+        activeTabIndexData.value = index;
+        return;
+      }
+
+      let scopeIndex = syncScopeIndex.value;
+
+      if (scopeIndex === -1) {
+        syncState.value.push({ scope: sync, value: undefined });
+        scopeIndex = syncState.value.length - 1;
+      }
+
+      const label = tabItems.value[index]?.label;
+      if (syncState.value[scopeIndex] !== undefined) {
+        syncState.value[scopeIndex]!.value = label;
+      }
+      activeTabIndexData.value = index;
+    },
+  });
+
+  const defaultSlots = computed(() => tabItems.value);
+  function icon(slot?: (typeof tabItems.value)[number]) {
+    return slot?.icon;
+  }
+  function label(slot?: (typeof tabItems.value)[number]) {
+    return slot?.label ?? "";
+  }
+
+  const dropDownOpen = ref(false);
+</script>

package/app/components/content/prose/ProseTbody.global.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody data-slot="prose-tbody">
+    <slot />
+  </tbody>
+</template>

package/app/components/content/prose/ProseTd.global.vue

@@ -0,0 +1,25 @@
+<template>
+  <td data-slot="prose-td" :class="proseTdStyles({ class: normalizeClass(_class) || undefined })">
+    <slot />
+  </td>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseTdProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseTdStyles = tv({
+    base: "px-4 py-2 text-left text-pretty [[align=center]]:text-center [[align=right]]:text-right",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseTdProps>();
+</script>

package/app/components/content/prose/ProseTh.global.vue

@@ -0,0 +1,25 @@
+<template>
+  <th data-slot="prose-th" :class="proseThStyles({ class: normalizeClass(_class) || undefined })">
+    <slot />
+  </th>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseThProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseThStyles = tv({
+    base: "px-4 py-2 text-left font-bold text-pretty [[align=center]]:text-center [[align=right]]:text-right",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseThProps>();
+</script>

package/app/components/content/prose/ProseThead.global.vue

@@ -0,0 +1,9 @@
+<template>
+  <thead data-slot="prose-thead" :class="[isDashed ? 'border-dashed' : '']">
+    <slot />
+  </thead>
+</template>
+
+<script lang="ts" setup>
+  const { isDashed } = useDocd();
+</script>

package/app/components/content/prose/ProseTr.global.vue

@@ -0,0 +1,35 @@
+<template>
+  <tr
+    data-slot="prose-tr"
+    :class="proseTrStyles({ class: normalizeClass(_class) || undefined, isDashed })"
+  >
+    <slot />
+  </tr>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseTrProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseTrStyles = tv({
+    base: "m-0 p-0 even:bg-muted/70 dark:even:bg-muted/50 [&:not(:has(th)):hover]:bg-muted dark:[&:not(:has(th)):hover]:bg-muted/50",
+    variants: {
+      isDashed: {
+        true: "border-dashed",
+        false: "",
+      },
+    },
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseTrProps>();
+  const { isDashed } = useDocd();
+</script>

package/app/components/content/prose/ProseUl.global.vue

@@ -0,0 +1,25 @@
+<template>
+  <ul data-slot="prose-ul" :class="proseUlStyles({ class: normalizeClass(_class) || undefined })">
+    <slot mdc-unwrap="p" />
+  </ul>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseUlProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseUlStyles = tv({
+    base: "ml-4 list-disc not-first:mt-6 not-last:mb-6 [&>li:not(:first-child)]:mt-2",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseUlProps>();
+</script>

package/app/components/docs/DocsExtraStuff.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav v-if="allLinks.length" class="flex flex-col gap-2 text-sm">
+    <NuxtLink
+      v-for="(link, i) in allLinks"
+      :key="i"
+      :title="link.label"
+      :href="link.href"
+      :target="link.external ? '_blank' : '_self'"
+      :external="link.external"
+      class="flex items-center gap-2 text-muted-foreground transition-all hover:text-foreground"
+    >
+      <Icon :name="link.icon" />
+      {{ link.label }}
+    </NuxtLink>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+  const { github, extraLinks } = useDocd();
+  const { page } = await useDocPage();
+
+  const editLink = computed(() => {
+    if (!github.value?.repo || !page.value?.stem) return null;
+    const branch = github.value.branch ?? "main";
+    const contentDir = github.value.contentDir ?? "content";
+    return {
+      icon: "lucide:pen",
+      label: "Edit this page",
+      href: `${github.value.repo}/edit/${branch}/${contentDir}/${page.value.stem}.md`,
+      external: true,
+    };
+  });
+
+  const allLinks = computed(() =>
+    [editLink.value, ...extraLinks.value].filter(
+      (l): l is NonNullable<typeof l> => l !== null && l !== undefined
+    )
+  );
+</script>

package/app/components/docs/DocsGithubLink.vue

@@ -0,0 +1,11 @@
+<template>
+  <NuxtLink :href="github?.repo" target="_blank" rel="noopener noreferrer">
+    <UiButton class="dark:text-muted-foreground" size="icon-sm" variant="ghost">
+      <Icon name="simple-icons:github" />
+    </UiButton>
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+  const { github } = useDocd();
+</script>

package/app/components/docs/DocsHeader.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

package/app/components/docs/DocsLogo.vue

@@ -0,0 +1,74 @@
+<template>
+  <ClientOnly>
+    <UiContextMenu v-if="contextMenuItems.length">
+      <UiContextMenuTrigger as-child>
+        <NuxtLink :to="logoUrl" class="flex min-w-0 items-center gap-2 py-4">
+          <NuxtImg
+            v-if="activeDisplayUrl"
+            :src="activeDisplayUrl"
+            :alt="logoAlt"
+            :class="[
+              isWordmarkDisplay
+                ? 'h-6 w-auto shrink-0'
+                : 'size-6 shrink-0 rounded ring-1 ring-border/80',
+              logoClasses,
+            ]"
+          />
+          <span v-if="showTitle" class="truncate font-extrabold">{{ headerTitle }}</span>
+        </NuxtLink>
+      </UiContextMenuTrigger>
+
+      <UiContextMenuContent :collision-padding="10" translucent>
+        <template v-for="(group, groupIndex) in contextMenuItems" :key="groupIndex">
+          <UiContextMenuGroup>
+            <UiContextMenuItem
+              v-for="action in group"
+              :key="action.label"
+              @select="action.action()"
+            >
+              <Icon :name="action.icon" class="size-4" />
+              <span>{{ action.label }}</span>
+            </UiContextMenuItem>
+          </UiContextMenuGroup>
+          <UiContextMenuSeparator v-if="groupIndex < contextMenuItems.length - 1" />
+        </template>
+      </UiContextMenuContent>
+    </UiContextMenu>
+
+    <NuxtLink v-else :to="logoUrl" class="flex min-w-0 items-center gap-2 py-4">
+      <NuxtImg
+        v-if="activeDisplayUrl"
+        :src="activeDisplayUrl"
+        :alt="logoAlt"
+        :class="[
+          isWordmarkDisplay
+            ? 'h-6 w-auto shrink-0'
+            : 'size-6 shrink-0 rounded ring-1 ring-border/80',
+          logoClasses,
+        ]"
+      />
+      <span v-if="showTitle" class="truncate font-extrabold">{{ headerTitle }}</span>
+    </NuxtLink>
+
+    <template #fallback>
+      <div class="flex min-w-0 items-center gap-2 py-4">
+        <UiSkeleton class="size-6 shrink-0 rounded" />
+        <UiSkeleton class="h-5 w-20 rounded" />
+      </div>
+    </template>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+  const { headerTitle, logoUrl } = useDocd();
+  const {
+    activeDisplayUrl,
+    contextMenuItems,
+    hasWordmark,
+    isWordmarkDisplay,
+    logoAlt,
+    logoClasses,
+  } = useLogoAssets();
+
+  const showTitle = computed(() => !isWordmarkDisplay.value || !hasWordmark.value);
+</script>

package/app/components/docs/DocsMobileBar.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="flex h-(--header-height) items-center justify-between border-b px-4 tablet:hidden"
+    :class="isDashed ? 'border-dashed' : ''"
+  >
+    <DocsLogo />
+    <div class="flex items-center gap-1">
+      <DocsSearchButton v-if="!hideSearch" />
+      <UiButton
+        variant="ghost"
+        size="icon-sm"
+        class="size-7 text-muted-foreground"
+        aria-label="Open navigation"
+        @click="navOpen = true"
+      >
+        <Icon name="lucide:menu" class="size-4" />
+      </UiButton>
+    </div>
+    <DocsMobileNav v-model:open="navOpen" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const { isDashed, hideSearch } = useDocd();
+  const navOpen = ref(false);
+</script>

package/app/components/docs/DocsMobileNav.vue

@@ -0,0 +1,49 @@
+<template>
+  <UiDrawer v-model:open="open">
+    <UiDrawerContent hide-knob class="mx-2 flex h-full flex-col gap-0 border p-0">
+      <UiDrawerTitle class="sr-only">Mobile Navigation</UiDrawerTitle>
+      <UiDrawerDescription class="sr-only">Main navigation for mobile devices</UiDrawerDescription>
+      <UiDrawerHeader
+        class="flex items-center justify-between border-b px-4 py-0"
+        :class="isDashed ? 'border-dashed' : ''"
+      >
+        <DocsLogo />
+        <UiDrawerClose as-child>
+          <UiButton variant="ghost" size="icon-sm" class="size-7 text-muted-foreground">
+            <Icon name="lucide:x" class="size-4" />
+          </UiButton>
+        </UiDrawerClose>
+      </UiDrawerHeader>
+
+      <UiScrollArea
+        class="min-h-0 flex-1 mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)] px-4 py-4"
+      >
+        <DocsNav v-if="navigation" :items="navigation" />
+      </UiScrollArea>
+
+      <div
+        class="mt-auto flex h-(--header-height) items-center justify-between gap-3 border-t px-2"
+        :class="isDashed ? 'border-dashed' : ''"
+      >
+        <DocsGithubLink v-if="github" />
+        <div class="ml-auto flex items-center gap-1.5">
+          <template v-if="github && (!hideThemeCustomizer || !hideLightDarkToggle)">
+            <UiDivider
+              :type="isDashed ? 'dashed' : 'solid'"
+              orientation="vertical"
+              class="h-[calc(var(--header-height)-2rem)]"
+            />
+          </template>
+          <DocsThemeCustomizer v-if="!hideThemeCustomizer" />
+          <DocsThemeToggler v-if="!hideLightDarkToggle" class="dark:text-muted-foreground" />
+        </div>
+      </div>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>
+
+<script lang="ts" setup>
+  const open = defineModel<boolean>("open", { default: false });
+  const { navigation } = await useDocPage();
+  const { isDashed, github, hideThemeCustomizer, hideLightDarkToggle } = useDocd();
+</script>