nuxtseo-shared 0.1.8 → 0.2.0

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

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-const {
-  icon = 'carbon:search',
-  title,
-  description,
-  variant = 'default',
-} = defineProps<{
-  icon?: string
-  title: string
-  description?: string
-  variant?: 'default' | 'error'
-}>()
-</script>
-
-<template>
-  <div class="devtools-empty">
-    <div class="devtools-empty-icon" :class="`devtools-empty-icon-${variant}`">
-      <UIcon :name="icon" class="w-8 h-8" />
-    </div>
-    <h2 class="devtools-empty-title">
-      {{ title }}
-    </h2>
-    <p v-if="description || $slots.description" class="devtools-empty-description">
-      <slot name="description">
-        {{ description }}
-      </slot>
-    </p>
-    <div v-if="$slots.default" class="devtools-empty-actions">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.devtools-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  max-width: 32rem;
-  margin: 0 auto;
-}
-
-.devtools-empty-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  border-radius: var(--radius-lg);
-  margin-bottom: 1.5rem;
-}
-
-.devtools-empty-icon-default {
-  background: oklch(65% 0.2 145 / 0.12);
-  color: var(--seo-green);
-}
-
-.dark .devtools-empty-icon-default {
-  background: oklch(65% 0.2 145 / 0.15);
-}
-
-.devtools-empty-icon-error {
-  background: oklch(55% 0.2 25 / 0.12);
-  color: oklch(55% 0.2 25);
-}
-
-.dark .devtools-empty-icon-error {
-  background: oklch(55% 0.2 25 / 0.15);
-  color: oklch(75% 0.15 25);
-}
-
-.devtools-empty-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: 0.75rem;
-}
-
-@media (min-width: 640px) {
-  .devtools-empty-title {
-    font-size: 1.25rem;
-  }
-}
-
-.devtools-empty-description {
-  font-size: 0.875rem;
-  color: var(--color-text-muted);
-  margin-bottom: 1.25rem;
-  line-height: 1.5;
-}
-
-@media (min-width: 640px) {
-  .devtools-empty-description {
-    font-size: 1rem;
-  }
-}
-
-.devtools-empty-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-}
-</style>

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

