@uxfront/layer-docs 0.1.0

package/app/components/MorphingGradientBackground.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+const currentX = ref(0);
+const currentY = ref(0);
+const mouseX = ref(0);
+const mouseY = ref(0);
+
+let animationId: number | null = null;
+
+const interactiveBubbleStyle = computed(() => {
+  return {
+    transform: `translate(${Math.round(currentX.value)}px, ${Math.round(currentY.value)}px)`,
+  };
+});
+
+function move() {
+  currentX.value += (mouseX.value - currentX.value) / 20;
+  currentY.value += (mouseY.value - currentY.value) / 20;
+  animationId = requestAnimationFrame(move);
+}
+
+function handleMouseMove(event: MouseEvent) {
+  mouseX.value = event.clientX;
+  mouseY.value = event.clientY;
+}
+
+onMounted(() => {
+  move();
+});
+
+onBeforeUnmount(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId);
+  }
+});
+</script>
+
+<template>
+  <div class="morphing-gradient-background">
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="goo">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+          <feBlend in="SourceGraphic" in2="goo" />
+        </filter>
+      </defs>
+    </svg>
+    <div class="gradients-container">
+      <div class="g1"></div>
+      <div class="g2"></div>
+      <div class="g3"></div>
+      <div class="g4"></div>
+      <div class="g5"></div>
+      <div class="interactive" :style="interactiveBubbleStyle"></div>
+    </div>
+    <slot :onMousemove="handleMouseMove" />
+  </div>
+</template>
+
+<style scoped>
+@keyframes moveInCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moveVertical {
+  0% {
+    transform: translateY(-50%);
+  }
+  50% {
+    transform: translateY(50%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes moveHorizontal {
+  0% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+  50% {
+    transform: translateX(50%) translateY(10%);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+}
+
+.morphing-gradient-background {
+  --color-bg1: var(--ui-bg);
+  --color-bg2: var(--ui-bg);
+  --color1: 18, 113, 255;
+  --color2: 221, 74, 255;
+  --color3: 100, 220, 255;
+  --color4: 200, 50, 50;
+  --color5: 180, 180, 50;
+  --color-interactive: 140, 100, 255;
+  --circle-size: 80%;
+  --blending: hard-light;
+  --intensity: 0.2;
+
+  position: relative;
+  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
+  overflow: hidden;
+  min-height: 100%;
+  width: 100%;
+
+  .gradients-container {
+    filter: url(#goo) blur(40px);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .g1 {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color1), var(--intensity)) 0,
+        rgba(var(--color1), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: center center;
+    animation: moveVertical 30s ease infinite;
+
+    opacity: 1;
+  }
+
+  .g2 {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color2), var(--intensity)) 0,
+        rgba(var(--color2), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: calc(50% - 400px);
+    animation: moveInCircle 20s reverse infinite;
+
+    opacity: 1;
+  }
+
+  .g3 {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color3), var(--intensity)) 0,
+        rgba(var(--color3), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2 + 200px);
+    left: calc(50% - var(--circle-size) / 2 - 500px);
+
+    transform-origin: calc(50% + 400px);
+    animation: moveInCircle 40s linear infinite;
+
+    opacity: 1;
+  }
+
+  .g4 {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color4), var(--intensity)) 0,
+        rgba(var(--color4), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: calc(50% - var(--circle-size) / 2);
+    left: calc(50% - var(--circle-size) / 2);
+
+    transform-origin: calc(50% - 200px);
+    animation: moveHorizontal 40s ease infinite;
+
+    opacity: 0.7;
+  }
+
+  .g5 {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color5), var(--intensity)) 0,
+        rgba(var(--color5), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: calc(var(--circle-size) * 2);
+    height: calc(var(--circle-size) * 2);
+    top: calc(50% - var(--circle-size));
+    left: calc(50% - var(--circle-size));
+
+    transform-origin: calc(50% - 800px) calc(50% + 200px);
+    animation: moveInCircle 20s ease infinite;
+
+    opacity: 1;
+  }
+
+  .interactive {
+    position: absolute;
+    background: radial-gradient(
+        circle at center,
+        rgba(var(--color-interactive), var(--intensity)) 0,
+        rgba(var(--color-interactive), 0) 50%
+      )
+      no-repeat;
+    mix-blend-mode: var(--blending);
+
+    width: 100%;
+    height: 100%;
+    top: -50%;
+    left: -50%;
+
+    opacity: 0.7;
+  }
+}
+</style>

package/app/components/app/AppFooter.vue

@@ -0,0 +1,13 @@
+<template>
+  <UFooter>
+    <template #left>
+      <AppFooterLeft />
+    </template>
+
+    <AppFooterCenter />
+
+    <template #right>
+      <AppFooterRight />
+    </template>
+  </UFooter>
+</template>

package/app/components/app/AppFooterCenter.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+/**
+ * Footer link row. Brand/legal links (Privacy, Terms, ...) are consumer data,
+ * read from `footer.links` in `app.config.ts`. This layer ships none.
+ */
+const appConfig = useAppConfig();
+
+const links = computed<NavigationMenuItem[]>(
+  () => (appConfig.footer?.links as NavigationMenuItem[] | undefined) ?? [],
+);
+</script>
+
+<template>
+  <UNavigationMenu v-if="links.length" orientation="horizontal" :items="links" />
+</template>

package/app/components/app/AppFooterLeft.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * Footer credit line. The consumer supplies the full string via
+ * `footer.credits` in `app.config.ts` (rendered verbatim). When absent, a
+ * sensible default is built from the header title so a minimally-configured app
+ * still shows a credit.
+ */
+const appConfig = useAppConfig();
+
+const credit = computed(() => {
+  if (appConfig.footer?.credits) return appConfig.footer.credits;
+  const name = appConfig.header?.title;
+  return name ? `© ${new Date().getFullYear()} ${name}. All rights reserved.` : "";
+});
+</script>
+
+<template>
+  <div v-if="credit" class="text-sm text-muted">
+    {{ credit }}
+  </div>
+</template>

package/app/components/app/AppFooterRight.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const appConfig = useAppConfig();
+
+const links = computed(() =>
+  [
+    ...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
+      icon: `i-simple-icons-${key}`,
+      to: url,
+      target: "_blank",
+      "aria-label": `${key} social link`,
+    })),
+    appConfig.github &&
+      appConfig.github.url && {
+        icon: "i-simple-icons-github",
+        to: appConfig.github.url,
+        target: "_blank",
+        "aria-label": "GitHub repository",
+      },
+  ].filter(Boolean),
+);
+</script>
+
+<template>
+  <template v-if="links.length">
+    <UButton
+      v-for="(link, index) of links"
+      :key="index"
+      size="sm"
+      v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+    />
+  </template>
+  <UColorModeButton />
+</template>

