nuxtseo-shared 0.1.2 → 0.1.4

package/dist/content.d.mts

@@ -25,7 +25,7 @@ declare function withEditor<T extends ZodTypeAny>(schema: T, config: ContentEdit
  * Only use for fields that genuinely don't work in a form (freeform JSON, deeply nested arrays).
  */
 declare function withEditorHidden<T extends ZodTypeAny>(schema: T): T;
-interface DefineContentSchemaConfig<TSchema extends ZodTypeAny> {
+interface DefineContentSchemaConfig<TSchema extends ZodTypeAny, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions> {
   /**
    * The field name used in frontmatter (e.g. 'robots', 'sitemap', 'ogImage').
    */
@@ -43,6 +43,11 @@ interface DefineContentSchemaConfig<TSchema extends ZodTypeAny> {
    * Documentation URL for migration guidance.
    */
   docsUrl?: string;
+  /**
+   * Hook called when `defineSchema()` is invoked. Use for validation or
+   * registering module-specific side effects (e.g. sitemap filter/onUrl).
+   */
+  onDefineSchema?: (options: TDefineOptions) => void;
 }
 /**
  * Factory for creating a module's `define*Schema()` and deprecated `as*Collection()` exports.
@@ -66,8 +71,8 @@ interface DefineContentSchemaConfig<TSchema extends ZodTypeAny> {
  *
  * export { defineSchema as defineRobotsSchema, asCollection as asRobotsCollection, schema }
  */
-declare function createContentSchemaFactory<TSchema extends ZodTypeAny>(config: DefineContentSchemaConfig<TSchema>, defaultZ: ZodInstance): {
-  defineSchema: (options?: ContentSchemaOptions) => TSchema;
+declare function createContentSchemaFactory<TSchema extends ZodTypeAny, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions>(config: DefineContentSchemaConfig<TSchema, TDefineOptions>, defaultZ: ZodInstance): {
+  defineSchema: (options?: TDefineOptions) => TSchema;
   asCollection: <T>(collection: any) => T;
   schema: z.ZodObject<{
     [x: string]: TSchema;

package/dist/content.mjs

@@ -37,10 +37,11 @@ function withEditorHidden(schema) {
 * export { defineSchema as defineRobotsSchema, asCollection as asRobotsCollection, schema }
 */
 function createContentSchemaFactory(config, defaultZ) {
-	const { fieldName, buildSchema, label, docsUrl } = config;
+	const { fieldName, buildSchema, label, docsUrl, onDefineSchema } = config;
 	const defaultSchema = buildSchema(defaultZ);
 	const schemaObject = defaultZ.object({ [fieldName]: defaultSchema });
 	function defineSchema(options) {
+		if (options && onDefineSchema) onDefineSchema(options);
 		const _z = options?.z ?? defaultZ;
 		if (_z === defaultZ) return defaultSchema;
 		return buildSchema(_z);

package/dist/layer-devtools/app.config.ts

@@ -0,0 +1,27 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'neutral',
+    },
+    button: {
+      defaultVariants: {
+        color: 'neutral',
+        variant: 'ghost',
+        size: 'sm',
+      },
+    },
+    badge: {
+      defaultVariants: {
+        color: 'neutral',
+        variant: 'subtle',
+        size: 'xs',
+      },
+    },
+    tooltip: {
+      defaultVariants: {
+        delayDuration: 0,
+      },
+    },
+  },
+})

package/dist/layer-devtools/assets/css/global.css

@@ -0,0 +1,377 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: 'Hubot Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+
+  /* Neutral palette, true gray with minimal chroma */
+  --color-neutral-50: oklch(98% 0.002 260);
+  --color-neutral-100: oklch(96% 0.003 260);
+  --color-neutral-200: oklch(91% 0.005 260);
+  --color-neutral-300: oklch(85% 0.008 260);
+  --color-neutral-400: oklch(65% 0.015 260);
+  --color-neutral-500: oklch(50% 0.018 260);
+  --color-neutral-600: oklch(40% 0.015 260);
+  --color-neutral-700: oklch(30% 0.012 260);
+  --color-neutral-800: oklch(20% 0.01 260);
+  --color-neutral-900: oklch(14% 0.008 260);
+  --color-neutral-950: oklch(9% 0.005 260);
+}
+
+:root {
+  /* Brand colors - Nuxt SEO green */
+  --seo-green: oklch(65% 0.2 145);
+
+  /* Semantic colors */
+  --color-surface: var(--color-neutral-50);
+  --color-surface-elevated: white;
+  --color-surface-sunken: var(--color-neutral-100);
+  --color-border: var(--color-neutral-200);
+  --color-border-subtle: var(--color-neutral-100);
+  --color-text: var(--color-neutral-900);
+  --color-text-muted: var(--color-neutral-500);
+  --color-text-subtle: var(--color-neutral-400);
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+}
+
+.dark {
+  --color-surface: var(--color-neutral-950);
+  --color-surface-elevated: var(--color-neutral-900);
+  --color-surface-sunken: oklch(7% 0.004 260);
+  --color-border: var(--color-neutral-800);
+  --color-border-subtle: oklch(16% 0.008 260);
+  --color-text: var(--color-neutral-100);
+  --color-text-muted: var(--color-neutral-400);
+  --color-text-subtle: var(--color-neutral-500);
+}
+
+/* Base styles */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-sans);
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  background: var(--color-surface);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+/* Typography */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* Scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(50% 0.015 260 / 0.25) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: oklch(50% 0.015 260 / 0.25);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(50% 0.015 260 / 0.4);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: oklch(55% 0.015 260 / 0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(55% 0.015 260 / 0.35);
+}
+
+/* Gradient background effect */
+.gradient-bg {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.6;
+  background:
+    radial-gradient(ellipse 80% 50% at 50% -20%, oklch(85% 0.12 145 / 0.15), transparent),
+    radial-gradient(ellipse 60% 40% at 100% 0%, oklch(80% 0.1 200 / 0.08), transparent);
+}
+
+.dark .gradient-bg {
+  opacity: 0.4;
+  background:
+    radial-gradient(ellipse 80% 50% at 50% -20%, oklch(40% 0.1 145 / 0.2), transparent),
+    radial-gradient(ellipse 60% 40% at 100% 0%, oklch(35% 0.08 200 / 0.15), transparent);
+}
+
+/* Animation utilities */
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-fade-up {
+  animation: fade-up 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.animate-scale-in {
+  animation: scale-in 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Stagger children animations */
+.stagger-children > * {
+  animation: fade-up 400ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--seo-green);
+  outline-offset: 2px;
+}
+
+/* Base backgrounds */
+.bg-base {
+  background: var(--color-surface);
+}
+
+/* Card styling */
+.card {
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.card:hover {
+  border-color: var(--color-neutral-300);
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.06);
+}
+
+.dark .card:hover {
+  border-color: var(--color-neutral-700);
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.3);
+}
+
+/* Glass effect */
+.glass {
+  background: oklch(100% 0 0 / 0.8);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
+.dark .glass {
+  background: oklch(9% 0.005 260 / 0.85);
+}
+
+/* Code block styling */
+.code-block {
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.code-block .shiki {
+  background: transparent !important;
+}
+
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+}
+
+.code-block-lines .shiki code .line::before {
+  display: none;
+}
+
+/* Status indicators */
+.status-enabled {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  background: oklch(75% 0.15 145 / 0.12);
+  color: oklch(50% 0.15 145);
+}
+
+.dark .status-enabled {
+  background: oklch(50% 0.15 145 / 0.15);
+  color: oklch(75% 0.18 145);
+}
+
+.status-disabled {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  background: oklch(65% 0.12 25 / 0.1);
+  color: oklch(55% 0.15 25);
+}
+
+.dark .status-disabled {
+  background: oklch(45% 0.1 25 / 0.15);
+  color: oklch(70% 0.12 25);
+}
+
+/* Link with external indicator */
+.link-external {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--seo-green);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+.link-external:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.link-external::after {
+  content: '\2197';
+  font-size: 0.75em;
+  opacity: 0.6;
+  transition: transform 150ms ease;
+}
+
+.link-external:hover::after {
+  transform: translate(1px, -1px);
+  opacity: 1;
+}
+
+/* Hint/tip callout */
+.hint-callout {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-radius: var(--radius-md);
+  background: oklch(85% 0.08 200 / 0.08);
+  border: 1px solid oklch(70% 0.08 200 / 0.15);
+}
+
+.dark .hint-callout {
+  background: oklch(30% 0.05 200 / 0.15);
+  border-color: oklch(45% 0.06 200 / 0.2);
+}
+
+.hint-callout-icon {
+  flex-shrink: 0;
+  color: oklch(55% 0.12 200);
+}
+
+.dark .hint-callout-icon {
+  color: oklch(70% 0.1 200);
+}
+
+/* Panel grid pattern background with radial fade */
+.panel-grids {
+  background-color: var(--color-surface-sunken);
+  position: relative;
+}
+
+.panel-grids::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-image:
+    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-position: -1px -1px;
+  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 70%);
+  pointer-events: none;
+}
+
+.panel-grids > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-up,
+  .animate-scale-in,
+  .animate-spin,
+  .stagger-children > * {
+    animation: none;
+  }
+}
+
+/* Subtle text selection */
+::selection {
+  background: oklch(65% 0.2 145 / 0.25);
+}
+
+.dark ::selection {
+  background: oklch(65% 0.2 145 / 0.35);
+}

package/dist/layer-devtools/components/DevtoolsError.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const { icon = 'carbon:warning', title = 'Something went wrong' } = defineProps<{
+  icon?: string
+  title?: string
+  error?: string | Error | null
+}>()
+</script>
+
+<template>
+  <div class="devtools-error">
+    <div class="devtools-error-icon-wrap">
+      <UIcon :name="icon" class="devtools-error-icon" />
+    </div>
+    <p class="devtools-error-title">
+      {{ title }}
+    </p>
+    <p v-if="error" class="devtools-error-message">
+      {{ typeof error === 'string' ? error : error.message }}
+    </p>
+    <div v-if="$slots.default" class="devtools-error-actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.devtools-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.devtools-error-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-lg);
+  background: oklch(65% 0.15 25 / 0.1);
+}
+
+.dark .devtools-error-icon-wrap {
+  background: oklch(45% 0.1 25 / 0.15);
+}
+
+.devtools-error-icon {
+  font-size: 1.5rem;
+  color: oklch(60% 0.18 25);
+}
+
+.dark .devtools-error-icon {
+  color: oklch(70% 0.15 25);
+}
+
+.devtools-error-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.devtools-error-message {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  max-width: 20rem;
+  line-height: 1.5;
+}
+
+.devtools-error-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+</style>

