@jotis-me/react 0.0.0-stage → 0.1.0

package/dist/components/SectionFooter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Line } from "../internal/line.js";
+/** Pie de sección o de tarjeta con línea superior: un enlace o grupo a la izquierda y las acciones a la derecha. */
+export function SectionFooter({ start, actions, card, className }) {
+    return (_jsxs("div", { className: cx("flex flex-col gap-4 font-body", className), children: [_jsx(Line, {}), _jsxs("div", { className: cx("flex flex-wrap items-center gap-4", card && "px-6 pb-4"), children: [start ?? null, _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-3", children: actions ?? null })] })] }));
+}

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface SectionHeaderProps {
+    /** Título de la sección (`<h2>`): `text-lg` semibold, `text-md` en `sm`. */
+    title: ReactNode;
+    /** Una frase en `text-tertiary` bajo el título. */
+    description?: ReactNode;
+    /** Botones a la derecha: la acción principal, la última. */
+    actions?: ReactNode;
+    /**
+     * Tamaño del título.
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * Línea inferior en `border-secondary`.
+     * @default true
+     */
+    divider?: boolean;
+    /** Lo que va bajo el título, como unas `Tabs` o una búsqueda. */
+    children?: ReactNode;
+    className?: string;
+}
+/** Cabecera de una sección dentro de una página: título, descripción, acciones y línea. */
+export declare function SectionHeader({ title, description, actions, size, divider, children, className, }: SectionHeaderProps): import("react").JSX.Element;

package/dist/components/SectionHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Line } from "../internal/line.js";
+/** Cabecera de una sección dentro de una página: título, descripción, acciones y línea. */
+export function SectionHeader({ title, description, actions, size = "md", divider = true, children, className, }) {
+    return (_jsxs("div", { className: cx("flex flex-col gap-5 font-body", className), children: [_jsxs("div", { className: "flex flex-wrap items-start gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: cx("m-0 font-semibold text-primary", size === "sm" ? "text-md" : "text-lg"), children: title }), description ? _jsx("p", { className: "mt-0.5 mb-0 text-sm text-tertiary", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions }) : null] }), children ?? null, divider ? _jsx(Line, {}) : null] }));
+}

package/dist/components/Select.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+import { type FieldProps, type FieldSize } from "../internal/field.js";
+import { type IconName } from "./Icon.js";
+export type SelectOption = string | {
+    value: string;
+    label: ReactNode;
+};
+export interface SelectProps extends FieldProps, Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    /** Lista corta (hasta ~12). Con más o con búsqueda, usa otro componente. */
+    options: SelectOption[];
+    /** Primera opción, no seleccionable, mientras no haya valor. */
+    placeholder?: string;
+    /**
+     * Alto: `sm` 36 · `md` 40 · `lg` 44.
+     * @default "md"
+     */
+    size?: FieldSize;
+    /** Icono inicial, 20px en `fg-quaternary`. */
+    icon?: IconName;
+}
+/** Desplegable nativo con el aspecto de `Input` y un chevron, para una lista corta. */
+export declare function Select({ label, required, hint, error, options, placeholder, size, icon, id: givenId, className, disabled, ...rest }: SelectProps): import("react").JSX.Element;

package/dist/components/Select.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { controlClasses, describedBy, FieldShell, nativeClasses, } from "../internal/field.js";
+import { Icon } from "./Icon.js";
+/** Desplegable nativo con el aspecto de `Input` y un chevron, para una lista corta. */
+export function Select({ label, required, hint, error, options, placeholder, size = "md", icon, id: givenId, className, disabled, ...rest }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    return (_jsx(FieldShell, { id: id, label: label, required: required, hint: hint, error: error, size: size, className: className, children: _jsxs("div", { className: controlClasses(size, error, disabled), children: [icon ? _jsx(Icon, { name: icon, size: 20 }) : null, _jsxs("select", { id: id, required: required, disabled: disabled, defaultValue: rest.value === undefined && placeholder ? "" : undefined, ...describedBy(id, { hint, error }), ...rest, className: cx(nativeClasses(size), "cursor-pointer appearance-none"), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((o) => {
+                            const { value, label } = typeof o === "string" ? { value: o, label: o } : o;
+                            return (_jsx("option", { value: value, children: label }, value));
+                        })] }), _jsx("span", { className: "pointer-events-none inline-flex", children: _jsx(Icon, { name: "chevron-down", size: 20 }) })] }) }));
+}

package/dist/components/SidebarNav.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { type AvatarLabelProps } from "./AvatarLabel.js";
+import { type IconName } from "./Icon.js";
+export interface SidebarNavItem {
+    icon?: IconName;
+    label: ReactNode;
+    href?: string;
+    /** Página actual: fondo `bg-secondary_hover` y `aria-current="page"`. */
+    active?: boolean;
+    /** Contador o aviso a la derecha, en un `Badge` gris. */
+    badge?: ReactNode;
+}
+export interface SidebarNavLabels {
+    /** Nombre de la navegación. @default "Principal" */
+    nav: string;
+    /** Placeholder y nombre del buscador. @default "Buscar" */
+    search: string;
+    /** Nombre del botón de salir. @default "Cerrar sesión" */
+    logout: string;
+}
+export interface SidebarNavProps {
+    /** Marca arriba: texto (en Bricolage Grotesque bold) o un nodo, como un `AppIcon` con el nombre. */
+    brand?: ReactNode;
+    /** Muestra el buscador bajo la marca. */
+    search?: boolean;
+    items: SidebarNavItem[];
+    /** Ítems pegados abajo, como Ajustes. */
+    footerItems?: Omit<SidebarNavItem, "badge">[];
+    /** Ficha del usuario al pie, con el botón de cerrar sesión. */
+    user?: AvatarLabelProps;
+    /** Al pulsar el botón de cerrar sesión de la ficha del usuario (ampliación sobre la guía). */
+    onLogout?: () => void;
+    /** Textos que trae el componente, para sustituirlos. */
+    labels?: Partial<SidebarNavLabels>;
+    className?: string;
+}
+/** Navegación lateral de 296px de las apps de la suite: marca, búsqueda, secciones, ajustes y ficha del usuario. */
+export declare function SidebarNav({ brand, search, items, footerItems, user, onLogout, labels, className, }: SidebarNavProps): import("react").JSX.Element;

package/dist/components/SidebarNav.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { AvatarLabel } from "./AvatarLabel.js";
+import { Badge } from "./Badge.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { Input } from "./Input.js";
+const ITEM = "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-md font-semibold text-secondary no-underline [&_svg]:text-fg-quaternary";
+const LINK = "cursor-pointer transition-colors duration-100 hover:bg-primary_hover hover:text-secondary_hover focus-visible:shadow-focus-ring focus-visible:outline-none aria-[current=page]:bg-secondary_hover aria-[current=page]:text-secondary_hover aria-[current=page]:[&_svg]:text-fg-tertiary";
+function NavList({ items }) {
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: items.map((item, i) => {
+            const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx(Icon, { name: item.icon, size: 24 }) : null, item.label, item.badge != null ? (_jsx(Badge, { size: "sm", color: "gray", className: "ml-auto", children: item.badge })) : null] }));
+            return (_jsx("li", { children: item.href ? (_jsx("a", { href: item.href, "aria-current": item.active ? "page" : undefined, className: cx(ITEM, LINK), children: content })) : (_jsx("span", { "aria-current": item.active ? "page" : undefined, className: cx(ITEM, "aria-[current=page]:bg-secondary_hover aria-[current=page]:text-secondary_hover aria-[current=page]:[&_svg]:text-fg-tertiary"), children: content })) }, i));
+        }) }));
+}
+/** Navegación lateral de 296px de las apps de la suite: marca, búsqueda, secciones, ajustes y ficha del usuario. */
+export function SidebarNav({ brand, search, items, footerItems, user, onLogout, labels, className, }) {
+    const t = {
+        nav: defaultStrings.mainNav,
+        search: defaultStrings.search,
+        logout: defaultStrings.logout,
+        ...labels,
+    };
+    return (_jsxs("nav", { "aria-label": t.nav, className: cx("flex h-full w-[296px] flex-col gap-6 bg-primary px-4 py-6 font-body shadow-[inset_-1px_0_0_var(--border-secondary)]", className), children: [brand ? (_jsx("div", { className: "flex items-center gap-2 px-2 font-display text-lg font-bold text-primary", children: brand })) : null, search ? (_jsx(Input, { size: "md", icon: "search-lg", placeholder: t.search, "aria-label": t.search })) : null, _jsx(NavList, { items: items }), _jsxs("div", { className: "mt-auto flex flex-col gap-6", children: [footerItems ? _jsx(NavList, { items: footerItems }) : null, user ? (_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pt-6 shadow-[inset_0_1px_0_var(--border-secondary)]", children: [_jsx(AvatarLabel, { size: "md", status: "online", ...user }), _jsx(Button, { hierarchy: "tertiary", size: "sm", iconOnly: "log-out-01", label: t.logout, onClick: onLogout })] })) : null] })] }));
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,15 @@
+export interface SkeletonProps {
+    /** Por defecto, `100%`. */
+    width?: number | string;
+    /** Por defecto, 16px. */
+    height?: number | string;
+    /** Radio; por defecto, `radius-md`. */
+    radius?: number | string;
+    /** Círculo, para avatares. */
+    circle?: boolean;
+    /** N líneas de texto de 12px; la última al 60 %. */
+    lines?: number;
+    className?: string;
+}
+/** Bloque gris que reserva el sitio del contenido mientras carga. Imita la forma real. */
+export declare function Skeleton({ width, height, radius, circle, lines, className }: SkeletonProps): import("react").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+// Pulso suave de la guía (1,4 s); sin animación si el sistema pide menos movimiento
+const BLOCK = "block rounded-md bg-tertiary motion-safe:animate-[pulse_1.4s_ease-in-out_infinite] motion-reduce:animate-none";
+/** Bloque gris que reserva el sitio del contenido mientras carga. Imita la forma real. */
+export function Skeleton({ width, height, radius, circle, lines, className }) {
+    if (lines)
+        return (_jsx("div", { "aria-hidden": "true", className: cx("flex flex-col gap-2", className), children: Array.from({ length: lines }, (_, i) => (_jsx("span", { className: BLOCK, style: { height: 12, width: i === lines - 1 ? "60%" : "100%" } }, i))) }));
+    return (_jsx("span", { "aria-hidden": "true", className: cx(BLOCK, circle && "rounded-full", className), style: { width: width ?? "100%", height: height ?? 16, borderRadius: radius } }));
+}

package/dist/components/Slideout.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface SlideoutProps {
+    /**
+     * Visible. Con `false` no se pinta.
+     * @default true
+     */
+    open?: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Contenido: detalle o formulario. Se desplaza si no cabe. */
+    children?: ReactNode;
+    /** Botones del pie, alineados a la derecha. */
+    actions?: ReactNode;
+    /** Cierra con la X, Escape o un clic fuera. Sin él no hay X y el panel no se puede descartar. */
+    onClose?: () => void;
+    /**
+     * Ancho máximo del panel.
+     * @default 400
+     */
+    width?: number | string;
+    /** Se pinta dentro de su contenedor (posición relativa) en vez de sobre toda la página, sin atrapar el foco. */
+    contained?: boolean;
+}
+/**
+ * Panel lateral derecho para ver o editar el detalle de un elemento sin perder la lista de fondo.
+ * Más de tres campos, o comparar con la lista: slideout. Para confirmar una decisión, `Modal`.
+ */
+export declare function Slideout({ open, title, description, children, actions, onClose, width, contained, }: SlideoutProps): import("react").JSX.Element | null;

package/dist/components/Slideout.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Layer } from "../internal/layer.js";
+import { CloseButton } from "./CloseButton.js";
+/**
+ * Panel lateral derecho para ver o editar el detalle de un elemento sin perder la lista de fondo.
+ * Más de tres campos, o comparar con la lista: slideout. Para confirmar una decisión, `Modal`.
+ */
+export function Slideout({ open = true, title, description, children, actions, onClose, width, contained, }) {
+    const id = useId();
+    if (!open)
+        return null;
+    return (_jsxs(Layer, { contained: contained, onClose: onClose, overlayClassName: "items-stretch justify-end p-0", panelClassName: "flex h-full w-full max-w-[400px] flex-col bg-primary_alt font-body shadow-[var(--shadow-xl),inset_1px_0_0_var(--border-secondary_alt)]", panelStyle: width !== undefined ? { maxWidth: width } : undefined, labelledBy: `${id}-title`, describedBy: description ? `${id}-desc` : undefined, children: [_jsxs("div", { className: "flex gap-2 p-6", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: `${id}-title`, className: "m-0 text-lg font-semibold text-primary", children: title }), description ? (_jsx("p", { id: `${id}-desc`, className: "mt-1 mb-0 text-sm text-tertiary", children: description })) : null] }), onClose ? _jsx(CloseButton, { onClick: onClose, className: "-mt-2 -mr-2" }) : null] }), _jsx("div", { className: "flex flex-1 flex-col gap-6 overflow-auto px-6 pb-6", children: children }), actions ? (_jsx("div", { className: "flex justify-end gap-3 px-6 py-4 shadow-[inset_0_1px_0_var(--border-secondary)]", children: actions })) : null] }));
+}

package/dist/components/Slider.d.ts

@@ -0,0 +1,15 @@
+export interface SliderProps {
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    value?: number;
+    /** @default 50 */
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** Qué se ajusta: "Presupuesto", "Volumen". */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Control deslizante para un valor dentro de un rango; flechas, Inicio y Fin con teclado. */
+export declare function Slider({ min, max, value, defaultValue, onChange, "aria-label": ariaLabel, className, }: SliderProps): import("react").JSX.Element;

package/dist/components/Slider.js

@@ -0,0 +1,17 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as AriaSlider, SliderThumb, SliderTrack } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+/** Control deslizante para un valor dentro de un rango; flechas, Inicio y Fin con teclado. */
+export function Slider({ min = 0, max = 100, value, defaultValue = 50, onChange, "aria-label": ariaLabel, className, }) {
+    return (_jsx(AriaSlider, { minValue: min, maxValue: max, value: value, defaultValue: value === undefined ? defaultValue : undefined, onChange: (v) => onChange?.(v), "aria-label": ariaLabel, 
+        // inline-block como el range nativo: el borde inferior se apoya en la línea base
+        className: cx("inline-block w-full", className), children: _jsx(SliderTrack, { className: "relative h-2 w-full cursor-pointer rounded-full bg-quaternary", children: ({ state }) => {
+                const p = state.getThumbPercent(0);
+                return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-l-full bg-fg-brand-primary", style: { width: `${p * 100}%` } }), _jsx(SliderThumb, { className: "top-1/2 size-6 rounded-full border-2 border-slider-handle-border bg-slider-handle-bg shadow-md outline-none data-focus-visible:shadow-focus-ring", style: ({ defaultStyle }) => ({
+                                ...defaultStyle,
+                                left: `calc((100% - 24px) * ${p})`,
+                                transform: "translateY(-50%)",
+                            }) })] }));
+            } }) }));
+}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
+export interface SpinnerProps {
+    /** Diámetro: `sm` 32 · `md` 48 · `lg` 56 · `xl` 64. */
+    size?: SpinnerSize;
+    /** Texto bajo el círculo. Por defecto, "Cargando…"; `false` lo deja solo para lectores de pantalla. */
+    label?: ReactNode | false;
+    className?: string;
+}
+/** Indicador de carga circular para esperas de más de un segundo sin forma conocida. */
+export declare function Spinner({ size, label, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+const PX = { sm: 32, md: 48, lg: 56, xl: 64 };
+/** Indicador de carga circular para esperas de más de un segundo sin forma conocida. */
+export function Spinner({ size = "md", label, className }) {
+    const px = PX[size];
+    const stroke = px <= 32 ? 4 : 6;
+    const r = (px - stroke) / 2;
+    const circumference = 2 * Math.PI * r;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cx("inline-flex flex-col items-center gap-4 font-body", className), children: [_jsxs("svg", { width: px, height: px, viewBox: `0 0 ${px} ${px}`, "aria-hidden": "true", className: "animate-spin motion-reduce:animate-[spin_3s_linear_infinite]", children: [_jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, className: "stroke-(color:--bg-tertiary)" }), _jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: `${circumference * 0.25} ${circumference}`, className: "stroke-fg-brand-primary" })] }), label === false ? (_jsx("span", { className: "sr-only", children: defaultStrings.loading })) : (_jsx("span", { className: "text-sm font-medium text-secondary", children: label ?? defaultStrings.loading }))] }));
+}