package/app/components/app/AppHeader.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useResizeObserver } from "@vueuse/core";
+import { useDocusI18n } from "../../composables/useDocusI18n";
+
+const appConfig = useAppConfig();
+const site = useSiteConfig();
+
+const { localePath, isEnabled, locales } = useDocusI18n();
+
+const route = useRoute();
+const isDocs = computed(() => route.path.startsWith("/docs"));
+
+const headerEl = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  headerEl.value = document.querySelector<HTMLElement>("header");
+});
+
+useResizeObserver(headerEl, ([entry]) => {
+  if (!isDocs.value || !entry) return;
+  const height = entry.contentRect.height;
+  if (height > 0) {
+    document.documentElement.style.setProperty("--ui-header-height", `${height}px`);
+  }
+});
+
+watch(isDocs, (docs) => {
+  if (!docs) {
+    document.documentElement.style.removeProperty("--ui-header-height");
+  }
+});
+
+const links = computed(() =>
+  appConfig.github && appConfig.github.url
+    ? [
+        {
+          icon: "i-simple-icons-github",
+          to: appConfig.github.url,
+          target: "_blank",
+          "aria-label": "GitHub",
+        },
+      ]
+    : [],
+);
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1', root: isDocs ? 'h-auto' : '', container: 'h-16' }"
+    :to="localePath('/')"
+    :title="appConfig.header?.title || site.name"
+  >
+    <AppHeaderCenter />
+
+    <template #title>
+      <AppHeaderLogo class="h-6 w-auto shrink-0" />
+    </template>
+
+    <template #right>
+      <AppHeaderCTA class="max-sm:hidden" />
+
+      <template v-if="isEnabled && locales.length > 1">
+        <ClientOnly>
+          <LanguageSelect />
+
+          <template #fallback>
+            <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+          </template>
+        </ClientOnly>
+
+        <USeparator orientation="vertical" class="h-8" />
+      </template>
+
+      <UContentSearchButton class="lg:hidden" />
+
+      <ClientOnly>
+        <UColorModeButton />
+
+        <template #fallback>
+          <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+        </template>
+      </ClientOnly>
+
+      <template v-if="links?.length">
+        <UButton
+          v-for="(link, index) of links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #toggle="{ open, toggle }">
+      <IconMenuToggle :open="open" class="lg:hidden" @click="toggle" />
+    </template>
+
+    <template #body>
+      <AppHeaderBody />
+    </template>
+
+    <template v-if="isDocs" #bottom>
+      <AppSubHeader />
+    </template>
+  </UHeader>
+</template>