package/dist/layer-devtools/components/DevtoolsLoading.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center justify-center py-20">
+    <UIcon
+      name="carbon:circle-dash"
+      class="animate-spin text-3xl text-[var(--color-text-muted)]"
+    />
+  </div>
+</template>

package/dist/layer-devtools/components/DevtoolsProductionError.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { previewSource, productionUrl } from '../composables/state'
+
+const { error } = defineProps<{
+  error?: string | Error | null
+}>()
+</script>
+
+<template>
+  <DevtoolsError
+    icon="carbon:cloud-offline"
+    title="Production site unreachable"
+    :error="error"
+  >
+    <template v-if="!error">
+      <p class="text-xs text-[var(--color-text-muted)] max-w-xs leading-relaxed">
+        Could not connect to <code class="prod-url">{{ productionUrl }}</code>.
+        Check that the site is deployed and accessible.
+      </p>
+    </template>
+    <UButton
+      variant="soft"
+      size="xs"
+      icon="carbon:laptop"
+      @click="previewSource = 'local'"
+    >
+      Switch to local
+    </UButton>
+  </DevtoolsError>
+</template>
+
+<style scoped>
+.prod-url {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+}
+</style>

package/dist/layer-devtools/components/OCodeBlock.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useRenderCodeHighlight } from '../composables/shiki'
+
+const { code, lang, lines = false, transformRendered } = defineProps<{
+  code: string
+  lang: 'json' | 'xml' | 'js'
+  lines?: boolean
+  transformRendered?: (code: string) => string
+}>()
+
+const rendered = computed(() => {
+  const highlight = useRenderCodeHighlight(code, lang)
+  return transformRendered ? transformRendered(highlight.value || '') : highlight.value
+})
+</script>
+
+<template>
+  <pre
+    class="code-block p-5"
+    :class="lines ? 'code-block-lines' : ''"
+    v-html="rendered"
+  />
+</template>

