kmcom-nuxt-layers 2.3.2 → 2.5.1

package/README.md

@@ -29,6 +29,8 @@ export default defineNuxtConfig({
 | **motion** | Animations — GSAP, Locomotive Scroll |
 | **shader** | 3D / WebGPU — Three.js, TresJS |
 | **forms** | Validation — Zod-based form system |
+| **database** | Storage — Drizzle ORM + Neon Postgres |
+| **auth** | Authentication — nuxt-auth-utils + GitHub OAuth |
 | **theme** | Theming — color mode, accent colors |
 | **content** | CMS — @nuxt/content, Nuxt Studio |
 

package/docs/ARCHITECTURE.md

@@ -15,6 +15,8 @@ nuxt-layers/
 │   ├── motion/              # GSAP + Locomotive Scroll animations
 │   ├── shader/              # Three.js / TresJS WebGPU shaders
 │   ├── forms/               # Zod-based form validation
+│   ├── database/            # Drizzle + Neon Postgres connection
+│   ├── auth/                # nuxt-auth-utils + GitHub OAuth
 │   ├── theme/               # Color mode, accent colors, accessibility
 │   └── content/             # @nuxt/content integration, Nuxt Studio
 ├── packages/                # Shared utilities (placeholder)
@@ -192,5 +194,7 @@ Some layers (ui, content) support standalone mode via environment variables (`UI
 | **motion** | Animation layer. GSAP with ScrollTrigger, Locomotive Scroll (Lenis) smooth scrolling, motion composables. Transpiles GSAP for SSR. |
 | **shader** | WebGPU/WebGL layer. Three.js + TresJS integration, TSL shader support, post-processing. Includes custom shader utilities and auto-imported shader modules. |
 | **forms** | Form validation layer. Zod schema-based validation, form composables, typed form components. |
+| **database** | Database infrastructure. Drizzle ORM + Neon Postgres via HTTP driver. Exposes `useSql()` and `useDrizzle(schema)` server utilities. App-owned schema and migrations; env: `NUXT_DATABASE_LAYER_URL`. |
+| **auth** | Authentication layer. nuxt-auth-utils + GitHub OAuth handler, sealed-cookie sessions. Opt-in `auth` route middleware; no user table (app's responsibility). Env: `NUXT_SESSION_PASSWORD`, `NUXT_OAUTH_GITHUB_CLIENT_ID/SECRET`. |
 | **theme** | Theming layer. Color mode switching, accent color palette, theme plugin, CSS custom properties for dynamic theming. |
 | **content** | Content management layer. @nuxt/content integration, better-sqlite3 for local content DB, optional Nuxt Studio support. |

package/layers/auth/app/middleware/auth.ts

@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession()
+  if (!loggedIn.value) return navigateTo('/auth/github')
+})

package/layers/auth/nuxt.config.ts

@@ -0,0 +1,31 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'auth',
+  },
+
+  extends: ['../core'],
+
+  modules: ['nuxt-auth-utils'],
+
+  alias: {
+    '#layers/auth': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-28',
+
+  runtimeConfig: {
+    // nuxt-auth-utils reads these env vars automatically:
+    session: { password: '' }, // env: NUXT_SESSION_PASSWORD
+    oauth: {
+      github: {
+        clientId: '', // env: NUXT_OAUTH_GITHUB_CLIENT_ID
+        clientSecret: '', // env: NUXT_OAUTH_GITHUB_CLIENT_SECRET
+      },
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/auth/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "kmcom-layer-auth",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,auth pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "nuxt-auth-utils": "catalog:"
+  }
+}

package/layers/auth/server/routes/auth/github.get.ts

@@ -0,0 +1,13 @@
+export default defineOAuthGitHubEventHandler({
+  async onSuccess(event, { user }) {
+    await setUserSession(event, {
+      user: {
+        provider: 'github',
+        providerId: user.id,
+        username: user.login,
+        avatarUrl: user.avatar_url,
+      },
+    })
+    return sendRedirect(event, '/')
+  },
+})

package/layers/auth/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/baseline/app/components/BaselineStatus.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'BaselineStatus',
+  props: {
+    featureId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    if (import.meta.server) return () => null
+    return () => h('baseline-status', { featureId: props.featureId })
+  },
+})
+</script>

package/layers/baseline/app/plugins/baseline-status.client.ts

@@ -0,0 +1,3 @@
+import 'baseline-status'
+
+export default defineNuxtPlugin(() => {})

package/layers/baseline/nuxt.config.ts

@@ -0,0 +1,24 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'baseline',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/baseline': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-06',
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'baseline-status' || tag === 'baseline-icon',
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/baseline/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "kmcom-layer-baseline",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev:playground": "PLAYGROUND_LAYERS=core,baseline pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "baseline-status": "catalog:"
+  }
+}

package/layers/baseline/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/database/nuxt.config.ts

@@ -0,0 +1,30 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'database',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/database': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-28',
+
+  runtimeConfig: {
+    databaseLayer: {
+      url: '', // env: NUXT_DATABASE_LAYER_URL  (Neon connection string)
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    databaseLayer?: { url: string }
+  }
+}

package/layers/database/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "kmcom-layer-database",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,database pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@neondatabase/serverless": "catalog:",
+    "drizzle-orm": "catalog:"
+  }
+}

package/layers/database/server/utils/drizzle.ts

@@ -0,0 +1,5 @@
+import { drizzle } from 'drizzle-orm/neon-http'
+
+export function useDrizzle<TSchema extends Record<string, unknown>>(schema: TSchema) {
+  return drizzle(useSql(), { schema })
+}

package/layers/database/server/utils/sql.ts

@@ -0,0 +1,7 @@
+import { neon } from '@neondatabase/serverless'
+
+export function useSql() {
+  const { databaseLayer } = useRuntimeConfig()
+  if (!databaseLayer?.url) throw createError('Database URL not configured')
+  return neon(databaseLayer.url)
+}

package/layers/database/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/metadata/app/composables/useMetadataItem.ts

@@ -0,0 +1,11 @@
+import type { MetadataProviderId, MetadataRecord } from '#layers/metadata/shared/types'
+
+export function useMetadataItem(provider: MetadataProviderId, providerId: string, resourceType?: string) {
+  return useAsyncData(
+    `metadata-item:${provider}:${providerId}`,
+    () =>
+      $fetch('/api/metadata/lookup', {
+        query: { provider, providerId, resourceType },
+      }) as Promise<MetadataRecord>,
+  )
+}

package/layers/metadata/app/composables/useMetadataSearch.ts

@@ -0,0 +1,25 @@
+import type { MetadataMediaType, MetadataProviderId, MetadataSearchResult } from '#layers/metadata/shared/types'
+
+type UseMetadataSearchOptions = {
+  mediaType?: MetadataMediaType
+  providers?: MetadataProviderId[]
+  limit?: number
+}
+
+export function useMetadataSearch(query: MaybeRef<string>, options: UseMetadataSearchOptions = {}) {
+  const q = computed(() => toValue(query).trim())
+
+  return useAsyncData(
+    () => `metadata-search:${q.value}`,
+    () =>
+      $fetch('/api/metadata/search', {
+        query: {
+          q: q.value,
+          mediaType: options.mediaType,
+          providers: options.providers?.join(','),
+          limit: options.limit,
+        },
+      }) as Promise<MetadataSearchResult[]>,
+    { watch: [q], immediate: false },
+  )
+}

package/layers/metadata/nuxt.config.ts

@@ -0,0 +1,27 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'metadata',
+  },
+
+  extends: ['../core'],
+
+  alias: {
+    '#layers/metadata': import.meta.dirname,
+    '#layers/metadata/shared': `${import.meta.dirname}/shared`,
+  },
+
+  compatibilityDate: '2026-06-30',
+
+  nitro: {
+    storage: {
+      metadata: {
+        driver: 'memory',
+      },
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/metadata/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "kmcom-layer-metadata",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,metadata pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  }
+}

package/layers/metadata/providers/comicvine/nuxt.config.ts

@@ -0,0 +1,36 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'metadata-comicvine',
+  },
+
+  extends: ['../../'],
+
+  alias: {
+    '#layers/metadata-comicvine': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-30',
+
+  runtimeConfig: {
+    metadataComicvine: {
+      apiKey: '', // env: NUXT_METADATA_COMICVINE_API_KEY
+      baseUrl: 'https://comicvine.gamespot.com/api',
+      cacheTtl: 60 * 60 * 24 * 30,
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    metadataComicvine: {
+      apiKey: string
+      baseUrl: string
+      cacheTtl: number
+    }
+  }
+}

package/layers/metadata/providers/comicvine/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "kmcom-layer-metadata-comicvine",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,metadata,metadata-comicvine pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  }
+}

package/layers/metadata/providers/comicvine/server/plugins/comicvine-register.ts

@@ -0,0 +1,3 @@
+export default defineNitroPlugin(() => {
+  registerProvider(comicVineProvider)
+})

package/layers/metadata/providers/comicvine/server/utils/metadata-comicvine/client.ts

@@ -0,0 +1,52 @@
+import type { ComicVineApiResponse } from './types'
+
+const FIELD_LIST_ISSUE = 'id,name,issue_number,description,deck,cover_date,store_date,site_detail_url,image,volume,person_credits,publisher'
+const FIELD_LIST_VOLUME = 'id,name,description,deck,start_year,site_detail_url,image,publisher,people'
+
+function getConfig() {
+  const config = useRuntimeConfig()
+  return config.metadataComicvine
+}
+
+async function comicVineFetch<T>(path: string, params: Record<string, string>): Promise<ComicVineApiResponse<T>> {
+  const { apiKey, baseUrl } = getConfig()
+
+  const url = new URL(`${baseUrl}${path}`)
+  url.searchParams.set('api_key', apiKey)
+  url.searchParams.set('format', 'json')
+  for (const [k, v] of Object.entries(params)) url.searchParams.set(k, v)
+
+  const res = await $fetch<ComicVineApiResponse<T>>(url.toString())
+  if (res.status_code !== 1) throw new MetadataProviderError('comicvine', `API error: ${res.error}`)
+  return res
+}
+
+export async function searchComicVineIssues(query: string, limit = 10) {
+  return comicVineFetch<import('./types').ComicVineIssue[]>('/search/', {
+    query,
+    resources: 'issue',
+    limit: String(limit),
+    field_list: FIELD_LIST_ISSUE,
+  })
+}
+
+export async function searchComicVineVolumes(query: string, limit = 10) {
+  return comicVineFetch<import('./types').ComicVineVolume[]>('/search/', {
+    query,
+    resources: 'volume',
+    limit: String(limit),
+    field_list: FIELD_LIST_VOLUME,
+  })
+}
+
+export async function fetchComicVineIssue(id: string) {
+  return comicVineFetch<import('./types').ComicVineIssue>(`/issue/4000-${id}/`, {
+    field_list: FIELD_LIST_ISSUE,
+  })
+}
+
+export async function fetchComicVineVolume(id: string) {
+  return comicVineFetch<import('./types').ComicVineVolume>(`/volume/4050-${id}/`, {
+    field_list: FIELD_LIST_VOLUME,
+  })
+}

package/layers/metadata/providers/comicvine/server/utils/metadata-comicvine/normalise.ts

@@ -0,0 +1,55 @@
+import type { MetadataRecord, MetadataCreator } from '#layers/metadata/shared/types'
+import type { ComicVineIssue, ComicVineVolume } from './types'
+
+// fallow-ignore-next-line complexity
+export function normaliseComicVineIssue(issue: ComicVineIssue): MetadataRecord {
+  const creators: MetadataCreator[] = (issue.person_credits ?? []).map((p) => ({
+    name: p.name,
+    role: p.role,
+    providerId: String(p.id),
+  }))
+
+  return {
+    id: `comicvine:issue:${issue.id}`,
+    provider: 'comicvine',
+    providerId: String(issue.id),
+    mediaType: 'comic',
+    title: issue.volume?.name ? `${issue.volume.name} #${issue.issue_number}` : (issue.name ?? `Issue #${issue.issue_number}`),
+    subtitle: issue.name ?? undefined,
+    description: issue.deck ?? issue.description ?? undefined,
+    creators: creators.length ? creators : undefined,
+    publisher: issue.publisher?.name ?? undefined,
+    publishedAt: issue.cover_date ?? issue.store_date ?? undefined,
+    coverUrl: issue.image?.medium_url ?? issue.image?.original_url ?? undefined,
+    identifiers: { comicVineId: String(issue.id) },
+    sourceUrl: issue.site_detail_url,
+    raw: issue,
+    lastSyncedAt: new Date().toISOString(),
+  }
+}
+
+// fallow-ignore-next-line complexity
+export function normaliseComicVineVolume(volume: ComicVineVolume): MetadataRecord {
+  const creators: MetadataCreator[] = (volume.people ?? []).map((p) => ({
+    name: p.name,
+    role: p.role,
+    providerId: String(p.id),
+  }))
+
+  return {
+    id: `comicvine:volume:${volume.id}`,
+    provider: 'comicvine',
+    providerId: String(volume.id),
+    mediaType: 'comic',
+    title: volume.name,
+    description: volume.deck ?? volume.description ?? undefined,
+    creators: creators.length ? creators : undefined,
+    publisher: volume.publisher?.name ?? undefined,
+    publishedAt: volume.start_year ?? undefined,
+    coverUrl: volume.image?.medium_url ?? volume.image?.original_url ?? undefined,
+    identifiers: { comicVineId: String(volume.id) },
+    sourceUrl: volume.site_detail_url,
+    raw: volume,
+    lastSyncedAt: new Date().toISOString(),
+  }
+}

package/layers/metadata/providers/comicvine/server/utils/metadata-comicvine/provider.ts

@@ -0,0 +1,39 @@
+import type { MetadataProvider } from '#layers/metadata/shared/types'
+
+export const comicVineProvider: MetadataProvider = {
+  id: 'comicvine',
+  label: 'Comic Vine',
+  mediaTypes: ['comic', 'graphic-novel', 'collected-edition'],
+
+  // fallow-ignore-next-line complexity
+  async search({ query, mediaType, limit = 10 }) {
+    const resourceType = mediaType === 'collected-edition' || mediaType === 'graphic-novel' ? 'volume' : 'issue'
+
+    if (resourceType === 'volume') {
+      const res = await searchComicVineVolumes(query, limit)
+      return (Array.isArray(res.results) ? res.results : []).map(normaliseComicVineVolume)
+    }
+
+    const [issueRes, volumeRes] = await Promise.all([
+      searchComicVineIssues(query, Math.ceil(limit / 2)),
+      searchComicVineVolumes(query, Math.floor(limit / 2)),
+    ])
+
+    const issues = (Array.isArray(issueRes.results) ? issueRes.results : []).map(normaliseComicVineIssue)
+    const volumes = (Array.isArray(volumeRes.results) ? volumeRes.results : []).map(normaliseComicVineVolume)
+    return [...issues, ...volumes]
+  },
+
+  async lookup({ providerId, resourceType = 'issue' }) {
+    if (resourceType === 'volume') {
+      const res = await fetchComicVineVolume(providerId)
+      return normaliseComicVineVolume(res.results as import('./types').ComicVineVolume)
+    }
+    const res = await fetchComicVineIssue(providerId)
+    return normaliseComicVineIssue(res.results as import('./types').ComicVineIssue)
+  },
+
+  async sync({ providerId, resourceType = 'issue' }) {
+    return (await comicVineProvider.lookup!({ provider: 'comicvine', providerId, resourceType }))!
+  },
+}

package/layers/metadata/providers/comicvine/server/utils/metadata-comicvine/types.ts

@@ -0,0 +1,36 @@
+export type ComicVineApiResponse<T> = {
+  error: string
+  limit: number
+  offset: number
+  number_of_page_results: number
+  number_of_total_results: number
+  status_code: number
+  results: T
+}
+
+export type ComicVineIssue = {
+  id: number
+  name: string | null
+  issue_number: string
+  description: string | null
+  deck: string | null
+  cover_date: string | null
+  store_date: string | null
+  site_detail_url: string
+  image: { original_url: string; medium_url: string } | null
+  volume: { id: number; name: string } | null
+  person_credits: Array<{ id: number; name: string; role: string }> | null
+  publisher: { id: number; name: string } | null
+}
+
+export type ComicVineVolume = {
+  id: number
+  name: string
+  description: string | null
+  deck: string | null
+  start_year: string | null
+  site_detail_url: string
+  image: { original_url: string; medium_url: string } | null
+  publisher: { id: number; name: string } | null
+  people: Array<{ id: number; name: string; role: string }> | null
+}

package/layers/metadata/providers/comicvine/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/metadata/providers/google-books/nuxt.config.ts

@@ -0,0 +1,32 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'metadata-google-books',
+  },
+
+  extends: ['../../'],
+
+  alias: {
+    '#layers/metadata-google-books': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-06-30',
+
+  runtimeConfig: {
+    metadataGoogleBooks: {
+      apiKey: '', // env: NUXT_METADATA_GOOGLE_BOOKS_API_KEY (optional — anonymous quota is limited)
+    },
+  },
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface RuntimeConfig {
+    metadataGoogleBooks: {
+      apiKey: string
+    }
+  }
+}

