@softdin/shared 0.1.3

package/src/components/a11y/AccessibilityPreferencesPanel.vue

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import {
+  accessibilityPreferencesState,
+  applyAccessibilityPreferences,
+  resetAccessibilityPreferences,
+  saveAccessibilityPreferences,
+  type A11yBrandAccent,
+  type A11yColorScheme,
+  type A11yContrast,
+  type A11yFontFamily,
+  type A11yLineSpacing,
+  type A11yMotion,
+  type A11yTextScale,
+} from '../../a11y'
+
+const prefs = accessibilityPreferencesState
+
+const textScaleOptions: Array<{ value: A11yTextScale; label: string }> = [
+  { value: 'xs', label: 'Muy pequeño' },
+  { value: 'sm', label: 'Pequeño' },
+  { value: 'md', label: 'Medio' },
+  { value: 'lg', label: 'Grande' },
+  { value: 'xl', label: 'Extra' },
+]
+
+const fontFamilyOptions: Array<{ value: A11yFontFamily; label: string }> = [
+  { value: 'system', label: 'Sistema' },
+  { value: 'serif', label: 'Serif' },
+  { value: 'dyslexia', label: 'Lectura fácil' },
+]
+
+const lineSpacingOptions: Array<{ value: A11yLineSpacing; label: string }> = [
+  { value: 'normal', label: 'Normal' },
+  { value: 'relaxed', label: 'Amplio' },
+]
+
+const colorSchemeOptions: Array<{ value: A11yColorScheme; label: string }> = [
+  { value: 'light', label: 'Claro' },
+  { value: 'dark', label: 'Oscuro' },
+  { value: 'system', label: 'Sistema' },
+]
+
+const brandAccentOptions: Array<{ value: A11yBrandAccent; label: string }> = [
+  { value: 'green', label: 'Verde' },
+  { value: 'blue', label: 'Azul' },
+  { value: 'red', label: 'Rojo' },
+  { value: 'purple', label: 'Morado' },
+  { value: 'orange', label: 'Naranja' },
+  { value: 'teal', label: 'Turquesa' },
+]
+
+const contrastOptions: Array<{ value: A11yContrast; label: string }> = [
+  { value: 'default', label: 'Normal' },
+  { value: 'high', label: 'Alto' },
+]
+
+const motionOptions: Array<{ value: A11yMotion; label: string }> = [
+  { value: 'system', label: 'Según el sistema' },
+  { value: 'reduce', label: 'Reducir animaciones' },
+]
+
+watch(
+  prefs,
+  (next) => {
+    applyAccessibilityPreferences({ ...next })
+    saveAccessibilityPreferences({ ...next })
+  },
+  { deep: true },
+)
+
+function handleReset(): void {
+  resetAccessibilityPreferences()
+}
+</script>
+
+<template>
+  <section id="accesibilidad" class="a11y-panel" aria-labelledby="a11y-panel-title" tabindex="-1">
+    <div>
+      <p id="a11y-panel-title" class="a11y-panel__section-label">Accesibilidad</p>
+      <p class="a11y-panel__hint">
+        Ajuste tipografía, colores y movimiento. Los cambios se aplican de inmediato y se guardan en
+        este navegador.
+      </p>
+    </div>
+
+    <p class="a11y-panel__preview" aria-live="polite">
+      Vista previa: el tamaño y el color de la interfaz cambian al instante.
+    </p>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Tamaño del texto</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Tamaño del texto">
+        <label
+          v-for="option in textScaleOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.textScale === option.value }"
+        >
+          <input
+            v-model="prefs.textScale"
+            type="radio"
+            name="a11y-text-scale"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Tipo de fuente</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Tipo de fuente">
+        <label
+          v-for="option in fontFamilyOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.fontFamily === option.value }"
+        >
+          <input
+            v-model="prefs.fontFamily"
+            type="radio"
+            name="a11y-font-family"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Espaciado</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Espaciado del texto">
+        <label
+          v-for="option in lineSpacingOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.lineSpacing === option.value }"
+        >
+          <input
+            v-model="prefs.lineSpacing"
+            type="radio"
+            name="a11y-line-spacing"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Color de la interfaz</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Color de la interfaz">
+        <label
+          v-for="option in colorSchemeOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.colorScheme === option.value }"
+        >
+          <input
+            v-model="prefs.colorScheme"
+            type="radio"
+            name="a11y-color-scheme"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Color de acento (botones y formularios)</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Color de acento">
+        <label
+          v-for="option in brandAccentOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.brandAccent === option.value }"
+        >
+          <input
+            v-model="prefs.brandAccent"
+            type="radio"
+            name="a11y-brand-accent"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Contraste</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Contraste">
+        <label
+          v-for="option in contrastOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.contrast === option.value }"
+        >
+          <input
+            v-model="prefs.contrast"
+            type="radio"
+            name="a11y-contrast"
+            :value="option.value"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="a11y-panel__fieldset">
+      <legend class="a11y-panel__legend">Movimiento</legend>
+      <div class="a11y-panel__options" role="radiogroup" aria-label="Movimiento">
+        <label
+          v-for="option in motionOptions"
+          :key="option.value"
+          class="a11y-panel__option"
+          :class="{ 'is-active': prefs.motion === option.value }"
+        >
+          <input v-model="prefs.motion" type="radio" name="a11y-motion" :value="option.value" />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <div class="a11y-panel__actions">
+      <button type="button" class="a11y-panel__reset" @click="handleReset">
+        Restablecer accesibilidad
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.a11y-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.a11y-panel__section-label {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text, #0f172a);
+}
+
+.a11y-panel__hint {
+  margin: 0.25rem 0 0;
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #64748b);
+}
+
+.a11y-panel__preview {
+  margin: 0;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border, #e2e8f0);
+  background: var(--color-surface, #f8fafc);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: var(--color-text, #0f172a);
+}
+
+.a11y-panel__fieldset {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
+.a11y-panel__legend {
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text, #334155);
+}
+
+.a11y-panel__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.a11y-panel__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-panel, #fff);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text, #334155);
+}
+
+.a11y-panel__option.is-active {
+  border-color: var(--color-brand-600);
+  background: var(--color-brand-50);
+  color: var(--color-brand-800);
+  box-shadow: 0 0 0 1px var(--color-brand-600);
+}
+
+.a11y-panel__option input {
+  margin: 0;
+}
+
+.a11y-panel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.a11y-panel__reset {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-panel, #fff);
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  color: var(--color-text, #334155);
+}
+
+.a11y-panel__reset:hover {
+  background: var(--color-surface, #f8fafc);
+}
+
+.a11y-panel__reset:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: 2px;
+}
+</style>

package/src/components/a11y/ColorSchemeQuickToggle.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  accessibilityPreferencesState,
+  patchAccessibilityPreferences,
+  type A11yColorScheme,
+} from '../../a11y'
+
+const nextScheme = computed<A11yColorScheme>(() => {
+  if (accessibilityPreferencesState.colorScheme === 'light') {
+    return 'dark'
+  }
+  if (accessibilityPreferencesState.colorScheme === 'dark') {
+    return 'system'
+  }
+  return 'light'
+})
+
+const label = computed(() => {
+  if (accessibilityPreferencesState.colorScheme === 'light') {
+    return 'Tema claro. Cambiar a oscuro'
+  }
+  if (accessibilityPreferencesState.colorScheme === 'dark') {
+    return 'Tema oscuro. Cambiar a sistema'
+  }
+  return 'Tema del sistema. Cambiar a claro'
+})
+
+const icon = computed(() => {
+  if (accessibilityPreferencesState.colorScheme === 'light') {
+    return '☀'
+  }
+  if (accessibilityPreferencesState.colorScheme === 'dark') {
+    return '☾'
+  }
+  return '◐'
+})
+
+const shortLabel = computed(() => {
+  if (accessibilityPreferencesState.colorScheme === 'light') {
+    return 'Claro'
+  }
+  if (accessibilityPreferencesState.colorScheme === 'dark') {
+    return 'Oscuro'
+  }
+  return 'Auto'
+})
+
+function cycleColorScheme(): void {
+  patchAccessibilityPreferences({ colorScheme: nextScheme.value })
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="color-scheme-toggle"
+    :aria-label="label"
+    :title="label"
+    @click="cycleColorScheme"
+  >
+    <span class="color-scheme-toggle__icon" aria-hidden="true">{{ icon }}</span>
+    <span class="color-scheme-toggle__text">{{ shortLabel }}</span>
+  </button>
+</template>
+
+<style scoped>
+.color-scheme-toggle {
+  display: inline-flex;
+  height: 2.25rem;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border, #e2e8f0);
+  background: var(--color-panel, #fff);
+  padding: 0 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text, #334155);
+}
+
+.color-scheme-toggle:hover {
+  background: var(--color-surface, #f8fafc);
+}
+
+.color-scheme-toggle:focus-visible {
+  outline: 2px solid var(--color-brand-600, #16a34a);
+  outline-offset: 2px;
+}
+
+.color-scheme-toggle__icon {
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.color-scheme-toggle__text {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .color-scheme-toggle__text {
+    display: inline;
+  }
+}
+</style>

package/src/components/a11y/SkipLink.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Enlace visible solo al recibir foco por teclado.
+ * Debe ir al inicio del layout autenticado.
+ */
+defineProps<{
+  targetId?: string
+  label?: string
+}>()
+</script>
+
+<template>
+  <a class="skip-link" :href="`#${targetId ?? 'main-content'}`">
+    {{ label ?? 'Saltar al contenido' }}
+  </a>
+</template>
+
+<style scoped>
+.skip-link {
+  position: absolute;
+  left: 0.75rem;
+  top: 0.75rem;
+  z-index: 100;
+  transform: translateY(-200%);
+  border-radius: 0.5rem;
+  background: var(--color-brand-700, #15803d);
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  text-decoration: none;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+  transform: translateY(0);
+  outline: 3px solid #fff;
+  outline-offset: 2px;
+}
+</style>

package/src/components/auth/AuthBrandHeader.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import softdinLogo from '../../assets/softdin-logo.png'
+import { tenantLogoPublicUrl } from '../../utils/tenantLogo'
+
+const props = defineProps<{
+  tenantName?: string
+  tenantSlug?: string
+  tenantHasLogo?: boolean
+  previewLogoUrl?: string | null
+}>()
+
+const showTenantBrand = computed(
+  () => Boolean(props.tenantName?.trim() && props.tenantSlug?.trim()),
+)
+
+const logoSrc = computed(() => {
+  if (props.previewLogoUrl) {
+    return props.previewLogoUrl
+  }
+
+  if (props.tenantHasLogo && props.tenantSlug) {
+    return tenantLogoPublicUrl(props.tenantSlug)
+  }
+
+  return null
+})
+
+const initials = computed(() => {
+  const name = props.tenantName?.trim() ?? ''
+  if (!name) {
+    return '?'
+  }
+
+  const parts = name.split(/\s+/).slice(0, 2)
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('')
+})
+</script>
+
+<template>
+  <div v-if="showTenantBrand" class="brand-row">
+    <span class="brand-logo-wrap">
+      <img
+        v-if="logoSrc"
+        :src="logoSrc"
+        :alt="tenantName"
+        class="brand-logo"
+      />
+      <span v-else class="brand-logo-fallback">{{ initials }}</span>
+    </span>
+    <div class="brand-text">
+      <span class="brand-title">{{ tenantName }}</span>
+      <span class="brand-subtitle">{{ tenantSlug }}</span>
+    </div>
+  </div>
+
+  <div v-else class="brand-row">
+    <img :src="softdinLogo" alt="SoftDIN Central" class="brand-logo" />
+    <div class="brand-text">
+      <span class="brand-title">SoftDIN Central</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.brand-row {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.brand-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--color-brand-800);
+}
+
+.brand-subtitle {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--color-brand-600);
+  text-transform: lowercase;
+}
+
+.brand-logo-wrap {
+  display: flex;
+  height: 5.5rem;
+  width: 5.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  border: 3px solid var(--color-brand-100);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
+  background: #f8fafc;
+}
+
+.brand-logo {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.brand-logo-fallback {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-brand-700);
+}
+
+.brand-row > .brand-logo {
+  width: 5.5rem;
+  height: 5.5rem;
+  border-radius: 9999px;
+  object-fit: cover;
+  object-position: center 18%;
+  border: 3px solid var(--color-brand-100);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
+}
+</style>

package/src/components/auth/AuthShell.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import AuthBrandHeader from './AuthBrandHeader.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  wide?: boolean
+  extraWide?: boolean
+  tenantName?: string
+  tenantSlug?: string
+  tenantHasLogo?: boolean
+  tenantPreviewLogoUrl?: string | null
+}>()
+</script>
+
+<template>
+  <div class="auth-bg flex min-h-full items-center justify-center px-4 py-10">
+    <div
+      class="w-full rounded-2xl bg-white p-8 shadow-xl"
+      :class="extraWide ? 'max-w-2xl' : wide ? 'max-w-lg' : 'max-w-md'"
+    >
+      <div class="mb-8 flex flex-col items-center text-center">
+        <AuthBrandHeader
+          class="mb-3"
+          :tenant-name="tenantName"
+          :tenant-slug="tenantSlug"
+          :tenant-has-logo="tenantHasLogo"
+          :preview-logo-url="tenantPreviewLogoUrl"
+        />
+        <h1 class="text-xl font-bold text-slate-900">{{ title }}</h1>
+        <p v-if="subtitle" class="mt-2 text-sm text-slate-500">{{ subtitle }}</p>
+      </div>
+
+      <slot />
+
+      <div v-if="$slots.footer" class="mt-6 border-t border-slate-100 pt-4 text-center text-sm">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auth-bg {
+  background: linear-gradient(
+    135deg,
+    var(--color-brand-800) 0%,
+    var(--color-brand-700) 45%,
+    #052e16 100%
+  );
+}
+</style>