package/dist/{runtime/app → layer-devtools}/components/OSectionBlock.vue

@@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    icon?: string
-    text?: string
-    description?: string
-    containerClass?: string
-    headerClass?: string
-    collapse?: boolean
-    open?: boolean
-    padding?: boolean | string
-  }>(),
-  {
-    containerClass: '',
-    open: true,
-    padding: true,
-    collapse: true,
-  },
-)
-
-const open = useVModel(props, 'open')
+const { icon, text, description, containerClass = '', collapse = true, padding = true, headerClass } = defineProps<{
+  icon?: string
+  text?: string
+  description?: string
+  containerClass?: string
+  headerClass?: string
+  collapse?: boolean
+  open?: boolean
+  padding?: boolean | string
+}>()
+
+const open = defineModel('open', { default: true })
+
 function onToggle(e: any) {
   open.value = e.target.open
 }

package/dist/layer-devtools/composables/rpc.ts

@@ -0,0 +1,39 @@
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/types'
+import type { $Fetch } from 'nitropack/types'
+import type { Ref } from 'vue'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import { ref, watchEffect } from 'vue'
+
+export const appFetch: Ref<$Fetch | undefined> = ref()
+export const devtools: Ref<NuxtDevtoolsClient | undefined> = ref()
+export const colorMode: Ref<'dark' | 'light'> = ref('dark')
+
+export interface DevtoolsConnectionOptions {
+  onConnected?: (client: any) => void
+  onRouteChange?: (route: any) => void
+}
+
+/**
+ * Initialize the base devtools connection.
+ * Call this in your module's devtools client setup.
+ * Returns a cleanup function.
+ */
+export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
+  onDevtoolsClientConnected(async (client) => {
+    // @ts-expect-error untyped
+    appFetch.value = client.host.app.$fetch
+    watchEffect(() => {
+      colorMode.value = client.host.app.colorMode.value
+    })
+    devtools.value = client.devtools
+    options.onConnected?.(client)
+
+    if (options.onRouteChange) {
+      const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
+      options.onRouteChange($route)
+      client.host.nuxt.$router.afterEach((route: any) => {
+        options.onRouteChange!(route)
+      })
+    }
+  })
+}