package/dist/components/StreamAlert.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { type StreamEventType, type StreamMotion } from "../internal/stream.js";
+import { type IconName } from "./Icon.js";
+export interface StreamAlertProps {
+    /**
+     * Tipo de evento: decide la etiqueta, el icono y el texto por defecto.
+     * @default "follow"
+     */
+    type?: StreamEventType;
+    /** Quien provoca el evento, en Bricolage 24/32 semibold. */
+    user: ReactNode;
+    /** Cifra del evento: suscripciones regaladas, espectadores del raid, bits o euros donados. */
+    amount?: number;
+    /** Meses de una renovación. */
+    months?: number;
+    /** Nivel de una suscripción. */
+    tier?: number | string;
+    /**
+     * Mensaje del espectador. Siempre texto plano: llega del público y se pinta tal cual, nunca como HTML
+     * (por eso es `string` y no un nodo). Modéralo antes.
+     */
+    message?: string;
+    /** Sustituye al texto por defecto del tipo ("Ya no hay vuelta atrás.", "5,00 €"…). */
+    detail?: ReactNode;
+    /** Sustituye a la etiqueta del tipo ("Nuevo seguidor"…). */
+    label?: ReactNode;
+    /** Sustituye al icono del tipo. */
+    icon?: IconName;
+    /** `enter` entra con fundido y 8px de subida en 250 ms; `exit` sale en 200 ms. Con menos movimiento, solo fundido. */
+    state?: StreamMotion;
+    className?: string;
+}
+/** Alerta de un evento del directo en una tarjeta de 480px, siempre en oscuro. */
+export declare function StreamAlert({ type, user, amount, months, tier, message, detail, label, icon, state, className, }: StreamAlertProps): import("react").JSX.Element;

