kmcom-nuxt-layers 2.3.1 → 2.5.0

package/layers/metadata-openlibrary/server/utils/metadata-openlibrary/normalise.ts

@@ -0,0 +1,81 @@
+import type { MetadataRecord, MetadataCreator } from '#layers/metadata/shared/types'
+import type { OpenLibrarySearchDoc, OpenLibraryWork, OpenLibraryEdition } from './types'
+
+// fallow-ignore-next-line complexity
+export function normaliseOpenLibrarySearchDoc(doc: OpenLibrarySearchDoc): MetadataRecord {
+  const creators: MetadataCreator[] = (doc.author_name ?? []).map((name, i) => ({
+    name,
+    role: 'author',
+    providerId: doc.author_key?.[i]?.replace('/authors/', '') ?? undefined,
+  }))
+
+  const id = doc.key.replace('/works/', '')
+
+  return {
+    id: `openlibrary:work:${id}`,
+    provider: 'openlibrary',
+    providerId: id,
+    mediaType: 'book',
+    title: doc.title,
+    subtitle: doc.subtitle,
+    creators: creators.length ? creators : undefined,
+    publisher: doc.publisher?.[0] ?? undefined,
+    publishedAt: doc.first_publish_year ? String(doc.first_publish_year) : undefined,
+    coverUrl: doc.cover_i ? openLibraryCoverUrl(doc.cover_i) : undefined,
+    identifiers: {
+      isbn10: doc.isbn?.find((i) => i.length === 10),
+      isbn13: doc.isbn?.find((i) => i.length === 13),
+      openLibraryId: id,
+    },
+    sourceUrl: `https://openlibrary.org${doc.key}`,
+    raw: doc,
+    lastSyncedAt: new Date().toISOString(),
+  }
+}
+
+// fallow-ignore-next-line complexity
+export function normaliseOpenLibraryWork(work: OpenLibraryWork): MetadataRecord {
+  const id = work.key.replace('/works/', '')
+  const desc = typeof work.description === 'string' ? work.description : work.description?.value
+
+  return {
+    id: `openlibrary:work:${id}`,
+    provider: 'openlibrary',
+    providerId: id,
+    mediaType: 'book',
+    title: work.title,
+    subtitle: work.subtitle,
+    description: desc,
+    coverUrl: work.covers?.[0] ? openLibraryCoverUrl(work.covers[0]) : undefined,
+    publishedAt: work.first_publish_date,
+    identifiers: { openLibraryId: id },
+    sourceUrl: `https://openlibrary.org${work.key}`,
+    raw: work,
+    lastSyncedAt: new Date().toISOString(),
+  }
+}
+
+// fallow-ignore-next-line complexity
+export function normaliseOpenLibraryEdition(edition: OpenLibraryEdition): MetadataRecord {
+  const id = edition.key.replace('/books/', '')
+
+  return {
+    id: `openlibrary:edition:${id}`,
+    provider: 'openlibrary',
+    providerId: id,
+    mediaType: 'book',
+    title: edition.title,
+    subtitle: edition.subtitle,
+    publisher: edition.publishers?.[0] ?? undefined,
+    publishedAt: edition.publish_date,
+    coverUrl: edition.covers?.[0] ? openLibraryCoverUrl(edition.covers[0]) : undefined,
+    identifiers: {
+      isbn10: edition.isbn_10?.[0],
+      isbn13: edition.isbn_13?.[0],
+      openLibraryId: id,
+    },
+    sourceUrl: `https://openlibrary.org${edition.key}`,
+    raw: edition,
+    lastSyncedAt: new Date().toISOString(),
+  }
+}

package/layers/metadata-openlibrary/server/utils/metadata-openlibrary/provider.ts

@@ -0,0 +1,25 @@
+import type { MetadataProvider } from '#layers/metadata/shared/types'
+
+export const openLibraryProvider: MetadataProvider = {
+  id: 'openlibrary',
+  label: 'Open Library',
+  mediaTypes: ['book', 'graphic-novel', 'collected-edition'],
+
+  async search({ query, limit = 10 }) {
+    const res = await searchOpenLibrary(query, limit)
+    return res.docs.map(normaliseOpenLibrarySearchDoc)
+  },
+
+  async lookup({ providerId, resourceType = 'work' }) {
+    if (resourceType === 'edition') {
+      const edition = await lookupOpenLibraryEdition(providerId)
+      return normaliseOpenLibraryEdition(edition)
+    }
+    const work = await lookupOpenLibraryWork(providerId)
+    return normaliseOpenLibraryWork(work)
+  },
+
+  async sync({ providerId, resourceType = 'work' }) {
+    return (await openLibraryProvider.lookup!({ provider: 'openlibrary', providerId, resourceType }))!
+  },
+}