package/dist/layer-devtools/composables/shiki.ts

@@ -0,0 +1,46 @@
+import type { HighlighterCore, LanguageRegistration } from 'shiki'
+import type { ComputedRef, MaybeRef, Ref } from 'vue'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { computed, ref, toValue } from 'vue'
+import { colorMode } from './rpc'
+
+export const shiki: Ref<HighlighterCore | undefined> = ref()
+
+export interface LoadShikiOptions {
+  extraLangs?: (LanguageRegistration | Promise<LanguageRegistration>)[]
+}
+
+export async function loadShiki(options: LoadShikiOptions = {}): Promise<HighlighterCore> {
+  const langs: any[] = [
+    import('@shikijs/langs/xml'),
+    import('@shikijs/langs/json'),
+    import('@shikijs/langs/js'),
+  ]
+  if (options.extraLangs) {
+    langs.push(...options.extraLangs)
+  }
+
+  shiki.value = await createHighlighterCore({
+    themes: [
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
+    ],
+    langs,
+    engine: createJavaScriptRegexEngine(),
+  })
+
+  return shiki.value
+}
+
+export function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): ComputedRef<string> {
+  return computed(() => {
+    if (!shiki.value)
+      return ''
+    const theme = colorMode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
+    return shiki.value.codeToHtml(toValue(code) || '', {
+      lang,
+      theme,
+    }) || ''
+  })
+}

package/dist/layer-devtools/composables/state.ts

@@ -0,0 +1,33 @@
+import { useDebounceFn, useLocalStorage } from '@vueuse/core'
+import { hasProtocol, withBase } from 'ufo'
+import { computed, ref } from 'vue'
+
+export const refreshTime = ref(Date.now())
+
+export const hostname = window.location.host
+export const path = ref('/')
+export const query = ref()
+export const base = ref('/')
+
+export const host = computed(() => withBase(base.value, `${window.location.protocol}//${hostname}`))
+
+export const refreshSources = useDebounceFn(() => {
+  refreshTime.value = Date.now()
+}, 200)
+
+export const slowRefreshSources = useDebounceFn(() => {
+  refreshTime.value = Date.now()
+}, 1000)
+
+// Production preview state
+export const previewSource = useLocalStorage<'local' | 'production'>('nuxt-seo:preview-source', 'local')
+export const productionUrl = ref<string>('')
+
+export const hasProductionUrl = computed(() => {
+  const url = productionUrl.value
+  if (!url || !hasProtocol(url))
+    return false
+  return !url.includes('localhost') && !url.includes('127.0.0.1')
+})
+
+export const isProductionMode = computed(() => previewSource.value === 'production' && hasProductionUrl.value)