@@ -1,78 +0,0 @@
-<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/DevtoolsKeyValue.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-export interface KeyValueItem {
-  key: string
-  value: string | number | boolean | undefined
-  copyable?: boolean
-  mono?: boolean
-  link?: string
-}
-
-const { items, striped = false } = defineProps<{
-  items: KeyValueItem[]
-  striped?: boolean
-}>()
-</script>
-
-<template>
-  <div class="divide-y divide-[var(--color-border-subtle)]">
-    <div
-      v-for="item in items"
-      :key="item.key"
-      class="devtools-kv-row group"
-      :class="{ 'devtools-kv-striped': striped }"
-    >
-      <span class="devtools-kv-key">{{ item.key }}</span>
-      <div class="devtools-kv-value-wrap">
-        <a
-          v-if="item.link"
-          :href="item.link"
-          target="_blank"
-          rel="noopener"
-          class="link-external text-sm"
-        >
-          {{ item.value }}
-        </a>
-        <span
-          v-else
-          class="devtools-kv-value"
-          :class="{
-            'font-mono': item.mono !== false,
-            'devtools-kv-true': item.value === true,
-            'devtools-kv-false': item.value === false,
-            'devtools-kv-empty': item.value === undefined || item.value === '',
-          }"
-        >
-          {{ item.value === undefined || item.value === '' ? '(empty)' : item.value }}
-        </span>
-        <DevtoolsCopyButton
-          v-if="item.copyable && item.value !== undefined && item.value !== ''"
-          :text="String(item.value)"
-          class="opacity-0 group-hover:opacity-100 transition-opacity"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.devtools-kv-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.625rem 1.25rem;
-  transition: background-color 150ms ease;
-}
-
-.devtools-kv-row:hover {
-  background: var(--color-surface-sunken);
-}
-
-.devtools-kv-striped:nth-child(even) {
-  background: oklch(from var(--color-surface-sunken) l c h / 0.5);
-}
-
-.devtools-kv-key {
-  font-size: 0.8125rem;
-  font-family: var(--font-mono);
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-}
-
-.devtools-kv-value-wrap {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-.devtools-kv-value {
-  font-size: 0.8125rem;
-  text-align: right;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.devtools-kv-true {
-  color: var(--seo-green);
-}
-
-.devtools-kv-false {
-  color: oklch(65% 0.15 25);
-}
-
-.devtools-kv-empty {
-  color: var(--color-text-subtle);
-  font-style: italic;
-}
-</style>

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

@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { colorMode } from '../composables/rpc'
-import { hasProductionUrl, isProductionMode, previewSource, productionUrl } from '../composables/state'
-
-export interface DevtoolsNavItem {
-  value: string
-  to?: string
-  icon: string
-  label: string
-  devOnly?: boolean
-}
-
-const {
-  title,
-  icon,
-  version,
-  navItems,
-  githubUrl,
-  loading = false,
-} = defineProps<{
-  title: string
-  icon: string
-  version?: string
-  navItems: DevtoolsNavItem[]
-  githubUrl: string
-  loading?: boolean
-}>()
-
-const emit = defineEmits<{
-  refresh: []
-}>()
-
-const activeTab = defineModel<string>('activeTab')
-
-const isDark = computed(() => colorMode.value === 'dark')
-
-useHead({
-  title: `Nuxt ${title}`,
-  htmlAttrs: {
-    class: () => isDark.value ? 'dark' : '',
-  },
-})
-
-const filteredNavItems = computed(() =>
-  isProductionMode.value
-    ? navItems.filter(item => !item.devOnly)
-    : navItems,
-)
-
-const productionHostname = computed(() => {
-  try {
-    return new URL(productionUrl.value).hostname
-  }
-  catch {
-    return productionUrl.value
-  }
-})
-
-const isRouteNav = computed(() => navItems.some(item => item.to))
-</script>
-
-<template>
-  <UApp>
-    <div class="relative bg-base flex flex-col min-h-screen">
-      <div class="gradient-bg" />
-
-      <header class="devtools-header glass sticky top-0 z-50">
-        <div class="devtools-header-content">
-          <!-- Logo & Brand -->
-          <div class="flex items-center gap-3 sm:gap-4">
-            <a
-              href="https://nuxtseo.com"
-              target="_blank"
-              rel="noopener"
-              aria-label="Nuxt SEO"
-              class="flex items-center opacity-90 hover:opacity-100 transition-opacity"
-            >
-              <NuxtSeoLogo class="h-6 sm:h-7" />
-            </a>
-
-            <div class="devtools-divider" />
-
-            <div class="flex items-center gap-2">
-              <div class="devtools-brand-icon" aria-hidden="true">
-                <UIcon :name="icon" class="text-base sm:text-lg" />
-              </div>
-              <h1 class="text-sm sm:text-base font-semibold tracking-tight text-[var(--color-text)]">
-                {{ title }}
-              </h1>
-              <UBadge
-                v-if="version"
-                class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
-              >
-                {{ version }}
-              </UBadge>
-            </div>
-          </div>
-
-          <!-- Navigation -->
-          <nav class="flex items-center gap-1 sm:gap-2">
-            <!-- Nav Tabs -->
-            <div class="devtools-nav-tabs">
-              <template v-if="isRouteNav">
-                <NuxtLink
-                  v-for="item of filteredNavItems"
-                  :key="item.value"
-                  :to="item.to"
-                  class="devtools-nav-tab"
-                  :class="[
-                    activeTab === item.value ? 'active' : '',
-                    loading ? 'opacity-50 pointer-events-none' : '',
-                  ]"
-                >
-                  <UTooltip :text="item.label">
-                    <div class="devtools-nav-tab-inner">
-                      <UIcon
-                        :name="item.icon"
-                        class="text-base sm:text-lg"
-                        :class="activeTab === item.value ? 'text-[var(--seo-green)]' : ''"
-                      />
-                      <span class="devtools-nav-label">{{ item.label }}</span>
-                    </div>
-                  </UTooltip>
-                </NuxtLink>
-              </template>
-              <template v-else>
-                <button
-                  v-for="item of filteredNavItems"
-                  :key="item.value"
-                  type="button"
-                  class="devtools-nav-tab"
-                  :class="[
-                    activeTab === item.value ? 'active' : '',
-                    loading ? 'opacity-50 pointer-events-none' : '',
-                  ]"
-                  @click="activeTab = item.value"
-                >
-                  <UTooltip :text="item.label">
-                    <div class="devtools-nav-tab-inner">
-                      <UIcon
-                        :name="item.icon"
-                        class="text-base sm:text-lg"
-                        :class="activeTab === item.value ? 'text-[var(--seo-green)]' : ''"
-                      />
-                      <span class="devtools-nav-label">{{ item.label }}</span>
-                    </div>
-                  </UTooltip>
-                </button>
-              </template>
-            </div>
-
-            <!-- Preview source toggle -->
-            <div v-if="hasProductionUrl" class="devtools-preview-toggle">
-              <button
-                type="button"
-                class="devtools-preview-btn"
-                :class="{ active: previewSource === 'local' }"
-                @click="previewSource = 'local'"
-              >
-                <UIcon name="carbon:laptop" class="w-3.5 h-3.5" aria-hidden="true" />
-                <span class="hidden sm:inline">Local</span>
-              </button>
-              <button
-                type="button"
-                class="devtools-preview-btn"
-                :class="{ active: previewSource === 'production' }"
-                @click="previewSource = 'production'"
-              >
-                <UIcon name="carbon:cloud" class="w-3.5 h-3.5" aria-hidden="true" />
-                <span class="hidden sm:inline">Production</span>
-              </button>
-            </div>
-
-            <!-- Production URL indicator -->
-            <UTooltip v-if="isProductionMode" :text="productionUrl">
-              <span class="devtools-production-badge">
-                <span class="devtools-production-dot" />
-                <span class="hidden sm:inline text-xs">{{ productionHostname }}</span>
-              </span>
-            </UTooltip>
-
-            <!-- Actions -->
-            <div class="flex items-center gap-1">
-              <slot name="actions" />
-
-              <UTooltip text="Refresh">
-                <UButton
-                  icon="carbon:reset"
-                  aria-label="Refresh"
-                  class="devtools-nav-action"
-                  @click="emit('refresh')"
-                />
-              </UTooltip>
-
-              <UTooltip text="GitHub">
-                <UButton
-                  icon="simple-icons:github"
-                  aria-label="GitHub"
-                  :to="githubUrl"
-                  target="_blank"
-                  class="devtools-nav-action hidden sm:flex"
-                />
-              </UTooltip>
-            </div>
-          </nav>
-        </div>
-      </header>
-
-      <!-- Main Content -->
-      <div class="devtools-main">
-        <main class="mx-auto flex flex-col w-full max-w-7xl">
-          <DevtoolsLoading v-if="loading" />
-          <slot v-else />
-        </main>
-      </div>
-    </div>
-  </UApp>
-</template>

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

