{!inline && suggChips}
{!inline && freqChips}
{justAdded && (
// Wrapper externo centra (transform: translateX(-50%)). Wrapper interno
// hace la animación de escala: si pusiéramos ambos en el mismo nodo,
// los keyframes `transform: scale(...)` borrarían el translateX y el
// toast aparecería pegado al borde derecho hasta que la animación
// terminase — exactamente el trompicón que se ve en iPhone.
✓ {justAdded}
)}
{micPermDenied && (
{app.lang === 'es'
? 'Permiso de micrófono denegado. Actívalo en Ajustes para dictar.'
: 'Microphone permission denied. Enable it in Settings to dictate.'}
)}
{cat ? (
) : (
// Sin texto aún: si auto-cat está OFF, expone botón "+" que abre
// el picker para fijar la categoría desde cero.
)}
setFocused(true)}
onBlur={() => setTimeout(() => setFocused(false), 150)}
onKeyDown={e => { if (e.key === 'Enter') submit(); }}
onPaste={handlePaste}
placeholder={listening ? t.voiceListening : t.addPlaceholder}
style={{
flex: 1, minWidth: 0,
border: 'none', outline: 'none', background: 'transparent',
fontSize: 16, fontWeight: 600, fontFamily: theme.fontDisplay,
color: c.ink, padding: '10px 0',
}}
/>
{name && !showQty && (
)}
{name.trim() && !listening && (
)}
{inline && suggChips}
{inline && freqChips}
{/* Portal a #root: el wrapper del SmartInput es position:absolute y crea
stacking context — sin portal el Sheet quedaría atrapado dentro del
tamaño del wrapper y se vería recortado. */}
{ReactDOM.createPortal(
setCatSheetOpen(false)}
onPick={(catKey) => setManualCat(catKey)}
selected={detectedCat} />,
document.getElementById('root') || document.body,
)}
{bulk && ReactDOM.createPortal(
setBulk(null)}
title={t.bulkPasteTitle}>
);
}
// ─── Sheets: cambiar lista, nueva lista, unirme, compartir, frecuentes ───
// Extrae el token de un input que puede ser:
// - URL nueva: http://host/#/s/TOKEN
// - URL antigua: http://host/shared/TOKEN o http://host/s/TOKEN
// - URL parcial: shop.jarsss8.es/s/TOKEN
// - Solo el token: TOKEN
// Acepta cualquier formato de token (nuestro shortToken xxx-xxx-xxx u otros
// formatos legacy hexadecimales) — extrae todo lo que aparezca después de
// /s/ o /shared/ hasta un delimitador.
function extractToken(raw) {
const s = (raw || '').trim();
if (!s) return '';
const tokenRe = /\/(?:s|shared)\/([^/?#&\s]+)/i;
// URL parseable: mira hash, después pathname.
try {
const u = new URL(s);
const hashM = u.hash.match(tokenRe);
if (hashM) return hashM[1].toLowerCase();
const pathM = u.pathname.match(tokenRe);
if (pathM) return pathM[1].toLowerCase();
} catch (_) { /* no era URL completa */ }
// Búsqueda blanda: busca /s/X o /shared/X dentro del string
const m = s.match(tokenRe);
if (m) return m[1].toLowerCase();
// Token pelado
return s.toLowerCase();
}
// Sheet de unirse a lista: input para pegar enlace/token + opción QR scan
// (usando BarcodeDetector cuando está disponible — Chrome Android, Capacitor
// Android, escritorio. iOS Safari/WKWebView aún no lo soporta, así que en ese
// caso solo se muestra la opción de pegar).
function JoinSheet({ app, theme, onClose }) {
const c = theme.c;
const t = app.t;
const [token, setToken] = React.useState('');
const [scanning, setScanning] = React.useState(false);
const [error, setError] = React.useState('');
const [permDenied, setPermDenied] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const videoRef = React.useRef(null);
const streamRef = React.useRef(null);
const detectorRef = React.useRef(null);
const rafRef = React.useRef(0);
// BarcodeDetector existe en Chromium (Chrome Android, Capacitor Android,
// desktop). Para iOS Safari / WKWebView caemos a jsQR (UMD cargado en
// index.html) que decodifica frames del