@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to `@innertia-solutions/innertia-nuxt` are documented here.
+
+## [Unreleased]
+
+### BREAKING CHANGES
+
+#### apps → contexts rename
+
+Aligns frontend with innertia-laravel which already renamed the concept.
+
+**Config (`nuxt.config.ts` in your product):**
+```diff
+- innertia.apps: { backoffice: { ... }, technician: { ... } }
++ innertia.contexts: { backoffice: { ... }, technician: { ... } }
+```
+
+**Types:**
+```diff
+- import type { AppDefinition } from '@innertia-solutions/innertia-nuxt/app.config'
++ import type { ContextDefinition } from '@innertia-solutions/innertia-nuxt/app.config'
+
+- import type { AppMobileMode } from '@innertia-solutions/innertia-nuxt/app.config'
++ import type { ContextMobileMode } from '@innertia-solutions/innertia-nuxt/app.config'
+```
+
+**Composables:**
+```diff
+- const { current, all, accessible, canAccess } = useApp()
++ const { current, all, accessible, canAccess } = useContext()
+```
+
+`useApp()` has been removed. Use `useContext()` for all context/app logic. `useContext()` now also exposes: `contexts` (dict), `currentContext`, `availableContexts`, `switchContext()`, `confirmSwitch()`, `hasAccessToContext()`.
+
+**Login body field:**
+
+`performLogin()` now sends `context` instead of `app` in the POST body — matching what innertia-laravel now expects.

package/app.config.ts

@@ -2,12 +2,12 @@
 //
 //   appConfig: {
 //     innertia: {
-//       apps: { backoffice: {...}, technician: {...} },
+//       contexts: { backoffice: {...}, technician: {...} },
 //       mobile: { breakpoint: 1024 },
 //     },
 //   }
 //
-// Si el producto no declara `apps`, el feature de contextos queda inactivo
+// Si el producto no declara `contexts`, el feature de contextos queda inactivo
 // (middleware no redirige, picker no se muestra).
 export default defineAppConfig({
   innertia: {
@@ -121,11 +121,11 @@ export default defineAppConfig({
     },
 
     /**
-     * Declaración de "apps" (contextos) del producto.
-     * Cada app define un prefijo de URL que mapea a un contexto del backend
+     * Declaración de contextos del producto.
+     * Cada contexto define un prefijo de URL que mapea a un contexto del backend
      * (matching con `availableContexts` que devuelve `auth/me`).
      */
-    apps: {} as Record<string, AppDefinition>,
+    contexts: {} as Record<string, ContextDefinition>,
 
     /**
      * Política mobile global. Se aplica si una `app` no tiene `mobile.mode` propio.
@@ -144,7 +144,7 @@ export default defineAppConfig({
 
 export type InnertiaMode = 'saas' | 'app'
 
-export type AppMobileMode = 'allow' | 'block' | 'redirect'
+export type ContextMobileMode = 'allow' | 'block' | 'redirect'
 
 /** Color: nombre de paleta Tailwind o scale custom 50→950. */
 export type ColorScale = Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>>
@@ -175,8 +175,8 @@ export interface MenuItem {
   pattern?: string
 }
 
-export interface AppDefinition {
-  /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del app. */
+export interface ContextDefinition {
+  /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del contexto. */
   path: string
   /** Clave del contexto que matchea con `availableContexts` del backend. */
   context: string
@@ -186,13 +186,13 @@ export interface AppDefinition {
   description?: string
   /** Nombre del icono de @tabler/icons-vue (sin "Icon"). */
   icon?: string
-  /** Ruta de login del app. */
+  /** Ruta de login del contexto. */
   loginPath: string
   /** Ruta home (post-login). */
   home: string
   /** Política de uso en mobile. */
   mobile: {
-    mode: AppMobileMode
+    mode: ContextMobileMode
     /** Solo si mode === 'redirect' — adónde mandar desde mobile. */
     redirectTo?: string
   }

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/Auth/LoginForm.vue

@@ -99,7 +99,7 @@ async function handleOauth(provider: OAuthProvider) {
 
 // ── Cross-links a otros contextos mobile-friendly (opcional) ───────────────
 const { isMobile } = useMobileGuard()
-const { all } = useApp()
+const { all } = useContext()
 const otherMobileApps = computed(() => {
   if (!props.showCrossLinks) return []
   return all.value.filter((a: any) => a.path !== `/${props.context}` && a.mobile?.mode === 'allow')

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>