@kirchdev/duxt 0.1.0

package/app/components/ui/sidebar/index.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+
+export interface SidebarProps {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);
+
+export type SidebarMenuButtonVariants = VariantProps<
+  typeof sidebarMenuButtonVariants
+>;

package/app/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue';
+import { createContext } from 'reka-ui';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>;
+  open: Ref<boolean>;
+  setOpen: (value: boolean) => void;
+  isMobile: Ref<boolean>;
+  openMobile: Ref<boolean>;
+  setOpenMobile: (value: boolean) => void;
+  toggleSidebar: () => void;
+}>('Sidebar');

package/app/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@duxt/lib/utils';
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>

package/app/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue';

package/app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner';
+import { Toaster as Sonner } from 'vue-sonner';
+
+// Sonner needs to be told which theme it is in — it does not read the class
+// itself. @nuxtjs/color-mode already tracks that, so the two stay in step.
+const colorMode = useColorMode();
+
+const {
+  theme: _theme,
+  closeButton = true,
+  duration = 4000,
+  position = 'bottom-right',
+  ...forwarded
+} = defineProps<ToasterProps>();
+
+const theme = computed(() => (colorMode.value === 'dark' ? 'dark' : 'light'));
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    :theme="theme"
+    :close-button="closeButton"
+    :duration="duration"
+    :position="position"
+    v-bind="forwarded"
+    :toast-options="{
+      classes: {
+        toast:
+          'group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:rounded-lg group-[.toaster]:px-4 group-[.toaster]:py-3 group-[.toaster]:gap-3',
+        icon: 'self-start mt-0.5',
+        content: 'grid gap-0.5',
+        title: 'font-medium leading-tight text-foreground',
+        description:
+          'text-sm leading-relaxed group-[.toast]:text-muted-foreground',
+        closeButton:
+          'group-[.toast]:border-border group-[.toast]:bg-popover group-[.toast]:text-muted-foreground hover:group-[.toast]:text-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+      }
+    }"
+  >
+    <!-- Icons come from the layer's own icon component and take the semantic
+         status tokens, so they follow the theme instead of a fixed palette. -->
+    <template #success-icon>
+      <Icon name="lucide:circle-check" class="size-4 text-success" />
+    </template>
+    <template #info-icon>
+      <Icon name="lucide:info" class="size-4 text-info" />
+    </template>
+    <template #warning-icon>
+      <Icon name="lucide:triangle-alert" class="size-4 text-warning" />
+    </template>
+    <template #error-icon>
+      <Icon name="lucide:circle-x" class="size-4 text-destructive" />
+    </template>
+    <template #loading-icon>
+      <Icon
+        name="lucide:loader-circle"
+        class="size-4 animate-spin text-muted-foreground"
+      />
+    </template>
+  </Sonner>
+</template>

package/app/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue';

package/app/components/ui/tabs/Tabs.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@duxt/lib/utils';
+
+const props = defineProps<
+  TabsRootProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>

package/app/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '@duxt/lib/utils';
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/app/components/ui/tabs/TabsList.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@duxt/lib/utils';
+
+const props = defineProps<
+  TabsListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

package/app/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@duxt/lib/utils';
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="
+      cn(
+        `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/app/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

package/app/components/ui/textarea/Textarea.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '@duxt/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  defaultValue?: string | number;
+  modelValue?: string | number;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+});
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
+  />
+</template>

package/app/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue';

package/app/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>

package/app/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits
+} from 'reka-ui';
+import { cn } from '@duxt/lib/utils';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4
+  }
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+          props.class
+        )
+      "
+    >
+      <slot />
+
+      <TooltipArrow
+        class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs"
+      />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/app/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0
+});
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui';
+import { TooltipTrigger } from 'reka-ui';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

package/app/composables/useActiveHeading.ts

@@ -0,0 +1,90 @@
+/**
+ * The heading currently in view, for marking the table of contents.
+ *
+ * WHY NOT AN INTERSECTIONOBSERVER, which is the obvious tool and was the first
+ * implementation here: it reports crossings, not state, so it can only answer
+ * "which heading last entered the band". Three cases have no crossing to
+ * report, and in all three the marker stuck to the wrong entry:
+ *
+ *   - the last section on the page, whose heading can never reach a trigger
+ *     line 30% down the viewport because the document runs out of scroll first;
+ *   - a section longer than the viewport, where the heading has left the band
+ *     above and the next has not arrived, so nothing fires for a whole screen
+ *     of reading;
+ *   - a jump — a hash on load, a click in this very list — which can skip a
+ *     heading past the band entirely without ever intersecting it.
+ *
+ * Reading positions instead answers the question directly: the active heading
+ * is the LAST one whose top has passed the trigger line. That is true at every
+ * scroll offset rather than only at the moments something crossed, so all three
+ * cases fall out of it. The bottom of the document is the one place the rule
+ * still needs help — see below.
+ *
+ * The cost is running on scroll rather than on crossings. It is one
+ * `getBoundingClientRect` per heading, coalesced into an animation frame, so at
+ * most one pass per painted frame however fast the wheel turns.
+ */
+export function useActiveHeading(ids: Ref<string[]>) {
+  const active = ref<string>();
+
+  /** Where a heading counts as reached: reading position, not the top edge. */
+  const TRIGGER = 96;
+
+  let frame = 0;
+
+  function measure() {
+    frame = 0;
+
+    const headings = ids.value
+      .map((id) => document.getElementById(id))
+      .filter((element): element is HTMLElement => Boolean(element));
+
+    if (!headings.length) {
+      active.value = undefined;
+      return;
+    }
+
+    // At the end of the document no further scrolling is possible, so the
+    // trigger line can no longer reach what is left. Everything still below it
+    // would stay unreachable forever; the last heading is the honest answer.
+    const atBottom =
+      window.innerHeight + window.scrollY >=
+      document.documentElement.scrollHeight - 2;
+
+    if (atBottom) {
+      active.value = headings.at(-1)!.id;
+      return;
+    }
+
+    let current = headings[0]!;
+    for (const heading of headings) {
+      if (heading.getBoundingClientRect().top > TRIGGER) break;
+      current = heading;
+    }
+
+    active.value = current.id;
+  }
+
+  function schedule() {
+    if (frame) return;
+    frame = requestAnimationFrame(measure);
+  }
+
+  onMounted(() => {
+    measure();
+    window.addEventListener('scroll', schedule, { passive: true });
+    window.addEventListener('resize', schedule, { passive: true });
+  });
+
+  // A new page's headings exist only after it renders, and the ids change
+  // before the DOM does.
+  watch(ids, () => nextTick(measure));
+
+  onBeforeUnmount(() => {
+    if (frame) cancelAnimationFrame(frame);
+    window.removeEventListener('scroll', schedule);
+    window.removeEventListener('resize', schedule);
+  });
+
+  return active;
+}