package/dist/layer-devtools/nuxt.config.ts

@@ -0,0 +1,26 @@
+import { createResolver } from '@nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  ssr: false,
+
+  modules: [
+    '@nuxt/fonts',
+    '@nuxt/ui',
+  ],
+
+  css: [resolve('./assets/css/global.css')],
+
+  fonts: {
+    families: [
+      { name: 'Hubot Sans' },
+    ],
+  },
+
+  devtools: {
+    enabled: false,
+  },
+
+  compatibilityDate: '2026-03-13',
+})

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import { ModuleRegistration } from "./pro.mjs";
+import * as _nuxt_schema0 from "@nuxt/schema";
+
+//#region src/module.d.ts
+declare const _default: _nuxt_schema0.NuxtModule<_nuxt_schema0.ModuleOptions, _nuxt_schema0.ModuleOptions, false>;
+/**
+ * Register a Nuxt SEO module with the shared instance.
+ * Pro modules are detected by name and trigger license verification at build time.
+ *
+ * Call this from your module's setup().
+ */
+declare function registerNuxtSeoModule(registration: ModuleRegistration): void;
+//#endregion
+export { _default as default, registerNuxtSeoModule };

package/dist/module.mjs

@@ -0,0 +1,33 @@
+import { hookNuxtSeoProLicense } from "./pro.mjs";
+import { hookNuxtSeoTelemetry } from "./telemetry.mjs";
+import { defineNuxtModule, useNuxt } from "@nuxt/kit";
+//#region src/module.ts
+var module_default = defineNuxtModule({
+	meta: {
+		name: "nuxtseo-shared",
+		configKey: "nuxtSeoShared",
+		compatibility: { nuxt: ">=3.16.0" }
+	},
+	setup() {
+		hookNuxtSeoProLicense();
+		hookNuxtSeoTelemetry();
+	}
+});
+const PRO_MODULES = new Set(["nuxt-skew-protection", "nuxt-ai-ready"]);
+/**
+* Register a Nuxt SEO module with the shared instance.
+* Pro modules are detected by name and trigger license verification at build time.
+*
+* Call this from your module's setup().
+*/
+function registerNuxtSeoModule(registration) {
+	const nuxt = useNuxt();
+	nuxt._nuxtSeoModules = nuxt._nuxtSeoModules || [];
+	nuxt._nuxtSeoModules.push(registration);
+	if (PRO_MODULES.has(registration.name)) {
+		nuxt._nuxtSeoProModules = nuxt._nuxtSeoProModules || [];
+		nuxt._nuxtSeoProModules.push(registration);
+	}
+}
+//#endregion
+export { module_default as default, registerNuxtSeoModule };

package/dist/pro.d.mts

@@ -2,7 +2,6 @@
 interface ModuleRegistration {
   name: string;
   version?: string;
-  secret?: string;
   features?: Record<string, boolean | string | number>;
 }
 /**

package/dist/telemetry.d.mts

@@ -0,0 +1,11 @@
+//#region src/telemetry.d.ts
+/**
+ * Hook into build to send telemetry. Call once from the shared module.
+ * Reads from the existing _nuxtSeoModules registration list.
+ * Only fires in CI, never in dev/test, fully fire-and-forget.
+ *
+ * Disable with NUXT_SEO_TELEMETRY_DISABLED=1
+ */
+declare function hookNuxtSeoTelemetry(): void;
+//#endregion
+export { hookNuxtSeoTelemetry };

package/dist/telemetry.mjs

