@innertia-solutions/innertia-nuxt 0.1.12 → 0.1.13

package/components/Attention.vue

@@ -0,0 +1,269 @@
+<script setup>
+/**
+ * <Attention> — Wrapper que aplica efectos de "llamar la atención" a su slot.
+ *
+ * Efectos:
+ *  - 'ping'           → ondas de radar concéntricas saliendo del elemento
+ *  - 'pulse'          → respiración (scale 1 → 1.05)
+ *  - 'shake'          → vibración tipo campana (rotate)
+ *  - 'bounce'         → rebote vertical
+ *  - 'glow'           → halo de color difuminado
+ *  - 'shimmer-border' → borde con gradiente cónico multicolor girando
+ *
+ * Props clave:
+ *  - active      → encender/apagar la animación
+ *  - color       → semántico ('primary','success','danger','warning'...) o CSS color
+ *  - colors      → array para shimmer-border (multicolor)
+ *  - intensity   → 'subtle' | 'normal' | 'strong' (escala los keyframes)
+ *  - duration    → ms (por defecto depende del efecto)
+ *  - border      → grosor del shimmer-border en px
+ *  - radius      → radio del wrapper (para que rings/glow lo respeten)
+ *  - count       → número de iteraciones (default Infinity)
+ *
+ * ```vue
+ * <Attention effect="ping" color="danger" radius="full">
+ *   <button class="bg-red-500 size-10 rounded-full"><IconBell /></button>
+ * </Attention>
+ *
+ * <Attention effect="shake" :duration="1500">
+ *   <IconBell class="size-6 text-amber-500" />
+ * </Attention>
+ *
+ * <Attention effect="shimmer-border" :colors="['#3b82f6','#8b5cf6','#ec4899']" radius="md">
+ *   <button class="px-4 py-2 bg-card">Probar PRO</button>
+ * </Attention>
+ * ```
+ */
+
+const props = defineProps({
+  effect:    { type: String, default: 'ping', validator: v => ['ping','pulse','shake','bounce','glow','shimmer-border'].includes(v) },
+  active:    { type: Boolean, default: true },
+  color:     { type: String,  default: 'primary' },
+  colors:    { type: Array,   default: () => ['#3b82f6', '#8b5cf6', '#ec4899'] }, // para shimmer-border
+  intensity: { type: String,  default: 'normal', validator: v => ['subtle','normal','strong'].includes(v) },
+  duration:  { type: Number,  default: 0 }, // 0 = default por efecto
+  border:    { type: Number,  default: 2 },
+  /** Radio del wrapper: 'inherit' | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' o un valor CSS. */
+  radius:    { type: String,  default: 'inherit' },
+  /** Iteraciones de la animación. Default 'infinite'. Pasá un número para limitar. */
+  count:     { type: [Number, String], default: 'infinite' },
+})
+
+const COLOR_MAP = {
+  primary:    'var(--color-primary)',
+  foreground: 'var(--color-foreground)',
+  muted:      'var(--color-muted-foreground)',
+  success:    '#10b981',
+  danger:     '#ef4444',
+  warning:    '#f59e0b',
+  info:       '#3b82f6',
+  emerald:    '#10b981',
+  red:        '#ef4444',
+  amber:      '#f59e0b',
+  blue:       '#3b82f6',
+  violet:     '#8b5cf6',
+  pink:       '#ec4899',
+}
+
+const resolvedColor = computed(() => COLOR_MAP[props.color] ?? props.color)
+
+const radiusMap = {
+  inherit: 'inherit',
+  none:    '0',
+  sm:      'var(--radius-sm, 0.25rem)',
+  md:      'var(--radius-control, 0.5rem)',
+  lg:      'var(--radius-card, 0.75rem)',
+  xl:      'var(--radius-xl, 1rem)',
+  full:    '9999px',
+}
+const resolvedRadius = computed(() => radiusMap[props.radius] ?? props.radius)
+
+// Duración default por efecto — más lentas = más sofisticadas.
+const defaultDuration = {
+  ping: 2400,
+  pulse: 2400,
+  shake: 1400,
+  bounce: 1400,
+  glow: 2800,
+  'shimmer-border': 4500,
+}
+const resolvedDuration = computed(() => props.duration > 0 ? props.duration : (defaultDuration[props.effect] ?? 1800))
+
+const intensityScale = computed(() => ({ subtle: 0.6, normal: 1, strong: 1.5 }[props.intensity] ?? 1))
+
+const cssVars = computed(() => ({
+  '--att-color':      resolvedColor.value,
+  '--att-c1':         props.colors[0] ?? resolvedColor.value,
+  '--att-c2':         props.colors[1] ?? resolvedColor.value,
+  '--att-c3':         props.colors[2] ?? resolvedColor.value,
+  '--att-c4':         props.colors[3] ?? props.colors[0] ?? resolvedColor.value,
+  '--att-dur':        resolvedDuration.value + 'ms',
+  '--att-radius':     resolvedRadius.value,
+  '--att-border':     props.border + 'px',
+  '--att-scale':      intensityScale.value,
+  '--att-count':      String(props.count),
+}))
+
+const hasRings        = computed(() => props.active && props.effect === 'ping')
+const hasGlow         = computed(() => props.active && props.effect === 'glow')
+const hasShimmer      = computed(() => props.active && props.effect === 'shimmer-border')
+const hasInlineEffect = computed(() => props.active && ['pulse','shake','bounce'].includes(props.effect))
+</script>
+
+<template>
+  <span
+    class="att-wrap"
+    :class="active ? `att-mode-${effect}` : ''"
+    :style="cssVars"
+  >
+    <!-- Ondas de radar (ping) -->
+    <span v-if="hasRings" class="att-ring att-ring-a" aria-hidden="true" />
+    <span v-if="hasRings" class="att-ring att-ring-b" aria-hidden="true" />
+
+    <!-- Halo (glow) -->
+    <span v-if="hasGlow" class="att-glow" aria-hidden="true" />
+
+    <!-- Borde gradiente cónico (shimmer-border) -->
+    <span v-if="hasShimmer" class="att-shimmer" aria-hidden="true" />
+
+    <!-- Contenido — recibe la transformación cuando aplica -->
+    <span
+      class="att-content"
+      :class="hasInlineEffect ? `att-anim-${effect}` : ''"
+    >
+      <slot />
+    </span>
+  </span>
+</template>
+
+<style scoped>
+/* Custom property registrada para que el ángulo del conic-gradient pueda
+   interpolar via animation (sin esto, no anima). */
+@property --att-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.att-wrap {
+  position: relative;
+  display: inline-flex;
+  isolation: isolate;
+  border-radius: var(--att-radius);
+}
+.att-content {
+  position: relative;
+  display: inline-flex;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+/* ── PING — onda discreta ───────────────────────────────────────────── */
+.att-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid var(--att-color);
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  animation: att-ping var(--att-dur) cubic-bezier(0, 0, 0.2, 1) var(--att-count);
+}
+.att-ring-b { animation-delay: calc(var(--att-dur) / 2); }
+@keyframes att-ping {
+  0%   { transform: scale(1);   opacity: calc(0.5 * var(--att-scale)); }
+  100% { transform: scale(calc(1.35 + 0.25 * var(--att-scale))); opacity: 0; }
+}
+
+/* ── PULSE — respiración casi imperceptible ─────────────────────────── */
+.att-anim-pulse {
+  animation: att-pulse var(--att-dur) ease-in-out var(--att-count);
+}
+@keyframes att-pulse {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(calc(1 + 0.025 * var(--att-scale))); }
+}
+
+/* ── SHAKE — leve oscilación ────────────────────────────────────────── */
+.att-anim-shake {
+  animation: att-shake var(--att-dur) ease-in-out var(--att-count);
+  transform-origin: top center;
+}
+@keyframes att-shake {
+  0%, 60%, 100%        { transform: rotate(0); }
+  10%, 30%             { transform: rotate(calc(-7deg * var(--att-scale))); }
+  20%, 40%             { transform: rotate(calc(7deg * var(--att-scale))); }
+  50%                  { transform: rotate(0); }
+}
+
+/* ── BOUNCE — rebote sutil ──────────────────────────────────────────── */
+.att-anim-bounce {
+  animation: att-bounce var(--att-dur) cubic-bezier(.5,.05,.5,1) var(--att-count);
+}
+@keyframes att-bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(calc(-3px * var(--att-scale))); }
+}
+
+/* ── GLOW — halo difuso muy tenue ───────────────────────────────────── */
+.att-glow {
+  position: absolute;
+  inset: calc(-2px * var(--att-scale));
+  border-radius: inherit;
+  background: var(--att-color);
+  filter: blur(calc(10px * var(--att-scale)));
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0;
+  animation: att-glow var(--att-dur) ease-in-out var(--att-count);
+}
+@keyframes att-glow {
+  0%, 100% { opacity: calc(0.10 * var(--att-scale)); }
+  50%      { opacity: calc(0.28 * var(--att-scale)); }
+}
+
+/* ── SHIMMER-BORDER — gradiente fluyendo por el borde ───────────────── */
+/* Técnica: contenedor con conic-gradient + mask hueco para que sólo se
+   renderice el borde. El ángulo del gradiente se anima (no el elemento)
+   para que el flujo sea suave y los corners no se vean. */
+.att-shimmer {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--att-border);
+  background:
+    conic-gradient(
+      from var(--att-angle),
+      var(--att-c1),
+      var(--att-c2),
+      var(--att-c3),
+      var(--att-c4),
+      var(--att-c1)
+    );
+  /* Hueco: pinta sólo el padding (el borde). */
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+          mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;  /* Por encima del contenido para que se vea como borde. */
+  animation: att-angle var(--att-dur) linear var(--att-count);
+}
+@keyframes att-angle {
+  to { --att-angle: 360deg; }
+}
+
+/* Reducción de animaciones por accesibilidad */
+@media (prefers-reduced-motion: reduce) {
+  .att-ring,
+  .att-glow,
+  .att-shimmer,
+  .att-anim-pulse,
+  .att-anim-shake,
+  .att-anim-bounce { animation: none !important; }
+}
+</style>