package/app/components/app/AppHeaderBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from "@nuxt/content";
+
+const navigationMap = inject<Ref<Record<string, ContentNavigationItem[]> | null>>("navigation");
+
+const navigation = computed<ContentNavigationItem[]>(() =>
+  navigationMap?.value ? Object.values(navigationMap.value).flat() : [],
+);
+</script>
+
+<template>
+  <AppHeaderCTA highlight variant="link" orientation="vertical" class="min-sm:hidden mb-4 -ml-2" />
+  <UContentNavigation highlight variant="link" :navigation="navigation" />
+</template>

package/app/components/app/AppHeaderCTA.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+/**
+ * Neutral header CTA menu. The links are brand data, so they come from the
+ * consumer's `app.config.ts` under `header.links` — this layer ships none.
+ * Each entry is a Nuxt UI `NavigationMenuItem`; a `startsWith` string on
+ * `activeMatch` marks the item active for the current route prefix.
+ */
+type HeaderLink = NavigationMenuItem & { activeMatch?: string };
+
+const route = useRoute();
+const appConfig = useAppConfig();
+
+// `header` is seeded partially in `modules/config.ts`, so defu's resolved
+// AppConfig type narrows it to `{ title, logo }` and drops the array-valued
+// `links`. Cast `header` itself (not the `.links` result) to read it safely.
+const items = computed<NavigationMenuItem[]>(() =>
+  ((appConfig.header as { links?: HeaderLink[] } | undefined)?.links ?? []).map((link) => {
+    const { activeMatch, ...rest } = link;
+    return {
+      ...rest,
+      active: rest.active ?? (activeMatch ? route.path.startsWith(activeMatch) : undefined),
+    };
+  }),
+);
+</script>
+
+<template>
+  <UNavigationMenu v-if="items.length" :items="items" />
+</template>

package/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,10 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mr-1',
+    }"
+  />
+</template>

package/app/components/app/AppHeaderLogo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const appConfig = useAppConfig();
+</script>
+
+<template>
+  <UColorModeImage
+    v-if="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :light="appConfig.header?.logo?.light || appConfig.header?.logo?.dark"
+    :dark="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :alt="appConfig.header?.logo?.alt || appConfig.header?.title"
+    class="h-6 w-auto shrink-0"
+  />
+  <span v-else>
+    {{ appConfig.header?.title || "{appConfig.header.title}" }}
+  </span>
+</template>