@@ -0,0 +1,49 @@
+import { useNuxt } from "@nuxt/kit";
+import { isCI, isTest, provider } from "std-env";
+import { $fetch } from "ofetch";
+import { createHash } from "node:crypto";
+import { detectPackageManager } from "pkg-types";
+//#region src/telemetry.ts
+const TELEMETRY_ENDPOINT = "https://nuxtseo.com/api/telemetry/collect";
+/**
+* Hook into build to send telemetry. Call once from the shared module.
+* Reads from the existing _nuxtSeoModules registration list.
+* Only fires in CI, never in dev/test, fully fire-and-forget.
+*
+* Disable with NUXT_SEO_TELEMETRY_DISABLED=1
+*/
+function hookNuxtSeoTelemetry() {
+	const nuxt = useNuxt();
+	if (!isCI || isTest || process.env.VITEST || process.env.NUXT_SEO_TELEMETRY_DISABLED) return;
+	if (nuxt._isNuxtSeoTelemetryHooked) return;
+	nuxt._isNuxtSeoTelemetryHooked = true;
+	nuxt.hooks.hook("build:done", async () => {
+		const modules = nuxt._nuxtSeoModules || [];
+		if (modules.length === 0) return;
+		const projectHash = createHash("sha256").update(nuxt.options.rootDir).digest("hex").slice(0, 16);
+		const config = {};
+		for (const mod of modules) {
+			if (!mod.features) continue;
+			const safe = {};
+			for (const [k, v] of Object.entries(mod.features)) if (typeof v === "boolean" || typeof v === "number") safe[k] = v;
+			if (Object.keys(safe).length > 0) config[mod.name] = safe;
+		}
+		$fetch(TELEMETRY_ENDPOINT, {
+			method: "POST",
+			body: {
+				projectHash,
+				modules: modules.map((m) => m.name),
+				moduleVersions: Object.fromEntries(modules.filter((m) => m.version).map((m) => [m.name, m.version])),
+				config: Object.keys(config).length > 0 ? config : void 0,
+				nuxtVersion: nuxt._version,
+				nodeVersion: process.version,
+				os: process.platform,
+				packageManager: await detectPackageManager(nuxt.options.rootDir).then((r) => r?.name).catch(() => void 0),
+				ci: provider || "true"
+			},
+			timeout: 5e3
+		}).catch(() => {});
+	});
+}
+//#endregion
+export { hookNuxtSeoTelemetry };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-shared",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Shared utilities for Nuxt SEO modules.",
   "author": {
     "name": "Harlan Wilton",
@@ -14,6 +14,10 @@
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
+    "./module": {
+      "types": "./dist/module.d.mts",
+      "import": "./dist/module.mjs"
+    },
     "./content": {
       "types": "./dist/content.d.mts",
       "import": "./dist/content.mjs"
@@ -34,21 +38,7 @@
       "types": "./dist/pro.d.mts",
       "import": "./dist/pro.mjs"
     },
-    "./runtime/app": {
-      "types": "./dist/runtime/app/index.d.mts",
-      "import": "./dist/runtime/app/index.mjs"
-    },
-    "./runtime/app/composables/rpc": {
-      "types": "./dist/runtime/app/composables/rpc.d.mts",
-      "import": "./dist/runtime/app/composables/rpc.mjs"
-    },
-    "./runtime/app/composables/shiki": {
-      "types": "./dist/runtime/app/composables/shiki.d.mts",
-      "import": "./dist/runtime/app/composables/shiki.mjs"
-    },
-    "./runtime/app/components/OCodeBlock": "./dist/runtime/app/components/OCodeBlock.vue",
-    "./runtime/app/components/OSectionBlock": "./dist/runtime/app/components/OSectionBlock.vue",
-    "./runtime/app/components/NuxtSeoLogo": "./dist/runtime/app/components/NuxtSeoLogo.vue"
+    "./layer-devtools": "./dist/layer-devtools"
   },
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -96,7 +86,7 @@
     "vue": "^3.5.30"
   },
   "scripts": {
-    "build": "obuild",
+    "build": "obuild && cp -r src/layer-devtools dist/layer-devtools",
     "stub": "obuild --stub"
   }
 }

package/dist/runtime/app/components/OCodeBlock.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRenderCodeHighlight } from '../composables/shiki'
-
-const props = withDefaults(
-  defineProps<{
-    code: string
-    lang: 'json' | 'xml' | 'js'
-    lines?: boolean
-    transformRendered?: (code: string) => string
-  }>(),
-  {
-    lines: false,
-  },
-)
-const rendered = computed(() => {
-  const code = useRenderCodeHighlight(props.code, props.lang)
-  return props.transformRendered ? props.transformRendered(code.value || '') : code.value
-})
-</script>
-
-<template>
-  <pre
-    class="code-block p-5"
-    :class="lines ? 'code-block-lines' : ''"
-    v-html="rendered"
-  />
-</template>