package/layers/metadata-openlibrary/server/utils/metadata-openlibrary/types.ts

@@ -0,0 +1,48 @@
+export type OpenLibrarySearchDoc = {
+  key: string
+  title: string
+  subtitle?: string
+  author_name?: string[]
+  author_key?: string[]
+  publisher?: string[]
+  first_publish_year?: number
+  isbn?: string[]
+  cover_i?: number
+  number_of_pages_median?: number
+  language?: string[]
+}
+
+export type OpenLibrarySearchResponse = {
+  numFound: number
+  docs: OpenLibrarySearchDoc[]
+}
+
+export type OpenLibraryWork = {
+  key: string
+  title: string
+  subtitle?: string
+  description?: { value: string } | string
+  authors?: Array<{ author: { key: string }; type: { key: string } }>
+  first_publish_date?: string
+  covers?: number[]
+  subjects?: string[]
+}
+
+export type OpenLibraryEdition = {
+  key: string
+  title: string
+  subtitle?: string
+  publishers?: string[]
+  publish_date?: string
+  isbn_13?: string[]
+  isbn_10?: string[]
+  covers?: number[]
+  works?: Array<{ key: string }>
+  number_of_pages?: number
+}
+
+export type OpenLibraryAuthor = {
+  key: string
+  name: string
+  personal_name?: string
+}

package/layers/metadata-openlibrary/tsconfig.json

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

package/layers/routing/server/api/feature-flags.get.ts

@@ -0,0 +1,6 @@
+import type { FeatureValue } from '../../app/types/routing'
+
+export default defineEventHandler(() => {
+  const config = useAppConfig() as { routingLayer?: { features?: Record<string, FeatureValue> } }
+  return config.routingLayer?.features ?? {}
+})

package/layers/scroll/app/plugins/locomotive-scroll.client.ts

