nuxtseo-shared 0.1.9 → 0.3.0

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

@@ -1,593 +0,0 @@
-@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);
-}
-
-/* ---- DevtoolsLayout ---- */
-
-/* Base HTML for devtools */
-html {
-  font-family: var(--font-sans);
-  overflow-y: scroll;
-  overscroll-behavior: none;
-}
-
-body {
-  min-height: 100vh;
-}
-
-html.dark {
-  color-scheme: dark;
-}
-
-/* Header */
-.devtools-header {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.devtools-header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.625rem 1rem;
-  max-width: 80rem;
-  margin: 0 auto;
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .devtools-header-content {
-    padding: 0.75rem 1.25rem;
-  }
-}
-
-.devtools-divider {
-  width: 1px;
-  height: 1.25rem;
-  background: var(--color-border);
-}
-
-.devtools-brand-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--radius-sm);
-  background: oklch(65% 0.2 145 / 0.12);
-  color: var(--seo-green);
-}
-
-/* Navigation tabs */
-.devtools-nav-tabs {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  padding: 0.25rem;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-sunken);
-  border: 1px solid var(--color-border-subtle);
-}
-
-.devtools-nav-tab {
-  position: relative;
-  border-radius: var(--radius-sm);
-  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.devtools-nav-tab-inner {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  color: var(--color-text-muted);
-  font-size: 0.8125rem;
-  font-weight: 500;
-}
-
-@media (min-width: 640px) {
-  .devtools-nav-tab-inner {
-    padding: 0.375rem 0.75rem;
-  }
-}
-
-.devtools-nav-tab:hover .devtools-nav-tab-inner {
-  color: var(--color-text);
-}
-
-.devtools-nav-tab.active {
-  background: var(--color-surface-elevated);
-  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
-}
-
-.dark .devtools-nav-tab.active {
-  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
-}
-
-.devtools-nav-tab.active .devtools-nav-tab-inner {
-  color: var(--color-text);
-}
-
-.devtools-nav-label {
-  display: none;
-}
-
-@media (min-width: 640px) {
-  .devtools-nav-label {
-    display: inline;
-  }
-}
-
-.devtools-nav-action {
-  color: var(--color-text-muted) !important;
-}
-
-.devtools-nav-action:hover {
-  color: var(--color-text) !important;
-  background: var(--color-surface-sunken) !important;
-}
-
-/* Preview source toggle */
-.devtools-preview-toggle {
-  display: flex;
-  gap: 1px;
-  background: var(--color-border);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.devtools-preview-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--color-text-muted);
-  background: var(--color-surface-sunken);
-  border: none;
-  cursor: pointer;
-  transition: color 150ms, background 150ms;
-  white-space: nowrap;
-}
-
-.devtools-preview-btn:hover {
-  color: var(--color-text);
-  background: var(--color-surface-elevated);
-}
-
-.devtools-preview-btn.active {
-  color: var(--color-text);
-  background: var(--color-surface-elevated);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
-}
-
-.dark .devtools-preview-btn.active {
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.2);
-}
-
-/* Production URL badge */
-.devtools-production-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  background: oklch(85% 0.12 145 / 0.12);
-  color: oklch(45% 0.15 145);
-  font-weight: 500;
-  font-family: var(--font-mono, ui-monospace, monospace);
-}
-
-.dark .devtools-production-badge {
-  background: oklch(35% 0.08 145 / 0.2);
-  color: oklch(75% 0.12 145);
-}
-
-.devtools-production-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: oklch(65% 0.2 145);
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* Main content wrapper */
-.devtools-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0.75rem;
-  min-height: calc(100vh - 60px);
-}
-
-@media (min-width: 640px) {
-  .devtools-main {
-    padding: 1rem;
-  }
-}
-
-@media (max-height: 600px) {
-  .devtools-main {
-    padding: 0;
-    min-height: 0;
-  }
-}

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

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-const {
-  icon,
-  variant = 'info',
-} = defineProps<{
-  icon?: string
-  variant?: 'info' | 'warning' | 'success' | 'production'
-}>()
-
-const defaultIcons: Record<string, string> = {
-  info: 'carbon:information',
-  warning: 'carbon:warning',
-  success: 'carbon:checkmark-outline',
-  production: 'carbon:cloud',
-}
-</script>
-
-<template>
-  <div class="devtools-alert" :class="`devtools-alert-${variant}`" role="status">
-    <UIcon :name="icon || defaultIcons[variant]" class="devtools-alert-icon" aria-hidden="true" />
-    <div class="devtools-alert-content">
-      <slot />
-    </div>
-    <div v-if="$slots.action" class="devtools-alert-action">
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.devtools-alert {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.devtools-alert-icon {
-  flex-shrink: 0;
-}
-
-.devtools-alert-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.devtools-alert-action {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-/* Info */
-.devtools-alert-info {
-  background: oklch(85% 0.1 230 / 0.1);
-  color: oklch(55% 0.12 230);
-  border-bottom-color: oklch(75% 0.1 230 / 0.2);
-}
-
-.dark .devtools-alert-info {
-  background: oklch(45% 0.1 230 / 0.15);
-  color: oklch(80% 0.1 230);
-}
-
-/* Warning */
-.devtools-alert-warning {
-  background: oklch(85% 0.12 85 / 0.1);
-  color: oklch(55% 0.15 85);
-  border-bottom-color: oklch(75% 0.12 85 / 0.2);
-}
-
-.dark .devtools-alert-warning {
-  background: oklch(45% 0.12 85 / 0.15);
-  color: oklch(80% 0.12 85);
-}
-
-/* Success */
-.devtools-alert-success {
-  background: oklch(75% 0.15 145 / 0.12);
-  color: oklch(50% 0.15 145);
-  border-bottom-color: oklch(65% 0.12 145 / 0.2);
-}
-
-.dark .devtools-alert-success {
-  background: oklch(50% 0.15 145 / 0.15);
-  color: oklch(75% 0.18 145);
-}
-
-/* Production */
-.devtools-alert-production {
-  background: oklch(85% 0.12 145 / 0.1);
-  color: oklch(45% 0.15 145);
-  border-bottom-color: oklch(75% 0.12 145 / 0.2);
-}
-
-.dark .devtools-alert-production {
-  background: oklch(35% 0.08 145 / 0.15);
-  color: oklch(75% 0.12 145);
-}
-</style>

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

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { useCopy } from '../composables/clipboard'
-
-const { text } = defineProps<{
-  text: string
-}>()
-
-const { copy, copied } = useCopy()
-</script>
-
-<template>
-  <UTooltip :text="copied ? 'Copied!' : 'Copy'">
-    <UButton
-      :icon="copied ? 'carbon:checkmark' : 'carbon:copy'"
-      :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
-      :class="copied ? 'text-[var(--seo-green)]' : ''"
-      @click="copy(text)"
-    />
-  </UTooltip>
-</template>

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

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const { url } = defineProps<{
-  url: string
-}>()
-</script>
-
-<template>
-  <div class="h-full max-h-full overflow-hidden">
-    <iframe :src="url" :title="`Documentation - ${url}`" class="w-full h-full border-none" style="min-height: calc(100vh - 100px);" />
-  </div>
-</template>