package/layers/metadata/providers/google-books/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "kmcom-layer-metadata-google-books",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,metadata,metadata-google-books pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
+  }
+}

package/layers/metadata/providers/google-books/server/plugins/google-books-register.ts

@@ -0,0 +1,3 @@
+export default defineNitroPlugin(() => {
+  registerProvider(googleBooksProvider)
+})

package/layers/metadata/providers/google-books/server/utils/metadata-google-books/client.ts

@@ -0,0 +1,23 @@
+import type { GoogleBooksSearchResponse, GoogleBooksVolume } from './types'
+
+const BASE = 'https://www.googleapis.com/books/v1'
+
+function getApiKey(): string | undefined {
+  return useRuntimeConfig().metadataGoogleBooks?.apiKey || undefined
+}
+
+export async function searchGoogleBooks(query: string, limit = 10): Promise<GoogleBooksSearchResponse> {
+  const params: Record<string, string> = { q: query, maxResults: String(limit) }
+  const apiKey = getApiKey()
+  if (apiKey) params.key = apiKey
+
+  return $fetch<GoogleBooksSearchResponse>(`${BASE}/volumes`, { query: params })
+}
+
+export async function fetchGoogleBooksVolume(id: string): Promise<GoogleBooksVolume> {
+  const params: Record<string, string> = {}
+  const apiKey = getApiKey()
+  if (apiKey) params.key = apiKey
+
+  return $fetch<GoogleBooksVolume>(`${BASE}/volumes/${id}`, { query: params })
+}