package/dist/components/StreamAlert.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { STREAM_EVENTS, STREAM_ROOT, streamDetail, streamMotion, } from "../internal/stream.js";
+import { Icon } from "./Icon.js";
+/** Alerta de un evento del directo en una tarjeta de 480px, siempre en oscuro. */
+export function StreamAlert({ type = "follow", user, amount, months, tier, message, detail, label, icon, state, className, }) {
+    const ev = STREAM_EVENTS[type] ?? STREAM_EVENTS.follow;
+    const text = detail ?? streamDetail(type, { amount, months, tier });
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cx(STREAM_ROOT, "flex w-[480px] max-w-full items-start gap-4 rounded-2xl border border-secondary bg-primary_alt p-6 shadow-xl", streamMotion(state), className), children: [_jsx("span", { className: "inline-flex size-12 flex-none items-center justify-center rounded-xl bg-brand-solid text-white", children: _jsx(Icon, { name: icon ?? ev.icon, size: 24 }) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "block text-sm font-medium text-tertiary", children: label ?? ev.label }), _jsx("span", { className: "font-display text-display-xs font-semibold wrap-anywhere text-primary", children: user }), text ? _jsx("span", { className: "text-md text-secondary", children: text }) : null, message ? (_jsx("span", { className: "mt-2 rounded-lg bg-tertiary px-3 py-2 text-md wrap-anywhere text-secondary", children: message })) : null] })] }));
+}