@@ -47,7 +47,12 @@ export default defineNuxtPlugin({
 
     if (smoothScroll === true) {
       nuxtApp.hook('app:mounted', () => nextTick(init))
-      nuxtApp.hook('page:finish', () => nextTick(() => ScrollTrigger.refresh()))
+      nuxtApp.hook('page:finish', () =>
+        nextTick(() => {
+          instance.value?.scrollTo(0, { immediate: true })
+          ScrollTrigger.refresh()
+        })
+      )
     } else if (Array.isArray(smoothScroll)) {
       addRouteMiddleware((to, from) => {
         if (smoothScroll.includes(to.path)) {

package/layers/starter/app/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    layers?: Record<string, boolean>
+  }
+  interface AppConfig {
+    layers?: Record<string, boolean>
+  }
+}

package/layers/starter/app/components/StarterHome.vue

@@ -11,36 +11,45 @@ gsap.registerPlugin(ScrollTrigger)
 const heroRef = ref<HTMLElement | null>(null)
 const sectionsRef = ref<HTMLElement | null>(null)
 
+let ctx: ReturnType<typeof gsap.context> | null = null
+
 onMounted(() => {
-  if (heroRef.value) {
-    gsap.from(Array.from(heroRef.value.children), {
-      y: 24,
-      opacity: 0,
-      duration: 0.7,
-      stagger: 0.1,
-      ease: 'power3.out',
-    })
-  }
+  ctx = gsap.context(() => {
+    if (heroRef.value) {
+      gsap.from(Array.from(heroRef.value.children), {
+        y: 24,
+        opacity: 0,
+        duration: 0.7,
+        stagger: 0.1,
+        ease: 'power3.out',
+      })
+    }
+
+    if (sectionsRef.value) {
+      gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
+        scrollTrigger: {
+          trigger: sectionsRef.value,
+          start: 'top 85%',
+          toggleActions: 'play none none none',
+        },
+        y: 32,
+        opacity: 0,
+        scale: 0.97,
+        duration: 0.5,
+        stagger: { amount: 0.5 },
+        ease: 'power3.out',
+      })
+    }
+  })
+})
 
-  if (sectionsRef.value) {
-    gsap.from(sectionsRef.value.querySelectorAll('.layer-card'), {
-      scrollTrigger: {
-        trigger: sectionsRef.value,
-        start: 'top 85%',
-        toggleActions: 'play none none none',
-      },
-      y: 32,
-      opacity: 0,
-      scale: 0.97,
-      duration: 0.5,
-      stagger: { amount: 0.5 },
-      ease: 'power3.out',
-    })
-  }
+onUnmounted(() => {
+  ctx?.revert()
+  ctx = null
 })
 
 const appConfig = useAppConfig()
-const activeLayers = appConfig.layers as Record<string, boolean>
+const activeLayers = appConfig.layers ?? {}
 
 type LayerDef = {
   name: string

package/layers/theme/app/components/ThemePicker/Menu.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
   import { useThemePreferenceModels } from '../../composables/useThemePreferenceModels'
 
-  const { contrastOverride, motionOverride, transparencyOverride, contrastModel, motionModel, transparencyModel } =
-    useThemePreferenceModels()
+  const {
+    contrastOverride,
+    motionOverride,
+    transparencyOverride,
+    contrastModel,
+    motionModel,
+    transparencyModel,
+  } = useThemePreferenceModels()
 </script>
 
 <template>

package/layers/theme/nuxt.config.ts

@@ -1,7 +1,7 @@
 // Theme Layer - Color mode, accent colors, accessibility preferences
 
 declare module '@nuxt/schema' {
-  interface PublicRuntimeConfig {
+  type PublicRuntimeConfig = {
     themeDefaultAccent: string
   }
 }

package/layers/theme/server/plugins/theme-fouc.ts

@@ -1,67 +1,12 @@
 import { buildAccentCSS } from '../utils/accent-css'
-
-/**
- * Nitro render hook — prevents FOUC for all theme preferences by injecting:
- *
- * 1. A `<style>` tag with CSS rules mapping each `[data-theme-colour='X']` to
- *    the correct `--ui-color-primary-*`, `--ui-color-secondary-*`, and
- *    `--ui-color-info-*` values. Each accent selects a coordinated three-colour
- *    palette so primary, secondary, and accent (info) all change together.
- *
- * 2. A blocking `<script>` that reads localStorage and restores all
- *    `data-theme-*` attributes on `<html>` before first paint:
- *    - `data-theme-colour` from `theme-colour` (defaults to 'blue')
- *    - `data-theme-contrast` from `theme-contrast`
- *    - `data-theme-motion` from `theme-motion`
- *    - `data-theme-transparency` from `theme-transparency`
- *    - `data-theme-mode` from `theme-mode` (raw string, not JSON — set by Nuxt Color Mode)
- *
- * Our script runs before CSS link tags (via head.unshift), so setting data-theme-mode
- * here prevents the dark-mode FOUC that would otherwise occur when Nuxt Color Mode's
- * script runs after stylesheets have downloaded. Nuxt Color Mode's script will then
- * set the same value again — this is idempotent and safe.
- */
+import { buildThemeInitScript } from '../utils/fouc-config'
 
 const accentCSS = buildAccentCSS()
 
-// Blocking init script — restores data-* attributes from localStorage before first paint.
-// Written as a self-invoking function to avoid polluting the global scope.
-// JSON.parse handles the quoted string that useLocalStorage writes.
-// Note: theme-mode is stored as a raw string by Nuxt Color Mode (no JSON.stringify).
-function buildInitScript(defaultAccent: string) {
-  return `(function(){
-  try{
-    var h=document.documentElement;
-    var c=localStorage.getItem('theme-colour');
-    h.setAttribute('data-theme-colour',c?JSON.parse(c):'${defaultAccent}');
-    var ct=localStorage.getItem('theme-contrast');
-    var ctv=ct?JSON.parse(ct):'system';
-    if(ctv==='on'){h.setAttribute('data-theme-contrast','high')}
-    else if(ctv==='off'){h.setAttribute('data-theme-contrast','standard')}
-    else{h.setAttribute('data-theme-contrast',(window.matchMedia&&window.matchMedia('(prefers-contrast:more)').matches)?'high':'standard')}
-    var m=localStorage.getItem('theme-motion');
-    var mv=m?JSON.parse(m):'system';
-    if(mv==='on'){h.setAttribute('data-theme-motion','reduced')}
-    else if(mv==='off'){h.setAttribute('data-theme-motion','full')}
-    else{h.setAttribute('data-theme-motion',(window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches)?'reduced':'full')}
-    var t=localStorage.getItem('theme-transparency');
-    var tv=t?JSON.parse(t):'system';
-    if(tv==='on'){h.setAttribute('data-theme-transparency','reduced')}
-    else if(tv==='off'){h.setAttribute('data-theme-transparency','full')}
-    else{h.setAttribute('data-theme-transparency',(window.matchMedia&&window.matchMedia('(prefers-reduced-transparency:reduce)').matches)?'reduced':'full')}
-    var dm=localStorage.getItem('theme-mode');
-    var dmv=dm||'system';
-    if(dmv==='dark'){h.setAttribute('data-theme-mode','dark')}
-    else if(dmv==='light'){h.setAttribute('data-theme-mode','light')}
-    else{h.setAttribute('data-theme-mode',(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches)?'dark':'light')}
-  }catch(e){}
-})()`.replace(/\n\s*/g, '')
-}
-
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
     const config = useRuntimeConfig(event)
-    const initScript = buildInitScript(config.public.themeDefaultAccent || 'blue')
+    const initScript = buildThemeInitScript(config.public.themeDefaultAccent || 'blue')
     html.head.unshift(
       `<style id="theme-accent-css">${accentCSS}</style><script>${initScript}</script>`
     )

package/layers/theme/server/utils/fouc-config.ts

@@ -0,0 +1,85 @@
+type TriStatePreference = {
+  varName: string
+  storageKey: string
+  attribute: string
+  jsonParsed: boolean
+  conditionA: string
+  valueA: string
+  conditionB: string
+  valueB: string
+  mediaQuery: string
+  mediaTrue: string
+  mediaFalse: string
+}
+
+// Each entry produces one tri-state block in the FOUC init script.
+// Adding a new theme preference = adding one entry here.
+const THEME_PREFERENCES: TriStatePreference[] = [
+  {
+    varName: 'ct',
+    storageKey: 'theme-contrast',
+    attribute: 'data-theme-contrast',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'high',
+    conditionB: 'off', valueB: 'standard',
+    mediaQuery: '(prefers-contrast:more)',
+    mediaTrue: 'high', mediaFalse: 'standard',
+  },
+  {
+    varName: 'm',
+    storageKey: 'theme-motion',
+    attribute: 'data-theme-motion',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'reduced',
+    conditionB: 'off', valueB: 'full',
+    mediaQuery: '(prefers-reduced-motion:reduce)',
+    mediaTrue: 'reduced', mediaFalse: 'full',
+  },
+  {
+    varName: 't',
+    storageKey: 'theme-transparency',
+    attribute: 'data-theme-transparency',
+    jsonParsed: true,
+    conditionA: 'on', valueA: 'reduced',
+    conditionB: 'off', valueB: 'full',
+    mediaQuery: '(prefers-reduced-transparency:reduce)',
+    mediaTrue: 'reduced', mediaFalse: 'full',
+  },
+  {
+    varName: 'dm',
+    storageKey: 'theme-mode',
+    attribute: 'data-theme-mode',
+    jsonParsed: false,
+    conditionA: 'dark', valueA: 'dark',
+    conditionB: 'light', valueB: 'light',
+    mediaQuery: '(prefers-color-scheme:dark)',
+    mediaTrue: 'dark', mediaFalse: 'light',
+  },
+]
+
+function buildPrefFragment(p: TriStatePreference): string {
+  const readValue = p.jsonParsed
+    ? `${p.varName}?JSON.parse(${p.varName}):'system'`
+    : `${p.varName}||'system'`
+  return (
+    `var ${p.varName}=localStorage.getItem('${p.storageKey}');` +
+    `var ${p.varName}v=${readValue};` +
+    `if(${p.varName}v==='${p.conditionA}'){h.setAttribute('${p.attribute}','${p.valueA}')}` +
+    `else if(${p.varName}v==='${p.conditionB}'){h.setAttribute('${p.attribute}','${p.valueB}')}` +
+    `else{h.setAttribute('${p.attribute}',(window.matchMedia&&window.matchMedia('${p.mediaQuery}').matches)?'${p.mediaTrue}':'${p.mediaFalse}')}`
+  )
+}
+
+export function buildThemeInitScript(defaultAccent: string): string {
+  const colourBlock =
+    `var c=localStorage.getItem('theme-colour');` +
+    `h.setAttribute('data-theme-colour',c?JSON.parse(c):'${defaultAccent}');`
+
+  return (
+    '(function(){try{' +
+    'var h=document.documentElement;' +
+    colourBlock +
+    THEME_PREFERENCES.map(buildPrefFragment).join('') +
+    '}catch(e){}})()'
+  )
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.3.1",
+  "version": "2.5.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -21,11 +21,17 @@
     "./layers/shader": "./layers/shader/nuxt.config.ts",
     "./layers/mailer": "./layers/mailer/nuxt.config.ts",
     "./layers/forms": "./layers/forms/nuxt.config.ts",
+    "./layers/database": "./layers/database/nuxt.config.ts",
+    "./layers/auth": "./layers/auth/nuxt.config.ts",
     "./layers/theme": "./layers/theme/nuxt.config.ts",
     "./layers/content": "./layers/content/nuxt.config.ts",
     "./layers/feeds": "./layers/feeds/nuxt.config.ts",
     "./layers/routing": "./layers/routing/nuxt.config.ts",
-    "./layers/starter": "./layers/starter/nuxt.config.ts"
+    "./layers/starter": "./layers/starter/nuxt.config.ts",
+    "./layers/metadata": "./layers/metadata/nuxt.config.ts",
+    "./layers/metadata-comicvine": "./layers/metadata-comicvine/nuxt.config.ts",
+    "./layers/metadata-openlibrary": "./layers/metadata-openlibrary/nuxt.config.ts",
+    "./layers/metadata-google-books": "./layers/metadata-google-books/nuxt.config.ts"
   },
   "files": [
     "layers/*/nuxt.config.ts",
@@ -159,6 +165,7 @@
     "@webgpu/glslang": "^0.0.15",
     "@webgpu/types": "^0.1.70",
     "browserslist": "^4.28.2",
+    "browserslist-config-baseline": "^0.5.0",
     "changesets": "^1.0.2",
     "csstype": "^3.2.3",
     "cypress": "^15.16.0",
@@ -207,7 +214,7 @@
     "last 2 Firefox major versions",
     "last 2 Safari major versions",
     "last 2 Edge major versions",
-    "baseline widely available"
+    "extends browserslist-config-baseline"
   ],
   "dependencies": {
     "node-gyp": "^12.3.0",
@@ -228,6 +235,8 @@
     "dev:ui": "PLAYGROUND_LAYERS=core,ui pnpm -F playground dev",
     "dev:layout": "PLAYGROUND_LAYERS=core,ui,layout pnpm -F playground dev",
     "dev:motion": "PLAYGROUND_LAYERS=core,motion pnpm -F playground dev",
+    "dev:database": "PLAYGROUND_LAYERS=core,database pnpm -F playground dev",
+    "dev:auth": "PLAYGROUND_LAYERS=core,auth pnpm -F playground dev",
     "build": "turbo run build",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint -- --fix",

package/types/auth.ts

@@ -0,0 +1,7 @@
+// fallow-ignore-next-line unused-type
+export type SessionUser = {
+  provider: 'github'
+  providerId: string
+  username: string
+  avatarUrl?: string
+}

package/types/index.ts

@@ -17,3 +17,5 @@ export type {
 export type { ScrollLockEvent, LoadingStateEvent, LayerEvent } from './events'
 export type { MotionConfig, TransitionConfig } from './motion'
 export type { PublicRuntimeConfig } from './runtime'
+// fallow-ignore-next-line unused-type
+export type { SessionUser } from './auth'

package/layers/content/app/composables/useCollectionItems.ts

@@ -1,28 +0,0 @@
-import type { Collections } from '@nuxt/content'
-
-type CollectionItem<TCollection extends keyof Collections> = Collections[TCollection]
-
-export function useCollectionItems<TCollection extends keyof Collections>(args: {
-  key: string
-  collection: TCollection
-  sort: (a: CollectionItem<TCollection>, b: CollectionItem<TCollection>) => number
-  options?: { limit?: number | undefined }
-  filter?: (item: CollectionItem<TCollection>) => boolean
-}) {
-  const { key, collection, sort, options = {}, filter } = args
-
-  return useContentData(key, async () => {
-    let items = (await queryCollection(collection).all()) as CollectionItem<TCollection>[]
-    items = items.sort(sort)
-
-    if (filter) {
-      items = items.filter(filter)
-    }
-
-    if (options.limit !== undefined) {
-      items = items.slice(0, options.limit)
-    }
-
-    return items
-  })
-}