package/app/components/app/AppSearch.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { ContentNavigationItem, PageCollections } from "@nuxt/content";
+
+const props = defineProps<{
+  navigation?: ContentNavigationItem[];
+}>();
+
+const { locale, isEnabled } = useDocusI18n();
+
+// FTS5 indexes one collection at a time; our docs are split across a
+// collection per top-level section (and per locale), so we hand
+// `useSearchCollection` the whole set and let it index and query them together.
+const collections = computed(() =>
+  DOCS_SECTIONS.map(
+    (section) =>
+      (isEnabled.value
+        ? `docs_${section.key}_${locale.value}`
+        : `docs_${section.key}`) as keyof PageCollections,
+  ),
+);
+
+const {
+  search,
+  status: searchStatus,
+  init,
+} = useSearchCollection(collections, {
+  immediate: false,
+  ignoredTags: ["style"],
+});
+
+// Build the SQLite FTS5 index lazily: only when the palette first opens, so
+// the search payload never loads on pages the reader never searches from.
+const { open } = useContentSearch();
+watch(open, (value) => {
+  if (value && searchStatus.value === "idle") {
+    init();
+  }
+});
+
+// Empty-state shortcuts shown before the reader types anything.
+const links = computed(() =>
+  props.navigation
+    ?.filter((item) => item.children?.length)
+    .map((item) => ({
+      label: item.title,
+      icon: item.icon as string | undefined,
+      to: item.children![0]!.path,
+    })),
+);
+</script>
+
+<template>
+  <LazyUContentSearch
+    :search="search"
+    :search-status="searchStatus"
+    :links="links"
+    :navigation="navigation"
+  />
+</template>

package/app/components/app/AppSubHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const { sections } = useDocsSections();
+
+const items = computed<NavigationMenuItem[]>(() =>
+  sections.value.map((section) => ({
+    label: section.label,
+    to: section.to,
+    active: section.active,
+  })),
+);
+</script>
+
+<template>
+  <div class="border-t border-default max-lg:hidden">
+    <UContainer class="py-1">
+      <UNavigationMenu :items="items" :ui="{ root: 'overflow-x-auto no-scrollbar' }" />
+    </UContainer>
+  </div>
+</template>

package/app/components/content/BrowserFrame.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="p-1 border border-default rounded text-sm bg-default/70">
+    <div
+      v-if="title"
+      class="flex items-center bg-slate-100 dark:bg-slate-800 p-2 rounded font-bold"
+    >
+      <span class="flex gap-1 absolute">
+        <span class="rounded-full bg-error inline-flex w-3 h-3" />
+        <span class="rounded-full bg-warning inline-flex w-3 h-3" />
+        <span class="rounded-full bg-success inline-flex w-3 h-3" />
+      </span>
+      <span class="flex w-full align-center justify-center">
+        {{ title }}
+      </span>
+    </div>
+    <div class="px-3 overflow-auto">
+      <slot mdc-unwrap="p" />
+    </div>
+  </div>
+</template>

package/app/components/content/FrameworkSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { framework, frameworks } = useFramework();
+const slots = useSlots();
+
+const current = computed(
+  () => frameworks.value.find((f) => f.value === framework.value) ?? frameworks.value[0],
+);
+
+// When the selected framework has no matching slot on this page, fall back to
+// the first framework that does. Keeps a page authored for a subset of the
+// consumer's framework list usable under an N-tab switcher.
+const fallback = computed(() => {
+  if (slots[framework.value]) return null;
+  return frameworks.value.find((f) => slots[f.value]) ?? null;
+});
+
+function select(value: string) {
+  framework.value = value;
+}
+</script>
+
+<template>
+  <div class="framework-switcher">
+    <div
+      class="framework-switcher-tabs flex flex-wrap gap-1 mb-3 border-b border-default"
+      role="tablist"
+    >
+      <UButton
+        v-for="option in frameworks"
+        :key="option.value"
+        :icon="option.icon"
+        :label="option.label"
+        :color="option.value === current?.value ? 'primary' : 'neutral'"
+        variant="ghost"
+        size="sm"
+        role="tab"
+        :aria-selected="option.value === current?.value"
+        @click="select(option.value)"
+      />
+    </div>
+    <p v-if="fallback" class="text-sm text-muted mb-2">
+      Not available for {{ current?.label }} — showing {{ fallback.label }}.
+    </p>
+    <slot v-if="!fallback" :name="framework" />
+    <slot v-else :name="fallback.value" />
+  </div>
+</template>