package/dist/components/StreamCountdown.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type StreamTime } from "../internal/stream.js";
+export type StreamCountdownSize = "md" | "lg" | "xl";
+export interface StreamCountdownProps {
+    /** Duración fija en segundos. */
+    seconds?: number;
+    /** Fecha objetivo; manda sobre `seconds`. */
+    target?: StreamTime;
+    /** Hora fija: congela la cuenta (pruebas y vistas previas). */
+    now?: StreamTime;
+    /** Detiene la cuenta. */
+    paused?: boolean;
+    /**
+     * `md` 36px · `lg` 60px · `xl` 96px, o un número en px.
+     * @default "lg"
+     */
+    size?: StreamCountdownSize | number;
+    /** Etiqueta debajo; obligatoria en la práctica si hay dos contadores en pantalla. */
+    label?: ReactNode;
+    className?: string;
+}
+/** Solo para StreamScene: etiqueta más grande (`.jm-st-scene-main .jm-st-count-label` del bundle). No es pública. */
+interface CountdownSlots {
+    labelClassName?: string;
+}
+/** Cuenta atrás en mm:ss (h:mm:ss si pasa de una hora) que llega a 00:00 y se queda ahí, siempre en oscuro. */
+export declare function StreamCountdown(props: StreamCountdownProps): import("react").JSX.Element;
+/** La cuenta con sus huecos internos; la usa StreamScene. */
+export declare function CountdownView({ size, label, className, labelClassName, ...time }: StreamCountdownProps & CountdownSlots): import("react").JSX.Element;
+export {};

