@asteby/storefront-react 0.6.0 → 0.7.0

package/dist/ui.css

@@ -0,0 +1,166 @@
+/*
+ * Scroll moderno compartido (admin de ops, SDK y tiendas): barras delgadas, redondeadas y del color del texto del
+ * contexto (currentColor), así funcionan en claro y oscuro con cualquier sistema de tokens sin definir colores nuevos.
+ * Estándar en Chrome 121+/Firefox (scrollbar-width/color); prefijo WebKit para Safari. Las listas internas y los diálogos
+ * no arrastran la página de fondo al llegar a su límite (overscroll-behavior).
+ */
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, currentColor 32%, transparent) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, currentColor 32%, transparent);
+    border: 3px solid transparent;
+    border-radius: 9999px;
+    background-clip: content-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, currentColor 55%, transparent);
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  dialog,
+  [role='dialog'],
+  [role='listbox'],
+  [data-radix-scroll-area-viewport],
+  .overflow-y-auto,
+  .overflow-x-auto {
+    overscroll-behavior: contain;
+  }
+}
+
+/*
+ * @asteby/storefront-react/ui.css: estilos de las piezas de /ui (Select, casillas, radios, Swatch).
+ * CSS plano, sin Tailwind. Se pintan con los tokens de la tienda: --background, --foreground, --border, --tint,
+ * --primary, --primary-foreground, --ring. Cada tienda los define (y los cambia en tema oscuro).
+ */
+/*
+ * <Swatch>: muestra plana (sin brillo ni sombra). Solo cuando el color se confunde con el fondo (blanco en tema claro,
+ * negro en tema oscuro) lleva un aro fino del color primario de la tienda (--primary), así se ve de marca y no genérico.
+ */
+[data-swatch] {
+  display: inline-block;
+  flex-shrink: 0;
+  border-radius: 9999px;
+}
+[data-swatch][data-shape="square"] {
+  border-radius: 0.3125rem;
+}
+[data-swatch][data-edge] {
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #111111) 70%, transparent);
+}
+/* Donde el color sí contrasta con el fondo, el aro sobra. */
+[data-swatch][data-edge="dark"] {
+  box-shadow: none;
+}
+:root[data-theme="dark"] [data-swatch][data-edge="dark"] {
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #ffffff) 70%, transparent);
+}
+:root[data-theme="dark"] [data-swatch][data-edge="light"] {
+  box-shadow: none;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) [data-swatch][data-edge="dark"] {
+    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #ffffff) 70%, transparent);
+  }
+  :root:not([data-theme="light"]) [data-swatch][data-edge="light"] {
+    box-shadow: none;
+  }
+}
+/*
+ * Emoji: cada sabor en su círculo (uno) o píldora (mezcla), con fondo suave del color de superficie (--tint) y un aro fino,
+ * como un badge. Así, en una fila de sabores se distingue qué emoji forman cada grupo.
+ */
+[data-swatch][data-kind="emoji"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: 9999px;
+  background: var(--tint, color-mix(in srgb, currentColor 10%, transparent));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
+  color: inherit;
+}
+/* Con colores del sabor: píldora pastel clara (el emoji siempre contrasta, también en tema oscuro) y aro del color principal. */
+[data-swatch][data-kind="emoji"][data-colored] {
+  color: #111111;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-ring) 42%, transparent);
+}
+[data-swatch][data-kind="emoji"][data-mixed] {
+  padding-inline: 0.42em;
+}
+[data-swatch][data-kind="emoji"] > span {
+  position: relative;
+  display: inline-block;
+}
+
+
+.select {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.625rem 0.875rem;
+  font: inherit;
+  color: var(--foreground);
+  background-color: var(--background);
+  border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+  border-radius: var(--radius, 0.375rem);
+  cursor: pointer;
+  appearance: none;
+  transition: border-color 120ms;
+}
+.select:hover { border-color: var(--foreground); }
+.select:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; }
+.select[aria-expanded="true"] { border-color: var(--primary); }
+
+[data-select] { position: relative; }
+[data-select-native="hidden"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+[data-select-native=""] { position: relative; }
+[data-select-trigger] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; }
+[data-select-value] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-select-chevron] { flex-shrink: 0; opacity: 0.6; transition: transform 150ms; }
+[data-select-chevron][data-open] { transform: rotate(180deg); }
+[data-select-chevron="floating"] { position: absolute; right: 0.875rem; top: 50%; translate: 0 -50%; pointer-events: none; }
+
+[data-select-list] {
+  position: absolute; inset-inline: 0; top: 100%; z-index: 30; margin: 0.375rem 0 0; padding: 0.25rem; list-style: none;
+  overflow: hidden; background: var(--background); color: var(--foreground);
+  border: 1px solid var(--border); border-radius: calc(var(--radius, 0.375rem) * 1.5);
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
+}
+[data-select-list] > li {
+  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem;
+  font-size: 0.875rem; cursor: pointer; border-radius: var(--radius, 0.375rem);
+}
+[data-select-list] > li[data-active] { background: var(--tint, color-mix(in srgb, var(--foreground) 8%, transparent)); }
+[data-select-list] > li[aria-selected="true"] { font-weight: 600; }
+[data-select-list] > li[aria-selected="true"] svg { color: var(--primary); }
+
+.check, .radio {
+  appearance: none; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer;
+  background-color: var(--background); border: 1.5px solid color-mix(in srgb, var(--foreground) 40%, transparent);
+  transition: background-color 120ms, border-color 120ms;
+}
+.check { border-radius: 0.3125rem; background-position: center; background-repeat: no-repeat; background-size: 0.8rem; }
+.radio { border-radius: 9999px; }
+.check:hover, .radio:hover { border-color: var(--foreground); }
+.check:focus-visible, .radio:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; }
+.check:checked { border-color: var(--primary); background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E"); }
+.radio:checked { border-color: var(--primary); border-width: 6px; }
+/* Con primario claro (tema oscuro) la palomita va oscura. */
+:root[data-theme="dark"] .check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23080808' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E"); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23080808' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E"); }
+}