@@ -1,8 +0,0 @@
-<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/DevtoolsMetric.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-const {
-  label,
-  value,
-  icon,
-  variant = 'default',
-} = defineProps<{
-  label?: string
-  value: string | number
-  icon?: string
-  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'
-}>()
-</script>
-
-<template>
-  <div class="devtools-metric" :class="`devtools-metric-${variant}`">
-    <UIcon v-if="icon" :name="icon" class="devtools-metric-icon" aria-hidden="true" />
-    <span class="devtools-metric-value">{{ value }}</span>
-    <span v-if="label" class="devtools-metric-label">{{ label }}</span>
-  </div>
-</template>
-
-<style scoped>
-.devtools-metric {
-  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);
-  font-variant-numeric: tabular-nums;
-}
-
-.devtools-metric-icon {
-  font-size: 0.875rem;
-  flex-shrink: 0;
-}
-
-.devtools-metric-value {
-  font-family: var(--font-mono);
-  font-weight: 600;
-}
-
-.devtools-metric-label {
-  color: inherit;
-  opacity: 0.7;
-}
-
-/* Variants */
-.devtools-metric-default {
-  background: var(--color-surface-sunken);
-  border: 1px solid var(--color-border-subtle);
-  color: var(--color-text);
-}
-
-.devtools-metric-success {
-  background: oklch(75% 0.15 145 / 0.12);
-  color: oklch(50% 0.15 145);
-}
-
-.dark .devtools-metric-success {
-  background: oklch(50% 0.15 145 / 0.15);
-  color: oklch(75% 0.18 145);
-}
-
-.devtools-metric-warning {
-  background: oklch(80% 0.12 85 / 0.12);
-  color: oklch(55% 0.15 85);
-}
-
-.dark .devtools-metric-warning {
-  background: oklch(55% 0.12 85 / 0.15);
-  color: oklch(75% 0.15 85);
-}
-
-.devtools-metric-danger {
-  background: oklch(65% 0.12 25 / 0.1);
-  color: oklch(55% 0.15 25);
-}
-
-.dark .devtools-metric-danger {
-  background: oklch(45% 0.1 25 / 0.15);
-  color: oklch(70% 0.12 25);
-}
-
-.devtools-metric-info {
-  background: oklch(85% 0.08 200 / 0.1);
-  color: oklch(50% 0.12 200);
-}
-
-.dark .devtools-metric-info {
-  background: oklch(35% 0.08 200 / 0.15);
-  color: oklch(70% 0.1 200);
-}
-</style>

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

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-const {
-  title,
-} = defineProps<{
-  title?: string
-}>()
-
-defineEmits<{
-  close: []
-}>()
-</script>
-
-<template>
-  <div class="devtools-panel">
-    <div v-if="title || $slots.header" class="devtools-panel-header">
-      <slot name="header">
-        <span class="devtools-panel-title">{{ title }}</span>
-      </slot>
-      <div class="devtools-panel-actions">
-        <slot name="actions" />
-        <UButton
-          icon="carbon:close"
-          aria-label="Close panel"
-          @click="$emit('close')"
-        />
-      </div>
-    </div>
-    <div class="devtools-panel-content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.devtools-panel {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-elevated);
-  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.12);
-  overflow: hidden;
-}
-
-.dark .devtools-panel {
-  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
-}
-
-.devtools-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.625rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface-sunken);
-}
-
-.devtools-panel-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.devtools-panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.devtools-panel-content {
-  flex: 1;
-  overflow: auto;
-}
-</style>