package/dist/runtime/app/composables/rpc.d.mts

@@ -1,16 +0,0 @@
-import type { NuxtDevtoolsClient } from "@nuxt/devtools-kit/types";
-import type { $Fetch } from "nitropack/types";
-import type { Ref } from "vue";
-export declare const appFetch: Ref<$Fetch | undefined>;
-export declare const devtools: Ref<NuxtDevtoolsClient | undefined>;
-export declare const colorMode: Ref<"dark" | "light">;
-export interface DevtoolsConnectionOptions {
-	onConnected?: (client: any) => void;
-	onRouteChange?: (route: any) => void;
-}
-/**
-* Initialize the base devtools connection.
-* Call this in your module's devtools client setup.
-* Returns a cleanup function.
-*/
-export declare function useDevtoolsConnection(options?: DevtoolsConnectionOptions): void;

package/dist/runtime/app/composables/rpc.mjs

@@ -1,28 +0,0 @@
-import { onDevtoolsClientConnected } from "@nuxt/devtools-kit/iframe-client";
-import { ref, watchEffect } from "vue";
-export const appFetch = ref();
-export const devtools = ref();
-export const colorMode = ref("dark");
-/**
-* Initialize the base devtools connection.
-* Call this in your module's devtools client setup.
-* Returns a cleanup function.
-*/
-export function useDevtoolsConnection(options = {}) {
-	onDevtoolsClientConnected(async (client) => {
-		// @ts-expect-error untyped
-		appFetch.value = client.host.app.$fetch;
-		watchEffect(() => {
-			colorMode.value = client.host.app.colorMode.value;
-		});
-		devtools.value = client.devtools;
-		options.onConnected?.(client);
-		if (options.onRouteChange) {
-			const $route = client.host.nuxt.vueApp.config.globalProperties?.$route;
-			options.onRouteChange($route);
-			client.host.nuxt.$router.afterEach((route) => {
-				options.onRouteChange(route);
-			});
-		}
-	});
-}

package/dist/runtime/app/composables/shiki.d.mts

@@ -1,8 +0,0 @@
-import type { HighlighterCore, LanguageRegistration } from "shiki";
-import type { ComputedRef, MaybeRef, Ref } from "vue";
-export declare const shiki: Ref<HighlighterCore | undefined>;
-export interface LoadShikiOptions {
-	extraLangs?: (LanguageRegistration | Promise<LanguageRegistration>)[];
-}
-export declare function loadShiki(options?: LoadShikiOptions): Promise<HighlighterCore>;
-export declare function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): ComputedRef<string>;

package/dist/runtime/app/composables/shiki.mjs

@@ -1,31 +0,0 @@
-import { createHighlighterCore } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-import { computed, ref, toValue } from "vue";
-import { colorMode } from "./rpc.mjs";
-export const shiki = ref();
-export async function loadShiki(options = {}) {
-	const langs = [
-		import("@shikijs/langs/xml"),
-		import("@shikijs/langs/json"),
-		import("@shikijs/langs/js")
-	];
-	if (options.extraLangs) {
-		langs.push(...options.extraLangs);
-	}
-	shiki.value = await createHighlighterCore({
-		themes: [import("@shikijs/themes/vitesse-light"), import("@shikijs/themes/vitesse-dark")],
-		langs,
-		engine: createJavaScriptRegexEngine()
-	});
-	return shiki.value;
-}
-export function useRenderCodeHighlight(code, lang) {
-	return computed(() => {
-		if (!shiki.value) return "";
-		const theme = colorMode.value === "dark" ? "vitesse-dark" : "vitesse-light";
-		return shiki.value.codeToHtml(toValue(code) || "", {
-			lang,
-			theme
-		}) || "";
-	});
-}

package/dist/runtime/app/index.d.mts

@@ -1,2 +0,0 @@
-export { appFetch, colorMode, devtools } from "./composables/rpc.mjs";
-export { loadShiki, shiki, useRenderCodeHighlight } from "./composables/shiki.mjs";

package/dist/runtime/app/index.mjs

@@ -1,2 +0,0 @@
-export { appFetch, colorMode, devtools } from "./composables/rpc.mjs";
-export { loadShiki, shiki, useRenderCodeHighlight } from "./composables/shiki.mjs";