package/components/Chart/index.vue

@@ -0,0 +1,193 @@
+<script setup>
+import { computed } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+
+const props = defineProps({
+  /** Tipo de gráfico: line | bar | area | donut | pie | radialBar | scatter | heatmap */
+  type:        { type: String, default: 'line' },
+  /** Series de datos — formato ApexCharts */
+  series:      { type: Array, required: true },
+  /** Categorías para el eje X */
+  categories:  { type: Array, default: () => [] },
+  /** Altura del gráfico en px o string CSS */
+  height:      { type: [Number, String], default: 320 },
+  /** Opciones ApexCharts adicionales — se fusionan sobre las defaults */
+  options:     { type: Object, default: () => ({}) },
+  /** Colores personalizados. Si se omite, usa los tokens --chart-* */
+  colors:      { type: Array, default: null },
+  /** Muestra barra de herramientas */
+  toolbar:     { type: Boolean, default: false },
+  /** Animación al montar */
+  animated:    { type: Boolean, default: true },
+  /** Curva de líneas: smooth | straight | stepline */
+  curve:       { type: String, default: 'smooth' },
+  /** Grosor de líneas (solo line/area) */
+  strokeWidth: { type: [Number, Array], default: 2 },
+  /** Mostrar dataLabels */
+  dataLabels:  { type: Boolean, default: false },
+  /** Color de fondo de la zona — para area charts */
+  fillOpacity: { type: [Number, Array], default: undefined },
+})
+
+// ── Resolución de CSS vars a colores reales ───────────────────────────────────
+const resolveCSSColor = (varName) => {
+  if (!process.client) return null
+  const el = document.createElement('span')
+  el.style.cssText = `display:none;color:var(${varName})`
+  document.body.appendChild(el)
+  const computed = getComputedStyle(el).color // siempre devuelve rgb(r,g,b)
+  document.body.removeChild(el)
+  // rgb(r, g, b) → #rrggbb
+  const match = computed.match(/\d+/g)
+  if (!match || match.length < 3) return null
+  return '#' + match.slice(0, 3).map(n => parseInt(n).toString(16).padStart(2, '0')).join('')
+}
+
+const resolveCSSVar = (varName) => {
+  if (!process.client) return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
+}
+
+// ── Dark mode reactive ────────────────────────────────────────────────────────
+const isDark = useState('isDark', () => false)
+
+// ── Paleta dinámica ───────────────────────────────────────────────────────────
+const CHART_VARS = [
+  '--chart-primary',
+  '--chart-2', '--chart-3', '--chart-4', '--chart-5',
+  '--chart-6', '--chart-7',
+]
+
+const resolvedColors = computed(() => {
+  // isDark.value registra reactividad; los colores se re-resuelven al cambiar el tema
+  void isDark.value
+  if (props.colors) return props.colors
+  return CHART_VARS.map(v => resolveCSSColor(v)).filter(Boolean)
+})
+
+// ── Opciones base ─────────────────────────────────────────────────────────────
+const baseOptions = computed(() => {
+  void isDark.value // trigger reactivity on dark mode toggle
+  const mutedFg    = resolveCSSColor('--color-muted-foreground') ?? '#9ca3af'
+  const cardLine   = resolveCSSColor('--color-card-line') ?? '#e5e7eb'
+  const tooltipBg  = resolveCSSColor('--color-card') ?? '#ffffff'
+  const tooltipFg  = resolveCSSColor('--color-foreground') ?? '#111827'
+
+  const isDonutLike = ['donut', 'pie', 'radialBar'].includes(props.type)
+
+  const opts = {
+    chart: {
+      background:  'transparent',
+      toolbar:     { show: props.toolbar },
+      fontFamily:  'inherit',
+      foreColor:   mutedFg,
+      animations:  { enabled: props.animated },
+      redrawOnWindowResize: true,
+    },
+    colors: resolvedColors.value,
+
+    stroke: isDonutLike ? undefined : {
+      curve: props.curve,
+      width: props.strokeWidth,
+    },
+
+    dataLabels: {
+      enabled: props.dataLabels,
+      style:   { fontFamily: 'inherit', fontSize: '11px' },
+    },
+
+    ...(props.fillOpacity !== undefined ? {
+      fill: { opacity: props.fillOpacity },
+    } : {}),
+
+    xaxis: isDonutLike ? undefined : {
+      categories:   props.categories,
+      axisBorder:   { show: false },
+      axisTicks:    { show: false },
+      labels: {
+        style: { colors: mutedFg, fontFamily: 'inherit', fontSize: '12px' },
+      },
+    },
+
+    yaxis: isDonutLike ? undefined : {
+      labels: {
+        style: { colors: mutedFg, fontFamily: 'inherit', fontSize: '12px' },
+      },
+    },
+
+    grid: isDonutLike ? { show: false } : {
+      borderColor:     cardLine,
+      strokeDashArray: 4,
+      xaxis:           { lines: { show: false } },
+    },
+
+    legend: {
+      fontFamily: 'inherit',
+      fontSize:   '13px',
+      labels:     { colors: tooltipFg },
+    },
+
+    tooltip: {
+      theme: isDark.value ? 'dark' : 'light',
+      style: { fontFamily: 'inherit', fontSize: '12px' },
+      x:     { show: !isDonutLike },
+    },
+
+    plotOptions: props.type === 'bar' ? {
+      bar: { borderRadius: 4, columnWidth: '60%' },
+    } : props.type === 'radialBar' ? {
+      radialBar: {
+        hollow:    { size: '60%' },
+        dataLabels: {
+          name:  { color: tooltipFg, fontFamily: 'inherit' },
+          value: { color: tooltipFg, fontFamily: 'inherit', fontSize: '20px' },
+        },
+      },
+    } : undefined,
+  }
+
+  // Limpiar undefined para que ApexCharts no se confunda
+  return JSON.parse(JSON.stringify(opts))
+})
+
+// ── Merge profundo de opciones ────────────────────────────────────────────────
+const mergedOptions = computed(() => deepMerge(baseOptions.value, props.options))
+
+function deepMerge(base, override) {
+  const result = { ...base }
+  for (const key of Object.keys(override ?? {})) {
+    if (
+      override[key] !== null &&
+      typeof override[key] === 'object' &&
+      !Array.isArray(override[key]) &&
+      base[key] !== null &&
+      typeof base[key] === 'object' &&
+      !Array.isArray(base[key])
+    ) {
+      result[key] = deepMerge(base[key], override[key])
+    } else {
+      result[key] = override[key]
+    }
+  }
+  return result
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <VueApexCharts
+      :type="type"
+      :height="height"
+      :series="series"
+      :options="mergedOptions"
+    />
+    <template #fallback>
+      <div
+        :style="{ height: typeof height === 'number' ? height + 'px' : height }"
+        class="flex items-center justify-center bg-surface rounded-card"
+      >
+        <div class="w-6 h-6 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+      </div>
+    </template>
+  </ClientOnly>
+</template>

package/components/Container.vue

@@ -0,0 +1,116 @@
+<script setup>
+/**
+ * <Container> — Card / panel reutilizable que sigue los tokens del DS.
+ *
+ * Usado para contenido estático: settings, dashboards, KPI tiles, info boxes,
+ * formularios agrupados. NO para Tree/Table/Kanban (esos manejan su propio
+ * layout interno complejo).
+ *
+ * Slots:
+ *   - default — body
+ *   - header  — reemplaza el header entero (si necesitás algo custom)
+ *   - actions — botones a la derecha del título
+ *   - footer  — pie con border-top
+ *
+ * Props:
+ *   - title / subtitle — texto del header automático
+ *   - bordered         — true = border + rounded-card (default)
+ *   - padding          — 'none' | 'sm' | 'md' (default) | 'lg' del body
+ *   - size             — 'sm' | 'md' | 'lg' | 'fit' (default) — min-height baseline
+ *   - tone             — 'default' | 'muted' | 'primary' | 'destructive' | 'emerald' | 'amber'
+ */
+
+const props = defineProps({
+  title:    { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  bordered: { type: Boolean, default: true },
+  padding:  { type: String,  default: 'md' },
+  size:     { type: String,  default: 'fit' },
+  tone:     { type: String,  default: 'default' },
+})
+
+const slots = useSlots()
+
+const hasAutoHeader = computed(() => !!(props.title || props.subtitle || slots.actions))
+const hasHeaderSlot = computed(() => !!slots.header)
+const showHeader    = computed(() => hasHeaderSlot.value || hasAutoHeader.value)
+
+// ─── Padding del body ────────────────────────────────────────────────────────
+const paddingClass = computed(() => ({
+  none: '',
+  sm:   'p-3',
+  md:   'p-5',
+  lg:   'p-7',
+}[props.padding] ?? 'p-5'))
+
+// ─── Size (min-height baseline) ──────────────────────────────────────────────
+const sizeStyle = computed(() => {
+  switch (props.size) {
+    case 'sm':  return { minHeight: '8rem' }
+    case 'md':  return { minHeight: '14rem' }
+    case 'lg':  return { minHeight: '24rem' }
+    case 'fit':
+    default:    return {}
+  }
+})
+
+// ─── Tone (color del border + bg sutil) ──────────────────────────────────────
+const toneClasses = computed(() => {
+  if (!props.bordered) return 'bg-card'
+  switch (props.tone) {
+    case 'muted':       return 'bg-muted/30 border-card-line'
+    case 'primary':     return 'bg-primary/5 border-primary/20'
+    case 'destructive': return 'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-900/50'
+    case 'emerald':     return 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-900/50'
+    case 'amber':       return 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-900/50'
+    case 'default':
+    default:            return 'bg-card border-card-line'
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex flex-col',
+      toneClasses,
+      bordered ? 'border rounded-card overflow-hidden' : '',
+    ]"
+    :style="sizeStyle"
+  >
+    <!-- Header -->
+    <div
+      v-if="showHeader"
+      :class="[
+        'shrink-0 flex items-center gap-3 px-5 py-4',
+        bordered ? 'border-b border-card-line' : '',
+      ]"
+    >
+      <slot name="header">
+        <div class="flex-1 min-w-0">
+          <h3 v-if="title" class="text-sm font-semibold text-foreground truncate">{{ title }}</h3>
+          <p v-if="subtitle" class="text-xs text-muted-foreground mt-0.5 truncate">{{ subtitle }}</p>
+        </div>
+        <div v-if="$slots.actions" class="shrink-0 flex items-center gap-1">
+          <slot name="actions" />
+        </div>
+      </slot>
+    </div>
+
+    <!-- Body -->
+    <div :class="['flex-1 min-h-0', paddingClass]">
+      <slot />
+    </div>
+
+    <!-- Footer -->
+    <div
+      v-if="$slots.footer"
+      :class="[
+        'shrink-0 px-5 py-3',
+        bordered ? 'border-t border-card-line' : '',
+      ]"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/components/CopyButton.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { IconCopy, IconCheck } from '@tabler/icons-vue'
+
+/**
+ * <CopyButton :value="..." /> — Botón con feedback visual de copia.
+ *
+ * Variants:
+ *  - 'icon'   (default) — solo el icono
+ *  - 'inline' — input readonly con icono al lado (estilo Preline clipboard)
+ *  - 'button' — botón ancho con label "Copiar"
+ *
+ * ```vue
+ * <CopyButton :value="user.id" />
+ * <CopyButton :value="apiKey" variant="inline" />
+ * <CopyButton :value="link" variant="button" label="Copiar enlace" />
+ * ```
+ */
+const props = defineProps({
+  value:        { type: [String, Number], default: '' },
+  variant:      { type: String, default: 'icon', validator: v => ['icon','inline','button'].includes(v) },
+  label:        { type: String, default: 'Copiar' },
+  labelCopied:  { type: String, default: '¡Copiado!' },
+  size:         { type: String, default: 'sm', validator: v => ['xs','sm','md'].includes(v) },
+  /** Solo para variant="inline" — placeholder cuando el value está vacío. */
+  placeholder:  { type: String, default: '' },
+  /** Solo para variant="inline" — oculta el value (útil para tokens/passwords). */
+  masked:       { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['copied'])
+
+const { copy, copied } = useClipboard({ timeout: 1500 })
+
+const onCopy = async () => {
+  if (await copy(props.value)) emit('copied', props.value)
+}
+
+const iconSize = computed(() => ({ xs: 12, sm: 14, md: 16 }[props.size]))
+const btnSize  = computed(() => ({ xs: 'size-6', sm: 'size-7', md: 'size-8' }[props.size]))
+
+const displayValue = computed(() => {
+  if (!props.value) return ''
+  if (!props.masked) return String(props.value)
+  return String(props.value).replace(/./g, '•').slice(0, 32)
+})
+</script>
+
+<template>
+  <!-- Icon-only -->
+  <button
+    v-if="variant === 'icon'"
+    type="button"
+    :title="copied ? labelCopied : label"
+    :class="[btnSize, 'inline-flex items-center justify-center rounded-control transition-colors',
+             copied ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted-hover']"
+    @click="onCopy"
+  >
+    <IconCheck v-if="copied" :size="iconSize" :stroke="2" />
+    <IconCopy  v-else        :size="iconSize" :stroke="1.75" />
+  </button>
+
+  <!-- Inline input + icon (Preline clipboard style) -->
+  <div
+    v-else-if="variant === 'inline'"
+    class="inline-flex items-center gap-2 w-full innertia-field !pr-1 !py-1 cursor-pointer"
+    @click="onCopy"
+  >
+    <span class="flex-1 truncate text-sm text-foreground font-mono">
+      {{ displayValue || placeholder }}
+    </span>
+    <button
+      type="button"
+      :class="['shrink-0 inline-flex items-center justify-center size-7 rounded-control transition-colors',
+               copied ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted-hover']"
+      @click.stop="onCopy"
+    >
+      <IconCheck v-if="copied" :size="14" :stroke="2" />
+      <IconCopy  v-else        :size="14" :stroke="1.75" />
+    </button>
+  </div>
+
+  <!-- Full button -->
+  <button
+    v-else
+    type="button"
+    :class="['inline-flex items-center gap-1.5 px-3 py-1.5 rounded-control text-xs font-medium transition-colors border',
+             copied
+               ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
+               : 'bg-card text-foreground border-card-line hover:bg-muted-hover']"
+    @click="onCopy"
+  >
+    <IconCheck v-if="copied" :size="14" :stroke="2" />
+    <IconCopy  v-else        :size="14" :stroke="1.75" />
+    {{ copied ? labelCopied : label }}
+  </button>
+</template>