package/dist/components/StreamCountdown.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { STREAM_ROOT, secondsLeft, streamClock, TABULAR } from "../internal/stream.js";
+const SIZE = { md: "text-[36px]", lg: "text-[60px]", xl: "text-[96px]" };
+/**
+ * Lógica de la cuenta: un tic por segundo hasta 0, donde se queda. Se reinicia si cambian `seconds`, `target` o
+ * `now`; con `now` o `paused` no corre.
+ */
+function useCountdown({ seconds, target, now, paused }) {
+    const key = `${target != null ? new Date(target).getTime() : "s"}|${seconds ?? 0}|${now != null ? new Date(now).getTime() : "n"}`;
+    const [state, setState] = useState(() => ({ key, left: secondsLeft({ seconds, target, now }) }));
+    if (state.key !== key)
+        setState({ key, left: secondsLeft({ seconds, target, now }) });
+    const frozen = paused || now != null || state.left === 0;
+    useEffect(() => {
+        if (frozen)
+            return;
+        const id = setInterval(() => {
+            setState((s) => ({
+                key: s.key,
+                left: target != null ? secondsLeft({ target }) : Math.max(0, s.left - 1),
+            }));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [frozen, target]);
+    return state.left;
+}
+/** Cuenta atrás en mm:ss (h:mm:ss si pasa de una hora) que llega a 00:00 y se queda ahí, siempre en oscuro. */
+export function StreamCountdown(props) {
+    return _jsx(CountdownView, { ...props });
+}
+/** La cuenta con sus huecos internos; la usa StreamScene. */
+export function CountdownView({ size = "lg", label, className, labelClassName, ...time }) {
+    const left = useCountdown(time);
+    const custom = typeof size === "number";
+    const style = custom ? { fontSize: size } : undefined;
+    return (_jsxs("div", { role: "timer", "aria-live": "off", className: cx(STREAM_ROOT, "inline-flex flex-col items-center gap-1", className), children: [_jsx("span", { 
+                // Con `target` y sin `now`, el servidor y el navegador pueden ir un segundo distintos.
+                suppressHydrationWarning: true, className: cx(TABULAR, 
+                // El tamaño antes que `leading-none`: tailwind-merge quita el interlineado que va antes de un `text-*`.
+                custom ? null : SIZE[size], "leading-none font-semibold tracking-[-0.02em] text-primary"), style: style, children: streamClock(left) }), label ? (_jsx("span", { className: cx("text-sm font-medium text-tertiary", labelClassName), children: label })) : null] }));
+}

package/dist/components/StreamEvents.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { type StreamEventType } from "../internal/stream.js";
+export interface StreamEventItem {
+    type: StreamEventType;
+    user: ReactNode;
+    /** Cifra del evento: euros, bits, espectadores del raid o suscripciones regaladas. */
+    amount?: number;
+    /** Meses de una renovación. */
+    months?: number;
+    /** Sustituye a la línea generada ("Donación · 5,00 €", "Raid entrante · 1.284"). */
+    detail?: ReactNode;
+    /** Hora relativa, como "2 min" o "ahora": se entiende al instante, la absoluta obliga a calcular. */
+    time?: ReactNode;
+    /**
+     * Clave estable del evento (ampliación sobre la guía). Sin ella se deriva del tipo, el usuario y la cifra, para
+     * que con `animate` solo entre la fila nueva cuando llega un evento.
+     */
+    id?: string | number;
+}
+export interface StreamEventsProps {
+    /** Del más reciente al más antiguo. */
+    items: StreamEventItem[];
+    /**
+     * Filas que se ven. Más de siete deja de ser una lista de un vistazo.
+     * @default 5
+     */
+    max?: number;
+    /** @default "Últimos eventos" */
+    title?: ReactNode;
+    /**
+     * Ancho de la lista.
+     * @default 360
+     */
+    width?: number | string;
+    /** La primera fila entra con fundido y 8px de subida al llegar. */
+    animate?: boolean;
+    className?: string;
+}
+/** Lista de los últimos eventos del canal con icono, usuario, detalle y hora relativa, siempre en oscuro. */
+export declare function StreamEvents({ items, max, title, width, animate, className, }: StreamEventsProps): import("react").JSX.Element;

package/dist/components/StreamEvents.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { keyText, STREAM_EVENTS, STREAM_ROOT, stableKeys, streamMotion, streamShort, } from "../internal/stream.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+function contentKey(it) {
+    return `${it.type}|${keyText(it.user)}|${it.amount ?? ""}|${it.months ?? ""}`;
+}
+/** Lista de los últimos eventos del canal con icono, usuario, detalle y hora relativa, siempre en oscuro. */
+export function StreamEvents({ items, max = 5, title, width, animate = false, className, }) {
+    const titleId = useId();
+    const visible = items.slice(0, max);
+    // Clave por contenido (y no por posición): al entrar un evento arriba, las demás filas se conservan.
+    const keys = stableKeys(visible, contentKey);
+    return (_jsxs("div", { className: cx(STREAM_ROOT, "max-w-full overflow-hidden rounded-xl border border-secondary bg-primary_alt", width == null && "w-[360px]", className), style: width == null ? undefined : { width }, children: [_jsx("div", { id: titleId, className: "border-b border-secondary px-4 py-3 text-sm font-semibold text-tertiary", children: title ?? defaultStrings.latestEvents }), _jsx("ul", { "aria-labelledby": titleId, className: "m-0 list-none p-0", children: visible.map((it, i) => {
+                    const ev = STREAM_EVENTS[it.type] ?? STREAM_EVENTS.follow;
+                    return (_jsxs("li", { className: cx("flex items-center gap-3 border-b border-secondary px-4 py-3 last:border-b-0", i === 0 && animate && streamMotion("enter")), children: [_jsx("span", { className: "inline-flex size-8 flex-none items-center justify-center rounded-lg bg-tertiary text-fg-secondary", children: _jsx(Icon, { name: ev.icon, size: 16 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-md font-semibold text-primary", children: it.user }), _jsx("span", { className: "truncate text-sm text-tertiary", children: it.detail ?? streamShort(it.type, it) })] }), it.time != null ? (_jsx("span", { className: "flex-none text-xs text-quaternary", children: it.time })) : null] }, keys[i]));
+                }) })] }));
+}

package/dist/components/StreamGoal.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export interface StreamGoalLabels {
+    /** Pie al llegar a la meta. @default "Meta conseguida. Toca poner otra." */
+    done: string;
+    /** Pie mientras falta: recibe la cifra con su unidad ("716", "40 €"). */
+    remaining: (missing: string) => string;
+}
+export interface StreamGoalProps {
+    /** Nombre de la meta; también nombra la barra. */
+    label: ReactNode;
+    current: number;
+    goal: number;
+    /** Se añade a las cifras ("subs", "€"). */
+    unit?: string;
+    /** @default 420 */
+    width?: number | string;
+    /** Sustituye los textos del pie (ampliación sobre la guía). */
+    labels?: Partial<StreamGoalLabels>;
+    className?: string;
+}
+/** Barra de meta del directo con el avance, lo que falta y el porcentaje, siempre en oscuro. */
+export declare function StreamGoal({ label, current, goal, unit, width, labels, className }: StreamGoalProps): import("react").JSX.Element;

package/dist/components/StreamGoal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { formatNumber } from "../internal/format.js";
+import { STREAM_ROOT, TABULAR } from "../internal/stream.js";
+import { defaultStrings } from "../internal/strings.js";
+/** Barra de meta del directo con el avance, lo que falta y el porcentaje, siempre en oscuro. */
+export function StreamGoal({ label, current, goal, unit, width, labels, className }) {
+    const labelId = useId();
+    const cur = current || 0;
+    const max = goal > 0 ? goal : 1;
+    const pct = Math.min(100, Math.max(0, (cur / max) * 100));
+    const done = cur >= max;
+    const u = unit ? ` ${unit}` : "";
+    const t = {
+        done: defaultStrings.goalDone,
+        remaining: defaultStrings.goalRemaining,
+        ...labels,
+    };
+    return (_jsxs("div", { className: cx(STREAM_ROOT, "max-w-full rounded-xl border border-secondary bg-primary_alt px-5 py-4", width == null && "w-[420px]", className), style: width == null ? undefined : { width }, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { id: labelId, className: "text-md font-semibold text-primary", children: label }), _jsxs("span", { className: cx(TABULAR, "text-sm text-tertiary"), children: [_jsx("b", { className: "font-semibold text-primary", children: formatNumber(cur) }), ` / ${formatNumber(max)}${u}`] })] }), _jsx("div", { role: "progressbar", "aria-labelledby": labelId, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.min(Math.max(cur, 0), max), className: "mt-3 mb-2 h-3.5 overflow-hidden rounded-full bg-quaternary", children: _jsx("div", { className: "h-full rounded-[inherit] bg-brand-solid transition-[width] duration-300 ease-[ease] motion-reduce:transition-none", style: { width: `${pct}%` } }) }), _jsxs("div", { className: cx(TABULAR, "flex justify-between gap-4 text-sm text-tertiary"), children: [_jsx("span", { children: done ? t.done : t.remaining(`${formatNumber(max - cur)}${u}`) }), _jsx("span", { children: `${Math.floor(pct)} %` })] })] }));
+}

package/dist/components/StreamScene.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { type StreamTime } from "../internal/stream.js";
+export type StreamSceneVariant = "starting" | "brb" | "ending" | "offline";
+export interface StreamSceneProps {
+    /** @default "starting" */
+    variant?: StreamSceneVariant;
+    /** Titular en Bricolage a 152px; no más de 24 caracteres. */
+    title?: ReactNode;
+    /** `false` lo oculta. */
+    subtitle?: ReactNode | false;
+    /** Texto de la insignia de estado. */
+    badge?: ReactNode;
+    /** Cuenta atrás en segundos (solo en `starting` y `brb`). */
+    seconds?: number;
+    /** Fecha objetivo de la cuenta atrás (solo en `starting` y `brb`). */
+    target?: StreamTime;
+    /** Hora fija para la cuenta atrás (pruebas). */
+    now?: StreamTime;
+    paused?: boolean;
+    countdownLabel?: ReactNode;
+    /** @default "Tu canal" */
+    channel?: ReactNode;
+    /** Línea central del pie, como la próxima fecha. Una sola información de horario. */
+    next?: ReactNode;
+    /** @default "twitch.tv/tucanal" */
+    handle?: ReactNode;
+    /** Mide `1920 × scale`. Sin él se ajusta al ancho del contenedor (en OBS, a 1920, queda 1:1). */
+    scale?: number;
+    className?: string;
+}
+/**
+ * Escena de 1920×1080 para los momentos sin juego (empezando, pausa, final, offline), siempre en oscuro. Es de
+ * servidor: solo el lienzo (que mide su contenedor sin `scale`) y la cuenta atrás son de cliente.
+ */
+export declare function StreamScene({ variant, title, subtitle, badge, seconds, target, now, paused, countdownLabel, channel, next, handle, scale, className, }: StreamSceneProps): import("react").JSX.Element;

package/dist/components/StreamScene.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { streamGrid } from "../internal/stream.js";
+import { StreamStage } from "../internal/stream-stage.js";
+import { CountdownView } from "./StreamCountdown.js";
+// Textos por defecto: una broma seca por escena y ninguna más (ficha).
+const SCENES = {
+    starting: {
+        badge: "Empezamos pronto",
+        title: "Ya casi",
+        sub: "Últimos retoques. Mientras, el chat puede ir calentando.",
+    },
+    brb: { badge: "Pausa", title: "Vuelvo enseguida", sub: "Hidratación, no drama." },
+    ending: {
+        badge: "Fin del directo",
+        title: "Hasta la próxima",
+        sub: "Gracias por quedarte. Ahora toca dormir como personas.",
+    },
+    offline: {
+        badge: "Sin directo",
+        title: "Ahora mismo, silencio",
+        sub: "Aquí no emite nadie. Mira el horario o vuelve más tarde.",
+    },
+};
+const GRID = streamGrid(96, "70% 65%");
+/**
+ * Escena de 1920×1080 para los momentos sin juego (empezando, pausa, final, offline), siempre en oscuro. Es de
+ * servidor: solo el lienzo (que mide su contenedor sin `scale`) y la cuenta atrás son de cliente.
+ */
+export function StreamScene({ variant = "starting", title, subtitle, badge, seconds, target, now, paused, countdownLabel, channel, next, handle, scale, className, }) {
+    const d = SCENES[variant] ?? SCENES.starting;
+    const countdown = (variant === "starting" || variant === "brb") && (seconds != null || target != null);
+    return (_jsxs(StreamStage, { width: 1920, height: 1080, scale: scale, className: className, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", style: GRID }), _jsxs("div", { className: "absolute inset-[0_0_128px_0] flex flex-col items-center justify-center gap-8 px-[240px] text-center", children: [_jsxs("span", { className: "inline-flex h-14 items-center gap-3.5 rounded-full border-2 border-primary bg-primary_alt px-7 text-[28px] leading-9 font-medium text-secondary", children: [_jsx("span", { "aria-hidden": "true", className: "inline-block size-3.5 flex-none rounded-full bg-fg-brand-primary" }), badge ?? d.badge] }), _jsx("h1", { className: "m-0 font-display text-[152px] leading-[1.04] font-semibold tracking-[-0.02em] text-primary", children: title ?? d.title }), subtitle !== false ? (_jsx("p", { className: "m-0 max-w-[1040px] text-[40px] leading-14 text-tertiary", children: subtitle ?? d.sub })) : null, countdown ? (_jsx(CountdownView, { seconds: seconds, target: target, now: now, paused: paused, size: 176, label: countdownLabel, className: "mt-4 gap-2", labelClassName: "text-[28px] leading-9" })) : null] }), _jsxs("div", { className: "absolute right-20 bottom-14 left-20 flex items-center justify-between gap-10 text-[28px] leading-9 font-medium text-tertiary", children: [_jsx("span", { className: "font-display font-semibold text-primary", children: channel ?? "Tu canal" }), next ? _jsx("span", { children: next }) : null, _jsx("span", { children: handle ?? "twitch.tv/tucanal" })] })] }));
+}