package/dist/ui.d.cts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type SelectProps = {
+    id: string;
+    name: string;
+    options: SelectOption[];
+    defaultValue?: string;
+    /** Etiqueta accesible (la visible la pone el llamador con <label htmlFor={id}>). */
+    label: string;
+    className?: string;
+};
+/**
+ * Selector con mejora progresiva. Sin JavaScript (o antes de hidratar) es un <select> nativo dentro de un formulario;
+ * con JavaScript se reemplaza por un listbox propio (teclado completo, objetivo táctil de 44 px, tema claro/oscuro).
+ * El <select> nativo sigue en el DOM como fuente de verdad: al elegir se cambia su valor y se emite "change", así un
+ * formulario con onChange → submit (filtros por URL) no nota la diferencia.
+ * Estilos: clases `select` (ver ui.css) y los tokens --background, --foreground, --border, --tint, --primary.
+ */
+declare function Select({ id, name, options, defaultValue, label, className }: SelectProps): react.JSX.Element;
+
+/**
+ * Muestras de variante (color, combinación o emoji), pura y sin DOM: sirve en servidor y cliente.
+ *
+ * El MOTOR es genérico; los DICCIONARIOS no. El SDK solo trae colores básicos (ropa, acabados). Los sabores, emojis y cualquier
+ * vocabulario de un giro (suplementos, café, moda…) los inyecta la tienda con `createSwatchResolver`, o llegan del catálogo
+ * como atributo (`parseSwatchAttribute`), que siempre manda sobre cualquier diccionario.
+ */
+/**
+ * Lo que dibuja una muestra: colores planos, emoji, o AMBOS (una píldora pastel con la mezcla de colores y los emoji encima).
+ * Al menos uno de los dos viene lleno.
+ */
+type SwatchSpec = {
+    colors?: string[];
+    emoji?: string;
+};
+/** [frase normalizada (minúsculas, sin acentos), un color hex o varios] */
+type ColorEntry = [phrase: string, color: string | string[]];
+/** [frase normalizada, emoji o varios emoji] */
+type EmojiEntry = [phrase: string, emoji: string];
+/** Qué dibujar primero cuando hay color y emoji para el mismo nombre. */
+type SwatchPrefer = 'auto' | 'color' | 'emoji' | 'both';
+/** Minúsculas, sin acentos, sin puntuación suelta. "Piña" → "pina". */
+declare function normalize(value: string): string;
+/** Colores básicos (es/en) para ropa y acabados. Sin vocabulario de ningún giro en particular. */
+declare const defaultColors: ColorEntry[];
+type SwatchResolverOptions = {
+    /** Diccionario de colores. Default: `defaultColors`. Para sumar vocabulario: `[...defaultColors, ...tusColores]`. */
+    colors?: ColorEntry[];
+    /** Diccionario de emoji (sin default: es vocabulario del giro). */
+    emojis?: EmojiEntry[];
+    /** Qué dibujar si hay color y emoji: `auto`/`color` = color primero, `emoji` = emoji primero, `both` = píldora pastel con colores y emoji. */
+    prefer?: SwatchPrefer;
+};
+type SwatchResolver = {
+    /** Colores del nombre ("Rojo / Negro", "#ff8800"), en orden de lectura, o `null`. */
+    colors(value: string): string[] | null;
+    /** Emoji(s) del nombre (hasta 3, sin repetir), o `null`. */
+    emoji(value: string): string | null;
+    /** Muestra de una variante: primero el atributo del catálogo, luego el nombre según `prefer`. */
+    resolve(value: string, attribute?: Map<string, SwatchSpec>): SwatchSpec | null;
+    /** ¿Todos los valores de una opción tienen muestra? */
+    hasSwatches(values: string[], attribute?: Map<string, SwatchSpec>): boolean;
+};
+declare function createSwatchResolver({ colors: colorTable, emojis, prefer }?: SwatchResolverOptions): SwatchResolver;
+/** Colores básicos del nombre (sin vocabulario de giro). Para uno propio: `createSwatchResolver`. */
+declare const resolveSwatch: (value: string) => string[] | null;
+/** Muestra de una variante con solo colores básicos. Para uno propio: `createSwatchResolver`. */
+declare const resolveSwatchSpec: (value: string, attribute?: Map<string, SwatchSpec>) => SwatchSpec | null;
+declare const optionHasSwatches: (values: string[], attribute?: Map<string, SwatchSpec>) => boolean;
+/**
+ * Atributo del producto con el color o emoji de cada variante, como lo siembra el catálogo (OPS):
+ * `"Mora Azul:#3d4fd6|Fresa Kiwi:#ff4d6d+#8bc34a 🍓🥝|Natural:🥛"`. Cada valor es un hex, varios hex con "+" (combinación), emoji, o colores y emoji juntos.
+ * Es la fuente de verdad: manda sobre cualquier diccionario.
+ */
+declare function parseSwatchAttribute(raw: unknown): Map<string, SwatchSpec>;
+/** Fondo CSS plano: un color liso, dos mitades, o sectores iguales (hasta 4). */
+declare function swatchBackground(colors: string[]): string;
+/** Luminancia relativa (0 negro – 1 blanco) de un color hex, para decidir si hace falta un aro. */
+declare function luminance(hex: string): number;
+/**
+ * Fondo pastel de una píldora: cada color mezclado con blanco (queda claro y suave en claro y oscuro), un degradado suave entre
+ * ellos si son varios. Con ese fondo el emoji siempre contrasta.
+ */
+declare function pastelBackground(colors: string[]): string;
+
+type SwatchProps = {
+    /** Nombre de la variante; se resuelve con los colores básicos del SDK. Para vocabulario propio resuelve tú con `createSwatchResolver` y pasa `spec`. */
+    value?: string;
+    /** Lo que se dibuja (color(es) o emoji), ya resuelto: del catálogo (`parseSwatchAttribute`) o de tu `createSwatchResolver`. Manda sobre `value`. */
+    spec?: SwatchSpec | null;
+    size?: number;
+    shape?: 'circle' | 'square';
+    className?: string;
+};
+/**
+ * Muestra de color 2D para variantes: plana, sin sombras ni brillos y sin borde, salvo un aro mínimo cuando el color
+ * se perdería contra el fondo (blanco en tema claro, negro en tema oscuro). Las combinaciones se dibujan en partes iguales.
+ * Es decorativa (aria-hidden): el nombre de la variante debe ir siempre como texto junto a ella.
+ * Con `spec.emoji` dibuja el emoji. Devuelve null si no reconoce nada, para que el llamador muestre solo el texto.
+ */
+declare function Swatch({ value, spec, size, shape, className }: SwatchProps): react.JSX.Element | null;
+
+/** Script de cabecera: aplica el tema guardado antes de pintar (sin parpadeo). Sin preferencia guardada manda el sistema. */
+declare const THEME_INIT_SCRIPT = "try{var t=localStorage.getItem(\"theme\");if(t===\"light\"||t===\"dark\")document.documentElement.setAttribute(\"data-theme\",t)}catch(e){}";
+/**
+ * Botón claro/oscuro. El estado real se lee del DOM tras hidratar (el servidor no sabe la preferencia).
+ * Guarda la elección en localStorage ("theme") y fija `html[data-theme]`; los tokens de la tienda reaccionan a eso.
+ */
+declare function ThemeToggle({ className, themeColors }: {
+    className?: string;
+    themeColors?: {
+        light: string;
+        dark: string;
+    };
+}): react.JSX.Element;
+
+/** Registra el service worker (solo si `enabled`, normalmente producción; requiere HTTPS o localhost). */
+declare function useServiceWorker({ enabled, url, scope }: {
+    enabled: boolean;
+    url?: string;
+    scope?: string;
+}): void;
+/**
+ * Botón "Instalar app": aparece solo cuando el navegador ofrece la instalación (Chrome, Edge, Android).
+ * En iPhone/iPad no existe ese evento: muestra la instrucción de Compartir → Agregar a pantalla de inicio.
+ */
+declare function InstallApp({ className, label, iosHint }: {
+    className?: string;
+    label?: string;
+    iosHint?: string;
+}): react.JSX.Element | null;
+
+export { type ColorEntry, type EmojiEntry, InstallApp, Select, type SelectOption, type SelectProps, Swatch, type SwatchPrefer, type SwatchProps, type SwatchResolver, type SwatchResolverOptions, type SwatchSpec, THEME_INIT_SCRIPT, ThemeToggle, createSwatchResolver, defaultColors, luminance, normalize as normalizeSwatchName, optionHasSwatches, parseSwatchAttribute, pastelBackground, resolveSwatch, resolveSwatchSpec, swatchBackground, useServiceWorker };

package/dist/ui.d.ts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type SelectProps = {
+    id: string;
+    name: string;
+    options: SelectOption[];
+    defaultValue?: string;
+    /** Etiqueta accesible (la visible la pone el llamador con <label htmlFor={id}>). */
+    label: string;
+    className?: string;
+};
+/**
+ * Selector con mejora progresiva. Sin JavaScript (o antes de hidratar) es un <select> nativo dentro de un formulario;
+ * con JavaScript se reemplaza por un listbox propio (teclado completo, objetivo táctil de 44 px, tema claro/oscuro).
+ * El <select> nativo sigue en el DOM como fuente de verdad: al elegir se cambia su valor y se emite "change", así un
+ * formulario con onChange → submit (filtros por URL) no nota la diferencia.
+ * Estilos: clases `select` (ver ui.css) y los tokens --background, --foreground, --border, --tint, --primary.
+ */
+declare function Select({ id, name, options, defaultValue, label, className }: SelectProps): react.JSX.Element;
+
+/**
+ * Muestras de variante (color, combinación o emoji), pura y sin DOM: sirve en servidor y cliente.
+ *
+ * El MOTOR es genérico; los DICCIONARIOS no. El SDK solo trae colores básicos (ropa, acabados). Los sabores, emojis y cualquier
+ * vocabulario de un giro (suplementos, café, moda…) los inyecta la tienda con `createSwatchResolver`, o llegan del catálogo
+ * como atributo (`parseSwatchAttribute`), que siempre manda sobre cualquier diccionario.
+ */
+/**
+ * Lo que dibuja una muestra: colores planos, emoji, o AMBOS (una píldora pastel con la mezcla de colores y los emoji encima).
+ * Al menos uno de los dos viene lleno.
+ */
+type SwatchSpec = {
+    colors?: string[];
+    emoji?: string;
+};
+/** [frase normalizada (minúsculas, sin acentos), un color hex o varios] */
+type ColorEntry = [phrase: string, color: string | string[]];
+/** [frase normalizada, emoji o varios emoji] */
+type EmojiEntry = [phrase: string, emoji: string];
+/** Qué dibujar primero cuando hay color y emoji para el mismo nombre. */
+type SwatchPrefer = 'auto' | 'color' | 'emoji' | 'both';
+/** Minúsculas, sin acentos, sin puntuación suelta. "Piña" → "pina". */
+declare function normalize(value: string): string;
+/** Colores básicos (es/en) para ropa y acabados. Sin vocabulario de ningún giro en particular. */
+declare const defaultColors: ColorEntry[];
+type SwatchResolverOptions = {
+    /** Diccionario de colores. Default: `defaultColors`. Para sumar vocabulario: `[...defaultColors, ...tusColores]`. */
+    colors?: ColorEntry[];
+    /** Diccionario de emoji (sin default: es vocabulario del giro). */
+    emojis?: EmojiEntry[];
+    /** Qué dibujar si hay color y emoji: `auto`/`color` = color primero, `emoji` = emoji primero, `both` = píldora pastel con colores y emoji. */
+    prefer?: SwatchPrefer;
+};
+type SwatchResolver = {
+    /** Colores del nombre ("Rojo / Negro", "#ff8800"), en orden de lectura, o `null`. */
+    colors(value: string): string[] | null;
+    /** Emoji(s) del nombre (hasta 3, sin repetir), o `null`. */
+    emoji(value: string): string | null;
+    /** Muestra de una variante: primero el atributo del catálogo, luego el nombre según `prefer`. */
+    resolve(value: string, attribute?: Map<string, SwatchSpec>): SwatchSpec | null;
+    /** ¿Todos los valores de una opción tienen muestra? */
+    hasSwatches(values: string[], attribute?: Map<string, SwatchSpec>): boolean;
+};
+declare function createSwatchResolver({ colors: colorTable, emojis, prefer }?: SwatchResolverOptions): SwatchResolver;
+/** Colores básicos del nombre (sin vocabulario de giro). Para uno propio: `createSwatchResolver`. */
+declare const resolveSwatch: (value: string) => string[] | null;
+/** Muestra de una variante con solo colores básicos. Para uno propio: `createSwatchResolver`. */
+declare const resolveSwatchSpec: (value: string, attribute?: Map<string, SwatchSpec>) => SwatchSpec | null;
+declare const optionHasSwatches: (values: string[], attribute?: Map<string, SwatchSpec>) => boolean;
+/**
+ * Atributo del producto con el color o emoji de cada variante, como lo siembra el catálogo (OPS):
+ * `"Mora Azul:#3d4fd6|Fresa Kiwi:#ff4d6d+#8bc34a 🍓🥝|Natural:🥛"`. Cada valor es un hex, varios hex con "+" (combinación), emoji, o colores y emoji juntos.
+ * Es la fuente de verdad: manda sobre cualquier diccionario.
+ */
+declare function parseSwatchAttribute(raw: unknown): Map<string, SwatchSpec>;
+/** Fondo CSS plano: un color liso, dos mitades, o sectores iguales (hasta 4). */
+declare function swatchBackground(colors: string[]): string;
+/** Luminancia relativa (0 negro – 1 blanco) de un color hex, para decidir si hace falta un aro. */
+declare function luminance(hex: string): number;
+/**
+ * Fondo pastel de una píldora: cada color mezclado con blanco (queda claro y suave en claro y oscuro), un degradado suave entre
+ * ellos si son varios. Con ese fondo el emoji siempre contrasta.
+ */
+declare function pastelBackground(colors: string[]): string;
+
+type SwatchProps = {
+    /** Nombre de la variante; se resuelve con los colores básicos del SDK. Para vocabulario propio resuelve tú con `createSwatchResolver` y pasa `spec`. */
+    value?: string;
+    /** Lo que se dibuja (color(es) o emoji), ya resuelto: del catálogo (`parseSwatchAttribute`) o de tu `createSwatchResolver`. Manda sobre `value`. */
+    spec?: SwatchSpec | null;
+    size?: number;
+    shape?: 'circle' | 'square';
+    className?: string;
+};
+/**
+ * Muestra de color 2D para variantes: plana, sin sombras ni brillos y sin borde, salvo un aro mínimo cuando el color
+ * se perdería contra el fondo (blanco en tema claro, negro en tema oscuro). Las combinaciones se dibujan en partes iguales.
+ * Es decorativa (aria-hidden): el nombre de la variante debe ir siempre como texto junto a ella.
+ * Con `spec.emoji` dibuja el emoji. Devuelve null si no reconoce nada, para que el llamador muestre solo el texto.
+ */
+declare function Swatch({ value, spec, size, shape, className }: SwatchProps): react.JSX.Element | null;
+
+/** Script de cabecera: aplica el tema guardado antes de pintar (sin parpadeo). Sin preferencia guardada manda el sistema. */
+declare const THEME_INIT_SCRIPT = "try{var t=localStorage.getItem(\"theme\");if(t===\"light\"||t===\"dark\")document.documentElement.setAttribute(\"data-theme\",t)}catch(e){}";
+/**
+ * Botón claro/oscuro. El estado real se lee del DOM tras hidratar (el servidor no sabe la preferencia).
+ * Guarda la elección en localStorage ("theme") y fija `html[data-theme]`; los tokens de la tienda reaccionan a eso.
+ */
+declare function ThemeToggle({ className, themeColors }: {
+    className?: string;
+    themeColors?: {
+        light: string;
+        dark: string;
+    };
+}): react.JSX.Element;
+
+/** Registra el service worker (solo si `enabled`, normalmente producción; requiere HTTPS o localhost). */
+declare function useServiceWorker({ enabled, url, scope }: {
+    enabled: boolean;
+    url?: string;
+    scope?: string;
+}): void;
+/**
+ * Botón "Instalar app": aparece solo cuando el navegador ofrece la instalación (Chrome, Edge, Android).
+ * En iPhone/iPad no existe ese evento: muestra la instrucción de Compartir → Agregar a pantalla de inicio.
+ */
+declare function InstallApp({ className, label, iosHint }: {
+    className?: string;
+    label?: string;
+    iosHint?: string;
+}): react.JSX.Element | null;
+
+export { type ColorEntry, type EmojiEntry, InstallApp, Select, type SelectOption, type SelectProps, Swatch, type SwatchPrefer, type SwatchProps, type SwatchResolver, type SwatchResolverOptions, type SwatchSpec, THEME_INIT_SCRIPT, ThemeToggle, createSwatchResolver, defaultColors, luminance, normalize as normalizeSwatchName, optionHasSwatches, parseSwatchAttribute, pastelBackground, resolveSwatch, resolveSwatchSpec, swatchBackground, useServiceWorker };